diff --git a/app/api/calendars/route.ts b/app/api/calendars/route.ts
index ebf25132..3449365d 100644
--- a/app/api/calendars/route.ts
+++ b/app/api/calendars/route.ts
@@ -11,7 +11,7 @@ import { prisma } from "@/lib/prisma";
  *
  * The function performs the following steps:
  * 1. Retrieves the server session using `getServerSession`.
- * 2. Checks if the user is authenticated by verifying the presence of `session.user.username`.
+ * 2. Checks if the user is authenticated by verifying the presence of `session.user.id`.
  *    - If not authenticated, returns a 401 response with an error message.
  * 3. Attempts to fetch the calendars associated with the authenticated user from the database.
  *    - If successful, returns the calendars in a JSON response.
@@ -20,14 +20,14 @@ import { prisma } from "@/lib/prisma";
 export async function GET(req: NextRequest) {
   const session = await getServerSession(authOptions);
 
-  if (!session?.user?.username) {
+  if (!session?.user?.id) {
     return NextResponse.json({ error: "Non authentifié" }, { status: 401 });
   }
 
   try {
     const calendars = await prisma.calendar.findMany({
       where: {
-        userId: session.user.username,
+        userId: session.user.id,
       },
       include: {
         events: {
@@ -41,6 +41,7 @@ export async function GET(req: NextRequest) {
       },
     });
 
+    console.log("Fetched calendars with events:", calendars);
     return NextResponse.json(calendars);
   } catch (error) {
     console.error("Erreur lors de la récupération des calendriers:", error);
@@ -58,7 +59,7 @@ export async function GET(req: NextRequest) {
  *
  * The function performs the following steps:
  * 1. Retrieves the server session using `getServerSession`.
- * 2. Checks if the user is authenticated by verifying the presence of `session.user.username`.
+ * 2. Checks if the user is authenticated by verifying the presence of `session.user.id`.
  * 3. Parses the request body to extract `name`, `color`, and `description`.
  * 4. Validates that the `name` field is provided.
  * 5. Creates a new calendar entry in the database using Prisma.
@@ -68,7 +69,7 @@ export async function GET(req: NextRequest) {
 export async function POST(req: NextRequest) {
   const session = await getServerSession(authOptions);
 
-  if (!session?.user?.username) {
+  if (!session?.user?.id) {
     return NextResponse.json({ error: "Non authentifié" }, { status: 401 });
   }
 
@@ -88,7 +89,7 @@ export async function POST(req: NextRequest) {
         name,
         color: color || "#0082c9",
         description,
-        userId: session.user.username,
+        userId: session.user.id,
       },
     });
 
diff --git a/components/calendar/calendar-client.tsx b/components/calendar/calendar-client.tsx
index 24aee2c1..b9bc7f10 100644
--- a/components/calendar/calendar-client.tsx
+++ b/components/calendar/calendar-client.tsx
@@ -518,19 +518,28 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
         }
       }
 
-      // Ensure events array exists for each calendar
+      // Ensure events array exists for each calendar and convert dates
       const calendarsWithEvents = data.map((cal: Calendar & { events: Event[] }) => ({
         ...cal,
-        events: cal.events || []
+        events: (cal.events || []).map(event => ({
+          ...event,
+          start: new Date(event.start),
+          end: new Date(event.end)
+        }))
       }));
 
-      console.log("Setting calendars with events:", calendarsWithEvents);
+      console.log("Setting calendars with processed events:", calendarsWithEvents);
       setCalendars(calendarsWithEvents);
 
       if (calendarsWithEvents.length > 0 && !selectedCalendarId) {
         setSelectedCalendarId(calendarsWithEvents[0].id);
       }
 
+      // Update visible calendars if not set
+      if (visibleCalendarIds.length === 0) {
+        setVisibleCalendarIds(calendarsWithEvents.map(cal => cal.id));
+      }
+
       // Force calendar refresh after updating state
       if (calendarRef.current) {
         const calendarApi = calendarRef.current.getApi();
@@ -985,18 +994,28 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
                 (cal.events || []).map(event => ({
                   id: event.id,
                   title: event.title,
-                  start: event.start,
-                  end: event.end,
+                  start: new Date(event.start),
+                  end: new Date(event.end),
                   allDay: event.isAllDay,
                   description: event.description,
                   location: event.location,
                   calendarId: event.calendarId,
-                  originalEvent: event,
                   backgroundColor: cal.color,
-                  textColor: '#ffffff',
                   borderColor: cal.color,
+                  textColor: '#ffffff',
                 }))
               )}
+            eventContent={(arg) => (
+              <div className="p-1">
+                <div className="font-semibold">{arg.event.title}</div>
+                {arg.event.extendedProps.location && (
+                  <div className="text-xs opacity-75">
+                    <MapPin className="inline-block w-3 h-3 mr-1" />
+                    {arg.event.extendedProps.location}
+                  </div>
+                )}
+              </div>
+            )}
             locale={frLocale}
             selectable={true}
             selectMirror={true}