diff --git a/github-user-breakdown/src/auth/LoginPage.js b/github-user-breakdown/src/auth/LoginPage.js
index 20c994c..0764148 100644
--- a/github-user-breakdown/src/auth/LoginPage.js
+++ b/github-user-breakdown/src/auth/LoginPage.js
@@ -10,22 +10,36 @@ const Wrapper = styled.div`
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  border: 2px solid black;
   max-width: 300px;
-  margin: 20px auto;
+  margin: 100px auto;
   padding: 30px;
+  background-color: #f8f8f8;
   form {
     display: flex;
     flex-direction: column;
     input {
       margin: 10px 0;
       font-size: 18px;
+      border-radius: 5px;
+      border: 2px solid #9f86ff;
     }
     button {
-      margin: 10px 0;
-      border: none;
-      background-color: #9f86ff;
+      border: 0;
+      padding: 5px 0;
+      font-size: 20px;
+      font-weight: bold;
+      text-transform: uppercase;
+      letter-spacing: 0.1em;
+      background: #9f86ff;
+      color: white;
+      transition: all.5s ease;
+      margin-top: 20px;
+      border-radius: 5px;
       cursor: pointer;
+
+      &:hover {
+        background: #5933f0;
+      }
     }
   }
 `;
@@ -56,10 +70,8 @@ class LoginPage extends React.Component {
 
   login = e => {
     e.preventDefault();
-    this.props
-    .login(this.state.credentials);
-    setTimeout(() => this.props.history.push('/github-users'), 1000);
-    
+    this.props.login(this.state.credentials);
+    setTimeout(() => this.props.history.push("/github-users"), 1000);
   };
 
   register = e => {
@@ -70,7 +82,7 @@ class LoginPage extends React.Component {
   render() {
     return (
       <Wrapper>
-        <h1>Login To GitHub Users</h1>
+        <h1>GitHub User Breakdown</h1>
         <form>
           <input
             type="text"
@@ -100,16 +112,20 @@ class LoginPage extends React.Component {
               "Sign Up"
             )}
           </button>
+          <p>No account? Enter an email and password then click the sign up button</p>
         </form>
+
+        {this.props.registerSuccess ? alert('Successfully registered... go ahead and log in') : <div></div> }
       </Wrapper>
     );
   }
 }
 
-const mapStateToProps = ({ error, loggingIn, registering }) => ({
+const mapStateToProps = ({ error, loggingIn, registering, registerSuccess }) => ({
   error,
   loggingIn,
-  registering
+  registering,
+  registerSuccess
 });
 
 export default connect(
diff --git a/github-user-breakdown/src/components/Days.js b/github-user-breakdown/src/components/Days.js
index 19fb03d..75e64c9 100644
--- a/github-user-breakdown/src/components/Days.js
+++ b/github-user-breakdown/src/components/Days.js
@@ -7,13 +7,37 @@ const Days = props => {
 
   return (
     <div className="Hour">
-      Commits per day
-      <VictoryChart domainPadding={20}>
-        <VictoryBar data={results} />
+      <h2>Commits per day</h2>
+      <hr />
+      <VictoryChart
+        style={{
+          axis: {
+            fill: "transparent",
+            stroke: "#f8f8f8",
+            strokeWidth: 1
+          }
+        }}
+        domainPadding={10}
+        animate={{ duration: 2000 }}
+      >
+        <VictoryBar
+          style={{ data: { fill: "#9f86ff", stroke: "black", strokeWidth: 2 } }}
+          data={results}
+          animate={{
+            onExit: {
+              duration: 500,
+              before: () => ({ opacity: 0.3, _y: 0 })
+            },
+            onEnter: {
+              duration: 500,
+              before: () => ({ opacity: 0.3, _y: 0 }),
+              after: datum => ({ opacity: 1, _y: datum._y })
+            }
+          }}
+        />
       </VictoryChart>
     </div>
   );
 };
 
 export default Days;
-
diff --git a/github-user-breakdown/src/components/GithubUsers.js b/github-user-breakdown/src/components/GithubUsers.js
index 84daa77..460bda9 100644
--- a/github-user-breakdown/src/components/GithubUsers.js
+++ b/github-user-breakdown/src/components/GithubUsers.js
@@ -3,16 +3,40 @@ import { connect } from "react-redux";
 import styled from "styled-components";
 import { getUserData, deleteUser } from "../actions";
 import { Link } from "react-router-dom";
+import Loader from "react-loader-spinner";
 
 const PageWrapper = styled.div``;
 
+const Nav = styled.div`
+  background-color: #dedfe0;
+  height: 50px;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+
+  a {
+    font-size: 20px;
+    font-weight: bold;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    color: #2f323a;
+    transition: all .1s ease;
+    cursor: pointer;
+    margin-left: 40px;
+    text-decoration: none;
+
+    &:hover {
+      color: #9f86ff;
+    }
+  }
+`;
+
 const FormWrapper = styled.div`
   text-align: center;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  border: 2px solid black;
   max-width: 300px;
   margin: 20px auto;
   padding: 30px;
@@ -25,12 +49,26 @@ const FormWrapper = styled.div`
     input {
       margin: 10px 0;
       font-size: 18px;
+      border-radius: 5px;
+      border: 2px solid #9f86ff;
     }
     button {
-      margin: 10px 0;
-      border: none;
-      background-color: #9f86ff;
+      border: 0;
+      padding: 5px 0;
+      font-size: 20px;
+      font-weight: bold;
+      text-transform: uppercase;
+      letter-spacing: 0.1em;
+      background: #9f86ff;
+      color: white;
+      transition: all.5s ease;
+      margin-top: 20px;
+      border-radius: 5px;
       cursor: pointer;
+
+      &:hover {
+        background: #5933f0;
+      }
     }
   }
 `;
@@ -42,6 +80,8 @@ const UserCard = styled.div`
   justify-content: center;
   align-items: center;
   padding: 10px;
+  background-color: #f8f8f8;
+  border-radius: 20px;
   button {
     border: none;
     background-color: #5933f0;
@@ -70,9 +110,8 @@ const UserCardsContainer = styled.div`
   flex-wrap: wrap;
   a {
     width: 180px;
-    border: 2px solid black;
     border-radius: 10px;
-    margin: 10px;
+    margin: 18px;
     font-size: 18px;
     text-decoration: none;
     color: black;
@@ -80,9 +119,10 @@ const UserCardsContainer = styled.div`
     flex-direction: column;
     justify-content: center;
     align-items: center;
+    transition: all 0.3s ease;
 
     &:hover {
-      box-shadow: 0 2px 10px black;
+      box-shadow: 0px 0px 50px 10px #9f86ff;
     }
   }
 `;
@@ -109,6 +149,9 @@ class GithubUsers extends React.Component {
   render() {
     return (
       <PageWrapper>
+        <Nav>
+          <Link to="/">Logout</Link>
+        </Nav>
         <FormWrapper>
           <form onSubmit={this.handleSubmit}>
             <input
@@ -118,18 +161,28 @@ class GithubUsers extends React.Component {
               onChange={this.handleChange}
               placeholder="search for user..."
             />
-            <button> search </button>
+            <button>
+              {this.props.fetching ? (
+                <Loader
+                  type="ThreeDots"
+                  color="#1f2a38"
+                  height="12"
+                  width="26"
+                />
+              ) : (
+                "search "
+              )}
+            </button>
           </form>
         </FormWrapper>
+
         <UserCardsContainer>
           {this.props.users.map(user => (
             <Link to={`/github-users/${user.user}`} key={user.user}>
               <UserCard>
-                <button onClick={e => this.deleteUser(e, user.user)}>
-                  X
-                </button>
-                <div> {user.user} </div>
+                <button onClick={e => this.deleteUser(e, user.user)}>X</button>
                 <img src={user.avatar} alt="" />
+                <div> {user.user} </div>
                 <div>Repo Count: {user.repo_count} </div>
               </UserCard>
             </Link>
@@ -142,7 +195,8 @@ class GithubUsers extends React.Component {
 
 const mapStateToProps = state => ({
   users: state.users,
-  summary: state.userSummary
+  summary: state.userSummary,
+  fetching: state.fetching
 });
 
 export default connect(
@@ -161,5 +215,3 @@ export default connect(
 //     </Link>
 //   ))
 // )}
-
-
diff --git a/github-user-breakdown/src/components/Hours.js b/github-user-breakdown/src/components/Hours.js
index d52fe82..db80951 100644
--- a/github-user-breakdown/src/components/Hours.js
+++ b/github-user-breakdown/src/components/Hours.js
@@ -1,24 +1,47 @@
 import React from "react";
-import {
-    VictoryChart,
-    VictoryBar
-} from "victory";
+import { VictoryChart, VictoryBar } from "victory";
 
 const Hours = props => {
+  let results = [];
+  Object.entries(props.hours).map(arr =>
+    results.push({ x: arr[0], y: arr[1] })
+  );
 
-    let results = [];
-    Object.entries(props.hours).map(arr => results.push({x: arr[0], y: arr[1]}))
+  return (
+    <div className="Hour">
+      <h2>
+        Commits per hour
+      </h2>
+      <hr/>
+      <VictoryChart
+        style={{
+          axis: {
+            fill: "transparent",
+            stroke: "#f8f8f8",
+            strokeWidth: 1
+          }
+        }}
+        domainPadding={10}
+        animate={{ duration: 2000 }}
+      >
+        <VictoryBar
+          style={{ data: { fill: "#9f86ff", stroke: "black", strokeWidth: 2 } }}
+          data={results}
+          animate={{
+            onExit: {
+              duration: 500,
+              before: () => ({ opacity: 0.3, _y: 0 })
+            },
+            onEnter: {
+              duration: 500,
+              before: () => ({ opacity: 0.3, _y: 0 }),
+              after: datum => ({ opacity: 1, _y: datum._y })
+            }
+          }}
+        />
+      </VictoryChart>
+    </div>
+  );
+};
 
-    return (
-        <div className="Hour">
-            Commits per hour
-            <VictoryChart>
-                <VictoryBar
-                    data={results}
-                />
-            </VictoryChart>
-        </div>
-    );
-}
-
-export default Hours;
\ No newline at end of file
+export default Hours;
diff --git a/github-user-breakdown/src/components/User.js b/github-user-breakdown/src/components/User.js
index 6152c03..b89e0dd 100644
--- a/github-user-breakdown/src/components/User.js
+++ b/github-user-breakdown/src/components/User.js
@@ -2,41 +2,76 @@ import React, { useEffect } from "react";
 import { connect } from "react-redux";
 import { getUserSummary, getUserDetailed } from "../actions";
 import styled from "styled-components";
-import { VictoryPie, VictoryChart, VictoryBar } from "victory";
+import { VictoryPie } from "victory";
 import Hours from "./Hours";
 import Days from "./Days";
+import Loader from "react-loader-spinner";
+import { Link } from "react-router-dom";
 
-const DaysBarGraph = styled.div`
-  width: 500px;
-  height: auto;
+const Nav = styled.div`
+  background-color: #dedfe0;
+  height: 50px;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  width: 100%;
+
+  a {
+    font-size: 20px;
+    font-weight: bold;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    color: #2f323a;
+    transition: all 0.1s ease;
+    cursor: pointer;
+    margin-left: 40px;
+    text-decoration: none;
+
+    &:hover {
+      color: #9f86ff;
+    }
+  }
+`;
+
+const PageWrapper = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+`;
+
+const Stats = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  background-color: #f8f8f8;
 `;
 
 const UserWrapper = styled.div`
-  max-width: 400px;
-  margin: 20px auto;
+  width: 100%;
+  margin: 0 auto;
   display: flex;
   flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  border-bottom: 2px solid black;
+  background-color: #dedfe0;
   img {
-    max-width: 200px;
+    margin-top: 20px;
+    max-width:100px;
+    max-height:100px;
+    border-radius: 50%;
+  }
+
+  h2 {
+    font-size: 30px
+    color: black;
   }
 `;
 const Languages = styled.div`
-  border: 2px solid black;
-  max-width: 80%;
+  max-width: 50%;
   margin: 20px auto;
   padding: 50px;
+  tex-align: center;
 `;
 
-// const barData = [
-//   {weekDay: 'Mon', commits: 16},
-//   {weekDay: 'Tue', commits: 5},
-//   {weekDay: 'Wed', commits: 7},
-//   {weekDay: 'Thu', commits: 8},
-//   {weekDay: 'Fri', commits: 19},
-//   {weekDay: 'Sat', commits: 0},
-//   {weekDay: 'Sun', commits: 19},
-// ];
-
 const User = props => {
   const username = props.match.params.user;
   let user = props.users.filter(user => user.user === username)[0];
@@ -58,42 +93,57 @@ const User = props => {
   }
 
   return (
-    <>
+    <PageWrapper>
       <UserWrapper>
-        {user.user}
+        <Nav>
+          <Link to="/">Logout</Link>
+          <Link to="/github-users"> User Search </Link>
+        </Nav>
         <img src={user.avatar} alt="" />
+        <h2>{user.user}</h2>
       </UserWrapper>
 
-      {props.summary.length === 0 ? (
-        <div> Loading.. </div>
-      ) : (
-        <Languages>
-          Languages Used
-          <hr />
-          <VictoryPie
-            width={500}
-            colorScale={["#9f86ff", "#9ca4b6", "#5933f0", "purple", "navy"]}
-            data={data}
-          />
-        </Languages>
-      )}
-      {/*  */}
-      <div>
-        {props.detailed.length === 0 ? (
-          <div> Loading.. </div>
+      <Stats>
+        {props.summary.length === 0 ? (
+          <Loader type="TailSpin" color="black" height={80} width={80} />
         ) : (
-          <Hours hours={props.detailed.hour} />
+          <Languages>
+            <h2>Languages Used</h2>
+            <hr />
+            <VictoryPie
+              innerRadius={100}
+              width={500}
+              colorScale={[
+                "#9f86ff",
+                "#9ca4b6",
+                "#5933f0",
+                "purple",
+                "navy",
+                "coral",
+                "#fae"
+              ]}
+              data={data}
+            />
+          </Languages>
         )}
-      </div>
-      {/*  */}
-      <div>
-        {props.detailed.length === 0 ? (
-          <div> Loading.. </div>
-        ) : (
-          <Days days={props.detailed.day} />
-        )}
-      </div>
-    </>
+        {/*  */}
+        <Languages>
+          {props.detailed.length === 0 ? (
+            <Loader type="TailSpin" color="black" height={80} width={80} />
+          ) : (
+            <Hours hours={props.detailed.hour} />
+          )}
+        </Languages>
+        {/*  */}
+        <Languages>
+          {props.detailed.length === 0 ? (
+            <Loader type="TailSpin" color="black" height={80} width={80} />
+          ) : (
+            <Days days={props.detailed.day} />
+          )}
+        </Languages>
+      </Stats>
+    </PageWrapper>
   );
 };
 
diff --git a/github-user-breakdown/src/css/index.css b/github-user-breakdown/src/css/index.css
index cee5f34..91b387a 100644
--- a/github-user-breakdown/src/css/index.css
+++ b/github-user-breakdown/src/css/index.css
@@ -6,6 +6,7 @@ body {
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  background-color: #2f323a;
 }
 
 code {
diff --git a/github-user-breakdown/src/reducers/index.js b/github-user-breakdown/src/reducers/index.js
index 0e3fdf0..bacf322 100644
--- a/github-user-breakdown/src/reducers/index.js
+++ b/github-user-breakdown/src/reducers/index.js
@@ -23,6 +23,7 @@ export const initialState = {
   userDetailed: [],
   fetching: false,
   registering: false,
+  registerSuccess: false,
   loggingIn: false,
   token: localStorage.getItem("token"),
   error: null
@@ -41,7 +42,8 @@ const reducer = (state = initialState, action) => {
         ...state,
         error: null,
         token: action.payload,
-        registering: false
+        registering: false,
+        registerSuccess: true
       };
     case REGISTER_FAIL:
       return {
@@ -53,7 +55,8 @@ const reducer = (state = initialState, action) => {
       return {
         ...state,
         error: null,
-        loggingIn: true
+        loggingIn: true,
+        registerSuccess: false
       };
     case LOGIN_SUCCESS:
       return {