diff --git a/src/client/src/components/MoreDormInfoBlock.js b/src/client/src/components/MoreDormInfoBlock.js
index 7c909ac8..144719e0 100644
--- a/src/client/src/components/MoreDormInfoBlock.js
+++ b/src/client/src/components/MoreDormInfoBlock.js
@@ -4,26 +4,36 @@ import { theme } from "../util/GlobalStyles";
 
 const DormInfoBlock = styled.div`
     display: flex;
-    flex-wrap: wrap;
+    flex-direction: column;
 
     border: 0.05rem solid ${theme.columbiaBlue};
     border-radius: 2%;
-    padding: 2rem;
+    padding: .5rem 2rem;
     margin-top: 1rem;
 `;
 
-const Bold = styled.div`
+const Bold = styled.p`
     font-weight: 800;
+    margin-right: .2rem;
+    font-size: inherit;
 `;
 
-const Regular = styled.div``;
+const Italic = styled.p`
+    font-style: italic;
+    margin-right: .2rem;
+    font-size: inherit;
+`;
+
+const Regular = styled.p`
+    margin-right: .2rem;
+    font-size: inherit;
+`;
 
 const TitleBlock = styled.div`
     display: flex;
-    flex-direction: column;
-    flex-wrap: wrap;
-    margin-bottom: 1.5rem;
-    width: 50%;
+    flex-direction: row;
+    justify-content: flex-start;
+    margin: .75rem 0;
 
     @media (max-width: 786px) {
         font-size: 17px;
@@ -48,17 +58,17 @@ export default class MoreDormInfoBlock extends Component {
             let length = string.split(',').length;
 
             if (length === 1) {
-                return string.charAt(0).toUpperCase() + string.slice(1)
+                return string.charAt(0).toUpperCase() + string.slice(1, -1)
             }
 
             let stringArr = string.split(',').map((word, index) => {
                 if (index === length - 1) {
-                    return "& " + word.charAt(0).toUpperCase() + word.slice(1);
+                    return "& " + word.charAt(0).toUpperCase() + word.slice(1, -1);
                 }
                 else if (index === length - 2) {
-                    return word.charAt(0).toUpperCase() + word.slice(1)
+                    return word.charAt(0).toUpperCase() + word.slice(1, -1)
                 } else {
-                    return word.charAt(0).toUpperCase() + word.slice(1) + ","
+                    return word.charAt(0).toUpperCase() + word.slice(1, -1) + ","
                 }
             })
 
@@ -72,16 +82,16 @@ export default class MoreDormInfoBlock extends Component {
         let string = "";
 
         if (single) {
-            string += "singles"
+            string += "Singles"
         }
         if (double) {
             if (single) {
-                string += ","
+                string += " & "
             }
-            string += "doubles"
+            string += "Doubles"
         }
         if (triple) {
-            string += ",triples"
+            string += " & Triples"
         }
 
         return this.formatList(string);
@@ -94,20 +104,28 @@ export default class MoreDormInfoBlock extends Component {
         return (
         <DormInfoBlock>
             <TitleBlock>
-                <Bold>{this.props.dorm === "Wien Hall" ? "Singles & Doubles" : this.formatRooms(this.props.dormInfo.SINGLE_, this.props.dormInfo.DOUBLE_, this.props.dormInfo.TRIPLE_ )}</Bold>
-                <Regular>dorms</Regular>
+                <Regular>{this.props.dormInfo.SUITE ? "Suite" : "Corridor"}</Regular>
+                <Italic>style</Italic>
+            </TitleBlock>
+            <TitleBlock>
+                <Bold>{this.formatRooms(this.props.dormInfo.SINGLE_, this.props.dormInfo.DOUBLE_, this.props.dormInfo.TRIPLE_ )}</Bold>
+                <Italic><Bold>dorms</Bold></Italic>
+            </TitleBlock>
+            <TitleBlock>
+                <Regular>Lottery</Regular>
+                <Italic>####</Italic>
             </TitleBlock>
             <TitleBlock>
-                <Bold>{this.props.dorm === "Wien Hall" ? "Sophomores, Juniors & Seniors" : this.formatList(this.props.dormInfo.CLASS_MAKEUP)}</Bold>
-                <Regular>residents</Regular>
+                <Regular>{this.props.dormInfo.F_KITCHEN ? "Per floor" : this.props.dormInfo.P_KITCHEN ? "Per suite" : "No"}</Regular>
+                <Italic>kitchen</Italic>
             </TitleBlock>
             <TitleBlock>
-                <Bold>Per Floor</Bold>
-                <Regular>{this.props.dormInfo.F_KITCHEN ? "kitchen" : "bathroom"}</Regular>
+            <Regular>{this.props.dormInfo.P_BATHROOM ? "Per suite" : "Shared"}</Regular>
+                <Italic>bathroom</Italic>
             </TitleBlock>
             <TitleBlock>
-                <Bold>Per Suite</Bold>
-                <Regular>{this.props.dormInfo.P_KITCHEN ? "kitchen" : "bathroom"}</Regular>
+                <Bold>{this.formatList(this.props.dormInfo.CLASS_MAKEUP)}</Bold>
+                <Italic><Bold>residents</Bold></Italic>
             </TitleBlock>
         </DormInfoBlock>
         )
diff --git a/src/client/src/components/NewReviewPageReview.js b/src/client/src/components/NewReviewPageReview.js
new file mode 100644
index 00000000..a2c600e8
--- /dev/null
+++ b/src/client/src/components/NewReviewPageReview.js
@@ -0,0 +1,86 @@
+import React, { Component } from "react";
+import "../css/Review.css";
+import styled from 'styled-components';
+import Vote from "./Vote";
+
+let Wrapper = styled.div`
+    padding: 1.2rem 2rem;
+    margin-bottom: 2rem;
+    box-shadow: 5px 5px 10px ${props => props.theme.lightGray};
+    border: 1px solid ${props => props.theme.lightGray};
+`;
+
+let ReviewText = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: left;
+  align-self: center;
+  font-style: normal;
+  font-weight: 500;
+  font-size: 25px;
+`
+
+let Date = styled.div`
+  margin-left: auto;
+`
+
+let InfoWrapper = styled.div`
+  display: flex;
+  justify-content: row;
+  align-items: center;
+  font-style: normal;
+  font-weight: 500;
+  font-size: 15px;
+  text-align: right;
+  padding-top: 1rem;
+  color: #707070;
+`;
+
+let monthsDict = {
+  1: "january",
+  2: "february",
+  3: "march",
+  4: "april",
+  5: "may",
+  6: "june",
+  7: "july",
+  8: "august",
+  9: "september",
+  10: "october",
+  11: "november",
+  12: "december"
+};
+
+export default class NewReviewPageReview extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+
+  getPublishedDate(timestamp){
+    // parse year from MySQL timestamp
+    let posted = "posted: ".toUpperCase()
+    let month = monthsDict[timestamp.split('/', 3)[0]].toUpperCase()
+    let date = timestamp.split('/', 3)[1].substring(0, 2)
+    let year = timestamp.split('/', 3)[2].substring(0, 4)
+    let parsedDate = date + " " + month + " " + year
+    return (
+      <Date>{posted + parsedDate}</Date>
+    );
+  }
+
+  render() {
+    let hasNoReviews = (this.props.review === "No Reviews")
+    return (
+      <Wrapper>
+          <ReviewText>
+            <p>{this.props.review}</p>
+          </ReviewText>
+          <InfoWrapper>
+            <Vote dorm = {this.props.dorm} roomNum = {this.props.room} upvotes = {this.props.thumbs_up} downvotes = {this.props.thumbs_down} />
+            {hasNoReviews ? null : this.getPublishedDate(this.props.timestamp)}
+          </InfoWrapper>
+      </Wrapper>
+    );
+  }
+}
diff --git a/src/client/src/components/Vote.js b/src/client/src/components/Vote.js
index 8566ebc8..907635f0 100644
--- a/src/client/src/components/Vote.js
+++ b/src/client/src/components/Vote.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import upvote from '../assets/Icons/up_arrow.svg';
 import downvote from '../assets/Icons/down_arrow.svg';
 
@@ -15,47 +15,63 @@ const Upvotes = styled.div`
     display: flex;
     justify-content: row;
     align-items: center;
+
+    ${props => props.clicked && css`
+        ${UpIMG} {
+            filter: invert(55%) sepia(86%) saturate(502%) hue-rotate(70deg) brightness(79%) contrast(85%);
+        }
+
+        ${Text} {
+            color: #28A528;
+        }
+    `}
 `;
 
 const Downvotes = styled.div`
     display: flex;
     justify-content: row;
     align-items: center;
+
+    ${props => props.clicked && css`
+        ${DownIMG} {
+            filter: invert(16%) sepia(92%) saturate(4089%) hue-rotate(352deg) brightness(87%) contrast(93%);
+        }
+
+        ${Text} {
+            color: #D11E1E;
+        }
+    `}
 `;
 
 const UpIMG = styled.img`
     cursor: pointer;
-    filter: ${props => props.clicked ?
-            "invert(55%) sepia(86%) saturate(502%) hue-rotate(70deg) brightness(79%) contrast(85%)" :
-            "invert(90%) sepia(0%) saturate(1681%) hue-rotate(235deg) brightness(93%) contrast(108%)"};
     width: 28px;
     padding: .5rem;
+    filter: invert(90%) sepia(0%) saturate(1681%) hue-rotate(235deg) brightness(93%) contrast(108%);
 
     :hover {
-        filter: ${props => props.clicked ?
-        "invert(90%) sepia(0%) saturate(1681%) hue-rotate(235deg) brightness(93%) contrast(108%)" :
-        "invert(55%) sepia(86%) saturate(502%) hue-rotate(70deg) brightness(79%) contrast(85%)"};
+        filter: invert(55%) sepia(86%) saturate(502%) hue-rotate(70deg) brightness(79%) contrast(85%);
     }
 `;
 
 const DownIMG = styled.img`
     cursor: pointer;
-    filter: ${props => props.clicked ?
-            "invert(16%) sepia(92%) saturate(4089%) hue-rotate(352deg) brightness(87%) contrast(93%)" :
-            "invert(90%) sepia(0%) saturate(1681%) hue-rotate(235deg) brightness(93%) contrast(108%)"};
+    
     width: 28px;
     padding: .5rem;
+    filter: invert(90%) sepia(0%) saturate(1681%) hue-rotate(235deg) brightness(93%) contrast(108%);
 
     :hover {
-        filter: ${props => props.clicked ?
-        "invert(90%) sepia(0%) saturate(1681%) hue-rotate(235deg) brightness(93%) contrast(108%)" :
-        "invert(16%) sepia(92%) saturate(4089%) hue-rotate(352deg) brightness(87%) contrast(93%)"};
+        filter: invert(16%) sepia(92%) saturate(4089%) hue-rotate(352deg) brightness(87%) contrast(93%);
     }
 `;
 
-const UpText = styled.div``;
+const Text = styled.div`
+    color: #707070;
+`;
 
-const DownText = styled.div``;
+let agree = "agree ".toUpperCase();
+let disagree = "disagree ".toUpperCase();
 
 export default class Vote extends Component{
     constructor(props) {
@@ -128,13 +144,13 @@ export default class Vote extends Component{
     render() {
         return (
             <Wrapper>
-                <Upvotes>
-                    <UpIMG src = {upvote} alt = "upvote" onClick = {this.upvote} clicked = {this.state.upClicked}/>
-                    <UpText>Agree {this.state.upvotes + this.state.my_upvotes}</UpText>
+                <Upvotes onClick = {this.upvote} clicked = {this.state.upClicked}>
+                    <UpIMG src = {upvote} alt = "upvote"/>
+                    <Text>{agree}{this.state.upvotes + this.state.my_upvotes}</Text>
                 </Upvotes>
-                <Downvotes>
-                    <DownIMG src = {downvote} alt = "downvote" onClick = {this.downvote} clicked = {this.state.downClicked}/>
-                    <DownText>Disagree {this.state.downvotes + this.state.my_downvotes}</DownText>
+                <Downvotes onClick = {this.downvote} clicked = {this.state.downClicked}>
+                    <DownIMG src = {downvote} alt = "downvote"/>
+                    <Text>{disagree}{this.state.downvotes + this.state.my_downvotes}</Text>
                 </Downvotes>
             </Wrapper>
         )
diff --git a/src/client/src/containers/Reviews.js b/src/client/src/containers/Reviews.js
index e233a206..bf9e6183 100644
--- a/src/client/src/containers/Reviews.js
+++ b/src/client/src/containers/Reviews.js
@@ -5,10 +5,12 @@ import WhiteboardSidebar from "../components/ReviewsWhiteboardSidebar"
 import ReviewsBox from "../components/ReviewsBox"
 import Review from "../components/Review"
 import ReviewPageReview from "../components/ReviewPageReview"
+import NewReviewPageReview from "../components/NewReviewPageReview"
 import carouselimg from "./carouselimg.jpg"
 import QuickReview from "../components/QuickReview";
 import "react-responsive-carousel/lib/styles/carousel.min.css";
 import { Carousel } from 'react-responsive-carousel';
+import { theme } from "../util/GlobalStyles";
 
 //import WhiteboardSidebar from "../components/ReviewsWhiteboardSidebar"
 //import Review from "../components/Review"
@@ -156,9 +158,9 @@ const ColThree = styled.div`
     padding: 4rem 0 2rem 1rem;
 `
 
-const QuickReviewDisplay = styled.div`
+const CarouselDisplay = styled.div`
     width: 100%;
-    padding-top: 1rem;
+    padding: 1rem 0;
 `
 const QuickReviewBox = styled.div`
     margin-top: 1rem;
@@ -166,6 +168,43 @@ const QuickReviewBox = styled.div`
     padding-right: 1rem;
 `
 
+const DormName = styled.h1`
+    font-family: Raleway;
+    font-style: normal;
+    font-weight: normal;
+    color: ${theme.columbiaBlue};
+`
+const FilterDisplay = styled.div`
+
+`;
+
+const FilterTitle = styled.div`
+  font-style: normal;
+  font-weight: 500;
+  font-size: 24px;
+  line-height: 28px;  
+
+  padding: 3rem 0 .5rem 0;
+  border-bottom: 3px solid;
+  margin-bottom: 2rem;
+`;
+
+const Filter = styled.div`
+  display: flex;
+  flex-direction: row;
+  margin-bottom: 2rem;
+`;
+
+const FilterCheckbox = styled.div``;
+
+const FilterText = styled.p`
+  font-style: normal;
+  font-weight: normal;
+  font-size: 20px;
+  line-height: 23px;
+`;
+
+
 export default class Reviews extends Component{
   constructor(props){
     super(props)
@@ -282,6 +321,17 @@ export default class Reviews extends Component{
 
   }
 
+  fetchLotteryNumber(dormName){
+    fetch(`/api/getLotteryNum/${dormName}`, {
+      method: "GET",
+      headers: {"Content-Type": "application/json"},
+    })
+      .then(res => res.json())
+      .then(lotteryNums => {
+        this.setState({LowerBound: lotteryNums[0], UpperBound: lotteryNums[1]})
+      });
+  }
+
   handleDormChange(dorm) {
 
     const firstFloor = {
@@ -309,6 +359,7 @@ export default class Reviews extends Component{
       this.fetchQuickReview(dorm);
       this.fetchDormPhotos(dorm);
       this.fetchMoreDormInfo(dorm)
+      this.fetchLotteryNums(dorm);
     });
   }
 
@@ -369,9 +420,8 @@ export default class Reviews extends Component{
             {/*<DesktopButton href = {"/compare-dorms"}>Compare Dorms</DesktopButton>*/}
           </ColOne>
           <ColTwo>
-            <h1>{this.state.dorm}</h1>
-            {this.state.moreDormInfo ? (<MoreDormInfoBlock dorm={this.state.dorm} dormInfo={this.state.moreDormInfo} ></MoreDormInfoBlock>) : (<div></div>)}
-            <QuickReviewDisplay>
+            <DormName>{this.state.dorm}</DormName>
+            <CarouselDisplay>
               <Carousel showThumbs={false} infiniteLoop={true}>
                 {this.state.dorm_photos.filter(function (img) {
                   if (img == 'N/A'){ return false; }
@@ -382,15 +432,25 @@ export default class Reviews extends Component{
                   </div>
                 ))}
               </Carousel>
-              <QuickReviewBox>
-                <QuickReview QuickReview={this.state.QuickReview}></QuickReview>
-              </QuickReviewBox>
-            </QuickReviewDisplay>
+            </CarouselDisplay>
+            {this.state.moreDormInfo ? (<MoreDormInfoBlock dorm={this.state.dorm} dormInfo={this.state.moreDormInfo} lottery={this.state.lotteryNums}></MoreDormInfoBlock>) : (<div></div>)}
+            <FilterDisplay>
+              <FilterTitle>Filter Reviews</FilterTitle>
+              <Filter>
+                <FilterCheckbox></FilterCheckbox><FilterText>Sort by date from latest to earliest</FilterText>
+              </Filter>
+              <Filter>
+                <FilterCheckbox></FilterCheckbox><FilterText>Sort by date from earliest to latest</FilterText>
+              </Filter>
+              <Filter>
+                <FilterCheckbox></FilterCheckbox><FilterText>Sort by agree to disagree ratio</FilterText>
+              </Filter>
+            </FilterDisplay>
           </ColTwo>
           <ColThree>
             <AllReviews>
               {this.state.reviews.map((review, j) => (
-                  <ReviewPageReview
+                  <NewReviewPageReview
                     key={""+j}
                     stars={review.NUM_STARS}
                     review={review.REVIEW_TXT}