diff --git a/apps/main/src/pages/planning.tsx b/apps/main/src/pages/planning.tsx
index 438e919..aafec5f 100644
--- a/apps/main/src/pages/planning.tsx
+++ b/apps/main/src/pages/planning.tsx
@@ -11,7 +11,7 @@ import {
   SelectValue,
 } from "@xtablo/ui/components/select";
 import { TypographyH3, TypographyH4 } from "@xtablo/ui/components/typography";
-import { ClockIcon, Download, EllipsisVerticalIcon, FolderInputIcon, MapPinIcon, PlusIcon, RefreshCcw, SlidersHorizontalIcon } from "lucide-react";
+import { ClockIcon, Download, EllipsisVerticalIcon, FolderInputIcon, PlusIcon, RefreshCcw, SlidersHorizontalIcon } from "lucide-react";
 import { useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Outlet, useNavigate, useParams, useSearchParams } from "react-router-dom";
@@ -793,13 +793,16 @@ export const PlanningPage = () => {
 
   // ── Events card view ──────────────────────────────────────────────────────
   const renderEventsView = () => {
+    const today = new Date();
+    today.setHours(0, 0, 0, 0);
     const q = eventsSearchQuery.toLowerCase();
-    const filtered = tabloEvents.filter(
-      (e) =>
-        !q ||
-        e.title?.toLowerCase().includes(q) ||
-        e.description?.toLowerCase().includes(q)
-    );
+    const filtered = tabloEvents.filter((e) => {
+      const eventDate = e.start_date ? new Date(e.start_date + "T00:00:00") : null;
+      const isUpcoming = !eventDate || eventDate >= today;
+      const matchesSearch =
+        !q || e.title?.toLowerCase().includes(q) || e.description?.toLowerCase().includes(q);
+      return isUpcoming && matchesSearch;
+    });
 
     const months = ["JAN", "FÉV", "MAR", "AVR", "MAI", "JUN", "JUL", "AOÛ", "SEP", "OCT", "NOV", "DÉC"];
 
@@ -817,7 +820,7 @@ export const PlanningPage = () => {
               navigate(`/planning/create?date=${currentDate.toISOString()}${selectedTabloId !== "all" ? `&tablo_id=${selectedTabloId}` : ""}`);
             }}
             disabled={isReadOnly}
-            className="flex items-center gap-2 px-5 py-3 bg-primary text-white rounded-xl hover:bg-primary/90 transition-colors font-medium shadow-sm disabled:opacity-50"
+            className="flex items-center gap-2 px-5 py-3 bg-[#804EEC] hover:bg-[#6f3fd4] text-white rounded-xl transition-colors font-medium shadow-sm disabled:opacity-50"
           >
             <PlusIcon className="w-5 h-5" />
             <span>{t("planning:createEvent")}</span>
@@ -919,7 +922,11 @@ export const PlanningPage = () => {
                     )}
                     {event.tablo_name && (
                       <div className="flex items-center gap-2.5 text-[#344054] dark:text-gray-300">
-                        <MapPinIcon className="w-4 h-4 flex-shrink-0" />
+                        <div
+                          className={`w-4 h-4 rounded-[3px] flex-shrink-0 flex items-center justify-center text-[7px] font-bold text-white ${event.tablo_color || "bg-gray-400"}`}
+                        >
+                          {event.tablo_name.charAt(0).toUpperCase()}
+                        </div>
                         <span className="text-sm truncate">{event.tablo_name}</span>
                       </div>
                     )}