diff --git a/config/packages/api_platform.yaml b/config/packages/api_platform.yaml
index 02f295a..4948233 100644
--- a/config/packages/api_platform.yaml
+++ b/config/packages/api_platform.yaml
@@ -1,6 +1,11 @@
 api_platform:
     title: Hello API Platform
     version: 1.0.0
+    formats:
+        jsonld: ['application/ld+json']
+        json: ['application/json']
+    patch_formats:
+        json: ['application/merge-patch+json']
     defaults:
         stateless: true
         cache_headers:
diff --git a/frontend/components/AppDrawer.vue b/frontend/components/AppDrawer.vue
index 46ffe7b..c46b4dd 100644
--- a/frontend/components/AppDrawer.vue
+++ b/frontend/components/AppDrawer.vue
@@ -1,8 +1,7 @@
 <template>
-    <Teleport to="body">
-        <Transition name="drawer">
+    <Teleport v-if="modelValue" to="body">
+        <Transition name="drawer" appear>
             <div
-                v-if="modelValue"
                 class="fixed inset-0 z-40 flex justify-end"
             >
                 <div
diff --git a/frontend/components/ClientDrawer.vue b/frontend/components/ClientDrawer.vue
index a6d6171..c24a537 100644
--- a/frontend/components/ClientDrawer.vue
+++ b/frontend/components/ClientDrawer.vue
@@ -49,6 +49,7 @@
 
 <script setup lang="ts">
 import type { Client, ClientWrite } from '~/services/dto/client'
+import { useClientService } from '~/services/clients'
 
 const props = defineProps<{
     modelValue: boolean
diff --git a/frontend/components/ProjectDrawer.vue b/frontend/components/ProjectDrawer.vue
index ff3ec7c..868e21a 100644
--- a/frontend/components/ProjectDrawer.vue
+++ b/frontend/components/ProjectDrawer.vue
@@ -40,6 +40,7 @@
 <script setup lang="ts">
 import type { Project, ProjectWrite } from '~/services/dto/project'
 import type { Client } from '~/services/dto/client'
+import { useProjectService } from '~/services/projects'
 
 const props = defineProps<{
     modelValue: boolean
diff --git a/frontend/composables/useApi.ts b/frontend/composables/useApi.ts
index ec296b4..b81a602 100644
--- a/frontend/composables/useApi.ts
+++ b/frontend/composables/useApi.ts
@@ -31,7 +31,7 @@ export type ApiFetchOptions<ResponseType extends 'json' | 'blob'> =
 
 export const useApi = (): ApiClient => {
   const config = useRuntimeConfig()
-  const baseURL = config.public.apiBase ?? '/api'
+  const baseURL = config.public.apiBase || '/api'
   const toast = useToast()
   const auth = useAuthStore()
   const nuxtApp = useNuxtApp()
diff --git a/frontend/nuxt.config.ts b/frontend/nuxt.config.ts
index d7aed0e..0499f49 100644
--- a/frontend/nuxt.config.ts
+++ b/frontend/nuxt.config.ts
@@ -17,10 +17,30 @@ export default defineNuxtConfig({
     ],
     runtimeConfig: {
         public: {
-            apiBase: process.env.NUXT_PUBLIC_API_BASE
+            apiBase: process.env.NUXT_PUBLIC_API_BASE || '/api'
         }
     },
-    devServer: {port: 3002},
+    devServer: {
+        port: 3002,
+    },
+    nitro: {
+        devProxy: {
+            '/api': {
+                target: 'http://nginx',
+                changeOrigin: true,
+            },
+        },
+    },
+    vite: {
+        server: {
+            proxy: {
+                '/api': {
+                    target: 'http://nginx',
+                    changeOrigin: true,
+                },
+            },
+        },
+    },
     toast: {
         settings: {
             timeout: 2000,
diff --git a/frontend/pages/clients.vue b/frontend/pages/clients.vue
index 2ad6bf3..cb6aa48 100644
--- a/frontend/pages/clients.vue
+++ b/frontend/pages/clients.vue
@@ -51,6 +51,7 @@
 
 <script setup lang="ts">
 import type { Client } from '~/services/dto/client'
+import { useClientService } from '~/services/clients'
 
 useHead({ title: 'Clients' })
 
diff --git a/frontend/pages/projects.vue b/frontend/pages/projects.vue
index bce0c82..d18b067 100644
--- a/frontend/pages/projects.vue
+++ b/frontend/pages/projects.vue
@@ -14,7 +14,7 @@
             <div
                 v-for="project in projects"
                 :key="project.id"
-                class="cursor-pointer rounded-lg border border-neutral-200 bg-white shadow-sm transition hover:shadow-md"
+                class="cursor-pointer rounded-lg border border-neutral-200 bg-tertiary-500 shadow-sm transition hover:shadow-md"
                 @click="openEdit(project)"
             >
                 <div class="h-2 rounded-t-lg" :style="{ backgroundColor: project.color }" />
@@ -46,6 +46,8 @@
 <script setup lang="ts">
 import type { Project } from '~/services/dto/project'
 import type { Client } from '~/services/dto/client'
+import { useProjectService } from '~/services/projects'
+import { useClientService } from '~/services/clients'
 
 useHead({ title: 'Projets' })
 
diff --git a/frontend/utils/api.ts b/frontend/utils/api.ts
index 6a220e1..00c033b 100644
--- a/frontend/utils/api.ts
+++ b/frontend/utils/api.ts
@@ -1,8 +1,10 @@
 export type HydraCollection<T> = {
-    'hydra:member': T[]
-    'hydra:totalItems': number
+    'hydra:member'?: T[]
+    'hydra:totalItems'?: number
+    'member'?: T[]
+    'totalItems'?: number
 }
 
 export function extractHydraMembers<T>(response: HydraCollection<T>): T[] {
-    return response['hydra:member'] ?? []
+    return response['hydra:member'] ?? response['member'] ?? []
 }