diff --git a/.replit b/.replit
index 0556bf9..7cc0e13 100644
--- a/.replit
+++ b/.replit
@@ -15,7 +15,7 @@ localPort = 5000
 externalPort = 80
 
 [[ports]]
-localPort = 35981
+localPort = 35357
 externalPort = 3002
 
 [[ports]]
@@ -26,6 +26,10 @@ externalPort = 3000
 localPort = 43245
 externalPort = 3001
 
+[[ports]]
+localPort = 45209
+externalPort = 3003
+
 [env]
 PORT = "5000"
 
diff --git a/attached_assets/My workflow 8 (1)_1759424373567.json b/attached_assets/My workflow 8 (1)_1759424373567.json
new file mode 100644
index 0000000..286544f
--- /dev/null
+++ b/attached_assets/My workflow 8 (1)_1759424373567.json	
@@ -0,0 +1,322 @@
+{
+  "name": "My workflow 8",
+  "nodes": [
+    {
+      "parameters": {
+        "formTitle": "SocialFlow",
+        "formFields": {
+          "values": [
+            {
+              "fieldLabel": "Non du produit",
+              "placeholder": "nom_produit",
+              "requiredField": true
+            },
+            {
+              "fieldLabel": "Prix",
+              "placeholder": "prix",
+              "requiredField": true
+            },
+            {
+              "fieldLabel": "Caractéristiques",
+              "placeholder": "caractéristiques"
+            },
+            {
+              "fieldLabel": "Promo",
+              "placeholder": "promo"
+            },
+            {
+              "fieldLabel": "Date publication",
+              "fieldType": "date",
+              "requiredField": true
+            },
+            {
+              "fieldLabel": "Heure de publication (HH:mm)",
+              "placeholder": "heure_publication",
+              "requiredField": true
+            },
+            {
+              "fieldLabel": "Photo",
+              "fieldType": "file",
+              "acceptFileTypes": "photo"
+            }
+          ]
+        },
+        "options": {}
+      },
+      "type": "n8n-nodes-base.formTrigger",
+      "typeVersion": 2.2,
+      "position": [
+        -720,
+        160
+      ],
+      "id": "3441e9d7-35ff-4f14-bee8-78397d0e2e28",
+      "name": "On form submission",
+      "webhookId": "17357858-667e-4a3d-afd1-82039f41c927"
+    },
+    {
+      "parameters": {
+        "method": "POST",
+        "url": "=https://api.cloudinary.com/v1_1/dspr8yjfu/image/upload",
+        "sendBody": true,
+        "contentType": "multipart-form-data",
+        "bodyParameters": {
+          "parameters": [
+            {
+              "name": "upload_preset",
+              "value": "=upload_n8n"
+            },
+            {
+              "parameterType": "formBinaryData",
+              "name": "file",
+              "inputDataFieldName": "Photo"
+            }
+          ]
+        },
+        "options": {}
+      },
+      "type": "n8n-nodes-base.httpRequest",
+      "typeVersion": 4.2,
+      "position": [
+        -208,
+        16
+      ],
+      "id": "49ff16a6-a004-4ff4-a1dc-cb6902f7f46a",
+      "name": "HTTP Request"
+    },
+    {
+      "parameters": {
+        "assignments": {
+          "assignments": [
+            {
+              "id": "14257b6b-82c8-4151-85a5-f56ab814f6f3",
+              "name": "image_ready_url",
+              "value": "={{$json.secure_url\n  ? $json.secure_url.replace('/upload/','/upload/c_fill,g_auto,h_1350,w_1080,q_auto,f_auto,e_auto_contrast,e_auto_color,e_sharpen:50/')\n  : ''}}\n",
+              "type": "string"
+            },
+            {
+              "id": "74f9dbae-0e18-4cdb-b316-5976f65ad6c8",
+              "name": "image_public_id",
+              "value": "={{$json.public_id}}",
+              "type": "string"
+            }
+          ]
+        },
+        "includeOtherFields": true,
+        "options": {}
+      },
+      "type": "n8n-nodes-base.set",
+      "typeVersion": 3.4,
+      "position": [
+        16,
+        16
+      ],
+      "id": "dc95401f-403a-4a72-87e6-622709b10046",
+      "name": "Edit Fields"
+    },
+    {
+      "parameters": {
+        "promptType": "define",
+        "text": "=Langue: fr\nPAS DE TEXTE AVANT OU APRÈS.\n\nContraintes:\n- Accroche d'ouverture engageante\n- 1-2 phrases sur bénéfice client, pas style catalogue\n- Pas de lien, pas d'URL\n- 3-5 hashtags ciblés (locaux/thématiques) Ajouter #lafoirfouille\n- Ton chaleureux, concret, non agressif\n- Maximum 250 caractères \n\nContexte:\n- Produit: {{ $('On form submission').item.json['Non du produit'] }}\n- Prix: {{ $('On form submission').item.json.Prix }}\n- Caractéristiques: {{ $('On form submission').item.json['Caractéristiques'] }}\n- Promo: {{$json.promo || \"aucune\"}}\n",
+        "messages": {
+          "messageValues": [
+            {
+              "message": "Tu es un community manager de boutique physique. Tu écris pour Facebook. Objectif: engagement + visites en magasin. Pas de lien web. pas de json que du texte pure avec quelques emoji. structure le texte pour un post facebook et instagram - ne parle pas de boutique locale."
+            }
+          ]
+        },
+        "batching": {}
+      },
+      "type": "@n8n/n8n-nodes-langchain.chainLlm",
+      "typeVersion": 1.7,
+      "position": [
+        240,
+        16
+      ],
+      "id": "b7de85b4-8a06-4cd6-b3b1-dd28f7e30720",
+      "name": "Basic LLM Chain",
+      "alwaysOutputData": true
+    },
+    {
+      "parameters": {
+        "model": "openai/gpt-4o",
+        "options": {}
+      },
+      "type": "@n8n/n8n-nodes-langchain.lmChatOpenRouter",
+      "typeVersion": 1,
+      "position": [
+        224,
+        320
+      ],
+      "id": "03c7dc91-a5e0-4b58-946f-7217cfbb7f22",
+      "name": "OpenRouter Chat Model",
+      "credentials": {
+        "openRouterApi": {
+          "id": "QrDzqP7MluNzhC1L",
+          "name": "OpenRouter account"
+        }
+      }
+    },
+    {
+      "parameters": {
+        "method": "POST",
+        "url": "=https://graph.facebook.com/v23.0/119315771483782/photos",
+        "sendQuery": true,
+        "queryParameters": {
+          "parameters": [
+            {
+              "name": "url",
+              "value": "={{ $('Edit Fields').first().json.image_ready_url.trim().replace(/\\)+$/,'') }}\n"
+            },
+            {
+              "name": "message",
+              "value": "={{ $json.text }}"
+            },
+            {
+              "name": "access_token",
+              "value": "EAASQALmsF1UBPlhtfZBbZCkuu9fZAbr8OpEAXuXcLuZCAx6F2BmhZBprak0AQfdqKZA0aGsR8pDtpqmkBjb7lIqZCadMJ919IrvwwE75nEo1uZCIIuAJDqkq3Cl9feQMX126sPIabGerrLtd8Dw5NGlQTNzYB7KYqUgcjZA6N5fDt7Bn4pMKMzsh0p5MCxMxq5xV1qyNLVykNMbgE7HZBkas1oLdeFj3M2hAZAYlS4NBuoZD"
+            },
+            {
+              "name": "published",
+              "value": "=0"
+            },
+            {
+              "name": "scheduled_publish_time",
+              "value": "={{ $json.scheduled_publish_time }}"
+            }
+          ]
+        },
+        "options": {}
+      },
+      "type": "n8n-nodes-base.httpRequest",
+      "typeVersion": 4.2,
+      "position": [
+        1040,
+        -16
+      ],
+      "id": "6fbaf6c3-1744-4116-b599-047a978ba504",
+      "name": "Facebook Post Photo"
+    },
+    {
+      "parameters": {
+        "mode": "runOnceForEachItem",
+        "jsCode": "// Récupère les valeurs depuis le Form Trigger, pas depuis l'item courant\nconst dateStr = $item(0).$node[\"On form submission\"].json[\"Date publication\"];\nconst timeStr = $item(0).$node[\"On form submission\"].json[\"Heure de publication (HH:mm)\"];\n\nif (!dateStr || !timeStr) {\n  throw new Error(\"Champs manquants: \" + JSON.stringify({ dateStr, timeStr }));\n}\n\nconst [y,m,d] = dateStr.split('-').map(Number);\nconst [H,Mi] = timeStr.split(':').map(Number);\n\n// Epoch UTC\nlet ts = Math.floor(Date.UTC(y, m - 1, d, H, Mi) / 1000);\n\n// Sécurité: forcer ≥ maintenant+600s\nconst now = Math.floor(Date.now()/1000);\nif (ts < now + 600) ts = now + 1200;\n\nreturn { json: { ...$json, scheduled_publish_time: ts } };\n"
+      },
+      "type": "n8n-nodes-base.code",
+      "typeVersion": 2,
+      "position": [
+        816,
+        144
+      ],
+      "id": "93f14550-2ccd-4da7-bfb7-7ecacee3e830",
+      "name": "Code",
+      "alwaysOutputData": true
+    },
+    {
+      "parameters": {},
+      "type": "n8n-nodes-base.merge",
+      "typeVersion": 3.2,
+      "position": [
+        592,
+        144
+      ],
+      "id": "557d9b2a-ceb1-42d8-ad2d-29e8c2533d51",
+      "name": "Merge"
+    }
+  ],
+  "pinData": {},
+  "connections": {
+    "On form submission": {
+      "main": [
+        [
+          {
+            "node": "HTTP Request",
+            "type": "main",
+            "index": 0
+          },
+          {
+            "node": "Merge",
+            "type": "main",
+            "index": 1
+          }
+        ]
+      ]
+    },
+    "HTTP Request": {
+      "main": [
+        [
+          {
+            "node": "Edit Fields",
+            "type": "main",
+            "index": 0
+          }
+        ]
+      ]
+    },
+    "OpenRouter Chat Model": {
+      "ai_languageModel": [
+        [
+          {
+            "node": "Basic LLM Chain",
+            "type": "ai_languageModel",
+            "index": 0
+          }
+        ]
+      ]
+    },
+    "Edit Fields": {
+      "main": [
+        [
+          {
+            "node": "Basic LLM Chain",
+            "type": "main",
+            "index": 0
+          }
+        ]
+      ]
+    },
+    "Basic LLM Chain": {
+      "main": [
+        [
+          {
+            "node": "Merge",
+            "type": "main",
+            "index": 0
+          }
+        ]
+      ]
+    },
+    "Code": {
+      "main": [
+        [
+          {
+            "node": "Facebook Post Photo",
+            "type": "main",
+            "index": 0
+          }
+        ]
+      ]
+    },
+    "Merge": {
+      "main": [
+        [
+          {
+            "node": "Code",
+            "type": "main",
+            "index": 0
+          }
+        ]
+      ]
+    }
+  },
+  "active": false,
+  "settings": {
+    "executionOrder": "v1"
+  },
+  "versionId": "72a43b73-4460-49de-88aa-90afde0ef73b",
+  "meta": {
+    "templateCredsSetupCompleted": true,
+    "instanceId": "95265e6405e55fa03a3687565ed8e8c464bd659d0d56a9696d7d25f954abf511"
+  },
+  "id": "cTnh6OMO9wxPEPBS",
+  "tags": []
+}
\ No newline at end of file
diff --git a/client/src/App.tsx b/client/src/App.tsx
index 07ba43a..85dac3f 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -85,7 +85,7 @@ function App() {
   return (
     <QueryClientProvider client={queryClient}>
       <TooltipProvider>
-        <div className="dark">
+        <div>
           <Toaster />
           <Router />
         </div>
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/components/sidebar.tsx b/client/src/components/sidebar.tsx
index 657e772..0346ec4 100644
--- a/client/src/components/sidebar.tsx
+++ b/client/src/components/sidebar.tsx
@@ -4,13 +4,13 @@ import { useQuery, useMutation } from "@tanstack/react-query";
 import { apiRequest, queryClient } from "@/lib/queryClient";
 import { useToast } from "@/hooks/use-toast";
 import { Button } from "@/components/ui/button";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
 
 export default function Sidebar() {
   const [location] = useLocation();
   const [, setLocation] = useLocation();
   const { toast } = useToast();
 
-  // Charger la session utilisateur
   const { data: session } = useQuery<{ id: string; username: string; role: string }>({
     queryKey: ["/api/auth/session"],
     retry: false,
@@ -18,7 +18,6 @@ export default function Sidebar() {
 
   const isAdmin = session?.role === "admin";
 
-  // Mutation pour déconnexion
   const logoutMutation = useMutation({
     mutationFn: async () => {
       const res = await apiRequest("POST", "/api/auth/logout", {});
@@ -39,7 +38,7 @@ export default function Sidebar() {
     { icon: PlusCircle, label: "Nouvelle publication", href: "/new", badge: null },
     { icon: Calendar, label: "Calendrier", href: "/calendar", badge: null },
     { icon: Images, label: "Médiathèque", href: "/media", badge: null },
-    { icon: Users, label: "Pages gérées", href: "/pages", badge: "8" },
+    { icon: Users, label: "Pages gérées", href: "/pages", badge: null },
     { icon: Bot, label: "Assistant IA", href: "/ai", badge: null },
   ];
 
@@ -49,21 +48,25 @@ export default function Sidebar() {
   ];
 
   return (
-    <aside className="w-64 bg-card border-r border-border flex flex-col h-screen">
-      <div className="p-6 border-b border-border">
+    <aside className="w-72 bg-sidebar border-r border-sidebar-border flex flex-col h-screen">
+      {/* Logo & Brand */}
+      <div className="p-6 border-b border-sidebar-border">
         <div className="flex items-center gap-3">
-          <div className="w-10 h-10 bg-primary rounded-lg flex items-center justify-center">
-            <i className="fas fa-share-nodes text-primary-foreground text-xl"></i>
+          <div className="w-12 h-12 gradient-primary rounded-xl flex items-center justify-center shadow-lg">
+            <svg className="w-7 h-7 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z" />
+            </svg>
           </div>
           <div>
-            <h1 className="text-xl font-bold text-foreground">Social Flow</h1>
-            <p className="text-xs text-muted-foreground">Automatisation</p>
+            <h1 className="text-xl font-bold gradient-text">Social Flow</h1>
+            <p className="text-xs text-muted-foreground">Automatisation sociale</p>
           </div>
         </div>
       </div>
 
+      {/* Navigation */}
       <nav className="flex-1 p-4 overflow-y-auto">
-        <ul className="space-y-2">
+        <ul className="space-y-1">
           {navItems.map((item) => {
             const Icon = item.icon;
             const isActive = location === item.href;
@@ -73,18 +76,21 @@ export default function Sidebar() {
                 <Link 
                   href={item.href}
                   className={`
-                    flex items-center gap-3 px-4 py-3 rounded-lg font-medium transition-all
+                    group flex items-center gap-3 px-4 py-3 rounded-xl font-medium transition-all relative
                     ${isActive 
-                      ? 'bg-accent text-accent-foreground' 
-                      : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground'
+                      ? 'bg-gradient-to-r from-primary/10 to-secondary/10 text-primary shadow-sm' 
+                      : 'text-muted-foreground hover:bg-sidebar-accent hover:text-foreground'
                     }
                   `}
                   data-testid={`link-${item.label.toLowerCase().replace(/\s+/g, '-')}`}
                 >
-                  <Icon className="w-5 h-5" />
-                  <span>{item.label}</span>
+                  {isActive && (
+                    <div className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-8 gradient-primary rounded-r-full" />
+                  )}
+                  <Icon className={`w-5 h-5 ${isActive ? 'text-primary' : ''}`} />
+                  <span className="flex-1">{item.label}</span>
                   {item.badge && (
-                    <span className="ml-auto inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-primary text-primary-foreground">
+                    <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold gradient-primary text-white shadow-sm">
                       {item.badge}
                     </span>
                   )}
@@ -94,9 +100,10 @@ export default function Sidebar() {
           })}
         </ul>
 
-        <div className="mt-8 pt-8 border-t border-border">
-          <p className="text-xs text-muted-foreground mb-3 px-4 uppercase tracking-wider">Statistiques</p>
-          <ul className="space-y-2">
+        {/* Stats Section */}
+        <div className="mt-8 pt-6 border-t border-sidebar-border">
+          <p className="text-xs font-semibold text-muted-foreground mb-3 px-4 uppercase tracking-wider">Statistiques</p>
+          <ul className="space-y-1">
             {statsItems.map((item) => {
               const Icon = item.icon;
               const isActive = location === item.href;
@@ -106,15 +113,18 @@ export default function Sidebar() {
                   <Link 
                     href={item.href}
                     className={`
-                      flex items-center gap-3 px-4 py-3 rounded-lg transition-all
+                      group flex items-center gap-3 px-4 py-3 rounded-xl transition-all relative
                       ${isActive 
-                        ? 'bg-accent text-accent-foreground' 
-                        : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground'
+                        ? 'bg-gradient-to-r from-primary/10 to-secondary/10 text-primary shadow-sm' 
+                        : 'text-muted-foreground hover:bg-sidebar-accent hover:text-foreground'
                       }
                     `}
                     data-testid={`link-${item.label.toLowerCase()}`}
                   >
-                    <Icon className="w-5 h-5" />
+                    {isActive && (
+                      <div className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-8 gradient-primary rounded-r-full" />
+                    )}
+                    <Icon className={`w-5 h-5 ${isActive ? 'text-primary' : ''}`} />
                     <span>{item.label}</span>
                   </Link>
                 </li>
@@ -124,51 +134,61 @@ export default function Sidebar() {
         </div>
       </nav>
 
-      <div className="p-4 border-t border-border space-y-2">
+      {/* Admin & User Section */}
+      <div className="p-4 border-t border-sidebar-border space-y-2">
         {isAdmin && (
           <>
             <div className="mb-2">
-              <p className="text-xs text-muted-foreground mb-2 px-4 uppercase tracking-wider">Administration</p>
+              <p className="text-xs font-semibold text-muted-foreground mb-2 px-4 uppercase tracking-wider">Administration</p>
             </div>
             <Link 
               href="/users"
               className={`
-                flex items-center gap-3 px-4 py-3 rounded-lg transition-all
+                flex items-center gap-3 px-4 py-3 rounded-xl transition-all relative
                 ${location === "/users"
-                  ? 'bg-accent text-accent-foreground' 
-                  : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground'
+                  ? 'bg-gradient-to-r from-primary/10 to-secondary/10 text-primary shadow-sm' 
+                  : 'text-muted-foreground hover:bg-sidebar-accent hover:text-foreground'
                 }
               `}
               data-testid="link-users"
             >
+              {location === "/users" && (
+                <div className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-8 gradient-primary rounded-r-full" />
+              )}
               <UserCog className="w-5 h-5" />
               <span>Utilisateurs</span>
             </Link>
             <Link 
               href="/sql"
               className={`
-                flex items-center gap-3 px-4 py-3 rounded-lg transition-all
+                flex items-center gap-3 px-4 py-3 rounded-xl transition-all relative
                 ${location === "/sql"
-                  ? 'bg-accent text-accent-foreground' 
-                  : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground'
+                  ? 'bg-gradient-to-r from-primary/10 to-secondary/10 text-primary shadow-sm' 
+                  : 'text-muted-foreground hover:bg-sidebar-accent hover:text-foreground'
                 }
               `}
               data-testid="link-sql"
             >
+              {location === "/sql" && (
+                <div className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-8 gradient-primary rounded-r-full" />
+              )}
               <Database className="w-5 h-5" />
               <span>SQL</span>
             </Link>
             <Link 
               href="/settings"
               className={`
-                flex items-center gap-3 px-4 py-3 rounded-lg transition-all
+                flex items-center gap-3 px-4 py-3 rounded-xl transition-all relative
                 ${location === "/settings"
-                  ? 'bg-accent text-accent-foreground' 
-                  : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground'
+                  ? 'bg-gradient-to-r from-primary/10 to-secondary/10 text-primary shadow-sm' 
+                  : 'text-muted-foreground hover:bg-sidebar-accent hover:text-foreground'
                 }
               `}
               data-testid="link-settings"
             >
+              {location === "/settings" && (
+                <div className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-8 gradient-primary rounded-r-full" />
+              )}
               <Settings className="w-5 h-5" />
               <span>Paramètres</span>
             </Link>
@@ -178,7 +198,7 @@ export default function Sidebar() {
         <div className="pt-2">
           <Button
             variant="ghost"
-            className="w-full justify-start text-muted-foreground hover:text-accent-foreground"
+            className="w-full justify-start text-muted-foreground hover:text-foreground hover:bg-sidebar-accent rounded-xl"
             onClick={() => logoutMutation.mutate()}
             disabled={logoutMutation.isPending}
             data-testid="button-logout"
@@ -188,11 +208,20 @@ export default function Sidebar() {
           </Button>
         </div>
         
+        {/* User Profile Card */}
         {session && (
-          <div className="mt-4 px-4 py-3 bg-muted rounded-lg">
-            <p className="text-xs text-muted-foreground">Connecté en tant que</p>
-            <p className="text-sm font-semibold truncate">{session.username}</p>
-            <p className="text-xs text-muted-foreground capitalize">{session.role}</p>
+          <div className="mt-4 p-4 bg-gradient-to-br from-primary/5 to-secondary/5 border border-primary/10 rounded-xl">
+            <div className="flex items-center gap-3">
+              <Avatar className="w-10 h-10 border-2 border-primary/20">
+                <AvatarFallback className="gradient-primary text-white font-semibold">
+                  {session.username.substring(0, 2).toUpperCase()}
+                </AvatarFallback>
+              </Avatar>
+              <div className="flex-1 min-w-0">
+                <p className="text-sm font-semibold truncate">{session.username}</p>
+                <p className="text-xs text-muted-foreground capitalize">{session.role}</p>
+              </div>
+            </div>
           </div>
         )}
       </div>
diff --git a/client/src/components/stats-cards.tsx b/client/src/components/stats-cards.tsx
index 81eb806..0051ce6 100644
--- a/client/src/components/stats-cards.tsx
+++ b/client/src/components/stats-cards.tsx
@@ -1,4 +1,4 @@
-import { CalendarCheck, Users, Bot, Images } from "lucide-react";
+import { CalendarCheck, Users, Bot, Images, TrendingUp, TrendingDown } from "lucide-react";
 import { useQuery } from "@tanstack/react-query";
 
 export default function StatsCards() {
@@ -9,41 +9,35 @@ export default function StatsCards() {
   const statCards = [
     {
       icon: CalendarCheck,
-      iconColor: "text-chart-1",
-      iconBg: "bg-chart-1/10",
+      iconColor: "from-blue-500 to-blue-600",
       title: (stats as any)?.scheduledPosts ?? 0,
       subtitle: "Publications planifiées",
       change: "+12%",
+      trending: "up",
       changeLabel: "vs mois dernier",
-      period: "Ce mois",
     },
     {
       icon: Users,
-      iconColor: "text-chart-2",
-      iconBg: "bg-chart-2/10",
+      iconColor: "from-purple-500 to-purple-600",
       title: (stats as any)?.connectedPages ?? 0,
       subtitle: "Pages connectées",
       info: "Facebook • Instagram",
-      period: "Total",
     },
     {
       icon: Bot,
-      iconColor: "text-chart-3",
-      iconBg: "bg-chart-3/10",
+      iconColor: "from-green-500 to-green-600",
       title: (stats as any)?.aiTextsGenerated ?? 0,
       subtitle: "Textes générés par IA",
       change: "+8%",
+      trending: "up",
       changeLabel: "vs hier",
-      period: "Aujourd'hui",
     },
     {
       icon: Images,
-      iconColor: "text-chart-4",
-      iconBg: "bg-chart-4/10",
+      iconColor: "from-cyan-500 to-cyan-600",
       title: (stats as any)?.mediaStored ?? 0,
       subtitle: "Médias stockés",
       info: "Images • Vidéos",
-      period: "Bibliothèque",
     },
   ];
 
@@ -51,10 +45,10 @@ export default function StatsCards() {
     return (
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
         {[1, 2, 3, 4].map((i) => (
-          <div key={i} className="bg-card rounded-lg border border-border p-6">
-            <div className="skeleton h-12 w-12 rounded-lg mb-4" />
-            <div className="skeleton h-8 w-16 mb-2" />
-            <div className="skeleton h-4 w-32" />
+          <div key={i} className="bg-card rounded-2xl border border-border p-6 shadow-sm">
+            <div className="skeleton h-12 w-12 rounded-xl mb-4" />
+            <div className="skeleton h-10 w-20 mb-2" />
+            <div className="skeleton h-4 w-36" />
           </div>
         ))}
       </div>
@@ -65,31 +59,40 @@ export default function StatsCards() {
     <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
       {statCards.map((stat, index) => {
         const Icon = stat.icon;
+        const TrendIcon = stat.trending === "up" ? TrendingUp : TrendingDown;
+        
         return (
           <div 
             key={index} 
-            className="bg-card rounded-lg border border-border p-6 hover:shadow-lg transition-all cursor-pointer"
+            className="group bg-card rounded-2xl border border-border p-6 hover:border-primary/30 transition-all cursor-pointer card-hover shadow-sm"
             data-testid={`stat-card-${index}`}
           >
-            <div className="flex items-center justify-between mb-4">
-              <div className={`w-12 h-12 rounded-lg ${stat.iconBg} flex items-center justify-center`}>
-                <Icon className={`${stat.iconColor} w-6 h-6`} />
+            <div className="flex items-start justify-between mb-6">
+              <div className={`w-14 h-14 rounded-xl bg-gradient-to-br ${stat.iconColor} flex items-center justify-center shadow-lg`}>
+                <Icon className="text-white w-7 h-7" />
               </div>
-              <span className="text-xs text-muted-foreground">{stat.period}</span>
             </div>
-            <h3 className="text-3xl font-bold text-foreground mb-1" data-testid={`stat-value-${index}`}>
-              {stat.title}
-            </h3>
-            <p className="text-sm text-muted-foreground">{stat.subtitle}</p>
+            
+            <div className="space-y-1">
+              <h3 className="text-4xl font-bold text-foreground" data-testid={`stat-value-${index}`}>
+                {stat.title}
+              </h3>
+              <p className="text-sm text-muted-foreground font-medium">{stat.subtitle}</p>
+            </div>
+            
             {stat.change && (
               <div className="mt-4 flex items-center gap-2">
-                <span className="text-xs text-chart-2">{stat.change}</span>
+                <div className={`flex items-center gap-1 px-2 py-1 rounded-lg ${stat.trending === "up" ? "bg-success/10 text-success" : "bg-destructive/10 text-destructive"}`}>
+                  <TrendIcon className="w-3 h-3" />
+                  <span className="text-xs font-semibold">{stat.change}</span>
+                </div>
                 <span className="text-xs text-muted-foreground">{stat.changeLabel}</span>
               </div>
             )}
+            
             {stat.info && (
-              <div className="mt-4 flex items-center gap-2">
-                <span className="text-xs text-muted-foreground">{stat.info}</span>
+              <div className="mt-4">
+                <span className="text-xs text-muted-foreground font-medium">{stat.info}</span>
               </div>
             )}
           </div>
diff --git a/client/src/components/topbar.tsx b/client/src/components/topbar.tsx
index cc45014..6fdf30b 100644
--- a/client/src/components/topbar.tsx
+++ b/client/src/components/topbar.tsx
@@ -1,4 +1,5 @@
-import { Bell, Menu } from "lucide-react";
+import { Bell, Menu, Search } from "lucide-react";
+import { Input } from "@/components/ui/input";
 
 interface TopBarProps {
   onMenuClick: () => void;
@@ -6,35 +7,31 @@ interface TopBarProps {
 
 export default function TopBar({ onMenuClick }: TopBarProps) {
   return (
-    <header className="bg-card border-b border-border sticky top-0 z-10">
-      <div className="flex items-center justify-between px-6 py-4">
-        <div className="flex items-center gap-4">
+    <header className="bg-card/50 backdrop-blur-xl border-b border-border/50 sticky top-0 z-10">
+      <div className="flex items-center justify-between px-6 lg:px-8 py-5">
+        <div className="flex items-center gap-6 flex-1">
           <button 
-            className="lg:hidden text-foreground"
+            className="lg:hidden text-foreground hover:text-primary transition-colors"
             onClick={onMenuClick}
             data-testid="button-menu"
           >
             <Menu className="w-6 h-6" />
           </button>
-          <div>
-            <h2 className="text-2xl font-bold text-foreground">Tableau de bord</h2>
-            <p className="text-sm text-muted-foreground">Gérez vos publications sur tous vos réseaux</p>
+          <div className="flex-1 max-w-md hidden md:block">
+            <div className="relative">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+              <Input 
+                placeholder="Rechercher des publications, pages, médias..." 
+                className="pl-10 bg-muted/30 border-muted focus:border-primary/50 rounded-xl"
+              />
+            </div>
           </div>
         </div>
         <div className="flex items-center gap-4">
-          <button className="relative p-2 text-muted-foreground hover:text-foreground transition-all" data-testid="button-notifications">
+          <button className="relative p-2.5 text-muted-foreground hover:text-primary hover:bg-muted/30 rounded-xl transition-all" data-testid="button-notifications">
             <Bell className="w-5 h-5" />
-            <span className="absolute top-1 right-1 w-2 h-2 bg-destructive rounded-full"></span>
+            <span className="absolute top-2 right-2 w-2 h-2 bg-destructive rounded-full ring-2 ring-card"></span>
           </button>
-          <div className="flex items-center gap-3 pl-4 border-l border-border">
-            <div className="w-10 h-10 rounded-full bg-primary flex items-center justify-center">
-              <span className="text-primary-foreground font-semibold">SF</span>
-            </div>
-            <div className="hidden md:block">
-              <p className="text-sm font-medium text-foreground">Social Flow</p>
-              <p className="text-xs text-muted-foreground">admin@socialflow.app</p>
-            </div>
-          </div>
         </div>
       </div>
     </header>
diff --git a/client/src/index.css b/client/src/index.css
index 1c43172..5802a06 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -3,87 +3,105 @@
 @tailwind utilities;
 
 :root {
-  --card: 300 4.35% 6.67%;
-  --ring: 221.74 13.14% 34.31%;
-  --input: 0 0% 16.86%;
-  --muted: 0 0% 25.1%;
-  --accent: 0 0% 92.16%;
-  --border: 0 0% 16.86%;
-  --radius: 0.4rem;
-  --chart-1: 203.8863 88.2845% 53.1373%;
-  --chart-2: 159.7826 100% 36.0784%;
-  --chart-3: 42.0290 92.8251% 56.2745%;
-  --chart-4: 147.1429 78.5047% 41.9608%;
-  --chart-5: 341.4894 75.2000% 50.9804%;
-  --popover: 45 25% 97%;
-  --primary: 0 0% 96.08%;
-  --sidebar: 45 25% 97%;
-  --spacing: 0.25rem;
-  --font-mono: Menlo, monospace;
-  --font-sans: 'Inter', sans-serif;
-  --secondary: 0 0% 92.16%;
-  --background: 0 0% 3.53%;
-  --font-serif: 'Inter', sans-serif;
-  --foreground: 0 0% 92.16%;
-  --destructive: 356.3033 90.5579% 54.3137%;
-  --sidebar-ring: 9 75% 61%;
-  --sidebar-accent: 25 45% 80%;
-  --sidebar-border: 45 15% 80%;
-  --card-foreground: 0 0% 100%;
-  --sidebar-primary: 9 75% 61%;
-  --muted-foreground: 0 0% 67.06%;
-  --accent-foreground: 0 0% 0%;
-  --popover-foreground: 0 0% 100%;
-  --primary-foreground: 0 0% 5.1%;
-  --sidebar-foreground: 20 14% 17%;
-  --secondary-foreground: 0 0% 5.1%;
+  --background: 0 0% 98%;
+  --foreground: 222 47% 11%;
+  
+  --card: 0 0% 100%;
+  --card-foreground: 222 47% 11%;
+  
+  --popover: 0 0% 100%;
+  --popover-foreground: 222 47% 11%;
+  
+  --primary: 215 85% 58%;
+  --primary-foreground: 0 0% 100%;
+  
+  --secondary: 265 75% 62%;
+  --secondary-foreground: 0 0% 100%;
+  
+  --muted: 210 40% 96%;
+  --muted-foreground: 215 16% 47%;
+  
+  --accent: 210 40% 96%;
+  --accent-foreground: 222 47% 11%;
+  
+  --destructive: 0 85% 62%;
   --destructive-foreground: 0 0% 100%;
-  --sidebar-accent-foreground: 20 14% 17%;
+  
+  --border: 214 32% 91%;
+  --input: 214 32% 91%;
+  --ring: 215 85% 58%;
+  
+  --success: 142 76% 48%;
+  --warning: 35 95% 58%;
+  --info: 195 85% 55%;
+  
+  --chart-1: 215 85% 58%;
+  --chart-2: 265 75% 62%;
+  --chart-3: 142 76% 48%;
+  --chart-4: 195 85% 55%;
+  --chart-5: 35 95% 58%;
+  
+  --sidebar: 0 0% 100%;
+  --sidebar-foreground: 222 47% 11%;
+  --sidebar-primary: 215 85% 58%;
   --sidebar-primary-foreground: 0 0% 100%;
-  --shadow: 0px 2px 0px 0px hsl(9, 75%, 61% / 0.00), 0px 1px 2px -1px hsl(9, 75%, 61% / 0.00);
-  --shadow-lg: 0px 2px 0px 0px hsl(9, 75%, 61% / 0.00), 0px 4px 6px -1px hsl(9, 75%, 61% / 0.00);
-  --shadow-md: 0px 2px 0px 0px hsl(9, 75%, 61% / 0.00), 0px 2px 4px -1px hsl(9, 75%, 61% / 0.00);
-  --shadow-sm: 0px 2px 0px 0px hsl(9, 75%, 61% / 0.00), 0px 1px 2px -1px hsl(9, 75%, 61% / 0.00);
-  --shadow-xl: 0px 2px 0px 0px hsl(9, 75%, 61% / 0.00), 0px 8px 10px -1px hsl(9, 75%, 61% / 0.00);
-  --shadow-xs: 0px 2px 0px 0px hsl(9, 75%, 61% / 0.00);
-  --shadow-2xl: 0px 2px 0px 0px hsl(9, 75%, 61% / 0.00);
-  --shadow-2xs: 0px 2px 0px 0px hsl(9, 75%, 61% / 0.00);
-  --tracking-normal: 0em;
+  --sidebar-accent: 210 40% 96%;
+  --sidebar-accent-foreground: 222 47% 11%;
+  --sidebar-border: 214 32% 91%;
+  --sidebar-ring: 215 85% 58%;
+  
+  --radius: 0.75rem;
+  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  --font-mono: 'JetBrains Mono', 'Fira Code', Menlo, monospace;
 }
 
 .dark {
-  --card: 20 14% 8%;
-  --ring: 9 75% 61%;
-  --input: 20 14% 18%;
-  --muted: 20 14% 15%;
-  --accent: 25 45% 20%;
-  --border: 20 14% 15%;
-  --chart-1: 203.8863 88.2845% 53.1373%;
-  --chart-2: 159.7826 100% 36.0784%;
-  --chart-3: 42.0290 92.8251% 56.2745%;
-  --chart-4: 147.1429 78.5047% 41.9608%;
-  --chart-5: 341.4894 75.2000% 50.9804%;
-  --popover: 20 14% 4%;
-  --primary: 9 75% 61%;
-  --sidebar: 20 14% 8%;
-  --secondary: 30 15% 52%;
-  --background: 20 14% 4%;
-  --foreground: 45 25% 91%;
-  --destructive: 356.3033 90.5579% 54.3137%;
-  --sidebar-ring: 9 75% 61%;
-  --sidebar-accent: 25 45% 20%;
-  --sidebar-border: 20 14% 15%;
-  --card-foreground: 45 25% 85%;
-  --sidebar-primary: 9 75% 61%;
-  --muted-foreground: 45 15% 46%;
-  --accent-foreground: 45 25% 85%;
-  --popover-foreground: 45 25% 91%;
+  --background: 222 20% 8%;
+  --foreground: 0 0% 95%;
+  
+  --card: 222 16% 15%;
+  --card-foreground: 0 0% 95%;
+  
+  --popover: 222 18% 12%;
+  --popover-foreground: 0 0% 95%;
+  
+  --primary: 215 85% 58%;
   --primary-foreground: 0 0% 100%;
-  --sidebar-foreground: 45 25% 85%;
+  
+  --secondary: 265 75% 62%;
   --secondary-foreground: 0 0% 100%;
+  
+  --muted: 222 12% 20%;
+  --muted-foreground: 222 10% 65%;
+  
+  --accent: 222 18% 12%;
+  --accent-foreground: 0 0% 95%;
+  
+  --destructive: 0 85% 62%;
   --destructive-foreground: 0 0% 100%;
-  --sidebar-accent-foreground: 45 25% 85%;
+  
+  --border: 222 12% 20%;
+  --input: 222 12% 20%;
+  --ring: 215 85% 58%;
+  
+  --success: 142 76% 48%;
+  --warning: 35 95% 58%;
+  --info: 195 85% 55%;
+  
+  --chart-1: 215 85% 58%;
+  --chart-2: 265 75% 62%;
+  --chart-3: 142 76% 48%;
+  --chart-4: 195 85% 55%;
+  --chart-5: 35 95% 58%;
+  
+  --sidebar: 222 20% 8%;
+  --sidebar-foreground: 0 0% 95%;
+  --sidebar-primary: 215 85% 58%;
   --sidebar-primary-foreground: 0 0% 100%;
+  --sidebar-accent: 222 18% 12%;
+  --sidebar-accent-foreground: 0 0% 95%;
+  --sidebar-border: 222 12% 20%;
+  --sidebar-ring: 215 85% 58%;
 }
 
 @layer base {
@@ -94,41 +112,108 @@
   body {
     @apply font-sans antialiased bg-background text-foreground;
   }
+  
+  h1, h2, h3, h4, h5, h6 {
+    @apply font-semibold;
+  }
 }
 
 /* Custom scrollbar */
 ::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
+  width: 10px;
+  height: 10px;
 }
 
 ::-webkit-scrollbar-track {
-  background: hsl(var(--muted));
+  background: hsl(var(--muted) / 0.5);
+  border-radius: 5px;
 }
 
 ::-webkit-scrollbar-thumb {
-  background: hsl(var(--primary));
-  border-radius: 4px;
+  background: linear-gradient(180deg, hsl(var(--primary)), hsl(var(--secondary)));
+  border-radius: 5px;
+  border: 2px solid hsl(var(--background));
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background: hsl(var(--primary) / 0.8);
+  background: linear-gradient(180deg, hsl(var(--primary) / 0.9), hsl(var(--secondary) / 0.9));
 }
 
-/* Animation for chat messages */
-@keyframes slideInRight {
+/* Smooth transitions */
+* {
+  transition: background-color 200ms, border-color 200ms, color 200ms;
+}
+
+button, a {
+  transition: all 200ms;
+}
+
+/* Animation for cards */
+@keyframes fadeIn {
   from {
     opacity: 0;
-    transform: translateX(20px);
+    transform: translateY(10px);
   }
   to {
     opacity: 1;
-    transform: translateX(0);
+    transform: translateY(0);
   }
 }
 
-.chat-message {
-  animation: slideInRight 0.3s ease-out;
+.fade-in {
+  animation: fadeIn 150ms ease-out;
+}
+
+/* Gradient utilities */
+.gradient-primary {
+  background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--secondary)));
+}
+
+.gradient-text {
+  background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--secondary)));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+/* Card hover effect */
+.card-hover {
+  transition: transform 200ms, box-shadow 200ms;
+}
+
+.card-hover:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 12px 24px hsl(var(--primary) / 0.12);
+}
+
+/* Platform badges */
+.badge-facebook {
+  background: hsl(var(--primary) / 0.1);
+  color: hsl(var(--primary));
+  border: 1px solid hsl(var(--primary) / 0.25);
+}
+
+.badge-instagram {
+  background: hsl(var(--secondary) / 0.1);
+  color: hsl(var(--secondary));
+  border: 1px solid hsl(var(--secondary) / 0.25);
+}
+
+/* Status indicators */
+.status-scheduled {
+  color: hsl(var(--primary));
+}
+
+.status-published {
+  color: hsl(var(--success));
+}
+
+.status-failed {
+  color: hsl(var(--destructive));
+}
+
+.status-draft {
+  color: hsl(var(--muted-foreground));
 }
 
 /* Skeleton loader */
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
diff --git a/design_guidelines.md b/design_guidelines.md
new file mode 100644
index 0000000..2b9fdf5
--- /dev/null
+++ b/design_guidelines.md
@@ -0,0 +1,155 @@
+# Social Flow - Design Guidelines
+
+## Design Approach
+
+**Selected Framework:** Design System Approach inspired by modern SaaS dashboards (Linear, Buffer, Notion) with Material Design principles for data-rich interfaces.
+
+**Core Philosophy:** Professional productivity tool prioritizing clarity, efficiency, and visual hierarchy in dark mode with sophisticated blue/purple branding.
+
+## Color Palette
+
+**Dark Mode (Primary Theme):**
+- Background Base: 222 20% 8%
+- Surface Elevated: 222 18% 12%
+- Surface Card: 222 16% 15%
+- Border Subtle: 222 12% 20%
+
+**Brand Colors:**
+- Primary Blue: 215 85% 58%
+- Primary Purple: 265 75% 62%
+- Gradient Accent: Linear gradient from Primary Blue to Primary Purple
+
+**Functional Colors:**
+- Success Green: 142 76% 48%
+- Warning Orange: 35 95% 58%
+- Error Red: 0 85% 62%
+- Info Cyan: 195 85% 55%
+
+**Text Hierarchy:**
+- Primary Text: 0 0% 95%
+- Secondary Text: 222 10% 65%
+- Tertiary Text: 222 8% 48%
+
+## Typography
+
+**Font Family:**
+- Primary: 'Inter' from Google Fonts (400, 500, 600, 700)
+- Monospace: 'JetBrains Mono' for timestamps and metrics
+
+**Scale:**
+- Headings H1: text-3xl font-semibold
+- Headings H2: text-2xl font-semibold
+- Headings H3: text-xl font-medium
+- Body Large: text-base
+- Body: text-sm
+- Captions: text-xs text-secondary
+
+## Layout System
+
+**Spacing Primitives:** Tailwind units of 2, 4, 6, 8, 12, 16 (e.g., p-4, gap-6, mt-8)
+
+**Grid Structure:**
+- Sidebar: Fixed width 280px (w-70) on desktop, collapsible on mobile
+- Main Content: Flexible with max-w-7xl container
+- Dashboard Grid: grid-cols-1 md:grid-cols-2 lg:grid-cols-3 with gap-6
+
+**Container Widths:**
+- Dashboard sections: max-w-7xl with px-6 to px-8
+- Form containers: max-w-2xl
+- Content cards: Full width within grid columns
+
+## Component Library
+
+### Sidebar Navigation
+- Dark surface (Background Base) with subtle border-right
+- Logo + app name at top (h-16)
+- Navigation items with icons (Heroicons) + labels
+- Active state: Primary gradient background with 12% opacity, blue text
+- Hover: Surface Elevated background
+- Bottom section: User profile card with avatar, name, settings icon
+- Spacing: py-2 between items, px-4 horizontal padding
+
+### Dashboard Cards
+- Background: Surface Card with rounded-xl
+- Border: 1px solid Border Subtle
+- Shadow: Soft shadow (shadow-lg with low opacity)
+- Padding: p-6
+- Header: Flex justify-between with title (text-lg font-semibold) + action button
+- Content spacing: space-y-4 internally
+
+### Post Scheduling Interface
+- Calendar view: Week/month grid with date cells
+- Post cards: Compact cards showing thumbnail + caption preview + platform badges (FB/IG)
+- Drag-and-drop visual indicators
+- Time slots: Hourly breakdown with scheduled posts
+
+### Analytics Cards
+- Metric cards: Large number (text-3xl font-bold) + label + trend indicator
+- Charts: Use Chart.js with gradient fills matching brand colors
+- Grid layout for KPIs: 4 columns on desktop, responsive down
+
+### Forms & Inputs
+- Input fields: Surface Elevated background, border Border Subtle, rounded-lg, px-4 py-3
+- Focus state: Primary Blue border, subtle glow
+- Labels: text-sm font-medium mb-2, Secondary Text color
+- Textarea: min-h-32 for post composition
+- File upload: Dashed border drop zone with center icon and text
+
+### Buttons
+- Primary: Gradient background (blue to purple), text-white, rounded-lg, px-6 py-3, font-medium
+- Secondary: Border Primary Blue, text Primary Blue, transparent background
+- Ghost: Transparent, hover Surface Elevated
+- Icon buttons: w-10 h-10, rounded-lg, center content
+
+### Platform Badges
+- Small pills (px-3 py-1, rounded-full, text-xs font-medium)
+- Facebook: Blue background (215 85% 58% with 15% opacity), blue text
+- Instagram: Purple background (265 75% 62% with 15% opacity), purple text
+
+### Status Indicators
+- Dots with colors: w-2 h-2 rounded-full
+- Scheduled: Primary Blue
+- Published: Success Green
+- Failed: Error Red
+- Draft: Tertiary Text
+
+### Data Tables
+- Header row: Surface Elevated background, font-medium, uppercase text-xs
+- Rows: Border-bottom subtle, hover Surface Card
+- Padding: px-6 py-4
+- Alternating backgrounds for better readability
+
+## Animations
+
+**Minimal & Purposeful:**
+- Page transitions: Fade-in only (150ms)
+- Card hover: Subtle lift (translateY -2px, 200ms)
+- Button interactions: Scale 0.98 on active
+- Navigation: Smooth color transitions (200ms)
+- No distracting scroll animations or complex effects
+
+## Images
+
+**Hero Section:** None - Dashboard-first interface prioritizing immediate utility
+
+**Avatar & Thumbnails:**
+- User avatars: w-10 h-10, rounded-full with border
+- Post thumbnails: aspect-video, rounded-lg, object-cover
+- Platform logos: Use official brand SVGs at 20x20 or 24x24
+
+**Empty States:**
+- Illustration placeholders for "No posts scheduled", "No analytics data"
+- Center aligned with icon, heading, and CTA button
+- Subtle grayscale illustrations maintaining professional tone
+
+## Key Screens Layout
+
+**Dashboard:** 3-column grid with Overview metrics (top row), Recent Posts card, Upcoming Schedule card, Quick Analytics
+
+**Calendrier:** Full-width calendar component, left sidebar filter (platforms, status), right panel for selected post details
+
+**Nouvelle Publication:** Center form (max-w-2xl), left preview panel showing platform-specific mockups, sticky publish/schedule buttons
+
+**Analytiques:** Metric cards grid (4 cols), followed by full-width charts for engagement over time, best posting times heatmap
+
+**Paramètres:** Two-column layout, left navigation tabs, right content panels
\ No newline at end of file
diff --git a/server/services/facebook.ts b/server/services/facebook.ts
index 41e1d54..bacf4e2 100644
--- a/server/services/facebook.ts
+++ b/server/services/facebook.ts
@@ -121,7 +121,7 @@ export class FacebookService {
     const params = new URLSearchParams({
       access_token: page.accessToken!,
       message: post.content,
-      published: 'false',
+      published: '0',
       scheduled_publish_time: scheduledTimestamp.toString(),
     });
 
@@ -147,7 +147,7 @@ export class FacebookService {
       access_token: page.accessToken!,
       message: post.content,
       url: photoUrl,
-      published: 'false',
+      published: '0',
       scheduled_publish_time: scheduledTimestamp.toString(),
     });