diff --git a/public/style.css b/public/style.css
index db92fa4..61623ab 100644
--- a/public/style.css
+++ b/public/style.css
@@ -8,12 +8,12 @@ body {
   font-family: sans-serif;
   margin: 2em 1em;
   line-height: 1.5em;
+  text-align: center;
 }
 
 h1 {
   font-style: italic;
   color: #373fff;
-  max-width: calc(100% - 5rem);
   line-height: 1.1;
 }
 
@@ -23,6 +23,7 @@ form {
   grid-gap: 1em;
   padding: 1em;
   max-width: 40ch;
+  margin: 0 auto;
 }
 
 input {
@@ -42,7 +43,6 @@ form button {
   font-size: inherit;
   line-height: 1.4em;
   padding: 0.25em 1em;
-  max-width: 20ch;
 }
 
 form button:hover {
@@ -56,9 +56,14 @@ footer {
 }
 
 #buzzer {
-  width: 90vw;
-  height: 90vh;
+  width: 500px;
+  height: 500px;
   margin: 0 auto;
-  border-radius: 100%;
+  border-radius: 500px;
   background: red;
+  border: 4px solid black;
+  box-shadow: 4px 4px 4px rgba(0,0,0,.5);
+  font-size: 4em;
+  color: white;
+  text-shadow: 2px 2px 2px black;
 }
\ No newline at end of file
diff --git a/server.js b/server.js
index de54f5f..cef15fb 100644
--- a/server.js
+++ b/server.js
@@ -28,6 +28,10 @@ app.set('view engine', 'handlebars');
 
 app.use(express.static("public"));
 
+app.get("/", (request, response) => {
+  response.render('index', { layout: false });
+});
+
 app.get("/:roomId/join", (request, response) => {
   
   let room = rooms.getOrCreateRoom(request.params.roomId);
@@ -67,6 +71,7 @@ wss.on('connection', (ws, req) => {
     }
     if (message.type === "buzz") {
       // TODO: Handle Buzzer
+      console.log(`${participant.participantName} buzzed!`)
     }
   });
 
diff --git a/views/index.handlebars b/views/index.handlebars
new file mode 100644
index 0000000..a49a6d4
--- /dev/null
+++ b/views/index.handlebars
@@ -0,0 +1,39 @@
+<!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>Join room</h1>
+    </header>
+
+    <main>
+      <h2>Oh hi,</h2>
+
+      <form>
+        <label>
+          Room ID
+          <input id="roomId" name="roomId" type="text" maxlength="100" required>
+        </label>
+        <button type="submit" id="submit-name">Submit</button>
+      </form>
+    </main>
+    
+    <script>
+    document.querySelector('form').addEventListener('submit', function(event) {
+      event.preventDefault();
+      let roomId = document.getElementById('roomId').value;
+      window.location = `//${window.location.host}/${roomId}/join`;
+      
+    });
+    </script>
+  </body>
+</html>
diff --git a/views/room.handlebars b/views/room.handlebars
index b2204ca..1d43f64 100644
--- a/views/room.handlebars
+++ b/views/room.handlebars
@@ -37,15 +37,17 @@
       };
 
       socket.onmessage = function(event) {
-        console.log(event.message);
+        console.log(event);
       };
 
       socket.onerror = function(error) {
         alert(`[error] ${error.message}`);
       };
       
-      document.getElementById('buzzer').addEventListener('mousedown', function() {
-        socket.send(JSON.stringify({ type: "buzz" }));
+      document.getElementById('buzzer').addEventListener('click', function() {
+        socket.send(JSON.stringify({ 
+          type: "buzz" 
+        }));
       });
     </script>
   </body>
