diff --git a/src/stories/injected/CoursePopup2.stories.ts b/src/stories/injected/CoursePopup2.stories.ts
new file mode 100644
index 00000000..6a48fcbd
--- /dev/null
+++ b/src/stories/injected/CoursePopup2.stories.ts
@@ -0,0 +1,16 @@
+import { Meta } from '@storybook/react';
+import { Course } from 'src/shared/types/Course';
+
+const testCourse: Course = {
+    
+}
+
+const meta: Meta<typeof CoursePopup2> = {
+    component: CoursePopup2,
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Open: Story = {
+
+};
diff --git a/src/views/components/injected/CoursePopup2/CourseHeadingAndActions.tsx b/src/views/components/injected/CoursePopup2/CourseHeadingAndActions.tsx
new file mode 100644
index 00000000..ffd8478b
--- /dev/null
+++ b/src/views/components/injected/CoursePopup2/CourseHeadingAndActions.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import { Course } from 'src/shared/types/Course';
+import Text from '../../common/Text/Text';
+import { Button } from '../../common/Button/Button';
+
+interface CourseHeadingAndActionsProps {
+    course: Course;
+}
+
+const CourseHeadingAndActions = ({ course }: CourseHeadingAndActionsProps) => {
+    const { courseName, department, number, uniqueId } = course;
+    return (
+        <div className='w-full pb-3 pt-6'>
+            <div className='flex gap-1'>
+                <Text variant='h1'>
+                    {courseName} ({department} {number})
+                </Text>
+                <Button>{uniqueId}</Button>
+            </div>
+        </div>
+    );
+};
+
+export default CourseHeadingAndActions;
diff --git a/src/views/components/injected/CoursePopup2/CoursePopup2.tsx b/src/views/components/injected/CoursePopup2/CoursePopup2.tsx
new file mode 100644
index 00000000..4a432b09
--- /dev/null
+++ b/src/views/components/injected/CoursePopup2/CoursePopup2.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { Course } from 'src/shared/types/Course';
+import { UserSchedule } from 'src/shared/types/UserSchedule';
+import Popup from '../../common/Popup/Popup';
+import CourseHeadingAndActions from './CourseHeadingAndActions';
+
+interface CoursePopup2Props {
+    course: Course;
+    activeSchedule?: UserSchedule;
+}
+
+const CoursePopup2 = ({ course, activeSchedule }: CoursePopup2Props) => (
+    <Popup className='px-6'>
+        <div className='flex flex-col'>
+            <CourseHeadingAndActions  course={course} />
+        </div>
+    </Popup>
+);
+
+export default CoursePopup2;