diff --git a/src/components/Dashboard/Directions.js b/src/components/Dashboard/Directions.js
new file mode 100644
index 00000000..07147031
--- /dev/null
+++ b/src/components/Dashboard/Directions.js
@@ -0,0 +1,34 @@
+import React from "react";
+import styled from "styled-components";
+
+const Directions = ({ address }) => (
+  <DirectionsContainer>
+    <Button
+      href={`https://www.google.com/maps/dir//${address}/`}
+      target="_blank"
+    >
+      {"Directions "}
+      <i className="fas fa-directions"></i>
+    </Button>
+  </DirectionsContainer>
+);
+
+export default Directions;
+
+const DirectionsContainer = styled.div`
+  display: flex;
+  flex-flow: row-reverse;
+`;
+
+const Button = styled.a`
+  color: black
+  text-decoration: none;
+  padding: 0.2rem 0.5rem;
+  background-color: gold;
+  border-radius: 5px;
+  font-weight: 500;
+
+  &&:hover {
+    background-color: yellow;
+  }
+`;
diff --git a/src/components/Dashboard/LocationDetails.js b/src/components/Dashboard/LocationDetails.js
index 15f54d65..ab60a389 100644
--- a/src/components/Dashboard/LocationDetails.js
+++ b/src/components/Dashboard/LocationDetails.js
@@ -4,6 +4,8 @@ import styled from "styled-components";
 
 import RemoveOption from "./RemoveOption";
 
+import Directions from "./Directions";
+
 const LocationDetails = props => {
   const { location, visit } = props;
   const { name, address, icon, phone } = location || visit.location;
@@ -24,15 +26,7 @@ const LocationDetails = props => {
         <LocationName>{name}</LocationName>
         <address>{address}</address>
         <PhoneNumber href={`tel:${phone}`}>{phone}</PhoneNumber>
-        <DirectionsContainer>
-          <Directions
-            href={`https://www.google.com/maps/dir//${address}/`}
-            target="_blank"
-          >
-            {"Directions "}
-            <i className="fas fa-directions"></i>
-          </Directions>
-        </DirectionsContainer>
+        <Directions address={address} />
       </DetailsContainer>
       <ImageContainer>
         {!!icon ? <Image src={icon} /> : <i className="fas fa-store-alt fa-7x" />}
@@ -62,24 +56,6 @@ const PhoneNumber = styled.a`
   text-decoration: none;
 `;
 
-const DirectionsContainer = styled.div`
-  display: flex;
-  flex-flow: row-reverse;
-`;
-
-const Directions = styled.a`
-  color: black
-  text-decoration: none;
-  padding: 0.2rem 0.5rem;
-  background-color: gold;
-  border-radius: 5px;
-  font-weight: 500;
-
-  &&:hover {
-    background-color: yellow;
-  }
-`;
-
 const ImageContainer = styled.section`
   display: flex;
   justify-content: center;
diff --git a/src/components/Dashboard/RecentlyVisited.js b/src/components/Dashboard/RecentlyVisited.js
index 183da300..3a7832ce 100644
--- a/src/components/Dashboard/RecentlyVisited.js
+++ b/src/components/Dashboard/RecentlyVisited.js
@@ -1,5 +1,6 @@
 import React from "react";
 import LocationCard from "./LocationCard";
+import styled from "styled-components";
 
 const RecentlyVisited = props => {
   const { visits } = props;
@@ -7,11 +8,25 @@ const RecentlyVisited = props => {
   return (
     <>
       <p className="sub-header">Recently Visited</p>
-      {visits.map(visit => (
-        <LocationCard key={`user-visit-${visit.id}`} visit={visit} />
-      ))}
+      {!!visits[0] ? (
+        visits.map(visit => (
+          <LocationCard key={`user-visit-${visit.id}`} visit={visit} />
+        ))
+      ) : (
+        <NoVisits className="location-listing">
+          No Visits
+        </NoVisits>
+      )}
     </>
   );
 };
 
 export default RecentlyVisited;
+
+const NoVisits = styled.p`
+  &&:hover {
+    cursor: default !important;
+    background: #f1ca0957 !important;
+    transform: none !important;
+  }
+`;
diff --git a/src/components/Dashboard/SavedLocations.js b/src/components/Dashboard/SavedLocations.js
index a72826d2..b314efc1 100644
--- a/src/components/Dashboard/SavedLocations.js
+++ b/src/components/Dashboard/SavedLocations.js
@@ -1,20 +1,35 @@
 import React from "react";
 import LocationCard from "./LocationCard";
+import styled from "styled-components";
 
 const SavedLocations = props => {
   const { savedLocations } = props;
   return (
     <>
       <p className="sub-header">Saved Locations</p>
-      {savedLocations.map(location => (
-        <LocationCard
-          key={`saved-location-${location.id}`}
-          location={location}
-          saved
-        />
-      ))}
+      {!!savedLocations ? (
+        savedLocations.map(location => (
+          <LocationCard
+            key={`saved-location-${location.id}`}
+            location={location}
+            saved
+          />
+        ))
+      ) : (
+        <NoLocations className="location-listing">
+          No Saved Locations
+        </NoLocations>
+      )}
     </>
   );
 };
 
 export default SavedLocations;
+
+const NoLocations = styled.p`
+  &&:hover {
+    cursor: default !important;
+    background: #f1ca0957 !important;
+    transform: none !important;
+  }
+`;
diff --git a/src/components/Map/SingleMapCard.jsx b/src/components/Map/SingleMapCard.jsx
index 47c19d97..dcc28574 100644
--- a/src/components/Map/SingleMapCard.jsx
+++ b/src/components/Map/SingleMapCard.jsx
@@ -1,5 +1,5 @@
 import React, { Component } from "react";
-import Popup from "reactjs-popup";
+import Modal from "styled-react-modal";
 import Review from "../Review/Review";
 import styled from "styled-components";
 import StarRatings from "react-star-ratings";
@@ -13,7 +13,9 @@ class SingleMapCard extends Component {
     this.state = {
       details: [],
       hours: [],
-      id: null
+      id: null,
+      isOpen: false,
+      opacity: 0
     };
   }
 
@@ -30,6 +32,7 @@ class SingleMapCard extends Component {
     service.getDetails(request, (place, status) => {
       if (status === google.maps.places.PlacesServiceStatus.OK) {
         this.setState({
+          ...this.state,
           details: [place.name, place.formatted_phone_number],
           hours: !place.opening_hours
             ? ["N/A"]
@@ -55,6 +58,23 @@ class SingleMapCard extends Component {
     this.props.map.setZoom(16);
   };
 
+  toggleModal = e => {
+    this.setState({ ...this.state, isOpen: !this.state.isOpen });
+  };
+
+  afterOpen = () => {
+    setTimeout(() => {
+      this.setState({ ...this.state, opacity: 1 });
+    }, 20);
+  };
+
+  beforeClose = () => {
+    return new Promise(resolve => {
+      this.setState({ ...this.state, opacity: 0 });
+      setTimeout(resolve, 200);
+    });
+  };
+
   render() {
     const location = this.props.location;
 
@@ -68,7 +88,6 @@ class SingleMapCard extends Component {
             <img src={location.icon} alt="Icon of the location" />
             <DetailContainer>
               <h2>{`${location.name}`}</h2>
-              {/* Placeholder rating */}
               <h4>
                 {`rating: ${location.rating} `}
                 <StarRatings
@@ -81,19 +100,25 @@ class SingleMapCard extends Component {
                 />
               </h4>
               <p>{`${location.address}`}</p>
-              <Popup modal trigger={<DetailButton>Details</DetailButton>}>
-                {close => (
-                  <Review
-                    close={close}
-                    onClick={this.requestDetails(location.id)}
-                    details={this.state.details}
-                    hours={this.state.hours}
-                    address={this.props.address}
-                    locationId={this.state.id}
-                    icon={location.icon}
-                  />
-                )}
-              </Popup>
+              <DetailButton onClick={this.toggleModal}>Details</DetailButton>
+              <StyledModal
+                isOpen={this.state.isOpen}
+                afterOpen={this.afterOpen}
+                beforeClose={this.beforeClose}
+                onBackgroundClick={this.toggleModal}
+                onEscapeKeydown={this.toggleModal}
+                opacity={this.opacity}
+                backgroundProps={{ opacity: this.state.opacity }}
+              >
+                <Review
+                  onClick={this.requestDetails(location.id)}
+                  details={this.state.details}
+                  hours={this.state.hours}
+                  location={this.props.location}
+                  locationId={this.state.id}
+                  icon={location.icon}
+                />
+              </StyledModal>
             </DetailContainer>
           </SingleMapCardContainer>
         ) : null}
@@ -163,3 +188,14 @@ const DetailButton = styled.button`
     transition: 0.2s;
   }
 `;
+
+const StyledModal = Modal.styled`
+  max-width: 40rem;
+  opacity: ${props => props.opacity};
+  transition: opacity ease 1000ms;
+  border-radius: 30px;
+  
+  @media (min-width: 700px) {
+    width: 40rem;
+  }
+`;
diff --git a/src/components/Redux/actions/index.js b/src/components/Redux/actions/index.js
index fb7d7acc..7bc3e676 100644
--- a/src/components/Redux/actions/index.js
+++ b/src/components/Redux/actions/index.js
@@ -57,7 +57,7 @@ export const checkToken = () => dispatch => {
   axiosWithAuth()
     .get("/auth/info")
     .then(res => {
-      if (res.status < 200)
+      if (res.status === 200)
         dispatch({ type: LOGIN_SUCCESS, payload: res.data });
       else {
       }
diff --git a/src/components/Review/CheckIn.js b/src/components/Review/CheckIn.js
new file mode 100644
index 00000000..eaa05aa6
--- /dev/null
+++ b/src/components/Review/CheckIn.js
@@ -0,0 +1,7 @@
+import React from "react";
+
+const CheckIn = props => {
+  return <span>Check in</span>;
+};
+
+export default CheckIn;
diff --git a/src/components/Review/FavoriteLocation.js b/src/components/Review/FavoriteLocation.js
new file mode 100644
index 00000000..8ffe4d7b
--- /dev/null
+++ b/src/components/Review/FavoriteLocation.js
@@ -0,0 +1,7 @@
+import React from "react";
+
+const FavoriteLocation = props => {
+  return <span>Favorite Location</span>;
+};
+
+export default FavoriteLocation;
diff --git a/src/components/Review/NonAuthAllReviews.js b/src/components/Review/NonAuthAllReviews.js
index 862b0692..acbcc72b 100644
--- a/src/components/Review/NonAuthAllReviews.js
+++ b/src/components/Review/NonAuthAllReviews.js
@@ -1,8 +1,7 @@
 // IMPORTS
 import React from "react";
 import styled from "styled-components";
-import axios from "axios";
-// import { withFirebase } from "../../Firebase";
+import axiosWithAuth from "../../Helpers/axiosWithAuth";
 
 // STYLED COMPONENTS
 const StyleModal = styled.div`
@@ -88,22 +87,11 @@ display: flex;
 class AllReviewsPanel1 extends React.Component {
   state = {
     reviews: []
-    // uid: this.props.firebase.auth.currentUser.uid,
-    // u_id: null,
-    // loc_id: null
   };
 
   componentDidMount() {
-    let locationReq = this.props.locationId;
-    console.log("location id", locationReq);
-    return axios
-      .get(`https://wheretocode-master.herokuapp.com/locations/${locationReq}`)
-      .then(res => {
-        let locationId = res.data[0].id;
-        return axios.get(
-          `https://wheretocode-master.herokuapp.com/reviews/${locationId}/location`
-        );
-      })
+    return axiosWithAuth()
+      .get(`/reviews/${this.props.locationId}/location`)
       .then(res => {
         if (res) {
           this.setState({
@@ -131,12 +119,11 @@ class AllReviewsPanel1 extends React.Component {
           </StyleModal>
         ) : (
           <StyleModal>
-            <Header> Reviews </Header>
             <Content>
-              <ol className='ratingInfo'>
+              <ol className="ratingInfo">
                 {this.state.reviews[0].map((review, i) => (
                   <li key={review.ratingId}>
-                    <a href='#'>
+                    <a href="#">
                       Username:{review.userName} -- Overall Rating:{" "}
                       {review.rating} -- Internet Rating:{" "}
                       {review.internet_rating} -- Comments:{review.comments}{" "}
diff --git a/src/components/Review/NonAuthDetailsPanel.js b/src/components/Review/NonAuthDetailsPanel.js
index 8b9b0df2..87952b5c 100644
--- a/src/components/Review/NonAuthDetailsPanel.js
+++ b/src/components/Review/NonAuthDetailsPanel.js
@@ -1,10 +1,13 @@
 // IMPORTS
 import React from "react";
-import axios from "axios";
 import styled from "styled-components";
-// import { withFirebase } from "../../Firebase";
 import axiosWithAuth from "../../Helpers/axiosWithAuth";
 import StarRatings from "react-star-ratings";
+import Popup from "reactjs-popup";
+
+import CheckIn from "./CheckIn.js";
+import FavoriteLocation from "./FavoriteLocation.js";
+import Directions from "../Dashboard/Directions";
 
 // STYLED COMPONENTS
 const StyleModal = styled.div`
@@ -14,14 +17,6 @@ const StyleModal = styled.div`
   padding: 10px 10px 10px 10px;
   font-size: 12px;
 `;
-const Header = styled.div`
-  text-align: center;
-  font-size: 20px;
-  font-weight: bold;
-  color: #fbd702;
-  width: 100%;
-  margin-bottom: 15px;
-`;
 const StyledFeaturedReview = styled.div`
   text-align: center;
   font-size: 18px;
@@ -63,8 +58,7 @@ const ContentRight = styled.div`
   .name {
     padding-top: px;
   }
-  background-color: #111;
-  opacity: 0.45;
+  background-color: #959595;
 `;
 const ContentLeft = styled.div`
   display: flex;
@@ -94,75 +88,40 @@ const StyledFeatureReview = styled.div`
   display: flex;
   flex-direction: column;
 `;
+const Menu = styled.div`
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  color: black;
+`;
+const ExtrasContainer = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  width: 100%;
+  color: white;
+`;
 
 // COMPONENT
-class DetailsPanel1 extends React.Component {
+class DetailsPanel extends React.Component {
   // STATE
   state = {
-    review: [],
-    location_id: [],
-    location: this.props.locationId
+    review: []
   };
 
   componentDidUpdate(prevProps, nextState) {
     if (this.props.locationId !== prevProps.locationId) {
-      let locationReq = this.props.locationId;
-      return axiosWithAuth()
-        .get(
-          `https://wheretocode-master.herokuapp.com/locations/${locationReq}`
-        )
-        .then(res => {
-          if (res.data.length === 0) {
-            let newLocation = [
-              {
-                locationName: this.props.details[0],
-                locationGoogleId: this.props.locationId
-              }
-            ];
-            return axios.post(
-              "https://wheretocode-master.herokuapp.com/locations",
-              newLocation
-            );
-          } else {
-            console.log("location does not need to be posted");
-          }
-        })
-        .then(res => {
-          let locationReq = this.props.locationId;
-          return axios.get(
-            `https://wheretocode-master.herokuapp.com/locations/${locationReq}`
-          );
-        })
-        .then(res => {
-          let locationId = res.data[0].id;
-          return axios.get(
-            `https://wheretocode-master.herokuapp.com/reviews/${locationId}/location`
-          );
-        })
-        .then(res => {
-          let newReview1 = res.data.slice(-1);
-          let newReview = newReview1[0];
-          this.setState({
-            review: newReview
-          });
-        })
-        .catch(error => {
-          console.log(error);
-        });
+      return this.grabReviews();
     }
   }
 
   // METHODS
   componentDidMount() {
-    let locationReq = this.props.locationId;
-    return axios
-      .get(`https://wheretocode-master.herokuapp.com/locations/${locationReq}`)
-      .then(res => {
-        let locationId = res.data[0].id;
-        return axios.get(
-          `https://wheretocode-master.herokuapp.com/reviews/${locationId}/location`
-        );
-      })
+    return this.grabReviews();
+  }
+
+  grabReviews() {
+    return axiosWithAuth()
+      .get(`/reviews/${this.props.locationId}/location`)
       .then(res => {
         let newReview1 = res.data.slice(-1);
         let newReview = newReview1[0];
@@ -178,7 +137,6 @@ class DetailsPanel1 extends React.Component {
   render() {
     return (
       <StyleModal>
-        <Header> Details </Header>
         <Content>
           <ContentLeft>
             <p>
@@ -197,11 +155,11 @@ class DetailsPanel1 extends React.Component {
                         Overall Rating:
                         <StarRatings
                           rating={this.state.review.rating}
-                          starRatedColor='gold'
+                          starRatedColor="gold"
                           numberOfStars={3}
-                          name='rating'
-                          starDimension='15px'
-                          starSpacing='0px'
+                          name="rating"
+                          starDimension="15px"
+                          starSpacing="0px"
                         />
                       </p>
                     </li>
@@ -210,11 +168,11 @@ class DetailsPanel1 extends React.Component {
                         Internet Rating:
                         <StarRatings
                           rating={this.state.review.internet_rating}
-                          starRatedColor='gold'
+                          starRatedColor="gold"
                           numberOfStars={3}
-                          name='rating'
-                          starDimension='15px'
-                          starSpacing='0px'
+                          name="rating"
+                          starDimension="15px"
+                          starSpacing="0px"
                         />
                       </p>
                     </li>
@@ -231,11 +189,22 @@ class DetailsPanel1 extends React.Component {
             </StyledFeatureReview>
           </ContentLeft>
           <ContentRight>
-            <h2 className='name'>Name:</h2>
+            <ExtrasContainer>
+              <Popup
+                trigger={<i className="fas fa-ellipsis-h fa-2x"></i>}
+                position="bottom right"
+              >
+                <Menu>
+                  <CheckIn locationId={this.props.locationId} />
+                  <FavoriteLocation locationId={this.props.locationId} />
+                </Menu>
+              </Popup>
+            </ExtrasContainer>
+            <h2 className="name">Name:</h2>
             <p style={{ fontSize: "20px" }}>{this.props.details[0]}</p>
             <h2>Phone:</h2>
             <p style={{ fontSize: "20px" }}>{this.props.details[1]}</p>
-            <h2 className='hours'>Hours:</h2>
+            <h2 className="hours">Hours:</h2>
             <ul>
               <p>
                 {this.props.hours.map((data, index) => {
@@ -247,13 +216,12 @@ class DetailsPanel1 extends React.Component {
                 })}
               </p>
             </ul>
+            <Directions address={this.props.location.address} />
           </ContentRight>
         </Content>
-        {/* // -- // */}
       </StyleModal>
     );
   }
 }
 // EXPORT
-const NonAuthDetailsPanel = DetailsPanel1;
-export default NonAuthDetailsPanel;
+export default DetailsPanel;
diff --git a/src/components/Review/Review.js b/src/components/Review/Review.js
index 06103aa9..953deb7e 100644
--- a/src/components/Review/Review.js
+++ b/src/components/Review/Review.js
@@ -10,34 +10,8 @@ const StyleModal = styled.div`
   font-size: 12px;
 `;
 
-const Close = styled.div`
-  cursor: pointer;
-  position: absolute;
-  display: block;
-  padding: 2px 5px;
-  line-height: 20px;
-  right: -10px;
-  top: -10px;
-  font-size: 24px;
-  background: #ffffff;
-  border-radius: 18px;
-  border: 1px solid #cfcece;
-`;
-
 export default props => (
   <StyleModal>
-    <Close>
-      <a Close onClick={props.close}>
-        &times;
-      </a>
-    </Close>
-    <Tabs
-      address={props.address}
-      close={props.close}
-      details={props.details}
-      hours={props.hours}
-      locationId={props.locationId}
-      icon={props.icon}
-    />
+    <Tabs {...props} />
   </StyleModal>
 );
diff --git a/src/components/Review/ReviewPanel.js b/src/components/Review/ReviewPanel.js
index 3edeaaf0..2f22410c 100644
--- a/src/components/Review/ReviewPanel.js
+++ b/src/components/Review/ReviewPanel.js
@@ -1,9 +1,8 @@
 // IMPORTS
 import React, { Component } from "react";
 import styled from "styled-components";
-import axios from "axios";
-//import { distanceTo } from "geolocation-utils";
 import axiosWithAuth from "../../Helpers/axiosWithAuth";
+import { connect } from "react-redux";
 
 // COMPONENTS
 import NetworkModal from "../NetworkSpeed/networkModal";
@@ -12,7 +11,6 @@ import NetworkSpeed from "../NetworkSpeed/NetworkSpeed";
 import TextArea from "../Review/TextArea";
 import Select from "../Review/Select";
 import Button from "../Review/Button";
-// import { withFirebase } from "../../Firebase";
 
 /* global google */
 
@@ -56,7 +54,6 @@ const StyledForm = styled.form`
     margin: "10px 10px 10px 10px";
   }
 `;
-
 const NetworkTextStyle = styled.p`
   font-size: 20px;
   color: white;
@@ -64,21 +61,20 @@ const NetworkTextStyle = styled.p`
   letter-spacing: 3px;
 `;
 
-class ReviewPanel1 extends Component {
+class ReviewPanel extends Component {
   constructor(props) {
     super(props);
     // STATE
     this.state = {
-      newUser: {
-        user_id: null,
+      newReview: {
+        user_id: this.props.userID,
         rating: " ",
         internet_rating: " ",
         comments: "",
-        location_id: null
+        location_id: this.props.locationId
       },
       rating: ["1", "2", "3"],
       internet_rating: ["1", "2", "3"],
-      //uid: this.props.firebase.auth.currentUser.uid,
       submitted: false,
       network: false,
       distanceFromLocation: 100
@@ -89,96 +85,6 @@ class ReviewPanel1 extends Component {
     this.handleClearForm = this.handleClearForm.bind(this);
     this.handleInput = this.handleInput.bind(this);
   }
-  // COMPONENT
-  componentDidMount() {
-    console.log(this.props);
-    //Distance between user and review location, used for conditional render of button
-    const geocoder = new google.maps.Geocoder();
-
-    //Default to Sydney, Australia to match map default
-    let userCoords = [-33.856, 151.215];
-
-    //Check if user allowed location sharing
-    // if (navigator.geolocation) {
-    //   navigator.geolocation.getCurrentPosition(position => {
-    //     userCoords = [position.coords.latitude, position.coords.longitude];
-
-    //     geocoder.__proto__.geocode(
-    //       { address: this.props.address },
-    //       (res, err) => {
-    //         const locationCoords = [
-    //           res[0].geometry.location.lat(),
-    //           res[0].geometry.location.lng()
-    //         ];
-
-    //         this.setState(prevState => {
-    //           return {
-    //             ...prevState,
-    //             distanceFromLocation: distanceTo(userCoords, locationCoords)
-    //           };
-    //         });
-    //       }
-    //     );
-    //   });
-    // }
-
-    return axiosWithAuth()
-      .get(`https://wheretocode-master.herokuapp.com/users/${this.state.uid}`)
-      .then(user => {
-        let currentUserId = {
-          user_id: user.data[0].id,
-          rating: null,
-          internet_rating: null,
-          comments: ""
-        };
-        this.setState({
-          newUser: currentUserId
-        });
-      })
-      .then(res => {
-        let locationReq = this.props.locationId;
-        return axios.get(
-          `https://wheretocode-master.herokuapp.com/locations/${locationReq}`
-        );
-      })
-      .then(res => {
-        if (!res) {
-          let newLocation = [
-            {
-              locationName: this.props.details[0],
-              locationGoogleId: this.props.locationId
-            }
-          ];
-          return axios.post(
-            "https://wheretocode-master.herokuapp.com/locations",
-            newLocation
-          );
-        } else {
-          console.log("location does not need to be posted");
-        }
-      })
-      .then(res => {
-        let locationReq = this.props.locationId;
-        return axios.get(
-          `https://wheretocode-master.herokuapp.com/locations/${locationReq}`
-        );
-      })
-      .then(user => {
-        let currentUser = {
-          user_id: this.state.newUser.user_id,
-          rating: "",
-          internet_rating: "",
-          comments: "",
-          location_id: user.data[0].id
-        };
-        this.setState({
-          newUser: currentUser
-        });
-      })
-      .catch(err => {
-        console.log(err);
-      });
-  }
 
   // METHODS
   handleInput(e) {
@@ -186,8 +92,8 @@ class ReviewPanel1 extends Component {
     let name = e.target.name;
 
     this.setState(prevState => ({
-      newUser: {
-        ...prevState.newUser,
+      newReview: {
+        ...prevState.newReview,
         [name]: value
       }
     }));
@@ -196,8 +102,8 @@ class ReviewPanel1 extends Component {
   handleTextArea(e) {
     let value = e.target.value;
     this.setState(prevState => ({
-      newUser: {
-        ...prevState.newUser,
+      newReview: {
+        ...prevState.newReview,
         comments: value
       }
     }));
@@ -205,10 +111,9 @@ class ReviewPanel1 extends Component {
 
   handleFormSubmit(e) {
     e.preventDefault();
-    let userData = this.state.newUser;
+    let userData = this.state.newReview;
     axiosWithAuth()
-      .post("https://wheretocode-master.herokuapp.com/reviews", userData)
-      // .post(`http://localhost:8080/reviews`, userData)
+      .post("/reviews", userData)
       .then(res => {
         this.setState({ submitted: true });
       })
@@ -220,7 +125,7 @@ class ReviewPanel1 extends Component {
   handleClearForm(e) {
     e.preventDefault();
     this.setState({
-      newUser: {
+      newReview: {
         user_id: "",
         rating: " ",
         comments: "",
@@ -253,7 +158,7 @@ class ReviewPanel1 extends Component {
                   title={"Location Rating"}
                   name={"rating"}
                   options={this.state.rating}
-                  value={this.state.newUser.rating}
+                  value={this.state.newReview.rating}
                   placeholder={"Select Rating"}
                   handleChange={this.handleInput}
                 />
@@ -262,7 +167,7 @@ class ReviewPanel1 extends Component {
                   title={"Internet Rating"}
                   name={"internet_rating"}
                   options={this.state.internet_rating}
-                  value={this.state.newUser.internet_rating}
+                  value={this.state.newReview.internet_rating}
                   placeholder={"Select Internet Rating"}
                   handleChange={this.handleInput}
                 />
@@ -271,13 +176,13 @@ class ReviewPanel1 extends Component {
                   title={"Comments"}
                   rows={10}
                   cols={50}
-                  value={this.state.newUser.comments}
+                  value={this.state.newReview.comments}
                   name={"comment"}
                   handleChange={this.handleTextArea}
                   placeholder={"Leave a comment"}
                 />
                 {/*Submit */}
-                <div className='buttonContainer'>
+                <div className="buttonContainer">
                   <Button
                     action={this.handleFormSubmit}
                     type={"primary"}
@@ -297,13 +202,15 @@ class ReviewPanel1 extends Component {
               {this.state.network ? <NetworkSpeed /> : null}
             </div>
 
-            {// Only render network test option if user is within 100ft (30.48m) of location
-            this.state.distanceFromLocation <= 30.48 ? (
-              <NetworkModal
-                handleNetwork={this.toggleNetworkTest}
-                runTest={this.state.network}
-              />
-            ) : null}
+            {
+              // Only render network test option if user is within 100ft (30.48m) of location
+              this.state.distanceFromLocation <= 30.48 ? (
+                <NetworkModal
+                  handleNetwork={this.toggleNetworkTest}
+                  runTest={this.state.network}
+                />
+              ) : null
+            }
 
             <NetworkTextStyle>
               {this.state.distanceFromLocation > 30.48
@@ -321,5 +228,7 @@ class ReviewPanel1 extends Component {
   }
 }
 
-const ReviewPanel = ReviewPanel1;
-export { ReviewPanel };
+export default connect(
+  ({ userReducer }) => { console.log("userReducer", userReducer); return ({ userId: userReducer.userID })},
+  null
+)(ReviewPanel);
diff --git a/src/components/Review/Tabs.js b/src/components/Review/Tabs.js
index d8154190..617951a1 100644
--- a/src/components/Review/Tabs.js
+++ b/src/components/Review/Tabs.js
@@ -1,14 +1,14 @@
 // IMPORTS
-import React from "react";
+import React, { useState } from "react";
 import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
 import styled from "styled-components";
+import { connect } from "react-redux";
+import './Tabs.scss';
 
 // COMPONENTS
-
-import NonAuthDetailsPanel from './NonAuthDetailsPanel';
+import NonAuthDetailsPanel from "./NonAuthDetailsPanel";
 import { NonAuthAllReviewsPanel } from "./NonAuthAllReviews";
-import { ReviewPanel } from "./ReviewPanel";
-import { AuthUserContext } from "../Session/index";
+import ReviewPanel from "./ReviewPanel";
 
 // STYLED COMPONENTS
 const StyledTabs = styled(Tabs)`
@@ -51,9 +51,13 @@ const Header = styled.div`
 `;
 // COMPONENT & EXPORT
 
-export default props => {
+const TabsComponent = props => {
+  const [tabIndex, setTabIndex] = useState(0);
   return (
-    <StyledTabs>
+    <StyledTabs
+      selectedIndex={tabIndex}
+      onSelect={tabIndex => setTabIndex(tabIndex)}
+    >
       <StyledTabList>
         <StyledTab>
           <p>Details</p>
@@ -68,34 +72,28 @@ export default props => {
 
       <TabPanel>
         <NonAuthDetailsPanel
-          details={props.details}
-          hours={props.hours}
-          locationId={props.locationId}
-          icon={props.icon}
+        {...props}
         />
-
       </TabPanel>
       <TabPanel>
-
         <NonAuthAllReviewsPanel locationId={props.locationId} />
-
       </TabPanel>
       <TabPanel>
-        <AuthUserContext.Consumer>
-          {authUser =>
-            authUser ? (
-              <ReviewPanel
-                details={props.details}
-                address={props.address}
-                locationId={props.locationId}
-              />
-            ) : (
-                <Header>You Must Be Registered To Leave A Review</Header>
-
-              )
-          }
-        </AuthUserContext.Consumer>
+        {props.authUser ? (
+          <ReviewPanel
+            details={props.details}
+            address={props.address}
+            locationId={props.locationId}
+          />
+        ) : (
+          <Header>You Must Be Registered To Leave A Review</Header>
+        )}
       </TabPanel>
     </StyledTabs>
   );
 };
+
+export default connect(
+  ({ userReducer }) => ({ authUser: userReducer.loggedIn }),
+  null
+)(TabsComponent);
diff --git a/src/components/Review/Tabs.scss b/src/components/Review/Tabs.scss
new file mode 100644
index 00000000..1ca4d7d0
--- /dev/null
+++ b/src/components/Review/Tabs.scss
@@ -0,0 +1,3 @@
+.react-tabs__tab--selected {
+  color: gold;
+}
\ No newline at end of file
diff --git a/src/components/Session/context.js b/src/components/Session/context.js
deleted file mode 100644
index bfa7f08c..00000000
--- a/src/components/Session/context.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import React from 'react';
-
-const AuthUserContext = React.createContext(null);
-
-export default AuthUserContext;
\ No newline at end of file
diff --git a/src/components/Session/index.js b/src/components/Session/index.js
deleted file mode 100644
index df47ea19..00000000
--- a/src/components/Session/index.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import AuthUserContext from './context';
-import withAuthentication from './withAuthentication';
-import withAuthorization from './withAuthorization';
-
-export { AuthUserContext, withAuthentication, withAuthorization };
\ No newline at end of file
diff --git a/src/components/Session/withAuthentication.js b/src/components/Session/withAuthentication.js
deleted file mode 100644
index 152e962f..00000000
--- a/src/components/Session/withAuthentication.js
+++ /dev/null
@@ -1,42 +0,0 @@
-// import React from 'react';
-
-// import AuthUserContext from './context';
-// import { withFirebase } from '../../Firebase/index';
-
-// const withAuthentication = Component => {
-//     class WithAuthentication extends React.Component {
-//         constructor(props) {
-//             super(props);
-
-//             this.state = {
-//                 authUser: null,
-//             };
-//         }
-
-//         componentDidMount() {
-//             this.listener = this.props.firebase.auth.onAuthStateChanged(
-//                 authUser => {
-//                     authUser
-//                         ? this.setState({ authUser })
-//                         : this.setState({ authUser: null });
-//                 },
-//             );
-//         }
-
-//         componentWillUnmount() {
-//             this.listener();
-//         }
-
-//         render() {
-//             return (
-//                 <AuthUserContext.Provider value={this.state.authUser}>
-//                     <Component {...this.props} />
-//                 </AuthUserContext.Provider>
-//             );
-//         }
-//     }
-
-//     return withFirebase(WithAuthentication);
-// };
-
-// export default withAuthentication;
\ No newline at end of file
diff --git a/src/components/Session/withAuthorization.js b/src/components/Session/withAuthorization.js
deleted file mode 100644
index 79e540c2..00000000
--- a/src/components/Session/withAuthorization.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import React from "react";
-import { withRouter } from "react-router-dom";
-import { compose } from "recompose";
-
-import AuthUserContext from "./context";
-// import { withFirebase } from "../../Firebase";
-import * as ROUTES from "../../Routes/routes";
-
-const withAuthorization = condition => Component => {
-  class WithAuthorization extends React.Component {
-    componentDidMount() {
-      this.listener = this.props.firebase.auth.onAuthStateChanged(authUser => {
-        if (!condition(authUser)) {
-          this.props.history.push(ROUTES.HOME);
-        }
-      });
-    }
-
-    componentWillUnmount() {
-      this.listener();
-    }
-
-    render() {
-      return (
-        <AuthUserContext.Consumer>
-          {authUser =>
-            condition(authUser) ? <Component {...this.props} /> : null
-          }
-        </AuthUserContext.Consumer>
-      );
-    }
-  }
-
-  return compose(
-    withRouter
-    // withFirebase
-  )(WithAuthorization);
-};
-
-export default withAuthorization;