diff --git a/components/missions/missions-admin-panel.tsx b/components/missions/missions-admin-panel.tsx
index 4e332db9..b19e4451 100644
--- a/components/missions/missions-admin-panel.tsx
+++ b/components/missions/missions-admin-panel.tsx
@@ -22,38 +22,38 @@ import {
 export function MissionsAdminPanel() {
   return (
     <div className="w-full">
-      <Card>
-        <CardHeader>
-          <CardTitle className="text-2xl font-bold">Post a New Project</CardTitle>
+      <Card className="border shadow-sm bg-white">
+        <CardHeader className="bg-white">
+          <CardTitle className="text-2xl font-bold text-gray-800">Post a New Project</CardTitle>
         </CardHeader>
         <CardContent>
           <Tabs defaultValue="general" className="w-full">
-            <TabsList className="mb-4">
-              <TabsTrigger value="general">General</TabsTrigger>
-              <TabsTrigger value="details">Details</TabsTrigger>
-              <TabsTrigger value="attachments">Attachments</TabsTrigger>
-              <TabsTrigger value="skills">Skills</TabsTrigger>
+            <TabsList className="mb-4 bg-gray-100">
+              <TabsTrigger value="general" className="data-[state=active]:bg-white">General</TabsTrigger>
+              <TabsTrigger value="details" className="data-[state=active]:bg-white">Details</TabsTrigger>
+              <TabsTrigger value="attachments" className="data-[state=active]:bg-white">Attachments</TabsTrigger>
+              <TabsTrigger value="skills" className="data-[state=active]:bg-white">Skills</TabsTrigger>
             </TabsList>
             
             <TabsContent value="general" className="space-y-6">
               <div className="space-y-4">
                 <div>
-                  <label className="block text-sm font-medium mb-1">Title</label>
-                  <Input placeholder="Project title" />
+                  <label className="block text-sm font-medium mb-1 text-gray-700">Title</label>
+                  <Input placeholder="Project title" className="bg-white border-gray-300" />
                 </div>
                 
                 <div>
-                  <label className="block text-sm font-medium mb-1">Featured Image</label>
-                  <div className="border border-dashed rounded-md p-6 text-center">
-                    <Button variant="outline" className="mb-2">Browse</Button>
+                  <label className="block text-sm font-medium mb-1 text-gray-700">Featured Image</label>
+                  <div className="border border-dashed rounded-md p-6 text-center bg-gray-50">
+                    <Button variant="outline" className="mb-2 bg-white text-gray-700 border-gray-300 hover:bg-gray-50">Browse</Button>
                   </div>
                 </div>
                 
                 <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                   <div>
-                    <label className="block text-sm font-medium mb-1">Categories</label>
+                    <label className="block text-sm font-medium mb-1 text-gray-700">Categories</label>
                     <Select>
-                      <SelectTrigger>
+                      <SelectTrigger className="bg-white border-gray-300">
                         <SelectValue placeholder="Select category" />
                       </SelectTrigger>
                       <SelectContent>
@@ -66,9 +66,9 @@ export function MissionsAdminPanel() {
                   </div>
                   
                   <div>
-                    <label className="block text-sm font-medium mb-1">Project Type</label>
+                    <label className="block text-sm font-medium mb-1 text-gray-700">Project Type</label>
                     <Select>
-                      <SelectTrigger>
+                      <SelectTrigger className="bg-white border-gray-300">
                         <SelectValue placeholder="Select project type" />
                       </SelectTrigger>
                       <SelectContent>
@@ -81,19 +81,19 @@ export function MissionsAdminPanel() {
                 </div>
                 
                 <div>
-                  <label className="block text-sm font-medium mb-1">Description</label>
-                  <div className="border rounded-md">
+                  <label className="block text-sm font-medium mb-1 text-gray-700">Description</label>
+                  <div className="border rounded-md border-gray-300">
                     <div className="bg-gray-50 p-2 border-b flex items-center space-x-2">
-                      <span>Paragraphe</span>
+                      <span className="text-gray-700">Paragraphe</span>
                       <div className="flex items-center space-x-1">
-                        <Button variant="ghost" size="icon" className="h-8 w-8">B</Button>
-                        <Button variant="ghost" size="icon" className="h-8 w-8">I</Button>
-                        <Button variant="ghost" size="icon" className="h-8 w-8">•</Button>
-                        <Button variant="ghost" size="icon" className="h-8 w-8">1.</Button>
-                        <Button variant="ghost" size="icon" className="h-8 w-8">"</Button>
+                        <Button variant="ghost" size="icon" className="h-8 w-8 text-gray-700">B</Button>
+                        <Button variant="ghost" size="icon" className="h-8 w-8 text-gray-700">I</Button>
+                        <Button variant="ghost" size="icon" className="h-8 w-8 text-gray-700">•</Button>
+                        <Button variant="ghost" size="icon" className="h-8 w-8 text-gray-700">1.</Button>
+                        <Button variant="ghost" size="icon" className="h-8 w-8 text-gray-700">"</Button>
                       </div>
                     </div>
-                    <Textarea className="min-h-[200px] border-0" />
+                    <Textarea className="min-h-[200px] border-0 bg-white" />
                   </div>
                 </div>
               </div>
@@ -103,9 +103,9 @@ export function MissionsAdminPanel() {
               <div className="space-y-4">
                 <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                   <div>
-                    <label className="block text-sm font-medium mb-1">Project location type</label>
+                    <label className="block text-sm font-medium mb-1 text-gray-700">Project location type</label>
                     <Select>
-                      <SelectTrigger>
+                      <SelectTrigger className="bg-white border-gray-300">
                         <SelectValue placeholder="Select location type" />
                       </SelectTrigger>
                       <SelectContent>
@@ -117,9 +117,9 @@ export function MissionsAdminPanel() {
                   </div>
                   
                   <div>
-                    <label className="block text-sm font-medium mb-1">Volunteer Type</label>
+                    <label className="block text-sm font-medium mb-1 text-gray-700">Volunteer Type</label>
                     <Select>
-                      <SelectTrigger>
+                      <SelectTrigger className="bg-white border-gray-300">
                         <SelectValue placeholder="Select volunteer type" />
                       </SelectTrigger>
                       <SelectContent>
@@ -133,9 +133,9 @@ export function MissionsAdminPanel() {
                 
                 <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                   <div>
-                    <label className="block text-sm font-medium mb-1">Duration</label>
+                    <label className="block text-sm font-medium mb-1 text-gray-700">Duration</label>
                     <Select>
-                      <SelectTrigger>
+                      <SelectTrigger className="bg-white border-gray-300">
                         <SelectValue placeholder="Select duration" />
                       </SelectTrigger>
                       <SelectContent>
@@ -147,9 +147,9 @@ export function MissionsAdminPanel() {
                   </div>
                   
                   <div>
-                    <label className="block text-sm font-medium mb-1">Experience</label>
+                    <label className="block text-sm font-medium mb-1 text-gray-700">Experience</label>
                     <Select>
-                      <SelectTrigger>
+                      <SelectTrigger className="bg-white border-gray-300">
                         <SelectValue placeholder="Select required experience" />
                       </SelectTrigger>
                       <SelectContent>
@@ -163,14 +163,14 @@ export function MissionsAdminPanel() {
                 
                 <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                   <div>
-                    <label className="block text-sm font-medium mb-1">Friendly Address</label>
-                    <Input placeholder="Enter address" />
+                    <label className="block text-sm font-medium mb-1 text-gray-700">Friendly Address</label>
+                    <Input placeholder="Enter address" className="bg-white border-gray-300" />
                   </div>
                   
                   <div>
-                    <label className="block text-sm font-medium mb-1">Location</label>
+                    <label className="block text-sm font-medium mb-1 text-gray-700">Location</label>
                     <Select>
-                      <SelectTrigger>
+                      <SelectTrigger className="bg-white border-gray-300">
                         <SelectValue placeholder="Select %s" />
                       </SelectTrigger>
                       <SelectContent>
@@ -184,9 +184,9 @@ export function MissionsAdminPanel() {
                 
                 <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                   <div>
-                    <label className="block text-sm font-medium mb-1">Language</label>
+                    <label className="block text-sm font-medium mb-1 text-gray-700">Language</label>
                     <Select>
-                      <SelectTrigger>
+                      <SelectTrigger className="bg-white border-gray-300">
                         <SelectValue placeholder="Select language" />
                       </SelectTrigger>
                       <SelectContent>
@@ -198,9 +198,9 @@ export function MissionsAdminPanel() {
                   </div>
                   
                   <div>
-                    <label className="block text-sm font-medium mb-1">Level</label>
+                    <label className="block text-sm font-medium mb-1 text-gray-700">Level</label>
                     <Select>
-                      <SelectTrigger>
+                      <SelectTrigger className="bg-white border-gray-300">
                         <SelectValue placeholder="Select level" />
                       </SelectTrigger>
                       <SelectContent>
@@ -213,9 +213,9 @@ export function MissionsAdminPanel() {
                 </div>
                 
                 <div>
-                  <label className="block text-sm font-medium mb-1">English Level</label>
+                  <label className="block text-sm font-medium mb-1 text-gray-700">English Level</label>
                   <Select>
-                    <SelectTrigger>
+                    <SelectTrigger className="bg-white border-gray-300">
                       <SelectValue placeholder="Select English level" />
                     </SelectTrigger>
                     <SelectContent>
@@ -232,9 +232,9 @@ export function MissionsAdminPanel() {
             
             <TabsContent value="attachments" className="space-y-6">
               <div>
-                <label className="block text-sm font-medium mb-1">Attachments</label>
-                <div className="border border-dashed rounded-md p-6 text-center">
-                  <Button variant="outline" className="mb-2">Browse</Button>
+                <label className="block text-sm font-medium mb-1 text-gray-700">Attachments</label>
+                <div className="border border-dashed rounded-md p-6 text-center bg-gray-50">
+                  <Button variant="outline" className="mb-2 bg-white text-gray-700 border-gray-300 hover:bg-gray-50">Browse</Button>
                   <p className="text-sm text-gray-500">Upload file .pdf, .doc, .docx</p>
                 </div>
               </div>
@@ -243,59 +243,59 @@ export function MissionsAdminPanel() {
             <TabsContent value="skills" className="space-y-6">
               <div>
                 <div className="flex justify-between mb-4">
-                  <h3 className="text-lg font-medium">Skills</h3>
-                  <Button variant="outline" size="sm">Select / Deselect All</Button>
+                  <h3 className="text-lg font-medium text-gray-700">Skills</h3>
+                  <Button variant="outline" size="sm" className="bg-white text-gray-700 border-gray-300 hover:bg-gray-50">Select / Deselect All</Button>
                 </div>
                 
                 <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                   <div className="flex items-center space-x-2">
-                    <Checkbox id="photoshop" />
-                    <label htmlFor="photoshop" className="text-sm">Adobe Photoshop</label>
+                    <Checkbox id="photoshop" className="border-gray-300" />
+                    <label htmlFor="photoshop" className="text-sm text-gray-700">Adobe Photoshop</label>
                   </div>
                   
                   <div className="flex items-center space-x-2">
-                    <Checkbox id="xd" />
-                    <label htmlFor="xd" className="text-sm">Adobe XD</label>
+                    <Checkbox id="xd" className="border-gray-300" />
+                    <label htmlFor="xd" className="text-sm text-gray-700">Adobe XD</label>
                   </div>
                   
                   <div className="flex items-center space-x-2">
-                    <Checkbox id="android" />
-                    <label htmlFor="android" className="text-sm">Android Developer</label>
+                    <Checkbox id="android" className="border-gray-300" />
+                    <label htmlFor="android" className="text-sm text-gray-700">Android Developer</label>
                   </div>
                   
                   <div className="flex items-center space-x-2">
-                    <Checkbox id="artist" />
-                    <label htmlFor="artist" className="text-sm">Artist</label>
+                    <Checkbox id="artist" className="border-gray-300" />
+                    <label htmlFor="artist" className="text-sm text-gray-700">Artist</label>
                   </div>
                   
                   <div className="flex items-center space-x-2">
-                    <Checkbox id="computer" />
-                    <label htmlFor="computer" className="text-sm">Computer</label>
+                    <Checkbox id="computer" className="border-gray-300" />
+                    <label htmlFor="computer" className="text-sm text-gray-700">Computer</label>
                   </div>
                   
                   <div className="flex items-center space-x-2">
-                    <Checkbox id="developer" />
-                    <label htmlFor="developer" className="text-sm">Developer</label>
+                    <Checkbox id="developer" className="border-gray-300" />
+                    <label htmlFor="developer" className="text-sm text-gray-700">Developer</label>
                   </div>
                   
                   <div className="flex items-center space-x-2">
-                    <Checkbox id="frontend" />
-                    <label htmlFor="frontend" className="text-sm">Front end Developer</label>
+                    <Checkbox id="frontend" className="border-gray-300" />
+                    <label htmlFor="frontend" className="text-sm text-gray-700">Front end Developer</label>
                   </div>
                   
                   <div className="flex items-center space-x-2">
-                    <Checkbox id="ios" />
-                    <label htmlFor="ios" className="text-sm">iOS Developer</label>
+                    <Checkbox id="ios" className="border-gray-300" />
+                    <label htmlFor="ios" className="text-sm text-gray-700">iOS Developer</label>
                   </div>
                   
                   <div className="flex items-center space-x-2">
-                    <Checkbox id="support" />
-                    <label htmlFor="support" className="text-sm">Support Agent</label>
+                    <Checkbox id="support" className="border-gray-300" />
+                    <label htmlFor="support" className="text-sm text-gray-700">Support Agent</label>
                   </div>
                   
                   <div className="flex items-center space-x-2">
-                    <Checkbox id="writer" />
-                    <label htmlFor="writer" className="text-sm">Writer</label>
+                    <Checkbox id="writer" className="border-gray-300" />
+                    <label htmlFor="writer" className="text-sm text-gray-700">Writer</label>
                   </div>
                 </div>
               </div>