diff --git a/recruitment/static/pipeline/search.js b/recruitment/static/pipeline/search.js
index 1faa0a3d0..e69de29bb 100644
--- a/recruitment/static/pipeline/search.js
+++ b/recruitment/static/pipeline/search.js
@@ -1,123 +0,0 @@
-function closeTag(element) {
-  var filterTagClass = $(element).attr("class");
-  classArray = filterTagClass.split(" ");
-  lastClass = classArray[classArray.length - 1];
-  if (lastClass === "pipelineSearch") {
-    $("#" + lastClass).val("");
-    $("#" + lastClass).trigger("keyup");
-  }
-  var button = document.querySelector(
-    ".oh-tabs__action-bar#filter_item button"
-  );
-  if (lastClass === "job_pos_id") {
-    $("#" + lastClass).val("");
-    $("#select2-" + lastClass + "-container").text("------------------");
-    if (button) {
-      button.click();
-    }
-  }
-}
-
-$(document).ready(function () {
-  $("#pipelineSearch").keyup(function (e) {
-    e.preventDefault();
-    var search = $(this).val().toLowerCase();
-    $(".candidate-container div.change-cand").each(function () {
-      var candidate = $(this).attr("data-candidate");
-      if (candidate.toLowerCase().includes(search)) {
-        $(this).show();
-        $(this).addClass("search-highlight");
-      } else {
-        $(this).hide();
-        $(this).removeClass("search-highlight");
-
-      }
-    });
-    if (search == "") {
-      $(".search-highlight").removeClass("search-highlight");        
-      $('div.change-cand').show();
-
-    }
-    $(".pipelineSearch").remove();
-    $(`[name="job_pos_id"]`).val("")
-    $(`[name="job_pos_id"]`).change()
-    $("#filter_item").click()
-
-    if (search != "") {
-      $("#filterTagContainerSectionNav").append(
-          '<span class="oh-titlebar__tag filter-field pipelineSearch">Search :' +
-          search +
-          `<button class="oh-titlebar__tag-close" onclick="$('#pipelineSearch').val('');$('#pipelineSearch').keyup()">
-            <ion-icon name="close-outline">
-            </ion-icon>
-          </button>
-        </span>`
-      );
-      $('div.change-cand:not(.search-highlight)').hide();
-    }else{
-      $('div.change').show()
-    }
-  });
-  function count_element() {
-    let stage = $(".recruitment_items");
-    let count = $(".stage_count");
-    let nos = [];
-    for (i = 0; i < stage.length; i++) {
-      nos.push($(stage[i]).find("[data-candidate]:visible").length);
-    }
-
-    $.each(nos, function (index, value1) {
-      var value2 = count[index];
-      $(value2).text(value1);
-      $(value2).attr("title", `${value1} candidates`);
-    });
-  }
-
-  function job_Position() {
-    let search = $("#job_pos_id").val().toLowerCase();
-    if (search != "") {
-      $("#filterCount").text("(1)");
-    }
-    $(".oh-filter-tag.filter-field.job_pos_id").remove();
-    if (search != "") {
-      job = $("[data-job-position]:visible");
-      job.each(function () {
-        var candidate = $(this).attr("data-job-position");
-        if (candidate.toLowerCase().includes(search)) {
-          $(this).show();
-        } else {
-          $(this).hide();
-        }
-      });
-      $("#filterTagContainerSectionNav").append(
-        '<span class="oh-titlebar__tag filter-field pipelineSearch">Search :' +
-        search +
-        `<button class="oh-titlebar__tag-close" onclick="$('#pipelineSearch').val('');$('#pipelineSearch').keyup()">
-          <ion-icon name="close-outline">
-          </ion-icon>
-        </button>
-      </span>`
-    );
-    }
-  }
-
-  $("#filter_item").on("click", function () {
-    $("#filterCount").empty();
-    var candidate = $("[data-job-position]");
-    candidate.each(function () {
-      $(this).show();
-    });
-    $(".pipeline_items").each(function () {
-      $(this).removeClass("d-none");
-    });
-    job_Position();
-    count_element();
-  });
-  $(".oh-tabs__tab").on("click", function () {
-    $(".pipeline_items").each(function () {
-      $(this).removeClass("d-none");
-    });
-    job_Position();
-    count_element();
-  });
-});
diff --git a/recruitment/templates/pipeline/filters.html b/recruitment/templates/pipeline/filters.html
index e69de29bb..aa2e9c07d 100644
--- a/recruitment/templates/pipeline/filters.html
+++ b/recruitment/templates/pipeline/filters.html
@@ -0,0 +1,159 @@
+{% load i18n %}
+{% load static %}
+  <div class="oh-dropdown__filter-body">
+    <div class="oh-accordion">
+      <div class="oh-accordion-header">
+        {% trans 'Recruitment' %}
+      </div>
+      <div class="oh-accordion-body">
+        <div class="row">
+          <div class="col-sm-12 col-md-12 col-lg-6">
+            <div class="oh-input-group">
+              <label class="oh-label">{% trans 'Managers' %}</label>
+              {{ rec_filter_obj.form.recruitment_managers }}
+            </div>
+            <div class="oh-input-group">
+              <label class="oh-label">{% trans 'Start Date' %}</label>
+              {{ rec_filter_obj.form.start_date }}
+            </div>
+            <div class="oh-input-group">
+              <label class="oh-label">{% trans 'Start Date From' %}</label>
+              {{ rec_filter_obj.form.start_from }}
+            </div>
+            <div class="oh-input-group">
+              <label class="oh-label">{% trans 'Is Closed' %}</label>
+              {{ rec_filter_obj.form.closed }}
+            </div>
+          </div>
+
+          <div class="col-sm-12 col-md-12 col-lg-6">
+            <div class="oh-input-group">
+              <label class="oh-label">{% trans 'Company' %}</label>
+              {{ rec_filter_obj.form.company_id }}
+            </div>
+            <div class="oh-input-group">
+              <label class="oh-label">{% trans 'End Date' %}</label>
+              {{ rec_filter_obj.form.end_date }}
+            </div>
+            <div class="oh-input-group">
+              <label class="oh-label">{% trans 'Till End Date' %}</label>
+              {{ rec_filter_obj.form.end_till }}
+            </div>
+            <div class="oh-input-group">
+              <label class="oh-label">{% trans 'Is Published' %}</label>
+              {{ rec_filter_obj.form.is_published }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="oh-dropdown__filter-body">
+    <div class="oh-accordion">
+      <div class="oh-accordion-header">
+        {% trans 'Stage' %}
+      </div>
+      <div class="oh-accordion-body">
+        <div class="row">
+          <div class="col-sm-12 col-md-12 col-lg-6">
+            <div class="oh-input-group">
+              <label class="oh-label">{% trans 'Recruitment Managers' %}</label>
+              {{ stage_filter_obj.form.recruitment_id__recruitment_managers }}
+            </div>
+            <div class="oh-input-group">
+              <label class="oh-label">{% trans 'Recruitment' %}</label>
+              {{ stage_filter_obj.form.recruitment_id }}
+            </div>
+            <div class="oh-input-group">
+              <label class="oh-label">{% trans 'Department' %}</label>
+              {{ stage_filter_obj.form.recruitment_id__job_position_id__department_id }}
+            </div>
+            <div class="oh-input-group">
+              <label class="oh-label">{% trans 'Stage Type' %}</label>
+              {{ stage_filter_obj.form.stage_type }}
+            </div>
+          </div>
+
+          <div class="col-sm-12 col-md-12 col-lg-6">
+            <div class="oh-input-group">
+              <label class="oh-label">{% trans 'Stage Managers' %}</label>
+              {{ stage_filter_obj.form.stage_managers }}
+            </div>
+            <div class="oh-input-group">
+              <label class="oh-label">{% trans 'Company' %}</label>
+              {{ stage_filter_obj.form.recruitment_id__company_id }}
+            </div>
+            <div class="oh-input-group">
+              <label class="oh-label">{% trans 'Job Position' %}</label>
+              {{ stage_filter_obj.form.recruitment_id__job_position_id }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="oh-dropdown__filter-body">
+    <div class="oh-accordion">
+      <div class="oh-accordion-header">
+        {% trans 'Candidates' %}
+      </div>
+      <div class="oh-accordion-body">
+        <div class="row">
+          <div class="col-sm-12 col-md-12 col-lg-6">
+            <div class="oh-input-group">
+              <label class="oh-label">{% trans 'Country' %}</label>
+              <select name="country" class="oh-select-2 w-100 country" id="country"></select>
+            </div>
+            <div class="col-sm-12 col-md-12 col-lg-12 mb-2">
+              <div class="oh-input-group">
+                <label class="oh-label">{% trans 'Reject Reason' %}</label>
+                {{ candidate_filter_obj.form.rejected_candidate__reject_reason_id }}
+              </div>
+              <div class="oh-input-group">
+                <label class="oh-label">{% trans 'Is Hired' %}?</label>
+                {{ candidate_filter_obj.form.hired }}
+              </div>
+              <div class="oh-input-group">
+                <label class="oh-label">{% trans 'Gender' %}</label>
+                {{ candidate_filter_obj.form.gender }}
+              </div>
+              <div class="oh-input-group">
+                <label class="oh-label">{% trans 'Job Position' %}</label>
+                {{ candidate_filter_obj.form.job_position_id }}
+              </div>
+            </div>
+          </div>
+          <div class="col-sm-12 col-md-12 col-lg-6">
+            <div class="oh-input-group">
+              <label class="oh-label">{% trans 'State' %}</label>
+              <select name="state" class="oh-select-2 w-100 country" id="state"></select>
+            </div>
+            <div class="oh-input-group">
+              <label class="oh-label">{% trans 'Offer Status' %}?</label>
+              {{ candidate_filter_obj.form.offer_letter_status }}
+            </div>
+            <div class="oh-input-group">
+              <label class="oh-label">{% trans 'Is Canceled' %}?</label>
+              {{ candidate_filter_obj.form.canceled }}
+            </div>
+            <div class="oh-input-group">
+              <label class="oh-label">{% trans 'Rating' %}?</label>
+              {{ candidate_filter_obj.form.candidate_rating__rating }}
+            </div>
+            <div class="oh-input-group">
+              <label class="oh-label">{% trans 'Department' %}?</label>
+              {{ candidate_filter_obj.form.job_position_id__department_id }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="oh-dropdown__filter-footer">
+    <button class="oh-btn oh-btn--secondary oh-btn--small w-100 filterButton" id="">{% trans 'Filter' %}</button>
+  </div>
+<script src="{% static '/base/filter.js' %}"></script>
+<script>
+    {% include "country.js" %}
+</script>
diff --git a/recruitment/templates/pipeline/nav.html b/recruitment/templates/pipeline/nav.html
index 60f9797b5..daff42644 100644
--- a/recruitment/templates/pipeline/nav.html
+++ b/recruitment/templates/pipeline/nav.html
@@ -70,7 +70,7 @@ x-data="{searchShow: false}"
 <div class="oh-main__titlebar oh-main__titlebar--left">
   <div class="oh-main__titlebar-title fw-bold mb-0 text-dark"  style="cursor:pointer;">{% trans "Recruitments" %}</div>
 </div>
-
+<form href="" id="filterForm">
 <div class="oh-main__titlebar oh-main__titlebar--right">
   
   
@@ -84,26 +84,25 @@ x-data="{searchShow: false}"
 		></ion-icon>
 		<input
 		type="text"
-		id = "pipelineSearch" 
 		placeholder="{% trans 'Search' %}" 
-		name='search'
+		name='candidate_name'
+    value="{{request.GET.candidate_name}}"
+    onkeyup="$(this).closest('form').submit()"
 		class="oh-input oh-input__icon"
 		aria-label="Search Input"
 		/>
   	</div>
 
-  <div class="oh-switch ms-3" style="width: 30px;">
-      <input type="checkbox" name="is_closed" data-widget="style-widget" class="style-widget oh-switch__checkbox" {% if request.GET.closed %} checked title="{% trans 'Switch to Ongoing Recruitments' %}" {% else %} title="{% trans 'Switch to Closed Recruitments' %}" {% endif %} id="is_closed" > 
-  </div>
 
 	<ul class="oh-view-types ml-2" style="margin-bottom: 0;">
-		<li class="oh-view-type candidate-view-type" data-view='list'>
-		<a href="{% url 'pipeline' %}?closed={{status}}"  hx-target='#section' class="oh-btn oh-btn--view {% if request.GET.view != 'card' %} oh-btn--view-active {% endif %}"
+    <input type="hidden" name="view" value="list">
+		<li class="oh-view-type candidate-view-type" >
+		<div onclick="$(this).closest('ul').find('[name=view]').val('list');$(this).closest('form').submit()" class="oh-btn oh-btn--view {% if request.GET.view != 'card' %} oh-btn--view-active {% endif %}"
 			title={% trans 'List' %}><ion-icon name="list-outline"></ion-icon
 		></a>
 		</li>
-		<li class="oh-view-type candidate-view-type" data-view='card'>
-		<a href="{% url 'pipeline' %}?view=card&closed={{status}}" hx-target='#section' class="oh-btn oh-btn--view {% if request.GET.view == 'card' %} oh-btn--view-active {% endif %}"
+		<li class="oh-view-type candidate-view-type" \>
+		<div  onclick="$(this).closest('ul').find('[name=view]').val('card');$(this).closest('form').submit()" class="oh-btn oh-btn--view {% if request.GET.view == 'card' %} oh-btn--view-active {% endif %}"
     title={% trans 'Card' %}><ion-icon name="grid-outline"></ion-icon
 		></a>
 		</li>
@@ -112,27 +111,11 @@ x-data="{searchShow: false}"
     <div class="oh-main__titlebar-button-container">
 
         <div class="oh-dropdown" x-data="{open: false}">
-          <button class="oh-btn ml-2" @click="open = !open">
+          <button type="button" class="oh-btn ml-2" @click="open = !open">
             <ion-icon name="filter" class="mr-1"></ion-icon>{% trans "Filter" %}<div id="filterCount"></div>
           </button>
             <div class="oh-dropdown__menu oh-dropdown__menu--right oh-dropdown__filter p-4" x-show="open" @click.outside="open = false" style="display: none;" @click.>
-                
-                <div class="mb-3 mt-3">
-                    <label for="job_pos_id" class="oh-label">{% trans "Job position" %}</label>
-                    <select class="" name="job_pos_id" id="job_pos_id">
-                        <option value="">------------------</option>
-                        {% for job_position in job_positions %}
-                            <option value="{{job_position}}">{{job_position}}</option>
-                        {% endfor %}
-                    </select>
-                </div>
-                
-                <div class="oh-tabs__action-bar mt-2" id="filter_item" x-on:click="open = false" >
-                    <button class="oh-btn oh-btn--small oh-btn--secondary oh-tabs__action-new-table w-100" >
-                        <ion-icon class="me-1 md hydrated" name="add-outline" role="img"aria-label="add outline"></ion-icon>
-                        {% trans "Filter" %}
-                    </button>
-                </div>
+              {% include "pipeline/filters.html" %}
             </div>
     </div>
 	<div class="oh-main__titlebar-button-container">
@@ -147,6 +130,7 @@ x-data="{searchShow: false}"
 		
 	</div>
 </div>
+</form>
 </section>
 
 <div
@@ -216,4 +200,15 @@ $(document).ready(function(){
   });
 })
 	
-</script>
\ No newline at end of file
+</script>
+{% include "filter_tags.html" %}
+<div class="d-flex flex-row-reverse oh-wrapper">
+  <span  onclick="$('[name=closed]').val('True'); $('[name=closed]').first().change(); $('.filterButton').click()" style="cursor: pointer;margin-left: 10px;margin-right: 10px;">
+    <span class="oh-dot oh-dot--small me-1" style="background-color:orangered"></span>
+    {% trans "Closed" %}
+  </span>
+  <span  onclick="$('[name=closed]').val('');$('[name=closed]').first().change(); $('.filterButton').click()" style="cursor: pointer;margin-left: 10px;margin-right: 10px;">
+    <span class="oh-dot oh-dot--small me-1" style="background-color: yellowgreen"></span>
+    {% trans "Open" %}
+  </span>
+</div>
diff --git a/recruitment/templates/pipeline/pipeline_tabs.html b/recruitment/templates/pipeline/pipeline_tabs.html
index 672fccde5..e073149b2 100644
--- a/recruitment/templates/pipeline/pipeline_tabs.html
+++ b/recruitment/templates/pipeline/pipeline_tabs.html
@@ -4,14 +4,14 @@
     {% for rec in recruitment %}
     {% if request.user|stage_manages:rec or perms.recruitment.view_recruitment %}
 
-    <li class="oh-tabs__tab" style="padding-right: 0;{% if request.user|recruitment_manages:rec %} background-color: hsl(38.08deg 100% 50% / 8%); {% endif %}" data-target="#tab_rec_{{rec.id}}">
+    <li class="oh-tabs__tab" style="{% if rec.closed %}text-decoration: line-through{% endif %};padding-right: 0;{% if request.user|recruitment_manages:rec %} background-color: hsl(38.08deg 100% 50% / 8%); {% endif %}" data-target="#tab_rec_{{rec.id}}">
       {{rec}}
       <div class="d-flex">
       <div class="oh-tabs__input-badge-container">
         <span
-          class="oh-badge oh-badge--secondary oh-badge--small oh-badge--round ms-2 mr-2" id="recruitmentCandidateCount{{rec.id}}" title="{{rec.stage_set.all|length}} {% trans "Stages" %}"
+          class="oh-badge oh-badge--secondary oh-badge--small oh-badge--round ms-2 mr-2" id="recruitmentCandidateCount{{rec.id}}" title="{{rec.stages|length}} {% trans "Stages" %}"
           onclick="event.stopPropagation()">
-          {{rec.stage_set.all|length}}
+          {{rec.stages|length}}
           </span
         >
       </div>
@@ -39,7 +39,7 @@
               >
             </li>
             {% endif %}
-            {% if  status == "" %}
+            {% if not rec.closed %}
               {% if perms.recruitment.change_recruitment or request.user|recruitment_manages:rec %}
                 <li class="oh-dropdown__item">
                   <a href="{% url 'recruitment-close-pipeline' rec.id %}" class="oh-dropdown__link"