diff --git a/client/src/components/filters.vue b/client/src/components/filters.vue
index 4eb1b359..03d9084d 100644
--- a/client/src/components/filters.vue
+++ b/client/src/components/filters.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <v-row class="ma-1">
+<v-row class="ma-1">
       <v-col cols="12" class="px-2">
         <v-alert color="warning"
           >You can change the selected office to discover the team in other offices.</v-alert
@@ -12,40 +12,45 @@
         <h4 class="font-weight-medium">Select Office</h4>
       </v-col>
       <v-col cols="12" sm="12" md="12" class="pa-1">
-        <div>
-          <v-autocomplete
-            clearable
-            v-model="office"
-            :items="offices"
-            label="Office"
-            @update:model-value="handleOfficeChange"
-            return-object
-            item-title="country"
-          >
-          </v-autocomplete>
-        </div>
-      </v-col>
+          <div>
+            <v-autocomplete clearable v-model="office" :items="offices.state.value" label="Office"
+              @update:model-value="handleOfficeChange" return-object item-title="country">
+            </v-autocomplete>
+          </div>
+           </v-col>
     </v-row>
   </div>
 </template>
 
 <script lang="ts">
-import { ref } from 'vue'
-import { useRouter } from 'vue-router'
+import { ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
 
-import type { Country } from '@/types'
+import type { Api } from '@/types'
 
 export default {
   name: 'officeFilters',
   props: ['offices'],
 
-  setup() {
+  setup(props) {
     const $router = useRouter()
-    const office = ref<Country>()
+    const office = ref<Api.Inputs.Office>()
+    const $route = useRoute()
+
 
     const handleOfficeChange = () => {
       $router.push({ path: '/users', query: { location_id: office.value?.id } })
     }
+
+
+    watch(
+      () => props.offices.state.value,
+      async (newValue) => {
+        if ($route.query.location_id && props.offices.state.value) {
+          office.value = props.offices.state.value.find((office: any) => office.id === Number($route.query.location_id));
+        }
+      },
+    );
     return {
       office,
       handleOfficeChange
diff --git a/client/src/types/api.ts b/client/src/types/api.ts
index f23eabbe..41e017b2 100644
--- a/client/src/types/api.ts
+++ b/client/src/types/api.ts
@@ -366,6 +366,7 @@ export module Api {
     }
 
     export type Office = {
+      id?: number 
       name: string
       country: string
       weekend: string
diff --git a/client/src/views/UsersView.vue b/client/src/views/UsersView.vue
index f6ed5b9e..db1515f3 100644
--- a/client/src/views/UsersView.vue
+++ b/client/src/views/UsersView.vue
@@ -37,7 +37,7 @@
 
 <script lang="ts">
 import type { Api, Country } from '@/types'
-import { ref, watch } from 'vue'
+import { onMounted, ref, watch } from 'vue'
 import { $api } from '@/clients'
 import UserCard from '@/components/userCard.vue'
 import officeFilters from '@/components/filters.vue'
@@ -50,21 +50,26 @@ export default {
     officeFilters
   },
   setup() {
-    const offices = ref<Country[]>([])
+    const offices = useAsyncState($api.office.list(), [], { immediate: true })
     const $route = useRoute()
     let isFirstLoad = true
     const page = ref(1)
     const count = ref<number>(0)
 
+    function setCount(data: any) {
+      if (data?.count) {
+        count.value = Math.ceil(data?.count / 10)
+      } else {
+        count.value = 0
+      }
+    }
+
     useAsyncState(
       $api.users.list({ location_id: $route.query.location_id, page: page.value }),
       undefined,
       {
         onSuccess(data) {
-          if (data?.count) {
-            count.value = data.count / 10
-            count.value = Math.ceil(data.count / 10)
-          }
+          setCount(data)
           users.execute(undefined, data?.results || [])
         }
       }
@@ -72,14 +77,6 @@ export default {
 
     const users = useAsyncState(
       async (users: Api.User[]) => {
-        if (isFirstLoad) {
-          offices.value = Array.from(new Set(users.map((user) => user.location.id))).map((id) => {
-            const user = users.find((u) => u.location.id === id)
-            return { id: user?.location.id ?? 0, country: user?.location.country ?? '' }
-          })
-        }
-
-        isFirstLoad = false
         return users
       },
       [],
@@ -95,6 +92,7 @@ export default {
           undefined,
           {
             onSuccess(data) {
+              setCount(data)
               users.execute(undefined, data?.results || [])
             }
           }
@@ -110,6 +108,7 @@ export default {
           undefined,
           {
             onSuccess(data) {
+              setCount(data)
               users.execute(undefined, data?.results || [])
             }
           }
@@ -117,6 +116,8 @@ export default {
       }
     )
 
+
+
     return {
       users,
       page,