diff --git a/authenticated.html b/authenticated.html
index 867b608..c8f0d82 100644
--- a/authenticated.html
+++ b/authenticated.html
@@ -1,5 +1,9 @@
 <!DOCTYPE html>
   <head>
+    <title>Web Version of Yo</title>
+    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
+    <link href="style.css" rel="stylesheet" type="text/css" media="all">
+
     <!-- React JS -->
     <script src="http://fb.me/react-0.10.0.min.js"></script>
     <script src="http://fb.me/JSXTransformer-0.10.0.js"></script>
@@ -14,127 +18,11 @@
   <body>
     <div id="mount"></div>
 
+    <script type="text/jsx" src="coreComponents.js"></script>
+
     <script type="text/jsx">
       /** @jsx React.DOM */
 
-      var baseUrl = 'https://yo-in-react.firebaseio.com';
-
-      // USER DISPLAY COMPONENT (to display username)
-      var UserDisplay = React.createClass({
-        render : function() {
-          return <section><h3>Username: {this.props.user.name}</h3></section>;
-        }
-      });
-
-      // YO DISPLAY COMPONENT (to display yo count and received yos)
-      var YoDisplay = React.createClass({
-        mixins : [ReactFireMixin],
-        componentWillMount : function() {
-          this.bindAsArray(new Firebase(baseUrl + '/users/' + this.props.name + '/notifications'), 'notifications');
-        },
-        getInitialState : function() {
-          return {
-            notifications : []
-          };
-        },
-        render : function() {
-          var notifications = '';
-          if (this.state.notifications.length) {
-            notifications = (
-              <div>
-                <h3>Yos</h3>
-                <ul>{this.state.notifications.slice().reverse().map(function(notification) {
-                  var timestamp = new Date(notification.timestamp).toString();
-                  return <li>{notification.from} at {timestamp}</li>;
-                })}</ul>
-              </div>
-            );
-          }
-          return (
-            <section>
-              <div>Yo Count: {this.props.user.yoCount || 0}</div>
-              {notifications}
-            </section>
-          );
-        }
-      });
-
-      // PEOPLE TO YO COMPONENT (to display list of people you can yo)
-      var PeopleToYo = React.createClass({
-        mixins : [ReactFireMixin],
-        componentWillMount : function() {
-          this.bindAsArray(new Firebase(baseUrl + '/users/' + this.props.name + '/yoList'), 'yoList');
-        },
-        getInitialState : function() {
-          return {
-            newPerson : '',
-            yoList : [],
-            showError : false
-          };
-        },
-        _sendYo : function(personToYo) {
-          var $this = this;
-          var yoRecipient = new Firebase(baseUrl + '/users/' + personToYo);
-
-          yoRecipient.once('value', function(data) {
-            if (!data.val()) {
-              return;
-            }
-
-            yoRecipient.child('yoCount').set((data.val().yoCount + 1) || 1);
-            yoRecipient.child('notifications').push({
-              from : $this.props.name,
-              timestamp : new Date().getTime()
-            });
-          });
-        },
-        _handleChange : function(event) {
-          this.setState({
-            showError : false,
-            newPerson : event.target.value
-          });
-        },
-        _addPerson : function() {
-          if (!this.state.newPerson.trim()) {
-            return;
-          }
-
-          var $this = this;
-          var newPersonRef = new Firebase(baseUrl + '/users/' + this.state.newPerson.trim());
-          newPersonRef.once('value', function(data) {
-            if (!data.val()) {
-              $this.setState({
-                showError : true
-              });
-              return;
-            }
-
-            $this.firebaseRefs['yoList'].push({
-              name: $this.state.newPerson.trim()
-            });
-
-            $this.setState({
-              showError : false,
-              newPerson : ''
-            });
-          });
-
-        },
-        render : function() {
-          return (
-            <section>
-              <ul>{this.state.yoList.map(function(person) {
-                return <li>{person.name} <button onClick={this._sendYo.bind(this, person.name)}>Yo</button></li>;
-              }, this)}</ul>
-
-              <input type="text" value={this.state.newPerson} onChange={this._handleChange} />
-              <button onClick={this._addPerson}>Add to Yo List</button>
-              {this.state.showError ? 'That person doesn\'t exist!' : ''}
-            </section>
-          );
-        }
-      });
-
       // APP COMPONENT
       var App = React.createClass({
         mixins : [ReactFireMixin],
@@ -195,7 +83,7 @@ <h3>Yos</h3>
           if (this.state.authenticated) {
             return (
               <div>
-                <a href="#" onClick={this._logout}>Logout</a>
+                <a className="margin-bottom btn btn-default btn-large" href="#" onClick={this._logout}>Logout</a>
                 <UserDisplay user={this.state.user} />
                 <PeopleToYo name={this.state.name} />
                 <YoDisplay user={this.state.user} name={this.state.name} />
@@ -203,10 +91,17 @@ <h3>Yos</h3>
             );
           }
 
+          var errorMsg = '';
+          if (this.state.errorMsg) {
+            errorMsg = <div className="alert alert-danger" role="alert">Error : {this.state.errorMsg}</div>
+          }
+
           return (
             <div>
-              <a href="#" onClick={this._login}>Login</a>
-              <div>{this.state.errorMsg ? ('Error : ' + this.state.errorMsg) : ''}</div>
+              <h3>My Web Version of Yo using React and Firebase</h3>
+              <div className="margin-bottom">If you do not want to log in, you can still view the experience at <a href="index.html">here</a>.</div>
+              {errorMsg}
+              <a className="margin-bottom btn btn-primary" href="#" onClick={this._login}>Login</a>
             </div>
           );
         }
diff --git a/coreComponents.js b/coreComponents.js
new file mode 100644
index 0000000..9a275c0
--- /dev/null
+++ b/coreComponents.js
@@ -0,0 +1,165 @@
+/** @jsx React.DOM */
+
+var baseUrl = 'https://yo-in-react.firebaseio.com';
+
+// USER DISPLAY COMPONENT (to display username)
+var UserDisplay = React.createClass({
+  render : function() {
+    return (
+      <section>
+        <div className="panel panel-default">
+          <div className="panel-heading">Username</div>
+          <div className="panel-body">
+            <strong>{this.props.user.name}</strong>
+          </div>
+        </div>
+      </section>
+    );
+  }
+});
+
+// YO DISPLAY COMPONENT (to display yo count and received yos)
+var YoDisplay = React.createClass({
+  mixins : [ReactFireMixin],
+  componentWillMount : function() {
+    this.bindAsArray(new Firebase(baseUrl + '/users/' + this.props.name + '/notifications'), 'notifications');
+  },
+  getInitialState : function() {
+    return {
+      notifications : []
+    };
+  },
+  render : function() {
+    var notifications = '';
+    if (this.state.notifications.length) {
+      notifications = (
+        <div className="panel panel-default">
+          <div className="panel-heading">Yos</div>
+          <div className="panel-body">
+            <ul className="list-unstyled">{this.state.notifications.slice().reverse().map(function(notification) {
+              var timestamp = new Date(notification.timestamp).toString();
+              return <li>{notification.from} on {timestamp}</li>;
+            })}</ul>
+          </div>
+        </div>
+      );
+    }
+    return (
+      <section>
+        <div className="panel panel-default">
+          <div className="panel-heading">Yo Count</div>
+          <div className="panel-body">
+            {this.props.user.yoCount || 0}
+          </div>
+        </div>
+
+        {notifications}
+      </section>
+    );
+  }
+});
+
+// PEOPLE TO YO COMPONENT (to display list of people you can yo)
+var PeopleToYo = React.createClass({
+  mixins : [ReactFireMixin],
+  componentWillMount : function() {
+    this.bindAsArray(new Firebase(baseUrl + '/users/' + this.props.name + '/yoList'), 'yoList');
+  },
+  getInitialState : function() {
+    return {
+      newPerson : '',
+      yoList : [],
+      showError : false
+    };
+  },
+  _sendYo : function(personToYo) {
+    var $this = this;
+    var yoRecipient = new Firebase(baseUrl + '/users/' + personToYo);
+
+    yoRecipient.once('value', function(data) {
+      if (!data.val()) {
+        return;
+      }
+
+      yoRecipient.child('yoCount').set((data.val().yoCount + 1) || 1);
+      yoRecipient.child('notifications').push({
+        from : $this.props.name,
+        timestamp : new Date().getTime()
+      });
+    });
+  },
+  _handleChange : function(event) {
+    this.setState({
+      showError : false,
+      newPerson : event.target.value
+    });
+  },
+  _addPerson : function(e) {
+    e.preventDefault();
+    if (!this.state.newPerson.trim()) {
+      return;
+    }
+
+    var $this = this;
+    var newPersonRef = new Firebase(baseUrl + '/users/' + this.state.newPerson.trim());
+    newPersonRef.once('value', function(data) {
+      if (!data.val()) {
+        $this.setState({
+          showError : true
+        });
+        return;
+      }
+
+      $this.firebaseRefs['yoList'].push({
+        name: $this.state.newPerson.trim()
+      });
+
+      $this.setState({
+        showError : false,
+        newPerson : ''
+      });
+    });
+
+  },
+  render : function() {
+    var errorHtml = '';
+    if (this.state.showError) {
+      errorHtml = <div className="alert alert-danger" role="alert">That person does not exist!</div>;
+    }
+
+    var usersToYoHtml = '';
+    if (this.state.yoList.length) {
+      usersToYoHtml = (
+        <div className="panel panel-default">
+          <div className="panel-heading">Users To Yo</div>
+          <div className="panel-body">
+            <ul className="list-unstyled">{this.state.yoList.map(function(person) {
+              return <li>{person.name} <button className="btn btn-primary" onClick={this._sendYo.bind(this, person.name)}>Yo</button></li>;
+            }, this)}</ul>
+          </div>
+        </div>
+      );
+    }
+
+    return (
+      <section>
+        {usersToYoHtml}
+
+        <div className="panel panel-default">
+          <div className="panel-heading">Add New User</div>
+          <div className="panel-body">
+            <form role="form">
+              {errorHtml}
+              <div className="form-group">
+                <input type="text" className="form-control text-center" placeholder="Twitter Handle" value={this.state.newPerson} onChange={this._handleChange} />
+              </div>
+
+              <button type="submit" onClick={this._addPerson} className="btn btn-default">Add to Yo List</button>
+            </form>
+          </div>
+        </div>
+
+      </section>
+    );
+  }
+});
\ No newline at end of file
diff --git a/index.html b/index.html
index 9fa665b..d5427f0 100644
--- a/index.html
+++ b/index.html
@@ -1,5 +1,9 @@
 <!DOCTYPE html>
   <head>
+    <title>Web Version of Yo</title>
+    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
+    <link href="style.css" rel="stylesheet" type="text/css" media="all">
+
     <!-- React JS -->
     <script src="http://fb.me/react-0.10.0.min.js"></script>
     <script src="http://fb.me/JSXTransformer-0.10.0.js"></script>
@@ -14,127 +18,11 @@
   <body>
     <div id="mount"></div>
 
+    <script type="text/jsx" src="coreComponents.js"></script>
+
     <script type="text/jsx">
       /** @jsx React.DOM */
 
-      var baseUrl = 'https://yo-in-react.firebaseio.com';
-
-      // USER DISPLAY COMPONENT (to display username)
-      var UserDisplay = React.createClass({
-        render : function() {
-          return <section><h3>Username: {this.props.user.name}</h3></section>;
-        }
-      });
-
-      // YO DISPLAY COMPONENT (to display yo count and received yos)
-      var YoDisplay = React.createClass({
-        mixins : [ReactFireMixin],
-        componentWillMount : function() {
-          this.bindAsArray(new Firebase(baseUrl + '/users/' + this.props.name + '/notifications'), 'notifications');
-        },
-        getInitialState : function() {
-          return {
-            notifications : []
-          };
-        },
-        render : function() {
-          var notifications = '';
-          if (this.state.notifications.length) {
-            notifications = (
-              <div>
-                <h3>Yos</h3>
-                <ul>{this.state.notifications.slice().reverse().map(function(notification) {
-                  var timestamp = new Date(notification.timestamp).toString();
-                  return <li>{notification.from} at {timestamp}</li>;
-                })}</ul>
-              </div>
-            );
-          }
-          return (
-            <section>
-              <div>Yo Count: {this.props.user.yoCount || 0}</div>
-              {notifications}
-            </section>
-          );
-        }
-      });
-
-      // PEOPLE TO YO COMPONENT (to display list of people you can yo)
-      var PeopleToYo = React.createClass({
-        mixins : [ReactFireMixin],
-        componentWillMount : function() {
-          this.bindAsArray(new Firebase(baseUrl + '/users/' + this.props.name + '/yoList'), 'yoList');
-        },
-        getInitialState : function() {
-          return {
-            newPerson : '',
-            yoList : [],
-            showError : false
-          };
-        },
-        _sendYo : function(personToYo) {
-          var $this = this;
-          var yoRecipient = new Firebase(baseUrl + '/users/' + personToYo);
-
-          yoRecipient.once('value', function(data) {
-            if (!data.val()) {
-              return;
-            }
-
-            yoRecipient.child('yoCount').set((data.val().yoCount + 1) || 1);
-            yoRecipient.child('notifications').push({
-              from : $this.props.name,
-              timestamp : new Date().getTime()
-            });
-          });
-        },
-        _handleChange : function(event) {
-          this.setState({
-            showError : false,
-            newPerson : event.target.value
-          });
-        },
-        _addPerson : function() {
-          if (!this.state.newPerson.trim()) {
-            return;
-          }
-
-          var $this = this;
-          var newPersonRef = new Firebase(baseUrl + '/users/' + this.state.newPerson.trim());
-          newPersonRef.once('value', function(data) {
-            if (!data.val()) {
-              $this.setState({
-                showError : true
-              });
-              return;
-            }
-
-            $this.firebaseRefs['yoList'].push({
-              name: $this.state.newPerson.trim()
-            });
-
-            $this.setState({
-              showError : false,
-              newPerson : ''
-            });
-          });
-
-        },
-        render : function() {
-          return (
-            <section>
-              <ul>{this.state.yoList.map(function(person) {
-                return <li>{person.name} <button onClick={this._sendYo.bind(this, person.name)}>Yo</button></li>;
-              }, this)}</ul>
-
-              <input type="text" value={this.state.newPerson} onChange={this._handleChange} />
-              <button onClick={this._addPerson}>Add to Yo List</button>
-              {this.state.showError ? 'That person doesn\'t exist!' : ''}
-            </section>
-          );
-        }
-      });
-
       // APP COMPONENT
       var App = React.createClass({
         mixins : [ReactFireMixin],
@@ -153,6 +41,8 @@ <h3>Yos</h3>
 
           return (
             <div>
+              <h3>My Web Version of Yo using React and Firebase</h3>
+              <div className="margin-bottom">This is a demo page signed in with the username "special-user-for-demo"<br/>You can actually sign in via Twitter <a href="authenticated.html">here</a>.</div>
               <UserDisplay user={this.state.user} />
               <PeopleToYo name={this.state.name} />
               <YoDisplay user={this.state.user} name={this.state.name} />
@@ -163,5 +53,6 @@ <h3>Yos</h3>
 
       React.renderComponent(<App />, document.getElementById('mount'));
     </script>
+
   </body>
 </html>
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..4ddc4dc
--- /dev/null
+++ b/style.css
@@ -0,0 +1,13 @@
+#mount {
+  width: 640px;
+  margin: 20px auto;
+  text-align: center;
+}
+
+.list-unstyled li {
+  padding: 5px 0px;
+}
+
+.margin-bottom {
+  margin-bottom: 10px;
+}
\ No newline at end of file
