diff --git a/client/src/components/Reviews/RatingsBreakdown/Breakdown.jsx b/client/src/components/Reviews/RatingsBreakdown/Breakdown.jsx
index e3c875d..9f9b383 100644
--- a/client/src/components/Reviews/RatingsBreakdown/Breakdown.jsx
+++ b/client/src/components/Reviews/RatingsBreakdown/Breakdown.jsx
@@ -6,7 +6,7 @@ class Breakdown extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      breakdowns: props.breakdowns
+      breakdowns: this.props.breakdowns
     };
   }
 
diff --git a/client/src/components/Reviews/RatingsBreakdown/RatingsBreakdown.jsx b/client/src/components/Reviews/RatingsBreakdown/RatingsBreakdown.jsx
index 166ab0c..71fa943 100644
--- a/client/src/components/Reviews/RatingsBreakdown/RatingsBreakdown.jsx
+++ b/client/src/components/Reviews/RatingsBreakdown/RatingsBreakdown.jsx
@@ -56,24 +56,27 @@ class RatingBreakdown extends React.Component {
   }
 
   getAvg(data) {
-    var ratings = data.data.ratings;
-    var count = 0;
-    var total = 0;
-    var patsyAvg = Math.round(total / count * 10) / 10;
-    var countTrue = parseInt(data.data.recommended.true);
-    var countFalse = parseInt(data.data.recommended.false);
-    var breakdownArray = [];
-
-    for (var key in ratings) {
+    let ratings = data.data.ratings;
+    let count = 0;
+    let total = 0;
+
+    let countTrue = parseInt(data.data.recommended.true);
+    let countFalse = parseInt(data.data.recommended.false);
+    let breakdownArray = [];
+
+    for (let key in ratings) {
+      console.log('ratings[key]', count);
       count += parseInt(ratings[key]);
       total += (parseInt(key) * ratings[key]);
     }
+    let patsyAvg = Math.round(total / count * 10) / 10;
 
-    for (var i = 1; i < 6; i++) {
+    for (let i = 1; i < 6; i++) {
       if (i in ratings) {
         breakdownArray.push([i, ratings[i], Math.round(parseInt(ratings[i]) / count * 100)]);
       } else {
         breakdownArray.push([i, '0', 0]);
+
       }
     }
     if (!Number.isNaN(patsyAvg)) {
@@ -93,10 +96,11 @@ class RatingBreakdown extends React.Component {
 
   componentDidMount() {
     this.getMetaReviews(this.props.id, this.getAvg);
+
   }
 
   render() {
-    console.log(this)
+    console.log(this.props)
     return (
       <RatingBreakdown_div>
         <AvgContainer>
diff --git a/client/src/components/Reviews/ReviewList/AddReview.jsx b/client/src/components/Reviews/ReviewList/AddReview.jsx
index fd24b38..2b89e28 100644
--- a/client/src/components/Reviews/ReviewList/AddReview.jsx
+++ b/client/src/components/Reviews/ReviewList/AddReview.jsx
@@ -1,4 +1,17 @@
 import React from 'react';
+import styled from 'styled-components';
+
+const Button = styled.button`
+  background: #edf5e1;
+  border-radius: 4px;
+  border: 2px solid #05386b;
+  color: #05386b;
+  &:hover {
+    cursor: pointer;
+  }
+  margin: 0 1em;
+  padding: 0.25em 1em;
+`
 
 
 class AddReview extends React.Component {
@@ -11,12 +24,7 @@ class AddReview extends React.Component {
     this.handleChange = this.handleChange.bind(this);
   }
 
-  // handleChange(event) {
-  //   event.preventDefault();
-  //   this.setState({
-  //     [event.target.name]: event.target.value,
-  //   });
-  // }
+
   handleChange(e) {
     const { name } = e.target;
     const { value } = e.target;
@@ -136,9 +144,9 @@ class AddReview extends React.Component {
           />
 
           <br />
-          <input
+          <Button
             type="submit"
-          />
+          > Submit </Button>
         </form>
 
       </div>
diff --git a/client/src/components/Reviews/ReviewList/AddReviewModal.jsx b/client/src/components/Reviews/ReviewList/AddReviewModal.jsx
index 1253346..11a7944 100644
--- a/client/src/components/Reviews/ReviewList/AddReviewModal.jsx
+++ b/client/src/components/Reviews/ReviewList/AddReviewModal.jsx
@@ -4,10 +4,13 @@ import AddReview from './AddReview.jsx';
 import styled from 'styled-components';
 
 const Button = styled.button`
-  background: transparent;
-  border-radius: 3px;
-  border: 2px solid palevioletred;
-  color: tomato;
+  background: #edf5e1;
+  border-radius: 4px;
+  border: 2px solid #05386b;
+  color: #05386b;
+  &:hover {
+    cursor: pointer;
+  }
   margin: 0 1em;
   padding: 0.25em 1em;
 `
diff --git a/client/src/components/Reviews/ReviewList/Photo.jsx b/client/src/components/Reviews/ReviewList/Photo.jsx
index 725e525..5d69faf 100644
--- a/client/src/components/Reviews/ReviewList/Photo.jsx
+++ b/client/src/components/Reviews/ReviewList/Photo.jsx
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import ModalImage, { Lightbox } from 'react-modal-image';
+import ModalImage , { Lightbox } from 'react-modal-image';
 import styled from 'styled-components';
 // import {Lightbox} from 'react-image-lightbox';
 // import 'react-image-lightbox/style.css';
@@ -12,13 +12,13 @@ background-color: transparent;
 }
 `;
 
-export default class Photo extends Component {
+export default class Photo extends React.Component {
   constructor(props) {
     super(props);
 
     this.state = {
-      photoIndex: 0,
-      isOpen: false,
+      // photoIndex: 0,
+      // isOpen: false,
     };
   }
 
diff --git a/client/src/components/Reviews/ReviewList/ReviewList.jsx b/client/src/components/Reviews/ReviewList/ReviewList.jsx
index 4ec1557..3f4bccb 100644
--- a/client/src/components/Reviews/ReviewList/ReviewList.jsx
+++ b/client/src/components/Reviews/ReviewList/ReviewList.jsx
@@ -5,10 +5,13 @@ import styled from 'styled-components'
 import axios from 'axios';
 
 const Button = styled.button`
-  background: transparent;
-  border-radius: 3px;
-  border: 2px solid palevioletred;
-  color: palevioletred;
+  background: #edf5e1;
+  border-radius: 4px;
+  border: 2px solid #05386b;
+  color: #05386b;
+  &:hover {
+    cursor: pointer;
+  }
   margin: 0 1em;
   padding: 0.25em 1em;
 `
diff --git a/client/src/components/Reviews/ReviewList/ReviewListItem.jsx b/client/src/components/Reviews/ReviewList/ReviewListItem.jsx
index 46c06eb..72c60e4 100644
--- a/client/src/components/Reviews/ReviewList/ReviewListItem.jsx
+++ b/client/src/components/Reviews/ReviewList/ReviewListItem.jsx
@@ -127,7 +127,7 @@ const ReviewListItem = (props) => {
   var dateStr = date;
     var formattedDate = moment(dateStr).format('MMM DD, YYYY');
     if (recommend) {
-      var recommend = <Recommend_div> <span style={{color: 'green'}}>&#10003;</span>   I recommended this product</Recommend_div>;
+      var recommend = <Recommend_div> <span style={{color: 'blue'}}>&#10003;</span>   I recommended this product</Recommend_div>;
     }
     return (
       <ReviewListItem_Container>
@@ -155,9 +155,7 @@ const ReviewListItem = (props) => {
             />
           )}
         </Photo_div>
-
         {recommend}
-
         <Response_Container>
           <ResponseText_Container>
             <div>
diff --git a/client/src/components/Reviews/ReviewList/ReviewSortBy.jsx b/client/src/components/Reviews/ReviewList/ReviewSortBy.jsx
index cb0475c..55ca09b 100644
--- a/client/src/components/Reviews/ReviewList/ReviewSortBy.jsx
+++ b/client/src/components/Reviews/ReviewList/ReviewSortBy.jsx
@@ -1,14 +1,6 @@
 import React from 'react';
 
-class ReviewSortBy extends React.Component {
-  constructor(props) {
-    super();
-    this.state = {
-
-    }
-
-  }
-  render() {
+const ReviewSortBy = () => {
     return (
       <div>
         <h1>Sort By...</h1>
@@ -16,7 +8,7 @@ class ReviewSortBy extends React.Component {
       </div>
 
     );
-  }
 }
 
+
 export default ReviewSortBy;
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 72ccacc..32fff6a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7549,10 +7549,17 @@
         "type-check": "~0.4.0"
       }
     },
+<<<<<<< HEAD
+    "lightbox": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/lightbox/-/lightbox-0.5.0.tgz",
+      "integrity": "sha1-zM1f+rVHz/jv0kHy3ZzErN8YC5M="
+=======
     "lines-and-columns": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.1.6.tgz",
       "integrity": "sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA="
+>>>>>>> origin
     },
     "loader-runner": {
       "version": "4.2.0",
diff --git a/package.json b/package.json
index 32505de..f683a71 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
     "axios": "^0.21.1",
     "express": "^4.17.1",
     "jquery": "^3.6.0",
+    "lightbox": "^0.5.0",
     "moment": "^2.29.1",
     "node-sass": "^6.0.1",
     "nodemon": "^2.0.12",
diff --git a/server/index.js b/server/index.js
index 20a493d..79c182c 100644
--- a/server/index.js
+++ b/server/index.js
@@ -70,4 +70,5 @@ app.listen(PORT, () => {
   console.log(`Server listening on port: ${PORT}`);
 });
 
+
 module.export = app;