diff --git a/src/cljs/commiteth/repos.cljs b/src/cljs/commiteth/repos.cljs
index faf66b8..d46a9cd 100644
--- a/src/cljs/commiteth/repos.cljs
+++ b/src/cljs/commiteth/repos.cljs
@@ -80,9 +80,9 @@
   (let [repos-loading? (rf/subscribe [:repos-loading?])]
     (fn []
       (if @repos-loading?
-        [:div
+        [:div.view-loading-container
          [:div.ui.active.inverted.dimmer
-          [:div.ui.text.loader "Loading"]]]
+          [:div.ui.text.loader.view-loading-label "Loading"]]]
         [repos-list]))))
 
 (defn repos-page []
diff --git a/src/cljs/commiteth/usage_metrics.cljs b/src/cljs/commiteth/usage_metrics.cljs
index 0b223c5..5153fd4 100644
--- a/src/cljs/commiteth/usage_metrics.cljs
+++ b/src/cljs/commiteth/usage_metrics.cljs
@@ -45,9 +45,9 @@
   (let [metrics-loading? (rf/subscribe [:metrics-loading?])]
     (fn []
       (if @metrics-loading?
-        [:div
+        [:div.view-loading-container
          [:div.ui.active.inverted.dimmer
-          [:div.ui.text.loader "Loading"]]]
+          [:div.ui.text.loader.view-loading-label "Loading"]]]
         [:div
          [:h2 "Usage metrics for the past 30 days"]
          [chartjs-component]]))))
diff --git a/src/less/style.less b/src/less/style.less
index 84b5cfb..4b57279 100644
--- a/src/less/style.less
+++ b/src/less/style.less
@@ -291,6 +291,23 @@
     }
 }
 
+.view-loading-container {
+    padding: 64px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    height: auto;
+    border-radius: 10px;
+
+    .ui.inverted.dimmer {
+        background-color: transparent;
+    }
+}
+
+.view-loading-label {
+    font-size: 18px !important;
+}
+
 .repo-label {
     color: #42505c;
     font-family: "PostGrotesk-Medium";