diff --git a/public/swagger/swagger.json b/public/swagger/swagger.json
index 2eb47e7..7f553b3 100644
--- a/public/swagger/swagger.json
+++ b/public/swagger/swagger.json
@@ -2427,6 +2427,7 @@
           },
           "attendees": {
             "type": "array",
+            "nullable": true,
             "items": {
               "type": "integer",
               "format": "uint32",
diff --git a/shared b/shared
index ea26ce8..5c0ec52 160000
--- a/shared
+++ b/shared
@@ -1 +1 @@
-Subproject commit ea26ce89b3aa0577932f30309ebb4def7c69cb2e
+Subproject commit 5c0ec528ba82be4638ea6dfbf00b3251f961ee71
diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx
index 1522188..16187fe 100644
--- a/src/app/dashboard/page.tsx
+++ b/src/app/dashboard/page.tsx
@@ -122,10 +122,10 @@ export default function Dashboard() {
   }
 
   return (
-    <div className='flex flex-col justify-start items-center mt-10 h-[90vh] w-screen overflow-x-hidden'>
+    <div className='flex flex-col justify-start items-center pt-10 h-[90vh] w-screen'>
       <User />
-      <div className='flex flex-row justify-start ml-[10vw] w-screen gap-6 mt-10'>
-        <div className='w-[60vw]'>
+      <div className='flex flex-row justify-center w-screen gap-10 mt-5'>
+        <div className='w-[45vw]'>
           <div className='mb-8'>
             <EventsForToday events={calendar} />
           </div>
@@ -222,7 +222,7 @@ export default function Dashboard() {
             )}
           </div>
         </div>
-        <div className='w-[30vw]'>
+        <div className='w-[45vw]'>
           <RescheduleRequests />
         </div>
       </div>
diff --git a/src/components/calendar-overview.tsx b/src/components/calendar-overview.tsx
index 14b928e..07f5375 100644
--- a/src/components/calendar-overview.tsx
+++ b/src/components/calendar-overview.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { useCallback, useEffect, useRef, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import {
   format,
   startOfWeek,
@@ -70,10 +70,6 @@ export function CalendarOverview() {
 
   const viewportRef = useRef<HTMLDivElement>(null)
 
-  const closeCreateEventDialogOpen = useCallback(() => {
-    setIsCreateEventOpen(false)
-  }, [setIsCreateEventOpen])
-
   useEffect(() => {
     if (viewportRef.current) {
       const el = viewportRef.current
@@ -155,6 +151,22 @@ export function CalendarOverview() {
     return (doc.body.textContent || '').trim()
   }
 
+  const handleReschedule = async (selectedEventID: string) => {
+    if (!selectedEventID) return
+    try {
+      await slotifyClient.PostAPIRescheduleRequestSingle({
+        msftMeetingID: selectedEventID,
+      })
+      toast({
+        title: 'Reschedule sent',
+        description: 'Sent reschedule request to the organizer',
+      })
+    } catch (error) {
+      console.error(error)
+      errorToast(error)
+    }
+  }
+
   return (
     <div>
       <Card>
@@ -391,7 +403,12 @@ export function CalendarOverview() {
       <CreateEvent
         open={isCreateEventOpen}
         onOpenChangeAction={setIsCreateEventOpen}
-        closeCreateEventDialogOpenAction={closeCreateEventDialogOpen}
+        closeCreateEventDialogOpen={() => setIsCreateEventOpen(false)}
+        initialTitle={''}
+        initialDuration={'1hr'}
+        initialParticipants={[]}
+        initialSelectedRange={null}
+        inputsDisabled={false}
       />
 
       <Dialog
@@ -492,10 +509,8 @@ export function CalendarOverview() {
                 <Button
                   variant='destructive'
                   onClick={() => {
-                    toast({
-                      title: 'Reschedule sent',
-                      description: 'Sent reschedule request to the organizer',
-                    })
+                    console.log('Reschedule event: ', selectedEvent.id)
+                    handleReschedule(selectedEvent.id!.toString())
                     setIsDayEventsDialogOpen(false)
                   }}
                 >
diff --git a/src/components/calendar/create-event.tsx b/src/components/calendar/create-event.tsx
index 5c791eb..10f1eee 100644
--- a/src/components/calendar/create-event.tsx
+++ b/src/components/calendar/create-event.tsx
@@ -27,7 +27,12 @@ import { UserSearch } from '@/components/user-search-bar'
 interface CreateEventProps {
   open: boolean
   onOpenChangeAction: (open: boolean) => void
-  closeCreateEventDialogOpenAction: () => void
+  closeCreateEventDialogOpen: () => void
+  initialTitle?: string
+  initialDuration?: string
+  initialParticipants?: User[]
+  initialSelectedRange?: { start: Date; end: Date } | null
+  inputsDisabled?: boolean
 }
 
 // Mapping from dropdown option to minutes
@@ -40,22 +45,25 @@ const durationMapping: { [key: string]: number } = {
 export function CreateEvent({
   open,
   onOpenChangeAction,
-  closeCreateEventDialogOpenAction,
+  closeCreateEventDialogOpen,
+  initialTitle = '',
+  initialDuration = '1hr',
+  initialParticipants = [],
+  initialSelectedRange = null,
+  inputsDisabled = false,
 }: CreateEventProps) {
   const [myEvents, setMyEvents] = useState<CalendarEvent[]>([])
-  const [title, setTitle] = useState('')
+  const [title, setTitle] = useState(initialTitle)
   const [location, setLocation] = useState('')
-  const [duration, setDuration] = useState('1hr')
+  const [duration, setDuration] = useState(initialDuration)
 
   // const [userSearchQuery, setUserSearchQuery] = useState('')
   // const [searchResults, setSearchResults] = useState<User[]>([])
-  const [selectedParticipants, setSelectedParticipants] = useState<User[]>([])
+  const [selectedParticipants, setSelectedParticipants] =
+    useState<User[]>(initialParticipants)
 
   const [selectedDate, setSelectedDate] = useState<Date | null>(null)
-  const [selectedRange, setSelectedRange] = useState<{
-    start: Date
-    end: Date
-  } | null>(null)
+  const [selectedRange, setSelectedRange] = useState(initialSelectedRange)
   const [availabilityData, setAvailabilityData] =
     useState<SchedulingSlotsSuccessResponse | null>(null)
 
@@ -68,7 +76,6 @@ export function CreateEvent({
     const fetchCurrentUser = async () => {
       try {
         const user = await slotifyClient.GetAPIUsersMe()
-        console.log('Current user:', user)
         setCurrentUser(user)
       } catch (error) {
         console.error('Error fetching current user:', error)
@@ -77,6 +84,21 @@ export function CreateEvent({
     fetchCurrentUser()
   }, [])
 
+  useEffect(() => {
+    if (open) {
+      setTitle(initialTitle)
+      setDuration(initialDuration)
+      setSelectedParticipants(initialParticipants)
+      setSelectedRange(initialSelectedRange)
+    }
+  }, [
+    open,
+    initialTitle,
+    initialDuration,
+    initialParticipants,
+    initialSelectedRange,
+  ])
+
   // Ref to store the last fetched range (optional)
   const lastFetchedRangeRef = useRef<{ start: number; end: number } | null>(
     null,
@@ -94,15 +116,44 @@ export function CreateEvent({
           selectedRange.start.getTime() !== range.start.getTime() ||
           selectedRange.end.getTime() !== range.end.getTime())
       ) {
-        console.log('Range selected (updating):', range)
         setSelectedRange(range)
-      } else {
-        console.log('Range selected is identical or null; no update.')
       }
     },
     [selectedRange],
   )
 
+  // useEffect(() => {
+  //   const searchUsers = async () => {
+  //     if (!userSearchQuery) {
+  //       setSearchResults([])
+  //       return
+  //     }
+  //     try {
+  //       let response
+  //       if (userSearchQuery.includes('@')) {
+  //         // Search by email
+  //         response = await slotifyClient.GetAPIUsers({
+  //           queries: { email: userSearchQuery },
+  //         })
+  //       } else {
+  //         // Search by name
+  //         response = await slotifyClient.GetAPIUsers({
+  //           queries: { name: userSearchQuery },
+  //         })
+  //       }
+  //       setSearchResults(response)
+  //     } catch (error) {
+  //       console.error('Error searching users:', error)
+  //       toast({
+  //         title: 'Error',
+  //         description: 'Failed to search users.',
+  //         variant: 'destructive',
+  //       })
+  //     }
+  //   }
+  //   searchUsers()
+  // }, [userSearchQuery])
+
   // Add a user from search results to selected participants
   const handleAddParticipant = (user: User) => {
     if (
@@ -135,11 +186,8 @@ export function CreateEvent({
         end: memoizedRange?.end?.toISOString() || new Date().toISOString(),
       },
     })
-    console.log("User's own events:", myEventsResponse)
     setMyEvents(myEventsResponse)
 
-    console.log('Check Availability button clicked.')
-
     // Validate required fields
     if (selectedParticipants.length === 0 || !memoizedRange) {
       toast({
@@ -156,16 +204,11 @@ export function CreateEvent({
       memoizedRange &&
       lastFetchedRangeRef.current.start === memoizedRange.start.getTime() &&
       lastFetchedRangeRef.current.end === memoizedRange.end.getTime()
-    ) {
-      console.log(
-        'Range unchanged from last fetch; re-fetching due to manual trigger.',
-      )
-    }
-
-    lastFetchedRangeRef.current = {
-      start: memoizedRange.start.getTime(),
-      end: memoizedRange.end.getTime(),
-    }
+    )
+      lastFetchedRangeRef.current = {
+        start: memoizedRange.start.getTime(),
+        end: memoizedRange.end.getTime(),
+      }
 
     setIsLoading(true)
     try {
@@ -183,20 +226,8 @@ export function CreateEvent({
         })
       }
 
-      console.log('Attendees:', attendees)
-
       const durationInMinutes = durationMapping[duration] || 60
       const meetingDuration = `PT${durationInMinutes}M`
-      console.log('Meeting duration:', meetingDuration)
-
-      console.log('Sending scheduling API call with details:', {
-        meetingName: title || 'New Meeting',
-        meetingDuration,
-        timeSlot: {
-          start: memoizedRange.start.toISOString(),
-          end: memoizedRange.end.toISOString(),
-        },
-      })
 
       // Fetch scheduling suggestions
       const response = await slotifyClient.PostAPISchedulingSlots({
@@ -218,7 +249,6 @@ export function CreateEvent({
         },
       })
 
-      console.log('Scheduling API response received:', response)
       setAvailabilityData(response)
 
       // Now fetch each selected participant's calendar events for conflicts
@@ -233,7 +263,7 @@ export function CreateEvent({
       )
       const conflictResults = await Promise.all(conflictPromises)
       const allConflictEvents = conflictResults.flat()
-      console.log('Conflict events fetched:', allConflictEvents)
+
       setConflictEvents(allConflictEvents)
     } catch (error) {
       console.error('Error fetching availability:', error)
@@ -244,12 +274,10 @@ export function CreateEvent({
       })
     } finally {
       setIsLoading(false)
-      console.log('Finished API call for availability.')
     }
   }
 
   const handleCreateManually = () => {
-    console.log('Manual event creation triggered')
     onOpenChangeAction(false)
   }
 
@@ -275,9 +303,9 @@ export function CreateEvent({
                     placeholder='My New Meeting'
                     value={title}
                     onChange={e => {
-                      console.log('Title changed:', e.target.value)
                       setTitle(e.target.value)
                     }}
+                    disabled={inputsDisabled}
                   />
                 </div>
 
@@ -288,9 +316,9 @@ export function CreateEvent({
                     placeholder='None'
                     value={location}
                     onChange={e => {
-                      console.log('Location changed:', e.target.value)
                       setLocation(e.target.value)
                     }}
+                    disabled={inputsDisabled}
                   />
                 </div>
 
@@ -300,10 +328,10 @@ export function CreateEvent({
                     id='duration'
                     value={duration}
                     onChange={e => {
-                      console.log('Duration changed:', e.target.value)
                       setDuration(e.target.value)
                     }}
                     className='block w-full rounded-md border border-gray-300 p-2'
+                    disabled={inputsDisabled}
                   >
                     <option value='30 minutes'>30 minutes</option>
                     <option value='1hr'>1hr</option>
@@ -321,11 +349,14 @@ export function CreateEvent({
                   <Label>Event Range</Label>
                   <EventRangePicker
                     selectedDate={selectedDate}
+                    selectedRange={selectedRange}
                     onDateSelect={date => {
-                      console.log('Date selected:', date)
-                      setSelectedDate(date)
+                      if (!inputsDisabled) setSelectedDate(date)
+                    }}
+                    onRangeSelect={range => {
+                      if (!inputsDisabled) handleRangeSelect(range)
                     }}
-                    onRangeSelect={handleRangeSelect}
+                    disabled={inputsDisabled}
                   />
                 </div>
 
@@ -368,7 +399,7 @@ export function CreateEvent({
               participants={selectedParticipants}
               location={''} //TODO fix this
               eventTitle={title}
-              closeCreateEventDialogOpen={closeCreateEventDialogOpenAction}
+              closeCreateEventDialogOpen={closeCreateEventDialogOpen}
             />
           </div>
         </div>
diff --git a/src/components/calendar/event-range-picker.tsx b/src/components/calendar/event-range-picker.tsx
index 0d16eb1..2f966aa 100644
--- a/src/components/calendar/event-range-picker.tsx
+++ b/src/components/calendar/event-range-picker.tsx
@@ -9,26 +9,41 @@ interface EventRangePickerProps {
   selectedDate: Date | null
   onDateSelect: (date: Date) => void
   onRangeSelect: (range: { start: Date; end: Date } | null) => void
+  selectedRange?: { start: Date; end: Date } | null
+  disabled?: boolean // new optional prop to disable input changes
 }
 
 export function EventRangePicker({
   selectedDate,
   onDateSelect,
   onRangeSelect,
+  selectedRange,
+  disabled = false,
 }: EventRangePickerProps) {
   const [currentMonth, setCurrentMonth] = useState<Date>(new Date())
   const [dragStart, setDragStart] = useState<Date | null>(null)
   const [dragEnd, setDragEnd] = useState<Date | null>(null)
   const [isSelecting, setIsSelecting] = useState(false)
 
-  // Update range when drag is complete
+  // Sync external selectedRange prop with internal state.
+  useEffect(() => {
+    if (selectedRange) {
+      setDragStart(selectedRange.start)
+      setDragEnd(selectedRange.end)
+    } else {
+      setDragStart(null)
+      setDragEnd(null)
+    }
+  }, [selectedRange])
+
+  // When drag is complete, update the range.
   useEffect(() => {
     if (dragStart && dragEnd && !isSelecting) {
-      // Ensure start date is before end date
+      // Ensure start is before end.
       const start = dragStart < dragEnd ? dragStart : dragEnd
       const end = dragStart < dragEnd ? dragEnd : dragStart
 
-      // Set the end of day for the end date
+      // Set the end of day for the end date.
       const endDate = new Date(end)
       endDate.setHours(23, 59, 59, 999)
 
@@ -36,7 +51,20 @@ export function EventRangePicker({
     }
   }, [dragStart, dragEnd, isSelecting, onRangeSelect])
 
-  // Get days in month
+  // Helper to normalize a date (zero out time).
+  const normalize = (d: Date) =>
+    new Date(d.getFullYear(), d.getMonth(), d.getDate())
+
+  // Check if a date is in the selected range (comparing only year, month, day).
+  const isInRange = (date: Date) => {
+    if (!dragStart || !dragEnd) return false
+    const normalizedDate = normalize(date)
+    const normalizedStart = normalize(dragStart)
+    const normalizedEnd = normalize(dragEnd)
+    return normalizedDate >= normalizedStart && normalizedDate <= normalizedEnd
+  }
+
+  // Get days in month.
   const getDaysInMonth = (date: Date) => {
     const year = date.getFullYear()
     const month = date.getMonth()
@@ -45,7 +73,7 @@ export function EventRangePicker({
     const days = []
     const firstDayOfMonth = new Date(year, month, 1).getDay()
 
-    // Add days from previous month to fill the first week
+    // Add days from previous month to fill the first week.
     const prevMonthDays = new Date(year, month, 0).getDate()
     for (let i = firstDayOfMonth - 1; i >= 0; i--) {
       const day = prevMonthDays - i
@@ -53,13 +81,13 @@ export function EventRangePicker({
       days.push({ date, isCurrentMonth: false })
     }
 
-    // Add days of current month
+    // Add days of current month.
     for (let i = 1; i <= daysInMonth; i++) {
       const date = new Date(year, month, i)
       days.push({ date, isCurrentMonth: true })
     }
 
-    // Add days from next month to complete the last week
+    // Add days from next month to complete the last week.
     const lastDayOfMonth = new Date(year, month, daysInMonth).getDay()
     for (let i = 1; i < 7 - lastDayOfMonth; i++) {
       const date = new Date(year, month + 1, i)
@@ -86,6 +114,7 @@ export function EventRangePicker({
   }
 
   const handleMouseDown = (date: Date) => {
+    if (disabled) return
     setIsSelecting(true)
     setDragStart(date)
     setDragEnd(date)
@@ -93,32 +122,22 @@ export function EventRangePicker({
   }
 
   const handleMouseEnter = (date: Date) => {
+    if (disabled) return
     if (isSelecting) {
       setDragEnd(date)
     }
   }
 
   const handleMouseUp = () => {
+    if (disabled) return
     setIsSelecting(false)
   }
 
-  // Check if a date is in the selected range
-  const isInRange = (date: Date) => {
-    if (!dragStart || !dragEnd) return false
-
-    const start = dragStart < dragEnd ? dragStart : dragEnd
-    const end = dragStart < dragEnd ? dragEnd : dragStart
-
-    return date >= start && date <= end
-  }
-
-  // Format date for display
-  const formatDate = (date: Date) => {
-    return date.getDate()
-  }
+  // Format date for display.
+  const formatDate = (date: Date) => date.getDate()
 
   useEffect(() => {
-    // Add global mouse up handler to stop selection even if mouse is released outside calendar
+    // Global mouseup handler to stop selection if mouse is released outside.
     document.addEventListener('mouseup', handleMouseUp)
     return () => {
       document.removeEventListener('mouseup', handleMouseUp)
@@ -133,6 +152,7 @@ export function EventRangePicker({
           size='icon'
           onClick={prevMonth}
           className='h-7 w-7'
+          disabled={disabled}
         >
           <ChevronLeft className='h-4 w-4' />
         </Button>
@@ -144,24 +164,25 @@ export function EventRangePicker({
           size='icon'
           onClick={nextMonth}
           className='h-7 w-7'
+          disabled={disabled}
         >
           <ChevronRight className='h-4 w-4' />
         </Button>
       </div>
 
       <div className='grid grid-cols-7 gap-1 text-center text-xs mb-1'>
+        <div>Su</div>
         <div>Mo</div>
         <div>Tu</div>
         <div>We</div>
         <div>Th</div>
         <div>Fr</div>
         <div>Sa</div>
-        <div>Su</div>
       </div>
 
       <div
         className='grid grid-cols-7 gap-1'
-        onMouseLeave={() => isSelecting && setIsSelecting(false)}
+        onMouseLeave={() => !disabled && isSelecting && setIsSelecting(false)}
       >
         {days.map(({ date, isCurrentMonth }, index) => (
           <div
diff --git a/src/components/calendar/weekly-calendar.tsx b/src/components/calendar/weekly-calendar.tsx
index e3f7015..503c049 100644
--- a/src/components/calendar/weekly-calendar.tsx
+++ b/src/components/calendar/weekly-calendar.tsx
@@ -407,7 +407,7 @@ export function WeeklyCalendar({
                             <div>
                               Rating:{' '}
                               {suggestion.confidence
-                                ? `${suggestion.confidence}%`
+                                ? `${parseInt(suggestion.confidence.toString(), 10)}%`
                                 : ''}
                             </div>
                           </div>
diff --git a/src/components/events-today.tsx b/src/components/events-today.tsx
index 1170519..f74d598 100644
--- a/src/components/events-today.tsx
+++ b/src/components/events-today.tsx
@@ -1,30 +1,28 @@
+'use client'
+
 import { CalendarDays } from 'lucide-react'
 import { CalendarEvent } from '@/types/types'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Badge } from '@/components/ui/badge'
+import { ScrollArea } from '@/components/ui/scroll-area'
 
 interface EventsForTodayProps {
   events: CalendarEvent[]
 }
 
 export function EventsForToday({ events }: EventsForTodayProps) {
-  const today = new Date()
-  const formattedDate = today.toLocaleDateString('en-US', {
-    weekday: 'long',
-    year: 'numeric',
-    month: 'long',
-    day: 'numeric',
-  })
-
   return (
-    <div className='w-full max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl'>
-      <div className='md:flex'>
-        <div className='p-8'>
-          <div className='uppercase tracking-wide text-sm text-indigo-500 font-semibold mb-1'>
-            Events for Today
-          </div>
-          <h2 className='block mt-1 text-lg leading-tight font-medium text-black'>
-            {formattedDate}
-          </h2>
-          <div className='mt-4'>
+    <Card>
+      <CardHeader>
+        <CardTitle className='flex items-center justify-between'>
+          Today&apos;s Events
+          <Badge variant='secondary'>{events.length}</Badge>
+        </CardTitle>
+      </CardHeader>
+
+      <CardContent>
+        <ScrollArea className='h-[60vh]'>
+          <div className='divide-y'>
             {events.map(event => (
               <div key={event.id} className='mb-4'>
                 <div className='flex items-center'>
@@ -40,8 +38,37 @@ export function EventsForToday({ events }: EventsForTodayProps) {
               </div>
             ))}
           </div>
-        </div>
-      </div>
-    </div>
+        </ScrollArea>
+      </CardContent>
+    </Card>
+
+    // <div className='min-w-full max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden'>
+    //   <div className='md:flex'>
+    //     <div className='p-8'>
+    //       <div className='uppercase tracking-wide text-sm text-indigo-500 font-semibold mb-1'>
+    //         Events for Today
+    //       </div>
+    //       <h2 className='block mt-1 text-lg leading-tight font-medium text-black'>
+    //         {formattedDate}
+    //       </h2>
+    //       <div className='mt-4'>
+    //         {events.map(event => (
+    //           <div key={event.id} className='mb-4'>
+    //             <div className='flex items-center'>
+    //               <CalendarDays className='h-5 w-5 text-gray-500 mr-2' />
+    //               <h3 className='text-md font-semibold'>{event?.subject}</h3>
+    //             </div>
+    //             <p className='text-gray-600 ml-7'>
+    //               {event?.startTime} -{' '}
+    //               {event?.locations &&
+    //                 event.locations.length > 0 &&
+    //                 event.locations[0]?.name}
+    //             </p>
+    //           </div>
+    //         ))}
+    //       </div>
+    //     </div>
+    //   </div>
+    // </div>
   )
 }
diff --git a/src/components/reschedule-requests.tsx b/src/components/reschedule-requests.tsx
index 4e0b6b1..67a609f 100644
--- a/src/components/reschedule-requests.tsx
+++ b/src/components/reschedule-requests.tsx
@@ -1,136 +1,437 @@
 'use client'
 
 import { Check, X } from 'lucide-react'
-import { useState } from 'react'
-
+import { useEffect, useState, useCallback } from 'react'
 import { Button } from '@/components/ui/button'
 import { ScrollArea } from '@/components/ui/scroll-area'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { Badge } from '@/components/ui/badge'
-import { toast } from '@/hooks/use-toast'
-
-const initialRequests = [
-  {
-    id: 1,
-    title: 'Teams Sync Meeting',
-    currentDateTime: '2024-02-09 10:00 AM',
-    requestedDateTime: '2024-02-10 11:00 AM',
-    participants: ['John', 'Jane', 'Bob'],
-    requestedBy: 'John',
-    status: 'pending',
-  },
-  {
-    id: 2,
-    title: 'Project Review',
-    currentDateTime: '2024-02-09 02:00 PM',
-    requestedDateTime: '2024-02-09 04:00 PM',
-    participants: ['Alice', 'Bob', 'Charlie'],
-    requestedBy: 'Bob',
-    status: 'pending',
-  },
-  {
-    id: 3,
-    title: 'Client Meeting',
-    currentDateTime: '2024-02-10 11:00 AM',
-    requestedDateTime: '2024-02-11 02:00 PM',
-    participants: ['David', 'Eve'],
-    requestedBy: 'David',
-    status: 'pending',
-  },
-]
+import { errorToast, toast } from '@/hooks/use-toast'
+import slotifyClient from '@/hooks/fetch'
+import { CalendarEvent, RescheduleRequest, Attendee, User } from '@/types/types'
+import { format, parseISO } from 'date-fns'
+import { CreateEvent } from './calendar/create-event'
+
+interface CreateEventData {
+  title: string
+  duration: string
+  participants: User[]
+  selectedRange: { start: Date; end: Date } | null
+  disabled: boolean
+}
 
 export function RescheduleRequests() {
-  const [requests, setRequests] = useState(initialRequests)
+  // TODO - this can be removed since we are using full requests instead
+  const [myRequests, setmyRequests] = useState<RescheduleRequest[] | null>(null)
+  const [createEventOpen, setCreateEventOpen] = useState(false)
 
-  const handleAction = (id: number, action: 'accept' | 'ignore') => {
-    if (action === 'accept') {
-      toast({
-        title: 'Request accepted',
-        description: `Request has been accepted`,
+  const [createEventData, setCreateEventData] = useState<CreateEventData>({
+    title: '',
+    duration: '1hr',
+    participants: [],
+    selectedRange: null,
+    disabled: false,
+  })
+
+  const [fullRequests, setFullRequests] = useState<{
+    [key: number]: {
+      requestedAt: string
+      requestedBy: string
+      status: string
+      oldEvent: CalendarEvent
+      newEvent: {
+        startTime: string
+        endTime: string
+        title: string
+        duration: string
+        location: string
+      } | null
+    }
+  }>({})
+
+  const convertAttendeesToUsers = async (attendees: Attendee[]) => {
+    try {
+      const usersPromises = attendees.map(attendee =>
+        slotifyClient.GetAPIUsers({ queries: { email: attendee.email } }),
+      )
+      const usersArrays = await Promise.all(usersPromises)
+      const users = usersArrays.flat()
+      return users
+    } catch (error) {
+      console.error('Error converting attendees:', error)
+      return []
+    }
+  }
+
+  const getRescheduleRequests = async () => {
+    const response = await slotifyClient.GetAPIRescheduleRequestsMe()
+    const requests: RescheduleRequest[] = []
+    response.pending.forEach((request: RescheduleRequest) => {
+      requests.push(request)
+    })
+    response.responses.forEach((request: RescheduleRequest) => {
+      requests.push(request)
+    })
+
+    setmyRequests(requests)
+  }
+
+  const getFullRequests = useCallback(async () => {
+    myRequests?.forEach(async request => {
+      const requestedBy = await getUserByID(request.requested_by)
+      const oldEvent = await slotifyClient.GetAPICalendarEvent({
+        queries: { msftID: request.oldMeeting.msftMeetingID },
       })
-    } else {
+      const newEvent =
+        request.newMeeting?.startTime === '0001-01-01T00:00:00Z'
+          ? null
+          : {
+              startTime: request.newMeeting!.startTime,
+              endTime: request.newMeeting!.endTime,
+              title: request.newMeeting!.title,
+              duration: request.newMeeting!.meetingDuration,
+              location: request.newMeeting!.location,
+            }
+
+      setFullRequests(prevFullRequests => ({
+        ...prevFullRequests,
+        [request.request_id]: {
+          requestedAt: request.requested_at,
+          requestedBy: requestedBy,
+          status: request.status,
+          oldEvent: oldEvent,
+          newEvent: newEvent,
+        },
+      }))
+    })
+  }, [myRequests])
+
+  const getUserByID = async (id: number) => {
+    const response = await slotifyClient.GetAPIUsersUserID({
+      params: { userID: id },
+    })
+    return response.firstName + ' ' + response.lastName
+  }
+
+  const handleRequestReject = async (requestID: number) => {
+    const response =
+      await slotifyClient.PatchAPIRescheduleRequestRequestIDReject(undefined, {
+        params: { requestID },
+      })
+
+    // TODO - 2 api calls are made here for some reason
+    if (response) {
       toast({
-        title: 'Request ignored',
-        description: `Request has been ignored`,
+        title: 'Request rejected',
+        description: 'The request has been rejected',
       })
+    } else {
+      errorToast('Failed to reject request')
     }
-    setRequests(requests.filter(request => request.id !== id))
   }
 
+  const handleRequestAccept = async (oldEvent: CalendarEvent) => {
+    const start = parseISO(oldEvent.startTime!)
+    const end = parseISO(oldEvent.endTime!)
+    const diffInMinutes = Math.round((end.getTime() - start.getTime()) / 60000)
+    const candidates = [30, 60, 120]
+    const closest = candidates.reduce((prev, curr) =>
+      Math.abs(curr - diffInMinutes) < Math.abs(prev - diffInMinutes)
+        ? curr
+        : prev,
+    )
+    const durationString =
+      closest === 30 ? '30 minutes' : closest === 60 ? '1hr' : '2hrs'
+
+    const newParticipants = await convertAttendeesToUsers(oldEvent.attendees)
+
+    setCreateEventData({
+      title: oldEvent.subject ?? '',
+      duration: durationString,
+      participants: newParticipants,
+      selectedRange: {
+        start: new Date(oldEvent.startTime!),
+        end: new Date(oldEvent.endTime!),
+      },
+      disabled: true,
+    })
+    setCreateEventOpen(true)
+  }
+
+  // TODO - this can be removed since we are using full requests instead
+  useEffect(() => {
+    getRescheduleRequests()
+  }, [])
+
+  useEffect(() => {
+    getFullRequests()
+  }, [getFullRequests])
+
   return (
-    <Card>
-      <CardHeader>
-        <CardTitle className='flex items-center justify-between'>
-          Reschedule Requests
-          <Badge variant='secondary'>{requests.length}</Badge>
-        </CardTitle>
-      </CardHeader>
-      <CardContent className='p-0'>
-        <ScrollArea className='h-[calc(100vh-280px)]'>
-          <div className='divide-y'>
-            {requests.map(request => (
-              <div key={request.id} className='p-4'>
-                <div className='space-y-3'>
-                  <div>
-                    <h4 className='font-medium leading-none'>
-                      {request.title}
-                    </h4>
-                    <p className='text-sm text-muted-foreground mt-1'>
-                      Requested by {request.requestedBy}
-                    </p>
-                  </div>
-
-                  <div className='space-y-1 text-sm'>
-                    <div className='flex items-start gap-2'>
-                      <div className='w-20 font-medium shrink-0'>Current:</div>
-                      <div className='text-muted-foreground'>
-                        {request.currentDateTime}
-                      </div>
-                    </div>
-                    <div className='flex items-start gap-2'>
+    <>
+      <Card>
+        <CardHeader>
+          <CardTitle className='flex items-center justify-between'>
+            Reschedule Requests
+            <Badge variant='secondary'>{myRequests?.length}</Badge>
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className='flex flex-row min-w-full'>
+            <ScrollArea className='h-[60vh]'>
+              <div className='divide-y'>
+                {myRequests
+                  ?.filter(request => request.status === 'pending')
+                  .map(request => (
+                    <div key={request.request_id} className='p-4'>
+                      <div className='space-y-3'>
+                        <div>
+                          <h4 className='font-medium leading-none'>
+                            {request.newMeeting?.title
+                              ? request.newMeeting.title
+                              : '(No name)'}
+                          </h4>
+                          <p className='text-sm text-muted-foreground mt-1'>
+                            Current event:{' '}
+                            {fullRequests[request.request_id]
+                              ? format(
+                                  parseISO(
+                                    fullRequests[
+                                      request.request_id
+                                    ]!.oldEvent.startTime?.toString() ?? '',
+                                  ),
+                                  'EEEE do HH:mm',
+                                )
+                              : ''}
+                          </p>
+                          <p className='text-sm text-muted-foreground mt-1'>
+                            Status:{' '}
+                            {fullRequests[request.request_id]
+                              ? fullRequests[request.request_id]!.status
+                              : ''}
+                          </p>
+                          <p className='text-sm text-muted-foreground mt-1'>
+                            Requested by{' '}
+                            {fullRequests[request.request_id]
+                              ? fullRequests[request.request_id]!.requestedBy
+                              : ''}
+                          </p>
+                        </div>
+
+                        <div className='space-y-1 text-sm'>
+                          <div className='flex items-start gap-2'>
+                            <div className='w-25 font-medium shrink-0'>
+                              Requested on:
+                            </div>
+                            <div className='text-muted-foreground'>
+                              {fullRequests[request.request_id]
+                                ? format(
+                                    parseISO(
+                                      fullRequests[request.request_id]!
+                                        .requestedAt,
+                                    ),
+                                    'EEEE do HH:mm',
+                                  )
+                                : ''}
+                            </div>
+                          </div>
+                          {/* <div className='flex items-start gap-2'>
                       <div className='w-20 font-medium shrink-0'>
                         Requested:
                       </div>
                       <div className='text-muted-foreground'>
                         {request.requestedDateTime}
                       </div>
-                    </div>
-                    <div className='flex items-start gap-2'>
-                      <div className='w-20 font-medium shrink-0'>
-                        Attendees:
-                      </div>
-                      <div className='text-muted-foreground'>
-                        {request.participants.join(', ')}
+                    </div> */}
+                          <div className='flex items-start gap-2'>
+                            <div className='w-25 font-medium shrink-0'>
+                              Attendees:
+                            </div>
+                            <div className='text-muted-foreground'>
+                              {fullRequests[request.request_id]
+                                ? fullRequests[
+                                    request.request_id
+                                  ]!.oldEvent.attendees.map(
+                                    attendee => attendee.email,
+                                  ).join(', ')
+                                : ''}
+                            </div>
+                          </div>
+                        </div>
+
+                        <div className='flex items-center gap-2'>
+                          <Button
+                            variant='outline'
+                            size='sm'
+                            className='w-full text-green-500 hover:text-green-600 hover:bg-green-50'
+                            onClick={() =>
+                              handleRequestAccept(
+                                fullRequests[request.request_id]!.oldEvent,
+                              )
+                            }
+                          >
+                            <Check className='h-4 w-4 mr-1' />
+                            Reschedule Now
+                          </Button>
+
+                          <Button
+                            variant='outline'
+                            size='sm'
+                            className='w-full text-red-500 hover:text-red-600 hover:bg-red-50'
+                            onClick={() =>
+                              handleRequestReject(request.request_id)
+                            }
+                          >
+                            <X className='h-4 w-4 mr-1' />
+                            Ignore
+                          </Button>
+                        </div>
                       </div>
                     </div>
-                  </div>
-
-                  <div className='flex items-center gap-2'>
-                    <Button
-                      variant='outline'
-                      size='sm'
-                      className='w-full text-green-500 hover:text-green-600 hover:bg-green-50'
-                      onClick={() => handleAction(request.id, 'accept')}
-                    >
-                      <Check className='h-4 w-4 mr-1' />
-                      Accept
-                    </Button>
-                    <Button
-                      variant='outline'
-                      size='sm'
-                      className='w-full text-red-500 hover:text-red-600 hover:bg-red-50'
-                      onClick={() => handleAction(request.id, 'ignore')}
+                  ))}
+              </div>
+            </ScrollArea>
+
+            <ScrollArea className='h-[60vh]'>
+              <div className='divide-y'>
+                {myRequests
+                  ?.filter(request => request.status !== 'pending')
+                  .map(request => (
+                    <div
+                      key={request.request_id}
+                      className='p-4 duration-200 hover:bg-gray-200 hover:rounded-lg'
+                      onClick={async () => {
+                        const currentFullRequest =
+                          fullRequests[request.request_id]
+                        if (!currentFullRequest) {
+                          return
+                        }
+
+                        // If newMeeting exists and is valid, update createEventData.
+                        if (
+                          currentFullRequest.newEvent &&
+                          currentFullRequest.newEvent.startTime !==
+                            '0001-01-01T00:00:00Z'
+                        ) {
+                          const newParticipants = await convertAttendeesToUsers(
+                            currentFullRequest.oldEvent.attendees,
+                          )
+                          setCreateEventData({
+                            title: currentFullRequest.newEvent.title,
+                            duration: currentFullRequest.newEvent.duration,
+                            participants: newParticipants,
+                            selectedRange: {
+                              start: new Date(
+                                currentFullRequest.newEvent.startTime,
+                              ),
+                              end: new Date(
+                                currentFullRequest.newEvent.endTime,
+                              ),
+                            },
+                            disabled: false,
+                          })
+                        } else {
+                          const newParticipants = await convertAttendeesToUsers(
+                            currentFullRequest.oldEvent.attendees,
+                          )
+                          setCreateEventData({
+                            title: '',
+                            duration: '1hr',
+                            participants: newParticipants,
+                            selectedRange: null,
+                            disabled: false,
+                          })
+                        }
+                        setCreateEventOpen(true)
+                      }}
                     >
-                      <X className='h-4 w-4 mr-1' />
-                      Ignore
-                    </Button>
-                  </div>
-                </div>
+                      <div className='space-y-3'>
+                        <div>
+                          <h4 className='font-medium leading-none'>
+                            {fullRequests[request.request_id]
+                              ? fullRequests[request.request_id]!.oldEvent
+                                  .subject
+                              : '(No name)'}
+                          </h4>
+                          <p className='text-sm text-muted-foreground mt-1'>
+                            Current event:{' '}
+                            {fullRequests[request.request_id]
+                              ? format(
+                                  parseISO(
+                                    fullRequests[
+                                      request.request_id
+                                    ]!.oldEvent.startTime?.toString() ?? '',
+                                  ),
+                                  'EEEE do HH:mm',
+                                )
+                              : ''}
+                          </p>
+                          <p className='text-sm text-muted-foreground mt-1'>
+                            Status:{' '}
+                            {fullRequests[request.request_id]
+                              ? fullRequests[request.request_id]!.status
+                              : ''}
+                          </p>
+                          <p className='text-sm text-muted-foreground mt-1'>
+                            Requested by{' '}
+                            {fullRequests[request.request_id]
+                              ? fullRequests[request.request_id]!.requestedBy
+                              : ''}
+                          </p>
+                        </div>
+
+                        <div className='space-y-1 text-sm'>
+                          <div className='flex items-start gap-2'>
+                            <div className='w-25 font-medium shrink-0'>
+                              Requested on:
+                            </div>
+                            <div className='text-muted-foreground'>
+                              {fullRequests[request.request_id]
+                                ? format(
+                                    parseISO(
+                                      fullRequests[request.request_id]!
+                                        .requestedAt,
+                                    ),
+                                    'EEEE do HH:mm',
+                                  )
+                                : ''}
+                            </div>
+                          </div>
+
+                          <div className='flex items-start gap-2'>
+                            <div className='w-25 font-medium shrink-0'>
+                              Attendees:
+                            </div>
+                            <div className='text-muted-foreground'>
+                              {fullRequests[request.request_id]
+                                ? fullRequests[
+                                    request.request_id
+                                  ]!.oldEvent.attendees.map(
+                                    attendee => attendee.email,
+                                  ).join(', ')
+                                : ''}
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  ))}
               </div>
-            ))}
+            </ScrollArea>
           </div>
-        </ScrollArea>
-      </CardContent>
-    </Card>
+        </CardContent>
+      </Card>
+
+      <CreateEvent
+        open={createEventOpen}
+        onOpenChangeAction={setCreateEventOpen}
+        closeCreateEventDialogOpen={() => setCreateEventOpen(false)}
+        initialTitle={createEventData.title}
+        initialDuration={createEventData.duration}
+        initialParticipants={createEventData.participants}
+        initialSelectedRange={createEventData.selectedRange}
+        inputsDisabled={createEventData.disabled}
+      />
+    </>
   )
 }
diff --git a/src/components/user.tsx b/src/components/user.tsx
index b5fd811..a7ec07c 100644
--- a/src/components/user.tsx
+++ b/src/components/user.tsx
@@ -2,34 +2,46 @@
 import { useEffect, useState } from 'react'
 import { Member } from '@/components/slotify-group-members'
 
-import { User as LucideUserIcon } from 'lucide-react'
+import { User as LucideUserIcon, CalendarDays } from 'lucide-react'
 import slotifyClient from '@/hooks/fetch'
 import { errorToast } from '@/hooks/use-toast'
 
 export default function User() {
   const [user, setUser] = useState<Member | null>(null)
+  const today = new Date()
+  const formattedDate = today.toLocaleDateString('en-US', {
+    weekday: 'long',
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  })
 
-  useEffect(() => {
-    const fetchUser = async () => {
-      try {
-        console.log('Making fetch call to /users')
-        const data = await slotifyClient.GetAPIUsersMe()
-        setUser(data)
-      } catch (error) {
-        console.error(error)
-        errorToast(error)
-      }
+  const fetchUser = async () => {
+    try {
+      console.log('Making fetch call to /users')
+      const data = await slotifyClient.GetAPIUsersMe()
+      setUser(data)
+    } catch (error) {
+      console.error(error)
+      errorToast(error)
     }
+  }
+
+  useEffect(() => {
     fetchUser()
   }, [])
 
-  if (!user) return 'No user'
-
   return (
-    <div className='flex flex-row w-screen ml-20'>
-      <LucideUserIcon className='h-10 w-10' />
-      <div className='flex flex-row justify-center items-center ml-5 font-semibold text-2xl'>
-        Welcome {user.firstName}
+    <div className='flex flex-row w-screen pl-20 pr-20 justify-between'>
+      <div className='flex flex-row justify-center items-center'>
+        <div className='flex flex-row justify-center items-center gap-5 text-2xl font-semibold'>
+          <LucideUserIcon className='h-10 w-10' />
+          Welcome {user ? user.firstName : 'User'}
+        </div>
+      </div>
+      <div className='flex flex-row justify-center items-center gap-5 text-xl'>
+        {formattedDate}
+        <CalendarDays className='h-10 w-10' />
       </div>
     </div>
   )
diff --git a/src/types/client.ts b/src/types/client.ts
index a482cfa..878b49d 100644
--- a/src/types/client.ts
+++ b/src/types/client.ts
@@ -30,7 +30,7 @@ type ReschedulingRequestNewMeeting = {
   startTime: string;
   endTime: string;
   location: string;
-  attendees: Array<number>;
+  attendees: Array<number> | null;
 };
 type ReschedulingCheckBodySchema = {
   newMeeting: {
@@ -450,7 +450,7 @@ const ReschedulingRequestNewMeeting: z.ZodType<ReschedulingRequestNewMeeting> =
       startTime: z.string().datetime({ offset: true }),
       endTime: z.string().datetime({ offset: true }),
       location: z.string(),
-      attendees: z.array(z.number().int()),
+      attendees: z.array(z.number().int()).nullable(),
     })
     .passthrough();
 const RescheduleRequest: z.ZodType<RescheduleRequest> = z
diff --git a/src/types/types.ts b/src/types/types.ts
index 516c3c0..8ea3d87 100644
--- a/src/types/types.ts
+++ b/src/types/types.ts
@@ -15,3 +15,4 @@ export type SchedulingSlotsSuccessResponse = z.infer<
 export type MeetingTimeSuggestion = z.infer<
   typeof schemas.MeetingTimeSuggestion
 >
+export type RescheduleRequest = z.infer<typeof schemas.RescheduleRequest>