diff --git a/src/data/pages/projects.ts b/src/data/pages/projects.ts
index 2e193652e..87f1b98f2 100644
--- a/src/data/pages/projects.ts
+++ b/src/data/pages/projects.ts
@@ -1,6 +1,8 @@
-import api from '../../services/api'
-import { Project } from '../../pages/projects/types'
+import { sleep } from '../../services/utils'
+import projectsDb from './projects-db.json'
+import usersDb from './users-db.json'
 
+// Simulate API calls
 export type Pagination = {
   page: number
   perPage: number
@@ -8,11 +10,11 @@ export type Pagination = {
 }
 
 export type Sorting = {
-  sortBy: 'project_owner' | 'team' | 'created_at'
+  sortBy: keyof (typeof projectsDb)[number] | undefined
   sortingOrder: 'asc' | 'desc' | null
 }
 
-const getSortItem = (obj: any, sortBy: Sorting['sortBy']) => {
+const getSortItem = (obj: any, sortBy: keyof (typeof projectsDb)[number]) => {
   if (sortBy === 'project_owner') {
     return obj.project_owner.fullname
   }
@@ -21,15 +23,21 @@ const getSortItem = (obj: any, sortBy: Sorting['sortBy']) => {
     return obj.team.map((user: any) => user.fullname).join(', ')
   }
 
-  if (sortBy === 'created_at') {
+  if (sortBy === 'creation_date') {
     return new Date(obj[sortBy])
   }
 
   return obj[sortBy]
 }
 
-export const getProjects = async (options: Partial<Sorting> & Pagination) => {
-  const projects: Project[] = await fetch(api.allProjects()).then((r) => r.json())
+export const getProjects = async (options: Sorting & Pagination) => {
+  await sleep(1000)
+
+  const projects = projectsDb.map((project) => ({
+    ...project,
+    project_owner: usersDb.find((user) => user.id === project.project_owner)! as (typeof usersDb)[number],
+    team: usersDb.filter((user) => project.team.includes(user.id)) as (typeof usersDb)[number][],
+  }))
 
   if (options.sortBy && options.sortingOrder) {
     projects.sort((a, b) => {
@@ -52,24 +60,43 @@ export const getProjects = async (options: Partial<Sorting> & Pagination) => {
     pagination: {
       page: options.page,
       perPage: options.perPage,
-      total: projects.length,
+      total: projectsDb.length,
     },
   }
 }
 
-export const addProject = async (project: Omit<Project, 'id' | 'created_at'>) => {
-  const headers = new Headers()
-  headers.append('Content-Type', 'application/json')
+export const addProject = async (project: Omit<(typeof projectsDb)[number], 'id' | 'creation_date'>) => {
+  await sleep(1000)
+
+  const newProject = {
+    ...project,
+    id: projectsDb.length + 1,
+    creation_date: new Date().toLocaleDateString('gb', { day: 'numeric', month: 'short', year: 'numeric' }),
+  }
 
-  return fetch(api.allProjects(), { method: 'POST', body: JSON.stringify(project), headers }).then((r) => r.json())
+  projectsDb.push(newProject)
+
+  return {
+    ...newProject,
+    project_owner: usersDb.find((user) => user.id === project.project_owner)! as (typeof usersDb)[number],
+    team: usersDb.filter((user) => project.team.includes(user.id)) as (typeof usersDb)[number][],
+  }
 }
 
-export const updateProject = async (project: Omit<Project, 'created_at'>) => {
-  const headers = new Headers()
-  headers.append('Content-Type', 'application/json')
-  return fetch(api.project(project.id), { method: 'PUT', body: JSON.stringify(project), headers }).then((r) => r.json())
+export const updateProject = async (project: (typeof projectsDb)[number]) => {
+  await sleep(1000)
+
+  const index = projectsDb.findIndex((p) => p.id === project.id)
+  projectsDb[index] = project
+
+  return project
 }
 
-export const removeProject = async (project: Project) => {
-  return fetch(api.project(project.id), { method: 'DELETE' })
+export const removeProject = async (project: (typeof projectsDb)[number]) => {
+  await sleep(1000)
+
+  const index = projectsDb.findIndex((p) => p.id === project.id)
+  projectsDb.splice(index, 1)
+
+  return project
 }
diff --git a/src/data/pages/users.ts b/src/data/pages/users.ts
index b04fa2abf..a8e9d5134 100644
--- a/src/data/pages/users.ts
+++ b/src/data/pages/users.ts
@@ -27,12 +27,12 @@ const getSortItem = (obj: any, sortBy: string) => {
 
 export const getUsers = async (filters: Partial<Filters & Pagination & Sorting>) => {
   const { isActive, search, sortBy, sortingOrder } = filters
-  let filteredUsers: User[] = await fetch(api.allUsers()).then((r) => r.json())
+  let filteredUsers: User[] = await fetch(api.getAllUsers()).then((r) => r.json())
 
-  filteredUsers = filteredUsers.filter((user) => user.active === isActive)
+  filteredUsers = filteredUsers.filter((user) => user.isActive === isActive)
 
   if (search) {
-    filteredUsers = filteredUsers.filter((user) => user.fullname.toLowerCase().includes(search.toLowerCase()))
+    filteredUsers = filteredUsers.filter((user) => user.fullName.toLowerCase().includes(search.toLowerCase()))
   }
 
   if (sortBy && sortingOrder) {
@@ -64,15 +64,15 @@ export const addUser = async (user: User) => {
   const headers = new Headers()
   headers.append('Content-Type', 'application/json')
 
-  return fetch(api.allUsers(), { method: 'POST', body: JSON.stringify(user), headers }).then((r) => r.json())
+  return fetch(api.getAllUsers(), { method: 'POST', body: JSON.stringify(user), headers })
 }
 
 export const updateUser = async (user: User) => {
   const headers = new Headers()
   headers.append('Content-Type', 'application/json')
-  return fetch(api.user(user.id), { method: 'PUT', body: JSON.stringify(user), headers }).then((r) => r.json())
+  return fetch(api.getUser(user.id), { method: 'PUT', body: JSON.stringify(user), headers })
 }
 
 export const removeUser = async (user: User) => {
-  return fetch(api.user(user.id), { method: 'DELETE' })
+  return fetch(api.getUser(user.id), { method: 'DELETE' })
 }
diff --git a/src/pages/admin/dashboard/cards/ProjectTable.vue b/src/pages/admin/dashboard/cards/ProjectTable.vue
index 5296b4fa5..b29f2a137 100644
--- a/src/pages/admin/dashboard/cards/ProjectTable.vue
+++ b/src/pages/admin/dashboard/cards/ProjectTable.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import { defineVaDataTableColumns } from 'vuestic-ui'
+import { Project } from '../../../projects/types'
 import UserAvatar from '../../../users/widgets/UserAvatar.vue'
 import ProjectStatusBadge from '../../../projects/components/ProjectStatusBadge.vue'
 import { useProjects } from '../../../projects/composables/useProjects'
 import { Pagination } from '../../../../data/pages/projects'
 import { ref } from 'vue'
-import { useProjectUsers } from '../../../projects/composables/useProjectUsers'
 
 const columns = defineVaDataTableColumns([
   { label: 'Name', key: 'project_name', sortable: true },
@@ -18,7 +18,11 @@ const { projects, isLoading, sorting } = useProjects({
   pagination,
 })
 
-const { getTeamOptions, getUserById } = useProjectUsers()
+const avatarColor = (userName: string) => {
+  const colors = ['primary', '#FFD43A', '#ADFF00', '#262824', 'danger']
+  const index = userName.charCodeAt(0) % colors.length
+  return colors[index]
+}
 </script>
 
 <template>
@@ -43,16 +47,23 @@ const { getTeamOptions, getUserById } = useProjectUsers()
           </template>
           <template #cell(project_owner)="{ rowData }">
             <div class="flex items-center gap-2 ellipsis max-w-[230px]">
-              <UserAvatar
-                v-if="getUserById(rowData.project_owner)"
-                :user="getUserById(rowData.project_owner)!"
-                size="small"
-              />
-              {{ getUserById(rowData.project_owner)?.fullname }}
+              <UserAvatar :user="rowData.project_owner" size="small" />
+              {{ rowData.project_owner.fullname }}
             </div>
           </template>
           <template #cell(team)="{ rowData: project }">
-            <VaAvatarGroup size="small" :options="getTeamOptions(project.team)" :max="2" />
+            <VaAvatarGroup
+              size="small"
+              :options="
+                (project as Project).team.map((user) => ({
+                  label: user.fullname,
+                  src: user.avatar,
+                  fallbackText: user.fullname[0],
+                  color: avatarColor(user.fullname),
+                }))
+              "
+              :max="2"
+            />
           </template>
           <template #cell(status)="{ rowData: project }">
             <ProjectStatusBadge :status="project.status" />
diff --git a/src/pages/projects/ProjectsPage.vue b/src/pages/projects/ProjectsPage.vue
index 10c887553..c62677981 100644
--- a/src/pages/projects/ProjectsPage.vue
+++ b/src/pages/projects/ProjectsPage.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, provide } from 'vue'
+import { ref } from 'vue'
 import { useLocalStorage } from '@vueuse/core'
 import { useProjects } from './composables/useProjects'
 import ProjectCards from './widgets/ProjectCards.vue'
@@ -7,20 +7,11 @@ import ProjectTable from './widgets/ProjectsTable.vue'
 import EditProjectForm from './widgets/EditProjectForm.vue'
 import { Project } from './types'
 import { useModal, useToast } from 'vuestic-ui'
-import { useProjectUsers } from './composables/useProjectUsers'
 
 const doShowAsCards = useLocalStorage('projects-view', true)
 
 const { projects, update, add, isLoading, remove, pagination, sorting } = useProjects()
 
-const { users, getTeamOptions, getUserById } = useProjectUsers()
-
-provide('ProjectsPage', {
-  users,
-  getTeamOptions,
-  getUserById,
-})
-
 const projectToEdit = ref<Project | null>(null)
 const doShowProjectFormModal = ref(false)
 
diff --git a/src/pages/projects/composables/useProjectUsers.ts b/src/pages/projects/composables/useProjectUsers.ts
deleted file mode 100644
index 60c6e57eb..000000000
--- a/src/pages/projects/composables/useProjectUsers.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import { useUsers } from '../../users/composables/useUsers'
-import { Project } from '../types'
-
-export function useProjectUsers() {
-  const { users } = useUsers()
-
-  const getUserById = (userId: string) => {
-    return users.value.find(({ id }) => userId === id)
-  }
-
-  const avatarColor = (userName: string) => {
-    const colors = ['primary', '#FFD43A', '#ADFF00', '#262824', 'danger']
-    const index = userName.charCodeAt(0) % colors.length
-    return colors[index]
-  }
-
-  const getTeamOptions = (team: Project['team']) => {
-    return team.reduce(
-      (acc, userId) => {
-        const user = getUserById(userId)
-
-        if (user) {
-          acc.push({
-            label: user.fullname,
-            src: user.avatar,
-            fallbackText: user.fullname[0],
-            color: avatarColor(user.fullname),
-          })
-        }
-
-        return acc
-      },
-      [] as Record<string, string>[],
-    )
-  }
-
-  return {
-    users,
-    getUserById,
-    getTeamOptions,
-  }
-}
diff --git a/src/pages/projects/composables/useProjects.ts b/src/pages/projects/composables/useProjects.ts
index 866e2217f..1e42a8604 100644
--- a/src/pages/projects/composables/useProjects.ts
+++ b/src/pages/projects/composables/useProjects.ts
@@ -1,53 +1,79 @@
-import { Ref, ref, unref, computed } from 'vue'
-import { Sorting, Pagination } from '../../../data/pages/projects'
+import { Ref, ref, unref } from 'vue'
+import {
+  getProjects,
+  addProject,
+  updateProject,
+  removeProject,
+  Sorting,
+  Pagination,
+} from '../../../data/pages/projects'
 import { Project } from '../types'
-import { useProjectsStore } from '../../../stores/projects'
+import { watchIgnorable } from '@vueuse/core'
 
 const makePaginationRef = () => ref<Pagination>({ page: 1, perPage: 10, total: 0 })
-const makeSortingRef = () => ref<Sorting>({ sortBy: 'created_at', sortingOrder: 'desc' })
+const makeSortingRef = () => ref<Sorting>({ sortBy: 'creation_date', sortingOrder: 'desc' })
 
 export const useProjects = (options?: { sorting?: Ref<Sorting>; pagination?: Ref<Pagination> }) => {
   const isLoading = ref(false)
-  const projectsStore = useProjectsStore()
+  const projects = ref<Project[]>([])
 
   const { sorting = makeSortingRef(), pagination = makePaginationRef() } = options ?? {}
 
   const fetch = async () => {
     isLoading.value = true
-    await projectsStore.getAll({
-      sorting: unref(sorting),
-      pagination: unref(pagination),
+    const { data, pagination: newPagination } = await getProjects({
+      ...unref(sorting),
+      ...unref(pagination),
+    })
+    projects.value = data as Project[]
+
+    ignoreUpdates(() => {
+      pagination.value = newPagination
     })
 
     isLoading.value = false
   }
 
+  const { ignoreUpdates } = watchIgnorable([pagination, sorting], fetch, { deep: true })
+
   fetch()
 
   return {
     isLoading,
 
-    projects: computed(() => projectsStore.items),
+    projects,
 
     fetch,
 
-    async add(project: Omit<Project, 'id' | 'created_at'>) {
+    async add(project: Omit<Project, 'id' | 'creation_date'>) {
       isLoading.value = true
-      await projectsStore.add(project)
+      await addProject({
+        ...project,
+        project_owner: project.project_owner.id,
+        team: project.team.map((user) => user.id),
+      })
       await fetch()
       isLoading.value = false
     },
 
     async update(project: Project) {
       isLoading.value = true
-      await projectsStore.update(project)
+      await updateProject({
+        ...project,
+        project_owner: project.project_owner.id,
+        team: project.team.map((user) => user.id),
+      })
       await fetch()
       isLoading.value = false
     },
 
     async remove(project: Project) {
       isLoading.value = true
-      await projectsStore.remove(project)
+      await removeProject({
+        ...project,
+        project_owner: project.project_owner.id,
+        team: project.team.map((user) => user.id),
+      })
       await fetch()
       isLoading.value = false
     },
diff --git a/src/pages/projects/types.ts b/src/pages/projects/types.ts
index bbe5c54b6..febd4b1a3 100644
--- a/src/pages/projects/types.ts
+++ b/src/pages/projects/types.ts
@@ -1,17 +1,15 @@
 import { User } from '../users/types'
 
-export type UUID = `${string}-${string}-${string}-${string}-${string}`
-
 export type Project = {
-  id: UUID
+  id: number
   project_name: string
-  project_owner: User['id']
-  team: User['id'][]
+  project_owner: Omit<User, 'projects'>
+  team: Omit<User, 'projects'>[]
   status: 'important' | 'completed' | 'archived' | 'in progress'
-  created_at: string
+  creation_date: string
 }
 
-export type EmptyProject = Omit<Project, 'id' | 'project_owner' | 'created_at' | 'status'> & {
+export type EmptyProject = Omit<Project, 'id' | 'project_owner' | 'creation_date' | 'status'> & {
   project_owner: Project['project_owner'] | undefined
   status: Project['status'] | undefined
 }
diff --git a/src/pages/projects/widgets/EditProjectForm.vue b/src/pages/projects/widgets/EditProjectForm.vue
index 98d6bd0fc..3c3b10012 100644
--- a/src/pages/projects/widgets/EditProjectForm.vue
+++ b/src/pages/projects/widgets/EditProjectForm.vue
@@ -2,9 +2,9 @@
 import { computed, ref, watch } from 'vue'
 import { EmptyProject, Project } from '../types'
 import { SelectOption } from 'vuestic-ui'
+import { useUsers } from '../../users/composables/useUsers'
 import ProjectStatusBadge from '../components/ProjectStatusBadge.vue'
 import UserAvatar from '../../users/widgets/UserAvatar.vue'
-import { useUsersStore } from '../../../stores/users'
 
 const props = defineProps<{
   project: Project | null
@@ -41,8 +41,6 @@ defineExpose({
   isFormHasUnsavedChanges,
 })
 
-const usersStore = useUsersStore()
-
 watch(
   () => props.project,
   () => {
@@ -60,8 +58,8 @@ watch(
 
 const required = (v: string | SelectOption) => !!v || 'This field is required'
 
-const ownerFiltersSearch = ref('')
-const teamFiltersSearch = ref('')
+const { users: teamUsers, filters: teamFilters } = useUsers({ pagination: ref({ page: 1, perPage: 100, total: 10 }) })
+const { users: ownerUsers, filters: ownerFilters } = useUsers({ pagination: ref({ page: 1, perPage: 100, total: 10 }) })
 </script>
 
 <template>
@@ -69,38 +67,36 @@ const teamFiltersSearch = ref('')
     <VaInput v-model="newProject.project_name" label="Project name" :rules="[required]" />
     <VaSelect
       v-model="newProject.project_owner"
-      v-model:search="ownerFiltersSearch"
+      v-model:search="ownerFilters.search"
       searchable
       label="Owner"
       text-by="fullname"
       track-by="id"
-      value-by="id"
       :rules="[required]"
-      :options="usersStore.items"
+      :options="ownerUsers"
     >
       <template #content="{ value: user }">
         <div v-if="user" :key="user.id" class="flex items-center gap-1 mr-4">
-          <UserAvatar v-if="false" :user="user" size="18px" />
+          <UserAvatar :user="user" size="18px" />
           {{ user.fullname }}
         </div>
       </template>
     </VaSelect>
     <VaSelect
       v-model="newProject.team"
-      v-model:search="teamFiltersSearch"
+      v-model:search="teamFilters.search"
       label="Team"
       text-by="fullname"
       track-by="id"
-      value-by="id"
       multiple
       :rules="[(v: any) => ('length' in v && v.length > 0) || 'This field is required']"
-      :options="usersStore.items"
+      :options="teamUsers"
       :max-visible-options="$vaBreakpoint.mdUp ? 3 : 1"
     >
       <template #content="{ valueArray }">
-        <template v-if="valueArray?.length">
+        <template v-if="valueArray">
           <div v-for="(user, index) in valueArray" :key="user.id" class="flex items-center gap-1 mr-2">
-            <UserAvatar v-if="user" :user="user" size="18px" />
+            <UserAvatar :user="user" size="18px" />
             {{ user.fullname }}{{ index < valueArray.length - 1 ? ',' : '' }}
           </div>
         </template>
diff --git a/src/pages/projects/widgets/ProjectCards.vue b/src/pages/projects/widgets/ProjectCards.vue
index fc9a1b9a0..1416d5e04 100644
--- a/src/pages/projects/widgets/ProjectCards.vue
+++ b/src/pages/projects/widgets/ProjectCards.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { type PropType, inject } from 'vue'
-import { type Project } from '../types'
+import { PropType } from 'vue'
+import { Project } from '../types'
 import ProjectStatusBadge from '../components/ProjectStatusBadge.vue'
 
 defineProps({
@@ -19,7 +19,11 @@ defineEmits<{
   (event: 'delete', project: Project): void
 }>()
 
-const { getUserById, getTeamOptions } = inject<any>('ProjectsPage')
+const avatarColor = (userName: string) => {
+  const colors = ['primary', '#FFD43A', '#ADFF00', '#262824', 'danger']
+  const index = userName.charCodeAt(0) % colors.length
+  return colors[index]
+}
 </script>
 
 <template>
@@ -35,16 +39,27 @@ const { getUserById, getTeamOptions } = inject<any>('ProjectsPage')
       outlined
     >
       <VaCardContent class="flex flex-col h-full">
-        <div class="text-[var(--va-secondary)]">{{ new Date(project.created_at).toDateString() }}</div>
+        <div class="text-[var(--va-secondary)]">{{ project.creation_date }}</div>
         <div class="flex flex-col items-center gap-4 grow">
           <h4 class="va-h4 text-center self-stretch overflow-hidden line-clamp-2 text-ellipsis">
             {{ project.project_name }}
           </h4>
           <p>
             <span class="text-[var(--va-secondary)]">Owner: </span>
-            <span v-if="getUserById(project.project_owner)">{{ getUserById(project.project_owner)!.fullname }}</span>
+            <span>{{ project.project_owner.fullname }}</span>
           </p>
-          <VaAvatarGroup class="my-4" :options="getTeamOptions(project.team)" :max="5" />
+          <VaAvatarGroup
+            class="my-4"
+            :options="
+              project.team.map((user) => ({
+                label: user.fullname,
+                src: user.avatar,
+                fallbackText: user.fullname[0],
+                color: avatarColor(user.fullname),
+              }))
+            "
+            :max="5"
+          />
           <ProjectStatusBadge :status="project.status" />
         </div>
         <VaDivider class="my-6" />
diff --git a/src/pages/projects/widgets/ProjectsTable.vue b/src/pages/projects/widgets/ProjectsTable.vue
index f5ed183d1..e44fc4cdc 100644
--- a/src/pages/projects/widgets/ProjectsTable.vue
+++ b/src/pages/projects/widgets/ProjectsTable.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { PropType, computed, inject } from 'vue'
+import { PropType, computed } from 'vue'
 import { defineVaDataTableColumns } from 'vuestic-ui'
 import { Project } from '../types'
 import UserAvatar from '../../users/widgets/UserAvatar.vue'
@@ -12,7 +12,7 @@ const columns = defineVaDataTableColumns([
   { label: 'Project owner', key: 'project_owner', sortable: true },
   { label: 'Team', key: 'team', sortable: true },
   { label: 'Status', key: 'status', sortable: true },
-  { label: 'Creation Date', key: 'created_at', sortable: true },
+  { label: 'Creation Date', key: 'creation_date', sortable: true },
   { label: ' ', key: 'actions' },
 ])
 
@@ -44,11 +44,16 @@ const emit = defineEmits<{
   (event: 'delete', project: Project): void
 }>()
 
+const avatarColor = (userName: string) => {
+  const colors = ['primary', '#FFD43A', '#ADFF00', '#262824', 'danger']
+  const index = userName.charCodeAt(0) % colors.length
+  return colors[index]
+}
+
 const sortByVModel = useVModel(props, 'sortBy', emit)
 const sortingOrderVModel = useVModel(props, 'sortingOrder', emit)
 
 const totalPages = computed(() => Math.ceil(props.pagination.total / props.pagination.perPage))
-const { getUserById, getTeamOptions } = inject<any>('ProjectsPage')
 </script>
 
 <template>
@@ -66,13 +71,24 @@ const { getUserById, getTeamOptions } = inject<any>('ProjectsPage')
         </div>
       </template>
       <template #cell(project_owner)="{ rowData }">
-        <div v-if="getUserById(rowData.project_owner)" class="flex items-center gap-2 ellipsis max-w-[230px]">
-          <UserAvatar :user="getUserById(rowData.project_owner)" size="small" />
-          {{ getUserById(rowData.project_owner).fullname }}
+        <div class="flex items-center gap-2 ellipsis max-w-[230px]">
+          <UserAvatar :user="rowData.project_owner" size="small" />
+          {{ rowData.project_owner.fullname }}
         </div>
       </template>
       <template #cell(team)="{ rowData: project }">
-        <VaAvatarGroup size="small" :options="getTeamOptions(project.team)" :max="5" />
+        <VaAvatarGroup
+          size="small"
+          :options="
+            (project as Project).team.map((user) => ({
+              label: user.fullname,
+              src: user.avatar,
+              fallbackText: user.fullname[0],
+              color: avatarColor(user.fullname),
+            }))
+          "
+          :max="5"
+        />
       </template>
       <template #cell(status)="{ rowData: project }">
         <ProjectStatusBadge :status="project.status" />
diff --git a/src/pages/users/UsersPage.vue b/src/pages/users/UsersPage.vue
index 83e64d516..ed5e55d20 100644
--- a/src/pages/users/UsersPage.vue
+++ b/src/pages/users/UsersPage.vue
@@ -5,12 +5,10 @@ import EditUserForm from './widgets/EditUserForm.vue'
 import { User } from './types'
 import { useUsers } from './composables/useUsers'
 import { useModal, useToast } from 'vuestic-ui'
-import { useProjects } from '../projects/composables/useProjects'
 
 const doShowEditUserModal = ref(false)
 
 const { users, isLoading, filters, sorting, pagination, ...usersApi } = useUsers()
-const { projects } = useProjects()
 
 const userToEdit = ref<User | null>(null)
 
@@ -30,13 +28,13 @@ const onUserSaved = async (user: User) => {
   if (userToEdit.value) {
     await usersApi.update(user)
     notify({
-      message: `${user.fullname} has been updated`,
+      message: `${user.fullName} has been updated`,
       color: 'success',
     })
   } else {
     await usersApi.add(user)
     notify({
-      message: `${user.fullname} has been created`,
+      message: `${user.fullName} has been created`,
       color: 'success',
     })
   }
@@ -45,7 +43,7 @@ const onUserSaved = async (user: User) => {
 const onUserDelete = async (user: User) => {
   await usersApi.remove(user)
   notify({
-    message: `${user.fullname} has been deleted`,
+    message: `${user.fullName} has been deleted`,
     color: 'success',
   })
 }
@@ -99,7 +97,6 @@ const beforeEditFormModalClose = async (hide: () => unknown) => {
         v-model:sort-by="sorting.sortBy"
         v-model:sorting-order="sorting.sortingOrder"
         :users="users"
-        :projects="projects"
         :loading="isLoading"
         :pagination="pagination"
         @editUser="showEditUserModal"
diff --git a/src/pages/users/composables/useUsers.ts b/src/pages/users/composables/useUsers.ts
index b361f44d2..bab35c89e 100644
--- a/src/pages/users/composables/useUsers.ts
+++ b/src/pages/users/composables/useUsers.ts
@@ -1,10 +1,10 @@
-import { Ref, ref, unref, watch, computed } from 'vue'
-import type { Filters, Pagination, Sorting } from '../../../data/pages/users'
+import { Ref, ref, unref, watch } from 'vue'
+import { getUsers, updateUser, addUser, removeUser, type Filters, Pagination, Sorting } from '../../../data/pages/users'
 import { User } from '../types'
-import { useUsersStore } from '../../../stores/users'
+import { watchIgnorable } from '@vueuse/core'
 
 const makePaginationRef = () => ref<Pagination>({ page: 1, perPage: 10, total: 0 })
-const makeSortingRef = () => ref<Sorting>({ sortBy: 'fullname', sortingOrder: null })
+const makeSortingRef = () => ref<Sorting>({ sortBy: 'fullName', sortingOrder: null })
 const makeFiltersRef = () => ref<Partial<Filters>>({ isActive: true, search: '' })
 
 export const useUsers = (options?: {
@@ -13,21 +13,28 @@ export const useUsers = (options?: {
   filters?: Ref<Partial<Filters>>
 }) => {
   const isLoading = ref(false)
-  const usersStore = useUsersStore()
+  const users = ref<User[]>([])
 
   const { filters = makeFiltersRef(), sorting = makeSortingRef(), pagination = makePaginationRef() } = options || {}
 
   const fetch = async () => {
     isLoading.value = true
-    await usersStore.getAll({
-      filters: unref(filters),
-      sorting: unref(sorting),
-      pagination: unref(pagination),
+    const { data, pagination: newPagination } = await getUsers({
+      ...unref(filters),
+      ...unref(sorting),
+      ...unref(pagination),
+    })
+    users.value = data
+
+    ignoreUpdates(() => {
+      pagination.value = newPagination
     })
 
     isLoading.value = false
   }
 
+  const { ignoreUpdates } = watchIgnorable([pagination, sorting], fetch, { deep: true })
+
   watch(
     filters,
     () => {
@@ -42,29 +49,33 @@ export const useUsers = (options?: {
 
   return {
     isLoading,
+
     filters,
     sorting,
     pagination,
 
-    users: computed(() => usersStore.items),
+    users,
 
     fetch,
 
     async add(user: User) {
       isLoading.value = true
-      await usersStore.add(user)
+      await addUser(user)
+      await fetch()
       isLoading.value = false
     },
 
     async update(user: User) {
       isLoading.value = true
-      await usersStore.update(user)
+      await updateUser(user)
+      await fetch()
       isLoading.value = false
     },
 
     async remove(user: User) {
       isLoading.value = true
-      await usersStore.remove(user)
+      await removeUser(user)
+      await fetch()
       isLoading.value = false
     },
   }
diff --git a/src/pages/users/types.ts b/src/pages/users/types.ts
index 5c35dd4a4..882efbb5b 100644
--- a/src/pages/users/types.ts
+++ b/src/pages/users/types.ts
@@ -1,15 +1,15 @@
-export type UserRole = 'admin' | 'user' | 'owner'
+export type UserRole = 'ADMIN' | 'USER' | 'OWNER'
 
 export type UUID = `${string}-${string}-${string}-${string}-${string}`
 
 export type User = {
   id: UUID
-  fullname: string
+  fullName: string
   email: string
   username: string
   role: UserRole
   avatar: string
-  projects: UUID[]
+  projects: string[]
   notes: string
-  active: boolean
+  isActive: boolean
 }
diff --git a/src/pages/users/widgets/EditUserForm.vue b/src/pages/users/widgets/EditUserForm.vue
index 38f5a3bfe..d5ed5bd4d 100644
--- a/src/pages/users/widgets/EditUserForm.vue
+++ b/src/pages/users/widgets/EditUserForm.vue
@@ -19,12 +19,12 @@ const props = defineProps({
 
 const defaultNewUser: Omit<User, 'id'> = {
   avatar: '',
-  fullname: '',
-  role: 'user',
+  fullName: '',
+  role: 'USER',
   username: '',
   notes: '',
   email: '',
-  active: true,
+  isActive: true,
   projects: [],
 }
 
@@ -82,9 +82,9 @@ const onSave = () => {
 }
 
 const roleSelectOptions: { text: Capitalize<Lowercase<UserRole>>; value: UserRole }[] = [
-  { text: 'Admin', value: 'admin' },
-  { text: 'User', value: 'user' },
-  { text: 'Owner', value: 'owner' },
+  { text: 'Admin', value: 'ADMIN' },
+  { text: 'User', value: 'USER' },
+  { text: 'Owner', value: 'OWNER' },
 ]
 
 const { projects } = useProjects({ pagination: ref({ page: 1, perPage: 9999, total: 10 }) })
@@ -113,7 +113,7 @@ const { projects } = useProjects({ pagination: ref({ page: 1, perPage: 9999, tot
     <div class="self-stretch flex-col justify-start items-start gap-4 flex">
       <div class="flex gap-4 flex-col sm:flex-row w-full">
         <VaInput
-          v-model="newUser.fullname"
+          v-model="newUser.fullName"
           label="Full name"
           class="w-full sm:w-1/2"
           :rules="[validators.required]"
@@ -139,9 +139,7 @@ const { projects } = useProjects({ pagination: ref({ page: 1, perPage: 9999, tot
           v-model="newUser.projects"
           label="Projects"
           class="w-full sm:w-1/2"
-          :options="projects"
-          value-by="id"
-          text-by="project_name"
+          :options="projects.map((p) => p.project_name)"
           :rules="[validators.required]"
           name="projects"
           multiple
@@ -163,7 +161,7 @@ const { projects } = useProjects({ pagination: ref({ page: 1, perPage: 9999, tot
         </div>
 
         <div class="flex items-center w-1/2 mt-4">
-          <VaCheckbox v-model="newUser.active" label="Active" class="w-full" name="active" />
+          <VaCheckbox v-model="newUser.isActive" label="Active" class="w-full" name="active" />
         </div>
       </div>
 
diff --git a/src/pages/users/widgets/UserAvatar.vue b/src/pages/users/widgets/UserAvatar.vue
index 89911ca65..b64f5f21c 100644
--- a/src/pages/users/widgets/UserAvatar.vue
+++ b/src/pages/users/widgets/UserAvatar.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { PropType } from 'vue'
-import { User } from '../types'
+import { BaseUser } from '../types'
 
 const avatarColor = (userName: string) => {
   const colors = ['primary', '#FFD43A', '#ADFF00', '#262824', 'danger']
@@ -10,7 +10,7 @@ const avatarColor = (userName: string) => {
 
 defineProps({
   user: {
-    type: Object as PropType<User>,
+    type: Object as PropType<BaseUser>,
     required: true,
   },
   size: {
@@ -28,7 +28,7 @@ const isUrl = (avatar: string) => {
   <VaAvatar
     :size="size"
     :src="isUrl(user.avatar) ? user.avatar : ''"
-    :fallback-text="user.avatar || user.fullname[0]"
-    :color="avatarColor(user.fullname)"
+    :fallback-text="user.avatar || user.fullName[0]"
+    :color="avatarColor(user.fullName)"
   />
 </template>
diff --git a/src/pages/users/widgets/UsersTable.vue b/src/pages/users/widgets/UsersTable.vue
index af1668130..22ff8a3f1 100644
--- a/src/pages/users/widgets/UsersTable.vue
+++ b/src/pages/users/widgets/UsersTable.vue
@@ -8,7 +8,7 @@ import { useVModel } from '@vueuse/core'
 import { Project } from '../../projects/types'
 
 const columns = defineVaDataTableColumns([
-  { label: 'Full Name', key: 'fullname', sortable: true },
+  { label: 'Full Name', key: 'fullName', sortable: true },
   { label: 'Email', key: 'email', sortable: true },
   { label: 'Username', key: 'username', sortable: true },
   { label: 'Role', key: 'role', sortable: true },
@@ -21,10 +21,6 @@ const props = defineProps({
     type: Array as PropType<User[]>,
     required: true,
   },
-  projects: {
-    type: Array as PropType<Project[]>,
-    required: true,
-  },
   loading: { type: Boolean, default: false },
   pagination: { type: Object as PropType<Pagination>, required: true },
   sortBy: { type: String as PropType<Sorting['sortBy']>, required: true },
@@ -43,9 +39,9 @@ const sortByVModel = useVModel(props, 'sortBy', emit)
 const sortingOrderVModel = useVModel(props, 'sortingOrder', emit)
 
 const roleColors: Record<UserRole, string> = {
-  admin: 'danger',
-  user: 'background-element',
-  owner: 'warning',
+  ADMIN: 'danger',
+  USER: 'background-element',
+  OWNER: 'warning',
 }
 
 const totalPages = computed(() => Math.ceil(props.pagination.total / props.pagination.perPage))
@@ -55,7 +51,7 @@ const { confirm } = useModal()
 const onUserDelete = async (user: User) => {
   const agreed = await confirm({
     title: 'Delete user',
-    message: `Are you sure you want to delete ${user.fullname}?`,
+    message: `Are you sure you want to delete ${user.fullName}?`,
     okText: 'Delete',
     cancelText: 'Cancel',
     size: 'small',
@@ -67,28 +63,19 @@ const onUserDelete = async (user: User) => {
   }
 }
 
-const formatProjectNames = (projects: Project['id'][]) => {
-  const names = projects.reduce((acc, p) => {
-    const project = props.projects?.find(({ id }) => p === id)
-
-    if (project) {
-      acc.push(project.project_name)
-    }
-
-    return acc
-  }, [] as string[])
-  if (names.length === 0) return 'No projects'
-  if (names.length <= 2) {
-    return names.map((name) => name).join(', ')
+const formatProjectNames = (projects: Project[]) => {
+  if (projects.length === 0) return 'No projects'
+  if (projects.length <= 2) {
+    return projects.map((project) => project).join(', ')
   }
 
   return (
-    names
+    projects
       .slice(0, 2)
-      .map((name) => name)
+      .map((project) => project)
       .join(', ') +
     ' + ' +
-    (names.length - 2) +
+    (projects.length - 2) +
     ' more'
   )
 }
@@ -102,10 +89,10 @@ const formatProjectNames = (projects: Project['id'][]) => {
     :items="users"
     :loading="$props.loading"
   >
-    <template #cell(fullname)="{ rowData }">
+    <template #cell(fullName)="{ rowData }">
       <div class="flex items-center gap-2 max-w-[230px] ellipsis">
         <UserAvatar :user="rowData as User" size="small" />
-        {{ rowData.fullname }}
+        {{ rowData.fullName }}
       </div>
     </template>
 
diff --git a/src/services/api.ts b/src/services/api.ts
index 18db870aa..f7b96cf30 100644
--- a/src/services/api.ts
+++ b/src/services/api.ts
@@ -1,12 +1,8 @@
 const apiBaseUrl = import.meta.env.VITE_API_BASE_URL
 
 export default {
-  allUsers: () => `${apiBaseUrl}/users`,
-  user: (id: string) => `${apiBaseUrl}/users/${id}`,
-  users: ({ page, pageSize }: { page: number; pageSize: number }) =>
+  getAllUsers: () => `${apiBaseUrl}/users`,
+  getUser: (id: string) => `${apiBaseUrl}/users/${id}`,
+  getUsers: ({ page, pageSize }: { page: number; pageSize: number }) =>
     `${apiBaseUrl}/users/?page=${page}&pageSize=${pageSize}`,
-  allProjects: () => `${apiBaseUrl}/projects`,
-  project: (id: string) => `${apiBaseUrl}/projects/${id}`,
-  projects: ({ page, pageSize }: { page: number; pageSize: number }) =>
-    `${apiBaseUrl}/projects/?page=${page}&pageSize=${pageSize}`,
 }
diff --git a/src/stores/projects.ts b/src/stores/projects.ts
deleted file mode 100644
index 9b53f545f..000000000
--- a/src/stores/projects.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import { defineStore } from 'pinia'
-import { addProject, getProjects, Pagination, removeProject, Sorting, updateProject } from '../data/pages/projects'
-import { Project } from '../pages/projects/types'
-
-export const useProjectsStore = defineStore('projects', {
-  state: () => {
-    return {
-      items: [] as Project[],
-    }
-  },
-
-  actions: {
-    async getAll(options: { pagination: Pagination; sorting?: Sorting }) {
-      const { data } = await getProjects({
-        ...options.sorting,
-        ...options.pagination,
-      })
-      this.items = data
-    },
-
-    async add(project: Omit<Project, 'id' | 'created_at'>) {
-      const [newProject] = await addProject(project)
-      this.items.push(newProject)
-    },
-
-    async update(project: Project) {
-      const [updatedProject] = await updateProject(project)
-      const index = this.items.findIndex(({ id }) => id === project.id)
-      this.items.splice(index, 1, updatedProject)
-    },
-
-    async remove(project: Project) {
-      const isRemoved = await removeProject(project)
-
-      if (isRemoved) {
-        const index = this.items.findIndex(({ id }) => id === project.id)
-        this.items.splice(index, 1)
-      }
-    },
-  },
-})
diff --git a/src/stores/users.ts b/src/stores/users.ts
deleted file mode 100644
index 60687c9dc..000000000
--- a/src/stores/users.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import { defineStore } from 'pinia'
-import { addUser, type Filters, getUsers, Pagination, removeUser, Sorting, updateUser } from '../data/pages/users'
-import { User } from '../pages/users/types'
-
-export const useUsersStore = defineStore('users', {
-  state: () => {
-    return {
-      items: [] as User[],
-    }
-  },
-
-  actions: {
-    async getAll(options: { pagination?: Pagination; sorting?: Sorting; filters?: Partial<Filters> }) {
-      const { data } = await getUsers({
-        ...options.filters,
-        ...options.sorting,
-        ...options.pagination,
-      })
-      this.items = data
-    },
-
-    async add(user: User) {
-      const [newUser] = await addUser(user)
-      this.items.push(newUser)
-    },
-
-    async update(user: User) {
-      const [updatedUser] = await updateUser(user)
-      const index = this.items.findIndex(({ id }) => id === user.id)
-      this.items.splice(index, 1, updatedUser)
-    },
-
-    async remove(user: User) {
-      const isRemoved = await removeUser(user)
-
-      if (isRemoved) {
-        const index = this.items.findIndex(({ id }) => id === user.id)
-        this.items.splice(index, 1)
-      }
-    },
-  },
-})
diff --git a/vite.config.ts b/vite.config.ts
index 97ff4cfc1..fb7a55248 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -20,4 +20,13 @@ export default defineConfig({
       include: resolve(dirname(fileURLToPath(import.meta.url)), './src/i18n/locales/**'),
     }),
   ],
+  server: {
+    proxy: {
+      '/api': {
+        target: 'http://localhost:3000',
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/api/, ''),
+      },
+    },
+  },
 })