diff --git a/frontend/src/services/InstituteService.ts b/frontend/src/services/InstituteService.ts
index e7cbbf7..75d823c 100644
--- a/frontend/src/services/InstituteService.ts
+++ b/frontend/src/services/InstituteService.ts
@@ -68,7 +68,7 @@ export default {
     }
     return ApiService.apiAxios.get(url);
   },
-  getDistrictView(id: string): Promise<AxiosResponse> {
+  getDistrictView(id: string | undefined): Promise<AxiosResponse> {
     return ApiService.apiAxios.get(`/api/v1/district/${id}`)
   },
   getDistrictContactTypeCodes(): Promise<AxiosResponse> {
diff --git a/frontend/src/stores/app.ts b/frontend/src/stores/app.ts
index 4d95096..e211ea4 100644
--- a/frontend/src/stores/app.ts
+++ b/frontend/src/stores/app.ts
@@ -57,8 +57,8 @@ export const useAppStore = defineStore('app', {
     isIndependentSchool(schoolCategoryCode: String){
       return schoolCategoryCode == 'INDEPEND'
     },
-    setDistricts(): void {
-        InstituteService.getDistricts()
+    async setDistricts(): Promise<void> {
+        await InstituteService.getDistricts()
           .then((response) => {
             // Handle the response data
             this.districts = response.data
@@ -68,8 +68,8 @@ export const useAppStore = defineStore('app', {
             console.error(error)
           })
     },
-    setAuthorityList(): void {
-      InstituteService.getAuthorityList().then((response) => {
+    async setAuthorityList(): Promise<void> {
+      await InstituteService.getAuthorityList().then((response) => {
         //handle the response
         this.authorities = response.data
       })
@@ -78,7 +78,7 @@ export const useAppStore = defineStore('app', {
         console.error(error)
       })
     },
-    setSchoolList(): void {
+    async setSchoolList(): Promise<void> {
 
       InstituteService.getSchoolList()
       .then((response) => {
@@ -91,7 +91,7 @@ export const useAppStore = defineStore('app', {
       })
 
     },
-    setOffshoreSchoolList(): void {
+    async setOffshoreSchoolList(): Promise<void> {
 
       InstituteService.getOffshoreSchoolList()
       .then((response) => {
@@ -104,7 +104,7 @@ export const useAppStore = defineStore('app', {
       })
 
     },
-    async setCodes() {
+    async setCodes(): Promise<void> {
       await InstituteService.loadCache().then((response) => {
         //console.log(response)
       }).catch((error) => {
diff --git a/frontend/src/views/DistrictView.vue b/frontend/src/views/DistrictView.vue
index aaa7f9b..96289cf 100644
--- a/frontend/src/views/DistrictView.vue
+++ b/frontend/src/views/DistrictView.vue
@@ -13,7 +13,7 @@ import DisplayAddress from '@/components/common/DisplayAddress.vue'
 import DisplayAlert from '@/components/common/DisplayAlert.vue'
 
 const appStore = useAppStore()
-const districtId = ref<string | null>(null) // Initialize with null initially
+const districtId = ref<string | undefined>(undefined) // Initialize with null initially
 const district = reactive({ value: {} as District })
 const schools = ref<any>([])
 const contacts = ref<any>([])
@@ -74,19 +74,18 @@ function downloadDistrictSchools() {
     appStore.exportCSV(csv)
   })
 }
-
-onMounted(async () => {
+async function getDistrictId(): Promise<string> {
   const route = useRoute()
+  return appStore.getDistrictByDistrictNumber(String(route.params.districtNumber))?.districtId ?? ''
+}
+async function getDistrictData(): Promise<void> {
   // Set the districtId inside the onMounted hook; null if districtId not found
-  // if (isValidDistrictNumber(String(route.params.districtNumber))) {
-  //   districtId.value =
-  //     appStore.getDistrictByDistrictNumber(String(route.params.districtNumber))?.districtId ?? null
-  // }
-  districtId.value = '349664f8-47e3-a226-075c-081d56d93d39'
+  districtId.value = await getDistrictId() //move this getter to the backend? QUESTION
+  //districtId.value = '349664f8-47e3-a226-075c-081d56d93d39'
   // get district data
   if (!!districtId.value) {
     try {
-      const response = await InstituteService.getDistrictView(districtId.value as string)
+      const response = await InstituteService.getDistrictView(districtId.value)
       if (response.data?.districtData?.contacts) {
         district.value = response.data
         contacts.value = response.data?.districtData?.contacts
@@ -175,13 +174,10 @@ onMounted(async () => {
       console.error(error)
     }
   }
-  // get district contact type codes
-  // try {
-  //   const response = await InstituteService.getDistrictContactTypeCodes()
-  //   districtContactTypeCodes.value = response.data
-  // } catch (error) {
-  //   console.error(error)
-  // }
+}
+
+onMounted(async () => {
+  await getDistrictData()
 })
 </script>