diff --git a/src/app/campaigns/[id]/propose/page.tsx b/src/app/campaigns/[id]/propose/page.tsx
index b77432d..bb278c0 100644
--- a/src/app/campaigns/[id]/propose/page.tsx
+++ b/src/app/campaigns/[id]/propose/page.tsx
@@ -5,8 +5,13 @@ import { useParams } from 'next/navigation';
 import Link from 'next/link';
 import { Campaign } from '@/types';
 import { campaignService, propositionService } from '@/lib/services';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { ArrowLeft, FileText, User, Mail, CheckCircle, AlertCircle } from 'lucide-react';
 
-// Force dynamic rendering to avoid SSR issues with Supabase
 export const dynamic = 'force-dynamic';
 
 export default function PublicProposePage() {
@@ -64,7 +69,6 @@ export default function PublicProposePage() {
     setError('');
 
     try {
-      // Créer la proposition avec les informations de l'auteur
       await propositionService.create({
         campaign_id: campaignId,
         title: formData.title,
@@ -100,10 +104,10 @@ export default function PublicProposePage() {
 
   if (loading) {
     return (
-      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
+      <div className="min-h-screen bg-slate-50 dark:bg-slate-900 flex items-center justify-center">
         <div className="text-center">
-          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-indigo-600 mx-auto"></div>
-          <p className="mt-4 text-gray-600">Chargement de la campagne...</p>
+          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-slate-900 dark:border-slate-100 mx-auto mb-4"></div>
+          <p className="text-slate-600 dark:text-slate-300">Chargement de la campagne...</p>
         </div>
       </div>
     );
@@ -111,21 +115,20 @@ export default function PublicProposePage() {
 
   if (error && !campaign) {
     return (
-      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
+      <div className="min-h-screen bg-slate-50 dark:bg-slate-900 flex items-center justify-center">
         <div className="text-center">
-          <div className="bg-white rounded-lg shadow-lg p-8 max-w-md mx-auto">
-            <svg className="mx-auto h-12 w-12 text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z" />
-            </svg>
-            <h2 className="mt-4 text-lg font-medium text-gray-900">Erreur</h2>
-            <p className="mt-2 text-sm text-gray-600">{error}</p>
-            <Link
-              href="/"
-              className="mt-4 inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700"
-            >
-              Retour à l'accueil
-            </Link>
-          </div>
+          <Card className="max-w-md mx-auto">
+            <CardContent className="p-8">
+              <div className="w-16 h-16 bg-red-100 dark:bg-red-900 rounded-full flex items-center justify-center mx-auto mb-4">
+                <AlertCircle className="w-8 h-8 text-red-600 dark:text-red-400" />
+              </div>
+              <h2 className="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-2">Erreur</h2>
+              <p className="text-slate-600 dark:text-slate-300 mb-6">{error}</p>
+              <Button asChild>
+                <Link href="/">Retour à l'accueil</Link>
+              </Button>
+            </CardContent>
+          </Card>
         </div>
       </div>
     );
@@ -133,54 +136,44 @@ export default function PublicProposePage() {
 
   if (success) {
     return (
-      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
+      <div className="min-h-screen bg-slate-50 dark:bg-slate-900 flex items-center justify-center">
         <div className="text-center">
-          <div className="bg-white rounded-lg shadow-lg p-8 max-w-md mx-auto">
-            <svg className="mx-auto h-12 w-12 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
-            </svg>
-            <h2 className="mt-4 text-lg font-medium text-gray-900">Proposition soumise !</h2>
-            <p className="mt-2 text-sm text-gray-600">
-              Votre proposition a été soumise avec succès. Merci pour votre participation !
-            </p>
-            <div className="mt-6 space-y-3">
-              <button
-                onClick={() => setSuccess(false)}
-                className="w-full inline-flex justify-center items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700"
-              >
-                Soumettre une autre proposition
-              </button>
-              <Link
-                href="/"
-                className="w-full inline-flex justify-center items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50"
-              >
-                Retour à l'accueil
-              </Link>
-            </div>
-          </div>
+          <Card className="max-w-md mx-auto">
+            <CardContent className="p-8">
+              <div className="w-16 h-16 bg-green-100 dark:bg-green-900 rounded-full flex items-center justify-center mx-auto mb-4">
+                <CheckCircle className="w-8 h-8 text-green-600 dark:text-green-400" />
+              </div>
+              <h2 className="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-2">Proposition soumise !</h2>
+              <p className="text-slate-600 dark:text-slate-300 mb-6">
+                Votre proposition a été soumise avec succès. Merci pour votre participation !
+              </p>
+              <div className="space-y-3">
+                <Button 
+                  onClick={() => setSuccess(false)}
+                  className="w-full"
+                >
+                  Soumettre une autre proposition
+                </Button>
+                <Button asChild variant="outline" className="w-full">
+                  <Link href="/">Retour à l'accueil</Link>
+                </Button>
+              </div>
+            </CardContent>
+          </Card>
         </div>
       </div>
     );
   }
 
   return (
-    <div className="min-h-screen bg-gray-50">
-      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+    <div className="min-h-screen bg-slate-50 dark:bg-slate-900">
+      <div className="container mx-auto px-4 py-8">
         {/* Header */}
         <div className="mb-8">
-          <div className="flex items-center justify-between">
+          <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
             <div>
-              <Link
-                href="/"
-                className="inline-flex items-center text-sm text-indigo-600 hover:text-indigo-500 mb-4"
-              >
-                <svg className="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 19l-7-7m0 0l7-7m-7 7h18" />
-                </svg>
-                Retour à l'accueil
-              </Link>
-              <h1 className="text-3xl font-bold text-gray-900">Déposer une proposition</h1>
-              <p className="mt-2 text-gray-600">
+              <h1 className="text-3xl font-bold text-slate-900 dark:text-slate-100">Déposer une proposition</h1>
+              <p className="text-slate-600 dark:text-slate-300 mt-2">
                 Campagne : <span className="font-medium">{campaign?.title}</span>
               </p>
             </div>
@@ -188,143 +181,130 @@ export default function PublicProposePage() {
         </div>
 
         {/* Campaign Info */}
-        <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6 mb-8">
-          <h2 className="text-lg font-medium text-gray-900 mb-4">Informations sur la campagne</h2>
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-            <div>
-              <h3 className="text-sm font-medium text-gray-500">Description</h3>
-              <p className="mt-1 text-sm text-gray-900">{campaign?.description}</p>
+        <Card className="mb-8">
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <FileText className="w-5 h-5" />
+              Informations sur la campagne
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-4">
+              <div>
+                <h3 className="text-sm font-medium text-slate-600 dark:text-slate-300 mb-2">Description</h3>
+                <p className="text-slate-900 dark:text-slate-100">{campaign?.description}</p>
+              </div>
             </div>
-            <div>
-              <h3 className="text-sm font-medium text-gray-500">Budget par participant</h3>
-              <p className="mt-1 text-sm text-gray-900">{campaign?.budget_per_user}€</p>
-            </div>
-            <div>
-              <h3 className="text-sm font-medium text-gray-500">Paliers de dépenses</h3>
-              <p className="mt-1 text-sm text-gray-900">{campaign?.spending_tiers}</p>
-            </div>
-            <div>
-              <h3 className="text-sm font-medium text-gray-500">Statut</h3>
-              <span className="mt-1 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
-                Dépôt de propositions
-              </span>
-            </div>
-          </div>
-        </div>
+          </CardContent>
+        </Card>
 
         {/* Form */}
-        <div className="bg-white rounded-lg shadow-sm border border-gray-200">
-          <div className="px-6 py-4 border-b border-gray-200">
-            <h2 className="text-lg font-medium text-gray-900">Votre proposition</h2>
-            <p className="mt-1 text-sm text-gray-600">
+        <Card>
+          <CardHeader>
+            <CardTitle>Votre proposition</CardTitle>
+            <CardDescription>
               Remplissez le formulaire ci-dessous pour soumettre votre proposition.
-            </p>
-          </div>
+            </CardDescription>
+          </CardHeader>
 
-          <form onSubmit={handleSubmit} className="p-6 space-y-6">
-            {error && (
-              <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-md">
-                {error}
-              </div>
-            )}
-
-            <div>
-              <label htmlFor="title" className="block text-sm font-medium text-gray-700 mb-1">
-                Titre de la proposition *
-              </label>
-              <input
-                type="text"
-                id="title"
-                name="title"
-                value={formData.title}
-                onChange={handleChange}
-                required
-                className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
-                placeholder="Titre de votre proposition"
-              />
-            </div>
-
-            <div>
-              <label htmlFor="description" className="block text-sm font-medium text-gray-700 mb-1">
-                Description *
-              </label>
-              <textarea
-                id="description"
-                name="description"
-                value={formData.description}
-                onChange={handleChange}
-                required
-                rows={6}
-                className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
-                placeholder="Décrivez votre proposition en détail..."
-              />
-            </div>
-
-            <div className="border-t border-gray-200 pt-6">
-              <h3 className="text-lg font-medium text-gray-900 mb-4">Vos informations</h3>
-              
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                <div>
-                  <label htmlFor="author_first_name" className="block text-sm font-medium text-gray-700 mb-1">
-                    Prénom *
-                  </label>
-                  <input
-                    type="text"
-                    id="author_first_name"
-                    name="author_first_name"
-                    value={formData.author_first_name}
-                    onChange={handleChange}
-                    required
-                    className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
-                    placeholder="Votre prénom"
-                  />
+          <CardContent>
+            <form onSubmit={handleSubmit} className="space-y-6">
+              {error && (
+                <div className="p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
+                  <p className="text-sm text-red-600 dark:text-red-400">{error}</p>
                 </div>
+              )}
 
-                <div>
-                  <label htmlFor="author_last_name" className="block text-sm font-medium text-gray-700 mb-1">
-                    Nom *
-                  </label>
-                  <input
-                    type="text"
-                    id="author_last_name"
-                    name="author_last_name"
-                    value={formData.author_last_name}
-                    onChange={handleChange}
-                    required
-                    className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
-                    placeholder="Votre nom"
-                  />
-                </div>
-              </div>
-
-              <div className="mt-4">
-                <label htmlFor="author_email" className="block text-sm font-medium text-gray-700 mb-1">
-                  Email *
+              <div className="space-y-2">
+                <label htmlFor="title" className="text-sm font-medium text-slate-700 dark:text-slate-300">
+                  Titre de la proposition *
                 </label>
-                <input
-                  type="email"
-                  id="author_email"
-                  name="author_email"
-                  value={formData.author_email}
+                <Input
+                  id="title"
+                  name="title"
+                  value={formData.title}
                   onChange={handleChange}
+                  placeholder="Titre de votre proposition"
                   required
-                  className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
-                  placeholder="votre.email@exemple.com"
                 />
               </div>
-            </div>
 
-            <div className="flex items-center justify-end pt-6">
-              <button
-                type="submit"
-                disabled={submitting}
-                className="px-6 py-3 text-sm font-medium text-white bg-indigo-600 border border-transparent rounded-md hover:bg-indigo-700 disabled:opacity-50 disabled:cursor-not-allowed"
-              >
-                {submitting ? 'Soumission...' : 'Soumettre la proposition'}
-              </button>
-            </div>
-          </form>
-        </div>
+              <div className="space-y-2">
+                <label htmlFor="description" className="text-sm font-medium text-slate-700 dark:text-slate-300">
+                  Description *
+                </label>
+                <Textarea
+                  id="description"
+                  name="description"
+                  value={formData.description}
+                  onChange={handleChange}
+                  placeholder="Décrivez votre proposition en détail..."
+                  rows={6}
+                  required
+                />
+              </div>
+
+              <div className="border-t border-slate-200 dark:border-slate-700 pt-6">
+                <h3 className="text-lg font-medium text-slate-900 dark:text-slate-100 mb-4 flex items-center gap-2">
+                  <User className="w-5 h-5" />
+                  Vos informations
+                </h3>
+                
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                  <div className="space-y-2">
+                    <label htmlFor="author_first_name" className="text-sm font-medium text-slate-700 dark:text-slate-300">
+                      Prénom *
+                    </label>
+                    <Input
+                      id="author_first_name"
+                      name="author_first_name"
+                      value={formData.author_first_name}
+                      onChange={handleChange}
+                      placeholder="Votre prénom"
+                      required
+                    />
+                  </div>
+
+                  <div className="space-y-2">
+                    <label htmlFor="author_last_name" className="text-sm font-medium text-slate-700 dark:text-slate-300">
+                      Nom *
+                    </label>
+                    <Input
+                      id="author_last_name"
+                      name="author_last_name"
+                      value={formData.author_last_name}
+                      onChange={handleChange}
+                      placeholder="Votre nom"
+                      required
+                    />
+                  </div>
+                </div>
+
+                <div className="space-y-2 mt-4">
+                  <label htmlFor="author_email" className="text-sm font-medium text-slate-700 dark:text-slate-300 flex items-center gap-2">
+                    <Mail className="w-4 h-4" />
+                    Email *
+                  </label>
+                  <Input
+                    id="author_email"
+                    name="author_email"
+                    type="email"
+                    value={formData.author_email}
+                    onChange={handleChange}
+                    placeholder="votre.email@exemple.com"
+                    required
+                  />
+                </div>
+              </div>
+
+              <div className="flex items-center justify-end pt-6">
+                <Button type="submit" disabled={submitting} size="lg">
+                  {submitting ? 'Soumission...' : 'Soumettre la proposition'}
+                </Button>
+              </div>
+            </form>
+          </CardContent>
+        </Card>
       </div>
     </div>
   );