diff --git a/frontend/src/colors.js b/frontend/src/colors.js
index 3569e748..d8447c4d 100644
--- a/frontend/src/colors.js
+++ b/frontend/src/colors.js
@@ -9,6 +9,7 @@ export const colors = {
   gray1: '#5D5D5D',
   gray2: '#898989',
   gray3: '#F9F9F9',
+  gray4: '#C4C4C4',
   white: '#FFFFFF',
   landlordCardRed: '#F3664B',
   green1: '#68BB59',
diff --git a/frontend/src/components/Review/ReviewHeader.tsx b/frontend/src/components/Review/ReviewHeader.tsx
index 4e75c1d5..18361a0d 100644
--- a/frontend/src/components/Review/ReviewHeader.tsx
+++ b/frontend/src/components/Review/ReviewHeader.tsx
@@ -20,7 +20,7 @@ export default function ReviewHeader({ aveRatingInfo }: Props): ReactElement {
                   {feature.charAt(0).toUpperCase() + feature.slice(1)}
                 </Typography>
               </Grid>
-              <Grid item xs={7} md={7} lg={7}>
+              <Grid item xs={7} style={{ marginLeft: '-10%' }}>
                 <LabeledLinearProgress value={rating} />
               </Grid>
             </Grid>
diff --git a/frontend/src/components/utils/LabeledLinearProgress.tsx b/frontend/src/components/utils/LabeledLinearProgress.tsx
index a9f10ec8..900b9f14 100644
--- a/frontend/src/components/utils/LabeledLinearProgress.tsx
+++ b/frontend/src/components/utils/LabeledLinearProgress.tsx
@@ -1,8 +1,6 @@
 import React, { ReactElement } from 'react';
-import Box from '@material-ui/core/Box';
-import LinearProgress from '@material-ui/core/LinearProgress';
+import { colors } from '../../colors';
 import Typography from '@material-ui/core/Typography';
-import styles from '../Review/Review.module.scss';
 import { makeStyles } from '@material-ui/core';
 
 type Props = {
@@ -10,25 +8,48 @@ type Props = {
 };
 
 const useStyles = makeStyles((theme) => ({
-  bar: {
-    width: '90%',
+  barContainer: {
+    display: 'flex',
+    alignItems: 'center',
+  },
+  barSegment: {
+    flex: 1,
+    height: '8px', // Adjust the height as needed
+    borderRadius: '4px', // Adjust the border radius as needed
+    marginRight: '4px', // Add a small gap between segments
+  },
+  aveRating: {
+    marginLeft: '8px', // Add spacing between the segments and the rating
   },
 }));
 
 export default function LabeledLinearProgress({ value }: Props): ReactElement {
-  const { bar } = useStyles();
+  const { barContainer, barSegment, aveRating } = useStyles();
+  let rating_value = value * 2;
+  rating_value = Math.round(rating_value);
+  rating_value = rating_value / 2 - 1;
+  console.log(rating_value);
+  const segments = Array.from({ length: 5 }, (_, index) => (
+    <div
+      key={index}
+      className={barSegment}
+      style={{
+        background:
+          index <= rating_value
+            ? colors.red1
+            : index > rating_value && rating_value + 0.5 === index
+            ? `linear-gradient(to right, ${colors.red1} 0%, ${colors.red1} 50%, ${colors.gray4} 50%, ${colors.gray4} 100%)`
+            : colors.gray4,
+      }}
+    ></div>
+  ));
+
   return (
-    <Box className={styles.barContainer} display="flex" alignItems="center">
-      <Box width="90%" mr={1}>
-        <LinearProgress className={bar} variant="determinate" value={value * 20} />
-      </Box>
-      <Box minWidth={35}>
-        <Typography
-          className={styles.aveRating}
-          variant="body2"
-          color="textSecondary"
-        >{`${value.toFixed(1)}`}</Typography>
-      </Box>
-    </Box>
+    <div className={barContainer}>
+      {segments}
+      <Typography className={aveRating} variant="body2" color="textSecondary">
+        {`${value.toFixed(1)}`}
+      </Typography>
+    </div>
   );
 }
diff --git a/frontend/src/pages/ApartmentPage.tsx b/frontend/src/pages/ApartmentPage.tsx
index cef77917..67a5d25e 100644
--- a/frontend/src/pages/ApartmentPage.tsx
+++ b/frontend/src/pages/ApartmentPage.tsx
@@ -156,10 +156,9 @@ const ApartmentPage = ({ user, setUser }: Props): ReactElement => {
     }
   }, [isMobile, reviewData.length]);
 
-  // Increase the number of results to show when the "Show More" button is clicked.
-  const handleShowMore = () => {
-    setResultsToShow(resultsToShow + 5);
-  };
+  // const handleShowMore = () => {
+  //   setResultsToShow(resultsToShow + 5);
+  // };
 
   // Set 'notFound' to true when a page is not found.
   const handlePageNotFound = () => {
@@ -176,7 +175,6 @@ const ApartmentPage = ({ user, setUser }: Props): ReactElement => {
     container,
     expand,
     expandOpen,
-    horizontalLine,
   } = useStyles();
 
   // Set the page title based on whether apartment data is loaded.
@@ -364,9 +362,11 @@ const ApartmentPage = ({ user, setUser }: Props): ReactElement => {
   );
 
   const Header = (
+    // Header section with review count, average rating, and leave review button
+
     <>
       <Grid container alignItems="center">
-        <Grid container spacing={1}>
+        <Grid container alignItems="center" justifyContent="space-between">
           <Grid item>
             <Typography variant="h6">Reviews ({reviewData.length})</Typography>
             {reviewData.length === 0 && (
@@ -375,7 +375,7 @@ const ApartmentPage = ({ user, setUser }: Props): ReactElement => {
           </Grid>
 
           {reviewData.length > 0 && (
-            <Grid item>
+            <Grid item style={{ paddingLeft: '20px' }}>
               <Grid container alignItems="center">
                 <Grid item className={heartRating}>
                   <HeartRating value={getAverageRating(reviewData)} precision={0.5} readOnly />
@@ -388,6 +388,18 @@ const ApartmentPage = ({ user, setUser }: Props): ReactElement => {
               </Grid>
             </Grid>
           )}
+
+          <Grid item style={{ marginLeft: 'auto' }}>
+            <Button
+              color="primary"
+              className={reviewButton}
+              variant="contained"
+              disableElevation
+              onClick={openReviewModal}
+            >
+              Leave a Review
+            </Button>
+          </Grid>
         </Grid>
 
         {landlordData && landlordData.photos.length > 0 && (
@@ -403,42 +415,8 @@ const ApartmentPage = ({ user, setUser }: Props): ReactElement => {
 
         <Grid item className={leaveReviewContainer} xs={12}>
           <Grid container spacing={1} alignItems="center" justifyContent="space-between">
-            <Grid item>
-              <Button
-                color="primary"
-                className={reviewButton}
-                variant="contained"
-                disableElevation
-                onClick={openReviewModal}
-              >
-                Leave a Review
-              </Button>
-            </Grid>
-            <Grid item>
-              <Grid container spacing={1} direction="row" alignItems="center">
-                <Grid item>
-                  <Typography>Sort by:</Typography>
-                </Grid>
-                <Grid item className={sortByButton}>
-                  <DropDown
-                    menuItems={[
-                      {
-                        item: 'Recent',
-                        callback: () => {
-                          setSortBy('date');
-                        },
-                      },
-                      {
-                        item: 'Helpful',
-                        callback: () => {
-                          setSortBy('likes');
-                        },
-                      },
-                    ]}
-                  />
-                </Grid>
-              </Grid>
-            </Grid>
+            <Grid item></Grid>
+            <Grid item></Grid>
           </Grid>
         </Grid>
       </Grid>
@@ -560,9 +538,8 @@ const ApartmentPage = ({ user, setUser }: Props): ReactElement => {
       </Grid>
     </>
   );
-
   const InfoSection = landlordData && (
-    <Grid item xs={12} sm={4}>
+    <Grid item xs={12}>
       <AptInfo
         landlord={landlordData.name}
         contact={landlordData.contact}
@@ -573,10 +550,13 @@ const ApartmentPage = ({ user, setUser }: Props): ReactElement => {
   );
 
   return notFound ? (
+    // Display Not Found page if the apartment is not found
     <NotFoundPage />
   ) : !loaded ? (
+    // Display Not Found page if the apartment is not found
     <LinearProgress />
   ) : (
+    // Display Not Found page if the apartment is not found
     <>
       {landlordData && (
         <Container>
@@ -591,7 +571,7 @@ const ApartmentPage = ({ user, setUser }: Props): ReactElement => {
 
       <Container className={container}>
         <Grid container spacing={5} justifyContent="center" style={{ marginBottom: '20px' }}>
-          <Grid item xs={12} sm={8}>
+          <Grid item xs={12}>
             {isMobile ? MobileHeader : Header}
             {!isMobile && <Hidden smUp>{InfoSection}</Hidden>}
             {showConfirmation && (
@@ -610,51 +590,76 @@ const ApartmentPage = ({ user, setUser }: Props): ReactElement => {
                 time={toastTime}
               />
             )}
-            <Grid container item spacing={3}>
-              {sortReviews(reviewData, sortBy)
-                .slice(0, resultsToShow)
-                .map((review, index) => (
-                  <Grid item xs={12} key={index}>
-                    <ReviewComponent
-                      review={review}
-                      liked={likedReviews[review.id]}
-                      likeLoading={likeStatuses[review.id]}
-                      addLike={addLike}
-                      removeLike={removeLike}
-                      setToggle={setToggle}
-                      user={user}
-                      setUser={setUser}
-                    />
+            <Grid container alignItems="flex-start" justifyContent="center" spacing={3}>
+              <Grid item xs={12} sm={8}>
+                {!isMobile && (
+                  <Grid
+                    container
+                    spacing={1}
+                    direction="row"
+                    alignItems="center"
+                    justifyContent="flex-end"
+                    style={{ paddingBottom: '10px' }}
+                  >
+                    <Grid item>
+                      <Typography>Sort by:</Typography>
+                    </Grid>
+                    <Grid item className={sortByButton}>
+                      <DropDown
+                        menuItems={[
+                          {
+                            item: 'Recent',
+                            callback: () => {
+                              setSortBy('date');
+                            },
+                          },
+                          {
+                            item: 'Helpful',
+                            callback: () => {
+                              setSortBy('likes');
+                            },
+                          },
+                        ]}
+                      />
+                    </Grid>
                   </Grid>
-                ))}
-            </Grid>
-
-            {isMobile && reviewData.length > resultsToShow && (
-              <Box textAlign="center">
-                <Grid item xs={12}>
-                  <hr className={horizontalLine} />
+                )}
+                {/* Rest of your Review List content */}
+                <Grid container spacing={3}>
+                  {sortReviews(reviewData, sortBy)
+                    .slice(0, resultsToShow)
+                    .map((review, index) => (
+                      <Grid item xs={12} key={index}>
+                        <ReviewComponent
+                          review={review}
+                          liked={likedReviews[review.id]}
+                          likeLoading={likeStatuses[review.id]}
+                          addLike={addLike}
+                          removeLike={removeLike}
+                          setToggle={setToggle}
+                          user={user}
+                          setUser={setUser}
+                        />
+                      </Grid>
+                    ))}
                 </Grid>
-                <Grid item style={{ padding: '30px' }}>
-                  <Button
-                    style={{
-                      backgroundColor: 'white',
-                      border: '1px solid #A3A3A3',
-                      borderRadius: '9px',
-                      width: '10em',
-                      textTransform: 'initial',
-                    }}
-                    variant="contained"
-                    disableElevation
-                    onClick={handleShowMore}
-                  >
-                    Show More
-                  </Button>
+              </Grid>
+
+              {/* Second Grid item (InfoSection) */}
+              {isMobile && (
+                <Hidden smUp>
+                  <Grid item xs={12}>
+                    {InfoSection}
+                  </Grid>
+                </Hidden>
+              )}
+              <Hidden xsDown>
+                <Grid item xs={4}>
+                  {InfoSection}
                 </Grid>
-              </Box>
-            )}
+              </Hidden>
+            </Grid>
           </Grid>
-          {isMobile && <Hidden smUp>{InfoSection}</Hidden>}
-          <Hidden xsDown>{InfoSection}</Hidden>
         </Grid>
       </Container>
       {Modals}