diff --git a/recruitment/static/pipeline/pipelineDrag.js b/recruitment/static/pipeline/pipelineDrag.js
index c40e9db50..15919a422 100644
--- a/recruitment/static/pipeline/pipelineDrag.js
+++ b/recruitment/static/pipeline/pipelineDrag.js
@@ -61,61 +61,62 @@ function stageSequenceGet(stage) {
     },
   });
 }
-$(".stage").mousedown(function () {
-  window["stageSequence"] = $(this).attr("data-stage-sequence");
-  window["recruitmentId"] = $(this).attr("data-recruitment-id");
-  $(".stage").each(function (i, obj) {
-    if (recruitmentId == $(obj).attr("data-recruitment-id")) {
-      window["stages"].push($(obj).attr("data-stage-id"));
-      window["oldSequences"].push($(obj).attr("data-stage-sequence"));
-    }
-  });
-});
-
-$(".stage").mouseup(function () {
-  var newSequences = [];
-  setTimeout(() => {
-    stageSequenceGet($(this));
-  }, 0);
-  $(".stage").each(function (i, obj) {
-    if (
-      recruitmentId == $(obj).attr("data-recruitment-id") ||
-      $(obj).attr("data-recruitment-id") == undefined
-    ) {
-      newSequences.push($(obj).attr("data-stage-sequence"));
-      if ($(obj).attr("data-recruitment-id") != undefined) {
-        window["elements"].push(obj);
+$(document).ready(function () {
+  $(".stage").mousedown(function () {
+    window["stageSequence"] = $(this).attr("data-stage-sequence");
+    window["recruitmentId"] = $(this).attr("data-recruitment-id");
+    $(".stage").each(function (i, obj) {
+      if (recruitmentId == $(obj).attr("data-recruitment-id")) {
+        window["stages"].push($(obj).attr("data-stage-id"));
+        window["oldSequences"].push($(obj).attr("data-stage-sequence"));
       }
-    }
+    });
   });
 
-  if (newSequences.includes(undefined)) {
-    var newSequences = newSequences.filter((e) => e !== stageSequence);
-    var newSequences = newSequences.map((elem) =>
-      elem === undefined ? stageSequence : elem
-    );
-  }
-
-  oldSequences = JSON.stringify(oldSequences);
-  stages = JSON.stringify(stages);
-
-  elements.forEach(function (element) {
-    for (let index = 0; index < newSequences.length; index++) {
-      const sequence = newSequences[index];
-      if (sequence == $(element).attr("data-stage-sequence")) {
-        $(element).attr("data-stage-sequence", `${index + 1}`);
-        return;
+  $(".stage").mouseup(function () {
+    var newSequences = [];
+    setTimeout(() => {
+      stageSequenceGet($(this));
+    }, 0);
+    $(".stage").each(function (i, obj) {
+      if (
+        recruitmentId == $(obj).attr("data-recruitment-id") ||
+        $(obj).attr("data-recruitment-id") == undefined
+      ) {
+        newSequences.push($(obj).attr("data-stage-sequence"));
+        if ($(obj).attr("data-recruitment-id") != undefined) {
+          window["elements"].push(obj);
+        }
       }
+    });
+
+    if (newSequences.includes(undefined)) {
+      var newSequences = newSequences.filter((e) => e !== stageSequence);
+      var newSequences = newSequences.map((elem) =>
+        elem === undefined ? stageSequence : elem
+      );
     }
+
+    oldSequences = JSON.stringify(oldSequences);
+    stages = JSON.stringify(stages);
+
+    elements.forEach(function (element) {
+      for (let index = 0; index < newSequences.length; index++) {
+        const sequence = newSequences[index];
+        if (sequence == $(element).attr("data-stage-sequence")) {
+          $(element).attr("data-stage-sequence", `${index + 1}`);
+          return;
+        }
+      }
+    });
+
+    window["stageSequence"] = null;
+    window["recruitmentId"] = null;
+    window["oldSequences"] = [];
+    window["elements"] = [];
+    window["stages"] = [];
   });
-
-  window["stageSequence"] = null;
-  window["recruitmentId"] = null;
-  window["oldSequences"] = [];
-  window["elements"] = [];
-  window["stages"] = [];
-});
-
+})
 function countSequence(letmessage=true) {
   let childs = $(".change-cand");
   let data = {};
diff --git a/recruitment/templates/pipeline/kanban_components/kanban_stage_components.html b/recruitment/templates/pipeline/kanban_components/kanban_stage_components.html
index 65217827d..18d516cfd 100644
--- a/recruitment/templates/pipeline/kanban_components/kanban_stage_components.html
+++ b/recruitment/templates/pipeline/kanban_components/kanban_stage_components.html
@@ -94,10 +94,47 @@
     </button>
 </div>
 {% endif %}
+<script>
+    function initializeSortable() {
+        $(".pipeline_item").parent().sortable({
+            handle: ".oh-kanban__section-head",
+            connectWith: ".pipeline_item",
+            placeholder: "ui-state-highlight",
+            stop: function(event, ui) {
+            }
+        }).disableSelection();
+    }
 
+    function executeScripts(container) {
+        const scripts = container.querySelectorAll('script');
+        scripts.forEach(script => {
+            const newScript = document.createElement('script');
+            newScript.src = script.src;
+            newScript.textContent = script.textContent;
+            document.body.appendChild(newScript);
+        });
+    }
+
+    document.addEventListener("htmx:afterSettle", function(event) {
+        if (event.detail.target.querySelectorAll(".pipeline_item").length > 0) {
+            initializeSortable();
+        }
+        executeScripts(event.detail.target);
+    });
+
+
+    $(document).ready(function() {
+        initializeSortable();
+    });
+</script>
 <script>
 initialAvtiveTab = $(".oh-tabs__content--active").length
 if (!initialAvtiveTab) {
     $(".oh-tabs__tab:first").click()
 }
 </script>
+
+<script src="{% static 'pipeline/search.js' %}"></script>
+<script src="{% static 'pipeline/load.js' %}"></script>
+<script src="{% static 'pipeline/badge.js' %}"></script>
+<script src="{% static 'pipeline/pipelineDrag.js' %}"></script>
diff --git a/recruitment/templates/pipeline/nav.html b/recruitment/templates/pipeline/nav.html
index 97430133d..538bbd64b 100644
--- a/recruitment/templates/pipeline/nav.html
+++ b/recruitment/templates/pipeline/nav.html
@@ -450,13 +450,13 @@
                                         );
                                         Toast.fire({
                                             icon: "success",
-                                            title: '{% trans "Candidate stage updated" %}',
+                                            title: '{% trans "Sequence updated" %}',
                                             position: "top-end",
                                         });
                                         if (response.message) {
                                             Swal.fire({
                                                 title: response.message,
-                                                text: `Total vacancy is ${response.vacancy}.`, // Using template literals
+                                                text: `Total vacancy is ${response.vacancy}.`,
                                                 icon: "info",
                                                 confirmButtonText: "Ok",
                                             });
@@ -527,7 +527,6 @@
     $(document).on("htmx:beforeRequest", function (event) {
         var target = event.target;
 
-        // Check if the event is for the element you're interested in
         isDrag = $(event.target).attr("data-drag-htmx");
         if (isDrag == "true") {
             $.ajax({