diff --git a/app/lib/guest.tsx b/app/lib/guest.tsx
index 0baddfe..215f318 100644
--- a/app/lib/guest.tsx
+++ b/app/lib/guest.tsx
@@ -13,20 +13,22 @@ export class Guest implements Entity {
   groupId?: string;
   color?: string;
   status?: GuestStatus;
+  children?: Guest[];
 
-  constructor(id?: string, name?: string, group_name?: string, groupId?: string, color?: string, status?: GuestStatus) {
+  constructor(id?: string, name?: string, group_name?: string, groupId?: string, color?: string, status?: GuestStatus, children?: Guest[]) {
     this.id = id;
     this.name = name;
     this.group_name = group_name;
     this.groupId = groupId;
     this.color = color;
     this.status = status;
+    this.children = children;
   }
 }
 
 export class GuestSerializer implements Serializable<Guest> {
   fromJson(data: any): Guest {
-    return new Guest(data.id, data.name, data.group_name, data.group_id, data.color, data.status);
+    return new Guest(data.id, data.name, data.group_name, data.group_id, data.color, data.status, data.children);
   }
 
   toJson(guest: Guest): string {
diff --git a/app/ui/groups/table.tsx b/app/ui/groups/table.tsx
index d17fdf9..41af307 100644
--- a/app/ui/groups/table.tsx
+++ b/app/ui/groups/table.tsx
@@ -4,7 +4,7 @@
 
 import { Group, GroupSerializer } from '@/app/lib/group';
 import TableOfContents from '../components/table-of-contents';
-import { PencilIcon, TrashIcon } from '@heroicons/react/24/outline';
+import { MapPinIcon, PencilIcon, TrashIcon } from '@heroicons/react/24/outline';
 import { AbstractApi } from '@/app/api/abstract-api';
 import { TreeTable } from 'primereact/treetable';
 import { Column } from 'primereact/column';
@@ -19,56 +19,85 @@ export default function GroupsTable({ groups, onUpdate, onEdit }: {
   const api = new AbstractApi<Group>();
   const serializer = new GroupSerializer();
 
-  const nodes:TreeNode[] = [];
+  const actions = (group: Group) => (
+    <div className="flex flex-row items-center">
+      <TrashIcon className='size-6 cursor-pointer' onClick={() => { api.destroy(serializer, group, onUpdate) }} />
+      <PencilIcon className='size-6 cursor-pointer' onClick={() => onEdit(group)} />
+    </div>
+  );
+
+  const index = groups.reduce((acc, group) => {
+    if (group.id) {
+      acc.set(group.id, group)
+    }
+
+    return acc;
+  }, new Map());
+
+  groups.forEach(group => {
+    if (group.parentId) {
+      const parent = index.get(group.parentId);
+      if (parent) {
+        if (!parent.children) {
+          parent.children = [];
+        }
+        parent.children.push(group);
+      }
+    }
+  });
+
+  const renderTree = (group: Group): TreeNode => {
+    const childrenAttendance = (group.children || []).reduce((acc, child) => {
+      acc.confirmed += child.attendance?.confirmed || 0;
+      acc.tentative += child.attendance?.tentative || 0;
+      acc.invited += child.attendance?.invited || 0;
+      acc.declined += child.attendance?.declined || 0;
+      acc.considered += child.attendance?.considered || 0;
+      acc.total += child.attendance?.total || 0;
+      return acc;
+    }, { confirmed: 0, tentative: 0, invited: 0, declined: 0, considered: 0, total: 0 });
+
+    return {
+      id: group.id,
+      key: group.id,
+      label: group.name,
+      data: {
+        name: group.name,
+        color: <div className="w-8 h-8 rounded-full" style={{ backgroundColor: group.color }} />,
+        confirmed: childrenAttendance.confirmed + (group.attendance?.confirmed || 0),
+        tentative: childrenAttendance.tentative + (group.attendance?.tentative || 0),
+        pending: childrenAttendance.invited + (group.attendance?.invited || 0),
+        declined: childrenAttendance.declined + (group.attendance?.declined || 0),
+        considered: childrenAttendance.considered + (group.attendance?.considered || 0),
+        total: childrenAttendance.total + (group.attendance?.total || 0),
+        actions: actions(group),
+      },
+      children: group.children?.map(renderTree),
+    }
+  }
+
+  const nodes: TreeNode[] = groups
+    .filter(group => !group.parentId)
+    .map(renderTree)
 
   const headers = ['Name', 'Color', 'Confirmed', 'Tentative', 'Pending', 'Declined', 'Considered', 'Total', 'Actions'];
+  const rowClassName = () => {
+    return { 'border-b odd:bg-white even:bg-gray-50 hover:bg-gray-100': true };
+  }
 
   return (
     <>
-      <TreeTable value={nodes} tableStyle={{ minWidth: '50rem' }}>
-        { headers.map((header, index) => <Column key={index} field={header} header={header}></Column>)}
-     
+      <TreeTable value={nodes} rowClassName={rowClassName} className='py-4'>
+        <Column expander field="name" header="Name" className='w-2/5' />
+        <Column field="color" header="Color" bodyClassName="text-sm" />
+        <Column field="confirmed" header="Confirmed" bodyClassName="text-sm" />
+        <Column field="tentative" header="Tentative" bodyClassName="text-sm" />
+        <Column field="pending" header="Pending" bodyClassName="text-sm" />
+        <Column field="declined" header="Declined" bodyClassName="text-sm" />
+        <Column field="considered" header="Considered" bodyClassName="text-sm" />
+        <Column field="total" header="Total" bodyClassName="text-sm" />
+        <Column field="actions" header="Actions" />
       </TreeTable>
-
-      <TableOfContents
-        headers={headers}
-        caption='Groups'
-        elements={groups}
-        rowRender={(group) => (
-          <tr key={group.id} className="bg-white border-b odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800">
-            <td scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
-              {group.name}
-            </td>
-            <td className="px-6">
-              <div className="w-8 h-8 rounded-full" style={{ backgroundColor: group.color }}></div>
-            </td>
-            <td className="px-6 text-lg">
-              {group.attendance?.confirmed}
-            </td>
-            <td className="px-6 text-sm">
-              {group.attendance?.tentative}
-            </td>
-            <td className="px-6 text-sm">
-              {group.attendance?.invited}
-            </td>
-            <td className="px-6 text-sm">
-              {group.attendance?.declined}
-            </td>
-            <td className="px-6 text-sm">
-              {group.attendance?.considered}
-            </td>
-            <td className="px-6 text-sm">
-              {group.attendance?.total}
-            </td>
-            <td>
-              <div className="flex flex-row items-center">
-                <TrashIcon className='size-6 cursor-pointer' onClick={() => { api.destroy(serializer, group, onUpdate) }} />
-                <PencilIcon className='size-6 cursor-pointer' onClick={() => onEdit(group)} />
-              </div>
-            </td>
-          </tr>
-        )}
-      />
     </>
   )
 }