diff --git a/src/views/components/common/CalendarGrid/CalendarGrid.module.scss b/src/views/components/common/CalendarGrid/CalendarGrid.module.scss
new file mode 100644
index 00000000..7a6d8762
--- /dev/null
+++ b/src/views/components/common/CalendarGrid/CalendarGrid.module.scss
@@ -0,0 +1,91 @@
+.dayLabelContainer {
+    display: flex;
+    flex-direction: row;
+    height: 13px;
+    min-width: 40px;
+    min-height: 13px;
+    padding-bottom: 15px;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+    flex: 1 0 0;
+}
+
+.calendarGrid {
+    display: grid;
+    grid-template-columns: repeat(6, 1fr);
+    grid-template-rows: repeat(13, 1fr);
+}
+
+.calendarRow {
+    display: flex;
+}
+
+.calendar {
+    // display: grid;
+    // grid-template-columns: auto repeat(5, 1fr);
+    gap: 10px;
+}
+
+.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;
+}
+
+.timeAndGrid {
+    display: flex;
+}
+
+.timeColumn {
+    display: flex;
+    min-height: 573px;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: flex-start;
+    flex: 1 0 0;
+    border-radius: var(--border-radius-none, 0px);
+}
+
+.timeBlock {
+    display: flex;
+    width: auto;
+    height: auto;
+    flex-direction: column;
+    align-items: flex-end;
+
+    .timeLabelContainer {
+        display: flex;
+        max-height: 20px;
+        flex-direction: column;
+        align-items: flex-end;
+        gap: 17px;
+        flex: 1 0 0;
+        border-radius: var(--border-radius-none, 0px);
+    }
+
+    p {
+        color: #1a2024;
+        text-align: left;
+        height: 6.6px;
+        align-self: stretch;
+        margin-top: -10px;
+        margin-right: 10px;
+        margin-bottom: 0;
+
+        /* Type scale/small */
+        font-family: 'Roboto Flex';
+        font-size: 14.22px;
+        font-style: normal;
+        font-weight: 500;
+        line-height: normal;
+    }
+}
diff --git a/src/views/components/common/CalendarGrid/CalendarGrid.tsx b/src/views/components/common/CalendarGrid/CalendarGrid.tsx
index 4c0ed875..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 
+ * @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.module.scss b/src/views/components/common/CalendarGridCell/CalendarGridCell.module.scss
new file mode 100644
index 00000000..b34ddb32
--- /dev/null
+++ b/src/views/components/common/CalendarGridCell/CalendarGridCell.module.scss
@@ -0,0 +1,18 @@
+.calendarCell {
+    display: flex;
+    width: 213.8px;
+    height: 44.769px;
+    min-width: 45px;
+    min-height: 40px;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    border: 1px solid #dadce0;
+}
+
+.hourLine {
+    width: 213.8px;
+    height: 1px;
+    border-radius: var(--border-radius-none, 0px);
+    background: rgba(218, 220, 224, 0.25);
+}
diff --git a/src/views/components/common/CalendarGridCell/CalendarGridCell.tsx b/src/views/components/common/CalendarGridCell/CalendarGridCell.tsx
index ec678306..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 
+ * @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;