diff --git a/api/src/public.ts b/api/src/public.ts
index 7a23677..64c949c 100644
--- a/api/src/public.ts
+++ b/api/src/public.ts
@@ -104,7 +104,7 @@ publicRouter.get("/slots/:shortUserId/:standardName", async (c) => {
   // Use CET time for availability calculations
   const now = getCETTime();
   const nextMonth = new Date(now);
-  nextMonth.setMonth(now.getMonth() + 1);
+  nextMonth.setMonth(now.getMonth() + 2);
 
   const { data: eventsData, error: eventsError } = await supabase
     .from("events")
diff --git a/ui/public/icon.png b/ui/public/icon.png
new file mode 100644
index 0000000..4cee136
Binary files /dev/null and b/ui/public/icon.png differ
diff --git a/ui/public/logo_white.png b/ui/public/logo_white.png
new file mode 100644
index 0000000..b34373b
Binary files /dev/null and b/ui/public/logo_white.png differ
diff --git a/ui/src/App.tsx b/ui/src/App.tsx
index 62de770..d155c79 100644
--- a/ui/src/App.tsx
+++ b/ui/src/App.tsx
@@ -1,10 +1,8 @@
 import { BrowserRouter as Router, useRoutes } from "react-router-dom";
 import { ThemeProvider } from "@ui/contexts/ThemeContext";
-import { twMerge } from "tailwind-merge";
 import { SessionProvider } from "@ui/contexts/SessionContext";
 import { AllCommunityModule, ModuleRegistry } from "ag-grid-community";
 import { UserStoreProvider } from "@ui/providers/UserStoreProvider";
-import { isProd } from "@ui/utils/helpers";
 import { DatadogRumProvider } from "@ui/providers/DatadogRumProvider";
 import { routes } from "@ui/lib/routes";
 
@@ -23,13 +21,7 @@ export const App = () => {
         <UserStoreProvider>
           <Router>
             <DatadogRumProvider>
-              <div
-                className={twMerge(
-                  "min-h-screen",
-                  !isProd ? "bg-orange-50" : "bg-white",
-                  "dark:bg-gray-900"
-                )}
-              >
+              <div className="min-h-screen bg-background">
                 <AppRoutes />
                 <style>
                   {`
diff --git a/ui/src/assets/icon.png b/ui/src/assets/icon.png
new file mode 100644
index 0000000..4cee136
Binary files /dev/null and b/ui/src/assets/icon.png differ
diff --git a/ui/src/components/AnimatedBackground.tsx b/ui/src/components/AnimatedBackground.tsx
new file mode 100644
index 0000000..7ec99ee
--- /dev/null
+++ b/ui/src/components/AnimatedBackground.tsx
@@ -0,0 +1,282 @@
+export const AnimatedBackground = () => {
+  return (
+    <div className="absolute inset-0 pointer-events-none overflow-hidden">
+      {/* Horizontal moving logos */}
+      <div className="absolute top-1/4 left-0 animate-move-right-slow opacity-4 dark:opacity-8">
+        <img
+          src="/icon.png"
+          alt="Xtablo"
+          className="w-16 h-16 object-contain animate-spin-slow block dark:hidden"
+        />
+        <img
+          src="/logo_white.png"
+          alt="Xtablo"
+          className="w-16 h-16 object-contain animate-spin-slow hidden dark:block"
+        />
+      </div>
+      <div className="absolute top-1/3 left-0 animate-move-right-medium opacity-3 dark:opacity-6">
+        <img
+          src="/icon.png"
+          alt="Xtablo"
+          className="w-12 h-12 object-contain animate-bounce-gentle block dark:hidden"
+        />
+        <img
+          src="/logo_white.png"
+          alt="Xtablo"
+          className="w-12 h-12 object-contain animate-bounce-gentle hidden dark:block"
+        />
+      </div>
+      <div className="absolute top-1/2 left-0 animate-move-right-fast opacity-5 dark:opacity-10">
+        <img
+          src="/icon.png"
+          alt="Xtablo"
+          className="w-20 h-20 object-contain animate-pulse-gentle block dark:hidden"
+        />
+        <img
+          src="/logo_white.png"
+          alt="Xtablo"
+          className="w-20 h-20 object-contain animate-pulse-gentle hidden dark:block"
+        />
+      </div>
+      <div className="absolute top-2/3 left-0 animate-move-right-slow opacity-2 dark:opacity-4">
+        <img
+          src="/icon.png"
+          alt="Xtablo"
+          className="w-14 h-14 object-contain animate-wiggle block dark:hidden"
+        />
+        <img
+          src="/logo_white.png"
+          alt="Xtablo"
+          className="w-14 h-14 object-contain animate-wiggle hidden dark:block"
+        />
+      </div>
+      <div className="absolute top-3/4 left-0 animate-move-right-medium opacity-3 dark:opacity-7">
+        <img
+          src="/icon.png"
+          alt="Xtablo"
+          className="w-18 h-18 object-contain animate-float-gentle"
+        />
+      </div>
+
+      {/* Diagonal moving logos */}
+      <div className="absolute top-0 left-1/4 animate-move-diagonal-1 opacity-3 dark:opacity-6">
+        <img
+          src="/icon.png"
+          alt="Xtablo"
+          className="w-10 h-10 object-contain animate-spin-reverse"
+        />
+      </div>
+      <div className="absolute top-0 left-1/2 animate-move-diagonal-2 opacity-4 dark:opacity-8">
+        <img
+          src="/icon.png"
+          alt="Xtablo"
+          className="w-16 h-16 object-contain animate-scale-gentle"
+        />
+      </div>
+      <div className="absolute top-0 left-3/4 animate-move-diagonal-3 opacity-2 dark:opacity-5">
+        <img
+          src="/icon.png"
+          alt="Xtablo"
+          className="w-12 h-12 object-contain animate-rotate-gentle"
+        />
+      </div>
+
+      {/* Vertical moving logos */}
+      <div className="absolute left-1/6 top-0 animate-move-down-slow opacity-3 dark:opacity-6">
+        <img
+          src="/icon.png"
+          alt="Xtablo"
+          className="w-14 h-14 object-contain animate-bounce-soft"
+        />
+      </div>
+      <div className="absolute left-5/6 top-0 animate-move-down-medium opacity-4 dark:opacity-7">
+        <img
+          src="/icon.png"
+          alt="Xtablo"
+          className="w-16 h-16 object-contain animate-sway"
+        />
+      </div>
+
+      {/* Circular moving logos */}
+      <div className="absolute top-1/2 left-1/2 animate-orbit-1 opacity-2 dark:opacity-4">
+        <img src="/icon.png" alt="Xtablo" className="w-8 h-8 object-contain" />
+      </div>
+      <div className="absolute top-1/2 left-1/2 animate-orbit-2 opacity-3 dark:opacity-5">
+        <img
+          src="/icon.png"
+          alt="Xtablo"
+          className="w-10 h-10 object-contain"
+        />
+      </div>
+      <div className="absolute top-1/2 left-1/2 animate-orbit-3 opacity-2 dark:opacity-4">
+        <img src="/icon.png" alt="Xtablo" className="w-6 h-6 object-contain" />
+      </div>
+      <div className="absolute top-1/2 left-1/2 animate-orbit-4 opacity-3 dark:opacity-6">
+        <img
+          src="/icon.png"
+          alt="Xtablo"
+          className="w-12 h-12 object-contain animate-spin-fast"
+        />
+      </div>
+      <div className="absolute top-1/2 left-1/2 animate-orbit-5 opacity-2 dark:opacity-5">
+        <img
+          src="/icon.png"
+          alt="Xtablo"
+          className="w-7 h-7 object-contain animate-pulse-fast"
+        />
+      </div>
+
+      {/* Zigzag moving logos */}
+      <div className="absolute top-1/4 left-0 animate-zigzag-1 opacity-4 dark:opacity-8">
+        <img
+          src="/icon.png"
+          alt="Xtablo"
+          className="w-14 h-14 object-contain animate-wobble"
+        />
+      </div>
+      <div className="absolute top-1/2 left-0 animate-zigzag-2 opacity-3 dark:opacity-6">
+        <img
+          src="/icon.png"
+          alt="Xtablo"
+          className="w-11 h-11 object-contain animate-shake"
+        />
+      </div>
+      <div className="absolute top-3/4 left-0 animate-zigzag-3 opacity-5 dark:opacity-9">
+        <img
+          src="/icon.png"
+          alt="Xtablo"
+          className="w-16 h-16 object-contain animate-bounce-crazy"
+        />
+      </div>
+
+      {/* Spiral moving logos */}
+      <div className="absolute top-0 left-1/4 animate-spiral-1 opacity-3 dark:opacity-7">
+        <img
+          src="/icon.png"
+          alt="Xtablo"
+          className="w-9 h-9 object-contain animate-spin-wobble"
+        />
+      </div>
+      <div className="absolute top-0 left-3/4 animate-spiral-2 opacity-4 dark:opacity-8">
+        <img
+          src="/icon.png"
+          alt="Xtablo"
+          className="w-13 h-13 object-contain animate-flip"
+        />
+      </div>
+
+      {/* Random floating logos */}
+      <div className="absolute top-1/6 left-1/3 animate-float-random-1 opacity-2 dark:opacity-5">
+        <img
+          src="/icon.png"
+          alt="Xtablo"
+          className="w-8 h-8 object-contain animate-twirl"
+        />
+      </div>
+      <div className="absolute top-1/3 left-2/3 animate-float-random-2 opacity-3 dark:opacity-6">
+        <img
+          src="/icon.png"
+          alt="Xtablo"
+          className="w-10 h-10 object-contain animate-dance"
+        />
+      </div>
+      <div className="absolute top-2/3 left-1/4 animate-float-random-3 opacity-4 dark:opacity-7">
+        <img
+          src="/icon.png"
+          alt="Xtablo"
+          className="w-12 h-12 object-contain animate-jiggle"
+        />
+      </div>
+      <div className="absolute top-5/6 left-3/4 animate-float-random-4 opacity-2 dark:opacity-4">
+        <img
+          src="/icon.png"
+          alt="Xtablo"
+          className="w-9 h-9 object-contain animate-vibrate"
+        />
+      </div>
+
+      {/* Wave pattern logos */}
+      <div className="absolute top-1/8 left-0 animate-wave-1 opacity-3 dark:opacity-6">
+        <img
+          src="/icon.png"
+          alt="Xtablo"
+          className="w-11 h-11 object-contain animate-swing"
+        />
+      </div>
+      <div className="absolute top-3/8 left-0 animate-wave-2 opacity-4 dark:opacity-8">
+        <img
+          src="/icon.png"
+          alt="Xtablo"
+          className="w-13 h-13 object-contain animate-pendulum"
+        />
+      </div>
+      <div className="absolute top-5/8 left-0 animate-wave-3 opacity-2 dark:opacity-5">
+        <img
+          src="/icon.png"
+          alt="Xtablo"
+          className="w-10 h-10 object-contain animate-elastic"
+        />
+      </div>
+      <div className="absolute top-7/8 left-0 animate-wave-4 opacity-5 dark:opacity-9">
+        <img
+          src="/icon.png"
+          alt="Xtablo"
+          className="w-15 h-15 object-contain animate-rubber"
+        />
+      </div>
+
+      {/* Corner shooters */}
+      <div className="absolute top-0 left-0 animate-corner-shoot-1 opacity-3 dark:opacity-7">
+        <img
+          src="/icon.png"
+          alt="Xtablo"
+          className="w-12 h-12 object-contain animate-rocket"
+        />
+      </div>
+      <div className="absolute top-0 right-0 animate-corner-shoot-2 opacity-4 dark:opacity-8">
+        <img
+          src="/icon.png"
+          alt="Xtablo"
+          className="w-14 h-14 object-contain animate-comet"
+        />
+      </div>
+      <div className="absolute bottom-0 left-0 animate-corner-shoot-3 opacity-2 dark:opacity-5">
+        <img
+          src="/icon.png"
+          alt="Xtablo"
+          className="w-10 h-10 object-contain animate-meteor"
+        />
+      </div>
+      <div className="absolute bottom-0 right-0 animate-corner-shoot-4 opacity-5 dark:opacity-10">
+        <img
+          src="/icon.png"
+          alt="Xtablo"
+          className="w-16 h-16 object-contain animate-blast"
+        />
+      </div>
+
+      {/* Bouncing balls */}
+      <div className="absolute top-1/5 left-1/5 animate-bounce-ball-1 opacity-4 dark:opacity-8">
+        <img
+          src="/icon.png"
+          alt="Xtablo"
+          className="w-8 h-8 object-contain animate-spin-bounce"
+        />
+      </div>
+      <div className="absolute top-2/5 left-4/5 animate-bounce-ball-2 opacity-3 dark:opacity-6">
+        <img
+          src="/icon.png"
+          alt="Xtablo"
+          className="w-11 h-11 object-contain animate-flip-bounce"
+        />
+      </div>
+      <div className="absolute top-4/5 left-2/5 animate-bounce-ball-3 opacity-5 dark:opacity-9">
+        <img
+          src="/icon.png"
+          alt="Xtablo"
+          className="w-13 h-13 object-contain animate-scale-bounce"
+        />
+      </div>
+    </div>
+  );
+};
diff --git a/ui/src/components/AvailabilityCard.tsx b/ui/src/components/AvailabilityCard.tsx
index f069e3b..1c45b08 100644
--- a/ui/src/components/AvailabilityCard.tsx
+++ b/ui/src/components/AvailabilityCard.tsx
@@ -159,7 +159,7 @@ export function AvailabilityCard({
             size="sm"
             variant="outline"
             onPress={() => onCopyToOtherDays(day, enabled, timeRanges)}
-            className="h-6 px-2 text-xs border-gray-300 hover:border-primary hover:bg-primary/5 text-gray-600 hover:text-primary"
+            className="h-6 px-2 text-xs border-gray-300 dark:border-gray-600 hover:border-primary hover:bg-primary/5 dark:hover:bg-primary/10 text-gray-600 dark:text-gray-300 hover:text-primary"
           >
             <CopyIcon className="size-3 mr-1" />
             Copier
@@ -174,7 +174,9 @@ export function AvailabilityCard({
         >
           <Text
             className={`font-medium text-sm ${
-              enabled ? "text-gray-900" : "text-gray-500"
+              enabled
+                ? "text-gray-900 dark:text-gray-100"
+                : "text-gray-500 dark:text-gray-400"
             }`}
           >
             {enabled ? "Disponible" : "Indisponible"}
@@ -191,7 +193,7 @@ export function AvailabilityCard({
             className={`flex items-center gap-1 rounded-md px-1.5 py-1 cursor-pointer transition-all duration-200 ${
               selectedRangeIndex === index
                 ? "bg-primary/10 dark:bg-primary/20"
-                : "bg-gray-50/80 dark:bg-gray-900/80 hover:bg-gray-100 dark:hover:bg-gray-800/80"
+                : "bg-gray-50/80 dark:bg-gray-800/60 hover:bg-gray-100 dark:hover:bg-gray-700/60"
             }`}
           >
             <div className="flex items-center text-xs w-fit">
@@ -223,7 +225,9 @@ export function AvailabilityCard({
                       </SelectListBox>
                     </SelectPopover>
                   </Select>
-                  <Text className="text-gray-500 text-[10px] mx-2">-</Text>
+                  <Text className="text-gray-500 dark:text-gray-400 text-[10px] mx-2">
+                    -
+                  </Text>
                   <Select
                     aria-label="Heure de fin"
                     selectedKey={range.end}
@@ -256,7 +260,9 @@ export function AvailabilityCard({
                   <Text className="font-medium text-xs px-1">
                     {range.start}
                   </Text>
-                  <Text className="text-gray-500 text-[10px]">→</Text>
+                  <Text className="text-gray-500 dark:text-gray-400 text-[10px]">
+                    →
+                  </Text>
                   <Text className="font-medium text-xs px-1">{range.end}</Text>
                 </>
               )}
@@ -281,7 +287,7 @@ export function AvailabilityCard({
             isDisabled={!enabled}
             variant="outline"
             size="sm"
-            className="h-5 px-1.5 flex items-center text-xs border-0 bg-gray-100/50 dark:bg-gray-800/50 hover:bg-gray-200/50 dark:hover:bg-gray-700/50"
+            className="h-5 px-1.5 flex items-center text-xs border-0 bg-gray-100/50 dark:bg-gray-700/50 hover:bg-gray-200/50 dark:hover:bg-gray-600/50"
           >
             <PlusIcon className="size-2.5" />
           </Button>
diff --git a/ui/src/components/AvailabilityVisualization.tsx b/ui/src/components/AvailabilityVisualization.tsx
index ce1ef46..da1c4c8 100644
--- a/ui/src/components/AvailabilityVisualization.tsx
+++ b/ui/src/components/AvailabilityVisualization.tsx
@@ -64,10 +64,10 @@ export const AvailabilityVisualization = ({
 }) => {
   const timeSlots = generateTimeSlots(slotDurationMinutes);
   return (
-    <div className="bg-white dark:bg-gray-800 rounded-xl shadow-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
+    <div className="bg-white dark:bg-gray-700/40 rounded-xl shadow-sm dark:shadow-gray-900/20 border border-gray-200 dark:border-gray-600/50 overflow-hidden">
       {/* Weekly Calendar Header */}
       <div className="grid grid-cols-8 border-b-2 border-gray-200 dark:border-gray-600">
-        <div className="p-4 bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-800 dark:to-slate-900 border-r border-gray-200 dark:border-gray-600">
+        <div className="p-4 bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-700/60 dark:to-slate-800/60 border-r border-gray-200 dark:border-gray-600">
           <Text className="font-bold text-sm text-slate-700 dark:text-slate-300">
             Heure
           </Text>
@@ -75,7 +75,7 @@ export const AvailabilityVisualization = ({
         {DAYS_OF_WEEK.map((day) => (
           <div
             key={day}
-            className="p-4 bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-800 dark:to-slate-900 border-r border-gray-200 dark:border-gray-600 last:border-r-0 text-center"
+            className="p-4 bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-700/60 dark:to-slate-800/60 border-r border-gray-200 dark:border-gray-600 last:border-r-0 text-center"
           >
             <Text className="font-bold text-sm text-slate-700 dark:text-slate-300">
               {DAYS_OF_WEEK_DISPLAY[day]}
@@ -105,7 +105,7 @@ export const AvailabilityVisualization = ({
               {DAYS_OF_WEEK.map((day) => (
                 <div
                   key={`${day}-${timeSlot}`}
-                  className="p-3 border-r border-gray-200 dark:border-gray-600 last:border-r-0 min-h-[3rem] flex items-center justify-center bg-gradient-to-br from-white to-slate-50/30 dark:from-gray-800 dark:to-slate-900/30"
+                  className="p-3 border-r border-gray-200 dark:border-gray-600 last:border-r-0 min-h-[3rem] flex items-center justify-center bg-gradient-to-br from-white to-slate-50/30 dark:from-gray-700/40 dark:to-slate-800/40"
                 >
                   {isTimeSlotAvailable(day, timeSlot, draftAvailabilities) ? (
                     <div className="w-full h-8 bg-gradient-to-r from-emerald-400 via-emerald-500 to-emerald-600 dark:from-emerald-500 dark:via-emerald-600 dark:to-emerald-700 rounded-lg shadow-sm border border-emerald-300 dark:border-emerald-600 flex items-center justify-center group hover:shadow-md transition-all duration-200 hover:scale-105">
diff --git a/ui/src/components/EventDetailsModal.tsx b/ui/src/components/EventDetailsModal.tsx
index 28da6d3..b736aeb 100644
--- a/ui/src/components/EventDetailsModal.tsx
+++ b/ui/src/components/EventDetailsModal.tsx
@@ -11,12 +11,15 @@ interface EventDetailsModalProps {
   isOpen: boolean;
   onClose: () => void;
   onEdit?: () => void;
+  canEdit?: boolean;
 }
 
 export const EventDetailsModal = ({
   event,
   isOpen,
   onClose,
+  onEdit,
+  canEdit = false,
 }: EventDetailsModalProps) => {
   if (!event) return null;
 
@@ -139,6 +142,7 @@ export const EventDetailsModal = ({
         <Button variant="outline" onPress={onClose}>
           Fermer
         </Button>
+        {canEdit && onEdit && <Button onPress={onEdit}>Modifier</Button>}
       </div>
     </CustomModal>
   );
diff --git a/ui/src/components/CreateEventModal.tsx b/ui/src/components/EventModal.tsx
similarity index 74%
rename from ui/src/components/CreateEventModal.tsx
rename to ui/src/components/EventModal.tsx
index 0346d11..1e67c9f 100644
--- a/ui/src/components/CreateEventModal.tsx
+++ b/ui/src/components/EventModal.tsx
@@ -1,7 +1,7 @@
 import { Event, EventInsert } from "@ui/types/events.types";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { useTablosList } from "@ui/hooks/tablos";
-import { useCreateEvents } from "@ui/hooks/events";
+import { useCreateEvents, useEvent, useUpdateEvent } from "@ui/hooks/events";
 import { useUser } from "@ui/providers/UserStoreProvider";
 import {
   Select,
@@ -14,16 +14,21 @@ import { useTimePicker } from "@ui/ui-library/time-picker";
 import { DatePicker, DatePickerButton } from "@ui/ui-library/date-picker";
 import { Group } from "react-aria-components";
 import { getLocalTimeZone, parseDate, today } from "@internationalized/date";
-import { useNavigate, useSearchParams } from "react-router-dom";
+import { useNavigate, useParams, useSearchParams } from "react-router-dom";
+
+export const EventModal = ({ mode }: { mode: "create" | "edit" }) => {
+  const { event_id } = useParams();
+  const { data: event } = useEvent(event_id as string);
 
-export const CreateEventModal = () => {
   const user = useUser();
   const [searchParams] = useSearchParams();
   const tablo_id = searchParams.get("tablo_id");
-  const date = new Date(searchParams.get("date") || "");
+  const dateFromParams = searchParams.get("date");
+  const date = dateFromParams ? new Date(dateFromParams) : new Date();
 
   const { data: tablos, isLoading: tablosLoading } = useTablosList();
   const createEvents = useCreateEvents();
+  const updateEvent = useUpdateEvent();
   const timeOptions = useTimePicker({ intervalInMinute: 15 });
   const navigate = useNavigate();
 
@@ -62,7 +67,7 @@ export const CreateEventModal = () => {
     return nearestOption?.id || "";
   };
 
-  const [createdEvent, setCreatedEvent] = useState<EventInsert>({
+  const [formEvent, setFormEvent] = useState<EventInsert>({
     start_date: date ? getLocalDateString(date) : "",
     start_time: date ? getNearestTimeOption(date, "start") : "",
     end_time: date ? getNearestTimeOption(date, "end") : "",
@@ -71,13 +76,30 @@ export const CreateEventModal = () => {
     created_by: user.id,
   });
 
+  // Initialize form data when in edit mode
+  useEffect(() => {
+    if (mode === "edit" && event) {
+      setFormEvent({
+        start_date: event.start_date,
+        start_time: event.start_time || "",
+        end_time: event.end_time || "",
+        tablo_id: event.tablo_id,
+        title: event.title,
+        description: event.description || "",
+        created_by: event.created_by,
+      });
+    }
+  }, [mode, event]);
+
   return (
     <div className="fixed inset-0 bg-black/80 flex items-center justify-center z-50 p-4">
       <div className="bg-white dark:bg-gray-900 rounded-xl shadow-2xl w-full max-w-lg mx-4 overflow-hidden">
         {/* Header with colored accent */}
         <div className="bg-gradient-to-r from-blue-500 to-blue-600 p-6 text-white">
           <div className="flex items-center justify-between">
-            <h2 className="text-xl font-medium">Nouvel événement</h2>
+            <h2 className="text-xl font-medium">
+              {mode === "edit" ? "Modifier l'événement" : "Nouvel événement"}
+            </h2>
             <button
               onClick={onClose}
               className="text-white hover:text-gray-200 transition-colors"
@@ -99,12 +121,19 @@ export const CreateEventModal = () => {
             </button>
           </div>
           <div className="mt-2 text-blue-100 text-sm">
-            {date.toLocaleDateString("fr-FR", {
-              weekday: "long",
-              year: "numeric",
-              month: "long",
-              day: "numeric",
-            })}
+            {mode === "edit" && event
+              ? new Date(event.start_date).toLocaleDateString("fr-FR", {
+                  weekday: "long",
+                  year: "numeric",
+                  month: "long",
+                  day: "numeric",
+                })
+              : date.toLocaleDateString("fr-FR", {
+                  weekday: "long",
+                  year: "numeric",
+                  month: "long",
+                  day: "numeric",
+                })}
           </div>
         </div>
 
@@ -114,10 +143,10 @@ export const CreateEventModal = () => {
           <div className="space-y-2">
             <input
               type="text"
-              value={createdEvent?.title}
+              value={formEvent?.title}
               onChange={(e) =>
-                setCreatedEvent({
-                  ...createdEvent,
+                setFormEvent({
+                  ...formEvent,
                   title: e.target.value,
                 } as Event)
               }
@@ -136,10 +165,10 @@ export const CreateEventModal = () => {
             </label>
             <Select
               placeholder="Sélectionner un tablo"
-              selectedKey={createdEvent?.tablo_id}
+              selectedKey={formEvent?.tablo_id}
               onSelectionChange={(key) =>
-                setCreatedEvent({
-                  ...createdEvent,
+                setFormEvent({
+                  ...formEvent,
                   tablo_id: key as string,
                 } as Event)
               }
@@ -168,8 +197,8 @@ export const CreateEventModal = () => {
               <DatePicker
                 aria-label="Date de l'événement"
                 value={
-                  createdEvent?.start_date
-                    ? parseDate(createdEvent?.start_date)
+                  formEvent?.start_date
+                    ? parseDate(formEvent?.start_date)
                     : null
                 }
                 minValue={today(getLocalTimeZone())}
@@ -177,8 +206,8 @@ export const CreateEventModal = () => {
                   if (value === null) {
                     return;
                   }
-                  setCreatedEvent({
-                    ...createdEvent,
+                  setFormEvent({
+                    ...formEvent,
                     start_date: value.toString(),
                   });
                 }}
@@ -194,14 +223,14 @@ export const CreateEventModal = () => {
               <Select
                 aria-label="Heure de début"
                 className="min-w-[110px]"
-                selectedKey={createdEvent?.start_time}
+                selectedKey={formEvent?.start_time}
                 onSelectionChange={(value) => {
                   const option = timeOptions.find(
                     (option) => option.id === value
                   );
                   if (option && value) {
-                    setCreatedEvent({
-                      ...createdEvent,
+                    setFormEvent({
+                      ...formEvent,
                       start_time: value.toString(),
                     });
                   }
@@ -225,14 +254,14 @@ export const CreateEventModal = () => {
               <Select
                 aria-label="Heure de fin"
                 className="min-w-[110px]"
-                selectedKey={createdEvent?.end_time}
+                selectedKey={formEvent?.end_time}
                 onSelectionChange={(value) => {
                   const option = timeOptions.find(
                     (option) => option.id === value
                   );
                   if (option && value) {
-                    setCreatedEvent({
-                      ...createdEvent,
+                    setFormEvent({
+                      ...formEvent,
                       end_time: value.toString(),
                     });
                   }
@@ -256,10 +285,10 @@ export const CreateEventModal = () => {
               Description
             </label>
             <textarea
-              value={createdEvent?.description ?? ""}
+              value={formEvent?.description ?? ""}
               onChange={(e) =>
-                setCreatedEvent({
-                  ...createdEvent,
+                setFormEvent({
+                  ...formEvent,
                   description: e.target.value,
                 } as Event)
               }
@@ -277,7 +306,11 @@ export const CreateEventModal = () => {
             type="button"
             className="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors"
             onClick={onClose}
-            aria-label="Annuler la création d'événement"
+            aria-label={
+              mode === "edit"
+                ? "Annuler la modification"
+                : "Annuler la création d'événement"
+            }
           >
             Annuler
           </button>
@@ -285,16 +318,27 @@ export const CreateEventModal = () => {
             type="button"
             className="px-6 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed transition-all shadow-sm hover:shadow-md"
             onClick={() => {
-              const eventName = createdEvent?.title.trim() || "(Sans titre)";
-              createEvents(
-                { ...createdEvent, title: eventName },
-                { onSuccess: () => onClose() }
-              );
+              const eventName = formEvent?.title.trim() || "(Sans titre)";
+              if (mode === "edit" && event) {
+                updateEvent.mutate(
+                  { id: event.id, ...formEvent, title: eventName },
+                  { onSuccess: () => onClose() }
+                );
+              } else {
+                createEvents(
+                  { ...formEvent, title: eventName },
+                  { onSuccess: () => onClose() }
+                );
+              }
             }}
-            disabled={!createdEvent?.tablo_id}
-            aria-label="Enregistrer l'événement"
+            disabled={!formEvent?.tablo_id}
+            aria-label={
+              mode === "edit"
+                ? "Modifier l'événement"
+                : "Enregistrer l'événement"
+            }
           >
-            Enregistrer
+            {mode === "edit" ? "Modifier" : "Enregistrer"}
           </button>
         </div>
       </div>
diff --git a/ui/src/hooks/tablos.ts b/ui/src/hooks/tablos.ts
index 79a94ef..53ce751 100644
--- a/ui/src/hooks/tablos.ts
+++ b/ui/src/hooks/tablos.ts
@@ -237,3 +237,18 @@ export const useDeleteTablo = () => {
     },
   });
 };
+
+export const useGetAllTabloAccess = () => {
+  const user = useUser();
+  const { data, isLoading, error } = useQuery({
+    queryKey: ["tablo-access", user.id],
+    queryFn: async () => {
+      const { data } = await supabase
+        .from("tablo_access")
+        .select("*")
+        .eq("user_id", user.id);
+      return data;
+    },
+  });
+  return { data, isLoading, error };
+};
diff --git a/ui/src/lib/routes.tsx b/ui/src/lib/routes.tsx
index 2a45086..5273726 100644
--- a/ui/src/lib/routes.tsx
+++ b/ui/src/lib/routes.tsx
@@ -14,7 +14,7 @@ import { SignUpPage } from "@ui/pages/signup";
 import { ResetPasswordPage } from "@ui/pages/reset-password";
 import { AuthenticationGateway } from "@ui/components/AuthenticationGateway";
 import ChatProvider from "@ui/providers/ChatProvider";
-import { CreateEventModal } from "@ui/components/CreateEventModal";
+import { EventModal } from "@ui/components/EventModal";
 import { ChantiersPage } from "@ui/pages/chantiers";
 import { ChatPage } from "@ui/pages/chat";
 import { FeedbackPage } from "@ui/pages/feedback";
@@ -55,8 +55,11 @@ export const routes: RouteObject[] = [
             element: <PlanningPage />,
             children: [
               { index: true },
-              { path: ":tablo_id" },
-              { path: "create", element: <CreateEventModal /> },
+              {
+                path: ":tablo_id/events/:event_id/edit",
+                element: <EventModal mode="edit" />,
+              },
+              { path: "create", element: <EventModal mode="create" /> },
             ],
           },
           {
diff --git a/ui/src/main.css b/ui/src/main.css
index b3cdb65..e858792 100644
--- a/ui/src/main.css
+++ b/ui/src/main.css
@@ -1,9 +1,1145 @@
 .str-chat {
-  --str-chat__primary-color: #3b82f6;
-  --str-chat__active-primary-color: #2563eb;
-  --str-chat__surface-color: #f1f5f9;
-  --str-chat__secondary-surface-color: #e2e8f0;
-  --str-chat__primary-surface-color: #dbeafe;
-  --str-chat__primary-surface-color-low-emphasis: #eff6ff;
+  --str-chat__primary-color: #8b7396;
+  --str-chat__active-primary-color: #6e5c7d;
+  --str-chat__surface-color: #f5f3f7;
+  --str-chat__secondary-surface-color: #e8e4ec;
+  --str-chat__primary-surface-color: #ebe7f0;
+  --str-chat__primary-surface-color-low-emphasis: #f2f0f5;
   --str-chat__border-radius-circle: 6px;
 }
+
+.dark .str-chat {
+  --str-chat__primary-color: #a68bb5;
+  --str-chat__active-primary-color: #8b7396;
+  --str-chat__surface-color: rgba(120, 107, 130, 0.25);
+  --str-chat__secondary-surface-color: rgba(140, 130, 150, 0.18);
+  --str-chat__primary-surface-color: rgba(166, 139, 181, 0.12);
+  --str-chat__primary-surface-color-low-emphasis: rgba(166, 139, 181, 0.06);
+  --str-chat__background-color: rgba(110, 100, 120, 0.2);
+  --str-chat__secondary-background-color: rgba(80, 72, 88, 0.35);
+  --str-chat__border-color: rgba(120, 107, 130, 0.28);
+  --str-chat__text-color: #f5f3f7;
+  --str-chat__text-low-emphasis-color: #b8b0c0;
+  --str-chat__disabled-color: rgba(155, 143, 165, 0.35);
+}
+
+@keyframes gradient-x {
+  0%,
+  100% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+}
+
+.animate-gradient-x {
+  animation: gradient-x 15s ease infinite;
+}
+
+@keyframes wave-float {
+  0%,
+  100% {
+    transform: translateY(0px) rotate(0deg);
+  }
+  25% {
+    transform: translateY(-20px) rotate(1deg);
+  }
+  50% {
+    transform: translateY(-10px) rotate(-1deg);
+  }
+  75% {
+    transform: translateY(-15px) rotate(0.5deg);
+  }
+}
+
+@keyframes wave-pulse {
+  0%,
+  100% {
+    transform: scale(1) rotateZ(0deg);
+    opacity: 0.3;
+  }
+  25% {
+    transform: scale(1.05) rotateZ(1deg);
+    opacity: 0.4;
+  }
+  50% {
+    transform: scale(0.95) rotateZ(-1deg);
+    opacity: 0.5;
+  }
+  75% {
+    transform: scale(1.02) rotateZ(0.5deg);
+    opacity: 0.35;
+  }
+}
+
+.animate-wave-float {
+  animation: wave-float 8s ease-in-out infinite;
+}
+
+.animate-wave-float-delayed {
+  animation: wave-float 10s ease-in-out infinite 2s;
+}
+
+.animate-wave-float-slow {
+  animation: wave-float 12s ease-in-out infinite 4s;
+}
+
+.animate-wave-pulse {
+  animation: wave-pulse 6s ease-in-out infinite;
+}
+
+.animate-wave-pulse-delayed {
+  animation: wave-pulse 8s ease-in-out infinite 3s;
+}
+
+.animate-wave-pulse-slow {
+  animation: wave-pulse 10s ease-in-out infinite 1s;
+}
+
+/* Moving Animations */
+@keyframes move-right-slow {
+  0% {
+    transform: translateX(-100px);
+  }
+  100% {
+    transform: translateX(calc(100vw + 100px));
+  }
+}
+
+@keyframes move-right-medium {
+  0% {
+    transform: translateX(-80px);
+  }
+  100% {
+    transform: translateX(calc(100vw + 80px));
+  }
+}
+
+@keyframes move-right-fast {
+  0% {
+    transform: translateX(-120px);
+  }
+  100% {
+    transform: translateX(calc(100vw + 120px));
+  }
+}
+
+@keyframes move-down-slow {
+  0% {
+    transform: translateY(-100px);
+  }
+  100% {
+    transform: translateY(calc(100vh + 100px));
+  }
+}
+
+@keyframes move-down-medium {
+  0% {
+    transform: translateY(-80px);
+  }
+  100% {
+    transform: translateY(calc(100vh + 80px));
+  }
+}
+
+@keyframes move-diagonal-1 {
+  0% {
+    transform: translate(-100px, -100px);
+  }
+  100% {
+    transform: translate(calc(100vw + 100px), calc(100vh + 100px));
+  }
+}
+
+@keyframes move-diagonal-2 {
+  0% {
+    transform: translate(-80px, -50px);
+  }
+  100% {
+    transform: translate(calc(100vw + 80px), calc(100vh + 50px));
+  }
+}
+
+@keyframes move-diagonal-3 {
+  0% {
+    transform: translate(-60px, -80px);
+  }
+  100% {
+    transform: translate(calc(100vw + 60px), calc(100vh + 80px));
+  }
+}
+
+@keyframes orbit-1 {
+  0% {
+    transform: translate(-50%, -50%) rotate(0deg) translateX(150px) rotate(0deg);
+  }
+  100% {
+    transform: translate(-50%, -50%) rotate(360deg) translateX(150px)
+      rotate(-360deg);
+  }
+}
+
+@keyframes orbit-2 {
+  0% {
+    transform: translate(-50%, -50%) rotate(0deg) translateX(200px) rotate(0deg);
+  }
+  100% {
+    transform: translate(-50%, -50%) rotate(-360deg) translateX(200px)
+      rotate(360deg);
+  }
+}
+
+@keyframes orbit-3 {
+  0% {
+    transform: translate(-50%, -50%) rotate(0deg) translateX(100px) rotate(0deg);
+  }
+  100% {
+    transform: translate(-50%, -50%) rotate(360deg) translateX(100px)
+      rotate(-360deg);
+  }
+}
+
+/* Gentle Animations */
+@keyframes spin-slow {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes spin-reverse {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(-360deg);
+  }
+}
+
+@keyframes bounce-gentle {
+  0%,
+  100% {
+    transform: translateY(0px);
+  }
+  50% {
+    transform: translateY(-10px);
+  }
+}
+
+@keyframes bounce-soft {
+  0%,
+  100% {
+    transform: translateY(0px);
+  }
+  50% {
+    transform: translateY(-8px);
+  }
+}
+
+@keyframes pulse-gentle {
+  0%,
+  100% {
+    transform: scale(1);
+    opacity: 0.4;
+  }
+  50% {
+    transform: scale(1.1);
+    opacity: 0.6;
+  }
+}
+
+@keyframes wiggle {
+  0%,
+  100% {
+    transform: rotate(0deg);
+  }
+  25% {
+    transform: rotate(3deg);
+  }
+  75% {
+    transform: rotate(-3deg);
+  }
+}
+
+@keyframes float-gentle {
+  0%,
+  100% {
+    transform: translateY(0px);
+  }
+  50% {
+    transform: translateY(-5px);
+  }
+}
+
+@keyframes scale-gentle {
+  0%,
+  100% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.05);
+  }
+}
+
+@keyframes rotate-gentle {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(180deg);
+  }
+}
+
+@keyframes sway {
+  0%,
+  100% {
+    transform: translateX(0px);
+  }
+  50% {
+    transform: translateX(10px);
+  }
+}
+
+/* Animation Classes */
+.animate-move-right-slow {
+  animation: move-right-slow 25s linear infinite;
+}
+.animate-move-right-medium {
+  animation: move-right-medium 20s linear infinite;
+}
+.animate-move-right-fast {
+  animation: move-right-fast 15s linear infinite;
+}
+.animate-move-down-slow {
+  animation: move-down-slow 30s linear infinite;
+}
+.animate-move-down-medium {
+  animation: move-down-medium 25s linear infinite;
+}
+.animate-move-diagonal-1 {
+  animation: move-diagonal-1 35s linear infinite;
+}
+.animate-move-diagonal-2 {
+  animation: move-diagonal-2 28s linear infinite;
+}
+.animate-move-diagonal-3 {
+  animation: move-diagonal-3 32s linear infinite;
+}
+.animate-orbit-1 {
+  animation: orbit-1 20s linear infinite;
+}
+.animate-orbit-2 {
+  animation: orbit-2 25s linear infinite reverse;
+}
+.animate-orbit-3 {
+  animation: orbit-3 15s linear infinite;
+}
+.animate-spin-slow {
+  animation: spin-slow 8s linear infinite;
+}
+.animate-spin-reverse {
+  animation: spin-reverse 6s linear infinite;
+}
+.animate-bounce-gentle {
+  animation: bounce-gentle 3s ease-in-out infinite;
+}
+.animate-bounce-soft {
+  animation: bounce-soft 4s ease-in-out infinite;
+}
+.animate-pulse-gentle {
+  animation: pulse-gentle 4s ease-in-out infinite;
+}
+.animate-wiggle {
+  animation: wiggle 2s ease-in-out infinite;
+}
+.animate-float-gentle {
+  animation: float-gentle 5s ease-in-out infinite;
+}
+.animate-scale-gentle {
+  animation: scale-gentle 6s ease-in-out infinite;
+}
+.animate-rotate-gentle {
+  animation: rotate-gentle 8s ease-in-out infinite;
+}
+.animate-sway {
+  animation: sway 3s ease-in-out infinite;
+}
+
+/* Enhanced Animations */
+@keyframes orbit-4 {
+  0% {
+    transform: translate(-50%, -50%) rotate(0deg) translateX(250px) rotate(0deg);
+  }
+  100% {
+    transform: translate(-50%, -50%) rotate(360deg) translateX(250px)
+      rotate(-360deg);
+  }
+}
+
+@keyframes orbit-5 {
+  0% {
+    transform: translate(-50%, -50%) rotate(0deg) translateX(120px) rotate(0deg);
+  }
+  100% {
+    transform: translate(-50%, -50%) rotate(-360deg) translateX(120px)
+      rotate(360deg);
+  }
+}
+
+@keyframes zigzag-1 {
+  0% {
+    transform: translateX(-100px) translateY(0px);
+  }
+  25% {
+    transform: translateX(25vw) translateY(-50px);
+  }
+  50% {
+    transform: translateX(50vw) translateY(50px);
+  }
+  75% {
+    transform: translateX(75vw) translateY(-30px);
+  }
+  100% {
+    transform: translateX(calc(100vw + 100px)) translateY(20px);
+  }
+}
+
+@keyframes zigzag-2 {
+  0% {
+    transform: translateX(-80px) translateY(0px);
+  }
+  20% {
+    transform: translateX(20vw) translateY(40px);
+  }
+  40% {
+    transform: translateX(40vw) translateY(-60px);
+  }
+  60% {
+    transform: translateX(60vw) translateY(30px);
+  }
+  80% {
+    transform: translateX(80vw) translateY(-40px);
+  }
+  100% {
+    transform: translateX(calc(100vw + 80px)) translateY(0px);
+  }
+}
+
+@keyframes zigzag-3 {
+  0% {
+    transform: translateX(-120px) translateY(0px);
+  }
+  16% {
+    transform: translateX(16vw) translateY(-70px);
+  }
+  33% {
+    transform: translateX(33vw) translateY(80px);
+  }
+  50% {
+    transform: translateX(50vw) translateY(-50px);
+  }
+  66% {
+    transform: translateX(66vw) translateY(60px);
+  }
+  83% {
+    transform: translateX(83vw) translateY(-40px);
+  }
+  100% {
+    transform: translateX(calc(100vw + 120px)) translateY(0px);
+  }
+}
+
+@keyframes spiral-1 {
+  0% {
+    transform: translate(0px, 0px) rotate(0deg) scale(0.5);
+  }
+  25% {
+    transform: translate(25vw, 25vh) rotate(90deg) scale(1);
+  }
+  50% {
+    transform: translate(50vw, 50vh) rotate(180deg) scale(1.5);
+  }
+  75% {
+    transform: translate(75vw, 75vh) rotate(270deg) scale(1);
+  }
+  100% {
+    transform: translate(100vw, 100vh) rotate(360deg) scale(0.5);
+  }
+}
+
+@keyframes spiral-2 {
+  0% {
+    transform: translate(0px, 0px) rotate(0deg) scale(1.5);
+  }
+  25% {
+    transform: translate(-25vw, 25vh) rotate(-90deg) scale(0.8);
+  }
+  50% {
+    transform: translate(-50vw, 50vh) rotate(-180deg) scale(0.5);
+  }
+  75% {
+    transform: translate(-75vw, 75vh) rotate(-270deg) scale(1.2);
+  }
+  100% {
+    transform: translate(-100vw, 100vh) rotate(-360deg) scale(1.5);
+  }
+}
+
+@keyframes float-random-1 {
+  0%,
+  100% {
+    transform: translate(0px, 0px) rotate(0deg);
+  }
+  25% {
+    transform: translate(50px, -30px) rotate(45deg);
+  }
+  50% {
+    transform: translate(-30px, 40px) rotate(-30deg);
+  }
+  75% {
+    transform: translate(40px, 20px) rotate(60deg);
+  }
+}
+
+@keyframes float-random-2 {
+  0%,
+  100% {
+    transform: translate(0px, 0px) rotate(0deg);
+  }
+  20% {
+    transform: translate(-40px, -50px) rotate(-45deg);
+  }
+  40% {
+    transform: translate(60px, -20px) rotate(90deg);
+  }
+  60% {
+    transform: translate(-20px, 60px) rotate(-60deg);
+  }
+  80% {
+    transform: translate(30px, -40px) rotate(120deg);
+  }
+}
+
+@keyframes float-random-3 {
+  0%,
+  100% {
+    transform: translate(0px, 0px) rotate(0deg);
+  }
+  33% {
+    transform: translate(70px, 30px) rotate(180deg);
+  }
+  66% {
+    transform: translate(-50px, -40px) rotate(-90deg);
+  }
+}
+
+@keyframes float-random-4 {
+  0%,
+  100% {
+    transform: translate(0px, 0px) rotate(0deg);
+  }
+  25% {
+    transform: translate(-60px, 50px) rotate(270deg);
+  }
+  50% {
+    transform: translate(80px, -30px) rotate(180deg);
+  }
+  75% {
+    transform: translate(-40px, -60px) rotate(90deg);
+  }
+}
+
+@keyframes wave-1 {
+  0% {
+    transform: translateX(-100px) translateY(0px);
+  }
+  25% {
+    transform: translateX(25vw) translateY(-80px);
+  }
+  50% {
+    transform: translateX(50vw) translateY(0px);
+  }
+  75% {
+    transform: translateX(75vw) translateY(80px);
+  }
+  100% {
+    transform: translateX(calc(100vw + 100px)) translateY(0px);
+  }
+}
+
+@keyframes wave-2 {
+  0% {
+    transform: translateX(-100px) translateY(0px);
+  }
+  20% {
+    transform: translateX(20vw) translateY(60px);
+  }
+  40% {
+    transform: translateX(40vw) translateY(-60px);
+  }
+  60% {
+    transform: translateX(60vw) translateY(60px);
+  }
+  80% {
+    transform: translateX(80vw) translateY(-60px);
+  }
+  100% {
+    transform: translateX(calc(100vw + 100px)) translateY(0px);
+  }
+}
+
+@keyframes wave-3 {
+  0% {
+    transform: translateX(-100px) translateY(0px);
+  }
+  33% {
+    transform: translateX(33vw) translateY(-100px);
+  }
+  66% {
+    transform: translateX(66vw) translateY(100px);
+  }
+  100% {
+    transform: translateX(calc(100vw + 100px)) translateY(0px);
+  }
+}
+
+@keyframes wave-4 {
+  0% {
+    transform: translateX(-100px) translateY(0px);
+  }
+  16% {
+    transform: translateX(16vw) translateY(40px);
+  }
+  33% {
+    transform: translateX(33vw) translateY(-80px);
+  }
+  50% {
+    transform: translateX(50vw) translateY(40px);
+  }
+  66% {
+    transform: translateX(66vw) translateY(-80px);
+  }
+  83% {
+    transform: translateX(83vw) translateY(40px);
+  }
+  100% {
+    transform: translateX(calc(100vw + 100px)) translateY(0px);
+  }
+}
+
+@keyframes corner-shoot-1 {
+  0% {
+    transform: translate(0px, 0px) rotate(0deg);
+  }
+  100% {
+    transform: translate(100vw, 100vh) rotate(720deg);
+  }
+}
+
+@keyframes corner-shoot-2 {
+  0% {
+    transform: translate(0px, 0px) rotate(0deg);
+  }
+  100% {
+    transform: translate(-100vw, 100vh) rotate(-720deg);
+  }
+}
+
+@keyframes corner-shoot-3 {
+  0% {
+    transform: translate(0px, 0px) rotate(0deg);
+  }
+  100% {
+    transform: translate(100vw, -100vh) rotate(720deg);
+  }
+}
+
+@keyframes corner-shoot-4 {
+  0% {
+    transform: translate(0px, 0px) rotate(0deg);
+  }
+  100% {
+    transform: translate(-100vw, -100vh) rotate(-720deg);
+  }
+}
+
+@keyframes bounce-ball-1 {
+  0%,
+  100% {
+    transform: translate(0px, 0px);
+  }
+  25% {
+    transform: translate(200px, -150px);
+  }
+  50% {
+    transform: translate(400px, 0px);
+  }
+  75% {
+    transform: translate(600px, -100px);
+  }
+}
+
+@keyframes bounce-ball-2 {
+  0%,
+  100% {
+    transform: translate(0px, 0px);
+  }
+  33% {
+    transform: translate(-300px, -200px);
+  }
+  66% {
+    transform: translate(-600px, 0px);
+  }
+}
+
+@keyframes bounce-ball-3 {
+  0%,
+  100% {
+    transform: translate(0px, 0px);
+  }
+  20% {
+    transform: translate(150px, -100px);
+  }
+  40% {
+    transform: translate(300px, 50px);
+  }
+  60% {
+    transform: translate(150px, -80px);
+  }
+  80% {
+    transform: translate(-150px, 30px);
+  }
+}
+
+/* Crazy Animations */
+@keyframes spin-fast {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(720deg);
+  }
+}
+@keyframes pulse-fast {
+  0%,
+  100% {
+    transform: scale(0.8);
+    opacity: 0.3;
+  }
+  50% {
+    transform: scale(1.3);
+    opacity: 0.8;
+  }
+}
+@keyframes wobble {
+  0%,
+  100% {
+    transform: rotate(0deg) scale(1);
+  }
+  25% {
+    transform: rotate(5deg) scale(1.1);
+  }
+  50% {
+    transform: rotate(-5deg) scale(0.9);
+  }
+  75% {
+    transform: rotate(3deg) scale(1.05);
+  }
+}
+@keyframes shake {
+  0%,
+  100% {
+    transform: translateX(0px);
+  }
+  25% {
+    transform: translateX(-10px);
+  }
+  75% {
+    transform: translateX(10px);
+  }
+}
+@keyframes bounce-crazy {
+  0%,
+  100% {
+    transform: translateY(0px) scale(1);
+  }
+  50% {
+    transform: translateY(-50px) scale(1.2);
+  }
+}
+@keyframes spin-wobble {
+  0% {
+    transform: rotate(0deg) scale(1);
+  }
+  25% {
+    transform: rotate(90deg) scale(1.1);
+  }
+  50% {
+    transform: rotate(180deg) scale(0.9);
+  }
+  75% {
+    transform: rotate(270deg) scale(1.05);
+  }
+  100% {
+    transform: rotate(360deg) scale(1);
+  }
+}
+@keyframes flip {
+  0% {
+    transform: rotateY(0deg);
+  }
+  50% {
+    transform: rotateY(180deg);
+  }
+  100% {
+    transform: rotateY(360deg);
+  }
+}
+@keyframes twirl {
+  0% {
+    transform: rotate(0deg) translateX(0px);
+  }
+  25% {
+    transform: rotate(90deg) translateX(20px);
+  }
+  50% {
+    transform: rotate(180deg) translateX(0px);
+  }
+  75% {
+    transform: rotate(270deg) translateX(-20px);
+  }
+  100% {
+    transform: rotate(360deg) translateX(0px);
+  }
+}
+@keyframes dance {
+  0%,
+  100% {
+    transform: translateY(0px) rotate(0deg);
+  }
+  25% {
+    transform: translateY(-20px) rotate(10deg);
+  }
+  50% {
+    transform: translateY(10px) rotate(-5deg);
+  }
+  75% {
+    transform: translateY(-15px) rotate(8deg);
+  }
+}
+@keyframes jiggle {
+  0%,
+  100% {
+    transform: rotate(0deg);
+  }
+  25% {
+    transform: rotate(2deg) translateX(2px);
+  }
+  50% {
+    transform: rotate(-2deg) translateX(-2px);
+  }
+  75% {
+    transform: rotate(1deg) translateX(1px);
+  }
+}
+@keyframes vibrate {
+  0%,
+  100% {
+    transform: translate(0px, 0px);
+  }
+  25% {
+    transform: translate(2px, -2px);
+  }
+  50% {
+    transform: translate(-2px, 2px);
+  }
+  75% {
+    transform: translate(2px, 2px);
+  }
+}
+@keyframes swing {
+  0%,
+  100% {
+    transform: rotate(0deg);
+  }
+  25% {
+    transform: rotate(15deg);
+  }
+  75% {
+    transform: rotate(-15deg);
+  }
+}
+@keyframes pendulum {
+  0%,
+  100% {
+    transform: rotate(0deg);
+  }
+  50% {
+    transform: rotate(30deg);
+  }
+}
+@keyframes elastic {
+  0%,
+  100% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.3) rotate(180deg);
+  }
+}
+@keyframes rubber {
+  0%,
+  100% {
+    transform: scaleX(1) scaleY(1);
+  }
+  25% {
+    transform: scaleX(1.2) scaleY(0.8);
+  }
+  75% {
+    transform: scaleX(0.8) scaleY(1.2);
+  }
+}
+@keyframes rocket {
+  0% {
+    transform: scale(0.5) rotate(0deg);
+  }
+  100% {
+    transform: scale(2) rotate(360deg);
+  }
+}
+@keyframes comet {
+  0% {
+    transform: scale(1) rotate(0deg);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(0.2) rotate(720deg);
+    opacity: 0.2;
+  }
+}
+@keyframes meteor {
+  0% {
+    transform: scale(0.2) rotate(0deg);
+    opacity: 0.2;
+  }
+  100% {
+    transform: scale(1.5) rotate(-720deg);
+    opacity: 1;
+  }
+}
+@keyframes blast {
+  0%,
+  100% {
+    transform: scale(1) rotate(0deg);
+  }
+  50% {
+    transform: scale(2) rotate(180deg);
+  }
+}
+@keyframes spin-bounce {
+  0%,
+  100% {
+    transform: rotate(0deg) translateY(0px);
+  }
+  50% {
+    transform: rotate(180deg) translateY(-30px);
+  }
+}
+@keyframes flip-bounce {
+  0%,
+  100% {
+    transform: rotateX(0deg) translateY(0px);
+  }
+  50% {
+    transform: rotateX(180deg) translateY(-25px);
+  }
+}
+@keyframes scale-bounce {
+  0%,
+  100% {
+    transform: scale(1) translateY(0px);
+  }
+  50% {
+    transform: scale(1.5) translateY(-40px);
+  }
+}
+
+/* New Animation Classes */
+.animate-orbit-4 {
+  animation: orbit-4 18s linear infinite;
+}
+.animate-orbit-5 {
+  animation: orbit-5 22s linear infinite reverse;
+}
+.animate-zigzag-1 {
+  animation: zigzag-1 18s linear infinite;
+}
+.animate-zigzag-2 {
+  animation: zigzag-2 22s linear infinite;
+}
+.animate-zigzag-3 {
+  animation: zigzag-3 16s linear infinite;
+}
+.animate-spiral-1 {
+  animation: spiral-1 30s linear infinite;
+}
+.animate-spiral-2 {
+  animation: spiral-2 25s linear infinite;
+}
+.animate-float-random-1 {
+  animation: float-random-1 8s ease-in-out infinite;
+}
+.animate-float-random-2 {
+  animation: float-random-2 10s ease-in-out infinite;
+}
+.animate-float-random-3 {
+  animation: float-random-3 12s ease-in-out infinite;
+}
+.animate-float-random-4 {
+  animation: float-random-4 9s ease-in-out infinite;
+}
+.animate-wave-1 {
+  animation: wave-1 20s linear infinite;
+}
+.animate-wave-2 {
+  animation: wave-2 24s linear infinite;
+}
+.animate-wave-3 {
+  animation: wave-3 18s linear infinite;
+}
+.animate-wave-4 {
+  animation: wave-4 26s linear infinite;
+}
+.animate-corner-shoot-1 {
+  animation: corner-shoot-1 15s linear infinite;
+}
+.animate-corner-shoot-2 {
+  animation: corner-shoot-2 18s linear infinite;
+}
+.animate-corner-shoot-3 {
+  animation: corner-shoot-3 20s linear infinite;
+}
+.animate-corner-shoot-4 {
+  animation: corner-shoot-4 16s linear infinite;
+}
+.animate-bounce-ball-1 {
+  animation: bounce-ball-1 12s ease-in-out infinite;
+}
+.animate-bounce-ball-2 {
+  animation: bounce-ball-2 14s ease-in-out infinite;
+}
+.animate-bounce-ball-3 {
+  animation: bounce-ball-3 10s ease-in-out infinite;
+}
+.animate-spin-fast {
+  animation: spin-fast 2s linear infinite;
+}
+.animate-pulse-fast {
+  animation: pulse-fast 1.5s ease-in-out infinite;
+}
+.animate-wobble {
+  animation: wobble 2s ease-in-out infinite;
+}
+.animate-shake {
+  animation: shake 0.5s ease-in-out infinite;
+}
+.animate-bounce-crazy {
+  animation: bounce-crazy 1s ease-in-out infinite;
+}
+.animate-spin-wobble {
+  animation: spin-wobble 4s ease-in-out infinite;
+}
+.animate-flip {
+  animation: flip 3s ease-in-out infinite;
+}
+.animate-twirl {
+  animation: twirl 5s ease-in-out infinite;
+}
+.animate-dance {
+  animation: dance 3s ease-in-out infinite;
+}
+.animate-jiggle {
+  animation: jiggle 1s ease-in-out infinite;
+}
+.animate-vibrate {
+  animation: vibrate 0.3s ease-in-out infinite;
+}
+.animate-swing {
+  animation: swing 4s ease-in-out infinite;
+}
+.animate-pendulum {
+  animation: pendulum 6s ease-in-out infinite;
+}
+.animate-elastic {
+  animation: elastic 4s ease-in-out infinite;
+}
+.animate-rubber {
+  animation: rubber 2s ease-in-out infinite;
+}
+.animate-rocket {
+  animation: rocket 8s ease-in-out infinite;
+}
+.animate-comet {
+  animation: comet 12s ease-in-out infinite;
+}
+.animate-meteor {
+  animation: meteor 10s ease-in-out infinite;
+}
+.animate-blast {
+  animation: blast 3s ease-in-out infinite;
+}
+.animate-spin-bounce {
+  animation: spin-bounce 4s ease-in-out infinite;
+}
+.animate-flip-bounce {
+  animation: flip-bounce 5s ease-in-out infinite;
+}
+.animate-scale-bounce {
+  animation: scale-bounce 3s ease-in-out infinite;
+}
+
+/* Animated Border Light */
+@keyframes border-light {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.animate-border-light {
+  position: relative;
+  border-radius: 1rem;
+}
+
+.animate-border-light::before {
+  content: "";
+  position: absolute;
+  inset: -2px;
+  background: conic-gradient(
+    from 0deg,
+    transparent 0deg,
+    transparent 270deg,
+    rgba(168, 85, 247, 0.8) 300deg,
+    rgba(147, 51, 234, 1) 330deg,
+    rgba(168, 85, 247, 0.8) 360deg,
+    transparent 30deg,
+    transparent 360deg
+  );
+  border-radius: inherit;
+  animation: border-light 3s linear infinite;
+  z-index: -1;
+}
+
+.animate-border-light::after {
+  content: "";
+  position: absolute;
+  inset: 2px;
+  background: inherit;
+  border-radius: inherit;
+  z-index: -1;
+}
diff --git a/ui/src/pages/PublicBookingPage.tsx b/ui/src/pages/PublicBookingPage.tsx
index d7b22bd..528df7c 100644
--- a/ui/src/pages/PublicBookingPage.tsx
+++ b/ui/src/pages/PublicBookingPage.tsx
@@ -405,7 +405,7 @@ export function PublicBookingPage() {
                 )}
                 {eventType?.location && (
                   <div className="flex items-center gap-3">
-                    <MapPinIcon className="w-5 h-5 text-green-600 dark:text-green-400" />
+                    <MapPinIcon className="w-5 h-5 text-purple-600 dark:text-purple-400" />
                     <div>
                       <Text className="text-gray-600 dark:text-gray-400 text-sm">
                         {eventType.location}
@@ -485,11 +485,11 @@ export function PublicBookingPage() {
                             ? "text-gray-300 dark:text-gray-600 cursor-not-allowed"
                             : selectedDate?.toDateString() ===
                               date.toDateString()
-                            ? "bg-blue-600 text-white"
+                            ? "bg-purple-600 text-white"
                             : isToday(date)
                             ? "bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-400 font-semibold"
                             : hasAvailableSlots(date)
-                            ? "text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 border-2 border-green-200 dark:border-green-800"
+                            ? "text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 border-2 border-purple-200 dark:border-purple-800"
                             : "text-gray-400 dark:text-gray-500 cursor-not-allowed"
                         }`}
                       >
diff --git a/ui/src/pages/availabilities.tsx b/ui/src/pages/availabilities.tsx
index fb32070..fa30313 100644
--- a/ui/src/pages/availabilities.tsx
+++ b/ui/src/pages/availabilities.tsx
@@ -146,9 +146,10 @@ export function AvailabilitiesPage() {
               variant="solid"
               size="lg"
               onPress={() => setExceptionModalOpen(true)}
-              className="[--btn-bg:var(--color-blue-800)]"
+              className="bg-[#dabdff] border-[#dabdff] text-[#1a1a1a] dark:bg-[#6911d9] dark:border-[#6911d9] dark:text-white hover:opacity-90 transition-opacity"
             >
-              <PlusIcon /> Ajouter une exception
+              <PlusIcon className="text-[#1a1a1a] dark:text-white" /> Ajouter
+              une exception
             </Button>
             <Button
               size="lg"
@@ -226,7 +227,7 @@ export function AvailabilitiesPage() {
                 {DAYS_OF_WEEK.map((day) => (
                   <div
                     key={day}
-                    className="bg-white dark:bg-gray-800 rounded-lg shadow p-2"
+                    className="bg-white dark:bg-gray-700/40 rounded-lg shadow-sm dark:shadow-gray-900/20 p-2 dark:border dark:border-gray-600/30"
                   >
                     <div className="space-y-2">
                       <AvailabilityCard
@@ -269,7 +270,7 @@ export function AvailabilitiesPage() {
                   </Text>
                 </div>
 
-                <div className="bg-white dark:bg-gray-800 rounded-lg shadow p-4">
+                <div className="bg-white dark:bg-gray-700/40 rounded-lg shadow-sm dark:shadow-gray-900/20 p-4 dark:border dark:border-gray-600/30">
                   <Strong className="block mb-2">Votre fuseau horaire</Strong>
                   <Text className="text-gray-500">
                     {Intl.DateTimeFormat().resolvedOptions().timeZone}
@@ -283,7 +284,7 @@ export function AvailabilitiesPage() {
                   </Text>
                 </div>
 
-                <div className="bg-white dark:bg-gray-800 rounded-lg shadow p-4">
+                <div className="bg-white dark:bg-gray-700/40 rounded-lg shadow-sm dark:shadow-gray-900/20 p-4 dark:border dark:border-gray-600/30">
                   <Strong className="block mb-2">Information</Strong>
                   <Text className="text-gray-500 text-sm">
                     Les créneaux horaires seront automatiquement convertis dans
@@ -317,15 +318,16 @@ export function AvailabilitiesPage() {
                 variant="solid"
                 size="lg"
                 onPress={() => setExceptionModalOpen(true)}
-                className="[--btn-bg:var(--color-blue-800)]"
+                className="bg-[#dabdff] border-[#dabdff] text-[#1a1a1a] dark:bg-[#6911d9] dark:border-[#6911d9] dark:text-white hover:opacity-90 transition-opacity"
               >
-                <PlusIcon /> Ajouter une exception
+                <PlusIcon className="text-[#1a1a1a] dark:text-white" /> Ajouter
+                une exception
               </Button>
             </div>
 
             {exceptions.length === 0 ? (
               <div className="text-center py-12">
-                <div className="bg-gray-50 dark:bg-gray-800 rounded-lg p-8">
+                <div className="bg-gray-50 dark:bg-gray-700/30 rounded-lg p-8 dark:border dark:border-gray-600/20">
                   <Text className="text-gray-500 dark:text-gray-400 text-lg mb-4">
                     Aucune exception définie
                   </Text>
@@ -340,7 +342,7 @@ export function AvailabilitiesPage() {
                 {exceptions.map((exception, index) => (
                   <div
                     key={`${exception.date}-${index}`}
-                    className="bg-white dark:bg-gray-800 rounded-lg shadow p-4 border border-gray-200 dark:border-gray-700"
+                    className="bg-white dark:bg-gray-700/40 rounded-lg shadow-sm dark:shadow-gray-900/20 p-4 border border-gray-200 dark:border-gray-600/50"
                   >
                     <div className="flex justify-between items-start">
                       <div className="flex-1">
@@ -598,7 +600,7 @@ export function AvailabilitiesPage() {
                     ]);
                   }}
                 >
-                  <PlusIcon className="w-4 h-4 mr-1" />
+                  <PlusIcon className="w-4 h-4 mr-1 text-[#1a1a1a] dark:text-white" />
                   Ajouter un créneau
                 </Button>
               </div>
diff --git a/ui/src/pages/bookings.tsx b/ui/src/pages/bookings.tsx
index acab950..28b3295 100644
--- a/ui/src/pages/bookings.tsx
+++ b/ui/src/pages/bookings.tsx
@@ -16,7 +16,7 @@ import { SearchIcon } from "lucide-react";
 import { CalendarIcon } from "@ui/ui-library/icons/outline/calendar";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { useEventsByTablo } from "@ui/hooks/events";
-import { useTablosList } from "@ui/hooks/tablos";
+import { useTablosList, useGetAllTabloAccess } from "@ui/hooks/tablos";
 import { EventAndTablo } from "@ui/types/events.types";
 import { LoadingSpinner } from "@ui/components/LoadingSpinner";
 import { EventDetailsModal } from "@ui/components/EventDetailsModal";
@@ -57,6 +57,8 @@ export const BookingsPage = () => {
   const { data: events = [], isLoading: eventsLoading } = useEventsByTablo(
     selectedTabloId !== "all" ? selectedTabloId : null
   );
+  // Fetch all tablo accesses for permissions
+  const { data: tabloAccess } = useGetAllTabloAccess();
 
   // Filter and search events
   const filteredEvents = useMemo(() => {
@@ -157,19 +159,19 @@ export const BookingsPage = () => {
 
     if (eventDate.getTime() === today.getTime()) {
       return (
-        <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">
+        <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900/60 dark:text-blue-200">
           Aujourd&apos;hui
         </span>
       );
     } else if (eventDate > today) {
       return (
-        <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
+        <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800 dark:bg-purple-900/60 dark:text-purple-200">
           À venir
         </span>
       );
     } else {
       return (
-        <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200">
+        <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800 dark:bg-gray-800/60 dark:text-gray-200">
           Passé
         </span>
       );
@@ -184,8 +186,17 @@ export const BookingsPage = () => {
     navigate(`/planning/create?date=${dateParam}${tabloParam}`);
   };
 
+  // Check if an event can be edited (admin access required)
+  const canEditEvent = (event: EventAndTablo) => {
+    return tabloAccess?.find(
+      (access) => access.tablo_id === event.tablo_id && access.is_admin
+    )
+      ? true
+      : false;
+  };
+
   const handleEditEvent = (event: EventAndTablo) => {
-    if (event.event_id && event.tablo_id) {
+    if (event.event_id && event.tablo_id && canEditEvent(event)) {
       navigate(`/planning/${event.tablo_id}/events/${event.event_id}/edit`);
     }
   };
@@ -198,7 +209,7 @@ export const BookingsPage = () => {
   return (
     <div className="min-h-screen">
       {/* Header */}
-      <header className="bg-white dark:bg-gray-800 shadow">
+      <header className="bg-white dark:bg-gray-700/40 shadow-sm dark:shadow-gray-900/20 dark:border-b dark:border-gray-600/30">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
           <div className="flex items-center justify-between">
             <div>
@@ -211,10 +222,10 @@ export const BookingsPage = () => {
             </div>
             <div className="flex items-center space-x-3">
               <Button
-                className="bg-emerald-700 text-white hover:bg-emerald-600"
+                className="bg-[#dabdff] border-[#dabdff] text-[#1a1a1a] dark:bg-[#6911d9] dark:border-[#6911d9] dark:text-white hover:opacity-90 transition-opacity"
                 onPress={handleCreateEvent}
               >
-                <CalendarIcon className="w-4 h-4 mr-2" />
+                <CalendarIcon className="w-4 h-4 mr-2 text-[#1a1a1a] dark:text-white" />
                 Nouvel événement
               </Button>
             </div>
@@ -225,12 +236,12 @@ export const BookingsPage = () => {
       {/* Main Content */}
       <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
         {/* Filters */}
-        <div className="bg-white dark:bg-gray-800 rounded-lg shadow p-6 mb-6">
+        <div className="bg-white dark:bg-gray-700/40 rounded-lg shadow-sm dark:shadow-gray-900/20 dark:border dark:border-gray-600/30 p-6 mb-6">
           <div className="flex flex-col lg:flex-row gap-4 items-start lg:items-center">
             {/* Search */}
             <div className="flex-1 w-full">
               <div className="relative">
-                <SearchIcon className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
+                <SearchIcon className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 dark:text-gray-300 w-4 h-4" />
                 <Input
                   type="text"
                   placeholder="Rechercher un événement..."
@@ -301,7 +312,7 @@ export const BookingsPage = () => {
         </div>
 
         {/* Events List */}
-        <div className="bg-white dark:bg-gray-800 rounded-lg shadow">
+        <div className="bg-white dark:bg-gray-700/40 rounded-lg shadow-sm dark:shadow-gray-900/20 dark:border dark:border-gray-600/30">
           {tablosLoading || eventsLoading ? (
             <div className="flex items-center justify-center h-screen">
               <LoadingSpinner />
@@ -323,7 +334,7 @@ export const BookingsPage = () => {
               {paginatedEvents.map((event) => (
                 <div
                   key={event.event_id}
-                  className="p-6 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors cursor-pointer"
+                  className="p-6 hover:bg-gray-50 dark:hover:bg-gray-600/40 transition-colors cursor-pointer"
                 >
                   <div className="flex items-start justify-between">
                     <div className="flex-1 min-w-0">
@@ -377,7 +388,7 @@ export const BookingsPage = () => {
 
         {/* Pagination Controls */}
         {totalItems > 0 && (
-          <div className="bg-white dark:bg-gray-800 rounded-lg shadow mt-4 px-6 py-4">
+          <div className="bg-white dark:bg-gray-700/40 rounded-lg shadow-sm dark:shadow-gray-900/20 dark:border dark:border-gray-600/30 mt-4 px-6 py-4">
             <div className="flex items-center justify-between">
               <div className="flex items-center space-x-4 text-sm text-gray-500 dark:text-gray-400">
                 <span>
@@ -475,7 +486,7 @@ export const BookingsPage = () => {
 
         {/* Stats Summary */}
         {filteredEvents.length > 0 && (
-          <div className="mt-6 bg-white dark:bg-gray-800 rounded-lg shadow p-6">
+          <div className="mt-6 bg-white dark:bg-gray-700/40 rounded-lg shadow-sm dark:shadow-gray-900/20 dark:border dark:border-gray-600/30 p-6">
             <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
               <div className="text-center">
                 <div className="text-2xl font-bold text-gray-900 dark:text-gray-100">
@@ -529,6 +540,7 @@ export const BookingsPage = () => {
             setSelectedEvent(null);
           }}
           onEdit={() => selectedEvent && handleEditEvent(selectedEvent)}
+          canEdit={selectedEvent ? canEditEvent(selectedEvent) : false}
         />
       </main>
     </div>
diff --git a/ui/src/pages/chat.tsx b/ui/src/pages/chat.tsx
index d9d7d26..3345035 100644
--- a/ui/src/pages/chat.tsx
+++ b/ui/src/pages/chat.tsx
@@ -36,9 +36,9 @@ export function ChatPage() {
   }, [channelFromUrl]);
 
   return (
-    <div className="flex h-screen bg-gray-50 dark:bg-gray-900">
+    <div className="flex h-screen bg-gray-50 dark:bg-background">
       <div
-        className={`border-r border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 transition-all duration-300 ease-in-out overflow-hidden ${
+        className={`border-r border-gray-200 dark:border-gray-600/50 bg-white dark:bg-gray-700/40 transition-all duration-300 ease-in-out overflow-hidden ${
           isChannelListExpanded ? "w-80" : "w-0"
         }`}
       >
@@ -65,7 +65,7 @@ export function ChatPage() {
           )}
         />
       </div>
-      <div className="flex-1 bg-white dark:bg-gray-800">
+      <div className="flex-1 bg-white dark:bg-gray-700/40">
         <Channel channel={channel}>
           <Window>
             <CustomChannelHeader
diff --git a/ui/src/pages/event-types-page.tsx b/ui/src/pages/event-types-page.tsx
index 841f792..781b0aa 100644
--- a/ui/src/pages/event-types-page.tsx
+++ b/ui/src/pages/event-types-page.tsx
@@ -109,10 +109,10 @@ export function EventTypesPage() {
         <Button
           size="lg"
           variant="solid"
-          className="[--btn-bg:var(--color-blue-800)]"
+          className="bg-[#dabdff] border-[#dabdff] text-[#1a1a1a] dark:bg-[#6911d9] dark:border-[#6911d9] dark:text-white hover:opacity-90 transition-opacity"
           onPress={handleCreateEventType}
         >
-          <PlusIcon /> Nouveau type
+          <PlusIcon className="text-[#1a1a1a] dark:text-white" /> Nouveau type
         </Button>
       </div>
 
@@ -121,7 +121,7 @@ export function EventTypesPage() {
           {eventTypesData?.map((eventType) => (
             <div
               key={eventType.id}
-              className={`bg-white dark:bg-gray-800 rounded-lg shadow p-6 border ${
+              className={`bg-white dark:bg-gray-700/40 rounded-lg shadow-sm dark:shadow-gray-900/20 dark:border-gray-600/50 p-6 border ${
                 eventType.isActive ? "opacity-100" : "opacity-60"
               }`}
             >
@@ -139,7 +139,7 @@ export function EventTypesPage() {
                         "_blank"
                       )
                     }
-                    className="text-gray-500 hover:text-blue-600"
+                    className="text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400"
                     tooltip="Aperçu"
                   >
                     <ExternalLinkIcon className="w-4 h-4" />
@@ -148,7 +148,7 @@ export function EventTypesPage() {
                     copyValue={getPublicLink(eventType.standardName)}
                     label="Copier le lien"
                     labelAfterCopied="Lien copié"
-                    className="text-gray-500 hover:text-blue-600"
+                    className="text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400"
                   ></CopyButton>
                   <Button
                     variant="plain"
@@ -159,7 +159,7 @@ export function EventTypesPage() {
                         eventType as EventTypeConfig
                       )
                     }
-                    className="text-gray-500 hover:text-blue-600"
+                    className="text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400"
                   >
                     <EditIcon className="w-4 h-4" />
                   </Button>
@@ -167,7 +167,7 @@ export function EventTypesPage() {
                     variant="plain"
                     isIconOnly
                     onPress={() => deleteEventType({ id: eventType.id })}
-                    className="text-gray-500 hover:text-red-600"
+                    className="text-gray-500 dark:text-gray-400 hover:text-red-600 dark:hover:text-red-400"
                   >
                     <TrashIcon className="w-4 h-4" />
                   </Button>
@@ -180,12 +180,16 @@ export function EventTypesPage() {
 
               <div className="space-y-2 text-sm">
                 <div className="flex justify-between">
-                  <span className="text-gray-500">Durée:</span>
+                  <span className="text-gray-500 dark:text-gray-400">
+                    Durée:
+                  </span>
                   <span className="font-medium">{eventType.duration} min</span>
                 </div>
                 {eventType.bufferTime && (
                   <div className="flex justify-between">
-                    <span className="text-gray-500">Temps de battement:</span>
+                    <span className="text-gray-500 dark:text-gray-400">
+                      Temps de battement:
+                    </span>
                     <span className="font-medium">
                       {eventType.bufferTime} min
                     </span>
@@ -193,7 +197,9 @@ export function EventTypesPage() {
                 )}
                 {eventType.maxBookingsPerDay && (
                   <div className="flex justify-between">
-                    <span className="text-gray-500">Max par jour:</span>
+                    <span className="text-gray-500 dark:text-gray-400">
+                      Max par jour:
+                    </span>
                     <span className="font-medium">
                       {eventType.maxBookingsPerDay}
                     </span>
@@ -201,7 +207,7 @@ export function EventTypesPage() {
                 )}
                 {eventType.minAdvanceBooking && (
                   <div className="flex justify-between">
-                    <span className="text-gray-500">
+                    <span className="text-gray-500 dark:text-gray-400">
                       Réservation à l&apos;avance:
                     </span>
                     <span className="font-medium">
@@ -215,7 +221,9 @@ export function EventTypesPage() {
                   </div>
                 )}
                 <div className="flex justify-between items-center pt-2 border-t border-gray-200 dark:border-gray-700">
-                  <span className="text-gray-500">Statut:</span>
+                  <span className="text-gray-500 dark:text-gray-400">
+                    Statut:
+                  </span>
                   <ToggleButton
                     isSelected={eventType.isActive}
                     onChange={() =>
@@ -237,15 +245,16 @@ export function EventTypesPage() {
 
         {eventTypesData?.length === 0 && (
           <div className="text-center py-12">
-            <Text className="text-gray-500 mb-4">
+            <Text className="text-gray-500 dark:text-gray-400 mb-4">
               Aucun type d&apos;événement configuré
             </Text>
             <Button
               variant="solid"
               onPress={handleCreateEventType}
-              className="[--btn-bg:var(--color-blue-800)]"
+              className="bg-[#dabdff] border-[#dabdff] text-[#1a1a1a] dark:bg-[#6911d9] dark:border-[#6911d9] dark:text-white hover:opacity-90 transition-opacity"
             >
-              <PlusIcon /> Créer votre premier type
+              <PlusIcon className="text-[#1a1a1a] dark:text-white" /> Créer
+              votre premier type
             </Button>
           </div>
         )}
diff --git a/ui/src/pages/login.tsx b/ui/src/pages/login.tsx
index 261cad9..8df9c72 100644
--- a/ui/src/pages/login.tsx
+++ b/ui/src/pages/login.tsx
@@ -6,6 +6,9 @@ import { useLoginEmail } from "@ui/hooks/auth";
 import { Form } from "@ui/ui-library/form";
 import { LoginWithGoogle } from "@ui/components/BrandButtons/LoginWithGoogle";
 import { Link } from "react-router-dom";
+import { useTheme } from "@ui/contexts/ThemeContext";
+import { SunIcon, MoonIcon, MonitorIcon } from "lucide-react";
+import { AnimatedBackground } from "@ui/components/AnimatedBackground";
 
 export function LoginPage() {
   const redirectUrl = localStorage.getItem("redirectUrl");
@@ -21,6 +24,32 @@ export function LoginPage() {
     password: "",
   });
 
+  // Theme
+  const { theme, setTheme } = useTheme();
+
+  const toggleTheme = () => {
+    if (theme === "light") {
+      setTheme("dark");
+    } else if (theme === "dark") {
+      setTheme("system");
+    } else {
+      setTheme("light");
+    }
+  };
+
+  const getThemeIcon = () => {
+    switch (theme) {
+      case "light":
+        return <SunIcon className="w-5 h-5" />;
+      case "dark":
+        return <MoonIcon className="w-5 h-5" />;
+      case "system":
+        return <MonitorIcon className="w-5 h-5" />;
+      default:
+        return <SunIcon className="w-5 h-5" />;
+    }
+  };
+
   const onSubmit = (e: React.FormEvent) => {
     e.preventDefault();
     login({
@@ -30,128 +59,155 @@ export function LoginPage() {
   };
 
   return (
-    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-100 via-blue-50 to-white dark:bg-gradient-to-br dark:from-slate-900 dark:via-blue-950 dark:via-blue-900 dark:to-blue-800">
+    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-purple-100 via-purple-50 to-white dark:bg-gradient-to-br dark:from-gray-900 dark:via-slate-900 dark:via-gray-800 dark:to-slate-800 animate-gradient-x bg-[length:400%_400%] relative overflow-hidden">
+      <AnimatedBackground />
       <div
         className={twMerge(
-          "w-full max-w-lg p-8 bg-white dark:bg-slate-800/50 backdrop-blur-lg rounded-2xl",
-          "border border-blue-200 dark:border-blue-900/30",
-          "shadow-xl"
+          "w-full max-w-lg rounded-2xl animate-border-light",
+          "shadow-2xl shadow-purple-500/10 dark:shadow-black/30"
         )}
         onClick={(e) => e.stopPropagation()}
       >
-        <div className="mb-6">
-          <Link
-            to="/landing"
-            className="inline-flex items-center text-sm text-slate-600 dark:text-slate-400 hover:text-slate-800 dark:hover:text-slate-200 transition-colors"
-          >
-            <svg
-              className="w-4 h-4 mr-2"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
+        <div className="relative w-full h-full p-8 bg-white/80 dark:bg-slate-900/80 backdrop-blur-md rounded-2xl border border-purple-200 dark:border-purple-400/30 z-10">
+          <div className="mb-6 flex items-center justify-between">
+            <a
+              href="https://www.xtablo.com"
+              className="inline-flex items-center text-sm text-slate-600 dark:text-slate-400 hover:text-slate-800 dark:hover:text-slate-200 transition-colors"
             >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M15 19l-7-7 7-7"
-              />
-            </svg>
-            Retour à l&apos;accueil
-          </Link>
-        </div>
-
-        <h1 className="text-3xl font-bold text-slate-900 dark:text-white mb-8 text-center">
-          Se connecter
-        </h1>
-
-        <div className="space-y-4 flex flex-col items-center">
-          <Form
-            className="space-y-4 w-95 max-w-md mx-auto"
-            onSubmit={onSubmit}
-            validationErrors={errors}
-          >
-            <TextField isRequired name="email">
-              <Label>
-                Email <span className="text-red-500">*</span>
-              </Label>
-              <Input
-                type="email"
-                value={formData.email}
-                onChange={(e) =>
-                  setFormData({ ...formData, email: e.target.value })
-                }
-                required
-              />
-              <FieldError />
-            </TextField>
-
-            <TextField isRequired name="password">
-              <Label>
-                Mot de passe <span className="text-red-500">*</span>
-              </Label>
-              <Input
-                type="password"
-                value={formData.password}
-                onChange={(e) =>
-                  setFormData({ ...formData, password: e.target.value })
-                }
-                required
-              />
-              <FieldError />
-            </TextField>
-
-            <div className="flex items-center justify-between">
-              <Link to="/reset-password">
-                <a className="text-sm text-blue-600 hover:text-blue-500">
-                  Mot de passe oublié ?
-                </a>
-              </Link>
-            </div>
-
-            <Button
-              className={twMerge(
-                "w-full bg-blue-700 text-white",
-                "hover:bg-blue-600"
-              )}
-              type="submit"
-              pendingLabel="Connexion..."
-            >
-              {isPending ? "Connexion..." : "Se connecter"}
-            </Button>
-          </Form>
-
-          <div className="relative my-6">
-            <div className="absolute inset-0 flex items-center">
-              <div className="w-full border-t border-slate-200 dark:border-slate-700"></div>
-            </div>
-            <div className="relative flex justify-center text-sm">
-              <span
-                className={twMerge(
-                  "px-4 py-1 bg-white dark:bg-slate-800",
-                  "text-slate-500 dark:text-slate-400",
-                  "text-sm font-medium",
-                  "rounded-full",
-                  "relative z-10",
-                  "before:absolute before:w-[100px] before:h-[1px] before:bg-slate-300 dark:before:bg-slate-600 before:left-[-110px] before:top-1/2",
-                  "after:absolute after:w-[100px] after:h-[1px] after:bg-slate-300 dark:after:bg-slate-600 after:right-[-110px] after:top-1/2"
-                )}
+              <svg
+                className="w-4 h-4 mr-2"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
               >
-                Ou continuer avec
-              </span>
-            </div>
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M15 19l-7-7 7-7"
+                />
+              </svg>
+              Retour à l&apos;accueil
+            </a>
+
+            {/* Theme Toggle */}
+            <Button
+              variant="plain"
+              isIconOnly
+              onPress={toggleTheme}
+              className="text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200 p-2"
+              aria-label={`Changer le thème (actuellement: ${theme})`}
+            >
+              {getThemeIcon()}
+            </Button>
           </div>
 
-          <LoginWithGoogle />
+          {/* Xtablo Icon */}
+          <div className="flex justify-center mb-6">
+            <img
+              src="/icon.png"
+              alt="Xtablo"
+              className="w-16 h-16 object-contain block dark:hidden"
+            />
+            <img
+              src="/logo_white.png"
+              alt="Xtablo"
+              className="w-16 h-16 object-contain hidden dark:block"
+            />
+          </div>
 
-          <p className="text-center text-sm text-slate-600 dark:text-slate-400">
-            Pas encore de compte ?{" "}
-            <Link to="/signup">
-              <a className="text-blue-600 hover:text-blue-500 font-medium">
-                S&apos;inscrire
-              </a>
-            </Link>
-          </p>
+          <h1 className="text-3xl font-bold text-slate-900 dark:text-white mb-8 text-center">
+            Se connecter à Xtablo
+          </h1>
+
+          <div className="space-y-4 flex flex-col items-center">
+            <Form
+              className="space-y-4 w-95 max-w-md mx-auto"
+              onSubmit={onSubmit}
+              validationErrors={errors}
+            >
+              <TextField isRequired name="email">
+                <Label>
+                  Email <span className="text-red-500">*</span>
+                </Label>
+                <Input
+                  type="email"
+                  value={formData.email}
+                  onChange={(e) =>
+                    setFormData({ ...formData, email: e.target.value })
+                  }
+                  required
+                />
+                <FieldError />
+              </TextField>
+
+              <TextField isRequired name="password">
+                <Label>
+                  Mot de passe <span className="text-red-500">*</span>
+                </Label>
+                <Input
+                  type="password"
+                  value={formData.password}
+                  onChange={(e) =>
+                    setFormData({ ...formData, password: e.target.value })
+                  }
+                  required
+                />
+                <FieldError />
+              </TextField>
+
+              {/* <div className="flex items-center justify-between">
+                <Link to="/reset-password">
+                  <a className="text-sm text-purple-600 hover:text-purple-500 dark:text-purple-400 dark:hover:text-purple-300">
+                    Mot de passe oublié ?
+                  </a>
+                </Link>
+              </div> */}
+
+              <Button
+                className={twMerge(
+                  "w-full bg-black border-black text-white dark:bg-black dark:border-black dark:text-white",
+                  "hover:bg-gray-800 dark:hover:bg-gray-800 transition-colors"
+                )}
+                type="submit"
+                pendingLabel="Connexion..."
+              >
+                {isPending ? "Connexion..." : "Se connecter"}
+              </Button>
+            </Form>
+
+            <div className="relative my-6">
+              <div className="absolute inset-0 flex items-center">
+                <div className="w-full border-t border-slate-200 dark:border-slate-700"></div>
+              </div>
+              <div className="relative flex justify-center text-sm">
+                <span
+                  className={twMerge(
+                    "px-4 py-1 bg-white dark:bg-slate-800",
+                    "text-slate-500 dark:text-slate-400",
+                    "text-sm font-medium",
+                    "rounded-full",
+                    "relative z-10",
+                    "before:absolute before:w-[100px] before:h-[1px] before:bg-slate-300 dark:before:bg-slate-600 before:left-[-110px] before:top-1/2",
+                    "after:absolute after:w-[100px] after:h-[1px] after:bg-slate-300 dark:after:bg-slate-600 after:right-[-110px] after:top-1/2"
+                  )}
+                >
+                  Ou continuer avec
+                </span>
+              </div>
+            </div>
+
+            <LoginWithGoogle />
+
+            <p className="text-center text-sm text-slate-600 dark:text-slate-400">
+              Pas encore de compte ?{" "}
+              <Link to="/signup">
+                <a className="text-black hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-300 font-medium text-sm px-2 py-1 rounded  border-gray-300 dark:border-slate-600 hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors">
+                  S&apos;inscrire
+                </a>
+              </Link>
+            </p>
+          </div>
         </div>
       </div>
     </div>
diff --git a/ui/src/pages/planning.tsx b/ui/src/pages/planning.tsx
index 6588391..9338b21 100644
--- a/ui/src/pages/planning.tsx
+++ b/ui/src/pages/planning.tsx
@@ -1,5 +1,5 @@
 import { useState, useEffect } from "react";
-import { useTablosList } from "@ui/hooks/tablos";
+import { useGetAllTabloAccess, useTablosList } from "@ui/hooks/tablos";
 import { useEventsByTablo, useDeleteEvent } from "@ui/hooks/events";
 import {
   Select,
@@ -13,6 +13,7 @@ import { generateICSFromEvents, downloadICSFile } from "@ui/utils/helpers";
 import { ImportICSModal } from "@ui/components/ImportICSModal";
 import { WebcalModal } from "@ui/components/WebcalModal";
 import { FolderInputIcon, PlusIcon } from "lucide-react";
+import { EventAndTablo } from "@ui/types/events.types";
 
 type ViewType = "month" | "week" | "day";
 
@@ -34,9 +35,28 @@ export const PlanningPage = () => {
   // Fetch events for selected tablo or all tablos
   const { data: tabloEvents = [], isLoading: tabloEventsLoading } =
     useEventsByTablo(selectedTabloId !== "all" ? selectedTabloId : null);
+  // Fetch all tablo accesses
+  const { data: tabloAccess } = useGetAllTabloAccess();
 
   const deleteEvent = useDeleteEvent();
 
+  // Check if an event can be deleted (e.g., based on permissions, event status, etc.)
+  const canDeleteEvent = (event: EventAndTablo) => {
+    if (
+      tabloAccess?.find(
+        (access) => access.tablo_id === event.tablo_id && access.is_admin
+      )
+    ) {
+      return true;
+    }
+    return false;
+  };
+
+  // Check if an event can be edited (same logic as delete - admin access required)
+  const canEditEvent = (event: EventAndTablo) => {
+    return canDeleteEvent(event);
+  };
+
   // Keyboard shortcuts for view switching
   useEffect(() => {
     const handleKeyPress = (event: KeyboardEvent) => {
@@ -251,12 +271,13 @@ export const PlanningPage = () => {
         } ${startOfWeek.getFullYear()}`;
       }
     } else {
-      return currentDate.toLocaleDateString("fr-FR", {
+      const dateString = currentDate.toLocaleDateString("fr-FR", {
         weekday: "long",
         year: "numeric",
         month: "long",
         day: "numeric",
       });
+      return dateString.charAt(0).toUpperCase() + dateString.slice(1);
     }
   };
 
@@ -303,7 +324,7 @@ export const PlanningPage = () => {
   );
 
   const renderMonthView = () => (
-    <div className="flex-1 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700">
+    <div className="flex-1 bg-white dark:bg-gray-700/40 border border-gray-200 dark:border-gray-600/50">
       {/* Days header */}
       <div className="grid grid-cols-7 border-b border-gray-200 dark:border-gray-700">
         {dayNamesShort.map((day) => (
@@ -327,8 +348,8 @@ export const PlanningPage = () => {
                 : ""
             } ${
               day
-                ? "cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700"
-                : "bg-gray-50 dark:bg-gray-900"
+                ? "cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-600/40"
+                : "bg-gray-50 dark:bg-gray-800/60"
             } ${
               day && formatDate(day) === formatDate(new Date())
                 ? "bg-blue-50 dark:bg-blue-900/20"
@@ -359,25 +380,30 @@ export const PlanningPage = () => {
                 </div>
                 <div className="space-y-1">
                   {getEventsForDate(day)
+                    .sort((a, b) => a.start_time.localeCompare(b.start_time))
                     .slice(0, 3)
                     .map((event) => (
                       <div
                         key={event.event_id}
-                        className={`text-[10px] px-1.5 py-0.5 rounded text-white ${event.tablo_color} truncate cursor-pointer hover:opacity-80 group relative leading-tight`}
+                        className={`text-[10px] px-1.5 py-1 rounded text-white ${
+                          event.tablo_color
+                        } truncate group relative leading-tight ${
+                          canEditEvent(event)
+                            ? "cursor-pointer hover:opacity-80"
+                            : "cursor-default opacity-75"
+                        }`}
                         title={`${formatTime(event.start_time)} ${event.title}${
                           selectedTabloId === "all" && event.tablo_name
                             ? ` - ${event.tablo_name}`
                             : ""
-                        }`}
+                        }${!canEditEvent(event) ? " (Lecture seule)" : ""}`}
                         onClick={(e) => {
                           e.stopPropagation();
-                          navigate({
-                            pathname: "/planning/create",
-                            search:
-                              selectedTabloId === "all"
-                                ? `?date=${day.toISOString()}`
-                                : `?date=${day.toISOString()}&tablo_id=${selectedTabloId}`,
-                          });
+                          if (canEditEvent(event)) {
+                            navigate(
+                              `/planning/${event.tablo_id}/events/${event.event_id}/edit`
+                            );
+                          }
                         }}
                       >
                         <div className="truncate">
@@ -388,16 +414,18 @@ export const PlanningPage = () => {
                             </span>
                           )}
                         </div>
-                        <button
-                          onClick={(e) => {
-                            e.stopPropagation();
-                            deleteEvent.mutate(event.event_id);
-                          }}
-                          className="absolute -top-1 -right-1 w-5 h-5 bg-red-500 text-white rounded-full opacity-0 group-hover:opacity-100 transition-all text-sm flex items-center justify-center hover:bg-red-600 hover:scale-110 shadow-sm"
-                          title="Supprimer l'événement"
-                        >
-                          ×
-                        </button>
+                        {canDeleteEvent(event) && (
+                          <button
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              deleteEvent.mutate(event.event_id);
+                            }}
+                            className="absolute -top-1 -right-1 w-5 h-5 bg-red-500 text-white rounded-full opacity-0 group-hover:opacity-100 transition-all text-sm flex items-center justify-center hover:bg-red-600 hover:scale-110 shadow-sm"
+                            title="Supprimer l'événement"
+                          >
+                            ×
+                          </button>
+                        )}
                       </div>
                     ))}
                   {getEventsForDate(day).length > 3 && (
@@ -415,7 +443,7 @@ export const PlanningPage = () => {
   );
 
   const renderWeekView = () => (
-    <div className="flex-1 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 flex flex-col">
+    <div className="flex-1 bg-white dark:bg-gray-700/40 border border-gray-200 dark:border-gray-600/50 flex flex-col">
       {/* Week header */}
       <div className="flex border-b border-gray-200 dark:border-gray-700">
         <div className="w-20 p-4 border-r border-gray-200 dark:border-gray-700 flex-shrink-0"></div>
@@ -455,7 +483,7 @@ export const PlanningPage = () => {
             {getWeekDays().map((day, index) => (
               <div
                 key={`${day.toISOString()}-${time}`}
-                className={`flex-1 min-h-[60px] border-r border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer relative ${
+                className={`flex-1 min-h-[60px] border-r border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600/40 cursor-pointer relative ${
                   index === 6 ? "border-r-0" : ""
                 }`}
                 onClick={() => {
@@ -493,17 +521,35 @@ export const PlanningPage = () => {
                     return (
                       <div
                         key={event.event_id}
-                        className={`absolute left-1 right-1 p-0.5 rounded text-white ${event.tablo_color} text-xs overflow-hidden z-10 group cursor-pointer hover:opacity-90`}
+                        className={`absolute left-1 right-1 p-0.5 rounded text-white ${
+                          event.tablo_color
+                        } text-xs overflow-hidden z-10 group ${
+                          canEditEvent(event)
+                            ? "cursor-pointer hover:opacity-90"
+                            : "cursor-default opacity-75"
+                        }`}
                         style={{
                           top: `${eventOffset}px`,
                           height: `${eventHeight}px`,
                           minHeight: "30px",
                         }}
+                        title={`${formatTime(event.start_time)} - ${formatTime(
+                          event.end_time
+                        )} ${event.title}${
+                          selectedTabloId === "all" && event.tablo_name
+                            ? ` - ${event.tablo_name}`
+                            : ""
+                        }${!canEditEvent(event) ? " (Lecture seule)" : ""}`}
                         onClick={(e) => {
                           e.stopPropagation();
+                          if (canEditEvent(event)) {
+                            navigate(
+                              `/planning/${event.tablo_id}/events/${event.event_id}/edit`
+                            );
+                          }
                         }}
                       >
-                        <div className="text-[10px] font-medium truncate leading-tight">
+                        <div className="text-[10px] font-medium leading-tight">
                           {event.title}
                           {selectedTabloId === "all" && event.tablo_name && (
                             <span className="opacity-75 ml-1">
@@ -517,16 +563,18 @@ export const PlanningPage = () => {
                             {formatTime(event.end_time)}
                           </div>
                         )}
-                        <button
-                          onClick={(e) => {
-                            e.stopPropagation();
-                            deleteEvent.mutate(event.event_id);
-                          }}
-                          className="absolute -top-1 -right-1 w-4 h-4 bg-red-500 text-white rounded-full opacity-0 group-hover:opacity-100 transition-all text-xs flex items-center justify-center hover:bg-red-600 hover:scale-110 shadow-sm z-30"
-                          title="Supprimer l'événement"
-                        >
-                          ×
-                        </button>
+                        {canDeleteEvent(event) && (
+                          <button
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              deleteEvent.mutate(event.event_id);
+                            }}
+                            className="absolute -top-1 -right-1 w-5 h-5 bg-red-500 text-white rounded-full opacity-0 group-hover:opacity-100 transition-all text-sm flex items-center justify-center hover:bg-red-600 hover:scale-110 shadow-sm"
+                            title="Supprimer l'événement"
+                          >
+                            ×
+                          </button>
+                        )}
                       </div>
                     );
                   })}
@@ -539,7 +587,7 @@ export const PlanningPage = () => {
   );
 
   const renderDayView = () => (
-    <div className="flex-1 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700">
+    <div className="flex-1 bg-white dark:bg-gray-700/40 border border-gray-200 dark:border-gray-600/50">
       {/* Day header */}
       <div className="p-4 border-b border-gray-200 dark:border-gray-700 text-center">
         <div className="text-sm text-gray-500 dark:text-gray-400 uppercase">
@@ -555,7 +603,7 @@ export const PlanningPage = () => {
         {timeSlots.map((time) => (
           <div
             key={time}
-            className="flex border-b border-gray-100 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer relative min-h-[60px]"
+            className="flex border-b border-gray-100 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600/40 cursor-pointer relative min-h-[60px]"
             onClick={() => {
               const [hour] = time.split(":").map(Number);
               const dateWithTime = new Date(currentDate);
@@ -595,14 +643,32 @@ export const PlanningPage = () => {
                   return (
                     <div
                       key={event.event_id}
-                      className={`absolute left-2 right-2 p-1 rounded text-white ${event.tablo_color} overflow-hidden z-10 group cursor-pointer hover:opacity-90`}
+                      className={`absolute left-2 right-2 p-1 rounded text-white ${
+                        event.tablo_color
+                      } overflow-hidden z-10 group ${
+                        canEditEvent(event)
+                          ? "cursor-pointer hover:opacity-90"
+                          : "cursor-default opacity-75"
+                      }`}
                       style={{
                         top: `${eventOffset}px`,
                         height: `${eventHeight}px`,
                         minHeight: "30px",
                       }}
+                      title={`${formatTime(event.start_time)} - ${formatTime(
+                        event.end_time
+                      )} ${event.title}${
+                        selectedTabloId === "all" && event.tablo_name
+                          ? ` - ${event.tablo_name}`
+                          : ""
+                      }${!canEditEvent(event) ? " (Lecture seule)" : ""}`}
                       onClick={(e) => {
                         e.stopPropagation();
+                        if (canEditEvent(event)) {
+                          navigate(
+                            `/planning/${event.tablo_id}/events/${event.event_id}/edit`
+                          );
+                        }
                       }}
                     >
                       <div className="text-[10px] font-medium truncate leading-tight">
@@ -624,16 +690,18 @@ export const PlanningPage = () => {
                           {event.description}
                         </div>
                       )}
-                      <button
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          deleteEvent.mutate(event.event_id);
-                        }}
-                        className="absolute -top-1 -right-1 w-4 h-4 bg-red-500 text-white rounded-full opacity-0 group-hover:opacity-100 transition-all text-xs flex items-center justify-center hover:bg-red-600 hover:scale-110 shadow-sm z-30"
-                        title="Supprimer l'événement"
-                      >
-                        ×
-                      </button>
+                      {canDeleteEvent(event) && (
+                        <button
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            deleteEvent.mutate(event.event_id);
+                          }}
+                          className="absolute -top-1 -right-1 w-5 h-5 bg-red-500 text-white rounded-full opacity-0 group-hover:opacity-100 transition-all text-sm flex items-center justify-center hover:bg-red-600 hover:scale-110 shadow-sm"
+                          title="Supprimer l'événement"
+                        >
+                          ×
+                        </button>
+                      )}
                     </div>
                   );
                 })}
@@ -645,16 +713,13 @@ export const PlanningPage = () => {
   );
 
   return (
-    <div className="min-h-screen bg-gray-100 dark:bg-gray-900">
+    <div className="min-h-screen bg-gray-100 dark:bg-background">
       <div className="flex">
         {/* Sidebar */}
-        <div className="w-64 bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700 min-h-screen">
+        <div className="w-64 bg-white dark:bg-gray-700/40 border-r border-gray-200 dark:border-gray-600/50 min-h-screen">
           <div className="p-4">
             {/* Tablo Selector */}
             <div className="mb-4">
-              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-                Tablo
-              </label>
               <Select
                 placeholder={
                   tablosLoading ? "Chargement..." : "Sélectionner un tablo"
@@ -693,15 +758,15 @@ export const PlanningPage = () => {
                   );
                 }
               }}
-              className="w-full px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-medium shadow-sm disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center space-x-2"
+              className="w-full px-4 py-2 bg-[#dabdff] border-[#dabdff] text-[#1a1a1a] dark:bg-[#6911d9] dark:border-[#6911d9] dark:text-white hover:opacity-90 transition-opacity font-medium shadow-sm disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center space-x-2 rounded-lg"
             >
-              <PlusIcon className="w-5 h-5 mr-2" />
+              <PlusIcon className="w-5 h-5 mr-2 text-[#1a1a1a] dark:text-white" />
               <span className="text-sm">Créer un événement</span>
             </button>
 
             <button
               onClick={() => setIsImportModalOpen(true)}
-              className="w-full px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors font-medium shadow-sm mt-2 flex items-center justify-center space-x-2"
+              className="w-full px-4 py-2 bg-green-600 dark:bg-purple-600 text-white rounded-lg hover:bg-green-700 dark:hover:bg-purple-700 transition-colors font-medium shadow-sm mt-2 flex items-center justify-center space-x-2"
             >
               <FolderInputIcon className="w-5 h-5 mr-2" />
               <span className="text-sm">Importer un planning</span>
@@ -726,7 +791,7 @@ export const PlanningPage = () => {
                 <div
                   key={index}
                   className={`text-center p-1 cursor-pointer rounded ${
-                    day ? "hover:bg-gray-100 dark:hover:bg-gray-700" : ""
+                    day ? "hover:bg-gray-100 dark:hover:bg-gray-600/40" : ""
                   } ${
                     day && formatDate(day) === formatDate(new Date())
                       ? "bg-blue-600 text-white"
@@ -750,7 +815,7 @@ export const PlanningPage = () => {
         {/* Main Content */}
         <div className="flex-1 flex flex-col">
           {/* Header */}
-          <div className="bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 p-4">
+          <div className="bg-white dark:bg-gray-700/40 border-b border-gray-200 dark:border-gray-600/50 p-4">
             <div className="flex items-center justify-between">
               <div className="flex items-center space-x-4">
                 <h1 className="text-2xl font-semibold text-gray-900 dark:text-white">
@@ -800,9 +865,9 @@ export const PlanningPage = () => {
                     </svg>
                   </button>
                 </div>
-                <h2 className="text-xl font-medium text-gray-900 dark:text-white">
+                <h3 className="text-lg font-medium text-gray-900 dark:text-white">
                   {getViewTitle()}
-                </h2>
+                </h3>
               </div>
 
               <div className="flex items-center space-x-2">
@@ -914,13 +979,6 @@ export const PlanningPage = () => {
         </div>
       </div>
 
-      {/* {isEventModalOpen && (
-        <CreateEventModal
-          date={selectedDate}
-          close={() => setIsEventModalOpen(false)}
-        />
-      )} */}
-
       <Outlet />
 
       {isImportModalOpen && (
diff --git a/ui/src/pages/signup.tsx b/ui/src/pages/signup.tsx
index 296c8ca..15a79e5 100644
--- a/ui/src/pages/signup.tsx
+++ b/ui/src/pages/signup.tsx
@@ -7,6 +7,9 @@ import { useSignUp } from "@ui/hooks/auth";
 import { Form } from "@ui/ui-library/form";
 import { Text } from "@ui/ui-library/text";
 import { LoginWithGoogle } from "@ui/components/BrandButtons/LoginWithGoogle";
+import { AnimatedBackground } from "@ui/components/AnimatedBackground";
+import { useTheme } from "@ui/contexts/ThemeContext";
+import { SunIcon, MoonIcon, MonitorIcon } from "lucide-react";
 
 export function SignUpPage() {
   const navigate = useNavigate();
@@ -26,14 +29,40 @@ export function SignUpPage() {
     business_name: "",
   });
 
+  // Theme
+  const { theme, setTheme } = useTheme();
+
+  const toggleTheme = () => {
+    if (theme === "light") {
+      setTheme("dark");
+    } else if (theme === "dark") {
+      setTheme("system");
+    } else {
+      setTheme("light");
+    }
+  };
+
+  const getThemeIcon = () => {
+    switch (theme) {
+      case "light":
+        return <SunIcon className="w-5 h-5" />;
+      case "dark":
+        return <MoonIcon className="w-5 h-5" />;
+      case "system":
+        return <MonitorIcon className="w-5 h-5" />;
+      default:
+        return <SunIcon className="w-5 h-5" />;
+    }
+  };
+
   const validateForm = () => {
     const errors: Record<string, string> = {};
 
-    // Business name validation
-    if (formData.business_name.length < 3) {
-      errors.business_name =
-        "Le nom de l'entreprise doit contenir au moins 3 caractères";
-    }
+    // // Business name validation
+    // if (formData.business_name.length < 3) {
+    //   errors.business_name =
+    //     "Le nom de l'entreprise doit contenir au moins 3 caractères";
+    // }
 
     // Password length validation
     if (formData.password.length < 8) {
@@ -75,212 +104,249 @@ export function SignUpPage() {
 
   return (
     <div
-      className="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-100 via-blue-50 to-white dark:bg-gradient-to-br dark:from-slate-900 dark:via-blue-950 dark:via-blue-900 dark:to-blue-800"
+      className="min-h-screen flex items-center justify-center bg-gradient-to-br from-purple-100 via-purple-50 to-white dark:bg-gradient-to-br dark:from-gray-900 dark:via-slate-900 dark:via-gray-800 dark:to-slate-800 animate-gradient-x bg-[length:400%_400%] relative overflow-hidden"
       onClick={() => navigate("/")}
     >
+      <AnimatedBackground />
       <div
         className={twMerge(
-          "w-full max-w-xl p-8 bg-white dark:bg-slate-800/50 backdrop-blur-lg rounded-2xl",
-          "border border-blue-200 dark:border-blue-900/30",
-          "shadow-xl"
+          "w-full max-w-xl rounded-2xl animate-border-light",
+          "shadow-2xl shadow-purple-500/10 dark:shadow-black/30"
         )}
         onClick={(e) => e.stopPropagation()}
       >
-        <div className="mb-6">
-          <Link
-            to="/landing"
-            className="inline-flex items-center text-sm text-slate-600 dark:text-slate-400 hover:text-slate-800 dark:hover:text-slate-200 transition-colors"
-          >
-            <svg
-              className="w-4 h-4 mr-2"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
+        <div className="relative w-full h-full p-6 bg-white/80 dark:bg-slate-900/80 backdrop-blur-md rounded-2xl border border-purple-200 dark:border-purple-400/30 z-10">
+          <div className="mb-4 flex items-center justify-between">
+            <a
+              href="https://www.xtablo.com"
+              className="inline-flex items-center text-sm text-slate-600 dark:text-slate-400 hover:text-slate-800 dark:hover:text-slate-200 transition-colors"
             >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M15 19l-7-7 7-7"
-              />
-            </svg>
-            Retour à l&apos;accueil
-          </Link>
-        </div>
-
-        <h1 className="text-3xl font-bold text-slate-900 dark:text-white mb-8 text-center">
-          Créer un compte
-        </h1>
-
-        <div className="space-y-4 flex flex-col items-center">
-          <Form
-            className="space-y-4 w-full"
-            onSubmit={onSubmit}
-            validationErrors={errors}
-          >
-            <div className="grid grid-cols-2 gap-4">
-              <TextField isRequired name="first_name">
-                <Label>
-                  Prénom <span className="text-red-500">*</span>
-                </Label>
-                <Input
-                  type="text"
-                  value={formData.first_name}
-                  onChange={(e) =>
-                    setFormData({ ...formData, first_name: e.target.value })
-                  }
-                  required
-                />
-                <FieldError />
-              </TextField>
-              <TextField isRequired name="last_name">
-                <Label>
-                  Nom <span className="text-red-500">*</span>
-                </Label>
-                <Input
-                  type="text"
-                  value={formData.last_name}
-                  onChange={(e) =>
-                    setFormData({ ...formData, last_name: e.target.value })
-                  }
-                  required
-                />
-                <FieldError />
-              </TextField>
-            </div>
-
-            <TextField isRequired name="business_name">
-              <Label>
-                Nom de l&apos;entreprise <span className="text-red-500">*</span>
-              </Label>
-              <Input
-                type="text"
-                value={formData.business_name}
-                onChange={(e) =>
-                  setFormData({ ...formData, business_name: e.target.value })
-                }
-                required
-              />
-              <FieldError />
-            </TextField>
-
-            <TextField isRequired name="email">
-              <Label>
-                Email professionnel <span className="text-red-500">*</span>
-              </Label>
-              <Input
-                type="email"
-                value={formData.email}
-                onChange={(e) =>
-                  setFormData({ ...formData, email: e.target.value })
-                }
-                required
-              />
-              <FieldError />
-            </TextField>
-
-            <TextField isRequired name="password">
-              <Label>
-                Mot de passe <span className="text-red-500">*</span>
-              </Label>
-              <Input
-                type="password"
-                value={formData.password}
-                onChange={(e) =>
-                  setFormData({ ...formData, password: e.target.value })
-                }
-                required
-              />
-              <FieldError />
-              {!errors.password && (
-                <Text slot="description" className="text-red-500">
-                  {errors.password}
-                </Text>
-              )}
-            </TextField>
-
-            <TextField isRequired name="confirmPassword">
-              <Label>
-                Confirmer le mot de passe{" "}
-                <span className="text-red-500">*</span>
-              </Label>
-              <Input
-                type="password"
-                value={formData.confirmPassword}
-                onChange={(e) =>
-                  setFormData({ ...formData, confirmPassword: e.target.value })
-                }
-                required
-              />
-              <FieldError />
-            </TextField>
-
-            <TextField className="flex items-start">
-              <Input
-                type="checkbox"
-                id="terms"
-                className="mt-1 mr-2 h-4 w-4 text-blue-600 focus:ring-blue-500 border-slate-300 rounded"
-                required
-              />
-              <Label
-                htmlFor="terms"
-                className="text-sm text-slate-700 dark:text-slate-300"
+              <svg
+                className="w-4 h-4 mr-2"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
               >
-                J&apos;accepte les{" "}
-                <a href="#" className="text-blue-600 hover:text-blue-500">
-                  conditions d&apos;utilisation
-                </a>{" "}
-                et la{" "}
-                <a href="#" className="text-blue-600 hover:text-blue-500">
-                  politique de confidentialité
-                </a>
-              </Label>
-            </TextField>
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M15 19l-7-7 7-7"
+                />
+              </svg>
+              Retour à l&apos;accueil
+            </a>
 
+            {/* Theme Toggle */}
             <Button
-              className={twMerge(
-                "w-full bg-blue-700 text-white",
-                "hover:bg-blue-600"
-              )}
-              type="submit"
-              isPending={isPending}
-              pendingLabel="Création du compte..."
+              variant="plain"
+              isIconOnly
+              onPress={toggleTheme}
+              className="text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200 p-2"
+              aria-label={`Changer le thème (actuellement: ${theme})`}
             >
-              {isPending ? "Création du compte..." : "Créer mon compte"}
+              {getThemeIcon()}
             </Button>
-          </Form>
-
-          <div className="relative my-6">
-            <div className="absolute inset-0 flex items-center">
-              <div className="w-full border-t border-slate-200 dark:border-slate-700"></div>
-            </div>
-            <div className="relative flex justify-center text-sm">
-              <span
-                className={twMerge(
-                  "px-4 py-1 bg-white dark:bg-slate-800",
-                  "text-slate-500 dark:text-slate-400",
-                  "text-sm font-medium",
-                  "rounded-full",
-                  "relative z-10",
-                  "before:absolute before:w-[100px] before:h-[1px] before:bg-slate-300 dark:before:bg-slate-600 before:left-[-110px] before:top-1/2",
-                  "after:absolute after:w-[100px] after:h-[1px] after:bg-slate-300 dark:after:bg-slate-600 after:right-[-110px] after:top-1/2"
-                )}
-              >
-                Ou continuer avec
-              </span>
-            </div>
           </div>
 
-          <LoginWithGoogle />
+          {/* Xtablo Icon */}
+          <div className="flex justify-center mb-4">
+            <img
+              src="/icon.png"
+              alt="Xtablo"
+              className="w-12 h-12 object-contain block dark:hidden"
+            />
+            <img
+              src="/logo_white.png"
+              alt="Xtablo"
+              className="w-12 h-12 object-contain hidden dark:block"
+            />
+          </div>
 
-          <p className="text-center text-sm text-slate-600 dark:text-slate-400">
-            Déjà un compte ?{" "}
-            <Link to="/login">
-              <a className="text-blue-600 hover:text-blue-500 font-medium">
-                Se connecter
-              </a>
-            </Link>
-          </p>
+          <h1 className="text-2xl font-bold text-slate-900 dark:text-white mb-6 text-center">
+            Créer un compte Xtablo
+          </h1>
+
+          <div className="space-y-3 flex flex-col items-center">
+            <Form
+              className="space-y-3 w-full"
+              onSubmit={onSubmit}
+              validationErrors={errors}
+            >
+              <div className="grid grid-cols-2 gap-3">
+                <TextField isRequired name="first_name">
+                  <Label className="text-sm">
+                    Prénom <span className="text-red-500">*</span>
+                  </Label>
+                  <Input
+                    type="text"
+                    value={formData.first_name}
+                    onChange={(e) =>
+                      setFormData({ ...formData, first_name: e.target.value })
+                    }
+                    required
+                  />
+                  <FieldError />
+                </TextField>
+                <TextField isRequired name="last_name">
+                  <Label className="text-sm">
+                    Nom <span className="text-red-500">*</span>
+                  </Label>
+                  <Input
+                    type="text"
+                    value={formData.last_name}
+                    onChange={(e) =>
+                      setFormData({ ...formData, last_name: e.target.value })
+                    }
+                    required
+                  />
+                  <FieldError />
+                </TextField>
+              </div>
+
+              {/* <TextField isRequired name="business_name">
+                <Label>
+                  Nom de l&apos;entreprise{" "}
+                  <span className="text-red-500">*</span>
+                </Label>
+                <Input
+                  type="text"
+                  value={formData.business_name}
+                  onChange={(e) =>
+                    setFormData({ ...formData, business_name: e.target.value })
+                  }
+                  required
+                />
+                <FieldError />
+              </TextField> */}
+
+              <TextField isRequired name="email">
+                <Label className="text-sm">
+                  Email professionnel <span className="text-red-500">*</span>
+                </Label>
+                <Input
+                  type="email"
+                  value={formData.email}
+                  onChange={(e) =>
+                    setFormData({ ...formData, email: e.target.value })
+                  }
+                  required
+                />
+                <FieldError />
+              </TextField>
+
+              <TextField isRequired name="password">
+                <Label className="text-sm">
+                  Mot de passe <span className="text-red-500">*</span>
+                </Label>
+                <Input
+                  type="password"
+                  value={formData.password}
+                  onChange={(e) =>
+                    setFormData({ ...formData, password: e.target.value })
+                  }
+                  required
+                />
+                <FieldError />
+                {!errors.password && (
+                  <Text slot="description" className="text-red-500">
+                    {errors.password}
+                  </Text>
+                )}
+              </TextField>
+
+              <TextField isRequired name="confirmPassword">
+                <Label className="text-sm">
+                  Confirmer le mot de passe{" "}
+                  <span className="text-red-500">*</span>
+                </Label>
+                <Input
+                  type="password"
+                  value={formData.confirmPassword}
+                  onChange={(e) =>
+                    setFormData({
+                      ...formData,
+                      confirmPassword: e.target.value,
+                    })
+                  }
+                  required
+                />
+                <FieldError />
+              </TextField>
+
+              <TextField className="flex items-start">
+                <Input
+                  type="checkbox"
+                  id="terms"
+                  className="mt-1 mr-2 h-4 w-4 text-blue-600 focus:ring-blue-500 border-slate-300 rounded"
+                  required
+                />
+                <Label
+                  htmlFor="terms"
+                  className="text-xs text-slate-600 dark:text-slate-300"
+                >
+                  J&apos;accepte les{" "}
+                  <a
+                    href="#"
+                    className="text-black hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-300"
+                  >
+                    conditions d&apos;utilisation
+                  </a>{" "}
+                  et la{" "}
+                  <a
+                    href="#"
+                    className="text-black hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-300"
+                  >
+                    politique de confidentialité
+                  </a>
+                </Label>
+              </TextField>
+
+              <Button
+                className={twMerge(
+                  "w-full bg-black border-black text-white dark:bg-black dark:border-black dark:text-white",
+                  "hover:bg-gray-800 dark:hover:bg-gray-800 transition-colors"
+                )}
+                type="submit"
+                isPending={isPending}
+                pendingLabel="Création du compte..."
+              >
+                {isPending ? "Création du compte..." : "Créer mon compte"}
+              </Button>
+            </Form>
+
+            <div className="relative my-4">
+              <div className="absolute inset-0 flex items-center">
+                <div className="w-full border-t border-slate-200 dark:border-slate-700"></div>
+              </div>
+              <div className="relative flex justify-center text-sm">
+                <span
+                  className={twMerge(
+                    "px-3 py-1 bg-white dark:bg-slate-800",
+                    "text-slate-500 dark:text-slate-400",
+                    "text-xs font-medium",
+                    "rounded-full",
+                    "relative z-10",
+                    "before:absolute before:w-[100px] before:h-[1px] before:bg-slate-300 dark:before:bg-slate-600 before:left-[-110px] before:top-1/2",
+                    "after:absolute after:w-[100px] after:h-[1px] after:bg-slate-300 dark:after:bg-slate-600 after:right-[-110px] after:top-1/2"
+                  )}
+                >
+                  Ou continuer avec
+                </span>
+              </div>
+            </div>
+
+            <LoginWithGoogle />
+
+            <p className="text-center text-xs text-slate-600 dark:text-slate-400">
+              Déjà un compte ?{" "}
+              <Link to="/login">
+                <a className="text-black hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-300 font-medium text-sm px-2 py-1 rounded border-gray-300 dark:border-slate-600 hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors">
+                  Se connecter
+                </a>
+              </Link>
+            </p>
+          </div>
         </div>
       </div>
     </div>
diff --git a/ui/src/pages/tablo.tsx b/ui/src/pages/tablo.tsx
index 5ad744c..92dfc35 100644
--- a/ui/src/pages/tablo.tsx
+++ b/ui/src/pages/tablo.tsx
@@ -1,4 +1,3 @@
-import { SignOutButton } from "@ui/components/SignOutButton";
 import { CreateTabloModal } from "@ui/components/CreateTabloModal";
 import { TabloModal } from "@ui/components/TabloModal";
 import { DeleteTabloModal } from "@ui/components/DeleteTabloModal";
@@ -239,11 +238,11 @@ export const TabloPage = () => {
           <div className="flex items-center gap-3">
             <button
               type="button"
-              className="flex items-center gap-1.5 px-3 py-1.5 text-sm text-white bg-blue-600 rounded-md hover:bg-blue-700 hover:shadow-lg hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all duration-200 shadow-md"
+              className="flex items-center gap-1.5 px-3 py-1.5 text-sm bg-[#dabdff] border-[#dabdff] text-[#1a1a1a] dark:bg-[#6911d9] dark:border-[#6911d9] dark:text-white hover:opacity-90 transition-opacity rounded-md shadow-md"
               onClick={openCreateModal}
             >
               <svg
-                className="w-4 h-4"
+                className="w-4 h-4 text-[#1a1a1a] dark:text-white"
                 fill="none"
                 stroke="currentColor"
                 viewBox="0 0 24 24"
@@ -258,7 +257,6 @@ export const TabloPage = () => {
               </svg>
               <span>Nouveau tablo</span>
             </button>
-            <SignOutButton />
           </div>
         </div>
         <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
@@ -281,11 +279,11 @@ export const TabloPage = () => {
           <div className="flex items-center gap-3">
             <button
               type="button"
-              className="flex items-center gap-1.5 px-3 py-1.5 text-sm text-white bg-blue-600 rounded-md hover:bg-blue-700 hover:shadow-lg hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all duration-200 shadow-md"
+              className="flex items-center gap-1.5 px-3 py-1.5 text-sm bg-[#dabdff] border-[#dabdff] text-[#1a1a1a] dark:bg-[#6911d9] dark:border-[#6911d9] dark:text-white hover:opacity-90 transition-opacity rounded-md shadow-md"
               onClick={openCreateModal}
             >
               <svg
-                className="w-4 h-4"
+                className="w-4 h-4 text-[#1a1a1a] dark:text-white"
                 fill="none"
                 stroke="currentColor"
                 viewBox="0 0 24 24"
@@ -300,7 +298,6 @@ export const TabloPage = () => {
               </svg>
               <span>Nouveau tablo</span>
             </button>
-            <SignOutButton />
           </div>
         </div>
         <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
@@ -645,12 +642,12 @@ export const TabloPage = () => {
           <button
             id="create-tablo-button"
             type="button"
-            className="flex items-center gap-1.5 px-3 py-1.5 text-sm text-white bg-blue-600 rounded-md hover:bg-blue-700 hover:shadow-lg hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all duration-200 shadow-md"
+            className="flex items-center gap-1.5 px-3 py-1.5 text-sm bg-[#dabdff] border-[#dabdff] text-[#1a1a1a] dark:bg-[#6911d9] dark:border-[#6911d9] dark:text-white hover:opacity-90 transition-opacity rounded-md shadow-md disabled:opacity-50 disabled:cursor-not-allowed"
             onClick={openCreateModal}
             disabled={createTabloMutation.isPending}
           >
             <svg
-              className="w-4 h-4"
+              className="w-4 h-4 text-[#1a1a1a] dark:text-white"
               fill="none"
               stroke="currentColor"
               viewBox="0 0 24 24"
@@ -667,7 +664,6 @@ export const TabloPage = () => {
               {createTabloMutation.isPending ? "Création..." : "Nouveau tablo"}
             </span>
           </button>
-          <SignOutButton />
         </div>
       </div>
       <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
@@ -693,11 +689,11 @@ export const TabloPage = () => {
                   <div className="flex justify-center">
                     <button
                       type="button"
-                      className="flex items-center gap-1.5 px-4 py-2 text-sm text-white bg-blue-600 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all duration-200"
+                      className="flex items-center gap-1.5 px-4 py-2 text-sm bg-[#dabdff] border-[#dabdff] text-[#1a1a1a] dark:bg-[#6911d9] dark:border-[#6911d9] dark:text-white hover:opacity-90 transition-opacity rounded-md shadow-md"
                       onClick={openCreateModal}
                     >
                       <svg
-                        className="w-4 h-4"
+                        className="w-4 h-4 text-[#1a1a1a] dark:text-white"
                         fill="none"
                         stroke="currentColor"
                         viewBox="0 0 24 24"
diff --git a/ui/src/providers/UserStoreProvider.tsx b/ui/src/providers/UserStoreProvider.tsx
index c7da51b..6f9f79a 100644
--- a/ui/src/providers/UserStoreProvider.tsx
+++ b/ui/src/providers/UserStoreProvider.tsx
@@ -6,7 +6,7 @@ import { useSession } from "@ui/contexts/SessionContext";
 import { api } from "@ui/lib/api";
 import { LoadingSpinner } from "@ui/components/LoadingSpinner";
 
-type User = Tables<"profiles"> & {
+export type User = Tables<"profiles"> & {
   streamToken: string | null;
 };
 
diff --git a/ui/src/ui-library/theme/index.css b/ui/src/ui-library/theme/index.css
index 2a48f87..ade4799 100644
--- a/ui/src/ui-library/theme/index.css
+++ b/ui/src/ui-library/theme/index.css
@@ -40,7 +40,7 @@
 
 @layer base {
   :root {
-    --background: oklch(1 0 0);
+    --background: #f4f4f4;
     --foreground: oklch(0.141 0.005 285.823);
     --accent: oklch(0.21 0.006 285.885);
     --input: oklch(0.871 0.006 286.286);
@@ -53,7 +53,7 @@
   }
 
   .dark {
-    --background: oklch(0.141 0.005 285.823);
+    --background: #1c1b1f;
     --foreground: oklch(1 0 0);
     --accent: oklch(1 0 0);
     --input: oklch(0.37 0.013 285.805);