diff --git a/core/__pycache__/urls.cpython-311.pyc b/core/__pycache__/urls.cpython-311.pyc
index bf27f4c..1918799 100644
Binary files a/core/__pycache__/urls.cpython-311.pyc and b/core/__pycache__/urls.cpython-311.pyc differ
diff --git a/core/__pycache__/views.cpython-311.pyc b/core/__pycache__/views.cpython-311.pyc
index 95959c2..f722d6b 100644
Binary files a/core/__pycache__/views.cpython-311.pyc and b/core/__pycache__/views.cpython-311.pyc differ
diff --git a/core/templates/base.html b/core/templates/base.html
index 354508d..ce24be9 100644
--- a/core/templates/base.html
+++ b/core/templates/base.html
@@ -10,6 +10,7 @@
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Poppins:wght@600&display=swap" rel="stylesheet">
     {% load static %}
     <link rel="stylesheet" href="{% static 'css/custom.css' %}?v={{ timestamp }}">
+    <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
 </head>
 <body>
     <nav class="navbar navbar-expand-lg navbar-light bg-light">
diff --git a/core/templates/core/kanban.html b/core/templates/core/kanban.html
index 20a81de..fb200fc 100644
--- a/core/templates/core/kanban.html
+++ b/core/templates/core/kanban.html
@@ -11,31 +11,116 @@
 </div>
 
 <div class="kanban-board-container">
+    <div class="loader-overlay" style="display: none;">
+        <div class="loader"></div>
+    </div>
+    {% csrf_token %}
     <div class="kanban-board">
         {% for status_value, status_display in status_choices %}
-        <div class="kanban-column">
+        <div class="kanban-column" data-status="{{ status_value }}">
             <h2 class="h5 p-3 bg-light border-bottom">{{ status_display }}</h2>
             <div class="kanban-cards p-3">
-                {% for item in tasks_by_status|get_item:status_value %}
-                <div class="card kanban-card mb-3 shadow-sm">
-                    <div class="card-body">
-                        <h5 class="card-title h6">{{ item.title }}</h5>
-                        <p class="card-text small">{{ item.description|default:""|truncatewords:15 }}</p>
-                        {% if item.tags %}
-                            <div class="tags">
-                                {% for tag in item.tags.split|slice:":3" %}
-                                    <span class="badge bg-secondary">{{ tag }}</span>
-                                {% endfor %}
+                {% with tasks=tasks_by_status|get_item:status_value %}
+                    {% if tasks %}
+                        {% for item in tasks %}
+                        <div class="card kanban-card mb-3 shadow-sm" data-task-id="{{ item.id }}">
+                            <div class="card-body">
+                                <h5 class="card-title h6">{{ item.title }}</h5>
+                                <p class="card-text small">{{ item.description|default:""|truncatewords:15 }}</p>
+                                {% if item.tags %}
+                                    <div class="tags">
+                                        {% for tag in item.tags.split|slice:":3" %}
+                                            <span class="badge bg-secondary">{{ tag }}</span>
+                                        {% endfor %}
+                                    </div>
+                                {% endif %}
                             </div>
-                        {% endif %}
-                    </div>
-                </div>
-                {% empty %}
-                <div class="text-center text-muted p-3">No tasks in this stage.</div>
-                {% endfor %}
+                        </div>
+                        {% endfor %}
+                    {% else %}
+                        <div class="text-center text-muted p-3">No tasks in this stage.</div>
+                    {% endif %}
+                {% endwith %}
             </div>
         </div>
         {% endfor %}
     </div>
 </div>
+
+{% block scripts %}
+<script>
+document.addEventListener('DOMContentLoaded', function () {
+    const columns = document.querySelectorAll('.kanban-cards');
+    columns.forEach(column => {
+        new Sortable(column, {
+            group: 'kanban',
+            animation: 150,
+            onStart: function (evt) {
+                document.querySelector('.loader-overlay').style.display = 'flex';
+            },
+            onEnd: function (evt) {
+                const itemEl = evt.item;
+                const toContainer = evt.to;
+                const fromContainer = evt.from;
+                const taskId = itemEl.dataset.taskId;
+                const newStatus = toContainer.closest('.kanban-column').dataset.status;
+                const oldIndex = evt.oldDraggableIndex;
+
+                // Get CSRF token
+                const csrftoken = document.querySelector('[name=csrfmiddlewaretoken]') ? document.querySelector('[name=csrfmiddlewaretoken]').value : getCookie('csrftoken');
+
+                fetch('/update_task_status/', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'X-CSRFToken': csrftoken
+                    },
+                    body: JSON.stringify({
+                        task_id: taskId,
+                        new_status: newStatus
+                    })
+                })
+                .then(response => {
+                    if (!response.ok) {
+                        throw new Error('Server responded with an error!');
+                    }
+                    return response.json();
+                })
+                .then(data => {
+                    if (!data.success) {
+                        // Revert the move in the UI
+                        fromContainer.insertBefore(itemEl, fromContainer.children[oldIndex]);
+                        alert('Failed to update task status. Please try again.');
+                    }
+                })
+                .catch(error => {
+                    console.error('Error updating task status:', error);
+                    // Revert the move in the UI
+                    fromContainer.insertBefore(itemEl, fromContainer.children[oldIndex]);
+                    alert('An error occurred while updating the task. Please try again.');
+                })
+                .finally(() => {
+                    document.querySelector('.loader-overlay').style.display = 'none';
+                });
+            }
+        });
+    });
+
+    function getCookie(name) {
+        let cookieValue = null;
+        if (document.cookie && document.cookie !== '') {
+            const cookies = document.cookie.split(';');
+            for (let i = 0; i < cookies.length; i++) {
+                const cookie = cookies[i].trim();
+                if (cookie.substring(0, name.length + 1) === (name + '=')) {
+                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
+                    break;
+                }
+            }
+        }
+        return cookieValue;
+    }
+});
+</script>
+{% endblock %}
 {% endblock %}
diff --git a/core/urls.py b/core/urls.py
index 20837c1..eeddee1 100644
--- a/core/urls.py
+++ b/core/urls.py
@@ -1,9 +1,10 @@
 from django.urls import path
 
-from .views import index, article_detail, kanban_board
+from .views import index, article_detail, kanban_board, update_task_status
 
 urlpatterns = [
     path("", index, name="index"),
     path("kanban/", kanban_board, name="kanban_board"),
     path("article/<int:article_id>/", article_detail, name="article_detail"),
+    path('update_task_status/', update_task_status, name='update_task_status'),
 ]
diff --git a/core/views.py b/core/views.py
index 5ee7a4b..a050abd 100644
--- a/core/views.py
+++ b/core/views.py
@@ -1,4 +1,7 @@
-from django.shortcuts import render, redirect
+from django.shortcuts import render, redirect, get_object_or_404
+from django.http import JsonResponse
+from django.views.decorators.http import require_POST
+import json
 from .models import Article, TodoItem
 from .forms import TodoItemForm
 import time
@@ -39,4 +42,19 @@ def kanban_board(request):
 
 def article_detail(request, article_id):
     article = Article.objects.get(pk=article_id)
-    return render(request, "core/article_detail.html", {"article": article})
\ No newline at end of file
+    return render(request, "core/article_detail.html", {"article": article})
+
+@require_POST
+def update_task_status(request):
+    try:
+        data = json.loads(request.body)
+        task_id = data.get('task_id')
+        new_status = data.get('new_status')
+
+        task = get_object_or_404(TodoItem, id=task_id)
+        task.status = new_status
+        task.save()
+
+        return JsonResponse({'success': True})
+    except (json.JSONDecodeError, TypeError, ValueError) as e:
+        return JsonResponse({'success': False, 'error': str(e)}, status=400)
\ No newline at end of file
diff --git a/static/css/custom.css b/static/css/custom.css
index 776daea..73acdd0 100644
--- a/static/css/custom.css
+++ b/static/css/custom.css
@@ -153,3 +153,30 @@ h1, h2, h3, h4, h5, h6 {
 .kanban-card .tags {
     margin-top: 0.5rem;
 }
+
+.loader-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(255, 255, 255, 0.7);
+    z-index: 1000;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.loader {
+    border: 8px solid #f3f3f3;
+    border-top: 8px solid #3498db;
+    border-radius: 50%;
+    width: 60px;
+    height: 60px;
+    animation: spin 2s linear infinite;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
diff --git a/staticfiles/css/custom.css b/staticfiles/css/custom.css
index 776daea..73acdd0 100644
--- a/staticfiles/css/custom.css
+++ b/staticfiles/css/custom.css
@@ -153,3 +153,30 @@ h1, h2, h3, h4, h5, h6 {
 .kanban-card .tags {
     margin-top: 0.5rem;
 }
+
+.loader-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(255, 255, 255, 0.7);
+    z-index: 1000;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.loader {
+    border: 8px solid #f3f3f3;
+    border-top: 8px solid #3498db;
+    border-radius: 50%;
+    width: 60px;
+    height: 60px;
+    animation: spin 2s linear infinite;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
