diff --git a/app/ui/invitations/board.tsx b/app/ui/invitations/board.tsx
index 1d887ae..0830354 100644
--- a/app/ui/invitations/board.tsx
+++ b/app/ui/invitations/board.tsx
@@ -7,7 +7,7 @@ import { draggable, dropTargetForElements } from '@atlaskit/pragmatic-drag-and-d
 import { useEffect, useRef } from "react";
 import { useState } from "react";
 
-function InvitationCard(invitation: Invitation, allGuests: Guest[]) {
+function InvitationCard({ invitation, allGuests, onGuestAdded }: { invitation: Invitation, allGuests: Guest[], onGuestAdded: (guest: Guest) => void }) {
 
   const [guests, setGuests] = useState<Guest[]>(invitation.guests);
 
@@ -24,6 +24,7 @@ function InvitationCard(invitation: Invitation, allGuests: Guest[]) {
             const guestToAdd = allGuests.find((guest) => guest.id === guestId);
             if (guestToAdd) {
               setGuests((prevGuests) => [...prevGuests, guestToAdd]);
+              onGuestAdded(guestToAdd);
             }
           }
         },
@@ -84,11 +85,11 @@ export default function InvitationsBoard({ guests, invitations }: {
   const api = new AbstractApi<Invitation>();
   const serializer = new InvitationSerializer();
 
-
-  // Filter out guests that are already in invitations
-  const availableGuests = guests.filter(
-    (guest) => !invitations.some((invitation) =>
-      invitation.guests.some((invitedGuest) => invitedGuest.id === guest.id)
+  const [unassignedGuests, setUnassignedGuests] = useState<Guest[]>(
+    guests.filter(
+      (guest) => !invitations.some((invitation) =>
+        invitation.guests.some((invitedGuest) => invitedGuest.id === guest.id)
+      )
     )
   );
 
@@ -109,9 +110,11 @@ export default function InvitationsBoard({ guests, invitations }: {
     <div className="flex h-screen">
       {/* Left Column: Guests */}
       <div className="w-1/4 h-full overflow-auto border-r border-gray-300 p-4">
-        <h2 className="text-lg font-semibold mb-4">{guests.length} guests without invitation</h2>
+        <h2 className="text-lg font-semibold mb-4">{unassignedGuests.length} guests without invitation</h2>
         <div>
-          {availableGuests.map((guest, index) => GuestCard(guest))}
+          {unassignedGuests.map((guest) => (
+            <GuestCard key={guest.id} {...guest} />
+          ))}
         </div>
       </div>
 
@@ -128,9 +131,22 @@ export default function InvitationsBoard({ guests, invitations }: {
           Create New Invitation
         </button>
 
+
         <div className="grid grid-cols-4 gap-6">
-          {sortedInvitations.map((invitation, index) => (InvitationCard(invitation, guests)))}
+
+          {sortedInvitations.map((invitation) => (
+            <InvitationCard
+              key={invitation.id}
+              invitation={invitation}
+              allGuests={guests}
+              onGuestAdded={(guestAdded: Guest) => {
+                console.log(`Guest added: ${guestAdded.name}`);
+                setUnassignedGuests((prevUnassignedGuests) => prevUnassignedGuests.filter(g => g.id !== guestAdded.id));
+              }}
+            />
+          ))}
         </div>
+
       </div>
     </div>
   );