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..a81a1d5e 100644
--- a/frontend/src/components/Review/ReviewHeader.tsx
+++ b/frontend/src/components/Review/ReviewHeader.tsx
@@ -3,12 +3,24 @@ import { Grid, Typography } from '@material-ui/core';
 import styles from './Review.module.scss';
 import LabeledLinearProgress from '../utils/LabeledLinearProgress';
 import { RatingInfo } from '../../pages/LandlordPage';
+import { useEffect, useState } from 'react';
 
 type Props = {
   readonly aveRatingInfo: RatingInfo[];
 };
 
 export default function ReviewHeader({ aveRatingInfo }: Props): ReactElement {
+  const [isMobile, setIsMobile] = useState<boolean>(false);
+
+  useEffect(() => {
+    const handleResize = () => {
+      setIsMobile(window.innerWidth <= 750);
+    };
+    handleResize();
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
   return (
     <div className={styles.detail}>
       <Grid className={styles.infoContainer} container spacing={2} direction="row">
@@ -20,7 +32,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: isMobile ? '0%' : '-4%' }}>
                 <LabeledLinearProgress value={rating} />
               </Grid>
             </Grid>
diff --git a/frontend/src/components/utils/LabeledLinearProgress.tsx b/frontend/src/components/utils/LabeledLinearProgress.tsx
index a9f10ec8..c6c835a7 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,63 @@ 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 - 1;
+
+  const segments = Array.from({ length: 5 }, (_, index) => (
+    /**
+     * This JSX code represents a rendering of a bar segment for a rating display. The rating value is used to determine the visual appearance of the segment.
+     *
+     * @param {number} index - The index of the segment within the rating bar.
+     * @param {string} barSegment - The CSS class name for styling the segment.
+     * @param {number} rating_value - The rating value to be displayed.
+     *
+     * The background style of the div is set based on the index and rating value:
+     * - If the index is less than or equal to the rating_value, the background is set to colors.red1.
+     * - If the index is greater than the rating_value and is exactly 0.5 more than the rating_value, a gradient background is applied. The gradient transitions from colors.red1 to colors.gray4, creating a partial fill effect.
+     * - For all other cases, the background is set to colors.gray4.
+     */
+    /**
+     * Make it so the segments fill, and when there is a decimal leftover, the segment gets filled to that decimal.
+     */
+    <div
+      key={index}
+      className={barSegment}
+      style={{
+        background:
+          index <= rating_value
+            ? colors.red1
+            : index > rating_value && index - 1 < rating_value
+            ? `linear-gradient(to right, ${colors.red1} ${(rating_value - index + 1 / 1) * 100}%, ${
+                colors.gray4
+              } 0%)`
+            : 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 !== null && value !== undefined ? value.toFixed(1) : ''}
+      </Typography>
+    </div>
   );
 }
diff --git a/frontend/src/pages/ApartmentPage.tsx b/frontend/src/pages/ApartmentPage.tsx
index f20483db..a08afffb 100644
--- a/frontend/src/pages/ApartmentPage.tsx
+++ b/frontend/src/pages/ApartmentPage.tsx
@@ -156,11 +156,6 @@ 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);
-  };
-
   // Set 'notFound' to true when a page is not found.
   const handlePageNotFound = () => {
     setNotFound(true);
@@ -176,7 +171,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 +358,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 +371,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 +384,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,48 +411,14 @@ 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>
 
       {reviewData && reviewData.length > 0 && (
-        <Grid item xs={12} className={ratingInfo}>
+        <Grid item xs={12} className={ratingInfo} style={{ marginTop: '-2%' }}>
           <ReviewHeader aveRatingInfo={aveRatingInfo} />
         </Grid>
       )}
@@ -560,9 +534,8 @@ const ApartmentPage = ({ user, setUser }: Props): ReactElement => {
       </Grid>
     </>
   );
-
   const InfoSection = landlordData && (
-    <Grid item xs={12} sm={4}>
+    <Grid item xs={12}>
       <Typography variant="h3" style={{ fontSize: '30px', fontWeight: 600, marginBottom: '14px' }}>
         Landlord
       </Typography>
@@ -595,7 +568,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 && (
@@ -614,52 +587,78 @@ 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}
-                      isLandlord={false}
-                    />
-                  </Grid>
-                ))}
-            </Grid>
 
-            {isMobile && reviewData.length > resultsToShow && (
-              <Box textAlign="center">
-                <Grid item xs={12}>
-                  <hr className={horizontalLine} />
-                </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}
+            <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' }}
                   >
-                    Show More
-                  </Button>
+                    <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 container item spacing={3}>
+                  {sortReviews(reviewData, sortBy)
+                    .slice(0, resultsToShow)
+                    .map((review, index) => (
+                      <Grid item xs={12} key={index}>
+                        <ReviewComponent
+                          isLandlord={review.landlordId != null} // Make sure this is correct
+                          review={review}
+                          liked={likedReviews[review.id]}
+                          likeLoading={likeStatuses[review.id]}
+                          addLike={addLike}
+                          removeLike={removeLike}
+                          setToggle={setToggle}
+                          user={user}
+                          setUser={setUser}
+                        />
+                      </Grid>
+                    ))}
                 </Grid>
-              </Box>
-            )}
+              </Grid>
+
+              {/* Second Grid item (InfoSection) */}
+              {isMobile && (
+                <Hidden smUp>
+                  <Grid item xs={12}>
+                    {InfoSection}
+                  </Grid>
+                </Hidden>
+              )}
+              <Hidden xsDown>
+                <Grid item xs={4}>
+                  {InfoSection}
+                </Grid>
+              </Hidden>
+            </Grid>
           </Grid>
-          {isMobile && <Hidden smUp>{InfoSection}</Hidden>}
-          <Hidden xsDown>{InfoSection}</Hidden>
         </Grid>
       </Container>
       {Modals}