diff --git a/app/Http/Requests/TaskCreateRequest.php b/app/Http/Requests/TaskCreateRequest.php
index 489bc70..7170cf9 100644
--- a/app/Http/Requests/TaskCreateRequest.php
+++ b/app/Http/Requests/TaskCreateRequest.php
@@ -15,6 +15,7 @@ public function rules(): array
     {
         return [
             'title' => ['required', 'string', 'max:255'],
+            'description' => ['nullable', 'string'],
             'due_date' => ['nullable', 'date'],
             'column_id' => ['nullable', 'exists:columns,id'],
         ];
diff --git a/app/Http/Requests/TaskUpdateRequest.php b/app/Http/Requests/TaskUpdateRequest.php
index 58ecf7b..3fb1c7e 100644
--- a/app/Http/Requests/TaskUpdateRequest.php
+++ b/app/Http/Requests/TaskUpdateRequest.php
@@ -15,8 +15,8 @@ public function rules(): array
     {
         return [
             'title' => ['sometimes', 'string', 'max:255'],
-            'due_date' => ['sometimes', 'date'],
-            'completed' => ['sometimes', 'boolean'],
+            'description' => ['nullable', 'string', 'max:1000'],
+            'due_date' => ['sometimes', 'nullable', 'date'],
         ];
     }
 }
diff --git a/app/Http/Resources/TaskResource.php b/app/Http/Resources/TaskResource.php
index ca97331..296cc84 100644
--- a/app/Http/Resources/TaskResource.php
+++ b/app/Http/Resources/TaskResource.php
@@ -14,13 +14,17 @@ class TaskResource extends JsonResource
      */
     public function toArray(Request $request): array
     {
+        // Calculate days cleanly or fallback to 0 if null
+        $daysInColumn = $this->column_updated_at ? (int) $this->column_updated_at->diffInDays(now()) : 0;
+
         return [
             'id' => $this->id,
             'team_id' => $this->team_id,
             'column_id' => $this->column_id,
             'order' => $this->order,
             'title' => $this->title,
-            'completed' => (bool)$this->completed,
+            'description' => $this->description,
+            'days_in_column' => $daysInColumn,
             'due_date' => $this->due_date,
             'created_by' => $this->created_by,
             'creator' => $this->whenLoaded('creator', fn () => [
diff --git a/app/Jobs/IncrementTeamCompletedTasks.php b/app/Jobs/IncrementTeamCompletedTasks.php
deleted file mode 100644
index 1c0cb73..0000000
--- a/app/Jobs/IncrementTeamCompletedTasks.php
+++ /dev/null
@@ -1,27 +0,0 @@
-<?php
-
-namespace App\Jobs;
-
-use App\Models\Team;
-use Illuminate\Contracts\Queue\ShouldQueue;
-use Illuminate\Foundation\Queue\Queueable;
-
-class IncrementTeamCompletedTasks implements ShouldQueue
-{
-    use Queueable;
-
-    /**
-     * Create a new job instance.
-     */
-    public function __construct(public int $teamId)
-    {
-    }
-
-    /**
-     * Execute the job.
-     */
-    public function handle(): void
-    {
-        Team::query()->where('id', $this->teamId)->increment('count_completed_tasks');
-    }
-}
diff --git a/app/Models/Task.php b/app/Models/Task.php
index 50374c2..78e0839 100644
--- a/app/Models/Task.php
+++ b/app/Models/Task.php
@@ -16,13 +16,14 @@ class Task extends Model
      * @var list<string>
      */
     protected $fillable = [
-        'title',
-        'due_date',
-        'completed',
         'team_id',
-        'created_by',
         'column_id',
+        'column_updated_at',
         'order',
+        'title',
+        'description',
+        'due_date',
+        'created_by',
     ];
 
     /**
@@ -33,6 +34,7 @@ class Task extends Model
     protected function casts(): array
     {
         return [
+            'column_updated_at' => 'datetime',
             'due_date' => 'datetime',
         ];
     }
diff --git a/app/Services/ColumnService.php b/app/Services/ColumnService.php
index 6c0ddd8..b52e373 100644
--- a/app/Services/ColumnService.php
+++ b/app/Services/ColumnService.php
@@ -4,6 +4,7 @@
 
 use App\Models\Column;
 use App\Models\User;
+use Illuminate\Validation\ValidationException;
 
 class ColumnService
 {
@@ -35,6 +36,12 @@ public function updateColumn(Column $column, array $data): bool
      */
     public function deleteColumn(Column $column): ?bool
     {
+        if ($column->tasks()->exists()) {
+            throw ValidationException::withMessages([
+                'column' => 'Cannot delete a column that contains tasks. Please move or delete the tasks first.',
+            ]);
+        }
+
         return $column->delete();
     }
 }
diff --git a/app/Services/TaskService.php b/app/Services/TaskService.php
index ac35dd2..2ea08c1 100644
--- a/app/Services/TaskService.php
+++ b/app/Services/TaskService.php
@@ -5,7 +5,6 @@
 use App\Models\Task;
 use App\Models\Column;
 use App\Models\User;
-use App\Jobs\IncrementTeamCompletedTasks;
 use Illuminate\Support\Facades\DB;
 
 class TaskService
@@ -31,6 +30,7 @@ public function createTask(array $data, User $user): Task
             'created_by' => $user->id,
             'column_id' => $columnId,
             'order' => $order,
+            'column_updated_at' => now(), // Initialize column timing
         ]));
     }
 
@@ -39,13 +39,7 @@ public function createTask(array $data, User $user): Task
      */
     public function updateTask(Task $task, array $data): bool
     {
-        $updated = $task->update($data);
-
-        if ($updated && isset($data['completed']) && $data['completed']) {
-            IncrementTeamCompletedTasks::dispatch($task->team_id);
-        }
-
-        return $updated;
+        return $task->update($data);
     }
 
     /**
@@ -55,9 +49,10 @@ public function updateSequence(Task $task, int $newColumnId, int $newOrder): voi
     {
         $oldColumnId = $task->column_id;
         $oldOrder = $task->order;
+        $isDifferentColumn = $oldColumnId != $newColumnId;
 
-        DB::transaction(function () use ($task, $newColumnId, $newOrder, $oldColumnId, $oldOrder) {
-            if ($oldColumnId == $newColumnId) {
+        DB::transaction(function () use ($task, $newColumnId, $newOrder, $oldColumnId, $oldOrder, $isDifferentColumn) {
+            if (!$isDifferentColumn) {
                 // Moving within the same column
                 if ($oldOrder < $newOrder) {
                     Task::where('column_id', $newColumnId)
@@ -79,10 +74,17 @@ public function updateSequence(Task $task, int $newColumnId, int $newOrder): voi
                     ->increment('order');
             }
 
-            $task->update([
+            $updateData = [
                 'column_id' => $newColumnId,
                 'order' => $newOrder,
-            ]);
+            ];
+
+            // If it moved to a new column, reset its timer
+            if ($isDifferentColumn) {
+                $updateData['column_updated_at'] = now();
+            }
+
+            $task->update($updateData);
         });
     }
 
diff --git a/database/factories/TeamFactory.php b/database/factories/TeamFactory.php
index 3d9de9f..e443b4e 100644
--- a/database/factories/TeamFactory.php
+++ b/database/factories/TeamFactory.php
@@ -18,7 +18,6 @@ public function definition(): array
     {
         return [
             'name' => fake()->company(),
-            'count_completed_tasks' => 0,
         ];
     }
 }
diff --git a/database/migrations/2026_03_22_183704_refactor_task_completion.php b/database/migrations/2026_03_22_183704_refactor_task_completion.php
new file mode 100644
index 0000000..cb5292e
--- /dev/null
+++ b/database/migrations/2026_03_22_183704_refactor_task_completion.php
@@ -0,0 +1,38 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::table('tasks', function (Blueprint $table) {
+            $table->dropColumn('completed');
+            $table->timestamp('column_updated_at')->nullable();
+        });
+
+        Schema::table('teams', function (Blueprint $table) {
+            $table->dropColumn('count_completed_tasks');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::table('tasks', function (Blueprint $table) {
+            $table->boolean('completed')->default(false);
+            $table->dropColumn('column_updated_at');
+        });
+
+        Schema::table('teams', function (Blueprint $table) {
+            $table->integer('count_completed_tasks')->default(0);
+        });
+    }
+};
diff --git a/database/migrations/2026_03_22_193016_add_description_to_tasks_table.php b/database/migrations/2026_03_22_193016_add_description_to_tasks_table.php
new file mode 100644
index 0000000..fe213b5
--- /dev/null
+++ b/database/migrations/2026_03_22_193016_add_description_to_tasks_table.php
@@ -0,0 +1,28 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::table('tasks', function (Blueprint $table) {
+            $table->text('description')->nullable()->after('title');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::table('tasks', function (Blueprint $table) {
+            $table->dropColumn('description');
+        });
+    }
+};
diff --git a/database/seeders/DatabaseSeeder.php b/database/seeders/DatabaseSeeder.php
index f384d11..4814f83 100644
--- a/database/seeders/DatabaseSeeder.php
+++ b/database/seeders/DatabaseSeeder.php
@@ -2,14 +2,13 @@
 
 namespace Database\Seeders;
 
-use App\Models\Task;
-use App\Models\Team;
+use Illuminate\Database\Seeder;
 use App\Models\User;
+use App\Models\Team;
+use App\Models\Task;
 use App\Models\Column;
 use Illuminate\Support\Str;
-use Illuminate\Database\Seeder;
 use Illuminate\Support\Facades\Hash;
-use Illuminate\Support\Facades\DB;
 
 class DatabaseSeeder extends Seeder
 {
@@ -18,7 +17,7 @@ class DatabaseSeeder extends Seeder
      */
     public function run(): void
     {
-        $teams = Team::factory(3)->create(['count_completed_tasks' => 0]);
+        $teams = Team::factory(3)->create();
 
         $usersPerTeam = [3, 2, 1];
         $userIndex = 1;
@@ -37,17 +36,19 @@ public function run(): void
             $todoColumn = Column::create([
                 'team_id' => $team->id,
                 'name' => 'To Do',
-                'order' => 0,
+                'order' => 1
             ]);
-            $inProgressColumn = Column::create([
+            
+            $progressColumn = Column::create([
                 'team_id' => $team->id,
                 'name' => 'In Progress',
-                'order' => 1,
+                'order' => 2
             ]);
+            
             $doneColumn = Column::create([
                 'team_id' => $team->id,
                 'name' => 'Done',
-                'order' => 2,
+                'order' => 3
             ]);
 
             $teamUsers = User::where('team_id', $team->id)->pluck('id');
@@ -62,14 +63,14 @@ public function run(): void
             $doneOrder = 0;
 
             foreach ($tasks as $task) {
+                // Randomly assign to a column
                 $rand = rand(0, 2);
                 if ($rand === 0) {
-                    $task->update(['column_id' => $todoColumn->id, 'order' => $todoOrder++, 'completed' => false]);
+                    $task->update(['column_id' => $todoColumn->id, 'order' => $todoOrder++, 'column_updated_at' => now()]);
                 } elseif ($rand === 1) {
-                    $task->update(['column_id' => $inProgressColumn->id, 'order' => $progressOrder++, 'completed' => false]);
+                    $task->update(['column_id' => $progressColumn->id, 'order' => $progressOrder++, 'column_updated_at' => now()->subDays(rand(1, 5))]);
                 } else {
-                    $task->update(['column_id' => $doneColumn->id, 'order' => $doneOrder++, 'completed' => true]);
-                    DB::table('teams')->where('id', $team->id)->increment('count_completed_tasks');
+                    $task->update(['column_id' => $doneColumn->id, 'order' => $doneOrder++, 'column_updated_at' => now()->subDays(rand(2, 10))]);
                 }
             }
         }
diff --git a/resources/js/components/tasks/ColumnCreateDialog.vue b/resources/js/components/tasks/ColumnCreateDialog.vue
new file mode 100644
index 0000000..9a15365
--- /dev/null
+++ b/resources/js/components/tasks/ColumnCreateDialog.vue
@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import InputError from '@/components/InputError.vue';
+import { Button } from '@/components/ui/button';
+import {
+    Dialog,
+    DialogContent,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { useForm } from '@inertiajs/vue3';
+import { watch } from 'vue';
+import { toast } from 'vue-sonner';
+
+const isOpen = defineModel<boolean>('open', { default: false });
+
+const form = useForm({
+    name: '',
+});
+
+watch(isOpen, (open) => {
+    if (open) {
+        form.reset();
+        form.clearErrors();
+    }
+});
+
+const submit = () => {
+    form.post('/columns', {
+        preserveScroll: true,
+        onSuccess: () => {
+            isOpen.value = false;
+            toast.success('Column created securely.');
+            form.reset();
+        },
+    });
+};
+</script>
+
+<template>
+    <Dialog v-model:open="isOpen">
+        <DialogContent class="sm:max-w-[425px]">
+            <DialogHeader>
+                <DialogTitle>Create new column</DialogTitle>
+            </DialogHeader>
+            <form @submit.prevent="submit">
+                <div class="grid gap-4 py-4">
+                    <div class="grid gap-2">
+                        <Label for="column-name">Column Name</Label>
+                        <Input
+                            id="column-name"
+                            type="text"
+                            placeholder="e.g. Backlog, Review..."
+                            v-model="form.name"
+                            autofocus
+                        />
+                        <InputError :message="form.errors.name" />
+                    </div>
+                </div>
+                <DialogFooter>
+                    <Button
+                        type="button"
+                        variant="outline"
+                        @click="isOpen = false"
+                    >
+                        Cancel
+                    </Button>
+                    <Button type="submit" :disabled="form.processing">
+                        Create Column
+                    </Button>
+                </DialogFooter>
+            </form>
+        </DialogContent>
+    </Dialog>
+</template>
diff --git a/resources/js/components/tasks/ColumnDeleteDialog.vue b/resources/js/components/tasks/ColumnDeleteDialog.vue
new file mode 100644
index 0000000..61ec04b
--- /dev/null
+++ b/resources/js/components/tasks/ColumnDeleteDialog.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { Button } from '@/components/ui/button';
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from '@/components/ui/dialog';
+import type { Column } from '@/types';
+
+defineProps<{
+    column: Column;
+}>();
+
+const isOpen = defineModel<boolean>('open', { default: false });
+
+const emit = defineEmits<{
+    confirm: [];
+}>();
+</script>
+
+<template>
+    <Dialog v-model:open="isOpen">
+        <DialogContent>
+            <DialogHeader>
+                <DialogTitle>Delete column</DialogTitle>
+                <DialogDescription>
+                    Are you sure you want to delete the "{{ column.name }}" column?
+                    This action cannot be undone.
+                </DialogDescription>
+            </DialogHeader>
+            <DialogFooter>
+                <Button variant="outline" @click="isOpen = false">
+                    Cancel
+                </Button>
+                <Button variant="destructive" @click="emit('confirm')">
+                    Delete
+                </Button>
+            </DialogFooter>
+        </DialogContent>
+    </Dialog>
+</template>
diff --git a/resources/js/components/tasks/KanbanBoard.vue b/resources/js/components/tasks/KanbanBoard.vue
index db20b18..9d25bf5 100644
--- a/resources/js/components/tasks/KanbanBoard.vue
+++ b/resources/js/components/tasks/KanbanBoard.vue
@@ -1,11 +1,10 @@
 <script setup lang="ts">
 import { Button } from '@/components/ui/button';
 import type { Column, Task } from '@/types';
-import { router } from '@inertiajs/vue3';
 import { Plus } from 'lucide-vue-next';
 import { ref, watch } from 'vue';
-import { toast } from 'vue-sonner';
 import KanbanColumn from './KanbanColumn.vue';
+import ColumnCreateDialog from './ColumnCreateDialog.vue';
 
 const props = defineProps<{
     columns: Column[];
@@ -25,19 +24,7 @@ watch(
     { immediate: true, deep: true },
 );
 
-const createColumn = () => {
-    const name = prompt('Enter column name:');
-    if (name) {
-        router.post(
-            '/columns',
-            { name },
-            {
-                preserveScroll: true,
-                onSuccess: () => toast.success('Column created'),
-            },
-        );
-    }
-};
+const isCreateColumnOpen = ref(false);
 </script>
 
 <template>
@@ -51,15 +38,17 @@ const createColumn = () => {
             @edit="emit('edit', $event)"
         />
 
-        <div class="w-[350px] shrink-0 pr-4">
+        <div class="mt-0 shrink-0">
             <Button
                 variant="outline"
-                class="h-12 w-full border-dashed bg-background/50 hover:bg-background/80"
-                @click="createColumn"
+                class="shadow-sm border-dashed text-muted-foreground hover:text-foreground hover:border-foreground transition-all"
+                @click="isCreateColumnOpen = true"
             >
                 <Plus class="mr-2 size-4" />
                 Add Column
             </Button>
         </div>
+
+        <ColumnCreateDialog v-model:open="isCreateColumnOpen" />
     </div>
 </template>
diff --git a/resources/js/components/tasks/KanbanColumn.vue b/resources/js/components/tasks/KanbanColumn.vue
index a05f21f..fb4f2a0 100644
--- a/resources/js/components/tasks/KanbanColumn.vue
+++ b/resources/js/components/tasks/KanbanColumn.vue
@@ -3,6 +3,7 @@ import { ref, watch } from 'vue';
 import draggable from 'vuedraggable';
 import type { Column, Task } from '@/types';
 import TaskItem from './TaskItem.vue';
+import ColumnDeleteDialog from './ColumnDeleteDialog.vue';
 import { Button } from '@/components/ui/button';
 import { Pencil, Trash2 } from 'lucide-vue-next';
 import { router } from '@inertiajs/vue3';
@@ -39,17 +40,18 @@ const saveColumnName = () => {
     }
 };
 
+const isDeleteColumnOpen = ref(false);
+
 const deleteColumn = () => {
-    if (confirm('Are you sure you want to delete this column?')) {
-        router.delete(`/columns/${props.column.id}`, {
-            preserveScroll: true,
-            onSuccess: () => toast.success('Column deleted'),
-            onError: (err) => {
-                if (err.message) toast.error(err.message);
-                else toast.error('Failed to delete column');
-            }
-        });
-    }
+    isDeleteColumnOpen.value = false;
+    router.delete(`/columns/${props.column.id}`, {
+        preserveScroll: true,
+        onSuccess: () => toast.success('Column deleted'),
+        onError: (err) => {
+            if (err.column) toast.error(err.column);
+            else toast.error('Failed to delete column');
+        }
+    });
 };
 
 const onDragChange = (event: any) => {
@@ -88,7 +90,7 @@ const onDragChange = (event: any) => {
                 <Button variant="ghost" size="icon-sm" class="h-6 w-6 text-muted-foreground" @click="isEditingColumn = true">
                     <Pencil class="size-3" />
                 </Button>
-                <Button variant="ghost" size="icon-sm" class="h-6 w-6 text-destructive hover:bg-destructive/10 hover:text-destructive" @click="deleteColumn">
+                <Button variant="ghost" size="icon-sm" class="h-6 w-6 text-destructive hover:bg-destructive/10 hover:text-destructive" @click="isDeleteColumnOpen = true">
                     <Trash2 class="size-3" />
                 </Button>
             </div>
@@ -110,6 +112,12 @@ const onDragChange = (event: any) => {
                 </template>
             </draggable>
         </div>
+
+        <ColumnDeleteDialog 
+            v-model:open="isDeleteColumnOpen" 
+            :column="column"
+            @confirm="deleteColumn" 
+        />
     </div>
 </template>
 
diff --git a/resources/js/components/tasks/TaskCreateDialog.vue b/resources/js/components/tasks/TaskCreateDialog.vue
index 0020956..ae05b68 100644
--- a/resources/js/components/tasks/TaskCreateDialog.vue
+++ b/resources/js/components/tasks/TaskCreateDialog.vue
@@ -24,6 +24,7 @@ const isOpen = ref(false);
 
 const form = useForm<TaskForm>({
     title: '',
+    description: '',
     due_date: '',
 });
 
@@ -67,6 +68,16 @@ const submit = () => {
                     />
                     <InputError :message="form.errors.title" />
                 </div>
+                <div class="grid gap-2">
+                    <Label for="task-description">Description</Label>
+                    <textarea
+                        id="task-description"
+                        class="flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+                        placeholder="Add more details..."
+                        v-model="form.description"
+                    ></textarea>
+                    <InputError :message="form.errors.description" />
+                </div>
                 <div class="grid gap-2">
                     <Label for="task-due-date">Due date</Label>
                     <Input
diff --git a/resources/js/components/tasks/TaskEditDialog.vue b/resources/js/components/tasks/TaskEditDialog.vue
index 9ec248c..cf25fab 100644
--- a/resources/js/components/tasks/TaskEditDialog.vue
+++ b/resources/js/components/tasks/TaskEditDialog.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import InputError from '@/components/InputError.vue';
 import { Button } from '@/components/ui/button';
-import { Checkbox } from '@/components/ui/checkbox';
 import {
     Dialog,
     DialogContent,
@@ -28,8 +27,8 @@ const isOpen = defineModel<boolean>('open', { default: false });
 
 const form = useForm({
     title: '',
+    description: '',
     due_date: '',
-    completed: false,
 });
 
 const submit = () => {
@@ -47,8 +46,8 @@ const submit = () => {
 watch([() => props.task, isOpen], ([task, open]) => {
     if (task && open) {
         form.title = task.title;
-        form.due_date = new Date(task.due_date).toISOString().slice(0, 16);
-        form.completed = Boolean(task.completed);
+        form.description = task.description || '';
+        form.due_date = task.due_date ? new Date(task.due_date).toISOString().slice(0, 16) : '';
         form.clearErrors();
     }
 });
@@ -58,7 +57,7 @@ watch([() => props.task, isOpen], ([task, open]) => {
     <Dialog v-model:open="isOpen">
         <DialogContent>
             <DialogHeader>
-                <DialogTitle>Edit task</DialogTitle>
+                <DialogTitle>Task details</DialogTitle>
                 <DialogDescription> Update the task details </DialogDescription>
             </DialogHeader>
 
@@ -74,6 +73,17 @@ watch([() => props.task, isOpen], ([task, open]) => {
                     <InputError :message="form.errors.title" />
                 </div>
 
+                <div class="grid gap-2">
+                    <Label for="edit-task-description">Description</Label>
+                    <textarea
+                        id="edit-task-description"
+                        class="flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+                        placeholder="Add more details..."
+                        v-model="form.description"
+                    ></textarea>
+                    <InputError :message="form.errors.description" />
+                </div>
+
                 <div class="grid gap-2">
                     <Label for="edit-task-due-date">Due date</Label>
                     <Input
@@ -84,13 +94,6 @@ watch([() => props.task, isOpen], ([task, open]) => {
                     <InputError :message="form.errors.due_date" />
                 </div>
 
-                <div class="flex items-center gap-2">
-                    <Checkbox id="completed" v-model="form.completed" />
-                    <Label for="completed" class="cursor-pointer">
-                        Completed
-                    </Label>
-                </div>
-
                 <DialogFooter>
                     <Button
                         type="button"
diff --git a/resources/js/components/tasks/TaskItem.vue b/resources/js/components/tasks/TaskItem.vue
index d8725a8..fef7686 100644
--- a/resources/js/components/tasks/TaskItem.vue
+++ b/resources/js/components/tasks/TaskItem.vue
@@ -5,15 +5,13 @@ import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
 import { useInitials } from '@/composables/useInitials';
-import { destroy, update } from '@/routes/tasks';
+import { destroy } from '@/routes/tasks';
 import type { Task } from '@/types';
 import { router } from '@inertiajs/vue3';
 import {
+    AlignLeft,
     Calendar,
-    CheckCircle,
-    Circle,
     ClockAlert,
-    Loader,
     Pencil,
     Trash2,
 } from 'lucide-vue-next';
@@ -33,24 +31,7 @@ const { getInitials } = useInitials();
 const showDeleteDialog = ref(false);
 
 const isOverdue = (task: Task) => {
-    return new Date(task.due_date) < new Date() && !task.completed;
-};
-
-const toggleCompleted = () => {
-    router.put(
-        update(props.task.id).url,
-        { completed: !props.task.completed },
-        {
-            preserveScroll: true,
-            onSuccess: () => {
-                toast.success(
-                    props.task.completed
-                        ? 'Task marked as complete'
-                        : 'Task marked as incomplete',
-                );
-            },
-        },
-    );
+    return task.due_date ? new Date(task.due_date) < new Date() : false;
 };
 
 const deleteTask = () => {
@@ -66,97 +47,108 @@ const deleteTask = () => {
 
 <template>
     <Card
-        :class="[
-            'transition-all hover:shadow-md',
-            task.completed && 'opacity-60',
-        ]"
+        @click.stop="emit('edit', task)"
+        class="group relative cursor-pointer border-border transition-all hover:border-primary/40 hover:bg-accent/5 hover:shadow-sm"
     >
-        <CardContent class="flex items-center gap-4 p-4">
-            <button
-                @click="toggleCompleted"
-                class="text-muted-foreground transition-colors hover:text-primary"
-                :title="
-                    task.completed ? 'Mark as incomplete' : 'Mark as completed'
-                "
-            >
-                <CheckCircle
-                    v-if="task.completed"
-                    class="size-5 text-green-500"
-                />
-                <Circle v-else class="size-5" />
-            </button>
-
-            <div class="min-w-0 flex-1">
+        <CardContent class="flex flex-col gap-3 p-3.5">
+            <!-- Header: Title and Actions -->
+            <div class="flex items-start justify-between gap-2">
                 <p
-                    :class="[
-                        'truncate font-medium',
-                        task.completed && 'text-muted-foreground line-through',
-                    ]"
+                    class="line-clamp-2 text-sm leading-snug font-medium"
+                    :title="task.title"
                 >
                     {{ task.title }}
                 </p>
                 <div
-                    class="mt-1 flex items-center gap-2 text-sm text-muted-foreground"
+                    class="flex shrink-0 items-center gap-0.5 opacity-0 transition-opacity group-hover:opacity-100"
                 >
-                    <Calendar class="size-3.5" />
-                    <span
-                        :class="
-                            isOverdue(task) && 'font-medium text-destructive'
+                    <Button
+                        variant="ghost"
+                        size="icon-sm"
+                        class="h-6 w-6 text-muted-foreground hover:bg-accent hover:text-accent-foreground"
+                        @click.stop="emit('edit', task)"
+                        title="Edit task"
+                    >
+                        <Pencil class="size-3" />
+                    </Button>
+                    <Button
+                        variant="ghost"
+                        size="icon-sm"
+                        class="h-6 w-6 text-destructive hover:bg-destructive/10 hover:text-destructive"
+                        @click.stop="showDeleteDialog = true"
+                        title="Delete task"
+                    >
+                        <Trash2 class="size-3" />
+                    </Button>
+                </div>
+            </div>
+
+            <!-- Description Preview -->
+            <div
+                v-if="task.description"
+                class="flex items-center gap-1.5 text-[12px] text-muted-foreground"
+                :title="task.description"
+            >
+                <AlignLeft class="size-3.5 shrink-0" />
+                <p class="truncate leading-relaxed">
+                    {{ task.description }}
+                </p>
+            </div>
+
+            <!-- Footer: Meta tags & Avatar -->
+            <div class="mt-1 flex items-end justify-between gap-2">
+                <!-- Tags -->
+                <div class="flex flex-wrap items-center gap-2">
+                    <Badge
+                        v-if="
+                            task.days_in_column !== null &&
+                            task.days_in_column !== undefined
                         "
+                        variant="secondary"
+                        class="flex items-center gap-1 px-1.5 py-0.5 text-[10px] font-medium"
+                        title="Time in column"
+                    >
+                        <ClockAlert class="size-3 text-muted-foreground" />
+                        <span>{{
+                            task.days_in_column === 0
+                                ? 'Today'
+                                : `${task.days_in_column}d`
+                        }}</span>
+                    </Badge>
+
+                    <Badge
+                        v-if="task.due_date"
+                        :variant="isOverdue(task) ? 'destructive' : 'secondary'"
+                        class="flex items-center gap-1 px-1.5 py-0.5 text-[10px] font-medium"
+                        title="Due date"
                     >
-                        {{
-                            new Date(task.due_date).toLocaleDateString('fr-FR')
-                        }}
-                    </span>
+                        <Calendar
+                            class="size-3"
+                            :class="!isOverdue(task) && 'text-muted-foreground'"
+                        />
+                        <span>{{
+                            new Date(task.due_date).toLocaleDateString(
+                                'en-US',
+                                { day: 'numeric', month: 'short' },
+                            )
+                        }}</span>
+                    </Badge>
                 </div>
-                <span v-if="task.creator">
-                    <!-- Created by -->
-                    <!-- <p class="ml-1 font-semibold">{{ task.creator.name }}</p> -->
-                    <Avatar class="h-8 w-8 overflow-hidden rounded-lg">
+
+                <!-- Avatar -->
+                <div
+                    v-if="task.creator"
+                    class="shrink-0"
+                    :title="`Created by ${task.creator.name}`"
+                >
+                    <Avatar class="h-6 w-6 border border-background shadow-sm">
                         <AvatarFallback
-                            class="rounded-lg text-black dark:text-white"
+                            class="bg-primary/10 text-[9px] font-semibold text-primary"
                         >
                             {{ getInitials(task.creator.name) }}
                         </AvatarFallback>
                     </Avatar>
-                </span>
-            </div>
-
-            <Badge v-if="task.completed" class="gap-1 bg-green-500">
-                <CheckCircle class="size-3" />
-                Done
-            </Badge>
-            <Badge
-                v-else-if="isOverdue(task)"
-                variant="destructive"
-                class="gap-1"
-            >
-                <ClockAlert class="size-3" />
-                Overdue
-            </Badge>
-            <Badge v-else class="gap-1 bg-amber-500">
-                <Loader class="size-3" />
-                Pending
-            </Badge>
-
-            <div class="flex items-center gap-1">
-                <Button
-                    variant="ghost"
-                    size="icon-sm"
-                    @click="emit('edit', task)"
-                    title="Edit task"
-                >
-                    <Pencil class="size-4" />
-                </Button>
-                <Button
-                    variant="ghost"
-                    size="icon-sm"
-                    @click="showDeleteDialog = true"
-                    class="text-destructive hover:text-destructive"
-                    title="Delete task"
-                >
-                    <Trash2 class="size-4" />
-                </Button>
+                </div>
             </div>
         </CardContent>
     </Card>
diff --git a/resources/js/types/index.d.ts b/resources/js/types/index.d.ts
index fe10dd5..6447801 100644
--- a/resources/js/types/index.d.ts
+++ b/resources/js/types/index.d.ts
@@ -44,7 +44,8 @@ export interface Task {
     column_id: number | null;
     order: number;
     title: string;
-    completed: boolean;
+    description?: string | null;
+    days_in_column: number;
     due_date: string;
     created_by: number;
     creator?: {
@@ -63,13 +64,14 @@ export interface Column {
 
 export interface TaskForm {
     title: string;
+    description?: string | null;
     due_date: string;
 }
 
 export interface Team {
     id: number;
     name: string;
-    count_completed_tasks?: number;
+    count_days_in_column_tasks?: number;
 }
 
 export interface PaginationLink {
diff --git a/tests/Feature/ColumnTest.php b/tests/Feature/ColumnTest.php
new file mode 100644
index 0000000..3397c22
--- /dev/null
+++ b/tests/Feature/ColumnTest.php
@@ -0,0 +1,38 @@
+<?php
+
+use App\Models\Column;
+use App\Models\Task;
+use App\Models\Team;
+use App\Models\User;
+
+beforeEach(function () {
+    $this->team = Team::factory()->create();
+    $this->user = User::factory()->create(['team_id' => $this->team->id]);
+    $this->otherTeam = Team::factory()->create();
+});
+
+describe('destroy', function () {
+    test('cannot delete a column containing tasks', function () {
+        $column = Column::create(['team_id' => $this->team->id, 'name' => 'To Do', 'order' => 1]);
+        Task::factory()->create([
+            'team_id' => $this->team->id,
+            'column_id' => $column->id,
+        ]);
+
+        $this->actingAs($this->user)
+            ->delete(route('columns.destroy', $column))
+            ->assertSessionHasErrors('column');
+
+        $this->assertDatabaseHas('columns', ['id' => $column->id]);
+    });
+
+    test('can delete an empty column', function () {
+        $column = Column::create(['team_id' => $this->team->id, 'name' => 'To Do', 'order' => 1]);
+
+        $this->actingAs($this->user)
+            ->delete(route('columns.destroy', $column))
+            ->assertRedirect();
+
+        $this->assertDatabaseMissing('columns', ['id' => $column->id]);
+    });
+});
diff --git a/tests/Feature/IncrementTeamCompletedTasksTest.php b/tests/Feature/IncrementTeamCompletedTasksTest.php
deleted file mode 100644
index 895a127..0000000
--- a/tests/Feature/IncrementTeamCompletedTasksTest.php
+++ /dev/null
@@ -1,35 +0,0 @@
-<?php
-
-use App\Jobs\IncrementTeamCompletedTasks;
-use App\Models\Task;
-use App\Models\Team;
-use App\Models\User;
-use Illuminate\Support\Facades\Queue;
-
-beforeEach(function () {
-    $this->team = Team::factory()->create(['count_completed_tasks' => 0]);
-    $this->user = User::factory()->create(['team_id' => $this->team->id]);
-});
-
-test('job increments team completed tasks counter', function () {
-    $job = new IncrementTeamCompletedTasks($this->team->id);
-    $job->handle();
-
-    expect($this->team->fresh()->count_completed_tasks)->toBe(1);
-});
-
-test('job is dispatched when task is marked as completed', function () {
-    Queue::fake();
-
-    $task = Task::factory()->create([
-        'team_id' => $this->team->id,
-        'completed' => false,
-    ]);
-
-    $this->actingAs($this->user)
-        ->put(route('tasks.update', $task), ['completed' => true]);
-
-    Queue::assertPushed(IncrementTeamCompletedTasks::class, function ($job) {
-        return $job->teamId === $this->team->id;
-    });
-});
diff --git a/tests/Feature/TaskTest.php b/tests/Feature/TaskTest.php
index 2efff13..c23b584 100644
--- a/tests/Feature/TaskTest.php
+++ b/tests/Feature/TaskTest.php
@@ -102,6 +102,22 @@ function ($page) use ($column, $creator) {
             ->post(route('tasks.store'), [])
             ->assertSessionHasErrors(['title']);
     });
+
+    test('can create a task with a description', function () {
+        $taskData = [
+            'title' => 'New task with description',
+            'description' => 'This is a detailed narrative.',
+        ];
+
+        $this->actingAs($this->user)
+            ->post(route('tasks.store'), $taskData)
+            ->assertRedirect(route('tasks.index'));
+
+        $this->assertDatabaseHas('tasks', [
+            'title' => 'New task with description',
+            'description' => 'This is a detailed narrative.',
+        ]);
+    });
 });
 
 describe('update', function () {
@@ -111,14 +127,12 @@ function ($page) use ($column, $creator) {
         $this->actingAs($this->user)
             ->put(route('tasks.update', $task), [
                 'title' => 'Updated title',
-                'completed' => true,
             ])
             ->assertRedirect();
 
         $this->assertDatabaseHas('tasks', [
             'id' => $task->id,
             'title' => 'Updated title',
-            'completed' => true,
         ]);
     });
 
@@ -135,17 +149,19 @@ function ($page) use ($column, $creator) {
         ]);
     });
 
-    test('can toggle completed status', function () {
-        $task = Task::factory()->create([
-            'team_id' => $this->team->id,
-            'completed' => false,
-        ]);
+    test('updates a task description', function () {
+        $task = Task::factory()->create(['team_id' => $this->team->id]);
 
         $this->actingAs($this->user)
-            ->put(route('tasks.update', $task), ['completed' => true])
+            ->put(route('tasks.update', $task), [
+                'description' => 'Updated description detail.',
+            ])
             ->assertRedirect();
 
-        expect($task->fresh()->completed)->toBeTruthy();
+        $this->assertDatabaseHas('tasks', [
+            'id' => $task->id,
+            'description' => 'Updated description detail.',
+        ]);
     });
 });