diff --git a/client/src/components/board/KanbanColumn.jsx b/client/src/components/board/KanbanColumn.jsx
index bbef9ee..0e8b481 100644
--- a/client/src/components/board/KanbanColumn.jsx
+++ b/client/src/components/board/KanbanColumn.jsx
@@ -99,7 +99,7 @@ const KanbanColumn = ({
           >
             {/* Create Task Form */}
             {showCreateForm && (
-              <div className="mb-4">
+              <div className="mb-4 animate-in slide-in-from-top duration-200">
                 <TaskCreateForm
                   onSubmit={handleCreateTask}
                   onCancel={() => setShowCreateForm(false)}
diff --git a/client/src/components/board/TaskCard.jsx b/client/src/components/board/TaskCard.jsx
index 3d84ee3..37da507 100644
--- a/client/src/components/board/TaskCard.jsx
+++ b/client/src/components/board/TaskCard.jsx
@@ -12,10 +12,12 @@ import {
 } from 'lucide-react';
 import { Avatar } from '../common';
 import TaskEditModal from '../common/TaskEditModal';
+import ConfirmDialog from '../common/ConfirmDialog';
 
 const TaskCard = ({ task, onUpdate, onDelete, isDragging }) => {
   const [showMenu, setShowMenu] = useState(false);
   const [showEditModal, setShowEditModal] = useState(false);
+  const [showConfirmDialog, setShowConfirmDialog] = useState(false);
   const menuRef = useRef(null);
 
   // Close menu when clicking outside
@@ -48,13 +50,21 @@ const TaskCard = ({ task, onUpdate, onDelete, isDragging }) => {
     }
   };
 
-  const formatDate = (date) => {
+  const formatDate = (date, taskStatus) => {
     if (!date) return null;
     const taskDate = new Date(date);
     const today = new Date();
     const diffTime = taskDate - today;
     const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
 
+    // Don't show overdue messages for completed tasks
+    if (taskStatus === 'completed') {
+      return { 
+        text: `Completed ${taskDate.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}`, 
+        color: 'text-green-600' 
+      };
+    }
+
     if (diffDays < 0) {
       return { text: `${Math.abs(diffDays)}d overdue`, color: 'text-red-600' };
     } else if (diffDays === 0) {
@@ -71,7 +81,7 @@ const TaskCard = ({ task, onUpdate, onDelete, isDragging }) => {
     }
   };
 
-  const dueDateInfo = formatDate(task.dueDate);
+  const dueDateInfo = formatDate(task.dueDate, task.status);
 
   const handleEdit = () => {
     setShowEditModal(true);
@@ -79,12 +89,19 @@ const TaskCard = ({ task, onUpdate, onDelete, isDragging }) => {
   };
 
   const handleDelete = () => {
-    if (window.confirm('Are you sure you want to delete this task?')) {
-      onDelete(task._id);
-    }
+    setShowConfirmDialog(true);
     setShowMenu(false);
   };
 
+  const confirmDelete = () => {
+    onDelete(task._id);
+    setShowConfirmDialog(false);
+  };
+
+  const cancelDelete = () => {
+    setShowConfirmDialog(false);
+  };
+
   const handleSaveEdit = async (updatedData) => {
     try {
       await onUpdate(task._id, updatedData);
@@ -171,58 +188,66 @@ const TaskCard = ({ task, onUpdate, onDelete, isDragging }) => {
       )}
 
       {/* Metadata */}
-      <div className="flex items-center justify-between">
-        <div className="flex items-center space-x-2">
-          {/* Priority */}
-          {task.priority && (
-            <span className={`inline-flex items-center px-2 py-1 text-xs font-medium rounded ${getPriorityColor(task.priority)}`}>
-              <Flag className="h-3 w-3 mr-1" />
-              {task.priority}
-            </span>
-          )}
-
-          {/* Due Date */}
-          {dueDateInfo && (
-            <span className={`inline-flex items-center text-xs ${dueDateInfo.color}`}>
-              <Clock className="h-3 w-3 mr-1" />
-              {dueDateInfo.text}
-            </span>
-          )}
-        </div>
+      <div className="space-y-2">
+        {/* Priority and Due Date Row */}
+        <div className="flex items-center justify-between flex-wrap gap-2">
+          <div className="flex items-center space-x-2 flex-wrap">
+            {/* Priority */}
+            {task.priority && (
+              <span className={`inline-flex items-center px-2 py-1 text-xs font-medium rounded ${getPriorityColor(task.priority)}`}>
+                <Flag className="h-3 w-3 mr-1" />
+                {task.priority}
+              </span>
+            )}
 
-        <div className="flex items-center space-x-2">
-          {/* Comments Count */}
-          {task.commentsCount > 0 && (
-            <span className="inline-flex items-center text-xs text-gray-500">
-              <MessageSquare className="h-3 w-3 mr-1" />
-              {task.commentsCount}
-            </span>
-          )}
-
-          {/* Attachments Count */}
-          {task.attachmentsCount > 0 && (
-            <span className="inline-flex items-center text-xs text-gray-500">
-              <Paperclip className="h-3 w-3 mr-1" />
-              {task.attachmentsCount}
-            </span>
-          )}
+            {/* Due Date */}
+            {dueDateInfo && (
+              <span className={`inline-flex items-center text-xs ${dueDateInfo.color} whitespace-nowrap`}>
+                <Clock className="h-3 w-3 mr-1" />
+                {dueDateInfo.text}
+              </span>
+            )}
+          </div>
 
           {/* Assignee Avatar */}
-          {task.assignedTo && (
-            <Avatar 
-              user={task.assignedTo} 
-              size="xs" 
-              showOnlineStatus={false}
-            />
-          )}
-          {!task.assignedTo && task.assignee && (
-            <Avatar 
-              user={task.assignee} 
-              size="xs" 
-              showOnlineStatus={false}
-            />
-          )}
+          <div className="flex-shrink-0">
+            {task.assignedTo && (
+              <Avatar 
+                user={task.assignedTo} 
+                size="xs" 
+                showOnlineStatus={false}
+              />
+            )}
+            {!task.assignedTo && task.assignee && (
+              <Avatar 
+                user={task.assignee} 
+                size="xs" 
+                showOnlineStatus={false}
+              />
+            )}
+          </div>
         </div>
+
+        {/* Comments and Attachments Row */}
+        {(task.commentsCount > 0 || task.attachmentsCount > 0) && (
+          <div className="flex items-center space-x-3">
+            {/* Comments Count */}
+            {task.commentsCount > 0 && (
+              <span className="inline-flex items-center text-xs text-gray-500">
+                <MessageSquare className="h-3 w-3 mr-1" />
+                {task.commentsCount}
+              </span>
+            )}
+
+            {/* Attachments Count */}
+            {task.attachmentsCount > 0 && (
+              <span className="inline-flex items-center text-xs text-gray-500">
+                <Paperclip className="h-3 w-3 mr-1" />
+                {task.attachmentsCount}
+              </span>
+            )}
+          </div>
+        )}
       </div>
 
       {/* Edit Modal */}
@@ -232,6 +257,17 @@ const TaskCard = ({ task, onUpdate, onDelete, isDragging }) => {
         task={task}
         onSave={handleSaveEdit}
       />
+
+      {/* Delete Confirmation Dialog */}
+      <ConfirmDialog
+        isOpen={showConfirmDialog}
+        onClose={cancelDelete}
+        onConfirm={confirmDelete}
+        title="Delete Task"
+        message={`Are you sure you want to delete "${task.title}"? This action cannot be undone.`}
+        confirmText="Delete"
+        type="danger"
+      />
     </div>
   );
 };
diff --git a/client/src/components/board/TaskCreateForm.jsx b/client/src/components/board/TaskCreateForm.jsx
index ec8283e..856a0e3 100644
--- a/client/src/components/board/TaskCreateForm.jsx
+++ b/client/src/components/board/TaskCreateForm.jsx
@@ -81,102 +81,119 @@ const TaskCreateForm = ({ onSubmit, onCancel }) => {
   };
 
   return (
-    <form onSubmit={handleSubmit} className="bg-white rounded-lg border border-gray-200 p-4 shadow-sm">
-      <div className="space-y-4">
-        {/* Title */}
-        <Input
-          placeholder="Task title..."
-          value={formData.title}
-          onChange={(e) => handleChange('title', e.target.value)}
-          autoFocus
-          required
-          className="border-0 shadow-none p-0 text-sm font-medium placeholder-gray-400 focus:ring-0"
-        />
-
-        {/* Description */}
-        <Textarea
-          placeholder="Add a description..."
-          value={formData.description}
-          onChange={(e) => handleChange('description', e.target.value)}
-          rows={2}
-          className="border-0 shadow-none p-0 text-sm placeholder-gray-400 focus:ring-0 resize-none"
-        />
-
-        {/* Metadata Row */}
-        <div className="flex items-center space-x-3 pt-2 border-t border-gray-100">
-          {/* Priority */}
-          <div className="flex items-center space-x-2">
-            <Flag className="h-4 w-4 text-gray-400" />
-            <Select
-              value={formData.priority}
-              onChange={(e) => handleChange('priority', e.target.value)}
-              className="border-0 shadow-none p-0 text-xs focus:ring-0"
-            >
-              {priorityOptions.map(option => (
-                <option key={option.value} value={option.value}>
-                  {option.label}
-                </option>
-              ))}
-            </Select>
-          </div>
-
-          {/* Due Date */}
-          <div className="flex items-center space-x-2">
-            <Calendar className="h-4 w-4 text-gray-400" />
-            <input
-              type="date"
-              value={formData.dueDate}
-              onChange={(e) => handleChange('dueDate', e.target.value)}
-              className="border-0 shadow-none p-0 text-xs focus:ring-0 text-gray-600"
+    <div className="bg-white rounded-lg border border-gray-200 shadow-sm">
+      <form onSubmit={handleSubmit} className="p-4">
+        <div className="space-y-4">
+          {/* Title */}
+          <div>
+            <Input
+              placeholder="Task title..."
+              value={formData.title}
+              onChange={(e) => handleChange('title', e.target.value)}
+              autoFocus
+              required
+              className="w-full border-0 shadow-none p-0 text-base font-medium placeholder-gray-400 focus:ring-0 bg-transparent"
             />
           </div>
 
-          {/* Assignee */}
-          <div className="flex items-center space-x-2">
-            <User className="h-4 w-4 text-gray-400" />
-            <Select
-              value={formData.assignedTo}
-              onChange={(e) => handleChange('assignedTo', e.target.value)}
-              className="border-0 shadow-none p-0 text-xs focus:ring-0"
-            >
-              <option value="">Unassigned</option>
-              {users.map(user => (
-                <option key={user._id} value={user._id}>
-                  {user.name || user.email}
-                </option>
-              ))}
-            </Select>
+          {/* Description */}
+          <div>
+            <Textarea
+              placeholder="Add a description..."
+              value={formData.description}
+              onChange={(e) => handleChange('description', e.target.value)}
+              rows={3}
+              className="w-full border-0 shadow-none p-0 text-sm placeholder-gray-400 focus:ring-0 resize-none bg-transparent"
+            />
           </div>
-        </div>
 
-        {/* Actions */}
-        <div className="flex items-center justify-between pt-2">
-          <div className="flex items-center space-x-2">
-            <Button
-              type="submit"
-              size="sm"
-              disabled={!formData.title.trim() || loading}
-              className="h-8"
-            >
-              {loading ? 'Creating...' : 'Add Task'}
-            </Button>
-            <Button
-              type="button"
-              variant="ghost"
-              size="sm"
-              onClick={onCancel}
-              className="h-8"
-            >
-              Cancel
-            </Button>
+          {/* Metadata Section */}
+          <div className="pt-3 border-t border-gray-100">
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
+              {/* Priority */}
+              <div className="flex items-center space-x-2 min-w-0">
+                <Flag className="h-4 w-4 text-gray-400 flex-shrink-0" />
+                <div className="flex-1 min-w-0">
+                  <label className="block text-xs text-gray-500 mb-1">Priority</label>
+                  <Select
+                    value={formData.priority}
+                    onChange={(e) => handleChange('priority', e.target.value)}
+                    className="w-full text-xs border border-gray-200 rounded-md py-1 px-2 focus:ring-1 focus:ring-blue-500 focus:border-blue-500"
+                  >
+                    {priorityOptions.map(option => (
+                      <option key={option.value} value={option.value}>
+                        {option.label}
+                      </option>
+                    ))}
+                  </Select>
+                </div>
+              </div>
+
+              {/* Due Date */}
+              <div className="flex items-center space-x-2 min-w-0">
+                <Calendar className="h-4 w-4 text-gray-400 flex-shrink-0" />
+                <div className="flex-1 min-w-0">
+                  <label className="block text-xs text-gray-500 mb-1">Due Date</label>
+                  <input
+                    type="date"
+                    value={formData.dueDate}
+                    onChange={(e) => handleChange('dueDate', e.target.value)}
+                    className="w-full text-xs border border-gray-200 rounded-md py-1 px-2 focus:ring-1 focus:ring-blue-500 focus:border-blue-500 text-gray-700"
+                  />
+                </div>
+              </div>
+
+              {/* Assignee */}
+              <div className="flex items-center space-x-2 min-w-0 sm:col-span-2 lg:col-span-1">
+                <User className="h-4 w-4 text-gray-400 flex-shrink-0" />
+                <div className="flex-1 min-w-0">
+                  <label className="block text-xs text-gray-500 mb-1">Assignee</label>
+                  <Select
+                    value={formData.assignedTo}
+                    onChange={(e) => handleChange('assignedTo', e.target.value)}
+                    className="w-full text-xs border border-gray-200 rounded-md py-1 px-2 focus:ring-1 focus:ring-blue-500 focus:border-blue-500"
+                  >
+                    <option value="">Unassigned</option>
+                    {users.map(user => (
+                      <option key={user._id} value={user._id}>
+                        {user.name || user.email}
+                      </option>
+                    ))}
+                  </Select>
+                </div>
+              </div>
+            </div>
           </div>
 
-          <div className="text-xs text-gray-500">
-            Press Enter to save
+          {/* Actions */}
+          <div className="flex items-center justify-between pt-4 border-t border-gray-100">
+            <div className="flex items-center space-x-2">
+              <Button
+                type="submit"
+                size="sm"
+                disabled={!formData.title.trim() || loading}
+                className="px-4 py-2 text-sm font-medium"
+              >
+                {loading ? 'Creating...' : 'Add Task'}
+              </Button>
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                onClick={onCancel}
+                className="px-4 py-2 text-sm font-medium"
+              >
+                Cancel
+              </Button>
+            </div>
+
+            <div className="text-xs text-gray-500 hidden sm:block">
+              Press Enter to save
+            </div>
           </div>
         </div>
-      </div>
-    </form>
+      </form>
+    </div>
   );
 };
 
diff --git a/client/src/pages/Projects.jsx b/client/src/pages/Projects.jsx
index b0994d8..7ea8a57 100644
--- a/client/src/pages/Projects.jsx
+++ b/client/src/pages/Projects.jsx
@@ -3,6 +3,7 @@ import { Link } from 'react-router-dom';
 import { projectService } from '../services/projectService';
 import Layout from '../components/layout/Layout';
 import ProjectModal from '../components/projects/ProjectModal';
+import ConfirmDialog from '../components/common/ConfirmDialog';
 import toast from 'react-hot-toast';
 import {
   Plus,
@@ -30,6 +31,8 @@ const Projects = () => {
   const [viewMode, setViewMode] = useState('grid'); // 'grid' or 'list'
   const [showProjectModal, setShowProjectModal] = useState(false);
   const [selectedProject, setSelectedProject] = useState(null);
+  const [showConfirmDialog, setShowConfirmDialog] = useState(false);
+  const [projectToDelete, setProjectToDelete] = useState(null);
 
   useEffect(() => {
     fetchProjects();
@@ -82,20 +85,32 @@ const Projects = () => {
     }
   };
 
-  const handleDeleteProject = async (projectId) => {
-    if (!window.confirm('Are you sure you want to delete this project?')) {
-      return;
-    }
+  const handleDeleteProject = (projectId) => {
+    const project = projects.find(p => p._id === projectId);
+    setProjectToDelete(project);
+    setShowConfirmDialog(true);
+  };
+
+  const confirmDeleteProject = async () => {
+    if (!projectToDelete) return;
 
     try {
-      await projectService.deleteProject(projectId);
-      setProjects(prev => prev.filter(p => p._id !== projectId));
+      await projectService.deleteProject(projectToDelete._id);
+      setProjects(prev => prev.filter(p => p._id !== projectToDelete._id));
       toast.success('Project deleted successfully');
     } catch (error) {
       toast.error(error.response?.data?.message || 'Failed to delete project');
+    } finally {
+      setShowConfirmDialog(false);
+      setProjectToDelete(null);
     }
   };
 
+  const cancelDeleteProject = () => {
+    setShowConfirmDialog(false);
+    setProjectToDelete(null);
+  };
+
   const filterProjects = () => {
     let filtered = [...projects];
 
@@ -459,6 +474,17 @@ const Projects = () => {
         project={selectedProject}
         onSave={handleSaveProject}
       />
+
+      {/* Delete Confirmation Dialog */}
+      <ConfirmDialog
+        isOpen={showConfirmDialog}
+        onClose={cancelDeleteProject}
+        onConfirm={confirmDeleteProject}
+        title="Delete Project"
+        message={`Are you sure you want to delete "${projectToDelete?.name}"? This action cannot be undone and will delete all associated tasks.`}
+        confirmText="Delete"
+        type="danger"
+      />
     </Layout>
   );
 };