From 1770a6f857d7e17e64dab7c616090f30b3a9b432 Mon Sep 17 00:00:00 2001
From: Henry Kim <henry1112200@gmail.com>
Date: Wed, 25 Mar 2026 19:17:12 -0700
Subject: [PATCH 01/34] added written review field to rating submission and
 modified ui to support this

---
 apps/backend/src/modules/rating/controller.ts |  21 ++-
 apps/backend/src/modules/rating/resolver.ts   |   5 +-
 .../src/app/Profile/Ratings/index.tsx         |  12 +-
 .../UserFeedbackModal/FeedbackForm.tsx        |  53 +++++---
 .../UserFeedbackModal/RatingFormBody.tsx      | 126 +++++++++---------
 .../UserFeedbackModal.module.scss             |  83 ++++++++----
 .../Class/Ratings/UserFeedbackModal/index.tsx |  10 +-
 .../UserFeedbackModal/useRatingFormState.ts   |   4 +
 .../src/components/Class/Ratings/index.tsx    |   3 +-
 .../Class/Ratings/ratingMutations.ts          |   3 +
 apps/frontend/src/lib/api/ratings.ts          |   2 +
 packages/common/src/models/index.ts           |   1 +
 packages/common/src/models/review.ts          |  55 ++++++++
 packages/gql-typedefs/rating.ts               |   1 +
 14 files changed, 262 insertions(+), 117 deletions(-)
 create mode 100644 packages/common/src/models/review.ts

diff --git a/apps/backend/src/modules/rating/controller.ts b/apps/backend/src/modules/rating/controller.ts
index 32b53f238..52115c069 100644
--- a/apps/backend/src/modules/rating/controller.ts
+++ b/apps/backend/src/modules/rating/controller.ts
@@ -8,6 +8,7 @@ import {
   CourseModel,
   RatingModel,
   RatingType,
+  ReviewModel,
   SectionModel,
 } from "@repo/common/models";
 import { METRIC_MAPPINGS, REQUIRED_METRICS } from "@repo/shared";
@@ -934,7 +935,8 @@ export const createRatings = async (
   subject: string,
   courseNumber: string,
   classNumber: string,
-  metrics: MetricInput[]
+  metrics: MetricInput[],
+  review?: string
 ) => {
   if (!context.user._id) {
     throw new GraphQLError("Unauthorized", {
@@ -1011,7 +1013,16 @@ export const createRatings = async (
         ]);
       }
 
-      // Step 2: Create all new ratings and increment their aggregated counts
+      // Step 2: Upsert review if provided
+      if (review) {
+        await ReviewModel.findOneAndUpdate(
+          { createdBy: context.user._id, courseId },
+          { text: review, classId, subject, courseNumber, semester, year, classNumber },
+          { upsert: true, session }
+        );
+      }
+
+      // Step 3: Create all new ratings and increment their aggregated counts
       for (const metric of metrics) {
         await Promise.all([
           RatingModel.create(
@@ -1085,6 +1096,12 @@ export const deleteRatings = async (
   const session = await connection.startSession();
   try {
     await session.withTransaction(async () => {
+      // Delete review if exists
+      await ReviewModel.deleteOne(
+        { createdBy: context.user._id, courseId: existingRatings[0]?.courseId },
+        { session }
+      );
+
       // Delete all ratings and decrement their aggregated counts
       for (const existingRating of existingRatings) {
         await Promise.all([
diff --git a/apps/backend/src/modules/rating/resolver.ts b/apps/backend/src/modules/rating/resolver.ts
index 9c437acf0..2e8681e85 100644
--- a/apps/backend/src/modules/rating/resolver.ts
+++ b/apps/backend/src/modules/rating/resolver.ts
@@ -141,7 +141,7 @@ const resolvers: RatingModule.Resolvers = {
   Mutation: {
     createRatings: async (
       _,
-      { year, semester, subject, courseNumber, classNumber, metrics },
+      { year, semester, subject, courseNumber, classNumber, metrics, review },
       context
     ) => {
       try {
@@ -152,7 +152,8 @@ const resolvers: RatingModule.Resolvers = {
           subject,
           courseNumber,
           classNumber,
-          metrics
+          metrics,
+          review ?? undefined
         );
       } catch (error: unknown) {
         // Re-throw GraphQLErrors as is
diff --git a/apps/frontend/src/app/Profile/Ratings/index.tsx b/apps/frontend/src/app/Profile/Ratings/index.tsx
index 42c6fcbff..00911c82a 100644
--- a/apps/frontend/src/app/Profile/Ratings/index.tsx
+++ b/apps/frontend/src/app/Profile/Ratings/index.tsx
@@ -194,7 +194,8 @@ export default function Ratings() {
     async (
       metricValues: MetricData,
       termInfo: { semester: Semester; year: number },
-      courseInfo: { subject: string; courseNumber: string; classNumber: string }
+      courseInfo: { subject: string; courseNumber: string; classNumber: string },
+      review?: string
     ) => {
       if (!ratingForEdit) return;
 
@@ -217,6 +218,7 @@ export default function Ratings() {
           number: courseInfo.classNumber,
         },
         refetchQueries: buildRefetchQueries(refetchTarget),
+        review,
       });
     },
     [ratingForEdit, createRatingsMutation, buildRefetchQueries]
@@ -226,7 +228,8 @@ export default function Ratings() {
     async (
       metricValues: MetricData,
       termInfo: { semester: Semester; year: number },
-      courseInfo: { subject: string; courseNumber: string; classNumber: string }
+      courseInfo: { subject: string; courseNumber: string; classNumber: string },
+      review?: string
     ) => {
       const refetchTarget = {
         subject: courseInfo.subject,
@@ -246,6 +249,7 @@ export default function Ratings() {
           number: courseInfo.classNumber,
         },
         refetchQueries: buildRefetchQueries(refetchTarget),
+        review,
       });
     },
     [createRatingsMutation, buildRefetchQueries]
@@ -336,8 +340,8 @@ export default function Ratings() {
               : null
           }
           availableTerms={availableTerms}
-          onSubmit={async (metricValues, termInfo, courseInfo) => {
-            await handleSubmitEdit(metricValues, termInfo, courseInfo);
+          onSubmit={async (metricValues, termInfo, courseInfo, review) => {
+            await handleSubmitEdit(metricValues, termInfo, courseInfo, review);
           }}
           initialUserClass={ratingForEdit}
           onSubmitPopupChange={setIsEditThankYouOpen}
diff --git a/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/FeedbackForm.tsx b/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/FeedbackForm.tsx
index 1e5696e50..be51bece7 100644
--- a/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/FeedbackForm.tsx
+++ b/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/FeedbackForm.tsx
@@ -37,7 +37,6 @@ interface RatingScaleProps {
 export function AttendanceForm({
   metricData,
   setMetricData,
-  startQuestionNumber,
 }: AttendanceFormProps) {
   const handleAttendanceClickClick = (
     type: MetricName,
@@ -61,19 +60,15 @@ export function AttendanceForm({
   ];
 
   return (
-    <div>
-      {ATTENDANCE_QUESTIONS.map(({ type, question }, index) => (
-        <div className={styles.formGroup} key={type}>
-          <div className={styles.inlineQuestion}>
-            <h3>
-              {startQuestionNumber + index}. {question}
-            </h3>
-            <BooleanOptions
-              name={type}
-              value={metricData[type] ?? null}
-              onChange={(v) => handleAttendanceClickClick(type, v)}
-            />
-          </div>
+    <div style={{ display: "flex", flexDirection: "column", gap: "32px", padding: "24px 32px" }}>
+      {ATTENDANCE_QUESTIONS.map(({ type, question }) => (
+        <div className={styles.inlineQuestion} key={type}>
+          <h3>{question}</h3>
+          <BooleanOptions
+            name={type}
+            value={metricData[type] ?? null}
+            onChange={(v) => handleAttendanceClickClick(type, v)}
+          />
         </div>
       ))}
     </div>
@@ -114,7 +109,7 @@ export function RatingsForm({
   ];
 
   return (
-    <div>
+    <div style={{ display: "flex", flexDirection: "column", gap: "32px" }}>
       {RATING_QUESTIONS.map(
         ({ type, question, leftLabel, rightLabel }, index) => (
           <RatingScale
@@ -133,6 +128,31 @@ export function RatingsForm({
   );
 }
 
+interface ReviewFormProps {
+  review: string;
+  setReview: (value: string) => void;
+}
+
+export function ReviewForm({ review, setReview }: ReviewFormProps) {
+  return (
+    <div className={styles.formGroup}>
+      <div className={styles.questionPair}>
+        <h3>Write a Review</h3>
+        <textarea
+          className={styles.reviewTextarea}
+          value={review}
+          onChange={(e) => setReview(e.target.value)}
+          placeholder="Share details of your experience in the course"
+          rows={4}
+        />
+        <p className={styles.reviewDisclaimer}>
+          Your rating could be removed if you use profanity or derogatory terms.
+        </p>
+      </div>
+    </div>
+  );
+}
+
 // helper functions
 
 const RequiredAsterisk = () => <span style={{ color: "red" }}>*</span>;
@@ -140,7 +160,6 @@ const RequiredAsterisk = () => <span style={{ color: "red" }}>*</span>;
 const RatingScale = ({
   type,
   question,
-  questionNumber,
   leftLabel,
   rightLabel,
   metricData,
@@ -149,7 +168,7 @@ const RatingScale = ({
   <div className={styles.formGroup}>
     <div className={styles.questionPair}>
       <h3>
-        {questionNumber}. {question} <RequiredAsterisk />
+        {question} <RequiredAsterisk />
       </h3>
       <div className={styles.ratingScale}>
         <span>{leftLabel}</span>
diff --git a/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/RatingFormBody.tsx b/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/RatingFormBody.tsx
index d73d61c9e..ba2396de3 100644
--- a/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/RatingFormBody.tsx
+++ b/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/RatingFormBody.tsx
@@ -6,7 +6,7 @@ import CourseSelect, { CourseOption } from "@/components/CourseSelect";
 import { Semester } from "@/lib/generated/graphql";
 
 import { MetricData } from "../metricsUtil";
-import { AttendanceForm, RatingsForm } from "./FeedbackForm";
+import { AttendanceForm, RatingsForm, ReviewForm } from "./FeedbackForm";
 // eslint-disable-next-line css-modules/no-unused-class
 import styles from "./UserFeedbackModal.module.scss";
 
@@ -40,6 +40,8 @@ interface RatingFormBodyProps {
   questionNumbers: QuestionNumbers;
   disableRatedCourses?: boolean;
   lockedCourse?: CourseOption | null;
+  review: string;
+  setReview: (value: string) => void;
 }
 
 export function RatingFormBody({
@@ -56,76 +58,74 @@ export function RatingFormBody({
   questionNumbers,
   disableRatedCourses = false,
   lockedCourse = null,
+  review,
+  setReview,
 }: RatingFormBodyProps) {
   return (
     <Flex direction="column">
-      <div className={styles.formGroup}>
-        <div className={styles.questionPair}>
-          <h3>
-            {questionNumbers.classQuestionNumber}. Which class are you rating?{" "}
-            <RequiredAsterisk />
-          </h3>
-          <div
-            style={{
-              width: 350,
-              margin: "0 auto",
-            }}
-          >
-            <CourseSelect
-              selectedCourse={selectedCourse}
-              onSelect={(course) => {
-                onCourseSelect(course);
-              }}
-              onClear={onCourseClear}
-              minimal={true}
-              ratedCourses={userRatedClasses}
-              disableRatedCourses={disableRatedCourses}
-              lockedCourse={lockedCourse}
-            />
+      <div
+        className={styles.mainSection}
+      >
+        <Flex direction="column" style={{ gap: "32px", padding: "24px 0" }}>
+          <div className={styles.formGroup}>
+            <div className={styles.questionPair}>
+              <h3>
+                Which class are you rating? <RequiredAsterisk />
+              </h3>
+              <div style={{ width: "100%" }}>
+                <CourseSelect
+                  selectedCourse={selectedCourse}
+                  onSelect={(course) => {
+                    onCourseSelect(course);
+                  }}
+                  onClear={onCourseClear}
+                  minimal={true}
+                  ratedCourses={userRatedClasses}
+                  disableRatedCourses={disableRatedCourses}
+                  lockedCourse={lockedCourse}
+                />
+              </div>
+            </div>
           </div>
-        </div>
-      </div>
 
-      <div className={styles.formGroup}>
-        <div className={styles.questionPair}>
-          <h3>
-            {questionNumbers.semesterQuestionNumber}. What semester did you take
-            this course? <RequiredAsterisk />
-          </h3>
-          <div
-            style={{
-              width: 350,
-              margin: "0 auto",
-            }}
-          >
-            <Select
-              options={termOptions.map((term) => ({
-                value: term.value,
-                label: term.label,
-              }))}
-              disabled={!selectedCourse || termOptionsLoading}
-              loading={termOptionsLoading}
-              value={selectedTerm}
-              onChange={(selectedOption) => {
-                if (Array.isArray(selectedOption)) onTermSelect(null);
-                else onTermSelect(selectedOption || null);
-              }}
-              placeholder={
-                selectedCourse ? "Select semester" : "Select a class first"
-              }
-              emptyMessage="No semesters found."
-              clearable={true}
-              searchable={true}
-            />
+          <div className={styles.formGroup}>
+            <div className={styles.questionPair}>
+              <h3>
+                What semester did you take this course? <RequiredAsterisk />
+              </h3>
+              <div style={{ width: "100%" }}>
+                <Select
+                  options={termOptions.map((term) => ({
+                    value: term.value,
+                    label: term.label,
+                  }))}
+                  disabled={!selectedCourse || termOptionsLoading}
+                  loading={termOptionsLoading}
+                  value={selectedTerm}
+                  onChange={(selectedOption) => {
+                    if (Array.isArray(selectedOption)) onTermSelect(null);
+                    else onTermSelect(selectedOption || null);
+                  }}
+                  placeholder={
+                    selectedCourse ? "Select semester" : "Select a class first"
+                  }
+                  emptyMessage="No semesters found."
+                  clearable={true}
+                  searchable={true}
+                />
+              </div>
+            </div>
           </div>
-        </div>
+
+          <RatingsForm
+            metricData={metricData}
+            setMetricData={setMetricData}
+            startQuestionNumber={questionNumbers.ratingsStartNumber}
+          />
+          <ReviewForm review={review} setReview={setReview} />
+        </Flex>
       </div>
 
-      <RatingsForm
-        metricData={metricData}
-        setMetricData={setMetricData}
-        startQuestionNumber={questionNumbers.ratingsStartNumber}
-      />
       <AttendanceForm
         metricData={metricData}
         setMetricData={setMetricData}
diff --git a/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/UserFeedbackModal.module.scss b/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/UserFeedbackModal.module.scss
index e2a448be8..c2bd8c288 100644
--- a/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/UserFeedbackModal.module.scss
+++ b/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/UserFeedbackModal.module.scss
@@ -37,6 +37,7 @@
   overflow-y: scroll;
   overflow-x: hidden;
   position: relative;
+  padding: 0 !important;
 }
 
 .formContentWrapper {
@@ -44,24 +45,29 @@
   width: 100%;
 }
 
+.mainSection {
+  border-bottom: 1px solid var(--surface-border-color, rgba(0, 0, 0, 0.1));
+  width: 100%;
+}
+
 .formGroup {
-  padding: 0 84px;
+  padding: 0 32px;
+}
 
-  h3,
-  p {
-    color: var(--secondary-color);
-    font-size: var(--text-14);
-    font-weight: var(--font-normal);
-    margin: 0;
-    padding: 0;
-  }
+.formGroup h3,
+.formGroup p,
+.inlineQuestion h3 {
+  color: var(--secondary-color);
+  font-size: var(--text-14);
+  font-weight: var(--font-normal);
+  margin: 0;
+  padding: 0;
 }
 
 .questionPair {
   display: flex;
   flex-direction: column;
   gap: 12px;
-  padding: 20px 0;
 }
 
 .inlineQuestion {
@@ -69,36 +75,23 @@
   flex-direction: row;
   align-items: center;
   gap: 16px;
-  padding: 20px 0;
 }
 
 .ratingScale {
   display: flex;
   align-items: center;
-  gap: 16px;
-  max-width: 500px;
-  margin: 0 auto;
+  gap: 24px;
 
   span {
     color: var(--paragraph-color);
     font-size: var(--text-14);
-    min-width: 80px;
-
-    &:first-child {
-      text-align: right;
-    }
-
-    &:last-child {
-      text-align: left;
-    }
+    white-space: nowrap;
   }
 }
 
 .ratingButtons {
   display: flex;
-  gap: 8px;
-  flex-grow: 1;
-  justify-content: center;
+  gap: 16px;
 }
 
 .ratingButton {
@@ -131,6 +124,44 @@
   }
 }
 
+.reviewTextarea {
+  width: 100%;
+  padding: 12px;
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+  font-size: var(--font-sizes-2, 14px);
+  font-family: inherit;
+
+  color: var(--text-secondary-color, #404040);
+  background: none;
+  resize: vertical;
+  box-sizing: border-box;
+
+  &::placeholder {
+    color: var(--text-label-color, #a3a3a3);
+    font-size: var(--font-sizes-2, 14px);
+
+    line-height: 20px;
+    letter-spacing: -0.1px;
+  }
+
+  &:focus {
+    outline: none;
+    border-color: var(--blue-500);
+  }
+}
+
+.reviewDisclaimer.reviewDisclaimer {
+  color: var(--text-paragraph-color, #737373);
+  font-feature-settings: "liga" off;
+  font-family: Inter, sans-serif;
+  font-size: var(--font-sizes-1, 12px);
+  font-style: normal;
+  font-weight: 500;
+  line-height: 16px;
+  margin: 0;
+}
+
 .booleanBadges {
   display: flex;
   flex-direction: row;
diff --git a/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/index.tsx b/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/index.tsx
index 742df4b4f..9e59e5906 100644
--- a/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/index.tsx
+++ b/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/index.tsx
@@ -38,7 +38,8 @@ interface UserFeedbackModalProps {
   onSubmit: (
     metricData: MetricData,
     termInfo: { semester: Semester; year: number },
-    courseInfo: { subject: string; courseNumber: string; classNumber: string }
+    courseInfo: { subject: string; courseNumber: string; classNumber: string },
+    review?: string
   ) => Promise<void>;
   initialUserClass?: IUserRatingClass | null;
   userRatedClasses?: Array<{ subject: string; courseNumber: string }>;
@@ -130,6 +131,8 @@ export function UserFeedbackModal({
     setIsSubmitting,
     progress,
     reset,
+    review,
+    setReview,
   } = formState;
 
   const overallProgress = useMemo(
@@ -296,7 +299,8 @@ export function UserFeedbackModal({
           subject: selectedCourse.subject,
           courseNumber: selectedCourse.number,
           classNumber,
-        }
+        },
+        review || undefined
       );
 
       const isLastRating = currentRatingIndex >= totalRatings - 1;
@@ -446,6 +450,8 @@ export function UserFeedbackModal({
               questionNumbers={questionNumbers}
               disableRatedCourses={disableRatedCourses}
               lockedCourse={lockedCourse}
+              review={review}
+              setReview={setReview}
             />
           </motion.div>
         </AnimatePresence>
diff --git a/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/useRatingFormState.ts b/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/useRatingFormState.ts
index 6d386999a..8e2e8f5a3 100644
--- a/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/useRatingFormState.ts
+++ b/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/useRatingFormState.ts
@@ -21,6 +21,7 @@ export function useRatingFormState({
     initialCourse
   );
   const [isSubmitting, setIsSubmitting] = useState(false);
+  const [review, setReview] = useState<string>("");
 
   const isFormValid = useMemo(() => {
     const isClassValid = selectedCourse !== null;
@@ -69,6 +70,7 @@ export function useRatingFormState({
     setSelectedTerm(null);
     setSelectedCourse(newInitialCourse ?? initialCourse ?? null);
     setIsSubmitting(false);
+    setReview("");
   };
 
   return {
@@ -83,5 +85,7 @@ export function useRatingFormState({
     isFormValid,
     progress,
     reset,
+    review,
+    setReview,
   };
 }
diff --git a/apps/frontend/src/components/Class/Ratings/index.tsx b/apps/frontend/src/components/Class/Ratings/index.tsx
index 93fec0793..6193d8bae 100644
--- a/apps/frontend/src/components/Class/Ratings/index.tsx
+++ b/apps/frontend/src/components/Class/Ratings/index.tsx
@@ -653,7 +653,7 @@ export function RatingsContainer() {
           courseId: "",
         }}
         availableTerms={availableTerms}
-        onSubmit={async (metricValues, termInfo, courseInfo) => {
+        onSubmit={async (metricValues, termInfo, courseInfo, review) => {
           await submitRatingMutation({
             metricValues,
             termInfo,
@@ -664,6 +664,7 @@ export function RatingsContainer() {
               number: courseInfo.classNumber,
             },
             refetchQueries: [],
+            review,
           });
           await Promise.all([
             refetchAllRatings(),
diff --git a/apps/frontend/src/components/Class/Ratings/ratingMutations.ts b/apps/frontend/src/components/Class/Ratings/ratingMutations.ts
index edf72e80c..4190d4a68 100644
--- a/apps/frontend/src/components/Class/Ratings/ratingMutations.ts
+++ b/apps/frontend/src/components/Class/Ratings/ratingMutations.ts
@@ -35,6 +35,7 @@ interface SubmitRatingOptions {
   >;
   classIdentifiers: ClassIdentifiers;
   refetchQueries?: RefetchQuery[];
+  review?: string;
 }
 
 export async function submitRating({
@@ -43,6 +44,7 @@ export async function submitRating({
   createRatingsMutation,
   classIdentifiers,
   refetchQueries = [],
+  review,
 }: SubmitRatingOptions) {
   // Validate required metrics are present
   const missingRequiredMetrics = REQUIRED_METRICS.filter(
@@ -75,6 +77,7 @@ export async function submitRating({
       year: termInfo.year,
       classNumber: classIdentifiers.number,
       metrics,
+      review,
     },
     refetchQueries,
     awaitRefetchQueries: true,
diff --git a/apps/frontend/src/lib/api/ratings.ts b/apps/frontend/src/lib/api/ratings.ts
index 51066805d..923a61d2f 100644
--- a/apps/frontend/src/lib/api/ratings.ts
+++ b/apps/frontend/src/lib/api/ratings.ts
@@ -65,6 +65,7 @@ export const CREATE_RATINGS = gql`
     $year: Int!
     $classNumber: String!
     $metrics: [RatingMetricInput!]!
+    $review: String
   ) {
     createRatings(
       subject: $subject
@@ -73,6 +74,7 @@ export const CREATE_RATINGS = gql`
       year: $year
       classNumber: $classNumber
       metrics: $metrics
+      review: $review
     )
   }
 `;
diff --git a/packages/common/src/models/index.ts b/packages/common/src/models/index.ts
index b607d986b..04de52b06 100644
--- a/packages/common/src/models/index.ts
+++ b/packages/common/src/models/index.ts
@@ -6,6 +6,7 @@ export * from "./term";
 export * from "./course";
 export * from "./section";
 export * from "./rating";
+export * from "./review";
 export * from "./grade-distribution";
 export * from "./plan";
 export * from "./enrollment-history";
diff --git a/packages/common/src/models/review.ts b/packages/common/src/models/review.ts
new file mode 100644
index 000000000..0f2f448c8
--- /dev/null
+++ b/packages/common/src/models/review.ts
@@ -0,0 +1,55 @@
+import mongoose, { InferSchemaType, Schema } from "mongoose";
+
+const reviewSchema = new Schema(
+  {
+    _id: { type: Schema.Types.ObjectId, auto: true },
+    createdBy: {
+      type: String,
+      trim: true,
+      required: true,
+      immutable: true,
+    },
+    classId: {
+      type: Schema.Types.ObjectId,
+      ref: "class",
+      required: true,
+    },
+    courseId: {
+      type: String,
+      required: true,
+    },
+    subject: {
+      type: String,
+      required: true,
+    },
+    courseNumber: {
+      type: String,
+      required: true,
+    },
+    semester: {
+      type: String,
+      required: true,
+    },
+    year: {
+      type: Number,
+      required: true,
+    },
+    classNumber: {
+      type: String,
+      required: true,
+    },
+    text: {
+      type: String,
+      required: false,
+    },
+  },
+  {
+    timestamps: true,
+  }
+);
+
+// Unique review per user per course
+reviewSchema.index({ createdBy: 1, courseId: 1 }, { unique: true });
+
+export const ReviewModel = mongoose.model("review", reviewSchema);
+export type ReviewType = InferSchemaType<typeof reviewSchema>;
diff --git a/packages/gql-typedefs/rating.ts b/packages/gql-typedefs/rating.ts
index 9212ddb63..d5e98ee04 100644
--- a/packages/gql-typedefs/rating.ts
+++ b/packages/gql-typedefs/rating.ts
@@ -199,6 +199,7 @@ export const ratingTypeDef = gql`
       classNumber: String!
 
       metrics: [RatingMetricInput!]!
+      review: String
     ): Boolean! @auth
 
     deleteRatings(subject: String!, courseNumber: String!): Boolean! @auth

From 3c65d9652a92c6daea4f734cd6aaebcf6af96a15 Mon Sep 17 00:00:00 2001
From: Henry Kim <henry1112200@gmail.com>
Date: Wed, 25 Mar 2026 19:19:08 -0700
Subject: [PATCH 02/34] Add written review field to rating submission

---
 apps/backend/src/modules/rating/controller.ts        | 10 +++++++++-
 apps/frontend/src/app/Profile/Ratings/index.tsx      | 12 ++++++++++--
 .../Class/Ratings/UserFeedbackModal/FeedbackForm.tsx |  9 ++++++++-
 .../Ratings/UserFeedbackModal/RatingFormBody.tsx     |  4 +---
 4 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/apps/backend/src/modules/rating/controller.ts b/apps/backend/src/modules/rating/controller.ts
index 52115c069..26b92a5d0 100644
--- a/apps/backend/src/modules/rating/controller.ts
+++ b/apps/backend/src/modules/rating/controller.ts
@@ -1017,7 +1017,15 @@ export const createRatings = async (
       if (review) {
         await ReviewModel.findOneAndUpdate(
           { createdBy: context.user._id, courseId },
-          { text: review, classId, subject, courseNumber, semester, year, classNumber },
+          {
+            text: review,
+            classId,
+            subject,
+            courseNumber,
+            semester,
+            year,
+            classNumber,
+          },
           { upsert: true, session }
         );
       }
diff --git a/apps/frontend/src/app/Profile/Ratings/index.tsx b/apps/frontend/src/app/Profile/Ratings/index.tsx
index 00911c82a..1ca6e9241 100644
--- a/apps/frontend/src/app/Profile/Ratings/index.tsx
+++ b/apps/frontend/src/app/Profile/Ratings/index.tsx
@@ -194,7 +194,11 @@ export default function Ratings() {
     async (
       metricValues: MetricData,
       termInfo: { semester: Semester; year: number },
-      courseInfo: { subject: string; courseNumber: string; classNumber: string },
+      courseInfo: {
+        subject: string;
+        courseNumber: string;
+        classNumber: string;
+      },
       review?: string
     ) => {
       if (!ratingForEdit) return;
@@ -228,7 +232,11 @@ export default function Ratings() {
     async (
       metricValues: MetricData,
       termInfo: { semester: Semester; year: number },
-      courseInfo: { subject: string; courseNumber: string; classNumber: string },
+      courseInfo: {
+        subject: string;
+        courseNumber: string;
+        classNumber: string;
+      },
       review?: string
     ) => {
       const refetchTarget = {
diff --git a/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/FeedbackForm.tsx b/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/FeedbackForm.tsx
index be51bece7..715736613 100644
--- a/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/FeedbackForm.tsx
+++ b/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/FeedbackForm.tsx
@@ -60,7 +60,14 @@ export function AttendanceForm({
   ];
 
   return (
-    <div style={{ display: "flex", flexDirection: "column", gap: "32px", padding: "24px 32px" }}>
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: "32px",
+        padding: "24px 32px",
+      }}
+    >
       {ATTENDANCE_QUESTIONS.map(({ type, question }) => (
         <div className={styles.inlineQuestion} key={type}>
           <h3>{question}</h3>
diff --git a/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/RatingFormBody.tsx b/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/RatingFormBody.tsx
index ba2396de3..f4cba4518 100644
--- a/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/RatingFormBody.tsx
+++ b/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/RatingFormBody.tsx
@@ -63,9 +63,7 @@ export function RatingFormBody({
 }: RatingFormBodyProps) {
   return (
     <Flex direction="column">
-      <div
-        className={styles.mainSection}
-      >
+      <div className={styles.mainSection}>
         <Flex direction="column" style={{ gap: "32px", padding: "24px 0" }}>
           <div className={styles.formGroup}>
             <div className={styles.questionPair}>

From e4bb2d15ad591873760db2a6c774d2a13e102330 Mon Sep 17 00:00:00 2001
From: Henry Kim <henry1112200@gmail.com>
Date: Thu, 26 Mar 2026 15:55:04 -0700
Subject: [PATCH 03/34] fix

---
 apps/backend/src/modules/rating/controller.ts | 43 +++++++++++--------
 .../UserFeedbackModal.module.scss             |  8 +++-
 .../theme/src/components/Select/index.tsx     | 12 +++++-
 3 files changed, 42 insertions(+), 21 deletions(-)

diff --git a/apps/backend/src/modules/rating/controller.ts b/apps/backend/src/modules/rating/controller.ts
index 26b92a5d0..b0f3de78e 100644
--- a/apps/backend/src/modules/rating/controller.ts
+++ b/apps/backend/src/modules/rating/controller.ts
@@ -1013,21 +1013,28 @@ export const createRatings = async (
         ]);
       }
 
-      // Step 2: Upsert review if provided
-      if (review) {
-        await ReviewModel.findOneAndUpdate(
-          { createdBy: context.user._id, courseId },
-          {
-            text: review,
-            classId,
-            subject,
-            courseNumber,
-            semester,
-            year,
-            classNumber,
-          },
-          { upsert: true, session }
-        );
+      // Step 2: Upsert or delete review
+      if (review !== undefined) {
+        if (review.trim() === "") {
+          await ReviewModel.deleteOne(
+            { createdBy: context.user._id, courseId },
+            { session }
+          );
+        } else {
+          await ReviewModel.findOneAndUpdate(
+            { createdBy: context.user._id, courseId },
+            {
+              text: review,
+              classId,
+              subject,
+              courseNumber,
+              semester,
+              year,
+              classNumber,
+            },
+            { upsert: true, session }
+          );
+        }
       }
 
       // Step 3: Create all new ratings and increment their aggregated counts
@@ -1104,9 +1111,9 @@ export const deleteRatings = async (
   const session = await connection.startSession();
   try {
     await session.withTransaction(async () => {
-      // Delete review if exists
-      await ReviewModel.deleteOne(
-        { createdBy: context.user._id, courseId: existingRatings[0]?.courseId },
+      // Delete reviews for all affected courseIds
+      await ReviewModel.deleteMany(
+        { createdBy: context.user._id, courseId: { $in: Array.from(affectedCourseIds) } },
         { session }
       );
 
diff --git a/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/UserFeedbackModal.module.scss b/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/UserFeedbackModal.module.scss
index c2bd8c288..87742e0b1 100644
--- a/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/UserFeedbackModal.module.scss
+++ b/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/UserFeedbackModal.module.scss
@@ -46,7 +46,7 @@
 }
 
 .mainSection {
-  border-bottom: 1px solid var(--surface-border-color, rgba(0, 0, 0, 0.1));
+  border-bottom: 1px solid var(--border-color);
   width: 100%;
 }
 
@@ -86,6 +86,10 @@
     color: var(--paragraph-color);
     font-size: var(--text-14);
     white-space: nowrap;
+
+    @media (max-width: 480px) {
+      display: none;
+    }
   }
 }
 
@@ -132,7 +136,7 @@
   font-size: var(--font-sizes-2, 14px);
   font-family: inherit;
 
-  color: var(--text-secondary-color, #404040);
+  color: var(--heading-color);
   background: none;
   resize: vertical;
   box-sizing: border-box;
diff --git a/packages/theme/src/components/Select/index.tsx b/packages/theme/src/components/Select/index.tsx
index adf65fbdd..6176d6411 100644
--- a/packages/theme/src/components/Select/index.tsx
+++ b/packages/theme/src/components/Select/index.tsx
@@ -416,7 +416,17 @@ export function Select<T>({
             }}
           />
         )}
-        <NavArrowDown />
+        <div
+          style={{
+            borderLeft: "1px solid var(--border-color)",
+            paddingLeft: "12px",
+            display: "flex",
+            alignItems: "center",
+            height: "24px",
+          }}
+        >
+          <NavArrowDown />
+        </div>
       </Flex>
     </>
   );

From c8a8c84bf90fe33c0e11a57ce989b553076d04e4 Mon Sep 17 00:00:00 2001
From: Henry Kim <henry1112200@gmail.com>
Date: Thu, 26 Mar 2026 15:55:46 -0700
Subject: [PATCH 04/34] fix

---
 apps/backend/src/modules/rating/controller.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/apps/backend/src/modules/rating/controller.ts b/apps/backend/src/modules/rating/controller.ts
index b0f3de78e..83040c76b 100644
--- a/apps/backend/src/modules/rating/controller.ts
+++ b/apps/backend/src/modules/rating/controller.ts
@@ -1113,7 +1113,10 @@ export const deleteRatings = async (
     await session.withTransaction(async () => {
       // Delete reviews for all affected courseIds
       await ReviewModel.deleteMany(
-        { createdBy: context.user._id, courseId: { $in: Array.from(affectedCourseIds) } },
+        {
+          createdBy: context.user._id,
+          courseId: { $in: Array.from(affectedCourseIds) },
+        },
         { session }
       );
 

From 8c33dd762580ec223287f0783418bfb26f92ef2a Mon Sep 17 00:00:00 2001
From: Henry Kim <henry1112200@gmail.com>
Date: Fri, 27 Mar 2026 14:55:17 -0700
Subject: [PATCH 05/34] removed class selection

---
 .../UserFeedbackModal/RatingFormBody.tsx      | 39 +------------------
 .../Class/Ratings/UserFeedbackModal/index.tsx | 18 +--------
 .../UserFeedbackModal/useRatingFormState.ts   | 21 +++++-----
 .../src/components/Class/Ratings/index.tsx    | 14 +++----
 4 files changed, 18 insertions(+), 74 deletions(-)

diff --git a/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/RatingFormBody.tsx b/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/RatingFormBody.tsx
index f4cba4518..ea764673c 100644
--- a/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/RatingFormBody.tsx
+++ b/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/RatingFormBody.tsx
@@ -2,7 +2,6 @@ import { Dispatch, SetStateAction } from "react";
 
 import { Flex, Select } from "@repo/theme";
 
-import CourseSelect, { CourseOption } from "@/components/CourseSelect";
 import { Semester } from "@/lib/generated/graphql";
 
 import { MetricData } from "../metricsUtil";
@@ -20,44 +19,33 @@ interface Term {
 }
 
 interface QuestionNumbers {
-  classQuestionNumber: number;
   semesterQuestionNumber: number;
   ratingsStartNumber: number;
   attendanceStartNumber: number;
 }
 
 interface RatingFormBodyProps {
-  selectedCourse: CourseOption | null;
-  onCourseSelect: (course: CourseOption | null) => void;
-  onCourseClear: () => void;
+  selectedCourse: { subject: string; number: string } | null;
   selectedTerm: string | null;
   onTermSelect: (term: string | null) => void;
   termOptions: Term[];
   termOptionsLoading?: boolean;
   metricData: MetricData;
   setMetricData: Dispatch<SetStateAction<MetricData>>;
-  userRatedClasses?: Array<{ subject: string; courseNumber: string }>;
   questionNumbers: QuestionNumbers;
-  disableRatedCourses?: boolean;
-  lockedCourse?: CourseOption | null;
   review: string;
   setReview: (value: string) => void;
 }
 
 export function RatingFormBody({
   selectedCourse,
-  onCourseSelect,
-  onCourseClear,
   selectedTerm,
   onTermSelect,
   termOptions,
   termOptionsLoading = false,
   metricData,
   setMetricData,
-  userRatedClasses = [],
   questionNumbers,
-  disableRatedCourses = false,
-  lockedCourse = null,
   review,
   setReview,
 }: RatingFormBodyProps) {
@@ -65,27 +53,6 @@ export function RatingFormBody({
     <Flex direction="column">
       <div className={styles.mainSection}>
         <Flex direction="column" style={{ gap: "32px", padding: "24px 0" }}>
-          <div className={styles.formGroup}>
-            <div className={styles.questionPair}>
-              <h3>
-                Which class are you rating? <RequiredAsterisk />
-              </h3>
-              <div style={{ width: "100%" }}>
-                <CourseSelect
-                  selectedCourse={selectedCourse}
-                  onSelect={(course) => {
-                    onCourseSelect(course);
-                  }}
-                  onClear={onCourseClear}
-                  minimal={true}
-                  ratedCourses={userRatedClasses}
-                  disableRatedCourses={disableRatedCourses}
-                  lockedCourse={lockedCourse}
-                />
-              </div>
-            </div>
-          </div>
-
           <div className={styles.formGroup}>
             <div className={styles.questionPair}>
               <h3>
@@ -104,9 +71,7 @@ export function RatingFormBody({
                     if (Array.isArray(selectedOption)) onTermSelect(null);
                     else onTermSelect(selectedOption || null);
                   }}
-                  placeholder={
-                    selectedCourse ? "Select semester" : "Select a class first"
-                  }
+                  placeholder="Select semester"
                   emptyMessage="No semesters found."
                   clearable={true}
                   searchable={true}
diff --git a/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/index.tsx b/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/index.tsx
index 9e59e5906..a84968cb4 100644
--- a/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/index.tsx
+++ b/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/index.tsx
@@ -60,10 +60,9 @@ export function UserFeedbackModal({
   initialCourse = null,
   onSubmit,
   initialUserClass = null,
-  userRatedClasses,
+
   onSubmitPopupChange,
-  disableRatedCourses = true,
-  lockedCourse = null,
+
   onError,
 }: UserFeedbackModalProps) {
   const { data: termsData, loading: termsLoading } = useReadTerms();
@@ -351,14 +350,12 @@ export function UserFeedbackModal({
   // Calculate question numbers
   const questionNumbers = useMemo(() => {
     let counter = 1;
-    const classQuestion = counter++;
     const semesterQuestion = counter++;
     const ratingsStart = counter;
     counter += 3; // 3 rating questions
     const attendanceStart = counter;
 
     return {
-      classQuestionNumber: classQuestion,
       semesterQuestionNumber: semesterQuestion,
       ratingsStartNumber: ratingsStart,
       attendanceStartNumber: attendanceStart,
@@ -432,24 +429,13 @@ export function UserFeedbackModal({
           >
             <RatingFormBody
               selectedCourse={selectedCourse}
-              onCourseSelect={(course) => {
-                setSelectedCourse(course);
-                setSelectedTerm(null);
-              }}
-              onCourseClear={() => {
-                setSelectedCourse(null);
-                setSelectedTerm(null);
-              }}
               selectedTerm={selectedTerm}
               onTermSelect={setSelectedTerm}
               termOptions={termOptions}
               termOptionsLoading={isTermOptionsLoading}
               metricData={metricData}
               setMetricData={setMetricData}
-              userRatedClasses={userRatedClasses}
               questionNumbers={questionNumbers}
-              disableRatedCourses={disableRatedCourses}
-              lockedCourse={lockedCourse}
               review={review}
               setReview={setReview}
             />
diff --git a/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/useRatingFormState.ts b/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/useRatingFormState.ts
index 8e2e8f5a3..ac4d6353f 100644
--- a/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/useRatingFormState.ts
+++ b/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/useRatingFormState.ts
@@ -33,34 +33,31 @@ export function useRatingFormState({
     return isClassValid && isTermValid && areRatingsValid;
   }, [selectedCourse, selectedTerm, metricData]);
 
-  // Calculate progress: 7 fields total (class selection + 6 questions)
+  // Calculate progress: 6 fields (semester + 3 ratings + 2 attendance)
   const progress = useMemo(() => {
     let filledFields = 0;
-    const totalFields = 7;
+    const totalFields = 6;
 
-    // Field 1: Class selection
-    if (selectedCourse) filledFields++;
-
-    // Field 2: Semester selection
+    // Field 1: Semester selection
     if (selectedTerm && selectedTerm.length > 0) filledFields++;
 
-    // Field 3: Usefulness
+    // Field 2: Usefulness
     if (typeof metricData[MetricName.Usefulness] === "number") filledFields++;
 
-    // Field 4: Difficulty
+    // Field 3: Difficulty
     if (typeof metricData[MetricName.Difficulty] === "number") filledFields++;
 
-    // Field 5: Workload
+    // Field 4: Workload
     if (typeof metricData[MetricName.Workload] === "number") filledFields++;
 
-    // Field 6: Attendance
+    // Field 5: Attendance
     if (typeof metricData[MetricName.Attendance] === "number") filledFields++;
 
-    // Field 7: Recording
+    // Field 6: Recording
     if (typeof metricData[MetricName.Recording] === "number") filledFields++;
 
     return (filledFields / totalFields) * 100;
-  }, [selectedTerm, metricData, selectedCourse]);
+  }, [selectedTerm, metricData]);
 
   const reset = (
     newInitialMetricData?: MetricData,
diff --git a/apps/frontend/src/components/Class/Ratings/index.tsx b/apps/frontend/src/components/Class/Ratings/index.tsx
index 6193d8bae..bb43bdf39 100644
--- a/apps/frontend/src/components/Class/Ratings/index.tsx
+++ b/apps/frontend/src/components/Class/Ratings/index.tsx
@@ -675,15 +675,11 @@ export function RatingsContainer() {
         initialUserClass={userRatings}
         userRatedClasses={userRatedClasses}
         disableRatedCourses={!userRatings}
-        lockedCourse={
-          userRatings
-            ? {
-                subject: currentClass.subject,
-                number: currentClass.courseNumber,
-                courseId: "",
-              }
-            : null
-        }
+        lockedCourse={{
+          subject: currentClass.subject,
+          number: currentClass.courseNumber,
+          courseId: "",
+        }}
         onSubmitPopupChange={setIsSubmitRatingPopupOpen}
         onError={(error) => {
           const message = getRatingErrorMessage(error);

From 0df15bf283691108cf575841d910b48952b4b7a3 Mon Sep 17 00:00:00 2001
From: Henry Kim <henry1112200@gmail.com>
Date: Tue, 31 Mar 2026 14:43:05 -0700
Subject: [PATCH 06/34] added review to progress bar calculation

---
 .../Class/Ratings/UserFeedbackModal/useRatingFormState.ts  | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/useRatingFormState.ts b/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/useRatingFormState.ts
index ac4d6353f..9572d8fb6 100644
--- a/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/useRatingFormState.ts
+++ b/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/useRatingFormState.ts
@@ -36,7 +36,7 @@ export function useRatingFormState({
   // Calculate progress: 6 fields (semester + 3 ratings + 2 attendance)
   const progress = useMemo(() => {
     let filledFields = 0;
-    const totalFields = 6;
+    const totalFields = 7;
 
     // Field 1: Semester selection
     if (selectedTerm && selectedTerm.length > 0) filledFields++;
@@ -56,8 +56,11 @@ export function useRatingFormState({
     // Field 6: Recording
     if (typeof metricData[MetricName.Recording] === "number") filledFields++;
 
+    // Field 7: Review
+    if (review && review.trim().length > 0) filledFields++;
+
     return (filledFields / totalFields) * 100;
-  }, [selectedTerm, metricData]);
+  }, [selectedTerm, metricData, review]);
 
   const reset = (
     newInitialMetricData?: MetricData,

From ee66dcf3bc437c228f50534924d2fbab587f1eb2 Mon Sep 17 00:00:00 2001
From: Sam Bai <sam.bai@berkeley.edu>
Date: Sun, 12 Apr 2026 22:31:22 -0700
Subject: [PATCH 07/34] modify UserFeedbackModel when user has less than 3
 reviews (Previosuly did not put course subject/number in input data and did
 not allow for selection of class semester from the dropdown)

---
 apps/frontend/src/components/Class/index.tsx | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/apps/frontend/src/components/Class/index.tsx b/apps/frontend/src/components/Class/index.tsx
index 060a2bbf4..f4e6a7fed 100644
--- a/apps/frontend/src/components/Class/index.tsx
+++ b/apps/frontend/src/components/Class/index.tsx
@@ -915,6 +915,11 @@ export default function Class({
           onClose={handleUnlockModalClose}
           title="Unlock Ratings"
           subtitle={`Rate ${Math.max(unlockModalGoalCount, 1)} classes to unlock all other ratings.`}
+          initialCourse={{
+            subject: _class.subject,
+            number: _class.courseNumber,
+            courseId: ""
+          }}
           onSubmit={handleUnlockRatingSubmit}
           userRatedClasses={userRatedClasses}
           requiredRatingsCount={unlockModalGoalCount || 1}

From c9e6ef645fbbcd7c372d68c4c1f882dbc817f479 Mon Sep 17 00:00:00 2001
From: Sam Bai <sam.bai@berkeley.edu>
Date: Sun, 12 Apr 2026 23:26:12 -0700
Subject: [PATCH 08/34] add frontend for ratings (changed from single ratings
 to having ratingTitle and ratingContent to match design)

---
 .../UserFeedbackModal/FeedbackForm.tsx        | 38 ++++++++++----
 .../UserFeedbackModal/RatingFormBody.tsx      | 19 +++++--
 .../UserFeedbackModal.module.scss             | 38 ++++++++++++++
 .../Class/Ratings/UserFeedbackModal/index.tsx | 50 ++++++++++++++++---
 .../UserFeedbackModal/useRatingFormState.ts   | 23 ++++++---
 5 files changed, 139 insertions(+), 29 deletions(-)

diff --git a/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/FeedbackForm.tsx b/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/FeedbackForm.tsx
index 715736613..275388bdb 100644
--- a/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/FeedbackForm.tsx
+++ b/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/FeedbackForm.tsx
@@ -136,22 +136,40 @@ export function RatingsForm({
 }
 
 interface ReviewFormProps {
-  review: string;
-  setReview: (value: string) => void;
+  reviewTitle: string;
+  setReviewTitle: (value: string) => void;
+  reviewContent: string;
+  setReviewContent: (value: string) => void;
 }
 
-export function ReviewForm({ review, setReview }: ReviewFormProps) {
+export function ReviewForm({
+  reviewTitle,
+  setReviewTitle,
+  reviewContent,
+  setReviewContent,
+}: ReviewFormProps) {
   return (
     <div className={styles.formGroup}>
       <div className={styles.questionPair}>
         <h3>Write a Review</h3>
-        <textarea
-          className={styles.reviewTextarea}
-          value={review}
-          onChange={(e) => setReview(e.target.value)}
-          placeholder="Share details of your experience in the course"
-          rows={4}
-        />
+        <div className={styles.reviewBox} role="group" aria-label="Review">
+          <textarea
+            className={`${styles.reviewTextarea} ${styles.reviewTitleTextarea}`}
+            value={reviewTitle}
+            onChange={(e) => setReviewTitle(e.target.value)}
+            placeholder="Title"
+            rows={1}
+            aria-label="Review title"
+          />
+          <textarea
+            className={`${styles.reviewTextarea} ${styles.reviewBoxContent}`}
+            value={reviewContent}
+            onChange={(e) => setReviewContent(e.target.value)}
+            placeholder="Share details of your experience in the course"
+            rows={4}
+            aria-label="Review details"
+          />
+        </div>
         <p className={styles.reviewDisclaimer}>
           Your rating could be removed if you use profanity or derogatory terms.
         </p>
diff --git a/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/RatingFormBody.tsx b/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/RatingFormBody.tsx
index ea764673c..5ab11882b 100644
--- a/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/RatingFormBody.tsx
+++ b/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/RatingFormBody.tsx
@@ -33,8 +33,10 @@ interface RatingFormBodyProps {
   metricData: MetricData;
   setMetricData: Dispatch<SetStateAction<MetricData>>;
   questionNumbers: QuestionNumbers;
-  review: string;
-  setReview: (value: string) => void;
+  reviewTitle: string;
+  setReviewTitle: (value: string) => void;
+  reviewContent: string;
+  setReviewContent: (value: string) => void;
 }
 
 export function RatingFormBody({
@@ -46,8 +48,10 @@ export function RatingFormBody({
   metricData,
   setMetricData,
   questionNumbers,
-  review,
-  setReview,
+  reviewTitle,
+  setReviewTitle,
+  reviewContent,
+  setReviewContent,
 }: RatingFormBodyProps) {
   return (
     <Flex direction="column">
@@ -85,7 +89,12 @@ export function RatingFormBody({
             setMetricData={setMetricData}
             startQuestionNumber={questionNumbers.ratingsStartNumber}
           />
-          <ReviewForm review={review} setReview={setReview} />
+          <ReviewForm
+            reviewTitle={reviewTitle}
+            setReviewTitle={setReviewTitle}
+            reviewContent={reviewContent}
+            setReviewContent={setReviewContent}
+          />
         </Flex>
       </div>
 
diff --git a/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/UserFeedbackModal.module.scss b/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/UserFeedbackModal.module.scss
index 87742e0b1..82ac14eda 100644
--- a/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/UserFeedbackModal.module.scss
+++ b/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/UserFeedbackModal.module.scss
@@ -155,6 +155,44 @@
   }
 }
 
+/* Smaller height for review title field */
+.reviewTitleTextarea {
+  /* Override `reviewTextarea` to look like a single-box title row */
+  border: none;
+  border-radius: 0;
+  border-bottom: 1px solid var(--border-color);
+  overflow: hidden;
+  resize: none;
+  min-height: 44px;
+  max-height: 96px;
+
+  &:focus {
+    border-color: var(--border-color);
+  }
+}
+
+/* Single-box wrapper for title + content */
+.reviewBox {
+  width: 100%;
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+  overflow: hidden;
+  box-sizing: border-box;
+
+  &:focus-within {
+    border-color: var(--blue-500);
+  }
+}
+
+.reviewBoxContent {
+  border: none;
+  border-radius: 0;
+
+  &:focus {
+    border-color: var(--border-color);
+  }
+}
+
 .reviewDisclaimer.reviewDisclaimer {
   color: var(--text-paragraph-color, #737373);
   font-feature-settings: "liga" off;
diff --git a/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/index.tsx b/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/index.tsx
index a84968cb4..2a66761ce 100644
--- a/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/index.tsx
+++ b/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/index.tsx
@@ -18,6 +18,19 @@ import styles from "./UserFeedbackModal.module.scss";
 import { useRatingFormState } from "./useRatingFormState";
 import { useTermFiltering } from "./useTermFiltering";
 
+/** Merges title + body for the existing single-string `review` API until backend supports split fields. */
+function buildCombinedReview(
+  reviewTitle: string,
+  reviewContent: string
+): string | undefined {
+  const t = reviewTitle.trim();
+  const c = reviewContent.trim();
+  if (!t && !c) return undefined;
+  if (!t) return c;
+  if (!c) return t;
+  return `${t}\n\n${c}`;
+}
+
 interface Term {
   value: string;
   label: string;
@@ -130,8 +143,10 @@ export function UserFeedbackModal({
     setIsSubmitting,
     progress,
     reset,
-    review,
-    setReview,
+    reviewTitle,
+    setReviewTitle,
+    reviewContent,
+    setReviewContent,
   } = formState;
 
   const overallProgress = useMemo(
@@ -261,8 +276,27 @@ export function UserFeedbackModal({
       typeof metricData[MetricName.Difficulty] === "number" &&
       typeof metricData[MetricName.Workload] === "number";
 
-    return isCourseValid && isTermValid && areRatingsValid && hasChanges;
-  }, [selectedTerm, metricData, hasChanges, selectedCourse]);
+    const trimmedTitle = reviewTitle.trim();
+    const trimmedContent = reviewContent.trim();
+    const isReviewPairValid =
+      (trimmedTitle.length === 0 && trimmedContent.length === 0) ||
+      (trimmedTitle.length > 0 && trimmedContent.length > 0);
+
+    return (
+      isCourseValid &&
+      isTermValid &&
+      areRatingsValid &&
+      hasChanges &&
+      isReviewPairValid
+    );
+  }, [
+    selectedTerm,
+    metricData,
+    hasChanges,
+    selectedCourse,
+    reviewTitle,
+    reviewContent,
+  ]);
 
   const handleSubmit = async (e: FormEvent) => {
     e.preventDefault();
@@ -299,7 +333,7 @@ export function UserFeedbackModal({
           courseNumber: selectedCourse.number,
           classNumber,
         },
-        review || undefined
+        buildCombinedReview(reviewTitle, reviewContent)
       );
 
       const isLastRating = currentRatingIndex >= totalRatings - 1;
@@ -436,8 +470,10 @@ export function UserFeedbackModal({
               metricData={metricData}
               setMetricData={setMetricData}
               questionNumbers={questionNumbers}
-              review={review}
-              setReview={setReview}
+              reviewTitle={reviewTitle}
+              setReviewTitle={setReviewTitle}
+              reviewContent={reviewContent}
+              setReviewContent={setReviewContent}
             />
           </motion.div>
         </AnimatePresence>
diff --git a/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/useRatingFormState.ts b/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/useRatingFormState.ts
index 9572d8fb6..ba4594b87 100644
--- a/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/useRatingFormState.ts
+++ b/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/useRatingFormState.ts
@@ -21,7 +21,8 @@ export function useRatingFormState({
     initialCourse
   );
   const [isSubmitting, setIsSubmitting] = useState(false);
-  const [review, setReview] = useState<string>("");
+  const [reviewTitle, setReviewTitle] = useState<string>("");
+  const [reviewContent, setReviewContent] = useState<string>("");
 
   const isFormValid = useMemo(() => {
     const isClassValid = selectedCourse !== null;
@@ -56,11 +57,16 @@ export function useRatingFormState({
     // Field 6: Recording
     if (typeof metricData[MetricName.Recording] === "number") filledFields++;
 
-    // Field 7: Review
-    if (review && review.trim().length > 0) filledFields++;
+    // Field 7: Review (title and/or body)
+    if (
+      reviewTitle.trim().length > 0 ||
+      reviewContent.trim().length > 0
+    ) {
+      filledFields++;
+    }
 
     return (filledFields / totalFields) * 100;
-  }, [selectedTerm, metricData, review]);
+  }, [selectedTerm, metricData, reviewTitle, reviewContent]);
 
   const reset = (
     newInitialMetricData?: MetricData,
@@ -70,7 +76,8 @@ export function useRatingFormState({
     setSelectedTerm(null);
     setSelectedCourse(newInitialCourse ?? initialCourse ?? null);
     setIsSubmitting(false);
-    setReview("");
+    setReviewTitle("");
+    setReviewContent("");
   };
 
   return {
@@ -85,7 +92,9 @@ export function useRatingFormState({
     isFormValid,
     progress,
     reset,
-    review,
-    setReview,
+    reviewTitle,
+    setReviewTitle,
+    reviewContent,
+    setReviewContent,
   };
 }

From 2dc2ade38ebf9250c4729749a8e051db18bed120 Mon Sep 17 00:00:00 2001
From: Sam Bai <sam.bai@berkeley.edu>
Date: Mon, 13 Apr 2026 00:05:59 -0700
Subject: [PATCH 09/34] update old review model to soft delete

---
 apps/backend/src/modules/rating/controller.ts | 94 +++++++++++++++----
 apps/backend/src/modules/rating/resolver.ts   |  2 +-
 packages/common/src/models/review.ts          | 13 ++-
 3 files changed, 88 insertions(+), 21 deletions(-)

diff --git a/apps/backend/src/modules/rating/controller.ts b/apps/backend/src/modules/rating/controller.ts
index 83040c76b..420c3d680 100644
--- a/apps/backend/src/modules/rating/controller.ts
+++ b/apps/backend/src/modules/rating/controller.ts
@@ -936,7 +936,7 @@ export const createRatings = async (
   courseNumber: string,
   classNumber: string,
   metrics: MetricInput[],
-  review?: string
+  review?: string | null
 ) => {
   if (!context.user._id) {
     throw new GraphQLError("Unauthorized", {
@@ -1013,27 +1013,85 @@ export const createRatings = async (
         ]);
       }
 
-      // Step 2: Upsert or delete review
+      // Step 2: Soft-delete and create review snapshots
+      // `valid` identifies the latest active review for a user/course.
       if (review !== undefined) {
-        if (review.trim() === "") {
-          await ReviewModel.deleteOne(
-            { createdBy: context.user._id, courseId },
+        const activeReviewFilter = {
+          createdBy: context.user._id,
+          courseId,
+          $or: [{ valid: true }, { valid: { $exists: false } }],
+        };
+
+        if (review === null || review.trim() === "") {
+          await ReviewModel.updateMany(
+            activeReviewFilter,
+            { $set: { valid: false } },
             { session }
           );
         } else {
-          await ReviewModel.findOneAndUpdate(
-            { createdBy: context.user._id, courseId },
-            {
-              text: review,
-              classId,
-              subject,
-              courseNumber,
-              semester,
-              year,
-              classNumber,
-            },
-            { upsert: true, session }
-          );
+          const normalizedReview = review.trim();
+          const allReviews = await ReviewModel.find({
+            createdBy: context.user._id,
+            courseId,
+          }).session(session);
+
+          const reusableReview =
+            allReviews.find(
+              (existingReview) =>
+                (existingReview.text ?? "").trim() === normalizedReview
+            ) ?? null;
+
+          if (reusableReview) {
+            await ReviewModel.updateMany(
+              {
+                ...activeReviewFilter,
+                _id: { $ne: reusableReview._id },
+              },
+              { $set: { valid: false } },
+              { session }
+            );
+
+            await ReviewModel.updateOne(
+              { _id: reusableReview._id },
+              {
+                $set: {
+                  valid: true,
+                  text: review,
+                  classId,
+                  subject,
+                  courseNumber,
+                  semester,
+                  year,
+                  classNumber,
+                },
+              },
+              { session }
+            );
+          } else {
+            await ReviewModel.updateMany(
+              activeReviewFilter,
+              { $set: { valid: false } },
+              { session }
+            );
+
+            await ReviewModel.create(
+              [
+                {
+                  createdBy: context.user._id,
+                  courseId,
+                  text: review,
+                  classId,
+                  subject,
+                  courseNumber,
+                  semester,
+                  year,
+                  classNumber,
+                  valid: true,
+                },
+              ],
+              { session }
+            );
+          }
         }
       }
 
diff --git a/apps/backend/src/modules/rating/resolver.ts b/apps/backend/src/modules/rating/resolver.ts
index 2e8681e85..c8379c57d 100644
--- a/apps/backend/src/modules/rating/resolver.ts
+++ b/apps/backend/src/modules/rating/resolver.ts
@@ -153,7 +153,7 @@ const resolvers: RatingModule.Resolvers = {
           courseNumber,
           classNumber,
           metrics,
-          review ?? undefined
+          review
         );
       } catch (error: unknown) {
         // Re-throw GraphQLErrors as is
diff --git a/packages/common/src/models/review.ts b/packages/common/src/models/review.ts
index 0f2f448c8..d02902833 100644
--- a/packages/common/src/models/review.ts
+++ b/packages/common/src/models/review.ts
@@ -42,14 +42,23 @@ const reviewSchema = new Schema(
       type: String,
       required: false,
     },
+    valid: {
+      type: Boolean,
+      required: true,
+      default: true,
+    },
   },
   {
     timestamps: true,
   }
 );
 
-// Unique review per user per course
-reviewSchema.index({ createdBy: 1, courseId: 1 }, { unique: true });
+// Only one currently valid review per user per course.
+// Historical invalid reviews are preserved for soft-delete behavior.
+reviewSchema.index(
+  { createdBy: 1, courseId: 1 },
+  { unique: true, partialFilterExpression: { valid: true } }
+);
 
 export const ReviewModel = mongoose.model("review", reviewSchema);
 export type ReviewType = InferSchemaType<typeof reviewSchema>;

From 321fe8f4b19e9854c12e31fbfdfe3612a6b4c6a7 Mon Sep 17 00:00:00 2001
From: Sam Bai <sam.bai@berkeley.edu>
Date: Mon, 13 Apr 2026 08:46:22 -0700
Subject: [PATCH 10/34] update backend reviews (from single text -> reviewTitle
 and reviewContent)

---
 apps/backend/src/modules/rating/controller.ts | 22 ++++++++++-----
 apps/backend/src/modules/rating/resolver.ts   | 19 +++++++++++--
 .../src/app/Profile/Ratings/index.tsx         | 28 +++++++++++++++----
 .../Class/Ratings/UserFeedbackModal/index.tsx | 19 +++----------
 .../src/components/Class/Ratings/index.tsx    | 11 ++++++--
 .../Class/Ratings/ratingMutations.ts          |  9 ++++--
 apps/frontend/src/lib/api/ratings.ts          |  6 ++--
 packages/common/src/models/review.ts          |  6 +++-
 packages/gql-typedefs/rating.ts               |  3 +-
 9 files changed, 84 insertions(+), 39 deletions(-)

diff --git a/apps/backend/src/modules/rating/controller.ts b/apps/backend/src/modules/rating/controller.ts
index 420c3d680..fba0ccf7e 100644
--- a/apps/backend/src/modules/rating/controller.ts
+++ b/apps/backend/src/modules/rating/controller.ts
@@ -936,7 +936,8 @@ export const createRatings = async (
   courseNumber: string,
   classNumber: string,
   metrics: MetricInput[],
-  review?: string | null
+  reviewTitle?: string | null,
+  reviewContent?: string | null
 ) => {
   if (!context.user._id) {
     throw new GraphQLError("Unauthorized", {
@@ -1015,21 +1016,25 @@ export const createRatings = async (
 
       // Step 2: Soft-delete and create review snapshots
       // `valid` identifies the latest active review for a user/course.
-      if (review !== undefined) {
+      if (reviewTitle !== undefined || reviewContent !== undefined) {
         const activeReviewFilter = {
           createdBy: context.user._id,
           courseId,
           $or: [{ valid: true }, { valid: { $exists: false } }],
         };
 
-        if (review === null || review.trim() === "") {
+        const normalizedTitle = (reviewTitle ?? "").trim();
+        const normalizedContent = (reviewContent ?? "").trim();
+        const hasReviewPayload =
+          normalizedTitle.length > 0 || normalizedContent.length > 0;
+
+        if (!hasReviewPayload) {
           await ReviewModel.updateMany(
             activeReviewFilter,
             { $set: { valid: false } },
             { session }
           );
         } else {
-          const normalizedReview = review.trim();
           const allReviews = await ReviewModel.find({
             createdBy: context.user._id,
             courseId,
@@ -1038,7 +1043,8 @@ export const createRatings = async (
           const reusableReview =
             allReviews.find(
               (existingReview) =>
-                (existingReview.text ?? "").trim() === normalizedReview
+                (existingReview.reviewTitle ?? "").trim() === normalizedTitle &&
+                (existingReview.reviewContent ?? "").trim() === normalizedContent
             ) ?? null;
 
           if (reusableReview) {
@@ -1056,7 +1062,8 @@ export const createRatings = async (
               {
                 $set: {
                   valid: true,
-                  text: review,
+                  reviewTitle: normalizedTitle,
+                  reviewContent: normalizedContent,
                   classId,
                   subject,
                   courseNumber,
@@ -1079,7 +1086,8 @@ export const createRatings = async (
                 {
                   createdBy: context.user._id,
                   courseId,
-                  text: review,
+                  reviewTitle: normalizedTitle,
+                  reviewContent: normalizedContent,
                   classId,
                   subject,
                   courseNumber,
diff --git a/apps/backend/src/modules/rating/resolver.ts b/apps/backend/src/modules/rating/resolver.ts
index c8379c57d..49f4c2762 100644
--- a/apps/backend/src/modules/rating/resolver.ts
+++ b/apps/backend/src/modules/rating/resolver.ts
@@ -141,10 +141,24 @@ const resolvers: RatingModule.Resolvers = {
   Mutation: {
     createRatings: async (
       _,
-      { year, semester, subject, courseNumber, classNumber, metrics, review },
+      args,
       context
     ) => {
       try {
+        const {
+          year,
+          semester,
+          subject,
+          courseNumber,
+          classNumber,
+          metrics,
+          reviewTitle,
+          reviewContent,
+        } = args as typeof args & {
+          reviewTitle?: string | null;
+          reviewContent?: string | null;
+        };
+
         return await createRatings(
           context,
           Number(year),
@@ -153,7 +167,8 @@ const resolvers: RatingModule.Resolvers = {
           courseNumber,
           classNumber,
           metrics,
-          review
+          reviewTitle,
+          reviewContent
         );
       } catch (error: unknown) {
         // Re-throw GraphQLErrors as is
diff --git a/apps/frontend/src/app/Profile/Ratings/index.tsx b/apps/frontend/src/app/Profile/Ratings/index.tsx
index 1ca6e9241..601f15eb7 100644
--- a/apps/frontend/src/app/Profile/Ratings/index.tsx
+++ b/apps/frontend/src/app/Profile/Ratings/index.tsx
@@ -199,7 +199,8 @@ export default function Ratings() {
         courseNumber: string;
         classNumber: string;
       },
-      review?: string
+      reviewTitle?: string,
+      reviewContent?: string
     ) => {
       if (!ratingForEdit) return;
 
@@ -222,7 +223,8 @@ export default function Ratings() {
           number: courseInfo.classNumber,
         },
         refetchQueries: buildRefetchQueries(refetchTarget),
-        review,
+        reviewTitle,
+        reviewContent,
       });
     },
     [ratingForEdit, createRatingsMutation, buildRefetchQueries]
@@ -237,7 +239,8 @@ export default function Ratings() {
         courseNumber: string;
         classNumber: string;
       },
-      review?: string
+      reviewTitle?: string,
+      reviewContent?: string
     ) => {
       const refetchTarget = {
         subject: courseInfo.subject,
@@ -257,7 +260,8 @@ export default function Ratings() {
           number: courseInfo.classNumber,
         },
         refetchQueries: buildRefetchQueries(refetchTarget),
-        review,
+        reviewTitle,
+        reviewContent,
       });
     },
     [createRatingsMutation, buildRefetchQueries]
@@ -348,8 +352,20 @@ export default function Ratings() {
               : null
           }
           availableTerms={availableTerms}
-          onSubmit={async (metricValues, termInfo, courseInfo, review) => {
-            await handleSubmitEdit(metricValues, termInfo, courseInfo, review);
+          onSubmit={async (
+            metricValues,
+            termInfo,
+            courseInfo,
+            reviewTitle,
+            reviewContent
+          ) => {
+            await handleSubmitEdit(
+              metricValues,
+              termInfo,
+              courseInfo,
+              reviewTitle,
+              reviewContent
+            );
           }}
           initialUserClass={ratingForEdit}
           onSubmitPopupChange={setIsEditThankYouOpen}
diff --git a/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/index.tsx b/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/index.tsx
index 2a66761ce..a50fc4d12 100644
--- a/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/index.tsx
+++ b/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/index.tsx
@@ -18,19 +18,6 @@ import styles from "./UserFeedbackModal.module.scss";
 import { useRatingFormState } from "./useRatingFormState";
 import { useTermFiltering } from "./useTermFiltering";
 
-/** Merges title + body for the existing single-string `review` API until backend supports split fields. */
-function buildCombinedReview(
-  reviewTitle: string,
-  reviewContent: string
-): string | undefined {
-  const t = reviewTitle.trim();
-  const c = reviewContent.trim();
-  if (!t && !c) return undefined;
-  if (!t) return c;
-  if (!c) return t;
-  return `${t}\n\n${c}`;
-}
-
 interface Term {
   value: string;
   label: string;
@@ -52,7 +39,8 @@ interface UserFeedbackModalProps {
     metricData: MetricData,
     termInfo: { semester: Semester; year: number },
     courseInfo: { subject: string; courseNumber: string; classNumber: string },
-    review?: string
+    reviewTitle?: string,
+    reviewContent?: string
   ) => Promise<void>;
   initialUserClass?: IUserRatingClass | null;
   userRatedClasses?: Array<{ subject: string; courseNumber: string }>;
@@ -333,7 +321,8 @@ export function UserFeedbackModal({
           courseNumber: selectedCourse.number,
           classNumber,
         },
-        buildCombinedReview(reviewTitle, reviewContent)
+        reviewTitle || undefined,
+        reviewContent || undefined
       );
 
       const isLastRating = currentRatingIndex >= totalRatings - 1;
diff --git a/apps/frontend/src/components/Class/Ratings/index.tsx b/apps/frontend/src/components/Class/Ratings/index.tsx
index bb43bdf39..ecd77d6e2 100644
--- a/apps/frontend/src/components/Class/Ratings/index.tsx
+++ b/apps/frontend/src/components/Class/Ratings/index.tsx
@@ -653,7 +653,13 @@ export function RatingsContainer() {
           courseId: "",
         }}
         availableTerms={availableTerms}
-        onSubmit={async (metricValues, termInfo, courseInfo, review) => {
+        onSubmit={async (
+          metricValues,
+          termInfo,
+          courseInfo,
+          reviewTitle,
+          reviewContent
+        ) => {
           await submitRatingMutation({
             metricValues,
             termInfo,
@@ -664,7 +670,8 @@ export function RatingsContainer() {
               number: courseInfo.classNumber,
             },
             refetchQueries: [],
-            review,
+            reviewTitle,
+            reviewContent,
           });
           await Promise.all([
             refetchAllRatings(),
diff --git a/apps/frontend/src/components/Class/Ratings/ratingMutations.ts b/apps/frontend/src/components/Class/Ratings/ratingMutations.ts
index 4190d4a68..d6a9a688f 100644
--- a/apps/frontend/src/components/Class/Ratings/ratingMutations.ts
+++ b/apps/frontend/src/components/Class/Ratings/ratingMutations.ts
@@ -35,7 +35,8 @@ interface SubmitRatingOptions {
   >;
   classIdentifiers: ClassIdentifiers;
   refetchQueries?: RefetchQuery[];
-  review?: string;
+  reviewTitle?: string;
+  reviewContent?: string;
 }
 
 export async function submitRating({
@@ -44,7 +45,8 @@ export async function submitRating({
   createRatingsMutation,
   classIdentifiers,
   refetchQueries = [],
-  review,
+  reviewTitle,
+  reviewContent,
 }: SubmitRatingOptions) {
   // Validate required metrics are present
   const missingRequiredMetrics = REQUIRED_METRICS.filter(
@@ -77,7 +79,8 @@ export async function submitRating({
       year: termInfo.year,
       classNumber: classIdentifiers.number,
       metrics,
-      review,
+      reviewTitle,
+      reviewContent,
     },
     refetchQueries,
     awaitRefetchQueries: true,
diff --git a/apps/frontend/src/lib/api/ratings.ts b/apps/frontend/src/lib/api/ratings.ts
index 923a61d2f..f583f6155 100644
--- a/apps/frontend/src/lib/api/ratings.ts
+++ b/apps/frontend/src/lib/api/ratings.ts
@@ -65,7 +65,8 @@ export const CREATE_RATINGS = gql`
     $year: Int!
     $classNumber: String!
     $metrics: [RatingMetricInput!]!
-    $review: String
+    $reviewTitle: String
+    $reviewContent: String
   ) {
     createRatings(
       subject: $subject
@@ -74,7 +75,8 @@ export const CREATE_RATINGS = gql`
       year: $year
       classNumber: $classNumber
       metrics: $metrics
-      review: $review
+      reviewTitle: $reviewTitle
+      reviewContent: $reviewContent
     )
   }
 `;
diff --git a/packages/common/src/models/review.ts b/packages/common/src/models/review.ts
index d02902833..788cbf865 100644
--- a/packages/common/src/models/review.ts
+++ b/packages/common/src/models/review.ts
@@ -38,7 +38,11 @@ const reviewSchema = new Schema(
       type: String,
       required: true,
     },
-    text: {
+    reviewTitle: {
+      type: String,
+      required: false,
+    },
+    reviewContent: {
       type: String,
       required: false,
     },
diff --git a/packages/gql-typedefs/rating.ts b/packages/gql-typedefs/rating.ts
index d5e98ee04..5fce29a71 100644
--- a/packages/gql-typedefs/rating.ts
+++ b/packages/gql-typedefs/rating.ts
@@ -199,7 +199,8 @@ export const ratingTypeDef = gql`
       classNumber: String!
 
       metrics: [RatingMetricInput!]!
-      review: String
+      reviewTitle: String
+      reviewContent: String
     ): Boolean! @auth
 
     deleteRatings(subject: String!, courseNumber: String!): Boolean! @auth

From 4e4083a2f98b3cf2cdb47d590e532c76b0cba8c5 Mon Sep 17 00:00:00 2001
From: Sam Bai <sam.bai@berkeley.edu>
Date: Mon, 13 Apr 2026 09:46:57 -0700
Subject: [PATCH 11/34] add GET_CLASS_REVIEWS and GET_CLASS_RATINGS as addional
 queries rather than just the aggregated ratings

---
 apps/backend/src/modules/rating/controller.ts | 73 +++++++++++++++++++
 apps/backend/src/modules/rating/resolver.ts   | 51 +++++++++++++
 apps/frontend/src/lib/api/ratings.ts          | 49 +++++++++++++
 packages/gql-typedefs/rating.ts               | 21 ++++++
 packages/shared/ratingsConfig.ts              |  2 +-
 5 files changed, 195 insertions(+), 1 deletion(-)

diff --git a/apps/backend/src/modules/rating/controller.ts b/apps/backend/src/modules/rating/controller.ts
index fba0ccf7e..872bb9302 100644
--- a/apps/backend/src/modules/rating/controller.ts
+++ b/apps/backend/src/modules/rating/controller.ts
@@ -1256,3 +1256,76 @@ export const getAllRatings = async () => {
         : new Date().toISOString(),
   }));
 };
+
+export const getClassRatings = async (subject: string, courseNumber: string) => {
+  const ratings = await RatingModel.find({ subject, courseNumber }).lean();
+  const shadowBannedCourseIds = await getShadowBannedCourseIds();
+  const crossListedShadowBanEnabled = isShadowBanCrossListedEnabled();
+
+  const visibleRatings = ratings.filter((rating) => {
+    if (isSubjectShadowBanned(rating.subject)) {
+      return false;
+    }
+
+    if (
+      crossListedShadowBanEnabled &&
+      typeof rating.courseId === "string" &&
+      shadowBannedCourseIds.has(rating.courseId)
+    ) {
+      return false;
+    }
+
+    return true;
+  });
+
+  return visibleRatings.map((rating) => ({
+    anonymousUserId: anonymizeUserId(rating.createdBy),
+    subject: rating.subject,
+    courseNumber: rating.courseNumber,
+    semester: rating.semester as Semester,
+    year: rating.year,
+    classNumber: rating.classNumber,
+    metricName: rating.metricName as MetricName,
+    value: rating.value,
+    createdAt:
+      "createdAt" in rating && rating.createdAt instanceof Date
+        ? rating.createdAt.toISOString()
+        : new Date().toISOString(),
+  }));
+};
+
+export const getClassReviews = async (
+  subject: string,
+  courseNumber: string
+) => {
+  const reviews = await ReviewModel.find({
+    subject,
+    courseNumber,
+    valid: true,
+    $or: [
+      { reviewTitle: { $exists: true, $ne: "" } },
+      { reviewContent: { $exists: true, $ne: "" } },
+    ],
+  })
+    .sort({ updatedAt: -1 })
+    .lean();
+
+  return reviews.map((review) => ({
+    anonymousUserId: anonymizeUserId(review.createdBy),
+    subject: review.subject,
+    courseNumber: review.courseNumber,
+    semester: review.semester as Semester,
+    year: review.year,
+    classNumber: review.classNumber,
+    reviewTitle: review.reviewTitle ?? null,
+    reviewContent: review.reviewContent ?? null,
+    createdAt:
+      "createdAt" in review && review.createdAt instanceof Date
+        ? review.createdAt.toISOString()
+        : new Date(0).toISOString(),
+    updatedAt:
+      "updatedAt" in review && review.updatedAt instanceof Date
+        ? review.updatedAt.toISOString()
+        : new Date(0).toISOString(),
+  }));
+};
diff --git a/apps/backend/src/modules/rating/resolver.ts b/apps/backend/src/modules/rating/resolver.ts
index 49f4c2762..8bdecb835 100644
--- a/apps/backend/src/modules/rating/resolver.ts
+++ b/apps/backend/src/modules/rating/resolver.ts
@@ -5,6 +5,8 @@ import {
   deleteRatings,
   getAllRatings,
   getClassAggregatedRatings,
+  getClassRatings,
+  getClassReviews,
   getSemestersWithRatings,
   getUserClassRatings,
   getUserRatings,
@@ -137,6 +139,55 @@ const resolvers: RatingModule.Resolvers = {
         );
       }
     },
+
+    // @ts-expect-error Added to SDL; backend codegen needs to be re-run.
+    classRatings: async (
+      _: unknown,
+      { subject, courseNumber }: { subject: string; courseNumber: string }
+    ) => {
+      try {
+        return await getClassRatings(subject, courseNumber);
+      } catch (error: unknown) {
+        if (error instanceof GraphQLError) {
+          throw error;
+        }
+        throw new GraphQLError(
+          typeof error === "object" && error !== null && "message" in error
+            ? String(error.message)
+            : "An unexpected error occurred",
+          {
+            extensions: { code: "INTERNAL_SERVER_ERROR" },
+          }
+        );
+      }
+    },
+
+    classReviews: async (
+      _: unknown,
+      {
+        subject,
+        courseNumber,
+      }: {
+        subject: string;
+        courseNumber: string;
+      }
+    ) => {
+      try {
+        return await getClassReviews(subject, courseNumber);
+      } catch (error: unknown) {
+        if (error instanceof GraphQLError) {
+          throw error;
+        }
+        throw new GraphQLError(
+          typeof error === "object" && error !== null && "message" in error
+            ? String(error.message)
+            : "An unexpected error occurred",
+          {
+            extensions: { code: "INTERNAL_SERVER_ERROR" },
+          }
+        );
+      }
+    },
   },
   Mutation: {
     createRatings: async (
diff --git a/apps/frontend/src/lib/api/ratings.ts b/apps/frontend/src/lib/api/ratings.ts
index f583f6155..97cd1836f 100644
--- a/apps/frontend/src/lib/api/ratings.ts
+++ b/apps/frontend/src/lib/api/ratings.ts
@@ -187,4 +187,53 @@ export const GET_CLASS_RATINGS_DATA = gql`
   }
 `;
 
+export const GET_CLASS_REVIEWS = gql`
+  query GetClassReviews($subject: String!, $courseNumber: String!) {
+    classReviews(subject: $subject, courseNumber: $courseNumber) {
+      anonymousUserId
+      subject
+      courseNumber
+      semester
+      year
+      classNumber
+      reviewTitle
+      reviewContent
+      createdAt
+      updatedAt
+    }
+  }
+`;
+
+export const GET_ALL_RATINGS = gql`
+  query GetAllRatings {
+    allRatings {
+      anonymousUserId
+      subject
+      courseNumber
+      semester
+      year
+      classNumber
+      metricName
+      value
+      createdAt
+    }
+  }
+`;
+
+export const GET_CLASS_RATINGS = gql`
+  query GetClassRatings($subject: String!, $courseNumber: String!) {
+    classRatings(subject: $subject, courseNumber: $courseNumber) {
+      anonymousUserId
+      subject
+      courseNumber
+      semester
+      year
+      classNumber
+      metricName
+      value
+      createdAt
+    }
+  }
+`;
+
 export type IUserRatings = NonNullable<GetUserRatingsQuery["userRatings"]>;
diff --git a/packages/gql-typedefs/rating.ts b/packages/gql-typedefs/rating.ts
index 5fce29a71..baf92ddfc 100644
--- a/packages/gql-typedefs/rating.ts
+++ b/packages/gql-typedefs/rating.ts
@@ -99,6 +99,22 @@ export const ratingTypeDef = gql`
     createdAt: String!
   }
 
+  """
+  Public review payload for a course across terms/classes.
+  """
+  type ClassReview @cacheControl(maxAge: 60) {
+    anonymousUserId: String!
+    subject: String!
+    courseNumber: String!
+    semester: Semester!
+    year: Int!
+    classNumber: String!
+    reviewTitle: String
+    reviewContent: String
+    createdAt: String!
+    updatedAt: String!
+  }
+
   """
   Minimal rating data point for analytics timeseries
   Contains only the data needed to compute growth metrics
@@ -184,6 +200,11 @@ export const ratingTypeDef = gql`
 
     "All raw ratings with anonymized user IDs"
     allRatings: [RawRating!]!
+
+    "Raw ratings scoped to a specific course with anonymized user IDs"
+    classRatings(subject: String!, courseNumber: String!): [RawRating!]!
+
+    classReviews(subject: String!, courseNumber: String!): [ClassReview!]!
   }
 
   """
diff --git a/packages/shared/ratingsConfig.ts b/packages/shared/ratingsConfig.ts
index 9705c55ab..d960ab8b3 100644
--- a/packages/shared/ratingsConfig.ts
+++ b/packages/shared/ratingsConfig.ts
@@ -7,4 +7,4 @@ export const USER_MAX_ALL_RATINGS = 50;
 export const USER_MAX_SEMESTER_RATINGS = 8;
 
 // ratings required from a user before unlocking ratings tab
-export const USER_REQUIRED_RATINGS_TO_UNLOCK = 3;
+export const USER_REQUIRED_RATINGS_TO_UNLOCK = 0;

From 410607e66a6341339f2125a8de23ce947a38324d Mon Sep 17 00:00:00 2001
From: Sam Bai <sam.bai@berkeley.edu>
Date: Mon, 13 Apr 2026 10:51:07 -0700
Subject: [PATCH 12/34] add reviewTitle and reviewContent to your ratings

---
 apps/backend/src/modules/rating/controller.ts | 37 ++++++++++++++++++-
 apps/backend/src/modules/rating/formatter.ts  |  9 +++++
 apps/backend/src/modules/rating/resolver.ts   |  2 +-
 .../UserRatingSummary.module.scss             | 15 ++++++++
 .../Class/Ratings/UserRatingSummary/index.tsx |  6 +++
 apps/frontend/src/lib/api/ratings.ts          |  2 +
 packages/gql-typedefs/rating.ts               |  2 +
 7 files changed, 71 insertions(+), 2 deletions(-)

diff --git a/apps/backend/src/modules/rating/controller.ts b/apps/backend/src/modules/rating/controller.ts
index 872bb9302..7f05c6dce 100644
--- a/apps/backend/src/modules/rating/controller.ts
+++ b/apps/backend/src/modules/rating/controller.ts
@@ -494,7 +494,42 @@ export const getUserRatings = async (context: RequestContext) => {
       count: 0,
       classes: [],
     };
-  return formatUserRatings(userRatings[0]);
+  const formattedUserRatings = formatUserRatings(userRatings[0]);
+  const activeReviews = await ReviewModel.find({
+    createdBy: context.user._id,
+    $or: [{ valid: true }, { valid: { $exists: false } }],
+  })
+    .select("subject courseNumber reviewTitle reviewContent updatedAt")
+    .sort({ updatedAt: -1 })
+    .lean();
+
+  const reviewByCourse = new Map<
+    string,
+    { reviewTitle?: string | null; reviewContent?: string | null }
+  >();
+  activeReviews.forEach((review) => {
+    const key = `${review.subject}|${review.courseNumber}`;
+    if (!reviewByCourse.has(key)) {
+      reviewByCourse.set(key, {
+        reviewTitle: review.reviewTitle ?? null,
+        reviewContent: review.reviewContent ?? null,
+      });
+    }
+  });
+
+  return {
+    ...formattedUserRatings,
+    classes: formattedUserRatings.classes.map((ratedClass) => {
+      const review = reviewByCourse.get(
+        `${ratedClass.subject}|${ratedClass.courseNumber}`
+      );
+      return {
+        ...ratedClass,
+        reviewTitle: review?.reviewTitle ?? null,
+        reviewContent: review?.reviewContent ?? null,
+      };
+    }),
+  };
 };
 
 const filterAggregatedMetrics = (
diff --git a/apps/backend/src/modules/rating/formatter.ts b/apps/backend/src/modules/rating/formatter.ts
index cb6271d95..25cfa8352 100644
--- a/apps/backend/src/modules/rating/formatter.ts
+++ b/apps/backend/src/modules/rating/formatter.ts
@@ -34,6 +34,11 @@ export const formatUserRatings = (ratings: UserRatings): UserRatings => {
         value: userMetric.value,
       })),
 
+      // Added in SDL; available after codegen refresh.
+      reviewTitle: (userClass as UserClass & { reviewTitle?: string | null })
+        .reviewTitle,
+      reviewContent: (userClass as UserClass & { reviewContent?: string | null })
+        .reviewContent,
       lastUpdated: userClass.lastUpdated?.toString(),
     })),
   };
@@ -91,6 +96,10 @@ export const formatUserClassRatings = (ratings: UserClass): UserClass => {
       metricName: metric.metricName as MetricName,
       value: metric.value,
     })),
+    reviewTitle: (ratings as UserClass & { reviewTitle?: string | null })
+      .reviewTitle,
+    reviewContent: (ratings as UserClass & { reviewContent?: string | null })
+      .reviewContent,
     lastUpdated: ratings.lastUpdated,
   };
 };
diff --git a/apps/backend/src/modules/rating/resolver.ts b/apps/backend/src/modules/rating/resolver.ts
index 8bdecb835..e80a9ce18 100644
--- a/apps/backend/src/modules/rating/resolver.ts
+++ b/apps/backend/src/modules/rating/resolver.ts
@@ -140,7 +140,7 @@ const resolvers: RatingModule.Resolvers = {
       }
     },
 
-    // @ts-expect-error Added to SDL; backend codegen needs to be re-run.
+
     classRatings: async (
       _: unknown,
       { subject, courseNumber }: { subject: string; courseNumber: string }
diff --git a/apps/frontend/src/components/Class/Ratings/UserRatingSummary/UserRatingSummary.module.scss b/apps/frontend/src/components/Class/Ratings/UserRatingSummary/UserRatingSummary.module.scss
index 0beb07afc..a26ddf4fd 100644
--- a/apps/frontend/src/components/Class/Ratings/UserRatingSummary/UserRatingSummary.module.scss
+++ b/apps/frontend/src/components/Class/Ratings/UserRatingSummary/UserRatingSummary.module.scss
@@ -26,6 +26,21 @@
       margin-top: 10px;
       margin-bottom: 20px;
     }
+
+    .reviewTitle {
+      color: var(--heading-color);
+      font-size: var(--text-16);
+      font-weight: var(--font-semibold);
+      line-height: 1.4;
+    }
+
+    .reviewContent {
+      margin-bottom: 20px;
+      color: var(--paragraph-color);
+      font-size: var(--text-14);
+      font-weight: var(--font-normal);
+      line-height: 1.5;
+    }
   }
 
   .body {
diff --git a/apps/frontend/src/components/Class/Ratings/UserRatingSummary/index.tsx b/apps/frontend/src/components/Class/Ratings/UserRatingSummary/index.tsx
index 2fefec99f..c3426f75f 100644
--- a/apps/frontend/src/components/Class/Ratings/UserRatingSummary/index.tsx
+++ b/apps/frontend/src/components/Class/Ratings/UserRatingSummary/index.tsx
@@ -37,6 +37,12 @@ export default function UserRatingSummary({
           {userRatings.lastUpdated && (
             <h5>{formatDate(new Date(userRatings.lastUpdated))}</h5>
           )}
+          {userRatings.reviewTitle && (
+            <p className={styles.reviewTitle}>{userRatings.reviewTitle}</p>
+          )}
+          <p className={styles.reviewContent}>
+            {userRatings.reviewContent || "No written review yet."}
+          </p>
         </div>
         <Flex gap="2">
           <Tooltip
diff --git a/apps/frontend/src/lib/api/ratings.ts b/apps/frontend/src/lib/api/ratings.ts
index 97cd1836f..0b944fbd8 100644
--- a/apps/frontend/src/lib/api/ratings.ts
+++ b/apps/frontend/src/lib/api/ratings.ts
@@ -100,6 +100,8 @@ export const GET_USER_RATINGS = gql`
           metricName
           value
         }
+        reviewTitle
+        reviewContent
         lastUpdated
       }
     }
diff --git a/packages/gql-typedefs/rating.ts b/packages/gql-typedefs/rating.ts
index baf92ddfc..8b055cab3 100644
--- a/packages/gql-typedefs/rating.ts
+++ b/packages/gql-typedefs/rating.ts
@@ -74,6 +74,8 @@ export const ratingTypeDef = gql`
     classNumber: String!
 
     metrics: [UserMetric!]!
+    reviewTitle: String
+    reviewContent: String
     lastUpdated: String
   }
   type UserMetric {

From 400d36d2c53114e8580771153a3b91c89337ab50 Mon Sep 17 00:00:00 2001
From: Sam Bai <sam.bai@berkeley.edu>
Date: Mon, 13 Apr 2026 11:48:31 -0700
Subject: [PATCH 13/34] remove classRating into classReviwes specifically for
 the wirtten reviews

---
 apps/backend/src/modules/rating/controller.ts | 125 ++++++++++++------
 apps/backend/src/modules/rating/formatter.ts  |   1 -
 apps/backend/src/modules/rating/resolver.ts   |  30 +----
 .../UserFeedbackModal/FeedbackForm.tsx        |  64 ++++++---
 .../UserFeedbackModal/RatingFormBody.tsx      |  17 ++-
 .../UserFeedbackModal.module.scss             |  30 -----
 .../UserFeedbackModal/useRatingFormState.ts   |  16 +--
 .../src/components/Class/Ratings/index.tsx    |  13 ++
 apps/frontend/src/lib/api/ratings.ts          |  48 +++----
 packages/gql-typedefs/rating.ts               |  31 ++---
 10 files changed, 190 insertions(+), 185 deletions(-)

diff --git a/apps/backend/src/modules/rating/controller.ts b/apps/backend/src/modules/rating/controller.ts
index 7f05c6dce..2d30d47ae 100644
--- a/apps/backend/src/modules/rating/controller.ts
+++ b/apps/backend/src/modules/rating/controller.ts
@@ -1312,55 +1312,92 @@ export const getClassRatings = async (subject: string, courseNumber: string) =>
 
     return true;
   });
-
-  return visibleRatings.map((rating) => ({
-    anonymousUserId: anonymizeUserId(rating.createdBy),
-    subject: rating.subject,
-    courseNumber: rating.courseNumber,
-    semester: rating.semester as Semester,
-    year: rating.year,
-    classNumber: rating.classNumber,
-    metricName: rating.metricName as MetricName,
-    value: rating.value,
-    createdAt:
-      "createdAt" in rating && rating.createdAt instanceof Date
-        ? rating.createdAt.toISOString()
-        : new Date().toISOString(),
-  }));
-};
-
-export const getClassReviews = async (
-  subject: string,
-  courseNumber: string
-) => {
-  const reviews = await ReviewModel.find({
+  const activeReviews = await ReviewModel.find({
     subject,
     courseNumber,
-    valid: true,
-    $or: [
-      { reviewTitle: { $exists: true, $ne: "" } },
-      { reviewContent: { $exists: true, $ne: "" } },
-    ],
+    $or: [{ valid: true }, { valid: { $exists: false } }],
   })
     .sort({ updatedAt: -1 })
     .lean();
 
-  return reviews.map((review) => ({
-    anonymousUserId: anonymizeUserId(review.createdBy),
-    subject: review.subject,
-    courseNumber: review.courseNumber,
-    semester: review.semester as Semester,
-    year: review.year,
-    classNumber: review.classNumber,
-    reviewTitle: review.reviewTitle ?? null,
-    reviewContent: review.reviewContent ?? null,
-    createdAt:
-      "createdAt" in review && review.createdAt instanceof Date
-        ? review.createdAt.toISOString()
-        : new Date(0).toISOString(),
-    updatedAt:
-      "updatedAt" in review && review.updatedAt instanceof Date
-        ? review.updatedAt.toISOString()
-        : new Date(0).toISOString(),
+  const reviewByUser = new Map<
+    string,
+    { reviewTitle?: string | null; reviewContent?: string | null }
+  >();
+  activeReviews.forEach((review) => {
+    if (reviewByUser.has(review.createdBy)) return;
+    reviewByUser.set(review.createdBy, {
+      reviewTitle: review.reviewTitle ?? null,
+      reviewContent: review.reviewContent ?? null,
+    });
+  });
+
+  type UserClassEntry = {
+    subject: string;
+    courseNumber: string;
+    semester: Semester;
+    year: number;
+    classNumber: string;
+    metrics: { metricName: MetricName; value: number }[];
+    reviewTitle?: string | null;
+    reviewContent?: string | null;
+    lastUpdated: string;
+  };
+
+  const userClassesById = new Map<string, Map<string, UserClassEntry>>();
+  visibleRatings.forEach((rating) => {
+    const userId = rating.createdBy;
+    const classKey = `${rating.semester}|${rating.year}|${rating.classNumber}`;
+    const userClasses = userClassesById.get(userId) ?? new Map();
+    const existingClass = userClasses.get(classKey);
+    const timestamp =
+      "updatedAt" in rating && rating.updatedAt instanceof Date
+        ? rating.updatedAt
+        : "createdAt" in rating && rating.createdAt instanceof Date
+          ? rating.createdAt
+          : new Date(0);
+
+    if (!existingClass) {
+      const review = reviewByUser.get(userId);
+      userClasses.set(classKey, {
+        subject: rating.subject,
+        courseNumber: rating.courseNumber,
+        semester: rating.semester as Semester,
+        year: rating.year,
+        classNumber: rating.classNumber,
+        metrics: [
+          {
+            metricName: rating.metricName as MetricName,
+            value: rating.value,
+          },
+        ],
+        reviewTitle: review?.reviewTitle ?? null,
+        reviewContent: review?.reviewContent ?? null,
+        lastUpdated: timestamp.toISOString(),
+      });
+      userClassesById.set(userId, userClasses);
+      return;
+    }
+
+    existingClass.metrics.push({
+      metricName: rating.metricName as MetricName,
+      value: rating.value,
+    });
+    if (timestamp.toISOString() > existingClass.lastUpdated) {
+      existingClass.lastUpdated = timestamp.toISOString();
+    }
+  });
+
+  const users = Array.from(userClassesById.entries()).map(([userId, classes]) => ({
+    anonymousUserId: anonymizeUserId(userId),
+    classes: Array.from(classes.values()),
   }));
+
+  return {
+    subject,
+    courseNumber,
+    count: users.length,
+    users,
+  };
 };
+
diff --git a/apps/backend/src/modules/rating/formatter.ts b/apps/backend/src/modules/rating/formatter.ts
index 25cfa8352..b148c82db 100644
--- a/apps/backend/src/modules/rating/formatter.ts
+++ b/apps/backend/src/modules/rating/formatter.ts
@@ -34,7 +34,6 @@ export const formatUserRatings = (ratings: UserRatings): UserRatings => {
         value: userMetric.value,
       })),
 
-      // Added in SDL; available after codegen refresh.
       reviewTitle: (userClass as UserClass & { reviewTitle?: string | null })
         .reviewTitle,
       reviewContent: (userClass as UserClass & { reviewContent?: string | null })
diff --git a/apps/backend/src/modules/rating/resolver.ts b/apps/backend/src/modules/rating/resolver.ts
index e80a9ce18..b90d57f33 100644
--- a/apps/backend/src/modules/rating/resolver.ts
+++ b/apps/backend/src/modules/rating/resolver.ts
@@ -6,7 +6,6 @@ import {
   getAllRatings,
   getClassAggregatedRatings,
   getClassRatings,
-  getClassReviews,
   getSemestersWithRatings,
   getUserClassRatings,
   getUserRatings,
@@ -140,8 +139,7 @@ const resolvers: RatingModule.Resolvers = {
       }
     },
 
-
-    classRatings: async (
+    classReviews: async (
       _: unknown,
       { subject, courseNumber }: { subject: string; courseNumber: string }
     ) => {
@@ -162,32 +160,6 @@ const resolvers: RatingModule.Resolvers = {
       }
     },
 
-    classReviews: async (
-      _: unknown,
-      {
-        subject,
-        courseNumber,
-      }: {
-        subject: string;
-        courseNumber: string;
-      }
-    ) => {
-      try {
-        return await getClassReviews(subject, courseNumber);
-      } catch (error: unknown) {
-        if (error instanceof GraphQLError) {
-          throw error;
-        }
-        throw new GraphQLError(
-          typeof error === "object" && error !== null && "message" in error
-            ? String(error.message)
-            : "An unexpected error occurred",
-          {
-            extensions: { code: "INTERNAL_SERVER_ERROR" },
-          }
-        );
-      }
-    },
   },
   Mutation: {
     createRatings: async (
diff --git a/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/FeedbackForm.tsx b/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/FeedbackForm.tsx
index 275388bdb..61ed143f9 100644
--- a/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/FeedbackForm.tsx
+++ b/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/FeedbackForm.tsx
@@ -135,41 +135,61 @@ export function RatingsForm({
   );
 }
 
-interface ReviewFormProps {
+interface ReviewTitleFormProps {
   reviewTitle: string;
   setReviewTitle: (value: string) => void;
+  showRequiredAsterisk?: boolean;
+}
+
+interface ReviewContentFormProps {
   reviewContent: string;
   setReviewContent: (value: string) => void;
+  showRequiredAsterisk?: boolean;
 }
 
-export function ReviewForm({
+export function ReviewTitleForm({
   reviewTitle,
   setReviewTitle,
+  showRequiredAsterisk = false,
+}: ReviewTitleFormProps) {
+  return (
+    <div className={styles.formGroup}>
+      <div className={styles.questionPair}>
+        <h3>
+          Title your review {showRequiredAsterisk && <RequiredAsterisk />}
+        </h3>
+        <textarea
+          className={`${styles.reviewTextarea} ${styles.reviewTitleTextarea}`}
+          value={reviewTitle}
+          onChange={(e) => setReviewTitle(e.target.value)}
+          placeholder="Title"
+          rows={1}
+          aria-label="Review title"
+        />
+      </div>
+    </div>
+  );
+}
+
+export function ReviewContentForm({
   reviewContent,
   setReviewContent,
-}: ReviewFormProps) {
+  showRequiredAsterisk = false,
+}: ReviewContentFormProps) {
   return (
     <div className={styles.formGroup}>
       <div className={styles.questionPair}>
-        <h3>Write a Review</h3>
-        <div className={styles.reviewBox} role="group" aria-label="Review">
-          <textarea
-            className={`${styles.reviewTextarea} ${styles.reviewTitleTextarea}`}
-            value={reviewTitle}
-            onChange={(e) => setReviewTitle(e.target.value)}
-            placeholder="Title"
-            rows={1}
-            aria-label="Review title"
-          />
-          <textarea
-            className={`${styles.reviewTextarea} ${styles.reviewBoxContent}`}
-            value={reviewContent}
-            onChange={(e) => setReviewContent(e.target.value)}
-            placeholder="Share details of your experience in the course"
-            rows={4}
-            aria-label="Review details"
-          />
-        </div>
+        <h3>
+          Write a Review {showRequiredAsterisk && <RequiredAsterisk />}
+        </h3>
+        <textarea
+          className={styles.reviewTextarea}
+          value={reviewContent}
+          onChange={(e) => setReviewContent(e.target.value)}
+          placeholder="Share details of your experience in the course"
+          rows={4}
+          aria-label="Review details"
+        />
         <p className={styles.reviewDisclaimer}>
           Your rating could be removed if you use profanity or derogatory terms.
         </p>
diff --git a/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/RatingFormBody.tsx b/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/RatingFormBody.tsx
index 5ab11882b..0ef1d1d61 100644
--- a/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/RatingFormBody.tsx
+++ b/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/RatingFormBody.tsx
@@ -5,7 +5,12 @@ import { Flex, Select } from "@repo/theme";
 import { Semester } from "@/lib/generated/graphql";
 
 import { MetricData } from "../metricsUtil";
-import { AttendanceForm, RatingsForm, ReviewForm } from "./FeedbackForm";
+import {
+  AttendanceForm,
+  RatingsForm,
+  ReviewContentForm,
+  ReviewTitleForm,
+} from "./FeedbackForm";
 // eslint-disable-next-line css-modules/no-unused-class
 import styles from "./UserFeedbackModal.module.scss";
 
@@ -57,6 +62,11 @@ export function RatingFormBody({
     <Flex direction="column">
       <div className={styles.mainSection}>
         <Flex direction="column" style={{ gap: "32px", padding: "24px 0" }}>
+          <ReviewContentForm
+            reviewContent={reviewContent}
+            setReviewContent={setReviewContent}
+            showRequiredAsterisk={reviewTitle.trim().length > 0}
+          />
           <div className={styles.formGroup}>
             <div className={styles.questionPair}>
               <h3>
@@ -89,11 +99,10 @@ export function RatingFormBody({
             setMetricData={setMetricData}
             startQuestionNumber={questionNumbers.ratingsStartNumber}
           />
-          <ReviewForm
+          <ReviewTitleForm
             reviewTitle={reviewTitle}
             setReviewTitle={setReviewTitle}
-            reviewContent={reviewContent}
-            setReviewContent={setReviewContent}
+            showRequiredAsterisk={reviewContent.trim().length > 0}
           />
         </Flex>
       </div>
diff --git a/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/UserFeedbackModal.module.scss b/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/UserFeedbackModal.module.scss
index 82ac14eda..6a503f0d1 100644
--- a/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/UserFeedbackModal.module.scss
+++ b/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/UserFeedbackModal.module.scss
@@ -157,40 +157,10 @@
 
 /* Smaller height for review title field */
 .reviewTitleTextarea {
-  /* Override `reviewTextarea` to look like a single-box title row */
-  border: none;
-  border-radius: 0;
-  border-bottom: 1px solid var(--border-color);
   overflow: hidden;
   resize: none;
   min-height: 44px;
   max-height: 96px;
-
-  &:focus {
-    border-color: var(--border-color);
-  }
-}
-
-/* Single-box wrapper for title + content */
-.reviewBox {
-  width: 100%;
-  border: 1px solid var(--border-color);
-  border-radius: 4px;
-  overflow: hidden;
-  box-sizing: border-box;
-
-  &:focus-within {
-    border-color: var(--blue-500);
-  }
-}
-
-.reviewBoxContent {
-  border: none;
-  border-radius: 0;
-
-  &:focus {
-    border-color: var(--border-color);
-  }
 }
 
 .reviewDisclaimer.reviewDisclaimer {
diff --git a/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/useRatingFormState.ts b/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/useRatingFormState.ts
index ba4594b87..9262f036e 100644
--- a/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/useRatingFormState.ts
+++ b/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/useRatingFormState.ts
@@ -34,10 +34,10 @@ export function useRatingFormState({
     return isClassValid && isTermValid && areRatingsValid;
   }, [selectedCourse, selectedTerm, metricData]);
 
-  // Calculate progress: 6 fields (semester + 3 ratings + 2 attendance)
+  // Calculate progress: 8 fields (semester + 3 ratings + 2 attendance + title + review)
   const progress = useMemo(() => {
     let filledFields = 0;
-    const totalFields = 7;
+    const totalFields = 8;
 
     // Field 1: Semester selection
     if (selectedTerm && selectedTerm.length > 0) filledFields++;
@@ -57,13 +57,11 @@ export function useRatingFormState({
     // Field 6: Recording
     if (typeof metricData[MetricName.Recording] === "number") filledFields++;
 
-    // Field 7: Review (title and/or body)
-    if (
-      reviewTitle.trim().length > 0 ||
-      reviewContent.trim().length > 0
-    ) {
-      filledFields++;
-    }
+    // Field 7: Review title
+    if (reviewTitle.trim().length > 0) filledFields++;
+
+    // Field 8: Review content
+    if (reviewContent.trim().length > 0) filledFields++;
 
     return (filledFields / totalFields) * 100;
   }, [selectedTerm, metricData, reviewTitle, reviewContent]);
diff --git a/apps/frontend/src/components/Class/Ratings/index.tsx b/apps/frontend/src/components/Class/Ratings/index.tsx
index ecd77d6e2..50c976599 100644
--- a/apps/frontend/src/components/Class/Ratings/index.tsx
+++ b/apps/frontend/src/components/Class/Ratings/index.tsx
@@ -20,6 +20,7 @@ import { useGetClassRatingsData } from "@/hooks/api/ratings/useGetRatings";
 import useClass from "@/hooks/useClass";
 import useUser from "@/hooks/useUser";
 import { IAggregatedRatings, IMetric } from "@/lib/api";
+import { GET_CLASS_REVIEWS } from "@/lib/api/ratings";
 import { sortByTermDescending } from "@/lib/classes";
 import {
   CreateRatingsDocument,
@@ -111,6 +112,13 @@ export function RatingsContainer() {
       fetchPolicy: "cache-and-network",
     }
   );
+  const { data: classRatingsDebugData } = useQuery(GET_CLASS_REVIEWS, {
+    variables: {
+      subject: currentClass.subject,
+      courseNumber: currentClass.courseNumber,
+    },
+    fetchPolicy: "cache-and-network",
+  });
   const userRatingsData = userRatingsQueryData?.userRatings;
   const userRatings = useMemo(() => {
     if (!userRatingsData?.classes) return null;
@@ -641,6 +649,11 @@ export function RatingsContainer() {
         </div>
       )}
 
+      <div>
+        <h3>ClassReviews raw response</h3>
+        <pre>{JSON.stringify(classRatingsDebugData, null, 2)}</pre>
+      </div>
+
       <UserFeedbackModal
         isOpen={isModalOpen}
         onClose={() => handleModalStateChange(false)}
diff --git a/apps/frontend/src/lib/api/ratings.ts b/apps/frontend/src/lib/api/ratings.ts
index 0b944fbd8..7affd495c 100644
--- a/apps/frontend/src/lib/api/ratings.ts
+++ b/apps/frontend/src/lib/api/ratings.ts
@@ -189,23 +189,6 @@ export const GET_CLASS_RATINGS_DATA = gql`
   }
 `;
 
-export const GET_CLASS_REVIEWS = gql`
-  query GetClassReviews($subject: String!, $courseNumber: String!) {
-    classReviews(subject: $subject, courseNumber: $courseNumber) {
-      anonymousUserId
-      subject
-      courseNumber
-      semester
-      year
-      classNumber
-      reviewTitle
-      reviewContent
-      createdAt
-      updatedAt
-    }
-  }
-`;
-
 export const GET_ALL_RATINGS = gql`
   query GetAllRatings {
     allRatings {
@@ -222,18 +205,29 @@ export const GET_ALL_RATINGS = gql`
   }
 `;
 
-export const GET_CLASS_RATINGS = gql`
-  query GetClassRatings($subject: String!, $courseNumber: String!) {
-    classRatings(subject: $subject, courseNumber: $courseNumber) {
-      anonymousUserId
+export const GET_CLASS_REVIEWS = gql`
+  query GetClassReviews($subject: String!, $courseNumber: String!) {
+    classReviews(subject: $subject, courseNumber: $courseNumber) {
       subject
       courseNumber
-      semester
-      year
-      classNumber
-      metricName
-      value
-      createdAt
+      count
+      users {
+        anonymousUserId
+        classes {
+          subject
+          courseNumber
+          semester
+          year
+          classNumber
+          metrics {
+            metricName
+            value
+          }
+          reviewTitle
+          reviewContent
+          lastUpdated
+        }
+      }
     }
   }
 `;
diff --git a/packages/gql-typedefs/rating.ts b/packages/gql-typedefs/rating.ts
index 8b055cab3..25e0af0ed 100644
--- a/packages/gql-typedefs/rating.ts
+++ b/packages/gql-typedefs/rating.ts
@@ -65,6 +65,16 @@ export const ratingTypeDef = gql`
     count: Int!
     classes: [UserClass!]!
   }
+  type ClassUserReviews {
+    anonymousUserId: String!
+    classes: [UserClass!]!
+  }
+  type ClassReviews @cacheControl(maxAge: 0) {
+    subject: String!
+    courseNumber: String!
+    count: Int!
+    users: [ClassUserReviews!]!
+  }
   type UserClass {
     "Class Identifiers"
     year: Int!
@@ -101,22 +111,6 @@ export const ratingTypeDef = gql`
     createdAt: String!
   }
 
-  """
-  Public review payload for a course across terms/classes.
-  """
-  type ClassReview @cacheControl(maxAge: 60) {
-    anonymousUserId: String!
-    subject: String!
-    courseNumber: String!
-    semester: Semester!
-    year: Int!
-    classNumber: String!
-    reviewTitle: String
-    reviewContent: String
-    createdAt: String!
-    updatedAt: String!
-  }
-
   """
   Minimal rating data point for analytics timeseries
   Contains only the data needed to compute growth metrics
@@ -203,10 +197,9 @@ export const ratingTypeDef = gql`
     "All raw ratings with anonymized user IDs"
     allRatings: [RawRating!]!
 
-    "Raw ratings scoped to a specific course with anonymized user IDs"
-    classRatings(subject: String!, courseNumber: String!): [RawRating!]!
+    "Reviews scoped to a specific course grouped by anonymous user"
+    classReviews(subject: String!, courseNumber: String!): ClassReviews!
 
-    classReviews(subject: String!, courseNumber: String!): [ClassReview!]!
   }
 
   """

From 36c0977cc34d9f5432ce1acdacbd570bf26f8ae7 Mon Sep 17 00:00:00 2001
From: Sam Bai <sam.bai@berkeley.edu>
Date: Mon, 13 Apr 2026 12:19:04 -0700
Subject: [PATCH 14/34] add reviewerGrade

---
 apps/backend/src/modules/rating/controller.ts | 40 +++++++++++---
 apps/backend/src/modules/rating/resolver.ts   |  5 +-
 .../src/app/Profile/Ratings/index.tsx         | 14 +++--
 .../UserFeedbackModal/RatingFormBody.tsx      | 29 ++++++++++
 .../Class/Ratings/UserFeedbackModal/index.tsx | 53 +++++++++++++++++--
 .../UserFeedbackModal/useRatingFormState.ts   |  4 ++
 .../UserRatingSummary.module.scss             |  5 ++
 .../Class/Ratings/UserRatingSummary/index.tsx | 12 ++++-
 .../src/components/Class/Ratings/index.tsx    |  4 +-
 .../Class/Ratings/ratingMutations.ts          |  5 +-
 apps/frontend/src/components/Class/index.tsx  |  8 ++-
 apps/frontend/src/lib/api/ratings.ts          |  4 ++
 packages/common/src/models/review.ts          |  5 ++
 packages/gql-typedefs/rating.ts               |  2 +
 packages/shared/ratingsConfig.ts              | 19 +++++++
 15 files changed, 190 insertions(+), 19 deletions(-)

diff --git a/apps/backend/src/modules/rating/controller.ts b/apps/backend/src/modules/rating/controller.ts
index 2d30d47ae..533f1e102 100644
--- a/apps/backend/src/modules/rating/controller.ts
+++ b/apps/backend/src/modules/rating/controller.ts
@@ -499,13 +499,19 @@ export const getUserRatings = async (context: RequestContext) => {
     createdBy: context.user._id,
     $or: [{ valid: true }, { valid: { $exists: false } }],
   })
-    .select("subject courseNumber reviewTitle reviewContent updatedAt")
+    .select(
+      "subject courseNumber reviewTitle reviewContent reviewerGrade updatedAt"
+    )
     .sort({ updatedAt: -1 })
     .lean();
 
   const reviewByCourse = new Map<
     string,
-    { reviewTitle?: string | null; reviewContent?: string | null }
+    {
+      reviewTitle?: string | null;
+      reviewContent?: string | null;
+      reviewerGrade?: string | null;
+    }
   >();
   activeReviews.forEach((review) => {
     const key = `${review.subject}|${review.courseNumber}`;
@@ -513,6 +519,8 @@ export const getUserRatings = async (context: RequestContext) => {
       reviewByCourse.set(key, {
         reviewTitle: review.reviewTitle ?? null,
         reviewContent: review.reviewContent ?? null,
+        reviewerGrade:
+          (review.reviewerGrade as string | null) ?? "n/a",
       });
     }
   });
@@ -527,6 +535,7 @@ export const getUserRatings = async (context: RequestContext) => {
         ...ratedClass,
         reviewTitle: review?.reviewTitle ?? null,
         reviewContent: review?.reviewContent ?? null,
+        reviewerGrade: review?.reviewerGrade ?? "n/a",
       };
     }),
   };
@@ -972,7 +981,8 @@ export const createRatings = async (
   classNumber: string,
   metrics: MetricInput[],
   reviewTitle?: string | null,
-  reviewContent?: string | null
+  reviewContent?: string | null,
+  reviewerGrade?: string | null
 ) => {
   if (!context.user._id) {
     throw new GraphQLError("Unauthorized", {
@@ -1051,7 +1061,11 @@ export const createRatings = async (
 
       // Step 2: Soft-delete and create review snapshots
       // `valid` identifies the latest active review for a user/course.
-      if (reviewTitle !== undefined || reviewContent !== undefined) {
+      if (
+        reviewTitle !== undefined ||
+        reviewContent !== undefined ||
+        reviewerGrade !== undefined
+      ) {
         const activeReviewFilter = {
           createdBy: context.user._id,
           courseId,
@@ -1060,6 +1074,7 @@ export const createRatings = async (
 
         const normalizedTitle = (reviewTitle ?? "").trim();
         const normalizedContent = (reviewContent ?? "").trim();
+        const normalizedReviewerGrade = (reviewerGrade ?? "n/a").trim() || "n/a";
         const hasReviewPayload =
           normalizedTitle.length > 0 || normalizedContent.length > 0;
 
@@ -1079,7 +1094,10 @@ export const createRatings = async (
             allReviews.find(
               (existingReview) =>
                 (existingReview.reviewTitle ?? "").trim() === normalizedTitle &&
-                (existingReview.reviewContent ?? "").trim() === normalizedContent
+                (existingReview.reviewContent ?? "").trim() ===
+                  normalizedContent &&
+                (existingReview.reviewerGrade ?? "n/a") ===
+                  normalizedReviewerGrade
             ) ?? null;
 
           if (reusableReview) {
@@ -1099,6 +1117,7 @@ export const createRatings = async (
                   valid: true,
                   reviewTitle: normalizedTitle,
                   reviewContent: normalizedContent,
+                  reviewerGrade: normalizedReviewerGrade,
                   classId,
                   subject,
                   courseNumber,
@@ -1123,6 +1142,7 @@ export const createRatings = async (
                   courseId,
                   reviewTitle: normalizedTitle,
                   reviewContent: normalizedContent,
+                  reviewerGrade: normalizedReviewerGrade,
                   classId,
                   subject,
                   courseNumber,
@@ -1322,13 +1342,19 @@ export const getClassRatings = async (subject: string, courseNumber: string) =>
 
   const reviewByUser = new Map<
     string,
-    { reviewTitle?: string | null; reviewContent?: string | null }
+    {
+      reviewTitle?: string | null;
+      reviewContent?: string | null;
+      reviewerGrade?: string | null;
+    }
   >();
   activeReviews.forEach((review) => {
     if (reviewByUser.has(review.createdBy)) return;
     reviewByUser.set(review.createdBy, {
       reviewTitle: review.reviewTitle ?? null,
       reviewContent: review.reviewContent ?? null,
+      reviewerGrade:
+        (review.reviewerGrade as string | null) ?? "n/a",
     });
   });
 
@@ -1341,6 +1367,7 @@ export const getClassRatings = async (subject: string, courseNumber: string) =>
     metrics: { metricName: MetricName; value: number }[];
     reviewTitle?: string | null;
     reviewContent?: string | null;
+    reviewerGrade?: string | null;
     lastUpdated: string;
   };
 
@@ -1373,6 +1400,7 @@ export const getClassRatings = async (subject: string, courseNumber: string) =>
         ],
         reviewTitle: review?.reviewTitle ?? null,
         reviewContent: review?.reviewContent ?? null,
+        reviewerGrade: review?.reviewerGrade ?? "n/a",
         lastUpdated: timestamp.toISOString(),
       });
       userClassesById.set(userId, userClasses);
diff --git a/apps/backend/src/modules/rating/resolver.ts b/apps/backend/src/modules/rating/resolver.ts
index b90d57f33..77851526b 100644
--- a/apps/backend/src/modules/rating/resolver.ts
+++ b/apps/backend/src/modules/rating/resolver.ts
@@ -177,9 +177,11 @@ const resolvers: RatingModule.Resolvers = {
           metrics,
           reviewTitle,
           reviewContent,
+          reviewerGrade,
         } = args as typeof args & {
           reviewTitle?: string | null;
           reviewContent?: string | null;
+          reviewerGrade?: string | null;
         };
 
         return await createRatings(
@@ -191,7 +193,8 @@ const resolvers: RatingModule.Resolvers = {
           classNumber,
           metrics,
           reviewTitle,
-          reviewContent
+          reviewContent,
+          reviewerGrade
         );
       } catch (error: unknown) {
         // Re-throw GraphQLErrors as is
diff --git a/apps/frontend/src/app/Profile/Ratings/index.tsx b/apps/frontend/src/app/Profile/Ratings/index.tsx
index 601f15eb7..5730792a0 100644
--- a/apps/frontend/src/app/Profile/Ratings/index.tsx
+++ b/apps/frontend/src/app/Profile/Ratings/index.tsx
@@ -200,7 +200,8 @@ export default function Ratings() {
         classNumber: string;
       },
       reviewTitle?: string,
-      reviewContent?: string
+      reviewContent?: string,
+      reviewerGrade?: string
     ) => {
       if (!ratingForEdit) return;
 
@@ -225,6 +226,7 @@ export default function Ratings() {
         refetchQueries: buildRefetchQueries(refetchTarget),
         reviewTitle,
         reviewContent,
+        reviewerGrade,
       });
     },
     [ratingForEdit, createRatingsMutation, buildRefetchQueries]
@@ -240,7 +242,8 @@ export default function Ratings() {
         classNumber: string;
       },
       reviewTitle?: string,
-      reviewContent?: string
+      reviewContent?: string,
+      reviewerGrade?: string
     ) => {
       const refetchTarget = {
         subject: courseInfo.subject,
@@ -262,6 +265,7 @@ export default function Ratings() {
         refetchQueries: buildRefetchQueries(refetchTarget),
         reviewTitle,
         reviewContent,
+        reviewerGrade,
       });
     },
     [createRatingsMutation, buildRefetchQueries]
@@ -357,14 +361,16 @@ export default function Ratings() {
             termInfo,
             courseInfo,
             reviewTitle,
-            reviewContent
+            reviewContent,
+            reviewerGrade
           ) => {
             await handleSubmitEdit(
               metricValues,
               termInfo,
               courseInfo,
               reviewTitle,
-              reviewContent
+              reviewContent,
+              reviewerGrade
             );
           }}
           initialUserClass={ratingForEdit}
diff --git a/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/RatingFormBody.tsx b/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/RatingFormBody.tsx
index 0ef1d1d61..8c150ef85 100644
--- a/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/RatingFormBody.tsx
+++ b/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/RatingFormBody.tsx
@@ -1,5 +1,6 @@
 import { Dispatch, SetStateAction } from "react";
 
+import { REVIEWER_GRADE_OPTIONS } from "@repo/shared";
 import { Flex, Select } from "@repo/theme";
 
 import { Semester } from "@/lib/generated/graphql";
@@ -42,6 +43,8 @@ interface RatingFormBodyProps {
   setReviewTitle: (value: string) => void;
   reviewContent: string;
   setReviewContent: (value: string) => void;
+  reviewerGrade: string | null;
+  onReviewerGradeChange: (grade: string | null) => void;
 }
 
 export function RatingFormBody({
@@ -57,6 +60,8 @@ export function RatingFormBody({
   setReviewTitle,
   reviewContent,
   setReviewContent,
+  reviewerGrade,
+  onReviewerGradeChange,
 }: RatingFormBodyProps) {
   return (
     <Flex direction="column">
@@ -94,6 +99,30 @@ export function RatingFormBody({
             </div>
           </div>
 
+          <div className={styles.formGroup}>
+            <div className={styles.questionPair}>
+              <h3>What grade did you receive in this course?</h3>
+              <div style={{ width: "100%" }}>
+                <Select
+                  options={REVIEWER_GRADE_OPTIONS.map((grade) => ({
+                    value: grade,
+                    label: grade,
+                  }))}
+                  disabled={!selectedCourse}
+                  value={reviewerGrade}
+                  onChange={(selectedOption) => {
+                    if (Array.isArray(selectedOption)) onReviewerGradeChange(null);
+                    else onReviewerGradeChange(selectedOption || null);
+                  }}
+                  placeholder="Select grade"
+                  emptyMessage="No grades found."
+                  clearable={true}
+                  searchable={true}
+                />
+              </div>
+            </div>
+          </div>
+
           <RatingsForm
             metricData={metricData}
             setMetricData={setMetricData}
diff --git a/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/index.tsx b/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/index.tsx
index a50fc4d12..9537582a1 100644
--- a/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/index.tsx
+++ b/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/index.tsx
@@ -26,6 +26,20 @@ interface Term {
   classNumber?: string;
 }
 
+function normalizeStoredReviewerGrade(
+  grade: string | null | undefined
+): string | null {
+  if (!grade || grade.toLowerCase() === "n/a") return null;
+  return grade;
+}
+
+function reviewerGradeFromUserClass(
+  userClass: IUserRatingClass | null | undefined
+): string | null | undefined {
+  return (userClass as { reviewerGrade?: string | null } | undefined)
+    ?.reviewerGrade;
+}
+
 interface UserFeedbackModalProps {
   isOpen: boolean;
   onClose: () => void;
@@ -40,7 +54,8 @@ interface UserFeedbackModalProps {
     termInfo: { semester: Semester; year: number },
     courseInfo: { subject: string; courseNumber: string; classNumber: string },
     reviewTitle?: string,
-    reviewContent?: string
+    reviewContent?: string,
+    reviewerGrade?: string
   ) => Promise<void>;
   initialUserClass?: IUserRatingClass | null;
   userRatedClasses?: Array<{ subject: string; courseNumber: string }>;
@@ -135,6 +150,8 @@ export function UserFeedbackModal({
     setReviewTitle,
     reviewContent,
     setReviewContent,
+    reviewerGrade,
+    setReviewerGrade,
   } = formState;
 
   const overallProgress = useMemo(
@@ -212,6 +229,16 @@ export function UserFeedbackModal({
       // Reset to initial empty state when initialUserClass is null (after deletion)
       setMetricData(initialMetricData);
     }
+    if (initialUserClass) {
+      setReviewTitle(initialUserClass.reviewTitle ?? "");
+      setReviewContent(initialUserClass.reviewContent ?? "");
+    } else {
+      setReviewTitle("");
+      setReviewContent("");
+    }
+    setReviewerGrade(
+      normalizeStoredReviewerGrade(reviewerGradeFromUserClass(initialUserClass))
+    );
     setSelectedCourse(initialSelectedCourse);
     setCurrentRatingIndex(0);
   }, [
@@ -223,6 +250,9 @@ export function UserFeedbackModal({
     setSelectedTerm,
     setSelectedCourse,
     initialSelectedCourse,
+    setReviewerGrade,
+    setReviewTitle,
+    setReviewContent,
   ]);
 
   const initialCourseKey = initialSelectedCourse
@@ -239,13 +269,23 @@ export function UserFeedbackModal({
     );
     const courseChanged = currentCourseKey !== initialCourseKey;
 
+    const initialTitle = (initialUserClass?.reviewTitle ?? "").trim();
+    const initialContent = (initialUserClass?.reviewContent ?? "").trim();
+    const initialGrade = normalizeStoredReviewerGrade(
+      reviewerGradeFromUserClass(initialUserClass)
+    );
+    const reviewChanged =
+      reviewTitle.trim() !== initialTitle ||
+      reviewContent.trim() !== initialContent ||
+      (reviewerGrade ?? null) !== (initialGrade ?? null);
+
     // Check if all required metrics are filled out
     const allRequiredMetricsFilled = REQUIRED_METRICS.every(
       (metric) => typeof metricData[metric] === "number"
     );
     return (
       allRequiredMetricsFilled &&
-      (termChanged || metricsChanged || courseChanged)
+      (termChanged || metricsChanged || courseChanged || reviewChanged)
     );
   }, [
     selectedTerm,
@@ -254,6 +294,10 @@ export function UserFeedbackModal({
     initialMetricData,
     currentCourseKey,
     initialCourseKey,
+    initialUserClass,
+    reviewTitle,
+    reviewContent,
+    reviewerGrade,
   ]);
 
   const isFormValid = useMemo(() => {
@@ -322,7 +366,8 @@ export function UserFeedbackModal({
           classNumber,
         },
         reviewTitle || undefined,
-        reviewContent || undefined
+        reviewContent || undefined,
+        reviewerGrade ?? undefined
       );
 
       const isLastRating = currentRatingIndex >= totalRatings - 1;
@@ -463,6 +508,8 @@ export function UserFeedbackModal({
               setReviewTitle={setReviewTitle}
               reviewContent={reviewContent}
               setReviewContent={setReviewContent}
+              reviewerGrade={reviewerGrade}
+              onReviewerGradeChange={setReviewerGrade}
             />
           </motion.div>
         </AnimatePresence>
diff --git a/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/useRatingFormState.ts b/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/useRatingFormState.ts
index 9262f036e..9011788a0 100644
--- a/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/useRatingFormState.ts
+++ b/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/useRatingFormState.ts
@@ -23,6 +23,7 @@ export function useRatingFormState({
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [reviewTitle, setReviewTitle] = useState<string>("");
   const [reviewContent, setReviewContent] = useState<string>("");
+  const [reviewerGrade, setReviewerGrade] = useState<string | null>(null);
 
   const isFormValid = useMemo(() => {
     const isClassValid = selectedCourse !== null;
@@ -76,6 +77,7 @@ export function useRatingFormState({
     setIsSubmitting(false);
     setReviewTitle("");
     setReviewContent("");
+    setReviewerGrade(null);
   };
 
   return {
@@ -94,5 +96,7 @@ export function useRatingFormState({
     setReviewTitle,
     reviewContent,
     setReviewContent,
+    reviewerGrade,
+    setReviewerGrade,
   };
 }
diff --git a/apps/frontend/src/components/Class/Ratings/UserRatingSummary/UserRatingSummary.module.scss b/apps/frontend/src/components/Class/Ratings/UserRatingSummary/UserRatingSummary.module.scss
index a26ddf4fd..b2f125a65 100644
--- a/apps/frontend/src/components/Class/Ratings/UserRatingSummary/UserRatingSummary.module.scss
+++ b/apps/frontend/src/components/Class/Ratings/UserRatingSummary/UserRatingSummary.module.scss
@@ -19,6 +19,11 @@
       color: var(--heading-color);
       font-weight: var(--font-semibold);
     }
+
+    .headingGrade {
+      color: var(--paragraph-color);
+      font-weight: var(--font-normal);
+    }
     h5 {
       color: var(--paragraph-color);
       font-size: var(--text-14);
diff --git a/apps/frontend/src/components/Class/Ratings/UserRatingSummary/index.tsx b/apps/frontend/src/components/Class/Ratings/UserRatingSummary/index.tsx
index c3426f75f..08e90dd29 100644
--- a/apps/frontend/src/components/Class/Ratings/UserRatingSummary/index.tsx
+++ b/apps/frontend/src/components/Class/Ratings/UserRatingSummary/index.tsx
@@ -29,11 +29,21 @@ export default function UserRatingSummary({
       const indexB = METRIC_ORDER.indexOf(MetricName[b.metricName]);
       return indexA - indexB;
     });
+
+  const rawGrade = (
+    userRatings as IUserRatingClass & { reviewerGrade?: string | null }
+  ).reviewerGrade;
+  const displayGrade =
+    rawGrade && rawGrade.toLowerCase() !== "n/a" ? rawGrade : null;
+
   return (
     <div className={styles.root}>
       <div className={styles.title}>
         <div>
-          <h3>Your Rating</h3>
+          <h3>
+            Your Rating
+            <span className={styles.headingGrade}>{displayGrade}</span>
+          </h3>
           {userRatings.lastUpdated && (
             <h5>{formatDate(new Date(userRatings.lastUpdated))}</h5>
           )}
diff --git a/apps/frontend/src/components/Class/Ratings/index.tsx b/apps/frontend/src/components/Class/Ratings/index.tsx
index 50c976599..fa4d40b95 100644
--- a/apps/frontend/src/components/Class/Ratings/index.tsx
+++ b/apps/frontend/src/components/Class/Ratings/index.tsx
@@ -671,7 +671,8 @@ export function RatingsContainer() {
           termInfo,
           courseInfo,
           reviewTitle,
-          reviewContent
+          reviewContent,
+          reviewerGrade
         ) => {
           await submitRatingMutation({
             metricValues,
@@ -685,6 +686,7 @@ export function RatingsContainer() {
             refetchQueries: [],
             reviewTitle,
             reviewContent,
+            reviewerGrade,
           });
           await Promise.all([
             refetchAllRatings(),
diff --git a/apps/frontend/src/components/Class/Ratings/ratingMutations.ts b/apps/frontend/src/components/Class/Ratings/ratingMutations.ts
index d6a9a688f..91d5b7727 100644
--- a/apps/frontend/src/components/Class/Ratings/ratingMutations.ts
+++ b/apps/frontend/src/components/Class/Ratings/ratingMutations.ts
@@ -37,6 +37,7 @@ interface SubmitRatingOptions {
   refetchQueries?: RefetchQuery[];
   reviewTitle?: string;
   reviewContent?: string;
+  reviewerGrade?: string;
 }
 
 export async function submitRating({
@@ -47,6 +48,7 @@ export async function submitRating({
   refetchQueries = [],
   reviewTitle,
   reviewContent,
+  reviewerGrade,
 }: SubmitRatingOptions) {
   // Validate required metrics are present
   const missingRequiredMetrics = REQUIRED_METRICS.filter(
@@ -81,7 +83,8 @@ export async function submitRating({
       metrics,
       reviewTitle,
       reviewContent,
-    },
+      reviewerGrade,
+    } as CreateRatingsMutationVariables,
     refetchQueries,
     awaitRefetchQueries: true,
   });
diff --git a/apps/frontend/src/components/Class/index.tsx b/apps/frontend/src/components/Class/index.tsx
index f4e6a7fed..496961f46 100644
--- a/apps/frontend/src/components/Class/index.tsx
+++ b/apps/frontend/src/components/Class/index.tsx
@@ -423,7 +423,10 @@ export default function Class({
     async (
       metricValues: MetricData,
       termInfo: { semester: Semester; year: number },
-      classInfo: { subject: string; courseNumber: string; classNumber: string }
+      classInfo: { subject: string; courseNumber: string; classNumber: string },
+      _reviewTitle?: string,
+      _reviewContent?: string,
+      reviewerGrade?: string
     ) => {
       const populatedMetrics = METRIC_NAMES.filter(
         (metric) => typeof metricValues[metric] === "number"
@@ -455,7 +458,8 @@ export default function Class({
           year: termInfo.year,
           classNumber: classInfo.classNumber,
           metrics,
-        },
+          reviewerGrade,
+        } as Parameters<typeof createUnlockRatings>[0]["variables"],
         refetchQueries: [{ query: GetUserRatingsDocument }],
         awaitRefetchQueries: true,
       });
diff --git a/apps/frontend/src/lib/api/ratings.ts b/apps/frontend/src/lib/api/ratings.ts
index 7affd495c..d67391d5c 100644
--- a/apps/frontend/src/lib/api/ratings.ts
+++ b/apps/frontend/src/lib/api/ratings.ts
@@ -67,6 +67,7 @@ export const CREATE_RATINGS = gql`
     $metrics: [RatingMetricInput!]!
     $reviewTitle: String
     $reviewContent: String
+    $reviewerGrade: String
   ) {
     createRatings(
       subject: $subject
@@ -77,6 +78,7 @@ export const CREATE_RATINGS = gql`
       metrics: $metrics
       reviewTitle: $reviewTitle
       reviewContent: $reviewContent
+      reviewerGrade: $reviewerGrade
     )
   }
 `;
@@ -102,6 +104,7 @@ export const GET_USER_RATINGS = gql`
         }
         reviewTitle
         reviewContent
+        reviewerGrade
         lastUpdated
       }
     }
@@ -225,6 +228,7 @@ export const GET_CLASS_REVIEWS = gql`
           }
           reviewTitle
           reviewContent
+          reviewerGrade
           lastUpdated
         }
       }
diff --git a/packages/common/src/models/review.ts b/packages/common/src/models/review.ts
index 788cbf865..64e0a023e 100644
--- a/packages/common/src/models/review.ts
+++ b/packages/common/src/models/review.ts
@@ -46,6 +46,11 @@ const reviewSchema = new Schema(
       type: String,
       required: false,
     },
+    reviewerGrade: {
+      type: String,
+      required: false,
+      default: "n/a",
+    },
     valid: {
       type: Boolean,
       required: true,
diff --git a/packages/gql-typedefs/rating.ts b/packages/gql-typedefs/rating.ts
index 25e0af0ed..e864492ad 100644
--- a/packages/gql-typedefs/rating.ts
+++ b/packages/gql-typedefs/rating.ts
@@ -86,6 +86,7 @@ export const ratingTypeDef = gql`
     metrics: [UserMetric!]!
     reviewTitle: String
     reviewContent: String
+    reviewerGrade: String
     lastUpdated: String
   }
   type UserMetric {
@@ -217,6 +218,7 @@ export const ratingTypeDef = gql`
       metrics: [RatingMetricInput!]!
       reviewTitle: String
       reviewContent: String
+      reviewerGrade: String = "n/a"
     ): Boolean! @auth
 
     deleteRatings(subject: String!, courseNumber: String!): Boolean! @auth
diff --git a/packages/shared/ratingsConfig.ts b/packages/shared/ratingsConfig.ts
index d960ab8b3..d58995d90 100644
--- a/packages/shared/ratingsConfig.ts
+++ b/packages/shared/ratingsConfig.ts
@@ -8,3 +8,22 @@ export const USER_MAX_SEMESTER_RATINGS = 8;
 
 // ratings required from a user before unlocking ratings tab
 export const USER_REQUIRED_RATINGS_TO_UNLOCK = 0;
+
+// optional self-reported course grade in the rating form 
+export const REVIEWER_GRADE_OPTIONS = [
+  "A+",
+  "A",
+  "A-",
+  "B+",
+  "B",
+  "B-",
+  "C+",
+  "C",
+  "C-",
+  "D+",
+  "D",
+  "D-",
+  "F+",
+  "F",
+  "F-",
+] as const;

From 6b1e967234a436b42ff0d085d6c0162830c1f15e Mon Sep 17 00:00:00 2001
From: Sam Bai <sam.bai@berkeley.edu>
Date: Mon, 13 Apr 2026 12:19:37 -0700
Subject: [PATCH 15/34] revert ratings config to require 3 ratings

---
 packages/shared/ratingsConfig.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/shared/ratingsConfig.ts b/packages/shared/ratingsConfig.ts
index d58995d90..d504aade4 100644
--- a/packages/shared/ratingsConfig.ts
+++ b/packages/shared/ratingsConfig.ts
@@ -7,7 +7,7 @@ export const USER_MAX_ALL_RATINGS = 50;
 export const USER_MAX_SEMESTER_RATINGS = 8;
 
 // ratings required from a user before unlocking ratings tab
-export const USER_REQUIRED_RATINGS_TO_UNLOCK = 0;
+export const USER_REQUIRED_RATINGS_TO_UNLOCK = 3;
 
 // optional self-reported course grade in the rating form 
 export const REVIEWER_GRADE_OPTIONS = [

From f063fa7a6267455e3b6f5ef40175120547eb98fb Mon Sep 17 00:00:00 2001
From: Sam Bai <sam.bai@berkeley.edu>
Date: Mon, 13 Apr 2026 12:30:06 -0700
Subject: [PATCH 16/34] change rating unlock to 0 for testing

---
 packages/shared/ratingsConfig.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/shared/ratingsConfig.ts b/packages/shared/ratingsConfig.ts
index d504aade4..d58995d90 100644
--- a/packages/shared/ratingsConfig.ts
+++ b/packages/shared/ratingsConfig.ts
@@ -7,7 +7,7 @@ export const USER_MAX_ALL_RATINGS = 50;
 export const USER_MAX_SEMESTER_RATINGS = 8;
 
 // ratings required from a user before unlocking ratings tab
-export const USER_REQUIRED_RATINGS_TO_UNLOCK = 3;
+export const USER_REQUIRED_RATINGS_TO_UNLOCK = 0;
 
 // optional self-reported course grade in the rating form 
 export const REVIEWER_GRADE_OPTIONS = [

From d26c504f8aafddb9468214551274a6bc542936e9 Mon Sep 17 00:00:00 2001
From: Sam Bai <sam.bai@berkeley.edu>
Date: Mon, 13 Apr 2026 17:22:22 -0700
Subject: [PATCH 17/34] update top half of ratings

---
 .../RatingDetail/RatingDetail.module.scss     |  13 +-
 .../Class/Ratings/Ratings.module.scss         | 101 +++-
 .../Class/Ratings/UserRatingSummary/index.tsx |  81 +---
 .../src/components/Class/Ratings/index.tsx    | 433 ++++++++++++------
 4 files changed, 414 insertions(+), 214 deletions(-)

diff --git a/apps/frontend/src/components/Class/Ratings/RatingDetail/RatingDetail.module.scss b/apps/frontend/src/components/Class/Ratings/RatingDetail/RatingDetail.module.scss
index ac80f16a6..7f4222a91 100644
--- a/apps/frontend/src/components/Class/Ratings/RatingDetail/RatingDetail.module.scss
+++ b/apps/frontend/src/components/Class/Ratings/RatingDetail/RatingDetail.module.scss
@@ -5,11 +5,15 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
+    min-height: 36px;
+    padding: 4px 0;
     cursor: pointer;
 
     .titleAndStatusSection {
       display: flex;
       align-items: center;
+      gap: 8px;
+      min-height: 0;
 
       .titleSection {
         display: flex;
@@ -18,17 +22,20 @@
         width: 140px;
 
         .title {
+          margin: 0;
           color: var(--paragraph-color);
-          font-size: var(--text-16);
+          font-size: var(--text-14);
           font-weight: var(--font-normal);
+          line-height: 1.25;
         }
 
       }
 
       .metricAverage {
         color: var(--label-color);
-        padding-left: 14px;
-        font-size: var(--text-14);
+        padding-left: 8px;
+        font-size: var(--text-12);
+        line-height: 1.25;
       }
     }
     .statusSection {
diff --git a/apps/frontend/src/components/Class/Ratings/Ratings.module.scss b/apps/frontend/src/components/Class/Ratings/Ratings.module.scss
index b3454e619..e028b59f4 100644
--- a/apps/frontend/src/components/Class/Ratings/Ratings.module.scss
+++ b/apps/frontend/src/components/Class/Ratings/Ratings.module.scss
@@ -1,7 +1,17 @@
 .root {
-  background-color: var(--background-color);
-  padding: 20px;
-  height: 100%;
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-height: 0;
+  align-self: stretch;
+}
+
+.containerContents {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-8, 48px);
+  align-self: stretch;
+  min-width: 0;
 }
 
 .header {
@@ -67,11 +77,92 @@
   border-radius: 8px;
   padding: 0 24px;
   border: 1px solid var(--border-color);
-  min-width: 450px;
+  width: 100%;
+  min-width: 0;
+}
+
+.ratingsSummary {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: var(--space-3, 12px);
+  align-self: stretch;
+}
+
+.ratingsSummaryTop {
+  display: flex;
+  height: 32px;
+  align-items: center;
+  gap: 12px;
+  align-self: stretch;
+}
+
+.ratingsSummaryBottom {
+  display: flex;
+  align-items: center;
+  gap: var(--space-5, 24px);
+  align-self: stretch;
+}
+
+.ratingsSummaryBottomLeft {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-2, 8px);
+}
+
+.ratingsSummaryBottomRight {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  flex: 1 0 0;
+  min-width: 0;
+}
+
+.ratingsSummaryHeader {
+  color: var(--text-secondary-color, #404040);
+  font-feature-settings: 'liga' off;
+
+  /* Web UI (Desktop)/Heading/Heading Medium */
+  font-family: Inter;
+  font-size: var(--font-sizes-5, 20px);
+  font-style: normal;
+  font-weight: 600;
+  line-height: 24px; /* 120% */
+  letter-spacing: -0.2px;
+}
+
+.ratingsSummaryHeaderRight {
+  margin-left: auto;
+  text-align: right;
+}
+
+.ratingsSummaryAverage {
+  color: var(--text-secondary-color, #404040);
+  text-align: center;
+  font-feature-settings: 'liga' off;
+  font-family: Inter;
+  font-size: var(--font-sizes-8, 35px);
+  font-style: normal;
+  font-weight: 600;
+  line-height: 36px; /* 102.857% */
+  letter-spacing: -0.35px;
+}
+
+.ratingsSummaryCount {
+  color: var(--text-secondary-color, #404040);
+  font-feature-settings: 'liga' off;
+
+  /* Web UI (Desktop)/Title/Title Small */
+  font-family: Inter;
+  font-size: var(--font-sizes-1, 12px);
+  font-style: normal;
+  font-weight: 500;
+  line-height: 16px; /* 133.333% */
 }
 
 .ratingSection {
-  padding: 24px 0;
+  padding: 10px 0;
   border-bottom: 1px solid var(--border-color);
 
   &:last-child {
diff --git a/apps/frontend/src/components/Class/Ratings/UserRatingSummary/index.tsx b/apps/frontend/src/components/Class/Ratings/UserRatingSummary/index.tsx
index 08e90dd29..e3e543dd5 100644
--- a/apps/frontend/src/components/Class/Ratings/UserRatingSummary/index.tsx
+++ b/apps/frontend/src/components/Class/Ratings/UserRatingSummary/index.tsx
@@ -1,34 +1,23 @@
-import { EditPencil, Trash } from "iconoir-react";
-
-import { METRIC_ORDER, MetricName } from "@repo/shared";
-import { Badge, Color, Flex, IconButton, Tooltip } from "@repo/theme";
+import { MetricName } from "@repo/shared";
 
 import { IUserRatingClass } from "@/lib/api";
 
-import {
-  formatDate,
-  getMetricStatus,
-  getStatusColor,
-  isMetricRating,
-} from "../metricsUtil";
+import { formatDate, isMetricRating } from "../metricsUtil";
 import styles from "./UserRatingSummary.module.scss";
 
 export default function UserRatingSummary({
   userRatings,
-  onOpenModal,
-  ratingDelete,
 }: {
   userRatings: IUserRatingClass;
-  onOpenModal: (open: boolean) => void;
-  ratingDelete: () => void;
 }) {
-  const sortedMetrics = userRatings.metrics
-    .filter((metric) => isMetricRating(MetricName[metric.metricName]))
-    .sort((a, b) => {
-      const indexA = METRIC_ORDER.indexOf(MetricName[a.metricName]);
-      const indexB = METRIC_ORDER.indexOf(MetricName[b.metricName]);
-      return indexA - indexB;
-    });
+  const ratingMetrics = userRatings.metrics.filter((metric) =>
+    isMetricRating(MetricName[metric.metricName])
+  );
+  const metricsAverage =
+    ratingMetrics.length > 0
+      ? ratingMetrics.reduce((sum, m) => sum + m.value, 0) /
+        ratingMetrics.length
+      : null;
 
   const rawGrade = (
     userRatings as IUserRatingClass & { reviewerGrade?: string | null }
@@ -40,10 +29,11 @@ export default function UserRatingSummary({
     <div className={styles.root}>
       <div className={styles.title}>
         <div>
-          <h3>
-            Your Rating
-            <span className={styles.headingGrade}>{displayGrade}</span>
-          </h3>
+          {displayGrade ? (
+            <h3>
+              <span className={styles.headingGrade}>{displayGrade}</span>
+            </h3>
+          ) : null}
           {userRatings.lastUpdated && (
             <h5>{formatDate(new Date(userRatings.lastUpdated))}</h5>
           )}
@@ -54,45 +44,14 @@ export default function UserRatingSummary({
             {userRatings.reviewContent || "No written review yet."}
           </p>
         </div>
-        <Flex gap="2">
-          <Tooltip
-            trigger={
-              <IconButton onClick={() => onOpenModal(true)}>
-                <EditPencil />
-              </IconButton>
-            }
-            title="Edit rating"
-          />
-          <Tooltip
-            trigger={
-              <IconButton onClick={() => ratingDelete()}>
-                <Trash />
-              </IconButton>
-            }
-            title="Delete rating"
-          />
-        </Flex>
       </div>
       <div className={styles.body}>
         <div>
-          {sortedMetrics.map((metric) => (
-            <div key={metric.metricName} className={styles.section}>
-              <div className={styles.metrics}>
-                <div className={styles.titleSection}>
-                  <h3 className={styles.metric}>{metric.metricName}</h3>
-                </div>
-                <Badge
-                  color={
-                    getStatusColor(metric.metricName, metric.value) as Color
-                  }
-                  label={getMetricStatus(metric.metricName, metric.value)}
-                />
-                <span
-                  className={styles.metricAverage}
-                >{`${metric.value}.0 / 5.0`}</span>
-              </div>
-            </div>
-          ))}
+          {metricsAverage != null ? (
+            <span>{metricsAverage.toFixed(1)}</span>
+          ) : (
+            <span>—</span>
+          )}
         </div>
       </div>
     </div>
diff --git a/apps/frontend/src/components/Class/Ratings/index.tsx b/apps/frontend/src/components/Class/Ratings/index.tsx
index fa4d40b95..8b0045276 100644
--- a/apps/frontend/src/components/Class/Ratings/index.tsx
+++ b/apps/frontend/src/components/Class/Ratings/index.tsx
@@ -1,12 +1,21 @@
 import { useCallback, useEffect, useMemo, useState } from "react";
 
 import { useMutation, useQuery } from "@apollo/client/react";
-import { UserStar } from "iconoir-react";
+import { EditPencil, Trash, UserStar } from "iconoir-react";
 import _ from "lodash";
 import { useSearchParams } from "react-router-dom";
 
-import { METRIC_ORDER } from "@repo/shared";
-import { Color, Container, Select } from "@repo/theme";
+import { METRIC_ORDER, MetricName } from "@repo/shared";
+import {
+  Box,
+  Button,
+  Color,
+  Container,
+  Flex,
+  IconButton,
+  Select,
+  Tooltip,
+} from "@repo/theme";
 
 import EmptyState from "@/components/Class/EmptyState";
 import {
@@ -67,6 +76,15 @@ interface Term {
 
 type MetricCategory = NonNullable<NonNullable<IMetric["categories"]>[number]>;
 
+type ClassReviewsMetric = { metricName: MetricName; value: number };
+type ClassReviewsQueryData = {
+  classReviews?: {
+    users?: Array<{
+      classes?: Array<{ metrics?: ClassReviewsMetric[] }>;
+    }>;
+  };
+};
+
 const RATING_VALUES = [5, 4, 3, 2, 1] as const;
 const RATING_TABS = {
   Instructor: "instructor",
@@ -112,13 +130,16 @@ export function RatingsContainer() {
       fetchPolicy: "cache-and-network",
     }
   );
-  const { data: classRatingsDebugData } = useQuery(GET_CLASS_REVIEWS, {
-    variables: {
-      subject: currentClass.subject,
-      courseNumber: currentClass.courseNumber,
-    },
-    fetchPolicy: "cache-and-network",
-  });
+  const { data: classRatingsData } = useQuery<ClassReviewsQueryData>(
+    GET_CLASS_REVIEWS,
+    {
+      variables: {
+        subject: currentClass.subject,
+        courseNumber: currentClass.courseNumber,
+      },
+      fetchPolicy: "cache-and-network",
+    }
+  );
   const userRatingsData = userRatingsQueryData?.userRatings;
   const userRatings = useMemo(() => {
     if (!userRatingsData?.classes) return null;
@@ -467,10 +488,26 @@ export function RatingsContainer() {
     instructorAggregatedRatings,
   ]);
 
-  // const ratingsCount = useMemo(
-  //   () => (ratingsData ? ratingsData.reduce((acc, v) => acc + v.reviewCount, 0) : 0),
-  //   [ratingsData]
-  // );
+  const classReviewsSummary = useMemo(() => {
+    const users = classRatingsData?.classReviews?.users;
+    if (!users?.length) {
+      return { count: 0, average: null as number | null };
+    }
+
+    let count = 0;
+    let totalPoints = 0;
+    for (const cls of users.flatMap((u) => u.classes ?? [])) {
+      const metrics = cls.metrics ?? [];
+      if (!metrics.some((m) => m.metricName === MetricName.Usefulness)) continue;
+      count += 1;
+      for (const m of metrics) {
+        if (isMetricRating(m.metricName)) totalPoints += m.value;
+      }
+    }
+
+    const average = count > 0 ? totalPoints / (3 * count) : null;
+    return { count, average };
+  }, [classRatingsData]);
 
   if (
     (loading && !ratingsQueryData) ||
@@ -485,18 +522,47 @@ export function RatingsContainer() {
     <>
       {showUserOnlyRatings ? (
         <div className={styles.root}>
-          <Container size="3">
-            {userRatings && (
-              <UserRatingSummary
-                userRatings={userRatings}
-                onOpenModal={handleModalStateChange}
-                ratingDelete={() => setIsDeleteModalOpen(true)}
-              />
-            )}
-            <p className={styles.userOnlyMessage}>
-              Only your rating is shown for this course.
-            </p>
-          </Container>
+          <Box p="5">
+            <Container size="3">
+              {userRatings && (
+                <div className={styles.ratingsSummary}>
+                  <div className={styles.ratingsSummaryTop}>
+                    <p className={styles.ratingsSummaryHeader}>Your Rating</p>
+                    <div className={styles.ratingsSummaryHeaderRight}>
+                      <Flex gap="2">
+                        <Tooltip
+                          trigger={
+                            <Button
+                              variant="secondary"
+                              onClick={() => handleModalStateChange(true)}
+                            >
+                              Edit your rating
+                              <EditPencil width={18} height={18} />
+                            </Button>
+                          }
+                          title="Edit rating"
+                        />
+                        <Tooltip
+                          trigger={
+                            <IconButton
+                              onClick={() => setIsDeleteModalOpen(true)}
+                            >
+                              <Trash />
+                            </IconButton>
+                          }
+                          title="Delete rating"
+                        />
+                      </Flex>
+                    </div>
+                  </div>
+                  <UserRatingSummary userRatings={userRatings} />
+                </div>
+              )}
+              <p className={styles.userOnlyMessage}>
+                Only your rating is shown for this course.
+              </p>
+            </Container>
+          </Box>
         </div>
       ) : !hasRatings ? (
         <EmptyState
@@ -519,139 +585,216 @@ export function RatingsContainer() {
         </EmptyState>
       ) : (
         <div className={styles.root}>
-          <Container size="3">
-            {userRatings ? (
-              <UserRatingSummary
-                userRatings={userRatings}
-                onOpenModal={handleModalStateChange}
-                ratingDelete={() => setIsDeleteModalOpen(true)}
-              />
-            ) : (
-              <div></div>
-            )}
-            <div className={styles.header}>
-              <div
-                style={{ display: "flex", gap: "12px", alignItems: "center" }}
-              >
-                {hasRatings && !userRatings && (
-                  <RatingButton
-                    user={user}
-                    onOpenModal={handleModalStateChange}
-                    userRatingData={userRatingsData}
-                    currentClass={currentClass}
-                  />
-                )}
-                <div className={styles.termSelectWrapper}>
-                  {hasRatings && (
-                    <Select
-                      variant="foreground"
-                      searchable
-                      searchPlaceholder={
-                        activeRatingTab === RATING_TABS.Instructor
-                          ? "Search instructors"
-                          : "Search semesters"
-                      }
-                      emptyMessage={
-                        activeRatingTab === RATING_TABS.Instructor
-                          ? "No instructors found"
-                          : "No semesters found"
-                      }
-                      tabs={[
-                        {
-                          value: RATING_TABS.Instructor,
-                          label: "By Instructor",
-                          options: instructorSelectOptions,
-                        },
-                        {
-                          value: RATING_TABS.Semester,
-                          label: "By Semester",
-                          options: termSelectOptions,
-                        },
-                      ]}
-                      contentClassName={styles.ratingsSelectContent}
-                      tabsWrapperClassName={styles.ratingsSelectTabs}
-                      value={selectedValue}
-                      defaultTab={RATING_TABS.Instructor}
-                      onTabChange={(tabValue) => {
-                        setActiveRatingTab(tabValue);
-                        // Clear displayed ratings data when browsing tabs, but preserve selection
-                        setTermRatings(null);
+          <Box p="5">
+            <Container size="3">
+              <div className={styles.containerContents}>
+              <div className={styles.ratingsSummary}>
+                <div className={styles.ratingsSummaryTop}>
+                  <p className={styles.ratingsSummaryHeader}>Rating Summary</p>
+                </div>
+                <div className={styles.ratingsSummaryBottom}>
+                  <div className={styles.ratingsSummaryBottomLeft}>
+                    <p className={styles.ratingsSummaryAverage}>
+                      {classReviewsSummary.average != null
+                        ? classReviewsSummary.average.toFixed(1)
+                        : "—"}
+                    </p>
+                    <p className={styles.ratingsSummaryCount}>
+                      {classReviewsSummary.count === 0
+                        ? "No ratings"
+                        : classReviewsSummary.count === 1
+                          ? "1 rating"
+                          : `${classReviewsSummary.count} ratings`}
+                    </p>
+                  </div>
+                  <div className={styles.ratingsSummaryBottomRight}>
+                    <div
+                      className={styles.ratingsBody}
+                      style={{
+                        backgroundColor: !hasRatings
+                          ? "transparent"
+                          : "var(--foreground-color)",
+                        boxShadow: !hasRatings
+                          ? "none"
+                          : "0 1px 2px rgb(0 0 0 / 5%)",
+                        border: !hasRatings
+                          ? "none"
+                          : "1px solid var(--border-color)",
                       }}
-                      onChange={(newValue) => {
-                        if (Array.isArray(newValue) || !newValue) return; // ensure it is string
-
-                        setSelectedValue(newValue);
-
-                        // Handle tab-specific data fetching
-                        if (activeRatingTab === RATING_TABS.Semester) {
-                          if (newValue === "all") {
-                            setTermRatings(null);
-                          } else if (isSemester(newValue)) {
-                            // Ratings are fetched by selected semester through query state.
-                            setTermRatings(null);
+                    >
+                      {ratingsData
+                        ?.filter((ratingData) =>
+                          isMetricRating(ratingData.metric)
+                        )
+                        .sort((a, b) => {
+                          const indexA = METRIC_ORDER.indexOf(a.metric);
+                          const indexB = METRIC_ORDER.indexOf(b.metric);
+                          return indexA - indexB;
+                        })
+                        .map((ratingData) => (
+                          <div
+                            className={styles.ratingSection}
+                            key={ratingData.metric}
+                          >
+                            <RatingDetailView {...ratingData} />
+                          </div>
+                        ))}
+                    </div>
+                  </div>
+                </div>
+              </div>
+              
+              <div className={styles.ratingsSummary}>
+                <div className={styles.ratingsSummaryTop}>
+                  <p className={styles.ratingsSummaryHeader}>Your Rating</p>
+                  {userRatings ? (
+                    <div className={styles.ratingsSummaryHeaderRight}>
+                      <Flex gap="2">
+                        <Tooltip
+                          trigger={
+                            <Button
+                              variant="secondary"
+                              onClick={() => handleModalStateChange(true)}
+                            >
+                              Edit your rating
+                              <EditPencil width={18} height={18} />
+                            </Button>
+                          }
+                          title="Edit rating"
+                        />
+                        <Tooltip
+                          trigger={
+                            <IconButton
+                              onClick={() => setIsDeleteModalOpen(true)}
+                            >
+                              <Trash />
+                            </IconButton>
                           }
-                        } else {
-                          // Instructor tab
-                          if (newValue === "all") {
-                            setTermRatings(null);
+                          title="Delete rating"
+                        />
+                      </Flex>
+                    </div>
+                  ) : null}
+                </div>
+                {userRatings ? (
+                  <UserRatingSummary userRatings={userRatings} />
+                ) : (
+                  <div></div>
+                )}
+              </div>
+
+              <div className={styles.header}>
+                <div
+                  style={{
+                    display: "flex",
+                    gap: "12px",
+                    alignItems: "center",
+                  }}
+                >
+                  {hasRatings && !userRatings && (
+                    <RatingButton
+                      user={user}
+                      onOpenModal={handleModalStateChange}
+                      userRatingData={userRatingsData}
+                      currentClass={currentClass}
+                    />
+                  )}
+                  <div className={styles.termSelectWrapper}>
+                    {hasRatings && (
+                      <Select
+                        variant="foreground"
+                        searchable
+                        searchPlaceholder={
+                          activeRatingTab === RATING_TABS.Instructor
+                            ? "Search instructors"
+                            : "Search semesters"
+                        }
+                        emptyMessage={
+                          activeRatingTab === RATING_TABS.Instructor
+                            ? "No instructors found"
+                            : "No semesters found"
+                        }
+                        tabs={[
+                          {
+                            value: RATING_TABS.Instructor,
+                            label: "By Instructor",
+                            options: instructorSelectOptions,
+                          },
+                          {
+                            value: RATING_TABS.Semester,
+                            label: "By Semester",
+                            options: termSelectOptions,
+                          },
+                        ]}
+                        contentClassName={styles.ratingsSelectContent}
+                        tabsWrapperClassName={styles.ratingsSelectTabs}
+                        value={selectedValue}
+                        defaultTab={RATING_TABS.Instructor}
+                        onTabChange={(tabValue) => {
+                          setActiveRatingTab(tabValue);
+                          // Clear displayed ratings data when browsing tabs, but preserve selection
+                          setTermRatings(null);
+                        }}
+                        onChange={(newValue) => {
+                          if (Array.isArray(newValue) || !newValue) return; // ensure it is string
+
+                          setSelectedValue(newValue);
+
+                          // Handle tab-specific data fetching
+                          if (activeRatingTab === RATING_TABS.Semester) {
+                            if (newValue === "all") {
+                              setTermRatings(null);
+                            } else if (isSemester(newValue)) {
+                              // Ratings are fetched by selected semester through query state.
+                              setTermRatings(null);
+                            }
                           } else {
-                            const selectedInstructor =
-                              instructorAggregatedRatings?.find((rating) => {
-                                if (!rating) return false;
-                                const key = `${rating.instructor.givenName}_${rating.instructor.familyName}`;
-                                return key === newValue;
-                              });
-                            if (
-                              selectedInstructor &&
-                              selectedInstructor.aggregatedRatings
-                            ) {
-                              setTermRatings(
+                            // Instructor tab
+                            if (newValue === "all") {
+                              setTermRatings(null);
+                            } else {
+                              const selectedInstructor =
+                                instructorAggregatedRatings?.find((rating) => {
+                                  if (!rating) return false;
+                                  const key = `${rating.instructor.givenName}_${rating.instructor.familyName}`;
+                                  return key === newValue;
+                                });
+                              if (
+                                selectedInstructor &&
                                 selectedInstructor.aggregatedRatings
-                              );
+                              ) {
+                                setTermRatings(
+                                  selectedInstructor.aggregatedRatings
+                                );
+                              }
                             }
                           }
+                        }}
+                        placeholder={
+                          activeRatingTab === RATING_TABS.Instructor
+                            ? "Select instructor"
+                            : "Select term"
                         }
-                      }}
-                      placeholder={
-                        activeRatingTab === RATING_TABS.Instructor
-                          ? "Select instructor"
-                          : "Select term"
-                      }
-                    />
-                  )}
+                      />
+                    )}
+                  </div>
                 </div>
               </div>
-            </div>
-            <div
-              className={styles.ratingsBody}
-              style={{
-                backgroundColor: !hasRatings
-                  ? "transparent"
-                  : "var(--foreground-color)",
-                boxShadow: !hasRatings ? "none" : "0 1px 2px rgb(0 0 0 / 5%)",
-                border: !hasRatings ? "none" : "1px solid var(--border-color)",
-              }}
-            >
-              {ratingsData
-                ?.filter((ratingData) => isMetricRating(ratingData.metric))
-                .sort((a, b) => {
-                  const indexA = METRIC_ORDER.indexOf(a.metric);
-                  const indexB = METRIC_ORDER.indexOf(b.metric);
-                  return indexA - indexB;
-                })
-                .map((ratingData) => (
-                  <div className={styles.ratingSection} key={ratingData.metric}>
-                    <RatingDetailView {...ratingData} />
-                  </div>
-                ))}
-            </div>
-          </Container>
+
+              </div>
+            </Container>
+          </Box>
         </div>
       )}
 
       <div>
         <h3>ClassReviews raw response</h3>
-        <pre>{JSON.stringify(classRatingsDebugData, null, 2)}</pre>
+        <pre>{JSON.stringify(classRatingsData, null, 2)}</pre>
+      </div>
+
+      <div>
+        <h3>Ratings data raw response</h3>
+        <pre>{JSON.stringify(ratingsData, null, 2)}</pre>
       </div>
 
       <UserFeedbackModal

From ff01902d4fcb89aaca6fe22fbc76f04a382c5147 Mon Sep 17 00:00:00 2001
From: Sam Bai <sam.bai@berkeley.edu>
Date: Mon, 13 Apr 2026 21:12:02 -0700
Subject: [PATCH 18/34] add general ratings, has not implimented sorting

---
 apps/backend/src/modules/rating/controller.ts |  28 +++
 .../ClassRatingSummary.module.scss            | 127 +++++++++++++
 .../Ratings/ClassRatingSummary/index.tsx      |  65 +++++++
 .../UserRatingSummary.module.scss             | 171 +++++++++++-------
 .../Class/Ratings/UserRatingSummary/index.tsx |  39 ++--
 .../src/components/Class/Ratings/index.tsx    |  47 ++++-
 apps/frontend/src/lib/api/ratings.ts          |   1 +
 packages/gql-typedefs/rating.ts               |   1 +
 8 files changed, 387 insertions(+), 92 deletions(-)
 create mode 100644 apps/frontend/src/components/Class/Ratings/ClassRatingSummary/ClassRatingSummary.module.scss
 create mode 100644 apps/frontend/src/components/Class/Ratings/ClassRatingSummary/index.tsx

diff --git a/apps/backend/src/modules/rating/controller.ts b/apps/backend/src/modules/rating/controller.ts
index 533f1e102..5251e1ac1 100644
--- a/apps/backend/src/modules/rating/controller.ts
+++ b/apps/backend/src/modules/rating/controller.ts
@@ -1314,6 +1314,9 @@ export const getAllRatings = async () => {
 
 export const getClassRatings = async (subject: string, courseNumber: string) => {
   const ratings = await RatingModel.find({ subject, courseNumber }).lean();
+  const sections = await SectionModel.find({ subject, courseNumber })
+    .select("semester year classNumber number meetings")
+    .lean();
   const shadowBannedCourseIds = await getShadowBannedCourseIds();
   const crossListedShadowBanEnabled = isShadowBanCrossListedEnabled();
 
@@ -1358,12 +1361,34 @@ export const getClassRatings = async (subject: string, courseNumber: string) =>
     });
   });
 
+  const instructorNamesByClassKey = new Map<string, Set<string>>();
+  sections.forEach((section) => {
+    const classNumber = section.classNumber ?? section.number;
+    if (!classNumber) return;
+    const classKey = `${section.semester}|${section.year}|${classNumber}`;
+
+    const names = instructorNamesByClassKey.get(classKey) ?? new Set<string>();
+    section.meetings?.forEach((meeting) => {
+      meeting.instructors?.forEach((instructor) => {
+        if (
+          instructor.role === "PI" &&
+          instructor.givenName &&
+          instructor.familyName
+        ) {
+          names.add(`${instructor.givenName} ${instructor.familyName}`);
+        }
+      });
+    });
+    instructorNamesByClassKey.set(classKey, names);
+  });
+
   type UserClassEntry = {
     subject: string;
     courseNumber: string;
     semester: Semester;
     year: number;
     classNumber: string;
+    professorName?: string | null;
     metrics: { metricName: MetricName; value: number }[];
     reviewTitle?: string | null;
     reviewContent?: string | null;
@@ -1392,6 +1417,9 @@ export const getClassRatings = async (subject: string, courseNumber: string) =>
         semester: rating.semester as Semester,
         year: rating.year,
         classNumber: rating.classNumber,
+        professorName:
+          Array.from(instructorNamesByClassKey.get(classKey) ?? []).join(", ") ||
+          null,
         metrics: [
           {
             metricName: rating.metricName as MetricName,
diff --git a/apps/frontend/src/components/Class/Ratings/ClassRatingSummary/ClassRatingSummary.module.scss b/apps/frontend/src/components/Class/Ratings/ClassRatingSummary/ClassRatingSummary.module.scss
new file mode 100644
index 000000000..6d0e6c30b
--- /dev/null
+++ b/apps/frontend/src/components/Class/Ratings/ClassRatingSummary/ClassRatingSummary.module.scss
@@ -0,0 +1,127 @@
+.root {
+  background-color: var(--foreground-color);
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  display: flex;
+  align-items: top;
+  // padding: 0px 24px;
+  margin-bottom: 16px;
+  min-width: 450px;
+
+  .body {
+    display: flex;
+    padding: var(--space-4, 16px) var(--space-5, 24px);
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--space-6, 32px);
+    align-self: stretch;
+  }
+
+  .body + .body {
+    margin-left: auto;
+  }
+  .bodyLeft {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--space-2, 8px);
+    align-self: stretch;
+
+    .titleDate {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 4px;
+      flex: 1 0 0;
+    }
+    h3, h4, h5 {
+      margin: 0;
+    }
+    h3 {
+      color: var(--text-secondary-color, #404040);
+      font-feature-settings: 'liga' off;
+      font-family: Inter;
+      font-size: var(--font-sizes-2, 14px);
+      font-style: normal;
+      font-weight: 600;
+      line-height: 20px; /* 142.857% */
+      letter-spacing: -0.1px;
+    }
+    h4 {
+      color: var(--text-paragraph-color, #737373);
+      font-feature-settings: 'liga' off;
+
+      /* Web UI (Desktop)/Body/Body Small */
+      font-family: Inter;
+      font-size: var(--font-sizes-1, 12px);
+      font-style: normal;
+      font-weight: var(--font-weight-regular, 400);
+      line-height: 16px; /* 133.333% */
+    }
+    h5 {
+      color: var(--text-secondary-color, #404040);
+      font-feature-settings: 'liga' off;
+
+      /* Web UI (Desktop)/Body/Body Medium */
+      font-family: Inter;
+      font-size: var(--font-sizes-2, 14px);
+      font-style: normal;
+      font-weight: 400;
+      line-height: 20px; /* 142.857% */
+      letter-spacing: -0.1px;
+    }
+  }
+  .bodyRight {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0;
+    align-self: flex-end;
+
+    > * {
+      margin: 0;
+    }
+
+    > :nth-child(3) {
+      margin-top: var(--space-5, 24px);
+    }
+
+    .rating {
+      display: flex;
+      padding: 2px var(--space-2, 8px);
+      justify-content: center;
+      align-items: center;
+      align-self: center;
+      text-align: center;
+      border-radius: 4px;
+      border: 1px solid var(--green-badge);
+      background: var(--green-500-20);
+      color: var(--green-badge);
+    }
+    
+    .grade {
+      display: flex;
+      min-width: 22px;
+      min-height: 22px;
+      padding: 0 5px;
+      justify-content: center;
+      align-items: center;
+      align-self: center;
+      text-align: center;
+      color: var(--green-badge);
+    }
+  }
+}
+
+.ratingGrade {
+  color: var(--text-secondary-color, #404040);
+  font-feature-settings: 'liga' off;
+  
+  /* Web UI (Desktop)/Title/Title Medium */
+  font-family: Inter;
+  font-size: var(--font-sizes-2, 14px);
+  font-style: normal;
+  font-weight: 500;
+  line-height: 20px; /* 142.857% */
+  letter-spacing: -0.1px;
+}
\ No newline at end of file
diff --git a/apps/frontend/src/components/Class/Ratings/ClassRatingSummary/index.tsx b/apps/frontend/src/components/Class/Ratings/ClassRatingSummary/index.tsx
new file mode 100644
index 000000000..e5fc161b3
--- /dev/null
+++ b/apps/frontend/src/components/Class/Ratings/ClassRatingSummary/index.tsx
@@ -0,0 +1,65 @@
+import { MetricName } from "@repo/shared";
+
+import { formatDate, isMetricRating } from "../metricsUtil";
+import styles from "./ClassRatingSummary.module.scss";
+
+export interface ClassUserReview {
+  professorName?: string | null;
+  metrics?: Array<{ metricName: MetricName; value: number }>;
+  reviewTitle?: string | null;
+  reviewContent?: string | null;
+  reviewerGrade?: string | null;
+  lastUpdated?: string | null;
+}
+
+export default function ClassRatingSummary({
+  classReview,
+}: {
+  classReview: ClassUserReview;
+}) {
+  const ratingMetrics = (classReview.metrics ?? []).filter((metric) =>
+    isMetricRating(MetricName[metric.metricName])
+  );
+  const metricsAverage =
+    ratingMetrics.length > 0
+      ? ratingMetrics.reduce((sum, m) => sum + m.value, 0) /
+        ratingMetrics.length
+      : null;
+
+  const rawGrade = classReview.reviewerGrade;
+  const displayGrade =
+    rawGrade && rawGrade.toLowerCase() !== "n/a" ? rawGrade : "N/A";
+
+  return (
+    <div className={styles.root}>
+      <div className={styles.body}>
+        <div className={styles.bodyLeft}>
+          <div className={styles.titleDate}>
+            <h3>{classReview.reviewTitle || "No title"}</h3>
+            {classReview.lastUpdated && (
+              <h4>{formatDate(new Date(classReview.lastUpdated))}</h4>
+            )}
+          </div>
+
+          <h5>{classReview.reviewContent || "No written review yet."}</h5>
+        </div>
+      </div>
+      <div className={styles.body}>
+        <div className={styles.bodyRight}>
+          <h2 className={styles.ratingGrade}>Rating</h2>
+          <div className={styles.rating}>
+            {metricsAverage != null ? (
+              <span>{metricsAverage.toFixed(1)}</span>
+            ) : (
+              <span>N/A</span>
+            )}
+          </div>
+          <h2 className={styles.ratingGrade}>Grade</h2>
+          <div className={styles.grade}>
+            <span>{displayGrade}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/frontend/src/components/Class/Ratings/UserRatingSummary/UserRatingSummary.module.scss b/apps/frontend/src/components/Class/Ratings/UserRatingSummary/UserRatingSummary.module.scss
index b2f125a65..6d0e6c30b 100644
--- a/apps/frontend/src/components/Class/Ratings/UserRatingSummary/UserRatingSummary.module.scss
+++ b/apps/frontend/src/components/Class/Ratings/UserRatingSummary/UserRatingSummary.module.scss
@@ -4,89 +4,124 @@
   border-radius: 8px;
   display: flex;
   align-items: top;
-  padding: 0px 24px;
+  // padding: 0px 24px;
   margin-bottom: 16px;
   min-width: 450px;
 
-  .title {
-    display: inline-block;
-    margin-top: 40px;
-    width: 40%;
-    vertical-align: center;
-    h3 {
+  .body {
+    display: flex;
+    padding: var(--space-4, 16px) var(--space-5, 24px);
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--space-6, 32px);
+    align-self: stretch;
+  }
+
+  .body + .body {
+    margin-left: auto;
+  }
+  .bodyLeft {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--space-2, 8px);
+    align-self: stretch;
+
+    .titleDate {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 4px;
+      flex: 1 0 0;
+    }
+    h3, h4, h5 {
       margin: 0;
-      font-size: var(--text-18);
-      color: var(--heading-color);
-      font-weight: var(--font-semibold);
     }
+    h3 {
+      color: var(--text-secondary-color, #404040);
+      font-feature-settings: 'liga' off;
+      font-family: Inter;
+      font-size: var(--font-sizes-2, 14px);
+      font-style: normal;
+      font-weight: 600;
+      line-height: 20px; /* 142.857% */
+      letter-spacing: -0.1px;
+    }
+    h4 {
+      color: var(--text-paragraph-color, #737373);
+      font-feature-settings: 'liga' off;
 
-    .headingGrade {
-      color: var(--paragraph-color);
-      font-weight: var(--font-normal);
+      /* Web UI (Desktop)/Body/Body Small */
+      font-family: Inter;
+      font-size: var(--font-sizes-1, 12px);
+      font-style: normal;
+      font-weight: var(--font-weight-regular, 400);
+      line-height: 16px; /* 133.333% */
     }
     h5 {
-      color: var(--paragraph-color);
-      font-size: var(--text-14);
-      font-weight: var(--font-normal);
-      margin-top: 10px;
-      margin-bottom: 20px;
-    }
+      color: var(--text-secondary-color, #404040);
+      font-feature-settings: 'liga' off;
 
-    .reviewTitle {
-      color: var(--heading-color);
-      font-size: var(--text-16);
-      font-weight: var(--font-semibold);
-      line-height: 1.4;
+      /* Web UI (Desktop)/Body/Body Medium */
+      font-family: Inter;
+      font-size: var(--font-sizes-2, 14px);
+      font-style: normal;
+      font-weight: 400;
+      line-height: 20px; /* 142.857% */
+      letter-spacing: -0.1px;
     }
+  }
+  .bodyRight {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0;
+    align-self: flex-end;
 
-    .reviewContent {
-      margin-bottom: 20px;
-      color: var(--paragraph-color);
-      font-size: var(--text-14);
-      font-weight: var(--font-normal);
-      line-height: 1.5;
+    > * {
+      margin: 0;
     }
-  }
 
-  .body {
-    display: inline-block;
-    width: 60%;
+    > :nth-child(3) {
+      margin-top: var(--space-5, 24px);
+    }
 
-    .section {
-      box-sizing: border-box;
-      padding: 24px 0;
+    .rating {
       display: flex;
-      align-items: middle;
-      border-bottom: 1px solid var(--border-color);
-      &:last-child {
-        border-bottom: none;
-      }
-
-      .metrics {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        align-self: stretch;
-      }
-
-      .titleSection {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        width: 140px;
-
-        .metric {
-          color: var(--paragraph-color);
-          font-size: var(--text-16);
-          font-weight: var(--font-normal);
-        }
-      }
-
-      .metricAverage {
-        color: var(--label-color);
-        padding-left: 14px;
-        font-size: var(--text-14);
-      }
+      padding: 2px var(--space-2, 8px);
+      justify-content: center;
+      align-items: center;
+      align-self: center;
+      text-align: center;
+      border-radius: 4px;
+      border: 1px solid var(--green-badge);
+      background: var(--green-500-20);
+      color: var(--green-badge);
+    }
+    
+    .grade {
+      display: flex;
+      min-width: 22px;
+      min-height: 22px;
+      padding: 0 5px;
+      justify-content: center;
+      align-items: center;
+      align-self: center;
+      text-align: center;
+      color: var(--green-badge);
     }
   }
 }
+
+.ratingGrade {
+  color: var(--text-secondary-color, #404040);
+  font-feature-settings: 'liga' off;
+  
+  /* Web UI (Desktop)/Title/Title Medium */
+  font-family: Inter;
+  font-size: var(--font-sizes-2, 14px);
+  font-style: normal;
+  font-weight: 500;
+  line-height: 20px; /* 142.857% */
+  letter-spacing: -0.1px;
+}
\ No newline at end of file
diff --git a/apps/frontend/src/components/Class/Ratings/UserRatingSummary/index.tsx b/apps/frontend/src/components/Class/Ratings/UserRatingSummary/index.tsx
index e3e543dd5..14ddc747c 100644
--- a/apps/frontend/src/components/Class/Ratings/UserRatingSummary/index.tsx
+++ b/apps/frontend/src/components/Class/Ratings/UserRatingSummary/index.tsx
@@ -23,36 +23,37 @@ export default function UserRatingSummary({
     userRatings as IUserRatingClass & { reviewerGrade?: string | null }
   ).reviewerGrade;
   const displayGrade =
-    rawGrade && rawGrade.toLowerCase() !== "n/a" ? rawGrade : null;
+    rawGrade && rawGrade.toLowerCase() !== "n/a" ? rawGrade : "N/A";
 
   return (
     <div className={styles.root}>
-      <div className={styles.title}>
-        <div>
-          {displayGrade ? (
-            <h3>
-              <span className={styles.headingGrade}>{displayGrade}</span>
-            </h3>
-          ) : null}
-          {userRatings.lastUpdated && (
-            <h5>{formatDate(new Date(userRatings.lastUpdated))}</h5>
-          )}
-          {userRatings.reviewTitle && (
-            <p className={styles.reviewTitle}>{userRatings.reviewTitle}</p>
-          )}
-          <p className={styles.reviewContent}>
-            {userRatings.reviewContent || "No written review yet."}
-          </p>
+      <div className={styles.body}>
+        <div className={styles.bodyLeft}>
+          <div className={styles.titleDate}>
+            <h3>{userRatings.reviewTitle}</h3>
+            {userRatings.lastUpdated && (
+              <h4>{formatDate(new Date(userRatings.lastUpdated))}</h4>
+            )}
+          </div>
+          
+          <h5>{userRatings.reviewContent || "No written review yet."}</h5>
         </div>
       </div>
       <div className={styles.body}>
-        <div>
+      <div className={styles.bodyRight}>
+        <h2 className={styles.ratingGrade}>Rating</h2>
+        <div className={styles.rating}>
           {metricsAverage != null ? (
             <span>{metricsAverage.toFixed(1)}</span>
           ) : (
-            <span>—</span>
+            <span>N/A</span>
           )}
         </div>
+        <h2 className={styles.ratingGrade}>Grade</h2>
+        <div className={styles.grade}>
+          <span>{displayGrade}</span>
+        </div>
+      </div>
       </div>
     </div>
   );
diff --git a/apps/frontend/src/components/Class/Ratings/index.tsx b/apps/frontend/src/components/Class/Ratings/index.tsx
index 8b0045276..3739d972c 100644
--- a/apps/frontend/src/components/Class/Ratings/index.tsx
+++ b/apps/frontend/src/components/Class/Ratings/index.tsx
@@ -43,6 +43,9 @@ import { getRatingErrorMessage } from "@/utils/ratingErrorMessages";
 import { clampCount } from "@/utils/ratings";
 
 import { RatingButton } from "./RatingButton";
+import ClassRatingSummary, {
+  type ClassUserReview,
+} from "./ClassRatingSummary";
 import { RatingDetailProps, RatingDetailView } from "./RatingDetail";
 import styles from "./Ratings.module.scss";
 import UserRatingSummary from "./UserRatingSummary";
@@ -80,7 +83,15 @@ type ClassReviewsMetric = { metricName: MetricName; value: number };
 type ClassReviewsQueryData = {
   classReviews?: {
     users?: Array<{
-      classes?: Array<{ metrics?: ClassReviewsMetric[] }>;
+      anonymousUserId?: string;
+      classes?: Array<{
+        professorName?: string | null;
+        reviewTitle?: string | null;
+        reviewContent?: string | null;
+        reviewerGrade?: string | null;
+        lastUpdated?: string | null;
+        metrics?: ClassReviewsMetric[];
+      }>;
     }>;
   };
 };
@@ -509,6 +520,15 @@ export function RatingsContainer() {
     return { count, average };
   }, [classRatingsData]);
 
+  const classReviewsByUser = useMemo<ClassUserReview[]>(() => {
+    const users = classRatingsData?.classReviews?.users ?? [];
+    return users
+      .map((user) => user.classes?.[0] ?? null)
+      .filter((classReview): classReview is ClassUserReview =>
+        Boolean(classReview)
+      );
+  }, [classRatingsData]);
+
   if (
     (loading && !ratingsQueryData) ||
     (activeRatingTab === RATING_TABS.Semester &&
@@ -683,6 +703,27 @@ export function RatingsContainer() {
                 )}
               </div>
 
+              <div className={styles.ratingsSummary}>
+                <div className={styles.ratingsSummaryTop}>
+                  <p className={styles.ratingsSummaryHeader}>Ratings</p>
+                  {userRatings ? (
+                    <div className={styles.ratingsSummaryHeaderRight}>
+                      <p2>Placeholder</p2>
+                    </div>
+                  ) : null}
+                </div>
+                {classReviewsByUser.length > 0 ? (
+                  classReviewsByUser.map((classReview, index) => (
+                    <ClassRatingSummary
+                      key={`${classReview.lastUpdated ?? "review"}-${index}`}
+                      classReview={classReview}
+                    />
+                  ))
+                ) : (
+                  <div></div>
+                )}
+              </div>
+
               <div className={styles.header}>
                 <div
                   style={{
@@ -792,10 +833,6 @@ export function RatingsContainer() {
         <pre>{JSON.stringify(classRatingsData, null, 2)}</pre>
       </div>
 
-      <div>
-        <h3>Ratings data raw response</h3>
-        <pre>{JSON.stringify(ratingsData, null, 2)}</pre>
-      </div>
 
       <UserFeedbackModal
         isOpen={isModalOpen}
diff --git a/apps/frontend/src/lib/api/ratings.ts b/apps/frontend/src/lib/api/ratings.ts
index d67391d5c..5287f7338 100644
--- a/apps/frontend/src/lib/api/ratings.ts
+++ b/apps/frontend/src/lib/api/ratings.ts
@@ -222,6 +222,7 @@ export const GET_CLASS_REVIEWS = gql`
           semester
           year
           classNumber
+          professorName
           metrics {
             metricName
             value
diff --git a/packages/gql-typedefs/rating.ts b/packages/gql-typedefs/rating.ts
index e864492ad..3b9e07049 100644
--- a/packages/gql-typedefs/rating.ts
+++ b/packages/gql-typedefs/rating.ts
@@ -82,6 +82,7 @@ export const ratingTypeDef = gql`
     subject: String!
     courseNumber: String!
     classNumber: String!
+    professorName: String
 
     metrics: [UserMetric!]!
     reviewTitle: String

From eaaa3746b3555275a632843a748cbf47531ceb76 Mon Sep 17 00:00:00 2001
From: Sam Bai <sam.bai@berkeley.edu>
Date: Mon, 13 Apr 2026 21:45:13 -0700
Subject: [PATCH 19/34] add filter selection and fix spacing

---
 .../ClassRatingSummary.module.scss            |   2 +-
 .../Class/Ratings/Ratings.module.scss         |  26 +-
 .../UserRatingSummary.module.scss             |   1 -
 .../src/components/Class/Ratings/index.tsx    | 292 +++++++-----------
 4 files changed, 136 insertions(+), 185 deletions(-)

diff --git a/apps/frontend/src/components/Class/Ratings/ClassRatingSummary/ClassRatingSummary.module.scss b/apps/frontend/src/components/Class/Ratings/ClassRatingSummary/ClassRatingSummary.module.scss
index 6d0e6c30b..c8e92d2bf 100644
--- a/apps/frontend/src/components/Class/Ratings/ClassRatingSummary/ClassRatingSummary.module.scss
+++ b/apps/frontend/src/components/Class/Ratings/ClassRatingSummary/ClassRatingSummary.module.scss
@@ -5,7 +5,7 @@
   display: flex;
   align-items: top;
   // padding: 0px 24px;
-  margin-bottom: 16px;
+  margin-bottom: 4px;
   min-width: 450px;
 
   .body {
diff --git a/apps/frontend/src/components/Class/Ratings/Ratings.module.scss b/apps/frontend/src/components/Class/Ratings/Ratings.module.scss
index e028b59f4..cf394e3b1 100644
--- a/apps/frontend/src/components/Class/Ratings/Ratings.module.scss
+++ b/apps/frontend/src/components/Class/Ratings/Ratings.module.scss
@@ -18,9 +18,31 @@
   margin-bottom: 16px;
 }
 
+.ratingsHeaderToolbar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  text-align: left;
+}
+
 .termSelectWrapper {
-  margin-left: auto;
-  width: 250px;
+  width: 300px;
+  flex-shrink: 0;
+  > div[tabindex="0"] {
+    box-sizing: border-box;
+    width: 100%;
+    min-height: 0;
+    height: 32px;
+    padding: 0 8px;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 8px;
+
+    > div:last-of-type > div:last-child {
+      border-left: none !important;
+      padding-left: 0 !important;
+    }
+  }
 }
 
 .ratingsSelectContent {
diff --git a/apps/frontend/src/components/Class/Ratings/UserRatingSummary/UserRatingSummary.module.scss b/apps/frontend/src/components/Class/Ratings/UserRatingSummary/UserRatingSummary.module.scss
index 6d0e6c30b..deaad8dfc 100644
--- a/apps/frontend/src/components/Class/Ratings/UserRatingSummary/UserRatingSummary.module.scss
+++ b/apps/frontend/src/components/Class/Ratings/UserRatingSummary/UserRatingSummary.module.scss
@@ -5,7 +5,6 @@
   display: flex;
   align-items: top;
   // padding: 0px 24px;
-  margin-bottom: 16px;
   min-width: 450px;
 
   .body {
diff --git a/apps/frontend/src/components/Class/Ratings/index.tsx b/apps/frontend/src/components/Class/Ratings/index.tsx
index 3739d972c..8a1031b08 100644
--- a/apps/frontend/src/components/Class/Ratings/index.tsx
+++ b/apps/frontend/src/components/Class/Ratings/index.tsx
@@ -28,13 +28,12 @@ import { useReadTerms } from "@/hooks/api";
 import { useGetClassRatingsData } from "@/hooks/api/ratings/useGetRatings";
 import useClass from "@/hooks/useClass";
 import useUser from "@/hooks/useUser";
-import { IAggregatedRatings, IMetric } from "@/lib/api";
+import { IMetric } from "@/lib/api";
 import { GET_CLASS_REVIEWS } from "@/lib/api/ratings";
 import { sortByTermDescending } from "@/lib/classes";
 import {
   CreateRatingsDocument,
   DeleteRatingsDocument,
-  GetAggregatedRatingsDocument,
   GetUserRatingsDocument,
   Semester,
   TemporalPosition,
@@ -64,11 +63,6 @@ import {
 // TODO: [CROWD-SOURCED-DATA] rejected mutations are not communicated to the frontend
 // TODO: [CROWD-SOURCED-DATA] use multipleClassAggregatedRatings endpoint to get aggregated ratings for a professor
 
-const isSemester = (value: string): boolean => {
-  const firstWord = value.split(" ")[0];
-  return Object.values(Semester).includes(firstWord as Semester);
-};
-
 interface Term {
   semester: Semester;
   year: number;
@@ -112,9 +106,10 @@ export function RatingsContainer() {
     RATING_TABS.Instructor
   );
   const [selectedValue, setSelectedValue] = useState("all");
-  const [termRatings, setTermRatings] = useState<IAggregatedRatings | null>(
-    null
-  );
+  const [sortBy, setSortBy] = useState<string | null>(null);
+  const [allChosen, setAllChosen] = useState(true);
+  const [instructorChosen, setInstructorChosen] = useState(false);
+  const [semesterChosen, setSemesterChosen] = useState(false);
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
   const [errorMessage, setErrorMessage] = useState<string>("");
   const [isErrorDialogOpen, setIsErrorDialogOpen] = useState(false);
@@ -191,8 +186,11 @@ export function RatingsContainer() {
   useEffect(() => {
     // Reset to "all" if aggregated ratings change (e.g., course switch)
     setSelectedValue("all");
-    setTermRatings(null);
     setActiveRatingTab(RATING_TABS.Instructor);
+    setSortBy(null);
+    setAllChosen(true);
+    setInstructorChosen(false);
+    setSemesterChosen(false);
   }, [aggregatedRatingsData]);
 
   const handleModalStateChange = useCallback(
@@ -262,17 +260,10 @@ export function RatingsContainer() {
   }, [courseClasses]);
 
   const ratingsData = useMemo<RatingDetailProps[] | null>(() => {
-    const metricsSource =
-      (activeRatingTab === RATING_TABS.Semester ||
-        activeRatingTab === RATING_TABS.Instructor) &&
-      selectedValue !== "all" &&
-      termRatings?.metrics
-        ? termRatings.metrics
-        : aggregatedRatingsData?.metrics;
-
     const metrics =
-      metricsSource?.filter((metric): metric is IMetric => Boolean(metric)) ??
-      [];
+      aggregatedRatingsData?.metrics?.filter(
+        (metric): metric is IMetric => Boolean(metric)
+      ) ?? [];
 
     if (
       !metrics.some(
@@ -321,7 +312,7 @@ export function RatingsContainer() {
         weightedAverage: metric.weightedAverage,
       } satisfies RatingDetailProps;
     });
-  }, [activeRatingTab, aggregatedRatingsData, selectedValue, termRatings]);
+  }, [aggregatedRatingsData]);
 
   const formatRatingCount = useCallback((count?: number | null) => {
     const normalizedCount = clampCount(count);
@@ -410,56 +401,6 @@ export function RatingsContainer() {
     termsData,
   ]);
 
-  const selectedSemesterClass = useMemo(() => {
-    if (
-      activeRatingTab !== RATING_TABS.Semester ||
-      selectedValue === "all" ||
-      !isSemester(selectedValue)
-    ) {
-      return null;
-    }
-
-    const [semesterValue, yearValue] = selectedValue.split(" ");
-    const selectedOption = termSelectOptions.find(
-      (option) => option.value === selectedValue
-    );
-    const year = Number.parseInt(yearValue ?? "", 10);
-    if (!selectedOption?.classNumber || Number.isNaN(year)) {
-      return null;
-    }
-
-    return {
-      semester: semesterValue as Semester,
-      year,
-      classNumber: selectedOption.classNumber,
-    };
-  }, [activeRatingTab, selectedValue, termSelectOptions]);
-
-  const {
-    data: selectedSemesterRatingsData,
-    loading: selectedSemesterLoading,
-  } = useQuery(GetAggregatedRatingsDocument, {
-    variables: {
-      subject: currentClass.subject,
-      courseNumber: currentClass.courseNumber,
-      semester: selectedSemesterClass?.semester ?? Semester.Fall,
-      year: selectedSemesterClass?.year ?? 0,
-      classNumber: selectedSemesterClass?.classNumber,
-    },
-    skip: !selectedSemesterClass,
-    fetchPolicy: "cache-and-network",
-  });
-
-  useEffect(() => {
-    if (activeRatingTab !== RATING_TABS.Semester) return;
-    if (selectedValue === "all") {
-      setTermRatings(null);
-      return;
-    }
-
-    setTermRatings(selectedSemesterRatingsData?.aggregatedRatings ?? null);
-  }, [activeRatingTab, selectedSemesterRatingsData, selectedValue]);
-
   const instructorSelectOptions = useMemo(() => {
     const courseRatingCount = getMaxMetricCount(aggregatedRatingsData?.metrics);
     const instructorOptions =
@@ -529,12 +470,7 @@ export function RatingsContainer() {
       );
   }, [classRatingsData]);
 
-  if (
-    (loading && !ratingsQueryData) ||
-    (activeRatingTab === RATING_TABS.Semester &&
-      selectedValue !== "all" &&
-      selectedSemesterLoading)
-  ) {
+  if (loading && !ratingsQueryData) {
     return <EmptyState loading />;
   }
 
@@ -706,11 +642,97 @@ export function RatingsContainer() {
               <div className={styles.ratingsSummary}>
                 <div className={styles.ratingsSummaryTop}>
                   <p className={styles.ratingsSummaryHeader}>Ratings</p>
-                  {userRatings ? (
-                    <div className={styles.ratingsSummaryHeaderRight}>
-                      <p2>Placeholder</p2>
-                    </div>
-                  ) : null}
+                  <div className={styles.ratingsSummaryHeaderRight}>
+                    {hasRatings ? (
+                      <div className={styles.ratingsHeaderToolbar}>
+                        {!userRatings && (
+                          <RatingButton
+                            user={user}
+                            onOpenModal={handleModalStateChange}
+                            userRatingData={userRatingsData}
+                            currentClass={currentClass}
+                          />
+                        )}
+                        <div className={styles.termSelectWrapper}>
+                          <Select
+                            variant="foreground"
+                            searchable
+                            searchPlaceholder={
+                              activeRatingTab === RATING_TABS.Instructor
+                                ? "Search instructors"
+                                : "Search semesters"
+                            }
+                            emptyMessage={
+                              activeRatingTab === RATING_TABS.Instructor
+                                ? "No instructors found"
+                                : "No semesters found"
+                            }
+                            tabs={[
+                              {
+                                value: RATING_TABS.Instructor,
+                                label: "By Instructor",
+                                options: instructorSelectOptions,
+                              },
+                              {
+                                value: RATING_TABS.Semester,
+                                label: "By Semester",
+                                options: termSelectOptions,
+                              },
+                            ]}
+                            contentClassName={styles.ratingsSelectContent}
+                            tabsWrapperClassName={styles.ratingsSelectTabs}
+                            value={selectedValue}
+                            defaultTab={RATING_TABS.Instructor}
+                            onTabChange={(tabValue) => {
+                              setActiveRatingTab(tabValue);
+                              setSelectedValue("all");
+                              setSortBy(null);
+                              setAllChosen(true);
+                              setInstructorChosen(false);
+                              setSemesterChosen(false);
+                            }}
+                            onChange={(newValue) => {
+                              if (Array.isArray(newValue) || !newValue) return;
+
+                              setSelectedValue(newValue);
+
+                              if (newValue === "all") {
+                                setSortBy(null);
+                                setAllChosen(true);
+                                setInstructorChosen(false);
+                                setSemesterChosen(false);
+                                return;
+                              }
+
+                              if (activeRatingTab === RATING_TABS.Semester) {
+                                setAllChosen(false);
+                                setInstructorChosen(false);
+                                setSemesterChosen(true);
+                                setSortBy(newValue);
+                                return;
+                              }
+
+                              const selectedInstructorOption =
+                                instructorSelectOptions.find(
+                                  (o) => o.value === newValue
+                                );
+                              setAllChosen(false);
+                              setInstructorChosen(true);
+                              setSemesterChosen(false);
+                              setSortBy(
+                                selectedInstructorOption?.label ?? newValue
+                              );
+                            }}
+                            placeholder={
+                              activeRatingTab === RATING_TABS.Instructor
+                                ? "Select instructor"
+                                : "Select term"
+                            }
+                          />
+                        </div>
+                      </div>
+                    ) : null}
+                  </div>
                 </div>
                 {classReviewsByUser.length > 0 ? (
                   classReviewsByUser.map((classReview, index) => (
@@ -724,104 +746,6 @@ export function RatingsContainer() {
                 )}
               </div>
 
-              <div className={styles.header}>
-                <div
-                  style={{
-                    display: "flex",
-                    gap: "12px",
-                    alignItems: "center",
-                  }}
-                >
-                  {hasRatings && !userRatings && (
-                    <RatingButton
-                      user={user}
-                      onOpenModal={handleModalStateChange}
-                      userRatingData={userRatingsData}
-                      currentClass={currentClass}
-                    />
-                  )}
-                  <div className={styles.termSelectWrapper}>
-                    {hasRatings && (
-                      <Select
-                        variant="foreground"
-                        searchable
-                        searchPlaceholder={
-                          activeRatingTab === RATING_TABS.Instructor
-                            ? "Search instructors"
-                            : "Search semesters"
-                        }
-                        emptyMessage={
-                          activeRatingTab === RATING_TABS.Instructor
-                            ? "No instructors found"
-                            : "No semesters found"
-                        }
-                        tabs={[
-                          {
-                            value: RATING_TABS.Instructor,
-                            label: "By Instructor",
-                            options: instructorSelectOptions,
-                          },
-                          {
-                            value: RATING_TABS.Semester,
-                            label: "By Semester",
-                            options: termSelectOptions,
-                          },
-                        ]}
-                        contentClassName={styles.ratingsSelectContent}
-                        tabsWrapperClassName={styles.ratingsSelectTabs}
-                        value={selectedValue}
-                        defaultTab={RATING_TABS.Instructor}
-                        onTabChange={(tabValue) => {
-                          setActiveRatingTab(tabValue);
-                          // Clear displayed ratings data when browsing tabs, but preserve selection
-                          setTermRatings(null);
-                        }}
-                        onChange={(newValue) => {
-                          if (Array.isArray(newValue) || !newValue) return; // ensure it is string
-
-                          setSelectedValue(newValue);
-
-                          // Handle tab-specific data fetching
-                          if (activeRatingTab === RATING_TABS.Semester) {
-                            if (newValue === "all") {
-                              setTermRatings(null);
-                            } else if (isSemester(newValue)) {
-                              // Ratings are fetched by selected semester through query state.
-                              setTermRatings(null);
-                            }
-                          } else {
-                            // Instructor tab
-                            if (newValue === "all") {
-                              setTermRatings(null);
-                            } else {
-                              const selectedInstructor =
-                                instructorAggregatedRatings?.find((rating) => {
-                                  if (!rating) return false;
-                                  const key = `${rating.instructor.givenName}_${rating.instructor.familyName}`;
-                                  return key === newValue;
-                                });
-                              if (
-                                selectedInstructor &&
-                                selectedInstructor.aggregatedRatings
-                              ) {
-                                setTermRatings(
-                                  selectedInstructor.aggregatedRatings
-                                );
-                              }
-                            }
-                          }
-                        }}
-                        placeholder={
-                          activeRatingTab === RATING_TABS.Instructor
-                            ? "Select instructor"
-                            : "Select term"
-                        }
-                      />
-                    )}
-                  </div>
-                </div>
-              </div>
-
               </div>
             </Container>
           </Box>
@@ -829,8 +753,14 @@ export function RatingsContainer() {
       )}
 
       <div>
+        <p>allChosen: {String(allChosen)}</p>
+        <p>instructorChosen: {String(instructorChosen)}</p>
+        <p>semesterChosen: {String(semesterChosen)}</p>
+        <p>sortBy: {sortBy === null ? "null" : sortBy}</p>
         <h3>ClassReviews raw response</h3>
         <pre>{JSON.stringify(classRatingsData, null, 2)}</pre>
+        <h3>Ratings Data (not correctly showing the counts)</h3>
+        <pre>{JSON.stringify(ratingsData, null, 2)}</pre>
       </div>
 
 

From f5df282e773290b900f0284bab2f84d273c25da5 Mon Sep 17 00:00:00 2001
From: Henry Kim <henry1112200@gmail.com>
Date: Wed, 15 Apr 2026 23:05:29 -0700
Subject: [PATCH 20/34] ui fix for many things. aligns with final design now

---
 .../ClassRatingSummary.module.scss            | 138 +++++-
 .../Ratings/ClassRatingSummary/index.tsx      |  66 ++-
 .../RatingButton/RatingButton.module.scss     |  21 +-
 .../Class/Ratings/Ratings.module.scss         |  41 +-
 .../UserRatingSummary.module.scss             |  85 +++-
 .../Class/Ratings/UserRatingSummary/index.tsx |  84 +++-
 .../src/components/Class/Ratings/index.tsx    | 435 ++++++++----------
 .../components/Class/Ratings/metricsUtil.ts   |  14 +
 8 files changed, 584 insertions(+), 300 deletions(-)

diff --git a/apps/frontend/src/components/Class/Ratings/ClassRatingSummary/ClassRatingSummary.module.scss b/apps/frontend/src/components/Class/Ratings/ClassRatingSummary/ClassRatingSummary.module.scss
index c8e92d2bf..6789a594d 100644
--- a/apps/frontend/src/components/Class/Ratings/ClassRatingSummary/ClassRatingSummary.module.scss
+++ b/apps/frontend/src/components/Class/Ratings/ClassRatingSummary/ClassRatingSummary.module.scss
@@ -17,8 +17,13 @@
     align-self: stretch;
   }
 
+  .body:first-child {
+    flex: 1;
+  }
+
   .body + .body {
     margin-left: auto;
+    align-self: flex-start;
   }
   .bodyLeft {
     display: flex;
@@ -44,31 +49,136 @@
       font-size: var(--font-sizes-2, 14px);
       font-style: normal;
       font-weight: 600;
-      line-height: 20px; /* 142.857% */
+      line-height: 20px;
       letter-spacing: -0.1px;
     }
     h4 {
       color: var(--text-paragraph-color, #737373);
       font-feature-settings: 'liga' off;
-
-      /* Web UI (Desktop)/Body/Body Small */
       font-family: Inter;
       font-size: var(--font-sizes-1, 12px);
       font-style: normal;
       font-weight: var(--font-weight-regular, 400);
-      line-height: 16px; /* 133.333% */
+      line-height: 16px;
     }
     h5 {
       color: var(--text-secondary-color, #404040);
       font-feature-settings: 'liga' off;
-
-      /* Web UI (Desktop)/Body/Body Medium */
       font-family: Inter;
       font-size: var(--font-sizes-2, 14px);
       font-style: normal;
       font-weight: 400;
-      line-height: 20px; /* 142.857% */
+      line-height: 20px;
+      letter-spacing: -0.1px;
+      word-break: break-word;
+      overflow-wrap: break-word;
+    }
+
+    .contentWrapper {
+      position: relative;
+      color: var(--text-secondary-color, #404040);
+      font-feature-settings: 'liga' off;
+      font-family: Inter;
+      font-size: var(--font-sizes-2, 14px);
+      font-weight: 400;
+      line-height: 20px;
       letter-spacing: -0.1px;
+      word-break: break-word;
+      overflow-wrap: break-word;
+      align-self: stretch;
+
+      &.clamped {
+        max-height: 80px; // 4 lines × 20px
+        overflow: hidden;
+      }
+
+      .moreButton {
+        position: absolute;
+        bottom: 0;
+        right: 0;
+        background: var(--foreground-color);
+        border: none;
+        padding: 0 0 0 6px;
+        color: rgb(59, 130, 246);
+        font-family: Inter;
+        font-size: var(--font-sizes-2, 14px);
+        line-height: 20px;
+        cursor: pointer;
+      }
+    }
+
+    .actions {
+      display: flex;
+      gap: var(--space-3, 12px);
+    }
+
+    .helpfulButton {
+      background: none;
+      border: 1px solid var(--surface-border-color, rgba(0, 0, 0, 0.10));
+      border-radius: 4px;
+      padding: 4px 12px;
+      font-family: Inter;
+      font-size: var(--font-sizes-2, 14px);
+      font-weight: 400;
+      color: var(--text-secondary-color, #404040);
+      cursor: pointer;
+
+      &:hover {
+        background-color: var(--button-hover-color);
+      }
+    }
+
+    .reportButton {
+      background: none;
+      border: none;
+      padding: 0;
+      font-family: Inter;
+      font-size: var(--font-sizes-2, 14px);
+      font-weight: 400;
+      color: var(--text-paragraph-color, #737373);
+      cursor: pointer;
+
+      &:hover {
+        color: var(--text-secondary-color, #404040);
+      }
+    }
+
+    .metricsRow {
+      display: flex;
+      align-items: flex-start;
+      gap: var(--space-4, 16px);
+      align-self: stretch;
+      margin-top: var(--space-2, 8px);
+
+      .metricItem {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 4px;
+        flex: 1 0 0;
+        padding-right: var(--space-4, 16px);
+
+        &:not(:last-child) {
+          border-right: 1px solid var(--border-color);
+        }
+      }
+
+      .metricLabel {
+        color: var(--text-secondary-color, #404040);
+        font-family: Inter;
+        font-size: var(--font-sizes-2, 14px);
+        font-weight: 500;
+        line-height: 20px;
+        letter-spacing: -0.1px;
+      }
+
+      .metricValue {
+        color: var(--text-paragraph-color, #737373);
+        font-family: Inter;
+        font-size: var(--font-sizes-2, 14px);
+        font-weight: 400;
+        line-height: 20px;
+      }
     }
   }
   .bodyRight {
@@ -76,7 +186,7 @@
     flex-direction: column;
     align-items: flex-start;
     gap: 0;
-    align-self: flex-end;
+    align-self: flex-start;
 
     > * {
       margin: 0;
@@ -98,7 +208,7 @@
       background: var(--green-500-20);
       color: var(--green-badge);
     }
-    
+
     .grade {
       display: flex;
       min-width: 22px;
@@ -109,6 +219,10 @@
       align-self: center;
       text-align: center;
       color: var(--green-badge);
+
+      &.naGrade {
+        color: var(--text-paragraph-color, #737373);
+      }
     }
   }
 }
@@ -116,12 +230,10 @@
 .ratingGrade {
   color: var(--text-secondary-color, #404040);
   font-feature-settings: 'liga' off;
-  
-  /* Web UI (Desktop)/Title/Title Medium */
   font-family: Inter;
   font-size: var(--font-sizes-2, 14px);
   font-style: normal;
   font-weight: 500;
-  line-height: 20px; /* 142.857% */
+  line-height: 20px;
   letter-spacing: -0.1px;
-}
\ No newline at end of file
+}
diff --git a/apps/frontend/src/components/Class/Ratings/ClassRatingSummary/index.tsx b/apps/frontend/src/components/Class/Ratings/ClassRatingSummary/index.tsx
index e5fc161b3..c1597e976 100644
--- a/apps/frontend/src/components/Class/Ratings/ClassRatingSummary/index.tsx
+++ b/apps/frontend/src/components/Class/Ratings/ClassRatingSummary/index.tsx
@@ -1,6 +1,8 @@
-import { MetricName } from "@repo/shared";
+import { useState } from "react";
 
-import { formatDate, isMetricRating } from "../metricsUtil";
+import { METRIC_ORDER, MetricName } from "@repo/shared";
+
+import { formatDate, getAverageRatingColor, isMetricRating } from "../metricsUtil";
 import styles from "./ClassRatingSummary.module.scss";
 
 export interface ClassUserReview {
@@ -22,14 +24,24 @@ export default function ClassRatingSummary({
   );
   const metricsAverage =
     ratingMetrics.length > 0
-      ? ratingMetrics.reduce((sum, m) => sum + m.value, 0) /
-        ratingMetrics.length
+      ? ratingMetrics.reduce((sum, m) => {
+          const value =
+            m.metricName === MetricName.Difficulty ||
+            m.metricName === MetricName.Workload
+              ? 5 - m.value
+              : m.value;
+          return sum + value;
+        }, 0) / ratingMetrics.length
       : null;
 
   const rawGrade = classReview.reviewerGrade;
   const displayGrade =
     rawGrade && rawGrade.toLowerCase() !== "n/a" ? rawGrade : "N/A";
 
+  const ratingColor = metricsAverage != null ? getAverageRatingColor(metricsAverage) : null;
+
+  const [isExpanded, setIsExpanded] = useState(false);
+
   return (
     <div className={styles.root}>
       <div className={styles.body}>
@@ -40,14 +52,52 @@ export default function ClassRatingSummary({
               <h4>{formatDate(new Date(classReview.lastUpdated))}</h4>
             )}
           </div>
-
-          <h5>{classReview.reviewContent || "No written review yet."}</h5>
+          <div className={isExpanded ? styles.contentWrapper : `${styles.contentWrapper} ${styles.clamped}`}>
+            {classReview.reviewContent || "No written review yet."}
+            {!isExpanded && (
+              <button
+                className={styles.moreButton}
+                onClick={() => setIsExpanded(true)}
+              >
+                More
+              </button>
+            )}
+          </div>
+          {isExpanded && (
+            <div className={styles.metricsRow}>
+              {METRIC_ORDER.map((metricName) => {
+                const metric = (classReview.metrics ?? []).find(
+                  (m) => m.metricName === metricName
+                );
+                if (!metric) return null;
+                return (
+                  <div key={metricName} className={styles.metricItem}>
+                    <span className={styles.metricLabel}>{metricName}</span>
+                    <span className={styles.metricValue}>
+                      {metric.value.toFixed(1)}
+                    </span>
+                  </div>
+                );
+              })}
+            </div>
+          )}
+          <div className={styles.actions}>
+            <button className={styles.helpfulButton}>Helpful</button>
+            <button className={styles.reportButton}>Report</button>
+          </div>
         </div>
       </div>
       <div className={styles.body}>
         <div className={styles.bodyRight}>
           <h2 className={styles.ratingGrade}>Rating</h2>
-          <div className={styles.rating}>
+          <div
+            className={styles.rating}
+            style={ratingColor ? {
+              borderColor: ratingColor.badge,
+              backgroundColor: ratingColor.bg,
+              color: ratingColor.badge,
+            } : undefined}
+          >
             {metricsAverage != null ? (
               <span>{metricsAverage.toFixed(1)}</span>
             ) : (
@@ -55,7 +105,7 @@ export default function ClassRatingSummary({
             )}
           </div>
           <h2 className={styles.ratingGrade}>Grade</h2>
-          <div className={styles.grade}>
+          <div className={`${styles.grade}${displayGrade === "N/A" ? ` ${styles.naGrade}` : ""}`}>
             <span>{displayGrade}</span>
           </div>
         </div>
diff --git a/apps/frontend/src/components/Class/Ratings/RatingButton/RatingButton.module.scss b/apps/frontend/src/components/Class/Ratings/RatingButton/RatingButton.module.scss
index 1fc1e9241..4d006b2d0 100644
--- a/apps/frontend/src/components/Class/Ratings/RatingButton/RatingButton.module.scss
+++ b/apps/frontend/src/components/Class/Ratings/RatingButton/RatingButton.module.scss
@@ -1,16 +1,19 @@
 .button {
-  color: var(--blue-500) !important;
-  background-color: var(--foreground-color);
-  height: 38px;
+  display: flex;
+  height: 32px;
+  padding: var(--space-1, 4px) var(--space-3, 12px);
+  align-items: center;
+  gap: var(--space-2, 8px);
+  color: white !important;
+  background-color: rgb(59, 130, 246) !important;
+
+  &:hover {
+    background-color: rgb(37, 99, 235) !important;
+  }
 
   &.invalid {
-    background: var(--background-color);
+    background: var(--background-color) !important;
     cursor: default;
     color: var(--paragraph-color) !important;
-
-    &:hover {
-      background: var(--background-color);
-      color: var(--paragraph-color) !important;
-    }
   }
 }
diff --git a/apps/frontend/src/components/Class/Ratings/Ratings.module.scss b/apps/frontend/src/components/Class/Ratings/Ratings.module.scss
index cf394e3b1..bc285a61f 100644
--- a/apps/frontend/src/components/Class/Ratings/Ratings.module.scss
+++ b/apps/frontend/src/components/Class/Ratings/Ratings.module.scss
@@ -1,23 +1,21 @@
 .root {
   display: flex;
   flex-direction: column;
-  flex: 1 1 auto;
-  min-height: 0;
   align-self: stretch;
 }
 
+.ratingsBox {
+  padding: 20px 24px;
+}
+
 .containerContents {
   display: flex;
   flex-direction: column;
-  gap: var(--space-8, 48px);
+  gap: var(--space-5, 24px);
   align-self: stretch;
   min-width: 0;
 }
 
-.header {
-  margin-bottom: 16px;
-}
-
 .ratingsHeaderToolbar {
   display: flex;
   align-items: center;
@@ -143,7 +141,7 @@
 
 .ratingsSummaryHeader {
   color: var(--text-secondary-color, #404040);
-  font-feature-settings: 'liga' off;
+  font-feature-settings: "liga" off;
 
   /* Web UI (Desktop)/Heading/Heading Medium */
   font-family: Inter;
@@ -162,7 +160,7 @@
 .ratingsSummaryAverage {
   color: var(--text-secondary-color, #404040);
   text-align: center;
-  font-feature-settings: 'liga' off;
+  font-feature-settings: "liga" off;
   font-family: Inter;
   font-size: var(--font-sizes-8, 35px);
   font-style: normal;
@@ -173,7 +171,7 @@
 
 .ratingsSummaryCount {
   color: var(--text-secondary-color, #404040);
-  font-feature-settings: 'liga' off;
+  font-feature-settings: "liga" off;
 
   /* Web UI (Desktop)/Title/Title Small */
   font-family: Inter;
@@ -183,6 +181,23 @@
   line-height: 16px; /* 133.333% */
 }
 
+.noWrittenReviews {
+  display: flex;
+  padding: 80px var(--space-4, 16px);
+  justify-content: center;
+  align-items: center;
+}
+
+.noWrittenReviewsText {
+  color: var(--text-paragraph-color, #737373);
+  font-family: Inter;
+  font-size: var(--font-sizes-2, 14px);
+  font-weight: 400;
+  line-height: 20px;
+  text-align: center;
+  margin: 0;
+}
+
 .ratingSection {
   padding: 10px 0;
   border-bottom: 1px solid var(--border-color);
@@ -191,9 +206,3 @@
     border-bottom: none;
   }
 }
-
-.userOnlyMessage {
-  margin-top: 12px;
-  margin-bottom: 0;
-  color: var(--label-color);
-}
diff --git a/apps/frontend/src/components/Class/Ratings/UserRatingSummary/UserRatingSummary.module.scss b/apps/frontend/src/components/Class/Ratings/UserRatingSummary/UserRatingSummary.module.scss
index deaad8dfc..b65805adf 100644
--- a/apps/frontend/src/components/Class/Ratings/UserRatingSummary/UserRatingSummary.module.scss
+++ b/apps/frontend/src/components/Class/Ratings/UserRatingSummary/UserRatingSummary.module.scss
@@ -16,6 +16,10 @@
     align-self: stretch;
   }
 
+  .body:first-child {
+    flex: 1;
+  }
+
   .body + .body {
     margin-left: auto;
   }
@@ -68,6 +72,79 @@
       font-weight: 400;
       line-height: 20px; /* 142.857% */
       letter-spacing: -0.1px;
+      word-break: break-word;
+      overflow-wrap: break-word;
+    }
+
+    .contentWrapper {
+      position: relative;
+      color: var(--text-secondary-color, #404040);
+      font-feature-settings: 'liga' off;
+      font-family: Inter;
+      font-size: var(--font-sizes-2, 14px);
+      font-weight: 400;
+      line-height: 20px;
+      letter-spacing: -0.1px;
+      word-break: break-word;
+      overflow-wrap: break-word;
+      align-self: stretch;
+
+      &.clamped {
+        max-height: 80px; // 4 lines × 20px
+        overflow: hidden;
+      }
+
+      .moreButton {
+        position: absolute;
+        bottom: 0;
+        right: 0;
+        background: var(--foreground-color);
+        border: none;
+        padding: 0 0 0 6px;
+        color: rgb(59, 130, 246);
+        font-family: Inter;
+        font-size: var(--font-sizes-2, 14px);
+        line-height: 20px;
+        cursor: pointer;
+      }
+    }
+
+    .metricsRow {
+      display: flex;
+      align-items: flex-start;
+      gap: var(--space-4, 16px);
+      align-self: stretch;
+      margin-top: var(--space-2, 8px);
+
+      .metricItem {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 4px;
+        flex: 1 0 0;
+        padding-right: var(--space-4, 16px);
+
+        &:not(:last-child) {
+          border-right: 1px solid var(--border-color);
+        }
+      }
+
+      .metricLabel {
+        color: var(--text-secondary-color, #404040);
+        font-family: Inter;
+        font-size: var(--font-sizes-2, 14px);
+        font-weight: 500;
+        line-height: 20px;
+        letter-spacing: -0.1px;
+      }
+
+      .metricValue {
+        color: var(--text-paragraph-color, #737373);
+        font-family: Inter;
+        font-size: var(--font-sizes-2, 14px);
+        font-weight: 400;
+        line-height: 20px;
+      }
     }
   }
   .bodyRight {
@@ -75,7 +152,7 @@
     flex-direction: column;
     align-items: flex-start;
     gap: 0;
-    align-self: flex-end;
+    align-self: flex-start;
 
     > * {
       margin: 0;
@@ -97,7 +174,7 @@
       background: var(--green-500-20);
       color: var(--green-badge);
     }
-    
+
     .grade {
       display: flex;
       min-width: 22px;
@@ -108,6 +185,10 @@
       align-self: center;
       text-align: center;
       color: var(--green-badge);
+
+      &.naGrade {
+        color: var(--text-paragraph-color, #737373);
+      }
     }
   }
 }
diff --git a/apps/frontend/src/components/Class/Ratings/UserRatingSummary/index.tsx b/apps/frontend/src/components/Class/Ratings/UserRatingSummary/index.tsx
index 14ddc747c..bc7e206ea 100644
--- a/apps/frontend/src/components/Class/Ratings/UserRatingSummary/index.tsx
+++ b/apps/frontend/src/components/Class/Ratings/UserRatingSummary/index.tsx
@@ -1,8 +1,10 @@
-import { MetricName } from "@repo/shared";
+import { useState } from "react";
+
+import { METRIC_ORDER, MetricName } from "@repo/shared";
 
 import { IUserRatingClass } from "@/lib/api";
 
-import { formatDate, isMetricRating } from "../metricsUtil";
+import { formatDate, getAverageRatingColor, isMetricRating } from "../metricsUtil";
 import styles from "./UserRatingSummary.module.scss";
 
 export default function UserRatingSummary({
@@ -15,8 +17,14 @@ export default function UserRatingSummary({
   );
   const metricsAverage =
     ratingMetrics.length > 0
-      ? ratingMetrics.reduce((sum, m) => sum + m.value, 0) /
-        ratingMetrics.length
+      ? ratingMetrics.reduce((sum, m) => {
+          const value =
+            m.metricName === MetricName.Difficulty ||
+            m.metricName === MetricName.Workload
+              ? 5 - m.value
+              : m.value;
+          return sum + value;
+        }, 0) / ratingMetrics.length
       : null;
 
   const rawGrade = (
@@ -25,6 +33,10 @@ export default function UserRatingSummary({
   const displayGrade =
     rawGrade && rawGrade.toLowerCase() !== "n/a" ? rawGrade : "N/A";
 
+  const ratingColor = metricsAverage != null ? getAverageRatingColor(metricsAverage) : null;
+
+  const [isExpanded, setIsExpanded] = useState(false);
+
   return (
     <div className={styles.root}>
       <div className={styles.body}>
@@ -35,26 +47,60 @@ export default function UserRatingSummary({
               <h4>{formatDate(new Date(userRatings.lastUpdated))}</h4>
             )}
           </div>
-          
-          <h5>{userRatings.reviewContent || "No written review yet."}</h5>
+          <div className={isExpanded ? styles.contentWrapper : `${styles.contentWrapper} ${styles.clamped}`}>
+            {userRatings.reviewContent || "No written review yet."}
+            {!isExpanded && (
+              <button
+                className={styles.moreButton}
+                onClick={() => setIsExpanded(true)}
+              >
+                More
+              </button>
+            )}
+          </div>
+          {isExpanded && (
+            <div className={styles.metricsRow}>
+              {METRIC_ORDER.map((metricName) => {
+                const metric = userRatings.metrics.find(
+                  (m) => m.metricName === metricName
+                );
+                if (!metric) return null;
+                return (
+                  <div key={metricName} className={styles.metricItem}>
+                    <span className={styles.metricLabel}>{metricName}</span>
+                    <span className={styles.metricValue}>
+                      {metric.value.toFixed(1)}
+                    </span>
+                  </div>
+                );
+              })}
+            </div>
+          )}
         </div>
       </div>
       <div className={styles.body}>
-      <div className={styles.bodyRight}>
-        <h2 className={styles.ratingGrade}>Rating</h2>
-        <div className={styles.rating}>
-          {metricsAverage != null ? (
-            <span>{metricsAverage.toFixed(1)}</span>
-          ) : (
-            <span>N/A</span>
-          )}
-        </div>
-        <h2 className={styles.ratingGrade}>Grade</h2>
-        <div className={styles.grade}>
-          <span>{displayGrade}</span>
+        <div className={styles.bodyRight}>
+          <h2 className={styles.ratingGrade}>Rating</h2>
+          <div
+            className={styles.rating}
+            style={ratingColor ? {
+              borderColor: ratingColor.badge,
+              backgroundColor: ratingColor.bg,
+              color: ratingColor.badge,
+            } : undefined}
+          >
+            {metricsAverage != null ? (
+              <span>{metricsAverage.toFixed(1)}</span>
+            ) : (
+              <span>N/A</span>
+            )}
+          </div>
+          <h2 className={styles.ratingGrade}>Grade</h2>
+          <div className={`${styles.grade}${displayGrade === "N/A" ? ` ${styles.naGrade}` : ""}`}>
+            <span>{displayGrade}</span>
+          </div>
         </div>
       </div>
-      </div>
     </div>
   );
 }
diff --git a/apps/frontend/src/components/Class/Ratings/index.tsx b/apps/frontend/src/components/Class/Ratings/index.tsx
index 8a1031b08..bcc0fb508 100644
--- a/apps/frontend/src/components/Class/Ratings/index.tsx
+++ b/apps/frontend/src/components/Class/Ratings/index.tsx
@@ -41,10 +41,8 @@ import {
 import { getRatingErrorMessage } from "@/utils/ratingErrorMessages";
 import { clampCount } from "@/utils/ratings";
 
+import ClassRatingSummary, { type ClassUserReview } from "./ClassRatingSummary";
 import { RatingButton } from "./RatingButton";
-import ClassRatingSummary, {
-  type ClassUserReview,
-} from "./ClassRatingSummary";
 import { RatingDetailProps, RatingDetailView } from "./RatingDetail";
 import styles from "./Ratings.module.scss";
 import UserRatingSummary from "./UserRatingSummary";
@@ -79,6 +77,8 @@ type ClassReviewsQueryData = {
     users?: Array<{
       anonymousUserId?: string;
       classes?: Array<{
+        semester?: string | null;
+        year?: number | null;
         professorName?: string | null;
         reviewTitle?: string | null;
         reviewContent?: string | null;
@@ -107,7 +107,6 @@ export function RatingsContainer() {
   );
   const [selectedValue, setSelectedValue] = useState("all");
   const [sortBy, setSortBy] = useState<string | null>(null);
-  const [allChosen, setAllChosen] = useState(true);
   const [instructorChosen, setInstructorChosen] = useState(false);
   const [semesterChosen, setSemesterChosen] = useState(false);
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
@@ -177,8 +176,6 @@ export function RatingsContainer() {
       return true;
     });
   }, [userRatingsData]);
-  const showUserOnlyRatings = Boolean(userRatings) && !hasRatings;
-
   const [isModalOpen, setIsModalOpen] = useState(() => {
     return searchParams.get("feedbackModal") === "true";
   });
@@ -188,7 +185,6 @@ export function RatingsContainer() {
     setSelectedValue("all");
     setActiveRatingTab(RATING_TABS.Instructor);
     setSortBy(null);
-    setAllChosen(true);
     setInstructorChosen(false);
     setSemesterChosen(false);
   }, [aggregatedRatingsData]);
@@ -261,8 +257,8 @@ export function RatingsContainer() {
 
   const ratingsData = useMemo<RatingDetailProps[] | null>(() => {
     const metrics =
-      aggregatedRatingsData?.metrics?.filter(
-        (metric): metric is IMetric => Boolean(metric)
+      aggregatedRatingsData?.metrics?.filter((metric): metric is IMetric =>
+        Boolean(metric)
       ) ?? [];
 
     if (
@@ -450,10 +446,18 @@ export function RatingsContainer() {
     let totalPoints = 0;
     for (const cls of users.flatMap((u) => u.classes ?? [])) {
       const metrics = cls.metrics ?? [];
-      if (!metrics.some((m) => m.metricName === MetricName.Usefulness)) continue;
+      if (!metrics.some((m) => m.metricName === MetricName.Usefulness))
+        continue;
       count += 1;
       for (const m of metrics) {
-        if (isMetricRating(m.metricName)) totalPoints += m.value;
+        if (isMetricRating(m.metricName)) {
+          const value =
+            m.metricName === MetricName.Difficulty ||
+            m.metricName === MetricName.Workload
+              ? 5 - m.value
+              : m.value;
+          totalPoints += value;
+        }
       }
     }
 
@@ -465,10 +469,28 @@ export function RatingsContainer() {
     const users = classRatingsData?.classReviews?.users ?? [];
     return users
       .map((user) => user.classes?.[0] ?? null)
-      .filter((classReview): classReview is ClassUserReview =>
+      .filter((classReview): classReview is NonNullable<typeof classReview> =>
         Boolean(classReview)
-      );
-  }, [classRatingsData]);
+      )
+      .filter((classReview) => Boolean(classReview.reviewContent?.trim()))
+      .filter((classReview) => {
+        if (semesterChosen && selectedValue !== "all") {
+          return (
+            `${classReview.semester} ${classReview.year}` === selectedValue
+          );
+        }
+        if (instructorChosen && sortBy) {
+          return classReview.professorName === sortBy;
+        }
+        return true;
+      });
+  }, [
+    classRatingsData,
+    semesterChosen,
+    instructorChosen,
+    selectedValue,
+    sortBy,
+  ]);
 
   if (loading && !ratingsQueryData) {
     return <EmptyState loading />;
@@ -476,51 +498,7 @@ export function RatingsContainer() {
 
   return (
     <>
-      {showUserOnlyRatings ? (
-        <div className={styles.root}>
-          <Box p="5">
-            <Container size="3">
-              {userRatings && (
-                <div className={styles.ratingsSummary}>
-                  <div className={styles.ratingsSummaryTop}>
-                    <p className={styles.ratingsSummaryHeader}>Your Rating</p>
-                    <div className={styles.ratingsSummaryHeaderRight}>
-                      <Flex gap="2">
-                        <Tooltip
-                          trigger={
-                            <Button
-                              variant="secondary"
-                              onClick={() => handleModalStateChange(true)}
-                            >
-                              Edit your rating
-                              <EditPencil width={18} height={18} />
-                            </Button>
-                          }
-                          title="Edit rating"
-                        />
-                        <Tooltip
-                          trigger={
-                            <IconButton
-                              onClick={() => setIsDeleteModalOpen(true)}
-                            >
-                              <Trash />
-                            </IconButton>
-                          }
-                          title="Delete rating"
-                        />
-                      </Flex>
-                    </div>
-                  </div>
-                  <UserRatingSummary userRatings={userRatings} />
-                </div>
-              )}
-              <p className={styles.userOnlyMessage}>
-                Only your rating is shown for this course.
-              </p>
-            </Container>
-          </Box>
-        </div>
-      ) : !hasRatings ? (
+      {!hasRatings ? (
         <EmptyState
           icon={<UserStar width={32} height={32} strokeWidth={1.5} />}
           heading="No Course Ratings"
@@ -541,68 +519,78 @@ export function RatingsContainer() {
         </EmptyState>
       ) : (
         <div className={styles.root}>
-          <Box p="5">
+          <Box className={styles.ratingsBox}>
             <Container size="3">
               <div className={styles.containerContents}>
-              <div className={styles.ratingsSummary}>
-                <div className={styles.ratingsSummaryTop}>
-                  <p className={styles.ratingsSummaryHeader}>Rating Summary</p>
-                </div>
-                <div className={styles.ratingsSummaryBottom}>
-                  <div className={styles.ratingsSummaryBottomLeft}>
-                    <p className={styles.ratingsSummaryAverage}>
-                      {classReviewsSummary.average != null
-                        ? classReviewsSummary.average.toFixed(1)
-                        : "—"}
-                    </p>
-                    <p className={styles.ratingsSummaryCount}>
-                      {classReviewsSummary.count === 0
-                        ? "No ratings"
-                        : classReviewsSummary.count === 1
-                          ? "1 rating"
-                          : `${classReviewsSummary.count} ratings`}
-                    </p>
+                <div className={styles.ratingsSummary}>
+                  <div className={styles.ratingsSummaryTop}>
+                    <p className={styles.ratingsSummaryHeader}>Overview</p>
+                    {!userRatings && (
+                      <div className={styles.ratingsSummaryHeaderRight}>
+                        <RatingButton
+                          user={user}
+                          onOpenModal={handleModalStateChange}
+                          userRatingData={userRatingsData}
+                          currentClass={currentClass}
+                        />
+                      </div>
+                    )}
                   </div>
-                  <div className={styles.ratingsSummaryBottomRight}>
-                    <div
-                      className={styles.ratingsBody}
-                      style={{
-                        backgroundColor: !hasRatings
-                          ? "transparent"
-                          : "var(--foreground-color)",
-                        boxShadow: !hasRatings
-                          ? "none"
-                          : "0 1px 2px rgb(0 0 0 / 5%)",
-                        border: !hasRatings
-                          ? "none"
-                          : "1px solid var(--border-color)",
-                      }}
-                    >
-                      {ratingsData
-                        ?.filter((ratingData) =>
-                          isMetricRating(ratingData.metric)
-                        )
-                        .sort((a, b) => {
-                          const indexA = METRIC_ORDER.indexOf(a.metric);
-                          const indexB = METRIC_ORDER.indexOf(b.metric);
-                          return indexA - indexB;
-                        })
-                        .map((ratingData) => (
-                          <div
-                            className={styles.ratingSection}
-                            key={ratingData.metric}
-                          >
-                            <RatingDetailView {...ratingData} />
-                          </div>
-                        ))}
+                  <div className={styles.ratingsSummaryBottom}>
+                    <div className={styles.ratingsSummaryBottomLeft}>
+                      <p className={styles.ratingsSummaryAverage}>
+                        {classReviewsSummary.average != null
+                          ? classReviewsSummary.average.toFixed(1)
+                          : "—"}
+                      </p>
+                      <p className={styles.ratingsSummaryCount}>
+                        {classReviewsSummary.count === 0
+                          ? "No ratings"
+                          : classReviewsSummary.count === 1
+                            ? "1 rating"
+                            : `${classReviewsSummary.count} ratings`}
+                      </p>
+                    </div>
+                    <div className={styles.ratingsSummaryBottomRight}>
+                      <div
+                        className={styles.ratingsBody}
+                        style={{
+                          backgroundColor: !hasRatings
+                            ? "transparent"
+                            : "var(--foreground-color)",
+                          boxShadow: !hasRatings
+                            ? "none"
+                            : "0 1px 2px rgb(0 0 0 / 5%)",
+                          border: !hasRatings
+                            ? "none"
+                            : "1px solid var(--border-color)",
+                        }}
+                      >
+                        {ratingsData
+                          ?.filter((ratingData) =>
+                            isMetricRating(ratingData.metric)
+                          )
+                          .sort((a, b) => {
+                            const indexA = METRIC_ORDER.indexOf(a.metric);
+                            const indexB = METRIC_ORDER.indexOf(b.metric);
+                            return indexA - indexB;
+                          })
+                          .map((ratingData) => (
+                            <div
+                              className={styles.ratingSection}
+                              key={ratingData.metric}
+                            >
+                              <RatingDetailView {...ratingData} />
+                            </div>
+                          ))}
+                      </div>
                     </div>
                   </div>
                 </div>
-              </div>
-              
-              <div className={styles.ratingsSummary}>
-                <div className={styles.ratingsSummaryTop}>
-                  <p className={styles.ratingsSummaryHeader}>Your Rating</p>
+
+                <div className={styles.ratingsSummary}>
+                  {/* <div className={styles.ratingsSummaryTop}> */}
+                  {/* <p className={styles.ratingsSummaryHeader}>Your Rating</p> */}
                   {userRatings ? (
                     <div className={styles.ratingsSummaryHeaderRight}>
                       <Flex gap="2">
@@ -631,139 +619,120 @@ export function RatingsContainer() {
                       </Flex>
                     </div>
                   ) : null}
+                  {/* </div> */}
+                  {userRatings ? (
+                    <UserRatingSummary userRatings={userRatings} />
+                  ) : (
+                    <div></div>
+                  )}
                 </div>
-                {userRatings ? (
-                  <UserRatingSummary userRatings={userRatings} />
-                ) : (
-                  <div></div>
-                )}
-              </div>
 
-              <div className={styles.ratingsSummary}>
-                <div className={styles.ratingsSummaryTop}>
-                  <p className={styles.ratingsSummaryHeader}>Ratings</p>
-                  <div className={styles.ratingsSummaryHeaderRight}>
-                    {hasRatings ? (
-                      <div className={styles.ratingsHeaderToolbar}>
-                        {!userRatings && (
-                          <RatingButton
-                            user={user}
-                            onOpenModal={handleModalStateChange}
-                            userRatingData={userRatingsData}
-                            currentClass={currentClass}
-                          />
-                        )}
-                        <div className={styles.termSelectWrapper}>
-                          <Select
-                            variant="foreground"
-                            searchable
-                            searchPlaceholder={
-                              activeRatingTab === RATING_TABS.Instructor
-                                ? "Search instructors"
-                                : "Search semesters"
-                            }
-                            emptyMessage={
-                              activeRatingTab === RATING_TABS.Instructor
-                                ? "No instructors found"
-                                : "No semesters found"
-                            }
-                            tabs={[
-                              {
-                                value: RATING_TABS.Instructor,
-                                label: "By Instructor",
-                                options: instructorSelectOptions,
-                              },
-                              {
-                                value: RATING_TABS.Semester,
-                                label: "By Semester",
-                                options: termSelectOptions,
-                              },
-                            ]}
-                            contentClassName={styles.ratingsSelectContent}
-                            tabsWrapperClassName={styles.ratingsSelectTabs}
-                            value={selectedValue}
-                            defaultTab={RATING_TABS.Instructor}
-                            onTabChange={(tabValue) => {
-                              setActiveRatingTab(tabValue);
-                              setSelectedValue("all");
-                              setSortBy(null);
-                              setAllChosen(true);
-                              setInstructorChosen(false);
-                              setSemesterChosen(false);
-                            }}
-                            onChange={(newValue) => {
-                              if (Array.isArray(newValue) || !newValue) return;
-
-                              setSelectedValue(newValue);
-
-                              if (newValue === "all") {
+                <div className={styles.ratingsSummary}>
+                  <div className={styles.ratingsSummaryTop}>
+                    <p className={styles.ratingsSummaryHeader}>Ratings</p>
+                    <div className={styles.ratingsSummaryHeaderRight}>
+                      {hasRatings ? (
+                        <div className={styles.ratingsHeaderToolbar}>
+                          <div className={styles.termSelectWrapper}>
+                            <Select
+                              variant="foreground"
+                              searchable
+                              searchPlaceholder={
+                                activeRatingTab === RATING_TABS.Instructor
+                                  ? "Search instructors"
+                                  : "Search semesters"
+                              }
+                              emptyMessage={
+                                activeRatingTab === RATING_TABS.Instructor
+                                  ? "No instructors found"
+                                  : "No semesters found"
+                              }
+                              tabs={[
+                                {
+                                  value: RATING_TABS.Instructor,
+                                  label: "By Instructor",
+                                  options: instructorSelectOptions,
+                                },
+                                {
+                                  value: RATING_TABS.Semester,
+                                  label: "By Semester",
+                                  options: termSelectOptions,
+                                },
+                              ]}
+                              contentClassName={styles.ratingsSelectContent}
+                              tabsWrapperClassName={styles.ratingsSelectTabs}
+                              value={selectedValue}
+                              defaultTab={RATING_TABS.Instructor}
+                              onTabChange={(tabValue) => {
+                                setActiveRatingTab(tabValue);
+                                setSelectedValue("all");
                                 setSortBy(null);
-                                setAllChosen(true);
                                 setInstructorChosen(false);
                                 setSemesterChosen(false);
-                                return;
-                              }
-
-                              if (activeRatingTab === RATING_TABS.Semester) {
-                                setAllChosen(false);
-                                setInstructorChosen(false);
-                                setSemesterChosen(true);
-                                setSortBy(newValue);
-                                return;
-                              }
-
-                              const selectedInstructorOption =
-                                instructorSelectOptions.find(
-                                  (o) => o.value === newValue
+                              }}
+                              onChange={(newValue) => {
+                                if (Array.isArray(newValue) || !newValue)
+                                  return;
+
+                                setSelectedValue(newValue);
+
+                                if (newValue === "all") {
+                                  setSortBy(null);
+                                  setInstructorChosen(false);
+                                  setSemesterChosen(false);
+                                  return;
+                                }
+
+                                if (activeRatingTab === RATING_TABS.Semester) {
+                                  setInstructorChosen(false);
+                                  setSemesterChosen(true);
+                                  setSortBy(newValue);
+                                  return;
+                                }
+
+                                const selectedInstructorOption =
+                                  instructorSelectOptions.find(
+                                    (o) => o.value === newValue
+                                  );
+                                setInstructorChosen(true);
+                                setSemesterChosen(false);
+                                setSortBy(
+                                  selectedInstructorOption?.label ?? newValue
                                 );
-                              setAllChosen(false);
-                              setInstructorChosen(true);
-                              setSemesterChosen(false);
-                              setSortBy(
-                                selectedInstructorOption?.label ?? newValue
-                              );
-                            }}
-                            placeholder={
-                              activeRatingTab === RATING_TABS.Instructor
-                                ? "Select instructor"
-                                : "Select term"
-                            }
-                          />
+                              }}
+                              placeholder={
+                                activeRatingTab === RATING_TABS.Instructor
+                                  ? "Select instructor"
+                                  : "Select term"
+                              }
+                            />
+                          </div>
                         </div>
-                      </div>
-                    ) : null}
+                      ) : null}
+                    </div>
                   </div>
+                  {classReviewsByUser.length === 0 ? (
+                    <div className={styles.noWrittenReviews}>
+                      <p className={styles.noWrittenReviewsText}>
+                        No written ratings yet. Be the first to share your
+                        experience!
+                      </p>
+                    </div>
+                  ) : (
+                    classReviewsByUser.map((classReview, index) => (
+                      <ClassRatingSummary
+                        key={`${classReview.lastUpdated ?? "review"}-${index}`}
+                        classReview={classReview}
+                      />
+                    ))
+                  )}
                 </div>
-                {classReviewsByUser.length > 0 ? (
-                  classReviewsByUser.map((classReview, index) => (
-                    <ClassRatingSummary
-                      key={`${classReview.lastUpdated ?? "review"}-${index}`}
-                      classReview={classReview}
-                    />
-                  ))
-                ) : (
-                  <div></div>
-                )}
-              </div>
-
               </div>
             </Container>
           </Box>
         </div>
       )}
 
-      <div>
-        <p>allChosen: {String(allChosen)}</p>
-        <p>instructorChosen: {String(instructorChosen)}</p>
-        <p>semesterChosen: {String(semesterChosen)}</p>
-        <p>sortBy: {sortBy === null ? "null" : sortBy}</p>
-        <h3>ClassReviews raw response</h3>
-        <pre>{JSON.stringify(classRatingsData, null, 2)}</pre>
-        <h3>Ratings Data (not correctly showing the counts)</h3>
-        <pre>{JSON.stringify(ratingsData, null, 2)}</pre>
-      </div>
-
-
       <UserFeedbackModal
         isOpen={isModalOpen}
         onClose={() => handleModalStateChange(false)}
diff --git a/apps/frontend/src/components/Class/Ratings/metricsUtil.ts b/apps/frontend/src/components/Class/Ratings/metricsUtil.ts
index 2332d0f9a..8275348ed 100644
--- a/apps/frontend/src/components/Class/Ratings/metricsUtil.ts
+++ b/apps/frontend/src/components/Class/Ratings/metricsUtil.ts
@@ -31,6 +31,20 @@ const COLOR_THRESHOLDS = [
   { min: 0, inverse: "green", normal: "red" },
 ];
 
+export function getAverageRatingColor(average: number): {
+  badge: string;
+  bg: string;
+} {
+  const threshold =
+    COLOR_THRESHOLDS.find((t) => average >= t.min) ??
+    COLOR_THRESHOLDS[COLOR_THRESHOLDS.length - 1];
+  const color = threshold.normal;
+  return {
+    badge: `var(--${color}-badge)`,
+    bg: `var(--${color}-500-20)`,
+  };
+}
+
 export function getStatusColor(
   metricName: MetricName,
   weightedAverage: number

From eb80c4923aa9e3881abce62b757cefea493b9850 Mon Sep 17 00:00:00 2001
From: Henry Kim <henry1112200@gmail.com>
Date: Wed, 15 Apr 2026 23:06:31 -0700
Subject: [PATCH 21/34] format

---
 .../Ratings/ClassRatingSummary/index.tsx      | 35 ++++++++++++++-----
 .../Class/Ratings/UserRatingSummary/index.tsx | 35 ++++++++++++++-----
 2 files changed, 52 insertions(+), 18 deletions(-)

diff --git a/apps/frontend/src/components/Class/Ratings/ClassRatingSummary/index.tsx b/apps/frontend/src/components/Class/Ratings/ClassRatingSummary/index.tsx
index c1597e976..1ced12640 100644
--- a/apps/frontend/src/components/Class/Ratings/ClassRatingSummary/index.tsx
+++ b/apps/frontend/src/components/Class/Ratings/ClassRatingSummary/index.tsx
@@ -2,7 +2,11 @@ import { useState } from "react";
 
 import { METRIC_ORDER, MetricName } from "@repo/shared";
 
-import { formatDate, getAverageRatingColor, isMetricRating } from "../metricsUtil";
+import {
+  formatDate,
+  getAverageRatingColor,
+  isMetricRating,
+} from "../metricsUtil";
 import styles from "./ClassRatingSummary.module.scss";
 
 export interface ClassUserReview {
@@ -38,7 +42,8 @@ export default function ClassRatingSummary({
   const displayGrade =
     rawGrade && rawGrade.toLowerCase() !== "n/a" ? rawGrade : "N/A";
 
-  const ratingColor = metricsAverage != null ? getAverageRatingColor(metricsAverage) : null;
+  const ratingColor =
+    metricsAverage != null ? getAverageRatingColor(metricsAverage) : null;
 
   const [isExpanded, setIsExpanded] = useState(false);
 
@@ -52,7 +57,13 @@ export default function ClassRatingSummary({
               <h4>{formatDate(new Date(classReview.lastUpdated))}</h4>
             )}
           </div>
-          <div className={isExpanded ? styles.contentWrapper : `${styles.contentWrapper} ${styles.clamped}`}>
+          <div
+            className={
+              isExpanded
+                ? styles.contentWrapper
+                : `${styles.contentWrapper} ${styles.clamped}`
+            }
+          >
             {classReview.reviewContent || "No written review yet."}
             {!isExpanded && (
               <button
@@ -92,11 +103,15 @@ export default function ClassRatingSummary({
           <h2 className={styles.ratingGrade}>Rating</h2>
           <div
             className={styles.rating}
-            style={ratingColor ? {
-              borderColor: ratingColor.badge,
-              backgroundColor: ratingColor.bg,
-              color: ratingColor.badge,
-            } : undefined}
+            style={
+              ratingColor
+                ? {
+                    borderColor: ratingColor.badge,
+                    backgroundColor: ratingColor.bg,
+                    color: ratingColor.badge,
+                  }
+                : undefined
+            }
           >
             {metricsAverage != null ? (
               <span>{metricsAverage.toFixed(1)}</span>
@@ -105,7 +120,9 @@ export default function ClassRatingSummary({
             )}
           </div>
           <h2 className={styles.ratingGrade}>Grade</h2>
-          <div className={`${styles.grade}${displayGrade === "N/A" ? ` ${styles.naGrade}` : ""}`}>
+          <div
+            className={`${styles.grade}${displayGrade === "N/A" ? ` ${styles.naGrade}` : ""}`}
+          >
             <span>{displayGrade}</span>
           </div>
         </div>
diff --git a/apps/frontend/src/components/Class/Ratings/UserRatingSummary/index.tsx b/apps/frontend/src/components/Class/Ratings/UserRatingSummary/index.tsx
index bc7e206ea..4cef1569a 100644
--- a/apps/frontend/src/components/Class/Ratings/UserRatingSummary/index.tsx
+++ b/apps/frontend/src/components/Class/Ratings/UserRatingSummary/index.tsx
@@ -4,7 +4,11 @@ import { METRIC_ORDER, MetricName } from "@repo/shared";
 
 import { IUserRatingClass } from "@/lib/api";
 
-import { formatDate, getAverageRatingColor, isMetricRating } from "../metricsUtil";
+import {
+  formatDate,
+  getAverageRatingColor,
+  isMetricRating,
+} from "../metricsUtil";
 import styles from "./UserRatingSummary.module.scss";
 
 export default function UserRatingSummary({
@@ -33,7 +37,8 @@ export default function UserRatingSummary({
   const displayGrade =
     rawGrade && rawGrade.toLowerCase() !== "n/a" ? rawGrade : "N/A";
 
-  const ratingColor = metricsAverage != null ? getAverageRatingColor(metricsAverage) : null;
+  const ratingColor =
+    metricsAverage != null ? getAverageRatingColor(metricsAverage) : null;
 
   const [isExpanded, setIsExpanded] = useState(false);
 
@@ -47,7 +52,13 @@ export default function UserRatingSummary({
               <h4>{formatDate(new Date(userRatings.lastUpdated))}</h4>
             )}
           </div>
-          <div className={isExpanded ? styles.contentWrapper : `${styles.contentWrapper} ${styles.clamped}`}>
+          <div
+            className={
+              isExpanded
+                ? styles.contentWrapper
+                : `${styles.contentWrapper} ${styles.clamped}`
+            }
+          >
             {userRatings.reviewContent || "No written review yet."}
             {!isExpanded && (
               <button
@@ -83,11 +94,15 @@ export default function UserRatingSummary({
           <h2 className={styles.ratingGrade}>Rating</h2>
           <div
             className={styles.rating}
-            style={ratingColor ? {
-              borderColor: ratingColor.badge,
-              backgroundColor: ratingColor.bg,
-              color: ratingColor.badge,
-            } : undefined}
+            style={
+              ratingColor
+                ? {
+                    borderColor: ratingColor.badge,
+                    backgroundColor: ratingColor.bg,
+                    color: ratingColor.badge,
+                  }
+                : undefined
+            }
           >
             {metricsAverage != null ? (
               <span>{metricsAverage.toFixed(1)}</span>
@@ -96,7 +111,9 @@ export default function UserRatingSummary({
             )}
           </div>
           <h2 className={styles.ratingGrade}>Grade</h2>
-          <div className={`${styles.grade}${displayGrade === "N/A" ? ` ${styles.naGrade}` : ""}`}>
+          <div
+            className={`${styles.grade}${displayGrade === "N/A" ? ` ${styles.naGrade}` : ""}`}
+          >
             <span>{displayGrade}</span>
           </div>
         </div>

From b68ea9f4717ff84a4e6d2f10d4cfa71592d73506 Mon Sep 17 00:00:00 2001
From: Henry Kim <henry1112200@gmail.com>
Date: Thu, 16 Apr 2026 15:10:17 -0700
Subject: [PATCH 22/34] helpful button backend & minor ui fixes

---
 apps/backend/src/modules/rating/controller.ts | 169 ++++++++++--------
 apps/backend/src/modules/rating/resolver.ts   |  19 ++
 .../ClassRatingSummary.module.scss            |  28 ++-
 .../Ratings/ClassRatingSummary/index.tsx      |  58 +++++-
 .../UserFeedbackModal/FeedbackForm.tsx        |   1 +
 .../Class/Ratings/UserFeedbackModal/index.tsx |   3 +-
 .../UserRatingSummary.module.scss             |  14 ++
 .../Class/Ratings/UserRatingSummary/index.tsx |  21 ++-
 .../src/components/Class/Ratings/index.tsx    |   5 +-
 apps/frontend/src/lib/api/ratings.ts          |   8 +
 packages/common/src/models/review.ts          |   8 +
 packages/gql-typedefs/rating.ts               |   4 +
 12 files changed, 251 insertions(+), 87 deletions(-)

diff --git a/apps/backend/src/modules/rating/controller.ts b/apps/backend/src/modules/rating/controller.ts
index 5251e1ac1..8a4c055a2 100644
--- a/apps/backend/src/modules/rating/controller.ts
+++ b/apps/backend/src/modules/rating/controller.ts
@@ -1060,101 +1060,71 @@ export const createRatings = async (
       }
 
       // Step 2: Soft-delete and create review snapshots
-      // `valid` identifies the latest active review for a user/course.
+      // Update or create the review for this user/course.
       if (
         reviewTitle !== undefined ||
         reviewContent !== undefined ||
         reviewerGrade !== undefined
       ) {
-        const activeReviewFilter = {
-          createdBy: context.user._id,
-          courseId,
-          $or: [{ valid: true }, { valid: { $exists: false } }],
-        };
-
         const normalizedTitle = (reviewTitle ?? "").trim();
         const normalizedContent = (reviewContent ?? "").trim();
         const normalizedReviewerGrade = (reviewerGrade ?? "n/a").trim() || "n/a";
         const hasReviewPayload =
           normalizedTitle.length > 0 || normalizedContent.length > 0;
 
-        if (!hasReviewPayload) {
-          await ReviewModel.updateMany(
-            activeReviewFilter,
-            { $set: { valid: false } },
-            { session }
-          );
-        } else {
-          const allReviews = await ReviewModel.find({
-            createdBy: context.user._id,
-            courseId,
-          }).session(session);
-
-          const reusableReview =
-            allReviews.find(
-              (existingReview) =>
-                (existingReview.reviewTitle ?? "").trim() === normalizedTitle &&
-                (existingReview.reviewContent ?? "").trim() ===
-                  normalizedContent &&
-                (existingReview.reviewerGrade ?? "n/a") ===
-                  normalizedReviewerGrade
-            ) ?? null;
-
-          if (reusableReview) {
-            await ReviewModel.updateMany(
-              {
-                ...activeReviewFilter,
-                _id: { $ne: reusableReview._id },
-              },
-              { $set: { valid: false } },
-              { session }
-            );
+        const existingReview = await ReviewModel.findOne({
+          createdBy: context.user._id,
+          courseId,
+          $or: [{ valid: true }, { valid: { $exists: false } }],
+        }).session(session);
 
+        if (!hasReviewPayload) {
+          if (existingReview) {
             await ReviewModel.updateOne(
-              { _id: reusableReview._id },
-              {
-                $set: {
-                  valid: true,
-                  reviewTitle: normalizedTitle,
-                  reviewContent: normalizedContent,
-                  reviewerGrade: normalizedReviewerGrade,
-                  classId,
-                  subject,
-                  courseNumber,
-                  semester,
-                  year,
-                  classNumber,
-                },
-              },
-              { session }
-            );
-          } else {
-            await ReviewModel.updateMany(
-              activeReviewFilter,
+              { _id: existingReview._id },
               { $set: { valid: false } },
               { session }
             );
-
-            await ReviewModel.create(
-              [
-                {
-                  createdBy: context.user._id,
-                  courseId,
-                  reviewTitle: normalizedTitle,
-                  reviewContent: normalizedContent,
-                  reviewerGrade: normalizedReviewerGrade,
-                  classId,
-                  subject,
-                  courseNumber,
-                  semester,
-                  year,
-                  classNumber,
-                  valid: true,
-                },
-              ],
-              { session }
-            );
           }
+        } else if (existingReview) {
+          await ReviewModel.updateOne(
+            { _id: existingReview._id },
+            {
+              $set: {
+                reviewTitle: normalizedTitle,
+                reviewContent: normalizedContent,
+                reviewerGrade: normalizedReviewerGrade,
+                classId,
+                subject,
+                courseNumber,
+                semester,
+                year,
+                classNumber,
+                valid: true,
+              },
+            },
+            { session }
+          );
+        } else {
+          await ReviewModel.create(
+            [
+              {
+                createdBy: context.user._id,
+                courseId,
+                reviewTitle: normalizedTitle,
+                reviewContent: normalizedContent,
+                reviewerGrade: normalizedReviewerGrade,
+                classId,
+                subject,
+                courseNumber,
+                semester,
+                year,
+                classNumber,
+                valid: true,
+              },
+            ],
+            { session }
+          );
         }
       }
 
@@ -1275,6 +1245,41 @@ const anonymizeUserId = (userId: string): string => {
   return createHash("sha256").update(userId).digest("hex").slice(0, 16);
 };
 
+export const voteReviewHelpful = async (
+  context: RequestContext,
+  reviewId: string
+): Promise<number> => {
+  if (!context.user._id) {
+    throw new GraphQLError("Unauthorized", {
+      extensions: { code: "UNAUTHENTICATED" },
+    });
+  }
+
+  const review = await ReviewModel.findById(reviewId);
+  if (!review) {
+    throw new GraphQLError("Review not found", {
+      extensions: { code: "NOT_FOUND" },
+    });
+  }
+
+  const userId = context.user._id;
+  const alreadyVoted = (review.helpfulVoters as string[] | undefined)?.includes(userId) ?? false;
+
+  if (alreadyVoted) {
+    await ReviewModel.updateOne(
+      { _id: review._id },
+      { $pull: { helpfulVoters: userId }, $inc: { helpfulCount: -1 } }
+    );
+    return Math.max(0, ((review.helpfulCount as number | undefined) ?? 0) - 1);
+  } else {
+    await ReviewModel.updateOne(
+      { _id: review._id },
+      { $addToSet: { helpfulVoters: userId }, $inc: { helpfulCount: 1 } }
+    );
+    return ((review.helpfulCount as number | undefined) ?? 0) + 1;
+  }
+};
+
 export const getAllRatings = async () => {
   const ratings = await RatingModel.find({}).lean();
   const shadowBannedCourseIds = await getShadowBannedCourseIds();
@@ -1346,18 +1351,22 @@ export const getClassRatings = async (subject: string, courseNumber: string) =>
   const reviewByUser = new Map<
     string,
     {
+      reviewId: string;
       reviewTitle?: string | null;
       reviewContent?: string | null;
       reviewerGrade?: string | null;
+      helpfulCount: number;
     }
   >();
   activeReviews.forEach((review) => {
     if (reviewByUser.has(review.createdBy)) return;
     reviewByUser.set(review.createdBy, {
+      reviewId: review._id?.toString() ?? "",
       reviewTitle: review.reviewTitle ?? null,
       reviewContent: review.reviewContent ?? null,
       reviewerGrade:
         (review.reviewerGrade as string | null) ?? "n/a",
+      helpfulCount: (review.helpfulCount as number | undefined) ?? 0,
     });
   });
 
@@ -1394,6 +1403,8 @@ export const getClassRatings = async (subject: string, courseNumber: string) =>
     reviewContent?: string | null;
     reviewerGrade?: string | null;
     lastUpdated: string;
+    reviewId?: string | null;
+    helpfulCount: number;
   };
 
   const userClassesById = new Map<string, Map<string, UserClassEntry>>();
@@ -1430,6 +1441,8 @@ export const getClassRatings = async (subject: string, courseNumber: string) =>
         reviewContent: review?.reviewContent ?? null,
         reviewerGrade: review?.reviewerGrade ?? "n/a",
         lastUpdated: timestamp.toISOString(),
+        reviewId: review?.reviewId ?? null,
+        helpfulCount: review?.helpfulCount ?? 0,
       });
       userClassesById.set(userId, userClasses);
       return;
diff --git a/apps/backend/src/modules/rating/resolver.ts b/apps/backend/src/modules/rating/resolver.ts
index 77851526b..465c0341b 100644
--- a/apps/backend/src/modules/rating/resolver.ts
+++ b/apps/backend/src/modules/rating/resolver.ts
@@ -9,6 +9,7 @@ import {
   getSemestersWithRatings,
   getUserClassRatings,
   getUserRatings,
+  voteReviewHelpful,
 } from "./controller";
 import { RatingModule } from "./generated-types/module-types";
 
@@ -213,6 +214,24 @@ const resolvers: RatingModule.Resolvers = {
       }
     },
 
+    voteReviewHelpful: async (_, { reviewId }, context) => {
+      try {
+        return await voteReviewHelpful(context, reviewId);
+      } catch (error: unknown) {
+        if (error instanceof GraphQLError) {
+          throw error;
+        }
+        throw new GraphQLError(
+          typeof error === "object" && error !== null && "message" in error
+            ? String(error.message)
+            : "An unexpected error occurred",
+          {
+            extensions: { code: "INTERNAL_SERVER_ERROR" },
+          }
+        );
+      }
+    },
+
     deleteRatings: async (_, { subject, courseNumber }, context) => {
       try {
         return await deleteRatings(context, subject, courseNumber);
diff --git a/apps/frontend/src/components/Class/Ratings/ClassRatingSummary/ClassRatingSummary.module.scss b/apps/frontend/src/components/Class/Ratings/ClassRatingSummary/ClassRatingSummary.module.scss
index 6789a594d..559cd6e28 100644
--- a/apps/frontend/src/components/Class/Ratings/ClassRatingSummary/ClassRatingSummary.module.scss
+++ b/apps/frontend/src/components/Class/Ratings/ClassRatingSummary/ClassRatingSummary.module.scss
@@ -29,7 +29,7 @@
     display: flex;
     flex-direction: column;
     align-items: flex-start;
-    gap: var(--space-2, 8px);
+    gap: var(--space-4, 16px);
     align-self: stretch;
 
     .titleDate {
@@ -51,6 +51,8 @@
       font-weight: 600;
       line-height: 20px;
       letter-spacing: -0.1px;
+      word-break: break-word;
+      overflow-wrap: break-word;
     }
     h4 {
       color: var(--text-paragraph-color, #737373);
@@ -92,6 +94,18 @@
         overflow: hidden;
       }
 
+      .moreButtonInline {
+        display: inline;
+        background: none;
+        border: none;
+        padding: 0 0 0 4px;
+        color: rgb(59, 130, 246);
+        font-family: Inter;
+        font-size: var(--font-sizes-2, 14px);
+        line-height: 20px;
+        cursor: pointer;
+      }
+
       .moreButton {
         position: absolute;
         bottom: 0;
@@ -113,10 +127,15 @@
     }
 
     .helpfulButton {
+      display: flex;
+      height: 32px;
+      padding: var(--space-1, 4px) var(--space-3, 12px);
+      justify-content: center;
+      align-items: center;
+      gap: var(--space-2, 8px);
       background: none;
       border: 1px solid var(--surface-border-color, rgba(0, 0, 0, 0.10));
       border-radius: 4px;
-      padding: 4px 12px;
       font-family: Inter;
       font-size: var(--font-sizes-2, 14px);
       font-weight: 400;
@@ -126,6 +145,11 @@
       &:hover {
         background-color: var(--button-hover-color);
       }
+
+      &.helpfulButtonActive {
+        background-color: rgba(59, 130, 246, 0.1);
+        color: rgb(59, 130, 246);
+      }
     }
 
     .reportButton {
diff --git a/apps/frontend/src/components/Class/Ratings/ClassRatingSummary/index.tsx b/apps/frontend/src/components/Class/Ratings/ClassRatingSummary/index.tsx
index 1ced12640..ab09708f6 100644
--- a/apps/frontend/src/components/Class/Ratings/ClassRatingSummary/index.tsx
+++ b/apps/frontend/src/components/Class/Ratings/ClassRatingSummary/index.tsx
@@ -1,7 +1,14 @@
-import { useState } from "react";
+import { useLayoutEffect, useRef, useState } from "react";
 
+import { useMutation } from "@apollo/client/react";
 import { METRIC_ORDER, MetricName } from "@repo/shared";
 
+import { VOTE_REVIEW_HELPFUL } from "@/lib/api/ratings";
+import {
+  VoteReviewHelpfulMutation,
+  VoteReviewHelpfulMutationVariables,
+} from "@/lib/generated/graphql";
+
 import {
   formatDate,
   getAverageRatingColor,
@@ -16,6 +23,8 @@ export interface ClassUserReview {
   reviewContent?: string | null;
   reviewerGrade?: string | null;
   lastUpdated?: string | null;
+  reviewId?: string | null;
+  helpfulCount?: number | null;
 }
 
 export default function ClassRatingSummary({
@@ -23,6 +32,27 @@ export default function ClassRatingSummary({
 }: {
   classReview: ClassUserReview;
 }) {
+  const [voteHelpful] = useMutation<
+    VoteReviewHelpfulMutation,
+    VoteReviewHelpfulMutationVariables
+  >(VOTE_REVIEW_HELPFUL);
+
+  const storageKey = classReview.reviewId
+    ? `bt_helpful_${classReview.reviewId}`
+    : null;
+
+  const [hasVoted, setHasVoted] = useState(() =>
+    storageKey ? localStorage.getItem(storageKey) === "true" : false
+  );
+
+  const handleHelpful = async () => {
+    if (!classReview.reviewId || !storageKey) return;
+    const next = !hasVoted;
+    setHasVoted(next);
+    localStorage.setItem(storageKey, String(next));
+    await voteHelpful({ variables: { reviewId: classReview.reviewId } });
+  };
+
   const ratingMetrics = (classReview.metrics ?? []).filter((metric) =>
     isMetricRating(MetricName[metric.metricName])
   );
@@ -46,6 +76,14 @@ export default function ClassRatingSummary({
     metricsAverage != null ? getAverageRatingColor(metricsAverage) : null;
 
   const [isExpanded, setIsExpanded] = useState(false);
+  const [isOverflowing, setIsOverflowing] = useState(false);
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  useLayoutEffect(() => {
+    const el = contentRef.current;
+    if (!el) return;
+    setIsOverflowing(el.scrollHeight > el.clientHeight);
+  }, [classReview.reviewContent]);
 
   return (
     <div className={styles.root}>
@@ -58,6 +96,7 @@ export default function ClassRatingSummary({
             )}
           </div>
           <div
+            ref={contentRef}
             className={
               isExpanded
                 ? styles.contentWrapper
@@ -65,7 +104,7 @@ export default function ClassRatingSummary({
             }
           >
             {classReview.reviewContent || "No written review yet."}
-            {!isExpanded && (
+            {!isExpanded && isOverflowing && (
               <button
                 className={styles.moreButton}
                 onClick={() => setIsExpanded(true)}
@@ -73,6 +112,14 @@ export default function ClassRatingSummary({
                 More
               </button>
             )}
+            {!isExpanded && !isOverflowing && (
+              <button
+                className={styles.moreButtonInline}
+                onClick={() => setIsExpanded(true)}
+              >
+                More
+              </button>
+            )}
           </div>
           {isExpanded && (
             <div className={styles.metricsRow}>
@@ -93,7 +140,12 @@ export default function ClassRatingSummary({
             </div>
           )}
           <div className={styles.actions}>
-            <button className={styles.helpfulButton}>Helpful</button>
+            <button
+              className={`${styles.helpfulButton}${hasVoted ? ` ${styles.helpfulButtonActive}` : ""}`}
+              onClick={handleHelpful}
+            >
+              Helpful
+            </button>
             <button className={styles.reportButton}>Report</button>
           </div>
         </div>
diff --git a/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/FeedbackForm.tsx b/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/FeedbackForm.tsx
index 61ed143f9..985d7d0d0 100644
--- a/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/FeedbackForm.tsx
+++ b/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/FeedbackForm.tsx
@@ -164,6 +164,7 @@ export function ReviewTitleForm({
           onChange={(e) => setReviewTitle(e.target.value)}
           placeholder="Title"
           rows={1}
+          maxLength={100}
           aria-label="Review title"
         />
       </div>
diff --git a/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/index.tsx b/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/index.tsx
index 9537582a1..a8cc77b66 100644
--- a/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/index.tsx
+++ b/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/index.tsx
@@ -402,7 +402,8 @@ export function UserFeedbackModal({
     setSelectedTerm(initialTermValue);
     setCurrentRatingIndex(0);
     prevRatingIndexRef.current = 0;
-    hasAutoSelected.current = false; // Reset the auto-selection flag when closing
+    hasAutoSelected.current = false;
+    hasHydratedRef.current = false; // Allow re-hydration from initialUserClass on next open
     onClose();
   };
 
diff --git a/apps/frontend/src/components/Class/Ratings/UserRatingSummary/UserRatingSummary.module.scss b/apps/frontend/src/components/Class/Ratings/UserRatingSummary/UserRatingSummary.module.scss
index b65805adf..e33176339 100644
--- a/apps/frontend/src/components/Class/Ratings/UserRatingSummary/UserRatingSummary.module.scss
+++ b/apps/frontend/src/components/Class/Ratings/UserRatingSummary/UserRatingSummary.module.scss
@@ -49,6 +49,8 @@
       font-weight: 600;
       line-height: 20px; /* 142.857% */
       letter-spacing: -0.1px;
+      word-break: break-word;
+      overflow-wrap: break-word;
     }
     h4 {
       color: var(--text-paragraph-color, #737373);
@@ -94,6 +96,18 @@
         overflow: hidden;
       }
 
+      .moreButtonInline {
+        display: inline;
+        background: none;
+        border: none;
+        padding: 0 0 0 4px;
+        color: rgb(59, 130, 246);
+        font-family: Inter;
+        font-size: var(--font-sizes-2, 14px);
+        line-height: 20px;
+        cursor: pointer;
+      }
+
       .moreButton {
         position: absolute;
         bottom: 0;
diff --git a/apps/frontend/src/components/Class/Ratings/UserRatingSummary/index.tsx b/apps/frontend/src/components/Class/Ratings/UserRatingSummary/index.tsx
index 4cef1569a..7d228865c 100644
--- a/apps/frontend/src/components/Class/Ratings/UserRatingSummary/index.tsx
+++ b/apps/frontend/src/components/Class/Ratings/UserRatingSummary/index.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useLayoutEffect, useRef, useState } from "react";
 
 import { METRIC_ORDER, MetricName } from "@repo/shared";
 
@@ -41,6 +41,14 @@ export default function UserRatingSummary({
     metricsAverage != null ? getAverageRatingColor(metricsAverage) : null;
 
   const [isExpanded, setIsExpanded] = useState(false);
+  const [isOverflowing, setIsOverflowing] = useState(false);
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  useLayoutEffect(() => {
+    const el = contentRef.current;
+    if (!el) return;
+    setIsOverflowing(el.scrollHeight > el.clientHeight);
+  }, [userRatings.reviewContent]);
 
   return (
     <div className={styles.root}>
@@ -53,6 +61,7 @@ export default function UserRatingSummary({
             )}
           </div>
           <div
+            ref={contentRef}
             className={
               isExpanded
                 ? styles.contentWrapper
@@ -60,7 +69,7 @@ export default function UserRatingSummary({
             }
           >
             {userRatings.reviewContent || "No written review yet."}
-            {!isExpanded && (
+            {!isExpanded && isOverflowing && (
               <button
                 className={styles.moreButton}
                 onClick={() => setIsExpanded(true)}
@@ -68,6 +77,14 @@ export default function UserRatingSummary({
                 More
               </button>
             )}
+            {!isExpanded && !isOverflowing && (
+              <button
+                className={styles.moreButtonInline}
+                onClick={() => setIsExpanded(true)}
+              >
+                More
+              </button>
+            )}
           </div>
           {isExpanded && (
             <div className={styles.metricsRow}>
diff --git a/apps/frontend/src/components/Class/Ratings/index.tsx b/apps/frontend/src/components/Class/Ratings/index.tsx
index bcc0fb508..7d93f11bd 100644
--- a/apps/frontend/src/components/Class/Ratings/index.tsx
+++ b/apps/frontend/src/components/Class/Ratings/index.tsx
@@ -85,6 +85,8 @@ type ClassReviewsQueryData = {
         reviewerGrade?: string | null;
         lastUpdated?: string | null;
         metrics?: ClassReviewsMetric[];
+        reviewId?: string | null;
+        helpfulCount?: number | null;
       }>;
     }>;
   };
@@ -483,7 +485,8 @@ export function RatingsContainer() {
           return classReview.professorName === sortBy;
         }
         return true;
-      });
+      })
+      .sort((a, b) => (b.helpfulCount ?? 0) - (a.helpfulCount ?? 0));
   }, [
     classRatingsData,
     semesterChosen,
diff --git a/apps/frontend/src/lib/api/ratings.ts b/apps/frontend/src/lib/api/ratings.ts
index 5287f7338..67ec8a44e 100644
--- a/apps/frontend/src/lib/api/ratings.ts
+++ b/apps/frontend/src/lib/api/ratings.ts
@@ -231,10 +231,18 @@ export const GET_CLASS_REVIEWS = gql`
           reviewContent
           reviewerGrade
           lastUpdated
+          reviewId
+          helpfulCount
         }
       }
     }
   }
 `;
 
+export const VOTE_REVIEW_HELPFUL = gql`
+  mutation VoteReviewHelpful($reviewId: String!) {
+    voteReviewHelpful(reviewId: $reviewId)
+  }
+`;
+
 export type IUserRatings = NonNullable<GetUserRatingsQuery["userRatings"]>;
diff --git a/packages/common/src/models/review.ts b/packages/common/src/models/review.ts
index 64e0a023e..f6adc7ca6 100644
--- a/packages/common/src/models/review.ts
+++ b/packages/common/src/models/review.ts
@@ -56,6 +56,14 @@ const reviewSchema = new Schema(
       required: true,
       default: true,
     },
+    helpfulCount: {
+      type: Number,
+      default: 0,
+    },
+    helpfulVoters: {
+      type: [String],
+      default: [],
+    },
   },
   {
     timestamps: true,
diff --git a/packages/gql-typedefs/rating.ts b/packages/gql-typedefs/rating.ts
index 3b9e07049..1d2732b05 100644
--- a/packages/gql-typedefs/rating.ts
+++ b/packages/gql-typedefs/rating.ts
@@ -89,6 +89,8 @@ export const ratingTypeDef = gql`
     reviewContent: String
     reviewerGrade: String
     lastUpdated: String
+    reviewId: String
+    helpfulCount: Int
   }
   type UserMetric {
     metricName: MetricName!
@@ -223,5 +225,7 @@ export const ratingTypeDef = gql`
     ): Boolean! @auth
 
     deleteRatings(subject: String!, courseNumber: String!): Boolean! @auth
+
+    voteReviewHelpful(reviewId: String!): Int! @auth
   }
 `;

From 0cd0e31fee5cf57d721cebfba43a8d795fd8d2b2 Mon Sep 17 00:00:00 2001
From: Henry Kim <henry1112200@gmail.com>
Date: Thu, 16 Apr 2026 15:10:43 -0700
Subject: [PATCH 23/34] format

---
 apps/backend/src/modules/rating/controller.ts | 33 +++++++++++--------
 apps/backend/src/modules/rating/resolver.ts   |  7 +---
 .../Ratings/ClassRatingSummary/index.tsx      |  1 +
 .../UserFeedbackModal/FeedbackForm.tsx        |  4 +--
 packages/gql-typedefs/rating.ts               |  1 -
 5 files changed, 22 insertions(+), 24 deletions(-)

diff --git a/apps/backend/src/modules/rating/controller.ts b/apps/backend/src/modules/rating/controller.ts
index 8a4c055a2..55709aeac 100644
--- a/apps/backend/src/modules/rating/controller.ts
+++ b/apps/backend/src/modules/rating/controller.ts
@@ -519,8 +519,7 @@ export const getUserRatings = async (context: RequestContext) => {
       reviewByCourse.set(key, {
         reviewTitle: review.reviewTitle ?? null,
         reviewContent: review.reviewContent ?? null,
-        reviewerGrade:
-          (review.reviewerGrade as string | null) ?? "n/a",
+        reviewerGrade: (review.reviewerGrade as string | null) ?? "n/a",
       });
     }
   });
@@ -1068,7 +1067,8 @@ export const createRatings = async (
       ) {
         const normalizedTitle = (reviewTitle ?? "").trim();
         const normalizedContent = (reviewContent ?? "").trim();
-        const normalizedReviewerGrade = (reviewerGrade ?? "n/a").trim() || "n/a";
+        const normalizedReviewerGrade =
+          (reviewerGrade ?? "n/a").trim() || "n/a";
         const hasReviewPayload =
           normalizedTitle.length > 0 || normalizedContent.length > 0;
 
@@ -1263,7 +1263,8 @@ export const voteReviewHelpful = async (
   }
 
   const userId = context.user._id;
-  const alreadyVoted = (review.helpfulVoters as string[] | undefined)?.includes(userId) ?? false;
+  const alreadyVoted =
+    (review.helpfulVoters as string[] | undefined)?.includes(userId) ?? false;
 
   if (alreadyVoted) {
     await ReviewModel.updateOne(
@@ -1317,7 +1318,10 @@ export const getAllRatings = async () => {
   }));
 };
 
-export const getClassRatings = async (subject: string, courseNumber: string) => {
+export const getClassRatings = async (
+  subject: string,
+  courseNumber: string
+) => {
   const ratings = await RatingModel.find({ subject, courseNumber }).lean();
   const sections = await SectionModel.find({ subject, courseNumber })
     .select("semester year classNumber number meetings")
@@ -1364,8 +1368,7 @@ export const getClassRatings = async (subject: string, courseNumber: string) =>
       reviewId: review._id?.toString() ?? "",
       reviewTitle: review.reviewTitle ?? null,
       reviewContent: review.reviewContent ?? null,
-      reviewerGrade:
-        (review.reviewerGrade as string | null) ?? "n/a",
+      reviewerGrade: (review.reviewerGrade as string | null) ?? "n/a",
       helpfulCount: (review.helpfulCount as number | undefined) ?? 0,
     });
   });
@@ -1429,8 +1432,9 @@ export const getClassRatings = async (subject: string, courseNumber: string) =>
         year: rating.year,
         classNumber: rating.classNumber,
         professorName:
-          Array.from(instructorNamesByClassKey.get(classKey) ?? []).join(", ") ||
-          null,
+          Array.from(instructorNamesByClassKey.get(classKey) ?? []).join(
+            ", "
+          ) || null,
         metrics: [
           {
             metricName: rating.metricName as MetricName,
@@ -1457,10 +1461,12 @@ export const getClassRatings = async (subject: string, courseNumber: string) =>
     }
   });
 
-  const users = Array.from(userClassesById.entries()).map(([userId, classes]) => ({
-    anonymousUserId: anonymizeUserId(userId),
-    classes: Array.from(classes.values()),
-  }));
+  const users = Array.from(userClassesById.entries()).map(
+    ([userId, classes]) => ({
+      anonymousUserId: anonymizeUserId(userId),
+      classes: Array.from(classes.values()),
+    })
+  );
 
   return {
     subject,
@@ -1469,4 +1475,3 @@ export const getClassRatings = async (subject: string, courseNumber: string) =>
     users,
   };
 };
-
diff --git a/apps/backend/src/modules/rating/resolver.ts b/apps/backend/src/modules/rating/resolver.ts
index 465c0341b..0045f356b 100644
--- a/apps/backend/src/modules/rating/resolver.ts
+++ b/apps/backend/src/modules/rating/resolver.ts
@@ -160,14 +160,9 @@ const resolvers: RatingModule.Resolvers = {
         );
       }
     },
-
   },
   Mutation: {
-    createRatings: async (
-      _,
-      args,
-      context
-    ) => {
+    createRatings: async (_, args, context) => {
       try {
         const {
           year,
diff --git a/apps/frontend/src/components/Class/Ratings/ClassRatingSummary/index.tsx b/apps/frontend/src/components/Class/Ratings/ClassRatingSummary/index.tsx
index ab09708f6..23a2d41c0 100644
--- a/apps/frontend/src/components/Class/Ratings/ClassRatingSummary/index.tsx
+++ b/apps/frontend/src/components/Class/Ratings/ClassRatingSummary/index.tsx
@@ -1,6 +1,7 @@
 import { useLayoutEffect, useRef, useState } from "react";
 
 import { useMutation } from "@apollo/client/react";
+
 import { METRIC_ORDER, MetricName } from "@repo/shared";
 
 import { VOTE_REVIEW_HELPFUL } from "@/lib/api/ratings";
diff --git a/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/FeedbackForm.tsx b/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/FeedbackForm.tsx
index 985d7d0d0..fa273bd96 100644
--- a/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/FeedbackForm.tsx
+++ b/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/FeedbackForm.tsx
@@ -180,9 +180,7 @@ export function ReviewContentForm({
   return (
     <div className={styles.formGroup}>
       <div className={styles.questionPair}>
-        <h3>
-          Write a Review {showRequiredAsterisk && <RequiredAsterisk />}
-        </h3>
+        <h3>Write a Review {showRequiredAsterisk && <RequiredAsterisk />}</h3>
         <textarea
           className={styles.reviewTextarea}
           value={reviewContent}
diff --git a/packages/gql-typedefs/rating.ts b/packages/gql-typedefs/rating.ts
index 1d2732b05..7ff801171 100644
--- a/packages/gql-typedefs/rating.ts
+++ b/packages/gql-typedefs/rating.ts
@@ -203,7 +203,6 @@ export const ratingTypeDef = gql`
 
     "Reviews scoped to a specific course grouped by anonymous user"
     classReviews(subject: String!, courseNumber: String!): ClassReviews!
-
   }
 
   """

From 58dbf88be3e82bd5b6fce266db6e4719dd727f1e Mon Sep 17 00:00:00 2001
From: Henry Kim <henry1112200@gmail.com>
Date: Thu, 16 Apr 2026 15:34:03 -0700
Subject: [PATCH 24/34] fixes

---
 .../Class/Ratings/UserFeedbackModal/FeedbackForm.tsx         | 2 +-
 .../Class/Ratings/UserFeedbackModal/RatingFormBody.tsx       | 5 +++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/FeedbackForm.tsx b/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/FeedbackForm.tsx
index fa273bd96..38d9fb348 100644
--- a/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/FeedbackForm.tsx
+++ b/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/FeedbackForm.tsx
@@ -185,7 +185,7 @@ export function ReviewContentForm({
           className={styles.reviewTextarea}
           value={reviewContent}
           onChange={(e) => setReviewContent(e.target.value)}
-          placeholder="Share details of your experience in the course"
+          placeholder="What was your experience like?"
           rows={4}
           aria-label="Review details"
         />
diff --git a/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/RatingFormBody.tsx b/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/RatingFormBody.tsx
index 8c150ef85..c135571d2 100644
--- a/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/RatingFormBody.tsx
+++ b/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/RatingFormBody.tsx
@@ -101,7 +101,7 @@ export function RatingFormBody({
 
           <div className={styles.formGroup}>
             <div className={styles.questionPair}>
-              <h3>What grade did you receive in this course?</h3>
+              <h3>Select grade received</h3>
               <div style={{ width: "100%" }}>
                 <Select
                   options={REVIEWER_GRADE_OPTIONS.map((grade) => ({
@@ -111,7 +111,8 @@ export function RatingFormBody({
                   disabled={!selectedCourse}
                   value={reviewerGrade}
                   onChange={(selectedOption) => {
-                    if (Array.isArray(selectedOption)) onReviewerGradeChange(null);
+                    if (Array.isArray(selectedOption))
+                      onReviewerGradeChange(null);
                     else onReviewerGradeChange(selectedOption || null);
                   }}
                   placeholder="Select grade"

From b588290f8ddd9d0c3b87c409bdd7a0c59f09a93b Mon Sep 17 00:00:00 2001
From: Henry Kim <henry1112200@gmail.com>
Date: Thu, 16 Apr 2026 15:38:48 -0700
Subject: [PATCH 25/34] gap to space-1

---
 .../Ratings/ClassRatingSummary/ClassRatingSummary.module.scss   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/frontend/src/components/Class/Ratings/ClassRatingSummary/ClassRatingSummary.module.scss b/apps/frontend/src/components/Class/Ratings/ClassRatingSummary/ClassRatingSummary.module.scss
index 559cd6e28..8fa800dff 100644
--- a/apps/frontend/src/components/Class/Ratings/ClassRatingSummary/ClassRatingSummary.module.scss
+++ b/apps/frontend/src/components/Class/Ratings/ClassRatingSummary/ClassRatingSummary.module.scss
@@ -209,7 +209,7 @@
     display: flex;
     flex-direction: column;
     align-items: flex-start;
-    gap: 0;
+    gap: var(--space-1, 4px);
     align-self: flex-start;
 
     > * {

From 53e8a386d211c663795b000f0e2d39f72f851b64 Mon Sep 17 00:00:00 2001
From: Henry Kim <henry1112200@gmail.com>
Date: Thu, 16 Apr 2026 15:40:52 -0700
Subject: [PATCH 26/34] please be respectful in your reviews

---
 .../Class/Ratings/UserFeedbackModal/FeedbackForm.tsx           | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/FeedbackForm.tsx b/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/FeedbackForm.tsx
index 38d9fb348..d1ee8e3e5 100644
--- a/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/FeedbackForm.tsx
+++ b/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/FeedbackForm.tsx
@@ -190,7 +190,8 @@ export function ReviewContentForm({
           aria-label="Review details"
         />
         <p className={styles.reviewDisclaimer}>
-          Your rating could be removed if you use profanity or derogatory terms.
+          Please be respectful in your reviews!
+          {/* Your rating could be removed if you use profanity or derogatory terms. */}
         </p>
       </div>
     </div>

From af0f9e56410adaff1a06a88a438733cfd91dc510 Mon Sep 17 00:00:00 2001
From: Henry Kim <henry1112200@gmail.com>
Date: Thu, 16 Apr 2026 20:21:23 -0700
Subject: [PATCH 27/34] fixes

---
 .../ClassRatingSummary.module.scss            | 47 ++++++++---------
 .../Ratings/ClassRatingSummary/index.tsx      |  7 ++-
 .../RatingButton/RatingButton.module.scss     |  4 +-
 .../Class/Ratings/Ratings.module.scss         |  8 +--
 .../UserFeedbackModal/FeedbackForm.tsx        |  6 +--
 .../UserFeedbackModal/RatingFormBody.tsx      | 10 ++--
 .../UserFeedbackModal.module.scss             | 10 ++--
 .../UserRatingSummary.module.scss             | 21 ++++----
 .../Class/Ratings/UserRatingSummary/index.tsx |  2 +-
 .../src/components/Class/Ratings/index.tsx    | 50 +++++++++++--------
 10 files changed, 85 insertions(+), 80 deletions(-)

diff --git a/apps/frontend/src/components/Class/Ratings/ClassRatingSummary/ClassRatingSummary.module.scss b/apps/frontend/src/components/Class/Ratings/ClassRatingSummary/ClassRatingSummary.module.scss
index 8fa800dff..45f72c850 100644
--- a/apps/frontend/src/components/Class/Ratings/ClassRatingSummary/ClassRatingSummary.module.scss
+++ b/apps/frontend/src/components/Class/Ratings/ClassRatingSummary/ClassRatingSummary.module.scss
@@ -39,12 +39,14 @@
       gap: 4px;
       flex: 1 0 0;
     }
-    h3, h4, h5 {
+    h3,
+    h4,
+    h5 {
       margin: 0;
     }
     h3 {
-      color: var(--text-secondary-color, #404040);
-      font-feature-settings: 'liga' off;
+      color: var(--secondary-color);
+      font-feature-settings: "liga" off;
       font-family: Inter;
       font-size: var(--font-sizes-2, 14px);
       font-style: normal;
@@ -55,8 +57,8 @@
       overflow-wrap: break-word;
     }
     h4 {
-      color: var(--text-paragraph-color, #737373);
-      font-feature-settings: 'liga' off;
+      color: var(--paragraph-color);
+      font-feature-settings: "liga" off;
       font-family: Inter;
       font-size: var(--font-sizes-1, 12px);
       font-style: normal;
@@ -64,8 +66,8 @@
       line-height: 16px;
     }
     h5 {
-      color: var(--text-secondary-color, #404040);
-      font-feature-settings: 'liga' off;
+      color: var(--secondary-color);
+      font-feature-settings: "liga" off;
       font-family: Inter;
       font-size: var(--font-sizes-2, 14px);
       font-style: normal;
@@ -78,8 +80,8 @@
 
     .contentWrapper {
       position: relative;
-      color: var(--text-secondary-color, #404040);
-      font-feature-settings: 'liga' off;
+      color: var(--secondary-color);
+      font-feature-settings: "liga" off;
       font-family: Inter;
       font-size: var(--font-sizes-2, 14px);
       font-weight: 400;
@@ -99,7 +101,7 @@
         background: none;
         border: none;
         padding: 0 0 0 4px;
-        color: rgb(59, 130, 246);
+        color: var(--blue-badge);
         font-family: Inter;
         font-size: var(--font-sizes-2, 14px);
         line-height: 20px;
@@ -113,7 +115,7 @@
         background: var(--foreground-color);
         border: none;
         padding: 0 0 0 6px;
-        color: rgb(59, 130, 246);
+        color: var(--blue-badge);
         font-family: Inter;
         font-size: var(--font-sizes-2, 14px);
         line-height: 20px;
@@ -134,12 +136,12 @@
       align-items: center;
       gap: var(--space-2, 8px);
       background: none;
-      border: 1px solid var(--surface-border-color, rgba(0, 0, 0, 0.10));
+      border: 1px solid var(--border-color);
       border-radius: 4px;
       font-family: Inter;
       font-size: var(--font-sizes-2, 14px);
       font-weight: 400;
-      color: var(--text-secondary-color, #404040);
+      color: var(--secondary-color);
       cursor: pointer;
 
       &:hover {
@@ -147,8 +149,8 @@
       }
 
       &.helpfulButtonActive {
-        background-color: rgba(59, 130, 246, 0.1);
-        color: rgb(59, 130, 246);
+        background-color: var(--blue-500-20);
+        color: var(--blue-badge);
       }
     }
 
@@ -159,11 +161,11 @@
       font-family: Inter;
       font-size: var(--font-sizes-2, 14px);
       font-weight: 400;
-      color: var(--text-paragraph-color, #737373);
+      color: var(--paragraph-color);
       cursor: pointer;
 
       &:hover {
-        color: var(--text-secondary-color, #404040);
+        color: var(--secondary-color);
       }
     }
 
@@ -188,7 +190,7 @@
       }
 
       .metricLabel {
-        color: var(--text-secondary-color, #404040);
+        color: var(--secondary-color);
         font-family: Inter;
         font-size: var(--font-sizes-2, 14px);
         font-weight: 500;
@@ -197,7 +199,7 @@
       }
 
       .metricValue {
-        color: var(--text-paragraph-color, #737373);
+        color: var(--paragraph-color);
         font-family: Inter;
         font-size: var(--font-sizes-2, 14px);
         font-weight: 400;
@@ -228,7 +230,6 @@
       align-self: center;
       text-align: center;
       border-radius: 4px;
-      border: 1px solid var(--green-badge);
       background: var(--green-500-20);
       color: var(--green-badge);
     }
@@ -245,15 +246,15 @@
       color: var(--green-badge);
 
       &.naGrade {
-        color: var(--text-paragraph-color, #737373);
+        color: var(--paragraph-color);
       }
     }
   }
 }
 
 .ratingGrade {
-  color: var(--text-secondary-color, #404040);
-  font-feature-settings: 'liga' off;
+  color: var(--secondary-color);
+  font-feature-settings: "liga" off;
   font-family: Inter;
   font-size: var(--font-sizes-2, 14px);
   font-style: normal;
diff --git a/apps/frontend/src/components/Class/Ratings/ClassRatingSummary/index.tsx b/apps/frontend/src/components/Class/Ratings/ClassRatingSummary/index.tsx
index 23a2d41c0..4b729fd56 100644
--- a/apps/frontend/src/components/Class/Ratings/ClassRatingSummary/index.tsx
+++ b/apps/frontend/src/components/Class/Ratings/ClassRatingSummary/index.tsx
@@ -15,6 +15,7 @@ import {
   getAverageRatingColor,
   isMetricRating,
 } from "../metricsUtil";
+// eslint-disable-next-line css-modules/no-unused-class
 import styles from "./ClassRatingSummary.module.scss";
 
 export interface ClassUserReview {
@@ -132,9 +133,7 @@ export default function ClassRatingSummary({
                 return (
                   <div key={metricName} className={styles.metricItem}>
                     <span className={styles.metricLabel}>{metricName}</span>
-                    <span className={styles.metricValue}>
-                      {metric.value.toFixed(1)}
-                    </span>
+                    <span className={styles.metricValue}>{metric.value}</span>
                   </div>
                 );
               })}
@@ -147,7 +146,7 @@ export default function ClassRatingSummary({
             >
               Helpful
             </button>
-            <button className={styles.reportButton}>Report</button>
+            {/* <button className={styles.reportButton}>Report</button> */}
           </div>
         </div>
       </div>
diff --git a/apps/frontend/src/components/Class/Ratings/RatingButton/RatingButton.module.scss b/apps/frontend/src/components/Class/Ratings/RatingButton/RatingButton.module.scss
index 4d006b2d0..eb4b1eb35 100644
--- a/apps/frontend/src/components/Class/Ratings/RatingButton/RatingButton.module.scss
+++ b/apps/frontend/src/components/Class/Ratings/RatingButton/RatingButton.module.scss
@@ -5,10 +5,10 @@
   align-items: center;
   gap: var(--space-2, 8px);
   color: white !important;
-  background-color: rgb(59, 130, 246) !important;
+  background-color: var(--blue-500) !important;
 
   &:hover {
-    background-color: rgb(37, 99, 235) !important;
+    background-color: var(--blue-hover) !important;
   }
 
   &.invalid {
diff --git a/apps/frontend/src/components/Class/Ratings/Ratings.module.scss b/apps/frontend/src/components/Class/Ratings/Ratings.module.scss
index bc285a61f..847700249 100644
--- a/apps/frontend/src/components/Class/Ratings/Ratings.module.scss
+++ b/apps/frontend/src/components/Class/Ratings/Ratings.module.scss
@@ -140,7 +140,7 @@
 }
 
 .ratingsSummaryHeader {
-  color: var(--text-secondary-color, #404040);
+  color: var(--secondary-color);
   font-feature-settings: "liga" off;
 
   /* Web UI (Desktop)/Heading/Heading Medium */
@@ -158,7 +158,7 @@
 }
 
 .ratingsSummaryAverage {
-  color: var(--text-secondary-color, #404040);
+  color: var(--secondary-color);
   text-align: center;
   font-feature-settings: "liga" off;
   font-family: Inter;
@@ -170,7 +170,7 @@
 }
 
 .ratingsSummaryCount {
-  color: var(--text-secondary-color, #404040);
+  color: var(--paragraph-color);
   font-feature-settings: "liga" off;
 
   /* Web UI (Desktop)/Title/Title Small */
@@ -189,7 +189,7 @@
 }
 
 .noWrittenReviewsText {
-  color: var(--text-paragraph-color, #737373);
+  color: var(--paragraph-color);
   font-family: Inter;
   font-size: var(--font-sizes-2, 14px);
   font-weight: 400;
diff --git a/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/FeedbackForm.tsx b/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/FeedbackForm.tsx
index d1ee8e3e5..53de4fc43 100644
--- a/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/FeedbackForm.tsx
+++ b/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/FeedbackForm.tsx
@@ -158,12 +158,12 @@ export function ReviewTitleForm({
         <h3>
           Title your review {showRequiredAsterisk && <RequiredAsterisk />}
         </h3>
-        <textarea
+        <input
+          type="text"
           className={`${styles.reviewTextarea} ${styles.reviewTitleTextarea}`}
           value={reviewTitle}
           onChange={(e) => setReviewTitle(e.target.value)}
           placeholder="Title"
-          rows={1}
           maxLength={100}
           aria-label="Review title"
         />
@@ -190,7 +190,7 @@ export function ReviewContentForm({
           aria-label="Review details"
         />
         <p className={styles.reviewDisclaimer}>
-          Please be respectful in your reviews!
+          Please be respectful in your reviews.
           {/* Your rating could be removed if you use profanity or derogatory terms. */}
         </p>
       </div>
diff --git a/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/RatingFormBody.tsx b/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/RatingFormBody.tsx
index c135571d2..4a7606c95 100644
--- a/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/RatingFormBody.tsx
+++ b/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/RatingFormBody.tsx
@@ -72,6 +72,11 @@ export function RatingFormBody({
             setReviewContent={setReviewContent}
             showRequiredAsterisk={reviewTitle.trim().length > 0}
           />
+          <ReviewTitleForm
+            reviewTitle={reviewTitle}
+            setReviewTitle={setReviewTitle}
+            showRequiredAsterisk={reviewContent.trim().length > 0}
+          />
           <div className={styles.formGroup}>
             <div className={styles.questionPair}>
               <h3>
@@ -129,11 +134,6 @@ export function RatingFormBody({
             setMetricData={setMetricData}
             startQuestionNumber={questionNumbers.ratingsStartNumber}
           />
-          <ReviewTitleForm
-            reviewTitle={reviewTitle}
-            setReviewTitle={setReviewTitle}
-            showRequiredAsterisk={reviewContent.trim().length > 0}
-          />
         </Flex>
       </div>
 
diff --git a/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/UserFeedbackModal.module.scss b/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/UserFeedbackModal.module.scss
index 6a503f0d1..0129dbe71 100644
--- a/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/UserFeedbackModal.module.scss
+++ b/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/UserFeedbackModal.module.scss
@@ -142,7 +142,7 @@
   box-sizing: border-box;
 
   &::placeholder {
-    color: var(--text-label-color, #a3a3a3);
+    color: var(--label-color);
     font-size: var(--font-sizes-2, 14px);
 
     line-height: 20px;
@@ -155,16 +155,12 @@
   }
 }
 
-/* Smaller height for review title field */
 .reviewTitleTextarea {
-  overflow: hidden;
-  resize: none;
-  min-height: 44px;
-  max-height: 96px;
+  height: 44px;
 }
 
 .reviewDisclaimer.reviewDisclaimer {
-  color: var(--text-paragraph-color, #737373);
+  color: var(--paragraph-color);
   font-feature-settings: "liga" off;
   font-family: Inter, sans-serif;
   font-size: var(--font-sizes-1, 12px);
diff --git a/apps/frontend/src/components/Class/Ratings/UserRatingSummary/UserRatingSummary.module.scss b/apps/frontend/src/components/Class/Ratings/UserRatingSummary/UserRatingSummary.module.scss
index e33176339..20468e336 100644
--- a/apps/frontend/src/components/Class/Ratings/UserRatingSummary/UserRatingSummary.module.scss
+++ b/apps/frontend/src/components/Class/Ratings/UserRatingSummary/UserRatingSummary.module.scss
@@ -41,7 +41,7 @@
       margin: 0;
     }
     h3 {
-      color: var(--text-secondary-color, #404040);
+      color: var(--secondary-color);
       font-feature-settings: 'liga' off;
       font-family: Inter;
       font-size: var(--font-sizes-2, 14px);
@@ -53,7 +53,7 @@
       overflow-wrap: break-word;
     }
     h4 {
-      color: var(--text-paragraph-color, #737373);
+      color: var(--paragraph-color);
       font-feature-settings: 'liga' off;
 
       /* Web UI (Desktop)/Body/Body Small */
@@ -64,7 +64,7 @@
       line-height: 16px; /* 133.333% */
     }
     h5 {
-      color: var(--text-secondary-color, #404040);
+      color: var(--secondary-color);
       font-feature-settings: 'liga' off;
 
       /* Web UI (Desktop)/Body/Body Medium */
@@ -80,7 +80,7 @@
 
     .contentWrapper {
       position: relative;
-      color: var(--text-secondary-color, #404040);
+      color: var(--secondary-color);
       font-feature-settings: 'liga' off;
       font-family: Inter;
       font-size: var(--font-sizes-2, 14px);
@@ -101,7 +101,7 @@
         background: none;
         border: none;
         padding: 0 0 0 4px;
-        color: rgb(59, 130, 246);
+        color: var(--blue-badge);
         font-family: Inter;
         font-size: var(--font-sizes-2, 14px);
         line-height: 20px;
@@ -115,7 +115,7 @@
         background: var(--foreground-color);
         border: none;
         padding: 0 0 0 6px;
-        color: rgb(59, 130, 246);
+        color: var(--blue-badge);
         font-family: Inter;
         font-size: var(--font-sizes-2, 14px);
         line-height: 20px;
@@ -144,7 +144,7 @@
       }
 
       .metricLabel {
-        color: var(--text-secondary-color, #404040);
+        color: var(--secondary-color);
         font-family: Inter;
         font-size: var(--font-sizes-2, 14px);
         font-weight: 500;
@@ -153,7 +153,7 @@
       }
 
       .metricValue {
-        color: var(--text-paragraph-color, #737373);
+        color: var(--paragraph-color);
         font-family: Inter;
         font-size: var(--font-sizes-2, 14px);
         font-weight: 400;
@@ -184,7 +184,6 @@
       align-self: center;
       text-align: center;
       border-radius: 4px;
-      border: 1px solid var(--green-badge);
       background: var(--green-500-20);
       color: var(--green-badge);
     }
@@ -201,14 +200,14 @@
       color: var(--green-badge);
 
       &.naGrade {
-        color: var(--text-paragraph-color, #737373);
+        color: var(--paragraph-color);
       }
     }
   }
 }
 
 .ratingGrade {
-  color: var(--text-secondary-color, #404040);
+  color: var(--secondary-color);
   font-feature-settings: 'liga' off;
   
   /* Web UI (Desktop)/Title/Title Medium */
diff --git a/apps/frontend/src/components/Class/Ratings/UserRatingSummary/index.tsx b/apps/frontend/src/components/Class/Ratings/UserRatingSummary/index.tsx
index 7d228865c..764d1b921 100644
--- a/apps/frontend/src/components/Class/Ratings/UserRatingSummary/index.tsx
+++ b/apps/frontend/src/components/Class/Ratings/UserRatingSummary/index.tsx
@@ -97,7 +97,7 @@ export default function UserRatingSummary({
                   <div key={metricName} className={styles.metricItem}>
                     <span className={styles.metricLabel}>{metricName}</span>
                     <span className={styles.metricValue}>
-                      {metric.value.toFixed(1)}
+                      {metric.value}
                     </span>
                   </div>
                 );
diff --git a/apps/frontend/src/components/Class/Ratings/index.tsx b/apps/frontend/src/components/Class/Ratings/index.tsx
index 7d93f11bd..80459f7af 100644
--- a/apps/frontend/src/components/Class/Ratings/index.tsx
+++ b/apps/frontend/src/components/Class/Ratings/index.tsx
@@ -92,6 +92,23 @@ type ClassReviewsQueryData = {
   };
 };
 
+function RatingCountWithButton({
+  count,
+  addRatingButton,
+}: {
+  count: number;
+  addRatingButton?: React.ReactNode;
+}) {
+  const countLabel =
+    count === 0 ? "No ratings" : count === 1 ? "1 rating" : `${count} ratings`;
+  return (
+    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "var(--space-3, 12px)" }}>
+      <p className={styles.ratingsSummaryCount}>{countLabel}</p>
+      {addRatingButton}
+    </div>
+  );
+}
+
 const RATING_VALUES = [5, 4, 3, 2, 1] as const;
 const RATING_TABS = {
   Instructor: "instructor",
@@ -526,19 +543,6 @@ export function RatingsContainer() {
             <Container size="3">
               <div className={styles.containerContents}>
                 <div className={styles.ratingsSummary}>
-                  <div className={styles.ratingsSummaryTop}>
-                    <p className={styles.ratingsSummaryHeader}>Overview</p>
-                    {!userRatings && (
-                      <div className={styles.ratingsSummaryHeaderRight}>
-                        <RatingButton
-                          user={user}
-                          onOpenModal={handleModalStateChange}
-                          userRatingData={userRatingsData}
-                          currentClass={currentClass}
-                        />
-                      </div>
-                    )}
-                  </div>
                   <div className={styles.ratingsSummaryBottom}>
                     <div className={styles.ratingsSummaryBottomLeft}>
                       <p className={styles.ratingsSummaryAverage}>
@@ -546,13 +550,19 @@ export function RatingsContainer() {
                           ? classReviewsSummary.average.toFixed(1)
                           : "—"}
                       </p>
-                      <p className={styles.ratingsSummaryCount}>
-                        {classReviewsSummary.count === 0
-                          ? "No ratings"
-                          : classReviewsSummary.count === 1
-                            ? "1 rating"
-                            : `${classReviewsSummary.count} ratings`}
-                      </p>
+                      <RatingCountWithButton
+                        count={classReviewsSummary.count}
+                        addRatingButton={
+                          !userRatings ? (
+                            <RatingButton
+                              user={user}
+                              onOpenModal={handleModalStateChange}
+                              userRatingData={userRatingsData}
+                              currentClass={currentClass}
+                            />
+                          ) : undefined
+                        }
+                      />
                     </div>
                     <div className={styles.ratingsSummaryBottomRight}>
                       <div

From 8dde89320ea97e7129203ebda4200dc29551eadd Mon Sep 17 00:00:00 2001
From: Henry Kim <henry1112200@gmail.com>
Date: Thu, 16 Apr 2026 20:21:40 -0700
Subject: [PATCH 28/34] format

---
 .../components/Class/Ratings/UserRatingSummary/index.tsx | 4 +---
 apps/frontend/src/components/Class/Ratings/index.tsx     | 9 ++++++++-
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/apps/frontend/src/components/Class/Ratings/UserRatingSummary/index.tsx b/apps/frontend/src/components/Class/Ratings/UserRatingSummary/index.tsx
index 764d1b921..3cfb31bf5 100644
--- a/apps/frontend/src/components/Class/Ratings/UserRatingSummary/index.tsx
+++ b/apps/frontend/src/components/Class/Ratings/UserRatingSummary/index.tsx
@@ -96,9 +96,7 @@ export default function UserRatingSummary({
                 return (
                   <div key={metricName} className={styles.metricItem}>
                     <span className={styles.metricLabel}>{metricName}</span>
-                    <span className={styles.metricValue}>
-                      {metric.value}
-                    </span>
+                    <span className={styles.metricValue}>{metric.value}</span>
                   </div>
                 );
               })}
diff --git a/apps/frontend/src/components/Class/Ratings/index.tsx b/apps/frontend/src/components/Class/Ratings/index.tsx
index 80459f7af..2d104aa0c 100644
--- a/apps/frontend/src/components/Class/Ratings/index.tsx
+++ b/apps/frontend/src/components/Class/Ratings/index.tsx
@@ -102,7 +102,14 @@ function RatingCountWithButton({
   const countLabel =
     count === 0 ? "No ratings" : count === 1 ? "1 rating" : `${count} ratings`;
   return (
-    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "var(--space-3, 12px)" }}>
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        gap: "var(--space-3, 12px)",
+      }}
+    >
       <p className={styles.ratingsSummaryCount}>{countLabel}</p>
       {addRatingButton}
     </div>

From 3c40f9f8c5775fef8af8706e5f81cf5b8a90c35c Mon Sep 17 00:00:00 2001
From: Henry Kim <henry1112200@gmail.com>
Date: Fri, 17 Apr 2026 18:12:10 -0700
Subject: [PATCH 29/34] fixes

---
 .../frontend/src/components/Class/Ratings/Ratings.module.scss | 1 +
 .../Class/Ratings/UserFeedbackModal/FeedbackForm.tsx          | 2 +-
 apps/frontend/src/hooks/api/ratings/useGetRatings.ts          | 4 +++-
 packages/shared/ratingsConfig.ts                              | 2 +-
 4 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/apps/frontend/src/components/Class/Ratings/Ratings.module.scss b/apps/frontend/src/components/Class/Ratings/Ratings.module.scss
index 847700249..561c9f723 100644
--- a/apps/frontend/src/components/Class/Ratings/Ratings.module.scss
+++ b/apps/frontend/src/components/Class/Ratings/Ratings.module.scss
@@ -129,6 +129,7 @@
   flex-direction: column;
   align-items: center;
   gap: var(--space-2, 8px);
+  padding: 0 var(--space-2);
 }
 
 .ratingsSummaryBottomRight {
diff --git a/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/FeedbackForm.tsx b/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/FeedbackForm.tsx
index 53de4fc43..10e097528 100644
--- a/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/FeedbackForm.tsx
+++ b/apps/frontend/src/components/Class/Ratings/UserFeedbackModal/FeedbackForm.tsx
@@ -156,7 +156,7 @@ export function ReviewTitleForm({
     <div className={styles.formGroup}>
       <div className={styles.questionPair}>
         <h3>
-          Title your review {showRequiredAsterisk && <RequiredAsterisk />}
+          Title of your review? {showRequiredAsterisk && <RequiredAsterisk />}
         </h3>
         <input
           type="text"
diff --git a/apps/frontend/src/hooks/api/ratings/useGetRatings.ts b/apps/frontend/src/hooks/api/ratings/useGetRatings.ts
index f5cf717b2..a64be4f57 100644
--- a/apps/frontend/src/hooks/api/ratings/useGetRatings.ts
+++ b/apps/frontend/src/hooks/api/ratings/useGetRatings.ts
@@ -2,6 +2,8 @@ import { useMemo } from "react";
 
 import { useQuery } from "@apollo/client/react";
 
+import { MINIMUM_RESPONSES_THRESHOLD } from "@repo/shared";
+
 import {
   GetClassRatingsDataDocument,
   GetClassRatingsDataQuery,
@@ -50,7 +52,7 @@ export const useGetClassRatingsData = ({
       (total, metric) => total + (metric.count ?? 0),
       0
     );
-    return totalRatings > 0;
+    return totalRatings >= MINIMUM_RESPONSES_THRESHOLD;
   }, [data?.course?.aggregatedRatings?.metrics]);
 
   const instructorAggregatedRatings = useMemo(() => {
diff --git a/packages/shared/ratingsConfig.ts b/packages/shared/ratingsConfig.ts
index d58995d90..80430a3f9 100644
--- a/packages/shared/ratingsConfig.ts
+++ b/packages/shared/ratingsConfig.ts
@@ -1,5 +1,5 @@
 // criteria for a high enough confidence in quality of information to be displayed
-export const MINIMUM_RESPONSES_THRESHOLD = 2;
+export const MINIMUM_RESPONSES_THRESHOLD = 3;
 export const CONSENSUS_THRESHOLD = 0.6;
 
 // restriction on how many ratings a user can submit

From 6d5c8f0caa0f3606009aff9929ac22bc7ccc15d0 Mon Sep 17 00:00:00 2001
From: Henry Kim <henry1112200@gmail.com>
Date: Fri, 17 Apr 2026 18:12:27 -0700
Subject: [PATCH 30/34] format

---
 packages/shared/ratingsConfig.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/shared/ratingsConfig.ts b/packages/shared/ratingsConfig.ts
index 80430a3f9..6449e37a0 100644
--- a/packages/shared/ratingsConfig.ts
+++ b/packages/shared/ratingsConfig.ts
@@ -9,7 +9,7 @@ export const USER_MAX_SEMESTER_RATINGS = 8;
 // ratings required from a user before unlocking ratings tab
 export const USER_REQUIRED_RATINGS_TO_UNLOCK = 0;
 
-// optional self-reported course grade in the rating form 
+// optional self-reported course grade in the rating form
 export const REVIEWER_GRADE_OPTIONS = [
   "A+",
   "A",

From 6f03a19694a738ac377a8dcf421fe549a3b64241 Mon Sep 17 00:00:00 2001
From: Henry Kim <henry1112200@gmail.com>
Date: Tue, 21 Apr 2026 16:50:48 -0700
Subject: [PATCH 31/34] revert to original overview layout & replaced  overview
 with ratings count

---
 .../Class/Ratings/Ratings.module.scss         | 26 +-------
 .../src/components/Class/Ratings/index.tsx    | 62 ++++++-------------
 2 files changed, 21 insertions(+), 67 deletions(-)

diff --git a/apps/frontend/src/components/Class/Ratings/Ratings.module.scss b/apps/frontend/src/components/Class/Ratings/Ratings.module.scss
index 561c9f723..139207e76 100644
--- a/apps/frontend/src/components/Class/Ratings/Ratings.module.scss
+++ b/apps/frontend/src/components/Class/Ratings/Ratings.module.scss
@@ -105,7 +105,7 @@
   display: flex;
   flex-direction: column;
   align-items: stretch;
-  gap: var(--space-3, 12px);
+  // gap: var(--space-3, 12px);
   align-self: stretch;
 }
 
@@ -124,14 +124,6 @@
   align-self: stretch;
 }
 
-.ratingsSummaryBottomLeft {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: var(--space-2, 8px);
-  padding: 0 var(--space-2);
-}
-
 .ratingsSummaryBottomRight {
   display: flex;
   flex-direction: column;
@@ -158,25 +150,13 @@
   text-align: right;
 }
 
-.ratingsSummaryAverage {
-  color: var(--secondary-color);
-  text-align: center;
-  font-feature-settings: "liga" off;
-  font-family: Inter;
-  font-size: var(--font-sizes-8, 35px);
-  font-style: normal;
-  font-weight: 600;
-  line-height: 36px; /* 102.857% */
-  letter-spacing: -0.35px;
-}
-
 .ratingsSummaryCount {
-  color: var(--paragraph-color);
+  color: var(--secondary-color);
   font-feature-settings: "liga" off;
 
   /* Web UI (Desktop)/Title/Title Small */
   font-family: Inter;
-  font-size: var(--font-sizes-1, 12px);
+  font-size: var(--font-sizes-2, 14px);
   font-style: normal;
   font-weight: 500;
   line-height: 16px; /* 133.333% */
diff --git a/apps/frontend/src/components/Class/Ratings/index.tsx b/apps/frontend/src/components/Class/Ratings/index.tsx
index 2d104aa0c..0aa4d6ed2 100644
--- a/apps/frontend/src/components/Class/Ratings/index.tsx
+++ b/apps/frontend/src/components/Class/Ratings/index.tsx
@@ -92,29 +92,6 @@ type ClassReviewsQueryData = {
   };
 };
 
-function RatingCountWithButton({
-  count,
-  addRatingButton,
-}: {
-  count: number;
-  addRatingButton?: React.ReactNode;
-}) {
-  const countLabel =
-    count === 0 ? "No ratings" : count === 1 ? "1 rating" : `${count} ratings`;
-  return (
-    <div
-      style={{
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        gap: "var(--space-3, 12px)",
-      }}
-    >
-      <p className={styles.ratingsSummaryCount}>{countLabel}</p>
-      {addRatingButton}
-    </div>
-  );
-}
 
 const RATING_VALUES = [5, 4, 3, 2, 1] as const;
 const RATING_TABS = {
@@ -550,28 +527,25 @@ export function RatingsContainer() {
             <Container size="3">
               <div className={styles.containerContents}>
                 <div className={styles.ratingsSummary}>
-                  <div className={styles.ratingsSummaryBottom}>
-                    <div className={styles.ratingsSummaryBottomLeft}>
-                      <p className={styles.ratingsSummaryAverage}>
-                        {classReviewsSummary.average != null
-                          ? classReviewsSummary.average.toFixed(1)
-                          : "—"}
-                      </p>
-                      <RatingCountWithButton
-                        count={classReviewsSummary.count}
-                        addRatingButton={
-                          !userRatings ? (
-                            <RatingButton
-                              user={user}
-                              onOpenModal={handleModalStateChange}
-                              userRatingData={userRatingsData}
-                              currentClass={currentClass}
-                            />
-                          ) : undefined
-                        }
+                  <div className={styles.ratingsSummaryTop} style={{ justifyContent: "space-between", display: "flex", alignItems: "center", marginBottom: "var(--space-3, 12px)" }}>
+                    <p className={styles.ratingsSummaryCount}>
+                      {classReviewsSummary.count === 0
+                        ? "No ratings"
+                        : classReviewsSummary.count === 1
+                          ? "1 rating"
+                          : `${classReviewsSummary.count} ratings`}
+                    </p>
+                    {!userRatings && (
+                      <RatingButton
+                        user={user}
+                        onOpenModal={handleModalStateChange}
+                        userRatingData={userRatingsData}
+                        currentClass={currentClass}
                       />
-                    </div>
-                    <div className={styles.ratingsSummaryBottomRight}>
+                    )}
+                  </div>
+                  <div className={styles.ratingsSummaryBottom}>
+                    <div className={styles.ratingsSummaryBottomRight} style={{ flex: 1 }}>
                       <div
                         className={styles.ratingsBody}
                         style={{

From 315213d2aed1c21d395a5f1a066c30745bd36ff1 Mon Sep 17 00:00:00 2001
From: Henry Kim <henry1112200@gmail.com>
Date: Tue, 21 Apr 2026 16:51:07 -0700
Subject: [PATCH 32/34] format

---
 .../src/components/Class/Ratings/index.tsx       | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/apps/frontend/src/components/Class/Ratings/index.tsx b/apps/frontend/src/components/Class/Ratings/index.tsx
index 0aa4d6ed2..440d8209c 100644
--- a/apps/frontend/src/components/Class/Ratings/index.tsx
+++ b/apps/frontend/src/components/Class/Ratings/index.tsx
@@ -92,7 +92,6 @@ type ClassReviewsQueryData = {
   };
 };
 
-
 const RATING_VALUES = [5, 4, 3, 2, 1] as const;
 const RATING_TABS = {
   Instructor: "instructor",
@@ -527,7 +526,15 @@ export function RatingsContainer() {
             <Container size="3">
               <div className={styles.containerContents}>
                 <div className={styles.ratingsSummary}>
-                  <div className={styles.ratingsSummaryTop} style={{ justifyContent: "space-between", display: "flex", alignItems: "center", marginBottom: "var(--space-3, 12px)" }}>
+                  <div
+                    className={styles.ratingsSummaryTop}
+                    style={{
+                      justifyContent: "space-between",
+                      display: "flex",
+                      alignItems: "center",
+                      marginBottom: "var(--space-3, 12px)",
+                    }}
+                  >
                     <p className={styles.ratingsSummaryCount}>
                       {classReviewsSummary.count === 0
                         ? "No ratings"
@@ -545,7 +552,10 @@ export function RatingsContainer() {
                     )}
                   </div>
                   <div className={styles.ratingsSummaryBottom}>
-                    <div className={styles.ratingsSummaryBottomRight} style={{ flex: 1 }}>
+                    <div
+                      className={styles.ratingsSummaryBottomRight}
+                      style={{ flex: 1 }}
+                    >
                       <div
                         className={styles.ratingsBody}
                         style={{

From f5131266c277c6e440757d2cc12499e2476fd122 Mon Sep 17 00:00:00 2001
From: Henry Kim <henry1112200@gmail.com>
Date: Tue, 21 Apr 2026 17:07:51 -0700
Subject: [PATCH 33/34] color change

---
 .../Class/Ratings/RatingDetail/RatingDetail.module.scss         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/frontend/src/components/Class/Ratings/RatingDetail/RatingDetail.module.scss b/apps/frontend/src/components/Class/Ratings/RatingDetail/RatingDetail.module.scss
index 7f4222a91..b3046f300 100644
--- a/apps/frontend/src/components/Class/Ratings/RatingDetail/RatingDetail.module.scss
+++ b/apps/frontend/src/components/Class/Ratings/RatingDetail/RatingDetail.module.scss
@@ -23,7 +23,7 @@
 
         .title {
           margin: 0;
-          color: var(--paragraph-color);
+          color: var(--neutral-700);
           font-size: var(--text-14);
           font-weight: var(--font-normal);
           line-height: 1.25;

From f611ba06449efcff653f747373d0f165b8779997 Mon Sep 17 00:00:00 2001
From: Henry Kim <henry1112200@gmail.com>
Date: Wed, 22 Apr 2026 15:58:08 -0700
Subject: [PATCH 34/34] gap fix for UserRatingSumamry

---
 .../Class/Ratings/Ratings.module.scss         |  2 +-
 .../UserRatingSummary.module.scss             | 20 ++++++++++---------
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/apps/frontend/src/components/Class/Ratings/Ratings.module.scss b/apps/frontend/src/components/Class/Ratings/Ratings.module.scss
index 139207e76..5574e70b1 100644
--- a/apps/frontend/src/components/Class/Ratings/Ratings.module.scss
+++ b/apps/frontend/src/components/Class/Ratings/Ratings.module.scss
@@ -105,7 +105,7 @@
   display: flex;
   flex-direction: column;
   align-items: stretch;
-  // gap: var(--space-3, 12px);
+  gap: var(--space-3, 12px);
   align-self: stretch;
 }
 
diff --git a/apps/frontend/src/components/Class/Ratings/UserRatingSummary/UserRatingSummary.module.scss b/apps/frontend/src/components/Class/Ratings/UserRatingSummary/UserRatingSummary.module.scss
index 20468e336..5a7a0f376 100644
--- a/apps/frontend/src/components/Class/Ratings/UserRatingSummary/UserRatingSummary.module.scss
+++ b/apps/frontend/src/components/Class/Ratings/UserRatingSummary/UserRatingSummary.module.scss
@@ -37,12 +37,14 @@
       gap: 4px;
       flex: 1 0 0;
     }
-    h3, h4, h5 {
+    h3,
+    h4,
+    h5 {
       margin: 0;
     }
     h3 {
       color: var(--secondary-color);
-      font-feature-settings: 'liga' off;
+      font-feature-settings: "liga" off;
       font-family: Inter;
       font-size: var(--font-sizes-2, 14px);
       font-style: normal;
@@ -54,7 +56,7 @@
     }
     h4 {
       color: var(--paragraph-color);
-      font-feature-settings: 'liga' off;
+      font-feature-settings: "liga" off;
 
       /* Web UI (Desktop)/Body/Body Small */
       font-family: Inter;
@@ -65,7 +67,7 @@
     }
     h5 {
       color: var(--secondary-color);
-      font-feature-settings: 'liga' off;
+      font-feature-settings: "liga" off;
 
       /* Web UI (Desktop)/Body/Body Medium */
       font-family: Inter;
@@ -81,7 +83,7 @@
     .contentWrapper {
       position: relative;
       color: var(--secondary-color);
-      font-feature-settings: 'liga' off;
+      font-feature-settings: "liga" off;
       font-family: Inter;
       font-size: var(--font-sizes-2, 14px);
       font-weight: 400;
@@ -165,7 +167,7 @@
     display: flex;
     flex-direction: column;
     align-items: flex-start;
-    gap: 0;
+    gap: 4px;
     align-self: flex-start;
 
     > * {
@@ -208,8 +210,8 @@
 
 .ratingGrade {
   color: var(--secondary-color);
-  font-feature-settings: 'liga' off;
-  
+  font-feature-settings: "liga" off;
+
   /* Web UI (Desktop)/Title/Title Medium */
   font-family: Inter;
   font-size: var(--font-sizes-2, 14px);
@@ -217,4 +219,4 @@
   font-weight: 500;
   line-height: 20px; /* 142.857% */
   letter-spacing: -0.1px;
-}
\ No newline at end of file
+}