diff --git a/datasources/static/js/metadata.js b/datasources/static/js/metadata.js
index 887c4a3b06d0faaaed11e1a030cc6a289155798e..89a3ec747c6789c720752d19f31f9e7154396ffa 100644
--- a/datasources/static/js/metadata.js
+++ b/datasources/static/js/metadata.js
@@ -118,15 +118,26 @@ function deleteMetadataForm(event) {
 
 /**
  * Update the star rating display.
+ *
+ * @param url Url to get quality level for a data source - defaults to global setting 'ratingUrl'
+ * @param badgeId Id of badge element to populate with stars - defaults to 'qualityLevelBadge'
  */
-function updateLevelBadge() {
+function updateLevelBadge(url, badgeId) {
     "use strict";
 
-    fetch(ratingUrl).then(
+    if (!url) {
+        url = ratingUrl;
+    }
+
+    if (!badgeId) {
+        badgeId = "qualityLevelBadge";
+    }
+
+    fetch(url).then(
         (response) => response.json()
 
     ).then(function (data) {
-        const levelBadge = document.getElementById("qualityLevelBadge");
+        const levelBadge = document.getElementById(badgeId);
 
         // Clear existing rating
         while (levelBadge.hasChildNodes()) {
diff --git a/datasources/templates/datasources/datasource/detail.html b/datasources/templates/datasources/datasource/detail.html
index 64d16d5cfd49e7da72ab704ae490c3abe4770347..ab1c44aa2f02d474a7142aa56674adb288d2bc8e 100644
--- a/datasources/templates/datasources/datasource/detail.html
+++ b/datasources/templates/datasources/datasource/detail.html
@@ -1,6 +1,12 @@
 {% extends "base.html" %}
 {% load bootstrap4 %}
 
+{% block extra_head %}
+    {% load static %}
+
+    <script type="application/javascript" src="{% static 'js/metadata.js' %}"></script>
+{% endblock %}
+
 {% block content %}
     <nav aria-label="breadcrumb">
         <ol class="breadcrumb">
@@ -38,18 +44,7 @@
 
                     <script type="application/javascript">
                         document.addEventListener("DOMContentLoaded", function () {
-                            fetch("{% url 'api:datasource-quality' pk=datasource.pk %}").then(
-                                response => response.json()
-
-                            ).then(function (data) {
-                                const levelBadge = document.getElementById("qualityLevelBadge");
-
-                                for (let i = 0; i < data.quality; i++) {
-                                    const star = document.createElement("i");
-                                    star.classList.add("fas", "fa-star");
-                                    levelBadge.appendChild(star);
-                                }
-                            });
+                            updateLevelBadge("{% url 'api:datasource-quality' pk=datasource.pk %}");
                         });
                     </script>
                 </small>
diff --git a/datasources/templates/datasources/datasource/list.html b/datasources/templates/datasources/datasource/list.html
index 460e4613b9d5a1903f361fbb5e77a9664e1ed4c9..f06cac0638415f4568030eae77312e20809ee06c 100644
--- a/datasources/templates/datasources/datasource/list.html
+++ b/datasources/templates/datasources/datasource/list.html
@@ -1,6 +1,12 @@
 {% extends "base.html" %}
 {% load bootstrap4 %}
 
+{% block extra_head %}
+    {% load static %}
+
+    <script type="application/javascript" src="{% static 'js/metadata.js' %}"></script>
+{% endblock %}
+
 {% block content %}
     <nav aria-label="breadcrumb">
         <ol class="breadcrumb">
@@ -60,20 +66,11 @@
 
                         <script type="application/javascript">
                             // TODO Should this be a single function to loop over all data sources?
-
                             document.addEventListener("DOMContentLoaded", function () {
-                                fetch("{% url 'api:datasource-quality' pk=datasource.pk %}").then(
-                                    response => response.json()
-
-                                ).then(function (data) {
-                                    levelBadge = document.getElementById("qualityLevelBadge{{ datasource.pk }}");
-
-                                    for (let i = 0; i < data.quality; i++) {
-                                        const star = document.createElement("i");
-                                        star.classList.add("fas", "fa-star");
-                                        levelBadge.appendChild(star);
-                                    }
-                                });
+                                updateLevelBadge(
+                                    "{% url 'api:datasource-quality' pk=datasource.pk %}",
+                                    "qualityLevelBadge{{ datasource.pk }}"
+                                );
                             });
                         </script>
                     </p>
diff --git a/profiles/templates/index.html b/profiles/templates/index.html
index 732e933b68e7d3cb73856451f423433a64d5ed08..152b53de15c013cdc697f45e91ce115ae4864e3b 100644
--- a/profiles/templates/index.html
+++ b/profiles/templates/index.html
@@ -3,7 +3,10 @@
 
 {% block extra_head %}
     {% load static %}
+
     <link rel="stylesheet" href="{% static 'css/masthead.css' %}">
+
+    <script type="application/javascript" src="{% static 'js/metadata.js' %}"></script>
 {% endblock %}
 
 {% block pre_content %}
@@ -148,7 +151,22 @@
                                      style="width: 150px;">
 
                                 <div class="card-body d-flex flex-column pb-2">
-                                    <h5 class="card-title">{{ datasource.name }}</h5>
+                                    <h5 class="card-title">
+                                        {{ datasource.name }}
+
+                                        <span id="qualityLevelBadge{{ datasource.pk }}"
+                                              class="badge badge-primary float-right"></span>
+
+                                        <script type="application/javascript">
+                                            // TODO Should this be a single function to loop over all data sources?
+                                            document.addEventListener("DOMContentLoaded", function () {
+                                                updateLevelBadge(
+                                                    "{% url 'api:datasource-quality' pk=datasource.pk %}",
+                                                    "qualityLevelBadge{{ datasource.pk }}"
+                                                );
+                                            });
+                                        </script>
+                                    </h5>
                                     <p class="card-text">{{ datasource.description|truncatechars:120 }}</p>
 
                                     <p class="card-text text-right mt-auto">