diff --git a/backend/server.js b/backend/server.js
index a7a0de8..a0b03a8 100644
--- a/backend/server.js
+++ b/backend/server.js
@@ -17,22 +17,27 @@ const imageRequest = require('./aws');
 mongoose.connect('mongodb://localhost/ReelLecture',
   { useNewUrlParser: true, useUnifiedTopology: true });
 
-let student = 'student';
-let password = 'password';
-let s = new User({ username: 'sabhya@gmail.com', name: 'Sabhya', role: student });
-s.setPassword(password).then(() => s.save());
 
-let c = new User({ username: 'chris@gmail.com', name: 'Chris', role: 'instructor' });
-c.setPassword(password).then(() => c.save());
 
-let a = new User({ username: 'alex@gmail.com', name: 'Alex', role: 'instructor' });
-a.setPassword(password).then(() => a.save());
+// let student = 'student';
+// let password = 'password';
+// let s = new User({ username: 'sabhya@gmail.com', name: 'Sabhya', role: student });
+// s.setPassword(password).then(() => s.save());
 
-let am = new User({ username: 'amanda@gmail.com', name: 'Amanda', role: student });
-am.setPassword(password).then(() => am.save());
+// let c = new User({ username: 'chris@gmail.com', name: 'Chris', role: 'instructor' });
+// c.setPassword(password).then(() => c.save());
+
+// let a = new User({ username: 'alex@gmail.com', name: 'Alex', role: 'instructor' });
+// a.setPassword(password).then(() => a.save());
+
+// let am = new User({ username: 'amanda@gmail.com', name: 'Amanda', role: student });
+// am.setPassword(password).then(() => am.save());
+
+User.find({ }).exec((err, docs) => console.log(docs))
 
 app.use(express.static(__dirname + '/public'));
 app.use(bodyParser.urlencoded({ extended: true }));
+app.use(bodyParser.json());
 app.use(session({ secret: 'keyboard cat' }));
 app.use(passport.initialize());
 app.use(passport.session());
@@ -93,10 +98,10 @@ calcValues = (data, name) => {
 apiRouter.post('/register', async (req, res) => {
   let newUser = new User({ 
     name: req.body.name, 
-    email: req.body.email,
-    password: req.body.password,
+    username: req.body.email,
     role: req.body.role 
   });
+  await newUser.setPassword(req.body.password);
   let doc = await newUser.save();
   res.send(doc);
 });
diff --git a/frontend/src/component/analysis.js b/frontend/src/component/analysis.js
new file mode 100644
index 0000000..7635eba
--- /dev/null
+++ b/frontend/src/component/analysis.js
@@ -0,0 +1,25 @@
+import React from 'react';
+import { ListGroup, Badge } from 'react-bootstrap';
+import { PieChart } from 'react-minimal-pie-chart';
+import Nav from '../pages/nav';
+import LoadingPage from '../pages/LoadingPage';
+
+class Analysis extends React.Component {
+    render() {
+        let { data } = this.props; 
+        if (data === null) return <LoadingPage />
+
+        let emotions = Object.keys(data);
+    
+        return (
+            <ListGroup>
+                {emotions.map(el => {
+                    if (Object.keys(data[el]).length !== 0)
+                        return <ListGroup.Item>{el} <Badge variant="light" style={{ float: 'right' }}>{Object.values(data[el]).reduce((a,b) => a+b)}</Badge></ListGroup.Item>
+                })}
+            </ListGroup>
+        );
+    }
+}
+
+export default Analysis;
\ No newline at end of file
diff --git a/frontend/src/pages/Analysis.js b/frontend/src/pages/Analysis.js
index 6456ae4..bad8fbb 100644
--- a/frontend/src/pages/Analysis.js
+++ b/frontend/src/pages/Analysis.js
@@ -1,49 +1,29 @@
-import React from 'react'; 
-import { PieChart } from 'react-minimal-pie-chart';
-import LoadingPage from './LoadingPage';
-
-class Analysis extends React.Component {
-    state = {
-        analytics: null,
-        redirect: false
-    }
+import React from 'react';
+import { 
+    Container
+} from 'react-bootstrap';
+import AnalysisComponent from '../component/analysis';
+import Nav from './nav';
 
+class AnalysisPage extends React.Component {
     componentDidMount() {
         fetch("/api/analytics")
             .then(res => res.json())
             .then(data => { 
                 this.setState({ analytics: data }) 
             })
-            .catch(err => this.setState({ redirect: true }));
     }
 
     render() {
-        let { analytics } = this.state; 
-        if (analytics === null) return <LoadingPage />
         return (
-            <div>
-                <div>
-                    <p>{JSON.stringify(analytics)}</p>
-                    <p> {analytics.eyesClosed} </p>
-                    <p> {JSON.stringify(analytics).happy} : </p>
-                    <div>
-                        {/* analytics.forEach(element => {
-                            
-                        }) */}
-                    </div>
-                    {/* <p> By Emotion */}
-                    <PieChart data={[
-                        { title: 'One', value: 10, color: '#E38627' },
-                        { title: 'Two', value: 15, color: '#C13C37' },
-                        { title: 'Three', value: 20, color: '#6A2135' },
-                    ]} radius="10" />
-                </div>
-                <div>
-                    <p> Over Time </p>
-                </div>
-            </div>
-        )
+            <React.Fragment>
+                <Nav />
+                <Container>
+                    <AnalysisComponent data={this.state.analytics}/>
+                </Container>
+            </React.Fragment>
+        );
     }
 }
-
-export default Analysis;
\ No newline at end of file
+  
+export default AnalysisPage;
\ No newline at end of file
diff --git a/frontend/src/pages/Login.js b/frontend/src/pages/Login.js
index fec44fd..9d2006a 100644
--- a/frontend/src/pages/Login.js
+++ b/frontend/src/pages/Login.js
@@ -5,6 +5,7 @@ import {
     Button,
     Form
 } from 'react-bootstrap';
+import Nav from './nav';
   
 class Login extends React.Component {
   state = {
@@ -22,26 +23,34 @@ class Login extends React.Component {
   render() {
     console.log(this.props.match)
     return (
-      <Container>
-        <br />
-        {this.state.showDialog && (
-          <Alert variant='danger'>
-            You must be logged in to access that page.
-          </Alert>
-        )}
-        <Form method="post" action="/api/login">
-          <Form.Group controlId="formBasicEmail">
-            <Form.Control name="username" type="text" placeholder="Username" />
-          </Form.Group>
+      <React.Fragment>
+        <Nav />
+        <Container>
+          <br />
+          {this.state.showDialog && (
+            <Alert variant='danger'>
+              You must be logged in to access that page.
+            </Alert>
+          )}
+          <article className="br3 ba b--black-10 mv4 w-100 w-50-m w-25-l mw6 shadow-5 center">
+            <main className="pa4 black-80">
+              <legend className="f2 fw6 ph0 mh0">Login </legend>
+              <Form method="post" action="/api/login">
+                <Form.Group controlId="formBasicEmail">
+                  <Form.Control name="username" type="email" placeholder="Email" />
+                </Form.Group>
 
-          <Form.Group controlId="formBasicPassword">
-            <Form.Control name="password" type="password" placeholder="Password" />
-          </Form.Group>
-          <Button variant="primary" type="submit">
-            Submit
-          </Button>
-        </Form>
-      </Container>
+                <Form.Group controlId="formBasicPassword">
+                  <Form.Control name="password" type="password" placeholder="Password" />
+                </Form.Group>
+                <Button variant="primary" type="submit">
+                  Submit
+                </Button>
+              </Form>
+            </main>
+          </article>
+        </Container>
+      </React.Fragment>
     );
   }
 }
diff --git a/frontend/src/pages/Register.js b/frontend/src/pages/Register.js
index ae30ca6..07e4492 100644
--- a/frontend/src/pages/Register.js
+++ b/frontend/src/pages/Register.js
@@ -1,5 +1,6 @@
 import React from 'react'; 
-import Nav from './nav';
+import { Redirect } from 'react-router-dom';
+import Nav from './nav'; 
 
 
 class Register extends React.Component {
@@ -9,8 +10,10 @@ class Register extends React.Component {
             name: '', 
             email: '', 
             password: '', 
-            role: '', 
+            role: 'student', 
+            redirect: false
         }
+        this.onSubmitSignIn = this.onSubmitSignIn.bind(this);
     }
 
     onNameChange = (event) => {
@@ -29,7 +32,7 @@ class Register extends React.Component {
         this.setState({role: event.target.value})
     }
 
-    onSubmitSignIn = () => {
+    onSubmitSignIn() {
         fetch('http://localhost:3000/api/register', {
           method: 'post',
           headers: {'Content-Type': 'application/json'},
@@ -42,15 +45,15 @@ class Register extends React.Component {
         })
           .then(response => response.json())
           .then(user => {
-              console.log(user)
-            if (user.id) {
-              this.props.loadUser(user)
-            //  this.props.onRouteChange('home');
+            if (user._id) {
+              this.setState({ redirect: true });
             }
           })
-      }
+        }
 
     render() {
+        if (this.state.redirect) 
+            return <Redirect to={{ pathname: '/login' }} />
         return (
             <React.Fragment>
                 <Nav />
@@ -76,29 +79,17 @@ class Register extends React.Component {
                         </div>
                         <div className="mv3">
                             <label className="db fw6 lh-copy f6" htmlFor="role">Role</label>
-                            <select name="roles" onChange={this.onRoleChange}> 
-                                <option value="Student"> Student </option>
-                                <option value="Instructor"> Instructor </option>
-                          
-                    <div className="">
-                    <label className="db fw6 lh-copy f6" htmlFor="login"> Already Regsitered? </label>
-                    <input onClick={this.onSubmitSignIn} className="b ph3 pv2 input-reset ba b--black bg-transparent grow pointer f3 tc dib" type="submit" value="Log In" />
-                    <a href="#0" className="f6 link dim black db">Register</a>
-                    </div>  </select>
+                            <select onChange={this.onRoleChange}> 
+                                <option value="student">Student</option>
+                                <option value="instructor">Instructor</option>
+                            </select>
                         </div>
-                        <div className="">
-                        <input onClick={this.onSubmitSignIn} className="b ph3 pv2 input-reset ba b--black bg-transparent grow pointer f3 tc dib" type="submit" value="Register" />
+                        <div>
+                            <input onClick={this.onSubmitSignIn} className="b ph3 pv2 input-reset ba b--black bg-transparent grow pointer f3 tc dib" type="submit" value="Register" />
                         </div>
-                        </fieldset>
-                        {/* <div className="">
-                        <input onClick={this.onSubmitSignIn} className="b ph3 pv2 input-reset ba b--black bg-transparent grow pointer f6 dib" type="submit" value="Register" />
-                        </div> */}
-                        {//<div className="lh-copy mt3">
-                                        //  <a href="#0" className="f6 link dim black db">Register</a>
-                                    // </div>
-                                    }
-                    </div>
-                    </main>
+                    </fieldset>
+                </div>
+                </main>
                 </article>
             </React.Fragment>
         );
diff --git a/frontend/src/pages/User.js b/frontend/src/pages/User.js
index 3783533..d0e91df 100644
--- a/frontend/src/pages/User.js
+++ b/frontend/src/pages/User.js
@@ -14,7 +14,7 @@ function User() {
   });
 
   const [sessionName, setSessionName] = useState('');
-
+  console.log(userInfo)
   useEffect(() => {
     fetch('/api/user')
       .then(res => res.json())
@@ -24,7 +24,7 @@ function User() {
   }, []);
 
   return (
-    <>
+    <React.Fragment>
       <Nav />
       <Container><br />
         <h1>Hello, {userInfo.name}!</h1>
@@ -43,7 +43,7 @@ function User() {
           )
         }
       </Container>
-    </>
+    </React.Fragment>
   )
 }
 
diff --git a/frontend/src/pages/VideoChat.js b/frontend/src/pages/VideoChat.js
index a6593fe..edf4fb8 100644
--- a/frontend/src/pages/VideoChat.js
+++ b/frontend/src/pages/VideoChat.js
@@ -9,7 +9,7 @@ import Nav from './nav';
 import { connect, createLocalTracks } from 'twilio-video';
 import ws from 'ws';
 import { ImageCapture } from 'image-capture';
-
+import Analysis from '../component/analysis';
 
 class VideoChat extends React.Component {
   constructor(props) {
@@ -127,7 +127,7 @@ class VideoChat extends React.Component {
     connect(this.state.token, {
       audio: 'true',
       name: this.props.match.params.roomID,
-      video: { width: 1080 }
+      video: { width: 1080 },
     }).then(room => this.setState({ room: room }, () => {
         room.on('participantConnected', this.createTracks);
         room.on('participantDisconnected', this.createTracks);
@@ -239,7 +239,7 @@ class VideoChat extends React.Component {
         {role === 'instructor' && 
           <div style={{ position: 'absolute', backgroundColor: 'rgba(255,255,255,0.8)', top: 56, right: 0, width: '300px', height: '100vh', padding: 20 }}>
             <h1>Analytics</h1>
-            {JSON.stringify(analytics)}<br />
+            <Analysis data={analytics} /><br />
             <Button onClick={this.toggleScreen}>{this.state.screen}</Button>
           </div>
         }
@@ -288,5 +288,3 @@ class VideoChat extends React.Component {
 }
   
 export default VideoChat;
-
-