diff --git a/frontend/src/components/BuildServerStats.vue b/frontend/src/components/BuildServerStats.vue
index 16f0798..e36763c 100644
--- a/frontend/src/components/BuildServerStats.vue
+++ b/frontend/src/components/BuildServerStats.vue
@@ -11,7 +11,7 @@
         class="stats-iframe"
         loading="lazy"
         title="Buildserver statistics dashboard"
-        src="https://stats.itsh.dev/public-dashboards/0fb04abb0c5e4b7390cf26a98e6dead1" />
+        :src="iframeSrc" />
     </div>
   </section>
 </template>
@@ -19,15 +19,23 @@
 <script lang="ts" setup>
 import { useDisplay } from 'vuetify'
 import { computed } from 'vue'
+import { useTheme } from '@/composables/useTheme'
 
 const { width } = useDisplay()
+const { isDark } = useTheme()
 
 const GRAPH_HEIGHT = 335
 const NUMBER_OF_GRAPHS = 4
+const GRAFANA_BASE_URL =
+  'https://stats.itsh.dev/public-dashboards/0fb04abb0c5e4b7390cf26a98e6dead1'
 
 const iframeHeight = computed(() =>
   width.value <= 800 ? `${NUMBER_OF_GRAPHS * GRAPH_HEIGHT}px` : '420px'
 )
+
+const iframeSrc = computed(
+  () => `${GRAFANA_BASE_URL}?theme=${isDark.value ? 'dark' : 'light'}`
+)
 </script>
 
 <style scoped>