diff --git a/src/assets/logo.png b/src/assets/logo.png
new file mode 100644
index 00000000..294a3dc8
Binary files /dev/null and b/src/assets/logo.png differ
diff --git a/src/pages/background/lib/createSchedule.ts b/src/pages/background/lib/createSchedule.ts
index 4e0f37b3..97faf8b6 100644
--- a/src/pages/background/lib/createSchedule.ts
+++ b/src/pages/background/lib/createSchedule.ts
@@ -14,6 +14,7 @@ export default async function createSchedule(scheduleName: string): Promise<stri
     schedules.push({
         name: scheduleName,
         courses: [],
+        hours: 0
     });
 
     await UserScheduleStore.set('schedules', schedules);
diff --git a/src/shared/storage/UserScheduleStore.ts b/src/shared/storage/UserScheduleStore.ts
index d894799a..e7b14356 100644
--- a/src/shared/storage/UserScheduleStore.ts
+++ b/src/shared/storage/UserScheduleStore.ts
@@ -14,6 +14,7 @@ export const UserScheduleStore = createLocalStore<IUserScheduleStore>({
         new UserSchedule({
             courses: [],
             name: 'Schedule 1',
+            hours: 0,
         }),
     ],
     activeIndex: 0,
diff --git a/src/stories/components/PopupMain.stories.tsx b/src/stories/components/PopupMain.stories.tsx
new file mode 100644
index 00000000..dc452909
--- /dev/null
+++ b/src/stories/components/PopupMain.stories.tsx
@@ -0,0 +1,23 @@
+import { Meta, StoryObj } from '@storybook/react';
+import PopupMain from 'src/views/components/PopupMain';
+
+const meta = {
+    title: 'Components/Common/PopupMain',
+    component: PopupMain,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        
+    },
+} satisfies Meta<typeof PopupMain>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        
+    },
+};
\ No newline at end of file
diff --git a/src/stories/injected/CoursePopup.stories.ts b/src/stories/injected/CoursePopup.stories.ts
index ca510458..3f5b3665 100644
--- a/src/stories/injected/CoursePopup.stories.ts
+++ b/src/stories/injected/CoursePopup.stories.ts
@@ -57,6 +57,7 @@ const exampleCourse: Course = new Course({
 const exampleSchedule: UserSchedule = new UserSchedule({
     courses: [exampleCourse],
     name: 'Example Schedule',
+    hours: 0,
 });
 
 const meta = {
@@ -96,6 +97,7 @@ export const Open: Story = {
         activeSchedule: new UserSchedule({
             courses: [],
             name: 'Example Schedule',
+            hours: 0,
         }),
     },
 };
diff --git a/src/views/components/PopupMain.tsx b/src/views/components/PopupMain.tsx
index fa97323d..066109dd 100644
--- a/src/views/components/PopupMain.tsx
+++ b/src/views/components/PopupMain.tsx
@@ -1,24 +1,44 @@
-import { background } from '@shared/messages';
 import React from 'react';
-import useSchedules from '../hooks/useSchedules';
-import { Button } from './common/Button/Button';
+import logoImage from '../../assets/logo.png'; // Adjust the path as necessary
 import ExtensionRoot from './common/ExtensionRoot/ExtensionRoot';
+import Text from './common/Text/Text';
 
 export default function PopupMain() {
-    const [activeSchedule, schedules] = useSchedules();
+    // const [activeSchedule, schedules] = useSchedules();
 
     // TODO: Add a button to to switch the active schedule
 
     return (
         <ExtensionRoot>
-            <Button
-                onClick={() => {
-                    if (!activeSchedule) return;
-                    background.clearCourses({ scheduleName: activeSchedule?.name });
-                }}
-            >
-                Clear Courses
-            </Button>
+            <div className='h-[500px] w-[360px] rounded-lg bg-white shadow-md'>
+                <div className='mb-2 flex items-center justify-between bg-white px-4 py-3'>
+                    <div className='flex items-center gap-2'>
+                        <div className='h-13 w-13'>
+                            <img src={logoImage} alt='Logo' />
+                        </div>
+                        <div>
+                            <Text as='div' className='color-ut-burntorange text-lg font-500 leading-[100%]!'>
+                                UT Registration
+                            </Text>
+                            <Text as='div' className='text-lg color-ut-orange font-500 leading-[100%]!'>
+                                Plus
+                            </Text>
+                        </div>
+                    </div>
+                    <div className='flex items-center'>
+                        <button style={{ backgroundColor: '#bf5700', borderRadius: '8px', padding: '8px' }} />
+                        <button
+                            style={{
+                                backgroundColor: 'white',
+                                marginLeft: '10px',
+                                borderRadius: '8px',
+                                padding: '8px',
+                                boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.1)',
+                            }}
+                        />
+                    </div>
+                </div>
+            </div>
         </ExtensionRoot>
     );
 }
diff --git a/src/views/components/injected/CoursePopup/CourseHeader/CourseButtons/CourseButtons.tsx b/src/views/components/injected/CoursePopup/CourseHeader/CourseButtons/CourseButtons.tsx
index 87a8fc6a..5988ed68 100644
--- a/src/views/components/injected/CoursePopup/CourseHeader/CourseButtons/CourseButtons.tsx
+++ b/src/views/components/injected/CoursePopup/CourseHeader/CourseButtons/CourseButtons.tsx
@@ -1,11 +1,11 @@
 import { background } from '@shared/messages';
 import { Course } from '@shared/types/Course';
 import { UserSchedule } from '@shared/types/UserSchedule';
-import React from 'react';
 import { Button } from '@views/components/common/Button/Button';
 import Card from '@views/components/common/Card/Card';
 import Icon from '@views/components/common/Icon/Icon';
 import Text from '@views/components/common/Text/Text';
+import React from 'react';
 import styles from './CourseButtons.module.scss';
 
 type Props = {
@@ -83,48 +83,43 @@ export default function CourseButtons({ course, activeSchedule }: Props) {
             <Button
                 onClick={openRateMyProfessorURL}
                 disabled={!course.instructors.length}
-                variant='primary'
+                variant='filled'
                 className={styles.button}
+                color='ut-black'
                 title='Search for this professor on RateMyProfessor'
             >
-                <Text /*    size='medium' weight='regular' */color='white'>
-                    RateMyProf
-                </Text>
+                <Text /*    size='medium' weight='regular' */ color='white'>RateMyProf</Text>
                 <Icon className={styles.icon} color='white' name='school' size='medium' />
             </Button>
             <Button
                 onClick={openSyllabiURL}
-                variant='secondary'
+                variant='filled'
                 className={styles.button}
+                color='ut-black'
                 title='Search for syllabi for this course'
             >
-                <Text /*    size='medium' weight='regular'  */ color='white'>
-                    Syllabi
-                </Text>
+                <Text /*    size='medium' weight='regular'  */ color='white'>Syllabi</Text>
                 <Icon className={styles.icon} color='white' name='grading' size='medium' />
             </Button>
             <Button
                 onClick={openTextbookURL}
-                variant='tertiary'
+                variant='filled'
                 className={styles.button}
+                color='ut-black'
                 title='Search for textbooks for this course'
             >
-                <Text /*   size='medium' weight='regular' color='white'    */>
-                    Textbook
-                </Text>
+                <Text /*   size='medium' weight='regular' color='white'    */>Textbook</Text>
                 <Icon className={styles.icon} color='white' name='collections_bookmark' size='medium' />
             </Button>
             <Button
                 disabled={!activeSchedule}
                 onClick={isCourseSaved ? handleRemoveCourse : handleSaveCourse}
                 title={isCourseSaved ? 'Remove this course from your schedule' : 'Add this course to your schedule'}
-                variant={isCourseSaved ? 'danger' : 'success'}
+                variant='filled'
                 className={styles.button}
+                color='ut-black'
             >
-
-                <Text /*   size='medium' weight='regular' color='white'    */ >
-                    {isCourseSaved ? 'Remove' : 'Add'}
-                </Text>
+                <Text /*   size='medium' weight='regular' color='white'    */>{isCourseSaved ? 'Remove' : 'Add'}</Text>
                 <Icon className={styles.icon} color='white' name={isCourseSaved ? 'remove' : 'add'} size='medium' />
             </Button>
         </Card>
diff --git a/src/views/components/injected/TableRow/TableRow.tsx b/src/views/components/injected/TableRow/TableRow.tsx
index e9c6796e..fece3145 100644
--- a/src/views/components/injected/TableRow/TableRow.tsx
+++ b/src/views/components/injected/TableRow/TableRow.tsx
@@ -84,7 +84,7 @@ export default function TableRow({ row, isSelected, activeSchedule, onClick }: P
 
     return ReactDOM.createPortal(
         <>
-            <Button className={styles.rowButton} onClick={onClick} variant='secondary'>
+            <Button className={styles.rowButton} onClick={onClick} variant='filled' color='ut-black'>
                 <Icon name='bar_chart' color='white' size='medium' />
             </Button>
             {conflicts.length > 0 && (