diff --git a/.vscode/settings.json b/.vscode/settings.json
index e5de7edc..f8561e6f 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -8,7 +8,7 @@
         "editor.defaultFormatter": "esbenp.prettier-vscode"
     },
     "[typescriptreact]": {
-        "editor.defaultFormatter": "esbenp.prettier-vscode"
+        "editor.defaultFormatter": "vscode.typescript-language-features"
     },
     "[typescript]": {
         "editor.defaultFormatter": "esbenp.prettier-vscode"
diff --git a/src/views/components/common/CalendarGrid/CalendarGrid.tsx b/src/views/components/common/CalendarGrid/CalendarGrid.tsx
index c81fe8f0..c0161ec2 100644
--- a/src/views/components/common/CalendarGrid/CalendarGrid.tsx
+++ b/src/views/components/common/CalendarGrid/CalendarGrid.tsx
@@ -6,46 +6,34 @@ import { DAY_MAP } from 'src/shared/types/CourseMeeting';
 const daysOfWeek = Object.values(DAY_MAP);
 const hoursOfDay = Array.from({ length: 14 }, (_, index) => index + 8);
 const grid = Array.from({ length: 5 }, () =>
-    Array.from({ length: 13 }, (_, columnIndex) => <CalendarCell key={columnIndex} />)
+  Array.from({ length: 13 }, (_, columnIndex) => <CalendarCell key={columnIndex} />)
 );
 
 /**
  * Grid of CalendarGridCell components forming the user's course schedule calendar view
  * @param props
  */
-const Calendar: React.FC = props => {
-    return (
-      <div className={styles.calendar}>
-        <div className={styles.dayLabelContainer}></div>
-        {daysOfWeek.map((day, dayIndex) => (
-          <div key={dayIndex} className={styles.day}>
-            <div className={styles.dayLabelContainer}>
-                {/* Empty cell in the top-left corner */}
-                <div className={styles.day} />
-                {/* Displaying day labels */}
-                {daysOfWeek.map(day => (
-                    <div key={day} className={styles.day}>
-                        {day}
-                    </div>
-                ))}
-            </div>
-            {/* Displaying the rest of the calendar */}
-            <div className={styles.timeAndGrid}>
-                <div className={styles.timeColumn}>
-                    {hoursOfDay.map(hour => (
-                        <div key={hour} className={styles.timeBlock}>
-                            <div className={styles.timeLabelContainer}>
-                                <p>
-                                    {hour % 12 === 0 ? 12 : hour % 12}:00 {hour < 12 ? 'AM' : 'PM'}
-                                </p>
-                            </div>
-                        </div>
-                    ))}
-                </div>
-                <div className={styles.calendarGrid}>{grid.map((row, rowIndex) => row)}</div>
+const Calendar: React.FC = (props) => {
+  return (
+    <div className={styles.calendar}>
+      <div className={styles.dayLabelContainer}></div>
+      {daysOfWeek.map((day, dayIndex) => (
+        <div key={dayIndex} className={styles.day}>
+          <div className={styles.dayLabelContainer}>
+            <div className={styles.dayLabel}>{day}</div>
+          </div>
+          {hoursOfDay.map((hour) => (
+            <div key={`${day}-${hour}`} className={styles.timeBlock}>
+              <div className={styles.timeLabelContainer}>
+                <span>{hour}:00</span>
+              </div>
+              <CalendarCell />
             </div>
+          ))}
         </div>
-    );
+      ))}
+    </div>
+  );
 };
 
 export default Calendar;