diff --git a/ui/src/components/NavigationBar.tsx b/ui/src/components/NavigationBar.tsx
index d60f627..97c5cce 100644
--- a/ui/src/components/NavigationBar.tsx
+++ b/ui/src/components/NavigationBar.tsx
@@ -11,6 +11,8 @@ import {
   MessageCircleIcon,
   SquareKanban,
   Kanban,
+  CalendarIcon,
+  CalendarCheckIcon,
 } from "lucide-react";
 import { Link as RouterLink, useLocation } from "react-router-dom";
 import { Separator } from "react-aria-components";
@@ -242,17 +244,20 @@ export const SideNavigation = ({
 export function MainNavigation({ isCollapsed }: { isCollapsed: boolean }) {
   const location = useLocation();
 
-  const navItems: {
-    path: string;
-    label: string;
-    icon: React.ReactNode;
-    isDisabled?: boolean;
-  }[] = [
-    {
-      path: "/",
-      label: "Tableaux",
-      icon: <Grid2X2Icon className="w-5 h-5" />,
-    },
+  type List<T> = T[];
+
+  const navItems: List<
+    | {
+        path: string;
+        label: string;
+        icon: React.ReactNode;
+        isDisabled?: boolean;
+        isHorizontalBar?: never;
+      }
+    | {
+        isHorizontalBar: boolean;
+      }
+  > = [
     {
       path: "/devis",
       label: "Devis",
@@ -270,6 +275,16 @@ export function MainNavigation({ isCollapsed }: { isCollapsed: boolean }) {
       label: "Planning",
       icon: <SquareKanban className="w-5 h-5" />,
     },
+    {
+      path: "/availabilities",
+      label: "Disponibilités",
+      icon: <CalendarIcon className="w-5 h-5" />,
+    },
+    {
+      path: "/bookings",
+      label: "Réservations",
+      icon: <CalendarCheckIcon className="w-5 h-5" />,
+    },
     {
       path: "/kanban",
       label: "Kanban",
@@ -282,6 +297,12 @@ export function MainNavigation({ isCollapsed }: { isCollapsed: boolean }) {
       icon: <ConstructionIcon className="w-5 h-5" />,
       isDisabled: true,
     },
+    { isHorizontalBar: true },
+    {
+      path: "/",
+      label: "Tableaux",
+      icon: <Grid2X2Icon className="w-5 h-5" />,
+    },
     {
       path: "/chat",
       label: "Discussions",
@@ -294,8 +315,18 @@ export function MainNavigation({ isCollapsed }: { isCollapsed: boolean }) {
         role="list"
         className={twMerge("grid py-3", isCollapsed ? "pl-2.5 pr-3" : "")}
       >
-        {navItems.map(({ path, label, icon, isDisabled }) =>
-          !isDisabled ? (
+        {navItems.map((item) => {
+          if ("isHorizontalBar" in item) {
+            return (
+              <li key="horizontal-bar" className="my-2">
+                <Separator className="border-gray-300/20" />
+              </li>
+            );
+          }
+
+          const { path, label, icon, isDisabled } = item;
+
+          return !isDisabled ? (
             <li key={label}>
               <NavLink isActive={location.pathname === path}>
                 <RouterLink
@@ -322,8 +353,8 @@ export function MainNavigation({ isCollapsed }: { isCollapsed: boolean }) {
                 </RouterLink>
               </NavLink>
             </li>
-          ) : null
-        )}
+          ) : null;
+        })}
       </ul>
       <ul
         role="list"
diff --git a/ui/src/pages/planning.tsx b/ui/src/pages/planning.tsx
index cfa65a1..6588391 100644
--- a/ui/src/pages/planning.tsx
+++ b/ui/src/pages/planning.tsx
@@ -12,6 +12,7 @@ import { Outlet, useNavigate, useParams } from "react-router-dom";
 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";
 
 type ViewType = "month" | "week" | "day";
 
@@ -692,29 +693,18 @@ 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"
+              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"
             >
-              + Créer un événement
+              <PlusIcon className="w-5 h-5 mr-2" />
+              <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"
             >
-              <svg
-                className="w-4 h-4"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth="2"
-                  d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 19l3 3m0 0l3-3m-3 3V10"
-                />
-              </svg>
-              <span>Importer un planning</span>
+              <FolderInputIcon className="w-5 h-5 mr-2" />
+              <span className="text-sm">Importer un planning</span>
             </button>
           </div>
 
diff --git a/ui/src/pages/tablo.tsx b/ui/src/pages/tablo.tsx
index e632346..5ad744c 100644
--- a/ui/src/pages/tablo.tsx
+++ b/ui/src/pages/tablo.tsx
@@ -336,7 +336,7 @@ export const TabloPage = () => {
         }}
       >
         <div
-          className={`bg-white dark:bg-gray-800 rounded-lg shadow-lg transition-all duration-300 w-64 overflow-hidden border border-gray-200 dark:border-gray-700 ${
+          className={`bg-white dark:bg-gray-800 rounded-lg shadow-lg transition-all duration-300 w-56 overflow-hidden border border-gray-200 dark:border-gray-700 ${
             isAdmin
               ? "hover:shadow-xl cursor-pointer"
               : "hover:shadow-xl cursor-pointer opacity-75"
@@ -347,7 +347,7 @@ export const TabloPage = () => {
           }}
         >
           {/* Image or Color */}
-          <div className="relative h-56 group">
+          <div className="relative h-40 group">
             {tablo.image ? (
               <img
                 src={tablo.image}
@@ -360,7 +360,7 @@ export const TabloPage = () => {
                   tablo.color || "bg-gray-400"
                 } flex items-center justify-center`}
               >
-                <h3 className="text-white font-bold text-2xl text-center px-4">
+                <h3 className="text-white font-bold text-xl text-center px-4">
                   {tablo.name}
                 </h3>
               </div>
@@ -421,10 +421,10 @@ export const TabloPage = () => {
           </div>
 
           {/* Content */}
-          <div className="p-4">
-            <div className="space-y-2">
-              <div className="flex items-center gap-2">
-                <h3 className="text-gray-900 dark:text-white font-semibold text-lg truncate">
+          <div className="p-3">
+            <div className="space-y-1">
+              <div className="flex items-center gap-1">
+                <h3 className="text-gray-900 dark:text-white font-semibold text-base truncate">
                   {tablo.name}
                 </h3>
                 {/* Status badge */}
@@ -673,7 +673,7 @@ export const TabloPage = () => {
       <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
         <div className="container mx-auto px-4 py-8">
           {filteredTablos && filteredTablos.length > 0 ? (
-            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
               {/* Render tablos */}
               {filteredTablos.map((tablo) => renderTablo(tablo))}
             </div>
diff --git a/xtablo-expo/app/(app)/(tabs)/tablos.tsx b/xtablo-expo/app/(app)/(tabs)/tablos.tsx
index e4135c2..fc42306 100644
--- a/xtablo-expo/app/(app)/(tabs)/tablos.tsx
+++ b/xtablo-expo/app/(app)/(tabs)/tablos.tsx
@@ -814,7 +814,7 @@ const styles = StyleSheet.create({
   tabloCard: {
     backgroundColor: "white",
     borderRadius: 16,
-    marginBottom: 16,
+    marginBottom: 12,
     marginHorizontal: 8,
     shadowColor: "#000",
     shadowOffset: { width: 0, height: 2 },
@@ -824,7 +824,7 @@ const styles = StyleSheet.create({
     overflow: "hidden",
   },
   tabloHeader: {
-    height: 120,
+    height: 90,
     justifyContent: "center",
     alignItems: "center",
     position: "relative",
@@ -836,35 +836,35 @@ const styles = StyleSheet.create({
     alignItems: "center",
   },
   tabloInitials: {
-    fontSize: 32,
+    fontSize: 24,
     fontWeight: "bold",
     color: "white",
   },
 
   tabloInfo: {
-    padding: 16,
+    padding: 12,
   },
   nameRow: {
     flexDirection: "row",
     alignItems: "flex-start",
     justifyContent: "space-between",
-    marginBottom: 12,
+    marginBottom: 6,
     gap: 8,
   },
   tabloName: {
-    fontSize: 18,
+    fontSize: 16,
     fontWeight: "bold",
     color: "#1f2937",
     flex: 1,
   },
   nameStatusBadge: {
-    paddingHorizontal: 8,
-    paddingVertical: 4,
-    borderRadius: 12,
+    paddingHorizontal: 6,
+    paddingVertical: 3,
+    borderRadius: 10,
     alignSelf: "flex-start",
   },
   nameStatusText: {
-    fontSize: 10,
+    fontSize: 9,
     fontWeight: "600",
     textTransform: "uppercase",
   },
@@ -877,14 +877,14 @@ const styles = StyleSheet.create({
     flex: 1,
   },
   roleBadge: {
-    paddingHorizontal: 8,
-    paddingVertical: 4,
-    borderRadius: 8,
+    paddingHorizontal: 6,
+    paddingVertical: 3,
+    borderRadius: 7,
     alignSelf: "flex-start",
   },
   roleText: {
     color: "white",
-    fontSize: 12,
+    fontSize: 11,
     fontWeight: "600",
   },
   actionsRow: {
@@ -892,9 +892,9 @@ const styles = StyleSheet.create({
     gap: 8,
   },
   cardActionButton: {
-    width: 32,
-    height: 32,
-    borderRadius: 16,
+    width: 28,
+    height: 28,
+    borderRadius: 14,
     backgroundColor: "#f3f4f6",
     justifyContent: "center",
     alignItems: "center",