diff --git a/client/src/pages/Settings.tsx b/client/src/pages/Settings.tsx
index ced9f5e..f18d21d 100644
--- a/client/src/pages/Settings.tsx
+++ b/client/src/pages/Settings.tsx
@@ -6,8 +6,20 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
 import { Switch } from "@/components/ui/switch";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Badge } from "@/components/ui/badge";
 import { trpc } from "@/lib/trpc";
-import { Loader2, Save, CheckCircle } from "lucide-react";
+import { 
+  Loader2, 
+  Save, 
+  CheckCircle, 
+  Brain, 
+  Key, 
+  Server, 
+  FileCheck,
+  AlertCircle,
+  Sparkles
+} from "lucide-react";
 import { toast } from "sonner";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
@@ -35,41 +47,81 @@ function LlmFieldsConfigSection() {
   
   if (isLoading) {
     return (
-      <div className="flex items-center justify-center py-8">
-        <Loader2 className="w-6 h-6 animate-spin text-gray-400" />
+      <div className="flex items-center justify-center py-12">
+        <Loader2 className="w-8 h-8 animate-spin text-primary" />
       </div>
     );
   }
   
+  const requiredCount = fields?.filter(f => f.isRequired === 1).length || 0;
+  const totalCount = fields?.length || 0;
+  
   return (
-    <div className="space-y-4">
-      <p className="text-sm text-muted-foreground">
-        Les champs marqués comme obligatoires doivent être détectés pour atteindre un score de 100%. 
-        Les champs optionnels n'affectent pas le score.
+    <div className="space-y-6">
+      <div className="flex items-center justify-between p-4 bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-blue-950/20 dark:to-indigo-950/20 rounded-lg border border-blue-200 dark:border-blue-800">
+        <div className="flex items-center gap-3">
+          <div className="p-2 bg-blue-500 rounded-lg">
+            <FileCheck className="w-5 h-5 text-white" />
+          </div>
+          <div>
+            <p className="font-medium text-blue-900 dark:text-blue-100">Configuration actuelle</p>
+            <p className="text-sm text-blue-700 dark:text-blue-300">
+              {requiredCount} champ{requiredCount > 1 ? 's' : ''} obligatoire{requiredCount > 1 ? 's' : ''} sur {totalCount}
+            </p>
+          </div>
+        </div>
+        <Badge variant="secondary" className="text-sm">
+          Score 100%
+        </Badge>
+      </div>
+      
+      <p className="text-sm text-muted-foreground flex items-start gap-2">
+        <AlertCircle className="w-4 h-4 mt-0.5 flex-shrink-0" />
+        <span>
+          Les champs marqués comme obligatoires doivent être détectés pour atteindre un score de 100%. 
+          Les champs optionnels n'affectent pas le score.
+        </span>
       </p>
       
-      <Table>
-        <TableHeader>
-          <TableRow>
-            <TableHead>Champ</TableHead>
-            <TableHead className="text-center">Obligatoire</TableHead>
-          </TableRow>
-        </TableHeader>
-        <TableBody>
-          {fields?.map((field) => (
-            <TableRow key={field.id}>
-              <TableCell className="font-medium">{field.displayName}</TableCell>
-              <TableCell className="text-center">
-                <Checkbox
-                  checked={field.isRequired === 1}
-                  onCheckedChange={() => handleToggle(field.fieldName, field.isRequired)}
-                  disabled={updateFieldMutation.isPending}
-                />
-              </TableCell>
+      <div className="border rounded-lg overflow-hidden">
+        <Table>
+          <TableHeader>
+            <TableRow className="bg-muted/50">
+              <TableHead className="font-semibold">Champ</TableHead>
+              <TableHead className="text-center font-semibold">Statut</TableHead>
+              <TableHead className="text-center font-semibold">Obligatoire</TableHead>
             </TableRow>
-          ))}
-        </TableBody>
-      </Table>
+          </TableHeader>
+          <TableBody>
+            {fields?.map((field) => (
+              <TableRow key={field.id} className="hover:bg-muted/30 transition-colors">
+                <TableCell className="font-medium">{field.displayName}</TableCell>
+                <TableCell className="text-center">
+                  {field.isRequired === 1 ? (
+                    <Badge variant="default" className="bg-green-500 hover:bg-green-600">
+                      Obligatoire
+                    </Badge>
+                  ) : (
+                    <Badge variant="secondary">
+                      Optionnel
+                    </Badge>
+                  )}
+                </TableCell>
+                <TableCell className="text-center">
+                  <div className="flex justify-center">
+                    <Checkbox
+                      checked={field.isRequired === 1}
+                      onCheckedChange={() => handleToggle(field.fieldName, field.isRequired)}
+                      disabled={updateFieldMutation.isPending}
+                      className="data-[state=checked]:bg-green-500 data-[state=checked]:border-green-500"
+                    />
+                  </div>
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
     </div>
   );
 }
@@ -114,7 +166,7 @@ export default function Settings() {
 
   const saveMutation = trpc.settings.upsert.useMutation({
     onSuccess: () => {
-      toast.success("Paramètres enregistrés");
+      toast.success("Paramètres enregistrés avec succès");
       utils.settings.get.invalidate();
     },
     onError: (error) => {
@@ -125,9 +177,9 @@ export default function Settings() {
   const testSftpMutation = trpc.sftp.testConnection.useMutation({
     onSuccess: (data) => {
       if (data.success) {
-        toast.success("Connexion SFTP réussie");
+        toast.success("✓ Connexion SFTP réussie");
       } else {
-        toast.error("Échec de la connexion SFTP");
+        toast.error("✗ Échec de la connexion SFTP");
       }
     },
     onError: (error) => {
@@ -161,250 +213,393 @@ export default function Settings() {
   if (isLoading) {
     return (
       <DashboardLayout>
-        <div className="flex items-center justify-center h-64">
-          <Loader2 className="w-8 h-8 animate-spin text-gray-400" />
+        <div className="flex flex-col items-center justify-center h-64 gap-4">
+          <Loader2 className="w-12 h-12 animate-spin text-primary" />
+          <p className="text-muted-foreground">Chargement des paramètres...</p>
         </div>
       </DashboardLayout>
     );
   }
 
+  const isSftpConfigured = sftpHost && sftpUsername;
+
   return (
     <DashboardLayout>
-      <div className="max-w-4xl space-y-6">
-        <div>
-          <h1 className="text-3xl font-bold">Paramètres</h1>
-          <p className="text-gray-500 mt-1">Configurez l'extraction et l'export de vos factures</p>
+      <div className="max-w-5xl space-y-8">
+        {/* Header */}
+        <div className="space-y-2">
+          <div className="flex items-center gap-3">
+            <div className="p-3 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-xl shadow-lg">
+              <Sparkles className="w-7 h-7 text-white" />
+            </div>
+            <div>
+              <h1 className="text-4xl font-bold bg-gradient-to-r from-blue-600 to-indigo-600 bg-clip-text text-transparent">
+                Paramètres
+              </h1>
+              <p className="text-muted-foreground mt-1">
+                Configurez l'extraction et l'export de vos factures
+              </p>
+            </div>
+          </div>
         </div>
 
-        {/* LLM Configuration */}
-        <Card>
-          <CardHeader>
-            <CardTitle>Configuration LLM</CardTitle>
-            <CardDescription>Paramètres du modèle d'extraction Mistral AI</CardDescription>
-          </CardHeader>
-          <CardContent className="space-y-4">
-            <div className="space-y-2">
-              <Label htmlFor="llmModel">Modèle Mistral</Label>
-              <Input
-                id="llmModel"
-                value={llmModel}
-                onChange={(e) => setLlmModel(e.target.value)}
-                placeholder="mistral-large-latest"
-              />
-              <p className="text-xs text-gray-500">Nom du modèle Mistral à utiliser pour l'extraction</p>
-            </div>
-
-            <div className="space-y-2">
-              <Label htmlFor="llmLogsRetentionMonths">Rétention des logs LLM (mois)</Label>
-              <Input
-                id="llmLogsRetentionMonths"
-                type="number"
-                value={llmLogsRetentionMonths}
-                onChange={(e) => setLlmLogsRetentionMonths(parseInt(e.target.value) || 3)}
-                min={1}
-                max={12}
-              />
-              <p className="text-xs text-gray-500">Durée de conservation des logs LLM (1-12 mois)</p>
-            </div>
-          </CardContent>
-        </Card>
-
-        {/* LLM Fields Configuration */}
-        <Card>
-          <CardHeader>
-            <CardTitle>Champs de détection</CardTitle>
-            <CardDescription>
-              Configurez quels champs sont obligatoires pour atteindre un score de reconnaissance de 100%
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <LlmFieldsConfigSection />
-          </CardContent>
-        </Card>
-
-        {/* Keywords Configuration */}
-        <Card>
-          <CardHeader>
-            <CardTitle>Mots-clés personnalisés</CardTitle>
-            <CardDescription>
-              Mots-clés pour améliorer la détection des champs (séparés par des virgules)
-            </CardDescription>
-          </CardHeader>
-          <CardContent className="space-y-4">
-            <div className="space-y-2">
-              <Label htmlFor="invoiceNumberKeywords">Numéro de facture</Label>
-              <Textarea
-                id="invoiceNumberKeywords"
-                value={invoiceNumberKeywords}
-                onChange={(e) => setInvoiceNumberKeywords(e.target.value)}
-                placeholder="Référence, Ref facture, Invoice ref"
-                rows={2}
-              />
-            </div>
-
-            <div className="space-y-2">
-              <Label htmlFor="deliveryNoteKeywords">Bon de livraison</Label>
-              <Textarea
-                id="deliveryNoteKeywords"
-                value={deliveryNoteKeywords}
-                onChange={(e) => setDeliveryNoteKeywords(e.target.value)}
-                placeholder="Livraison, Delivery, Expédition"
-                rows={2}
-              />
-            </div>
-
-            <div className="space-y-2">
-              <Label htmlFor="orderNumberKeywords">Numéro de commande</Label>
-              <Textarea
-                id="orderNumberKeywords"
-                value={orderNumberKeywords}
-                onChange={(e) => setOrderNumberKeywords(e.target.value)}
-                placeholder="Cde client, Référence commande, PO Number"
-                rows={2}
-              />
-            </div>
-
-            <div className="space-y-2">
-              <Label htmlFor="supplierKeywords">Fournisseur</Label>
-              <Textarea
-                id="supplierKeywords"
-                value={supplierKeywords}
-                onChange={(e) => setSupplierKeywords(e.target.value)}
-                placeholder="Vendeur, Société, Émetteur"
-                rows={2}
-              />
-            </div>
-
-            <div className="space-y-2">
-              <Label htmlFor="totalAmountKeywords">Montant total</Label>
-              <Textarea
-                id="totalAmountKeywords"
-                value={totalAmountKeywords}
-                onChange={(e) => setTotalAmountKeywords(e.target.value)}
-                placeholder="Net à payer, Total à régler, Amount due"
-                rows={2}
-              />
-            </div>
-
-            <div className="space-y-2">
-              <Label htmlFor="subscriptionKeywords">Abonnement</Label>
-              <Textarea
-                id="subscriptionKeywords"
-                value={subscriptionKeywords}
-                onChange={(e) => setSubscriptionKeywords(e.target.value)}
-                placeholder="Abonnement, Subscription, Mensuel, Annuel, Recurring"
-                rows={2}
-              />
-              <p className="text-sm text-muted-foreground">
-                Les factures contenant ces mots-clés seront automatiquement marquées comme abonnement
-              </p>
-            </div>
-          </CardContent>
-        </Card>
-
-        {/* SFTP Configuration */}
-        <Card>
-          <CardHeader>
-            <CardTitle>Configuration SFTP</CardTitle>
-            <CardDescription>Paramètres d'export vers un serveur SFTP</CardDescription>
-          </CardHeader>
-          <CardContent className="space-y-4">
-            <div className="grid grid-cols-2 gap-4">
-              <div className="space-y-2">
-                <Label htmlFor="sftpHost">Hôte SFTP</Label>
-                <Input
-                  id="sftpHost"
-                  value={sftpHost}
-                  onChange={(e) => setSftpHost(e.target.value)}
-                  placeholder="sftp.example.com"
-                />
-              </div>
-
-              <div className="space-y-2">
-                <Label htmlFor="sftpPort">Port</Label>
-                <Input
-                  id="sftpPort"
-                  type="number"
-                  value={sftpPort}
-                  onChange={(e) => setSftpPort(parseInt(e.target.value) || 22)}
-                />
-              </div>
-            </div>
-
-            <div className="grid grid-cols-2 gap-4">
-              <div className="space-y-2">
-                <Label htmlFor="sftpUsername">Nom d'utilisateur</Label>
-                <Input
-                  id="sftpUsername"
-                  value={sftpUsername}
-                  onChange={(e) => setSftpUsername(e.target.value)}
-                  placeholder="username"
-                />
-              </div>
-
-              <div className="space-y-2">
-                <Label htmlFor="sftpPassword">Mot de passe</Label>
-                <Input
-                  id="sftpPassword"
-                  type="password"
-                  value={sftpPassword}
-                  onChange={(e) => setSftpPassword(e.target.value)}
-                  placeholder="••••••••"
-                />
-              </div>
-            </div>
-
-            <div className="space-y-2">
-              <Label htmlFor="sftpRemotePath">Chemin distant</Label>
-              <Input
-                id="sftpRemotePath"
-                value={sftpRemotePath}
-                onChange={(e) => setSftpRemotePath(e.target.value)}
-                placeholder="/invoices"
-              />
-              <p className="text-xs text-gray-500">
-                Les fichiers seront organisés par date: /chemin/YYYY/MM/DD/
-              </p>
-            </div>
-
-            <div className="flex items-center justify-between">
-              <div className="space-y-0.5">
-                <Label htmlFor="sftpAutoExport">Export automatique</Label>
-                <p className="text-xs text-gray-500">
-                  Exporter automatiquement les factures après extraction
-                </p>
-              </div>
-              <Switch
-                id="sftpAutoExport"
-                checked={sftpAutoExport}
-                onCheckedChange={setSftpAutoExport}
-              />
-            </div>
-
-            <Button
-              variant="outline"
-              onClick={handleTestSftp}
-              disabled={testSftpMutation.isPending || !sftpHost}
+        {/* Tabs Navigation */}
+        <Tabs defaultValue="llm" className="space-y-6">
+          <TabsList className="grid w-full grid-cols-3 h-auto p-1 bg-muted/50">
+            <TabsTrigger 
+              value="llm" 
+              className="flex items-center gap-2 py-3 data-[state=active]:bg-background data-[state=active]:shadow-sm transition-all"
             >
-              {testSftpMutation.isPending ? (
-                <Loader2 className="w-4 h-4 mr-2 animate-spin" />
-              ) : (
-                <CheckCircle className="w-4 h-4 mr-2" />
+              <Brain className="w-5 h-5" />
+              <span className="font-medium">Intelligence AI</span>
+            </TabsTrigger>
+            <TabsTrigger 
+              value="keywords" 
+              className="flex items-center gap-2 py-3 data-[state=active]:bg-background data-[state=active]:shadow-sm transition-all"
+            >
+              <Key className="w-5 h-5" />
+              <span className="font-medium">Mots-clés</span>
+            </TabsTrigger>
+            <TabsTrigger 
+              value="sftp" 
+              className="flex items-center gap-2 py-3 data-[state=active]:bg-background data-[state=active]:shadow-sm transition-all"
+            >
+              <Server className="w-5 h-5" />
+              <span className="font-medium">Export SFTP</span>
+              {isSftpConfigured && (
+                <Badge variant="secondary" className="ml-1 bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400">
+                  Configuré
+                </Badge>
               )}
-              Tester la connexion
-            </Button>
-          </CardContent>
-        </Card>
+            </TabsTrigger>
+          </TabsList>
 
-        {/* Save button */}
-        <div className="flex justify-end">
-          <Button onClick={handleSave} disabled={saveMutation.isPending} size="lg">
+          {/* LLM Tab */}
+          <TabsContent value="llm" className="space-y-6 animate-in fade-in-50 duration-300">
+            <Card className="border-2 hover:border-primary/50 transition-colors">
+              <CardHeader className="bg-gradient-to-r from-purple-50 to-pink-50 dark:from-purple-950/20 dark:to-pink-950/20 border-b">
+                <div className="flex items-center gap-3">
+                  <div className="p-2 bg-purple-500 rounded-lg">
+                    <Brain className="w-6 h-6 text-white" />
+                  </div>
+                  <div>
+                    <CardTitle className="text-xl">Configuration du modèle AI</CardTitle>
+                    <CardDescription className="mt-1">
+                      Paramètres du modèle d'extraction Mistral AI
+                    </CardDescription>
+                  </div>
+                </div>
+              </CardHeader>
+              <CardContent className="space-y-6 pt-6">
+                <div className="space-y-3">
+                  <Label htmlFor="llmModel" className="text-base font-semibold">Modèle Mistral</Label>
+                  <Input
+                    id="llmModel"
+                    value={llmModel}
+                    onChange={(e) => setLlmModel(e.target.value)}
+                    placeholder="mistral-large-latest"
+                    className="h-11"
+                  />
+                  <p className="text-sm text-muted-foreground flex items-center gap-2">
+                    <AlertCircle className="w-4 h-4" />
+                    Nom du modèle Mistral à utiliser pour l'extraction
+                  </p>
+                </div>
+
+                <div className="space-y-3">
+                  <Label htmlFor="llmLogsRetentionMonths" className="text-base font-semibold">
+                    Rétention des logs (mois)
+                  </Label>
+                  <Input
+                    id="llmLogsRetentionMonths"
+                    type="number"
+                    value={llmLogsRetentionMonths}
+                    onChange={(e) => setLlmLogsRetentionMonths(parseInt(e.target.value) || 3)}
+                    min={1}
+                    max={12}
+                    className="h-11"
+                  />
+                  <p className="text-sm text-muted-foreground flex items-center gap-2">
+                    <AlertCircle className="w-4 h-4" />
+                    Durée de conservation des logs LLM (1-12 mois)
+                  </p>
+                </div>
+              </CardContent>
+            </Card>
+
+            <Card className="border-2 hover:border-primary/50 transition-colors">
+              <CardHeader className="bg-gradient-to-r from-blue-50 to-cyan-50 dark:from-blue-950/20 dark:to-cyan-950/20 border-b">
+                <div className="flex items-center gap-3">
+                  <div className="p-2 bg-blue-500 rounded-lg">
+                    <FileCheck className="w-6 h-6 text-white" />
+                  </div>
+                  <div>
+                    <CardTitle className="text-xl">Champs de détection</CardTitle>
+                    <CardDescription className="mt-1">
+                      Configurez quels champs sont obligatoires pour un score de 100%
+                    </CardDescription>
+                  </div>
+                </div>
+              </CardHeader>
+              <CardContent className="pt-6">
+                <LlmFieldsConfigSection />
+              </CardContent>
+            </Card>
+          </TabsContent>
+
+          {/* Keywords Tab */}
+          <TabsContent value="keywords" className="space-y-6 animate-in fade-in-50 duration-300">
+            <Card className="border-2 hover:border-primary/50 transition-colors">
+              <CardHeader className="bg-gradient-to-r from-amber-50 to-orange-50 dark:from-amber-950/20 dark:to-orange-950/20 border-b">
+                <div className="flex items-center gap-3">
+                  <div className="p-2 bg-amber-500 rounded-lg">
+                    <Key className="w-6 h-6 text-white" />
+                  </div>
+                  <div>
+                    <CardTitle className="text-xl">Mots-clés personnalisés</CardTitle>
+                    <CardDescription className="mt-1">
+                      Améliorez la détection en ajoutant vos propres mots-clés (séparés par des virgules)
+                    </CardDescription>
+                  </div>
+                </div>
+              </CardHeader>
+              <CardContent className="space-y-6 pt-6">
+                <div className="grid gap-6">
+                  <div className="space-y-3">
+                    <Label htmlFor="invoiceNumberKeywords" className="text-base font-semibold">
+                      Numéro de facture
+                    </Label>
+                    <Textarea
+                      id="invoiceNumberKeywords"
+                      value={invoiceNumberKeywords}
+                      onChange={(e) => setInvoiceNumberKeywords(e.target.value)}
+                      placeholder="Référence, Ref facture, Invoice ref"
+                      rows={2}
+                      className="resize-none"
+                    />
+                  </div>
+
+                  <div className="space-y-3">
+                    <Label htmlFor="deliveryNoteKeywords" className="text-base font-semibold">
+                      Bon de livraison
+                    </Label>
+                    <Textarea
+                      id="deliveryNoteKeywords"
+                      value={deliveryNoteKeywords}
+                      onChange={(e) => setDeliveryNoteKeywords(e.target.value)}
+                      placeholder="Livraison, Delivery, Expédition"
+                      rows={2}
+                      className="resize-none"
+                    />
+                  </div>
+
+                  <div className="space-y-3">
+                    <Label htmlFor="orderNumberKeywords" className="text-base font-semibold">
+                      Numéro de commande
+                    </Label>
+                    <Textarea
+                      id="orderNumberKeywords"
+                      value={orderNumberKeywords}
+                      onChange={(e) => setOrderNumberKeywords(e.target.value)}
+                      placeholder="Cde client, Référence commande, PO Number"
+                      rows={2}
+                      className="resize-none"
+                    />
+                  </div>
+
+                  <div className="space-y-3">
+                    <Label htmlFor="supplierKeywords" className="text-base font-semibold">
+                      Fournisseur
+                    </Label>
+                    <Textarea
+                      id="supplierKeywords"
+                      value={supplierKeywords}
+                      onChange={(e) => setSupplierKeywords(e.target.value)}
+                      placeholder="Vendeur, Société, Émetteur"
+                      rows={2}
+                      className="resize-none"
+                    />
+                  </div>
+
+                  <div className="space-y-3">
+                    <Label htmlFor="totalAmountKeywords" className="text-base font-semibold">
+                      Montant total
+                    </Label>
+                    <Textarea
+                      id="totalAmountKeywords"
+                      value={totalAmountKeywords}
+                      onChange={(e) => setTotalAmountKeywords(e.target.value)}
+                      placeholder="Net à payer, Total à régler, Amount due"
+                      rows={2}
+                      className="resize-none"
+                    />
+                  </div>
+
+                  <div className="space-y-3">
+                    <Label htmlFor="subscriptionKeywords" className="text-base font-semibold">
+                      Abonnement
+                    </Label>
+                    <Textarea
+                      id="subscriptionKeywords"
+                      value={subscriptionKeywords}
+                      onChange={(e) => setSubscriptionKeywords(e.target.value)}
+                      placeholder="Abonnement, Subscription, Mensuel, Annuel, Recurring"
+                      rows={2}
+                      className="resize-none"
+                    />
+                    <p className="text-sm text-muted-foreground flex items-center gap-2">
+                      <AlertCircle className="w-4 h-4" />
+                      Les factures contenant ces mots-clés seront automatiquement marquées comme abonnement
+                    </p>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          </TabsContent>
+
+          {/* SFTP Tab */}
+          <TabsContent value="sftp" className="space-y-6 animate-in fade-in-50 duration-300">
+            <Card className="border-2 hover:border-primary/50 transition-colors">
+              <CardHeader className="bg-gradient-to-r from-green-50 to-emerald-50 dark:from-green-950/20 dark:to-emerald-950/20 border-b">
+                <div className="flex items-center gap-3">
+                  <div className="p-2 bg-green-500 rounded-lg">
+                    <Server className="w-6 h-6 text-white" />
+                  </div>
+                  <div>
+                    <CardTitle className="text-xl">Configuration SFTP</CardTitle>
+                    <CardDescription className="mt-1">
+                      Paramètres d'export automatique vers un serveur SFTP
+                    </CardDescription>
+                  </div>
+                </div>
+              </CardHeader>
+              <CardContent className="space-y-6 pt-6">
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                  <div className="space-y-3">
+                    <Label htmlFor="sftpHost" className="text-base font-semibold">Hôte SFTP</Label>
+                    <Input
+                      id="sftpHost"
+                      value={sftpHost}
+                      onChange={(e) => setSftpHost(e.target.value)}
+                      placeholder="sftp.example.com"
+                      className="h-11"
+                    />
+                  </div>
+
+                  <div className="space-y-3">
+                    <Label htmlFor="sftpPort" className="text-base font-semibold">Port</Label>
+                    <Input
+                      id="sftpPort"
+                      type="number"
+                      value={sftpPort}
+                      onChange={(e) => setSftpPort(parseInt(e.target.value) || 22)}
+                      className="h-11"
+                    />
+                  </div>
+                </div>
+
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                  <div className="space-y-3">
+                    <Label htmlFor="sftpUsername" className="text-base font-semibold">Nom d'utilisateur</Label>
+                    <Input
+                      id="sftpUsername"
+                      value={sftpUsername}
+                      onChange={(e) => setSftpUsername(e.target.value)}
+                      placeholder="username"
+                      className="h-11"
+                    />
+                  </div>
+
+                  <div className="space-y-3">
+                    <Label htmlFor="sftpPassword" className="text-base font-semibold">Mot de passe</Label>
+                    <Input
+                      id="sftpPassword"
+                      type="password"
+                      value={sftpPassword}
+                      onChange={(e) => setSftpPassword(e.target.value)}
+                      placeholder="••••••••"
+                      className="h-11"
+                    />
+                  </div>
+                </div>
+
+                <div className="space-y-3">
+                  <Label htmlFor="sftpRemotePath" className="text-base font-semibold">Chemin distant</Label>
+                  <Input
+                    id="sftpRemotePath"
+                    value={sftpRemotePath}
+                    onChange={(e) => setSftpRemotePath(e.target.value)}
+                    placeholder="/invoices"
+                    className="h-11"
+                  />
+                  <p className="text-sm text-muted-foreground flex items-center gap-2">
+                    <AlertCircle className="w-4 h-4" />
+                    Les fichiers seront organisés par date: /chemin/YYYY/MM/DD/
+                  </p>
+                </div>
+
+                <div className="flex items-center justify-between p-4 bg-muted/50 rounded-lg border">
+                  <div className="space-y-1">
+                    <Label htmlFor="sftpAutoExport" className="text-base font-semibold cursor-pointer">
+                      Export automatique
+                    </Label>
+                    <p className="text-sm text-muted-foreground">
+                      Exporter automatiquement les factures après extraction
+                    </p>
+                  </div>
+                  <Switch
+                    id="sftpAutoExport"
+                    checked={sftpAutoExport}
+                    onCheckedChange={setSftpAutoExport}
+                    className="data-[state=checked]:bg-green-500"
+                  />
+                </div>
+
+                <div className="pt-4 border-t">
+                  <Button
+                    variant="outline"
+                    onClick={handleTestSftp}
+                    disabled={testSftpMutation.isPending || !sftpHost}
+                    className="w-full h-11 text-base"
+                    size="lg"
+                  >
+                    {testSftpMutation.isPending ? (
+                      <>
+                        <Loader2 className="w-5 h-5 mr-2 animate-spin" />
+                        Test en cours...
+                      </>
+                    ) : (
+                      <>
+                        <CheckCircle className="w-5 h-5 mr-2" />
+                        Tester la connexion SFTP
+                      </>
+                    )}
+                  </Button>
+                </div>
+              </CardContent>
+            </Card>
+          </TabsContent>
+        </Tabs>
+
+        {/* Save Button */}
+        <div className="flex justify-end pt-4 border-t">
+          <Button 
+            onClick={handleSave} 
+            disabled={saveMutation.isPending} 
+            size="lg"
+            className="h-12 px-8 text-base bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 shadow-lg hover:shadow-xl transition-all"
+          >
             {saveMutation.isPending ? (
-              <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+              <>
+                <Loader2 className="w-5 h-5 mr-2 animate-spin" />
+                Enregistrement...
+              </>
             ) : (
-              <Save className="w-4 h-4 mr-2" />
+              <>
+                <Save className="w-5 h-5 mr-2" />
+                Enregistrer les paramètres
+              </>
             )}
-            Enregistrer les paramètres
           </Button>
         </div>
       </div>
diff --git a/todo.md b/todo.md
index ac073ea..ffe331f 100644
--- a/todo.md
+++ b/todo.md
@@ -382,5 +382,17 @@
 - [x] Modifier le code d'extraction (invoiceExtractor.ts) pour utiliser la configuration
 - [x] Adapter le calcul du qualityScore selon les champs obligatoires configurés
 - [x] Initialiser les valeurs par défaut (supplierName, invoiceNumber, invoiceDate, totalAmount obligatoires)
-- [ ] Tester la configuration et vérifier le calcul du score
+- [x] Tester la configuration et vérifier le calcul du score
+- [x] Déployer sur le VPS
+
+## Modernisation de la page Paramètres
+- [x] Analyser la structure actuelle et identifier les améliorations UX
+- [x] Remplacer le layout par un système de Tabs pour organiser les sections
+- [x] Utiliser des Cards modernes avec ombres et bordures pour chaque section
+- [x] Améliorer la typographie (titres, descriptions, espacements)
+- [x] Ajouter des icônes plus grandes et colorées pour chaque section
+- [x] Implémenter des animations de transition fluides
+- [x] Améliorer le responsive design pour mobile
+- [x] Ajouter des badges de statut (Actif/Inactif) avec couleurs
+- [x] Tester localement l'interface modernisée
 - [ ] Déployer sur le VPS