diff --git a/assets/css/app.scss b/assets/css/app.scss
index afb254e..194b491 100644
--- a/assets/css/app.scss
+++ b/assets/css/app.scss
@@ -111,6 +111,10 @@ p {
     color: #0a87f5;
 }
 
+.font-roboto {
+    font-family: 'Roboto', sans-serif;
+}
+
 .nav-animated-bg {
     background: linear-gradient(75deg,#dc1eb9,#0a87f5);
     background-size: 400% 400%;
diff --git a/assets/js/page/Home.js b/assets/js/page/Home.js
index 1ee9846..59d050b 100644
--- a/assets/js/page/Home.js
+++ b/assets/js/page/Home.js
@@ -297,6 +297,7 @@ class PageHome {
             $('#public-supply').html(NumberFormat.format(response.data.publicSupply, false) + ' Nav');
             $('#private-supply').html(NumberFormat.format(response.data.privateSupply, false) + ' xNav');
             $('#wrapped-supply').html(NumberFormat.format(response.data.wrappedSupply, false) + ' wNav');
+            $('#total-supply').html(NumberFormat.format(response.data.circulatingSupply, false) + ' Nav');
         });
     }
 
diff --git a/templates/home/components/hud.html.twig b/templates/home/components/hud.html.twig
index d9112c1..c18f469 100644
--- a/templates/home/components/hud.html.twig
+++ b/templates/home/components/hud.html.twig
@@ -1,6 +1,6 @@
 <div class="row">
     <div class="col-12 col-xs-12 col-sm-12 col-md-4 col-lg-4 margin-top">
-        <h2>Nav in Circulation</h2>
+        <h2>Nav in Circulation <span class="pr-2 float-right font-roboto" id="total-supply">{{ loaderDots('sm') }}</span></h2>
         <table class="table table-striped table-nav">
             <tr>
                 <th>Public</th>