diff --git a/googletrendsgame/public/index.html b/googletrendsgame/public/index.html
index ed0ebaf..9c8f9cb 100644
--- a/googletrendsgame/public/index.html
+++ b/googletrendsgame/public/index.html
@@ -19,7 +19,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Google Trends Game</title>
   </head>
   <body>
     <noscript>
diff --git a/googletrendsgame/src/App.js b/googletrendsgame/src/App.js
index 483daf4..631a556 100644
--- a/googletrendsgame/src/App.js
+++ b/googletrendsgame/src/App.js
@@ -3,6 +3,8 @@ import logo from './logo.svg';
 import './App.css';
 import openSocket from 'socket.io-client';
 import NicknameInput from './components/NicknameInput';
+import CreateRoomInput from './components/CreateRoomInput';
+import RoomList from './components/RoomList';
 
 const socket = openSocket('129.21.91.149:3000');
 
@@ -11,27 +13,37 @@ class App extends Component {
     super(props);
 
     this.state={
-      progression: '',
+      progression: 'createRoom',
       roomList: []
     }
   }
 
-  renderRooms(payload) {
-    this.setState({
-      roomList: payload,
-      progression: 'register'
-    });
-    console.log(this.state.roomList);
-  }
-
   componentDidMount(){
+  }
 
+  stateHandler(){
+    socket.on('sendRooms', payload => this.setState({
+    progression: 'roomChoose',
+    roomList: payload.rooms
+    }));
   }
 
   render() {
-    return(
-      <NicknameInput socket = {socket}/>
-    )
+    if (this.state.progression === 'register') {
+      return(
+        <NicknameInput socket = {socket}/>
+      )
+    } else if(this.state.progression === 'roomChoose') {
+
+        return(
+          <RoomList roomArray = {this.state.roomList}/>
+        )
+
+    } else if (this.state.progression === 'createRoom') {
+      return(
+        <CreateRoomInput socket = {socket}/>
+      )
+    }
   }
 }
 
diff --git a/googletrendsgame/src/components/RoomList.js b/googletrendsgame/src/components/RoomList.js
index e69de29..ec9f3ca 100644
--- a/googletrendsgame/src/components/RoomList.js
+++ b/googletrendsgame/src/components/RoomList.js
@@ -0,0 +1,19 @@
+import React, { Component } from 'react';
+import RoomListItem from 'roomListItem';
+
+class RoomList extends Component {
+
+  renderRooms(roomArray) {
+      return(
+        <RoomListItem key = {room.name} roomName = {room.name} private = {room.passwordBool} capacity = {room.capacity} occupancy = {room.occupants} />
+      )
+  }
+
+  render(){
+    return(
+      <div>
+        {this.props.roomArray.map(this.renderRooms)}
+      </div>
+    )
+  }
+}
diff --git a/googletrendsgame/src/components/RoomListItem.js b/googletrendsgame/src/components/RoomListItem.js
index e69de29..411a536 100644
--- a/googletrendsgame/src/components/RoomListItem.js
+++ b/googletrendsgame/src/components/RoomListItem.js
@@ -0,0 +1,16 @@
+import React from 'react';
+
+export default (props) => {
+  if (props.private = false){
+    const privateString = "Public"
+  } else {
+    const privateString = "Private"
+  }
+  return(
+    <div>
+      <h1>{props.roomName}</h1>
+      <h3>`${props.occupancy}/${props.capacity}`</h3>
+      <p>{privateString}</p>
+    </div>
+  )
+}
diff --git a/googletrendsgame/src/components/activeButton.js b/googletrendsgame/src/components/activeButton.js
index cbc1da9..a53fb57 100644
--- a/googletrendsgame/src/components/activeButton.js
+++ b/googletrendsgame/src/components/activeButton.js
@@ -1,16 +1,30 @@
 import React, { Component } from 'react';
+import ROOM_CAPACITY from '../App'
 
 export default class activeButton extends Component {
 
   render(){
-    if (this.props.input != ''){
-      return(
-        <button>Let's play!</button>
-      )
-    } else {
-      return(
-        <button>Enter a nickname.</button>
-      )
+    switch (this.props.type) {
+      case 'register':
+        if(this.props.input != ''){
+          return(
+            <button>Let's play!</button>
+          )
+        } else {
+          return(
+            <button disabled>Enter a nickname to play.</button>
+          )
+        }
+      case 'createRoom':
+        if(this.props.passInput != '' && this.props.capacityInput != '' && this.props.capacityInput <= 25 && this.props.capacityInput>=2 && this.props.capacityInput.length <= 2){
+          return(
+            <button>Create Room</button>
+          )
+        } else {
+          return(
+            <button disabled>Enter password and capacity to create a room.</button>
+          )
+        }
     }
   }
 
diff --git a/googletrendsgame/src/components/createRoomInput.js b/googletrendsgame/src/components/createRoomInput.js
index e69de29..65e4ed3 100644
--- a/googletrendsgame/src/components/createRoomInput.js
+++ b/googletrendsgame/src/components/createRoomInput.js
@@ -0,0 +1,45 @@
+import React, { Component } from 'react';
+import ActiveButton from './activeButton';
+
+export default class CreateRoomInput extends Component {
+  constructor(props){
+    super(props);
+
+    this.state={
+      passwordFieldValue: '',
+      capacityFieldValue:''
+    }
+
+    this.onInputChangePass = this.onInputChangePass.bind(this);
+    this.onInputChangeCapacity = this.onInputChangeCapacity.bind(this);
+    this.sendRoomData = this.sendRoomData.bind(this);
+  }
+
+  onInputChangePass(event) {
+    this.setState({ passwordFieldValue: event.target.value });
+  }
+
+  onInputChangeCapacity(event) {
+    this.setState({ capacityFieldValue: event.target.value});
+  }
+
+  sendRoomData(event){
+    event.preventDefault();
+
+    this.props.socket.emit('createRoom', {password: this.state.passwordFieldValue, capacity: this.state.capacityFieldValue});
+    this.setState({ passwordFieldValue: '', capacityFieldValue: '' });
+  }
+
+  render(){
+    return(
+      <form onSubmit={this.sendRoomData}>
+        <input type="password" placeholder="Password" onChange = {this.onInputChangePass} value={this.state.passwordFieldValue} />
+        <input type='number' placeholder="Max room members" onChange = {this.onInputChangeCapacity} value={this.state.capacityFieldValue} />
+        <span>
+          <ActiveButton passInput={this.state.passwordFieldValue} capacityInput={this.state.capacityFieldValue} type='createRoom' />
+        </span>
+      </form>
+    )
+  }
+
+}
diff --git a/googletrendsgame/src/components/nicknameInput.js b/googletrendsgame/src/components/nicknameInput.js
index 9693e6d..5d395aa 100644
--- a/googletrendsgame/src/components/nicknameInput.js
+++ b/googletrendsgame/src/components/nicknameInput.js
@@ -27,7 +27,7 @@ export default class NicknameInput extends Component {
        <form onSubmit={this.sendNickname}>
         <input placeholder="Enter a nickname..." onChange = {this.onInputChange} value={this.state.fieldValue} />
         <span>
-          <ActiveButton className = "" input = {this.state.fieldValue} />
+          <ActiveButton input = {this.state.fieldValue} type='register' />
         </span>
        </form>
      )
