diff --git a/src/stories/components/CalendarGrid.stories.tsx b/src/stories/components/CalendarGrid.stories.tsx
new file mode 100644
index 00000000..c567cd95
--- /dev/null
+++ b/src/stories/components/CalendarGrid.stories.tsx
@@ -0,0 +1,19 @@
+// Calendar.stories.tsx
+import React from 'react';
+import Calendar from 'src/views/components/common/CalendarGrid/CalendarGrid';
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta = {
+  title: 'Components/Common/Calendar',
+  component: Calendar,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: 'centered',
+    tags: ['autodocs'],
+  }
+} satisfies Meta<typeof Calendar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
\ No newline at end of file
diff --git a/src/views/components/common/CalendarGrid/CalendarGrid.module.scss b/src/views/components/common/CalendarGrid/CalendarGrid.module.scss
index e12c152e..6f1cf6c8 100644
--- a/src/views/components/common/CalendarGrid/CalendarGrid.module.scss
+++ b/src/views/components/common/CalendarGrid/CalendarGrid.module.scss
@@ -29,9 +29,7 @@
     gap: 10px;
 }
 
-.dayy {
-    display: grid;
-    grid-template-columns: auto repeat(14, 1fr);
+.day {
     gap: 5px;
 }
 
diff --git a/src/views/components/common/CalendarGrid/CalendarGrid.tsx b/src/views/components/common/CalendarGrid/CalendarGrid.tsx
index 234a9aa4..f653b5bd 100644
--- a/src/views/components/common/CalendarGrid/CalendarGrid.tsx
+++ b/src/views/components/common/CalendarGrid/CalendarGrid.tsx
@@ -3,7 +3,7 @@ import styles from './CalendarGrid.module.scss';
 import CalendarCell from '../CalendarGridCell/CalendarGridCell';
 import { DAY_MAP } from 'src/shared/types/CourseMeeting';
 
-const daysOfWeek = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'];
+const daysOfWeek = Object.values(DAY_MAP);
 const hoursOfDay = Array.from({ length: 14 }, (_, index) => index + 8);
 
 /**
@@ -16,7 +16,7 @@ const Calendar: React.FC = (props) => {
       <div className={styles.calendar}>
         <div className={styles.dayLabelContainer}></div>
         {daysOfWeek.map((day, dayIndex) => (
-          <div key={dayIndex} className={styles.dayy}>
+          <div key={dayIndex} className={styles.day}>
             <div className={styles.dayLabelContainer}>
               <div className={styles.dayLabel}>{day}</div>
             </div>