diff --git a/app/ui/invitations/board.tsx b/app/ui/invitations/board.tsx
index 9bb95e9..d34cbb8 100644
--- a/app/ui/invitations/board.tsx
+++ b/app/ui/invitations/board.tsx
@@ -18,6 +18,13 @@ 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;
+    if (a.guests.length > 0 && b.guests.length === 0) return 1;
+    return 0;
+  });
+
   function handleCreateInvitation() {
     api.create(serializer, new Invitation(), () => {
       console.log("Invitation created successfully");
@@ -28,48 +35,54 @@ 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>
-      <ul>
-        {availableGuests.map((guest, index) => (
-        <li
-          key={index}
-          className="mb-4 p-4 border border-gray-300 rounded-lg shadow-sm bg-white cursor-move"
-          draggable="true"
-        >
-          <h3 className="text-md font-medium">{guest.name}</h3>
-        </li>
-        ))}
-      </ul>
+        <h2 className="text-lg font-semibold mb-4">{guests.length} guests without invitation</h2>
+        <ul>
+          {availableGuests.map((guest, index) => (
+            <li
+              key={index}
+              className="mb-4 p-4 border border-gray-300 rounded-lg shadow-sm bg-white cursor-move"
+              draggable="true"
+            >
+              <h3 className="text-md font-medium">{guest.name}</h3>
+            </li>
+          ))}
+        </ul>
       </div>
 
       {/* Right Column: Invitations */}
       <div className="w-3/4 h-full overflow-auto p-4">
-      <h2 className="text-lg font-semibold mb-4">
-        {invitations.length} invitations
-      </h2>
+        <h2 className="text-lg font-semibold mb-4">
+          {invitations.length} invitations
+        </h2>
 
-      <button
-        onClick={handleCreateInvitation}
-        className="mb-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
-      >
-        Create New Invitation
-      </button>
-
-      <div className="grid grid-cols-4 gap-6">
-        {invitations.map((invitation, index) => (
-        <div
-          key={invitation.id}
-          className="flex items-center justify-center w-full bg-green-800 border border-green-900"
-          style={{ aspectRatio: "1.618 / 1" }}
+        <button
+          onClick={handleCreateInvitation}
+          className="mb-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
         >
-          <ul className="text-center text-yellow-500 font-cursive text-lg">
-          {invitation.guests.map((guest) => (
-        <li key={guest.id}>{guest.name}</li>
+          Create New Invitation
+        </button>
+
+        <div className="grid grid-cols-4 gap-6">
+          {sortedInvitations.map((invitation, index) => (
+            <div
+              key={invitation.id}
+              className="flex items-center justify-center w-full bg-green-800 border border-green-900"
+              style={{ aspectRatio: "1.618 / 1" }}
+            >
+                {invitation.guests.length === 0 ? (
+                <p className="text-center text-yellow-500 text-lg italic">
+                  (empty invitation)
+                </p>
+                ) : (
+                <ul className="text-center text-yellow-500 text-lg">
+                  {invitation.guests.map((guest) => (
+                  <li key={guest.id}>{guest.name}</li>
+                  ))}
+                </ul>
+                )}
+            </div>
           ))}
-          </ul>
         </div>
-        ))}
-      </div>
       </div>
     </div>
   );