diff --git a/src/pages/background/lib/createSchedule.ts b/src/pages/background/lib/createSchedule.ts
index 52ceff1b..59399311 100644
--- a/src/pages/background/lib/createSchedule.ts
+++ b/src/pages/background/lib/createSchedule.ts
@@ -1,6 +1,8 @@
 import { UserScheduleStore } from '@shared/storage/UserScheduleStore';
 import { generateRandomId } from '@shared/util/random';
 
+import handleDuplicate from './handleDuplicate';
+
 /**
  * Creates a new schedule with the given name
  * @param scheduleName the name of the schedule to create
@@ -8,13 +10,13 @@ import { generateRandomId } from '@shared/util/random';
  */
 export default async function createSchedule(scheduleName: string): Promise<string | undefined> {
     const schedules = await UserScheduleStore.get('schedules');
-    // if (schedules.find(schedule => schedule.name === scheduleName)) {
-    //     return `Schedule ${scheduleName} already exists`;
-    // }
+
+    // Duplicate schedule found, we need to append a number to the end of the schedule name
+    const updatedName = await handleDuplicate(scheduleName);
 
     schedules.push({
         id: generateRandomId(),
-        name: scheduleName,
+        name: updatedName,
         courses: [],
         hours: 0,
         updatedAt: Date.now(),
diff --git a/src/pages/background/lib/deleteSchedule.ts b/src/pages/background/lib/deleteSchedule.ts
index 2f627fba..949f2352 100644
--- a/src/pages/background/lib/deleteSchedule.ts
+++ b/src/pages/background/lib/deleteSchedule.ts
@@ -17,7 +17,11 @@ export default async function deleteSchedule(scheduleId: string): Promise<string
         throw new Error(`Schedule ${scheduleId} does not exist`);
     }
     if (scheduleIndex === activeIndex) {
-        throw new Error('You cannot delete your active schedule! Please switch to another schedule before deleting.');
+        throw new Error(`Cannot delete active schedule`);
+    }
+
+    if (scheduleIndex < activeIndex) {
+        await UserScheduleStore.set('activeIndex', activeIndex - 1);
     }
 
     schedules.splice(scheduleIndex, 1);
diff --git a/src/pages/background/lib/duplicateSchedule.ts b/src/pages/background/lib/duplicateSchedule.ts
new file mode 100644
index 00000000..753d1b79
--- /dev/null
+++ b/src/pages/background/lib/duplicateSchedule.ts
@@ -0,0 +1,31 @@
+import { UserScheduleStore } from '@shared/storage/UserScheduleStore';
+import { generateRandomId } from '@shared/util/random';
+
+import handleDuplicate from './handleDuplicate';
+
+/**
+ * Creates a new schedule with the given name
+ * @param scheduleName the name of the schedule to create
+ * @returns undefined if successful, otherwise an error message
+ */
+export default async function duplicateSchedule(scheduleId: string): Promise<string | undefined> {
+    const schedules = await UserScheduleStore.get('schedules');
+    const schedule = schedules.find(schedule => schedule.id === scheduleId);
+
+    if (schedule === undefined) {
+        throw new Error(`Schedule ${scheduleId} does not exist`);
+    }
+
+    const updatedName = await handleDuplicate(schedule.name);
+
+    schedules.push({
+        id: generateRandomId(),
+        name: updatedName,
+        courses: JSON.parse(JSON.stringify(schedule.courses)),
+        hours: schedule.hours,
+        updatedAt: Date.now(),
+    } satisfies typeof schedule);
+
+    await UserScheduleStore.set('schedules', schedules);
+    return undefined;
+}
diff --git a/src/pages/background/lib/handleDuplicate.ts b/src/pages/background/lib/handleDuplicate.ts
new file mode 100644
index 00000000..63300066
--- /dev/null
+++ b/src/pages/background/lib/handleDuplicate.ts
@@ -0,0 +1,37 @@
+import { UserScheduleStore } from '@shared/storage/UserScheduleStore';
+
+/**
+ * Duplicates a new schedule with the given name.
+ * Assumes that each schedule has a unique name.
+ * @param scheduleName the name of the schedule to handle duplication for
+ * @param schedules the list of UserSchedules to find existing names
+ * @returns the new name for the schedule, of the form `{baseName}({index})`
+ */
+export default async function handleDuplicate(scheduleName: string): Promise<string> {
+    const schedules = await UserScheduleStore.get('schedules');
+
+    // No point in checking for duplicates if the name is unique
+    if (schedules.find(schedule => schedule.name === scheduleName) === undefined) {
+        return scheduleName;
+    }
+
+    // Regex for matching `{baseName}({index})`, where match[1] = baseName, match[2] = (index)
+    const regex = /^(.+?)(\(\d+\))?$/;
+
+    // Extract base name and existing index
+    const match = scheduleName.match(regex);
+    const baseName = match && match[1] ? match[1] : scheduleName;
+
+    // Extract number from parentheses and increment
+    let index = match && match[2] ? parseInt(match[2].slice(1, -1), 10) + 1 : 1;
+
+    let newName: string;
+
+    // Increment until an unused index is found
+    do {
+        newName = `${baseName} (${index++})`;
+        // eslint-disable-next-line @typescript-eslint/no-loop-func
+    } while (schedules.find(schedule => schedule.name === newName));
+
+    return newName;
+}
diff --git a/src/pages/background/lib/renameSchedule.ts b/src/pages/background/lib/renameSchedule.ts
index 15024cc0..eeac6d6f 100644
--- a/src/pages/background/lib/renameSchedule.ts
+++ b/src/pages/background/lib/renameSchedule.ts
@@ -1,21 +1,41 @@
 import { UserScheduleStore } from '@shared/storage/UserScheduleStore';
 
+import handleDuplicate from './handleDuplicate';
+
 /**
  * Renames a schedule with the specified name to a new name.
  * @param scheduleId - The id of the schedule to be renamed.
  * @param newName - The new name for the schedule.
- * @returns A promise that resolves to a string if there is an error, or undefined if the schedule is renamed successfully.
+ * @returns A promise that resolves to the new name if successful, otherwise undefined.
  */
 export default async function renameSchedule(scheduleId: string, newName: string): Promise<string | undefined> {
     const schedules = await UserScheduleStore.get('schedules');
+
     const scheduleIndex = schedules.findIndex(schedule => schedule.id === scheduleId);
     if (scheduleIndex === -1) {
-        return `Schedule ${scheduleId} does not exist`;
+        return undefined;
+    }
+    const schedule = schedules[scheduleIndex];
+    if (schedule === undefined) {
+        return undefined;
     }
 
-    schedules[scheduleIndex]!.name = newName;
-    // schedules[scheduleIndex].updatedAt = Date.now();
+    // if old name is of the form `{baseName}{index}` and newName === baseName, do nothing.
+    const oldName = schedule.name;
+    const regex = /^(.+?)(\(\d+\))?$/;
+    const match = oldName?.match(regex);
+    const baseName = match?.[1] ?? '';
+    const baseNameOfNewName = newName.match(regex)?.[1];
+
+    if (baseName === baseNameOfNewName) {
+        return oldName;
+    }
+
+    const updatedName = await handleDuplicate(newName);
+
+    schedule.name = updatedName;
+    schedule.updatedAt = Date.now();
 
     await UserScheduleStore.set('schedules', schedules);
-    return undefined;
+    return newName;
 }
diff --git a/src/views/components/PopupMain.tsx b/src/views/components/PopupMain.tsx
index e0f9e74e..a929817e 100644
--- a/src/views/components/PopupMain.tsx
+++ b/src/views/components/PopupMain.tsx
@@ -17,6 +17,7 @@ import RefreshIcon from '~icons/material-symbols/refresh';
 import SettingsIcon from '~icons/material-symbols/settings';
 
 import CourseStatus from './common/CourseStatus';
+import DialogProvider from './common/DialogProvider/DialogProvider';
 import { SmallLogo } from './common/LogoIcon';
 import PopupCourseBlock from './common/PopupCourseBlock';
 import ScheduleDropdown from './common/ScheduleDropdown';
@@ -50,111 +51,116 @@ export default function PopupMain(): JSX.Element {
 
     return (
         <ExtensionRoot>
-            <div className='h-screen max-h-full flex flex-col bg-white'>
-                <div className='p-5 py-3.5'>
-                    <div className='flex items-center justify-between bg-white'>
-                        <SmallLogo />
-                        <div className='flex items-center gap-2.5'>
-                            <button className='bg-ut-burntorange px-2 py-1.25 btn' onClick={handleCalendarOpenOnClick}>
-                                <CalendarIcon className='size-6 text-white' />
-                            </button>
-                            <button className='bg-transparent px-2 py-1.25 btn' onClick={handleOpenOptions}>
-                                <SettingsIcon className='size-6 color-ut-black' />
-                            </button>
+            <DialogProvider>
+                <div className='h-screen max-h-full flex flex-col bg-white'>
+                    <div className='p-5 py-3.5'>
+                        <div className='flex items-center justify-between bg-white'>
+                            <SmallLogo />
+                            <div className='flex items-center gap-2.5'>
+                                <button
+                                    className='bg-ut-burntorange px-2 py-1.25 btn'
+                                    onClick={handleCalendarOpenOnClick}
+                                >
+                                    <CalendarIcon className='size-6 text-white' />
+                                </button>
+                                <button className='bg-transparent px-2 py-1.25 btn' onClick={handleOpenOptions}>
+                                    <SettingsIcon className='size-6 color-ut-black' />
+                                </button>
+                            </div>
                         </div>
                     </div>
-                </div>
-                <Divider orientation='horizontal' size='100%' />
-                <div className='px-5 pb-2.5 pt-3.75'>
-                    <ScheduleDropdown>
-                        <List
-                            draggables={schedules}
-                            itemKey={schedule => schedule.id}
-                            onReordered={reordered => {
-                                const activeSchedule = getActiveSchedule();
-                                const activeIndex = reordered.findIndex(s => s.id === activeSchedule.id);
+                    <Divider orientation='horizontal' size='100%' />
+                    <div className='px-5 pb-2.5 pt-3.75'>
+                        <ScheduleDropdown>
+                            <List
+                                draggables={schedules}
+                                itemKey={schedule => schedule.id}
+                                onReordered={reordered => {
+                                    const activeSchedule = getActiveSchedule();
+                                    const activeIndex = reordered.findIndex(s => s.id === activeSchedule.id);
 
-                                // don't care about the promise
-                                UserScheduleStore.set('schedules', reordered);
-                                UserScheduleStore.set('activeIndex', activeIndex);
-                            }}
-                            gap={10}
-                        >
-                            {(schedule, handleProps) => (
-                                <ScheduleListItem
-                                    schedule={schedule}
-                                    onClick={() => {
-                                        switchSchedule(schedule.id);
-                                    }}
-                                    dragHandleProps={handleProps}
-                                />
-                            )}
-                        </List>
-                    </ScheduleDropdown>
-                </div>
-                {activeSchedule?.courses?.length === 0 && (
-                    <div className='max-w-64 flex flex-col items-center self-center gap-1.25 px-2 py-2'>
-                        <Text variant='small' className='text-center text-ut-gray !font-normal'>
-                            {funny}
-                        </Text>
-                        <Text variant='small' className='text-center text-black'>
-                            (No courses added)
-                        </Text>
+                                    // don't care about the promise
+                                    UserScheduleStore.set('schedules', reordered);
+                                    UserScheduleStore.set('activeIndex', activeIndex);
+                                }}
+                                gap={10}
+                            >
+                                {(schedule, handleProps) => (
+                                    <ScheduleListItem
+                                        schedule={schedule}
+                                        onClick={() => {
+                                            switchSchedule(schedule.id);
+                                        }}
+                                        dragHandleProps={handleProps}
+                                    />
+                                )}
+                            </List>
+                        </ScheduleDropdown>
                     </div>
-                )}
-                <div className='flex-1 self-stretch overflow-y-auto px-5'>
-                    {activeSchedule?.courses?.length > 0 && (
-                        <List
-                            draggables={activeSchedule.courses}
-                            onReordered={reordered => {
-                                activeSchedule.courses = reordered;
-                                replaceSchedule(getActiveSchedule(), activeSchedule);
-                            }}
-                            itemKey={e => e.uniqueId}
-                            gap={10}
-                        >
-                            {(course, handleProps) => (
-                                <PopupCourseBlock
-                                    key={course.uniqueId}
-                                    course={course}
-                                    colors={course.colors}
-                                    dragHandleProps={handleProps}
-                                />
-                            )}
-                        </List>
+                    {activeSchedule?.courses?.length === 0 && (
+                        <div className='max-w-64 flex flex-col items-center self-center gap-1.25 px-2 py-2'>
+                            <Text variant='small' className='text-center text-ut-gray !font-normal'>
+                                {funny}
+                            </Text>
+                            <Text variant='small' className='text-center text-black'>
+                                (No courses added)
+                            </Text>
+                        </div>
                     )}
-                </div>
-                <div className='w-full flex flex-col items-center gap-1.25 p-5 pt-3.75'>
-                    <div className='flex gap-2.5'>
-                        {enableCourseStatusChips && (
-                            <>
-                                <CourseStatus status='WAITLISTED' size='mini' />
-                                <CourseStatus status='CLOSED' size='mini' />
-                                <CourseStatus status='CANCELLED' size='mini' />
-                            </>
+                    <div className='flex-1 self-stretch overflow-y-auto px-5'>
+                        {activeSchedule?.courses?.length > 0 && (
+                            <List
+                                draggables={activeSchedule.courses}
+                                onReordered={reordered => {
+                                    activeSchedule.courses = reordered;
+                                    replaceSchedule(getActiveSchedule(), activeSchedule);
+                                }}
+                                itemKey={e => e.uniqueId}
+                                gap={10}
+                            >
+                                {(course, handleProps) => (
+                                    <PopupCourseBlock
+                                        key={course.uniqueId}
+                                        course={course}
+                                        colors={course.colors}
+                                        dragHandleProps={handleProps}
+                                    />
+                                )}
+                            </List>
                         )}
                     </div>
-                    {enableCourseRefreshing && (
-                        <div className='inline-flex items-center self-center gap-1'>
-                            <Text variant='mini' className='text-ut-gray !font-normal'>
-                                DATA LAST UPDATED: {getUpdatedAtDateTimeString(activeSchedule.updatedAt)}
-                            </Text>
-                            <button
-                                className='h-4 w-4 bg-transparent p-0 btn'
-                                onClick={() => {
-                                    setIsRefreshing(true);
-                                }}
-                            >
-                                <RefreshIcon
-                                    className={clsx('h-4 w-4 text-ut-black animate-duration-800', {
-                                        'animate-spin': isRefreshing,
-                                    })}
-                                />
-                            </button>
+                    <div className='w-full flex flex-col items-center gap-1.25 p-5 pt-3.75'>
+                        <div className='flex gap-2.5'>
+                            {enableCourseStatusChips && (
+                                <>
+                                    <CourseStatus status='WAITLISTED' size='mini' />
+                                    <CourseStatus status='CLOSED' size='mini' />
+                                    <CourseStatus status='CANCELLED' size='mini' />
+                                </>
+                            )}
                         </div>
-                    )}
+                        {enableCourseRefreshing && (
+                            <div className='inline-flex items-center self-center gap-1'>
+                                <Text variant='mini' className='text-ut-gray !font-normal'>
+                                    DATA LAST UPDATED: {getUpdatedAtDateTimeString(activeSchedule.updatedAt)}
+                                </Text>
+                                <button
+                                    className='h-4 w-4 bg-transparent p-0 btn'
+                                    onClick={() => {
+                                        setIsRefreshing(true);
+                                    }}
+                                >
+                                    <RefreshIcon
+                                        className={clsx('h-4 w-4 text-ut-black animate-duration-800', {
+                                            'animate-spin': isRefreshing,
+                                        })}
+                                    />
+                                </button>
+                            </div>
+                        )}
+                    </div>
                 </div>
-            </div>
+            </DialogProvider>
         </ExtensionRoot>
     );
 }
diff --git a/src/views/components/common/Dialog.tsx b/src/views/components/common/Dialog.tsx
index fcbc39c1..a1e08f62 100644
--- a/src/views/components/common/Dialog.tsx
+++ b/src/views/components/common/Dialog.tsx
@@ -44,7 +44,7 @@ export default function Dialog(props: PropsWithChildren<DialogProps>): JSX.Eleme
                 >
                     <div className={clsx('fixed inset-0 z-50 bg-slate-700/35')} />
                 </TransitionChild>
-                <div className='fixed inset-0 z-50 flex items-center justify-center'>
+                <div className='fixed inset-0 z-50 flex items-center justify-center p-2'>
                     <TransitionChild
                         as={Fragment}
                         enter='transition duration-375 motion-reduce:duration-0 ease-[cubic-bezier(0.05,0.4,0.2,1)]'
@@ -56,7 +56,7 @@ export default function Dialog(props: PropsWithChildren<DialogProps>): JSX.Eleme
                     >
                         <DialogPanel
                             className={clsx(
-                                'z-99 max-h-[90vh] flex flex-col overflow-y-auto border border-solid border-ut-offwhite rounded bg-white shadow-xl ml-[calc(100vw-100%)]',
+                                'z-99 max-h-[90vh] flex flex-col overflow-y-auto border border-solid border-ut-offwhite rounded bg-white shadow-xl ml-[calc(100vw-100%-1rem)]',
                                 className
                             )}
                         >
diff --git a/src/views/components/common/ExtensionRoot/ExtensionRoot.module.scss b/src/views/components/common/ExtensionRoot/ExtensionRoot.module.scss
index 762d7065..fbdc62c3 100644
--- a/src/views/components/common/ExtensionRoot/ExtensionRoot.module.scss
+++ b/src/views/components/common/ExtensionRoot/ExtensionRoot.module.scss
@@ -11,7 +11,7 @@
 }
 
 .extensionRoot {
-    @apply font-sans h-full;
+    @apply font-sans;
     color: #303030;
 
     [data-rfd-drag-handle-context-id=':r1:'] {
diff --git a/src/views/components/common/ExtensionRoot/ExtensionRoot.tsx b/src/views/components/common/ExtensionRoot/ExtensionRoot.tsx
index 9e478a9c..18bb5799 100644
--- a/src/views/components/common/ExtensionRoot/ExtensionRoot.tsx
+++ b/src/views/components/common/ExtensionRoot/ExtensionRoot.tsx
@@ -2,24 +2,27 @@
 import 'uno.css';
 
 import clsx from 'clsx';
-import React from 'react';
+import React, { forwardRef } from 'react';
 
 import styles from './ExtensionRoot.module.scss';
 
-interface Props {
-    testId?: string;
-    className?: string;
-}
+export const styleResetClass = styles.extensionRoot;
 
 /**
  * A wrapper component for the extension elements that adds some basic styling to them
  */
-export default function ExtensionRoot(props: React.PropsWithChildren<Props>): JSX.Element {
+export default function ExtensionRoot(props: React.HTMLProps<HTMLDivElement>): JSX.Element {
+    const { className, ...others } = props;
+
     return (
         <React.StrictMode>
-            <div className={clsx(styles.extensionRoot, props.className)} data-testid={props.testId}>
-                {props.children}
-            </div>
+            <div className={clsx(styleResetClass, 'h-full', className)} {...others} />
         </React.StrictMode>
     );
 }
+
+export const ExtensionRootWrapper = forwardRef<HTMLDivElement, React.HTMLProps<HTMLDivElement>>((props, ref) => (
+    <div className={styleResetClass}>
+        <div {...props} ref={ref} />
+    </div>
+));
diff --git a/src/views/components/common/ScheduleListItem.tsx b/src/views/components/common/ScheduleListItem.tsx
index 02d84c94..e454f545 100644
--- a/src/views/components/common/ScheduleListItem.tsx
+++ b/src/views/components/common/ScheduleListItem.tsx
@@ -1,4 +1,6 @@
+import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/react';
 import deleteSchedule from '@pages/background/lib/deleteSchedule';
+import duplicateSchedule from '@pages/background/lib/duplicateSchedule';
 import renameSchedule from '@pages/background/lib/renameSchedule';
 import type { UserSchedule } from '@shared/types/UserSchedule';
 import Text from '@views/components/common/Text/Text';
@@ -6,11 +8,12 @@ import useSchedules from '@views/hooks/useSchedules';
 import clsx from 'clsx';
 import React, { useEffect, useMemo, useState } from 'react';
 
-import XIcon from '~icons/material-symbols/close';
 import DragIndicatorIcon from '~icons/material-symbols/drag-indicator';
+import MoreActionsIcon from '~icons/material-symbols/more-vert';
 
 import { Button } from './Button';
-import { usePrompt } from './DialogProvider/DialogProvider';
+import DialogProvider, { usePrompt } from './DialogProvider/DialogProvider';
+import { ExtensionRootWrapper, styleResetClass } from './ExtensionRoot/ExtensionRoot';
 
 /**
  * Props for the ScheduleListItem component.
@@ -29,14 +32,12 @@ export default function ScheduleListItem({ schedule, dragHandleProps, onClick }:
     const [activeSchedule] = useSchedules();
     const [isEditing, setIsEditing] = useState(false);
     const [editorValue, setEditorValue] = useState(schedule.name);
-    const [error, setError] = useState<string | undefined>(undefined);
 
     const showDialog = usePrompt();
 
     const editorRef = React.useRef<HTMLInputElement>(null);
     useEffect(() => {
         const editor = editorRef.current;
-
         setEditorValue(schedule.name);
 
         if (isEditing && editor) {
@@ -47,35 +48,63 @@ export default function ScheduleListItem({ schedule, dragHandleProps, onClick }:
 
     const isActive = useMemo(() => activeSchedule.id === schedule.id, [activeSchedule, schedule]);
 
-    const handleBlur = () => {
-        if (editorValue.trim() !== '') {
-            schedule.name = editorValue.trim();
-            renameSchedule(schedule.id, schedule.name);
+    const handleBlur = async () => {
+        if (editorValue.trim() !== '' && editorValue.trim() !== schedule.name) {
+            schedule.name = (await renameSchedule(schedule.id, editorValue.trim())) as string;
         }
-
         setIsEditing(false);
     };
 
-    const onDelete = () => {
-        deleteSchedule(schedule.id).catch(e => setError(e.message));
-    };
-
-    useEffect(() => {
-        if (error) {
-            console.error(error);
+    const handleDelete = () => {
+        if (schedule.id === activeSchedule.id) {
             showDialog({
-                title: <span className='text-ut-red'>Something went wrong.</span>,
-                description: error,
+                title: `Unable to delete active schedule.`,
+
+                description: (
+                    <>
+                        <Text>Deleting the active schedule</Text>
+                        <Text className='text-ut-burntorange'> {schedule.name} </Text>
+                        <Text>is not allowed. Please switch to another schedule and try again.</Text>
+                    </>
+                ),
                 // eslint-disable-next-line react/no-unstable-nested-components
                 buttons: close => (
-                    <Button variant='filled' color='ut-black' onClick={close}>
-                        I understand
+                    <Button variant='filled' color='ut-burntorange' onClick={close}>
+                        I Understand
                     </Button>
                 ),
-                onClose: () => setError(undefined),
+            });
+        } else {
+            showDialog({
+                title: `Are you sure?`,
+                description: (
+                    <>
+                        <Text>Deleting</Text>
+                        <Text className='text-ut-burntorange'> {schedule.name} </Text>
+                        <Text>is permanent and will remove all added courses from that schedule.</Text>
+                    </>
+                ),
+                // eslint-disable-next-line react/no-unstable-nested-components
+                buttons: close => (
+                    <>
+                        <Button variant='single' color='ut-black' onClick={close}>
+                            Cancel
+                        </Button>
+                        <Button
+                            variant='filled'
+                            color='ut-red'
+                            onClick={() => {
+                                close();
+                                deleteSchedule(schedule.id);
+                            }}
+                        >
+                            Delete Permanently
+                        </Button>
+                    </>
+                ),
             });
         }
-    });
+    };
 
     return (
         <div className='rounded bg-white'>
@@ -85,12 +114,12 @@ export default function ScheduleListItem({ schedule, dragHandleProps, onClick }:
                 </div>
                 <div className='group relative flex flex-1 items-center overflow-x-hidden'>
                     <div
-                        className='flex flex-grow items-center gap-1.5 overflow-x-hidden'
+                        className='group/circle flex flex-grow items-center gap-1.5 overflow-x-hidden'
                         onClick={(...e) => !isEditing && onClick?.(...e)}
                     >
                         <div
                             className={clsx(
-                                'h-5.5 w-5.5 relative flex-shrink-0 border-2px border-current rounded-full btn-transition group-active:scale-95 after:(absolute content-empty bg-current h-2.9 w-2.9 rounded-full transition transform-gpu scale-100 ease-out-expo duration-250 -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2)',
+                                'h-5.5 w-5.5 relative flex-shrink-0 border-2px border-current rounded-full btn-transition group-active/circle:scale-95 after:(absolute content-empty bg-current h-2.9 w-2.9 rounded-full transition transform-gpu scale-100 ease-out-expo duration-250 -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2)',
                                 {
                                     'after:(scale-0! opacity-0 ease-in-out! duration-200!)': !isActive,
                                 }
@@ -119,9 +148,57 @@ export default function ScheduleListItem({ schedule, dragHandleProps, onClick }:
                             </Text>
                         )}
                     </div>
-                    <div className='self-end'>
-                        <XIcon className='invisible h-5 w-5 text-ut-red group-hover:visible' onClick={onDelete} />
-                    </div>
+                    <DialogProvider>
+                        <Menu>
+                            <MenuButton className='invisible h-fit bg-transparent p-0 text-ut-gray btn-transition data-[open]:visible group-hover:visible'>
+                                <MoreActionsIcon className='h-6 w-6' />
+                            </MenuButton>
+
+                            <MenuItems
+                                as={ExtensionRootWrapper}
+                                className={clsx([
+                                    styleResetClass,
+                                    'w-30 cursor-pointer origin-top-right rounded bg-white p-1 text-black shadow-lg transition border border-ut-offwhite focus:outline-none',
+                                    'data-[closed]:(opacity-0 scale-95)',
+                                    'data-[enter]:(ease-out-expo duration-150)',
+                                    'data-[leave]:(ease-out duration-50)',
+                                ])}
+                                transition
+                                anchor='bottom end'
+                            >
+                                <MenuItem>
+                                    <Text
+                                        as='button'
+                                        variant='small'
+                                        onClick={() => setIsEditing(true)}
+                                        className='w-full rounded bg-transparent p-2 text-left data-[focus]:bg-gray-200/40'
+                                    >
+                                        Rename
+                                    </Text>
+                                </MenuItem>
+                                <MenuItem>
+                                    <Text
+                                        as='button'
+                                        variant='small'
+                                        onClick={() => duplicateSchedule(schedule.id)}
+                                        className='w-full rounded bg-transparent p-2 text-left data-[focus]:bg-gray-200/40'
+                                    >
+                                        Duplicate
+                                    </Text>
+                                </MenuItem>
+                                <MenuItem>
+                                    <Text
+                                        as='button'
+                                        variant='small'
+                                        onClick={handleDelete}
+                                        className='w-full rounded bg-transparent p-2 text-left text-ut-red data-[focus]:bg-red-200/40'
+                                    >
+                                        Delete
+                                    </Text>
+                                </MenuItem>
+                            </MenuItems>
+                        </Menu>
+                    </DialogProvider>
                 </div>
             </li>
         </div>