diff --git a/app/(dashboard)/[tenant]/projects/[projectId]/events/page.tsx b/app/(dashboard)/[tenant]/projects/[projectId]/events/page.tsx
index 945d098..f07d4d8 100644
--- a/app/(dashboard)/[tenant]/projects/[projectId]/events/page.tsx
+++ b/app/(dashboard)/[tenant]/projects/[projectId]/events/page.tsx
@@ -10,137 +10,136 @@ import dayjs from "dayjs";
 import timezone from "dayjs/plugin/timezone";
 import utc from "dayjs/plugin/utc";
 import {
-	and,
-	asc,
-	between,
-	desc,
-	eq,
-	gt,
-	isNotNull,
-	lt,
-	or,
+  and,
+  asc,
+  between,
+  desc,
+  eq,
+  gt,
+  isNotNull,
+  lt,
+  or,
 } from "drizzle-orm";
 import { RssIcon } from "lucide-react";
 import Link from "next/link";
 
 type Props = {
-	params: Promise<{
-		projectId: string;
-	}>;
-	searchParams: Promise<{
-		on: string;
-	}>;
+  params: Promise<{
+    projectId: string;
+  }>;
+  searchParams: Promise<{
+    on: string;
+  }>;
 };
 
 dayjs.extend(utc);
 dayjs.extend(timezone);
 
 export default async function EventDetails(props: Props) {
-	const searchParams = await props.searchParams;
-	const params = await props.params;
-	const { projectId } = params;
-	const { on } = searchParams;
-	const { userId, ownerId, orgSlug } = await getOwner();
+  const searchParams = await props.searchParams;
+  const params = await props.params;
+  const { projectId } = params;
+  const { on } = searchParams;
+  const { userId, ownerId, orgSlug } = await getOwner();
 
-	const timezone = await getTimezone();
+  const timezone = await getTimezone();
 
-	// Convert the selected date to the user's timezone and then to UTC for the database
-	const selectedDate = dayjs(new Date(on));
-	const dayCommentId = `${projectId}${selectedDate.year()}${selectedDate.month()}${selectedDate.date()}`;
+  const selectedDate = on ? dayjs(new Date(on)) : dayjs().tz(timezone);
+  const dayCommentId = `${projectId}${selectedDate.year()}${selectedDate.month()}${selectedDate.date()}`;
 
-	const startOfDay = selectedDate.startOf("day").toDate();
-	const endOfDay = selectedDate.endOf("day").toDate();
+  const startOfDay = selectedDate.startOf("day").toDate();
+  const endOfDay = selectedDate.endOf("day").toDate();
 
-	const db = await database();
-	const events = await db.query.calendarEvent
-		.findMany({
-			where: and(
-				eq(calendarEvent.projectId, +projectId),
-				or(
-					between(calendarEvent.start, startOfDay, endOfDay),
-					between(calendarEvent.end, startOfDay, endOfDay),
-					and(
-						lt(calendarEvent.start, startOfDay),
-						gt(calendarEvent.end, endOfDay),
-					),
-					isNotNull(calendarEvent.repeatRule),
-				),
-			),
-			orderBy: [desc(calendarEvent.start), asc(calendarEvent.allDay)],
-			with: {
-				creator: {
-					columns: {
-						id: true,
-						firstName: true,
-						imageUrl: true,
-					},
-				},
-				invites: {
-					with: {
-						user: {
-							columns: {
-								firstName: true,
-								imageUrl: true,
-							},
-						},
-					},
-				},
-			},
-		})
-		.execute();
+  const db = await database();
+  const events = await db.query.calendarEvent
+    .findMany({
+      where: and(
+        eq(calendarEvent.projectId, +projectId),
+        or(
+          between(calendarEvent.start, startOfDay, endOfDay),
+          between(calendarEvent.end, startOfDay, endOfDay),
+          and(
+            lt(calendarEvent.start, startOfDay),
+            gt(calendarEvent.end, endOfDay),
+          ),
+          isNotNull(calendarEvent.repeatRule),
+        ),
+      ),
+      orderBy: [desc(calendarEvent.start), asc(calendarEvent.allDay)],
+      with: {
+        creator: {
+          columns: {
+            id: true,
+            firstName: true,
+            imageUrl: true,
+          },
+        },
+        invites: {
+          with: {
+            user: {
+              columns: {
+                firstName: true,
+                imageUrl: true,
+              },
+            },
+          },
+        },
+      },
+    })
+    .execute();
 
-	const calendarSubscriptionUrl = `/api/calendar/${ownerId}/${projectId}/calendar.ics?userId=${userId}`;
+  const calendarSubscriptionUrl = `/api/calendar/${ownerId}/${projectId}/calendar.ics?userId=${userId}`;
 
-	return (
-		<>
-			<PageTitle
-				title="Events"
-				actionLabel="New"
-				actionLink={`/${orgSlug}/projects/${projectId}/events/new`}
-			>
-				<div className="font-medium text-gray-500">
-					{selectedDate.tz(timezone).format("dddd, MMMM D, YYYY")}
-				</div>
-			</PageTitle>
+  return (
+    <>
+      <PageTitle
+        title="Events"
+        actionLabel="New"
+        actionLink={`/${orgSlug}/projects/${projectId}/events/new`}
+      >
+        <div className="font-medium text-gray-500">
+          {selectedDate.tz(timezone).format("dddd, MMMM D, YYYY")}
+        </div>
+      </PageTitle>
 
-			<PageSection topInset>
-				<div className="flex justify-between p-1">
-					{/* Left buttons */}
-					<div className="isolate inline-flex sm:space-x-3">
-						<span className="inline-flex space-x-1">
-							<Link
-								href={calendarSubscriptionUrl}
-								className={buttonVariants({ variant: "link" })}
-							>
-								<RssIcon className="mr-2 h-5 w-5" />
-								Calendar Subscription
-							</Link>
-						</span>
-					</div>
-				</div>
-			</PageSection>
+      <PageSection topInset>
+        <div className="flex justify-between p-1">
+          {/* Left buttons */}
+          <div className="isolate inline-flex sm:space-x-3">
+            <span className="inline-flex space-x-1">
+              <Link
+                href={calendarSubscriptionUrl}
+                className={buttonVariants({ variant: "link" })}
+              >
+                <RssIcon className="mr-2 h-5 w-5" />
+                Calendar Subscription
+              </Link>
+            </span>
+          </div>
+        </div>
+      </PageSection>
 
-			<PageSection>
-				<div className="flex w-full rounded-lg bg-white dark:bg-black">
-					<EventsCalendar
-						projectId={projectId}
-						userId={userId}
-						events={events}
-						orgSlug={orgSlug}
-						selectedDate={selectedDate.toISOString()}
-						timezone={timezone}
-					/>
-				</div>
-			</PageSection>
+      <PageSection>
+        <div className="flex w-full rounded-lg bg-white dark:bg-black">
+          <EventsCalendar
+            projectId={projectId}
+            userId={userId}
+            events={events}
+            orgSlug={orgSlug}
+            selectedDate={selectedDate.toISOString()}
+            timezone={timezone}
+          />
+        </div>
+      </PageSection>
 
-			<div className="mx-auto max-w-5xl p-4 lg:p-0">
-				{/* @ts-ignore */}
-				<CommentsSection
-					type="event"
-					parentId={dayCommentId}
-					projectId={+projectId}
-				/>
-			</div>
-		</>
+      <div className="mx-auto max-w-5xl p-4 lg:p-0">
+        {/* @ts-ignore */}
+        <CommentsSection
+          type="event"
+          parentId={dayCommentId}
+          projectId={+projectId}
+        />
+      </div>
+    </>
   );
 }