From 63ae963cd3de36521941996345b4eccef9f41e62 Mon Sep 17 00:00:00 2001
From: michaelschal <35957947-michaelschal@users.noreply.replit.com>
Date: Sat, 4 Oct 2025 10:13:34 +0000
Subject: [PATCH] Update application UI with a modern and streamlined design

Revamp the entire UI with a new theme, enhancing readability and modern aesthetics across all components, including AI chat, calendar, media uploads, and user management sections.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ae4037a0-2a6f-4530-9bac-79b543286bda
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/397bca8c-984f-43ff-841a-10897aeb8140/ae4037a0-2a6f-4530-9bac-79b543286bda/nriKMjY
---
 .replit                                 |   8 +
 client/src/components/ai-chat.tsx       | 103 +++++++------
 client/src/components/calendar-view.tsx | 126 +++++++--------
 client/src/components/managed-pages.tsx |  93 +++++++-----
 client/src/components/media-upload.tsx  | 194 +++++++++++++-----------
 client/src/components/quick-actions.tsx | 101 ++++++------
 client/src/pages/ai.tsx                 |   8 +-
 client/src/pages/analytics.tsx          | 143 +++++++++--------
 client/src/pages/calendar.tsx           |   4 +-
 client/src/pages/dashboard.tsx          |  20 +--
 client/src/pages/history.tsx            |  69 +++++----
 client/src/pages/login.tsx              |  60 +++++---
 client/src/pages/media.tsx              |   4 +-
 client/src/pages/new-post.tsx           |  36 ++---
 client/src/pages/pages.tsx              |  18 +--
 client/src/pages/settings.tsx           |  22 +--
 client/src/pages/sql.tsx                |  18 +--
 client/src/pages/users-admin.tsx        |  12 +-
 18 files changed, 566 insertions(+), 473 deletions(-)

diff --git a/.replit b/.replit
index ad64fe1..93f3672 100644
--- a/.replit
+++ b/.replit
@@ -14,10 +14,18 @@ run = ["npm", "run", "start"]
 localPort = 5000
 externalPort = 80
 
+[[ports]]
+localPort = 35357
+externalPort = 3002
+
 [[ports]]
 localPort = 40537
 externalPort = 3000
 
+[[ports]]
+localPort = 41095
+externalPort = 3003
+
 [[ports]]
 localPort = 43245
 externalPort = 3001
diff --git a/client/src/components/ai-chat.tsx b/client/src/components/ai-chat.tsx
index 0ba4791..212eb35 100644
--- a/client/src/components/ai-chat.tsx
+++ b/client/src/components/ai-chat.tsx
@@ -4,7 +4,7 @@ import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
 import { useMutation, useQuery } from "@tanstack/react-query";
 import { apiRequest, queryClient } from "@/lib/queryClient";
-import { Bot, User, Lightbulb, History, Zap } from "lucide-react";
+import { Bot, User, Lightbulb, History, Zap, Sparkles } from "lucide-react";
 import { useToast } from "@/hooks/use-toast";
 
 interface Message {
@@ -51,11 +51,9 @@ export default function AiChat() {
   const handleSubmit = () => {
     if (!input.trim()) return;
 
-    // Add user message
     const userMessage = input;
     setMessages((prev) => [...prev, { role: "user", content: userMessage }]);
 
-    // Parse product info from input (simple parsing)
     const productInfo = {
       name: userMessage.match(/Produit:\s*(.+?)(?:\n|$)/i)?.[1] || userMessage,
       price: userMessage.match(/Prix:\s*(.+?)(?:\n|$)/i)?.[1] || "",
@@ -68,93 +66,97 @@ export default function AiChat() {
   };
 
   return (
-    <div className="bg-card rounded-lg border border-border overflow-hidden h-full">
-      <div className="border-b border-border p-4 flex items-center justify-between">
-        <div className="flex items-center gap-3">
-          <div className="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center">
-            <Bot className="text-primary w-6 h-6" />
-          </div>
-          <div>
-            <h3 className="font-semibold text-foreground">Assistant IA - Génération de contenu</h3>
-            <p className="text-xs text-muted-foreground">Décrivez votre produit pour générer du texte</p>
+    <div className="bg-card rounded-2xl border border-border/50 overflow-hidden shadow-lg h-full flex flex-col">
+      <div className="border-b border-border/50 p-6 bg-gradient-to-r from-primary/5 to-secondary/5">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-4">
+            <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-primary to-secondary flex items-center justify-center shadow-lg">
+              <Sparkles className="text-white w-6 h-6" />
+            </div>
+            <div>
+              <h3 className="text-lg font-semibold text-foreground">Assistant IA</h3>
+              <p className="text-sm text-muted-foreground">Génération de contenu intelligent</p>
+            </div>
           </div>
+          <Button 
+            variant="outline" 
+            size="sm"
+            onClick={() => setMessages([messages[0]])}
+            className="rounded-xl"
+            data-testid="button-new-chat"
+          >
+            <Sparkles className="w-4 h-4 mr-2" />
+            Nouveau chat
+          </Button>
         </div>
-        <Button 
-          variant="outline" 
-          size="sm"
-          onClick={() => setMessages([messages[0]])}
-          data-testid="button-new-chat"
-        >
-          <i className="fas fa-plus mr-2"></i>Nouveau chat
-        </Button>
       </div>
 
-      <div className="h-96 overflow-y-auto p-6 space-y-4 bg-muted/20">
+      <div className="flex-1 overflow-y-auto p-6 space-y-6 bg-muted/20">
         {messages.map((message, index) => (
           <div 
             key={index} 
-            className={`flex gap-3 chat-message ${message.role === "user" ? "justify-end" : ""}`}
+            className={`flex gap-4 chat-message ${message.role === "user" ? "justify-end" : ""}`}
           >
             {message.role === "assistant" && (
-              <div className="w-8 h-8 rounded-full bg-primary flex-shrink-0 flex items-center justify-center">
-                <Bot className="text-primary-foreground w-4 h-4" />
+              <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-primary to-secondary flex-shrink-0 flex items-center justify-center shadow-md">
+                <Bot className="text-white w-5 h-5" />
               </div>
             )}
             
-            <div className={`flex-1 ${message.role === "user" ? "max-w-md ml-auto" : ""}`}>
+            <div className={`flex-1 ${message.role === "user" ? "max-w-md ml-auto" : "max-w-2xl"}`}>
               <div className={`
-                rounded-lg p-4
+                rounded-2xl p-6 shadow-md
                 ${message.role === "user" 
-                  ? "bg-primary text-primary-foreground ml-auto" 
-                  : "bg-card border border-border"
+                  ? "bg-gradient-to-br from-primary to-secondary text-white ml-auto" 
+                  : "bg-card border border-border/50"
                 }
               `}>
-                <p className="text-sm whitespace-pre-wrap">{message.content}</p>
+                <p className="text-sm leading-relaxed whitespace-pre-wrap">{message.content}</p>
                 
                 {message.variants && (
-                  <div className="space-y-3 mt-3">
+                  <div className="space-y-4 mt-6">
                     {message.variants.map((variant, vIndex) => (
                       <div 
                         key={vIndex}
-                        className="p-3 rounded-lg bg-accent/50 border border-border cursor-pointer hover:bg-accent transition-all"
+                        className="p-5 rounded-xl bg-muted/50 border border-border/50 cursor-pointer hover:bg-muted hover:shadow-md transition-all"
                         data-testid={`variant-${vIndex}`}
                       >
-                        <div className="flex items-center justify-between mb-2">
+                        <div className="flex items-center justify-between mb-3">
                           <span className={`
-                            inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
-                            ${vIndex === 0 ? "bg-primary text-primary-foreground" : "bg-secondary text-secondary-foreground"}
+                            inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold
+                            ${vIndex === 0 ? "bg-gradient-to-r from-primary to-secondary text-white" : "bg-secondary/20 text-secondary"}
                           `}>
                             {variant.variant}
                           </span>
-                          <span className="text-xs text-muted-foreground">{variant.characterCount} caractères</span>
+                          <span className="text-xs text-muted-foreground font-medium">{variant.characterCount} caractères</span>
                         </div>
-                        <p className="text-sm text-foreground">{variant.text}</p>
+                        <p className="text-sm text-foreground leading-relaxed">{variant.text}</p>
                       </div>
                     ))}
                   </div>
                 )}
               </div>
-              <span className="text-xs text-muted-foreground mt-1 inline-block">
+              <span className="text-xs text-muted-foreground mt-2 inline-block">
                 {message.role === "user" ? "Maintenant" : "Il y a quelques secondes"}
               </span>
             </div>
 
             {message.role === "user" && (
-              <div className="w-8 h-8 rounded-full bg-secondary flex-shrink-0 flex items-center justify-center">
-                <User className="text-secondary-foreground w-4 h-4" />
+              <div className="w-10 h-10 rounded-xl bg-secondary/20 flex-shrink-0 flex items-center justify-center">
+                <User className="text-secondary w-5 h-5" />
               </div>
             )}
           </div>
         ))}
       </div>
 
-      <div className="p-4 border-t border-border bg-card">
-        <div className="flex gap-3">
+      <div className="p-6 border-t border-border/50 bg-card space-y-4">
+        <div className="flex gap-4">
           <Textarea
             placeholder="Décrivez votre produit (nom, prix, caractéristiques)..."
             value={input}
             onChange={(e) => setInput(e.target.value)}
-            className="flex-1 min-h-[60px]"
+            className="flex-1 min-h-[80px] rounded-xl bg-muted/30 border-border/50 focus:border-primary/50"
             onKeyDown={(e) => {
               if (e.key === "Enter" && !e.shiftKey) {
                 e.preventDefault();
@@ -166,34 +168,37 @@ export default function AiChat() {
           <Button 
             onClick={handleSubmit}
             disabled={generateMutation.isPending || !input.trim()}
+            className="bg-gradient-to-r from-primary to-secondary hover:opacity-90 rounded-xl px-6"
             data-testid="button-generate"
           >
-            <i className="fas fa-paper-plane mr-2"></i>
+            <Sparkles className="w-4 h-4 mr-2" />
             {generateMutation.isPending ? "Génération..." : "Générer"}
           </Button>
         </div>
-        <div className="mt-3 flex items-center gap-2">
+        <div className="flex items-center gap-3 flex-wrap">
           <Button 
             variant="outline" 
             size="sm" 
+            className="rounded-xl"
             onClick={() => toast({ title: "Bientôt disponible", description: "Les suggestions de produits seront disponibles prochainement" })}
             data-testid="button-suggestions"
           >
-            <Lightbulb className="w-4 h-4 mr-1" />
+            <Lightbulb className="w-4 h-4 mr-2" />
             Suggestions
           </Button>
           <Button 
             variant="outline" 
             size="sm" 
+            className="rounded-xl"
             onClick={() => toast({ title: "Bientôt disponible", description: "L'historique des générations sera disponible prochainement" })}
             data-testid="button-history"
           >
-            <History className="w-4 h-4 mr-1" />
+            <History className="w-4 h-4 mr-2" />
             Historique
           </Button>
-          <div className="ml-auto text-xs text-muted-foreground flex items-center gap-1">
-            <Zap className="w-3 h-3 text-chart-3" />
-            Propulsé par OpenRouter
+          <div className="ml-auto text-xs text-muted-foreground flex items-center gap-2">
+            <Zap className="w-4 h-4 text-success" />
+            <span>Propulsé par OpenRouter</span>
           </div>
         </div>
       </div>
diff --git a/client/src/components/calendar-view.tsx b/client/src/components/calendar-view.tsx
index 7af2004..04d216c 100644
--- a/client/src/components/calendar-view.tsx
+++ b/client/src/components/calendar-view.tsx
@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { Button } from "@/components/ui/button";
-import { ChevronLeft, ChevronRight } from "lucide-react";
+import { ChevronLeft, ChevronRight, Calendar as CalendarIcon } from "lucide-react";
 import { useQuery } from "@tanstack/react-query";
 import type { ScheduledPost } from "@shared/schema";
 
@@ -44,18 +44,15 @@ export default function CalendarView() {
 
     const days = [];
 
-    // Previous month days
     for (let i = 0; i < startingDayOfWeek; i++) {
       const prevMonthDay = new Date(year, month, -startingDayOfWeek + i + 1);
       days.push({ date: prevMonthDay, isCurrentMonth: false });
     }
 
-    // Current month days
     for (let i = 1; i <= daysInMonth; i++) {
       days.push({ date: new Date(year, month, i), isCurrentMonth: true });
     }
 
-    // Next month days to fill the grid
     const remainingDays = 42 - days.length;
     for (let i = 1; i <= remainingDays; i++) {
       days.push({ date: new Date(year, month + 1, i), isCurrentMonth: false });
@@ -71,83 +68,90 @@ export default function CalendarView() {
   };
 
   return (
-    <div className="bg-card rounded-lg border border-border overflow-hidden">
-      <div className="border-b border-border p-4 flex items-center justify-between">
-        <div>
-          <h3 className="font-semibold text-foreground">Calendrier des publications</h3>
-          <p className="text-sm text-muted-foreground mt-1">Planifiez vos publications sur plusieurs pages</p>
-        </div>
-        <div className="flex items-center gap-3">
-          <Button 
-            variant="outline" 
-            size="sm" 
-            onClick={goToPreviousMonth}
-            data-testid="button-prev-month"
-          >
-            <ChevronLeft className="w-4 h-4 mr-2" />
-            Précédent
-          </Button>
-          <span className="text-sm font-medium text-foreground min-w-[120px] text-center">
-            {monthNames[currentDate.getMonth()]} {currentDate.getFullYear()}
-          </span>
-          <Button 
-            variant="outline" 
-            size="sm" 
-            onClick={goToNextMonth}
-            data-testid="button-next-month"
-          >
-            Suivant
-            <ChevronRight className="w-4 h-4 ml-2" />
-          </Button>
+    <div className="bg-card rounded-2xl border border-border/50 overflow-hidden shadow-lg">
+      <div className="border-b border-border/50 p-6 bg-gradient-to-r from-primary/5 to-secondary/5">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-4">
+            <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-primary to-secondary flex items-center justify-center shadow-lg">
+              <CalendarIcon className="text-white w-6 h-6" />
+            </div>
+            <div>
+              <h3 className="text-lg font-semibold text-foreground">Calendrier</h3>
+              <p className="text-sm text-muted-foreground">Visualisez vos publications planifiées</p>
+            </div>
+          </div>
+          <div className="flex items-center gap-3">
+            <Button 
+              variant="outline" 
+              size="sm" 
+              onClick={goToPreviousMonth}
+              className="rounded-xl"
+              data-testid="button-prev-month"
+            >
+              <ChevronLeft className="w-4 h-4 mr-2" />
+              Précédent
+            </Button>
+            <span className="text-sm font-semibold text-foreground min-w-[140px] text-center px-4 py-2 bg-muted/30 rounded-xl">
+              {monthNames[currentDate.getMonth()]} {currentDate.getFullYear()}
+            </span>
+            <Button 
+              variant="outline" 
+              size="sm" 
+              onClick={goToNextMonth}
+              className="rounded-xl"
+              data-testid="button-next-month"
+            >
+              Suivant
+              <ChevronRight className="w-4 h-4 ml-2" />
+            </Button>
+          </div>
         </div>
       </div>
 
-      <div className="p-6">
-        {/* Calendar Header */}
-        <div className="grid grid-cols-7 gap-px bg-border mb-px">
+      <div className="p-8">
+        <div className="grid grid-cols-7 gap-2 mb-2">
           {daysOfWeek.map((day) => (
-            <div key={day} className="bg-muted p-3 text-center">
-              <span className="text-xs font-semibold text-muted-foreground">{day}</span>
+            <div key={day} className="bg-muted/30 py-3 rounded-lg text-center">
+              <span className="text-sm font-semibold text-muted-foreground">{day}</span>
             </div>
           ))}
         </div>
 
-        {/* Calendar Grid */}
-        <div className="grid grid-cols-7 gap-px bg-border">
+        <div className="grid grid-cols-7 gap-2">
           {days.map((day, index) => (
             <div
               key={index}
               className={`
-                bg-card p-3 min-h-[120px]
-                ${isToday(day.date) ? "border-2 border-primary" : ""}
+                bg-card border border-border/50 rounded-xl p-4 min-h-[140px] transition-all hover:shadow-md
+                ${isToday(day.date) ? "ring-2 ring-primary shadow-lg" : ""}
+                ${!day.isCurrentMonth ? "opacity-40" : ""}
               `}
               data-testid={`calendar-day-${index}`}
             >
-              <div className="flex items-center justify-between mb-2">
+              <div className="flex items-center justify-between mb-3">
                 <span
                   className={`
-                    text-xs font-medium
-                    ${!day.isCurrentMonth ? "text-muted-foreground/50" : "text-foreground"}
-                    ${isToday(day.date) ? "font-bold text-primary" : ""}
+                    text-sm font-semibold
+                    ${!day.isCurrentMonth ? "text-muted-foreground" : "text-foreground"}
+                    ${isToday(day.date) ? "text-primary" : ""}
                   `}
                 >
                   {day.date.getDate()}
                 </span>
                 {isToday(day.date) && (
-                  <span className="text-[10px] bg-primary text-primary-foreground px-1.5 py-0.5 rounded">
+                  <span className="text-[10px] bg-gradient-to-r from-primary to-secondary text-white px-2 py-0.5 rounded-full font-semibold">
                     Aujourd'hui
                   </span>
                 )}
               </div>
               
-              {/* Real scheduled posts for this date */}
               {(() => {
                 if (!day.isCurrentMonth) return null;
                 const postsForDay = getPostsForDate(day.date);
                 if (postsForDay.length === 0) return null;
                 
                 return (
-                  <div className="space-y-1">
+                  <div className="space-y-2">
                     {postsForDay.slice(0, 2).map((post, idx) => {
                       const time = post.scheduledAt ? new Date(post.scheduledAt).toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' }) : '';
                       const isPending = !post.publishedAt;
@@ -157,18 +161,19 @@ export default function CalendarView() {
                         <div 
                           key={idx}
                           className={`
-                            px-2 py-1 rounded text-xs cursor-pointer transition-all
-                            ${isPending ? 'bg-chart-3/20 text-chart-3 hover:bg-chart-3/30' : ''}
-                            ${isPublished ? 'bg-chart-2/20 text-chart-2 hover:bg-chart-2/30' : ''}
+                            px-3 py-2 rounded-lg text-xs cursor-pointer transition-all font-medium shadow-sm
+                            ${isPending ? 'bg-warning/20 text-warning hover:bg-warning/30' : ''}
+                            ${isPublished ? 'bg-success/20 text-success hover:bg-success/30' : ''}
                           `}
                           data-testid={`calendar-post-${post.id}`}
                         >
-                          <span>{time} - {post.postType || 'Post'}</span>
+                          <div className="font-semibold">{time}</div>
+                          <div className="truncate opacity-90">{post.postType || 'Post'}</div>
                         </div>
                       );
                     })}
                     {postsForDay.length > 2 && (
-                      <div className="text-[10px] text-muted-foreground pl-2">
+                      <div className="text-[11px] text-muted-foreground pl-2 font-medium">
                         +{postsForDay.length - 2} autre(s)
                       </div>
                     )}
@@ -179,15 +184,14 @@ export default function CalendarView() {
           ))}
         </div>
 
-        {/* Legend */}
-        <div className="mt-6 flex items-center justify-center gap-6 flex-wrap">
-          <div className="flex items-center gap-2">
-            <div className="w-3 h-3 rounded bg-chart-3"></div>
-            <span className="text-sm text-muted-foreground">Programmé</span>
+        <div className="mt-8 flex items-center justify-center gap-8 flex-wrap">
+          <div className="flex items-center gap-3">
+            <div className="w-4 h-4 rounded-md bg-warning/20 border-2 border-warning"></div>
+            <span className="text-sm text-muted-foreground font-medium">Programmé</span>
           </div>
-          <div className="flex items-center gap-2">
-            <div className="w-3 h-3 rounded bg-chart-2"></div>
-            <span className="text-sm text-muted-foreground">Publié</span>
+          <div className="flex items-center gap-3">
+            <div className="w-4 h-4 rounded-md bg-success/20 border-2 border-success"></div>
+            <span className="text-sm text-muted-foreground font-medium">Publié</span>
           </div>
         </div>
       </div>
diff --git a/client/src/components/managed-pages.tsx b/client/src/components/managed-pages.tsx
index fb5a3c9..6400d3a 100644
--- a/client/src/components/managed-pages.tsx
+++ b/client/src/components/managed-pages.tsx
@@ -1,6 +1,7 @@
 import { Button } from "@/components/ui/button";
 import { useQuery } from "@tanstack/react-query";
-import { Plus } from "lucide-react";
+import { Plus, Users } from "lucide-react";
+import { SiFacebook, SiInstagram } from "react-icons/si";
 
 export default function ManagedPages() {
   const { data: pages, isLoading } = useQuery({
@@ -9,11 +10,11 @@ export default function ManagedPages() {
 
   if (isLoading) {
     return (
-      <div className="bg-card rounded-lg border border-border p-6">
-        <div className="skeleton h-8 w-48 mb-4" />
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
-          {[1, 2, 3, 4].map((i) => (
-            <div key={i} className="skeleton h-32 rounded-lg" />
+      <div className="bg-card rounded-2xl border border-border/50 p-8 shadow-lg">
+        <div className="skeleton h-8 w-48 mb-6 rounded-lg" />
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {[1, 2, 3].map((i) => (
+            <div key={i} className="skeleton h-40 rounded-xl" />
           ))}
         </div>
       </div>
@@ -21,56 +22,78 @@ export default function ManagedPages() {
   }
 
   return (
-    <div className="bg-card rounded-lg border border-border overflow-hidden">
-      <div className="border-b border-border p-4 flex items-center justify-between">
-        <div>
-          <h3 className="font-semibold text-foreground">Pages gérées</h3>
-          <p className="text-sm text-muted-foreground mt-1">
-            Gérez vos pages Facebook et Instagram connectées
-          </p>
+    <div className="bg-card rounded-2xl border border-border/50 overflow-hidden shadow-lg">
+      <div className="border-b border-border/50 p-6 bg-gradient-to-r from-primary/5 to-secondary/5">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-4">
+            <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-primary to-secondary flex items-center justify-center shadow-lg">
+              <Users className="text-white w-6 h-6" />
+            </div>
+            <div>
+              <h3 className="text-lg font-semibold text-foreground">Pages gérées</h3>
+              <p className="text-sm text-muted-foreground">
+                {(pages as any[])?.length || 0} page(s) connectée(s)
+              </p>
+            </div>
+          </div>
+          <Button 
+            className="bg-gradient-to-r from-primary to-secondary hover:opacity-90 rounded-xl"
+            data-testid="button-connect-page"
+          >
+            <Plus className="w-4 h-4 mr-2" />
+            Connecter une page
+          </Button>
         </div>
-        <Button data-testid="button-connect-page">
-          <Plus className="w-4 h-4 mr-2" />
-          Connecter une page
-        </Button>
       </div>
 
-      <div className="p-6">
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+      <div className="p-8">
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
           {pages && (pages as any[]).length > 0 ? (
             (pages as any[]).map((page: any) => (
               <div
                 key={page.id}
-                className="border border-border rounded-lg p-4 hover:shadow-lg transition-all cursor-pointer"
+                className="border border-border/50 rounded-2xl p-6 hover:shadow-xl hover:border-primary/30 transition-all cursor-pointer bg-card"
                 data-testid={`page-card-${page.id}`}
               >
-                <div className="flex items-start justify-between mb-3">
+                <div className="flex items-start justify-between mb-5">
                   <div className={`
-                    w-12 h-12 rounded-lg flex items-center justify-center
-                    ${page.platform === "facebook" ? "bg-chart-1/10" : "bg-chart-5/10"}
+                    w-14 h-14 rounded-xl flex items-center justify-center shadow-md
+                    ${page.platform === "facebook" ? "bg-[#1877F2]/10" : "bg-[#E4405F]/10"}
                   `}>
-                    <i className={`
-                      fab text-2xl
-                      ${page.platform === "facebook" ? "fa-facebook text-chart-1" : "fa-instagram text-chart-5"}
-                    `}></i>
+                    {page.platform === "facebook" ? (
+                      <SiFacebook className="text-[#1877F2] text-2xl" />
+                    ) : (
+                      <SiInstagram className="text-[#E4405F] text-2xl" />
+                    )}
                   </div>
-                  <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-chart-2 text-white">
+                  <span className={`
+                    inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold
+                    ${page.isActive === "true" ? "bg-success/20 text-success" : "bg-muted text-muted-foreground"}
+                  `}>
                     {page.isActive === "true" ? "Actif" : "Inactif"}
                   </span>
                 </div>
-                <h4 className="font-semibold text-foreground mb-1">{page.pageName}</h4>
-                <p className="text-xs text-muted-foreground mb-3">
+                <h4 className="font-semibold text-foreground text-lg mb-2">{page.pageName}</h4>
+                <p className="text-sm text-muted-foreground mb-4 font-medium">
                   {page.platform === "facebook" ? "Facebook Page" : "Instagram Business"}
                 </p>
-                <div className="flex items-center justify-between text-xs text-muted-foreground">
-                  <span>{page.followersCount?.toLocaleString() || 0} abonnés</span>
+                <div className="flex items-center justify-between pt-4 border-t border-border/50">
+                  <div className="flex items-center gap-2">
+                    <Users className="w-4 h-4 text-muted-foreground" />
+                    <span className="text-sm text-muted-foreground font-medium">
+                      {page.followersCount?.toLocaleString() || 0} abonnés
+                    </span>
+                  </div>
                 </div>
               </div>
             ))
           ) : (
-            <div className="col-span-full text-center py-12">
-              <p className="text-muted-foreground mb-4">Aucune page connectée</p>
-              <Button>
+            <div className="col-span-full text-center py-16">
+              <div className="w-20 h-20 rounded-2xl bg-muted/30 flex items-center justify-center mx-auto mb-6">
+                <Users className="w-10 h-10 text-muted-foreground opacity-50" />
+              </div>
+              <p className="text-muted-foreground mb-6 text-lg">Aucune page connectée</p>
+              <Button className="bg-gradient-to-r from-primary to-secondary hover:opacity-90 rounded-xl">
                 <Plus className="w-4 h-4 mr-2" />
                 Connecter votre première page
               </Button>
diff --git a/client/src/components/media-upload.tsx b/client/src/components/media-upload.tsx
index 01c4378..ebc08cc 100644
--- a/client/src/components/media-upload.tsx
+++ b/client/src/components/media-upload.tsx
@@ -3,8 +3,9 @@ import { useDropzone } from "react-dropzone";
 import { Button } from "@/components/ui/button";
 import { useMutation, useQuery } from "@tanstack/react-query";
 import { apiRequest, queryClient } from "@/lib/queryClient";
-import { CloudUpload, Image as ImageIcon, Video, X } from "lucide-react";
+import { CloudUpload, Image as ImageIcon, Video, X, Upload } from "lucide-react";
 import { useToast } from "@/hooks/use-toast";
+import { SiFacebook, SiInstagram } from "react-icons/si";
 
 export default function MediaUpload() {
   const { toast } = useToast();
@@ -54,7 +55,7 @@ export default function MediaUpload() {
       "image/*": [".png", ".jpg", ".jpeg", ".gif"],
       "video/*": [".mp4", ".mov"],
     },
-    maxSize: 52428800, // 50MB
+    maxSize: 52428800,
   });
 
   const deleteMutation = useMutation({
@@ -68,101 +69,114 @@ export default function MediaUpload() {
   });
 
   return (
-    <div className="bg-card rounded-lg border border-border overflow-hidden">
-      <div className="border-b border-border p-4 flex items-center justify-between">
-        <div>
-          <h3 className="font-semibold text-foreground">Téléchargement et recadrage de médias</h3>
-          <p className="text-sm text-muted-foreground mt-1">
-            Ajoutez des photos ou vidéos, elles seront automatiquement recadrées pour Facebook et Instagram
-          </p>
+    <div className="bg-card rounded-2xl border border-border/50 overflow-hidden shadow-lg">
+      <div className="border-b border-border/50 p-6 bg-gradient-to-r from-primary/5 to-secondary/5">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-4">
+            <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-primary to-secondary flex items-center justify-center shadow-lg">
+              <Upload className="text-white w-6 h-6" />
+            </div>
+            <div>
+              <h3 className="text-lg font-semibold text-foreground">Médiathèque</h3>
+              <p className="text-sm text-muted-foreground">Téléchargement et recadrage automatique</p>
+            </div>
+          </div>
+          <Button 
+            onClick={open}
+            className="bg-gradient-to-r from-primary to-secondary hover:opacity-90 rounded-xl"
+            data-testid="button-browse"
+          >
+            <CloudUpload className="w-4 h-4 mr-2" />
+            Parcourir
+          </Button>
         </div>
-        <Button 
-          onClick={open}
-          data-testid="button-browse"
-        >
-          <CloudUpload className="w-4 h-4 mr-2" />
-          Parcourir
-        </Button>
       </div>
 
-      <div className="p-6">
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-          {/* Upload Zone */}
-          <div>
+      <div className="p-8">
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
+          <div className="space-y-6">
             <div
               {...getRootProps()}
               className={`
-                border-2 border-dashed rounded-lg p-8 text-center cursor-pointer transition-all
-                ${isDragActive ? "border-primary bg-accent" : "border-border hover:border-primary hover:bg-accent"}
+                border-2 border-dashed rounded-2xl p-12 text-center cursor-pointer transition-all
+                ${isDragActive ? "border-primary bg-primary/5 shadow-lg" : "border-border/50 hover:border-primary hover:bg-accent/30"}
               `}
               data-testid="dropzone-upload"
             >
               <input {...getInputProps()} />
-              <CloudUpload className="w-12 h-12 text-muted-foreground mx-auto mb-4" />
-              <p className="text-foreground font-medium mb-2">
-                {isDragActive ? "Déposez vos fichiers ici" : "Glissez-déposez vos fichiers ici"}
+              <div className="w-16 h-16 rounded-2xl bg-gradient-to-br from-primary/10 to-secondary/10 flex items-center justify-center mx-auto mb-6">
+                <CloudUpload className="w-8 h-8 text-primary" />
+              </div>
+              <p className="text-foreground font-semibold text-lg mb-2">
+                {isDragActive ? "Déposez vos fichiers ici" : "Glissez-déposez vos fichiers"}
               </p>
               <p className="text-sm text-muted-foreground mb-4">ou cliquez pour parcourir</p>
-              <p className="text-xs text-muted-foreground">PNG, JPG, MP4 jusqu'à 50MB</p>
+              <p className="text-xs text-muted-foreground font-medium">PNG, JPG, MP4 jusqu'à 50MB</p>
             </div>
 
-            {/* Uploaded Files */}
-            <div className="mt-6 space-y-3">
-              <h4 className="text-sm font-semibold text-foreground mb-3">
-                Fichiers téléchargés ({(mediaList as any[])?.length || 0})
+            <div className="space-y-4">
+              <h4 className="text-sm font-semibold text-foreground flex items-center justify-between">
+                <span>Fichiers téléchargés</span>
+                <span className="text-xs font-medium text-muted-foreground bg-muted/30 px-3 py-1 rounded-full">
+                  {(mediaList as any[])?.length || 0} média(s)
+                </span>
               </h4>
 
-              {(mediaList as any[])?.slice(0, 3).map((media: any) => (
-                <div
-                  key={media.id}
-                  onClick={() => setSelectedFile(media)}
-                  className="flex items-center gap-3 p-3 rounded-lg bg-accent border border-border cursor-pointer hover:bg-accent/80 transition-colors"
-                  data-testid={`media-item-${media.id}`}
-                >
-                  <div className="w-12 h-12 rounded bg-muted flex items-center justify-center flex-shrink-0">
-                    {media.type === "video" ? (
-                      <Video className="w-6 h-6 text-muted-foreground" />
-                    ) : (
-                      <ImageIcon className="w-6 h-6 text-muted-foreground" />
-                    )}
+              <div className="space-y-3">
+                {(mediaList as any[])?.slice(0, 5).map((media: any) => (
+                  <div
+                    key={media.id}
+                    onClick={() => setSelectedFile(media)}
+                    className="flex items-center gap-4 p-4 rounded-xl bg-muted/30 border border-border/50 cursor-pointer hover:bg-muted hover:shadow-md transition-all"
+                    data-testid={`media-item-${media.id}`}
+                  >
+                    <div className="w-14 h-14 rounded-lg bg-gradient-to-br from-muted to-muted/50 flex items-center justify-center flex-shrink-0">
+                      {media.type === "video" ? (
+                        <Video className="w-7 h-7 text-secondary" />
+                      ) : (
+                        <ImageIcon className="w-7 h-7 text-primary" />
+                      )}
+                    </div>
+                    <div className="flex-1 min-w-0">
+                      <p className="text-sm font-semibold text-foreground truncate">{media.fileName}</p>
+                      <p className="text-xs text-muted-foreground font-medium mt-1">
+                        {(media.fileSize / 1024 / 1024).toFixed(1)} MB
+                      </p>
+                    </div>
+                    <div className="flex items-center gap-3">
+                      <span className="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-success/20 text-success">
+                        Prêt
+                      </span>
+                      <button
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          deleteMutation.mutate(media.id);
+                        }}
+                        className="text-muted-foreground hover:text-destructive transition-all p-1 rounded-lg hover:bg-destructive/10"
+                        data-testid={`button-delete-${media.id}`}
+                      >
+                        <X className="w-5 h-5" />
+                      </button>
+                    </div>
                   </div>
-                  <div className="flex-1 min-w-0">
-                    <p className="text-sm font-medium text-foreground truncate">{media.fileName}</p>
-                    <p className="text-xs text-muted-foreground">
-                      {(media.fileSize / 1024 / 1024).toFixed(1)} MB
-                    </p>
-                  </div>
-                  <div className="flex items-center gap-2">
-                    <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-chart-2 text-white">
-                      Prêt
-                    </span>
-                    <button
-                      onClick={() => deleteMutation.mutate(media.id)}
-                      className="text-muted-foreground hover:text-destructive transition-all"
-                      data-testid={`button-delete-${media.id}`}
-                    >
-                      <X className="w-4 h-4" />
-                    </button>
-                  </div>
-                </div>
-              ))}
+                ))}
+              </div>
             </div>
           </div>
 
-          {/* Preview and Crop */}
-          <div>
-            <h4 className="text-sm font-semibold text-foreground mb-3">Aperçu et recadrage automatique</h4>
-            <div className="space-y-4">
-              {/* Facebook Feed Preview */}
-              <div className="border border-border rounded-lg p-4">
-                <div className="flex items-center justify-between mb-3">
+          <div className="space-y-6">
+            <h4 className="text-sm font-semibold text-foreground">Aperçu et recadrage automatique</h4>
+            
+            <div className="space-y-5">
+              <div className="border border-border/50 rounded-xl p-5 bg-card shadow-sm">
+                <div className="flex items-center justify-between mb-4">
                   <div className="flex items-center gap-2">
-                    <i className="fab fa-facebook text-chart-1"></i>
-                    <span className="text-sm font-medium text-foreground">Facebook - Feed</span>
+                    <SiFacebook className="text-[#1877F2] text-lg" />
+                    <span className="text-sm font-semibold text-foreground">Facebook Feed</span>
                   </div>
-                  <span className="text-xs text-muted-foreground">1200x630</span>
+                  <span className="text-xs text-muted-foreground bg-muted/30 px-2 py-1 rounded-md font-medium">1200×630</span>
                 </div>
-                <div className="aspect-[1.91/1] bg-muted rounded-lg overflow-hidden">
+                <div className="aspect-[1.91/1] bg-muted/30 rounded-lg overflow-hidden border border-border/50">
                   {selectedFile?.facebookFeedUrl ? (
                     <img
                       src={selectedFile.facebookFeedUrl}
@@ -171,22 +185,21 @@ export default function MediaUpload() {
                     />
                   ) : (
                     <div className="w-full h-full flex items-center justify-center">
-                      <ImageIcon className="w-12 h-12 text-muted-foreground" />
+                      <ImageIcon className="w-12 h-12 text-muted-foreground opacity-50" />
                     </div>
                   )}
                 </div>
               </div>
 
-              {/* Instagram Feed Preview */}
-              <div className="border border-border rounded-lg p-4">
-                <div className="flex items-center justify-between mb-3">
+              <div className="border border-border/50 rounded-xl p-5 bg-card shadow-sm">
+                <div className="flex items-center justify-between mb-4">
                   <div className="flex items-center gap-2">
-                    <i className="fab fa-instagram text-chart-5"></i>
-                    <span className="text-sm font-medium text-foreground">Instagram - Feed</span>
+                    <SiInstagram className="text-[#E4405F] text-lg" />
+                    <span className="text-sm font-semibold text-foreground">Instagram Feed</span>
                   </div>
-                  <span className="text-xs text-muted-foreground">1080x1080</span>
+                  <span className="text-xs text-muted-foreground bg-muted/30 px-2 py-1 rounded-md font-medium">1080×1080</span>
                 </div>
-                <div className="aspect-square bg-muted rounded-lg overflow-hidden">
+                <div className="aspect-square bg-muted/30 rounded-lg overflow-hidden border border-border/50">
                   {selectedFile?.instagramFeedUrl ? (
                     <img
                       src={selectedFile.instagramFeedUrl}
@@ -195,22 +208,21 @@ export default function MediaUpload() {
                     />
                   ) : (
                     <div className="w-full h-full flex items-center justify-center">
-                      <ImageIcon className="w-12 h-12 text-muted-foreground" />
+                      <ImageIcon className="w-12 h-12 text-muted-foreground opacity-50" />
                     </div>
                   )}
                 </div>
               </div>
 
-              {/* Instagram Story Preview */}
-              <div className="border border-border rounded-lg p-4">
-                <div className="flex items-center justify-between mb-3">
+              <div className="border border-border/50 rounded-xl p-5 bg-card shadow-sm">
+                <div className="flex items-center justify-between mb-4">
                   <div className="flex items-center gap-2">
-                    <i className="fab fa-instagram text-chart-5"></i>
-                    <span className="text-sm font-medium text-foreground">Instagram - Story</span>
+                    <SiInstagram className="text-[#E4405F] text-lg" />
+                    <span className="text-sm font-semibold text-foreground">Instagram Story</span>
                   </div>
-                  <span className="text-xs text-muted-foreground">1080x1920</span>
+                  <span className="text-xs text-muted-foreground bg-muted/30 px-2 py-1 rounded-md font-medium">1080×1920</span>
                 </div>
-                <div className="aspect-[9/16] bg-muted rounded-lg overflow-hidden max-w-[200px]">
+                <div className="aspect-[9/16] bg-muted/30 rounded-lg overflow-hidden max-w-[220px] border border-border/50">
                   {selectedFile?.instagramStoryUrl ? (
                     <img
                       src={selectedFile.instagramStoryUrl}
@@ -219,7 +231,7 @@ export default function MediaUpload() {
                     />
                   ) : (
                     <div className="w-full h-full flex items-center justify-center">
-                      <ImageIcon className="w-8 h-8 text-muted-foreground" />
+                      <ImageIcon className="w-10 h-10 text-muted-foreground opacity-50" />
                     </div>
                   )}
                 </div>
diff --git a/client/src/components/quick-actions.tsx b/client/src/components/quick-actions.tsx
index 26bf823..bea65dd 100644
--- a/client/src/components/quick-actions.tsx
+++ b/client/src/components/quick-actions.tsx
@@ -1,5 +1,5 @@
 import { Button } from "@/components/ui/button";
-import { Image, Video, CalendarPlus, Clock, Plug } from "lucide-react";
+import { Image, Video, CalendarPlus, Clock, Plug, Zap, PlusCircle } from "lucide-react";
 import { useQuery } from "@tanstack/react-query";
 
 export default function QuickActions() {
@@ -10,101 +10,110 @@ export default function QuickActions() {
 
   return (
     <div className="space-y-6">
-      {/* New Publication Card */}
-      <div className="bg-card rounded-lg border border-border p-6">
-        <h3 className="font-semibold text-foreground mb-4 flex items-center gap-2">
-          <i className="fas fa-plus-circle text-primary"></i>
-          Nouvelle publication
-        </h3>
+      <div className="bg-card rounded-2xl border border-border/50 p-6 shadow-lg">
+        <div className="flex items-center gap-3 mb-6">
+          <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-primary to-secondary flex items-center justify-center">
+            <PlusCircle className="text-white w-5 h-5" />
+          </div>
+          <h3 className="text-lg font-semibold text-foreground">Nouvelle publication</h3>
+        </div>
         <div className="space-y-3">
-          <Button className="w-full" data-testid="button-new-media-post">
+          <Button className="w-full bg-gradient-to-r from-primary to-secondary hover:opacity-90 rounded-xl" data-testid="button-new-media-post">
             <Image className="w-4 h-4 mr-2" />
             Publication avec média
           </Button>
-          <Button variant="outline" className="w-full" data-testid="button-new-story">
+          <Button variant="outline" className="w-full rounded-xl border-border/50" data-testid="button-new-story">
             <Video className="w-4 h-4 mr-2" />
             Story vidéo
           </Button>
-          <Button variant="outline" className="w-full" data-testid="button-schedule-series">
+          <Button variant="outline" className="w-full rounded-xl border-border/50" data-testid="button-schedule-series">
             <CalendarPlus className="w-4 h-4 mr-2" />
             Planifier série
           </Button>
         </div>
       </div>
 
-      {/* Recent Activity */}
-      <div className="bg-card rounded-lg border border-border p-6">
-        <h3 className="font-semibold text-foreground mb-4 flex items-center gap-2">
-          <Clock className="w-5 h-5 text-chart-3" />
-          Activité récente
-        </h3>
-        <div className="space-y-3">
+      <div className="bg-card rounded-2xl border border-border/50 p-6 shadow-lg">
+        <div className="flex items-center gap-3 mb-6">
+          <div className="w-10 h-10 rounded-xl bg-warning/10 flex items-center justify-center">
+            <Clock className="text-warning w-5 h-5" />
+          </div>
+          <h3 className="text-lg font-semibold text-foreground">Activité récente</h3>
+        </div>
+        <div className="space-y-4">
           {recentActivity && recentActivity.length > 0 ? (
             recentActivity.map((activity: any, index: number) => (
               <div
                 key={activity.id}
-                className="flex items-start gap-3 pb-3 border-b border-border last:border-0 last:pb-0"
+                className="flex items-start gap-4 pb-4 border-b border-border/50 last:border-0 last:pb-0"
                 data-testid={`activity-${index}`}
               >
-                <div className="w-2 h-2 rounded-full bg-chart-2 mt-2"></div>
+                <div className="w-2 h-2 rounded-full bg-success mt-2 shadow-sm"></div>
                 <div className="flex-1">
-                  <p className="text-sm text-foreground">
+                  <p className="text-sm font-medium text-foreground">
                     {activity.status === "scheduled" ? "Publication planifiée" : "Brouillon créé"}
                   </p>
-                  <p className="text-xs text-muted-foreground mt-1">
-                    {new Date(activity.createdAt).toLocaleDateString("fr-FR")}
+                  <p className="text-xs text-muted-foreground mt-1 font-medium">
+                    {new Date(activity.createdAt).toLocaleDateString("fr-FR", { 
+                      day: '2-digit',
+                      month: 'short',
+                      hour: '2-digit',
+                      minute: '2-digit'
+                    })}
                   </p>
                 </div>
               </div>
             ))
           ) : (
-            <div className="text-center py-4">
+            <div className="text-center py-8">
+              <Clock className="w-12 h-12 text-muted-foreground opacity-30 mx-auto mb-3" />
               <p className="text-sm text-muted-foreground">Aucune activité récente</p>
             </div>
           )}
         </div>
       </div>
 
-      {/* API Status */}
-      <div className="bg-card rounded-lg border border-border p-6">
-        <h3 className="font-semibold text-foreground mb-4 flex items-center gap-2">
-          <Plug className="w-5 h-5 text-chart-2" />
-          État des services
-        </h3>
-        <div className="space-y-3">
+      <div className="bg-card rounded-2xl border border-border/50 p-6 shadow-lg">
+        <div className="flex items-center gap-3 mb-6">
+          <div className="w-10 h-10 rounded-xl bg-success/10 flex items-center justify-center">
+            <Zap className="text-success w-5 h-5" />
+          </div>
+          <h3 className="text-lg font-semibold text-foreground">État des services</h3>
+        </div>
+        <div className="space-y-4">
           <div className="flex items-center justify-between" data-testid="status-openrouter">
-            <div className="flex items-center gap-2">
-              <div className="w-2 h-2 rounded-full bg-chart-2"></div>
-              <span className="text-sm text-foreground">OpenRouter API</span>
+            <div className="flex items-center gap-3">
+              <div className="w-2 h-2 rounded-full bg-success shadow-sm"></div>
+              <span className="text-sm font-medium text-foreground">OpenRouter API</span>
             </div>
-            <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-chart-2 text-white">
+            <span className="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-success/20 text-success">
               Actif
             </span>
           </div>
           <div className="flex items-center justify-between" data-testid="status-facebook">
-            <div className="flex items-center gap-2">
-              <div className="w-2 h-2 rounded-full bg-chart-2"></div>
-              <span className="text-sm text-foreground">Facebook API</span>
+            <div className="flex items-center gap-3">
+              <div className="w-2 h-2 rounded-full bg-success shadow-sm"></div>
+              <span className="text-sm font-medium text-foreground">Facebook API</span>
             </div>
-            <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-chart-2 text-white">
+            <span className="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-success/20 text-success">
               Actif
             </span>
           </div>
           <div className="flex items-center justify-between" data-testid="status-instagram">
-            <div className="flex items-center gap-2">
-              <div className="w-2 h-2 rounded-full bg-chart-2"></div>
-              <span className="text-sm text-foreground">Instagram API</span>
+            <div className="flex items-center gap-3">
+              <div className="w-2 h-2 rounded-full bg-success shadow-sm"></div>
+              <span className="text-sm font-medium text-foreground">Instagram API</span>
             </div>
-            <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-chart-2 text-white">
+            <span className="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-success/20 text-success">
               Actif
             </span>
           </div>
           <div className="flex items-center justify-between" data-testid="status-database">
-            <div className="flex items-center gap-2">
-              <div className="w-2 h-2 rounded-full bg-chart-2"></div>
-              <span className="text-sm text-foreground">PostgreSQL</span>
+            <div className="flex items-center gap-3">
+              <div className="w-2 h-2 rounded-full bg-success shadow-sm"></div>
+              <span className="text-sm font-medium text-foreground">PostgreSQL</span>
             </div>
-            <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-chart-2 text-white">
+            <span className="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-success/20 text-success">
               Actif
             </span>
           </div>
diff --git a/client/src/pages/ai.tsx b/client/src/pages/ai.tsx
index d8cce5c..eb28a88 100644
--- a/client/src/pages/ai.tsx
+++ b/client/src/pages/ai.tsx
@@ -25,17 +25,15 @@ export default function AI() {
       <main className="flex-1 overflow-y-auto">
         <TopBar onMenuClick={() => setSidebarOpen(!sidebarOpen)} />
         
-        <div className="p-6">
-          <div className="mb-6">
+        <div className="p-8 max-w-5xl mx-auto">
+          <div className="mb-8">
             <h1 className="text-3xl font-bold text-foreground">Assistant IA</h1>
             <p className="text-muted-foreground mt-2">
               Générez du contenu personnalisé avec l'intelligence artificielle
             </p>
           </div>
 
-          <div className="max-w-4xl mx-auto">
-            <AiChat />
-          </div>
+          <AiChat />
         </div>
       </main>
     </div>
diff --git a/client/src/pages/analytics.tsx b/client/src/pages/analytics.tsx
index 69b4c18..d53f58b 100644
--- a/client/src/pages/analytics.tsx
+++ b/client/src/pages/analytics.tsx
@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { useQuery } from "@tanstack/react-query";
-import { TrendingUp, Users, Eye, Heart } from "lucide-react";
+import { TrendingUp, Users, Eye, Heart, BarChart3 } from "lucide-react";
 import Sidebar from "@/components/sidebar";
 import TopBar from "@/components/topbar";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
@@ -12,6 +12,37 @@ export default function Analytics() {
     queryKey: ['/api/stats'],
   });
 
+  const metrics = [
+    {
+      title: "Publications totales",
+      value: "0",
+      description: "Toutes plateformes",
+      icon: TrendingUp,
+      gradient: "from-primary to-primary/80",
+    },
+    {
+      title: "Portée totale",
+      value: "0",
+      description: "Personnes atteintes",
+      icon: Users,
+      gradient: "from-secondary to-secondary/80",
+    },
+    {
+      title: "Impressions",
+      value: "0",
+      description: "Vues totales",
+      icon: Eye,
+      gradient: "from-success to-success/80",
+    },
+    {
+      title: "Engagement",
+      value: "0",
+      description: "Interactions totales",
+      icon: Heart,
+      gradient: "from-warning to-warning/80",
+    },
+  ];
+
   return (
     <div className="flex h-screen overflow-hidden bg-background">
       {sidebarOpen && (
@@ -31,76 +62,64 @@ export default function Analytics() {
       <main className="flex-1 overflow-y-auto">
         <TopBar onMenuClick={() => setSidebarOpen(!sidebarOpen)} />
         
-        <div className="p-6">
-          <div className="mb-6">
+        <div className="p-8 max-w-[1600px] mx-auto space-y-8">
+          <div>
             <h1 className="text-3xl font-bold text-foreground">Analyses</h1>
             <p className="text-muted-foreground mt-2">
               Statistiques et performances de vos publications
             </p>
           </div>
 
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
-            <Card>
-              <CardHeader className="flex flex-row items-center justify-between pb-2">
-                <CardTitle className="text-sm font-medium text-muted-foreground">
-                  Publications totales
-                </CardTitle>
-                <TrendingUp className="w-4 h-4 text-muted-foreground" />
-              </CardHeader>
-              <CardContent>
-                <div className="text-2xl font-bold" data-testid="text-total-posts">0</div>
-                <p className="text-xs text-muted-foreground">Toutes plateformes</p>
-              </CardContent>
-            </Card>
-
-            <Card>
-              <CardHeader className="flex flex-row items-center justify-between pb-2">
-                <CardTitle className="text-sm font-medium text-muted-foreground">
-                  Portée totale
-                </CardTitle>
-                <Users className="w-4 h-4 text-muted-foreground" />
-              </CardHeader>
-              <CardContent>
-                <div className="text-2xl font-bold" data-testid="text-total-reach">0</div>
-                <p className="text-xs text-muted-foreground">Personnes atteintes</p>
-              </CardContent>
-            </Card>
-
-            <Card>
-              <CardHeader className="flex flex-row items-center justify-between pb-2">
-                <CardTitle className="text-sm font-medium text-muted-foreground">
-                  Impressions
-                </CardTitle>
-                <Eye className="w-4 h-4 text-muted-foreground" />
-              </CardHeader>
-              <CardContent>
-                <div className="text-2xl font-bold" data-testid="text-total-impressions">0</div>
-                <p className="text-xs text-muted-foreground">Vues totales</p>
-              </CardContent>
-            </Card>
-
-            <Card>
-              <CardHeader className="flex flex-row items-center justify-between pb-2">
-                <CardTitle className="text-sm font-medium text-muted-foreground">
-                  Engagement
-                </CardTitle>
-                <Heart className="w-4 h-4 text-muted-foreground" />
-              </CardHeader>
-              <CardContent>
-                <div className="text-2xl font-bold" data-testid="text-total-engagement">0</div>
-                <p className="text-xs text-muted-foreground">Interactions totales</p>
-              </CardContent>
-            </Card>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+            {metrics.map((metric, index) => {
+              const Icon = metric.icon;
+              return (
+                <Card key={index} className="rounded-2xl border-border/50 shadow-lg overflow-hidden">
+                  <CardHeader className="pb-4">
+                    <div className="flex items-center justify-between">
+                      <CardTitle className="text-sm font-medium text-muted-foreground">
+                        {metric.title}
+                      </CardTitle>
+                      <div className={`w-10 h-10 rounded-xl bg-gradient-to-br ${metric.gradient} flex items-center justify-center shadow-md`}>
+                        <Icon className="w-5 h-5 text-white" />
+                      </div>
+                    </div>
+                  </CardHeader>
+                  <CardContent>
+                    <div className="text-3xl font-bold" data-testid={`text-${metric.title.toLowerCase().replace(/\s+/g, '-')}`}>
+                      {metric.value}
+                    </div>
+                    <p className="text-xs text-muted-foreground mt-2 font-medium">{metric.description}</p>
+                  </CardContent>
+                </Card>
+              );
+            })}
           </div>
 
-          <Card>
-            <CardHeader>
-              <CardTitle>Fonctionnalité à venir</CardTitle>
+          <Card className="rounded-2xl border-border/50 shadow-lg">
+            <CardHeader className="border-b border-border/50 p-6 bg-gradient-to-r from-primary/5 to-secondary/5">
+              <div className="flex items-center gap-4">
+                <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-primary to-secondary flex items-center justify-center shadow-lg">
+                  <BarChart3 className="text-white w-6 h-6" />
+                </div>
+                <div>
+                  <CardTitle className="text-lg">Fonctionnalité à venir</CardTitle>
+                  <p className="text-sm text-muted-foreground mt-1">Graphiques et statistiques détaillées</p>
+                </div>
+              </div>
             </CardHeader>
-            <CardContent>
-              <p className="text-muted-foreground">
-                Les analyses détaillées et les graphiques de performance seront disponibles prochainement.
-              </p>
+            <CardContent className="p-8">
+              <div className="text-center py-12">
+                <div className="w-20 h-20 rounded-2xl bg-muted/30 flex items-center justify-center mx-auto mb-6">
+                  <BarChart3 className="w-10 h-10 text-muted-foreground opacity-50" />
+                </div>
+                <p className="text-muted-foreground text-lg mb-2">
+                  Les analyses détaillées et les graphiques de performance seront disponibles prochainement.
+                </p>
+                <p className="text-sm text-muted-foreground">
+                  Vous pourrez suivre l'évolution de vos statistiques au fil du temps
+                </p>
+              </div>
             </CardContent>
           </Card>
         </div>
diff --git a/client/src/pages/calendar.tsx b/client/src/pages/calendar.tsx
index be2a7a5..b97aca3 100644
--- a/client/src/pages/calendar.tsx
+++ b/client/src/pages/calendar.tsx
@@ -25,8 +25,8 @@ export default function Calendar() {
       <main className="flex-1 overflow-y-auto">
         <TopBar onMenuClick={() => setSidebarOpen(!sidebarOpen)} />
         
-        <div className="p-6">
-          <div className="mb-6">
+        <div className="p-8 max-w-[1600px] mx-auto">
+          <div className="mb-8">
             <h1 className="text-3xl font-bold text-foreground">Calendrier</h1>
             <p className="text-muted-foreground mt-2">
               Visualisez et gérez vos publications planifiées
diff --git a/client/src/pages/dashboard.tsx b/client/src/pages/dashboard.tsx
index 40232ff..e208184 100644
--- a/client/src/pages/dashboard.tsx
+++ b/client/src/pages/dashboard.tsx
@@ -6,7 +6,7 @@ import MediaUpload from "@/components/media-upload";
 import CalendarView from "@/components/calendar-view";
 import ManagedPages from "@/components/managed-pages";
 import QuickActions from "@/components/quick-actions";
-import { Menu } from "lucide-react";
+import { PlusCircle } from "lucide-react";
 import { useState } from "react";
 
 export default function Dashboard() {
@@ -14,7 +14,6 @@ export default function Dashboard() {
 
   return (
     <div className="flex h-screen overflow-hidden bg-background">
-      {/* Mobile sidebar overlay */}
       {sidebarOpen && (
         <div 
           className="fixed inset-0 bg-black/50 z-40 lg:hidden"
@@ -22,7 +21,6 @@ export default function Dashboard() {
         />
       )}
       
-      {/* Sidebar */}
       <div className={`
         fixed lg:static inset-y-0 left-0 z-50 transform transition-transform duration-300 ease-in-out
         ${sidebarOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'}
@@ -30,34 +28,32 @@ export default function Dashboard() {
         <Sidebar />
       </div>
 
-      {/* Main content */}
       <main className="flex-1 overflow-y-auto">
         <TopBar onMenuClick={() => setSidebarOpen(!sidebarOpen)} />
         
-        <div className="p-6 space-y-6">
+        <div className="p-8 space-y-8 max-w-[1600px] mx-auto">
           <StatsCards />
           
-          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-            <div className="lg:col-span-2">
+          <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+            <div className="lg:col-span-2 space-y-8">
               <AiChat />
+              <MediaUpload />
             </div>
-            <div>
+            <div className="space-y-8">
               <QuickActions />
             </div>
           </div>
 
-          <MediaUpload />
           <CalendarView />
           <ManagedPages />
         </div>
       </main>
 
-      {/* Floating action button for mobile */}
       <button 
-        className="fixed bottom-6 right-6 w-14 h-14 bg-primary rounded-full shadow-xl flex items-center justify-center text-primary-foreground lg:hidden hover:scale-110 transition-all z-30"
+        className="fixed bottom-8 right-8 w-16 h-16 bg-gradient-to-br from-primary to-secondary rounded-2xl shadow-2xl flex items-center justify-center text-white lg:hidden hover:scale-110 transition-all z-30"
         data-testid="button-new-post"
       >
-        <Menu className="w-6 h-6" />
+        <PlusCircle className="w-7 h-7" />
       </button>
     </div>
   );
diff --git a/client/src/pages/history.tsx b/client/src/pages/history.tsx
index 4b098e2..e24f20a 100644
--- a/client/src/pages/history.tsx
+++ b/client/src/pages/history.tsx
@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { useQuery } from "@tanstack/react-query";
-import { Clock, CheckCircle, XCircle, Calendar } from "lucide-react";
+import { Clock, CheckCircle, XCircle, Calendar, History as HistoryIcon } from "lucide-react";
 import Sidebar from "@/components/sidebar";
 import TopBar from "@/components/topbar";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
@@ -37,8 +37,8 @@ export default function History() {
       <main className="flex-1 overflow-y-auto">
         <TopBar onMenuClick={() => setSidebarOpen(!sidebarOpen)} />
         
-        <div className="p-6">
-          <div className="mb-6">
+        <div className="p-8 max-w-5xl mx-auto">
+          <div className="mb-8">
             <h1 className="text-3xl font-bold text-foreground">Historique</h1>
             <p className="text-muted-foreground mt-2">
               Consultez l'historique de vos publications
@@ -46,40 +46,48 @@ export default function History() {
           </div>
 
           {isLoading ? (
-            <div className="space-y-4">
+            <div className="space-y-6">
               {[1, 2, 3].map((i) => (
-                <Card key={i} className="animate-pulse">
-                  <CardHeader className="h-24 bg-muted"></CardHeader>
-                </Card>
+                <div key={i} className="h-40 bg-card rounded-2xl border border-border/50 animate-pulse" />
               ))}
             </div>
           ) : publishedPosts.length === 0 ? (
-            <Card className="border-dashed">
-              <CardContent className="flex flex-col items-center justify-center py-12">
-                <Clock className="w-12 h-12 text-muted-foreground mb-4" />
-                <h3 className="text-lg font-semibold mb-2">Aucune publication</h3>
-                <p className="text-muted-foreground text-center">
+            <Card className="rounded-2xl border-border/50 border-dashed shadow-lg">
+              <CardContent className="flex flex-col items-center justify-center py-16">
+                <div className="w-20 h-20 rounded-2xl bg-muted/30 flex items-center justify-center mb-6">
+                  <HistoryIcon className="w-10 h-10 text-muted-foreground opacity-50" />
+                </div>
+                <h3 className="text-xl font-semibold mb-2">Aucune publication</h3>
+                <p className="text-muted-foreground text-center max-w-md">
                   Vos publications apparaîtront ici une fois publiées
                 </p>
               </CardContent>
             </Card>
           ) : (
-            <div className="space-y-4">
+            <div className="space-y-6">
               {publishedPosts.map((post) => (
-                <Card key={post.id} data-testid={`card-post-${post.id}`}>
-                  <CardHeader>
+                <Card key={post.id} className="rounded-2xl border-border/50 shadow-lg overflow-hidden" data-testid={`card-post-${post.id}`}>
+                  <CardHeader className="border-b border-border/50 bg-gradient-to-r from-muted/20 to-muted/10 p-6">
                     <div className="flex items-start justify-between">
                       <div className="flex-1">
-                        <CardTitle className="text-lg mb-2">
-                          Publication #{post.id}
-                        </CardTitle>
-                        <p className="text-sm text-muted-foreground line-clamp-2">
+                        <div className="flex items-center gap-3 mb-3">
+                          <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-success to-success/80 flex items-center justify-center shadow-md">
+                            <CheckCircle className="w-5 h-5 text-white" />
+                          </div>
+                          <CardTitle className="text-lg">
+                            Publication #{post.id.substring(0, 8)}
+                          </CardTitle>
+                        </div>
+                        <p className="text-sm text-foreground leading-relaxed line-clamp-3">
                           {post.content}
                         </p>
                       </div>
                       <Badge 
-                        variant={post.status === 'published' ? 'default' : 'secondary'}
-                        className="ml-4"
+                        className={`ml-4 ${
+                          post.status === 'published' 
+                            ? 'bg-success/20 text-success hover:bg-success/30' 
+                            : 'bg-destructive/20 text-destructive hover:bg-destructive/30'
+                        }`}
                       >
                         {post.status === 'published' && <CheckCircle className="w-3 h-3 mr-1" />}
                         {post.status === 'failed' && <XCircle className="w-3 h-3 mr-1" />}
@@ -87,17 +95,20 @@ export default function History() {
                       </Badge>
                     </div>
                   </CardHeader>
-                  <CardContent>
-                    <div className="flex items-center gap-4 text-sm text-muted-foreground">
-                      <div className="flex items-center gap-1">
+                  <CardContent className="p-6">
+                    <div className="flex items-center gap-6 text-sm text-muted-foreground flex-wrap">
+                      <div className="flex items-center gap-2">
                         <Calendar className="w-4 h-4" />
-                        {post.updatedAt 
-                          ? format(new Date(post.updatedAt), "d MMM yyyy 'à' HH:mm", { locale: fr })
-                          : 'Date inconnue'
-                        }
+                        <span className="font-medium">
+                          {post.updatedAt 
+                            ? format(new Date(post.updatedAt), "d MMM yyyy 'à' HH:mm", { locale: fr })
+                            : 'Date inconnue'
+                          }
+                        </span>
                       </div>
                       {post.aiGenerated && (
-                        <Badge variant="outline" className="text-xs">
+                        <Badge variant="outline" className="text-xs bg-gradient-to-r from-primary/5 to-secondary/5 border-primary/20">
+                          <CheckCircle className="w-3 h-3 mr-1" />
                           Généré par IA
                         </Badge>
                       )}
diff --git a/client/src/pages/login.tsx b/client/src/pages/login.tsx
index 605242e..e84a87f 100644
--- a/client/src/pages/login.tsx
+++ b/client/src/pages/login.tsx
@@ -6,7 +6,7 @@ import { Button } from "@/components/ui/button";
 import { Label } from "@/components/ui/label";
 import { useToast } from "@/hooks/use-toast";
 import { apiRequest } from "@/lib/queryClient";
-import { Lock, User } from "lucide-react";
+import { Lock, User, Sparkles } from "lucide-react";
 
 export default function Login() {
   const [, setLocation] = useLocation();
@@ -16,7 +16,6 @@ export default function Login() {
   const [isLoading, setIsLoading] = useState(false);
   const [showDefaultPassword, setShowDefaultPassword] = useState(false);
 
-  // Vérifier si le mot de passe admin par défaut est toujours actif
   useEffect(() => {
     const checkDefaultPassword = async () => {
       try {
@@ -44,7 +43,6 @@ export default function Login() {
         description: `Bienvenue ${data.username}`,
       });
 
-      // Rediriger vers le dashboard
       setLocation("/");
     } catch (error: any) {
       toast({
@@ -58,29 +56,38 @@ export default function Login() {
   };
 
   return (
-    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-background via-background to-muted/20 p-4">
-      <Card className="w-full max-w-md">
-        <CardHeader className="space-y-1 text-center">
-          <CardTitle className="text-3xl font-bold">Social Flow</CardTitle>
-          <CardDescription>
-            Connectez-vous à votre compte pour gérer vos publications
-          </CardDescription>
+    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-background via-primary/5 to-secondary/5 p-4">
+      <div className="absolute inset-0 bg-grid-pattern opacity-5"></div>
+      
+      <Card className="w-full max-w-md rounded-2xl border-border/50 shadow-2xl relative z-10">
+        <CardHeader className="space-y-4 text-center pt-8 pb-6">
+          <div className="w-20 h-20 rounded-2xl bg-gradient-to-br from-primary to-secondary mx-auto flex items-center justify-center shadow-2xl">
+            <Sparkles className="w-10 h-10 text-white" />
+          </div>
+          <div>
+            <CardTitle className="text-3xl font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
+              Social Flow
+            </CardTitle>
+            <CardDescription className="text-base mt-3">
+              Connectez-vous à votre compte pour gérer vos publications
+            </CardDescription>
+          </div>
         </CardHeader>
-        <CardContent>
-          <form onSubmit={handleSubmit} className="space-y-4">
-            <div className="space-y-2">
-              <Label htmlFor="username" data-testid="label-username">
+        <CardContent className="pb-8 px-8">
+          <form onSubmit={handleSubmit} className="space-y-5">
+            <div className="space-y-3">
+              <Label htmlFor="username" className="text-sm font-semibold" data-testid="label-username">
                 Nom d'utilisateur
               </Label>
               <div className="relative">
-                <User className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
+                <User className="absolute left-4 top-1/2 -translate-y-1/2 h-5 w-5 text-muted-foreground" />
                 <Input
                   id="username"
                   type="text"
                   placeholder="admin"
                   value={username}
                   onChange={(e) => setUsername(e.target.value)}
-                  className="pl-10"
+                  className="pl-12 h-12 rounded-xl bg-muted/30 border-border/50 focus:border-primary/50"
                   required
                   disabled={isLoading}
                   data-testid="input-username"
@@ -88,19 +95,19 @@ export default function Login() {
               </div>
             </div>
 
-            <div className="space-y-2">
-              <Label htmlFor="password" data-testid="label-password">
+            <div className="space-y-3">
+              <Label htmlFor="password" className="text-sm font-semibold" data-testid="label-password">
                 Mot de passe
               </Label>
               <div className="relative">
-                <Lock className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
+                <Lock className="absolute left-4 top-1/2 -translate-y-1/2 h-5 w-5 text-muted-foreground" />
                 <Input
                   id="password"
                   type="password"
                   placeholder="••••••••"
                   value={password}
                   onChange={(e) => setPassword(e.target.value)}
-                  className="pl-10"
+                  className="pl-12 h-12 rounded-xl bg-muted/30 border-border/50 focus:border-primary/50"
                   required
                   disabled={isLoading}
                   data-testid="input-password"
@@ -110,7 +117,7 @@ export default function Login() {
 
             <Button
               type="submit"
-              className="w-full"
+              className="w-full h-12 rounded-xl bg-gradient-to-r from-primary to-secondary hover:opacity-90 text-base font-semibold shadow-lg mt-6"
               disabled={isLoading}
               data-testid="button-login"
             >
@@ -119,10 +126,13 @@ export default function Login() {
           </form>
 
           {showDefaultPassword && (
-            <div className="mt-6 text-center text-sm text-muted-foreground">
-              <p>Identifiants par défaut :</p>
-              <p className="font-semibold">admin / admin</p>
-              <p className="text-xs mt-2 text-orange-500">⚠️ Changez ce mot de passe après la première connexion</p>
+            <div className="mt-8 text-center p-4 rounded-xl bg-warning/10 border border-warning/20">
+              <p className="text-sm text-muted-foreground mb-2">Identifiants par défaut :</p>
+              <p className="font-semibold text-foreground">admin / admin</p>
+              <p className="text-xs mt-3 text-warning flex items-center justify-center gap-2">
+                <span className="text-base">⚠️</span>
+                Changez ce mot de passe après la première connexion
+              </p>
             </div>
           )}
         </CardContent>
diff --git a/client/src/pages/media.tsx b/client/src/pages/media.tsx
index ccc61a1..f46e7cd 100644
--- a/client/src/pages/media.tsx
+++ b/client/src/pages/media.tsx
@@ -25,8 +25,8 @@ export default function Media() {
       <main className="flex-1 overflow-y-auto">
         <TopBar onMenuClick={() => setSidebarOpen(!sidebarOpen)} />
         
-        <div className="p-6">
-          <div className="mb-6">
+        <div className="p-8 max-w-[1600px] mx-auto">
+          <div className="mb-8">
             <h1 className="text-3xl font-bold text-foreground">Médiathèque</h1>
             <p className="text-muted-foreground mt-2">
               Gérez vos images et vidéos pour vos publications
diff --git a/client/src/pages/new-post.tsx b/client/src/pages/new-post.tsx
index 82bd5ed..09612e0 100644
--- a/client/src/pages/new-post.tsx
+++ b/client/src/pages/new-post.tsx
@@ -151,18 +151,18 @@ export default function NewPost() {
       <main className="flex-1 overflow-y-auto">
         <TopBar onMenuClick={() => setSidebarOpen(!sidebarOpen)} />
         
-        <div className="p-6 max-w-5xl mx-auto">
-          <div className="mb-6">
+        <div className="p-8 max-w-6xl mx-auto">
+          <div className="mb-8">
             <h1 className="text-3xl font-bold text-foreground">Nouvelle publication</h1>
             <p className="text-muted-foreground mt-2">
               Créez et planifiez une nouvelle publication
             </p>
           </div>
 
-          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-            <div className="space-y-6">
-              <Card>
-                <CardHeader>
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
+            <div className="space-y-8">
+              <Card className="rounded-2xl border-border/50 shadow-lg">
+                <CardHeader className="p-6">
                   <CardTitle>Contenu</CardTitle>
                   <CardDescription>Informations du produit ou message</CardDescription>
                 </CardHeader>
@@ -190,8 +190,8 @@ export default function NewPost() {
                 </CardContent>
               </Card>
 
-              <Card>
-                <CardHeader>
+              <Card className="rounded-2xl border-border/50 shadow-lg">
+                <CardHeader className="p-6">
                   <CardTitle>Texte de la publication</CardTitle>
                   <CardDescription>Écrivez ou générez le texte de votre publication</CardDescription>
                 </CardHeader>
@@ -207,8 +207,8 @@ export default function NewPost() {
               </Card>
 
               {generatedVariants.length > 0 && (
-                <Card>
-                  <CardHeader>
+                <Card className="rounded-2xl border-border/50 shadow-lg">
+                  <CardHeader className="p-6">
                     <CardTitle>Variations générées par l'IA</CardTitle>
                     <CardDescription>Cliquez sur "Utiliser" pour remplir le texte ci-dessus</CardDescription>
                   </CardHeader>
@@ -241,8 +241,8 @@ export default function NewPost() {
                 </Card>
               )}
 
-              <Card>
-                <CardHeader>
+              <Card className="rounded-2xl border-border/50 shadow-lg">
+                <CardHeader className="p-6">
                   <CardTitle>Média</CardTitle>
                   <CardDescription>Sélectionnez une image ou vidéo</CardDescription>
                 </CardHeader>
@@ -285,9 +285,9 @@ export default function NewPost() {
               </Card>
             </div>
 
-            <div className="space-y-6">
-              <Card>
-                <CardHeader>
+            <div className="space-y-8">
+              <Card className="rounded-2xl border-border/50 shadow-lg">
+                <CardHeader className="p-6">
                   <CardTitle>Pages cibles</CardTitle>
                   <CardDescription>Sélectionnez les pages où publier</CardDescription>
                 </CardHeader>
@@ -332,8 +332,8 @@ export default function NewPost() {
                 </CardContent>
               </Card>
 
-              <Card>
-                <CardHeader>
+              <Card className="rounded-2xl border-border/50 shadow-lg">
+                <CardHeader className="p-6">
                   <CardTitle>Planification</CardTitle>
                   <CardDescription>Programmez la publication (optionnel)</CardDescription>
                 </CardHeader>
@@ -357,7 +357,7 @@ export default function NewPost() {
               <Button 
                 onClick={handleCreatePost}
                 disabled={createPostMutation.isPending}
-                className="w-full"
+                className="w-full bg-gradient-to-r from-primary to-secondary hover:opacity-90 shadow-lg"
                 size="lg"
                 data-testid="button-create-post"
               >
diff --git a/client/src/pages/pages.tsx b/client/src/pages/pages.tsx
index 0f5c2b8..792e6f6 100644
--- a/client/src/pages/pages.tsx
+++ b/client/src/pages/pages.tsx
@@ -61,8 +61,8 @@ export default function PagesManagement() {
       <main className="flex-1 overflow-y-auto">
         <TopBar onMenuClick={() => setSidebarOpen(!sidebarOpen)} />
         
-        <div className="p-6">
-          <div className="flex justify-between items-center mb-6">
+        <div className="p-8 max-w-[1600px] mx-auto">
+          <div className="flex justify-between items-center mb-8">
             <div>
               <h1 className="text-3xl font-bold text-foreground">Pages gérées</h1>
               <p className="text-muted-foreground mt-2">
@@ -74,16 +74,14 @@ export default function PagesManagement() {
           </div>
 
           {isLoading ? (
-            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
               {[1, 2, 3].map((i) => (
-                <Card key={i} className="animate-pulse">
-                  <CardHeader className="h-32 bg-muted"></CardHeader>
-                </Card>
+                <div key={i} className="h-48 bg-card rounded-2xl border border-border/50 animate-pulse" />
               ))}
             </div>
           ) : pages.length === 0 ? (
-            <Card className="border-dashed">
-              <CardContent className="flex flex-col items-center justify-center py-12">
+            <Card className="border-dashed rounded-2xl border-border/50 shadow-lg">
+              <CardContent className="flex flex-col items-center justify-center py-16">
                 <div className="w-16 h-16 bg-muted rounded-full flex items-center justify-center mb-4">
                   <Plus className="w-8 h-8 text-muted-foreground" />
                 </div>
@@ -98,9 +96,9 @@ export default function PagesManagement() {
               </CardContent>
             </Card>
           ) : (
-            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
               {pages.map((page) => (
-                <Card key={page.id} data-testid={`card-page-${page.id}`}>
+                <Card key={page.id} className="rounded-2xl border-border/50 shadow-lg" data-testid={`card-page-${page.id}`}>
                   <CardHeader>
                     <div className="flex items-start justify-between">
                       <div className="flex items-center gap-3">
diff --git a/client/src/pages/settings.tsx b/client/src/pages/settings.tsx
index ee5287f..0a13a7e 100644
--- a/client/src/pages/settings.tsx
+++ b/client/src/pages/settings.tsx
@@ -128,17 +128,17 @@ export default function Settings() {
       <main className="flex-1 overflow-y-auto">
         <TopBar onMenuClick={() => setSidebarOpen(!sidebarOpen)} />
         
-        <div className="p-6 max-w-4xl mx-auto">
-          <div className="mb-6">
+        <div className="p-8 max-w-4xl mx-auto">
+          <div className="mb-8">
             <h1 className="text-3xl font-bold text-foreground">Paramètres</h1>
             <p className="text-muted-foreground mt-2">
               Configurez votre application
             </p>
           </div>
 
-          <div className="space-y-6">
-            <Card>
-              <CardHeader>
+          <div className="space-y-8">
+            <Card className="rounded-2xl border-border/50 shadow-lg">
+              <CardHeader className="p-6">
                 <CardTitle className="flex items-center gap-2">
                   <Bell className="w-5 h-5" />
                   Notifications
@@ -179,8 +179,8 @@ export default function Settings() {
               </CardContent>
             </Card>
 
-            <Card>
-              <CardHeader>
+            <Card className="rounded-2xl border-border/50 shadow-lg">
+              <CardHeader className="p-6">
                 <CardTitle className="flex items-center gap-2">
                   <Brain className="w-5 h-5" />
                   Configuration OpenRouter (IA)
@@ -263,8 +263,8 @@ export default function Settings() {
               </CardContent>
             </Card>
 
-            <Card>
-              <CardHeader>
+            <Card className="rounded-2xl border-border/50 shadow-lg">
+              <CardHeader className="p-6">
                 <CardTitle className="flex items-center gap-2">
                   <Cloud className="w-5 h-5" />
                   Configuration Cloudinary
@@ -324,8 +324,8 @@ export default function Settings() {
               </CardContent>
             </Card>
 
-            <Card>
-              <CardHeader>
+            <Card className="rounded-2xl border-border/50 shadow-lg">
+              <CardHeader className="p-6">
                 <CardTitle className="flex items-center gap-2">
                   <Shield className="w-5 h-5" />
                   Sécurité
diff --git a/client/src/pages/sql.tsx b/client/src/pages/sql.tsx
index 53b02a6..3b7f892 100644
--- a/client/src/pages/sql.tsx
+++ b/client/src/pages/sql.tsx
@@ -93,7 +93,7 @@ export default function SqlAdmin() {
       <main className="flex-1 overflow-y-auto">
         <TopBar onMenuClick={() => setSidebarOpen(!sidebarOpen)} />
         
-        <div className="p-6 space-y-6">
+        <div className="p-8 max-w-[1600px] mx-auto space-y-8">
           <div>
             <h1 className="text-3xl font-bold flex items-center gap-2">
               <Database className="w-8 h-8" />
@@ -104,10 +104,10 @@ export default function SqlAdmin() {
             </p>
           </div>
 
-          <div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
+          <div className="grid grid-cols-1 lg:grid-cols-4 gap-8">
             {/* Liste des tables */}
-            <Card>
-              <CardHeader>
+            <Card className="rounded-2xl border-border/50 shadow-lg">
+              <CardHeader className="p-6">
                 <CardTitle>Tables disponibles</CardTitle>
                 <CardDescription>
                   Cliquez pour insérer dans la requête
@@ -132,9 +132,9 @@ export default function SqlAdmin() {
             </Card>
 
             {/* Éditeur SQL et résultats */}
-            <div className="lg:col-span-3 space-y-6">
-              <Card>
-                <CardHeader>
+            <div className="lg:col-span-3 space-y-8">
+              <Card className="rounded-2xl border-border/50 shadow-lg">
+                <CardHeader className="p-6">
                   <CardTitle>Éditeur SQL</CardTitle>
                   <CardDescription>
                     Entrez votre requête SQL ci-dessous
@@ -172,8 +172,8 @@ export default function SqlAdmin() {
 
               {/* Résultats */}
               {queryResult && (
-                <Card>
-                  <CardHeader>
+                <Card className="rounded-2xl border-border/50 shadow-lg">
+                  <CardHeader className="p-6">
                     <div className="flex justify-between items-center">
                       <div>
                         <CardTitle>Résultats</CardTitle>
diff --git a/client/src/pages/users-admin.tsx b/client/src/pages/users-admin.tsx
index a3af7d0..3ba8cfb 100644
--- a/client/src/pages/users-admin.tsx
+++ b/client/src/pages/users-admin.tsx
@@ -210,7 +210,7 @@ export default function UsersAdmin() {
       <main className="flex-1 overflow-y-auto">
         <TopBar onMenuClick={() => setSidebarOpen(!sidebarOpen)} />
         
-        <div className="p-6 space-y-6">
+        <div className="p-8 max-w-[1600px] mx-auto space-y-8">
           <div>
             <h1 className="text-3xl font-bold flex items-center gap-2">
               <Users className="w-8 h-8" />
@@ -221,11 +221,11 @@ export default function UsersAdmin() {
             </p>
           </div>
 
-          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+          <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
             {/* Liste des utilisateurs */}
             <div className="lg:col-span-2">
-              <Card>
-                <CardHeader>
+              <Card className="rounded-2xl border-border/50 shadow-lg">
+                <CardHeader className="p-6">
                   <CardTitle>Liste des utilisateurs</CardTitle>
                   <CardDescription>
                     {users?.length || 0} utilisateur(s) enregistré(s)
@@ -297,8 +297,8 @@ export default function UsersAdmin() {
 
             {/* Formulaire de création */}
             <div>
-              <Card>
-                <CardHeader>
+              <Card className="rounded-2xl border-border/50 shadow-lg">
+                <CardHeader className="p-6">
                   <CardTitle className="flex items-center gap-2">
                     <UserPlus className="w-5 h-5" />
                     Créer un utilisateur