diff --git a/src/views/components/common/CalendarGrid/CalendarGrid.module.scss b/src/views/components/common/CalendarGrid/CalendarGrid.module.scss
index c40bafc2..7a6d8762 100644
--- a/src/views/components/common/CalendarGrid/CalendarGrid.module.scss
+++ b/src/views/components/common/CalendarGrid/CalendarGrid.module.scss
@@ -29,15 +29,16 @@
 
 .day {
     gap: 5px;
+    color: #bf5700;
     text-align: center;
     font-size: 14.22px;
     font-style: normal;
     font-weight: 500;
     line-height: normal;
     margin-top: 20px;
-    border-right: 1px solid #DADCE0;
-    border-bottom: 1px solid #DADCE0;
-    border-left: 1px solid #DADCE0;
+    border-right: 1px solid #dadce0;
+    border-bottom: 1px solid #dadce0;
+    border-left: 1px solid #dadce0;
 }
 
 .timeAndGrid {
diff --git a/src/views/components/common/CalendarGrid/CalendarGrid.tsx b/src/views/components/common/CalendarGrid/CalendarGrid.tsx
index 817ab0a6..9c91fe84 100644
--- a/src/views/components/common/CalendarGrid/CalendarGrid.tsx
+++ b/src/views/components/common/CalendarGrid/CalendarGrid.tsx
@@ -1,58 +1,56 @@
 import React from 'react';
-import CalendarCell from '../CalendarGridCell/CalendarGridCell';
 import { DAY_MAP } from 'src/shared/types/CourseMeeting';
+import styles from './CalendarGrid.module.scss';
+import CalendarCell from '../CalendarGridCell/CalendarGridCell';
 
 const daysOfWeek = Object.keys(DAY_MAP).filter(key => !['S', 'SU'].includes(key));
 const hoursOfDay = Array.from({ length: 14 }, (_, index) => index + 8);
 const grid = [];
 for (let i = 0; i < 13; i++) {
-  const row = [];
-  let hour = hoursOfDay[i];
-  row.push(
-    <div key={hour} className="flex">
-      <div className="flex flex-col items-end">
-        <p className="text-left">{(hour % 12 === 0 ? 12 : hour % 12) + (hour < 12 ? ' AM' : ' PM')}</p>
-      </div>
-    </div>
-  );
-  row.push(Array.from({ length: 5 }, (_, j) => <CalendarCell key={j} />));
-  grid.push(row);
+    const row = [];
+    let hour = hoursOfDay[i];
+    row.push(
+        <div key={hour} className={styles.timeBlock}>
+            <div className={styles.timeLabelContainer}>
+                <p>{(hour % 12 === 0 ? 12 : hour % 12) + (hour < 12 ? ' AM' : ' PM')}</p>
+            </div>
+        </div>
+    );
+    row.push(Array.from({ length: 5 }, (_, j) => <CalendarCell key={j} />));
+    grid.push(row);
 }
 
 /**
  * Grid of CalendarGridCell components forming the user's course schedule calendar view
  * @param props
  */
-const Calendar: React.FC = (props) => {
-  return (
-    <div className="grid grid-cols-7">
-      <div className="flex justify-center items-center h-13 min-w-40 min-h-13 pb-15 gap-10 flex-1">
-      </div>
-      {/* Displaying the rest of the calendar */}
-      <div className="flex">
-        {/* <div className="flex flex-col justify-between items-start flex-1">
-          <div className="flex"></div>
+const Calendar: React.FC = props => (
+    <div className={styles.calendar}>
+        <div className={styles.dayLabelContainer} />
+        {/* Displaying the rest of the calendar */}
+        <div className={styles.timeAndGrid}>
+            {/* <div className={styles.timeColumn}>
+          <div className={styles.timeBlock}></div>
           {hoursOfDay.map((hour) => (
-            <div key={hour} className="flex">
-              <div className="flex flex-col items-end">
+            <div key={hour} className={styles.timeBlock}>
+              <div className={styles.timeLabelContainer}>
                 <p>{hour % 12 === 0 ? 12 : hour % 12} {hour < 12 ? 'AM' : 'PM'}</p>
               </div>
             </div>
           ))}
         </div> */}
-        <div className="grid grid-cols-6 grid-rows-13">
-          {/* Displaying day labels */}
-          <div className="flex"></div>
-          {daysOfWeek.map(day => (
-            <div key={day} className="border border-solid border-gray-300 text-center">
-              {day}
+            <div className={styles.calendarGrid}>
+                {/* Displaying day labels */}
+                <div className={styles.timeBlock} />
+                {daysOfWeek.map(day => (
+                    <div key={day} className={styles.day}>
+                        {day}
+                    </div>
+                ))}
+                {grid.map((row, rowIndex) => row)}
             </div>
-          ))}
-          {grid.map((row, rowIndex) => (row))}
         </div>
-      </div>
     </div>
-  )
-};
+);
 
 export default Calendar;
diff --git a/src/views/components/common/CalendarGridCell/CalendarGridCell.tsx b/src/views/components/common/CalendarGridCell/CalendarGridCell.tsx
index 5cab19b0..600a5712 100644
--- a/src/views/components/common/CalendarGridCell/CalendarGridCell.tsx
+++ b/src/views/components/common/CalendarGridCell/CalendarGridCell.tsx
@@ -1,15 +1,14 @@
 import React from 'react';
+import styles from './CalendarGridCell.module.scss';
 
 /**
  * Component representing each 1 hour time block of a calendar
  * @param props
  */
-const CalendarCell: React.FC = (props) => {
-  return (
-    <div className="flex w-56 h-12 min-w-12 min-h-10 flex-col justify-center items-start border border-gray-300">
-      <div className="w-full h-1 border-none rounded-none bg-gray-300 bg-opacity-25"></div>
+const CalendarCell: React.FC = props => (
+    <div className={styles.calendarCell}>
+        <div className={styles.hourLine} />
     </div>
-  );
-};
+);
 
 export default CalendarCell;