diff --git a/xtablo-expo/app/(auth)/login.tsx b/xtablo-expo/app/(auth)/login.tsx
index 2bd8a4f..776b506 100644
--- a/xtablo-expo/app/(auth)/login.tsx
+++ b/xtablo-expo/app/(auth)/login.tsx
@@ -17,7 +17,7 @@ export default function Auth() {
 
   return (
     <View style={styles.container}>
-      <Image source={require("@/assets/images/logo.jpg")} style={styles.logo} />
+      <Image source={require("@/assets/images/logo.png")} style={styles.logo} />
       <Text style={styles.title}>Connexion XTablo</Text>
       <Text style={styles.subtitle}>Connectez-vous à votre compte</Text>
       <View style={[styles.verticallySpaced, styles.mt10]}>
diff --git a/xtablo-expo/app/(auth)/signup.tsx b/xtablo-expo/app/(auth)/signup.tsx
index 08173ff..c15a983 100644
--- a/xtablo-expo/app/(auth)/signup.tsx
+++ b/xtablo-expo/app/(auth)/signup.tsx
@@ -17,7 +17,7 @@ export default function SignUp() {
 
   return (
     <View style={styles.container}>
-      <Image source={require("@/assets/images/logo.jpg")} style={styles.logo} />
+      <Image source={require("@/assets/images/logo.png")} style={styles.logo} />
       <Text style={styles.title}>Créer un compte XTablo</Text>
       <Text style={styles.subtitle}>Rejoignez-nous !</Text>
       <View style={[styles.verticallySpaced, styles.mt10]}>
diff --git a/xtablo-expo/app/(home)/(tabs)/_layout.tsx b/xtablo-expo/app/(home)/(tabs)/_layout.tsx
index 00c0914..1b1d89f 100644
--- a/xtablo-expo/app/(home)/(tabs)/_layout.tsx
+++ b/xtablo-expo/app/(home)/(tabs)/_layout.tsx
@@ -5,7 +5,7 @@ import { HapticTab } from "@/components/HapticTab";
 import TabBarBackground from "@/components/ui/TabBarBackground";
 import { Colors } from "@/constants/Colors";
 import { useColorScheme } from "@/hooks/useColorScheme";
-import { Home, User } from "lucide-react-native";
+import { MessageCircle, Calendar, User } from "lucide-react-native";
 
 export default function TabLayout() {
   const colorScheme = useColorScheme();
@@ -13,7 +13,7 @@ export default function TabLayout() {
     <Tabs
       screenOptions={{
         tabBarActiveTintColor: Colors[colorScheme ?? "light"].tint,
-        headerShown: true,
+        headerShown: false,
         tabBarButton: HapticTab,
         tabBarBackground: TabBarBackground,
       }}
@@ -21,8 +21,19 @@ export default function TabLayout() {
       <Tabs.Screen
         name="index"
         options={{
-          title: "Home",
-          tabBarIcon: ({ size, color }) => <Home size={size} color={color} />,
+          title: "Discussions",
+          tabBarIcon: ({ size, color }) => (
+            <MessageCircle size={size} color={color} />
+          ),
+        }}
+      />
+      <Tabs.Screen
+        name="planning"
+        options={{
+          title: "Planning",
+          tabBarIcon: ({ size, color }) => (
+            <Calendar size={size} color={color} />
+          ),
         }}
       />
       <Tabs.Screen
diff --git a/xtablo-expo/app/(home)/(tabs)/planning.tsx b/xtablo-expo/app/(home)/(tabs)/planning.tsx
new file mode 100644
index 0000000..2dfc85e
--- /dev/null
+++ b/xtablo-expo/app/(home)/(tabs)/planning.tsx
@@ -0,0 +1,1360 @@
+import {
+  View,
+  StyleSheet,
+  ScrollView,
+  Text,
+  TouchableOpacity,
+  FlatList,
+  Modal,
+  TextInput,
+  Alert,
+} from "react-native";
+import { useState } from "react";
+import { Card } from "@rn-vui/themed";
+import {
+  Calendar as CalendarIcon,
+  Clock,
+  MapPin,
+  Plus,
+  ChevronLeft,
+  ChevronRight,
+  ChevronDown,
+  Check,
+  Table,
+  Grid3x3,
+  Rows3,
+  X,
+  Save,
+} from "lucide-react-native";
+import { useEventsByTablo, useCreateEvent } from "@/hooks/events";
+import { EventAndTablo, EventInsert } from "@/types/events.types";
+import { useTablosList } from "@/hooks/tablos";
+import { UserTablo } from "@/types/tablos.types";
+
+type ViewMode = "month" | "week";
+
+const daysOfWeek = ["L", "M", "M", "J", "V", "S", "D"];
+const months = [
+  "Janvier",
+  "Février",
+  "Mars",
+  "Avril",
+  "Mai",
+  "Juin",
+  "Juillet",
+  "Août",
+  "Septembre",
+  "Octobre",
+  "Novembre",
+  "Décembre",
+];
+
+const getDateFormatted = (date: Date) => {
+  // Format date as YYYY-MM-DD using local time (avoiding timezone issues)
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const day = String(date.getDate()).padStart(2, "0");
+  console.log({ year, month, day });
+  return `${year}-${month}-${day}`;
+};
+
+export default function PlanningScreen() {
+  const [selectedDate, setSelectedDate] = useState(new Date());
+  const [currentMonth, setCurrentMonth] = useState(new Date());
+  const [showTabloSelector, setShowTabloSelector] = useState(false);
+  const [selectedTablo, setSelectedTablo] = useState<UserTablo | null>(null);
+  const [viewMode, setViewMode] = useState<ViewMode>("month");
+  const [showCreateEventModal, setShowCreateEventModal] = useState(false);
+  const [newEvent, setNewEvent] = useState<Omit<EventInsert, "created_by">>({
+    title: "",
+    start_date: getDateFormatted(new Date()),
+    start_time: "09:00",
+    tablo_id: "",
+  });
+  const { data: events } = useEventsByTablo(null);
+  const { data: tablos } = useTablosList();
+  const createEvent = useCreateEvent();
+
+  const filteredEvents: EventAndTablo[] =
+    (selectedTablo === null
+      ? events
+      : events?.filter((event) => event.tablo_id === selectedTablo.id)) || [];
+
+  const generateCalendarDays = () => {
+    const year = currentMonth.getFullYear();
+    const month = currentMonth.getMonth();
+    const firstDay = new Date(year, month, 1);
+    const lastDay = new Date(year, month + 1, 0);
+    const startDate = new Date(firstDay);
+    startDate.setDate(startDate.getDate() - firstDay.getDay() + 1);
+
+    const days = [];
+    for (let i = 0; i < 42; i++) {
+      const date = new Date(startDate);
+      date.setDate(startDate.getDate() + i);
+      days.push(date);
+    }
+    return days;
+  };
+
+  const generateWeekDays = () => {
+    const startOfWeek = new Date(selectedDate);
+    const day = startOfWeek.getDay();
+    const diff = startOfWeek.getDate() - day + (day === 0 ? -6 : 1); // Adjust when day is Sunday
+    startOfWeek.setDate(diff);
+
+    const days = [];
+    for (let i = 0; i < 7; i++) {
+      const date = new Date(startOfWeek);
+      date.setDate(startOfWeek.getDate() + i);
+      days.push(date);
+    }
+    return days;
+  };
+
+  const navigateMonth = (direction: "prev" | "next") => {
+    const newDate = new Date(currentMonth);
+    newDate.setMonth(currentMonth.getMonth() + (direction === "next" ? 1 : -1));
+    setCurrentMonth(newDate);
+  };
+
+  const navigateWeek = (direction: "prev" | "next") => {
+    const newDate = new Date(selectedDate);
+    newDate.setDate(selectedDate.getDate() + (direction === "next" ? 7 : -7));
+    setSelectedDate(newDate);
+  };
+
+  const isToday = (date: Date) => {
+    const today = new Date();
+    return date.toDateString() === today.toDateString();
+  };
+
+  const isCurrentMonth = (date: Date) => {
+    return date.getMonth() === currentMonth.getMonth();
+  };
+
+  const isSelected = (date: Date) => {
+    return date.toDateString() === selectedDate.toDateString();
+  };
+
+  const getEventsForDate = (date: Date) => {
+    const dateString = date.toISOString().split("T")[0];
+    return filteredEvents.filter((event) => event.start_date === dateString);
+  };
+
+  const selectTablo = (tablo: UserTablo | null) => {
+    setSelectedTablo(tablo);
+    setShowTabloSelector(false);
+  };
+
+  const openCreateEventModal = () => {
+    setNewEvent({
+      title: "",
+      start_date: getDateFormatted(selectedDate),
+      start_time: "09:00",
+      tablo_id: selectedTablo?.id || "",
+    });
+    setShowCreateEventModal(true);
+  };
+
+  const handleCreateEvent = () => {
+    if (!newEvent.title.trim()) {
+      Alert.alert("Erreur", "Veuillez saisir un titre pour l'événement");
+      return;
+    }
+    if (!newEvent.tablo_id) {
+      Alert.alert("Erreur", "Veuillez sélectionner un tablo");
+      return;
+    }
+    console.log({ newEvent });
+    createEvent({
+      ...newEvent,
+      start_date: newEvent.start_date,
+      start_time: newEvent.start_time,
+    });
+    setShowCreateEventModal(false);
+  };
+
+  const colorMap: Record<string, string> = {
+    "bg-blue-500": "#3b82f6",
+    "bg-green-500": "#10b981",
+    "bg-red-500": "#ef4444",
+    "bg-yellow-500": "#f59e0b",
+    "bg-purple-500": "#8b5cf6",
+    "bg-pink-500": "#ec4899",
+    "bg-gray-500": "#6b7280",
+    "bg-orange-500": "#f5100b",
+    "bg-teal-500": "#0d9488",
+    "bg-indigo-500": "#6366f1",
+    "bg-lime-500": "#84cc16",
+    "bg-emerald-500": "#10b981",
+    "bg-cyan-500": "#06b6d4",
+    "bg-fuchsia-500": "#d946ef",
+  };
+
+  const renderTabloOption = ({ item }: { item: UserTablo }) => (
+    <TouchableOpacity
+      style={styles.tabloOption}
+      onPress={() => selectTablo(item)}
+    >
+      <View style={styles.tabloOptionLeft}>
+        <View
+          style={[
+            styles.tabloColorDot,
+            {
+              backgroundColor: colorMap[item.color ?? "bg-gray-500"],
+            },
+          ]}
+        />
+        <View style={styles.tabloOptionContent}>
+          <Text style={styles.tabloOptionName}>{item.name}</Text>
+        </View>
+      </View>
+      {selectedTablo?.id === item.id && <Check size={20} color="#3b82f6" />}
+    </TouchableOpacity>
+  );
+
+  const renderEvent = ({ item }: { item: EventAndTablo }) => (
+    <TouchableOpacity style={styles.eventCard}>
+      <View
+        style={[styles.eventColorBar, { backgroundColor: item.tablo_color }]}
+      />
+      <View style={styles.eventContent}>
+        <Text style={styles.eventTitle}>{item.title}</Text>
+        <View style={styles.eventDetails}>
+          <View style={styles.eventDetailItem}>
+            <Clock size={14} color="#6b7280" />
+            <Text style={styles.eventDetailText}>
+              {item.start_time?.substring(0, 5)}
+            </Text>
+          </View>
+          <View style={styles.eventDetailItem}>
+            <MapPin size={14} color="#6b7280" />
+            <Text style={styles.eventDetailText}>{item.tablo_name}</Text>
+          </View>
+        </View>
+      </View>
+    </TouchableOpacity>
+  );
+
+  const renderCalendarDay = (date: Date, index: number) => (
+    <TouchableOpacity
+      key={index}
+      style={[
+        styles.dayContainer,
+        isSelected(date) && styles.selectedDay,
+        isToday(date) && styles.todayDay,
+        isSelected(date) && isToday(date) && styles.todaySelectedDay,
+      ]}
+      onPress={() => setSelectedDate(date)}
+    >
+      <Text
+        style={[
+          styles.dayText,
+          !isCurrentMonth(date) && styles.inactiveDayText,
+          isSelected(date) && styles.selectedDayText,
+          isToday(date) && !isSelected(date) && styles.todayDayText,
+        ]}
+      >
+        {date.getDate()}
+      </Text>
+      {getEventsForDate(date).length > 0 && <View style={styles.eventDot} />}
+    </TouchableOpacity>
+  );
+
+  const renderWeekDay = (date: Date, index: number) => {
+    const dayEvents = getEventsForDate(date);
+
+    return (
+      <View key={index} style={styles.weekDayColumn}>
+        <TouchableOpacity
+          style={[
+            styles.weekDayHeader,
+            isToday(date) && styles.todayWeekDay,
+            isSelected(date) && styles.selectedWeekDay,
+            isToday(date) && isSelected(date) && styles.todaySelectedWeekDay,
+          ]}
+          onPress={() => setSelectedDate(date)}
+        >
+          <Text
+            style={[
+              styles.weekDayName,
+              isSelected(date) && { color: "white" },
+              isToday(date) && isSelected(date) && { color: "white" },
+            ]}
+          >
+            {daysOfWeek[index]}
+          </Text>
+          <Text
+            style={[
+              styles.weekDayNumber,
+              isSelected(date) && styles.selectedWeekDayText,
+              isToday(date) && !isSelected(date) && styles.todayWeekDayText,
+              isToday(date) &&
+                isSelected(date) &&
+                styles.todaySelectedWeekDayText,
+            ]}
+          >
+            {date.getDate()}
+          </Text>
+        </TouchableOpacity>
+
+        <ScrollView
+          style={styles.weekDayEvents}
+          showsVerticalScrollIndicator={false}
+        >
+          {/* Circle indicators for all days */}
+          <View style={styles.weekEventCircles}>
+            {dayEvents.slice(0, 6).map((event, eventIndex) => (
+              <View
+                key={eventIndex}
+                style={[
+                  styles.weekEventCircle,
+                  {
+                    backgroundColor:
+                      colorMap[event.tablo_color ?? "bg-gray-500"],
+                  },
+                ]}
+              />
+            ))}
+            {dayEvents.length > 6 && (
+              <View style={styles.weekEventMoreCircle}>
+                <Text style={styles.weekEventMoreText}>
+                  +{dayEvents.length - 6}
+                </Text>
+              </View>
+            )}
+          </View>
+        </ScrollView>
+      </View>
+    );
+  };
+
+  const renderSelectedDayEvents = () => {
+    const selectedDayEvents = getEventsForDate(selectedDate);
+
+    return (
+      <View style={styles.selectedDayEventsContainer}>
+        <View style={styles.selectedDayHeader}>
+          <Text style={styles.selectedDayTitle}>
+            {selectedDate.toLocaleDateString("fr-FR", {
+              weekday: "long",
+              day: "numeric",
+              month: "long",
+            })}
+          </Text>
+          <Text style={styles.selectedDayEventsCount}>
+            {selectedDayEvents.length} événement
+            {selectedDayEvents.length > 1 ? "s" : ""}
+          </Text>
+        </View>
+
+        {selectedDayEvents.length > 0 ? (
+          <FlatList
+            data={selectedDayEvents}
+            renderItem={renderEvent}
+            keyExtractor={(item) => item.event_id}
+            scrollEnabled={false}
+            showsVerticalScrollIndicator={false}
+            contentContainerStyle={styles.selectedDayEventsList}
+          />
+        ) : (
+          <View style={styles.selectedDayEmptyState}>
+            <CalendarIcon size={40} color="#d1d5db" />
+            <Text style={styles.emptyStateTitle}>Aucun événement</Text>
+            <Text style={styles.emptyStateText}>
+              Vous n'avez aucun événement prévu pour cette date.
+            </Text>
+          </View>
+        )}
+      </View>
+    );
+  };
+
+  const calendarDays = generateCalendarDays();
+  const weekDays = generateWeekDays();
+  const todayEvents = getEventsForDate(selectedDate);
+
+  return (
+    <ScrollView style={styles.container} showsVerticalScrollIndicator={false}>
+      {/* Header */}
+      <View style={styles.header}>
+        <View>
+          <Text style={styles.headerTitle}>Planning</Text>
+          <Text style={styles.headerSubtitle}>
+            {viewMode === "month"
+              ? months[currentMonth.getMonth()] +
+                " " +
+                currentMonth.getFullYear()
+              : selectedDate.toLocaleDateString("fr-FR", {
+                  weekday: "long",
+                  year: "numeric",
+                  month: "long",
+                  day: "numeric",
+                })}
+          </Text>
+        </View>
+        <TouchableOpacity
+          style={styles.addButton}
+          onPress={openCreateEventModal}
+        >
+          <Plus size={24} color="white" />
+        </TouchableOpacity>
+      </View>
+
+      {/* View Mode Toggle */}
+      <View style={styles.viewModeContainer}>
+        <View style={styles.viewModeToggle}>
+          <TouchableOpacity
+            style={[
+              styles.viewModeButton,
+              viewMode === "month" && styles.activeViewModeButton,
+            ]}
+            onPress={() => setViewMode("month")}
+          >
+            <Grid3x3
+              size={18}
+              color={viewMode === "month" ? "white" : "#6b7280"}
+            />
+            <Text
+              style={[
+                styles.viewModeText,
+                viewMode === "month" && styles.activeViewModeText,
+              ]}
+            >
+              Mois
+            </Text>
+          </TouchableOpacity>
+          <TouchableOpacity
+            style={[
+              styles.viewModeButton,
+              viewMode === "week" && styles.activeViewModeButton,
+            ]}
+            onPress={() => setViewMode("week")}
+          >
+            <Rows3
+              size={18}
+              color={viewMode === "week" ? "white" : "#6b7280"}
+            />
+            <Text
+              style={[
+                styles.viewModeText,
+                viewMode === "week" && styles.activeViewModeText,
+              ]}
+            >
+              Semaine
+            </Text>
+          </TouchableOpacity>
+        </View>
+      </View>
+
+      {/* Tablo Selector */}
+      <View style={styles.tabloSelectorContainer}>
+        <TouchableOpacity
+          style={styles.tabloSelector}
+          onPress={() => setShowTabloSelector(true)}
+        >
+          <View style={styles.tabloSelectorLeft}>
+            <Table size={20} color="#6b7280" />
+            <View style={styles.tabloSelectorContent}>
+              <Text style={styles.tabloSelectorLabel}>Tablo actuel</Text>
+              <View style={styles.tabloSelectorRow}>
+                <View
+                  style={[
+                    styles.tabloColorDot,
+                    {
+                      backgroundColor:
+                        colorMap[selectedTablo?.color ?? "bg-gray-500"],
+                    },
+                  ]}
+                />
+                <Text style={styles.tabloSelectorName}>
+                  {selectedTablo?.name ?? "Tous les tablos"}
+                </Text>
+              </View>
+            </View>
+          </View>
+          <ChevronDown size={20} color="#6b7280" />
+        </TouchableOpacity>
+      </View>
+
+      {/* Calendar/Week View */}
+      <Card containerStyle={styles.calendarCard}>
+        <View style={styles.calendarHeader}>
+          <TouchableOpacity
+            onPress={() =>
+              viewMode === "month"
+                ? navigateMonth("prev")
+                : navigateWeek("prev")
+            }
+          >
+            <ChevronLeft size={24} color="#3b82f6" />
+          </TouchableOpacity>
+          <Text style={styles.calendarTitle}>
+            {viewMode === "month"
+              ? `${
+                  months[currentMonth.getMonth()]
+                } ${currentMonth.getFullYear()}`
+              : `Semaine du ${weekDays[0].getDate()} ${
+                  months[weekDays[0].getMonth()]
+                }`}
+          </Text>
+          <TouchableOpacity
+            onPress={() =>
+              viewMode === "month"
+                ? navigateMonth("next")
+                : navigateWeek("next")
+            }
+          >
+            <ChevronRight size={24} color="#3b82f6" />
+          </TouchableOpacity>
+        </View>
+
+        {viewMode === "month" ? (
+          <>
+            <View style={styles.weekHeader}>
+              {daysOfWeek.map((day, i) => (
+                <Text key={`${day}-${i}`} style={styles.weekDay}>
+                  {day}
+                </Text>
+              ))}
+            </View>
+
+            <View style={styles.calendarGrid}>
+              {calendarDays.map((date, index) =>
+                renderCalendarDay(date, index)
+              )}
+            </View>
+          </>
+        ) : (
+          <>
+            <View style={styles.weekView}>
+              {weekDays.map((date, index) => renderWeekDay(date, index))}
+            </View>
+            {renderSelectedDayEvents()}
+          </>
+        )}
+      </Card>
+
+      {/* Today's Events (only shown in month view) */}
+      {viewMode === "month" && (
+        <View style={styles.eventsSection}>
+          <View style={styles.eventsSectionHeader}>
+            <CalendarIcon size={20} color="#3b82f6" />
+            <Text style={styles.eventsSectionTitle}>
+              Événements du jour ({todayEvents.length})
+            </Text>
+          </View>
+
+          {todayEvents.length > 0 ? (
+            <FlatList
+              data={todayEvents}
+              renderItem={renderEvent}
+              keyExtractor={(item) => item.event_id}
+              scrollEnabled={false}
+              showsVerticalScrollIndicator={false}
+            />
+          ) : (
+            <View style={styles.selectedDayEmptyState}>
+              <CalendarIcon size={40} color="#d1d5db" />
+              <Text style={styles.emptyStateTitle}>Aucun événement</Text>
+              <Text style={styles.emptyStateText}>
+                Vous n'avez aucun événement prévu pour cette date.
+              </Text>
+            </View>
+          )}
+        </View>
+      )}
+
+      {/* Tablo Selector Modal */}
+      <Modal
+        visible={showTabloSelector}
+        transparent={true}
+        animationType="fade"
+        onRequestClose={() => setShowTabloSelector(false)}
+      >
+        <TouchableOpacity
+          style={styles.modalOverlay}
+          activeOpacity={1}
+          onPress={() => setShowTabloSelector(false)}
+        >
+          <View style={styles.modalContent}>
+            <View style={styles.modalHeader}>
+              <Text style={styles.modalTitle}>Choisir un tablo</Text>
+            </View>
+            <FlatList
+              data={tablos ?? []}
+              renderItem={renderTabloOption}
+              keyExtractor={(item) => item.id}
+              showsVerticalScrollIndicator={false}
+              ListHeaderComponent={
+                <TouchableOpacity
+                  style={styles.tabloOption}
+                  onPress={() => selectTablo(null)}
+                >
+                  <View style={styles.tabloOptionLeft}>
+                    <View
+                      style={[
+                        styles.tabloColorDot,
+                        {
+                          backgroundColor: "#6b7280",
+                        },
+                      ]}
+                    />
+                    <View style={styles.tabloOptionContent}>
+                      <Text style={styles.tabloOptionName}>
+                        Tous les tablos
+                      </Text>
+                    </View>
+                  </View>
+                  {selectedTablo === null && (
+                    <Check size={20} color="#3b82f6" />
+                  )}
+                </TouchableOpacity>
+              }
+            />
+          </View>
+        </TouchableOpacity>
+      </Modal>
+
+      <Modal
+        visible={showCreateEventModal}
+        transparent={true}
+        animationType="slide"
+        onRequestClose={() => setShowCreateEventModal(false)}
+      >
+        <View style={styles.createEventModalOverlay}>
+          <View style={styles.createEventModalContent}>
+            <View style={styles.createEventModalHeader}>
+              <Text style={styles.createEventModalTitle}>Nouvel événement</Text>
+              <TouchableOpacity
+                onPress={() => setShowCreateEventModal(false)}
+                style={styles.createEventCloseButton}
+              >
+                <X size={24} color="#6b7280" />
+              </TouchableOpacity>
+            </View>
+
+            <ScrollView
+              style={styles.createEventForm}
+              showsVerticalScrollIndicator={false}
+            >
+              {/* Title Field */}
+              <View style={styles.formField}>
+                <Text style={styles.formLabel}>Titre *</Text>
+                <TextInput
+                  style={styles.formInput}
+                  value={newEvent.title}
+                  onChangeText={(text) =>
+                    setNewEvent({ ...newEvent, title: text })
+                  }
+                  placeholder="Titre de l'événement"
+                  placeholderTextColor="#9ca3af"
+                />
+              </View>
+
+              {/* Date Field */}
+              <View style={styles.formField}>
+                <Text style={styles.formLabel}>Date</Text>
+                <TextInput
+                  style={styles.formInput}
+                  value={newEvent.start_date}
+                  onChangeText={(text) =>
+                    setNewEvent({ ...newEvent, start_date: text })
+                  }
+                  placeholder="YYYY-MM-DD"
+                  placeholderTextColor="#9ca3af"
+                />
+              </View>
+
+              {/* Time Field */}
+              <View style={styles.formField}>
+                <Text style={styles.formLabel}>Heure</Text>
+                <TextInput
+                  style={styles.formInput}
+                  value={newEvent.start_time}
+                  onChangeText={(text) =>
+                    setNewEvent({ ...newEvent, start_time: text })
+                  }
+                  placeholder="HH:MM"
+                  placeholderTextColor="#9ca3af"
+                />
+              </View>
+
+              {/* Tablo Selector */}
+              <View style={styles.formField}>
+                <Text style={styles.formLabel}>Tablo *</Text>
+                <FlatList
+                  data={tablos ?? []}
+                  renderItem={({ item }) => (
+                    <TouchableOpacity
+                      style={[
+                        styles.tabloOptionInForm,
+                        newEvent.tablo_id === item.id &&
+                          styles.selectedTabloOptionInForm,
+                      ]}
+                      onPress={() =>
+                        setNewEvent({ ...newEvent, tablo_id: item.id })
+                      }
+                    >
+                      <View style={styles.tabloOptionLeft}>
+                        <View
+                          style={[
+                            styles.tabloColorDot,
+                            {
+                              backgroundColor:
+                                colorMap[item.color ?? "bg-gray-500"],
+                            },
+                          ]}
+                        />
+                        <Text
+                          style={[
+                            styles.tabloOptionNameInForm,
+                            newEvent.tablo_id === item.id &&
+                              styles.selectedTabloOptionNameInForm,
+                          ]}
+                        >
+                          {item.name}
+                        </Text>
+                      </View>
+                      {newEvent.tablo_id === item.id && (
+                        <Check size={20} color="#3b82f6" />
+                      )}
+                    </TouchableOpacity>
+                  )}
+                  keyExtractor={(item) => item.id}
+                  showsVerticalScrollIndicator={false}
+                  scrollEnabled={false}
+                  style={styles.tabloListInForm}
+                />
+              </View>
+            </ScrollView>
+
+            <View style={styles.createEventModalActions}>
+              <TouchableOpacity
+                style={styles.cancelButton}
+                onPress={() => setShowCreateEventModal(false)}
+              >
+                <Text style={styles.cancelButtonText}>Annuler</Text>
+              </TouchableOpacity>
+              <TouchableOpacity
+                style={styles.saveButton}
+                onPress={handleCreateEvent}
+              >
+                <Save size={20} color="white" />
+                <Text style={styles.saveButtonText}>Enregistrer</Text>
+              </TouchableOpacity>
+            </View>
+          </View>
+        </View>
+      </Modal>
+    </ScrollView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: "#f8fafc",
+  },
+  header: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    paddingHorizontal: 20,
+    paddingTop: 60,
+    paddingBottom: 20,
+  },
+  headerTitle: {
+    fontSize: 28,
+    fontWeight: "bold",
+    color: "#1f2937",
+    marginBottom: 4,
+  },
+  headerSubtitle: {
+    fontSize: 16,
+    color: "#6b7280",
+    textTransform: "capitalize",
+  },
+  addButton: {
+    width: 48,
+    height: 48,
+    borderRadius: 24,
+    backgroundColor: "#3b82f6",
+    justifyContent: "center",
+    alignItems: "center",
+    shadowColor: "#3b82f6",
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.3,
+    shadowRadius: 8,
+    elevation: 6,
+  },
+  viewModeContainer: {
+    paddingHorizontal: 20,
+    marginBottom: 20,
+  },
+  viewModeToggle: {
+    flexDirection: "row",
+    backgroundColor: "#f3f4f6",
+    borderRadius: 12,
+    padding: 4,
+  },
+  viewModeButton: {
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    paddingVertical: 8,
+    paddingHorizontal: 12,
+    borderRadius: 8,
+    gap: 6,
+  },
+  activeViewModeButton: {
+    backgroundColor: "#3b82f6",
+  },
+  viewModeText: {
+    fontSize: 14,
+    fontWeight: "500",
+    color: "#6b7280",
+  },
+  activeViewModeText: {
+    color: "white",
+  },
+  tabloSelectorContainer: {
+    paddingHorizontal: 20,
+    marginBottom: 20,
+  },
+  tabloSelector: {
+    backgroundColor: "white",
+    borderRadius: 12,
+    padding: 16,
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    elevation: 3,
+  },
+  tabloSelectorLeft: {
+    flexDirection: "row",
+    alignItems: "center",
+    flex: 1,
+  },
+  tabloSelectorContent: {
+    marginLeft: 12,
+    flex: 1,
+  },
+  tabloSelectorLabel: {
+    fontSize: 12,
+    color: "#6b7280",
+    marginBottom: 2,
+  },
+  tabloSelectorRow: {
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  tabloSelectorName: {
+    fontSize: 16,
+    fontWeight: "600",
+    color: "#1f2937",
+    marginLeft: 8,
+  },
+  tabloColorDot: {
+    width: 12,
+    height: 12,
+    borderRadius: 6,
+  },
+  calendarCard: {
+    marginHorizontal: 20,
+    marginBottom: 20,
+    borderRadius: 16,
+    padding: 20,
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.1,
+    shadowRadius: 8,
+    elevation: 4,
+    borderWidth: 0,
+  },
+  calendarHeader: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    marginBottom: 20,
+  },
+  calendarTitle: {
+    fontSize: 18,
+    fontWeight: "600",
+    color: "#1f2937",
+  },
+  weekHeader: {
+    flexDirection: "row",
+    justifyContent: "space-around",
+    marginBottom: 16,
+    paddingBottom: 12,
+    borderBottomWidth: 1,
+    borderBottomColor: "#e5e7eb",
+  },
+  weekDay: {
+    fontSize: 14,
+    fontWeight: "500",
+    color: "#6b7280",
+    textAlign: "center",
+    width: 40,
+  },
+  calendarGrid: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+  },
+  dayContainer: {
+    width: "14.28%",
+    height: 40,
+    justifyContent: "center",
+    alignItems: "center",
+    position: "relative",
+  },
+  dayText: {
+    fontSize: 16,
+    color: "#1f2937",
+    fontWeight: "500",
+  },
+  inactiveDayText: {
+    color: "#d1d5db",
+  },
+  selectedDay: {
+    backgroundColor: "#3b82f6",
+    borderRadius: 20,
+  },
+  selectedDayText: {
+    color: "white",
+    fontWeight: "600",
+  },
+  todaySelectedDay: {
+    backgroundColor: "#f5100b",
+  },
+  todayDay: {
+    backgroundColor: "#fef3c7",
+    borderRadius: 20,
+  },
+  todayDayText: {
+    color: "#f59e0b",
+    fontWeight: "600",
+  },
+  todaySelectedDayText: {
+    color: "white",
+    fontWeight: "600",
+  },
+  eventDot: {
+    position: "absolute",
+    bottom: 4,
+    width: 6,
+    height: 6,
+    borderRadius: 3,
+    backgroundColor: "#ef4444",
+  },
+  // Week View Styles
+  weekView: {
+    flexDirection: "row",
+    height: 100,
+  },
+  weekDayColumn: {
+    flex: 1,
+    marginHorizontal: 2,
+  },
+  weekDayHeader: {
+    backgroundColor: "#f8fafc",
+    borderRadius: 8,
+    padding: 8,
+    alignItems: "center",
+    marginBottom: 8,
+  },
+  selectedWeekDay: {
+    backgroundColor: "#3b82f6",
+  },
+  todaySelectedWeekDay: {
+    backgroundColor: "#f5100b",
+  },
+  todayWeekDay: {
+    backgroundColor: "#fef3c7",
+  },
+  weekDayName: {
+    fontSize: 12,
+    color: "#6b7280",
+    fontWeight: "500",
+  },
+  weekDayNumber: {
+    fontSize: 16,
+    color: "#1f2937",
+    fontWeight: "600",
+    marginTop: 2,
+  },
+  selectedWeekDayText: {
+    color: "white",
+  },
+  todayWeekDayText: {
+    color: "#f59e0b",
+  },
+  todaySelectedWeekDayText: {
+    color: "white",
+  },
+  weekDayEvents: {
+    flex: 1,
+  },
+  weekEventCard: {
+    backgroundColor: "white",
+    borderRadius: 6,
+    marginBottom: 4,
+    flexDirection: "row",
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.1,
+    shadowRadius: 2,
+    elevation: 2,
+  },
+  weekEventBar: {
+    width: 3,
+    borderTopLeftRadius: 6,
+    borderBottomLeftRadius: 6,
+  },
+  weekEventContent: {
+    flex: 1,
+    padding: 8,
+  },
+  weekEventTitle: {
+    fontSize: 11,
+    fontWeight: "600",
+    color: "#1f2937",
+    marginBottom: 2,
+  },
+  weekEventTime: {
+    fontSize: 7,
+    color: "#6b7280",
+  },
+  weekEventTablo: {
+    fontSize: 10,
+    color: "#6b7280",
+    marginTop: 2,
+  },
+  weekEventCircles: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    justifyContent: "center",
+    alignItems: "center",
+    marginTop: 4,
+  },
+  weekEventCircle: {
+    width: 10,
+    height: 10,
+    borderRadius: 5,
+    margin: 2,
+  },
+  weekEventMoreCircle: {
+    width: 20,
+    height: 20,
+    borderRadius: 10,
+    backgroundColor: "#e5e7eb",
+    justifyContent: "center",
+    alignItems: "center",
+    margin: 2,
+  },
+  weekEventMoreText: {
+    fontSize: 10,
+    color: "#6b7280",
+  },
+  weekEmptySlot: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    opacity: 0.5,
+  },
+  weekEmptyText: {
+    fontSize: 10,
+    color: "#9ca3af",
+    textAlign: "center",
+  },
+  eventsSection: {
+    paddingHorizontal: 20,
+    paddingBottom: 40,
+  },
+  eventsSectionHeader: {
+    flexDirection: "row",
+    alignItems: "center",
+    marginBottom: 16,
+  },
+  eventsSectionTitle: {
+    fontSize: 18,
+    fontWeight: "600",
+    color: "#1f2937",
+    marginLeft: 8,
+  },
+  eventCard: {
+    backgroundColor: "white",
+    borderRadius: 12,
+    marginBottom: 12,
+    flexDirection: "row",
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    elevation: 3,
+  },
+  eventColorBar: {
+    width: 4,
+    borderTopLeftRadius: 12,
+    borderBottomLeftRadius: 12,
+  },
+  eventContent: {
+    flex: 1,
+    padding: 16,
+  },
+  eventTitle: {
+    fontSize: 16,
+    fontWeight: "600",
+    color: "#1f2937",
+    marginBottom: 8,
+  },
+  eventDetails: {
+    gap: 6,
+  },
+  eventDetailItem: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+  },
+  eventDetailText: {
+    fontSize: 14,
+    color: "#6b7280",
+  },
+  emptyState: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    padding: 40,
+    borderRadius: 12,
+    borderWidth: 0,
+  },
+  emptyStateTitle: {
+    fontSize: 18,
+    fontWeight: "600",
+    color: "#6b7280",
+    marginTop: 8,
+    marginBottom: 8,
+  },
+  emptyStateText: {
+    fontSize: 14,
+    color: "#9ca3af",
+    textAlign: "center",
+    lineHeight: 20,
+  },
+  modalOverlay: {
+    flex: 1,
+    backgroundColor: "rgba(0, 0, 0, 0.5)",
+    justifyContent: "center",
+    alignItems: "center",
+    paddingHorizontal: 20,
+  },
+  modalContent: {
+    backgroundColor: "white",
+    borderRadius: 16,
+    width: "100%",
+    maxWidth: 400,
+    maxHeight: "70%",
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 10 },
+    shadowOpacity: 0.25,
+    shadowRadius: 20,
+    elevation: 10,
+  },
+  modalHeader: {
+    padding: 20,
+    borderBottomWidth: 1,
+    borderBottomColor: "#e5e7eb",
+  },
+  modalTitle: {
+    fontSize: 18,
+    fontWeight: "600",
+    color: "#1f2937",
+    textAlign: "center",
+  },
+  tabloOption: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    padding: 16,
+    borderBottomWidth: 1,
+    borderBottomColor: "#f3f4f6",
+  },
+  tabloOptionLeft: {
+    flexDirection: "row",
+    alignItems: "center",
+    flex: 1,
+  },
+  tabloOptionContent: {
+    marginLeft: 12,
+    flex: 1,
+  },
+  tabloOptionName: {
+    fontSize: 16,
+    fontWeight: "500",
+    color: "#1f2937",
+    marginBottom: 2,
+  },
+  tabloOptionCount: {
+    fontSize: 12,
+    color: "#6b7280",
+  },
+  selectedWeekDayColumn: {
+    flex: 1, // Make selected day column wider
+  },
+  selectedDayEventsContainer: {
+    marginTop: 8,
+    paddingHorizontal: 10,
+  },
+  selectedDayHeader: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    marginBottom: 12,
+  },
+  selectedDayTitle: {
+    fontSize: 18,
+    fontWeight: "600",
+    color: "#1f2937",
+  },
+  selectedDayEventsCount: {
+    fontSize: 14,
+    color: "#6b7280",
+  },
+  selectedDayEventsList: {
+    paddingBottom: 10,
+  },
+  selectedDayEmptyState: {
+    alignItems: "center",
+    padding: 40,
+    borderRadius: 12,
+    borderWidth: 0,
+  },
+  // Create Event Modal Styles
+  createEventModalOverlay: {
+    flex: 1,
+    backgroundColor: "rgba(0, 0, 0, 0.5)",
+    justifyContent: "flex-end",
+  },
+  createEventModalContent: {
+    backgroundColor: "white",
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20,
+    maxHeight: "90%",
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: -5 },
+    shadowOpacity: 0.25,
+    shadowRadius: 20,
+    elevation: 10,
+  },
+  createEventModalHeader: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    padding: 20,
+    borderBottomWidth: 1,
+    borderBottomColor: "#e5e7eb",
+  },
+  createEventModalTitle: {
+    fontSize: 20,
+    fontWeight: "600",
+    color: "#1f2937",
+  },
+  createEventCloseButton: {
+    padding: 4,
+  },
+  createEventForm: {
+    padding: 20,
+    maxHeight: 400,
+  },
+  formField: {
+    marginBottom: 20,
+  },
+  formLabel: {
+    fontSize: 16,
+    fontWeight: "500",
+    color: "#374151",
+    marginBottom: 8,
+  },
+  formInput: {
+    borderWidth: 1,
+    borderColor: "#d1d5db",
+    borderRadius: 8,
+    padding: 12,
+    fontSize: 16,
+    color: "#1f2937",
+    backgroundColor: "white",
+  },
+  tabloListInForm: {
+    borderWidth: 1,
+    borderColor: "#d1d5db",
+    borderRadius: 8,
+    backgroundColor: "white",
+    maxHeight: 150,
+  },
+  tabloOptionInForm: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    padding: 12,
+    borderBottomWidth: 1,
+    borderBottomColor: "#f3f4f6",
+  },
+  selectedTabloOptionInForm: {
+    backgroundColor: "#eff6ff",
+  },
+  tabloOptionNameInForm: {
+    fontSize: 16,
+    fontWeight: "500",
+    color: "#1f2937",
+    marginLeft: 8,
+  },
+  selectedTabloOptionNameInForm: {
+    color: "#3b82f6",
+  },
+  createEventModalActions: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    padding: 20,
+    borderTopWidth: 1,
+    borderTopColor: "#e5e7eb",
+    gap: 12,
+  },
+  cancelButton: {
+    flex: 1,
+    paddingVertical: 12,
+    paddingHorizontal: 20,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: "#d1d5db",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  cancelButtonText: {
+    fontSize: 16,
+    fontWeight: "500",
+    color: "#6b7280",
+  },
+  saveButton: {
+    flex: 1,
+    flexDirection: "row",
+    paddingVertical: 12,
+    paddingHorizontal: 20,
+    borderRadius: 8,
+    backgroundColor: "#3b82f6",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 8,
+  },
+  saveButtonText: {
+    fontSize: 16,
+    fontWeight: "500",
+    color: "white",
+  },
+});
diff --git a/xtablo-expo/app/(home)/(tabs)/profile.tsx b/xtablo-expo/app/(home)/(tabs)/profile.tsx
index e885189..dd38091 100644
--- a/xtablo-expo/app/(home)/(tabs)/profile.tsx
+++ b/xtablo-expo/app/(home)/(tabs)/profile.tsx
@@ -1,9 +1,25 @@
-import { View, StyleSheet } from "react-native";
+import {
+  View,
+  StyleSheet,
+  ScrollView,
+  Text,
+  TouchableOpacity,
+} from "react-native";
 import { useAuth } from "@/stores/auth";
-import { Avatar, Button, Input } from "@rn-vui/themed";
-import { Card, ListItem } from "@rn-vui/themed";
+import { Avatar, Input } from "@rn-vui/themed";
+import { Card } from "@rn-vui/themed";
 import { useState } from "react";
 import { useUser } from "@/providers/UserProvider";
+import { LinearGradient } from "expo-linear-gradient";
+import {
+  User,
+  Mail,
+  Edit3,
+  Check,
+  LogOut,
+  Settings,
+  Shield,
+} from "lucide-react-native";
 
 export default function ProfileScreen() {
   const signOut = useAuth((state) => state.signOut);
@@ -12,145 +28,334 @@ export default function ProfileScreen() {
   const [displayName, setDisplayName] = useState(user.name || "");
   const [isEditing, setIsEditing] = useState(false);
 
+  const handleSaveDisplayName = () => {
+    // TODO: Implémenter la fonctionnalité de sauvegarde
+    setIsEditing(false);
+  };
+
+  const menuItems = [
+    {
+      icon: Settings,
+      title: "Paramètres du compte",
+      subtitle: "Gérez vos préférences de compte",
+      onPress: () => console.log("Paramètres"),
+    },
+    {
+      icon: Shield,
+      title: "Confidentialité et sécurité",
+      subtitle: "Contrôlez vos paramètres de confidentialité",
+      onPress: () => console.log("Confidentialité"),
+    },
+  ];
+
   return (
-    <View style={styles.container}>
-      <Card containerStyle={styles.card}>
-        <Avatar
-          size="xlarge"
-          rounded
-          icon={{ name: "user", type: "font-awesome" }}
-          containerStyle={styles.avatar}
-        />
-
-        <Card.Title style={styles.cardTitle}>{user.name}</Card.Title>
-        <Card.Divider />
-
-        <ListItem key="email" bottomDivider containerStyle={styles.listItem}>
-          <ListItem.Content>
-            <ListItem.Title style={styles.listItemTitle}>Email</ListItem.Title>
-            <ListItem.Subtitle style={styles.listItemSubtitle}>
-              {user.email}
-            </ListItem.Subtitle>
-          </ListItem.Content>
-        </ListItem>
-
-        <ListItem
-          key="display-name"
-          bottomDivider
-          containerStyle={styles.listItem}
-        >
-          <ListItem.Content>
-            <ListItem.Title style={styles.listItemTitle}>
-              Display Name
-            </ListItem.Title>
-            {isEditing ? (
-              <Input
-                placeholder="Enter display name"
-                value={displayName}
-                onChangeText={setDisplayName}
-                containerStyle={styles.inputContainer}
-                inputStyle={styles.inputText}
-                autoFocus
-              />
-            ) : (
-              <ListItem.Subtitle style={styles.listItemSubtitle}>
-                {user.name || "Not Set"}
-              </ListItem.Subtitle>
-            )}
-          </ListItem.Content>
-          <Button
-            icon={{
-              name: isEditing ? "check" : "edit",
-              type: "font-awesome",
-              size: 18,
-            }}
-            type="clear"
-            onPress={() => {
-              if (isEditing) {
-                // handleSaveDisplayName();
-              } else {
-                setDisplayName(user.name ?? "");
-                setIsEditing(true);
-              }
-            }}
+    <ScrollView style={styles.container} showsVerticalScrollIndicator={false}>
+      <LinearGradient
+        colors={["#1e3a8a", "#3b82f6", "#60a5fa"]}
+        style={styles.headerGradient}
+        start={{ x: 0, y: 0 }}
+        end={{ x: 1, y: 1 }}
+      >
+        <View style={styles.headerContent}>
+          <Avatar
+            size={120}
+            rounded
+            source={user.avatar_url ? { uri: user.avatar_url } : undefined}
+            icon={
+              !user.avatar_url
+                ? { name: "user", type: "font-awesome" }
+                : undefined
+            }
+            containerStyle={styles.avatar}
           />
-        </ListItem>
+          <Text style={styles.userName}>{user.name || "Utilisateur"}</Text>
+          <Text style={styles.userEmail}>{user.email}</Text>
+        </View>
+      </LinearGradient>
 
-        <Button
-          title="Sign Out"
-          onPress={signOut}
-          buttonStyle={styles.signOutButton}
-          titleStyle={styles.signOutText}
-          icon={{
-            name: "sign-out",
-            type: "font-awesome",
-            color: "white",
-            size: 18,
-          }}
-          iconRight
-        />
-      </Card>
-    </View>
+      {/* Contenu principal */}
+      <View style={styles.content}>
+        {/* Carte d'informations personnelles */}
+        <Card containerStyle={styles.mainCard}>
+          <View style={styles.cardHeader}>
+            <User size={20} color="#3b82f6" />
+            <Text style={styles.cardHeaderTitle}>
+              Informations personnelles
+            </Text>
+          </View>
+
+          <View style={styles.infoItem}>
+            <View style={styles.infoIconContainer}>
+              <Mail size={18} color="#6b7280" />
+            </View>
+            <View style={styles.infoContent}>
+              <Text style={styles.infoLabel}>Adresse e-mail</Text>
+              <Text style={styles.infoValue}>{user.email}</Text>
+            </View>
+          </View>
+
+          <View style={styles.divider} />
+
+          <View style={styles.infoItem}>
+            <View style={styles.infoIconContainer}>
+              <User size={18} color="#6b7280" />
+            </View>
+            <View style={styles.infoContent}>
+              <Text style={styles.infoLabel}>Nom d'affichage</Text>
+              {isEditing ? (
+                <Input
+                  placeholder="Entrez le nom d'affichage"
+                  value={displayName}
+                  onChangeText={setDisplayName}
+                  containerStyle={styles.inputContainer}
+                  inputStyle={styles.inputText}
+                  autoFocus
+                />
+              ) : (
+                <Text style={styles.infoValue}>
+                  {user.name || "Non défini"}
+                </Text>
+              )}
+            </View>
+            <TouchableOpacity
+              style={styles.editButton}
+              onPress={() => {
+                if (isEditing) {
+                  handleSaveDisplayName();
+                } else {
+                  setDisplayName(user.name ?? "");
+                  setIsEditing(true);
+                }
+              }}
+            >
+              {isEditing ? (
+                <Check size={18} color="#10b981" />
+              ) : (
+                <Edit3 size={18} color="#6b7280" />
+              )}
+            </TouchableOpacity>
+          </View>
+        </Card>
+
+        {/* Éléments de menu */}
+        <Card containerStyle={styles.menuCard}>
+          <View style={styles.cardHeader}>
+            <Settings size={20} color="#3b82f6" />
+            <Text style={styles.cardHeaderTitle}>Préférences</Text>
+          </View>
+
+          {menuItems.map((item, index) => (
+            <View key={index}>
+              <TouchableOpacity style={styles.menuItem} onPress={item.onPress}>
+                <View style={styles.menuIconContainer}>
+                  <item.icon size={20} color="#6b7280" />
+                </View>
+                <View style={styles.menuContent}>
+                  <Text style={styles.menuTitle}>{item.title}</Text>
+                  <Text style={styles.menuSubtitle}>{item.subtitle}</Text>
+                </View>
+                <Text style={styles.menuArrow}>›</Text>
+              </TouchableOpacity>
+              {index < menuItems.length - 1 && <View style={styles.divider} />}
+            </View>
+          ))}
+        </Card>
+
+        {/* Bouton de déconnexion */}
+        <TouchableOpacity style={styles.signOutContainer} onPress={signOut}>
+          <LinearGradient
+            colors={["#ef4444", "#dc2626"]}
+            style={styles.signOutGradient}
+            start={{ x: 0, y: 0 }}
+            end={{ x: 1, y: 0 }}
+          >
+            <LogOut size={20} color="white" />
+            <Text style={styles.signOutText}>Se déconnecter</Text>
+          </LinearGradient>
+        </TouchableOpacity>
+      </View>
+    </ScrollView>
   );
 }
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    padding: 15,
-    backgroundColor: "#f8f9fa",
+    backgroundColor: "#f8fafc",
   },
-  card: {
-    borderRadius: 10,
+  headerGradient: {
+    paddingTop: 60,
+    paddingBottom: 40,
+    paddingHorizontal: 20,
+  },
+  headerContent: {
+    alignItems: "center",
+  },
+  avatar: {
+    marginBottom: 16,
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.3,
+    shadowRadius: 8,
+    elevation: 8,
+    borderWidth: 4,
+    borderColor: "white",
+  },
+  userName: {
+    fontSize: 24,
+    fontWeight: "bold",
+    color: "white",
+    marginBottom: 4,
+    textAlign: "center",
+  },
+  userEmail: {
+    fontSize: 16,
+    color: "rgba(255, 255, 255, 0.9)",
+    textAlign: "center",
+  },
+  content: {
     padding: 20,
-    margin: 0,
+    marginTop: -20,
+  },
+  mainCard: {
+    borderRadius: 16,
+    padding: 0,
+    marginBottom: 20,
     shadowColor: "#000",
     shadowOffset: { width: 0, height: 2 },
     shadowOpacity: 0.1,
-    shadowRadius: 4,
-    elevation: 3,
+    shadowRadius: 8,
+    elevation: 4,
+    borderWidth: 0,
   },
-  avatar: {
+  menuCard: {
+    borderRadius: 16,
+    padding: 0,
     marginBottom: 20,
-    backgroundColor: "#e0e0e0",
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.1,
+    shadowRadius: 8,
+    elevation: 4,
+    borderWidth: 0,
   },
-  cardTitle: {
-    fontSize: 20,
-    fontWeight: "bold",
-    marginBottom: 15,
+  cardHeader: {
+    flexDirection: "row",
+    alignItems: "center",
+    padding: 20,
+    paddingBottom: 16,
   },
-  listItem: {
-    paddingVertical: 15,
-    width: "100%",
-  },
-  listItemTitle: {
+  cardHeaderTitle: {
+    fontSize: 18,
     fontWeight: "600",
-    marginBottom: 5,
-    color: "#555",
+    color: "#1f2937",
+    marginLeft: 12,
   },
-  listItemSubtitle: {
-    color: "#333",
+  infoItem: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingHorizontal: 20,
+    paddingVertical: 16,
+  },
+  infoIconContainer: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    backgroundColor: "#f3f4f6",
+    justifyContent: "center",
+    alignItems: "center",
+    marginRight: 12,
+  },
+  infoContent: {
+    flex: 1,
+  },
+  infoLabel: {
+    fontSize: 14,
+    color: "#6b7280",
+    marginBottom: 4,
+    fontWeight: "500",
+  },
+  infoValue: {
     fontSize: 16,
+    color: "#1f2937",
+    fontWeight: "500",
+  },
+  editButton: {
+    width: 36,
+    height: 36,
+    borderRadius: 18,
+    backgroundColor: "#f3f4f6",
+    justifyContent: "center",
+    alignItems: "center",
   },
   inputContainer: {
     paddingHorizontal: 0,
     height: 40,
+    marginTop: 4,
   },
   inputText: {
     fontSize: 16,
+    color: "#1f2937",
   },
-  signOutButton: {
-    marginTop: 30,
-    backgroundColor: "#dc3545",
-    paddingVertical: 12,
+  divider: {
+    height: 1,
+    backgroundColor: "#e5e7eb",
+    marginLeft: 72,
+  },
+  menuItem: {
+    flexDirection: "row",
+    alignItems: "center",
     paddingHorizontal: 20,
-    borderRadius: 8,
-    width: "80%",
+    paddingVertical: 16,
+  },
+  menuIconContainer: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    backgroundColor: "#f3f4f6",
+    justifyContent: "center",
+    alignItems: "center",
+    marginRight: 12,
+  },
+  menuContent: {
+    flex: 1,
+  },
+  menuTitle: {
+    fontSize: 16,
+    fontWeight: "500",
+    color: "#1f2937",
+    marginBottom: 2,
+  },
+  menuSubtitle: {
+    fontSize: 14,
+    color: "#6b7280",
+  },
+  menuArrow: {
+    fontSize: 20,
+    color: "#9ca3af",
+    fontWeight: "300",
+  },
+  signOutContainer: {
+    marginTop: 10,
+    marginBottom: 40,
+  },
+  signOutGradient: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    paddingVertical: 16,
+    paddingHorizontal: 24,
+    borderRadius: 12,
+    shadowColor: "#ef4444",
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.3,
+    shadowRadius: 8,
+    elevation: 6,
   },
   signOutText: {
-    color: "#fff",
+    color: "white",
     fontSize: 16,
     fontWeight: "600",
-    marginLeft: 10,
+    marginLeft: 8,
   },
 });
diff --git a/xtablo-expo/app/_layout.tsx b/xtablo-expo/app/_layout.tsx
index 561445d..cb6bcd8 100644
--- a/xtablo-expo/app/_layout.tsx
+++ b/xtablo-expo/app/_layout.tsx
@@ -4,7 +4,7 @@ import {
   ThemeProvider,
 } from "@react-navigation/native";
 import { useFonts } from "expo-font";
-import { router, Stack } from "expo-router";
+import { Stack } from "expo-router";
 import * as SplashScreen from "expo-splash-screen";
 import { StatusBar } from "expo-status-bar";
 import { useEffect } from "react";
@@ -23,9 +23,10 @@ SplashScreen.preventAutoHideAsync();
 const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
-      staleTime: 5 * 60 * 1000, // 5 minutes
-      retry: 1,
-      refetchOnWindowFocus: false,
+      // 3 total attempts (1 initial + 2 retries)
+      retry: 2,
+      // 0s -> 1s, 1s → 5s. Little resiliency 😁
+      retryDelay: (attemptIndex) => Math.min(1000 * 5 ** attemptIndex, 10000),
     },
   },
 });
diff --git a/xtablo-expo/assets/images/icon.png b/xtablo-expo/assets/images/icon.png
deleted file mode 100644
index a0b1526..0000000
Binary files a/xtablo-expo/assets/images/icon.png and /dev/null differ
diff --git a/xtablo-expo/assets/images/logo.png b/xtablo-expo/assets/images/logo.png
new file mode 100644
index 0000000..4cee136
Binary files /dev/null and b/xtablo-expo/assets/images/logo.png differ
diff --git a/xtablo-expo/hooks/events.ts b/xtablo-expo/hooks/events.ts
new file mode 100644
index 0000000..d9c83e5
--- /dev/null
+++ b/xtablo-expo/hooks/events.ts
@@ -0,0 +1,59 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { supabase } from "@/lib/supabase";
+import { EventAndTablo, EventInsert } from "@/types/events.types";
+import { useUser } from "@/providers/UserProvider";
+
+export const useEventsByTablo = (tabloId: string | null) => {
+  return useQuery({
+    queryKey: ["events", tabloId],
+    queryFn: async () => {
+      if (!tabloId) {
+        const { data, error } = await supabase
+          .from("events_and_tablos")
+          .select("*")
+          .order("start_date", { ascending: true })
+          .order("start_time", { ascending: true });
+
+        if (error) throw error;
+        return data as EventAndTablo[];
+      }
+      const { data, error } = await supabase
+        .from("events_and_tablos")
+        .select("*")
+        .eq("tablo_id", tabloId)
+        .order("start_date", { ascending: true })
+        .order("start_time", { ascending: true });
+
+      if (error) throw error;
+      return data as EventAndTablo[];
+    },
+  });
+};
+
+export const useCreateEvent = () => {
+  const user = useUser();
+  const queryClient = useQueryClient();
+
+  const { mutate } = useMutation({
+    mutationFn: async (event: Omit<EventInsert, "created_by">) => {
+      const { data, error } = await supabase
+        .from("events")
+        .insert({
+          ...event,
+          created_by: user.id,
+        })
+        .select()
+        .single();
+
+      if (error) throw error;
+      return data as Event;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["events"] });
+    },
+    onError: (err) => {
+      console.error(err);
+    },
+  });
+  return mutate;
+};
diff --git a/xtablo-expo/hooks/tablos.ts b/xtablo-expo/hooks/tablos.ts
new file mode 100644
index 0000000..290ee38
--- /dev/null
+++ b/xtablo-expo/hooks/tablos.ts
@@ -0,0 +1,50 @@
+import { supabase } from "@/lib/supabase";
+import { useUser } from "@/providers/UserProvider";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { TabloInsert, UserTablo } from "@/types/tablos.types";
+import { api } from "@/lib/api";
+import { useAuth } from "@/stores/auth";
+
+// type TabloInsert = Tablo["Insert"];
+// type TabloUpdate = Tablo["Update"];
+
+// Fetch all tablos
+export const useTablosList = () => {
+  const user = useUser();
+  return useQuery({
+    queryKey: ["tablos"],
+    queryFn: async () => {
+      const { data, error } = await supabase
+        .from("user_tablos")
+        .select("*")
+        .eq("user_id", user.id);
+      if (error) throw error;
+      const tablos = data as UserTablo[];
+      return tablos;
+    },
+  });
+};
+
+export const useCreateTablo = () => {
+  const session = useAuth((state) => state.session);
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (
+      tablo: Pick<TabloInsert, "name" | "color" | "image" | "status">
+    ) => {
+      const { data } = await api.post("/api/v1/tablos/create", tablo, {
+        headers: {
+          Authorization: `Bearer ${session?.access_token}`,
+        },
+      });
+      return data;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["tablos"] });
+    },
+    onError: (error) => {
+      console.error(error);
+    },
+  });
+};
diff --git a/xtablo-expo/hooks/user.ts b/xtablo-expo/hooks/user.ts
index 894f23d..683b313 100644
--- a/xtablo-expo/hooks/user.ts
+++ b/xtablo-expo/hooks/user.ts
@@ -1,31 +1,29 @@
 import { api } from "@/lib/api";
-import { Tables } from "@/lib/database.types";
+import { Tables } from "@/types/database.types";
 import { useAuth } from "@/stores/auth";
-import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { useQuery } from "@tanstack/react-query";
 
 type User = Tables<"profiles"> & {
   streamToken: string | null;
 };
 
 export const useGetUser = (): { user: User | null; isLoading: boolean } => {
-  const { session } = useAuth();
-  const queryClient = useQueryClient();
-  console.log("session in useGetUser", session);
-  const { data, isLoading } = useQuery<User | null>(
-    {
-      queryKey: ["user"],
-      queryFn: async () => {
-        console.log("queryFn");
+  const session = useAuth((state) => state.session);
+  const { data, isLoading } = useQuery<User | null>({
+    queryKey: ["user"],
+    queryFn: async () => {
+      try {
         const { data: user } = await api.get<User>("/api/v1/users/me", {
           headers: {
             Authorization: `Bearer ${session?.access_token}`,
           },
         });
         return user;
-      },
+      } catch (error) {
+        return null;
+      }
     },
-    queryClient
-  );
+  });
 
   return { user: data ?? null, isLoading };
 };
diff --git a/xtablo-expo/package-lock.json b/xtablo-expo/package-lock.json
index cf4922a..e05e87b 100644
--- a/xtablo-expo/package-lock.json
+++ b/xtablo-expo/package-lock.json
@@ -27,6 +27,7 @@
         "expo-haptics": "~14.1.4",
         "expo-image-manipulator": "~13.1.7",
         "expo-image-picker": "~16.1.4",
+        "expo-linear-gradient": "~14.1.5",
         "expo-linking": "~7.1.4",
         "expo-router": "~5.1.3",
         "expo-secure-store": "~14.2.3",
@@ -5597,6 +5598,16 @@
         "react": "*"
       }
     },
+    "node_modules/expo-linear-gradient": {
+      "version": "14.1.5",
+      "resolved": "https://registry.npmjs.org/expo-linear-gradient/-/expo-linear-gradient-14.1.5.tgz",
+      "integrity": "sha512-BSN3MkSGLZoHMduEnAgfhoj3xqcDWaoICgIr4cIYEx1GcHfKMhzA/O4mpZJ/WC27BP1rnAqoKfbclk1eA70ndQ==",
+      "peerDependencies": {
+        "expo": "*",
+        "react": "*",
+        "react-native": "*"
+      }
+    },
     "node_modules/expo-linking": {
       "version": "7.1.7",
       "resolved": "https://registry.npmjs.org/expo-linking/-/expo-linking-7.1.7.tgz",
diff --git a/xtablo-expo/package.json b/xtablo-expo/package.json
index 1893ca2..e4739c7 100644
--- a/xtablo-expo/package.json
+++ b/xtablo-expo/package.json
@@ -57,7 +57,8 @@
     "stream-chat-expo": "^6.7.3",
     "zustand": "^5.0.4",
     "expo-crypto": "~14.1.5",
-    "expo-auth-session": "~6.2.1"
+    "expo-auth-session": "~6.2.1",
+    "expo-linear-gradient": "~14.1.5"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",
diff --git a/xtablo-expo/providers/UserProvider.tsx b/xtablo-expo/providers/UserProvider.tsx
index 8f2e878..8607be6 100644
--- a/xtablo-expo/providers/UserProvider.tsx
+++ b/xtablo-expo/providers/UserProvider.tsx
@@ -1,6 +1,6 @@
 import { createStore, StoreApi, useStore } from "zustand";
 import React from "react";
-import { Tables } from "@/lib/database.types";
+import { Tables } from "@/types/database.types";
 import { ActivityIndicator } from "react-native";
 import { Redirect } from "expo-router";
 import { useGetUser } from "@/hooks/user";
@@ -22,8 +22,6 @@ export const UserStoreProvider = ({
     return <ActivityIndicator />;
   }
 
-  console.log("user in UserStoreProvider", user);
-
   if (!user) {
     return <Redirect href="/(auth)/login" />;
   }
diff --git a/xtablo-expo/stores/auth.tsx b/xtablo-expo/stores/auth.tsx
index 445aa9b..f7bf3e3 100644
--- a/xtablo-expo/stores/auth.tsx
+++ b/xtablo-expo/stores/auth.tsx
@@ -38,15 +38,12 @@ export const useAuth = create<AuthState>((set, get) => ({
         data: { session },
       } = await supabase.auth.getSession();
 
-      console.log("session", session);
-
       set({
         session,
       });
 
       supabase.auth.onAuthStateChange(async (event, session) => {
-        console.log("event", event);
-        queryClient.invalidateQueries();
+        queryClient.invalidateQueries({ queryKey: ["user"] });
         set({
           session,
         });
diff --git a/xtablo-expo/lib/database.types.ts b/xtablo-expo/types/database.types.ts
similarity index 100%
rename from xtablo-expo/lib/database.types.ts
rename to xtablo-expo/types/database.types.ts
diff --git a/xtablo-expo/types/events.types.ts b/xtablo-expo/types/events.types.ts
new file mode 100644
index 0000000..84acb23
--- /dev/null
+++ b/xtablo-expo/types/events.types.ts
@@ -0,0 +1,22 @@
+import { Tables, TablesInsert, TablesUpdate } from "@/types/database.types";
+import { RemoveNullFromObject } from "@/types/removeNull";
+
+export type Event = RemoveNullFromObject<
+  Tables<"events">,
+  "created_at" | "end_time"
+>;
+export type EventInsert = TablesInsert<"events">;
+export type EventUpdate = TablesUpdate<"events">;
+
+export type EventAndTablo = RemoveNullFromObject<
+  Tables<"events_and_tablos">,
+  | "event_id"
+  | "tablo_id"
+  | "tablo_name"
+  | "tablo_color"
+  | "tablo_status"
+  | "start_time"
+  | "end_time"
+  | "title"
+  | "start_date"
+>;
diff --git a/xtablo-expo/types/removeNull.ts b/xtablo-expo/types/removeNull.ts
new file mode 100644
index 0000000..eeccef3
--- /dev/null
+++ b/xtablo-expo/types/removeNull.ts
@@ -0,0 +1,11 @@
+/**
+ * Utility type to remove null from a type
+ */
+export type RemoveNull<T> = T extends null ? never : T;
+
+/**
+ * Utility type to remove null from all properties of an object type
+ */
+export type RemoveNullFromObject<T, K extends keyof T = keyof T> = {
+  [L in keyof T]: L extends K ? RemoveNull<T[L]> : T[L];
+};
diff --git a/xtablo-expo/types/tablos.types.ts b/xtablo-expo/types/tablos.types.ts
new file mode 100644
index 0000000..76e04df
--- /dev/null
+++ b/xtablo-expo/types/tablos.types.ts
@@ -0,0 +1,20 @@
+import { Database } from "@/types/database.types";
+import { RemoveNullFromObject } from "@/types/removeNull";
+
+export type UserTablo = RemoveNullFromObject<
+  Database["public"]["Views"]["user_tablos"]["Row"],
+  | "id"
+  | "access_level"
+  | "is_admin"
+  | "created_at"
+  | "deleted_at"
+  | "position"
+  | "user_id"
+  | "name"
+  | "status"
+>;
+
+export type Tablo = Database["public"]["Tables"]["tablos"];
+
+export type TabloInsert = Tablo["Insert"];
+export type TabloUpdate = Tablo["Update"];