diff --git a/frontend/src/api/project.ts b/frontend/src/api/project.ts
index a87d19c..5b68e67 100755
--- a/frontend/src/api/project.ts
+++ b/frontend/src/api/project.ts
@@ -1,64 +1,60 @@
 import type { Project, Task } from './types'
-import {
-  mockListProjects,
-  mockGetProject,
-  mockCreateProject,
-  mockDeleteProject,
-  mockUpdateProject,
-  mockGetStyle,
-  mockSaveStyle,
-  mockGetTasks,
-} from './mock'
+import { get, post, put, del } from './client'
 
-const USE_MOCK = true
+export async function listProjects(
+  page?: number,
+  pageSize?: number
+): Promise<Project[]> {
+  const params = new URLSearchParams()
+  if (page !== undefined) params.set('page', String(page))
+  if (pageSize !== undefined) params.set('pageSize', String(pageSize))
 
-export async function listProjects(): Promise<Project[]> {
-  if (USE_MOCK) return mockListProjects()
-  throw new Error('Not implemented')
+  const url = `/api/v1/projects${params.toString() ? '?' + params : ''}`
+  const resp = await get<{
+    total: number
+    projects: Project[]
+  }>(url)
+  return resp.projects
 }
 
 export async function getProject(projectId: string): Promise<Project> {
-  if (USE_MOCK) return mockGetProject(projectId)
-  throw new Error('Not implemented')
+  return get<Project>(`/api/v1/projects/${projectId}`)
 }
 
 export async function createProject(
   name: string,
   style?: Record<string, string>
 ): Promise<Project> {
-  if (USE_MOCK) return mockCreateProject(name, style)
-  throw new Error('Not implemented')
+  return post<Project>('/api/v1/projects', { name, style })
 }
 
 export async function deleteProject(projectId: string): Promise<void> {
-  if (USE_MOCK) return mockDeleteProject(projectId)
-  throw new Error('Not implemented')
+  return del<void>(`/api/v1/projects/${projectId}`)
 }
 
 export async function updateProject(
   projectId: string,
-  data: { name?: string }
+  data: { name: string }
 ): Promise<Project> {
-  if (USE_MOCK) return mockUpdateProject(projectId, data)
-  throw new Error('Not implemented')
+  return put<Project>(`/api/v1/projects/${projectId}`, data)
 }
 
 export async function getStyle(
   projectId: string
 ): Promise<Record<string, string>> {
-  if (USE_MOCK) return mockGetStyle(projectId)
-  throw new Error('Not implemented')
+  const resp = await get<{ kvPairs: Record<string, string> }>(
+    `/api/v1/projects/${projectId}/style`
+  )
+  return resp.kvPairs
 }
 
 export async function saveStyle(
   projectId: string,
   kvPairs: Record<string, string>
 ): Promise<void> {
-  if (USE_MOCK) return mockSaveStyle(projectId, kvPairs)
-  throw new Error('Not implemented')
+  return put<void>(`/api/v1/projects/${projectId}/style`, { kvPairs })
 }
 
 export async function getTasks(projectId: string): Promise<Task[]> {
-  if (USE_MOCK) return mockGetTasks(projectId)
-  throw new Error('Not implemented')
+  return get<Task[]>(`/api/v1/projects/${projectId}/tasks`)
 }