diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index df78b0d..6c13460 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -4,9 +4,19 @@
       <main-nav />
 
       <v-main>
-        <build-server-stats />
-        <currently-building />
-        <packages />
+        <v-sheet v-if="!lastUpdated || isLoading" class="mt-2" color="transparent">
+          <h5 class="text-h5">Fetching Data</h5>
+        </v-sheet>
+
+        <v-sheet v-else-if="error" class="mt-2" color="transparent">
+          <h5 class="text-h5">Can't fetch data. Please try again later</h5>
+        </v-sheet>
+
+        <template v-else>
+          <build-server-stats />
+          <currently-building />
+          <packages />
+        </template>
       </v-main>
     </v-container>
   </v-app>
@@ -15,6 +25,25 @@
 <script lang="ts" setup>
 import MainNav from '@/components/MainNav.vue'
 import BuildServerStats from '@/components/BuildServerStats.vue'
-import Packages from '@/components/Packages.vue'
 import CurrentlyBuilding from '@/components/CurrentlyBuilding.vue'
+import Packages from '@/components/Packages.vue'
+import { useDataStore } from '@/stores/dataStore'
+import { computed, onMounted, onUnmounted } from 'vue'
+
+const dataStore = useDataStore()
+
+const isLoading = computed(() => dataStore.loading)
+const error = computed(() => dataStore.error)
+const lastUpdated = computed(() => {
+  if (!dataStore.data) return null
+  return dataStore.data.lastUpdated
+})
+
+onMounted(async () => {
+  await dataStore.startAutoRefresh()
+})
+
+onUnmounted(() => {
+  dataStore.stopAutoRefresh()
+})
 </script>