diff --git a/app/api/abstract-api.tsx b/app/api/abstract-api.tsx
index 7201a08..1321d4f 100644
--- a/app/api/abstract-api.tsx
+++ b/app/api/abstract-api.tsx
@@ -4,7 +4,7 @@ import { Entity } from '@/app/lib/definitions';
 import { getCsrfToken, getSlug } from '@/app/lib/utils';
 
 export interface Api<T extends Entity> {
-  getAll(serializable: Serializable<T> ,callback: (objets: T[]) => void): void;
+  getAll(serializable: Serializable<T>, callback: (objets: T[]) => void): void;
   get(serializable: Serializable<T>, id: string, callback: (object: T) => void): void;
   create(serializable: Serializable<T>, object: T, callback: () => void): void;
   update(serializable: Serializable<T>, object: T, callback: () => void): void;
@@ -52,7 +52,7 @@ export class AbstractApi<T extends Entity> implements Api<T> {
       .catch((error) => console.error(error));
   }
 
-  create(serializable: Serializable<T>, object: T, callback: () => void): void {
+  create(serializable: Serializable<T>, object: T, callback: (createdObject: T) => void): void {
     fetch(`/api/${getSlug()}/${serializable.apiPath()}`, {
       method: 'POST',
       body: serializable.toJson(object),
@@ -60,7 +60,11 @@ export class AbstractApi<T extends Entity> implements Api<T> {
         'Content-Type': 'application/json',
         'X-CSRF-TOKEN': getCsrfToken(),
       }
-    }).then(callback)
+    })
+      .then((response) => response.json())
+      .then((data) => {
+        callback(serializable.fromJson(data));
+      })
       .catch((error) => console.error(error));
   }
 
diff --git a/app/lib/invitation.tsx b/app/lib/invitation.tsx
index 04dc81c..8a2a1ba 100644
--- a/app/lib/invitation.tsx
+++ b/app/lib/invitation.tsx
@@ -13,7 +13,7 @@ export class Invitation implements Entity {
 
 export class InvitationSerializer {
   fromJson(data: any): Invitation {
-    return new Invitation(data.id, data.guests.map((guest: any) => new Guest(guest.id, guest.name, guest.group_name, guest.groupId, guest.color, guest.status, guest.children)));
+    return new Invitation(data.id, (data.guests || []).map((guest: any) => new Guest(guest.id, guest.name, guest.group_name, guest.groupId, guest.color, guest.status, guest.children)));
   }
 
   toJson(invitation: Invitation): string {
diff --git a/app/ui/invitations/board.tsx b/app/ui/invitations/board.tsx
index 0830354..34928f9 100644
--- a/app/ui/invitations/board.tsx
+++ b/app/ui/invitations/board.tsx
@@ -78,13 +78,14 @@ function GuestCard(guest: Guest) {
   )
 }
 
-export default function InvitationsBoard({ guests, invitations }: {
+export default function InvitationsBoard({ guests, invitations: originalInvitations }: {
   guests: Array<Guest>,
   invitations: Array<Invitation>
 }) {
   const api = new AbstractApi<Invitation>();
   const serializer = new InvitationSerializer();
 
+  const [invitations, setInvitations] = useState<Invitation[]>(originalInvitations);
   const [unassignedGuests, setUnassignedGuests] = useState<Guest[]>(
     guests.filter(
       (guest) => !invitations.some((invitation) =>
@@ -93,6 +94,7 @@ export default function InvitationsBoard({ guests, invitations }: {
     )
   );
 
+
   // Sort invitations to display those without guests at the top
   const sortedInvitations = [...invitations].sort((a, b) => {
     if (a.guests.length === 0 && b.guests.length > 0) return -1;
@@ -101,8 +103,9 @@ export default function InvitationsBoard({ guests, invitations }: {
   });
 
   function handleCreateInvitation() {
-    api.create(serializer, new Invitation(), () => {
-      console.log("Invitation created successfully");
+    api.create(serializer, new Invitation(), (createdInvitation) => {
+      console.log(`Invitation created successfully with ID: ${createdInvitation.id}`);
+      setInvitations((prevInvitations) => [createdInvitation, ...prevInvitations]);
     });
   }