diff --git a/frontend/pages/settings/numberRanges.vue b/frontend/pages/settings/numberRanges.vue
index 9d8c6bc..73f6ddf 100644
--- a/frontend/pages/settings/numberRanges.vue
+++ b/frontend/pages/settings/numberRanges.vue
@@ -49,29 +49,54 @@ const resources = {
   }
 }
 
-const numberRanges = ref(auth.activeTenantData.numberRanges || {})
+const createNumberRanges = (ranges = {}) => {
+  const freshRanges = structuredClone(ranges)
 
-Object.keys(resources).forEach((key) => {
-  if (!numberRanges.value[key]) {
-    numberRanges.value[key] = {
-      prefix: "",
-      suffix: "",
-      nextNumber: 1000
+  Object.keys(resources).forEach((key) => {
+    if (!freshRanges[key]) {
+      freshRanges[key] = {
+        prefix: "",
+        suffix: "",
+        nextNumber: 1000
+      }
     }
+  })
+
+  return freshRanges
+}
+
+const numberRanges = ref({})
+const loading = ref(true)
+
+const loadNumberRanges = async () => {
+  loading.value = true
+
+  try {
+    const tenant = await useNuxtApp().$api("/api/tenant")
+    numberRanges.value = createNumberRanges(tenant?.numberRanges || {})
+
+    if (tenant?.id) {
+      auth.activeTenantData = tenant
+    }
+  } finally {
+    loading.value = false
   }
-})
+}
+
+onMounted(loadNumberRanges)
 
 const updateNumberRanges = async (range) => {
-
-  const res = await useNuxtApp().$api(`/api/tenant/numberrange/${range}`,{
+  const tenant = await useNuxtApp().$api(`/api/tenant/numberrange/${range}`,{
     method: "PUT",
     body: {
       numberRange: numberRanges.value[range]
     }
   })
 
-  console.log(res)
-
+  if (tenant?.id) {
+    auth.activeTenantData = tenant
+    numberRanges.value = createNumberRanges(tenant.numberRanges || {})
+  }
 }
 
 
@@ -92,7 +117,13 @@ const updateNumberRanges = async (range) => {
     />
   </UDashboardToolbar>
 
+  <UProgress
+      v-if="loading"
+      animation="carousel"
+      class="m-5 w-1/2"
+  />
   <table
+      v-else
       class="m-3"
   >
     <tr class="text-left">
@@ -103,6 +134,7 @@ const updateNumberRanges = async (range) => {
     </tr>
     <tr
         v-for="key in Object.keys(resources)"
+        :key="key"
     >
       <td>{{resources[key].label}}</td>
       <td>