diff --git a/.env.example b/.env.example
index c61cc7529..854aae654 100644
--- a/.env.example
+++ b/.env.example
@@ -5,3 +5,5 @@ VITE_APP_INCLUDE_DEMOS=
 VITE_APP_ROUTER_MODE_HISTORY=
 
 VITE_APP_BUILD_VERSION=
+
+VITE_API_BASE_URL=
diff --git a/.gitignore b/.gitignore
index c3bb0dbc3..f9d0c5bb8 100644
--- a/.gitignore
+++ b/.gitignore
@@ -11,6 +11,7 @@ node_modules
 dist
 dist-ssr
 *.local
+.env
 
 # Editor directories and files
 .vscode/*
@@ -25,3 +26,4 @@ dist-ssr
 
 # Local Netlify folder
 .netlify
+
diff --git a/package.json b/package.json
index 82226f019..e5c57494f 100644
--- a/package.json
+++ b/package.json
@@ -35,6 +35,7 @@
     "register-service-worker": "^1.7.1",
     "sass": "^1.69.5",
     "serve": "^14.2.1",
+    "uuid": "^11.0.3",
     "vue": "3.5.8",
     "vue-chartjs": "^5.3.0",
     "vue-i18n": "^9.6.2",
diff --git a/src/data/pages/projects.ts b/src/data/pages/projects.ts
index 87f1b98f2..8d75390d6 100644
--- a/src/data/pages/projects.ts
+++ b/src/data/pages/projects.ts
@@ -1,8 +1,6 @@
-import { sleep } from '../../services/utils'
-import projectsDb from './projects-db.json'
-import usersDb from './users-db.json'
+import api from '../../services/api'
+import { Project } from '../../pages/projects/types'
 
-// Simulate API calls
 export type Pagination = {
   page: number
   perPage: number
@@ -10,93 +8,36 @@ export type Pagination = {
 }
 
 export type Sorting = {
-  sortBy: keyof (typeof projectsDb)[number] | undefined
+  sortBy: 'project_owner' | 'team' | 'created_at'
   sortingOrder: 'asc' | 'desc' | null
 }
 
-const getSortItem = (obj: any, sortBy: keyof (typeof projectsDb)[number]) => {
-  if (sortBy === 'project_owner') {
-    return obj.project_owner.fullname
-  }
-
-  if (sortBy === 'team') {
-    return obj.team.map((user: any) => user.fullname).join(', ')
-  }
-
-  if (sortBy === 'creation_date') {
-    return new Date(obj[sortBy])
-  }
-
-  return obj[sortBy]
-}
-
-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) => {
-      a = getSortItem(a, options.sortBy!)
-      b = getSortItem(b, options.sortBy!)
-      if (a < b) {
-        return options.sortingOrder === 'asc' ? -1 : 1
-      }
-      if (a > b) {
-        return options.sortingOrder === 'asc' ? 1 : -1
-      }
-      return 0
-    })
-  }
-
-  const normalizedProjects = projects.slice((options.page - 1) * options.perPage, options.page * options.perPage)
+export const getProjects = async (options: Partial<Sorting> & Pagination) => {
+  const projects: Project[] = await fetch(api.allProjects()).then((r) => r.json())
 
   return {
-    data: normalizedProjects,
+    data: projects,
     pagination: {
       page: options.page,
       perPage: options.perPage,
-      total: projectsDb.length,
+      total: projects.length,
     },
   }
 }
 
-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' }),
-  }
+export const addProject = async (project: Omit<Project, 'id' | 'created_at'>) => {
+  const headers = new Headers()
+  headers.append('Content-Type', 'application/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][],
-  }
+  return fetch(api.allProjects(), { method: 'POST', 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 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 removeProject = async (project: (typeof projectsDb)[number]) => {
-  await sleep(1000)
-
-  const index = projectsDb.findIndex((p) => p.id === project.id)
-  projectsDb.splice(index, 1)
-
-  return project
+export const removeProject = async (project: Project) => {
+  return fetch(api.project(project.id), { method: 'DELETE' })
 }
diff --git a/src/data/pages/users.ts b/src/data/pages/users.ts
index 80285863f..0ef6b701c 100644
--- a/src/data/pages/users.ts
+++ b/src/data/pages/users.ts
@@ -1,23 +1,5 @@
-import { sleep } from '../../services/utils'
-import { User } from './../../pages/users/types'
-import usersDb from './users-db.json'
-import projectsDb from './projects-db.json'
-import { Project } from '../../pages/projects/types'
-
-export const users = usersDb as User[]
-
-const getUserProjects = (userId: number | string) => {
-  return projectsDb
-    .filter((project) => project.team.includes(Number(userId)))
-    .map((project) => ({
-      ...project,
-      project_owner: users.find((user) => user.id === project.project_owner)!,
-      team: project.team.map((userId) => users.find((user) => user.id === userId)!),
-      status: project.status as Project['status'],
-    }))
-}
-
-// Simulate API calls
+import { User } from '../../pages/users/types'
+import api from '../../services/api'
 
 export type Pagination = {
   page: number
@@ -35,18 +17,9 @@ export type Filters = {
   search: string
 }
 
-const getSortItem = (obj: any, sortBy: string) => {
-  if (sortBy === 'projects') {
-    return obj.projects.map((project: any) => project.project_name).join(', ')
-  }
-
-  return obj[sortBy]
-}
-
 export const getUsers = async (filters: Partial<Filters & Pagination & Sorting>) => {
-  await sleep(1000)
-  const { isActive, search, sortBy, sortingOrder } = filters
-  let filteredUsers = users
+  const { isActive, search } = filters
+  let filteredUsers: User[] = await fetch(api.allUsers()).then((r) => r.json())
 
   filteredUsers = filteredUsers.filter((user) => user.active === isActive)
 
@@ -54,25 +27,9 @@ export const getUsers = async (filters: Partial<Filters & Pagination & Sorting>)
     filteredUsers = filteredUsers.filter((user) => user.fullname.toLowerCase().includes(search.toLowerCase()))
   }
 
-  filteredUsers = filteredUsers.map((user) => ({ ...user, projects: getUserProjects(user.id) }))
-
-  if (sortBy && sortingOrder) {
-    filteredUsers = filteredUsers.sort((a, b) => {
-      const first = getSortItem(a, sortBy)
-      const second = getSortItem(b, sortBy)
-      if (first > second) {
-        return sortingOrder === 'asc' ? 1 : -1
-      }
-      if (first < second) {
-        return sortingOrder === 'asc' ? -1 : 1
-      }
-      return 0
-    })
-  }
-
   const { page = 1, perPage = 10 } = filters || {}
   return {
-    data: filteredUsers.slice((page - 1) * perPage, page * perPage),
+    data: filteredUsers,
     pagination: {
       page,
       perPage,
@@ -82,20 +39,39 @@ export const getUsers = async (filters: Partial<Filters & Pagination & Sorting>)
 }
 
 export const addUser = async (user: User) => {
-  await sleep(1000)
-  users.unshift(user)
+  const headers = new Headers()
+  headers.append('Content-Type', 'application/json')
+
+  const result = await fetch(api.allUsers(), { method: 'POST', body: JSON.stringify(user), headers }).then((r) =>
+    r.json(),
+  )
+
+  if (!result.error) {
+    return result
+  }
+
+  throw new Error(result.error)
 }
 
 export const updateUser = async (user: User) => {
-  await sleep(1000)
-  const index = users.findIndex((u) => u.id === user.id)
-  users[index] = user
+  const headers = new Headers()
+  headers.append('Content-Type', 'application/json')
+
+  const result = await fetch(api.user(user.id), { method: 'PUT', body: JSON.stringify(user), headers }).then((r) =>
+    r.json(),
+  )
+
+  if (!result.error) {
+    return result
+  }
+
+  throw new Error(result.error)
 }
 
 export const removeUser = async (user: User) => {
-  await sleep(1000)
-  users.splice(
-    users.findIndex((u) => u.id === user.id),
-    1,
-  )
+  return fetch(api.user(user.id), { method: 'DELETE' })
+}
+
+export const uploadAvatar = async (body: FormData) => {
+  return fetch(api.avatars(), { method: 'POST', body, redirect: 'follow' }).then((r) => r.json())
 }
diff --git a/src/pages/admin/dashboard/cards/ProjectTable.vue b/src/pages/admin/dashboard/cards/ProjectTable.vue
index b29f2a137..5296b4fa5 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,11 +18,7 @@ const { projects, isLoading, sorting } = useProjects({
   pagination,
 })
 
-const avatarColor = (userName: string) => {
-  const colors = ['primary', '#FFD43A', '#ADFF00', '#262824', 'danger']
-  const index = userName.charCodeAt(0) % colors.length
-  return colors[index]
-}
+const { getTeamOptions, getUserById } = useProjectUsers()
 </script>
 
 <template>
@@ -47,23 +43,16 @@ const avatarColor = (userName: string) => {
           </template>
           <template #cell(project_owner)="{ rowData }">
             <div class="flex items-center gap-2 ellipsis max-w-[230px]">
-              <UserAvatar :user="rowData.project_owner" size="small" />
-              {{ rowData.project_owner.fullname }}
+              <UserAvatar
+                v-if="getUserById(rowData.project_owner)"
+                :user="getUserById(rowData.project_owner)!"
+                size="small"
+              />
+              {{ getUserById(rowData.project_owner)?.fullname }}
             </div>
           </template>
           <template #cell(team)="{ rowData: project }">
-            <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"
-            />
+            <VaAvatarGroup size="small" :options="getTeamOptions(project.team)" :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 c62677981..10c887553 100644
--- a/src/pages/projects/ProjectsPage.vue
+++ b/src/pages/projects/ProjectsPage.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, provide } from 'vue'
 import { useLocalStorage } from '@vueuse/core'
 import { useProjects } from './composables/useProjects'
 import ProjectCards from './widgets/ProjectCards.vue'
@@ -7,11 +7,20 @@ 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
new file mode 100644
index 000000000..60c6e57eb
--- /dev/null
+++ b/src/pages/projects/composables/useProjectUsers.ts
@@ -0,0 +1,42 @@
+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 1e42a8604..f1e827192 100644
--- a/src/pages/projects/composables/useProjects.ts
+++ b/src/pages/projects/composables/useProjects.ts
@@ -1,40 +1,69 @@
-import { Ref, ref, unref } from 'vue'
-import {
-  getProjects,
-  addProject,
-  updateProject,
-  removeProject,
-  Sorting,
-  Pagination,
-} from '../../../data/pages/projects'
+import { Ref, ref, unref, computed } from 'vue'
+import { Sorting, Pagination } from '../../../data/pages/projects'
 import { Project } from '../types'
-import { watchIgnorable } from '@vueuse/core'
+import { useProjectsStore } from '../../../stores/projects'
+import { useProjectUsers } from './useProjectUsers'
 
 const makePaginationRef = () => ref<Pagination>({ page: 1, perPage: 10, total: 0 })
-const makeSortingRef = () => ref<Sorting>({ sortBy: 'creation_date', sortingOrder: 'desc' })
+const makeSortingRef = () => ref<Sorting>({ sortBy: 'created_at', sortingOrder: 'desc' })
 
 export const useProjects = (options?: { sorting?: Ref<Sorting>; pagination?: Ref<Pagination> }) => {
   const isLoading = ref(false)
-  const projects = ref<Project[]>([])
+  const projectsStore = useProjectsStore()
+  const { getUserById } = useProjectUsers()
 
   const { sorting = makeSortingRef(), pagination = makePaginationRef() } = options ?? {}
 
   const fetch = async () => {
     isLoading.value = true
-    const { data, pagination: newPagination } = await getProjects({
-      ...unref(sorting),
-      ...unref(pagination),
-    })
-    projects.value = data as Project[]
-
-    ignoreUpdates(() => {
-      pagination.value = newPagination
+    await projectsStore.getAll({
+      sorting: unref(sorting),
+      pagination: unref(pagination),
     })
+    pagination.value = projectsStore.pagination
 
     isLoading.value = false
   }
 
-  const { ignoreUpdates } = watchIgnorable([pagination, sorting], fetch, { deep: true })
+  const projects = computed(() => {
+    const paginated = projectsStore.items.slice(
+      (pagination.value.page - 1) * pagination.value.perPage,
+      pagination.value.page * pagination.value.perPage,
+    )
+
+    const getSortItem = (obj: any, sortBy: Sorting['sortBy']) => {
+      if (sortBy === 'project_owner') {
+        return getUserById(obj.project_owner)?.fullname
+      }
+
+      if (sortBy === 'team') {
+        return obj.team.map((user: any) => getUserById(user)?.fullname || '').join(', ')
+      }
+
+      if (sortBy === 'created_at') {
+        return new Date(obj[sortBy])
+      }
+
+      return obj[sortBy]
+    }
+
+    if (sorting.value.sortBy && sorting.value.sortingOrder) {
+      paginated.sort((a, b) => {
+        a = getSortItem(a, sorting.value.sortBy!)
+        b = getSortItem(b, sorting.value.sortBy!)
+
+        if (a < b) {
+          return sorting.value.sortingOrder === 'asc' ? -1 : 1
+        }
+        if (a > b) {
+          return sorting.value.sortingOrder === 'asc' ? 1 : -1
+        }
+        return 0
+      })
+    }
+
+    return paginated
+  })
 
   fetch()
 
@@ -45,35 +74,23 @@ export const useProjects = (options?: { sorting?: Ref<Sorting>; pagination?: Ref
 
     fetch,
 
-    async add(project: Omit<Project, 'id' | 'creation_date'>) {
+    async add(project: Omit<Project, 'id' | 'created_at'>) {
       isLoading.value = true
-      await addProject({
-        ...project,
-        project_owner: project.project_owner.id,
-        team: project.team.map((user) => user.id),
-      })
+      await projectsStore.add(project)
       await fetch()
       isLoading.value = false
     },
 
     async update(project: Project) {
       isLoading.value = true
-      await updateProject({
-        ...project,
-        project_owner: project.project_owner.id,
-        team: project.team.map((user) => user.id),
-      })
+      await projectsStore.update(project)
       await fetch()
       isLoading.value = false
     },
 
     async remove(project: Project) {
       isLoading.value = true
-      await removeProject({
-        ...project,
-        project_owner: project.project_owner.id,
-        team: project.team.map((user) => user.id),
-      })
+      await projectsStore.remove(project)
       await fetch()
       isLoading.value = false
     },
diff --git a/src/pages/projects/types.ts b/src/pages/projects/types.ts
index febd4b1a3..bbe5c54b6 100644
--- a/src/pages/projects/types.ts
+++ b/src/pages/projects/types.ts
@@ -1,15 +1,17 @@
 import { User } from '../users/types'
 
+export type UUID = `${string}-${string}-${string}-${string}-${string}`
+
 export type Project = {
-  id: number
+  id: UUID
   project_name: string
-  project_owner: Omit<User, 'projects'>
-  team: Omit<User, 'projects'>[]
+  project_owner: User['id']
+  team: User['id'][]
   status: 'important' | 'completed' | 'archived' | 'in progress'
-  creation_date: string
+  created_at: string
 }
 
-export type EmptyProject = Omit<Project, 'id' | 'project_owner' | 'creation_date' | 'status'> & {
+export type EmptyProject = Omit<Project, 'id' | 'project_owner' | 'created_at' | '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 3c3b10012..98d6bd0fc 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,6 +41,8 @@ defineExpose({
   isFormHasUnsavedChanges,
 })
 
+const usersStore = useUsersStore()
+
 watch(
   () => props.project,
   () => {
@@ -58,8 +60,8 @@ watch(
 
 const required = (v: string | SelectOption) => !!v || 'This field is required'
 
-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 }) })
+const ownerFiltersSearch = ref('')
+const teamFiltersSearch = ref('')
 </script>
 
 <template>
@@ -67,36 +69,38 @@ const { users: ownerUsers, filters: ownerFilters } = useUsers({ pagination: ref(
     <VaInput v-model="newProject.project_name" label="Project name" :rules="[required]" />
     <VaSelect
       v-model="newProject.project_owner"
-      v-model:search="ownerFilters.search"
+      v-model:search="ownerFiltersSearch"
       searchable
       label="Owner"
       text-by="fullname"
       track-by="id"
+      value-by="id"
       :rules="[required]"
-      :options="ownerUsers"
+      :options="usersStore.items"
     >
       <template #content="{ value: user }">
         <div v-if="user" :key="user.id" class="flex items-center gap-1 mr-4">
-          <UserAvatar :user="user" size="18px" />
+          <UserAvatar v-if="false" :user="user" size="18px" />
           {{ user.fullname }}
         </div>
       </template>
     </VaSelect>
     <VaSelect
       v-model="newProject.team"
-      v-model:search="teamFilters.search"
+      v-model:search="teamFiltersSearch"
       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="teamUsers"
+      :options="usersStore.items"
       :max-visible-options="$vaBreakpoint.mdUp ? 3 : 1"
     >
       <template #content="{ valueArray }">
-        <template v-if="valueArray">
+        <template v-if="valueArray?.length">
           <div v-for="(user, index) in valueArray" :key="user.id" class="flex items-center gap-1 mr-2">
-            <UserAvatar :user="user" size="18px" />
+            <UserAvatar v-if="user" :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 1416d5e04..5f52a2cb0 100644
--- a/src/pages/projects/widgets/ProjectCards.vue
+++ b/src/pages/projects/widgets/ProjectCards.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { PropType } from 'vue'
-import { Project } from '../types'
+import { type PropType, inject } from 'vue'
+import { type Project } from '../types'
 import ProjectStatusBadge from '../components/ProjectStatusBadge.vue'
 
 defineProps({
@@ -19,11 +19,7 @@ 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 { getUserById, getTeamOptions } = inject<any>('ProjectsPage')
 </script>
 
 <template>
@@ -39,27 +35,16 @@ const avatarColor = (userName: string) => {
       outlined
     >
       <VaCardContent class="flex flex-col h-full">
-        <div class="text-[var(--va-secondary)]">{{ project.creation_date }}</div>
+        <div class="text-[var(--va-secondary)]">{{ new Date(project.created_at).toLocaleDateString() }}</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>{{ project.project_owner.fullname }}</span>
+            <span v-if="getUserById(project.project_owner)">{{ getUserById(project.project_owner)!.fullname }}</span>
           </p>
-          <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"
-          />
+          <VaAvatarGroup class="my-4" :options="getTeamOptions(project.team)" :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 e44fc4cdc..7c91fdaa7 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 } from 'vue'
+import { PropType, computed, inject } 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: 'creation_date', sortable: true },
+  { label: 'Creation Date', key: 'created_at', sortable: true },
   { label: ' ', key: 'actions' },
 ])
 
@@ -26,12 +26,12 @@ const props = defineProps({
     required: true,
   },
   sortBy: {
-    type: Object as PropType<Sorting['sortBy']>,
-    required: true,
+    type: String as PropType<Sorting['sortBy']>,
+    default: undefined,
   },
   sortingOrder: {
-    type: Object as PropType<Sorting['sortingOrder']>,
-    required: true,
+    type: String as PropType<Sorting['sortingOrder']>,
+    default: undefined,
   },
   pagination: {
     type: Object as PropType<Pagination>,
@@ -44,16 +44,11 @@ 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>
@@ -71,29 +66,22 @@ const totalPages = computed(() => Math.ceil(props.pagination.total / props.pagin
         </div>
       </template>
       <template #cell(project_owner)="{ rowData }">
-        <div class="flex items-center gap-2 ellipsis max-w-[230px]">
-          <UserAvatar :user="rowData.project_owner" size="small" />
-          {{ rowData.project_owner.fullname }}
+        <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>
       </template>
       <template #cell(team)="{ rowData: project }">
-        <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"
-        />
+        <VaAvatarGroup size="small" :options="getTeamOptions(project.team)" :max="5" />
       </template>
       <template #cell(status)="{ rowData: project }">
         <ProjectStatusBadge :status="project.status" />
       </template>
 
+      <template #cell(created_at)="{ rowData: project }">
+        {{ new Date(project.created_at).toLocaleDateString() }}
+      </template>
+
       <template #cell(actions)="{ rowData: project }">
         <div class="flex gap-2 justify-end">
           <VaButton
diff --git a/src/pages/users/UsersPage.vue b/src/pages/users/UsersPage.vue
index 56cb3c061..429aeb37c 100644
--- a/src/pages/users/UsersPage.vue
+++ b/src/pages/users/UsersPage.vue
@@ -1,14 +1,16 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, watchEffect } from 'vue'
 import UsersTable from './widgets/UsersTable.vue'
 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 { users, isLoading, filters, sorting, pagination, error, ...usersApi } = useUsers()
+const { projects } = useProjects()
 
 const userToEdit = ref<User | null>(null)
 
@@ -24,19 +26,39 @@ const showAddUserModal = () => {
 
 const { init: notify } = useToast()
 
+watchEffect(() => {
+  if (error.value) {
+    notify({
+      message: error.value.message,
+      color: 'danger',
+    })
+  }
+})
+
 const onUserSaved = async (user: User) => {
+  if (user.avatar.startsWith('blob:')) {
+    const blob = await fetch(user.avatar).then((r) => r.blob())
+    const { publicUrl } = await usersApi.uploadAvatar(blob)
+    user.avatar = publicUrl
+  }
+
   if (userToEdit.value) {
     await usersApi.update(user)
-    notify({
-      message: `${user.fullname} has been updated`,
-      color: 'success',
-    })
+    if (!error.value) {
+      notify({
+        message: `${user.fullname} has been updated`,
+        color: 'success',
+      })
+    }
   } else {
-    usersApi.add(user)
-    notify({
-      message: `${user.fullname} has been created`,
-      color: 'success',
-    })
+    await usersApi.add(user)
+
+    if (!error.value) {
+      notify({
+        message: `${user.fullname} has been created`,
+        color: 'success',
+      })
+    }
   }
 }
 
@@ -97,6 +119,7 @@ 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 1d051f97d..becfb841a 100644
--- a/src/pages/users/composables/useUsers.ts
+++ b/src/pages/users/composables/useUsers.ts
@@ -1,7 +1,8 @@
-import { Ref, ref, unref, watch } from 'vue'
-import { getUsers, updateUser, addUser, removeUser, type Filters, Pagination, Sorting } from '../../../data/pages/users'
+import { Ref, ref, unref, watch, computed } from 'vue'
+import { v4 as uuid } from 'uuid'
+import type { Filters, Pagination, Sorting } from '../../../data/pages/users'
 import { User } from '../types'
-import { watchIgnorable } from '@vueuse/core'
+import { useUsersStore } from '../../../stores/users'
 
 const makePaginationRef = () => ref<Pagination>({ page: 1, perPage: 10, total: 0 })
 const makeSortingRef = () => ref<Sorting>({ sortBy: 'fullname', sortingOrder: null })
@@ -13,28 +14,25 @@ export const useUsers = (options?: {
   filters?: Ref<Partial<Filters>>
 }) => {
   const isLoading = ref(false)
-  const users = ref<User[]>([])
+  const error = ref()
+  const usersStore = useUsersStore()
 
   const { filters = makeFiltersRef(), sorting = makeSortingRef(), pagination = makePaginationRef() } = options || {}
 
   const fetch = async () => {
     isLoading.value = true
-    const { data, pagination: newPagination } = await getUsers({
-      ...unref(filters),
-      ...unref(sorting),
-      ...unref(pagination),
-    })
-    users.value = data
-
-    ignoreUpdates(() => {
-      pagination.value = newPagination
-    })
-
-    isLoading.value = false
+    try {
+      await usersStore.getAll({
+        filters: unref(filters),
+        sorting: unref(sorting),
+        pagination: unref(pagination),
+      })
+      pagination.value = usersStore.pagination
+    } finally {
+      isLoading.value = false
+    }
   }
 
-  const { ignoreUpdates } = watchIgnorable([pagination, sorting], fetch, { deep: true })
-
   watch(
     filters,
     () => {
@@ -47,9 +45,39 @@ export const useUsers = (options?: {
 
   fetch()
 
+  const users = computed(() => {
+    const getSortItem = (obj: any, sortBy: string) => {
+      if (sortBy === 'projects') {
+        return obj.projects.map((project: any) => project).join(', ')
+      }
+
+      return obj[sortBy]
+    }
+
+    const paginated = usersStore.items.slice(
+      (pagination.value.page - 1) * pagination.value.perPage,
+      pagination.value.page * pagination.value.perPage,
+    )
+
+    if (sorting.value.sortBy && sorting.value.sortingOrder) {
+      paginated.sort((a, b) => {
+        const first = getSortItem(a, sorting.value.sortBy!)
+        const second = getSortItem(b, sorting.value.sortBy!)
+        if (first > second) {
+          return sorting.value.sortingOrder === 'asc' ? 1 : -1
+        }
+        if (first < second) {
+          return sorting.value.sortingOrder === 'asc' ? -1 : 1
+        }
+        return 0
+      })
+    }
+    return paginated
+  })
+
   return {
+    error,
     isLoading,
-
     filters,
     sorting,
     pagination,
@@ -60,23 +88,43 @@ export const useUsers = (options?: {
 
     async add(user: User) {
       isLoading.value = true
-      await addUser(user)
-      await fetch()
-      isLoading.value = false
+      try {
+        return await usersStore.add(user)
+      } catch (e) {
+        error.value = e
+      } finally {
+        isLoading.value = false
+      }
     },
 
     async update(user: User) {
       isLoading.value = true
-      await updateUser(user)
-      await fetch()
-      isLoading.value = false
+      try {
+        return await usersStore.update(user)
+      } catch (e) {
+        error.value = e
+      } finally {
+        isLoading.value = false
+      }
     },
 
     async remove(user: User) {
       isLoading.value = true
-      await removeUser(user)
-      await fetch()
-      isLoading.value = false
+      try {
+        return await usersStore.remove(user)
+      } catch (e) {
+        error.value = e
+      } finally {
+        isLoading.value = false
+      }
+    },
+
+    async uploadAvatar(avatar: Blob) {
+      const formData = new FormData()
+      formData.append('avatar', avatar)
+      formData.append('id', uuid())
+
+      return usersStore.uploadAvatar(formData)
     },
   }
 }
diff --git a/src/pages/users/types.ts b/src/pages/users/types.ts
index 3b167c85e..5c35dd4a4 100644
--- a/src/pages/users/types.ts
+++ b/src/pages/users/types.ts
@@ -1,16 +1,15 @@
-import { Project } from '../projects/types'
-
 export type UserRole = 'admin' | 'user' | 'owner'
 
-export type BaseUser = {
-  id: number
+export type UUID = `${string}-${string}-${string}-${string}-${string}`
+
+export type User = {
+  id: UUID
   fullname: string
   email: string
   username: string
   role: UserRole
   avatar: string
+  projects: UUID[]
   notes: string
   active: boolean
 }
-
-export type User = BaseUser & { projects: Project[] }
diff --git a/src/pages/users/widgets/EditUserForm.vue b/src/pages/users/widgets/EditUserForm.vue
index 3b5713d31..295418928 100644
--- a/src/pages/users/widgets/EditUserForm.vue
+++ b/src/pages/users/widgets/EditUserForm.vue
@@ -17,8 +17,7 @@ const props = defineProps({
   },
 })
 
-const defaultNewUser: User = {
-  id: -1,
+const defaultNewUser: Omit<User, 'id'> = {
   avatar: '',
   fullname: '',
   role: 'user',
@@ -29,7 +28,7 @@ const defaultNewUser: User = {
   projects: [],
 }
 
-const newUser = ref<User>({ ...defaultNewUser })
+const newUser = ref<User>({ ...defaultNewUser } as User)
 
 const isFormHasUnsavedChanges = computed(() => {
   return Object.keys(newUser.value).some((key) => {
@@ -37,7 +36,9 @@ const isFormHasUnsavedChanges = computed(() => {
       return false
     }
 
-    return newUser.value[key as keyof User] !== (props.user ?? defaultNewUser)?.[key as keyof User]
+    return (
+      newUser.value[key as keyof Omit<User, 'id'>] !== (props.user ?? defaultNewUser)?.[key as keyof Omit<User, 'id'>]
+    )
   })
 })
 
@@ -45,8 +46,10 @@ defineExpose({
   isFormHasUnsavedChanges,
 })
 
+const { projects } = useProjects({ pagination: ref({ page: 1, perPage: 9999, total: 10 }) })
+
 watch(
-  () => props.user,
+  [() => props.user, projects],
   () => {
     if (!props.user) {
       return
@@ -54,6 +57,7 @@ watch(
 
     newUser.value = {
       ...props.user,
+      projects: props.user.projects.filter((projectId) => projects.value.find(({ id }) => id === projectId)),
       avatar: props.user.avatar || '',
     }
   },
@@ -80,13 +84,11 @@ const onSave = () => {
   }
 }
 
-const roleSelectOptions: { text: Capitalize<UserRole>; value: UserRole }[] = [
+const roleSelectOptions: { text: Capitalize<Lowercase<UserRole>>; value: UserRole }[] = [
   { text: 'Admin', value: 'admin' },
   { text: 'User', value: 'user' },
   { text: 'Owner', value: 'owner' },
 ]
-
-const { projects } = useProjects({ pagination: ref({ page: 1, perPage: 9999, total: 10 }) })
 </script>
 
 <template>
@@ -116,7 +118,7 @@ const { projects } = useProjects({ pagination: ref({ page: 1, perPage: 9999, tot
           label="Full name"
           class="w-full sm:w-1/2"
           :rules="[validators.required]"
-          name="fullname"
+          name="fullName"
         />
         <VaInput
           v-model="newUser.username"
@@ -139,10 +141,10 @@ const { projects } = useProjects({ pagination: ref({ page: 1, perPage: 9999, tot
           label="Projects"
           class="w-full sm:w-1/2"
           :options="projects"
+          value-by="id"
+          text-by="project_name"
           :rules="[validators.required]"
           name="projects"
-          text-by="project_name"
-          track-by="id"
           multiple
           :max-visible-options="2"
         />
diff --git a/src/pages/users/widgets/UserAvatar.vue b/src/pages/users/widgets/UserAvatar.vue
index 5c8a7b5a6..103f8bf92 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 { BaseUser } from '../types'
+import { type PropType } from 'vue'
+import { type User } 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<BaseUser>,
+    type: Object as PropType<User>,
     required: true,
   },
   size: {
@@ -20,15 +20,26 @@ defineProps({
 })
 
 const isUrl = (avatar: string) => {
+  if (!avatar) return false
+
   return avatar.startsWith('http') || avatar.startsWith('blob:')
 }
+
+const fallback = (fullname: string) => {
+  try {
+    const [firstName, lastName] = fullname.split(' ')
+    return `${firstName[0]}${lastName[0]}`
+  } catch {
+    return fullname[0]
+  }
+}
 </script>
 
 <template>
   <VaAvatar
     :size="size"
     :src="isUrl(user.avatar) ? user.avatar : ''"
-    :fallback-text="user.avatar || user.fullname[0]"
+    :fallback-text="fallback(user.fullname)"
     :color="avatarColor(user.fullname)"
   />
 </template>
diff --git a/src/pages/users/widgets/UsersTable.vue b/src/pages/users/widgets/UsersTable.vue
index 701e498fc..af1668130 100644
--- a/src/pages/users/widgets/UsersTable.vue
+++ b/src/pages/users/widgets/UsersTable.vue
@@ -21,10 +21,14 @@ 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 },
-  sortingOrder: { type: String as PropType<Sorting['sortingOrder']>, required: true },
+  sortingOrder: { type: String as PropType<Sorting['sortingOrder']>, default: null },
 })
 
 const emit = defineEmits<{
@@ -63,19 +67,28 @@ const onUserDelete = async (user: User) => {
   }
 }
 
-const formatProjectNames = (projects: Project[]) => {
-  if (projects.length === 0) return 'No projects'
-  if (projects.length <= 2) {
-    return projects.map((project) => project.project_name).join(', ')
+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(', ')
   }
 
   return (
-    projects
+    names
       .slice(0, 2)
-      .map((project) => project.project_name)
+      .map((name) => name)
       .join(', ') +
     ' + ' +
-    (projects.length - 2) +
+    (names.length - 2) +
     ' more'
   )
 }
diff --git a/src/services/api.ts b/src/services/api.ts
new file mode 100644
index 000000000..818d97375
--- /dev/null
+++ b/src/services/api.ts
@@ -0,0 +1,13 @@
+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 }) =>
+    `${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}`,
+  avatars: () => `${apiBaseUrl}/avatars`,
+}
diff --git a/src/stores/projects.ts b/src/stores/projects.ts
new file mode 100644
index 000000000..ef4f5c66d
--- /dev/null
+++ b/src/stores/projects.ts
@@ -0,0 +1,47 @@
+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[],
+      pagination: {
+        page: 1,
+        perPage: 10,
+        total: 0,
+      } as Pagination,
+    }
+  },
+
+  actions: {
+    async getAll(options: { pagination: Pagination; sorting?: Sorting }) {
+      const { data, pagination } = await getProjects({
+        ...options.sorting,
+        ...options.pagination,
+      })
+      this.items = data
+      this.pagination = pagination
+    },
+
+    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
new file mode 100644
index 000000000..1f1aa9cf1
--- /dev/null
+++ b/src/stores/users.ts
@@ -0,0 +1,59 @@
+import { defineStore } from 'pinia'
+import {
+  addUser,
+  type Filters,
+  getUsers,
+  Pagination,
+  removeUser,
+  Sorting,
+  updateUser,
+  uploadAvatar,
+} from '../data/pages/users'
+import { User } from '../pages/users/types'
+
+export const useUsersStore = defineStore('users', {
+  state: () => {
+    return {
+      items: [] as User[],
+      pagination: { page: 1, perPage: 10, total: 0 },
+    }
+  },
+
+  actions: {
+    async getAll(options: { pagination?: Pagination; sorting?: Sorting; filters?: Partial<Filters> }) {
+      const { data, pagination } = await getUsers({
+        ...options.filters,
+        ...options.sorting,
+        ...options.pagination,
+      })
+      this.items = data
+      this.pagination = pagination
+    },
+
+    async add(user: User) {
+      const [newUser] = await addUser(user)
+      this.items.unshift(newUser)
+      return 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)
+      return 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)
+      }
+    },
+
+    async uploadAvatar(formData: FormData) {
+      return uploadAvatar(formData)
+    },
+  },
+})
diff --git a/yarn.lock b/yarn.lock
index 9047bbeba..52e02cf55 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8726,6 +8726,11 @@ utils-merge@1.0.1:
   resolved "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz"
   integrity sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==
 
+uuid@^11.0.3:
+  version "11.0.3"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-11.0.3.tgz#248451cac9d1a4a4128033e765d137e2b2c49a3d"
+  integrity sha512-d0z310fCWv5dJwnX1Y/MncBAqGMKEzlBb1AOf7z9K8ALnd0utBX/msg/fA0+sbyN1ihbMsLhrBlnl1ak7Wa0rg==
+
 uuid@^9.0.0:
   version "9.0.1"
   resolved "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz"