diff --git a/TODO.md b/TODO.md
index 3922e6d..23da514 100644
--- a/TODO.md
+++ b/TODO.md
@@ -18,7 +18,7 @@
 - [x] **Icônes agenda et filtres** - Améliorer les icônes de l'agenda et des filtres dans desktop controls (utiliser une lib) <!-- Clock pour échéance, Settings pour filtres, Search visuelle -->
 - [x] **Réunion/tâche design** - Revoir le design des bouton dans dailySectrion : les toggles avoir un compposant ui
 - [x] **Légende calendrier et padding** - Corriger l'espacement et la légende du calendrier dans daily
-- [ ] **EditModal task couleur calendrier** - Problème de couleur en ajout de taches dans tous les icones calendriers; colmler au thème
+- [x] **EditModal task couleur calendrier** - Problème de couleur en ajout de taches dans tous les icones calendriers; colmler au thème
 - [ ] **Weekly deux boutons actualiser** - Corriger la duplication des boutons d'actualisation
 - [ ] **Settings : tag icônes actions** - Icônes trop petites dans les actions des tags
 - [ ] **Settings intégration : icônes** - Problème avec les icônes "Arrêté" et "Actif" : doivent etre les memes
diff --git a/src/components/daily/EditCheckboxModal.tsx b/src/components/daily/EditCheckboxModal.tsx
index c6ea3ab..5511456 100644
--- a/src/components/daily/EditCheckboxModal.tsx
+++ b/src/components/daily/EditCheckboxModal.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { useState, useEffect } from 'react';
+import { CheckSquare2, Calendar } from 'lucide-react';
 import { DailyCheckbox, DailyCheckboxType, Task } from '@/lib/types';
 import { Button } from '@/components/ui/Button';
 import { Input } from '@/components/ui/Input';
@@ -9,8 +10,9 @@ import { TagDisplay } from '@/components/ui/TagDisplay';
 import { Card } from '@/components/ui/Card';
 import { SearchInput } from '@/components/ui/SearchInput';
 import { StatusBadge } from '@/components/ui/StatusBadge';
+import { ToggleButton } from '@/components/ui/ToggleButton';
+import { DateTimeInput } from '@/components/ui/DateTimeInput';
 import { tasksClient } from '@/clients/tasks-client';
-import { formatDateForDateTimeInput, parseDateTimeInput } from '@/lib/date-utils';
 
 interface EditCheckboxModalProps {
   checkbox: DailyCheckbox;
@@ -135,43 +137,38 @@ export function EditCheckboxModal({
             Type
           </label>
           <div className="flex gap-2">
-            <Button
-              type="button"
-              onClick={() => setType('task')}
-              variant="ghost"
-              size="sm"
-              className={`flex items-center gap-2 border-l-4 ${
-                type === 'task' 
-                  ? 'border-l-green-500 bg-green-500/30 text-white font-medium' 
-                  : 'border-l-green-300 hover:border-l-green-400 opacity-70 hover:opacity-90'
-              }`}
-            >
-              ✅ Tâche
-            </Button>
-            <Button
-              type="button"
+            <ToggleButton
               onClick={() => setType('meeting')}
-              variant="ghost"
+              variant="primary"
               size="sm"
-              className={`flex items-center gap-2 border-l-4 ${
-                type === 'meeting' 
-                  ? 'border-l-blue-500 bg-blue-500/30 text-white font-medium' 
-                  : 'border-l-blue-300 hover:border-l-blue-400 opacity-70 hover:opacity-90'
-              }`}
+              isActive={type === 'meeting'}
+              icon={<Calendar size={14} />}
             >
-              🗓️ Réunion
-            </Button>
+              <span className="text-sm">Réunion</span>
+            </ToggleButton>
+            <ToggleButton
+              onClick={() => setType('task')}
+              variant="primary"
+              size="sm"
+              isActive={type === 'task'}
+              icon={<CheckSquare2 size={14} />}
+            >
+              <span className="text-sm">Tâche</span>
+            </ToggleButton>
           </div>
         </div>
 
         {/* Date/Heure */}
-        <Input
-          label="Date/Heure"
-          type="datetime-local"
-          value={formatDateForDateTimeInput(date)}
-          onChange={(e) => setDate(parseDateTimeInput(e.target.value))}
-          disabled={saving}
-        />
+        <div>
+          <label className="block text-sm font-medium text-[var(--foreground)] mb-2">
+            Date/Heure
+          </label>
+          <DateTimeInput
+            value={date}
+            onChange={(newDate) => newDate && setDate(newDate)}
+            disabled={saving}
+          />
+        </div>
 
         {/* Liaison tâche (pour tous les types) */}
         <div>
diff --git a/src/components/forms/CreateTaskForm.tsx b/src/components/forms/CreateTaskForm.tsx
index fda1c94..9baf645 100644
--- a/src/components/forms/CreateTaskForm.tsx
+++ b/src/components/forms/CreateTaskForm.tsx
@@ -5,10 +5,10 @@ import { Modal } from '@/components/ui/Modal';
 import { Button } from '@/components/ui/Button';
 import { Input } from '@/components/ui/Input';
 import { TagInput } from '@/components/ui/TagInput';
+import { DateTimeInput } from '@/components/ui/DateTimeInput';
 import { TaskPriority, TaskStatus } from '@/lib/types';
 import { CreateTaskData } from '@/clients/tasks-client';
 import { getAllStatuses, getAllPriorities } from '@/lib/status-config';
-import { formatDateForDateTimeInput, parseDateTimeInput } from '@/lib/date-utils';
 
 interface CreateTaskFormProps {
   isOpen: boolean;
@@ -149,16 +149,20 @@ export function CreateTaskForm({ isOpen, onClose, onSubmit, loading = false }: C
         </div>
 
         {/* Date d'échéance */}
-        <Input
-          label="Date d'échéance"
-          type="datetime-local"
-          value={formData.dueDate ? formatDateForDateTimeInput(formData.dueDate) : ''}
-          onChange={(e) => setFormData((prev: CreateTaskData) => ({ 
-            ...prev, 
-            dueDate: e.target.value ? parseDateTimeInput(e.target.value) : undefined 
-          }))}
-          disabled={loading}
-        />
+        <div>
+          <label className="block text-sm font-medium text-[var(--foreground)] mb-2">
+            Date d&apos;échéance
+          </label>
+          <DateTimeInput
+            value={formData.dueDate}
+            onChange={(newDate) => setFormData((prev: CreateTaskData) => ({ 
+              ...prev, 
+              dueDate: newDate
+            }))}
+            disabled={loading}
+            placeholder="Sélectionner une date d'échéance..."
+          />
+        </div>
 
         {/* Tags */}
         <div className="space-y-3">
diff --git a/src/components/forms/task/TaskBasicFields.tsx b/src/components/forms/task/TaskBasicFields.tsx
index ecab819..68799fe 100644
--- a/src/components/forms/task/TaskBasicFields.tsx
+++ b/src/components/forms/task/TaskBasicFields.tsx
@@ -1,9 +1,10 @@
 'use client';
 
 import { Input } from '@/components/ui/Input';
+import { DateTimeInput } from '@/components/ui/DateTimeInput';
 import { TaskPriority, TaskStatus } from '@/lib/types';
 import { getAllStatuses, getAllPriorities } from '@/lib/status-config';
-import { ensureDate, formatDateForDateTimeInput } from '@/lib/date-utils';
+import { ensureDate } from '@/lib/date-utils';
 
 interface TaskBasicFieldsProps {
   title: string;
@@ -107,16 +108,17 @@ export function TaskBasicFields({
       </div>
 
       {/* Date d'échéance */}
-      <Input
-        label="Date d'échéance"
-        type="datetime-local"
-        value={(() => {
-          const date = ensureDate(dueDate);
-          return date ? formatDateForDateTimeInput(date) : '';
-        })()}
-        onChange={(e) => onDueDateChange(e.target.value ? new Date(e.target.value) : undefined)}
-        disabled={loading}
-      />
+      <div>
+        <label className="block text-sm font-medium text-[var(--foreground)] mb-2">
+          Date d&apos;échéance
+        </label>
+        <DateTimeInput
+          value={ensureDate(dueDate) ?? undefined}
+          onChange={(newDate) => onDueDateChange(newDate)}
+          disabled={loading}
+          placeholder="Sélectionner une date d'échéance..."
+        />
+      </div>
     </>
   );
 }
diff --git a/src/components/ui/DateTimeInput.tsx b/src/components/ui/DateTimeInput.tsx
index 057964a..a9a1c55 100644
--- a/src/components/ui/DateTimeInput.tsx
+++ b/src/components/ui/DateTimeInput.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import { Calendar } from 'lucide-react';
 import { formatDateForDateTimeInput, parseDateTimeInput } from '@/lib/date-utils';
 
 interface DateTimeInputProps {
@@ -25,14 +26,25 @@ export function DateTimeInput({
   };
 
   return (
-    <input
-      type="datetime-local"
-      value={value ? formatDateForDateTimeInput(value) : ''}
-      onChange={handleChange}
-      onFocus={onFocus}
-      disabled={disabled}
-      placeholder={placeholder}
-      className={`bg-transparent border-none outline-none text-[var(--muted-foreground)] font-mono text-xs flex-shrink min-w-0 ${className}`}
-    />
+    <div className={`relative flex items-center ${className}`}>
+      <Calendar 
+        size={16} 
+        className="absolute left-3 text-[var(--muted-foreground)] pointer-events-none z-10" 
+      />
+      <input
+        type="datetime-local"
+        value={value ? formatDateForDateTimeInput(value) : ''}
+        onChange={handleChange}
+        onFocus={onFocus}
+        disabled={disabled}
+        placeholder={placeholder}
+        className="w-full pl-10 pr-3 py-2 border border-[var(--border)] rounded-md bg-[var(--input)] text-[var(--foreground)] placeholder-[var(--muted-foreground)] focus:outline-none focus:ring-2 focus:ring-[var(--primary)] focus:border-[var(--primary)] disabled:opacity-50 disabled:cursor-not-allowed font-mono text-sm [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-datetime-edit-ampm-field]:hidden [&::-webkit-inner-spin-button]:hidden [&::-webkit-outer-spin-button]:hidden"
+        style={{
+          colorScheme: 'light',
+          WebkitAppearance: 'none',
+          MozAppearance: 'textfield'
+        }}
+      />
+    </div>
   );
 }