diff --git a/firebase-network.js b/firebase-network.js
index f857274b..301bb600 100644
--- a/firebase-network.js
+++ b/firebase-network.js
@@ -40,14 +40,14 @@ export async function getRoom(room) {
   return doc.data();
 }
 
-export async function listRooms() {
+export async function listRooms(limit = 20, publicRoom = true) {
   const db = firebase.firestore();
   const docs = await db
     .collection(COLLECTION)
-    .where('public', '==', true)
+    .where('public', '==', publicRoom)
     .orderBy('lastUpdateTime', 'desc')
     // TODO: limit to last 7 days instead.
-    .limit(20)
+    .limit(limit)
     .get();
 
   const rooms = [];
diff --git a/incrypt.html b/incrypt.html
index da6a122f..9aaa0ee8 100644
--- a/incrypt.html
+++ b/incrypt.html
@@ -110,6 +110,7 @@ <h2>Now Playing</h2>
         >, with {{ allPlayers(openRoom) }}
         <span>({{ moment(openRoom.lastUpdateTime).fromNow() }})</span>
       </p>
+      <br /><br /><br /><br /><br />
     </div>
     <div v-else>
       <!-- Alert spectators that the game can't be joined. -->
diff --git a/index.html b/index.html
index f0fdd235..00f2c60f 100644
--- a/index.html
+++ b/index.html
@@ -80,17 +80,38 @@
 <body class="has-navbar-fixed-top">
   <div id="vue">
     <navbar ref="navbar" v-model="user"></navbar>
-    <!-- Notification -->
-    <div class="modal" :class="{'is-active': alertIsShowing}">
-      <div class="modal-background" @click="alertIsShowing=false"></div>
+    <!-- Share Link Notification -->
+    <div class="modal" :class="{'is-active': showShareModal}">
+      <div class="modal-background" @click="showShareModal=false"></div>
       <div class="modal-content">
         <div class="notification">
           <label class="is-block mb-2">Invite your friends to play!</label>
           <sharelink :link="'https://oneword.games/?room=' + room.name"></sharelink>
-          <button class="delete" aria-label="close" @click="alertIsShowing=false"></button>
+          <button class="delete" aria-label="close" @click="showShareModal=false"></button>
         </div>
       </div>
     </div>
+    <!-- Private Room Notification -->
+    <div class="modal" :class="{'is-active': showPrivateModal}">
+      <div class="modal-background" @click="showPrivateModal=false"></div>
+      <div class="modal-card">
+        <header class="modal-card-head">
+          <p class="modal-card-title">Private room</p>
+          <button class="delete" aria-label="close" @click="showPrivateModal=false"></button>
+        </header>
+        <section v-if="" class="modal-card-body">
+          This room is private. To join, ask your teammates for the room name or link.<br /><br />
+
+          To make your own private room, become a supporter!<br />
+        </section>
+        <footer class="modal-card-foot">
+          <button class="button" @click="'TODO: make a showPrivateModal an enum, have an enter box'">
+            Enter room name
+          </button>
+          <button class="button is-warning" @click="referSupporter('private_room_modal')">Become a supporter</button>
+        </footer>
+      </div>
+    </div>
     <!-- Home page -->
     <div v-if="!room.players" class="container mx-4">
       <!-- Announcements -->
@@ -118,13 +139,20 @@
       </template>
 
       <br /><br />
-      <h2 class="fancy">Open Rooms</h2>
-      <template v-for="openRoom in allRooms">
-        <p>
+      <div v-cloak>
+        <h2 class="fancy">Private Rooms</h2>
+        <p v-for="privateRoom in privateRooms">
+          <a @click="showPrivateModal = true"><b>{{ "Private room" }} with {{ privateRoom.players[0] }}</b></a>
+          <span v-if="privateRoom.players.length > 1"> and {{ privateRoom.players.length }} others</span>
+          ({{ moment(privateRoom.lastUpdateTime).fromNow() }})
+        </p>
+        <h2 class="fancy">Open Rooms</h2>
+        <p v-for="openRoom in allRooms">
           <a @click="room.name = openRoom.name; enterRoom()"><b>{{ openRoom.name }}</b></a
           >, with {{ openRoom.players.join(', ') }} ({{ moment(openRoom.lastUpdateTime).fromNow() }})
         </p>
-      </template>
+      </div>
+      <br /><br /><br /><br /><br />
     </div>
     <!-- In game -->
     <div v-cloak v-else class="container mx-4">
@@ -135,7 +163,7 @@ <h1 class="fancy big">{{ room.name }}</h1>
           <span class="fancy capitalize">Round {{ room.history.length + 1 }}</span>
           <!-- Navigation -->
           <span class="buttons are-small">
-            <button class="button is-dark is-inverted is-outlined" @click="alertIsShowing=true">Invite</button>
+            <button class="button is-dark is-inverted is-outlined" @click="showShareModal=true">Invite</button>
             <button
               v-if="room.players.includes(player.name)"
               class="button is-dark is-inverted is-outlined"
@@ -472,6 +500,7 @@ <h2 v-if="room.history.length > 0" class="fancy">History</h2>
     data: {
       user: {},
       allRooms: [],
+      privateRooms: [],
       room: {
         name: randomWord('adjectives') + '-' + randomWord('nouns'),
         history: [],
@@ -481,7 +510,8 @@ <h2 v-if="room.history.length > 0" class="fancy">History</h2>
         clue: '',
         guess: '',
       },
-      alertIsShowing: false,
+      showShareModal: false,
+      showPrivateModal: false,
       newMod: '',
       wordsSaved: false,
     },
@@ -490,7 +520,7 @@ <h2 v-if="room.history.length > 0" class="fancy">History</h2>
       this.CATEGORY_ORDER = ['nouns', 'verbs', 'adjectives', 'compounds', 'custom'];
     },
     async mounted() {
-      this.allRooms = (await listRooms()).filter((room) => room.players.length > 0);
+      this.populateHome(); // Begin listing rooms, but don't wait for the result to mount
       const parsedUrl = new URL(window.location.href);
       const roomName = parsedUrl.searchParams.get('room');
       const playerName = parsedUrl.searchParams.get('player');
@@ -534,6 +564,10 @@ <h2 v-if="room.history.length > 0" class="fancy">History</h2>
       moment,
       listRooms,
       dedupe,
+      async populateHome() {
+        this.privateRooms = (await listRooms(5, false)).filter((room) => room.players.length > 0);
+        this.allRooms = (await listRooms(20, true)).filter((room) => room.players.length > 0);
+      },
       async enterRoom() {
         if (!this.player.name) {
           this.$refs.navbar.logIn();
@@ -721,22 +755,27 @@ <h2 v-if="room.history.length > 0" class="fancy">History</h2>
             },
           });
           if (result === 'support') {
-            firebase.analytics().logEvent('view_promotion', {
-              source: 'modtools',
-            });
-            window.open('./supporter.html', '_blank');
+            referSupporter('modtools');
           }
           // Reset UI to non-supporter defaults
           this.room.public = true;
           this.room.roundsInGame = 13;
         }
       },
+      referSupporter,
       correct,
       isEnd,
       score,
     },
   });
 
+  function referSupporter(source) {
+    firebase.analytics().logEvent('view_promotion', {
+      source: source,
+    });
+    window.open('./supporter.html', '_blank');
+  }
+
   listenForLogin(vueApp);
 
   // Returns whether a round's guess is correct.
diff --git a/kingdom-royale.html b/kingdom-royale.html
new file mode 100644
index 00000000..7768fa2a
--- /dev/null
+++ b/kingdom-royale.html
@@ -0,0 +1,246 @@
+<!DOCTYPE html>
+<meta charset="utf-8" />
+
+<head>
+  <title>Kingdom Royale</title>
+  <link
+    href="https://fonts.googleapis.com/css?family=Fjalla+One|Merienda+One|Righteous|Sriracha&display=swap"
+    rel="stylesheet"
+  />
+  <script src="https://cdn.firebase.com/libs/firebaseui/3.5.2/firebaseui.js"></script>
+  <link rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/3.5.2/firebaseui.css" />
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <style>
+    html {
+      margin: 0;
+      height: 100%;
+      background-color: #efd8fa;
+      position: relative;
+      overflow: auto;
+    }
+
+    h1,
+    h2,
+    h3 {
+      font-family: 'Merienda One', cursive;
+    }
+
+    body {
+      margin: 48px auto;
+      width: 600px;
+      max-width: 95vw;
+    }
+  </style>
+
+  <meta name="description" content="Conspire and backstab your friends in this cutthroat kingdom!" />
+
+  <!-- Octopus favicon courtesy of Twemoji -->
+  <link rel="icon" href="https://twemoji.maxcdn.com/v/13.0.1/72x72/1f419.png" />
+</head>
+
+<body class="has-navbar-fixed-top">
+  <div id="vue">
+    <!-- <div v-for="enemies, role in winConditions">{{ role }} -- {{ enemies }}</div> -->
+    <!-- Main chat area -->
+    <div>
+      <h3>First Chat</h3>
+      <div class="box">
+        <p v-for="line in sortChat(room.round.main1.chatlog)">
+          [{{ formatTime(line.timestamp) }}] {{ line.player }}: {{ line.text }}
+        </p>
+      </div>
+      Name:
+      <input class="input" v-model="player.name" />
+      Chat:
+      <input class="input" v-model="player.text" @keyup.enter="submitChat('round.main1.chatlog')" />
+      <button class="button" @click="submitChat('round.main1.chatlog')">Submit</button>
+      <br /><br />
+
+      <!-- Pick your secret partner -->
+      <h3>Pick your secret partner</h3>
+      <div class="select">
+        <select v-model="player.target">
+          <option v-for="player, name in room.players" :value="name">{{ name }}</option>
+        </select>
+      </div>
+      <button class="button" @click="pickPartner(player.target)">Pick</button>
+
+      <!-- List partners for now -->
+      <h3>Not-so-secret partners</h3>
+      <div v-for="value, player in room.round.secret">{{ player }} picked {{ value.target }}</div>
+    </div>
+
+    <!-- 1:1 chat -->
+    <h3>Second Chat</h3>
+    <!-- Goes here -->
+    <br /><br />
+
+    <!-- Mod tools -->
+    <div class="box">
+      <h3>Mod tools</h3>
+      <button class="button is-small is-danger" @click="resetRoom">Reset room</button>
+    </div>
+  </div>
+</body>
+
+<script src="https://cdn.jsdelivr.net/npm/vue@2.6.2/dist/vue.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/moment@2.24.0/moment.min.js"></script>
+<!-- Firebase -->
+<script src="https://www.gstatic.com/firebasejs/7.8.1/firebase-app.js"></script>
+<script src="https://www.gstatic.com/firebasejs/7.8.1/firebase-analytics.js"></script>
+<script src="https://www.gstatic.com/firebasejs/7.8.1/firebase-auth.js"></script>
+<script src="https://www.gstatic.com/firebasejs/7.8.1/firebase-firestore.js"></script>
+
+<script>
+  window.COLLECTION = 'kingdom-royale';
+</script>
+<script type="module">
+  import { listenRoom, updateRoom, setRoom, getRoom } from './firebase-network.js';
+  /**
+   Room: {
+      name: apple,
+      players: {
+        alice : {
+          role: 'KING'
+          dead: true
+        }
+      },
+      round: {
+        state: 'MAIN1', // or 'SECRET', 'MAIN2', 'NIGHT'
+        main1: { // 120s
+          chatlog: {
+            // ID is timestamp, for now.
+            // TODO: Will there be collisions? Could hash timestamp + name
+            // TODO: Is it too expensive to sort? Probably not?
+            123456: { player: 'alice', text: 'Hello World'}
+          }
+        },
+        secret: { // 60s each, parallelized
+          alice: {
+            partner: 'bob',
+            chatlog: {...}
+          }
+          bob: {
+            partner: 'carol',
+            chatlog: {...}
+          }
+        }
+        main2: { // 120s
+          murder: {
+            target: 'bob',
+            approved: 'SORCERER',
+          }
+          chatlog: {...}
+        }
+        night: { // 60s
+          assasination: {
+            target: 'alice',
+            // flavor: 'A ambitious caption fired Alice, and they died'????
+          }
+        }
+      }
+      history: [{round1}, ...]
+   }
+  */
+  const winConditions = {
+    KING: ['PRINCE', 'REVOLUTIONARY'],
+    PRINCE: ['KING', 'DOUBLE', 'REVOLUTIONARY'],
+    DOUBLE: ['PRINCE', 'REVOLUTIONARY'],
+    SORCERER: [''],
+    KNIGHT: ['KING', 'PRINCE'],
+    REVOLUTIONARY: ['KING', 'PRINCE', 'DOUBLE'],
+  };
+
+  const vueApp = new Vue({
+    el: '#vue',
+    data: {
+      winConditions,
+      player: {
+        name: 'Austin',
+        chat: '',
+        target: '',
+      },
+      room: {
+        name: 'apple',
+      },
+    },
+    async mounted() {
+      const room = await getRoom(this.room);
+      if (room) {
+        this.room = room;
+      } else {
+        await resetRoom();
+      }
+    },
+    methods: {
+      async resetRoom() {
+        this.room = {
+          name: 'apple',
+          players: {
+            Alice: {
+              role: 'KING',
+            },
+            Bob: {
+              role: 'PRINCE',
+            },
+            Carol: {
+              role: 'DOUBLE',
+            },
+            David: {
+              role: 'SORCERER',
+            },
+            Eve: {
+              role: 'KNIGHT',
+            },
+            Frank: {
+              role: 'REVOLUTIONARY',
+            },
+          },
+          round: {
+            state: 'MAIN1',
+            main1: {
+              chatlog: {
+                123456: {
+                  player: 'Alice',
+                  text: 'Bob is the imposter!',
+                },
+                234567: {
+                  player: 'Bob',
+                  text: "No, I swear it's Carol...",
+                },
+              },
+            },
+            secret: {},
+          },
+        };
+        await setRoom(this.room);
+      },
+      // Takes a chat JSON, and outputs an array sorted by time
+      sortChat(chatlog) {
+        return Object.entries(chatlog)
+          .map(([timestamp, chat]) => {
+            chat.timestamp = timestamp;
+            return chat;
+          })
+          .sort((c1, c2) => parseInt(c1.timestamp) - parseInt(c2.timestamp));
+      },
+      async submitChat(chatlogPath) {
+        await updateRoom(this.room, {
+          [`${chatlogPath}.${Date.now()}`]: { player: this.player.name, text: this.player.text },
+        });
+        // Then clear the current line
+        this.player.text = '';
+      },
+      formatTime(timestamp) {
+        return moment(parseInt(timestamp)).format('hh:mm:ss');
+      },
+      async pickPartner(target) {
+        await updateRoom(this.room, {
+          [`round.secret.${this.player.name}.target`]: target,
+        });
+      },
+    },
+  });
+  listenRoom(vueApp);
+</script>
