diff --git a/src/app/calendar/page.tsx b/src/app/calendar/page.tsx
index c0c2c21..fae38fd 100644
--- a/src/app/calendar/page.tsx
+++ b/src/app/calendar/page.tsx
@@ -9,20 +9,13 @@ import { createDragAndDropPlugin } from '@schedule-x/drag-and-drop';
 import '@/calendar-theme.css';
 import { MouseEventHandler, useEffect, useState } from 'react';
 import App from '@/components/app';
-import {
-    ContextMenu,
-    ContextMenuContent,
-    ContextMenuItem,
-    ContextMenuTrigger,
-} from '@/components/ui/context-menu';
-
-import { PlusCircle, Trash } from 'lucide-react';
 
 import { format, parse } from 'date-fns';
 import PostDialog, { today } from './postDialog';
 import axios from 'axios';
 import Cookies from 'js-cookie';
 import { Schedule, ScheduleRemoveRequest, ScheduleRequest } from '@/utils';
+import Calendar, { CalendarSchedule } from './calendar';
 
 function closestChild(children: any, clientX: number, clientY: number) {
     let closestElement = null;
@@ -43,7 +36,7 @@ function closestChild(children: any, clientX: number, clientY: number) {
     return closestElement;
 }
 
-function CalendarApp() {
+export default function CalendarApp() {
     const eventsService = useState(() => createEventsServicePlugin())[0];
     const dragAndDrop = useState(() => createDragAndDropPlugin())[0];
     const [eventCount, setEventCount] = useState(0);
@@ -56,96 +49,17 @@ function CalendarApp() {
         isDark: true,
     });
 
+    const [events, setEvents] = useState<CalendarSchedule[]>([]);
+
     useEffect(() => {
         axios.get(`/api/posts/?id=${sessionId}`).then((response) => {
-            for (const [id, sched] of (
-                response.data.schedules as ScheduleRequest[]
-            ).entries()) {
-                const date = parse(
-                    sched.scheduled,
-                    'y-MM-dd hh:mm',
-                    new Date()
-                );
-                const end = new Date(date);
-                end.setHours(date.getHours() + 1);
-
-                calendar.events.add({
-                    title: 'Post',
-                    id,
-                    start: format(date, 'y-MM-dd hh:mm'),
-                    end: format(end, 'y-MM-dd hh:mm'),
-                });
-                setEventCount(eventCount + 1);
-            }
+            setEvents(response.data.schedules as CalendarSchedule[]);
+            setEventCount(response.data.schedules.length);
         });
     }, []);
 
-    const [newPostDialogOpen, setNewPostDialogOpen] = useState(false);
+    const [postDialog, setDialog] = useState(false);
     const [date, setDate] = useState<Date>(today);
-    const [selected, setSelected] = useState<string | null | undefined>(null);
-    const [scrollY, setScrollY] = useState(0);
-
-    useEffect(() => {
-        const interval = setInterval(() => {
-            window.scrollTo(0, scrollY);
-        }, 10);
-
-        setTimeout(() => {
-            clearInterval(interval);
-        }, 300);
-    }, [scrollY]);
-
-    const handleDialog: MouseEventHandler<HTMLSpanElement> = (event) => {
-        setScrollY(window.scrollY);
-
-        const target = event.target as HTMLElement;
-
-        if (target.className === 'sx__time-grid-event-time') {
-            const id =
-                target.parentElement?.parentElement?.getAttribute(
-                    'data-event-id'
-                );
-            setSelected(id);
-
-            setDate(
-                parse(
-                    calendar.events.get(parseInt(id || ''))?.start || '',
-                    'y-MM-dd hh:mm',
-                    new Date()
-                )
-            );
-        } else {
-            setSelected(null);
-
-            try {
-                const dayElement = target.closest('.sx__time-grid-day');
-
-                const dayText = dayElement
-                    ? dayElement.getAttribute('aria-label')
-                    : null;
-
-                const hourElement = closestChild(
-                    target.parentElement?.children[0].children || [],
-                    event.clientX,
-                    event.clientY
-                );
-
-                if (!dayText || !hourElement) {
-                    event.preventDefault();
-                } else {
-                    const toDate = parse(
-                        (dayText || '') +
-                            ' ' +
-                            (hourElement?.textContent || ''),
-                        'MMMM dd, yyyy h a',
-                        new Date()
-                    );
-                    if (toDate instanceof Date && !isNaN(toDate.getTime()))
-                        setDate(toDate);
-                }
-            } catch {}
-        }
-    };
 
     return (
         <App>
@@ -153,8 +67,8 @@ function CalendarApp() {
                 <PostDialog
                     date={date}
                     setDate={setDate}
-                    newPostDialogOpen={newPostDialogOpen}
-                    setNewPostDialogOpen={setNewPostDialogOpen}
+                    newPostDialogOpen={postDialog}
+                    setNewPostDialogOpen={setDialog}
                     setEvents={(e) => {
                         calendar.events.add(e);
                         setEventCount(eventCount + 1);
@@ -162,58 +76,13 @@ function CalendarApp() {
                     eventId={eventCount}
                     sessionId={sessionId}
                 />
-                <ContextMenu>
-                    <ContextMenuTrigger onContextMenu={handleDialog}>
-                        <ScheduleXCalendar
-                            calendarApp={calendar}
-                            customComponents={{}}
-                        />
-                    </ContextMenuTrigger>
-                    <ContextMenuContent>
-                        <ContextMenuItem
-                            onClick={() => {
-                                setNewPostDialogOpen(true);
-                            }}
-                        >
-                            <PlusCircle className="w-4 mt-0.5" />{' '}
-                            <p className="ml-1">New post</p>
-                        </ContextMenuItem>
 
-                        {selected ? (
-                            <ContextMenuItem
-                                onClick={() => {
-                                    if (selected) {
-                                        calendar.events.remove(
-                                            parseInt(selected)
-                                        );
-
-                                        axios.delete(
-                                            `/api/posts`,
-                                            {
-                                                params: {
-                                                    id: sessionId,
-                                                    date: format(
-                                                        date,
-                                                        'y-MM-dd hh:mm'
-                                                    ),
-                                                } satisfies ScheduleRemoveRequest,
-                                            }
-                                        );
-                                    }
-                                }}
-                                className=""
-                            >
-                                <Trash className="w-4 mt-0.5 text-red-500" />{' '}
-                                <p className="ml-1 text-red-500">Delete</p>
-                            </ContextMenuItem>
-                        ) : (
-                            ''
-                        )}
-                    </ContextMenuContent>
-                </ContextMenu>
+                <Calendar
+                    setDialog={setDialog}
+                    sessionId={sessionId}
+                    events={events}
+                />
             </div>
         </App>
     );
 }
-
-export default CalendarApp;
diff --git a/src/app/signup/page.tsx b/src/app/signup/page.tsx
index b9ab438..33701b2 100644
--- a/src/app/signup/page.tsx
+++ b/src/app/signup/page.tsx
@@ -15,7 +15,6 @@ export default function SignUp() {
     const router = useRouter();
 
     return (
-        // <div className="bg-white dark:bg-black w-[46%] h-screen ml-auto">
         <div className="bg-white dark:bg-black w-full h-screen flex justify-center items-center">
             <div className="text-center">
                 <h1 className="text-xl pb-2">Create an account</h1>
@@ -73,8 +72,8 @@ export default function SignUp() {
                         By clicking continue, you agree to our{' '}
                         <Link href="/terms" className="underline">
                             Terms of Service
-                        </Link>{' '}
-                        {'and '}
+                        </Link>
+                        {' and '}
                         <Link href="/privacy" className="underline">
                             Privacy Policy
                         </Link>
@@ -83,6 +82,5 @@ export default function SignUp() {
                 </div>
             </div>
         </div>
-        // </div>
     );
 }