diff --git a/onboarding/static/onboarding_view/search.js b/onboarding/static/onboarding_view/search.js
index e305851ab..836753df3 100644
--- a/onboarding/static/onboarding_view/search.js
+++ b/onboarding/static/onboarding_view/search.js
@@ -1,170 +1,227 @@
+function closeTag(element) {
+  var filterTagClass = $(element).attr("class");
+  $(element).remove();
+  var classArray = filterTagClass.split(" ");
+  var lastClass = classArray[classArray.length - 1];
+  $("#" + lastClass).val("");
+  if (lastClass === "job_position_id") {
+    $("#select2-" + lastClass + "-container").text("------------------");
+  }
+  var button = document.querySelector(
+    ".oh-tabs__action-bar#filter_item button"
+  );
+  if (button) {
+    button.click();
+  }
+}
 $(document).ready(function () {
+  function count_element() {
+    let stage = $(".onboarding_items");
+    let count = $(".stage_count");
+    let nos = [];
+    for (i = 0; i < stage.length; i++) {
+      nos.push($(stage[i]).find("[data-candidate]:visible").length);
+    }
 
-	function count_element () {
-		let stage = $(".onboarding_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);
+    });
+  }
 
-		$.each(nos, function(index, value1) {
-			var value2 = count[index];
-			$(value2).text(value1);
-		});
-	}
+  $("#search").keyup(function (e) {
+    e.preventDefault();
+    let search = $(this).val().toLowerCase();
+    $(".onboarding_items").each(function () {
+      $(this).removeClass("d-none");
+    });
+    cands = $("[data-candidate]");
+    cands.each(function () {
+      var candidate = $(this).attr("data-candidate");
+      if (candidate.toLowerCase().includes(search)) {
+        $(this).show();
+      } else {
+        $(this).hide();
+      }
+    });
+    $(".oh-filter-tag.filter-field.search").remove();
+    if (search != "") {
+      $(".oh-filter-tag-container.filter-value").append(
+        '<span class="oh-filter-tag filter-field search" onclick="closeTag(this)">Search : ' +
+          search +
+          '<button class="oh-filter-tag__close" id="close"><ion-icon name="close-outline" role="img" class="md hydrated" aria-label="close outline"></ion-icon></button></span>'
+      );
+    }
+    count_element();
+  });
 
-	$("#search").keyup(function (e) {
-		e.preventDefault();
-		let search = $(this).val().toLowerCase();
-		$(".onboarding_items").each(function () {
-			$(this).removeClass("d-none");
-		});
-		cands = $("[data-candidate]")
-		cands.each(function () {
-			var candidate = $(this).attr("data-candidate");
-			if (candidate.toLowerCase().includes(search)) {
-				$(this).show();
-			} else {
-				$(this).hide();
-			}
-		});
-		count_element()
-	});
+  function job_Position() {
+    let search = $("#job_position_id").val().toLowerCase();
+    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();
+        }
+      });
+      $(".oh-filter-tag.filter-field.job_position_id").remove();
+      $(".oh-filter-tag-container.filter-value").append(
+        '<span class="oh-filter-tag filter-field job_position_id" onclick="closeTag(this)">Job position : ' +
+          search +
+          '<button class="oh-filter-tag__close" id="close"><ion-icon name="close-outline" role="img" class="md hydrated" aria-label="close outline"></ion-icon></button></span>'
+      );
+      count_element();
+    }
+  }
 
+  function join_date() {
+    let date = $("#join_date").val();
+    if (date != "") {
+      var dateObject = new Date(date);
 
-	function job_Position (){
-		let search = $("#job_position_id").val().toLowerCase()
-		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();
-				}
-			});
-			count_element()
-		}
+      var monthNames = [
+        "Jan.",
+        "Feb.",
+        "March",
+        "April",
+        "May",
+        "June",
+        "July",
+        "Aug.",
+        "Sept.",
+        "Oct.",
+        "Nov.",
+        "Dec.",
+      ];
 
-	}
+      var month = monthNames[dateObject.getMonth()];
+      var day = dateObject.getDate();
+      var year = dateObject.getFullYear();
 
-	function join_date (){
-		let date = $("#join_date").val()
-		if (date != "") {
+      var search = month + " " + day + ", " + year;
+      let dates = $("[data-join-date]:visible");
+      dates.each(function () {
+        var candidate = $(this).attr("data-join-date");
 
-			var dateObject = new Date(date);
-				
-			var monthNames = [
-				"Jan.", "Feb.", "Mar.", "Apr.", "May", "June",
-				"July", "Aug.", "Sep.", "Oct.", "Nov.", "Dec."
-			];
+        if (candidate.includes(search)) {
+          $(this).show();
+        } else {
+          $(this).hide();
+        }
+      });
+      $(".oh-filter-tag.filter-field.join_date").remove();
+      $(".oh-filter-tag-container.filter-value").append(
+        '<span class="oh-filter-tag filter-field join_date" onclick="closeTag(this)">Join date : ' +
+          search +
+          '<button class="oh-filter-tag__close" id="close"><ion-icon name="close-outline" role="img" class="md hydrated" aria-label="close outline"></ion-icon></button></span>'
+      );
+      count_element();
+    }
+  }
 
-			var month = monthNames[dateObject.getMonth()];
-			var day = dateObject.getDate();
-			var year = dateObject.getFullYear();
+  function portal() {
+    let search = $("#portal_stage").val();
 
-			var search = month + " " + day + ", " + year;
+    if (search != "") {
+      let portal_items = $("[data-portal-count]:visible");
+      portal_items.each(function () {
+        var candidate = $(this).attr("data-portal-count");
+        if (candidate.includes(search)) {
+          $(this).show();
+        } else {
+          $(this).hide();
+        }
+      });
+      $(".oh-filter-tag.filter-field.portal_stage").remove();
+      $(".oh-filter-tag-container.filter-value").append(
+        '<span class="oh-filter-tag filter-field portal_stage" onclick="closeTag(this)">Portal stage : ' +
+          search +
+          '<button class="oh-filter-tag__close" id="close"><ion-icon name="close-outline" role="img" class="md hydrated" aria-label="close outline"></ion-icon></button></span>'
+      );
+      count_element();
+    }
+  }
+  function join_date_range() {
+    let start_date = $("#join_date_start").val();
+    let end_date = $("#join_date_end").val();
 
-				let dates = $("[data-join-date]:visible")
-				dates.each(function () {
-					var candidate = $(this).attr("data-join-date");
-					if (candidate.includes(search)) {
-						$(this).show();
-					} else {
-						$(this).hide();
-					}
-				});
-				count_element()
-		}
-	}
+    if (start_date || end_date) {
+      let visibleDates = $("[data-join-date]:visible");
 
-	function portal(){
-		let search = $("#portal_stage").val()
-		
-		if (search != "") {
-			let portal_items = $("[data-portal-count]:visible")
-			portal_items.each(function () {
-			var candidate = $(this).attr("data-portal-count");
-			if (candidate.includes(search)) {
-				$(this).show();
-			} else {
-				$(this).hide();
-			}
-			});
-			count_element()
-		}
-	}
-	function join_date_range() {
-		let start_date = $("#join_date_start").val();
-		let end_date = $("#join_date_end").val();
+      visibleDates.each(function () {
+        let candidateDateString = $(this).data("join-date");
+        let candidateDate = new Date(candidateDateString);
+        if (!isNaN(candidateDate)) {
+          let showElement = true;
 
-		
-		
-		if (start_date || end_date) {
-			let visibleDates = $("[data-join-date]:visible");
-	
-			visibleDates.each(function () {
-				let candidateDateString = $(this).data("join-date");
-				let candidateDate = new Date(candidateDateString);
-	
-				if (!isNaN(candidateDate)) {
-					let showElement = true;
+          if (start_date && !end_date) {
+            showElement = candidateDate >= new Date(start_date);
+          } else if (!start_date && end_date) {
+            showElement = candidateDate <= new Date(end_date);
+          } else if (start_date && end_date) {
+            showElement =
+              candidateDate >= new Date(start_date) &&
+              candidateDate <= new Date(end_date);
+          }
 
-					if (start_date && !end_date) {
-						showElement = candidateDate >= new Date(start_date);
-					} else if (!start_date && end_date) {
-						showElement = candidateDate <= new Date(end_date);
-					} else if (start_date && end_date) {
-						showElement = candidateDate >= new Date(start_date) && candidateDate <= new Date(end_date);
-					}
+          if (showElement) {
+            $(this).show();
+          } else {
+            $(this).hide();
+          }
+        } else {
+          $(this).hide();
+        }
+      });
 
+      count_element();
+    } else {
+    }
+    $(".oh-filter-tag.filter-field.join_date_end").remove();
+    $(".oh-filter-tag.filter-field.join_date_start").remove();
+    if (start_date.length) {
+      $(".oh-filter-tag-container.filter-value").append(
+        '<span class="oh-filter-tag filter-field join_date_start" onclick="closeTag(this)">Join date from : ' +
+          start_date +
+          '<button class="oh-filter-tag__close" id="close"><ion-icon name="close-outline" role="img" class="md hydrated" aria-label="close outline"></ion-icon></button></span>'
+      );
+    }
+    if (end_date.length) {
+      $(".oh-filter-tag-container.filter-value").append(
+        '<span class="oh-filter-tag filter-field join_date_end" onclick="closeTag(this)">Join date to : ' +
+          end_date +
+          '<button class="oh-filter-tag__close" id="close"><ion-icon name="close-outline" role="img" class="md hydrated" aria-label="close outline"></ion-icon></button></span>'
+      );
+    }
+  }
 
-					if (showElement) {
-						$(this).show();
-					} else {
-						$(this).hide();
-					}
-				}
-				else {
-					$(this).hide();
-				}
-			});
-	
-			count_element();
-		
-		}
-		else{
-		}
-	}
+  $("#filter_item").on("click", function () {
+    var candidate = $("[data-job-position]");
+    candidate.each(function () {
+      $(this).show();
+    });
+    $(".onboarding_items").each(function () {
+      $(this).removeClass("d-none");
+    });
+    job_Position();
+    join_date();
+    portal();
+    join_date_range();
+  });
 
-	$("#filter_item").on("click",function(){
-		var candidate = $("[data-job-position]");
-		candidate.each(function () { 
-				$(this).show();
-		})
-		$(".onboarding_items").each(function () {
-			$(this).removeClass("d-none");
-		});
-		job_Position();
-		join_date();
-		portal();
-		join_date_range()
+  $(".oh-tabs__tab").on("click", function () {
+    $(".onboarding_items").each(function () {
+      $(this).removeClass("d-none");
+    });
+    job_Position();
+    join_date();
+    portal();
+    join_date_range();
+  });
 
-	})
-
-	$(".oh-tabs__tab").on("click",function (){
-		$(".onboarding_items").each(function () {
-			$(this).removeClass("d-none");
-		});
-		job_Position();
-		join_date();
-		portal();
-		join_date_range()
-	})
-	
-	$("#job_position_id").select2()	
-	$("#portal_stage").select2()
-
-});
\ No newline at end of file
+  $("#job_position_id").select2();
+  $("#portal_stage").select2();
+});
diff --git a/onboarding/templates/onboarding/candidate-filter.html b/onboarding/templates/onboarding/candidate-filter.html
index a8585f060..6365019d1 100644
--- a/onboarding/templates/onboarding/candidate-filter.html
+++ b/onboarding/templates/onboarding/candidate-filter.html
@@ -41,7 +41,7 @@
     </div>
     <div class="oh-dropdown__filter-footer">
       <button
-        class="oh-btn oh-btn--secondary oh-btn--small w-100"
+        class="oh-btn oh-btn--secondary oh-btn--small w-100 filterButton"
         type="submit"
       >
         {% trans "Filter" %}
diff --git a/onboarding/templates/onboarding/candidates.html b/onboarding/templates/onboarding/candidates.html
index 02a85b40a..4bffb9e3b 100644
--- a/onboarding/templates/onboarding/candidates.html
+++ b/onboarding/templates/onboarding/candidates.html
@@ -1,4 +1,5 @@
 {% load i18n %}
+{% include 'filter_tags.html' %}
 <div class="oh-sticky-table">
   <div class="oh-sticky-table__table">
     <div class="oh-sticky-table__thead">
diff --git a/onboarding/templates/onboarding/onboarding-view.html b/onboarding/templates/onboarding/onboarding-view.html
index e66fb7de0..cb32c7eb2 100644
--- a/onboarding/templates/onboarding/onboarding-view.html
+++ b/onboarding/templates/onboarding/onboarding-view.html
@@ -119,7 +119,7 @@
         </div>
     </div>
 </section>
-
+<div class="oh-wrapper oh-filter-tag-container filter-value"></div>
 <div class="oh-wrapper">
     <div class="oh-tabs">
         <ul class="oh-tabs__tablist">
diff --git a/onboarding/views.py b/onboarding/views.py
index 68c25087a..5856a6710 100644
--- a/onboarding/views.py
+++ b/onboarding/views.py
@@ -10,6 +10,7 @@ actions to handle the request, process data, and generate a response.
 This module is part of the recruitment project and is intended to
 provide the main entry points for interacting with the application's functionality.
 """
+from urllib.parse import parse_qs
 import json, contextlib, random, secrets
 from django.core.mail import send_mail
 from django.contrib.auth.models import User
@@ -25,6 +26,7 @@ from notifications.signals import notify
 from horilla import settings
 from horilla.decorators import login_required, hx_request_required
 from horilla.decorators import permission_required
+from base.methods import get_key_instances
 from recruitment.models import Candidate, Recruitment
 from recruitment.filters import CandidateFilter
 from employee.models import Employee, EmployeeWorkInformation, EmployeeBankDetails
@@ -443,11 +445,13 @@ def candidate_filter(request):
     candidate_filter_obj = CandidateFilter(request.GET, queryset).qs
     previous_data = request.GET.urlencode()
     page_number = request.GET.get("page")
+    data_dict = parse_qs(previous_data)
+    get_key_instances(Candidate, data_dict)
     page_obj = paginator_qry(candidate_filter_obj, page_number)
     return render(
         request,
         "onboarding/candidates.html",
-        {"candidates": page_obj, "pd": previous_data},
+        {"candidates": page_obj, "pd": previous_data, "filter_dict": data_dict},
     )