diff --git a/public/style.css b/public/style.css
index 61623ab..f7ae227 100644
--- a/public/style.css
+++ b/public/style.css
@@ -66,4 +66,20 @@ footer {
   font-size: 4em;
   color: white;
   text-shadow: 2px 2px 2px black;
+}
+
+h2 img {
+  max-height: 40px;
+}
+
+figure.participant {
+  display: inline-block;
+}
+
+figure.participant img {
+  max-height: 150px;
+}
+figure.participant figcaption {
+  font-weight: bold;
+  font-size: 1.3em;
 }
\ No newline at end of file
diff --git a/room.js b/room.js
index 7d012a0..a34878a 100644
--- a/room.js
+++ b/room.js
@@ -1,6 +1,14 @@
 const chars = require('./characters.json');
 const rooms = {};
 
+function shuffle(a) {
+    for (let i = a.length - 1; i > 0; i--) {
+        const j = Math.floor(Math.random() * (i + 1));
+        [a[i], a[j]] = [a[j], a[i]];
+    }
+    return a;
+}
+
 function getOrCreateRoom(roomId) {
   let room = rooms[roomId];
   
@@ -8,7 +16,7 @@ function getOrCreateRoom(roomId) {
     room = {
       roomId: roomId,
       participants: [],
-      characters: 
+      characters: shuffle(chars)
     };
     rooms[roomId] = room;
   }
@@ -22,6 +30,7 @@ function addParticipant(roomId, participantId, participantName) {
   room.participants.push({
     participantId, 
     participantName,
+    character: room.characters[room.participants.length]
   });
   
   rooms[roomId] = room;
diff --git a/server.js b/server.js
index cef15fb..db6129d 100644
--- a/server.js
+++ b/server.js
@@ -44,12 +44,19 @@ app.get("/:roomId/join", (request, response) => {
       name: participant.participantName,
       participantName: participant.participantName,
       participantId: participant.participantId,
+      character: participant.character,
     });
   } else {
      response.render('join', {layout: false, room: request.params.roomId});
   }  
 });
 
+app.get("/:roomId/audience", (request, response) => {
+  let room = rooms.getOrCreateRoom(request.params.roomId);
+  
+  response.render('audience', {layout: false, room: request.params.roomId, participants: room.participants });
+});
+
 app.post("/:roomId/join", (request, response) => {
   rooms.addParticipant(request.params.roomId, request.fingerprint.hash, request.body.name);
   response.redirect(`/${request.params.roomId}/join`);
diff --git a/views/audience.handlebars b/views/audience.handlebars
new file mode 100644
index 0000000..436d1bc
--- /dev/null
+++ b/views/audience.handlebars
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Buzzer</title>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="description" content="A cool thing made with Glitch">
+    <link id="favicon" rel="icon" href="https://glitch.com/edit/favicon-app.ico" type="image/x-icon">
+    <link rel="stylesheet" href="/style.css">
+    <script src="/script.js" defer></script>
+  </head>
+  <body>
+    <header>
+      <h1>{{room}}</h1>
+    </header>
+
+    <main>
+      <h2>Participants</h2>
+      
+      {{#each participants}}
+        <figure class="participant">
+          <img src="{{this.character}}" />
+          <figcaption>{{this.participantName}}</figcaption>
+        </figure>
+      {{/each}}
+    </main>
+  </body>
+</html>
diff --git a/views/room.handlebars b/views/room.handlebars
index 1d43f64..1bc1fbc 100644
--- a/views/room.handlebars
+++ b/views/room.handlebars
@@ -16,7 +16,7 @@
     </header>
 
     <main>
-      <h2>Oh hi, {{name}}</h2>
+      <h2>Oh hi, {{name}} <img src="{{character}}"/></h2>
   
       <button id="buzzer">
         BUZZ
