diff --git a/src/web/pug/guild.pug b/src/web/pug/guild.pug
index c3adbdf..edbbbc4 100644
--- a/src/web/pug/guild.pug
+++ b/src/web/pug/guild.pug
@@ -195,48 +195,61 @@ block body
     h3.mt32.fs-category#room-notifications Room notifications
     .s-card
       p.s-description.mt0 Choose which Discord role receives Matrix @room notifications
-      each row in customPingRooms
-        .d-flex.ai-center.g16.mb8
-          label.s-label.fl-grow1(for="ping-role-" + row.channel.id)= "#" + row.channel.name
-          form(method="post" action=rel("/api/room-ping-role"))
-            input(type="hidden" name="guild_id" value=guild_id)
-            input(type="hidden" name="channel_id" value=row.channel.id)
-            .s-select
-              select(name="ping_role_id" id="ping-role-" + row.channel.id onchange="this.form.requestSubmit()")
-                if !pingRoles.some(role => role.id === row.ping_role_id)
-                  option(value=row.ping_role_id selected disabled) Deleted role (choose a replacement)
-                each role in pingRoles
-                  option(value=role.id selected=row.ping_role_id === role.id)= "@" + role.name
-            noscript
-              button.s-btn.s-btn__outlined.mt8(type="submit") Save
-          form(method="post" action=rel("/api/room-ping-role"))
-            input(type="hidden" name="guild_id" value=guild_id)
-            input(type="hidden" name="channel_id" value=row.channel.id)
-            input(type="hidden" name="ping_role_id" value="")
-            button.s-btn.s-btn__danger.s-btn__outlined(type="submit" aria-label="Remove custom role for #" + row.channel.name) Remove
+      if customPingRooms.length
+        .s-table-container(style="container-type: inline-size")
+          table.s-table.s-table__bx-simple(style="table-layout: fixed")
+            thead
+              tr
+                th(scope="col" style="width: calc(50cqw - 40px)") Channel
+                th.pr0(scope="col") Notify role
+            tbody
+              each row in customPingRooms
+                tr
+                  td.va-middle
+                    label.s-label(for="ping-role-" + row.channel.id)= "#" + row.channel.name
+                  td.pr0
+                    .d-flex.ai-start.g16
+                      form.fl-grow1.wmn0(method="post" action=rel("/api/room-ping-role"))
+                        input(type="hidden" name="guild_id" value=guild_id)
+                        input(type="hidden" name="channel_id" value=row.channel.id)
+                        .s-select
+                          select.w100(name="ping_role_id" id="ping-role-" + row.channel.id onchange="this.form.requestSubmit()" style="height: 32px")
+                            if !pingRoles.some(role => role.id === row.ping_role_id)
+                              option(value=row.ping_role_id selected disabled) Deleted role (choose a replacement)
+                            each role in pingRoles
+                              option(value=role.id selected=row.ping_role_id === role.id)= "@" + role.name
+                        noscript
+                          button.s-btn.s-btn__outlined.mt8(type="submit") Save
+                      form.d-flex.ai-stretch(method="post" action=rel("/api/room-ping-role"))
+                        input(type="hidden" name="guild_id" value=guild_id)
+                        input(type="hidden" name="channel_id" value=row.channel.id)
+                        input(type="hidden" name="ping_role_id" value="")
+                        button.s-btn.s-btn__danger.s-btn__outlined.py0(type="submit" aria-label="Remove custom role for #" + row.channel.name style="height: 32px") Remove
 
       if defaultPingRooms.length && pingRoles.length
-        details.mt16
+        details.mt16
           summary.s-label.cursor-pointer Add custom role
-          form.mt12(method="post" action=rel("/api/room-ping-role"))
+          form.mt16(method="post" action=rel("/api/room-ping-role"))
             input(type="hidden" name="guild_id" value=guild_id)
-            .d-grid.grid__2.g8(class="sm:grid__1")
-              .wmn0
+            .d-flex.fw-wrap.ai-end.g16
+              .fl-grow1.wmn0(style="flex-basis: 0; min-width: 180px")
                 label.s-label(for="ping-role-channel") Channel
                 .s-select
-                  select.w100.box-border#ping-role-channel(name="channel_id" required)
+                  select.w100.box-border#ping-role-channel(name="channel_id" required style="height: 32px")
                     option(value="" selected disabled) Choose a channel
                     each row in defaultPingRooms
                       - const parent = discord.channels.get(row.channel.parent_id)
                       option(value=row.channel.id)= "#" + row.channel.name + (parent ? " - " + parent.name : "")
-              .wmn0
+              .fl-grow1.wmn0(style="flex-basis: 0; min-width: 180px")
                 label.s-label(for="ping-role-new") Notify role
                 .s-select
-                  select.w100.box-border#ping-role-new(name="ping_role_id" required)
+                  select.w100.box-border#ping-role-new(name="ping_role_id" required style="height: 32px")
                     option(value="" selected disabled) Choose a role
                     each role in pingRoles
                       option(value=role.id)= "@" + role.name
-            button.s-btn.s-btn__filled.mt8(type="submit") Add
+              button.s-btn.s-btn__icon.s-btn__filled.d-inline-flex.ai-center.g4.py0(type="submit" style="height: 32px")
+                != icons.Icons.IconPlusSm
+                span Add
 
   h3.fs-category.mt32 Auto-create
   .s-card.d-grid.px0