diff --git a/src/stories/components/CalendarGrid.stories.tsx b/src/stories/components/CalendarGrid.stories.tsx
index 0eb884b9..8240fbbe 100644
--- a/src/stories/components/CalendarGrid.stories.tsx
+++ b/src/stories/components/CalendarGrid.stories.tsx
@@ -1,5 +1,8 @@
 import { Meta, StoryObj } from '@storybook/react';
 import CalendarGrid from 'src/views/components/common/CalendarGrid/CalendarGrid';
+import { getCourseColors } from 'src/shared/util/colors';
+import { CalendarGridCourse } from 'src/views/hooks/useFlattenedCourseSchedule';
+import { Status } from 'src/shared/types/Course';
 
 const meta = {
     title: 'Components/Common/Calendar',
@@ -16,10 +19,41 @@ const meta = {
 } satisfies Meta<typeof CalendarGrid>;
 export default meta;
 
+const testData: CalendarGridCourse[] = [
+  {
+      calendarGridPoint: {
+          dayIndex: 0,
+          startIndex: 1,
+          endIndex: 2,
+      },
+      componentProps: {
+          courseDeptAndInstr: 'Course 1',
+          timeAndLocation: '9:00 AM - 10:00 AM, Room 101',
+          status: Status.OPEN,
+          colors: getCourseColors('emerald', 500),
+      },
+  },
+  {
+      calendarGridPoint: {
+          dayIndex: 1,
+          startIndex: 2,
+          endIndex: 3,
+      },
+      componentProps: {
+          courseDeptAndInstr: 'Course 2',
+          timeAndLocation: '10:00 AM - 11:00 AM, Room 102',
+          status: Status.CLOSED,
+          colors: getCourseColors('emerald', 500),
+      },
+  },
+  // add more data as needed
+];
+
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
     args: {
         saturdayClass: true,
+        courseCells: testData,
     },
 };
diff --git a/src/views/components/common/CalendarGrid/CalendarGrid.tsx b/src/views/components/common/CalendarGrid/CalendarGrid.tsx
index b8af8394..43050e42 100644
--- a/src/views/components/common/CalendarGrid/CalendarGrid.tsx
+++ b/src/views/components/common/CalendarGrid/CalendarGrid.tsx
@@ -1,10 +1,9 @@
 import React, {useRef} from 'react';
 import html2canvas from 'html2canvas';
 import { DAY_MAP } from 'src/shared/types/CourseMeeting';
-import CalendarCell from '../CalendarGridCell/CalendarGridCell';
 import { CalendarGridCourse } from 'src/views/hooks/useFlattenedCourseSchedule';
+import CalendarCell from '../CalendarGridCell/CalendarGridCell';
 import CalendarCourseCell from '../CalendarCourseCell/CalendarCourseCell';
-import { Chip } from '../Chip/Chip';
 import styles from './CalendarGrid.module.scss';
 import calIcon from 'src/assets/icons/cal.svg';
 import pngIcon from 'src/assets/icons/png.svg';
@@ -78,15 +77,16 @@ function CalendarGrid({ courseCells, saturdayClass }: React.PropsWithChildren<Pr
                     ))}
                 </div>
             </div>
-            {/* {courseCells.map((Block: typeof CalendarCourseCell) => (
+            {courseCells.map((block: CalendarGridCourse) => (
                 <div
-                    key={`${Block}`}
+                    key={`${block}`}
                     style={{
-                        gridColumn: `1`,
-                        gridRow: `1`,
+                        gridColumn: `${block.calendarGridPoint.dayIndex}`,
+                        gridRow: `${block.calendarGridPoint.startIndex} / ${block.calendarGridPoint.endIndex}`,
                     }}
                 >
-                    <CalendarCourseCell courseDeptAndInstr={} />
+                    <CalendarCourseCell courseDeptAndInstr={block.componentProps.courseDeptAndInstr} 
+                                        status={block.componentProps.status} colors={block.componentProps.colors}/>
                 </div>
                 ))} */}
             <div className={styles.buttonContainer}>