diff --git a/src/components/suggestions/NewSuggestionForm.tsx b/src/components/suggestions/NewSuggestionForm.tsx
new file mode 100644
index 0000000..0c356cd
--- /dev/null
+++ b/src/components/suggestions/NewSuggestionForm.tsx
@@ -0,0 +1,51 @@
+import React from 'react';
+import { Card } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+
+interface NewSuggestionFormProps {
+  newSuggestion: {
+    title: string;
+    description: string;
+  };
+  onCancel: () => void;
+  onSubmit: () => void;
+  onChange: (field: 'title' | 'description', value: string) => void;
+}
+
+export function NewSuggestionForm({ newSuggestion, onCancel, onSubmit, onChange }: NewSuggestionFormProps) {
+  return (
+    <Card className="p-6 mb-4 bg-white/90 backdrop-blur-md border border-[#FF9633]/10 shadow-lg">
+      <div className="space-y-4">
+        <Input
+          placeholder="Titre de votre suggestion"
+          value={newSuggestion.title}
+          onChange={(e) => onChange('title', e.target.value)}
+          className="border-2 focus:border-[#FF9633] transition-all duration-200 rounded-xl"
+        />
+        <textarea
+          placeholder="Description détaillée de votre suggestion..."
+          value={newSuggestion.description}
+          onChange={(e) => onChange('description', e.target.value)}
+          className="w-full p-4 border-2 rounded-xl h-32 focus:outline-none focus:border-[#FF9633] transition-all duration-200 bg-white resize-none"
+        />
+        <div className="flex justify-end gap-2">
+          <Button 
+            variant="outline"
+            onClick={onCancel}
+            className="hover:bg-red-50 hover:text-red-600 transition-all duration-200 rounded-xl"
+          >
+            Annuler
+          </Button>
+          <Button 
+            onClick={onSubmit}
+            className="bg-[#FF9633] text-white hover:bg-[#FF9633]/90 transition-all duration-200 shadow-lg rounded-xl"
+            disabled={!newSuggestion.title || !newSuggestion.description}
+          >
+            Publier la suggestion
+          </Button>
+        </div>
+      </div>
+    </Card>
+  );
+}
\ No newline at end of file
diff --git a/src/components/suggestions/SuggestionCard.tsx b/src/components/suggestions/SuggestionCard.tsx
new file mode 100644
index 0000000..1b74577
--- /dev/null
+++ b/src/components/suggestions/SuggestionCard.tsx
@@ -0,0 +1,70 @@
+import React from 'react';
+import { Card } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { ChevronUp, ChevronDown } from 'lucide-react';
+
+interface SuggestionCardProps {
+  suggestion: {
+    id: string;
+    title: string;
+    description: string;
+    votes: number;
+    status: string;
+    author: string;
+    date: string;
+  };
+  onVote: (id: string, increment: boolean) => void;
+}
+
+export function SuggestionCard({ suggestion, onVote }: SuggestionCardProps) {
+  return (
+    <Card 
+      key={`suggestion-${suggestion.id}`} 
+      className={`p-6 bg-white/90 backdrop-blur-md shadow-lg hover:shadow-xl transition-all duration-200 ${
+        suggestion.id.includes('eval') ? 'border-l-4 border-[#B784A7]' :
+        suggestion.id.includes('comm') ? 'border-l-4 border-[#77D1F3]' :
+        suggestion.id.includes('report') ? 'border-l-4 border-[#9FD984]' :
+        suggestion.id.includes('agenda') ? 'border-l-4 border-[#FF9EBC]' :
+        'border-l-4 border-[#FFEE7D]'
+      }`}
+    >
+      <div className="flex gap-4">
+        <div className="flex flex-col items-center">
+          <Button 
+            variant="ghost" 
+            size="sm"
+            className="px-2 hover:text-[#FF9633] hover:bg-[#FF9633]/10 transition-all duration-200 rounded-xl group"
+            onClick={() => onVote(suggestion.id, true)}
+          >
+            <ChevronUp className="w-6 h-6 group-hover:scale-110 transition-transform" />
+          </Button>
+          <span className="font-bold text-lg text-[#FF9633]">{suggestion.votes}</span>
+          <Button 
+            variant="ghost" 
+            size="sm"
+            className="px-2 hover:text-[#FF9633] hover:bg-[#FF9633]/10 transition-all duration-200 rounded-xl group"
+            onClick={() => onVote(suggestion.id, false)}
+          >
+            <ChevronDown className="w-6 h-6 group-hover:scale-110 transition-transform" />
+          </Button>
+        </div>
+        
+        <div className="flex-1">
+          <div className="flex items-start justify-between mb-2">
+            <h3 className="font-semibold text-lg text-gray-800">{suggestion.title}</h3>
+            {suggestion.status === 'complété' && (
+              <span className="px-4 py-1.5 text-xs font-medium bg-[#9FD984]/20 text-[#9FD984] rounded-full border border-[#9FD984]/30">
+                Complété
+              </span>
+            )}
+          </div>
+          <p className="text-gray-600 mb-4 leading-relaxed tracking-wide">{suggestion.description}</p>
+          <div className="flex flex-wrap items-center gap-4 text-sm text-gray-500">
+            <span>{suggestion.author}</span>
+            <span>{suggestion.date}</span>
+          </div>
+        </div>
+      </div>
+    </Card>
+  );
+}
\ No newline at end of file
diff --git a/src/pages/suggestiontool b/src/pages/suggestiontool.tsx
similarity index 100%
rename from src/pages/suggestiontool
rename to src/pages/suggestiontool.tsx