diff --git a/app/(auth)/events/[eventId]/page.tsx b/app/(auth)/events/[eventId]/page.tsx
index a6a2a57..c6d2f28 100644
--- a/app/(auth)/events/[eventId]/page.tsx
+++ b/app/(auth)/events/[eventId]/page.tsx
@@ -1,20 +1,24 @@
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-import EventInfoDisplay from '@/components/EventInfoDisplay'
+import EventDashboard from '@/components/events/EventDashboard'
 import { queries } from '@/lib/queries'
 import React from 'react'
 
 export default async function SingleEventPage({ params }: { params: { eventId: string }}) {
     const data = await queries.singleEvent(params.eventId)
-    console.log(data)
     
     return (
-        <div className=''>
+        <>
+        <EventDashboard 
+            event={data}
+        />
+        {/* <div className=''>
+            
             {data ? (
                 // @ts-ignore
                 <EventInfoDisplay event={data} />
             ) : (
                 <p className="text-center text-gray-500 mt-10">Event not found.</p>
             )}
-        </div>
+        </div> */}
+        </>
     )
 }
diff --git a/components/EventInfoDisplay.tsx b/components/EventInfoDisplay.tsx
index 59f757e..7b56fcd 100644
--- a/components/EventInfoDisplay.tsx
+++ b/components/EventInfoDisplay.tsx
@@ -50,7 +50,7 @@ export default function EventInfoDisplay({ event }: Props) {
     const [todos, setTodos] = useState(event.todos)
 
     const eventGuests = event.eventGuests
-    console.log(eventGuests)
+    // console.log(eventGuests)
     
     const [saving, setSaving] = useState(false)
     const [error, setError] = useState('')
diff --git a/components/EventNotesEditor.tsx b/components/EventNotesEditor.tsx
index 95e2748..d7cba0d 100644
--- a/components/EventNotesEditor.tsx
+++ b/components/EventNotesEditor.tsx
@@ -66,9 +66,6 @@ export default function EventNotesEditor({ eventId, initialNotes, canEdit }: Pro
 
     return (
         <div>
-            <p className='text-sm font-semibold mb-1 flex gap-1 items-center'>
-                Notes 
-            </p>
             <div
                 className="prose prose-brand rounded-lg textarea-bordered p-4 w-full min-h-[120px] cursor-text"
                 onClick={() => {
diff --git a/components/ToDoList.tsx b/components/ToDoList.tsx
index 27495f4..893e1d1 100644
--- a/components/ToDoList.tsx
+++ b/components/ToDoList.tsx
@@ -1,5 +1,7 @@
 'use client'
 import React, { useState } from 'react'
+import { Card, CardContent } from './ui/card'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from './ui/tabs'
 
 interface Todo {
     id: string
@@ -15,7 +17,7 @@ interface Props {
     onUpdate: () => void
 }
 
-export default function ToDoList({ eventId, initialTodos, onUpdate }: Props) {
+export default function  ToDoList({ eventId, initialTodos, onUpdate }: Props) {
     const [todos, setTodos] = useState(initialTodos)
     const [newName, setNewName] = useState('')
     const [newDueDate, setNewDueDate] = useState('')
@@ -88,104 +90,117 @@ export default function ToDoList({ eventId, initialTodos, onUpdate }: Props) {
     }
 
     return (
-        <div className="space-y-4">
-            <h2 className="text-xl font-semibold">To Do List</h2>
-
-            <div className="flex gap-2">
-                <input
-                    className="input input-bordered w-full"
-                    placeholder="New To Do..."
-                    value={newName}
-                    onChange={e => setNewName(e.target.value)}
-                />
-                <input
-                    type="date"
-                    className="input input-bordered"
-                    value={newDueDate}
-                    onChange={e => setNewDueDate(e.target.value)}
-                />
-                <button className="btn btn-primary" onClick={handleAdd}>
-                    Add
-                </button>
-            </div>
-
-            <ul className="space-y-2">
-                {todos.map(todo => (
-                    <li
-                        key={todo.id}
-                        className="flex flex-col gap-1 p-3 bg-[#00000010] rounded-lg"
-                    >
-                        <div className="flex items-center justify-between">
-                            <div className="flex items-center gap-2">
-                                <input
-                                type="checkbox"
-                                checked={todo.complete}
-                                onChange={e => toggleComplete(todo.id, e.target.checked)}
-                                />
-                                <span className={todo.complete ? 'line-through text-gray-400' : ''}>
-                                {todo.name}
-                                </span>
-                                {todo.dueDate && (
-                                <span className="text-sm text-gray-500 ml-2">
-                                    (Due {new Date(todo.dueDate).toLocaleDateString()})
-                                </span>
-                                )}
-                            </div>
-                            <button
-                                className="text-red-500 text-sm"
-                                onClick={() => handleDelete(todo.id)}
-                            >
-                                Delete
-                            </button>
-                        </div>
-
-                        {/* Notes Section */}
-                        <div className="mt-1 text-sm text-gray-700">
-                            {editingNoteId === todo.id ? (
-                                <div className="space-y-1">
-                                    <textarea
-                                        className="textarea textarea-bordered w-full"
-                                        value={noteDraft}
-                                        onChange={e => setNoteDraft(e.target.value)}
-                                        rows={2}
-                                    />
-                                    <div className="flex gap-2">
+        <Card className='py-0'>
+            <CardContent className="p-4">
+                <h2 className="text-xl font-semibold">To-Do List</h2>
+                <div className="flex gap-2">
+                    <input
+                        className="input input-bordered w-full"
+                        placeholder="New To Do..."
+                        value={newName}
+                        onChange={e => setNewName(e.target.value)}
+                    />
+                    <input
+                        type="date"
+                        className="input input-bordered"
+                        value={newDueDate}
+                        onChange={e => setNewDueDate(e.target.value)}
+                    />
+                    <button className="btn btn-primary" onClick={handleAdd}>
+                        Add
+                    </button>
+                </div>
+                <Tabs defaultValue="list" className="w-full mt-2">
+                    <TabsList className="mb-4">
+                        <TabsTrigger value="list">List View</TabsTrigger>
+                        <TabsTrigger value="calendar">Calendar View</TabsTrigger>
+                    </TabsList>
+                    <TabsContent value="list">
+                        <div className="space-y-2">
+                            {todos.map(todo => (
+                                <div
+                                    key={todo.id}
+                                    className="border p-2 rounded-md"
+                                >
+                                    <div className="flex items-center justify-between">
+                                        <div className="flex items-center gap-2">
+                                            <input
+                                            type="checkbox"
+                                            checked={todo.complete}
+                                            onChange={e => toggleComplete(todo.id, e.target.checked)}
+                                            />
+                                            <span className={todo.complete ? 'line-through text-gray-400' : ''}>
+                                            {todo.name}
+                                            </span>
+                                            {todo.dueDate && (
+                                            <span className="text-sm text-gray-500 ml-2">
+                                                (Due {new Date(todo.dueDate).toLocaleDateString()})
+                                            </span>
+                                            )}
+                                        </div>
                                         <button
-                                            className="btn btn-sm btn-primary"
-                                            onClick={() => saveNote(todo.id)}
+                                            className="text-red-500 text-sm"
+                                            onClick={() => handleDelete(todo.id)}
                                         >
-                                            Save
-                                        </button>
-                                        <button
-                                            className="btn btn-sm"
-                                            onClick={() => {
-                                                setEditingNoteId(null)
-                                                setNoteDraft('')
-                                            }}
-                                        >
-                                            Cancel
+                                            Delete
                                         </button>
                                     </div>
+
+                                    {/* Notes Section */}
+                                    <div className="mt-1 text-sm text-gray-700">
+                                        {editingNoteId === todo.id ? (
+                                            <div className="space-y-1">
+                                                <textarea
+                                                    className="textarea textarea-bordered w-full"
+                                                    value={noteDraft}
+                                                    onChange={e => setNoteDraft(e.target.value)}
+                                                    rows={2}
+                                                />
+                                                <div className="flex gap-2">
+                                                    <button
+                                                        className="btn btn-sm btn-primary"
+                                                        onClick={() => saveNote(todo.id)}
+                                                    >
+                                                        Save
+                                                    </button>
+                                                    <button
+                                                        className="btn btn-sm"
+                                                        onClick={() => {
+                                                            setEditingNoteId(null)
+                                                            setNoteDraft('')
+                                                        }}
+                                                    >
+                                                        Cancel
+                                                    </button>
+                                                </div>
+                                            </div>
+                                        ) : (
+                                            <div
+                                                className="cursor-pointer text-gray-600"
+                                                onClick={() => {
+                                                    setEditingNoteId(todo.id)
+                                                    setNoteDraft(todo.notes || '')
+                                                }}
+                                            >
+                                                {todo.notes ? (
+                                                    <span>{todo.notes}</span>
+                                                ) : (
+                                                    <span className="italic text-gray-400">Add note...</span>
+                                                )}
+                                            </div>
+                                        )}
+                                    </div>
                                 </div>
-                            ) : (
-                                <div
-                                    className="cursor-pointer text-gray-600"
-                                    onClick={() => {
-                                        setEditingNoteId(todo.id)
-                                        setNoteDraft(todo.notes || '')
-                                    }}
-                                >
-                                    {todo.notes ? (
-                                        <span>{todo.notes}</span>
-                                    ) : (
-                                        <span className="italic text-gray-400">Add note...</span>
-                                    )}
-                                </div>
-                            )}
+                            ))}
                         </div>
-                    </li>
-                ))}
-            </ul>
-        </div>
+                    </TabsContent>
+                    <TabsContent value='calendar'>
+                        <div className="grid grid-cols-7 gap-1 text-xs">
+                            
+                        </div>
+                    </TabsContent>
+                </Tabs>
+            </CardContent>
+        </Card>
     )
 }
diff --git a/components/events/EventDashboard.tsx b/components/events/EventDashboard.tsx
new file mode 100644
index 0000000..08ba43d
--- /dev/null
+++ b/components/events/EventDashboard.tsx
@@ -0,0 +1,40 @@
+'use client'
+
+import React, { useState } from 'react'
+import EventInfo from './EventInfo'
+import EventRsvpTracking from './EventRsvpTracking'
+import EventToDoList from './EventToDoList'
+import ToDoList from '../ToDoList'
+import { fetchEventTodos } from '@/lib/helper/fetchTodos'
+
+interface Props {
+    event: EventData
+}
+
+export default function EventDashboard({ event }: Props) {
+    const [todos, setTodos] = useState(event.todos)
+
+     async function refreshTodos() {
+        try {
+            const data = await fetchEventTodos(event.id)
+            setTodos(data)
+        } catch (err) {
+            console.error('Failed to refresh todos:', err)
+        }
+    }
+
+    return (
+        <div className='grid grid-cols-1 lg:grid-cols-3 gap-6'>
+            <EventInfo event={event} />
+            <div className='lg:col-span-2 space-y-4'>
+                <EventRsvpTracking eventGuests={event.eventGuests} />
+                {/* <EventToDoList tasks={event.todos} /> */}
+                <ToDoList 
+                    eventId={event.id}
+                    initialTodos={todos}
+                    onUpdate={refreshTodos}
+                />
+            </div>
+        </div>
+    )
+}
diff --git a/components/events/EventInfo.tsx b/components/events/EventInfo.tsx
new file mode 100644
index 0000000..c91acaf
--- /dev/null
+++ b/components/events/EventInfo.tsx
@@ -0,0 +1,50 @@
+'use client'
+import React, { useEffect, useState } from 'react'
+import { Card, CardContent } from '../ui/card'
+import { getDaysUntilEvent } from '@/lib/helper/getDaysUntilEvent'
+import { Button } from '../ui/button'
+import EventNotesEditor from '../EventNotesEditor'
+
+interface EventProps {
+    event: EventData
+}
+
+export default function EventInfo({ event }: EventProps) {
+    const [daysLeft, setDaysLeft] = useState<number | null>(null)
+
+    useEffect(() => {
+        if (event.date) {
+            const diff = getDaysUntilEvent(event.date);
+            setDaysLeft(diff)
+        }
+    }, [event.date])
+
+    return (
+        <div className='lg:col-span-1 space-y-4'>
+            <Card className='py-0'>
+                <CardContent className='p-4'>
+                    <h2 className='text-xl font-semibold'>Event Info</h2>
+                    <p className='text-sm mt-2'>Nmae: {event.name}</p>
+                    <p className='text-sm'>Date: {event.date ? event.date.toDateString() : 'Upcoming'}</p>
+                    <p className='text-sm'>Location: {event.location ? event.location : 'No location yet'}</p>
+                    {daysLeft !== null && (
+                        <p className='text-sm mt-2 font-medium text-brand-primary-400'>
+                            {daysLeft} days until this event!
+                        </p>
+                    )}
+                    <Button className="mt-4 w-full bg-brand-primary-600 hover:bg-brand-primary-400">Edit Event</Button>
+                </CardContent>
+            </Card>
+            <Card className='py-0'>
+                <CardContent className='p-4'>
+                    <h2 className='text-xl font-semibold mb-2'>General Notes</h2>
+                    <EventNotesEditor
+                        eventId={event.id}
+                        initialNotes={event.notes || ''}
+                        canEdit={['COUPLE', 'PLANNER'].includes(event.creator.role)}
+                    />
+                </CardContent>
+            </Card>
+        </div>
+    )
+}
diff --git a/components/events/EventRsvpTracking.tsx b/components/events/EventRsvpTracking.tsx
new file mode 100644
index 0000000..2ad71a0
--- /dev/null
+++ b/components/events/EventRsvpTracking.tsx
@@ -0,0 +1,36 @@
+'use client'
+import React from 'react'
+import { Card, CardContent } from '../ui/card'
+import { Button } from '../ui/button'
+
+export default function EventRsvpTracking({ eventGuests }: EventData) {
+    const attendingGuests = eventGuests.filter((g) => g.rsvp === 'YES');
+    const notAttendingGuests = eventGuests.filter((g) => g.rsvp === 'NO');
+    const pendingGuests = eventGuests.filter((g) => g.rsvp === 'PENDING');
+    return (
+        <Card className='py-0'>
+            <CardContent className='p-4'>
+                <h2 className="text-xl font-semibold">RSVP Tracking</h2>
+                <div className='grid grid-cols-4 gap-4 text-sm mt-4'>
+                    <div>
+                        <p className='text-muted-foreground'>Invited</p>
+                        <p className='text-2xl font-bold'>{eventGuests.length}</p>
+                    </div>
+                    <div>
+                        <p className='text-muted-foreground'>Confirmed</p>
+                        <p className='text-2xl font-bold'>{attendingGuests.length}</p>
+                    </div>
+                    <div>
+                        <p className='text-muted-foreground'>Declined</p>
+                        <p className='text-2xl font-bold'>{notAttendingGuests.length}</p>
+                    </div>
+                    <div>
+                        <p className='text-muted-foreground'>Pending</p>
+                        <p className='text-2xl font-bold'>{pendingGuests.length}</p>
+                    </div>
+                </div>
+                <Button variant="secondary" className="mt-4 hover:cursor-pointer hover:bg-brand-primary-900">Manage Guest List</Button>
+            </CardContent>
+        </Card>
+    )
+}
diff --git a/types.d.ts b/types.d.ts
index 135ae16..0fac8da 100644
--- a/types.d.ts
+++ b/types.d.ts
@@ -20,4 +20,36 @@ interface EventProps {
     createdAt: Date; date: Date | null;
     creatorId: string; 
     key: string;
-}
\ No newline at end of file
+}
+
+interface Creator {
+    id: string
+    email: string
+    name: string | null
+    role: 'COUPLE' | 'PLANNER' | 'GUEST'
+}
+
+interface Todo {
+    id: string
+    name: string
+    complete: boolean
+    dueDate?: string | null
+    createdAt: string
+    updatedAt?: string
+    dueDate?: string | null
+    notes?: string | null
+}
+
+interface EventData {
+    id: string
+    name: string
+    date: Date | null
+    location: string | null
+    creatorId: string
+    createdAt: string
+    creator: Creator
+    guests: any[]
+    notes?: string
+    eventGuests: any[]
+    todos: Todo[] 
+}