fix: add Select comopnent

client/src/components/teacherSection/Reviews/AddReview.tsx

@@ -7,6 +7,7 @@ import { Appointment } from "../../../types/appointments.types";
 import { Loader } from "../../loader/Loader";
 import { useNotificationStore } from "../../../store/notification.store";
 import { ReviewType } from "../../../api/review/review.type";
+import { SelectComponent } from "../../ui/select/select";
 
 interface AddReviewFormProps {
   teacherId: string;
@@ -29,6 +30,15 @@ export const AddReview = ({
   const { data, isLoading } = useStudentAppointmentsQuery(studentId);
   const { mutate, isPending } = useCreateReviewMutation(teacherId);
 
+  // If not logged in, don't show the review form
+  if (!isLoggedIn) return null;
+  if (isLoading)
+    return (
+      <div className="flex justify-center p-4">
+        <Loader />
+      </div>
+    );
+
   // Get the set of bookingIds that already have reviews
   const reviewedBookingIds = new Set(
     accumulatedReviews.map((r) => r.bookingId),
@@ -43,14 +53,22 @@ export const AddReview = ({
         !reviewedBookingIds.has(app.id),
     ) || [];
 
-  // If not logged in, don't show the review form
-  if (!isLoggedIn) return null;
-  if (isLoading)
-    return (
-      <div className="flex justify-center p-4">
-        <Loader />
-      </div>
-    );
+  if (approvedLessons.length === 0) {
+    return null;
+  }
+
+  // Options list for the select dropdown
+  const lessonOptions = approvedLessons.map((app: Appointment) => ({
+    value: app.id,
+    label: `${app.lesson} ---- ${new Date(app.date).toLocaleDateString(
+      "en-GB",
+      {
+        day: "numeric",
+        month: "short",
+        year: "numeric",
+      },
+    )}`,
+  }));
 
   // Find the selected booking details for use in the review
   const selectBooking = approvedLessons?.find(
@@ -101,35 +119,13 @@ export const AddReview = ({
           >
             Select a lesson
           </label>
-          <select
-            id="lesson-select"
-            className="bg-dark px-4 py-3 border border-white/10 focus:border-primary-500 rounded-lg outline-none w-full text-white cursor-pointer"
+
+          <SelectComponent
+            options={lessonOptions}
             value={selectedBookingId}
-            onChange={(e) => setSelectedBookingId(e.target.value)}
-            required
-          >
-            <option value="" className="bg-[#1A1926] text-white">
-              -- Choose a lesson --
-            </option>
-
-            {approvedLessons?.map((app: Appointment) => (
-              <option
-                key={app.id}
-                value={app.id}
-                className="bg-purple-500/80 text-white cursor-pointer"
-              >
-                {`${app.lesson} ---- ${new Date(app.date).toLocaleDateString(
-                  "en-GB",
-                  {
-                    day: "numeric",
-                    month: "short",
-                    year: "numeric",
-                  },
-                )}
-                 `}
-              </option>
-            ))}
-          </select>
+            onChange={(value) => setSelectedBookingId(value)}
+            placeholder="Choose a lesson to review"
+          />
         </div>
 
         {/* Rating Stars */}

client/src/components/teacherSection/Reviews/ReviewCardTeacher.tsx

@@ -56,7 +56,7 @@ export const ReviewCardTeacher = ({
           </div>
 
           {review && (
-            <p className="text-white/80 text-xs md:text-base wrap-break-word">
+            <p className="text-white/80 text-xs md:text-base text-justify wrap-break-word">
               {review}
             </p>
           )}

client/src/components/teacherSection/Reviews/ReviewsManager.tsx

@@ -41,6 +41,17 @@ export const ReviewsManager = () => {
 
   return (
     <>
+      <div className="text-center">
+        <h2 className="mb-6 sm:mb-8 lg:mb-10 font-bold text-white xl:text-[56px] text-3xl sm:text-4xl lg:text-5xl">
+          What our clients say
+        </h2>
+        <p className="mx-auto mb-12 sm:mb-16 lg:mb-20 px-4 max-w-3xl text-white/70 text-sm sm:text-base lg:text-lg text-justify leading-relaxed">
+          Students appreciate the practical approach, supportive instructors,
+          and clear learning structure across all courses. Many international
+          students highlight fast progress, increased confidence, and a
+          comfortable learning environment.
+        </p>
+      </div>
       <AddReview
         teacherId={teacherId ?? ""}
         accumulatedReviews={accumulatedReviews}

client/src/components/teacherSection/Reviews/ReviewsTeacher.tsx

@@ -19,19 +19,7 @@ export const ReviewsTeacher = ({
   return (
     <section className="py-12 sm:py-16 lg:py-20 section-spacing">
       <div className="mx-auto px-4 sm:px-6 lg:px-8 container-centered">
-        <div className="text-center">
-          <h2 className="mb-6 sm:mb-8 lg:mb-10 font-bold text-white xl:text-[56px] text-3xl sm:text-4xl lg:text-5xl">
-            What our clients say
-          </h2>
-          <p className="mx-auto mb-12 sm:mb-16 lg:mb-20 px-4 max-w-3xl text-white/70 text-sm sm:text-base lg:text-lg leading-relaxed">
-            Students appreciate the practical approach, supportive instructors,
-            and clear learning structure across all courses. Many international
-            students highlight fast progress, increased confidence, and a
-            comfortable learning environment.
-          </p>
-        </div>
-
-        <div className="gap-x-8 gap-y-12 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 w-full">
+        <div className="gap-x-8 gap-y-12 grid grid-cols-1 w-full">
           {reviews.map((review) => (
             <div
               key={review._id}