diff --git a/.dockerignore b/.dockerignore
index 4b8641f80..7b74c129b 100644
--- a/.dockerignore
+++ b/.dockerignore
@@ -2,4 +2,4 @@
 .gitignore
 *.md
 LICENSE
-docker-compose.yaml
\ No newline at end of file
+docker-compose.yaml
diff --git a/.github/ISSUE_TEMPLATE/config.yml b/.github/ISSUE_TEMPLATE/config.yml
index f04225162..56d72a6fe 100644
--- a/.github/ISSUE_TEMPLATE/config.yml
+++ b/.github/ISSUE_TEMPLATE/config.yml
@@ -5,4 +5,4 @@ contact_links:
     about: Ask questions or discuss features here
   - name: Documentation
     url: https://horilla-opensource.github.io/horilla-docs/
-    about: Check the official Horilla documentation
\ No newline at end of file
+    about: Check the official Horilla documentation
diff --git a/.github/ISSUE_TEMPLATE/feature_request.yml b/.github/ISSUE_TEMPLATE/feature_request.yml
index 1921e67bd..683882644 100644
--- a/.github/ISSUE_TEMPLATE/feature_request.yml
+++ b/.github/ISSUE_TEMPLATE/feature_request.yml
@@ -117,4 +117,4 @@ body:
         - label: I have searched for duplicate feature requests
           required: true
         - label: I have provided clear and concise information
-          required: true
\ No newline at end of file
+          required: true
diff --git a/asset/cbv/accessibility.py b/asset/cbv/accessibility.py
new file mode 100644
index 000000000..b141027bf
--- /dev/null
+++ b/asset/cbv/accessibility.py
@@ -0,0 +1,25 @@
+
+from django.contrib.auth.context_processors import PermWrapper
+from base.methods import check_manager
+from employee.models import Employee
+
+
+def asset_accessibility(request, instance: object = None, user_perms: PermWrapper = [], *args, **kwargs) -> bool:
+    """
+    accessibility for asset tab
+    """
+    employee = Employee.objects.get(id=instance.pk)
+    if (
+        request.user.has_perm("asset.view_asset") or check_manager(request.user.employee_get, instance)
+        or request.user == employee.employee_user_id
+    ):
+        return True
+    return False
+
+
+def create_asset_request_accessibility(
+    request, instance: object = None, user_perms: PermWrapper = [], *args, **kwargs
+) -> bool:
+    if request.user.has_perm("asset.add_assetrequest"):
+        return True
+    return False
\ No newline at end of file
diff --git a/asset/cbv/asset_batch_no.py b/asset/cbv/asset_batch_no.py
new file mode 100644
index 000000000..8b8fc6943
--- /dev/null
+++ b/asset/cbv/asset_batch_no.py
@@ -0,0 +1,189 @@
+"""
+this page is handling the cbv methods for asset batch no
+"""
+
+from typing import Any
+from django.http import HttpResponse
+from django.urls import reverse
+from django.contrib import messages
+from django.utils.decorators import method_decorator
+from django.utils.translation import gettext_lazy as _
+from asset.filters import AssetBatchNoFilter
+from asset.forms import AssetBatchForm
+from asset.models import AssetLot
+from horilla_views.cbv_methods import login_required, permission_required
+from horilla_views.generic.cbv.views import (
+    HorillaDetailedView,
+    HorillaFormView,
+    HorillaListView,
+    HorillaNavView,
+    TemplateView,
+)
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(permission_required("asset.view_assetlot"), name="dispatch")
+class AssetBatchNoView(TemplateView):
+    """
+    for Asset batch no page
+    """
+
+    template_name = "cbv/asset_batch_no/asset_batch_no.html"
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(permission_required("asset.view_assetlot"), name="dispatch")
+class AssetBatchNoListView(HorillaListView):
+    """
+    list view for batch number
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("asset-batch-list")
+        self.view_id = "AssetBatchList"
+
+    model = AssetLot
+    filter_class = AssetBatchNoFilter
+
+    columns = [
+        (_("Batch Number"), "lot_number"),
+        (_("Description"), "lot_description"),
+        (_("Assets"),"assets_column")
+    ]
+
+
+    header_attrs = {
+        "action" : """
+                   style = "width:180px !important"
+                   """
+    }
+
+    action_method = "actions"
+
+    row_attrs = """
+                hx-get='{asset_batch_detail}?instance_ids={ordered_ids}'
+                hx-target="#genericModalBody"
+                data-target="#genericModal"
+                data-toggle="oh-modal-toggle"
+                """
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(permission_required("asset.view_assetlot"), name="dispatch")
+class AssetBatchNoNav(HorillaNavView):
+    """
+    Nav bar
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("asset-batch-list")
+
+        if self.request.user.has_perm("asset.view_assetlot"):
+            self.create_attrs = f"""
+                            data-toggle="oh-modal-toggle"
+                            data-target="#genericModal"
+                            hx-target="#genericModalBody"
+                            hx-get="{reverse('asset-batch-number-creation')}"
+                            """
+
+    nav_title = _("Asset Batch Number")
+    filter_instance = AssetBatchNoFilter()
+    search_swap_target = "#listContainer"
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(permission_required("asset.add_assetlot"), name="dispatch")
+class AssetBatchCreateFormView(HorillaFormView):
+    """
+    form view for create batch number
+    """
+
+    form_class = AssetBatchForm
+    model = AssetLot
+    new_display_title = _("Create Batch Number")
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        if self.form.instance.pk:
+            self.form_class.verbose_name = _("Batch Number Update")
+
+        return context
+
+    def form_valid(self, form: AssetBatchForm) -> HttpResponse:
+        if form.is_valid():
+            if form.instance.pk:
+                message = _("Batch number updated successfully.")
+            else:
+                message = _("Batch number created successfully.")
+            form.save()
+            messages.success(self.request, _(message))
+            return self.HttpResponse()
+        return super().form_valid(form)
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(permission_required("asset.add_assetlot"), name="dispatch")
+class DynamicCreateBatchNo(AssetBatchCreateFormView):
+    """
+    view for dynamic batch create
+    """
+
+    is_dynamic_create_view = True
+
+
+class AssetBatchDetailView(HorillaDetailedView):
+    """
+    detail view of the page
+    """
+
+    def get_context_data(self, **kwargs: Any):
+        """
+        Return context data with the title set to the contract's name.
+        """
+
+        context = super().get_context_data(**kwargs)
+        lot_number = context["assetlot"].lot_number
+        context["title"] = "Asset Batch:" + lot_number
+        return context
+
+    model = AssetLot
+    header = False
+
+    cols = {
+        "assets_column":12,
+        "lot_description":12,
+        "lot_number":12
+    }
+    body = {
+        (_("Assets"),"assets_column"),
+        (_("Description"), "lot_description"),
+        (_("Batch Number"), "lot_number"),
+
+    }
+
+    actions = [
+        {
+            "action": _("Edit"),
+            "icon": "create-outline",
+            "attrs": """
+                        class="oh-btn oh-btn--info w-100"
+                        hx-get='{get_update_url}?instance_ids={ordered_ids}'
+								hx-target="#genericModalBody"
+								data-toggle="oh-modal-toggle"
+								data-target="#genericModal"
+                      """,
+        },
+        {
+            "action": _("Delete"),
+            "icon": "trash-outline",
+
+            "attrs": """
+                    class="oh-btn oh-btn--danger w-100"
+                    hx-confirm="Do you want to delete this batch number?"
+                    hx-post="{get_delete_url}?instance_ids={ordered_ids}"
+                    hx-target="#AssetBatchList"
+                    """
+        },
+    ]
diff --git a/asset/cbv/asset_category.py b/asset/cbv/asset_category.py
new file mode 100644
index 000000000..7aa58db28
--- /dev/null
+++ b/asset/cbv/asset_category.py
@@ -0,0 +1,309 @@
+"""
+Asset category forms
+"""
+
+from typing import Any
+from django import forms
+from django.contrib import messages
+from django.http import HttpResponse
+from django.urls import reverse
+from django.utils.decorators import method_decorator
+from django.utils.translation import gettext_lazy as _
+from asset.cbv.asset_batch_no import DynamicCreateBatchNo
+from asset.filters import AssetCategoryFilter, AssetFilter, CustomAssetFilter
+from asset.forms import AssetCategoryForm, AssetForm, AssetReportForm
+from asset.models import Asset, AssetCategory, AssetDocuments, AssetReport
+from horilla_views.generic.cbv.views import (
+    HorillaDetailedView,
+    HorillaFormView,
+    HorillaNavView,
+)
+from horilla_views.cbv_methods import login_required, permission_required
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(permission_required("asset.view_assetcategory"), name="dispatch")
+class AssetCategoryFormView(HorillaFormView):
+    """
+    form view for create asset category
+    """
+
+    form_class = AssetCategoryForm
+    model = AssetCategory
+    new_display_title = _("Asset Category Creation")
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        if self.form.instance.pk:
+            self.form_class.verbose_name = _("Asset Category Update")
+
+        return context
+
+    def form_valid(self, form: AssetCategoryForm) -> HttpResponse:
+        if form.is_valid():
+            if form.instance.pk:
+                message = _("Asset category updated successfully")
+            else:
+                message = _("Asset category created successfully")
+            form.save()
+            messages.success(self.request, _(message))
+            return HttpResponse(
+                "<script>$('#genericModal').removeClass('oh-modal--show');$('.filterButton').click();</script>"
+            )
+        return super().form_valid(form)
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(permission_required("asset.add_asset"), name="dispatch")
+class AssetFormView(HorillaFormView):
+    """
+    form view for create asset
+    """
+
+    form_class = AssetForm
+    model = Asset
+    new_display_title = _("Asset Creation")
+    dynamic_create_fields = [("asset_lot_number_id", DynamicCreateBatchNo)]
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        asset_category_id = self.kwargs.get("asset_category_id")
+        self.form.fields["asset_category_id"].initial = asset_category_id
+        self.form.fields["asset_category_id"].widget = forms.HiddenInput()
+        if self.form.instance.pk:
+            self.form_class.verbose_name = _("Asset Update")
+        return context
+
+    def form_valid(self, form: AssetForm) -> HttpResponse:
+        if form.is_valid():
+            if form.instance.pk:
+                message = _("Asset updated successfully")
+            else:
+                message = _("Asset created successfully")
+            form.save()
+            messages.success(self.request, _(message))
+            return HttpResponse(
+                "<script>$('#genericModal').removeClass('oh-modal--show');$('.filterButton').click();</script>"
+            )
+        return super().form_valid(form)
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(permission_required("asset.view_assetcategory"), name="dispatch")
+class AssetCategoryDuplicateFormView(HorillaFormView):
+    """
+    form view for create duplicate asset category
+    """
+
+    form_class = AssetCategoryForm
+    model = AssetCategory
+    new_display_title = _("Asset Category Duplicate")
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        original_object = AssetCategory.objects.get(id=self.kwargs["obj_id"])
+        form = self.form_class(instance=original_object)
+        for field_name, field in form.fields.items():
+            if isinstance(field, forms.CharField):
+                if field.initial:
+                    initial_value = field.initial
+                else:
+                    initial_value = f"{form.initial.get(field_name, '')} (copy)"
+                form.initial[field_name] = initial_value
+                form.fields[field_name].initial = initial_value
+        context["form"] = form
+        self.form_class.verbose_name = _("Duplicate")
+        return context
+
+    def form_valid(self, form: AssetCategoryForm) -> HttpResponse:
+        if form.is_valid():
+            message = _("Asset category created successfully")
+            form.save()
+            messages.success(self.request, _(message))
+            return HttpResponse(
+                "<script>$('#genericModal').removeClass('oh-modal--show');$('.filterButton').click();</script>"
+            )
+        return super().form_valid(form)
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(permission_required("asset.view_asset"), name="dispatch")
+class AssetDuplicateFormView(HorillaFormView):
+    """
+    form view for create duplicate for asset 
+    """
+
+    form_class = AssetForm
+    model = Asset
+    new_display_title = _("Asset Duplicate")
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        original_object = Asset.objects.get(id=self.kwargs["obj_id"])
+        form = self.form_class(instance=original_object)
+        form.fields["asset_category_id"].widget = forms.HiddenInput()
+        for field_name, field in form.fields.items():
+            if isinstance(field, forms.CharField):
+                if field.initial:
+                    initial_value = field.initial
+                else:
+                    initial_value = f"{form.initial.get(field_name, '')} (copy)"
+                form.initial[field_name] = initial_value
+                form.fields[field_name].initial = initial_value
+        context["form"] = form
+        self.form_class.verbose_name = _("Duplicate")
+        return context
+
+    def form_valid(self, form: AssetForm) -> HttpResponse:
+        if form.is_valid():
+            if form.instance.pk:
+                message = _("Asset updated successfully")
+            else:
+                message = _("Asset created successfully")
+            form.save()
+            messages.success(self.request, _(message))
+            return HttpResponse(
+                "<script>$('#genericModal').removeClass('oh-modal--show');$('.filterButton').click();</script>"
+            )
+        return super().form_valid(form)
+    
+class AssetReportFormView(HorillaFormView):
+    """
+    form view for create button
+    """
+
+    form_class = AssetReportForm
+    model = AssetReport
+    new_display_title = _("Add Asset Report")
+
+    def get_initial(self) -> dict:
+        initial = super().get_initial()
+        initial["asset_id"] = self.kwargs.get("asset_id")
+        return initial
+    
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        asset_id = self.kwargs.get("asset_id")
+        asset = Asset.objects.filter(id=asset_id)
+        self.form.fields["asset_id"].queryset = asset
+        return context
+
+    def form_valid(self, form: AssetReportForm) -> HttpResponse:
+        if form.is_valid():
+            message = _("Asset report added successfully.")
+            asset = form.save()
+            uploaded_files = form.cleaned_data.get('files')
+            if uploaded_files:
+                for file in uploaded_files:
+                    AssetDocuments.objects.create(asset_report=asset, file=file)
+            messages.success(self.request, message)
+            return self.HttpResponse()
+        return super().form_valid(form)
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(permission_required("asset.view_asset"), name="dispatch")
+class AssetCategoryNav(HorillaNavView):
+    """
+    nav bar
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("asset-category-view-search-filter")
+        self.create_attrs = f"""
+                        data-toggle="oh-modal-toggle"
+                        data-target="#genericModal"
+                        hx-get="{reverse('asset-category-creation')}"
+                        hx-target="#genericModalBody"
+                        """
+        # if self.request.user.has_perm(
+        #     "attendance.add_attendanceovertime"
+        # ) or is_reportingmanager(self.request):
+
+        #     self.actions = [
+        #         {
+        #             "action": _("Import"),
+        #             "attrs": """
+        #                 onclick="
+        #                 reqAttendanceBulkApprove();
+        #                 "
+        #                 style="cursor: pointer;"
+        #             """,
+        #         },
+        #         {
+        #             "action": _("Export"),
+        #             "attrs": """
+        #                 onclick="reqAttendanceBulkReject();"
+        #                 style="color:red !important"
+        #             """,
+        #         },
+        #     ]
+        # else:
+        #     self.actions = None
+
+    nav_title = _("Asset Category")
+    filter_body_template = "cbv/asset_category/filter.html"
+    filter_instance = AssetFilter()
+    filter_form_context_name = "form"
+    search_swap_target = "#assetCategoryList"
+
+
+
+
+class AssetCategoryDetailView(HorillaDetailedView):
+    """
+    Detail view of the page
+    """
+
+ 
+
+    def get_context_data(self, **kwargs: Any):
+        """
+        Return context data with the title set to the contract's name.
+        """
+
+        context = super().get_context_data(**kwargs)
+        asset_name = context["asset"].asset_name
+        context["title"] = asset_name
+        return context
+
+    model = Asset
+    header =  False
+    template_name = "cbv/asset_category/detail_view_action.html"
+    body = [
+        (_("Tracking Id"), "asset_tracking_id"),
+        (_("Purchase Date"), "asset_purchase_date"),
+        (_("Cost"), "asset_purchase_cost"),
+        (_("Status"), "get_status_display"),
+        (_("Batch No"), "asset_lot_number_id__lot_number"),
+        (_("Category"), "asset_category_id"),
+    ]
+
+    actions = [
+        {
+            "action": _("Edit"),
+            "icon": "create-outline",
+            "attrs": """
+                        class="oh-btn oh-btn--info w-100"
+                        hx-get='{get_update_url}?instance_ids={ordered_ids}'
+								hx-target="#genericModalBody"
+								data-toggle="oh-modal-toggle"
+								data-target="#genericModal"
+                      """,
+        },
+        {
+            "action": _("Delete"),
+            "icon": "trash-outline",
+
+            "attrs": """
+                    class="oh-btn oh-btn--danger w-100"
+                    hx-confirm="Do you want to delete this asset?"
+                    hx-post="{get_delete_url}?instance_ids={ordered_ids}"
+                    hx-target="#genericModalBody"
+                    """
+        },
+    ]
+
+
+
diff --git a/asset/cbv/asset_history.py b/asset/cbv/asset_history.py
new file mode 100644
index 000000000..fb606eef0
--- /dev/null
+++ b/asset/cbv/asset_history.py
@@ -0,0 +1,119 @@
+"""
+this page is handling the cbv methods of asset history page
+"""
+
+from typing import Any
+from django.urls import reverse
+from django.utils.decorators import method_decorator
+from django.utils.translation import gettext_lazy as _
+from asset.filters import AssetHistoryFilter
+from asset.models import AssetAssignment
+from horilla_views.generic.cbv.views import (
+    HorillaDetailedView,
+    TemplateView,
+    HorillaListView,
+    HorillaNavView,
+)
+from horilla_views.cbv_methods import login_required, permission_required
+
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(permission_required("asset.view_assetassignment"), name="dispatch")
+class AssetHistoryView(TemplateView):
+    """
+    for page view
+    """
+
+    template_name = "cbv/asset_history/asset_history_home.html"
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(permission_required("asset.view_assetassignment"), name="dispatch")
+class AssetHistorylistView(HorillaListView):
+    """
+    list view
+    """
+
+    filter_class = AssetHistoryFilter
+    model = AssetAssignment
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("asset-history-list")
+
+    columns = [
+        (_("Asset"),"asset_id__asset_name", "get_avatar"),
+        (_("Employee"),"assigned_to_employee_id"),
+        (_("Assigned Date"),"assigned_date"),
+        (_("Returned Date"),"return_date"),
+        (_("Return Status"),"return_status")
+    ]
+
+    records_per_page = 5
+
+    sortby_mapping = [
+        ("Asset","asset_id__asset_name", "get_avatar"),
+        ("Employee","assigned_to_employee_id"),
+        ("Assigned Date","assigned_date"),
+        ("Returned Date","return_date"),
+    ]
+
+    row_attrs = """
+                hx-get='{asset_detail_view}?instance_ids={ordered_ids}'
+                hx-target="#genericModalBody"
+                data-target="#genericModal"
+                data-toggle="oh-modal-toggle"
+                """
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(permission_required("asset.view_assetassignment"), name="dispatch")
+class AssetHistoryNavView(HorillaNavView):
+    """
+    navbar
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("asset-history-list")
+
+    nav_title = _("Asset History")
+    filter_body_template = "cbv/asset_history/asset_history_filter.html"
+    filter_form_context_name = "form"
+    filter_instance = AssetHistoryFilter()
+    search_swap_target = "#listContainer"
+
+    group_by_fields = [
+        ("asset_id__asset_name",_("Asset")),
+        ("assigned_to_employee_id",_("Employee")),
+        ("assigned_date",_("Assigned Date")),
+        ("return_date",_("Returned Date")),
+
+    ]
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(permission_required("asset.view_assetassignment"), name="dispatch")
+class AssetHistoryDetailView(HorillaDetailedView):
+    """
+    detail view of the page
+    """
+
+    model = AssetAssignment
+    title = _("Asset Details")
+    header = {
+        "title":"asset_id",
+        "subtitle":"asset_id__asset_category_id",
+        "avatar":"assigned_to_employee_id__get_avatar"
+    }
+    body = [
+        (_("Allocated User"),"assigned_to_employee_id"),
+        (_("Returned Status"),"return_status"),
+        (_("Allocated Date"),"assigned_date"),
+        (_("Returned Date"),"return_date"),
+        (_("Asset"),"asset_id"),
+        (_("Return Description"),"return_condition"),
+        (_("Assign Condition Images"),"assign_condition_img",True),
+        (_("Return Condition Images"),"return_condition_img",True)
+    ]
diff --git a/asset/cbv/asset_tab.py b/asset/cbv/asset_tab.py
new file mode 100644
index 000000000..0f17821ed
--- /dev/null
+++ b/asset/cbv/asset_tab.py
@@ -0,0 +1,119 @@
+"""
+This page is handling the cbv methods of asset tab in profile page.
+"""
+
+from typing import Any
+from django.utils.translation import gettext_lazy as _
+from django.urls import reverse
+from asset.cbv.request_and_allocation import AllocationList, AssetRequestList
+from employee.models import Employee
+from horilla_views.generic.cbv.views import HorillaTabView
+from employee.cbv.employee_profile import EmployeeProfileView
+
+
+class AssetTabListView(AllocationList):
+    """
+    Asset tab in individual view
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        pk = self.request.resolver_match.kwargs.get('pk')
+        self.search_url = reverse("assets-tab-list-view",kwargs= {'pk': pk} )
+        self.view_id = "asset-div"
+
+
+
+    columns = AllocationList.columns + [
+        (_("Status"), "status_display"),
+        (_("Assigned Date"), "assigned_date_display"),
+    ]
+
+    def get_queryset(self):
+        """
+        Returns a filtered queryset of records assigned to a specific employee
+        """
+
+        queryset = super().get_queryset()
+        pk = self.kwargs.get("pk")
+        queryset = queryset.filter(assigned_to_employee_id=pk).exclude(
+            return_status__isnull=False
+        )
+        return queryset
+
+
+class AssetRequestTab(AssetRequestList):
+    """
+    Asset request tab
+    """
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        pk = self.request.resolver_match.kwargs.get('pk')
+        self.search_url = reverse("asset-request-tab-list-view",kwargs= {'pk': pk} )
+        self.view_id = "asset-request-div"
+
+    def get_queryset(self):
+        """
+        Returns a filtered queryset of records for the requested employee.
+        """
+
+        queryset = super().get_queryset()
+        pk = self.kwargs.get("pk")
+        queryset = queryset.filter(requested_employee_id=pk)
+        return queryset
+
+
+class AssetTabView(HorillaTabView):
+    """
+    generic tab view for asset tab
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.view_id = "asset-tab"
+
+    def get_context_data(self, **kwargs):
+        """
+        Adds the employee details and tab information to the context.
+        """
+
+        context = super().get_context_data(**kwargs)
+        pk = self.kwargs.get("pk")
+        context["emp_id"] = pk
+        employee = Employee.objects.get(id=pk)
+        context["instance"] = employee
+        context["tabs"] = [
+            {
+                "title": _("Assets"),
+                "url": f"{reverse('assets-tab-list-view',kwargs={'pk': pk})}",
+            },
+            {
+                "title": _("Asset Request"),
+                "url": f"{reverse('asset-request-tab-list-view',kwargs={'pk': pk})}",
+                "actions": [
+                    {
+                        "action": "Create Request",
+                        "accessibility" :"asset.cbv.accessibility.create_asset_request_accessibility",
+                        "attrs": f"""
+                                data-toggle="oh-modal-toggle"
+                                data-target="#genericModal"
+                                hx-get="{reverse('asset-request-creation')}?pk={pk}"
+                                hx-target="#genericModalBody"
+                                style="cursor: pointer;"
+                                """,
+                    }
+                ],
+            },
+        ]
+        return context
+
+
+EmployeeProfileView.add_tab(
+    tabs=[
+        {
+            "title": "Asset",
+            "view": AssetTabView.as_view(),
+            "accessibility": "asset.cbv.accessibility.asset_accessibility",
+        },
+    ]
+)
diff --git a/asset/cbv/dashboard.py b/asset/cbv/dashboard.py
new file mode 100644
index 000000000..2bbb78ede
--- /dev/null
+++ b/asset/cbv/dashboard.py
@@ -0,0 +1,78 @@
+from typing import Any
+from django.urls import reverse
+from django.utils.decorators import method_decorator
+from asset.cbv.request_and_allocation import AssetAllocationList, AssetRequestList
+from base.methods import filtersubordinates
+from horilla_views.generic.cbv.views import HorillaListView
+from horilla_views.cbv_methods import login_required, permission_required
+
+
+@method_decorator(login_required,name="dispatch")
+class AssetRequestToApprove(AssetRequestList):
+    """
+    Asset request to approve in dashboard
+    """
+
+    columns = [
+        column for column in AssetRequestList.columns if column[1] != "status_col"
+    ]
+
+    bulk_select_option = False
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("dashboard-asset-request-approve")
+
+    def get_queryset(self):
+        queryset = HorillaListView.get_queryset(self)
+        queryset = queryset.filter(
+            asset_request_status="Requested", requested_employee_id__is_active=True
+        )
+        queryset = filtersubordinates(
+            self.request,
+            queryset,
+            "asset.change_assetrequest",
+            field="requested_employee_id",
+        )
+        return queryset
+    
+    header_attrs = {
+        "requested_employee_id": """
+                        style ="width:100px !important"
+                        """,
+        "asset_category_id": """
+                        style ="width:100px !important"
+                        """,
+        "asset_request_date": """
+                        style ="width:100px !important"
+                        """,
+        "status_col": """
+                        style ="width:100px !important"
+                        """,
+        "action": """
+                        style ="width:100px !important"
+                        """
+    }
+
+@method_decorator(login_required,name="dispatch")
+@method_decorator(permission_required("asset.view_assetcategory"),name="dispatch")
+class AllocatedAssetsList(AssetAllocationList):
+    """
+    List of allocated assets in dashboard
+    """
+
+    columns = [
+        column
+        for column in AssetAllocationList.columns
+        if column[1] != "return_status_col"
+    ]
+    bulk_select_option = False
+
+    def get_queryset(self):
+        queryset = super().get_queryset()
+        queryset = queryset.filter(
+            asset_id__asset_status="In use", assigned_to_employee_id__is_active=True
+        )
+        return queryset
+
+    action_method = None
diff --git a/asset/cbv/request_and_allocation.py b/asset/cbv/request_and_allocation.py
new file mode 100644
index 000000000..d56572559
--- /dev/null
+++ b/asset/cbv/request_and_allocation.py
@@ -0,0 +1,544 @@
+"""
+Request and allocation page
+"""
+
+from typing import Any
+from django.http import HttpResponse
+from django.shortcuts import render
+from django.urls import reverse
+from django.utils.translation import gettext_lazy as _
+from django.utils.decorators import method_decorator
+from django.contrib import messages
+from asset.filters import AssetAllocationFilter, AssetRequestFilter, CustomAssetFilter
+from asset.forms import AssetAllocationForm, AssetRequestForm
+from asset.models import Asset, AssetAssignment, AssetRequest, ReturnImages
+from base.methods import filtersubordinates
+from employee.models import Employee
+from notifications.signals import notify
+from horilla.horilla_middlewares import _thread_locals
+from horilla_views.cbv_methods import login_required, permission_required
+from horilla_views.generic.cbv.views import (
+    HorillaDetailedView,
+    HorillaFormView,
+    HorillaListView,
+    HorillaNavView,
+    HorillaTabView,
+    TemplateView,
+)
+
+
+@method_decorator(login_required, name="dispatch")
+class RequestAndAllocationView(TemplateView):
+    """
+    for request and allocation page
+    """
+
+    template_name = "cbv/request_and_allocation/request_and_allocation.html"
+
+
+@method_decorator(login_required, name="dispatch")
+class AllocationList(HorillaListView):
+    """
+    For both  asset allocation and asset tab
+    """
+
+    # view_id = "view-container"
+
+    bulk_update_fields = [
+        "asset_id__expiry_date"
+    ]
+
+    model = AssetAssignment
+    filter_class = AssetAllocationFilter
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("list-asset")
+
+    columns = [
+        (_("Asset"), "asset_id__asset_name", "get_avatar"),
+        (_("Category"), "asset_id__asset_category_id"),
+        (_("Expiry Date"), "asset_id__expiry_date"),
+    ]
+
+
+    header_attrs = {
+        "action" : """
+                   style = "width:180px !important"
+                   """,
+        "asset_id__asset_name" :"""
+                   style = "width:250px !important"
+                   """,
+        "asset_id__asset_category_id" : """
+                   style = "width:250px !important"
+                   """,
+        "asset_id__expiry_date" : """
+                   style = "width:250px !important"
+                   """,
+    }
+
+    sortby_mapping = [
+        ("Category", "asset_id__asset_category_id__asset_category_name"),
+        ("Expiry Date", "asset_id__expiry_date")
+    ]
+
+    action_method = "asset_action"
+
+    row_attrs = """
+                hx-get='{detail_view_asset}?instance_ids={ordered_ids}'
+                hx-target="#genericModalBody"
+                data-target="#genericModal"
+                data-toggle="oh-modal-toggle"
+                """
+
+
+@method_decorator(login_required, name="dispatch")
+class AssetList(AllocationList):
+    """
+    Asset tab
+    """
+
+    # view_id = "assetlist"
+    def get_queryset(self):
+        """
+        Returns a queryset of AssetRequest objects filtered by
+        the current user's employee ID.
+        """
+        queryset = super().get_queryset()
+        employee = self.request.user.employee_get
+        queryset = queryset.filter(assigned_to_employee_id=employee).exclude(
+            return_status__isnull=False
+        )
+        return queryset
+
+    selected_instances_key_id = "assetlistInstances"
+    
+    
+
+
+@method_decorator(login_required, name="dispatch")
+class AssetAllocationList(AllocationList):
+    """
+    Asset allocation tab
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("list-asset-allocation")
+
+    columns = [
+        (
+            _("Allocated User"),
+            "assigned_to_employee_id",
+            "assigned_to_employee_id__get_avatar",
+        ),
+        (_("Asset"), "asset_id"),
+        (_("Assigned Date"), "assigned_date"),
+        (_("Return Date"), "return_status_col"),
+    ]
+
+    sortby_mapping = [
+        ("Allocated User","assigned_to_employee_id__get_full_name"),
+        ("Asset", "asset_id__asset_name"),
+        ("Assigned Date", "assigned_date"),
+        ("Return Date", "return_status_col"),
+    ]
+
+    action_method = "allocation_action"
+
+    row_attrs = """
+                hx-get='{detail_view_asset_allocation}?instance_ids={ordered_ids}'
+                hx-target="#genericModalBody"
+                data-target="#genericModal"
+                data-toggle="oh-modal-toggle"
+                """
+
+
+@method_decorator(login_required, name="dispatch")
+class AssetRequestList(HorillaListView):
+    """
+    Asset Request Tab
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+
+        self.search_url = reverse("list-asset-request")
+        # self.view_id = "view-container"
+        if self.request.user.has_perm("asset.add_assetassignment"):
+            self.action_method = "action_col"
+
+    model = AssetRequest
+    filter_class = AssetRequestFilter
+
+    def get_queryset(self):
+        """
+        Returns a filtered queryset of AssetRequest objects
+        based on user permissions and employee ID.
+        """
+
+        queryset = super().get_queryset()
+        queryset = filtersubordinates(
+            request=self.request,
+            perm="asset.view_assetrequest",
+            queryset=queryset,
+            field="requested_employee_id",
+        ) | queryset.filter(requested_employee_id=self.request.user.employee_get)
+        return queryset
+
+    columns = [
+        (
+            _("Request User"),
+            "requested_employee_id",
+            "requested_employee_id__get_avatar",
+        ),
+        (_("Asset Category"), "asset_category_id"),
+        (_("Requested Date"), "asset_request_date"),
+        (_("Status"), "status_col"),
+    ]
+
+    header_attrs = {
+        "action" : """
+                   style = "width:180px !important"
+                   """
+    }
+
+    sortby_mapping = [
+        ("Request User","requested_employee_id__get_full_name"),
+        ("Asset Category", "asset_category_id__asset_category_name"),
+        ("Requested Date", "asset_request_date"),
+        ("Status", "status_col"),
+    ]
+
+    row_attrs = """
+                hx-get='{detail_view_asset_request}?instance_ids={ordered_ids}'
+                hx-target="#genericModalBody"
+                data-target="#genericModal"
+                data-toggle="oh-modal-toggle"
+                """
+
+
+@method_decorator(login_required, name="dispatch")
+class RequestAndAllocationTab(HorillaTabView):
+    """
+    Tab View
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.tabs = [
+            {
+                "title": _("Asset"),
+                "url": f"{reverse('list-asset')}",
+            },
+            {
+                "title": _("Asset Request"),
+                "url": f"{reverse('list-asset-request')}",
+                "actions": [
+                    {
+                        "action": "Create Request",
+                        "attrs": f"""
+                                data-toggle="oh-modal-toggle"
+                                data-target="#genericModal"
+                                hx-get="{reverse('asset-request-creation')}"
+                                hx-target="#genericModalBody"
+                                style="cursor: pointer;"
+                                """,
+                    }
+                ],
+            },
+        ]
+        if self.request.user.has_perm("asset.view_assetassignment"):
+            self.tabs.append(
+                {
+                    "title": _("Asset Allocation"),
+                    "url": f"{reverse('list-asset-allocation')}",
+                    "actions": [
+                        {
+                            "action": "Create Allocation",
+                            "attrs": f"""
+                                data-toggle="oh-modal-toggle"
+                                data-target="#genericModal"
+                                hx-get="{reverse('asset-allocate-creation')}"
+                                hx-target="#genericModalBody"
+                                style="cursor: pointer;"
+                                """,
+                        }
+                    ],
+                },
+            )
+
+
+@method_decorator(login_required, name="dispatch")
+class RequestAndAllocationNav(HorillaNavView):
+    """
+    Nav bar
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("tab-asset-request-allocation")
+
+    nav_title = _("Asset")
+    filter_instance = AssetAllocationFilter()
+    filter_form_context_name = "asset_allocation_filter_form"
+    filter_body_template = "cbv/request_and_allocation/filter.html"
+    search_swap_target = "#listContainer"
+
+    def get_context_data(self, **kwargs):
+        """
+        context data
+        """
+        context = super().get_context_data(**kwargs)
+        assets_filter_form = CustomAssetFilter()
+        asset_request_filter_form = AssetRequestFilter()
+        context["assets_filter_form"] = assets_filter_form.form
+        context["asset_request_filter_form"] = asset_request_filter_form.form
+        return context
+
+    group_by_fields = [
+        ("requested_employee_id", _("Asset Request / Employee")),
+        ("asset_category_id", _("Asset Request / Asset Category")),
+        ("asset_request_date", _("Asset Request / Request Date")),
+        ("asset_request_status", _("Asset Request / Status")),
+        ("assigned_to_employee_id", _("Asset Allocation / Employee")),
+        ("assigned_date", _("Asset Allocation / Assigned Date")),
+        ("return_date", _("Asset Allocation / Return Date")),
+    ]
+
+
+@method_decorator(login_required, name="dispatch")
+class AssetDetailView(HorillaDetailedView):
+    """
+    detail view of asset tab
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.body = [
+            (_("Description"), "asset_id__asset_description"),
+            (_("Tracking Id"), "asset_id__asset_tracking_id"),
+            (_("Assigned Date"), "assigned_date"),
+            (_("Status"), "asset_detail_status"),
+            (_("Assigned by"), "assigned_by_employee_id"),
+            (_("Batch No"), "asset_id__asset_lot_number_id"),
+            # ("Category","asset_id__asset_category_id")
+        ]
+
+    action_method = "asset_detail_action"
+
+    model = AssetAssignment
+    title = _("Asset Information")
+    header = {
+        "title": "asset_id__asset_name",
+        "subtitle": "asset_id__asset_category_id",
+        "avatar": "get_avatar",
+    }
+
+
+@method_decorator(login_required, name="dispatch")
+class AssetRequestDetailView(HorillaDetailedView):
+    """
+    detail view of asset request tab
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.body = [
+            (_("Asset Category"), "asset_category_id"),
+            (_("Requested Date"), "asset_request_date"),
+            (_("Request Description"), "description"),
+            (_("Status"), "status_col"),
+        ]
+
+    model = AssetRequest
+    title = _("Details")
+    header = {
+        "title": "requested_employee_id",
+        "subtitle": "asset_request_detail_subtitle",
+        "avatar": "requested_employee_id__get_avatar",
+    }
+    action_method = "detail_action_col"
+
+
+@method_decorator(login_required, name="dispatch")
+class AssetAllocationDetailView(HorillaDetailedView):
+    """
+    detail view of asset allocation tab
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.body = [
+            (_("Returned Status"), "return_status"),
+            (_("Allocated User"), "assigned_by_employee_id"),
+            (_("Allocated Date"), "assigned_date"),
+            (_("Return Date"), "return_date"),
+            (_("Asset"), "asset_id"),
+            (_("Return Description"), "return_condition"),
+            (_("Status"), "detail_status"),
+        ]
+
+    model = AssetAssignment
+    title = _("Details")
+    header = {
+        "title": "assigned_to_employee_id",
+        "subtitle": "asset_allocation_detail_subtitle",
+        "avatar": "assigned_to_employee_id__get_avatar",
+    }
+    action_method = "asset_allocation_detail_action"
+
+
+@method_decorator(login_required, name="dispatch")
+class AssetRequestCreateForm(HorillaFormView):
+    """
+    Create Asset request
+    """
+
+    model = AssetRequest
+    form_class = AssetRequestForm
+    template_name = "cbv/request_and_allocation/forms/req_form.html"
+    new_display_title = _("Asset Request")
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        if self.request.GET.get('pk'):
+            pk = self.request.GET.get('pk')
+            self.form.fields["requested_employee_id"].queryset = Employee.objects.filter(
+                id=pk
+            )
+            self.form.fields["requested_employee_id"].initial = pk
+        return context
+
+    def form_valid(self, form: AssetRequestForm) -> HttpResponse:
+        """
+        Handles validation and saving of an AssetRequestForm.
+        """
+        if form.is_valid():
+            message = _("Asset Request Created Successfully")
+            form.save()
+            messages.success(self.request, message)
+            return self.HttpResponse()
+        return super().form_valid(form)
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(permission_required(perm="asset.add_asset"),name="dispatch")
+class AssetAllocationFormView(HorillaFormView):
+    """
+    Create Asset Allocation
+    """
+
+    model = AssetAssignment
+    form_class = AssetAllocationForm
+    template_name = "cbv/request_and_allocation/forms/allo_form.html"
+    new_display_title = _("Asset Allocation")
+
+    
+
+    def form_valid(self, form: AssetAllocationForm) -> HttpResponse:
+        """
+        form valid function
+        """
+        if form.is_valid():
+            asset = form.instance.asset_id
+            asset.asset_status = "In use"
+            asset.save()
+            message = _("Asset allocated Successfully")
+            form.save()
+            request = getattr(_thread_locals, "request", None)
+            files = request.FILES.getlist("asset_condition_img")
+            attachments = []
+            if request.FILES:
+                for file in files:
+                    attachment = ReturnImages()
+                    attachment.image = file
+                    attachment.save()
+                    attachments.append(attachment)
+                form.instance.assign_images.add(*attachments)
+            messages.success(self.request, message)
+            return self.HttpResponse()
+        return super().form_valid(form)
+    
+
+class AssetApproveFormView(HorillaFormView):
+    """
+    Create Asset Allocation
+    """
+
+    model = AssetAssignment
+    form_class = AssetAllocationForm
+    template_name = "cbv/request_and_allocation/forms/asset_approve_form.html"
+    new_display_title = _("Asset Allocation")
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        req_id = self.kwargs.get('req_id')
+        asset_request = AssetRequest.objects.filter(id=req_id).first()
+        asset_category = asset_request.asset_category_id
+        assets = asset_category.asset_set.filter(asset_status="Available")
+        self.form.fields["asset_id"].queryset = assets
+        self.form.fields["assigned_to_employee_id"].initial = asset_request.requested_employee_id
+        self.form.fields["assigned_by_employee_id"].initial = self.request.user.employee_get
+        return context
+    
+    def form_invalid(self, form: Any) -> HttpResponse:
+        if not form.is_valid():
+            errors = form.errors.as_data()
+            return render(
+                self.request, self.template_name, {"form": form, "errors": errors}
+            )
+        return super().form_invalid(form)
+
+
+    def form_valid(self, form: AssetAllocationForm) -> HttpResponse:
+        """
+        form valid function
+        """
+        req_id = self.kwargs.get('req_id')
+        asset_request = AssetRequest.objects.filter(id=req_id).first()
+        if form.is_valid():
+            asset = form.instance.asset_id.id
+            asset = Asset.objects.filter(id=asset).first()
+            asset.asset_status = "In use"
+            asset.save()
+            # form = form.save(commit=False)
+            # form.assigned_by_employee_id = self.request.user.employee_get
+            form.save()
+            asset_request.asset_request_status = "Approved"
+            asset_request.save()
+            request = getattr(_thread_locals, "request", None)
+            files = request.FILES.getlist("asset_condition_img")
+            attachments = []
+            if request.FILES:
+                for file in files:
+                    attachment = ReturnImages()
+                    attachment.image = file
+                    attachment.save()
+                    attachments.append(attachment)
+                form.instance.assign_images.add(*attachments)
+            messages.success(self.request, _("Asset request approved successfully!."))
+            notify.send(
+                self.request.user.employee_get,
+                recipient=asset_request.requested_employee_id.employee_user_id,
+                verb="Your asset request approved!.",
+                verb_ar="تم الموافقة على طلب الأصول الخاص بك!",
+                verb_de="Ihr Antragsantrag wurde genehmigt!",
+                verb_es="¡Su solicitud de activo ha sido aprobada!",
+                verb_fr="Votre demande d'actif a été approuvée !",
+                redirect=reverse("asset-request-allocation-view")
+                + f"?asset_request_date={asset_request.asset_request_date}\
+                &asset_request_status={asset_request.asset_request_status}",
+                icon="bag-check",
+            )
+            return HttpResponse("<script>window.location.reload()</script>")
+        return super().form_valid(form)
+    
+
+
+    
+
+    
+
+    
+
diff --git a/asset/filters.py b/asset/filters.py
index 1a89bcea1..d89724bb6 100644
--- a/asset/filters.py
+++ b/asset/filters.py
@@ -10,11 +10,12 @@ from django.db.models import Q
 from django_filters import FilterSet
 
 from base.methods import reload_queryset
+from horilla.filters import HorillaFilterSet
 
-from .models import Asset, AssetAssignment, AssetCategory, AssetRequest
+from .models import Asset, AssetAssignment, AssetCategory, AssetLot, AssetRequest
 
 
-class CustomFilterSet(FilterSet):
+class CustomFilterSet(HorillaFilterSet):
     """
     Custom FilterSet class that applies specific CSS classes to filter
     widgets.
@@ -373,3 +374,14 @@ class AssetHistoryReGroup:
         ("assigned_date", "Assigned Date"),
         ("return_date", "Return Date"),
     ]
+
+
+class AssetBatchNoFilter(FilterSet):
+
+    search = django_filters.CharFilter(field_name="lot_number", lookup_expr="icontains")
+
+    class Meta:
+        model = AssetLot
+        fields = [
+            "lot_number",
+        ]
diff --git a/asset/forms.py b/asset/forms.py
index e19e482d2..84a20b379 100644
--- a/asset/forms.py
+++ b/asset/forms.py
@@ -60,6 +60,17 @@ class AssetForm(ModelForm):
                 attrs={"onchange": "batchNoChange($(this))"}
             ),
         }
+        labels = {
+            "asset_name": "Asset Name",
+            "asset_description": "Description",
+            "asset_tracking_id": "Tracking ID",
+            "asset_purchase_date": "Purchase Date",
+            "expiry_date": "Expiry Date",
+            "asset_purchase_cost": "Cost",
+            "asset_category_id": "Category",
+            "asset_status": "Status",
+            "asset_lot_number_id": "Batch Number",
+        }
 
     def __init__(self, *args, **kwargs):
         request = getattr(_thread_locals, "request", None)
@@ -165,6 +176,19 @@ class AssetReportForm(ModelForm):
     - __init__: Initializes the form, disabling the 'asset_id' field.
     """
 
+    file = forms.FileField(
+        required=False,
+        widget=forms.TextInput(
+            attrs={
+                "name": "file",
+                "type": "File",
+                "class": "form-control",
+                "multiple": "True",
+                "accept": ".jpeg, .jpg, .png, .pdf",
+            }
+        ),
+    )
+
     class Meta:
         """
         Metadata options for the AssetReportForm.
@@ -176,10 +200,7 @@ class AssetReportForm(ModelForm):
         """
 
         model = AssetReport
-        fields = [
-            "title",
-            "asset_id",
-        ]
+        fields = ["title", "asset_id", "file"]
         exclude = ["is_active"]
 
     def __init__(self, *args, **kwargs):
@@ -191,7 +212,7 @@ class AssetReportForm(ModelForm):
         - **kwargs: Arbitrary keyword arguments.
         """
         super().__init__(*args, **kwargs)
-        self.fields["asset_id"].widget.attrs["disabled"] = "disabled"
+        # self.fields["asset_id"].widget.attrs["disabled"] = "disabled"
 
 
 class AssetCategoryForm(ModelForm):
@@ -199,6 +220,12 @@ class AssetCategoryForm(ModelForm):
     A form for creating and updating AssetCategory instances.
     """
 
+    cols = {
+        "asset_category_name": 12,
+        "asset_category_description": 12,
+        "company_id": 12,
+    }
+
     class Meta:
         """
         Specifies the model and fields to be used for the AssetForm.
@@ -218,6 +245,8 @@ class AssetRequestForm(ModelForm):
     A Django ModelForm for creating and updating AssetRequest instances.
     """
 
+    cols = {"requested_employee_id": 12, "asset_category_id": 12, "description": 12}
+
     class Meta:
         """
         Specifies the model and fields to be used for the AssetRequestForm.
@@ -258,10 +287,16 @@ class AssetRequestForm(ModelForm):
         }
 
     def __init__(self, *args, **kwargs):
-        user = kwargs.pop("user", None)
-        super().__init__(*args, **kwargs)
+        # user = kwargs.pop("user", None)
+        request = getattr(_thread_locals, "request", None)
+        user = request.user
+        super(AssetRequestForm, self).__init__(
+            *args,
+            **kwargs,
+        )
         reload_queryset(self.fields)
         if user is not None and user.has_perm("asset.add_assetrequest"):
+
             self.fields["requested_employee_id"].queryset = Employee.objects.all()
             self.fields["requested_employee_id"].initial = Employee.objects.filter(
                 id=user.employee_get.id
@@ -280,8 +315,16 @@ class AssetAllocationForm(ModelForm):
     A Django ModelForm for creating and updating AssetAssignment instances.
     """
 
+    cols = {
+        "assigned_to_employee_id": 12,
+        "asset_id": 12,
+        "assigned_by_employee_id": 12,
+    }
+
     def __init__(self, *args, **kwargs):
-        super().__init__(*args, **kwargs)
+        request = getattr(_thread_locals, "request", None)
+        user = request.user
+        super(AssetAllocationForm, self).__init__(*args, **kwargs)
         reload_queryset(self.fields)
         self.fields["asset_id"].queryset = Asset.objects.filter(
             asset_status="Available"
@@ -310,6 +353,7 @@ class AssetAllocationForm(ModelForm):
             "return_condition",
             "assigned_date",
             "return_images",
+            "assign_images",
             "is_active",
         ]
         widgets = {
@@ -403,6 +447,8 @@ class AssetBatchForm(ModelForm):
     A Django ModelForm for creating or updating AssetLot instances.
     """
 
+    cols = {"lot_description": 12, "lot_number": 12}
+
     class Meta:
         """
         Specifies the model and fields to be used for the AssetBatchForm.
diff --git a/asset/models.py b/asset/models.py
index 64dc056dc..2d9796f8a 100644
--- a/asset/models.py
+++ b/asset/models.py
@@ -7,12 +7,15 @@ within an Asset Management System.
 
 from django.core.exceptions import ValidationError
 from django.db import models
+from django.urls import reverse, reverse_lazy
+from django.utils.html import format_html
 from django.utils.translation import gettext_lazy as _
 
 from base.horilla_company_manager import HorillaCompanyManager
 from base.models import Company
 from employee.models import Employee
 from horilla.models import HorillaModel
+from horilla_views.cbv_methods import render_template
 
 
 class AssetCategory(HorillaModel):
@@ -72,6 +75,49 @@ class AssetLot(HorillaModel):
     def __str__(self):
         return f"{self.lot_number}"
 
+    def actions(self):
+        """
+        This method for get custom column for action.
+        """
+
+        return render_template(
+            path="cbv/asset_batch_no/actions.html",
+            context={"instance": self},
+        )
+
+    def asset_batch_detail(self):
+        """
+        detail view
+        """
+
+        url = reverse("asset-batch-detail-view", kwargs={"pk": self.pk})
+
+        return url
+
+    def assets_column(self):
+        """
+        This method for get custom column for action.
+        """
+
+        return render_template(
+            path="cbv/asset_batch_no/assets_col.html",
+            context={"instance": self},
+        )
+
+    def get_update_url(self):
+        """
+        This method to get update url
+        """
+        url = reverse_lazy("asset-batch-update", kwargs={"pk": self.pk})
+        return url
+
+    def get_delete_url(self):
+        """
+        This method to get delete url
+        """
+        url = reverse_lazy("asset-batch-number-delete", kwargs={"batch_id": self.pk})
+        return url
+
 
 class Asset(HorillaModel):
     """
@@ -131,6 +177,36 @@ class Asset(HorillaModel):
     def __str__(self):
         return f"{self.asset_name}-{self.asset_tracking_id}"
 
+    def get_status_display(self):
+        """
+        Display status
+        """
+        return dict(self.ASSET_STATUS).get(self.asset_status)
+
+    def detail_view_action(self):
+        """
+        This method for get custome coloumn .
+        """
+
+        return render_template(
+            path="cbv/asset_category/detail_view_action.html",
+            context={"instance": self},
+        )
+
+    def get_update_url(self):
+        """
+        This method to get update url
+        """
+        url = reverse_lazy("asset-update", kwargs={"pk": self.pk})
+        return url
+
+    def get_delete_url(self):
+        """
+        This method to get delete url
+        """
+        url = reverse_lazy("asset-delete", kwargs={"asset_id": self.pk})
+        return url
+
     def clean(self):
         existing_asset = Asset.objects.filter(
             asset_tracking_id=self.asset_tracking_id
@@ -274,6 +350,162 @@ class AssetAssignment(HorillaModel):
     def __str__(self):
         return f"{self.assigned_to_employee_id} --- {self.asset_id} --- {self.return_status}"
 
+    def get_avatar(self):
+        """
+        Method will retun the api to the avatar or path to the profile image
+        """
+        url = f"https://ui-avatars.com/api/?name={self.asset_id}&background=random"
+        return url
+
+    def asset_detail_view(self):
+        """
+        for detail view of page
+        """
+        url = reverse("asset-history-detail-view", kwargs={"pk": self.pk})
+        return url
+
+    def assign_condition_img(self):
+        """
+        This method for get custome coloumn .
+        """
+
+        return render_template(
+            path="cbv/asset_history/assign_condition.html",
+            context={"instance": self},
+        )
+
+    def return_condition_img(self):
+        """
+        This method for get custome coloumn .
+        """
+
+        return render_template(
+            path="cbv/asset_history/return_condition.html",
+            context={"instance": self},
+        )
+
+    def asset_action(self):
+        """
+        This method for get custom column for asset tab action.
+        """
+
+        return render_template(
+            path="cbv/request_and_allocation/asset_actions.html",
+            context={"instance": self},
+        )
+
+    def return_status_col(self):
+        """
+        This method for get custom column for return date.
+        """
+
+        return render_template(
+            path="cbv/request_and_allocation/return_status.html",
+            context={"instance": self},
+        )
+
+    def allocation_action(self):
+        """
+        This method for get custom column for asset allocation tab actions.
+        """
+
+        return render_template(
+            path="cbv/request_and_allocation/asset_allocation_action.html",
+            context={"instance": self},
+        )
+
+    def asset_detail_action(self):
+        """
+        This method for get custom column for asset detail  actions.
+        """
+
+        return render_template(
+            path="cbv/request_and_allocation/asset_detail_action.html",
+            context={"instance": self},
+        )
+
+    def asset_allocation_detail_action(self):
+        """
+        This method for get custom column for asset detail  actions.
+        """
+
+        return render_template(
+            path="cbv/request_and_allocation/detail_action_asset_allocation.html",
+            context={"instance": self},
+        )
+
+    def get_avatar(self):
+        """
+        Method will retun the api to the avatar or path to the question template
+        """
+        url = f"https://ui-avatars.com/api/?name={self.asset_id.asset_name}&background=random"
+        return url
+
+    def detail_view_asset(self):
+        """
+        detail view
+        """
+
+        url = reverse("asset-detail-view", kwargs={"pk": self.pk})
+        return url
+
+    def detail_view_asset_allocation(self):
+        """
+        detail view
+        """
+
+        url = reverse("asset-allocation-detail-view", kwargs={"pk": self.pk})
+        return url
+
+    def asset_detail_status(self):
+        """
+        Asset tab detail status
+        """
+
+        return (
+            '<span class="link-primary">Requested to return</span>'
+            if self.return_request
+            else '<span style = "color : yellowgreen;">In use</span>'
+        )
+
+    def detail_status(self):
+        """
+        Asset allocation  tab detail status
+        """
+        if self.return_date:
+            status = '<span style = "color : red;" >Returned</span>'
+        elif self.return_request:
+            status = '<span class="link-primary">Requested to return</span>'
+        else:
+            status = '<span style = "color : yellowgreen;" >Allocated</span>'
+        return status
+
+    def asset_allocation_detail_subtitle(self):
+        """
+        Return subtitle containing both department and job position information.
+        """
+        return f"{self.assigned_to_employee_id.employee_work_info.department_id} / {self.assigned_to_employee_id.employee_work_info.job_position_id}"
+
+    def status_display(self):
+        status = self.asset_id.asset_status
+        color_class = "oh-dot--warning"  # Adjust based on your status
+        return format_html(
+            '<span class="oh-dot oh-dot--small me-1 oh-dot--color {color_class}"></span>'
+            '<span class="link-warning">{status}</span>',
+            color_class=color_class,
+            status=status,
+        )
+
+    def assigned_date_display(self):
+        date_col = self.assigned_date
+        color_class = "oh-dot--success"  # Adjust based on your status
+        return format_html(
+            '<span class="oh-dot oh-dot--small me-1 oh-dot--color {color_class}"></span>'
+            '<span class="link-success dateformat_changer">{date_col}</span>',
+            color_class=color_class,
+            date_col=date_col,
+        )
+
 
 class AssetRequest(HorillaModel):
     """
@@ -314,6 +546,49 @@ class AssetRequest(HorillaModel):
         verbose_name = _("Asset Request")
         verbose_name_plural = _("Asset Requests")
 
+    def status_col(self):
+        """
+        This method for get custom coloumn for status.
+        """
+
+        return render_template(
+            path="cbv/request_and_allocation/status.html",
+            context={"instance": self},
+        )
+
+    def action_col(self):
+        """
+        This method for get custom coloumn for action.
+        """
+
+        return render_template(
+            path="cbv/request_and_allocation/asset_request_action.html",
+            context={"instance": self},
+        )
+
+    def detail_action_col(self):
+        """
+        This method for get custom coloumn for detail action.
+        """
+
+        return render_template(
+            path="cbv/request_and_allocation/asset_request_detail_action.html",
+            context={"instance": self},
+        )
+
+    def asset_request_detail_subtitle(self):
+        """
+        Return subtitle containing both department and job position information.
+        """
+        return f"{self.requested_employee_id.employee_work_info.department_id} / {self.requested_employee_id.employee_work_info.job_position_id}"
+
+    def detail_view_asset_request(self):
+        """
+        detail view
+        """
+        url = reverse("asset-request-detail-view", kwargs={"pk": self.pk})
+        return url
+
     def status_html_class(self):
         COLOR_CLASS = {
             "Approved": "oh-dot--success",
diff --git a/asset/templates/asset/asset_information.html b/asset/templates/asset/asset_information.html
index e45792d07..331553419 100644
--- a/asset/templates/asset/asset_information.html
+++ b/asset/templates/asset/asset_information.html
@@ -133,8 +133,8 @@
             <div class="oh-modal__button-container text-center mt-3">
                 <div class="oh-btn-group">
                     {% if perms.asset.change_asset %}
-                        <a hx-get="{% url 'asset-update' asset_id=asset.id %}?{{pg}}&requests_ids={{requests_ids}}"
-                            data-toggle="oh-modal-toggle" data-target="#objectUpdateModal" hx-target="#objectUpdateModalTarget"
+                        <a hx-get="{% url 'asset-update' pk=asset.id %}?{{pg}}&requests_ids={{requests_ids}}"
+                            data-toggle="oh-modal-toggle" data-target="#genericModal" hx-target="#genericModalBody"
                             class="oh-btn oh-btn--info w-100">
                             <ion-icon name="create-outline" role="img" class="md hydrated"
                                 aria-label="create outline"></ion-icon>{% trans "Edit" %}
diff --git a/asset/templates/asset/asset_list.html b/asset/templates/asset/asset_list.html
index 7c29e7c44..772b0f75d 100644
--- a/asset/templates/asset/asset_list.html
+++ b/asset/templates/asset/asset_list.html
@@ -37,9 +37,9 @@
         <div
           class="oh-sticky-table__tr"
           data-toggle="oh-modal-toggle"
-          data-target="#objectDetailsModal"
-          hx-get="{% url 'asset-information' asset_id=asset.id %}?{{pd}}&requests_ids={{requests_ids}}"
-          hx-target="#objectDetailsModalTarget"
+          data-target="#genericModal"
+          hx-get="{% url 'asset-information' pk=asset.id %}?{{pd}}&instance_ids={{requests_ids}}"
+          hx-target="#genericModalBody"
           id="assetDelete{{asset.id}}"
           draggable="true"
           >
@@ -68,10 +68,10 @@
                     <a
                       class="oh-btn oh-btn--light-bkg w-100"
                       data-toggle="oh-modal-toggle"
-                      data-target="#objectUpdateModal"
-                      hx-get="{% url 'asset-update'  asset_id=asset.id %}?asset_under=asset_filter&{{request.GET.urlencode}}"
+                      data-target="#genericModal"
+                      hx-get="{% url 'asset-update'  pk=asset.id %}?asset_under=asset_filter&{{pg}}"
                       title="{% trans 'Update' %}"
-                      hx-target="#objectUpdateModalTarget"
+                      hx-target="#genericModalBody"
                       onclick="event.stopPropagation()"
                       id="oh-btn-asset-update-modal"
                     >
@@ -86,10 +86,10 @@
                     <a
                       class="oh-btn oh-btn--light-bkg w-100"
                       data-toggle="oh-modal-toggle"
-                      data-target="#objectUpdateModal"
-                      hx-get="{% url 'asset-update'  asset_id=asset.id %}?{{request.GET.urlencode}}"
+                      data-target="#genericModal"
+                      hx-get="{% url 'asset-update'  pk=asset.id %}?{{pg}}"
                       title="{% trans 'Update' %}"
-                      hx-target="#objectUpdateModalTarget"
+                      hx-target="#genericModalBody"
                       onclick="event.stopPropagation()"
                       id="oh-btn-asset-update-modal"
                     >
@@ -106,9 +106,9 @@
                   <a
                     class="oh-btn oh-btn--light-bkg w-100"
                     data-toggle="oh-modal-toggle"
-                    data-target="#objectCreateModal"
-                    hx-get="{% url 'duplicate-asset' asset.id %}?{{request.GET.urlencode}}"
-                    hx-target="#objectCreateModalTarget"
+                    data-target="#genericModal"
+                    hx-get="{% url 'duplicate-asset' asset.id %}?{{pg}}"
+                    hx-target="#genericModalBody"
                     title="{% trans 'Duplicate' %}"
                     onclick="event.stopPropagation()"
                     style="cursor: pointer"
diff --git a/asset/templates/asset/dashboard.html b/asset/templates/asset/dashboard.html
index 20a8d5e58..eac15eeca 100644
--- a/asset/templates/asset/dashboard.html
+++ b/asset/templates/asset/dashboard.html
@@ -9,6 +9,7 @@
 </style>
 
 <!-- End of Navigation -->
+ {% include "generic/components.html" %}
 <main :class="sidebarOpen ? 'oh-main__sidebar-visible' : ''">
     <div class="oh-wrapper">
         <div class="d-none mt-5" id="back_button" style="width:10%">
diff --git a/asset/templates/batch/asset_batch_number_list.html b/asset/templates/batch/asset_batch_number_list.html
index 952cfcc86..7b05e6866 100644
--- a/asset/templates/batch/asset_batch_number_list.html
+++ b/asset/templates/batch/asset_batch_number_list.html
@@ -77,35 +77,53 @@
                     hx-get="{% url 'asset-batch-number-search' %}?{{pg}}" hx-target="#AssetBatchList" />
                 <span class="oh-pagination__label">{% trans "of" %} {{ batch_numbers.paginator.num_pages }}</span>
             </div>
-            <ul class="oh-pagination__items">
-                {% if batch_numbers.has_previous %}
-                    <li class="oh-pagination__item oh-pagination__item--wide">
-                        <a hx-get="{% url 'asset-batch-number-search' %}?{{pg}}&page=1" class="oh-pagination__link"
-                            hx-target="#AssetBatchList">{% trans "First" %}</a>
-                    </li>
-                    <li class="oh-pagination__item oh-pagination__item--wide">
-                        <a hx-get="{% url 'asset-batch-number-search' %}?{{pg}}&page={{ batch_numbers.previous_page_number }}"
-                            class="oh-pagination__link" hx-target="#AssetBatchList">
-                            {% trans "Previous" %}
-                        </a>
-                    </li>
-                {% endif %}
-                {% if batch_numbers.has_next %}
-                    <li class="oh-pagination__item oh-pagination__item--wide">
-                        <a hx-get="{% url 'asset-batch-number-search' %}?{{pg}}&page={{ batch_numbers.next_page_number }}"
-                            class="btn btn-outline-secondary" hx-target="#AssetBatchList">
-                            {% trans "Next" %}
-                        </a>
-                    </li>
-                    <li class="oh-pagination__item oh-pagination__item--wide">
-                        <a hx-get="{% url 'asset-batch-number-search' %}?{{pg}}&page={{ batch_numbers.paginator.num_pages }}"
-                            hx-target="#AssetBatchList" class="oh-pagination__link">
-                            {% trans "Last" %}
-                        </a>
-                    </li>
-                {% endif %}
-            </ul>
-        </nav>
+            {% if perms.asset.change_assetlot or perms.asset.delete_assetlot %}
+              <div class="oh-sticky-table__td">
+                <div class="oh-btn-group">
+                  {% if perms.asset.change_assetlot %}
+                    <a
+                      class="oh-btn oh-btn--light-bkg w-100"
+                      title="{% trans 'Update' %}"
+                      data-toggle="oh-modal-toggle"
+                      data-target="#genericModal"
+                      hx-put="{% url 'asset-batch-update' batch_number.id %}"
+                      hx-target="#genericModalBody"
+                      >
+                      <ion-icon
+                        name="create-outline"
+                        role="img"
+                        class="md hydrated"
+                        aria-label="create outline"
+                      ></ion-icon>
+                    </a>
+                  {% endif %}
+                  {% if perms.asset.delete_assetlot %}
+                    <form
+                      hx-confirm="{% trans 'Do you want to delete this batch number ?' %}"
+                      hx-post="{% url 'asset-batch-number-delete' batch_id=batch_number.id %}?{{pg}}"
+                      hx-target="#AssetBatchList"
+                      style="display: contents"
+                    >
+                      {% csrf_token %}
+                      <button
+                        class="oh-btn oh-btn--danger-outline w-100"
+                        title="{% trans 'Delete' %}"
+                      >
+                        <ion-icon
+                          name="trash-outline"
+                          role="img"
+                          class="md hydrated"
+                          aria-label="trash outline"
+                        ></ion-icon>
+                      </button>
+                    </form>
+                  {% endif %}
+                </div>
+              </div>
+            {% endif %}
+          </div>
+        {% endfor %}
+      </div>
     </div>
     <!-- end of pagination -->
 </div>
diff --git a/asset/templates/category/asset_category.html b/asset/templates/category/asset_category.html
index 63176ab4d..92acc3629 100644
--- a/asset/templates/category/asset_category.html
+++ b/asset/templates/category/asset_category.html
@@ -72,7 +72,7 @@
                                             <li class="oh-dropdown__item">
                                                 <a href="#" class="oh-dropdown__link " data-toggle="oh-modal-toggle"
                                                     onclick="event.stopPropagation()" data-target="#objectUpdateModal"
-                                                    hx-get="{% url 'asset-category-update' cat_id=asset_category.id %}?{{pg}}"
+                                                    hx-get="{% url 'asset-category-update' pk=asset_category.id %}?{{pg}}"
                                                     hx-target="#objectUpdateModalTarget">{% trans "Edit" %}</a>
                                             </li>
                                         {% endif %}
diff --git a/asset/templates/category/asset_category_view.html b/asset/templates/category/asset_category_view.html
index ad0b08263..61190dd43 100644
--- a/asset/templates/category/asset_category_view.html
+++ b/asset/templates/category/asset_category_view.html
@@ -43,8 +43,9 @@
     </div>
 {% endif %}
 <!-- end of messages -->
-
-
+{% include "generic/components.html" %}
+{% comment %} <div hx-get="{% url "asset-category-nav" %}" hx-trigger="load">
+</div>  {% endcomment %}
 <main :class="sidebarOpen ? 'oh-main__sidebar-visible' : ''">
     <section class="oh-wrapper oh-main__topbar" x-data="{searchShow: false}">
         <div class="oh-main__titlebar oh-main__titlebar--left">
@@ -101,10 +102,11 @@
                                                 </div>
                                             </div>
                                         </div>
-                                        <div class="oh-dropdown__filter-footer">
-                                            <button class="oh-btn oh-btn--secondary oh-btn--small  w-100 filterButton">{% trans "Filter" %}</button>
-                                        </div>
-                                    </form>
+                                    </div>
+                                    <div class="oh-dropdown__filter-footer">
+                                        <button id="filterButton" class="oh-btn oh-btn--secondary oh-btn--small  w-100 filterButton">{% trans "Filter" %}</button>
+                                    </div>
+                                </form>
                                 </div>
                             </div> -->
                             <div class="oh-accordion">
@@ -191,11 +193,13 @@
                 <div class="oh-btn-group ml-2">
                     {% if perms.asset.add_assetcategory %}
                         <div>
-                            <a href="#" class="oh-btn oh-btn--secondary oh-btn--shadow" data-toggle="oh-modal-toggle"
-                                data-target="#objectCreateModal" hx-get="{%url 'asset-category-creation' %}"
-                                hx-target="#objectCreateModalTarget">
-                                <ion-icon name="add-outline"></ion-icon>
-                                {% trans "Create" %}
+                            <a  href="#" class="oh-btn oh-btn--secondary oh-btn--shadow"
+                            data-toggle="oh-modal-toggle"
+                            data-target="#genericModal"
+                            hx-get="{%url 'asset-category-creation' %}"
+                            hx-target="#genericModalBody">
+                            <ion-icon name="add-outline"></ion-icon>
+                            {% trans "Create" %}
                             </a>
                         </div>
                     {% endif %}
diff --git a/asset/templates/cbv/asset_batch_no/actions.html b/asset/templates/cbv/asset_batch_no/actions.html
new file mode 100644
index 000000000..c3f6600c1
--- /dev/null
+++ b/asset/templates/cbv/asset_batch_no/actions.html
@@ -0,0 +1,45 @@
+{% load i18n %}
+{% if perms.asset.change_assetlot or perms.asset.delete_assetlot %}
+              <div>
+                <div class="oh-btn-group">
+                  {% if perms.asset.change_assetlot %}
+                    <a
+                      class="oh-btn oh-btn--light-bkg w-100"
+                      title="{% trans 'Update' %}"
+                      data-toggle="oh-modal-toggle"
+                      data-target="#genericModal"
+                      hx-put="{% url 'asset-batch-update' instance.id %}"
+                      hx-target="#genericModalBody"
+                      >
+                      <ion-icon
+                        name="create-outline"
+                        role="img"
+                        class="md hydrated"
+                        aria-label="create outline"
+                      ></ion-icon>
+                    </a>
+                  {% endif %} 
+                  {% if perms.asset.delete_assetlot %}
+                    <form
+                      hx-confirm="{% trans 'Do you want to delete this batch number ?' %}"
+                      hx-post="{% url 'asset-batch-number-delete' batch_id=instance.id %}?{{pg}}"
+                      hx-target="#AssetBatchList"
+                      style="display: contents"
+                    >
+                      {% csrf_token %}
+                      <button
+                        class="oh-btn oh-btn--danger-outline w-100"
+                        title="{% trans 'Delete' %}"
+                      >
+                        <ion-icon
+                          name="trash-outline"
+                          role="img"
+                          class="md hydrated"
+                          aria-label="trash outline"
+                        ></ion-icon>
+                      </button>
+                    </form>
+                  {% endif %}
+                </div>
+            </div>
+                  {% endif%}
\ No newline at end of file
diff --git a/asset/templates/cbv/asset_batch_no/asset_batch_no.html b/asset/templates/cbv/asset_batch_no/asset_batch_no.html
new file mode 100644
index 000000000..e9211df61
--- /dev/null
+++ b/asset/templates/cbv/asset_batch_no/asset_batch_no.html
@@ -0,0 +1,43 @@
+{% extends "index.html" %}
+{% load i18n %}{% load static %}
+
+
+{% block content %}
+<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+
+
+
+
+<meta name="csrf-token" content="{{ csrf_token }}">
+
+
+
+ <div hx-get="{% url "asset-batch-nav" %}" hx-trigger="load">
+</div>
+
+
+{% include "generic/components.html" %}
+
+
+<div
+    class="oh-checkpoint-badge mb-2"
+    id="selectedInstances"
+    data-ids="[]"
+    data-clicked=""
+    style="display: none"
+  ></div>
+
+  
+  <div 
+  class="oh-wrapper" 
+  id="listContainer">
+  <div class="animated-background">
+  </div>
+</div>
+
+
+
+
+    
+{% endblock %}
\ No newline at end of file
diff --git a/asset/templates/cbv/asset_batch_no/assets_col.html b/asset/templates/cbv/asset_batch_no/assets_col.html
new file mode 100644
index 000000000..4a41b29f5
--- /dev/null
+++ b/asset/templates/cbv/asset_batch_no/assets_col.html
@@ -0,0 +1,5 @@
+{% load i18n %}
+<a onclick="event.stopPropagation();" href="{% url "asset-category-view" %}?asset_lot_number_id={{instance.id}}" style="cursor: pointer;" class="oh-badge oh-badge--secondary oh-badge--small oh-badge--round mr-1">
+    {{instance.asset_set.count}} 
+    {% trans "Assets" %}
+   </a>
\ No newline at end of file
diff --git a/asset/templates/cbv/asset_category/detail_view_action.html b/asset/templates/cbv/asset_category/detail_view_action.html
new file mode 100644
index 000000000..658811c57
--- /dev/null
+++ b/asset/templates/cbv/asset_category/detail_view_action.html
@@ -0,0 +1,19 @@
+{% load i18n %}
+{% include 'generic/horilla_detailed_view.html'%}
+
+{% if messages %}
+<div class="oh-wrapper">
+  {% for message in messages %}
+  <div class="oh-alert-container">
+    <div class="oh-alert oh-alert--animated {{message.tags}}">
+      {{ message }}
+    </div>
+  </div>
+  
+{%if message.tags == "oh-alert--success" %}
+ <span class="oh-span__class" hx-trigger="load" hx-get="{%url 'asset-list' cat_id=instance.asset_category_id.id %}?{{pd}}"
+  hx-target="#assetCategory{{instance.asset_category_id.id}}"></span> 
+  {% endif %} 
+  {% endfor %}
+</div>
+{% endif %}
\ No newline at end of file
diff --git a/asset/templates/cbv/asset_category/filter.html b/asset/templates/cbv/asset_category/filter.html
new file mode 100644
index 000000000..fd2ac9588
--- /dev/null
+++ b/asset/templates/cbv/asset_category/filter.html
@@ -0,0 +1,53 @@
+{% load i18n %}
+{% load assets_custom_filter %}
+{% load widget_tweaks %}
+<div class="oh-dropdown__filter-body">
+    <div class="oh-accordion">
+        <div class="oh-accordion-header">{% trans "Asset" %}</div>
+        <div class="oh-accordion-body">
+            {% comment %} <form hx-get="{%url 'asset-category-view-search-filter' %}" name="asset_list" hx-target="#assetCategoryList" hx-swap="innerHTML" id="filterForm2"> {% endcomment %}
+            <div class="row">
+                <div class="col-sm-12 col-md-12 col-lg-6">
+                    <div class="oh-input-group">
+                        <label class="oh-label" for="{{form.asset_name.id_for_label}}">{% trans "Asset Name" %}</label>
+                        {{form.asset_name}}
+                    </div>
+                    <div class="oh-input-group">
+                        <label class="oh-label" for="{{form.asset_tracking_id.id_for_label}}">{% trans "Tracking Id" %}</label>
+                        {{form.asset_tracking_id}}
+                    </div>
+
+                </div>
+                <div class="col-sm-12 col-md-12 col-lg-6">
+                    <div class="oh-input-group">
+                        <label class="oh-label" for="{{form.asset_purchase_date.id_for_label}}">{% trans "Purchase Date" %}</label>
+                        {{form.asset_purchase_date |attr:"type:date"}}
+                    </div>
+                    <div class="oh-input-group">
+                        <label class="oh-label" for="{{form.asset_purchase_cost.id_for_label}}">{% trans "Purchase Cost" %}</label>
+                        {{form.asset_purchase_cost}}
+                    </div>
+                </div>
+                <div class="col-sm-12 col-md-12 col-lg-6">
+                    <div class="oh-input-group">
+                        <label class="oh-label" for="{{form.asset_lot_number_id.id_for_label}}">{% trans "Asset Batch Number" %}</label>
+                        {{form.asset_lot_number_id}}
+                    </div>
+                </div>
+                <div class="col-sm-12 col-md-12 col-lg-6">
+                    <div class="oh-input-group">
+                        <label class="oh-label" for="{{form.asset_category_id.id_for_label}}">{% trans "Category" %}</label>
+                        {{form.asset_category_id}}
+                    </div>
+                </div>
+                <div class="col-sm-12 col-md-12 col-lg-12">
+                    <div class="oh-input-group">
+                        <label class="oh-label" for="{{form.asset_status.id_for_label}}">{% trans "Status" %}</label>
+                        {{form.asset_status}}
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    {% comment %} </form> {% endcomment %}
+</div>
\ No newline at end of file
diff --git a/asset/templates/cbv/asset_history/asset_history_filter.html b/asset/templates/cbv/asset_history/asset_history_filter.html
new file mode 100644
index 000000000..daeb6849e
--- /dev/null
+++ b/asset/templates/cbv/asset_history/asset_history_filter.html
@@ -0,0 +1,112 @@
+{% load static %}
+{% load i18n %}
+{% load mathfilters %}
+{% load widget_tweaks %}
+<div class="oh-dropdown__filter-body">
+    <div class="oh-accordion">
+        <div class="oh-accordion-header">{% trans "Asset History" %}</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"
+                            for="{{form.assigned_to_employee_id.id_for_label}}"
+                            >{% trans "Allocated User" %}</label
+                        >
+                        {{form.assigned_to_employee_id}}
+                    </div>
+                    <div class="oh-input-group">
+                        <label
+                            class="oh-label"
+                            for="{{form.asset_id.id_for_label}}"
+                            >{% trans "Asset" %}</label
+                        >
+                        {{form.asset_id}}
+                    </div>
+                </div>
+                <div class="col-sm-12 col-md-12 col-lg-6">
+                    <div class="oh-input-group">
+                        <label
+                            class="oh-label"
+                            for="{{form.assigned_date.id_for_label}}"
+                            >{% trans "Asset Allocated Date" %}</label
+                        >
+                        {{ form.assigned_date |attr:"type:date" }}
+                    </div>
+                    <div class="oh-input-group">
+                        <label
+                            class="oh-label"
+                            for="{{form.return_status.id_for_label}}"
+                            >{% trans "Status" %}</label
+                        >
+                        {{form.return_status}}
+                    </div>
+                </div>
+                <div class="col-sm-12 col-md-12 col-lg-6">
+                    <div class="oh-input-group">
+                        <label
+                            class="oh-label"
+                            for="{{form.return_date.id_for_label}}"
+                            >{% trans "Return Date" %}</label
+                        >
+                        {{ form.return_date|attr:"type:date" }}
+                    </div>
+                </div>
+                <div class="col-sm-12 col-md-12 col-lg-6">
+                    <div class="oh-input-group">
+                        <label
+                            class="oh-label"
+                            for="{{form.assigned_by_employee_id.id_for_label}}"
+                            >{% trans "Allocated By" %}</label
+                        >
+                        {{form.assigned_by_employee_id}}
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div><div class="oh-accordion">
+        <div class="oh-accordion-header">{% trans "Advanced" %}</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"
+                            for="{{form.return_date_gte.id_for_label}}"
+                            >{% trans "Return Date Greater Or Equal" %}</label
+                        >
+                        {{form.return_date_gte}}
+                    </div>
+                    <div class="oh-input-group">
+                        <label
+                            class="oh-label"
+                            for="{{form.return_date_lte.id_for_label}}"
+                            >{% trans "Assign Date Greater Or Equal" %}</label
+                        >
+                        {{form.assigned_date_gte}}
+                    </div>
+                </div>
+
+                <div class="col-sm-12 col-md-12 col-lg-6">
+                    <div class="oh-input-group">
+                        <label
+                            class="oh-label"
+                            for="{{form.return_date_gte.id_for_label}}"
+                            >{% trans "Return Date lesser Or Equal" %}</label
+                        >
+                        {{form.return_date_lte}}
+                    </div>
+                    <div class="oh-input-group">
+                        <label
+                            class="oh-label"
+                            for="{{form.return_date_lte.id_for_label}}"
+                            >{% trans "Assign Date Lesser Or Equal" %}</label
+                        >
+                        {{form.assigned_date_lte}}
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/asset/templates/cbv/asset_history/asset_history_home.html b/asset/templates/cbv/asset_history/asset_history_home.html
new file mode 100644
index 000000000..c38d5e27c
--- /dev/null
+++ b/asset/templates/cbv/asset_history/asset_history_home.html
@@ -0,0 +1,118 @@
+{% extends "index.html" %}
+{% load i18n %}
+{% load static %}
+{% block content %}
+
+
+<style>
+    .canceled--dot{
+        background-color:red;
+      }
+      .approved--dot{
+        background-color:green;
+      }
+      .approved-True{
+        border-left: 3.4px solid yellowgreen !important;
+        border-radius: 4px 0 0 4px;
+      
+      }
+      .canceled-True {
+      
+        border-left: 3.4px solid red !important;
+        border-radius: 4px 0 0 4px;
+      
+      }
+    </style>
+<div hx-get="{% url "asset-history-nav" %}" hx-trigger="load">
+</div> 
+
+{% include "generic/components.html" %}
+<div
+    class="oh-checkpoint-badge mb-2"
+    id="selectedInstances"
+    data-ids="[]"
+    data-clicked=""
+    style="display: none"
+  ></div>
+
+<div class="oh-wrapper"  
+ id="listContainer">
+  <div class="animated-background">
+</div>
+</div>
+
+
+<script src="{% static 'cbv/work_type_request/work_request_bulk_action.js' %}"></script>
+<script>
+ 
+function enlargeImage(src,$element) {
+  $("#enlargeattachmentContainer").empty()
+  var enlargeImageContainer = $("#enlargeattachmentContainer")
+  enlargeImageContainer.empty()
+  style = 'width:100%; height:90%; box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.2); background:white'
+  var enlargedImage = $('<iframe>').attr({ src: src, style: style })
+  var name = $('<span>').text(src.split('/').pop().replace(/_/g, ' '))
+  enlargeattachmentContainer.append(enlargedImage)
+  enlargeattachmentContainer.append(name)
+  setTimeout(function () {
+      enlargeattachmentContainer.show()
+
+      const iframe = document.querySelector('iframe').contentWindow
+      var iframe_document = iframe.document
+      iframe_image = iframe_document.getElementsByTagName('img')[0]
+      $(iframe_image).attr('style', 'width:100%; height:100%;')
+  }, 100)
+}
+
+function hideEnlargeImage() {
+  var enlargeImageContainer = $('#enlargeattachmentContainer')
+  enlargeImageContainer.empty()
+}
+
+$(document).on('click', function (event) {
+  if (!$(event.target).closest('#enlargeattachmentContainer').length) {
+      hideEnlargeImage()
+  }
+})
+function submitForm(elem) {
+$(elem).siblings(".add_more_submit").click();
+}
+
+toggleColumns("asset-table","asset_history_button")
+if (!localStorage.getItem("asset_history_table")) {
+$("#asset_history_button").find("[type=checkbox]").prop("checked",true).change()
+}
+
+
+
+function enlargeattachment(src,$element) {
+  $("#enlargeattachmentContainer").empty()
+  var enlargeattachmentContainer = $("#enlargeattachmentContainer")
+  enlargeattachmentContainer.empty()
+  style = 'width:100%; height:90%; box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.2); background:white'
+  var enlargedImage = $('<iframe>').attr({ src: src, style: style })
+  var name = $('<span>').text(src.split('/').pop().replace(/_/g, ' '))
+  enlargeattachmentContainer.append(enlargedImage)
+  enlargeattachmentContainer.append(name)
+  setTimeout(function () {
+      enlargeattachmentContainer.show()
+
+      const iframe = document.querySelector('iframe').contentWindow
+      var iframe_document = iframe.document
+      iframe_image = iframe_document.getElementsByTagName('img')[0]
+      $(iframe_image).attr('style', 'width:100%; height:100%;')
+  }, 100)
+}
+
+function hideEnlargeattachment() {
+  var enlargeattachmentContainer = $('#enlargeattachmentContainer')
+  enlargeattachmentContainer.empty()
+}
+$(document).on('click', function (event) {
+if (!$(event.target).closest('#enlargeattachmentContainer').length) {
+  hideEnlargeattachment()
+}
+}) 
+
+</script>
+{% endblock content %}
\ No newline at end of file
diff --git a/asset/templates/cbv/asset_history/assign_condition.html b/asset/templates/cbv/asset_history/assign_condition.html
new file mode 100644
index 000000000..17606877d
--- /dev/null
+++ b/asset/templates/cbv/asset_history/assign_condition.html
@@ -0,0 +1,16 @@
+{% load i18n %}
+{% for doc in instance.assign_images.all %}
+<span class="oh-timeoff-modal__stat-title">{% trans "Assign Condition Images" %}</span>
+<div class="d-flex mt-2 mb-2">
+        <a
+            href="{{doc.image.url}}"
+            rel="noopener noreferrer"
+            target="_blank"
+            ><span
+                class="oh-file-icon oh-file-icon--pdf"
+                onmouseover="enlargeattachment('{{doc.image.url}}')"
+                style="width:40px;height:40px"
+            ></span
+        ></a>
+    {% endfor %}
+</div>
diff --git a/asset/templates/cbv/asset_history/return_condition.html b/asset/templates/cbv/asset_history/return_condition.html
new file mode 100644
index 000000000..8586a37e3
--- /dev/null
+++ b/asset/templates/cbv/asset_history/return_condition.html
@@ -0,0 +1,16 @@
+{% load i18n %}
+{% for doc in instance.return_images.all %}
+<span class="oh-timeoff-modal__stat-title">{% trans "Return Condition Images" %}</span>
+<div class="d-flex ">
+        <a
+            href="{{doc.image.url}}"
+            rel="noopener noreferrer"
+            target="_blank"
+            ><span
+                class="oh-file-icon oh-file-icon--pdf"
+                onmouseover="enlargeattachment('{{doc.image.url}}')"
+                style="width:40px;height:40px"
+            ></span
+        ></a>
+    {% endfor %}
+</div>
diff --git a/asset/templates/cbv/request_and_allocation/asset_actions.html b/asset/templates/cbv/request_and_allocation/asset_actions.html
new file mode 100644
index 000000000..a13649797
--- /dev/null
+++ b/asset/templates/cbv/request_and_allocation/asset_actions.html
@@ -0,0 +1,32 @@
+{% load i18n %}
+{% if perms.asset.change_assetassignment %}
+<div onclick="event.stopPropagation();">
+    <button
+        href="#"
+        class="oh-btn oh-btn--secondary"
+        role="button"
+        data-toggle="oh-modal-toggle"
+        data-target="#objectCreateModal"
+        hx-get="{% url 'asset-allocate-return' asset_id=instance.asset_id.id %}"
+        hx-target="#objectCreateModalTarget"
+    >
+        <ion-icon name="return-down-back-sharp"></ion-icon>{% trans "Return" %}
+    </button>
+{% else %}
+    {% if instance.return_request %}
+        <div class="d-flex align-items-center">
+            <span class="oh-dot oh-dot--small me-1 oh-dot--color oh-dot--info"></span>
+            <span class="link-primary"> {% trans "Requested to return" %} </span>
+        </div>
+    {% else %}
+        <form action="{% url 'asset-allocate-return-request' asset_id=instance.id %}"
+              onsubmit="return confirm('{% trans "Are you sure you want to return this asset?" %}');">
+            {% csrf_token %}
+            <button type="submit" class="oh-btn oh-btn--secondary" onclick="event.stopPropagation();">
+                <ion-icon name="return-down-back-sharp"></ion-icon>
+                {% trans "Return Request" %}
+            </button>
+        </form>
+    {% endif %}
+{% endif %}
+</div>
diff --git a/asset/templates/cbv/request_and_allocation/asset_allocation_action.html b/asset/templates/cbv/request_and_allocation/asset_allocation_action.html
new file mode 100644
index 000000000..7cac37ea8
--- /dev/null
+++ b/asset/templates/cbv/request_and_allocation/asset_allocation_action.html
@@ -0,0 +1,25 @@
+{% load i18n %}
+{% if not instance.return_status %}
+<div onclick="event.stopPropagation();" >
+    <button
+        href="#"
+        class="oh-btn oh-btn--secondary"
+        role="button"
+        data-toggle="oh-modal-toggle"
+        data-target="#objectCreateModal"
+        hx-get="{% url 'asset-allocate-return'  asset_id=instance.asset_id.id %}"
+        hx-target="#objectCreateModalTarget"
+    >
+        <ion-icon name="return-down-back-sharp"></ion-icon>{% trans "Return" %}
+    </button>
+</div>
+{% else %}
+<div >
+    <div class="d-flex align-items-center">
+        <span
+            class="oh-dot oh-dot--small me-1 oh-dot--color oh-dot--info"
+        ></span>
+        <span class="link-primary"> {% trans "Returned" %} </span>
+    </div>
+</div>
+{% endif %}
\ No newline at end of file
diff --git a/asset/templates/cbv/request_and_allocation/asset_detail_action.html b/asset/templates/cbv/request_and_allocation/asset_detail_action.html
new file mode 100644
index 000000000..96ad86cc8
--- /dev/null
+++ b/asset/templates/cbv/request_and_allocation/asset_detail_action.html
@@ -0,0 +1,32 @@
+{% load i18n %}
+<div class="oh-modal__button-container text-center mt-3 w-100">
+    {% if perms.asset.change_assetassignment or not instance.return_request %}
+      <div class="oh-btn-group">
+          {% if perms.asset.change_assetassignment  %}
+            <button
+                href="#"
+                class="oh-btn oh-btn--secondary w-100"
+                role="button"
+                data-toggle="oh-modal-toggle"
+                data-target="#objectCreateModal"
+                hx-get="{%url 'asset-allocate-return'  asset_id=instance.asset_id.id %}"
+                hx-target="#objectCreateModalTarget"
+              >
+                <ion-icon name="return-down-back-sharp"></ion-icon>{% trans	"Return" %}
+            </button>
+          {% else %}
+            {% if not instance.return_request %}
+              <form class=" w-100" action = "{% url 'asset-allocate-return-request' asset_id=instance.id %}"
+                  onsubmit="return confirm('{% trans "Are you sure you want to return this asset?" %}');"
+                  >
+                  {% csrf_token %}
+                  <button type="submit" class="oh-btn oh-btn--secondary w-100">
+                      <ion-icon name="return-down-back-sharp"></ion-icon>
+                      {% trans "Return Request" %}
+                  </button>
+              </form>
+            {% endif %}
+          {% endif %}
+      </div>
+    {% endif %}
+  </div>
\ No newline at end of file
diff --git a/asset/templates/cbv/request_and_allocation/asset_request_action.html b/asset/templates/cbv/request_and_allocation/asset_request_action.html
new file mode 100644
index 000000000..0381a7186
--- /dev/null
+++ b/asset/templates/cbv/request_and_allocation/asset_request_action.html
@@ -0,0 +1,56 @@
+{% load i18n %}
+{% if perms.asset.add_assetassignment %}
+    {% if instance.asset_request_status == 'Requested' %}
+        <div>
+            <div class="oh-btn-group">
+                <a
+                    class="oh-btn oh-btn--success w-50"
+                    role="button"
+                    onclick="event.stopPropagation()"
+                    data-toggle="oh-modal-toggle"
+                    data-target="#genericModal"
+                    hx-get="{% url 'asset-request-approve-form' req_id=instance.id %}"
+                    hx-target="#genericModalBody"
+                    title="{% trans 'Approve' %}"
+                >
+                    <ion-icon name="checkmark-outline"></ion-icon>
+                </a>
+                <form
+                    action="{% url 'asset-request-reject' req_id=instance.id %}"
+                    method="post"
+                    onsubmit="return confirm('{% trans "Do you want to reject this request?" %}')"
+                    title="{% trans 'Reject' %}"
+                    class='w-50'
+                >
+                    {% csrf_token %}
+                    <button class="oh-btn oh-btn--danger w-100" onclick="event.stopPropagation();">
+                        <ion-icon name="close-outline"></ion-icon>
+                    </button>
+                </form>
+            </div>
+        </div>
+    {% else %}
+        <div>
+            <div class="oh-btn-group">
+                <a
+                    href="#"
+                    class="oh-btn oh-btn--success oh-btn--disabled w-50"
+                    role="button"
+                    onclick="event.stopPropagation()"
+                    title='{% trans "Approve" %}'
+                >
+                    <ion-icon name="checkmark-outline"></ion-icon>
+                </a>
+                <a
+                    href="#"
+                    class="oh-btn oh-btn--danger oh-btn--disabled w-50"
+                    role="button"
+                    onclick="event.stopPropagation()"
+                    title='{% trans "Reject" %}'
+                >
+                    <ion-icon name="close-outline"></ion-icon>
+                </a>
+            </div>
+        </div>
+    {% endif %}
+{% endif %}
diff --git a/asset/templates/cbv/request_and_allocation/asset_request_detail_action.html b/asset/templates/cbv/request_and_allocation/asset_request_detail_action.html
new file mode 100644
index 000000000..f076a5a7d
--- /dev/null
+++ b/asset/templates/cbv/request_and_allocation/asset_request_detail_action.html
@@ -0,0 +1,30 @@
+{% load i18n %}
+<div class="oh-modal__button-container text-center w-100 mt-3">
+    {% if perms.asset.add_assetassignment %}
+        {% if	instance.asset_request_status == 'Requested' %}
+        <div class="oh-btn-group">
+            <a
+                class="oh-btn oh-btn--success w-100"
+                role="button123"
+                data-toggle="oh-modal-toggle"
+                data-target="#objectCreateModal"
+                hx-get="{% url 'asset-request-approve' req_id=instance.id %}"
+                hx-target="#objectCreateModalTarget"
+            >
+                <ion-icon name="checkmark-outline"></ion-icon>{% trans 'Approve' %}
+            </a>
+            <form
+                action="{% url 'asset-request-reject' req_id=instance.id %}"
+                onsubmit="event.stopPropagation(); return confirm('{% trans "Do you want to reject this request?" %}')"
+                method="post"
+                class="w-100"
+            >
+                {% csrf_token %}
+                <button class="oh-btn oh-btn--danger w-100" onclick="event.stopPropagation();">
+                    <ion-icon name="close-outline"></ion-icon> {% trans 'Reject' %}
+                </button>
+            </form>
+        </div>
+        {% endif %}
+    {% endif %}
+</div>
\ No newline at end of file
diff --git a/asset/templates/cbv/request_and_allocation/detail_action_asset_allocation.html b/asset/templates/cbv/request_and_allocation/detail_action_asset_allocation.html
new file mode 100644
index 000000000..d22d59942
--- /dev/null
+++ b/asset/templates/cbv/request_and_allocation/detail_action_asset_allocation.html
@@ -0,0 +1,15 @@
+{% load i18n %}
+<div class="oh-modal__button-container text-center w-100 mt-3">
+    {% if not instance.return_status %}
+    <button
+        class="oh-btn oh-btn--secondary w-100"
+        role="button"
+        data-toggle="oh-modal-toggle"
+        data-target="#objectCreateModal"
+        hx-get="{% url 'asset-allocate-return'  asset_id=instance.asset_id.id %}"
+        hx-target="#objectCreateModalTarget"
+    >
+        <ion-icon name="return-down-back-sharp"></ion-icon>{% trans "Return" %}
+    </button>
+    {% endif %}
+</div>
\ No newline at end of file
diff --git a/asset/templates/cbv/request_and_allocation/filter.html b/asset/templates/cbv/request_and_allocation/filter.html
new file mode 100644
index 000000000..8e10f429c
--- /dev/null
+++ b/asset/templates/cbv/request_and_allocation/filter.html
@@ -0,0 +1,144 @@
+{% load i18n %}
+
+{% load widget_tweaks %}
+<div class="oh-dropdown__filter-body">
+                <div class="oh-accordion">
+                  <div class="oh-accordion-header">{% trans "Asset" %}</div>
+                  <div class="oh-accordion-body">
+                    <div class="row">
+                      <div class="col-sm-12 col-md-12 col-lg-12">
+                        <div class="oh-input-group">
+                          <label
+                            class="oh-label"
+                            for="{{assets_filter_form.asset_id__asset_name.id_for_label}}"
+                            >{% trans "Asset Name" %}</label
+                          >
+                          {{assets_filter_form.asset_id__asset_name}}
+                        </div>
+                      </div>
+                      <div class="col-sm-12 col-md-12 col-lg-12">
+                        <div class="oh-input-group">
+                          <label
+                            class="oh-label"
+                            for="{{assets_filter_form.asset_id__asset_status.id_for_label}}"
+                            >{% trans "Status" %}</label
+                          >
+                          {{assets_filter_form.asset_id__asset_status}}
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div class="oh-accordion">
+                  <div class="oh-accordion-header">
+                    {% trans "Asset Request" %}
+                  </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"
+                            for="{{asset_request_filter_form.requested_employee_id.id_for_label}}"
+                            >{% trans "Requested Employee" %}</label
+                          >
+                          {{asset_request_filter_form.requested_employee_id}}
+                        </div>
+                        <div class="oh-input-group">
+                          <label
+                            class="oh-label"
+                            for="{{asset_request_filter_form.asset_category_id.id_for_label}}"
+                            >{% trans "Asset Category" %}</label
+                          >
+                          {{asset_request_filter_form.asset_category_id}}
+                        </div>
+                      </div>
+                      <div class="col-sm-12 col-md-12 col-lg-6">
+                        <div class="oh-input-group">
+                          <label
+                            class="oh-label"
+                            for="{{asset_request_filter_form.asset_request_date.id_for_label}}"
+                            >{% trans "Asset Request Date" %}</label
+                          >
+                            {{asset_request_filter_form.asset_request_date|attr:"type:date"}}
+                        </div>
+                        <div class="oh-input-group">
+                          <label
+                            class="oh-label"
+                            for="{{asset_request_filter_form.asset_request_status.id_for_label}}"
+                            >{% trans "Status" %}</label
+                          >
+                          {{asset_request_filter_form.asset_request_status}}
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                {% if perms.asset.view_assetassignment %}
+                <div class="oh-accordion">
+                  <div class="oh-accordion-header">
+                    {% trans "Asset Allocation" %}
+                  </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"
+                            for="{{asset_allocation_filter_form.assigned_to_employee_id.id_for_label}}"
+                            >{% trans "Allocated User" %}</label
+                          >
+                          {{asset_allocation_filter_form.assigned_to_employee_id}}
+                        </div>
+                        <div class="oh-input-group">
+                          <label
+                            class="oh-label"
+                            for="{{asset_allocation_filter_form.asset_id.id_for_label}}"
+                            >{% trans "Asset" %}</label
+                          >
+                          {{asset_allocation_filter_form.asset_id}}
+                        </div>
+                      </div>
+                      <div class="col-sm-12 col-md-12 col-lg-6">
+                        <div class="oh-input-group">
+                          <label
+                            class="oh-label"
+                            for="{{asset_allocation_filter_form.assigned_date.id_for_label}}"
+                            >{% trans "Asset Allocated Date" %}</label
+                          >
+                          {{ asset_allocation_filter_form.assigned_date |attr:"type:date" }}
+                        </div>
+                        <div class="oh-input-group">
+                          <label
+                            class="oh-label"
+                            for="{{asset_allocation_filter_form.return_status.id_for_label}}"
+                            >{% trans "Status" %}</label
+                          >
+                          {{asset_allocation_filter_form.return_status}}
+                        </div>
+                      </div>
+                      <div class="col-sm-12 col-md-12 col-lg-6">
+                        <div class="oh-input-group">
+                          <label
+                            class="oh-label"
+                            for="{{asset_allocation_filter_form.return_date.id_for_label}}"
+                            >{% trans "Return Date" %}</label
+                          >
+                          {{ asset_allocation_filter_form.return_date|attr:"type:date" }}
+                        </div>
+                      </div>
+                      <div class="col-sm-12 col-md-12 col-lg-6">
+                        <div class="oh-input-group">
+                          <label
+                            class="oh-label"
+                            for="{{asset_allocation_filter_form.assigned_by_employee_id.id_for_label}}"
+                            >{% trans "Allocated By" %}</label
+                          >
+                          {{asset_allocation_filter_form.assigned_by_employee_id}}
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                {% endif %}
+              </div>
\ No newline at end of file
diff --git a/asset/templates/cbv/request_and_allocation/forms/allo_form.html b/asset/templates/cbv/request_and_allocation/forms/allo_form.html
new file mode 100644
index 000000000..f7a09219a
--- /dev/null
+++ b/asset/templates/cbv/request_and_allocation/forms/allo_form.html
@@ -0,0 +1,11 @@
+<div id="formContainer">
+    {% include "generic/horilla_form.html" %}
+</div>
+<script>
+    $("#dynamic_field_return_status").parent().hide();
+    $(".oh-switch").parent().hide();
+    $("label[for='id_assigned_to_employee_id']").text("Assigned To");
+    $("label[for='id_assigned_by_employee_id']").text("Assigned By");
+    $("label[for='id_assign_images']").text("Assign Condition Images");
+    
+</script>
\ No newline at end of file
diff --git a/asset/templates/cbv/request_and_allocation/forms/asset_approve_form.html b/asset/templates/cbv/request_and_allocation/forms/asset_approve_form.html
new file mode 100644
index 000000000..a0feb33a6
--- /dev/null
+++ b/asset/templates/cbv/request_and_allocation/forms/asset_approve_form.html
@@ -0,0 +1,11 @@
+<div id="approve-container">
+    {% include "generic/horilla_form.html" %}
+</div>
+<script>
+    $("#dynamic_field_return_status").parent().hide();
+    $("#id_assigned_to_employee_id_parent_div").hide();
+    $('#id_assigned_by_employee_id_parent_div').hide(); 
+    $(".oh-switch").parent().hide();
+    $("label[for='id_assign_images']").text("Assign Condition Images");
+    
+</script>
\ No newline at end of file
diff --git a/asset/templates/cbv/request_and_allocation/forms/req_form.html b/asset/templates/cbv/request_and_allocation/forms/req_form.html
new file mode 100644
index 000000000..7828e3df3
--- /dev/null
+++ b/asset/templates/cbv/request_and_allocation/forms/req_form.html
@@ -0,0 +1,8 @@
+<div id="formContainer">
+    {% include "generic/horilla_form.html" %}
+</div>
+<script>
+    $("#dynamic_field_asset_request_status").parent().hide();
+    $("label[for='id_requested_employee_id']").text("Requesting User");
+    $("label[for='id_asset_category_id']").text("Asset Category");
+</script>
\ No newline at end of file
diff --git a/asset/templates/cbv/request_and_allocation/request_and_allocation.html b/asset/templates/cbv/request_and_allocation/request_and_allocation.html
new file mode 100644
index 000000000..5c264191d
--- /dev/null
+++ b/asset/templates/cbv/request_and_allocation/request_and_allocation.html
@@ -0,0 +1,132 @@
+{% extends "index.html" %}
+{% load i18n %}{% load static %}
+
+
+{% block content %}
+<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+
+<style>
+  .oh-modal_close--custom {
+    border: none;
+    background: none;
+    font-size: 1.5rem;
+    opacity: 0.7;
+    position: absolute;
+    top: 25px;
+    right: 15px;
+}
+</style>
+
+
+<meta name="csrf-token" content="{{ csrf_token }}">
+
+
+<div hx-get="{% url "nav-asset-request-allocation" %}" hx-trigger="load">
+</div> 
+{% comment %} my_app/templates/my_app/generic/index.html {% endcomment %}
+
+
+
+{% include "generic/components.html" %}
+
+<div class="oh-checkpoint-badge mb-2" id="selectedInstances" data-ids="[]" data-clicked="" style="display: none"></div>
+<div class="oh-checkpoint-badge mb-2" id="assetlistInstances" data-ids="[]" data-clicked="" style="display: none"></div>
+
+  
+  <div 
+  class="oh-wrapper" 
+  id="listContainer">
+  <div class="animated-background">
+  </div>
+</div>
+
+<div
+  class="oh-modal"
+  id="addAssetReport"
+  role="dialog"
+  aria-labelledby="addAssetReport"
+  aria-hidden="true"
+  style="z-index: 1022;"
+  >
+  <div class="oh-modal__dialog">
+    <div class="oh-modal__dialog-header">
+      <h2 class="oh-modal__dialog-title" id="addAssetReportLabel">
+        {% trans "Add Asset Report" %}
+      </h2>
+      <button
+        type="button"
+        class="oh-modal_close--custom"
+        onclick="$('#addAssetReport').removeClass('oh-modal--show');"
+      >
+        <ion-icon
+          name="close-outline"
+          role="img"
+          aria-label="close outline"
+        ></ion-icon>
+      </button>
+    </div>
+    <div class="oh-modal__dialog-body" id="addAssetReportForm"></div>
+  </div>
+</div>
+
+
+<div
+class="oh-modal"
+id="assetFineModal"
+role="dialog"
+aria-labelledby="assetFineModal"
+aria-hidden="true"
+ style="z-index: 1022;"
+
+>
+<div
+  class="oh-modal__dialog"
+  id="assetFineModalBody"
+>
+  <!-- Modal content goes here -->
+</div>
+</div>
+<script>
+  $(document).ready(function () {
+      $("#assetFineModalBody").on("htmx:afterSwap", function () {
+         
+          $("[name='installment_amount']").on("change keyup", function () {
+              var loanAmount = $("[name='loan_amount']").val();
+              var installmentAmount = $(this).val();
+      
+              var installments = loanAmount / installmentAmount;
+              $("[name='installments']").val(installments);
+              if (Math.round(installments) !== installments) {
+                  installments = Math.round(installments);
+                  $("[name='installments']").val(installments);
+                  $("[name='installments']").trigger("change");
+              }
+          });
+      
+          $("[name='loan_amount']").on("change keyup", function () {
+              var loanAmount = $("[name='loan_amount']").val();
+              if (loanAmount) {
+                  $("[name='installments']").val(1); 
+              } else {
+                  $("[name='installments']").val(""); 
+              }
+              $("[name='installments']").change();
+          });
+      
+          $("[name='installments']").on("change keyup", function () {
+              var loanAmount = $("[name='loan_amount']").val();
+              var installments = $(this).val();
+              var installmentAmount = loanAmount / installments;
+              $("[name='installment_amount']").val(installmentAmount);
+          });
+      });
+    });
+
+
+</script>
+
+
+
+    
+{% endblock %}
\ No newline at end of file
diff --git a/asset/templates/cbv/request_and_allocation/return_status.html b/asset/templates/cbv/request_and_allocation/return_status.html
new file mode 100644
index 000000000..c43863c5d
--- /dev/null
+++ b/asset/templates/cbv/request_and_allocation/return_status.html
@@ -0,0 +1,20 @@
+{% load i18n %}
+{% if instance.return_date %}
+<div class="dateformat_changer" data-cell-index="203">
+    {{instance.return_date}}
+</div>
+{% else %}
+{% if instance.return_request %}
+    <div  data-cell-index="203">
+        <div class="d-flex align-items-center">
+            <span class="oh-dot oh-dot--small me-1 oh-dot--color oh-dot--info"></span>
+            <span class="link-primary"> {% trans "Requested to return" %} </span>
+        </div>
+    </div>
+{% else %}
+    <div data-cell-index="203">
+        <span class="oh-dot oh-dot--small me-1 oh-dot--color oh-dot--warning" ></span>
+        <span class="link-warning"> {% trans "Allocated" %} </span>
+    </div>
+{% endif %}
+{% endif %}
diff --git a/asset/templates/cbv/request_and_allocation/status.html b/asset/templates/cbv/request_and_allocation/status.html
new file mode 100644
index 000000000..7266b3883
--- /dev/null
+++ b/asset/templates/cbv/request_and_allocation/status.html
@@ -0,0 +1,10 @@
+{% load i18n %}
+<div class="d-flex align-items-center">
+    <span
+        class="oh-dot oh-dot--small me-1 oh-dot--color {% if instance.asset_request_status == 'Approved' %} oh-dot--success {% elif instance.asset_request_status == 'Rejected' %} oh-dot--danger {% elif instance.asset_request_status == 'Requested' %} oh-dot--info {% endif %}">
+    </span>
+    <span
+        class="{% if instance.asset_request_status == 'Approved' %} link-success {% elif instance.asset_request_status == 'Rejected' %} link-danger {% elif instance.asset_request_status == 'Requested' %} link-info {% endif %}"
+        >{% trans instance.asset_request_status %}
+    </span>
+</div>
\ No newline at end of file
diff --git a/asset/urls.py b/asset/urls.py
index 310a24bbc..532f9543b 100644
--- a/asset/urls.py
+++ b/asset/urls.py
@@ -5,6 +5,14 @@ URL configuration for asset-related views.
 from django import views
 from django.urls import path
 
+from asset.cbv import (
+    asset_batch_no,
+    asset_category,
+    asset_history,
+    asset_tab,
+    dashboard,
+    request_and_allocation,
+)
 from asset.forms import AssetCategoryForm, AssetForm
 from asset.models import Asset, AssetCategory
 from base.views import object_duplicate
@@ -12,28 +20,66 @@ from base.views import object_duplicate
 from . import views
 
 urlpatterns = [
+    path(
+        "asset-history/", asset_history.AssetHistoryView.as_view(), name="asset-history"
+    ),
+    path(
+        "asset-history-list/",
+        asset_history.AssetHistorylistView.as_view(),
+        name="asset-history-list",
+    ),
+    path(
+        "asset-history-nav/",
+        asset_history.AssetHistoryNavView.as_view(),
+        name="asset-history-nav",
+    ),
+    path(
+        "asset-history-detail-view/<int:pk>/",
+        asset_history.AssetHistoryDetailView.as_view(),
+        name="asset-history-detail-view",
+    ),
+    # path(
+    #     "asset-creation/<int:asset_category_id>/",
+    #     views.asset_creation,
+    #     name="asset-creation",
+    # ),
     path(
         "asset-creation/<int:asset_category_id>/",
-        views.asset_creation,
+        asset_category.AssetFormView.as_view(),
         name="asset-creation",
     ),
     path("asset-list/<int:cat_id>", views.asset_list, name="asset-list"),
-    path("asset-update/<int:asset_id>/", views.asset_update, name="asset-update"),
+    # path("asset-update/<int:asset_id>/", views.asset_update, name="asset-update"),
+    path(
+        "asset-update/<int:pk>/",
+        asset_category.AssetFormView.as_view(),
+        name="asset-update",
+    ),
+    # path(
+    #     "duplicate-asset/<int:obj_id>/",
+    #     object_duplicate,
+    #     name="duplicate-asset",
+    #     kwargs={
+    #         "model": Asset,
+    #         "form": AssetForm,
+    #         "form_name": "asset_creation_form",
+    #         "template": "asset/asset_creation.html",
+    #     },
+    # ),
     path(
         "duplicate-asset/<int:obj_id>/",
-        object_duplicate,
+        asset_category.AssetDuplicateFormView.as_view(),
         name="duplicate-asset",
-        kwargs={
-            "model": Asset,
-            "form": AssetForm,
-            "form_name": "asset_creation_form",
-            "template": "asset/asset_creation.html",
-        },
     ),
     path("asset-delete/<int:asset_id>/", views.asset_delete, name="asset-delete"),
+    # path(
+    #     "asset-information/<int:asset_id>/",
+    #     views.asset_information,
+    #     name="asset-information",
+    # ),
     path(
-        "asset-information/<int:asset_id>/",
-        views.asset_information,
+        "asset-information/<int:pk>/",
+        asset_category.AssetCategoryDetailView.as_view(),
         name="asset-information",
     ),
     path("asset-category-view/", views.asset_category_view, name="asset-category-view"),
@@ -42,9 +88,20 @@ urlpatterns = [
         views.asset_category_view_search_filter,
         name="asset-category-view-search-filter",
     ),
+    # path(
+    #     "asset-category-duplicate/<int:obj_id>/",
+    #     object_duplicate,
+    #     name="asset-category-duplicate",
+    #     kwargs={
+    #         "model": AssetCategory,
+    #         "form": AssetCategoryForm,
+    #         "form_name": "asset_category_form",
+    #         "template": "category/asset_category_creation.html",
+    #     },
+    # ),
     path(
         "asset-category-duplicate/<int:obj_id>/",
-        object_duplicate,
+        asset_category.AssetCategoryDuplicateFormView.as_view(),
         name="asset-category-duplicate",
         kwargs={
             "model": AssetCategory,
@@ -53,14 +110,29 @@ urlpatterns = [
             "template": "category/asset_category_form.html",
         },
     ),
+    path(
+        "asset-category-nav/",
+        asset_category.AssetCategoryNav.as_view(),
+        name="asset-category-nav",
+    ),
+    # path(
+    #     "asset-category-creation",
+    #     views.asset_category_creation,
+    #     name="asset-category-creation",
+    # ),
     path(
         "asset-category-creation",
-        views.asset_category_creation,
+        asset_category.AssetCategoryFormView.as_view(),
         name="asset-category-creation",
     ),
+    # path(
+    #     "asset-category-update/<int:cat_id>",
+    #     views.asset_category_update,
+    #     name="asset-category-update",
+    # ),
     path(
-        "asset-category-update/<int:cat_id>",
-        views.asset_category_update,
+        "asset-category-update/<int:pk>",
+        asset_category.AssetCategoryFormView.as_view(),
         name="asset-category-update",
     ),
     path(
@@ -68,16 +140,21 @@ urlpatterns = [
         views.delete_asset_category,
         name="asset-category-delete",
     ),
+    # path(
+    #     "asset-request-creation",
+    #     views.asset_request_creation,
+    #     name="asset-request-creation",
+    # ),
     path(
         "asset-request-creation",
-        views.asset_request_creation,
+        request_and_allocation.AssetRequestCreateForm.as_view(),
         name="asset-request-creation",
     ),
-    path(
-        "asset-request-allocation-view/",
-        views.asset_request_allocation_view,
-        name="asset-request-allocation-view",
-    ),
+    # path(
+    #     "asset-request-allocation-view/",
+    #     views.asset_request_allocation_view,
+    #     name="asset-request-allocation-view",
+    # ),
     path(
         "asset-request-individual-view/<int:asset_request_id>",
         views.asset_request_individual_view,
@@ -108,9 +185,14 @@ urlpatterns = [
         views.asset_request_reject,
         name="asset-request-reject",
     ),
+    # path(
+    #     "asset-allocate-creation",
+    #     views.asset_allocate_creation,
+    #     name="asset-allocate-creation",
+    # ),
     path(
         "asset-allocate-creation",
-        views.asset_allocate_creation,
+        request_and_allocation.AssetAllocationFormView.as_view(),
         name="asset-allocate-creation",
     ),
     path(
@@ -126,20 +208,50 @@ urlpatterns = [
     path("asset-excel", views.asset_excel, name="asset-excel"),
     path("asset-import", views.asset_import, name="asset-import"),
     path("asset-export-excel", views.asset_export_excel, name="asset-export-excel"),
+    # path(
+    #     "asset-batch-number-creation",
+    #     views.asset_batch_number_creation,
+    #     name="asset-batch-number-creation",
+    # ),
+    # path("asset-batch-view", views.asset_batch_view, name="asset-batch-view"),
     path(
         "asset-batch-number-creation",
-        views.asset_batch_number_creation,
+        asset_batch_no.AssetBatchCreateFormView.as_view(),
         name="asset-batch-number-creation",
     ),
-    path("asset-batch-view", views.asset_batch_view, name="asset-batch-view"),
+    path(
+        "asset-batch-view",
+        asset_batch_no.AssetBatchNoView.as_view(),
+        name="asset-batch-view",
+    ),
+    path(
+        "asset-batch-list",
+        asset_batch_no.AssetBatchNoListView.as_view(),
+        name="asset-batch-list",
+    ),
+    path(
+        "asset-batch-nav",
+        asset_batch_no.AssetBatchNoNav.as_view(),
+        name="asset-batch-nav",
+    ),
+    path(
+        "asset-batch-detail-view/<int:pk>/",
+        asset_batch_no.AssetBatchDetailView.as_view(),
+        name="asset-batch-detail-view",
+    ),
     path(
         "asset-batch-number-search",
         views.asset_batch_number_search,
         name="asset-batch-number-search",
     ),
+    # path(
+    #     "asset-batch-update/<int:batch_id>",
+    #     views.asset_batch_update,
+    #     name="asset-batch-update",
+    # ),
     path(
-        "asset-batch-update/<int:batch_id>",
-        views.asset_batch_update,
+        "asset-batch-update/<int:pk>",
+        asset_batch_no.AssetBatchCreateFormView.as_view(),
         name="asset-batch-update",
     ),
     path(
@@ -149,9 +261,14 @@ urlpatterns = [
     ),
     path("asset-count-update", views.asset_count_update, name="asset-count-update"),
     path("add-asset-report/", views.add_asset_report, name="add-asset-report"),
+    # path(
+    #     "add-asset-report/<int:asset_id>",
+    #     views.add_asset_report,
+    #     name="add-asset-report",
+    # ),
     path(
-        "add-asset-report/<int:asset_id>",
-        views.add_asset_report,
+        "add-asset-report/<int:asset_id>/",
+        asset_category.AssetReportFormView.as_view(),
         name="add-asset-report",
     ),
     path("dashboard/", views.asset_dashboard, name="asset-dashboard"),
@@ -173,11 +290,11 @@ urlpatterns = [
     path(
         "asset-category-chart/", views.asset_category_chart, name="asset-category-chart"
     ),
-    path(
-        "asset-history",
-        views.asset_history,
-        name="asset-history",
-    ),
+    # path(
+    #     "asset-history",
+    #     views.asset_history,
+    #     name="asset-history",
+    # ),
     path(
         "asset-history-single-view/<int:asset_id>",
         views.asset_history_single_view,
@@ -188,7 +305,77 @@ urlpatterns = [
         views.asset_history_search,
         name="asset-history-search",
     ),
-    path("asset-tab/<int:emp_id>", views.asset_tab, name="asset-tab"),
+    path(
+        "asset-request-allocation-view/",
+        request_and_allocation.RequestAndAllocationView.as_view(),
+        name="asset-request-allocation-view",
+    ),
+    path(
+        "list-asset-request-allocation",
+        request_and_allocation.AllocationList.as_view(),
+        name="list-asset-request-allocation",
+    ),
+    path(
+        "list-asset",
+        request_and_allocation.AssetList.as_view(),
+        name="list-asset",
+    ),
+    path(
+        "tab-asset-request-allocation",
+        request_and_allocation.RequestAndAllocationTab.as_view(),
+        name="tab-asset-request-allocation",
+    ),
+    path(
+        "list-asset-request",
+        request_and_allocation.AssetRequestList.as_view(),
+        name="list-asset-request",
+    ),
+    path(
+        "list-asset-allocation",
+        request_and_allocation.AssetAllocationList.as_view(),
+        name="list-asset-allocation",
+    ),
+    path(
+        "nav-asset-request-allocation",
+        request_and_allocation.RequestAndAllocationNav.as_view(),
+        name="nav-asset-request-allocation",
+    ),
+    path(
+        "asset-detail-view/<int:pk>/",
+        request_and_allocation.AssetDetailView.as_view(),
+        name="asset-detail-view",
+    ),
+    path(
+        "asset-request-detail-view/<int:pk>/",
+        request_and_allocation.AssetRequestDetailView.as_view(),
+        name="asset-request-detail-view",
+    ),
+    path(
+        "asset-request-tab-list-view/<int:pk>/",
+        asset_tab.AssetRequestTab.as_view(),
+        name="asset-request-tab-list-view",
+    ),
+    path(
+        "assets-tab-list-view/<int:pk>/",
+        asset_tab.AssetTabListView.as_view(),
+        name="assets-tab-list-view",
+    ),
+    path(
+        "assets-tab-list-view/<int:pk>/",
+        asset_tab.AssetTabListView.as_view(),
+        name="assets-tab-list-view",
+    ),
+    path(
+        "asset-allocation-detail-view/<int:pk>/",
+        request_and_allocation.AssetAllocationDetailView.as_view(),
+        name="asset-allocation-detail-view",
+    ),
+    path(
+        "asset-request-approve-form/<int:req_id>/",
+        request_and_allocation.AssetApproveFormView.as_view(),
+        name="asset-request-approve-form",
+    ),
+    path("asset-tab/<int:pk>", views.asset_tab, name="asset-tab"),
     path(
         "profile-asset-tab/<int:emp_id>",
         views.profile_asset_tab,
@@ -199,9 +386,19 @@ urlpatterns = [
         views.asset_request_tab,
         name="asset-request-tab",
     ),
+    # path(
+    #     "dashboard-asset-request-approve",
+    #     views.dashboard_asset_request_approve,
+    #     name="dashboard-asset-request-approve",
+    # ),
     path(
-        "main-dashboard-asset-requests",
-        views.asset_dashboard_requests,
-        name="main-dashboard-asset-requests",
+        "dashboard-asset-request-approve",
+        dashboard.AssetRequestToApprove.as_view(),
+        name="dashboard-asset-request-approve",
+    ),
+    path(
+        "dashboard-allocated-asset",
+        dashboard.AllocatedAssetsList.as_view(),
+        name="dashboard-allocated-asset",
     ),
 ]
diff --git a/asset/views.py b/asset/views.py
index 20d300673..d8e24d278 100644
--- a/asset/views.py
+++ b/asset/views.py
@@ -315,6 +315,19 @@ def asset_delete(request, asset_id):
         )
     else:
         asset_del(request, asset)
+
+        if request.GET.get("instance_ids"):
+            instances_ids = request.GET.get("instance_ids")
+            instances_list = json.loads(instances_ids)
+            if asset_id in instances_list:
+                instances_list.remove(asset_id)
+            previous_instance, next_instance = closest_numbers(
+                json.loads(instances_ids), asset_id
+            )
+            return redirect(
+                f"/asset/asset-information/{next_instance}/?{previous_data}&instance_ids={instances_list}&asset_info=true"
+            )
+
         if len(eval_validate(instances_ids)) <= 1:
             return HttpResponse("<script>window.location.reload();</script>")
 
@@ -741,8 +754,7 @@ def asset_allocate_creation(request):
     if request.method == "POST":
         form = AssetAllocationForm(request.POST)
         if form.is_valid():
-            asset = form.instance.asset_id.id
-            asset = Asset.objects.filter(id=asset).first()
+            asset = form.instance.asset_id
             asset.asset_status = "In use"
             asset.save()
             instance = form.save()
@@ -1496,6 +1508,9 @@ def asset_batch_number_delete(request, batch_id):
     Returns:
     - message of the return
     """
+    request_copy = request.GET.copy()
+    request_copy.pop("requests_ids", None)
+    previous_data = request_copy.urlencode()
     previous_data = request.GET.urlencode()
     try:
         asset_batch_number = AssetLot.objects.get(id=batch_id)
@@ -1504,7 +1519,7 @@ def asset_batch_number_delete(request, batch_id):
         )
         if assigned_batch_number:
             messages.error(request, _("Batch number in-use"))
-            return redirect(f"/asset/asset-batch-number-search?{previous_data}")
+            return redirect(f"/asset/asset-batch-list?{previous_data}")
         asset_batch_number.delete()
         messages.success(request, _("Batch number deleted"))
     except AssetLot.DoesNotExist:
@@ -1791,7 +1806,7 @@ def asset_history_search(request):
 
 @login_required
 @owner_can_enter("asset.view_asset", Employee)
-def asset_tab(request, emp_id):
+def asset_tab(request, pk):
     """
     This function is used to view asset tab of an employee in employee individual view.
 
@@ -1802,7 +1817,7 @@ def asset_tab(request, emp_id):
     Returns: return asset-tab template
 
     """
-    employee = Employee.objects.get(id=emp_id)
+    employee = Employee.objects.get(id=pk)
     assets_requests = employee.requested_employee.all()
     assets = employee.allocated_employee.all()
     assets_ids = (
@@ -1812,9 +1827,9 @@ def asset_tab(request, emp_id):
         "assets": assets,
         "requests": assets_requests,
         "assets_ids": assets_ids,
-        "employee": emp_id,
+        "employee": pk,
     }
-    return render(request, "tabs/asset-tab.html", context=context)
+    return render(request, "tabs/main_asset_tab.html", context=context)
 
 
 @login_required
diff --git a/attendance/cbv/__init__.py b/attendance/cbv/__init__.py
new file mode 100644
index 000000000..e69de29bb
diff --git a/attendance/cbv/accessibility.py b/attendance/cbv/accessibility.py
new file mode 100644
index 000000000..1db5a8029
--- /dev/null
+++ b/attendance/cbv/accessibility.py
@@ -0,0 +1,40 @@
+"""
+Accessiblility
+"""
+
+from django.contrib.auth.context_processors import PermWrapper
+from base.methods import check_manager
+from employee.models import Employee
+
+
+
+def attendance_accessibility(request, instance: object = None, user_perms: PermWrapper = [], *args, **kwargs) -> bool:
+    """
+    permission for attendance tab
+    """
+
+    check_manages = check_manager(request.user.employee_get, instance)
+    employee = Employee.objects.get(id=instance.pk)
+    if check_manages or request.user.has_perm("attendance.view_attendance") or request.user == employee.employee_user_id:
+        return True
+    return False
+
+def penalty_accessibility(request, instance: object = None, user_perms: PermWrapper = [], *args, **kwargs) -> bool:
+    """
+    permission for penalty tab
+    """
+
+    employee = Employee.objects.get(id=instance.pk)
+    check_manages = check_manager(request.user.employee_get,instance)
+    if request.user.has_perm("attendance.view_penaltyaccount") or request.user == employee.employee_user_id or check_manages:
+        return True
+    return False
+
+def create_attendance_request_accessibility(
+    request, instance: object = None, user_perms: PermWrapper = [], *args, **kwargs
+) -> bool:
+    employee = Employee.objects.get(id=instance.pk)
+    if ( request.user == employee.employee_user_id):
+        return True
+    return False
+
diff --git a/attendance/cbv/attendance_activity.py b/attendance/cbv/attendance_activity.py
new file mode 100644
index 000000000..e8edd6170
--- /dev/null
+++ b/attendance/cbv/attendance_activity.py
@@ -0,0 +1,220 @@
+"""
+this page is handling the cbv methods of  attendance activity page
+"""
+
+from typing import Any
+from django.urls import reverse, reverse_lazy
+from django.utils.translation import gettext_lazy as _
+from django.utils.decorators import method_decorator
+from attendance.filters import AttendanceActivityFilter
+from attendance.forms import AttendanceActivityExportForm
+from attendance.models import (
+    AttendanceActivity,
+)
+from base.methods import filtersubordinates, is_reportingmanager
+from horilla_views.generic.cbv.views import (
+    HorillaDetailedView,
+    HorillaListView,
+    HorillaNavView,
+    TemplateView,
+)
+from horilla_views.cbv_methods import login_required
+
+
+@method_decorator(login_required, name="dispatch")
+class AttendanceActivityView(TemplateView):
+    """
+    for my attendance page view
+    """
+
+    template_name = "cbv/attendance_activity/attendance_activity_home.html"
+
+
+@method_decorator(login_required, name="dispatch")
+class AttendanceActivityListView(HorillaListView):
+    """
+    list view of the page
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("attendance-activity-search")
+        self.action_method = None
+        self.view_id = "deleteview"
+        if self.request.user.has_perm("attendance.delete_attendanceactivity"):
+            self.action_method = "get_delete_attendance"
+
+    def get_queryset(self):
+        queryset = super().get_queryset()
+        self_attendance_activities = queryset.filter(
+            employee_id__employee_user_id=self.request.user
+        )
+        queryset = filtersubordinates(
+            self.request, queryset, "attendance.view_attendanceovertime"
+        )
+        return queryset | self_attendance_activities
+
+    filter_class = AttendanceActivityFilter
+    model = AttendanceActivity
+    records_per_page = 10
+    template_name = "cbv/attendance_activity/delete_inherit.html"
+
+    columns = [
+        (_("Employee"), "employee_id", "employee_id__get_avatar"),
+        (_("Attendance Date"), "attendance_date"),
+        (_("In Date"), "clock_in_date"),
+        (_("Check In"), "clock_in"),
+        (_("Check Out"), "clock_out"),
+        (_("Out Date"), "clock_out_date"),
+        (_("Duration (HH:MM:SS)"), "duration_format"),
+
+
+    ]
+
+    row_attrs = """
+                {diff_cell}
+                hx-get='{attendance_detail_view}?instance_ids={ordered_ids}'
+                hx-target="#genericModalBody"
+                data-target="#genericModal"
+                data-toggle="oh-modal-toggle"
+                """
+    sortby_mapping = [
+        ("Employee", "employee_id__get_full_name", "employee_id__get_avatar"),
+        ("Attendance Date", "attendance_date"),
+        ("Check In", "clock_in"),
+        ("In Date", "clock_in_date"),
+        ("Check Out", "clock_out"),
+        ("Out Date", "clock_out_date"),
+        ("Duration (HH:MM:SS)", "duration_format")
+    ]
+
+
+@method_decorator(login_required, name="dispatch")
+class AttendanceActivityNavView(HorillaNavView):
+    """
+    nav bar
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("attendance-activity-search")
+
+        actions = [
+           
+            {
+                "action": _("Import"),
+                "attrs": f"""
+                    "id"="activityInfoImport"
+                    data-toggle = "oh-modal-toggle"
+                    data-target = "#objectCreateModal"
+                    hx-target="#objectCreateModalTarget"
+                    hx-get ="{reverse_lazy('attendance-activity-import')}"
+                    style="cursor: pointer;"
+                """,
+            },
+            {
+                "action": _("Export"),
+                "attrs": f"""
+                    data-toggle = "oh-modal-toggle"
+                    data-target = "#genericModal"
+                    hx-target="#genericModalBody"
+                    hx-get ="{reverse_lazy('attendance-bulk-export')}"
+                    style="cursor: pointer;"
+                """,
+            }
+
+        ]
+
+        if self.request.user.has_perm("attendance.delete_attendanceactivity"):
+            actions.append(
+                {
+                    "action": _("Delete"),
+                    "attrs": """
+                    onclick="
+                    deleteAttendanceNav();
+                    "
+                    data-action ="delete"
+                    style="cursor: pointer; color:red !important"
+                """,
+                }
+            )
+        if not self.request.user.has_perm(
+            "attendance.delete_attendanceactivity"
+        ) and not is_reportingmanager(self.request):
+            actions = None
+        self.actions = actions
+
+    nav_title = _("Attendance Activity")
+    filter_body_template = "cbv/attendance_activity/filter.html"
+    filter_instance = AttendanceActivityFilter()
+    filter_form_context_name = "form"
+    search_swap_target = "#listContainer"
+
+    group_by_fields = [
+        ("employee_id", _("Employee")),
+        ("attendance_date", _("Attendance Date")),
+        ("clock_in_date", _("In Date")),
+        ("clock_out_date", _("Out Date")),
+        ("shift_day", _("Shift Day")),
+        ("employee_id__country", _("Country")),
+        ("employee_id__employee_work_info__reporting_manager_id", _("Reporting Manager")),
+        ("employee_id__employee_work_info__shift_id", _("Shift")),
+        ("employee_id__employee_work_info__work_type_id", _("Work Type")),
+        ("employee_id__employee_work_info__department_id", _("Department")),
+        ("employee_id__employee_work_info__job_position_id", _("Job Position")),
+        ("employee_id__employee_work_info__employee_type_id", _("Employement Type")),
+        ("employee_id__employee_work_info__company_id", _("Company")),
+    ]
+
+
+@method_decorator(login_required, name="dispatch")
+class AttendanceDetailView(HorillaDetailedView):
+    """
+    Detail view of page
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("attendance-activity-search")
+
+    model = AttendanceActivity
+
+    title = _("Details")
+    header = {
+        "title": "employee_id__get_full_name",
+        "subtitle": "attendance_detail_subtitle",
+        "avatar": "employee_id__get_avatar",
+    }
+    body = [
+        (_("Attendance Date"), "attendance_date"),
+        (_("Day"), "get_status"),
+        (_("Check In"), "clock_in"),
+        (_("Check In Date"), "clock_in_date"),
+        (_("Check Out"), "clock_out"),
+        (_("Check Out Date"), "clock_out_date"),
+        (_("Duration"), "duration_format"),
+        (_("Shift"), "employee_id__employee_work_info__shift_id"),
+        (_("Work Type"), "employee_id__employee_work_info__work_type_id"),
+    ]
+    action_method = "detail_view_delete_attendance"
+
+
+@method_decorator(login_required, name="dispatch")
+class AttendanceBulkExport(TemplateView):
+    """
+    for bulk export
+    """
+
+    template_name = "cbv/attendance_activity/attendance_export.html"
+
+    def get_context_data(self, **kwargs: Any):
+        """
+        get data for export
+        """
+        attendances = AttendanceActivity.objects.all()
+        export_form = AttendanceActivityExportForm
+        export = AttendanceActivityFilter(queryset=attendances)
+        context = super().get_context_data(**kwargs)
+        context["export_form"] = export_form
+        context["export"] = export
+        return context
diff --git a/attendance/cbv/attendance_request.py b/attendance/cbv/attendance_request.py
new file mode 100644
index 000000000..64c6a358b
--- /dev/null
+++ b/attendance/cbv/attendance_request.py
@@ -0,0 +1,502 @@
+"""
+Attendance requests
+"""
+
+import json
+from typing import Any
+from django.http import HttpResponse
+from django.urls import reverse
+from django.utils.decorators import method_decorator
+from django.utils.translation import gettext_lazy as _
+from django.contrib import messages
+from attendance.filters import AttendanceFilters
+from attendance.forms import (
+    AttendanceRequestForm,
+    BulkAttendanceRequestForm,
+    NewRequestForm,
+)
+from attendance.models import Attendance
+from attendance.methods.utils import get_employee_last_name
+from base.methods import choosesubordinates, filtersubordinates, is_reportingmanager
+from employee.models import Employee
+from notifications.signals import notify
+from horilla_views.cbv_methods import login_required
+from horilla_views.generic.cbv.views import (
+    HorillaDetailedView,
+    HorillaListView,
+    HorillaNavView,
+    HorillaTabView,
+    HorillaFormView,
+    TemplateView,
+)
+
+
+@method_decorator(login_required, name="dispatch")
+class AttendancesRequestView(TemplateView):
+    """
+    for attendance request page
+    """
+
+    template_name = "cbv/attendance_request/attendance_request.html"
+
+
+@method_decorator(login_required, name="dispatch")
+class AttendancesRequestTabView(HorillaTabView):
+    """
+    tabview of attendance request page
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.view_id = "attendance-container"
+        self.tabs = [
+            {
+                "title": _("Requested Attendances"),
+                "url": f"{reverse('attendance-request-list-tab')}",
+            },
+            {
+                "title": _("All Attendances"),
+                "url": f"{reverse('attendance-list-tab')}",
+            },
+        ]
+
+
+@method_decorator(login_required, name="dispatch")
+class AttendancesRequestListView(HorillaListView):
+    """
+    list view
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("attendance-request-tab")
+
+    filter_class = AttendanceFilters
+    model = Attendance
+    columns = [
+        (_("Employee"), "employee_id", "employee_id__get_avatar"),
+        (_("Date"), "attendance_date"),
+        (_("Day"), "attendance_day"),
+        (_("Check-In"), "attendance_clock_in"),
+        (_("In Date"), "attendance_clock_in_date"),
+        (_("Check-Out"), "attendance_clock_out"),
+        (_("Out Date"), "attendance_clock_out_date"),
+        (_("Shift"), "shift_id"),
+        (_("Work Type"), "work_type_id"),
+        (_("Min Hour"), "minimum_hour"),
+        (_("At Work"), "attendance_worked_hour"),
+        (_("Overtime"), "attendance_overtime"),
+      
+    ]
+    sortby_mapping = [
+        ("Employee", "employee_id__get_full_name", "employee_id__get_avatar"),
+        ("Date", "attendance_date"),
+        ("In Date", "attendance_clock_in_date"),
+        ("Out Date", "attendance_clock_out_date"),
+        ("At Work", "attendance_worked_hour"),
+        ("Overtime", "attendance_overtime"),
+    ]
+    row_status_indications = [
+        (
+            "bulk-request--dot",
+            _("Bulk-Requests"),
+            """
+            onclick="
+                $('#applyFilter').closest('form').find('[name=is_bulk_request]').val('true');
+                $('[name=attendance_validated]').val('unknown').change();
+                $('#applyFilter').click();
+            "
+            """,
+        ),
+        (
+            "not-validated--dot",
+            _("Not Validated"),
+            """
+            onclick="
+                $('#applyFilter').closest('form').find('[name=attendance_validated]').val('false');
+                $('[name=is_bulk_request]').val('unknown').change();
+                $('#applyFilter').click();
+            "
+            """,
+        ),
+        (
+            "validated--dot",
+            _("Validated"),
+            """
+            onclick="
+                $('#applyFilter').closest('form').find('[name=attendance_validated]').val('true');
+                $('[name=is_bulk_request]').val('unknown').change();
+                $('#applyFilter').click();
+                
+            "
+            """,
+        ),
+    ]
+
+    row_status_class = "validated-{attendance_validated}"
+
+
+@method_decorator(login_required, name="dispatch")
+class AttendanceRequestListTab(AttendancesRequestListView):
+    """
+    Attendance request tab
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.view_id = "attendance-requests-container"
+
+    template_name = "cbv/attendance_request/attendance_request_tab.html"
+
+    columns = [
+        col for col in AttendancesRequestListView.columns if col[1] != "status_col"
+    ]
+
+    action_method = "request_actions"
+    row_attrs = """
+                id = "requestedattendanceTr{get_instance_id}"
+                data-attendance-id="{get_instance_id}"
+                data-toggle="oh-modal-toggle"
+                data-target="#validateAttendanceRequest"
+                hx-get = "{detail_view}?instance_ids={ordered_ids}"
+                hx-trigger ="click"
+                hx-target="#validateAttendanceRequestModalBody"
+                """
+
+    def get_queryset(self):
+        queryset = super().get_queryset()
+        self_data = queryset
+        queryset = queryset.filter(
+            is_validate_request=True,
+        )
+        queryset = filtersubordinates(
+            request=self.request,
+            perm="attendance.view_attendance",
+            queryset=queryset,
+        )
+        queryset = queryset | self_data.filter(
+            employee_id__employee_user_id=self.request.user,
+            is_validate_request=True,
+        )
+        return queryset
+
+
+@method_decorator(login_required, name="dispatch")
+class AttendanceListTab(AttendancesRequestListView):
+    """
+    Attendance tab
+    """
+
+    def get_queryset(self):
+        queryset = super().get_queryset()
+        data = queryset
+        attendances = filtersubordinates(
+            request=self.request,
+            perm="attendance.view_attendance",
+            queryset=queryset,
+        )
+        queryset = attendances | data.filter(
+            employee_id__employee_user_id=self.request.user
+        )
+        queryset = queryset.filter(
+            employee_id__is_active=True,
+        )
+        return queryset
+
+    actions = [
+        {
+            "action": _("Edit"),
+            "icon": "create-outline",
+            "attrs": """
+                class="oh-btn oh-btn--light-bkg w-100"
+                data-toggle="oh-modal-toggle"
+                data-target="#genericModal"
+                hx-get="{change_attendance}"
+                hx-target="#genericModalBody"
+                        
+                """,
+        }
+    ]
+
+    row_attrs = """
+                {diff_cell}
+                id = "allattendanceTr{get_instance_id}"
+                hx-get='{attendance_detail_view}?instance_ids={ordered_ids}'
+                hx-target="#genericModalBody"
+                hx-trigger ="click"
+                data-target="#genericModal"
+                data-toggle="oh-modal-toggle"
+                """
+
+
+@method_decorator(login_required, name="dispatch")
+class AttendanceRequestNav(HorillaNavView):
+    """
+    nav bar
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("attendance-request-tab")
+        self.create_attrs = f"""
+                        data-toggle="oh-modal-toggle"
+                        data-target="#genericModal"
+                        hx-get="{reverse('request-new-attendance')}"
+                        hx-target="#genericModalBody"
+                        """
+        if self.request.user.has_perm(
+            "attendance.add_attendanceovertime"
+        ) or is_reportingmanager(self.request):
+
+            self.actions = [
+                {
+                    "action": _("Bulk Approve"),
+                    "attrs": """
+                        onclick="
+                        reqAttendanceBulkApprove();
+                        "
+                        style="cursor: pointer;"
+                    """,
+                },
+                {
+                    "action": _("Bulk Reject"),
+                    "attrs": """
+                        onclick="reqAttendanceBulkReject();"
+                        style="color:red !important"
+                    """,
+                },
+            ]
+        else:
+            self.actions = None
+
+    nav_title = _("Attendances")
+    filter_body_template = "cbv/attendances/attendances_filter_page.html"
+    filter_instance = AttendanceFilters()
+    filter_form_context_name = "form"
+    search_swap_target = "#listContainer"
+
+    group_by_fields = [
+        ("employee_id", "Employee"),
+        ("attendance_date", "Attendance Date"),
+        ("attendance_clock_in_date", "In Date"),
+        ("attendance_clock_out_date", "Out Date"),
+        ("employee_id__country", "Country"),
+        ("employee_id__employee_work_info__reporting_manager_id", "Reporting Manager"),
+        ("shift_id", "Shift"),
+        ("work_type_id", "Work Type"),
+        ("minimum_hour", " Min Hour"),
+        ("employee_id__employee_work_info__department_id", "Department"),
+        ("employee_id__employee_work_info__job_position_id", "Job Position"),
+        ("employee_id__employee_work_info__employee_type_id", "Employement Type"),
+        ("employee_id__employee_work_info__company_id", "Company"),
+    ]
+
+
+@method_decorator(login_required, name="dispatch")
+class AttendanceListTabDetailView(HorillaDetailedView):
+    """
+    Detail view of page
+    """
+
+    model = Attendance
+
+    title = _("Details")
+    header = {
+        "title": "employee_id__get_full_name",
+        "subtitle": "attendances_detail_subtitle",
+        "avatar": "employee_id__get_avatar",
+    }
+    body = [
+        (_("Date"), "attendance_date"),
+        (_("Day"), "attendance_day"),
+        (_("Check-In"), "attendance_clock_in"),
+        (_("Check In Date"), "attendance_clock_in_date"),
+        (_("Check-Out"), "attendance_clock_out"),
+        (_("Check Out Date"), "attendance_clock_out_date"),
+        (_("Shift"), "shift_id"),
+        (_("Work Type"), "work_type_id"),
+        (_("Min Hour"), "minimum_hour"),
+        (_("At Work"), "attendance_worked_hour"),
+        (_("Overtime"), "attendance_overtime"),
+        (_("Activities"), "attendance_detail_activity_col", True),
+    ]
+
+    actions = [
+        {
+            "action": _("Edit"),
+            "icon": "create-outline",
+            "attrs": """
+                    onclick="event.stopPropagation();"
+                    class="oh-btn oh-btn--info w-100"
+                    data-toggle="oh-modal-toggle"
+                    data-target="#genericModalEdit"
+                    hx-get="{change_attendance}?all_attendance=true"
+                    hx-target="#genericModalEditBody"
+                        
+                """,
+        }
+    ]
+
+
+class NewAttendanceRequestFormView(HorillaFormView):
+    """
+    form view for create  attendance request
+    """
+
+    form_class = NewRequestForm
+    model = Attendance
+    new_display_title = _("New Attendance Request")
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.view_id = "attendanceRequest"
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        self.form = choosesubordinates(
+            self.request, self.form, "attendance.change_attendance"
+        )
+        self.form.fields["employee_id"].queryset = self.form.fields[
+            "employee_id"
+        ].queryset | Employee.objects.filter(employee_user_id=self.request.user)
+        self.form.fields["employee_id"].initial = self.request.user.employee_get.id
+        if self.request.GET.get("emp_id"):
+            emp_id = self.request.GET.get("emp_id")
+            self.form.fields["employee_id"].queryset = Employee.objects.filter(
+                id=emp_id
+            )
+            self.form.fields["employee_id"].initial = emp_id
+        if self.form.instance.pk:
+            self.form_class.verbose_name = _("Update Attendance Request")
+        return context
+
+    def form_valid(self, form: NewRequestForm) -> HttpResponse:
+        if form.is_valid():
+            message = _("New Attendance request created")
+            if form.new_instance is not None:
+                form.new_instance.save()
+            messages.success(self.request, message)
+            return self.HttpResponse()
+        return super().form_valid(form)
+
+
+class BulkAttendanceRequestFormView(HorillaFormView):
+    """
+    form view for create bulk  attendance request
+    """
+
+    form_class = BulkAttendanceRequestForm
+    model = Attendance
+    new_display_title = _("New Attendance Request")
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        self.form = choosesubordinates(
+            self.request, self.form, "attendance.change_attendance"
+        )
+        self.form.fields["employee_id"].queryset = self.form.fields[
+            "employee_id"
+        ].queryset | Employee.objects.filter(employee_user_id=self.request.user)
+        self.form.fields["employee_id"].initial = self.request.user.employee_get.id
+        return context
+
+    def form_valid(self, form: BulkAttendanceRequestForm) -> HttpResponse:
+        form.instance.attendance_clock_in_date = self.request.POST.get("from_date")
+        form.instance.attendance_date = self.request.POST.get("from_date")
+        if form.is_valid():
+            if form.instance.pk:
+                message = _("New Attendance request updated")
+            else:
+                message = _("New Attendance request created")
+                instance = form.save(commit=False)
+            messages.success(self.request, message)
+            return self.HttpResponse()
+        return super().form_valid(form)
+
+
+class UpdateAttendanceRequestFormView(HorillaFormView):
+    """
+    form view for update attendance request
+    """
+
+    form_class = AttendanceRequestForm
+    model = Attendance
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.view_id = "attendanceRequest"
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        if self.form.instance.pk:
+            self.form_class.verbose_name = _("Update Attendance Request")
+        return context
+
+    def form_valid(self, form: AttendanceRequestForm) -> HttpResponse:
+        if form.is_valid():
+            attendance = Attendance.objects.get(id=self.form.instance.pk)
+            instance = form.save()
+            instance.employee_id = attendance.employee_id
+            instance.id = attendance.id
+            if attendance.request_type != "create_request":
+                attendance.requested_data = json.dumps(instance.serialize())
+                attendance.request_description = instance.request_description
+                # set the user level validation here
+                attendance.is_validate_request = True
+                attendance.save()
+            else:
+                instance.is_validate_request_approved = False
+                instance.is_validate_request = True
+                instance.save()
+            messages.success(self.request, _("Attendance update request created."))
+            employee = attendance.employee_id
+            if attendance.employee_id.employee_work_info.reporting_manager_id:
+                reporting_manager = (
+                    attendance.employee_id.employee_work_info.reporting_manager_id.employee_user_id
+                )
+                user_last_name = get_employee_last_name(attendance)
+                notify.send(
+                    self.request.user,
+                    recipient=reporting_manager,
+                    verb=f"{employee.employee_first_name} {user_last_name}'s\
+                          attendance update request for {attendance.attendance_date} is created",
+                    verb_ar=f"تم إنشاء طلب تحديث الحضور لـ {employee.employee_first_name} \
+                        {user_last_name }في {attendance.attendance_date}",
+                    verb_de=f"Die Anfrage zur Aktualisierung der Anwesenheit von \
+                        {employee.employee_first_name} {user_last_name} \
+                            für den {attendance.attendance_date} wurde erstellt",
+                    verb_es=f"Se ha creado la solicitud de actualización de asistencia para {employee.employee_first_name}\
+                          {user_last_name} el {attendance.attendance_date}",
+                    verb_fr=f"La demande de mise à jour de présence de {employee.employee_first_name}\
+                          {user_last_name} pour le {attendance.attendance_date} a été créée",
+                    redirect=reverse("request-attendance-view")
+                    + f"?id={attendance.id}",
+                    icon="checkmark-circle-outline",
+                )
+            detail_view = self.request.GET.get("detail_view")
+            all_attendance = self.request.GET.get("all_attendance")
+            if detail_view == "true":
+                return HttpResponse(
+                    f"""<script>
+                                            var reqModal = $('#requestedattendanceTr{form.instance.pk}');
+                                            reqModal[0].click();
+                                            $('#genericModalEdit').removeClass('oh-modal--show');
+                                            $('.reload-record').click();
+                                            $('#reloadMessagesButton').click();
+                                        </script>
+                                    """
+                )
+            elif all_attendance == "true":
+                return HttpResponse(
+                    f"""<script>
+                                            var attendaceModal = $('#allattendanceTr{form.instance.pk}');
+                                            attendaceModal[0].click();
+                                            $('#genericModalEdit').removeClass('oh-modal--show');
+                                            $('.reload-record').click();
+                                            $('#reloadMessagesButton').click();
+                                        </script>
+                                    """
+                )
+
+            return self.HttpResponse()
+        return super().form_valid(form)
diff --git a/attendance/cbv/attendance_tab.py b/attendance/cbv/attendance_tab.py
new file mode 100644
index 000000000..80a213aa5
--- /dev/null
+++ b/attendance/cbv/attendance_tab.py
@@ -0,0 +1,124 @@
+"""
+This page is handling the cbv methods of work type and shift tab in employee profile page.
+"""
+
+import json
+from typing import Any
+from django.utils.translation import gettext_lazy as _
+from django.urls import reverse
+from attendance.cbv.attendance_request import AttendanceRequestListTab
+from attendance.cbv.hour_account import HourAccountList
+from attendance.cbv.my_attendances import MyAttendancesListView
+from attendance.filters import AttendanceFilters
+from attendance.models import Attendance
+from base.methods import filtersubordinates
+from base.request_and_approve import paginator_qry
+from employee.models import Employee
+from horilla_views.generic.cbv.views import HorillaListView, HorillaTabView
+
+class AttendanceTabView(HorillaTabView):
+    """
+    generic tab view for attendance
+    """
+
+    # template_name = "cbv/work_shift_tab/extended_work-shift.html"
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.view_id = "attendance-container"
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        pk = self.kwargs.get("pk")
+        context["emp_id"] = pk
+        employee = Employee.objects.get(id=pk)
+        context["instance"] = employee
+        context["tabs"] = [
+            {
+                "title": _("Requested Attendances"),
+                "url": f"{reverse('attendance-request-individual-tab',kwargs={'pk': pk})}",
+                "actions": [
+                    {
+                        "action": "Create Attendance Request",
+                        "accessibility": "attendance.cbv.accessibility.create_attendance_request_accessibility",
+                        "attrs": f"""
+                                hx-get="{reverse('request-new-attendance')}?emp_id={pk}",
+								hx-target="#genericModalBody"
+								data-toggle="oh-modal-toggle"
+								data-target="#genericModal"
+                      """,
+                    }
+                ],
+            },
+            {
+                "title": _("Validate Attendances"),
+                "url": f"{reverse('validate-attendance-individual-tab',kwargs={'pk': pk})}",
+            },
+            {
+                "title": _("Hour Account"),
+                "url": f"{reverse('attendance-overtime-individual-tab',kwargs={'pk': pk})}",
+            },
+            {
+                "title": _("All Attendances"),
+                "url": f"{reverse('all-attendances-individual-tab',kwargs={'pk': pk})}",
+            },
+        ]
+        return context
+
+
+class RequestedAttendanceIndividualView(AttendanceRequestListTab):
+    """
+    list view for requested attendance tab view
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        pk = self.request.resolver_match.kwargs.get('pk')
+        self.search_url = reverse("attendance-request-individual-tab",kwargs= {'pk': pk} )
+        self.view_id = "attendance-requests-container"
+
+    def get_queryset(self):
+        queryset = HorillaListView.get_queryset(self)
+        pk = self.request.resolver_match.kwargs.get('pk')
+        queryset = queryset.filter(
+            employee_id__employee_user_id=pk,
+            is_validate_request=True,
+        )
+        return queryset
+    
+
+class HourAccountIndividualTabView(HourAccountList):
+    """
+    list view for hour account tab 
+    """
+
+    template_name = "cbv/hour_account/hour_account_main.html"
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        pk = self.request.resolver_match.kwargs.get('pk')
+        self.search_url = reverse("attendance-overtime-individual-tab",kwargs= {'pk': pk} )
+        self.view_id = "ot-table"
+
+    def get_queryset(self):
+        queryset = super().get_queryset()
+        pk = self.kwargs.get("pk")
+        queryset = queryset.filter(employee_id=pk)
+        return queryset
+
+
+class AllAttendancesList(MyAttendancesListView):
+
+    def get_context_data(self, **kwargs: Any):
+        context = super().get_context_data(**kwargs)
+        pk = self.kwargs.get("pk")
+        context["search_url"] = (
+            f"{reverse('all-attendances-individual-tab',kwargs={'pk': pk})}"
+        )
+        return context
+
+    def get_queryset(self):
+        queryset = super().get_queryset()
+        pk = self.kwargs.get("pk")
+        queryset = queryset.filter(employee_id=pk)
+        return queryset
diff --git a/attendance/cbv/attendances.py b/attendance/cbv/attendances.py
new file mode 100644
index 000000000..010051d11
--- /dev/null
+++ b/attendance/cbv/attendances.py
@@ -0,0 +1,731 @@
+"""
+this page is handling the cbv methods of  attendances page
+"""
+
+import datetime
+from typing import Any
+from django.http import HttpResponse
+from django.shortcuts import render
+from django.urls import resolve, reverse, reverse_lazy
+from django.contrib import messages
+from django.utils.translation import gettext_lazy as _
+from django.utils.decorators import method_decorator
+import django_filters
+from attendance.cbv.attendance_activity import AttendanceActivityListView
+from attendance.filters import AttendanceFilters
+from attendance.forms import AttendanceExportForm, AttendanceForm, AttendanceUpdateForm
+from attendance.cbv.attendance_tab import AttendanceTabView
+from attendance.models import (
+    Attendance,
+    AttendanceValidationCondition,
+    strtime_seconds,
+)
+from base.decorators import manager_can_enter
+from base.filters import PenaltyFilter
+from base.methods import choosesubordinates, filtersubordinates, is_reportingmanager
+from base.models import PenaltyAccounts
+from employee.cbv.employee_profile import EmployeeProfileView
+from employee.cbv.employees import EmployeeNav, EmployeeCard, EmployeesList
+from employee.filters import EmployeeFilter
+from employee.models import Employee
+from horilla.filters import HorillaFilterSet
+from horilla_views.generic.cbv.views import (
+    HorillaDetailedView,
+    HorillaListView,
+    HorillaNavView,
+    HorillaTabView,
+    TemplateView,
+    HorillaFormView,
+)
+from horilla_views.cbv_methods import login_required, render_template
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(manager_can_enter("attendance.view_attendance"), name="dispatch")
+class AttendancesView(TemplateView):
+    """
+    for attendances page
+    """
+
+    template_name = "cbv/attendances/attendance_view_page.html"
+
+
+class AttendancesListView(HorillaListView):
+    """
+    list view
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("attendances-list-view")
+        if self.request.user.has_perm(
+            "attendance.change_attendance"
+        ) or is_reportingmanager(self.request):
+            self.option_method = "attendance_actions"
+
+    filter_class = AttendanceFilters
+    model = Attendance
+    columns = [
+        (_("Employee"), "employee_id", "employee_id__get_avatar"),
+        (_("Date"), "attendance_date"),
+        (_("Day"), "attendance_day"),
+        (_("Check-In"), "attendance_clock_in"),
+        (_("In Date"), "attendance_clock_in_date"),
+        (_("Check-Out"), "attendance_clock_out"),
+        (_("Out Date"), "attendance_clock_out_date"),
+        (_("Shift"), "shift_id"),
+        (_("Work Type"), "work_type_id"),
+        (_("Min Hour"), "minimum_hour"),
+        (_("At Work"), "attendance_worked_hour"),
+        (_("Pending Hour"), "hours_pending"),
+        (_("Overtime"), "attendance_overtime"),
+    ]
+    sortby_mapping = [
+        ("Employee", "employee_id__get_full_name", "employee_id__get_avatar"),
+        ("Date", "attendance_date"),
+        ("Day", "attendance_day__day"),
+        ("Check-In", "attendance_clock_in"),
+        ("In Date", "attendance_clock_in_date"),
+        ("Check-Out", "attendance_clock_out"),
+        ("Out Date", "attendance_clock_out_date"),
+        ("Shift", "shift_id__employee_shift"),
+        ("Work Type", "work_type_id__work_type"),
+        ("Min Hour", "minimum_hour"),
+        ("At Work", "attendance_worked_hour"),
+        ("Pending Hour", "hours_pending"),
+        ("Overtime", "attendance_overtime"),
+    ]
+    records_per_page = 10
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(manager_can_enter("attendance.view_attendance"), name="dispatch")
+class AttendancesTabView(HorillaTabView):
+    """
+    tabview of candidate page
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.view_id = "attendances-tab"
+        self.tabs = [
+            {
+                "title": _("Attendance To Validate"),
+                "url": f"{reverse('validate-attendance-tab')}",
+                "actions": [
+                    {
+                        "action": "Validate",
+                        "attrs": """
+                    onclick="
+                    bulkValidateTabAttendance();
+                    "
+                    style="cursor: pointer;"
+                """,
+                    }
+                ],
+            },
+            {
+                "title": _(" OT Attendances"),
+                "url": f"{reverse('ot-attendance-tab')}",
+                "actions": [
+                    {
+                        "action": "Approve OT",
+                        "attrs": """
+                    onclick="
+                    otBulkValidateTabAttendance();
+                    "
+                    style="cursor: pointer;"
+                """,
+                    }
+                ],
+            },
+            {
+                "title": _(" Validated Attendances"),
+                "url": f"{reverse('validated-attendance-tab')}",
+            },
+        ]
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(manager_can_enter("attendance.view_attendance"), name="dispatch")
+class AttendancesNavView(HorillaNavView):
+    """
+    nav bar
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("attendances-tab-view")
+        self.search_in = [
+            ("attendance_day", _("Day")),
+            ("shift_id", _("Shift")),
+            ("work_type_id", _("Work Type")),
+            ("employee_id__employee_work_info__department_id", _("Department")),
+            (
+                "employee_id__employee_work_info__job_position_id",
+                _("Job Position"),
+            ),
+            ("employee_id__employee_work_info__company_id", _("Company")),
+        ]
+        self.create_attrs = f"""
+             hx-get="{reverse_lazy("attendance-create")}"
+             hx-target="#genericModalBody"
+             data-target="#genericModal"
+             data-toggle="oh-modal-toggle"
+         """
+        actions = [
+            {
+                "action": _("Import"),
+                "attrs": """
+                    onclick="
+                    importAttendanceNav();
+                    "
+                    data-toggle = "oh-modal-toggle"
+                    data-target = "#attendanceImport
+                    "
+                    style="cursor: pointer;"
+                """,
+            },
+            {
+                "action": _("Export"),
+                "attrs": f"""
+                    data-toggle = "oh-modal-toggle"
+                    data-target = "#genericModal"
+                    hx-target="#genericModalBody"
+                    hx-get ="{reverse('attendences-navbar-export')}"
+                    style="cursor: pointer;"
+                """,
+            },
+        ]
+        if self.request.user.has_perm("attendance.add_attendance"):
+            actions.append(
+                {
+                    "action": _("Delete"),
+                    "attrs": """
+                        onclick="
+                        bulkDeleteAttendanceNav();
+                        "
+                        data-action="delete"
+                        style="cursor: pointer; color:red !important"
+                    """,
+                }
+            )
+        self.actions = actions
+
+    nav_title = _("Attendances")
+    filter_body_template = "cbv/attendances/attendances_filter_page.html"
+    filter_instance = AttendanceFilters()
+    filter_form_context_name = "form"
+    search_swap_target = "#listContainer"
+
+    group_by_fields = [
+        ("employee_id", _("Employee")),
+        ("attendance_date", _("Attendance Date")),
+        ("shift_id", _("Shift")),
+        ("Work Type", _("work_type_id")),
+        ("minimum_hour", _("Min Hour")),
+        ("employee_id__country", "Country"),
+        (
+            "employee_id__employee_work_info__reporting_manager_id",
+            _("Reporting Manager"),
+        ),
+        ("employee_id__employee_work_info__department_id", _("Department")),
+        ("employee_id__employee_work_info__job_position_id", _("Job Position")),
+        (
+            "employee_id__employee_work_info__employee_type_id",
+            _("Employement Type"),
+        ),
+        ("employee_id__employee_work_info__company_id", _("Company")),
+    ]
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(manager_can_enter("attendance.view_attendance"), name="dispatch")
+class AttendancesExportNav(TemplateView):
+    """
+    for bulk export
+    """
+
+    template_name = "cbv/attendances/attendances_export_page.html"
+
+    def get_context_data(self, **kwargs: Any):
+        """
+        get data for export
+        """
+
+        attendances = Attendance.objects.all()
+        export_form = AttendanceExportForm
+        export = AttendanceFilters(queryset=attendances)
+        context = super().get_context_data(**kwargs)
+        context["export_form"] = export_form
+        context["export"] = export
+        return context
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(manager_can_enter("attendance.view_attendance"), name="dispatch")
+class ValidateAttendancesList(AttendancesListView):
+    """
+    validate tab
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("validate-attendance-tab")
+
+    def get_queryset(self):
+        queryset = super().get_queryset()
+        queryset = queryset.filter(
+            attendance_validated=False, employee_id__is_active=True
+        )
+        queryset = filtersubordinates(
+            self.request, queryset, "attendance.view_attendance"
+        )
+        return queryset
+
+    selected_instances_key_id = "validateselectedInstances"
+    action_method = "validate_button"
+    row_attrs = """
+                hx-get='{validate_detail_view}?instance_ids={ordered_ids}'
+                hx-target="#genericModalBody"
+                data-target="#genericModal"
+                data-toggle="oh-modal-toggle"
+                """
+    
+    header_attrs = {
+        "action": """
+                    style="width:150px !important;"
+                """
+    }
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(manager_can_enter("attendance.view_attendance"), name="dispatch")
+class OTAttendancesList(AttendancesListView):
+    """
+    OT tab
+    """
+
+    selected_instances_key_id = "overtimeselectedInstances"
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("ot-attendance-tab")
+        self.action_method = "ot_approve"
+
+    def get_queryset(self):
+        queryset = super().get_queryset()
+        minot = strtime_seconds("00:30")
+        condition = (
+            AttendanceValidationCondition.objects.first()
+        )  # and condition.minimum_overtime_to_approve is not None
+        if condition is not None:
+            minot = strtime_seconds(condition.minimum_overtime_to_approve)
+        queryset = queryset.filter(
+            overtime_second__gt=0,
+            attendance_validated=True,
+        )
+        queryset = filtersubordinates(
+            self.request, queryset, "attendance.view_attendance"
+        )
+        return queryset
+
+    row_attrs = """
+                hx-get='{ot_detail_view}?instance_ids={ordered_ids}'
+                hx-target="#genericModalBody"
+                data-target="#genericModal"
+                data-toggle="oh-modal-toggle"
+                """
+    header_attrs = {
+        "action": """
+                    style="width:150px !important;"
+                """
+    }
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(manager_can_enter("attendance.view_attendance"), name="dispatch")
+class ValidatedAttendancesList(AttendancesListView):
+    """
+    validated tab
+    """
+
+    selected_instances_key_id = "validatedselectedInstances"
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("validated-attendance-tab")
+
+    def get_queryset(self):
+        queryset = super().get_queryset()
+        queryset = queryset.filter(
+            attendance_validated=True, employee_id__is_active=True
+        )
+        queryset = filtersubordinates(
+            self.request, queryset, "attendance.view_attendance"
+        )
+        return queryset
+
+    row_attrs = """
+                hx-get='{validated_detail_view}?instance_ids={ordered_ids}'
+                hx-target="#genericModalBody"
+                data-target="#genericModal"
+                data-toggle="oh-modal-toggle"
+                """
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(manager_can_enter("attendance.view_attendance"), name="dispatch")
+class GenericAttendancesDetailView(HorillaDetailedView):
+    """
+    Generic Detail view of page
+    """
+
+    model = Attendance
+
+    title = _("Details")
+    header = {
+        "title": "employee_id__get_full_name",
+        "subtitle": "attendances_detail_subtitle",
+        "avatar": "employee_id__get_avatar",
+    }
+    body = [
+        (_("Date"), "attendance_date"),
+        (_("Day"), "attendance_day"),
+        (_("Check-In"), "attendance_clock_in"),
+        (_("Check In Date"), "attendance_clock_in_date"),
+        (_("Check-Out"), "attendance_clock_out"),
+        (_("Check Out Date"), "attendance_clock_out_date"),
+        (_("Shift"), "shift_id"),
+        (_("Work Type"), "work_type_id"),
+        (_("Min Hour"), "minimum_hour"),
+        (_("At Work"), "attendance_worked_hour"),
+        (_("Overtime"), "attendance_overtime"),
+        (_("Activities"), "attendance_detail_activity_col", True),
+    ]
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(manager_can_enter("attendance.view_attendance"), name="dispatch")
+class ValidateDetailView(GenericAttendancesDetailView):
+    """
+    detail view for validate tab
+    """
+
+    action_method = "validate_detail_actions"
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(manager_can_enter("attendance.view_attendance"), name="dispatch")
+class OtDetailView(GenericAttendancesDetailView):
+    """
+    detail view for OT tab
+    """
+
+    action_method = "ot_detail_actions"
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(manager_can_enter("attendance.view_attendance"), name="dispatch")
+class ValidatedDetailView(GenericAttendancesDetailView):
+    """
+    detail view for validate tab
+    """
+
+    action_method = "validated_detail_actions"
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(manager_can_enter("attendance.add_attendance"), name="dispatch")
+class AttendancesFormView(HorillaFormView):
+    """
+    form view
+    """
+
+    form_class = AttendanceForm
+    model = Attendance
+    new_display_title = _("Add Attendances")
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        self.form = choosesubordinates(
+            self.request, self.form, "attendance.add_attendance"
+        )
+
+        context["form"] = self.form
+        context["view_id"] = "attendanceCreate"
+
+        return context
+
+    def form_valid(self, form: AttendanceForm) -> HttpResponse:
+        if form.is_valid():
+            message = _("Attendance Added")
+            form.save()
+            messages.success(self.request, message)
+            return self.HttpResponse("<script>window.location.reload()</script>")
+        return super().form_valid(form)
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(manager_can_enter("attendance.change__attendance"), name="dispatch")
+class AttendanceUpdateFormView(HorillaFormView):
+    """
+    form for update
+    """
+
+    model = Attendance
+    form_class = AttendanceUpdateForm
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        if self.form.instance.pk:
+            self.form_class.verbose_name = _("Edit Attendance")
+
+        context["view_id"] = "attendanceUpdate"
+
+        return context
+
+    def form_valid(self, form: AttendanceUpdateForm) -> HttpResponse:
+        if form.is_valid():
+            message = _("Attandance Updated")
+            form.save()
+            messages.success(self.request, message)
+            return HttpResponse("<script>window.location.reload()</script>")
+        return super().form_valid(form)
+
+
+@method_decorator(login_required, name="dispatch")
+class AttendanceDetailActivityList(AttendanceActivityListView):
+    """
+    List view for activity col in detail view
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.action_method = None
+        resolved = resolve(self.request.path_info)
+        kwargs = {
+            "pk": resolved.kwargs.get("pk"),
+        }
+        self.search_url = reverse("get-attendance-activities", kwargs=kwargs)
+
+    bulk_select_option = None
+    row_attrs = ""
+
+    def get_queryset(self):
+        queryset = super().get_queryset()
+        pk = Attendance.find(self.kwargs.get("pk"))
+        queryset = queryset.filter(
+            attendance_date=pk.attendance_date, employee_id=pk.employee_id
+        )
+
+        return queryset
+
+
+class PenaltyAccountListView(HorillaListView):
+    """
+    list view for penalty tab
+    """
+
+    filter_class = PenaltyFilter
+    model = PenaltyAccounts
+    records_per_page = 3
+    columns = [
+        (_("Leave Type"), "leave_type_id"),
+        (_("Minus Days"), "minus_leaves"),
+        (_("Deducted From CFD"), "get_deduct_from_carry_forward"),
+        (_("Penalty amount"), "penalty_amount"),
+        (_("Created Date"), "created_at"),
+        (_("Penalty Type"),"penalty_type_col")
+    ]
+
+    actions = [
+
+        {
+            "action": _("Delete"),
+            "icon": "trash-outline",
+            "attrs" : """
+                        class="oh-btn oh-btn--light-bkg w-100 text-danger"
+                        hx-confirm="Are you sure you want to delete this penalty?"
+                        hx-post="{get_delete_url}"
+                        hx-target="#penaltyTr{get_delete_instance}"
+                        hx-swap="delete"
+                                    
+                      """
+        }
+
+    ]
+
+    row_attrs = """
+                id = "penaltyTr{get_delete_instance}"
+                """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        pk = self.request.resolver_match.kwargs.get("pk")
+        self.search_url = reverse("individual-panlty-list-view", kwargs={"pk": pk})
+
+    def get_queryset(self):
+        queryset = super().get_queryset()
+        pk = self.kwargs.get("pk")
+        queryset = queryset.filter(employee_id=pk)
+        return queryset
+
+
+class ValidateAttendancesIndividualTabView(AttendancesListView):
+    """
+    list view for validate attendance tab view
+    """
+
+    def get_queryset(self):
+        queryset = super().get_queryset()
+        pk = self.kwargs.get("pk")
+        queryset = queryset.filter(
+            employee_id=pk,
+            attendance_validated=False,
+            employee_id__is_active=True,
+        )
+        queryset = (
+            filtersubordinates(self.request, queryset, "attendance.view_attendance")
+            | queryset
+        )
+        return queryset
+
+    selected_instances_key_id = "validateselectedInstances"
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        pk = self.request.resolver_match.kwargs.get("pk")
+        self.search_url = reverse(
+            "validate-attendance-individual-tab", kwargs={"pk": pk}
+        )
+        if self.request.user.has_perm(
+            "attendance.change_attendance"
+        ) or is_reportingmanager(self.request):
+            self.action_method = "validate_button"
+        self.view_id = "validate-container"
+
+    row_attrs = """
+                hx-get='{individual_validate_detail_view}?instance_ids={ordered_ids}'
+                hx-target="#genericModalBody"
+                data-target="#genericModal"
+                data-toggle="oh-modal-toggle"
+                """
+
+
+class ValidateAttendancesIndividualDetailView(GenericAttendancesDetailView):
+    """
+    Validate tab detail view in single view of employee
+    """
+
+    action_method = "validate_detail_actions"
+
+    def get_queryset(self):
+        queryset = super().get_queryset()
+        pk = self.kwargs.get("pk")
+        obj = queryset.get(pk=pk)
+        employee_id = obj.employee_id
+        if is_reportingmanager(self.request):
+            queryset = filtersubordinates(
+                self.request, queryset, "attendance.view_attendance"
+            ) | queryset.filter(employee_id=self.request.user.employee_get)
+        elif self.request.user.has_perm("attendance.view_attendance"):
+            queryset = queryset.filter(employee_id=employee_id)
+        else:
+            queryset = queryset.filter(employee_id=self.request.user.employee_get)
+        return queryset
+
+    @method_decorator(login_required, name="dispatch")
+    def dispatch(self, *args, **kwargs):
+        return super(GenericAttendancesDetailView, self).dispatch(*args, **kwargs)
+
+
+EmployeeProfileView.add_tab(
+    tabs=[
+        {
+            "title": "Attendance",
+            # "view": views.attendance_tab,
+            "view": AttendanceTabView.as_view(),
+            "accessibility": "attendance.cbv.accessibility.attendance_accessibility",
+        },
+        {
+            "title": "Penalty Account",
+            "view": PenaltyAccountListView.as_view(),
+            "accessibility": "attendance.cbv.accessibility.penalty_accessibility",
+        },
+    ]
+)
+
+
+def get_working_today(queryset, _name, value):
+    today = datetime.datetime.now().date()
+    yesterday = today - datetime.timedelta(days=1)
+
+    working_employees = Attendance.objects.filter(
+        attendance_date__gte=yesterday,
+        attendance_date__lte=today,
+        attendance_clock_out_date__isnull=True,
+    ).values_list("employee_id", flat=True)
+
+    if value:
+        queryset = queryset.filter(id__in=working_employees)
+    else:
+        queryset = queryset.exclude(id__in=working_employees)
+    return queryset
+
+
+og_init = EmployeeFilter.__init__
+
+
+def online_init(self, *args, **kwargs):
+    og_init(self, *args, **kwargs)
+    custom_field = django_filters.BooleanFilter(
+        label="Working", method=get_working_today
+    )
+    self.filters["working_today"] = custom_field
+    self.form.fields["working_today"] = custom_field.field
+    self.form.fields["working_today"].widget.attrs.update(
+        {
+            "class": "oh-select oh-select-2 w-100",
+        }
+    )
+
+
+status_indications = [
+    (
+        "offline--dot",
+        _("Offline"),
+        """
+            onclick="
+                $('#applyFilter').closest('form').find('[name=working_today]').val('false');
+                $('#applyFilter').click();
+            "
+            """,
+    ),
+    (
+        "online--dot",
+        _("Online"),
+        """
+            onclick="$('#applyFilter').closest('form').find('[name=working_today]').val('true');
+                $('#applyFilter').click();
+            "
+            """,
+    ),
+]
+
+
+def offline_online(self):
+    """
+    This method for get custome coloumn for rating.
+    """
+
+    return render_template(
+        path="cbv/employees_view/offline_online.html",
+        context={"instance": self},
+    )
+
+
+EmployeeFilter.__init__ = online_init
+EmployeeNav.filter_instance = EmployeeFilter()
+EmployeeCard.card_status_indications = status_indications
+EmployeesList.row_status_indications = status_indications
+Employee.offline_online = offline_online
diff --git a/attendance/cbv/break_point.py b/attendance/cbv/break_point.py
new file mode 100644
index 000000000..9213fe4b6
--- /dev/null
+++ b/attendance/cbv/break_point.py
@@ -0,0 +1,120 @@
+"""
+this page is handling the cbv methods for Break point conditions in settings
+"""
+
+from typing import Any
+from django.http import HttpResponse
+from django.shortcuts import render
+from django.urls import reverse
+from django.contrib import messages
+from django.utils.decorators import method_decorator
+from django.utils.translation import gettext_lazy as _
+from attendance.filters import AttendanceBreakpointFilter
+from attendance.forms import AttendanceValidationConditionForm
+from attendance.models import AttendanceValidationCondition
+from horilla.decorators import permission_required
+from horilla_views.cbv_methods import login_required
+from horilla_views.generic.cbv.views import (
+    HorillaFormView,
+    HorillaListView,
+    HorillaNavView,
+)
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(
+    permission_required("attendance.view_attendancevalidationcondition"),
+    name="dispatch",
+)
+class BreakPointList(HorillaListView):
+    """
+    list view of the Break point conditions in settings
+    """
+
+    model = AttendanceValidationCondition
+    filter_class = AttendanceBreakpointFilter
+
+    columns = [
+        (_("Auto Validate Till"), "validation_at_work"),
+        (_("Min Hour To Approve OT"), "minimum_overtime_to_approve"),
+        (_("OT Cut-Off/Day"), "overtime_cutoff"),
+        (_("Actions"), "break_point_actions"),
+    ]
+    header_attrs = {
+        "validation_at_work": """ style="width:200px !important" """,
+
+    }
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(
+    permission_required("attendance.view_attendancevalidationcondition"),
+    name="dispatch",
+)
+class BreakPointNavView(HorillaNavView):
+    """
+    navbar of attendance breakpoint view
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        condition = AttendanceValidationCondition.objects.first()
+        if not condition and self.request.user.has_perm("attendance.add_attendancevalidationcondition"):
+            self.create_attrs = f"""
+                                onclick = "event.stopPropagation();"
+                                data-toggle="oh-modal-toggle"
+                                data-target="#genericModal"
+                                hx-target="#genericModalBody"
+                                hx-get="{reverse('break-point-create-form')}"
+                                """
+
+    nav_title = _("Break Point Condition")
+    search_swap_target = "#listContainer"
+    filter_instance = AttendanceBreakpointFilter()
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(
+    permission_required("attendance.view_attendancevalidationcondition"),
+    name="dispatch",
+)
+class BreakPointCreateForm(HorillaFormView):
+    """
+    form view for create and edit Break Point in settings
+    """
+
+    model = AttendanceValidationCondition
+    form_class = AttendanceValidationConditionForm
+    new_display_title = _("Create Attendance condition")
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        # form = self.form_class()
+        if self.form.instance.pk:
+            form = self.form_class(instance=self.form.instance)
+            self.form_class.verbose_name = _("Update Attendance condition")
+        context[form] = self.form
+        return context
+
+    def form_invalid(self, form: Any) -> HttpResponse:
+        if self.form.instance.pk:
+            self.form_class.verbose_name = _("Update Attendance condition")
+        if not form.is_valid():
+            errors = form.errors.as_data()
+            return render(
+                self.request, self.template_name, {"form": form, "errors": errors}
+            )
+        return super().form_invalid(form)
+
+    def form_valid(self, form: AttendanceValidationConditionForm) -> HttpResponse:
+        if form.is_valid():
+            if form.instance.pk:
+                messages.success(
+                    self.request, _("Attendance Break-point settings updated.")
+                )
+            else:
+                messages.success(
+                    self.request, _("Attendance Break-point settings created.")
+                )
+            form.save()
+            return self.HttpResponse("<script>location.reload();</script>")
+        return super().form_valid(form)
diff --git a/attendance/cbv/check_in_check_out.py b/attendance/cbv/check_in_check_out.py
new file mode 100644
index 000000000..6423ce7af
--- /dev/null
+++ b/attendance/cbv/check_in_check_out.py
@@ -0,0 +1,50 @@
+from typing import Any
+
+from django.urls import reverse
+from attendance.filters import AttendanceGeneralSettingFilter
+from attendance.models import AttendanceGeneralSetting
+from horilla_views.generic.cbv.views import HorillaListView,HorillaNavView
+from django.utils.translation import gettext_lazy as _
+
+class CheckInCheckOutListView(HorillaListView):
+    """
+    List view of the page
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.view_id = "check-in-check-out"
+
+    model = AttendanceGeneralSetting
+    filter_class = AttendanceGeneralSettingFilter
+
+    columns = [
+        (_("Company"), "company_col"),
+        (_("Check in/Check out"), "check_in_check_out_col"),  
+    ]
+
+    header_attrs = {
+        "company_col" : """
+                   style = "width:100px !important"
+                   """,     
+    }
+
+    bulk_select_option = False
+
+
+class CheckInCheckOutNavBar(HorillaNavView):
+    """
+    Nav bar
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        # self.search_url = reverse("check-in-check-out-list")
+        
+
+    nav_title = _("Enable Check In/Check out")
+    filter_instance = AttendanceGeneralSettingFilter()
+    search_swap_target = "#listContainer"
+
+   
+   
\ No newline at end of file
diff --git a/attendance/cbv/dashboard.py b/attendance/cbv/dashboard.py
new file mode 100644
index 000000000..ea68397bc
--- /dev/null
+++ b/attendance/cbv/dashboard.py
@@ -0,0 +1,137 @@
+"""
+this page handles the cbv methods for dashboard
+"""
+
+from datetime import datetime
+from typing import Any
+from django.urls import reverse
+from django.utils.translation import gettext_lazy as _
+from django.utils.decorators import method_decorator
+from attendance.cbv.attendances import OTAttendancesList, ValidateAttendancesList
+from attendance.filters import LateComeEarlyOutFilter
+from attendance.methods.utils import strtime_seconds
+from attendance.models import AttendanceLateComeEarlyOut, AttendanceValidationCondition
+from base.methods import filtersubordinates
+from horilla_views.cbv_methods import login_required
+from horilla_views.generic.cbv.views import HorillaListView
+
+
+
+@method_decorator(login_required, name="dispatch")
+class DashboardAttendanceToValidate(ValidateAttendancesList):
+    """
+    list view for attendance to validate in dashboard
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("dashboard-attendance-validate")
+        self.option_method = ""
+    
+    columns = [
+        (_("Employee"), "employee_id", "employee_id__get_avatar"),
+        (_("Worked Hours"), "attendance_worked_hour"),
+        
+    ]
+
+    header_attrs = {
+           
+            "attendance_worked_hour": """
+                    style="width:100px !important;"
+                    """,
+            "employee_id": """
+                            style="width:100px !important;"
+                            """,
+            "action": """
+                    style="width:100px !important;"
+                    """,
+            
+    }
+
+    records_per_page = 3
+    bulk_select_option = False
+    show_toggle_form = False
+
+
+@method_decorator(login_required, name="dispatch")
+class DashboardaAttendanceOT(OTAttendancesList):
+    """
+    list view for OT attendance to validate in dashboard
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("dashboard-overtime-approve")
+        self.option_method = ""
+
+    def get_queryset(self):
+        queryset = super().get_queryset()
+        condition = AttendanceValidationCondition.objects.first()
+        minot = strtime_seconds("00:00")
+        if condition is not None and condition.minimum_overtime_to_approve is not None:
+            minot = strtime_seconds(condition.minimum_overtime_to_approve)
+        queryset = queryset.filter(
+            overtime_second__gte=minot,
+            attendance_validated=True,
+            employee_id__is_active=True,
+            attendance_overtime_approve=False,
+        )
+        queryset = filtersubordinates(
+            self.request, queryset, "attendance.view_attendance"
+        )
+        return queryset
+
+    
+    columns = [
+        (_("Employee"), "employee_id", "employee_id__get_avatar"),
+        (_("Overtime"), "attendance_overtime"),
+    ]
+    header_attrs = {
+        "action": """
+            style="width:100px !important;"
+            """,
+        "attendance_overtime": """
+            style="width:100px !important;"
+            """,
+        "employee_id": """
+                            style="width:100px !important;"
+                            """,
+    }
+
+    show_toggle_form = False
+    records_per_page = 3
+    bulk_select_option = False
+
+
+
+
+@method_decorator(login_required, name="dispatch")
+class DashboardOnBreak(HorillaListView):
+    """
+    view for on break employee list
+    """
+
+    model = AttendanceLateComeEarlyOut
+    filter_class = LateComeEarlyOutFilter
+    show_toggle_form =False
+
+    bulk_select_option = False
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("dashboard-on-break")
+
+    def get_queryset(self):
+        queryset = super().get_queryset()
+        today = datetime.today()
+        queryset = queryset.filter(
+        type="early_out", attendance_id__attendance_date=today
+        )
+        return queryset
+        
+    columns = [
+        (_("Employee"), "employee_id", "employee_id__get_avatar"),
+    ]
+        
+
+   
\ No newline at end of file
diff --git a/attendance/cbv/dashboard_offline_online.py b/attendance/cbv/dashboard_offline_online.py
new file mode 100644
index 000000000..57e32b041
--- /dev/null
+++ b/attendance/cbv/dashboard_offline_online.py
@@ -0,0 +1,97 @@
+"""
+this page handles the cbv methods for online and offline employee list in dashboard
+"""
+
+from datetime import date
+from typing import Any
+from django.urls import reverse
+from django.utils.translation import gettext_lazy as _
+from django.utils.decorators import method_decorator
+from attendance.cbv.attendances import OTAttendancesList, ValidateAttendancesList
+
+from base.decorators import manager_can_enter
+from employee.filters import EmployeeFilter
+from employee.models import Employee
+from horilla_views.cbv_methods import login_required
+from horilla_views.generic.cbv.views import HorillaListView
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(manager_can_enter("leave.view_leaverequest"), name="dispatch")
+class DashboardOfflineEmployees(HorillaListView):
+    """
+    list view for offline employees in dashboard
+    """
+
+    model = Employee
+    filter_class = EmployeeFilter
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("not-in-yet")
+
+    def get_queryset(self):
+        queryset = super().get_queryset()
+        queryset = (
+            EmployeeFilter({"not_in_yet": date.today()})
+            .qs.exclude(employee_work_info__isnull=True)
+            .filter(is_active=True)
+        )
+
+        return queryset
+
+    columns = [
+        ("Employee", "get_full_name", "get_avatar"),
+        ("Work Status", "get_leave_status"),
+        ("Actions", "send_mail_button"),
+    ]
+    header_attrs = {
+        "get_full_name": """
+        style="width:200px !important;"
+        """,
+        "send_mail_button": """
+        style="width:80px !important;"
+        """,
+    }
+    records_per_page = 7
+    show_toggle_form = False
+    bulk_select_option = False
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(manager_can_enter("leave.view_leaverequest"), name="dispatch")
+class DashboardOnlineEmployees(HorillaListView):
+    """
+    list view for online employees in dashboard
+    """
+
+    model = Employee
+    filter_class = EmployeeFilter
+    show_toggle_form = False
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("not-out-yet")
+
+    def get_queryset(self):
+        queryset = super().get_queryset()
+        queryset = (
+            EmployeeFilter({"not_out_yet": date.today()})
+            .qs.exclude(employee_work_info__isnull=True)
+            .filter(is_active=True)
+        )
+
+        return queryset
+
+    columns = [
+        ("Employee", "employee_id__get_full_name", "employee_id__get_avatar"),
+        ("Work Status", "get_custom_forecasted_info_col"),
+    ]
+
+    header_attrs = {
+        "employee_id__get_full_name": """ style="width:200px !important" """,
+        "get_custom_forecasted_info_col": """ style="width:180px !important" """,
+    }
+
+    records_per_page = 8
+    bulk_select_option = False
diff --git a/attendance/cbv/grace_time.py b/attendance/cbv/grace_time.py
new file mode 100644
index 000000000..e4f601069
--- /dev/null
+++ b/attendance/cbv/grace_time.py
@@ -0,0 +1,207 @@
+"""
+This page handles grace time in settings page.
+"""
+from typing import Any
+from django.http import HttpResponse
+from django.shortcuts import render
+from django.utils.translation import gettext_lazy as _
+from django.utils.decorators import method_decorator
+from django.urls import reverse
+from django.contrib import messages
+from attendance.filters import GraceTimeFilter
+from attendance.forms import GraceTimeForm
+from attendance.models import GraceTime
+from base.cbv.employee_shift import EmployeeShiftListView
+from horilla_views.cbv_methods import login_required, permission_required
+from horilla_views.generic.cbv.views import (
+    HorillaFormView,
+    HorillaListView,
+    HorillaNavView,
+)
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(
+    permission_required(perm="attendance.view_attendancevalidationcondition"),
+    name="dispatch",
+)
+class GenericGraceTimeListView(HorillaListView):
+    """
+    List view of the page
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.view_id = "all-container"
+
+    model = GraceTime
+    filter_class = GraceTimeFilter
+
+    columns = [
+        (_("Allowed Time"), "allowed_time_col"),
+        (_("Is active"), "is_active_col"),
+        (_("Applicable on clock-in"), "applicable_on_clock_in_col"),
+        (_("Applicable on clock-out"), "applicable_on_clock_out_col"),
+        (_("Assigned Shifts"), "get_shifts_display"),
+        
+    ]
+
+    header_attrs = {
+        "allowed_time_col" : """
+                   style = "width:200px !important"
+                   """,
+       
+    }
+
+    row_attrs = """
+                id = "graceTimeTr{get_instance_id}"
+                """
+
+    action_method = "action_col"
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(
+    permission_required(perm="attendance.view_attendancevalidationcondition"),
+    name="dispatch",
+)
+class DefaultGraceTimeList(GenericGraceTimeListView):
+    """
+    List of default grace time
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.view_id = "default-container"
+
+    selected_instances_key_id = "selectedInstancesDefault"
+
+    def get_queryset(self):
+        queryset = super().get_queryset()
+        return queryset.filter(is_default=True)
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(
+    permission_required(perm="attendance.view_attendancevalidationcondition"),
+    name="dispatch",
+)
+class GraceTimeList(GenericGraceTimeListView):
+    """
+    List of grace time
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.view_id = "gracetime-container"
+
+    selected_instances_key_id = "selectedInstancesData"
+
+    def get_queryset(self):
+        queryset = super().get_queryset()
+        return queryset.exclude(is_default=True)
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(
+    permission_required(perm="attendance.view_attendancevalidationcondition"),
+    name="dispatch",
+)
+class DefaultGraceTimeNav(HorillaNavView):
+    """
+    Nav bar
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        # self.search_url = reverse("grace-time-list")
+        default_grace_time = GraceTime.objects.filter(is_default=True).first()
+        if not default_grace_time and self.request.user.has_perm("attendance.add_gracetime"):
+            self.create_attrs = f"""
+                                onclick = "event.stopPropagation();"
+                                data-toggle="oh-modal-toggle"
+                                data-target="#genericModal"
+                                hx-target="#genericModalBody"
+                                hx-get="{reverse('grace-time-create')}?default=True"
+                                """
+
+    nav_title = _("Default Grace Time")
+    filter_instance = GraceTimeFilter()
+    search_swap_target = "#listContainer"
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(
+    permission_required(perm="attendance.view_attendancevalidationcondition"),
+    name="dispatch",
+)
+class GraceTimeNav(HorillaNavView):
+    """
+    Nav bar
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+       
+        # self.search_url = reverse("grace-time-list")
+        self.create_attrs = f"""
+                            onclick = "event.stopPropagation();"
+                            data-toggle="oh-modal-toggle"
+                            data-target="#genericModal"
+                            hx-target="#genericModalBody"
+                            hx-get="{reverse('grace-time-create')}?default=False"
+                            """
+
+    nav_title = _("Grace Time")
+    filter_instance = GraceTimeFilter()
+    search_swap_target = "#listContainer"
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(permission_required(perm="attendance.add_gracetime"), name="dispatch")
+class GraceTimeFormView(HorillaFormView):
+    """
+    Create and edit form
+    """
+
+    model = GraceTime
+    form_class = GraceTimeForm
+    new_display_title = _("Create grace time")
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        is_default = eval(self.request.GET.get("default"))
+        self.form.fields["is_default"].initial = is_default
+        if self.form.instance.pk:
+            self.form.fields["shifts"].initial=self.form.instance.employee_shift.all()
+            self.form_class.verbose_name = _("Update grace time")
+        return context
+
+    def form_valid(self, form: GraceTimeForm) -> HttpResponse:
+        if form.is_valid():
+            gracetime = form.save()
+            if form.instance.pk:
+                gracetime.employee_shift.clear()
+                message = _("Grace time updated successfully.")
+                messages.success(self.request, message)
+            else:
+                
+                message = _("Grace time created successfully.")
+                messages.success(self.request, message)
+            shifts = form.cleaned_data.get('shifts')
+            for shift in shifts:
+                shift.grace_time_id = gracetime
+                shift.save()
+            # form.save()
+            defaultValue = self.request.GET.get("default")
+            if defaultValue == "False":
+                return HttpResponse("<script>$('#genericModal').removeClass('oh-modal--show');$('#gracetime-containerReload').click();</script>")
+            return HttpResponse("<script>$('#genericModal').removeClass('oh-modal--show');$('#default-containerReload').click();$('.defaultGraceNav').click();</script>")
+        return super().form_valid(form)
+    
+
+
+EmployeeShiftListView.columns.append((_("Grace Time"), "get_grace_time"))
+EmployeeShiftListView.sortby_mapping.append(("Grace Time", "grace_time_id"))
+EmployeeShiftListView.bulk_update_fields.append("grace_time_id")
+
diff --git a/attendance/cbv/hour_account.py b/attendance/cbv/hour_account.py
new file mode 100644
index 000000000..e644d0bc9
--- /dev/null
+++ b/attendance/cbv/hour_account.py
@@ -0,0 +1,261 @@
+"""
+Hour account page
+"""
+
+from typing import Any
+from django.contrib import messages
+from django.http import HttpResponse
+from django.shortcuts import render
+from django.urls import reverse, reverse_lazy
+from django.utils.decorators import method_decorator
+from django.utils.translation import gettext_lazy as _
+from attendance.filters import AttendanceOverTimeFilter
+from attendance.forms import AttendanceOverTimeExportForm, AttendanceOverTimeForm
+from attendance.models import AttendanceOverTime
+from base.decorators import manager_can_enter
+from base.methods import choosesubordinates, filtersubordinates, is_reportingmanager
+from horilla_views.cbv_methods import login_required
+from horilla_views.generic.cbv.views import (
+    HorillaDetailedView,
+    HorillaFormView,
+    HorillaListView,
+    HorillaNavView,
+    TemplateView,
+)
+
+
+@method_decorator(login_required, name="dispatch")
+class HourAccount(TemplateView):
+    """
+    Hour Account
+    """
+
+    template_name = "cbv/hour_account/hour_account.html"
+
+@method_decorator(login_required, name="dispatch")
+class HourAccountList(HorillaListView):
+    """
+    List view
+    """
+
+    model = AttendanceOverTime
+    filter_class = AttendanceOverTimeFilter
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("attendance-ot-search")
+        self.view_id = "ot-table"
+
+        if self.request.user.has_perm(
+            "attendance.add_attendanceovertime"
+        ):
+            self.action_method = "hour_actions"
+
+    def get_queryset(self):
+        queryset = super().get_queryset()
+        data = queryset
+        queryset = queryset.filter(employee_id__employee_user_id=self.request.user)
+        accounts = filtersubordinates(
+            self.request, data, "attendance.view_attendanceovertime"
+        )
+        return queryset | accounts
+
+    columns = [
+        (_("Employee"), "employee_id", "employee_id__get_avatar"),
+        (_("Month"), "get_month_capitalized"),
+        (_("Year"), "year"),
+        (_("Worked Hours"), "worked_hours"),
+        (_("Hours to Validate"), "not_validated_hrs"),
+        (_("Pending Hours"), "pending_hours"),
+        (_("Overtime Hours"), "overtime"),
+        (_("Not Approved OT Hours"), "not_approved_ot_hrs"),
+    ]
+
+    header_attrs = {
+        "employee_id" : """
+                      style='width:200px !important'
+                      """,
+        "not_approved_ot_hrs" : """
+                      style='width:180px !important'
+                      """,
+        "action" : """
+                   style="width:160px !important" 
+                   """
+    }
+
+    row_attrs = """
+                hx-get='{hour_account_detail}?instance_ids={ordered_ids}'
+                hx-target="#genericModalBody"
+                data-target="#genericModal"
+                data-toggle="oh-modal-toggle"
+                """
+    sortby_mapping = [
+        ("Employee", "employee_id__get_full_name", "employee_id__get_avatar"),
+        ("Month", "get_month_capitalized"),
+        ("Year", "year"),
+        ("Worked Hours", "worked_hours"),
+        ("Overtime Hours", "overtime"),
+    ]
+    records_per_page = 20
+
+@method_decorator(login_required, name="dispatch")
+class HourAccountNav(HorillaNavView):
+    """
+    Nav bar
+    """
+
+    template_name = "cbv/hour_account/nav_hour_account.html"
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("attendance-ot-search")
+        if not self.request.user.has_perm(
+            "attendance.add_attendanceovertime"
+        ) and not is_reportingmanager(self.request):
+            self.create_attrs = None
+        else:
+            self.create_attrs = f"""
+                data-toggle="oh-modal-toggle"
+                data-target="#genericModal"
+                hx-target="#genericModalBody"
+                hx-get="{reverse_lazy('attendance-overtime-create')}"
+            """
+        actions = [
+            {
+                "action": _("Export"),
+                "attrs": f"""
+                data-toggle="oh-modal-toggle"
+                data-target="#hourAccountExport"
+                hx-get="{reverse('hour-account-export')}"
+                hx-target="#hourAccountExportModalBody"
+                style="cursor: pointer;"
+                """,
+            }
+        ]
+
+        if self.request.user.has_perm("attendance.add_attendanceovertime"):
+            actions.append(
+                {
+                    "action": _("Delete"),
+                    "attrs": """
+                    onclick="
+                    hourAccountbulkDelete();
+                    "
+                    data-action = "delete"
+                    style="cursor: pointer; color:red !important"
+                    """,
+                },
+            )
+
+        if not self.request.user.has_perm(
+            "attendance.add_attendanceovertime"
+        ) and not is_reportingmanager(self.request):
+            actions = None
+
+        self.actions = actions
+
+    nav_title = _("Hour Account")
+    filter_instance = AttendanceOverTimeFilter()
+    filter_body_template = "cbv/hour_account/hour_filter.html"
+    filter_form_context_name = "form"
+    search_swap_target = "#listContainer"
+
+    group_by_fields = [
+        ("employee_id", _("Employee")),
+        ("month", _("Month")),
+        ("year", _("Year")),
+        ("employee_id__country", _("Country")),
+        ("employee_id__employee_work_info__reporting_manager_id", _("Reporting Manager")),
+        ("employee_id__employee_work_info__shift_id", _("Shift")),
+        ("employee_id__employee_work_info__work_type_id", _("Work Type")),
+        ("employee_id__employee_work_info__department_id", _("Department")),
+        ("employee_id__employee_work_info__job_position_id", _("Job Position")),
+        ("employee_id__employee_work_info__employee_type_id", _("Employment Type")),
+        ("employee_id__employee_work_info__company_id", _("Company")),
+    ]
+
+@method_decorator(login_required, name="dispatch")
+class HourExportView(TemplateView):
+    """
+    For candidate export
+    """
+
+    template_name = "cbv/hour_account/hour_export.html"
+
+    def get_context_data(self, **kwargs: Any):
+        context = super().get_context_data(**kwargs)
+        attendances = AttendanceOverTime.objects.all()
+        export_fields = AttendanceOverTimeExportForm
+        export_obj = AttendanceOverTimeFilter(queryset=attendances)
+        context["export_fields"] = export_fields
+        context["export_obj"] = export_obj
+        return context
+
+@method_decorator(login_required, name="dispatch")
+class HourAccountDetailView(HorillaDetailedView):
+    """
+    Detail View
+    """
+
+    model = AttendanceOverTime
+    title = _("Details")
+
+    header = {
+        "title": "employee_id__get_full_name",
+        "subtitle": "hour_account_subtitle",
+        "avatar": "employee_id__get_avatar",
+    }
+
+    body = [
+        (_("Month"), "get_month_capitalized"),
+        (_("Year"), "year"),
+        (_("Worked Hours"), "worked_hours"),
+        (_("Pending Hours"), "pending_hours"),
+        (_("Over time"), "overtime"),
+    ]
+
+    action_method = "hour_detail_actions"
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(manager_can_enter("attendance.add_attendanceovertime"),name='dispatch')
+class HourAccountFormView(HorillaFormView):
+    """
+    Form View
+    """
+
+    model = AttendanceOverTime
+    form_class = AttendanceOverTimeForm
+    # template_name = "cbv/recruitment/forms/create_form.html"
+    new_display_title = _("Hour Account")
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        self.form_class(initial={"employee_id": self.request.user.employee_get})
+        if self.form.instance.pk:
+            self.form_class.verbose_name = _("Hour account update")
+            self.form_class(instance=self.form.instance)
+        self.form = choosesubordinates(
+            self.request, self.form, "attendance.add_attendanceovertime"
+        )
+        context["form"] = self.form
+        return context
+
+    def form_invalid(self, form: Any) -> HttpResponse:
+        # form = self.form_class(self.request.POST)
+        if not form.is_valid():
+            errors = form.errors.as_data()
+            return render(
+                self.request, self.template_name, {"form": form, "errors": errors}
+            )
+        return super().form_invalid(form)
+
+    def form_valid(self, form: AttendanceOverTimeForm) -> HttpResponse:
+        if form.is_valid():
+            if form.instance.pk:
+                message = _("Attendance account updated")
+            else:
+                message = _("Attendance account added")
+            form.save()
+            messages.success(self.request, _(message))
+            return self.HttpResponse()
+        return super().form_valid(form)
diff --git a/attendance/cbv/late_come_and_early_out.py b/attendance/cbv/late_come_and_early_out.py
new file mode 100644
index 000000000..eff1fb870
--- /dev/null
+++ b/attendance/cbv/late_come_and_early_out.py
@@ -0,0 +1,236 @@
+"""
+Late come and early out page
+"""
+from typing import Any
+from django.urls import reverse
+from django.utils.translation import gettext_lazy as _
+from django.utils.decorators import method_decorator
+from attendance.filters import LateComeEarlyOutFilter
+from attendance.forms import LateComeEarlyOutExportForm
+from attendance.models import AttendanceLateComeEarlyOut
+from base.filters import PenaltyFilter
+from base.methods import filtersubordinates, is_reportingmanager
+from base.models import PenaltyAccounts
+from horilla_views.cbv_methods import login_required
+from horilla_views.generic.cbv.views import (
+    HorillaListView,
+    HorillaNavView,
+    TemplateView,
+    HorillaDetailedView,
+)
+
+@method_decorator(login_required, name="dispatch")
+class LateComeAndEarlyOut(TemplateView):
+    """
+    Late come and early out
+    """
+
+    template_name = "cbv/late_come_and_early_out/late_come_and_early_out.html"
+
+@method_decorator(login_required, name="dispatch")
+class LateComeAndEarlyOutList(HorillaListView):
+    """
+    List view
+    """
+
+    filter_keys_to_remove = [
+        "late_early_id"
+    ]
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("late-come-early-out-search")
+        self.view_id = "late-container"
+        if (
+            not self.request.user.has_perm("attendance.chanage_penaltyaccount")
+            and not is_reportingmanager(self.request)
+            and not self.request.user.has_perm(
+                "perms.attendance.delete_attendancelatecomeearlyout"
+            )
+        ):
+            self.action_method = None
+        else:
+            self.action_method = "actions_column"
+
+    def get_queryset(self):
+        queryset = super().get_queryset()
+        reports = queryset
+        self_reports = queryset.filter(employee_id__employee_user_id=self.request.user)
+        reports = filtersubordinates(
+            self.request, reports, "attendance.view_attendancelatecomeearlyout"
+        )
+        queryset = self_reports | reports
+        return queryset
+
+    row_attrs = """
+                hx-get='{late_come_detail}?instance_ids={ordered_ids}'
+                hx-target="#genericModalBody"
+                data-target="#genericModal"
+                data-toggle="oh-modal-toggle"
+                """
+
+    model = AttendanceLateComeEarlyOut
+    filter_class = LateComeEarlyOutFilter
+    columns = [
+        (_("Employee"), "employee_id", "employee_id__get_avatar"),
+        (_("Type"), "get_type"),
+        (_("Attendance Date"), "attendance_id__attendance_date"),
+        (_("Check-In"), "attendance_id__attendance_clock_in"),
+        (_("In Date"), "attendance_id__attendance_clock_in_date"),
+        (_("Check-Out"), "attendance_id__attendance_clock_out"),
+        (_("Out Date"), "attendance_id__attendance_clock_out_date"),
+        (_("Min Hour"), "attendance_id__minimum_hour"),
+        (_("At Work"), "attendance_id__attendance_worked_hour"),
+        (_("Penalities"), "penalities_column"),
+    ]
+
+    header_attrs = {
+        "penalities_column" :"""
+                             style ="width:170px !important"
+                             """
+    }
+
+    sortby_mapping = [
+        ("Employee", "employee_id__get_full_name", "employee_id__get_avatar"),
+        ("Type", "get_type"),
+        ("Attendance Date", "attendance_id__attendance_date"),
+        ("Check-In", "attendance_id__attendance_clock_in"),
+        ("In Date", "attendance_id__attendance_clock_in_date"),
+        ("Check-Out", "attendance_id__attendance_clock_out"),
+        ("Out Date", "attendance_id__attendance_clock_out_date"),
+        ("At Work", "attendance_id__attendance_worked_hour"),
+        ("Min Hour", "attendance_id__minimum_hour"),
+
+    ]
+
+@method_decorator(login_required, name="dispatch")
+class LateComeAndEarlyOutListNav(HorillaNavView):
+    """
+    Nav bar
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("late-come-early-out-search")
+        actions = [
+            {
+                "action": _("Export"),
+                "attrs": f"""
+                data-toggle="oh-modal-toggle"
+                data-target="#attendanceExport"
+                hx-get="{reverse('late-come-and-early-out-export')}"
+                hx-target="#attendanceExportForm"
+                style="cursor: pointer;"
+                """,
+            }
+        ]
+
+        if self.request.user.has_perm(
+            "attendance.chanage_penaltyaccount"
+        ) or self.request.user.has_perm(
+            "perms.attendance.delete_attendancelatecomeearlyout"
+        ):
+            actions.append(
+                {
+                    "action": _("Delete"),
+                    "attrs": """
+                    onclick="
+                    lateComeBulkDelete();
+                    "
+                    data-action = "delete"
+                    style="cursor: pointer; color:red !important"
+                    """,
+                },
+            )
+
+        if (
+            not self.request.user.has_perm("attendance.chanage_penaltyaccount")
+            and not is_reportingmanager(self.request)
+            and not self.request.user.has_perm(
+                "perms.attendance.delete_attendancelatecomeearlyout"
+            )
+        ):
+            actions = None
+
+        self.actions = actions
+
+    nav_title = _("Late Come/Early Out ")
+    filter_instance = LateComeEarlyOutFilter()
+    filter_body_template = "cbv/late_come_and_early_out/late_early_filter.html"
+    filter_form_context_name = "form"
+    search_swap_target = "#listContainer"
+
+    group_by_fields = [
+        ("employee_id", _("Employee")),
+        ("type", _("Type")),
+        ("attendance_id__attendance_date", _("Attendance Date")),
+        ("attendance_id__shift_id", _("Shift")),
+        ("attendance_id__work_type_id", _("Work Type")),
+        ("attendance_id__minimum_hour", _("Minimum Hour")),
+        ("attendance_id__employee_id__country", _("Country")),
+        (
+            "attendance_id__employee_id__employee_work_info__reporting_manager_id",
+            _("Reporting Manager"),
+        ),
+        ("attendance_id__employee_id__employee_work_info__department_id", _("Department")),
+        (
+            "attendance_id__employee_id__employee_work_info__job_position_id",
+            _("Job Position"),
+        ),
+        (
+            "attendance_id__employee_id__employee_work_info__employee_type_id",
+            _("Employment Type"),
+        ),
+        ("attendance_id__employee_id__employee_work_info__company_id", _("Company")),
+    ]
+
+
+@method_decorator(login_required, name="dispatch")
+class LateEarlyExportView(TemplateView):
+    """
+    For  export records
+    """
+
+    template_name = "cbv/late_come_and_early_out/late_early_export.html"
+
+    def get_context_data(self, **kwargs: Any):
+        context = super().get_context_data(**kwargs)
+        data = AttendanceLateComeEarlyOut.objects.all()
+        export_form = LateComeEarlyOutExportForm
+        export = LateComeEarlyOutFilter(queryset=data)
+        context["export_form"] = export_form
+        context["export"] = export
+        return context
+
+@method_decorator(login_required, name="dispatch")
+class LateComeEarlyOutDetailView(HorillaDetailedView):
+    """
+    Detail View
+    """
+
+    model = AttendanceLateComeEarlyOut
+    title = _("Details")
+
+    header = {
+        "title": "employee_id__get_full_name",
+        "subtitle": "late_come_subtitle",
+        "avatar": "employee_id__get_avatar",
+    }
+
+    body = [
+        (_("Type"), "get_type"),
+        (_("Attendance Date"), "attendance_id__attendance_date"),
+        (_("Check-In"), "attendance_id__attendance_clock_in"),
+        (_("Chen-in Date"), "attendance_id__attendance_clock_in_date"),
+        (_("Check-Out"), "attendance_id__attendance_clock_out"),
+        (_("Check-out Date"), "attendance_id__attendance_clock_out_date"),
+        (_("Min Hour"), "attendance_id__minimum_hour"),
+        (_("At Work"), "attendance_id__attendance_worked_hour"),
+        (_("Shift"), "attendance_id__shift_id"),
+        (_("Work Type"), "attendance_id__work_type_id"),
+        (_("Attendance Validated"), "attendance_validated_check"),
+        (_("Penalities"), "penalities_column"),
+    ]
+
+    action_method = "detail_actions"
+
diff --git a/attendance/cbv/my_attendances.py b/attendance/cbv/my_attendances.py
new file mode 100644
index 000000000..f699fd768
--- /dev/null
+++ b/attendance/cbv/my_attendances.py
@@ -0,0 +1,202 @@
+"""
+My attendances
+"""
+
+from typing import Any
+
+from django.urls import reverse
+from django.utils.translation import gettext_lazy as _
+from django.utils.decorators import method_decorator
+from attendance.filters import AttendanceFilters
+from attendance.models import Attendance
+from horilla_views.cbv_methods import login_required
+from horilla_views.generic.cbv.views import (
+    HorillaListView,
+    HorillaNavView,
+    TemplateView,
+    HorillaDetailedView,
+)
+
+
+@method_decorator(login_required, name="dispatch")
+class MyAttendances(TemplateView):
+    """
+    My attendances
+    """
+
+    template_name = "cbv/my_attendances/my_attendances.html"
+
+class MyAttendancesListView(HorillaListView):
+
+    
+
+    model = Attendance
+    filter_class = AttendanceFilters
+    columns = [
+        (_("Employee"), "employee_id", "employee_id__get_avatar"),
+        (_("Date"), "attendance_date"),
+        (_("Day"), "attendance_day"),
+        (_("Check-In"), "attendance_clock_in"),
+        (_("In Date"), "attendance_clock_in_date"),
+        (_("Check-Out"), "attendance_clock_out"),
+        (_("Out Date"), "attendance_clock_out_date"),
+        (_("Shift"), "shift_id"),
+        (_("Work Type"), "work_type_id"),
+        (_("Min Hour"), "minimum_hour"),
+        (_("At Work"), "attendance_worked_hour"),
+        (_("Pending Hour"), "hours_pending"),
+        (_("Overtime"), "attendance_overtime"),
+    ]
+
+    row_attrs = """
+                hx-get='{my_attendance_detail}?instance_ids={ordered_ids}'
+                hx-target="#genericModalBody"
+                data-target="#genericModal"
+                data-toggle="oh-modal-toggle"
+                """
+    records_per_page = 20
+
+    sortby_mapping = [
+        ("Employee", "employee_id__get_full_name", "employee_id__get_avatar"),
+        ("Date", "attendance_date"),
+        ("Day", "attendance_day__day"),
+        ("Check-In", "attendance_clock_in"),
+        ("Shift", "shift_id__employee_shift"),
+        ("Work Type", "work_type_id__work_type"),
+        ("Min Hour", "minimum_hour"),
+        ("Pending Hour", "hours_pending"),
+        ("In Date", "attendance_clock_in_date"),
+        ("Check-Out", "attendance_clock_out"),
+        ("Out Date", "attendance_clock_out_date"),
+        ("At Work", "attendance_worked_hour"),
+        ("Overtime", "attendance_overtime"),
+    ]
+
+
+
+@method_decorator(login_required, name="dispatch")
+class MyAttendanceList(MyAttendancesListView):
+    """
+    List view
+    """
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("my-attendance-list")
+
+    row_status_indications = [
+        (
+            "approved-request--dot",
+            _("Approved Request"),
+            """
+            onclick="
+                $('#applyFilter').closest('form').find('[name=is_validate_request_approved]').val('true');
+                $('[name=attendance_validated]').val('unknown').change();
+                $('[name=is_validate_request]').val('unknown').change();
+                $('#applyFilter').click();
+                
+            "
+            """,
+        ),
+        (
+            "requested--dot",
+            _("Requested"),
+            """
+            onclick="
+                $('#applyFilter').closest('form').find('[name=is_validate_request]').val('true');
+                $('[name=attendance_validated]').val('unknown').change();
+                $('[name=is_validate_request_approved]').val('unknown').change();
+                $('#applyFilter').click();
+                
+            "
+            """,
+        ),
+        (
+            "not-validated--dot",
+            _("Not Validated"),
+            """
+            onclick="
+                $('#applyFilter').closest('form').find('[name=attendance_validated]').val('false');
+                $('[name=is_validate_request]').val('unknown').change();
+                $('[name=is_validate_request_approved]').val('unknown').change();
+                $('#applyFilter').click();
+            "
+            """,
+        ),
+        (
+            "validated--dot",
+            _("Validated"),
+            """
+            onclick="
+                $('#applyFilter').closest('form').find('[name=attendance_validated]').val('true');
+                $('[name=is_validate_request]').val('unknown').change();
+                $('[name=is_validate_request_approved]').val('unknown').change();
+                $('#applyFilter').click();
+                
+            "
+            """,
+        ),
+    ]
+
+    row_status_class = "validated-{attendance_validated}  requested-{is_validate_request} approved-request-{is_validate_request_approved}"
+
+    def get_queryset(self):
+        queryset = super().get_queryset()
+        employee = self.request.user.employee_get
+        queryset = queryset.filter(employee_id=employee)
+        return queryset
+
+    
+
+
+
+@method_decorator(login_required, name="dispatch")
+class MyAttendancestNav(HorillaNavView):
+    """
+    Nav bar
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("my-attendance-list")
+        self.search_in = [
+            ("shift_id__employee_shift", "Shift"),
+            ("work_type_id__work_type", "Work Type"),
+        ]
+
+    nav_title = _("My Attendances")
+    filter_body_template = "cbv/my_attendances/my_attendance_filter.html"
+    filter_instance = AttendanceFilters()
+    filter_form_context_name = "form"
+    search_swap_target = "#listContainer"
+
+
+@method_decorator(login_required, name="dispatch")
+class MyAttendancesDetailView(HorillaDetailedView):
+    """
+    Detail View
+    """
+
+    model = Attendance
+
+    title = _("Details")
+
+    header = {
+        "title": "employee_id__get_full_name",
+        "subtitle": "my_attendance_subtitle",
+        "avatar": "employee_id__get_avatar",
+    }
+
+    body = [
+        (_("Date"), "attendance_date"),
+        (_("Day"), "attendance_day"),
+        (_("Check-In"), "attendance_clock_in"),
+        (_("Check-in Date"), "attendance_clock_in_date"),
+        (_("Check-Out"), "attendance_clock_out"),
+        (_("Check-out Date"), "attendance_clock_out_date"),
+        (_("Shift"), "shift_id"),
+        (_("Work Type"), "work_type_id"),
+        (_("Min Hour"), "minimum_hour"),
+        (_("At Work"), "attendance_worked_hour"),
+        (_("Pending Hour"), "hours_pending"),
+        (_("Overtime"), "attendance_overtime"),
+    ]
diff --git a/attendance/filters.py b/attendance/filters.py
index f8d928f34..416e9ffed 100644
--- a/attendance/filters.py
+++ b/attendance/filters.py
@@ -16,14 +16,17 @@ from django.utils.translation import gettext_lazy as _
 from attendance.models import (
     Attendance,
     AttendanceActivity,
+    AttendanceGeneralSetting,
     AttendanceLateComeEarlyOut,
     AttendanceOverTime,
+    AttendanceValidationCondition,
+    GraceTime,
     strtime_seconds,
 )
 from base.filters import FilterSet
 from employee.filters import EmployeeFilter
 from employee.models import Employee
-from horilla.filters import filter_by_name
+from horilla.filters import HorillaFilterSet, filter_by_name
 
 
 class DurationInSecondsFilter(django_filters.CharFilter):
@@ -50,7 +53,7 @@ class DurationInSecondsFilter(django_filters.CharFilter):
         return qs
 
 
-class AttendanceOverTimeFilter(FilterSet):
+class AttendanceOverTimeFilter(HorillaFilterSet):
     """
     Filter set class for AttendanceOverTime model
 
@@ -126,7 +129,7 @@ class AttendanceOverTimeFilter(FilterSet):
             self.form.fields[field].widget.attrs["id"] = f"{uuid.uuid4()}"
 
 
-class LateComeEarlyOutFilter(FilterSet):
+class LateComeEarlyOutFilter(HorillaFilterSet):
     """
     LateComeEarlyOutFilter class
     """
@@ -246,7 +249,7 @@ class LateComeEarlyOutFilter(FilterSet):
             self.form.fields[field].widget.attrs["id"] = f"{uuid.uuid4()}"
 
 
-class AttendanceActivityFilter(FilterSet):
+class AttendanceActivityFilter(HorillaFilterSet):
     """
     Filter set class for AttendanceActivity model
 
@@ -329,7 +332,7 @@ class AttendanceActivityFilter(FilterSet):
             self.form.fields[field].widget.attrs["id"] = f"{uuid.uuid4()}"
 
 
-class AttendanceFilters(FilterSet):
+class AttendanceFilters(HorillaFilterSet):
     """
     Filter set class for Attendance model
 
@@ -339,6 +342,8 @@ class AttendanceFilters(FilterSet):
 
     id = django_filters.NumberFilter(field_name="id")
     search = django_filters.CharFilter(method="filter_by_name")
+    search_field = django_filters.CharFilter(method="search_in")
+
     employee = django_filters.CharFilter(field_name="employee_id__id")
     date_attendance = django_filters.DateFilter(field_name="attendance_date")
     employee_id = django_filters.ModelMultipleChoiceFilter(
@@ -489,6 +494,9 @@ class AttendanceFilters(FilterSet):
             self.form.fields[field].widget.attrs["id"] = f"{uuid.uuid4()}"
 
     def filter_by_name(self, queryset, name, value):
+
+        if self.data.get("search_field"):
+            return queryset
         # Call the imported function
         """
         This method allows filtering by the employee's first and/or last name or by other
@@ -651,6 +659,54 @@ class AttendanceRequestReGroup:
     ]
 
 
+class AttendanceBreakpointFilter(FilterSet):
+    """
+    filter class for attendance breakpoint condition model
+    """
+
+    search = django_filters.CharFilter(field_name="company_id", lookup_expr="icontains")
+
+    class Meta:
+        model = AttendanceValidationCondition
+        fields = [
+            "validation_at_work",
+            "minimum_overtime_to_approve",
+            "overtime_cutoff",
+            "company_id",
+        ]
+
+
+class GraceTimeFilter(HorillaFilterSet):
+
+    search = django_filters.CharFilter(method="search_method")
+
+    class Meta:
+        model = GraceTime
+        fields = ["company_id"]
+
+    def search_method(self, queryset, _, value):
+        """
+        This method is used to mail server
+        """
+
+        return ((queryset.filter(company_id__company__icontains=value))).distinct()
+
+
+class AttendanceGeneralSettingFilter(HorillaFilterSet):
+
+    search = django_filters.CharFilter(method="search_method")
+
+    class Meta:
+        model = AttendanceGeneralSetting
+        fields = ["company_id"]
+
+    def search_method(self, queryset, _, value):
+        """
+        This method is used to mail server
+        """
+        return ((queryset.filter(company_id__company__icontains=value))).distinct()
+
+
 def get_working_today(queryset, _name, value):
     today = datetime.datetime.now().date()
     yesterday = today - datetime.timedelta(days=1)
diff --git a/attendance/forms.py b/attendance/forms.py
index 3b5c69362..edf124a71 100644
--- a/attendance/forms.py
+++ b/attendance/forms.py
@@ -37,6 +37,7 @@ from django.db.models.query import QuerySet
 from django.forms import DateTimeInput
 from django.template.loader import render_to_string
 from django.utils.html import format_html
+from django.utils.text import capfirst
 from django.utils.translation import gettext_lazy as _
 
 from attendance.filters import AttendanceFilters
@@ -55,6 +56,7 @@ from attendance.models import (
     validate_time_format,
 )
 from base.forms import ModelForm as BaseModelForm
+from base.forms import MultipleFileField
 from base.methods import (
     filtersubordinatesemployeemodel,
     get_working_days,
@@ -151,7 +153,8 @@ class AttendanceUpdateForm(BaseModelForm):
             {
                 "id": str(uuid.uuid4()),
                 "hx-include": "#attendanceUpdateForm",
-                "hx-target": "#attendanceUpdateForm",
+                "hx-target": "#attendanceUpdateFormFields,#personal",
+                "hx-trigger": "change",
                 "hx-get": "/attendance/update-fields-based-shift",
             }
         )
@@ -302,7 +305,8 @@ class AttendanceForm(BaseModelForm):
             {
                 "id": str(uuid.uuid4()),
                 "hx-include": "#attendanceCreateForm",
-                "hx-target": "#attendanceCreateForm",
+                "hx-target": "#attendanceFormFields,#personal",
+                "hx-trigger": "change",
                 "hx-get": "/attendance/update-fields-based-shift",
             }
         )
@@ -509,6 +513,13 @@ class AttendanceValidationConditionForm(forms.ModelForm):
     Model form for AttendanceValidationCondition
     """
 
+    cols = {
+        "validation_at_work": 12,
+        "minimum_overtime_to_approve": 12,
+        "overtime_cutoff": 12,
+        "company_id": 12,
+    }
+
     validation_at_work = forms.CharField(
         required=True,
         initial="00:00",
@@ -560,6 +571,8 @@ class AttendanceRequestForm(BaseModelForm):
     AttendanceRequestForm
     """
 
+    cols = {"request_description": 12}
+
     def update_worked_hour_hx_fields(self, field_name):
         """Update the widget attributes for worked hour fields."""
         self.fields[field_name].widget.attrs.update(
@@ -576,7 +589,7 @@ class AttendanceRequestForm(BaseModelForm):
 
     def __init__(self, *args, **kwargs):
         if instance := kwargs.get("instance"):
-            # django forms not showing value inside the date, time html element.
+            # django forms not showing vaupdate-fields-based-shiftlue inside the date, time html element.
             # so here overriding default forms instance method to set initial value
             initial = {
                 "attendance_date": instance.attendance_date.strftime("%Y-%m-%d"),
@@ -596,15 +609,16 @@ class AttendanceRequestForm(BaseModelForm):
         super().__init__(*args, **kwargs)
         self.fields["attendance_clock_out_date"].required = False
         self.fields["attendance_clock_out"].required = False
-        self.fields["shift_id"].widget.attrs.update(
-            {
-                "id": str(uuid.uuid4()),
-                "hx-include": "#attendanceRequestForm",
-                "hx-target": "#attendanceRequestDiv",
-                "hx-swap": "outerHTML",
-                "hx-get": "/attendance/update-fields-based-shift",
-            }
-        )
+        if not self.instance.pk:
+            self.fields["shift_id"].widget.attrs.update(
+                {
+                    "id": str(uuid.uuid4()),
+                    "hx-include": "#attendanceRequestForm",
+                    "hx-target": "#attendanceRequest",
+                    "hx-swap": "innerHTML",
+                    "hx-get": "/attendance/update-fields-based-shift",
+                }
+            )
         for field in [
             "attendance_clock_in_date",
             "attendance_clock_in",
@@ -679,7 +693,8 @@ class NewRequestForm(AttendanceRequestForm):
                 widget=forms.Select(
                     attrs={
                         "class": "oh-select oh-select-2 w-100",
-                        "hx-target": "#id_shift_id_div",
+                        "hx-target": "#id_shift_id_parent_div,#id_shift_id_div",
+                        "hx-swap": "innerHTML",
                         "hx-get": "/attendance/get-employee-shift?bulk=False",
                     }
                 ),
@@ -691,15 +706,15 @@ class NewRequestForm(AttendanceRequestForm):
                 widget=forms.CheckboxInput(
                     attrs={
                         "class": "oh-checkbox",
-                        "hx-target": "#objectCreateModalTarget",
-                        "hx-get": "/attendance/request-new-attendance?bulk=True",
+                        "hx-target": "#genericModalBody",
+                        "hx-swap": "innerHTML",
+                        "hx-get": "/attendance/request-bulk-attendance?bulk=True",
                     }
                 ),
             ),
         }
         new_dict.update(old_dict)
         self.fields = new_dict
-
         kwargs["initial"] = view_initial
 
     def as_p(self, *args, **kwargs):
@@ -918,6 +933,8 @@ class GraceTimeForm(BaseModelForm):
     Form for create or update Grace time
     """
 
+    cols = {"allowed_time": 12, "company_id": 12, "shifts": 12}
+
     shifts = forms.ModelMultipleChoiceField(
         queryset=EmployeeShift.objects.all(),
         required=False,
@@ -1036,7 +1053,8 @@ class BulkAttendanceRequestForm(BaseModelForm):
         queryset=Employee.objects.filter(is_active=True),
         widget=forms.Select(
             attrs={
-                "hx-target": "#id_shift_id_div",
+                "hx-target": "#id_shift_id_parent_div",
+                "hx-swap": "innerHTML",
                 "hx-get": "/attendance/get-employee-shift?bulk=True",
             }
         ),
@@ -1049,7 +1067,8 @@ class BulkAttendanceRequestForm(BaseModelForm):
         widget=forms.CheckboxInput(
             attrs={
                 "class": "oh-checkbox",
-                "hx-target": "#objectCreateModalTarget",
+                "hx-target": "#genericModalBody",
+                "hx-swap": "innerHTML",
                 "hx-get": "/attendance/request-new-attendance?bulk=False",
             }
         ),
diff --git a/attendance/methods/utils.py b/attendance/methods/utils.py
index 5c19e2ee2..814d35776 100644
--- a/attendance/methods/utils.py
+++ b/attendance/methods/utils.py
@@ -551,6 +551,14 @@ def parse_time(time_str):
     return None
 
 
+def parse_datetime(date_str, time_str):
+    return (
+        datetime.strptime(f"{date_str} {time_str}", "%Y-%m-%d %H:%M")
+        if date_str and time_str
+        else None
+    )
+
+
 def parse_date(date_str, error_key, activity):
     try:
         return pd.to_datetime(date_str).date()
diff --git a/attendance/models.py b/attendance/models.py
index f16ff0d64..7946cfcca 100644
--- a/attendance/models.py
+++ b/attendance/models.py
@@ -10,10 +10,12 @@ import datetime as dt
 import json
 from datetime import date, datetime, timedelta
 
+import pandas as pd
 from django.apps import apps
 from django.core.exceptions import ValidationError
 from django.db import models
 from django.db.models import Q
+from django.urls import reverse
 from django.utils import timezone
 from django.utils.translation import gettext_lazy as _
 
@@ -31,9 +33,12 @@ from base.horilla_company_manager import HorillaCompanyManager
 from base.methods import is_company_leave, is_holiday
 from base.models import Company, EmployeeShift, EmployeeShiftDay, WorkType
 from employee.models import Employee
+
+# Create your models here.
 from horilla.methods import get_horilla_model_class
 from horilla.models import HorillaModel
 from horilla_audit.models import HorillaAuditInfo, HorillaAuditLog
+from horilla_views.cbv_methods import render_template
 
 # to skip the migration issue with the old migrations
 _validate_time_in_minutes = validate_time_in_minutes
@@ -81,6 +86,70 @@ class AttendanceActivity(HorillaModel):
 
         ordering = ["-attendance_date", "employee_id__employee_first_name", "clock_in"]
 
+    def get_status(self):
+        """
+        Display status
+        """
+
+        DAY = [
+            ("monday", _("Monday")),
+            ("tuesday", _("Tuesday")),
+            ("wednesday", _("Wednesday")),
+            ("thursday", _("Thursday")),
+            ("friday", _("Friday")),
+            ("saturday", _("Saturday")),
+            ("sunday", _("Sunday")),
+        ]
+        return dict(DAY).get(self.shift_day.day)
+
+    def get_delete_attendance(self):
+        """
+        for delete button
+        """
+
+        return render_template(
+            path="cbv/attendance_activity/delete_action.html",
+            context={"instance": self},
+        )
+
+    def attendance_detail_subtitle(self):
+        """
+        Return subtitle containing both department and job position information.
+        """
+        return f"{self.employee_id.employee_work_info.department_id} / {self.employee_id.employee_work_info.job_position_id}"
+
+    def attendance_detail_view(self):
+        """
+        for detail view of page
+        """
+        url = reverse("attendance-activity-single-view", kwargs={"pk": self.pk})
+        return url
+
+    def diff_cell(self):
+        if self.clock_out == None:
+            return 'style="background-color: #FFE4B3"'
+
+    def detail_view_delete_attendance(self):
+        """
+        for delete button
+        """
+
+        return render_template(
+            path="cbv/attendance_activity/detail_delete_action.html",
+            context={"instance": self},
+        )
+
+    def duration_format_time(self, seconds):
+        """
+        This method is used to format seconds to H:M:S and return it
+        args:
+            seconds : seconds
+        """
+        hour = int(seconds // 3600)
+        minutes = int((seconds % 3600) // 60)
+        seconds = int((seconds % 3600) % 60)
+        return f"{hour:02d}:{minutes:02d}:{seconds:02d}"
+
     def duration(self):
         """
         Duration calc b/w in-out method
@@ -97,6 +166,15 @@ class AttendanceActivity(HorillaModel):
 
         return time_difference.total_seconds()
 
+    def duration_format(self):
+        """
+        Function to return the duration time in hh:mm:ss
+        """
+        total_seconds = self.duration()
+        formatted_duration = self.duration_format_time(total_seconds)
+
+        return formatted_duration
+
     def __str__(self):
         return f"{self.employee_id} - {self.attendance_date} - {self.clock_in} - {self.clock_out}"
 
@@ -123,7 +201,7 @@ class Attendance(HorillaModel):
     status = [
         ("create_request", _("Create Request")),
         ("update_request", _("Update Request")),
-        ("revalidate_request", _("Re-validate Request")),
+        ("created_request", _("Created Request")),
     ]
 
     employee_id = models.ForeignKey(
@@ -228,6 +306,49 @@ class Attendance(HorillaModel):
         ],
     )
 
+    def get_instance_id(self):
+        return self.id
+
+    def diff_cell(self):
+        if self.request_type == "created_request":
+            return 'style="background-color: #FFE4B3"'
+
+    def status_col(self):
+        """
+        This method for get custome coloumn for rating.
+        """
+
+        return render_template(
+            path="cbv/attendance_request/status.html",
+            context={"instance": self},
+        )
+
+    def my_attendance_subtitle(self):
+        """
+        Detail view subtitle
+        """
+
+        return f"""{self.employee_id.employee_work_info.department_id } /
+          { self.employee_id.employee_work_info.job_position_id}"""
+
+    def my_attendance_detail(self):
+        """
+        detail view
+        """
+
+        url = reverse("my-attendance-detail", kwargs={"pk": self.pk})
+
+        return url
+
+    def attendance_detail_view(self):
+        """
+        detail view
+        """
+
+        url = reverse("attendances-tab-detail-view", kwargs={"pk": self.pk})
+
+        return url
+
     class Meta:
         """
         Meta class to add some additional options
@@ -276,6 +397,162 @@ class Attendance(HorillaModel):
         )
         return {"query": activities, "count": activities.count()}
 
+    def attendance_actions(self):
+        """
+        method for rendering actions(edit,delete)
+        """
+
+        return render_template(
+            path="cbv/attendances/attendance_actions.html",
+            context={"instance": self},
+        )
+
+    def comment_col(self):
+        """
+        This method for get custom coloumn for comment.
+        """
+
+        return render_template(
+            path="cbv/attendance_request/comment.html",
+            context={"instance": self},
+        )
+
+    def attendance_detail_activity_col(self):
+        """
+        this method is used to return attendance detail view activity custom col
+        """
+
+        return render_template(
+            path="cbv/attendances/detail_view_activity_col.html",
+            context={"instance": self},
+        )
+
+    def request_actions(self):
+        """
+        This method for get custom coloumn for comment.
+        """
+
+        return render_template(
+            path="cbv/attendance_request/request_actions.html",
+            context={"instance": self},
+        )
+
+    def validate_detail_view(self):
+        """
+        detail view of validate tab
+        """
+        url = reverse("validate-detail-view", kwargs={"pk": self.pk})
+        return url
+
+    def individual_validate_detail_view(self):
+        """
+        detail view of validate tab
+        """
+        url = reverse("individual-validate-detail-view", kwargs={"pk": self.pk})
+        return url
+
+    def ot_detail_view(self):
+        """
+        detail view of OT tab
+        """
+        url = reverse("ot-detail-view", kwargs={"pk": self.pk})
+        return url
+
+    def validated_detail_view(self):
+        """
+        detail view of validated tab
+        """
+        url = reverse("validated-detail-view", kwargs={"pk": self.pk})
+        return url
+
+    def detail_view(self):
+        """
+        deteil view of requested attendances
+        """
+        url = reverse("validate-attendance-request", kwargs={"attendance_id": self.pk})
+        return url
+
+    def change_attendance(self):
+        """
+        Edit url
+        """
+        url = reverse("update-attendance-request", kwargs={"pk": self.pk})
+        return url
+
+    def ot_approve(self):
+        """
+        method for rendering approve OT
+        """
+        minot = strtime_seconds("00:30")
+        condition = AttendanceValidationCondition.objects.first()
+        if condition is not None:
+            minot = strtime_seconds(condition.minimum_overtime_to_approve)
+
+        return render_template(
+            path="cbv/attendances/ot_confirmation.html",
+            context={"instance": self, "minot": minot},
+        )
+
+    def validate_detail_actions(self):
+        """
+        detail view actions of validate tab
+        """
+
+        return render_template(
+            path="cbv/attendances/validate_tab_action.html",
+            context={"instance": self},
+        )
+
+    def ot_detail_actions(self):
+        """
+        detail view actions of OT tab
+        """
+
+        minot = strtime_seconds("00:30")
+        condition = AttendanceValidationCondition.objects.first()
+        if condition is not None:
+            minot = strtime_seconds(condition.minimum_overtime_to_approve)
+
+        return render_template(
+            path="cbv/attendances/ot_tab_action.html",
+            context={"instance": self, "minot": minot},
+        )
+
+    def validated_detail_actions(self):
+        """
+        detail view actions of validated tab
+        """
+
+        return render_template(
+            path="cbv/attendances/validated_tab_action.html",
+            context={"instance": self},
+        )
+
+    def validate_button(self):
+        """
+        detail view actions of validated tab
+        """
+
+        return render_template(
+            path="cbv/attendances/validate_button.html",
+            context={"instance": self},
+        )
+
+    def attendances_detail_subtitle(self):
+        """
+        Return subtitle containing both department and job position information.
+        """
+        return f"{self.employee_id.employee_work_info.department_id} / {self.employee_id.employee_work_info.job_position_id}"
+
+    def activities(self):
+        """
+        This method is used to return the activites and count of activites comes for an attendance
+        """
+        activities = AttendanceActivity.objects.filter(
+            attendance_date=self.attendance_date, employee_id=self.employee_id
+        )
+        return {"query": activities, "count": activities.count()}
+
     def requested_fields(self):
         """
         This method will returns the value difference fields
@@ -419,6 +696,7 @@ class Attendance(HorillaModel):
         attendance_account.overtime = format_time(total_ot_seconds)
         attendance_account.save()
         super().save(*args, **kwargs)
+        self.first_save = False
 
     def serialize(self):
         """
@@ -663,6 +941,69 @@ class AttendanceOverTime(HorillaModel):
         verbose_name = _("Hour Account")
         verbose_name_plural = _("Hour Accounts")
 
+    def get_month_capitalized(self):
+        """
+        capitalize month
+        """
+        return self.month.capitalize()
+
+    def edit_url_overtime(self):
+        """
+        Edit url
+        """
+
+        url = reverse("attendance-overtime-update", kwargs={"obj_id": self.pk})
+
+        return url
+
+    def delete_url_overtime(self):
+        """
+        delete url
+        """
+
+        url = reverse("attendance-overtime-delete", kwargs={"obj_id": self.pk})
+
+        return url
+
+    def hour_actions(self):
+        """
+        actions in hour account
+
+        """
+
+        return render_template(
+            path="cbv/hour_account/hour_actions.html",
+            context={"instance": self},
+        )
+
+    def hour_account_subtitle(self):
+        """
+        Detail view subtitle
+        """
+
+        return f"""{self.employee_id.employee_work_info.department_id } /
+          { self.employee_id.employee_work_info.job_position_id}"""
+
+    def hour_account_detail(self):
+        """
+        detail view
+        """
+
+        url = reverse("hour-account-detail-view", kwargs={"pk": self.pk})
+
+        return url
+
+    def hour_detail_actions(self):
+        """
+        actions in hour account detail view
+
+        """
+
+        return render_template(
+            path="cbv/hour_account/hour_detail_action.html",
+            context={"instance": self},
+        )
+
     def clean(self):
         try:
             year = int(self.year)
@@ -800,6 +1141,72 @@ class AttendanceLateComeEarlyOut(HorillaModel):
         unique_together = [("attendance_id"), ("type")]
         ordering = ["-attendance_id__attendance_date"]
 
+    def get_type(self):
+        """
+        Display work type
+        """
+        choices = [
+            ("late_come", _("Late Come")),
+            ("early_out", _("Early Out")),
+        ]
+        return dict(choices).get(self.type)
+
+    def penalities_column(self):
+        """
+        To get penalities
+
+        """
+
+        return render_template(
+            path="cbv/late_come_and_early_out/penality.html",
+            context={"instance": self},
+        )
+
+    def actions_column(self):
+        """
+        actions in hour account
+
+        """
+
+        return render_template(
+            path="cbv/late_come_and_early_out/actions_column.html",
+            context={"instance": self},
+        )
+
+    def detail_actions(self):
+        """
+        actions in hour account
+
+        """
+
+        return render_template(
+            path="cbv/late_come_and_early_out/detail_action.html",
+            context={"instance": self},
+        )
+
+    def late_come_subtitle(self):
+        """
+        Detail view subtitle
+        """
+
+        return f"""{self.employee_id.employee_work_info.department_id } /
+          { self.employee_id.employee_work_info.job_position_id}"""
+
+    def attendance_validated_check(self):
+        if self.attendance_id.attendance_validated == True:
+            return "Yes"
+        else:
+            return "No"
+
+    def late_come_detail(self):
+        """
+        detail view
+        """
+
+        url = reverse("late-in-early-out-single-view", kwargs={"pk": self.pk})
+
+        return url
+
     def __str__(self) -> str:
         return f"{self.attendance_id.employee_id.employee_first_name} \
             {self.attendance_id.employee_id.employee_last_name} - {self.type}"
@@ -835,6 +1242,17 @@ class AttendanceValidationCondition(HorillaModel):
         if not self.id and AttendanceValidationCondition.objects.exists():
             raise ValidationError(_("You cannot add more conditions."))
 
+    def break_point_actions(self):
+        """
+        actions in hour account
+
+        """
+
+        return render_template(
+            path="cbv/settings/break_point_action.html",
+            context={"instance": self},
+        )
+
 
 class GraceTime(HorillaModel):
     """
@@ -866,6 +1284,65 @@ class GraceTime(HorillaModel):
     def __str__(self) -> str:
         return str(f"{self.allowed_time} - Hours")
 
+    def get_instance_id(self):
+        return self.id
+
+    def is_active_col(self):
+        """
+        This method for get custome coloumn .
+        """
+
+        return render_template(
+            path="cbv/settings/is_active_col_grace_time.html",
+            context={"instance": self},
+        )
+
+    def allowed_time_col(self):
+        """
+        Allowed time col
+        """
+        return f"{self.allowed_time} Hours"
+
+    def action_col(self):
+        """
+        This method for get custome coloumn .
+        """
+
+        return render_template(
+            path="cbv/settings/grace_time_default_action.html",
+            context={"instance": self},
+        )
+
+    def applicable_on_clock_in_col(self):
+        """
+        This method for get custom column .
+        """
+
+        return render_template(
+            path="cbv/settings/applicable_on_clock_in_col.html",
+            context={"instance": self},
+        )
+
+    def applicable_on_clock_out_col(self):
+        """
+        This method for get custom column .
+        """
+
+        return render_template(
+            path="cbv/settings/applicable_on_clock_out_col.html",
+            context={"instance": self},
+        )
+
+    def get_shifts_display(self):
+        """
+        This method for get custom column .
+        """
+
+        return render_template(
+            path="cbv/settings/grace_time_shift.html",
+            context={"instance": self},
+        )
+
     def clean(self):
         """
         This method is used to perform some custom validations
@@ -928,6 +1405,22 @@ class AttendanceGeneralSetting(HorillaModel):
     company_id = models.ForeignKey(Company, on_delete=models.CASCADE, null=True)
     objects = HorillaCompanyManager()
 
+    def company_col(self):
+        if self.company_id:
+            return self.company_id.company
+        else:
+            return "All Company"
+
+    def check_in_check_out_col(self):
+        """
+        This method for get custom coloumn .
+        """
+
+        return render_template(
+            path="cbv/settings/check_in_check_out_col.html",
+            context={"instance": self},
+        )
+
 
 class WorkRecords(models.Model):
     """
diff --git a/attendance/static/cbv/attendance/hour_account.js b/attendance/static/cbv/attendance/hour_account.js
new file mode 100644
index 000000000..e683b9796
--- /dev/null
+++ b/attendance/static/cbv/attendance/hour_account.js
@@ -0,0 +1,327 @@
+
+
+var downloadMessages = {
+    ar: "هل ترغب في تنزيل القالب؟",
+    de: "Möchten Sie die Vorlage herunterladen?",
+    es: "¿Quieres descargar la plantilla?",
+    en: "Do you want to download the template?",
+    fr: "Voulez-vous télécharger le modèle ?",
+  };
+  var validateMessages = {
+    ar: "هل ترغب حقًا في التحقق من كل الحضور المحدد؟",
+    de: "Möchten Sie wirklich alle ausgewählten Anwesenheiten überprüfen?",
+    es: "¿Realmente quieres validar todas las asistencias seleccionadas?",
+    en: "Do you really want to validate all the selected attendances?",
+    fr: "Voulez-vous vraiment valider toutes les présences sélectionnées?",
+  };
+  var overtimeMessages = {
+    ar: "هل ترغب حقًا في الموافقة على الساعات الإضافية لجميع الحضور المحدد؟",
+    de: "Möchten Sie wirklich die Überstunden für alle ausgewählten Anwesenheiten genehmigen?",
+    es: "¿Realmente quieres aprobar las horas extras para todas las asistencias seleccionadas?",
+    en: "Do you really want to approve OT for all the selected attendances?",
+    fr: "Voulez-vous vraiment approuver les heures supplémentaires pour toutes les présences sélectionnées?",
+  };
+  var hourdeleteMessages = {
+    ar: "هل ترغب حقًا في حذف جميع الحضور المحددة؟",
+    de: "Möchten Sie wirklich alle ausgewählten Anwesenheiten löschen?",
+    es: "¿Realmente quieres eliminar todas las asistencias seleccionadas?",
+    en: "Do you really want to delete all the selected attendances?",
+    fr: "Voulez-vous vraiment supprimer toutes les présences sélectionnées?",
+  };
+  var lateDeleteMessages = {
+    ar: "هل ترغب حقًا في حذف جميع الحضور المحددة؟",
+    de: "Möchten Sie wirklich alle ausgewählten Anwesenheiten löschen?",
+    es: "¿Realmente quieres eliminar todas las asistencias seleccionadas?",
+    en: "Do you really want to delete all the selected records?",
+    fr: "Voulez-vous vraiment supprimer toutes les présences sélectionnées?",
+  };
+  var noRowValidateMessages = {
+    ar: "لم يتم تحديد أي صفوف من فحص الحضور.",
+    de: "Im Feld „Anwesenheit validieren“ sind keine Zeilen ausgewählt.",
+    es: "No se selecciona ninguna fila de Validar asistencia.",
+    en: "No rows are selected from Validate Attendances.",
+    fr: "Aucune ligne n'est sélectionnée dans Valider la présence.",
+  };
+  var norowotMessages = {
+    ar: "لم يتم تحديد أي صفوف من حضور العمل الإضافي.",
+    de: "In der OT-Anwesenheit sind keine Zeilen ausgewählt.",
+    es: "No se seleccionan filas de Asistencias de OT.",
+    en: "No rows are selected from OT Attendances.",
+    fr: "Aucune ligne n'est sélectionnée dans les présences OT.",
+  };
+  var norowdeleteMessages = {
+    ar: "لم يتم تحديد أي صفوف لحذف الحضور.",
+    de: "Es sind keine Zeilen zum Löschen von Anwesenheiten ausgewählt.",
+    es: "No se seleccionan filas para eliminar asistencias.",
+    en: "No rows are selected for deleting attendances.",
+    fr: "Aucune ligne n'est sélectionnée pour la suppression des présences.",
+  };
+  var lateNorowdeleteMessages = {
+    ar: "لم يتم تحديد أي صفوف لحذف الحضور.",
+    de: "Es sind keine Zeilen zum Löschen von Anwesenheiten ausgewählt.",
+    es: "No se seleccionan filas para eliminar asistencias.",
+    en: "No rows are selected for deleting records.",
+    fr: "Aucune ligne n'est sélectionnée pour la suppression des présences.",
+  };
+  var rowMessages = {
+    ar: " تم الاختيار",
+    de: " Ausgewählt",
+    es: " Seleccionado",
+    en: " Selected",
+    fr: " Sélectionné",
+  };
+  var excelMessages = {
+    ar: "هل ترغب في تنزيل ملف Excel؟",
+    de: "Möchten Sie die Excel-Datei herunterladen?",
+    es: "¿Desea descargar el archivo de Excel?",
+    en: "Do you want to download the excel file?",
+    fr: "Voulez-vous télécharger le fichier Excel?",
+  };
+  var requestAttendanceApproveMessages = {
+    ar: "هل ترغب حقًا في الموافقة على جميع طلبات الحضور المحددة؟",
+    de: "Möchten Sie wirklich alle ausgewählten Anwesenheitsanfragen genehmigen?",
+    es: "¿Realmente quieres aprobar todas las solicitudes de asistencia seleccionadas?",
+    en: "Do you really want to approve all the selected attendance requests?",
+    fr: "Voulez-vous vraiment approuver toutes les demandes de présence sélectionnées?",
+  };
+  
+  var reqAttendancRejectMessages = {
+    ar: "هل ترغب حقًا في رفض جميع طلبات الحضور المحددة؟",
+    de: "Möchten Sie wirklich alle ausgewählten Anwesenheitsanfragen ablehnen?",
+    es: "¿Realmente quieres rechazar todas las solicitudes de asistencia seleccionadas?",
+    en: "Do you really want to reject all the selected attendance requests?",
+    fr: "Voulez-vous vraiment rejeter toutes les demandes de présence sélectionnées?",
+  };
+  
+  tickCheckboxes();
+  function makeListUnique(list) {
+    return Array.from(new Set(list));
+  }
+  
+  tickactivityCheckboxes();
+  function makeactivityListUnique(list) {
+    return Array.from(new Set(list));
+  }
+  
+  ticklatecomeCheckboxes();
+  function makelatecomeListUnique(list) {
+    return Array.from(new Set(list));
+  }
+  
+  function getCurrentLanguageCode(callback) {
+    var languageCode = $("#main-section-data").attr("data-lang");
+    var allowedLanguageCodes = ["ar", "de", "es", "en", "fr"];
+    if (allowedLanguageCodes.includes(languageCode)) {
+      callback(languageCode);
+    } else {
+      $.ajax({
+        type: "GET",
+        url: "/employee/get-language-code/",
+        success: function (response) {
+          var ajaxLanguageCode = response.language_code;
+          $("#main-section-data").attr("data-lang", ajaxLanguageCode);
+          callback(
+            allowedLanguageCodes.includes(ajaxLanguageCode)
+              ? ajaxLanguageCode
+              : "en"
+          );
+        },
+        error: function () {
+          callback("en");
+        },
+      });
+    }
+  }
+
+
+  function hourAccountbulkDelete() {
+    
+    var languageCode = null;
+    getCurrentLanguageCode(function (code) {
+      languageCode = code;
+      var confirmMessage = hourdeleteMessages[languageCode];
+      var textMessage = norowdeleteMessages[languageCode];
+      ids = [];
+      ids.push($("#selectedInstances").attr("data-ids"));
+      ids = JSON.parse($("#selectedInstances").attr("data-ids"));
+      if (ids.length === 0) {
+        Swal.fire({
+          text: textMessage,
+          icon: "warning",
+          confirmButtonText: "Close",
+        });
+      } else {
+        Swal.fire({
+          text: confirmMessage,
+          icon: "error",
+          showCancelButton: true,
+          confirmButtonColor: "#008000",
+          cancelButtonColor: "#d33",
+          confirmButtonText: "Confirm",
+        }).then(function (result) {
+          if (result.isConfirmed) {
+            ids = [];
+            ids.push($("#selectedInstances").attr("data-ids"));
+            ids = JSON.parse($("#selectedInstances").attr("data-ids"));
+            $.ajax({
+              type: "POST",
+              url: "/attendance/attendance-account-bulk-delete",
+              data: {
+                csrfmiddlewaretoken: getCookie("csrftoken"),
+                ids: JSON.stringify(ids),
+              },
+              success: function (response, textStatus, jqXHR) {
+                if (jqXHR.status === 200) {
+                  location.reload();
+                }
+              },
+            });
+          }
+        });
+      }
+    });
+  };
+
+
+ function lateComeBulkDelete() {
+   
+    var languageCode = null;
+    getCurrentLanguageCode(function (code) {
+      languageCode = code;
+      var confirmMessage = lateDeleteMessages[languageCode];
+      var textMessage = lateNorowdeleteMessages[languageCode];
+      ids = [];
+      ids.push($("#selectedInstances").attr("data-ids"));
+      ids = JSON.parse($("#selectedInstances").attr("data-ids"));
+      if (ids.length === 0) {
+        Swal.fire({
+          text: textMessage,
+          icon: "warning",
+          confirmButtonText: "Close",
+        });
+      } else {
+        Swal.fire({
+          text: confirmMessage,
+          icon: "error",
+          showCancelButton: true,
+          confirmButtonColor: "#008000",
+          cancelButtonColor: "#d33",
+          confirmButtonText: "Confirm",
+        }).then(function (result) {
+          if (result.isConfirmed) {
+            ids = [];
+            ids.push($("#selectedInstances").attr("data-ids"));
+            ids = JSON.parse($("#selectedInstances").attr("data-ids"));
+            $.ajax({
+              type: "POST",
+              url: "/attendance/late-come-early-out-bulk-delete",
+              data: {
+                csrfmiddlewaretoken: getCookie("csrftoken"),
+                ids: JSON.stringify(ids),
+              },
+              success: function (response, textStatus, jqXHR) {
+                if (jqXHR.status === 200) {
+                  location.reload();
+                }
+              },
+            });
+          }
+        });
+      }
+    });
+  };
+
+
+  function reqAttendanceBulkApprove() {
+    var languageCode = null;
+    getCurrentLanguageCode(function (code) {
+      languageCode = code;
+      var confirmMessage = requestAttendanceApproveMessages[languageCode];
+      var textMessage = lateNorowdeleteMessages[languageCode];
+      ids = [];
+      ids.push($("#selectedInstances").attr("data-ids"));
+      ids = JSON.parse($("#selectedInstances").attr("data-ids"));
+      if (ids.length === 0) {
+        Swal.fire({
+          text: textMessage,
+          icon: "warning",
+          confirmButtonText: "Close",
+        });
+      } else {
+        Swal.fire({
+          text: confirmMessage,
+          icon: "info",
+          showCancelButton: true,
+          confirmButtonColor: "#008000",
+          cancelButtonColor: "#d33",
+          confirmButtonText: "Confirm",
+        }).then(function (result) {
+          if (result.isConfirmed) {
+            ids = JSON.parse($("#selectedInstances").attr("data-ids") || "[]");
+            $.ajax({
+              type: "POST",
+              url: "/attendance/bulk-approve-attendance-request",
+              data: {
+                csrfmiddlewaretoken: getCookie("csrftoken"),
+                ids: JSON.stringify(ids),
+              },
+              success: function (response, textStatus, jqXHR) {
+                if (jqXHR.status === 200) {
+                  location.reload();
+                }
+              },
+            });
+          }
+        });
+      }
+    });
+  };
+  
+
+  function reqAttendanceBulkReject() {
+    var languageCode = null;
+    getCurrentLanguageCode(function (code) {
+      languageCode = code;
+      var confirmMessage = reqAttendancRejectMessages[languageCode];
+      var textMessage = noRowValidateMessages[languageCode];
+      ids = [];
+      ids.push($("#selectedInstances").attr("data-ids"));
+      ids = JSON.parse($("#selectedInstances").attr("data-ids"));
+      if (ids.length === 0) {
+        Swal.fire({
+          text: textMessage,
+          icon: "warning",
+          confirmButtonText: "Close",
+        });
+      } else {
+        Swal.fire({
+          text: confirmMessage,
+          icon: "info",
+          showCancelButton: true,
+          confirmButtonColor: "#008000",
+          cancelButtonColor: "#d33",
+          confirmButtonText: "Confirm",
+        }).then(function (result) {
+          if (result.isConfirmed) {
+            ids = JSON.parse($("#selectedInstances").attr("data-ids") || "[]");
+            $.ajax({
+              type: "POST",
+              url: "/attendance/bulk-reject-attendance-request",
+              data: {
+                csrfmiddlewaretoken: getCookie("csrftoken"),
+                ids: JSON.stringify(ids),
+              },
+              success: function (response, textStatus, jqXHR) {
+                if (jqXHR.status === 200) {
+                  location.reload();
+                }
+              },
+            });
+          }
+        });
+      }
+    });
+  };
+  
+  
+  
\ No newline at end of file
diff --git a/attendance/static/cbv/attendance_activity.js b/attendance/static/cbv/attendance_activity.js
new file mode 100644
index 000000000..6728f1270
--- /dev/null
+++ b/attendance/static/cbv/attendance_activity.js
@@ -0,0 +1,438 @@
+var downloadMessages = {
+    ar: "هل ترغب في تنزيل القالب؟",
+    de: "Möchten Sie die Vorlage herunterladen?",
+    es: "¿Quieres descargar la plantilla?",
+    en: "Do you want to download the template?",
+    fr: "Voulez-vous télécharger le modèle ?",
+  };
+  var validateMessages = {
+    ar: "هل ترغب حقًا في التحقق من كل الحضور المحدد؟",
+    de: "Möchten Sie wirklich alle ausgewählten Anwesenheiten überprüfen?",
+    es: "¿Realmente quieres validar todas las asistencias seleccionadas?",
+    en: "Do you really want to validate all the selected attendances?",
+    fr: "Voulez-vous vraiment valider toutes les présences sélectionnées?",
+  };
+  var overtimeMessages = {
+    ar: "هل ترغب حقًا في الموافقة على الساعات الإضافية لجميع الحضور المحدد؟",
+    de: "Möchten Sie wirklich die Überstunden für alle ausgewählten Anwesenheiten genehmigen?",
+    es: "¿Realmente quieres aprobar las horas extras para todas las asistencias seleccionadas?",
+    en: "Do you really want to approve OT for all the selected attendances?",
+    fr: "Voulez-vous vraiment approuver les heures supplémentaires pour toutes les présences sélectionnées?",
+  };
+  var attendancedeleteMessages = {
+    ar: "هل ترغب حقًا في حذف جميع الحضور المحددة؟",
+    de: "Möchten Sie wirklich alle ausgewählten Anwesenheiten löschen?",
+    es: "¿Realmente quieres eliminar todas las asistencias seleccionadas?",
+    en: "Do you really want to delete all the selected attendances?",
+    fr: "Voulez-vous vraiment supprimer toutes les présences sélectionnées?",
+  };
+  var noRowValidateMessages = {
+    ar: "لم يتم تحديد أي صفوف من فحص الحضور.",
+    de: "Im Feld „Anwesenheit validieren“ sind keine Zeilen ausgewählt.",
+    es: "No se selecciona ninguna fila de Validar asistencia.",
+    en: "No rows are selected from Validate Attendances.",
+    fr: "Aucune ligne n'est sélectionnée dans Valider la présence.",
+  };
+  var norowotMessages = {
+    ar: "لم يتم تحديد أي صفوف من حضور العمل الإضافي.",
+    de: "In der OT-Anwesenheit sind keine Zeilen ausgewählt.",
+    es: "No se seleccionan filas de Asistencias de OT.",
+    en: "No rows are selected from OT Attendances.",
+    fr: "Aucune ligne n'est sélectionnée dans les présences OT.",
+  };
+  var norowdeleteMessages = {
+    ar: "لم يتم تحديد أي صفوف لحذف الحضور.",
+    de: "Es sind keine Zeilen zum Löschen von Anwesenheiten ausgewählt.",
+    es: "No se seleccionan filas para eliminar asistencias.",
+    en: "No rows are selected for deleting attendances.",
+    fr: "Aucune ligne n'est sélectionnée pour la suppression des présences.",
+  };
+  var rowMessages = {
+    ar: " تم الاختيار",
+    de: " Ausgewählt",
+    es: " Seleccionado",
+    en: " Selected",
+    fr: " Sélectionné",
+  };
+  var excelMessages = {
+    ar: "هل ترغب في تنزيل ملف Excel؟",
+    de: "Möchten Sie die Excel-Datei herunterladen?",
+    es: "¿Desea descargar el archivo de Excel?",
+    en: "Do you want to download the excel file?",
+    fr: "Voulez-vous télécharger le fichier Excel?",
+  };
+  var reqAttendanceApproveMessages = {
+    ar: "هل ترغب حقًا في الموافقة على جميع طلبات الحضور المحددة؟",
+    de: "Möchten Sie wirklich alle ausgewählten Anwesenheitsanfragen genehmigen?",
+    es: "¿Realmente quieres aprobar todas las solicitudes de asistencia seleccionadas?",
+    en: "Do you really want to approve all the selected attendance requests?",
+    fr: "Voulez-vous vraiment approuver toutes les demandes de présence sélectionnées?",
+  };
+  
+  var reqAttendanceApproveMessages = {
+    ar: "هل ترغب حقًا في رفض جميع طلبات الحضور المحددة؟",
+    de: "Möchten Sie wirklich alle ausgewählten Anwesenheitsanfragen ablehnen?",
+    es: "¿Realmente quieres rechazar todas las solicitudes de asistencia seleccionadas?",
+    en: "Do you really want to reject all the selected attendance requests?",
+    fr: "Voulez-vous vraiment rejeter toutes les demandes de présence sélectionnées?",
+  };
+  
+  tickCheckboxes();
+  function makeListUnique(list) {
+    return Array.from(new Set(list));
+  }
+  
+  tickactivityCheckboxes();
+  function makeactivityListUnique(list) {
+    return Array.from(new Set(list));
+  }
+  
+  ticklatecomeCheckboxes();
+  function makelatecomeListUnique(list) {
+    return Array.from(new Set(list));
+  }
+  
+  function getCurrentLanguageCode(callback) {
+    var languageCode = $("#main-section-data").attr("data-lang");
+    var allowedLanguageCodes = ["ar", "de", "es", "en", "fr"];
+    if (allowedLanguageCodes.includes(languageCode)) {
+      callback(languageCode);
+    } else {
+      $.ajax({
+        type: "GET",
+        url: "/employee/get-language-code/",
+        success: function (response) {
+          var ajaxLanguageCode = response.language_code;
+          $("#main-section-data").attr("data-lang", ajaxLanguageCode);
+          callback(
+            allowedLanguageCodes.includes(ajaxLanguageCode)
+              ? ajaxLanguageCode
+              : "en"
+          );
+        },
+        error: function () {
+          callback("en");
+        },
+      });
+    }
+  }
+  
+  
+  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();
+        // Does this cookie string begin with the name we want?
+        if (cookie.substring(0, name.length + 1) === name + "=") {
+          cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
+          break;
+        }
+      }
+    }
+    return cookieValue;
+  }
+
+  
+
+  
+function deleteAttendanceNav() {
+    var languageCode = null;
+    getCurrentLanguageCode(function (code) {
+      languageCode = code;
+      var confirmMessage = attendancedeleteMessages[languageCode];
+      var textMessage = norowdeleteMessages[languageCode];
+      ids = [];
+      ids.push($("#selectedInstances").attr("data-ids"));
+      ids = JSON.parse($("#selectedInstances").attr("data-ids"));
+      if (ids.length === 0) {
+        Swal.fire({
+          text: textMessage,
+          icon: "warning",
+          confirmButtonText: "Close",
+        });
+      } else {
+        Swal.fire({
+          text: confirmMessage,
+          icon: "error",
+          showCancelButton: true,
+          confirmButtonColor: "#008000",
+          cancelButtonColor: "#d33",
+          confirmButtonText: "Confirm",
+        }).then(function (result) {
+          if (result.isConfirmed) {
+            ids = [];
+            ids.push($("#selectedInstances").attr("data-ids"));
+            ids = JSON.parse($("#selectedInstances").attr("data-ids"));
+            $.ajax({
+              type: "POST",
+              url: "/attendance/attendance-activity-bulk-delete",
+              data: {
+                csrfmiddlewaretoken: getCookie("csrftoken"),
+                ids: JSON.stringify(ids),
+              },
+              success: function (response, textStatus, jqXHR) {
+                if (jqXHR.status === 200) {
+                  location.reload();
+                }
+              },
+            });
+          }
+        });
+      }
+    });
+  }
+
+
+  function importAttendanceNav() {      
+    var languageCode = null;
+    getCurrentLanguageCode(function (code) {
+      languageCode = code;
+      var confirmMessage = downloadMessages[languageCode];
+      Swal.fire({
+        text: confirmMessage,
+        icon: "question",
+        showCancelButton: true,
+        confirmButtonColor: "#008000",
+        cancelButtonColor: "#d33",
+        confirmButtonText: "Confirm",
+      }).then(function (result) {
+        if (result.isConfirmed) {
+          $.ajax({
+            type: "GET",
+            url: "/attendance/attendance-excel",
+            dataType: "binary",
+            xhrFields: {
+              responseType: "blob",
+            },
+            success: function (response) {
+              const file = new Blob([response], {
+                type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+              });
+              const url = URL.createObjectURL(file);
+              const link = document.createElement("a");
+              link.href = url;
+              link.download = "attendance_excel.xlsx";
+              document.body.appendChild(link);
+              link.click();
+            },
+            error: function (xhr, textStatus, errorThrown) {
+              console.error("Error downloading file:", errorThrown);
+            },
+          });
+        }
+      });
+    });
+  }
+
+
+
+  function importAttendanceActivity() {      
+    var languageCode = null;
+    getCurrentLanguageCode(function (code) {
+      languageCode = code;
+      var confirmMessage = downloadMessages[languageCode];
+      Swal.fire({
+        text: confirmMessage,
+        icon: "question",
+        showCancelButton: true,
+        confirmButtonColor: "#008000",
+        cancelButtonColor: "#d33",
+        confirmButtonText: "Confirm",
+      }).then(function (result) {
+        if (result.isConfirmed) {
+          $.ajax({
+            type: "GET",
+            url: "/attendance/attendance-activity-import-excel",
+            dataType: "binary",
+            xhrFields: {
+              responseType: "blob",
+            },
+            success: function (response) {
+              const file = new Blob([response], {
+                type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+              });
+              const url = URL.createObjectURL(file);
+              const link = document.createElement("a");
+              link.href = url;
+              link.download = "activity_excel.xlsx";
+              document.body.appendChild(link);
+              link.click();
+            },
+            error: function (xhr, textStatus, errorThrown) {
+              console.error("Error downloading file:", errorThrown);
+            },
+          });
+        }
+      });
+    });
+  }
+
+
+  function bulkDeleteAttendanceNav() {
+    var languageCode = null;
+    getCurrentLanguageCode(function (code) {
+      languageCode = code;
+      var confirmMessage = attendancedeleteMessages[languageCode];
+      var textMessage = norowdeleteMessages[languageCode];
+      ids = [];
+      ids.push($("#selectedInstances").attr("data-ids"));
+      ids = JSON.parse($("#selectedInstances").attr("data-ids"));
+      if (ids.length === 0) {
+        Swal.fire({
+          text: textMessage,
+          icon: "warning",
+          confirmButtonText: "Close",
+        });
+      } else {
+        Swal.fire({
+          text: confirmMessage,
+          icon: "error",
+          showCancelButton: true,
+          confirmButtonColor: "#008000",
+          cancelButtonColor: "#d33",
+          confirmButtonText: "Confirm",
+        }).then(function (result) {
+          if (result.isConfirmed) {
+            ids = [];
+            ids.push($("#selectedInstances").attr("data-ids"));
+            ids = JSON.parse($("#selectedInstances").attr("data-ids"));
+            $.ajax({
+              type: "POST",
+              url: "/attendance/attendance-bulk-delete",
+              data: {
+                csrfmiddlewaretoken: getCookie("csrftoken"),
+                ids: JSON.stringify(ids),
+              },
+              success: function (response, textStatus, jqXHR) {
+                if (jqXHR.status === 200) {
+                  location.reload();
+                }
+              },
+            });
+          }
+        });
+      }
+    });
+  }
+
+  
+
+
+  function showApproveAlert(dataReqValue) {
+    Swal.fire({
+        title: 'Pending Attendance Update Request!',
+        text: 'An attendance request exists for updating this attendance prior to validation.',
+        icon: 'warning',
+        confirmButtonText: 'View Request',
+        showCancelButton: true,
+        cancelButtonText: 'Close',
+        preConfirm: () => {
+          // Redirect to the page based on dataReqValue
+          localStorage.setItem("attendanceRequestActiveTab","#tab_1")
+          window.location.href = dataReqValue;
+
+      },
+    });
+  }
+
+
+  function bulkValidateTabAttendance(dataReqValue) {
+    var languageCode = null;
+    getCurrentLanguageCode(function (code) {
+      languageCode = code;
+      var confirmMessage = validateMessages[languageCode];
+      var textMessage = noRowValidateMessages[languageCode];
+      ids = [];
+      ids.push($("#validateselectedInstances").attr("data-ids"));
+      ids = JSON.parse($("#validateselectedInstances").attr("data-ids"));
+      if (ids.length === 0) {
+        Swal.fire({
+          text: textMessage,
+          icon: "warning",
+          confirmButtonText: "Close",
+        });
+      } else {
+        Swal.fire({
+          text: confirmMessage,
+          icon: "info",
+          showCancelButton: true,
+          confirmButtonColor: "#008000",
+          cancelButtonColor: "#d33",
+          confirmButtonText: "Confirm",
+        }).then(function (result) {
+          if (result.isConfirmed) {
+            ids = [];
+            ids.push($("#validateselectedInstances").attr("data-ids"));
+            ids = JSON.parse($("#validateselectedInstances").attr("data-ids"));
+            $.ajax({
+              type: "POST",
+              url: "/attendance/validate-bulk-attendance",
+              data: {
+                csrfmiddlewaretoken: getCookie("csrftoken"),
+                ids: JSON.stringify(ids),
+              },
+              success: function (response, textStatus, jqXHR) {
+                if (jqXHR.status === 200) {
+                  location.reload();
+                } else {
+                }
+              },
+            });
+          }
+        });
+      }
+    });
+  }
+  
+  function otBulkValidateTabAttendance(dataReqValue) {
+    var languageCode = null;
+    getCurrentLanguageCode(function (code) {
+      languageCode = code;
+      var confirmMessage = overtimeMessages[languageCode];
+      var textMessage = norowotMessages[languageCode];
+      ids = [];
+      ids.push($("#overtimeselectedInstances").attr("data-ids"));
+      ids = JSON.parse($("#overtimeselectedInstances").attr("data-ids"));
+      if (ids.length === 0) {
+        Swal.fire({
+          text: textMessage,
+          icon: "warning",
+          confirmButtonText: "Close",
+        });
+      } else {
+        Swal.fire({
+          text: confirmMessage,
+          icon: "success",
+          showCancelButton: true,
+          confirmButtonColor: "#008000",
+          cancelButtonColor: "#d33",
+          confirmButtonText: "Confirm",
+        }).then(function (result) {
+          if (result.isConfirmed) {
+            ids = [];
+            ids.push($("#overtimeselectedInstances").attr("data-ids"));
+            ids = JSON.parse($("#overtimeselectedInstances").attr("data-ids"));
+            
+            $.ajax({
+              type: "POST",
+              url: "/attendance/approve-bulk-overtime",
+              data: {
+                csrfmiddlewaretoken: getCookie("csrftoken"),
+                ids: JSON.stringify(ids),
+              },
+              success: function (response, textStatus, jqXHR) {
+                if (jqXHR.status === 200) {
+                  location.reload();
+                } else {
+                }
+              },
+            });
+          }
+        });
+      }
+    });
+  }
+
+  
\ No newline at end of file
diff --git a/attendance/templates/attendance/attendance_activity/export_filter.html b/attendance/templates/attendance/attendance_activity/export_filter.html
index 5c43be942..9ca69bade 100644
--- a/attendance/templates/attendance/attendance_activity/export_filter.html
+++ b/attendance/templates/attendance/attendance_activity/export_filter.html
@@ -1,17 +1,5 @@
 {% load static %} {% load i18n %}
-<div class="oh-modal__dialog-header pb-0">
-    <h2 class="oh-modal__dialog-title" id="attendanceExportLavel">
-        {% trans "Export Attendance Activities" %}
-    </h2>
-    <button class="oh-modal__close" aria-label="Close">
-        <ion-icon name="close-outline"></ion-icon>
-    </button>
-</div>
-<div class="oh-modal__dialog-body" id="attendanceExportModalBody">
-    <form action="{%url 'attendance-activity-info-export' %}" method="get"
-        onsubmit="event.stopPropagation();$(this).parents().find('.oh-modal--show').last().toggleClass('oh-modal--show');"
-        id="attendanceExportForm" class="oh-profile-section">
-        {% csrf_token %}
+
         <div class="oh-dropdown__filter-body" id="export_attendance_form">
             <div class="oh-accordion">
                 <div class="oh-accordion-header">{% trans "Excel columns" %}</div>
@@ -144,8 +132,3 @@
                 </div>
             </div>
         </div>
-        <div class="oh-modal__dialog-footer p-0 pt-3">
-            <button type="submit" class="oh-btn oh-btn--secondary oh-btn--shadow">{% trans 'Export' %}</button>
-        </div>
-    </form>
-</div>
diff --git a/attendance/templates/attendance/break_point/condition.html b/attendance/templates/attendance/break_point/condition.html
index 910d2bccc..784acc818 100644
--- a/attendance/templates/attendance/break_point/condition.html
+++ b/attendance/templates/attendance/break_point/condition.html
@@ -1,4 +1,8 @@
-{% extends 'settings.html' %} {% load i18n %} {% block settings %}{% load static %}
+{% extends 'settings.html' %}
+{% load i18n %}
+{% block settings %}
+{% load static %}
+{% include "generic/components.html" %}
 <div id="ohMessages"></div>
 
 <div class="oh-inner-sidebar-content" id="attendanceValidationConditions">
@@ -14,8 +18,9 @@
             </button>
         {% endif %}
     </div>
-    {% if condition %}
-    <div class="oh-sticky-table">
+</div>
+    {% comment %} {% if condition %} {% endcomment %}
+    {% comment %} <div class="oh-sticky-table">
         <div class="oh-sticky-table__table oh-table--sortable">
             <div class="oh-sticky-table__thead">
                 <div class="oh-sticky-table__tr">
@@ -35,12 +40,26 @@
                         <div class="oh-sticky-table__th">{% trans "Actions" %}</div>
                     {% endif %}
                 </div>
-            </div>
-            <div class="oh-sticky-table__tbody">
-                {% if condition != None %}
-                    <div class="oh-sticky-table__tr" draggable="true">
+            </div> {% endcomment %}
+            {% comment %} <div class="oh-sticky-table__tbody"> {% endcomment %}
+            {% comment %} {% if condition != None %} {% endcomment %}
+                <div
+                class="oh-checkpoint-badge mb-2"
+                id="selectedInstances"
+                data-ids="[]"
+                data-clicked=""
+                style="display: none"
+              ></div>
+                <div class="oh-wrapper" hx-get="{% url "break-point-list" %}?{{request.GET.urlencode}}"
+                  hx-trigger="load" id="listContainer">
+                  <div class="animated-background">
+                </div>
+              </div>
+                    {% comment %} <div class="oh-sticky-table__tr" draggable="true">
                         <div class="oh-sticky-table__td">{{ condition.validation_at_work }}</div>
                         <div class="oh-sticky-table__td">{{ condition.minimum_overtime_to_approve }}</div>
+                        <div class="oh-sticky-table__td">{{ condition.overtime_cutoff }}</div> {% endcomment %}
+                        {% comment %} {% if perms.attendance.change_attendancevalidationcondition %}
                         <div class="oh-sticky-table__td">{{ condition.overtime_cutoff }}</div>
                         <div class="oh-sticky-table__td">{{ condition.auto_approve_ot|yesno:"Yes,No" }}</div>
                         {% if perms.attendance.change_attendancevalidationcondition %}
@@ -49,17 +68,18 @@
                                     hx-target="#objectUpdateModalTarget" type="button" class="oh-btn oh-btn--info"
                                     data-toggle="oh-modal-toggle" data-target="#objectUpdateModal">{% trans 'Edit' %}</a>
                             </div>
-                        {% endif %}
-                    </div>
-                {% endif %}
-            </div>
+                        {% endif %} {% endcomment %}
+                    {% comment %} </div> {% endcomment %}
+                {% comment %} {% endif %} {% endcomment %}
+                    {% comment %} </div> {% endcomment %}
+            {% comment %}
         </div>
-    </div>
-    {% else %}
+    </div> {% endcomment %}
+    {% comment %} {% else %}
     <div style="display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%;">
         <img style="display: block; width: 15%; margin: 20px auto; filter: opacity(0.5);"
             src="{% static 'images/ui/conditions.png' %}" class="" alt="Page not found. 404." />
         <h5 class="oh-404__subtitle">{% trans "There is no attendance conditions at this moment." %}</h5>
-    </div>
-    {% endif %}
+    </div> {% endcomment %}
+    {% comment %} {% endif %} {% endcomment %}
 {% endblock %}
diff --git a/attendance/templates/attendance/dashboard/dashboard.html b/attendance/templates/attendance/dashboard/dashboard.html
index f92d97e34..ba0b06f4c 100644
--- a/attendance/templates/attendance/dashboard/dashboard.html
+++ b/attendance/templates/attendance/dashboard/dashboard.html
@@ -1,5 +1,6 @@
 {% extends 'index.html' %} {% load i18n %} {% block content %} {% load static %}
 {% load attendancefilters %}
+{% include 'generic/components.html' %}
 <style>
     .oh-sticky-table__right {
         position: sticky;
@@ -7,6 +8,24 @@
         background-color: #fff;
     }
 </style>
+
+<!-- activity view modal for attendance activity col -->
+
+<div class="oh-modal" id="activityViewModal" role="dialog" aria-hidden="true" style="z-index:1100;">
+    <div class="oh-modal__dialog" style="max-width: 900px;">
+      <div class="oh-modal__dialog-header">
+        <h3 class="oh-main__titlebar-title fw-bold ">{% trans " Activities" %}</h3>
+        <button class="oh-modal__close--custom" aria-label="Close"
+        onclick="$(this).parents().closest('.oh-modal--show').toggleClass('oh-modal--show');">
+        <ion-icon name="close-outline"></ion-icon>
+        </button>
+      </div>
+      <div class="oh-modal__dialog-body" id="activityViewModalBody" style="overflow-x:auto;"></div>
+    </div>
+  </div>
+
+  <!-- end of modal -->
+
 <div class="oh-wrapper">
     <div class="oh-dashboard__left col-12 col-sm-12 col-md-12 col-lg-12 pb-5">
         <div class="oh-dashboard row">
@@ -104,9 +123,11 @@
                                 <span class="oh-card-dashboard__title">{% trans 'Offline Employees' %}
                                 </span>
                             </div>
-                            <div class="oh-card-dashboard__body" hx-get="{% url 'not-in-yet' %}" hx-trigger="load"
-                                id="notInYetIdCardBody" style="height: 310px;">
-                                <div class="animated-background"></div>
+                            <div class="oh-card-dashboard__body"
+                                 style="height: 310px;">
+                                <div id="notInYetIdCardBody" class="oh-sticky-table h-100" hx-get="{% url 'not-in-yet' %}" hx-trigger="load" style="border: none;">
+                                    <div class="animated-background"></div>
+                                </div>
                             </div>
                         </div>
                     </div>
diff --git a/attendance/templates/attendance/grace_time/grace_time_table.html b/attendance/templates/attendance/grace_time/grace_time_table.html
index afa23d202..f3ee25c0e 100644
--- a/attendance/templates/attendance/grace_time/grace_time_table.html
+++ b/attendance/templates/attendance/grace_time/grace_time_table.html
@@ -1,4 +1,5 @@
 {% load static %}{% load i18n %}
+{% include "generic/components.html" %}
 <div id="ohMessages"></div>
 {% if messages %}
 <div class="oh-wrapper">
@@ -12,7 +13,11 @@
 </div>
 {% endif %}
 <div class="oh-inner-sidebar-content mt-3">
-    <div class="oh-inner-sidebar-content__header d-flex justify-content-between align-items-center pb-3">
+
+    <div id="defaultGraceNav" hx-get="{% url "default-grace-time-nav" %}" hx-trigger="load,click" class="defaultGraceNav" >
+	</div>
+
+    {% comment %} <div class="oh-inner-sidebar-content__header d-flex justify-content-between align-items-center pb-3">
         <h2 class="oh-inner-sidebar-content__title">{% trans 'Default Grace Time' %}</h2>
         {% if not default_grace_time and perms.attendance.add_gracetime %}
         <button class="oh-btn oh-btn--secondary oh-btn--shadow" hx-target="#objectCreateModalTarget" type="button"
@@ -22,8 +27,28 @@
             {% trans 'Create' %}
         </button>
         {% endif %}
-    </div>
-    {% if default_grace_time %}
+    </div> {% endcomment %}
+
+
+
+		<div
+    class="oh-checkpoint-badge mb-2"
+    id="selectedInstancesDefault"
+    data-ids="[]"
+    data-clicked=""
+    style="display: none"
+  ></div>
+
+
+  <div
+  class="oh-wrapper"
+  hx-get="{% url "default-grace-time-list"  %}?{{request.GET.urlencode}}"
+  hx-trigger="load"
+  id="listContainer">
+  <div class="animated-background">
+  </div>
+</div>
+    {% comment %} {% if default_grace_time %}
         <div class="oh-sticky-table">
             <div class="oh-sticky-table__table oh-table--sortable">
                 <div class="oh-sticky-table__thead">
@@ -121,13 +146,15 @@
                 src="{% static 'images/ui/Hour_glass.png' %}" class="" alt="Page not found. 404." />
             <h5 class="oh-404__subtitle">{% trans "There is no default grace time at this moment." %}</h5>
         </div>
-    {% endif %}
+    {% endif %} {% endcomment %}
 </div>
 <!--end of Defualt Grace time  -->
 
 <!--start of Grace time  -->
 <div class="oh-inner-sidebar-content">
-    <div class="oh-inner-sidebar-content__header d-flex justify-content-between align-items-center">
+    <div hx-get="{% url "grace-time-nav" %}" hx-trigger="load" >
+	</div>
+    {% comment %} <div class="oh-inner-sidebar-content__header d-flex justify-content-between align-items-center">
         <h2 class="oh-inner-sidebar-content__title">{% trans 'Grace Time' %}</h2>
         {% if perms.attendance.add_gracetime %}
         <button class="oh-btn oh-btn--secondary oh-btn--shadow" hx-target="#objectCreateModalTarget" type="button"
@@ -137,8 +164,27 @@
             {% trans 'Create' %}
         </button>
         {% endif %}
+    </div> {% endcomment %}
+
+
+		<div
+        class="oh-checkpoint-badge mb-2"
+        id="selectedInstancesData"
+        data-ids="[]"
+        data-clicked=""
+        style="display: none"
+      ></div>
+
+
+      <div
+      class="oh-wrapper"
+      hx-get="{% url "grace-time-list"  %}?{{request.GET.urlencode}}"
+      hx-trigger="load"
+      id="grace-time-container">
+      <div class="animated-background">
+      </div>
     </div>
-    {% if grace_times %}
+    {% comment %} {% if grace_times %}
     <div class="oh-sticky-table">
         <div class="oh-sticky-table__table oh-table--sortable">
             <div class="oh-sticky-table__thead">
@@ -257,7 +303,7 @@
             src="{% static 'images/ui/Hour_glass.png' %}" class="" alt="Page not found. 404." />
         <h5 class="oh-404__subtitle">{% trans "There is no grace time at this moment." %}</h5>
     </div>
-    {% endif %}
+    {% endif %} {% endcomment %}
 </div>
 <!--end of Grace time  -->
 
diff --git a/attendance/templates/attendance/penalty/form.html b/attendance/templates/attendance/penalty/form.html
index 00a077ae1..c52d01803 100644
--- a/attendance/templates/attendance/penalty/form.html
+++ b/attendance/templates/attendance/penalty/form.html
@@ -14,6 +14,9 @@
                 spanElement.click();
             }
         }, 1000);
+        $(document).ready(function(){
+            $('.reload-record').click();
+          })
     </script>
     {% if late_in_early_out_ids %}
         <span class="oh-span__class" hx-get="{% url 'late-come-early-out-search' %}?{{pd}}" hx-target="#report-container"></span>
@@ -82,8 +85,7 @@
                     <i>{% trans "By default minus leave will cut/deduct from available leaves" %}</i>
                 </li>
                 <li>
-                    <i>{% trans "By enabling 'Deduct from carry forward' leave will cut/deduct from carry forward days"
-                        %}</i>
+                    <i>{% trans "By enabling 'Deduct from carry forward' leave will cut/deduct from carry forward days" %}</i>
                 </li>
             </ol>
         {% endif %}
diff --git a/attendance/templates/attendance/settings/check_in_check_out_enable_form.html b/attendance/templates/attendance/settings/check_in_check_out_enable_form.html
index b8ea2fbcb..b85195cba 100644
--- a/attendance/templates/attendance/settings/check_in_check_out_enable_form.html
+++ b/attendance/templates/attendance/settings/check_in_check_out_enable_form.html
@@ -2,10 +2,21 @@
 
 
 <div class="oh-inner-sidebar-content">
-    <div class="oh-inner-sidebar-content__header d-flex justify-content-between align-items-center">
+    {% comment %} <div class="oh-inner-sidebar-content__header d-flex justify-content-between align-items-center">
         <h2 class="oh-inner-sidebar-content__title">{% trans 'Enable Check In/Check out' %}</h2>
+    </div> {% endcomment %}
+    <div id="defaultGraceNav" hx-get="{% url "check-in-check-out-nav" %}" hx-trigger="load">
+	</div>
+
+      <div
+      class="oh-wrapper"
+      hx-get="{% url "check-in-check-out-list"  %}?{{request.GET.urlencode}}"
+      hx-trigger="load"
+      id="listContainer">
+      <div class="animated-background">
+      </div>
     </div>
-    <div class="oh-sticky-table">
+    {% comment %} <div class="oh-sticky-table">
         <div class="oh-sticky-table__table oh-table--sortable">
             <div class="oh-sticky-table__thead">
                 <div class="oh-sticky-table__tr">
@@ -53,6 +64,6 @@
                 {% endfor %}
             </div>
         </div>
-    </div>
+    </div> {% endcomment %}
 </div>
 {% endblock %}
diff --git a/attendance/templates/attendance/work_record/work_record_view.html b/attendance/templates/attendance/work_record/work_record_view.html
index da0e8da0a..5a64a87eb 100644
--- a/attendance/templates/attendance/work_record/work_record_view.html
+++ b/attendance/templates/attendance/work_record/work_record_view.html
@@ -62,8 +62,7 @@
                         name="month"
                         hx-get="{% url 'work-records-change-month' %}"
                         hx-target="#workRecordTable"
-                        hx-trigger="change"
-                        >
+                        hx-trigger="keyup changed delay:0.5s">
                     </div>
                 </h6>
             </div>
diff --git a/attendance/templates/attendance_form.html b/attendance/templates/attendance_form.html
index 330dc793c..51194a4e9 100644
--- a/attendance/templates/attendance_form.html
+++ b/attendance/templates/attendance_form.html
@@ -4,7 +4,7 @@
     {{ field }}
   {% endif %}
 {% endfor %}
-<div class="oh-general__tab-target oh-profile-section" id="personal">
+<div class="oh-general__tab-target oh-profile-section" id="{% if id %}{{id}}{% else %}personal{% endif %}">
   <div class="oh-profile-section__card">
     <div class="row">
       <div class="col-12">{{form.non_field_errors}}</div>
diff --git a/attendance/templates/cbv/attendance_activity/attendance_activity_home.html b/attendance/templates/cbv/attendance_activity/attendance_activity_home.html
new file mode 100644
index 000000000..2c0eb254f
--- /dev/null
+++ b/attendance/templates/cbv/attendance_activity/attendance_activity_home.html
@@ -0,0 +1,139 @@
+{% extends "index.html" %}
+{% load static %}
+{% load i18n %}
+{% block content %}
+
+<meta name="csrf-token" content="{{ csrf_token }}">
+<style>
+    .canceled--dot{
+        background-color:red;
+      }
+      .approved--dot{
+        background-color:green;
+      }
+      .approved-True{
+        border-left: 3.4px solid yellowgreen !important;
+        border-radius: 4px 0 0 4px;
+      
+      }
+      .canceled-True {
+      
+        border-left: 3.4px solid red !important;
+        border-radius: 4px 0 0 4px;
+      
+      }
+    </style>
+<div hx-get="{% url "attendance-nav-view" %}" hx-trigger="load">
+</div> 
+
+{% include "generic/components.html" %}
+<div
+    class="oh-checkpoint-badge mb-2"
+    id="selectedInstances"
+    data-ids="[]"
+    data-clicked=""
+    style="display: none"
+  ></div>
+
+<div class="oh-wrapper"  
+ id="listContainer">
+  <div class="animated-background">
+</div>
+</div> 
+
+<div id="delete-table-data">
+</div>
+
+
+
+<div class="oh-activity-sidebar" id="worktypeactivitySidebar" style="z-index:1000;">
+
+    <div class="oh-activity-sidebar__body" id="commentContainer"></div>
+</div>
+
+<div
+class="oh-modal__dialog-body"
+id="workTypeRequestUpdateModalBody"
+></div>
+
+{% comment %} <div class="oh-modal__dialog-header pb-0">
+  <h2 class="oh-modal__dialog-title" id="activityImportLabel">
+      {% trans "Import Attendance Activities" %}
+  </h2>
+
+  <button class="oh-modal__close" aria-label="Close">
+      <ion-icon name="close-outline"></ion-icon>
+  </button>
+</div>
+
+<div class="oh-modal__dialog-body" id="activityImportModalBody">
+  <form hx-post="{% url 'attendance-activity-import' %}" hx-encoding="multipart/form-data"
+      hx-target="#objectCreateModalTarget" hx-swap="outerHTML" class="oh-profile-section" id="activityImportForm">
+      {% csrf_token %}
+      <div id="uploading" class="oh-modal__dialog-body mr-5" style="display: none;">
+          <div class="loader-container" style="margin: auto;">
+              <div class="loader"></div>
+              <div class="loader-text">{% trans "Uploading..." %}</div>
+              <div class="text-center" style="-webkit-text-stroke: medium;">
+                  {% trans "Don't refresh the page" %}
+              </div>
+          </div>
+      </div>
+
+      <div id="uploadContainer">
+          <label for="uploadFile" class="oh-dropdown__import-label">
+              <ion-icon name="cloud-upload" class="oh-dropdown__import-form-icon"></ion-icon>
+              <span class="oh-dropdown__import-form-title">{% trans "Upload a File" %}</span>
+              <span class="oh-dropdown__import-form-text">{% trans "Drag and drop files here" %}</span>
+          </label>
+          <input type="file" name="activity_import" required />
+          <div class="d-flex flex-row-reverse">
+              <button type="submit" class="oh-btn oh-btn--small oh-btn--secondary mt-3">
+                  {% trans "Upload" %}
+              </button>
+          </div>
+      </div>
+  </form>
+</div> {% endcomment %}
+
+<script src="{% static 'cbv/attendance_activity.js' %}"></script>
+{% comment %} <script>
+    $(document).ready(function () {
+        Swal.fire({
+            text: "{% trans 'Do you want to download the template?' %}",
+            icon: "question",
+            showCancelButton: true,
+            confirmButtonColor: "#008000",
+            cancelButtonColor: "#d33",
+            confirmButtonText: "{% trans 'Confirm' %}"
+        }).then((result) => {
+            if (result.isConfirmed) {
+                $.ajax({
+                    type: "GET",
+                    url: "{% url 'attendance-activity-import-excel' %}",
+                    xhrFields: { responseType: "blob" },
+                    success: function (response) {
+                        const url = URL.createObjectURL(new Blob([response], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" }));
+                        const link = document.createElement("a");
+                        link.href = url;
+                        link.download = "activity_excel.xlsx";
+                        document.body.appendChild(link);
+                        link.click();
+                        URL.revokeObjectURL(url);
+                    },
+                    error: function () {
+                        console.error("{% trans 'Error downloading file' %}");
+                    }
+                });
+            }
+        });
+
+        $('#activityImportForm').on('submit', function () {
+            $('#uploadContainer').hide();
+            $('#uploading').show();
+        });
+    });
+</script> {% endcomment %}
+ 
+
+{% endblock content %}
\ No newline at end of file
diff --git a/attendance/templates/cbv/attendance_activity/attendance_export.html b/attendance/templates/cbv/attendance_activity/attendance_export.html
new file mode 100644
index 000000000..bb98c1fec
--- /dev/null
+++ b/attendance/templates/cbv/attendance_activity/attendance_export.html
@@ -0,0 +1,31 @@
+{% load i18n %}
+{% load basefilters %}
+
+  <div class="oh-modal__dialog">
+    <div class="oh-modal__dialog-header">
+      <h2 class="oh-modal__dialog-title" id="attendanceExportLavel">
+        {% trans "Export Attendances" %}
+      </h2>
+      <button class="oh-modal__close" aria-label="Close">
+        <ion-icon name="close-outline"></ion-icon>
+      </button>
+      <div
+        class="oh-modal__dialog-body p-0 pt-2"
+        id="attendanceExportModalBody"
+      >
+        <form
+          action="{%url 'attendance-activity-info-export' %}"
+          method="get"
+          onsubmit="event.stopPropagation();$(this).parents().find('.oh-modal--show').last().toggleClass('oh-modal--show');"
+          id="attendanceExportForm"
+        >
+          {% csrf_token %} {% include 'attendance/attendance_activity/export_filter.html'%}
+          <div class="oh-dropdown__filter-footer">
+            <button class="oh-btn oh-btn--secondary oh-btn--small w-100">
+              {% trans "Export" %}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
diff --git a/attendance/templates/cbv/attendance_activity/delete_action.html b/attendance/templates/cbv/attendance_activity/delete_action.html
new file mode 100644
index 000000000..271b30d09
--- /dev/null
+++ b/attendance/templates/cbv/attendance_activity/delete_action.html
@@ -0,0 +1,13 @@
+{% load i18n %}
+
+<form hx-confirm="{% trans 'Are you sure want to delete this attendance?' %}"
+      hx-post="{% url 'attendance-activity-delete' instance.id  %}?instances_ids={{ request.GET.instance_ids }}"
+      onclick="event.stopPropagation()" hx-target="#deleteview">
+      {% csrf_token %}
+      <button type='submit' class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100" title="{% trans 'Remove' %}">
+        <ion-icon name="trash-outline"></ion-icon>
+      </button>
+    </form>
+
+
+
diff --git a/attendance/templates/cbv/attendance_activity/delete_inherit.html b/attendance/templates/cbv/attendance_activity/delete_inherit.html
new file mode 100644
index 000000000..11c13c6fe
--- /dev/null
+++ b/attendance/templates/cbv/attendance_activity/delete_inherit.html
@@ -0,0 +1,8 @@
+<div id="deleteview">
+    {% include 'generic/horilla_list_table.html' %}
+</div>
+{% if request.GET.deleted %}
+<script>
+    $('.reload-record').click();
+</script>
+{% endif %}
\ No newline at end of file
diff --git a/attendance/templates/cbv/attendance_activity/detail_delete_action.html b/attendance/templates/cbv/attendance_activity/detail_delete_action.html
new file mode 100644
index 000000000..039c46121
--- /dev/null
+++ b/attendance/templates/cbv/attendance_activity/detail_delete_action.html
@@ -0,0 +1,20 @@
+{% load i18n %}
+{% if perms.attendance.delete_attendanceactivity %}
+<div class="detail-view" style="width: 100%;" onclick="event.stopPropagation()">
+<button class="oh-btn oh-btn-group oh-btn--secondary"
+    hx-confirm="{% trans 'Are you sure you want to delete ?' %}"
+    hx-post="{% url 'attendance-activity-delete' instance.id %}?instances_ids={{request.GET.instance_ids}}"
+    hx-target="#genericModalBody" style="width:100%;"
+    title="{% trans 'Delete' %}"
+    data-toggle="oh-modal-toggle">
+<ion-icon class="me-1" name="trash-outline"></ion-icon>
+</button>
+</div>
+{% endif %}
+{% if request.GET.deleted %}
+<script>
+    $("#reloadMessagesButton").click()
+    $('.reload-record').click();
+</script>
+{% endif %}
+
diff --git a/attendance/templates/cbv/attendance_activity/filter.html b/attendance/templates/cbv/attendance_activity/filter.html
new file mode 100644
index 000000000..b75a994a9
--- /dev/null
+++ b/attendance/templates/cbv/attendance_activity/filter.html
@@ -0,0 +1,108 @@
+{% load static %} {% load i18n %}
+  <div class="oh-dropdown__filter-body">
+    <div class="oh-accordion">
+      <div class="oh-accordion-header">{% trans "Work Info" %}</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" for="{{form.employee_id.id_for_label}}">{% trans "Employee" %}</label>
+              {{form.employee_id}}
+            </div>
+            <div class="oh-input-group">
+              <label class="oh-label" for="{{form.employee_id__employee_work_info__department_id.id_for_label}}">{% trans "Department" %}</label>
+              {{form.employee_id__employee_work_info__department_id}}
+            </div>
+            <div class="oh-input-group">
+              <label class="oh-label" for="{{form.employee_id__employee_work_info__shift_id.id_for_label}}">{% trans "Shift" %}</label>
+              {{form.employee_id__employee_work_info__shift_id}}
+            </div>
+            <div class="oh-input-group">
+              <label class="oh-label" for="{{form.employee_id__employee_work_info__reporting_manager_id.id_for_label}}">{% trans "Reporting Manager" %}</label>
+              {{form.employee_id__employee_work_info__reporting_manager_id}}
+            </div>
+          </div>
+          <div class="col-sm-12 col-md-12 col-lg-6">
+            <div class="oh-input-group">
+              <label class="oh-label" for="{{form.employee_id__employee_work_info__company_id.id_for_label}}">{% trans "Company" %}</label>
+              {{form.employee_id__employee_work_info__company_id}}
+            </div>
+            <div class="oh-input-group">
+              <label class="oh-label" for="{{form.employee_id__employee_work_info__job_position_id.id_for_label}}">{% trans "Job Position" %}</label>
+              {{form.employee_id__employee_work_info__job_position_id}}
+            </div>
+            <div class="oh-input-group">
+              <label class="oh-label" for="{{form.employee_id__employee_work_info__work_type_id.id_for_label}}">{% trans "Work Type" %}</label>
+              {{form.employee_id__employee_work_info__work_type_id}}
+            </div>
+            <div class="oh-input-group">
+              <label class="oh-label" for="{{form.employee_id__employee_work_info__location.id_for_label}}">{% trans "Work Location" %}</label>
+              {{form.employee_id__employee_work_info__location}}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="oh-accordion">
+      <div class="oh-accordion-header">{% trans "Attendance Activity" %}</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" for="{{form.attendance_date.id_for_label}}">{% trans "Attendance Date" %}</label>
+              {{form.attendance_date}}
+            </div>
+            <div class="oh-input-group">
+              <label class="oh-label" for="{{form.clock_out_date.id_for_label}}">{% trans "Out Date" %}</label>
+              {{form.clock_out_date}}
+            </div>
+          </div>
+          <div class="col-sm-12 col-md-12 col-lg-6">
+            <div class="oh-input-group">
+              <label class="oh-label" for="{{form.clock_in_date.id_for_label}}">{% trans "In Date" %}</label>
+              {{form.clock_in_date}}
+            </div>
+            <div class="oh-input-group">
+              <label class="oh-label" for="{{form.shift_day.id_for_label}}">{% trans "Shift Day" %}</label>
+              {{form.shift_day}}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="oh-accordion">
+      <div class="oh-accordion-header">{% trans "Advanced" %}</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" for="{{form.attendance_date_from.id_for_label}}">{% trans "Attendance From" %}</label>
+              {{form.attendance_date_from}}
+            </div>
+            <div class="oh-input-group">
+              <label class="oh-label" for="{{form.in_from.id_for_label}}">{% trans "In From" %}</label>
+              {{form.in_from}}
+            </div>
+            <div class="oh-input-group">
+              <label class="oh-label" for="{{form.out_from.id_for_label}}">{% trans "Out From" %}</label>
+              {{form.out_from}}
+            </div>
+          </div>
+          <div class="col-sm-12 col-md-12 col-lg-6">
+            <div class="oh-input-group">
+              <label class="oh-label" for="{{form.attendance_date_till.id_for_label}}">{% trans "Attendance Till" %}</label>
+              {{form.attendance_date_till}}
+            </div>
+            <div class="oh-input-group">
+              <label class="oh-label" for="{{form.in_till.id_for_label}}">{% trans "In Till" %}</label>
+              {{form.in_till}}
+            </div>
+            <div class="oh-input-group">
+              <label class="oh-label" for="{{form.out_till.id_for_label}}">{% trans "Out Till" %}</label>
+              {{form.out_till}}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
\ No newline at end of file
diff --git a/attendance/templates/cbv/attendance_request/attendance_request.html b/attendance/templates/cbv/attendance_request/attendance_request.html
new file mode 100644
index 000000000..c638263bf
--- /dev/null
+++ b/attendance/templates/cbv/attendance_request/attendance_request.html
@@ -0,0 +1,138 @@
+
+
+
+{% extends "index.html" %}
+{% load i18n %}{% load static %}
+
+
+{% block content %}
+
+
+
+
+<style>
+.validated--dot{
+  background-color:yellowgreen;
+}
+.not-validated--dot{
+  background-color:rgba(128, 128, 128, 0.482);
+}
+
+.validated-True{
+  border-left: 3.4px solid yellowgreen !important;
+  border-radius: 4px 0 0 4px;
+
+}
+.validated-False {
+
+  border-left: 3.4px solid rgba(128, 128, 128, 0.482) !important;
+  border-radius: 4px 0 0 4px;
+
+  
+}
+.bulk-request--dot {
+
+  background-color:rgb(31 122 220 / 48%);
+
+  
+}
+
+  .diff-cell{
+    background: rgba(255, 166, 0, 0.158);
+  }
+
+</style>
+
+<div hx-get="{% url "attendance-request-nav" %}" hx-trigger="load">
+</div>  
+{% comment %} my_app/templates/my_app/generic/index.html {% endcomment %}
+
+
+
+{% include "generic/components.html" %}
+
+
+<div
+    class="oh-checkpoint-badge mb-2"
+    id="selectedInstances"
+    data-ids="[]"
+    data-clicked=""
+    style="display: none"
+  ></div>
+
+  <div 
+  class="oh-wrapper" 
+  id="listContainer">
+  <div class="animated-background">
+  </div>
+</div>
+
+
+
+<div class="oh-activity-sidebar" id="activitySidebar" style="z-index: 1000">
+    <div class="oh-activity-sidebar__body" id="commentContainer"></div>
+  </div>
+  <script src="{% static 'cbv/attendance/hour_account.js' %}"></script>
+
+  <div
+  class="oh-modal"
+  id="updateAttendanceRequest"
+  role="dialog"
+  aria-labelledby="updateAttendanceRequest"
+  aria-hidden="true"
+>
+  <div class="oh-modal__dialog">
+    <div class="oh-modal__dialog-header">
+      <h2 class="oh-modal__dialog-title" id="addEmployeeModalLabel">
+        {% trans "Update Attendances Request" %}
+      </h2>
+      <button class="oh-modal__close" aria-label="Close">
+        <ion-icon name="close-outline"></ion-icon>
+      </button>
+    </div>
+    <div
+      class="oh-modal__dialog-body"
+      id="updateAttendanceRequestModalBody"
+    ></div>
+  </div>
+</div>
+
+<div
+  class="oh-modal"
+  id="validateAttendanceRequest"
+  role="dialog"
+  aria-labelledby="validateAttendanceRequest"
+  aria-hidden="true"
+  style="z-index: 35;"
+>
+  <div class="oh-modal__dialog">
+    <div class="oh-modal__dialog-header">
+      <h2 class="oh-modal__dialog-title" id="addEmployeeModalLabel">
+        {% trans "Validate Attendances Request" %}
+      </h2>
+      <button class="oh-modal__close" aria-label="Close">
+        <ion-icon name="close-outline"></ion-icon>
+      </button>
+    </div>
+    <div
+      class="oh-modal__dialog-body  oh-modal__dialog-body oh-modal__dialog-relative"
+      id="validateAttendanceRequestModalBody"
+    ></div>
+  </div>
+</div>
+
+<div
+  class="oh-modal"
+  id="genericModalEdit"
+  role="dialog"
+  aria-labelledby="genericModalEdit"
+  aria-hidden="true"
+  style="z-index: 45;"
+>
+  <div class="oh-modal__dialog" id="genericModalEditBody"></div>
+</div>
+
+
+ 
+ 
+{% endblock content %}
\ No newline at end of file
diff --git a/attendance/templates/cbv/attendance_request/attendance_request_tab.html b/attendance/templates/cbv/attendance_request/attendance_request_tab.html
new file mode 100644
index 000000000..432f9b031
--- /dev/null
+++ b/attendance/templates/cbv/attendance_request/attendance_request_tab.html
@@ -0,0 +1,822 @@
+{% load static i18n generic_template_filters %}
+<div id="{{ view_id|safe }}">
+  <div
+    class="oh-modal"
+    id="bulkUpdateModal{{view_id|safe}}"
+    role="dialog"
+    aria-labelledby="bulkUpdateModal{{view_id|safe}}"
+    aria-hidden="true"
+  >
+    <div class="oh-modal__dialog" id="bulkUpdateModalBody{{view_id|safe}}"></div>
+  </div>
+  {% include "generic/export_fields_modal.html" %}
+  <script>
+    if (!$(".HTV").length) {
+      $("#reloadMessagesButton").click()
+    }
+  </script>
+  <button class="reload-record" id="{{view_id|safe}}Reload" hidden hx-get="{{request.path}}?{{saved_filters.urlencode}}" hx-target="#{{view_id|safe}}" hx-swap="outerHTML">
+  </button>
+  {% if show_filter_tags %} {% include "generic/filter_tags.html" %} {% endif %}
+  {% if queryset|length %}
+  {% if bulk_select_option %}
+  {% include "generic/quick_actions.html" %}
+  {% endif %}
+
+  
+  <div class="oh-table_sticky--wrapper">
+    <div class="oh-sticky-dropdown--header" style="z-index: 13;">
+      <div class="oh-dropdown" x-data="{ open: false }">
+        <button class="oh-sticky-dropdown_btn" @click="open = !open">
+          <ion-icon
+            name="ellipsis-vertical-sharp"
+            role="img"
+            class="md hydrated"
+            aria-label="ellipsis vertical sharp"
+          ></ion-icon>
+        </button>
+        <div
+          class="oh-dropdown__menu oh-sticky-table_dropdown"
+          x-show="open"
+          @click.outside="
+            open = false
+            $($el).closest('.oh-table_sticky--wrapper').parent().find('.reload-record').click();
+          "
+        >
+          {{ toggle_form.as_list }}
+        </div>
+      </div>
+    </div>
+
+    <div class="table-wrapper">
+      <table class="fixed-table">
+        <thead>
+          <tr>
+            {% if bulk_select_option %}
+            <th>
+              <div class="centered-div" align="center">
+                <input
+                  type="checkbox"
+                  class="oh-input oh-input__checkbox bulk-list-table-row"
+                  onchange="
+                  $(this).closest('.fixed-table').find('.list-table-row').prop('checked',$(this).is(':checked')).change();
+                  $(document).ready(function () {
+                    reloadSelectedCount($('#count_{{view_id|safe}}'),'{{selected_instances_key_id}}');
+                    reloadSelectedCount($('.count_{{view_id|safe}}'),'{{selected_instances_key_id}}');
+                  });
+                  "
+                  title="Select All"
+                />
+              </div>
+            </th>
+            {% endif %}
+            {% for cell in columns %}
+            {% with cell_attr=header_attrs|get_item:cell.1 %}
+            <th {% if cell.2 and not cell_attr %}style="width:220px!important;"{% endif %} {{cell_attr|safe}} id="{{view_id}}-{{ forloop.counter }}-{{cell.1}}-header">
+              <div 
+                {% for sort_map in sortby_mapping %}
+                {% if sort_map.0 == cell.0 %}
+                hx-get="{{search_url}}?{{saved_filters.urlencode}}&{{sortby_key}}={{sort_map.1}}&filter_applied=on"
+                hx-target="#{{view_id}}"
+                class="
+                  {% if request.sort_order == "asc" and request.sort_key == sort_map.1 %}
+                    arrow-up
+                    {% elif request.sort_order == "desc" and request.sort_key == sort_map.1 %}
+                    arrow-down
+                    {% else %}
+                    arrow-up-down
+                  {% endif %}
+                  "
+                {% endif %}
+                {% endfor %}
+                >
+                  {{cell.0}}
+                </div>
+            </th>
+            {% endwith %}
+            {% endfor %}
+            {% if options or option_method%}
+            <th {{header_attrs.option|safe}}>
+              {% trans "Options" %}
+            </th>
+            {% endif %}
+            {% if actions or action_method %}
+            <th class="lastTh" {{header_attrs.action|safe}}>
+              {% trans "Actions" %}
+            </th>
+            {% endif %}
+          </tr>
+        </thead>
+        <tbody>
+          {% for instance in queryset %}
+          <tr 
+           data-instance-id="{{instance.id}}"
+           {{row_attrs|format:instance|safe}}
+          >
+            {% if bulk_select_option %}
+            <td class="p-0"onclick="event.stopPropagation()">
+              <div class="{{row_status_class|format:instance|safe}} centered-div" align="center">
+                <input
+                  type="checkbox"
+                  data-view-id="{{view_id|safe}}"
+                  class="oh-input oh-input__checkbox list-table-row"
+                  onchange="
+                  element = $(this)
+                  highlightRow(element);
+                  $(document).ready(function () {
+                    if (!element.is(':checked')) {
+                      removeId(element)
+                    }
+                    reloadSelectedCount($('#count_{{view_id|safe}}'),'{{selected_instances_key_id}}');
+                    reloadSelectedCount($('.count_{{view_id|safe}}'),'{{selected_instances_key_id}}');
+                  });
+                  "
+                  title="{% trans "Select Row" %}"
+                  value = "{{instance.pk}}"
+                />
+              </div>
+            </td>
+            {% endif %}
+            {% for cell in columns %}
+            {% with attribute=cell.1 index=forloop.counter %} 
+            <td class="{% if cell.1 == "attendance_date" %}
+                        {% if 'attendance_date' in instance.requested_fields or instance.request_type == 'create_request' %}
+                    diff-cell
+                {% endif %}
+                dateformat_changer
+                {% elif cell.1 == "attendance_day" %}
+                {% if 'attendance_day' in instance.requested_fields or instance.request_type == 'create_request' %}
+                    diff-cell
+                {% endif %}
+            {% elif cell.1 == "attendance_clock_in" %}
+                {% if 'attendance_clock_in' in instance.requested_fields or instance.request_type == 'create_request' %}
+                    diff-cell
+                {% endif %}
+                timeformat_changer
+            {% elif cell.1 == "attendance_clock_in_date" %}
+                {% if 'attendance_clock_in_date' in instance.requested_fields or instance.request_type == 'create_request' %}
+                    diff-cell
+                {% endif %}
+                dateformat_changer
+            {% elif cell.1 == "attendance_clock_out" %}
+                {% if 'attendance_clock_out' in instance.requested_fields or instance.request_type == 'create_request' %}
+                    diff-cell
+                {% endif %}
+                timeformat_changer
+            {% elif cell.1 == "attendance_clock_out_date" %}
+                {% if 'attendance_clock_out_date' in instance.requested_fields or instance.request_type == 'create_request' %}
+                    diff-cell
+                {% endif %}
+                dateformat_changer
+            {% elif cell.1 == "shift_id" %}
+                {% if 'shift_id' in instance.requested_fields or instance.request_type == 'create_request' %}
+                    diff-cell
+                {% endif %}
+            {% elif cell.1 == "work_type_id" %}
+                {% if 'work_type_id' in instance.requested_fields or instance.request_type == 'create_request' %}
+                    diff-cell
+                {% endif %}
+            {% elif cell.1 == "minimum_hour" %}
+                {% if 'minimum_hour' in instance.requested_fields or instance.request_type == 'create_request' %}
+                    diff-cell
+                {% endif %}
+            {% elif cell.1 == "attendance_worked_hour" %}
+                {% if 'attendance_worked_hour' in instance.requested_fields or instance.request_type == 'create_request' %}
+                    diff-cell
+                {% endif %}
+            {% elif cell.1 == "attendance_overtime" %}
+                {% if 'attendance_overtime' in instance.requested_fields or instance.request_type == 'create_request' %}
+                    diff-cell
+                {% endif %}
+            {% endif %}">
+              {% if not cell.2 %}
+              {{instance|getattribute:attribute|selected_format:request.user.employee_get.employee_work_info.company_id|safe}}
+              {% else %}
+              <div class="oh-profile oh-profile--md">
+                <div class="oh-profile__avatar mr-1">
+                  <img
+                    src="{{instance|getattribute:cell.2}}"
+                    class="oh-profile__image"
+                  />
+                </div>
+                <span class="oh-profile__name oh-text--dark">
+                  {{instance|getattribute:attribute}}
+                </span>
+              </div>
+              {% endif %}
+            </td>
+            {% endwith %}
+            {% endfor %}
+            {% if options or option_method %}
+            <td onclick="event.stopPropagation()">
+              {% if not option_method %}
+              <div class="oh-btn-group">
+                {% for option in options %}
+                  {% if option.accessibility|accessibility:instance %}
+                  <a
+                    href="#"
+                    title="{{option.option|safe}}"
+                    {{option.attrs|format:instance|safe}}
+                  >
+                    <ion-icon name="{{option.icon}}"></ion-icon>
+                  </a>
+                  {% endif %}
+                {% endfor %}
+              </div>
+              {% else %} {{instance|getattribute:option_method|safe}} {% endif %}
+            </td>
+            {% endif %}
+            {% if actions or action_method %}
+            <td class="lastTd" onclick="event.stopPropagation()">
+              {% if not action_method %}
+              <div class="oh-btn-group">
+                {% for action in actions %}
+                  {% if action.accessibility|accessibility:instance %}
+                  <button
+                    href="#"
+                    title="{{action.action|safe}}"
+                    {{action.attrs|format:instance|safe}}
+                  >
+                    <ion-icon name="{{action.icon}}"></ion-icon>
+              </button>
+                  {% endif %}
+                {% endfor %}
+              </div>
+              {% else %} {{instance|getattribute:action_method|safe}} {% endif %}
+            </td>
+            {% endif %}
+          </tr>
+          {% endfor %}
+        </tbody>
+      </table>
+    </div>
+  </div>
+  {% if queryset.paginator.count %}
+  <div class="oh-pagination">
+    <span
+      class="oh-pagination__page"
+      data-toggle="modal"
+      data-target="#addEmployeeModal"
+      >{% trans "Page" %} {{queryset.number}} {% trans "of" %}
+      {{queryset.paginator.num_pages}}</span
+    >
+
+    <nav class="oh-pagination__nav">
+      <div class="oh-pagination__input-container me-3">
+        <span class="oh-pagination__label me-1">{% trans "Page" %}</span>
+
+        <input
+          type="number"
+          class="oh-pagination__input"
+          value="{{queryset.number}}"
+          min="1"
+          name="page"
+          hx-get="{{search_url}}?{{saved_filters.urlencode}}&filter_applied=on"
+          hx-swap="outerHTML"
+          hx-target="#{{view_id|safe}}"
+        />
+        <span class="oh-pagination__label"
+          >{% trans "of" %} {{queryset.paginator.num_pages}}</span
+        >
+      </div>
+
+      <ul class="oh-pagination__items" data-search-url="{{search_url}}">
+        {% if queryset.has_previous %}
+        <li class="oh-pagination__item oh-pagination__item--wide">
+          <a
+            hx-get="{{search_url}}?{{saved_filters.urlencode}}&page=1&filter_applied=on"
+            hx-swap="outerHTML"
+            hx-target="#{{view_id|safe}}"
+            class="oh-pagination__link"
+            >{% trans "First" %}</a
+          >
+        </li>
+        <li class="oh-pagination__item oh-pagination__item--wide">
+          <a
+            hx-get="{{search_url}}?{{saved_filters.urlencode}}&page={{ queryset.previous_page_number }}&filter_applied=on"
+            hx-swap="outerHTML"
+            hx-target="#{{view_id|safe}}"
+            class="oh-pagination__link"
+            >{% trans "Previous" %}</a
+          >
+        </li>
+        {% endif %} {% if queryset.has_next %}
+        <li class="oh-pagination__item oh-pagination__item--wide">
+          <a
+            hx-get="{{search_url}}?{{saved_filters.urlencode}}&page={{ queryset.next_page_number }}&filter_applied=on"
+            hx-swap="outerHTML"
+            hx-target="#{{view_id|safe}}"
+            class="oh-pagination__link"
+            >{% trans "Next" %}</a
+          >
+        </li>
+        <li class="oh-pagination__item oh-pagination__item--wide">
+          <a
+            hx-get="{{search_url}}?{{saved_filters.urlencode}}&page={{ queryset.paginator.num_pages }}&filter_applied=on"
+            hx-swap="outerHTML"
+            hx-target="#{{view_id|safe}}"
+            class="oh-pagination__link"
+            >{% trans "Last" %}</a
+          >
+        </li>
+        {% endif %}
+      </ul>
+    </nav>
+  </div>
+  <script>
+    reloadSelectedCount($('#count_{{view_id|safe}}'),'{{selected_instances_key_id}}');
+    reloadSelectedCount($('.count_{{view_id|safe}}'),'{{selected_instances_key_id}}');
+    var tabId = $("#{{view_id}}").closest(".oh-tabs__content").attr("id");
+    var badge = $(`#badge-${tabId}`);
+    var count = "{{queryset.paginator.count}}";
+    var label = badge.attr("data-badge-label") || "";
+    var title = count + " " + label;
+    badge.html(count);
+    badge.attr("title", title);
+  </script>
+  {% if bulk_select_option %}
+  <script>
+    selectSelected("#{{view_id|safe}}",'{{selected_instances_key_id}}')
+  </script>
+  {% endif %} 
+  {% endif %}
+  <script>
+    $("ul[data-search-url] a").click(function (e) { 
+      e.preventDefault();
+      const url =  $(this).attr("hx-get")
+      const $urlObj = $('<a>', { href: url });
+      const searchParams = new URLSearchParams($urlObj[0].search);
+
+      let lastPageParam = null;
+      let lastPageValue = 1;
+
+      searchParams.forEach((value, param) => {
+        if (param === "page") {
+          lastPageParam = param;
+          lastPageValue = value.split(",").pop();
+        }
+      });
+
+      form = $(`form[hx-get="{{search_url}}"]`)
+      pageInput = form.find("#pageInput")
+      pageInput.attr("name",lastPageParam)
+      pageInput.attr("value",lastPageValue)
+
+    });
+  </script>
+  <script>
+    $(document).ready(function () {
+     attrAction = `{{header_attrs.action|safe}}`
+      if (!attrAction){
+        const widths = [];
+        let thWidth = 0;
+        $('.lastTd').each(function () {
+         widths.push(this.scrollWidth);
+          $(this).css('overflow', 'hidden');
+        });
+            widths.sort().reverse();
+            if (widths.length) {
+              thWidth = widths[0];
+            }
+            if (!thWidth) {
+              thWidth = 180
+            }
+            $('.lastTh').css("width", `${thWidth}px`);
+         }
+    });
+  </script>
+  {% else %}
+   {% if row_status_indications %}
+    <div class="d-flex flex-row-reverse">
+      {% for indication in row_status_indications %}
+      <span class="m-1" style="cursor: pointer;margin-left: 7px;" {{indication.2|safe}}>
+        <span class="oh-dot oh-dot--small me-1 {{indication.0}}"></span>
+        {{indication.1}}
+      </span>
+      {% endfor %}
+    </div>
+    {% endif %}
+    <div class="oh-wrapper" align="center" style="margin-top: 7vh; margin-bottom:7vh;">
+      <div align="center">
+        <img src="{% static "images/ui/search.svg" %}" class="oh-404__image" alt="Page not found. 404.">
+        <h1 class="oh-404__title">{% trans "No Records found" %}</h1>
+        <p class="oh-404__subtitle">
+          {% trans "No records found." %}
+        </p>
+      </div>
+    </div>
+  {% endif %}
+</div>
+
+{% comment %}   
+  {% load static i18n generic_template_filters %}
+<div id="{{view_id|safe}}">
+  <div
+    class="oh-modal"
+    id="bulkUpdateModal{{view_id|safe}}"
+    role="dialog"
+    aria-labelledby="bulkUpdateModal{{view_id|safe}}"
+    aria-hidden="true"
+  >
+    <div class="oh-modal__dialog" id="bulkUpdateModalBody{{view_id|safe}}"></div>
+  </div>
+
+  {% include "generic/export_fields_modal.html" %}
+  <script>
+    if (!$(".HTV").length) {
+      $("#reloadMessagesButton").click()
+    }
+  </script>
+  <button class="reload-record" hidden hx-get="{{request.path}}?{{saved_filters.urlencode}}" hx-target="#{{view_id|safe}}" hx-swap="outerHTML">
+  </button>
+  {% if show_filter_tags %} {% include "generic/filter_tags.html" %} {% endif %}
+  {% if queryset|length %}
+  {% if bulk_select_option %}
+  {% include "generic/quick_actions.html" %}
+  {% endif %}
+
+  
+  <div class="oh-table_sticky--wrapper">
+    <div class="oh-sticky-dropdown--header" style="z-index:13;">
+      <div class="oh-dropdown" x-data="{open: false}">
+        <button class="oh-sticky-dropdown_btn" @click="open = !open">
+          <ion-icon
+            name="ellipsis-vertical-sharp"
+            role="img"
+            class="md hydrated"
+            aria-label="ellipsis vertical sharp"
+          ></ion-icon>
+        </button>
+        <div
+          class="oh-dropdown__menu oh-sticky-table_dropdown"
+          x-show="open"
+          @click.outside="
+            open = false
+            $($el).closest('.oh-table_sticky--wrapper').parent().find('.reload-record').click();
+          "
+        >
+          {{toggle_form.as_list}}
+        </div>
+      </div>
+    </div>
+    <div class="oh-sticky-table">
+      <div class="oh-sticky-table__table oh-table--sortable" style="
+        width: 100%;
+        width: -moz-available;          /* WebKit-based browsers will ignore this. */
+        width: -webkit-fill-available;  /* Mozilla-based browsers will ignore this. */
+        width: fill-available;
+      ">
+        <div class="oh-sticky-table__thead">
+          <div class="oh-sticky-table__tr">
+            {% if bulk_select_option %}
+            <div
+              class="oh-sticky-table__th"
+              style="width: 10px; z-index: 12 !important"
+            >
+              <div class="centered-div" align="center">
+                <input
+                  type="checkbox"
+                  class="oh-input oh-input__checkbox bulk-list-table-row"
+                  onchange="
+                  $(this).closest('.oh-sticky-table').find('.list-table-row').prop('checked',$(this).is(':checked')).change();
+                  $(document).ready(function () {
+                    reloadSelectedCount($('#count_{{view_id|safe}}'),'{{selected_instances_key_id}}');
+                    reloadSelectedCount($('.count_{{view_id|safe}}'));
+                  });
+                  "
+                  title="Select All"
+                />
+              </div>
+            </div>
+            {% endif %} {% for cell in columns %}
+            <div 
+              
+              class="oh-sticky-table__th"
+              style="z-index: 11;width:100px;">
+              <div 
+              {% for sort_map in sortby_mapping %}
+              {% if sort_map.0 == cell.0 %}
+              hx-get="{{search_url}}?{{saved_filters.urlencode}}&{{sortby_key}}={{sort_map.1}}&filter_applied=on"
+              hx-target="#{{view_id}}"
+              class="
+                {% if request.sort_order == "asc" and request.sort_key == sort_map.1 %}
+                  arrow-up
+                  {% elif request.sort_order == "desc" and request.sort_key == sort_map.1 %}
+                  arrow-down
+                  {% else %}
+                  arrow-up-down
+                {% endif %}
+                "
+              {% endif %}
+              {% endfor %}
+                
+                style="width: 200px;"
+              >
+                {{cell.0}}
+              </div>
+            </div>
+            {% endfor %} {% if options or option_method%}
+            <div class="oh-sticky-table__th" >
+              <div style="width: 200px;">
+                {% trans "Options" %}
+              </div>
+            </div>
+            {% endif %} {% if actions or action_method %}
+            <div class="oh-sticky-table__th oh-sticky-table__right" style="z-index:12 !important;">
+              <div style="width: 200px;">
+                {% trans "Actions" %}
+              </div>
+            </div>
+            {% endif %}
+          </div>
+        </div>
+        <div class="oh-sticky-table__tbody">
+          {% for instance in queryset %}
+          <div
+            class="oh-sticky-table__tr oh-permission-table__tr oh-permission-table--collapsed"
+            draggable="true"
+            data-instance-id="{{instance.id}}"
+            {{row_attrs|format:instance|safe}}
+          >
+            {% if bulk_select_option %}
+            <div
+              class="oh-sticky-table__sd {{row_status_class|format:instance|safe}}"
+              onclick="event.stopPropagation()"
+              style="width: 10px; z-index: 11 !important"
+            >
+              <div class="centered-div" align="center">
+                <input
+                  type="checkbox"
+                  class="oh-input oh-input__checkbox list-table-row"
+                  data-view-id="{{view_id|safe}}"
+                  onchange="
+                  element = $(this)
+                  highlightRow(element);
+                  $(document).ready(function () {
+                    if (!element.is(':checked')) {
+                      removeId(element)
+                    }
+                    reloadSelectedCount($('#count_{{view_id|safe}}'),'{{selected_instances_key_id}}');
+                    reloadSelectedCount($('.count_{{view_id|safe}}'));
+                  });
+                  "
+                  value = "{{instance.pk}}"
+                />
+              </div>
+            </div>
+            {% endif %} {% for cell in columns %} 
+            {% with attribute=cell.1 index=forloop.counter %} {% if not cell.2 %}
+
+            <div class="{% if index == 1 %}
+            oh-sticky-table__sd
+        {% else %}
+            oh-sticky-table__td
+            {% if cell.1 == "attendance_date" %}
+                {% if 'attendance_date' in instance.requested_fields or instance.request_type == 'create_request' %}
+                    diff-cell
+                {% endif %}
+                dateformat_changer
+            {% elif cell.1 == "attendance_day" %}
+                {% if 'attendance_day' in instance.requested_fields or instance.request_type == 'create_request' %}
+                    diff-cell
+                {% endif %}
+            {% elif cell.1 == "attendance_clock_in" %}
+                {% if 'attendance_clock_in' in instance.requested_fields or instance.request_type == 'create_request' %}
+                    diff-cell
+                {% endif %}
+                timeformat_changer
+            {% elif cell.1 == "attendance_clock_in_date" %}
+                {% if 'attendance_clock_in_date' in instance.requested_fields or instance.request_type == 'create_request' %}
+                    diff-cell
+                {% endif %}
+                dateformat_changer
+            {% elif cell.1 == "attendance_clock_out" %}
+                {% if 'attendance_clock_out' in instance.requested_fields or instance.request_type == 'create_request' %}
+                    diff-cell
+                {% endif %}
+                timeformat_changer
+            {% elif cell.1 == "attendance_clock_out_date" %}
+                {% if 'attendance_clock_out_date' in instance.requested_fields or instance.request_type == 'create_request' %}
+                    diff-cell
+                {% endif %}
+                dateformat_changer
+            {% elif cell.1 == "shift_id" %}
+                {% if 'shift_id' in instance.requested_fields or instance.request_type == 'create_request' %}
+                    diff-cell
+                {% endif %}
+            {% elif cell.1 == "work_type_id" %}
+                {% if 'work_type_id' in instance.requested_fields or instance.request_type == 'create_request' %}
+                    diff-cell
+                {% endif %}
+            {% elif cell.1 == "minimum_hour" %}
+                {% if 'minimum_hour' in instance.requested_fields or instance.request_type == 'create_request' %}
+                    diff-cell
+                {% endif %}
+            {% elif cell.1 == "attendance_worked_hour" %}
+                {% if 'attendance_worked_hour' in instance.requested_fields or instance.request_type == 'create_request' %}
+                    diff-cell
+                {% endif %}
+            {% elif cell.1 == "attendance_overtime" %}
+                {% if 'attendance_overtime' in instance.requested_fields or instance.request_type == 'create_request' %}
+                    diff-cell
+                {% endif %}
+            {% endif %}
+        {% endif %}">
+              {{instance|getattribute:attribute|selected_format:request.user.employee_get.employee_work_info.company_id|safe}}
+            </div>
+            {% else %}
+            <div
+              class="{% if index == 1 %} oh-sticky-table__sd {% else %} oh-sticky-table__td{% endif %}"
+            >
+              <div class="oh-profile oh-profile--md">
+                <div class="oh-profile__avatar mr-1">
+                  <img
+                    src="{{instance|getattribute:cell.2}}"
+                    class="oh-profile__image"
+                  />
+                </div>
+                <span class="oh-profile__name oh-text--dark">
+                  {{instance|getattribute:attribute}}
+                </span>
+              </div>
+            </div>
+            {% endif %} {% endwith %} {% endfor %} {% if options or option_method %}
+            <div class="oh-sticky-table__td oh-permission-table--toggle">
+              {% if not option_method %}
+              <div class="oh-btn-group">
+                {% for option in options %}
+                  {% if option.accessibility|accessibility:instance %}
+                  <a
+                    href="#"
+                    title="{{option.option|safe}}"
+                    {{option.attrs|format:instance|safe}}
+                  >
+                    <ion-icon name="{{option.icon}}"></ion-icon>
+                  </a>
+                  {% endif %}
+                {% endfor %}
+              </div>
+              {% else %} {{instance|getattribute:option_method|safe}} {% endif %}
+            </div>
+            {% endif %} {% if actions or action_method %}
+            <div class="oh-sticky-table__td oh-sticky-table__right">
+              {% if not action_method %}
+              <div class="oh-btn-group">
+                {% for action in actions %}
+                  {% if action.accessibility|accessibility:instance %}
+                  <a
+                    href="#"
+                    title="{{action.action|safe}}"
+                    {{action.attrs|format:instance|safe}}
+                  >
+                    <ion-icon name="{{action.icon}}"></ion-icon>
+                  </a>
+                  {% endif %}
+                {% endfor %}
+              </div>
+              {% else %} {{instance|getattribute:action_method|safe}} {% endif %}
+            </div>
+            {% endif %}
+          </div>
+          {% endfor %}
+        </div>
+      </div>
+    </div>
+  </div>
+  {% if queryset.paginator.count %}
+  <div class="oh-pagination">
+    <span
+      class="oh-pagination__page"
+      data-toggle="modal"
+      data-target="#addEmployeeModal"
+      >{% trans "Page" %} {{queryset.number}} {% trans "of" %}
+      {{queryset.paginator.num_pages}}</span
+    >
+
+    <nav class="oh-pagination__nav">
+      <div class="oh-pagination__input-container me-3">
+        <span class="oh-pagination__label me-1">{% trans "Page" %}</span>
+
+        <input
+          type="number"
+          class="oh-pagination__input"
+          value="{{queryset.number}}"
+          min="1"
+          name="page"
+          hx-get="{{search_url}}?{{saved_filters.urlencode}}&filter_applied=on"
+          hx-swap="outerHTML"
+          hx-target="#{{view_id|safe}}"
+        />
+        <span class="oh-pagination__label"
+          >{% trans "of" %} {{queryset.paginator.num_pages}}</span
+        >
+      </div>
+
+      <ul class="oh-pagination__items" data-search-url="{{search_url}}">
+        {% if queryset.has_previous %}
+        <li class="oh-pagination__item oh-pagination__item--wide">
+          <a
+            hx-get="{{search_url}}?{{saved_filters.urlencode}}&page=1&filter_applied=on"
+            hx-swap="outerHTML"
+            hx-target="#{{view_id|safe}}"
+            class="oh-pagination__link"
+            >{% trans "First" %}</a
+          >
+        </li>
+        <li class="oh-pagination__item oh-pagination__item--wide">
+          <a
+            hx-get="{{search_url}}?{{saved_filters.urlencode}}&page={{ queryset.previous_page_number }}&filter_applied=on"
+            hx-swap="outerHTML"
+            hx-target="#{{view_id|safe}}"
+            class="oh-pagination__link"
+            >{% trans "Previous" %}</a
+          >
+        </li>
+        {% endif %} {% if queryset.has_next %}
+        <li class="oh-pagination__item oh-pagination__item--wide">
+          <a
+            hx-get="{{search_url}}?{{saved_filters.urlencode}}&page={{ queryset.next_page_number }}&filter_applied=on"
+            hx-swap="outerHTML"
+            hx-target="#{{view_id|safe}}"
+            class="oh-pagination__link"
+            >{% trans "Next" %}</a
+          >
+        </li>
+        <li class="oh-pagination__item oh-pagination__item--wide">
+          <a
+            hx-get="{{search_url}}?{{saved_filters.urlencode}}&page={{ queryset.paginator.num_pages }}&filter_applied=on"
+            hx-swap="outerHTML"
+            hx-target="#{{view_id|safe}}"
+            class="oh-pagination__link"
+            >{% trans "Last" %}</a
+          >
+        </li>
+        {% endif %}
+      </ul>
+    </nav>
+  </div>
+  <script>
+    reloadSelectedCount($('#count_{{view_id|safe}}'),'{{selected_instances_key_id}}');
+    reloadSelectedCount($('.count_{{view_id|safe}}'));
+    var tabId = $("#{{view_id}}").closest(".oh-tabs__content").attr("id");
+    let badge = $(`#badge-${tabId}`);
+    let count = "{{queryset.paginator.count}}";
+    let label = badge.attr("data-badge-label") || "";
+    let title = count + " " + label;
+    badge.html(count);
+    badge.attr("title", title);
+  </script>
+  {% if bulk_select_option %}
+  <script>
+    selectSelected("#{{view_id|safe}}",'{{selected_instances_key_id}}')
+  </script>
+  {% endif %} 
+  {% endif %}
+  <script>
+    $("ul[data-search-url] a").click(function (e) { 
+      e.preventDefault();
+      const url =  $(this).attr("hx-get")
+      const $urlObj = $('<a>', { href: url });
+      const searchParams = new URLSearchParams($urlObj[0].search);
+
+      let lastPageParam = null;
+      let lastPageValue = 1;
+
+      searchParams.forEach((value, param) => {
+        if (param === "page") {
+          lastPageParam = param;
+          lastPageValue = value.split(",").pop();
+        }
+      });
+
+      form = $(`form[hx-get="{{search_url}}"]`)
+      pageInput = form.find("#pageInput")
+      pageInput.attr("name",lastPageParam)
+      pageInput.attr("value",lastPageValue)
+
+    });
+  </script>
+  {% else %}
+   {% if row_status_indications %}
+    <div class="d-flex flex-row-reverse">
+      {% for indication in row_status_indications %}
+      <span class="m-1" style="cursor: pointer;margin-left: 7px;" {{indication.2|safe}}>
+        <span class="oh-dot oh-dot--small me-1 {{indication.0}}"></span>
+        {{indication.1}}
+      </span>
+      {% endfor %}
+    </div>
+    {% endif %}
+  <div class="oh-wrapper" align="center" style="margin-top: 7vh; margin-bottom:7vh;">
+    <div align="center">
+      <img src="{% static "images/ui/search.svg" %}" class="oh-404__image" alt="Page not found. 404.">
+      <h1 class="oh-404__title">{% trans "No Records found" %}</h1>
+      <p class="oh-404__subtitle">
+        {% trans "No records found." %}
+      </p>
+    </div>
+  </div>
+  {% endif %}
+</div> {% endcomment %}
+
+
diff --git a/attendance/templates/cbv/attendance_request/comment.html b/attendance/templates/cbv/attendance_request/comment.html
new file mode 100644
index 000000000..011325a1b
--- /dev/null
+++ b/attendance/templates/cbv/attendance_request/comment.html
@@ -0,0 +1,7 @@
+{% load basefilters %}{% load i18n %}
+<div  onclick="event.stopPropagation();" @click="open = !open">
+    <button type="button" hx-get="{% url 'attendance-request-view-comment' instance.id %}?{{pd}}" hx-target="#commentContainer"
+      data-target = '#activitySidebar' title='{% trans "Add / View Comment" %}'  class="oh-btn oh-btn--light oh-activity-sidebar__open w-100" style="flex: 1 0 auto; width:20px;height: 40.68px; padding: 0;" onclick="event.stopPropagation()">
+      <ion-icon name="newspaper-outline" role="img" class="md hydrated" aria-label="newspaper outline"></ion-icon>
+    </button>
+  </div>
\ No newline at end of file
diff --git a/attendance/templates/cbv/attendance_request/request_actions.html b/attendance/templates/cbv/attendance_request/request_actions.html
new file mode 100644
index 000000000..2bca2c385
--- /dev/null
+++ b/attendance/templates/cbv/attendance_request/request_actions.html
@@ -0,0 +1,18 @@
+{% load i18n %}
+<div class="oh-btn-group">
+    <a data-toggle="oh-modal-toggle"
+     data-target="#validateAttendanceRequest" 
+     hx-get="{% url 'validate-attendance-request' instance.id %}" hx-trigger="click" hx-target="#validateAttendanceRequestModalBody"
+      class="oh-btn oh-btn--light-bkg w-100"
+      title="{% trans 'View' %}"><ion-icon name="eye-outline" role="img"></ion-icon></a>
+
+    <a
+      type="submit"
+      class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100"
+      title="{% trans 'Cancel / Reject' %}"
+      onclick="event.stopPropagation();return confirm('{% trans "Are you sure want to cancel the request?" %}');"
+      href="{% url 'cancel-validate-attendance-request' instance.id %}"
+    >
+    <ion-icon name="close-circle-outline"></ion-icon>
+    </a>
+  </div>
\ No newline at end of file
diff --git a/attendance/templates/cbv/attendance_request/status.html b/attendance/templates/cbv/attendance_request/status.html
new file mode 100644
index 000000000..c8b8f31e0
--- /dev/null
+++ b/attendance/templates/cbv/attendance_request/status.html
@@ -0,0 +1,11 @@
+{% load i18n %}
+{% if instance.request_type == "create_request" %}
+  <span class="oh-dot oh-dot--small me-1" style="background-color: orange;"></span> 
+  <span style="color: orange;">{% trans "Created Request" %}</span>
+{% elif instance.request_type == "update_request" %}
+  <span class="oh-dot oh-dot--small me-1" style="background-color: blue;"></span> 
+  <span style="color: blue;">{% trans "Update Request" %}</span>
+{% elif instance.request_type == "revalidate_request" %}
+  <span class="oh-dot oh-dot--small me-1" style="background-color: yellow;"></span> 
+  <span style="color: yellow;">{% trans "Re-validate Request" %}</span>
+{% endif %}
diff --git a/attendance/templates/cbv/attendances/attendance_actions.html b/attendance/templates/cbv/attendances/attendance_actions.html
new file mode 100644
index 000000000..53a5312a6
--- /dev/null
+++ b/attendance/templates/cbv/attendances/attendance_actions.html
@@ -0,0 +1,35 @@
+{% load i18n %}
+{% load static %}
+{% load basefilters %}
+
+<div class="oh-btn-group">
+    {% if perms.instance.change_attendance or request.user|is_reportingmanager %}
+    <a
+        hx-get="{% url 'attendance-update' instance.id %}?instance_ids={{instance.ordered_ids}}"
+        onclick="event.stopPropagation()"
+        hx-target="#genericModalBody"
+        hx-swap="innerHTML"
+        data-toggle="oh-modal-toggle"
+        data-target="#genericModal"
+        class="oh-btn oh-btn--light-bkg w-50"
+        title="{% trans 'Edit' %}"
+    >
+        <ion-icon name="create-outline"></ion-icon>
+    </a>
+    {% endif %} 
+    {% if perms.instance.delete_attendance or request.user|is_reportingmanager %}
+    <form action="{% url 'attendance-delete' instance.id %}"
+          onclick="event.stopPropagation()"
+          onsubmit="return confirm('{% trans "Are you sure want to delete this attendance?" %}')"
+          hx-target="#tab_contents" method='post' class='w-50'>
+        {% csrf_token %}
+        <button
+            type="submit"
+            class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100"
+            title="{% trans 'Remove' %}"
+        >
+            <ion-icon name="trash-outline"></ion-icon>
+        </button>
+    </form>
+    {% endif %}
+</div>
diff --git a/attendance/templates/cbv/attendances/attendance_view_page.html b/attendance/templates/cbv/attendances/attendance_view_page.html
new file mode 100644
index 000000000..62e5feff6
--- /dev/null
+++ b/attendance/templates/cbv/attendances/attendance_view_page.html
@@ -0,0 +1,86 @@
+{% extends "index.html" %}
+{% load static %}
+{% load i18n %}
+
+{% block content %}
+
+<meta name="csrf-token" content="{{ csrf_token }}">
+
+<div hx-get="{% url "attendances-navbar-view" %}" hx-trigger="load">
+</div>  
+
+{% include "generic/components.html" %}
+<div class="oh-checkpoint-badge mb-2" id="selectedInstances" data-ids="[]" data-clicked="" style="display: none"></div>
+<div class="oh-checkpoint-badge mb-2" id="validateselectedInstances" data-ids="[]" data-clicked="" style="display: none"></div>
+<div class="oh-checkpoint-badge mb-2" id="overtimeselectedInstances" data-ids="[]" data-clicked="" style="display: none"></div>
+<div class="oh-checkpoint-badge mb-2" id="validatedselectedInstances" data-ids="[]" data-clicked="" style="display: none"></div>
+<div class="oh-wrapper"  id="listContainer">
+    <div class="animated-background"></div>
+</div> 
+
+
+<!--import attendances-->
+<div class="oh-modal" id="attendanceImport" role="dialog" aria-labelledby="attendanceImport" aria-hidden="true">
+  <div class="oh-modal__dialog">
+      <div class="oh-modal__dialog-header">
+          <h2 class="oh-modal__dialog-title" id="attendanceImportLavel">
+              {% trans "Import Attendances" %}
+          </h2>
+          <button class="oh-modal__close" aria-label="Close">
+              <ion-icon name="close-outline"></ion-icon>
+          </button>
+          <div class="oh-modal__dialog-body p-0 pt-2" id="attendanceImportModalBody">
+              <form hx-post="{% url 'attendance-info-import' %}" hx-encoding="multipart/form-data"
+                  hx-target="#attendanceImport" id="attendanceImportForm">
+                  {% csrf_token %}
+                  <div class="oh-modal__dialog-body mr-5" id="uploading" style="display: none">
+                      <div class="loader-container">
+                          <div class="loader"></div>
+                          <div class="loader-text">{% trans "Uploading..." %}</div>
+                      </div>
+                  </div>
+                  <div id="uploadContainer">
+                      <label class="oh-dropdown__import-label" for="uploadFile">
+                          <ion-icon name="cloud-upload" class="oh-dropdown__import-form-icon"></ion-icon>
+                          <span class="oh-dropdown__import-form-title">{% trans "Upload a File" %}</span>
+                          <span class="oh-dropdown__import-form-text">{% trans "Drag and drop files here" %}</span>
+                      </label>
+                      <input type="file" name="attendance_import" id="" required />
+                      <div class="d-inline float-end">
+                          <a href="#" style="text-decoration:none; display: inline-block;"
+                              class="oh-dropdown__link attendance-info-import" data-toggle="oh-modal-toggle"
+                              data-target="#attendanceImport" onclick="importAttendanceNav();">
+                              <ion-icon name="cloud-download-outline"
+                                  style="font-size:20px; vertical-align: middle;"></ion-icon>
+                              <span>{% trans "Download Template" %}</span>
+                          </a>
+                      </div>
+                  </div>
+                  <button type="submit" class="oh-btn oh-btn--small oh-btn--secondary w-100 mt-3">
+                      {% trans "Upload" %}
+                  </button>
+              </form>
+          </div>
+      </div>
+  </div>
+</div>
+
+
+<div class="oh-modal" id="activityViewModal" role="dialog" aria-hidden="true" style="z-index:1100;">
+  <div class="oh-modal__dialog" style="max-width: 900px;">
+    <div class="oh-modal__dialog-header">
+      <h3 class="oh-main__titlebar-title fw-bold ">{% trans " Activities" %}</h3>
+      <button class="oh-modal__close--custom" aria-label="Close"
+      onclick="$(this).parents().closest('.oh-modal--show').toggleClass('oh-modal--show');">
+      <ion-icon name="close-outline"></ion-icon>
+      </button>
+    </div>
+    <div class="oh-modal__dialog-body" id="activityViewModalBody" style="overflow-x:auto;"></div>
+  </div>
+</div>
+
+
+
+<script src="{% static 'cbv/attendance_activity.js' %}"></script>
+
+{% endblock content %}
diff --git a/attendance/templates/cbv/attendances/attendances_export_page.html b/attendance/templates/cbv/attendances/attendances_export_page.html
new file mode 100644
index 000000000..db048c371
--- /dev/null
+++ b/attendance/templates/cbv/attendances/attendances_export_page.html
@@ -0,0 +1,187 @@
+{% load static %} {% load i18n %}
+<div class="oh-modal__dialog-header">
+<h2 class="oh-modal__dialog-title m-0" id="attendanceExportLavel">
+  {% trans "Export Attendances" %}
+</h2>
+<button class="oh-modal__close" aria-label="Close">
+  <ion-icon name="close-outline"></ion-icon>
+</button>
+</div>
+<div class="oh-modal__dialog-body" id="attendanceExportModalBody">
+  <form
+    action="{%url 'attendance-info-export' %}"
+    method="get"
+    onsubmit="event.stopPropagation();$(this).parents().find('.oh-modal--show').last().toggleClass('oh-modal--show');"
+    id="attendanceExportForm"
+    class="oh-profile-section pt-2"
+  >
+    {% csrf_token %}
+    <div class="oh-dropdown__filter-body" id="export_attendance_form">
+      <div class="oh-accordion">
+        <div class="oh-accordion-header">{% trans "Excel columns" %}</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">
+                  <input type="checkbox" id="select-all-fields" /> {% trans "Select All" %}
+                </label>
+              </div>
+            </div>
+          </div>
+          <div class="row">
+            {% for field in export_form.selected_fields %}
+            <div class="col-sm-12 col-md-12 col-lg-6">
+              <div class="oh-input-group">
+                <label class="oh-label"> {{ field }} </label>
+              </div>
+            </div>
+            {% endfor %}
+          </div>
+        </div>
+      </div>
+      <div class="oh-accordion">
+        <div class="oh-accordion-header">{% trans "Work Info" %}</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 "Employee" %}</label>
+                {{export.form.employee_id}}
+              </div>
+              <div class="oh-input-group">
+                <label class="oh-label">{% trans "Department" %}</label>
+                {{export.form.employee_id__employee_work_info__department_id}}
+              </div>
+              <div class="oh-input-group">
+                <label class="oh-label">{% trans "Shift" %}</label>
+                {{export.form.shift_id}}
+              </div>
+              <div class="oh-input-group">
+                <label class="oh-label">{% trans "Reporting Manager" %}</label>
+                {{export.form.employee_id__employee_work_info__reporting_manager_id}}
+              </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>
+                {{export.form.employee_id__employee_work_info__company_id}}
+              </div>
+              <div class="oh-input-group">
+                <label class="oh-label">{% trans "Job Position" %}</label>
+                {{export.form.employee_id__employee_work_info__job_position_id}}
+              </div>
+              <div class="oh-input-group">
+                <label class="oh-label">{% trans "Work Type" %}</label>
+                {{export.form.work_type_id}}
+              </div>
+              <div class="oh-input-group">
+                <label class="oh-label">{% trans "Work Location" %}</label>
+                {{export.form.employee_id__employee_work_info__location}}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="oh-accordion">
+        <div class="oh-accordion-header">{% trans "Attendance" %}</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 "Attendance Date" %}</label>
+                {{export.form.attendance_date}}
+              </div>
+              <div class="oh-input-group">
+                <label class="oh-label">{% trans "In Time" %}</label>
+                {{export.form.attendance_clock_in}}
+              </div>
+              <div class="oh-input-group">
+                <label class="oh-label">{% trans "Validated?" %}</label>
+                {{export.form.attendance_validated}}
+              </div>
+            </div>
+            <div class="col-sm-12 col-md-12 col-lg-6">
+              <div class="oh-input-group">
+                <label class="oh-label">{% trans "Min Hour" %}</label>
+                {{export.form.minimum_hour}}
+              </div>
+              <div class="oh-input-group">
+                <label class="oh-label">{% trans "Out Time" %}</label>
+                {{export.form.attendance_clock_out}}
+              </div>
+              <div class="oh-input-group">
+                <label class="oh-label">{% trans "OT Approved?" %}</label>
+                {{export.form.attendance_overtime_approve}}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="oh-accordion">
+        <div class="oh-accordion-header">{% trans "Advanced" %}</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 "Attendance From" %}</label>
+                {{export.form.attendance_date__gte}}
+              </div>
+              <div class="oh-input-group">
+                <label class="oh-label">{% trans "In From" %}</label>
+                {{export.form.attendance_clock_in__gte}}
+              </div>
+              <div class="oh-input-group">
+                <label class="oh-label">{% trans "Out From" %}</label>
+                {{export.form.attendance_clock_out__gte}}
+              </div>
+              <div class="oh-input-group">
+                <label class="oh-label"
+                  >{% trans "At Work Greater or Equal" %}</label
+                >
+                {{export.form.at_work_second__gte}}
+              </div>
+              <div class="oh-input-group">
+                <label class="oh-label"
+                  >{% trans "OT Greater or Equal" %}</label
+                >
+                {{export.form.overtime_second__gte}}
+              </div>
+            </div>
+            <div class="col-sm-12 col-md-12 col-lg-6">
+              <div class="oh-input-group">
+                <label class="oh-label">{% trans "Attendance Till" %}</label>
+                {{export.form.attendance_date__lte}}
+              </div>
+              <div class="oh-input-group">
+                <label class="oh-label">{% trans "In Till" %}</label>
+                {{export.form.attendance_clock_in__lte}}
+              </div>
+              <div class="oh-input-group">
+                <label class="oh-label">{% trans "Out Till" %}</label>
+                {{export.form.attendance_clock_out__lte}}
+              </div>
+              <div class="oh-input-group">
+                <label class="oh-label"
+                  >{% trans "At Work Less Than or Equal" %}</label
+                >
+                {{export.form.at_work_second__lte}}
+              </div>
+              <div class="oh-input-group">
+                <label class="oh-label"
+                  >{% trans "OT Less Than or Equal" %}</label
+                >
+                {{export.form.overtime_second__lte}}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="oh-modal__dialog-footer p-0 pt-4">
+      <button class="oh-btn oh-btn--secondary oh-btn--shadow">
+        {% trans "Export" %}
+      </button>
+    </div>
+  </form>
+</div>
diff --git a/attendance/templates/cbv/attendances/attendances_filter_page.html b/attendance/templates/cbv/attendances/attendances_filter_page.html
new file mode 100644
index 000000000..46a30530a
--- /dev/null
+++ b/attendance/templates/cbv/attendances/attendances_filter_page.html
@@ -0,0 +1,158 @@
+{% load static %} {% load i18n %}
+  <div class="oh-dropdown__filter-body">
+    <div class="oh-accordion">
+      <div class="oh-accordion-header">{% trans "Work Info" %}</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 "Employee" %}</label>
+              {{form.employee_id}}
+            </div>
+            <div class="oh-input-group">
+              <label class="oh-label">{% trans "Department" %}</label>
+              {{form.employee_id__employee_work_info__department_id}}
+            </div>
+            <div class="oh-input-group">
+              <label class="oh-label">{% trans "Shift" %}</label>
+              {{form.shift_id}}
+            </div>
+            <div class="oh-input-group">
+              <label class="oh-label">{% trans "Reporting Manager" %}</label>
+              {{form.employee_id__employee_work_info__reporting_manager_id}}
+            </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>
+              {{form.employee_id__employee_work_info__company_id}}
+            </div>
+            <div class="oh-input-group">
+              <label class="oh-label">{% trans "Job Position" %}</label>
+              {{form.employee_id__employee_work_info__job_position_id}}
+            </div>
+            <div class="oh-input-group">
+              <label class="oh-label">{% trans "Work Type" %}</label>
+              {{form.work_type_id}}
+            </div>
+            <div class="oh-input-group">
+              <label class="oh-label">{% trans "Work Location" %}</label>
+              {{form.employee_id__employee_work_info__location}}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    {% comment %} {{form.}} {% endcomment %}
+    <div class="oh-accordion">
+      <div class="oh-accordion-header">{% trans "Attendance" %}</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 "Attendance Date" %}</label>
+              {{form.attendance_date}}
+            </div>
+            <div class="oh-input-group">
+              <label class="oh-label">{% trans "In Time" %}</label>
+              {{form.attendance_clock_in}}
+            </div>
+            <div class="oh-input-group">
+              <label class="oh-label">{% trans "Validated?" %}</label>
+              {{form.attendance_validated}}
+            </div>
+          </div>
+          <div class="col-sm-12 col-md-12 col-lg-6">
+            <div class="oh-input-group">
+              <label class="oh-label">{% trans "Min Hour" %}</label>
+              {{form.minimum_hour}}
+            </div>
+            <div class="oh-input-group">
+              <label class="oh-label">{% trans "Out Time" %}</label>
+              {{form.attendance_clock_out}}
+            </div>
+            <div class="oh-input-group">
+              <label class="oh-label">{% trans "OT Approved?" %}</label>
+              {{form.attendance_overtime_approve}}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="oh-accordion">
+      <div class="oh-accordion-header">{% trans "Advanced" %}</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 "Attendance From" %}</label>
+              {{form.attendance_date__gte}}
+            </div>
+            <div class="oh-input-group">
+              <label class="oh-label">{% trans "In From" %}</label>
+              {{form.attendance_clock_in__gte}}
+            </div>
+            <div class="oh-input-group">
+              <label class="oh-label">{% trans "Out From" %}</label>
+              {{form.attendance_clock_out__gte}}
+            </div>
+            <div class="oh-input-group">
+              <label class="oh-label"
+                >{% trans "At Work Greater or Equal" %}</label
+              >
+              {{form.at_work_second__gte}}
+            </div>
+            <div class="oh-input-group">
+              <label class="oh-label"
+                >{% trans "Pending Hour Greater or Equal" %}</label
+              >
+              {{form.pending_hour__gte}}
+            </div>
+            <div class="oh-input-group">
+              <label class="oh-label">{% trans "OT Greater or Equal" %}</label>
+              {{form.overtime_second__gte}}
+            </div>
+          </div>
+          <div class="col-sm-12 col-md-12 col-lg-6">
+            <div class="oh-input-group">
+              <label class="oh-label">{% trans "Attendance Till" %}</label>
+              {{form.attendance_date__lte}}
+            </div>
+            <div class="oh-input-group">
+              <label class="oh-label">{% trans "In Till" %}</label>
+              {{form.attendance_clock_in__lte}}
+            </div>
+            <div class="oh-input-group">
+              <label class="oh-label">{% trans "Out Till" %}</label>
+              {{form.attendance_clock_out__lte}}
+            </div>
+            <div class="oh-input-group">
+              <label class="oh-label"
+                >{% trans "At Work Less Than or Equal" %}</label
+              >
+              {{form.at_work_second__lte}}
+            </div>
+            <div class="oh-input-group">
+              <label class="oh-label"
+                >{% trans "Pending Hour Less Than or Equal" %}</label
+              >
+              {{form.pending_hour__lte}}
+            </div>
+            <div class="oh-input-group">
+              <label class="oh-label"
+                >{% trans "OT Less Than or Equal" %}</label
+              >
+              {{form.overtime_second__lte}}
+            </div>
+            
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div hidden class="oh-input-group">
+    <label class="oh-label"
+      >{% trans "Bulk Request" %}</label
+    >
+    {{form.is_bulk_request}}
+  </div>
\ No newline at end of file
diff --git a/attendance/templates/cbv/attendances/detail_view_activity_col.html b/attendance/templates/cbv/attendances/detail_view_activity_col.html
new file mode 100644
index 000000000..2a5b7554d
--- /dev/null
+++ b/attendance/templates/cbv/attendances/detail_view_activity_col.html
@@ -0,0 +1,8 @@
+{% load i18n %}
+{% include "generic/components.html" %}
+    <span class="oh-timeoff-modal__stat-title">{% trans "Activities" %}</span>
+    <span data-target="#activityViewModal" data-toggle="oh-modal-toggle" hx-get="{% url 'get-attendance-activities' instance.id  %}"
+        hx-target="#activityViewModalBody" class="oh-timeoff-modal__stat-count" style="display: flex;" title="{% trans 'View Activities' %}">
+        <p class="m-0">{{instance.activities.count}} {% trans "Activity" %}</p>
+        <ion-icon name="eye-outline" class="md hydrated ml-1 mt-1" role="img" aria-label="chevron back outline"></ion-icon>
+    </span>
diff --git a/attendance/templates/cbv/attendances/ot_confirmation.html b/attendance/templates/cbv/attendances/ot_confirmation.html
new file mode 100644
index 000000000..173c4ffb7
--- /dev/null
+++ b/attendance/templates/cbv/attendances/ot_confirmation.html
@@ -0,0 +1,49 @@
+{% load i18n %}
+<div class="" onclick="event.stopPropagation()">
+    {% if instance.attendance_overtime_approve %}
+        <a type="submit" href="#" title="{% trans 'Approved' %}"
+            class="oh-btn oh-btn--success oh-btn--disabled w-100"
+            onclick="event.stopPropagation()"
+          >
+            <ion-icon class="me-1" name="checkmark-done-outline"></ion-icon>
+        </a>
+    {% elif minot <= instance.overtime_second %}
+        <a type="submit" href="{% url 'approve-overtime' instance.id %}" title="{% trans 'Approve Overtime' %}"
+            class="oh-btn oh-btn--success w-100" onclick="event.stopPropagation()">
+            <ion-icon class="me-1" name="checkmark-done-outline"></ion-icon>
+        </a>
+        {% elif instance.overtime_second >= 60 %}
+        <a type="submit" href="#" title="{% trans 'Approve Overtime (OT < min.OT)' %}"
+            class="oh-btn oh-btn--warning w-100" onclick="event.stopPropagation();
+            Swal.fire({
+                  title: '{% trans 'Are you sure?' %}',
+                  text: '{% trans 'This does not satisfy the minimum OT requirement!' %}',
+                  icon: 'warning',
+                  showCancelButton: true,
+                  confirmButtonColor: '#3085d6',
+                  cancelButtonColor: '#d33',
+                  confirmButtonText: 'Approve',
+                  cancelButtonText: 'Cancel'
+                }).then((result) => {
+                  if (result.isConfirmed) {
+                    // Your approve action logic here
+                    Swal.fire(
+                      '{% trans 'Approved!' %}',
+                      '{% trans 'Your action has been approved.' %}',
+                      'success'
+                    );
+                    $('[data-ot-approve-id={{instance.id}}]').click();
+                  }
+                });                                        "
+          >
+            <ion-icon class="me-1" name="checkmark-done-outline"></ion-icon>
+        </a>
+        <button type="submit" data-ot-approve-id={{instance.id}} hidden href=""
+            onclick="window.location.href='{% url 'approve-overtime' instance.id %}'"
+            title="{% trans 'Approve Overtime' %}"
+            class="oh-btn oh-btn--success w-100"
+            >
+            <ion-icon class="me-1" name="checkmark-done-outline"></ion-icon>
+        </button>
+    {% endif %}
+</div>
diff --git a/attendance/templates/cbv/attendances/ot_tab_action.html b/attendance/templates/cbv/attendances/ot_tab_action.html
new file mode 100644
index 000000000..b4958731d
--- /dev/null
+++ b/attendance/templates/cbv/attendances/ot_tab_action.html
@@ -0,0 +1,94 @@
+{% load i18n %}
+{% load static %}
+{% load basefilters %}
+
+{% if perms.instance.change_attendance and perms.instance.delete_attendance or request.user|is_reportingmanager %}
+    <a
+        class="oh-btn oh-btn-group oh-btn--info"
+        hx-get="{% url 'attendance-update' instance.id %}"
+        hx-target="#genericModalBody"
+        hx-swap='innerHTML'
+        data-toggle='oh-modal-toggle'
+        data-target="#genericModal"
+        style="width: 50%;"
+    >
+        <button style="background: none; color: inherit; border: none; padding: 0; font: inherit; cursor: pointer; outline: inherit;">
+            <ion-icon name="create-outline" role="img" class="md hydrated" aria-label="create outline"></ion-icon>{% trans "Edit" %}
+        </button>
+    </a>
+
+    {% if instance.attendance_overtime_approve %}
+    <a type="submit" href="#" title="{% trans 'Approved' %}" class="oh-btn oh-btn-group oh-btn--success oh-btn--disabled" onclick="event.stopPropagation()" style="width: 50%;">
+        <button style="background: none; color: inherit; border: none; padding: 0; font: inherit; cursor: pointer; outline: inherit;">
+            <ion-icon class="me-1" name="checkmark-done-outline"></ion-icon>{% trans "Approve" %}
+        </button>
+    </a>
+    {% elif minot <= instance.overtime_second %}
+        <a type="submit" href="{% url 'approve-overtime' instance.id %}"
+            title="{% trans 'Approve Overtime' %}"
+            class="oh-btn oh-btn-group oh-btn--success w-50"
+            onclick="event.stopPropagation()"
+            >
+            <button style="background: none; color: inherit; border: none; padding: 0; font: inherit; cursor: pointer; outline: inherit;">
+                <ion-icon class="me-1" name="checkmark-done-outline"></ion-icon>{% trans "Approve" %}
+            </button>
+        </a>
+        {% elif instance.overtime_second >= 60 %}
+        <a type="submit" href="#" title="{% trans 'Approve Overtime (OT < min.OT)' %}"
+            class="oh-btn oh-btn-group oh-btn--warning w-50"
+            onclick="event.stopPropagation();
+            Swal.fire({
+                  title: '{% trans 'Are you sure?' %}',
+                  text: '{% trans 'This does not satisfy the minimum OT requirement!' %}',
+                  icon: 'warning',
+                  showCancelButton: true,
+                  confirmButtonColor: '#3085d6',
+                  cancelButtonColor: '#d33',
+                  confirmButtonText: 'Approve',
+                  cancelButtonText: 'Cancel'
+                }).then((result) => {
+                  if (result.isConfirmed) {
+                    // Your approve action logic here
+                    Swal.fire(
+                      '{% trans 'Approved!' %}',
+                      '{% trans 'Your action has been approved.' %}',
+                      'success'
+                    );
+                    $('[data-ot-approve-id={{instance.id}}]').click();
+                  }
+                });                                        "
+          >
+          <button style="background: none; color: inherit; border: none; padding: 0; font: inherit; cursor: pointer; outline: inherit;">
+            <ion-icon class="me-1" name="checkmark-done-outline"></ion-icon>{% trans "Approve" %}
+        </button>
+        </a>
+        <button type="submit" data-ot-approve-id={{instance.id}} hidden href=""
+            onclick="window.location.href='{% url 'approve-overtime' instance.id %}'"
+            title="{% trans 'Approve Overtime' %}"
+            class="oh-btn oh-btn--success w-100"
+            >
+            <ion-icon class="me-1" name="checkmark-done-outline"></ion-icon>
+        </button>
+    {% endif %}
+
+    {% comment %} {% if instance.attendance_overtime_approve %}
+        <a type="submit" href="#" title="{% trans 'Approved' %}" class="oh-btn oh-btn-group oh-btn--success oh-btn--disabled" onclick="event.stopPropagation()" style="width: 50%;">
+            <button style="background: none; color: inherit; border: none; padding: 0; font: inherit; cursor: pointer; outline: inherit;">
+                <ion-icon class="me-1" name="ban-outline"></ion-icon>{% trans "Approve" %}
+            </button>
+        </a>
+    {% else %}
+        <a type="submit" href="{% url 'approve-overtime' instance.id %}" title="{% trans 'Approve Overtime' %}" class="oh-btn oh-btn-group oh-btn--success" onclick="event.stopPropagation()" style="width: 50%;">
+            <button style="background: none; color: inherit; border: none; padding: 0; font: inherit; cursor: pointer; outline: inherit;">
+                <ion-icon class="me-1" name="checkmark-done-outline"></ion-icon>{% trans "Approve" %}
+            </button>
+        </a>
+    {% endif %} {% endcomment %}
+
+    <form action="{% url 'attendance-delete' instance.id  %}" onsubmit="return confirm('{% trans "Are you sure want to delete this attendance?" %}')" hx-target="#tab_contents" method='post' style="width: 50%;" class="oh-btn oh-btn-group oh-btn--danger">
+        {% csrf_token %}
+        <button type="submit" style="background: none; color: inherit; border: none; padding: 0; font: inherit; cursor: pointer; outline: inherit;">
+            <ion-icon name="trash-outline"></ion-icon>{% trans 'Delete' %}
+        </button>
+    </form>
+{% endif %}
diff --git a/attendance/templates/cbv/attendances/validate_button.html b/attendance/templates/cbv/attendances/validate_button.html
new file mode 100644
index 000000000..dfc152460
--- /dev/null
+++ b/attendance/templates/cbv/attendances/validate_button.html
@@ -0,0 +1,17 @@
+{% load i18n %}
+{% load basefilters %} 
+{% if request.user.employee_get != instance.employee_id and request.user|is_reportingmanager or perms.attendance.change_attendance or request.user|is_self_reporting_manager %}
+<a href='{% url "validate-this-attendance" instance.id %}'
+hx-target="#updateAttendanceBody" data-req="/attendance/request-attendance-view/?id={{instance.id}}"
+onclick="event.stopPropagation(); {% if instance.is_validate_request %}  event.preventDefault(); showApproveAlert($(this).data('req')); {% endif %}"
+class="oh-btn oh-btn--info">
+{% trans "Validate" %}</a>
+{% else %}
+<a
+class="oh-btn oh-btn--info oh-btn--disabled"
+disabled
+onclick="event.preventDefault();event.stopPropagation()">
+{% trans "Validate" %}
+        
+</a>
+{% endif %}
\ No newline at end of file
diff --git a/attendance/templates/cbv/attendances/validate_tab_action.html b/attendance/templates/cbv/attendances/validate_tab_action.html
new file mode 100644
index 000000000..90c35a9bb
--- /dev/null
+++ b/attendance/templates/cbv/attendances/validate_tab_action.html
@@ -0,0 +1,48 @@
+{% load i18n %}
+{% load static %}
+{% load basefilters %}
+
+{% if perms.attendance.change_attendance and perms.attendance.delete_attendance or request.user|is_reportingmanager %}
+    <a class="oh-btn oh-btn-group oh-btn--info"
+       hx-get="{% url 'attendance-update' instance.id %}"
+       onclick="event.stopPropagation()"
+       hx-target="#genericModalBody"
+       hx-swap="innerHTML"
+       data-toggle="oh-modal-toggle"
+       data-target="#genericModal"
+       style="width: 50%;">
+        <button style="background: none; color: inherit; border: none; padding: 0; font: inherit; cursor: pointer; outline: inherit;">
+            <ion-icon name="create-outline"></ion-icon>
+            {% trans 'Edit' %}
+        </button>
+    </a>
+   
+    {% comment %} {% if request.user.employee_get != instance.employee_id and request.user|is_reportingmanager or perms.attendance.change_attendance or request.user|is_self_reporting_manager %} {% endcomment %}
+
+        <a href='{% url "validate-this-attendance" instance.id %}'
+           hx-target="#updateAttendanceBody"
+           data-req="/attendance/request-attendance-view/?id={{instance.id}}"
+           onclick="event.stopPropagation(); {% if instance.is_validate_request %}  event.preventDefault(); showApproveAlert($(this).data('req')); {% endif %}"
+           class="oh-btn oh-btn--success"
+           style="width: 50%;">
+            <button style="background: none; color: inherit; border: none; padding: 0; font: inherit; cursor: pointer; outline: inherit;">
+                <ion-icon name="checkmark-done-outline"></ion-icon>
+                {% trans 'Validate' %}
+            </button>
+        </a>
+
+{% comment %} {% if perms.attendance.delete_attendance  %} {% endcomment %}
+    <form action="{% url 'attendance-delete' instance.id %}"
+          onclick="event.stopPropagation()"
+          onsubmit="return confirm('{% trans "Are you sure want to delete this attendance?" %}')"
+          hx-target="#tab_contents"
+          method='post'
+          style="width: 50%;"
+          class="oh-btn oh-btn-group oh-btn--danger">
+        {% csrf_token %}
+        <button type="submit" style="background: none; color: inherit; border: none; padding: 0; font: inherit; cursor: pointer; outline: inherit;">
+            <ion-icon name="trash-outline"></ion-icon>
+            {% trans 'Delete' %}
+        </button>
+    </form>
+{% endif %}
diff --git a/attendance/templates/cbv/attendances/validated_tab_action.html b/attendance/templates/cbv/attendances/validated_tab_action.html
new file mode 100644
index 000000000..fd591ec2b
--- /dev/null
+++ b/attendance/templates/cbv/attendances/validated_tab_action.html
@@ -0,0 +1,28 @@
+{% load i18n %}
+{% load static %}
+{% load basefilters %}
+
+{% if perms.instance.change_attendance and perms.instance.delete_attendance or request.user|is_reportingmanager %}
+    <a class="oh-btn oh-btn-group oh-btn--info"
+       hx-get="{% url 'attendance-update' instance.id %}?dashboard={{dashboard}}"
+       hx-target="{% if dashboard == 'true' %}#editModalForm {% else %}#genericModalBody{% endif %}"
+       hx-swap='innerHTML'
+       data-toggle='oh-modal-toggle'
+       data-target="{% if dashboard == 'true' %}#editModal {% else %}#genericModal {% endif %}"
+       style="width: 50%;">
+        <button style="background: none; color: inherit; border: none; padding: 0; font: inherit; cursor: pointer; outline: inherit;">
+            <ion-icon name="create-outline" role="img" class="md hydrated" aria-label="create outline"></ion-icon>{% trans "Edit" %}
+        </button>
+    </a>
+    <form action="{% url 'attendance-delete' instance.id  %}"
+          onsubmit="return confirm('{% trans "Are you sure want to delete this attendance?" %}')"
+          hx-target="#tab_contents"
+          method='post'
+          style="width: 50%;"
+          class="oh-btn oh-btn-group oh-btn--danger">
+        {% csrf_token %}
+        <button type="submit" style="background: none; color: inherit; border: none; padding: 0; font: inherit; cursor: pointer; outline: inherit;">
+            <ion-icon name="trash-outline"></ion-icon>{% trans 'Delete' %}
+        </button>
+    </form>
+{% endif %}
diff --git a/attendance/templates/cbv/hour_account/hour_account.html b/attendance/templates/cbv/hour_account/hour_account.html
new file mode 100644
index 000000000..02dc7b3c2
--- /dev/null
+++ b/attendance/templates/cbv/hour_account/hour_account.html
@@ -0,0 +1,166 @@
+
+
+
+{% extends "index.html" %}
+{% load i18n %}{% load static %}
+
+
+{% block content %}
+
+
+
+
+
+<meta name="csrf-token" content="{{ csrf_token }}">
+
+
+
+<style>
+.validated--dot{
+  background-color:yellowgreen;
+}
+.not-validated--dot{
+  background-color:red;
+}
+.requested--dot{
+  background-color:orange;
+}
+.approved-request--dot{
+  background-color:blue;
+}
+.validated-True{
+  border-left: 3.4px solid yellowgreen !important;
+  border-radius: 4px 0 0 4px;
+
+}
+.not-validated-False {
+
+  border-left: 3.4px solid red !important;
+  border-radius: 4px 0 0 4px;
+
+
+}
+.requested-True {
+
+  border-left: 3.4px solid orange !important;
+  border-radius: 4px 0 0 4px;
+
+}
+.approved-request-True {
+
+  border-left: 3.4px solid blue !important;
+  border-radius: 4px 0 0 4px;
+
+}
+
+
+
+
+
+</style>
+
+ <div hx-get="{% url "hour-account-nav" %}" hx-trigger="load">
+</div>   
+
+
+
+
+{% include "generic/components.html" %}
+
+
+<div
+    class="oh-checkpoint-badge mb-2"
+    id="selectedInstances"
+    data-ids="[]"
+    data-clicked=""
+    style="display: none">
+  </div>
+
+  
+  <div 
+  class="oh-wrapper" 
+  id="listContainer">
+  <div class="animated-background">
+  </div>
+</div>
+
+
+
+<div class="oh-activity-sidebar" id="activitySidebar" style="z-index: 1000">
+    <div class="oh-activity-sidebar__body" id="commentContainer"></div>
+  </div>
+
+  <div
+  class="oh-modal"
+  id="hourAccountExport"
+  role="dialog"
+  aria-labelledby="hourAccountExport"
+  aria-hidden="true"
+>
+  <div class="oh-modal__dialog">
+    <div class="oh-modal__dialog-header">
+      <h2 class="oh-modal__dialog-title" id="hourAccountExportLavel">
+        {% trans "Export Hour Accounts" %}
+      </h2>
+      <button class="oh-modal__close" aria-label="Close">
+        <ion-icon name="close-outline"></ion-icon>
+      </button>
+      <divattendance_date__gte={{ dates.0|date:"Y-m-d" }}&attendance_date__lte={{ dates.1|date:"Y-m-d" }}
+        class="oh-modal__dialog-body p-0 pt-2"
+        
+      >
+          <form
+          action="{%url 'attendance-account-info-export' %}"
+          id="hourAccountExportModalBody"
+          method="get"
+          onsubmit="event.stopPropagation();$(this).parents().find('.oh-modal--show').last().toggleClass('oh-modal--show');"
+         
+        >
+          
+        </form>
+      </div>
+    </div>
+  </div>
+</div>
+<script src="{% static 'cbv/attendance/hour_account.js' %}"></script>
+<script>
+  function validateHours(url) {
+
+    $.ajax({
+        url: "{% url 'active-tab' %}",  
+        method: "GET",
+        data: {
+            path: "{% url 'attendances-tab-view' %}",
+            target: `li[data-target="#attendances-tab1"]`
+        },
+        success: function(response) {
+            window.location.href = url 
+        },hx-get="{% url "attendances-tab-view" %}?{{request.GET.urlencode}}"
+        error: function(xhr, status, error) {
+            console.error(error);
+        }
+    });
+}
+
+function validateOTHours(url) {
+  $.ajax({
+      url: "{% url 'active-tab' %}",  
+      method: "GET",
+      data: {
+          path: "{% url 'attendances-tab-view' %}",
+          target: `li[data-target="#attendances-tab2"]`
+      },
+      success: function(response) {
+        
+          window.location.href = url
+      },
+      error: function(xhr, status, error) {
+          
+          console.error(error);
+      }
+  });
+}
+
+</script>
+
+{% endblock content %}
\ No newline at end of file
diff --git a/attendance/templates/cbv/hour_account/hour_account_main.html b/attendance/templates/cbv/hour_account/hour_account_main.html
new file mode 100644
index 000000000..6ce9327b1
--- /dev/null
+++ b/attendance/templates/cbv/hour_account/hour_account_main.html
@@ -0,0 +1,8 @@
+<div id ="ot-table">
+  {% include "generic/horilla_list.html" %}
+</div>
+{% if request.GET.deleted %}
+<script>
+$('#reloadMessagesButton').click();
+</script>
+{% endif %}
\ No newline at end of file
diff --git a/attendance/templates/cbv/hour_account/hour_actions.html b/attendance/templates/cbv/hour_account/hour_actions.html
new file mode 100644
index 000000000..4de9247ea
--- /dev/null
+++ b/attendance/templates/cbv/hour_account/hour_actions.html
@@ -0,0 +1,23 @@
+{% load i18n %}{% load basefilters%}
+
+{% if perms.attendance.change_attendanceovertime or perms.attendance.delete_attendanceovertime  %}
+	<div onclick="event.stopPropagation()">
+		<div class="oh-btn-group">
+			{% if perms.attendance.change_attendanceovertime or request.user|is_reportingmanager %}
+				<a hx-get="{% url 'attendance-overtime-update' instance.id %}?instance_ids={{instance.ordered_ids}}" hx-target='#objectUpdateModalTarget' data-toggle='oh-modal-toggle' data-target='#objectUpdateModal'  class="oh-btn oh-btn--light-bkg w-50" title="{% trans 'Edit' %}"><ion-icon name="create-outline"></ion-icon></a>
+			{% endif %}
+			{% if perms.attendance.delete_attendanceovertime or request.user|is_reportingmanager %}
+				<form hx-confirm="{% trans 'Are you sure want to delete this hour account?' %}"
+					hx-post="{% url 'attendance-overtime-delete' instance.id  %}?field=month&year={% now 'Y' %}"
+					hx-target="#ot-table" class='w-50'>
+					{% csrf_token %}
+					<button type='submit' class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100"   title="{% trans 'Remove' %}"><ion-icon name="trash-outline"></ion-icon></button>
+				</form>
+			{% endif %}
+		</div>
+	</div>
+{% endif %}
+
+								
+
+                
\ No newline at end of file
diff --git a/attendance/templates/cbv/hour_account/hour_detail_action.html b/attendance/templates/cbv/hour_account/hour_detail_action.html
new file mode 100644
index 000000000..06e2fcd0a
--- /dev/null
+++ b/attendance/templates/cbv/hour_account/hour_detail_action.html
@@ -0,0 +1,78 @@
+
+{% load i18n %}
+   {% load basefilters %}
+   {% with dates=instance.month_days %}
+   {% if perms.attendance.view_attendance or request.user|is_reportingmanager %}
+<a class="oh-btn oh-btn-group oh-btn--warning" style="width: 50%;" onclick="validateHours('{% url 'attendance-view' %}?employee_id={{instance.employee_id.id}}&attendance_date__gte={{ dates.0|date:"Y-m-d" }}&attendance_date__lte={{ dates.1|date:"Y-m-d" }}');">
+    <button 
+      style="
+        background: none;
+        color: inherit;
+        border: none;
+        padding: 0;
+        font: inherit;
+        cursor: pointer;
+        outline: inherit;
+      "
+      >
+   {{ instance.not_validated_hrs }}  {% trans "Hours to validate" %}</button>
+  </a>
+
+  {% else %}
+  <a class="oh-btn oh-btn-group oh-btn--warning" style="width: 50%;" href="{% url 'view-my-attendance' %}?attendance_date__gte={{ dates.0|date:"Y-m-d" }}&attendance_date__lte={{ dates.1|date:"Y-m-d" }}" >
+    <button
+      style="
+        background: none;
+        color: inherit;
+        border: none;
+        padding: 0;
+        font: inherit;
+        cursor: pointer;
+        outline: inherit;
+      "
+      >
+      {{ instance.not_validated_hrs }}  {% trans "Hours to validate" %}</button>
+  </a>
+  {% endif %}
+
+  {% if perms.attendance.view_attendance or request.user|is_reportingmanager %}
+<a class="oh-btn oh-btn-group oh-btn--success" style="width: 50%;" onclick="validateOTHours('{% url 'attendance-view' %}?employee_id={{instance.employee_id.id}}&attendance_date__gte={{ dates.0|date:"Y-m-d" }}&attendance_date__lte={{ dates.1|date:"Y-m-d" }}');" >
+              <button
+                style="
+                  background: none;
+                  color: inherit;
+                  border: none;
+                  padding: 0;
+                  font: inherit;
+                  cursor: pointer;
+                  outline: inherit;
+                "
+                >
+                {{ instance.not_approved_ot_hrs }} hrs {% trans "OT to Approve" %}</button>
+            </a>
+            {% else %}
+            <a class="oh-btn oh-btn-group oh-btn--success" style="width: 50%;" href="{% url 'view-my-attendance' %}?attendance_date__gte={{ dates.0|date:"Y-m-d" }}&attendance_date__lte={{ dates.1|date:"Y-m-d" }}">
+                <button
+                  style="
+                    background: none;
+                    color: inherit;
+                    border: none;
+                    padding: 0;
+                    font: inherit;
+                    cursor: pointer;
+                    outline: inherit;
+                  "
+                  >
+                  {{ instance.not_approved_ot_hrs }} hrs {% trans "OT to Approve" %}</button>
+              </a>
+              
+              {% endif %}
+              {% endwith %}
+
+           
+
+              
+            
+
+    
+          
\ No newline at end of file
diff --git a/attendance/templates/cbv/hour_account/hour_export.html b/attendance/templates/cbv/hour_account/hour_export.html
new file mode 100644
index 000000000..6feb23f0b
--- /dev/null
+++ b/attendance/templates/cbv/hour_account/hour_export.html
@@ -0,0 +1,148 @@
+{% load i18n %}
+<div class="oh-dropdown__filter-body">
+    <div class="oh-accordion">
+      <div class="oh-accordion-header">{% trans "Excel columns" %}</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">
+                <input type="checkbox" id="select-all-fields" /> {% trans "Select All" %}
+              </label>
+            </div>
+          </div>
+        </div>
+        <div class="row">
+          {% for field in export_fields.selected_fields %}
+          <div class="col-sm-12 col-md-12 col-lg-6">
+            <div class="oh-input-group">
+              <label class="oh-label"> {{ field }} </label>
+            </div>
+          </div>
+          {% endfor %}
+        </div>
+      </div>
+    </div>
+    <div class="oh-accordion">
+      <div class="oh-accordion-header">{% trans "Work Info" %}</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" for={{export_obj.form.employee_id.id_for_label}}>{% trans "Employee" %}</label>
+                        {{export_obj.form.employee_id}}
+                    </div>
+                    <div class="oh-input-group">
+                        <label class="oh-label" for={{export_obj.form.employee_id__employee_work_info__department_id.id_for_label}}>{% trans "Department" %}</label>
+                        {{export_obj.form.employee_id__employee_work_info__department_id}}
+                    </div>
+                    <div class="oh-input-group">
+                        <label class="oh-label" for={{export_obj.form.employee_id__employee_work_info__shift_id.id_for_label}}>{% trans "Shift" %}</label>
+                        {{export_obj.form.employee_id__employee_work_info__shift_id}}
+                    </div>
+                    <div class="oh-input-group">
+                        <label class="oh-label" for={{export_obj.form.employee_id__employee_work_info__reporting_manager_id.id_for_label}}>{% trans "Reporting Manager" %}</label>
+                        {{export_obj.form.employee_id__employee_work_info__reporting_manager_id}}
+                    </div>
+                </div>
+                <div class="col-sm-12 col-md-12 col-lg-6">
+                    <div class="oh-input-group">
+                        <label class="oh-label" for={{export_obj.form.employee_id__employee_work_info__company_id.id_for_label}}>{% trans "Company" %}</label>
+                        {{export_obj.form.employee_id__employee_work_info__company_id}}
+                    </div>
+                    <div class="oh-input-group">
+                        <label class="oh-label" for={{export_obj.form.employee_id__employee_work_info__job_position_id.id_for_label}}>{% trans "Job Position" %}</label>
+                        {{export_obj.form.employee_id__employee_work_info__job_position_id}}
+                    </div>
+                    <div class="oh-input-group">
+                        <label class="oh-label" for={{export_obj.form.employee_id__employee_work_info__work_type_id.id_for_label}}>{% trans "Work Type" %}</label>
+                        {{export_obj.form.employee_id__employee_work_info__work_type_id}}
+                    </div>
+                    <div class="oh-input-group">
+                        <label class="oh-label" for={{export_obj.form.employee_id__employee_work_info__location.id_for_label}}>{% trans "Work Location" %}</label>
+                        {{export_obj.form.employee_id__employee_work_info__location}}
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="oh-accordion">
+        <div class="oh-accordion-header">{% trans "Worked Hours" %}</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" for={{export_obj.form.month.id_for_label}}>{% trans "Month" %}</label>
+                      {{export_obj.form.month}}
+                    </div>
+                    <div class="oh-input-group">
+                      <label class="oh-label" for={{export_obj.form.overtime.id_for_label}}>{% trans "Overtime" %}</label>
+                      {{export_obj.form.overtime}}
+                    </div>
+                </div>
+                <div class="col-sm-12 col-md-12 col-lg-6">
+                    <div class="oh-input-group">
+                      <label class="oh-label" for={{export_obj.form.year.id_for_label}}>{% trans "Year" %}</label>
+                      {{export_obj.form.year}}
+                    </div>
+                    <div class="oh-input-group">
+                      <label class="oh-label" for={{export_obj.form.worked_hours.id_for_label}}>{% trans "Worked Hours" %}</label>
+                      {{export_obj.form.worked_hours}}
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="oh-accordion">
+      <div class="oh-accordion-header">{% trans "Advanced" %}</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" for={{export_obj.form.worked_hours__gte.id_for_label}}
+                      >{% trans "Worked Hours Greater or Equal" %}</label
+                    >
+                    {{export_obj.form.worked_hours__gte}}
+                </div>
+                <div class="oh-input-group">
+                  <label class="oh-label" for={{export_obj.form.pending_hours__gte.id_for_label}}
+                    >{% trans "Pending Hours Greater or Equal" %}</label
+                  >
+                  {{export_obj.form.pending_hours__gte}}
+                </div>
+                <div class="oh-input-group">
+                    <label class="oh-label" for={{export_obj.form.overtime__gte.id_for_label}}
+                      >{% trans "OT Account Greater or Equal" %}</label
+                    >
+                    {{export_obj.form.overtime__gte}}
+                </div>
+            </div>
+            <div class="col-sm-12 col-md-12 col-lg-6">
+                <div class="oh-input-group">
+                    <label class="oh-label" for={{export_obj.form.worked_hours__lte.id_for_label}}
+                      >{% trans "Worked Hours Less Than or Equal" %}</label
+                    >
+                    {{export_obj.form.worked_hours__lte}}
+                </div>
+                <div class="oh-input-group">
+                  <label class="oh-label" for={{export_obj.form.pending_hours__lte.id_for_label}}
+                    >{% trans "Pending Hours Less Than or Equal" %}</label
+                  >
+                  {{export_obj.form.pending_hours__lte}}
+                </div>
+                <div class="oh-input-group">
+                    <label class="oh-label" for={{export_obj.form.overtime__lte.id_for_label}}
+                      >{% trans "OT Account Less Than or Equal" %}</label
+                    >
+                    {{export_obj.form.overtime__lte}}
+                </div>
+            </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="oh-dropdown__filter-footer">
+    <button class="oh-btn oh-btn--secondary oh-btn--small w-100">
+      {% trans "Export" %}
+    </button>
+  </div>
\ No newline at end of file
diff --git a/attendance/templates/cbv/hour_account/hour_filter.html b/attendance/templates/cbv/hour_account/hour_filter.html
new file mode 100644
index 000000000..b461e5cbb
--- /dev/null
+++ b/attendance/templates/cbv/hour_account/hour_filter.html
@@ -0,0 +1,121 @@
+
+{% load static %} {% load i18n %}
+    <div class="oh-dropdown__filter-body">
+      <div class="oh-accordion">
+        <div class="oh-accordion-header">{% trans "Work Info" %}</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" for = "{{form.employee_id.id_for_label}}">{% trans "Employee" %}</label>
+                          {{form.employee_id}}
+                      </div>
+                      <div class="oh-input-group">
+                          <label class="oh-label" for = "{{form.employee_id__employee_work_info__department_id.id_for_label}}">{% trans "Department" %}</label>
+                          {{form.employee_id__employee_work_info__department_id}}
+                      </div>
+                      <div class="oh-input-group">
+                          <label class="oh-label" for = "{{form.employee_id__employee_work_info__shift_id.id_for_label}}">{% trans "Shift" %}</label>
+                          {{form.employee_id__employee_work_info__shift_id}}
+                      </div>
+                      <div class="oh-input-group">
+                          <label class="oh-label" for = "{{form.employee_id__employee_work_info__reporting_manager_id.id_for_label}}">{% trans "Reporting Manager" %}</label>
+                          {{form.employee_id__employee_work_info__reporting_manager_id}}
+                      </div>
+                  </div>
+                  <div class="col-sm-12 col-md-12 col-lg-6">
+                      <div class="oh-input-group">
+                          <label class="oh-label" for = "{{form.employee_id__employee_work_info__company_id.id_for_label}}">{% trans "Company" %}</label>
+                          {{form.employee_id__employee_work_info__company_id}}
+                      </div>
+                      <div class="oh-input-group">
+                          <label class="oh-label" for = "{{form.employee_id__employee_work_info__job_position_id.id_for_label}}">{% trans "Job Position" %}</label>
+                          {{form.employee_id__employee_work_info__job_position_id}}
+                      </div>
+                      <div class="oh-input-group">
+                          <label class="oh-label" for = "{{form.employee_id__employee_work_info__work_type_id.id_for_label}}">{% trans "Work Type" %}</label>
+                          {{form.employee_id__employee_work_info__work_type_id}}
+                      </div>
+                      <div class="oh-input-group">
+                          <label class="oh-label" for = "{{form.employee_id__employee_work_info__location.id_for_label}}">{% trans "Work Location" %}</label>
+                          {{form.employee_id__employee_work_info__location}}
+                      </div>
+                  </div>
+              </div>
+          </div>
+      </div>
+      <div class="oh-accordion">
+          <div class="oh-accordion-header">{% trans "Worked Hours" %}</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" for = "{{form.month.id_for_label}}">{% trans "Month" %}</label>
+                        {{form.month}}
+                      </div>
+                      <div class="oh-input-group">
+                        <label class="oh-label" for = "{{form.overtime.id_for_label}}">{% trans "Overtime" %}</label>
+                        {{form.overtime}}
+                      </div>
+                  </div>
+                  <div class="col-sm-12 col-md-12 col-lg-6">
+                      <div class="oh-input-group">
+                        <label class="oh-label" for = "{{form.year.id_for_label}}">{% trans "Year" %}</label>
+                        {{form.year}}
+                      </div>
+                      <div class="oh-input-group">
+                        <label class="oh-label" for = "{{form.worked_hours.id_for_label}}">{% trans "Worked Hours" %}</label>
+                        {{form.worked_hours}}
+                      </div>
+                  </div>
+              </div>
+          </div>
+      </div>
+      <div class="oh-accordion">
+        <div class="oh-accordion-header">{% trans "Advanced" %}</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" for = "{{form.worked_hours__gte.id_for_label}}"
+                        >{% trans "Worked Hours Greater or Equal" %}</label
+                      >
+                      {{form.worked_hours__gte}}
+                  </div>
+                  <div class="oh-input-group">
+                    <label class="oh-label" for = "{{form.pending_hours__gte.id_for_label}}"
+                      >{% trans "Pending Hours Greater or Equal" %}</label
+                    >
+                    {{form.pending_hours__gte}}
+                  </div>
+                  <div class="oh-input-group">
+                      <label class="oh-label" for = "{{form.overtime__gte.id_for_label}}"
+                        >{% trans "OT Account Greater or Equal" %}</label
+                      >
+                      {{form.overtime__gte}}
+                  </div>
+              </div>
+              <div class="col-sm-12 col-md-12 col-lg-6">
+                  <div class="oh-input-group">
+                      <label class="oh-label" for = "{{form.worked_hours__lte.id_for_label}}"
+                        >{% trans "Worked Hours Less Than or Equal" %}</label
+                      >
+                      {{form.worked_hours__lte}}
+                  </div>
+                  <div class="oh-input-group">
+                    <label class="oh-label" for = "{{form.pending_hours__lte.id_for_label}}"
+                      >{% trans "Pending Hours Less Than or Equal" %}</label
+                    >
+                    {{form.pending_hours__lte}}
+                  </div>
+                  <div class="oh-input-group">
+                      <label class="oh-label" for = "{{form.overtime__lte.id_for_label}}"
+                        >{% trans "OT Account Less Than or Equal" %}</label
+                      >
+                      {{form.overtime__lte}}
+                  </div>
+              </div>
+          </div>
+        </div>
+      </div>
+    </div>
diff --git a/attendance/templates/cbv/hour_account/nav_hour_account.html b/attendance/templates/cbv/hour_account/nav_hour_account.html
new file mode 100644
index 000000000..eb46c58ca
--- /dev/null
+++ b/attendance/templates/cbv/hour_account/nav_hour_account.html
@@ -0,0 +1,11 @@
+<div>
+    {% include 'generic/horilla_nav.html' %}
+</div>
+
+<script>
+    var currentYear = new Date().getFullYear();
+    $('#applyFilter').closest('form').find('[name=year]').val(currentYear);
+    $('#applyFilter').closest('form').find('[name=field]').val('month');
+    $('#applyFilter').click();  
+      
+</script>
\ No newline at end of file
diff --git a/attendance/templates/cbv/late_come_and_early_out/actions_column.html b/attendance/templates/cbv/late_come_and_early_out/actions_column.html
new file mode 100644
index 000000000..21e6d6c45
--- /dev/null
+++ b/attendance/templates/cbv/late_come_and_early_out/actions_column.html
@@ -0,0 +1,33 @@
+{% load i18n %}{% load basefilters %}
+
+{% if request.user|is_reportingmanager or perms.attendance.chanage_penaltyaccount or perms.attendance.delete_attendancelatecomeearlyout %}
+                <div onclick="event.stopPropagation();">
+                  <div class="oh-btn-group">
+                    {% if request.user|is_reportingmanager or perms.attendance.chanage_penaltyaccount %}
+                    <button
+                      data-toggle="oh-modal-toggle"
+                      data-target="#penaltyModal"
+                      hx-target="#penaltyModalBody"
+                      hx-get="{% url "cut-penalty" instance.id %}"
+                      type='submit'
+                      class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-50"
+                      title="{% trans 'Penalty' %}">
+                      <ion-icon name="information-circle-outline"></ion-icon>
+                    </button>
+                    {% endif %}
+                    {% if perms.attendance.delete_attendancelatecomeearlyout  %}
+                      <form hx-confirm="{% trans 'Are you sure want to delete this attendance?' %}"
+                            hx-post="{% url 'late-come-early-out-delete' instance.id  %}"
+                            hx-target="#late-container"
+                            onclick="event.stopPropagation()"
+                            class="w-50"
+                        >
+                        {% csrf_token %}
+                        <button type='submit' class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100" title="{% trans 'Remove' %}">
+                          <ion-icon name="trash-outline"></ion-icon>
+                        </button>
+                      </form>
+                    {% endif %}
+                  </div>
+                </div>
+              {% endif %}
\ No newline at end of file
diff --git a/attendance/templates/cbv/late_come_and_early_out/detail_action.html b/attendance/templates/cbv/late_come_and_early_out/detail_action.html
new file mode 100644
index 000000000..bf1ab8a0f
--- /dev/null
+++ b/attendance/templates/cbv/late_come_and_early_out/detail_action.html
@@ -0,0 +1,43 @@
+{% load i18n %}
+{% load basefilters %}
+
+{% if request.user|is_reportingmanager or perms.attendance.chanage_penaltyaccount or perms.attendance.delete_attendancelatecomeearlyout %}
+                {% if request.user|is_reportingmanager or perms.attendance.chanage_penaltyaccount %}
+                    <a
+                        class="oh-btn oh-btn-group oh-btn--warning"
+                        data-toggle="oh-modal-toggle"
+                        data-target="#penaltyModal"
+                        hx-target="#penaltyModalBody"
+                        hx-get="{% url "cut-penalty" instance.id %}"
+                        style="width: 50%;"
+                        >
+                       
+                        <ion-icon name="information-circle-outline" role="img"
+                            class="md hydrated" aria-label="information circle outline">
+                        </ion-icon>{% trans "Penalty" %}
+                    </a>
+                {% endif %}
+                {% if perms.attendance.delete_attendancelatecomeearlyout %}
+                    <form hx-confirm="{% trans 'Are you sure want to delete this attendance?' %}"
+                        hx-post="{% url 'late-come-early-out-delete' instance.id  %}?instances_ids={{ request.GET.instance_ids }}"
+                        hx-target="#genericModalBody"
+                        onclick="event.stopPropagation()"
+                        class="w-50"
+                    >
+                    {% csrf_token %}
+                        <button type='submit' class="oh-btn oh-btn-group oh-btn--danger w-100"><ion-icon
+                            name="trash-outline"
+                            role="img"
+                            class="md hydrated"
+                            aria-label="create outline"
+                            ></ion-icon>{% trans "Delete" %}</button>
+                    </form>
+                {% endif %}
+            
+    {% endif %}
+
+{% if request.GET.deleted %}
+<script>
+    $(".reload-record").click()
+</script>
+{% endif %}
\ No newline at end of file
diff --git a/attendance/templates/cbv/late_come_and_early_out/late_come_and_early_out.html b/attendance/templates/cbv/late_come_and_early_out/late_come_and_early_out.html
new file mode 100644
index 000000000..c974c91c6
--- /dev/null
+++ b/attendance/templates/cbv/late_come_and_early_out/late_come_and_early_out.html
@@ -0,0 +1,150 @@
+
+
+
+{% extends "index.html" %}
+{% load i18n %}{% load static %}
+
+
+{% block content %}
+
+
+
+
+
+<meta name="csrf-token" content="{{ csrf_token }}">
+
+
+
+<style>
+.validated--dot{
+  background-color:yellowgreen;
+}
+.not-validated--dot{
+  background-color:red;
+}
+.requested--dot{
+  background-color:orange;
+}
+.approved-request--dot{
+  background-color:blue;
+}
+.validated-True{
+  border-left: 3.4px solid yellowgreen !important;
+  border-radius: 4px 0 0 4px;
+
+}
+.not-validated-False {
+
+  border-left: 3.4px solid red !important;
+  border-radius: 4px 0 0 4px;
+
+
+}
+.requested-True {
+
+  border-left: 3.4px solid orange !important;
+  border-radius: 4px 0 0 4px;
+
+}
+.approved-request-True {
+
+  border-left: 3.4px solid blue !important;
+  border-radius: 4px 0 0 4px;
+
+}
+
+
+
+
+
+</style>
+
+ <div hx-get="{% url "late-come-and-early-out-nav" %}" hx-trigger="load">
+</div>   
+{% comment %} my_app/templates/my_app/generic/index.html {% endcomment %}
+
+
+
+{% include "generic/components.html" %}
+
+
+<div
+    class="oh-checkpoint-badge mb-2"
+    id="selectedInstances"
+    data-ids="[]"
+    data-clicked=""
+    style="display: none"
+  ></div>
+
+  
+  <div 
+  class="oh-wrapper" 
+  id="listContainer">
+  <div class="animated-background">
+  </div>
+</div>
+
+
+<div class="oh-activity-sidebar" id="activitySidebar" style="z-index: 1000">
+    <div class="oh-activity-sidebar__body" id="commentContainer"></div>
+  </div>
+
+  <div class="oh-modal" id="penaltyViewModal" role="dialog" aria-hidden="true">
+    <div class="oh-modal__dialog" style="max-width: 1050px">
+      <div class="oh-modal__dialog-header">
+        <button type="button" class="oh-modal__close--custom"
+                aria-label="Close"  onclick="$('#penaltyViewModal').removeClass('oh-modal--show')">
+          <ion-icon name="close-outline"></ion-icon>
+        </button>
+      </div>
+      <div class="oh-modal__dialog-body" id="penaltyViewModalBody"></div>
+    </div>
+  </div>
+
+  <div class="oh-modal" id="penaltyModal" role="dialog" aria-hidden="true">
+    <div class="oh-modal__dialog" id="penaltyModalBody" style="max-width: 550px"></div>
+  </div>
+
+  <div
+      class="oh-modal"
+      id="attendanceExport"
+      role="dialog"
+      aria-labelledby="attendanceExport"
+      aria-hidden="true"
+    >
+      <div class="oh-modal__dialog">
+        <div class="oh-modal__dialog-header">
+          <h2 class="oh-modal__dialog-title" id="attendanceExportLavel">
+            {% trans "Export Late Come Early Out" %}
+          </h2>
+          <button class="oh-modal__close" aria-label="Close">
+            <ion-icon name="close-outline"></ion-icon>
+          </button>
+          <div
+            class="oh-modal__dialog-body p-0 pt-2"
+            id="attendanceExportModalBody"
+          >
+            <form
+              action="{% url 'late-come-early-out-info-export' %}"
+              method="get"
+              onsubmit="event.stopPropagation();$(this).parents().find('.oh-modal--show').last().toggleClass('oh-modal--show');"
+              id="attendanceExportForm"
+            >
+              {% csrf_token %} 
+              <div class="oh-dropdown__filter-footer">
+                <button class="oh-btn oh-btn--secondary oh-btn--small w-100 mb-4">
+                  {% trans "Export" %}
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    
+
+<script src="{% static 'cbv/attendance/hour_account.js' %}"></script>
+ 
+ 
+{% endblock content %}
\ No newline at end of file
diff --git a/attendance/templates/cbv/late_come_and_early_out/late_early_export.html b/attendance/templates/cbv/late_come_and_early_out/late_early_export.html
new file mode 100644
index 000000000..419465037
--- /dev/null
+++ b/attendance/templates/cbv/late_come_and_early_out/late_early_export.html
@@ -0,0 +1,168 @@
+{% load static %} {% load i18n %}
+<div class="oh-dropdown__filter-body" id="export_attendance_form">
+	<div class="oh-accordion">
+		<div class="oh-accordion-header">{% trans "Excel columns" %}</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">
+							<input type="checkbox" id="select-all-fields" /> {% trans "Select All" %}
+						</label>
+					</div>
+				</div>
+			</div>
+			<div class="row">
+				{% for field in export_form.selected_fields %}
+				<div class="col-sm-12 col-md-12 col-lg-6">
+					<div class="oh-input-group">
+						<label class="oh-label"> {{ field }} </label>
+					</div>
+				</div>
+				{% endfor %}
+			</div>
+		</div>
+	</div>
+	<div class="oh-accordion">
+		<div class="oh-accordion-header">{% trans "Work Info" %}</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" for="{{export.form.employee_id.id_for_label}}">{% trans "Employee" %}</label>
+						{{export.form.employee_id}}
+					</div>
+					<div class="oh-input-group">
+						<label class="oh-label" for="{{export.form.employee_id__employee_work_info__department_id.id_for_label}}">{% trans "Department" %}</label>
+						{{export.form.employee_id__employee_work_info__department_id}}
+					</div>
+					<div class="oh-input-group">
+						<label class="oh-label" for="{{export.form.attendance_id__shift_id.id_for_label}}">{% trans "Shift" %}</label>
+						{{export.form.attendance_id__shift_id}}
+					</div>
+					<div class="oh-input-group">
+						<label class="oh-label" for="{{export.form.employee_id__employee_work_info__reporting_manager_id.id_for_label}}">{% trans "Reporting Manager" %}</label>
+						{{export.form.employee_id__employee_work_info__reporting_manager_id}}
+					</div>
+				</div>
+				<div class="col-sm-12 col-md-12 col-lg-6">
+					<div class="oh-input-group">
+						<label class="oh-label" for="{{export.form.employee_id__employee_work_info__company_id.id_for_label}}">{% trans "Company" %}</label>
+						{{export.form.employee_id__employee_work_info__company_id}}
+					</div>
+					<div class="oh-input-group">
+						<label class="oh-label" for="{{export.form.employee_id__employee_work_info__job_position_id.id_for_label}}">{% trans "Job Position" %}</label>
+						{{export.form.employee_id__employee_work_info__job_position_id}}
+					</div>
+					<div class="oh-input-group">
+						<label class="oh-label" for="{{export.form.attendance_id__work_type_id.id_for_label}}">{% trans "Work Type" %}</label>
+						{{export.form.attendance_id__work_type_id}}
+					</div>
+					<div class="oh-input-group">
+						<label class="oh-label" for="{{export.form.employee_id__employee_work_info__location.id_for_label}}">{% trans "Work Location" %}</label>
+						{{export.form.employee_id__employee_work_info__location}}
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="oh-accordion">
+		<div class="oh-accordion-header">{% trans "Late Come/Early Out" %}</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" for="{{export.form.type.id_for_label}}">{% trans "Type" %}</label>
+						{{export.form.type}}
+					</div>
+					<div class="oh-input-group">
+						<label class="oh-label" for="{{export.form.attendance_date.id_for_label}}">{% trans "Attendance Date" %}</label>
+						{{export.form.attendance_date}}
+					</div>
+					<div class="oh-input-group">
+						<label class="oh-label" for="{{export.form.attendance_clock_out.id_for_label}}">{% trans "Out Time" %}</label>
+						{{export.form.attendance_clock_out}}
+					</div>
+					<div class="oh-input-group">
+						<label class="oh-label" for="{{export.form.attendance_id__attendance_validated.id_for_label}}">{% trans "Validated?" %}</label>
+						{{export.form.attendance_id__attendance_validated}}
+					</div>
+				</div>
+				<div class="col-sm-12 col-md-12 col-lg-6">
+					<div class="oh-input-group">
+						<label class="oh-label" for="{{export.form.attendance_id__minimum_hour.id_for_label}}">{% trans "Min Hour" %}</label>
+						{{export.form.attendance_id__minimum_hour}}
+					</div>
+					<div class="oh-input-group">
+						<label class="oh-label" for="{{export.form.attendance_clock_in.id_for_label}}">{% trans "In Time" %}</label>
+						{{export.form.attendance_clock_in}}
+					</div>
+					<div class="oh-input-group">
+						<label class="oh-label" for="{{export.form.attendance_id__attendance_overtime_approve.id_for_label}}">{% trans "OT Approved?" %}</label>
+						{{export.form.attendance_id__attendance_overtime_approve}}
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="oh-accordion">
+		<div class="oh-accordion-header">{% trans "Advanced" %}</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" for="{{export.form.attendance_date__gte.id_for_label}}">{% trans "Attendance From" %}</label>
+						{{export.form.attendance_date__gte}}
+					</div>
+					<div class="oh-input-group">
+						<label class="oh-label" for="{{export.form.attendance_clock_in__gte.id_for_label}}">{% trans "In From" %}</label>
+						{{export.form.attendance_clock_in__gte}}
+					</div>
+					<div class="oh-input-group">
+						<label class="oh-label" for="{{export.form.attendance_clock_out__gte.id_for_label}}">{% trans "Out From" %}</label>
+						{{export.form.attendance_clock_out__gte}}
+					</div>
+					<div class="oh-input-group">
+						<label class="oh-label" for="{{export.form.at_work_second__gte.id_for_label}}"
+							>{% trans "At Work Greater or Equal" %}</label
+						>
+						{{export.form.at_work_second__gte}}
+					</div>
+					<div class="oh-input-group">
+						<label class="oh-label" for="{{export.form.overtime_second__gte.id_for_label}}">{% trans "OT Greater or Equal" %}</label>
+						{{export.form.overtime_second__gte}}
+					</div>
+				</div>
+				<div class="col-sm-12 col-md-12 col-lg-6">
+					<div class="oh-input-group">
+						<label class="oh-label" for="{{export.form.attendance_date__lte.id_for_label}}">{% trans "Attendance Till" %}</label>
+						{{export.form.attendance_date__lte}}
+					</div>
+					<div class="oh-input-group">
+						<label class="oh-label" for="{{export.form.attendance_clock_in__lte.id_for_label}}">{% trans "In Till" %}</label>
+						{{export.form.attendance_clock_in__lte}}
+					</div>
+					<div class="oh-input-group">
+						<label class="oh-label" for="{{export.form.attendance_clock_out__lte.id_for_label}}">{% trans "Out Till" %}</label>
+						{{export.form.attendance_clock_out__lte}}
+					</div>
+					<div class="oh-input-group">
+						<label class="oh-label" for="{{export.form.at_work_second__lte.id_for_label}}"
+							>{% trans "At Work Less Than or Equal" %}</label
+						>
+						{{export.form.at_work_second__lte}}
+					</div>
+					<div class="oh-input-group">
+						<label class="oh-label" for="{{export.form.overtime_second__lte.id_for_label}}">{% trans "OT Less Than or Equal" %}</label>
+						{{export.form.overtime_second__lte}}
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
+<div class="oh-dropdown__filter-footer">
+    <button class="oh-btn oh-btn--secondary oh-btn--small w-100 mb-4">
+      {% trans "Export" %}
+    </button>
+  </div>
diff --git a/attendance/templates/cbv/late_come_and_early_out/late_early_filter.html b/attendance/templates/cbv/late_come_and_early_out/late_early_filter.html
new file mode 100644
index 000000000..3ac39e13f
--- /dev/null
+++ b/attendance/templates/cbv/late_come_and_early_out/late_early_filter.html
@@ -0,0 +1,145 @@
+{% load static %}
+{% load i18n %}
+  <div class="oh-dropdown__filter-body">
+    <div class="oh-accordion">
+    <div class="oh-accordion-header">{% trans "Work Info" %}</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" for="{{form.employee_id.id_for_label}}">{% trans "Employee" %}</label>
+            {{form.employee_id}}
+          </div>
+          <div class="oh-input-group">
+            <label class="oh-label" for="{{form.employee_id__employee_work_info__department_id.id_for_label}}">{% trans "Department" %}</label>
+            {{form.employee_id__employee_work_info__department_id}}
+          </div>
+          <div class="oh-input-group">
+            <label class="oh-label" for="{{form.attendance_id__shift_id.id_for_label}}">{% trans "Shift" %}</label>
+            {{form.attendance_id__shift_id}}
+          </div>
+          <div class="oh-input-group">
+            <label class="oh-label" for="{{form.employee_id__employee_work_info__reporting_manager_id.id_for_label}}">{% trans "Reporting Manager" %}</label>
+            {{form.employee_id__employee_work_info__reporting_manager_id}}
+          </div>
+
+
+        </div>
+        <div class="col-sm-12 col-md-12 col-lg-6">
+          <div class="oh-input-group">
+            <label class="oh-label" for="{{form.employee_id__employee_work_info__company_id.id_for_label}}">{% trans "Company" %}</label>
+            {{form.employee_id__employee_work_info__company_id}}
+          </div>
+          <div class="oh-input-group">
+            <label class="oh-label" for="{{form.employee_id__employee_work_info__job_position_id.id_for_label}}">{% trans "Job Position" %}</label>
+            {{form.employee_id__employee_work_info__job_position_id}}
+          </div>
+          <div class="oh-input-group">
+            <label class="oh-label" for="{{form.attendance_id__work_type_id.id_for_label}}">{% trans "Work Type" %}</label>
+            {{form.attendance_id__work_type_id}}
+          </div>
+          <div class="oh-input-group">
+            <label class="oh-label" for="{{form.employee_id__employee_work_info__location.id_for_label}}">{% trans "Work Location" %}</label>
+            {{form.employee_id__employee_work_info__location}}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  {% comment %} {{f.form}} {% endcomment %}
+  <div class="oh-accordion">
+    <div class="oh-accordion-header">{% trans "Late Come/Early Out" %}</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" for="{{form.type.id_for_label}}">{% trans "Type" %}</label>
+                {{form.type}}
+              </div>
+          <div class="oh-input-group">
+            <label class="oh-label" for="{{form.attendance_date.id_for_label}}">{% trans "Attendance Date" %}</label>
+            {{form.attendance_date}}
+          </div>
+          <div class="oh-input-group">
+            <label class="oh-label" for="{{form.attendance_clock_out.id_for_label}}">{% trans "Out Time" %}</label>
+                {{form.attendance_clock_out}}
+            </div>
+          <div class="oh-input-group">
+            <label class="oh-label" for="{{form.attendance_id__attendance_validated.id_for_label}}">{% trans "Validated?" %}</label>
+            {{form.attendance_id__attendance_validated}}
+          </div>
+        </div>
+        <div class="col-sm-12 col-md-12 col-lg-6">
+          <div class="oh-input-group">
+            <label class="oh-label" for="{{form.attendance_id__minimum_hour.id_for_label}}">{% trans "Min Hour" %}</label>
+            {{form.attendance_id__minimum_hour}}
+          </div>
+          <div class="oh-input-group">
+            <label class="oh-label" for="{{form.attendance_clock_in.id_for_label}}">{% trans "In Time" %}</label>
+            {{form.attendance_clock_in}}
+          </div>
+          <div class="oh-input-group">
+            <label class="oh-label" for="{{form.attendance_id__attendance_overtime_approve.id_for_label}}">{% trans "OT Approved?" %}</label>
+            {{form.attendance_id__attendance_overtime_approve}}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="oh-accordion">
+    <div class="oh-accordion-header">{% trans "Advanced" %}</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" for="{{form.attendance_date__gte.id_for_label}}">{% trans "Attendance From" %}</label>
+            {{form.attendance_date__gte}}
+          </div>
+          <div class="oh-input-group">
+            <label class="oh-label" for="{{form.attendance_clock_in__gte.id_for_label}}">{% trans "In From" %}</label>
+            {{form.attendance_clock_in__gte}}
+          </div>
+          <div class="oh-input-group">
+            <label class="oh-label" for="{{form.attendance_clock_out__gte.id_for_label}}">{% trans "Out From" %}</label>
+            {{form.attendance_clock_out__gte}}
+          </div>
+          <div class="oh-input-group">
+            <label class="oh-label" for="{{form.at_work_second__gte.id_for_label}}">{% trans "At Work Greater or Equal" %}</label>
+            {{form.at_work_second__gte}}
+          </div>
+          <div class="oh-input-group">
+            <label class="oh-label" for="{{form.overtime_second__gte.id_for_label}}">{% trans "OT Greater or Equal" %}</label>
+            {{form.overtime_second__gte}}
+          </div>
+        </div>
+        <div class="col-sm-12 col-md-12 col-lg-6">
+          <div class="oh-input-group">
+            <label class="oh-label" for="{{form.attendance_date__lte.id_for_label}}">{% trans "Attendance Till" %}</label>
+            {{form.attendance_date__lte}}
+          </div>
+          <div class="oh-input-group">
+            <label class="oh-label" for="{{form.attendance_clock_in__lte.id_for_label}}">{% trans "In Till" %}</label>
+            {{form.attendance_clock_in__lte}}
+          </div>
+          <div class="oh-input-group">
+            <label class="oh-label" for="{{form.attendance_clock_out__lte.id_for_label}}">{% trans "Out Till" %}</label>
+            {{form.attendance_clock_out__lte}}
+          </div>
+          <div class="oh-input-group">
+            <label class="oh-label" for="{{form.at_work_second__lte.id_for_label}}">{% trans "At Work Less Than or Equal" %}</label>
+            {{form.at_work_second__lte}}
+          </div>
+          <div class="oh-input-group">
+            <label class="oh-label" for="{{form.overtime_second__lte.id_for_label}}">{% trans "OT Less Than or Equal" %}</label>
+            {{form.overtime_second__lte}}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+
+</form>
+
+<script src="{% static '/base/filter.js' %}"></script>
diff --git a/attendance/templates/cbv/late_come_and_early_out/penality.html b/attendance/templates/cbv/late_come_and_early_out/penality.html
new file mode 100644
index 000000000..8830f2253
--- /dev/null
+++ b/attendance/templates/cbv/late_come_and_early_out/penality.html
@@ -0,0 +1,7 @@
+
+
+{% if instance.get_penalties_count %}
+<div class="" data-target="#penaltyViewModal" data-toggle="oh-modal-toggle" hx-get="{% url "view-penalties" %}?late_early_id={{instance.id}}" hx-target="#penaltyViewModalBody" align="center" style="background-color: rgba(229, 79, 56, 0.036); border: 2px solid rgb(229, 79, 56); border-radius: 18px; padding: 10px; font-weight: bold; width: 150px;" onclick="event.stopPropagation();">Penalties :{{instance.get_penalties_count}}</div>
+{% else %}
+<div class="" style="background-color: rgba(144, 238, 144, 0.036); border: 2px solid rgb(144, 238, 144); border-radius: 18px; padding: 10px;  width: 150px;" align="center">No Penalties</div>
+{% endif %}
\ No newline at end of file
diff --git a/attendance/templates/cbv/my_attendances/my_attendance_filter.html b/attendance/templates/cbv/my_attendances/my_attendance_filter.html
new file mode 100644
index 000000000..286d461a8
--- /dev/null
+++ b/attendance/templates/cbv/my_attendances/my_attendance_filter.html
@@ -0,0 +1,97 @@
+
+{% load i18n %} {% load basefilters %}
+<div class="oh-dropdown__filter-body">
+    <div class="oh-accordion">
+<div class="oh-accordion-header">{% trans "Attendance" %}</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 "Attendance Date" %}</label>
+      {{form.attendance_date}}
+    </div>
+    <div class="oh-input-group">
+      <label class="oh-label">{% trans "In Time" %}</label>
+      {{form.attendance_clock_in}}
+    </div>
+    <div class="oh-input-group">
+      <label class="oh-label">{% trans "Validated?" %}</label>
+      {{form.attendance_validated}}
+    </div>
+    <div class="oh-input-group">
+      <label class="oh-label">{% trans "Requested?" %}</label>
+      {{form.is_validate_request}}
+    </div>
+  </div>
+  <div class="col-sm-12 col-md-12 col-lg-6">
+    <div class="oh-input-group">
+      <label class="oh-label">{% trans "Min Hour" %}</label>
+      {{form.minimum_hour}}
+    </div>
+    <div class="oh-input-group">
+      <label class="oh-label">{% trans "Out Time" %}</label>
+      {{form.attendance_clock_out}}
+    </div>
+    <div class="oh-input-group">
+      <label class="oh-label">{% trans "OT Approved?" %}</label>
+      {{form.attendance_overtime_approve}}
+    </div>
+    <div class="oh-input-group">
+      <label class="oh-label">{% trans "Approved Request" %}</label>
+      {{form.is_validate_request_approved}}
+    </div>
+  </div>
+</div>
+</div>
+</div>
+<div class="oh-accordion">
+<div class="oh-accordion-header">{% trans "Advanced" %}</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 "Attendance From" %}</label>
+      {{form.attendance_date__gte}}
+    </div>
+    <div class="oh-input-group">
+      <label class="oh-label">{% trans "In From" %}</label>
+      {{form.attendance_clock_in__lte}}
+    </div>
+    <div class="oh-input-group">
+      <label class="oh-label">{% trans "Out From" %}</label>
+      {{form.attendance_clock_out__lte}}
+    </div>
+    <div class="oh-input-group">
+      <label class="oh-label">{% trans "At Work Greater or Equal" %}</label>
+      {{form.at_work_second__gte}}
+    </div>
+    <div class="oh-input-group">
+      <label class="oh-label">{% trans "OT Greater or Equal" %}</label>
+      {{form.overtime_second__gte}}
+    </div>
+  </div>
+  <div class="col-sm-12 col-md-12 col-lg-6">
+    <div class="oh-input-group">
+      <label class="oh-label">{% trans "Attendance Till" %}</label>
+      {{form.attendance_date__lte}}
+    </div>
+    <div class="oh-input-group">
+      <label class="oh-label">{% trans "In Till" %}</label>
+      {{form.attendance_clock_in__lte}}
+    </div>
+    <div class="oh-input-group">
+      <label class="oh-label">{% trans "Out Till" %}</label>
+      {{form.attendance_clock_out__lte}}
+    </div>
+    <div class="oh-input-group">
+      <label class="oh-label">{% trans "At Work Less Than or Equal" %}</label>
+      {{form.at_work_second__lte}}
+    </div>
+    <div class="oh-input-group">
+      <label class="oh-label">{% trans "OT Less Than or Equal" %}</label>
+      {{form.overtime_second__lte}}
+    </div>
+  </div>
+</div>
+</div>
+</div>
diff --git a/attendance/templates/cbv/my_attendances/my_attendances.html b/attendance/templates/cbv/my_attendances/my_attendances.html
new file mode 100644
index 000000000..3566d4f0d
--- /dev/null
+++ b/attendance/templates/cbv/my_attendances/my_attendances.html
@@ -0,0 +1,99 @@
+
+
+
+{% extends "index.html" %}
+{% load i18n %}{% load static %}
+
+
+{% block content %}
+<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+
+
+
+
+<meta name="csrf-token" content="{{ csrf_token }}">
+
+
+
+<style>
+.validated--dot{
+  background-color:yellowgreen;
+}
+.not-validated--dot{
+  background-color:red;
+}
+.requested--dot{
+  background-color:orange;
+}
+.approved-request--dot{
+  background-color:blue;
+}
+.validated-True{
+  border-left: 3.4px solid yellowgreen !important;
+  border-radius: 4px 0 0 4px;
+
+}
+.validated-False {
+
+  border-left: 3.4px solid red !important;
+  border-radius: 4px 0 0 4px;
+
+
+}
+.requested-True {
+
+  border-left: 3.4px solid orange !important;
+  border-radius: 4px 0 0 4px;
+
+}
+.approved-request-True {
+
+  border-left: 3.4px solid blue !important;
+  border-radius: 4px 0 0 4px;
+
+}
+
+
+
+
+
+</style>
+
+<div hx-get="{% url "my-attendance-nav" %}" hx-trigger="load">
+</div>  
+{% comment %} my_app/templates/my_app/generic/index.html {% endcomment %}
+
+
+
+{% include "generic/components.html" %}
+
+
+<div
+    class="oh-checkpoint-badge mb-2"
+    id="selectedInstances"
+    data-ids="[]"
+    data-clicked=""
+    style="display: none"
+  ></div>
+
+  
+  <div 
+  class="oh-wrapper" 
+  id="listContainer">
+  <div class="animated-background">
+  </div>
+</div>
+
+
+
+<div class="oh-activity-sidebar" id="activitySidebar" style="z-index: 1000">
+    <div class="oh-activity-sidebar__body" id="commentContainer"></div>
+  </div>
+
+
+
+<script src="{% static 'cbv/shift_request/shift_request_bulk_actions.js' %}"></script>
+ 
+ 
+{% endblock content %}
\ No newline at end of file
diff --git a/attendance/templates/cbv/settings/applicable_on_clock_in_col.html b/attendance/templates/cbv/settings/applicable_on_clock_in_col.html
new file mode 100644
index 000000000..f1ca0c4ed
--- /dev/null
+++ b/attendance/templates/cbv/settings/applicable_on_clock_in_col.html
@@ -0,0 +1,7 @@
+<div class="oh-switch">
+    {% if perms.attendance.change_gracetime %}
+        <input type="checkbox" id="isAllowedClockIn" data-id ="{{instance.id}}" data-update ="clock_in" class="oh-switch__checkbox" {% if instance.allowed_clock_in %} checked {% endif %} onchange="updateAllowedClockInOrOut(this)">
+    {% else %}
+        <input type="checkbox" id="isAllowedClockIn" class="oh-switch__checkbox" {% if instance.allowed_clock_in %} checked {% endif %} disabled>
+    {% endif %}
+</div>
\ No newline at end of file
diff --git a/attendance/templates/cbv/settings/applicable_on_clock_out_col.html b/attendance/templates/cbv/settings/applicable_on_clock_out_col.html
new file mode 100644
index 000000000..1639b3482
--- /dev/null
+++ b/attendance/templates/cbv/settings/applicable_on_clock_out_col.html
@@ -0,0 +1,7 @@
+<div class="oh-switch">
+    {% if perms.attendance.change_gracetime %}
+        <input type="checkbox" id="isAllowedClockOut" data-id ="{{instance.id}}" data-update ="clock_out" class="oh-switch__checkbox" {% if instance.allowed_clock_out %} checked {% endif %} onchange="updateAllowedClockInOrOut(this)">
+    {% else %}
+        <input type="checkbox" id="isAllowedClockOut" class="oh-switch__checkbox" {% if instance.allowed_clock_out %} checked {% endif %} disabled>
+    {% endif %}
+</div>
\ No newline at end of file
diff --git a/attendance/templates/cbv/settings/break_point_action.html b/attendance/templates/cbv/settings/break_point_action.html
new file mode 100644
index 000000000..931dba837
--- /dev/null
+++ b/attendance/templates/cbv/settings/break_point_action.html
@@ -0,0 +1,8 @@
+{% load i18n %}
+{% load static %}
+{% if perms.attendance.change_attendancevalidationcondition %}
+         <a hx-get="{% url 'break-point-update-form' instance.id %}?instance_ids={{instance.ordered_ids}}"
+          hx-target="#genericModalBody" type="button" class="oh-btn oh-btn--info"
+           data-toggle="oh-modal-toggle" data-target="#genericModal">{% trans 'Edit' %}
+        </a>
+{% endif %}
\ No newline at end of file
diff --git a/attendance/templates/cbv/settings/check_in_check_out_col.html b/attendance/templates/cbv/settings/check_in_check_out_col.html
new file mode 100644
index 000000000..5fe97eb05
--- /dev/null
+++ b/attendance/templates/cbv/settings/check_in_check_out_col.html
@@ -0,0 +1,21 @@
+{% load i18n %}
+<div class="oh-switch">
+    <input type="hidden" name="setting_Id" value="{{instance.id}}"
+        id="companyId{{instance.id}}">
+    <input type="checkbox" name="isChecked" class="oh-switch__checkbox"
+        {% if instance.enable_check_in %} checked {% endif %}
+        {% if perms.attendance.change_attendancegeneralsetting %}
+            hx-post="{% url 'enable-disable-check-in' %}" hx-target="#attendance-activity-container" hx-trigger="change"
+            hx-include="#companyId{{instance.id}}" hx-on-htmx-after-request="setTimeout(() => { reloadMessage(); }, 200);"
+            {% if request.session.selected_company == 'all'  %} 
+                {% if not instance.company_id %}
+                    hx-swap="innerHTML"
+                {% else %}
+                    hx-swap="none"
+                {% endif %}
+            {% else %}
+                hx-swap="innerHTML"
+            {% endif %}
+        {% endif %}
+    >
+</div>
\ No newline at end of file
diff --git a/attendance/templates/cbv/settings/grace_time_default_action.html b/attendance/templates/cbv/settings/grace_time_default_action.html
new file mode 100644
index 000000000..84cc5b1dc
--- /dev/null
+++ b/attendance/templates/cbv/settings/grace_time_default_action.html
@@ -0,0 +1,40 @@
+{% load i18n %}
+
+{% if perms.attendance.change_gracetime%}
+    <div class="oh-btn-group">
+        {% if perms.base.change_employeeshift %}
+            <a hx-get="{% url "assign-shift" instance.id %}"
+                hx-target="#objectUpdateModalTarget" type="button" data-toggle="oh-modal-toggle"
+                data-target="#objectUpdateModal" data-toggle="oh-modal-toggle" type="button"
+                class="oh-btn oh-btn--light-bkg w-50" title="{% trans 'Assign shift' %}">
+                <ion-icon name="alarm-outline"></ion-icon>
+            </a>
+        {% endif %}
+        {% if perms.base.change_gracetime %}
+            <a hx-get="{% url 'grace-time-update' instance.id %}?instance_ids={{instance.ordered_ids}}&default={% if instance.is_default %}True{% else %}False{% endif %}"
+                hx-target="#genericModalBody" type="button" data-toggle="oh-modal-toggle"
+                data-target="#genericModal" data-toggle="oh-modal-toggle" type="button"
+                class="oh-btn oh-btn--light-bkg w-50" title="{% trans 'Edit' %}">
+                <ion-icon name="create-outline"></ion-icon>
+            </a>
+        {% endif %}
+        {% if perms.base.delete_gracetime %}
+            <button
+                class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100"
+                title="{% trans 'Remove' %}"
+                hx-get="{% url 'generic-delete' %}?model=attendance.gracetime&pk={{instance.pk}}" 
+                data-toggle="oh-modal-toggle" 
+                data-target="#deleteConfirmation" 
+                hx-target="#deleteConfirmationBody"
+            >
+                <ion-icon name="trash-outline" class="text-danger"></ion-icon>
+            </button>
+        {% else %}
+            <button type="submit"
+                class="oh-btn oh-btn--danger-outline oh-btn--light-bkg oh-btn-disabled w-100"
+                title="{% trans 'Delete' %}">
+                <ion-icon name="trash-outline "></ion-icon>
+            </button>
+        {% endif %}
+    </div>
+{% endif %}
diff --git a/attendance/templates/cbv/settings/grace_time_shift.html b/attendance/templates/cbv/settings/grace_time_shift.html
new file mode 100644
index 000000000..f665a7b7a
--- /dev/null
+++ b/attendance/templates/cbv/settings/grace_time_shift.html
@@ -0,0 +1,8 @@
+{% load i18n %}
+{% if instance.employee_shift.all %}
+{% for shift in instance.employee_shift.all %}
+    {{shift}}<br/>
+{% endfor %}
+{% else %}
+{% trans "Nil" %}
+{% endif %}
\ No newline at end of file
diff --git a/attendance/templates/cbv/settings/is_active_col_grace_time.html b/attendance/templates/cbv/settings/is_active_col_grace_time.html
new file mode 100644
index 000000000..b2aa3ce09
--- /dev/null
+++ b/attendance/templates/cbv/settings/is_active_col_grace_time.html
@@ -0,0 +1,11 @@
+
+{% load i18n %}
+{% if perms.attendance.change_gracetime %}
+<div class="oh-switch">
+    {% if perms.attendance.change_gracetime %}
+        <input type="checkbox" id="isActive" data-id ="{{instance.id}}" class="oh-switch__checkbox" {% if instance.is_active %} checked {% endif %} onchange="updateGracetimeIsActivate(this)">
+    {% else %}
+        <input type="checkbox" id="isActive" class="oh-switch__checkbox" {% if instance.is_active %} checked {% endif %} disabled>
+    {% endif %}
+</div>
+{% endif %}
\ No newline at end of file
diff --git a/attendance/templates/requests/attendance/form_field.html b/attendance/templates/requests/attendance/form_field.html
index 662e0ac4d..aae4f68c2 100644
--- a/attendance/templates/requests/attendance/form_field.html
+++ b/attendance/templates/requests/attendance/form_field.html
@@ -1,6 +1,23 @@
 {% load i18n %}
-<label class="oh-label" for="id_{{field.name }}" title="{{field.help_text|safe }}">{{field.label}}</label>
-{{field}}
+{% load widget_tweaks %}
+{% comment %} <label class="oh-label" for="id_{{field.name }}" title="{{field.help_text|safe }}">{{field.label}}</label>
+{{field}} {% endcomment %}
+    <div class="oh-label__info" for="id_{{ field.name }}">
+      <label class="oh-label {% if field.field.required %} required-star{% endif %}" for="id_{{ field.name }}"
+        >{% trans field.label %}</label
+      >
+      {% if field.help_text != '' %}
+      <span
+        class="oh-info mr-2"
+        title="{{ field.help_text|safe }}"
+      ></span>
+      {% endif %}
+    </div>
+    <div id="dynamic_field_{{field.name}}">
+        {{ field|add_class:'form-control' }}
+        {{ field.errors }}
+      </div>
+
 <script>
     $(document).ready(function () {
         $("select").on("select2:select", function (e) {
diff --git a/attendance/templates/requests/attendance/individual_view.html b/attendance/templates/requests/attendance/individual_view.html
index 397b410c2..76169440a 100644
--- a/attendance/templates/requests/attendance/individual_view.html
+++ b/attendance/templates/requests/attendance/individual_view.html
@@ -1,13 +1,13 @@
 {% load i18n %} {% load basefilters %}
 <div class="oh-modal__dialog oh-modal__dialog--navigation m-0 p-0">
-    <button hx-get="{% url 'validate-attendance-request' previous %}?requests_ids={{requests_ids}}"
+    <button hx-get="{% url 'validate-attendance-request' previous %}?requests_ids={{request.GET.instance_ids}}"
         hx-target="#validateAttendanceRequestModalBody" class="oh-modal__diaglog-nav oh-modal__nav-prev"
         data-action="previous">
         <ion-icon name="chevron-back-outline" class="md hydrated" role="img"
             aria-label="chevron back outline"></ion-icon>
     </button>
 
-    <button hx-get="{% url 'validate-attendance-request' next %}?requests_ids={{requests_ids}}"
+    <button hx-get="{% url 'validate-attendance-request' next %}?requests_ids={{request.GET.instance_ids}}"
         hx-target="#validateAttendanceRequestModalBody" class="oh-modal__diaglog-nav oh-modal__nav-next"
         data-action="next">
         <ion-icon name="chevron-forward-outline" class="md hydrated" role="img"
@@ -101,8 +101,8 @@
         </a>
         {% endif %}
         {% if request.user|is_reportingmanager or perms.attendance.change_attendance %}
-        <a hx-get="{% url 'edit-validate-attendance' attendance.id %}"
-            hx-target="#editValidateAttendanceRequestModalBody" data-target="#editValidateAttendanceRequest"
+        <a hx-get="{% url 'update-attendance-request' attendance.id %}?detail_view=true"
+            hx-target="#genericModalEditBody" data-target="#genericModalEdit"
             data-toggle="oh-modal-toggle" class="oh-btn oh-btn--info w-100">
             <ion-icon name="create-outline"></ion-icon>
             {% trans "Edit" %}
diff --git a/attendance/templates/requests/attendance/request_new_form.html b/attendance/templates/requests/attendance/request_new_form.html
index 7a0055537..7126dddae 100644
--- a/attendance/templates/requests/attendance/request_new_form.html
+++ b/attendance/templates/requests/attendance/request_new_form.html
@@ -10,7 +10,7 @@
     </div>
     <div class="oh-modal__dialog-body">
         <div class="oh-general__tab-target oh-profile-section" id="personal">
-            <form hx-post="{% url 'request-new-attendance' %}?bulk={{bulk}}" hx-target="#objectCreateModalTarget" id="attendanceRequestForm">
+            <form hx-post="{% url 'request-new-attendance' %}"  id="attendanceRequestForm" hx-encoding="multipart/form-data">
                 {% csrf_token %}
                 <div class="oh-profile-section__card">
                     <div class="row">
@@ -53,7 +53,7 @@
 
                     <div class="d-flex flex-row-reverse">
                         <button type="submit" class="oh-btn oh-btn--secondary mt-2 mr-0 pl-4 pr-5 oh-btn--w-100-resp">
-                            {% trans "Request" %}
+                          {% trans "Save" %}
                         </button>
                     </div>
                 </div>
diff --git a/attendance/templatetags/attendancefilters.py b/attendance/templatetags/attendancefilters.py
index 809ca26f9..b18345d79 100644
--- a/attendance/templatetags/attendancefilters.py
+++ b/attendance/templatetags/attendancefilters.py
@@ -14,9 +14,10 @@ from django.forms.widgets import SelectMultiple, Textarea
 from django.template import TemplateSyntaxError
 from django.template.defaultfilters import register
 
-from attendance.models import AttendanceValidationCondition
+from attendance.models import Attendance, AttendanceValidationCondition
 from attendance.views.views import strtime_seconds
 from base.models import EmployeeShiftSchedule
+from employee.models import Employee
 from horilla.horilla_middlewares import _thread_locals
 
 register = template.Library()
diff --git a/attendance/urls.py b/attendance/urls.py
index 56e5fd8b2..33b4ee800 100644
--- a/attendance/urls.py
+++ b/attendance/urls.py
@@ -14,12 +14,157 @@ import attendance.views.penalty
 import attendance.views.requests
 import attendance.views.search
 import base
+from attendance.cbv import (
+    attendance_activity,
+    attendance_request,
+    attendance_tab,
+    attendances,
+    break_point,
+    check_in_check_out,
+    dashboard,
+    dashboard_offline_online,
+    grace_time,
+    hour_account,
+    late_come_and_early_out,
+    my_attendances,
+)
 from base.forms import AttendanceAllowedIPForm
 from base.models import AttendanceAllowedIP
 
 from .views import views
 
 urlpatterns = [
+    path(
+        "individual-panlty-list-view/<int:pk>/",
+        attendances.PenaltyAccountListView.as_view(),
+        name="individual-panlty-list-view",
+    ),
+    path(
+        "attendance-activity-view/",
+        attendance_activity.AttendanceActivityView.as_view(),
+        name="attendance-activity-view",
+    ),
+    path(
+        "attendance-activity-search/",
+        attendance_activity.AttendanceActivityListView.as_view(),
+        name="attendance-activity-search",
+    ),
+    path(
+        "attendance-nav-view/",
+        attendance_activity.AttendanceActivityNavView.as_view(),
+        name="attendance-nav-view",
+    ),
+    path(
+        "attendance-bulk-export/",
+        attendance_activity.AttendanceBulkExport.as_view(),
+        name="attendance-bulk-export",
+    ),
+    path(
+        "attendance-activity-single-view/<int:pk>/",
+        attendance_activity.AttendanceDetailView.as_view(),
+        name="attendance-activity-single-view",
+    ),
+    # path(
+    #     "activity-attendance-delete/<int:obj_id>",
+    #     attendance_activity.AttendanceActivityDeleteView.as_view(),
+    #     name="activity-attendance-delete",
+    # ),
+    path(
+        "attendance-view/",
+        attendances.AttendancesView.as_view(),
+        name="attendance-view",
+    ),
+    path(
+        "attendances-list-view/",
+        attendances.AttendancesListView.as_view(),
+        name="attendances-list-view",
+    ),
+    path(
+        "attendances-tab-view/",
+        attendances.AttendancesTabView.as_view(),
+        name="attendances-tab-view",
+    ),
+    path(
+        "attendances-navbar-view/",
+        attendances.AttendancesNavView.as_view(),
+        name="attendances-navbar-view",
+    ),
+    path(
+        "attendences-navbar-export/",
+        attendances.AttendancesExportNav.as_view(),
+        name="attendences-navbar-export",
+    ),
+    path(
+        "validate-attendance-tab/",
+        attendances.ValidateAttendancesList.as_view(),
+        name="validate-attendance-tab",
+    ),
+    path(
+        "validate-attendance-individual-tab/<int:pk>/",
+        attendances.ValidateAttendancesIndividualTabView.as_view(),
+        name="validate-attendance-individual-tab",
+    ),
+    path(
+        "ot-attendance-tab/",
+        attendances.OTAttendancesList.as_view(),
+        name="ot-attendance-tab",
+    ),
+    path(
+        "validated-attendance-tab/",
+        attendances.ValidatedAttendancesList.as_view(),
+        name="validated-attendance-tab",
+    ),
+    path(
+        "validate-detail-view/<int:pk>",
+        attendances.ValidateDetailView.as_view(),
+        name="validate-detail-view",
+    ),
+    path(
+        "individual-validate-detail-view/<int:pk>",
+        attendances.ValidateAttendancesIndividualDetailView.as_view(),
+        name="individual-validate-detail-view",
+    ),
+    path(
+        "ot-detail-view/<int:pk>",
+        attendances.OtDetailView.as_view(),
+        name="ot-detail-view",
+    ),
+    path(
+        "validated-detail-view/<int:pk>",
+        attendances.ValidatedDetailView.as_view(),
+        name="validated-detail-view",
+    ),
+    path(
+        "attendance-create",
+        attendances.AttendancesFormView.as_view(),
+        name="attendance-create",
+    ),
+    path(
+        "break-point-list/",
+        break_point.BreakPointList.as_view(),
+        name="break-point-list",
+    ),
+    path(
+        "break-point-navbar/",
+        break_point.BreakPointNavView.as_view(),
+        name="break-point-navbar",
+    ),
+    path(
+        "break-point-create-form/",
+        break_point.BreakPointCreateForm.as_view(),
+        name="break-point-create-form",
+    ),
+    path(
+        "break-point-update-form/<int:pk>/",
+        break_point.BreakPointCreateForm.as_view(),
+        name="break-point-update-form",
+    ),
+    # path("attendance-create", views.attendance_create, name="attendance-create"),
+    path(
+        "update-shift-details",
+        views.form_shift_dynamic_data,
+        name="update-shift-details",
+    ),
     path(
         "profile-attendance-tab",
         views.profile_attendance_tab,
@@ -39,17 +184,22 @@ urlpatterns = [
     path(
         "attendance-info-export", views.attendance_export, name="attendance-info-export"
     ),
-    path("attendance-view/", views.attendance_view, name="attendance-view"),
+    # path("attendance-view/", views.attendance_view, name="attendance-view"),
     path(
         "attendance-search",
         attendance.views.search.attendance_search,
         name="attendance-search",
     ),
     path(
-        "attendance-update/<int:obj_id>/",
-        views.attendance_update,
+        "attendance-update/<int:pk>/",
+        attendances.AttendanceUpdateFormView.as_view(),
         name="attendance-update",
     ),
+    # path(
+    #     "attendance-update/<int:obj_id>/",
+    #     views.attendance_update,
+    #     name="attendance-update",
+    # ),
     path(
         "attendance-delete/<int:obj_id>/",
         views.attendance_delete,
@@ -60,9 +210,14 @@ urlpatterns = [
         views.attendance_bulk_delete,
         name="attendance-bulk-delete",
     ),
+    # path(
+    #     "attendance-overtime-create",
+    #     views.attendance_overtime_create,
+    #     name="attendance-overtime-create",
+    # ),
     path(
         "attendance-overtime-create",
-        views.attendance_overtime_create,
+        hour_account.HourAccountFormView.as_view(),
         name="attendance-overtime-create",
     ),
     path(
@@ -70,19 +225,24 @@ urlpatterns = [
         views.attendance_account_export,
         name="attendance-account-info-export",
     ),
+    # path(
+    #     "attendance-overtime-view/",
+    #     views.attendance_overtime_view,
+    #     name="attendance-overtime-view",
+    # ),
+    # path(
+    #     "attendance-overtime-search",
+    #     attendance.views.search.attendance_overtime_search,
+    #     name="attendance-ot-search",
+    # ),
+    # path(
+    #     "attendance-overtime-update/<int:obj_id>/",
+    #     views.attendance_overtime_update,
+    #     name="attendance-overtime-update",
+    # ),
     path(
-        "attendance-overtime-view/",
-        views.attendance_overtime_view,
-        name="attendance-overtime-view",
-    ),
-    path(
-        "attendance-overtime-search",
-        attendance.views.search.attendance_overtime_search,
-        name="attendance-ot-search",
-    ),
-    path(
-        "attendance-overtime-update/<int:obj_id>/",
-        views.attendance_overtime_update,
+        "attendance-overtime-update/<int:pk>/",
+        hour_account.HourAccountFormView.as_view(),
         name="attendance-overtime-update",
     ),
     path(
@@ -90,21 +250,21 @@ urlpatterns = [
         views.attendance_overtime_delete,
         name="attendance-overtime-delete",
     ),
-    path(
-        "attendance-activity-view/",
-        views.attendance_activity_view,
-        name="attendance-activity-view",
-    ),
-    path(
-        "attendance-activity-single-view/<int:obj_id>/",
-        views.activity_single_view,
-        name="attendance-activity-single-view",
-    ),
-    path(
-        "attendance-activity-search",
-        attendance.views.search.attendance_activity_search,
-        name="attendance-activity-search",
-    ),
+    # path(
+    #     "attendance-activity-view/",
+    #     views.attendance_activity_view,
+    #     name="attendance-activity-view",
+    # ),
+    # path(
+    #     "attendance-activity-single-view/<int:obj_id>/",
+    #     views.activity_single_view,
+    #     name="attendance-activity-single-view",
+    # ),
+    # path(
+    #     "attendance-activity-search",
+    #     attendance.views.search.attendance_activity_search,
+    #     name="attendance-activity-search",
+    # ),
     path(
         "attendance-activity-delete/<int:obj_id>/",
         views.attendance_activity_delete,
@@ -130,7 +290,7 @@ urlpatterns = [
         views.attendance_activity_export,
         name="attendance-activity-info-export",
     ),
-    path("view-my-attendance/", views.view_my_attendance, name="view-my-attendance"),
+    # path("view-my-attendance/", views.view_my_attendance, name="view-my-attendance"),
     path(
         "filter-own-attendance",
         attendance.views.search.filter_own_attendance,
@@ -148,21 +308,21 @@ urlpatterns = [
         views.on_time_view,
         name="on-time-view",
     ),
-    path(
-        "late-come-early-out-view/",
-        views.late_come_early_out_view,
-        name="late-come-early-out-view",
-    ),
-    path(
-        "late-in-early-out-single-view/<int:obj_id>/",
-        views.late_in_early_out_single_view,
-        name="late-in-early-out-single-view",
-    ),
-    path(
-        "late-come-early-out-search",
-        attendance.views.search.late_come_early_out_search,
-        name="late-come-early-out-search",
-    ),
+    # path(
+    #     "late-come-early-out-view/",
+    #     views.late_come_early_out_view,
+    #     name="late-come-early-out-view",
+    # ),
+    # path(
+    #     "late-in-early-out-single-view/<int:obj_id>/",
+    #     views.late_in_early_out_single_view,
+    #     name="late-in-early-out-single-view",
+    # ),
+    # path(
+    #     "late-come-early-out-search",
+    #     attendance.views.search.late_come_early_out_search,
+    #     name="late-come-early-out-search",
+    # ),
     path(
         "late-come-early-out-delete/<int:obj_id>/",
         views.late_come_early_out_delete,
@@ -256,16 +416,26 @@ urlpatterns = [
         attendance.views.requests.request_attendance,
         name="request-attendance",
     ),
-    path(
-        "request-attendance-view/",
-        attendance.views.requests.request_attendance_view,
-        name="request-attendance-view",
-    ),
+    # path(
+    #     "request-attendance-view/",
+    #     attendance.views.requests.request_attendance_view,
+    #     name="request-attendance-view",
+    # ),
     path(
         "request-attendance/<int:attendance_id>/",
         attendance.views.requests.attendance_request_changes,
         name="attendance-change",
     ),
+    path(
+        "not-in-yet/",
+        dashboard_offline_online.DashboardOfflineEmployees.as_view(),
+        name="not-in-yet",
+    ),
+    path(
+        "not-out-yet/",
+        dashboard_offline_online.DashboardOnlineEmployees.as_view(),
+        name="not-out-yet",
+    ),
     path(
         "validate-attendance-request/<int:attendance_id>/",
         attendance.views.requests.validate_attendance_request,
@@ -306,11 +476,26 @@ urlpatterns = [
         attendance.views.requests.bulk_approve_attendance_request,
         name="bulk-approve-attendance-request",
     ),
+    # path(
+    #     "request-new-attendance",
+    #     attendance.views.requests.request_new,
+    #     name="request-new-attendance",
+    # ),
     path(
         "request-new-attendance",
-        attendance.views.requests.request_new,
+        attendance_request.NewAttendanceRequestFormView.as_view(),
         name="request-new-attendance",
     ),
+    path(
+        "request-bulk-attendance",
+        attendance_request.BulkAttendanceRequestFormView.as_view(),
+        name="request-bulk-attendance",
+    ),
+    path(
+        "update-attendance-request/<int:pk>/",
+        attendance_request.UpdateAttendanceRequestFormView.as_view(),
+        name="update-attendance-request",
+    ),
     path(
         "create-batch-attendance",
         attendance.views.requests.create_batch_attendance,
@@ -348,6 +533,16 @@ urlpatterns = [
         views.user_request_one_view,
         name="user-request-one-view",
     ),
+    #    path(
+    #     "get-attendance-activities/<int:obj_id>",
+    #     views.get_attendance_activities,
+    #     name="get-attendance-activities",
+    # ),
+    path(
+        "get-attendance-activities/<int:pk>",
+        attendances.AttendanceDetailActivityList.as_view(),
+        name="get-attendance-activities",
+    ),
     path(
         "get-attendance-activities/<int:obj_id>",
         views.get_attendance_activities,
@@ -446,11 +641,111 @@ urlpatterns = [
         attendance.views.requests.get_employee_shift,
         name="get-employee-shift",
     ),
+    path(
+        "view-my-attendance/",
+        my_attendances.MyAttendances.as_view(),
+        name="view-my-attendance",
+    ),
+    path(
+        "my-attendance-list/",
+        my_attendances.MyAttendanceList.as_view(),
+        name="my-attendance-list",
+    ),
+    path(
+        "my-attendance-nav/",
+        my_attendances.MyAttendancestNav.as_view(),
+        name="my-attendance-nav",
+    ),
+    path(
+        "my-attendance-detail/<int:pk>/",
+        my_attendances.MyAttendancesDetailView.as_view(),
+        name="my-attendance-detail",
+    ),
+    path(
+        "attendance-overtime-view/",
+        hour_account.HourAccount.as_view(),
+        name="attendance-overtime-view",
+    ),
+    path(
+        "attendance-overtime-search",
+        hour_account.HourAccountList.as_view(),
+        name="attendance-ot-search",
+    ),
+    path(
+        "attendance-overtime-individual-tab/<int:pk>/",
+        attendance_tab.HourAccountIndividualTabView.as_view(),
+        name="attendance-overtime-individual-tab",
+    ),
+    path(
+        "all-attendances-individual-tab/<int:pk>/",
+        attendance_tab.AllAttendancesList.as_view(),
+        name="all-attendances-individual-tab",
+    ),
+    path(
+        "hour-account-nav/",
+        hour_account.HourAccountNav.as_view(),
+        name="hour-account-nav",
+    ),
+    path(
+        "hour-account-export/",
+        hour_account.HourExportView.as_view(),
+        name="hour-account-export",
+    ),
+    path(
+        "hour-account-detail-view/<int:pk>/",
+        hour_account.HourAccountDetailView.as_view(),
+        name="hour-account-detail-view",
+    ),
+    path(
+        "late-come-early-out-view/",
+        late_come_and_early_out.LateComeAndEarlyOut.as_view(),
+        name="late-come-early-out-view",
+    ),
+    path(
+        "late-come-early-out-search/",
+        late_come_and_early_out.LateComeAndEarlyOutList.as_view(),
+        name="late-come-early-out-search",
+    ),
+    path(
+        "late-come-and-early-out-nav/",
+        late_come_and_early_out.LateComeAndEarlyOutListNav.as_view(),
+        name="late-come-and-early-out-nav",
+    ),
+    path(
+        "late-come-and-early-out-export/",
+        late_come_and_early_out.LateEarlyExportView.as_view(),
+        name="late-come-and-early-out-export",
+    ),
     path(
         "cut-penalty/<int:instance_id>/",
         attendance.views.penalty.cut_available_leave,
         name="cut-penalty",
     ),
+    # path(
+    #     "dashboard-overtime-approve",
+    #     attendance.views.dashboard.dashboard_overtime_approve,
+    #     name="dashboard-overtime-approve",
+    # ),
+    path(
+        "dashboard-overtime-approve",
+        dashboard.DashboardaAttendanceOT.as_view(),
+        name="dashboard-overtime-approve",
+    ),
+    # path(
+    #     "dashboard-attendance-validate",
+    #     attendance.views.dashboard.dashboard_attendance_validate,
+    #     name="dashboard-attendance-validate",
+    # ),
+    path(
+        "dashboard-attendance-validate",
+        dashboard.DashboardAttendanceToValidate.as_view(),
+        name="dashboard-attendance-validate",
+    ),
+    path(
+        "dashboard-on-break",
+        dashboard.DashboardOnBreak.as_view(),
+        name="dashboard-on-break",
+    ),
     path(
         "attendance-settings-view/",
         views.validation_condition_view,
@@ -528,6 +823,91 @@ urlpatterns = [
             "field_name_pre": "ip_address",
         },
     ),
+    path(
+        "late-in-early-out-single-view/<int:pk>/",
+        late_come_and_early_out.LateComeEarlyOutDetailView.as_view(),
+        name="late-in-early-out-single-view",
+    ),
+    path(
+        "request-attendance-view/",
+        attendance_request.AttendancesRequestView.as_view(),
+        name="request-attendance-view",
+    ),
+    path(
+        "attendance-request-tab/",
+        attendance_request.AttendancesRequestTabView.as_view(),
+        name="attendance-request-tab",
+    ),
+    path(
+        "attendance-request-list/",
+        attendance_request.AttendancesRequestListView.as_view(),
+        name="attendance-request-list",
+    ),
+    path(
+        "attendance-request-list-tab/",
+        attendance_request.AttendanceRequestListTab.as_view(),
+        name="attendance-request-list-tab",
+    ),
+    path(
+        "attendance-request-individual-tab/<int:pk>/",
+        attendance_tab.RequestedAttendanceIndividualView.as_view(),
+        name="attendance-request-individual-tab",
+    ),
+    path(
+        "attendance-list-tab/",
+        attendance_request.AttendanceListTab.as_view(),
+        name="attendance-list-tab",
+    ),
+    path(
+        "attendance-request-nav/",
+        attendance_request.AttendanceRequestNav.as_view(),
+        name="attendance-request-nav",
+    ),
+    path(
+        "attendances-tab-detail-view/<int:pk>",
+        attendance_request.AttendanceListTabDetailView.as_view(),
+        name="attendances-tab-detail-view",
+    ),
+    path(
+        "default-grace-time-list",
+        grace_time.DefaultGraceTimeList.as_view(),
+        name="default-grace-time-list",
+    ),
+    path(
+        "default-grace-time-nav",
+        grace_time.DefaultGraceTimeNav.as_view(),
+        name="default-grace-time-nav",
+    ),
+    path(
+        "grace-time-nav",
+        grace_time.GraceTimeNav.as_view(),
+        name="grace-time-nav",
+    ),
+    path(
+        "grace-time-create/",
+        grace_time.GraceTimeFormView.as_view(),
+        name="grace-time-create",
+    ),
+    path(
+        "grace-time-update/<int:pk>/",
+        grace_time.GraceTimeFormView.as_view(),
+        name="grace-time-update",
+    ),
+    path(
+        "grace-time-list",
+        grace_time.GraceTimeList.as_view(),
+        name="grace-time-list",
+    ),
+    path(
+        "check-in-check-out-list",
+        check_in_check_out.CheckInCheckOutListView.as_view(),
+        name="check-in-check-out-list",
+    ),
+    path(
+        "check-in-check-out-nav",
+        check_in_check_out.CheckInCheckOutNavBar.as_view(),
+        name="check-in-check-out-nav",
+    ),
     path(
         "settings/geo-face-config/",
         attendance.views.geofaceconfig.geofaceconfig,
diff --git a/attendance/views/penalty.py b/attendance/views/penalty.py
index 81d18e336..3dc49bc46 100644
--- a/attendance/views/penalty.py
+++ b/attendance/views/penalty.py
@@ -50,7 +50,6 @@ def cut_available_leave(request, instance_id):
             penalty.employee_id = instance.employee_id
             penalty.late_early_id = instance
             penalty.penalty_amount = penalty_instance.penalty_amount
-
             if apps.is_installed("leave"):
                 penalty.leave_type_id = penalty_instance.leave_type_id
                 penalty.minus_leaves = penalty_instance.minus_leaves
diff --git a/attendance/views/process_attendance_data.py b/attendance/views/process_attendance_data.py
index 1221038b5..32f5c2d26 100644
--- a/attendance/views/process_attendance_data.py
+++ b/attendance/views/process_attendance_data.py
@@ -179,7 +179,6 @@ def process_attendance_data(attendance_dicts):
                         "Attendance check out date in future"
                     )
                     save = False
-
             if save:
                 attendance_list.append(
                     Attendance(
diff --git a/attendance/views/requests.py b/attendance/views/requests.py
index 1eb275712..b9a5a9ac9 100644
--- a/attendance/views/requests.py
+++ b/attendance/views/requests.py
@@ -181,7 +181,12 @@ def request_new(request):
     form.fields["employee_id"].queryset = form.fields[
         "employee_id"
     ].queryset | Employee.objects.filter(employee_user_id=request.user)
+
     form.fields["employee_id"].initial = request.user.employee_get.id
+    if request.GET.get("emp_id"):
+        emp_id = request.GET.get("emp_id")
+        form.fields["employee_id"].queryset = Employee.objects.filter(id=emp_id)
+        form.fields["employee_id"].initial = emp_id
     if request.method == "POST":
         form = NewRequestForm(request.POST)
         form = choosesubordinates(request, form, "attendance.change_attendance")
@@ -347,7 +352,7 @@ def attendance_request_changes(request, attendance_id):
         if shift_id is None or not len(shift_id):
             form.add_error("shift_id", "This field is required")
         if form.is_valid():
-            # commit already set to False
+            # commit already set to False in the form save method
             # so the changes not affected to the db
             instance = form.save()
             instance.employee_id = attendance.employee_id
@@ -478,7 +483,10 @@ def approve_validate_attendance_request(request, attendance_id):
         # DUE TO AFFECT THE OVERTIME CALCULATION ON SAVE METHOD, SAVE THE INSTANCE ONCE MORE
         attendance = Attendance.objects.get(id=attendance_id)
         attendance.save()
-
+    if attendance.request_type == "create_request":
+        attendance.request_type = "created_request"
+        attendance.requested_data = None
+        attendance.save()
     if (
         attendance.attendance_clock_out is None
         or attendance.attendance_clock_out_date is None
@@ -522,7 +530,6 @@ def approve_validate_attendance_request(request, attendance_id):
         early_out(
             attendance, start_time=start_time_sec, end_time=end_time_sec, shift=shift
         )
-
     messages.success(request, _("Attendance request has been approved"))
     employee = attendance.employee_id
     notify.send(
diff --git a/attendance/views/views.py b/attendance/views/views.py
index 27dab0ac7..65b651904 100644
--- a/attendance/views/views.py
+++ b/attendance/views/views.py
@@ -25,7 +25,7 @@ import io
 import json
 from collections import defaultdict
 from datetime import date, datetime, timedelta
-from urllib.parse import parse_qs
+from urllib.parse import parse_qs, urlparse
 
 import pandas as pd
 from django.contrib import messages
@@ -173,7 +173,7 @@ def profile_attendance_tab(request):
 
 @login_required
 @manager_can_enter("employee.view_employee")
-def attendance_tab(request, emp_id):
+def attendance_tab(request, pk):
     """
     This function is used to view attendance tab of an employee in individual view.
 
@@ -186,16 +186,16 @@ def attendance_tab(request, emp_id):
 
     requests = Attendance.objects.filter(
         is_validate_request=True,
-        employee_id=emp_id,
+        employee_id=pk,
     )
     attendances_ids = json.dumps([instance.id for instance in requests])
     validate_attendances = Attendance.objects.filter(
-        attendance_validated=False, employee_id=emp_id
+        attendance_validated=False, employee_id=pk
     )
     validate_attendances_ids = json.dumps(
         [instance.id for instance in validate_attendances]
     )
-    accounts = AttendanceOverTime.objects.filter(employee_id=emp_id)
+    accounts = AttendanceOverTime.objects.filter(employee_id=pk)
     accounts_ids = json.dumps([instance.id for instance in accounts])
 
     context = {
@@ -726,6 +726,7 @@ def attendance_overtime_delete(request, obj_id):
     hx_target = request.META.get("HTTP_HX_TARGET", None)
     try:
         attendance = AttendanceOverTime.objects.get(id=obj_id)
+        employee_id = attendance.employee_id.id
         attendance.delete()
         if hx_target == "ot-table":
             messages.success(request, _("Hour account deleted."))
@@ -738,7 +739,17 @@ def attendance_overtime_delete(request, obj_id):
     if hx_target and hx_target == "ot-table":
         hour_account = AttendanceOverTime.objects.all()
         if hour_account.exists():
-            return redirect(f"/attendance/attendance-overtime-search?{previous_data}")
+            path = request.META.get("HTTP_HX_CURRENT_URL", None)
+            parsed_url = urlparse(path)
+            parsed_path = parsed_url.path.lstrip("/")
+            if parsed_path == "attendance/attendance-overtime-view/":
+                return redirect(
+                    f"/attendance/attendance-overtime-search?{previous_data}"
+                )
+            else:
+                return redirect(
+                    f"/attendance/attendance-overtime-individual-tab/{employee_id}/?deleted=true"
+                )
         else:
             return HttpResponse("<script>window.location.reload()</script>")
     elif hx_target:
@@ -773,6 +784,50 @@ def attendance_account_bulk_delete(request):
     return JsonResponse({"message": "Success"})
 
 
+@login_required
+def form_shift_dynamic_data(request):
+    """
+    This method is used to update the shift details to the form
+    """
+    shift_id = request.POST["shift_id"]
+    attendance_date_str = request.POST.get("attendance_date")
+    today = datetime.now()
+    attendance_date = date(day=today.day, month=today.month, year=today.year)
+    if attendance_date_str is not None and attendance_date_str != "":
+        attendance_date = datetime.strptime(attendance_date_str, "%Y-%m-%d").date()
+    day = attendance_date.strftime("%A").lower()
+    schedule_today = EmployeeShiftSchedule.objects.filter(
+        shift_id__id=shift_id, day__day=day
+    ).first()
+    shift_start_time = ""
+    shift_end_time = ""
+    minimum_hour = "00:00"
+    attendance_clock_out_date = attendance_date
+    if schedule_today is not None:
+        shift_start_time = schedule_today.start_time
+        shift_end_time = schedule_today.end_time
+        minimum_hour = schedule_today.minimum_working_hour
+        if shift_end_time < shift_start_time:
+            attendance_clock_out_date = attendance_date + timedelta(days=1)
+    worked_hour = minimum_hour
+    if attendance_date == date(day=today.day, month=today.month, year=today.year):
+        shift_end_time = datetime.now().strftime("%H:%M")
+        worked_hour = "00:00"
+
+    minimum_hour = attendance_day_checking(str(attendance_date), minimum_hour)
+
+    return JsonResponse(
+        {
+            "shift_start_time": shift_start_time,
+            "shift_end_time": shift_end_time,
+            "checkin_date": attendance_date.strftime("%Y-%m-%d"),
+            "minimum_hour": minimum_hour,
+            "worked_hour": worked_hour,
+            "checkout_date": attendance_clock_out_date.strftime("%Y-%m-%d"),
+        }
+    )
+
+
 @login_required
 def attendance_activity_view(request):
     """
@@ -846,7 +901,7 @@ def activity_single_view(request, obj_id):
 def attendance_activity_delete(request, obj_id):
     """
     This method is used to delete attendance activity
-    args:
+    args:attendance-activity-delete
         obj_id : attendance activity id
     """
     request_copy = request.GET.copy()
@@ -859,6 +914,7 @@ def attendance_activity_delete(request, obj_id):
         messages.error(request, _("Attendance activity Does not exists.."))
     except ProtectedError:
         messages.error(request, _("You cannot delete this activity"))
+
     if not request.GET.get("instances_ids"):
         return redirect(f"/attendance/attendance-activity-search?{previous_data}")
     else:
@@ -870,7 +926,7 @@ def attendance_activity_delete(request, obj_id):
             json.loads(instances_ids), obj_id
         )
         return redirect(
-            f"/attendance/attendance-activity-single-view/{next_instance}/?{previous_data}&instances_ids={instances_list}"
+            f"/attendance/attendance-activity-single-view/{next_instance}/?{previous_data}&instance_ids={instances_list}&deleted=true"
         )
 
 
@@ -1212,7 +1268,7 @@ def late_come_early_out_delete(request, obj_id):
             json.loads(instances_ids), obj_id
         )
         return redirect(
-            f"/attendance/late-in-early-out-single-view/{next_instance}/?{previous_data}&instances_ids={instances_list}"
+            f"/attendance/late-in-early-out-single-view/{next_instance}/?{previous_data}&instance_ids={instances_list}&deleted=true"
         )
 
 
@@ -1225,18 +1281,15 @@ def late_come_early_out_bulk_delete(request):
     """
     ids = request.POST["ids"]
     ids = json.loads(ids)
+    del_ids = []
     for attendance_id in ids:
         try:
             late_come = AttendanceLateComeEarlyOut.objects.get(id=attendance_id)
             late_come.delete()
-            messages.success(
-                request,
-                _("{employee} Late-in early-out deleted.").format(
-                    employee=late_come.employee_id
-                ),
-            )
+            del_ids.append(late_come)
         except (AttendanceLateComeEarlyOut.DoesNotExist, OverflowError, ValueError):
             messages.error(request, _("Attendance not found."))
+    messages.success(request, _("{} Late-in early-out deleted.".format(len(del_ids))))
     return JsonResponse({"message": "Success"})
 
 
@@ -1473,12 +1526,13 @@ def approve_bulk_overtime(request):
     """
     ids = request.POST["ids"]
     ids = json.loads(ids)
+    otapprove_ids = []
     for attendance_id in ids:
         try:
             attendance = Attendance.objects.get(id=attendance_id)
             attendance.attendance_overtime_approve = True
             attendance.save()
-            messages.success(request, _("Overtime approved"))
+            otapprove_ids.append(attendance)
             notify.send(
                 request.user.employee_get,
                 recipient=attendance.employee_id.employee_user_id,
@@ -1497,6 +1551,9 @@ def approve_bulk_overtime(request):
             )
         except (Attendance.DoesNotExist, OverflowError, ValueError):
             messages.error(request, _("Attendance not found"))
+    if otapprove_ids:
+        messages.success(request, _(" {} Overtime approved".format(len(otapprove_ids))))
+
     return JsonResponse({"message": "Success"})
 
 
@@ -1544,14 +1601,20 @@ def update_fields_based_shift(request):
 
     employee_ids = (
         request.GET.get("employee_id")
-        if hx_target == "attendanceUpdateForm" or hx_target == "attendanceRequestDiv"
+        if hx_target == "attendanceUpdate"
+        or hx_target == "attendanceRequest"
+        or hx_target == "attendanceUpdateFormFields"
+        or hx_target == "attendanceFormFields"
         else request.GET.getlist("employee_id")
     )
     employee_queryset = (
         (
             Employee.objects.get(id=employee_ids)
-            if hx_target == "attendanceUpdateForm"
+            if hx_target == "attendanceUpdate"
             or hx_target == "attendanceRequestDiv"
+            or hx_target == "attendanceRequest"
+            or hx_target == "attendanceUpdateFormFields"
+            or hx_target == "attendanceFormFields"
             else Employee.objects.filter(id__in=employee_ids)
         )
         if employee_ids
@@ -1609,10 +1672,10 @@ def update_fields_based_shift(request):
     }
     form = (
         AttendanceUpdateForm(initial=initial_data)
-        if hx_target == "attendanceUpdateForm"
+        if hx_target == "attendanceUpdate" or hx_target == "attendanceUpdateFormFields"
         else (
             NewRequestForm(initial=initial_data)
-            if hx_target == "attendanceRequestDiv"
+            if hx_target == "attendanceRequest"
             else AttendanceForm(initial=initial_data)
         )
     )
@@ -1623,6 +1686,41 @@ def update_fields_based_shift(request):
     )
 
 
+@login_required
+@hx_request_required
+def update_worked_hour_field(request):
+    """
+    Update the worked hour field based on clock-in and clock-out times.
+
+    This view function calculates the total worked hours for an employee
+    by parsing the clock-in and clock-out dates and times from the request
+    parameters. It computes the duration between the two times and formats
+    the result as a string in the "HH:MM" format. The computed worked hours
+    are then initialized in an AttendanceForm, which is rendered in the
+    specified HTML template.
+    """
+    clock_in = parse_datetime(
+        request.GET.get("attendance_clock_in_date"),
+        request.GET.get("attendance_clock_in"),
+    )
+    clock_out = parse_datetime(
+        request.GET.get("attendance_clock_out_date"),
+        request.GET.get("attendance_clock_out"),
+    )
+
+    total_seconds = (
+        (clock_out - clock_in).total_seconds() if clock_in and clock_out else -1
+    )
+    hours, minutes = divmod(max(total_seconds, 0), 3600)
+    worked_hours_str = f"{int(hours):02}:{int(minutes // 60):02}"
+    form = AttendanceForm(initial={"attendance_worked_hour": worked_hours_str})
+    return render(
+        request,
+        "attendance/attendance/update_hx_form.html",
+        {"request": request, "form": form},
+    )
+
+
 @login_required
 @hx_request_required
 def update_worked_hour_field(request):
@@ -1950,6 +2048,7 @@ def create_grace_time(request):
 @permission_required("base.change_employeeshift")
 def assign_shift(request, grace_id):
     gracetime = GraceTime.objects.filter(id=grace_id).first() if grace_id else None
+
     if gracetime:
         form = GraceTimeAssignForm()
         if request.method == "POST":
@@ -2013,19 +2112,32 @@ def delete_grace_time(request, grace_id):
     GET : return grace time form template
     """
     try:
-        GraceTime.objects.get(id=grace_id).delete()
+        delete_error = False
+        default_grace_time_count = GraceTime.objects.filter(is_default=True).count()
+        grace_time_count = GraceTime.objects.filter(is_default=False).count()
+        grace_time = GraceTime.objects.get(id=grace_id)
+        grace_time_type = grace_time.is_default
+        grace_time.delete()
         messages.success(request, _("Grace time deleted successfully."))
     except GraceTime.DoesNotExist:
+        delete_error = True
         messages.error(request, _("Grace Time Does not exists.."))
     except ProtectedError:
+        delete_error = True
         messages.error(request, _("Related datas exists."))
-    context = {
-        "condition": AttendanceValidationCondition.objects.first(),
-        "default_grace_time": GraceTime.objects.filter(is_default=True).first(),
-        "grace_times": GraceTime.objects.all().exclude(is_default=True),
-    }
-
-    return render(request, "attendance/grace_time/grace_time_table.html", context)
+    if delete_error:
+        if grace_time_type:
+            return HttpResponse(
+                "<script>$('#default-containerReload').click();</script>"
+            )
+        return HttpResponse("<script>$('#gracetime-containerReload').click();</script>")
+    elif default_grace_time_count == 1 and grace_time_type:
+        return HttpResponse(
+            "<script>$('#default-containerReload').click();$('.defaultGraceNav').click();</script>"
+        )
+    elif grace_time_count == 1 and not grace_time_type:
+        return HttpResponse("<script>$('#gracetime-containerReload').click();</script>")
+    return HttpResponse("<script>$('#reloadMessagesButton').click();</script>")
 
 
 @login_required
diff --git a/base/announcement.py b/base/announcement.py
index 6df76eeed..d033b46e8 100644
--- a/base/announcement.py
+++ b/base/announcement.py
@@ -114,6 +114,7 @@ def create_announcement(request):
                 employee_work_info__job_position_id__in=job_positions
             )
             anou.employees.add(*employees)
+            anou.save()
 
             notify.send(
                 request.user.employee_get,
diff --git a/base/cbv/__init__.py b/base/cbv/__init__.py
new file mode 100644
index 000000000..e69de29bb
diff --git a/base/cbv/announcement_cbv.py b/base/cbv/announcement_cbv.py
new file mode 100644
index 000000000..d7f205b13
--- /dev/null
+++ b/base/cbv/announcement_cbv.py
@@ -0,0 +1,88 @@
+"""
+Announcement page
+"""
+from django.http import HttpResponse
+from base.forms import AnnouncementForm
+from base.models import Announcement
+from employee.models import Employee
+from horilla_views.cbv_methods import login_required, permission_required
+from django.utils.decorators import method_decorator
+from horilla_views.generic.cbv.views import HorillaFormView
+from django.utils.translation import gettext_lazy as _
+from django.contrib import messages
+from django.contrib.auth.models import User
+from notifications.signals import notify
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(
+    permission_required(perm="base.add_announcement"), name="dispatch"
+)
+class AnnouncementFormView(HorillaFormView):
+    """
+    form view for create button
+    """
+
+    form_class = AnnouncementForm
+    model = Announcement
+    new_display_title = _("Create Announcements.")
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        if self.form.instance.pk:
+            self.form_class.verbose_name = _("Edit Announcement.")
+
+        return context
+
+    def form_valid(self, form: AnnouncementForm) -> HttpResponse:
+        if form.is_valid():
+            if form.instance.pk:
+                message = _("Announcement updated successfully.")
+            else:
+                message = _("Announcement created successfully.")
+            anou, attachment_ids = form.save(commit=False)
+            anou.save()
+            anou.attachments.set(attachment_ids)
+            employees = form.cleaned_data["employees"]
+            departments = form.cleaned_data["department"]
+            job_positions = form.cleaned_data["job_position"]
+            anou.department.set(departments)
+            anou.job_position.set(job_positions)
+            emp_dep = User.objects.filter(
+            employee_get__employee_work_info__department_id__in=departments
+            )
+            emp_jobs = User.objects.filter(
+                employee_get__employee_work_info__job_position_id__in=job_positions
+            )
+            employees = employees | Employee.objects.filter(
+                employee_work_info__department_id__in=departments
+            )
+            employees = employees | Employee.objects.filter(
+                employee_work_info__job_position_id__in=job_positions
+            )
+            anou.employees.add(*employees)
+            notify.send(
+            self.request.user.employee_get,
+            recipient=emp_dep,
+            verb="Your department was mentioned in a post.",
+            verb_ar="تم ذكر قسمك في منشور.",
+            verb_de="Ihr Abteilung wurde in einem Beitrag erwähnt.",
+            verb_es="Tu departamento fue mencionado en una publicación.",
+            verb_fr="Votre département a été mentionné dans un post.",
+            redirect="/",
+            icon="chatbox-ellipses",
+            )
+            notify.send(
+                self.request.user.employee_get,
+                recipient=emp_jobs,
+                verb="Your job position was mentioned in a post.",
+                verb_ar="تم ذكر وظيفتك في منشور.",
+                verb_de="Ihre Arbeitsposition wurde in einem Beitrag erwähnt.",
+                verb_es="Tu puesto de trabajo fue mencionado en una publicación.",
+                verb_fr="Votre poste de travail a été mentionné dans un post.",
+                redirect="/",
+                icon="chatbox-ellipses",
+            )
+            messages.success(self.request, message)
+            return HttpResponse("<script>window.location.reload();</script>")
+        return super().form_valid(form)
diff --git a/base/cbv/company.py b/base/cbv/company.py
new file mode 100644
index 000000000..2c3710a99
--- /dev/null
+++ b/base/cbv/company.py
@@ -0,0 +1,207 @@
+"""
+this page is handling the cbv methods for company in settings
+"""
+
+from typing import Any
+from django import forms
+from django.http import HttpResponse
+from django.shortcuts import render
+from django.urls import reverse
+from django.contrib import messages
+from django.utils.decorators import method_decorator
+from django.utils.translation import gettext_lazy as _
+from base.filters import CompanyFilter
+from base.forms import CompanyForm
+from base.models import Company
+from horilla_views.cbv_methods import login_required, permission_required
+from horilla_views.forms import DynamicBulkUpdateForm
+from horilla_views.generic.cbv.views import (
+    HorillaFormView,
+    HorillaListView,
+    HorillaNavView,
+)
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(permission_required(perm="base.view_company"), name="dispatch")
+class CompanyListView(HorillaListView):
+    """
+    list view for company in settings
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("company-list")
+        self.actions = []
+        if self.request.user.has_perm("base.change_company"):
+            self.actions.append(
+                {
+                    "action": _("Edit"),
+                    "icon": "create-outline",
+                    "attrs": """
+                        class="oh-btn oh-btn--light-bkg w-100"
+                        hx-get='{get_update_url}?instance_ids={ordered_ids}'
+								hx-target="#genericModalBody"
+								data-toggle="oh-modal-toggle"
+								data-target="#genericModal"
+                      """,
+                }
+            )
+        if self.request.user.has_perm("base.delete_company"):
+            self.actions.append(
+                {
+                    "action": _("Delete"),
+                    "icon": "trash-outline",
+                    "attrs": """
+                            class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100"
+                            hx-get="{get_delete_url}?model=base.company&pk={pk}"
+                            data-toggle="oh-modal-toggle"
+                            data-target="#deleteConfirmation"
+                            hx-target="#deleteConfirmationBody"
+                        """,
+                }
+            )
+
+    model = Company
+    filter_class = CompanyFilter
+
+    bulk_template = "cbv/settings/company_bulk_update.html"
+    bulk_update_fields = ["country", "state", "city", "zip"]
+
+    def get_bulk_form(self):
+        """
+        Bulk from generating method
+        """
+
+        form = DynamicBulkUpdateForm(
+            root_model=Company, bulk_update_fields=self.bulk_update_fields
+        )
+
+        form.fields["country"] = forms.ChoiceField(
+            widget=forms.Select(
+                attrs={
+                    "class": "oh-select oh-select-2",
+                    "required": True,
+                    "style": "width: 100%; height:45px;",
+                }
+            )
+        )
+
+        form.fields["state"] = forms.ChoiceField(
+            widget=forms.Select(
+                attrs={
+                    "class": "oh-select oh-select-2",
+                    "required": True,
+                    "style": "width: 100%; height:45px;",
+                }
+            )
+        )
+
+        return form
+
+    columns = [
+        (_("Company"), "company_icon_with_name"),
+        (_("Is Hq"), "hq"),
+        (_("Address"), "address"),
+        (_("Country"), "country"),
+        (_("State"), "state"),
+        (_("City"), "city"),
+        (_("Zip"), "zip"),
+    ]
+
+    sortby_mapping = [
+        ("Company", "company_icon_with_name"),
+        ("Country", "country"),
+        ("State", "state"),
+        ("City", "city"),
+        ("Zip", "zip"),
+    ]
+
+    row_attrs = """
+                id="companyTr{get_delete_instance}"
+                """
+
+    header_attrs = {
+        "company_icon_with_name": """ style="width:180px !important" """,
+    }
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(permission_required(perm="base.view_company"), name="dispatch")
+class CompanyNavView(HorillaNavView):
+    """
+    nav bar of the department view
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("company-list")
+        if self.request.user.has_perm("base.add_company"):
+            self.create_attrs = f"""
+                                onclick = "event.stopPropagation();"
+                                data-toggle="oh-modal-toggle"
+                                data-target="#genericModal"
+                                hx-target="#genericModalBody"
+                                hx-get="{reverse('company-create-form')}"
+                                """
+
+    nav_title = _("Company")
+    search_swap_target = "#listContainer"
+    filter_instance = CompanyFilter()
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(permission_required(perm="base.add_company"), name="dispatch")
+class CompanyCreateForm(HorillaFormView):
+    """
+    form view for creating and editing company in settings
+    """
+
+    model = Company
+    form_class = CompanyForm
+    template_name = "cbv/settings/company_inherit.html"
+    new_display_title = _("Create Company")
+
+    def get_form(self, form_class=None):
+        form = super().get_form(form_class)
+
+        if self.form.instance.pk:
+            self.form_class.verbose_name = _("Update Company")
+
+        form.fields["country"].widget = forms.Select(
+            attrs={
+                "class": "oh-select oh-select-2",
+            }
+        )
+        form.fields["state"].widget = forms.Select(
+            attrs={"class": "oh-select oh-select-2"}
+        )
+        return form
+
+    def form_invalid(self, form: Any) -> HttpResponse:
+        """
+        Handles and renders form errors or defers to superclass.
+        """
+
+        if self.form.instance.pk:
+            self.form_class.verbose_name = _("Update Company")
+
+        if not form.is_valid():
+            errors = form.errors.as_data()
+            return render(
+                self.request, self.template_name, {"form": form, "errors": errors}
+            )
+        return super().form_invalid(form)
+
+    def form_valid(self, form: CompanyForm) -> HttpResponse:
+        if form.is_valid():
+            form.save()
+            if self.form.instance.pk:
+                messages.success(self.request, _("Company have been successfully updated."))
+            else:
+                messages.success(
+                    self.request, _("Company have been successfully created.")
+                )
+            return self.HttpResponse()
+
+        return super().form_valid(form)
diff --git a/base/cbv/company_leaves.py b/base/cbv/company_leaves.py
new file mode 100644
index 000000000..78b28a709
--- /dev/null
+++ b/base/cbv/company_leaves.py
@@ -0,0 +1,153 @@
+"""
+this page is handling the cbv methods of company leaves page
+"""
+
+from typing import Any
+from django.http import HttpResponse
+from django.contrib import messages
+from django.urls import reverse, reverse_lazy
+from django.utils.decorators import method_decorator
+from django.utils.translation import gettext_lazy as _
+from horilla_views.generic.cbv.views import (
+    HorillaDetailedView,
+    TemplateView,
+    HorillaListView,
+    HorillaNavView,
+    HorillaFormView,
+)
+from horilla_views.cbv_methods import login_required, permission_required
+from base.filters import CompanyLeaveFilter
+from base.models import CompanyLeaves
+from base.forms import CompanyLeaveForm
+
+
+@method_decorator(login_required, name="dispatch")
+class CompanyLeavesView(TemplateView):
+    """
+    for page view
+    """
+
+    template_name = "cbv/company_leaves/company_leave_home.html"
+
+
+@method_decorator(login_required, name="dispatch")
+class CompanyleaveListView(HorillaListView):
+    """
+    list view
+    """
+
+    filter_class = CompanyLeaveFilter
+    model = CompanyLeaves
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("company-leave-list")
+        self.view_id = "companyleavedelete"
+
+        if self.request.user.has_perm("view_companyleave"):
+            self.action_method = "company_leave_actions"
+
+    columns = [
+        (_("Based On Week"), "custom_based_on_week"),
+        (_("Based On Week Day"), "based_on_week_day_col"),
+    ]
+
+    header_attrs = {
+        "custom_based_on_week": """
+                                style="width:200px !important;"
+                                """,
+        
+        "based_on_week_day_col": """
+                                style="width:200px !important;"
+                                """, 
+         "action": """
+                                style="width:200px !important;"
+                                """,                  
+    }
+
+    sortby_mapping = [
+        ("Based On Week", "custom_based_on_week"),
+        ("Based On Week Day", "based_on_week_day_col"),
+    ]
+
+    row_attrs = """
+                hx-get='{detail_view}?instance_ids={ordered_ids}'
+                hx-target="#genericModalBody"
+                data-target="#genericModal"
+                data-toggle="oh-modal-toggle"
+                """
+
+@method_decorator(login_required, name="dispatch")
+class CompanyLeaveNavView(HorillaNavView):
+    """
+    nav bar
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("company-leave-list")
+        if self.request.user.has_perm("add_companyleave"):
+            self.create_attrs = f"""
+                hx-get="{reverse_lazy('company-leave-creation')}"
+                hx-target="#genericModalBody"
+                data-target="#genericModal"
+                data-toggle="oh-modal-toggle"
+            """
+
+    nav_title = _("Company Leaves")
+    filter_body_template = "cbv/company_leaves/company_leave_filter.html"
+    filter_form_context_name = "form"
+    filter_instance = CompanyLeaveFilter()
+    search_swap_target = "#listContainer"
+
+
+@method_decorator(login_required, name="dispatch")
+class CompanyLeaveDetailView(HorillaDetailedView):
+    """
+    detail view of the page
+    """
+
+    model = CompanyLeaves
+    title = _("Details")
+    header = {
+        "title": "get_detail_title",
+        "subtitle": "",
+        "avatar": "get_avatar"
+    }
+    body = {
+        (_("Based On Week"), "custom_based_on_week"),
+        (_("Based On Week Day"), "based_on_week_day_col"),
+
+    }
+    action_method = "detail_view_actions"
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(permission_required("leave.add_companyleave"),name="dispatch")
+class CompanyleaveFormView(HorillaFormView):
+    """
+    form view for create button
+    """
+
+    form_class = CompanyLeaveForm
+    model = CompanyLeaves
+    new_display_title = _("Create Company Leaves")
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        if self.form.instance.pk:
+            self.form_class.verbose_name = _("Update Company Leaves")
+
+        return context
+
+    def form_valid(self, form: CompanyLeaveForm) -> HttpResponse:
+        if form.is_valid():
+            if form.instance.pk:
+                message = _("Company Leave Updated Successfully")
+            else:
+                message = _("New Company Leave Created Successfully")
+            form.save()
+
+            messages.success(self.request, message)
+            return self.HttpResponse()
+        return super().form_valid(form)
diff --git a/base/cbv/dashboard/dashboard.py b/base/cbv/dashboard/dashboard.py
new file mode 100644
index 000000000..7af4c44c5
--- /dev/null
+++ b/base/cbv/dashboard/dashboard.py
@@ -0,0 +1,257 @@
+"""
+This page handles the cbv methods for dashboard views
+"""
+
+from typing import Any
+from django.http import HttpResponse
+from django.urls import reverse
+from datetime import datetime
+from django.utils.decorators import method_decorator
+from django.contrib import messages
+from base.cbv.work_type_request import WorkRequestListView
+from django.utils.translation import gettext_lazy as _
+from base.decorators import manager_can_enter
+from base.filters import AnnouncementFilter, AnnouncementViewFilter
+from base.methods import filtersubordinates
+from base.models import Announcement, AnnouncementView
+from employee.filters import EmployeeWorkInformationFilter
+from employee.forms import (
+    EmployeeWorkInformationUpdateForm,
+)
+from employee.models import EmployeeWorkInformation
+from horilla_views.generic.cbv.views import HorillaFormView, HorillaListView
+from horilla_views.cbv_methods import login_required, permission_required
+from base.cbv.shift_request import ShiftRequestList
+
+
+@method_decorator(login_required, name="dispatch")
+class DashboardWorkTypeRequest(WorkRequestListView):
+    """
+    work type request view in dashboard
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("dashboard-work-type-request")
+        self.request.dashboard = "dashboard"
+
+    def get_queryset(self):
+        """
+        queryset to filter data based on permission
+        """
+        queryset = HorillaListView.get_queryset(self)
+        queryset = queryset.filter(
+            employee_id__is_active=True, approved=False, canceled=False
+        )
+        queryset = filtersubordinates(
+            self.request, queryset, "base.add_worktyperequest"
+        )
+        return queryset
+
+    columns = [
+        (_("Employee"), "employee_id", "employee_id__get_avatar"),
+        (_("Requested Work Type"), "work_type_id"),
+    ]
+
+    row_attrs = """
+                hx-get='{detail_view}?instance_ids={ordered_ids}&dashboard=true'
+                hx-target="#genericModalBody"
+                data-target="#genericModal"
+                data-toggle="oh-modal-toggle"
+                """
+    header_attrs = {
+        "action": """
+                        style ="width:100px !important"
+                        """,
+        "employee_id": """
+                        style ="width:100px !important"
+                        """,
+        "work_type_id": """
+                        style ="width:100px !important"
+                        """,
+    }
+
+    records_per_page = 3
+
+    option_method = None
+    row_status_indications = None
+
+    bulk_select_option = False
+
+
+@method_decorator(login_required, name="dispatch")
+class ShiftRequestToApprove(ShiftRequestList):
+
+    bulk_select_option = False
+
+    columns = [
+        (_("Employee"), "employee_id", "employee_id__get_avatar"),
+        (_("Requested Shift"), "shift_id"),
+    ]
+
+    header_attrs = {
+        "action": """
+                        style ="width:100px !important"
+                        """,
+        "employee_id": """
+                        style ="width:100px !important"
+                        """,
+        "shift_id": """
+                        style ="width:100px !important"
+                        """,
+    }
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("dashboard-shift-request")
+
+    row_attrs = """
+                hx-get='{shift_details}?instance_ids={ordered_ids}&dashboard=true'
+                hx-target="#genericModalBody"
+                data-target="#genericModal"
+                data-toggle="oh-modal-toggle"
+                """
+
+    records_per_page = 3
+    option_method = None
+    row_status_indications = None
+
+    bulk_select_option = False
+
+    def get_queryset(self):
+        queryset = HorillaListView.get_queryset(self)
+        queryset = queryset.filter(
+            approved=False, canceled=False, employee_id__is_active=True
+        )
+        queryset = filtersubordinates(self.request, queryset, "base.add_shiftrequest")
+        return queryset
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(
+    manager_can_enter("employee.view_employeeworkinformation"), name="dispatch"
+)
+class EmployeeWorkInformationList(HorillaListView):
+    """
+    Employee work information progress list
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.view_id = "pending"
+        self.search_url = reverse("emp-workinfo-complete")
+
+    model = EmployeeWorkInformation
+    filter_class = EmployeeWorkInformationFilter
+    bulk_select_option = False
+    show_toggle_form = False
+
+    columns = [
+        (_("Employee"), "employee_id"),
+        (_("Progress"), "progress_col"),
+    ]
+
+    header_attrs = {
+        "employee_id": """
+                        style ="width:100px !important"
+                        """
+    }
+
+    row_attrs = """
+                hx-get='{get_edit_url}'
+                hx-target="#genericModalBody"
+                data-target="#genericModal"
+                data-toggle="oh-modal-toggle"
+                """
+
+    def get_queryset(self):
+        queryset = super().get_queryset()
+        queryset = filtersubordinates(
+            self.request, queryset, "employee.view_employeeworkinformation"
+        )
+        queryset = queryset.filter(
+            id__in=[obj.id for obj in queryset if obj.calculate_progress() != 100]
+        )
+        return queryset
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(
+    manager_can_enter("employee.change_employeeworkinformation"), name="dispatch"
+)
+class EmployeeWorkInformationFormView(HorillaFormView):
+    """
+    form view for edit work information
+    """
+
+    form_class = EmployeeWorkInformationUpdateForm
+    model = EmployeeWorkInformation
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        if self.form.instance.pk:
+            self.form_class.verbose_name = _("Update Work Information")
+        return context
+
+    def form_valid(self, form: EmployeeWorkInformationUpdateForm) -> HttpResponse:
+        if form.is_valid():
+            if form.instance.pk:
+                message = _("Work Information Updated")
+                messages.success(self.request, message)
+            form.save()
+            return HttpResponse(
+                "<script>$('#genericModal').removeClass('oh-modal--show');$('#pendingReload').click();</script>"
+            )
+        return super().form_valid(form)
+
+
+@method_decorator(login_required, name="dispatch")
+class DashboardAnnouncementView(HorillaListView):
+    """
+    list view for dashboard announcement
+    """
+
+    model = Announcement
+    filter_class = AnnouncementFilter
+    show_toggle_form = False
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("dashboard-announcement-list")
+
+    columns = [
+        (_("Title"), "announcement_custom_col"),
+    ]
+
+    bulk_select_option = False
+
+    def get_queryset(self):
+        queryset = super().get_queryset()
+        queryset = queryset.exclude(expire_date__lt=datetime.today().date()).order_by(
+            "-created_at"
+        )
+
+        return queryset
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(permission_required("base.view_announcement"), name="dispatch")
+class AnnouncementViewedByList(HorillaListView):
+    """
+    List view for announcement viewed by on detail view
+    """
+
+    model = AnnouncementView
+    filter_class = AnnouncementViewFilter
+    bulk_select_option = False
+    show_toggle_form = False
+
+    columns = [
+        (_("Viewed By"), "announcement_viewed_by_col"),
+    ]
+
+    def get_queryset(self):
+        queryset = super().get_queryset()
+        anoun = self.kwargs.get("announcement_id")
+        queryset = queryset.filter(announcement_id__id=anoun, viewed=True)
+        return queryset
diff --git a/base/cbv/department.py b/base/cbv/department.py
new file mode 100644
index 000000000..61c9088b9
--- /dev/null
+++ b/base/cbv/department.py
@@ -0,0 +1,165 @@
+"""
+this page is handling the cbv methods for department in settings
+"""
+
+from typing import Any
+
+from django.contrib import messages
+from django.http import HttpResponse
+from django.middleware.csrf import get_token
+from django.shortcuts import render
+from django.urls import reverse
+from django.utils.decorators import method_decorator
+from django.utils.translation import gettext_lazy as _
+
+from base.filters import DepartmentViewFilter
+from base.forms import DepartmentForm
+from base.models import Department
+from horilla.horilla_middlewares import _thread_locals
+from horilla_views.cbv_methods import login_required, permission_required
+from horilla_views.generic.cbv.views import (
+    HorillaFormView,
+    HorillaListView,
+    HorillaNavView,
+)
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(permission_required(perm="base.view_department"), name="dispatch")
+class DepartmentListView(HorillaListView):
+    """
+    list view for department in settings
+    """
+
+    model = Department
+    filter_class = DepartmentViewFilter
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("department-list")
+        self.actions = []
+        if self.request.user.has_perm("base.change_department"):
+            self.actions.append(
+                {
+                    "action": _("Edit"),
+                    "icon": "create-outline",
+                    "attrs": """
+                    class="oh-btn oh-btn--light-bkg w-100"
+                    hx-get='{get_update_url}?instance_ids={ordered_ids}'
+                    hx-target="#genericModalBody"
+                    data-toggle="oh-modal-toggle"
+                    data-target="#genericModal"
+                """,
+                }
+            )
+
+        if self.request.user.has_perm("base.delete_department"):
+            self.actions.append(
+                {
+                    "action": _("Delete"),
+                    "icon": "trash-outline",
+                    "attrs": """
+                    class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100"
+                    hx-get="{get_delete_url}?model=base.Department&pk={pk}"
+                    data-toggle="oh-modal-toggle"
+                    data-target="#deleteConfirmation"
+                    hx-target="#deleteConfirmationBody"
+                """,
+                }
+            )
+
+        # <button
+        # 	class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100"
+        # 	title="{% trans 'Remove' %}"
+        # 	hx-get="{% url 'generic-delete' %}?model=base.Department&pk={{dep.id}}"
+        # 	data-toggle="oh-modal-toggle"
+        # 	data-target="#deleteConfirmation"
+        # 	hx-target="#deleteConfirmationBody"
+        # >
+        # 	<ion-icon name="trash-outline"></ion-icon>
+        # </button>
+
+    row_attrs = """
+                id="departmentTr{get_delete_instance}"
+                """
+
+    columns = [
+        (_("Department"), "department"),
+    ]
+    sortby_mapping = [
+        (_("Department"), "department"),
+    ]
+
+    header_attrs = {
+        "department": """ style="width:300px !important" """,
+        "action": """ style="width:180px !important" """,
+    }
+
+    records_per_page = 7
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(permission_required(perm="base.view_department"), name="dispatch")
+class DepartmentNavView(HorillaNavView):
+    """
+    nav bar of the department view
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("department-list")
+        if self.request.user.has_perm("base.add_department"):
+            self.create_attrs = f"""
+                                onclick = "event.stopPropagation();"
+                                data-toggle="oh-modal-toggle"
+                                data-target="#genericModal"
+                                hx-target="#genericModalBody"
+                                hx-get="{reverse('settings-department-creation')}"
+                                """
+
+    nav_title = _("Department")
+    search_swap_target = "#listContainer"
+    filter_instance = DepartmentViewFilter()
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(permission_required(perm="base.add_department"), name="dispatch")
+class DepartmentCreateForm(HorillaFormView):
+    """
+    form view for creating and editing departments in settings
+    """
+
+    model = Department
+    form_class = DepartmentForm
+    new_display_title = _("Create Department")
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        form = self.form_class()
+        if self.form.instance.pk:
+            form = self.form_class(instance=self.form.instance)
+            self.form_class.verbose_name = _("Update Department")
+        context[form] = form
+        return context
+
+    def form_invalid(self, form: Any) -> HttpResponse:
+        if self.form.instance.pk:
+            self.form_class.verbose_name = _("Update Department")
+        if not form.is_valid():
+            errors = form.errors.as_data()
+            return render(
+                self.request, self.template_name, {"form": form, "errors": errors}
+            )
+        return super().form_invalid(form)
+
+    def form_valid(self, form: DepartmentForm) -> HttpResponse:
+        if form.is_valid():
+            if form.instance.pk:
+                messages.success(self.request, _("Department updated"))
+            else:
+                messages.success(
+                    self.request, _("Department has been created successfully!")
+                )
+            form.save()
+            return self.HttpResponse()
+        return super().form_valid(form)
diff --git a/base/cbv/employee_shift.py b/base/cbv/employee_shift.py
new file mode 100644
index 000000000..fb2e2bfb3
--- /dev/null
+++ b/base/cbv/employee_shift.py
@@ -0,0 +1,106 @@
+"""
+This page handles employee shift page in settings
+"""
+
+from typing import Any
+from django.urls import reverse
+from django.utils.decorators import method_decorator
+from django.utils.translation import gettext_lazy as _
+from base.filters import EmployeeShiftFilter
+from base.models import EmployeeShift
+from horilla_views.generic.cbv.views import (
+    HorillaListView,
+    HorillaNavView,
+)
+from horilla_views.cbv_methods import login_required, permission_required
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(permission_required(perm="base.view_employeeshift"), name="dispatch")
+class EmployeeShiftListView(HorillaListView):
+    """
+    List view of the employee shift page
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+
+        # self.action_method = "actions_col"
+        self.view_id = "shift_view"
+        self.search_url = reverse("employee-shift-list")
+        self.actions = []
+        if self.request.user.has_perm("base.change_employeeshift"):
+            self.actions.append(
+                {
+                    "action": "Edit",
+                    "icon": "create-outline",
+                    "attrs": """
+                    class="oh-btn oh-btn--light-bkg w-100"
+                    hx-get="{get_update_url}?instance_ids={ordered_ids}"
+                    hx-target="#genericModalBody"
+                    data-toggle="oh-modal-toggle"
+                    data-target="#genericModal"
+                    """,
+                }
+            )
+        if self.request.user.has_perm("base.delete_employeeshift"):
+            self.actions.append(
+                {
+                    "action": "Delete",
+                    "icon": "trash-outline",
+                    "attrs": """
+                            class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100"
+                            hx-get="{get_delete_url}?model=base.employeeshift&pk={pk}"
+                            data-toggle="oh-modal-toggle"
+                            data-target="#deleteConfirmation"
+                            hx-target="#deleteConfirmationBody"
+                        """,
+                }
+            )
+
+    model = EmployeeShift
+    filter_class = EmployeeShiftFilter
+
+    bulk_update_fields = [
+        "weekly_full_time",
+        "full_time",
+    ]
+
+    columns = [
+        (_("Shift"), "employee_shift"),
+        (_("Weekly Full Time"), "weekly_full_time"),
+        (_("Full Time"), "full_time"),
+    ]
+
+    sortby_mapping = [
+        ("Shift", "employee_shift"),
+        ("Weekly Full Time", "weekly_full_time"),
+        ("Full Time", "full_time"),
+    ]
+
+    row_attrs = """
+                id = "shiftTr{get_instance_id}"
+                """
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(permission_required(perm="base.view_employeeshift"), name="dispatch")
+class EmployeeShiftNav(HorillaNavView):
+    """
+    Nav bar
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("employee-shift-list")
+        if self.request.user.has_perm("base.add_employeeshift"):
+            self.create_attrs = f"""
+                                data-toggle="oh-modal-toggle"
+                                data-target="#genericModal"
+                                hx-target="#genericModalBody"
+                                hx-get="{reverse('employee-shift-create-view')}"
+                                """
+
+    nav_title = _("Shift")
+    filter_instance = EmployeeShiftFilter()
+    search_swap_target = "#listContainer"
diff --git a/base/cbv/employee_shift_shedule.py b/base/cbv/employee_shift_shedule.py
new file mode 100644
index 000000000..8ece1f12d
--- /dev/null
+++ b/base/cbv/employee_shift_shedule.py
@@ -0,0 +1,151 @@
+"""
+this page is handling the cbv methods for Employee shift shedule in settings
+"""
+
+from typing import Any
+from django.http import HttpResponse
+from django.shortcuts import render
+from django.urls import reverse
+from django.contrib import messages
+from django.utils.decorators import method_decorator
+from django.utils.translation import gettext_lazy as _
+from base.filters import EmployeeShiftFilter, EmployeeShiftScheduleFilter
+from base.forms import EmployeeShiftScheduleForm
+from base.models import EmployeeShift, EmployeeShiftSchedule
+from horilla_views.cbv_methods import login_required, permission_required
+from horilla_views.generic.cbv.views import (
+    HorillaDetailedView,
+    HorillaFormView,
+    HorillaListView,
+    HorillaNavView,
+)
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(
+    permission_required(perm="base.view_employeeshiftschedule"), name="dispatch"
+)
+class EmployeeShiftSheduleNav(HorillaNavView):
+    """
+    nav bar of the employee shift sheduel view
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("employee-shift-shedule-list")
+        if self.request.user.has_perm("base.add_employeeshiftschedule"):
+            self.create_attrs = f"""
+                                onclick = "event.stopPropagation();"
+                                data-toggle="oh-modal-toggle"
+                                data-target="#genericModal"
+                                hx-target="#genericModalBody"
+                                hx-get="{reverse('settings-employee-shift-shedule-create')}"
+                                """
+
+    nav_title = _("Shift Schedule")
+    search_swap_target = "#listContainer"
+    filter_instance = EmployeeShiftFilter()
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(permission_required(perm="base.add_employeeshiftschedule"), name="dispatch")
+class EmployeeShiftSheduleCreateForm(HorillaFormView):
+    """
+    form view for creating  and updating job position in settings
+    """
+
+    model = EmployeeShiftSchedule
+    form_class = EmployeeShiftScheduleForm
+    new_display_title = _("Create Employee Shift Schedule")
+    template_name = "cbv/settings/employee_shift_schedule_form.html"
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        if self.form.instance.pk:
+            self.form.fields["day"].initial = self.form.instance.day
+            self.form_class.verbose_name = _("Update Employee Shift Schedule")
+        return context
+
+    def form_valid(self, form: EmployeeShiftScheduleForm) -> HttpResponse:
+        if form.is_valid():
+            if self.form.instance.pk:
+                shifts = form.instance
+                if shifts is not None:
+                    days = form["day"].value()
+                    if days:
+                        shifts.day_id = days
+                    shifts.save()
+                    messages.success(self.request, _("Shift schedule Updated!."))
+            else:
+                form.save()
+                messages.success(
+                    self.request,
+                    _("Employee Shift Schedule has been created successfully!"),
+                )
+            return self.HttpResponse("<script>window.location.reload()</script>")
+        return super().form_valid(form)
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(
+    permission_required(perm="base.view_employeeshiftschedule"), name="dispatch"
+)
+class EmployeeShiftSheduleList(HorillaListView):
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.view_id = "day-container"
+        self.search_url = reverse("employee-shift-shedule-list")
+        if not self.request.user.has_perm(
+            "base.change_employeeshiftschedule"
+        ) and not self.request.user.has_perm("base.delete_employeeshiftschedule"):
+            self.action_method = None
+
+    bulk_update_fields = ["start_time", "end_time", "minimum_working_hour"]
+
+    model = EmployeeShiftSchedule
+    filter_class = EmployeeShiftScheduleFilter
+    show_filter_tags = False
+
+    columns = [
+        (_("Day"), "day_col", "get_avatar"),
+        (_("Start Time"), "start_time"),
+        (_("End Time"), "end_time"),
+        (_("Minimum Working Hours"), "minimum_working_hour"),
+        (_("Auto Check Out"), "auto_punch_out_col"),
+    ]
+
+    header_attrs = {
+        "action": """
+                    style="width:200px !important;"
+                    """
+    }
+
+    row_attrs = """
+                id = "scheduleTr{get_instance_id}"
+                hx-get='{get_detail_url}?instance_ids={ordered_ids}'
+                hx-target="#genericModalBody"
+                data-target="#genericModal"
+                data-toggle="oh-modal-toggle"
+                """
+
+    action_method = "actions_col"
+
+
+class EmployeeShiftSheduleDetailView(HorillaDetailedView):
+    """
+    detail view of the page
+    """
+
+    model = EmployeeShiftSchedule
+    title = _("Details")
+    header = {"title": "day", "subtitle": "shift_id", "avatar": "get_avatar"}
+    body = [
+        (_("Start Time"), "start_time"),
+        (_("End Time"), "end_time"),
+        (_("Minimum Working Hours"), "minimum_working_hour"),
+        (_("Auto Check Out"), "auto_punch_out_col"),
+        (_("Automatic Check Out Time"), "get_automatic_check_out_time", True),
+    ]
+
+    action_method = "detail_actions_col"
diff --git a/base/cbv/employee_type.py b/base/cbv/employee_type.py
new file mode 100644
index 000000000..6ee5ebb64
--- /dev/null
+++ b/base/cbv/employee_type.py
@@ -0,0 +1,131 @@
+"""
+This page handles employee type in settings page
+"""
+
+from typing import Any
+from django.http import HttpResponse
+from django.urls import reverse
+from django.contrib import messages
+from django.utils.decorators import method_decorator
+from django.utils.translation import gettext_lazy as _
+from base.filters import EmployeeTypeFilter
+from base.forms import EmployeeTypeForm
+from base.models import EmployeeType
+from horilla_views.cbv_methods import login_required, permission_required
+from horilla_views.generic.cbv.views import (
+    HorillaFormView,
+    HorillaListView,
+    HorillaNavView,
+)
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(permission_required(perm="base.view_employeetype"), name="dispatch")
+class EmployeeTypeListView(HorillaListView):
+    """
+    List view of the resticted days page
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.view_id = "employee_type"
+        self.search_url = reverse("employee-type-list")
+        self.actions = []
+        if self.request.user.has_perm("base.change_employeetype"):
+            self.actions.append(
+                {
+                    "action": "Edit",
+                    "icon": "create-outline",
+                    "attrs": """
+                    class="oh-btn oh-btn--light-bkg w-100"
+                    hx-get="{get_update_url}?instance_ids={ordered_ids}"
+                    hx-target="#genericModalBody"
+                    data-toggle="oh-modal-toggle"
+                    data-target="#genericModal"
+                    """,
+                }
+            )
+        if self.request.user.has_perm("base.delete_employeetype"):
+            self.actions.append(
+                {
+                    "action": "Delete",
+                    "icon": "trash-outline",
+                    "attrs": """
+                            class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100"
+                            hx-get="{get_delete_url}?model=base.employeetype&pk={pk}"
+                            data-toggle="oh-modal-toggle"
+                            data-target="#deleteConfirmation"
+                            hx-target="#deleteConfirmationBody"
+                        """,
+                }
+            )
+
+    model = EmployeeType
+    filter_class = EmployeeTypeFilter
+
+    columns = [
+        (_("Employee Type"), "employee_type"),
+    ]
+    header_attrs = {
+        "employee_type": """
+                    style="width:400px !important;"
+                    """
+    }
+
+    row_attrs = """
+                id = "employeeTypeTr{get_instance_id}"
+                """
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(permission_required(perm="base.view_employeetype"), name="dispatch")
+class EmployeeTypeNav(HorillaNavView):
+    """
+    Nav bar
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("employee-type-list")
+        if self.request.user.has_perm("base.add_employeetype"):
+            self.create_attrs = f"""
+                                onclick = "event.stopPropagation();"
+                                data-toggle="oh-modal-toggle"
+                                data-target="#genericModal"
+                                hx-target="#genericModalBody"
+                                hx-get="{reverse('employee-type-create-view')}"
+                                """
+
+    nav_title = _("Employee Type")
+    filter_instance = EmployeeTypeFilter()
+    search_swap_target = "#listContainer"
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(permission_required(perm="base.add_employeetype"), name="dispatch")
+class EmployeeTypeFormView(HorillaFormView):
+    """
+    Create and edit form
+    """
+
+    model = EmployeeType
+    form_class = EmployeeTypeForm
+    new_display_title = _("Create Employee Type")
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        if self.form.instance.pk:
+            self.form_class.verbose_name = _("Update Employee Type")
+        return context
+
+    def form_valid(self, form: EmployeeTypeForm) -> HttpResponse:
+
+        if form.is_valid():
+            if form.instance.pk:
+                message = _("The employee type updated successfully.")
+            else:
+                message = _("The employee type created successfully.")
+            form.save()
+            messages.success(self.request, _(message))
+            return self.HttpResponse()
+        return super().form_valid(form)
diff --git a/base/cbv/holidays.py b/base/cbv/holidays.py
new file mode 100644
index 000000000..6424dc030
--- /dev/null
+++ b/base/cbv/holidays.py
@@ -0,0 +1,212 @@
+"""
+this page is handling the cbv methods of holiday page
+"""
+
+from typing import Any
+from django.contrib import messages
+from django.http import HttpResponse
+from django.urls import reverse, reverse_lazy
+from django.utils.decorators import method_decorator
+from django.utils.translation import gettext_lazy as _
+from horilla_views.generic.cbv.views import (
+    HorillaDetailedView,
+    TemplateView,
+    HorillaListView,
+    HorillaNavView,
+    HorillaFormView,
+)
+from horilla_views.cbv_methods import login_required, permission_required
+from base.filters import HolidayFilter
+from base.forms import HolidayForm, HolidaysColumnExportForm
+from base.models import Holidays
+
+
+@method_decorator(login_required, name="dispatch")
+class HolidaysView(TemplateView):
+    """
+    for page view
+    """
+
+    template_name = "cbv/holidays/holidays_home.html"
+    
+
+
+@method_decorator(login_required, name="dispatch")
+class HolidayListView(HorillaListView):
+    """
+    list view
+    """
+
+    bulk_update_fields = [
+        "recurring"
+    ]
+
+    filter_class = HolidayFilter
+    model = Holidays
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("holiday-filter")
+        self.view_id = "holidaydelete"
+        if self.request.user.has_perm("add_holiday"):
+            self.action_method = "holidays_actions"
+
+    columns = [
+        (_("Holiday Name"), "name"),
+        (_("Start Date"), "start_date"),
+        (_("End Date"), "end_date"),
+        (_("Recurring"), "get_recurring_status"),
+    ]
+
+    header_attrs = {
+        "name": """ style="width:200px !important;"
+                                """,                
+    }
+
+
+    sortby_mapping = [
+        ("Holiday Name", "name"),
+        ("Start Date", "start_date"),
+        ("End Date", "end_date"),
+    ]
+
+    row_attrs = """
+                hx-get='{detail_view}?instance_ids={ordered_ids}'
+                hx-target="#genericModalBody"
+                data-target="#genericModal"
+                data-toggle="oh-modal-toggle"
+                """
+
+    records_per_page = 10
+
+
+@method_decorator(login_required, name="dispatch")
+class HolidayNavView(HorillaNavView):
+    """
+    nav bar
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("holiday-filter")
+        if self.request.user.has_perm("add_holiday"):
+            self.create_attrs = f"""
+                hx-get="{reverse_lazy('holiday-creation')}"
+                hx-target="#genericModalBody"
+                data-target="#genericModal"
+                data-toggle="oh-modal-toggle"
+            """
+            self.actions = [
+                {
+                    "action": _("Import"),
+                    "attrs": """
+                    onclick="
+                    importHolidays();
+                    "
+                    data-toggle = "oh-modal-toggle"
+                    data-target = "#holidayImport
+                    "
+                    style="cursor: pointer;"
+                """,
+                },
+                {
+                    "action": _("Export"),
+                    "attrs": f"""
+                    data-toggle = "oh-modal-toggle"
+                    data-target = "#genericModal"
+                    hx-target="#genericModalBody"
+                    hx-get ="{reverse('holiday-nav-export')}"
+                    style="cursor: pointer;"
+                """,
+                },
+                {
+                    "action": _("Delete"),
+                    "attrs": """
+                        onclick="
+                        bulkDeleteHoliday();
+                        "
+                        data-action ="delete"
+                        style="cursor: pointer; color:red !important"
+                    """,
+                },
+            ]
+
+    nav_title = _("Holidays")
+    filter_body_template = "cbv/holidays/holiday_filter.html"
+    filter_form_context_name = "form"
+    filter_instance = HolidayFilter()
+    search_swap_target = "#listContainer"
+
+@method_decorator(login_required, name="dispatch")
+class HolidayDetailView(HorillaDetailedView):
+    """
+    detail view of the page
+    """
+
+    model = Holidays
+    title = _("Details")
+
+    header = {
+        "title": "name",
+        "subtitle":"",
+        "avatar":"get_avatar"
+    }
+    body = {
+        (_("Holiday Name"), "name"),
+        (_("Start Date"), "start_date"),
+        (_("End Date"), "end_date"),
+        (_("Recurring"), "get_recurring_status"),
+    }
+    
+    action_method = "detail_view_actions"
+
+@method_decorator(login_required, name="dispatch")
+class HolidayExport(TemplateView):
+    """
+    for bulk export
+    """
+
+    template_name = "cbv/holidays/holidays_export.html"
+
+    def get_context_data(self, **kwargs: Any):
+        """
+        get data for export
+        """
+
+        holiday = Holidays.objects.all()
+        export_column = HolidaysColumnExportForm
+        export_filter = HolidayFilter(queryset=holiday)
+        context = super().get_context_data(**kwargs)
+        context["export_column"] = export_column
+        context["export_filter"] = export_filter
+        return context
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(permission_required("leave.add_holiday"),name="dispatch")
+class HolidayFormView(HorillaFormView):
+    """
+    form view for create button
+    """
+
+    form_class = HolidayForm
+    model = Holidays
+    new_display_title = _("Create Holiday")
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        if self.form.instance.pk:
+            self.form_class.verbose_name = _("Update Holiday")
+
+        return context
+
+    def form_valid(self, form: HolidayForm) -> HttpResponse:
+        if form.is_valid():
+            if form.instance.pk:
+                message = _("Holiday Updated Successfully")
+            else:
+                message = _("New Holiday Created Successfully")
+            form.save()
+
+            messages.success(self.request, _(message))
+            return self.HttpResponse()
+        return super().form_valid(form)
diff --git a/base/cbv/job_position.py b/base/cbv/job_position.py
new file mode 100644
index 000000000..b85f58a8b
--- /dev/null
+++ b/base/cbv/job_position.py
@@ -0,0 +1,123 @@
+"""
+this page is handling the cbv methods for Job Position in settings
+"""
+
+from typing import Any
+from django.http import HttpResponse
+from django.shortcuts import render
+from django.urls import reverse
+from django.contrib import messages
+from django.utils.decorators import method_decorator
+from django.utils.translation import gettext_lazy as _
+from base.filters import DepartmentViewFilter
+from base.forms import JobPositionForm
+from base.models import Department, JobPosition
+from horilla_views.cbv_methods import login_required, permission_required
+from horilla_views.generic.cbv.views import (
+    HorillaFormView,
+    HorillaListView,
+    HorillaNavView,
+)
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(permission_required(perm="base.view_jobposition"), name="dispatch")
+class JobPositionListView(HorillaListView):
+    """
+    list view for job positions in settings
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("job-position-list")
+        self.view_id = "job_position"
+
+
+    model = Department
+    filter_class = DepartmentViewFilter
+
+    columns = [
+        (_("Department"), "get_department_col"),
+        (_("Job Position"), "get_job_position_col"),
+    ]
+
+    row_attrs = """
+                class="oh-sticky-table__tr oh-permission-table__tr oh-permission-table--collapsed"   
+                data-label="Job Position"
+                data-count="{toggle_count}"
+                """
+    
+    header_attrs = {
+        "get_department_col": """ style="width:300px !important; " """,
+        "get_job_position_col": """ style="width:300px !important; " """
+    }
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(permission_required(perm="base.view_jobposition"), name="dispatch")
+class JobPositionNavView(HorillaNavView):
+    """
+    nav bar of the job position view
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("job-position-list")
+        if self.request.user.has_perm("base.add_jobposition"):
+            self.create_attrs = f"""
+                                onclick = "event.stopPropagation();"
+                                data-toggle="oh-modal-toggle"
+                                data-target="#genericModal"
+                                hx-target="#genericModalBody"
+                                hx-get="{reverse('job-position-create-form')}"
+                                """
+
+    nav_title = _("Job Position")
+    search_swap_target = "#listContainer"
+    filter_instance = DepartmentViewFilter()
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(permission_required(perm="base.view_jobposition"), name="dispatch")
+class JobPositionCreateForm(HorillaFormView):
+    """
+    form view for creating job position in settings
+    """
+
+    model = JobPosition
+    form_class = JobPositionForm
+    new_display_title = _("Create Job Position")
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        if self.form.instance.pk:
+            self.form.fields["department_id"].initial = self.form.instance.department_id
+            self.form_class.verbose_name = _("Update Job Position")
+        return context
+
+    def form_invalid(self, form: Any) -> HttpResponse:
+        if self.form.instance.pk:
+            self.form_class.verbose_name = _("Update Job Position")
+        if not form.is_valid():
+            errors = form.errors.as_data()
+            return render(
+                self.request, self.template_name, {"form": form, "errors": errors}
+            )
+        return super().form_invalid(form)
+
+    def form_valid(self, form: JobPositionForm) -> HttpResponse:
+        job_position = form.instance
+        if self.form.instance.pk and form.is_valid():
+            if job_position is not None:
+                department_id = form.cleaned_data.get("department_id")
+                if department_id:
+                    job_position.department_id = department_id
+                job_position.save()
+                messages.success(self.request, _("Job position updated."))
+        elif (
+            not form.instance.pk
+            and form.data.getlist("department_id")
+            and form.data.get("job_position")
+        ):
+            form.save(commit=True)
+        return self.HttpResponse()
diff --git a/base/cbv/job_role.py b/base/cbv/job_role.py
new file mode 100644
index 000000000..5f69814d0
--- /dev/null
+++ b/base/cbv/job_role.py
@@ -0,0 +1,122 @@
+"""
+this page is handling the cbv methods for Job role in settings
+"""
+
+from typing import Any
+from django.http import HttpResponse
+from django.shortcuts import render
+from django.utils.translation import gettext_lazy as _
+from django.utils.decorators import method_decorator
+from django.urls import reverse
+from django.contrib import messages
+from base.filters import JobRoleFilter
+from base.forms import JobRoleForm
+from base.models import JobPosition, JobRole
+from horilla_views.cbv_methods import login_required, permission_required
+from horilla_views.generic.cbv.views import (
+    HorillaFormView,
+    HorillaListView,
+    HorillaNavView,
+)
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(permission_required(perm="base.view_jobrole"), name="dispatch")
+class JobRoleListView(HorillaListView):
+    """
+    List view of the page
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.view_id = "job_role"
+        self.search_url = reverse("job-role-list")
+
+    model = JobPosition
+    filter_class = JobRoleFilter
+
+    columns = [
+        (_("Job Position"), "job_position_col"),
+        (_("Job Role"), "job_role_col"),
+    ]
+    header_attrs = {
+        "job_position_col": """
+                             style="width:300px !important;"
+                             """,
+        "job_role_col": """
+                             style="width:300px !important;"
+                             """,
+    }
+
+    row_attrs = """
+                class = "oh-sticky-table__tr oh-permission-table__tr oh-permission-table--collapsed"
+                data-count="{get_data_count}" 
+                data-label="Job Role"
+                """
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(permission_required(perm="base.view_jobrole"), name="dispatch")
+class JobRoleNav(HorillaNavView):
+    """
+    Nav bar
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("job-role-list")
+        if self.request.user.has_perm("base.add_jobrole"):
+            self.create_attrs = f"""
+                                onclick = "event.stopPropagation();"
+                                data-toggle="oh-modal-toggle"
+                                data-target="#genericModal"
+                                hx-target="#genericModalBody"
+                                hx-get="{reverse('create-job-role')}"
+                                """
+
+    nav_title = _("Job Role")
+    filter_instance = JobRoleFilter()
+    search_swap_target = "#listContainer"
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(permission_required(perm="base.add_jobrole"), name="dispatch")
+class JobRoleFormView(HorillaFormView):
+    """
+    Create and edit form
+    """
+
+    model = JobRole
+    form_class = JobRoleForm
+    new_display_title = _("Create Job Role")
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        if self.form.instance.pk:
+            self.form_class.verbose_name = _("Update Job Role")
+        return context
+
+    def form_invalid(self, form: Any) -> HttpResponse:
+        if not form.is_valid():
+            errors = form.errors.as_data()
+            return render(
+                self.request, self.template_name, {"form": form, "errors": errors}
+            )
+        return super().form_invalid(form)
+
+    def form_valid(self, form: JobRoleForm) -> HttpResponse:
+        if self.form.instance.pk and form.is_valid():
+            instance = form.instance
+            job_position = form.cleaned_data.get("job_position_id")
+            instance.job_position_id = job_position
+            instance.save()
+            messages.success(
+                self.request, _("Job role has been updated successfully!")
+            )
+        elif (
+            not self.form.instance.pk
+            and self.form.data.getlist("job_position_id")
+            and self.form.data.get("job_role")
+        ):
+            form.save(commit=True)
+        return self.HttpResponse()
diff --git a/base/cbv/mail_log_tab.py b/base/cbv/mail_log_tab.py
new file mode 100644
index 000000000..674986678
--- /dev/null
+++ b/base/cbv/mail_log_tab.py
@@ -0,0 +1,110 @@
+"""
+This page is handling the cbv methods of mail log tab in employee individual page.
+"""
+
+from typing import Any
+from django.db.models import Q
+from django.utils.translation import gettext_lazy as _
+from django.urls import reverse
+from django.utils.decorators import method_decorator
+from base.filters import MailLogFilter
+from base.models import EmailLog
+from employee.models import Employee
+from horilla_views.generic.cbv.views import HorillaDetailedView, HorillaListView
+from horilla_views.cbv_methods import login_required
+from accessibility.cbv_decorators import enter_if_accessible
+from accessibility.cbv_decorators import enter_if_accessible
+
+
+def _check_reporting_manager(request, *args, **kwargs):
+    return request.user.employee_get.reporting_manager.exists()
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(
+    enter_if_accessible(
+        feature="view_mail_log",
+        perm="employee.view_employee",
+        method=_check_reporting_manager,
+    ),
+    name="dispatch",
+)
+class MailLogTabList(HorillaListView):
+    """
+    list view for mail log  tab
+    """
+
+    model = EmailLog
+    records_per_page = 5
+    filter_class = MailLogFilter
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.view_id = "maillog"
+
+        pk = self.request.resolver_match.kwargs.get("pk")
+        self.search_url = reverse("individual-email-log-list", kwargs={"pk": pk})
+
+    # def get_context_data(self, **kwargs: Any):
+    #     context = super().get_context_data(**kwargs)
+    #     pk = self.kwargs.get('pk')
+    #     context["search_url"] = f"{reverse('individual-email-log-list',kwargs={'pk': pk})}"
+    #     return context
+
+    def get_queryset(self):
+        queryset = super().get_queryset()
+        pk = self.kwargs.get("pk")
+        employee = Employee.objects.get(id=pk)
+        query_filter = Q(to__icontains=employee.email)
+        queryset = queryset.filter(to__icontains=employee.email)
+        if employee.employee_work_info and employee.employee_work_info.email:
+            query_filter |= Q(to__icontains=employee.employee_work_info.email)
+            queryset = queryset.filter(query_filter)
+            queryset = queryset.order_by("-created_at")
+
+        return queryset
+
+    columns = [
+        (_("Subject"), "subject"),
+        (_("Date"), "created_at"),
+        (_("Status"), "status_display"),
+    ]
+
+    sortby_mapping = [
+        (_("Subject"), "subject"),
+        (_("Date"), "created_at"),
+    ]
+
+    row_attrs = """
+                hx-get='{mail_log_detail_view}?instance_ids={ordered_ids}'
+                hx-target="#genericModalBody"
+                data-target="#genericModal"
+                data-toggle="oh-modal-toggle"
+                """
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(
+    enter_if_accessible(
+        feature="view_mail_log",
+        perm="employee.view_employee",
+        method=_check_reporting_manager,
+    ),
+    name="dispatch",
+)
+class MailLogDetailView(HorillaDetailedView):
+    """
+    detail view for mail log tab
+    """
+
+    template_name = "cbv/mail_log_tab/iframe.html"
+    model = EmailLog
+
+    def get_context_data(self, **kwargs: Any):
+        context = super().get_context_data(**kwargs)
+        pk = self.kwargs.get("pk")
+        log = EmailLog.objects.filter(id=pk).first()
+        context["log"] = log
+        return context
+
+    header = {"title": "", "subtitle": "", "avatar": ""}
diff --git a/base/cbv/mail_server.py b/base/cbv/mail_server.py
new file mode 100644
index 000000000..0fb0aa3f8
--- /dev/null
+++ b/base/cbv/mail_server.py
@@ -0,0 +1,121 @@
+"""
+This page handles the mail server page in settings
+"""
+
+from typing import Any
+from django.http import HttpResponse
+from django.utils.translation import gettext_lazy as _
+from django.utils.decorators import method_decorator
+from django.urls import reverse
+from django.contrib import messages
+from base.filters import MailServerFilter
+from base.forms import DynamicMailConfForm
+from base.models import DynamicEmailConfiguration
+from horilla_views.cbv_methods import login_required, permission_required
+from horilla_views.generic.cbv.views import (
+    HorillaFormView,
+    HorillaListView,
+    HorillaNavView,
+)
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(
+    permission_required(perm="base.view_dynamicemailconfiguration"), name="dispatch"
+)
+class MailServerListView(HorillaListView):
+    """
+    List view of the resticted days page
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+
+        # self.action_method = "actions_col"
+        self.view_id = "mail-server-cont"
+        self.search_url = reverse("mail-server-list")
+
+    def get_context_data(self, **kwargs: Any):
+        context = super().get_context_data(**kwargs)
+        primary_mail_not_exist = True
+        if DynamicEmailConfiguration.objects.filter(is_primary=True).exists():
+            primary_mail_not_exist = False
+        context["primary_mail_not_exist"] = primary_mail_not_exist
+        return context
+
+    model = DynamicEmailConfiguration
+    filter_class = MailServerFilter
+    template_name = "cbv/settings/extended_mail_server.html"
+
+    columns = [
+        (_("Host User"), "username"),
+        (_("Host"), "host"),
+        (_("Compnay"), "company_id"),
+    ]
+
+    header_attrs = {
+        "action" : """
+                    style="width:200px !important"
+                   """
+    }
+
+    row_attrs = "{highlight_cell}"
+    action_method = "action_col"
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(
+    permission_required(perm="base.view_dynamicemailconfiguration"), name="dispatch"
+)
+class MailServerNav(HorillaNavView):
+    """
+    Nav bar
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("mail-server-list")
+        if self.request.user.has_perm("base.add_dynamicemailconfiguration"):
+            self.create_attrs = f"""
+                                onclick = "event.stopPropagation();"
+                                data-toggle="oh-modal-toggle"
+                                data-target="#genericModal"
+                                hx-target="#genericModalBody"
+                                hx-get="{reverse('create-mail-server')}"
+                            """
+
+    nav_title = _("Mail Servers")
+    filter_instance = MailServerFilter()
+    search_swap_target = "#listContainer"
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(
+    permission_required(perm="base.add_dynamicemailconfiguration"), name="dispatch"
+)
+class MailServerFormView(HorillaFormView):
+    """
+    Create and edit form
+    """
+
+    model = DynamicEmailConfiguration
+    form_class = DynamicMailConfForm
+    new_display_title = _("Create Mail Server")
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        if self.form.instance.pk:
+            self.form_class.verbose_name = _("Update Mail Server")
+        return context
+
+    def form_valid(self, form: DynamicMailConfForm) -> HttpResponse:
+
+        if form.is_valid():
+            if form.instance.pk:
+                message = _("Mail server updated successfully.")
+            else:
+                message = _("Mail server created successfully.")
+            form.save()
+            messages.success(self.request, _(message))
+            return self.HttpResponse()
+        return super().form_valid(form)
diff --git a/base/cbv/mail_template.py b/base/cbv/mail_template.py
new file mode 100644
index 000000000..73e9c9993
--- /dev/null
+++ b/base/cbv/mail_template.py
@@ -0,0 +1,101 @@
+"""
+This page handles the cbv methods for mail template page
+"""
+
+from typing import Any
+from django import forms
+from django.http import HttpResponse
+from django.contrib import messages
+from django.shortcuts import render
+from django.utils.decorators import method_decorator
+from django.utils.translation import gettext_lazy as _
+from horilla_views.generic.cbv.views import HorillaFormView
+from horilla_views.cbv_methods import login_required, permission_required
+from base.models import HorillaMailTemplate
+from base.forms import  MailTemplateForm
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(permission_required("base.add_horillamailtemplate"),name="dispatch")
+class MailTemplateFormView(HorillaFormView):
+    """
+    form view for create and edit mail template
+    """
+
+    form_class = MailTemplateForm
+    model = HorillaMailTemplate
+    template_name = "cbv/mail_template/form_inherit.html"
+    new_display_title = _("Add Template")
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        if self.form.instance.pk:
+            self.form_class.verbose_name = _("Update Template")
+
+        return context
+
+    def form_valid(self, form: MailTemplateForm) -> HttpResponse:
+        if form.is_valid():
+            if form.instance.pk:
+                message = _("Template Updated")
+            else:
+                message = _("Template created")
+            form.save()
+
+            messages.success(self.request, message)
+            return self.HttpResponse("<script>window.location.reload()</script>")
+        return super().form_valid(form)
+    
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(permission_required("base.add_horillamailtemplate"),name="dispatch")
+class MailTemplateDuplicateForm(HorillaFormView):
+    """
+    from view for duplicate mail templates
+    """
+
+    model = HorillaMailTemplate
+    form_class = MailTemplateForm
+
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        original_object = HorillaMailTemplate.objects.get(id=self.kwargs["pk"])
+        form = self.form_class(instance=original_object)
+
+        for field_name, field in form.fields.items():
+            if isinstance(field, forms.CharField):
+                initial_value = form.initial.get(field_name, "")
+                if initial_value:
+                    initial_value += " (copy)"
+                form.initial[field_name] = initial_value
+                form.fields[field_name].initial = initial_value
+
+        if hasattr(form.instance, "id"):
+            form.instance.id = None
+            
+        context["form"] = form
+        self.form_class.verbose_name = _("Duplicate Template")
+        return context
+
+    def form_invalid(self, form: Any) -> HttpResponse:
+        self.form_class.verbose_name = _("Duplicate Template")
+        if not form.is_valid():
+            errors = form.errors.as_data()
+            return render(
+                self.request, self.template_name, {"form": form, "errors": errors}
+            )
+        return super().form_invalid(form)
+
+    def form_valid(self, form: MailTemplateForm) -> HttpResponse:
+        form = self.form_class(self.request.POST)
+        self.form_class.verbose_name = _("Duplicate Template")
+        if form.is_valid():
+            message = _("Template Added")
+            messages.success(self.request, message)
+            form.save()
+            return self.HttpResponse("<script>window.location.reload()</script>")
+        return self.form_invalid(form)
+
+
+
diff --git a/base/cbv/multiple_approval_condition.py b/base/cbv/multiple_approval_condition.py
new file mode 100644
index 000000000..097cbd842
--- /dev/null
+++ b/base/cbv/multiple_approval_condition.py
@@ -0,0 +1,260 @@
+"""
+Multiple approval condition page
+"""
+
+from typing import Any
+from django.http import HttpResponse
+from django.urls import reverse
+from django.utils.decorators import method_decorator
+from django.utils.translation import gettext_lazy as _
+from django.contrib import messages
+from django import forms
+from base.filters import MultipleApprovalConditionFilter
+from base.forms import MultipleApproveConditionForm
+from base.models import MultipleApprovalCondition, MultipleApprovalManagers
+from base.widgets import CustomModelChoiceWidget
+from employee.models import Employee
+from horilla_views.generic.cbv.views import (
+    HorillaDetailedView,
+    HorillaFormView,
+    HorillaListView,
+    HorillaNavView,
+    TemplateView,
+)
+from horilla_views.cbv_methods import login_required, permission_required
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(
+    permission_required(perm="base.view_multipleapprovalcondition"), name="dispatch"
+)
+class MultipleApprovalConditionView(TemplateView):
+    """
+    for Multiple approval condition page
+    """
+
+    template_name = "cbv/multiple_approval_condition/multiple_approval_condition.html"
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(
+    permission_required(perm="base.view_multipleapprovalcondition"), name="dispatch"
+)
+class MultipleApprovalConditionList(HorillaListView):
+    """
+    List view of the resticted days page
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+
+        self.search_url = reverse("hx-multiple-approval-condition")
+        self.action_method = "actions_col"
+        self.view_id = "multipleApproveCondition"
+
+    model = MultipleApprovalCondition
+    filter_class = MultipleApprovalConditionFilter
+
+    columns = [
+        (_("Department"), "department"),
+        (_("Condition Field"), "get_condition_field"),
+        (_("Condition Operator"), "get_condition_operator"),
+        (_("Condition Value"), "get_condition_value"),
+        (_("Approval Managers"), "approval_managers_col"),
+        (_("Company"),"company_id")
+    ]
+
+    header_attrs = {
+        "department": """ style="width:180px !important" """,
+        "approval_managers_col": """ style="width:200px !important" """,
+
+    }
+
+    sortby_mapping = [
+        ("Department", "department__department"),
+        ("Condition Operator", "get_condition_operator"),
+        ("Condition Value", "get_condition_value"),
+    ]
+
+    row_attrs = """
+                hx-get='{detail_view}?instance_ids={ordered_ids}'
+                hx-target="#genericModalBody"
+                data-target="#genericModal"
+                data-toggle="oh-modal-toggle"
+                """
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(
+    permission_required(perm="base.view_multipleapprovalcondition"), name="dispatch"
+)
+class MultipleApprovalConditionNav(HorillaNavView):
+    """
+    Nav bar
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("hx-multiple-approval-condition")
+        if self.request.user.has_perm("base.add_multipleapprovalcondition"):
+            self.create_attrs = f"""
+                                onclick = "event.stopPropagation();"
+                                data-toggle="oh-modal-toggle"
+                                data-target="#genericModal"
+                                hx-target="#genericModalBody"
+                                hx-get="{reverse('multiple-level-approval-create')}"
+                                """
+
+    nav_title = _("Multiple Approval Condition")
+    filter_instance = MultipleApprovalConditionFilter()
+    search_swap_target = "#listContainer"
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(
+    permission_required(perm="base.view_multipleapprovalcondition"), name="dispatch"
+)
+class MultipleApprovalConditionDetailView(HorillaDetailedView):
+    """
+    detail view of page
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.body = [
+            (_("Condition Field"), "get_condition_field"),
+            (_("Condition Operator"), "get_condition_operator"),
+            (_("Condition Value"), "get_condition_value"),
+            (_("Approval Managers"), "approval_managers_col"),
+        ]
+
+    action_method = "detail_actions"
+
+    model = MultipleApprovalCondition
+    title = _("Details")
+    header = {
+        "title": "department",
+        "subtitle": "",
+        "avatar": "get_avatar",
+    }
+
+
+class MultipleApprovalConditionFormView(HorillaFormView):
+    """
+    Create and edit form
+    """
+
+    model = MultipleApprovalCondition
+    form_class = MultipleApproveConditionForm
+    new_display_title = _("Create Multiple Approval Condition")
+    template_name = "cbv/multiple_approval_condition/form.html"
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        self.form.fields["condition_operator"].widget.attrs[
+            "hx-target"
+        ] = "#id_condition_value_parent_div"
+        self.form.fields["condition_operator"].widget.attrs["hx-swap"] = "innerHTML"
+        return context
+
+    def form_valid(self, form: MultipleApproveConditionForm) -> HttpResponse:
+        if form.is_valid():
+            instance = form.save()
+            sequence = 0
+            if form.instance.pk:
+                MultipleApprovalManagers.objects.filter(
+                    condition_id=self.form.instance
+                ).delete()
+                message = _("Multiple approval conditon Created Successfully")
+                condition_approval_managers = self.request.POST.getlist(
+                    "multi_approval_manager"
+                )
+                for emp_id in condition_approval_managers:
+                    sequence += 1
+                    reporting_manager = None
+                    try:
+                        employee_id = int(emp_id)
+                    except:
+                        employee_id = None
+                        reporting_manager = emp_id
+                    MultipleApprovalManagers.objects.create(
+                        condition_id=instance,
+                        sequence=sequence,
+                        employee_id=employee_id,
+                        reporting_manager=reporting_manager,
+                    )
+                messages.success(self.request, message)
+            return self.HttpResponse()
+        return super().form_valid(form)
+
+
+class EditApprovalConditionFormView(MultipleApprovalConditionFormView):
+    """
+    Edit form
+    """
+
+    template_name = "cbv/multiple_approval_condition/form_edit.html"
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        self.form.fields["condition_operator"].widget.attrs["hx-swap"] = "innerHTML"
+        self.form.fields["condition_operator"].widget.attrs[
+            "hx-target"
+        ] = "#id_condition_value_parent_div"
+        managers = MultipleApprovalManagers.objects.filter(
+            condition_id=self.form.instance
+        ).order_by("sequence")
+        self.approval_managers_edit(self.form, managers)
+        context["managers_count"] = len(managers)
+        context["form"] = self.form
+        self.form_class.verbose_name = _("Update Multiple Approval Condition")
+        return context
+
+    def approval_managers_edit(self, form, managers):
+        for i, manager in enumerate(managers):
+            if i == 0:
+                form.initial["multi_approval_manager"] = managers[0].employee_id
+            else:
+                field_name = f"multi_approval_manager_{i}"
+                form.fields[field_name] = forms.ModelChoiceField(
+                    queryset=Employee.objects.all(),
+                    label=_("Approval Manager") if i == 0 else "",
+                    widget=CustomModelChoiceWidget(
+                        delete_url="/configuration/remove-approval-manager",
+                        attrs={
+                            "class": "oh-select oh-select-2 mb-3",
+                            "name": field_name,
+                            "id": f"id_{field_name}",
+                        },
+                    ),
+                    required=False,
+                )
+                form.initial[field_name] = manager.employee_id
+
+    def form_valid(self, form: MultipleApproveConditionForm) -> HttpResponse:
+        if form.is_valid():
+            instance = form.save()
+            sequence = 0
+            if self.form.instance.pk:
+                MultipleApprovalManagers.objects.filter(
+                    condition_id=self.form.instance
+                ).delete()
+                message = _("Multiple approval conditon updated Successfully")
+                for key, value in self.request.POST.items():
+                    if key.startswith("multi_approval_manager"):
+                        sequence += 1
+                        reporting_manager = None
+                        try:
+                            employee_id = int(value)
+                        except:
+                            employee_id = None
+                            reporting_manager = value
+                        MultipleApprovalManagers.objects.create(
+                            condition_id=instance,
+                            sequence=sequence,
+                            employee_id=employee_id,
+                            reporting_manager=reporting_manager,
+                        )
+                messages.success(self.request, message)
+            return self.HttpResponse()
+        return super().form_valid(form)
diff --git a/base/cbv/penalty.py b/base/cbv/penalty.py
new file mode 100644
index 000000000..a2bbca489
--- /dev/null
+++ b/base/cbv/penalty.py
@@ -0,0 +1,40 @@
+from typing import Any
+from django.urls import reverse
+from base.filters import PenaltyFilter
+from base.models import PenaltyAccounts
+from horilla_views.generic.cbv.views import HorillaListView
+from django.utils.translation import gettext_lazy as _
+
+
+class ViewPenaltyList(HorillaListView):
+    """
+    List view of penalty
+    """
+
+    bulk_select_option = False
+  
+
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("view-penalties")
+        self.view_id = "view-penalty"
+
+    model = PenaltyAccounts
+    filter_class = PenaltyFilter
+    columns = [
+        (_("Penalty amount"), "penalty_amount"),
+        (_("Created Date"), "created_at"),
+    ]
+
+    header_attrs = {
+        "penalty_amount": """
+                            style="width:180px !important;"
+                            """,
+         "created_at": """
+                            style="width:180px !important;"
+                            """,
+                       
+    }
+
+    
diff --git a/base/cbv/rotating_shift.py b/base/cbv/rotating_shift.py
new file mode 100644
index 000000000..e5f1fde0d
--- /dev/null
+++ b/base/cbv/rotating_shift.py
@@ -0,0 +1,107 @@
+"""
+This page  handles rotating shift types page in settings.
+"""
+
+from typing import Any
+from django.urls import reverse
+from django.utils.translation import gettext_lazy as _
+from django.utils.decorators import method_decorator
+from base.filters import RotatingShiftFilter
+from base.models import RotatingShift
+from horilla_views.generic.cbv.views import (
+    HorillaListView,
+    HorillaNavView,
+)
+from horilla_views.cbv_methods import login_required, permission_required
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(permission_required(perm="base.view_rotatingshift"), name="dispatch")
+class RotatingShiftTypeListView(HorillaListView):
+    """
+    List view of the employee shift page
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+
+        # self.action_method = "actions_col"
+        self.view_id = "shift_view"
+        self.search_url = reverse("rotating-shift-list")
+        self.actions = []
+        if self.request.user.has_perm("base.change_rotatingshift"):
+            self.actions.append(
+                {
+                    "action": "Edit",
+                    "icon": "create-outline",
+                    "attrs": """
+                    class="oh-btn oh-btn--light-bkg w-100"
+                    hx-get="{get_update_url}?instance_ids={ordered_ids}"
+                    hx-target="#genericModalBody"
+                    data-toggle="oh-modal-toggle"
+                    data-target="#genericModal"
+                    """,
+                }
+            )
+        if self.request.user.has_perm("base.delete_rotatingshift"):
+            self.actions.append(
+                {
+                    "action": "Delete",
+                    "icon": "trash-outline",
+                    "attrs": """
+                            class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100"
+                            hx-get="{get_delete_url}?model=base.rotatingshift&pk={pk}"
+                            data-toggle="oh-modal-toggle"
+                            data-target="#deleteConfirmation"
+                            hx-target="#deleteConfirmationBody"
+                        """,
+                }
+            )
+
+    model = RotatingShift
+    filter_class = RotatingShiftFilter
+
+    columns = [
+        (_("Title"), "name"),
+        (_("Shift 1"), "shift1"),
+        (_("Shift 2"), "shift2"),
+        (_("Additional Shifts"), "get_additional_shifts"),
+    ]
+
+    sortby_mapping = [
+        ("Title", "name"),
+        ("Shift 1", "shift1__employee_shift"),
+        ("Shift 2", "shift2__employee_shift"),
+        ("Additional Shifts", "get_additional_shifts"),
+    ]
+
+    row_attrs = """
+                id = "rotatingShiftTr{get_instance_id}"
+                """
+
+    header_attrs = {
+        "name": """ style="width:200px !important" """,
+    }
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(permission_required(perm="base.view_rotatingshift"), name="dispatch")
+class RotatingShiftTypeNav(HorillaNavView):
+    """
+    Nav bar
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("rotating-shift-list")
+        if self.request.user.has_perm("base.add_rotatingshift"):
+            self.create_attrs = f"""
+                                data-toggle="oh-modal-toggle"
+                                data-target="#genericModal"
+                                hx-target="#genericModalBody"
+                                hx-get="{reverse('rotating-shift-create')}"
+                                """
+
+    nav_title = _("Rotating Shift")
+    filter_instance = RotatingShiftFilter()
+    search_swap_target = "#listContainer"
diff --git a/base/cbv/rotating_shift_assign.py b/base/cbv/rotating_shift_assign.py
new file mode 100644
index 000000000..4fdc83b74
--- /dev/null
+++ b/base/cbv/rotating_shift_assign.py
@@ -0,0 +1,424 @@
+"""
+Rotating shift request
+
+"""
+
+import contextlib
+from typing import Any
+from django.http import HttpResponse
+from django.shortcuts import render
+from django.urls import reverse, reverse_lazy
+from django.utils.decorators import method_decorator
+from django.utils.translation import gettext_lazy as _
+from django.contrib import messages
+from base.decorators import manager_can_enter
+from base.filters import RotatingShiftAssignFilters
+from base.forms import (
+    RotatingShiftAssignExportForm,
+    RotatingShiftAssignForm,
+    RotatingShiftForm,
+)
+from base.methods import choosesubordinates, filtersubordinates, is_reportingmanager
+from base.models import RotatingShift, RotatingShiftAssign
+from employee.models import Employee
+from horilla_views.cbv_methods import login_required
+from horilla_views.generic.cbv.views import (
+    HorillaDetailedView,
+    HorillaFormView,
+    HorillaListView,
+    HorillaNavView,
+    TemplateView,
+)
+from notifications.signals import notify
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(manager_can_enter("base.view_rotatingshiftassign"), name="dispatch")
+class RotatingShiftAssignView(TemplateView):
+    """
+    Shift request page
+    """
+
+    template_name = "cbv/rotating_shift/rotating_shift.html"
+
+
+@method_decorator(login_required, name="dispatch")
+class RotatingShiftListParent(HorillaListView):
+    """
+    Parent class
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("rotating-shift-request-list")
+        # self.filter_keys_to_remove = ["deleted"]
+        self.view_id = "rotating-shift-container"
+        if (
+            self.request.user.has_perm("base.delete_rotatingshiftassign")
+            or self.request.user.has_perm("base.change_rotatingshiftassign")
+            or is_reportingmanager(self.request)
+        ):
+            self.action_method = "actions"
+        else:
+            self.action_method = None
+
+    model = RotatingShiftAssign
+    filter_class = RotatingShiftAssignFilters
+    template_name = "cbv/rotating_shift/extended_rotating_shift.html"
+    columns = [
+        (_("Employee"), "employee_id", "employee_id__get_avatar"),
+        (_("Rotating Shift"), "rotating_shift_id"),
+        (_("Based on"), "get_based_on_display"),
+        (_("Rotate"), "rotating_column"),
+        (_("Start Date"), "start_date"),
+        (_("Current Shift"), "current_shift"),
+        (_("Next Switch"), "next_change_date"),
+        (_("Next Shift"), "next_shift"),
+    ]
+
+    header_attrs = {
+        "action": """
+                   style="width:250px !important;"
+                   """
+    }
+
+    sortby_mapping = [
+        ("Employee", "employee_id__get_full_name", "employee_id__get_avatar"),
+        ("Rotating Shift", "rotating_shift_id__name"),
+        ("Based on", "get_based_on_display"),
+        ("Rotate", "rotating_column"),
+        ("Next Shift", "next_shift__employee_shift"),
+        ("Start Date", "start_date"),
+        ("Current Shift", "current_shift__employee_shift"),
+        ("Next Switch", "next_change_date"),
+    ]
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(manager_can_enter("base.view_rotatingshiftassign"), name="dispatch")
+class RotatingShiftList(RotatingShiftListParent):
+    """
+    List view
+    """
+
+    bulk_update_fields = ["rotating_shift_id", "start_date"]
+
+    def get_queryset(self):
+        queryset = super().get_queryset()
+        queryset = filtersubordinates(
+            self.request, queryset, "base.view_rotatingshiftassign"
+        )
+        return queryset
+
+    row_attrs = """
+                hx-get='{rotating_shift_detail}?instance_ids={ordered_ids}'
+                hx-target="#genericModalBody"
+                data-target="#genericModal"
+                data-toggle="oh-modal-toggle"
+                """
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(manager_can_enter("base.view_rotatingshiftassign"), name="dispatch")
+class RotatingShiftAssignNav(HorillaNavView):
+    """
+    Nav bar
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("rotating-shift-request-list")
+        if self.request.user.has_perm("base.add_rotatingshiftassign") or is_reportingmanager(self.request):
+            self.create_attrs = f"""
+                hx-get="{reverse_lazy('rotating-shift-assign-add')}"
+                data-toggle="oh-modal-toggle"
+                data-target="#genericMaodal"
+                hx-target="#genericModalBody"
+            """
+        self.actions = []
+        
+        if self.request.user.has_perm("base.view_rotatingshiftassign") or is_reportingmanager(self.request):
+            self.actions.append(
+                {
+                    "action": _("Import"),
+                    "attrs": f"""
+                            data-toggle="oh-modal-toggle"
+                            data-target="#shiftImport"
+                            class="oh-dropdown__link"
+                            role = "button"
+                            onclick="template_download(event)"
+                         """,
+                },
+            )
+
+        if self.request.user.has_perm("base.view_rotatingshiftassign") or is_reportingmanager(self.request):
+            self.actions.append(
+                {
+                    "action": _("Export"),
+                    "attrs": f"""
+                        data-toggle="oh-modal-toggle"
+                        data-target="#genericModal"
+                        hx-get="{reverse('export-rshift')}"
+                        hx-target ="#genericModalBody"
+                        style="cursor: pointer;"
+                        """,
+                },
+            )
+        if self.request.user.has_perm("base.change_rotatingshiftassign") or is_reportingmanager(self.request):
+            self.actions.append(
+                {
+                    "action": _("Archive"),
+                    "attrs": """
+                        onclick = "archiveRotateShift();"
+                        style="cursor: pointer;"
+                        """,
+                }
+            )
+            self.actions.append(
+                {
+                    "action": _("Un-Archive"),
+                    "attrs": """
+                        onclick = "un_archiveRotateShift();"
+                        style="cursor: pointer;"
+                        """,
+                }
+            )
+        if self.request.user.has_perm("base.delete_rotatingshiftassign") or is_reportingmanager(self.request):
+            self.actions.append(
+                {
+                    "action": _("Delete"),
+                    "attrs": """
+                            class ="shift"
+                            onclick = "deleteRotatingShift();"
+                            data-action ="delete"
+                            style="cursor: pointer; color:red !important"
+                            """,
+                }
+            )
+
+
+    nav_title = "Rotating Shift Assign"
+    filter_body_template = "cbv/rotating_shift/rotating_shift_filter.html"
+    filter_instance = RotatingShiftAssignFilters()
+    filter_form_context_name = "form"
+    search_swap_target = "#listContainer"
+
+    group_by_fields = [
+        ("employee_id", _("Employee")),
+        ("rotating_shift_id", _("Rotating Shift")),
+        ("based_on", _("Based on")),
+        ("employee_id__employee_work_info__department_id", _("Department")),
+        ("employee_id__employee_work_info__job_position_id", _("Job role")),
+        (
+            "employee_id__employee_work_info__reporting_manager_id",
+            _("Reporting Manager"),
+        ),
+    ]
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(manager_can_enter("base.view_rotatingshiftassign"), name="dispatch")
+class RotatingShiftDetailview(HorillaDetailedView):
+    """
+    Detail View
+    """
+
+    model = RotatingShiftAssign
+
+    title = _("Details")
+
+    header = {
+        "title": "employee_id__get_full_name",
+        "subtitle": "rotating_subtitle",
+        "avatar": "employee_id__get_avatar",
+    }
+
+    body = [
+        (_("Title"), "rotating_shift_id"),
+        (_("Based on"), "get_based_on_display"),
+        (_("Rotate"), "rotating_column"),
+        (_("Start Date"), "start_date"),
+        (_("Current Shift"), "current_shift"),
+        (_("Next Shift"), "next_shift"),
+        (_("Next Change Date"), "next_change_date"),
+        (_("Status"), "check_active"),
+    ]
+
+    action_method = "rotating_detail_actions"
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(manager_can_enter("base.view_rotatingshiftassign"), name="dispatch")
+class RotatingExportView(TemplateView):
+    """
+    For candidate export
+    """
+
+    template_name = "cbv/rotating_shift/rshift_export.html"
+
+    def get_context_data(self, **kwargs: Any):
+        context = super().get_context_data(**kwargs)
+        rshift_requests = RotatingShiftAssign.objects.all()
+        export_columns = RotatingShiftAssignExportForm
+        export_filter = RotatingShiftAssignFilters(queryset=rshift_requests)
+        context["export_columns"] = export_columns
+        context["export_filter"] = export_filter
+        return context
+
+
+class DynamicRotatingShiftTypeFormView(HorillaFormView):
+    """
+    form view
+    """
+
+    model = RotatingShift
+    form_class = RotatingShiftForm
+    new_display_title = "Create Rotating Shift"
+    is_dynamic_create_view = True
+    template_name = "cbv/rotating_shift/rot_shift_form.html"
+
+    def form_valid(self, form: RotatingShiftForm) -> HttpResponse:
+        if form.is_valid():
+            form.save()
+            message = _("Rotating Shift Created")
+            messages.success(self.request, message)
+            return self.HttpResponse()
+        return super().form_valid(form)
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(manager_can_enter("base.add_rotatingshift"), name="dispatch")
+class RotatingShiftTypeCreateFormView(DynamicRotatingShiftTypeFormView):
+    """
+    form view
+    """
+
+    is_dynamic_create_view = False
+    template_name = "cbv/rotating_shift/rot_shift_form.html"
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        form = self.form_class()
+        if self.form.instance.pk:
+            form = self.form_class(instance=self.form.instance)
+            self.form_class.verbose_name = _("Update Rotating Shift Type")
+        context[form] = form
+        return context
+
+    def form_valid(self, form: RotatingShiftForm) -> HttpResponse:
+        if form.is_valid():
+            form.save()
+            if self.form.instance.pk:
+                message = _("Rotating Shift Updated")
+            else:
+                message = _("Rotating Shift Created")
+            messages.success(self.request, message)
+            return self.HttpResponse()
+        return super().form_valid(form)
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(manager_can_enter("base.add_rotatingshiftassign"), name="dispatch")
+class RotatingShiftFormView(HorillaFormView):
+    """
+    Create and edit form
+    """
+
+    model = RotatingShiftAssign
+    form_class = RotatingShiftAssignForm
+    new_display_title = _("Rotating Shift Assign")
+    dynamic_create_fields = [("rotating_shift_id", DynamicRotatingShiftTypeFormView)]
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        if self.request.GET.get("emp_id"):
+            employee = self.request.GET.get("emp_id")
+            self.form.fields["employee_id"].initial = employee
+            self.form.fields["employee_id"].queryset = Employee.objects.filter(
+                id=employee
+            )
+        if self.form.instance.pk:
+            form = self.form_class(instance=self.form.instance)
+        self.form = choosesubordinates(
+            self.request, self.form, "base.add_rotatingshiftassign"
+        )
+        if self.form.instance.pk:
+            self.form_class.verbose_name = _("Rotating Shift Assign Update")
+        context["form"] = self.form
+        return context
+
+    def form_invalid(self, form: Any) -> HttpResponse:
+        if self.form.instance.pk:
+            self.form_class.verbose_name = _("Rotating Shift Assign Update")
+        if not form.is_valid():
+            errors = form.errors.as_data()
+            return render(
+                self.request, self.template_name, {"form": form, "errors": errors}
+            )
+        return super().form_invalid(form)
+
+    def form_valid(self, form: RotatingShiftAssignForm) -> HttpResponse:
+        if form.is_valid():
+            if form.instance.pk:
+                message = _("Rotating Shift Assign Updated Successfully")
+            else:
+                message = _("Rotating Shift Assign Created Successfully")
+                employee_ids = self.request.POST.getlist("employee_id")
+                employees = Employee.objects.filter(id__in=employee_ids).select_related(
+                    "employee_user_id"
+                )
+                users = [employee.employee_user_id for employee in employees]
+                with contextlib.suppress(Exception):
+                    notify.send(
+                        self.request.user.employee_get,
+                        recipient=users,
+                        verb="You are added to rotating shift",
+                        verb_ar="تمت إضافتك إلى وردية الدورية",
+                        verb_de="Sie werden der rotierenden Arbeitsschicht hinzugefügt",
+                        verb_es="Estás agregado a turno rotativo",
+                        verb_fr="Vous êtes ajouté au quart de travail rotatif",
+                        icon="infinite",
+                        redirect=reverse("employee-profile"),
+                    )
+            form.save()
+            messages.success(self.request, message)
+            return self.HttpResponse("")
+        return super().form_valid(form)
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(manager_can_enter("base.view_rotatingshiftassign"), name="dispatch")
+class RotatingShiftAssignDuplicate(HorillaFormView):
+    """
+    Duplicate form view
+    """
+
+    model = RotatingShiftAssign
+    form_class = RotatingShiftAssignForm
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        original_object = RotatingShiftAssign.objects.get(id=self.kwargs["pk"])
+        form = self.form_class(instance=original_object)
+        context["form"] = form
+        self.form_class.verbose_name = _("Duplicate")
+        return context
+
+    def form_invalid(self, form: Any) -> HttpResponse:
+        self.form_class.verbose_name = _("Duplicate")
+        if not form.is_valid():
+            errors = form.errors.as_data()
+            return render(
+                self.request, self.template_name, {"form": form, "errors": errors}
+            )
+        return super().form_invalid(form)
+
+    def form_valid(self, form: RotatingShiftAssignForm) -> HttpResponse:
+        form = self.form_class(self.request.POST)
+        self.form_class.verbose_name = _("Duplicate")
+        if form.is_valid():
+            message = _("Rotating Shift Assign Created Successfully")
+            messages.success(self.request, message)
+            form.save()
+            return self.HttpResponse()
+        return self.form_invalid(form)
diff --git a/base/cbv/rotating_work_type.py b/base/cbv/rotating_work_type.py
new file mode 100644
index 000000000..5aed8ab85
--- /dev/null
+++ b/base/cbv/rotating_work_type.py
@@ -0,0 +1,451 @@
+"""
+this page is handling the cbv methods of  rotating work request page
+"""
+
+from typing import Any
+
+from django.http import HttpResponse
+from django.contrib import messages
+from django.shortcuts import render
+from django.urls import reverse, reverse_lazy
+from django.utils.translation import gettext_lazy as _
+from django.utils.decorators import method_decorator
+from notifications.signals import notify
+from base.filters import RotatingWorkTypeAssignFilter
+from base.forms import (
+    RotatingWorkTypeAssignExportForm,
+    RotatingWorkTypeAssignForm,
+    RotatingWorkTypeForm,
+)
+from base.methods import (
+    check_manager,
+    choosesubordinates,
+    filtersubordinates,
+    is_reportingmanager,
+)
+from base.models import RotatingWorkType, RotatingWorkTypeAssign
+from base.decorators import manager_can_enter
+from employee.models import Employee
+from horilla_views.cbv_methods import login_required, permission_required
+from horilla_views.generic.cbv.views import (
+    HorillaDetailedView,
+    HorillaFormView,
+    HorillaNavView,
+    TemplateView,
+    HorillaListView,
+)
+
+
+@method_decorator(
+    manager_can_enter("base.view_rotatingworktypeassign"), name="dispatch"
+)
+@method_decorator(login_required, name="dispatch")
+class RotatingWorkRequestView(TemplateView):
+    """
+    for page view
+    """
+
+    template_name = "cbv/rotating_work_type/rotating_work_home.html"
+
+
+@method_decorator(login_required, name="dispatch")
+class GeneralParent(HorillaListView):
+    """
+    main parent class for list view
+    """
+
+    template_name = "cbv/rotating_work_type/extended_rotating_work.html"
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("rotating-list-view")
+        self.view_id = "rotating-work-container"
+        if (
+            self.request.user.has_perm("base.change_rotatingworktypeassign")
+            or self.request.user.has_perm("base.delete_rotatingworktypeassign")
+            or is_reportingmanager(self.request)
+        ):
+            self.action_method = "get_actions"
+        else:
+            self.action_method = None
+
+    filter_class = RotatingWorkTypeAssignFilter
+    model = RotatingWorkTypeAssign
+    # filter_keys_to_remove = ["deleted"]
+
+    columns = [
+        (_("Employee"), "employee_id", "employee_id__get_avatar"),
+        (_("Rotating Work Type"), "rotating_work_type_id"),
+        (_("Based On"), "get_based_on_display"),
+        (_("Rotate"), "rotate_data"),
+        (_("Start Date"), "start_date"),
+        (_("Current Work Type"), "current_work_type"),
+        (_("Next Switch"), "next_change_date"),
+        (_("Next Work Type"), "next_work_type"),
+    ]
+
+    sortby_mapping = [
+        ("Employee", "employee_id__get_full_name", "employee_id__get_avatar"),
+        ("Rotating Work Type", "rotating_work_type_id__name"),
+        ("Based On", "get_based_on_display"),
+        ("Rotate", "rotate_data"),
+        ("Start Date", "start_date"),
+        ("Current Work Type", "current_work_type__work_type"),
+        ("Next Switch", "next_change_date"),
+        ("Next Work Type", "next_work_type__work_type"),
+    ]
+    row_attrs = """
+                hx-get='{work_rotate_detail_view}?instance_ids={ordered_ids}'
+                hx-target="#genericModalBody"
+                data-target="#genericModal"
+                data-toggle="oh-modal-toggle"
+                """
+
+
+@method_decorator(
+    manager_can_enter("base.view_rotatingworktypeassign"), name="dispatch"
+)
+@method_decorator(login_required, name="dispatch")
+class RotatingWorkListView(GeneralParent):
+    """
+    list view of the rotating work assign page
+    """
+
+    def get_queryset(self):
+        queryset = super().get_queryset()
+        queryset = filtersubordinates(
+            self.request, queryset, "base.view_rotatingworktypeassign"
+        )
+        return queryset
+
+    bulk_update_fields = [
+        "rotating_work_type_id",
+        "start_date",
+        # "based_on"
+    ]
+
+
+@method_decorator(
+    manager_can_enter("base.view_rotatingworktypeassign"), name="dispatch"
+)
+@method_decorator(login_required, name="dispatch")
+class RotatingWorkNavView(HorillaNavView):
+    """
+    Nav view of the page
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("rotating-list-view")
+        self.actions = []
+        if self.request.user.has_perm(
+            "base.change_rotatingworktypeassign"
+        ) or is_reportingmanager(self.request):
+            self.actions.append(
+                {
+                    "action": "Archive",
+                    "attrs": """
+                id="archiveWorkRotateNav"
+                style="cursor: pointer;"
+                """,
+                }
+            )
+            self.actions.append(
+                {
+                    "action": _("Un-Archive"),
+                    "attrs": """
+                        onclick="
+                        UnarchiveWorkRotateNav();
+                        "
+                        style="cursor: pointer;"
+                        """,
+                },
+            )
+        if self.request.user.has_perm(
+            "base.delete_rotatingworktypeassign"
+        ) or is_reportingmanager(self.request):
+            self.actions.append(
+                {
+                    "action": _("Delete"),
+                    "attrs": """
+                        onclick="
+                        deleteWorkRotateNav();
+                        "
+                        data-action ="delete"
+                        style="cursor: pointer; color:red !important"
+                        """,
+                }
+            )
+
+        if self.request.user.has_perm(
+            "base.view_rotatingworktypeassign"
+        ) or is_reportingmanager(self.request):
+            self.actions.insert(
+                0,
+                {
+                    "action": _("Export"),
+                    "attrs": f"""
+                    data-toggle = "oh-modal-toggle"
+                    data-target = "#genericModal"
+                    hx-target="#genericModalBody"
+                    hx-get ="{reverse('rotating-action-export')}"
+                    style="cursor: pointer;"
+                """,
+                },
+            )
+        if self.request.user.has_perm(
+            "base.add_rotatingworktypeassign"
+        ) or is_reportingmanager(self.request):
+            self.create_attrs = f"""
+                hx-get="{reverse_lazy("rotating-work-type-assign-add")}"
+                hx-target="#genericModalBody"
+                data-target="#genericModal"
+                data-toggle="oh-modal-toggle"
+            """
+
+    nav_title = _("Rotating Work Type Assign")
+    filter_body_template = "cbv/rotating_work_type/filter_work_rotate.html"
+    filter_instance = RotatingWorkTypeAssignFilter()
+    filter_form_context_name = "form"
+    search_swap_target = "#listContainer"
+
+    group_by_fields = [
+        ("employee_id", _("Employee")),
+        ("rotating_work_type_id", _("Rotating Work Type")),
+        ("current_work_type", _("Current Work Type")),
+        ("based_on", _("Based On")),
+        ("employee_id__employee_work_info__department_id", _("Department")),
+        ("employee_id__employee_work_info__job_position_id", _("Job Role")),
+        (
+            "employee_id__employee_work_info__reporting_manager_id",
+            _("Reporting Manager"),
+        ),
+    ]
+
+
+@method_decorator(
+    manager_can_enter("base.view_rotatingworktypeassign"), name="dispatch"
+)
+@method_decorator(login_required, name="dispatch")
+class RotatingWorkDetailView(HorillaDetailedView):
+    """
+    Detail view of page
+    """
+
+    model = RotatingWorkTypeAssign
+
+    title = _("Details")
+    header = {
+        "title": "employee_id__get_full_name",
+        "subtitle": "work_rotate_detail_subtitle",
+        "avatar": "employee_id__get_avatar",
+    }
+    body = [
+        (_("Title"), "rotating_work_type_id"),
+        (_("Based On"), "get_based_on_display"),
+        (_("Rotate"), "rotate_data"),
+        (_("Start Date"), "start_date"),
+        (_("Current Work Type"), "current_work_type"),
+        (_("Next Switch"), "next_change_date"),
+        (_("Next Work Type"), "next_work_type"),
+        (_("Status"), "detail_is_active"),
+    ]
+    action_method = "get_detail_view_actions"
+
+
+@method_decorator(
+    manager_can_enter("base.view_rotatingworktypeassign"), name="dispatch"
+)
+@method_decorator(login_required, name="dispatch")
+class RotatingWorkExport(TemplateView):
+    """
+    To add export action in the navbar
+    """
+
+    template_name = "cbv/rotating_work_type/rotating_action_export.html"
+
+    def get_context_data(self, **kwargs: Any):
+        """
+        get data for export
+        """
+        candidates = RotatingWorkTypeAssign.objects.all()
+        export_columns = RotatingWorkTypeAssignExportForm
+        export_filter = RotatingWorkTypeAssignFilter(queryset=candidates)
+        context = super().get_context_data(**kwargs)
+        context["export_columns"] = export_columns
+        context["export_filter"] = export_filter
+        return context
+
+
+@method_decorator(manager_can_enter("base.add_rotatingworktype"), name="dispatch")
+@method_decorator(login_required, name="dispatch")
+class DynamicRotatingWorkTypeCreate(HorillaFormView):
+    """
+    form view for creating dynamic rotating work type
+    """
+
+    model = RotatingWorkType
+    form_class = RotatingWorkTypeForm
+    template_name = "cbv/rotating_work_type/forms/inherit.html"
+    new_display_title = _("Create Rotating Work Type")
+    is_dynamic_create_view = True
+
+    def form_valid(self, form: RotatingWorkTypeForm) -> HttpResponse:
+        if form.is_valid():
+            form.save()
+            messages.success(self.request, _("Rotating Work Type Created"))
+            return self.HttpResponse("<script>$('#reloadMessagesbutton').click();")
+        return super().form_valid(form)
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(permission_required("base.add_rotatingworktype"), name="dispatch")
+class RotatingWorkTypesCreateForm(DynamicRotatingWorkTypeCreate):
+    """
+    form view for creating rotating work types in settings
+    """
+
+    is_dynamic_create_view = False
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        form = self.form_class()
+
+        if self.form.instance.pk:
+            form = self.form_class(instance=self.form.instance)
+            self.form_class.verbose_name = _("Update Rotating Work Type")
+        context[form] = form
+        return context
+
+    def form_invalid(self, form: Any) -> HttpResponse:
+        if self.form.instance.pk:
+            self.form_class.verbose_name = _("Update Work Type")
+        if not form.is_valid():
+            errors = form.errors.as_data()
+            return render(
+                self.request, self.template_name, {"form": form, "errors": errors}
+            )
+        return super().form_invalid(form)
+
+    def form_valid(self, form: RotatingWorkTypeForm) -> HttpResponse:
+        if form.is_valid():
+            if form.instance.pk:
+                messages.success(self.request, _("Rotating Work Type Updated"))
+            else:
+                messages.success(self.request, _("Rotating Work Type Created"))
+            form.save()
+            return self.HttpResponse("")
+        return super().form_valid(form)
+
+
+@method_decorator(manager_can_enter("base.add_rotatingworktypeassign"), name="dispatch")
+@method_decorator(login_required, name="dispatch")
+class RotatingWorkTypeFormView(HorillaFormView):
+    """
+    form view
+    """
+
+    model = RotatingWorkTypeAssign
+    form_class = RotatingWorkTypeAssignForm
+
+    new_display_title = _("Rotating Work Type Assign")
+    dynamic_create_fields = [("rotating_work_type_id", DynamicRotatingWorkTypeCreate)]
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        if self.request.GET.get("emp_id"):
+            employee = self.request.GET.get("emp_id")
+            self.form.fields["employee_id"].initial = employee
+            self.form.fields["employee_id"].queryset = Employee.objects.filter(
+                id=employee
+            )
+        if self.form.instance.pk:
+            form = self.form_class(instance=self.form.instance)
+        self.form = choosesubordinates(
+            self.request, self.form, "base.add_rotatingworktypeassign"
+        )
+        if self.form.instance.pk:
+            self.form_class.verbose_name = _("Rotating Work Type Assign")
+
+        context["form"] = self.form
+        return context
+
+    def form_invalid(self, form: Any) -> HttpResponse:
+        if self.form.instance.pk:
+            self.form_class.verbose_name = _("Rotating Work Type Assign")
+        if not form.is_valid():
+            errors = form.errors.as_data()
+            return render(
+                self.request, self.template_name, {"form": form, "errors": errors}
+            )
+        return super().form_invalid(form)
+
+    def form_valid(self, form: RotatingWorkTypeAssignForm) -> HttpResponse:
+        if form.is_valid():
+            if form.instance.pk:
+                message = _("Rotating Work Assign Updated Successfully")
+            else:
+                message = _("Rotating Work Assigned")
+                employee_ids = self.request.POST.getlist("employee_id")
+                employees = Employee.objects.filter(id__in=employee_ids).select_related(
+                    "employee_user_id"
+                )
+                users = [employee.employee_user_id for employee in employees]
+                notify.send(
+                    self.request.user.employee_get,
+                    recipient=users,
+                    verb="You are added to rotating work type",
+                    verb_ar="تمت إضافتك إلى نوع العمل المتناوب",
+                    verb_de="Sie werden zum rotierenden Arbeitstyp hinzugefügt",
+                    verb_es="Se le agrega al tipo de trabajo rotativo",
+                    verb_fr="Vous êtes ajouté au type de travail rotatif",
+                    icon="infinite",
+                    redirect=reverse("employee-profile"),
+                )
+            form.save()
+            messages.success(self.request, message)
+            return self.HttpResponse()
+        return super().form_valid(form)
+
+
+@method_decorator(manager_can_enter("base.add_rotatingworktypeassign"), name="dispatch")
+@method_decorator(login_required, name="dispatch")
+class RotatingWorkTypeDuplicateForm(HorillaFormView):
+    """
+    duplicate from view
+    """
+
+    model = RotatingWorkTypeAssign
+    form_class = RotatingWorkTypeAssignForm
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        original_object = RotatingWorkTypeAssign.objects.get(id=self.kwargs["pk"])
+        form = self.form_class(instance=original_object)
+
+        context["form"] = form
+        self.form_class.verbose_name = _("Rotating Work Type Assign")
+        return context
+
+    def form_invalid(self, form: Any) -> HttpResponse:
+        # form = self.form_class(self.request.POST)
+        if not form.is_valid():
+            if self.form.instance.pk:
+                self.form_class.verbose_name = _("Rotating Work Type Assign")
+            errors = form.errors.as_data()
+            return render(
+                self.request, self.template_name, {"form": form, "errors": errors}
+            )
+        return super().form_invalid(form)
+
+    def form_valid(self, form: RotatingWorkTypeAssignForm) -> HttpResponse:
+        form = self.form_class(self.request.POST)
+        if self.form.instance.pk:
+            self.form_class.verbose_name = _("Rotating Work Type Assign")
+        if form.is_valid():
+            message = _("Rotating Work Assign Created")
+            messages.success(self.request, message)
+            form.save()
+            return self.HttpResponse("<script>window.location.reload();</script>")
+
+        return self.form_invalid(form)
diff --git a/base/cbv/settings_rotatingwork.py b/base/cbv/settings_rotatingwork.py
new file mode 100644
index 000000000..312c1f73e
--- /dev/null
+++ b/base/cbv/settings_rotatingwork.py
@@ -0,0 +1,103 @@
+"""
+this page is handling the cbv methods for Rotating work type in settings
+"""
+
+from typing import Any
+from django.urls import reverse
+from django.utils.decorators import method_decorator
+from django.utils.translation import gettext_lazy as _
+from base.filters import RotatingWorkTypeFilter
+from base.models import RotatingWorkType
+from horilla.decorators import permission_required
+from horilla_views.cbv_methods import login_required
+from horilla_views.generic.cbv.views import HorillaListView, HorillaNavView
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(permission_required("base.view_rotatingworktype"), name="dispatch")
+class RotatingWorkTypeList(HorillaListView):
+    """
+    list view of Rotating work types in settings
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("rotating-list")
+        self.actions = []
+        if self.request.user.has_perm("base.change_rotatingworktype"):
+            self.actions.append(
+                {
+                    "action": _("Edit"),
+                    "icon": "create-outline",
+                    "attrs": """
+                        class="oh-btn oh-btn--light-bkg w-100"
+                        hx-get='{get_update_url}?instance_ids={ordered_ids}'
+								hx-target="#genericModalBody"
+								data-toggle="oh-modal-toggle"
+								data-target="#genericModal"
+                      """,
+                },
+            )
+        if self.request.user.has_perm("base.delete_rotatingworktype"):
+            self.actions.append(
+                {
+                    "action": _("Delete"),
+                    "icon": "trash-outline",
+                    "attrs": """
+                            class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100"
+                            hx-get="{get_delete_url}?model=base.rotatingworktype&pk={pk}"
+                            data-toggle="oh-modal-toggle"
+                            data-target="#deleteConfirmation"
+                            hx-target="#deleteConfirmationBody"
+                        """,
+                }
+            )
+
+    model = RotatingWorkType
+    filter_class = RotatingWorkTypeFilter
+
+    row_attrs = """
+                id="rotatingWorkTypeTr{get_delete_instance}"
+                """
+
+    columns = [
+        (_("Title"), "name"),
+        (_("Work Type 1"), "work_type1"),
+        (_("Work Type 2"), "work_type2"),
+        (_("Additional Work Types"), "get_additional_worktytpes"),
+    ]
+
+    sortby_mapping = [
+        ("Title", "name"),
+        ("Work Type 1", "work_type1__work_type"),
+        ("Work Type 2", "work_type2__work_type"),
+        ("Additional Work Types", "get_additional_worktytpes"),
+    ]
+
+    header_attrs = {
+        "name": """ style="width:200px !important" """,
+    }
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(permission_required("base.view_rotatingworktype"), name="dispatch")
+class RotatingWorkTypeNav(HorillaNavView):
+    """
+    navbar of Rotating worktype
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("rotating-list")
+        if self.request.user.has_perm("base.add_rotatingworktype"):
+            self.create_attrs = f"""
+                                onclick = "event.stopPropagation();"
+                                data-toggle="oh-modal-toggle"
+                                data-target="#genericModal"
+                                hx-target="#genericModalBody"
+                                hx-get="{reverse('rotating-work-type-create-form')}"
+                                """
+
+    nav_title = _("Rotating Work Type")
+    search_swap_target = "#listContainer"
+    filter_instance = RotatingWorkTypeFilter()
diff --git a/base/cbv/settings_work_type.py b/base/cbv/settings_work_type.py
new file mode 100644
index 000000000..172d96ebb
--- /dev/null
+++ b/base/cbv/settings_work_type.py
@@ -0,0 +1,94 @@
+"""
+this page is handling the cbv methods for work type in settings
+"""
+
+from typing import Any
+from django.urls import reverse
+from django.utils.decorators import method_decorator
+from django.utils.translation import gettext_lazy as _
+from base.filters import WorkTypeFilter
+from base.models import WorkType
+from horilla.decorators import permission_required
+from horilla_views.cbv_methods import login_required
+from horilla_views.generic.cbv.views import HorillaListView, HorillaNavView
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(permission_required("base.view_worktype"), name="dispatch")
+class WorkTypeList(HorillaListView):
+    """
+    list view of work types in settings
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("worktype-list")
+        self.actions = []
+        if self.request.user.has_perm("base.change_worktype"):
+            self.actions.append(
+                {
+                    "action": _("Edit"),
+                    "icon": "create-outline",
+                    "attrs": """
+                            class="oh-btn oh-btn--light-bkg w-100"
+                            hx-get='{get_update_url}?instance_ids={ordered_ids}'
+                                    hx-target="#genericModalBody"
+                                    data-toggle="oh-modal-toggle"
+                                    data-target="#genericModal"
+                        """,
+                }
+            )
+        if self.request.user.has_perm("base.delete_worktype"):
+            self.actions.append(
+                {
+                    "action": _("Delete"),
+                    "icon": "trash-outline",
+                    "attrs": """
+                            class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100"
+                            hx-get="{get_delete_url}?model=base.worktype&pk={pk}"
+                            data-toggle="oh-modal-toggle"
+                            data-target="#deleteConfirmation"
+                            hx-target="#deleteConfirmationBody"
+                        """,
+                }
+            )
+
+    model = WorkType
+    filter_class = WorkTypeFilter
+
+    columns = [
+        (_("Work Type"), "work_type"),
+    ]
+
+    row_attrs = """
+                id="workTypeTr{get_delete_instance}"
+                """
+
+    header_attrs = {
+        "work_type": """ style="width:300px !important" """,
+        "action": """ style="width:180px !important" """,
+    }
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(permission_required("base.view_worktype"), name="dispatch")
+class WorkTypeNav(HorillaNavView):
+    """
+    navbar of worktype
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("worktype-list")
+        if self.request.user.has_perm("base.add_worktype"):
+            self.create_attrs = f"""
+                                onclick = "event.stopPropagation();"
+                                data-toggle="oh-modal-toggle"
+                                data-target="#genericModal"
+                                hx-target="#genericModalBody"
+                                hx-get="{reverse('work-type-create-form')}"
+                                """
+
+    nav_title = _("Work Type")
+    search_swap_target = "#listContainer"
+    filter_instance = WorkTypeFilter()
diff --git a/base/cbv/shift_request.py b/base/cbv/shift_request.py
new file mode 100644
index 000000000..96a1c5ab6
--- /dev/null
+++ b/base/cbv/shift_request.py
@@ -0,0 +1,666 @@
+"""
+This page is handling the cbv methods of shift request page.
+"""
+
+import contextlib
+from typing import Any
+from django import forms
+from django.http import HttpResponse
+from django.shortcuts import render
+from django.urls import reverse, reverse_lazy
+from django.utils.decorators import method_decorator
+from django.utils.translation import gettext_lazy as _
+from django.contrib import messages
+from django.db.models import Q
+from employee.models import Employee
+from notifications.signals import notify
+from base.filters import ShiftRequestFilter
+from base.forms import (
+    EmployeeShiftForm,
+    ShiftAllocationForm,
+    ShiftRequestColumnForm,
+    ShiftRequestForm,
+)
+from base.models import EmployeeShift, ShiftRequest
+from base.methods import choosesubordinates, filtersubordinates, is_reportingmanager
+from base.views import include_employee_instance
+from horilla_views.cbv_methods import login_required, permission_required
+from horilla_views.generic.cbv.views import (
+    HorillaFormView,
+    HorillaTabView,
+    TemplateView,
+    HorillaNavView,
+    HorillaListView,
+    HorillaDetailedView,
+)
+
+
+@method_decorator(login_required, name="dispatch")
+class ShiftRequestView(TemplateView):
+    """
+    Shift request page
+    """
+
+    template_name = "cbv/shift_request/shift_request.html"
+
+
+@method_decorator(login_required, name="dispatch")
+class ShiftList(HorillaListView):
+    """
+    List view
+    """
+
+    model = ShiftRequest
+    filter_class = ShiftRequestFilter
+
+    row_status_class = (
+        "approved-{approved} canceled-{canceled} requested-{approved}-{canceled}"
+    )
+    records_per_page = 5
+
+    row_status_indications = [
+        (
+            "canceled--dot",
+            _("Canceled"),
+            """
+            onclick="
+                $('#applyFilter').closest('form').find('[name=canceled]').val('true');
+                $('[name=approved]').val('unknown').change();
+                $('[name=requested]').val('unknown').change();
+                $('#applyFilter').click();
+            "
+            """,
+        ),
+        (
+            "approved--dot",
+            _("Approved"),
+            """
+            onclick="
+                $('#applyFilter').closest('form').find('[name=approved]').val('true');
+                $('[name=canceled]').val('unknown').change();
+                $('[name=requested]').val('unknown').change();
+                $('#applyFilter').click();
+            "
+            """,
+        ),
+        (
+            "requested--dot",
+            _("Requested"),
+            """
+            onclick="
+                $('#applyFilter').closest('form').find('[name=requested]').val('true');
+                $('[name=approved]').val('unknown').change();
+                $('[name=canceled]').val('unknown').change();
+                $('#applyFilter').click();
+            "
+            """,
+        ),
+    ]
+
+
+@method_decorator(login_required, name="dispatch")
+class ShiftRequestList(ShiftList):
+    """
+    List view for shift requests
+    """
+
+    selected_instances_key_id = "shiftselectedInstances"
+    template_name = "cbv/shift_request/extended_shift.html"
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("list-shift-request")
+        self.view_id = "shift-container"
+        # self.filter_keys_to_remove = ["deleted"]
+        if self.request.user.has_perm(
+            "base.change_shiftrequest"
+        ) or is_reportingmanager(self.request):
+            self.action_method = "confirmations"
+        else:
+            self.action_method = None
+
+    def get_queryset(self):
+        queryset = super().get_queryset()
+        data = queryset
+        if not self.request.user.has_perm("base.view_shiftrequest"):
+            employee = self.request.user.employee_get
+            queryset = filtersubordinates(
+                self.request,
+                queryset.filter(reallocate_to__isnull=True),
+                "base.add_shiftrequest",
+            )
+            queryset = queryset | data.filter(employee_id=employee)
+            queryset = queryset.filter(employee_id__is_active=True)
+
+        return queryset
+
+    columns = [
+        (_("Employee"), "employee_id", "employee_id__get_avatar"),
+        (_("Requested Shift"), "shift_id"),
+        (_("Previous/Current Shift"), "previous_shift_id"),
+        (_("Requested Date"), "requested_date"),
+        (_("Requested Till"), "requested_till"),
+        (_("Description"), "description"),
+        (_("Comment"), "comment"),
+    ]
+    header_attrs = {
+        "option": """
+                    style="width:190px !important;"
+                    """
+    }
+
+    option_method = "shift_actions"
+
+    sortby_mapping = [
+        ("Employee", "employee_id__get_full_name"),
+        ("Requested Shift", "shift_id__employee_shift"),
+        ("Previous/Current Shift", "previous_shift_id__employee_shift"),
+        ("Requested Date", "requested_date"),
+        ("Requested Till", "requested_till"),
+    ]
+
+    row_attrs = """
+                hx-get='{shift_details}?instance_ids={ordered_ids}'
+                hx-target="#genericModalBody"
+                data-target="#genericModal"
+                data-toggle="oh-modal-toggle"
+                """
+
+
+@method_decorator(login_required, name="dispatch")
+class AllocatedShift(ShiftList):
+    """
+    Allocated tab class
+    """
+
+    selected_instances_key_id = "allocatedselectedInstances"
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("allocated-shift-view")
+
+    columns = [
+        (_("Employee"), "employee_id", "employee_id__get_avatar"),
+        (_("Allocated Employee"), "reallocate_to"),
+        (_("User Availability"), "user_availability"),
+        (_("Requested Shift"), "shift_id"),
+        (_("Previous/Current Shift"), "previous_shift_id"),
+        (_("Requested Date"), "requested_date"),
+        (_("Requested Till"), "requested_till"),
+        (_("Description"), "description"),
+        (_("Comment"), "comment"),
+    ]
+
+    action_method = "allocated_confirm_action_col"
+    option_method = "allocate_confirmations"
+
+    def get_queryset(self):
+        queryset = super().get_queryset()
+        b = queryset
+        employee = self.request.user.employee_get
+        queryset = filtersubordinates(
+            self.request,
+            queryset.filter(reallocate_to__isnull=False),
+            "base.add_shiftrequest",
+        )
+        allocated_requests = b.filter(reallocate_to__isnull=False)
+        if not self.request.user.has_perm("base.view_shiftrequest"):
+            allocated_requests = allocated_requests.filter(
+                Q(reallocate_to=employee) | Q(employee_id=employee)
+            )
+        queryset = queryset | allocated_requests
+
+        return queryset
+
+    row_attrs = """
+                hx-get='{allocate_shift_details}?instance_ids={ordered_ids}'
+                hx-target="#genericModalBody"
+                data-target="#genericModal"
+                data-toggle="oh-modal-toggle"
+                """
+    sortby_mapping = [
+        ("Employee", "employee_id__get_full_name"),
+        ("Allocated Employee", "reallocate_to__get_full_name"),
+        ("Requested Shift", "shift_id__employee_shift"),
+        ("Previous/Current Shift", "previous_shift_id__employee_shift"),
+        ("Requested Date", "requested_date"),
+        ("Requested Till", "requested_till"),
+    ]
+
+
+@method_decorator(login_required, name="dispatch")
+class ShitRequestNav(HorillaNavView):
+    """
+    Nav bar
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("shift-request-tab")
+        self.create_attrs = f"""
+             hx-get="{reverse_lazy('shift-request')}"
+             data-toggle="oh-modal-toggle"
+             data-target="#genericModal"
+             hx-target="#genericModalBody"
+            
+         """
+        self.actions = []
+        if self.request.user.has_perm(
+            "base.change_shiftrequest"
+        ) or is_reportingmanager(self.request):
+            self.actions.append(
+                {
+                    "action": _("Approve Requests"),
+                    "attrs": """
+                    onclick="
+                    shiftRequestApprove();
+                    "
+                    style="cursor: pointer;"
+                    """,
+                }
+            )
+            self.actions.append(
+                {
+                    "action": _("Reject Requests"),
+                    "attrs": """
+                    onclick="
+                    shiftRequestReject();
+                    "
+                    style="cursor: pointer;"
+                    """,
+                }
+            )
+        if self.request.user.has_perm(
+            "base.delete_shiftrequest"
+        ) or is_reportingmanager(self.request):
+            self.actions.append(
+                {
+                    "action": _("Delete"),
+                    "attrs": """
+                    onclick="
+                    shiftRequestDelete();
+                    "
+                    data-action ="delete"
+                    style="cursor: pointer; color:red !important"
+                    """,
+                }
+            )
+
+        if self.request.user.has_perm("base.view_shiftrequest") or is_reportingmanager(
+            self.request
+        ):
+            self.actions.insert(
+                0,
+                {
+                    "action": _("Export"),
+                    "attrs": f"""
+                    data-toggle="oh-modal-toggle"
+                    data-target="#genericModal"
+                    hx-get="{reverse('shift-export')}"
+                    hx-target="#genericModalBody"
+                    style="cursor: pointer;"
+                    """,
+                },
+            )
+
+    nav_title = _("Shift Requests")
+    filter_body_template = "cbv/shift_request/filter.html"
+    filter_instance = ShiftRequestFilter()
+    filter_form_context_name = "form"
+    search_swap_target = "#listContainer"
+
+    group_by_fields = [
+        ("employee_id", _("Employee")),
+        ("shift_id", _("Requested Shift")),
+        ("previous_shift_id", _("Current Shift")),
+        ("requested_date", _("Requested Date")),
+    ]
+
+
+@method_decorator(login_required, name="dispatch")
+class ShiftRequestTab(HorillaTabView):
+    """
+    Tab View
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.view_id = "shift-tab"
+        self.tabs = [
+            {
+                "title": _("Shift Requests"),
+                "url": f"{reverse('list-shift-request')}",
+            },
+            {
+                "title": _("Allocated Shift Requests"),
+                "url": f"{reverse('allocated-shift-view')}",
+            },
+        ]
+
+
+@method_decorator(login_required, name="dispatch")
+class ExportView(TemplateView):
+    """
+    For candidate export
+    """
+
+    template_name = "cbv/shift_request/export_shift.html"
+
+    def get_context_data(self, **kwargs: Any):
+        context = super().get_context_data(**kwargs)
+        shift_requests = ShiftRequest.objects.all()
+        export_fields = ShiftRequestColumnForm
+        export_filter = ShiftRequestFilter(queryset=shift_requests)
+        context["export_fields"] = export_fields
+        context["export_filter"] = export_filter
+        return context
+
+
+@method_decorator(login_required, name="dispatch")
+class ShiftRequestDetailview(HorillaDetailedView):
+    """
+    Detail View
+    """
+
+    model = ShiftRequest
+
+    title = _("Details")
+
+    header = {
+        "title": "employee_id__get_full_name",
+        "subtitle": "details_subtitle",
+        "avatar": "employee_id__get_avatar",
+    }
+
+    body = [
+        (_("Requested Shift"), "shift_id"),
+        (_("Previous Shift"), "previous_shift_id"),
+        (_("Requested Date"), "requested_date"),
+        (_("Requested Till"), "requested_till"),
+        (_("Description"), "description"),
+        (_("Is permenent shift"), "is_permanent"),
+    ]
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        if self.request.GET.get("dashboard"):
+            self.action_method = "confirmations"
+        else:
+            self.action_method = "detail_actions"
+
+
+@method_decorator(login_required, name="dispatch")
+class AllocatedShiftDetailView(ShiftRequestDetailview):
+    """
+    Allocated detail View
+    """
+
+    body = [
+        (_("Allocated Employee"), "reallocate_to"),
+        (_("User Availability"), "user_availability"),
+        (_("Requested Shift"), "shift_id"),
+        (_("Previous Shift"), "previous_shift_id"),
+        (_("Requested Date"), "requested_date"),
+        (_("Requested Till"), "requested_till"),
+        (_("Description"), "description"),
+    ]
+
+
+class ShiftTypeFormView(HorillaFormView):
+    """
+    form view
+    """
+
+    model = EmployeeShift
+    form_class = EmployeeShiftForm
+    new_display_title = "Create Shift"
+    is_dynamic_create_view = True
+
+    def form_valid(self, form: EmployeeShiftForm) -> HttpResponse:
+        if form.is_valid():
+            form.save()
+            message = _("Shift Created")
+            messages.success(self.request, message)
+            return self.HttpResponse("<script>window.location.reload():</script>")
+        return super().form_valid(form)
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(permission_required(perm="base.add_employeeshift"), name="dispatch")
+class ShiftTypeCreateFormView(ShiftTypeFormView):
+
+    is_dynamic_create_view = False
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        # form = self.form_class()
+        if self.form.instance.pk:
+            self.form_class(instance=self.form.instance)
+            self.form_class.verbose_name = _("Update Shift")
+        context["form"] = self.form
+        return context
+
+    def form_valid(self, form: EmployeeShiftForm) -> HttpResponse:
+        if form.is_valid():
+            if self.form.instance.pk:
+                message = _("Shift Updated")
+            else:
+                message = _("Shift Created")
+            form.save()
+            messages.success(self.request, message)
+            return self.HttpResponse()
+
+
+@method_decorator(login_required, name="dispatch")
+class ShiftRequestFormView(HorillaFormView):
+    """
+    Form View
+    """
+
+    model = ShiftRequest
+    form_class = ShiftRequestForm
+    new_display_title = _("Create Shift Request")
+    template_name = "cbv/shift_request/shift_request_form.html"
+    dynamic_create_fields = [("shift_id", ShiftTypeFormView)]
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        employee = self.request.user.employee_get.id
+        if self.form.instance.pk:
+            self.form_class(instance=self.form.instance)
+        self.form = choosesubordinates(
+            self.request,
+            self.form,
+            "base.add_shiftrequest",
+        )
+        self.form = include_employee_instance(self.request, self.form)
+        if self.form.instance.pk:
+            self.form_class.verbose_name = _("Update Request")
+        if self.request.GET.get("emp_id"):
+            employee = self.request.GET.get("emp_id")
+            self.form.fields["employee_id"].queryset = Employee.objects.filter(
+                id=employee
+            )
+        self.form.fields["employee_id"].initial = employee
+        context["form"] = self.form
+        return context
+
+    def form_invalid(self, form: Any) -> HttpResponse:
+        if self.form.instance.pk:
+            self.form_class.verbose_name = _("Update Request")
+        if not form.is_valid():
+            errors = form.errors.as_data()
+            return render(
+                self.request, self.template_name, {"form": form, "errors": errors}
+            )
+        return super().form_invalid(form)
+
+    def form_valid(self, form: ShiftRequestForm) -> HttpResponse:
+        if form.is_valid():
+            if form.instance.pk:
+                message = _("Shift request updated Successfully")
+                form.save()
+            else:
+                instance = form.save()
+                message = _("Shift request added Successfully")
+                with contextlib.suppress(Exception):
+                    notify.send(
+                        instance.employee_id,
+                        recipient=(
+                            instance.employee_id.employee_work_info.reporting_manager_id.employee_user_id
+                        ),
+                        verb=f"You have new shift request to approve \
+                            for {instance.employee_id}",
+                        verb_ar=f"لديك طلب وردية جديد للموافقة عليه لـ {instance.employee_id}",
+                        verb_de=f"Sie müssen eine neue Schichtanfrage \
+                            für {instance.employee_id} genehmigen",
+                        verb_es=f"Tiene una nueva solicitud de turno para \
+                            aprobar para {instance.employee_id}",
+                        verb_fr=f"Vous avez une nouvelle demande de quart de\
+                            travail à approuver pour {instance.employee_id}",
+                        icon="information",
+                        redirect=reverse("shift-request-view") + f"?id={instance.id}",
+                    )
+            messages.success(self.request, message)
+            return self.HttpResponse()
+        return super().form_valid(form)
+
+
+@method_decorator(login_required, name="dispatch")
+class ShiftRequestFormDuplicate(HorillaFormView):
+    """
+    Duplicate form view
+    """
+
+    model = ShiftRequest
+    form_class = ShiftRequestForm
+    template_name = "cbv/shift_request/shift_request_form.html"
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        original_object = ShiftRequest.objects.get(id=self.kwargs["pk"])
+        self.form = self.form_class(instance=original_object)
+        for field_name, field in self.form.fields.items():
+            if isinstance(field, forms.CharField):
+                if field.initial:
+                    initial_value = field.initial
+                else:
+                    initial_value = f"{self.form.initial.get(field_name, '')} (copy)"
+                self.form.initial[field_name] = initial_value
+                self.form.fields[field_name].initial = initial_value
+        self.form = choosesubordinates(
+            self.request,
+            self.form,
+            "base.add_shiftrequest",
+        )
+        self.form = include_employee_instance(self.request, self.form)
+        if self.request.GET.get("emp_id"):
+            employee = self.request.GET.get("emp_id")
+            self.form.fields["employee_id"].queryset = Employee.objects.filter(
+                id=employee
+            )
+        context["form"] = self.form
+        self.form_class.verbose_name = _("Duplicate")
+        return context
+
+    def form_invalid(self, form: Any) -> HttpResponse:
+        # form = self.form_class(self.request.POST)
+        self.form_class.verbose_name = _("Duplicate")
+        if not form.is_valid():
+            errors = form.errors.as_data()
+            return render(
+                self.request, self.template_name, {"form": form, "errors": errors}
+            )
+        return super().form_invalid(form)
+
+    def form_valid(self, form: ShiftRequestForm) -> HttpResponse:
+        form = self.form_class(self.request.POST)
+        if form.is_valid():
+            form.save()
+            message = _("Shift request added Successfully")
+            messages.success(self.request, message)
+            return self.HttpResponse("<script>window.location.reload();</script>")
+        return super().form_valid(form)
+
+
+@method_decorator(login_required, name="dispatch")
+class ShiftAllocationFormView(HorillaFormView):
+    """
+    Form View
+    """
+
+    model = ShiftRequest
+    form_class = ShiftAllocationForm
+    new_display_title = _("Shift Request")
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        if self.form.instance.pk:
+            self.form_class(instance=self.form.instance)
+        self.form = choosesubordinates(
+            self.request,
+            self.form,
+            "base.add_shiftrequest",
+        )
+        self.form = include_employee_instance(self.request, self.form)
+        if self.form.instance.pk:
+            self.form_class.verbose_name = _("Update Request")
+        if self.request.GET.get("emp_id"):
+            employee = self.request.GET.get("emp_id")
+            self.form.fields["employee_id"].initial = employee
+            self.form.fields["employee_id"].queryset = Employee.objects.filter(
+                id=employee
+            )
+        context["form"] = self.form
+        return context
+
+    def form_invalid(self, form: Any) -> HttpResponse:
+
+        # form = self.form_class(self.request.POST)
+        if self.form.instance.pk:
+            self.form_class.verbose_name = _("Update Request")
+        if not form.is_valid():
+            errors = form.errors.as_data()
+            return render(
+                self.request, self.template_name, {"form": form, "errors": errors}
+            )
+        return super().form_invalid(form)
+
+    def form_valid(self, form: ShiftRequestForm) -> HttpResponse:
+        if form.is_valid():
+            if form.instance.pk:
+                message = _("Shift request updated Successfully")
+                form.save()
+            else:
+                instance = form.save()
+                message = _("Shift request added Successfully")
+                reallocate_emp = form.cleaned_data["reallocate_to"]
+                with contextlib.suppress(Exception):
+                    notify.send(
+                        form.instance.employee_id,
+                        recipient=(
+                            form.instance.employee_id.employee_work_info.reporting_manager_id.employee_user_id
+                        ),
+                        verb=f"You have a new shift reallocation request to approve for {instance.employee_id}.",
+                        verb_ar=f"لديك طلب تخصيص جديد للورديات يتعين عليك الموافقة عليه لـ {instance.employee_id}.",
+                        verb_de=f"Sie haben eine neue Anfrage zur Verschiebung der Schichtzuteilung zur Genehmigung für {instance.employee_id}.",
+                        verb_es=f"Tienes una nueva solicitud de reasignación de turnos para aprobar para {instance.employee_id}.",
+                        verb_fr=f"Vous avez une nouvelle demande de réaffectation de shift à approuver pour {instance.employee_id}.",
+                        icon="information",
+                        redirect=reverse("shift-request-view") + f"?id={instance.id}",
+                    )
+
+                    notify.send(
+                        instance.employee_id,
+                        recipient=(reallocate_emp.employee_user_id),
+                        verb=f"You have a new shift reallocation request from {instance.employee_id}.",
+                        verb_ar=f"لديك طلب تخصيص جديد للورديات من {instance.employee_id}.",
+                        verb_de=f"Sie haben eine neue Anfrage zur Verschiebung der Schichtzuteilung von {instance.employee_id}.",
+                        verb_es=f"Tienes una nueva solicitud de reasignación de turnos de {instance.employee_id}.",
+                        verb_fr=f"Vous avez une nouvelle demande de réaffectation de shift de {instance.employee_id}.",
+                        icon="information",
+                        redirect=reverse("shift-request-view") + f"?id={instance.id}",
+                    )
+            messages.success(self.request, message)
+            return self.HttpResponse("<script>window.location.reload();</script>")
+        return super().form_valid(form)
diff --git a/base/cbv/work_shift_tab.py b/base/cbv/work_shift_tab.py
new file mode 100644
index 000000000..867a31531
--- /dev/null
+++ b/base/cbv/work_shift_tab.py
@@ -0,0 +1,277 @@
+"""
+This page is handling the cbv methods of work type and shift tab in employee profile page.
+"""
+
+from typing import Any
+from django.utils.translation import gettext_lazy as _
+from django.utils.decorators import method_decorator
+from django.urls import reverse
+from base.cbv.rotating_shift_assign import (
+    RotatingShiftDetailview,
+    RotatingShiftListParent,
+)
+from base.cbv.rotating_work_type import GeneralParent, RotatingWorkDetailView
+from base.cbv.work_type_request import WorkRequestListView
+from base.cbv.shift_request import ShiftRequestList
+from base.methods import filtersubordinates, is_reportingmanager
+from base.models import WorkTypeRequest
+from employee.models import Employee
+from horilla_views.generic.cbv.views import HorillaTabView
+from horilla_views.cbv_methods import login_required
+
+
+class WorkAndShiftTabView(HorillaTabView):
+    """
+    generic tab view for work type and shift
+    """
+
+    template_name = "cbv/work_shift_tab/extended_work-shift.html"
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.view_id = "work-shift"
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        pk = self.kwargs.get("pk")
+        context["emp_id"] = pk
+        employee = Employee.objects.get(id=pk)
+        context["employee"] = employee
+        context["tabs"] = [
+            {
+                "title": _("Work type request"),
+                "url": f"{reverse('employee-worktype-tab-list',kwargs={'pk': pk})}",
+                "actions": [
+                    {
+                        "action": "Add Work Type Request",
+                        "attrs": f"""
+                                hx-get="{reverse('work-type-request')}?emp_id={pk}",
+								hx-target="#genericModalBody"
+								data-toggle="oh-modal-toggle"
+								data-target="#genericModal"
+                      """,
+                    }
+                ],
+            },
+            {
+                "title": _("Rotating work type"),
+                "url": f"{reverse('employee-rotating-work-tab-list',kwargs={'pk': pk})}",
+                "actions": [
+                    {
+                        "action": "Add Rotating Work",
+                        "attrs": f"""
+                                hx-get="{reverse('rotating-work-type-assign-add')}?emp_id={pk}",
+								hx-target="#genericModalBody"
+								data-toggle="oh-modal-toggle"
+								data-target="#genericModal"
+                      """,
+                    }
+                ],
+            },
+            {
+                "title": _("Shift request"),
+                "url": f"{reverse('shift-request-individual-tab-view',kwargs={'pk': pk})}",
+                "actions": [
+                    {
+                        "action": "Add Shift Request",
+                        "attrs": f"""
+                                hx-get="{reverse('shift-request')}?emp_id={pk}",
+								hx-target="#genericModalBody"
+								data-toggle="oh-modal-toggle"
+								data-target="#genericModal"
+                      """,
+                    }
+                ],
+            },
+            {
+                "title": _("Rotating Shift"),
+                "url": f"{reverse('rotating-shift-individual-tab-view',kwargs={'pk': pk})}",
+                "actions": [
+                    {
+                        "action": "Add Rotating Shift",
+                        "attrs": f"""
+                                hx-get="{reverse('rotating-shift-assign-add')}?emp_id={pk}",
+								hx-target="#genericModalBody"
+								data-toggle="oh-modal-toggle"
+								data-target="#genericModal"
+                      """,
+                    }
+                ],
+            },
+        ]
+        return context
+
+
+class WorkTypeIndividualTabList(WorkRequestListView):
+    """
+    List view for work type tab
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        pk = self.request.resolver_match.kwargs.get('pk')
+        self.search_url = reverse("employee-worktype-tab-list",kwargs= {'pk': pk} )
+        self.view_id = "work_target"
+
+
+    def get_queryset(self):
+        queryset = super().get_queryset()
+        pk = self.kwargs.get("pk")
+        queryset = WorkTypeRequest.objects.filter(employee_id=pk)
+        return queryset
+
+    columns = [
+        col for col in WorkRequestListView.columns if col[1] != "comment_note"
+    ] + [(_("Status"), "request_status")]
+
+
+class ShiftRequestIndividualTabView(ShiftRequestList):
+    """
+    List view for shift request tab
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.view_id = "shift-reques-individual-div"
+        self.selected_instances_key_id = "shiftselectedInstancesIndividual"
+        pk = self.request.resolver_match.kwargs.get('pk')
+        self.search_url = reverse("shift-request-individual-tab-view",kwargs= {'pk': pk} )
+
+    columns = [
+        column for column in ShiftRequestList.columns if column[1] != "comment"
+    ] + [(_("Status"), "request_status")]
+
+    def get_queryset(self):
+        queryset = super().get_queryset()
+        pk = self.kwargs.get("pk")
+        queryset = queryset.filter(employee_id=pk)
+        return queryset
+
+
+class RotatingShiftAssignIndividualView(RotatingShiftListParent):
+    """
+    List view for Rotating shift request tab
+    """
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        pk = self.request.resolver_match.kwargs.get('pk')
+        self.search_url = reverse("rotating-shift-individual-tab-view",kwargs= {'pk': pk} )
+        self.view_id = "rotating-div"
+
+    
+
+    columns = RotatingShiftListParent.columns + [
+        (_("Status"), "check_active"),
+    ]
+
+    row_attrs = """
+                hx-get='{rotating_shift_individual_detail}?instance_ids={ordered_ids}'
+                hx-target="#genericModalBody"
+                data-target="#genericModal"
+                data-toggle="oh-modal-toggle"
+                """
+
+    def get_queryset(self):
+        queryset = super().get_queryset()
+        pk = self.kwargs.get("pk")
+        queryset = queryset.filter(employee_id=pk)
+        return queryset
+
+
+class RotatingWorkIndividualTab(GeneralParent):
+    """
+    List view for rotating work type tab
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        pk = self.request.resolver_match.kwargs.get('pk')
+        self.search_url = reverse("employee-rotating-work-tab-list",kwargs= {'pk': pk} )
+        self.view_id = "rotating-work-div"
+
+    columns = GeneralParent.columns + [
+        (_("Status"), "detail_is_active"),
+    ]
+
+    def get_queryset(self):
+        queryset = super().get_queryset()
+        pk = self.kwargs.get("pk")
+        queryset = queryset.filter(employee_id=pk)
+        return queryset
+
+    row_attrs = """
+                hx-get='{individual_tab_work_rotate_detail_view}?instance_ids={ordered_ids}'
+                hx-target="#genericModalBody"
+                data-target="#genericModal"
+                data-toggle="oh-modal-toggle"
+                """
+
+
+# @method_decorator(login_required, name="dispatch")
+# class DetailViewChild(RotatingWorkDetailView):
+#     """
+#     parent for detail view
+#     """
+
+#     @method_decorator(login_required, name="dispatch")
+#     def dispatch(self, *args, **kwargs):
+#         return super(RotatingWorkDetailView, self).dispatch(*args, **kwargs)
+
+#     def get_queryset(self):
+#         queryset = super().get_queryset()
+#         pk = self.kwargs.get("pk")
+#         queryset = queryset.filter(pk=pk)
+#         return queryset
+
+
+class RotatingShiftAssignIndividualDetailView(RotatingShiftDetailview):
+    """
+    Individual rotating shift assign detail view
+    """
+
+    @method_decorator(login_required, name="dispatch")
+    def dispatch(self, *args, **kwargs):
+        return super(RotatingShiftDetailview, self).dispatch(*args, **kwargs)
+
+    def get_queryset(self):
+        queryset = super().get_queryset()
+        pk = self.kwargs.get("pk")
+        obj = queryset.get(pk=pk)
+        employee_id = obj.employee_id
+        if is_reportingmanager(self.request):
+            queryset = filtersubordinates(
+                self.request, queryset, "base.view_rotatingshiftassign"
+            ) | queryset.filter(employee_id=self.request.user.employee_get)
+        elif self.request.user.has_perm("base.view_rotatingshiftassign"):
+            queryset = queryset.filter(employee_id=employee_id)
+        else:
+            queryset = queryset.filter(employee_id=self.request.user.employee_get)
+        return queryset
+
+
+@method_decorator(login_required, name="dispatch")
+class DetailViewChild(RotatingWorkDetailView):
+    """
+    parent for detail view
+    """
+
+    @method_decorator(login_required, name="dispatch")
+    def dispatch(self, *args, **kwargs):
+        return super(RotatingWorkDetailView, self).dispatch(*args, **kwargs)
+
+    def get_queryset(self):
+        queryset = super().get_queryset()
+        pk = self.kwargs.get("pk")
+        obj = queryset.get(pk=pk)
+        emp_id = obj.employee_id
+        # queryset = queryset.filter(employee_id=emp_id)
+        if is_reportingmanager(self.request):
+            queryset = filtersubordinates(
+                self.request, queryset, "base.view_rotatingworktypeassign"
+            ) | queryset.filter(employee_id=self.request.user.employee_get)
+        elif self.request.user.has_perm("base.view_rotatingworktypeassign"):
+            queryset = queryset.filter(employee_id=emp_id)
+        else:
+            queryset = queryset.filter(employee_id=self.request.user.employee_get)
+
+        return queryset
diff --git a/base/cbv/work_type_request.py b/base/cbv/work_type_request.py
new file mode 100644
index 000000000..b112932b5
--- /dev/null
+++ b/base/cbv/work_type_request.py
@@ -0,0 +1,492 @@
+"""
+this page is handling the cbv methods of work request page
+"""
+
+import contextlib
+from typing import Any
+from django import forms
+from django.contrib import messages
+from django.http import HttpResponse
+from django.shortcuts import render
+from django.urls import reverse, reverse_lazy
+from django.utils.decorators import method_decorator
+from employee.models import Employee
+from notifications.signals import notify
+from django.utils.translation import gettext_lazy as _
+from base.filters import WorkTypeRequestFilter
+from base.forms import WorkTypeForm, WorkTypeRequestColumnForm, WorkTypeRequestForm
+from base.methods import choosesubordinates, filtersubordinates, is_reportingmanager
+from base.models import WorkType, WorkTypeRequest
+from base.views import include_employee_instance
+from horilla_views.generic.cbv.views import (
+    HorillaDetailedView,
+    TemplateView,
+    HorillaListView,
+    HorillaNavView,
+    HorillaFormView,
+)
+from horilla_views.cbv_methods import login_required, permission_required
+
+
+@method_decorator(login_required, name="dispatch")
+class WorkRequestView(TemplateView):
+    """
+    for page view
+    """
+
+    template_name = "cbv/work_type_request/work_type_home.html"
+
+
+class WorkRequestListView(HorillaListView):
+    """
+    list view of the work request page
+    """
+
+    filter_class = WorkTypeRequestFilter
+    model = WorkTypeRequest
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("work-list-view")
+        self.view_id = "work-shift"
+        if self.request.user.has_perm(
+            "base.change_worktyperequest"
+        ) or is_reportingmanager(self.request):
+            self.action_method = "confirmation"
+        else:
+            self.action_method = None
+
+    def get_queryset(self):
+        """
+        queryset to filter data based on permission
+        """
+        queryset = super().get_queryset()
+        view_data = queryset
+        if not self.request.user.has_perm("base.view_worktyperequest"):
+            employee = self.request.user.employee_get
+            queryset = filtersubordinates(
+                self.request, queryset, "base.add_worktyperequest"
+            )
+            queryset = queryset | view_data.filter(employee_id=employee)
+            queryset = queryset.filter(employee_id__is_active=True)
+        return queryset
+
+    columns = [
+        (_("Employee"), "employee_id", "employee_id__get_avatar"),
+        (_("Requested Work Type"), "work_type_id"),
+        (_("Previous/current Work Type"), "previous_work_type_id"),
+        (_("Requested Date"), "requested_date"),
+        (_("Requested Till"), "requested_till"),
+        (_("Description"), "description"),
+        (_("Comment"), "comment_note"),
+    ]
+    records_per_page = 10
+    option_method = "work_actions"
+
+    header_attrs = {
+        "option": """
+                style="width:200px !important;"
+                """,
+    }
+
+    sortby_mapping = [
+        ("Employee", "employee_id__get_full_name", "employee_id__get_avatar"),
+        ("Requested Work Type", "work_type_id__work_type"),
+        ("Previous/current Work Type", "previous_work_type_id__work_type"),
+        ("Requested Date", "requested_date"),
+        ("Requested Till", "requested_till"),
+    ]
+    row_attrs = """
+                hx-get='{detail_view}?instance_ids={ordered_ids}'
+                hx-target="#genericModalBody"
+                data-target="#genericModal"
+                data-toggle="oh-modal-toggle"
+                """
+
+    row_status_class = (
+        "approved-{approved} canceled-{canceled} requested-{approved}-{canceled}"
+    )
+    row_status_indications = [
+        (
+            "canceled--dot",
+            _("Rejected"),
+            """
+            onclick="
+                $('#applyFilter').closest('form').find('[name=canceled]').val('true');
+                $('[name=approved]').val('unknown').change();
+                $('#applyFilter').click();
+            "
+            """,
+        ),
+        (
+            "approved--dot",
+            _("Approved"),
+            """
+            onclick="
+                $('#applyFilter').closest('form').find('[name=approved]').val('true');
+                $('[name=canceled]').val('unknown').change();
+                $('#applyFilter').click();
+            "
+            """,
+        ),
+        (
+            "requested--dot",
+            _("Requested"),
+            """
+            onclick="
+                $('#applyFilter').closest('form').find('[name=requested]').val('true');
+                $('[name=canceled]').val('unknown').change();
+                $('[name=approved]').val('unknown').change();
+                $('#applyFilter').click();
+            "
+            """,
+        ),
+    ]
+
+
+@method_decorator(login_required, name="dispatch")
+class WorkRequestNavView(HorillaNavView):
+    """
+    nav view of the page
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("work-list-view")
+        self.actions = []
+        if self.request.user.has_perm("base.change_worktyperequest") or is_reportingmanager(self.request):
+            self.actions.append(
+                {
+                    "action": _("Approve Requests"),
+                    "attrs": """
+                    onclick="
+                    handleApproveRequestsClick();
+                    "
+                    style="cursor: pointer;"
+                    """,
+                }
+            )
+            self.actions.append(
+                {
+                    "action": _("Reject Requests"),
+                    "attrs": """
+                    onclick="
+                    handleRejectRequestsClick();
+                    "
+                    style="cursor: pointer;"
+                    """
+                }
+            )
+        if self.request.user.has_perm("base.delete_worktyperequest") or is_reportingmanager(self.request):
+            self.actions.append(
+                {
+                    "action": _("Delete"),
+                    "attrs": """
+                    onclick="
+                    handleDeleteRequestsClick();
+                    "
+                    data-action ="delete"
+                    style="cursor: pointer; color:red !important"
+                    
+                    """,
+                }
+            )
+        if self.request.user.has_perm("base.view_worktyperequest") or is_reportingmanager(self.request):
+            self.actions.insert(
+                0,
+                {
+                    "action": _("Export"),
+                    "attrs": f"""
+                hx-target = "#genericModalBody"
+                data-toggle = "oh-modal-toggle"
+                data-target = "#genericModal"
+                hx-get ="{reverse('work-export-candidate')}"
+                style="cursor: pointer;"
+            """,
+                },
+            )
+
+        self.create_attrs = f"""
+             hx-get="{reverse_lazy("work-type-request")}"
+             hx-target="#genericModalBody"
+             data-target="#genericModal"
+             data-toggle="oh-modal-toggle"
+         """
+
+    nav_title = _("Work Type Requests")
+    filter_body_template = "cbv/work_type_request/filter.html"
+    filter_instance = WorkTypeRequestFilter()
+    filter_form_context_name = "form"
+    search_swap_target = "#listContainer"
+
+    group_by_fields = [
+        ("employee_id", _("Employee")),
+        ("work_type_id", _("Requested Work Type")),
+        ("previous_work_type_id", _("current Work Type")),
+        ("requested_date", _("Requested Date")),
+        ("employee_id__employee_work_info__department_id", _("Department")),
+        ("employee_id__employee_work_info__job_position_id", _("Job Position")),
+        (
+            "employee_id__employee_work_info__reporting_manager_id",
+            _("Reporting Manager"),
+        ),
+    ]
+
+
+@method_decorator(login_required, name="dispatch")
+class WorkTypeDetailView(HorillaDetailedView):
+    """
+    Detail view of page
+    """
+
+    model = WorkTypeRequest
+    title = _("Details")
+    header = {
+        "title": "employee_id__get_full_name",
+        "subtitle": "detail_subtitle",
+        "avatar": "employee_id__get_avatar",
+    }
+    body = [
+        (_("Requested Work Type"), "work_type_id"),
+        (_("Previous Work Type"), "previous_work_type_id"),
+        (_("Requested Date"), "requested_date"),
+        (_("Requested Till"), "requested_till"),
+        (_("Description"), "description"),
+        (_("Is Permanent Work Type"), "is_permanent_work_type_display"),
+    ]
+
+    action_method = "confirmation"
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+
+        if self.request.GET.get("dashboard"):
+            self.action_method = "confirmation"
+        else:
+            self.action_method = "detail_view_actions"
+
+
+@method_decorator(login_required, name="dispatch")
+class WorkExportCandidate(TemplateView):
+    """
+    view for Export candidates
+    """
+
+    template_name = "cbv/work_type_request/work_export.html"
+
+    def get_context_data(self, **kwargs: Any):
+        """
+        get data for export
+        """
+        candidates = WorkTypeRequest.objects.all()
+        export_fields = WorkTypeRequestColumnForm()
+        export_filter = WorkTypeRequestFilter(queryset=candidates)
+        context = super().get_context_data(**kwargs)
+        context["export_fields"] = export_fields
+        context["export_filter"] = export_filter
+        return context
+
+
+@method_decorator(login_required, name="dispatch")
+class DynamicWorkTypeCreateForm(HorillaFormView):
+    """
+    form view for creating dynamic work types
+    """
+
+    model = WorkType
+    form_class = WorkTypeForm
+    new_display_title = _("Create Work Type")
+    is_dynamic_create_view = True
+
+    def form_valid(self, form: WorkTypeForm) -> HttpResponse:
+        if form.is_valid():
+            form.save()
+            messages.success(self.request, _("New Work Type Created"))
+            return self.HttpResponse()
+        return super().form_valid(form)
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(permission_required("base.add_worktype"), name="dispatch")
+class WorkTypesCreateForm(DynamicWorkTypeCreateForm):
+    """
+    form view for creating work types on settings
+    """
+
+    is_dynamic_create_view = False
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        form = self.form_class()
+        if self.form.instance.pk:
+            form = self.form_class(instance=self.form.instance)
+            self.form_class.verbose_name = _("Update Work Type")
+        context[form] = form
+        return context
+
+    def form_invalid(self, form: Any) -> HttpResponse:
+        if self.form.instance.pk:
+            self.form_class.verbose_name = _("Update Work Type")
+        if not form.is_valid():
+            errors = form.errors.as_data()
+            return render(
+                self.request, self.template_name, {"form": form, "errors": errors}
+            )
+        return super().form_invalid(form)
+
+    def form_valid(self, form: WorkTypeForm) -> HttpResponse:
+        if form.is_valid():
+            if form.instance.pk:
+                messages.success(self.request, _("Work Type Updated"))
+            else:
+                messages.success(self.request, _("New Work Type Created"))
+            form.save()
+            return self.HttpResponse()
+        return super().form_valid(form)
+
+
+@method_decorator(login_required, name="dispatch")
+class WorkTypeFormView(HorillaFormView):
+    """
+    form view for creating work types in app
+    """
+
+    model = WorkTypeRequest
+    form_class = WorkTypeRequestForm
+    template_name = "cbv/work_type_request/form/form.html"
+
+    new_display_title = _("Work Type Request")
+    dynamic_create_fields = [("work_type_id", DynamicWorkTypeCreateForm)]
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        employee = self.request.user.employee_get.id
+        if self.form.instance.pk:
+            self.form_class(instance=self.form.instance)
+        self.form = choosesubordinates(
+            self.request,
+            self.form,
+            "base.add_worktyperequest",
+        )
+        self.form = include_employee_instance(self.request, self.form)
+        if self.form.instance.pk:
+            self.form_class.verbose_name = _("Update Request")
+
+        if self.request.GET.get("emp_id"):
+            employee = self.request.GET.get("emp_id")
+            self.form.fields["employee_id"].queryset = Employee.objects.filter(
+                id=employee
+            )
+        self.form.fields["employee_id"].initial = employee
+        context["form"] = self.form
+        return context
+
+    def form_invalid(self, form: Any) -> HttpResponse:
+
+        # form = self.form_class(self.request.POST)
+        if self.form.instance.pk:
+            self.form_class.verbose_name = _("Update Request")
+        if not form.is_valid():
+            errors = form.errors.as_data()
+            return render(
+                self.request, self.template_name, {"form": form, "errors": errors}
+            )
+        return super().form_invalid(form)
+
+    def form_valid(self, form: WorkTypeRequestForm) -> HttpResponse:
+
+        if form.is_valid():
+            if form.instance.pk:
+                message = _("Request Updated Successfully")
+                form.save()
+            else:
+                instance = form.save()
+                message = _("Work type Request Created")
+                with contextlib.suppress(Exception):
+                    notify.send(
+                        instance.employee_id,
+                        recipient=(
+                            instance.employee_id.employee_work_info.reporting_manager_id.employee_user_id
+                        ),
+                        verb=f"You have new work type request to \
+                            validate for {instance.employee_id}",
+                        verb_ar=f"لديك طلب نوع وظيفة جديد للتحقق من \
+                                {instance.employee_id}",
+                        verb_de=f"Sie haben eine neue Arbeitstypanfrage zur \
+                                Validierung für {instance.employee_id}",
+                        verb_es=f"Tiene una nueva solicitud de tipo de trabajo para \
+                                validar para {instance.employee_id}",
+                        verb_fr=f"Vous avez une nouvelle demande de type de travail\
+                                à valider pour {instance.employee_id}",
+                        icon="information",
+                        redirect=reverse("work-type-request-view")
+                        + f"?id={instance.id}",
+                    )
+
+            messages.success(self.request, message)
+            return self.HttpResponse()
+        return super().form_valid(form)
+
+
+@method_decorator(login_required, name="dispatch")
+class WorkTypeDuplicateForm(HorillaFormView):
+    """
+    duplicate form
+    """
+
+    model = WorkTypeRequest
+    form_class = WorkTypeRequestForm
+    # template_name = "cbv/work_type_request/form/form.html"
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        original_object = WorkTypeRequest.objects.get(id=self.kwargs["pk"])
+        self.form = self.form_class(instance=original_object)
+
+        for field_name, field in self.form.fields.items():
+            if isinstance(field, forms.CharField):
+                initial_value = self.form.initial.get(field_name, "")
+                if initial_value:
+                    initial_value += " (copy)"
+                self.form.initial[field_name] = initial_value
+                self.form.fields[field_name].initial = initial_value
+        if self.form.instance.pk:
+            self.form_class(instance=self.form.instance)
+        self.form = choosesubordinates(
+            self.request,
+            self.form,
+            "base.add_worktyperequest",
+        )
+        self.form = include_employee_instance(self.request, self.form)
+        if hasattr(self.form.instance, "id"):
+            self.form.instance.id = None
+        if self.request.GET.get("emp_id"):
+            employee = self.request.GET.get("emp_id")
+            self.form.fields["employee_id"].queryset = Employee.objects.filter(
+                id=employee
+            )
+
+        # context["form"] = form
+        context["form"] = self.form
+        self.form_class.verbose_name = _("Work Type Request")
+        return context
+
+    def form_invalid(self, form: Any) -> HttpResponse:
+        # form = self.form_class(self.request.POST)
+        self.form_class.verbose_name = _("Work Type Request")
+        if not form.is_valid():
+            errors = form.errors.as_data()
+            return render(
+                self.request, self.template_name, {"form": form, "errors": errors}
+            )
+        return super().form_invalid(form)
+
+    def form_valid(self, form: WorkTypeRequestForm) -> HttpResponse:
+        form = self.form_class(self.request.POST)
+        if form.is_valid():
+            form.save()
+            message = _("Work type Request Created")
+            messages.success(self.request, message)
+            return self.HttpResponse()
+
+        return super().form_valid(form)
diff --git a/base/decorators.py b/base/decorators.py
index 9a2e20186..cb427f0a0 100644
--- a/base/decorators.py
+++ b/base/decorators.py
@@ -3,9 +3,13 @@ decorator functions for base
 """
 
 from django.contrib import messages
-from django.http import HttpResponseRedirect
+from django.http import HttpResponse, HttpResponseRedirect
+from django.shortcuts import render
 
-from .models import ShiftRequest, WorkTypeRequest
+from employee.models import EmployeeWorkInformation
+from horilla.horilla_middlewares import _thread_locals
+
+from .models import MultipleApprovalManagers, ShiftRequest, WorkTypeRequest
 
 decorator_with_arguments = (
     lambda decorator: lambda *args, **kwargs: lambda func: decorator(
@@ -66,3 +70,44 @@ def work_type_request_change_permission(function=None, *args, **kwargs):
         # return function(request, *args, **kwargs)
 
     return check_permission
+
+
+@decorator_with_arguments
+def manager_can_enter(function, perm):
+    """
+    This method is used to check permission to employee for enter to the function if the employee
+    do not have permission also checks, has reporting manager.
+    """
+
+    def _function(self, *args, **kwargs):
+        leave_perm = [
+            "leave.view_leaverequest",
+            "leave.change_leaverequest",
+            "leave.delete_leaverequest",
+        ]
+        request = getattr(_thread_locals, "request")
+        if not getattr(self, "request", None):
+            self.request = request
+        user = request.user
+        employee = user.employee_get
+        if perm in leave_perm:
+            is_approval_manager = MultipleApprovalManagers.objects.filter(
+                employee_id=employee.id
+            ).exists()
+            if is_approval_manager:
+                return function(self, *args, **kwargs)
+        is_manager = EmployeeWorkInformation.objects.filter(
+            reporting_manager_id=employee
+        ).exists()
+        if user.has_perm(perm) or is_manager:
+            return function(self, *args, **kwargs)
+        else:
+            messages.info(request, "You dont have permission.")
+            previous_url = request.META.get("HTTP_REFERER", "/")
+            script = f'<script>window.location.href = "{previous_url}"</script>'
+            key = "HTTP_HX_REQUEST"
+            if key in request.META.keys():
+                return render(request, "decorator_404.html")
+            return HttpResponse(script)
+
+    return _function
diff --git a/base/filters.py b/base/filters.py
index 65aa05837..171cbd870 100644
--- a/base/filters.py
+++ b/base/filters.py
@@ -7,22 +7,37 @@ import uuid
 
 import django_filters
 from django import forms
+from django.db.models import Q
 from django.utils.translation import gettext as __
-from django_filters import CharFilter, DateFilter, FilterSet, NumberFilter, filters
+from django_filters import CharFilter, DateFilter, FilterSet, filters
 
 from base.models import (
+    Announcement,
+    AnnouncementView,
+    Company,
     CompanyLeaves,
+    Department,
+    DynamicEmailConfiguration,
+    EmailLog,
+    EmployeeShift,
+    EmployeeShiftSchedule,
+    EmployeeType,
     Holidays,
+    JobPosition,
+    MultipleApprovalCondition,
     PenaltyAccounts,
+    RotatingShift,
     RotatingShiftAssign,
+    RotatingWorkType,
     RotatingWorkTypeAssign,
     ShiftRequest,
+    WorkType,
     WorkTypeRequest,
 )
-from horilla.filters import FilterSet, filter_by_name
+from horilla.filters import FilterSet, HorillaFilterSet, filter_by_name
 
 
-class ShiftRequestFilter(FilterSet):
+class ShiftRequestFilter(HorillaFilterSet):
     """
     Custom filter for Shift Requests.
     """
@@ -42,6 +57,10 @@ class ShiftRequestFilter(FilterSet):
     )
     search = CharFilter(method=filter_by_name)
 
+    requested = django_filters.BooleanFilter(
+        method="filter_requested", label="Requested?"
+    )
+
     class Meta:
         """
         A nested class that specifies the model and fields for the filter.
@@ -77,8 +96,16 @@ class ShiftRequestFilter(FilterSet):
         for field in self.form.fields.keys():
             self.form.fields[field].widget.attrs["id"] = f"{uuid.uuid4()}"
 
+    def filter_requested(self, queryset, name, value):
+        """
+        Filters the queryset to return entries where 'approved' is False and 'canceled' is False.
+        """
+        if value:
+            return queryset.filter(approved=False, canceled=False)
+        return queryset
 
-class WorkTypeRequestFilter(FilterSet):
+
+class WorkTypeRequestFilter(HorillaFilterSet):
     """
     Custom filter for Work Type Requests.
     """
@@ -96,6 +123,9 @@ class WorkTypeRequestFilter(FilterSet):
         lookup_expr="lte",
         widget=forms.DateInput(attrs={"type": "date"}),
     )
+    requested = django_filters.BooleanFilter(
+        method="filter_by_requested", label="Requested"
+    )
     search = CharFilter(method=filter_by_name)
 
     class Meta:
@@ -132,8 +162,16 @@ class WorkTypeRequestFilter(FilterSet):
         for field in self.form.fields.keys():
             self.form.fields[field].widget.attrs["id"] = f"{uuid.uuid4()}"
 
+    def filter_by_requested(self, queryset, name, value):
+        """
+        Filters the queryset to return entries where 'approved' is False and 'canceled' is False.
+        """
+        if value:
+            return queryset.filter(approved=False, canceled=False)
+        return queryset
 
-class RotatingShiftAssignFilters(FilterSet):
+
+class RotatingShiftAssignFilters(HorillaFilterSet):
     """
     Custom filter for Rotating Shift Assign.
     """
@@ -177,7 +215,7 @@ class RotatingShiftAssignFilters(FilterSet):
         ]
 
 
-class RotatingWorkTypeAssignFilter(FilterSet):
+class RotatingWorkTypeAssignFilter(HorillaFilterSet):
     """
     Custom filter for Rotating Work Type Assign.
     """
@@ -285,7 +323,185 @@ class RotatingShiftRequestReGroup:
     ]
 
 
-class HolidayFilter(FilterSet):
+class MultipleApprovalConditionFilter(HorillaFilterSet):
+
+    search = django_filters.CharFilter(method="search_method")
+
+    class Meta:
+        model = MultipleApprovalCondition
+        fields = [
+            "department",
+        ]
+
+    def search_method(self, queryset, _, value):
+        """
+        This method is used to search department
+        """
+
+        return (queryset.filter(department__department__icontains=value)).distinct()
+
+
+class EmployeeShiftFilter(FilterSet):
+
+    search = django_filters.CharFilter(
+        field_name="employee_shift", lookup_expr="icontains"
+    )
+
+    class Meta:
+        model = EmployeeShift
+        fields = [
+            "employee_shift",
+        ]
+
+
+class EmployeeShiftScheduleFilter(FilterSet):
+
+    search = django_filters.CharFilter(field_name="day__day", lookup_expr="icontains")
+
+    class Meta:
+        model = EmployeeShiftSchedule
+        fields = []
+
+
+class RotatingShiftFilter(HorillaFilterSet):
+
+    # search = django_filters.CharFilter(
+    #     field_name="name", lookup_expr="icontains"
+    # )
+    search = django_filters.CharFilter(method="search_method")
+
+    class Meta:
+        model = RotatingShift
+        fields = ["name", "shift1", "shift2"]
+
+    def search_method(self, queryset, _, value):
+        """
+        This method is used to search employees and objective
+        """
+
+        return (
+            queryset.filter(name__icontains=value)
+            | queryset.filter(shift1__employee_shift__icontains=value)
+            | queryset.filter(shift2__employee_shift__icontains=value)
+        ).distinct()
+
+
+class DepartmentViewFilter(HorillaFilterSet):
+    search = django_filters.CharFilter(method="filter_by_all_fields")
+
+    class Meta:
+        model = Department
+        fields = [
+            "department",
+        ]
+
+    def filter_by_all_fields(self, queryset, name, value):
+        return queryset.filter(
+            Q(department__icontains=value)
+            | Q(job_position__job_position__icontains=value)
+        ).distinct()
+
+
+class WorkTypeFilter(HorillaFilterSet):
+
+    search = django_filters.CharFilter(field_name="work_type", lookup_expr="icontains")
+
+    class Meta:
+        model = WorkType
+        fields = [
+            "work_type",
+        ]
+
+
+class RotatingWorkTypeFilter(HorillaFilterSet):
+
+    search = django_filters.CharFilter(method="search_method")
+
+    def search_method(self, queryset, _, value):
+        """
+        This method is used to search employees and objective
+        """
+
+        return (
+            queryset.filter(name__icontains=value)
+            | queryset.filter(work_type1__work_type__icontains=value)
+            | queryset.filter(work_type2__work_type__icontains=value)
+        ).distinct()
+
+    class Meta:
+        model = RotatingWorkType
+        fields = ["name", "work_type1", "work_type2"]
+
+
+class EmployeeTypeFilter(FilterSet):
+
+    search = django_filters.CharFilter(
+        field_name="employee_type", lookup_expr="icontains"
+    )
+
+    class Meta:
+        model = EmployeeType
+        fields = [
+            "employee_type",
+        ]
+
+
+class JobRoleFilter(HorillaFilterSet):
+    search = django_filters.CharFilter(method="filter_by_all_fields")
+
+    class Meta:
+        model = JobPosition
+        fields = [
+            "job_position",
+        ]
+
+    def filter_by_all_fields(self, queryset, name, value):
+        return queryset.filter(
+            Q(job_position__icontains=value) | Q(jobrole__job_role__icontains=value)
+        ).distinct()
+
+
+class CompanyFilter(FilterSet):
+
+    search = CharFilter(method="search_method")
+
+    def search_method(self, queryset, _, value):
+        """
+        This method is used to search company and objective
+        """
+
+        return (
+            queryset.filter(company__icontains=value)
+            | queryset.filter(hq__icontains=value)
+            | queryset.filter(address__icontains=value)
+            | queryset.filter(country__icontains=value)
+            | queryset.filter(state__icontains=value)
+            | queryset.filter(city__icontains=value)
+            | queryset.filter(zip__icontains=value)
+        ).distinct()
+
+    class Meta:
+        model = Company
+        fields = ["company", "hq", "address", "country", "state", "city", "zip"]
+
+
+class MailServerFilter(HorillaFilterSet):
+
+    search = django_filters.CharFilter(method="search_method")
+
+    class Meta:
+        model = DynamicEmailConfiguration
+        fields = ["username"]
+
+    def search_method(self, queryset, _, value):
+        """
+        This method is used to mail server
+        """
+
+        return ((queryset.filter(username__icontains=value))).distinct()
+
+
+class HolidayFilter(HorillaFilterSet):
     """
     Filter class for Holidays model.
 
@@ -338,7 +554,7 @@ class HolidayFilter(FilterSet):
         )
 
 
-class CompanyLeaveFilter(FilterSet):
+class CompanyLeaveFilter(HorillaFilterSet):
     """
     Filter class for CompanyLeaves model.
 
@@ -402,3 +618,32 @@ class PenaltyFilter(FilterSet):
     class Meta:
         model = PenaltyAccounts
         fields = "__all__"
+
+
+class MailLogFilter(HorillaFilterSet):
+
+    search = django_filters.CharFilter(field_name="subject", lookup_expr="icontains")
+
+    class Meta:
+        model = EmailLog
+        fields = "__all__"
+
+
+class AnnouncementFilter(HorillaFilterSet):
+
+    search = django_filters.CharFilter(field_name="title", lookup_expr="icontains")
+
+    class Meta:
+        model = Announcement
+        fields = "__all__"
+
+
+class AnnouncementViewFilter(HorillaFilterSet):
+
+    search = django_filters.CharFilter(
+        field_name="announcement", lookup_expr="icontains"
+    )
+
+    class Meta:
+        model = AnnouncementView
+        fields = "__all__"
diff --git a/base/forms.py b/base/forms.py
index d10a67fc9..f7aa920d5 100644
--- a/base/forms.py
+++ b/base/forms.py
@@ -30,7 +30,6 @@ from django.utils.encoding import force_bytes
 from django.utils.html import strip_tags
 from django.utils.http import urlsafe_base64_encode
 from django.utils.translation import gettext as _
-from django.utils.translation import gettext_lazy as _trans
 
 from base.methods import reload_queryset
 from base.models import (
@@ -68,9 +67,10 @@ from base.models import (
     WorkTypeRequest,
     WorkTypeRequestComment,
 )
+from base.widgets import CustomModelChoiceWidget
 from employee.filters import EmployeeFilter
 from employee.forms import MultipleFileField
-from employee.models import Employee
+from employee.models import Employee, EmployeeTag
 from horilla import horilla_middlewares
 from horilla.horilla_middlewares import _thread_locals
 from horilla.methods import get_horilla_model_class
@@ -98,9 +98,9 @@ def validate_time_format(value):
 
 
 BASED_ON = [
-    ("after", _trans("After")),
-    ("weekly", _trans("Weekend")),
-    ("monthly", _trans("Monthly")),
+    ("after", _("After")),
+    ("weekly", _("Weekend")),
+    ("monthly", _("Monthly")),
 ]
 
 
@@ -387,6 +387,30 @@ class AssignUserGroup(Form):
         return group
 
 
+class AddToUserGroupForm(Form):
+    """
+    Form to add employee in to  groups
+    """
+
+    group = forms.ModelMultipleChoiceField(queryset=Group.objects.all(), required=False)
+    employee = forms.ModelChoiceField(queryset=Employee.objects.all())
+
+    def __init__(self, *args, **kwargs):
+        super().__init__(*args, **kwargs)
+        reload_queryset(self.fields)
+
+    def save(self):
+        """
+        Save method to assign the selected groups to the employee
+        """
+        employee = self.cleaned_data["employee"]
+        groups = self.cleaned_data["group"]
+        employee.employee_user_id.groups.clear()
+        for group in groups:
+            employee.employee_user_id.groups.add(group)
+        return employee
+
+
 class AssignPermission(Form):
     """
     Forms to assign user permision
@@ -445,6 +469,15 @@ class CompanyForm(ModelForm):
     Company model's form
     """
 
+    cols = {
+        "company": 12,
+        "address": 12,
+        "country": 12,
+        "state": 12,
+        "city": 12,
+        "zip": 12,
+    }
+
     class Meta:
         """
         Meta class for additional options
@@ -478,6 +511,8 @@ class DepartmentForm(ModelForm):
     Department model's form
     """
 
+    cols = {"department": 12, "company_id": 12}
+
     class Meta:
         """
         Meta class for additional options
@@ -493,6 +528,16 @@ class JobPositionForm(ModelForm):
     JobPosition model's form
     """
 
+    department_id = forms.ModelMultipleChoiceField(
+        queryset=Department.objects.all(),
+        label="Department",
+        widget=forms.SelectMultiple(
+            attrs={"class": "oh-select oh-select2 w-100", "style": "height:45px;"}
+        ),
+    )
+
+    cols = {"job_position": 12, "department_id": 12}
+
     class Meta:
         """
         Meta class for additional options
@@ -500,7 +545,74 @@ class JobPositionForm(ModelForm):
 
         model = JobPosition
         fields = "__all__"
-        exclude = ["is_active"]
+        exclude = ["is_active", "department_id", "company_id"]
+
+    def __init__(self, *args, **kwargs):
+        super().__init__(*args, **kwargs)
+        if self.instance.pk:
+            self.fields["department_id"] = forms.ModelChoiceField(
+                queryset=self.fields["department_id"].queryset,
+                label="Department",
+                widget=forms.Select(
+                    attrs={
+                        "class": "oh-select oh-select2 w-100",
+                        "style": "height:45px;",
+                    }
+                ),
+            )
+
+    def clean(self):
+        """
+        Perform custom validation.
+        """
+        cleaned_data = super().clean()
+        job_position = cleaned_data.get("job_position")
+        department_ids = cleaned_data.get("department_id")
+
+        if department_ids and not hasattr(department_ids, "__iter__"):
+            department_ids = [department_ids]
+
+        if self.instance.pk and job_position and department_ids:
+            for department_id in department_ids:
+                if (
+                    JobPosition.objects.filter(
+                        department_id=department_id, job_position=job_position
+                    )
+                    .exclude(pk=self.instance.pk)
+                    .exists()
+                ):
+                    raise ValidationError(
+                        _(
+                            f"Job position '{job_position}' already exists under department {department_id}"
+                        )
+                    )
+
+        return cleaned_data
+
+    def save(self, commit, *args, **kwargs) -> Any:
+        if not self.instance.pk:
+            request = getattr(_thread_locals, "request")
+            department = Department.objects.filter(
+                id__in=self.data.getlist("department_id")
+            )
+            positions = []
+            for dep in department:
+                position = JobPosition()
+                position.department_id = dep
+                position.job_position = self.data["job_position"]
+                form_data = self.data["job_position"]
+                if JobPosition.objects.filter(
+                    department_id=dep, job_position=form_data
+                ).exists():
+                    messages.error(request, f"Job position already exists under {dep}")
+                else:
+                    messages.success(
+                        request, _("Job position has been created successfully!")
+                    )
+                    position.save()
+                positions.append(position.pk)
+            return JobPosition.objects.filter(id__in=positions)
+        super().save(commit, *args, **kwargs)
 
 
 class JobPositionMultiForm(ModelForm):
@@ -580,6 +692,19 @@ class JobRoleForm(ModelForm):
     JobRole model's form
     """
 
+    cols = {"job_position_id": 12, "job_role": 12}
+
+    job_position_id = forms.ModelMultipleChoiceField(
+        queryset=JobPosition.objects.all(),
+        label="Job Position",
+        widget=forms.SelectMultiple(
+            attrs={
+                "class": "w-100",
+                "style": "height:45px;",
+            }
+        ),
+    )
+
     def __init__(self, *args, **kwargs):
         super().__init__(*args, **kwargs)
         if not self.instance.pk:
@@ -587,9 +712,7 @@ class JobRoleForm(ModelForm):
                 queryset=self.fields["job_position_id"].queryset,
                 label=JobRole._meta.get_field("job_position_id").verbose_name,
             )
-            attrs = self.fields["job_position_id"].widget.attrs
-            attrs["class"] = "oh-select oh-select2 w-100"
-            attrs["style"] = "height:45px;"
+            self.fields["job_position_id"].initial = self.instance.job_position_id
 
     class Meta:
         """
@@ -598,7 +721,26 @@ class JobRoleForm(ModelForm):
 
         model = JobRole
         fields = "__all__"
-        exclude = ["is_active"]
+        exclude = ["is_active", "job_position_id", "company_id"]
+
+    def clean(self):
+        cleaned_data = super().clean()
+        job_position_id = cleaned_data.get("job_position_id")
+        job_role = cleaned_data.get("job_role")
+
+        if job_position_id and not hasattr(job_position_id, "__iter__"):
+            job_position_id = [job_position_id]
+
+        if self.instance.pk and job_position_id and job_role:
+            existing_roles = JobRole.objects.filter(
+                job_position_id__in=job_position_id, job_role=job_role
+            ).exclude(pk=self.instance.pk)
+            if existing_roles.exists():
+                raise ValidationError(
+                    f"{job_role} already exists under this job position"
+                )
+
+        return cleaned_data
 
     def save(self, commit, *args, **kwargs) -> Any:
         if not self.instance.pk:
@@ -613,6 +755,9 @@ class JobRoleForm(ModelForm):
                 role.job_role = self.data["job_role"]
                 try:
                     role.save()
+                    messages.success(
+                        request, _("Job role has been created successfully!")
+                    )
                 except:
                     messages.info(request, f"Role already exists under {position}")
                 roles.append(role.pk)
@@ -625,6 +770,8 @@ class WorkTypeForm(ModelForm):
     WorkType model's form
     """
 
+    cols = {"work_type": 12, "company_id": 12}
+
     class Meta:
         """
         Meta class for additional options
@@ -640,6 +787,12 @@ class RotatingWorkTypeForm(ModelForm):
     RotatingWorkType model's form
     """
 
+    cols = {
+        "name": 12,
+        "work_type1": 12,
+        "work_type2": 12,
+    }
+
     class Meta:
         """
         Meta class for additional options
@@ -658,18 +811,21 @@ class RotatingWorkTypeForm(ModelForm):
         work_type_counts = 0
 
         def create_work_type_field(work_type_key, required, initial=None):
+
             self.fields[work_type_key] = forms.ModelChoiceField(
                 queryset=WorkType.objects.all(),
-                widget=forms.Select(
+                widget=CustomModelChoiceWidget(
+                    delete_url="/add-remove-work-type-fields",
                     attrs={
-                        "class": "oh-select oh-select-2 mb-3",
+                        "class": "oh-select oh-select-2 mb-3 ",
                         "name": work_type_key,
                         "id": f"id_{work_type_key}",
-                    }
+                    },
                 ),
                 required=required,
                 empty_label=_("---Choose Work Type---"),
                 initial=initial,
+                label="",
             )
 
         for key in self.data.keys():
@@ -746,22 +902,30 @@ class RotatingWorkTypeAssignForm(ModelForm):
     RotatingWorkTypeAssign model's form
     """
 
-    employee_id = HorillaMultiSelectField(
-        queryset=Employee.objects.filter(employee_work_info__isnull=False),
-        widget=HorillaMultiSelectWidget(
-            filter_route_name="employee-widget-filter",
-            filter_class=EmployeeFilter,
-            filter_instance_contex_name="f",
-            filter_template_path="employee_filters.html",
-        ),
-        label=_trans("Employees"),
-    )
-    based_on = forms.ChoiceField(
-        choices=BASED_ON, initial="daily", label=_trans("Based on")
-    )
-    rotate_after_day = forms.IntegerField(initial=5, label=_trans("Rotate after day"))
+    cols = {
+        "employee_id": 12,
+        "rotating_work_type_id": 12,
+        "start_date": 12,
+        "based_on": 12,
+        "rotate_after_day": 12,
+        "rotate_every_weekend": 12,
+        "rotate_every": 12,
+    }
+
+    # employee_id = HorillaMultiSelectField(
+    #     queryset=Employee.objects.filter(employee_work_info__isnull=False),
+    #     widget=HorillaMultiSelectWidget(
+    #         filter_route_name="employee-widget-filter",
+    #         filter_class=EmployeeFilter,
+    #         filter_instance_contex_name="f",
+    #         filter_template_path="employee_filters.html",
+    #     ),
+    #     label=_("Employees"),
+    # )
+    based_on = forms.ChoiceField(choices=BASED_ON, initial="daily", label=_("Based on"))
+    rotate_after_day = forms.IntegerField(initial=5, label=_("Rotate after day"))
     start_date = forms.DateField(
-        initial=datetime.date.today, widget=forms.DateInput, label=_trans("Start date")
+        initial=datetime.date.today, widget=forms.DateInput, label=_("Start date")
     )
 
     class Meta:
@@ -783,9 +947,9 @@ class RotatingWorkTypeAssignForm(ModelForm):
             "is_active": HiddenInput(),
         }
         labels = {
-            "is_active": _trans("Is Active"),
-            "rotate_every_weekend": _trans("Rotate every weekend"),
-            "rotate_every": _trans("Rotate every"),
+            "is_active": _("Is Active"),
+            "rotate_every_weekend": _("Rotate every weekend"),
+            "rotate_every": _("Rotate every"),
         }
 
     def __init__(self, *args, **kwargs):
@@ -795,60 +959,133 @@ class RotatingWorkTypeAssignForm(ModelForm):
             if field.required:
                 self.fields[field_name].label_suffix = " *"
 
-        self.fields["rotate_every_weekend"].widget.attrs.update(
-            {
-                "class": "w-100",
-                "style": "display:none; height:50px; border-radius:0;border:1px \
-                    solid hsl(213deg,22%,84%);",
-                "data-hidden": True,
-            }
-        )
-        self.fields["rotate_every"].widget.attrs.update(
-            {
-                "class": "w-100",
-                "style": "display:none; height:50px; border-radius:0;border:1px \
-                    solid hsl(213deg,22%,84%);",
-                "data-hidden": True,
-            }
-        )
-        self.fields["rotate_after_day"].widget.attrs.update(
-            {
-                "class": "w-100 oh-input",
-                "style": " height:50px; border-radius:0;",
-            }
-        )
-        self.fields["based_on"].widget.attrs.update(
-            {
-                "class": "w-100",
-                "style": " height:50px; border-radius:0;border:1px solid hsl(213deg,22%,84%);",
-            }
-        )
-        self.fields["start_date"].widget = forms.DateInput(
-            attrs={
-                "class": "w-100 oh-input",
-                "type": "date",
-                "style": " height:50px; border-radius:0;",
-            }
-        )
-        self.fields["rotating_work_type_id"].widget.attrs.update(
-            {
-                "class": "oh-select oh-select-2",
-            }
-        )
-        self.fields["employee_id"].widget.attrs.update(
-            {
-                "class": "oh-select oh-select-2",
-            }
-        )
+            self.fields["rotate_every_weekend"].widget.attrs.update(
+                {
+                    "class": "w-100",
+                    "style": "display:none; height:50px; border-radius:0;border:1px\
+                        solid hsl(213deg,22%,84%);",
+                    "data-hidden": True,
+                }
+            )
+            self.fields["rotate_every"].widget.attrs.update(
+                {
+                    "class": "w-100",
+                    "style": "display:none; height:50px; border-radius:0;border:1px \
+                        solid hsl(213deg,22%,84%);",
+                    "data-hidden": True,
+                }
+            )
+            self.fields["rotate_after_day"].widget.attrs.update(
+                {
+                    "class": "w-100 oh-input",
+                    "style": " height:50px; border-radius:0;",
+                }
+            )
+            self.fields["based_on"].widget.attrs.update(
+                {
+                    "class": "w-100",
+                    "style": " height:50px; border-radius:0; border:1px solid \
+                        hsl(213deg,22%,84%);",
+                }
+            )
+            self.fields["start_date"].widget = forms.DateInput(
+                attrs={
+                    "class": "w-100 oh-input",
+                    "type": "date",
+                    "style": " height:50px; border-radius:0;",
+                }
+            )
+            self.fields["rotating_work_type_id"].widget.attrs.update(
+                {
+                    "class": "oh-select oh-select-2",
+                }
+            )
+            self.fields["employee_id"].widget.attrs.update(
+                {
+                    "class": "oh-select oh-select-2",
+                }
+            )
+        else:
+            super().__init__(*args, **kwargs)
+
+            reload_queryset(self.fields)
+            request = getattr(horilla_middlewares._thread_locals, "request", None)
+            self.fields["employee_id"].initial = request.GET.get("emp_id")
+
+            if not self.instance.pk and not request.GET.get("emp_id"):
+                self.fields["employee_id"] = HorillaMultiSelectField(
+                    queryset=Employee.objects.filter(employee_work_info__isnull=False),
+                    widget=HorillaMultiSelectWidget(
+                        filter_route_name="employee-widget-filter",
+                        filter_class=EmployeeFilter,
+                        filter_instance_contex_name="f",
+                        filter_template_path="employee_filters.html",
+                    ),
+                    label=_("Employees"),
+                )
+            self.fields["rotate_every_weekend"].widget.attrs.update(
+                {
+                    "class": "w-100",
+                    "style": "display:none; height:50px; border-radius:0;border:1px \
+                        solid hsl(213deg,22%,84%);",
+                    "data-hidden": True,
+                }
+            )
+            self.fields["rotate_every"].widget.attrs.update(
+                {
+                    "class": "w-100",
+                    "style": "display:none; height:50px; border-radius:0;border:1px \
+                        solid hsl(213deg,22%,84%);",
+                    "data-hidden": True,
+                }
+            )
+            self.fields["rotate_after_day"].widget.attrs.update(
+                {
+                    "class": "w-100 oh-input",
+                    "style": " height:50px; border-radius:0;",
+                }
+            )
+            self.fields["based_on"].widget.attrs.update(
+                {
+                    "class": "w-100",
+                    "style": " height:50px; border-radius:0;border:1px solid hsl(213deg,22%,84%);",
+                }
+            )
+            self.fields["start_date"].widget = forms.DateInput(
+                attrs={
+                    "class": "w-100 oh-input",
+                    "type": "date",
+                    "style": " height:50px; border-radius:0;",
+                }
+            )
+            self.fields["rotating_work_type_id"].widget.attrs.update(
+                {
+                    "class": "oh-select oh-select-2",
+                }
+            )
+            self.fields["employee_id"].widget.attrs.update(
+                {
+                    "class": "oh-select oh-select-2",
+                }
+            )
 
     def clean_employee_id(self):
-        employee_ids = self.cleaned_data.get("employee_id")
-        if employee_ids:
-            return employee_ids[0]
+        if self.instance.pk:
+            return self.cleaned_data.get("employee_id")
         else:
-            return ValidationError(_("This field is required"))
+            employee_ids = self.cleaned_data.get("employee_id")
+            if isinstance(employee_ids, Employee):
+                return employee_ids
+            else:
+                if employee_ids:
+                    return employee_ids[0]
+                else:
+                    return ValidationError(_("This field is required"))
 
     def clean(self):
+        if self.instance.pk:
+            return super().clean()
+
         super().clean()
         self.instance.employee_id = Employee.objects.filter(
             id=self.data.get("employee_id")
@@ -864,38 +1101,24 @@ class RotatingWorkTypeAssignForm(ModelForm):
         return cleaned_data
 
     def save(self, commit=False, manager=None):
-        employee_ids = self.data.getlist("employee_id")
-        rotating_work_type = RotatingWorkType.objects.get(
-            id=self.data["rotating_work_type_id"]
-        )
-
-        day_name = self.cleaned_data["rotate_every_weekend"]
-        day_names = [
-            "monday",
-            "tuesday",
-            "wednesday",
-            "thursday",
-            "friday",
-            "saturday",
-            "sunday",
-        ]
-        target_day = day_names.index(day_name.lower())
-
-        for employee_id in employee_ids:
-            employee = Employee.objects.filter(id=employee_id).first()
+        if self.instance.pk:
+            employee = Employee.objects.get(id=self.instance.pk)
             rotating_work_type_assign = RotatingWorkTypeAssign()
-            rotating_work_type_assign.rotating_work_type_id = rotating_work_type
-            rotating_work_type_assign.employee_id = employee
-            rotating_work_type_assign.based_on = self.cleaned_data["based_on"]
-            rotating_work_type_assign.start_date = self.cleaned_data["start_date"]
-            rotating_work_type_assign.next_change_date = self.cleaned_data["start_date"]
-            rotating_work_type_assign.rotate_after_day = self.data.get(
-                "rotate_after_day"
+            rotating_work_type = RotatingWorkType.objects.get(
+                id=self.data["rotating_work_type_id"]
             )
-            rotating_work_type_assign.rotate_every = self.cleaned_data["rotate_every"]
-            rotating_work_type_assign.rotate_every_weekend = self.cleaned_data[
-                "rotate_every_weekend"
+            day_name = self.cleaned_data["rotate_every_weekend"]
+            day_names = [
+                "monday",
+                "tuesday",
+                "wednesday",
+                "thursday",
+                "friday",
+                "saturday",
+                "sunday",
             ]
+            target_day = day_names.index(day_name.lower())
+
             rotating_work_type_assign.next_change_date = self.cleaned_data["start_date"]
             rotating_work_type_assign.current_work_type = (
                 employee.employee_work_info.work_type_id
@@ -903,23 +1126,87 @@ class RotatingWorkTypeAssignForm(ModelForm):
             rotating_work_type_assign.next_work_type = rotating_work_type.work_type1
             rotating_work_type_assign.additional_data["next_work_type_index"] = 1
             based_on = self.cleaned_data["based_on"]
-            start_date = self.cleaned_data["start_date"]
+            start_date = self.instance.start_date
             if based_on == "weekly":
                 next_date = get_next_week_date(target_day, start_date)
-                rotating_work_type_assign.next_change_date = next_date
+                self.instance.next_change_date = next_date
             elif based_on == "monthly":
-                # 0, 1, 2, ..., 31, or "last"
-                rotate_every = self.cleaned_data["rotate_every"]
-                start_date = self.cleaned_data["start_date"]
+                rotate_every = self.instance.rotate_every  # 0, 1, 2, ..., 31, or "last"
+                start_date = self.instance.start_date
                 next_date = get_next_monthly_date(start_date, rotate_every)
-                rotating_work_type_assign.next_change_date = next_date
+                self.instance.next_change_date = next_date
             elif based_on == "after":
-                rotating_work_type_assign.next_change_date = (
-                    rotating_work_type_assign.start_date
+                self.instance.next_change_date = (
+                    self.instance.start_date
                     + datetime.timedelta(days=int(self.data.get("rotate_after_day")))
                 )
+            return super().save()
 
-            rotating_work_type_assign.save()
+        else:
+            employee_ids = self.data.getlist("employee_id")
+            rotating_work_type = RotatingWorkType.objects.get(
+                id=self.data["rotating_work_type_id"]
+            )
+
+            day_name = self.cleaned_data["rotate_every_weekend"]
+            day_names = [
+                "monday",
+                "tuesday",
+                "wednesday",
+                "thursday",
+                "friday",
+                "saturday",
+                "sunday",
+            ]
+            target_day = day_names.index(day_name.lower())
+
+            for employee_id in employee_ids:
+                employee = Employee.objects.filter(id=employee_id).first()
+                rotating_work_type_assign = RotatingWorkTypeAssign()
+                rotating_work_type_assign.rotating_work_type_id = rotating_work_type
+                rotating_work_type_assign.employee_id = employee
+                rotating_work_type_assign.based_on = self.cleaned_data["based_on"]
+                rotating_work_type_assign.start_date = self.cleaned_data["start_date"]
+                rotating_work_type_assign.next_change_date = self.cleaned_data[
+                    "start_date"
+                ]
+                rotating_work_type_assign.rotate_after_day = self.data.get(
+                    "rotate_after_day"
+                )
+                rotating_work_type_assign.rotate_every = self.cleaned_data[
+                    "rotate_every"
+                ]
+                rotating_work_type_assign.rotate_every_weekend = self.cleaned_data[
+                    "rotate_every_weekend"
+                ]
+                rotating_work_type_assign.next_change_date = self.cleaned_data[
+                    "start_date"
+                ]
+                rotating_work_type_assign.current_work_type = (
+                    employee.employee_work_info.work_type_id
+                )
+                rotating_work_type_assign.next_work_type = rotating_work_type.work_type2
+                rotating_work_type_assign.additional_data["next_shift_index"] = 1
+                based_on = self.cleaned_data["based_on"]
+                start_date = self.cleaned_data["start_date"]
+                if based_on == "weekly":
+                    next_date = get_next_week_date(target_day, start_date)
+                    rotating_work_type_assign.next_change_date = next_date
+                elif based_on == "monthly":
+                    # 0, 1, 2, ..., 31, or "last"
+                    rotate_every = self.cleaned_data["rotate_every"]
+                    start_date = self.cleaned_data["start_date"]
+                    next_date = get_next_monthly_date(start_date, rotate_every)
+                    rotating_work_type_assign.next_change_date = next_date
+                elif based_on == "after":
+                    rotating_work_type_assign.next_change_date = (
+                        rotating_work_type_assign.start_date
+                        + datetime.timedelta(
+                            days=int(self.data.get("rotate_after_day"))
+                        )
+                    )
+
+                rotating_work_type_assign.save()
 
 
 class RotatingWorkTypeAssignUpdateForm(forms.ModelForm):
@@ -927,9 +1214,7 @@ class RotatingWorkTypeAssignUpdateForm(forms.ModelForm):
     RotatingWorkTypeAssign model's form
     """
 
-    based_on = forms.ChoiceField(
-        choices=BASED_ON, initial="daily", label=_trans("Based on")
-    )
+    based_on = forms.ChoiceField(choices=BASED_ON, initial="daily", label=_("Based on"))
 
     class Meta:
         """
@@ -949,12 +1234,12 @@ class RotatingWorkTypeAssignUpdateForm(forms.ModelForm):
             "start_date": DateInput(attrs={"type": "date"}),
         }
         labels = {
-            "start_date": _trans("Start date"),
-            "rotate_after_day": _trans("Rotate after day"),
-            "rotate_every_weekend": _trans("Rotate every weekend"),
-            "rotate_every": _trans("Rotate every"),
-            "based_on": _trans("Based on"),
-            "is_active": _trans("Is Active"),
+            "start_date": _("Start date"),
+            "rotate_after_day": _("Rotate after day"),
+            "rotate_every_weekend": _("Rotate every weekend"),
+            "rotate_every": _("Rotate every"),
+            "based_on": _("Based on"),
+            "is_active": _("Is Active"),
         }
 
     def __init__(self, *args, **kwargs):
@@ -1047,6 +1332,8 @@ class EmployeeTypeForm(ModelForm):
     EmployeeType form
     """
 
+    cols = {"employee_type": 12, "company_id": 12}
+
     class Meta:
         """
         Meta class for additional options
@@ -1062,6 +1349,14 @@ class EmployeeShiftForm(ModelForm):
     EmployeeShift Form
     """
 
+    cols = {
+        "employee_shift": 12,
+        "weekly_full_time": 12,
+        "full_time": 12,
+        "company_id": 12,
+        "grace_time_id": 12,
+    }
+
     class Meta:
         """
         Meta class for additional options
@@ -1168,18 +1463,37 @@ class EmployeeShiftScheduleForm(ModelForm):
     EmployeeShiftSchedule model's form
     """
 
+    cols = {"day": 12, "company_id": 12}
+
     day = forms.ModelMultipleChoiceField(
         queryset=EmployeeShiftDay.objects.all(),
     )
 
+    # day = forms.ModelMultipleChoiceField(
+    #     queryset=EmployeeShiftDay.objects.all(),
+    #     widget=forms.SelectMultiple(attrs={
+    #         "class": "oh-select oh-select2 w-100",
+    #         "style": "height:45px;"
+    #     })
+    # )
+
     class Meta:
         """
         Meta class for additional options
         """
 
         model = EmployeeShiftSchedule
-        fields = "__all__"
-        exclude = ["is_night_shift", "is_active"]
+        fields = [
+            "shift_id",
+            "minimum_working_hour",
+            "start_time",
+            "end_time",
+            "is_auto_punch_out_enabled",
+            "auto_punch_out_time",
+            "company_id",
+            "day",
+        ]
+        exclude = ["is_active", "day", "is_night_shift"]
         widgets = {
             "start_time": DateInput(attrs={"type": "time"}),
             "end_time": DateInput(attrs={"type": "time"}),
@@ -1191,6 +1505,7 @@ class EmployeeShiftScheduleForm(ModelForm):
             # django forms not showing value inside the date, time html element.
             # so here overriding default forms instance method to set initial value
             # """
+
             initial = {
                 "start_time": instance.start_time.strftime("%H:%M"),
                 "end_time": instance.end_time.strftime("%H:%M"),
@@ -1203,6 +1518,17 @@ class EmployeeShiftScheduleForm(ModelForm):
                 )
             kwargs["initial"] = initial
         super().__init__(*args, **kwargs)
+
+        if self.instance.pk:
+            self.fields["day"] = forms.ModelChoiceField(
+                queryset=EmployeeShiftDay.objects.all(),
+                widget=forms.Select(
+                    attrs={
+                        "class": "oh-select oh-select2 w-100",
+                        "style": "height:45px;",
+                    }
+                ),
+            )
         self.fields["day"].widget.attrs.update({"id": str(uuid.uuid4())})
         self.fields["shift_id"].widget.attrs.update({"id": str(uuid.uuid4())})
         if not apps.is_installed("attendance"):
@@ -1249,41 +1575,57 @@ class EmployeeShiftScheduleForm(ModelForm):
                             )
                         }
                     )
+        if self.instance.pk:
+            shift_id = cleaned_data.get("shift_id")
+            day_field = self["day"].value()
+            if day_field and not hasattr(day_field, "__iter__"):
+                day_field = [day_field]
+
+            if self.instance.pk and shift_id and day_field:
+                shift = EmployeeShiftSchedule.objects.filter(
+                    day=day_field, shift_id=shift_id
+                )
+                shifts = shift.first()
+                if shift.exclude(pk=self.instance.pk).exists():
+                    raise ValidationError(
+                        _(
+                            f"Shift schedule already exists for '{shifts.day}' on '{shift_id}' "
+                        )
+                    )
         return cleaned_data
 
     def save(self, commit=True):
         instance = super().save(commit=False)
-        for day in self.data.getlist("day"):
-            if int(day) != int(instance.day.id):
+        if not self.instance.pk:
+            for day in self.data.getlist("day"):
+                # if int(day) != int(instance.day.id):
                 data_copy = self.data.copy()
                 data_copy.update({"day": str(day)})
                 shift_schedule = EmployeeShiftScheduleUpdateForm(data_copy).save(
                     commit=False
                 )
                 shift_schedule.save()
-        if commit:
-            instance.save()
         return instance
 
     def clean_day(self):
         """
         Validation to day field
         """
-        days = self.cleaned_data["day"]
-        for day in days:
-            attendance = EmployeeShiftSchedule.objects.filter(
-                day=day, shift_id=self.data["shift_id"]
-            ).first()
-            if attendance is not None:
-                raise ValidationError(
-                    _("Shift schedule is already exist for {day}").format(
-                        day=_(day.day)
+        if not self.instance.pk:
+            days = self.cleaned_data["day"]
+            for day in days:
+                attendance = EmployeeShiftSchedule.objects.filter(
+                    day=day, shift_id=self.data["shift_id"]
+                ).first()
+                if attendance is not None:
+                    raise ValidationError(
+                        _("Shift schedule is already exist for {day}").format(
+                            day=_(day.day)
+                        )
                     )
-                )
-        if days.first() is None:
-            raise ValidationError(_("Employee not chosen"))
-
-        return days.first()
+            if days.first() is None:
+                raise ValidationError(_("Employee not chosen"))
+            return days.first()
 
 
 class RotatingShiftForm(ModelForm):
@@ -1291,6 +1633,8 @@ class RotatingShiftForm(ModelForm):
     RotatingShift model's form
     """
 
+    cols = {"name": 12, "shift1": 12, "shift2": 12}
+
     class Meta:
         """
         Meta class for additional options
@@ -1309,12 +1653,13 @@ class RotatingShiftForm(ModelForm):
         def create_shift_field(shift_key, required, initial=None):
             self.fields[shift_key] = forms.ModelChoiceField(
                 queryset=EmployeeShift.objects.all(),
-                widget=forms.Select(
+                widget=CustomModelChoiceWidget(
+                    delete_url="/add-remove-shift-fields",
                     attrs={
                         "class": "oh-select oh-select-2 mb-3",
                         "name": shift_key,
                         "id": f"id_{shift_key}",
-                    }
+                    },
                 ),
                 required=required,
                 empty_label=_("---Choose Shift---"),
@@ -1393,22 +1738,30 @@ class RotatingShiftAssignForm(forms.ModelForm):
     RotatingShiftAssign model's form
     """
 
-    employee_id = HorillaMultiSelectField(
-        queryset=Employee.objects.filter(employee_work_info__isnull=False),
-        widget=HorillaMultiSelectWidget(
-            filter_route_name="employee-widget-filter",
-            filter_class=EmployeeFilter,
-            filter_instance_contex_name="f",
-            filter_template_path="employee_filters.html",
-        ),
-        label=_trans("Employees"),
-    )
-    based_on = forms.ChoiceField(
-        choices=BASED_ON, initial="daily", label=_trans("Based on")
-    )
-    rotate_after_day = forms.IntegerField(initial=5, label=_trans("Rotate after day"))
+    cols = {
+        "employee_id": 12,
+        "rotating_shift_id": 12,
+        "start_date": 12,
+        "based_on": 12,
+        "rotate_after_day": 12,
+        "rotate_every_weekend": 12,
+        "rotate_every": 12,
+    }
+
+    # employee_id = HorillaMultiSelectField(
+    #     queryset=Employee.objects.filter(employee_work_info__isnull=False),
+    #     widget=HorillaMultiSelectWidget(
+    #         filter_route_name="employee-widget-filter",
+    #         filter_class=EmployeeFilter,
+    #         filter_instance_contex_name="f",
+    #         filter_template_path="employee_filters.html",
+    #     ),
+    #     label=_("Employees"),
+    # )
+    based_on = forms.ChoiceField(choices=BASED_ON, initial="daily", label=_("Based on"))
+    rotate_after_day = forms.IntegerField(initial=5, label=_("Rotate after day"))
     start_date = forms.DateField(
-        initial=datetime.date.today, widget=forms.DateInput, label=_trans("Start date")
+        initial=datetime.date.today, widget=forms.DateInput, label=_("Start date")
     )
 
     class Meta:
@@ -1429,77 +1782,149 @@ class RotatingShiftAssignForm(forms.ModelForm):
             "start_date": DateInput(attrs={"type": "date"}),
         }
         labels = {
-            "rotating_shift_id": _trans("Rotating Shift"),
+            "rotating_shift_id": _("Rotating Shift"),
             "start_date": _("Start date"),
-            "is_active": _trans("Is Active"),
-            "rotate_every_weekend": _trans("Rotate every weekend"),
-            "rotate_every": _trans("Rotate every"),
+            "is_active": _("Is Active"),
+            "rotate_every_weekend": _("Rotate every weekend"),
+            "rotate_every": _("Rotate every"),
         }
 
     def __init__(self, *args, **kwargs):
         super().__init__(*args, **kwargs)
         reload_queryset(self.fields)
+        request = getattr(_thread_locals, "request", None)
         for field_name, field in self.fields.items():
             if field.required:
                 self.fields[field_name].label_suffix = " *"
 
-        self.fields["rotate_every_weekend"].widget.attrs.update(
-            {
-                "class": "w-100 ",
-                "style": "display:none; height:50px; border-radius:0;border:1px \
+            self.fields["rotate_every_weekend"].widget.attrs.update(
+                {
+                    "class": "w-100 ",
+                    "style": "display:none; height:50px; border-radius:0;border:1px \
                     solid hsl(213deg,22%,84%);",
-                "data-hidden": True,
-            }
-        )
-        self.fields["rotate_every"].widget.attrs.update(
-            {
-                "class": "w-100 ",
-                "style": "display:none; height:50px; border-radius:0;border:1px \
-                    solid hsl(213deg,22%,84%);",
-                "data-hidden": True,
-            }
-        )
-        self.fields["rotate_after_day"].widget.attrs.update(
-            {
-                "class": "w-100 oh-input",
-                "style": " height:50px; border-radius:0;",
-            }
-        )
-        self.fields["based_on"].widget.attrs.update(
-            {
-                "class": "w-100",
-                "style": " height:50px; border-radius:0;border:1px solid hsl(213deg,22%,84%);",
-            }
-        )
-        self.fields["start_date"].widget = forms.DateInput(
-            attrs={
-                "class": "w-100 oh-input",
-                "type": "date",
-                "style": " height:50px; border-radius:0;",
-            }
-        )
-        self.fields["rotating_shift_id"].widget.attrs.update(
-            {
-                "class": "oh-select oh-select-2",
-            }
-        )
-        self.fields["employee_id"].widget.attrs.update(
-            {
-                "class": "oh-select oh-select-2",
-            }
-        )
+                    "data-hidden": True,
+                }
+            )
+            self.fields["rotate_every"].widget.attrs.update(
+                {
+                    "class": "w-100 ",
+                    "style": "display:none; height:50px; border-radius:0;border:1px \
+                        solid hsl(213deg,22%,84%);",
+                    "data-hidden": True,
+                }
+            )
+            self.fields["rotate_after_day"].widget.attrs.update(
+                {
+                    "class": "w-100 oh-input",
+                    "style": " height:50px; border-radius:0;",
+                }
+            )
+            self.fields["based_on"].widget.attrs.update(
+                {
+                    "class": "w-100",
+                    "style": " height:50px; border-radius:0;border:1px solid hsl(213deg,22%,84%);",
+                }
+            )
+            self.fields["start_date"].widget = forms.DateInput(
+                attrs={
+                    "class": "w-100 oh-input",
+                    "type": "date",
+                    "style": " height:50px; border-radius:0;",
+                }
+            )
+            self.fields["rotating_shift_id"].widget.attrs.update(
+                {
+                    "class": "oh-select oh-select-2",
+                }
+            )
+            self.fields["employee_id"].widget.attrs.update(
+                {
+                    "class": "oh-select oh-select-2",
+                }
+            )
+        else:
+            super().__init__(*args, **kwargs)
+            reload_queryset(self.fields)
+            self.fields["employee_id"].initial = request.GET.get("emp_id")
+            if not self.instance.pk and not request.GET.get("emp_id"):
+                self.fields["employee_id"] = HorillaMultiSelectField(
+                    queryset=Employee.objects.filter(
+                        employee_work_info__isnull=False, is_active=True
+                    ),
+                    widget=HorillaMultiSelectWidget(
+                        filter_route_name="employee-widget-filter",
+                        filter_class=EmployeeFilter,
+                        filter_instance_contex_name="f",
+                        filter_template_path="employee_filters.html",
+                    ),
+                    label=_("Employees"),
+                )
+
+            self.fields["rotate_every_weekend"].widget.attrs.update(
+                {
+                    "class": "w-100 ",
+                    "style": "display:none; height:50px; border-radius:0;border:1px \
+                        solid hsl(213deg,22%,84%);",
+                    "data-hidden": True,
+                }
+            )
+            self.fields["rotate_every"].widget.attrs.update(
+                {
+                    "class": "w-100 ",
+                    "style": "display:none; height:50px; border-radius:0;border:1px \
+                        solid hsl(213deg,22%,84%);",
+                    "data-hidden": True,
+                }
+            )
+            self.fields["rotate_after_day"].widget.attrs.update(
+                {
+                    "class": "w-100 oh-input",
+                    "style": " height:50px; border-radius:0;",
+                }
+            )
+            self.fields["based_on"].widget.attrs.update(
+                {
+                    "class": "w-100",
+                    "style": " height:50px; border-radius:0;border:1px solid hsl(213deg,22%,84%);",
+                }
+            )
+            self.fields["start_date"].widget = forms.DateInput(
+                attrs={
+                    "class": "w-100 oh-input",
+                    "type": "date",
+                    "style": " height:50px; border-radius:0;",
+                }
+            )
+            self.fields["rotating_shift_id"].widget.attrs.update(
+                {
+                    "class": "oh-select oh-select-2",
+                }
+            )
+            self.fields["employee_id"].widget.attrs.update(
+                {
+                    "class": "oh-select oh-select-2",
+                }
+            )
 
     def clean_employee_id(self):
         """
         Validation to employee_id field
         """
-        employee_ids = self.cleaned_data.get("employee_id")
-        if employee_ids:
-            return employee_ids[0]
+        if self.instance.pk:
+            return self.cleaned_data.get("employee_id")
         else:
-            return ValidationError(_("This field is required"))
+            employee_ids = self.cleaned_data.get("employee_id")
+            if isinstance(employee_ids, Employee):
+                return employee_ids
+            else:
+                if employee_ids:
+                    return employee_ids[0]
+                else:
+                    return ValidationError(_("This field is required"))
 
     def clean(self):
+        if self.instance.pk:
+            return super().clean()
         super().clean()
         self.instance.employee_id = Employee.objects.filter(
             id=self.data.get("employee_id")
@@ -1514,58 +1939,92 @@ class RotatingShiftAssignForm(forms.ModelForm):
             del self.errors["rotate_after_day"]
         return cleaned_data
 
-    def save(
-        self,
-        commit=False,
-    ):
-        employee_ids = self.data.getlist("employee_id")
-        rotating_shift = RotatingShift.objects.get(id=self.data["rotating_shift_id"])
-
-        day_name = self.cleaned_data["rotate_every_weekend"]
-        day_names = [
-            "monday",
-            "tuesday",
-            "wednesday",
-            "thursday",
-            "friday",
-            "saturday",
-            "sunday",
-        ]
-        target_day = day_names.index(day_name.lower())
-        for employee_id in employee_ids:
-            employee = Employee.objects.filter(id=employee_id).first()
-            rotating_shift_assign = RotatingShiftAssign()
-            rotating_shift_assign.rotating_shift_id = rotating_shift
-            rotating_shift_assign.employee_id = employee
-            rotating_shift_assign.based_on = self.cleaned_data["based_on"]
-            rotating_shift_assign.start_date = self.cleaned_data["start_date"]
-            rotating_shift_assign.next_change_date = self.cleaned_data["start_date"]
-            rotating_shift_assign.rotate_after_day = self.data.get("rotate_after_day")
-            rotating_shift_assign.rotate_every = self.cleaned_data["rotate_every"]
-            rotating_shift_assign.rotate_every_weekend = self.cleaned_data[
-                "rotate_every_weekend"
+    def save(self, commit=False):
+        if self.instance.pk:
+            day_name = self.cleaned_data["rotate_every_weekend"]
+            day_names = [
+                "monday",
+                "tuesday",
+                "wednesday",
+                "thursday",
+                "friday",
+                "saturday",
+                "sunday",
             ]
-            rotating_shift_assign.next_change_date = self.cleaned_data["start_date"]
-            rotating_shift_assign.current_shift = employee.employee_work_info.shift_id
-            rotating_shift_assign.next_shift = rotating_shift.shift1
-            rotating_shift_assign.additional_data["next_shift_index"] = 1
+            target_day = day_names.index(day_name.lower())
+
             based_on = self.cleaned_data["based_on"]
-            start_date = self.cleaned_data["start_date"]
+            start_date = self.instance.start_date
             if based_on == "weekly":
                 next_date = get_next_week_date(target_day, start_date)
-                rotating_shift_assign.next_change_date = next_date
+                self.instance.next_change_date = next_date
             elif based_on == "monthly":
-                # 0, 1, 2, ..., 31, or "last"
-                rotate_every = self.cleaned_data["rotate_every"]
-                start_date = self.cleaned_data["start_date"]
+                rotate_every = self.instance.rotate_every  # 0, 1, 2, ..., 31, or "last"
+                start_date = self.instance.start_date
                 next_date = get_next_monthly_date(start_date, rotate_every)
-                rotating_shift_assign.next_change_date = next_date
+                self.instance.next_change_date = next_date
             elif based_on == "after":
-                rotating_shift_assign.next_change_date = (
-                    rotating_shift_assign.start_date
+                self.instance.next_change_date = (
+                    self.instance.start_date
                     + datetime.timedelta(days=int(self.data.get("rotate_after_day")))
                 )
-            rotating_shift_assign.save()
+            return super().save()
+        else:
+            employee_ids = self.data.getlist("employee_id")
+            rotating_shift = RotatingShift.objects.get(
+                id=self.data["rotating_shift_id"]
+            )
+            day_name = self.cleaned_data["rotate_every_weekend"]
+            day_names = [
+                "monday",
+                "tuesday",
+                "wednesday",
+                "thursday",
+                "friday",
+                "saturday",
+                "sunday",
+            ]
+            target_day = day_names.index(day_name.lower())
+            for employee_id in employee_ids:
+                employee = Employee.objects.filter(id=employee_id).first()
+                rotating_shift_assign = RotatingShiftAssign()
+                rotating_shift_assign.rotating_shift_id = rotating_shift
+                rotating_shift_assign.employee_id = employee
+                rotating_shift_assign.based_on = self.cleaned_data["based_on"]
+                rotating_shift_assign.start_date = self.cleaned_data["start_date"]
+                rotating_shift_assign.next_change_date = self.cleaned_data["start_date"]
+                rotating_shift_assign.rotate_after_day = self.data.get(
+                    "rotate_after_day"
+                )
+                rotating_shift_assign.rotate_every = self.cleaned_data["rotate_every"]
+                rotating_shift_assign.rotate_every_weekend = self.cleaned_data[
+                    "rotate_every_weekend"
+                ]
+                rotating_shift_assign.next_change_date = self.cleaned_data["start_date"]
+                rotating_shift_assign.current_shift = (
+                    employee.employee_work_info.shift_id
+                )
+                rotating_shift_assign.next_shift = rotating_shift.shift1
+                rotating_shift_assign.additional_data["next_shift_index"] = 1
+                based_on = self.cleaned_data["based_on"]
+                start_date = self.cleaned_data["start_date"]
+                if based_on == "weekly":
+                    next_date = get_next_week_date(target_day, start_date)
+                    rotating_shift_assign.next_change_date = next_date
+                elif based_on == "monthly":
+                    # 0, 1, 2, ..., 31, or "last"
+                    rotate_every = self.cleaned_data["rotate_every"]
+                    start_date = self.cleaned_data["start_date"]
+                    next_date = get_next_monthly_date(start_date, rotate_every)
+                    rotating_shift_assign.next_change_date = next_date
+                elif based_on == "after":
+                    rotating_shift_assign.next_change_date = (
+                        rotating_shift_assign.start_date
+                        + datetime.timedelta(
+                            days=int(self.data.get("rotate_after_day"))
+                        )
+                    )
+                rotating_shift_assign.save()
 
 
 class RotatingShiftAssignUpdateForm(ModelForm):
@@ -1573,9 +2032,7 @@ class RotatingShiftAssignUpdateForm(ModelForm):
     RotatingShiftAssign model's form
     """
 
-    based_on = forms.ChoiceField(
-        choices=BASED_ON, initial="daily", label=_trans("Based on")
-    )
+    based_on = forms.ChoiceField(choices=BASED_ON, initial="daily", label=_("Based on"))
 
     class Meta:
         """
@@ -1595,12 +2052,12 @@ class RotatingShiftAssignUpdateForm(ModelForm):
             "start_date": DateInput(attrs={"type": "date"}),
         }
         labels = {
-            "start_date": _trans("Start date"),
-            "rotate_after_day": _trans("Rotate after day"),
-            "rotate_every_weekend": _trans("Rotate every weekend"),
-            "rotate_every": _trans("Rotate every"),
-            "based_on": _trans("Based on"),
-            "is_active": _trans("Is Active"),
+            "start_date": _("Start date"),
+            "rotate_after_day": _("Rotate after day"),
+            "rotate_every_weekend": _("Rotate every weekend"),
+            "rotate_every": _("Rotate every"),
+            "based_on": _("Based on"),
+            "is_active": _("Is Active"),
         }
 
     def __init__(self, *args, **kwargs):
@@ -1692,6 +2149,8 @@ class ShiftRequestForm(ModelForm):
     ShiftRequest model's form
     """
 
+    cols = {"description": 12}
+
     class Meta:
         """
         Meta class for additional options
@@ -1714,9 +2173,9 @@ class ShiftRequestForm(ModelForm):
             "requested_till": DateInput(attrs={"type": "date"}),
         }
         labels = {
-            "description": _trans("Description"),
-            "requested_date": _trans("Requested Date"),
-            "requested_till": _trans("Requested Till"),
+            "description": _("Description"),
+            "requested_date": _("Requested Date"),
+            "requested_till": _("Requested Till"),
         }
 
     def as_p(self):
@@ -1744,6 +2203,8 @@ class ShiftAllocationForm(ModelForm):
     ShiftRequest model's form
     """
 
+    cols = {"description": 12}
+
     class Meta:
         """
         Meta class for additional options
@@ -1767,9 +2228,9 @@ class ShiftAllocationForm(ModelForm):
         }
 
         labels = {
-            "description": _trans("Description"),
-            "requested_date": _trans("Requested Date"),
-            "requested_till": _trans("Requested Till"),
+            "description": _("Description"),
+            "requested_date": _("Requested Date"),
+            "requested_till": _("Requested Till"),
         }
 
     def __init__(self, *args, **kwargs):
@@ -1778,6 +2239,7 @@ class ShiftAllocationForm(ModelForm):
             {
                 "hx-target": "#id_reallocate_to_parent_div",
                 "hx-trigger": "change",
+                "hx-swap": "innerHTML",
                 "hx-get": "/update-employee-allocation",
             }
         )
@@ -1807,6 +2269,8 @@ class WorkTypeRequestForm(ModelForm):
     WorkTypeRequest model's form
     """
 
+    cols = {"description": 12}
+
     class Meta:
         """
         Meta class for additional options
@@ -1826,9 +2290,9 @@ class WorkTypeRequestForm(ModelForm):
             "requested_till": DateInput(attrs={"type": "date"}),
         }
         labels = {
-            "requested_date": _trans("Requested Date"),
-            "requested_till": _trans("Requested Till"),
-            "description": _trans("Description"),
+            "requested_date": _("Requested Date"),
+            "requested_till": _("Requested Till"),
+            "description": _("Description"),
         }
 
     def as_p(self):
@@ -2142,11 +2606,31 @@ class TagsForm(ModelForm):
         return table_html
 
 
+class EmployeeTagForm(ModelForm):
+    """
+    Employee Tags form
+    """
+
+    class Meta:
+        """
+        Meta class for additional options
+        """
+
+        model = EmployeeTag
+        fields = "__all__"
+        exclude = ["is_active"]
+        widgets = {"color": TextInput(attrs={"type": "color", "style": "height:50px"})}
+
+
 class AuditTagForm(ModelForm):
     """
     Audit Tags form
     """
 
+    cols = {
+        "title": 12,
+    }
+
     class Meta:
         """
         Meta class for additional options
@@ -2219,6 +2703,8 @@ class MailTemplateForm(ModelForm):
     MailTemplateForm
     """
 
+    cols = {"title": 12, "body": 12, "company_id": 12}
+
     class Meta:
         model = HorillaMailTemplate
         fields = "__all__"
@@ -2226,6 +2712,7 @@ class MailTemplateForm(ModelForm):
             "body": forms.Textarea(
                 attrs={"data-summernote": "", "style": "display:none;"}
             ),
+            "is_active": forms.HiddenInput(),
         }
 
     def get_template_language(self):
@@ -2274,6 +2761,11 @@ class MailTemplateForm(ModelForm):
 
 
 class MultipleApproveConditionForm(ModelForm):
+
+    cols = {
+        "multi_approval_manager": 12,
+    }
+
     CONDITION_CHOICE = [
         ("equal", _("Equal (==)")),
         ("notequal", _("Not Equal (!=)")),
@@ -2366,6 +2858,16 @@ class AnnouncementForm(ModelForm):
         label="Employees",
     )
 
+    cols = {
+        "title": 12,
+        "description": 12,
+        "attachments": 12,
+        "expire_date": 12,
+        "employees": 12,
+        "department": 12,
+        "job_position": 12,
+    }
+
     class Meta:
         """
         Meta class for additional options
@@ -2681,6 +3183,8 @@ class HolidayForm(ModelForm):
         - end_date: A DateField representing the end date of the holiday.
     """
 
+    cols = {"name": 12}
+
     start_date = forms.DateField(
         widget=forms.DateInput(attrs={"type": "date"}),
     )
@@ -2708,7 +3212,7 @@ class HolidayForm(ModelForm):
         fields = "__all__"
         exclude = ["is_active"]
         labels = {
-            "name": _("Name"),
+            "name": _("Holiday Name"),
         }
 
     def __init__(self, *args, **kwargs):
@@ -2769,6 +3273,8 @@ class CompanyLeaveForm(ModelForm):
             - exclude: A list of fields to exclude from the form (is_active).
     """
 
+    cols = {"based_on_week": 12, "based_on_week_day": 12}
+
     class Meta:
         """
         Meta class for additional options
diff --git a/base/horilla_company_manager.py b/base/horilla_company_manager.py
index c2ff4e982..e3a541e8a 100644
--- a/base/horilla_company_manager.py
+++ b/base/horilla_company_manager.py
@@ -9,13 +9,21 @@ from django.db import models
 from django.db.models.query import QuerySet
 
 from horilla.horilla_middlewares import _thread_locals
-from horilla.signals import post_bulk_update, pre_bulk_update
+from horilla.signals import (
+    post_bulk_update,
+    post_model_clean,
+    pre_bulk_update,
+    pre_model_clean,
+)
 
 logger = logging.getLogger(__name__)
 django_filter_update = QuerySet.update
 
 
 def update(self, *args, **kwargs):
+    """
+    Bulk Update
+    """
     # pre_update signal
     request = getattr(_thread_locals, "request", None)
     self.request = request
@@ -27,6 +35,21 @@ def update(self, *args, **kwargs):
     return result
 
 
+django_model_clean = models.Model.clean
+
+
+def clean(self, *args, **kwargs):
+    """
+    Method to override django clean and trigger to signals
+    """
+    pre_model_clean.send(sender=self._meta.model, instance=self, **kwargs)
+    result = django_model_clean(self)
+    post_model_clean.send(sender=self._meta.model, instance=self, **kwargs)
+    return result
+
+
+models.Model.clean = clean
+
 setattr(QuerySet, "update", update)
 
 
@@ -83,6 +106,8 @@ class HorillaCompanyManager(models.Manager):
                         request = getattr(_thread_locals, "request", None)
                         if not getattr(request, "is_filtering", None):
                             queryset = queryset.filter(is_active=True)
+                    elif model_name == "offboardingemployee":
+                        return queryset
                     else:
                         for field in queryset.model._meta.fields:
                             if isinstance(field, models.ForeignKey):
diff --git a/base/methods.py b/base/methods.py
index aa8b8f188..8c3aca929 100644
--- a/base/methods.py
+++ b/base/methods.py
@@ -637,6 +637,7 @@ def reload_queryset(fields):
 
 
 def check_manager(employee, instance):
+
     try:
         if isinstance(instance, Employee):
             return instance.employee_work_info.reporting_manager_id == employee
diff --git a/base/models.py b/base/models.py
index 4b925cb3c..4281f8385 100644
--- a/base/models.py
+++ b/base/models.py
@@ -1,6 +1,4 @@
 """
-models.py
-
 This module is used to register django models
 """
 
@@ -10,10 +8,17 @@ from typing import Iterable
 
 import django
 from django.apps import apps
+from django.conf import settings
 from django.contrib import messages
 from django.contrib.auth.models import AbstractUser, User
 from django.core.exceptions import ValidationError
+from django.core.files.storage import default_storage
 from django.db import models
+from django.db.models.signals import post_delete, post_save
+from django.dispatch import receiver
+from django.urls import reverse, reverse_lazy
+from django.utils.html import format_html
+from django.utils.safestring import mark_safe
 from django.utils.translation import gettext_lazy as _
 
 from base.horilla_company_manager import HorillaCompanyManager
@@ -21,6 +26,7 @@ from horilla import horilla_middlewares
 from horilla.horilla_middlewares import _thread_locals
 from horilla.models import HorillaModel
 from horilla_audit.models import HorillaAuditInfo, HorillaAuditLog
+from horilla_views.cbv_methods import render_template
 
 # Create your models here.
 WEEKS = [
@@ -60,6 +66,9 @@ def validate_time_format(value):
 
 
 def clear_messages(request):
+    """
+    clear messages
+    """
     storage = messages.get_messages(request)
     for message in storage:
         pass
@@ -98,6 +107,36 @@ class Company(HorillaModel):
     def __str__(self) -> str:
         return str(self.company)
 
+    def company_icon_with_name(self):
+        from django.utils.html import format_html
+
+        return format_html(
+            '<img src="{}" style="width: 30px; border-radius: 100%" class="oh-profile__image" alt="" /> {}',
+            self.icon.url,
+            self.company,
+        )
+
+    def get_update_url(self):
+        """
+        This method to get update url
+        """
+        url = reverse_lazy("company-update-form", kwargs={"pk": self.pk})
+        return url
+
+    def get_delete_url(self):
+        """
+        This method to get delete url
+        """
+        url = reverse_lazy("generic-delete")
+        return url
+
+    def get_delete_instance(self):
+        """
+        to get instance for delete
+        """
+
+        return self.pk
+
 
 class Department(HorillaModel):
     """
@@ -112,6 +151,10 @@ class Department(HorillaModel):
     objects = HorillaCompanyManager()
 
     class Meta:
+        """
+        meta
+        """
+
         verbose_name = _("Department")
         verbose_name_plural = _("Departments")
 
@@ -131,6 +174,50 @@ class Department(HorillaModel):
                 raise ValidationError("This department already exists in this company")
         return
 
+    def toggle_count(self):
+        return self.job_position.all().count()
+
+    def get_department_col(self):
+        """
+        this method is to get custom department col in job position
+        """
+
+        return render_template(
+            path="cbv/settings/job_position_dpt.html",
+            context={"instance": self},
+        )
+
+    def get_update_url(self):
+        """
+        This method to get update url
+        """
+        url = reverse_lazy("settings-department-update", kwargs={"pk": self.pk})
+        return url
+
+    def get_delete_url(self):
+        """
+        This method to get delete url
+        """
+        url = reverse_lazy("generic-delete")
+        return url
+
+    def get_delete_instance(self):
+        """
+        to get instance for delete
+        """
+
+        return self.pk
+
+    def get_job_position_col(self):
+        """
+        this method is to get custom job position col in job position
+        """
+
+        return render_template(
+            path="cbv/settings/position_in_job_position.html",
+            context={"instance": self},
+        )
+
     def save(self, *args, **kwargs):
         super().save(*args, **kwargs)
         self.clean(*args, **kwargs)
@@ -169,6 +256,29 @@ class JobPosition(HorillaModel):
     def __str__(self):
         return str(self.job_position + " - (" + self.department_id.department) + ")"
 
+    def job_position_col(self):
+        """
+        This method for get custom column .
+        """
+
+        return render_template(
+            path="cbv/settings/job_position_col_in_job_role.html",
+            context={"instance": self},
+        )
+
+    def get_data_count(self):
+        return self.jobrole_set.all().count()
+
+    def job_role_col(self):
+        """
+        This method for get custom column .
+        """
+
+        return render_template(
+            path="cbv/settings/job_role.html",
+            context={"instance": self},
+        )
+
 
 class JobRole(HorillaModel):
     """JobRole model"""
@@ -231,6 +341,27 @@ class WorkType(HorillaModel):
                 raise ValidationError("This work type already exists in this company")
         return
 
+    def get_update_url(self):
+        """
+        This method to get update url
+        """
+        url = reverse_lazy("work-type-update-form", kwargs={"pk": self.pk})
+        return url
+
+    def get_delete_url(self):
+        """
+        This method to get delete url
+        """
+        url = reverse_lazy("generic-delete")
+        return url
+
+    def get_delete_instance(self):
+        """
+        to get instance for delete
+        """
+
+        return self.pk
+
     def save(self, *args, **kwargs):
         super().save(*args, **kwargs)
         self.clean(*args, **kwargs)
@@ -278,6 +409,38 @@ class RotatingWorkType(HorillaModel):
     def __str__(self) -> str:
         return str(self.name)
 
+    def get_update_url(self):
+        """
+        This method to get update url
+        """
+        url = reverse_lazy("rotating-work-type-update-form", kwargs={"pk": self.pk})
+        return url
+
+    def get_delete_url(self):
+        """
+        This method to get delete url
+        """
+        url = reverse_lazy("generic-delete")
+        return url
+
+    def get_delete_instance(self):
+        """
+        to get instance for delete
+        """
+
+        return self.pk
+
+    def get_additional_worktytpes(self):
+        """
+        this method is to get additional work types if exists
+        """
+
+        additional_work = self.additional_work_types()
+        if additional_work:
+            additional = "<br>".join([str(work) for work in additional_work])
+            return additional
+        return "None"
+
     def clean(self):
         if self.work_type1 == self.work_type2:
             raise ValidationError(_("Select different work type continuously"))
@@ -418,6 +581,9 @@ class RotatingWorkTypeAssign(HorillaModel):
         ordering = ["-next_change_date", "-employee_id__employee_first_name"]
 
     def clean(self):
+        if self.start_date < django.utils.timezone.now().date():
+            raise ValidationError(_("Date must be greater than or equal to today"))
+
         if self.is_active and self.employee_id is not None:
             # Check if any other active record with the same parent already exists
             siblings = RotatingWorkTypeAssign.objects.filter(
@@ -425,8 +591,72 @@ class RotatingWorkTypeAssign(HorillaModel):
             )
             if siblings.exists() and siblings.first().id != self.id:
                 raise ValidationError(_("Only one active record allowed per employee"))
-        if self.start_date < django.utils.timezone.now().date():
-            raise ValidationError(_("Date must be greater than or equal to today"))
+
+    def rotate_data(self):
+        """
+        method for rotate col
+        """
+
+        return render_template(
+            path="cbv/rotating_work_type/rotation_col.html",
+            context={"instance": self},
+        )
+
+    def get_based_on_display(self):
+        """
+        Display work type
+        """
+        return dict(BASED_ON).get(self.based_on)
+
+    def get_actions(self):
+        """
+        get different actions
+        """
+
+        return render_template(
+            path="cbv/rotating_work_type/work_rotate_actions.html",
+            context={"instance": self},
+        )
+
+    def work_rotate_detail_subtitle(self):
+        """
+        Return subtitle containing both department and job position information.
+        """
+        return f"{self.employee_id.employee_work_info.department_id} / {self.employee_id.employee_work_info.job_position_id}"
+
+    def work_rotate_detail_view(self):
+        """
+        for detail view of page
+        """
+        url = reverse("work-rotating-detail-view", kwargs={"pk": self.pk})
+        return url
+
+    def individual_tab_work_rotate_detail_view(self):
+        """
+        for detail view of page in employee profile
+        """
+        url = reverse("individual-work-rotating-detail-view", kwargs={"pk": self.pk})
+        return url
+
+    def detail_is_active(self):
+        """
+        return active or not
+        """
+
+        if self.is_active:
+            return "Is Active"
+        else:
+            return "Archived"
+
+    def get_detail_view_actions(self):
+        """
+        get detail view actions
+        """
+
+        return render_template(
+            path="cbv/rotating_work_type/rotate_detail_view_actions.html",
+            context={"instance": self},
+        )
 
 
 class EmployeeType(HorillaModel):
@@ -450,6 +680,23 @@ class EmployeeType(HorillaModel):
     def __str__(self) -> str:
         return str(self.employee_type)
 
+    def get_update_url(self):
+        """
+        This method to get update url
+        """
+        url = reverse_lazy("employee-type-update-view", kwargs={"pk": self.pk})
+        return url
+
+    def get_delete_url(self):
+        """
+        This method to get delete url
+        """
+        url = reverse_lazy("generic-delete")
+        return url
+
+    def get_instance_id(self):
+        return self.id
+
     def clean(self, *args, **kwargs):
         super().clean(*args, **kwargs)
         request = getattr(_thread_locals, "request", None)
@@ -541,6 +788,29 @@ class EmployeeShift(HorillaModel):
     def __str__(self) -> str:
         return str(self.employee_shift)
 
+    def get_grace_time(self):
+        if self.grace_time_id:
+            return self.grace_time_id
+        else:
+            return "Nil"
+
+    def get_instance_id(self):
+        return self.id
+
+    def get_update_url(self):
+        """
+        This method to get update url
+        """
+        url = reverse_lazy("employee-shift-update-view", kwargs={"pk": self.pk})
+        return url
+
+    def get_delete_url(self):
+        """
+        This method to get delete  url
+        """
+        url = reverse_lazy("generic-delete")
+        return url
+
     def clean(self, *args, **kwargs):
         super().clean(*args, **kwargs)
         request = getattr(_thread_locals, "request", None)
@@ -574,10 +844,7 @@ class EmployeeShiftSchedule(HorillaModel):
     """
 
     day = models.ForeignKey(
-        EmployeeShiftDay,
-        on_delete=models.PROTECT,
-        related_name="day_schedule",
-        verbose_name=_("Shift Day"),
+        EmployeeShiftDay, on_delete=models.PROTECT, related_name="day_schedule"
     )
     shift_id = models.ForeignKey(
         EmployeeShift, on_delete=models.PROTECT, verbose_name=_("Shift")
@@ -604,6 +871,7 @@ class EmployeeShiftSchedule(HorillaModel):
             "Time at which the horilla will automatically check out the employee attendance if they forget."
         ),
     )
+
     company_id = models.ManyToManyField(Company, blank=True, verbose_name=_("Company"))
 
     objects = HorillaCompanyManager("shift_id__employee_shift__company_id")
@@ -632,11 +900,66 @@ class EmployeeShiftSchedule(HorillaModel):
     def __str__(self) -> str:
         return f"{self.shift_id.employee_shift} {self.day}"
 
+    def get_detail_url(self):
+        """
+        Detail view url
+        """
+        url = reverse_lazy("employee-shift-shedule-detail-view", kwargs={"pk": self.pk})
+        return url
+
+    def get_instance_id(self):
+        return self.id
+
+    def get_automatic_check_out_time(self):
+        """
+        Custome column for automatic checkout time
+        """
+        return (
+            f"<div class='oh-timeoff-modal__stat-title'>Automatic Check Out Time</div><div>{self.auto_punch_out_time}</div>"
+            if self.is_auto_punch_out_enabled
+            else ""
+        )
+
+    def get_avatar(self):
+        """
+        Method will retun the api to the avatar or path to the profile image
+        """
+        url = f"https://ui-avatars.com/api/?name={self.day.day}&background=random"
+        return url
+
+    def actions_col(self):
+        """
+        This for actions column in employee shift schedule
+        """
+        return render_template(
+            path="cbv/settings/employee_shift_schedule_action.html",
+            context={"instance": self},
+        )
+
+    def detail_actions_col(self):
+        """
+        This for detail actions column in employee shift schedule
+        """
+        return render_template(
+            path="cbv/settings/employee_shift_schedule_detail_action.html",
+            context={"instance": self},
+        )
+
+    def auto_punch_out_col(self):
+        return "Yes" if self.is_auto_punch_out_enabled else "No"
+
     def save(self, *args, **kwargs):
         if self.start_time and self.end_time:
             self.is_night_shift = self.start_time > self.end_time
         super().save(*args, **kwargs)
 
+    def day_col(self):
+        """
+        Custom column for day in employee shift schedule
+        """
+
+        return dict(DAY).get(self.day.day)
+
 
 class RotatingShift(HorillaModel):
     """
@@ -681,6 +1004,33 @@ class RotatingShift(HorillaModel):
     def __str__(self) -> str:
         return str(self.name)
 
+    def get_additional_shifts(self):
+        """
+        Returns a list of additional shifts or a message if no additional shifts are available.
+        """
+        additional_shifts = self.additional_shifts()
+        if additional_shifts:
+            additional_shift = "<br>".join([str(shift) for shift in additional_shifts])
+            return additional_shift
+        return "None"
+
+    def get_update_url(self):
+        """
+        This method to get update url
+        """
+        url = reverse_lazy("rotating-shift-update", kwargs={"pk": self.pk})
+        return url
+
+    def get_delete_url(self):
+        """
+        This method to get delete  url
+        """
+        url = reverse_lazy("generic-delete")
+        return url
+
+    def get_instance_id(self):
+        return self.id
+
     def clean(self):
 
         additional_shifts = (
@@ -804,6 +1154,96 @@ class RotatingShiftAssign(HorillaModel):
     )
     objects = HorillaCompanyManager("employee_id__employee_work_info__company_id")
 
+    def rotating_column(self):
+        """
+        This method for get custome coloumn .
+        """
+
+        return render_template(
+            path="cbv/rotating_shift/rotating_column.html",
+            context={"instance": self},
+        )
+
+    def actions(self):
+        """
+        This method for get custome coloumn .
+        """
+
+        return render_template(
+            path="cbv/rotating_shift/actions_rotaing_shift.html",
+            context={"instance": self},
+        )
+
+    def rotating_detail_actions(self):
+        """
+        This method for get custome coloumn .
+        """
+
+        return render_template(
+            path="cbv/rotating_shift/rotating_shift_detail_actions.html",
+            context={"instance": self},
+        )
+
+    def get_based_on_display(self):
+        """
+        Display work type
+        """
+        return dict(BASED_ON).get(self.based_on)
+
+    def rotating_shift_detail(self):
+        """
+        detail view
+        """
+
+        url = reverse("rotating-shift-detail-view", kwargs={"pk": self.pk})
+
+        return url
+
+    def rotating_shift_individual_detail(self):
+        """
+        individual detail view
+        """
+
+        url = reverse("rotating-shift-individual-detail-view", kwargs={"pk": self.pk})
+
+        return url
+
+    def rotating_subtitle(self):
+        """
+        Detail view subtitle
+        """
+
+        return f"""{self.employee_id.employee_work_info.department_id } /
+          { self.employee_id.employee_work_info.job_position_id}"""
+
+    def check_active(self):
+        """
+        Check active
+        """
+
+        if self.is_active:
+            return "Is Active"
+        else:
+            return "Archived"
+
+    def detail_edit_url(self):
+        """
+        Detail view edit
+        """
+
+        url = reverse("rotating-shift-assign-update", kwargs={"id": self.pk})
+
+        return url
+
+    def detail_archive_url(self):
+        """
+        Detail view edit
+        """
+
+        url = reverse("rotating-shift-assign-archive", kwargs={"obj_id": self.pk})
+
+        return url
+
     class Meta:
         """
         Meta class to add additional options
@@ -821,6 +1261,7 @@ class RotatingShiftAssign(HorillaModel):
             )
             if siblings.exists() and siblings.first().id != self.id:
                 raise ValidationError(_("Only one active record allowed per employee"))
+
         if self.start_date < django.utils.timezone.now().date():
             raise ValidationError(_("Date must be greater than or equal to today"))
 
@@ -892,6 +1333,66 @@ class WorkTypeRequest(HorillaModel):
             "-id",
         ]
 
+    def comment_note(self):
+        """
+        method used for comment note col in the page
+        """
+
+        return render_template(
+            path="cbv/work_type_request/note.html",
+            context={"instance": self},
+        )
+
+    def work_actions(self):
+        """
+        method for rendering actions(edit,duplicate,delete)
+        """
+
+        return render_template(
+            path="cbv/work_type_request/actions.html",
+            context={"instance": self},
+        )
+
+    def confirmation(self):
+        """
+        method for rendering options(approve,reject)
+        """
+
+        return render_template(
+            path="cbv/work_type_request/confirmation.html",
+            context={"instance": self},
+        )
+
+    def detail_view(self):
+        """
+        for detail view of page
+        """
+        url = reverse("work-detail-view", kwargs={"pk": self.pk})
+        return url
+
+    def is_permanent_work_type_display(self):
+        """
+        Method to display "Yes" or "No" based on is_permanent_work_type value
+        """
+        return "Yes" if self.is_permanent_work_type else "No"
+
+    def detail_view_actions(self):
+        """
+        method for rendering different options
+        convert,skillzone,reject,mail
+        """
+
+        return render_template(
+            path="cbv/work_type_request/detail_view_actions.html",
+            context={"instance": self},
+        )
+
+    def detail_subtitle(self):
+        """
+        Return subtitle containing both department and job position information.
+        """
+        return f"{self.employee_id.employee_work_info.department_id} / {self.employee_id.employee_work_info.job_position_id}"
+
     def delete(self, *args, **kwargs):
         request = getattr(_thread_locals, "request", None)
         if not self.approved:
@@ -1058,6 +1559,125 @@ class ShiftRequest(HorillaModel):
             "-id",
         ]
 
+    def comment(self):
+        """
+        This method for get custome coloumn for comment.
+        """
+
+        return render_template(
+            path="cbv/shift_request/comment.html",
+            context={"instance": self},
+        )
+
+    # def shift_allocate_actions(self):
+    #     """
+    #     This method for get custome coloumn for allocated actions.
+    #     """
+
+    #     return render_template(
+    #         path="cbv/shift_request/allocated_shift_actions.html",
+    #         context={"instance": self},
+    #     )
+
+    def allocated_confirm_action_col(self):
+        """
+        This method for get custome coloumn for allocated actions.
+        """
+
+        return render_template(
+            path="cbv/shift_request/allocated_confirm_action.html",
+            context={"instance": self},
+        )
+
+    def user_availability(self):
+        """
+        This method for get custome coloumn for User availability.
+        """
+
+        return render_template(
+            path="cbv/shift_request/user_availability.html",
+            context={"instance": self},
+        )
+
+    def shift_details(self):
+        """
+        Detail view
+        """
+
+        url = reverse("shift-detail-view", kwargs={"pk": self.pk})
+
+        return url
+
+    def allocate_shift_details(self):
+        """
+        Allocate detail view
+        """
+
+        url = reverse("allocate-detail-view", kwargs={"pk": self.pk})
+
+        return url
+
+    def is_permanent(self):
+        """
+        Permanent shift
+        """
+        return "Yes" if self.is_permanent_shift else "No"
+
+    def shift_actions(self):
+        """
+        This method for get custome coloumn for actions.
+        """
+
+        return render_template(
+            path="cbv/shift_request/actions_shift_requst.html",
+            context={"instance": self},
+        )
+
+    def confirmations(self):
+        """
+        This method for get custome coloumn for confirmations.
+        """
+
+        return render_template(
+            path="cbv/shift_request/confirmations.html",
+            context={"instance": self},
+        )
+
+    def allocate_confirmations(self):
+        """
+        This method for get custome coloumn for confirmations.
+        """
+
+        return render_template(
+            path="cbv/shift_request/confirm_allocated.html",
+            context={"instance": self},
+        )
+
+    def detail_actions(self):
+        """
+        This method for get custome coloumn for comment.
+        """
+
+        return render_template(
+            path="cbv/shift_request/shift_deatil_actions.html",
+            context={"instance": self},
+        )
+
+    def request_status(self):
+        return (
+            _("Rejected")
+            if self.canceled
+            else (_("Approved") if self.approved else _("Requested"))
+        )
+
+    def details_subtitle(self):
+        """
+        Detail view subtitle
+        """
+
+        return f"""{self.employee_id.employee_work_info.department_id } /
+          { self.employee_id.employee_work_info.job_position_id}"""
+
     def clean(self):
 
         request = getattr(horilla_middlewares._thread_locals, "request", None)
@@ -1164,6 +1784,41 @@ class Tags(HorillaModel):
     def __str__(self):
         return self.title
 
+    def get_color(self):
+        """
+        This method returns the style string with the tag's color
+        """
+        color = (
+            f"<span style='height: 25px; "
+            f"width: 25px; "
+            f"background-color: {self.color}; "
+            f"border-radius: 50%; "
+            f"display: inline-block;'></span>"
+        )
+        return color
+
+    def get_instance_id(self):
+        """
+        To get instance
+        """
+        return self.id
+
+    def get_update_url(self):
+        """
+        This method to get update url
+        """
+        url = reverse_lazy("update-helpdesk-tag", kwargs={"pk": self.pk})
+        return url
+
+    def get_delete_url(self):
+        """
+        This method to get delete url
+        """
+        url = reverse_lazy("tag-delete", kwargs={"obj_id": self.pk})
+        # message = "Are you sure you want to delete this tag ?"
+        # return f"'{url}'" + "," + f"'{message}'"
+        return url
+
 
 class HorillaMailTemplate(HorillaModel):
     title = models.CharField(max_length=100, unique=True)
@@ -1235,6 +1890,20 @@ class DynamicEmailConfiguration(HorillaModel):
         Company, on_delete=models.CASCADE, null=True, blank=True
     )
 
+    def highlight_cell(self):
+        if self.is_primary:
+            return f'style="background-color: rgba(255, 68, 0, 0.134);" '
+
+    def action_col(self):
+        """
+        This method for get custome coloumn .
+        """
+
+        return render_template(
+            path="cbv/settings/mail_server_action.html",
+            context={"instance": self},
+        )
+
     def clean(self):
         if self.use_ssl and self.use_tls:
             raise ValidationError(
@@ -1286,6 +1955,10 @@ CONDITION_CHOICE = [
 
 
 class MultipleApprovalCondition(HorillaModel):
+    """
+    Multiple approve conditions
+    """
+
     department = models.ForeignKey(Department, on_delete=models.CASCADE)
     condition_field = models.CharField(
         max_length=255,
@@ -1312,7 +1985,6 @@ class MultipleApprovalCondition(HorillaModel):
         blank=True,
         verbose_name=_("Ending Value"),
     )
-    objects = models.Manager()
     company_id = models.ForeignKey(
         Company,
         null=True,
@@ -1320,10 +1992,78 @@ class MultipleApprovalCondition(HorillaModel):
         on_delete=models.CASCADE,
         verbose_name=_("Company"),
     )
+    objects = HorillaCompanyManager()
 
     def __str__(self) -> str:
         return f"{self.condition_field} {self.condition_operator}"
 
+    def get_condition_field(self):
+        """
+        Display condition field
+        """
+        return dict(FIELD_CHOICE).get(self.condition_field)
+
+    def get_condition_operator(self):
+        """
+        Display condition operator
+        """
+        return dict(CONDITION_CHOICE).get(self.condition_operator)
+
+    def get_condition_value(self):
+        """
+        Condition value column
+        """
+        if self.condition_operator == "range":
+            start_value = self.condition_start_value
+            end_value = self.condition_end_value
+            return start_value + " - " + end_value
+        else:
+            return self.condition_value
+
+    def approval_managers_col(self):
+        """
+        For approval managers column
+        """
+
+        return render_template(
+            path="cbv/multiple_approval_condition/approval_managers.html",
+            context={"instance": self},
+        )
+
+    def detail_actions(self):
+        """
+        For detail action column
+        """
+
+        return render_template(
+            path="cbv/multiple_approval_condition/detail_action.html",
+            context={"instance": self},
+        )
+
+    def actions_col(self):
+        """
+        For actions column
+        """
+
+        return render_template(
+            path="cbv/multiple_approval_condition/actions.html",
+            context={"instance": self},
+        )
+
+    def get_avatar(self):
+        """
+        Method will retun the api to the avatar or path to the profile image
+        """
+        url = f"https://ui-avatars.com/api/?name={self.department}&background=random"
+        return url
+
+    def detail_view(self):
+        """
+        detail view
+        """
+        url = reverse("detail-view-multiple-approval-condition", kwargs={"pk": self.pk})
+        return url
+
     def clean(self, *args, **kwargs):
         if self.condition_value:
             instance = MultipleApprovalCondition.objects.filter(
@@ -1414,6 +2154,9 @@ class MultipleApprovalCondition(HorillaModel):
         super().save(*args, **kwargs)
 
     def approval_managers(self, *args, **kwargs):
+        """
+        approved managers
+        """
         managers = []
         from employee.models import Employee
 
@@ -1433,13 +2176,17 @@ class MultipleApprovalCondition(HorillaModel):
 
 
 class MultipleApprovalManagers(models.Model):
+    """
+    Multiple approve
+    """
+
     condition_id = models.ForeignKey(
         MultipleApprovalCondition, on_delete=models.CASCADE
     )
     sequence = models.IntegerField(null=False, blank=False)
     employee_id = models.IntegerField(null=True, blank=True)
     reporting_manager = models.CharField(max_length=100, null=True, blank=True)
-    objects = models.Manager()
+    objects = HorillaCompanyManager(related_company_field="condition_id__company_id")
 
     class Meta:
         verbose_name = _("Multiple Approval Managers")
@@ -1551,6 +2298,9 @@ class Announcement(HorillaModel):
         return self.announcementview_set.filter(viewed=True)
 
     def viewed_by(self):
+        """
+        Announcement view
+        """
 
         viewed_by = AnnouncementView.objects.filter(
             announcement_id__id=self.id, viewed=True
@@ -1571,6 +2321,18 @@ class Announcement(HorillaModel):
     def __str__(self):
         return self.title
 
+    def announcement_custom_col(self):
+        """
+        custom col for announcement list col
+        """
+
+        current_date = datetime.now().strftime("%Y-%m-%d")
+
+        return render_template(
+            path="cbv/dashboard/announcement_title.html",
+            context={"instance": self, "current_date": current_date},
+        )
+
 
 class AnnouncementComment(HorillaModel):
     """
@@ -1594,8 +2356,21 @@ class AnnouncementView(models.Model):
     announcement = models.ForeignKey(Announcement, on_delete=models.CASCADE)
     viewed = models.BooleanField(default=False)
     created_at = models.DateTimeField(auto_now_add=True, null=True)
+
     objects = models.Manager()
 
+    def announcement_viewed_by_col(self):
+        """
+        custom col for announcement list col
+        """
+
+        return render_template(
+            path="cbv/dashboard/announcement_viewed_by.html",
+            context={
+                "instance": self,
+            },
+        )
+
 
 class EmailLog(models.Model):
     """
@@ -1614,6 +2389,33 @@ class EmailLog(models.Model):
         Company, on_delete=models.CASCADE, null=True, editable=False
     )
 
+    def __str__(self) -> str:
+        return f"{self.subject} {self.to}"
+
+    def status_display(self):
+        status = dict(self.statuses).get(self.status)
+        if self.status == "sent":
+            color_class = "oh-dot--success"
+            link_class = "link-success"
+
+        elif self.status == "failed":
+            color_class = "oh-dot--danger"
+            link_class = "link-danger"
+        return format_html(
+            '<span class="oh-dot oh-dot--small me-1 oh-dot--color {color_class}"></span>'
+            '<span class="{link_class}">{status}</span>',
+            color_class=color_class,
+            status=status,
+            link_class=link_class,
+        )
+
+    def mail_log_detail_view(self):
+        """
+        for detail view of page
+        """
+        url = reverse("individual-mail-log-detail", kwargs={"pk": self.pk})
+        return url
+
 
 class DriverViewed(models.Model):
     """
@@ -1636,6 +2438,10 @@ class DriverViewed(models.Model):
 
 
 class DashboardEmployeeCharts(HorillaModel):
+    """
+    dashboard employee chart
+    """
+
     from employee.models import Employee
 
     employee = models.ForeignKey(Employee, on_delete=models.CASCADE)
@@ -1652,6 +2458,10 @@ class DashboardEmployeeCharts(HorillaModel):
 
 
 class BiometricAttendance(models.Model):
+    """
+    Biometric attendance
+    """
+
     is_installed = models.BooleanField(default=False)
     company_id = models.ForeignKey(
         Company,
@@ -1743,6 +2553,46 @@ class Holidays(HorillaModel):
     def __str__(self):
         return self.name
 
+    def detail_view(self):
+        """
+        detail view
+        """
+
+        url = reverse("holiday-detail-view", kwargs={"pk": self.pk})
+        return url
+
+    def detail_view_actions(self):
+        """
+        detail view actions
+        """
+        return render_template(
+            path="cbv/holidays/detail_view_actions.html",
+            context={"instance": self},
+        )
+
+    def get_recurring_status(self):
+        """
+        recurring data
+        """
+        return "Yes" if self.recurring else "No"
+
+    def holidays_actions(self):
+        """
+        method for rendering actions(edit,delete)
+        """
+
+        return render_template(
+            path="cbv/holidays/holidays_actions.html",
+            context={"instance": self},
+        )
+
+    def get_avatar(self):
+        """
+        Method will retun the api to the avatar or path to the profile image
+        """
+        url = f"https://ui-avatars.com/api/?name={self.name}&background=random"
+        return url
+
     def today_holidays(today=None) -> models.QuerySet:
         """
         Retrieve holidays that overlap with the given date (default is today).
@@ -1782,6 +2632,72 @@ class CompanyLeaves(HorillaModel):
     def __str__(self):
         return f"{dict(WEEK_DAYS).get(self.based_on_week_day)} | {dict(WEEKS).get(self.based_on_week)}"
 
+    def custom_based_on_week(self):
+        """
+        custom based on col
+        """
+
+        return render_template(
+            path="cbv/company_leaves/on_week.html",
+            context={"instance": self, "weeks": WEEKS},
+        )
+
+    def get_detail_title(self):
+        """
+        for return title
+        """
+
+        title = "Company Leaves"
+        return title
+
+    def detail_view_actions(self):
+        """
+        detail view actions
+        """
+        return render_template(
+            path="cbv/company_leaves/detail_view_actions.html",
+            context={"instance": self},
+        )
+
+    def based_on_week_day_col(self):
+        """
+        custom based on week day col
+        """
+
+        return render_template(
+            path="cbv/company_leaves/on_week_day.html",
+            context={"instance": self, "week_days": WEEK_DAYS},
+        )
+
+    def company_leave_actions(self):
+        """
+        custom actions col
+        """
+
+        return render_template(
+            path="cbv/company_leaves/company_leave_actions.html",
+            context={"instance": self, "weeks": WEEKS},
+        )
+
+    def detail_view(self):
+        """
+        detail view
+        """
+
+        url = reverse("company-leave-detail-view", kwargs={"pk": self.pk})
+        return url
+
+    def get_avatar(self):
+        """
+        Method will retun the api to the avatar or path to the profile image
+        """
+        if self.based_on_week is not None:
+            url = f"https://ui-avatars.com/api/?name={dict(WEEKS).get(self.based_on_week)}&background=random"
+        else:
+            data = "All"
+            url = f"https://ui-avatars.com/api/?name={data}&background=random"
+        return url
+
 
 class PenaltyAccounts(HorillaModel):
     """
@@ -1816,8 +2732,33 @@ class PenaltyAccounts(HorillaModel):
         )
         minus_leaves = models.FloatField(default=0.0, null=True)
         deduct_from_carry_forward = models.BooleanField(default=False)
+
+        def get_deduct_from_carry_forward(self):
+            if self.deduct_from_carry_forward:
+                return "Yes"
+            return "No"
+
     penalty_amount = models.FloatField(default=0.0, null=True)
 
+    def get_delete_url(self):
+        """
+        To get delete url
+        """
+        url = reverse("delete-penalties", kwargs={"penalty_id": self.pk})
+        return url
+
+    def get_delete_instance(self):
+        """
+        To get instance for delete
+        """
+        return self.pk
+
+    def penalty_type_col(self):
+        if apps.is_installed("attendance"):
+            if self.late_early_id:
+                return "Late come or Early out Penalty"
+            return "Leave Penalty"
+
     def clean(self) -> None:
         super().clean()
         if apps.is_installed("leave") and not self.leave_type_id and self.minus_leaves:
@@ -1832,7 +2773,11 @@ class PenaltyAccounts(HorillaModel):
                     )
                 }
             )
-        if not self.minus_leaves and not self.penalty_amount:
+        if (
+            apps.is_installed("leave")
+            and not self.minus_leaves
+            and not self.penalty_amount
+        ):
             raise ValidationError(
                 {
                     "leave_type_id": _(
@@ -1842,8 +2787,10 @@ class PenaltyAccounts(HorillaModel):
             )
 
         if (
-            self.minus_leaves or self.deduct_from_carry_forward
-        ) and not self.leave_type_id:
+            apps.is_installed("leave")
+            and (self.minus_leaves or self.deduct_from_carry_forward)
+            and not self.leave_type_id
+        ):
             raise ValidationError({"leave_type_id": _("Leave type is required")})
         return
 
@@ -1862,4 +2809,134 @@ class NotificationSound(models.Model):
     sound_enabled = models.BooleanField(default=False)
 
 
+@receiver(post_save, sender=PenaltyAccounts)
+def create_deduction_cutleave_from_penalty(sender, instance, created, **kwargs):
+    """
+    This is post save method, used to create deduction and cut availabl leave days"""
+    # only work when creating
+    if created:
+        penalty_amount = instance.penalty_amount
+        if apps.is_installed("payroll") and penalty_amount:
+            Deduction = get_horilla_model_class(app_label="payroll", model="deduction")
+            penalty = Deduction()
+            if instance.late_early_id:
+                penalty.title = f"{instance.late_early_id.get_type_display()} penalty"
+                penalty.one_time_date = (
+                    instance.late_early_id.attendance_id.attendance_date
+                )
+            elif instance.leave_request_id:
+                penalty.title = f"Leave penalty {instance.leave_request_id.end_date}"
+                penalty.one_time_date = instance.leave_request_id.end_date
+            else:
+                penalty.title = f"Penalty on {datetime.today()}"
+                penalty.one_time_date = datetime.today()
+            penalty.include_active_employees = False
+            penalty.is_fixed = True
+            penalty.amount = instance.penalty_amount
+            penalty.only_show_under_employee = True
+            penalty.save()
+            penalty.include_active_employees = False
+            penalty.specific_employees.add(instance.employee_id)
+            penalty.save()
+
+        if (
+            apps.is_installed("leave")
+            and instance.leave_type_id
+            and instance.minus_leaves
+        ):
+            available = instance.employee_id.available_leave.filter(
+                leave_type_id=instance.leave_type_id
+            ).first()
+            unit = round(instance.minus_leaves * 2) / 2
+            if not instance.deduct_from_carry_forward:
+                available.available_days = max(0, (available.available_days - unit))
+            else:
+                available.carryforward_days = max(
+                    0, (available.carryforward_days - unit)
+                )
+
+            available.save()
+
+
+# @receiver(post_delete, sender=PenaltyAccounts)
+# def delete_deduction_cutleave_from_penalty(sender, instance, **kwargs):
+#     """
+#     This is a post delete method, used to delete deduction and update available leave days."""
+#     # Check if the deduction model is installed
+#     if apps.is_installed("payroll"):
+#         Deduction = get_horilla_model_class(app_label="payroll", model="deduction")
+#         # Assuming deductions are related to PenaltyAccounts by a foreign key or similar
+#         deductions = Deduction.objects.filter(specific_employees=instance.employee_id, amount=instance.penalty_amount)
+
+#         for deduction in deductions:
+#             deduction.delete()
+
+#     if apps.is_installed("leave") and instance.leave_type_id and instance.minus_leaves:
+#         available = instance.employee_id.available_leave.filter(
+#             leave_type_id=instance.leave_type_id
+#         ).first()
+#         if available:
+#             unit = round(instance.minus_leaves * 2) / 2
+#             if not instance.deduct_from_carry_forward:
+#                 available.available_days += unit  # Restore the deducted days
+#             else:
+#                 available.carryforward_days += unit  # Restore the deducted carryforward days
+
+#             available.save()
+
+
+@receiver(post_delete, sender=PenaltyAccounts)
+def delete_deduction_cutleave_from_penalty(sender, instance, **kwargs):
+    """
+    This is a post delete method, used to delete the deduction and update available leave days.
+    """
+    # Check if the deduction model is installed
+    if apps.is_installed("payroll"):
+        Deduction = get_horilla_model_class(app_label="payroll", model="deduction")
+
+        if instance.late_early_id:
+            title = f"{instance.late_early_id.get_type_display()} penalty"
+        elif instance.leave_request_id:
+            title = f"Leave penalty {instance.leave_request_id.end_date}"
+        else:
+            title = f"Penalty on {datetime.today()}"
+
+        # Attempt to retrieve the deduction specifically associated with the penalty account
+        deductions = Deduction.objects.filter(
+            specific_employees=instance.employee_id,
+            amount=instance.penalty_amount,
+            title=title,
+        )
+
+        # If you have a date or other unique field, add it to the filter
+        if instance.late_early_id:
+            deductions = deductions.filter(
+                one_time_date=instance.late_early_id.attendance_id.attendance_date
+            )
+        elif instance.leave_request_id:
+            deductions = deductions.filter(
+                one_time_date=instance.leave_request_id.end_date
+            )
+        else:
+            deductions = deductions.filter(one_time_date=datetime.today())
+
+        for deduction in deductions:
+            deduction.delete()
+
+    if apps.is_installed("leave") and instance.leave_type_id and instance.minus_leaves:
+        available = instance.employee_id.available_leave.filter(
+            leave_type_id=instance.leave_type_id
+        ).first()
+        if available:
+            unit = round(instance.minus_leaves * 2) / 2
+            if not instance.deduct_from_carry_forward:
+                available.available_days += unit  # Restore the deducted days
+            else:
+                available.carryforward_days += (
+                    unit  # Restore the deducted carryforward days
+                )
+
+            available.save()
+
+
 User.add_to_class("is_new_employee", models.BooleanField(default=False))
diff --git a/base/shift_decorators.py b/base/shift_decorators.py
new file mode 100644
index 000000000..06e5a37df
--- /dev/null
+++ b/base/shift_decorators.py
@@ -0,0 +1,51 @@
+"""
+decorator functions for base
+"""
+from django.http import HttpResponse
+from django.shortcuts import render
+from base.models import MultipleApprovalManagers
+from employee.models import EmployeeWorkInformation
+from django.contrib import messages
+decorator_with_arguments = (
+    lambda decorator: lambda *args, **kwargs: lambda func: decorator(
+        func, *args, **kwargs
+    )
+)
+
+@decorator_with_arguments
+def report_manager_can_enter(function, perm):
+    """
+    This method is used to check permission to employee for enter to the function if the employee
+    do not have permission also checks, has reporting manager.
+    """
+
+    def _function(request, *args, **kwargs):
+        leave_perm = [
+            "leave.view_leaverequest",
+            "leave.change_leaverequest",
+            "leave.delete_leaverequest",
+        ]
+        user = request.user
+        employee = user.employee_get
+        if perm in leave_perm:
+            is_approval_manager = MultipleApprovalManagers.objects.filter(
+                employee_id=employee.id
+            ).exists()
+            if is_approval_manager:
+                return function(request, *args, **kwargs)
+        is_manager = EmployeeWorkInformation.objects.filter(
+            reporting_manager_id=employee
+        ).exists()
+        if user.has_perm(perm) or is_manager:
+            return function(request, *args, **kwargs)
+        else:
+            messages.info(request, "You dont have permission.")
+            previous_url = request.META.get("HTTP_REFERER", "/")
+            script = f'<script>window.location.href = "{previous_url}"</script>'
+            key = "HTTP_HX_REQUEST"
+            if key in request.META.keys():
+                return render(request, "decorator_404.html")
+            return HttpResponse(script)
+
+    return _function
+
diff --git a/base/static/base/actions.js b/base/static/base/actions.js
index e3ed4b34a..7d9408de5 100644
--- a/base/static/base/actions.js
+++ b/base/static/base/actions.js
@@ -1,3 +1,5 @@
+
+
 var excelMessages = {
   ar: "هل ترغب في تنزيل ملف Excel؟",
   de: "Möchten Sie die Excel-Datei herunterladen?",
diff --git a/base/static/cbv/deleteFunc.js b/base/static/cbv/deleteFunc.js
new file mode 100644
index 000000000..940dd66c2
--- /dev/null
+++ b/base/static/cbv/deleteFunc.js
@@ -0,0 +1,26 @@
+function getCSRFToken() {
+    return document.querySelector('meta[name="csrf-token"]').getAttribute('content');
+  }
+function deleteItem(url,message) {
+    Swal.fire({
+        text: message,
+        icon: "question",
+        showCancelButton: true,
+        confirmButtonColor: "green",
+        cancelButtonColor: "#d33",
+        confirmButtonText: "Confirm"
+    }).then((result) => {
+        if (result.isConfirmed) {
+            const form = document.createElement('form');
+            form.setAttribute('action', url);
+            form.setAttribute('method', 'post');
+            const csrfTokenInput = document.createElement('input');
+            csrfTokenInput.setAttribute('type', 'hidden');
+            csrfTokenInput.setAttribute('name', 'csrfmiddlewaretoken');
+            csrfTokenInput.value = getCSRFToken(); 
+            form.appendChild(csrfTokenInput);
+            document.body.appendChild(form);
+            form.submit();
+        }
+    });
+}
diff --git a/base/static/cbv/shift_request/shift_request_bulk_actions.js b/base/static/cbv/shift_request/shift_request_bulk_actions.js
new file mode 100644
index 000000000..5cbd39657
--- /dev/null
+++ b/base/static/cbv/shift_request/shift_request_bulk_actions.js
@@ -0,0 +1,455 @@
+
+
+var excelMessages = {
+    ar: "هل ترغب في تنزيل ملف Excel؟",
+    de: "Möchten Sie die Excel-Datei herunterladen?",
+    es: "¿Desea descargar el archivo de Excel?",
+    en: "Do you want to download the excel file?",
+    fr: "Voulez-vous télécharger le fichier Excel?",
+  };
+  
+  var archiveMessages = {
+    ar: "هل ترغب حقًا في أرشفة كل الحضور المحدد؟",
+    de: "Möchten Sie wirklich alle ausgewählten Anwesenheiten archivieren?",
+    es: "Realmente quieres archivar todas las asistencias seleccionadas?",
+    en: "Do you really want to archive all the selected requests?",
+    fr: "Voulez-vous vraiment archiver toutes les présences sélectionnées?",
+  };
+  
+  var unarchiveMessages = {
+    ar: "هل ترغب حقًا في إلغاء أرشفة كل الحضور المحددة؟",
+    de: "Möchten Sie wirklich alle ausgewählten archivierten Zuweisungen wiederherstellen?",
+    es: "Realmente quieres desarchivar todas las asignaciones seleccionadas?",
+    en: "Do you really want to un-archive all the selected requests?",
+    fr: "Voulez-vous vraiment désarchiver toutes les allocations sélectionnées?",
+  };
+  
+  var shiftDeleteRequestMessages = {
+    ar: "هل ترغب حقًا في حذف كل الحجوزات المحددة؟",
+    de: "Möchten Sie wirklich alle ausgewählten Zuweisungen löschen?",
+    es: "Realmente quieres eliminar todas las asignaciones seleccionadas?",
+    en: "Do you really want to delete all the selected requests?",
+    fr: "Voulez-vous vraiment supprimer toutes les allocations sélectionnées?",
+  };
+  
+  var approveMessages = {
+    ar: "هل ترغب حقًا في الموافقة على جميع الطلبات المحددة؟",
+    de: "Möchten Sie wirklich alle ausgewählten Anfragen genehmigen?",
+    es: "Realmente quieres aprobar todas las solicitudes seleccionadas?",
+    en: "Do you really want to approve all the selected requests?",
+    fr: "Voulez-vous vraiment approuver toutes les demandes sélectionnées?",
+  };
+  var rejectMessages = {
+    ar: "هل تريد حقًا رفض جميع الطلبات المحددة؟",
+    de: "Möchten Sie wirklich alle ausgewählten Anfragen ablehnen?",
+    es: "¿Realmente deseas rechazar todas las solicitudes seleccionadas?",
+    en: "Do you really want to reject all the selected requests?",
+    fr: "Voulez-vous vraiment rejeter toutes les demandes sélectionnées?",
+  };
+  var requestDeleteMessages = {
+    ar: "هل ترغب حقًا في حذف جميع الطلبات المحددة؟",
+    de: "Möchten Sie wirklich alle ausgewählten Anfragen löschen?",
+    es: "Realmente quieres eliminar todas las solicitudes seleccionadas?",
+    en: "Do you really want to delete all the selected requests?",
+    fr: "Voulez-vous vraiment supprimer toutes les demandes sélectionnées?",
+  };
+  var norowMessagesShift = {
+    ar: "لم يتم تحديد أي صفوف.",
+    de: "Es wurden keine Zeilen ausgewählt.",
+    es: "No se han seleccionado filas.",
+    en: "No rows have been selected.",
+    fr: "Aucune ligne n'a été sélectionnée.",
+  };
+  var rowMessages = {
+    ar: " تم الاختيار",
+    de: " Ausgewählt",
+    es: " Seleccionado",
+    en: " Selected",
+    fr: " Sélectionné",
+  };
+  
+  tickShiftCheckboxes();
+  function makeShiftListUnique(list) {
+    return Array.from(new Set(list));
+  }
+  
+  tickWorktypeCheckboxes();
+  function makeWorktypeListUnique(list) {
+    return Array.from(new Set(list));
+  }
+  
+  tickRShiftCheckboxes();
+  function makeRShiftListUnique(list) {
+    return Array.from(new Set(list));
+  }
+  
+  tickRWorktypeCheckboxes();
+  function makeRWorktypeListUnique(list) {
+    return Array.from(new Set(list));
+  }
+  
+  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();
+        // Does this cookie string begin with the name we want?
+        if (cookie.substring(0, name.length + 1) === name + "=") {
+          cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
+          break;
+        }
+      }
+    }
+    return cookieValue;
+  }
+  
+  function getCurrentLanguageCode(callback) {
+    var languageCode = $("#main-section-data").attr("data-lang");
+    var allowedLanguageCodes = ["ar", "de", "es", "en", "fr"];
+    if (allowedLanguageCodes.includes(languageCode)) {
+      callback(languageCode);
+    } else {
+      $.ajax({
+        type: "GET",
+        url: "/employee/get-language-code/",
+        success: function (response) {
+          var ajaxLanguageCode = response.language_code;
+          $("#main-section-data").attr("data-lang", ajaxLanguageCode);
+          callback(
+            allowedLanguageCodes.includes(ajaxLanguageCode)
+              ? ajaxLanguageCode
+              : "en"
+          );
+        },
+        error: function () {
+          callback("en");
+        },
+      });
+    }
+  }
+
+  function shiftRequestApprove() {
+    
+
+    var languageCode = null;
+    getCurrentLanguageCode(function (code) {
+      languageCode = code;
+      var confirmMessage = approveMessages[languageCode];
+      var textMessage = norowMessagesShift[languageCode];
+      ids = [];
+      // function addIdsTab(tabId){
+      //   var dataIds = $("#"+tabId).attr("data-ids");
+      //   if (dataIds){
+      //     ids = ids.concat(JSON.parse(dataIds));
+      //   }
+      // }
+      // addIdsTab("shiftselectedInstances");
+      // addIdsTab("allocatedselectedInstances");
+      ids.push($("#selectedInstances").attr("data-ids"));
+      ids = JSON.parse($("#selectedInstances").attr("data-ids"));
+      if (ids.length === 0) {
+        Swal.fire({
+          text: textMessage,
+          icon: "warning",
+          confirmButtonText: "Close",
+        });
+      } else {
+        // Use SweetAlert for the confirmation dialog
+        Swal.fire({
+          text: confirmMessage,
+          icon: "success",
+          showCancelButton: true,
+          confirmButtonColor: "#008000",
+          cancelButtonColor: "#d33",
+          confirmButtonText: "Confirm",
+        }).then(function (result) {
+          if (result.isConfirmed) {
+            // ids = [];
+            // ids.push($("#selectedInstances").attr("data-ids"));
+            // ids = JSON.parse($("#selectedInstances").attr("data-ids"));
+            $.ajax({
+              type: "POST",
+              url: "/shift-request-bulk-approve",
+              data: {
+                csrfmiddlewaretoken: getCookie("csrftoken"),
+                ids: JSON.stringify(ids),
+              },
+              success: function (response, textStatus, jqXHR) {
+                if (jqXHR.status === 200) {
+                  location.reload(); // Reload the current page
+                } else {
+                  // console.log("Unexpected HTTP status:", jqXHR.status);
+                }
+              },
+            });
+          }
+        });
+      }
+    });
+  }
+  
+  function shiftRequestReject() {
+    
+  
+    var languageCode = null;
+    getCurrentLanguageCode(function (code) {
+      languageCode = code;
+      var confirmMessage = rejectMessages[languageCode];
+      var textMessage = norowMessagesShift[languageCode];
+      ids = [];
+      // function addIdsTab(tabId){
+      //   var dataIds = $("#"+tabId).attr("data-ids");
+      //   if (dataIds){
+      //     ids = ids.concat(JSON.parse(dataIds));
+      //   }
+      // }
+      // addIdsTab("shiftselectedInstances");
+      // addIdsTab("allocatedselectedInstances");
+      ids.push($("#selectedInstances").attr("data-ids"));
+      ids = JSON.parse($("#selectedInstances").attr("data-ids"));
+      if (ids.length === 0) {
+        Swal.fire({
+          text: textMessage,
+          icon: "warning",
+          confirmButtonText: "Close",
+        });
+      } else {
+        Swal.fire({
+          text: confirmMessage,
+          icon: "info",
+          showCancelButton: true,
+          confirmButtonColor: "#008000",
+          cancelButtonColor: "#d33",
+          confirmButtonText: "Confirm",
+        }).then(function (result) {
+          if (result.isConfirmed) {
+            $.ajax({
+              type: "POST",
+              url: "/shift-request-bulk-cancel",
+              data: {
+                csrfmiddlewaretoken: getCookie("csrftoken"),
+                ids: JSON.stringify(ids),
+              },
+              success: function (response, textStatus, jqXHR) {
+                if (jqXHR.status === 200) {
+                  location.reload(); // Reload the current page
+                } else {
+                  // console.log("Unexpected HTTP status:", jqXHR.status);
+                }
+              },
+            });
+          }
+        });
+      }
+    });
+  }
+  
+  function shiftRequestDelete() {
+    
+  
+    var languageCode = null;
+    getCurrentLanguageCode(function (code) {
+      languageCode = code;
+      var confirmMessage = shiftDeleteRequestMessages[languageCode];
+      var textMessage = norowMessagesShift[languageCode];
+      ids = [];
+      // function addIdsTab(tabId){
+      //   var dataIds = $("#"+tabId).attr("data-ids");
+      //   if (dataIds){
+      //     ids = ids.concat(JSON.parse(dataIds));
+      //   }
+      // }
+      // addIdsTab("shiftselectedInstances");
+      // addIdsTab("allocatedselectedInstances");
+      ids.push($("#selectedInstances").attr("data-ids"));
+      ids = JSON.parse($("#selectedInstances").attr("data-ids"));
+      if (ids.length === 0) {
+        Swal.fire({
+          text: textMessage,
+          icon: "warning",
+          confirmButtonText: "Close",
+        });
+      } else {
+        Swal.fire({
+          text: confirmMessage,
+          icon: "error",
+          showCancelButton: true,
+          confirmButtonColor: "#008000",
+          cancelButtonColor: "#d33",
+          confirmButtonText: "Confirm",
+        }).then(function (result) {
+          if (result.isConfirmed) {
+            $.ajax({
+              type: "POST",
+              url: "/shift-request-bulk-delete",
+              data: {
+                csrfmiddlewaretoken: getCookie("csrftoken"),
+                ids: JSON.stringify(ids),
+              },
+              success: function (response, textStatus, jqXHR) {
+                if (jqXHR.status === 200) {
+                  location.reload(); // Reload the current page
+                } else {
+                  // console.log("Unexpected HTTP status:", jqXHR.status);
+                }
+              },
+            });
+          }
+        });
+      }
+    });
+  }
+
+  
+ function archiveRotateShift() {
+    var languageCode = null;
+    getCurrentLanguageCode(function (code) {
+      languageCode = code;
+      var confirmMessage = archiveMessages[languageCode];
+      var textMessage = norowMessages[languageCode];
+      ids = [];
+      ids.push($("#selectedInstances").attr("data-ids"));
+      ids = JSON.parse($("#selectedInstances").attr("data-ids"));
+      if (ids.length === 0) {
+        Swal.fire({
+          text: textMessage,
+          icon: "warning",
+          confirmButtonText: "Close",
+        });
+      } else {
+        Swal.fire({
+          text: confirmMessage,
+          icon: "info",
+          showCancelButton: true,
+          confirmButtonColor: "#008000",
+          cancelButtonColor: "#d33",
+          confirmButtonText: "Confirm",
+        }).then(function (result) {
+          if (result.isConfirmed) {
+            ids = [];
+            ids.push($("#selectedInstances").attr("data-ids"));
+            ids = JSON.parse($("#selectedInstances").attr("data-ids"));
+            $.ajax({
+              type: "POST",
+              url: "/rotating-shift-assign-bulk-archive?is_active=False",
+              data: {
+                csrfmiddlewaretoken: getCookie("csrftoken"),
+                ids: JSON.stringify(ids),
+              },
+              success: function (response, textStatus, jqXHR) {
+                if (jqXHR.status === 200) {
+                  location.reload(); // Reload the current page
+                } else {
+                  // console.log("Unexpected HTTP status:", jqXHR.status);
+                }
+              },
+            });
+          }
+        });
+      }
+    });
+  };
+  
+  function un_archiveRotateShift() {
+   
+  
+    var languageCode = null;
+    getCurrentLanguageCode(function (code) {
+      languageCode = code;
+      var confirmMessage = unarchiveMessages[languageCode];
+      var textMessage = norowMessages[languageCode];
+      ids = [];
+      ids.push($("#selectedInstances").attr("data-ids"));
+      ids = JSON.parse($("#selectedInstances").attr("data-ids"));
+      if (ids.length === 0) {
+        Swal.fire({
+          text: textMessage,
+          icon: "warning",
+          confirmButtonText: "Close",
+        });
+      } else {
+        Swal.fire({
+          text: confirmMessage,
+          icon: "info",
+          showCancelButton: true,
+          confirmButtonColor: "#008000",
+          cancelButtonColor: "#d33",
+          confirmButtonText: "Confirm",
+        }).then(function (result) {
+          if (result.isConfirmed) {
+            ids = [];
+            ids.push($("#selectedInstances").attr("data-ids"));
+            ids = JSON.parse($("#selectedInstances").attr("data-ids"));
+            $.ajax({
+              type: "POST",
+              url: "/rotating-shift-assign-bulk-archive?is_active=True",
+              data: {
+                csrfmiddlewaretoken: getCookie("csrftoken"),
+                ids: JSON.stringify(ids),
+              },
+              success: function (response, textStatus, jqXHR) {
+                if (jqXHR.status === 200) {
+                  location.reload(); // Reload the current page
+                } else {
+                  // console.log("Unexpected HTTP status:", jqXHR.status);
+                }
+              },
+            });
+          }
+        });
+      }
+    });
+  };
+  
+  function deleteRotatingShift() {
+    
+  
+    var languageCode = null;
+    getCurrentLanguageCode(function (code) {
+      languageCode = code;
+      var confirmMessage = shiftDeleteRequestMessages[languageCode];
+      var textMessage = norowMessages[languageCode];
+      ids = [];
+      ids.push($("#selectedInstances").attr("data-ids"));
+      ids = JSON.parse($("#selectedInstances").attr("data-ids"));
+      if (ids.length === 0) {
+        Swal.fire({
+          text: textMessage,
+          icon: "warning",
+          confirmButtonText: "Close",
+        });
+      } else {
+        Swal.fire({
+          text: confirmMessage,
+          icon: "error",
+          showCancelButton: true,
+          confirmButtonColor: "#008000",
+          cancelButtonColor: "#d33",
+          confirmButtonText: "Confirm",
+        }).then(function (result) {
+          if (result.isConfirmed) {
+            ids = [];
+            ids.push($("#selectedInstances").attr("data-ids"));
+            ids = JSON.parse($("#selectedInstances").attr("data-ids"));
+            $.ajax({
+              type: "POST",
+              url: "/rotating-shift-assign-bulk-delete",
+              data: {
+                csrfmiddlewaretoken: getCookie("csrftoken"),
+                ids: JSON.stringify(ids),
+              },
+              success: function (response, textStatus, jqXHR) {
+                if (jqXHR.status === 200) {
+                  location.reload(); // Reload the current page
+                } else {
+                  // console.log("Unexpected HTTP status:", jqXHR.status);
+                }
+              },
+            });
+          }
+        });
+      }
+    });
+  };
+  
\ No newline at end of file
diff --git a/base/static/cbv/work_type_request/work_request_bulk_action.js b/base/static/cbv/work_type_request/work_request_bulk_action.js
new file mode 100644
index 000000000..ad4653a97
--- /dev/null
+++ b/base/static/cbv/work_type_request/work_request_bulk_action.js
@@ -0,0 +1,433 @@
+var excelMessages = {
+    ar: "هل ترغب في تنزيل ملف Excel؟",
+    de: "Möchten Sie die Excel-Datei herunterladen?",
+    es: "¿Desea descargar el archivo de Excel?",
+    en: "Do you want to download the excel file?",
+    fr: "Voulez-vous télécharger le fichier Excel?",
+  };
+  
+  var archiveMessages = {
+    ar: "هل ترغب حقًا في أرشفة كل الحضور المحدد؟",
+    de: "Möchten Sie wirklich alle ausgewählten Anwesenheiten archivieren?",
+    es: "Realmente quieres archivar todas las asistencias seleccionadas?",
+    en: "Do you really want to archive all the selected allocations?",
+    fr: "Voulez-vous vraiment archiver toutes les présences sélectionnées?",
+  };
+  
+  var unarchiveMessages = {
+    ar: "هل ترغب حقًا في إلغاء أرشفة كل الحضور المحددة؟",
+    de: "Möchten Sie wirklich alle ausgewählten archivierten Zuweisungen wiederherstellen?",
+    es: "Realmente quieres desarchivar todas las asignaciones seleccionadas?",
+    en: "Do you really want to un-archive all the selected allocations?",
+    fr: "Voulez-vous vraiment désarchiver toutes les allocations sélectionnées?",
+  };
+  
+  var rotatedeleteRequestMessages = {
+    ar: "هل ترغب حقًا في حذف كل الحجوزات المحددة؟",
+    de: "Möchten Sie wirklich alle ausgewählten Zuweisungen löschen?",
+    es: "Realmente quieres eliminar todas las asignaciones seleccionadas?",
+    en: "Do you really want to delete all the selected Requests?",
+    fr: "Voulez-vous vraiment supprimer toutes les allocations sélectionnées?",
+  };
+  
+  var approveMessages = {
+    ar: "هل ترغب حقًا في الموافقة على جميع الطلبات المحددة؟",
+    de: "Möchten Sie wirklich alle ausgewählten Anfragen genehmigen?",
+    es: "Realmente quieres aprobar todas las solicitudes seleccionadas?",
+    en: "Do you really want to approve all the selected requests?",
+    fr: "Voulez-vous vraiment approuver toutes les demandes sélectionnées?",
+  };
+  var rejectMessages = {
+    ar: "هل تريد حقًا رفض جميع الطلبات المحددة؟",
+    de: "Möchten Sie wirklich alle ausgewählten Anfragen ablehnen?",
+    es: "¿Realmente deseas rechazar todas las solicitudes seleccionadas?",
+    en: "Do you really want to reject all the selected requests?",
+    fr: "Voulez-vous vraiment rejeter toutes les demandes sélectionnées?",
+  };
+  var requestDeleteMessages = {
+    ar: "هل ترغب حقًا في حذف جميع الطلبات المحددة؟",
+    de: "Möchten Sie wirklich alle ausgewählten Anfragen löschen?",
+    es: "Realmente quieres eliminar todas las solicitudes seleccionadas?",
+    en: "Do you really want to delete all the selected requests?",
+    fr: "Voulez-vous vraiment supprimer toutes les demandes sélectionnées?",
+  };
+  var norowMessages = {
+    ar: "لم يتم تحديد أي صفوف.",
+    de: "Es wurden keine Zeilen ausgewählt.",
+    es: "No se han seleccionado filas.",
+    en: "No rows have been selected.",
+    fr: "Aucune ligne n'a été sélectionnée.",
+  };
+  var rowMessages = {
+    ar: " تم الاختيار",
+    de: " Ausgewählt",
+    es: " Seleccionado",
+    en: " Selected",
+    fr: " Sélectionné",
+  };
+  
+  tickShiftCheckboxes();
+  function makeShiftListUnique(list) {
+    return Array.from(new Set(list));
+  }
+  
+  tickWorktypeCheckboxes();
+  function makeWorktypeListUnique(list) {
+    return Array.from(new Set(list));
+  }
+  
+  tickRShiftCheckboxes();
+  function makeRShiftListUnique(list) {
+    return Array.from(new Set(list));
+  }
+  
+  tickRWorktypeCheckboxes();
+  function makeRWorktypeListUnique(list) {
+    return Array.from(new Set(list));
+  }
+  
+  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();
+        // Does this cookie string begin with the name we want?
+        if (cookie.substring(0, name.length + 1) === name + "=") {
+          cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
+          break;
+        }
+      }
+    }
+    return cookieValue;
+  }
+  
+  function getCurrentLanguageCode(callback) {
+    var languageCode = $("#main-section-data").attr("data-lang");
+    var allowedLanguageCodes = ["ar", "de", "es", "en", "fr"];
+    if (allowedLanguageCodes.includes(languageCode)) {
+      callback(languageCode);
+    } else {
+      $.ajax({
+        type: "GET",
+        url: "/employee/get-language-code/",
+        success: function (response) {
+          var ajaxLanguageCode = response.language_code;
+          $("#main-section-data").attr("data-lang", ajaxLanguageCode);
+          callback(
+            allowedLanguageCodes.includes(ajaxLanguageCode)
+              ? ajaxLanguageCode
+              : "en"
+          );
+        },
+        error: function () {
+          callback("en");
+        },
+      });
+    }
+  }
+  
+
+  function handleApproveRequestsClick() {
+     // e.preventDefault();
+     var languageCode = null;
+     getCurrentLanguageCode(function (code) {
+       languageCode = code;
+       var confirmMessage = approveMessages[languageCode];
+       var textMessage = norowMessages[languageCode];
+       ids = [];
+       ids.push($("#selectedInstances").attr("data-ids"));
+       ids = JSON.parse($("#selectedInstances").attr("data-ids"));
+       if (ids.length === 0) {
+         Swal.fire({
+           text: textMessage,
+           icon: "warning",
+           confirmButtonText: "Close",
+         });
+       } else {
+         Swal.fire({
+           text: confirmMessage,
+           icon: "success",
+           showCancelButton: true,
+           confirmButtonColor: "#008000",
+           cancelButtonColor: "#d33",
+           confirmButtonText: "Confirm",
+         }).then(function (result) {
+           if (result.isConfirmed) {
+             ids = [];
+             ids.push($("#selectedInstances").attr("data-ids"));
+             ids = JSON.parse($("#selectedInstances").attr("data-ids"));
+             $.ajax({
+               type: "POST",
+               url: "/work-type-request-bulk-approve",
+               data: {
+                 csrfmiddlewaretoken: getCookie("csrftoken"),
+                 ids: JSON.stringify(ids),
+               },
+               success: function (response, textStatus, jqXHR) {
+                 if (jqXHR.status === 200) {
+                   location.reload(); // Reload the current page
+                 } else {
+                   // console.log("Unexpected HTTP status:", jqXHR.status);
+                 }
+               },
+             });
+           }
+         });
+       }
+     });
+    }
+  
+  
+  
+function handleRejectRequestsClick() {
+    var languageCode = null;
+    getCurrentLanguageCode(function (code) {
+      languageCode = code;
+      var confirmMessage = rejectMessages[languageCode];
+      var textMessage = norowMessages[languageCode];
+      ids = [];
+      ids.push($("#selectedInstances").attr("data-ids"));
+      ids = JSON.parse($("#selectedInstances").attr("data-ids"));
+      if (ids.length === 0) {
+        Swal.fire({
+          text: textMessage,
+          icon: "warning",
+          confirmButtonText: "Close",
+        });
+      } else {
+        Swal.fire({
+          text: confirmMessage,
+          icon: "warning",
+          showCancelButton: true,
+          confirmButtonColor: "#008000",
+          cancelButtonColor: "#d33",
+          confirmButtonText: "Confirm",
+        }).then(function (result) {
+          if (result.isConfirmed) {
+            console.log("hello")
+            ids = [];
+            ids.push($("#selectedInstances").attr("data-ids"));
+            ids = JSON.parse($("#selectedInstances").attr("data-ids"));
+            $.ajax({
+              type: "POST",
+              url: "/work-type-request-bulk-cancel",
+              data: {
+                csrfmiddlewaretoken: getCookie("csrftoken"),
+                ids: JSON.stringify(ids),
+              },
+              success: function (response, textStatus, jqXHR) {
+                if (jqXHR.status === 200) {
+                  location.reload(); // Reload the current page
+                } else {
+                  // console.log("Unexpected HTTP status:", jqXHR.status);
+                }
+              },
+            });
+          }
+        });
+      }
+    });
+  }
+  
+  function handleDeleteRequestsClick() {
+    var languageCode = null;
+  getCurrentLanguageCode(function (code) {
+    languageCode = code;
+    var confirmMessage = rotatedeleteRequestMessages[languageCode];
+    var textMessage = norowMessages[languageCode];
+    ids = [];
+    ids.push($("#selectedInstances").attr("data-ids"));
+    ids = JSON.parse($("#selectedInstances").attr("data-ids"));
+    if (ids.length === 0) {
+      Swal.fire({
+        text: textMessage,
+        icon: "warning",
+        confirmButtonText: "Close",
+      });
+    } else {
+      Swal.fire({
+        text: confirmMessage,
+        icon: "error",
+        showCancelButton: true,
+        confirmButtonColor: "#008000",
+        cancelButtonColor: "#d33",
+        confirmButtonText: "Confirm",
+      }).then(function (result) {
+        if (result.isConfirmed) {
+          ids = [];
+          ids.push($("#selectedInstances").attr("data-ids"));
+          ids = JSON.parse($("#selectedInstances").attr("data-ids"));
+          $.ajax({
+            type: "POST",
+            url: "/work-type-request-bulk-delete",
+            data: {
+              csrfmiddlewaretoken: getCookie("csrftoken"),
+              ids: JSON.stringify(ids),
+            },
+            success: function (response, textStatus, jqXHR) {
+              if (jqXHR.status === 200) {
+                location.reload(); // Reload the current page
+              } else {
+                // console.log("Unexpected HTTP status:", jqXHR.status);
+              }
+            },
+          });
+        }
+      });
+    }
+  });
+  }
+
+  //scripts for rotating work type page
+  //bulk archive in rotate work type
+  $(document).on('click', '#archiveWorkRotateNav', function(e) {
+
+    e.preventDefault();
+    var languageCode = null;
+    getCurrentLanguageCode(function (code) {
+      languageCode = code;
+      var confirmMessage = archiveMessages[languageCode];
+      var textMessage = norowMessages[languageCode];
+      ids = [];
+      ids.push($("#selectedInstances").attr("data-ids"));
+      ids = JSON.parse($("#selectedInstances").attr("data-ids"));
+      if (ids.length === 0) {
+        Swal.fire({
+          text: textMessage,
+          icon: "warning",
+          confirmButtonText: "Close",
+        });
+      } else {
+        Swal.fire({
+          text: confirmMessage,
+          icon: "info",
+          showCancelButton: true,
+          confirmButtonColor: "#008000",
+          cancelButtonColor: "#d33",
+          confirmButtonText: "Confirm",
+        }).then(function (result) {
+          if (result.isConfirmed) {
+            ids = [];
+            ids.push($("#selectedInstances").attr("data-ids"));
+            ids = JSON.parse($("#selectedInstances").attr("data-ids"));
+            $.ajax({
+              type: "POST",
+              url: "/rotating-work-type-assign-bulk-archive?is_active=False",
+              data: {
+                csrfmiddlewaretoken: getCookie("csrftoken"),
+                ids: JSON.stringify(ids),
+              },
+              success: function (response, textStatus, jqXHR) {
+                if (jqXHR.status === 200) {
+                  location.reload(); // Reload the current page
+                } else {
+                  // console.log("Unexpected HTTP status:", jqXHR.status);
+                }
+              },
+            });
+          }
+        });
+      }
+    });
+  });
+
+
+  function UnarchiveWorkRotateNav() {
+    getCurrentLanguageCode(function (code) {
+      languageCode = code;
+      var confirmMessage = unarchiveMessages[languageCode];
+      var textMessage = norowMessages[languageCode];
+      ids = [];
+      ids.push($("#selectedInstances").attr("data-ids"));
+      ids = JSON.parse($("#selectedInstances").attr("data-ids"));
+      if (ids.length === 0) {
+        Swal.fire({
+          text: textMessage,
+          icon: "warning",
+          confirmButtonText: "Close",
+        });
+      } else {
+        Swal.fire({
+          text: confirmMessage,
+          icon: "info",
+          showCancelButton: true,
+          confirmButtonColor: "#008000",
+          cancelButtonColor: "#d33",
+          confirmButtonText: "Confirm",
+        }).then(function (result) {
+          if (result.isConfirmed) {
+            ids = [];
+            ids.push($("#selectedInstances").attr("data-ids"));
+            ids = JSON.parse($("#selectedInstances").attr("data-ids"));
+            $.ajax({
+              type: "POST",
+              url: "/rotating-work-type-assign-bulk-archive?is_active=True",
+              data: {
+                csrfmiddlewaretoken: getCookie("csrftoken"),
+                ids: JSON.stringify(ids),
+              },
+              success: function (response, textStatus, jqXHR) {
+                if (jqXHR.status === 200) {
+                  location.reload(); // Reload the current page
+                } else {
+                  // console.log("Unexpected HTTP status:", jqXHR.status);
+                }
+              },
+            });
+          }
+        });
+      }
+    });
+  }
+
+  function deleteWorkRotateNav() {
+  
+    var languageCode = null;
+    getCurrentLanguageCode(function (code) {
+      languageCode = code;
+      var confirmMessage = rotatedeleteRequestMessages[languageCode];
+      var textMessage = norowMessages[languageCode];
+      ids = [];
+      ids.push($("#selectedInstances").attr("data-ids"));
+      ids = JSON.parse($("#selectedInstances").attr("data-ids"));
+      if (ids.length === 0) {
+        Swal.fire({
+          text: textMessage,
+          icon: "warning",
+          confirmButtonText: "Close",
+        });
+      } else {
+        Swal.fire({
+          text: confirmMessage,
+          icon: "error",
+          showCancelButton: true,
+          confirmButtonColor: "#008000",
+          cancelButtonColor: "#d33",
+          confirmButtonText: "Confirm",
+        }).then(function (result) {
+          if (result.isConfirmed) {
+            ids = [];
+            ids.push($("#selectedInstances").attr("data-ids"));
+            ids = JSON.parse($("#selectedInstances").attr("data-ids"));
+            $.ajax({
+              type: "POST",
+              url: "/rotating-work-type-assign-bulk-delete",
+              data: {
+                csrfmiddlewaretoken: getCookie("csrftoken"),
+                ids: JSON.stringify(ids),
+              },
+              success: function (response, textStatus, jqXHR) {
+                if (jqXHR.status === 200) {
+                  location.reload(); // Reload the current page
+                } else {
+                  // console.log("Unexpected HTTP status:", jqXHR.status);
+                }
+              },
+            });
+          }
+        });
+      }
+    });
+  }
+
diff --git a/base/static/holiday/action.js b/base/static/holiday/action.js
index 5c833923a..86ebe454e 100644
--- a/base/static/holiday/action.js
+++ b/base/static/holiday/action.js
@@ -325,7 +325,7 @@ $("#bulkHolidaysDelete").click(function (e) {
   });
 });
 
-$(".holidaysInfoImport").click(function (e) {
+$(document).on("click", "#holidaysInfoImport", function (e) {
   e.preventDefault();
   var languageCode = null;
   getCurrentLanguageCode(function (code) {
diff --git a/base/templates/base/action_type/action_type.html b/base/templates/base/action_type/action_type.html
index c818c40f6..29ecfc985 100644
--- a/base/templates/base/action_type/action_type.html
+++ b/base/templates/base/action_type/action_type.html
@@ -1,33 +1,39 @@
 {% extends 'settings.html' %}
 {% load i18n %}
 {% block settings %}{% load static %}
+{% include "generic/components.html" %}
+<meta name="csrf-token" content="{{ csrf_token }}">
+
 <div class="oh-inner-sidebar-content">
-	<div class="oh-inner-sidebar-content__header d-flex justify-content-between align-items-center">
-		<h2 class="oh-inner-sidebar-content__title">{% trans "Action Type" %}</h2>
-		{% if perms.employee.add_actiontype %}
-		<button class="oh-btn oh-btn--secondary oh-btn--shadow"
-			data-toggle="oh-modal-toggle"
-			data-target="#objectCreateModal"
-			hx-get="{% url 'action-type-create' %}"
-			hx-target="#objectCreateModalTarget"
-			>
-			<ion-icon name="add-outline" class="me-1"></ion-icon>
-			{% trans "Create" %}
-		</button>
-		{% endif %}
+	<div hx-get="{% url 'action-type-nav' %}" hx-trigger="load"></div>
+	<div class="oh-checkpoint-badge mb-2" id="selectedInstances" data-ids="[]" data-clicked="" style="display: none"></div>
+	<div class="oh-wrapper"  id="listContainer">
+		<div class="animated-background"> </div>
 	</div>
-	{% if action_types %}
-		<div id="actionTypes">
-			{% include 'base/action_type/action_type_view.html' %}
+	{% comment %}
+		<div class="oh-inner-sidebar-content__header d-flex justify-content-between align-items-center">
+			<h2 class="oh-inner-sidebar-content__title">{% trans "Action Type" %}</h2>
+			{% if perms.employee.add_actiontype %}
+			<button class="oh-btn oh-btn--secondary oh-btn--shadow" data-toggle="oh-modal-toggle"
+				data-target="#objectCreateModal" hx-get="{% url 'action-type-create' %}"
+				hx-target="#objectCreateModalTarget">
+				<ion-icon name="add-outline" class="me-1"></ion-icon>
+				{% trans "Create" %}
+			</button>
+			{% endif %}
 		</div>
-	{% else %}
+		{% if action_types %}
+		{% include 'base/action_type/action_type_view.html' %}
+		{% else %}
 		<div style="display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%;">
-			<img style="display: block; width: 15%; margin: 20px auto; filter: opacity(0.5);" src="{% static 'images/ui/legal.png' %}" class="" alt="Page not found. 404." />
+			<img style="display: block; width: 15%; margin: 20px auto; filter: opacity(0.5);"
+				src="{% static 'images/ui/legal.png' %}" class="" alt="Page not found. 404." />
 			<h5 class="oh-404__subtitle">{% trans "There is no disciplinary action type at this moment." %}</h5>
 		</div>
-	{% endif %}
+		{% endif %}
+	{% endcomment %}
 </div>
-
+<script src="{% static 'cbv/deleteFunc.js' %}"></script>
 <script>
 	function actionChange(selectElement) {
 		var selectedActiontype = selectElement.val();
@@ -43,15 +49,50 @@
 
 				// Check if the response.action_type is "warning"
 				if (response.action_type === "warning") {
-					// Hide the 'block_option' field
-					parentForm.find('[id=id_block_option]').parent().hide();
-				} else {
-					// Show the 'block_option' field
-					parentForm.find('[id=id_block_option]').parent().show();
-				}
 
+					// Hide the 'block_option' field
+					//parentForm.find('[id=id_block_option]').parent().hide();
+					parentForm.find('[id=id_block_option_parent_div]').hide();
+				} else {
+					var hiddenInput = document.querySelector('input[type="hidden"][name="block_option"]');
+					if (hiddenInput) {
+						var parentDiv = document.createElement('div');
+						parentDiv.className = 'col-12 col-md-6';
+						parentDiv.id = 'id_block_option_parent_div';
+						parentDiv.style.paddingRight = '0';
+						var labelInfoDiv = document.createElement('div');
+						labelInfoDiv.className = 'oh-label__info';
+						var label = document.createElement('label');
+						label.className = 'oh-label';
+						label.htmlFor = 'id_block_option';
+						label.textContent = 'Enable login block :';
+						var infoSpan = document.createElement('span');
+						infoSpan.className = 'oh-info mr-2';
+						infoSpan.title = 'If is enabled, employees log in will be blocked based on period of suspension or dismissal.';
+						labelInfoDiv.appendChild(label);
+						labelInfoDiv.appendChild(infoSpan);
+						var switchDiv = document.createElement('div');
+						switchDiv.className = 'oh-switch';
+						switchDiv.style.width = '30px';
+						var checkbox = document.createElement('input');
+						checkbox.type = 'checkbox';
+						checkbox.name = 'block_option';
+						checkbox.className = 'oh-switch__checkbox oh-switch__checkbox';
+						checkbox.id = 'id_block_option';
+						checkbox.checked = hiddenInput.value === 'True';
+						switchDiv.appendChild(checkbox);
+						parentDiv.appendChild(labelInfoDiv);
+						parentDiv.appendChild(switchDiv);
+						hiddenInput.parentNode.replaceChild(parentDiv, hiddenInput);
+					}
+					parentForm.find('[id=id_block_option_parent_div]').show();
+					// Show the 'block_option' field
+					//parentForm.find('[id=id_block_option]').parent().show();
+				}
 			},
 		});
-	  }
+	}
+
+
 </script>
 {% endblock settings %}
diff --git a/base/templates/base/auth/permission_lines.html b/base/templates/base/auth/permission_lines.html
index 82e6d8ab1..d4aedc5a3 100644
--- a/base/templates/base/auth/permission_lines.html
+++ b/base/templates/base/auth/permission_lines.html
@@ -1,6 +1,6 @@
 {% load basefilters i18n %}
 {% for employee in employees %}
-  <div class="oh-user_permission-list_item perm-accordion exclude-accordion-style" onclick="$(this).next().toggle();$(this).toggleClass('perm-accordion-active');">
+  <div class="oh-user_permission-list_item perm-accordion exclude-accordion-style" onclick="$(this).next().toggle();$(this).toggleClass('perm-accordion-active');$(this).next().find('.oh-general__tab-target').removeClass('d-none');">
     <div class="oh-user_permission-list_profile">
       <div class="oh-navbar__user-photo oh-user_permission--profile">
         <img src="{{ employee.get_avatar }}" class="oh-navbar__user-image" loading="lazy" />
diff --git a/base/templates/base/company/company.html b/base/templates/base/company/company.html
index 0515829f7..e3d842726 100644
--- a/base/templates/base/company/company.html
+++ b/base/templates/base/company/company.html
@@ -1,4 +1,7 @@
 {% extends 'settings.html' %} {% load i18n %} {% block settings %}{% load static %}
+{% include "generic/components.html" %}
+<meta name="csrf-token" content="{{ csrf_token }}">
+
 <div class="oh-inner-sidebar-content">
 	{% if perms.base.view_company %}
 		<div
diff --git a/base/templates/base/department/department.html b/base/templates/base/department/department.html
index 5bc035b39..2d64054e9 100644
--- a/base/templates/base/department/department.html
+++ b/base/templates/base/department/department.html
@@ -1,7 +1,11 @@
 {% extends 'settings.html' %} {% load i18n %} {% block settings %} {% load static %}
+{% include "generic/components.html" %}
+<meta name="csrf-token" content="{{ csrf_token }}">
+
 <div class="oh-inner-sidebar-content">
     {% if perms.base.view_department %}
-        <div class="oh-inner-sidebar-content__header d-flex justify-content-between align-items-center">
+        <div hx-get="{% url 'department-nav' %}" hx-trigger="load"></div>
+        {% comment %} <div class="oh-inner-sidebar-content__header d-flex justify-content-between align-items-center">
             <h2 class="oh-inner-sidebar-content__title">{% trans "Department" %}</h2>
             {% if perms.base.add_department %}
                 <button class="oh-btn oh-btn--secondary oh-btn--shadow" data-toggle="oh-modal-toggle"
@@ -11,8 +15,12 @@
                     {% trans "Create" %}
                 </button>
             {% endif %}
+        </div> {% endcomment %}
+        <div class="oh-checkpoint-badge mb-2" id="selectedInstances" data-ids="[]" data-clicked="" style="display: none"></div>
+        <div class="oh-wrapper" id="listContainer">
+            <div class="animated-background"></div>
         </div>
-        {% if departments %}
+        {% comment %} {% if departments %}
             {% include 'base/department/department_view.html' %}
         {% else %}
             <div style="display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%;">
@@ -20,7 +28,7 @@
                     src="{% static 'images/ui/connection.png' %}" class="" alt="Page not found. 404." />
                 <h5 class="oh-404__subtitle">{% trans "There is no department at this moment." %}</h5>
             </div>
-        {% endif %}
+        {% endif %} {% endcomment %}
     {% endif %}
 </div>
 {% endblock settings %}
diff --git a/base/templates/base/employee_type/employee_type.html b/base/templates/base/employee_type/employee_type.html
index a86fbf644..f5d37c611 100644
--- a/base/templates/base/employee_type/employee_type.html
+++ b/base/templates/base/employee_type/employee_type.html
@@ -1,43 +1,40 @@
 {% extends 'settings.html' %} {% load i18n %} {% block settings %} {% load static %}
+{% include "generic/components.html" %}
+<meta name="csrf-token" content="{{ csrf_token }}">
+
 <div class="oh-inner-sidebar-content">
-  {% if perms.base.view_employeetype %}
-  <div
-    class="oh-inner-sidebar-content__header d-flex justify-content-between align-items-center"
-  >
-    <h2 class="oh-inner-sidebar-content__title">{% trans "Employee Type" %}</h2>
-    {% if perms.base.add_employeetype %}
-    <button
-      class="oh-btn oh-btn--secondary oh-btn--shadow"
-      data-toggle="oh-modal-toggle"
-      data-target="#employeeTypeModal"
-      hx-get="{% url 'employee-type-create' %}"
-      hx-target="#employeeTypeForm"
-    >
-      <ion-icon name="add-outline" class="me-1"></ion-icon>
-      {% trans "Create" %}
-    </button>
+    {% if perms.base.view_employeetype %}
+        <div hx-get="{% url 'employee-type-nav' %}" hx-trigger="load"></div>
+        <div class="oh-checkpoint-badge mb-2" id="selectedInstances" data-ids="[]" data-clicked="" style="display: none"></div>
+        <div class="oh-wrapper"  id="listContainer">
+            <div class="animated-background"></div>
+        </div>
     {% endif %}
-  </div>
-    {% if employee_types %}
-      {% include 'base/employee_type/type_view.html' %}
-		{% else %}
-			<div style="display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%;">
-				<img style="display: block; width: 15%; margin: 20px auto; filter: opacity(0.5);" src="{% static 'images/ui/employee_type.png' %}" class="" alt="Page not found. 404." />
-				<h5 class="oh-404__subtitle">{% trans "There is no employee type at this moment." %}</h5>
-			</div>
-		{% endif %}
-
-  {% endif %}
+    {% comment %}
+        <div class="oh-inner-sidebar-content__header d-flex justify-content-between align-items-center">
+        <h2 class="oh-inner-sidebar-content__title">{% trans "Employee Type" %}</h2>
+        {% if perms.base.add_employeetype %}
+            <button class="oh-btn oh-btn--secondary oh-btn--shadow" data-toggle="oh-modal-toggle"
+                data-target="#employeeTypeModal" hx-get="{% url 'employee-type-create' %}" hx-target="#employeeTypeForm">
+                <ion-icon name="add-outline" class="me-1"></ion-icon>
+                {% trans "Create" %}
+            </button>
+        {% endif %}
+        </div>
+        {% if employee_types %}
+            {% include 'base/employee_type/type_view.html' %}
+        {% else %}
+            <div style="display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%;">
+                <img style="display: block; width: 15%; margin: 20px auto; filter: opacity(0.5);"
+                    src="{% static 'images/ui/employee_type.png' %}" class="" alt="Page not found. 404." />
+                <h5 class="oh-404__subtitle">{% trans "There is no employee type at this moment." %}</h5>
+            </div>
+        {% endif %}
+    {% endcomment %}
 </div>
 
-<div
-  class="oh-modal"
-  id="employeeTypeModal"
-  role="dialog"
-  aria-labelledby="employeeTypeModal"
-  aria-hidden="true"
->
-  <div class="oh-modal__dialog" id="employeeTypeForm"></div>
+<div class="oh-modal" id="employeeTypeModal" role="dialog" aria-labelledby="employeeTypeModal" aria-hidden="true">
+    <div class="oh-modal__dialog" id="employeeTypeForm"></div>
 </div>
-
+<script src="{% static 'cbv/deleteFunc.js' %}"></script>
 {% endblock settings %}
diff --git a/base/templates/base/job_position/job_position.html b/base/templates/base/job_position/job_position.html
index 8bf239601..ded7ac251 100644
--- a/base/templates/base/job_position/job_position.html
+++ b/base/templates/base/job_position/job_position.html
@@ -1,40 +1,49 @@
 {% extends 'settings.html' %} {% load i18n %} {% block settings %} {% load static %}
+{% include "generic/components.html" %}
+<style>
+	.select2-selection--single {
+		height: 45px !important;
+	}
+
+	.select2-selection--single>.select2-selection__rendered {
+		line-height: 45px !important;
+	}
+</style>
+<meta name="csrf-token" content="{{ csrf_token }}">
+
 <div class="oh-inner-sidebar-content">
 	{% if perms.base.view_jobposition %}
-	<div class="oh-inner-sidebar-content__header d-flex justify-content-between align-items-center">
-		<h2 class="oh-inner-sidebar-content__title">{% trans "Job Position" %}</h2>
-		{% if perms.base.add_jobposition %}
-		<button
-			class="oh-btn oh-btn--secondary oh-btn--shadow"
-			data-toggle="oh-modal-toggle"
-			data-target="#jobPositionModal"
-			hx-get="{% url 'job-position-creation' %}"
-			hx-target="#jobPositionForm"
-		>
-			<ion-icon name="add-outline" class="me-1"></ion-icon>
-			{% trans "Create" %}
-		</button>
-		{% endif %}
-	</div>
-		{% if jobs %}
-			{% include 'base/job_position/job_position_view.html' %}
-		{% else %}
-			<div style="display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%;">
-				<img style="display: block; width: 15%; margin: 20px auto; filter: opacity(0.5);" src="{% static 'images/ui/job-position.png' %}" class="" alt="Page not found. 404." />
-				<h5 class="oh-404__subtitle">{% trans "There is no job positions at this moment." %}</h5>
-			</div>
-		{% endif %}
+		<div hx-get="{% url 'job-position-navbar' %}" hx-trigger="load"></div>
+		{% comment %}
+			<div class="oh-inner-sidebar-content__header d-flex justify-content-between align-items-center">
+			<h2 class="oh-inner-sidebar-content__title">{% trans "Job Position" %}</h2>
+
+			<button class="oh-btn oh-btn--secondary oh-btn--shadow" data-toggle="oh-modal-toggle"
+				data-target="#jobPositionModal" hx-get="{% url 'job-position-creation' %}" hx-target="#jobPositionForm">
+				<ion-icon name="add-outline" class="me-1"></ion-icon>
+				{% trans "Create" %}
+			</button>
+		{% endcomment %}
+		<div class="oh-checkpoint-badge mb-2" id="selectedInstances" data-ids="[]" data-clicked="" style="display: none"></div>
+		<div class="oh-wrapper" id="listContainer">
+			<div class="animated-background"></div>
+		</div>
+
+		{% comment %}
+			{% if jobs %}
+				{% include 'base/job_position/job_position_view.html' %}
+			{% else %}
+				<div style="display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%;">
+					<img style="display: block; width: 15%; margin: 20px auto; filter: opacity(0.5);"
+						src="{% static 'images/ui/job-position.png' %}" class="" alt="Page not found. 404." />
+					<h5 class="oh-404__subtitle">{% trans "There is no job positions at this moment." %}</h5>
+				</div>
+			{% endif %}
+		{% endcomment %}
 	{% endif %}
 </div>
-<div
-	class="oh-modal"
-	id="jobPositionModal"
-	role="dialog"
-	aria-labelledby="jobPositionModal"
-	aria-hidden="true"
-    >
-	<div class="oh-modal__dialog" id="jobPositionForm">
-	</div>
+<div class="oh-modal" id="jobPositionModal" role="dialog" aria-labelledby="jobPositionModal" aria-hidden="true">
+	<div class="oh-modal__dialog" id="jobPositionForm"></div>
 </div>
 
 {% endblock settings %}
diff --git a/base/templates/base/job_role/job_role.html b/base/templates/base/job_role/job_role.html
index 69bd1225e..2783fb209 100644
--- a/base/templates/base/job_role/job_role.html
+++ b/base/templates/base/job_role/job_role.html
@@ -1,40 +1,48 @@
 {% extends 'settings.html' %} {% load i18n %} {% block settings %} {% load static %}
+{% include "generic/components.html" %}
+<style>
+	.select2-selection--single {
+		height: 45px !important;
+	}
+
+	.select2-selection--single>.select2-selection__rendered {
+		line-height: 45px !important;
+	}
+</style>
 <div class="oh-inner-sidebar-content">
 	{% if perms.base.view_jobrole %}
-	<div class="oh-inner-sidebar-content__header d-flex justify-content-between align-items-center">
-		<h2 class="oh-inner-sidebar-content__title">{% trans "Job Role" %}</h2>
-		{% if perms.base.add_jobrole %}
-        <button
-			class="oh-btn oh-btn--secondary oh-btn--shadow"
-			data-toggle="oh-modal-toggle"
-			data-target="#jobRoleModal"
-			hx-get="{% url 'job-role-create' %}"
-			hx-target="#jobRoleForm"
-		>
-			<ion-icon name="add-outline" class="me-1"></ion-icon>
-			{% trans "Create" %}
-		</button>
-		{% endif %}
-	</div>
-	{% if job_role %}
-		{% include 'base/job_role/job_role_view.html' %}
-	{% else %}
-		<div style="display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%;">
-			<img style="display: block; width: 15%; margin: 20px auto; filter: opacity(0.5);" src="{% static 'images/ui/job_role.png' %}" class="" alt="Page not found. 404." />
-			<h5 class="oh-404__subtitle">{% trans "There is no Job roles at this moment." %}</h5>
+		<div hx-get="{% url 'job-role-nav' %}" hx-trigger="load"></div>
+		{% comment %}
+			<div class="oh-inner-sidebar-content__header d-flex justify-content-between align-items-center">
+				<h2 class="oh-inner-sidebar-content__title">{% trans "Job Role" %}</h2>
+				{% if perms.base.add_jobrole %}
+				<button class="oh-btn oh-btn--secondary oh-btn--shadow" data-toggle="oh-modal-toggle"
+					data-target="#jobRoleModal" hx-get="{% url 'job-role-create' %}" hx-target="#jobRoleForm">
+					<ion-icon name="add-outline" class="me-1"></ion-icon>
+					{% trans "Create" %}
+				</button>
+				{% endif %}
+			</div>
+		{% endcomment %}
+		<div class="oh-checkpoint-badge mb-2" id="selectedInstances" data-ids="[]" data-clicked="" style="display: none"></div>
+		<div class="oh-wrapper"  id="listContainer">
+			<div class="animated-background"></div>
 		</div>
+		{% comment %}
+			{% if job_role %}
+				{% include 'base/job_role/job_role_view.html' %}
+			{% else %}
+				<div style="display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%;">
+					<img style="display: block; width: 15%; margin: 20px auto; filter: opacity(0.5);"
+						src="{% static 'images/ui/job_role.png' %}" class="" alt="Page not found. 404." />
+					<h5 class="oh-404__subtitle">{% trans "There is no Job roles at this moment." %}</h5>
+				</div>
+			{% endif %}
+		{% endcomment %}
 	{% endif %}
-    {% endif %}
-
 </div>
 
-<div
-	class="oh-modal"
-	id="jobRoleModal"
-	role="dialog"
-	aria-labelledby="jobRoleModal"
-	aria-hidden="true"
->
+<div class="oh-modal" id="jobRoleModal" role="dialog" aria-labelledby="jobRoleModal" aria-hidden="true">
 	<div class="oh-modal__dialog" id="jobRoleForm"> </div>
 </div>
 
diff --git a/base/templates/base/mail_server/mail_server.html b/base/templates/base/mail_server/mail_server.html
index b0d99782f..631669e24 100644
--- a/base/templates/base/mail_server/mail_server.html
+++ b/base/templates/base/mail_server/mail_server.html
@@ -1,4 +1,20 @@
 {% extends 'settings.html' %} {% load i18n %} {% block settings %}{% load static %}
+<style>
+	.alert {
+		position: relative;
+		padding: 0.75rem 1.25rem;
+		margin-bottom: 1rem;
+		border: 1px solid transparent;
+		border-radius: 0.25rem;
+	}
+
+	.alert-warning {
+		color: #856404;
+		background-color: #fff3cd;
+		border-color: #ffeeba;
+	}
+</style>
+{% include "generic/components.html" %}
 <div class="oh-inner-sidebar-content">
 	{% if perms.base.view_dynamicemailconfiguration %}
 		<div class="oh-inner-sidebar-content__header d-flex justify-content-between align-items-center">
diff --git a/base/templates/base/rotating_shift/htmx/add_more_shift_fields.html b/base/templates/base/rotating_shift/htmx/add_more_shift_fields.html
index f6d33251e..09a54f9b9 100644
--- a/base/templates/base/rotating_shift/htmx/add_more_shift_fields.html
+++ b/base/templates/base/rotating_shift/htmx/add_more_shift_fields.html
@@ -1,8 +1,9 @@
 {% load i18n %}
+
 <div
-  class="oh-input__group pt-3"
+  class="oh-input__group pt-2"
   id="{{ current_hx_target }}"
-  style="display: flex"
+  style="display: flex; padding-right: 0px;"
 >
   {{field_html}}
   <a
@@ -15,6 +16,7 @@
     <ion-icon name="trash-outline"></ion-icon>
   </a>
 </div>
+
 <div id="{{ next_hx_target }}" style="text-align: end">
   <a
     hx-target="#{{ next_hx_target }}"
diff --git a/base/templates/base/rotating_shift/rotating_shift.html b/base/templates/base/rotating_shift/rotating_shift.html
index 2cfacf7c1..fe85b802b 100644
--- a/base/templates/base/rotating_shift/rotating_shift.html
+++ b/base/templates/base/rotating_shift/rotating_shift.html
@@ -1,33 +1,42 @@
 {% extends 'settings.html' %}
 {% load i18n %}
 {% block settings %} {% load static %}
+<meta name="csrf-token" content="{{ csrf_token }}">
+
+{% include "generic/components.html" %}
+
 <div class="oh-inner-sidebar-content">
-
     {% if perms.base.view_rotatingshift %}
-    <div class="oh-inner-sidebar-content__header d-flex justify-content-between align-items-center">
-        <h2 class="oh-inner-sidebar-content__title">{% trans "Rotating Shift" %}</h2>
-        {% if perms.base.add_rotatingshift %}
-        <button
-            class="oh-btn oh-btn--secondary oh-btn--shadow"
-            data-toggle="oh-modal-toggle"
-            data-target="#objectCreateModal"
-            hx-get="{% url 'rotating-shift-create' %}"
-            hx-target="#objectCreateModalTarget"
-        >
-            <ion-icon name="add-outline" class="me-1"></ion-icon>
-            {% trans "Create" %}
-        </button>
-        {% endif %}
-    </div>
-        {% if rshifts %}
-            {% include 'base/rotating_shift/rotating_shift_view.html' %}
-        {% else %}
-            <div style="display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%;">
-                <img style="display: block; width: 15%; margin: 20px auto; filter: opacity(0.5);" src="{% static 'images/ui/employee_shift.png' %}" class="" alt="Page not found. 404." />
-                <h5 class="oh-404__subtitle">{% trans "There is no rotating shifts at this moment." %}</h5>
-            </div>
-        {% endif %}
+        <div hx-get="{% url 'rotating-shift-nav' %}" hx-trigger="load"></div>
+        <div class="oh-checkpoint-badge mb-2" id="selectedInstances" data-ids="[]" data-clicked="" style="display: none">
+        </div>
+        <div class="oh-wrapper"
+            id="listContainer">
+            <div class="animated-background"></div>
+        </div>
+        {% comment %}
+            <div class="oh-inner-sidebar-content__header d-flex justify-content-between align-items-center">
+                <h2 class="oh-inner-sidebar-content__title">{% trans "Rotating Shift" %}</h2>
+                {% if perms.base.add_rotatingshift %}
+                <button class="oh-btn oh-btn--secondary oh-btn--shadow" data-toggle="oh-modal-toggle"
+                    data-target="#objectCreateModal" hx-get="{% url 'rotating-shift-create' %}"
+                    hx-target="#objectCreateModalTarget">
+                    <ion-icon name="add-outline" class="me-1"></ion-icon>
+                    {% trans "Create" %}
+                </button>
+                {% endif %}
+                {% if rshifts %}
+                    {% include 'base/rotating_shift/rotating_shift_view.html' %}
+                {% else %}
+                <div style="display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%;">
+                    <img style="display: block; width: 15%; margin: 20px auto; filter: opacity(0.5);"
+                        src="{% static 'images/ui/employee_shift.png' %}" class="" alt="Page not found. 404." />
+                    <h5 class="oh-404__subtitle">{% trans "There is no rotating shifts at this moment." %}</h5>
+                </div>
+                {% endif %}
+                </div>
+            {% endcomment %}
     {% endif %}
-
 </div>
+<script src="{% static 'cbv/deleteFunc.js' %}"></script>
 {% endblock settings %}
diff --git a/base/templates/base/rotating_shift/rotating_shift_assign_export.html b/base/templates/base/rotating_shift/rotating_shift_assign_export.html
index 751ffcef9..1b184b5e5 100644
--- a/base/templates/base/rotating_shift/rotating_shift_assign_export.html
+++ b/base/templates/base/rotating_shift/rotating_shift_assign_export.html
@@ -1,11 +1,5 @@
 {% load i18n %} {% load static %}
-<div class="oh-modal__dialog-header">
-  <h2 class="oh-modal__dialog-title" id="rotatingShiftAssignExportLavel">{% trans 'Export Rotating Shift Assigns' %}</h2>
-  <button class="oh-modal__close" aria-label="Close"><ion-icon name="close-outline"></ion-icon></button>
-</div>
-<div class="oh-modal__dialog-body" id="rotatingShiftAssignExportModalBody">
-  <form action="{% url 'rotating-shift-assign-info-export' %}" method="get" onsubmit="event.stopPropagation();$(this).parents().find('.oh-modal--show').last().toggleClass('oh-modal--show');" id="rotatingShiftAssignExportForm" class="oh-profile-section">
-    {% csrf_token %} <div class="oh-dropdown__filter-body">
+<div class="oh-dropdown__filter-body">
       <div class="oh-accordion">
         <div class="oh-accordion-header">
           {% trans 'Excel columns' %}
@@ -121,8 +115,3 @@
         </div>
       </div>
     </div>
-    <div class="oh-modal__dialog-footer p-0 pt-3">
-      <button type="submit" class="oh-btn oh-btn--secondary oh-btn--shadow">{% trans 'Export' %}</button>
-    </div>
-  </form>
-</div>
diff --git a/base/templates/base/rotating_work_type/htmx/add_more_work_type_fields.html b/base/templates/base/rotating_work_type/htmx/add_more_work_type_fields.html
index 2ea28ea75..a59026b26 100644
--- a/base/templates/base/rotating_work_type/htmx/add_more_work_type_fields.html
+++ b/base/templates/base/rotating_work_type/htmx/add_more_work_type_fields.html
@@ -1,8 +1,8 @@
 {% load i18n %}
 <div
-  class="oh-input__group pt-3"
+  class="oh-input__group pt-2"
   id="{{ current_hx_target }}"
-  style="display: flex"
+  style="display: flex; padding-right :0px;"
 >
   {{field_html}}
   <a
diff --git a/base/templates/base/rotating_work_type/rotating_work_type.html b/base/templates/base/rotating_work_type/rotating_work_type.html
index 2735fd2f2..685fbe751 100644
--- a/base/templates/base/rotating_work_type/rotating_work_type.html
+++ b/base/templates/base/rotating_work_type/rotating_work_type.html
@@ -2,32 +2,42 @@
 {% load i18n %}
 {% block settings %}
 {% load static %}
+{% include "generic/components.html" %}
+<meta name="csrf-token" content="{{ csrf_token }}">
+
 <div class="oh-inner-sidebar-content">
     {% if perms.base.view_rotatingworktype %}
-    <div class="oh-inner-sidebar-content__header d-flex justify-content-between align-items-center">
-        <h2 class="oh-inner-sidebar-content__title">{% trans "Rotating Work Type" %}</h2>
-        {% if perms.base.add_rotatingworktype %}
-        <button
-            class="oh-btn oh-btn--secondary oh-btn--shadow"
-            data-toggle="oh-modal-toggle"
-            data-target="#objectCreateModal"
-            hx-get="{% url 'rotating-work-type-create' %}"
-            hx-target="#objectCreateModalTarget"
-        >
-            <ion-icon name="add-outline" class="me-1"></ion-icon>
-            {% trans "Create" %}
-        </button>
-        {% endif %}
-    </div>
-        {% if rwork_type %}
-            {% include 'base/rotating_work_type/rotating_work_type_view.html' %}
-		{% else %}
-			<div style="display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%;">
-				<img style="display: block; width: 15%; margin: 20px auto; filter: opacity(0.5);" src="{% static 'images/ui/rotating_work_type.png' %}" class="" alt="Page not found. 404." />
-				<h5 class="oh-404__subtitle">{% trans "There is no rotating work types at this moment." %}</h5>
-			</div>
-		{% endif %}
+        <div hx-get="{% url 'rotating-nav' %}" hx-trigger="load"></div>
+        <div class="oh-checkpoint-badge mb-2" id="selectedInstances" data-ids="[]" data-clicked="" style="display: none"></div>
+        <div class="oh-wrapper"  id="listContainer">
+            <div class="animated-background"></div>
+        </div>
+        {% comment %}
+            <div class="oh-inner-sidebar-content__header d-flex justify-content-between align-items-center">
+            <h2 class="oh-inner-sidebar-content__title">{% trans "Rotating Work Type" %}</h2>
+            <button
+                class="oh-btn oh-btn--secondary oh-btn--shadow"
+                data-toggle="oh-modal-toggle"
+                data-target="#objectCreateModal"
+                hx-get="{% url 'rotating-work-type-create-form' %}"
+                hx-target="#objectCreateModalTarget"
+            >
+                <ion-icon name="add-outline" class="me-1"></ion-icon>
+                {% trans "Create" %}
+            </button>
+            {% if rwork_type %}
+                {% include 'base/rotating_work_type/rotating_work_type_view.html' %}
+            {% else %}
+                <div style="display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%;">
+                    <img style="display: block; width: 15%; margin: 20px auto; filter: opacity(0.5);" src="{% static 'images/ui/rotating_work_type.png' %}" class="" alt="Page not found. 404." />
+                    <h5 class="oh-404__subtitle">{% trans "There is no rotating work types at this moment." %}</h5>
+                </div>
+            {% endif %}
+        {% endcomment %}
     {% endif %}
-
 </div>
+
+<script src="{% static 'cbv/deleteFunc.js' %}"></script>
+
+
 {% endblock settings %}
diff --git a/base/templates/base/rotating_work_type/rotating_work_type_assign_export.html b/base/templates/base/rotating_work_type/rotating_work_type_assign_export.html
index 78632fb9c..c4e27d6a0 100644
--- a/base/templates/base/rotating_work_type/rotating_work_type_assign_export.html
+++ b/base/templates/base/rotating_work_type/rotating_work_type_assign_export.html
@@ -1,11 +1,4 @@
 {% load i18n %} {% load static %}
-<div class="oh-modal__dialog-header">
-  <h2 class="oh-modal__dialog-title" id="rotatingWorkTypeAssignExportLavel">{% trans 'Export Rotating Work Type Assigns' %}</h2>
-  <button class="oh-modal__close" aria-label="Close"><ion-icon name="close-outline"></ion-icon></button>
-</div>
-<div class="oh-modal__dialog-body" id="rotatingWorkTypeAssignExportModalBody">
-  <form action="{% url 'rotating-work-type-assign-export' %}" method="get" class="oh-profile-section" onsubmit="event.stopPropagation();$(this).parents().find('.oh-modal--show').last().toggleClass('oh-modal--show');" id="rotatingWorkTypeAssignExportForm">
-    {% csrf_token %}
     <div class="oh-dropdown__filter-body">
       <div class="oh-accordion">
         <div class="oh-accordion-header">
@@ -121,9 +114,3 @@
           </div>
         </div>
       </div>
-    </div>
-    <div class="oh-modal__dialog-footer p-0 pt-3">
-      <button type="submit" class="oh-btn oh-btn--secondary oh-btn--shadow">{% trans 'Export' %}</button>
-    </div>
-  </form>
-</div>
diff --git a/base/templates/base/shift/schedule.html b/base/templates/base/shift/schedule.html
index c49efed64..029efe34d 100644
--- a/base/templates/base/shift/schedule.html
+++ b/base/templates/base/shift/schedule.html
@@ -1,31 +1,42 @@
 {% extends 'settings.html' %}
 {% load i18n %}
 {% block settings %}{% load static %}
+{% include "generic/components.html" %}
+<style>
+    .select2-selection--single {
+        height: 45px !important;
+    }
+
+    .select2-selection--single>.select2-selection__rendered {
+        line-height: 45px !important;
+    }
+</style>
 <div class="oh-inner-sidebar-content">
     {% if perms.base.view_employeeshiftschedule %}
-        <div class="oh-inner-sidebar-content__header d-flex justify-content-between align-items-center">
-            <h2 class="oh-inner-sidebar-content__title">{% trans "Shift Schedule" %}</h2>
-            {% if perms.base.add_employeeshiftschedule %}
-                <button
-                    class="oh-btn oh-btn--secondary oh-btn--shadow"
-                    data-toggle="oh-modal-toggle"
-                    data-target="#objectCreateModal"
-                    hx-get="{% url 'employee-shift-schedule-create' %}"
-                    hx-target="#objectCreateModalTarget"
-                >
-                    <ion-icon name="add-outline" class="me-1"></ion-icon>
-                    {% trans "Create" %}
-                </button>
-            {% endif %}
+        <div hx-get="{% url 'employee-shift-shedule-navbar' %}?field=shift_id" hx-trigger="load"></div>
+        <div class="oh-checkpoint-badge mb-2" id="selectedInstances" data-ids="[]" data-clicked="" style="display: none"></div>
+        {% comment %} &field=shift_id {% endcomment %}
+        <div class="oh-wrapper"  id="listContainer">
+            <div class="animated-background"></div>
         </div>
-        {% if shift_schedule %}
+        {% comment %} <div class="oh-inner-sidebar-content__header d-flex justify-content-between align-items-center">
+            <h2 class="oh-inner-sidebar-content__title">{% trans "Shift Schedule" %}</h2><button
+                class="oh-btn oh-btn--secondary oh-btn--shadow" data-toggle="oh-modal-toggle"
+                data-target="#objectCreateModal" hx-get="{% url 'employee-shift-schedule-create' %}"
+                hx-target="#objectCreateModalTarget">
+                <ion-icon name="add-outline" class="me-1"></ion-icon>
+                {% trans "Create" %}
+            </button>
+            {% if shift_schedule %}
             {% include 'base/shift/schedule_view.html' %}
-        {% else %}
+            {% else %}
             <div style="display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%;">
-                <img style="display: block; width: 15%; margin: 20px auto; filter: opacity(0.5);" src="{% static 'images/ui/shift_schedule.png' %}" class="" alt="Page not found. 404." />
+                <img style="display: block; width: 15%; margin: 20px auto; filter: opacity(0.5);"
+                    src="{% static 'images/ui/shift_schedule.png' %}" class="" alt="Page not found. 404." />
                 <h5 class="oh-404__subtitle">{% trans "There is no shift schedule at this moment." %}</h5>
             </div>
-        {% endif %}
+            {% endif %}
+        {% endcomment %}
     {% endif %}
 </div>
 <script>
@@ -34,6 +45,7 @@
         if (isChecked) {
             $(element).closest('form').find('#id_auto_punch_out_time_parent_div', '#id_auto_punch_out_time').show();
         } else {
+            $('#id_auto_punch_out_time').val('');
             $(element).closest('form').find('#id_auto_punch_out_time_parent_div', '#id_auto_punch_out_time').hide();
         }
     }
diff --git a/base/templates/base/shift/shift.html b/base/templates/base/shift/shift.html
index 7a4f3fdc8..c76ece827 100644
--- a/base/templates/base/shift/shift.html
+++ b/base/templates/base/shift/shift.html
@@ -1,35 +1,27 @@
 {% extends 'settings.html' %} {% load i18n %} {% block settings %} {% load static %}
+<meta name="csrf-token" content="{{ csrf_token }}">
+{% include "generic/components.html" %}
 <div class="oh-inner-sidebar-content">
-  {% if perms.base.view_employeeshift %}
-  <div
-    class="oh-inner-sidebar-content__header d-flex justify-content-between align-items-center"
-  >
-    <h2 class="oh-inner-sidebar-content__title">{% trans "Shift" %}</h2>
-    {% if perms.base.add_employeeshift %}
-    <button
-      class="oh-btn oh-btn--secondary oh-btn--shadow"
-      data-toggle="oh-modal-toggle"
-      data-target="#shiftModal"
-      hx-get="{% url 'employee-shift-create' %}"
-      hx-target="#shiftForm"
-    >
-      <ion-icon name="add-outline" class="me-1"></ion-icon>
-      {% trans "Create" %}
-    </button>
+    {% if perms.base.view_employeeshift %}
+        <div hx-get="{% url 'employee-shift-nav' %}" hx-trigger="load"></div>
+        <div class="oh-checkpoint-badge mb-2" id="selectedInstances" data-ids="[]" data-clicked="" style="display: none"></div>
+        <div class="oh-wrapper"  id="listContainer">
+            <div class="animated-background"></div>
+        </div>
+        {% comment %} <div class="oh-inner-sidebar-content__header d-flex justify-content-between align-items-center">
+            <h2 class="oh-inner-sidebar-content__title">{% trans "Shift" %}</h2>
+            {% if perms.base.add_employeeshift %}
+            <button class="oh-btn oh-btn--secondary oh-btn--shadow" data-toggle="oh-modal-toggle" data-target="#shiftModal"
+                hx-get="{% url 'employee-shift-create' %}" hx-target="#shiftForm">
+                <ion-icon name="add-outline" class="me-1"></ion-icon>
+                {% trans "Create" %}
+            </button> {% endif %}
+        </div> {% include 'base/shift/shift_view.html' %} {% endcomment %}
     {% endif %}
-  </div>
-      {% include 'base/shift/shift_view.html' %}
-  {% endif %}
 </div>
 
-<div
-  class="oh-modal"
-  id="shiftModal"
-  role="dialog"
-  aria-labelledby="shiftModalLabel"
-  aria-hidden="true"
->
-  <div class="oh-modal__dialog" id="shiftForm"></div>
+<div class="oh-modal" id="shiftModal" role="dialog" aria-labelledby="shiftModalLabel" aria-hidden="true">
+    <div class="oh-modal__dialog" id="shiftForm"></div>
 </div>
-
+<script src="{% static 'cbv/deleteFunc.js' %}"></script>
 {% endblock settings %}
diff --git a/base/templates/base/tags/employee_tags.html b/base/templates/base/tags/employee_tags.html
index e62e4d74b..2cb872270 100644
--- a/base/templates/base/tags/employee_tags.html
+++ b/base/templates/base/tags/employee_tags.html
@@ -1,37 +1,44 @@
 {% extends 'settings.html' %}
 {% load i18n %}
 {% block settings %}{% load static %}
+{% include "generic/components.html" %}
+<meta name="csrf-token" content="{{ csrf_token }}">
 
 <!-- ******************* EMPLOYEE TAGS ******************* -->
 
 <div class="oh-inner-sidebar-content">
-    {% if perms.employee.view_employeetag %}
-        <div class="oh-inner-sidebar-content__header d-flex justify-content-between align-items-center">
-            <h2 class="oh-inner-sidebar-content__title">{% trans "Employee Tags" %}</h2>
-			{% if perms.employee.add_employeetag %}
-				<button
-					class="oh-btn oh-btn--secondary oh-btn--shadow"
-					data-toggle="oh-modal-toggle"
-					data-target="#objectCreateModal"
-					hx-get="{% url 'employee-tag-create' %}"
-					hx-target="#objectCreateModalTarget"
-				>
-					<ion-icon name="add-outline" class="me-1"></ion-icon>
-					{% trans "Create" %}
-				</button>
-			{% endif %}
-        </div>
+	{% if perms.employee.view_employeetag %}
+	{% comment %} <div class="oh-inner-sidebar-content__header d-flex justify-content-between align-items-center">
+		<h2 class="oh-inner-sidebar-content__title">{% trans "Employee Tags" %}</h2>
+		<button class="oh-btn oh-btn--secondary oh-btn--shadow" data-toggle="oh-modal-toggle"
+			data-target="#objectCreateModal" hx-get="{% url 'employee-tag-create' %}"
+			hx-target="#objectCreateModalTarget">
+			<ion-icon name="add-outline" class="me-1"></ion-icon>
+			{% trans "Create" %}
+		</button>
 		{% if employeetags %}
 			<div id="employeeTags">
         		{% include 'base/employee_tag/employee_tag_view.html' %}
 			</div>
 		{% else %}
-			<div style="display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%;">
-				<img style="display: block; width: 15%; margin: 20px auto; filter: opacity(0.5);" src="{% static 'images/ui/price-tag.png' %}" class="" alt="Page not found. 404." />
-				<h5 class="oh-404__subtitle">{% trans "There is no employee tags at this moment." %}</h5>
-			</div>
+		<div style="display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%;">
+			<img style="display: block; width: 15%; margin: 20px auto; filter: opacity(0.5);"
+				src="{% static 'images/ui/price-tag.png' %}" class="" alt="Page not found. 404." />
+			<h5 class="oh-404__subtitle">{% trans "There is no employee tags at this moment." %}</h5>
+		</div>
+		{% endif %}
+		{% endcomment %}
+		{% if perms.employee.view_employeetag %}
+			<div hx-get="{% url 'employee-tag-navbar' %}" hx-trigger="load"></div>
 		{% endif %}
-    {% endif %}
 
+
+	<div class="oh-checkpoint-badge mb-2" id="selectedInstances" data-ids="[]" data-clicked="" style="display: none"></div>
+	<div class="oh-wrapper"  id="listContainer">
+		<div class="animated-background"></div>
+	</div>
+	{% endif %}
 </div>
+
+<script src="{% static 'cbv/deleteFunc.js' %}"></script>
 {% endblock settings %}
diff --git a/base/templates/base/tags/helpdesk_tags.html b/base/templates/base/tags/helpdesk_tags.html
index 65d92ee16..785745f17 100644
--- a/base/templates/base/tags/helpdesk_tags.html
+++ b/base/templates/base/tags/helpdesk_tags.html
@@ -3,10 +3,15 @@
 {% block settings %}{% load static %}
 
 <!-- ******************* HELPDESK TAGS ******************* -->
+{% include "generic/components.html" %}
+<meta name="csrf-token" content="{{ csrf_token }}">
 
 <div class="oh-inner-sidebar-content">
     {% if perms.base.view_tags %}
-        <div class="oh-inner-sidebar-content__header d-flex justify-content-between align-items-center">
+
+	<div hx-get="{% url "helpdesk-tag-nav" %}" hx-trigger="load" >
+	</div>
+        {% comment %} <div class="oh-inner-sidebar-content__header d-flex justify-content-between align-items-center">
             <h2 class="oh-inner-sidebar-content__title">{% trans "Helpdesk Tags" %}</h2>
 			{% if perms.base.add_tags %}
 				<button
@@ -20,15 +25,32 @@
 					{% trans "Create" %}
 				</button>
 			{% endif %}
-        </div>
-		{% if tags %}
+        </div> {% endcomment %}
+
+
+		<div
+    class="oh-checkpoint-badge mb-2"
+    id="selectedInstances"
+    data-ids="[]"
+    data-clicked=""
+    style="display: none"
+  ></div>
+
+
+  <div
+  class="oh-wrapper"
+  id="listContainer">
+  <div class="animated-background">
+  </div>
+</div>
+		{% comment %} {% if tags %}
         	{% include 'base/tags/tags_view.html' %}
 		{% else %}
 			<div style="display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%;">
 				<img style="display: block; width: 15%; margin: 20px auto; filter: opacity(0.5);" src="{% static 'images/ui/price-tag.png' %}" class="" alt="Page not found. 404." />
 				<h5 class="oh-404__subtitle">{% trans "There is no helpdesk tags at this moment." %}</h5>
 			</div>
-		{% endif %}
+		{% endif %} {% endcomment %}
     {% endif %}
 
 </div>
@@ -77,6 +99,6 @@
 </div>
 <!-- end of edit modal -->
 
-
+<script src="{% static 'cbv/deleteFunc.js' %}"></script>
 
 {% endblock settings %}
diff --git a/base/templates/base/tags/tags.html b/base/templates/base/tags/tags.html
index b431cf1cd..2112bcf95 100644
--- a/base/templates/base/tags/tags.html
+++ b/base/templates/base/tags/tags.html
@@ -1,16 +1,20 @@
 {% extends 'settings.html' %} {% load i18n %} {% block settings %}
 {% load static %}
+{% include "generic/components.html" %}
+<meta name="csrf-token" content="{{ csrf_token }}">
 
 <!-- ******************* HISTORY TAGS ******************* -->
 
 <div class="oh-inner-sidebar-content">
   {% if perms.horilla_audit.view_audittag %}
-  <div
+{% comment %} <div
     class="oh-inner-sidebar-content__header d-flex justify-content-between align-items-center"
   >
-    <h2 class="oh-inner-sidebar-content__title">{% trans "History Tags" %}</h2>
+    <h2 class="oh-inner-sidebar-content__title">{% trans "o/s" %}</h2> {% endcomment %}
     {% if perms.horilla_audit.add_audittag %}
-    	<button
+      <div hx-get="{% url "audit-tag-navbar" %}" hx-trigger="load">
+      </div>
+    	{% comment %} <button
     	  class="oh-btn oh-btn--secondary oh-btn--shadow"
     	  data-toggle="oh-modal-toggle"
     	  data-target="#audittagModal"
@@ -19,12 +23,27 @@
     		>
     	  <ion-icon name="add-outline" class="me-1"></ion-icon>
     	  {% trans "Create" %}
-    	</button>
+    	</button> {% endcomment %}
     {% endif %}
   </div>
-  {% if audittags %}
-  	{% include 'base/audit_tag/audit_tag_view.html' %}
-  {% else %}
+  {% comment %} {% if audittags %}  {% endcomment %}
+    <div
+      class="oh-checkpoint-badge mb-2"
+      id="selectedInstances"
+      data-ids="[]"
+      data-clicked=""
+      style="display: none"
+    ></div>
+      <div class="oh-wrapper"
+      id="listContainer">
+        <div class="animated-background">
+      </div>
+    </div>
+
+{% endif %}
+
+  	{% comment %} {% include 'base/audit_tag/audit_tag_view.html' %}  {% endcomment %}
+  {% comment %} {% else %}
   <div
     style="
       display: flex;
@@ -49,8 +68,9 @@
       {% trans "There is no history tags at this moment." %}
     </h5>
   </div>
-  {% endif %} {% endif %}
-</div>
+  {% endif %} {% endif %} {% endcomment %}
+{% comment %} {% endif %}
+</div> {% endcomment %}
 
 <!-- start of create modal -->
 <div
@@ -76,4 +96,7 @@
 </div>
 <!-- end of edit modal -->
 
+<script src="{% static 'cbv/deleteFunc.js' %}"></script>
+
+
 {% endblock settings %}
diff --git a/base/templates/base/ticket_type/ticket_type.html b/base/templates/base/ticket_type/ticket_type.html
index e3decb3f7..14c46a85f 100644
--- a/base/templates/base/ticket_type/ticket_type.html
+++ b/base/templates/base/ticket_type/ticket_type.html
@@ -1,12 +1,16 @@
 {% extends 'settings.html' %}
 {% load i18n %}
 {% block settings %}{% load static %}
+{% include "generic/components.html" %}
+<meta name="csrf-token" content="{{ csrf_token }}">
 <div class="oh-inner-sidebar-content">
     {% if perms.helpdesk.view_tickettype %}
-        <div class="oh-inner-sidebar-content__header d-flex justify-content-between align-items-center">
-            <h2 class="oh-inner-sidebar-content__title">{% trans "Ticket Type" %}</h2>
+        {% comment %} <div class="oh-inner-sidebar-content__header d-flex justify-content-between align-items-center">
+            <h2 class="oh-inner-sidebar-content__title">{% trans "Ticket Type" %}</h2> {% endcomment %}
 			{% if perms.helpdesk.add_tickettype %}
-            <button
+				<div hx-get="{% url "ticket-nav" %}" hx-trigger="load">
+				</div>
+            {% comment %} <button
                 class="oh-btn oh-btn--secondary oh-btn--shadow"
                 data-toggle="oh-modal-toggle"
                 data-target="#ticketModal"
@@ -15,17 +19,28 @@
             	>
                 <ion-icon name="add-outline" class="me-1"></ion-icon>
                 {% trans "Create" %}
-            </button>
+            </button> {% endcomment %}
 			{% endif %}
         </div>
-		{% if ticket_types %}
-        	{% include 'base/ticket_type/ticket_type_view.html' %}
-		{% else %}
+		{% comment %} {% if ticket_types %} {% endcomment %}
+			<div
+				class="oh-checkpoint-badge mb-2"
+				id="selectedInstances"
+				data-ids="[]"
+				data-clicked=""
+				style="display: none"
+			></div>
+				<div class="oh-wrapper"  id="listContainer">
+					<div class="animated-background">
+				</div>
+			</div>
+        	{% comment %} {% include 'base/ticket_type/ticket_type_view.html' %} {% endcomment %}
+		{% comment %} {% else %}
 			<div style="display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%;">
 				<img style="display: block; width: 15%; margin: 20px auto; filter: opacity(0.5);" src="{% static 'images/ui/ticket.png' %}" class="" alt="Page not found. 404." />
 				<h5 class="oh-404__subtitle">{% trans "There is no ticket types at this moment." %}</h5>
 			</div>
-		{% endif %}
+		{% endif %} {% endcomment %}
     {% endif %}
 
 </div>
@@ -77,4 +92,6 @@
 </div>
 <!-- end of edit modal -->
 <!-- end of modals -->
+<script src="{% static 'cbv/deleteFunc.js' %}"></script>
+
 {% endblock settings %}
diff --git a/base/templates/base/work_type/work_type.html b/base/templates/base/work_type/work_type.html
index f42bf3997..628a9bb81 100644
--- a/base/templates/base/work_type/work_type.html
+++ b/base/templates/base/work_type/work_type.html
@@ -1,43 +1,39 @@
 {% extends 'settings.html' %} {% load i18n %} {% block settings %} {% load static %}
 <div class="oh-inner-sidebar-content">
-  {% if perms.base.view_worktype %}
-  <div
-    class="oh-inner-sidebar-content__header d-flex justify-content-between align-items-center"
-  >
-    <h2 class="oh-inner-sidebar-content__title">{% trans "Work Type" %}</h2>
-    {% if perms.base.add_worktype %}
-    <button
-      class="oh-btn oh-btn--secondary oh-btn--shadow"
-      data-toggle="oh-modal-toggle"
-      data-target="#workTypeModal"
-      hx-get="{% url 'work-type-create' %}"
-      hx-target="#workTypeForm"
-    >
-      <ion-icon name="add-outline" class="me-1"></ion-icon>
-      {% trans "Create" %}
-    </button>
-    {% endif %}
-  </div>
-    {% if work_types %}
-      {% include 'base/work_type/work_type_view.html' %}
-    {% else %}
-      <div style="display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%;">
-        <img style="display: block; width: 15%; margin: 20px auto; filter: opacity(0.5);" src="{% static 'images/ui/work-type.png' %}" class="" alt="Page not found. 404." />
-        <h5 class="oh-404__subtitle">{% trans "There is no work types at this moment." %}</h5>
-      </div>
-    {% endif %}
+    {% include "generic/components.html" %}
+    <meta name="csrf-token" content="{{ csrf_token }}">
 
-  {% endif %}
+    {% if perms.base.view_worktype %}
+        <div hx-get="{% url 'worktype-nav' %}" hx-trigger="load"></div>
+        <div class="oh-checkpoint-badge mb-2" id="selectedInstances" data-ids="[]" data-clicked="" style="display: none"></div>
+        <div class="oh-wrapper"  id="listContainer">
+            <div class="animated-background"></div>
+        </div>
+        {% comment %} <div class="oh-inner-sidebar-content__header d-flex justify-content-between align-items-center">
+            <h2 class="oh-inner-sidebar-content__title">{% trans "Work Type" %}</h2>
+            <button class="oh-btn oh-btn--secondary oh-btn--shadow" data-toggle="oh-modal-toggle"
+                data-target="#workTypeModal" hx-get="{% url 'work-type-create-form' %}" hx-target="#workTypeForm">
+                <ion-icon name="add-outline" class="me-1"></ion-icon>
+                {% trans "Create" %}
+            </button>
+            </div>
+            {% if work_types %}
+                {% include 'base/work_type/work_type_view.html' %}
+            {% else %}
+                <div style="display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%;">
+                    <img style="display: block; width: 15%; margin: 20px auto; filter: opacity(0.5);"
+                        src="{% static 'images/ui/work-type.png' %}" class="" alt="Page not found. 404." />
+                    <h5 class="oh-404__subtitle">{% trans "There is no work types at this moment." %}</h5>
+                </div>
+            {% endif %}
+        {% endcomment %}
+    {% endif %}
 </div>
 
-<div
-  class="oh-modal"
-  id="workTypeModal"
-  role="dialog"
-  aria-labelledby="workTypeModalLabel"
-  aria-hidden="true"
->
-  <div class="oh-modal__dialog" id="workTypeForm"></div>
+<div class="oh-modal" id="workTypeModal" role="dialog" aria-labelledby="workTypeModalLabel" aria-hidden="true">
+    <div class="oh-modal__dialog" id="workTypeForm"></div>
 </div>
 
+<script src="{% static 'cbv/deleteFunc.js' %}"></script>
+
 {% endblock settings %}
diff --git a/base/templates/cbv/auth/user_assign_to_group.html b/base/templates/cbv/auth/user_assign_to_group.html
new file mode 100644
index 000000000..74a492062
--- /dev/null
+++ b/base/templates/cbv/auth/user_assign_to_group.html
@@ -0,0 +1,12 @@
+{% load i18n %}
+<form hx-post="{% url "assign-group-user" %}?employee={{employee}}" hx-target="#groupAssignBody" method="post">
+    {{form.group.errors}}
+    {{form.group}}
+    <input type="hidden" name="employee" value="{{employee_id}}" id="{{employee_id}}">
+    <div class="d-flex flex-row-reverse">
+        <button type="submit" class="oh-btn oh-btn--secondary mt-2 mr-0 pl-4 pr-5 oh-btn--w-100-resp">
+          {% trans "Save" %}
+        </button>
+    </div>
+
+</form>
diff --git a/base/templates/cbv/company_leaves/company_leave_actions.html b/base/templates/cbv/company_leaves/company_leave_actions.html
new file mode 100644
index 000000000..31a560b19
--- /dev/null
+++ b/base/templates/cbv/company_leaves/company_leave_actions.html
@@ -0,0 +1,18 @@
+{% load i18n static %}
+{% if perms.leave.change_companyleave or perms.leave.delete_companyleave %}
+    <div  onclick="event.stopPropagation();" class="oh-btn-group">
+      {% if perms.leave.change_companyleave %}
+        <button class="oh-btn oh-btn--light-bkg w-100" title="{% trans 'Edit' %}" data-toggle="oh-modal-toggle"
+            data-target="#genericModal" hx-get="{% url 'company-leave-update' instance.id %}?instance_ids={{instance.ordered_ids}}"
+            hx-target="#genericModalBody"><ion-icon name="create-outline"></ion-icon></button>
+      {% endif %}
+      {% if perms.leave.delete_companyleave %}
+          <a class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100"
+              hx-confirm="{% trans 'Are you sure you want to delete ?' %}"
+              hx-post="{% url 'company-leave-delete' instance.id %}"
+              hx-target="#listContainer"
+              title="{% trans 'Delete' %}"><ion-icon name="trash-outline"></ion-icon>
+          </a>
+      {% endif %}
+    </div>
+  {% endif %}
\ No newline at end of file
diff --git a/base/templates/cbv/company_leaves/company_leave_filter.html b/base/templates/cbv/company_leaves/company_leave_filter.html
new file mode 100644
index 000000000..5ed50eea6
--- /dev/null
+++ b/base/templates/cbv/company_leaves/company_leave_filter.html
@@ -0,0 +1,22 @@
+{% load i18n %}
+<div class="oh-dropdown__filter-body">
+    <div class="oh-accordion">
+        <div class="oh-accordion-header">{% trans "Company Leave" %}</div>
+        <div class="oh-accordion-body">
+            <div class="row">
+                <div class="col-sm-12 col-md-12 col-lg-12">
+                    <div class="oh-input-group">
+                        <label class="oh-label">{% trans "Based On week" %}</label>
+                        {{form.based_on_week}}
+                    </div>
+                </div>
+                <div class="col-sm-12 col-md-12">
+                    <div class="oh-input-group">
+                        <label class="oh-label">{% trans "Based On Weekday" %}</label>
+                        {{form.based_on_week_day}}
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/base/templates/cbv/company_leaves/company_leave_home.html b/base/templates/cbv/company_leaves/company_leave_home.html
new file mode 100644
index 000000000..5ed6d1aec
--- /dev/null
+++ b/base/templates/cbv/company_leaves/company_leave_home.html
@@ -0,0 +1,49 @@
+{% extends "index.html" %}
+{% load i18n %}
+{% load static %}
+{% block content %}
+
+
+<style>
+    .canceled--dot{
+        background-color:red;
+      }
+      .approved--dot{
+        background-color:green;
+      }
+      .approved-True{
+        border-left: 3.4px solid yellowgreen !important;
+        border-radius: 4px 0 0 4px;
+      
+      }
+      .canceled-True {
+      
+        border-left: 3.4px solid red !important;
+        border-radius: 4px 0 0 4px;
+      
+      }
+    </style>
+<div hx-get="{% url "company-leave-navbar" %}" hx-trigger="load">
+</div> 
+
+{% include "generic/components.html" %}
+<div
+    class="oh-checkpoint-badge mb-2"
+    id="selectedInstances"
+    data-ids="[]"
+    data-clicked=""
+    style="display: none"
+  ></div>
+
+<div class="oh-wrapper"  
+   id="listContainer">
+  <div class="animated-background">
+</div>
+</div>
+
+
+{% endblock content %}
+
+<script>
+        $(".reload-record").click()
+</script>
\ No newline at end of file
diff --git a/base/templates/cbv/company_leaves/detail_view_actions.html b/base/templates/cbv/company_leaves/detail_view_actions.html
new file mode 100644
index 000000000..10688e268
--- /dev/null
+++ b/base/templates/cbv/company_leaves/detail_view_actions.html
@@ -0,0 +1,33 @@
+{% load basefilters %}
+{% load i18n %}
+{% if perms.leave.change_companyleave or perms.leave.delete_companyleave %}
+    {% if perms.leave.change_companyleave %}
+    <a hx-get="{% url 'company-leave-update' instance.id %}" 
+    hx-target='#genericModalBody' 
+    data-toggle="oh-modal-toggle"
+    data-target='#genericModal' 
+    class="oh-btn oh-btn--info w-50" title="{% trans 'Edit' %}">
+    <ion-icon name="create-outline"></ion-icon>
+</a>
+{% endif %}
+{% if perms.leave.delete_companyleave %}
+<form
+hx-post="{% url 'company-leave-delete' instance.id %}"
+hx-target = "#companyleavedelete"
+hx-confirm="{% trans "Are you sure you want to delete ?" %}"
+method="post"
+style="display: contents;width:100%">
+{% csrf_token %}
+<button onclick="event.stopPropagation()" type="submit" class="oh-btn oh-btn--secondary w-50" title="{% trans 'Delete' %}">
+<ion-icon name="trash-outline" role="img" class="md hydrated" aria-label="trash outline"></ion-icon>
+</button> 
+
+
+{% endif %}
+{% endif %}
+{% if request.GET.query_string %}
+<script>
+    "<script>window.location.reload();</script>"
+</script>
+{% endif %}
+
diff --git a/base/templates/cbv/company_leaves/on_week.html b/base/templates/cbv/company_leaves/on_week.html
new file mode 100644
index 000000000..747b26f6c
--- /dev/null
+++ b/base/templates/cbv/company_leaves/on_week.html
@@ -0,0 +1,11 @@
+{% load i18n %}
+
+    {% if instance.based_on_week != None %}
+        {% for week in weeks %}
+            {% if week.0 == instance.based_on_week %}
+                {{week.1}}
+            {% endif %}
+        {% endfor %}
+    {% else %}
+        {% trans "All" %}
+    {% endif %}
diff --git a/base/templates/cbv/company_leaves/on_week_day.html b/base/templates/cbv/company_leaves/on_week_day.html
new file mode 100644
index 000000000..2fa1e6e85
--- /dev/null
+++ b/base/templates/cbv/company_leaves/on_week_day.html
@@ -0,0 +1,7 @@
+{%load i18n %}
+
+    {% for week_day in week_days %}
+        {% if week_day.0 == instance.based_on_week_day %}
+            {{week_day.1}}
+        {% endif %}
+    {% endfor %}
diff --git a/base/templates/cbv/dashboard/announcement_title.html b/base/templates/cbv/dashboard/announcement_title.html
new file mode 100644
index 000000000..b936e347e
--- /dev/null
+++ b/base/templates/cbv/dashboard/announcement_title.html
@@ -0,0 +1,23 @@
+{% load i18n %}
+{%load static %}
+
+<div class="announcement_title">
+    <a class="oh-profile oh-profile--md" data-toggle="oh-modal-toggle"
+        style="text-decoration:none;" data-target="#objectDetailsModal"
+        hx-get="{% url 'announcement-single-view' instance.id %}"
+        hx-target="#objectDetailsModalTarget" onclick="closeNew(this)">
+        <div class="oh-profile__avatar mr-1">
+            <img src="https://ui-avatars.com/api/?name={{instance.title}}&background=random"
+                class="oh-profile__image" />
+        </div>
+        <span class="oh-profile__name oh-text--dark fw-bold">
+            {{instance.title}}
+        </span>
+        {% if instance.created_at|date:"Y-m-d" == current_date and request.user not in instance.viewed_by %}
+        <span class="oh-profile__info-value ms-2" id="newTab"
+            style="background-color: hsl(8,77%,56%); color:white;
+            font-size: 0.7rem; padding: 3px 8px; border-radius: 15px; font-weight: 800; width:auto;">{% trans "NEW" %}
+        </span>
+        {% endif %}
+    </a>
+</div>
\ No newline at end of file
diff --git a/base/templates/cbv/dashboard/announcement_viewed_by.html b/base/templates/cbv/dashboard/announcement_viewed_by.html
new file mode 100644
index 000000000..0b2a30ef4
--- /dev/null
+++ b/base/templates/cbv/dashboard/announcement_viewed_by.html
@@ -0,0 +1,10 @@
+{% load i18n %}
+<div class="oh-profile oh-profile--md">
+    <div class="oh-profile__avatar mr-1">
+      <img src="{{instance.user.employee_get.get_avatar}}" class="oh-profile__image" />
+    </div>
+    <span class="oh-profile__name oh-text--dark">
+      {{instance.user.employee_get}}
+      <span class="oh-recuritment_tag" style="font-size: .5rem;">{{instance.created_at}}</span>
+    </span>
+  </div>
\ No newline at end of file
diff --git a/base/templates/cbv/dashboard/job_position_field.html b/base/templates/cbv/dashboard/job_position_field.html
new file mode 100644
index 000000000..ca8d44ebb
--- /dev/null
+++ b/base/templates/cbv/dashboard/job_position_field.html
@@ -0,0 +1,18 @@
+{% load i18n %}
+<label
+  class="oh-label"
+  for="id_{{ form.job_position_id.title }}"
+  title="{{ form.job_position_id.help_text|safe }}"
+  >{% trans form.job_position_id.label %}</label
+>
+<div id ="dynamic_field_job_position_id">
+{{form.job_position_id}}
+</div>
+<script>
+  $(document).ready(function () {
+    
+      $("select").on("select2:select", function (e) {
+          $(this).closest("select")[0].dispatchEvent(new Event("change"));
+      });
+  });
+</script>
\ No newline at end of file
diff --git a/base/templates/cbv/dashboard/job_role_field.html b/base/templates/cbv/dashboard/job_role_field.html
new file mode 100644
index 000000000..9327a83ae
--- /dev/null
+++ b/base/templates/cbv/dashboard/job_role_field.html
@@ -0,0 +1,18 @@
+{% load i18n %}
+<label
+  class="oh-label"
+  for="id_{{ form.job_role_id.title }}"
+  title="{{ form.job_role_id.help_text|safe }}"
+  >{% trans form.job_role_id.label %}</label
+>
+<div id ="dynamic_field_job_role_id">
+{{form.job_role_id}}
+</div>
+<script>
+  $(document).ready(function () {
+    
+      $("select").on("select2:select", function (e) {
+          $(this).closest("select")[0].dispatchEvent(new Event("change"));
+      });
+  });
+</script>
\ No newline at end of file
diff --git a/base/templates/cbv/dashboard/progress.html b/base/templates/cbv/dashboard/progress.html
new file mode 100644
index 000000000..aa3a3de30
--- /dev/null
+++ b/base/templates/cbv/dashboard/progress.html
@@ -0,0 +1,7 @@
+{% load i18n %}
+
+<div class="progress">
+    <div class="progress-bar" role="progressbar" style="width: {{ instance.calculate_progress }}%;"></div>
+</div>
+<br>
+<div class="progress-text">{{ instance.calculate_progress }} % {% trans "Completed" %}</div>
diff --git a/base/templates/cbv/holidays/detail_view_actions.html b/base/templates/cbv/holidays/detail_view_actions.html
new file mode 100644
index 000000000..ae34014b5
--- /dev/null
+++ b/base/templates/cbv/holidays/detail_view_actions.html
@@ -0,0 +1,27 @@
+{% load basefilters %}
+{% load i18n %}
+{% if perms.leave.change_holiday %}
+    <a  hx-get="{% url 'holiday-update' instance.id %}?{{pd}}" 
+    hx-target='#genericModalBody' 
+    data-toggle="oh-modal-toggle"
+    data-target='#genericModal' 
+    class="oh-btn oh-btn--info w-50" title="{% trans 'Edit' %}">
+    <ion-icon name="create-outline"></ion-icon>
+</a>
+{% endif %}
+{% if perms.leave.delete_holiday %}
+<form
+hx-post="{% url 'holiday-delete' instance.id %}"
+hx-target = "#holidaydelete"
+hx-confirm="{% trans "Are you sure you want to delete?" %}"
+method="post"
+style="display: contents;width:100%">
+{% csrf_token %}
+<button  type="submit" class="oh-btn oh-btn--secondary w-50" title="{% trans 'Delete' %}">
+<ion-icon name="trash-outline" role="img" class="md hydrated" aria-label="trash outline"></ion-icon>
+</button> 
+
+
+   
+{% endif %}
+
diff --git a/base/templates/cbv/holidays/holiday_filter.html b/base/templates/cbv/holidays/holiday_filter.html
new file mode 100644
index 000000000..6519530f5
--- /dev/null
+++ b/base/templates/cbv/holidays/holiday_filter.html
@@ -0,0 +1,28 @@
+{% load i18n %}
+<div class="oh-dropdown__filter-body">
+    <div class="oh-accordion">
+      <div class="oh-accordion-header">{% trans "Holiday" %}</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" for="{{ form.from_date.id_for_label }}">{% trans "From Date" %}</label>
+              {{form.from_date}}
+            </div>
+          </div>
+          <div class="col-sm-12 col-md-12 col-lg-6">
+            <div class="oh-input-group">
+              <label class="oh-label" for="{{ form.to_date.id_for_label }}">{% trans "To Date" %}</label>
+                {{form.to_date}}
+            </div>
+          </div>
+          <div class="col-sm-12 col-md-12">
+            <div class="oh-input-group">
+              <label class="oh-label" for="{{ form.recurring.id_for_label }}">{% trans "Recurring" %}</label>
+                {{form.recurring}}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
\ No newline at end of file
diff --git a/base/templates/cbv/holidays/holidays_actions.html b/base/templates/cbv/holidays/holidays_actions.html
new file mode 100644
index 000000000..cad00ce60
--- /dev/null
+++ b/base/templates/cbv/holidays/holidays_actions.html
@@ -0,0 +1,27 @@
+{% load i18n %}
+<div onclick="event.stopPropagation();" class="oh-btn-group">
+    {% if perms.leave.change_holiday %}
+    <button
+      class="oh-btn oh-btn--light-bkg w-100"
+      title="{% trans 'Edit' %}"
+      data-toggle="oh-modal-toggle"
+      data-target="#genericModal"
+      hx-get="{% url 'holiday-update' instance.id %}?{{pd}}&instance_ids={{instance.ordered_ids}}"
+      hx-target="#genericModalBody"
+    >
+      <ion-icon name="create-outline"></ion-icon>
+    </button>
+    {% endif %}
+    {% if perms.leave.delete_holiday %}
+    <a
+      class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100"
+      id="delete-link"
+      hx-confirm="{% trans 'Are you sure you want to delete?' %}"
+      hx-post="{% url 'holiday-delete' instance.id %}"
+      hx-target="#listContainer"
+      title="{% trans 'Delete' %}"
+    >
+      <ion-icon name="trash-outline"></ion-icon>
+    </a>
+    {% endif %}
+  </div>
diff --git a/base/templates/cbv/holidays/holidays_export.html b/base/templates/cbv/holidays/holidays_export.html
new file mode 100644
index 000000000..e5b184444
--- /dev/null
+++ b/base/templates/cbv/holidays/holidays_export.html
@@ -0,0 +1,80 @@
+{% load static %}
+{% load i18n %}
+{% load i18n %}
+<div class="oh-modal__dialog-header pb-0">
+  <h2 class="oh-modal__dialog-title" id="holidayExportLavel">
+    {% trans "Export Holidays" %}
+  </h2>
+  <button class="oh-modal__close" aria-label="Close">
+    <ion-icon name="close-outline"></ion-icon>
+  </button>
+</div>
+<div class="oh-modal__dialog-body" id="holidayExportModalBody">
+  <form
+    action="{%url 'holiday-info-export' %}"
+    method="get"
+    onsubmit="event.stopPropagation();$(this).parents().find('.oh-modal--show').last().toggleClass('oh-modal--show');"
+    id="holidayExportForm"
+    class="oh-profile-section pt-0"
+  >
+    {% csrf_token %}
+    <div class="oh-dropdown__filter-body">
+      <div class="oh-accordion">
+        <div class="oh-accordion-header">{% trans "Excel columns" %}</div>
+        <div class="oh-accordion-body">
+          <div class="row">
+            {% for field in export_column.selected_fields %}
+            <div class="col-sm-12 col-md-12 col-lg-6">
+              <div class="oh-input-group">
+                <label class="oh-label"> {{ field }} </label>
+              </div>
+            </div>
+            {% endfor %}
+          </div>
+        </div>
+      </div>
+      <div class="oh-accordion">
+        <div class="oh-accordion-header">{% trans "Holiday" %}</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"
+                  for="{{ export_filter.form.from_date.id_for_label }}"
+                  >{% trans "From Date" %}</label
+                >
+                {{export_filter.form.from_date}}
+              </div>
+            </div>
+            <div class="col-sm-12 col-md-12 col-lg-6">
+              <div class="oh-input-group">
+                <label
+                  class="oh-label"
+                  for="{{ export_filter.form.to_date.id_for_label }}"
+                  >{% trans "To Date" %}</label
+                >
+                {{export_filter.form.to_date}}
+              </div>
+            </div>
+            <div class="col-sm-12 col-md-12">
+              <div class="oh-input-group">
+                <label
+                  class="oh-label"
+                  for="{{ export_filter.form.recurring.id_for_label }}"
+                  >{% trans "Recurring" %}</label
+                >
+                {{export_filter.form.recurring}}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="oh-modal__dialog-footer p-0 mt-3">
+      <button type="submit" class="oh-btn oh-btn--secondary oh-btn--shadow">
+        {% trans "Export" %}
+      </button>
+    </div>
+  </form>
+</div>
diff --git a/base/templates/cbv/holidays/holidays_home.html b/base/templates/cbv/holidays/holidays_home.html
new file mode 100644
index 000000000..6821a826d
--- /dev/null
+++ b/base/templates/cbv/holidays/holidays_home.html
@@ -0,0 +1,93 @@
+{% extends "index.html" %}
+{% load i18n %}
+{% load static %}
+{% block content %}
+
+
+<style>
+    .canceled--dot{
+        background-color:red;
+      }
+      .approved--dot{
+        background-color:green;
+      }
+      .approved-True{
+        border-left: 3.4px solid yellowgreen !important;
+        border-radius: 4px 0 0 4px;
+      
+      }
+      .canceled-True {
+      
+        border-left: 3.4px solid red !important;
+        border-radius: 4px 0 0 4px;
+      
+      }
+    </style>
+<div hx-get="{% url "holiday-navbar" %}" hx-trigger="load">
+</div> 
+
+{% include "generic/components.html" %}
+<div
+    class="oh-checkpoint-badge mb-2"
+    id="selectedInstances"
+    data-ids="[]"
+    data-clicked=""
+    style="display: none"
+  ></div>
+
+<div class="oh-wrapper"  
+   id="listContainer">
+  <div class="animated-background">
+</div>
+</div>
+
+<div class="oh-modal" id="holidayImport" role="dialog" aria-labelledby="holidayImport" aria-hidden="true">
+  <div class="oh-modal__dialog">
+      <div class="oh-modal__dialog-header">
+          <h2 class="oh-modal__dialog-title" id="holidayImportLavel">
+              {% trans "Import Holidays" %}
+          </h2>
+          <button class="oh-modal__close" aria-label="Close">
+              <ion-icon name="close-outline"></ion-icon>
+          </button>
+          <div class="oh-modal__dialog-body p-0 pt-2" id="holidayImportModalBody">
+              <form hx-post="{%url 'holidays-info-import' %}" hx-encoding="multipart/form-data" hx-target="#holidayImport" id="holidaysImportForm">
+                  {% csrf_token %}
+                  <div class="oh-modal__dialog-body mr-5" id="uploading" style="display: none">
+                      <div class="loader-container">
+                          <div class="loader"></div>
+                          <div class="loader-text">{% trans "Uploading..." %}</div>
+                      </div>
+                  </div>
+                  <div id="uploadContainer">
+                      <label class="oh-dropdown__import-label" for="importHoliday">
+                          <ion-icon name="cloud-upload" class="oh-dropdown__import-form-icon"></ion-icon>
+                          <span class="oh-dropdown__import-form-title">{% trans "Upload a File" %}</span>
+                          <span class="oh-dropdown__import-form-text">{% trans "Drag and drop files here" %}</span>
+                      </label>
+                      <input type="file" name="holidays_import" id="importHoliday" required />
+                      <div class="d-inline float-end">
+                          <a href="#" style="text-decoration:none; display: inline-block;"
+                              class="oh-dropdown__link holidaysInfoImport" data-toggle="oh-modal-toggle"
+                              data-target="#holidayImport"  onclick="importHolidays();">                              <ion-icon name="cloud-download-outline"
+                                  style="font-size:20px; vertical-align: middle;"></ion-icon>
+                              <span>{% trans "Download Template" %}</span>
+                          </a>
+                      </div>
+                  </div>
+                  <button onclick="
+            validateFile($(this),'importHoliday');
+          " type="submit" class="oh-btn oh-btn--small oh-btn--secondary w-100 mt-3">
+                      {% trans "Upload" %}
+                  </button>
+              </form>
+          </div>
+      </div>
+  </div>
+</div>
+
+<script src="{% static 'cbv/holidays/holiday_action.js' %}"></script>
+<script>
+  $(".reload-record").click()
+</script>
+{% endblock content %}
\ No newline at end of file
diff --git a/base/templates/cbv/mail_log_tab/iframe.html b/base/templates/cbv/mail_log_tab/iframe.html
new file mode 100644
index 000000000..2c4eba2f2
--- /dev/null
+++ b/base/templates/cbv/mail_log_tab/iframe.html
@@ -0,0 +1,58 @@
+<div class="oh-modal__dialog-header">
+    <button class="oh-modal__close" aria-label="Close">
+      <ion-icon name="close-outline"></ion-icon>
+    </button>
+  </div>
+  <div
+  class="oh-modal__dialog-body oh-modal__dialog-relative"
+  style="padding-top: 25px"
+>
+  {% if instance_ids %}
+  <div class="oh-modal__dialog oh-modal__dialog--navigation m-0 p-0">
+    <button
+      hx-get="{{previous_url}}?{{ids_key}}={{instance_id}}&{{request.GET.urlencode}}"
+      hx-target="#genericModalBody"
+      class="oh-modal__diaglog-nav oh-modal__nav-prev"
+    >
+      <ion-icon name="chevron-back-outline"></ion-icon>
+    </button>
+
+    <button
+      hx-get="{{next_url}}?{{ids_key}}={{instance_id}}&{{request.GET.urlencode}}"
+      hx-target="#genericModalBody"
+      class="oh-modal__diaglog-nav oh-modal__nav-next"
+    >
+      <ion-icon name="chevron-forward-outline"></ion-icon>
+    </button>
+  </div>
+  {% endif %}
+<iframe id="myIframe"  height="500" width="600" src="about:blank" marginwidth="50" ></iframe>
+
+
+
+<script>
+    // Get the iframe element
+    var iframe = document.getElementById('myIframe');
+    
+    // Access the iframe's document
+    var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
+    
+    var logSubject = "{{ log.subject|escapejs }}";
+    var logBody = "{{ log.body|escapejs }}";
+    var trimmedBody = logBody.trim();
+    var hasContent = trimmedBody.length > 0;
+    console.log(hasContent)
+    
+    
+    if (hasContent) {
+      content = '<div class="oh-modal__dialog-body">' + logBody + '</div>';
+    } else {
+      content = '<div class="oh-modal__dialog-title" style="padding:25px;">' + logSubject + '</div>';
+    }
+    
+    // Write the content into the iframe
+    iframeDoc.open();
+    iframeDoc.write(content);
+    iframeDoc.close();
+  </script>
+  
\ No newline at end of file
diff --git a/base/templates/cbv/mail_log_tab/mail_log_detail.html b/base/templates/cbv/mail_log_tab/mail_log_detail.html
new file mode 100644
index 000000000..7e634d652
--- /dev/null
+++ b/base/templates/cbv/mail_log_tab/mail_log_detail.html
@@ -0,0 +1,12 @@
+{% load i18n %}
+{% load basefilters %}
+<div class="oh-modal__dialog-header">
+    <button class="oh-modal__close" aria-label="Close">
+      <ion-icon name="close-outline"></ion-icon>
+    </button>
+  </div>
+  {% if not log.body|has_content %}
+  <div class="oh-modal__dialog-title" style="padding:25px;">{{ log.subject }}</div>
+  {% else %}
+  <div class="oh-modal__dialog-body">{{ log.body|safe }}</div>
+{% endif %}
diff --git a/base/templates/cbv/mail_template/form_inherit.html b/base/templates/cbv/mail_template/form_inherit.html
new file mode 100644
index 000000000..268068c04
--- /dev/null
+++ b/base/templates/cbv/mail_template/form_inherit.html
@@ -0,0 +1,15 @@
+{% load i18n %}
+<div>
+    {% include 'generic/horilla_form.html'%}
+
+</div> 
+<script>
+    $(document).ready(function() {
+        var hintHtml = `
+            <div class="form-hint" style="margin-top: 10px; font-size: 14px; color: #888;">
+                {% trans "Hint: Type '{' to get sender or receiver data" %}
+            </div>`;
+    
+        $("#dynamic_field_body").after(hintHtml);
+    });
+</script>   
\ No newline at end of file
diff --git a/base/templates/cbv/multiple_approval_condition/actions.html b/base/templates/cbv/multiple_approval_condition/actions.html
new file mode 100644
index 000000000..1cbd62b23
--- /dev/null
+++ b/base/templates/cbv/multiple_approval_condition/actions.html
@@ -0,0 +1,22 @@
+{% load i18n %}
+{% load basefilters %}
+
+{% if perms.base.change_multipleapprovalcondition or perms.base.delete_multipleapprovalcondition or request.user|is_reportingmanager %}
+    <div onclick="event.stopPropagation();">
+        <div class="oh-btn-group">
+            {% if request.user|is_reportingmanager or perms.base.change_multipleapprovalcondition %}
+                <button title="{% trans 'Edit' %}" class="oh-btn oh-btn--light-bkg w-100" data-toggle="oh-modal-toggle"
+                    data-target="#genericModal" hx-target="#genericModalBody"
+                    hx-get="{% url 'multiple-level-approval-edit' instance.id %}?instance_ids={{instance.ordered_ids }}">
+                    <ion-icon name="create-outline"></ion-icon>
+                </button>
+            {% endif %}
+            {% if request.user|is_reportingmanager or perms.base.delete_multipleapprovalcondition %}
+                <a hx-confirm="{% trans 'Are you sure you want to delete ?' %}" hx-get={% url "multiple-level-approval-delete" instance.id %}
+                    class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100" id="delete-link" title="{% trans 'Delete' %}" hx-target="#multipleApproveCondition">
+                    <ion-icon name="trash-outline"></ion-icon>
+                </a>
+            {% endif %}
+        </div>
+    </div>
+{% endif %}
\ No newline at end of file
diff --git a/base/templates/cbv/multiple_approval_condition/approval_managers.html b/base/templates/cbv/multiple_approval_condition/approval_managers.html
new file mode 100644
index 000000000..3f87d5a6c
--- /dev/null
+++ b/base/templates/cbv/multiple_approval_condition/approval_managers.html
@@ -0,0 +1,6 @@
+{% load basefilters %}
+<div>
+    {% for manager in instance.approval_managers %} 
+   <div class="p-1"> {{ forloop.counter}}. {{ manager|readable }} <br /></div>
+{% endfor %}
+  </div>
\ No newline at end of file
diff --git a/base/templates/cbv/multiple_approval_condition/detail_action.html b/base/templates/cbv/multiple_approval_condition/detail_action.html
new file mode 100644
index 000000000..784c9c568
--- /dev/null
+++ b/base/templates/cbv/multiple_approval_condition/detail_action.html
@@ -0,0 +1,27 @@
+{% load i18n %}
+{% load basefilters %}
+{% if perms.base.change_multipleapprovalcondition or perms.base.delete_multipleapprovalcondition %}
+    <div class="oh-btn-group" style="width: 100%;">
+        {% if request.user|is_reportingmanager or perms.base.change_multipleapprovalcondition %}
+            <button title="{% trans 'Edit' %}" class="oh-btn oh-btn--info w-50" data-toggle="oh-modal-toggle"
+                data-target="#objectUpdateModal" hx-target="#objectUpdateModalTarget"
+                hx-get="{% url 'multiple-level-approval-edit' instance.id %}">
+                <ion-icon name="create-outline" role="img" class="md hydrated" aria-label="create outline"></ion-icon>
+            </button>
+        {% endif %}
+        {% if perms.base.delete_multipleapprovalcondition %}
+            <a hx-confirm="{% trans 'Are you sure you want to delete ?' %}"
+                hx-get="{% url 'multiple-level-approval-delete' instance.id %}?instances_ids={{ request.GET.instance_ids }}"
+                hx-target="#genericModalBody" class="oh-btn oh-btn--secondary w-50" id="delete-link"
+                title="{% trans 'Delete' %}">
+                <ion-icon name="trash-outline"></ion-icon>
+            </a>
+        {% endif %}
+    </div>
+{% endif %}
+
+{% if request.GET.deleted %}
+    <script>
+        $(".reload-record").click()
+    </script>
+{% endif %}
\ No newline at end of file
diff --git a/base/templates/cbv/multiple_approval_condition/form.html b/base/templates/cbv/multiple_approval_condition/form.html
new file mode 100644
index 000000000..e340c7420
--- /dev/null
+++ b/base/templates/cbv/multiple_approval_condition/form.html
@@ -0,0 +1,74 @@
+{% load i18n %}
+{% load static %}
+{% include "generic/components.html" %}
+<div id="formContainer">
+    {% include "generic/horilla_form.html" %}
+
+    <button
+    hidden
+        hx-target="#multiApprovalManager_0"
+        hx-swap="outerHTML"
+        hx-get="{% url 'add-more-approval-managers' %}"
+        role="button"
+        id = "addmangerButton"
+        style="color: green"
+        >{% trans "Add more managers.." %}</button>
+</div>
+
+<script>
+    $(document).ready(function () {
+       
+            
+        $("#id_condition_start_value_parent_div").hide();
+        $("#id_condition_end_value_parent_div").hide();
+        $("#id_condition_operator").change(function() {
+            var selectedValue = $(this).val();
+            if (selectedValue === "range") {
+                $("#id_condition_start_value_parent_div").remove();
+                $("#id_condition_end_value_parent_div").remove();
+            }
+        });
+ 
+        var divElement = document.createElement('div');
+        divElement.id = 'multiApprovalManager_0';
+        divElement.className = 'pt-2';
+        divElement.style.textAlign = 'end';
+        var anchorElement = document.createElement('a');
+        anchorElement.setAttribute('role', 'button');
+        anchorElement.setAttribute('id', 'addmanger');
+        anchorElement.style.color = 'green';
+        anchorElement.innerText = 'Add more managers..';
+
+        divElement.appendChild(anchorElement);
+        var parentDiv = document.getElementById('id_multi_approval_manager_parent_div');
+        if (parentDiv) {
+          
+            parentDiv.insertAdjacentElement('afterend', divElement);
+        } else {
+            console.error("Parent div with ID 'id_multi_approval_manager_parent_div' not found.");
+        }
+
+        $(document).off('click', '#addmanger').on('click', '#addmanger', function(event) {
+            $('#addmangerButton').trigger('click');
+        });
+    
+        $("select").on("select2:select", function (e) {
+            $(this).closest("select")[0].dispatchEvent(new Event("change"));
+          });
+
+
+    });
+   
+   
+
+</script>
+
+
+
+{% comment %} <script>
+    $(document).ready(function () {
+      $("select").on("select2:select", function (e) {
+        $(this).closest("select")[0].dispatchEvent(new Event("change"));
+      });
+    });
+  </script> {% endcomment %}
diff --git a/base/templates/cbv/multiple_approval_condition/form_edit.html b/base/templates/cbv/multiple_approval_condition/form_edit.html
new file mode 100644
index 000000000..2f337f015
--- /dev/null
+++ b/base/templates/cbv/multiple_approval_condition/form_edit.html
@@ -0,0 +1,107 @@
+{% load i18n %}
+{% load static %}
+
+<div id="formContainer">
+    {% include "generic/horilla_form.html" %}
+
+    <button
+    hidden
+        hx-target="#multiApprovalManager_{{managers_count}}"
+        hx-swap="outerHTML"
+        hx-get="{% url 'add-more-approval-managers' %}?managers_count={{ managers_count }}"
+        role="button"
+        id = "addmangerButton"
+        style="color: green"
+        >{% trans "Add more managers.." %}</button>
+</div>
+
+<script>
+    $(document).ready(function () {  
+      
+      $(document).off('click', '#addmanger').on('click', '#addmanger', function(event) {
+        $('#addmangerButton').trigger('click');
+    });
+
+        $("select").on("select2:select", function (e) {
+            $(this).closest("select")[0].dispatchEvent(new Event("change"));
+          });
+        
+        var managersCount = {{ managers_count }};
+         
+
+        for (var i = 1; i < managersCount; i++) {
+            // Construct the ID dynamically
+            var parentDivId = "id_multi_approval_manager_" + i + "_parent_div";
+            var parentDiv = document.getElementById(parentDivId);
+            $(parentDiv).removeClass("col-md-6").addClass("col-md-12");
+            $(parentDiv).find('.oh-label__info').remove();
+        }
+        
+        $("#id_condition_operator").change(function() {
+            var selectedValue = $(this).val();
+            if (selectedValue == "range") {
+                $("#id_condition_start_value_parent_div").remove();
+                $("#id_condition_end_value_parent_div").remove();
+            }
+            else{
+            $("#id_condition_value_parent_div").show();
+            $("#id_condition_start_value_parent_div").remove();
+            $("#id_condition_end_value_parent_div").remove();
+            }
+        });
+        var managerid = "multiApprovalManager_" + managersCount
+        var divElement = document.createElement('div');
+        divElement.id = managerid;
+        divElement.className = 'pt-2';
+        divElement.style.textAlign = 'end';
+        var anchorElement = document.createElement('a');
+        anchorElement.setAttribute('role', 'button');
+        anchorElement.setAttribute('id', 'addmanger');
+        anchorElement.style.color = 'green';
+        anchorElement.innerText = 'Add more managers..';
+
+        divElement.appendChild(anchorElement);
+        var parentDiv = document.getElementById(parentDivId);
+        var parentIdDiv = document.getElementById('id_multi_approval_manager_parent_div');
+        if (parentDiv) {
+          
+            parentDiv.insertAdjacentElement('afterend', divElement);
+        } else {
+          parentIdDiv.insertAdjacentElement('afterend', divElement);
+        }
+
+        var hasRun = false;
+        function executeOnce() {
+          
+          if (hasRun) return;
+          var selectBox = document.querySelector('select[name="condition_operator"]');
+          var selectedValue = selectBox.value;
+          
+          if (selectedValue === "range") {
+            $("#id_condition_value_parent_div").hide();
+          } else {
+            $("#id_condition_start_value_parent_div").hide();
+            $("#id_condition_end_value_parent_div").hide();
+          }
+    
+          hasRun = true; // Set the flag to true after running the code
+        }
+    
+        executeOnce();
+
+      
+        $(document).on('htmx:afterSwap', function(event) {
+          $(document).off('click', '#addshift').on('click', '#addshift', function(event) {
+              $('#addshiftButton').click();
+          });
+          
+      });
+
+
+       
+         
+    });
+   
+   
+
+</script>
diff --git a/base/templates/cbv/multiple_approval_condition/multiple_approval_condition.html b/base/templates/cbv/multiple_approval_condition/multiple_approval_condition.html
new file mode 100644
index 000000000..d0cce1a11
--- /dev/null
+++ b/base/templates/cbv/multiple_approval_condition/multiple_approval_condition.html
@@ -0,0 +1,34 @@
+{% extends "index.html" %}
+{% load i18n %}
+{% load static %}
+
+
+{% block content %}
+<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+
+
+
+
+<meta name="csrf-token" content="{{ csrf_token }}">
+
+
+
+<div hx-get="{% url 'nav-multiple-approval-condition' %}" hx-trigger="load"></div>
+{% comment %} my_app/templates/my_app/generic/index.html {% endcomment %}
+
+
+
+{% include "generic/components.html" %}
+
+
+<div class="oh-checkpoint-badge mb-2" id="selectedInstances" data-ids="[]" data-clicked="" style="display: none"></div>
+
+
+<div class="oh-wrapper"  id="listContainer">
+    <div class="animated-background"></div>
+</div>
+
+
+
+{% endblock %}
\ No newline at end of file
diff --git a/base/templates/cbv/multiple_approval_condition/test.html b/base/templates/cbv/multiple_approval_condition/test.html
new file mode 100644
index 000000000..b3abc9b64
--- /dev/null
+++ b/base/templates/cbv/multiple_approval_condition/test.html
@@ -0,0 +1,3 @@
+<div id="tes">
+    {% include  "generic/horilla_list.html" %}
+</div>
\ No newline at end of file
diff --git a/base/templates/cbv/rotating_shift/actions_rotaing_shift.html b/base/templates/cbv/rotating_shift/actions_rotaing_shift.html
new file mode 100644
index 000000000..0a4825c49
--- /dev/null
+++ b/base/templates/cbv/rotating_shift/actions_rotaing_shift.html
@@ -0,0 +1,40 @@
+{% load i18n %}
+{% load basefilters %}
+
+<div class="oh-btn-group" onclick="event.stopPropagation()">
+    {% if perms.base.change_rotatingshiftassign or request.user|is_reportingmanager %}
+        <a hx-get="{% url 'rotating-shift-assign-update' instance.id %}?instance_ids={{instance.ordered_ids}}"
+            hx-target="#genericModalBody" hx-swap="innerHTML" data-target="#genericModal" data-toggle="oh-modal-toggle"
+            type="button" class="oh-btn oh-btn--light-bkg w-100" title="{% trans 'Update' %}">
+            <ion-icon name="create-outline"></ion-icon>
+        </a>
+    {% endif %}
+    {% if perms.base.add_rotatingshiftassign or request.user|is_reportingmanager %}
+        <a class="oh-btn oh-btn--light-bkg w-100" data-toggle="oh-modal-toggle" data-target="#genericModal"
+            hx-get="{% url 'rotating-shift-assign-duplicate' instance.id %}?{{pg}}" title="{% trans 'Duplicate' %}"
+            hx-target="#genericModalBody" style="cursor: pointer;">
+            <ion-icon name="copy-outline"></ion-icon>
+        </a>
+    {% endif %}
+    {% if perms.base.change_rotatingshiftassign or request.user|is_reportingmanager %}
+        {% if instance.is_active %}
+            <a hx-confirm="{% trans 'Do you want to archive this rotating shift assign?' %}"
+                hx-get="{% url 'rotating-shift-assign-archive' instance.id %}" hx-target="#rotating-shift-container"
+                title="{% trans 'Archive' %}" class="oh-btn oh-btn--danger-outline oh-btn oh-btn--light-bkg w-100">
+                {% comment %} <input type="hidden" name="is_active" value="{% trans 'False' %}" id=""> {% endcomment %}
+                <ion-icon name="archive"></ion-icon>
+            </a>
+        {% else %}
+            <a class="oh-btn oh-btn--danger-outline oh-btn oh-btn--light-bkg w-100" hx-confirm="{% trans 'Do you Want to un-archive this rotating shift assign?' %}" hx-get="{% url 'rotating-shift-assign-archive' instance.id %}?{{pd}}" 
+                hx-target="#rotating-shift-container" title="{% trans 'Un-Archive' %}">
+                <ion-icon name="archive"></ion-icon>
+            </a>
+        {% endif %}
+    {% endif %}
+    {% if perms.base.delete_rotatingshiftassign or request.user|is_reportingmanager %}
+        <a class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100" hx-confirm="{% trans 'Are you sure you want to delete this rotating shift assign?' %}"
+            hx-post="{% url 'rotating-shift-assign-delete' instance.id  %}" hx-target="#rotating-shift-container" title="{% trans 'Remove' %}">
+            <ion-icon name="trash-outline"></ion-icon>
+        </a>
+    {% endif %}
+</div>
\ No newline at end of file
diff --git a/base/templates/cbv/rotating_shift/extended_rotating_shift.html b/base/templates/cbv/rotating_shift/extended_rotating_shift.html
new file mode 100644
index 000000000..80b193d54
--- /dev/null
+++ b/base/templates/cbv/rotating_shift/extended_rotating_shift.html
@@ -0,0 +1,8 @@
+<div id="rotating-shift-container">
+    {% include "generic/horilla_list_table.html" %}
+</div>
+{% if request.GET.deleted %}
+<script> 
+  $("#reloadMessagesButton").click();
+</script>
+{% endif %}
\ No newline at end of file
diff --git a/base/templates/cbv/rotating_shift/rot_shift_form.html b/base/templates/cbv/rotating_shift/rot_shift_form.html
new file mode 100644
index 000000000..b3bc5a25c
--- /dev/null
+++ b/base/templates/cbv/rotating_shift/rot_shift_form.html
@@ -0,0 +1,64 @@
+{% load i18n %}
+{% load static %}
+
+<div id="formContainer">
+    {% include "generic/horilla_form.html" %}
+    
+  
+    <button
+    hidden
+    hx-target="#moreShiftContainer_{{form.shift_counts|add:2}}"
+    hx-swap="outerHTML"
+    hx-post="{% url 'add-remove-shift-fields' %}"
+    role="button"
+    id = "addshiftButton"
+    style="color: green">{% trans "Add more shifts.." %}</button>
+    
+        
+</div>
+
+<script>
+    $(document).ready(function () {
+
+        var shiftCount = {{ form.shift_counts }} - 1;
+        var shiftCounts = {{ form.shift_counts }}
+
+        for (var i = 1; i < shiftCounts; i++) {
+            var parentDivId = "id_shift"+ i +"_parent_div";
+            var parentDiv = document.getElementById(parentDivId);
+            $(parentDiv).removeClass("col-md-6");
+            if (i > 2) {
+                $(parentDiv).find('.oh-label__info').remove();
+            }
+        }
+        
+        var divElement = document.createElement('div');
+        var shifCount = {{form.shift_counts|add:2}}
+        divElement.id = 'moreShiftContainer_'+ shifCount;
+        divElement.className = 'pt-2';
+        divElement.style.textAlign = 'end';
+        var anchorElement = document.createElement('a');
+        anchorElement.setAttribute('role', 'button');
+        anchorElement.setAttribute('id', 'addshift');
+        anchorElement.style.color = 'green';
+        anchorElement.innerText = 'Add more shift..';
+
+        divElement.appendChild(anchorElement);
+        var parentDiv = document.getElementById(parentDivId);
+        if (!document.getElementById('addshift')) {
+        if (parentDiv) {
+          
+            parentDiv.insertAdjacentElement('afterend', divElement);
+        } else {
+            var parentDiv = document.getElementById('id_shift2_parent_div');
+            parentDiv.insertAdjacentElement('afterend', divElement);
+           }
+        }
+
+           $(document).off('click', '#addshift').on('click', '#addshift', function(event) {
+            $('#addshiftButton').click();
+        });
+    
+    });
+   
+</script>
\ No newline at end of file
diff --git a/base/templates/cbv/rotating_shift/rotating_column.html b/base/templates/cbv/rotating_shift/rotating_column.html
new file mode 100644
index 000000000..f94021da6
--- /dev/null
+++ b/base/templates/cbv/rotating_shift/rotating_column.html
@@ -0,0 +1,20 @@
+{% load i18n %}
+            
+              {% if instance.based_on == 'after' %}
+              {% trans "Rotate after" %} {{instance.rotate_after_day}} {% trans "days" %}
+              {% elif instance.based_on == "weekly" %}
+              {% trans "Weekly every" %} {{instance.rotate_every_weekend}}
+              {% elif instance.based_on == "monthly" %}
+              {% if instance.rotate_every == "1" %}
+              {% trans "Rotate every" %} {{instance.rotate_every}}{% trans "st day of month" %}
+              {% elif instance.rotate_every == "2" %}
+              {% trans "Rotate every" %} {{instance.rotate_every}}{% trans "nd day of month" %}
+              {% elif instance.rotate_every == "3" %}
+              {% trans "Rotate every" %} {{instance.rotate_every}}{% trans "rd day of month" %}
+              {% elif instance.rotate_every == "last" %}
+              {% trans "Rotate every last day of month" %}
+              {% else %}
+              {% trans "Rotate every" %} {{instance.rotate_every}}{% trans "th day of month" %}
+              {% endif %}
+              {% endif %}
+          
\ No newline at end of file
diff --git a/base/templates/cbv/rotating_shift/rotating_shift.html b/base/templates/cbv/rotating_shift/rotating_shift.html
new file mode 100644
index 000000000..ddee3b68b
--- /dev/null
+++ b/base/templates/cbv/rotating_shift/rotating_shift.html
@@ -0,0 +1,338 @@
+{% extends "index.html" %}
+{% load i18n %}{% load static %}
+{% block content %}
+<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+
+<meta name="csrf-token" content="{{ csrf_token }}">
+
+<style>
+    .approved--dot {
+        background-color: yellowgreen;
+    }
+
+    .canceled--dot {
+        background-color: red;
+    }
+
+    .approved-True {
+        border-left: 3.4px solid yellowgreen !important;
+        border-radius: 4px 0 0 4px;
+
+    }
+
+    .canceled-True {
+
+        border-left: 3.4px solid red !important;
+        border-radius: 4px 0 0 4px;
+
+    }
+
+    .employee {
+        background-color: yellowgreen;
+    }
+</style>
+
+<div hx-get="{% url 'rotating-shift-request-nav' %}" hx-trigger="load"></div>
+
+{% comment %} my_app/templates/my_app/generic/index.html {% endcomment %}
+
+{% include "generic/components.html" %}
+<div class="oh-checkpoint-badge mb-2" id="selectedInstances" data-ids="[]" data-clicked="" style="display: none"></div>
+<div class="oh-wrapper"  id="listContainer">
+    <div class="animated-background"></div>
+</div>
+<div class="oh-activity-sidebar" id="activitySidebar" style="z-index: 1000">
+    <div class="oh-activity-sidebar__body" id="commentContainer"></div>
+</div>
+
+<div
+    class="oh-modal"
+    id="shiftImport"
+    role="dialog"
+    aria-labelledby="shiftImport"
+    aria-hidden="true"
+>
+    <div class="oh-modal__dialog">
+        <div class="oh-modal__dialog-header">
+            <h2 class="oh-modal__dialog-title" id="shiftImportLavel">
+                {% trans "Import Rotating Shift" %}
+            </h2>
+            <button class="oh-modal__close" aria-label="Close">
+                <ion-icon name="close-outline"></ion-icon>
+            </button>
+            <div
+                class="oh-modal__dialog-body p-0 pt-2"
+                id="shiftImportModalBody"
+            >
+                <form
+                    action="#"
+                    id="shiftImportForm"
+                    enctype="multipart/form-data"
+                >
+                    <div
+                        class="oh-modal__dialog-body mr-5"
+                        id="uploading"
+                        style="display: none"
+                    >
+                        <div class="loader-container">
+                            <div class="loader"></div>
+                            <div class="loader-text">
+                                {% trans "Uploading..." %}
+                            </div>
+                        </div>
+                    </div>
+
+                    <div id="error-container" style="color: red"></div>
+
+                    <div class="modal-body">
+                        {% csrf_token %}
+                        <div class="oh-dropdown__import-form">
+                            <label
+                                class="oh-dropdown__import-label"
+                                for="shiftImportFile"
+                            >
+                                <ion-icon
+                                    name="cloud-upload"
+                                    class="oh-dropdown__import-form-icon md hydrated"
+                                    role="img"
+                                    aria-label="cloud upload"
+                                ></ion-icon>
+                                <span class="oh-dropdown__import-form-title"
+                                    >{% trans "Upload a File" %}</span
+                                >
+                                <span class="oh-dropdown__import-form-text"
+                                    >{% trans "Drag and drop files here" %}
+                                  </span
+                                >
+                            </label>
+                            <input
+                                type="file"
+                                name="file"
+                                id="shiftImportFile"
+                            />
+                            <div class="d-inline float-end">
+                                <a
+                                    href="#"
+                                    style="
+                                        text-decoration: none;
+                                        display: inline-block;
+                                    "
+                                    class="oh-dropdown__link"
+                                    onclick="template_download(event)"
+                                    data-toggle="oh-modal-toggle"
+                                    data-target="#shiftImport"
+                                >
+                                    <ion-icon
+                                        name="cloud-download-outline"
+                                        style="
+                                            font-size: 20px;
+                                            vertical-align: middle;
+                                        "
+                                    ></ion-icon>
+                                    <span>{% trans "Download Template" %}</span>
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="modal-footer d-flex flex-row-reverse">
+                        <input
+                            type="submit"
+                            class="oh-btn oh-btn--small oh-btn--secondary w-100 mt-3"
+                            value="{% trans 'Upload' %}"
+                        />
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+</div>
+<script src="{% static 'cbv/shift_request/shift_request_bulk_actions.js' %}"></script>
+<script src="{% static 'basedOn.js' %}"></script>
+
+<script>
+    $(document).ready(function () {
+        $("#id_field").on("change", function () {
+            $(".filterButton")[0].click();
+        });
+
+        var form = $("#shiftImportForm");
+        form.on("submit", function () {
+            event.preventDefault();
+            $(".oh-dropdown__import-form").css("display", "none");
+            $("#uploading").css("display", "block");
+            var formData = new FormData();
+
+            var fileInput = document.querySelector("#shiftImportFile");
+            formData.append("file", fileInput.files[0]);
+
+            $.ajax({
+                type: "POST",
+                url: "{% url 'rotating-shift-assign-info-import' %}",
+                dataType: "binary",
+                data: formData,
+                processData: false,
+                contentType: false,
+                headers: {
+                    "X-CSRFToken": getCookie("csrftoken"),
+                },
+                xhrFields: {
+                    responseType: "blob",
+                },
+                success: function (response, textStatus, xhr) {
+                    var errorCount = xhr.getResponseHeader("X-Error-Count");
+                    if (
+                        typeof response === "object" &&
+                        response.type == "application/json"
+                    ) {
+                        var reader = new FileReader();
+
+                        reader.onload = function () {
+                            var json = JSON.parse(reader.result);
+
+                            if (json.success_count > 0) {
+                                Swal.fire({
+                                    text: `${json.success_count} Employees Imported Successfully`,
+                                    icon: "success",
+                                    showConfirmButton: false,
+                                    timer: 3000,
+                                    timerProgressBar: true,
+                                }).then(function () {
+                                    window.location.reload();
+                                });
+                            }
+                        };
+                        reader.readAsText(response);
+                        return;
+                    }
+                    if (!$(".file-xlsx-validation").length) {
+                        swal.fire({
+                            text: `You have ${errorCount} errors. Do you want to download the error list?`,
+                            icon: "error",
+                            showCancelButton: true,
+                            showDenyButton: true,
+                            confirmButtonText:
+                                "Download error list & Skip Import",
+                            denyButtonText:
+                                "Downlod error list & Continue Import",
+                            cancelButtonText: "Cancel",
+                            confirmButtonColor: "#d33",
+                            denyButtonColor: "#008000",
+                            customClass: {
+                                container: "custom-swal-container",
+                            },
+                        }).then((result) => {
+                            if (result.isConfirmed) {
+                                const file = new Blob([response], { type: "text/csv" });
+                                const url = URL.createObjectURL(file);
+                                const link = document.createElement("a");
+                                link.href = url;
+                                link.download = "ImportError.csv";
+                                document.body.appendChild(link);
+                                link.click();
+                                document.body.removeChild(link);
+                                URL.revokeObjectURL(url);
+                                link.click();
+                                window.location.reload();
+                            } else if (result.isDenied) {
+                                formData.append("create_rotating_shift", true);
+                                $.ajax({
+                                    type: "POST",
+                                    url: "{% url 'rotating-shift-assign-info-import' %}",
+                                    dataType: "binary",
+                                    data: formData,
+                                    processData: false,
+                                    contentType: false,
+                                    headers: {
+                                        "X-CSRFToken": getCookie("csrftoken"),
+                                    },
+                                    xhrFields: {
+                                        responseType: "blob",
+                                    },
+                                    success: function (
+                                        response,
+                                        textStatus,
+                                        xhr
+                                    ) {
+                                        Swal.fire({
+                                            text: `Rotating Shifts Imported Successfully`,
+                                            icon: "success",
+                                            showConfirmButton: false,
+                                            timer: 3000,
+                                            timerProgressBar: true,
+                                        }).then(function () {
+                                            const file = new Blob([response], { type: "text/csv" });
+                                            const url = URL.createObjectURL(file);
+                                            const link = document.createElement("a");
+                                            link.href = url;
+                                            link.download = "ImportError.csv";
+                                            document.body.appendChild(link);
+                                            link.click();
+                                            document.body.removeChild(link);
+                                            URL.revokeObjectURL(url);
+                                            link.click();
+                                            window.location.reload();
+                                        });
+
+                                        return;
+                                    },
+                                });
+                            } else {
+                                $(".oh-dropdown__import-form").css(
+                                    "display",
+                                    "block"
+                                );
+                                $("#uploading").css("display", "none");
+                            }
+                        });
+                    }
+                },
+                error: function (xhr, textStatus, errorThrown) {
+                    console.error("Error downloading file:", errorThrown);
+                },
+            });
+        });
+    });
+
+    function template_download(e) {
+        e.preventDefault();
+        var languageCode = null;
+        getCurrentLanguageCode(function (code) {
+            languageCode = code;
+            var confirmMessage = downloadMessages[languageCode];
+            Swal.fire({
+                text: confirmMessage,
+                icon: "question",
+                showCancelButton: true,
+                confirmButtonColor: "#008000",
+                cancelButtonColor: "#d33",
+                confirmButtonText: "Confirm",
+            }).then(function (result) {
+                if (result.isConfirmed) {
+                    $.ajax({
+                        url: "{% static 'import_templates/shift_schedule_template.csv' %}",
+                        method: "GET",
+                        xhrFields: {
+                            responseType: "blob",
+                        },
+                        success: function (data) {
+                            var blob = new Blob([data], { type: "text/csv" });
+                            var link = $("<a>")
+                                .attr("href", window.URL.createObjectURL(blob))
+                                .attr("download", "shift_schedule_template.csv")
+                                .appendTo("body");
+                            link[0].click();
+                            link.remove();
+                        },
+                        error: function (xhr, status, error) {
+                            console.error("Failed to download file:", error);
+                        },
+                    });
+                }
+            });
+        });
+    }
+</script>
+
+
+{% endblock content %}
\ No newline at end of file
diff --git a/base/templates/cbv/rotating_shift/rotating_shift_detail_actions.html b/base/templates/cbv/rotating_shift/rotating_shift_detail_actions.html
new file mode 100644
index 000000000..904ff73c1
--- /dev/null
+++ b/base/templates/cbv/rotating_shift/rotating_shift_detail_actions.html
@@ -0,0 +1,81 @@
+{% load basefilters%}
+
+{% load i18n %}
+
+          {% if perms.base.change_rotatingshiftassign  or request.user|is_reportingmanager %}
+            <a class="oh-btn oh-btn-group oh-btn--info" data-toggle="oh-modal-toggle"
+              data-target="#genericModal"
+              hx-get="{% url "rotating-shift-assign-update" instance.id %}?instances_ids={{ request.GET.instance_ids }}"
+              hx-target="#genericModalBody"
+              style="width: 50%;">
+              <button
+                style="
+                  background: none;
+                  color: inherit;
+                  border: none;
+                  padding: 0;
+                  font: inherit;
+                  cursor: pointer;
+                  outline: inherit;
+                "
+                >
+              <ion-icon name="create-outline"> </ion-icon>{% trans "Edit" %}</button>
+            </a>
+            <form class="oh-btn  oh-btn-group oh-btn--primary" style="width: 50%;"
+                  hx-confirm="{% if instance.is_active %}
+                                {% trans 'Do you want to archive this rotating shift assign?' %}
+                              {% else %}
+                                {% trans 'Do you want to un-archive this rotating shift assign?' %}
+                              {% endif %}
+                            "
+                  hx-get="{% url "rotating-shift-assign-archive" instance.id %}?instances_ids={{ request.GET.instance_ids }}"
+                  hx-target="#genericModalBody">
+              <button
+                style="
+                  background: none;
+                  color: inherit;
+                  border: none;
+                  padding: 0;
+                  font: inherit;
+                  cursor: pointer;
+                  outline: inherit;
+                "
+                >
+                <ion-icon name="archive-outline"> </ion-icon>
+                {% if instance.is_active %}
+                  {% trans "Archive" %}
+                {% else %}
+                  {% trans "Un-archive" %}
+                {% endif %}
+              </button>
+            </form>
+          {% endif %}
+          {% if perms.base.delete_rotatingshiftassign or request.user|is_reportingmanager %}
+            <form class="oh-btn  oh-btn-group oh-btn--secondary" style="width: 50%;"
+                hx-confirm="{% trans 'Are you sure you want to delete this rotating shift assign?' %}"
+                hx-post="{% url 'rotating-shift-assign-delete' instance.id %}?instances_ids={{ request.GET.instance_ids }}" hx-target="#genericModalBody"
+              >
+              {% csrf_token %}
+              <button
+                style="
+                  background: none;
+                  color: inherit;
+                  border: none;
+                  padding: 0;
+                  font: inherit;
+                  cursor: pointer;
+                  outline: inherit;"
+              >
+                <ion-icon name="trash-outline"> </ion-icon>{% trans "Delete" %}
+              </button>
+            </form>
+          {% endif %}
+
+
+          {% if request.GET.detail %}
+          <script> 
+            $("#reloadMessagesButton").click();
+             $('.reload-record').click();
+          </script>
+          {% endif %}
+      
\ No newline at end of file
diff --git a/base/templates/cbv/rotating_shift/rotating_shift_filter.html b/base/templates/cbv/rotating_shift/rotating_shift_filter.html
new file mode 100644
index 000000000..2ef9a5bf1
--- /dev/null
+++ b/base/templates/cbv/rotating_shift/rotating_shift_filter.html
@@ -0,0 +1,88 @@
+{% load i18n %} {% load basefilters %}
+<div class="oh-accordion">
+    <div class="oh-accordion-header">{% trans "Rotating Shift" %}</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 "Employee" %}</label>
+            {{form.employee_id}}
+          </div>
+          <div class="oh-input-group">
+            <label class="oh-label">{% trans "Based On" %}</label>
+            {{form.based_on}}
+          </div>
+          <div class="oh-input-group">
+            <label class="oh-label">{% trans "Job Position" %}</label>
+            <label class="oh-label">{% trans "Current Shift" %}</label>
+            {{form.current_shift}}
+          </div>
+        </div>
+        <div class="col-sm-12 col-md-12 col-lg-6">
+          <div class="oh-input-group">
+            <label class="oh-label">{% trans "Rotating Shift" %}</label>
+            {{form.rotating_shift_id}}
+          </div>
+          <div class="oh-input-group">
+            <label class="oh-label">{% trans "Next Switch" %}</label>
+            {{form.next_change_date}}
+          </div>
+          <div class="oh-input-group">
+            <label class="oh-label">{% trans "Next Shift" %}</label>
+            {{form.next_shift}}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="oh-accordion">
+    <div class="oh-accordion-header">{% trans "Work Info" %}</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 "Company" %}</label>
+            {{form.employee_id__employee_work_info__company_id}}
+          </div>
+          <div class="oh-input-group">
+            <label class="oh-label">{% trans "Department" %}</label>
+            {{form.employee_id__employee_work_info__department_id}}
+          </div>
+          <div class="oh-input-group">
+            <label class="oh-label">{% trans "Shift" %}</label>
+            {{form.employee_id__employee_work_info__shift_id}}
+          </div>
+        </div>
+        <div class="col-sm-12 col-md-12 col-lg-6">
+          <div class="oh-input-group">
+            <label class="oh-label">{% trans "Reporting Manager" %}</label>
+            {{form.employee_id__employee_work_info__reporting_manager_id}}
+          </div>
+          <div class="oh-input-group">
+            <label class="oh-label">{% trans "Job Position" %}</label>
+            {{form.employee_id__employee_work_info__job_position_id}}
+          </div>
+          <div class="oh-input-group">
+            <label class="oh-label">{% trans "Work Type" %}</label>
+            {{form.employee_id__employee_work_info__work_type_id}}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="oh-accordion">
+    <div class="oh-accordion-header">{% trans "Advanced" %}</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">
+            <div class="oh-input-group">
+              <label class="oh-label">{% trans "Is Active" %}?</label>
+              {{form.is_active}}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
diff --git a/base/templates/cbv/rotating_shift/rshift_export.html b/base/templates/cbv/rotating_shift/rshift_export.html
new file mode 100644
index 000000000..b1b287ea4
--- /dev/null
+++ b/base/templates/cbv/rotating_shift/rshift_export.html
@@ -0,0 +1,30 @@
+{% load i18n %}
+{% load basefilters %}
+<div class="oh-modal__dialog">
+    <div class="oh-modal__dialog-header">
+      <h2 class="oh-modal__dialog-title" id="rotatingShiftAssignExportLavel">
+        {% trans "Export Rotating Shift Assigns" %}
+      </h2>
+      <button class="oh-modal__close" aria-label="Close">
+        <ion-icon name="close-outline"></ion-icon>
+      </button>
+      <div
+        class="oh-modal__dialog-body p-0 pt-2"
+        id="rotatingShiftAssignExportModalBody"
+      >
+        <form
+          action="{%url 'rotating-shift-assign-info-export' %}"
+          method="get"
+          onsubmit="event.stopPropagation();$(this).parents().find('.oh-modal--show').last().toggleClass('oh-modal--show');"
+          id="rotatingShiftAssignExportForm"
+        >
+          {% csrf_token %} {% include "base/rotating_shift/rotating_shift_assign_export.html" %}
+          <div class="oh-dropdown__filter-footer">
+            <button class="oh-btn oh-btn--secondary oh-btn--small w-100">
+              {% trans "Export" %}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
\ No newline at end of file
diff --git a/base/templates/cbv/rotating_work_type/extended_rotating_work.html b/base/templates/cbv/rotating_work_type/extended_rotating_work.html
new file mode 100644
index 000000000..3a876c5eb
--- /dev/null
+++ b/base/templates/cbv/rotating_work_type/extended_rotating_work.html
@@ -0,0 +1,8 @@
+<div id = "rotating-work-container">
+    {% include "generic/horilla_list_table.html" %}
+    {% if request.GET.deleted %}
+        <script>
+            $('#reloadMessagesButton').click();
+        </script> 
+        {% endif %}
+    </div>
\ No newline at end of file
diff --git a/base/templates/cbv/rotating_work_type/filter_work_rotate.html b/base/templates/cbv/rotating_work_type/filter_work_rotate.html
new file mode 100644
index 000000000..ad74b6145
--- /dev/null
+++ b/base/templates/cbv/rotating_work_type/filter_work_rotate.html
@@ -0,0 +1,89 @@
+{% load i18n %}
+{% comment %} <div class="oh-accordion"> {% endcomment %}
+<div class="oh-accordion-header">{% trans "Rotating Work Type" %}</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 "Employee" %}</label>
+              {{form.employee_id}}
+            </div>
+            <div class="oh-input-group">
+              <label class="oh-label">{% trans "Based On" %}</label>
+              {{form.based_on}}
+            </div>
+            <div class="oh-input-group">
+              <label class="oh-label">{% trans "Current Shift" %}</label>
+              {{form.current_work_type}}
+            </div>
+          </div>
+          <div class="col-sm-12 col-md-12 col-lg-6">
+            <div class="oh-input-group">
+              <label class="oh-label">{% trans "Rotating Shift" %}</label>
+              {{form.rotating_work_type_id}}
+            </div>
+            <div class="oh-input-group">
+              <label class="oh-label">{% trans "Next Switch" %}</label>
+              {{form.next_change_date}}
+            </div>
+            <div class="oh-input-group">
+              <label class="oh-label">{% trans "Next Shift" %}</label>
+              {{form.next_work_type}}
+            </div>
+          </div>
+        </div>
+      </div>
+    
+    <div class="oh-accordion">
+      <div class="oh-accordion-header">{% trans "Work Info" %}</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 "Company" %}</label>
+              {{form.employee_id__employee_work_info__company_id}}
+            </div>
+            <div class="oh-input-group">
+              <label class="oh-label">{% trans "Department" %}</label>
+              {{form.employee_id__employee_work_info__department_id}}
+            </div>
+            <div class="oh-input-group">
+              <label class="oh-label">{% trans "Shift" %}</label>
+              {{form.employee_id__employee_work_info__shift_id}}
+            </div>
+          </div>
+          <div class="col-sm-12 col-md-12 col-lg-6">
+            <div class="oh-input-group">
+              <label class="oh-label">{% trans "Reporting Manager" %}</label>
+              {{form.employee_id__employee_work_info__reporting_manager_id}}
+            </div>
+            <div class="oh-input-group">
+              <label class="oh-label">{% trans "Job Position" %}</label>
+              {{form.employee_id__employee_work_info__job_position_id}}
+            </div>
+            <div class="oh-input-group">
+              <label class="oh-label">{% trans "Work Type" %}</label>
+              {{form.employee_id__employee_work_info__work_type_id}}
+            </div>
+          </div>
+        </div>
+      </div>
+    
+    <div class="oh-accordion">
+      <div class="oh-accordion-header">{% trans "Advanced" %}</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">
+              <div class="oh-input-group">
+                <label class="oh-label">{% trans "Is Active" %}?</label>
+                {{form.is_active}}
+              </div>
+            </div>
+          </div>
+        </div>
+        
+      </div>
+    </div>
+  </div>
+
diff --git a/base/templates/cbv/rotating_work_type/forms/inherit.html b/base/templates/cbv/rotating_work_type/forms/inherit.html
new file mode 100644
index 000000000..bd24dd1ae
--- /dev/null
+++ b/base/templates/cbv/rotating_work_type/forms/inherit.html
@@ -0,0 +1,67 @@
+{% load i18n %}
+<div>
+    {% include "generic/horilla_form.html" %}
+</div>
+<div id="moreWorkTypeContainer_{{form.work_type_counts|add:2}}" class="pt-2" style="text-align: end;">
+<button
+    hidden
+      id="hidden"
+      hx-target="#moreWorkTypeContainer_{{form.work_type_counts|add:2}}"
+      hx-swap="outerHTML"
+      hx-post="{% url 'add-remove-work-type-fields' %}"
+      role="button"
+      style="color: green"
+    >
+      {% trans "Add more work types.." %}
+    </button>
+</div>
+   
+
+   <script>
+    
+        $(document).ready(function() {
+            var workCount = {{ form.work_type_counts }} - 1;
+            var workCounts = {{ form.work_type_counts }};
+            
+            for (var i = 1; i < workCounts; i++) {
+                var parentDivId = "id_work_type" + i + "_parent_div";
+                var parentDiv = document.getElementById(parentDivId);
+                $(parentDiv).removeClass("col-md-6").addClass("col-md-12");
+                if (i > 2) {
+                    $(parentDiv).find('.oh-label__info').remove();
+                }
+            }
+            
+            var divElement = document.createElement('div');
+            var test = {{ form.work_type_counts }} - 1;
+            divElement.id = 'moreWorkTypeContainer_{{form.work_type_counts|add:2}}';
+            divElement.className = 'pt-2';
+            divElement.style.textAlign = 'end';
+
+            var anchorElement = document.createElement('a');
+            anchorElement.setAttribute('role', 'button');
+            anchorElement.setAttribute('id', 'link');
+            anchorElement.style.color = 'green';
+            anchorElement.innerText = 'Add more Work Types..';
+   
+            divElement.appendChild(anchorElement);
+            
+            var parentDivId = "id_work_type" + test + "_parent_div";
+            var parentDiv = document.getElementById(parentDivId);
+            if (!document.getElementById('link')) {
+            if (parentDiv) {
+                parentDiv.insertAdjacentElement('afterend', divElement);
+            } else {
+                var parentDiv = document.getElementById('id_work_type2_parent_div');
+                parentDiv.insertAdjacentElement('afterend', divElement);
+            }
+        }
+       
+        $(document).off('click', '#link').on('click', '#link', function(e) {
+            e.preventDefault();
+            $('#hidden').trigger('click');
+        });
+    });
+            
+</script>
+
diff --git a/base/templates/cbv/rotating_work_type/forms/update_inherit.html b/base/templates/cbv/rotating_work_type/forms/update_inherit.html
new file mode 100644
index 000000000..8d8bb6a5b
--- /dev/null
+++ b/base/templates/cbv/rotating_work_type/forms/update_inherit.html
@@ -0,0 +1,68 @@
+{% load i18n %}
+<div>
+    {% include "generic/horilla_form.html" %}
+</div>
+
+<div id="moreWorkTypeContainer_{{form.work_type_counts|add:2}}" class="pt-2" style="text-align: end; display:none;">
+    <button
+      id="hidden"
+      hx-target="#moreWorkTypeContainer_{{form.work_type_counts|add:2}}"
+      hx-swap="outerHTML"
+      hx-post="{% url 'add-remove-work-type-fields' %}"
+      role="button"
+      style="color: green"
+    >
+      {% trans "Add more work types.." %}
+    </button>
+    <script>
+        
+    
+       $(document).ready(function () {
+               var divElement = document.createElement('div');
+               var test = {{ form.work_type_counts }} - 1
+               divElement.id = 'moreWorkTypeContainer_{{form.work_type_counts|add:2}}';
+               divElement.className = 'pt-2';
+               divElement.style.textAlign = 'end';
+
+               var anchorElement = document.createElement('a');
+               anchorElement.setAttribute('role', 'button');
+               anchorElement.setAttribute('id', 'link');
+               anchorElement.style.color = 'green';
+               anchorElement.innerText = 'Add more Work Types..';
+       
+               divElement.appendChild(anchorElement);
+               var parentDivId = "id_work_type" + test + "_parent_div"
+               var parentDiv = document.getElementById(parentDivId);
+               if (parentDiv) {
+                   parentDiv.insertAdjacentElement('afterend', divElement);
+               } else {
+                var parentDiv = document.getElementById('id_work_type2_parent_div');
+                parentDiv.insertAdjacentElement('afterend', divElement);
+               }
+               
+            });
+        
+
+           $('.oh-modal__close--custom').on('click', function() {
+            console.log('Close button clicked');
+            //location.reload();
+            
+            // Function to reload the record
+            
+        });
+           $(document).off('click', '#link').on('click', '#link', function(e) {
+            e.preventDefault
+               $('#hidden').click();
+           });
+
+            $('.col-12.col-md-6').each(function() {
+                $(this).removeClass('col-md-6').addClass('col-md-12');
+            });
+
+            $(document).on('click', '#delete-link', function(e) {
+                e.preventDefault(); 
+                $(this).parents().eq(3).remove();        
+            });
+</script>
+</div> 
+  
diff --git a/base/templates/cbv/rotating_work_type/rotate_detail_view_actions.html b/base/templates/cbv/rotating_work_type/rotate_detail_view_actions.html
new file mode 100644
index 000000000..ffc3e1595
--- /dev/null
+++ b/base/templates/cbv/rotating_work_type/rotate_detail_view_actions.html
@@ -0,0 +1,76 @@
+{% load basefilters%}
+
+{% load i18n %}
+     
+        
+          {% if perms.base.change_rotatingworktypeassign  or request.user|is_reportingmanager %}
+            <a class="oh-btn oh-btn-group oh-btn--info"
+            data-toggle="oh-modal-toggle"
+              data-target="#genericModal"
+              hx-get="{% url "rotating-work-type-assign-update" instance.id %}"
+              hx-target="#genericModalBody"
+              style="width: 50%;">
+              <ion-icon name="create-outline"> </ion-icon>{% trans "Edit" %}
+            </a>
+            <form class="oh-btn oh-btn-group oh-btn--primary" style="width: 50%;"
+                  hx-confirm="{% if instance.is_active %}
+                                {% trans 'Do you want to archive this rotating work type assign?' %}
+                              {% else %}
+                                {% trans 'Do you want to Un-archive this rotating work type assign?' %}
+                              {% endif %}
+                            "
+                  hx-get="{% url "rotating-work-type-assign-archive" instance.id %}"
+                  hx-target="#genericModalBody">
+              <button
+                style="
+                  background: none;
+                  color: inherit;
+                  border: none;
+                  padding: 0;
+                  font: inherit;
+                  cursor: pointer;
+                  outline: inherit;
+                "
+                >
+                <ion-icon name="archive-outline"> </ion-icon>
+                {% if instance.is_active %}
+                  {% trans "Archive" %}
+                {% else %}
+                  {% trans "Un-archive" %}
+                {% endif %}
+              </button>
+            </form>
+          {% endif %}
+          {% if perms.base.delete_rotatingshiftassign or request.user|is_reportingmanager %}
+            <form class="oh-btn  oh-btn-group oh-btn--secondary" style="width: 50%;"
+                hx-confirm="{% trans 'Are you sure you want to delete this rotating work type assign?' %}"
+                hx-post="{% url 'rotating-work-type-assign-delete' instance.id %}?instances_ids={{request.GET.instance_ids}}" hx-target="#genericModalBody"
+              >
+              {% csrf_token %}
+              <button
+                style="
+                  background: none;
+                  color: inherit;
+                  border: none;
+                  padding: 0;
+                  font: inherit;
+                  cursor: pointer;
+                  outline: inherit;"
+              >
+                <ion-icon name="trash-outline"> </ion-icon>{% trans "Delete" %}
+              </button>
+            </form>
+          {% endif %}
+
+
+{% if request.GET.deleted %}
+  <script>
+    $("#reloadMessagesButton").click()
+  </script> 
+{% endif %}
+ 
+
+
+                 
+                
+                
\ No newline at end of file
diff --git a/base/templates/cbv/rotating_work_type/rotating_action_export.html b/base/templates/cbv/rotating_work_type/rotating_action_export.html
new file mode 100644
index 000000000..dcadd270b
--- /dev/null
+++ b/base/templates/cbv/rotating_work_type/rotating_action_export.html
@@ -0,0 +1,31 @@
+{% load i18n %}
+{% load basefilters%}
+<div class="oh-modal__dialog" id="exampleModal">
+    <div class="oh-modal__dialog-header">
+       
+    <h2 class="oh-modal__dialog-title" id="rotatingWorkTypeAssignExportLavel">
+        {% trans "Export Rotating Work Type Assigns" %} 
+      </h2>
+      <button class="oh-modal__close" aria-label="Close">
+        <ion-icon name="close-outline"></ion-icon>
+      </button>
+      <div
+        class="oh-modal__dialog-body p-0 pt-2"
+        id="rotatingWorkTypeAssignExportModalBody"
+      > 
+   <form
+          action="{%url 'rotating-work-type-assign-export' %}"
+          method="get"
+          onsubmit="event.stopPropagation();$(this).parents().find('.oh-modal--show').last().toggleClass('oh-modal--show');"
+          id="rotatingWorkTypeAssignExportForm"
+        > 
+        {% csrf_token %} {% include "base/rotating_work_type/rotating_work_type_assign_export.html" %}
+          <div class="oh-dropdown__filter-footer">
+            <button class="oh-btn oh-btn--secondary oh-btn--small w-100">
+              {% trans "Export" %}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
\ No newline at end of file
diff --git a/base/templates/cbv/rotating_work_type/rotating_work_home.html b/base/templates/cbv/rotating_work_type/rotating_work_home.html
new file mode 100644
index 000000000..fafb99e16
--- /dev/null
+++ b/base/templates/cbv/rotating_work_type/rotating_work_home.html
@@ -0,0 +1,21 @@
+{% extends "index.html" %}
+{% block content %}
+{% load static %}
+{% load i18n %}
+<script src="{% static '/base/actions.js' %}"></script>
+<div hx-get="{% url 'rotating-navbar-view' %}" hx-trigger="load"></div>
+
+<div class="oh-checkpoint-badge mb-2" id="selectedInstances" data-ids="[]" data-clicked="" style="display: none"></div>
+{% include "generic/components.html" %}
+<div class="oh-wrapper"  id="listContainer">
+    <div class="animated-background"></div>
+</div>
+<div class="oh-activity-sidebar" id="activitySidebar" style="z-index: 1000">
+    <div class="oh-activity-sidebar__body" id="commentContainer"></div>
+</div>
+
+
+<script src="{% static 'basedOn.js' %}"></script>
+<script src="{% static 'cbv/work_type_request/work_request_bulk_action.js' %}"></script>
+
+{% endblock content %}
\ No newline at end of file
diff --git a/base/templates/cbv/rotating_work_type/rotation_col.html b/base/templates/cbv/rotating_work_type/rotation_col.html
new file mode 100644
index 000000000..a3fb8d778
--- /dev/null
+++ b/base/templates/cbv/rotating_work_type/rotation_col.html
@@ -0,0 +1,20 @@
+{% load static %}
+{% load i18n %}
+{% load basefilters %}
+    {% if instance.based_on == 'after' %}
+    {% trans "Rotate after" %} {{instance.rotate_after_day}} {% trans "days" %}
+    {% elif instance.based_on == "weekly" %}
+    {% trans "Weekly every" %} {{instance.rotate_every_weekend}}
+    {% elif instance.based_on == "monthly" %}
+    {% if instance.rotate_every == "1" %}
+    {% trans "Rotate every" %} {{instance.rotate_every}}{% trans "st day of month" %}
+    {% elif instance.rotate_every == "2" %}
+    {% trans "Rotate every" %} {{instance.rotate_every}}{% trans "nd day of month" %}
+    {% elif instance.rotate_every == "3" %}
+    {% trans "Rotate every" %} {{instance.rotate_every}}{% trans "rd day of month" %}
+    {% elif instance.rotate_every == "last" %}
+    {% trans "Rotate every last day of month" %}
+    {% else %}
+    {% trans "Rotate every" %} {{instance.rotate_every}}{% trans "th day of month" %}
+    {% endif %}
+    {% endif %}
\ No newline at end of file
diff --git a/base/templates/cbv/rotating_work_type/work_rotate_actions.html b/base/templates/cbv/rotating_work_type/work_rotate_actions.html
new file mode 100644
index 000000000..8adc82dcb
--- /dev/null
+++ b/base/templates/cbv/rotating_work_type/work_rotate_actions.html
@@ -0,0 +1,46 @@
+{% load i18n %}
+{% load basefilters %}
+
+<div class="oh-btn-group" onclick="event.stopPropagation()">
+    {% if perms.base.change_rotatingworktypeassign or request.user|is_reportingmanager %}
+        <a hx-get="{% url 'rotating-work-type-assign-update' instance.id %}?instance_ids={{instance.ordered_ids}}"
+            hx-target="#genericModalBody" data-target="#genericModal" data-toggle="oh-modal-toggle" type="button"
+            class="oh-btn oh-btn--light-bkg small-button w-100" title="{% trans 'Update' %}">
+            <ion-icon name="create-outline"></ion-icon>
+        </a>
+    {% endif %}
+    {% if perms.base.add_rotatingworktypeassign or request.user|is_reportingmanager %}
+        <a hx-get="{% url 'rotating-work-type-assign-duplicate' instance.id %}" hx-target="#genericModalBody"
+            data-target="#genericModal" data-toggle="oh-modal-toggle" type="button"
+            class="oh-btn oh-btn--light-bkg small-button w-100" title="{% trans 'Duplicate' %}">
+            <ion-icon name="copy-outline"></ion-icon>
+        </a>
+    {% endif %}
+    {% if perms.base.change_rotatingworktypeassign or request.user|is_reportingmanager %}
+        {% if instance.is_active %}
+        <a title="{% trans 'Archive' %}" class="oh-btn oh-btn--danger-outline oh-btn--light-bkg small-button w-100"
+            hx-confirm="{% trans 'Do you want to archive this rotating work type assign?' %}"
+            hx-get="{% url 'rotating-work-type-assign-archive' instance.id %}" hx-target="#rotating-work-container">
+
+            <ion-icon name="archive"></ion-icon>
+        </a>
+        {% else %}
+        <a title="{% trans 'Un-Archive' %}" class="oh-btn oh-btn--danger-outline oh-btn--light-bkg small-button w-100"
+            hx-confirm="{% trans 'Do you want to un-archive this rotating work type assign?' %}"
+            hx-get="{% url 'rotating-work-type-assign-archive' instance.id %}" hx-target="#rotating-work-container">
+
+            <ion-icon name="archive"></ion-icon>
+
+        </a>
+        {% endif %}
+    {% endif %}
+    {% if perms.base.delete_rotatingworktypeassign or request.user|is_reportingmanager %}
+        <a title="{% trans 'Remove' %}" class="oh-btn oh-btn--danger-outline oh-btn--light-bkg small-button w-100" hx-confirm="{% trans 'Are you sure you want to delete this rotating work type assign?' %}"
+            hx-post="{% url 'rotating-work-type-assign-delete' instance.id %}?{{pd}}" hx-target="#rotating-work-container">
+            
+                
+                <ion-icon name="trash-outline"></ion-icon>
+            </button>
+        </a>
+    {% endif %}
+</div>
\ No newline at end of file
diff --git a/base/templates/cbv/settings/company_bulk_update.html b/base/templates/cbv/settings/company_bulk_update.html
new file mode 100644
index 000000000..2c728199a
--- /dev/null
+++ b/base/templates/cbv/settings/company_bulk_update.html
@@ -0,0 +1,7 @@
+{% load static %}
+<div>
+    {% include 'generic/bulk_form.html' %}
+</div>
+<script>
+    {% include 'country.js' %}
+</script>
\ No newline at end of file
diff --git a/base/templates/cbv/settings/company_inherit.html b/base/templates/cbv/settings/company_inherit.html
new file mode 100644
index 000000000..23f65826e
--- /dev/null
+++ b/base/templates/cbv/settings/company_inherit.html
@@ -0,0 +1,16 @@
+<div>
+    {% include "generic/horilla_form.html" %}
+</div>
+<script>
+	{% include 'country.js' %}
+
+    
+    $(document).ready(function() {
+        var country = "{{ form.instance.country |escapejs }}"
+        var state = "{{ form.instance.state |escapejs }}"
+        document.getElementById('id_country').value = country;
+        document.getElementById('id_state').value = state;
+        $("#id_country").trigger('change');
+        $("#id_state").val(state).trigger('change');
+    });
+</script>
\ No newline at end of file
diff --git a/base/templates/cbv/settings/employee_shift_schedule_action.html b/base/templates/cbv/settings/employee_shift_schedule_action.html
new file mode 100644
index 000000000..237a5af7a
--- /dev/null
+++ b/base/templates/cbv/settings/employee_shift_schedule_action.html
@@ -0,0 +1,18 @@
+{% load i18n %}
+<div class="oh-btn-group" onclick="event.stopPropagation();">
+    {% if perms.base.change_employeeshiftschedule %}
+        <a data-toggle="oh-modal-toggle" data-target="#genericModal"
+            hx-get="{% url 'settings-employee-shift-shedule-update' instance.id %}" hx-target="#genericModalBody"
+            class="oh-btn oh-btn--light-bkg w-100" title="{% trans 'Edit' %}">
+            <ion-icon name="create-outline" role="img" class="md hydrated" aria-label="create outline"></ion-icon>
+        </a>
+    {% endif %}
+    {% if perms.base.delete_employeeshiftschedule %}
+        <a class="oh-btn oh-btn--light-bkg w-100 text-danger"
+            hx-confirm="{% trans 'Are you sure you want to delete this schedule?' %}"
+            hx-post="{% url 'employee-shift-schedule-delete' instance.id %}" hx-target="#scheduleTr{{instance.id}}"
+            hx-swap="outerHTML">
+            <ion-icon name="trash-outline" role="img" class="md hydrated" aria-label="trash outline"></ion-icon>
+        </a>
+    {% endif %}
+</div>
\ No newline at end of file
diff --git a/base/templates/cbv/settings/employee_shift_schedule_detail_action.html b/base/templates/cbv/settings/employee_shift_schedule_detail_action.html
new file mode 100644
index 000000000..c07393043
--- /dev/null
+++ b/base/templates/cbv/settings/employee_shift_schedule_detail_action.html
@@ -0,0 +1,31 @@
+{% load i18n %}
+<div class="oh-btn-group w-100" onclick="event.stopPropagation();">
+  {% if perms.base.change_employeeshiftschedule %}
+    <a
+      data-toggle="oh-modal-toggle"
+      data-target="#genericModal"
+      hx-get="{% url 'settings-employee-shift-shedule-update' instance.id %}"
+      hx-target="#genericModalBody"
+      class="oh-btn oh-btn--info w-50"
+      title="{% trans 'Edit' %}"
+    >
+    <ion-icon name="create-outline" role="img" class="md hydrated" aria-label="create outline"></ion-icon>
+    </a>
+  {% endif %} {% if perms.base.delete_employeeshiftschedule %}
+    <form  class="w-50"
+      hx-confirm="{% trans 'Are you sure you want to delete this schedule?' %}"
+      hx-post="{% url 'employee-shift-schedule-delete' instance.id %}"
+      hx-target="#genericModal"
+      hx-swap="innerHTML"
+    >
+      <button
+        type="submit"
+        class="oh-btn oh-btn--danger w-100"
+        title="{% trans 'Remove' %}"
+      >
+        <ion-icon name="trash-outline" role="img" class="md hydrated" aria-label="create outline"></ion-icon>
+      </button>
+      {% csrf_token %}
+    </form>
+  {% endif %}
+</div>
\ No newline at end of file
diff --git a/base/templates/cbv/settings/employee_shift_schedule_form.html b/base/templates/cbv/settings/employee_shift_schedule_form.html
new file mode 100644
index 000000000..faae70374
--- /dev/null
+++ b/base/templates/cbv/settings/employee_shift_schedule_form.html
@@ -0,0 +1,9 @@
+<div id="scheduleForm">
+    {% include "generic/horilla_form.html" %}
+</div>
+
+<script>
+    $(document).ready(function(e){
+        $("[name=is_auto_punch_out_enabled]").change();
+    });
+</script>
\ No newline at end of file
diff --git a/base/templates/cbv/settings/extended_mail_server.html b/base/templates/cbv/settings/extended_mail_server.html
new file mode 100644
index 000000000..d1c437bd6
--- /dev/null
+++ b/base/templates/cbv/settings/extended_mail_server.html
@@ -0,0 +1,18 @@
+{% load i18n static %}
+<div id="mail-server-cont">
+    {% if primary_mail_not_exist %}
+  <div class="alert alert-warning" role="alert">
+    {% trans "Primary mail is not configured! " %}<img id="blink" src="{% static 'images/ui/email.png' %}" width="24" height="24">
+  </div>
+  <script type="text/javascript">
+    var blink =
+        document.getElementById('blink');
+
+    setInterval(function () {
+        blink.style.opacity =
+        (blink.style.opacity == 0 ? 1 : 0);
+    }, 800);
+  </script>
+{% endif %}
+    {% include "generic/horilla_list_table.html" %}
+</div>
\ No newline at end of file
diff --git a/base/templates/cbv/settings/job_position_col_in_job_role.html b/base/templates/cbv/settings/job_position_col_in_job_role.html
new file mode 100644
index 000000000..aa4fcf91a
--- /dev/null
+++ b/base/templates/cbv/settings/job_position_col_in_job_role.html
@@ -0,0 +1,20 @@
+{% load i18n %}
+
+<div class="oh-permission-table--toggle">
+    <div class="d-flex align-items-center">
+        <button class="oh-permission-table__collapse me-2">
+            <ion-icon
+                class="oh-permission-table__collapse-down"
+                title="{% trans 'Reveal' %}"
+                name="chevron-down-outline"
+            ></ion-icon>
+            <ion-icon
+                class="oh-permission-table__collapse-up"
+                title="{% trans 'Collapse' %}"
+                name="chevron-up-outline"
+            ></ion-icon>
+        </button>
+        <span class="oh-permission-table__user">{{instance}}</span>
+    </div>
+</div>
+
diff --git a/base/templates/cbv/settings/job_position_dpt.html b/base/templates/cbv/settings/job_position_dpt.html
new file mode 100644
index 000000000..28d47a238
--- /dev/null
+++ b/base/templates/cbv/settings/job_position_dpt.html
@@ -0,0 +1,19 @@
+{% load i18n %}
+{% load static %}
+<div class="oh-permission-table--toggle">
+        <div class="d-flex align-items-center">
+            <button class="oh-permission-table__collapse me-2">
+                <ion-icon
+                    class="oh-permission-table__collapse-down"
+                    title="{% trans 'Reveal' %}"
+                    name="chevron-down-outline"
+                ></ion-icon>
+                <ion-icon
+                    class="oh-permission-table__collapse-up"
+                    title="{% trans 'Collapse' %}"
+                    name="chevron-up-outline"
+                ></ion-icon>
+            </button>
+            <span class="oh-permission-table__user">{{instance}}</span>
+        </div>
+    </div>
diff --git a/base/templates/cbv/settings/job_role.html b/base/templates/cbv/settings/job_role.html
new file mode 100644
index 000000000..ae444a420
--- /dev/null
+++ b/base/templates/cbv/settings/job_role.html
@@ -0,0 +1,46 @@
+{% load i18n %}
+    <span class="oh-permission-count">
+        {{instance.jobrole_set.all|length}}
+        {% trans "Job Roles" %}
+    </span>
+    {% for role in instance.jobrole_set.all %}
+        <div id="jobRoleDiv{{role.id}}">
+            <span class="oh-user-panel oh-collapse-panel">
+                <div class="oh-profile oh-profile--md">
+                    <div class="oh-profile__avatar mr-1">
+                        <img src="https://ui-avatars.com/api/?name={{role}}&background=random"
+                            class="oh-profile__image" alt="Baby C." />
+                    </div>
+                    <span class="oh-profile__name oh-text--dark">{{role|capfirst}}</span>
+                </div>
+                <div>
+                    <div class="d-flex">
+                        {% if perms.base.change_jobrole %}
+                            <div>
+                                <a hx-get="{% url 'update-job-role' role.id %}" class="oh-btn"
+                                    hx-target="#genericModalBody" data-toggle="oh-modal-toggle"
+                                    data-target="#genericModal" class="mr-3 float-left"
+                                    title="{% trans 'Edit' %}">
+                                    <ion-icon name="pencil-outline"></ion-icon>
+                                </a>
+                            </div>
+                        {% endif %}
+                        {% if perms.base.delete_jobrole %}
+                            <div>
+                                <button
+                                    class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100"
+                                    title="{% trans 'Remove' %}"
+                                    hx-get="{% url 'generic-delete' %}?model=base.jobrole&pk={{role.pk}}" 
+                                    data-toggle="oh-modal-toggle" 
+                                    data-target="#deleteConfirmation" 
+                                    hx-target="#deleteConfirmationBody"
+                                >
+                                    <ion-icon name="close" class="text-danger"></ion-icon>
+                                </button>
+                            </div>
+                        {% endif %}
+                    </div>
+                </div>
+            </span>
+        </div>
+    {% endfor %}
diff --git a/base/templates/cbv/settings/mail_server_action.html b/base/templates/cbv/settings/mail_server_action.html
new file mode 100644
index 000000000..1373e9704
--- /dev/null
+++ b/base/templates/cbv/settings/mail_server_action.html
@@ -0,0 +1,10 @@
+{% load i18n %}
+<div class="oh-btn-group">
+  {% if perms.base.change_dynamicemailconfiguration %}
+    <a hx-get="{% url 'update-mail-server' instance.id %}?instance_ids={{instance.ordered_ids}}" onclick="event.stopPropagation()" hx-target="#genericModalBody" data-toggle="oh-modal-toggle" data-target="#genericModal" class="oh-btn oh-btn--light-bkg w-100" title="Edit"><ion-icon name="create-outline" role="img" class="md hydrated" aria-label="create outline"></ion-icon></a>
+  {% endif %}
+    <a hx-get="{% url 'mail-server-test-email' %}?instance_id={{ instance.id }}" onclick="event.stopPropagation()" hx-target="#mailServerModalBody" data-toggle="oh-modal-toggle" data-target="#mailServerModal" class="oh-btn oh-btn--light-bkg w-100" title="Test email"><ion-icon name="mail-unread-outline" role="img" class="md hydrated" aria-label="at-circle-outline"></ion-icon></a>
+  {% if perms.base.delete_dynamicemailconfiguration %}  
+    <a onclick="event.stopPropagation()" hx-confirm="{% trans 'Do you want to delete this mail server configuration?' %}" hx-post="{% url 'mail-server-delete' %}?ids={{ instance.id }}" data-toggle="oh-modal-toggle" data-target="#objectDetailsModal" hx-target="#objectDetailsModalTarget" type="submit" class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100" title="Remove"><ion-icon name="trash-outline" role="img" class="md hydrated" aria-label="trash outline"></ion-icon></a>
+  {% endif %}
+  </div>
\ No newline at end of file
diff --git a/base/templates/cbv/settings/position_in_job_position.html b/base/templates/cbv/settings/position_in_job_position.html
new file mode 100644
index 000000000..56eabc3d9
--- /dev/null
+++ b/base/templates/cbv/settings/position_in_job_position.html
@@ -0,0 +1,51 @@
+{% load i18n %}
+{% load static %}
+<span class="oh-permission-count">
+        {{instance.job_position.all|length}}
+        {% trans "Job Positions" %}
+    </span>
+    {% for job in instance.job_position.all %}
+		<div id="jobPositionDiv{{job.id}}">
+			<span class="oh-user-panel oh-collapse-panel">
+				<div class="oh-profile oh-profile--md">
+					<div class="oh-profile__avatar mr-1">
+						<img src="https://ui-avatars.com/api/?name={{job}}&background=random"
+							class="oh-profile__image" alt="" />
+					</div>
+					<span class="oh-profile__name oh-text--dark">{{job|capfirst}}</span>
+				</div>
+				<div>
+					<div class="d-flex">
+						{% if perms.base.change_jobposition %}
+							<div>
+								<a
+									class="oh-btn"
+									hx-get="{% url 'job-position-update-form' job.pk %}"
+									hx-target="#genericModalBody"
+									data-toggle="oh-modal-toggle"
+									data-target="#genericModal"
+									title="{% trans 'Edit' %}"
+								>
+									<ion-icon name="pencil"></ion-icon>
+								</a>
+							</div>
+						{% endif %}
+						{% if perms.base.delete_jobposition %}
+						<div>
+							<button
+								class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100"
+								title="{% trans 'Remove' %}"
+								hx-get="{% url 'generic-delete' %}?model=base.jobposition&pk={{job.pk}}" 
+								data-toggle="oh-modal-toggle" 
+								data-target="#deleteConfirmation" 
+								hx-target="#deleteConfirmationBody"
+							>
+								<ion-icon name="close" class="text-danger"></ion-icon>
+							</button>
+						</div>
+						{% endif %}
+					</div>
+				</div>
+			</span>
+		</div>
+{% endfor %}
\ No newline at end of file
diff --git a/base/templates/cbv/shift_request/actions_shift_requst.html b/base/templates/cbv/shift_request/actions_shift_requst.html
new file mode 100644
index 000000000..d75090373
--- /dev/null
+++ b/base/templates/cbv/shift_request/actions_shift_requst.html
@@ -0,0 +1,38 @@
+{% load basefilters %}
+{% load static %}
+{% load i18n %}
+
+
+{% load i18n %}
+
+{% if request.user.employee_get == instance.employee_id or perms.base.change_shiftrequest or perms.base.add_shiftrequest or perms.base.delete_shiftrequest or request.user|is_reportingmanager %}
+<div class="oh-btn-group" onclick="event.stopPropagation();">
+    {% if request.user.employee_get == instance.employee_id or perms.base.change_shiftrequest or request.user|is_reportingmanager %}
+        {% if instance.approved == False and not instance.canceled %}
+            <a hx-get="{% url 'shift-request-update' instance.id %}?instance_ids={{instance.ordered_ids}}"
+                hx-target='#genericModalBody' data-toggle="oh-modal-toggle" data-target='#genericModal'
+                class="oh-btn oh-btn--light-bkg w-100" title="{% trans 'Edit' %}"><ion-icon
+                    name="create-outline"></ion-icon></a>
+        {% else %}
+            <button class="oh-btn oh-btn--light-bkg w-100" disabled><ion-icon name="create-outline"></ion-icon></button>
+        {% endif %}
+    {% endif %}
+    {% if request.user.employee_get == instance.employee_id or perms.base.add_shiftrequest or request.user|is_reportingmanager %}
+        <a class="oh-btn oh-btn--light-bkg w-100" data-toggle="oh-modal-toggle" data-target="#genericModal"
+            hx-get="{% url 'shift-request-duplicate' instance.id %}?{{pg}}" title="{% trans 'Duplicate' %}"
+            hx-target="#genericModalBody" style="cursor: pointer;">
+            <ion-icon name="copy-outline"></ion-icon>
+        </a>
+    {% endif %}
+    {% if request.user.employee_get == instance.employee_id or perms.base.delete_shiftrequest or request.user|is_reportingmanager %}
+        {% if instance.approved == False and instance.canceled == False %}
+            <a class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100" hx-confirm="{% trans 'Are you sure you want to delete this shift request?' %}" 
+                hx-post="{% url 'shift-request-delete' instance.id %}" hx-target="#shift-container" title="{% trans 'Remove' %}">
+                <ion-icon name="trash-outline"></ion-icon>
+            </a>
+        {% else %}
+            <button class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100" disabled><ion-icon name="trash-outline"></ion-icon></button>
+        {% endif %}
+    {% endif %}
+</div>
+{% endif %}
\ No newline at end of file
diff --git a/base/templates/cbv/shift_request/allocated_confirm_action.html b/base/templates/cbv/shift_request/allocated_confirm_action.html
new file mode 100644
index 000000000..7b19a0e6a
--- /dev/null
+++ b/base/templates/cbv/shift_request/allocated_confirm_action.html
@@ -0,0 +1,75 @@
+{% load i18n %}
+{% load basefilters %}
+{% load static %}
+<div class="oh-sticky-table__right" onclick="event.stopPropagation();">
+
+    <div class="oh-btn-group" >
+
+      {% if request.user.employee_get == instance.reallocate_to and not request.user|is_reportingmanager %}
+        {% if instance.approved == True or instance.canceled == True or instance.reallocate_approved == True %}
+          <button class='oh-btn oh-btn--success w-100' disabled>
+            <ion-icon name="checkmark-outline"></ion-icon>
+          </button>
+        {% else %}
+          <a href="/shift-allocation-request-approve/{{instance.id}}/" onclick="return confirm('{% trans "Are you available for this shift reallocation?" %}')" class='oh-btn oh-btn--success w-100' title='{% trans "Available" %}'>
+            <ion-icon name="checkmark-outline"></ion-icon>
+          </a>
+        {% endif %}
+      {% endif %}
+
+      {% if perms.base.change_shiftrequest or request.user|is_reportingmanager %}
+        {% if instance.approved == False and instance.canceled == False %}
+          <a href="/shift-request-approve/{{instance.id}}/" onclick="return confirm('{% trans "Do you want to approve this request?" %}')" class='oh-btn oh-btn--success w-100' title='{% trans "Approve" %}'>
+            <ion-icon class="me-1" name="checkmark-outline"></ion-icon>
+          </a>
+
+        {% else %}
+          <button class='oh-btn oh-btn--success w-100' disabled>
+            <ion-icon class="me-1" name="checkmark-outline"></ion-icon>
+          </button>
+        {% endif %}
+      {% endif %}
+
+      {% if request.user.employee_get == instance.reallocate_to and not request.user|is_reportingmanager %}
+        {% if instance.reallocate_canceled == True or instance.approved == True %}
+          <button class='oh-btn oh-btn--danger w-100' disabled>
+            <ion-icon name="close-circle-outline"></ion-icon>
+          </button>
+        {% else %}
+          <a href="/shift-allocation-request-cancel/{{instance.id}}/" onclick="return confirm('{% trans "Are you not available for this shift reallocation?" %}')" class='oh-btn oh-btn--danger w-100' title='{% trans "Not available" %}'>
+            <ion-icon name="close-circle-outline"></ion-icon>
+          </a>
+        {% endif %}
+      {% endif %}
+
+      {% if request.user.employee_get == instance.employee_id and not request.user|is_reportingmanager %}
+
+        {% if instance.approved == False and not instance.canceled   %}
+          <a hx-get="{% url 'shift-allocation-request-update' instance.id %}" hx-target='#shiftRequestModalUpdateBody' data-toggle="oh-modal-toggle" data-target='#shiftRequestModalUpdate' class="oh-btn oh-btn--light-bkg w-50" title="{% trans 'Edit' %}"><ion-icon name="create-outline"></ion-icon></a>
+        {% else %}
+          <button class="oh-btn oh-btn--light-bkg w-50" disabled><ion-icon name="create-outline" ></ion-icon></button></td>
+        {% endif %}
+        {% if instance.approved == False and instance.canceled == False %}
+          <form action="{% url 'shift-request-delete' instance.id  %}" onsubmit="return confirm('{% trans "Are you sure you want to delete this shift request?" %}');" method='post' class="w-50">
+            {% csrf_token %}
+            <button type='submit' class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100" title="{% trans 'Remove' %}"><ion-icon name="trash-outline"></ion-icon></button>
+          </form>
+        {% else %}
+          <button class="oh-btn oh-btn--light-bkg w-50" disabled><ion-icon name="trash-outline"></ion-icon></button></td>
+        {% endif %}
+      {% endif %}
+
+
+      {% if request.user|is_reportingmanager %}
+        {% if instance.canceled == True %}
+          <button disabled class='oh-btn oh-btn--danger w-100'>
+            <ion-icon class="me-1" name="close-circle-outline"></ion-icon>
+          </button>
+        {% else %}
+          <a href="/shift-allocation-request-cancel/{{instance.id}}/" onclick="return confirm('{% trans "Do you want to reject this request?" %}')" class='oh-btn oh-btn--danger w-100' title='{% trans "Reject" %}'>
+            <ion-icon class="me-1" name="close-circle-outline"></ion-icon>
+          </a>
+        {% endif %}
+      {% endif %}
+    </div>
+  </div>
diff --git a/base/templates/cbv/shift_request/comment.html b/base/templates/cbv/shift_request/comment.html
new file mode 100644
index 000000000..1d4b42b3f
--- /dev/null
+++ b/base/templates/cbv/shift_request/comment.html
@@ -0,0 +1,10 @@
+{% load basefilters %}
+{% if request.user.employee_get == instance.employee_id or perms.base.view_shiftrequestcomment or request.user|is_reportingmanager %}
+    <div onclick="event.stopPropagation();">
+        <button type="button" hx-get="{% url 'view-shift-comment' instance.id %}" hx-target="#commentContainer"
+            data-target="#activitySidebar" title="View Comment" class="oh-btn oh-btn--light oh-activity-sidebar__open w-100"
+            style="flex: 1 0 auto; width: 20px; height: 40.68px; padding: 0" onclick="event.stopPropagation()">
+            <ion-icon name="newspaper-outline" role="img" class="md hydrated" aria-label="newspaper outline"></ion-icon>
+        </button>
+    </div>
+{% endif %}
\ No newline at end of file
diff --git a/base/templates/cbv/shift_request/confirm_allocated.html b/base/templates/cbv/shift_request/confirm_allocated.html
new file mode 100644
index 000000000..73200843d
--- /dev/null
+++ b/base/templates/cbv/shift_request/confirm_allocated.html
@@ -0,0 +1,28 @@
+
+{% load basefilters %}
+{% load i18n %}
+
+{% if perms.base.change_shiftrequest or request.user|is_reportingmanager %}
+                      <div class="" onclick="event.stopPropagation();">
+                        <div class="oh-btn-group" >
+                          {% if instance.approved == False and not instance.canceled   %}
+                            <a hx-get="{% url 'shift-allocation-request-update' instance.id %}?instance_ids={{instance.ordered_ids}}" hx-target='#genericModalBody' data-toggle="oh-modal-toggle" data-target='#genericModal' class="oh-btn oh-btn--light-bkg w-50" title="{% trans 'Edit' %}"><ion-icon name="create-outline"></ion-icon></a>
+                          {% else %}
+                            <button class="oh-btn oh-btn--light-bkg w-50" disabled><ion-icon name="create-outline" ></ion-icon></button>
+                          {% endif %}
+                          {% if instance.approved == False and instance.canceled == False %}
+                            <form action="{% url 'shift-request-delete' instance.id  %}" onsubmit="return confirm('{% trans "Are you sure you want to delete this shift request?" %}');" method='post' class="w-50">
+                              {% csrf_token %}
+                              <button type='submit' class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100" title="{% trans 'Remove' %}"><ion-icon name="trash-outline"></ion-icon></button>
+                            </form>
+                          {% elif perms.base.change_shiftrequest or request.user|is_reportingmanager %}
+                            <form action="{% url 'shift-request-delete' instance.id  %}" onsubmit="return confirm('{% trans "Are you sure you want to delete this shift request?" %}');" method='post' class="w-50">
+                              {% csrf_token %}
+                              <button type='submit' class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100" title="{% trans 'Remove' %}"><ion-icon name="trash-outline"></ion-icon></button>
+                            </form>
+                          {% else %}
+                            <button class="oh-btn oh-btn--light-bkg w-50" disabled><ion-icon name="trash-outline"></ion-icon></button>
+                          {% endif %}
+                        </div>
+                      </div>
+                    {% endif %}
\ No newline at end of file
diff --git a/base/templates/cbv/shift_request/confirmations.html b/base/templates/cbv/shift_request/confirmations.html
new file mode 100644
index 000000000..26e87cfc9
--- /dev/null
+++ b/base/templates/cbv/shift_request/confirmations.html
@@ -0,0 +1,38 @@
+{% load basefilters %}
+{% load i18n %}
+
+{% if perms.base.change_shiftrequest or request.user|is_reportingmanager %}
+<div class="w-100" onclick="event.stopPropagation();">
+  <div class="oh-btn-group" >
+      {% if instance.approved == False and instance.canceled == False %}
+        <a  href="{% url 'shift-request-approve' instance.id %}"
+            title="{% trans 'Approve' %}"
+            onclick="return confirm('{% trans "Do you want to approve this request?" %}')"
+            class="oh-btn oh-btn--success w-100">
+            <ion-icon class="me-1" name="checkmark-outline"></ion-icon>
+        </a>
+      {% else %}
+        <a  href="#" title="{% trans 'Approve' %}"
+            class="oh-btn oh-btn--success oh-btn--disabled w-100">
+            <ion-icon class="me-1" name="checkmark-outline"></ion-icon>
+        </a>
+      {% endif %}
+
+      {% if instance.canceled == False %}
+        <a
+            href="{% url 'shift-request-cancel' instance.id %}"
+            title="{% trans 'Reject' %}"
+            onclick="return confirm('{% trans "Do you want to reject this request?" %}')"
+            class="oh-btn oh-btn--danger w-100">
+            <ion-icon class="me-1" name="close-circle-outline"></ion-icon>
+        </a>
+      {% else %}
+        <a type="submit" href="#" title="{% trans 'Reject' %}"
+            class="oh-btn oh-btn--danger oh-btn--disabled
+            w-100" >
+            <ion-icon class="me-1" name="close-circle-outline"></ion-icon>
+        </a>
+      {% endif %}
+  </div>
+</div>
+{% endif %}
diff --git a/base/templates/cbv/shift_request/dummy.html b/base/templates/cbv/shift_request/dummy.html
new file mode 100644
index 000000000..3d2b96455
--- /dev/null
+++ b/base/templates/cbv/shift_request/dummy.html
@@ -0,0 +1,26 @@
+{% load basefilters %}
+{% load i18n %}
+{% if perms.base.change_shiftrequest or request.user|is_reportingmanager %}
+                      <div class="" onclick="event.stopPropagation();">
+                        <div class="oh-btn-group" >
+                          {% if instance.approved == False and not instance.canceled   %}
+                            <a hx-get="{% url 'shift-allocation-request-update' instance.id %}" hx-target='#genericModalBody' data-toggle="oh-modal-toggle" data-target='#genericModal' class="oh-btn oh-btn--light-bkg w-50" title="{% trans 'Edit' %}"><ion-icon name="create-outline"></ion-icon></a>
+                          {% else %}
+                            <button class="oh-btn oh-btn--light-bkg w-50" disabled><ion-icon name="create-outline" ></ion-icon></button></td>
+                          {% endif %}
+                          {% if instance.approved == False and instance.canceled == False %}
+                            <form action="{% url 'shift-request-delete' instance.id  %}" onsubmit="return confirm('{% trans "Are you sure you want to delete this shift request?" %}');" method='post' class="w-50">
+                              {% csrf_token %}
+                              <button type='submit' class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100" title="{% trans 'Remove' %}"><ion-icon name="trash-outline"></ion-icon></button>
+                            </form>
+                          {% elif perms.base.change_shiftrequest or request.user|is_reportingmanager %}
+                            <form action="{% url 'shift-request-delete' instance.id  %}" onsubmit="return confirm('{% trans "Are you sure you want to delete this shift request?" %}');" method='post' class="w-50">
+                              {% csrf_token %}
+                              <button type='submit' class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100" title="{% trans 'Remove' %}"><ion-icon name="trash-outline"></ion-icon></button>
+                            </form>
+                          {% else %}
+                            <button class="oh-btn oh-btn--light-bkg w-50" disabled><ion-icon name="trash-outline"></ion-icon></button></td>
+                          {% endif %}
+                        </div>
+                      </div>
+                    {% endif %}
diff --git a/base/templates/cbv/shift_request/export_shift.html b/base/templates/cbv/shift_request/export_shift.html
new file mode 100644
index 000000000..1a1362dff
--- /dev/null
+++ b/base/templates/cbv/shift_request/export_shift.html
@@ -0,0 +1,30 @@
+{% load i18n %} {% load basefilters %}
+
+  <div class="oh-modal__dialog">
+    <div class="oh-modal__dialog-header">
+      <h2 class="oh-modal__dialog-title" id="shiftRequestsExportLavel">
+        {% trans "Export Shift Requests" %}
+      </h2>
+      <button class="oh-modal__close" aria-label="Close">
+        <ion-icon name="close-outline"></ion-icon>
+      </button>
+      <div
+        class="oh-modal__dialog-body p-0 pt-2"
+        id="shiftRequestsExportModalBody"
+      >
+        <form
+          action="{%url 'shift-request-info-export' %}"
+          method="get"
+          onsubmit="event.stopPropagation();$(this).parents().find('.oh-modal--show').last().toggleClass('oh-modal--show');"
+          id="shiftRequestsExportForm"
+        >
+          {% csrf_token %} {% include "shift_request/shift_request_export.html" %}
+          <div class="oh-dropdown__filter-footer">
+            <button class="oh-btn oh-btn--secondary oh-btn--small w-100">
+              {% trans "Export" %}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  
diff --git a/base/templates/cbv/shift_request/extended_shift.html b/base/templates/cbv/shift_request/extended_shift.html
new file mode 100644
index 000000000..a7c8adea3
--- /dev/null
+++ b/base/templates/cbv/shift_request/extended_shift.html
@@ -0,0 +1,8 @@
+<div id="shift-container">
+    {% include "generic/horilla_list_table.html" %}
+</div>
+{% if request.GET.deleted %}
+<script> 
+  $("#reloadMessagesButton").click();
+</script>
+{% endif %}
\ No newline at end of file
diff --git a/base/templates/cbv/shift_request/filter.html b/base/templates/cbv/shift_request/filter.html
new file mode 100644
index 000000000..88b8a35fc
--- /dev/null
+++ b/base/templates/cbv/shift_request/filter.html
@@ -0,0 +1,155 @@
+ {% load i18n %} {% load basefilters %}
+
+<div class="oh-dropdown__filter-body">
+    <div class="oh-accordion">
+      <div class="oh-accordion-header">
+        {% trans "Work Info" %}
+      </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 "Employee" %}</label
+              >
+              {{form.employee_id}}
+            </div>
+            <div class="oh-input-group">
+              <label class="oh-label"
+                >{% trans "Job Position" %}</label
+              >
+              {{form.employee_id__employee_work_info__job_position_id}}
+            </div>
+            <div class="oh-input-group">
+              <label class="oh-label">{% trans "Shift" %}</label>
+              {{form.employee_id__employee_work_info__shift_id}}
+            </div>
+            <div class="oh-input-group">
+              <label class="oh-label"
+                >{% trans "Company" %}</label
+              >
+              {{form.employee_id__employee_work_info__company_id}}
+            </div>
+            <div class="oh-input-group">
+              <label class="oh-label"
+                >{% trans "Is Active" %}?</label
+              >
+              {{form.employee_id__is_active}}
+            </div>
+          </div>
+          <div class="col-sm-12 col-md-12 col-lg-6">
+            <div class="oh-input-group">
+              <label class="oh-label"
+                >{% trans "Department" %}</label
+              >
+              {{form.employee_id__employee_work_info__department_id}}
+            </div>
+            <div class="oh-input-group">
+              <label class="oh-label"
+                >{% trans "Job Role" %}</label
+              >
+              {{form.employee_id__employee_work_info__job_role_id}}
+            </div>
+            <div class="oh-input-group">
+              <label class="oh-label"
+                >{% trans "Work Type" %}</label
+              >
+              {{form.employee_id__employee_work_info__work_type_id}}
+            </div>
+            <div class="oh-input-group">
+              <label class="oh-label"
+                >{% trans "Reporting Manager" %}</label
+              >
+              {{form.employee_id__employee_work_info__reporting_manager_id}}
+            </div>
+            <div class="oh-input-group">
+              <label class="oh-label">{% trans "Gender" %}</label>
+              {{form.employee_id__gender}}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="oh-accordion">
+      <div class="oh-accordion-header">
+        {% trans "Shift Request" %}
+      </div>
+      <div class="oh-accordion-body">
+        <!-- First Row: Requested Shift and Previous Shift -->
+        <div class="row">
+          <div class="col-sm-12 col-md-6">
+            <div class="oh-input-group">
+              <label class="oh-label">{% trans "Requested Shift" %}</label>
+              {{ form.shift_id }}
+            </div>
+          </div>
+          <div class="col-sm-12 col-md-6">
+            <div class="oh-input-group">
+              <label class="oh-label">{% trans "Previous Shift" %}</label>
+              {{ form.previous_shift_id }}
+            </div>
+          </div>
+        </div>
+        
+        <!-- Second Row: Requested Date and Approved -->
+        <div class="row">
+          <div class="col-sm-12 col-md-6">
+            <div class="oh-input-group">
+              <label class="oh-label">{% trans "Requested Date" %}</label>
+              {{ form.requested_date }}
+            </div>
+          </div>
+          <div class="col-sm-12 col-md-6">
+            <div class="oh-input-group">
+              <label class="oh-label">{% trans "Approved" %}?</label>
+              {{ form.approved }}
+            </div>
+          </div>
+        </div>
+        
+        <!-- Third Row: Canceled and Requested -->
+        <div class="row">
+          <div class="col-sm-12 col-md-6">
+            <div class="oh-input-group">
+              <label class="oh-label">{% trans "Canceled" %}?</label>
+              {{ form.canceled }}
+            </div>
+          </div>
+          <div class="col-sm-12 col-md-6">
+            <div class="oh-input-group">
+              <label class="oh-label">{% trans "Requested?" %}</label>
+              {{ form.requested }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    
+    
+    
+    <div class="oh-accordion">
+      <div class="oh-accordion-header">
+        {% trans "Advanced" %}
+      </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 "Requested Date From" %}</label
+              >
+              {{form.requested_date__gte}}
+            </div>
+          </div>
+          <div class="col-sm-12 col-md-12 col-lg-6">
+            <div class="oh-input-group">
+              <label class="oh-label"
+                >{% trans "Requested Date Till" %}</label
+              >
+              {{form.requested_date__lte}}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
\ No newline at end of file
diff --git a/base/templates/cbv/shift_request/shift_deatil_actions.html b/base/templates/cbv/shift_request/shift_deatil_actions.html
new file mode 100644
index 000000000..228886fc7
--- /dev/null
+++ b/base/templates/cbv/shift_request/shift_deatil_actions.html
@@ -0,0 +1,33 @@
+{% load basefilters %}
+{% load i18n %}
+
+{% if instance.approved == False and not instance.canceled   %}
+            <a hx-get="{% url 'shift-request-update' instance.id %}" hx-target='#genericModalBody' data-toggle="oh-modal-toggle" data-target='#genericModal' class="oh-btn oh-btn--info w-50" title="{% trans 'Edit' %}"><ion-icon name="create-outline"></ion-icon></a>
+            {% else %}
+            <button class="oh-btn oh-btn--info w-50" disabled><ion-icon name="create-outline" ></ion-icon></button></td>
+            {% endif %}
+             <!-- end of edit button  -->
+             <!-- start of remove button  -->
+            {% if instance.approved == False and instance.canceled == False %}
+                <form hx-confirm="{% trans "Are you sure you want to delete this shift request?" %}"
+                hx-post="{% url 'shift-request-delete' instance.id %}?instances_ids={{ request.GET.instance_ids }}"
+                hx-target="#genericModalBody"  style="width: 50%">
+                    {% csrf_token %}
+                    <button data-action="delete" type='submit' class="oh-btn oh-btn--secondary w-100" title="{% trans 'Remove' %}"><ion-icon name="trash-outline"></ion-icon></button>
+                </form>
+            {% comment %} {% elif perms.base.change_shiftrequest or request.user|is_reportingmanager %}
+                <form action="{% url 'shift-request-delete' instance.id  %}" onsubmit="return confirm('{% trans "Are you sure you want to delete this shift request?" %}');" method='post' style="width: 50%">
+                    {% csrf_token %}
+                    <button type='submit' class="oh-btn oh-btn--secondary w-100" title="{% trans 'Remove' %}"><ion-icon name="trash-outline"></ion-icon></button>
+                </form> {% endcomment %}
+            {% else %}
+                <button class="oh-btn oh-btn--secondary w-50" disabled><ion-icon name="trash-outline"></ion-icon></button></td>
+            {% endif %}
+            {% if request.GET.deleted %}
+            <script>
+                $("#reloadMessagesButton").click()
+                $(".reload-record").click()
+            </script> 
+            {% endif %}
+
+            
\ No newline at end of file
diff --git a/base/templates/cbv/shift_request/shift_request.html b/base/templates/cbv/shift_request/shift_request.html
new file mode 100644
index 000000000..1b999335e
--- /dev/null
+++ b/base/templates/cbv/shift_request/shift_request.html
@@ -0,0 +1,74 @@
+{% extends "index.html" %}
+{% load i18n %}{% load static %}
+
+
+{% block content %}
+
+
+
+<meta name="csrf-token" content="{{ csrf_token }}">
+
+
+
+<style>
+    .approved--dot {
+        background-color: yellowgreen;
+    }
+
+    .canceled--dot {
+        background-color: red;
+    }
+
+    .requested--dot {
+        background-color: orange;
+    }
+
+    .approved-True {
+        border-left: 3.4px solid yellowgreen !important;
+        border-radius: 4px 0 0 4px;
+
+    }
+
+    .canceled-True {
+
+        border-left: 3.4px solid red !important;
+        border-radius: 4px 0 0 4px;
+
+    }
+
+    .requested-False-False {
+
+        border-left: 3.4px solid orange !important;
+        border-radius: 4px 0 0 4px;
+
+    }
+
+    .employee {
+        background-color: yellowgreen;
+    }
+</style>
+
+<div hx-get="{% url 'shift-request-nav' %}" hx-trigger="load"></div>
+{% comment %} my_app/templates/my_app/generic/index.html {% endcomment %}
+
+{% include "generic/components.html" %}
+
+
+<div class="oh-checkpoint-badge mb-2" id="selectedInstances" data-ids="[]" data-clicked="" style="display: none"></div>
+
+<div class="oh-checkpoint-badge mb-2" id="shiftselectedInstances" data-ids="[]" data-clicked="" style="display: none">
+</div>
+<div class="oh-checkpoint-badge mb-2" id="allocatedselectedInstances" data-ids="[]" data-clicked="" style="display: none"></div>
+
+
+<div class="oh-wrapper"  id="listContainer">
+    <div class="animated-background"></div>
+</div>
+
+<div class="oh-activity-sidebar" id="activitySidebar" style="z-index: 1000">
+    <div class="oh-activity-sidebar__body" id="commentContainer"></div>
+</div>
+<script src="{% static 'cbv/shift_request/shift_request_bulk_actions.js' %}"></script>
+
+
+{% endblock content %}
\ No newline at end of file
diff --git a/base/templates/cbv/shift_request/shift_request_form.html b/base/templates/cbv/shift_request/shift_request_form.html
new file mode 100644
index 000000000..abb5ba4ae
--- /dev/null
+++ b/base/templates/cbv/shift_request/shift_request_form.html
@@ -0,0 +1,21 @@
+<div id="formContainer">
+    {% include "generic/horilla_form.html" %}
+</div>
+<script>
+    function toggleFunctionShiftRequestForm(element){
+      if (element.is(":checked")){
+        $("[id=id_requested_till_parent_div]").hide();
+      } else {
+        $("[id=id_requested_till_parent_div]").show();
+      }id_requested_till
+    }
+  
+      $(document).ready(function(){
+          $("[type=checkbox]").change(function (e) {
+          e.preventDefault();
+          toggleFunctionShiftRequestForm($(this));
+          });
+      })
+      toggleFunctionShiftRequestForm($("#genericModalBody #id_is_permanent_shift"));
+  </script>
+  
\ No newline at end of file
diff --git a/base/templates/cbv/shift_request/user_availability.html b/base/templates/cbv/shift_request/user_availability.html
new file mode 100644
index 000000000..a13bccff2
--- /dev/null
+++ b/base/templates/cbv/shift_request/user_availability.html
@@ -0,0 +1,16 @@
+{% load basefilters %}
+{% load i18n %}
+
+    {% if instance.reallocate_approved == True %}
+      <div class="d-flex align-items-center">
+        <span class="oh-dot oh-dot--small me-1 oh-dot--color  oh-dot--success "></span><span class=" link-success ">{% trans "Available" %}</span>
+      </div>
+    {% elif instance.reallocate_canceled == True %}
+      <div class="d-flex align-items-center">
+        <span class="oh-dot oh-dot--small me-1 oh-dot--color  oh-dot--danger "></span><span class=" link-danger ">{% trans "Not Available" %}</span>
+      </div>
+    {% else %}
+      <div class="d-flex align-items-center">
+        <span class="oh-dot oh-dot--small me-1 oh-dot--color" style="background-color:grey;"></span><span class=" link-secondary ">{% trans "Not Marked" %}</span>
+      </div>
+    {% endif %}
diff --git a/base/templates/cbv/work_shift_tab/extended_work-shift.html b/base/templates/cbv/work_shift_tab/extended_work-shift.html
new file mode 100644
index 000000000..363050f12
--- /dev/null
+++ b/base/templates/cbv/work_shift_tab/extended_work-shift.html
@@ -0,0 +1,20 @@
+{% load i18n %}
+<div id = "work-shift">
+    <div class="oh-wrapper mt-4">
+        {% if employee.employee_work_info.shift_id %}
+        <span class="fw-bold" style="font-size:17px;"> {% if employee.employee_work_info.shift_id %} {% trans "Current Shift" %} &nbsp : &nbsp {{employee.employee_work_info.shift_id}} {% endif %}</span>
+        <button style="display:inline-block;"
+                class="oh-btn oh-btn--secondary ms-3"
+                data-toggle="oh-modal-toggle"
+                data-target="#genericModal"
+                hx-get="{% url 'shift-request-reallocate' %}?emp_id={{emp_id}}"
+                hx-target="#genericModalBody"
+            >
+            <ion-icon name="add-sharp" class="mr-1 md hydrated" role="img" aria-label="add sharp"></ion-icon>{% trans "Reallocate Shift." %}
+        </button>
+        <br>
+        <br>
+        
+        {% endif %}
+    {% include "generic/horilla_tabs.html" %}
+</div>
\ No newline at end of file
diff --git a/base/templates/cbv/work_type_request/actions.html b/base/templates/cbv/work_type_request/actions.html
new file mode 100644
index 000000000..0052739ae
--- /dev/null
+++ b/base/templates/cbv/work_type_request/actions.html
@@ -0,0 +1,40 @@
+{% load basefilters %}
+{% load i18n %}
+
+<div class="" onclick="event.stopPropagation();">
+    {% if request.user.employee_get == instance.employee_id or perms.base.add_worktyperequest or perms.base.change_worktyperequest or perms.base.delete_worktyperequest or request.user|is_reportingmanager %}
+        <div class="oh-btn-group">
+            {% if request.user.employee_get == instance.employee_id or perms.base.change_worktyperequest or request.user|is_reportingmanager %}
+                {% if instance.approved == False and not instance.canceled %}
+                    <a hx-get="{% url 'work-type-request-update' instance.id %}?instance_ids={{instance.ordered_ids}}"
+                        hx-target='#genericModalBody' data-toggle="oh-modal-toggle" data-target='#genericModal'
+                        class="oh-btn oh-btn--light-bkg w-100" title="{% trans 'Edit' %}"><ion-icon
+                            name="create-outline"></ion-icon></a>
+                {% else %}
+                    <button class="oh-btn oh-btn--light-bkg w-100" disabled><ion-icon name="create-outline"></ion-icon></button>
+                {% endif %}
+            {% endif %}
+
+            {% if request.user.employee_get == instance.employee_id or perms.base.add_worktyperequest or request.user|is_reportingmanager %}
+                <a onclick="event.stopPropagation();" class="oh-btn oh-btn--light-bkg w-100" data-toggle="oh-modal-toggle"
+                    data-target="#genericModal" hx-get="{% url 'work-type-request-duplicate' instance.id %}?{{pg}}"
+                    title="{% trans 'Duplicate' %}" hx-target="#genericModalBody" style="cursor: pointer;">
+                    <ion-icon name="copy-outline"></ion-icon>
+                </a>
+            {% endif %}
+
+            {% if request.user.employee_get == instance.employee_id or perms.base.delete_worktyperequest or request.user|is_reportingmanager %}
+                {% if instance.approved == False and instance.canceled == False %}
+                    <a hx-confirm="{% trans 'Are you sure you want to delete this work type request?' %}"
+                        hx-post="{% url 'work-type-request-delete' instance.id  %}" hx-target="#work-shift"
+                        class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100" title="{% trans 'Remove' %}">
+
+                        <ion-icon name="trash-outline"></ion-icon>
+                    </a>
+                {% else %}
+                    <button class="oh-btn oh-btn--light-bkg w-100" disabled><ion-icon name="trash-outline"></ion-icon></button>
+                {% endif %}
+            {% endif %}
+        </div>
+    {% endif %}
+</div>
\ No newline at end of file
diff --git a/base/templates/cbv/work_type_request/confirmation.html b/base/templates/cbv/work_type_request/confirmation.html
new file mode 100644
index 000000000..548f5d9b5
--- /dev/null
+++ b/base/templates/cbv/work_type_request/confirmation.html
@@ -0,0 +1,35 @@
+{% load basefilters %}
+{% load i18n %}
+{% if perms.base.change_worktyperequest or request.user|is_reportingmanager %}
+<div class="w-100" onclick="event.stopPropagation();">
+  <div class="oh-btn-group" >
+    {% if instance.approved == False and instance.canceled == False %}
+      <a href="/work-type-request-approve/{{instance.id}}/"
+        title="{% trans 'Approve' %}"
+        onclick="return confirm('{% trans "Do you want to approve this request?" %}')"
+        class="oh-btn oh-btn--success w-100">
+        <ion-icon class="me-1" name="checkmark-outline"></ion-icon>
+      </a>
+    {% else %}
+      <a type="submit" href="#" title="{% trans 'Approve' %}"
+          class="oh-btn oh-btn--success oh-btn--disabled w-100">
+          <ion-icon class="me-1" name="checkmark-outline"></ion-icon>
+      </a>
+    {% endif %}
+    {% if instance.canceled == False %}
+      <a href="/work-type-request-cancel/{{instance.id}}/"
+          title="{% trans 'Reject' %}"
+          onclick="return confirm('{% trans "Do you want to reject this request?" %}')"
+          class="oh-btn oh-btn--danger w-100">
+          <ion-icon class="me-1" name="close-circle-outline"></ion-icon>
+      </a>
+    {% else %}
+      <a type="submit" href="#" title="{% trans 'Reject' %}"
+          class="oh-btn oh-btn--danger oh-btn--disabled
+          w-100" >
+          <ion-icon class="me-1" name="close-circle-outline"></ion-icon>
+      </a>
+    {% endif %}
+  </div>
+</div>
+{% endif %}
\ No newline at end of file
diff --git a/base/templates/cbv/work_type_request/detail_view_actions.html b/base/templates/cbv/work_type_request/detail_view_actions.html
new file mode 100644
index 000000000..ed822942a
--- /dev/null
+++ b/base/templates/cbv/work_type_request/detail_view_actions.html
@@ -0,0 +1,30 @@
+{% load basefilters %}
+{% load i18n %}
+{% if instance.approved == False and not instance.canceled  %}
+    <a hx-get="{% url 'work-type-request-update' instance.id %}" 
+    hx-target='#genericModalBody' 
+    data-toggle="oh-modal-toggle"
+    data-target='#genericModal' 
+    class="oh-btn oh-btn--info w-50" title="{% trans 'Edit' %}">
+    <ion-icon name="create-outline"></ion-icon>
+</a>
+     {% else %}
+        <button class="oh-btn oh-btn--info w-50" disabled><ion-icon name="create-outline" ></ion-icon></button></td>
+            {% endif %}
+                {% if instance.approved == False and instance.canceled == False %}
+                    <form hx-confirm="{% trans 'Are you sure you want to delete this work type request?' %}" 
+                    hx-post="{% url 'work-type-request-delete' instance.id  %}?instances_ids={{ request.GET.instance_ids }}"
+                    hx-target="#genericModalBody" style="width: 50%">
+                    {% csrf_token %}
+                <button type='submit' class="oh-btn oh-btn--secondary w-100" title="{% trans 'Remove' %}"><ion-icon name="trash-outline"></ion-icon></button>
+            </form>
+        {% else %}
+    <button class="oh-btn oh-btn--secondary w-50" disabled><ion-icon name="trash-outline"></ion-icon></button></td>
+{% endif %}
+{% comment %} {{request.GET.instance_ids}} {% endcomment %}
+{% if request.GET.deleted %}
+    <script>
+        $(".reload-record").click()
+        $("#reloadMessagesButton").click()
+    </script>
+    {% endif %}
\ No newline at end of file
diff --git a/base/templates/cbv/work_type_request/filter.html b/base/templates/cbv/work_type_request/filter.html
new file mode 100644
index 000000000..8b8732c29
--- /dev/null
+++ b/base/templates/cbv/work_type_request/filter.html
@@ -0,0 +1,116 @@
+{% load i18n %}
+{% load basefilters %}
+<div class="oh-dropdown__filter-body">
+    <div class="oh-accordion">
+      <div class="oh-accordion-header">{% trans "Work Info" %}</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 "Employee" %}</label>
+              {{form.employee_id}}
+            </div>
+            <div class="oh-input-group">
+              <label class="oh-label">{% trans "Job Position" %}</label>
+              {{form.employee_id__employee_work_info__job_position_id}}
+            </div>
+            <div class="oh-input-group">
+              <label class="oh-label">{% trans "Shift" %}</label>
+              {{form.employee_id__employee_work_info__shift_id}}
+            </div>
+            <div class="oh-input-group">
+              <label class="oh-label">{% trans "Company" %}</label>
+              {{form.employee_id__employee_work_info__company_id}}
+            </div>
+            <div class="oh-input-group">
+              <label class="oh-label">{% trans "Is Active" %}?</label>
+              {{form.employee_id__is_active}}
+            </div>
+          </div>
+          <div class="col-sm-12 col-md-12 col-lg-6">
+            <div class="oh-input-group">
+              <label class="oh-label">{% trans "Department" %}</label>
+              {{form.employee_id__employee_work_info__department_id}}
+            </div>
+          <div class="oh-input-group">
+            <label class="oh-label">{% trans "Job Role" %}</label>
+            {{form.employee_id__employee_work_info__job_role_id}}
+          </div>
+          <div class="oh-input-group">
+            <label class="oh-label">{% trans "Work Type" %}</label>
+            {{form.employee_id__employee_work_info__work_type_id}}
+          </div>
+          <div class="oh-input-group">
+            <label class="oh-label">{% trans "Reporting Manager" %}</label>
+            {{form.employee_id__employee_work_info__reporting_manager_id}}
+          </div>
+          <div class="oh-input-group">
+            <label class="oh-label">{% trans "Gender" %}</label>
+            {{form.employee_id__gender}}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="oh-accordion">
+    <div class="oh-accordion-header">{% trans "Work Type Request" %}</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 "Requested Work Type" %}</label>
+            {{form.work_type_id}}
+          </div>
+
+          <div class="oh-input-group">
+            <label class="oh-label">{% trans "Requested Date" %}</label>
+            {{form.requested_date}}
+          </div>
+         
+          <div class="oh-input-group">
+            <label class="oh-label">{% trans "Approved" %}?</label>
+            {{form.approved}}
+          </div>
+         
+        </div>
+        <div class="col-sm-12 col-md-12 col-lg-6">
+          <div class="oh-input-group">
+            <label class="oh-label">{% trans "Previous Work Type" %}</label>
+            {{form.previous_work_type_id}}
+          </div>
+
+          <div class="oh-input-group">
+            <label class="oh-label">{% trans "Canceled" %}?</label>
+            {{form.canceled}}
+          </div>
+
+          <div class="oh-input-group">
+            <label class="oh-label">{% trans "Requested" %}?</label>
+            {{form.requested}}
+          </div>
+
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="oh-accordion">
+    <div class="oh-accordion-header">{% trans "Advanced" %}</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 "Requested Date From" %}</label>
+            {{form.requested_date__gte}}
+          </div>
+
+        </div>
+        <div class="col-sm-12 col-md-12 col-lg-6">
+          <div class="oh-input-group">
+            <label class="oh-label">{% trans "Requested Date Till" %}</label>
+            {{form.requested_date__lte}}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/base/templates/cbv/work_type_request/form/form.html b/base/templates/cbv/work_type_request/form/form.html
new file mode 100644
index 000000000..a25ec5d42
--- /dev/null
+++ b/base/templates/cbv/work_type_request/form/form.html
@@ -0,0 +1,28 @@
+<div>
+    {% include "generic/horilla_form.html" %}
+<div>
+<script>
+
+    {% comment %} var textarea = document.querySelector('#dynamic_field_description textarea[name="description"]')
+    if (textarea) {
+        var currentValue = textarea.value;
+        textarea.value = currentValue + '(copy)';
+    } {% endcomment %}
+
+function toggleFunctionWorkTypeRequestForm(){
+    if ($("#id_is_permanent_work_type").is(":checked")) {
+        $("[id=id_requested_till_parent_div]").hide();
+      } else {
+        $("[id=id_requested_till_parent_div]").show();
+      }
+    }  
+        $(document).ready(function(){
+          $("[type=checkbox]").change(function (e) {
+          e.preventDefault();
+          toggleFunctionWorkTypeRequestForm();
+          });
+        })
+        toggleFunctionWorkTypeRequestForm();
+
+</script>
+
diff --git a/base/templates/cbv/work_type_request/note.html b/base/templates/cbv/work_type_request/note.html
new file mode 100644
index 000000000..51a148d6f
--- /dev/null
+++ b/base/templates/cbv/work_type_request/note.html
@@ -0,0 +1,11 @@
+{% load basefilters %}
+{% if request.user.employee_get == instance.employee_id or perms.base.view_worktyperequestcomment or request.user|is_reportingmanager %}
+<div class="" onclick="event.stopPropagation();">
+    <button type="button" hx-get="{% url 'view-work-type-comment' instance.id %}" hx-target="#commentContainer"
+        data-toggle='oh-modal-toggle' data-target='#worktypeactivitySidebar' title="View Comment"
+        class="oh-btn oh-btn--light oh-activity-sidebar__open w-100"
+        style="flex: 1 0 auto; width:20px;height: 40.68px; padding: 0;">
+        <ion-icon name="newspaper-outline" role="img" class="md hydrated" aria-label="newspaper outline"></ion-icon>
+    </button>
+</div>
+{% endif %}
\ No newline at end of file
diff --git a/base/templates/cbv/work_type_request/work_export.html b/base/templates/cbv/work_type_request/work_export.html
new file mode 100644
index 000000000..bfea89c64
--- /dev/null
+++ b/base/templates/cbv/work_type_request/work_export.html
@@ -0,0 +1,30 @@
+{% load i18n %}
+{% load basefilters %}
+<div class="oh-modal__dialog">
+    <div class="oh-modal__dialog-header">
+      <h2 class="oh-modal__dialog-title" id="workTypeRequestsExportLavel">
+        {% trans "Export Work Type Requests" %}
+      </h2>
+      <button class="oh-modal__close" aria-label="Close">
+        <ion-icon name="close-outline"></ion-icon>
+      </button>
+      <div
+        class="oh-modal__dialog-body p-0 pt-2"
+        id="workTypeRequestsExportModalBody"
+      >
+        <form
+          action="{%url 'work-type-request-info-export' %}"
+          method="get"
+          onsubmit="event.stopPropagation();$(this).parents().find('.oh-modal--show').last().toggleClass('oh-modal--show');"
+          id="workTypeRequestsExportForm"
+        >
+          {% csrf_token %} {% include "work_type_request/work_type_request_export.html" %}
+          <div class="oh-dropdown__filter-footer">
+            <button class="oh-btn oh-btn--secondary oh-btn--small w-100">
+              {% trans "Export" %}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
\ No newline at end of file
diff --git a/base/templates/cbv/work_type_request/work_type_home.html b/base/templates/cbv/work_type_request/work_type_home.html
new file mode 100644
index 000000000..7fbdebbcd
--- /dev/null
+++ b/base/templates/cbv/work_type_request/work_type_home.html
@@ -0,0 +1,54 @@
+{% extends "index.html" %}
+{% load i18n %}
+{% load static %}
+{% block content %}
+<style>
+    .canceled--dot {
+        background-color: red;
+    }
+
+    .requested--dot {
+        background-color: orange;
+    }
+
+    .approved--dot {
+        background-color: green;
+    }
+
+
+    .approved-True {
+        border-left: 3.4px solid yellowgreen !important;
+        border-radius: 4px 0 0 4px;
+
+    }
+
+    .canceled-True {
+
+        border-left: 3.4px solid red !important;
+        border-radius: 4px 0 0 4px;
+
+    }
+
+    .requested-False-False {
+
+        border-left: 3.4px solid orange !important;
+        border-radius: 4px 0 0 4px;
+
+    }
+</style>
+<div hx-get="{% url 'work-nav-view' %}" hx-trigger="load"></div>
+
+{% include "generic/components.html" %}
+<div class="oh-checkpoint-badge mb-2" id="selectedInstances" data-ids="[]" data-clicked="" style="display: none"></div>
+
+<div class="oh-wrapper" id="listContainer">
+    <div class="animated-background"></div>
+</div>
+
+<div class="oh-activity-sidebar" id="worktypeactivitySidebar" style="z-index:1000;">
+    <div class="oh-activity-sidebar__body" id="commentContainer"></div>
+</div>
+
+<script src="{% static 'cbv/work_type_request/work_request_bulk_action.js' %}"></script>
+
+{% endblock content %}
\ No newline at end of file
diff --git a/base/templates/common_form.html b/base/templates/common_form.html
index 043a51c87..3075d27e3 100644
--- a/base/templates/common_form.html
+++ b/base/templates/common_form.html
@@ -5,6 +5,8 @@
         background-color: #ffa5000f;
     }
 </style>
+
+
 <div class="oh-general__tab-target oh-profile-section" id="personal">
     {% if form.verbose_name %}
         <div class="oh-payslip__header">
@@ -17,22 +19,22 @@
         <div class="row">
             <div class="col-12">{{ form.non_field_errors }}</div>
             {% for field in form.visible_fields %}
-            <div class="col-12 col-md-6" id="id_{{field.name}}_parent_div">
-                <div class="oh-label__info" for="id_{{ field.name }}">
-                    <label class="oh-label {% if field.field.required %} required-star{% endif %}"
-                        for="id_{{ field.name }}">{% trans field.label %}</label>
-                    {% if field.help_text != '' %}
-                    <span class="oh-info mr-2" title="{{ field.help_text|safe }}"></span>
-                    {% endif %}
-                </div>
+                <div class="col-12 {% if form.cols.employee_id %} col-md-12 {% endif %} col-md-6" id="id_{{field.name}}_parent_div">
+                    <div class="oh-label__info" for="id_{{ field.name }}">
+                        <label class="oh-label {% if field.field.required %} required-star{% endif %}"
+                            for="id_{{ field.name }}">{% trans field.label %} </label>
+                        {% if field.help_text != '' %}
+                            <span class="oh-info mr-2" title="{{ field.help_text|safe }}"></span>
+                        {% endif %}
+                    </div>
 
-                {% if field.field.widget.input_type == 'checkbox' %}
-                <div class="oh-switch" style="width: 30px;">{{ field|add_class:'oh-switch__checkbox' }}</div>
-                {% else %}
-                {{ field|add_class:'form-control' }}
-                {% endif %}
-                {{ field.errors }}
-            </div>
+                    {% if field.field.widget.input_type == 'checkbox' %}
+                        <div class="oh-switch" style="width: 30px;">{{ field|add_class:'oh-switch__checkbox' }}</div>
+                    {% else %}
+                        {{ field|add_class:'form-control' }}
+                    {% endif %}
+                    {{ field.errors }}
+                </div>
             {% endfor %}
         </div>
 
@@ -40,6 +42,8 @@
             {{ field }}
         {% endfor %}
 
+
+
         <div class="d-flex flex-row-reverse">
             <button type="submit" class="oh-btn oh-btn--secondary mt-2 mr-0 pl-4 pr-5 oh-btn--w-100-resp">{% trans 'Save' %}</button>
         </div>
diff --git a/base/templates/holiday/holiday_view.html b/base/templates/holiday/holiday_view.html
index 94f32adb0..a9c612b9f 100644
--- a/base/templates/holiday/holiday_view.html
+++ b/base/templates/holiday/holiday_view.html
@@ -161,7 +161,7 @@
                             </a>
                         </div>
                     </div>
-                    <button onclick="validateFile($(this),'importHoliday');"
+                    <button onclick="validateFile($(this),'importHoliday',false);"
                         type="submit" class="oh-btn oh-btn--small oh-btn--secondary w-100 mt-3">
                         {% trans "Upload" %}
                     </button>
diff --git a/base/templates/multi_approval_condition/add_more_approval_manager.html b/base/templates/multi_approval_condition/add_more_approval_manager.html
index 2377e296b..4d4f4d346 100644
--- a/base/templates/multi_approval_condition/add_more_approval_manager.html
+++ b/base/templates/multi_approval_condition/add_more_approval_manager.html
@@ -1,8 +1,8 @@
 {% load i18n %} {% if field_html %}
 <div
-  class="oh-input__group pt-3"
+  class="oh-input__group pt-2"
   id="{{ currnet_hx_target }}"
-  style="display: flex"
+  style="display: flex; padding-right:0px;"
 >
   {{field_html}}
   <a
diff --git a/base/templates/multi_approval_condition/condition_edit_form.html b/base/templates/multi_approval_condition/condition_edit_form.html
index 85aaed1e6..20e88e3f6 100644
--- a/base/templates/multi_approval_condition/condition_edit_form.html
+++ b/base/templates/multi_approval_condition/condition_edit_form.html
@@ -135,6 +135,7 @@
       {{ form.multi_approval_manager }}
       {{ form.multi_approval_manager.errors }}
     </div>
+
     {% for field in form.visible_fields %}
       {% if field.name|startswith:"multi_approval_manager_" %}
       <div id="{{field.name}}">
diff --git a/base/templates/shift_request/htmx/shift_reallocate_employees.html b/base/templates/shift_request/htmx/shift_reallocate_employees.html
index 106126eeb..6175fd896 100644
--- a/base/templates/shift_request/htmx/shift_reallocate_employees.html
+++ b/base/templates/shift_request/htmx/shift_reallocate_employees.html
@@ -1,8 +1,18 @@
 {% load i18n %}
 <label
-  class="oh-label"
-  for="id_{{ form.reallocate_to.name }}"
+  class="oh-label required-star"
+  for="id_{{ form.reallocate_to.title }}"
   title="{{ form.reallocate_to.help_text|safe }}"
   >{% trans form.reallocate_to.label %}</label
 >
+<div id ="dynamic_field_task_id">
 {{form.reallocate_to}}
+</div>
+<script>
+  $(document).ready(function () {
+
+      $("select").on("select2:select", function (e) {
+          $(this).closest("select")[0].dispatchEvent(new Event("change"));
+      });
+  });
+</script>
diff --git a/base/templates/shift_request/shift_request_export.html b/base/templates/shift_request/shift_request_export.html
index 12ee10a14..63e1983b5 100644
--- a/base/templates/shift_request/shift_request_export.html
+++ b/base/templates/shift_request/shift_request_export.html
@@ -1,14 +1,4 @@
 {% load i18n %}
-<div class="oh-modal__dialog-header">
-  <h2 class="oh-modal__dialog-title" id="shiftRequestsExportLavel">{% trans 'Export Shift Requests' %}</h2>
-  <button class="oh-modal__close" aria-label="Close"><ion-icon name="close-outline"></ion-icon></button>
-</div>
-<div class="oh-modal__dialog-body" id="shiftRequestsExportModalBody">
-  <form action="{% url 'shift-request-info-export' %}" method="get" id="shiftRequestsExportForm"
-        onsubmit="event.stopPropagation();$(this).parents().find('.oh-modal--show').last().toggleClass('oh-modal--show');"
-        class="oh-profile-section"
-    >
-    {% csrf_token %}
     <div class="oh-dropdown__filter-body">
       <div class="oh-accordion">
         <div class="oh-accordion-header">
@@ -141,8 +131,3 @@
         </div>
       </div>
     </div>
-    <div class="oh-modal__dialog-footer p-0 pt-4">
-      <button type="submit" class="oh-btn oh-btn--secondary oh-btn--shadow">{% trans 'Export' %}</button>
-    </div>
-  </form>
-</div>
diff --git a/base/templates/work_type_request/request_form.html b/base/templates/work_type_request/request_form.html
index 111843f68..73cf3000d 100644
--- a/base/templates/work_type_request/request_form.html
+++ b/base/templates/work_type_request/request_form.html
@@ -38,4 +38,4 @@
         });
     });
     toggleFunctionWorkTypeRequestForm();
-</script>
+</script>
diff --git a/base/templates/work_type_request/work_type_request_export.html b/base/templates/work_type_request/work_type_request_export.html
index 57afbc155..132c26633 100644
--- a/base/templates/work_type_request/work_type_request_export.html
+++ b/base/templates/work_type_request/work_type_request_export.html
@@ -1,12 +1,5 @@
 {% load i18n %}
-<div class="oh-modal__dialog-header">
-  <h2 class="oh-modal__dialog-title" id="workTypeRequestsExportLavel">{% trans 'Export Work Type Requests' %}</h2>
-  <button class="oh-modal__close" aria-label="Close"><ion-icon name="close-outline"></ion-icon></button>
-</div>
-<div class="oh-modal__dialog-body" id="workTypeRequestsExportModalBody">
-  <form action="{% url 'work-type-request-info-export' %}" method="get" id="workTypeRequestsExportForm"
-  onsubmit="event.stopPropagation();$(this).parents().find('.oh-modal--show').last().toggleClass('oh-modal--show');" class="oh-profile-section">
-    {% csrf_token %} <div class="oh-dropdown__filter-body">
+<div class="oh-dropdown__filter-body">
       <div class="oh-accordion">
         <div class="oh-accordion-header">
           {% trans 'Excel columns' %}
@@ -138,8 +131,3 @@
         </div>
       </div>
     </div>
-    <div class="oh-modal__dialog-footer p-0 pt-3">
-      <button type="submit" class="oh-btn oh-btn--secondary oh-btn--shadow">{% trans 'Export' %}</button>
-    </div>
-  </form>
-</div>
diff --git a/base/templates/work_type_request/work_type_request_nav.html b/base/templates/work_type_request/work_type_request_nav.html
index 83bfe7c64..ad02f6558 100644
--- a/base/templates/work_type_request/work_type_request_nav.html
+++ b/base/templates/work_type_request/work_type_request_nav.html
@@ -119,11 +119,12 @@ x-data="{searchShow: false}"
                       <label class="oh-label" for="{{f.form.approved.id_for_label}}">{% trans "Approved" %}?</label>
                       {{f.form.approved}}
                     </div>
-                    <div class="oh-input-group">
-                      <label class="oh-label" for="{{f.form.canceled.id_for_label}}">{% trans "Canceled" %}?</label>
-                      {{f.form.canceled}}
-                    </div>
+
+                  <div class="oh-input-group">
+                    <label class="oh-label" for="{{f.form.requested.id_for_label}}">{% trans "Requested" %}?</label>
+                    {{f.form.requested}}
                   </div>
+                </div>
                   <div class="col-sm-12 col-md-12 col-lg-6">
                     <div class="oh-input-group">
                       <label class="oh-label" for="{{f.form.work_type_id.id_for_label}}">{% trans "Requested Work Type" %}</label>
diff --git a/base/templatetags/basefilters.py b/base/templatetags/basefilters.py
index 4436eef54..7526d9e80 100644
--- a/base/templatetags/basefilters.py
+++ b/base/templatetags/basefilters.py
@@ -50,6 +50,18 @@ def is_reportingmanager(user):
     ).exists()
 
 
+@register.filter(name="is_self_reporting_manager")
+def is_self_reporting_manager(user):
+    """
+    This method returns true if the user employee reporting manager to himself
+    args:
+        user    : request.user
+    """
+    employee = user.employee_get
+    employee_manages = employee.reporting_manager.all()
+    return employee_manages.filter(employee_id=employee).exists()
+
+
 @register.filter(name="is_leave_approval_manager")
 def is_leave_approval_manager(user):
     """
@@ -84,11 +96,24 @@ def filtersubordinates(user):
     args:
         user    : request.user
     """
+
     employee = user.employee_get
     employee_manages = employee.reporting_manager.all()
     return employee_manages.exists()
 
 
+@register.filter(name="is_self_reporting_manager")
+def is_self_reporting_manager(user):
+    """
+    This method returns true if the user employee reporting manager to himself
+    args:
+        user    : request.user
+    """
+    employee = user.employee_get
+    employee_manages = employee.reporting_manager.all()
+    return employee_manages.filter(employee_id=employee).exists()
+
+
 @register.filter(name="filter_field")
 def filter_field(value):
     if value.endswith("_id"):
@@ -146,6 +171,14 @@ def startswith(value, arg):
     return value.startswith(arg)
 
 
+@register.filter(name="has_content")
+def has_content(value):
+    """Returns True if the input string has non-whitespace content."""
+    if isinstance(value, str):
+        return bool(value.strip())
+    return True
+
+
 @register.filter(name="readable")
 def readable(value):
     try:
diff --git a/base/translator.py b/base/translator.py
index 68fc42225..be798f659 100644
--- a/base/translator.py
+++ b/base/translator.py
@@ -342,6 +342,10 @@ _("candidate-reject-reasons"),
 _("skills-view"),
 _("employee-bonus-point"),
 _("mail-automations"),
+_("view-time-sheet"),
+_("task-all"),
+_("project-view"),
+_("project-dashboard-view"),
 _("check-in-check-out-setting"),
 _("user-accessibility"),
 _("project"),
diff --git a/base/urls.py b/base/urls.py
index 000f6bcf0..86663ab47 100644
--- a/base/urls.py
+++ b/base/urls.py
@@ -3,6 +3,32 @@ from django.urls import path, re_path
 from django.utils.translation import gettext_lazy as _
 
 from base import announcement, request_and_approve, views
+from base.cbv import (
+    announcement_cbv,
+    company,
+    company_leaves,
+    department,
+    employee_shift,
+    employee_shift_shedule,
+    employee_type,
+    holidays,
+    job_position,
+    job_role,
+    mail_log_tab,
+    mail_server,
+    mail_template,
+    multiple_approval_condition,
+    penalty,
+    rotating_shift,
+    rotating_shift_assign,
+    rotating_work_type,
+    settings_rotatingwork,
+    settings_work_type,
+    shift_request,
+    work_shift_tab,
+    work_type_request,
+)
+from base.cbv.dashboard import dashboard
 from base.forms import (
     HolidayForm,
     MailTemplateForm,
@@ -32,9 +58,100 @@ from base.models import (
     WorkType,
     WorkTypeRequest,
 )
+from horilla_audit.cbv import audit
 from horilla_audit.models import AuditTag
 
 urlpatterns = [
+    path(
+        "employee/work-type-request-view/",
+        work_type_request.WorkRequestView.as_view(),
+        name="work-type-request-view",
+    ),
+    path(
+        "work-list-view/",
+        work_type_request.WorkRequestListView.as_view(),
+        name="work-list-view",
+    ),
+    path(
+        "work-nav-view/",
+        work_type_request.WorkRequestNavView.as_view(),
+        name="work-nav-view",
+    ),
+    path(
+        "work-export-candidate/",
+        work_type_request.WorkExportCandidate.as_view(),
+        name="work-export-candidate",
+    ),
+    path(
+        "work-detail-view/<int:pk>/",
+        work_type_request.WorkTypeDetailView.as_view(),
+        name="work-detail-view",
+    ),
+    path(
+        "employee/rotating-work-type-assign/",
+        rotating_work_type.RotatingWorkRequestView.as_view(),
+        name="rotating-work-type-assign",
+    ),
+    path(
+        "rotating-list-view/",
+        rotating_work_type.RotatingWorkListView.as_view(),
+        name="rotating-list-view",
+    ),
+    path(
+        "rotating-navbar-view/",
+        rotating_work_type.RotatingWorkNavView.as_view(),
+        name="rotating-navbar-view",
+    ),
+    path(
+        "work-rotating-detail-view/<int:pk>/",
+        rotating_work_type.RotatingWorkDetailView.as_view(),
+        name="work-rotating-detail-view",
+    ),
+    path(
+        "rotating-action-export/",
+        rotating_work_type.RotatingWorkExport.as_view(),
+        name="rotating-action-export",
+    ),
+    path(
+        "employee-worktype-tab-list/<int:pk>/",
+        work_shift_tab.WorkTypeIndividualTabList.as_view(),
+        name="employee-worktype-tab-list",
+    ),
+    path(
+        "employee-rotating-work-tab-list/<int:pk>/",
+        work_shift_tab.RotatingWorkIndividualTab.as_view(),
+        name="employee-rotating-work-tab-list",
+    ),
+    path(
+        "individual-work-rotating-detail-view/<int:pk>/",
+        work_shift_tab.DetailViewChild.as_view(),
+        name="individual-work-rotating-detail-view",
+    ),
+    path(
+        "individual-email-log-list/<int:pk>/",
+        mail_log_tab.MailLogTabList.as_view(),
+        name="individual-email-log-list",
+    ),
+    path(
+        "individual-mail-log-detail/<int:pk>/",
+        mail_log_tab.MailLogDetailView.as_view(),
+        name="individual-mail-log-detail",
+    ),
+    path(
+        "mail-template-create-form/",
+        mail_template.MailTemplateFormView.as_view(),
+        name="mail-template-create-form",
+    ),
+    path(
+        "mail-template-edit-form/<int:pk>/",
+        mail_template.MailTemplateFormView.as_view(),
+        name="mail-template-edit-form",
+    ),
+    path(
+        "mail-template-duplicate-form/<int:pk>/",
+        mail_template.MailTemplateDuplicateForm.as_view(),
+        name="mail-template-duplicate-form",
+    ),
     path("", views.home, name="home-page"),
     path("initialize-database", views.initialize_database, name="initialize-database"),
     path("load-demo-database", views.load_demo_database, name="load-demo-database"),
@@ -150,6 +267,26 @@ urlpatterns = [
         name="permission-table",
     ),
     path("settings/mail-server-conf/", views.mail_server_conf, name="mail-server-conf"),
+    path(
+        "mail-server-list",
+        mail_server.MailServerListView.as_view(),
+        name="mail-server-list",
+    ),
+    path(
+        "mail-server-nav",
+        mail_server.MailServerNav.as_view(),
+        name="mail-server-nav",
+    ),
+    path(
+        "create-mail-server",
+        mail_server.MailServerFormView.as_view(),
+        name="create-mail-server",
+    ),
+    path(
+        "update-mail-server/<int:pk>/",
+        mail_server.MailServerFormView.as_view(),
+        name="update-mail-server",
+    ),
     path(
         "settings/mail-server-create-update/",
         views.mail_server_create_or_update,
@@ -196,6 +333,18 @@ urlpatterns = [
     ),
     path("settings/company-create/", views.company_create, name="company-create"),
     path("settings/company-view/", views.company_view, name="company-view"),
+    path("company-list/", company.CompanyListView.as_view(), name="company-list"),
+    path("company-navbar/", company.CompanyNavView.as_view(), name="company-navbar"),
+    path(
+        "company-create-form/",
+        company.CompanyCreateForm.as_view(),
+        name="company-create-form",
+    ),
+    path(
+        "company-update-form/<int:pk>/",
+        company.CompanyCreateForm.as_view(),
+        name="company-update-form",
+    ),
     path(
         "settings/company-update/<int:id>/",
         views.company_update,
@@ -206,20 +355,42 @@ urlpatterns = [
         "settings/company-delete/<int:obj_id>/",
         views.object_delete,
         name="company-delete",
-        kwargs={"model": Company, "redirect": "/settings/company-view"},
+        kwargs={
+            "model": Company,
+            "HttpResponse": "<script>$('#reloadMessagesButton').click()</script>",
+        },
+        # kwargs={"model": Company, "redirect": "/settings/company-view"},
     ),
     path("settings/department-view/", views.department_view, name="department-view"),
+    path(
+        "department-list/",
+        department.DepartmentListView.as_view(),
+        name="department-list",
+    ),
+    path(
+        "department-nav/", department.DepartmentNavView.as_view(), name="department-nav"
+    ),
     path(
         "settings/department-creation/",
         views.department_create,
         name="department-creation",
     ),
+    path(
+        "settings-department-creation/",
+        department.DepartmentCreateForm.as_view(),
+        name="settings-department-creation",
+    ),
     path(
         "settings/department-update/<int:id>/",
         views.department_update,
         name="department-update",
         kwargs={"model": Department},
     ),
+    path(
+        "settings-department-update/<int:pk>/",
+        department.DepartmentCreateForm.as_view(),
+        name="settings-department-update",
+    ),
     path(
         "department-delete/<int:obj_id>/",
         views.object_delete,
@@ -229,6 +400,26 @@ urlpatterns = [
             "HttpResponse": True,
         },
     ),
+    path(
+        "job-position-create-form/",
+        job_position.JobPositionCreateForm.as_view(),
+        name="job-position-create-form",
+    ),
+    path(
+        "job-position-update-form/<int:pk>/",
+        job_position.JobPositionCreateForm.as_view(),
+        name="job-position-update-form",
+    ),
+    path(
+        "job-position-list/",
+        job_position.JobPositionListView.as_view(),
+        name="job-position-list",
+    ),
+    path(
+        "job-position-navbar/",
+        job_position.JobPositionNavView.as_view(),
+        name="job-position-navbar",
+    ),
     path(
         "settings/job-position-creation/",
         views.job_position_creation,
@@ -255,6 +446,16 @@ urlpatterns = [
         },
     ),
     path("settings/job-role-create/", views.job_role_create, name="job-role-create"),
+    path("job-role-list/", job_role.JobRoleListView.as_view(), name="job-role-list"),
+    path("job-role-nav/", job_role.JobRoleNav.as_view(), name="job-role-nav"),
+    path(
+        "create-job-role/", job_role.JobRoleFormView.as_view(), name="create-job-role"
+    ),
+    path(
+        "update-job-role/<int:pk>/",
+        job_role.JobRoleFormView.as_view(),
+        name="update-job-role",
+    ),
     path("settings/job-role-view/", views.job_role_view, name="job-role-view"),
     path(
         "settings/job-role-update/<int:id>/",
@@ -272,6 +473,25 @@ urlpatterns = [
         },
     ),
     path("settings/work-type-view/", views.work_type_view, name="work-type-view"),
+    path(
+        "worktype-list/",
+        settings_work_type.WorkTypeList.as_view(),
+        name="worktype-list",
+    ),
+    path(
+        "worktype-nav/", settings_work_type.WorkTypeNav.as_view(), name="worktype-nav"
+    ),
+    path(
+        "work-type-create-form/",
+        work_type_request.WorkTypesCreateForm.as_view(),
+        name="work-type-create-form",
+    ),
+    path(
+        "work-type-update-form/<int:pk>/",
+        work_type_request.WorkTypesCreateForm.as_view(),
+        name="work-type-update-form",
+    ),
+    # path("candidate-work-type-create-form/",work_type_request.DynamicWorkTypeCreateForm.as_view(),name="candidate-work-type-create-form"),
     path("settings/work-type-create/", views.work_type_create, name="work-type-create"),
     path(
         "settings/work-type-update/<int:id>/",
@@ -300,6 +520,16 @@ urlpatterns = [
             "field_name_pre": "work_type",
         },
     ),
+    path(
+        "rotating-work-type-create-form/",
+        rotating_work_type.RotatingWorkTypesCreateForm.as_view(),
+        name="rotating-work-type-create-form",
+    ),
+    path(
+        "rotating-work-type-update-form/<int:pk>",
+        rotating_work_type.RotatingWorkTypesCreateForm.as_view(),
+        name="rotating-work-type-update-form",
+    ),
     path(
         "settings/rotating-work-type-create/",
         views.rotating_work_type_create,
@@ -310,6 +540,16 @@ urlpatterns = [
         views.rotating_work_type_view,
         name="rotating-work-type-view",
     ),
+    path(
+        "rotating-list/",
+        settings_rotatingwork.RotatingWorkTypeList.as_view(),
+        name="rotating-list",
+    ),
+    path(
+        "rotating-nav/",
+        settings_rotatingwork.RotatingWorkTypeNav.as_view(),
+        name="rotating-nav",
+    ),
     path(
         "settings/rotating-work-type-update/<int:id>/",
         views.rotating_work_type_update,
@@ -325,14 +565,19 @@ urlpatterns = [
             "HttpResponse": True,
         },
     ),
-    path(
-        "employee/rotating-work-type-assign/",
-        views.rotating_work_type_assign,
-        name="rotating-work-type-assign",
-    ),
+    # path(
+    #     "employee/rotating-work-type-assign/",
+    #     views.rotating_work_type_assign,
+    #     name="rotating-work-type-assign",
+    # ),
+    # path(
+    #     "rotating-work-type-assign-add",
+    #     views.rotating_work_type_assign_add,
+    #     name="rotating-work-type-assign-add",
+    # ),
     path(
         "rotating-work-type-assign-add",
-        views.rotating_work_type_assign_add,
+        rotating_work_type.RotatingWorkTypeFormView.as_view(),
         name="rotating-work-type-assign-add",
     ),
     path(
@@ -346,19 +591,29 @@ urlpatterns = [
         name="rotating-work-type-assign-export",
     ),
     path(
-        "settings/rotating-work-type-assign-update/<int:id>/",
-        views.rotating_work_type_assign_update,
+        "settings/rotating-work-type-assign-update/<int:pk>/",
+        rotating_work_type.RotatingWorkTypeFormView.as_view(),
         name="rotating-work-type-assign-update",
     ),
+    # path(
+    #     "settings/rotating-work-type-assign-update/<int:id>/",
+    #     views.rotating_work_type_assign_update,
+    #     name="rotating-work-type-assign-update",
+    # ),
+    # path(
+    #     "rotating-work-type-assign-duplicate/<int:obj_id>/",
+    #     views.object_duplicate,
+    #     name="rotating-work-type-assign-duplicate",
+    #     kwargs={
+    #         "model": RotatingWorkTypeAssign,
+    #         "form": RotatingWorkTypeAssignForm,
+    #         "template": "base/rotating_work_type/htmx/rotating_work_type_assign_form.html",
+    #     },
+    # ),
     path(
-        "rotating-work-type-assign-duplicate/<int:obj_id>/",
-        views.object_duplicate,
+        "rotating-work-type-assign-duplicate/<int:pk>/",
+        rotating_work_type.RotatingWorkTypeDuplicateForm.as_view(),
         name="rotating-work-type-assign-duplicate",
-        kwargs={
-            "model": RotatingWorkTypeAssign,
-            "form": RotatingWorkTypeAssignForm,
-            "template": "base/rotating_work_type/htmx/rotating_work_type_assign_form.html",
-        },
     ),
     path(
         "rotating-work-type-assign-archive/<int:obj_id>/",
@@ -385,11 +640,31 @@ urlpatterns = [
         views.employee_type_view,
         name="employee-type-view",
     ),
+    path(
+        "settings/employee-type-list/",
+        employee_type.EmployeeTypeListView.as_view(),
+        name="employee-type-list",
+    ),
+    path(
+        "settings/employee-type-nav/",
+        employee_type.EmployeeTypeNav.as_view(),
+        name="employee-type-nav",
+    ),
     path(
         "settings/employee-type-create/",
         views.employee_type_create,
         name="employee-type-create",
     ),
+    path(
+        "settings/employee-type-create-view/",
+        employee_type.EmployeeTypeFormView.as_view(),
+        name="employee-type-create-view",
+    ),
+    path(
+        "settings/employee-type-update-view/<int:pk>/",
+        employee_type.EmployeeTypeFormView.as_view(),
+        name="employee-type-update-view",
+    ),
     path(
         "settings/employee-type-update/<int:id>/",
         views.employee_type_update,
@@ -410,17 +685,37 @@ urlpatterns = [
         views.employee_shift_view,
         name="employee-shift-view",
     ),
+    path(
+        "settings/employee-shift-list/",
+        employee_shift.EmployeeShiftListView.as_view(),
+        name="employee-shift-list",
+    ),
+    path(
+        "settings/employee-shift-nav/",
+        employee_shift.EmployeeShiftNav.as_view(),
+        name="employee-shift-nav",
+    ),
     path(
         "settings/employee-shift-create/",
         views.employee_shift_create,
         name="employee-shift-create",
     ),
+    path(
+        "settings/employee-shift-create-view/",
+        shift_request.ShiftTypeCreateFormView.as_view(),
+        name="employee-shift-create-view",
+    ),
     path(
         "settings/employee-shift-update/<int:id>/",
         views.employee_shift_update,
         name="employee-shift-update",
         kwargs={"model": EmployeeShift},
     ),
+    path(
+        "employee-shift-update-view/<int:pk>/",
+        shift_request.ShiftTypeCreateFormView.as_view(),
+        name="employee-shift-update-view",
+    ),
     path(
         "employee-shift-delete/<int:obj_id>/",
         views.object_delete,
@@ -430,6 +725,31 @@ urlpatterns = [
             "HttpResponse": True,
         },
     ),
+    path(
+        "employee-shift-shedule-list",
+        employee_shift_shedule.EmployeeShiftSheduleList.as_view(),
+        name="employee-shift-shedule-list",
+    ),
+    path(
+        "employee-shift-shedule-detail-view/<int:pk>/",
+        employee_shift_shedule.EmployeeShiftSheduleDetailView.as_view(),
+        name="employee-shift-shedule-detail-view",
+    ),
+    path(
+        "employee-shift-shedule-navbar",
+        employee_shift_shedule.EmployeeShiftSheduleNav.as_view(),
+        name="employee-shift-shedule-navbar",
+    ),
+    path(
+        "settings-employee-shift-shedule-create",
+        employee_shift_shedule.EmployeeShiftSheduleCreateForm.as_view(),
+        name="settings-employee-shift-shedule-create",
+    ),
+    path(
+        "settings-employee-shift-shedule-update/<int:pk>/",
+        employee_shift_shedule.EmployeeShiftSheduleCreateForm.as_view(),
+        name="settings-employee-shift-shedule-update",
+    ),
     path(
         "settings/employee-shift-schedule-view/",
         views.employee_shift_schedule_view,
@@ -452,12 +772,17 @@ urlpatterns = [
         name="employee-shift-schedule-delete",
         kwargs={
             "model": EmployeeShiftSchedule,
-            "HttpResponse": True,
+            "HttpResponse": "<script>$('#reloadMessagesButton').click();$('.oh-modal__close--custom').click();</script>",
         },
     ),
+    # path(
+    #     "settings/rotating-shift-create/",
+    #     views.rotating_shift_create,
+    #     name="rotating-shift-create",
+    # ),
     path(
-        "settings/rotating-shift-create/",
-        views.rotating_shift_create,
+        "rotating-shift-create/",
+        rotating_shift_assign.RotatingShiftTypeCreateFormView.as_view(),
         name="rotating-shift-create",
     ),
     path(
@@ -478,10 +803,25 @@ urlpatterns = [
         name="rotating-shift-view",
     ),
     path(
-        "settings/rotating-shift-update/<int:id>/",
-        views.rotating_shift_update,
+        "settings/rotating-shift-list/",
+        rotating_shift.RotatingShiftTypeListView.as_view(),
+        name="rotating-shift-list",
+    ),
+    path(
+        "settings/rotating-shift-nav/",
+        rotating_shift.RotatingShiftTypeNav.as_view(),
+        name="rotating-shift-nav",
+    ),
+    # path(
+    #     "settings/rotating-shift-update/<int:id>/",
+    #     views.rotating_shift_update,
+    #     name="rotating-shift-update",
+    #     kwargs={"model": RotatingShift},
+    # ),
+    path(
+        "settings/rotating-shift-update/<int:pk>/",
+        rotating_shift_assign.RotatingShiftTypeCreateFormView.as_view(),
         name="rotating-shift-update",
-        kwargs={"model": RotatingShift},
     ),
     path(
         "rotating-shift-delete/<int:obj_id>/",
@@ -489,17 +829,17 @@ urlpatterns = [
         name="rotating-shift-delete",
         kwargs={
             "model": RotatingShift,
-            "redirect": "/settings/rotating-shift-view",
+            "HttpResponse": "<script>$('#reloadMessagesButton').click()</script>",
         },
     ),
-    path(
-        "employee/rotating-shift-assign/",
-        views.rotating_shift_assign,
-        name="rotating-shift-assign",
-    ),
+    # path(
+    #     "employee/rotating-shift-assign/",
+    #     views.rotating_shift_assign,
+    #     name="rotating-shift-assign",
+    # ),
     path(
         "rotating-shift-assign-add",
-        views.rotating_shift_assign_add,
+        rotating_shift_assign.RotatingShiftFormView.as_view(),
         name="rotating-shift-assign-add",
     ),
     path(
@@ -512,25 +852,35 @@ urlpatterns = [
         views.rotating_shift_assign_export,
         name="rotating-shift-assign-info-export",
     ),
+    # path(
+    #     "settings/rotating-shift-assign-update/<int:id>/",
+    #     views.rotating_shift_assign_update,
+    #     name="rotating-shift-assign-update",
+    # ),
     path(
         "rotating-shift-assign-info-import",
         views.rotating_shift_assign_import,
         name="rotating-shift-assign-info-import",
     ),
     path(
-        "settings/rotating-shift-assign-update/<int:id>/",
-        views.rotating_shift_assign_update,
+        "settings/rotating-shift-assign-update/<int:pk>/",
+        rotating_shift_assign.RotatingShiftFormView.as_view(),
         name="rotating-shift-assign-update",
     ),
+    # path(
+    #     "rotating-shift-assign-duplicate/<int:obj_id>/",
+    #     views.object_duplicate,
+    #     name="rotating-shift-assign-duplicate",
+    #     kwargs={
+    #         "model": RotatingShiftAssign,
+    #         "form": RotatingShiftAssignForm,
+    #         "template": "base/rotating_shift/htmx/rotating_shift_assign_form.html",
+    #     },
+    # ),
     path(
-        "rotating-shift-assign-duplicate/<int:obj_id>/",
-        views.object_duplicate,
+        "rotating-shift-assign-duplicate/<int:pk>/",
+        rotating_shift_assign.RotatingShiftAssignDuplicate.as_view(),
         name="rotating-shift-assign-duplicate",
-        kwargs={
-            "model": RotatingShiftAssign,
-            "form": RotatingShiftAssignForm,
-            "template": "base/rotating_shift/htmx/rotating_shift_assign_form.html",
-        },
     ),
     path(
         "rotating-shift-assign-archive/<int:obj_id>/",
@@ -552,22 +902,32 @@ urlpatterns = [
         views.rotating_shift_assign_delete,
         name="rotating-shift-assign-delete",
     ),
-    path("work-type-request", views.work_type_request, name="work-type-request"),
+    # path("work-type-request", views.work_type_request, name="work-type-request"),
     path(
-        "work-type-request-duplicate/<int:obj_id>/",
-        views.object_duplicate,
+        "work-type-request",
+        work_type_request.WorkTypeFormView.as_view(),
+        name="work-type-request",
+    ),
+    # path(
+    #     "work-type-request-duplicate/<int:obj_id>/",
+    #     views.object_duplicate,
+    #     name="work-type-request-duplicate",
+    #     kwargs={
+    #         "model": WorkTypeRequest,
+    #         "form": WorkTypeRequestForm,
+    #         "template": "work_type_request/request_form.html",
+    #     },
+    # ),
+    path(
+        "work-type-request-duplicate/<int:pk>/",
+        work_type_request.WorkTypeDuplicateForm.as_view(),
         name="work-type-request-duplicate",
-        kwargs={
-            "model": WorkTypeRequest,
-            "form": WorkTypeRequestForm,
-            "template": "work_type_request/request_form.html",
-        },
-    ),
-    path(
-        "employee/work-type-request-view/",
-        views.work_type_request_view,
-        name="work-type-request-view",
     ),
+    # path(
+    #     "employee/",
+    #     views.work_type_request_view,
+    #     name="work-type-request-view",
+    # ),
     path(
         "work-type-request-info-export",
         views.work_type_request_export,
@@ -598,9 +958,14 @@ urlpatterns = [
         views.work_type_request_bulk_approve,
         name="work-type-request-bulk-approve",
     ),
+    # path(
+    #     "work-type-request-update/<int:work_type_request_id>/",
+    #     views.work_type_request_update,
+    #     name="work-type-request-update",
+    # ),
     path(
-        "work-type-request-update/<int:work_type_request_id>/",
-        views.work_type_request_update,
+        "work-type-request-update/<int:pk>/",
+        work_type_request.WorkTypeFormView.as_view(),
         name="work-type-request-update",
     ),
     path(
@@ -618,20 +983,35 @@ urlpatterns = [
         views.work_type_request_bulk_delete,
         name="work-type-request-bulk-delete",
     ),
-    path("shift-request", views.shift_request, name="shift-request"),
+    # path("shift-request", views.shift_request, name="shift-request"),
     path(
-        "shift-request-duplicate/<int:obj_id>/",
-        views.object_duplicate,
-        name="shift-request-duplicate",
-        kwargs={
-            "model": ShiftRequest,
-            "form": ShiftRequestForm,
-            "template": "shift_request/htmx/shift_request_create_form.html",
-        },
+        "shift-request",
+        shift_request.ShiftRequestFormView.as_view(),
+        name="shift-request",
     ),
+    # path(
+    #     "shift-request-duplicate/<int:obj_id>/",
+    #     views.object_duplicate,
+    #     name="shift-request-duplicate",
+    #     kwargs={
+    #         "model": ShiftRequest,
+    #         "form": ShiftRequestForm,
+    #         "template": "shift_request/htmx/shift_request_create_form.html",
+    #     },
+    # ),
+    path(
+        "shift-request-duplicate/<int:pk>/",
+        shift_request.ShiftRequestFormDuplicate.as_view(),
+        name="shift-request-duplicate",
+    ),
+    # path(
+    #     "shift-request-reallocate",
+    #     views.shift_request_allocation,
+    #     name="shift-request-reallocate",
+    # ),
     path(
         "shift-request-reallocate",
-        views.shift_request_allocation,
+        shift_request.ShiftAllocationFormView.as_view(),
         name="shift-request-reallocate",
     ),
     path(
@@ -639,11 +1019,11 @@ urlpatterns = [
         views.update_employee_allocation,
         name="update-employee-allocation",
     ),
-    path(
-        "employee/shift-request-view/",
-        views.shift_request_view,
-        name="shift-request-view",
-    ),
+    # path(
+    #     "employee/shift-request-view/",
+    #     views.shift_request_view,
+    #     name="shift-request-view",
+    # ),
     path(
         "shift-request-info-export",
         views.shift_request_export,
@@ -662,14 +1042,24 @@ urlpatterns = [
         views.shift_allocation_request_details,
         name="shift-allocation-request-details",
     ),
+    # path(
+    #     "shift-request-update/<int:shift_request_id>/",
+    #     views.shift_request_update,
+    #     name="shift-request-update",
+    # ),
     path(
-        "shift-request-update/<int:shift_request_id>/",
-        views.shift_request_update,
+        "shift-request-update/<int:pk>/",
+        shift_request.ShiftRequestFormView.as_view(),
         name="shift-request-update",
     ),
+    # path(
+    #     "shift-allocation-request-update/<int:shift_request_id>/",
+    #     views.shift_allocation_request_update,
+    #     name="shift-allocation-request-update",
+    # ),
     path(
-        "shift-allocation-request-update/<int:shift_request_id>/",
-        views.shift_allocation_request_update,
+        "shift-allocation-request-update/<int:pk>/",
+        shift_request.ShiftAllocationFormView.as_view(),
         name="shift-allocation-request-update",
     ),
     path(
@@ -810,6 +1200,20 @@ urlpatterns = [
             "HttpResponse": True,
         },
     ),
+    path("audit-tag-list/", audit.AudiTagsList.as_view(), name="audit-tag-list"),
+    path(
+        "audit-tag-navbar/", audit.AuditTagsNavView.as_view(), name="audit-tag-navbar"
+    ),
+    path(
+        "settings-audit-tag-create/",
+        audit.AuditTagCreateForm.as_view(),
+        name="settings-audit-tag-create",
+    ),
+    path(
+        "settings-audit-tag-update/<int:pk>/",
+        audit.AuditTagCreateForm.as_view(),
+        name="settings-audit-tag-update",
+    ),
     path("audit-tag-create", views.audit_tag_create, name="audit-tag-create"),
     path(
         "audit-tag-update/<int:tag_id>", views.audit_tag_update, name="audit-tag-update"
@@ -818,13 +1222,16 @@ urlpatterns = [
         "audit-tag-delete/<int:obj_id>",
         views.object_delete,
         name="audit-tag-delete",
-        kwargs={"model": AuditTag, "HttpResponse": True},
-    ),
-    path(
-        "configuration/multiple-approval-condition",
-        views.multiple_approval_condition,
-        name="multiple-approval-condition",
+        kwargs={
+            "model": AuditTag,
+            "HttpResponse": "<script>$('#reloadMessagesButton').click()</script>",
+        },
     ),
+    # path(
+    #     "configuration/multiple-approval-condition",
+    #     views.multiple_approval_condition,
+    #     name="multiple-approval-condition",
+    # ),
     path(
         "configuration/condition-value-fields",
         views.get_condition_value_fields,
@@ -840,19 +1247,29 @@ urlpatterns = [
         views.remove_approval_manager,
         name="remove-approval-manager",
     ),
-    path(
-        "configuration/hx-multiple-approval-condition",
-        views.hx_multiple_approval_condition,
-        name="hx-multiple-approval-condition",
-    ),
+    # path(
+    #     "configuration/hx-multiple-approval-condition",
+    #     views.hx_multiple_approval_condition,
+    #     name="hx-multiple-approval-condition",
+    # ),
+    # path(
+    #     "multiple-level-approval-create",
+    #     views.multiple_level_approval_create,
+    #     name="multiple-level-approval-create",
+    # ),
     path(
         "multiple-level-approval-create",
-        views.multiple_level_approval_create,
+        multiple_approval_condition.MultipleApprovalConditionFormView.as_view(),
         name="multiple-level-approval-create",
     ),
+    # path(
+    #     "multiple-level-approval-edit/<int:condition_id>",
+    #     views.multiple_level_approval_edit,
+    #     name="multiple-level-approval-edit",
+    # ),
     path(
-        "multiple-level-approval-edit/<int:condition_id>",
-        views.multiple_level_approval_edit,
+        "multiple-level-approval-edit/<int:pk>/",
+        multiple_approval_condition.EditApprovalConditionFormView.as_view(),
         name="multiple-level-approval-edit",
     ),
     path(
@@ -900,14 +1317,24 @@ urlpatterns = [
         views.delete_worktyperequest_comment,
         name="worktype-request-delete-comment",
     ),
+    # path(
+    #     "dashboard-shift-request",
+    #     request_and_approve.dashboard_shift_request,
+    #     name="dashboard-shift-request",
+    # ),
     path(
         "dashboard-shift-request",
-        request_and_approve.dashboard_shift_request,
+        dashboard.ShiftRequestToApprove.as_view(),
         name="dashboard-shift-request",
     ),
+    # path(
+    #     "dashboard-work-type-request",
+    #     request_and_approve.dashboard_work_type_request,
+    #     name="dashboard-work-type-request",
+    # ),
     path(
         "dashboard-work-type-request",
-        request_and_approve.dashboard_work_type_request,
+        dashboard.DashboardWorkTypeRequest.as_view(),
         name="dashboard-work-type-request",
     ),
     path(
@@ -932,10 +1359,16 @@ urlpatterns = [
         views.pagination_settings_view,
         name="pagination-settings-view",
     ),
+    # path("announcement/", announcement.announcement_view, name="announcement"),
+    # path(
+    #     "create-announcement",
+    #     announcement.create_announcement,
+    #     name="create-announcement",
+    # ),
     path("announcement-list", announcement.announcement_list, name="announcement-list"),
     path(
         "create-announcement",
-        announcement.create_announcement,
+        announcement_cbv.AnnouncementFormView.as_view(),
         name="create-announcement",
     ),
     path(
@@ -943,9 +1376,24 @@ urlpatterns = [
         announcement.delete_announcement,
         name="delete-announcement",
     ),
+    # path(
+    #     "update-announcement/<int:anoun_id>",
+    #     announcement.update_announcement,
+    #     name="update-announcement",
+    # ),
     path(
-        "update-announcement/<int:anoun_id>",
-        announcement.update_announcement,
+        "dashboard-announcement-list/",
+        dashboard.DashboardAnnouncementView.as_view(),
+        name="dashboard-announcement-list",
+    ),
+    path(
+        "dashboard-announcement-viewed-by-list/<int:announcement_id>/",
+        dashboard.AnnouncementViewedByList.as_view(),
+        name="dashboard-announcement-viewed-by-list",
+    ),
+    path(
+        "update-announcement/<int:pk>",
+        announcement_cbv.AnnouncementFormView.as_view(),
         name="update-announcement",
     ),
     path(
@@ -998,22 +1446,153 @@ urlpatterns = [
         views.activate_biometric_attendance,
         name="activate-biometric-attendance",
     ),
+    path(
+        "employee/shift-request-view/",
+        shift_request.ShiftRequestView.as_view(),
+        name="shift-request-view",
+    ),
+    path(
+        "list-shift-request/",
+        shift_request.ShiftRequestList.as_view(),
+        name="list-shift-request",
+    ),
+    path(
+        "shift-request-nav/",
+        shift_request.ShitRequestNav.as_view(),
+        name="shift-request-nav",
+    ),
+    path("shift-export/", shift_request.ExportView.as_view(), name="shift-export"),
+    path(
+        "shift-request-tab",
+        shift_request.ShiftRequestTab.as_view(),
+        name="shift-request-tab",
+    ),
+    path(
+        "shift-request-individual-tab-view/<int:pk>/",
+        work_shift_tab.ShiftRequestIndividualTabView.as_view(),
+        name="shift-request-individual-tab-view",
+    ),
+    path(
+        "rotating-shift-individual-tab-view/<int:pk>/",
+        work_shift_tab.RotatingShiftAssignIndividualView.as_view(),
+        name="rotating-shift-individual-tab-view",
+    ),
+    path(
+        "rotating-shift-individual-detail-view/<int:pk>/",
+        work_shift_tab.RotatingShiftAssignIndividualDetailView.as_view(),
+        name="rotating-shift-individual-detail-view",
+    ),
+    path(
+        "allocated-shift-view/",
+        shift_request.AllocatedShift.as_view(),
+        name="allocated-shift-view",
+    ),
+    path(
+        "shift-detail-view/<int:pk>/",
+        shift_request.ShiftRequestDetailview.as_view(),
+        name="shift-detail-view",
+    ),
+    path(
+        "allocate-detail-view/<int:pk>/",
+        shift_request.AllocatedShiftDetailView.as_view(),
+        name="allocate-detail-view",
+    ),
+    path(
+        "employee/rotating-shift-assign/",
+        rotating_shift_assign.RotatingShiftAssignView.as_view(),
+        name="rotating-shift-assign",
+    ),
+    path(
+        "rotating-shift-request-list/",
+        rotating_shift_assign.RotatingShiftList.as_view(),
+        name="rotating-shift-request-list",
+    ),
+    path(
+        "rotating-shift-request-nav/",
+        rotating_shift_assign.RotatingShiftAssignNav.as_view(),
+        name="rotating-shift-request-nav",
+    ),
+    path(
+        "rotating-shift-detail-view/<int:pk>/",
+        rotating_shift_assign.RotatingShiftDetailview.as_view(),
+        name="rotating-shift-detail-view",
+    ),
+    path(
+        "export-rshift/",
+        rotating_shift_assign.RotatingExportView.as_view(),
+        name="export-rshift",
+    ),
+    # path(
+    #     "emp-workinfo-complete",
+    #     views.employee_workinfo_complete,
+    #     name="emp-workinfo-complete",
+    # ),
     path(
         "emp-workinfo-complete",
-        views.employee_workinfo_complete,
+        dashboard.EmployeeWorkInformationList.as_view(),
         name="emp-workinfo-complete",
     ),
+    path(
+        "update-emp-workinfo/<int:pk>/",
+        dashboard.EmployeeWorkInformationFormView.as_view(),
+        name="update-emp-workinfo",
+    ),
+    path(
+        "configuration/multiple-approval-condition",
+        multiple_approval_condition.MultipleApprovalConditionView.as_view(),
+        name="multiple-approval-condition",
+    ),
+    path(
+        "configuration/hx-multiple-approval-condition",
+        multiple_approval_condition.MultipleApprovalConditionList.as_view(),
+        name="hx-multiple-approval-condition",
+    ),
+    path(
+        "nav-multiple-approval-condition",
+        multiple_approval_condition.MultipleApprovalConditionNav.as_view(),
+        name="nav-multiple-approval-condition",
+    ),
+    path(
+        "detail-view-multiple-approval-condition/<int:pk>/",
+        multiple_approval_condition.MultipleApprovalConditionDetailView.as_view(),
+        name="detail-view-multiple-approval-condition",
+    ),
     path(
         "get-horilla-installed-apps/",
         views.get_horilla_installed_apps,
         name="get-horilla-installed-apps",
     ),
-    path("configuration/holiday-view", views.holiday_view, name="holiday-view"),
+    # path("configuration/holiday-view", views.holiday_view, name="holiday-view"),
     path(
         "configuration/holidays-excel-template",
         views.holidays_excel_template,
         name="holidays-excel-template",
     ),
+    path(
+        "configuration/holiday-view/",
+        holidays.HolidaysView.as_view(),
+        name="holiday-view",
+    ),
+    path("holiday-filter/", holidays.HolidayListView.as_view(), name="holiday-filter"),
+    path("holiday-navbar/", holidays.HolidayNavView.as_view(), name="holiday-navbar"),
+    path(
+        "holiday-nav-export/",
+        holidays.HolidayExport.as_view(),
+        name="holiday-nav-export",
+    ),
+    path(
+        "holiday-detail-view/<int:pk>/",
+        holidays.HolidayDetailView.as_view(),
+        name="holiday-detail-view",
+    ),
+    path(
+        "holiday-creation", holidays.HolidayFormView.as_view(), name="holiday-creation"
+    ),
+    path(
+        "holiday-update/<int:pk>",
+        holidays.HolidayFormView.as_view(),
+        name="holiday-update",
+    ),
     path(
         "holidays-info-import", views.holidays_info_import, name="holidays-info-import"
     ),
@@ -1023,8 +1602,6 @@ urlpatterns = [
         views.get_upcoming_holidays,
         name="get-upcoming-holidays",
     ),
-    path("holiday-creation", views.holiday_creation, name="holiday-creation"),
-    path("holiday-update/<int:obj_id>", views.holiday_update, name="holiday-update"),
     path(
         "duplicate-holiday/<int:obj_id>",
         views.object_duplicate,
@@ -1039,28 +1616,58 @@ urlpatterns = [
     path(
         "holidays-bulk-delete", views.bulk_holiday_delete, name="holidays-bulk-delete"
     ),
-    path("holiday-filter", views.holiday_filter, name="holiday-filter"),
+    # path("holiday-filter", views.holiday_filter, name="holiday-filter"),
     path("holiday-select/", views.holiday_select, name="holiday-select"),
     path(
         "holiday-select-filter/",
         views.holiday_select_filter,
         name="holiday-select-filter",
     ),
+    # path(
+    #     "company-leave-creation",
+    #     views.company_leave_creation,
+    #     name="company-leave-creation",
+    # ),
+    # path(
+    #     "configuration/company-leave-view",
+    #     views.company_leave_view,
+    #     name="company-leave-view",
+    # ),
     path(
-        "company-leave-creation",
-        views.company_leave_creation,
-        name="company-leave-creation",
-    ),
-    path(
-        "configuration/company-leave-view",
-        views.company_leave_view,
+        "configuration/company-leave-view/",
+        company_leaves.CompanyLeavesView.as_view(),
         name="company-leave-view",
     ),
     path(
-        "company-leave-update/<int:id>",
-        views.company_leave_update,
+        "company-leave-list/",
+        company_leaves.CompanyleaveListView.as_view(),
+        name="company-leave-list",
+    ),
+    path(
+        "company-leave-navbar/",
+        company_leaves.CompanyLeaveNavView.as_view(),
+        name="company-leave-navbar",
+    ),
+    path(
+        "company-leave-detail-view/<int:pk>",
+        company_leaves.CompanyLeaveDetailView.as_view(),
+        name="company-leave-detail-view",
+    ),
+    path(
+        "company-leave-creation",
+        company_leaves.CompanyleaveFormView.as_view(),
+        name="company-leave-creation",
+    ),
+    path(
+        "company-leave-update/<int:pk>",
+        company_leaves.CompanyleaveFormView.as_view(),
         name="company-leave-update",
     ),
+    # path(
+    #     "company-leave-update/<int:id>",
+    #     views.company_leave_update,
+    #     name="company-leave-update",
+    # ),
     path(
         "company-leave-delete/<int:id>",
         views.company_leave_delete,
@@ -1069,7 +1676,13 @@ urlpatterns = [
     path(
         "company-leave-filter", views.company_leave_filter, name="company-leave-filter"
     ),
-    path("view-penalties", views.view_penalties, name="view-penalties"),
+    # path("view-penalties", views.view_penalties, name="view-penalties"),
+    path("view-penalties", penalty.ViewPenaltyList.as_view(), name="view-penalties"),
+    path(
+        "delete-penalties/<int:penalty_id>/",
+        views.delete_penalities,
+        name="delete-penalties",
+    ),
 ]
 
 urlpatterns.append(
diff --git a/base/views copy.py b/base/views copy.py
new file mode 100644
index 000000000..9a84c7d94
--- /dev/null
+++ b/base/views copy.py	
@@ -0,0 +1,7137 @@
+"""
+views.py
+
+This module is used to map url pattens with django views or methods
+"""
+
+import csv
+import json
+import os
+import uuid
+from datetime import datetime, timedelta
+from email.mime.image import MIMEImage
+from os import path
+from urllib.parse import parse_qs, unquote, urlencode
+
+import pandas as pd
+from django import forms
+from django.apps import apps
+from django.conf import settings
+from django.contrib import messages
+from django.contrib.auth import authenticate, login, logout
+from django.contrib.auth.models import Group, Permission, User
+from django.contrib.auth.views import PasswordResetConfirmView, PasswordResetView
+from django.core.files.base import ContentFile
+from django.core.mail import EmailMultiAlternatives
+from django.core.management import call_command
+from django.core.paginator import Paginator
+from django.db.models import ProtectedError, Q
+from django.http import Http404, HttpResponse, HttpResponseRedirect, JsonResponse
+from django.shortcuts import get_object_or_404, redirect, render
+from django.template.loader import render_to_string
+from django.urls import reverse, reverse_lazy
+from django.utils import timezone
+from django.utils.html import strip_tags
+from django.utils.timezone import localdate
+from django.utils.translation import gettext as _
+from django.views.decorators.csrf import csrf_exempt
+from django.views.decorators.http import require_http_methods
+
+from base.backends import ConfiguredEmailBackend
+from base.decorators import (
+    shift_request_change_permission,
+    work_type_request_change_permission,
+)
+from base.filters import (
+    CompanyLeaveFilter,
+    HolidayFilter,
+    PenaltyFilter,
+    RotatingShiftAssignFilters,
+    RotatingShiftRequestReGroup,
+    RotatingWorkTypeAssignFilter,
+    RotatingWorkTypeRequestReGroup,
+    ShiftRequestFilter,
+    ShiftRequestReGroup,
+    WorkTypeRequestFilter,
+    WorkTypeRequestReGroup,
+)
+from base.forms import (
+    AnnouncementExpireForm,
+    AssignPermission,
+    AssignUserGroup,
+    AuditTagForm,
+    ChangePasswordForm,
+    CompanyForm,
+    CompanyLeaveForm,
+    DepartmentForm,
+    DriverForm,
+    DynamicMailConfForm,
+    DynamicMailTestForm,
+    DynamicPaginationForm,
+    EmployeeShiftForm,
+    EmployeeShiftScheduleForm,
+    EmployeeShiftScheduleUpdateForm,
+    EmployeeTypeForm,
+    HolidayForm,
+    HolidaysColumnExportForm,
+    JobPositionForm,
+    JobPositionMultiForm,
+    JobRoleForm,
+    MailTemplateForm,
+    MultipleApproveConditionForm,
+    PassWordResetForm,
+    ResetPasswordForm,
+    RotatingShiftAssign,
+    RotatingShiftAssignExportForm,
+    RotatingShiftAssignForm,
+    RotatingShiftAssignUpdateForm,
+    RotatingShiftForm,
+    RotatingWorkTypeAssignExportForm,
+    RotatingWorkTypeAssignForm,
+    RotatingWorkTypeAssignUpdateForm,
+    RotatingWorkTypeForm,
+    ShiftAllocationForm,
+    ShiftRequestColumnForm,
+    ShiftRequestCommentForm,
+    ShiftRequestForm,
+    TagsForm,
+    UserGroupForm,
+    WorkTypeForm,
+    WorkTypeRequestColumnForm,
+    WorkTypeRequestCommentForm,
+    WorkTypeRequestForm,
+)
+from base.methods import (
+    choosesubordinates,
+    closest_numbers,
+    export_data,
+    filtersubordinates,
+    filtersubordinatesemployeemodel,
+    format_date,
+    generate_colors,
+    get_key_instances,
+    get_pagination,
+    is_reportingmanager,
+    paginator_qry,
+    random_color_generator,
+    sortby,
+)
+from base.models import (
+    WEEK_DAYS,
+    WEEKS,
+    Announcement,
+    AnnouncementExpire,
+    AnnouncementView,
+    BaserequestFile,
+    BiometricAttendance,
+    Company,
+    CompanyLeaves,
+    DashboardEmployeeCharts,
+    Department,
+    DynamicEmailConfiguration,
+    DynamicPagination,
+    EmployeeShift,
+    EmployeeShiftDay,
+    EmployeeShiftSchedule,
+    EmployeeType,
+    Holidays,
+    HorillaMailTemplate,
+    JobPosition,
+    JobRole,
+    MultipleApprovalCondition,
+    MultipleApprovalManagers,
+    RotatingShift,
+    RotatingWorkType,
+    RotatingWorkTypeAssign,
+    ShiftRequest,
+    ShiftRequestComment,
+    Tags,
+    WorkType,
+    WorkTypeRequest,
+    WorkTypeRequestComment,
+)
+from employee.filters import EmployeeFilter
+from employee.forms import ActiontypeForm, EmployeeGeneralSettingPrefixForm
+from employee.models import (
+    Actiontype,
+    DisciplinaryAction,
+    Employee,
+    EmployeeGeneralSetting,
+    EmployeeWorkInformation,
+)
+from horilla.decorators import (
+    delete_permission,
+    duplicate_permission,
+    hx_request_required,
+    login_required,
+    manager_can_enter,
+    permission_required,
+)
+from horilla.group_by import group_by_queryset
+from horilla.horilla_settings import (
+    APPS,
+    DB_INIT_PASSWORD,
+    DYNAMIC_URL_PATTERNS,
+    FILE_STORAGE,
+)
+from horilla.methods import get_horilla_model_class, remove_dynamic_url
+from horilla_audit.forms import HistoryTrackingFieldsForm
+from horilla_audit.models import AccountBlockUnblock, AuditTag, HistoryTrackingFields
+from notifications.models import Notification
+from notifications.signals import notify
+
+
+def custom404(request):
+    """
+    Custom 404 method
+    """
+    return render(request, "404.html")
+
+
+# Create your views here.
+def is_reportingmanger(request, instance):
+    """
+    If the instance have employee id field then you can use this method to know the request
+    user employee is the reporting manager of the instance
+    """
+    manager = request.user.employee_get
+    try:
+        employee_work_info_manager = (
+            instance.employee_id.employee_work_info.reporting_manager_id
+        )
+    except Exception:
+        return HttpResponse("This Employee Dont Have any work information")
+    return manager == employee_work_info_manager
+
+
+def initialize_database_condition():
+    """
+    Determines if the database initialization process should be triggered.
+
+    This function checks whether there are any users in the database. If there are no users,
+    or if there are superusers without associated employees, it indicates that the database
+    needs to be initialized.
+
+    Returns:
+        bool: True if the database needs to be initialized, False otherwise.
+    """
+    initialize_database = not User.objects.exists()
+    if not initialize_database:
+        initialize_database = True
+        superusers = User.objects.filter(is_superuser=True)
+        for user in superusers:
+            if hasattr(user, "employee_get"):
+                initialize_database = False
+                break
+    return initialize_database
+
+
+def load_demo_database(request):
+    if initialize_database_condition():
+        if request.method == "POST":
+            if request.POST.get("load_data_password") == DB_INIT_PASSWORD:
+                data_files = [
+                    "user_data.json",
+                    "employee_info_data.json",
+                    "base_data.json",
+                    "work_info_data.json",
+                ]
+                optional_apps = {
+                    "attendance": "attendance_data.json",
+                    "leave": "leave_data.json",
+                    "asset": "asset_data.json",
+                    "recruitment": "recruitment_data.json",
+                    "onboarding": "onboarding_data.json",
+                    "offboarding": "offboarding_data.json",
+                    "pms": "pms_data.json",
+                    "payroll": "payroll_data.json",
+                }
+
+                # Add data files for installed apps
+                data_files += [
+                    file
+                    for app, file in optional_apps.items()
+                    if apps.is_installed(app)
+                ]
+
+                # Load all data files
+                for file in data_files:
+                    file_path = path.join(settings.BASE_DIR, "load_data", file)
+                    call_command("loaddata", file_path)
+
+                messages.success(request, _("Database loaded successfully."))
+            else:
+                messages.error(request, _("Database Authentication Failed"))
+        return redirect(home)
+    return redirect("/")
+
+
+def initialize_database(request):
+    """
+    Handles the database initialization process via a user interface.
+
+    Parameters:
+        request (HttpRequest): The request object.
+
+    Returns:
+        HttpResponse: The rendered HTML template or a redirect response.
+    """
+    if initialize_database_condition():
+        if request.method == "POST":
+            password = request._post.get("password")
+            from horilla.horilla_settings import DB_INIT_PASSWORD as db_password
+
+            if db_password == password:
+                return redirect(initialize_database_user)
+            else:
+                messages.warning(
+                    request,
+                    _("The password you entered is incorrect. Please try again."),
+                )
+                return HttpResponse("<script>window.location.reload()</script>")
+        return render(request, "initialize_database/horilla_user.html")
+    else:
+        return redirect("/")
+
+
+@hx_request_required
+def initialize_database_user(request):
+    """
+    Handles the user creation step during database initialization.
+
+    Parameters:
+        request (HttpRequest): The request object.
+
+    Returns:
+        HttpResponse: The rendered HTML template for company creation or user signup.
+    """
+    if request.method == "POST":
+        form_data = request.__dict__.get("_post")
+        username = form_data.get("username")
+        password = form_data.get("password")
+        confirm_password = form_data.get("confirm_password")
+        if password != confirm_password:
+            return render(request, "initialize_database/horilla_user_signup.html")
+        first_name = form_data.get("firstname")
+        last_name = form_data.get("lastname")
+        badge_id = form_data.get("badge_id")
+        email = form_data.get("email")
+        phone = form_data.get("phone")
+        user = User.objects.filter(username=username).first()
+        if user and not hasattr(user, "employee_get"):
+            user.delete()
+        user = User.objects.create_superuser(
+            username=username, email=email, password=password
+        )
+        employee = Employee()
+        employee.employee_user_id = user
+        employee.badge_id = badge_id
+        employee.employee_first_name = first_name
+        employee.employee_last_name = last_name
+        employee.email = email
+        employee.phone = phone
+        employee.save()
+        user = authenticate(request, username=username, password=password)
+        login(request, user)
+        return render(
+            request,
+            "initialize_database/horilla_company.html",
+            {"form": CompanyForm(initial={"hq": True})},
+        )
+    return render(request, "initialize_database/horilla_user_signup.html")
+
+
+@hx_request_required
+def initialize_database_company(request):
+    """
+    Handles the company creation step during database initialization.
+
+    Parameters:
+        request (HttpRequest): The request object.
+
+    Returns:
+        HttpResponse: The rendered HTML template for department creation or company creation.
+    """
+    form = CompanyForm()
+    if request.method == "POST":
+        form = CompanyForm(request.POST, request.FILES)
+        if form.is_valid():
+            company = form.save()
+            try:
+                employee = request.user.employee_get
+                employee.employee_work_info.company_id = company
+                employee.employee_work_info.save()
+            except:
+                pass
+            return render(
+                request,
+                "initialize_database/horilla_department.html",
+                {"form": DepartmentForm(initial={"company_id": company})},
+            )
+    return render(request, "initialize_database/horilla_company.html", {"form": form})
+
+
+@hx_request_required
+def initialize_database_department(request):
+    """
+    Handles the department creation step during database initialization.
+
+    Parameters:
+        request (HttpRequest): The request object.
+
+    Returns:
+        HttpResponse: The rendered HTML template for department creation.
+    """
+    departments = Department.objects.all()
+    form = DepartmentForm(initial={"company_id": Company.objects.first()})
+    if request.method == "POST":
+        form = DepartmentForm(request.POST)
+        if form.is_valid():
+            company = form.cleaned_data.get("company_id")
+            form.save()
+            form = DepartmentForm(initial={"company_id": company})
+    return render(
+        request,
+        "initialize_database/horilla_department_form.html",
+        {"form": form, "departments": departments},
+    )
+
+
+@hx_request_required
+def initialize_department_edit(request, obj_id):
+    """
+    Handles editing of an existing department during database initialization.
+
+    Parameters:
+        request (HttpRequest): The request object.
+        obj_id (int): The ID of the department to be edited.
+
+    Returns:
+        HttpResponse: The rendered HTML template for department editing.
+    """
+    department = Department.find(obj_id)
+    form = DepartmentForm(instance=department)
+    if request.method == "POST":
+        form = DepartmentForm(request.POST, instance=department)
+        if form.is_valid():
+            company = form.cleaned_data.get("company_id")
+            form.save()
+            return render(
+                request,
+                "initialize_database/horilla_department_form.html",
+                {
+                    "form": DepartmentForm(initial={"company_id": company}),
+                    "departments": Department.objects.all(),
+                },
+            )
+    return render(
+        request,
+        "initialize_database/horilla_department_form.html",
+        {
+            "form": form,
+            "department": department,
+            "departments": Department.objects.all(),
+        },
+    )
+
+
+@hx_request_required
+def initialize_department_delete(request, obj_id):
+    """
+    Handles the deletion of an existing department during database initialization.
+
+    Parameters:
+        request (HttpRequest): The request object.
+        obj_id (int): The ID of the department to be deleted.
+
+    Returns:
+        HttpResponse: A redirect response to the department creation page.
+    """
+    department = Department.find(obj_id)
+    department.delete() if department else None
+    return redirect(initialize_database_department)
+
+
+@hx_request_required
+def initialize_database_job_position(request):
+    """
+    Handles the job position creation step during database initialization.
+
+    Parameters:
+        request (HttpRequest): The request object.
+
+    Returns:
+        HttpResponse: The rendered HTML template for job position creation.
+    """
+    company = Company.objects.first()
+    form = JobPositionMultiForm(initial={"company_id": company})
+    if request.method == "POST":
+        form = JobPositionMultiForm(request.POST)
+        if form.is_valid():
+            form.save()
+            form = JobPositionMultiForm(initial={"company_id": Company.objects.first()})
+        return render(
+            request,
+            "initialize_database/horilla_job_position_form.html",
+            {
+                "form": form,
+                "job_positions": JobPosition.objects.all(),
+                "company": company,
+            },
+        )
+    return render(
+        request,
+        "initialize_database/horilla_job_position.html",
+        {"form": form, "job_positions": JobPosition.objects.all(), "company": company},
+    )
+
+
+@hx_request_required
+def initialize_job_position_edit(request, obj_id):
+    """
+    Handles editing of an existing job position during database initialization.
+
+    Parameters:
+        request (HttpRequest): The request object.
+        obj_id (int): The ID of the job position to be edited.
+
+    Returns:
+        HttpResponse: The rendered HTML template for job position editing.
+    """
+    company = Company.objects.first()
+    job_position = JobPosition.find(obj_id)
+    form = JobPositionForm(instance=job_position)
+    if request.method == "POST":
+        form = JobPositionForm(request.POST, instance=job_position)
+        if form.is_valid():
+            form.save()
+            return render(
+                request,
+                "initialize_database/horilla_job_position_form.html",
+                {
+                    "form": JobPositionMultiForm(initial={"company_id": company}),
+                    "job_positions": JobPosition.objects.all(),
+                    "company": company,
+                },
+            )
+    return render(
+        request,
+        "initialize_database/horilla_job_position_form.html",
+        {
+            "form": form,
+            "job_position": job_position,
+            "job_positions": JobPosition.objects.all(),
+            "company": company,
+        },
+    )
+
+
+@hx_request_required
+def initialize_job_position_delete(request, obj_id):
+    """
+    Handles the deletion of an existing job position during database initialization.
+
+    Parameters:
+        request (HttpRequest): The request object.
+        obj_id (int): The ID of the job position to be deleting.
+
+    Returns:
+        HttpResponse: The rendered HTML template for job position creating.
+    """
+    company = Company.objects.first()
+    job_position = JobPosition.find(obj_id)
+    job_position.delete() if job_position else None
+    return render(
+        request,
+        "initialize_database/horilla_job_position_form.html",
+        {
+            "form": JobPositionMultiForm(
+                initial={"company_id": Company.objects.first()}
+            ),
+            "job_positions": JobPosition.objects.all(),
+            "company": company,
+        },
+    )
+
+
+def login_user(request):
+    """
+    This method is used render login template and authenticate user
+    """
+    if request.method == "POST":
+        username = request.POST["username"]
+        password = request.POST["password"]
+        next_url = request.GET.get("next")
+        query_params = request.GET.dict()
+        if "next" in query_params:
+            del query_params["next"]
+
+        params = f"{urlencode(query_params)}"
+        user = authenticate(request, username=username, password=password)
+        if user is None:
+            user_object = User.objects.filter(username=username).first()
+            is_active = user_object.is_active if user_object else None
+            if is_active is True or is_active is None:
+                messages.error(request, _("Invalid username or password."))
+            else:
+                messages.warning(
+                    request,
+                    _("Access Denied: Your login credentials are currently blocked."),
+                )
+            return redirect("/login")
+        if user.employee_get.is_active == False:
+            messages.warning(
+                request,
+                _(
+                    "This user is archived. Please contact the manager for more information."
+                ),
+            )
+            return redirect("/login")
+        login(request, user)
+        messages.success(request, _("Login Success"))
+        if next_url:
+            url = f"{next_url}"
+            if params:
+                url += f"?{params}"
+            return redirect(url)
+        return redirect("/")
+    return render(
+        request, "login.html", {"initialize_database": initialize_database_condition()}
+    )
+
+
+def include_employee_instance(request, form):
+    """
+    This method is used to include the employee instance to the form
+    Args:
+        form: django forms instance
+    """
+    queryset = form.fields["employee_id"].queryset
+    employee = Employee.objects.filter(employee_user_id=request.user)
+    if employee.first() is not None:
+        if queryset.filter(id=employee.first().id).first() is None:
+            queryset = queryset | employee
+            form.fields["employee_id"].queryset = queryset
+    return form
+
+
+def reset_send_success(request):
+    return render(request, "reset_send.html")
+
+
+class HorillaPasswordResetView(PasswordResetView):
+    """
+    Horilla View for Reset Password
+    """
+
+    template_name = "forgot_password.html"
+    form_class = PassWordResetForm
+    success_url = reverse_lazy("reset-send-success")
+
+    def form_valid(self, form):
+        email_backend = ConfiguredEmailBackend()
+        default = "base.backends.ConfiguredEmailBackend"
+        is_default_backend = True
+        EMAIL_BACKEND = getattr(settings, "EMAIL_BACKEND", "")
+        if EMAIL_BACKEND and default != EMAIL_BACKEND:
+            is_default_backend = False
+        if is_default_backend and not email_backend.configuration:
+            messages.error(self.request, _("Primary mail server is not configured"))
+            return redirect("forgot-password")
+
+        username = form.cleaned_data["email"]
+        user = User.objects.filter(username=username).first()
+        if user:
+            opts = {
+                "use_https": self.request.is_secure(),
+                "token_generator": self.token_generator,
+                "from_email": email_backend.dynamic_from_email_with_display_name,
+                "email_template_name": self.email_template_name,
+                "subject_template_name": self.subject_template_name,
+                "request": self.request,
+                "html_email_template_name": self.html_email_template_name,
+                "extra_email_context": self.extra_email_context,
+            }
+            form.save(**opts)
+            if self.request.user.is_authenticated:
+                messages.success(
+                    self.request, _("Password reset link sent successfully")
+                )
+                return HttpResponseRedirect(self.request.META.get("HTTP_REFERER", "/"))
+
+            return redirect(reverse_lazy("reset-send-success"))
+
+        messages.info(self.request, _("No user found with the username"))
+        return redirect("forgot-password")
+
+
+class EmployeePasswordResetView(PasswordResetView):
+    """
+    Horilla View for Employee Reset Password
+    """
+
+    template_name = "forgot_password.html"
+    form_class = PassWordResetForm
+
+    def form_valid(self, form):
+        try:
+            email_backend = ConfiguredEmailBackend()
+            default = "base.backends.ConfiguredEmailBackend"
+            is_default_backend = True
+            EMAIL_BACKEND = getattr(settings, "EMAIL_BACKEND", "")
+            if EMAIL_BACKEND and default != EMAIL_BACKEND:
+                is_default_backend = False
+            if is_default_backend and not email_backend.configuration:
+                messages.error(self.request, _("Primary mail server is not configured"))
+                return HttpResponseRedirect(self.request.META.get("HTTP_REFERER", "/"))
+
+            username = form.cleaned_data["email"]
+            user = User.objects.filter(username=username).first()
+            if user:
+                opts = {
+                    "use_https": self.request.is_secure(),
+                    "token_generator": self.token_generator,
+                    "from_email": email_backend.dynamic_from_email_with_display_name,
+                    "email_template_name": self.email_template_name,
+                    "subject_template_name": self.subject_template_name,
+                    "request": self.request,
+                    "html_email_template_name": self.html_email_template_name,
+                    "extra_email_context": self.extra_email_context,
+                }
+                form.save(**opts)
+                messages.success(
+                    self.request, _("Password reset link sent successfully")
+                )
+            else:
+                messages.error(self.request, _("No user with the given username"))
+            return HttpResponseRedirect(self.request.META.get("HTTP_REFERER", "/"))
+
+        except Exception as e:
+            messages.error(self.request, f"Something went wrong.....")
+            return HttpResponseRedirect(self.request.META.get("HTTP_REFERER", "/"))
+
+
+setattr(PasswordResetConfirmView, "template_name", "reset_password.html")
+setattr(PasswordResetConfirmView, "form_class", ResetPasswordForm)
+setattr(PasswordResetConfirmView, "success_url", "/")
+
+
+@login_required
+def change_password(request):
+    """
+    Handles the password change process for a logged-in user.
+
+    Args:
+        request (HttpRequest): The HTTP request object containing metadata about
+                               the request and user.
+
+    Returns:
+        HttpResponse: Renders the password change form if the request method is GET or
+                      the form is invalid. If the form is valid and the password is changed
+                      successfully, the page reloads with a success message.
+    """
+    user = request.user
+    form = ChangePasswordForm(user=user)
+    if request.method == "POST":
+        response = render(request, "base/auth/password_change.html", {"form": form})
+        form = ChangePasswordForm(user, request.POST)
+        if form.is_valid():
+            new_password = form.cleaned_data["new_password"]
+            user.set_password(new_password)
+            
+            if user.is_new_employee:  # Ensure this only affects new employees
+                user.is_new_employee = False
+            user.save()
+            
+            user = authenticate(request, username=user.username, password=new_password)
+            login(request, user)
+            messages.success(request, _("Password changed successfully"))
+            return HttpResponse(
+                response.content.decode("utf-8") + "<script>location.reload();</script>"
+            )
+    return render(request, "base/auth/password_change.html", {"form": form})
+
+
+
+
+
+
+
+
+
+
+def logout_user(request):
+    """
+    This method used to logout the user
+    """
+    if request.user:
+        logout(request)
+    response = HttpResponse()
+    response.content = """
+        <script>
+            localStorage.clear();
+        </script>
+        <meta http-equiv="refresh" content="0;url=/login">
+    """
+
+    return response
+
+
+class Workinfo:
+    def __init__(self, employee) -> None:
+        self.employee_work_info = employee
+        self.employee_id = employee
+        self.id = employee.id
+        pass
+
+
+@login_required
+def home(request):
+    """
+    This method is used to render index page
+    """
+
+    today = datetime.today()
+    today_weekday = today.weekday()
+    first_day_of_week = today - timedelta(days=today_weekday)
+    last_day_of_week = first_day_of_week + timedelta(days=6)
+
+    employee_charts = DashboardEmployeeCharts.objects.get_or_create(
+        employee=request.user.employee_get
+    )[0]
+
+    user = request.user
+    today = timezone.now().date()  # Get today's date
+    is_birthday = None
+
+    if user.employee_get.dob != None:
+        is_birthday = (
+            user.employee_get.dob.month == today.month
+            and user.employee_get.dob.day == today.day
+        )
+
+    context = {
+        "first_day_of_week": first_day_of_week.strftime("%Y-%m-%d"),
+        "last_day_of_week": last_day_of_week.strftime("%Y-%m-%d"),
+        "charts": employee_charts.charts,
+        "is_birthday": is_birthday,
+    }
+
+    return render(request, "index.html", context)
+
+
+@login_required
+def announcement_list(request):
+    general_expire_date = (
+        AnnouncementExpire.objects.values_list("days", flat=True).first() or 30
+    )
+    announcements = Announcement.objects.all()
+    announcements_to_update = []
+
+    for announcement in announcements.filter(expire_date__isnull=True):
+        announcement.expire_date = announcement.created_at + timedelta(
+            days=general_expire_date
+        )
+        announcements_to_update.append(announcement)
+
+    if announcements_to_update:
+        Announcement.objects.bulk_update(announcements_to_update, ["expire_date"])
+
+    announcements = announcements.filter(expire_date__gte=datetime.today().date())
+
+    if request.user.has_perm("base.view_announcement"):
+        announcement_list = announcements
+    else:
+        announcement_list = announcements.filter(
+            Q(employees=request.user.employee_get) | Q(employees__isnull=True)
+        )
+
+    announcement_list = announcement_list.prefetch_related(
+        "announcementview_set"
+    ).order_by("-created_at")
+    for announcement in announcement_list:
+        announcement.has_viewed = announcement.announcementview_set.filter(
+            user=request.user, viewed=True
+        ).exists()
+    instance_ids = json.dumps([instance.id for instance in announcement_list])
+    context = {
+        "announcements": announcement_list,
+        "general_expire_date": general_expire_date,
+        "instance_ids": instance_ids,
+    }
+    return render(request, "announcements_list.html", context)
+
+
+@login_required
+@manager_can_enter("employee.view_employeeworkinformation")
+def employee_workinfo_complete(request):
+
+    employees_with_pending = []
+
+    # List of field names to focus on
+    fields_to_focus = [
+        "job_position_id",
+        "department_id",
+        "work_type_id",
+        "employee_type_id",
+        "job_role_id",
+        "reporting_manager_id",
+        "company_id",
+        "location",
+        "email",
+        "mobile",
+        "shift_id",
+        "date_joining",
+        "contract_end_date",
+        "basic_salary",
+        "salary_hour",
+    ]
+    search = request.GET.get("search", "")
+    employees_workinfos = filtersubordinates(
+        request,
+        queryset=EmployeeWorkInformation.objects.filter(
+            employee_id__employee_first_name__icontains=search,
+            employee_id__is_active=True,
+        ),
+        perm="employee.view_employeeworkinformation",
+    )
+    for employee in employees_workinfos:
+        completed_field_count = sum(
+            1
+            for field_name in fields_to_focus
+            if getattr(employee, field_name) is not None
+        )
+        if completed_field_count < 15:
+            # Create a dictionary with employee information and pending field count
+            percent = f"{((completed_field_count / 15) * 100):.1f}"
+            employee_info = {
+                "employee": employee,
+                "completed_field_count": percent,
+            }
+            employees_with_pending.append(employee_info)
+        else:
+            pass
+
+    emps = filtersubordinatesemployeemodel(
+        request,
+        Employee.objects.filter(employee_work_info__isnull=True),
+        perm="employee.view_employeeworkinformation",
+    )
+    for emp in emps:
+        employees_with_pending.insert(
+            0,
+            {
+                "employee": Workinfo(employee=emp),
+                "completed_field_count": "0",
+            },
+        )
+
+    employees_with_pending.sort(key=lambda x: float(x["completed_field_count"]))
+
+    employees_with_pending = paginator_qry(
+        employees_with_pending, request.GET.get("page")
+    )
+
+    return render(
+        request,
+        "work_info_complete.html",
+        {"employees_with_pending": employees_with_pending},
+    )
+
+
+@login_required
+def common_settings(request):
+    """
+    This method is used to render setting page template
+    """
+    return render(request, "settings.html")
+
+
+@login_required
+@hx_request_required
+@permission_required("auth.add_group")
+def user_group_table(request):
+    """
+    Group assign htmx view
+    """
+    permissions = []
+    apps = APPS
+    form = UserGroupForm()
+    for app_name in apps:
+        app_models = []
+        for model in get_models_in_app(app_name):
+            app_models.append(
+                {
+                    "verbose_name": model._meta.verbose_name.capitalize(),
+                    "model_name": model._meta.model_name,
+                }
+            )
+        permissions.append({"app": app_name.capitalize(), "app_models": app_models})
+    if request.method == "POST":
+        form = UserGroupForm(request.POST)
+        if form.is_valid():
+            form.save()
+            messages.success(request, _("User group created."))
+            return HttpResponse("<script>window.location.reload()</script>")
+    return render(
+        request,
+        "base/auth/group_assign.html",
+        {
+            "permissions": permissions,
+            "form": form,
+        },
+    )
+
+
+@login_required
+@require_http_methods(["POST"])
+@permission_required("auth.add_permission")
+def update_group_permission(
+    request,
+):
+    """
+    This method is used to remove user permission.
+    """
+    group_id = request.POST["id"]
+    instance = Group.objects.get(id=group_id)
+    form = UserGroupForm(request.POST, instance=instance)
+    if form.is_valid():
+        form.save()
+        return JsonResponse({"message": "Updated the permissions", "type": "success"})
+    if request.POST.get("name_update"):
+        name = request.POST["name"]
+        if len(name) > 3:
+            instance.name = name
+            instance.save()
+            return JsonResponse({"message": "Name updated", "type": "success"})
+        return JsonResponse(
+            {"message": "At least 4 characters required", "type": "success"}
+        )
+    perms = form.cleaned_data.get("permissions")
+    if not perms:
+        instance.permissions.clear()
+        return JsonResponse({"message": "All permission cleared", "type": "info"})
+    return JsonResponse({"message": "Something went wrong", "type": "danger"})
+
+
+@login_required
+@permission_required("auth.view_group")
+def user_group(request):
+    """
+    This method is used to create user permission group
+    """
+    permissions = []
+
+    apps = APPS
+    form = UserGroupForm()
+    for app_name in apps:
+        app_models = []
+        for model in get_models_in_app(app_name):
+            app_models.append(
+                {
+                    "verbose_name": model._meta.verbose_name.capitalize(),
+                    "model_name": model._meta.model_name,
+                }
+            )
+        permissions.append({"app": app_name.capitalize(), "app_models": app_models})
+    groups = Group.objects.all()
+    return render(
+        request,
+        "base/auth/group.html",
+        {
+            "permissions": permissions,
+            "form": form,
+            "groups": paginator_qry(groups, request.GET.get("page")),
+        },
+    )
+
+
+@login_required
+@permission_required("auth.view_group")
+def user_group_search(request):
+    """
+    This method is used to create user permission group
+    """
+    permissions = []
+
+    apps = APPS
+    form = UserGroupForm()
+    for app_name in apps:
+        app_models = []
+        for model in get_models_in_app(app_name):
+            app_models.append(
+                {
+                    "verbose_name": model._meta.verbose_name.capitalize(),
+                    "model_name": model._meta.model_name,
+                }
+            )
+        permissions.append({"app": app_name.capitalize(), "app_models": app_models})
+    search = ""
+    if request.GET.get("search"):
+        search = str(request.GET["search"])
+    groups = Group.objects.filter(name__icontains=search)
+    return render(
+        request,
+        "base/auth/group_lines.html",
+        {
+            "permissions": permissions,
+            "form": form,
+            "groups": paginator_qry(groups, request.GET.get("page")),
+        },
+    )
+
+
+@login_required
+@hx_request_required
+@permission_required("auth.add_group")
+def group_assign(request):
+    """
+    This method is used to assign user group to the users.
+    """
+    group_id = request.GET.get("group")
+    form = AssignUserGroup(
+        initial={
+            "group": group_id,
+            "employee": Employee.objects.filter(
+                employee_user_id__groups__id=group_id
+            ).values_list("id", flat=True),
+        }
+    )
+    if request.POST:
+        group_id = request.POST["group"]
+        form = AssignUserGroup(
+            {"group": group_id, "employee": request.POST.getlist("employee")}
+        )
+        if form.is_valid():
+            form.save()
+            messages.success(request, _("User group assigned."))
+            return HttpResponse("<script>window.location.reload()</script>")
+    return render(
+        request,
+        "base/auth/group_user_assign.html",
+        {"form": form, "group_id": group_id},
+    )
+
+
+@login_required
+@permission_required("auth.view_group")
+def group_assign_view(request):
+    """
+    This method is used to search the user groups
+    """
+    search = ""
+    if request.GET.get("search") is not None:
+        search = request.GET.get("search")
+    groups = Group.objects.filter(name__icontains=search)
+    previous_data = request.GET.urlencode()
+    return render(
+        request,
+        "base/auth/group_assign_view.html",
+        {"groups": paginator_qry(groups, request.GET.get("page")), "pd": previous_data},
+    )
+
+
+@login_required
+@permission_required("auth.view_group")
+def user_group_view(request):
+    """
+    This method is used to render template for view all groups
+    """
+    search = ""
+    if request.GET.get("search") is not None:
+        search = request.GET["search"]
+    user_group = Group.objects.filter()
+    return render(request, "base/auth/group_assign.html", {"data": user_group})
+
+
+@login_required
+@permission_required("change_group")
+@require_http_methods(["POST"])
+def user_group_permission_remove(request, pid, gid):
+    """
+    This method is used to remove permission from group.
+    args:
+        pid: permission id
+        gid: group id
+    """
+    group = Group.objects.get(id=1)
+    permission = Permission.objects.get(id=2)
+    group.permissions.remove(permission)
+    return HttpResponseRedirect(request.META.get("HTTP_REFERER", "/"))
+
+
+@login_required
+@permission_required("change_group")
+@require_http_methods(["POST"])
+def group_remove_user(request, uid, gid):
+    """
+    This method is used to remove an user from group permission.
+    args:
+        uid: user instance id
+        gid: group instance id
+    """
+    group = Group.objects.get(id=gid)
+    user = User.objects.get(id=uid)
+    group.user_set.remove(user)
+    return HttpResponseRedirect(request.META.get("HTTP_REFERER", "/"))
+
+
+@login_required
+@delete_permission()
+@require_http_methods(["POST", "DELETE"])
+def object_delete(request, obj_id, **kwargs):
+    """
+    Handles the deletion of an object instance from the database.
+
+    Args:
+        request (HttpRequest): The HTTP request object containing metadata about
+                               the request and user.
+        obj_id (int): The ID of the object to be deleted.
+        **kwargs: Additional keyword arguments including:
+            - model (Model): The Django model class to which the object belongs.
+            - redirect_path (str): The URL path to redirect to after deletion.
+    Returns:
+        HttpResponse: Redirects to the specified `redirect_path` or reloads the
+                      previous page. In case of a ProtectedError, it shows an error
+                      message indicating that the object is in use.
+    """
+    model = kwargs.get("model")
+    redirect_path = kwargs.get("redirect_path")
+    delete_error = False
+    try:
+        instance = model.objects.get(id=obj_id)
+        instance.delete()
+        messages.success(
+            request, _("The {} has been deleted successfully.").format(instance)
+        )
+    except model.DoesNotExist:
+        delete_error = True
+        messages.error(request, _("{} not found.").format(model._meta.verbose_name))
+    except ProtectedError as e:
+        model_verbose_names_set = set()
+        for obj in e.protected_objects:
+            model_verbose_names_set.add(_(obj._meta.verbose_name.capitalize()))
+
+        model_names_str = ", ".join(model_verbose_names_set)
+        delete_error = True
+        messages.error(
+            request,
+            _("This {} is already in use for {}.").format(instance, model_names_str),
+        ),
+
+    if apps.is_installed("pms") and redirect_path == "/pms/filter-key-result/":
+        KeyResult = get_horilla_model_class(app_label="pms", model="keyresult")
+        key_results = KeyResult.objects.all()
+        if key_results.exists():
+            previous_data = request.GET.urlencode()
+            redirect_path = redirect_path + "?" + previous_data
+            return redirect(redirect_path)
+        else:
+            return HttpResponse("<script>window.location.reload()</script>")
+
+    if redirect_path:
+        previous_data = request.GET.urlencode()
+        redirect_path = redirect_path + "?" + previous_data
+        return redirect(redirect_path)
+    elif kwargs.get("HttpResponse"):
+        if delete_error:
+            return_part = "<script>window.location.reload()</script>"
+        elif kwargs.get("HttpResponse") is True:
+            return_part = ""
+        else:
+            return_part = kwargs.get("HttpResponse")
+        return HttpResponse(f"{return_part}")
+    else:
+        return HttpResponseRedirect(request.META.get("HTTP_REFERER", "/"))
+
+
+@login_required
+@hx_request_required
+@duplicate_permission()
+def object_duplicate(request, obj_id, **kwargs):
+    """
+    Handles the duplication of an object instance in the database.
+
+    Args:
+        request (HttpRequest): The HTTP request object containing metadata about
+                               the request and user.
+        obj_id (int): The ID of the object to be duplicated.
+        **kwargs: Additional keyword arguments including:
+            - model (Model): The Django model class to which the object belongs.
+            - form (Form): The Django form class used to handle the object data.
+            - template (str): The template to render for the duplication process.
+            - form_name (str, optional): The name to use for the form in the template context.
+
+    Returns:
+        HttpResponse: Renders the duplication form on GET requests and, on successful
+                      POST, reloads the page after saving the duplicated object.
+    """
+    model = kwargs["model"]
+    form_class = kwargs["form"]
+    template = kwargs["template"]
+    original_object = model.objects.get(id=obj_id)
+    form = form_class(instance=original_object)
+    if request.method == "GET":
+        for field_name, field in form.fields.items():
+            if isinstance(field, forms.CharField):
+                if field.initial:
+                    initial_value = field.initial
+                else:
+                    initial_value = f"{form.initial.get(field_name, '')} (copy)"
+                form.initial[field_name] = initial_value
+                form.fields[field_name].initial = initial_value
+        if hasattr(form.instance, "id"):
+            form.instance.id = None
+
+    if request.method == "POST":
+        form = form_class(request.POST)
+        if form.is_valid():
+            new_object = form.save(commit=False)
+            new_object.id = None
+            new_object.save()
+            return HttpResponse("<script>window.location.reload()</script>")
+
+    context = {
+        kwargs.get("form_name", "form"): form,
+        "obj_id": obj_id,
+        "duplicate": True,
+    }
+    return render(request, template, context)
+
+
+@login_required
+@hx_request_required
+@duplicate_permission()
+def add_remove_dynamic_fields(request, **kwargs):
+    """
+    Handles the dynamic addition and removal of form fields in a Django form.
+
+    Args:
+        request (HttpRequest): The HTTP request object containing metadata about
+                               the request and user.
+        **kwargs: Additional keyword arguments including:
+            - model (Model): The Django model class used for `ModelChoiceField`.
+            - form_class (Form): The Django form class to which dynamic fields will be added.
+            - template (str): The template used to render the newly added field.
+            - empty_label (str, optional): The label to show for empty choices in a `ModelChoiceField`.
+            - field_name_pre (str): The prefix for the dynamically generated field names.
+            - field_type (str, optional): The type of field to add, either "character" or "model_choice".
+
+    Returns:
+        HttpResponse: Returns the HTML for the newly added field, rendered in the context of the
+                      specified template. If the request is not POST or if no valid HTMX target
+                      is provided, it returns an empty HTTP response.
+    """
+    if request.method == "POST":
+        model = kwargs["model"]
+        form_class = kwargs["form_class"]
+        template = kwargs["template"]
+        empty_label = kwargs.get("empty_label")
+        field_name_pre = kwargs["field_name_pre"]
+        field_type = kwargs.get("field_type")
+        hx_target = request.META.get("HTTP_HX_TARGET")
+        if hx_target:
+            field_counts = int(hx_target.split("_")[-1]) + 1
+            next_hx_target = f"{hx_target.rsplit('_', 1)[0]}_{field_counts}"
+            form = form_class()
+            field_name = f"{field_name_pre}{field_counts}"
+            if field_type and field_type == "character":
+                form.fields[field_name] = forms.CharField(
+                    widget=forms.TextInput(
+                        attrs={
+                            "class": "oh-input w-100",
+                            "name": field_name,
+                            "id": f"id_{field_name}",
+                        }
+                    ),
+                    required=False,
+                )
+            else:
+                form.fields[field_name] = forms.ModelChoiceField(
+                    queryset=model.objects.all(),
+                    widget=forms.Select(
+                        attrs={
+                            "class": "oh-select oh-select-2 mb-3",
+                            "name": field_name,
+                            "id": f"id_{field_name}",
+                        }
+                    ),
+                    required=False,
+                    empty_label=empty_label,
+                )
+            context = {
+                "field_counts": field_counts,
+                "field_html": form[field_name].as_widget(),
+                "current_hx_target": hx_target,
+                "next_hx_target": next_hx_target,
+            }
+            field_html = render_to_string(template, context)
+            return HttpResponse(field_html)
+    return HttpResponse()
+
+
+@login_required
+@permission_required("base.view_dynamicemailconfiguration")
+def mail_server_conf(request):
+    mail_servers = DynamicEmailConfiguration.objects.all()
+    primary_mail_not_exist = True
+    if DynamicEmailConfiguration.objects.filter(is_primary=True).exists():
+        primary_mail_not_exist = False
+    return render(
+        request,
+        "base/mail_server/mail_server.html",
+        {
+            "mail_servers": mail_servers,
+            "primary_mail_not_exist": primary_mail_not_exist,
+        },
+    )
+
+
+@login_required
+@permission_required("base.view_dynamicemailconfiguration")
+def mail_server_test_email(request):
+    instance_id = request.GET.get("instance_id")
+    form = DynamicMailTestForm()
+    if request.method == "POST":
+        form = DynamicMailTestForm(request.POST)
+        if form.is_valid():
+            email_to = form.cleaned_data["to_email"]
+            subject = _("Test mail from Horilla")
+
+            # HTML content
+            html_content = """
+            <html>
+                <body style="font-family: Arial, sans-serif; margin: 0; padding: 0;">
+                    <table align="center" width="600" cellpadding="0" cellspacing="0" border="0" style="border: 1px solid #e0e0e0; border-radius: 10px; overflow: hidden;">
+                        <tr>
+                            <td align="center" bgcolor="#4CAF50" style="padding: 20px 0;">
+                                <h1 style="color: #ffffff; margin: 0;">Horilla</h1>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td style="padding: 20px;">
+                                <h3 style="color: #4CAF50;">Email tested successfully</h3>
+                                <b><p style="font-size: 14px;">Hi,<br>
+                                    This email is being sent as part of mail sever testing from Horilla.</p></b>
+                                <img src="cid:unique_image_id" alt="Test Image" style="width: 200px; height: auto; margin: 20px 0;">
+                            </td>
+                        </tr>
+                        <tr>
+                            <td bgcolor="#f0f0f0" style="padding: 10px; text-align: center;">
+                                <p style="font-size: 12px; color: black;">&copy; 2024 Horilla, Inc.</p>
+                            </td>
+                        </tr>
+                    </table>
+                </body>
+            </html>
+            """
+
+            # Plain text content (fallback for email clients that do not support HTML)
+            text_content = strip_tags(html_content)
+
+            email_backend = ConfiguredEmailBackend()
+            emailconfig = DynamicEmailConfiguration.objects.filter(
+                id=instance_id
+            ).first()
+            email_backend.configuration = emailconfig
+
+            try:
+                msg = EmailMultiAlternatives(
+                    subject,
+                    text_content,
+                    email_backend.dynamic_from_email_with_display_name,
+                    [email_to],
+                    connection=email_backend,
+                )
+                msg.attach_alternative(html_content, "text/html")
+
+                # Attach the image
+                image_path = path.join(
+                    settings.STATIC_ROOT, "images/ui/horilla-logo.png"
+                )
+                with open(image_path, "rb") as img:
+                    msg_img = MIMEImage(img.read())
+                    msg_img.add_header("Content-ID", "<unique_image_id>")
+                    msg.attach(msg_img)
+
+                msg.send()
+
+            except Exception as e:
+                messages.error(request, " ".join([_("Something went wrong :"), str(e)]))
+                return HttpResponse("<script>window.location.reload()</script>")
+
+            messages.success(request, _("Mail sent successfully"))
+            return HttpResponse("<script>window.location.reload()</script>")
+    return render(
+        request,
+        "base/mail_server/form_email_test.html",
+        {"form": form, "instance_id": instance_id},
+    )
+
+
+@login_required
+@permission_required("base.delete_dynamicemailconfiguration")
+def mail_server_delete(request):
+    """
+    This method is used to delete mail server
+    """
+    ids = request.GET.getlist("ids")
+    # primary_mail_check
+    delete = True
+    for id in ids:
+        emailconfig = DynamicEmailConfiguration.objects.filter(id=id).first()
+        if emailconfig.is_primary:
+            delete = False
+    if delete:
+        DynamicEmailConfiguration.objects.filter(id__in=ids).delete()
+        messages.success(request, "Mail server configuration deleted")
+        return HttpResponse("<script>window.location.reload()</script>")
+    else:
+        if DynamicEmailConfiguration.objects.all().count() == 1:
+            messages.warning(
+                request,
+                "You have only 1 Mail server configuration that can't be deleted",
+            )
+            return HttpResponse("<script>window.location.reload()</script>")
+        else:
+            mails = DynamicEmailConfiguration.objects.all().exclude(is_primary=True)
+            return render(
+                request,
+                "base/mail_server/replace_mail.html",
+                {
+                    "mails": mails,
+                    "title": _("Can't Delete"),
+                },
+            )
+
+
+def replace_primary_mail(request):
+    """
+    This method is used to replace primary mail server
+    """
+    emailconfig_id = request.POST.get("replace_mail")
+    email_config = DynamicEmailConfiguration.objects.get(id=emailconfig_id)
+    email_config.is_primary = True
+    email_config.save()
+    DynamicEmailConfiguration.objects.filter(is_primary=True).first().delete()
+
+    messages.success(request, "Primary Mail server configuration replaced")
+    return redirect("mail-server-conf")
+
+
+@login_required
+@hx_request_required
+@permission_required("base.add_dynamicemailconfiguration")
+def mail_server_create_or_update(request):
+    instance_id = request.GET.get("instance_id")
+    instance = None
+    if instance_id:
+        instance = DynamicEmailConfiguration.objects.filter(id=instance_id).first()
+    form = DynamicMailConfForm(instance=instance)
+    if request.method == "POST":
+        form = DynamicMailConfForm(request.POST, instance=instance)
+        if form.is_valid():
+            form.save()
+            return HttpResponse("<script>window.location.reload()</script>")
+    return render(
+        request, "base/mail_server/form.html", {"form": form, "instance": instance}
+    )
+
+
+@login_required
+@permission_required("base.view_horillamailtemplate")
+def view_mail_templates(request):
+    """
+    This method will render template to disply the offerletter templates
+    """
+    templates = HorillaMailTemplate.objects.all()
+    form = MailTemplateForm()
+    if templates.exists():
+        template = "mail/view_templates.html"
+    else:
+        template = "mail/empty_mail_template.html"
+    searchWords = form.get_template_language()
+    return render(
+        request,
+        template,
+        {"templates": templates, "form": form, "searchWords": searchWords},
+    )
+
+
+@login_required
+@hx_request_required
+@permission_required("base.change_horillamailtemplate")
+def view_mail_template(request, obj_id):
+    """
+    This method is used to display the template/form to edit
+    """
+    template = HorillaMailTemplate.objects.get(id=obj_id)
+    form = MailTemplateForm(instance=template)
+    searchWords = form.get_template_language()
+    if request.method == "POST":
+        form = MailTemplateForm(request.POST, instance=template)
+        if form.is_valid():
+            form.save()
+            messages.success(request, "Template updated")
+            return HttpResponse("<script>window.location.reload()</script>")
+
+    return render(
+        request,
+        "mail/htmx/form.html",
+        {"form": form, "duplicate": False, "searchWords": searchWords},
+    )
+
+
+@login_required
+@require_http_methods(["POST"])
+@permission_required("base.add_horillamailtemplate")
+def create_mail_templates(request):
+    """
+    This method is used to create offerletter template
+    """
+    if request.method == "POST":
+        form = MailTemplateForm(request.POST)
+        if form.is_valid():
+            instance = form.save()
+            instance.save()
+            messages.success(request, "Template created")
+            return HttpResponse("<script>window.location.reload()</script>")
+    return redirect(view_mail_templates)
+
+
+@login_required
+@permission_required("base.delete_horillamailtemplate")
+def delete_mail_templates(request):
+    ids = request.GET.getlist("ids")
+    result = HorillaMailTemplate.objects.filter(id__in=ids).delete()
+    messages.success(request, "Template deleted")
+    return redirect(view_mail_templates)
+
+
+@login_required
+@hx_request_required
+@permission_required("base.add_company")
+def company_create(request):
+    """
+    This method render template and form to create company and save if the form is valid
+    """
+
+    form = CompanyForm()
+    companies = Company.objects.all()
+    if request.method == "POST":
+        form = CompanyForm(request.POST, request.FILES)
+
+        if form.is_valid():
+            form.save()
+
+            messages.success(request, _("Company has been created successfully!"))
+            return HttpResponse("<script>window.location.reload()</script>")
+
+    return render(
+        request,
+        "base/company/company_form.html",
+        {"form": form, "companies": companies},
+    )
+
+
+@login_required
+@permission_required("base.view_company")
+def company_view(request):
+    """
+    This method used to view created companies
+    """
+
+    companies = Company.objects.all()
+    return render(request, "base/company/company.html", {"companies": companies})
+
+
+@login_required
+@hx_request_required
+@permission_required("base.change_company")
+def company_update(request, id, **kwargs):
+    """
+    This method is used to update company
+    args:
+        id : company instance id
+
+    """
+    company = Company.objects.get(id=id)
+    form = CompanyForm(instance=company)
+    if request.method == "POST":
+        form = CompanyForm(request.POST, request.FILES, instance=company)
+        if form.is_valid():
+            form.save()
+            messages.success(request, _("Company updated"))
+            return HttpResponse("<script>window.location.reload()</script>")
+    return render(
+        request, "base/company/company_form.html", {"form": form, "company": company}
+    )
+
+
+@login_required
+@hx_request_required
+@permission_required("base.add_department")
+def department_create(request):
+    """
+    This method renders form and template to create department
+    """
+
+    form = DepartmentForm()
+    if request.method == "POST":
+        form = DepartmentForm(request.POST)
+        if form.is_valid():
+            form.save()
+            form = DepartmentForm()
+            messages.success(request, _("Department has been created successfully!"))
+            return HttpResponse("<script>window.location.reload()</script>")
+    return render(
+        request,
+        "base/department/department_form.html",
+        {
+            "form": form,
+        },
+    )
+
+
+@login_required
+@permission_required("base.view_department")
+def department_view(request):
+    """
+    This method view department
+    """
+    departments = Department.objects.all()
+    return render(
+        request,
+        "base/department/department.html",
+        {
+            "departments": departments,
+        },
+    )
+
+
+@login_required
+@hx_request_required
+@permission_required("base.change_department")
+def department_update(request, id, **kwargs):
+    """
+    This method is used to update department
+    args:
+        id : department instance id
+    """
+    department = Department.find(id)
+    form = DepartmentForm(instance=department)
+    if request.method == "POST":
+        form = DepartmentForm(request.POST, instance=department)
+        if form.is_valid():
+            form.save()
+            messages.success(request, _("Department updated."))
+            return HttpResponse("<script>window.location.reload()</script>")
+    return render(
+        request,
+        "base/department/department_form.html",
+        {"form": form, "department": department},
+    )
+
+
+@login_required
+@permission_required("base.view_jobposition")
+def job_position(request):
+    """
+    This method is used to view job position
+    """
+
+    departments = Department.objects.all()
+    jobs = False
+    if JobPosition.objects.exists():
+        jobs = True
+    form = JobPositionForm()
+    if request.method == "POST":
+        form = JobPositionForm(request.POST)
+        if form.is_valid():
+            form.save()
+            messages.success(request, _("Job Position has been created successfully!"))
+    return render(
+        request,
+        "base/job_position/job_position.html",
+        {"form": form, "departments": departments, "jobs": jobs},
+    )
+
+
+@login_required
+@hx_request_required
+@permission_required("base.add_jobposition")
+def job_position_creation(request):
+    """
+    This method is used to create job position
+    """
+    dynamic = request.GET.get("dynamic") if request.GET.get("dynamic") else ""
+    form = JobPositionMultiForm()
+    if request.method == "POST":
+        form = JobPositionMultiForm(request.POST)
+        if form.is_valid():
+            form.save()
+            messages.success(request, _("Job Position has been created successfully!"))
+            return HttpResponse("<script>window.location.reload()</script>")
+    return render(
+        request,
+        "base/job_position/job_position_form.html",
+        {
+            "form": form,
+            "dynamic": dynamic,
+        },
+    )
+
+
+@login_required
+@hx_request_required
+@permission_required("base.change_jobposition")
+def job_position_update(request, id, **kwargs):
+    """
+    This method is used to update job position
+    args:
+        id : job position instance id
+
+    """
+    job_position = JobPosition.find(id)
+    form = JobPositionForm(instance=job_position)
+    if request.method == "POST":
+        form = JobPositionForm(request.POST, instance=job_position)
+        if form.is_valid():
+            form.save(commit=True)
+            messages.success(request, _("Job position updated."))
+            return HttpResponse("<script>window.location.reload()</script>")
+    return render(
+        request,
+        "base/job_position/job_position_form.html",
+        {"form": form, "job_position": job_position},
+    )
+
+
+@login_required
+@hx_request_required
+@permission_required("base.add_jobrole")
+def job_role_create(request):
+    """
+    This method is used to create job role.
+    """
+    dynamic = request.GET.get("dynamic")
+    form = JobRoleForm()
+    if request.method == "POST":
+        form = JobRoleForm(request.POST)
+        if form.instance.pk and form.is_valid():
+            form.save(commit=True)
+            messages.success(request, _("Job role has been created successfully!"))
+        elif (
+            not form.instance.pk
+            and form.data.getlist("job_position_id")
+            and form.data.get("job_role")
+        ):
+            form.save(commit=True)
+            messages.success(request, _("Job role has been created successfully!"))
+            return HttpResponse("<script>window.location.reload()</script>")
+
+    return render(
+        request,
+        "base/job_role/job_role_form.html",
+        {
+            "form": form,
+            "dynamic": dynamic,
+        },
+    )
+
+
+@login_required
+@permission_required("base.view_jobrole")
+def job_role_view(request):
+    """
+    This method is used to view job role.
+    """
+
+    jobs = JobPosition.objects.all()
+    job_role = False
+    if JobRole.objects.exists():
+        job_role = True
+
+    return render(
+        request,
+        "base/job_role/job_role.html",
+        {"job_positions": jobs, "job_role": job_role},
+    )
+
+
+@login_required
+@hx_request_required
+@permission_required("base.change_jobrole")
+def job_role_update(request, id, **kwargs):
+    """
+    This method is used to update job role instance
+    args:
+        id  : job role instance id
+
+    """
+
+    job_role = JobRole.find(id)
+    form = JobRoleForm(instance=job_role)
+    if request.method == "POST":
+        form = JobRoleForm(request.POST, instance=job_role)
+        if form.is_valid():
+            form.save(commit=True)
+            messages.success(request, _("Job role updated."))
+            return HttpResponse("<script>window.location.reload()</script>")
+
+    return render(
+        request,
+        "base/job_role/job_role_form.html",
+        {
+            "form": form,
+            "job_role": job_role,
+        },
+    )
+
+
+@login_required
+@hx_request_required
+@permission_required("base.add_worktype")
+def work_type_create(request):
+    """
+    This method is used to create work type
+    """
+    dynamic = request.GET.get("dynamic")
+    form = WorkTypeForm()
+    work_types = WorkType.objects.all()
+    if request.method == "POST":
+        form = WorkTypeForm(request.POST)
+        if form.is_valid():
+            form.save()
+            form = WorkTypeForm()
+
+            messages.success(request, _("Work Type has been created successfully!"))
+            return HttpResponse("<script>window.location.reload()</script>")
+
+    return render(
+        request,
+        "base/work_type/work_type_form.html",
+        {"form": form, "work_types": work_types, "dynamic": dynamic},
+    )
+
+
+@login_required
+@permission_required("base.view_worktype")
+def work_type_view(request):
+    """
+    This method is used to view work type
+    """
+
+    work_types = WorkType.objects.all()
+    return render(
+        request,
+        "base/work_type/work_type.html",
+        {"work_types": work_types},
+    )
+
+
+@login_required
+@hx_request_required
+@permission_required("base.change_worktype")
+def work_type_update(request, id, **kwargs):
+    """
+    This method is used to update work type instance
+    args:
+        id : work type instance id
+
+    """
+
+    work_type = WorkType.find(id)
+    form = WorkTypeForm(instance=work_type)
+    if request.method == "POST":
+        form = WorkTypeForm(request.POST, instance=work_type)
+        if form.is_valid():
+            form.save()
+            messages.success(request, _("Work type updated."))
+            return HttpResponse("<script>window.location.reload()</script>")
+    return render(
+        request,
+        "base/work_type/work_type_form.html",
+        {"form": form, "work_type": work_type},
+    )
+
+
+@login_required
+@hx_request_required
+@permission_required("base.add_rotatingworktype")
+def rotating_work_type_create(request):
+    """
+    This method is used to create rotating work type   .
+    """
+
+    form = RotatingWorkTypeForm()
+    if request.method == "POST":
+        form = RotatingWorkTypeForm(request.POST)
+        if form.is_valid():
+            form.save()
+            form = RotatingWorkTypeForm()
+            messages.success(request, _("Rotating work type created."))
+            return HttpResponse("<script>window.location.reload()</script>")
+    return render(
+        request,
+        "base/rotating_work_type/htmx/rotating_work_type_form.html",
+        {"form": form, "rwork_type": RotatingWorkType.objects.all()},
+    )
+
+
+@login_required
+@permission_required("base.view_rotatingworktype")
+def rotating_work_type_view(request):
+    """
+    This method is used to view rotating work type   .
+    """
+
+    return render(
+        request,
+        "base/rotating_work_type/rotating_work_type.html",
+        {"rwork_type": RotatingWorkType.objects.all()},
+    )
+
+
+@login_required
+@hx_request_required
+@permission_required("base.change_rotatingworktype")
+def rotating_work_type_update(request, id, **kwargs):
+    """
+    This method is used to update rotating work type instance.
+    args:
+        id : rotating work type instance id
+
+    """
+
+    rotating_work_type = RotatingWorkType.find(id)
+    form = RotatingWorkTypeForm(instance=rotating_work_type)
+    if request.method == "POST":
+        form = RotatingWorkTypeForm(request.POST, instance=rotating_work_type)
+        if form.is_valid():
+            form.save()
+            messages.success(request, _("Rotating work type updated."))
+            return HttpResponse("<script>window.location.reload()</script>")
+
+    return render(
+        request,
+        "base/rotating_work_type/htmx/rotating_work_type_form.html",
+        {"form": form, "r_type": rotating_work_type},
+    )
+
+
+@login_required
+@manager_can_enter("base.view_rotatingworktypeassign")
+def rotating_work_type_assign(request):
+    """
+    This method is used to assign rotating work type to employee users
+    """
+
+    filter = RotatingWorkTypeAssignFilter(
+        queryset=RotatingWorkTypeAssign.objects.filter(is_active=True)
+    )
+    rwork_all = RotatingWorkTypeAssign.objects.all()
+    rwork_type_assign = filter.qs.order_by("-id")
+    rwork_type_assign = filtersubordinates(
+        request, rwork_type_assign, "base.view_rotatingworktypeassign"
+    )
+    rwork_type_assign = rwork_type_assign.filter(employee_id__is_active=True)
+    assign_ids = json.dumps(
+        [
+            instance.id
+            for instance in paginator_qry(
+                rwork_type_assign, request.GET.get("page")
+            ).object_list
+        ]
+    )
+    return render(
+        request,
+        "base/rotating_work_type/rotating_work_type_assign.html",
+        {
+            "f": filter,
+            "rwork_type_assign": paginator_qry(
+                rwork_type_assign, request.GET.get("page")
+            ),
+            "assign_ids": assign_ids,
+            "rwork_all": rwork_all,
+            "gp_fields": RotatingWorkTypeRequestReGroup.fields,
+        },
+    )
+
+
+@login_required
+@hx_request_required
+@manager_can_enter("base.add_rotatingworktypeassign")
+def rotating_work_type_assign_add(request):
+    """
+    This method is used to assign rotating work type
+    """
+    form = RotatingWorkTypeAssignForm()
+    if request.GET.get("emp_id"):
+        employee = request.GET.get("emp_id")
+        form = RotatingWorkTypeAssignUpdateForm(initial={"employee_id": employee})
+    form = choosesubordinates(request, form, "base.add_rotatingworktypeassign")
+    if request.method == "POST":
+        form = RotatingWorkTypeAssignForm(request.POST)
+        form = choosesubordinates(request, form, "base.add_rotatingworktypeassign")
+        if form.is_valid():
+            form.save()
+            employee_ids = request.POST.getlist("employee_id")
+            employees = Employee.objects.filter(id__in=employee_ids).select_related(
+                "employee_user_id"
+            )
+            users = [employee.employee_user_id for employee in employees]
+            notify.send(
+                request.user.employee_get,
+                recipient=users,
+                verb="You are added to rotating work type",
+                verb_ar="تمت إضافتك إلى نوع العمل المتناوب",
+                verb_de="Sie werden zum rotierenden Arbeitstyp hinzugefügt",
+                verb_es="Se le agrega al tipo de trabajo rotativo",
+                verb_fr="Vous êtes ajouté au type de travail rotatif",
+                icon="infinite",
+                redirect=reverse("employee-profile"),
+            )
+
+            messages.success(request, _("Rotating work type assigned."))
+            response = render(
+                request,
+                "base/rotating_work_type/htmx/rotating_work_type_assign_form.html",
+                {"form": form},
+            )
+            return HttpResponse(
+                response.content.decode("utf-8") + "<script>location.reload();</script>"
+            )
+    return render(
+        request,
+        "base/rotating_work_type/htmx/rotating_work_type_assign_form.html",
+        {"form": form},
+    )
+
+
+@login_required
+@hx_request_required
+@manager_can_enter("base.view_rotatingworktypeassign")
+def rotating_work_type_assign_view(request):
+    """
+    This method renders template to view rotating work type objects
+    """
+
+    previous_data = request.GET.urlencode()
+    rwork_type_assign = RotatingWorkTypeAssignFilter(request.GET).qs.order_by("-id")
+    field = request.GET.get("field")
+    if not request.GET.get("is_active") or request.GET.get("is_active") in [
+        "true",
+        "unknown",
+    ]:
+        rwork_type_assign = rwork_type_assign.filter(is_active=True)
+    if request.GET.get("is_active") == "false":
+        rwork_type_assign = rwork_type_assign.filter(is_active=False)
+    rwork_type_assign = filtersubordinates(
+        request, rwork_type_assign, "base.view_rotatingworktypeassign"
+    )
+    if request.GET.get("orderby"):
+        rwork_type_assign = sortby(request, rwork_type_assign, "orderby")
+    template = "base/rotating_work_type/rotating_work_type_assign_view.html"
+    data_dict = parse_qs(previous_data)
+    get_key_instances(RotatingWorkTypeAssign, data_dict)
+
+    if field != "" and field is not None:
+        rwork_type_assign = group_by_queryset(
+            rwork_type_assign, field, request.GET.get("page"), "page"
+        )
+        list_values = [entry["list"] for entry in rwork_type_assign]
+        id_list = []
+        for value in list_values:
+            for instance in value.object_list:
+                id_list.append(instance.id)
+
+        assign_ids = json.dumps(list(id_list))
+        template = "base/rotating_work_type/htmx/group_by.html"
+
+    else:
+        rwork_type_assign = paginator_qry(rwork_type_assign, request.GET.get("page"))
+        assign_ids = json.dumps(
+            [instance.id for instance in rwork_type_assign.object_list]
+        )
+
+    return render(
+        request,
+        template,
+        {
+            "rwork_type_assign": rwork_type_assign,
+            "pd": previous_data,
+            "filter_dict": data_dict,
+            "assign_ids": assign_ids,
+            "field": field,
+        },
+    )
+
+
+@login_required
+@hx_request_required
+def rotating_work_individual_view(request, instance_id):
+    """
+    This view is used render detailed view of the rotating work type assign
+    """
+    request_copy = request.GET.copy()
+    request_copy.pop("instances_ids", None)
+    previous_data = request_copy.urlencode()
+    instance = RotatingWorkTypeAssign.objects.filter(id=instance_id).first()
+    context = {"instance": instance, "pd": previous_data}
+    assign_ids_json = request.GET.get("instances_ids")
+    if assign_ids_json:
+        assign_ids = json.loads(assign_ids_json)
+        previous_id, next_id = closest_numbers(assign_ids, instance_id)
+        context["previous"] = previous_id
+        context["next"] = next_id
+        context["assign_ids"] = assign_ids_json
+    HTTP_REFERER = request.META.get("HTTP_REFERER", None)
+    context["close_hx_url"] = ""
+    context["close_hx_target"] = ""
+    if HTTP_REFERER and HTTP_REFERER.endswith("rotating-work-type-assign/"):
+        context["close_hx_url"] = "/rotating-work-type-assign-view"
+        context["close_hx_target"] = "#view-container"
+    elif HTTP_REFERER:
+        HTTP_REFERERS = [part for part in HTTP_REFERER.split("/") if part]
+        try:
+            employee_id = int(HTTP_REFERERS[-1])
+            context["close_hx_url"] = f"/employee/shift-tab/{employee_id}"
+            context["close_hx_target"] = "#shift_target"
+        except ValueError:
+            pass
+    return render(request, "base/rotating_work_type/individual_view.html", context)
+
+
+@login_required
+@hx_request_required
+@manager_can_enter("base.change_rotatingworktypeassign")
+def rotating_work_type_assign_update(request, id):
+    """
+    This method is used to update rotating work type instance
+    """
+
+    rotating_work_type_assign_obj = RotatingWorkTypeAssign.objects.get(id=id)
+    form = RotatingWorkTypeAssignUpdateForm(instance=rotating_work_type_assign_obj)
+    form = choosesubordinates(request, form, "base.change_rotatingworktypeassign")
+    if request.method == "POST":
+        form = RotatingWorkTypeAssignUpdateForm(
+            request.POST, instance=rotating_work_type_assign_obj
+        )
+        form = choosesubordinates(request, form, "base.change_rotatingworktypeassign")
+        if form.is_valid():
+            form.save()
+            messages.success(request, _("Rotating work type assign updated."))
+            response = render(
+                request,
+                "base/rotating_work_type/htmx/rotating_work_type_assign_update_form.html",
+                {"update_form": form},
+            )
+            return HttpResponse(
+                response.content.decode("utf-8") + "<script>location.reload();</script>"
+            )
+    return render(
+        request,
+        "base/rotating_work_type/htmx/rotating_work_type_assign_update_form.html",
+        {"update_form": form},
+    )
+
+
+@login_required
+@manager_can_enter("base.change_rotatingworktypeassign")
+def rotating_work_type_assign_export(request):
+    if request.META.get("HTTP_HX_REQUEST") == "true":
+        context = {
+            "export_filter": RotatingWorkTypeAssignFilter(),
+            "export_columns": RotatingWorkTypeAssignExportForm(),
+        }
+        return render(
+            request,
+            "base/rotating_work_type/rotating_work_type_assign_export.html",
+            context=context,
+        )
+
+    return export_data(
+        request=request,
+        model=RotatingWorkTypeAssign,
+        filter_class=RotatingWorkTypeAssignFilter,
+        form_class=RotatingWorkTypeAssignExportForm,
+        file_name="Rotating_work_type_assign",
+    )
+
+
+def rotating_work_type_assign_redirect(request, obj_id=None, employee_id=None):
+    request_copy = request.GET.copy()
+    request_copy.pop("instances_ids", None)
+    previous_data = request_copy.urlencode()
+    hx_target = request.META.get("HTTP_HX_TARGET", None)
+    if hx_target and hx_target == "view-container":
+        return redirect(f"/rotating-work-type-assign-view?{previous_data}")
+    elif hx_target and hx_target == "objectDetailsModalTarget":
+        instances_ids = request.GET.get("instances_ids")
+        instances_list = json.loads(instances_ids)
+        if obj_id in instances_list:
+            instances_list.remove(obj_id)
+        previous_instance, next_instance = closest_numbers(
+            json.loads(instances_ids), obj_id
+        )
+
+        url = f"/rwork-individual-view/{next_instance}/"
+        params = f"?{previous_data}&instances_ids={instances_list}"
+        return redirect(url + params)
+    elif hx_target and hx_target == "shift_target" and employee_id:
+        return redirect(f"/employee/shift-tab/{employee_id}")
+    elif hx_target:
+        return HttpResponse("<script>window.location.reload()</script>")
+    else:
+        return HttpResponseRedirect(request.META.get("HTTP_REFERER", "/"))
+
+
+@login_required
+@hx_request_required
+@manager_can_enter("base.change_rotatingworktypeassign")
+def rotating_work_type_assign_archive(request, obj_id):
+    """
+    Archive or un-archive rotating work type assigns
+    """
+    try:
+        rwork_type = get_object_or_404(RotatingWorkTypeAssign, id=obj_id)
+        employee_id = rwork_type.employee_id.id
+        employees_rwork_types = RotatingWorkTypeAssign.objects.filter(
+            is_active=True, employee_id=rwork_type.employee_id
+        )
+        rwork_type.is_active = not rwork_type.is_active
+        if rwork_type.is_active and employees_rwork_types:
+            messages.error(request, "Already on record is active")
+        else:
+            rwork_type.save()
+            message = _("un-archived") if rwork_type.is_active else _("archived")
+            messages.success(
+                request, _("Rotating work type assign is {}").format(message)
+            )
+        return rotating_work_type_assign_redirect(request, obj_id, employee_id)
+    except Http404:
+        messages.error(request, _("Rotating work type assign not found."))
+    return rotating_work_type_assign_redirect(request, obj_id, employee_id)
+
+
+@login_required
+@manager_can_enter("base.change_rotatingworktypeassign")
+def rotating_work_type_assign_bulk_archive(request):
+    """
+    This method is used to archive/un-archive bulk rotating work type assigns.
+    """
+    ids = json.loads(request.POST["ids"])
+    is_active = request.POST.get("is_active") != "false"
+    message = _("un-archived") if is_active else _("archived")
+    count = 0
+
+    for id in ids:
+        rwork_type_assign = RotatingWorkTypeAssign.objects.get(id=id)
+        employees_rwork_type_assign = RotatingWorkTypeAssign.objects.filter(
+            is_active=True, employee_id=rwork_type_assign.employee_id
+        )
+
+        if is_active and employees_rwork_type_assign.exists():
+            messages.error(
+                request,
+                _("Rotating work type for {employee_id} already exists").format(
+                    employee_id=rwork_type_assign.employee_id,
+                ),
+            )
+        else:
+            rwork_type_assign.is_active = is_active
+            rwork_type_assign.save()
+            count += 1
+
+    if count > 0:
+        messages.success(
+            request,
+            _("Rotating work type for {count} employees is {message}").format(
+                count=count, message=message
+            ),
+        )
+
+    return rotating_work_type_assign_redirect(request)
+
+
+@login_required
+@permission_required("base.delete_rotatingworktypeassign")
+def rotating_work_type_assign_bulk_delete(request):
+    """
+    This method is used to archive/un-archive bulk rotating work type assigns
+    """
+    ids = request.POST["ids"]
+    ids = json.loads(ids)
+    for id in ids:
+        try:
+            rwork_type_assign = RotatingWorkTypeAssign.objects.get(id=id)
+            rwork_type_assign.delete()
+            messages.success(
+                request,
+                _("{employee} deleted.").format(employee=rwork_type_assign.employee_id),
+            )
+        except RotatingWorkTypeAssign.DoesNotExist:
+            messages.error(request, _("{rwork_type_assign} not found."))
+        except ProtectedError:
+            messages.error(
+                request,
+                _("You cannot delete {rwork_type_assign}").format(
+                    rwork_type_assign=rwork_type_assign
+                ),
+            )
+    return JsonResponse({"message": "Success"})
+
+
+@login_required
+@hx_request_required
+@permission_required("base.delete_rotatingworktypeassign")
+@require_http_methods(["POST"])
+def rotating_work_type_assign_delete(request, obj_id):
+    """
+    This method is used to delete rotating work type
+    """
+    try:
+        rotating_work_type_assign_obj = RotatingWorkTypeAssign.objects.get(id=obj_id)
+        employee_id = rotating_work_type_assign_obj.employee_id.id
+        rotating_work_type_assign_obj.delete()
+        messages.success(request, _("Rotating work type assign deleted."))
+    except RotatingWorkTypeAssign.DoesNotExist:
+        messages.error(request, _("Rotating work type assign not found."))
+    except ProtectedError:
+        messages.error(request, _("You cannot delete this rotating work type."))
+
+    return rotating_work_type_assign_redirect(request, obj_id, employee_id)
+
+
+@login_required
+@permission_required("base.view_employeetype")
+def employee_type_view(request):
+    """
+    This method is used to view employee type
+    """
+
+    types = EmployeeType.objects.all()
+    return render(
+        request,
+        "base/employee_type/employee_type.html",
+        {
+            "employee_types": types,
+        },
+    )
+
+
+@login_required
+@hx_request_required
+@permission_required("base.add_employeetype")
+def employee_type_create(request):
+    """
+    This method is used to create employee type
+    """
+    dynamic = request.GET.get("dynamic")
+    form = EmployeeTypeForm()
+    types = EmployeeType.objects.all()
+    if request.method == "POST":
+        form = EmployeeTypeForm(request.POST)
+        if form.is_valid():
+            form.save()
+            form = EmployeeTypeForm()
+            messages.success(request, _("Employee type created."))
+            return HttpResponse("<script>window.location.reload();</script>")
+    return render(
+        request,
+        "base/employee_type/employee_type_form.html",
+        {"form": form, "employee_types": types, "dynamic": dynamic},
+    )
+
+
+@login_required
+@hx_request_required
+@permission_required("base.change_employeetype")
+def employee_type_update(request, id, **kwargs):
+    """
+    This method is used to update employee type instance
+    args:
+        id : employee type instance id
+
+    """
+
+    employee_type = EmployeeType.find(id)
+    form = EmployeeTypeForm(instance=employee_type)
+    if request.method == "POST":
+        form = EmployeeTypeForm(request.POST, instance=employee_type)
+        if form.is_valid():
+            form.save()
+            messages.success(request, _("Employee type updated."))
+            return HttpResponse("<script>window.location.reload();</script>")
+    return render(
+        request,
+        "base/employee_type/employee_type_form.html",
+        {"form": form, "employee_type": employee_type},
+    )
+
+
+@login_required
+@permission_required("base.view_employeeshift")
+def employee_shift_view(request):
+    """
+    This method is used to view employee shift
+    """
+
+    shifts = EmployeeShift.objects.all()
+    if apps.is_installed("attendance"):
+        GraceTime = get_horilla_model_class(app_label="attendance", model="gracetime")
+        grace_times = GraceTime.objects.all().exclude(is_default=True)
+    else:
+        grace_times = None
+    return render(
+        request, "base/shift/shift.html", {"shifts": shifts, "grace_times": grace_times}
+    )
+
+
+@login_required
+@hx_request_required
+@permission_required("base.add_employeeshift")
+def employee_shift_create(request):
+    """
+    This method is used to create employee shift
+    """
+    dynamic = request.GET.get("dynamic")
+    form = EmployeeShiftForm()
+    shifts = EmployeeShift.objects.all()
+    if request.method == "POST":
+        form = EmployeeShiftForm(request.POST)
+        if form.is_valid():
+            form.save()
+            form = EmployeeShiftForm()
+            messages.success(
+                request, _("Employee Shift has been created successfully!")
+            )
+            return HttpResponse("<script>window.location.reload();</script>")
+    return render(
+        request,
+        "base/shift/shift_form.html",
+        {"form": form, "shifts": shifts, "dynamic": dynamic},
+    )
+
+
+@login_required
+@hx_request_required
+@permission_required("base.change_employeeshift")
+def employee_shift_update(request, id, **kwargs):
+    """
+    This method is used to update employee shift instance
+    args:
+        id  : employee shift id
+
+    """
+    employee_shift = EmployeeShift.find(id)
+    form = EmployeeShiftForm(instance=employee_shift)
+    if request.method == "POST":
+        form = EmployeeShiftForm(request.POST, instance=employee_shift)
+        if form.is_valid():
+            form.save()
+            messages.success(request, _("Shift updated"))
+            return HttpResponse("<script>window.location.reload();</script>")
+    return render(
+        request, "base/shift/shift_form.html", {"form": form, "shift": employee_shift}
+    )
+
+
+@login_required
+@permission_required("base.view_employeeshiftschedule")
+def employee_shift_schedule_view(request):
+    """
+    This method is used to view schedule for shift
+    """
+    shift_schedule = False
+    if EmployeeShiftSchedule.objects.exists():
+        shift_schedule = True
+    shifts = EmployeeShift.objects.all()
+
+    return render(
+        request,
+        "base/shift/schedule.html",
+        {"shifts": shifts, "shift_schedule": shift_schedule},
+    )
+
+
+@login_required
+@hx_request_required
+@permission_required("base.add_employeeshiftschedule")
+def employee_shift_schedule_create(request):
+    """
+    This method is used to create schedule for shift
+    """
+
+    form = EmployeeShiftScheduleForm()
+    shifts = EmployeeShift.objects.all()
+    if request.method == "POST":
+        form = EmployeeShiftScheduleForm(request.POST)
+        if form.is_valid():
+            form.save()
+            form = EmployeeShiftScheduleForm()
+            messages.success(
+                request, _("Employee Shift Schedule has been created successfully!")
+            )
+            return HttpResponse("<script>window.location.reload();</script>")
+
+    return render(
+        request, "base/shift/schedule_form.html", {"form": form, "shifts": shifts}
+    )
+
+
+@login_required
+@hx_request_required
+@permission_required("base.change_employeeshiftschedule")
+def employee_shift_schedule_update(request, id, **kwargs):
+    """
+    This method is used to update employee shift instance
+    args:
+        id : employee shift instance id
+    """
+
+    employee_shift_schedule = EmployeeShiftSchedule.find(id)
+    form = EmployeeShiftScheduleUpdateForm(instance=employee_shift_schedule)
+    if request.method == "POST":
+        form = EmployeeShiftScheduleUpdateForm(
+            request.POST, instance=employee_shift_schedule
+        )
+        if form.is_valid():
+            form.save()
+            messages.success(request, _("Shift schedule created."))
+            return HttpResponse("<script>window.location.reload();</script>")
+    return render(
+        request,
+        "base/shift/schedule_form.html",
+        {"form": form, "shift_schedule": employee_shift_schedule},
+    )
+
+
+@login_required
+@permission_required("base.view_rotatingshift")
+def rotating_shift_view(request):
+    """
+    This method is used to view rotating shift
+    """
+
+    return render(
+        request,
+        "base/rotating_shift/rotating_shift.html",
+        {"rshifts": RotatingShift.objects.all()},
+    )
+
+
+@login_required
+@hx_request_required
+@permission_required("base.add_rotatingshift")
+def rotating_shift_create(request):
+    """
+    This method is used to create rotating shift
+    """
+
+    form = RotatingShiftForm()
+    if request.method == "POST":
+        form = RotatingShiftForm(request.POST)
+        if form.is_valid():
+            form.save()
+            form = RotatingShiftForm()
+            messages.success(request, _("Rotating shift created."))
+            return HttpResponse("<script>window.location.reload();</script>")
+    else:
+        form = RotatingShiftForm()
+    return render(
+        request,
+        "base/rotating_shift/htmx/rotating_shift_form.html",
+        {"form": form, "rshifts": RotatingShift.objects.all()},
+    )
+
+
+@login_required
+@hx_request_required
+@permission_required("base.change_rotatingshift")
+def rotating_shift_update(request, id, **kwargs):
+    """
+    This method is used to update rotating shift instance
+    args:
+        id : rotating shift instance id
+    """
+
+    rotating_shift = RotatingShift.find(id)
+    form = RotatingShiftForm(instance=rotating_shift)
+    if request.method == "POST":
+        form = RotatingShiftForm(request.POST, instance=rotating_shift)
+        if form.is_valid():
+            form.save()
+            form = RotatingShiftForm()
+            messages.success(request, _("Rotating shift updated."))
+            return HttpResponse("<script>window.location.reload();</script>")
+    return render(
+        request,
+        "base/rotating_shift/htmx/rotating_shift_form.html",
+        {
+            "form": form,
+            "rshift": rotating_shift,
+        },
+    )
+
+
+@login_required
+@manager_can_enter("base.view_rotatingshiftassign")
+def rotating_shift_assign(request):
+    """
+    This method is used to assign rotating shift
+    """
+    form = RotatingShiftAssignForm()
+    form = choosesubordinates(request, form, "base.add_rotatingshiftassign")
+    filter = RotatingShiftAssignFilters(
+        queryset=RotatingShiftAssign.objects.filter(is_active=True)
+    )
+    rshift_assign = filter.qs
+    rshift_all = RotatingShiftAssign.objects.all()
+
+    rshift_assign = filtersubordinates(
+        request, rshift_assign, "base.view_rotatingshiftassign"
+    )
+    rshift_assign = rshift_assign.filter(employee_id__is_active=True)
+    assign_ids = json.dumps(
+        [
+            instance.id
+            for instance in paginator_qry(
+                rshift_assign, request.GET.get("page")
+            ).object_list
+        ]
+    )
+
+    return render(
+        request,
+        "base/rotating_shift/rotating_shift_assign.html",
+        {
+            "form": form,
+            "f": filter,
+            "export_filter": RotatingShiftAssignFilters(),
+            "export_columns": RotatingShiftAssignExportForm(),
+            "rshift_assign": paginator_qry(rshift_assign, request.GET.get("page")),
+            "assign_ids": assign_ids,
+            "rshift_all": rshift_all,
+            "gp_fields": RotatingShiftRequestReGroup.fields,
+        },
+    )
+
+
+@login_required
+@hx_request_required
+@manager_can_enter("base.add_rotatingshiftassign")
+def rotating_shift_assign_add(request):
+    """
+    This method is used to add rotating shift assign
+    """
+    form = RotatingShiftAssignForm()
+    if request.GET.get("emp_id"):
+        employee = request.GET.get("emp_id")
+        form = RotatingShiftAssignUpdateForm(initial={"employee_id": employee})
+    form = choosesubordinates(request, form, "base.add_rotatingshiftassign")
+    if request.method == "POST":
+        form = RotatingShiftAssignForm(request.POST)
+        form = choosesubordinates(request, form, "base.add_rotatingshiftassign")
+        if form.is_valid():
+            form.save()
+            employee_ids = request.POST.getlist("employee_id")
+            employees = Employee.objects.filter(id__in=employee_ids).select_related(
+                "employee_user_id"
+            )
+            users = [employee.employee_user_id for employee in employees]
+            notify.send(
+                request.user.employee_get,
+                recipient=users,
+                verb="You are added to rotating shift",
+                verb_ar="تمت إضافتك إلى وردية الدورية",
+                verb_de="Sie werden der rotierenden Arbeitsschicht hinzugefügt",
+                verb_es="Estás agregado a turno rotativo",
+                verb_fr="Vous êtes ajouté au quart de travail rotatif",
+                icon="infinite",
+                redirect=reverse("employee-profile"),
+            )
+
+            messages.success(request, _("Rotating shift assigned."))
+            response = render(
+                request,
+                "base/rotating_shift/htmx/rotating_shift_assign_form.html",
+                {"form": form},
+            )
+            return HttpResponse(
+                response.content.decode("utf-8") + "<script>location.reload();</script>"
+            )
+    return render(
+        request,
+        "base/rotating_shift/htmx/rotating_shift_assign_form.html",
+        {"form": form},
+    )
+
+
+@login_required
+@hx_request_required
+@manager_can_enter("base.view_rotatingshiftassign")
+def rotating_shift_assign_view(request):
+    """
+    This method renders all instance of rotating shift assign to a template
+    """
+    previous_data = request.GET.urlencode()
+    rshift_assign = RotatingShiftAssignFilters(request.GET).qs.order_by("-id")
+    field = request.GET.get("field")
+    if (
+        request.GET.get("is_active") is None
+        or request.GET.get("is_active") == "unknown"
+    ):
+        rshift_assign = rshift_assign.filter(is_active=True)
+    rshift_assign = filtersubordinates(
+        request, rshift_assign, "base.view_rotatingshiftassign"
+    )
+    rshift_assign = sortby(request, rshift_assign, "orderby")
+    data_dict = parse_qs(previous_data)
+    get_key_instances(RotatingShiftAssign, data_dict)
+    template = "base/rotating_shift/rotating_shift_assign_view.html"
+
+    if field != "" and field is not None:
+        rshift_assign = group_by_queryset(
+            rshift_assign, field, request.GET.get("page"), "page"
+        )
+        list_values = [entry["list"] for entry in rshift_assign]
+        id_list = []
+        for value in list_values:
+            for instance in value.object_list:
+                id_list.append(instance.id)
+
+        assign_ids = json.dumps(list(id_list))
+        template = "base/rotating_shift/htmx/group_by.html"
+
+    else:
+        rshift_assign = paginator_qry(rshift_assign, request.GET.get("page"))
+        assign_ids = json.dumps([instance.id for instance in rshift_assign.object_list])
+    return render(
+        request,
+        template,
+        {
+            "rshift_assign": rshift_assign,
+            "pd": previous_data,
+            "filter_dict": data_dict,
+            "assign_ids": assign_ids,
+            "field": field,
+        },
+    )
+
+
+@login_required
+@hx_request_required
+def rotating_shift_individual_view(request, instance_id):
+    """
+    This view is used render detailed view of the rotating shit assign
+    """
+    request_copy = request.GET.copy()
+    request_copy.pop("instances_ids", None)
+    previous_data = request_copy.urlencode()
+    instance = RotatingShiftAssign.objects.filter(id=instance_id).first()
+    context = {"instance": instance, "pd": previous_data}
+    assign_ids_json = request.GET.get("instances_ids")
+    HTTP_REFERER = request.META.get("HTTP_REFERER", None)
+    context["close_hx_url"] = ""
+    context["close_hx_target"] = ""
+    if HTTP_REFERER and HTTP_REFERER.endswith("rotating-shift-assign/"):
+        context["close_hx_url"] = "/rotating-shift-assign-view"
+        context["close_hx_target"] = "#view-container"
+    elif HTTP_REFERER:
+        HTTP_REFERERS = [part for part in HTTP_REFERER.split("/") if part]
+        try:
+            employee_id = int(HTTP_REFERERS[-1])
+            context["close_hx_url"] = f"/employee/shift-tab/{employee_id}"
+            context["close_hx_target"] = "#shift_target"
+        except ValueError:
+            pass
+    if assign_ids_json:
+        assign_ids = json.loads(assign_ids_json)
+        previous_id, next_id = closest_numbers(assign_ids, instance_id)
+        context["previous"] = previous_id
+        context["next"] = next_id
+        context["assign_ids"] = assign_ids
+    return render(request, "base/rotating_shift/individual_view.html", context)
+
+
+@login_required
+@hx_request_required
+@manager_can_enter("base.change_rotatingshiftassign")
+def rotating_shift_assign_update(request, id):
+    """
+    This method is used to update rotating shift assign instance
+    args:
+        id : rotating shift assign instance id
+
+    """
+    rotating_shift_assign_obj = RotatingShiftAssign.find(id)
+    form = RotatingShiftAssignUpdateForm(instance=rotating_shift_assign_obj)
+    form = choosesubordinates(request, form, "base.change_rotatingshiftassign")
+    if request.method == "POST":
+        form = RotatingShiftAssignUpdateForm(
+            request.POST, instance=rotating_shift_assign_obj
+        )
+        form = choosesubordinates(request, form, "base.change_rotatingshiftassign")
+        if form.is_valid():
+            form.save()
+            messages.success(request, _("Rotating shift assign updated."))
+            response = render(
+                request,
+                "base/rotating_shift/htmx/rotating_shift_assign_update_form.html",
+                {
+                    "update_form": form,
+                },
+            )
+            return HttpResponse(
+                response.content.decode("utf-8") + "<script>location.reload();</script>"
+            )
+    return render(
+        request,
+        "base/rotating_shift/htmx/rotating_shift_assign_update_form.html",
+        {
+            "update_form": form,
+        },
+    )
+
+
+@login_required
+@manager_can_enter("base.change_rotatingshiftassign")
+def rotating_shift_assign_export(request):
+    if request.META.get("HTTP_HX_REQUEST"):
+        context = {
+            "export_filter": RotatingShiftAssignFilters(),
+            "export_columns": RotatingShiftAssignExportForm(),
+        }
+        return render(
+            request,
+            "base/rotating_shift/rotating_shift_assign_export.html",
+            context=context,
+        )
+    return export_data(
+        request=request,
+        model=RotatingShiftAssign,
+        filter_class=RotatingShiftAssignFilters,
+        form_class=RotatingShiftAssignExportForm,
+        file_name="Rotating_shift_assign_export",
+    )
+
+
+def rotating_shift_assign_redirect(request, obj_id, employee_id):
+    request_copy = request.GET.copy()
+    request_copy.pop("instances_ids", None)
+    previous_data = request_copy.urlencode()
+    hx_target = request.META.get("HTTP_HX_TARGET", None)
+    if hx_target and hx_target == "view-container":
+        return redirect(f"/rotating-shift-assign-view?{previous_data}")
+    elif hx_target and hx_target == "objectDetailsModalTarget":
+        instances_ids = request.GET.get("instances_ids")
+        instances_list = json.loads(instances_ids)
+        if obj_id in instances_list:
+            instances_list.remove(obj_id)
+        previous_instance, next_instance = closest_numbers(
+            json.loads(instances_ids), obj_id
+        )
+        url = f"/rshit-individual-view/{next_instance}/"
+        params = f"?{previous_data}&instances_ids={instances_list}"
+        return redirect(url + params)
+    elif hx_target and hx_target == "shift_target" and employee_id:
+        return redirect(f"/employee/shift-tab/{employee_id}")
+    elif hx_target:
+        return HttpResponse("<script>window.location.reload()</script>")
+    else:
+        return HttpResponseRedirect(request.META.get("HTTP_REFERER", "/"))
+
+
+@login_required
+@hx_request_required
+@manager_can_enter("base.change_rotatingshiftassign")
+def rotating_shift_assign_archive(request, obj_id):
+    """
+    This method is used to archive and unarchive rotating shift assign records
+    """
+    try:
+        rshift = get_object_or_404(RotatingShiftAssign, id=obj_id)
+        employee_id = rshift.employee_id.id
+        employees_rshift_assigns = RotatingShiftAssign.objects.filter(
+            is_active=True, employee_id=rshift.employee_id
+        )
+        rshift.is_active = not rshift.is_active
+        if rshift.is_active and employees_rshift_assigns:
+            messages.error(request, "Already on record is active")
+        else:
+            rshift.save()
+            message = _("un-archived") if rshift.is_active else _("archived")
+            messages.success(request, _("Rotating shift assign is {}").format(message))
+    except Http404:
+        messages.error(request, _("Rotating shift assign not found."))
+
+    return rotating_shift_assign_redirect(request, obj_id, employee_id)
+
+
+@login_required
+@manager_can_enter("base.change_rotatingshiftassign")
+def rotating_shift_assign_bulk_archive(request):
+    """
+    This method is used to archive/un-archive bulk rotating shift assigns
+    """
+    ids = request.POST["ids"]
+    ids = json.loads(ids)
+    is_active = True
+    message = _("un-archived")
+    if request.GET.get("is_active") == "False":
+        is_active = False
+        message = _("archived")
+    for id in ids:
+        # check permission right here...
+        rshift_assign = RotatingShiftAssign.objects.get(id=id)
+        employees_rshift_assign = RotatingShiftAssign.objects.filter(
+            is_active=True, employee_id=rshift_assign.employee_id
+        )
+        flag = True
+        if is_active:
+            if len(employees_rshift_assign) < 1:
+                flag = False
+                rshift_assign.is_active = is_active
+        else:
+            flag = False
+            rshift_assign.is_active = is_active
+        rshift_assign.save()
+        if not flag:
+            messages.success(
+                request,
+                _("Rotating shift for {employee} is {message}").format(
+                    employee=rshift_assign.employee_id, message=message
+                ),
+            )
+        else:
+            messages.error(
+                request,
+                _("Rotating shift for {employee} is already exists").format(
+                    employee=rshift_assign.employee_id
+                ),
+            )
+    return JsonResponse({"message": "Success"})
+
+
+@login_required
+@manager_can_enter("base.delete_rotatingshiftassign")
+def rotating_shift_assign_bulk_delete(request):
+    """
+    This method is used to bulk delete for rotating shift assign
+    """
+    ids = request.POST["ids"]
+    ids = json.loads(ids)
+    for id in ids:
+        try:
+            rshift_assign = RotatingShiftAssign.objects.get(id=id)
+            rshift_assign.delete()
+            messages.success(
+                request,
+                _("{employee} assign deleted.").format(
+                    employee=rshift_assign.employee_id
+                ),
+            )
+        except RotatingShiftAssign.DoesNotExist:
+            messages.error(request, _("{rshift_assign} not found."))
+        except ProtectedError:
+            messages.error(
+                request,
+                _("You cannot delete {rshift_assign}").format(
+                    rshift_assign=rshift_assign
+                ),
+            )
+    return JsonResponse({"message": "Success"})
+
+
+@login_required
+@hx_request_required
+@manager_can_enter("base.delete_rotatingshiftassign")
+@require_http_methods(["POST"])
+def rotating_shift_assign_delete(request, obj_id):
+    """
+    This method is used to delete rotating shift assign instance
+    args:
+        id : rotating shift assign instance id
+    """
+    try:
+        rotating_shift_assign_obj = RotatingShiftAssign.objects.get(id=obj_id)
+        employee_id = rotating_shift_assign_obj.employee_id.id
+        rotating_shift_assign_obj.delete()
+        messages.success(request, _("Rotating shift assign deleted."))
+    except RotatingShiftAssign.DoesNotExist:
+        employee_id = None
+        messages.error(request, _("Rotating shift assign not found."))
+    except ProtectedError:
+        messages.error(request, _("You cannot delete this rotating shift assign."))
+    return rotating_shift_assign_redirect(request, obj_id, employee_id)
+
+
+def get_models_in_app(app_name):
+    """
+    get app models
+    """
+    try:
+        app_config = apps.get_app_config(app_name)
+        models = app_config.get_models()
+        return models
+    except LookupError:
+        return []
+
+
+@login_required
+@manager_can_enter("auth.view_permission")
+def employee_permission_assign(request):
+    """
+    This method is used to assign permissions to employee user
+    """
+
+    context = {}
+    template = "base/auth/permission.html"
+    if request.GET.get("profile_tab"):
+        template = "tabs/group_permissions.html"
+        employees = Employee.objects.filter(id=request.GET["employee_id"]).distinct()
+        emoloyee = employees.first()
+        context["employee"] = emoloyee
+    else:
+        employees = Employee.objects.filter(
+            employee_user_id__user_permissions__isnull=False
+        ).distinct()
+        context["show_assign"] = True
+    permissions = []
+    horilla_apps = [
+        "base",
+        "recruitment",
+        "employee",
+        "leave",
+        "pms",
+        "onboarding",
+        "asset",
+        "attendance",
+        "payroll",
+        "auth",
+        "offboarding",
+        "horilla_documents",
+        "helpdesk",
+    ]
+    installed_apps = [app for app in settings.INSTALLED_APPS if app in horilla_apps]
+
+    no_permission_models = [
+        "historicalbonuspoint",
+        "assetreport",
+        "assetdocuments",
+        "returnimages",
+        "holiday",
+        "companyleave",
+        "historicalavailableleave",
+        "historicalleaverequest",
+        "historicalleaveallocationrequest",
+        "leaverequestconditionapproval",
+        "historicalcompensatoryleaverequest",
+        "employeepastleaverestrict",
+        "overrideleaverequests",
+        "historicalrotatingworktypeassign",
+        "employeeshiftday",
+        "historicalrotatingshiftassign",
+        "historicalworktyperequest",
+        "historicalshiftrequest",
+        "multipleapprovalmanagers",
+        "attachment",
+        "announcementview",
+        "emaillog",
+        "driverviewed",
+        "dashboardemployeecharts",
+        "attendanceallowedip",
+        "tracklatecomeearlyout",
+        "historicalcontract",
+        "overrideattendance",
+        "overrideleaverequest",
+        "overrideworkinfo",
+        "multiplecondition",
+        "historicalpayslip",
+        "reimbursementmultipleattachment",
+        "historicalcontract",
+        "overrideattendance",
+        "overrideleaverequest",
+        "workrecord",
+        "historicalticket",
+    ]
+    for app_name in installed_apps:
+        app_models = []
+        for model in get_models_in_app(app_name):
+            if model._meta.model_name not in no_permission_models:
+                app_models.append(
+                    {
+                        "verbose_name": model._meta.verbose_name.capitalize(),
+                        "model_name": model._meta.model_name,
+                    }
+                )
+        permissions.append(
+            {"app": app_name.capitalize().replace("_", " "), "app_models": app_models}
+        )
+    context["permissions"] = permissions
+    context["employees"] = paginator_qry(employees, request.GET.get("page"))
+    return render(
+        request,
+        template,
+        context,
+    )
+
+
+@login_required
+@permission_required("view_permissions")
+def employee_permission_search(request, codename=None, uid=None):
+    """
+    This method renders template to view all instances of user permissions
+    """
+    context = {}
+    template = "base/auth/permission_lines.html"
+    employees = EmployeeFilter(request.GET).qs
+    if request.GET.get("profile_tab"):
+        template = "base/auth/permission_accordion.html"
+        employees = employees.filter(id=request.GET["employee_id"]).distinct()
+    else:
+        employees = employees.filter(
+            employee_user_id__user_permissions__isnull=False
+        ).distinct()
+        context["show_assign"] = True
+    permissions = []
+    apps = APPS
+    for app_name in apps:
+        app_models = []
+        for model in get_models_in_app(app_name):
+            app_models.append(
+                {
+                    "verbose_name": model._meta.verbose_name.capitalize(),
+                    "model_name": model._meta.model_name,
+                }
+            )
+        permissions.append({"app": app_name.capitalize(), "app_models": app_models})
+    context["permissions"] = permissions
+    context["employees"] = paginator_qry(employees, request.GET.get("page"))
+    return render(
+        request,
+        template,
+        context,
+    )
+
+
+@login_required
+@require_http_methods(["POST"])
+@permission_required("auth.add_permission")
+def update_permission(
+    request,
+):
+    """
+    This method is used to remove user permission.
+    """
+    form = AssignPermission(request.POST)
+    if form.is_valid():
+        form.save()
+        return JsonResponse({"message": "Updated the permissions", "type": "success"})
+    if (
+        form.data.get("employee")
+        and Employee.objects.filter(id=form.data["employee"]).first()
+    ):
+        Employee.objects.filter(
+            id=form.data["employee"]
+        ).first().employee_user_id.user_permissions.clear()
+        return JsonResponse({"message": "All permission cleared", "type": "info"})
+    return JsonResponse({"message": "Something went wrong", "type": "danger"})
+
+
+@login_required
+@hx_request_required
+@permission_required("auth.add_permission")
+def permission_table(request):
+    """
+    This method is used to render the permission table
+    """
+    permissions = []
+    apps = APPS
+    form = AssignPermission()
+
+    no_permission_models = [
+        "historicalbonuspoint",
+        "assetreport",
+        "assetdocuments",
+        "returnimages",
+        "holiday",
+        "companyleave",
+        "historicalavailableleave",
+        "historicalleaverequest",
+        "historicalleaveallocationrequest",
+        "leaverequestconditionapproval",
+        "historicalcompensatoryleaverequest",
+        "employeepastleaverestrict",
+        "overrideleaverequests",
+        "historicalrotatingworktypeassign",
+        "employeeshiftday",
+        "historicalrotatingshiftassign",
+        "historicalworktyperequest",
+        "historicalshiftrequest",
+        "multipleapprovalmanagers",
+        "attachment",
+        "announcementview",
+        "emaillog",
+        "driverviewed",
+        "dashboardemployeecharts",
+        "attendanceallowedip",
+        "tracklatecomeearlyout",
+        "historicalcontract",
+        "overrideattendance",
+        "overrideleaverequest",
+        "overrideworkinfo",
+        "multiplecondition",
+        "historicalpayslip",
+        "reimbursementmultipleattachment",
+        "historicalcontract",
+        "overrideattendance",
+        "overrideleaverequest",
+        "workrecord",
+        "historicalticket",
+    ]
+
+    for app_name in apps:
+        app_models = []
+        for model in get_models_in_app(app_name):
+            if model not in no_permission_models:
+                app_models.append(
+                    {
+                        "verbose_name": model._meta.verbose_name.capitalize(),
+                        "model_name": model._meta.model_name,
+                    }
+                )
+        permissions.append({"app": app_name.capitalize(), "app_models": app_models})
+    if request.method == "POST":
+        form = AssignPermission(request.POST)
+        if form.is_valid():
+            form.save()
+            messages.success(request, _("Employee permission assigned."))
+            return HttpResponse("<script>window.location.reload()</script>")
+    return render(
+        request,
+        "base/auth/permission_assign.html",
+        {
+            "permissions": permissions,
+            "form": form,
+        },
+    )
+
+
+@login_required
+def work_type_request_view(request):
+    """
+    This method renders template to  view all work type requests
+    """
+    previous_data = request.GET.urlencode()
+    employee = Employee.objects.filter(employee_user_id=request.user).first()
+    if request.user.has_perm("base.view_worktyperequest"):
+        work_type_requests = WorkTypeRequest.objects.all()
+    else:
+        work_type_requests = filtersubordinates(
+            request, WorkTypeRequest.objects.all(), "base.add_worktyperequest"
+        )
+        work_type_requests = work_type_requests | WorkTypeRequest.objects.filter(
+            employee_id=employee
+        )
+        work_type_requests = work_type_requests.filter(employee_id__is_active=True)
+    requests_ids = json.dumps(
+        [
+            instance.id
+            for instance in paginator_qry(
+                work_type_requests, request.GET.get("page")
+            ).object_list
+        ]
+    )
+    f = WorkTypeRequestFilter(request.GET, queryset=work_type_requests)
+    data_dict = parse_qs(previous_data)
+    get_key_instances(WorkTypeRequest, data_dict)
+    form = WorkTypeRequestForm()
+    form = choosesubordinates(
+        request,
+        form,
+        "base.add_worktypereqeust",
+    )
+    form = include_employee_instance(request, form)
+    return render(
+        request,
+        "work_type_request/work_type_request_view.html",
+        {
+            "data": paginator_qry(f.qs, request.GET.get("page")),
+            "f": f,
+            "form": form,
+            "filter_dict": data_dict,
+            "requests_ids": requests_ids,
+            "gp_fields": WorkTypeRequestReGroup.fields,
+        },
+    )
+
+
+@login_required
+@manager_can_enter("base.view_worktyperequest")
+def work_type_request_export(request):
+    if request.META.get("HTTP_HX_REQUEST") == "true":
+        export_filter = WorkTypeRequestFilter()
+        export_fields = WorkTypeRequestColumnForm()
+        context = {
+            "export_fields": export_fields,
+            "export_filter": export_filter,
+        }
+        return render(
+            request, "work_type_request/work_type_request_export.html", context=context
+        )
+    return export_data(
+        request,
+        WorkTypeRequest,
+        WorkTypeRequestColumnForm,
+        WorkTypeRequestFilter,
+        "Work_type_request",
+    )
+
+
+@login_required
+@hx_request_required
+def work_type_request_search(request):
+    """
+    This method is used to search work type request.
+    """
+    employee = Employee.objects.filter(employee_user_id=request.user).first()
+    previous_data = request.GET.urlencode()
+    field = request.GET.get("field")
+    f = WorkTypeRequestFilter(request.GET)
+    work_typ_requests = (
+        filtersubordinates(request, f.qs, "base.add_worktyperequest")
+        if not request.user.has_perm("base.view_worktyperequest")
+        else f.qs
+    )
+    employee_work_requests = list(WorkTypeRequest.objects.filter(employee_id=employee))
+    subordinates_work_requests = list(work_typ_requests)
+    combined_requests = list(set(subordinates_work_requests + employee_work_requests))
+    combined_requests_qs = WorkTypeRequest.objects.filter(
+        id__in=[req.id for req in combined_requests]
+    )
+    work_typ_requests = sortby(request, combined_requests_qs, "orderby")
+    template = "work_type_request/htmx/requests.html"
+
+    if field != "" and field is not None:
+        work_typ_requests = group_by_queryset(
+            work_typ_requests, field, request.GET.get("page"), "page"
+        )
+        list_values = [entry["list"] for entry in work_typ_requests]
+        id_list = []
+        for value in list_values:
+            for instance in value.object_list:
+                id_list.append(instance.id)
+
+        requests_ids = json.dumps(list(id_list))
+        template = "work_type_request/htmx/group_by.html"
+
+    else:
+        work_typ_requests = paginator_qry(work_typ_requests, request.GET.get("page"))
+        requests_ids = json.dumps(
+            [instance.id for instance in work_typ_requests.object_list]
+        )
+
+    data_dict = parse_qs(previous_data)
+    get_key_instances(WorkTypeRequest, data_dict)
+    return render(
+        request,
+        template,
+        {
+            "data": work_typ_requests,
+            "pd": previous_data,
+            "filter_dict": data_dict,
+            "requests_ids": requests_ids,
+            "field": field,
+        },
+    )
+
+
+def handle_wtr_close_hx_url(request):
+    employee = request.user.employee_get.id
+    HTTP_REFERER = request.META.get("HTTP_REFERER", None)
+    previous_data = unquote(request.GET.urlencode().replace("pd=", ""))
+    close_hx_url = ""
+    close_hx_target = ""
+    if "/" + "/".join(HTTP_REFERER.split("/")[3:]) == "/":
+        close_hx_url = f"{reverse('dashboard-work-type-request')}"
+        close_hx_target = "#WorkTypeRequestApproveBody"
+    elif HTTP_REFERER and HTTP_REFERER.endswith("work-type-request-view/"):
+        close_hx_url = f"/work-type-request-search?{previous_data}"
+        close_hx_target = "#view-container"
+    elif HTTP_REFERER and HTTP_REFERER.endswith("employee-profile/"):
+        close_hx_url = f"/employee/shift-tab/{employee}?profile=true"
+        close_hx_target = "#shift_target"
+    elif HTTP_REFERER:
+        HTTP_REFERERS = [part for part in HTTP_REFERER.split("/") if part]
+        try:
+            employee_id = int(HTTP_REFERERS[-1])
+            close_hx_url = f"/employee/shift-tab/{employee_id}"
+            close_hx_target = "#shift_target"
+        except ValueError:
+            pass
+    return close_hx_url, close_hx_target
+
+
+@login_required
+@hx_request_required
+def work_type_request(request):
+    """
+    This method is used to create request for work type  .
+    """
+    encoded_data = request.GET.urlencode()
+    previous_data = unquote(encoded_data.replace("pd=", ""))
+    form = WorkTypeRequestForm()
+    employee = request.user.employee_get.id
+    if request.GET.get("emp_id"):
+        employee = request.GET.get("emp_id")
+    form = WorkTypeRequestForm(initial={"employee_id": employee})
+    form = choosesubordinates(
+        request,
+        form,
+        "base.add_worktyperequest",
+    )
+    form = include_employee_instance(request, form)
+
+    f = WorkTypeRequestFilter()
+    context = {"f": f, "pd": previous_data}
+    context["close_hx_url"], context["close_hx_target"] = handle_wtr_close_hx_url(
+        request
+    )
+    if request.method == "POST":
+        form = WorkTypeRequestForm(request.POST)
+        form = choosesubordinates(
+            request,
+            form,
+            "base.add_worktyperequest",
+        )
+        form = include_employee_instance(request, form)
+        if form.is_valid():
+            instance = form.save()
+            try:
+                notify.send(
+                    instance.employee_id,
+                    recipient=(
+                        instance.employee_id.employee_work_info.reporting_manager_id.employee_user_id
+                    ),
+                    verb=f"You have new work type request to \
+                            validate for {instance.employee_id}",
+                    verb_ar=f"لديك طلب نوع وظيفة جديد للتحقق من \
+                            {instance.employee_id}",
+                    verb_de=f"Sie haben eine neue Arbeitstypanfrage zur \
+                            Validierung für {instance.employee_id}",
+                    verb_es=f"Tiene una nueva solicitud de tipo de trabajo para \
+                            validar para {instance.employee_id}",
+                    verb_fr=f"Vous avez une nouvelle demande de type de travail\
+                            à valider pour {instance.employee_id}",
+                    icon="information",
+                    redirect=reverse("work-type-request-view") + f"?id={instance.id}",
+                )
+            except Exception as error:
+                pass
+            messages.success(request, _("Work type request added."))
+            work_type_requests = WorkTypeRequest.objects.all()
+            if len(work_type_requests) == 1:
+                return HttpResponse("<script>window.location.reload()</script>")
+            form = WorkTypeRequestForm()
+    context["form"] = form
+    return render(request, "work_type_request/request_form.html", context=context)
+
+
+def handle_wtr_redirect(request, work_type_request):
+    hx_request = request.META.get("HTTP_HX_REQUEST") == "true"
+    if not hx_request:
+        return HttpResponseRedirect(request.META.get("HTTP_REFERER", "/"))
+
+    current_url = "/" + "/".join(
+        request.META.get("HTTP_HX_CURRENT_URL", "").split("/")[3:]
+    )
+    hx_target = request.META.get("HTTP_HX_TARGET")
+
+    if not current_url:
+        return HttpResponse("<script>window.location.reload()</script>")
+
+    if hx_target == "objectDetailsModalTarget":
+        instances_ids = request.GET.get("instances_ids")
+        dashboard = request.GET.get("dashboard")
+        url = reverse(
+            "work-type-request-single-view",
+            kwargs={"obj_id": work_type_request.id},
+        )
+        return redirect(f"{url}?instances_ids={instances_ids}&dashboard={dashboard}")
+
+    if current_url == "/":
+        return redirect(reverse("dashboard-work-type-request"))
+
+    if "/work-type-request-view/" in current_url:
+        return redirect(f"/work-type-request-search?{request.GET.urlencode()}")
+
+    if "/employee-view/" in current_url:
+        return redirect(f"/employee/shift-tab/{work_type_request.employee_id.id}")
+
+    return HttpResponse("<script>window.location.reload()</script>")
+
+
+@login_required
+def work_type_request_cancel(request, id):
+    """
+    This method is used to cancel work type request
+    args:
+        id  : work type request id
+
+    """
+    work_type_request = WorkTypeRequest.find(id)
+    if not work_type_request:
+        messages.error(request, _("Work type request not found."))
+        return HttpResponseRedirect(request.META.get("HTTP_REFERER", "/"))
+
+    if not (
+        is_reportingmanger(request, work_type_request)
+        or request.user.has_perm("base.cancel_worktyperequest")
+        or work_type_request.employee_id == request.user.employee_get
+        and work_type_request.approved == False
+    ):
+        messages.error(request, _("You don't have permission"))
+        return HttpResponseRedirect(request.META.get("HTTP_REFERER", "/"))
+    work_type_request.canceled = True
+    work_type_request.approved = False
+    work_info = EmployeeWorkInformation.objects.filter(
+        employee_id=work_type_request.employee_id
+    )
+    if work_info.exists():
+        work_type_request.employee_id.employee_work_info.work_type_id = (
+            work_type_request.previous_work_type_id
+        )
+        work_type_request.employee_id.employee_work_info.save()
+    work_type_request.save()
+    messages.success(request, _("Work type request has been rejected."))
+    notify.send(
+        request.user.employee_get,
+        recipient=work_type_request.employee_id.employee_user_id,
+        verb="Your work type request has been rejected.",
+        verb_ar="تم إلغاء طلب نوع وظيفتك",
+        verb_de="Ihre Arbeitstypanfrage wurde storniert",
+        verb_es="Su solicitud de tipo de trabajo ha sido cancelada",
+        verb_fr="Votre demande de type de travail a été annulée",
+        redirect=reverse("work-type-request-view") + f"?id={work_type_request.id}",
+        icon="close",
+    )
+    return handle_wtr_redirect(request, work_type_request)
+
+
+@login_required
+@manager_can_enter("base.change_worktyperequest")
+def work_type_request_bulk_cancel(request):
+    """
+    This method is used to cancel a bunch work type request
+    """
+    ids = request.POST["ids"]
+    ids = json.loads(ids)
+    result = False
+    for id in ids:
+        work_type_request = WorkTypeRequest.objects.get(id=id)
+        if (
+            is_reportingmanger(request, work_type_request)
+            or request.user.has_perm("base.cancel_worktyperequest")
+            or work_type_request.employee_id == request.user.employee_get
+            and work_type_request.approved == False
+        ):
+            work_type_request.canceled = True
+            work_type_request.approved = False
+            work_type_request.employee_id.employee_work_info.work_type_id = (
+                work_type_request.previous_work_type_id
+            )
+            work_type_request.employee_id.employee_work_info.save()
+            work_type_request.save()
+            messages.success(request, _("Work type request has been canceled."))
+            notify.send(
+                request.user.employee_get,
+                recipient=work_type_request.employee_id.employee_user_id,
+                verb="Your work type request has been canceled.",
+                verb_ar="تم إلغاء طلب نوع وظيفتك.",
+                verb_de="Ihre Arbeitstypanfrage wurde storniert.",
+                verb_es="Su solicitud de tipo de trabajo ha sido cancelada.",
+                verb_fr="Votre demande de type de travail a été annulée.",
+                redirect=reverse("work-type-request-view")
+                + f"?id={work_type_request.id}",
+                icon="close",
+            )
+            result = True
+    return JsonResponse({"result": result})
+
+
+@login_required
+def work_type_request_approve(request, id):
+    """
+    This method is used to approve requested work type
+    """
+
+    work_type_request = WorkTypeRequest.find(id)
+    if not work_type_request:
+        messages.error(request, _("Work type request not found."))
+        return HttpResponseRedirect(request.META.get("HTTP_REFERER", "/"))
+    if not (
+        is_reportingmanger(request, work_type_request)
+        or request.user.has_perm("approve_worktyperequest")
+        or request.user.has_perm("change_worktyperequest")
+        and not work_type_request.approved
+    ):
+        messages.error(request, _("You don't have permission"))
+        return HttpResponseRedirect(request.META.get("HTTP_REFERER", "/"))
+    """
+    Here the request will be approved, can send mail right here
+    """
+    if not work_type_request.is_any_work_type_request_exists():
+        work_type_request.approved = True
+        work_type_request.canceled = False
+        work_type_request.save()
+        messages.success(request, _("Work type request has been approved."))
+        notify.send(
+            request.user.employee_get,
+            recipient=work_type_request.employee_id.employee_user_id,
+            verb="Your work type request has been approved.",
+            verb_ar="تمت الموافقة على طلب نوع وظيفتك.",
+            verb_de="Ihre Arbeitstypanfrage wurde genehmigt.",
+            verb_es="Su solicitud de tipo de trabajo ha sido aprobada.",
+            verb_fr="Votre demande de type de travail a été approuvée.",
+            redirect=reverse("work-type-request-view") + f"?id={work_type_request.id}",
+            icon="checkmark",
+        )
+    else:
+        messages.error(
+            request,
+            _("An approved work type request already exists during this time period."),
+        )
+    return handle_wtr_redirect(request, work_type_request)
+
+
+@login_required
+def work_type_request_bulk_approve(request):
+    """
+    This method is used to approve bulk of requested work type
+    """
+    ids = request.POST["ids"]
+    ids = json.loads(ids)
+    result = False
+    for id in ids:
+        work_type_request = WorkTypeRequest.objects.get(id=id)
+        if (
+            is_reportingmanger(request, work_type_request)
+            or request.user.has_perm("approve_worktyperequest")
+            or request.user.has_perm("change_worktyperequest")
+            and not work_type_request.approved
+        ):
+            # """
+            # Here the request will be approved, can send mail right here
+            # """
+            work_type_request.approved = True
+            work_type_request.canceled = False
+            employee_work_info = work_type_request.employee_id.employee_work_info
+            employee_work_info.work_type_id = work_type_request.work_type_id
+            employee_work_info.save()
+            work_type_request.save()
+            messages.success(request, _("Work type request has been approved."))
+            notify.send(
+                request.user.employee_get,
+                recipient=work_type_request.employee_id.employee_user_id,
+                verb="Your work type request has been approved.",
+                verb_ar="تمت الموافقة على طلب نوع وظيفتك.",
+                verb_de="Ihre Arbeitstypanfrage wurde genehmigt.",
+                verb_es="Su solicitud de tipo de trabajo ha sido aprobada.",
+                verb_fr="Votre demande de type de travail a été approuvée.",
+                redirect=reverse("work-type-request-view")
+                + f"?id={work_type_request.id}",
+                icon="checkmark",
+            )
+            result = True
+    return JsonResponse({"result": result})
+
+
+@login_required
+@hx_request_required
+@work_type_request_change_permission()
+def work_type_request_update(request, work_type_request_id):
+    """
+    This method is used to update work type request instance
+    args:
+        id : work type request instance id
+
+    """
+    work_type_request = WorkTypeRequest.objects.get(id=work_type_request_id)
+    form = WorkTypeRequestForm(instance=work_type_request)
+    form = choosesubordinates(request, form, "base.change_worktyperequest")
+    form = include_employee_instance(request, form)
+    if request.method == "POST":
+        response = render(
+            request,
+            "work_type_request/request_update_form.html",
+            {
+                "form": form,
+            },
+        )
+        form = WorkTypeRequestForm(request.POST, instance=work_type_request)
+        form = choosesubordinates(request, form, "base.change_worktyperequest")
+        form = include_employee_instance(request, form)
+        if form.is_valid():
+            form.save()
+            messages.success(request, _("Request Updated Successfully"))
+            return HttpResponse(
+                response.content.decode("utf-8") + "<script>location.reload();</script>"
+            )
+
+    return render(request, "work_type_request/request_update_form.html", {"form": form})
+
+
+@login_required
+@hx_request_required
+@require_http_methods(["POST"])
+def work_type_request_delete(request, obj_id):
+    """
+    This method is used to delete work type request
+    args:
+        id : work type request instance id
+
+    """
+    try:
+        work_type_request = WorkTypeRequest.objects.get(id=obj_id)
+        employee = work_type_request.employee_id
+        messages.success(request, _("Work type request deleted."))
+        work_type_request.delete()
+        notify.send(
+            request.user.employee_get,
+            recipient=employee.employee_user_id,
+            verb="Your work type request has been deleted.",
+            verb_ar="تم حذف طلب نوع وظيفتك.",
+            verb_de="Ihre Arbeitstypanfrage wurde gelöscht.",
+            verb_es="Su solicitud de tipo de trabajo ha sido eliminada.",
+            verb_fr="Votre demande de type de travail a été supprimée.",
+            redirect="#",
+            icon="trash",
+        )
+    except WorkTypeRequest.DoesNotExist:
+        employee = None
+        messages.error(request, _("Work type request not found."))
+    except ProtectedError:
+        messages.error(request, _("You cannot delete this work type request."))
+    hx_target = request.META.get("HTTP_HX_TARGET", None)
+    if hx_target and hx_target == "objectDetailsModalTarget":
+        instances_ids = request.GET.get("instances_ids")
+        instances_list = json.loads(instances_ids)
+        if obj_id in instances_list:
+            instances_list.remove(obj_id)
+        previous_instance, next_instance = closest_numbers(
+            json.loads(instances_ids), obj_id
+        )
+        return redirect(
+            f"/work-type-request-single-view/{next_instance}/?instances_ids={instances_list}"
+        )
+    elif hx_target and hx_target == "view-container":
+        previous_data = request.GET.urlencode()
+        work_type_requests = WorkTypeRequest.objects.all()
+        if work_type_requests.exists():
+            return redirect(f"/work-type-request-search?{previous_data}")
+        else:
+            return HttpResponse("<script>window.location.reload()</script>")
+
+    elif hx_target and hx_target == "shift_target" and employee:
+        return redirect(f"/employee/shift-tab/{employee.id}")
+    else:
+        return HttpResponse("<script>window.location.reload()</script>")
+
+
+@login_required
+def work_type_request_single_view(request, obj_id):
+    """
+    This method is used to view details of an work type request
+    """
+    work_type_request = WorkTypeRequest.objects.filter(id=obj_id).first()
+    context = {
+        "work_type_request": work_type_request,
+        "dashboard": request.GET.get("dashboard"),
+    }
+    requests_ids_json = request.GET.get("instances_ids")
+    if requests_ids_json:
+        requests_ids = json.loads(requests_ids_json)
+        previous_id, next_id = closest_numbers(requests_ids, obj_id)
+        context["requests_ids"] = requests_ids_json
+        context["previous"] = previous_id
+        context["next"] = next_id
+    context["close_hx_url"], context["close_hx_target"] = handle_wtr_close_hx_url(
+        request
+    )
+    return render(
+        request,
+        "work_type_request/htmx/work_type_request_single_view.html",
+        context,
+    )
+
+
+@login_required
+@permission_required("base.delete_worktyperequest")
+@require_http_methods(["POST"])
+def work_type_request_bulk_delete(request):
+    """
+    This method is used to delete work type request
+    args:
+        id : work type request instance id
+
+    """
+    ids = request.POST["ids"]
+    ids = json.loads(ids)
+    for id in ids:
+        try:
+            work_type_request = WorkTypeRequest.objects.get(id=id)
+            user = work_type_request.employee_id.employee_user_id
+            work_type_request.delete()
+            messages.success(request, _("Work type request deleted."))
+            notify.send(
+                request.user.employee_get,
+                recipient=user,
+                verb="Your work type request has been deleted.",
+                verb_ar="تم حذف طلب نوع وظيفتك.",
+                verb_de="Ihre Arbeitstypanfrage wurde gelöscht.",
+                verb_es="Su solicitud de tipo de trabajo ha sido eliminada.",
+                verb_fr="Votre demande de type de travail a été supprimée.",
+                redirect="#",
+                icon="trash",
+            )
+        except WorkTypeRequest.DoesNotExist:
+            messages.error(request, _("Work type request not found."))
+        except ProtectedError:
+            messages.error(
+                request,
+                _(
+                    "You cannot delete {employee} work type request for the date {date}."
+                ).format(
+                    employee=work_type_request.employee_id,
+                    date=work_type_request.requested_date,
+                ),
+            )
+        result = True
+    return JsonResponse({"result": result})
+
+
+@login_required
+@hx_request_required
+def shift_request(request):
+    """
+    This method is used to create shift request
+    """
+    form = ShiftRequestForm()
+    employee = request.user.employee_get.id
+    if request.GET.get("emp_id"):
+        employee = request.GET.get("emp_id")
+
+    form = ShiftRequestForm(initial={"employee_id": employee})
+    form = choosesubordinates(
+        request,
+        form,
+        "base.add_shiftrequest",
+    )
+    form = include_employee_instance(request, form)
+    f = ShiftRequestFilter()
+    if request.method == "POST":
+        form = ShiftRequestForm(request.POST)
+        form = choosesubordinates(request, form, "base.add_shiftrequest")
+        form = include_employee_instance(request, form)
+        response = render(
+            request,
+            "shift_request/htmx/shift_request_create_form.html",
+            {"form": form, "f": f},
+        )
+        if form.is_valid():
+            instance = form.save()
+            try:
+                notify.send(
+                    instance.employee_id,
+                    recipient=(
+                        instance.employee_id.employee_work_info.reporting_manager_id.employee_user_id
+                    ),
+                    verb=f"You have new shift request to approve \
+                        for {instance.employee_id}",
+                    verb_ar=f"لديك طلب وردية جديد للموافقة عليه لـ {instance.employee_id}",
+                    verb_de=f"Sie müssen eine neue Schichtanfrage \
+                        für {instance.employee_id} genehmigen",
+                    verb_es=f"Tiene una nueva solicitud de turno para \
+                        aprobar para {instance.employee_id}",
+                    verb_fr=f"Vous avez une nouvelle demande de quart de\
+                        travail à approuver pour {instance.employee_id}",
+                    icon="information",
+                    redirect=reverse("shift-request-view") + f"?id={instance.id}",
+                )
+            except Exception as e:
+                pass
+            messages.success(request, _("Shift request added"))
+            return HttpResponse(
+                response.content.decode("utf-8") + "<script>location.reload();</script>"
+            )
+    return render(
+        request,
+        "shift_request/htmx/shift_request_create_form.html",
+        {"form": form, "f": f},
+    )
+
+
+@login_required
+def update_employee_allocation(request):
+
+    shift = request.GET.get("shift_id")
+    form = ShiftAllocationForm()
+    shift = EmployeeShift.objects.filter(id=shift).first()
+    employee_ids = shift.employeeworkinformation_set.values_list(
+        "employee_id", flat=True
+    )
+    employees = Employee.objects.filter(id__in=employee_ids)
+    form.fields["reallocate_to"].queryset = employees
+    context = {"form": form}
+    html_template = render_to_string(
+        "shift_request/htmx/shift_reallocate_employees.html", context
+    )
+    return HttpResponse(html_template)
+
+
+@login_required
+@hx_request_required
+def shift_request_allocation(request):
+    """
+    This method is used to create shift request reallocation
+    """
+    form = ShiftAllocationForm()
+    if request.GET.get("emp_id"):
+        employee = request.GET.get("emp_id")
+        form = ShiftAllocationForm(initial={"employee_id": employee})
+    form = choosesubordinates(
+        request,
+        form,
+        "base.add_shiftrequest",
+    )
+    form = include_employee_instance(request, form)
+    f = ShiftRequestFilter()
+    if request.method == "POST":
+        form = ShiftAllocationForm(request.POST)
+        form = choosesubordinates(request, form, "base.add_shiftrequest")
+        form = include_employee_instance(request, form)
+        response = render(
+            request,
+            "shift_request/htmx/shift_allocation_form.html",
+            {"form": form, "f": f},
+        )
+        if form.is_valid():
+            instance = form.save()
+            reallocate_emp = form.cleaned_data["reallocate_to"]
+            try:
+                notify.send(
+                    instance.employee_id,
+                    recipient=(
+                        instance.employee_id.employee_work_info.reporting_manager_id.employee_user_id
+                    ),
+                    verb=f"You have a new shift reallocation request to approve for {instance.employee_id}.",
+                    verb_ar=f"لديك طلب تخصيص جديد للورديات يتعين عليك الموافقة عليه لـ {instance.employee_id}.",
+                    verb_de=f"Sie haben eine neue Anfrage zur Verschiebung der Schichtzuteilung zur Genehmigung für {instance.employee_id}.",
+                    verb_es=f"Tienes una nueva solicitud de reasignación de turnos para aprobar para {instance.employee_id}.",
+                    verb_fr=f"Vous avez une nouvelle demande de réaffectation de shift à approuver pour {instance.employee_id}.",
+                    icon="information",
+                    redirect=reverse("shift-request-view") + f"?id={instance.id}",
+                )
+            except Exception as e:
+                pass
+
+            try:
+                notify.send(
+                    instance.employee_id,
+                    recipient=reallocate_emp,
+                    verb=f"You have a new shift reallocation request from {instance.employee_id}.",
+                    verb_ar=f"لديك طلب تخصيص جديد للورديات من {instance.employee_id}.",
+                    verb_de=f"Sie haben eine neue Anfrage zur Verschiebung der Schichtzuteilung von {instance.employee_id}.",
+                    verb_es=f"Tienes una nueva solicitud de reasignación de turnos de {instance.employee_id}.",
+                    verb_fr=f"Vous avez une nouvelle demande de réaffectation de shift de {instance.employee_id}.",
+                    icon="information",
+                    redirect=reverse("shift-request-view") + f"?id={instance.id}",
+                )
+            except Exception as e:
+                pass
+
+            messages.success(request, _("Request Added"))
+            return HttpResponse(
+                response.content.decode("utf-8") + "<script>location.reload();</script>"
+            )
+    return render(
+        request,
+        "shift_request/htmx/shift_allocation_form.html",
+        {"form": form, "f": f},
+    )
+
+
+@login_required
+def shift_request_view(request):
+    """
+    This method renders all shift request instances to a template
+    """
+    previous_data = request.GET.urlencode()
+    employee = Employee.objects.filter(employee_user_id=request.user).first()
+    shift_requests = filtersubordinates(
+        request,
+        ShiftRequest.objects.filter(reallocate_to__isnull=True),
+        "base.view_shiftrequest",
+    )
+    shift_requests = shift_requests | ShiftRequest.objects.filter(employee_id=employee)
+    shift_requests = shift_requests.filter(employee_id__is_active=True)
+
+    allocated_shift_requests = filtersubordinates(
+        request,
+        ShiftRequest.objects.filter(reallocate_to__isnull=False),
+        "base.view_shiftrequest",
+    )
+    allocated_requests = ShiftRequest.objects.filter(reallocate_to__isnull=False)
+    if not request.user.has_perm("base.view_shiftrequest"):
+        allocated_requests = allocated_requests.filter(
+            Q(reallocate_to=employee) | Q(employee_id=employee)
+        )
+    allocated_shift_requests = allocated_shift_requests | allocated_requests
+
+    requests_ids = json.dumps(
+        [
+            instance.id
+            for instance in paginator_qry(
+                shift_requests, request.GET.get("page")
+            ).object_list
+        ]
+    )
+    allocated_ids = json.dumps(
+        [
+            instance.id
+            for instance in paginator_qry(
+                allocated_shift_requests, request.GET.get("page")
+            ).object_list
+        ]
+    )
+    f = ShiftRequestFilter(request.GET, queryset=shift_requests)
+    data_dict = parse_qs(previous_data)
+    get_key_instances(ShiftRequest, data_dict)
+    form = ShiftRequestForm()
+
+    form = choosesubordinates(
+        request,
+        form,
+        "base.add_shiftrequest",
+    )
+    form = include_employee_instance(request, form)
+    return render(
+        request,
+        "shift_request/shift_request_view.html",
+        {
+            "allocated_data": paginator_qry(
+                allocated_shift_requests, request.GET.get("page")
+            ),
+            "data": paginator_qry(f.qs, request.GET.get("page")),
+            "f": f,
+            "form": form,
+            "filter_dict": data_dict,
+            "requests_ids": requests_ids,
+            "allocated_ids": allocated_ids,
+            "gp_fields": ShiftRequestReGroup.fields,
+        },
+    )
+
+
+@login_required
+@manager_can_enter("base.view_shiftrequest")
+def shift_request_export(request):
+    if request.META.get("HTTP_HX_REQUEST") == "true":
+        export_fields = ShiftRequestColumnForm()
+        export_filter = ShiftRequestFilter()
+
+        context = {
+            "export_fields": export_fields,
+            "export_filter": export_filter,
+        }
+        return render(
+            request, "shift_request/shift_request_export.html", context=context
+        )
+    return export_data(
+        request,
+        ShiftRequest,
+        ShiftRequestColumnForm,
+        ShiftRequestFilter,
+        "Shift_requests",
+    )
+
+
+@login_required
+def shift_request_search(request):
+    """
+    This method is used search shift request by employee and also used to filter shift request.
+    """
+
+    employee = Employee.objects.filter(employee_user_id=request.user).first()
+    previous_data = request.GET.urlencode()
+    field = request.GET.get("field")
+    f = ShiftRequestFilter(request.GET)
+    f = sortby(request, f.qs, "sortby")
+    shift_requests = filtersubordinates(
+        request, f.filter(reallocate_to__isnull=True), "base.add_shiftrequest"
+    )
+    shift_requests = shift_requests | f.filter(
+        employee_id__employee_user_id=request.user
+    )
+
+    allocated_shift_requests = filtersubordinates(
+        request, f.filter(reallocate_to__isnull=False), "base.add_shiftrequest"
+    )
+    if not request.user.has_perm("base.view_shiftrequest"):
+        allocated_shift_requests = allocated_shift_requests | f.filter(
+            Q(reallocate_to=employee) | Q(employee_id=employee)
+        )
+
+    requests_ids = json.dumps(
+        [
+            instance.id
+            for instance in paginator_qry(
+                shift_requests, request.GET.get("page")
+            ).object_list
+        ]
+    )
+
+    allocated_ids = json.dumps(
+        [
+            instance.id
+            for instance in paginator_qry(
+                allocated_shift_requests, request.GET.get("page")
+            ).object_list
+        ]
+    )
+
+    data_dict = parse_qs(previous_data)
+    template = "shift_request/htmx/requests.html"
+    if field != "" and field is not None:
+        shift_requests = group_by_queryset(
+            shift_requests, field, request.GET.get("page"), "page"
+        )
+        allocated_shift_requests = group_by_queryset(
+            allocated_shift_requests, field, request.GET.get("page"), "page"
+        )
+        shift_list_values = [entry["list"] for entry in shift_requests]
+        allocated_list_values = [entry["list"] for entry in allocated_shift_requests]
+        shift_id_list = []
+        allocated_id_list = []
+
+        for value in shift_list_values:
+            for instance in value.object_list:
+                shift_id_list.append(instance.id)
+
+        for value in allocated_list_values:
+            for instance in value.object_list:
+                allocated_id_list.append(instance.id)
+
+        requests_ids = json.dumps(list(shift_id_list))
+        allocated_ids = json.dumps(list(allocated_id_list))
+        template = "shift_request/htmx/group_by.html"
+
+    else:
+        shift_requests = paginator_qry(shift_requests, request.GET.get("page"))
+        allocated_shift_requests = paginator_qry(
+            allocated_shift_requests, request.GET.get("page")
+        )
+        requests_ids = json.dumps(
+            [
+                instance.id
+                for instance in paginator_qry(
+                    shift_requests, request.GET.get("page")
+                ).object_list
+            ]
+        )
+
+        allocated_ids = json.dumps(
+            [
+                instance.id
+                for instance in paginator_qry(
+                    allocated_shift_requests, request.GET.get("page")
+                ).object_list
+            ]
+        )
+
+    get_key_instances(ShiftRequest, data_dict)
+    return render(
+        request,
+        template,
+        {
+            "allocated_data": allocated_shift_requests,
+            "data": paginator_qry(shift_requests, request.GET.get("page")),
+            "pd": previous_data,
+            "filter_dict": data_dict,
+            "requests_ids": requests_ids,
+            "allocated_ids": allocated_ids,
+            "field": field,
+        },
+    )
+
+
+@login_required
+@hx_request_required
+def shift_request_details(request, id):
+    """
+    This method is used to show shift request details in a modal
+    args:
+        id : shift request instance id
+    """
+    shift_request = ShiftRequest.find(id)
+    requests_ids_json = request.GET.get("instances_ids")
+    context = {
+        "shift_request": shift_request,
+        "dashboard": request.GET.get("dashboard"),
+    }
+    if requests_ids_json:
+        requests_ids = json.loads(requests_ids_json)
+        previous_id, next_id = closest_numbers(requests_ids, id)
+        context["previous"] = previous_id
+        context["next"] = next_id
+        context["requests_ids"] = requests_ids_json
+    return render(
+        request,
+        "shift_request/htmx/shift_request_detail.html",
+        context,
+    )
+
+
+@login_required
+@hx_request_required
+def shift_allocation_request_details(request, id):
+    """
+    This method is used to show shift request details in a modal
+    args:
+        id : shift request instance id
+    """
+    shift_request = ShiftRequest.find(id)
+    requests_ids_json = request.GET.get("instances_ids")
+    context = {
+        "shift_request": shift_request,
+        "dashboard": request.GET.get("dashboard"),
+    }
+    if requests_ids_json:
+        requests_ids = json.loads(requests_ids_json)
+        previous_id, next_id = closest_numbers(requests_ids, id)
+        context["previous"] = previous_id
+        context["next"] = next_id
+        context["allocation_ids"] = requests_ids_json
+    return render(
+        request,
+        "shift_request/htmx/allocation_details.html",
+        context,
+    )
+
+
+@login_required
+@hx_request_required
+@shift_request_change_permission()
+def shift_request_update(request, shift_request_id):
+    """
+    This method is used to update shift request instance
+    args:
+        id : shift request instance id
+    """
+    shift_request = ShiftRequest.objects.get(id=shift_request_id)
+    form = ShiftRequestForm(instance=shift_request)
+    form = choosesubordinates(request, form, "base.change_shiftrequest")
+    form = include_employee_instance(request, form)
+    if request.method == "POST":
+        if not shift_request.approved:
+            response = render(
+                request,
+                "shift_request/request_update_form.html",
+                {
+                    "form": form,
+                },
+            )
+            form = ShiftRequestForm(request.POST, instance=shift_request)
+            form = choosesubordinates(request, form, "base.change_shiftrequest")
+            form = include_employee_instance(request, form)
+            if form.is_valid():
+                form.save()
+                messages.success(request, _("Request Updated Successfully"))
+                return HttpResponse(
+                    response.content.decode("utf-8")
+                    + "<script>location.reload();</script>"
+                )
+        else:
+            messages.info(request, _("Can't edit approved shift request"))
+            return HttpResponse("<script>location.reload();</script>")
+
+    return render(request, "shift_request/request_update_form.html", {"form": form})
+
+
+@login_required
+def shift_allocation_request_update(request, shift_request_id):
+    """
+    This method is used to update shift request instance
+    args:
+        id : shift request instance id
+    """
+    shift_request = ShiftRequest.objects.get(id=shift_request_id)
+    form = ShiftAllocationForm(instance=shift_request)
+    form = choosesubordinates(request, form, "base.change_shiftrequest")
+    form = include_employee_instance(request, form)
+    if request.method == "POST":
+        response = render(
+            request,
+            "shift_request/request_update_form.html",
+            {
+                "form": form,
+            },
+        )
+        form = ShiftAllocationForm(request.POST, instance=shift_request)
+        form = choosesubordinates(request, form, "base.change_shiftrequest")
+        form = include_employee_instance(request, form)
+        if form.is_valid():
+            form.save()
+            instance = form.save()
+            reallocate_emp = form.cleaned_data["reallocate_to"]
+            try:
+                notify.send(
+                    instance.employee_id,
+                    recipient=(
+                        instance.employee_id.employee_work_info.reporting_manager_id.employee_user_id
+                    ),
+                    verb=f"You have a new shift reallocation request to approve for {instance.employee_id}.",
+                    verb_ar=f"لديك طلب تخصيص جديد للورديات يتعين عليك الموافقة عليه لـ {instance.employee_id}.",
+                    verb_de=f"Sie haben eine neue Anfrage zur Verschiebung der Schichtzuteilung zur Genehmigung für {instance.employee_id}.",
+                    verb_es=f"Tienes una nueva solicitud de reasignación de turnos para aprobar para {instance.employee_id}.",
+                    verb_fr=f"Vous avez une nouvelle demande de réaffectation de shift à approuver pour {instance.employee_id}.",
+                    icon="information",
+                    redirect=reverse("shift-request-view") + f"?id={instance.id}",
+                )
+            except Exception as e:
+                pass
+
+            try:
+                notify.send(
+                    instance.employee_id,
+                    recipient=reallocate_emp,
+                    verb=f"You have a new shift reallocation request from {instance.employee_id}.",
+                    verb_ar=f"لديك طلب تخصيص جديد للورديات من {instance.employee_id}.",
+                    verb_de=f"Sie haben eine neue Anfrage zur Verschiebung der Schichtzuteilung von {instance.employee_id}.",
+                    verb_es=f"Tienes una nueva solicitud de reasignación de turnos de {instance.employee_id}.",
+                    verb_fr=f"Vous avez une nouvelle demande de réaffectation de shift de {instance.employee_id}.",
+                    icon="information",
+                    redirect=reverse("shift-request-view") + f"?id={instance.id}",
+                )
+            except Exception as e:
+                pass
+            messages.success(request, _("Request Updated Successfully"))
+            return HttpResponse(
+                response.content.decode("utf-8") + "<script>location.reload();</script>"
+            )
+
+    return render(
+        request, "shift_request/allocation_request_update_form.html", {"form": form}
+    )
+
+
+@login_required
+def shift_request_cancel(request, id):
+    """
+    This method is used to update or cancel shift request
+    args:
+        id : shift request id
+
+    """
+
+    shift_request = ShiftRequest.find(id)
+    if not shift_request:
+        messages.error(request, _("Shift request not found."))
+        return HttpResponseRedirect(request.META.get("HTTP_REFERER", "/"))
+    if not (
+        is_reportingmanger(request, shift_request)
+        or request.user.has_perm("base.cancel_shiftrequest")
+        or shift_request.employee_id == request.user.employee_get
+        and shift_request.approved == False
+    ):
+        messages.error(request, _("You don't have permission"))
+        return HttpResponseRedirect(request.META.get("HTTP_REFERER", "/"))
+    today_date = datetime.today().date()
+    if (
+        shift_request.approved
+        and shift_request.requested_date <= today_date <= shift_request.requested_till
+        and not shift_request.is_permanent_shift
+    ):
+        shift_request.employee_id.employee_work_info.shift_id = (
+            shift_request.previous_shift_id
+        )
+        shift_request.employee_id.employee_work_info.save()
+    shift_request.canceled = True
+    shift_request.approved = False
+    work_info = EmployeeWorkInformation.objects.filter(
+        employee_id=shift_request.employee_id
+    )
+    if work_info.exists():
+        shift_request.employee_id.employee_work_info.shift_id = (
+            shift_request.previous_shift_id
+        )
+    if shift_request.reallocate_to and work_info.exists():
+        shift_request.reallocate_to.employee_work_info.shift_id = shift_request.shift_id
+        shift_request.reallocate_to.employee_work_info.save()
+    if work_info.exists():
+        shift_request.employee_id.employee_work_info.save()
+    shift_request.save()
+    messages.success(request, _("Shift request rejected"))
+    notify.send(
+        request.user.employee_get,
+        recipient=shift_request.employee_id.employee_user_id,
+        verb="Your shift request has been canceled.",
+        verb_ar="تم إلغاء طلبك للوردية.",
+        verb_de="Ihr Schichtantrag wurde storniert.",
+        verb_es="Se ha cancelado su solicitud de turno.",
+        verb_fr="Votre demande de quart a été annulée.",
+        redirect=reverse("shift-request-view") + f"?id={shift_request.id}",
+        icon="close",
+    )
+    if shift_request.reallocate_to:
+        notify.send(
+            request.user.employee_get,
+            recipient=shift_request.reallocate_to.employee_user_id,
+            verb="Your shift request has been rejected.",
+            verb_ar="تم إلغاء طلبك للوردية.",
+            verb_de="Ihr Schichtantrag wurde storniert.",
+            verb_es="Se ha cancelado su solicitud de turno.",
+            verb_fr="Votre demande de quart a été annulée.",
+            redirect=reverse("shift-request-view") + f"?id={shift_request.id}",
+            icon="close",
+        )
+    return HttpResponseRedirect(request.META.get("HTTP_REFERER", "/"))
+
+
+@login_required
+def shift_allocation_request_cancel(request, id):
+    """
+    This method is used to update or cancel shift request
+    args:
+        id : shift request id
+
+    """
+
+    shift_request = ShiftRequest.find(id)
+
+    shift_request.reallocate_canceled = True
+    shift_request.reallocate_approved = False
+    work_info = EmployeeWorkInformation.objects.filter(
+        employee_id=shift_request.employee_id
+    )
+    if work_info.exists():
+        shift_request.employee_id.employee_work_info.shift_id = (
+            shift_request.previous_shift_id
+        )
+        shift_request.employee_id.employee_work_info.save()
+    shift_request.save()
+    messages.success(request, _("Shift request canceled"))
+    notify.send(
+        request.user.employee_get,
+        recipient=shift_request.employee_id.employee_user_id,
+        verb="Your shift request has been canceled.",
+        verb_ar="تم إلغاء طلبك للوردية.",
+        verb_de="Ihr Schichtantrag wurde storniert.",
+        verb_es="Se ha cancelado su solicitud de turno.",
+        verb_fr="Votre demande de quart a été annulée.",
+        redirect=reverse("shift-request-view") + f"?id={shift_request.id}",
+        icon="close",
+    )
+
+    return HttpResponseRedirect(request.META.get("HTTP_REFERER", "/"))
+
+
+@login_required
+@manager_can_enter("base.change_shiftrequest")
+@require_http_methods(["POST"])
+def shift_request_bulk_cancel(request):
+    """
+    This method is used to cancel a bunch of shift request.
+    """
+    ids = request.POST["ids"]
+    ids = json.loads(ids)
+    result = False
+    for id in ids:
+        shift_request = ShiftRequest.objects.get(id=id)
+        if (
+            is_reportingmanger(request, shift_request)
+            or request.user.has_perm("base.cancel_shiftrequest")
+            or shift_request.employee_id == request.user.employee_get
+            and shift_request.approved == False
+        ):
+            shift_request.canceled = True
+            shift_request.approved = False
+            shift_request.employee_id.employee_work_info.shift_id = (
+                shift_request.previous_shift_id
+            )
+
+            if shift_request.reallocate_to:
+                shift_request.reallocate_to.employee_work_info.shift_id = (
+                    shift_request.shift_id
+                )
+                shift_request.reallocate_to.employee_work_info.save()
+
+            shift_request.employee_id.employee_work_info.save()
+            shift_request.save()
+            messages.success(request, _("Shift request canceled"))
+            notify.send(
+                request.user.employee_get,
+                recipient=shift_request.employee_id.employee_user_id,
+                verb="Your shift request has been canceled.",
+                verb_ar="تم إلغاء طلبك للوردية.",
+                verb_de="Ihr Schichtantrag wurde storniert.",
+                verb_es="Se ha cancelado su solicitud de turno.",
+                verb_fr="Votre demande de quart a été annulée.",
+                redirect=reverse("shift-request-view") + f"?id={shift_request.id}",
+                icon="close",
+            )
+            if shift_request.reallocate_to:
+                notify.send(
+                    request.user.employee_get,
+                    recipient=shift_request.employee_id.employee_user_id,
+                    verb="Your shift request has been canceled.",
+                    verb_ar="تم إلغاء طلبك للوردية.",
+                    verb_de="Ihr Schichtantrag wurde storniert.",
+                    verb_es="Se ha cancelado su solicitud de turno.",
+                    verb_fr="Votre demande de quart a été annulée.",
+                    redirect=reverse("shift-request-view") + f"?id={shift_request.id}",
+                    icon="close",
+                )
+            result = True
+    return JsonResponse({"result": result})
+
+
+@login_required
+@manager_can_enter("base.change_shiftrequest")
+def shift_request_approve(request, id):
+    """
+    Approve shift request
+    args:
+        id : shift request instance id
+    """
+
+    shift_request = ShiftRequest.find(id)
+    if not shift_request:
+        messages.error(request, _("Shift request not found."))
+        return HttpResponseRedirect(request.META.get("HTTP_REFERER", "/"))
+
+    user = request.user
+    if not (
+        is_reportingmanger(request, shift_request)
+        or user.has_perm("approve_shiftrequest")
+        or user.has_perm("change_shiftrequest")
+        and not shift_request.approved
+    ):
+        messages.error(request, _("You don't have permission"))
+        return HttpResponseRedirect(request.META.get("HTTP_REFERER", "/"))
+
+    if shift_request.is_any_request_exists():
+        messages.error(
+            request,
+            _("An approved shift request already exists during this time period."),
+        )
+        return HttpResponseRedirect(request.META.get("HTTP_REFERER", "/"))
+
+    today_date = datetime.today().date()
+    if not shift_request.is_permanent_shift:
+        if shift_request.requested_date <= today_date <= shift_request.requested_till:
+            shift_request.employee_id.employee_work_info.shift_id = (
+                shift_request.shift_id
+            )
+            shift_request.employee_id.employee_work_info.save()
+    shift_request.approved = True
+    shift_request.canceled = False
+
+    if shift_request.reallocate_to:
+        shift_request.reallocate_to.employee_work_info.shift_id = (
+            shift_request.previous_shift_id
+        )
+        shift_request.reallocate_to.employee_work_info.save()
+
+    shift_request.save()
+    messages.success(request, _("Shift has been approved."))
+
+    recipients = [shift_request.employee_id.employee_user_id]
+    if shift_request.reallocate_to:
+        recipients.append(shift_request.reallocate_to.employee_user_id)
+
+    for recipient in recipients:
+        notify.send(
+            user.employee_get,
+            recipient=recipient,
+            verb="Your shift request has been approved.",
+            verb_ar="تمت الموافقة على طلبك للوردية.",
+            verb_de="Ihr Schichtantrag wurde genehmigt.",
+            verb_es="Se ha aprobado su solicitud de turno.",
+            verb_fr="Votre demande de quart a été approuvée.",
+            redirect=reverse("shift-request-view") + f"?id={shift_request.id}",
+            icon="checkmark",
+        )
+
+    return HttpResponseRedirect(request.META.get("HTTP_REFERER", "/"))
+
+
+@login_required
+def shift_allocation_request_approve(request, id):
+    """
+    This method is used to approve shift request
+    args:
+        id : shift request instance id
+    """
+
+    shift_request = ShiftRequest.find(id)
+
+    if not shift_request.is_any_request_exists():
+        shift_request.reallocate_approved = True
+        shift_request.reallocate_canceled = False
+        shift_request.save()
+        messages.success(request, _("You are available for shift reallocation."))
+        notify.send(
+            request.user.employee_get,
+            recipient=shift_request.employee_id.employee_user_id,
+            verb=f"{request.user.employee_get} is available for shift reallocation.",
+            verb_ar=f"{request.user.employee_get} متاح لإعادة توزيع الورديات.",
+            verb_de=f"{request.user.employee_get} steht für die Verschiebung der Schichtzuteilung zur Verfügung.",
+            verb_es=f"{request.user.employee_get} está disponible para la reasignación de turnos.",
+            verb_fr=f"{request.user.employee_get} est disponible pour la réaffectation de shift.",
+            redirect=reverse("shift-request-view") + f"?id={shift_request.id}",
+            icon="checkmark",
+        )
+        return HttpResponseRedirect(request.META.get("HTTP_REFERER", "/"))
+    else:
+        messages.error(
+            request,
+            _("An approved shift request already exists during this time period."),
+        )
+        return HttpResponseRedirect(request.META.get("HTTP_REFERER", "/"))
+
+
+@login_required
+@require_http_methods(["POST"])
+@manager_can_enter("base.change_shiftrequest")
+def shift_request_bulk_approve(request):
+    """
+    This method is used to approve a bunch of shift request
+    """
+    ids = request.POST["ids"]
+    ids = json.loads(ids)
+    result = False
+    for id in ids:
+        shift_request = ShiftRequest.objects.get(id=id)
+        if (
+            is_reportingmanger(request, shift_request)
+            or request.user.has_perm("approve_shiftrequest")
+            or request.user.has_perm("change_shiftrequest")
+            and not shift_request.approved
+        ):
+            """
+            here the request will be approved, can send mail right here
+            """
+            shift_request.approved = True
+            shift_request.canceled = False
+
+            if shift_request.reallocate_to:
+                shift_request.reallocate_to.employee_work_info.shift_id = (
+                    shift_request.previous_shift_id
+                )
+                shift_request.reallocate_to.employee_work_info.save()
+
+            employee_work_info = shift_request.employee_id.employee_work_info
+            employee_work_info.shift_id = shift_request.shift_id
+            employee_work_info.save()
+            shift_request.save()
+            messages.success(request, _("Shifts have been approved."))
+            notify.send(
+                request.user.employee_get,
+                recipient=shift_request.employee_id.employee_user_id,
+                verb="Your shift request has been approved.",
+                verb_ar="تمت الموافقة على طلبك للوردية.",
+                verb_de="Ihr Schichtantrag wurde genehmigt.",
+                verb_es="Se ha aprobado su solicitud de turno.",
+                verb_fr="Votre demande de quart a été approuvée.",
+                redirect=reverse("shift-request-view") + f"?id={shift_request.id}",
+                icon="checkmark",
+            )
+        result = True
+    return JsonResponse({"result": result})
+
+
+@login_required
+@require_http_methods(["POST"])
+def shift_request_delete(request, id):
+    """
+    This method is used to delete shift request instance
+    args:
+        id : shift request instance id
+
+    """
+    try:
+        shift_request = ShiftRequest.find(id)
+        user = shift_request.employee_id.employee_user_id
+        messages.success(request, "Shift request deleted")
+        shift_request.delete()
+        notify.send(
+            request.user.employee_get,
+            recipient=user,
+            verb="Your shift request has been deleted.",
+            verb_ar="تم حذف طلب الوردية الخاص بك.",
+            verb_de="Ihr Schichtantrag wurde gelöscht.",
+            verb_es="Se ha eliminado su solicitud de turno.",
+            verb_fr="Votre demande de quart a été supprimée.",
+            redirect="#",
+            icon="trash",
+        )
+
+    except ShiftRequest.DoesNotExist:
+        messages.error(request, _("Shift request not found."))
+    except ProtectedError:
+        messages.error(request, _("You cannot delete this shift request."))
+
+    hx_target = request.META.get("HTTP_HX_TARGET", None)
+    if hx_target and hx_target == "shift_target" and shift_request.employee_id:
+        return redirect(f"/employee/shift-tab/{shift_request.employee_id.id}")
+    return HttpResponseRedirect(request.META.get("HTTP_REFERER", "/"))
+
+
+@login_required
+@permission_required("delete_shiftrequest")
+@require_http_methods(["POST"])
+def shift_request_bulk_delete(request):
+    """
+    This method is used to delete shift request instance
+    args:
+        id : shift request instance id
+
+    """
+    ids = request.POST["ids"]
+    ids = json.loads(ids)
+    result = False
+    for id in ids:
+        try:
+            shift_request = ShiftRequest.objects.get(id=id)
+            user = shift_request.employee_id.employee_user_id
+            shift_request.delete()
+            messages.success(request, _("Shift request deleted."))
+            notify.send(
+                request.user.employee_get,
+                recipient=user,
+                verb="Your shift request has been deleted.",
+                verb_ar="تم حذف طلب الوردية الخاص بك.",
+                verb_de="Ihr Schichtantrag wurde gelöscht.",
+                verb_es="Se ha eliminado su solicitud de turno.",
+                verb_fr="Votre demande de quart a été supprimée.",
+                redirect="#",
+                icon="trash",
+            )
+        except ShiftRequest.DoesNotExist:
+            messages.error(request, _("Shift request not found."))
+        except ProtectedError:
+            messages.error(
+                request,
+                _(
+                    "You cannot delete {employee} shift request for the date {date}."
+                ).format(
+                    employee=shift_request.employee_id,
+                    date=shift_request.requested_date,
+                ),
+            )
+        result = True
+    return JsonResponse({"result": result})
+
+
+@login_required
+def notifications(request):
+    """
+    This method will render notification items
+    """
+    all_notifications = request.user.notifications.unread()
+    return render(
+        request,
+        "notification/notification_items.html",
+        {"notifications": all_notifications},
+    )
+
+
+@login_required
+def clear_notification(request):
+    """
+    This method is used to clear notification
+    """
+    try:
+        request.user.notifications.unread().delete()
+        messages.success(request, _("Unread notifications removed."))
+    except Exception as e:
+        messages.error(request, e)
+    notifications = request.user.notifications.unread()
+    return render(
+        request,
+        "notification/notification_items.html",
+        {"notifications": notifications},
+    )
+
+
+@login_required
+def delete_all_notifications(request):
+    try:
+        request.user.notifications.read().delete()
+        request.user.notifications.unread().delete()
+        messages.success(request, _("All notifications removed."))
+    except Exception as e:
+        messages.error(request, e)
+    notifications = request.user.notifications.all()
+    return render(
+        request, "notification/all_notifications.html", {"notifications": notifications}
+    )
+
+
+@login_required
+def delete_notification(request, id):
+    """
+    This method is used to delete notification
+    """
+    script = ""
+    try:
+        request.user.notifications.get(id=id).delete()
+        messages.success(request, _("Notification deleted."))
+    except Exception as e:
+        messages.error(request, e)
+    if not request.user.notifications.all():
+        script = """<span hx-get='/all-notifications' hx-target='#allNotificationBody' hx-trigger='load'></span>"""
+    return HttpResponse(script)
+
+
+@login_required
+def mark_as_read_notification(request, notification_id):
+    script = ""
+    notification = Notification.objects.get(id=notification_id)
+    notification.mark_as_read()
+    if not request.user.notifications.unread():
+        script = """<span hx-get='/notifications' hx-target='#notificationContainer' hx-trigger='load'></span>"""
+    return HttpResponse(script)
+
+
+@login_required
+def mark_as_read_notification_json(request):
+    try:
+        notification_id = request.POST["notification_id"]
+        notification_id = int(notification_id)
+        notification = Notification.objects.get(id=notification_id)
+        notification.mark_as_read()
+        return JsonResponse({"success": True})
+    except:
+        return JsonResponse({"success": False, "error": "Invalid request"})
+
+
+@login_required
+def read_notifications(request):
+    """
+    This method is to mark as read the notification
+    """
+    try:
+        request.user.notifications.all().mark_all_as_read()
+        messages.info(request, _("Notifications marked as read"))
+    except Exception as e:
+        messages.error(request, e)
+    notifications = request.user.notifications.unread()
+
+    return render(
+        request,
+        "notification/notification_items.html",
+        {"notifications": notifications},
+    )
+
+
+@login_required
+def all_notifications(request):
+    """
+    This method to render all notifications to template
+    """
+    return render(
+        request,
+        "notification/all_notifications.html",
+        {"notifications": request.user.notifications.all()},
+    )
+
+
+@login_required
+def general_settings(request):
+    """
+    This method is used to render settings template
+    """
+    if apps.is_installed("payroll"):
+        PayrollSettings = get_horilla_model_class(
+            app_label="payroll", model="payrollsettings"
+        )
+        EncashmentGeneralSettings = get_horilla_model_class(
+            app_label="payroll", model="encashmentgeneralsettings"
+        )
+        from payroll.forms.component_forms import PayrollSettingsForm
+        from payroll.forms.forms import EncashmentGeneralSettingsForm
+
+        currency_instance = PayrollSettings.objects.first()
+        currency_form = PayrollSettingsForm(instance=currency_instance)
+        encashment_instance = EncashmentGeneralSettings.objects.first()
+        encashment_form = EncashmentGeneralSettingsForm(instance=encashment_instance)
+    else:
+        encashment_form = None
+        currency_form = None
+
+    selected_company_id = request.session.get("selected_company")
+
+    if selected_company_id == "all" or not selected_company_id:
+        companies = Company.objects.all()
+    else:
+        companies = Company.objects.filter(id=selected_company_id)
+
+    # Fetch or create EmployeeGeneralSetting instance
+    prefix_instance = EmployeeGeneralSetting.objects.first()
+    prefix_form = EmployeeGeneralSettingPrefixForm(instance=prefix_instance)
+    instance = AnnouncementExpire.objects.first()
+    form = AnnouncementExpireForm(instance=instance)
+    enabled_block_unblock = (
+        AccountBlockUnblock.objects.exists()
+        and AccountBlockUnblock.objects.first().is_enabled
+    )
+    history_tracking_instance = HistoryTrackingFields.objects.first()
+    history_fields_form_initial = {}
+    if history_tracking_instance and history_tracking_instance.tracking_fields:
+        history_fields_form_initial = {
+            "tracking_fields": history_tracking_instance.tracking_fields[
+                "tracking_fields"
+            ]
+        }
+    history_fields_form = HistoryTrackingFieldsForm(initial=history_fields_form_initial)
+
+    if DynamicPagination.objects.filter(user_id=request.user).exists():
+        pagination = DynamicPagination.objects.filter(user_id=request.user).first()
+        pagination_form = DynamicPaginationForm(instance=pagination)
+    else:
+        pagination_form = DynamicPaginationForm()
+    if request.method == "POST":
+        form = AnnouncementExpireForm(request.POST, instance=instance)
+        if form.is_valid():
+            form.save()
+            messages.success(request, _("Settings updated."))
+            return HttpResponseRedirect(request.META.get("HTTP_REFERER", "/"))
+    return render(
+        request,
+        "base/general_settings.html",
+        {
+            "form": form,
+            "currency_form": currency_form,
+            "pagination_form": pagination_form,
+            "encashment_form": encashment_form,
+            "history_fields_form": history_fields_form,
+            "history_tracking_instance": history_tracking_instance,
+            "enabled_block_unblock": enabled_block_unblock,
+            "prefix_form": prefix_form,
+            "companies": companies,
+            "selected_company_id": selected_company_id,
+        },
+    )
+
+
+@login_required
+@permission_required("base.view_company")
+def date_settings(request):
+    """
+    This method is used to render Date format selector in settings
+    """
+    return render(request, "base/company/date.html")
+
+
+@permission_required("base.change_company")
+@csrf_exempt  # Use this decorator if CSRF protection is enabled
+def save_date_format(request):
+    if request.method == "POST":
+        # Taking the selected Date Format
+        selected_format = request.POST.get("selected_format")
+
+        if not len(selected_format):
+            messages.error(request, _("Please select a valid date format."))
+        else:
+            user = request.user
+            employee = user.employee_get
+
+            # Taking the company_name of the user
+            info = EmployeeWorkInformation.objects.filter(employee_id=employee)
+            # Employee workinformation will not exists if he/she chnged the company, So can't save the date format.
+            if info.exists():
+                for data in info:
+                    employee_company = data.company_id
+
+                company_name = Company.objects.filter(company=employee_company)
+                emp_company = company_name.first()
+
+                if emp_company is None:
+                    messages.warning(
+                        request, _("Please update the company field for the user.")
+                    )
+                else:
+                    # Save the selected format to the backend
+                    emp_company.date_format = selected_format
+                    emp_company.save()
+                    messages.success(request, _("Date format saved successfully."))
+            else:
+                messages.warning(
+                    request, _("Date format cannot saved. You are not in the company.")
+                )
+
+            # Return a JSON response indicating success
+            return JsonResponse({"success": True})
+
+    # Return a JSON response for unsupported methods
+    return JsonResponse({"error": False, "error": "Unsupported method"}, status=405)
+
+
+@login_required
+def get_date_format(request):
+    user = request.user
+    employee = user.employee_get
+
+    # Taking the company_name of the user
+    info = EmployeeWorkInformation.objects.filter(employee_id=employee)
+    if info.exists():
+        for data in info:
+            employee_company = data.company_id
+        company_name = Company.objects.filter(company=employee_company)
+        emp_company = company_name.first()
+        if emp_company:
+            # Access the date_format attribute directly
+            date_format = emp_company.date_format if emp_company else "MMM. D, YYYY"
+        else:
+            date_format = "MMM. D, YYYY"
+    else:
+        date_format = "MMM. D, YYYY"
+    # Return the date format as JSON response
+    return JsonResponse({"selected_format": date_format})
+
+
+@permission_required("base.change_company")
+@csrf_exempt  # Use this decorator if CSRF protection is enabled
+def save_time_format(request):
+    if request.method == "POST":
+        # Taking the selected Time Format
+        selected_format = request.POST.get("selected_format")
+
+        if not len(selected_format):
+            messages.error(request, _("Please select a valid time format."))
+        else:
+            user = request.user
+            employee = user.employee_get
+
+            # Taking the company_name of the user
+            info = EmployeeWorkInformation.objects.filter(employee_id=employee)
+            # Employee workinformation will not exists if he/she chnged the company, So can't save the time format.
+            if info.exists():
+                for data in info:
+                    employee_company = data.company_id
+
+                company_name = Company.objects.filter(company=employee_company)
+                emp_company = company_name.first()
+
+                if emp_company is None:
+                    messages.warning(
+                        request, _("Please update the company field for the user.")
+                    )
+                else:
+                    # Save the selected format to the backend
+                    emp_company.time_format = selected_format
+                    emp_company.save()
+                    messages.success(request, _("Time format saved successfully."))
+            else:
+                messages.warning(
+                    request, _("Time format cannot saved. You are not in the company.")
+                )
+
+            # Return a JSON response indicating success
+            return JsonResponse({"success": True})
+
+    # Return a JSON response for unsupported methods
+    return JsonResponse({"error": False, "error": "Unsupported method"}, status=405)
+
+
+@login_required
+def get_time_format(request):
+    user = request.user
+    employee = user.employee_get
+
+    # Taking the company_name of the user
+    info = EmployeeWorkInformation.objects.filter(employee_id=employee)
+    if info.exists():
+        for data in info:
+            employee_company = data.company_id
+        company_name = Company.objects.filter(company=employee_company)
+        emp_company = company_name.first()
+        if emp_company:
+            # Access the date_format attribute directly
+            time_format = emp_company.time_format
+        else:
+            time_format = "hh:mm A"
+    else:
+        time_format = "hh:mm A"
+    # Return the date format as JSON response
+    return JsonResponse({"selected_format": time_format})
+
+
+@login_required
+def history_field_settings(request):
+    if request.method == "POST":
+        fields = request.POST.getlist("tracking_fields")
+        check = request.POST.get("work_info_track")
+        history_object, created = HistoryTrackingFields.objects.get_or_create(
+            pk=1, defaults={"tracking_fields": {"tracking_fields": fields}}
+        )
+
+        if not created:
+            history_object.tracking_fields = {"tracking_fields": fields}
+            if check == "on":
+                history_object.work_info_track = True
+            else:
+                history_object.work_info_track = False
+            messages.success(request, _("Settings updated."))
+            history_object.save()
+
+    return redirect(general_settings)
+
+
+def enable_account_block_unblock(request):
+    if request.method == "POST":
+        enabled = request.POST.get("enable_block_account")
+        if enabled == "on":
+            enabled = True
+        else:
+            enabled = False
+        if AccountBlockUnblock.objects.exists():
+            instance = AccountBlockUnblock.objects.first()
+            instance.is_enabled = enabled
+            messages.success(request, _("Settings updated."))
+            instance.save()
+        else:
+            AccountBlockUnblock.objects.create(is_enabled=enabled)
+        return redirect(general_settings)
+
+
+@login_required
+def shift_select(request):
+    page_number = request.GET.get("page")
+
+    if page_number == "all":
+        if request.user.has_perm("base.view_shiftrequest"):
+            employees = ShiftRequest.objects.all()
+        else:
+            employees = ShiftRequest.objects.filter(
+                employee_id__employee_user_id=request.user
+            ) | ShiftRequest.objects.filter(
+                employee_id__employee_work_info__reporting_manager_id__employee_user_id=request.user
+            )
+        # employees = ShiftRequest.objects.all()
+
+    employee_ids = [str(emp.id) for emp in employees]
+    total_count = employees.count()
+
+    context = {"employee_ids": employee_ids, "total_count": total_count}
+
+    return JsonResponse(context, safe=False)
+
+
+@login_required
+def shift_select_filter(request):
+    page_number = request.GET.get("page")
+    filtered = request.GET.get("filter")
+    filters = json.loads(filtered) if filtered else {}
+
+    if page_number == "all":
+        employee_filter = ShiftRequestFilter(
+            filters, queryset=ShiftRequest.objects.all()
+        )
+
+        # Get the filtered queryset
+        filtered_employees = employee_filter.qs
+
+        employee_ids = [str(emp.id) for emp in filtered_employees]
+        total_count = filtered_employees.count()
+
+        context = {"employee_ids": employee_ids, "total_count": total_count}
+
+        return JsonResponse(context)
+
+
+@login_required
+def work_type_select(request):
+    page_number = request.GET.get("page")
+
+    if page_number == "all":
+        if request.user.has_perm("base.view_worktyperequest"):
+            employees = WorkTypeRequest.objects.all()
+        else:
+            employees = WorkTypeRequest.objects.filter(
+                employee_id__employee_user_id=request.user
+            ) | WorkTypeRequest.objects.filter(
+                employee_id__employee_work_info__reporting_manager_id__employee_user_id=request.user
+            )
+
+    employee_ids = [str(emp.id) for emp in employees]
+    total_count = employees.count()
+
+    context = {"employee_ids": employee_ids, "total_count": total_count}
+
+    return JsonResponse(context, safe=False)
+
+
+@login_required
+def work_type_select_filter(request):
+    page_number = request.GET.get("page")
+    filtered = request.GET.get("filter")
+    filters = json.loads(filtered) if filtered else {}
+
+    if page_number == "all":
+        employee_filter = WorkTypeRequestFilter(
+            filters, queryset=WorkTypeRequest.objects.all()
+        )
+
+        # Get the filtered queryset
+        filtered_employees = employee_filter.qs
+
+        employee_ids = [str(emp.id) for emp in filtered_employees]
+        total_count = filtered_employees.count()
+
+        context = {"employee_ids": employee_ids, "total_count": total_count}
+
+        return JsonResponse(context)
+
+
+@login_required
+def rotating_shift_select(request):
+    page_number = request.GET.get("page")
+
+    if page_number == "all":
+        if request.user.has_perm("base.view_rotatingshiftassign"):
+            employees = RotatingShiftAssign.objects.filter(is_active=True)
+        else:
+            employees = RotatingShiftAssign.objects.filter(
+                employee_id__employee_work_info__reporting_manager_id__employee_user_id=request.user
+            )
+    else:
+        employees = RotatingShiftAssign.objects.all()
+
+    employee_ids = [str(emp.id) for emp in employees]
+    total_count = employees.count()
+
+    context = {"employee_ids": employee_ids, "total_count": total_count}
+
+    return JsonResponse(context, safe=False)
+
+
+@login_required
+def rotating_shift_select_filter(request):
+    page_number = request.GET.get("page")
+    filtered = request.GET.get("filter")
+    filters = json.loads(filtered) if filtered else {}
+
+    if page_number == "all":
+        employee_filter = RotatingShiftAssignFilters(
+            filters, queryset=RotatingShiftAssign.objects.all()
+        )
+
+        # Get the filtered queryset
+        filtered_employees = employee_filter.qs
+
+        employee_ids = [str(emp.id) for emp in filtered_employees]
+        total_count = filtered_employees.count()
+
+        context = {"employee_ids": employee_ids, "total_count": total_count}
+
+        return JsonResponse(context)
+
+
+@login_required
+def rotating_work_type_select(request):
+    page_number = request.GET.get("page")
+
+    if page_number == "all":
+        if request.user.has_perm("base.view_rotatingworktypeassign"):
+            employees = RotatingWorkTypeAssign.objects.filter(is_active=True)
+        else:
+            employees = RotatingWorkTypeAssign.objects.filter(
+                employee_id__employee_work_info__reporting_manager_id__employee_user_id=request.user
+            )
+    else:
+        employees = RotatingWorkTypeAssign.objects.all()
+
+    employee_ids = [str(emp.id) for emp in employees]
+    total_count = employees.count()
+
+    context = {"employee_ids": employee_ids, "total_count": total_count}
+
+    return JsonResponse(context, safe=False)
+
+
+@login_required
+def rotating_work_type_select_filter(request):
+    page_number = request.GET.get("page")
+    filtered = request.GET.get("filter")
+    filters = json.loads(filtered) if filtered else {}
+
+    if page_number == "all":
+        employee_filter = RotatingWorkTypeAssignFilter(
+            filters, queryset=RotatingWorkTypeAssign.objects.all()
+        )
+
+        # Get the filtered queryset
+        filtered_employees = employee_filter.qs
+
+        employee_ids = [str(emp.id) for emp in filtered_employees]
+        total_count = filtered_employees.count()
+
+        context = {"employee_ids": employee_ids, "total_count": total_count}
+
+        return JsonResponse(context)
+
+
+@login_required
+@permission_required("horilla_audit.view_audittag")
+def tag_view(request):
+    """
+    This method is used to show Audit tags
+    """
+    audittags = AuditTag.objects.all()
+    return render(
+        request,
+        "base/tags/tags.html",
+        {"audittags": audittags},
+    )
+
+
+@login_required
+@permission_required("helpdesk.view_tag")
+def helpdesk_tag_view(request):
+    """
+    This method is used to show Help desk tags
+    """
+    tags = Tags.objects.all()
+    return render(
+        request,
+        "base/tags/helpdesk_tags.html",
+        {"tags": tags},
+    )
+
+
+@login_required
+@hx_request_required
+@permission_required("helpdesk.add_tag")
+def tag_create(request):
+    """
+    This method renders form and template to create Ticket type
+    """
+    form = TagsForm()
+    if request.method == "POST":
+        form = TagsForm(request.POST)
+        if form.is_valid():
+            form.save()
+            form = TagsForm()
+            messages.success(request, _("Tag has been created successfully!"))
+            return HttpResponse("<script>window.location.reload()</script>")
+    return render(
+        request,
+        "base/tags/tags_form.html",
+        {
+            "form": form,
+        },
+    )
+
+
+@login_required
+@hx_request_required
+@permission_required("helpdesk.change_tag")
+def tag_update(request, tag_id):
+    """
+    This method renders form and template to create Ticket type
+    """
+    tag = Tags.objects.get(id=tag_id)
+    form = TagsForm(instance=tag)
+    if request.method == "POST":
+        form = TagsForm(request.POST, instance=tag)
+        if form.is_valid():
+            form.save()
+            form = TagsForm()
+            messages.success(request, _("Tag has been updated successfully!"))
+            return HttpResponse("<script>window.location.reload()</script>")
+    return render(
+        request,
+        "base/tags/tags_form.html",
+        {"form": form, "tag_id": tag_id},
+    )
+
+
+@login_required
+@hx_request_required
+@permission_required("horilla_audit.add_audittag")
+def audit_tag_create(request):
+    """
+    This method renders form and template to create Ticket type
+    """
+    form = AuditTagForm()
+    if request.method == "POST":
+        form = AuditTagForm(request.POST)
+        if form.is_valid():
+            form.save()
+            form = AuditTagForm()
+            messages.success(request, _("Tag has been created successfully!"))
+            return HttpResponse("<script>window.location.reload()</script>")
+    return render(
+        request,
+        "base/audit_tag/audit_tag_form.html",
+        {
+            "form": form,
+        },
+    )
+
+
+@login_required
+@hx_request_required
+@permission_required("horilla_audit.change_audittag")
+def audit_tag_update(request, tag_id):
+    """
+    This method renders form and template to create Ticket type
+    """
+    tag = AuditTag.objects.get(id=tag_id)
+    form = AuditTagForm(instance=tag)
+    if request.method == "POST":
+        form = AuditTagForm(request.POST, instance=tag)
+        if form.is_valid():
+            form.save()
+            form = AuditTagForm()
+            messages.success(request, _("Tag has been updated successfully!"))
+            return HttpResponse("<script>window.location.reload()</script>")
+    return render(
+        request,
+        "base/audit_tag/audit_tag_form.html",
+        {"form": form, "tag_id": tag_id},
+    )
+
+
+@login_required
+@permission_required("base.view_multipleapprovalcondition")
+def multiple_approval_condition(request):
+    form = MultipleApproveConditionForm()
+    selected_company = request.session.get("selected_company")
+    if selected_company != "all":
+        conditions = MultipleApprovalCondition.objects.filter(
+            company_id=selected_company
+        ).order_by("department")[::-1]
+    else:
+        conditions = MultipleApprovalCondition.objects.all().order_by("department")[
+            ::-1
+        ]
+    create = True
+    return render(
+        request,
+        "multi_approval_condition/condition.html",
+        {"form": form, "conditions": conditions, "create": create},
+    )
+
+
+@login_required
+@hx_request_required
+@permission_required("base.view_multipleapprovalcondition")
+def hx_multiple_approval_condition(request):
+    selected_company = request.session.get("selected_company")
+    if selected_company != "all":
+        conditions = MultipleApprovalCondition.objects.filter(
+            company_id=selected_company
+        ).order_by("department")[::-1]
+    else:
+        conditions = MultipleApprovalCondition.objects.all().order_by("department")[
+            ::-1
+        ]
+    return render(
+        request,
+        "multi_approval_condition/condition_table.html",
+        {"conditions": conditions},
+    )
+
+
+@login_required
+@hx_request_required
+@permission_required("base.add_multipleapprovalcondition")
+def get_condition_value_fields(request):
+    operator = request.GET.get("condition_operator")
+    form = MultipleApproveConditionForm()
+    is_range = True if operator and operator == "range" else False
+    context = {"form": form, "range": is_range}
+    field_html = render_to_string(
+        "multi_approval_condition/condition_value_fields.html", context
+    )
+    return HttpResponse(field_html)
+
+
+@login_required
+@hx_request_required
+@permission_required("base.add_multipleapprovalcondition")
+def add_more_approval_managers(request):
+    currnet_hx_target = request.META.get("HTTP_HX_TARGET")
+    hx_target_split = currnet_hx_target.split("_")
+    next_hx_target = "_".join([hx_target_split[0], str(int(hx_target_split[-1]) + 1)])
+
+    form = MultipleApproveConditionForm()
+    managers_count = request.GET.get("managers_count")
+    context = {
+        "next_hx_target": next_hx_target,
+        "currnet_hx_target": currnet_hx_target,
+    }
+    if managers_count:
+        managers_count = int(managers_count) + 1
+        field_name = f"multi_approval_manager_{managers_count}"
+        form.fields[field_name] = forms.ModelChoiceField(
+            queryset=Employee.objects.all(),
+            widget=forms.Select(
+                attrs={
+                    "class": "oh-select oh-select-2 mb-3",
+                    "name": field_name,
+                    "id": f"id_{field_name}",
+                }
+            ),
+            required=False,
+        )
+        context["managers_count"] = managers_count
+        context["field_html"] = form[field_name].as_widget()
+    else:
+        form.fields["multi_approval_manager"].widget.attrs.update(
+            {
+                "name": f"multi_approval_manager_{str(int(hx_target_split[-1]) + 1)}",
+                "id": f"id_multi_approval_manager_{str(int(hx_target_split[-1]) + 1)}",
+            }
+        )
+        context["form"] = form
+
+    field_html = render_to_string(
+        "multi_approval_condition/add_more_approval_manager.html", context
+    )
+
+    return HttpResponse(field_html)
+
+
+@login_required
+@hx_request_required
+@permission_required("base.add_multipleapprovalcondition")
+def remove_approval_manager(request):
+    return HttpResponse()
+
+
+@login_required
+@hx_request_required
+@permission_required("base.add_multipleapprovalcondition")
+def multiple_level_approval_create(request):
+    form = MultipleApproveConditionForm()
+    create = True
+    if request.method == "POST":
+        form = MultipleApproveConditionForm(request.POST)
+        dept_id = request.POST.get("department")
+        condition_field = request.POST.get("condition_field")
+        condition_operator = request.POST.get("condition_operator")
+        condition_value = request.POST.get("condition_value")
+        condition_start_value = request.POST.get("condition_start_value")
+        condition_end_value = request.POST.get("condition_end_value")
+        company_id = request.POST.get("company_id")
+        condition_approval_managers = request.POST.getlist("multi_approval_manager")
+        company = Company.objects.get(id=company_id)
+        department = Department.objects.get(id=dept_id)
+        instance = MultipleApprovalCondition()
+        if form.is_valid():
+            if condition_operator != "range":
+                instance.department = department
+                instance.condition_field = condition_field
+                instance.condition_operator = condition_operator
+                instance.condition_value = condition_value
+                instance.company_id = company
+            else:
+                instance.department = department
+                instance.condition_field = condition_field
+                instance.condition_operator = condition_operator
+                instance.condition_start_value = condition_start_value
+                instance.condition_end_value = condition_end_value
+                instance.company_id = company
+            instance.save()
+            sequence = 0
+            for emp_id in condition_approval_managers:
+                sequence += 1
+                employee_id = int(emp_id)
+                MultipleApprovalManagers.objects.create(
+                    condition_id=instance,
+                    sequence=sequence,
+                    employee_id=employee_id,
+                )
+            form = MultipleApproveConditionForm()
+            messages.success(
+                request, _("Multiple approval condition created successfully")
+            )
+    return render(
+        request,
+        "multi_approval_condition/condition_create_form.html",
+        {"form": form, "create": create},
+    )
+
+
+def edit_approval_managers(form, managers):
+    for i, manager in enumerate(managers):
+        if i == 0:
+            form.initial["multi_approval_manager"] = manager.employee_id
+        else:
+            field_name = f"multi_approval_manager_{i}"
+            form.fields[field_name] = forms.ModelChoiceField(
+                queryset=Employee.objects.all(),
+                label=_("Approval Manager {}").format(i),
+                widget=forms.Select(attrs={"class": "oh-select oh-select-2 mb-3"}),
+                required=False,
+            )
+            form.initial[field_name] = manager.employee_id
+    return form
+
+
+@login_required
+@hx_request_required
+@permission_required("base.change_multipleapprovalcondition")
+def multiple_level_approval_edit(request, condition_id):
+    create = False
+    condition = MultipleApprovalCondition.objects.get(id=condition_id)
+    managers = MultipleApprovalManagers.objects.filter(condition_id=condition).order_by(
+        "sequence"
+    )
+    form = MultipleApproveConditionForm(instance=condition)
+    edit_approval_managers(form, managers)
+    if request.method == "POST":
+        form = MultipleApproveConditionForm(request.POST, instance=condition)
+        if form.is_valid():
+            instance = form.save()
+            messages.success(
+                request, _("Multiple approval condition updated successfully")
+            )
+            sequence = 0
+            MultipleApprovalManagers.objects.filter(condition_id=condition).delete()
+            for key, value in request.POST.items():
+                if key.startswith("multi_approval_manager"):
+                    sequence += 1
+                    employee_id = int(value)
+                    MultipleApprovalManagers.objects.create(
+                        condition_id=instance,
+                        sequence=sequence,
+                        employee_id=employee_id,
+                    )
+    selected_company = request.session.get("selected_company")
+    if selected_company != "all":
+        conditions = MultipleApprovalCondition.objects.filter(
+            company_id=selected_company
+        ).order_by("department")[::-1]
+    else:
+        conditions = MultipleApprovalCondition.objects.all().order_by("department")[
+            ::-1
+        ]
+
+    return render(
+        request,
+        "multi_approval_condition/condition_edit_form.html",
+        {
+            "form": form,
+            "conditions": conditions,
+            "create": create,
+            "condition": condition,
+            "managers_count": len(managers),
+        },
+    )
+
+
+@login_required
+@permission_required("base.delete_multipleapprovalcondition")
+def multiple_level_approval_delete(request, condition_id):
+    condition = MultipleApprovalCondition.objects.get(id=condition_id)
+    condition.delete()
+    messages.success(request, _("Multiple approval condition deleted successfully"))
+    return redirect(hx_multiple_approval_condition)
+
+
+@login_required
+@hx_request_required
+def create_shiftrequest_comment(request, shift_id):
+    """
+    This method renders form and template to create shift request comments
+    """
+    shift = ShiftRequest.find(shift_id)
+    emp = request.user.employee_get
+    form = ShiftRequestCommentForm(
+        initial={"employee_id": emp.id, "request_id": shift_id}
+    )
+
+    if request.method == "POST":
+        form = ShiftRequestCommentForm(request.POST)
+        if form.is_valid():
+            form.instance.employee_id = emp
+            form.instance.request_id = shift
+            form.save()
+            comments = ShiftRequestComment.objects.filter(request_id=shift_id).order_by(
+                "-created_at"
+            )
+            no_comments = False
+            if not comments.exists():
+                no_comments = True
+            form = ShiftRequestCommentForm(
+                initial={"employee_id": emp.id, "request_id": shift_id}
+            )
+            messages.success(request, _("Comment added successfully!"))
+            work_info = EmployeeWorkInformation.objects.filter(
+                employee_id=shift.employee_id
+            )
+            if work_info.exists():
+                if (
+                    shift.employee_id.employee_work_info.reporting_manager_id
+                    is not None
+                ):
+                    if request.user.employee_get.id == shift.employee_id.id:
+                        rec = (
+                            shift.employee_id.employee_work_info.reporting_manager_id.employee_user_id
+                        )
+                        notify.send(
+                            request.user.employee_get,
+                            recipient=rec,
+                            verb=f"{shift.employee_id}'s shift request has received a comment.",
+                            verb_ar=f"تلقت طلب تحويل {shift.employee_id} تعليقًا.",
+                            verb_de=f"{shift.employee_id}s Schichtantrag hat einen Kommentar erhalten.",
+                            verb_es=f"La solicitud de turno de {shift.employee_id} ha recibido un comentario.",
+                            verb_fr=f"La demande de changement de poste de {shift.employee_id} a reçu un commentaire.",
+                            redirect=reverse("shift-request-view") + f"?id={shift.id}",
+                            icon="chatbox-ellipses",
+                        )
+                    elif (
+                        request.user.employee_get.id
+                        == shift.employee_id.employee_work_info.reporting_manager_id.id
+                    ):
+                        rec = shift.employee_id.employee_user_id
+                        notify.send(
+                            request.user.employee_get,
+                            recipient=rec,
+                            verb="Your shift request has received a comment.",
+                            verb_ar="تلقت طلبك للتحول تعليقًا.",
+                            verb_de="Ihr Schichtantrag hat einen Kommentar erhalten.",
+                            verb_es="Tu solicitud de turno ha recibido un comentario.",
+                            verb_fr="Votre demande de changement de poste a reçu un commentaire.",
+                            redirect=reverse("shift-request-view") + f"?id={shift.id}",
+                            icon="chatbox-ellipses",
+                        )
+                    else:
+                        rec = [
+                            shift.employee_id.employee_user_id,
+                            shift.employee_id.employee_work_info.reporting_manager_id.employee_user_id,
+                        ]
+                        notify.send(
+                            request.user.employee_get,
+                            recipient=rec,
+                            verb=f"{shift.employee_id}'s shift request has received a comment.",
+                            verb_ar=f"تلقت طلب تحويل {shift.employee_id} تعليقًا.",
+                            verb_de=f"{shift.employee_id}s Schichtantrag hat einen Kommentar erhalten.",
+                            verb_es=f"La solicitud de turno de {shift.employee_id} ha recibido un comentario.",
+                            verb_fr=f"La demande de changement de poste de {shift.employee_id} a reçu un commentaire.",
+                            redirect=reverse("shift-request-view") + f"?id={shift.id}",
+                            icon="chatbox-ellipses",
+                        )
+                else:
+                    rec = shift.employee_id.employee_user_id
+                    notify.send(
+                        request.user.employee_get,
+                        recipient=rec,
+                        verb="Your shift request has received a comment.",
+                        verb_ar="تلقت طلبك للتحول تعليقًا.",
+                        verb_de="Ihr Schichtantrag hat einen Kommentar erhalten.",
+                        verb_es="Tu solicitud de turno ha recibido un comentario.",
+                        verb_fr="Votre demande de changement de poste a reçu un commentaire.",
+                        redirect=reverse("shift-request-view") + f"?id={shift.id}",
+                        icon="chatbox-ellipses",
+                    )
+            return render(
+                request,
+                "shift_request/htmx/shift_comment.html",
+                {
+                    "comments": comments,
+                    "no_comments": no_comments,
+                    "request_id": shift_id,
+                    "shift_request": shift,
+                },
+            )
+    return render(
+        request,
+        "shift_request/htmx/shift_comment.html",
+        {"form": form, "request_id": shift_id, "shift_request": shift},
+    )
+
+
+@login_required
+@hx_request_required
+def view_shift_comment(request, shift_id):
+    """
+    This method is used to render all the notes of the employee
+    """
+    shift_request = ShiftRequest.find(shift_id)
+    comments = ShiftRequestComment.objects.filter(request_id=shift_id).order_by(
+        "-created_at"
+    )
+    no_comments = False
+    if not comments.exists():
+        no_comments = True
+    if request.FILES:
+        files = request.FILES.getlist("files")
+        comment_id = request.GET["comment_id"]
+        comment = ShiftRequestComment.objects.get(id=comment_id)
+        attachments = []
+        for file in files:
+            file_instance = BaserequestFile()
+            file_instance.file = file
+            file_instance.save()
+            attachments.append(file_instance)
+        comment.files.add(*attachments)
+    return render(
+        request,
+        "shift_request/htmx/shift_comment.html",
+        {
+            "comments": comments,
+            "no_comments": no_comments,
+            "request_id": shift_id,
+            "shift_request": shift_request,
+        },
+    )
+
+
+@login_required
+@hx_request_required
+def delete_shift_comment_file(request):
+    """
+    Used to delete attachment
+    """
+    ids = request.GET.getlist("ids")
+    shift_id = request.GET["shift_id"]
+    comment_id = request.GET["comment_id"]
+    comment = ShiftRequestComment.find(comment_id)
+    script = ""
+    if (
+        request.user.employee_get == comment.employee_id
+        or request.user.has_perm("base.delete_baserequestfile")
+        or is_reportingmanager(request)
+    ):
+        BaserequestFile.objects.filter(id__in=ids).delete()
+        messages.success(request, _("File deleted successfully"))
+    else:
+        messages.warning(request, _("You don't have permission"))
+        script = f"""<span hx-get="/view-shift-comment/{shift_id}/" hx-trigger="load" hx-target="#commentContainer" data-target="#activitySidebar"></span>"""
+    return HttpResponse(script)
+
+
+@login_required
+@hx_request_required
+def view_work_type_comment(request, work_type_id):
+    """
+    This method is used to render all the notes of the employee
+    """
+    work_type_request = WorkTypeRequest.find(work_type_id)
+    comments = WorkTypeRequestComment.objects.filter(request_id=work_type_id).order_by(
+        "-created_at"
+    )
+    no_comments = False
+    if not comments.exists():
+        no_comments = True
+    if request.FILES:
+        files = request.FILES.getlist("files")
+        comment_id = request.GET["comment_id"]
+        comment = WorkTypeRequestComment.objects.get(id=comment_id)
+        attachments = []
+        for file in files:
+            file_instance = BaserequestFile()
+            file_instance.file = file
+            file_instance.save()
+            attachments.append(file_instance)
+        comment.files.add(*attachments)
+    return render(
+        request,
+        "work_type_request/htmx/work_type_comment.html",
+        {
+            "comments": comments,
+            "no_comments": no_comments,
+            "request_id": work_type_id,
+            "work_type_request": work_type_request,
+        },
+    )
+
+
+@login_required
+@hx_request_required
+def delete_work_type_comment_file(request):
+    """
+    Used to delete attachment
+    """
+    ids = request.GET.getlist("ids")
+    request_id = request.GET["request_id"]
+    comment_id = request.GET["comment_id"]
+    comment = WorkTypeRequestComment.find(comment_id)
+    script = ""
+    if (
+        request.user.employee_get == comment.employee_id
+        or request.user.has_perm("base.delete_baserequestfile")
+        or is_reportingmanager(request)
+    ):
+        BaserequestFile.objects.filter(id__in=ids).delete()
+        messages.success(request, _("File deleted successfully"))
+    else:
+        messages.warning(request, _("You don't have permission"))
+        script = f"""<span hx-get="/view-work-type-comment/{request_id}/" hx-trigger="load" hx-target="#commentContainer" data-target="#activitySidebar"></span>"""
+    return HttpResponse(script)
+
+
+@login_required
+@hx_request_required
+def delete_shiftrequest_comment(request, comment_id):
+    """
+    This method is used to delete shift request comments
+    """
+    comment = ShiftRequestComment.find(comment_id)
+    request_id = comment.request_id.id
+    script = ""
+    if (
+        request.user.employee_get == comment.employee_id
+        or request.user.has_perm("base.delete_baserequestfile")
+        or is_reportingmanager(request)
+    ):
+        comment.delete()
+        messages.success(request, _("Comment deleted successfully!"))
+    else:
+        messages.warning(request, _("You don't have permission"))
+        script = f"""<span hx-get="/view-shift-comment/{request_id}/" hx-trigger="load" hx-target="#commentContainer" data-target="#activitySidebar"></span>"""
+    return HttpResponse(script)
+
+
+@login_required
+@hx_request_required
+def create_worktyperequest_comment(request, worktype_id):
+    """
+    This method renders form and template to create Work type request comments
+    """
+    work_type = WorkTypeRequest.objects.filter(id=worktype_id).first()
+    emp = request.user.employee_get
+    form = WorkTypeRequestCommentForm(
+        initial={"employee_id": emp.id, "request_id": worktype_id}
+    )
+
+    if request.method == "POST":
+        form = WorkTypeRequestCommentForm(request.POST)
+        if form.is_valid():
+            form.instance.employee_id = emp
+            form.instance.request_id = work_type
+            form.save()
+            comments = WorkTypeRequestComment.objects.filter(
+                request_id=worktype_id
+            ).order_by("-created_at")
+            no_comments = False
+            if not comments.exists():
+                no_comments = True
+            form = WorkTypeRequestCommentForm(
+                initial={"employee_id": emp.id, "request_id": worktype_id}
+            )
+            messages.success(request, _("Comment added successfully!"))
+
+            work_info = EmployeeWorkInformation.objects.filter(
+                employee_id=work_type.employee_id
+            )
+            if work_info.exists():
+                if (
+                    work_type.employee_id.employee_work_info.reporting_manager_id
+                    is not None
+                ):
+                    if request.user.employee_get.id == work_type.employee_id.id:
+                        rec = (
+                            work_type.employee_id.employee_work_info.reporting_manager_id.employee_user_id
+                        )
+                        notify.send(
+                            request.user.employee_get,
+                            recipient=rec,
+                            verb=f"{work_type.employee_id}'s work type request has received a comment.",
+                            verb_ar=f"تلقت طلب نوع العمل {work_type.employee_id} تعليقًا.",
+                            verb_de=f"{work_type.employee_id}s Arbeitsart-Antrag hat einen Kommentar erhalten.",
+                            verb_es=f"La solicitud de tipo de trabajo de {work_type.employee_id} ha recibido un comentario.",
+                            verb_fr=f"La demande de type de travail de {work_type.employee_id} a reçu un commentaire.",
+                            redirect=reverse("work-type-request-view")
+                            + f"?id={work_type.id}",
+                            icon="chatbox-ellipses",
+                        )
+                    elif (
+                        request.user.employee_get.id
+                        == work_type.employee_id.employee_work_info.reporting_manager_id.id
+                    ):
+                        rec = work_type.employee_id.employee_user_id
+                        notify.send(
+                            request.user.employee_get,
+                            recipient=rec,
+                            verb="Your work type request has received a comment.",
+                            verb_ar="تلقى طلب نوع العمل الخاص بك تعليقًا.",
+                            verb_de="Ihr Arbeitsart-Antrag hat einen Kommentar erhalten.",
+                            verb_es="Tu solicitud de tipo de trabajo ha recibido un comentario.",
+                            verb_fr="Votre demande de type de travail a reçu un commentaire.",
+                            redirect=reverse("work-type-request-view")
+                            + f"?id={work_type.id}",
+                            icon="chatbox-ellipses",
+                        )
+                    else:
+                        rec = [
+                            work_type.employee_id.employee_user_id,
+                            work_type.employee_id.employee_work_info.reporting_manager_id.employee_user_id,
+                        ]
+                        notify.send(
+                            request.user.employee_get,
+                            recipient=rec,
+                            verb=f"{work_type.employee_id}'s work type request has received a comment.",
+                            verb_ar=f"تلقت طلب نوع العمل {work_type.employee_id} تعليقًا.",
+                            verb_de=f"{work_type.employee_id}s Arbeitsart-Antrag hat einen Kommentar erhalten.",
+                            verb_es=f"La solicitud de tipo de trabajo de {work_type.employee_id} ha recibido un comentario.",
+                            verb_fr=f"La demande de type de travail de {work_type.employee_id} a reçu un commentaire.",
+                            redirect=reverse("work-type-request-view")
+                            + f"?id={work_type.id}",
+                            icon="chatbox-ellipses",
+                        )
+                else:
+                    rec = work_type.employee_id.employee_user_id
+                    notify.send(
+                        request.user.employee_get,
+                        recipient=rec,
+                        verb="Your work type request has received a comment.",
+                        verb_ar="تلقى طلب نوع العمل الخاص بك تعليقًا.",
+                        verb_de="Ihr Arbeitsart-Antrag hat einen Kommentar erhalten.",
+                        verb_es="Tu solicitud de tipo de trabajo ha recibido un comentario.",
+                        verb_fr="Votre demande de type de travail a reçu un commentaire.",
+                        redirect=reverse("work-type-request-view")
+                        + f"?id={work_type.id}",
+                        icon="chatbox-ellipses",
+                    )
+            return render(
+                request,
+                "work_type_request/htmx/work_type_comment.html",
+                {
+                    "comments": comments,
+                    "no_comments": no_comments,
+                    "request_id": worktype_id,
+                    "work_type_request": work_type,
+                },
+            )
+    return render(
+        request,
+        "work_type_request/htmx/work_type_comment.html",
+        {"form": form, "request_id": worktype_id, "work_type_request": work_type},
+    )
+
+
+@login_required
+@hx_request_required
+def delete_worktyperequest_comment(request, comment_id):
+    """
+    This method is used to delete Work type request comments
+    """
+    script = ""
+    comment = WorkTypeRequestComment.find(comment_id)
+    request_id = comment.request_id.id
+    if (
+        request.user.employee_get == comment.employee_id
+        or request.user.has_perm("base.delete_baserequestfile")
+        or is_reportingmanager(request)
+    ):
+        comment.delete()
+        messages.success(request, _("Comment deleted successfully!"))
+    else:
+        messages.warning(request, _("You don't have permission"))
+        script = f"""<span hx-get="/view-work-type-comment/{request_id}/" hx-trigger="load" hx-target="#commentContainer" data-target="#activitySidebar"></span>"""
+    return HttpResponse(script)
+
+
+@login_required
+def pagination_settings_view(request):
+    if DynamicPagination.objects.filter(user_id=request.user).exists():
+        pagination = DynamicPagination.objects.filter(user_id=request.user).first()
+        pagination_form = DynamicPaginationForm(instance=pagination)
+        if request.method == "POST":
+            pagination_form = DynamicPaginationForm(request.POST, instance=pagination)
+            if pagination_form.is_valid():
+                pagination_form.save()
+                messages.success(request, _("Default pagination updated."))
+    else:
+        pagination_form = DynamicPaginationForm()
+        if request.method == "POST":
+            pagination_form = DynamicPaginationForm(
+                request.POST,
+            )
+            if pagination_form.is_valid():
+                pagination_form.save()
+                messages.success(request, _("Default pagination updated."))
+    return HttpResponseRedirect(request.META.get("HTTP_REFERER", "/"))
+
+
+@login_required
+@permission_required("employee.view_actiontype")
+def action_type_view(request):
+    """
+    This method is used to show Action Type
+    """
+    action_types = Actiontype.objects.all()
+    return render(
+        request, "base/action_type/action_type.html", {"action_types": action_types}
+    )
+
+
+@login_required
+@hx_request_required
+@permission_required("employee.add_actiontype")
+def action_type_create(request):
+    """
+    This method renders form and template to create Action Type
+    """
+    form = ActiontypeForm()
+    previous_data = request.GET.urlencode()
+    dynamic = request.GET.get("dynamic")
+    if request.method == "POST":
+        form = ActiontypeForm(request.POST)
+        if form.is_valid():
+            form.save()
+            form = ActiontypeForm()
+            messages.success(request, _("Action has been created successfully!"))
+            if dynamic != "None":
+                url = reverse("create-actions")
+                instance = Actiontype.objects.all().order_by("-id").first()
+                mutable_get = request.GET.copy()
+                mutable_get["action"] = str(instance.id)
+                return redirect(f"{url}?{mutable_get.urlencode()}")
+
+    return render(
+        request,
+        "base/action_type/action_type_form.html",
+        {
+            "form": form,
+            "pd": previous_data,
+        },
+    )
+
+
+@login_required
+@hx_request_required
+@permission_required("employee.change_actiontype")
+def action_type_update(request, act_id):
+    """
+    This method renders form and template to update Action type
+    """
+    action = Actiontype.objects.get(id=act_id)
+    form = ActiontypeForm(instance=action)
+
+    if action.action_type == "warning":
+        if (
+            AccountBlockUnblock.objects.first()
+            and AccountBlockUnblock.objects.first().is_enabled
+        ):
+            form.fields["block_option"].widget = forms.HiddenInput()
+
+    if request.method == "POST":
+        form = ActiontypeForm(request.POST, instance=action)
+        if form.is_valid():
+            act_type = form.cleaned_data["action_type"]
+            if act_type == "warning":
+                form.instance.block_option = False
+            form.save()
+            form = ActiontypeForm()
+            messages.success(request, _("Action has been updated successfully!"))
+    return render(
+        request,
+        "base/action_type/action_type_form.html",
+        {"form": form, "act_id": act_id},
+    )
+
+
+@login_required
+@hx_request_required
+@permission_required("employee.delete_actiontype")
+def action_type_delete(request, act_id):
+    """
+    This method is used to delete the action type.
+    """
+    if DisciplinaryAction.objects.filter(action=act_id).exists():
+
+        messages.error(
+            request,
+            _(
+                "This action type is in use in disciplinary actions and cannot be deleted."
+            ),
+        )
+        return HttpResponse("<script>window.location.reload()</script>")
+
+    else:
+        Actiontype.objects.filter(id=act_id).delete()
+        messages.success(request, _("Action has been deleted successfully!"))
+        return HttpResponse()
+
+
+@login_required
+def driver_viewed_status(request):
+    """
+    This method is used to update driver viewed status
+    """
+    form = DriverForm(request.GET)
+    if form.is_valid():
+        form.save()
+    return HttpResponse("")
+
+
+@login_required
+def employee_charts(request):
+    """
+    This function is used to create personalized dashboard charts for employees
+    """
+    employee_charts = DashboardEmployeeCharts.objects.get_or_create(
+        employee=request.user.employee_get
+    )[0]
+    charts = employee_charts.charts or []
+    chart_id = request.GET.get("chart_id")
+    if chart_id and chart_id not in charts:
+        charts.append(chart_id)
+        employee_charts.charts = charts
+        employee_charts.save()
+    return HttpResponse("")
+
+
+def check_chart_permission(request, charts):
+    """
+    This function is used to check the permissions for the charts
+    Args:
+        charts: dashboard charts
+    """
+    from base.templatetags.basefilters import is_reportingmanager
+
+    if apps.is_installed("recruitment"):
+        from recruitment.templatetags.recruitmentfilters import is_stagemanager
+
+        need_stage_manager = [
+            "hired_candidates",
+            "onboarding_candidates",
+            "recruitment_analytics",
+        ]
+    chart_apps = {
+        "offline_employees": "attendance",
+        "online_employees": "attendance",
+        "overall_leave_chart": "leave",
+        "hired_candidates": "recruitment",
+        "onboarding_candidates": "onboarding",
+        "recruitment_analytics": "recruitment",
+        "attendance_analytic": "attendance",
+        "hours_chart": "attendance",
+        "objective_status": "pms",
+        "key_result_status": "pms",
+        "feedback_status": "pms",
+        "shift_request_approve": "base",
+        "work_type_request_approve": "base",
+        "overtime_approve": "attendance",
+        "attendance_validate": "attendance",
+        "leave_request_approve": "leave",
+        "leave_allocation_approve": "leave",
+        "asset_request_approve": "asset",
+        "employees_chart": "employee",
+        "gender_chart": "employee",
+        "department_chart": "base",
+    }
+    permissions = {
+        "offline_employees": "employee.view_employee",
+        "online_employees": "employee.view_employee",
+        "overall_leave_chart": "leave.view_leaverequest",
+        "hired_candidates": "recruitment.view_candidate",
+        "onboarding_candidates": "recruitment.view_candidate",
+        "recruitment_analytics": "recruitment.view_recruitment",
+        "attendance_analytic": "attendance.view_attendance",
+        "hours_chart": "attendance.view_attendance",
+        "objective_status": "pms.view_employeeobjective",
+        "key_result_status": "pms.view_employeekeyresult",
+        "feedback_status": "pms.view_feedback",
+        "shift_request_approve": "base.change_shiftrequest",
+        "work_type_request_approve": "base.change_worktyperequest",
+        "overtime_approve": "attendance.change_attendance",
+        "attendance_validate": "attendance.change_attendance",
+        "leave_request_approve": "leave.change_leaverequest",
+        "leave_allocation_approve": "leave.change_leaveallocationrequest",
+        "asset_request_approve": "asset.change_assetrequest",
+    }
+    chart_list = []
+    need_reporting_manager = [
+        "offline_employees",
+        "online_employees",
+        "attendance_analytic",
+        "hours_chart",
+        "objective_status",
+        "key_result_status",
+        "feedback_status",
+        "shift_request_approve",
+        "work_type_request_approve",
+        "overtime_approve",
+        "attendance_validate",
+        "leave_request_approve",
+        "leave_allocation_approve",
+        "asset_request_approve",
+    ]
+    for chart in charts:
+        if apps.is_installed(chart_apps.get(chart[0])):
+            if (
+                chart[0] in permissions.keys()
+                or chart[0] in need_reporting_manager
+                or (apps.is_installed("recruitment") and chart[0] in need_stage_manager)
+            ):
+                if request.user.has_perm(permissions[chart[0]]):
+                    chart_list.append(chart)
+                elif chart[0] in need_reporting_manager:
+                    if is_reportingmanager(request.user):
+                        chart_list.append(chart)
+                elif (
+                    apps.is_installed("recruitment") and chart[0] in need_stage_manager
+                ):
+                    if is_stagemanager(request.user):
+                        chart_list.append(chart)
+            else:
+                chart_list.append(chart)
+
+    return chart_list
+
+
+@login_required
+def employee_chart_show(request):
+    """
+    This function is used to choose which chart to show in the dashboard
+    """
+    employee_charts = DashboardEmployeeCharts.objects.get_or_create(
+        employee=request.user.employee_get
+    )[0]
+    charts = [
+        ("offline_employees", _("Offline Employees")),
+        ("online_employees", _("Online Employees")),
+        ("overall_leave_chart", _("Overall Leave Chart")),
+        ("hired_candidates", _("Hired Candidates")),
+        ("onboarding_candidates", _("Onboarding Candidates")),
+        ("recruitment_analytics", _("Recruitment Analytics")),
+        ("attendance_analytic", _("Attendance analytics")),
+        ("hours_chart", _("Hours Chart")),
+        ("employees_chart", _("Employees Chart")),
+        ("department_chart", _("Department Chart")),
+        ("gender_chart", _("Gender Chart")),
+        ("objective_status", _("Objective Status")),
+        ("key_result_status", _("Key Result Status")),
+        ("feedback_status", _("Feedback Status")),
+        ("shift_request_approve", _("Shift Request to Approve")),
+        ("work_type_request_approve", _("Work Type Request to Approve")),
+        ("overtime_approve", _("Overtime to Approve")),
+        ("attendance_validate", _("Attendance to Validate")),
+        ("leave_request_approve", _("Leave Request to Approve")),
+        ("leave_allocation_approve", _("Leave Allocation to Approve")),
+        ("feedback_answer", _("Feedbacks to Answer")),
+        ("asset_request_approve", _("Asset Request to Approve")),
+    ]
+    charts = check_chart_permission(request, charts)
+
+    if request.method == "POST":
+        employee_charts.charts = []
+        employee_charts.save()
+        data = request.POST
+        for chart in charts:
+            if chart[0] not in data.keys() and chart[0] not in employee_charts.charts:
+                employee_charts.charts.append(chart[0])
+            elif chart[0] in data.keys() and chart[0] in employee_charts.charts:
+                employee_charts.charts.remove(chart[0])
+            else:
+                pass
+
+        employee_charts.save()
+        return HttpResponse("<script>window.location.reload();</script>")
+    context = {"dashboard_charts": charts, "employee_chart": employee_charts.charts}
+    return render(request, "dashboard_chart_form.html", context)
+
+
+@login_required
+@permission_required("base.view_biometricattendance")
+def enable_biometric_attendance_view(request):
+    biometric = BiometricAttendance.objects.first()
+    return render(
+        request,
+        "base/install_biometric_attendance.html",
+        {"biometric": biometric},
+    )
+
+
+@login_required
+@permission_required("base.add_biometricattendance")
+def activate_biometric_attendance(request):
+    if request.method == "GET":
+        is_installed = request.GET.get("is_installed")
+        instance = BiometricAttendance.objects.first()
+        if not instance:
+            instance = BiometricAttendance.objects.create()
+        if is_installed == "true":
+            instance.is_installed = True
+            messages.success(
+                request,
+                _("The biometric attendance feature has been activated successfully."),
+            )
+        else:
+            instance.is_installed = False
+            messages.info(
+                request,
+                _(
+                    "The biometric attendance feature has been deactivated successfully."
+                ),
+            )
+        instance.save()
+    return JsonResponse({"message": "Success"})
+
+
+@login_required
+def get_horilla_installed_apps(request):
+    installed_apps = settings.INSTALLED_APPS
+    return JsonResponse({"installed_apps": installed_apps})
+
+
+def generate_error_report(error_list, error_data, file_name):
+    for item in error_list:
+        for key, value in error_data.items():
+            if key in item:
+                value.append(item[key])
+            else:
+                value.append(None)
+
+    keys_to_remove = [
+        key for key, value in error_data.items() if all(v is None for v in value)
+    ]
+    for key in keys_to_remove:
+        del error_data[key]
+
+    data_frame = pd.DataFrame(error_data, columns=error_data.keys())
+    styled_data_frame = data_frame.style.applymap(
+        lambda x: "text-align: center", subset=pd.IndexSlice[:, :]
+    )
+
+    response = HttpResponse(content_type="application/ms-excel")
+    response["Content-Disposition"] = f'attachment; filename="{file_name}"'
+    writer = pd.ExcelWriter(response, engine="xlsxwriter")
+    styled_data_frame.to_excel(writer, index=False, sheet_name="Sheet1")
+
+    worksheet = writer.sheets["Sheet1"]
+    worksheet.set_column("A:Z", 30)
+    writer.close()
+
+    def get_error_sheet(request):
+        remove_dynamic_url(path_info)
+        return response
+
+    from base.urls import path, urlpatterns
+
+    # Create a unique path for the error file download
+    path_info = f"error-sheet-{uuid.uuid4()}"
+    urlpatterns.append(path(path_info, get_error_sheet, name=path_info))
+    DYNAMIC_URL_PATTERNS.append(path_info)
+
+    return path_info
+
+
+@login_required
+@hx_request_required
+def get_upcoming_holidays(request):
+    """
+    Retrieve and display a list of upcoming holidays for the current month and year.
+    """
+    today = localdate()  # This accounts for timezone-aware dates
+    current_month = today.month
+    current_year = today.year
+    holidays = Holidays.objects.filter(
+        Q(start_date__month=current_month, start_date__year=current_year)
+        & Q(start_date__gte=today)
+    )
+    colors = generate_colors(len(holidays))
+    for i, holiday in enumerate(holidays):
+        holiday.background_color = colors[i]
+    return render(request, "holiday/upcoming_holidays.html", {"holidays": holidays})
+
+
+@login_required
+@hx_request_required
+@permission_required("base.add_holidays")
+def holiday_creation(request):
+    """
+    function used to create holidays.
+
+    Parameters:
+    request (HttpRequest): The HTTP request object.
+
+    Returns:
+    GET : return holiday creation form template
+    POST : return holiday view template
+    """
+
+    previous_data = request.GET.urlencode()
+    form = HolidayForm()
+    if request.method == "POST":
+        form = HolidayForm(request.POST)
+        if form.is_valid():
+            form.save()
+            form = HolidayForm()
+            messages.success(request, _("New holiday created successfully.."))
+            if Holidays.objects.filter().count() == 1:
+                return HttpResponse("<script>window.location.reload();</script>")
+    return render(
+        request, "holiday/holiday_form.html", {"form": form, "pd": previous_data}
+    )
+
+
+def holidays_excel_template(request):
+    try:
+        columns = [
+            "Holiday Name",
+            "Start Date",
+            "End Date",
+            "Recurring",
+        ]
+        data_frame = pd.DataFrame(columns=columns)
+        response = HttpResponse(content_type="application/ms-excel")
+        response["Content-Disposition"] = (
+            'attachment; filename="assign_leave_type_excel.xlsx"'
+        )
+        data_frame.to_excel(response, index=False)
+        return response
+    except Exception as exception:
+        return HttpResponse(exception)
+
+
+def csv_holiday_import(file):
+    """
+    Imports holiday data from a CSV file.
+
+    This function reads a CSV file containing holiday information, validates the data,
+    and saves valid holiday records to the database using bulk creation for efficiency.
+
+    The expected format for the CSV file is:
+    - "Holiday Name": Name of the holiday (string)
+    - "Start Date": Start date of the holiday (date string in a recognized format)
+    - "End Date": End date of the holiday (date string in a recognized format)
+    - "Recurring": Indicates whether the holiday recurs ("yes" or "no")
+    """
+    holiday_list, error_list = [], []
+    file_name = FILE_STORAGE.save("holiday_import.csv", ContentFile(file.read()))
+    holiday_file = FILE_STORAGE.path(file_name)
+
+    with open(holiday_file, errors="ignore") as csv_file:
+        save = True
+        reader = csv.reader(csv_file)
+        next(reader)
+
+        for total_rows, row in enumerate(reader, start=1):
+            try:
+                name, start_date, end_date, recurring = row
+                holiday_dict = {
+                    "Holiday Name": name,
+                    "Start Date": start_date,
+                    "End Date": end_date,
+                    "Recurring": recurring,
+                }
+
+                try:
+                    start_date = format_date(start_date)
+                except:
+                    save = False
+                    holiday_dict["Start Date Error"] = _("Invalid start date format.")
+                    error_list.append(holiday_dict)
+
+                try:
+                    end_date = format_date(end_date)
+                except:
+                    save = False
+                    holiday_dict["End Date Error"] = _("Invalid end date format.")
+                    error_list.append(holiday_dict)
+
+                if recurring.lower() not in ["yes", "no"]:
+                    save = False
+                    holiday_dict["Recurring Field Error"] = _(
+                        "Recurring must be yes or no."
+                    )
+                    error_list.append(holiday_dict)
+
+                if save:
+                    holiday_list.append(
+                        Holidays(
+                            name=name,
+                            start_date=start_date,
+                            end_date=end_date,
+                            recurring=recurring.lower() == "yes",
+                        )
+                    )
+
+            except Exception as e:
+                holiday_dict["Other Errors"] = str(e)
+                error_list.append(holiday_dict)
+
+    if holiday_list:
+        Holidays.objects.bulk_create(holiday_list)
+
+    if os.path.exists(holiday_file):
+        os.remove(holiday_file)
+
+    return (error_list, total_rows)
+
+
+def excel_holiday_import(file):
+    """
+    Imports holiday data from an Excel file.
+
+    This function reads an Excel file containing holiday information, validates the data,
+    and saves valid holiday records to the database using bulk creation for efficiency
+
+    The expected format for the Excel file is:
+    - "Holiday Name": Name of the holiday (string)
+    - "Start Date": Start date of the holiday (date string in a recognized format)
+    - "End Date": End date of the holiday (date string in a recognized format)
+    - "Recurring": Indicates whether the holiday recurs ("yes" or "no")
+
+    """
+    error_list = []
+    valid_holidays = []
+    data_frame = pd.read_excel(file)
+    holiday_dicts = data_frame.to_dict("records")
+
+    for holiday in holiday_dicts:
+        save = True
+        try:
+            name = holiday["Holiday Name"]
+
+            try:
+                start_date = pd.to_datetime(holiday["Start Date"]).date()
+            except Exception:
+                save = False
+                holiday["Start Date Error"] = _("Invalid start date format {}").format(
+                    holiday["Start Date"]
+                )
+
+            try:
+                end_date = pd.to_datetime(holiday["End Date"]).date()
+            except Exception:
+                save = False
+                holiday["End Date Error"] = _("Invalid end date format {}").format(
+                    holiday["End Date"]
+                )
+
+            recurring_str = holiday.get("Recurring", "").lower()
+            if recurring_str in ["yes", "no"]:
+                recurring = recurring_str == "yes"
+            else:
+                save = False
+                holiday["Recurring Field Error"] = _(
+                    "Recurring must be {} or {}"
+                ).format("yes", "no")
+
+            if save:
+                holiday_instance = Holidays(
+                    name=name,
+                    start_date=start_date,
+                    end_date=end_date,
+                    recurring=recurring,
+                )
+                valid_holidays.append(holiday_instance)
+            else:
+                error_list.append(holiday)
+
+        except Exception as e:
+            holiday["Other errors"] = str(e)
+            error_list.append(holiday)
+
+    if valid_holidays:
+        Holidays.objects.bulk_create(valid_holidays)
+
+    return error_list, len(holiday_dicts)
+
+
+@login_required
+@permission_required("base.add_holiday")
+def holidays_info_import(request):
+    result = None
+    file_name = "HolidaysImportError.xlsx"
+    path_info = None
+    error_data = {
+        "Holiday Name": [],
+        "Start Date": [],
+        "End Date": [],
+        "Recurring": [],
+        "Start Date Error": [],
+        "End Date Error": [],
+        "Recurring Field Error": [],
+        "Other Errors": [],
+    }
+
+    if request.method == "POST":
+        file = request.FILES.get("holidays_import")
+        if file:
+            content_type = file.content_type
+            if content_type == "text/csv":
+                error_list, total_count = csv_holiday_import(file)
+                if error_list:
+                    path_info = generate_error_report(error_list, error_data, file_name)
+            elif (
+                content_type
+                == "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
+            ):
+                error_list, total_count = excel_holiday_import(file)
+                if error_list:
+                    path_info = generate_error_report(error_list, error_data, file_name)
+            else:
+                messages.error(
+                    request, _("The file you attempted to import is unsupported")
+                )
+                return HttpResponse("<script>window.location.reload()</script>")
+
+            created_holidays_count = total_count - len(error_list)
+            context = {
+                "created_count": created_holidays_count,
+                "error_count": len(error_list),
+                "model": _("Holidays"),
+                "path_info": path_info,
+            }
+            result = render_to_string("import_popup.html", context)
+
+    return HttpResponse(result)
+
+
+@login_required
+def holiday_info_export(request):
+    if request.META.get("HTTP_HX_REQUEST"):
+        export_filter = HolidayFilter()
+        export_column = HolidaysColumnExportForm()
+        content = {
+            "export_filter": export_filter,
+            "export_column": export_column,
+        }
+        return render(
+            request, "holiday/holiday_export_filter_form.html", context=content
+        )
+    return export_data(
+        request=request,
+        model=Holidays,
+        filter_class=HolidayFilter,
+        form_class=HolidaysColumnExportForm,
+        file_name="Holidays_export",
+    )
+
+
+@login_required
+def holiday_view(request):
+    """
+    function used to view holidays.
+
+    Parameters:
+    request (HttpRequest): The HTTP request object.
+
+    Returns:
+    GET : return holiday view  template
+    """
+    queryset = Holidays.objects.all()[::-1]
+    previous_data = request.GET.urlencode()
+    page_number = request.GET.get("page")
+    page_obj = paginator_qry(queryset, page_number)
+    holiday_filter = HolidayFilter()
+
+    return render(
+        request,
+        "holiday/holiday_view.html",
+        {
+            "holidays": page_obj,
+            "form": holiday_filter.form,
+            "pd": previous_data,
+        },
+    )
+
+
+@login_required
+@hx_request_required
+def holiday_filter(request):
+    """
+    function used to filter holidays.
+
+    Parameters:
+    request (HttpRequest): The HTTP request object.
+
+    Returns:
+    GET : return holiday view template
+    """
+    queryset = Holidays.objects.all()
+    previous_data = request.GET.urlencode()
+    holiday_filter = HolidayFilter(request.GET, queryset).qs
+    if request.GET.get("sortby"):
+        holiday_filter = sortby(request, holiday_filter, "sortby")
+    page_number = request.GET.get("page")
+    page_obj = paginator_qry(holiday_filter[::-1], page_number)
+    data_dict = parse_qs(previous_data)
+    get_key_instances(Holidays, data_dict)
+    return render(
+        request,
+        "holiday/holiday.html",
+        {"holidays": page_obj, "pd": previous_data, "filter_dict": data_dict},
+    )
+
+
+@login_required
+@hx_request_required
+@permission_required("base.change_holidays")
+def holiday_update(request, obj_id):
+    """
+    function used to update holiday.
+
+    Parameters:
+    request (HttpRequest): The HTTP request object.
+    id : holiday id
+
+    Returns:
+    GET : return holiday update form template
+    POST : return holiday view template
+    """
+    query_string = request.GET.urlencode()
+    if query_string.startswith("pd="):
+        previous_data = unquote(query_string[len("pd=") :])
+    else:
+        previous_data = unquote(query_string)
+    holiday = Holidays.objects.get(id=obj_id)
+    form = HolidayForm(instance=holiday)
+    if request.method == "POST":
+        form = HolidayForm(request.POST, instance=holiday)
+        if form.is_valid():
+            form.save()
+            messages.success(request, _("Holidays updated successfully.."))
+    return render(
+        request,
+        "holiday/holiday_update_form.html",
+        {"form": form, "id": obj_id, "pd": previous_data},
+    )
+
+
+@login_required
+@hx_request_required
+@permission_required("base.delete_holidays")
+def holiday_delete(request, obj_id):
+    """
+    function used to delete holiday.
+
+    Parameters:
+    request (HttpRequest): The HTTP request object.
+    id : holiday id
+
+    Returns:
+    GET : return holiday view template
+    """
+    query_string = request.GET.urlencode()
+    try:
+        Holidays.objects.get(id=obj_id).delete()
+        messages.success(request, _("Holidays deleted successfully.."))
+    except Holidays.DoesNotExist:
+        messages.error(request, _("Holidays not found."))
+    except ProtectedError:
+        messages.error(request, _("Related entries exists"))
+    if not Holidays.objects.filter():
+        return HttpResponse("<script>window.location.reload();</script>")
+    return redirect(f"/holiday-filter?{query_string}")
+
+
+@login_required
+@require_http_methods(["POST"])
+@permission_required("base.delete_holiday")
+def bulk_holiday_delete(request):
+    """
+    Deletes multiple holidays based on IDs passed in the POST request.
+    """
+    ids = request.POST.getlist("ids")
+    deleted_count = Holidays.objects.filter(id__in=ids).delete()[0]
+    messages.success(
+        request, _("{} Holidays have been successfully deleted.".format(deleted_count))
+    )
+    return redirect("holiday-filter")
+
+
+@login_required
+def holiday_select(request):
+    page_number = request.GET.get("page")
+
+    if page_number == "all":
+        employees = Holidays.objects.all()
+
+    employee_ids = [str(emp.id) for emp in employees]
+    total_count = employees.count()
+
+    context = {"employee_ids": employee_ids, "total_count": total_count}
+
+    return JsonResponse(context, safe=False)
+
+
+@login_required
+def holiday_select_filter(request):
+    page_number = request.GET.get("page")
+    filtered = request.GET.get("filter")
+    filters = json.loads(filtered) if filtered else {}
+
+    if page_number == "all":
+        employee_filter = HolidayFilter(filters, queryset=Holidays.objects.all())
+
+        # Get the filtered queryset
+        filtered_employees = employee_filter.qs
+
+        employee_ids = [str(emp.id) for emp in filtered_employees]
+        total_count = filtered_employees.count()
+
+        context = {"employee_ids": employee_ids, "total_count": total_count}
+
+        return JsonResponse(context)
+
+
+@login_required
+@hx_request_required
+@permission_required("base.add_companyleaves")
+def company_leave_creation(request):
+    """
+    function used to create company leave.
+
+    Parameters:
+    request (HttpRequest): The HTTP request object.
+
+    Returns:
+    GET : return company leave creation form template
+    POST : return company leave view template
+    """
+    form = CompanyLeaveForm()
+    if request.method == "POST":
+        form = CompanyLeaveForm(request.POST)
+        if form.is_valid():
+            form.save()
+            messages.success(request, _("New company leave created successfully.."))
+            if CompanyLeaves.objects.filter().count() == 1:
+                return HttpResponse("<script>window.location.reload();</script>")
+    return render(
+        request, "company_leave/company_leave_creation_form.html", {"form": form}
+    )
+
+
+@login_required
+def company_leave_view(request):
+    """
+    function used to view company leave.
+
+    Parameters:
+    request (HttpRequest): The HTTP request object.
+
+    Returns:
+    GET : return company leave view template
+    """
+    queryset = CompanyLeaves.objects.all()
+    previous_data = request.GET.urlencode()
+    page_number = request.GET.get("page")
+    page_obj = paginator_qry(queryset, page_number)
+    company_leave_filter = CompanyLeaveFilter()
+    return render(
+        request,
+        "company_leave/company_leave_view.html",
+        {
+            "company_leaves": page_obj,
+            "weeks": WEEKS,
+            "week_days": WEEK_DAYS,
+            "form": company_leave_filter.form,
+            "pd": previous_data,
+        },
+    )
+
+
+@login_required
+@hx_request_required
+def company_leave_filter(request):
+    """
+    function used to filter company leave.
+
+    Parameters:
+    request (HttpRequest): The HTTP request object.
+
+    Returns:
+    GET : return company leave view template
+    """
+    queryset = CompanyLeaves.objects.all()
+    previous_data = request.GET.urlencode()
+    page_number = request.GET.get("page")
+    company_leave_filter = CompanyLeaveFilter(request.GET, queryset).qs
+    page_obj = paginator_qry(company_leave_filter, page_number)
+    data_dict = parse_qs(previous_data)
+    get_key_instances(CompanyLeaves, data_dict)
+
+    return render(
+        request,
+        "company_leave/company_leave.html",
+        {
+            "company_leaves": page_obj,
+            "weeks": WEEKS,
+            "week_days": WEEK_DAYS,
+            "pd": previous_data,
+            "filter_dict": data_dict,
+        },
+    )
+
+
+@login_required
+@hx_request_required
+@permission_required("base.change_companyleaves")
+def company_leave_update(request, id):
+    """
+    function used to update company leave.
+
+    Parameters:
+    request (HttpRequest): The HTTP request object.
+    id : company leave id
+
+    Returns:
+    GET : return company leave update form template
+    POST : return company leave view template
+    """
+    company_leave = CompanyLeaves.objects.get(id=id)
+    form = CompanyLeaveForm(instance=company_leave)
+    if request.method == "POST":
+        form = CompanyLeaveForm(request.POST, instance=company_leave)
+        if form.is_valid():
+            form.save()
+            messages.success(request, _("Company leave updated successfully.."))
+    return render(
+        request,
+        "company_leave/company_leave_update_form.html",
+        {"form": form, "id": id},
+    )
+
+
+@login_required
+@hx_request_required
+@permission_required("base.delete_companyleaves")
+def company_leave_delete(request, id):
+    """
+    function used to create company leave.
+
+    Parameters:
+    request (HttpRequest): The HTTP request object.
+
+    Returns:
+    GET : return company leave creation form template
+    POST : return company leave view template
+    """
+    query_string = request.GET.urlencode()
+    try:
+        CompanyLeaves.objects.get(id=id).delete()
+        messages.success(request, _("Company leave deleted successfully.."))
+    except CompanyLeaves.DoesNotExist:
+        messages.error(request, _("Company leave not found."))
+    except ProtectedError:
+        messages.error(request, _("Related entries exists"))
+    if not CompanyLeaves.objects.filter():
+        return HttpResponse("<script>window.location.reload();</script>")
+    return redirect(f"/company-leave-filter?{query_string}")
+
+
+@login_required
+@hx_request_required
+def view_penalties(request):
+    """
+    This method is used to filter or view the penalties
+    """
+    records = PenaltyFilter(request.GET).qs
+    return render(request, "penalty/penalty_view.html", {"records": records})
diff --git a/base/views.py b/base/views.py
index aff4a1dbc..2fbe4ddee 100644
--- a/base/views.py
+++ b/base/views.py
@@ -24,9 +24,11 @@ from django.contrib import messages
 from django.contrib.auth import authenticate, login, logout
 from django.contrib.auth.models import Group, Permission, User
 from django.contrib.auth.views import PasswordResetConfirmView, PasswordResetView
+from django.core.exceptions import ValidationError
 from django.core.files.base import ContentFile
 from django.core.mail import EmailMessage, EmailMultiAlternatives, send_mail
 from django.core.management import call_command
+from django.core.validators import validate_ipv46_address
 from django.db.models import ProtectedError, Q
 from django.http import (
     FileResponse,
@@ -147,6 +149,7 @@ from base.models import (
     JobRole,
     MultipleApprovalCondition,
     MultipleApprovalManagers,
+    PenaltyAccounts,
     RotatingShift,
     RotatingWorkType,
     RotatingWorkTypeAssign,
@@ -1298,6 +1301,7 @@ def object_delete(request, obj_id, **kwargs):
     redirect_path = kwargs.get("redirect_path")
     delete_error = False
     try:
+        count = model.objects.count()
         instance = model.objects.get(id=obj_id)
         instance.delete()
         messages.success(
@@ -1327,18 +1331,16 @@ def object_delete(request, obj_id, **kwargs):
             return redirect(redirect_path)
         else:
             return HttpResponse("<script>window.location.reload()</script>")
-
     if redirect_path:
         previous_data = request.GET.urlencode()
         redirect_path = redirect_path + "?" + previous_data
         return redirect(redirect_path)
     elif kwargs.get("HttpResponse"):
-        if delete_error:
-            return_part = "<script>window.location.reload()</script>"
-        elif kwargs.get("HttpResponse") is True:
-            return_part = ""
-        else:
-            return_part = kwargs.get("HttpResponse")
+        return_part = (
+            "<script>$('.reload-record').click();</script>"
+            if delete_error or count == 1
+            else kwargs.get("HttpResponse")
+        )
         return HttpResponse(f"{return_part}")
     else:
         return HttpResponseRedirect(request.META.get("HTTP_REFERER", "/"))
@@ -1403,7 +1405,6 @@ def object_duplicate(request, obj_id, **kwargs):
 
 @login_required
 @hx_request_required
-@duplicate_permission()
 def add_remove_dynamic_fields(request, **kwargs):
     """
     Handles the dynamic addition and removal of form fields in a Django form.
@@ -1434,6 +1435,7 @@ def add_remove_dynamic_fields(request, **kwargs):
         field_name_pre = kwargs["field_name_pre"]
         field_type = kwargs.get("field_type")
         hx_target = request.META.get("HTTP_HX_TARGET")
+
         if hx_target:
             field_counts = int(hx_target.split("_")[-1]) + 1
             next_hx_target = f"{hx_target.rsplit('_', 1)[0]}_{field_counts}"
@@ -1455,7 +1457,7 @@ def add_remove_dynamic_fields(request, **kwargs):
                     queryset=model.objects.all(),
                     widget=forms.Select(
                         attrs={
-                            "class": "oh-select oh-select-2 mb-3",
+                            "class": "oh-select oh-select-2 mb-3 w-100",
                             "name": field_name,
                             "id": f"id_{field_name}",
                         }
@@ -1463,12 +1465,14 @@ def add_remove_dynamic_fields(request, **kwargs):
                     required=False,
                     empty_label=empty_label,
                 )
+
             context = {
                 "field_counts": field_counts,
                 "field_html": form[field_name].as_widget(),
                 "current_hx_target": hx_target,
                 "next_hx_target": next_hx_target,
             }
+
             field_html = render_to_string(template, context)
             return HttpResponse(field_html)
     return HttpResponse()
@@ -1574,7 +1578,6 @@ def mail_server_test_email(request):
                     msg.attach(msg_img)
 
                 msg.send()
-
             except Exception as e:
                 messages.error(request, " ".join([_("Something went wrong :"), str(e)]))
                 return HttpResponse("<script>window.location.reload()</script>")
@@ -2395,6 +2398,9 @@ def rotating_work_type_assign_redirect(request, obj_id=None, employee_id=None):
     request_copy.pop("instances_ids", None)
     previous_data = request_copy.urlencode()
     hx_target = request.META.get("HTTP_HX_TARGET", None)
+    hx_current_url = request.META.get("HTTP_HX_CURRENT_URL", None)
+    parsed_url = urlparse(hx_current_url)
+    hx_current_path = parsed_url.path.lstrip("/")
     if hx_target and hx_target == "view-container":
         return redirect(f"/rotating-work-type-assign-view?{previous_data}")
     elif hx_target and hx_target == "objectDetailsModalTarget":
@@ -2411,6 +2417,33 @@ def rotating_work_type_assign_redirect(request, obj_id=None, employee_id=None):
         return redirect(url + params)
     elif hx_target and hx_target == "shift_target" and employee_id:
         return redirect(f"/employee/shift-tab/{employee_id}")
+
+    elif hx_target and hx_target == "genericModalBody":
+        instances_ids = request.GET.get("instances_ids")
+        instances_list = json.loads(instances_ids)
+        if obj_id in instances_list:
+            instances_list.remove(obj_id)
+        previous_instance, next_instance = closest_numbers(
+            json.loads(instances_ids), obj_id
+        )
+
+        return redirect(
+            f"/work-rotating-detail-view/{next_instance}/?{previous_data}&instances_ids={instances_list}&deleted=True"
+        )
+
+    elif hx_target and hx_target == "rotating-work-container":
+        if hx_current_path == "employee/rotating-work-type-assign/":
+            rwork_type_requests = RotatingWorkTypeAssign.objects.all()
+            previous_data = request.GET.urlencode()
+            if rwork_type_requests.exists():
+                return redirect(f"/rotating-list-view?is_active=True&{previous_data}")
+            else:
+                return HttpResponse("<script>window.location.reload()</script>")
+        else:
+            return redirect(
+                f"/employee-rotating-work-tab-list/{employee_id}?deleted=True"
+            )
+
     elif hx_target:
         return HttpResponse("<script>window.location.reload()</script>")
     else:
@@ -2451,9 +2484,13 @@ def rotating_work_type_assign_bulk_archive(request):
     """
     This method is used to archive/un-archive bulk rotating work type assigns.
     """
-    ids = json.loads(request.POST["ids"])
-    is_active = request.POST.get("is_active") != "false"
-    message = _("un-archived") if is_active else _("archived")
+    ids = request.POST["ids"]
+    ids = json.loads(ids)
+    is_active = True
+    message = _("un-archived")
+    if request.GET.get("is_active") == "False":
+        is_active = False
+        message = _("archived")
     count = 0
 
     for id in ids:
@@ -2482,6 +2519,8 @@ def rotating_work_type_assign_bulk_archive(request):
             ),
         )
 
+        return JsonResponse({"message": "Success"})
+
     return rotating_work_type_assign_redirect(request)
 
 
@@ -3254,11 +3293,32 @@ def rotating_shift_assign_redirect(request, obj_id, employee_id):
         previous_instance, next_instance = closest_numbers(
             json.loads(instances_ids), obj_id
         )
-        url = f"/rshit-individual-view/{next_instance}/"
-        params = f"?{previous_data}&instances_ids={instances_list}"
-        return redirect(url + params)
+        return redirect(
+            f"/rshit-individual-view/{next_instance}/?{previous_data}\
+            &instances_ids={instances_list}"
+        )
+    elif hx_target and hx_target == "genericModalBody":
+        instances_ids = request.GET.get("instances_ids")
+        instances_list = json.loads(instances_ids)
+        if obj_id in instances_list:
+            instances_list.remove(obj_id)
+        previous_instance, next_instance = closest_numbers(
+            json.loads(instances_ids), obj_id
+        )
+        return redirect(
+            f"/rotating-shift-individual-detail-view/{next_instance}/?{previous_data}&instance_ids={instances_list}&detail=true"
+        )
     elif hx_target and hx_target == "shift_target" and employee_id:
         return redirect(f"/employee/shift-tab/{employee_id}")
+    elif hx_target and hx_target == "rotating-shift-container":
+        path = request.META.get("HTTP_HX_CURRENT_URL", None)
+        parsed_url = urlparse(path)
+        parsed_path = parsed_url.path.lstrip("/")
+        if parsed_path == "employee/rotating-shift-assign/":
+            return redirect(f"/rotating-shift-request-list/?is_active=true")
+        return redirect(
+            f"/rotating-shift-individual-tab-view/{employee_id}?deleted=true"
+        )
     elif hx_target:
         return HttpResponse("<script>window.location.reload()</script>")
     else:
@@ -3403,7 +3463,7 @@ def get_models_in_app(app_name):
 
 @login_required
 @manager_can_enter("auth.view_permission")
-def employee_permission_assign(request):
+def employee_permission_assign(request, pk=None):
     """
     This method is used to assign permissions to employee user
     """
@@ -4026,6 +4086,7 @@ def work_type_request_delete(request, obj_id):
         id : work type request instance id
 
     """
+
     try:
         work_type_request = WorkTypeRequest.objects.get(id=obj_id)
         employee = work_type_request.employee_id
@@ -4047,8 +4108,12 @@ def work_type_request_delete(request, obj_id):
         messages.error(request, _("Work type request not found."))
     except ProtectedError:
         messages.error(request, _("You cannot delete this work type request."))
+
     hx_target = request.META.get("HTTP_HX_TARGET", None)
-    if hx_target and hx_target == "objectDetailsModalTarget":
+    hx_current_url = request.META.get("HTTP_HX_CURRENT_URL", None)
+    parsed_url = urlparse(hx_current_url)
+    hx_current_path = parsed_url.path.lstrip("/")
+    if hx_target and hx_target == "genericModalBody":
         instances_ids = request.GET.get("instances_ids")
         instances_list = json.loads(instances_ids)
         if obj_id in instances_list:
@@ -4056,19 +4121,32 @@ def work_type_request_delete(request, obj_id):
         previous_instance, next_instance = closest_numbers(
             json.loads(instances_ids), obj_id
         )
-        return redirect(
-            f"/work-type-request-single-view/{next_instance}/?instances_ids={instances_list}"
-        )
-    elif hx_target and hx_target == "view-container":
         previous_data = request.GET.urlencode()
-        work_type_requests = WorkTypeRequest.objects.all()
-        if work_type_requests.exists():
-            return redirect(f"/work-type-request-search?{previous_data}")
+        return redirect(
+            f"/work-detail-view/{next_instance}/?{previous_data}&instance_ids={instances_list}&deleted=true"
+        )
+    # elif hx_target and hx_target == "listContainer":
+    #     previous_data = request.GET.urlencode()
+    #     work_type_requests = WorkTypeRequest.objects.all()
+    #     if work_type_requests.exists():
+    #         return redirect(f"/work-list-view?{previous_data}")
+    #     else:
+    #         return HttpResponse("<script>window.location.reload()</script>")
+
+    elif hx_target and hx_target == "work-shift":
+        if hx_current_path == "employee/work-type-request-view/":
+            work_type_requests = WorkTypeRequest.objects.all()
+            previous_data = request.GET.urlencode()
+            if work_type_requests.exists():
+                return redirect(f"/work-list-view?{previous_data}")
+            else:
+                return HttpResponse("<script>window.location.reload()</script>")
         else:
-            return HttpResponse("<script>window.location.reload()</script>")
+            return redirect(f"/employeeprofileview-Work Type & Shift/{employee.id}")
 
     elif hx_target and hx_target == "shift_target" and employee:
         return redirect(f"/employee/shift-tab/{employee.id}")
+
     else:
         return HttpResponse("<script>window.location.reload()</script>")
 
@@ -4112,12 +4190,13 @@ def work_type_request_bulk_delete(request):
     """
     ids = request.POST["ids"]
     ids = json.loads(ids)
+    del_ids = []
     for id in ids:
         try:
             work_type_request = WorkTypeRequest.objects.get(id=id)
             user = work_type_request.employee_id.employee_user_id
             work_type_request.delete()
-            messages.success(request, _("Work type request deleted."))
+            del_ids.append(work_type_request)
             notify.send(
                 request.user.employee_get,
                 recipient=user,
@@ -4142,6 +4221,7 @@ def work_type_request_bulk_delete(request):
                 ),
             )
         result = True
+    messages.success(request, _("{} work type requests deleted.".format(len(del_ids))))
     return JsonResponse({"result": result})
 
 
@@ -4995,6 +5075,7 @@ def shift_request_delete(request, id):
         id : shift request instance id
 
     """
+
     try:
         shift_request = ShiftRequest.find(id)
         user = shift_request.employee_id.employee_user_id
@@ -5018,8 +5099,29 @@ def shift_request_delete(request, id):
         messages.error(request, _("You cannot delete this shift request."))
 
     hx_target = request.META.get("HTTP_HX_TARGET", None)
-    if hx_target and hx_target == "shift_target" and shift_request.employee_id:
-        return redirect(f"/employee/shift-tab/{shift_request.employee_id.id}")
+    path = request.META.get("HTTP_HX_CURRENT_URL", None)
+    parsed_url = urlparse(path)
+    parsed_path = parsed_url.path.lstrip("/")
+    if hx_target and hx_target == "shift-container":
+        previous_data = request.GET.urlencode()
+        if parsed_path == "employee/shift-request-view/":
+            return redirect(f"/list-shift-request/?deleted=true")
+        else:
+            return redirect(
+                f"/shift-request-individual-tab-view/{shift_request.employee_id.id}?deleted=true"
+            )
+    if hx_target and hx_target == "genericModalBody":
+        previous_data = request.GET.urlencode()
+        instances_ids = request.GET.get("instances_ids")
+        instances_list = json.loads(instances_ids)
+        if id in instances_list:
+            instances_list.remove(id)
+            previous_instance, next_instance = closest_numbers(
+                json.loads(instances_ids), id
+            )
+        return redirect(
+            f"/shift-detail-view/{next_instance}/?{previous_data}&instance_ids={instances_list}&deleted=true"
+        )
     return HttpResponseRedirect(request.META.get("HTTP_REFERER", "/"))
 
 
@@ -5035,13 +5137,14 @@ def shift_request_bulk_delete(request):
     """
     ids = request.POST["ids"]
     ids = json.loads(ids)
+    del_ids = []
     result = False
     for id in ids:
         try:
             shift_request = ShiftRequest.objects.get(id=id)
             user = shift_request.employee_id.employee_user_id
             shift_request.delete()
-            messages.success(request, _("Shift request deleted."))
+            del_ids.append(shift_request)
             notify.send(
                 request.user.employee_get,
                 recipient=user,
@@ -5066,6 +5169,8 @@ def shift_request_bulk_delete(request):
                 ),
             )
         result = True
+
+    messages.success(request, _("{} shift requests deleted.".format(len(del_ids))))
     return JsonResponse({"result": result})
 
 
@@ -5946,7 +6051,6 @@ def add_more_approval_managers(request):
     field_html = render_to_string(
         "multi_approval_condition/add_more_approval_manager.html", context
     )
-
     return HttpResponse(field_html)
 
 
@@ -6029,6 +6133,23 @@ def edit_approval_managers(form, managers):
                 widget=forms.Select(attrs={"class": "oh-select oh-select-2 mb-3"}),
                 required=False,
             )
+
+            form.initial[field_name] = manager.employee_id
+    return form
+
+
+def approval_managers_edit(form, managers):
+    for i, manager in enumerate(managers):
+        if i == 0:
+            form.initial["multi_approval_manager"] = manager.employee_id
+        else:
+            field_name = f"multi_approval_manager_{i}"
+            form.fields[field_name] = forms.ModelChoiceField(
+                queryset=Employee.objects.all(),
+                label=_("Approval Manager {}").format(i),
+                widget=forms.Select(attrs={"class": "oh-select oh-select-2 mb-3"}),
+                required=False,
+            )
             form.initial[field_name] = manager.employee_id
     return form
 
@@ -6094,10 +6215,28 @@ def multiple_level_approval_edit(request, condition_id):
 @login_required
 @permission_required("base.delete_multipleapprovalcondition")
 def multiple_level_approval_delete(request, condition_id):
+
+    request_copy = request.GET.copy()
+    request_copy.pop("instances_ids", None)
+    previous_data = request_copy.urlencode()
+
     condition = MultipleApprovalCondition.objects.get(id=condition_id)
     condition.delete()
     messages.success(request, _("Multiple approval condition deleted successfully"))
-    return redirect(hx_multiple_approval_condition)
+    hx_target = request.META.get("HTTP_HX_TARGET")
+    if hx_target and hx_target == "genericModalBody":
+        instances_ids = request.GET.get("instances_ids")
+        instances_list = json.loads(instances_ids)
+        if condition_id in instances_list:
+            instances_list.remove(condition_id)
+            previous_instance, next_instance = closest_numbers(
+                json.loads(instances_ids), condition_id
+            )
+        return redirect(
+            f"/detail-view-multiple-approval-condition/{next_instance}/?{previous_data}&instance_ids={instances_list}&deleted=true"
+        )
+
+    return redirect(reverse("hx-multiple-approval-condition"))
 
 
 @login_required
@@ -7113,6 +7252,8 @@ def holidays_info_import(request):
         "Other Errors": [],
     }
 
+    # is_hx_request = request.headers.get('HX-Request') == 'true'
+
     if request.method == "POST":
         file = request.FILES.get("holidays_import")
         if file:
@@ -7489,6 +7630,17 @@ def view_penalties(request):
     return render(request, "penalty/penalty_view.html", {"records": records})
 
 
+@login_required
+@permission_required("base.delete_penaltyaccounts")
+def delete_penalities(request, penalty_id):
+    penalty = PenaltyAccounts.objects.get(id=penalty_id)
+    penalty.delete()
+    messages.success(request, _("Penalty deleted suucessfully"))
+    return HttpResponse(
+        "<script>$('.reload-record').click();$('#reloadMessagesButton').click();</script>"
+    )
+
+
 def protected_media(request, path):
     page_urls = [
         "/login",
diff --git a/base/widgets.py b/base/widgets.py
new file mode 100644
index 000000000..12fee0531
--- /dev/null
+++ b/base/widgets.py
@@ -0,0 +1,81 @@
+from django import forms
+from django.utils.safestring import mark_safe
+
+class CustomModelChoiceWidget(forms.Select):
+    """
+    A custom Django widget for rendering a select input with an optional delete button.
+
+    This widget extends the standard Select widget to include a delete button.
+    The URL for the delete action can be dynamically provided via the widget's
+    attributes or constructor.
+
+    Attributes:
+        delete_url (str): The URL to be used for the delete button's action.
+                        If not provided, the button will not be rendered.
+    """
+    def __init__(self, *args, **kwargs):
+        # Remove default delete_url
+        self.delete_url = None
+        if "delete_url" in kwargs:
+            self.delete_url = kwargs.pop("delete_url")
+        super().__init__(*args, **kwargs)
+
+    def render(self, name, value, attrs=None, renderer=None):
+        # Render the original widget
+        original_html = super().render(name, value, attrs, renderer)
+
+        # Get the delete_url from attributes if provided
+        delete_url = attrs.get("delete_url", self.delete_url)
+
+        # Create the custom HTML including the delete button
+        custom_html = f"""
+        <div class="pt-2" id="{name}">
+            <div class="oh-input__group" style="display: flex">
+                {original_html}
+                {f'<button hx-get="{delete_url}" class="oh-btn oh-btn--danger-outline oh-btn--light-bkg" hx-target="#{name}" hx-swap="outerHTML" id="delete-link"><ion-icon name="trash-outline"></ion-icon></button>' if delete_url else ''}
+            </div>
+        </div>
+        """
+        return mark_safe(custom_html)
+    
+
+    from django import forms
+from django.utils.safestring import mark_safe
+
+class CustomTextInputWidget(forms.TextInput):
+    """
+    A custom Django widget for rendering a text input with an optional delete button.
+
+    This widget extends the standard TextInput widget to include a delete button.
+    The URL for the delete action can be dynamically provided via the widget's
+    attributes or constructor.
+
+    Attributes:
+        delete_url (str): The URL to be used for the delete button's action.
+                        If not provided, the button will not be rendered.
+    """
+    def __init__(self, *args, **kwargs):
+        # Remove default delete_url
+        self.delete_url = None
+        if "delete_url" in kwargs:
+            self.delete_url = kwargs.pop("delete_url")
+        super().__init__(*args, **kwargs)
+
+    def render(self, name, value, attrs=None, renderer=None):
+        # Render the original text input widget
+        original_html = super().render(name, value, attrs, renderer)
+
+        # Get the delete_url from attributes if provided
+        delete_url = attrs.get("delete_url", self.delete_url)
+
+        # Create the custom HTML including the delete button
+        custom_html = f"""
+        <div class="pt-2" id="{name}">
+            <div class="oh-input__group" style="display: flex">
+                {original_html}
+                {f'<button hx-get="{delete_url}" class="oh-btn oh-btn--danger-outline oh-btn--light-bkg" hx-target="#{name}" hx-swap="outerHTML" id="delete-link"><ion-icon name="trash-outline"></ion-icon></button>' if delete_url else ''}
+            </div>
+        </div>
+        """
+        return mark_safe(custom_html)
+
diff --git a/base/work_type_decorators.py b/base/work_type_decorators.py
new file mode 100644
index 000000000..e82e2e05d
--- /dev/null
+++ b/base/work_type_decorators.py
@@ -0,0 +1,53 @@
+"""
+decorator functions for base
+"""
+
+from django.http import HttpResponse
+from django.shortcuts import render
+from django.contrib import messages
+from base.models import MultipleApprovalManagers
+from employee.models import EmployeeWorkInformation
+
+decorator_with_arguments = (
+    lambda decorator: lambda *args, **kwargs: lambda func: decorator(
+        func, *args, **kwargs
+    )
+)
+
+
+@decorator_with_arguments
+def report_manager_can_enter(function, perm):
+    """
+    This method is used to check permission to employee for enter to the function if the employee
+    do not have permission also checks, has reporting manager.
+    """
+
+    def _function(request, *args, **kwargs):
+        leave_perm = [
+            "leave.view_leaverequest",
+            "leave.change_leaverequest",
+            "leave.delete_leaverequest",
+        ]
+        user = request.user
+        employee = user.employee_get
+        if perm in leave_perm:
+            is_approval_manager = MultipleApprovalManagers.objects.filter(
+                employee_id=employee.id
+            ).exists()
+            if is_approval_manager:
+                return function(request, *args, **kwargs)
+        is_manager = EmployeeWorkInformation.objects.filter(
+            reporting_manager_id=employee
+        ).exists()
+        if user.has_perm(perm) or is_manager:
+            return function(request, *args, **kwargs)
+        else:
+            messages.info(request, "You dont have permission.")
+            previous_url = request.META.get("HTTP_REFERER", "/")
+            script = f'<script>window.location.href = "{previous_url}"</script>'
+            key = "HTTP_HX_REQUEST"
+            if key in request.META.keys():
+                return render(request, "decorator_404.html")
+            return HttpResponse(script)
+
+    return _function
diff --git a/biometric/cbv/biometric.py b/biometric/cbv/biometric.py
new file mode 100644
index 000000000..b4fa634f3
--- /dev/null
+++ b/biometric/cbv/biometric.py
@@ -0,0 +1,285 @@
+"""
+This page handles the cbv methods for Biometric app
+"""
+
+from typing import Any
+from venv import logger
+from django.http import HttpResponse
+from django.contrib import messages
+from django.urls import reverse
+from django.utils.translation import gettext_lazy as _
+from zk import ZK
+from biometric.filters import BiometricDeviceFilter
+from biometric.forms import BiometricDeviceForm, BiometricDeviceSchedulerForm
+from biometric.models import BiometricDevices
+from django.utils.decorators import method_decorator
+from apscheduler.schedulers.background import BackgroundScheduler
+
+from biometric.views import anviz_biometric_attendance_scheduler, cosec_biometric_attendance_scheduler, str_time_seconds, zk_biometric_attendance_scheduler
+from horilla.horilla_settings import BIO_DEVICE_THREADS
+from horilla_views.generic.cbv.views import HorillaFormView,HorillaCardView,HorillaNavView
+from horilla_views.cbv_methods import login_required, permission_required
+
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(permission_required(perm="biometric.view_biometricdevices"), name="dispatch")
+class BiometricNavBar(HorillaNavView):
+    """
+    nav bar of the page
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("biometric-card-view")
+
+        self.create_attrs = f"""
+                            data-toggle="oh-modal-toggle"
+                            data-target="#genericModal"
+                            hx-target="#genericModalBody"
+                            hx-get="{reverse('biometric-device-add')}"
+                            """
+
+    nav_title = _("Biometric Devices")
+    filter_body_template = "cbv/biometric_filter.html"
+    filter_instance = BiometricDeviceFilter()
+    filter_form_context_name = "form"
+    search_swap_target = "#listContainer"
+
+    
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(permission_required(perm="biometric.view_biometricdevices"), name="dispatch")
+class BiometricCardView(HorillaCardView):
+    """
+    card view of the page
+    """
+
+    model = BiometricDevices
+    filter_class = BiometricDeviceFilter
+   
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("biometric-card-view")
+        self.actions = [
+                {
+                    "action": "Edit",
+                 "attrs": """
+                    class="oh-dropdown__link"
+                    hx-get="{get_update_url}"
+                    hx-target="#genericModalBody"
+                    data-toggle="oh-modal-toggle"
+                    data-target="#genericModal"
+                    """,
+                },
+                {
+                    "action": "archive_status",
+                    "attrs": """
+                    hx-confirm="Do you want to {archive_status} this device?"
+                    hx-post="{get_archive_url}"
+                    class="oh-dropdown__link"
+                    hx-target="#listContainer"  
+                    """,
+                },
+                {
+                    "action": "Delete",
+                    "attrs": """
+                    hx-confirm="Do you want to delete this device?"
+                    hx-post="{get_delete_url}"
+                    class="oh-dropdown__link oh-dropdown__link--danger"
+                    hx-target="#biometricDeviceList"
+                    """,
+                },
+            ]
+    details = {
+        "title": "{name}",
+        "subtitle": " Device Type : {get_machine_type} <br> {get_card_details} <br> {render_live_capture_html} <br> {render_actions_html}",
+    }
+
+    card_status_class = "is_scheduler-{is_scheduler} is_live-{is_live}"
+
+    card_status_indications = [
+        (
+            "notconnected--dot",
+            _("Not-Connected"),
+            """
+            onclick="
+                $('#applyFilter').closest('form').find('[name=hired]').val('false');
+                $('#applyFilter').click();
+            "
+            """,
+        ),
+        (
+            "sheduled--dot",
+            _("Sheduled"),
+            """
+            onclick="$('#applyFilter').closest('form').find('[name=is_scheduler]').val('true');
+                $('#applyFilter').click();
+            "
+            """,
+        ),
+         (
+            "live--dot",
+            _("Live Capture"),
+            """
+            onclick="$('#applyFilter').closest('form').find('[name=is_live]').val('true');
+                $('#applyFilter').click();
+            "
+            """,
+        ),
+    ]
+
+    
+
+
+
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(permission_required(perm="biometric.add_biometricdevices"), name="dispatch")
+class BiometricFormView(HorillaFormView):
+    """
+    from view for create and update biometric devices
+    """
+
+    model = BiometricDevices
+    form_class = BiometricDeviceForm
+    template_name = "cbv/biometric_form.html"
+    new_display_title = _("Add Biometric Device")
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+       
+        if self.form.instance.pk:
+            self.form_class.verbose_name = _("Edit Biometric Devices")
+        context["form"] = self.form
+        return context
+
+    def form_valid(self, form: BiometricDeviceForm) -> HttpResponse:
+        if form.is_valid():
+            if form.instance.pk:
+                message = _("Biometric device updated successfully.")
+            else:
+                message = _("Biometric device added successfully.")
+            form.save()
+
+            messages.success(self.request, message)
+            return self.HttpResponse()
+        return super().form_valid(form)
+    
+
+
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(permission_required(perm="biometric.change_biometricdevices"), name="dispatch")
+class BiometricSheduleForm(HorillaFormView):
+    """
+    form view for shedule biometric device
+    """
+
+    model = BiometricDevices
+    form_class = BiometricDeviceSchedulerForm
+    # new_display_title = _("Schedule Biometric Device..")
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        if self.form.instance.pk:
+            self.form.verbose_name = _("Schedule Biometric Device..")
+            device = BiometricDevices.objects.get(id=self.form.instance.pk)
+            self.form.fields["scheduler_duration"].initial = device.scheduler_duration
+
+        return context
+    
+    def form_valid(self, form: BiometricDeviceSchedulerForm) -> HttpResponse:
+        if form.is_valid():
+            if form.instance.pk:
+                message = _("Biometric device updated successfully.")
+                device = BiometricDevices.objects.get(id=self.form.instance.pk)
+
+                if device.machine_type == "zk":
+                    try:
+                        port_no = device.port
+                        machine_ip = device.machine_ip
+                        conn = None
+                        zk_device = ZK(
+                            machine_ip,
+                            port=port_no,
+                            timeout=5,
+                            password=0,
+                            force_udp=False,
+                            ommit_ping=False,
+                        )
+                        conn = zk_device.connect()
+                        conn.test_voice(index=0)
+                        duration = self.request.POST.get("scheduler_duration")
+                        device = BiometricDevices.objects.get(id=self.form.instance.pk)
+                        device.scheduler_duration = duration
+                        device.is_scheduler = True
+                        device.is_live = False
+                        device.save()
+                        scheduler = BackgroundScheduler()
+                        scheduler.add_job(
+                            lambda: zk_biometric_attendance_scheduler(device.id),
+                            "interval",
+                            seconds=str_time_seconds(device.scheduler_duration),
+                        )
+                        scheduler.start()
+                        return HttpResponse("<script>window.location.reload()</script>")
+                    except Exception as error:
+                        logger.error("An error comes in biometric_device_schedule ", error)
+                        script = """
+                        <script>
+                            Swal.fire({
+                            title : "Schedule Attendance unsuccessful",
+                            text: "Please double-check the accuracy of the provided IP Address and Port Number for correctness",
+                            icon: "warning",
+                            showConfirmButton: false,
+                            timer: 3500, 
+                            timerProgressBar: true,
+                            didClose: () => {
+                                location.reload(); 
+                                },
+                            });
+                        </script>
+                        """
+                        return HttpResponse(script)
+                elif device.machine_type == "anviz":
+                    duration = self.request.POST.get("scheduler_duration")
+                    device.is_scheduler = True
+                    device.scheduler_duration = duration
+                    device.save()
+                    scheduler = BackgroundScheduler()
+                    scheduler.add_job(
+                        lambda: anviz_biometric_attendance_scheduler(device.id),
+                        "interval",
+                        seconds=str_time_seconds(device.scheduler_duration),
+                    )
+                    scheduler.start()
+                    return HttpResponse("<script>window.location.reload()</script>")
+                else:
+                    duration = self.request.POST.get("scheduler_duration")
+                    device.is_scheduler = True
+                    device.is_live = False
+                    device.scheduler_duration = duration
+                    device.save()
+                    scheduler = BackgroundScheduler()
+                    existing_thread = BIO_DEVICE_THREADS.get(device.id)
+                    if existing_thread:
+                        existing_thread.stop()
+                        del BIO_DEVICE_THREADS[device.id]
+                    scheduler.add_job(
+                        lambda: cosec_biometric_attendance_scheduler(device.id),
+                        "interval",
+                        seconds=str_time_seconds(device.scheduler_duration),
+                    )
+                    scheduler.start()
+                    return HttpResponse("<script>window.location.reload()</script>")
+            # else:
+            #     message = _("Biometric device added successfully.")
+            form.save()
+
+            messages.success(self.request, message)
+            # return self.HttpResponse("<script>location.reload();</script>")
+        return super().form_valid(form)
+
diff --git a/biometric/filters.py b/biometric/filters.py
index 043102bbb..58cfad7b8 100644
--- a/biometric/filters.py
+++ b/biometric/filters.py
@@ -10,9 +10,10 @@ import django_filters
 
 from base.filters import FilterSet
 from biometric.models import BiometricDevices
+from horilla.filters import HorillaFilterSet
 
 
-class BiometricDeviceFilter(FilterSet):
+class BiometricDeviceFilter(HorillaFilterSet):
     """
     Filter class for querying biometric devices.
 
diff --git a/biometric/forms.py b/biometric/forms.py
index 0deca15f8..9a67610b4 100644
--- a/biometric/forms.py
+++ b/biometric/forms.py
@@ -29,6 +29,19 @@ class BiometricDeviceForm(ModelForm):
     settings and device activation status.
     """
 
+    cols = {
+        "name": 12,
+        "machine_type": 12,
+        "machine_ip": 12,
+        "port": 12,
+        "cosec_username": 12,
+        "cosec_password": 12,
+        "anviz_request_id": 12,
+        "api_url": 12,
+        "api_key": 12,
+        "api_secret": 12,
+    }
+
     class Meta:
         """
         Meta class to add additional options
@@ -72,6 +85,8 @@ class BiometricDeviceSchedulerForm(ModelForm):
     It includes a field for entering the scheduler duration in the format HH:MM.
     """
 
+    cols = {"scheduler_duration": 12}
+
     class Meta:
         """
         Meta class to add additional options
@@ -80,7 +95,7 @@ class BiometricDeviceSchedulerForm(ModelForm):
         model = BiometricDevices
         fields = ["scheduler_duration"]
         labels = {
-            "scheduler_duration": _("Enter the duration in the format HH:MM"),
+            "scheduler_duration": _("Interval duration"),
         }
 
 
diff --git a/biometric/models.py b/biometric/models.py
index 99311813a..0a6dae4b7 100644
--- a/biometric/models.py
+++ b/biometric/models.py
@@ -10,12 +10,14 @@ import requests
 from django.core.exceptions import ValidationError
 from django.core.validators import MaxValueValidator
 from django.db import models
+from django.urls import reverse, reverse_lazy
 from django.utils.translation import gettext_lazy as _
 
 from base.horilla_company_manager import HorillaCompanyManager
 from base.models import Company
 from employee.models import Employee
 from horilla.models import HorillaModel
+from horilla_views.cbv_methods import render_template
 
 
 def validate_schedule_time_format(value):
@@ -109,6 +111,129 @@ class BiometricDevices(HorillaModel):
     def __str__(self):
         return f"{self.name} - {self.machine_type}"
 
+    def get_card_details(self):
+        """
+        return card details based on machine type
+        """
+
+        if self.machine_type in ["zk", "cosec"]:
+            return f"Machine IP : {self.machine_ip}<br>Port No : {self.port}"
+        elif self.machine_type == "anviz":
+            return f"API Url : {self.api_url}"
+        else:
+            return ""
+
+    def render_live_capture_html(self):
+        """
+        live capture button
+        """
+        checked_attribute = "checked" if self.is_live else ""
+        activate_label = "Activate live capture mode"
+        activate_title = "Activate" if not self.is_live else "Deactivate"
+
+        if self.machine_type in ["zk", "cosec"]:
+            html = f"""
+            <td>
+                  <span class="oh-kanban-card__subtitle d-block">{activate_label}</span>
+                </td>
+                <td>
+                <div class="oh-switch">
+                    <input type="checkbox"
+                        class="style-widget oh-switch__checkbox is-live-activate"
+                        title="{activate_title}"
+                        data-toggle="oh-modal-toggle"
+                        data-target="#BiometricDeviceTestModal"
+                        name="is_live"
+                        {checked_attribute}
+                        hx-trigger="change"
+                        hx-get="/biometric/biometric-device-live-capture?deviceId=d9ab2bc7-01d5-4005-897f-01f35198d743&amp;search=&amp;machine_type=&amp;is_scheduler=unknown&amp;is_active=unknown&amp;is_live=unknown&amp;page=1&amp;view=card"
+                        hx-target="#BiometricDeviceTestFormTarget" />
+                </div>
+                </td>
+                """
+            return html
+        else:
+            return ""
+
+    def render_actions_html(self):
+        """
+        actions buttons
+        """
+
+        margin_style = (
+            "style='margin-top:0px;'" if self.machine_type in ["anviz", "cosec"] else ""
+        )
+
+        test_url = reverse("biometric-device-test", args=[self.id])
+        unschedule_url = reverse("biometric-device-unschedule", args=[self.id])
+        schedule_url = reverse("biometric-device-schedule", args=[self.id])
+        employees_url = reverse("biometric-device-employees", args=[self.id])
+
+        html = f"""
+        <div class="d-block oh-kanban-card__biometric-actions" {margin_style} style="display: flex; gap: 10px; ">
+            <a href="#" hx-get="{test_url}" data-toggle="oh-modal-toggle"
+                data-target="#BiometricDeviceTestModal" hx-target="#BiometricDeviceTestFormTarget"
+                class="oh-checkpoint-badge text-success mr-2" style="border: 2px solid #28a745; padding: 5px 10px; border-radius: 4px; display: inline-block; color: #28a745;">Test
+            </a>
+            {"<a hx-confirm='Do you want to unschedule the device attendance fetching?'"
+              f" hx-post='{unschedule_url}'"
+              " hx-target='#biometricDeviceList' class='oh-checkpoint-badge text-info ' style='border: 2px solid #17a2b8; padding: 5px 10px; border-radius: 4px; display: inline-block; color: #17a2b8;'>Unschedule</a>"
+              if self.is_scheduler else
+              "<a href='#' class='oh-checkpoint-badge text-info' hx-get='" + schedule_url + "'"
+              " data-toggle='oh-modal-toggle' data-target='#BiometricDeviceModal'"
+              " hx-target='#BiometricDeviceFormTarget' style='border: 2px solid #17a2b8; padding: 5px 10px; border-radius: 4px; display: inline-block; color: #17a2b8;'>Schedule</a>"}
+            {"<a href='" + employees_url + "' class='oh-checkpoint-badge text-secondary bio-user-list ml-4' style='border: 2px solid #6c757d; padding: 5px 10px; border-radius: 4px; display: inline-block; color: #6c757d;'>Employee</a>"
+              if self.machine_type in ["zk", "cosec"] else ""}
+        </div>
+
+        """
+
+        return html
+
+    def archive_status(self):
+        """
+        archive status
+        """
+        if self.is_active:
+            return "Archive"
+        else:
+            return "Un-Archive"
+
+    def get_update_url(self):
+        """
+        This method to get update url
+        """
+        url = reverse_lazy("biometric-device-edit", kwargs={"device_id": self.pk})
+        return url
+
+    def get_archive_url(self):
+        """
+        This method to get archive url
+        """
+        url = reverse_lazy("biometric-device-archive", kwargs={"device_id": self.pk})
+        return url
+
+    def get_delete_url(self):
+        """
+        This method to get delete url
+        """
+        url = reverse_lazy("biometric-device-delete", kwargs={"device_id": self.pk})
+        return url
+
+    def get_machine_type(self):
+        """
+        return machine type from choices
+        """
+
+        return dict(self.BIO_DEVICE_TYPE).get(self.machine_type)
+
+    def get_avatar(self):
+        """
+        Method will retun the api to the avatar or path to the profile image
+        """
+        url = f"https://ui-avatars.com/api/?name={self.name}&background=random"
+        return url
+
     def clean(self, *args, **kwargs):
         super().clean(*args, **kwargs)
         required_fields = {}
diff --git a/biometric/templates/biometric/view_biometric_devices.html b/biometric/templates/biometric/view_biometric_devices.html
index 7350c60ad..ca7d559de 100644
--- a/biometric/templates/biometric/view_biometric_devices.html
+++ b/biometric/templates/biometric/view_biometric_devices.html
@@ -1,10 +1,44 @@
 {% extends 'index.html' %} {% block content %} {% load static %} {% load i18n %}
+{% include 'generic/components.html' %}
+<style>
+    .notconnected--dot{
+        background-color:red;
+      }
+      .sheduled--dot{
+        background-color: rgb(103, 171, 238);
+      }
+      .live--dot{
+        background-color: orange;
+      }
+      .is_live-False{
+        border-left: 3.4px solid red !important;
+        border-radius: 4px 0 0 4px;
+      }
+      .is_scheduler-True{
+        border-left: 3.4px solid rgb(103, 171, 238) !important;
+        border-radius: 4px 0 0 4px;
+      }
+      .is_live-True{
+        border-left: 4px solid orange !important;
+        border-radius: 4    px 0 0 4px;
+      }
+    </style>
+    <div class="oh-modal" id="BiometricDeviceTestModal" role="dialog" aria-labelledby="BiometricDeviceTestModal"
+        aria-hidden="true">
+        <div class="oh-modal__dialog" style="max-width: 550px" id="BiometricDeviceTestFormTarget">
+            {% include "animation.html" %}
+        </div>
+    </div>
 <div class="oh-wrapper">
-    {% include 'biometric/nav_biometric_devices.html' %}
+    <div  hx-get="{% url "biometric-navbar" %}" hx-trigger="load">
+    </div>
+
+
+    {% comment %} {% include 'biometric/nav_biometric_devices.html' %} {% endcomment %}
     <div class="oh-checkpoint-badge mb-2" id="selectedDevices" data-ids="[]" data-clicked="" style="display: none">
     </div>
 
-    <div class="d-flex flex-row-reverse">
+    {% comment %} <div class="d-flex flex-row-reverse">
         <span class="m-3"
             onclick="$('[name=hired]').val('false'); $('[name=hired]').first().change(); $('.filterButton').click()"
             style="cursor: pointer">
@@ -23,10 +57,14 @@
             <span class="oh-dot oh-dot--small me-1" style="background-color: orange"></span>
             {% trans "Live Capture" %}
         </span>
-    </div>
+    </div> {% endcomment %}
+
+
     <div id="biometricDeviceList">
         {% if devices %}
-            {% include 'biometric/card_biometric_devices.html' %}
+            <div class="oh-wrapper" hx-get="{% url "biometric-card-view" %}?is_active=True" hx-trigger="load" id="listContainer">
+            </div>
+            {% comment %} {% include 'biometric/card_biometric_devices.html' %}  {% endcomment %}
         {% else %}
             {% include 'biometric/empty_view_biometric.html' %}
         {% endif %}
diff --git a/biometric/templates/cbv/biometric_card_actions.html b/biometric/templates/cbv/biometric_card_actions.html
new file mode 100644
index 000000000..4614c2fb9
--- /dev/null
+++ b/biometric/templates/cbv/biometric_card_actions.html
@@ -0,0 +1,26 @@
+{% load i18n %}
+<div>
+    {% include 'generic/horilla_card.html' %}
+</div>
+<div class="d-block oh-kanban-card__biometric-actions" 
+{% if device.machine_type == "anviz" or device.machine_type == "cosec" %} style='margin-top:53px;' {% endif %}>
+    <a href="#" hx-get="{% url 'biometric-device-test' device.id %}" data-toggle="oh-modal-toggle"
+        data-target="#BiometricDeviceTestModal" hx-target="#BiometricDeviceTestFormTarget"
+        class="oh-checkpoint-badge text-success">{% trans "Test" %}
+    </a>
+{% if device.is_scheduler %}
+    <a hx-confirm="{% trans 'Do you want to unschedule the device attendance fetching?' %}"
+        hx-post="{% url 'biometric-device-unschedule' device.id %}?{{pd}}&page={{devices.number}}&view=card"
+        hx-target="#biometricDeviceList" class="oh-checkpoint-badge text-info">{% trans "Unschedule" %}
+    </a>
+{% else %}
+    <a href="#" class="oh-checkpoint-badge text-info" hx-get="{% url 'biometric-device-schedule' device.id %}"
+        data-toggle="oh-modal-toggle" data-target="#BiometricDeviceModal"
+        hx-target="#BiometricDeviceFormTarget">{% trans "Schedule" %}</a>
+{% endif %}
+{% if device.machine_type == "zk" or device.machine_type == "cosec" %}
+    <a href="{% url 'biometric-device-employees' device.id %}"
+        class="oh-checkpoint-badge text-secondary bio-user-list">{% trans "Employee" %}</a>
+{% endif %}
+</div>
+</div>
diff --git a/biometric/templates/cbv/biometric_filter.html b/biometric/templates/cbv/biometric_filter.html
new file mode 100644
index 000000000..aec419459
--- /dev/null
+++ b/biometric/templates/cbv/biometric_filter.html
@@ -0,0 +1,30 @@
+{% load static %} {% load i18n %}
+<div class="oh-dropdown__filter-body">
+    <div class="oh-accordion">
+        <div class="oh-accordion-header">{% trans "Biometric Devices" %}</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" for="{{form.machine_type.id_for_label}}">{% trans "Device Type" %}</label>
+                        {{form.machine_type}}
+                    </div>
+                    <div class="oh-input-group">
+                        <label class="oh-label" for="{{form.is_scheduler.id_for_label}}">{% trans "Is Scheduled" %}</label>
+                        {{form.is_scheduler}}
+                    </div>
+                </div>
+                <div class="col-sm-12 col-md-12 col-lg-6">
+                    <div class="oh-input-group">
+                        <label class="oh-label" for="{{form.is_active.id_for_label}}">{% trans "Is Active" %}</label>
+                        {{form.is_active}}
+                    </div>
+                    <div class="oh-input-group">
+                        <label class="oh-label" for="{{form.is_live.id_for_label}}">{% trans "Is Live" %}</label>
+                        {{form.is_live}}
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/biometric/templates/cbv/biometric_form.html b/biometric/templates/cbv/biometric_form.html
new file mode 100644
index 000000000..f54848f33
--- /dev/null
+++ b/biometric/templates/cbv/biometric_form.html
@@ -0,0 +1,79 @@
+<div>
+    {% include "generic/horilla_form.html" %}
+</div>
+
+<style>
+    #id_machine_ip_parent_div,
+    #id_port_parent_div,
+    #id_cosec_username_parent_div,
+    #id_anviz_request_id_parent_div,
+    #id_api_url_parent_div,
+    #id_api_key_parent_div,
+    #id_api_secret_parent_div,
+    #id_api_token_parent_div,
+    #id_api_expires_parent_div,
+    #id_is_live_parent_div,
+    #id_last_fetch_date_parent_div,
+    #id_last_fetch_time_parent_div,
+    #id_cosec_password_parent_div {
+      display: none;
+    }
+  </style>
+<script>
+    $('#id_machine_type_parent_div').on('change', function() {
+        var selectedOption = $(this).find('option:selected').text();
+        if (selectedOption === 'ZKTeco Biometric') {
+          $("#id_machine_ip_parent_div, #id_port_parent_div").show();
+        }
+        else {
+            $("#id_machine_ip_parent_div, #id_port_parent_div").hide(); 
+        }
+        if (selectedOption === 'Anviz Biometric'){
+            $("#id_anviz_request_id_parent_div, #id_api_url_parent_div, #id_api_key_parent_div, #id_api_secret_parent_div").show();
+        }
+        else {
+            $("#id_anviz_request_id_parent_div, #id_api_url_parent_div, #id_api_key_parent_div, #id_api_secret_parent_div").hide();
+        }
+        if (selectedOption === 'Matrix COSEC Biometric'){
+            $("#id_machine_ip_parent_div,#id_port_parent_div, #id_cosec_username_parent_div,#id_cosec_password_parent_div").show();
+        }
+        else {
+            $("#id_cosec_username_parent_div,#id_cosec_password_parent_div").hide();
+        }
+      });
+
+    $(document).ready(function (e) {
+        $('select[name="machine_type"]').change();
+
+        var passwordField = $('input[type="password"]');
+        passwordField.wrap('<div class="password-wrapper" style="position: relative;"></div>');
+            
+        var button = $(
+          '<button type="button" class="oh-btn oh-btn--transparent oh-password-input--toggle" style="position: absolute; right: 5px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer;">' +
+            '<ion-icon class="oh-passowrd-input__show-icon" title="Show Password" name="eye-outline"></ion-icon>' +
+            '<ion-icon class="oh-passowrd-input__hide-icon d-none" title="Hide Password" name="eye-off-outline"></ion-icon>' +
+          '</button>'
+        );
+
+        passwordField.after(button);
+        passwordField.css({
+          'padding-right': '30px'
+        });
+
+    
+        $(".oh-password-input--toggle").click(function () {
+            var passwordInput = $(this).prev('input[name="cosec_password"]');
+            var showIcon = $(this).find(".oh-passowrd-input__show-icon");
+            var hideIcon = $(this).find(".oh-passowrd-input__hide-icon");
+            if (passwordInput.attr("type") === "password") {
+                passwordInput.attr("type", "text");
+                showIcon.addClass("d-none");
+                hideIcon.removeClass("d-none");
+            } else {
+                passwordInput.attr("type", "password");
+                showIcon.removeClass("d-none");
+                hideIcon.addClass("d-none");
+            }
+        });
+    });
+</script>
\ No newline at end of file
diff --git a/biometric/urls.py b/biometric/urls.py
index bcc2964dc..76d90ad72 100644
--- a/biometric/urls.py
+++ b/biometric/urls.py
@@ -13,10 +13,37 @@ that require device IDs.
 
 from django.urls import path
 
+from biometric.cbv import biometric
+
 from . import views
 from .models import BiometricDevices
 
 urlpatterns = [
+    path(
+        "biometric-device-add/",
+        biometric.BiometricFormView.as_view(),
+        name="biometric-device-add",
+    ),
+    path(
+        "biometric-device-edit/<uuid:pk>/",
+        biometric.BiometricFormView.as_view(),
+        name="biometric-device-edit",
+    ),
+    path(
+        "biometric-card-view/",
+        biometric.BiometricCardView.as_view(),
+        name="biometric-card-view",
+    ),
+    path(
+        "biometric-navbar/",
+        biometric.BiometricNavBar.as_view(),
+        name="biometric-navbar",
+    ),
+    path(
+        "biometric-device-schedule/<uuid:pk>/",
+        biometric.BiometricSheduleForm.as_view(),
+        name="biometric-device-schedule",
+    ),
     path(
         "view-biometric-devices/",
         views.biometric_devices_view,
@@ -27,11 +54,11 @@ urlpatterns = [
         views.biometric_device_live,
         name="biometric-device-live-capture",
     ),
-    path(
-        "biometric-device-schedule/<uuid:device_id>/",
-        views.biometric_device_schedule,
-        name="biometric-device-schedule",
-    ),
+    # path(
+    #     "biometric-device-schedule/<uuid:device_id>/",
+    #     views.biometric_device_schedule,
+    #     name="biometric-device-schedule",
+    # ),
     path(
         "biometric-device-unschedule/<uuid:device_id>/",
         views.biometric_device_unschedule,
diff --git a/biometric/views.py b/biometric/views.py
index c132961f7..69d559fe7 100644
--- a/biometric/views.py
+++ b/biometric/views.py
@@ -607,7 +607,7 @@ def biometric_device_archive(request, device_id):
     device_obj.save()
     message = _("archived") if not device_obj.is_active else _("un-archived")
     messages.success(request, _("Device is %(message)s") % {"message": message})
-    return redirect(f"/biometric/search-devices?{previous_data}")
+    return redirect(f"/biometric/biometric-card-view/?{previous_data}")
 
 
 @login_required
@@ -634,7 +634,8 @@ def biometric_device_delete(request, device_id):
         return redirect(f"/biometric/search-devices?{previous_data}")
     device_obj.delete()
     messages.success(request, _("Biometric device deleted successfully."))
-    return redirect(f"/biometric/search-devices?{previous_data}")
+    return redirect(f"/biometric/biometric-card-view?{previous_data}")
+    # return redirect(f"/biometric/view-biometric-devices?{previous_data}")
 
 
 @login_required
@@ -657,8 +658,11 @@ def search_devices(request):
     data_dict = parse_qs(previous_data)
     get_key_instances(BiometricDevices, data_dict)
     template = "biometric/card_biometric_devices.html"
-    if request.GET.get("view") == "list":
-        template = "biometric/list_biometric_devices.html"
+    # if request.GET.get("view") == "list":
+    #     template = "biometric/list_biometric_devices.html"
+    # else:
+    #     return HttpResponse("<script>$(#applyFilter').click();</script>")
+    #     # return redirect(reverse("biometric-card-view"))
 
     devices = paginator_qry(devices, request.GET.get("page"))
     return render(
@@ -2066,7 +2070,6 @@ def biometric_device_live(request):
                       timer: 1500,
                       timerProgressBar: true, // Show a progress bar as the timer counts down
                       didClose: () => {
-                        location.reload(); // Reload the page after the SweetAlert is closed
                         },
                     });
                     </script>
diff --git a/employee/cbv/__init__.py b/employee/cbv/__init__.py
new file mode 100644
index 000000000..e69de29bb
diff --git a/employee/cbv/accessibility.py b/employee/cbv/accessibility.py
new file mode 100644
index 000000000..26405be5a
--- /dev/null
+++ b/employee/cbv/accessibility.py
@@ -0,0 +1,171 @@
+"""
+Accessiblility
+"""
+
+from django.contrib.auth.context_processors import PermWrapper
+from base.methods import check_manager
+from employee.models import Employee
+from horilla_audit.models import AccountBlockUnblock
+
+
+def edit_accessibility(
+    request, instance: object = None, user_perms: PermWrapper = [], *args, **kwargs
+) -> bool:
+    """
+    To access edit
+    """
+    # employee = Employee.objects.get(id=instance.pk)
+    if (
+        (request.user.has_perm("employee.change_employee"))
+        or check_manager(request.user.employee_get, instance)
+        or request.user == instance.employee_user_id
+    ):
+        return True
+    return False
+
+
+def password_reset_accessibility(
+    request, instance: object = None, user_perms: PermWrapper = [], *args, **kwargs
+) -> bool:
+    """
+    To password  reset
+    """
+    # employee = Employee.objects.get(id=instance.pk)
+    if (
+        (request.user.has_perm("employee.add_employee"))
+        or check_manager(request.user.employee_get, instance)
+        or request.user == instance.employee_user_id
+    ):
+        return True
+    return False
+
+
+def block_account_accessibility(
+    request, instance: object = None, user_perms: PermWrapper = [], *args, **kwargs
+) -> bool:
+    """
+    To block  account
+    """
+    enabled_block_unblock = (
+        AccountBlockUnblock.objects.exists()
+        and AccountBlockUnblock.objects.first().is_enabled
+    )
+    if (
+        enabled_block_unblock
+        and request.user.has_perm("employee.change_employee")
+        and instance.employee_user_id.is_active
+    ):
+        return True
+    return False
+
+def un_block_account_accessibility(
+    request, instance: object = None, user_perms: PermWrapper = [], *args, **kwargs
+) -> bool:
+    """
+    To block  account
+    """
+    enabled_block_unblock = (
+        AccountBlockUnblock.objects.exists()
+        and AccountBlockUnblock.objects.first().is_enabled
+    )
+    if (
+        enabled_block_unblock
+        and request.user.has_perm("employee.change_employee")
+        and not instance.employee_user_id.is_active
+    ):
+        return True
+    return False
+
+
+def action_accessible(request, instance, user_perms):
+    """
+    To access archive and delete functionalities
+
+    """
+
+    if request.user.has_perm("employee.change_employee"):
+        return True
+
+
+def permission_accessibility(
+    request, instance: object = None, user_perms: PermWrapper = [], *args, **kwargs
+) -> bool:
+    """
+    accessibility for permissions tab in employee profile and individual view
+    """
+    if request.user.has_perm("auth.view_permissions") or request.user.has_perm(
+        "auth.view_group"
+    ):
+        return True
+    return False
+
+
+def note_accessibility(
+    request, instance: object = None, user_perms: PermWrapper = [], *args, **kwargs
+) -> bool:
+    """
+    accessibility for note tab
+    """
+    if request.user.has_perm("employee.view_employeenote") or check_manager(
+        request.user.employee_get, instance
+    ):
+        return True
+    return False
+
+
+def document_accessibility(
+    request, instance: object = None, user_perms: PermWrapper = [], *args, **kwargs
+) -> bool:
+    """
+    accessibility for document tab
+    """
+    employee = Employee.objects.get(id=instance.pk)
+    if (
+        request.user.has_perm("horilla_documents.view_document")
+        or request.user == employee.employee_user_id
+    ):
+        return True
+    return False
+
+
+def workshift_accessibility(
+    request, instance: object = None, user_perms: PermWrapper = [], *args, **kwargs
+) -> bool:
+    """
+    permission for work type and shift tab in employee profile
+    """
+    employee = Employee.objects.get(id=instance.pk)
+    check_manages = check_manager(request.user.employee_get, instance)
+    if (
+        request.user == employee.employee_user_id
+        or check_manages
+        or request.user.has_perm("attendance.view_worktyperequest")
+        or request.user.has_perm("attendance.view_shiftrequest")
+    ):
+        return True
+    return False
+
+
+def mail_log_accessibility(
+    request, instance: object = None, user_perms: PermWrapper = [], *args, **kwargs
+) -> bool:
+    """
+    permission for mail log tab
+    """
+
+    if request.user.has_perm("employee.view_employee"):
+        return True
+    return False
+
+
+def history_accessibility(
+    request, instance: object = None, user_perms: PermWrapper = [], *args, **kwargs
+) -> bool:
+    """
+    accessibility for history tab
+    """
+    if request.user.has_perm(
+        "employee.view_historicalemployeeworkinformation"
+    ) or check_manager(request.user.employee_get, instance):
+        return True
+    return False
diff --git a/employee/cbv/action_type.py b/employee/cbv/action_type.py
new file mode 100644
index 000000000..6d4ef9f40
--- /dev/null
+++ b/employee/cbv/action_type.py
@@ -0,0 +1,149 @@
+"""
+This page handles action type of disciplinary action.
+"""
+
+from typing import Any
+from django import forms
+from django.http import HttpResponse, HttpResponseRedirect
+from django.shortcuts import get_object_or_404
+from django.urls import reverse
+from django.utils.translation import gettext_lazy as _
+from django.utils.decorators import method_decorator
+from django.contrib import messages
+from django.views import View
+from employee.cbv.disciplinary_actions import DynamicActionTypeFormView
+from employee.filters import ActionTypeFilter
+from employee.forms import ActiontypeForm
+from employee.models import Actiontype
+from horilla_audit.models import AccountBlockUnblock
+from horilla_views.cbv_methods import login_required, permission_required
+from horilla_views.generic.cbv.views import (
+    HorillaListView,
+    HorillaNavView,
+)
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(permission_required(perm="employee.view_actiontype"), name="dispatch")
+class ActionTypeListView(HorillaListView):
+    """
+    List view of the Action Type page.
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.view_id = "action_type"
+        self.search_url = reverse("action-type-list")
+        self.actions = []
+        if self.request.user.has_perm("employee.change_actiontype"):
+            self.actions.append(
+                {
+                    "action": "Edit",
+                    "icon": "create-outline",
+                    "attrs": """
+                        class="oh-btn oh-btn--light-bkg w-100"
+                        hx-get="{get_update_url}?instance_ids={ordered_ids}"
+                        hx-target="#genericModalBody"
+                        data-toggle="oh-modal-toggle"
+                        data-target="#genericModal"
+                        """,
+                }
+            )
+        if self.request.user.has_perm("employee.delete_actiontype"):
+            self.actions.append(
+                {
+                    "action": "Delete",
+                    "icon": "trash-outline",
+                    "attrs": """
+                            class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100"
+                            hx-get="{get_delete_url}?model=employee.actiontype&pk={pk}"
+                            data-toggle="oh-modal-toggle"
+                            data-target="#deleteConfirmation"
+                            hx-target="#deleteConfirmationBody"
+                        """,
+                }
+            )
+
+    model = Actiontype
+    filter_class = ActionTypeFilter
+
+    columns = [
+        (_("Title"), "title"),
+        (_("Type"), "get_action_type_display"),
+        (_("Login Block"), "get_block_option"),
+    ]
+
+    sortby_mapping = [
+        ("Title", "title"),
+        ("Type", "get_action_type_display"),
+    ]
+
+    row_attrs = """
+                id = "actionTr{get_instance_id}"
+                """
+
+    header_attrs = {
+        "title": """ style="width:200px !important" """,
+    }
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(permission_required(perm="employee.view_actiontype"), name="dispatch")
+class ActionTypeNav(HorillaNavView):
+    """
+    Navigation bar for Action Type.
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("action-type-list")
+        if self.request.user.has_perm("employee.add_actiontype"):
+            self.create_attrs = f"""
+                                onclick = "event.stopPropagation();"
+                                data-toggle="oh-modal-toggle"
+                                data-target="#genericModal"
+                                hx-target="#genericModalBody"
+                                hx-get="{reverse('create-action-type')}"
+                                """
+
+    nav_title = _("Action Type")
+    filter_instance = ActionTypeFilter()
+    search_swap_target = "#listContainer"
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(permission_required(perm="employee.add_actiontype"), name="dispatch")
+class ActionTypeFormView(DynamicActionTypeFormView):
+    """
+    Create and edit form for Action Type.
+    """
+
+    is_dynamic_create_view = False
+
+    def get_context_data(self, **kwargs):
+        """
+        Get context data for rendering the form view.
+        """
+        context = super().get_context_data(**kwargs)
+        if self.form.instance.pk:
+            if self.form.instance.action_type == "warning":
+                self.form.fields["block_option"].widget = forms.HiddenInput()
+            self.form_class.verbose_name = _("Update Action Type")
+        context["form"] = self.form
+        return context
+
+    def form_valid(self, form: ActiontypeForm) -> HttpResponse:
+        """
+        Handle a valid form submission.
+
+        If the form is valid, save the instance and display a success message.
+        """
+        if form.is_valid():
+            if form.instance.pk:
+                message = _("The action type updated successfully.")
+            else:
+                message = _("The action type created successfully.")
+            form.save()
+            messages.success(self.request, _(message))
+            return self.HttpResponse()
+        return super().form_valid(form)
diff --git a/employee/cbv/allocations.py b/employee/cbv/allocations.py
new file mode 100644
index 000000000..2f16f1e11
--- /dev/null
+++ b/employee/cbv/allocations.py
@@ -0,0 +1,1261 @@
+"""
+employee/cbv/allocations.py
+
+Detailed view to manage all modules employee information
+"""
+
+import logging
+import ast
+from django.http import HttpResponse
+from datetime import datetime
+from django.contrib import messages
+from django.shortcuts import render
+from django.urls import reverse_lazy
+from django.db.models.signals import post_save
+from django.utils.decorators import method_decorator
+from django.dispatch import receiver
+from django.db.models import Q
+from django.utils.translation import gettext as _
+from django.views.generic import View
+from employee.models import (
+    Employee,
+    EmployeeWorkInformation,
+    EmployeeBankDetails,
+    models as django_models,
+)
+from employee.methods.methods import get_model_class
+from horilla_views.cbv_methods import render_template, login_required
+from horilla_views.generic.cbv.views import (
+    HorillaDetailedView,
+    HorillaListView,
+    TemplateView,
+    HorillaFormView,
+)
+from horilla.horilla_middlewares import _thread_locals
+from horilla.horilla_settings import APPS, NO_PERMISSION_MODALS
+from base.forms import AddToUserGroupForm, ModelForm, forms
+from base.methods import paginator_qry
+from base.templatetags.horillafilters import app_installed
+from base.views import get_models_in_app
+
+if app_installed("asset"):
+    from asset.cbv.request_and_allocation import Asset
+    from asset.filters import AssetFilter
+    from asset.models import AssetAssignment
+    from asset.views import asset_allocate_return
+    from asset.forms import AssetReturnForm
+
+
+from onboarding.cbv_decorators import (
+    all_manager_can_enter,
+    recruitment_manager_can_enter,
+)
+
+if app_installed("leave"):
+    from leave.cbv.leave_types import LeaveTypeListView, LeaveType, AvailableLeave
+
+if app_installed("payroll"):
+    from payroll.cbv.allowances import AllowanceListView, Allowance
+    from payroll.cbv.deduction import DeductionListView, Deduction
+
+logger = logging.getLogger(__name__)
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(
+    all_manager_can_enter(perm="recruitment.view_recruitment"), name="dispatch"
+)
+class AllocationView(HorillaDetailedView):
+    """
+    AllocationView
+    """
+
+    menues = []
+    template_name = "cbv/allocations/allocations.html"
+    model = Employee
+
+    def __init__(self, **kwargs):
+        super().__init__(**kwargs)
+
+    def get(self, request, *args, **kwargs):
+        pk = self.kwargs["pk"]
+        model = request.GET.get("model")
+        if model:
+            # Only for recruitment and onboarding process
+            # expecting model-> recruitment.models.Candidate
+            model = get_model_class(model)
+            candidate = model.objects.get(pk=pk)
+            # set candidate to request for accessing inside work info signal
+            request.employee_candidate = candidate
+            instance = candidate.converted_employee_id
+            candidate.save()
+            if instance is None and (candidate.hired or candidate.onboarding_stage):
+                instance = Employee.objects.get_or_create(
+                    employee_first_name=candidate.name,
+                    employee_profile=candidate.profile,
+                    email=candidate.email,
+                    phone=candidate.mobile,
+                    address=candidate.address,
+                    country=candidate.country,
+                    state=candidate.country,
+                    city=candidate.city,
+                    zip=candidate.zip,
+                    dob=candidate.dob,
+                    gender=candidate.gender,
+                )[0]
+                candidate.converted_employee_id = instance
+                candidate.save()
+                instance.employee_user_id.is_active = False
+                instance.employee_user_id.save()
+
+            elif not instance:
+                messages.info(
+                    request, _("Allocation feature not possible to this candidate")
+                )
+                return HorillaFormView.HttpResponse()
+        else:
+            instance = Employee.objects.get(pk=pk)
+
+        self.instance = instance
+
+        super().get(request, *args, **kwargs)
+        context = self.get_context_data(**kwargs)
+        context["instance"] = instance
+        context["menues"] = self.menues
+
+        return render(request, self.template_name, context)
+
+
+AllocationView.menues += [
+    {
+        "menu": _("Summary"),
+        # you will get instance_id in url params
+        "url": reverse_lazy("allocation-summary"),
+    },
+    {
+        "menu": _("Employee"),
+        # you will get instance_id in url params
+        "url": reverse_lazy("allocation-employee-forms"),
+    },
+]
+
+
+class PersonalForm(ModelForm):
+    """
+    PersonalForm
+    """
+
+    cols = {
+        "address": 12,
+        "country": 4,
+        "state": 4,
+        "city": 4,
+        "zip": 4,
+        "dob": 4,
+        "gender": 4,
+        "emergency_contact": 4,
+        "emergency_contact_name": 4,
+        "emergency_contact_relation": 4,
+    }
+
+    def __init__(self, *args, **kwargs):
+        super().__init__(*args, **kwargs)
+        self.fields["emergency_contact_name"].label = _("Contact name")
+        self.fields["emergency_contact_relation"].label = _("Contact Relation")
+        self.fields["badge_id"].label = "Badge ID"
+
+        self.fields["dob"].widget = forms.DateInput(
+            attrs={"type": "date", "class": "oh-input w-100"}
+        )
+        attrs = self.fields["country"].widget.attrs
+        attrs["class"] = "oh-select oh-select2 w-100"
+        attrs["style"] = "height:45px !important;"
+        self.fields["country"].widget = forms.Select(attrs=attrs)
+        self.fields["state"].widget = forms.Select(attrs=attrs)
+
+        # Reordering fields
+        profile_field = self.fields.pop("employee_profile")
+        fields = list(self.fields.items())
+        fields.insert(1, ("employee_profile", profile_field))
+        self.fields = dict(fields)
+
+    class Meta:
+        """
+        Meta
+        """
+
+        model = Employee
+        fields = "__all__"
+        exclude = [
+            "employee_user_id",
+            "additional_info",
+            "is_active",
+        ]
+
+
+class WorkInfo(ModelForm):
+    """
+    WorkInfo
+    """
+
+    def __init__(self, *args, **kwargs):
+        super().__init__(*args, **kwargs)
+        self.fields["date_joining"].widget = forms.DateInput(
+            attrs={"type": "date", "class": "oh-input w-100"}
+        )
+        self.fields["contract_end_date"].widget = forms.DateInput(
+            attrs={"type": "date", "class": "oh-input w-100"}
+        )
+
+    class Meta:
+        """
+        Meta
+        """
+
+        model = EmployeeWorkInformation
+        fields = "__all__"
+        exclude = [
+            "employee_id",
+            "experience",
+            "additional_info",
+        ]
+
+
+class BankInfo(ModelForm):
+    """
+    BankInfo
+    """
+
+    cols = {
+        "address": 12,
+        "country": 4,
+        "state": 4,
+        "city": 4,
+        "bank_name": 6,
+        "account_number": 12,
+        "branch": 6,
+    }
+
+    def __init__(self, *args, **kwargs):
+        super().__init__(*args, **kwargs)
+        # Reordering fields
+        account_number = self.fields.pop("account_number")
+        fields = list(self.fields.items())
+        fields.insert(2, ("account_number", account_number))
+        self.fields = dict(fields)
+
+        attrs = self.fields["country"].widget.attrs
+        attrs["class"] = "oh-select oh-select2 w-100"
+        attrs["style"] = "height:45px !important;"
+        attrs["id"] = "country"
+        self.fields["country"].widget = forms.Select(attrs=attrs)
+        attrs["id"] = "state"
+        self.fields["state"].widget = forms.Select(attrs=attrs)
+
+    class Meta:
+        """
+        Meta
+        """
+
+        model = EmployeeBankDetails
+        fields = "__all__"
+        exclude = [
+            "employee_id",
+            "additional_info",
+            "is_active",
+        ]
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(
+    all_manager_can_enter(perm="recruitment.view_recruitment"), name="dispatch"
+)
+class PersonalFormView(HorillaFormView):
+    """
+    PersonalFormView
+    """
+
+    form_class = PersonalForm
+    model = Employee
+    template_name = "cbv/allocations/employee/form_structure.html"
+
+    def init_form(self, *args, data=..., files=..., instance=None, **kwargs):
+        instance = self.instance
+
+        if instance:
+            instance = Employee.objects.entire().filter(pk=instance).first()
+        return self.form_class(
+            data, files, instance=instance, initial=self.get_initial()
+        )
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        context["request"] = self.request
+        return context
+
+    def post(self, request, *args, pk=None, **kwargs):
+        self.instance = request.POST.get("instance_id")
+        return super().post(request, *args, pk=pk, **kwargs)
+
+    def get(self, request, *args, pk=None, **kwargs):
+        self.instance = request.GET.get("instance_id")
+        return super().post(request, *args, pk=pk, **kwargs)
+
+    def form_valid(self, form: PersonalForm):
+
+        if form.is_valid():
+            form.save()
+            messages.success(self.request, _("Personal Information Updated"))
+            return render(
+                request=self.request,
+                template_name=self.template_name,
+                context=self.get_context_data(),
+            )
+
+        return super().form_valid(form)
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(
+    all_manager_can_enter(perm="recruitment.view_recruitment"), name="dispatch"
+)
+class WorkFormView(HorillaFormView):
+    """
+    WorkFormView
+    """
+
+    form_class = WorkInfo
+    model = EmployeeWorkInformation
+    template_name = "cbv/allocations/employee/form_structure.html"
+
+    def init_form(self, *args, data=..., files=..., instance=None, **kwargs):
+        instance = self.request.GET.get("instance_id", None)
+        if instance:
+            instance = (
+                EmployeeWorkInformation.objects.entire()
+                .filter(employee_id__id=instance)
+                .first()
+            )
+
+        return super().init_form(
+            *args, data=data, files=files, instance=instance, **kwargs
+        )
+
+    def form_valid(self, form: WorkInfo):
+        if form.is_valid():
+            form.save()
+            messages.success(self.request, _("Work Info Updated"))
+            return render(
+                request=self.request,
+                template_name=self.template_name,
+                context=self.get_context_data(),
+            )
+
+        return super().form_valid(form)
+
+    def post(self, request, *args, pk=None, **kwargs):
+        self.instance = request.POST.get("instance_id")
+        return super().post(request, *args, pk=pk, **kwargs)
+
+    def get(self, request, *args, pk=None, **kwargs):
+        self.instance = request.GET.get("instance_id")
+        return super().post(request, *args, pk=pk, **kwargs)
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(
+    all_manager_can_enter(perm="recruitment.view_recruitment"), name="dispatch"
+)
+@receiver(post_save, sender=EmployeeWorkInformation)
+def work_info_post_save(sender, instance, created, **kwargs):
+    """
+    Work info post save
+    """
+    request = getattr(_thread_locals, "request", None)
+    if created and request and getattr(request, "employee_candidate", None):
+        candidate = getattr(request, "employee_candidate")
+        try:
+            instance.date_joining = candidate.joining_date
+            instance.job_position_id = candidate.job_position_id
+            instance.department_id = candidate.job_position_id.department_id
+            instance.company_id = candidate.recruitment_id.company_id
+        except Exception as e:
+            logger.error(e)
+        django_models.Model.save(instance)
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(
+    all_manager_can_enter(perm="recruitment.view_recruitment"), name="dispatch"
+)
+class BankFormView(HorillaFormView):
+    """
+    WorkFormView
+    """
+
+    form_class = BankInfo
+    model = EmployeeBankDetails
+    template_name = "cbv/allocations/employee/form_structure.html"
+
+    def init_form(self, *args, data=..., files=..., instance=None, **kwargs):
+        instance = self.request.GET.get("instance_id", None)
+        if instance:
+            instance = EmployeeBankDetails.objects.filter(
+                employee_id__id=instance
+            ).first()
+        return super().init_form(
+            *args, data=data, files=files, instance=instance, **kwargs
+        )
+
+    def form_valid(self, form: BankInfo):
+        if form.is_valid():
+            if not form.instance.employee_id:
+                form.instance.employee_id = Employee.objects.get(
+                    pk=self.request.POST["instance_id"]
+                )
+            form.save()
+            messages.success(self.request, _("Bank Info Updated"))
+            return render(
+                request=self.request,
+                template_name=self.template_name,
+                context=self.get_context_data(),
+            )
+        return super().form_valid(form)
+
+    def post(self, request, *args, pk=None, **kwargs):
+        self.instance = request.POST.get("instance_id")
+        return super().post(request, *args, pk=pk, **kwargs)
+
+    def get(self, request, *args, pk=None, **kwargs):
+        self.instance = request.GET.get("instance_id")
+        return super().post(request, *args, pk=pk, **kwargs)
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(
+    all_manager_can_enter(perm="recruitment.view_recruitment"), name="dispatch"
+)
+class EmployeeForms(TemplateView):
+    """
+    EmployeeForms
+    """
+
+    template_name = "cbv/allocations/employee/forms.html"
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        return context
+
+
+if app_installed("leave"):
+    AllocationView.menues.append(
+        {
+            "menu": _("Leave Policy"),
+            # you will get instance_id in url params
+            "url": reverse_lazy("allocation-leave-type"),
+        }
+    )
+
+    @method_decorator(login_required, name="dispatch")
+    @method_decorator(
+        all_manager_can_enter(perm="recruitment.view_recruitment"), name="dispatch"
+    )
+    class LeaveTypeView(TemplateView):
+        """
+        EmployeeForms
+        """
+
+        template_name = "cbv/allocations/leave/types.html"
+
+        def get_context_data(self, **kwargs):
+            context = super().get_context_data(**kwargs)
+            return context
+
+    def leave_type_toggle_allocation(self):
+        """
+        Leave type assign toggle allocation
+        """
+        request = getattr(_thread_locals, "request")
+
+        available_leave = self.employee_available_leave.filter(
+            employee_id__id=request.GET["instance_id"]
+        ).first()
+        return render_template(
+            "cbv/allocations/leave/toggle_type.html",
+            {"instance": self, "available_leave": available_leave},
+        )
+
+    LeaveType.leave_type_toggle_allocation = leave_type_toggle_allocation
+
+    @method_decorator(login_required, name="dispatch")
+    @method_decorator(
+        all_manager_can_enter(perm="recruitment.view_recruitment"), name="dispatch"
+    )
+    class LeaveTypeAllocationList(LeaveTypeListView):
+        """
+        LeaveTypeAllocationList
+        """
+
+        template_name = "cbv/allocations/leave/type_list.html"
+
+        action_method = None
+        # actions = [{"action": "Assigned", "icon": "checkmark-done-circle-outline"}]
+        header_attrs = {
+            "payment": "style='width:80px;'",
+            "count": "style='width:105px;'",
+            "action": "style='width:105px;'",
+        }
+        row_status_indications = []
+        filter_selected = False
+        show_filter_tags = False
+        row_attrs = """
+            onclick="$(this).find('td:first [type=checkbox]').prop('checked',!$(this).find('td:first [type=checkbox]').is(':checked')).change()"
+        """
+
+        def __init__(self, **kwargs):
+            super().__init__(**kwargs)
+            self.search_url = self.request.path
+            self.action_method = "leave_type_toggle_allocation"
+
+        def get_context_data(self, **kwargs):
+            context = super().get_context_data(**kwargs)
+            context["assigned_types"] = AvailableLeave.objects.filter(
+                employee_id__id=self.request.GET["instance_id"],
+                leave_type_id__in=self.queryset,
+            )
+
+            return context
+        
+        def dispatch(self, request, *args, **kwargs):
+            """
+            To avoide parent permissions
+            """
+            return super(LeaveTypeListView, self).dispatch(request, *args, **kwargs)
+
+        def get_queryset(self, queryset=None, filtered=False, *args, **kwargs):
+            if not getattr(self.queryset, "queryset", None):
+                queryset = (
+                    super()
+                    .get_queryset(queryset, filtered, *args, **kwargs)
+                    .exclude(
+                        employee_available_leave__employee_id__id=self.request.GET.get(
+                            "instance_id"
+                        )
+                    )
+                )
+
+            return self.queryset
+
+        def post(self, *args, **kwargs):
+            """
+            post
+            """
+            ids = ast.literal_eval(self.request.POST["ids"])
+            employee_id = self.request.POST["instance_id"]
+            avaiable_model = get_model_class("leave.models.AvailableLeave")
+            type_model = get_model_class("leave.models.LeaveType")
+            types = type_model.objects.filter(id__in=ids)
+            instance = Employee.objects.get(pk=employee_id)
+            for leave_type in types:
+                avaiable_instance = avaiable_model()
+                avaiable_instance.employee_id = instance
+                avaiable_instance.leave_type_id = leave_type
+                avaiable_instance.available_days = leave_type.total_days
+                try:
+                    avaiable_instance.save()
+                    messages.success(self.request, _("Assigned ") + f" {leave_type.name}")
+                except:
+                    messages.error(
+                        self.request,
+                        _("Cannot Assign or Already Assigned") + f" `{leave_type.name}`",
+                    )
+            if not types:
+                messages.info(self.request, _("Select Types to Assign"))
+            return HttpResponse(
+                """
+            <script>$("#reloadMessagesButton").click();$(".reload-record").click();</script>
+    """
+            )
+
+
+if app_installed("asset"):
+    AllocationView.menues.append(
+        {
+            "menu": _("Asset"),
+            # you will get instance_id in url params
+            "url": reverse_lazy("allocation-assets"),
+        }
+    )
+
+    @method_decorator(login_required, name="dispatch")
+    @method_decorator(
+        all_manager_can_enter(perm="recruitment.view_recruitment"), name="dispatch"
+    )
+    class Assets(TemplateView):
+        """
+        Assets
+        """
+
+        template_name = "cbv/allocations/asset/assets.html"
+
+    def asset_allocation_metod(self):
+        """
+        Allocation method
+        """
+        return render_template("cbv/allocations/asset/actions.html", {"instance": self})
+
+    def asset_allocation_status(self):
+        """
+        Allocation method
+        """
+        return render_template(
+            "cbv/allocations/asset/allocation_status.html", {"instance": self}
+        )
+
+    def allocation_asset_get_avatar(self):
+        """
+        Method will retun the api to the avatar or path to the question template
+        """
+        url = f"https://ui-avatars.com/api/?name={self}&background=random"
+        return url
+
+    Asset.asset_allocation_metod = asset_allocation_metod
+    Asset.allocation_asset_get_avatar = allocation_asset_get_avatar
+    Asset.asset_allocation_status = asset_allocation_status
+
+    @method_decorator(login_required, name="dispatch")
+    @method_decorator(
+        all_manager_can_enter(perm="recruitment.view_recruitment"), name="dispatch"
+    )
+    class AssetAllocationList(HorillaListView):
+        """
+        AssetAllocationLists
+        """
+
+        model = Asset
+        filter_class = AssetFilter
+        template_name = "cbv/allocations/asset/asset_list.html"
+
+        header_attrs = {
+            "asset_name": "style='width:160px !important;'",
+            "asset_category_id": "style='width:150px !important;'",
+            "asset_status": "style='width:140px !important;'",
+            "action": "style='width:105px;'",
+        }
+        row_status_indications = []
+        filter_selected = False
+        show_filter_tags = False
+        row_attrs = """
+            onclick="$(this).find('td:first [type=checkbox]').prop('checked',!$(this).find('td:first [type=checkbox]').is(':checked')).change()"
+        """
+        columns = [
+            (_("Asset"), "asset_name", "allocation_asset_get_avatar"),
+            (_("Category"), "asset_category_id"),
+            (_("Status"), "asset_allocation_status"),
+        ]
+        sortby_mapping = [
+            (_("Status"), "asset_allocation_status"),
+        ]
+        bulk_update_fields = []
+        records_per_page = 10
+
+        def __init__(self, **kwargs):
+            super().__init__(**kwargs)
+            self.search_url = self.request.path
+            self.action_method = "asset_allocation_metod"
+
+        def get_queryset(self, queryset=None, filtered=True, *args, **kwargs):
+            if not getattr(self, "queryset", None):
+                self._saved_filters = self.request.GET
+
+                self.queryset = (
+                    self.filter_class(
+                        data=self.request.GET,
+                        queryset=self.queryset,
+                        request=self.request,
+                    )
+                    .qs.filter(
+                        Q(
+                            assetassignment__return_status__isnull=True,
+                            assetassignment__assigned_to_employee_id__id=self.request.GET[
+                                "instance_id"
+                            ],
+                        )
+                        | (
+                            Q(assetassignment__isnull=True)
+                            & Q(asset_status="Available")
+                        )
+                        | Q(
+                            assetassignment__return_status="Healthy",
+                            asset_status="Available",
+                        )
+                    )
+                    .filter(
+                        Q(
+                            asset_category_id__asset_category_name__icontains=self.request.GET.get(
+                                "search", ""
+                            )
+                        )
+                        | Q(asset_name__icontains=self.request.GET.get("search", ""))
+                    )
+                )
+
+                self.queryset = super().get_queryset(
+                    self.queryset, filtered, *args, **kwargs
+                )
+                self.assigned_assets = self.queryset.filter(asset_status="In use")
+
+            return self.queryset
+
+        def get_context_data(self, **kwargs):
+            context = super().get_context_data(**kwargs)
+            context["assigned_assets"] = self.assigned_assets
+            return context
+
+        def post(self, *args, **kwargs):
+            _response = super().post(*args, **kwargs)
+            ids = ast.literal_eval(self.request.POST["ids"])
+            employee_id = self.request.POST["instance_id"]
+            instance = Employee.objects.get(pk=employee_id)
+            assets = Asset.objects.filter(pk__in=ids).filter(asset_status="Available")
+            assigned_by = self.request.user.employee_get
+
+            for asset in assets:
+                assignment = AssetAssignment()
+                assignment.asset_id = asset
+                assignment.assigned_to_employee_id = instance
+                assignment.assigned_by_employee_id = assigned_by
+                assignment.assigned_date = datetime.today().date()
+                asset.asset_status = "In use"
+                assignment.save()
+                asset.save()
+            if assets:
+                messages.success(self.request, _("Selected Available Assets Allocated"))
+            else:
+                messages.info(self.request, _("Select Available Assets to Add"))
+            return HttpResponse(
+                """
+            <script>$("#reloadMessagesButton").click();$(".reload-record").click();</script>
+    """
+            )
+
+    def return_allocation(request, *args, **kwargs):
+        """
+        Return allocation method
+        """
+        asset_id = kwargs["asset_id"]
+        if request.method == "POST":
+            try:
+                asset_allocate_return(request, asset_id)
+            except:
+                messages.error(request, _("An error occured"))
+            return HttpResponse(
+                """
+                <script>$("#reloadMessagesButton").click();$(".reload-record").click();$("#genericModal").removeClass('oh-modal--show');</script>
+        """
+            )
+        asset_return_form = AssetReturnForm()
+        asset_allocation = AssetAssignment.objects.filter(
+            asset_id=asset_id, return_status__isnull=True
+        ).first()
+        context = {"asset_return_form": asset_return_form, "asset_id": asset_id}
+        context["asset_alocation"] = asset_allocation
+        return render(request, "cbv/allocations/asset/return_form.html", context)
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(
+    all_manager_can_enter(perm="recruitment.view_recruitment"), name="dispatch"
+)
+class GroupsView(TemplateView):
+    """
+    GroupsView
+    """
+
+    template_name = "cbv/allocations/auth/group_view.html"
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(
+    all_manager_can_enter(perm="recruitment.view_recruitment"), name="dispatch"
+)
+class Groups(TemplateView):
+    """
+    Groups
+    """
+
+    template_name = "cbv/allocations/auth/groups.html"
+
+    def get(self, request, *args, **kwargs):
+        context = {}
+        employees = Employee.objects.filter(id=request.GET["instance_id"])
+        emoloyee = employees.first()
+        context["employee"] = emoloyee
+        permissions = []
+        no_permission_models = NO_PERMISSION_MODALS
+        for app_name in APPS:
+            app_models = []
+            for model in get_models_in_app(app_name):
+                if model._meta.model_name not in no_permission_models:
+                    app_models.append(
+                        {
+                            "verbose_name": model._meta.verbose_name.capitalize(),
+                            "model_name": model._meta.model_name,
+                        }
+                    )
+            permissions.append(
+                {
+                    "app": app_name.capitalize().replace("_", " "),
+                    "app_models": app_models,
+                }
+            )
+        context["permissions"] = permissions
+        context["no_permission_models"] = no_permission_models
+        context["employees"] = paginator_qry(employees, request.GET.get("page"))
+        return render(
+            request,
+            self.template_name,
+            context,
+        )
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(
+    recruitment_manager_can_enter(perm="recruitment.view_recruitment"), name="dispatch"
+)
+class GroupAssignView(TemplateView):
+    """
+    View to assign multiple groups to a single employee
+    """
+
+    template_name = "cbv/allocations/auth/group_form.html"
+
+    def get(self, request, *args, **kwargs):
+        """
+        Get
+        """
+        employee_id = request.GET.get("employee")
+        employee = Employee.objects.get(id=employee_id)
+        groups = employee.employee_user_id.groups.all()
+        form = AddToUserGroupForm(
+            initial={
+                "group": groups,
+                "employee": request.GET.get("employee"),
+            }
+        )
+        return render(
+            request,
+            self.template_name,
+            {"form": form, "employee_id": request.GET.get("employee")},
+        )
+
+    def post(self, request, *args, **kwargs):
+        """
+        Post
+        """
+        form = AddToUserGroupForm(request.POST)
+        if form.is_valid():
+            form.save()
+            messages.success(request, _("Employee assigned to group"))
+            return HttpResponse(
+                """<script>
+                $('#groupAssignBody').closest('.oh-modal.oh-modal--show').removeClass('oh-modal--show');
+                $('.oh-inner-sidebar__link--active').click();
+                $("#reloadMessagesButton").click();
+                $(".reload-record").click();
+                </script>
+                """
+            )
+        return render(
+            request,
+            self.template_name,
+            {"form": form, "employee_id": request.POST.get("employee")},
+        )
+
+
+if app_installed("payroll"):
+    AllocationView.menues.append(
+        {
+            "menu": _("Allowance"),
+            # you will get instance_id in url params
+            "url": reverse_lazy("allocation-allowance"),
+        }
+    )
+    AllocationView.menues.append(
+        {
+            "menu": _("Deduction"),
+            # you will get instance_id in url params
+            "url": reverse_lazy("allocation-deduction"),
+        }
+    )
+
+    def allowance_allocation_metod(self):
+        """
+        Allocation method
+        """
+        return render_template(
+            "cbv/allocations/payroll/allowance/actions.html",
+            {"instance": self, "employee": _thread_locals.allowance_employee},
+        )
+
+    Allowance.allowance_allocation_metod = allowance_allocation_metod
+
+    @method_decorator(login_required, name="dispatch")
+    @method_decorator(
+        all_manager_can_enter(perm="recruitment.view_recruitment"), name="dispatch"
+    )
+    class AllowanceView(TemplateView):
+        """
+        AllowanceView
+        """
+
+        template_name = "cbv/allocations/payroll/allowance/allowance_view.html"
+
+    class AllowanceList(AllowanceListView):
+        """
+        AllowanceList
+        """
+
+        row_attrs = """
+            onclick="$(this).find('td:first [type=checkbox]').prop('checked',!$(this).find('td:first [type=checkbox]').is(':checked')).change()"
+        """
+
+        def __init__(self, **kwargs):
+            super().__init__(**kwargs)
+            self.search_url = self.request.path
+            self.action_method = "allowance_allocation_metod"
+
+        template_name = "cbv/allocations/payroll/allowance/allowance_list.html"
+
+        show_filter_tags = False
+        row_status_indications = False
+        bulk_update_fields = []
+        filter_selected = False
+
+        columns = [(_("Allowance"), "title", "get_avatar")]
+
+        def post(self, *args, **kwargs):
+            employee_id = self.request.POST["instance_id"]
+            self.instance = Employee.objects.get(pk=employee_id)
+            _thread_locals.allowance_employee = self.instance
+            if self.request.GET.get("exclude"):
+                allowance = Allowance.objects.get(pk=self.request.POST["allowance_id"])
+                allowance.exclude_employees.add(self.instance)
+                allowance.specific_employees.remove(self.instance)
+
+                messages.success(self.request, _("Allowance excluded") + f" {allowance}")
+            else:
+                ids = ast.literal_eval(self.request.POST["ids"])
+                allowances = Allowance.objects.filter(pk__in=ids)
+                for allowance in allowances:
+                    allowance.exclude_employees.remove(self.instance)
+                    if not allowance.include_active_employees:
+                        allowance.specific_employees.add(self.instance)
+                if allowances:
+                    messages.success(self.request, _("Added to Selected Allowances"))
+                else:
+                    messages.info(self.request, _("Select Allowances to Add"))
+            return HttpResponse(
+                """
+            <script>$("#reloadMessagesButton").click();$(".reload-record").click();</script>
+    """
+            )
+
+        def get(self, request, *args, **kwargs):
+            self.instance = Employee.objects.get(pk=request.GET["instance_id"])
+            _thread_locals.allowance_employee = self.instance
+
+            return super().get(request, *args, **kwargs)
+
+        def get_context_data(self, **kwargs):
+            context = super().get_context_data(**kwargs)
+            context["assigned_allowances"] = self.assigned_allowances
+            return context
+
+        def get_queryset(self):
+            self.queryset = (
+                super()
+                .get_queryset()
+                .filter(
+                    Q(include_active_employees=True)
+                    | Q(specific_employees=self.instance)
+                )
+                .filter(title__icontains=self.request.GET.get("search", ""))
+                .distinct()
+            )
+            self.assigned_allowances = self.queryset.exclude(
+                exclude_employees=self.instance
+            )
+            return self.queryset
+        
+        def dispatch(self, request, *args, **kwargs):
+            """
+            To avoide parent permissions
+            """
+            return super(AllowanceListView, self).dispatch(request, *args, **kwargs)
+
+
+    def deduction_allocation_metod(self):
+        """
+        Allocation method
+        """
+        return render_template(
+            "cbv/allocations/payroll/deduction/actions.html",
+            {"instance": self, "employee": _thread_locals.deduction_employee},
+        )
+
+    Deduction.deduction_allocation_metod = deduction_allocation_metod
+
+    @method_decorator(login_required, name="dispatch")
+    @method_decorator(
+        all_manager_can_enter(perm="recruitment.view_recruitment"), name="dispatch"
+    )
+    class DeductionView(TemplateView):
+        """
+        AllowanceView
+        """
+
+        template_name = "cbv/allocations/payroll/deduction/deduction_view.html"
+
+    @method_decorator(login_required, name="dispatch")
+    @method_decorator(
+        all_manager_can_enter(perm="recruitment.view_recruitment"), name="dispatch"
+    )
+    class DeductionList(DeductionListView):
+        """
+        AllowanceList
+        """
+
+        row_attrs = """
+            onclick="$(this).find('td:first [type=checkbox]').prop('checked',!$(this).find('td:first [type=checkbox]').is(':checked')).change()"
+        """
+
+        def __init__(self, **kwargs):
+            super().__init__(**kwargs)
+            self.search_url = self.request.path
+            self.action_method = "deduction_allocation_metod"
+
+        template_name = "cbv/allocations/payroll/deduction/deduction_list.html"
+
+        show_filter_tags = False
+        row_status_indications = False
+        bulk_update_fields = []
+        filter_selected = False
+
+        columns = [(("Deduction"), "title", "get_avatar")]
+
+        def post(self, *args, **kwargs):
+            employee_id = self.request.POST["instance_id"]
+            self.instance = Employee.objects.get(pk=employee_id)
+            _thread_locals.deduction_employee = self.instance
+            if self.request.GET.get("exclude"):
+                deduction = Deduction.objects.get(pk=self.request.POST["deduction_id"])
+                deduction.exclude_employees.add(self.instance)
+                deduction.specific_employees.remove(self.instance)
+
+                messages.success(self.request, _("Deduction excluded") + f" {deduction}")
+            else:
+                ids = ast.literal_eval(self.request.POST["ids"])
+                deductions = Deduction.objects.filter(pk__in=ids)
+                for deduction in deductions:
+                    deduction.exclude_employees.remove(self.instance)
+                    if not deduction.include_active_employees:
+                        deduction.specific_employees.add(self.instance)
+                if deductions:
+                    messages.success(self.request, _("Added to Selected Deductions"))
+                else:
+                    messages.info(self.request, _("Select Deductions to Add"))
+            return HttpResponse(
+                """
+            <script>$("#reloadMessagesButton").click();$(".reload-record").click();</script>
+    """
+            )
+
+        def get(self, request, *args, **kwargs):
+            self.instance = Employee.objects.get(pk=request.GET["instance_id"])
+            _thread_locals.deduction_employee = self.instance
+
+            return super().get(request, *args, **kwargs)
+
+        def get_context_data(self, **kwargs):
+            context = super().get_context_data(**kwargs)
+            context["assigned_deductions"] = self.assigned_deductions
+            return context
+
+        def get_queryset(self):
+            self.queryset = (
+                super()
+                .get_queryset()
+                .filter(
+                    Q(include_active_employees=True)
+                    | Q(specific_employees=self.instance)
+                )
+                .filter(title__icontains=self.request.GET.get("search", ""))
+                .distinct()
+            )
+            self.assigned_deductions = self.queryset.exclude(
+                exclude_employees=self.instance
+            )
+            return self.queryset
+    
+        def dispatch(self, request, *args, **kwargs):
+            """
+            To avoide parent permissions
+            """
+            return super(DeductionListView, self).dispatch(request, *args, **kwargs)
+
+
+
+def is_any_recruitment_manager(request, instance, *args, **kwargs):
+    """
+    check the user is a recruitment manager
+    """
+    return (
+        request.user.has_perm("recruitment.change_recruitment")
+        or request.user.has_perm("auth.add_group")
+        or request.user.has_perm("auth.add_permission")
+        or request.user.employee_get.recruitment_set.exists()
+    )
+
+
+def completion_percentage(self):
+    total_fields = len(self._meta.fields) - 1  # Excluding id field
+    filled_fields = sum(1 for field in self._meta.fields if getattr(self, field.name))
+
+    return (filled_fields / total_fields) * 100 if total_fields > 0 else 0
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(
+    all_manager_can_enter(perm="recruitment.view_recruitment"), name="dispatch"
+)
+class Summary(TemplateView):
+    """
+    Summary
+    """
+
+    template_name = "cbv/allocations/summary.html"
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        instance = Employee.objects.get(pk=self.request.GET["instance_id"])
+        context["instance"] = instance
+
+        personal_info_fields = [
+            "badge_id",
+            "employee_first_name",
+            "employee_last_name",
+            "employee_profile",
+            "email",
+            "phone",
+            "address",
+            "country",
+            "state",
+            "city",
+            "zip",
+            "dob",
+            "gender",
+            "qualification",
+            "experience",
+            "marital_status",
+            "emergency_contact",
+            "emergency_contact_name",
+            "emergency_contact_relation",
+        ]
+        work_info_fields = [
+            "job_position_id",
+            "department_id",
+            "work_type_id",
+            "employee_type_id",
+            "job_role_id",
+            "reporting_manager_id",
+            "company_id",
+            "location",
+            "email",
+            "mobile",
+            "shift_id",
+            "date_joining",
+            "contract_end_date",
+            "basic_salary",
+            "salary_hour",
+        ]
+        bank_info_fields = [
+            "bank_name",
+            "account_number",
+            "branch",
+            "address",
+            "country",
+            "state",
+            "city",
+            "any_other_code1",
+            "any_other_code2",
+        ]
+        personal_filled_fields = sum(
+            1 for field in personal_info_fields if getattr(instance, field)
+        )
+        total_personal_fields = len(personal_info_fields)
+
+        bank_instance = EmployeeBankDetails.objects.filter(employee_id=instance).first()
+        work_instance = EmployeeWorkInformation.objects.filter(
+            employee_id=instance
+        ).first()
+        context["work_percentage"] = 0
+        context["bank_percentage"] = 0
+        if work_instance:
+            work_filled_fields = sum(
+                1
+                for field in work_info_fields
+                if getattr(instance.employee_work_info, field)
+            )
+            total_work_fields = len(work_info_fields)
+            context["work_percentage"] = (work_filled_fields / total_work_fields) * 100
+        if bank_instance:
+            bank_filled_fields = sum(
+                1
+                for field in bank_info_fields
+                if getattr(instance.employee_bank_details, field)
+            )
+            total_bank_fields = len(bank_info_fields)
+            context["bank_percentage"] = (bank_filled_fields / total_bank_fields) * 100
+
+        context["personal_percentage"] = (
+            personal_filled_fields / total_personal_fields
+        ) * 100
+        return context
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(
+    all_manager_can_enter(perm="recruitment.view_recruitment"), name="dispatch"
+)
+class ToggleDashboardAccess(View):
+    """
+    ToggleDashboardAccess
+    """
+
+    def post(self, request, *args, **kwargs):
+        """
+        post
+        """
+        instance = Employee.objects.get(pk=request.GET["instance_id"])
+        instance.employee_user_id.is_active = not instance.employee_user_id.is_active
+        instance.employee_user_id.save()
+        if instance.employee_user_id.is_active:
+            messages.success(request, _("Dashboard access provided"))
+        else:
+            messages.success(request, _("Dashboard access removed"))
+        return HttpResponse(
+            """
+        <script>$("#reloadMessagesButton").click();$(".reload-record").click();</script>
+"""
+        )
+
+
+AllocationView.menues.append(
+    {
+        "menu": _("Groups & Permissions"),
+        # you will get instance_id in url params
+        "url": reverse_lazy("allocation-user-group-view"),
+        "accessibility": "employee.cbv.allocations.is_any_recruitment_manager",
+    }
+)
diff --git a/employee/cbv/disciplinary_actions.py b/employee/cbv/disciplinary_actions.py
new file mode 100644
index 000000000..b2c85dea2
--- /dev/null
+++ b/employee/cbv/disciplinary_actions.py
@@ -0,0 +1,276 @@
+"""
+disciplinary actions
+"""
+
+from typing import Any
+import contextlib
+from django import forms
+from django.http import HttpResponse
+from django.shortcuts import render
+from django.urls import reverse, reverse_lazy
+from django.utils.decorators import method_decorator
+from django.utils.translation import gettext_lazy as _
+from django.contrib import messages
+from notifications.signals import notify
+from base.methods import filtersubordinates
+from employee.filters import DisciplinaryActionFilter
+from employee.forms import ActiontypeForm, DisciplinaryActionForm
+from employee.models import Actiontype, DisciplinaryAction
+from horilla_views.cbv_methods import login_required, permission_required
+from horilla_views.generic.cbv.views import (
+    HorillaDetailedView,
+    HorillaFormView,
+    HorillaListView,
+    HorillaNavView,
+    TemplateView,
+)
+
+
+@method_decorator(login_required, name="dispatch")
+class DisciplinaryActionsView(TemplateView):
+    """
+    disciplinary actions
+    """
+
+    template_name = "cbv/disciplinary_actions/disciplinary_actions.html"
+
+
+@method_decorator(login_required, name="dispatch")
+class DisciplinaryActionsList(HorillaListView):
+    """
+    List view of disciplinary actions
+    """
+
+    model = DisciplinaryAction
+    filter_class = DisciplinaryActionFilter
+
+    def get_queryset(self):
+        queryset = super().get_queryset()
+        data = queryset
+        if not self.request.user.has_perm("employee.view_disciplinaryaction"):
+            employee = self.request.user.employee_get
+            queryset = filtersubordinates(
+                self.request, queryset, "base.add_disciplinaryaction"
+            ).distinct()
+            queryset = queryset | data.filter(employee_id=employee).distinct()
+        return queryset
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("disciplinary-actions-list")
+        self.view_id = "dis-container"
+        if any(
+            self.request.user.has_perm(perm)
+            for perm in [
+                "employee.change_disciplinaryaction",
+                "employee.delete_disciplinaryaction",
+                "employee.add_disciplinaryaction",
+            ]
+        ):
+            self.action_method = "actions"
+
+    columns = [
+        (_("Employee"), "employee_column"),
+        (_("Action Taken"), "action_taken_col"),
+        (_("Login Block"), "block_option_col"),
+        (_("Action Date"), "action_date_col"),
+        (_("Attachments"), "attachments_col"),
+        (_("Description"), "description"),
+    ]
+
+    header_attrs = {
+        "employee_column": """
+                            style="width:200px !important;"
+                            """
+    }
+
+    sortby_mapping = [
+        ("Action Taken", "action_taken_col"),
+        ("Action Date", "action_date_col"),
+    ]
+
+    row_attrs = """
+                class ="oh-sticky-table__tr oh-permission-table__tr oh-permission-table--collapsed"
+                hx-get='{dis_action_detail_view}?instance_ids={ordered_ids}'
+                hx-target="#genericModalBody"
+                data-target="#genericModal"
+                data-toggle="oh-modal-toggle"
+                """
+
+
+@method_decorator(login_required, name="dispatch")
+class DisciplinaryActionsNav(HorillaNavView):
+    """
+    For nav bar
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("disciplinary-actions-list")
+        if self.request.user.has_perm("employee.view_disciplinaryaction"):
+            self.filter_body_template = "cbv/disciplinary_actions/filters.html"
+        if self.request.user.has_perm("employee.add_disciplinaryaction"):
+            self.create_attrs = f"""
+                                hx-get='{reverse_lazy('create-actions')}'"
+                                hx-target="#genericModalBody"
+                                data-target="#genericModal"
+                                data-toggle="oh-modal-toggle"
+                                """
+
+    nav_title = "Disciplinary Actions"
+    filter_instance = DisciplinaryActionFilter()
+    filter_form_context_name = "form"
+    search_swap_target = "#listContainer"
+
+
+class DynamicActionTypeFormView(HorillaFormView):
+
+    model = Actiontype
+    form_class = ActiontypeForm
+    new_display_title = "Create Action Type"
+    is_dynamic_create_view = True
+
+    def form_valid(self, form: ActiontypeForm) -> HttpResponse:
+
+        if form.is_valid():
+            message = _("Action Created")
+            messages.success(self.request, _(message))
+            form.save()
+            return self.HttpResponse()
+        return super().form_valid(form)
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(
+    permission_required("employee.add_disciplinaryaction"), name="dispatch"
+)
+class DisciplinaryActionsFormView(HorillaFormView):
+    """
+    Form View
+    """
+
+    model = DisciplinaryAction
+    form_class = DisciplinaryActionForm
+    template_name = "cbv/disciplinary_actions/forms/create_form.html"
+    new_display_title = "Take An Action"
+    dynamic_create_fields = [("action", DynamicActionTypeFormView)]
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        # form = super().get_form(self.form_class)
+        if self.form.instance.pk:
+            self.form_class(instance=self.form.instance)
+            self.form_class.verbose_name = "Edit Action"
+        context["form"] = self.form
+        return context
+
+    def form_invalid(self, form: Any) -> HttpResponse:
+        if not form.is_valid():
+            errors = form.errors.as_data()
+            return render(
+                self.request, self.template_name, {"form": form, "errors": errors}
+            )
+        return super().form_invalid(form)
+
+    def form_valid(self, form: DisciplinaryActionForm) -> HttpResponse:
+        self.form_class(self.request.FILES)
+        if form.is_valid():
+            if form.instance.pk:
+                message = _("Disciplinary action updated Successfully")
+            else:
+                employees = []
+                employee_ids = form.cleaned_data["employee_id"]
+                for employee in employee_ids:
+                    user = employee.employee_user_id
+                    employees.append(user)
+                    with contextlib.suppress(Exception):
+                        notify.send(
+                            self.request.user.employee_get,
+                            recipient=employees,
+                            verb="Disciplinary action is taken on you.",
+                            verb_ar="تم اتخاذ إجراء disziplinarisch ضدك.",
+                            verb_de="Disziplinarische Maßnahmen wurden gegen Sie ergriffen.",
+                            verb_es="Se ha tomado acción disciplinaria en tu contra.",
+                            verb_fr="Des mesures disciplinaires ont été prises à votre encontre.",
+                            redirect="/employee/disciplinary-actions/",
+                            icon="chatbox-ellipses",
+                        )
+                message = _("Disciplinary action created Successfully")
+            form.save()
+            messages.success(self.request, _(message))
+            return self.HttpResponse()
+        return super().form_valid(form)
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(
+    permission_required("employee.add_disciplinaryaction"), name="dispatch"
+)
+class DisciplinaryActionsFormDuplicate(HorillaFormView):
+    """
+    Duplicate form view
+    """
+
+    model = DisciplinaryAction
+    form_class = DisciplinaryActionForm
+    template_name = "cbv/disciplinary_actions/forms/create_form.html"
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        original_object = DisciplinaryAction.objects.get(id=self.kwargs["pk"])
+        form = self.form_class(instance=original_object)
+        for field_name, field in form.fields.items():
+            if isinstance(field, forms.CharField):
+                if field.initial:
+                    initial_value = field.initial
+                else:
+                    initial_value = f"{form.initial.get(field_name, '')} (copy)"
+                form.initial[field_name] = initial_value
+                form.fields[field_name].initial = initial_value
+        context["form"] = form
+        self.form_class.verbose_name = _("Duplicate")
+        return context
+
+    def form_invalid(self, form: Any) -> HttpResponse:
+        if not form.is_valid():
+            errors = form.errors.as_data()
+            return render(
+                self.request, self.template_name, {"form": form, "errors": errors}
+            )
+        return super().form_invalid(form)
+
+    def form_valid(self, form: DisciplinaryActionForm) -> HttpResponse:
+        form = self.form_class(self.request.POST)
+        if form.is_valid():
+            message = _("Disciplinary action created Successfully")
+            form.save()
+            messages.success(self.request, _(message))
+            return self.HttpResponse()
+        return super().form_valid(form)
+
+
+@method_decorator(login_required, name="dispatch")
+class DisciplinaryActionsDetailView(HorillaDetailedView):
+    """
+    detail view of page
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.body = [
+            (_("Employees"), "employee_detail"),
+            (_("Login Block"), "block_option_col"),
+            (_("Action Date"), "action_date_col"),
+            (_("Attachments"), "attachments_col"),
+            (_("Description"), "description"),
+        ]
+
+    action_method = "detail_actions"
+
+    model = DisciplinaryAction
+    title = _("Details")
+    header = {
+        "title": "action",
+        "subtitle": "",
+        "avatar": "get_avatar",
+    }
diff --git a/employee/cbv/document_request.py b/employee/cbv/document_request.py
new file mode 100644
index 000000000..a42cbee8e
--- /dev/null
+++ b/employee/cbv/document_request.py
@@ -0,0 +1,177 @@
+"""
+This page handles the cbv methods for document request page
+"""
+
+from typing import Any
+from django import forms
+from django.contrib import messages
+from django.http import HttpResponse
+from django.shortcuts import get_object_or_404
+from django.urls import reverse
+from employee.models import Employee
+from notifications.signals import notify
+from django.utils.decorators import method_decorator
+from django.utils.translation import gettext_lazy as _
+from base.methods import choosesubordinates
+from horilla.decorators import manager_can_enter
+from horilla_documents.forms import DocumentRejectCbvForm, DocumentRequestForm, DocumentUpdateForm,DocumentForm
+from horilla_documents.models import Document, DocumentRequest
+from horilla_views.generic.cbv.views import HorillaFormView
+from horilla_views.cbv_methods import login_required
+
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(manager_can_enter("horilla_documents.add_documentrequests"),name="dispatch")
+class DocumentRequestCreateForm(HorillaFormView):
+    """
+    form view for create and update document request
+    """
+
+    form_class = DocumentRequestForm
+    model = DocumentRequest
+    new_display_title = _("Create Document Request")
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        self.form = choosesubordinates(self.request, self.form, "horilla_documents.add_documentrequest")
+        if self.form.instance.pk:
+            self.form_class.verbose_name = _("Update Document Request")
+
+        return context
+
+    def form_valid(self, form: DocumentRequestForm) -> HttpResponse:
+        if form.is_valid():
+            if form.instance.pk:
+                pk = self.form.instance.pk
+                documents = Document.objects.filter(document_request_id=pk)
+                doc_obj = form.save()
+                doc_obj.employee_id.set(Employee.objects.filter(id__in=form.data.getlist("employee_id")))
+                documents.exclude(employee_id__in=doc_obj.employee_id.all()).delete()
+                messages.success(self.request, _("Document Request Updated Successfully"))
+            else:
+                messages.success(self.request, _("Document request created successfully"))
+                emp = form.cleaned_data['employee_id'].all()
+                users = [ user.employee_user_id for user in emp ]
+                notify.send(
+                    self.request.user.employee_get,
+                    recipient=users,
+                    verb=f"{self.request.user.employee_get} requested a document.",
+                    verb_ar=f"طلب {self.request.user.employee_get} مستنداً.",
+                    verb_de=f"{self.request.user.employee_get} hat ein Dokument angefordert.",
+                    verb_es=f"{self.request.user.employee_get} solicitó un documento.",
+                    verb_fr=f"{self.request.user.employee_get} a demandé un document.",
+                    redirect=reverse("employee-profile"),
+                    icon="chatbox-ellipses",
+                )
+                form.save()
+            return self.HttpResponse("<script>window.location.reload();</script>")
+        return super().form_valid(form)
+    
+
+class DocumentCreateForm(HorillaFormView):
+    """
+    form view for upload document
+    """
+
+    form_class = DocumentForm
+    model = Document
+    new_display_title = _("Document")
+
+    def get_initial(self) -> dict:
+        initial = super().get_initial()
+        employee_id = self.kwargs.get("emp_id")
+        initial["employee_id"] = employee_id
+        initial["expiry_date"] = None
+        return initial
+
+    def form_valid(self, form: DocumentForm) -> HttpResponse:
+        if form.is_valid():
+            messages.success(self.request, _("Document Uploaded Successfully"))
+            form.save()
+            return HttpResponse("<script>window.location.reload();</script>")
+        return super().form_valid(form)
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(manager_can_enter("horilla_documents.add_document"),name="dispatch")
+class DocumentRejectCbvForm(HorillaFormView):
+    """
+    form view for rejecting document on document request and employee individual view
+    """
+
+    model = Document
+    form_class = DocumentRejectCbvForm
+    hx_confirm = _("Do you want to reject this request")
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        if self.form.instance.pk:
+            self.form_class.verbose_name = _("Reject")
+        return context
+    
+    def form_valid(self, form: DocumentRejectCbvForm) -> HttpResponse:
+        if form.is_valid():
+            pk = self.form.instance.pk
+            document_obj = get_object_or_404(Document, id=pk)
+            if document_obj.document:
+                if form.is_valid():
+                    document_obj.status = "rejected"
+                    document_obj.save()
+                    messages.error(self.request, _("Document request rejected"))
+            else:
+                messages.error(self.request, _("No document uploaded"))
+            # form.save()
+            return HttpResponse("<script>window.location.reload();</script>")
+        return super().form_valid(form)
+    
+
+
+class DocumentUploadForm(HorillaFormView):
+    """
+    form view for upload documents on document request and employee individual view
+    """
+
+    model = Document
+    form_class = DocumentUpdateForm
+    template_name = "cbv/documents/inherit_form.html"
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        self.form.fields["title"].widget = forms.HiddenInput()
+        self.form.fields["employee_id"].widget = forms.HiddenInput()
+        self.form.fields["document_request_id"].widget = forms.HiddenInput()
+        self.form.fields["status"].widget = forms.HiddenInput()
+        self.form.fields["reject_reason"].widget = forms.HiddenInput()
+        self.form.fields["is_digital_asset"].widget = forms.HiddenInput()
+
+        if self.form.instance.pk:
+            self.form_class.verbose_name = _("Upload File")
+        return context
+    
+
+    def form_valid(self, form: DocumentUpdateForm) -> HttpResponse:
+        if form.is_valid():
+            if form.instance.pk:
+                messages.success(self.request, _("Document uploaded successfully"))
+                try:
+                    notify.send(
+                        self.request.user.employee_get,
+                        recipient=self.request.user.employee_get.get_reporting_manager().employee_user_id,
+                        verb=f"{self.request.user.employee_get} uploaded a document",
+                        verb_ar=f"قام {self.request.user.employee_get} بتحميل مستند",
+                        verb_de=f"{self.request.user.employee_get} hat ein Dokument hochgeladen",
+                        verb_es=f"{self.request.user.employee_get} subió un documento",
+                        verb_fr=f"{self.request.user.employee_get} a téléchargé un document",
+                        redirect=reverse(
+                            "employee-view-individual",
+                            kwargs={"obj_id": self.request.user.employee_get.id},
+                        ),
+                        icon="chatbox-ellipses",
+                    )
+                except:
+                    pass
+            form.save()
+            return HttpResponse("<script>window.location.reload();</script>")
+        return super().form_valid(form)
+
diff --git a/employee/cbv/employee_profile.py b/employee/cbv/employee_profile.py
new file mode 100644
index 000000000..3514bc38b
--- /dev/null
+++ b/employee/cbv/employee_profile.py
@@ -0,0 +1,177 @@
+"""
+This page handles the cbv methods of employee individual view
+"""
+
+from django.urls import reverse_lazy
+from django.http import HttpResponse
+from django.shortcuts import redirect, render
+from django.views import View
+from base.cbv.mail_log_tab import MailLogTabList
+from base.cbv.work_shift_tab import WorkAndShiftTabView
+from base import views as base_views
+from base.context_processors import enable_profile_edit
+from base.forms import AddToUserGroupForm
+from employee import views
+from employee.filters import EmployeeFilter
+from employee.models import Employee
+from horilla_views.cbv_methods import login_required, permission_required
+from horilla_views.generic.cbv.views import HorillaProfileView
+from horilla import settings
+from django.utils.decorators import method_decorator
+from django.contrib.auth.models import Group
+from django.contrib import messages
+from django.utils.translation import gettext_lazy as _
+
+
+Employee.cbv_employee_profile_edi_url = reverse_lazy("edit-profile")
+
+class EmployeeProfileView(HorillaProfileView):
+    """
+    EmployeeProfileView
+    """
+
+    template_name = "cbv/profile/profile_view.html"
+
+    model = Employee
+    filter_class = EmployeeFilter
+    push_url = "employee-view-individual"
+    key_name = "obj_id"
+
+    def __init__(self, **kwargs):
+        super().__init__(**kwargs)
+        employee = self.request.user.employee_get
+        if self.request.user.has_perm("employee.change_employee"):
+
+            self.actions = [
+                {
+                    "title": "Edit",
+                    "src": f"/{settings.STATIC_URL}images/ui/editing.png",
+                    "accessibility": "employee.cbv.accessibility.edit_accessibility",
+                    "attrs": """
+                    onclick="window.location.href='{get_update_url}'"
+                    """,
+                },
+                {
+                    "title": "Block Account",
+                    "src": f"/{settings.STATIC_URL}images/ui/block-user.png",
+                    "accessibility": "employee.cbv.accessibility.block_account_accessibility",
+                    "attrs": """
+                    id="block-account"
+                    """,
+                },
+                {
+                    "title": "Un-Block Account",
+                    "src": f"/{settings.STATIC_URL}images/ui/unlock.png",
+                    "accessibility": "employee.cbv.accessibility.un_block_account_accessibility",
+                    "attrs": """
+                    id="block-account"
+                    """,
+                },
+                {
+                    "title": "Send password reset link",
+                    "src": f"/{settings.STATIC_URL}images/ui/key.png",
+                    "accessibility": "employee.cbv.accessibility.password_reset_accessibility",
+                    "attrs": """
+                    onclick="$('#reset-button').click();"
+                    """,
+                },
+            ]
+        elif employee.pk == kwargs["pk"] and enable_profile_edit(self.request).get(
+            "profile_edit_enabled"
+        ):
+            self.actions = [
+                {
+                    "title": "Edit Profile",
+                    "src": f"/{settings.STATIC_URL}images/ui/editing.png",
+                    "accessibility": "employee.cbv.accessibility.edit_accessibility",
+                    "attrs": """
+                    onclick="window.location.href='{cbv_employee_profile_edi_url}'"
+                    """,
+                },
+                {
+                    "title": "Send password reset link",
+                    "src": f"/{settings.STATIC_URL}images/ui/key.png",
+                    "accessibility": "employee.cbv.accessibility.password_reset_accessibility",
+                    "attrs": """
+                    onclick="$('#reset-button').click();"
+                    """,
+                },
+            ]
+
+
+EmployeeProfileView.add_tab(
+    tabs=[
+        {
+            "title": "About",
+            "view": views.about_tab,
+        },
+        {
+            "title": "Work Type & Shift",
+            # "view": views.shift_tab,
+            "view": WorkAndShiftTabView.as_view(),
+            "accessibility": "employee.cbv.accessibility.workshift_accessibility",
+        },
+        {
+            "title": "Groups & Permissions",
+            "view": base_views.employee_permission_assign,
+            "accessibility": "employee.cbv.accessibility.permission_accessibility",
+        },
+        {
+            "title": "Note",
+            "view": views.note_tab,
+            "accessibility": "employee.cbv.accessibility.note_accessibility",
+        },
+        {
+            "title": "Documents",
+            "view": views.document_tab,
+            "accessibility": "employee.cbv.accessibility.document_accessibility",
+        },
+        {
+            "title": "Mail Log",
+            "view": MailLogTabList.as_view(),
+            "accessibility": "employee.cbv.accessibility.mail_log_accessibility",
+        },
+        {
+            "title": "History",
+            "view": views.history_tab,
+            "accessibility": "employee.cbv.accessibility.history_accessibility",
+        },
+    ]
+)
+
+
+@method_decorator(
+    [login_required, permission_required("auth.add_group")], name="dispatch"
+)
+class GroupAssignView(View):
+    """
+    View to assign multiple groups to a single employee
+    """
+
+    def get(self, request, *args, **kwargs):
+        employee_id = request.GET.get("employee")
+        employee = Employee.objects.get(id=employee_id)
+        groups = employee.employee_user_id.groups.all
+        form = AddToUserGroupForm(
+            initial={
+                "group": groups,
+                "employee": request.GET.get("employee"),
+            }
+        )
+        return render(
+            request,
+            "cbv/auth/user_assign_to_group.html",
+            {"form": form, "employee_id": request.GET.get("employee")},
+        )
+
+    def post(self, request, *args, **kwargs):
+        form = AddToUserGroupForm(request.POST)
+        if form.is_valid():
+            form.save()
+            messages.success(request, _("Employee assigned to group"))
+            return HttpResponse("<script>window.location.reload()</script>")
+        return render(
+            request,
+            "cbv/auth/user_assign_to_group.html",
+            {"form": form, "employee_id": request.POST.get("employee")},
+        )
diff --git a/employee/cbv/employee_tags.py b/employee/cbv/employee_tags.py
new file mode 100644
index 000000000..0dd4ad307
--- /dev/null
+++ b/employee/cbv/employee_tags.py
@@ -0,0 +1,155 @@
+"""
+this page is handling the cbv methods for employee tags in settings
+"""
+
+from typing import Any
+from django.http import HttpResponse
+from django.shortcuts import render
+from django.urls import reverse
+from django.contrib import messages
+from django.utils.decorators import method_decorator
+from django.utils.translation import gettext_lazy as _
+from base.forms import EmployeeTagForm
+from employee.filters import EmployeeTagFilter
+from employee.models import EmployeeTag
+from horilla_views.cbv_methods import login_required, permission_required
+from horilla_views.generic.cbv.views import (
+    HorillaFormView,
+    HorillaListView,
+    HorillaNavView,
+)
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(
+    permission_required(perm="employee.view_employeetag"), name="dispatch"
+)
+class EmployeeTagListView(HorillaListView):
+    """
+    list view for employee tag in settings
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("employee-tag-list")
+        self.actions = []
+        if self.request.user.has_perm("employee.change_employeetag"):
+            self.actions.append(
+                {
+                    "action": _("Edit"),
+                    "icon": "create-outline",
+                    "attrs": """
+                        class="oh-btn oh-btn--light-bkg w-100"
+                        hx-get='{get_update_url}?instance_ids={ordered_ids}'
+								hx-target="#genericModalBody"
+								data-toggle="oh-modal-toggle"
+								data-target="#genericModal"
+                      """,
+                }
+            )
+        if self.request.user.has_perm("employee.delete_employeetag"):
+            self.actions.append(
+                {
+                    "action": _("Delete"),
+                    "icon": "trash-outline",
+                    "attrs": """
+                        class="oh-btn oh-btn--light-bkg w-100 text-danger"
+                        hx-confirm="Are you sure you want to delete this employee tag?"
+                        hx-swap="outerHTML"
+                        hx-post="{get_delete_url}"
+                        hx-target="#employeeTagTr{get_instance_id}"
+                       
+                                    
+                      """,
+                }
+            )
+
+    model = EmployeeTag
+    filter_class = EmployeeTagFilter
+
+    row_attrs = """
+                id="employeeTagTr{get_instance_id}"
+                """
+
+    columns = [
+        (_("Title"), "title"),
+        (_("Color"), "color_span"),
+    ]
+
+    header_attrs = {
+        "title": """ style="width:200px !important" """,
+        "color_span": """ style="width:200px !important" """,
+    }
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(
+    permission_required(perm="employee.view_employeetag"), name="dispatch"
+)
+class EmployeetagNavView(HorillaNavView):
+    """
+    nav bar of the department view
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("employee-tag-list")
+        if self.request.user.has_perm("employee.add_employeetag"):
+            self.create_attrs = f"""
+                                onclick = "event.stopPropagation();"
+                                data-toggle="oh-modal-toggle"
+                                data-target="#genericModal"
+                                hx-target="#genericModalBody"
+                                hx-get="{reverse('employee-tag-create-form')}"
+                                """
+
+    nav_title = _("Employee Tags")
+    search_swap_target = "#listContainer"
+    filter_instance = EmployeeTagFilter()
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(
+    permission_required(perm="employee.add_employeetag"), name="dispatch"
+)
+class EmployeeTagCreateForm(HorillaFormView):
+    """
+    form view for creating and update employee tags in settings
+    """
+
+    model = EmployeeTag
+    form_class = EmployeeTagForm
+    new_display_title = _("Create Employee Tag")
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        form = self.form_class()
+        if self.form.instance.pk:
+            form = self.form_class(instance=self.form.instance)
+            self.form_class.verbose_name = _("Employee Tag Update")
+        context[form] = form
+        return context
+
+    def form_invalid(self, form: Any) -> HttpResponse:
+        if self.form.instance.pk:
+            self.form_class.verbose_name = _("Employee Tag Update")
+        if not form.is_valid():
+            errors = form.errors.as_data()
+            return render(
+                self.request, self.template_name, {"form": form, "errors": errors}
+            )
+        return super().form_invalid(form)
+
+    def form_valid(self, form: EmployeeTagForm) -> HttpResponse:
+        if form.is_valid():
+            if form.instance.pk:
+                messages.success(
+                    self.request, _("Tag has been updated successfully!")
+                )
+            else:
+                messages.success(
+                    self.request, _("Tag has been created successfully!")
+                )
+            form.save()
+            return self.HttpResponse()
+        return super().form_valid(form)
diff --git a/employee/cbv/employees.py b/employee/cbv/employees.py
new file mode 100644
index 000000000..a0654819b
--- /dev/null
+++ b/employee/cbv/employees.py
@@ -0,0 +1,623 @@
+"""
+employee view page
+"""
+
+import logging
+import threading
+from typing import Any
+
+from django import forms
+from django.contrib.auth.hashers import identify_hasher, make_password
+from django.contrib.auth.models import User
+from django.core.exceptions import ImproperlyConfigured
+from django.db import transaction
+from django.dispatch import receiver
+from django.urls import reverse, reverse_lazy
+from django.utils.decorators import method_decorator
+from django.utils.translation import gettext_lazy as _
+
+from accessibility.cbv_decorators import enter_if_accessible
+from accessibility.models import DefaultAccessibility
+from base.context_processors import enable_profile_edit
+from base.methods import is_reportingmanager
+from employee.filters import EmployeeFilter
+from employee.forms import BulkUpdateFieldForm, EmployeeExportExcelForm
+from employee.models import Employee, EmployeeBankDetails, EmployeeWorkInformation
+from employee.templatetags.employee_filter import edit_accessibility
+from employee.views import _check_reporting_manager
+from horilla.horilla_middlewares import _thread_locals
+from horilla.signals import post_generic_delete, post_generic_import
+from horilla_views.cbv_methods import login_required
+from horilla_views.forms import DynamicBulkUpdateForm
+from horilla_views.generic.cbv.views import (
+    HorillaCardView,
+    HorillaListView,
+    HorillaNavView,
+    TemplateView,
+)
+
+logger = logging.getLogger(__name__)
+
+
+def profile_edit_accessibility_display(self):
+    """
+    Profile edit accessible
+    """
+    request = _thread_locals.request
+    if self.pk in request.all_edit_accessible_employees:
+        return "Revoke Profile Edit Access"
+    return "Add Profile Edit Access"
+
+
+def toggle_profile_edit_access_url(self):
+    """
+    toggle profiel edit access url get method
+    """
+    return (
+        reverse("profile-edit-access", kwargs={"emp_id": self.pk})
+        + "?feature=profile_edit"
+    )
+
+
+Employee.profile_edit_accessibility_display = profile_edit_accessibility_display
+Employee.toggle_profile_edit_access_url = toggle_profile_edit_access_url
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(
+    enter_if_accessible(
+        feature="employee_view",
+        perm="employee.view_employee",
+        method=_check_reporting_manager,
+    ),
+    name="dispatch",
+)
+class EmployeesView(TemplateView):
+    """
+    Employees view
+
+    """
+
+    template_name = "cbv/employees_view/view_employees.html"
+
+    def get_context_data(self, **kwargs: Any):
+        context = super().get_context_data(**kwargs)
+        update_fields = BulkUpdateFieldForm()
+        context["update_fields_form"] = update_fields
+        return context
+
+
+from base import models as base_models
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(
+    enter_if_accessible(
+        feature="employee_view",
+        perm="employee.view_employee",
+        method=_check_reporting_manager,
+    ),
+    name="dispatch",
+)
+class EmployeesList(HorillaListView):
+    """
+    List view of employees
+    """
+
+    model = Employee
+    filter_class = EmployeeFilter
+    view_id = "view-container"
+    bulk_template = "cbv/employees_view/bulk_update_page.html"
+    bulk_update_fields = [
+        "experience",
+        "gender",
+        "country",
+        "state",
+        "city",
+        "zip",
+        "marital_status",
+        "children",
+        "employee_work_info__department_id",
+        "employee_work_info__job_position_id",
+        "employee_work_info__job_role_id",
+        "employee_work_info__shift_id",
+        "employee_work_info__work_type_id",
+        "employee_work_info__reporting_manager_id",
+        "employee_work_info__employee_type_id",
+        "employee_work_info__location",
+        "employee_work_info__date_joining",
+        "employee_work_info__company_id",
+    ]
+
+    import_fields = [
+        "badge_id",
+        # "test",
+        "employee_first_name",
+        "employee_last_name",
+        "employee_user_id__username",
+        "employee_user_id__password",
+        "email",
+        "phone",
+        "address",
+        "country",
+        "state",
+        "city",
+        "zip",
+        "dob",
+        "gender",
+        "qualification",
+        "experience",
+        "marital_status",
+        "children",
+        "emergency_contact",
+        "emergency_contact_name",
+        "emergency_contact_relation",
+        "is_active",
+        "employee_work_info__department_id",
+        "employee_work_info__job_position_id",
+        "employee_work_info__job_role_id",
+        "employee_work_info__reporting_manager_id",
+        "employee_work_info__shift_id",
+        "employee_work_info__work_type_id",
+        "employee_work_info__employee_type_id",
+        "employee_work_info__location",
+        "employee_work_info__company_id",
+        "employee_work_info__email",
+        "employee_work_info__mobile",
+        "employee_work_info__date_joining",
+        "employee_work_info__contract_end_date",
+        "employee_work_info__basic_salary",
+        "employee_work_info__salary_hour",
+        "employee_bank_details__bank_name",
+        "employee_bank_details__account_number",
+        "employee_bank_details__branch",
+        "employee_bank_details__address",
+        "employee_bank_details__country",
+        "employee_bank_details__state",
+        "employee_bank_details__city",
+        "employee_bank_details__any_other_code1",
+        "employee_bank_details__any_other_code2",
+    ]
+    import_file_name = "Employee Import"
+    update_reference = "id"
+
+    import_help = {
+        "Id | Reference": ["Dont Alter this column"],
+        "Badge ID": ["Ensure no Duplicate Codes"],
+        "Reporting Manager": ["Ensure Badge ID with employee exists"],
+        "Gender": ["male", "female", "other"],
+        "Marital Status": ["single", "married", "divorced"],
+        "Date Formats": ["yyyy-mm-dd"],
+    }
+
+    import_related_model_column_mapping = {
+        "employee_user_id": base_models.User,
+        # "test": base_models.Department,
+        "employee_work_info": EmployeeWorkInformation,
+        "employee_bank_details": EmployeeBankDetails,
+        "employee_work_info__reporting_manager_id": Employee,
+        "employee_work_info__department_id": base_models.Department,
+        "employee_work_info__job_position_id": base_models.JobPosition,
+        "employee_work_info__job_role_id": base_models.JobRole,
+        "employee_work_info__shift_id": base_models.EmployeeShift,
+        "employee_work_info__work_type_id": base_models.WorkType,
+        "employee_work_info__employee_type_id": base_models.EmployeeType,
+        "employee_work_info__company_id": base_models.Company,
+    }
+    import_related_column_export_mapping = {
+        "employee_work_info__reporting_manager_id": "employee_work_info__reporting_manager_id__badge_id",
+        "employee_work_info__department_id": "employee_work_info__department_id__department",
+        "employee_work_info__job_position_id": "employee_work_info__job_position_id__job_position",
+        "employee_work_info__job_role_id": "employee_work_info__job_role_id__job_role",
+        "employee_work_info__shift_id": "employee_work_info__shift_id__employee_shift",
+        "employee_work_info__work_type_id": "employee_work_info__work_type_id__work_type",
+        "employee_work_info__employee_type_id": "employee_work_info__employee_type_id__employee_type",
+        "employee_work_info__company_id": "employee_work_info__company_id__company",
+    }
+
+    primary_key_mapping = {
+        "employee_user_id": "username",
+        # "test":"department",
+        "employee_work_info__reporting_manager_id": "badge_id",
+        "employee_work_info__department_id": "department",
+        "employee_work_info__job_position_id": "job_position",
+        "employee_work_info__job_role_id": "job_role",
+        "employee_work_info__shift_id": "employee_shift",
+        "employee_work_info__work_type_id": "work_type",
+        "employee_work_info__employee_type_id": "employee_type",
+        "employee_work_info__company_id": "company",
+    }
+
+    reverse_model_relation_to_base_model = {
+        "employee_work_info": "employee_id",
+        "employee_bank_details": "employee_id",
+    }
+
+    o2o_related_name_mapping = {"employee_user_id": "employee_get"}
+
+    # fk_o2o_field_in_base_model = ["employee_user_id", "test"]
+    fk_o2o_field_in_base_model = ["employee_user_id"]
+    # Excel column value mapping to the table, one to one relation
+    fk_mapping = {
+        # "test": "department",
+    }
+
+    def get_bulk_form(self):
+        """
+        Bulk from generating method
+        """
+
+        form = DynamicBulkUpdateForm(
+            root_model=Employee, bulk_update_fields=self.bulk_update_fields
+        )
+
+        form.fields["country"] = forms.ChoiceField(
+            required=False,
+            widget=forms.Select(
+                attrs={
+                    "class": "oh-select oh-select-2",
+                    "style": "width: 100%; height:45px;",
+                }
+            ),
+        )
+
+        form.fields["state"] = forms.ChoiceField(
+            required=False,
+            widget=forms.Select(
+                attrs={
+                    "class": "oh-select oh-select-2",
+                    "style": "width: 100%; height:45px;",
+                }
+            ),
+        )
+
+        return form
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("employees-list")
+
+    columns = [
+        (_("Employee"), "employee_name_with_badge_id", "get_avatar"),
+        (_("Email"), "email"),
+        (_("Phone"), "phone"),
+        (_("Badge Id"), "badge_id"),
+        (_("Job Position"), "employee_work_info__job_position_id"),
+        (_("Department"), "employee_work_info__department_id"),
+        (_("Shift"), "employee_work_info__shift_id"),
+        (_("Work Type"), "employee_work_info__work_type_id"),
+        (_("Employee Type"), "employee_work_info__employee_type_id"),
+        (_("Job Role"), "employee_work_info__job_role_id"),
+        (_("Reporting Manager"), "employee_work_info__reporting_manager_id"),
+        (_("Company"), "employee_work_info__company_id"),
+        (_("Work Email"), "employee_work_info__email"),
+        (_("Date of Joining"), "employee_work_info__date_joining"),
+    ]
+
+    action_method = "employee_actions"
+    records_per_page = 20
+
+    header_attrs = {
+        "action": """
+                   style="width:300px !important;"
+                   """
+    }
+
+    row_attrs = """
+                {diff_cell}
+                onclick="window.location.href='{get_individual_url}?instance_ids={ordered_ids}'"
+                """
+    sortby_mapping = [
+        ("Employee", "get_full_name", "get_avatar"),
+        ("Badge Id", "badge_id"),
+        (
+            "Reporting Manager",
+            "employee_work_info__reporting_manager_id__get_full_name",
+        ),
+        (
+            "Department",
+            "employee_work_info__department_id__department",
+        ),
+        (
+            "Job Position",
+            "employee_work_info__job_position_id__job_position",
+        ),
+        ("Date of Joining", "employee_work_info__date_joining"),
+    ]
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(
+    enter_if_accessible(
+        feature="employee_view",
+        perm="employee.view_employee",
+        method=_check_reporting_manager,
+    ),
+    name="dispatch",
+)
+class EmployeeNav(HorillaNavView):
+    """
+    For nav bar
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("employees-list")
+        self.search_in = [
+            ("employee_work_info__reporting_manager_id", _("Reporting Manager")),
+            (
+                "employee_work_info__department_id",
+                "Department",
+            ),
+            ("employee_work_info__job_position_id", _("Job Position")),
+            ("employee_work_info__job_role_id", _("Job Role")),
+            ("employee_work_info__shift_id", _("Shift")),
+            ("employee_work_info__work_type_id", _("Work Type")),
+            ("employee_work_info__company_id", _("Company")),
+        ]
+        if self.request.user.has_perm("employee.add_employee"):
+            self.create_attrs = f"""
+                                href="{reverse_lazy('employee-view-new')}"
+                                """
+        else:
+            self.create_attrs = None
+
+        if self.request.user.has_perm("employee.change_employee"):
+            self.actions = [
+                {
+                    "action": _("Import"),
+                    "attrs": """
+                    id="work-info-import"
+                    data-toggle="oh-modal-toggle"
+                    data-target="#workInfoImport"
+                    style="cursor: pointer;"
+                    """,
+                },
+                {
+                    "action": _("Export"),
+                    "attrs": f"""
+                    data-toggle="oh-modal-toggle"
+                    data-target="#employeeExport"
+                    hx-get="{reverse('employees-export')}"
+                    hx-target="#employeeExportForm"
+                    style="cursor: pointer;"
+                    """,
+                },
+                {
+                    "action": _("Archive"),
+                    "attrs": """
+                    id="archiveEmployees"
+                    style="cursor: pointer;"
+                    """,
+                },
+                {
+                    "action": _("Un-archive"),
+                    "attrs": """
+                    id="unArchiveEmployees"
+                    style="cursor: pointer;"
+                    """,
+                },
+                {
+                    "action": _("Bulk mail"),
+                    "attrs": f"""
+                    data-toggle="oh-modal-toggle"
+                    data-target="#sendMailModal"
+                    hx-get="{reverse('employee-bulk-mail')}"
+                    hx-target="#mail-content"
+                    style="cursor: pointer;"
+                    """,
+                },
+                {
+                    "action": _("Bulk Update"),
+                    "attrs": """
+                    id="employeeBulkUpdateId"
+                    style="cursor: pointer;"
+                    """,
+                },
+                {
+                    "action": _("Delete"),
+                    "attrs": """
+                    class="oh-dropdown__link--danger"
+                    data-action ="delete"
+                    id="deleteEmployees"
+                    style="cursor: pointer; color:red !important"
+                    """,
+                },
+            ]
+        else:
+            self.actions = None
+
+        self.view_types = [
+            {
+                "type": "list",
+                "icon": "list-outline",
+                "url": reverse("employees-list"),
+                "attrs": """
+                            title ='List'
+                            """,
+            },
+            {
+                "type": "card",
+                "icon": "grid-outline",
+                "url": reverse("employees-card"),
+                "attrs": """
+                          title ='Card'
+                          """,
+            },
+        ]
+
+    nav_title = _("Employees")
+    filter_body_template = "cbv/employees_view/filter_employee.html"
+    filter_instance = EmployeeFilter()
+    filter_form_context_name = "form"
+    search_swap_target = "#listContainer"
+    group_by_fields = [
+        ("employee_work_info__job_position_id", _("Job Position")),
+        (
+            "employee_work_info__department_id",
+            "Department",
+        ),
+        ("employee_work_info__shift_id", _("Shift")),
+        ("employee_work_info__work_type_id", _("Work Type")),
+        ("employee_work_info__job_role_id", _("Job Role")),
+        ("employee_work_info__reporting_manager_id", _("Reporting Manager")),
+        ("employee_work_info__company_id", _("Company")),
+    ]
+
+
+@receiver(post_generic_import, sender=User)
+def user_generic_import_or_update(sender, **kwargs):
+    """
+    Handle bulk user imports
+    """
+    records = kwargs["records"]
+
+    def _set_password(records):
+        # Create a list to store users that need to be updated
+        users_to_update = []
+
+        for instance in records:
+            try:
+                password = str(instance.password)
+                # Try to detect if the password is already hashed
+                identify_hasher(password)
+            except (ValueError, ImproperlyConfigured):
+                # Password is raw, so hash and update it
+                instance.password = make_password(password)
+                users_to_update.append(instance)
+
+        if users_to_update:
+            # Bulk update only the users that were changed
+            with transaction.atomic():
+                User.objects.bulk_update(users_to_update, ["password"])
+                logger.info(
+                    f"{len(users_to_update)} user passwords were successfully updated."
+                )
+
+    thread = threading.Thread(target=_set_password, args=(records,))
+    thread.start()
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(
+    enter_if_accessible(
+        feature="employee_view",
+        perm="employee.view_employee",
+        method=_check_reporting_manager,
+    ),
+    name="dispatch",
+)
+class ExportView(TemplateView):
+    """
+    For candidate export
+    """
+
+    template_name = "cbv/employees_view/employee_export.html"
+
+    def get_context_data(self, **kwargs: Any):
+        context = super().get_context_data(**kwargs)
+        employee = Employee.objects.filter(is_active=True)
+        export_form = EmployeeExportExcelForm()
+        export_filter = EmployeeFilter(queryset=employee)
+        context["export_form"] = export_form
+        context["export_filter"] = export_filter
+        return context
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(
+    enter_if_accessible(
+        feature="employee_view",
+        perm="employee.view_employee",
+        method=_check_reporting_manager,
+    ),
+    name="dispatch",
+)
+class EmployeeCard(HorillaCardView):
+    """
+    For card view
+    """
+
+    model = Employee
+    filter_class = EmployeeFilter
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("employees-card")
+        self.request.all_edit_accessible_employees = (
+            DefaultAccessibility.objects.filter(feature="profile_edit").values_list(
+                "employees__pk", flat=True
+            )
+        )
+        if self.request.user.has_perm(
+            "employee.change_employee"
+        ) or is_reportingmanager(self.request):
+            self.actions = [
+                {
+                    "action": "Edit",
+                    "accessibility": "employee.cbv.accessibility.edit_accessibility",
+                    "attrs": """
+                    onclick="event.stopPropagation()
+                    window.location.href='{get_update_url}' "
+                    class="oh-dropdown__link"
+
+                """,
+                },
+                {
+                    "action": "archive_status",
+                    "accessibility": "employee.cbv.accessibility.action_accessible",
+                    "attrs": """
+                    hx-confirm="Do you want to {archive_status} this employee?"
+                    hx-post="{get_archive_url}"
+                    class="oh-dropdown__link"
+                    hx-target="#relatedModel"
+                    """,
+                },
+                {
+                    "action": _("Delete"),
+                    "accessibility": "employee.cbv.accessibility.action_accessible",
+                    "attrs": """
+                        onclick="event.stopPropagation()"
+                        hx-get="{get_delete_url}?model=employee.Employee&pk={pk}"
+                        data-toggle="oh-modal-toggle"
+                        data-target="#deleteConfirmation"
+                        hx-target="#deleteConfirmationBody"
+                        class="oh-dropdown__link"
+                        style="cursor: pointer;"
+                    """,
+                },
+            ]
+            if enable_profile_edit(self.request).get("profile_edit_enabled"):
+                self.actions.append(
+                    {
+                        "action": "profile_edit_accessibility_display",
+                        "accessibility": "employee.cbv.accessibility.action_accessible",
+                        "attrs": """
+                        href="{toggle_profile_edit_access_url}"
+                        class="oh-dropdown__link"
+                        style="cursor: pointer;"
+                    """,
+                    }
+                )
+        else:
+            self.actions = None
+
+    details = {
+        "image_src": "get_avatar",
+        "title": "{employee_name_with_badge_id}",
+        "subtitle": "<span class='oh-kanban-card__subtitle'>{email}</span><span class='oh-kanban-card__subtitle'>{employee_work_info__job_position_id}</span><span class='oh-kanban-card__subtitle'>{offline_online}</span>",
+    }
+
+    card_attrs = """
+                {diff_cell}
+                onclick="window.location.href='{get_individual_url}?instance_ids={ordered_ids}'"
+                """
+
+
+@receiver(post_generic_delete, sender=Employee)
+def employee_generic_post_delete(sender, instance, *args, view_instance=None, **kwargs):
+    """
+    Employee genric post delete signal to handle the deletion of user instance
+    """
+    if instance.employee_user_id:
+        instance.employee_user_id.delete()
diff --git a/employee/cbv/policy_cbv.py b/employee/cbv/policy_cbv.py
new file mode 100644
index 000000000..79e729f35
--- /dev/null
+++ b/employee/cbv/policy_cbv.py
@@ -0,0 +1,40 @@
+"""
+Policy  forms
+"""
+from django import forms
+from django.contrib import messages
+from django.http import HttpResponse
+from django.utils.decorators import method_decorator
+from django.utils.translation import gettext_lazy as _
+from employee.forms import PolicyForm
+from employee.models import Policy
+from horilla_views.generic.cbv.views import (
+    HorillaFormView,
+)
+from horilla_views.cbv_methods import login_required, permission_required
+
+class PolicyFormView(HorillaFormView):
+    """
+    form view for create policy
+    """
+
+    form_class = PolicyForm
+    model = Policy
+    new_display_title = _("Policy Creation")
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        if self.form.instance.pk:
+            self.form_class.verbose_name = _("Policy Update")
+        return context
+
+    def form_valid(self, form: PolicyForm) -> HttpResponse:
+        if form.is_valid():
+            if form.instance.pk:
+                message = _("Policy saved")
+            else:
+                message = _("Policy updated")
+            form.save()
+            messages.success(self.request, _(message))
+            return self.HttpResponse("<script>window.location.reload()</script>")
+        return super().form_valid(form)
\ No newline at end of file
diff --git a/employee/filters.py b/employee/filters.py
index 8c4d511ae..83dc8bfa5 100644
--- a/employee/filters.py
+++ b/employee/filters.py
@@ -1,308 +1,367 @@
-"""
-filters.py
-
-This page is used to register filter for employee models
-
-"""
-
-import django
-import django_filters
-from django import forms
-from django.utils.translation import gettext as _
-from django_filters import CharFilter
-
-# from attendance.models import Attendance
-from accessibility.methods import check_is_accessible
-from accessibility.models import DefaultAccessibility
-from base.methods import filtersubordinatesemployeemodel
-from employee.models import DisciplinaryAction, Employee, Policy
-from horilla.filters import FilterSet, HorillaFilterSet, filter_by_name
-from horilla.horilla_middlewares import _thread_locals
-from horilla_documents.models import Document
-from horilla_views.templatetags.generic_template_filters import getattribute
-
-
-class EmployeeFilter(HorillaFilterSet):
-    """
-    Filter set class for Candidate model
-
-    Args:
-        FilterSet (class): custom filter set class to apply styling
-    """
-
-    search = django_filters.CharFilter(method="filter_by_name")
-    search_field = django_filters.CharFilter(method="search_in")
-    selected_search_field = django_filters.ChoiceFilter(
-        label="Search Field",
-        choices=[
-            ("employee", _("Search in : Employee")),
-            ("reporting_manager", _("Search in : Reporting manager")),
-            ("department", _("Search in : Department")),
-            ("job_position", _("Search in : Job Position")),
-        ],
-        method="filter_by_name_and_field",
-        widget=forms.Select(
-            attrs={
-                "size": 4,
-                "class": "oh-input__icon",
-                "style": "border: none; overflow: hidden; display: flex; position: absolute; z-index: 999; margin-left:8%;",
-                "onclick": "$('.filterButton')[0].click();",
-            }
-        ),
-    )
-    employee_first_name = django_filters.CharFilter(lookup_expr="icontains")
-    employee_last_name = django_filters.CharFilter(lookup_expr="icontains")
-    country = django_filters.CharFilter(lookup_expr="icontains")
-    department = django_filters.CharFilter(
-        field_name="employee_work_info__department_id__department",
-        lookup_expr="icontains",
-    )
-
-    is_active = django_filters.ChoiceFilter(
-        field_name="is_active",
-        label="Is Active",
-        choices=[
-            (True, "Yes"),
-            (False, "No"),
-        ],
-    )
-
-    is_from_onboarding = django_filters.ChoiceFilter(
-        field_name="is_from_onboarding",
-        label="Is From Onboarding",
-        choices=[
-            (True, "Yes"),
-            (False, "No"),
-        ],
-    )
-    is_directly_converted = django_filters.ChoiceFilter(
-        field_name="is_directly_converted",
-        label="Is Directly Converted",
-        choices=[
-            (True, "Yes"),
-            (False, "No"),
-        ],
-    )
-    probation_from = django_filters.DateFilter(
-        field_name="candidate_get__probation_end",
-        lookup_expr="gte",
-        widget=forms.DateInput(attrs={"type": "date"}),
-    )
-    probation_till = django_filters.DateFilter(
-        field_name="candidate_get__probation_end",
-        lookup_expr="lte",
-        widget=forms.DateInput(attrs={"type": "date"}),
-    )
-
-    not_in_yet = django_filters.DateFilter(
-        method="not_in_yet_func",
-        widget=forms.DateInput(attrs={"type": "date"}),
-    )
-    not_out_yet = django_filters.DateFilter(
-        method="not_out_yet_func",
-        widget=forms.DateInput(attrs={"type": "date"}),
-    )
-
-    class Meta:
-        """
-        Meta class to add the additional info
-        """
-
-        model = Employee
-        fields = [
-            "employee_first_name",
-            "employee_last_name",
-            "email",
-            "badge_id",
-            "phone",
-            "country",
-            "gender",
-            "is_active",
-            "employee_work_info__job_position_id",
-            "employee_work_info__department_id",
-            "department",
-            "employee_work_info__work_type_id",
-            "employee_work_info__employee_type_id",
-            "employee_work_info__job_role_id",
-            "employee_work_info__reporting_manager_id",
-            "employee_work_info__company_id",
-            "employee_work_info__shift_id",
-            "employee_work_info__tags",
-            "employee_user_id__groups",
-            "employee_user_id__user_permissions",
-        ]
-
-    def not_in_yet_func(self, queryset, _, value):
-        """
-        The method to filter out the not check-in yet employees
-        """
-
-        # Getting the queryset for those employees dont have any attendance for the date
-        # in value.
-
-        queryset1 = queryset.exclude(
-            employee_attendances__attendance_date=value,
-        )
-        queryset2 = queryset.filter(
-            employee_attendances__attendance_date=value,
-            employee_attendances__attendance_clock_out__isnull=False,
-        )
-
-        queryset = (queryset1 | queryset2).distinct()
-
-        return queryset
-
-    def not_out_yet_func(self, queryset, _, value):
-        """
-        The method to filter out the not check-in yet employees
-        """
-
-        # Getting the queryset for those employees dont have any attendance for the date
-        # in value.
-        queryset = queryset.filter(
-            employee_attendances__attendance_date=value,
-            employee_attendances__attendance_clock_out__isnull=True,
-        )
-        return queryset
-
-    def filter_queryset(self, queryset):
-        """
-        Override the default filtering behavior to handle None option and filter queryset for reporting manager.
-        """
-        from django.db.models import Q
-
-        # Handle default accessibility and filter based on reporting manager
-
-        request = getattr(_thread_locals, "request", None)
-        if request:
-            employee = getattr(request.user, "employee_get", None)
-            cache_key = request.session.session_key + "accessibility_filter"
-            accessible = check_is_accessible("employee_view", cache_key, employee)
-            if not accessible and employee.reporting_manager.exists():
-                queryset = filtersubordinatesemployeemodel(
-                    request=request, queryset=queryset, perm="employee.view_employee"
-                )
-
-        # Handle 'not_set' values in the cleaned data
-        data = self.form.cleaned_data
-        not_set_dict = {}
-        for key, value in data.items():
-            if isinstance(value, (list, django.db.models.query.QuerySet)):
-                if value and "not_set" in value:
-                    not_set_dict[key] = value
-
-        if not_set_dict:
-            q_objects = Q()
-            for key, values in not_set_dict.items():
-                for value in values:
-                    if value == "not_set":
-                        q_objects |= Q(**{f"{key}__isnull": True})
-                    else:
-                        q_objects |= Q(**{key: value})
-            return queryset.filter(q_objects)
-        return super().filter_queryset(queryset)
-
-    def filter_by_name(self, queryset, name, value):
-        """
-        Employee search method
-        """
-        value = value.lower()
-
-        if self.data.get("search_field"):
-            return queryset
-
-        def _icontains(instance):
-            result = str(getattribute(instance, "get_full_name")).lower()
-            return instance.pk if value in result else None
-
-        ids = list(filter(None, map(_icontains, queryset)))
-        return queryset.filter(id__in=ids)
-
-
-class EmployeeReGroup:
-    """
-    Class to keep the field name for group by option
-    """
-
-    fields = [
-        ("", "select"),
-        ("employee_work_info__job_position_id", "Job Position"),
-        ("employee_work_info__department_id", "Department"),
-        ("employee_work_info__shift_id", "Shift"),
-        ("employee_work_info__work_type_id", "Work Type"),
-        ("employee_work_info__job_role_id", "Job Role"),
-        ("employee_work_info__reporting_manager_id", "Reporting Manager"),
-        ("employee_work_info__company_id", "Company"),
-    ]
-
-
-class PolicyFilter(FilterSet):
-    """
-    PolicyFilter filterset class
-    """
-
-    search = django_filters.CharFilter(field_name="title", lookup_expr="icontains")
-
-    class Meta:
-        model = Policy
-        fields = "__all__"
-
-
-class DocumentRequestFilter(FilterSet):
-    """
-    Custom filter for Document Requests.
-    """
-
-    search = CharFilter(field_name="title", lookup_expr="icontains")
-
-    class Meta:
-        """
-        A nested class that specifies the model and fields for the filter.
-        """
-
-        model = Document
-        fields = [
-            "employee_id",
-            "document_request_id",
-            "status",
-            "employee_id__employee_first_name",
-            "employee_id__employee_last_name",
-            "employee_id__is_active",
-            "employee_id__gender",
-            "employee_id__employee_work_info__job_position_id",
-            "employee_id__employee_work_info__department_id",
-            "employee_id__employee_work_info__work_type_id",
-            "employee_id__employee_work_info__employee_type_id",
-            "employee_id__employee_work_info__job_role_id",
-            "employee_id__employee_work_info__reporting_manager_id",
-            "employee_id__employee_work_info__company_id",
-            "employee_id__employee_work_info__shift_id",
-        ]
-
-
-class DisciplinaryActionFilter(FilterSet):
-    """
-    Custom filter for Disciplinary Action.
-
-    """
-
-    search = CharFilter(method=filter_by_name)
-
-    start_date = django_filters.DateFilter(
-        widget=forms.DateInput(attrs={"type": "date"}),
-    )
-
-    class Meta:
-        model = DisciplinaryAction
-        ordering = ["-id"]
-        fields = [
-            "employee_id",
-            "action",
-            "employee_id__employee_work_info__job_position_id",
-            "employee_id__employee_work_info__department_id",
-            "employee_id__employee_work_info__work_type_id",
-            "employee_id__employee_work_info__job_role_id",
-            "employee_id__employee_work_info__reporting_manager_id",
-            "employee_id__employee_work_info__company_id",
-            "employee_id__employee_work_info__shift_id",
-        ]
+"""
+filters.py
+
+This page is used to register filter for employee models
+
+"""
+
+import django
+import django_filters
+from django import forms
+from django.utils.translation import gettext as _
+from django_filters import CharFilter
+
+# from attendance.models import Attendance
+from accessibility.methods import check_is_accessible
+from base.methods import filtersubordinatesemployeemodel
+from employee.models import (
+    Actiontype,
+    DisciplinaryAction,
+    Employee,
+    EmployeeTag,
+    EmployeeWorkInformation,
+    Policy,
+)
+from horilla.filters import FilterSet, HorillaFilterSet, filter_by_name
+from horilla.horilla_middlewares import _thread_locals
+from horilla_documents.models import Document
+from horilla_views.templatetags.generic_template_filters import getattribute
+
+
+class EmployeeFilter(HorillaFilterSet):
+    """
+    Filter set class for Candidate model
+
+    Args:
+        FilterSet (class): custom filter set class to apply styling
+    """
+
+    search = django_filters.CharFilter(method="filter_by_name")
+    search_field = django_filters.CharFilter(method="search_in")
+    selected_search_field = django_filters.ChoiceFilter(
+        label="Search Field",
+        choices=[
+            ("employee", _("Search in : Employee")),
+            ("reporting_manager", _("Search in : Reporting manager")),
+            ("department", _("Search in : Department")),
+            ("job_position", _("Search in : Job Position")),
+        ],
+        method="filter_by_name_and_field",
+        widget=forms.Select(
+            attrs={
+                "size": 4,
+                "class": "oh-input__icon",
+                "style": "border: none; overflow: hidden; display: flex; position: absolute; z-index: 999; margin-left:8%;",
+                "onclick": "$('.filterButton')[0].click();",
+            }
+        ),
+    )
+    employee_first_name = django_filters.CharFilter(lookup_expr="icontains")
+    employee_last_name = django_filters.CharFilter(lookup_expr="icontains")
+    country = django_filters.CharFilter(lookup_expr="icontains")
+    department = django_filters.CharFilter(
+        field_name="employee_work_info__department_id__department",
+        lookup_expr="icontains",
+    )
+
+    is_active = django_filters.ChoiceFilter(
+        field_name="is_active",
+        label="Is Active",
+        choices=[
+            (True, "Yes"),
+            (False, "No"),
+        ],
+    )
+
+    is_from_onboarding = django_filters.ChoiceFilter(
+        field_name="is_from_onboarding",
+        label="Is From Onboarding",
+        choices=[
+            (True, "Yes"),
+            (False, "No"),
+        ],
+    )
+    is_directly_converted = django_filters.ChoiceFilter(
+        field_name="is_directly_converted",
+        label="Is Directly Converted",
+        choices=[
+            (True, "Yes"),
+            (False, "No"),
+        ],
+    )
+    probation_from = django_filters.DateFilter(
+        field_name="candidate_get__probation_end",
+        lookup_expr="gte",
+        widget=forms.DateInput(attrs={"type": "date"}),
+    )
+    probation_till = django_filters.DateFilter(
+        field_name="candidate_get__probation_end",
+        lookup_expr="lte",
+        widget=forms.DateInput(attrs={"type": "date"}),
+    )
+    # working_today = django_filters.BooleanFilter(
+    #     label="Working", method="get_working_today"
+    # )
+
+    not_in_yet = django_filters.DateFilter(
+        method="not_in_yet_func",
+        widget=forms.DateInput(attrs={"type": "date"}),
+    )
+    not_out_yet = django_filters.DateFilter(
+        method="not_out_yet_func",
+        widget=forms.DateInput(attrs={"type": "date"}),
+    )
+
+    class Meta:
+        """
+        Meta class to add the additional info
+        """
+
+        model = Employee
+        fields = [
+            "employee_first_name",
+            "employee_last_name",
+            "email",
+            "badge_id",
+            "phone",
+            "country",
+            "gender",
+            "is_active",
+            "employee_work_info__job_position_id",
+            "employee_work_info__department_id",
+            "department",
+            "employee_work_info__work_type_id",
+            "employee_work_info__employee_type_id",
+            "employee_work_info__job_role_id",
+            "employee_work_info__reporting_manager_id",
+            "employee_work_info__company_id",
+            "employee_work_info__shift_id",
+            "employee_work_info__tags",
+            "employee_user_id__groups",
+            "employee_user_id__user_permissions",
+        ]
+
+    # def __init__(self, *args, **kwargs):
+    #     super().__init__(*args, **kwargs)
+    #     custom_field = django_filters.BooleanFilter(
+    #         label="Working", method=get_working_today
+    #     )
+    #     self.filters["working_today"] = custom_field
+    #     self.form.fields["working_today"] = custom_field.field
+    #     self.form.fields["working_today"].label = "Working"
+    #     self.Meta.fields.append("working_today")
+
+    def not_in_yet_func(self, queryset, _, value):
+        """
+        The method to filter out the not check-in yet employees
+        """
+
+        # Getting the queryset for those employees dont have any attendance for the date
+        # in value.
+
+        queryset1 = queryset.exclude(
+            employee_attendances__attendance_date=value,
+        )
+        queryset2 = queryset.filter(
+            employee_attendances__attendance_date=value,
+            employee_attendances__attendance_clock_out__isnull=False,
+        )
+
+        queryset = (queryset1 | queryset2).distinct()
+
+        return queryset
+
+    def not_out_yet_func(self, queryset, _, value):
+        """
+        The method to filter out the not check-in yet employees
+        """
+
+        # Getting the queryset for those employees dont have any attendance for the date
+        # in value.
+        queryset = queryset.filter(
+            employee_attendances__attendance_date=value,
+            employee_attendances__attendance_clock_out__isnull=True,
+        )
+        return queryset
+
+    def filter_queryset(self, queryset):
+        """
+        Override the default filtering behavior to handle None option and filter queryset for reporting manager.
+        """
+        from django.db.models import Q
+
+        # Handle default accessibility and filter based on reporting manager
+        request = getattr(_thread_locals, "request", None)
+        if request:
+            employee = getattr(request.user, "employee_get", None)
+            cache_key = request.session.session_key + "accessibility_filter"
+            accessible = check_is_accessible("employee_view", cache_key, employee)
+            if not accessible and employee.reporting_manager.exists():
+                queryset = filtersubordinatesemployeemodel(
+                    request=request, queryset=queryset, perm="employee.view_employee"
+                )
+
+        # Handle 'not_set' values in the cleaned data
+        data = self.form.cleaned_data
+        not_set_dict = {}
+        for key, value in data.items():
+            if isinstance(value, (list, django.db.models.query.QuerySet)):
+                if value and "not_set" in value:
+                    not_set_dict[key] = value
+
+        if not_set_dict:
+            q_objects = Q()
+            for key, values in not_set_dict.items():
+                for value in values:
+                    if value == "not_set":
+                        q_objects |= Q(**{f"{key}__isnull": True})
+                    else:
+                        q_objects |= Q(**{key: value})
+            return queryset.filter(q_objects)
+        return super().filter_queryset(queryset)
+
+    def filter_by_name(self, queryset, name, value):
+        """
+        Employee search method
+        """
+        value = value.lower()
+
+        if self.data.get("search_field"):
+            return queryset
+
+        def _icontains(instance):
+            result = str(getattribute(instance, "get_full_name")).lower()
+            return instance.pk if value in result else None
+
+        ids = list(filter(None, map(_icontains, queryset)))
+        return queryset.filter(id__in=ids)
+
+
+class EmployeeReGroup:
+    """
+    Class to keep the field name for group by option
+    """
+
+    fields = [
+        ("", "select"),
+        ("employee_work_info__job_position_id", "Job Position"),
+        ("employee_work_info__department_id", "Department"),
+        ("employee_work_info__shift_id", "Shift"),
+        ("employee_work_info__work_type_id", "Work Type"),
+        ("employee_work_info__job_role_id", "Job Role"),
+        ("employee_work_info__reporting_manager_id", "Reporting Manager"),
+        ("employee_work_info__company_id", "Company"),
+    ]
+
+
+class PolicyFilter(FilterSet):
+    """
+    PolicyFilter filterset class
+    """
+
+    search = django_filters.CharFilter(field_name="title", lookup_expr="icontains")
+
+    class Meta:
+        model = Policy
+        fields = "__all__"
+
+
+class DocumentRequestFilter(FilterSet):
+    """
+    Custom filter for Document Requests.
+    """
+
+    search = CharFilter(field_name="title", lookup_expr="icontains")
+
+    class Meta:
+        """
+        A nested class that specifies the model and fields for the filter.
+        """
+
+        model = Document
+        fields = [
+            "employee_id",
+            "document_request_id",
+            "status",
+            "employee_id__employee_first_name",
+            "employee_id__employee_last_name",
+            "employee_id__is_active",
+            "employee_id__gender",
+            "employee_id__employee_work_info__job_position_id",
+            "employee_id__employee_work_info__department_id",
+            "employee_id__employee_work_info__work_type_id",
+            "employee_id__employee_work_info__employee_type_id",
+            "employee_id__employee_work_info__job_role_id",
+            "employee_id__employee_work_info__reporting_manager_id",
+            "employee_id__employee_work_info__company_id",
+            "employee_id__employee_work_info__shift_id",
+        ]
+
+
+class DisciplinaryActionFilter(FilterSet):
+    """
+    Custom filter for Disciplinary Action.
+
+    """
+
+    search = CharFilter(method=filter_by_name)
+
+    start_date = django_filters.DateFilter(
+        widget=forms.DateInput(attrs={"type": "date"}),
+    )
+
+    class Meta:
+        model = DisciplinaryAction
+        ordering = ["-id"]
+        fields = [
+            "employee_id",
+            "action",
+            "employee_id__employee_work_info__job_position_id",
+            "employee_id__employee_work_info__department_id",
+            "employee_id__employee_work_info__work_type_id",
+            "employee_id__employee_work_info__job_role_id",
+            "employee_id__employee_work_info__reporting_manager_id",
+            "employee_id__employee_work_info__company_id",
+            "employee_id__employee_work_info__shift_id",
+        ]
+
+
+class ActionTypeFilter(HorillaFilterSet):
+
+    search = django_filters.CharFilter(method="search_method")
+
+    class Meta:
+        model = Actiontype
+        fields = ["title", "action_type"]
+
+    def search_method(self, queryset, _, value):
+        """
+        This method is used to search
+        """
+
+        return (
+            (queryset.filter(title__icontains=value))
+            | queryset.filter(action_type__icontains=value)
+        ).distinct()
+
+
+class EmployeeTagFilter(FilterSet):
+
+    search = django_filters.CharFilter(field_name="title", lookup_expr="icontains")
+
+    class Meta:
+        model = EmployeeTag
+        fields = [
+            "title",
+        ]
+
+
+class EmployeeWorkInformationFilter(HorillaFilterSet):
+
+    search = django_filters.CharFilter(
+        field_name="employee_id__employee_first_name", lookup_expr="icontains"
+    )
+
+    class Meta:
+        model = EmployeeWorkInformation
+        fields = ["employee_id"]
diff --git a/employee/forms.py b/employee/forms.py
index d37429cf4..cf5f2ffe0 100644
--- a/employee/forms.py
+++ b/employee/forms.py
@@ -387,14 +387,53 @@ class EmployeeWorkInformationUpdateForm(ModelForm):
         """
 
         model = EmployeeWorkInformation
-        fields = "__all__"
-        exclude = ("employee_id",)
+        # fields = "__all__"
+        fields = [
+            "department_id",
+            "job_position_id",
+            "job_role_id",
+            "work_type_id",
+            "employee_type_id",
+            "reporting_manager_id",
+            "company_id",
+            "tags",
+            "location",
+            "email",
+            "mobile",
+            "shift_id",
+            "date_joining",
+            "contract_end_date",
+            "basic_salary",
+            "salary_hour",
+        ]
+        exclude = ("employee_id", "experience", "additional_info")
 
         widgets = {
             "date_joining": DateInput(attrs={"type": "date"}),
             "contract_end_date": DateInput(attrs={"type": "date"}),
         }
 
+    def __init__(self, *args, **kwargs):
+        super().__init__(*args, **kwargs)
+        self.fields["department_id"].widget.attrs.update(
+            {
+                "hx-target": "#id_job_position_id_parent_div",
+                "hx-include": "#id_job_position_id",
+                "hx-trigger": "change,load",
+                "hx-swap": "innerHTML",
+                "hx-get": "/employee/get-job-positions-hx",
+            }
+        )
+        self.fields["job_position_id"].widget.attrs.update(
+            {
+                "hx-target": "#id_job_role_id_parent_div",
+                "hx-include": "#id_job_role_id",
+                "hx-trigger": "change,load",
+                "hx-swap": "innerHTML",
+                "hx-get": "/employee/get-job-roles-hx",
+            }
+        )
+
     def as_p(self, *args, **kwargs):
         context = {"form": self}
         return render_to_string("employee/create_form/personal_info_as_p.html", context)
@@ -629,6 +668,8 @@ class PolicyForm(ModelForm):
     PolicyForm
     """
 
+    cols = {"title": 12, "body": 12, "is_visible_to_all": 12, "company_id": 12}
+
     class Meta:
         model = Policy
         fields = "__all__"
@@ -729,6 +770,9 @@ class DisciplinaryActionForm(ModelForm):
 
 
 class ActiontypeForm(ModelForm):
+
+    cols = {"title": 12, "action_type": 12}
+
     class Meta:
         model = Actiontype
         fields = "__all__"
diff --git a/employee/management/commands/import_ldap_users.py b/employee/management/commands/import_ldap_users.py
new file mode 100644
index 000000000..eca4f4e23
--- /dev/null
+++ b/employee/management/commands/import_ldap_users.py
@@ -0,0 +1,65 @@
+import ldap
+from django.conf import settings
+from django.core.management.base import BaseCommand
+from employee.models import Employee
+from django.contrib.auth.models import User
+from django.db.models import Q
+
+
+class Command(BaseCommand):
+    help = "Imports employees from LDAP into the Django database"
+
+    def handle(self, *args, **kwargs):
+        try:
+            connection = ldap.initialize(settings.AUTH_LDAP_SERVER_URI)
+            connection.simple_bind_s(settings.AUTH_LDAP_BIND_DN, settings.AUTH_LDAP_BIND_PASSWORD)
+            
+            search_base = "ou=users,dc=test,dc=com"  # Replace with your actual search base
+            search_filter = "(objectClass=inetOrgPerson)"
+            
+            results = connection.search_s(search_base, ldap.SCOPE_SUBTREE, search_filter)
+            
+            for dn, entry in results:
+
+                user_id = entry.get("uid", [b""])[0].decode("utf-8")
+                email = entry.get("mail", [b""])[0].decode("utf-8")
+                first_name = entry.get("givenName", [b""])[0].decode("utf-8")
+                last_name = entry.get("sn", [b""])[0].decode("utf-8")
+                name = entry.get("cn", [b""])[0].decode("utf-8")
+                phone = entry.get("telephoneNumber", [b""])[0].decode("utf-8")
+
+                # Get the password from LDAP
+                ldap_password = entry.get("userPassword", [b""])[0].decode("utf-8")
+
+
+                # Create or update the Employee record, storing the LDAP password
+                employee, created = Employee.objects.update_or_create(
+                    email = email,
+                    defaults={
+                        "employee_first_name": first_name,
+                        "employee_last_name": last_name,
+                        "email": email,
+                        "phone": phone,
+                    }
+                )
+
+                # Retrieve the associated User if it exists
+                try:
+                    user = User.objects.get(Q(username=email) | Q(username=user_id) | Q(email=email))
+                    user.username = user_id
+                    user.set_password(ldap_password)  # Hash and set the password securely
+                    user.save()  # Save the changes to the User instance
+                    action = "Updated"
+                except User.DoesNotExist:
+                    # If the user does not exist, handle it accordingly (e.g., log a message or create a new user)
+                    self.stdout.write(self.style.WARNING(f"User for employee {name} does not exist."))
+                    continue
+
+
+                action = "Created" if created else "Updated"
+                self.stdout.write(self.style.SUCCESS(f"{action} employee {name} with LDAP password"))
+
+            connection.unbind_s()
+
+        except ldap.LDAPError as e:
+            self.stderr.write(self.style.ERROR(f"LDAP Error: {e}"))
\ No newline at end of file
diff --git a/employee/methods/methods.py b/employee/methods/methods.py
index 72824d531..9790a5f83 100644
--- a/employee/methods/methods.py
+++ b/employee/methods/methods.py
@@ -956,3 +956,13 @@ def bulk_create_work_info_import(success_lists):
             args=(new_work_info_list, update_work_info_list),
         )
         contract_creation_thread.start()
+
+
+def get_model_class(model_path):
+    """
+    method to return the model class from string 'app.models.Model'
+    """
+    module_name, class_name = model_path.rsplit(".", 1)
+    module = __import__(module_name, fromlist=[class_name])
+    model_class: Employee = getattr(module, class_name)
+    return model_class
diff --git a/employee/models.py b/employee/models.py
index c6a4a766a..0a8996d6e 100644
--- a/employee/models.py
+++ b/employee/models.py
@@ -16,7 +16,9 @@ from django.db import models
 from django.db.models.query import QuerySet
 from django.db.models.signals import post_save
 from django.dispatch import receiver
+from django.http import JsonResponse
 from django.templatetags.static import static
+from django.urls import reverse, reverse_lazy
 from django.utils.translation import gettext as _
 from django.utils.translation import gettext_lazy as trans
 
@@ -33,10 +35,12 @@ from base.models import (
 )
 from employee.methods.duration_methods import format_time, strtime_seconds
 from horilla import horilla_middlewares
+from horilla.horilla_middlewares import _thread_locals
 from horilla.methods import get_horilla_model_class
-from horilla.models import HorillaModel, has_xss
+from horilla.models import HorillaModel
 from horilla_audit.methods import get_diff
 from horilla_audit.models import HorillaAuditInfo, HorillaAuditLog
+from horilla_views.cbv_methods import render_template
 
 # create your model
 
@@ -115,25 +119,11 @@ class Employee(models.Model):
         related_company_field="employee_work_info__company_id"
     )
 
-    def clean_fields(self, exclude=None):
-        errors = {}
-
-        # Get the list of fields to exclude from validation
-        total_exclude = set(exclude or []).union(getattr(self, "xss_exempt_fields", []))
-
-        for field in self._meta.get_fields():
-            if (
-                isinstance(field, (models.CharField, models.TextField))
-                and field.name not in total_exclude
-            ):
-                value = getattr(self, field.name, None)
-                if value and has_xss(value):
-                    errors[field.name] = ValidationError(
-                        "Potential XSS content detected."
-                    )
-
-        if errors:
-            raise ValidationError(errors)
+    def get_contact(self):
+        """
+        to get contact no of candidates
+        """
+        return self.phone
 
     def get_image(self):
         """
@@ -187,6 +177,24 @@ class Employee(models.Model):
             getattr(self, "employee_work_info", None), "job_position_id", None
         )
 
+    def diff_cell(self):
+        request = getattr(_thread_locals, "request", None)
+        if (
+            request
+            and hasattr(request, "user")
+            and hasattr(request.user, "employee_get")
+        ):
+            if (
+                hasattr(self, "employee_work_info")
+                and self.employee_work_info.reporting_manager_id
+                == request.user.employee_get
+            ):
+                return 'style="color: inherit; text-decoration: none; background-color: hsl(38.08deg 100% 50% / 8%);"'
+            else:
+                return ""
+        else:
+            return ""
+
     def get_department(self):
         """
         This method is used to return the department of the employee
@@ -212,7 +220,8 @@ class Employee(models.Model):
 
     def get_mail(self):
         """
-        This method is used to return the shift of the employee
+        This method is used to return the employee's email, checking work email first
+        then falling back to personal email.
         """
         work_info = getattr(self, "employee_work_info", None)
         work_email = getattr(work_info, "email", None)
@@ -273,7 +282,20 @@ class Employee(models.Model):
             ).exists()
         ):
             status = _("On a break")
-        return status
+        # return status
+        return f'<span class="oh-recruitment_tag" style="font-size: 0.5rem; color: red;">{status}</span>'
+
+    from django.http import JsonResponse
+
+    def send_mail_button(self):
+        """
+        View to return the HTML for the send mail button.
+        """
+
+        return render_template(
+            path="cbv/dashboard/offline_action.html",
+            context={"instance": self},
+        )
 
     def get_forecasted_at_work(self):
         """
@@ -319,6 +341,16 @@ class Employee(models.Model):
         else:
             return {}
 
+    def get_custom_forecasted_info_col(self):
+        forecasted_info = self.get_forecasted_at_work()
+        forecasted_at_work = forecasted_info.get("forecasted_at_work")
+        forecasted_pending_hours = forecasted_info.get("forecasted_pending_hours")
+
+        return f"""
+                <span class="oh-recuritment_tag" style="font-size: .5rem;">At work {forecasted_at_work}</span>
+                <span class="oh-recuritment_tag" style="font-size: .5rem;">Pending {forecasted_pending_hours}</span>
+            """
+
     def get_today_attendance(self):
         """
         This method will returns employees todays attendance
@@ -382,28 +414,28 @@ class Employee(models.Model):
                         "field_name": "reporting_manager_id",
                     }
                 )
-            if recruitment_manager_query.exists():
+            if recruitment_manager_query and recruitment_manager_query.exists():
                 related_models.append(
                     {
                         "verbose_name": _("Recruitment manager"),
                         "field_name": "recruitment_managers",
                     }
                 )
-            if recruitment_stage_query.exists():
+            if recruitment_stage_query and recruitment_stage_query.exists():
                 related_models.append(
                     {
                         "verbose_name": _("Recruitment stage manager"),
                         "field_name": "recruitment_stage_managers",
                     }
                 )
-            if onboarding_stage_query.exists():
+            if onboarding_stage_query and onboarding_stage_query.exists():
                 related_models.append(
                     {
                         "verbose_name": _("Onboarding stage manager"),
                         "field_name": "onboarding_stage_manager",
                     }
                 )
-            if onboarding_task_query.exists():
+            if onboarding_task_query and onboarding_task_query.exists():
                 related_models.append(
                     {
                         "verbose_name": _("Onboarding task manager"),
@@ -435,6 +467,68 @@ class Employee(models.Model):
         badge_id = (f"({self.badge_id})") if self.badge_id is not None else ""
         return f"{self.employee_first_name} {last_name} {badge_id}"
 
+    def employee_name_with_badge_id(self):
+
+        last_name = (
+            self.employee_last_name if self.employee_last_name is not None else ""
+        )
+        badge_id = (f"({self.badge_id})") if self.badge_id is not None else ""
+        return f"{self.employee_first_name} {last_name} {badge_id}"
+
+    def get_update_url(self):
+        """
+        This method to get update url
+        """
+        url = reverse_lazy("employee-view-update", kwargs={"obj_id": self.pk})
+        return url
+
+    def get_archive_url(self):
+        """
+        This method to get archive  url
+        """
+        url = reverse_lazy("employee-archive", kwargs={"obj_id": self.pk})
+        return url
+
+    def get_individual_url(self):
+        """
+        This method to get individual  url
+        """
+        url = reverse_lazy("employee-view-individual", kwargs={"obj_id": self.pk})
+        return url
+
+    def get_profile_url(self):
+        """
+        This method to get individual  url
+        """
+        url = reverse_lazy("profile-new", kwargs={"pk": self.pk})
+        return url
+
+    def get_delete_url(self):
+        """
+        This method to get delete  url
+        """
+        url = reverse_lazy("generic-delete")
+        return url
+
+    def employee_actions(self):
+        """
+        This method for get custom column for actions.
+        """
+
+        return render_template(
+            path="cbv/employees_view/employee_actions.html",
+            context={"instance": self},
+        )
+
+    def archive_status(self):
+        """
+        archive status
+        """
+        if self.is_active:
+            return "Archive"
+        else:
+            return "Un-Archive"
+
     def check_online(self):
         """
         This method is used to check if the user is in the list of online users.
@@ -519,7 +613,7 @@ class Employee(models.Model):
         # your custom code here
         # ...
         # call the parent class's save method to save the object
-        prev_employee = Employee.objects.filter(id=self.id).first()
+        # prev_employee = Employee.objects.filter(id=self.id).first()
         super().save(*args, **kwargs)
         request = getattr(horilla_middlewares._thread_locals, "request", None)
         if request and not self.is_active and self.get_archive_condition() is not False:
@@ -530,7 +624,7 @@ class Employee(models.Model):
         if employee.employee_user_id is None:
             # Create user if no corresponding user exists
             username = self.email
-            password = self.phone
+            password = str(self.phone)
 
             is_new_employee_flag = (
                 not employee.employee_user_id.is_new_employee
@@ -572,6 +666,32 @@ class EmployeeTag(HorillaModel):
     def __str__(self) -> str:
         return f"{self.title}"
 
+    def color_span(self):
+        """
+        to return color into correct format
+        """
+        return (
+            '<span style="height: 25px; width: 25px; '
+            'background-color: {}; border-radius: 50%; display: inline-block;"></span>'
+        ).format(self.color)
+
+    def get_update_url(self):
+        """
+        This method to get update url
+        """
+        url = reverse_lazy("employee-tag-update-form", kwargs={"pk": self.pk})
+        return url
+
+    def get_delete_url(self):
+        """
+        This method to get delete url
+        """
+        url = reverse_lazy("employee-tag-delete", kwargs={"obj_id": self.pk})
+        return url
+
+    def get_instance_id(self):
+        return self.id
+
 
 class EmployeeWorkInformation(models.Model):
     """
@@ -690,6 +810,52 @@ class EmployeeWorkInformation(models.Model):
         super().__init__(*args, **kwargs)
         self.skip_history = False
 
+    def calculate_progress(self):
+        fields_to_focus = [
+            "job_position_id",
+            "department_id",
+            "work_type_id",
+            "employee_type_id",
+            "job_role_id",
+            "reporting_manager_id",
+            "company_id",
+            "location",
+            "email",
+            "mobile",
+            "shift_id",
+            "date_joining",
+            "contract_end_date",
+            "basic_salary",
+            "salary_hour",
+        ]
+
+        completed_field_count = sum(
+            1 for field_name in fields_to_focus if getattr(self, field_name) is not None
+        )
+        total_fields = len(fields_to_focus)
+        percent = (
+            (completed_field_count / total_fields) * 100 if total_fields > 0 else 0
+        )
+        return round(percent, 1)
+
+    def progress_col(self):
+        """
+        This method for get custome coloumn for progress.
+        """
+
+        return render_template(
+            path="cbv/dashboard/progress.html",
+            context={"instance": self},
+        )
+
+    def get_edit_url(self):
+        """
+        To get edit url
+        """
+
+        url = reverse("update-emp-workinfo", kwargs={"pk": self.pk})
+        return url
+
     def tracking(self):
         """
         This method is used to return the tracked history of the instance
@@ -730,7 +896,7 @@ class EmployeeBankDetails(HorillaModel):
         related_name="employee_bank_details",
         verbose_name=_("Employee"),
     )
-    bank_name = models.CharField(max_length=50)
+    bank_name = models.CharField(max_length=50, null=True)
     account_number = models.CharField(
         max_length=50,
         null=True,
@@ -739,8 +905,8 @@ class EmployeeBankDetails(HorillaModel):
     branch = models.CharField(max_length=50, null=True)
     address = models.TextField(max_length=255, null=True)
     country = models.CharField(max_length=50, blank=True, null=True)
-    state = models.CharField(max_length=50, blank=True)
-    city = models.CharField(max_length=50, blank=True)
+    state = models.CharField(max_length=50, blank=True, null=True)
+    city = models.CharField(max_length=50, blank=True, null=True)
     any_other_code1 = models.CharField(
         max_length=50, verbose_name="Bank Code #1", null=True
     )
@@ -916,13 +1082,47 @@ class Actiontype(HorillaModel):
         help_text="If is enabled, employees log in will be blocked based on period of suspension or dismissal.",
     )
 
-    def __str__(self) -> str:
-        return f"{self.title}"
-
     class Meta:
         verbose_name = _("Action Type")
         verbose_name_plural = _("Action Types")
 
+    def __str__(self) -> str:
+        return f"{self.title}"
+
+    def get_block_option(self):
+        """
+        To get block option
+        """
+        if self.block_option:
+            return "Yes"
+        return "No"
+
+    def get_action_type_display(self):
+        """
+        Display action type
+        """
+        return dict(self.choice_actions).get(self.action_type)
+
+    def get_update_url(self):
+        """
+        This method to get update url
+        """
+        url = reverse_lazy("update-action-type", kwargs={"pk": self.pk})
+        return url
+
+    def get_delete_url(self):
+        """
+        This method to get delete url
+        """
+        url = reverse_lazy("generic-delete")
+        return url
+
+    def get_instance_id(self):
+        """
+        To get instance in list view
+        """
+        return self.id
+
 
 class DisciplinaryAction(HorillaModel):
     """
@@ -953,6 +1153,97 @@ class DisciplinaryAction(HorillaModel):
     class Meta:
         ordering = ["-id"]
 
+    def employee_column(self):
+        """
+        This method for get custom column for employee.
+        """
+
+        return render_template(
+            path="cbv/disciplinary_actions/employee_col.html",
+            context={"instance": self},
+        )
+
+    def action_taken_col(self):
+        """
+        This method for get custom column for employee.
+        """
+
+        return render_template(
+            path="cbv/disciplinary_actions/action_taken.html",
+            context={"instance": self},
+        )
+
+    def block_option_col(self):
+        """
+        block option column
+        """
+        if self.action.block_option:
+            return "Yes"
+        else:
+            return "No"
+
+    def action_date_col(self):
+        """
+        This method for get custom column for action date.
+        """
+
+        return render_template(
+            path="cbv/disciplinary_actions/action_date.html",
+            context={"instance": self},
+        )
+
+    def get_avatar(self):
+        """
+        Method will retun the api to the avatar or path to the profile image
+        """
+        url = f"https://ui-avatars.com/api/?name={self.action}&background=random"
+        return url
+
+    def attachments_col(self):
+        """
+        This method for get custom column for attachments.
+        """
+
+        return render_template(
+            path="cbv/disciplinary_actions/attachments.html",
+            context={"instance": self},
+        )
+
+    def actions(self):
+        """
+        This method for get custom column for actions.
+        """
+
+        return render_template(
+            path="cbv/disciplinary_actions/actions.html",
+            context={"instance": self},
+        )
+
+    def detail_actions(self):
+        """
+        This method for get custom column for actions.
+        """
+
+        return render_template(
+            path="cbv/disciplinary_actions/detail_action.html",
+            context={"instance": self},
+        )
+
+    def employee_detail(self):
+        """
+        interviewer in detail view
+        """
+        employees = self.employee_id.all()
+        employee_names_string = "<br>".join([str(employee) for employee in employees])
+        return employee_names_string
+
+    def dis_action_detail_view(self):
+        """
+        detail view
+        """
+        url = reverse("disciplinary-actions-detail-view", kwargs={"pk": self.pk})
+        return url
+
 
 class EmployeeGeneralSetting(HorillaModel):
     """
diff --git a/employee/policies.py b/employee/policies.py
index 6a1f0bbe7..7eb2dea08 100644
--- a/employee/policies.py
+++ b/employee/policies.py
@@ -13,14 +13,17 @@ from django.contrib import messages
 from django.contrib.auth.models import User
 from django.http import HttpResponse, JsonResponse
 from django.shortcuts import get_object_or_404, redirect, render
+from django.urls import reverse
 from django.utils.translation import gettext_lazy as _
 
 from base.methods import (
+    closest_numbers,
     eval_validate,
     filtersubordinates,
     get_key_instances,
     paginator_qry,
 )
+from base.views import paginator_qry
 from employee.filters import DisciplinaryActionFilter, PolicyFilter
 from employee.forms import DisciplinaryActionForm, PolicyForm
 from employee.models import (
@@ -361,7 +364,7 @@ def remove_employee_disciplinary_action(request, action_id, emp_id):
     messages.success(
         request, _("Employee removed from disciplinary action successfully.")
     )
-    return redirect(f"/employee/disciplinary-filter-view?click_id={dis_action.id}")
+    return redirect(f"/employee/disciplinary-actions-list?click_id={dis_action.id}")
 
 
 @login_required
@@ -371,6 +374,9 @@ def delete_actions(request, action_id):
     """
     This method is used to delete Disciplinary action
     """
+    request_copy = request.GET.copy()
+    request_copy.pop("instances_ids", None)
+    previous_data = request_copy.urlencode()
 
     dis = DisciplinaryAction.objects.get(id=action_id)
 
@@ -394,8 +400,21 @@ def delete_actions(request, action_id):
     messages.success(request, _("Disciplinary action deleted."))
     dis_actions = DisciplinaryAction.objects.all()
 
+    hx_target = request.META.get("HTTP_HX_TARGET")
+    if hx_target and hx_target == "genericModalBody":
+        instances_ids = request.GET.get("instances_ids")
+        instances_list = json.loads(instances_ids)
+        if action_id in instances_list:
+            instances_list.remove(action_id)
+            previous_instance, next_instance = closest_numbers(
+                json.loads(instances_ids), action_id
+            )
+        return redirect(
+            f"/employee/disciplinary-actions-detail-view/{next_instance}/?{previous_data}&instance_ids={instances_list}&deleted=true"
+        )
+
     if dis_actions.exists():
-        return redirect(disciplinary_filter_view)
+        return redirect(reverse("disciplinary-actions-list"))
     return HttpResponse("<script>window.location.reload()</script>")
 
 
diff --git a/employee/sidebar.py b/employee/sidebar.py
index bea3855dc..7c310b1b5 100644
--- a/employee/sidebar.py
+++ b/employee/sidebar.py
@@ -9,10 +9,13 @@ from django.utils.translation import gettext_lazy as trans
 
 from accessibility.methods import check_is_accessible
 from base.templatetags.basefilters import is_reportingmanager
+from horilla.horilla_middlewares import _thread_locals
 
+request = getattr(_thread_locals, "request", None)
 MENU = trans("Employee")
 IMG_SRC = "images/ui/employees.svg"
 
+
 SUBMENUS = [
     {
         "menu": trans("Profile"),
@@ -70,6 +73,12 @@ def profile_accessibility(request, submenu, user_perms, *args, **kwargs):
         ) == str(request.session["selected_company"])
     finally:
         return accessible
+        # try:
+        #     if accessible:
+        #         submenu["redirect"] = reverse("employee-profile", kwargs={"obj_id": request.user.employee_get.id})
+        # except Exception:
+        #     # If an exception occurs, do nothing
+        #     pass
 
 
 def document_accessibility(request, submenu, user_perms, *args, **kwargs):
diff --git a/employee/static/cbv/employee_view/actions.js b/employee/static/cbv/employee_view/actions.js
new file mode 100644
index 000000000..911150361
--- /dev/null
+++ b/employee/static/cbv/employee_view/actions.js
@@ -0,0 +1,558 @@
+
+var downloadMessages = {
+    ar: "هل ترغب في تنزيل القالب؟",
+    de: "Möchten Sie die Vorlage herunterladen?",
+    es: "¿Quieres descargar la plantilla?",
+    en: "Do you want to download the template?",
+    fr: "Voulez-vous télécharger le modèle ?",
+  };
+  
+  var importSuccess = {
+    ar: "نجح الاستيراد", // Arabic
+    de: "Import erfolgreich", // German
+    es: "Importado con éxito", // Spanish
+    en: "Imported Successfully!", // English
+    fr: "Importation réussie", // French
+  };
+  
+  var uploadSuccess = {
+    ar: "تحميل كامل", // Arabic
+    de: "Upload abgeschlossen", // German
+    es: "Carga completa", // Spanish
+    en: "Upload Complete!", // English
+    fr: "Téléchargement terminé", // French
+  };
+  
+  var uploadingMessage = {
+    ar: "جارٍ الرفع",
+    de: "Hochladen...",
+    es: "Subiendo...",
+    en: "Uploading...",
+    fr: "Téléchargement en cours...",
+  };
+  
+  var validationMessage = {
+    ar: "يرجى تحميل ملف بامتداد .xlsx فقط.",
+    de: "Bitte laden Sie nur eine Datei mit der Erweiterung .xlsx hoch.",
+    es: "Por favor, suba un archivo con la extensión .xlsx solamente.",
+    en: "Please upload a file with the .xlsx extension only.",
+    fr: "Veuillez télécharger uniquement un fichier avec l'extension .xlsx.",
+  };
+
+  var excelMessages = {
+    ar: "هل ترغب في تنزيل ملف Excel؟",
+    de: "Möchten Sie die Excel-Datei herunterladen?",
+    es: "¿Desea descargar el archivo de Excel?",
+    en: "Do you want to download the excel file?",
+    fr: "Voulez-vous télécharger le fichier Excel?",
+  };
+  var archiveMessagesEmployee = {
+    ar: "هل ترغب حقًا في أرشفة جميع الموظفين المحددين؟",
+    de: "Möchten Sie wirklich alle ausgewählten Mitarbeiter archivieren?",
+    es: "¿Realmente quieres archivar a todos los empleados seleccionados?",
+    en: "Do you really want to archive all the selected employees?",
+    fr: "Voulez-vous vraiment archiver tous les employés sélectionnés ?",
+  };
+  
+  var unarchiveMessagesEmployees = {
+    ar: "هل ترغب حقًا في إلغاء أرشفة جميع الموظفين المحددين؟",
+    de: "Möchten Sie wirklich alle ausgewählten Mitarbeiter aus der Archivierung zurückholen?",
+    es: "¿Realmente quieres desarchivar a todos los empleados seleccionados?",
+    en: "Do you really want to unarchive all the selected employees?",
+    fr: "Voulez-vous vraiment désarchiver tous les employés sélectionnés?",
+  };
+  
+  var deleteMessages = {
+    ar: "هل ترغب حقًا في حذف جميع الموظفين المحددين؟",
+    de: "Möchten Sie wirklich alle ausgewählten Mitarbeiter löschen?",
+    es: "¿Realmente quieres eliminar a todos los empleados seleccionados?",
+    en: "Do you really want to delete all the selected employees?",
+    fr: "Voulez-vous vraiment supprimer tous les employés sélectionnés?",
+  };
+  
+  var noRowMessages = {
+    ar: "لم يتم تحديد أي صفوف.",
+    de: "Es wurden keine Zeilen ausgewählt.",
+    es: "No se han seleccionado filas.",
+    en: "No rows have been selected.",
+    fr: "Aucune ligne n'a été sélectionnée.",
+  };
+  
+  var rowMessages = {
+    ar: " تم الاختيار",
+    de: " Ausgewählt",
+    es: " Seleccionado",
+    en: " Selected",
+    fr: " Sélectionné",
+  };
+  
+  
+  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();
+        // Does this cookie string begin with the name we want?
+        if (cookie.substring(0, name.length + 1) === name + "=") {
+          cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
+          break;
+        }
+      }
+    }
+    return cookieValue;
+  }
+  
+  function getCurrentLanguageCode(callback) {
+    var languageCode = $("#main-section-data").attr("data-lang");
+    var allowedLanguageCodes = ["ar", "de", "es", "en", "fr"];
+    if (allowedLanguageCodes.includes(languageCode)) {
+      callback(languageCode);
+    } else {
+      $.ajax({
+        type: "GET",
+        url: "/employee/get-language-code/",
+        success: function (response) {
+          var ajaxLanguageCode = response.language_code;
+          $("#main-section-data").attr("data-lang", ajaxLanguageCode);
+          callback(
+            allowedLanguageCodes.includes(ajaxLanguageCode)
+              ? ajaxLanguageCode
+              : "en"
+          );
+        },
+        error: function () {
+          callback("en");
+        },
+      });
+    }
+  }
+
+  var form = document.getElementById("workInfoImportForm");
+
+  // Add an event listener to the form submission
+  form.addEventListener("submit", function (event) {
+    // Prevent the default form submission
+    event.preventDefault();
+  
+    // Create a new form data object
+    $(".oh-dropdown__import-form").css("display", "none");
+    $("#uploading").css("display", "block");
+    var formData = new FormData();
+  
+    // Append the file to the form data object
+    var fileInput = document.querySelector("#workInfoImportFile");
+    formData.append("file", fileInput.files[0]);
+    $.ajax({
+      type: "POST",
+      url: "/employee/work-info-import",
+      dataType: "binary",
+      data: formData,
+      processData: false,
+      contentType: false,
+      headers: {
+        "X-CSRFToken": getCookie("csrftoken"),
+      },
+      xhrFields: {
+        responseType: "blob",
+      },
+      success: function (response, textStatus, xhr) {
+        var errorCount = xhr.getResponseHeader('X-Error-Count');
+        if (typeof response === 'object' && response.type == 'application/json') {
+          var reader = new FileReader();
+  
+          reader.onload = function() {
+            var json = JSON.parse(reader.result);
+  
+            if(json.success_count > 0) {
+              Swal.fire({
+                text: `${json.success_count} Employees Imported Successfully`,
+                icon: "success",
+                showConfirmButton: false,
+                timer: 3000,
+                timerProgressBar: true,
+              }).then(function() {
+                window.location.reload();
+              });
+            }
+          }
+          reader.readAsText(response);
+          return;
+        }
+        if (!$(".file-xlsx-validation").length) {
+          swal.fire({
+            text: `You have ${errorCount} errors. Do you want to download the error list?`,
+            icon: "error",
+            showCancelButton: true,
+            showDenyButton: true,
+            confirmButtonText: "Download error list & Skip Import",
+            denyButtonText: "Downlod error list & Continue Import",
+            cancelButtonText: "Cancel",
+            confirmButtonColor: "#d33",
+            denyButtonColor: "#008000",
+            customClass: {
+              container: 'custom-swal-container'
+            }
+          })
+          .then((result) => {
+            if (result.isConfirmed) {
+              const file = new Blob([response], {
+                type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+              });
+              const url = URL.createObjectURL(file);
+              const link = document.createElement("a");
+              link.href = url;
+              link.download = "ImportError.xlsx";
+              document.body.appendChild(link);
+              link.click();
+              window.location.reload();
+            }
+            else if (result.isDenied) {
+              formData.append("create_work_info", true);
+              $.ajax({
+                type: "POST",
+                url: "/employee/work-info-import",
+                dataType: "binary",
+                data: formData,
+                processData: false,
+                contentType: false,
+                headers: {
+                  "X-CSRFToken": getCookie("csrftoken"),
+                },
+                xhrFields: {
+                  responseType: "blob",
+                },
+                success: function (response, textStatus, xhr) {
+                  Swal.fire({
+                    text: `Employees Imported Successfully`,
+                    icon: "success",
+                    showConfirmButton: false,
+                    timer: 3000,
+                    timerProgressBar: true,
+                  }).then(function() {
+                    const file = new Blob([response], {
+                      type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+                    });
+                    const url = URL.createObjectURL(file);
+                    const link = document.createElement("a");
+                    link.href = url;
+                    link.download = "ImportError.xlsx";
+                    document.body.appendChild(link);
+                    link.click();
+                    window.location.reload();
+                  });
+  
+                  return;
+                }
+              })
+            }
+            else {
+              $(".oh-dropdown__import-form").css("display", "block");
+              $("#uploading").css("display", "none");
+            }
+          });
+        }
+  
+      },
+      error: function (xhr, textStatus, errorThrown) {
+        console.error("Error downloading file:", errorThrown);
+      },
+    });
+  });
+  
+  
+
+$(document).on("click", "#work-info-import", function (e) {
+    e.preventDefault();
+    getCurrentLanguageCode(function (code) {
+      var languageCode = code;
+      var confirmMessage = downloadMessages[languageCode];
+      Swal.fire({
+        text: confirmMessage,
+        icon: "question",
+        showCancelButton: true,
+        confirmButtonColor: "#008000",
+        cancelButtonColor: "#d33",
+        confirmButtonText: "Confirm",
+      }).then(function (result) {
+        if (result.isConfirmed) {
+          $("#loading").show();
+  
+          var xhr = new XMLHttpRequest();
+          xhr.open("GET", "/employee/work-info-import", true);
+          xhr.responseType = "arraybuffer";
+
+          xhr.upload.onprogress = function (e) {
+            if (e.lengthComputable) {
+              var percent = (e.loaded / e.total) * 100;
+              $(".progress-bar")
+                .width(percent + "%")
+                .attr("aria-valuenow", percent);
+              $("#progress-text").text(
+                "Uploading... " + percent.toFixed(2) + "%"
+              );
+            }
+          };
+  
+          xhr.onload = function (e) {
+            if (this.status == 200) {
+              const file = new Blob([this.response], {
+                type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+              });
+              const url = URL.createObjectURL(file);
+              const link = document.createElement("a");
+              link.href = url;
+              link.download = "work_info_template.xlsx";
+              document.body.appendChild(link);
+              link.click();
+            }
+          };
+  
+  
+          xhr.onerror = function () {
+            console.error("Error downloading file:", xhr.statusText);
+          };
+  
+          xhr.onerror = function (e) {
+            console.error("Error downloading file:", e);
+          };
+          xhr.send();
+        }
+      });
+    });
+  });
+  $(document).ajaxStart(function () {
+    $("#loading").show();
+  });
+  
+  $(document).ajaxStop(function () {
+    $("#loading").hide();
+  });
+  
+  function simulateProgress() {
+    getCurrentLanguageCode(function (code) {
+      let progressBar = document.querySelector(".progress-bar");
+      let progressText = document.getElementById("progress-text");
+  
+      let width = 0;
+      let interval = setInterval(function () {
+        if (width >= 100) {
+          clearInterval(interval);
+          progressText.innerText = uploadMessage;
+          setTimeout(function () {
+            document.getElementById("loading").style.display = "none";
+          }, 3000);
+          Swal.fire({
+            text: importMessage,
+            icon: "success",
+            showConfirmButton: false,
+            timer: 2000,
+            timerProgressBar: true,
+          });
+          setTimeout(function () {
+            $("#workInfoImport").removeClass("oh-modal--show");
+            location.reload(true);
+          }, 2000);
+        } else {
+          width++;
+          progressBar.style.width = width + "%";
+          progressBar.setAttribute("aria-valuenow", width);
+          progressText.innerText = uploadingMessage[languageCode] + width + "%";
+        }
+      }, 20);
+    });
+  }
+  
+  
+
+  $(document).on("click", "#archiveEmployees", function (e) {
+    e.preventDefault();
+    var languageCode = null;
+    languageCode = $("#main-section-data").attr("data-lang");
+    var confirmMessage =
+    archiveMessagesEmployee[languageCode] ||
+      ((languageCode = "en"), archiveMessages[languageCode]);
+    var textMessage =
+      noRowMessages[languageCode] ||
+      ((languageCode = "en"), noRowMessages[languageCode]);
+    ids = [];
+    ids.push($("#selectedInstances").attr("data-ids"));
+    ids = JSON.parse($("#selectedInstances").attr("data-ids"));
+    if (ids.length === 0) {
+      Swal.fire({
+        text: textMessage,
+        icon: "warning",
+        confirmButtonText: "Close",
+      });
+    } else {
+      Swal.fire({
+        text: confirmMessage,
+        icon: "info",
+        showCancelButton: true,
+        confirmButtonColor: "#008000",
+        cancelButtonColor: "#d33",
+        confirmButtonText: "Confirm",
+      }).then(function (result) {
+        if (result.isConfirmed) {
+          e.preventDefault();
+          ids = [];
+          ids.push($("#selectedInstances").attr("data-ids"));
+          ids = JSON.parse($("#selectedInstances").attr("data-ids"));
+          $.ajax({
+            type: "POST",
+            url: "/employee/employee-bulk-archive?is_active=False",
+            data: {
+              csrfmiddlewaretoken: getCookie("csrftoken"),
+              ids: JSON.stringify(ids),
+            },
+            success: function (response, textStatus, jqXHR) {
+              if (jqXHR.status === 200) {
+                location.reload(); // Reload the current page
+              } else {
+                // console.log("Unexpected HTTP status:", jqXHR.status);
+              }
+            },
+          });
+        }
+      });
+    }
+  });
+
+
+  $(document).on("click", "#unArchiveEmployees", function (e) {
+    e.preventDefault();
+    var languageCode = null;
+    languageCode = $("#main-section-data").attr("data-lang");
+    var confirmMessage =
+    unarchiveMessagesEmployees[languageCode] ||
+      ((languageCode = "en"), unarchiveMessages[languageCode]);
+    var textMessage =
+      noRowMessages[languageCode] ||
+      ((languageCode = "en"), noRowMessages[languageCode]);
+    ids = [];
+    ids.push($("#selectedInstances").attr("data-ids"));
+    ids = JSON.parse($("#selectedInstances").attr("data-ids"));
+    if (ids.length === 0) {
+      Swal.fire({
+        text: textMessage,
+        icon: "warning",
+        confirmButtonText: "Close",
+      });
+    } else {
+      Swal.fire({
+        text: confirmMessage,
+        icon: "info",
+        showCancelButton: true,
+        confirmButtonColor: "#008000",
+        cancelButtonColor: "#d33",
+        confirmButtonText: "Confirm",
+      }).then(function (result) {
+        if (result.isConfirmed) {
+          e.preventDefault();
+  
+          ids = [];
+  
+          ids.push($("#selectedInstances").attr("data-ids"));
+          ids = JSON.parse($("#selectedInstances").attr("data-ids"));
+  
+          $.ajax({
+            type: "POST",
+            url: "/employee/employee-bulk-archive?is_active=True",
+            data: {
+              csrfmiddlewaretoken: getCookie("csrftoken"),
+              ids: JSON.stringify(ids),
+            },
+            success: function (response, textStatus, jqXHR) {
+              if (jqXHR.status === 200) {
+                location.reload(); // Reload the current page
+              } else {
+                // console.log("Unexpected HTTP status:", jqXHR.status);
+              }
+            },
+          });
+        }
+      });
+    }
+  });
+
+  $(document).on("click", "#employeeBulkUpdateId", function (e) {
+    var languageCode = null;
+    languageCode = $("#main-section-data").attr("data-lang");
+    var textMessage =
+      noRowMessages[languageCode] ||
+      ((languageCode = "en"), noRowMessages[languageCode]);
+    ids = [];
+    ids.push($("#selectedInstances").attr("data-ids"));
+    ids = JSON.parse($("#selectedInstances").attr("data-ids"));
+    if (ids.length === 0) {
+      $("#bulkUpdateModal").removeClass("oh-modal--show");
+      Swal.fire({
+        text: textMessage,
+        icon: "warning",
+        confirmButtonText: "Close",
+      });
+    } else {
+      $("#id_bulk_employee_ids").val(JSON.stringify(ids));
+      $("#bulkUpdateModal").addClass("oh-modal--show");
+    }
+  });
+
+
+  $(document).on("click", "#deleteEmployees", function (e) {
+    e.preventDefault();
+    var languageCode = null;
+    languageCode = $("#main-section-data").attr("data-lang");
+    var confirmMessage =
+      deleteMessages[languageCode] ||
+      ((languageCode = "en"), deleteMessages[languageCode]);
+    var textMessage =
+      noRowMessages[languageCode] ||
+      ((languageCode = "en"), noRowMessages[languageCode]);
+    ids = [];
+    ids.push($("#selectedInstances").attr("data-ids"));
+    ids = JSON.parse($("#selectedInstances").attr("data-ids"));
+    if (ids.length === 0) {
+      Swal.fire({
+        text: textMessage,
+        icon: "warning",
+        confirmButtonText: "Close",
+      });
+    } else {
+      Swal.fire({
+        text: confirmMessage,
+        icon: "error",
+        showCancelButton: true,
+        confirmButtonColor: "#008000",
+        cancelButtonColor: "#d33",
+        confirmButtonText: "Confirm",
+      }).then(function (result) {
+        if (result.isConfirmed) {
+          e.preventDefault();
+  
+          ids = [];
+          ids.push($("#selectedInstances").attr("data-ids"));
+          ids = JSON.parse($("#selectedInstances").attr("data-ids"));
+  
+          $.ajax({
+            type: "POST",
+            url: "/employee/employee-bulk-delete",
+            data: {
+              csrfmiddlewaretoken: getCookie("csrftoken"),
+              ids: JSON.stringify(ids),
+            },
+            success: function (response, textStatus, jqXHR) {
+              if (jqXHR.status === 200) {
+                location.reload(); // Reload the current page
+              } else {
+                // console.log("Unexpected HTTP status:", jqXHR.status);
+              }
+            },
+          });
+        }
+      });
+    }
+  });
+  
+ 
+  
+  
\ No newline at end of file
diff --git a/employee/static/employee/importExport.js b/employee/static/employee/importExport.js
index 190f82084..17e48e916 100644
--- a/employee/static/employee/importExport.js
+++ b/employee/static/employee/importExport.js
@@ -1,3 +1,4 @@
+
 var downloadMessages = {
     ar: "هل ترغب في تنزيل القالب؟",
     de: "Möchten Sie die Vorlage herunterladen?",
diff --git a/employee/templates/cbv/allocations/allocations.html b/employee/templates/cbv/allocations/allocations.html
new file mode 100644
index 000000000..78b2e070b
--- /dev/null
+++ b/employee/templates/cbv/allocations/allocations.html
@@ -0,0 +1,58 @@
+{% load generic_template_filters %}
+<div class="oh-card">
+  <div class="row">
+    <div class="col-12 col-sm-12 col-md-12 col-lg-3">
+      <button class="oh-btn oh-btn--light oh-inner-sidebar-toggle w-100" data-action="toggle" data-target="#mobileMenu" data-class="oh-resp-hidden--lg"><ion-icon class="me-2" name="menu-outline"></ion-icon>All Settings</button>
+      <div class="oh-inner-sidebar oh-resp-hidden--lg">
+        <!-- profile -->
+
+        <div class="oh-card oh-card--no-shadow oh-card__body p-0">
+          <a class="oh-timeoff-modal__profile-content" style="text-decoration: none">
+            <div class="oh-profile">
+              <div class="oh-profile__avatar">
+                <img src="{{instance.get_avatar}}" class="oh-profile__image me-2" />
+              </div>
+              <div class="oh-timeoff-modal__profile-info">
+                <span class="oh-timeoff-modal__user fw-bold">{{instance.get_full_name}}</span>
+                <span class="oh-timeoff-modal__user m-0" style="font-size: 14px; color: #4d4a4a">{{instance.employee_work_info.job_position_id.job_position}}</span>
+              </div>
+            </div>
+          </a>
+        </div>
+
+        <!--  -->
+
+        <ul class="oh-inner-sidebar__items">
+          {% for menu in menues %}
+          <li class="oh-inner-sidebar__item">
+            {% if menu.accessibility is None or menu.accessibility|accessibility %}
+            <span
+              hx-get="{{menu.url}}?instance_id={{instance.pk}}" class="oh-inner-sidebar__link"
+              {% comment %} oh-inner-sidebar__link--active {% endcomment %}
+              onclick="
+              $('.oh-card .oh-inner-sidebar__item span.oh-inner-sidebar__link--active').removeClass('oh-inner-sidebar__link--active');
+              $(this).addClass('oh-inner-sidebar__link--active');
+              "
+              hx-target="#allocationContent"
+              >{{menu.menu}}
+            </span>
+            {% endif %}
+          </li>
+          {% endfor %}
+    
+        </ul>
+      </div>
+    </div>
+
+    <div class="col-12 col-sm-12 col-md-12 col-lg-9" id="allocationContent">
+    </div>
+  </div>
+</div>
+<script>
+  $(document).ready(function () {
+
+    setTimeout(() => {
+      $(".oh-inner-sidebar__item:first span").click();
+    }, 100);
+  });
+</script>
diff --git a/employee/templates/cbv/allocations/asset/actions.html b/employee/templates/cbv/allocations/asset/actions.html
new file mode 100644
index 000000000..5884d0706
--- /dev/null
+++ b/employee/templates/cbv/allocations/asset/actions.html
@@ -0,0 +1,8 @@
+{% if not instance.asset_status != "Available" %}
+  <a style="font-size: 15px;color: darkseagreen;" title="Allocate Asset" onclick="
+  $(this).closest('tr').find('td:first [type=checkbox]').prop('checked',!$(this).find('td:first [type=checkbox]').is(':checked')).change();
+  $('#addTypesButton').click();
+  " class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100"><ion-icon name="checkmark-done-circle-outline"></ion-icon></a>
+{% else %}
+  <a style="font-size: 15px;" hx-get="{% url "allocation-return-asset" instance.pk %}" hx-target="#genericModalBody" data-toggle="oh-modal-toggle" data-target="#genericModal" title="Return Asset" class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100"><ion-icon name="return-up-back-outline"></ion-icon></a>
+{% endif %}
diff --git a/employee/templates/cbv/allocations/asset/allocation_status.html b/employee/templates/cbv/allocations/asset/allocation_status.html
new file mode 100644
index 000000000..d2a932b78
--- /dev/null
+++ b/employee/templates/cbv/allocations/asset/allocation_status.html
@@ -0,0 +1,16 @@
+{% if instance.asset_status != "Available" %}
+<div class="d-flex align-items-center">
+    <span class="oh-dot oh-dot--small me-1 oh-dot--color  oh-dot--success ">
+    </span>
+    <span class=" link-success ">Allocated
+    </span>
+</div>
+{% else %}
+{% comment %} <div class="d-flex align-items-center">
+    <span class="oh-dot oh-dot--small me-1 oh-dot--color  oh-dot--info ">
+    </span>
+    <span class=" link-info ">Available
+    </span>
+</div> {% endcomment %}
+Available
+{% endif %}
\ No newline at end of file
diff --git a/employee/templates/cbv/allocations/asset/asset_list.html b/employee/templates/cbv/allocations/asset/asset_list.html
new file mode 100644
index 000000000..afcefd888
--- /dev/null
+++ b/employee/templates/cbv/allocations/asset/asset_list.html
@@ -0,0 +1,29 @@
+{% load i18n %}
+<div id="{{ view_id }}">
+  <div class="oh-layout_horizontal">
+    {% for asset in assigned_assets %}
+      <div class="oh-kanban-card">
+        <div class="d-flex flex-column gap-2">
+          <div class="oh-kanban-card__avatar">
+            <div class="oh-kanban-card__profile-container">
+              <img src="{{ asset.allocation_asset_get_avatar }}" class="oh-kanban-card__profile-image" />
+            </div>
+          </div>
+          <div class="oh-kanban-card__details">
+            <span class="oh-kanban-card__title">{{ asset.asset_name }}</span>
+            <span class="oh-kanban-card__subtitle">{% trans 'Category' %}: {{ asset.asset_category_id }}</span>
+            <br />
+            <span class="oh-kanban-card__subtitle">{% trans 'Tracking' %}: {{ asset.asset_tracking_id }}</span>
+          </div>
+        </div>
+      </div>
+    {% endfor %}
+  </div>
+  {% if not request.GET.card_only %}
+    {% include 'generic/horilla_list_table.html' %}
+  {% elif not queryset.exists %}
+    <div class="oh-checkpoint-badge text-success quick-bulk-action" onclick="$(`[hx-get='{% url "allocation-assets" %}?instance_id={{request.GET.instance_id}}']`).click();" style="cursor: pointer;">
+      <span class="label">+ Allocate</span>
+    </div>
+  {% endif %}
+</div>
diff --git a/employee/templates/cbv/allocations/asset/assets.html b/employee/templates/cbv/allocations/asset/assets.html
new file mode 100644
index 000000000..2e5fad309
--- /dev/null
+++ b/employee/templates/cbv/allocations/asset/assets.html
@@ -0,0 +1,47 @@
+<div class="oh-inner-sidebar-content p-0">
+    <div class="oh-inner-sidebar-content__header">
+      <div class="oh-main__titlebar oh-main__titlebar--right justify-content-between align-items-center">
+        <div class="oh-input-group oh-input__search-group" style="margin-left: -15px;" :class="searchShow ? 'oh-input__search-group--show' : ''">
+          <ion-icon name="search-outline" class="oh-input-group__icon oh-input-group__icon--left md hydrated" role="img" aria-label="search outline"></ion-icon>
+          <input 
+            type="text" 
+            hx-get="{% url "allocation-asset-list" %}?instance_id={{request.GET.instance_id}}"
+            hx-trigger="keyup changed delay:.100s"
+            hx-target="#typesContainer"
+            autocomplete="false"
+            name="search"
+            class="oh-input oh-input__icon" 
+            aria-label="Search Input" 
+            placeholder="Search" />
+        </div>
+      </div>
+    </div>
+    <div class="oh-inner-sidebar-content__body">
+      <div class="oh-general__tab-target mb-4" id="types">
+        <div id="selectedInstances" data-ids="[]" hidden></div>
+        <form hx-post="{% url "allocation-asset-list" %}?instance_id={{request.GET.instance_id}}" hx-target="#responseContainer" id="idsForm">
+          <input type="text" name="ids" value="[]" hidden>
+          <input type="text" name="instance_id" value="{{request.GET.instance_id}}" hidden>
+          <input type="submit" hidden>
+        </form>
+        <div class="oh-profile-section__card"
+        id="typesContainer"
+        hx-get="{% url "allocation-asset-list" %}?instance_id={{request.GET.instance_id}}" hx-trigger="load"
+        >
+        </div>
+      </div>
+      <div class="oh-modal__dialog-footer p-0">
+        <button type="submit" 
+        onclick="
+         ids = $('#selectedInstances').attr('data-ids')
+         $('.oh-inner-sidebar-content [name=ids]').val(ids);
+         $('#idsForm [type=submit]').click();
+        "
+        class="oh-btn oh-btn--secondary oh-btn--shadow" id="addTypesButton">Add</button>
+      </div>
+    </div>
+  </div>
+  
+  <div id="responseContainer" hidden>
+  
+  </div>
\ No newline at end of file
diff --git a/employee/templates/cbv/allocations/asset/return_form.html b/employee/templates/cbv/allocations/asset/return_form.html
new file mode 100644
index 000000000..9b2dc7f90
--- /dev/null
+++ b/employee/templates/cbv/allocations/asset/return_form.html
@@ -0,0 +1,89 @@
+{% load i18n %} {% load horillafilters %}
+<div class="oh-modal__dialog-header">
+    <button
+        type="button"
+        class="oh-modal_close--custom"
+        onclick="$(this).closest('.oh-modal--show').removeClass('oh-modal--show');"
+    >
+        <ion-icon
+            name="close-outline"
+            role="img"
+            aria-label="close outline"
+            class="md hydrated"
+        ></ion-icon>
+    </button>
+    <span
+        class="oh-modal__dialog-title ml-5"
+        id="addEmployeeObjectiveModalLabel"
+    >
+        <h5>{% trans "Asset Return Form" %}</h5>
+    </span>
+</div>
+<div class="oh-modal__dialog-body">
+    <form
+        hx-post="{%url 'allocation-return-asset' asset_id=asset_id %}"
+        hx-target="#genericModalBody"
+        hx-encoding="multipart/form-data"
+    >
+        {% csrf_token %}
+        <div class="oh-profile-section pt-0">
+            <div class="oh-input__group">
+                <label class="oh-input__label" for="objective"
+                    >{% trans "Return Status" %}</label
+                >
+                {{asset_return_form.return_status}}
+            </div>
+            <div class="oh-input__group">
+                <label class="oh-input__label" for="objective"
+                    >{% trans "Return Date" %}</label
+                >
+                {{asset_return_form.return_date}}
+                {{asset_return_form.return_date.errors}}
+            </div>
+            <div class="oh-input__group">
+                <label class="oh-input__label" for="objective"
+                    >{% trans "Return Condition" %}</label
+                >
+                {{asset_return_form.return_condition}}
+            </div>
+            <div class="oh-input__group">
+                <label class="oh-input__label" for="objective"
+                    >{% trans "Return Condition Images" %}</label
+                >
+                {{asset_return_form.return_images}}
+            </div>
+            <div class="oh-btn-group mt-4">
+                <button
+                    class="oh-btn oh-btn--info oh-btn--shadow w-100"
+                    type="button"
+                    data-toggle="oh-modal-toggle"
+                    data-target="#dynamicCreateModal"
+                    hx-get="{% url "add-asset-report" asset_id %}"
+                    hx-target="#dynamicCreateModalTarget"
+                >
+                    {% trans "Add Report" %}
+                </button>
+                {% if "payroll"|app_installed %} 
+                    {% if perms.payroll.add_loanaccount %}
+                        <button
+                            class="oh-btn oh-btn--primary oh-btn--shadow w-100 ml-2"
+                            type="button"
+                            hx-get="{% url "asset-fine" %}?employee_id={{asset_alocation.assigned_to_employee_id.id}}&asset_id={{asset_id}}"
+                            hx-target="#dynamicCreateModalTarget"
+                            data-toggle="oh-modal-toggle"
+                            data-target="#dynamicCreateModal"
+                        >
+                            {% trans "Add Fine" %}
+                        </button>
+                    {% endif %}
+                {% endif %}
+                <button
+                    type="submit"
+                    class="oh-btn oh-btn--secondary oh-btn--shadow w-100 ml-2"
+                >
+                    {% trans "Save" %}
+                </button>
+            </div>
+        </div>
+    </form>
+</div>
diff --git a/employee/templates/cbv/allocations/auth/group_form.html b/employee/templates/cbv/allocations/auth/group_form.html
new file mode 100644
index 000000000..862e93e64
--- /dev/null
+++ b/employee/templates/cbv/allocations/auth/group_form.html
@@ -0,0 +1,11 @@
+{% load i18n %}
+<form hx-post="{% url "allocation-assign-group-user" %}?employee={{employee}}" hx-target="#groupAssignBody" method="post">
+    {{form.group.errors}}
+    {{form.group}}
+    <input type="hidden" name="employee" value="{{employee_id}}" id="{{employee_id}}">
+    <div class="d-flex flex-row-reverse">
+        <button type="submit" class="oh-btn oh-btn--secondary mt-2 mr-0 pl-4 pr-5 oh-btn--w-100-resp">
+          {% trans "Save" %}
+        </button>
+    </div>
+</form>
diff --git a/employee/templates/cbv/allocations/auth/group_view.html b/employee/templates/cbv/allocations/auth/group_view.html
new file mode 100644
index 000000000..8aeaf0b3e
--- /dev/null
+++ b/employee/templates/cbv/allocations/auth/group_view.html
@@ -0,0 +1,39 @@
+{% load i18n %}
+<script>
+  function checkSelected(names, target,initial=false) {
+    names = JSON.parse(`${names}`);
+    $.each(names, function (indexInArray, valueOfElement) {
+      if (!initial) {
+        $(target).find(`[value=${valueOfElement}]`).prop("checked", true).change();
+      }else{
+        $(target).find(`[value=${valueOfElement}]`).prop("checked", true);
+      }
+    });
+  }
+</script>
+<div class="oh-modal" id="groupAssign" role="dialog" aria-labelledby="groupAssign" aria-hidden="true">
+  <div class="oh-modal__dialog">
+    <div class="oh-modal__dialog-header">
+      <h2 class="oh-modal__dialog-title" id="editModal1ModalLabel">{% trans 'Group Assign' %}</h2>
+      <button class="oh-modal__close--custom" onclick="$(this).closest('.oh-modal--show').removeClass('oh-modal--show')" aria-label="Close"><ion-icon name="close-outline"></ion-icon></button>
+    </div>
+    <div class="oh-modal__dialog-body" id="groupAssignBody"></div>
+  </div>
+</div>
+<div class="oh-inner-sidebar-content p-0">
+  <div class="oh-inner-sidebar-content__body">
+    <div class="oh-general__tab-target mb-4" id="types">
+      <div id="selectedInstances" data-ids="[]" hidden></div>
+      <form hx-post="{% url 'allocation-leave-type-list' %}" hx-target="#responseContainer" id="idsForm">
+        <input type="text" name="ids" value="[]" hidden />
+        <input type="text" name="instance_id" value="{{ request.GET.instance_id }}" hidden />
+        <input type="submit" hidden />
+      </form>
+      <div class="oh-profile-section__card" id="typesContainer" hx-get="{% url 'allocation-user-groups' %}?instance_id={{ request.GET.instance_id }}" hx-trigger="load"></div>
+    </div>
+    <div class="oh-modal__dialog-footer p-0">
+    </div>
+  </div>
+</div>
+
+<div id="responseContainer" hidden></div>
diff --git a/employee/templates/cbv/allocations/auth/groups.html b/employee/templates/cbv/allocations/auth/groups.html
new file mode 100644
index 000000000..5ce49d6be
--- /dev/null
+++ b/employee/templates/cbv/allocations/auth/groups.html
@@ -0,0 +1,403 @@
+{% load i18n static %}
+
+{% if perms.auth.view_permission or perms.auth.view_group %}
+
+<div class="oh-tabs__contents">
+    <div class="" id="tab_1_permission">
+        {% load i18n %}
+        <div id="messages" class="oh-alert-container"></div>
+
+        <div class="oh-inner-sidebar-content__header d-flex justify-content-between align-items-center">
+            <h2 class="oh-inner-sidebar-content__title">{% trans "Employee Permissions" %}</h2>
+        </div>
+        <div id="permissionContainer">
+            {% load basefilters i18n %}
+            {% for employee in employees %}
+            <div class="oh-user_permission-list_item perm-accordion exclude-accordion-style" onclick="$(this).next().toggle();$(this).toggleClass('perm-accordion-active');$(this).next().find('.oh-general__tab-target').removeClass('d-none');">
+                <div class="oh-user_permission-list_profile">
+                <div class="oh-navbar__user-photo oh-user_permission--profile">
+                    <img src="{{ employee.get_avatar }}" class="oh-navbar__user-image" loading="lazy" />
+                </div>
+                <div class="oh-feedback-card__name-container ms-1">
+                    <span class="oh-card__title oh-card__title--sm fw-bold me-1">{{ employee }}</span>
+                    <span class="oh-user_permission_list-text oh-text--light">{{ employee.employee_work_info.job_role_id.job_role }} | {{ employee.employee_work_info.job_position_id }} | {{ employee.employee_work_info.department_id }}</span>
+                </div>
+                </div>
+                <button class="oh-accordion-meta__btn oh-user_permssion-dropdownbtn"><ion-icon class="ms-2 oh-accordion-meta__btn-icon md hydrated" name="caret-down-outline" role="img" aria-label="caret down outline"></ion-icon></button>
+            </div>
+            <div class="panel view-employees" id="panel{{ employee.id }}" data-user-id="{{ employee.id }}">
+                <div class="oh-general__tab-target oh-profile-section">
+                <script>
+                    $(document).ready(function () {
+                    checkSelected(`{{employee.employee_user_id.user_permissions.all|user_perms|safe}}`, '#panel{{employee.id}}', true)
+                    })
+                </script>
+                {% if perms.auth.add_permission or perms.auth.change_permission or perms.auth.delete_permission %}
+                    {% load i18n %} 
+                    {% for perm in permissions %}
+                    <span type="button" class="perm-accordion w-100 p-2 oh-user_permission-list_item app-permissions" onclick="$(this).next().toggle();$(this).toggleClass('perm-accordion-active');">
+                        <div class="d-flex flex-row bd-highlight">
+                            <div class="p-2 bd-highlight">{{perm.app}}</div>
+                            <div class="p-2 bd-highlight">
+                                <span class="oh-tabs__input-badge-container">
+                                    <span
+                                    class="oh-badge permission-badge oh-badge--secondary oh-badge--small oh-badge--round ms-2 mr-2"
+                                    align="center"
+                                    >
+                                    0
+                                    </span>
+                                </span>
+                            </div>
+                        </div>
+                    </span>
+                    <div class="panel">
+                        <div class="oh-sticky-table">
+                            <div class="oh-sticky-table__table oh-table--sortable">
+                                <!-- Table Head -->
+                                <div class="oh-sticky-table__thead">
+                                    <div class="oh-sticky-table__tr">
+                                        <div class="oh-sticky-table__th" style="width: 50px;" align="center">
+                                            <input type="checkbox" class="row-permission__select-all" id="id{{perm.app}}Permissions" onchange="selectAllPermissions(this)">
+                                        </div>
+                                        <div class="oh-sticky-table__th">{% trans "Actions" %}</div>
+                                        <div class="oh-sticky-table__th" style="width: 80px;">
+                                            <div class="d-flex justify-content-center" title="{% trans "Can create" %}">
+                                                <ion-icon name="add-circle-outline"></ion-icon>
+                                            </div>
+                                        </div>
+                                        <div class="oh-sticky-table__th" style="width: 80px;">
+                                            <div class="d-flex justify-content-center" title="{% trans "Can view" %}">
+                                                <ion-icon name="eye-outline"></ion-icon>
+                                            </div>
+                                        </div>
+                                        <div class="oh-sticky-table__th" style="width: 80px;">
+                                            <div class="d-flex justify-content-center" title="{% trans "Can edit" %}">
+                                                <ion-icon name="create-outline"></ion-icon>
+                                            </div>
+                                        </div>
+                                        <div class="oh-sticky-table__th" style="width: 80px;">
+                                            <div class="d-flex justify-content-center" title="{% trans "Can delete" %}">
+                                                <ion-icon name="trash-outline"></ion-icon>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <!-- Table Body -->
+                                <div class="oh-sticky-table__tbody">
+                                    {% for model in perm.app_models %}
+                                        {% if model.model_name not in no_permission_models %}
+                                            <div class="oh-sticky-table__tr" draggable="true">
+                                                <!-- Checkbox -->
+                                                <div class="oh-sticky-table__sd" align="center">
+                                                    <input type="checkbox" id="id_{{perm.app}}{{model.model_name}}" class="row-permission" onchange="
+                                                        $(this).closest('.oh-sticky-table__tr').find('[type=checkbox][name=permissions]').prop('checked',$(this).is(':checked')).change();
+                                                    ">
+                                                </div>
+                                                <!-- Model Info -->
+                                                <div class="oh-sticky-table__td">
+                                                    <div class="oh-profile oh-profile--md">
+                                                        <div class="oh-profile__avatar mr-1">
+                                                            <img
+                                                                src="https://ui-avatars.com/api/?name={{model.verbose_name}}&background=random"
+                                                                class="oh-profile__image oh-table-img"
+                                                            />
+                                                        </div>
+                                                        <span class="oh-profile__name oh-text--dark">
+                                                            {{model.verbose_name}}
+                                                        </span>
+                                                    </div>
+                                                </div>
+                                                <!-- Can Create -->
+                                                <div class="oh-sticky-table__td" style="width: 80px;">
+                                                    <div class="d-flex justify-content-center">
+                                                        <div class="oh-switch">
+                                                            <input
+                                                                type="checkbox"
+                                                                name="permissions"
+                                                                value="add_{{model.model_name}}"
+                                                                class="oh-switch__checkbox"
+                                                                onchange="
+                                                                    if (!$(this).is(':checked')) {
+                                                                        $(this).closest('.oh-sticky-table__tr').find('.row-permission').prop('checked',false)
+                                                                    }
+                                                                "
+                                                                data-group-id="{{group.id}}"
+                                                                data-group-name="{{group.name}}"
+                                                            />
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                                <!-- Can View -->
+                                                <div class="oh-sticky-table__td" style="width: 80px;">
+                                                    <div class="d-flex justify-content-center">
+                                                        <div class="oh-switch">
+                                                            <input
+                                                                type="checkbox"
+                                                                name="permissions"
+                                                                value="view_{{model.model_name}}"
+                                                                class="oh-switch__checkbox view-permission"
+                                                                onchange="
+                                                                    if (!$(this).is(':checked')) {
+                                                                        $(this).closest('.oh-sticky-table__tr').find('.row-permission').prop('checked',false)
+                                                                    }
+                                                                "
+                                                                data-group-id="{{group.id}}"
+                                                                data-group-name="{{group.name}}"
+                                                            />
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                                <!-- Can Edit -->
+                                                <div class="oh-sticky-table__td" style="width: 80px;">
+                                                    <div class="d-flex justify-content-center">
+                                                        <div class="oh-switch">
+                                                            <input
+                                                                type="checkbox"
+                                                                name="permissions"
+                                                                value="change_{{model.model_name}}"
+                                                                class="oh-switch__checkbox"
+                                                                onchange="
+                                                                    if (!$(this).is(':checked')) {
+                                                                        $(this).closest('.oh-sticky-table__tr').find('.row-permission').prop('checked',false)
+                                                                    }
+                                                                "    
+                                                                data-group-id="{{group.id}}"
+                                                                data-group-name="{{group.name}}"
+                                                            />
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                                <!-- Can Delete -->
+                                                <div class="oh-sticky-table__td" style="width: 80px;">
+                                                    <div class="d-flex justify-content-center">
+                                                        <div class="oh-switch">
+                                                            <input
+                                                                type="checkbox"
+                                                                name="permissions"
+                                                                value="delete_{{model.model_name}}"
+                                                                class="oh-switch__checkbox"
+                                                                onchange="
+                                                                    if (!$(this).is(':checked')) {
+                                                                        $(this).closest('.oh-sticky-table__tr').find('.row-permission').prop('checked',false)
+                                                                    }
+                                                                "
+                                                                data-group-id="{{group.id}}"
+                                                                data-group-name="{{group.name}}"
+                                                            />
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        {% endif %}
+                                    {% endfor %}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    {% endfor %}
+                
+                {% endif %}
+                </div>
+            </div>
+            {% endfor %}
+            {% if employees.has_previous or employees.has_next %}
+            <div class="oh-wrapper w-100">
+            <div class="oh-pagination">
+                <span class="oh-pagination__page" data-toggle="modal" data-target="#addEmployeeModal">{% trans 'Page' %} {{ employees.number }} {% trans 'of' %} {{ employees.paginator.num_pages }}.</span>
+
+                <nav class="oh-pagination__nav">
+                <div class="oh-pagination__input-container me-3">
+                    <span class="oh-pagination__label me-1">{% trans 'Page' %}</span>
+
+                    <input type="number" name="page" class="oh-pagination__input" value="{{ employees.number }}" hx-get="{% url 'permission-search' %}?{{ pd }}" hx-target="#permissionContainer" min="1" />
+                    <span class="oh-pagination__label">{% trans 'of' %} {{ employees.paginator.num_pages }}</span>
+                </div>
+
+                <ul class="oh-pagination__items">
+                    {% if employees.has_previous %}
+                    <li class="oh-pagination__item oh-pagination__item--wide">
+                        <a hx-target="#permissionContainer" hx-get="{% url 'permission-search' %}?{{ pd }}&page=1" class="oh-pagination__link">{% trans 'First' %}</a>
+                    </li>
+                    <li class="oh-pagination__item oh-pagination__item--wide">
+                        <a hx-target="#permissionContainer" hx-get="{% url 'permission-search' %}?{{ pd }}&page={{ employees.previous_page_number }}" class="oh-pagination__link">{% trans 'Previous' %}</a>
+                    </li>
+                    {% endif %}
+                    {% if employees.has_next %}
+                    <li class="oh-pagination__item oh-pagination__item--wide">
+                        <a hx-target="#permissionContainer" hx-get="{% url 'permission-search' %}?{{ pd }}&page={{ employees.next_page_number }}" class="oh-pagination__link">{% trans 'Next' %}</a>
+                    </li>
+                    <li class="oh-pagination__item oh-pagination__item--wide">
+                        <a hx-target="#permissionContainer" hx-get="{% url 'permission-search' %}?{{ pd }}&page={{ employees.paginator.num_pages }}" class="oh-pagination__link">{% trans 'Last' %}</a>
+                    </li>
+                    {% endif %}
+                </ul>
+                </nav>
+            </div>
+            </div>
+            {% endif %}
+
+            <script>
+            function selectAllPermissions(elem) {
+                $(elem).closest('.oh-sticky-table__thead').siblings('.oh-sticky-table__tbody').find('.row-permission').prop('checked',$(elem).is(':checked')).change()
+            }
+                $(document).ready(function () {
+                    updateBadge();
+                    $("[type=checkbox]").change(function (e) {
+                        e.preventDefault();
+                    });
+                });
+                var timeout
+
+                function updatePermissions(elem){
+                    var permissions = [];
+                    var panelId =
+                    "#" +
+                    $(elem).closest(".panel.view-employees").closest(".panel").attr("id");
+                    var userId = $(panelId).attr("data-user-id");
+
+                    $(panelId + " [name=permissions]").each(function () {
+                        if ($(this).is(":checked")) {
+                            var permissionValue = $(this).val();
+                            permissions.push(permissionValue);
+                        }
+                    });
+
+                    $.ajax({
+                        type: "post",
+                        url: '{% url "update-user-permission" %}',
+                        traditional: true,
+                        data: {
+                            csrfmiddlewaretoken: getCookie("csrftoken"),
+                            permissions: permissions,
+                            employee: userId,
+                        },
+                        success: function (response) {
+                            $("#messages").html(
+                                $(`
+                                    <div class="oh-alert oh-alert--animated oh-alert--${response.type}">
+                                        ${response.message}.
+                                    </div>
+                                `)
+                            );
+                        },
+                        error: function (response) {
+                            $("#messages").html(
+                                $(`
+                                    <div class="oh-alert oh-alert--animated oh-alert--danger">
+                                        Sever error.
+                                    </div>
+                                `)
+                            );
+                        },
+                    });
+                }
+
+                $(".view-employees [name=permissions]").on("change",function (e) {
+                    e.preventDefault();
+                    clearTimeout(timeout);
+                    timeout = setTimeout(function() {
+                updateBadge($(this));
+                        updatePermissions(e.target);
+                    }, 100);
+                });
+
+            </script>
+        </div>
+        <div class="oh-modal" id="Permissions" role="dialog" aria-labelledby="Permissions" aria-hidden="true">
+            <div class="oh-modal__dialog" style="max-width: 880px">
+                <div class="oh-modal__dialog-header">
+                    <h2 class="oh-modal__dialog-title" id="editModal1ModalLabel">
+                        {% trans "Permissions" %}
+                    </h2>
+                    <button class="oh-modal__close" aria-label="Close">
+                        <ion-icon name="close-outline"></ion-icon>
+                    </button>
+                </div>
+                <div class="oh-modal__dialog-body">
+                    <form hx-post="{% url 'permission-table' %}" class="oh-profile-section perm-form" id="permissionForm">
+                    </form>
+                </div>
+            </div>
+        </div>
+        <script>
+            function updateBadge() {
+                var panels = $(".panel");
+                $.each(panels, function (indexInArray, valueOfElement) {
+                    var check = $(valueOfElement).find("[name=permissions]:checked").length;
+                    $(valueOfElement).prev().find(".oh-badge.permission-badge").html(check);
+                    $(valueOfElement).prev().find(".oh-badge.permission-badge").attr("title", check + " Permissions");
+                });
+
+                var permissionLine = $(".oh-sticky-table__tr");
+                $.each(permissionLine, function (index, value) {
+                    var check = $(value).find("[name=permissions]:checked").length;
+                    if (check === 4) {
+                        $(value).find(".row-permission").prop("checked", true);
+                    }
+                })
+
+                var permissionApps = $(".oh-sticky-table__tbody")
+                $.each(permissionApps, function (index, value) {
+                    var total_permission_count = $(value).find("[name=permissions]").length;
+                    var checked_permission_count = $(value).find("[name=permissions]:checked").length
+                    if (checked_permission_count === total_permission_count) {
+                        $(this).siblings(".oh-sticky-table__thead").find(".row-permission__select-all").prop("checked", true);
+                    } else {
+                        $(this).siblings(".oh-sticky-table__thead").find(".row-permission__select-all").prop("checked", false)
+                    }
+                })
+            }
+        </script>
+    </div>
+    <br>
+    <div class="oh-tabs__contents" style="display: none" id="tab_2_permission">
+        <div class="oh-inner-sidebar-content__header d-flex justify-content-between align-items-center">
+            <h2 class="oh-inner-sidebar-content__title">
+                {% trans "Groups" %}
+            </h2>
+            {% if perms.auth.change_group %}
+          <button class="oh-btn oh-btn--danger" hx-get="{% url "allocation-assign-group-user" %}" hx-vals='{"employee":"{{employee.id}}"}' hx-target="#groupAssignBody" data-toggle="oh-modal-toggle" data-target="#groupAssign" onclick="event.stopPropagation()" title="Assign user groups">
+            <ion-icon name="person-add-outline" class="text-light">Add</ion-icon> 
+          </button>
+        {% endif %}
+        </div>
+        {% if employee.employee_user_id.groups.all.first %}
+        {% for gp in employee.employee_user_id.groups.all %}
+        <div class="oh-user_permission-list_item exclude-accordion-style" onclick="event.stopPropagation()">
+            <div class="oh-user_permission-list_profile">
+                <div class="oh-navbar__user-photo oh-user_permission--profile">
+                    <img src="https://ui-avatars.com/api/?name={{gp}}&amp;background=random"
+                        class="oh-navbar__user-image" loading="lazy" />
+                </div>
+                <div class="oh-feedback-card__name-container ms-1">
+                    <span class="oh-card__title oh-card__title--sm fw-bold me-1">{{gp}}</span>
+                    <span class="oh-user_permission_list-text oh-text--light">{% trans "Total" %}
+                        {{gp.user_set.all|length}}
+                        {% trans "users in this group" %}</span>
+                </div>
+            </div>
+        </div>
+        {% endfor %}
+        {% else %}
+          <div class="oh-wrapper" align="center" style="margin-top: 7vh; margin-bottom:7vh;">
+            <div align="center">
+              <img src="{% static  'images/ui/employee_group.png' %}" class="oh-404__image" alt="Page not found. 404.">
+              <h5 class="oh-404__subtitle mt-4 ml-2">{% trans "This employee is not assigned to any groups." %}</h5>
+            </div>
+          </div>
+          {% endif %}
+    </div>
+    {% comment %} {% endif %} {% endcomment %}
+</div>
+<script>
+    var showSearch = true
+    $(document).ready(function () {
+        setTimeout(() => {
+            $("#tab_2_permission").show();
+        }, 150);
+    });
+    function selectAllPermissions(elem) {
+        $(elem).closest('.oh-sticky-table__thead').siblings('.oh-sticky-table__tbody').find('.row-permission').prop('checked', $(elem).is(':checked')).change()
+    }
+</script>
+{% endif %}
diff --git a/employee/templates/cbv/allocations/auth/perm.html b/employee/templates/cbv/allocations/auth/perm.html
new file mode 100644
index 000000000..4c6afc499
--- /dev/null
+++ b/employee/templates/cbv/allocations/auth/perm.html
@@ -0,0 +1,366 @@
+{% load i18n %}
+<div id="messages" class="oh-alert-container"></div>
+<div class="oh-inner-sidebar-content__header d-flex justify-content-between align-items-center">
+    <h2 class="oh-inner-sidebar-content__title">{% trans "Employee Permissions" %}</h2>
+    <div class=" d-flex">
+        <div class="oh-input-group oh-input__search-group" id="searchContainer" style="display: none;">
+            <ion-icon name="search-outline" class="oh-input-group__icon oh-input-group__icon--left md hydrated"
+                role="img" aria-label="search outline"></ion-icon>
+            <input hx-get="{% url 'permission-search' %}" hx-target="#permissionContainer"
+                hx-trigger="keyup changed delay:.2s" type="text" id="permissionSearch" placeholder="Search"
+                name="search" class="oh-input oh-input__icon" aria-label="Search Input">
+        </div>
+        <script>
+            if (showSearch) {
+                $("#searchContainer").show();
+            }
+        </script>
+        {% if show_assign %}
+            {% if perms.auth.add_permission %}
+                <button style="margin-left: 10px;" class="oh-btn oh-btn--secondary oh-btn--shadow" data-toggle="oh-modal-toggle"
+                    data-target="#Permissions" hx-get="{% url 'permission-table' %}" hx-target="#permissionForm">
+                    <ion-icon name="add-outline" class="me-1 md hydrated" role="img" aria-label="add outline"></ion-icon>
+                    {% trans "Assign" %}
+                </button>
+            {% endif %}
+        {% endif %}
+    </div>
+</div>
+<div id="permissionContainer">
+    {% load basefilters i18n %}
+{% for employee in employees %}
+  <div class="oh-user_permission-list_item perm-accordion exclude-accordion-style" onclick="$(this).next().toggle();$(this).toggleClass('perm-accordion-active');$(this).next().find('.oh-general__tab-target').removeClass('d-none');">
+    <div class="oh-user_permission-list_profile">
+      <div class="oh-navbar__user-photo oh-user_permission--profile">
+        <img src="{{ employee.get_avatar }}" class="oh-navbar__user-image" loading="lazy" />
+      </div>
+      <div class="oh-feedback-card__name-container ms-1">
+        <span class="oh-card__title oh-card__title--sm fw-bold me-1">{{ employee }}</span>
+        <span class="oh-user_permission_list-text oh-text--light">{{ employee.employee_work_info.job_role_id.job_role }} | {{ employee.employee_work_info.job_position_id }} | {{ employee.employee_work_info.department_id }}</span>
+      </div>
+    </div>
+    <button class="oh-accordion-meta__btn oh-user_permssion-dropdownbtn"><ion-icon class="ms-2 oh-accordion-meta__btn-icon md hydrated" name="caret-down-outline" role="img" aria-label="caret down outline"></ion-icon></button>
+  </div>
+  <div class="panel view-employees" id="panel{{ employee.id }}" data-user-id="{{ employee.id }}">
+    <div class="oh-general__tab-target oh-profile-section">
+      <script>
+        $(document).ready(function () {
+          checkSelected(`{{employee.employee_user_id.user_permissions.all|user_perms|safe}}`, '#panel{{employee.id}}', true)
+        })
+      </script>
+      {% if perms.auth.add_permission or perms.auth.change_permission or perms.auth.delete_permission %}
+      {% load i18n %} 
+      {% for perm in permissions %}
+      <span type="button" class="perm-accordion w-100 p-2 oh-user_permission-list_item app-permissions" onclick="$(this).next().toggle();$(this).toggleClass('perm-accordion-active');">
+          <div class="d-flex flex-row bd-highlight">
+              <div class="p-2 bd-highlight">{{perm.app}}</div>
+              <div class="p-2 bd-highlight">
+                  <span class="oh-tabs__input-badge-container">
+                      <span
+                      class="oh-badge permission-badge oh-badge--secondary oh-badge--small oh-badge--round ms-2 mr-2"
+                      align="center"
+                      >
+                      0
+                      </span>
+                  </span>
+              </div>
+          </div>
+      </span>
+      <div class="panel">
+          <div class="oh-sticky-table">
+              <div class="oh-sticky-table__table oh-table--sortable">
+                  <!-- Table Head -->
+                  <div class="oh-sticky-table__thead">
+                      <div class="oh-sticky-table__tr">
+                          <div class="oh-sticky-table__th" style="width: 50px;" align="center">
+                              <input type="checkbox" class="row-permission__select-all" id="id{{perm.app}}Permissions" onchange="selectAllPermissions(this)">
+                          </div>
+                          <div class="oh-sticky-table__th">{% trans "Actions" %}</div>
+                          <div class="oh-sticky-table__th" style="width: 80px;">
+                              <div class="d-flex justify-content-center" title="{% trans "Can create" %}">
+                                  <ion-icon name="add-circle-outline"></ion-icon>
+                              </div>
+                          </div>
+                          <div class="oh-sticky-table__th" style="width: 80px;">
+                              <div class="d-flex justify-content-center" title="{% trans "Can view" %}">
+                                  <ion-icon name="eye-outline"></ion-icon>
+                              </div>
+                          </div>
+                          <div class="oh-sticky-table__th" style="width: 80px;">
+                              <div class="d-flex justify-content-center" title="{% trans "Can edit" %}">
+                                  <ion-icon name="create-outline"></ion-icon>
+                              </div>
+                          </div>
+                          <div class="oh-sticky-table__th" style="width: 80px;">
+                              <div class="d-flex justify-content-center" title="{% trans "Can delete" %}">
+                                  <ion-icon name="trash-outline"></ion-icon>
+                              </div>
+                          </div>
+                      </div>
+                  </div>
+                  <!-- Table Body -->
+                  <div class="oh-sticky-table__tbody">
+                      {% for model in perm.app_models %}
+                          {% if model.model_name not in no_permission_models %}
+                              <div class="oh-sticky-table__tr" draggable="true">
+                                  <!-- Checkbox -->
+                                  <div class="oh-sticky-table__sd" align="center">
+                                      <input type="checkbox" id="id_{{perm.app}}{{model.model_name}}" class="row-permission" onchange="
+                                          $(this).closest('.oh-sticky-table__tr').find('[type=checkbox][name=permissions]').prop('checked',$(this).is(':checked')).change();
+                                      ">
+                                  </div>
+                                  <!-- Model Info -->
+                                  <div class="oh-sticky-table__td">
+                                      <div class="oh-profile oh-profile--md">
+                                          <div class="oh-profile__avatar mr-1">
+                                              <img
+                                                  src="https://ui-avatars.com/api/?name={{model.verbose_name}}&background=random"
+                                                  class="oh-profile__image oh-table-img"
+                                              />
+                                          </div>
+                                          <span class="oh-profile__name oh-text--dark">
+                                              {{model.verbose_name}}
+                                          </span>
+                                      </div>
+                                  </div>
+                                  <!-- Can Create -->
+                                  <div class="oh-sticky-table__td" style="width: 80px;">
+                                      <div class="d-flex justify-content-center">
+                                          <div class="oh-switch">
+                                              <input
+                                                  type="checkbox"
+                                                  name="permissions"
+                                                  value="add_{{model.model_name}}"
+                                                  class="oh-switch__checkbox"
+                                                  onchange="
+                                                      if (!$(this).is(':checked')) {
+                                                          $(this).closest('.oh-sticky-table__tr').find('.row-permission').prop('checked',false)
+                                                      }
+                                                  "
+                                                  data-group-id="{{group.id}}"
+                                                  data-group-name="{{group.name}}"
+                                              />
+                                          </div>
+                                      </div>
+                                  </div>
+                                  <!-- Can View -->
+                                  <div class="oh-sticky-table__td" style="width: 80px;">
+                                      <div class="d-flex justify-content-center">
+                                          <div class="oh-switch">
+                                              <input
+                                                  type="checkbox"
+                                                  name="permissions"
+                                                  value="view_{{model.model_name}}"
+                                                  class="oh-switch__checkbox view-permission"
+                                                  onchange="
+                                                      if (!$(this).is(':checked')) {
+                                                          $(this).closest('.oh-sticky-table__tr').find('.row-permission').prop('checked',false)
+                                                      }
+                                                  "
+                                                  data-group-id="{{group.id}}"
+                                                  data-group-name="{{group.name}}"
+                                              />
+                                          </div>
+                                      </div>
+                                  </div>
+                                  <!-- Can Edit -->
+                                  <div class="oh-sticky-table__td" style="width: 80px;">
+                                      <div class="d-flex justify-content-center">
+                                          <div class="oh-switch">
+                                              <input
+                                                  type="checkbox"
+                                                  name="permissions"
+                                                  value="change_{{model.model_name}}"
+                                                  class="oh-switch__checkbox"
+                                                  onchange="
+                                                      if (!$(this).is(':checked')) {
+                                                          $(this).closest('.oh-sticky-table__tr').find('.row-permission').prop('checked',false)
+                                                      }
+                                                  "    
+                                                  data-group-id="{{group.id}}"
+                                                  data-group-name="{{group.name}}"
+                                              />
+                                          </div>
+                                      </div>
+                                  </div>
+                                  <!-- Can Delete -->
+                                  <div class="oh-sticky-table__td" style="width: 80px;">
+                                      <div class="d-flex justify-content-center">
+                                          <div class="oh-switch">
+                                              <input
+                                                  type="checkbox"
+                                                  name="permissions"
+                                                  value="delete_{{model.model_name}}"
+                                                  class="oh-switch__checkbox"
+                                                  onchange="
+                                                      if (!$(this).is(':checked')) {
+                                                          $(this).closest('.oh-sticky-table__tr').find('.row-permission').prop('checked',false)
+                                                      }
+                                                  "
+                                                  data-group-id="{{group.id}}"
+                                                  data-group-name="{{group.name}}"
+                                              />
+                                          </div>
+                                      </div>
+                                  </div>
+                              </div>
+                          {% endif %}
+                      {% endfor %}
+                  </div>
+              </div>
+          </div>
+      </div>
+      {% endfor %}
+      
+      {% endif %}
+    </div>
+  </div>
+{% endfor %}
+{% if employees.has_previous or employees.has_next %}
+<div class="oh-wrapper w-100">
+  <div class="oh-pagination">
+    <span class="oh-pagination__page" data-toggle="modal" data-target="#addEmployeeModal">{% trans 'Page' %} {{ employees.number }} {% trans 'of' %} {{ employees.paginator.num_pages }}.</span>
+
+    <nav class="oh-pagination__nav">
+      <div class="oh-pagination__input-container me-3">
+        <span class="oh-pagination__label me-1">{% trans 'Page' %}</span>
+
+        <input type="number" name="page" class="oh-pagination__input" value="{{ employees.number }}" hx-get="{% url 'permission-search' %}?{{ pd }}" hx-target="#permissionContainer" min="1" />
+        <span class="oh-pagination__label">{% trans 'of' %} {{ employees.paginator.num_pages }}</span>
+      </div>
+
+      <ul class="oh-pagination__items">
+        {% if employees.has_previous %}
+          <li class="oh-pagination__item oh-pagination__item--wide">
+            <a hx-target="#permissionContainer" hx-get="{% url 'permission-search' %}?{{ pd }}&page=1" class="oh-pagination__link">{% trans 'First' %}</a>
+          </li>
+          <li class="oh-pagination__item oh-pagination__item--wide">
+            <a hx-target="#permissionContainer" hx-get="{% url 'permission-search' %}?{{ pd }}&page={{ employees.previous_page_number }}" class="oh-pagination__link">{% trans 'Previous' %}</a>
+          </li>
+        {% endif %}
+        {% if employees.has_next %}
+          <li class="oh-pagination__item oh-pagination__item--wide">
+            <a hx-target="#permissionContainer" hx-get="{% url 'permission-search' %}?{{ pd }}&page={{ employees.next_page_number }}" class="oh-pagination__link">{% trans 'Next' %}</a>
+          </li>
+          <li class="oh-pagination__item oh-pagination__item--wide">
+            <a hx-target="#permissionContainer" hx-get="{% url 'permission-search' %}?{{ pd }}&page={{ employees.paginator.num_pages }}" class="oh-pagination__link">{% trans 'Last' %}</a>
+          </li>
+        {% endif %}
+      </ul>
+    </nav>
+  </div>
+</div>
+{% endif %}
+
+<script>
+  function selectAllPermissions(elem) {
+      $(elem).closest('.oh-sticky-table__thead').siblings('.oh-sticky-table__tbody').find('.row-permission').prop('checked',$(elem).is(':checked')).change()
+  }
+	$(document).ready(function () {
+		updateBadge();
+		$("[type=checkbox]").change(function (e) {
+			e.preventDefault();
+		});
+	});
+	var timeout
+
+	function updatePermissions(elem){
+		var permissions = [];
+		var panelId =
+		"#" +
+		$(elem).closest(".panel.view-employees").closest(".panel").attr("id");
+		var userId = $(panelId).attr("data-user-id");
+
+		$(panelId + " [name=permissions]").each(function () {
+			if ($(this).is(":checked")) {
+				var permissionValue = $(this).val();
+				permissions.push(permissionValue);
+			}
+		});
+
+		$.ajax({
+			type: "post",
+			url: '{% url "update-user-permission" %}',
+			traditional: true,
+			data: {
+				csrfmiddlewaretoken: getCookie("csrftoken"),
+				permissions: permissions,
+				employee: userId,
+			},
+			success: function (response) {
+				$("#messages").html(
+					$(`
+						<div class="oh-alert oh-alert--animated oh-alert--${response.type}">
+							${response.message}.
+						</div>
+					`)
+				);
+			},
+			error: function (response) {
+				$("#messages").html(
+					$(`
+						<div class="oh-alert oh-alert--animated oh-alert--danger">
+							Sever error.
+						</div>
+					`)
+				);
+			},
+		});
+	}
+
+	$(".view-employees [name=permissions]").on("change",function (e) {
+		e.preventDefault();
+		clearTimeout(timeout);
+		timeout = setTimeout(function() {
+      updateBadge($(this));
+			updatePermissions(e.target);
+		}, 100);
+	});
+
+</script>
+</div>
+<div class="oh-modal" id="Permissions" role="dialog" aria-labelledby="Permissions" aria-hidden="true">
+    <div class="oh-modal__dialog" style="max-width: 880px">
+        <div class="oh-modal__dialog-header">
+            <h2 class="oh-modal__dialog-title" id="editModal1ModalLabel">
+                {% trans "Permissions" %}
+            </h2>
+            <button class="oh-modal__close" aria-label="Close">
+                <ion-icon name="close-outline"></ion-icon>
+            </button>
+        </div>
+        <div class="oh-modal__dialog-body">
+            <form hx-post="{% url 'permission-table' %}" class="oh-profile-section perm-form" id="permissionForm">
+            </form>
+        </div>
+    </div>
+</div>
+<script>
+    function updateBadge() {
+        var panels = $(".panel");
+        $.each(panels, function (indexInArray, valueOfElement) {
+            var check = $(valueOfElement).find("[name=permissions]:checked").length;
+            $(valueOfElement).prev().find(".oh-badge.permission-badge").html(check);
+            $(valueOfElement).prev().find(".oh-badge.permission-badge").attr("title", check + " Permissions");
+        });
+
+        var permissionLine = $(".oh-sticky-table__tr");
+        $.each(permissionLine, function (index, value) {
+            var check = $(value).find("[name=permissions]:checked").length;
+            if (check === 4) {
+                $(value).find(".row-permission").prop("checked", true);
+            }
+        })
+
+        var permissionApps = $(".oh-sticky-table__tbody")
+        $.each(permissionApps, function (index, value) {
+            var total_permission_count = $(value).find("[name=permissions]").length;
+            var checked_permission_count = $(value).find("[name=permissions]:checked").length
+            if (checked_permission_count === total_permission_count) {
+                $(this).siblings(".oh-sticky-table__thead").find(".row-permission__select-all").prop("checked", true);
+            } else {
+                $(this).siblings(".oh-sticky-table__thead").find(".row-permission__select-all").prop("checked", false)
+            }
+        })
+    }
+</script>
\ No newline at end of file
diff --git a/employee/templates/cbv/allocations/employee/form_structure.html b/employee/templates/cbv/allocations/employee/form_structure.html
new file mode 100644
index 000000000..e76e75ca0
--- /dev/null
+++ b/employee/templates/cbv/allocations/employee/form_structure.html
@@ -0,0 +1,57 @@
+<form hx-post="{{request.path}}?{{request.GET.urlencode}}" hx-swap="outerHTML" hx-encoding="multipart/form-data">
+  <input hidden type="submit" id="allocationEmployeeFormsSubmit">
+  <input hidden type="text" name="instance_id" value="{{request.GET.instance_id}}">
+
+{% load widget_tweaks %} {% load i18n %}
+{% load generic_template_filters %}
+<script>
+  $("#reloadMessagesButton").click()
+</script>
+<style>
+  .oh-label{
+    font-weight: bold;
+  }
+</style>
+
+<div id="{{form.container_id}}">
+    <div class="oh-profile-section__card row">
+      <div class="row" style="padding-right: 0;">
+        <div class="col-12" style="padding-right: 0;">{{ form.non_field_errors }}</div>
+        {% for field in form.visible_fields %}
+        <div class="col-12 col-md-{{field|col}}" id="id_{{ field.name }}_parent_div" style="padding-right: 0;">
+          <div class="oh-label__info" for="id_{{ field.name }}">
+            <label class="oh-label {% if field.field.required %} required-star{% endif %}" for="id_{{ field.name }}"
+              >{% trans field.label %}</label
+            >
+            {% if field.help_text != '' %}
+            <span
+              class="oh-info mr-2"
+              title="{{ field.help_text|safe }}"
+            ></span>
+            {% endif %}
+          </div>
+
+          {% if field.field.widget.input_type == 'checkbox' %}
+          <div class="oh-switch" style="width: 30px">
+            {{ field|add_class:'oh-switch__checkbox' }}
+          </div>
+          {% else %} 
+          <div id="dynamic_field_{{field.name}}">
+            {{ field|add_class:'form-control' }}
+            {{ field.errors }}
+          </div>
+          {% endif %}
+        </div>
+        {% endfor %}
+      </div>
+
+      {% for field in form.hidden_fields %} {{ field }} {% endfor %}
+    </div>
+  </div>
+  <script>
+    {% include 'country.js' %}
+    populateCountries("country", "state");
+    $('.oh-general__tab-target.oh-profile-section').not('.d-none').find('form').find('select[name=country]').val('{{form.instance.country}}').change()
+    $('.oh-general__tab-target.oh-profile-section').not('.d-none').find('form').find('select[name=state]').val('{{form.instance.state}}').change()
+  </script>
+</form>
diff --git a/employee/templates/cbv/allocations/employee/forms.html b/employee/templates/cbv/allocations/employee/forms.html
new file mode 100644
index 000000000..8210163c1
--- /dev/null
+++ b/employee/templates/cbv/allocations/employee/forms.html
@@ -0,0 +1,49 @@
+<div class="oh-inner-sidebar-content">
+  <div class="oh-inner-sidebar-content__header">
+    <ul
+      class="oh-general__tabs oh-general__custom-tabs oh-general__tabs--border oh-general__tabs--profile oh-general__tabs--no-grow oh-profile-section__tab mt-2 justify-content-end">
+      <li class="oh-general__tab">
+        <span hx-get="{% url 'personal-form' %}?{{request.GET.urlencode}}" hx-target="#personalInfo" data-url="{% url 'personal-form' %}" class="oh-general__tab-link"
+          onclick="$(this).closest('.oh-general__tabs').find('.oh-general__tab-link--active').removeClass('oh-general__tab-link--active');$(this).addClass('oh-general__tab-link--active');
+          target = $(this).attr('data-target');
+          $(this).closest('.oh-inner-sidebar-content').find('.oh-general__tab-target').addClass('d-none');
+          $(target).removeClass('d-none');
+          "
+          data-action="general-tab" data-target="#personalInfo">Personal Info</span>
+      </li>
+      <li class="oh-general__tab">
+        <span hx-get="{% url 'work-form' %}?{{request.GET.urlencode}}" hx-target="#workInfo" data-url="{% url 'work-form' %}" class="oh-general__tab-link"
+          onclick="$(this).closest('.oh-general__tabs').find('.oh-general__tab-link--active').removeClass('oh-general__tab-link--active');$(this).addClass('oh-general__tab-link--active');
+          target = $(this).attr('data-target');
+          $(this).closest('.oh-inner-sidebar-content').find('.oh-general__tab-target').addClass('d-none');
+          $(target).removeClass('d-none');
+          "
+          data-action="general-tab" data-target="#workInfo">Work Info</span>
+      </li>
+      <li class="oh-general__tab">
+        <span hx-get="{% url 'bank-form' %}?{{request.GET.urlencode}}" hx-target="#bankInfo" data-url="{% url 'bank-form' %}" class="oh-general__tab-link"
+          onclick="$(this).closest('.oh-general__tabs').find('.oh-general__tab-link--active').removeClass('oh-general__tab-link--active');$(this).addClass('oh-general__tab-link--active');
+          target = $(this).attr('data-target');
+          $(this).closest('.oh-inner-sidebar-content').find('.oh-general__tab-target').addClass('d-none');
+          $(target).removeClass('d-none');
+          "
+          data-action="general-tab" data-target="#bankInfo">Bank Info</span>
+      </li>
+    </ul>
+  </div>
+  <div class="oh-inner-sidebar-content__body">
+    <div class="oh-general__tab-target oh-profile-section mb-4 d-none" id="personalInfo"></div>
+    <div class="oh-general__tab-target oh-profile-section mb-4 d-none" id="workInfo"></div>
+    <div class="oh-general__tab-target oh-profile-section mb-4 d-none" id="bankInfo"></div>
+    <div class="oh-modal__dialog-footer p-0">
+      <button type="submit" class="oh-btn oh-btn--secondary oh-btn--shadow" onclick="$('.oh-general__tab-target.oh-profile-section').not('.d-none').find('form').find('input[type=submit]').click()">Save</button>
+    </div>
+  </div>
+</div>
+<script>
+  $(document).ready(function () {
+    setTimeout(() => {
+      $(".oh-inner-sidebar-content__header:visible .oh-general__tab:first span").click();
+    }, 100);
+  });
+</script>
\ No newline at end of file
diff --git a/employee/templates/cbv/allocations/leave/toggle_type.html b/employee/templates/cbv/allocations/leave/toggle_type.html
new file mode 100644
index 000000000..2daf3336f
--- /dev/null
+++ b/employee/templates/cbv/allocations/leave/toggle_type.html
@@ -0,0 +1,13 @@
+{% if not available_leave %}
+  <a style="font-size: 15px;color: darkseagreen;" title="Assign Leave Type" onclick="
+  $(this).closest('tr').find('td:first [type=checkbox]').prop('checked',!$(this).find('td:first [type=checkbox]').is(':checked')).change();
+  $('#addTypesButton').click();
+  " class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100" ><ion-icon name="checkmark-done-circle-outline"></ion-icon></a>
+{% else %}
+  <a style="font-size: 15px;"
+    hx-get="{% url "generic-delete" %}?model=leave.AvailableLeave&pk={{available_leave.pk}}"
+    hx-target="#deleteConfirmationBody"
+    data-toggle="oh-modal-toggle"
+    data-target="#deleteConfirmation"
+    title="Delete Assigned Leave Type" class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100" ><ion-icon name="close-circle-outline" ></ion-icon></a>
+{% endif %}
diff --git a/employee/templates/cbv/allocations/leave/type_list.html b/employee/templates/cbv/allocations/leave/type_list.html
new file mode 100644
index 000000000..f31d17501
--- /dev/null
+++ b/employee/templates/cbv/allocations/leave/type_list.html
@@ -0,0 +1,30 @@
+{% load i18n %}
+<div id="{{ view_id }}">
+  <div class="oh-layout_horizontal">
+    {% for type in assigned_types %}
+      <div class="oh-kanban-card">
+        <div class="d-flex flex-column gap-2">
+          <div class="oh-kanban-card__avatar">
+            <div class="oh-kanban-card__profile-container">
+              <img src="{{type.leave_type_id.get_avatar}}" class="oh-kanban-card__profile-image"/>
+            </div>
+          </div>
+          <div class="oh-kanban-card__details">
+            <span class="oh-kanban-card__title">{{type.leave_type_id.name}}</span>
+            <span class="oh-kanban-card__subtitle">{% trans "Available Days" %}: {{type.leave_type_id.employee_available_leave.first.available_days}}</span>
+            <br>
+            <span class="oh-kanban-card__subtitle">{% trans "Total Days" %}: {{type.leave_type_id.employee_available_leave.first.total_leave_days}}</span>
+          </div>
+        </div>
+      </div>
+    {% endfor %}
+  </div>
+  {% if not request.GET.card_only %}
+  {% include 'generic/horilla_list_table.html' %}
+  {% elif not queryset.exists %}
+    <div class="oh-checkpoint-badge text-success quick-bulk-action"
+     onclick="$(`[hx-get='{% url "allocation-leave-type" %}?instance_id={{request.GET.instance_id}}']`).click();" style="cursor: pointer;">
+      <span class="label">+ Allocate</span>
+    </div>
+  {% endif %}
+</div>
diff --git a/employee/templates/cbv/allocations/leave/types.html b/employee/templates/cbv/allocations/leave/types.html
new file mode 100644
index 000000000..5e1c7aabb
--- /dev/null
+++ b/employee/templates/cbv/allocations/leave/types.html
@@ -0,0 +1,30 @@
+<div class="oh-inner-sidebar-content p-0">
+  <div class="oh-inner-sidebar-content__header">
+    <div class="oh-main__titlebar oh-main__titlebar--right justify-content-between align-items-center">
+      <div class="oh-input-group oh-input__search-group" style="margin-left: -15px;" :class="searchShow ? 'oh-input__search-group--show' : ''">
+        <ion-icon name="search-outline" class="oh-input-group__icon oh-input-group__icon--left md hydrated" role="img" aria-label="search outline"></ion-icon>
+        <input type="text" hx-get="{% url 'allocation-leave-type-list' %}?instance_id={{ request.GET.instance_id }}" hx-trigger="keyup changed delay:.100s" hx-target="#typesContainer" autocomplete="false" name="search" class="oh-input oh-input__icon" aria-label="Search Input" placeholder="Search" />
+      </div>
+    </div>
+  </div>
+  <div class="oh-inner-sidebar-content__body">
+    <div class="oh-general__tab-target mb-4" id="types">
+      <div id="selectedInstances" data-ids="[]" hidden></div>
+      <form hx-post="{% url 'allocation-leave-type-list' %}" hx-target="#responseContainer" id="idsForm">
+        <input type="text" name="ids" value="[]" hidden />
+        <input type="text" name="instance_id" value="{{ request.GET.instance_id }}" hidden />
+        <input type="submit" hidden />
+      </form>
+      <div class="oh-profile-section__card" id="typesContainer" hx-get="{% url 'allocation-leave-type-list' %}?instance_id={{ request.GET.instance_id }}" hx-trigger="load"></div>
+    </div>
+    <div class="oh-modal__dialog-footer p-0">
+      <button type="submit" onclick="
+       ids = $('#selectedInstances').attr('data-ids')
+       $('.oh-inner-sidebar-content [name=ids]').val(ids);
+       $('#idsForm [type=submit]').click();
+      " class="oh-btn oh-btn--secondary oh-btn--shadow" id="addTypesButton">Add</button>
+    </div>
+  </div>
+</div>
+
+<div id="responseContainer" hidden></div>
diff --git a/employee/templates/cbv/allocations/payroll/allowance/actions.html b/employee/templates/cbv/allocations/payroll/allowance/actions.html
new file mode 100644
index 000000000..26737d47e
--- /dev/null
+++ b/employee/templates/cbv/allocations/payroll/allowance/actions.html
@@ -0,0 +1,8 @@
+{% if not instance.include_active_employees or employee in instance.exclude_employees.all %}
+  <a style="font-size: 15px;color: darkseagreen;" title="Allocate Allowance" onclick="
+  $(this).closest('tr').find('td:first [type=checkbox]').prop('checked',!$(this).find('td:first [type=checkbox]').is(':checked')).change();
+  $('#addAllowanceButton').click();
+  " class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100"><ion-icon name="checkmark-done-circle-outline"></ion-icon></a>
+{% else %}
+  <a style="font-size: 15px;" title="Remove from allowance" hx-post="{% url "allocation-allowance-list"%}?exclude=True" hx-vals='{"instance_id":"{{request.GET.instance_id}}","allowance_id":"{{instance.pk}}"}'  class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100"><ion-icon name="close-circle-outline"></ion-icon></a>
+{% endif %}
diff --git a/employee/templates/cbv/allocations/payroll/allowance/allowance_list.html b/employee/templates/cbv/allocations/payroll/allowance/allowance_list.html
new file mode 100644
index 000000000..e337ff1d8
--- /dev/null
+++ b/employee/templates/cbv/allocations/payroll/allowance/allowance_list.html
@@ -0,0 +1,28 @@
+{% load i18n %}
+<div id="{{ view_id }}">
+  <div class="oh-layout_horizontal">
+    {% for allowance in assigned_allowances %}
+      <div class="oh-kanban-card">
+        <div class="d-flex flex-column gap-2">
+          <div class="oh-kanban-card__avatar">
+            <div class="oh-kanban-card__profile-container">
+              <img src="{{allowance.get_avatar}}" class="oh-kanban-card__profile-image"/>
+            </div>
+          </div>
+          <div class="oh-kanban-card__details">
+            <span class="oh-kanban-card__title">{{allowance}}</span>
+            <span class="oh-kanban-card__subtitle">{% trans "Amount" %}: {% if allowance.is_fixed %}{{allowance.amount}}{{currency}}{% else %}{{allowance.rate|default:"0"}}% of {{allowance.get_based_on_display}}{% endif %}</span>
+            <br>
+          </div>
+        </div>
+      </div>
+    {% endfor %}
+  </div>
+  {% if not request.GET.card_only %}
+  {% include 'generic/horilla_list_table.html' %}
+  {% elif not queryset.exists %}
+    <div class="oh-checkpoint-badge text-success quick-bulk-action" onclick="$(`[hx-get='{% url "allocation-allowance" %}?instance_id={{request.GET.instance_id}}']`).click();" style="cursor: pointer;">
+      <span class="label">+ Allocate</span>
+    </div>
+  {% endif %}
+</div>
diff --git a/employee/templates/cbv/allocations/payroll/allowance/allowance_view.html b/employee/templates/cbv/allocations/payroll/allowance/allowance_view.html
new file mode 100644
index 000000000..68b3e3cea
--- /dev/null
+++ b/employee/templates/cbv/allocations/payroll/allowance/allowance_view.html
@@ -0,0 +1,31 @@
+<div class="oh-inner-sidebar-content p-0">
+    <div class="oh-inner-sidebar-content__header">
+      <div class="oh-main__titlebar oh-main__titlebar--right justify-content-between align-items-center">
+        <div class="oh-input-group oh-input__search-group" style="margin-left: -15px;" :class="searchShow ? 'oh-input__search-group--show' : ''">
+          <ion-icon name="search-outline" class="oh-input-group__icon oh-input-group__icon--left md hydrated" role="img" aria-label="search outline"></ion-icon>
+          <input type="text" hx-get="{% url 'allocation-allowance-list' %}?instance_id={{ request.GET.instance_id }}" hx-trigger="keyup changed delay:.100s" hx-target="#typesContainer" autocomplete="false" name="search" class="oh-input oh-input__icon" aria-label="Search Input" placeholder="Search" />
+        </div>
+      </div>
+    </div>
+    <div class="oh-inner-sidebar-content__body">
+      <div class="oh-general__tab-target mb-4" id="types">
+        <div id="selectedInstances" data-ids="[]" hidden></div>
+        <form hx-post="{% url 'allocation-allowance-list' %}" hx-target="#responseContainer" id="idsForm">
+          <input type="text" name="ids" value="[]" hidden />
+          <input type="text" name="instance_id" value="{{ request.GET.instance_id }}" hidden />
+          <input type="submit" hidden />
+        </form>
+        <div class="oh-profile-section__card" id="typesContainer" hx-get="{% url 'allocation-allowance-list' %}?instance_id={{ request.GET.instance_id }}" hx-trigger="load"></div>
+      </div>
+      <div class="oh-modal__dialog-footer p-0">
+        <button type="submit" onclick="
+         ids = $('#selectedInstances').attr('data-ids')
+         $('.oh-inner-sidebar-content [name=ids]').val(ids);
+         $('#idsForm [type=submit]').click();
+        " class="oh-btn oh-btn--secondary oh-btn--shadow" id="addAllowanceButton">Add</button>
+      </div>
+    </div>
+  </div>
+  
+  <div id="responseContainer" hidden></div>
+  
\ No newline at end of file
diff --git a/employee/templates/cbv/allocations/payroll/deduction/actions.html b/employee/templates/cbv/allocations/payroll/deduction/actions.html
new file mode 100644
index 000000000..518f51da6
--- /dev/null
+++ b/employee/templates/cbv/allocations/payroll/deduction/actions.html
@@ -0,0 +1,8 @@
+{% if not instance.include_active_employees or employee in instance.exclude_employees.all %}
+  <a style="font-size: 15px;color: darkseagreen;" title="Allocate Deduction" onclick="
+  $(this).closest('tr').find('td:first [type=checkbox]').prop('checked',!$(this).find('td:first [type=checkbox]').is(':checked')).change();
+  $('#addDeductionButton').click();
+  " class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100"><ion-icon name="checkmark-done-circle-outline"></ion-icon></a>
+{% else %}
+  <a style="font-size: 15px;" title="Exclude from deduction" hx-post="{% url "allocation-deduction-list"%}?exclude=True" hx-vals='{"instance_id":"{{request.GET.instance_id}}","deduction_id":"{{instance.pk}}"}'  class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100"><ion-icon name="close-circle-outline"></ion-icon></a>
+{% endif %}
diff --git a/employee/templates/cbv/allocations/payroll/deduction/deduction_list.html b/employee/templates/cbv/allocations/payroll/deduction/deduction_list.html
new file mode 100644
index 000000000..63d926ba3
--- /dev/null
+++ b/employee/templates/cbv/allocations/payroll/deduction/deduction_list.html
@@ -0,0 +1,28 @@
+{% load i18n %}
+<div id="{{ view_id }}">
+  <div class="oh-layout_horizontal">
+    {% for deduction in assigned_deductions %}
+      <div class="oh-kanban-card">
+        <div class="d-flex flex-column gap-2">
+          <div class="oh-kanban-card__avatar">
+            <div class="oh-kanban-card__profile-container">
+              <img src="{{deduction.get_avatar}}" class="oh-kanban-card__profile-image"/>
+            </div>
+          </div>
+          <div class="oh-kanban-card__details">
+            <span class="oh-kanban-card__title">{{deduction}}</span>
+            <span class="oh-kanban-card__subtitle">{% trans "Amount" %}: {% if deduction.is_fixed %}{{deduction.amount}}{{currency}}{% else %}{{deduction.rate|default:"0"}}% of {{deduction.get_based_on_display}}{% endif %}</span>
+            <br>
+          </div>
+        </div>
+      </div>
+    {% endfor %}
+  </div>
+  {% if not request.GET.card_only %}
+  {% include 'generic/horilla_list_table.html' %}
+  {% elif not queryset.exists %}
+    <div class="oh-checkpoint-badge text-success quick-bulk-action" onclick="$(`[hx-get='{% url "allocation-deduction" %}?instance_id={{request.GET.instance_id}}']`).click();"style="cursor: pointer;">
+      <span class="label">+ Allocate</span>
+    </div>
+  {% endif %}
+</div>
diff --git a/employee/templates/cbv/allocations/payroll/deduction/deduction_view.html b/employee/templates/cbv/allocations/payroll/deduction/deduction_view.html
new file mode 100644
index 000000000..a57e3a15c
--- /dev/null
+++ b/employee/templates/cbv/allocations/payroll/deduction/deduction_view.html
@@ -0,0 +1,31 @@
+<div class="oh-inner-sidebar-content p-0">
+    <div class="oh-inner-sidebar-content__header">
+      <div class="oh-main__titlebar oh-main__titlebar--right justify-content-between align-items-center">
+        <div class="oh-input-group oh-input__search-group" style="margin-left: -15px;" :class="searchShow ? 'oh-input__search-group--show' : ''">
+          <ion-icon name="search-outline" class="oh-input-group__icon oh-input-group__icon--left md hydrated" role="img" aria-label="search outline"></ion-icon>
+          <input type="text" hx-get="{% url 'allocation-deduction-list' %}?instance_id={{ request.GET.instance_id }}" hx-trigger="keyup changed delay:.100s" hx-target="#typesContainer" autocomplete="false" name="search" class="oh-input oh-input__icon" aria-label="Search Input" placeholder="Search" />
+        </div>
+      </div>
+    </div>
+    <div class="oh-inner-sidebar-content__body">
+      <div class="oh-general__tab-target mb-4" id="types">
+        <div id="selectedInstances" data-ids="[]" hidden></div>
+        <form hx-post="{% url 'allocation-deduction-list' %}" hx-target="#responseContainer" id="idsForm">
+          <input type="text" name="ids" value="[]" hidden />
+          <input type="text" name="instance_id" value="{{ request.GET.instance_id }}" hidden />
+          <input type="submit" hidden />
+        </form>
+        <div class="oh-profile-section__card" id="typesContainer" hx-get="{% url 'allocation-deduction-list' %}?instance_id={{ request.GET.instance_id }}" hx-trigger="load"></div>
+      </div>
+      <div class="oh-modal__dialog-footer p-0">
+        <button type="submit" onclick="
+         ids = $('#selectedInstances').attr('data-ids')
+         $('.oh-inner-sidebar-content [name=ids]').val(ids);
+         $('#idsForm [type=submit]').click();
+        " class="oh-btn oh-btn--secondary oh-btn--shadow" id="addDeductionButton">Add</button>
+      </div>
+    </div>
+  </div>
+  
+  <div id="responseContainer" hidden></div>
+  
\ No newline at end of file
diff --git a/employee/templates/cbv/allocations/summary.html b/employee/templates/cbv/allocations/summary.html
new file mode 100644
index 000000000..083c3ae2f
--- /dev/null
+++ b/employee/templates/cbv/allocations/summary.html
@@ -0,0 +1,140 @@
+<div class="oh-inner-sidebar-content p-0">
+  <div class="row justify-content-center">
+    <div class="col-12 col-sm-12 col-md-12 col-lg-12">
+      <div class="d-flex align-items-center flex-column oh-profile_info-card">
+        <div class="oh-profile oh-profile--lg">
+          <div class="oh-profile__avatar">
+            <img src="{{ instance.get_avatar }}" class="oh-profile__image oh-table-image" />
+          </div>
+          <span class="oh-profile__active-badge oh-profile__active-badge--secondary"
+          {% if instance.employee_user_id.is_active %}
+          title="Active"
+          style="background-color: yellowgreen;"
+          {% else %}
+          title="In-active"
+          {% endif %}
+           ></span>
+        </div>
+        <div class="oh-profile__info-container">
+          <h1 class="oh-profile__info-name">{{instance.get_full_name}}</h1>
+          <p class="oh-profile__info-designation">{{instance.get_job_position}}</p>
+        </div>
+      </div>
+    </div>
+    <p class="oh-profile__info-designation mt-2">Dashboard Access :
+      <form hx-post="{% url "toggle-user-dashboard-access" %}?instance_id={{instance.pk}}"
+      hx-target="#responseContainer"
+      >
+        <div class="oh-switch">
+          <input type="checkbox" name="permissions" class="oh-switch__checkbox mt-2" onchange="
+          $(this).closest('form').find('[type=submit]').click()
+          "
+          {% if instance.employee_user_id.is_active %}
+          checked
+          {% endif %}
+           >
+          </div>
+          <input type="submit" hidden>
+        </form>
+        <div id="responseContainer"></div>
+    </p>
+  </div>
+  <div class="row">
+    <div class="col-sm-12 col-md-12 col lg-12">
+      <div class="oh-general__tab-target oh-profile__info-tab mb-4" id="personal">
+        <div class="row">
+          <div class="col-sm-12 col-md-12 col-lg-12">
+            <div class="oh-card mt-3">
+              <div class="oh-card__header">
+                <span class="oh-card__title oh-card__title--sm fw-bold me-2">Employee</span>
+              </div>
+              <div class="oh-card__body mt-4">
+                <div class="row">
+                  <div class="col-12 col-sm-12 col-md-12 col-lg-12">
+                    <ul class="oh-profile__card-info-list">
+                      <li class="oh-profile__card-info-item">
+                        <span class="oh-profile__info-value">Personal Info</span>
+                        <div class="oh-progress-container">
+                          <div class="oh-progress" role="progressbar">
+                            <div class="oh-progress__bar oh-progress__bar--secondary" style="width: {{personal_percentage}}%"></div>
+                          </div>
+                          <span class="oh-progress-container__percentage">{{personal_percentage|floatformat:2}}%</span>
+                        </div>
+                      </li>
+                      <li class="oh-profile__card-info-item">
+                        <span class="oh-profile__info-value">Work Info</span>
+                        <div class="oh-progress-container">
+                          <div class="oh-progress" role="progressbar">
+                            <div class="oh-progress__bar oh-progress__bar--secondary" style="width: {{work_percentage}}%"></div>
+                          </div>
+                          <span class="oh-progress-container__percentage">{{work_percentage|floatformat:2}}%</span>
+                        </div>
+                      </li>
+                      <li class="oh-profile__card-info-item">
+                        <span class="oh-profile__info-value">Bank Info</span>
+                        <div class="oh-progress-container">
+                          <div class="oh-progress" role="progressbar">
+                            <div class="oh-progress__bar oh-progress__bar--secondary" style="width: {{bank_percentage}}%"></div>
+                          </div>
+                          <span class="oh-progress-container__percentage">{{bank_percentage|floatformat:2}}%</span>
+                        </div>
+                      </li>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="oh-card mt-3">
+              <div class="oh-card__header">
+                <span class="oh-card__title oh-card__title--sm fw-bold me-2">Leave Policy</span>
+              </div>
+              <div class="oh-card__body">
+                <div class="row">
+                  <div class="col-12 col-sm-12" hx-get="{% url "allocation-leave-type-list" %}?instance_id={{instance.pk}}&card_only=true" hx-trigger="load">
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="oh-card mt-3">
+              <div class="oh-card__header">
+                <span class="oh-card__title oh-card__title--sm fw-bold me-2">Assets</span>
+              </div>
+              <div class="oh-card__body">
+                <div class="row">
+                  <div class="col-12 col-sm-12" hx-get="{% url "allocation-asset-list" %}?instance_id={{instance.pk}}&card_only=true" hx-trigger="load">
+                 </div>
+                </div>
+              </div>
+            </div>
+            <div class="oh-card mt-3">
+              <div class="oh-card__header">
+                <span class="oh-card__title oh-card__title--sm fw-bold me-2">Allowance</span>
+              </div>
+              <div class="oh-card__body">
+                <div class="row">
+                  <div class="col-12 col-sm-12" hx-get="{% url "allocation-allowance-list" %}?instance_id={{instance.pk}}&card_only=true" hx-trigger="load">
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="oh-card mt-3">
+              <div class="oh-card__header">
+                <span class="oh-card__title oh-card__title--sm fw-bold me-2">Deductions</span>
+              </div>
+              <div class="oh-card__body">
+                <div class="row">
+                  <div class="col-12 col-sm-12" hx-get="{% url "allocation-deduction-list" %}?instance_id={{instance.pk}}&card_only=true" hx-trigger="load">
+                  </div> 
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="oh-modal__dialog-footer p-0">
+    <button type="submit" class="oh-btn oh-btn--secondary oh-btn--shadow">Next</button>
+  </div>
+</div>
diff --git a/employee/templates/cbv/dashboard/offline_action.html b/employee/templates/cbv/dashboard/offline_action.html
new file mode 100644
index 000000000..4f35f2727
--- /dev/null
+++ b/employee/templates/cbv/dashboard/offline_action.html
@@ -0,0 +1,14 @@
+{% load i18n %}
+{% include 'generic/components.html' %}
+<button
+      type="button"
+      hx-get="{% url 'send-mail-employee' instance.id %}"
+      title="{% trans "Send Mail" %}"
+      hx-target="#mail-content"
+      hx-swap="innerHTML"
+      class="oh-btn oh-btn--light-bkg w-100"
+      data-toggle="oh-modal-toggle"
+      data-target="#sendMailModal"
+    >
+      <ion-icon name="mail-open-outline"></ion-icon>
+    </button>
diff --git a/employee/templates/cbv/disciplinary_actions/action_date.html b/employee/templates/cbv/disciplinary_actions/action_date.html
new file mode 100644
index 000000000..2b968109a
--- /dev/null
+++ b/employee/templates/cbv/disciplinary_actions/action_date.html
@@ -0,0 +1,10 @@
+
+           {% load i18n %} {% load basefilters %} {% load employee_filter %}
+        {% if instance.action.action_type == 'suspension' and instance.unit_in == "days" %}
+                  <div>
+                    <span class="dateformat_changer">{{ instance.start_date }}</span>
+                    &nbsp to &nbsp<span class="dateformat_changer">{{ instance.start_date | add_days:instance.days }}</span>
+                  </div>
+                {% else %}
+                    <div  class="dateformat_changer">{{ instance.start_date }}</div>
+                {% endif %}
diff --git a/employee/templates/cbv/disciplinary_actions/action_taken.html b/employee/templates/cbv/disciplinary_actions/action_taken.html
new file mode 100644
index 000000000..88d034825
--- /dev/null
+++ b/employee/templates/cbv/disciplinary_actions/action_taken.html
@@ -0,0 +1,14 @@
+{% load i18n %} {% load basefilters %}
+{% if instance.action.action_type == 'suspension' %}
+                    <div >{{ instance.action }}
+                      <p class="fw-bold mt-2">{% trans "Suspended for" %}
+                        {% if instance.unit_in == "days" %}
+                         {{ instance.days }} {% trans "days" %}.
+                         {% else %}
+                         {{ instance.hours }} {% trans "hours" %}.
+                        {% endif %}
+                      </p>
+                    </div>
+                {% else %}
+                    <div >{{ instance.action }}</div>
+                {% endif %}
\ No newline at end of file
diff --git a/employee/templates/cbv/disciplinary_actions/actions.html b/employee/templates/cbv/disciplinary_actions/actions.html
new file mode 100644
index 000000000..e21c39d46
--- /dev/null
+++ b/employee/templates/cbv/disciplinary_actions/actions.html
@@ -0,0 +1,28 @@
+{% load basefilters %}{% load i18n %}
+{% if perms.employee.change_disciplinaryaction or perms.employee.delete_disciplinaryaction or perms.employee.add_disciplinaryaction %}
+<div onclick="event.stopPropagation();">
+    <div class="oh-btn-group">
+        {% if perms.employee.change_disciplinaryaction %}
+            <a hx-get="{% url 'update-actions' instance.id %}?instance_ids={{instance.ordered_ids}}"
+                hx-target='#genericModalBody' data-toggle='oh-modal-toggle' data-target="#genericModal"
+                class="oh-btn oh-btn--light-bkg w-100" title="{% trans 'Edit' %}">
+                <ion-icon name="create-outline"></ion-icon></a>
+        {% endif %}
+        {% if perms.employee.add_disciplinaryaction %}
+            <a class="oh-btn oh-btn--light-bkg w-100" data-toggle="oh-modal-toggle" data-target="#genericModal"
+                hx-get="{% url 'duplicate-disciplinary-actions' instance.id %}?{{pg}}" title="{% trans 'Duplicate' %}"
+                hx-target="#genericModalBody" style="cursor: pointer;">
+                <ion-icon name="copy-outline"></ion-icon>
+            </a>
+        {% endif %}
+        {% if perms.employee.delete_disciplinaryaction %}
+            <form hx-confirm="{% trans " Are you sure you want to delete this disciplinary action?" %}"
+                hx-post="{% url 'delete-actions' instance.id %}" hx-target="#dis-container" class="w-100">
+                {% csrf_token %}
+                <button type='submit' class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100"
+                    title="{% trans 'Remove' %}"><ion-icon name="trash-outline"></ion-icon></button>
+            </form>
+        {% endif %}
+    </div>
+</div>
+{% endif %}
\ No newline at end of file
diff --git a/employee/templates/cbv/disciplinary_actions/attachments.html b/employee/templates/cbv/disciplinary_actions/attachments.html
new file mode 100644
index 000000000..9a6c2e714
--- /dev/null
+++ b/employee/templates/cbv/disciplinary_actions/attachments.html
@@ -0,0 +1,14 @@
+{% load i18n %}
+                {% if instance.attachment %}
+                  <div>
+                    <div class="oh-helpdesk_attached--content">
+                      <div class="oh-helpdesk__attachment-icon">
+                        <a href="{{ instance.attachment.url }}" target="_blank"><span class="oh-file-icon oh-file-icon--pdf"></span></a>
+                      </div>
+                      <a href="{{ instance.attachment.url }}" target="_blank"><span class="oh-helpdesk__filename">{% trans "View File" %}</span></a>
+                    </div>
+                  </div>
+                {% else %}
+                  <div>{% trans "No file has been uploaded." %}</div>
+                {% endif %}
+                
\ No newline at end of file
diff --git a/employee/templates/cbv/disciplinary_actions/detail_action.html b/employee/templates/cbv/disciplinary_actions/detail_action.html
new file mode 100644
index 000000000..e5a47beb6
--- /dev/null
+++ b/employee/templates/cbv/disciplinary_actions/detail_action.html
@@ -0,0 +1,23 @@
+{% load basefilters %}{% load i18n %}
+      {% if perms.payroll.change_disciplinaryaction or perms.payroll.delete_disciplinaryaction %}
+                  
+                    <div class="oh-btn-group"  style="width: 100%;">
+                      {% if perms.payroll.change_disciplinaryaction %}
+                        <a hx-get="{% url 'update-actions' instance.id %}" hx-target='#genericModalBody' data-toggle='oh-modal-toggle' data-target="#genericModal" class="oh-btn oh-btn--info w-50" title="{% trans 'Edit' %}">
+                        <ion-icon name="create-outline" role="img"
+                        class="md hydrated" aria-label="create outline"></ion-icon></a>
+                      {% endif %}
+                      {% if perms.payroll.delete_disciplinaryaction %}
+                        <form hx-confirm="{% trans "Are you sure you want to delete this disciplinary action?" %}" hx-post="{% url 'delete-actions' instance.id %}?instances_ids={{ request.GET.instance_ids }}" hx-target="#genericModalBody" class="w-50">
+                          {% csrf_token %}
+                          <button type='submit' class="oh-btn oh-btn--secondary w-100" title="{% trans 'Remove' %}"><ion-icon name="trash-outline"></ion-icon></button>
+                        </form>
+                      {% endif %}
+                    </div>
+                 
+                {% endif %}
+  {% if request.GET.deleted %}
+  <script>
+  $(".reload-record").click()
+  </script>
+  {% endif %}
\ No newline at end of file
diff --git a/employee/templates/cbv/disciplinary_actions/disciplinary_actions.html b/employee/templates/cbv/disciplinary_actions/disciplinary_actions.html
new file mode 100644
index 000000000..4b0bc57d0
--- /dev/null
+++ b/employee/templates/cbv/disciplinary_actions/disciplinary_actions.html
@@ -0,0 +1,94 @@
+{% extends "index.html" %}
+{% block content %}
+{% load i18n %}{% load static %}
+
+
+
+<meta name="csrf-token" content="{{ csrf_token }}">
+
+<div hx-get="{% url 'disciplinary-actions-nav' %}" hx-trigger="load"></div>
+
+{% include "generic/components.html" %}
+
+<div class="oh-checkpoint-badge mb-2" id="selectedInstances" data-ids="[]" data-clicked="" style="display: none"></div>
+
+<div class="oh-wrapper"  id="listContainer">
+    <div class="animated-background"></div>
+</div>
+
+<div class="oh-modal" id="dynamicCreateModal" role="dialog" aria-hidden="true" style="z-index: 1022;">
+    <div class="oh-modal__dialog" style="max-width: 550px;" id="dynamicCreateModalBody"></div>
+</div>
+
+<script>
+    function actionTypeChange(selectElement) {
+        var selectedActiontype = selectElement.val();
+        var parentForm = selectElement.parents().closest("form");
+        if (selectedActiontype !== "create" && selectedActiontype) {
+            $.ajax({
+                type: "post",
+                url: "{% url 'action-type-details' %}",
+                data: {
+                    csrfmiddlewaretoken: getCookie("csrftoken"),
+                    action_type: selectedActiontype,
+                },
+                success: function (response) {
+                    // Check if the response.action_type is "suspension"
+                    $("[id=id_unit_in]").change(function (e) {
+                        e.preventDefault();
+                        if (this.value == "days") {
+                            parentForm.find("[id=id_days]").parent().parent().show();
+                            parentForm.find("[id=id_hours]").parent().parent().hide();
+                            parentForm.find("[name=days]").prop("required", true);
+                        } else {
+                            parentForm.find("[id=id_hours]").parent().parent().show();
+                            parentForm.find("[id=id_days]").parent().parent().hide();
+                            parentForm.find("[name=days]").prop("required", false);
+                        }
+                    });
+                    if (response.action_type === "suspension") {
+                        // Show the 'days' field
+                        parentForm.find("[id=id_unit_in]").parent().parent().show();
+                        parentForm.find("[id=id_hours]").parent().parent().show();
+                        $("[id=id_unit_in]").change();
+                    } else {
+                        // Hide the 'days' field
+                        $("[id=id_unit_in]").change();
+                        parentForm.find("[id=id_days]").parent().parent().hide();
+                        parentForm.find("[id=id_unit_in]").parent().parent().hide();
+                        parentForm.find("[id=id_hours]").parent().parent().hide();
+                        parentForm.find("[name=days]").prop("required", false);
+                    }
+                },
+            });
+        }
+    }
+
+    function actionChange(selectElement) {
+        var selectedActiontype = selectElement.val();
+        var parentForm = selectElement.parents().closest("form");
+        $.ajax({
+            type: "post",
+            url: "{% url 'action-type-name' %}",
+            data: {
+                csrfmiddlewaretoken: getCookie("csrftoken"),
+                "action_type": selectedActiontype,
+            },
+            success: function (response) {
+
+                // Check if the response.action_type is "warning"
+                if (response.action_type === "warning") {
+                    // Hide the 'block_option' field
+                    parentForm.find('[id=id_block_option_parent_div]').hide();
+                } else {
+                    // Show the 'block_option' field
+                    parentForm.find('[id=id_block_option_parent_div]').show();
+                }
+
+            },
+        });
+    }
+
+</script>
+
+{% endblock content %}
\ No newline at end of file
diff --git a/employee/templates/cbv/disciplinary_actions/employee_col.html b/employee/templates/cbv/disciplinary_actions/employee_col.html
new file mode 100644
index 000000000..0df40dbec
--- /dev/null
+++ b/employee/templates/cbv/disciplinary_actions/employee_col.html
@@ -0,0 +1,40 @@
+{% load i18n %} {% load basefilters %}
+    <div class="oh-permission-table--toggle" data-toggle-count onclick="event.stopPropagation()">
+      <div class="d-flex align-items-center">
+        
+        <button class="oh-permission-table__collapse me-2">
+          <span  title="{% trans "Reveal" %}" class="reveal-span"><ion-icon class="oh-permission-table__collapse-down" name="chevron-down-outline"></ion-icon></span>
+          <span  title="{% trans "Collapse" %}" class="collapse-span"><ion-icon class="oh-permission-table__collapse-up" name="chevron-up-outline"></ion-icon></span>
+        </button>
+        <span class="count-span" style="font-style:italic;color:hsl(0deg,0%,37%);">{{instance.employee_id.all|length}}
+          {% if instance.employee_id.all|length > 1 %}
+            {% trans "Employees" %}
+          {% else %}
+            {% trans "Employee" %}
+          {% endif %}
+        </span>
+      </div>
+      {% for emp in instance.employee_id.all %}
+        <span class="oh-user-panel oh-collapse-panel" data-type="user">
+          <div class="oh-profile oh-profile--md">
+            <div class="oh-profile__avatar mr-1">
+              <img
+              src="https://ui-avatars.com/api/?name={{emp.get_full_name}}&background=random"
+              class="oh-profile__image"
+              alt="Baby C."
+              />
+            </div>
+            <span class="oh-profile__name oh-text--dark" title="{{emp}}"
+            >{{emp.get_full_name}}</span>
+          </div>
+          {% if perms.payroll.change_disciplinaryaction or perms.payroll.delete_disciplinaryaction %}
+          <a title="{% trans "Remove" %}" hx-post="{% url 'remove-employee-disciplinary-action' instance.id emp.id %}" hx-target="#listContainer" class="oh-user-panel__remove"
+            hx-confirm="{% trans 'Are you sure want to remove this employee from this action?' %}">
+            <ion-icon name="close-outline"></ion-icon>
+          </a>
+          {% else %}
+          <a class="oh-user-panel__remove"> </a>
+          {% endif%}
+        </span>
+      {% endfor %}
+    </div>
diff --git a/employee/templates/cbv/disciplinary_actions/filters.html b/employee/templates/cbv/disciplinary_actions/filters.html
new file mode 100644
index 000000000..5a4416921
--- /dev/null
+++ b/employee/templates/cbv/disciplinary_actions/filters.html
@@ -0,0 +1,67 @@
+{% load i18n %}{% load basefilters %}
+<div class="oh-dropdown__filter-body">
+    <div class="oh-accordion">
+      <div class="oh-accordion-header">{% trans "Disciplinary Action" %}</div>
+      <div class="oh-accordion-body">
+        <div class="row">
+          <div class="col-sm-12 col-md-12 col-lg-12">
+            <div class="oh-input-group">
+              <label class="oh-label" for="{{form.employee_id.id_for_label}}">{% trans "Employee" %}</label>
+              {{form.employee_id}}
+            </div>
+            <div class="oh-input-group">
+              <label class="oh-label" for ="{{form.action.id_for_label}}"
+                >{% trans "Action Taken" %}</label
+              >
+              {{form.action}}
+            </div>
+            <div class="oh-input-group">
+              <label class="oh-label" for="{{form.start_date.id_for_label}}">{% trans "Date" %}</label>
+              {{form.start_date}}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="oh-accordion">
+      <div class="oh-accordion-header">{% trans "Work Information" %}</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" for="{{form.employee_id__employee_work_info__company_id.id_for_label}}">{% trans "Company" %}</label>
+              {{form.employee_id__employee_work_info__company_id}}
+            </div>
+            <div class="oh-input-group">
+              <label class="oh-label" for ="{{form.employee_id__employee_work_info__department_id.id_for_label}}"
+                >{% trans "Department" %}</label
+              >
+              {{form.employee_id__employee_work_info__department_id}}
+            </div>
+            <div class="oh-input-group">
+              <label class="oh-label" for="{{form.employee_id__employee_work_info__shift_id.id_for_label}}">{% trans "Shift" %}</label>
+              {{form.employee_id__employee_work_info__shift_id}}
+            </div>
+          </div>
+
+          <div class="col-sm-12 col-md-12 col-lg-6">
+            <div class="oh-input-group">
+              <label class="oh-label" for ="{{form.employee_id__employee_work_info__reporting_manager_id.id_for_label}}"
+                >{% trans "Reporting Manager" %}</label
+              >
+              {{form.employee_id__employee_work_info__reporting_manager_id}}
+            </div>
+            <div class="oh-input-group">
+              <label class="oh-label" for="{{form.employee_id__employee_work_info__job_position_id.id_for_label}}">{% trans "Job Position" %}</label>
+              {{form.employee_id__employee_work_info__job_position_id}}
+            </div>
+            <div class="oh-input-group">
+              <label class="oh-label" for="{{form.employee_id__employee_work_info__work_type_id.id_for_label}}">{% trans "Work Type" %}</label>
+              {{form.employee_id__employee_work_info__work_type_id}}
+            </div>
+          </div>
+
+        </div>
+      </div>
+    </div>
+  </div>
\ No newline at end of file
diff --git a/employee/templates/cbv/disciplinary_actions/forms/create_form.html b/employee/templates/cbv/disciplinary_actions/forms/create_form.html
new file mode 100644
index 000000000..b6cc58b24
--- /dev/null
+++ b/employee/templates/cbv/disciplinary_actions/forms/create_form.html
@@ -0,0 +1,21 @@
+<div id="formContainer">
+    {% include "generic/horilla_form.html" %}
+</div>
+
+<script>
+
+  $(document).on("htmx:afterSettle", function () {
+      var actionElement = $("#id_action");
+      if (actionElement.length > 0) {
+        var action = actionElement.val();
+        if (action) {
+          actionTypeChange(actionElement);
+        }
+      }
+    });
+
+    $("#id_days").parent().parent().hide();
+    $("#id_unit_in").parent().parent().hide();
+    $("#id_hours").parent().parent().hide();
+    $("[name=days]").prop("required", false);
+  </script>
\ No newline at end of file
diff --git a/employee/templates/cbv/disciplinary_actions/main_dis.html b/employee/templates/cbv/disciplinary_actions/main_dis.html
new file mode 100644
index 000000000..4bebb06b4
--- /dev/null
+++ b/employee/templates/cbv/disciplinary_actions/main_dis.html
@@ -0,0 +1,4 @@
+
+  <div id="dis-container"> 
+    {% include "generic/horilla_list.html" %}
+</div>
\ No newline at end of file
diff --git a/employee/templates/cbv/document/notify_field.html b/employee/templates/cbv/document/notify_field.html
new file mode 100644
index 000000000..e760766b3
--- /dev/null
+++ b/employee/templates/cbv/document/notify_field.html
@@ -0,0 +1,15 @@
+{% load i18n %}
+<label
+  class="oh-label"
+  for="id_{{ form.notify_before.title }}"
+  title="{{ form.notify_before.help_text|safe }}"
+  >{% trans form.notify_before.label %}</label
+>
+{{form.notify_before}}
+{% comment %} <script>
+  $(document).ready(function () {
+      $("select").on("select2:select", function (e) {
+          $(this).closest("select")[0].dispatchEvent(new Event("change"));
+      });
+  });
+</script> {% endcomment %}
\ No newline at end of file
diff --git a/employee/templates/cbv/documents/inherit_form.html b/employee/templates/cbv/documents/inherit_form.html
new file mode 100644
index 000000000..67084060a
--- /dev/null
+++ b/employee/templates/cbv/documents/inherit_form.html
@@ -0,0 +1,38 @@
+{% load i18n %}
+<div>
+    {% include 'generic/horilla_form.html' %}
+</div>
+<style>
+  .file-validation {
+    color: #4f5bd9;
+    background-color: #d8e7f0;
+    border-color: #d6e9c6;
+    border: 1px solid transparent;
+    border-radius: 4px;
+  
+  }</style>
+<script>
+  $(document).ready(function () {
+      $("#id_notify_before_parent_div").addClass("d-none");
+      $("#id_expiry_date").on("change", function () {
+        if ($(this).val()) {
+          $("#id_notify_before_parent_div").removeClass("d-none");
+      } else {
+          $("#id_notify_before_parent_div").addClass("d-none");
+      }
+    });
+
+    var infoBox = `
+          <div class="file-validation" style="margin-left:10px;">
+            <ul style="list-style-type: disc;">
+                <li>Upload PDF file</li>
+                <li>Max size of the file: 5 MB</li>
+            </ul>
+      </div>
+      `;
+
+      // Append the info box before the Save button
+      $("#id_expiry_date_parent_div").before(infoBox);
+
+    });
+  </script>
\ No newline at end of file
diff --git a/employee/templates/cbv/employees_view/bulk_update_page.html b/employee/templates/cbv/employees_view/bulk_update_page.html
new file mode 100644
index 000000000..ae23d3a02
--- /dev/null
+++ b/employee/templates/cbv/employees_view/bulk_update_page.html
@@ -0,0 +1,131 @@
+{% load static %}
+<div>
+    {% include 'generic/bulk_form.html' %}
+</div>
+<script>
+
+    // auto update job position and job role when change department
+    $('#id_employee_work_info__department_id').on('change', function() {
+        var departmentId = $(this).val();
+        $.ajax({
+            url: '{% url "get-job-positions" %}',
+            method: 'GET',
+            data: {
+                'department_id': departmentId
+            },
+            success: function(data) {
+
+                $('#id_employee_work_info__job_position_id').empty();
+
+                $.each(data.job_positions, function(key, value) {
+                    $('#id_employee_work_info__job_position_id').append($('<option>', {
+                        value: key,
+                        text: value
+                    }));
+                });
+    
+                if ($('#id_employee_work_info__job_position_id option').length > 0) {
+                    var firstJobPositionId = $('#id_employee_work_info__job_position_id option:first').val();
+                    $('#id_employee_work_info__job_position_id').val(firstJobPositionId);
+    
+
+                    $('#id_employee_work_info__job_role_id').empty();
+                    $.each(data.job_roles, function(key, value) {
+                        $('#id_employee_work_info__job_role_id').append($('<option>', {
+                            value: key,
+                            text: value
+                        }));
+                    });
+                }
+    
+                $('#id_employee_work_info__job_position_id').change(); 
+                $('#id_employee_work_info__job_role_id').change(); 
+            }
+        });
+    });
+
+
+    // auto update department and job role when change job position
+    $('#id_employee_work_info__job_position_id').on('change', function() {
+  
+        var jobPositionId = $(this).val();
+        $.ajax({
+            url: '{% url "get-job-roles" %}', 
+            method: 'GET',
+            data: {
+                'job_position_id': jobPositionId
+            },
+            success: function(data) {
+                
+                $('#id_employee_work_info__job_role_id').empty();
+                $.each(data.job_roles, function(key, value) {
+                    $('#id_employee_work_info__job_role_id').append($('<option>', {
+                        value: key,
+                        text: value
+                    }));
+                });
+    
+                $('#id_employee_work_info__job_role_id').change();
+                //department
+                $('#id_employee_work_info__department_id').empty();
+                $.each(data.departments, function(key, value) {
+                    $('#id_employee_work_info__department_id').append($('<option>', {
+                        value: key,
+                        text: value
+                    }));
+                });
+    
+                // Select the correct department
+                if (data.department_id) {
+                    $('#id_employee_work_info__department_id').val(data.department_id);
+                }
+            }
+        });
+    });
+// changing job role
+    $('#id_employee_work_info__job_role_id').on('change', function() {
+  
+        var jobroleId = $(this).val();
+        $.ajax({
+            url: '{% url "get-job-position-department" %}', 
+            method: 'GET',
+            data: {
+                'job_role_id': jobroleId
+            },
+            success: function(data) {
+                
+                $('#id_employee_work_info__job_position_id').empty();
+                $.each(data.job_positions, function(key, value) {
+                    $('#id_employee_work_info__job_position_id').append($('<option>', {
+                        value: key,
+                        text: value
+                    }));
+                });
+    
+                if (data.job_position_id) {
+                    $('#id_employee_work_info__job_position_id').val(data.job_position_id);
+                }
+                //department
+                $('#id_employee_work_info__department_id').empty();
+                $.each(data.departments, function(key, value) {
+                    $('#id_employee_work_info__department_id').append($('<option>', {
+                        value: key,
+                        text: value
+                    }));
+                });
+    
+                // Select the correct department
+                if (data.department_id) {
+                    $('#id_employee_work_info__department_id').val(data.department_id);
+                }
+            }
+        });
+    });
+</script>
+
+<script>
+    {% include 'country.js' %}
+</script>
+    
+
+
diff --git a/employee/templates/cbv/employees_view/employee_actions.html b/employee/templates/cbv/employees_view/employee_actions.html
new file mode 100644
index 000000000..f1eae3d97
--- /dev/null
+++ b/employee/templates/cbv/employees_view/employee_actions.html
@@ -0,0 +1,80 @@
+{% load i18n%}{% load basefilters %}
+{% load horillafilters %}
+
+
+
+<div class="oh-btn-group" onclick="event.stopPropagation()">
+
+  {% if "leave"|app_installed or "payroll"|app_installed or "attendance"|app_installed %}
+  <button
+    type="button"
+    hx-get="{% url 'export-data-employee' instance.id %}"
+    title="{% trans "Export Individual Data" %}"
+    hx-target="#export-content"
+    hx-swap="innerHTML"
+    class="oh-btn oh-btn--light-bkg w-100"
+    data-toggle="oh-modal-toggle"
+    data-target="#dataExport"
+  >
+    <ion-icon name="download-outline"></ion-icon>
+  </button>
+{% endif %}
+
+    <button
+      type="button"
+      hx-get="{% url 'send-mail-employee' instance.id %}"
+      title="{% trans "Send Mail" %}"
+      hx-target="#mail-content"
+      hx-swap="innerHTML"
+      class="oh-btn oh-btn--light-bkg w-100"
+      data-toggle="oh-modal-toggle"
+      data-target="#sendMailModal"
+    >
+      <ion-icon name="mail-open-outline"></ion-icon>
+    </button>
+    {% if perms.employee.change_employee or request.user|check_manager:instance %}
+    <a
+      href="{% url 'employee-view-update' instance.id %}"
+      class="oh-btn oh-btn--light-bkg w-100"
+      title="{% trans 'Edit' %}"
+      ><ion-icon name="create-outline"></ion-icon
+    ></a>
+    {% endif %}
+    {% if perms.employee.delete_employee %}
+      {% if instance.is_active %}
+        <button hx-confirm="{% trans 'Do you want to archive this employee?' %}" hx-post="{% url 'employee-archive' instance.id %}?{{pd}}"
+                hx-target="#relatedModel" class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100" title="{% trans 'Archive' %}">
+          <ion-icon name="archive"></ion-icon>
+        </button>
+      {% else %}
+        <form hx-confirm="return confirm('{% trans "Do you want to un-archive this employee?" %}')"
+              hx-post="{% url 'employee-archive' instance.id %}"
+              hx-target="#relatedModel"
+              style = "width:100%"
+            >
+          {% csrf_token %}
+          <button
+            type="submit"
+            class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100"
+            title="{% trans 'Un-Archive' %}"
+            >
+            <ion-icon name="archive"></ion-icon>
+          </button>
+        </form>
+      {% endif %}
+    {% endif %}
+    {% if perms.employee.delete_employee %}
+      <a 
+        hx-get="{% url 'generic-delete' %}?model=employee.Employee&pk={{instance.id}}" 
+        hx-target="#deleteConfirmationBody" data-toggle="oh-modal-toggle" 
+        data-target="#deleteConfirmation" style = "width:100%">
+          <button
+            type="submit"
+            class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100"
+            title="{% trans 'Remove' %}"
+          >
+            <ion-icon name="trash-outline"></ion-icon>
+          </button>
+      </a>
+    {% endif %}
+  </div>
\ No newline at end of file
diff --git a/employee/templates/cbv/employees_view/employee_export.html b/employee/templates/cbv/employees_view/employee_export.html
new file mode 100644
index 000000000..5280d4e08
--- /dev/null
+++ b/employee/templates/cbv/employees_view/employee_export.html
@@ -0,0 +1,120 @@
+{% load i18n %} {% load static %}
+<div class="oh-dropdown__filter-body">
+  <div class="oh-accordion">
+    <div class="oh-accordion-header">{% trans "Excel columns" %}</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">
+              <input type="checkbox" id="select-all-fields" /> {% trans "Select All" %}
+            </label>
+          </div>
+        </div>
+      </div>
+      <div class="row">
+        {% for field in export_form.selected_fields %}
+        <div class="col-sm-12 col-md-12 col-lg-4">
+          <div class="oh-input-group">
+            <label class="oh-label"> {{ field }} </label>
+          </div>
+        </div>
+        {% endfor %}
+      </div>
+    </div>
+  </div>
+  <div class="oh-accordion">
+    <div class="oh-accordion-header">{% trans "Employee" %}</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"
+              for="{{export_filter.form.country.id_for_label}}"
+              >{% trans "Country" %}</label
+            >
+            {{export_filter.form.country}}
+          </div>
+        </div>
+        <div class="col-sm-12 col-md-12 col-lg-6">
+          <div class="oh-input-group">
+            <label
+              class="oh-label"
+              for="{{export_filter.form.gender.id_for_label}}"
+              >{% trans "Gender" %}</label
+            >
+            {{export_filter.form.gender}}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="oh-accordion">
+    <div class="oh-accordion-header">{% trans "Work Info" %}</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"
+              for="{{export_filter.form.employee_work_info__company_id.id_for_label}}"
+              >{% trans "Company" %}</label
+            >
+            {{export_filter.form.employee_work_info__company_id}}
+          </div>
+          <div class="oh-input-group">
+            <label
+              class="oh-label"
+              for="{{export_filter.form.employee_work_info__department_id.id_for_label}}"
+              >{% trans "Department" %}</label
+            >
+            {{export_filter.form.employee_work_info__department_id}}
+          </div>
+          <div class="oh-input-group">
+            <label
+              class="oh-label"
+              for="{{export_filter.form.employee_work_info__shift_id.id_for_label}}"
+              >{% trans "Shift" %}</label
+            >
+            {{export_filter.form.employee_work_info__shift_id}}
+          </div>
+        </div>
+        <div class="col-sm-12 col-md-12 col-lg-6">
+          <div class="oh-input-group">
+            <label
+              class="oh-label"
+              for="{{export_filter.form.employee_work_info__reporting_manager_id.id_for_label}}"
+              >{% trans "Reporting Manager" %}</label
+            >
+            {{export_filter.form.employee_work_info__reporting_manager_id}}
+          </div>
+          <div class="oh-input-group">
+            <label
+              class="oh-label"
+              for="{{export_filter.form.employee_work_info__job_position_id.id_for_label}}"
+              >{% trans "Job Position" %}</label
+            >
+            {{export_filter.form.employee_work_info__job_position_id}}
+          </div>
+          <div class="oh-input-group">
+            <label
+              class="oh-label"
+              for="{{export_filter.form.employee_work_info__work_type_id.id_for_label}}"
+              >{% trans "Work Type" %}</label
+            >
+            {{export_filter.form.employee_work_info__work_type_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">
+      {% trans "Export" %}
+    </button>
+  </div>
+
+
+<script src='{% static "/base/filter.js" %}'></script>
diff --git a/employee/templates/cbv/employees_view/filter_employee.html b/employee/templates/cbv/employees_view/filter_employee.html
new file mode 100644
index 000000000..d833bfdfb
--- /dev/null
+++ b/employee/templates/cbv/employees_view/filter_employee.html
@@ -0,0 +1,117 @@
+{% load i18n %}
+{% load static %}
+{% load horillafilters %}
+
+ <div class="oh-dropdown__filter-body">
+    <div class="oh-accordion">
+    <div class="oh-accordion-header">{% trans "Employee" %}</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" for="{{form.employee_first_name.id_for_label}}">{% trans "First Name" %}</label>
+            {{form.employee_first_name}}
+          </div>
+          <div class="oh-input-group">
+            <label class="oh-label" for="{{form.email.id_for_label}}">{% trans "Email" %}</label>
+            {{form.email}}
+          </div>
+          <div class="oh-input-group">
+            <label class="oh-label">{% trans 'Country' %}</label>
+            <select name="country" class="oh-select-2 oh-select w-100 country" id="country">
+            </select>
+          </div>
+        </div>
+        <div class="col-sm-12 col-md-12 col-lg-6">
+          <div class="oh-input-group">
+            <label class="oh-label" for="{{form.employee_last_name.id_for_label}}">{% trans "Last Name" %}</label>
+            {{form.employee_last_name}}
+          </div>
+          <div class="oh-input-group">
+            <label class="oh-label" for="{{form.phone.id_for_label}}">{% trans "Phone" %}</label>
+            {{form.phone}}
+          </div>
+          <div class="oh-input-group">
+            <label class="oh-label" for="{{form.gender.id_for_label}}">{% trans "Gender" %}</label>
+            {{form.gender}}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="oh-accordion">
+    <div class="oh-accordion-header">{% trans "Work Info" %}</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" for="{{form.employee_work_info__company_id.id_for_label}}">{% trans "Company" %}</label>
+            {{form.employee_work_info__company_id}}
+          </div>
+          <div class="oh-input-group">
+            <label class="oh-label" for="{{form.employee_work_info__department_id.id_for_label}}">{% trans "Department" %}</label>
+            {{form.employee_work_info__department_id}}
+          </div>
+          <div class="oh-input-group">
+            <label class="oh-label" for="{{form.employee_work_info__shift_id.id_for_label}}">{% trans "Shift" %}</label>
+            {{form.employee_work_info__shift_id}}
+          </div>
+          <div class="oh-input-group">
+            <label class="oh-label" for="{{form.employee_work_info__tags.id_for_label}}">{% trans "Employee tag" %}</label>
+            {{form.employee_work_info__tags}}
+          </div>
+
+        </div>
+        <div class="col-sm-12 col-md-12 col-lg-6">
+          <div class="oh-input-group">
+            <label class="oh-label" for="{{form.employee_work_info__reporting_manager_id.id_for_label}}">{% trans "Reporting Manager" %}</label>
+            {{form.employee_work_info__reporting_manager_id}}
+          </div>
+          <div class="oh-input-group">
+            <label class="oh-label" for="{{form.employee_work_info__job_position_id.id_for_label}}">{% trans "Job Position" %}</label>
+            {{form.employee_work_info__job_position_id}}
+          </div>
+          <div class="oh-input-group">
+            <label class="oh-label" for="{{form.employee_work_info__work_type_id.id_for_label}}">{% trans "Work Type" %}</label>
+            {{form.employee_work_info__work_type_id}}
+          </div>
+          {% if "attendance"|app_installed %} 
+          <div class="oh-input-group">
+            <label class="oh-label" for="{{form.working_today.id_for_label}}">{% trans "Currently Working" %}</label>
+            {{form.working_today}}
+          </div>
+          {% endif %}
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="oh-accordion">
+    <div class="oh-accordion-header">{% trans "Advanced" %}</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">
+            <div class="oh-input-group">
+              <label class="oh-label" for="{{form.employee_user_id__groups.id_for_label}}">{% trans "Groups" %}?</label>
+              {{form.employee_user_id__groups}}
+            </div>
+            <div class="oh-input-group">
+              <label class="oh-label" for="{{form.is_active.id_for_label}}">{% trans "Is Active" %}?</label>
+              {{form.is_active}}
+            </div>
+          </div>
+        </div>
+        <div class="col-sm-12 col-md-12 col-lg-6">
+          <div class="oh-input-group">
+            <label class="oh-label" for="{{form.employee_user_id__user_permissions.id_for_label}}">{% trans "Permissions" %}</label>
+            {{form.employee_user_id__user_permissions}}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div> 
+<script src="{% static '/base/filter.js' %}"></script>
+<script>
+{% include 'filter_country.js' %}
+</script> 
\ No newline at end of file
diff --git a/employee/templates/cbv/employees_view/offline_online.html b/employee/templates/cbv/employees_view/offline_online.html
new file mode 100644
index 000000000..85cfcb91b
--- /dev/null
+++ b/employee/templates/cbv/employees_view/offline_online.html
@@ -0,0 +1,6 @@
+            {% load i18n %}
+            {% if instance.check_online %}       
+              <span class="oh-dot oh-dot--small me-1" style="background-color:yellowgreen"></span> {% trans "Online" %}
+              {% else %}
+              <span class="oh-dot oh-dot--small me-1" style="background-color:rgba(128, 128, 128, 0.482)"></span> {% trans "Offline" %}
+              {% endif %}
\ No newline at end of file
diff --git a/employee/templates/cbv/employees_view/view_employees.html b/employee/templates/cbv/employees_view/view_employees.html
new file mode 100644
index 000000000..963860a43
--- /dev/null
+++ b/employee/templates/cbv/employees_view/view_employees.html
@@ -0,0 +1,286 @@
+
+
+{% extends "index.html" %}
+{% load i18n %}{% load static  %}
+
+
+{% block content %}
+
+<meta name="csrf-token" content="{{ csrf_token }}">
+
+
+
+<style>
+.online--dot{
+  background-color:yellowgreen;
+}
+.offline--dot{
+  background-color:rgba(128, 128, 128, 0.482);
+}
+
+.hired-True{
+  border-left: 3.4px solid yellowgreen !important;
+  border-radius: 4px 0 0 4px;
+
+}
+
+
+  .profile-picture {
+    transition: transform 0.3s;
+    z-index:9999
+    ;
+  }
+
+  .profile-picture:hover {
+      transform: scale(2.4);
+  }
+
+  .custom-swal-container .swal2-styled {
+    display:block;
+    width:70%;
+  }
+
+</style>
+
+
+
+ <div hx-get="{% url "employees-nav" %}" hx-trigger="load">
+</div> 
+{% comment %} my_app/templates/my_app/generic/index.html {% endcomment %}
+
+
+
+{% include "generic/components.html" %}
+
+<div
+    class="oh-checkpoint-badge mb-2"
+    id="selectedInstances"
+    data-ids="[]"
+    data-clicked=""
+    style="display: none"
+  ></div>
+
+  
+  <div 
+  class="oh-wrapper" 
+  id="listContainer">
+  <div class="animated-background">
+  </div>
+</div>
+
+
+
+
+<div id="relatedModel"></div>
+
+<div
+  class="oh-modal"
+  id="workInfoImport"
+  role="dialog"
+  aria-labelledby="workInfoImport"
+  aria-hidden="true"
+  >
+  <div class="oh-modal__dialog">
+    <div class="oh-modal__dialog-header">
+      <h2 class="oh-modal__dialog-title" id="workInfoImportLavel">
+        {% trans "Import Employee" %}
+      </h2>
+      <button class="oh-modal__close" aria-label="Close">
+        <ion-icon name="close-outline"></ion-icon>
+      </button>
+      <div class="oh-modal__dialog-body p-0 pt-2" id="workInfoImportModalBody">
+        <form
+          action="#"
+          id="workInfoImportForm"
+          enctype="multipart/form-data">
+          <div
+            class="oh-modal__dialog-body mr-5"
+            id="uploading"
+            style="display: none"
+          >
+            <div class="loader-container">
+              <div class="loader"></div>
+              <div class="loader-text">{% trans "Uploading..." %}</div>
+            </div>
+          </div>
+          <div id="error-container" style="color: red"></div>
+          <div class="modal-body">
+            {% csrf_token %}
+            <div class="oh-dropdown__import-form">
+              <label class="oh-dropdown__import-label" for="workInfoImportFile">
+                <ion-icon
+                  name="cloud-upload"
+                  class="oh-dropdown__import-form-icon md hydrated"
+                  role="img"
+                  aria-label="cloud upload"
+                ></ion-icon>
+                <span class="oh-dropdown__import-form-title"
+                  >{% trans "Upload a File" %}</span
+                >
+                <span class="oh-dropdown__import-form-text"
+                  >{% trans "Drag and drop files here" %}</span
+                >
+              </label>
+              <input type="file" name="file" id="workInfoImportFile" />
+            </div>
+          </div>
+          <div class="modal-footer d-flex flex-row-reverse">
+            <input
+            onclick="
+              validateFile($(this),'workInfoImportFile',true);
+              "
+              type="submit"
+              class="oh-btn oh-btn--small oh-btn--secondary w-100 mt-3"
+              value="{% trans 'Upload' %}"
+            />
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+</div>
+<div
+  class="oh-modal"
+  id="employeeExport"
+  role="dialog"
+  aria-labelledby="employeeExport"
+  aria-hidden="true"
+  >
+  <div class="oh-modal__dialog" style="max-width: 750px">
+    <div class="oh-modal__dialog-header">
+      <h2 class="oh-modal__dialog-title" id="employeeExportLavel">
+        {% trans "Export Employees" %}
+      </h2>
+      <button class="oh-modal__close" aria-label="Close">
+        <ion-icon name="close-outline"></ion-icon>
+      </button>
+      <div class="oh-modal__dialog-body p-0 pt-2" id="employeeExportModalBody">
+        <form
+          action="{%url 'work-info-export' %}"
+          method="get"
+          onsubmit="event.stopPropagation();$(this).parents().find('.oh-modal--show').last().toggleClass('oh-modal--show');"
+          id="employeeExportForm"
+        >
+          {% csrf_token %} {% include 'cbv/employees_view/employee_export.html' %}
+         
+          
+        </form>
+      </div>
+    </div>
+  </div>
+</div>
+<div class="oh-modal" id="sendMailModal" role="dialog" aria-labelledby="sendMailModal" aria-hidden="true">
+  <div class="oh-modal__dialog">
+    <div class="oh-modal__dialog-header">
+      <span class="oh-modal__dialog-title" id="sendMailModalLabel"><h5>{% trans 'Send Mail' %}</h5></span>
+      <button class="oh-modal__close" aria-label="Close"><ion-icon name="close-outline"></ion-icon></button>
+    </div>
+    <div class="oh-modal__dialog-body" id="mail-content"></div>
+  </div>
+</div>
+
+<div
+  class="oh-modal"
+  id="bulkUpdateModal"
+  role="dialog"
+  aria-labelledby="bulkUpdateModal"
+  aria-hidden="true"
+  >
+  <div class="oh-modal__dialog" style="max-width: 750px">
+    <div class="oh-modal__dialog-header">
+      <h2 class="oh-modal__dialog-title" id="bulkUpdateModalLavel">
+        {% trans "Bulk Update Employees" %}
+      </h2>
+      <button class="oh-modal__close" aria-label="Close">
+        <ion-icon name="close-outline"></ion-icon>
+      </button>
+      <div class="oh-modal__dialog-body p-0 pt-2" id="bulkUpdateModalBody">
+        <form
+          action="{%url 'employee-bulk-update' %}"
+          method="post"
+          onsubmit="event.stopPropagation();$(this).parents().find('.oh-modal--show').last().toggleClass('oh-modal--show');"
+          id="bulkUpdateModalForm"
+        >
+          {% csrf_token %} {{update_fields_form.update_fields.label}}
+          {{update_fields_form.update_fields}}
+          {{update_fields_form.bulk_employee_ids}}
+          <div class="oh-dropdown__filter-footer">
+            <button class="oh-btn oh-btn--secondary oh-btn--small w-100">
+              {% trans "Update" %}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="oh-modal" id="dataExport" role="dialog" aria-labelledby="dataExport" aria-hidden="true">
+  <div class="oh-modal__dialog">
+    <div class="oh-modal__dialog-header">
+      <span class="oh-modal__dialog-title" id="dataExport"><h5>{% trans 'Export Data' %}</h5></span>
+      <button class="oh-modal__close" aria-label="Close"><ion-icon name="close-outline"></ion-icon></button>
+    </div>
+    <div class="oh-modal__dialog-body" id="export-content"></div>
+  </div>
+</div>
+
+
+
+{% comment %} <script src="{% static 'employee/importExport.js' %}"></script> {% endcomment %}
+<script src="{% static '/cbv/employee_view/actions.js' %}"></script>
+<script>
+  function getCSRFToken() {
+    return document.querySelector('meta[name="csrf-token"]').getAttribute('content');
+  }
+  
+  function deleteEmployee(url) {
+    Swal.fire({
+        text: "All non-active contracts of the employee will also be deleted. Do you want to continue ?",
+        icon: "question",
+        showCancelButton: true,
+        confirmButtonColor: "green",
+        cancelButtonColor: "#d33",
+        confirmButtonText: "Confirm"
+    }).then((result) => {
+        if (result.isConfirmed) {
+            const form = document.createElement('form');
+            form.setAttribute('action', url);
+            form.setAttribute('method', 'post');
+            
+            const csrfTokenInput = document.createElement('input');
+            csrfTokenInput.setAttribute('type', 'hidden');
+            csrfTokenInput.setAttribute('name', 'csrfmiddlewaretoken');
+            csrfTokenInput.value = getCSRFToken();
+            form.appendChild(csrfTokenInput);
+            
+            document.body.appendChild(form);
+            form.submit();
+        }
+    });
+}
+
+</script>
+{% if request.GET.error_message %}
+      <script>
+        document.addEventListener('DOMContentLoaded', function() {
+          const errorMessage = '{{ request.session.error_message|escapejs }}';
+          const formattedErrorMessage = errorMessage.replace(/,\s*/g, '<br>');
+          const finalErrorMessage = formattedErrorMessage.replace(/-\s*/g, '<span class="material-symbols-outlined me-2" style="font-size: 14px;"">adjust</span>');
+          Swal.fire({
+              icon: 'error',
+              title: 'Error',
+              html: `
+              <div style='text-align:left;'>
+                  <h5 class='mb-2 fw-bold ms-2'>This employee is already related in,</h5>
+                  <p class='ms-2'>${finalErrorMessage}</p>
+              </div>
+              `,
+              
+          });
+        });
+
+
+      </script>
+    {% endif %}
+{% endblock content %}
\ No newline at end of file
diff --git a/employee/templates/cbv/profile/profile_view.html b/employee/templates/cbv/profile/profile_view.html
new file mode 100644
index 000000000..b4188827d
--- /dev/null
+++ b/employee/templates/cbv/profile/profile_view.html
@@ -0,0 +1,51 @@
+{% load i18n static %}
+<div>
+    {% include "generic/horilla_profile_view.html" %}
+</div>
+
+<form  hidden action="{% url 'employee-reset-password' %}" method="post" role="button"
+style="display: flex;">
+<ion-icon name="key-outline" style="width: 20px; height: 20px; "></ion-icon>
+{% csrf_token %}
+<input name="email" hidden value="{{instance.employee_user_id.username}}" />
+<button  id="reset-button" type="submit" style="border: none; background: transparent;">{% trans "Send password reset link" %} </button>
+</form>
+
+
+<form hidden action="{% url 'employee-account-block-unblock' instance.id %}" id="block-form">
+{% csrf_token %}
+<img src="{% static 'images/ui/block-user.png' %}" style="width: 20px; height: 20px; ">
+<button  id="block-button" type="submit" style=" border: none; background: transparent;">
+        {% trans "Block Account" %}
+</button>
+</form>
+
+
+{% comment %} <script>
+    document.getElementById('block-button').onclick = function() {
+        var message = '{% if instance.employee_user_id.is_active %}{% trans "Do you really want to prevent this employee from accessing and logging into this webpage?" %}{% else %}{% trans "Do you really want to allow this employee to access and log into this webpage?" %}{% endif %}';
+        return confirm(message);
+    };
+</script> {% endcomment %}
+
+<script>
+    $('#block-account').click(function() {
+    var message = '{% if instance.employee_user_id.is_active %}{% trans "Do you really want to prevent this employee from accessing and logging into this webpage?" %}{% else %}{% trans "Do you really want to allow this employee to access and log into this webpage?" %}{% endif %}';
+
+        Swal.fire({
+            text: message,
+            icon: "question",
+            showCancelButton: true,
+            confirmButtonColor: "green",
+            cancelButtonColor: "#d33",
+            confirmButtonText: "Confirm",
+            cancelButtonText: "Cancel"
+        }).then((result) => {
+            if (result.isConfirmed) {
+                // Redirect to the URL
+                document.getElementById('block-form').submit();
+            }
+        });
+    });
+</script>
+
diff --git a/employee/templates/disciplinary_actions/disciplinary_nav.html b/employee/templates/disciplinary_actions/disciplinary_nav.html
index 20efed02e..b33cc7a21 100644
--- a/employee/templates/disciplinary_actions/disciplinary_nav.html
+++ b/employee/templates/disciplinary_actions/disciplinary_nav.html
@@ -133,7 +133,7 @@
     function actionTypeChange(selectElement) {
         var selectedActiontype = selectElement.val();
         var parentForm = selectElement.parents().closest("form");
-        if (selectedActiontype !== "create" && selectedActiontype) {
+        if (selectedActiontype !== "dynamic_create" && selectedActiontype) {
             $.ajax({
                 type: "post",
                 url: "{% url 'action-type-details' %}",
diff --git a/employee/templates/disciplinary_actions/update_form.html b/employee/templates/disciplinary_actions/update_form.html
index 37e71578a..3c4a5383e 100644
--- a/employee/templates/disciplinary_actions/update_form.html
+++ b/employee/templates/disciplinary_actions/update_form.html
@@ -9,9 +9,12 @@
     {% endfor %}
 </div>
 <script>
-    setTimeout(function () {
-        $(".oh-modal__close").click();
-    }, 1000);
+  setTimeout(function () {
+    $(".oh-modal__close").click();
+  }, 1000);
+  $(document).ready(function(){
+    $('.reload-record').click();
+  })
 </script>
 {% endif %}
 {% if form.errors %}
diff --git a/employee/templates/documents/requests.html b/employee/templates/documents/requests.html
index b66b46a3d..257472e2b 100644
--- a/employee/templates/documents/requests.html
+++ b/employee/templates/documents/requests.html
@@ -1,5 +1,5 @@
 {% load i18n %} {% load horillafilters %} {% load basefilters %} {% load static %}
-
+{% include 'generic/components.html'%}
 {% include 'filter_tags.html' %}
 <div class="oh-modal" id="viewFileModal" role="dialog" aria-labelledby="viewFileModal" aria-hidden="true">
 	<div class="oh-modal__dialog custom-dialog">
@@ -76,105 +76,173 @@
 							</div>
 						</div>
 					</div>
-					<div class="oh-accordion-meta__body d-none">
-						<div class="oh-sticky-table oh-sticky-table--no-overflow mb-5">
-							<div class="oh-card p-4">
-								{% for document in document_list.list %}
-									<div class="oh-user_permission-list_item accordion exclude-accordion-style "
-										hx-get='{% url "view-file" document.id %}' hx-target="#viewFile"
-										data-toggle="oh-modal-toggle" id="requestDocument{{document.id}}"
-										data-target="#viewFileModal">
-										<div class="oh-user_permission-list_profile ps-2 {% if document.status == 'approved' %}row-status--yellow{% elif document.status == 'rejected' %}row-status--red {% elif document.status == 'requested' %}row-status--blue{% endif %}">
-											<input type="checkbox" id="{{ document.id }}" onchange="highlightRow($(this))"
-												class="oh-input payslip-checkbox oh-input__checkbox all-documents-row"
-												onclick="event.stopPropagation()" data-status="{{document.status}}">
-											<div class="oh-navbar__user-photo oh-user_permission--profile">
-												{% if document.document %}
-													{% if document.status == "approved" %}
-														<span class="oh-badge oh-badge--secondary oh-badge--small oh-badge--round ms-2 mr-2 file-upload"
-															title="{% trans 'Approved' %}">
-															<ion-icon name="checkmark"></ion-icon>
-														</span>
-													{% elif document.status == 'rejected' %}
-														<span class="oh-badge oh-badge--secondary oh-badge--small oh-badge--round ms-2 mr-2 file-upload"
-															title="{% trans 'Rejected' %}">
-															<ion-icon name="alert"></ion-icon>
-														</span>
-													{% else %}
-														<span
-															class="oh-badge oh-badge--secondary oh-badge--small oh-badge--round ms-2 mr-2 file-upload"
-															title="{% trans 'File Uploaded' %}">
-															<ion-icon name="image-outline"></ion-icon>
-														</span>
-													{% endif %}
-												{% else %}
-													<span
-														class="oh-badge oh-badge--secondary oh-badge--small oh-badge--round ms-2 mr-2 file-upload"
-														hx-get="{% url 'file-upload' document.id %}"
-														hx-target="#objectCreateModalTarget" data-document-id="{{ document.id }}"
-														data-toggle="oh-modal-toggle" data-target="#objectCreateModal"
-														onclick="event.stopPropagation()" title="{% trans 'Upload' %}">
-														<ion-icon class="md hydrated m-0" name="add-outline" role="img"
-															aria-label="add outline">
-														</ion-icon>
-													</span>
-												{% endif %}
-											</div>
-											<div class="oh-feedback-card__name-container ms-1">
-												<span class="oh-card__title oh-card__title--sm fw-bold me-1">{{document.title}} --
-													{{document.employee_id.get_full_name}}
-												</span>
-												<span class="oh-user_permission_list-text oh-text--light"
-													title="{{document.document_request_id.description}}">
-													{{document.document_request_id.description|truncatechars:20}}
-												</span>
-											</div>
-										</div>
-										<div class="oh-btn-group">
-											{% if perms.horilla_document.change_documentrequest %}
-												{% if document.status == "approved" or not document.document %}
-													<a class="oh-btn oh-btn--success w-100 oh-btn--disabled"
-														onclick="event.stopPropagation()">
-														<ion-icon class="me-1" name="checkmark-outline"></ion-icon>
-													</a>
-												{% else %}
-													<a type="submit" hx-confirm="{% trans 'Do you want to approve this request' %}"
-														hx-get="{% url 'document-approve' document.id %}" hx-target="#viewFile"
-														title="{% trans 'Approve' %}" class="oh-btn oh-btn--success w-100"
-														onclick="event.stopPropagation()">
-														<ion-icon class="me-1" name="checkmark-outline"></ion-icon>
-													</a>
-												{% endif %}
-												{% if document.status == 'rejected' or not document.document %}
-													<a class="oh-btn oh-btn--danger w-100 oh-btn--disabled"
-														onclick="event.stopPropagation()">
-														<ion-icon class="me-1" name="close-circle-outline"></ion-icon>
-													</a>
-												{% else %}
-													<a type="submit" hx-get="{% url 'document-reject' document.id %}"
-														hx-target="#rejectFileForm" data-toggle="oh-modal-toggle"
-														data-target="#rejectFileModal" title="{% trans 'Reject' %}"
-														class="oh-btn oh-btn--danger w-100" onclick="event.stopPropagation()">
-														<ion-icon class="me-1" name="close-circle-outline"></ion-icon>
-													</a>
-												{% endif %}
-											{% endif %}
-											{% if perms.horilla_document.delete_documentrequest %}
-												<form hx-confirm="{% trans 'Are you sure you want to delete this Document Request?' %}"
-													hx-post="{% url 'document-delete' document.id %}"
-													hx-target="#requestDocument{{document.id}}" hx-swap="outerHTML"
-													onclick="event.stopPropagation()">
-													{% csrf_token %}
-													<button type="submit" class="oh-btn  oh-btn--secondary"
-														title="{% trans 'Delete' %}">
-														<ion-icon class="me-1 md hydrated" name="trash-outline" role="img"
-															aria-label="trash outline"></ion-icon>
-													</button>
-												</form>
-											{% endif %}
-										</div>
-									</div>
-								{% endfor %}
+				</span>
+
+				<div class="oh-accordion-meta__actions" onclick="event.stopPropagation()">
+                    <div class="oh-dropdown" x-data="{open: false}">
+                        <button class="oh-btn oh-stop-prop oh-accordion-meta__btn" @click="open = !open" @click.outside="open = false" title="Action">
+                            {% trans "Actions" %}
+                            <ion-icon class="ms-2 oh-accordion-meta__btn-icon md hydrated" name="caret-down-outline" role="img" aria-label="caret down outline"></ion-icon>
+                        </button>
+                        <div class="oh-dropdown__menu oh-dropdown__menu--right" x-show="open" style="display: none;">
+                            <ul class="oh-dropdown__items">
+								<li class="oh-dropdown__item">
+									<a class="oh-dropdown__link"
+									data-toggle="oh-modal-toggle"
+									data-target="#objectCreateModal"
+									hx-get="{% url 'document-request-update' document_list.list.0.document_request_id.id %}"
+									hx-target="#objectCreateModalTarget">{% trans "Edit" %}</a>
+								</li>
+								<li class="oh-dropdown__item">
+
+									<a
+										hx-get="{% url 'generic-delete' %}?model=horilla_documents.DocumentRequest&pk={{document_list.list.0.document_request_id.id}}"
+										hx-target="#deleteConfirmationBody" data-toggle="oh-modal-toggle"
+										data-target="#deleteConfirmation">
+										<button
+											type="submit"
+											class="oh-dropdown__link oh-dropdown__link--danger"
+											title="{% trans 'Delete' %}"
+										>
+											{% trans "Delete" %}
+										</button>
+									</a>
+								</li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+			</div>
+			<div class="oh-accordion-meta__body d-none">
+				<div class="oh-sticky-table oh-sticky-table--no-overflow mb-5">
+					<div class="oh-card p-4">
+						{% for document in document_list.list %}
+						<div
+							class="oh-user_permission-list_item accordion exclude-accordion-style " hx-get='{% url "view-file" document.id %}'
+							hx-target="#viewFile" data-toggle="oh-modal-toggle" id="requestDocument{{document.id}}"
+							data-target="#viewFileModal"
+						>
+							<div class="oh-user_permission-list_profile ps-2 {% if document.status == "approved" %}row-status--yellow {% elif document.status == 'rejected' %}row-status--red {% elif document.status == 'requested' %}row-status--blue{% endif %}">
+								<input type="checkbox" id="{{ document.id }}" onchange="highlightRow($(this))"
+									class="oh-input payslip-checkbox oh-input__checkbox all-documents-row"
+									onclick="event.stopPropagation()"
+								>
+								<div class="oh-navbar__user-photo oh-user_permission--profile">
+									{% if document.document %}
+										{% if document.status == "approved" %}
+										<span
+											class="oh-badge oh-badge--secondary oh-badge--small oh-badge--round ms-2 mr-2 file-upload"
+											title="{% trans 'Approved' %}"
+										>
+										<ion-icon name="checkmark"></ion-icon>
+										{% elif document.status == 'rejected' %}
+										<span
+											class="oh-badge oh-badge--secondary oh-badge--small oh-badge--round ms-2 mr-2 file-upload"
+											title="{% trans 'Rejected' %}"
+										>
+											<ion-icon name="alert"></ion-icon>
+										</span>
+										{% else %}
+										<span
+											class="oh-badge oh-badge--secondary oh-badge--small oh-badge--round ms-2 mr-2 file-upload"
+											title="{% trans 'File Uploaded' %}"
+										>
+										<ion-icon name="image-outline"></ion-icon>
+										</span>
+										{% endif %}
+									{% else %}
+										<span
+											class="oh-badge oh-badge--secondary oh-badge--small oh-badge--round ms-2 mr-2 file-upload"
+											hx-get="{% url 'file-upload' document.id %}"
+											hx-target="#genericModalBody"
+											data-document-id="{{ document.id }}"
+											data-toggle="oh-modal-toggle"
+											data-target="#genericModal"
+											onclick="event.stopPropagation()"
+											title="{% trans 'Upload' %}"
+										    >
+											<ion-icon
+												class="md hydrated m-0"
+												name="add-outline"
+												role="img"
+												aria-label="add outline"
+											></ion-icon>
+										</span>
+									{% endif %}
+								</div>
+								<div class="oh-feedback-card__name-container ms-1">
+									<span class="oh-card__title oh-card__title--sm fw-bold me-1"
+										>{{document.title}} -- {{document.employee_id.get_full_name}}
+									</span>
+									<span
+										class="oh-user_permission_list-text oh-text--light"
+										title="{{document.document_request_id.description}}"
+									>
+										{{document.document_request_id.description|truncatechars:20}}
+									</span>
+								</div>
+							</div>
+							<div class="oh-btn-group">
+                                    {% if perms.horilla_document.change_documentrequest %}
+                                        {% if document.status == "approved" or not document.document %}
+                                        <a class="oh-btn oh-btn--success w-100 oh-btn--disabled"  onclick="event.stopPropagation()">
+                                            <ion-icon class="me-1" name="checkmark-outline"></ion-icon>
+                                        </a>
+                                        {% else %}
+                                        <a
+                                            type="submit"
+											hx-confirm="{% trans 'Do you want to approve this request' %}"
+                                            hx-get="{% url 'document-approve' document.id %}"
+                                            hx-target="#viewFile"
+                                            title="{% trans 'Approve' %}"
+                                            class="oh-btn oh-btn--success w-100"
+											onclick="event.stopPropagation()"
+                                        >
+                                            <ion-icon class="me-1" name="checkmark-outline"></ion-icon>
+                                        </a>
+                                        {% endif %}
+										{% if document.status == 'rejected' or not document.document %}
+										<a class="oh-btn oh-btn--danger w-100 oh-btn--disabled"  onclick="event.stopPropagation()">
+                                            <ion-icon class="me-1" name="close-circle-outline"></ion-icon>
+                                        </a>
+										{% else %}
+                                        <a
+                                            type="submit"
+                                            hx-get="{% url 'document-reject' document.id %}"
+											{% comment %} hx-confirm="{% trans 'Do you want to reject this request' %}" {% endcomment %}
+                                            hx-target="#genericModalBody"
+											data-toggle="oh-modal-toggle"
+											data-target="#rejectFileModal"
+                                            title="{% trans 'Reject' %}"
+                                            class="oh-btn oh-btn--danger w-100"
+											onclick="event.stopPropagation()"
+                                        >
+                                            <ion-icon class="me-1" name="close-circle-outline"></ion-icon>
+                                        </a>
+										{% endif %}
+                                    {% endif %}
+								<form
+									hx-confirm="{% trans 'Are you sure you want to delete this Document Request?' %}"
+									hx-post="{% url 'document-delete' document.id %}"
+									hx-target="#requestDocument{{document.id}}"
+									method='post'
+									onclick="event.stopPropagation()"
+									>
+									{% csrf_token %}
+									<button
+										type="submit"
+										class="oh-btn  oh-btn--secondary"
+										title="{% trans 'Delete' %}"
+									>
+										<ion-icon
+											class="me-1 md hydrated"
+											name="trash-outline"
+											role="img"
+											aria-label="trash outline"
+										></ion-icon
+										>
+									</button>
+								</form>
 							</div>
 						</div>
 						<div class="oh-pagination">
diff --git a/employee/templates/employee/profile/profile_view.html b/employee/templates/employee/profile/profile_view.html
index a7312a039..988aada0d 100644
--- a/employee/templates/employee/profile/profile_view.html
+++ b/employee/templates/employee/profile/profile_view.html
@@ -1,5 +1,314 @@
 {% extends 'index.html' %} {% load i18n static basefilters horillafilters accessibility_filters %} {% block content %}
+<style>
+	.resign-status {
+		background: #73bbe12b;
+		font-size: 0.8rem;
+		padding: 4px 8px;
+		border-radius: 10px;
+		margin-bottom: 6px;
+		font-weight: 600;
+		color: #357579;
+		}
+	  .enlarge-image-container {
+		display: none;
+		position: fixed;
+		top: 40%;
+		left: 40%;
+		transform: translate(-50%, -50%);
+		width: 30%;
+		height: 50%;
+		z-index: 9999;
+	  }
+	  .enlarge-image-container img{
+		max-width: 100%;
+		height: auto;
+		border-radius: 5%;
+	  }
+	  .oh-sticky-table{
+		max-height:50vh;
+	  }
+		.oh-modal_close--custom {
+		  border: none;
+		  background: none;
+		  font-size: 1.5rem;
+		  opacity: 0.7;
+		  position: absolute;
+		  top: 25px;
+		  right: 15px;
+		}
+	  .oh-tabs__tablist .oh-tabs__tab--active:nth-last-child(2) {
+		  border-right: 1px solid hsl(213deg,22%,84%);
+	  }
+	  .custom-dialog {
+		  max-width:1000px;
+		  max-height: 800px;
+	  }
+	  .file-validation {
+		  color: #4f5bd9;
+		  background-color: #d8e7f0;
+		  border-color: #d6e9c6;
+		  padding: 15px;
+		  border: 1px solid transparent;
+		  border-radius: 4px;
 
+	  }
+	  .oh-not-found {
+		  display: flex;
+		  justify-content: center;
+		  align-items: center;
+		  flex-direction: column;
+		  height: 50vh;
+		  opacity: 0.5;
+	  }
+	  .editable-input:read-only {
+		  color: hsl(0,0%,11%);
+		  background-color: transparent;
+		  border: none;
+		  height: 100%;
+		  border: 1px solid transparent;
+	  }
+	  .editable-input:read-only:hover {
+		  border: 1px solid hsl(213,22%,84%);
+	  }	.file-upload {
+			margin-top: 6px !important;
+			width: 34px !important;
+			height: 34px !important;
+			font-size: 1.75rem !important;
+		}
+		body {
+			background-color: #f9f9f9 !important;
+		}
+		.draft--dot {
+			background-color: grey;
+		}
+		.review_ongoing--dot {
+			background-color: orange;
+		}
+		.confirmed--dot {
+			background-color: rgb(103, 171, 238);
+		}
+		.paid--dot {
+			background-color: green;
+		}
+		.status-draft {
+			border-left: 3.4px solid grey !important; border-radius: 4px 0 0 4px;
+		}
+		.status-review_ongoing {
+			border-left: 3.4px solid orange !important;
+			border-radius: 4px 0 0 4px;
+		}
+		.status-confirmed {
+			border-left: 3.4px solid rgb(103, 171, 238) !important;
+			border-radius: 4px 0 0 4px;
+		}
+		.status-paid {
+			border-left: 3.4px solid green !important;
+			border-radius: 4px 0 0 4px;
+		}
+		.sent-to-employee {
+			background-color: yellowgreen;
+			color: white;
+		}
+		.at_risk--dot {
+			background-color: red;
+		}
+		.not_started--dot {
+			background-color: grey;
+		}
+		.behind--dot {
+			background-color: orange;
+		}
+		.closed--dot {
+			background-color: rgb(103, 171, 238);
+		}
+		.on_track--dot {
+			background-color: yellowgreen;
+		}
+		.status-At.Risk {
+			border-left: 3.4px solid red !important;
+			border-radius: 4px 0 0 4px;
+		}
+		.status-Not.Started {
+			border-left: 3.4px solid grey !important;
+			border-radius: 4px 0 0 4px;
+		}
+		.status-Behind {
+			border-left: 3.4px solid orange !important;
+			border-radius: 4px 0 0 4px; }
+		.status-Closed {
+			border-left: 3.4px solid rgb(103, 171, 238) !important;
+			border-radius: 4px 0 0 4px;
+		}
+		.status-On.Track {
+			border-left: 3.4px solid yellowgreen !important;
+			border-radius: 4px 0 0 4px;
+		}
+		.status-rejected {
+			border-left: 4px solid red !important;
+			border-radius: 5px 0 0 4px;
+		}
+		.status-cancelled {
+			border-left: 4px solid grey !important;
+			border-radius: 5px 0 0 4px;
+		}
+		.status-requested {
+			border-left: 4px solid orange !important;
+			border-radius: 5px 0 0 4px;
+		}
+		.status-approved {
+			border-left: 4px solid yellowgreen !important;
+			border-radius: 5px 0 0 4px;
+		}
+		.validated-True{
+			border-left: 3.4px solid yellowgreen !important;
+			border-radius: 4px 0 0 4px;
+
+		  }
+		  .validated-False {
+
+			border-left: 3.4px solid rgba(128, 128, 128, 0.482) !important;
+			border-radius: 4px 0 0 4px;
+
+
+		  }
+		  .bulk-request--dot {
+
+			background-color:rgb(31 122 220 / 48%);
+		  }
+		.diff-cell{
+		  background: rgba(255, 166, 0, 0.158);
+		}
+		.validated--dot{
+			background-color:yellowgreen;
+		  }
+		  .not-validated--dot{
+			background-color:rgba(128, 128, 128, 0.482);
+		  }
+</style>
+
+</style>
+{% include "generic/components.html" %}
+<div id="enlargeImageContainer"></div>
+
+<div class="oh-wrapper"  hx-get="{% url 'employee-profile' request.user.employee_get.id  %}" hx-trigger="load">
+</div>
+
+<div class="oh-checkpoint-badge mb-2"
+id="selectedInstances"
+data-ids="[]"
+data-clicked=""
+style="display: none">
+</div>
+<div class="oh-checkpoint-badge mb-2"
+id="shiftselectedInstancesIndividual"
+data-ids="[]"
+data-clicked=""
+style="display: none">
+</div>
+<div class="oh-modal" id="TaskTimesheetModal" role="dialog" aria-labelledby="TaskTimesheetModal" aria-hidden="true">
+    <div class="oh-modal__dialog" style="max-width:1350px" id="TaskTimesheetTarget"></div>
+
+</div>
+
+<div class="oh-modal" id="addTimesheetModal" role="dialog" aria-labelledby="addTimesheetModal" aria-hidden="true"
+    style="z-index: 1022;">
+    <div class="oh-modal__dialog" id="addTimesheetModalBody">
+
+    </div>
+</div>
+
+<div class="oh-activity-sidebar"
+id="activitySidebar"
+style="z-index: 1000">
+<div class="oh-activity-sidebar__body"
+	id="commentContainer">
+</div>
+</div>
+
+<div
+    class="oh-modal"
+    id="groupAssign"
+    role="dialog"
+    aria-labelledby="groupAssign"
+    aria-hidden="true"
+  >
+    <div class="oh-modal__dialog" >
+      <div class="oh-modal__dialog-header">
+        <h2 class="oh-modal__dialog-title" id="editModal1ModalLabel">
+          {% trans "Group Assign" %}
+        </h2>
+        <button class="oh-modal__close" aria-label="Close">
+          <ion-icon name="close-outline"></ion-icon>
+        </button>
+      </div>
+      <div class="oh-modal__dialog-body" id="groupAssignBody">
+
+      </div>
+    </div>
+  </div>
+
+<div class="oh-modal"
+id="editValidateAttendanceRequest"
+role="dialog"
+aria-labelledby="editValidateAttendanceRequest"
+aria-hidden="true">
+<div class="oh-modal__dialog">
+	<div class="oh-modal__dialog-header">
+		<h2 class="oh-modal__dialog-title"
+			id="addEmployeeModalLabel">
+			{% trans "Validate Attendances Request" %}
+		</h2>
+		<button
+			class="oh-modal_close--custom"
+			onclick="event.stopPropagation(); var modalElement = this.closest('.oh-modal'); modalElement.classList.toggle('oh-modal--show');">
+			<ion-icon name="close-outline"></ion-icon>
+		</button>
+	</div>
+	<div class="oh-modal__dialog-body"
+		id="editValidateAttendanceRequestModalBody">
+	</div>
+</div>
+</div>
+
+
+<div class="oh-modal"
+id="addBonusModal"
+role="dialog"
+aria-hidden="true">
+<div class="oh-modal__dialog"
+	id="addBonusModalBody">
+</div>
+</div>
+
+
+<div class="oh-modal"
+id="rejectModal"
+role="dialog"
+aria-labelledby="rejectModal"
+aria-hidden="true">
+<div class="oh-modal__dialog">
+	<div class="oh-modal__dialog-header">
+		<h2 class="oh-modal__dialog-title"
+			id="editModal1ModalLabel">
+			{% trans "Rejection" %}
+			<button
+				class="oh-modal_close--custom"
+				onclick="$('#rejectModal').removeClass('oh-modal--show');"
+				aria-label="Close"
+				style="margin-left:80%; border:none; background:none;">
+				<ion-icon name="close-outline"></ion-icon>
+			</button>
+		</h2>
+	</div>
+	<div class="oh-modal__dialog-body"
+		id="rejectForm">
+	</div>
+</div>
+</div>
+
+
+
+{% comment %} <div class="oh-wrapper">
 <div class="oh-wrapper" id="profile-view">
 	<div id="enlargeImageContainer"></div>
 	<div class="oh-card mt-4 mb-5">
@@ -360,13 +669,144 @@
 		</div>
 
 	</div>
-</div>
+</div> {% endcomment %}
 <script src="{% static 'employee/search.js' %}"></script>
 <script src="{% static 'basedOn.js' %}"></script>
 <script>
-	toggleColumns("employee-tab-profile","fieldContainerTable")
+	{% comment %} toggleColumns("employee-tab-profile","fieldContainerTable")
 	if (!localStorage.getItem("employee_tab_profile")) {
 		  $("#fieldContainerTable").find("[type=checkbox]").prop("checked",true).change()
-	  }
+	  } {% endcomment %}
+	  $(document).ready(function () {
+		var exists = $("#view-container").find(".oh-general__tab-link--active").length;
+		if (!exists) {
+			$("#view-container").find(".oh-general__tab-link")[0].click();
+		}
+	});
+
+	toggleColumns("employee-tab", "fieldContainerTable");
+
+	if (!localStorage.getItem("employee_tab")) {
+		$("#fieldContainerTable").find("[type=checkbox]").prop("checked", true).change();
+	}
+
+	function handleFormSubmit() {
+		$('#successMessage').show();
+		setTimeout(function () {
+			$('#successMessage').hide();
+		}, 3000);
+		return false; // Prevent the default form submission
+	}
+
+	function submitForm(elem) {
+		$(elem).siblings('.add_more_submit').click();
+	}
+
+	function enlargeDoc(src, $element) {
+		var enlargeDocContainer = $element.parents().closest("li").find("#enlargeDocContainer");
+		enlargeDocContainer.empty();
+		var style = 'width:100%; height:90%; box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.2); background:white';
+		var enlargedImage = $('<iframe>').attr({ src: src, style: style });
+		var name = $('<span>').text(src.split('/').pop().replace(/_/g, ' '));
+		enlargeDocContainer.append(enlargedImage);
+		enlargeDocContainer.append(name);
+		setTimeout(function () {
+			enlargeDocContainer.show();
+			const iframe = document.querySelector('iframe').contentWindow;
+			var iframe_document = iframe.document;
+			var iframe_image = iframe_document.getElementsByTagName('img')[0];
+			$(iframe_image).attr('style', 'width:100%; height:100%;');
+		}, 100);
+	}
+
+	function checkSelected(names, target, initial = false) {
+		names = JSON.parse(`${names}`);
+		$.each(names, function (indexInArray, valueOfElement) {
+			if (!initial) {
+				$(target).find(`[value=${valueOfElement}]`).prop("checked", true).change();
+			} else {
+				$(target).find(`[value=${valueOfElement}]`).prop("checked", true);
+			}
+		});
+	}
+
+	function updateBadge(element = false) {
+		var panels = $(".panel");
+		$.each(panels, function (indexInArray, valueOfElement) {
+			var check = $(valueOfElement).find("[name=permissions]:checked").length;
+			$(valueOfElement).prev().find(".oh-badge.permission-badge").html(check);
+			$(valueOfElement).prev().find(".oh-badge.permission-badge").attr("title", check + " Permissions");
+		});
+
+		var permissionLine = $(".oh-sticky-table__tr");
+		$.each(permissionLine, function (index, value) {
+			var check = $(value).find("[name=permissions]:checked").length;
+			if (check === 4) {
+				$(value).find(".row-permission").prop("checked", true);
+			}
+		});
+
+		var permissionApps = $(".oh-sticky-table__tbody");
+		$.each(permissionApps, function (index, value) {
+			var total_permission_count = $(value).find("[name=permissions]").length;
+			var checked_permission_count = $(value).find("[name=permissions]:checked").length;
+			if (checked_permission_count === total_permission_count) {
+				$(this).siblings(".oh-sticky-table__thead").find(".row-permission__select-all").prop("checked", true);
+			} else {
+				$(this).siblings(".oh-sticky-table__thead").find(".row-permission__select-all").prop("checked", false);
+			}
+		});
+	}
+
+	function hideEnlargeDoc() {
+		var enlargeDocContainer = $('.enlargeDocContainer');
+		enlargeDocContainer.empty();
+	}
+
+	$(document).on('click', function (event) {
+		if (!$(event.target).closest('#enlargeDocContainer').length) {
+			hideEnlargeDoc();
+		}
+	});
+	{% if "attendance"|app_installed %}
+
+	function validateHours(url) {
+		$.ajax({
+			url: "{% url 'active-tab' %}",
+			method: "GET",
+			data: {
+				path: "{% url 'attendances-tab-view' %}",
+				target: `li[data-target="#attendances-tab1"]`
+			},
+			success: function(response) {
+				window.location.href = url;
+			},
+			error: function(xhr, status, error) {
+				console.error(error);
+			}
+		});
+	}
+
+	 function validateOTHours(url) {
+		$.ajax({
+			url: "{% url 'active-tab' %}",
+			method: "GET",
+			data: {
+				path: "{% url 'attendances-tab-view' %}",
+				target: `li[data-target="#attendances-tab2"]`
+			},
+			success: function(response) {
+				window.location.href = url;
+			},
+			error: function(xhr, status, error) {
+				console.error(error);
+			}
+		});
+	}
+	{% endif %}
+
+	{% if request.GET.deleted %}
+	$('#reloadMessagesButton').click();
+	{% endif %}
 </script>
 {% endblock content %}
diff --git a/employee/templates/employee/view/individual.html b/employee/templates/employee/view/individual.html
index 7645da068..d5e9768bc 100644
--- a/employee/templates/employee/view/individual.html
+++ b/employee/templates/employee/view/individual.html
@@ -1,63 +1,233 @@
-{% extends 'index.html' %}{% load static %} {% block content %}
+{% extends "index.html" %}
 {% load i18n %}
 {% load static %}
 {% load basefilters %}
 {% load horillafilters %}
 
-<script>
-	var showSearch = false
-</script>
+{% block content %}
+    {% include "generic/components.html" %}
 
+    <div class="oh-checkpoint-badge mb-2"
+    id="selectedInstances"
+    data-ids="[]"
+    data-clicked=""
+    style="display: none">
+    </div>
+    <div class="oh-checkpoint-badge mb-2"
+    id="shiftselectedInstancesIndividual"
+    data-ids="[]"
+    data-clicked=""
+    style="display: none">
+    </div>
+    <div class="oh-wrapper"
+        hx-get="/employee/profile{{ request.path }}?{{ request.GET.urlencode }}&instance_ids={{ request.GET.instance_ids }}"
+        hx-trigger="load">
+    </div>
+    <div
+    class="oh-modal"
+    id="groupAssign"
+    role="dialog"
+    aria-labelledby="groupAssign"
+    aria-hidden="true"
+  >
+    <div class="oh-modal__dialog" >
+      <div class="oh-modal__dialog-header">
+        <h2 class="oh-modal__dialog-title" id="editModal1ModalLabel">
+          {% trans "Employee Group Assign" %}
+        </h2>
+        <button class="oh-modal__close" aria-label="Close">
+          <ion-icon name="close-outline"></ion-icon>
+        </button>
+      </div>
+      <div class="oh-modal__dialog-body" id="groupAssignBody">
+
+      </div>
+    </div>
+  </div>
+
+    <script>
+        $(document).ready(function () {
+            var exists = $("#view-container").find(".oh-general__tab-link--active").length;
+            if (!exists) {
+                $("#view-container").find(".oh-general__tab-link")[0].click();
+            }
+        });
+
+        toggleColumns("employee-tab", "fieldContainerTable");
+
+        if (!localStorage.getItem("employee_tab")) {
+            $("#fieldContainerTable").find("[type=checkbox]").prop("checked", true).change();
+        }
+
+        function handleFormSubmit() {
+            $('#successMessage').show();
+            setTimeout(function () {
+                $('#successMessage').hide();
+            }, 3000);
+            return false; // Prevent the default form submission
+        }
+
+        function submitForm(elem) {
+            $(elem).siblings('.add_more_submit').click();
+        }
+
+        function enlargeDoc(src, $element) {
+            var enlargeDocContainer = $element.parents().closest("li").find("#enlargeDocContainer");
+            enlargeDocContainer.empty();
+            var style = 'width:100%; height:90%; box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.2); background:white';
+            var enlargedImage = $('<iframe>').attr({ src: src, style: style });
+            var name = $('<span>').text(src.split('/').pop().replace(/_/g, ' '));
+            enlargeDocContainer.append(enlargedImage);
+            enlargeDocContainer.append(name);
+            setTimeout(function () {
+                enlargeDocContainer.show();
+                const iframe = document.querySelector('iframe').contentWindow;
+                var iframe_document = iframe.document;
+                var iframe_image = iframe_document.getElementsByTagName('img')[0];
+                $(iframe_image).attr('style', 'width:100%; height:100%;');
+            }, 100);
+        }
+
+        function checkSelected(names, target, initial = false) {
+            names = JSON.parse(`${names}`);
+            $.each(names, function (indexInArray, valueOfElement) {
+                if (!initial) {
+                    $(target).find(`[value=${valueOfElement}]`).prop("checked", true).change();
+                } else {
+                    $(target).find(`[value=${valueOfElement}]`).prop("checked", true);
+                }
+            });
+        }
+
+        function updateBadge(element = false) {
+            var panels = $(".panel");
+            $.each(panels, function (indexInArray, valueOfElement) {
+                var check = $(valueOfElement).find("[name=permissions]:checked").length;
+                $(valueOfElement).prev().find(".oh-badge.permission-badge").html(check);
+                $(valueOfElement).prev().find(".oh-badge.permission-badge").attr("title", check + " Permissions");
+            });
+
+            var permissionLine = $(".oh-sticky-table__tr");
+            $.each(permissionLine, function (index, value) {
+                var check = $(value).find("[name=permissions]:checked").length;
+                if (check === 4) {
+                    $(value).find(".row-permission").prop("checked", true);
+                }
+            });
+
+            var permissionApps = $(".oh-sticky-table__tbody");
+            $.each(permissionApps, function (index, value) {
+                var total_permission_count = $(value).find("[name=permissions]").length;
+                var checked_permission_count = $(value).find("[name=permissions]:checked").length;
+                if (checked_permission_count === total_permission_count) {
+                    $(this).siblings(".oh-sticky-table__thead").find(".row-permission__select-all").prop("checked", true);
+                } else {
+                    $(this).siblings(".oh-sticky-table__thead").find(".row-permission__select-all").prop("checked", false);
+                }
+            });
+        }
+
+        function hideEnlargeDoc() {
+            var enlargeDocContainer = $('.enlargeDocContainer');
+            enlargeDocContainer.empty();
+        }
+
+        $(document).on('click', function (event) {
+            if (!$(event.target).closest('#enlargeDocContainer').length) {
+                hideEnlargeDoc();
+            }
+        });
+        {% if "attendance"|app_installed %}
+        function validateHours(url) {
+            $.ajax({
+                url: "{% url 'active-tab' %}",
+                method: "GET",
+                data: {
+                    path: "{% url 'attendances-tab-view' %}",
+                    target: `li[data-target="#attendances-tab1"]`
+                },
+                success: function(response) {
+                    window.location.href = url;
+                },
+                error: function(xhr, status, error) {
+                    console.error(error);
+                }
+            });
+        }
+
+        function validateOTHours(url) {
+            $.ajax({
+                url: "{% url 'active-tab' %}",
+                method: "GET",
+                data: {
+                    path: "{% url 'attendances-tab-view' %}",
+                    target: `li[data-target="#attendances-tab2"]`
+                },
+                success: function(response) {
+                    window.location.href = url;
+                },
+                error: function(xhr, status, error) {
+                    console.error(error);
+                }
+            });
+        }
+        {% endif %}
+
+        {% if request.GET.deleted %}
+        $('#reloadMessagesButton').click();
+        {% endif %}
+    </script>
+
+
+
+<!-- Inline styles -->
 <style>
-	.oh-general__tab {
+    .oh-general__tab {
 		margin-bottom: 15px;
-	}
-
-	.file-upload {
+	 }
+	 .resign-status {
+		background: #73bbe12b;
+		font-size: 0.8rem;
+		padding: 4px 8px;
+		border-radius: 10px;
+		margin-bottom: 6px;
+		font-weight: 600;
+		color: #357579;
+		}
+    .file-upload {
 		margin-top: 6px !important;
 		width: 34px !important;
 		height: 34px !important;
 		font-size: 1.75rem !important;
-	}
-	.enlarge-image-container {
+	 }
+    .enlarge-image-container {
 		display: none;
 		position: fixed;
 		top: 40%;
 		left: 40%;
 		transform: translate(-50%, -50%);
 		width: 30%;
-		height: 50%;
-		z-index: 9999;
+		height: 50%; z-index: 9999;
 	}
-
-	.enlarge-image-container img {
+    .enlarge-image-container img {
 		max-width: 100%;
 		height: auto;
-		border-radius: 5%;
-	}
-
-	.oh-sticky-table {
+		border-radius: 5%; }
+    .oh-sticky-table {
 		max-height: 65vh;
 	}
 
-	.oh-sticky-table__sd {
+    .oh-sticky-table__sd {
 		z-index: 11 !important;
-
 	}
-
-	.oh-sticky-table__right {
-		position: sticky;
-		right: 0;
+    .oh-sticky-table__right {
+		position: sticky; right: 0;
 		background-color: #fff;
-		;
 	}
-
-	.oh-sticky-table__top {
+    .oh-sticky-table__top {
 		z-index: 12 !important;
-		top: 0;
-	}
-
-	.oh-modal_close--custom {
+		top: 0; }
+    .oh-modal_close--custom {
 		border: none;
 		background: none;
 		font-size: 1.5rem;
@@ -66,463 +236,178 @@
 		top: 25px;
 		right: 15px;
 	}
-
-	.oh-tabs__tablist .oh-tabs__tab--active:nth-last-child(2) {
+    .oh-tabs__tablist .oh-tabs__tab--active:nth-last-child(2) {
 		border-right: 1px solid hsl(213deg, 22%, 84%);
 	}
+    .custom-dialog {
+		max-width: 1000px;
+		max-height: 800px;
+	}
+    .file-validation {
+		color: #4f5bd9;
+		background-color: #d8e7f0;
+		border-color: #d6e9c6;
+		padding: 15px; border: 1px solid
+		transparent; border-radius: 4px; }
+    .oh-not-found {
+		display: flex; justify-content: center;
+		align-items: center;
+		flex-direction: column;
+		height: 50vh; opacity: 0.5;
+	}
 
 	.custom-dialog {
 		max-width: 1000px;
 		max-height: 800px;
 	}
-
-	.file-validation {
-		color: #4f5bd9;
-		background-color: #d8e7f0;
-		border-color: #d6e9c6;
-		padding: 15px;
-		border: 1px solid transparent;
-		border-radius: 4px;
-
-	}
-
-	.oh-not-found {
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		flex-direction: column;
-		height: 50vh;
-		opacity: 0.5;
-	}
-
-	.editable-input:read-only {
-		color: hsl(0, 0%, 11%);
-		background-color: transparent;
-		border: none;
-		height: 100%;
-		border: 1px solid transparent;
-	}
-
-	.editable-input:read-only:hover {
-		border: 1px solid hsl(213, 22%, 84%);
-	}
-
-	body {
+    body {
 		background-color: #f9f9f9 !important;
 	}
+    .draft--dot {
+		background-color: grey;
+	}
+    .review_ongoing--dot {
+		background-color: orange;
+	}
+    .confirmed--dot {
+		background-color: rgb(103, 171, 238);
+	}
+    .paid--dot {
+		background-color: green;
+	}
+    .status-draft {
+		border-left: 3.4px solid grey !important; border-radius: 4px 0 0 4px;
+	}
+    .status-review_ongoing {
+		border-left: 3.4px solid orange !important;
+		border-radius: 4px 0 0 4px;
+	}
+    .status-confirmed {
+		border-left: 3.4px solid rgb(103, 171, 238) !important;
+		border-radius: 4px 0 0 4px;
+	}
+    .status-paid {
+		border-left: 3.4px solid green !important;
+		border-radius: 4px 0 0 4px;
+	}
+    .sent-to-employee {
+		background-color: yellowgreen;
+		color: white;
+	}
+    .at_risk--dot {
+		background-color: red;
+	}
+    .not_started--dot {
+		background-color: grey;
+	}
+    .behind--dot {
+		background-color: orange;
+	}
+    .closed--dot {
+		background-color: rgb(103, 171, 238);
+	}
+    .on_track--dot {
+		background-color: yellowgreen;
+	}
+    .status-At.Risk {
+		border-left: 3.4px solid red !important;
+		border-radius: 4px 0 0 4px;
+	}
+    .status-Not.Started {
+		border-left: 3.4px solid grey !important;
+		border-radius: 4px 0 0 4px;
+	}
+    .status-Behind {
+		border-left: 3.4px solid orange !important;
+		border-radius: 4px 0 0 4px; }
+    .status-Closed {
+		border-left: 3.4px solid rgb(103, 171, 238) !important;
+		border-radius: 4px 0 0 4px;
+	}
+    .status-On.Track {
+		border-left: 3.4px solid yellowgreen !important;
+		border-radius: 4px 0 0 4px;
+	}
+    .status-rejected {
+		border-left: 4px solid red !important;
+		border-radius: 5px 0 0 4px;
+	}
+    .status-cancelled {
+		border-left: 4px solid grey !important;
+		border-radius: 5px 0 0 4px;
+	}
+    .status-requested {
+		border-left: 4px solid orange !important;
+		border-radius: 5px 0 0 4px;
+	}
+    .status-approved {
+		border-left: 4px solid yellowgreen !important;
+		border-radius: 5px 0 0 4px;
+	}
+    .approved--dot{
+        background-color:yellowgreen;
+      }
+      .canceled--dot{
+        background-color:red;
+      }
+      .requested--dot{
+        background-color:orange;
+      }
+      .approved-True{
+        border-left: 3.4px solid yellowgreen !important;
+        border-radius: 4px 0 0 4px;
+
+      }
+      .canceled-True {
+
+        border-left: 3.4px solid red !important;
+        border-radius: 4px 0 0 4px;
+
+      }
+      .requested-False-False {
+
+        border-left: 3.4px solid orange !important;
+        border-radius: 4px 0 0 4px;
+
+      }
+      .validated--dot{
+        background-color:yellowgreen;
+      }
+      .not-validated--dot{
+        background-color:rgba(128, 128, 128, 0.482);
+      }
+
+      .validated-True{
+        border-left: 3.4px solid yellowgreen !important;
+        border-radius: 4px 0 0 4px;
+
+      }
+      .validated-False {
+
+        border-left: 3.4px solid rgba(128, 128, 128, 0.482) !important;
+        border-radius: 4px 0 0 4px;
+
+
+      }
+      .bulk-request--dot {
+
+        background-color:rgb(31 122 220 / 48%);
+      }
+    .diff-cell{
+      background: rgba(255, 166, 0, 0.158);
+    }
+    .validated--dot{
+        background-color:yellowgreen;
+      }
+      .not-validated--dot{
+        background-color:rgba(128, 128, 128, 0.482);
+      }
+
+
 </style>
 
 <div id="enlargeImageContainer"></div>
 
-<div class="d-flex" style="flex-direction: row-reverse;">
-	<div id="successMessage" style="display:none;" class="oh-alert oh-alert--animated oh-alert--success w-25">
-		{% trans "Report added successfully." %}
-	</div>
-</div>
-
-<div class="oh-wrapper" id="view-container">
-	<div class="oh-card mt-4 mb-5">
-		<div class="d-flex flex-row-reverse align-items-center">
-			<div class="oh-dropdown" x-data="{open: false}">
-				<button class="oh-btn oh-stop-prop oh-btn--transparent oh-accordion-meta__btn" style="margin-bottom:5px"
-					@click="open = !open" @click.outside="open = false">
-					<ion-icon name="settings-outline" class="oh-navbar__icon md hydrated" role="img"
-						aria-label="settings outline"></ion-icon>
-				</button>
-				<div class="oh-dropdown__menu oh-dropdown__menu--right" style="min-width:250px" x-show="open">
-					<ul class="oh-dropdown__items">
-						{% if perms.employee.change_employee or employee.employee_work_info.reporting_manager_id == request.user.employee_get %}
-							<li class="oh-dropdown__item">
-								<a href="{% url 'employee-view-update' employee.id %}" class="">
-									<img src="{% static 'images/ui/edit_btn.png' %}" style="width: 20px; height: auto"
-										title="{% trans 'Edit' %}" />
-									<button style="border: none; background: transparent;">{% trans "Edit" %}</button>
-								</a>
-							</li>
-						{% endif %}
-
-						{% if enabled_block_unblock and perms.employee.change_employee %}
-							{% if employee.employee_user_id.is_active %}
-								{% if not employee.employee_user_id.is_superuser %}
-									<li class="oh-dropdown__item">
-										<form action="{% url 'employee-account-block-unblock' employee.id %}"
-											onsubmit="return confirm('{% trans "Do you really want to prevent this employee from
-											accessing and logging into this webpage?" %}');">
-											{% csrf_token %}
-											<img src="{% static 'images/ui/block-user.png' %}" style="width: 20px; height: 20px; ">
-											<button type="submit" style=" border: none; background: transparent;">
-												{% trans "Block Account" %}
-											</button>
-										</form>
-									</li>
-								{% endif %}
-							{% else %}
-								{% if not employee.employee_user_id.is_superuser %}
-									<li class="oh-dropdown__item">
-										<form action="{% url 'employee-account-block-unblock' employee.id %}"
-											onsubmit="return confirm('{% trans " Do you really want to allow this employee to access and log into this webpage?" %}');">
-											{% csrf_token %}
-											<img src="{% static 'images/ui/unlock.png' %}" style="width: 30px; height: 27px;">
-											<button type="submit" style="  border: none; background: transparent;">
-												{% trans "Un-Block Account" %}
-											</button>
-										</form>
-									</li>
-								{% endif %}
-							{% endif %}
-						{% endif %}
-
-						{% if perms.employee.add_employee or employee.employee_work_info.reporting_manager_id == request.user.employee_get %}
-							<li class="oh-dropdown__item">
-								<form action="{% url 'employee-reset-password' %}" method="post" role="button"
-									style="display: flex;">
-									<ion-icon name="key-outline" style="width: 20px; height: 20px; "></ion-icon>
-									{% csrf_token %}
-									<input name="email" hidden value="{{employee.employee_user_id.username}}" />
-									<button type="submit" style="border: none; background: transparent;">{% trans "Send password reset link" %} </button>
-								</form>
-							</li>
-						{% endif %}
-					</ul>
-				</div>
-			</div>
-
-			{% if next != None %}
-				<a href="{% url 'employee-view-individual' next %}" title="{% trans "Next Employee" %}"
-					data-action="next"
-					style="color:hsl(8, 77%, 56%);" class="ms-1 fw-bold">
-					<ion-icon name="arrow-forward-circle-outline" style="font-size:35px;"></ion-icon>
-				</a>
-			{% else %}
-				<a href="#" style="color:hsl(8 50% 83% / 1);" class="ms-1 fw-bold oh-btn--disabled">
-					<ion-icon name="arrow-forward-circle-outline" style="font-size:35px;"></ion-icon>
-				</a>
-			{% endif %}
-
-			{% if previous != None %}
-				<a href="{% url 'employee-view-individual' previous %}" title="{% trans "Previous Employee" %}"
-					data-action="previous" style="color:hsl(8, 77%, 56%);" class="ms-1 me-2 fw-bold">
-					<ion-icon name="arrow-back-circle-outline" style="font-size:35px;"></ion-icon>
-				</a>
-			{% else %}
-				<a href="#" style="color:hsl(8 50% 83% / 1);" class="ms-1 me-2 fw-bold oh-btn--disabled">
-					<ion-icon name="arrow-back-circle-outline" style="font-size:35px;"></ion-icon>
-				</a>
-			{% endif %}
-		</div>
-
-		<div class="row">
-			<div class="col-12 col-sm-12 col-md-12 col-lg-4">
-				<div class="d-flex align-items-center">
-					<div class="oh-profile oh-profile--lg me-3">
-						<div class="oh-profile__avatar">
-							<img src="{{employee.get_avatar}}" class="oh-profile-section__avatar"
-								style="border-radius: 10%;" alt="Username" {% if employee.employee_profile %}
-								onmouseover="enlargeImager(this)
-								$('#enlargeImageContainer').addClass('enlarge-image-container');" onmouseout="hideEnlargeImager()
-								$('#enlargeImageContainer').removeClass('enlarge-image-container');" {% endif %} />
-						</div>
-						{% if "attendance"|app_installed %}
-							{% if employee.check_online %}
-								<span class="oh-profile__active-badge oh-profile__active-badge--secondary"
-									style="background-color: yellowgreen;" title="{% trans 'Online' %}">
-								</span>
-							{% else %}
-								<span class="oh-profile__active-badge oh-profile__active-badge--secondary"
-									style="background-color: rgba(128, 128, 128, 0.482);" title="{% trans 'Offline' %}">
-								</span>
-							{% endif %}
-						{% endif %}
-					</div>
-
-					<div class="oh-profile__info-container">
-						<h1 class="oh-profile__info-name">{{employee}}</h1>
-						<p class="oh-profile__info-designation">
-							{{employee.job_position_id}}
-						</p>
-					</div>
-				</div>
-			</div>
-
-			<div class="col-12 col-sm-12 col-md-12 col-lg-8 d-flex align-items-center">
-				<ul class="oh-profile__info-list">
-					<li class="oh-profile__info-list-item">
-						<span class="oh-profile__info-label">
-							<ion-icon name="mail-outline"></ion-icon>
-							<span>{% trans "Work Email" %}:</span>
-						</span>
-						<span class="oh-profile__info-value">{{employee.employee_work_info.email}}</span>
-					</li>
-
-					<li class="oh-profile__info-list-item">
-						<span class="oh-profile__info-label">
-							<ion-icon name="mail-outline"></ion-icon>
-							<span>{% trans "Email" %}:</span>
-						</span>
-						<span class="oh-profile__info-value">
-							{% if perms.employee.view_employee or request.user == employee.employee_user_id %}
-							{{employee.email}}
-							{% else %}
-							**********
-							{% endif %}
-						</span>
-					</li>
-
-					<li class="oh-profile__info-list-item">
-						<span class="oh-profile__info-label">
-							<ion-icon name="call-outline"></ion-icon>
-							<span>{% trans "Work Phone" %}:</span>
-						</span>
-						<span class="oh-profile__info-value">{{employee.employee_work_info.mobile}}</span>
-					</li>
-
-					<li class="oh-profile__info-list-item">
-						<span class="oh-profile__info-label">
-							<ion-icon name="call-outline"></ion-icon>
-							<span>{% trans "Phone" %}:</span>
-						</span>
-						<span class="oh-profile__info-value">{% if perms.employee.view_employee or request.user == employee.employee_user_id %}
-							{{employee.phone}}
-							{% else %}
-							**********
-							{% endif %}
-						</span>
-					</li>
-				</ul>
-			</div>
-		</div>
-
-		<div class="oh-table_sticky--wrapper">
-			{% if request.user.is_superuser or request.user|check_manager:employee or request.user == employee.employee_user_id %}
-				<div class="oh-sticky-dropdown--header" style="border:none;">
-					<div class="oh-dropdown" x-data="{open: false}">
-						<button class="oh-sticky-dropdown_btn " @click="open = !open"><ion-icon
-								name="ellipsis-vertical-sharp" role="img" class="md hydrated"
-								aria-label="ellipsis vertical sharp"></ion-icon></button>
-						<div class="oh-dropdown__menu oh-sticky-table_dropdown" x-show="open" @click.outside="open = false">
-							<ul class="oh-dropdown__items" id="fieldContainerTable">
-							</ul>
-						</div>
-					</div>
-				</div>
-			{% endif %}
-			<div id="employee-tab" data-table-name="employee_tab">
-				<div class="row">
-					<div class="col-sm-12 col-md-12 col lg-12">
-						<ul class="oh-general__tabs oh-general__tabs--border oh-general__tabs--profile oh-general__tabs--no-grow oh-profile-section__tab mt-5">
-
-							<li class="oh-general__tab">
-								<a hx-get={% url 'about-tab' employee.id %} hx-target="#personal_target"
-									class="oh-general__tab-link" data-action="general-tab" role="button"
-									data-target="#personal_target">{% trans "About" %}</a>
-							</li>
-
-							{% if request.user == employee.employee_user_id or request.user|check_manager:employee or perms.attendance.view_worktyperequest or perms.attendance.view_shiftrequest %}
-								<li data-cell-index="10" data-cell-title="{% trans 'Work Type & Shift' %}"
-									class="oh-general__tab">
-									<a hx-get={% url 'shift-tab' employee.id %} hx-target="#shift_target"
-										data-action="general-tab" data-target="#shift_target"
-										class="oh-general__tab-link pointer" role="button">
-										{% trans "Work Type & Shift"%}
-									</a>
-								</li>
-							{% endif %}
-
-							{% if "attendance"|app_installed %}
-								{% if perms.attendance.view_attendance or request.user|check_manager:employee %}
-								<li data-cell-index="11" data-cell-title="{% trans 'Attendance' %}" class="oh-general__tab">
-									<a hx-get="{% url 'attendance-tab' employee.id %}" hx-target="#attendance_target"
-										data-action="general-tab" data-target="#attendance_target"
-										class="oh-general__tab-link" role="button">{% trans "Attendance" %}</a>
-								</li>
-								{% endif %}
-							{% endif %}
-
-							{% if "leave"|app_installed %}
-								{% if perms.leave.view_leaverequest or request.user|check_manager:employee or request.user == employee.employee_user_id %}
-									<li data-cell-index="12" data-cell-title="{% trans 'Leave' %}" class="oh-general__tab">
-										<a hx-get="{% url 'leave-tab' employee.id %}" hx-target="#leave"
-											class="oh-general__tab-link" data-action="general-tab" data-target="#leave"
-											role="button">{% trans "Leave" %}</a>
-									</li>
-								{% endif %}
-							{% endif %}
-
-							{% if "payroll"|app_installed %}
-								{% if perms.payroll.view_payslip or request.user == employee.employee_user_id %}
-									<li data-cell-index="13" data-cell-title="{% trans 'Payroll' %}" class="oh-general__tab">
-										<a href="#" class="oh-general__tab-link" data-action="general-tab"
-											data-target="#payroll">{% trans "Payroll" %}</a>
-									</li>
-								{% endif %}
-
-								{% if perms.payroll.view_payslip or request.user == employee.employee_user_id %}
-									<li data-cell-index="14" data-cell-title="{% trans 'Allowance & Deduction' %}"
-										class="oh-general__tab">
-										<a hx-get="{% url 'allowances-deductions-tab' employee.id %}"
-											hx-target="#allowance_deduction" data-action="general-tab"
-											data-target="#allowance_deduction" class="oh-general__tab-link" role="button">
-											{% trans "Allowance & Deduction" %}
-										</a>
-									</li>
-								{% endif %}
-							{% endif %}
-
-							{% if "attendance"|app_installed or "leave"|app_installed %}
-								{% if perms.attendance.view_penaltyaccount or request.user == employee.employee_user_id %}
-									<li data-cell-index="23" data-cell-title="{% trans " Penalty Account" %}" class="oh-general__tab">
-										<a data-action="general-tab" data-target="#penaltyTarget" id="penalty" class="oh-general__tab-link" role="button">{% trans "Penalty Account" %}</a>
-									</li>
-								{% endif %}
-							{% endif %}
-
-							{% if perms.employee.view_historicalemployeeworkinformation or request.user|check_manager:employee %}
-								<li data-cell-index="15" data-cell-title="{% trans 'History' %}" class="oh-general__tab">
-									<a href="#" class="oh-general__tab-link" data-action="general-tab"
-										data-target="#history">{% trans "History" %}</a>
-								</li>
-							{% endif %}
-
-							{% if "asset"|app_installed %}
-								{% if perms.asset.view_asset or request.user|check_manager:employee or request.user == employee.employee_user_id %}
-									<li data-cell-index="16" data-cell-title="{% trans 'Assets' %}" class="oh-general__tab">
-										<a hx-get={% url 'asset-tab' employee.id %} hx-target="#asset_target"
-											data-action="general-tab" data-target="#asset_target"
-											class="oh-general__tab-link pointer" role="button">{% trans "Assets" %}
-										</a>
-									</li>
-								{% endif %}
-							{% endif %}
-
-							{% if "pms"|app_installed %}
-								{% if perms.pms.view_feedback or request.user|check_manager:employee or request.user == employee.employee_user_id %}
-									<li data-cell-index="17" data-cell-title="{% trans 'Performance' %}" class="oh-general__tab">
-										<a hx-get={% url 'performance-tab' employee.id %} hx-target="#performance_target"
-											data-action="general-tab" data-target="#performance_target"
-											class="oh-general__tab-link" role="button">{% trans "Performance" %}
-										</a>
-									</li>
-								{% endif %}
-							{% endif %}
-
-							{% if perms.auth.view_permission or perms.auth.view_group %}
-							<li data-cell-index="18" data-cell-title="{% trans 'Groups & Permissions' %}"
-								class="oh-general__tab">
-								<a data-action="general-tab" data-target="#permission_tab_content"
-									hx-get="{% url 'employee-permission-assign' %}?profile_tab=true&employee_id={{employee.id}}"
-									hx-target="#permission_tab_content" class="oh-general__tab-link" role="button">
-									{% trans "Groups & Permissions" %}
-								</a>
-							</li>
-							{% endif %}
-
-							{% if perms.employee.view_employeenote or request.user|check_manager:employee %}
-								<li data-cell-index="19" data-cell-title="{% trans 'Note' %}" class="oh-general__tab">
-									<a hx-get={% url 'note-tab' employee.id %} hx-target="#note_target"
-										data-action="general-tab" data-target="#note_target" class="oh-general__tab-link"
-										role="button">{% trans "Note" %}
-									</a>
-								</li>
-							{% endif %}
-
-							{% if perms.horilla_documents.view_document or request.user == employee.employee_user_id %}
-								<li data-cell-index="20" data-cell-title="{% trans 'Documents' %}" class="oh-general__tab">
-									<a hx-get="{% url 'document-tab' employee.id %}?employee_view=true"
-										hx-target="#document_target" data-action="general-tab"
-										data-target="#document_target" class="oh-general__tab-link" role="button">
-										{% trans "Documents" %}
-									</a>
-								</li>
-							{% endif %}
-
-							{% if perms.employee.view_employee %}
-							<li class="oh-general__tab" data-cell-index="22" data-cell-title="{% trans 'Mail Log' %}">
-								<a hx-get="{% url 'employee-get-mail-log' %}?emp_id={{employee.id}}"
-									hx-target="#maillog" class="oh-general__tab-link" data-action="general-tab"
-									data-target="#maillog" role="button">{% trans "Mail Log" %}</a>
-							</li>
-							{% endif %}
-
-							{% if "payroll"|app_installed %}
-								{% if perms.employee.view_bonuspoint or request.user|check_manager:employee or request.user == employee.employee_user_id %}
-									<li data-cell-index="21" data-cell-title="{% trans 'Bonus' %}" class="oh-general__tab">
-										<a hx-get={% url 'bonus-points-tab' employee.id %} hx-target="#bonus_points_target"
-											data-action="general-tab" data-target="#bonus_points_target"
-											class="oh-general__tab-link" role="button">{% trans "Bonus Points" %}</a>
-									</li>
-								{% endif %}
-							{% endif %}
-						</ul>
-						<button
-							hx-get={% url 'bonus-points-tab' employee.id %} hx-target="#bonus_points_target" id="bonus-tab-button" hidden>
-						</button>
-
-						<div class="oh-general__tab-target oh-profile__info-tab mb-4" id="personal_target"> </div>
-
-						<div class="oh-general__tab-target oh-profile__info-tab mb-4 d-none" id="shift_target"></div>
-
-						<div class="oh-general__tab-target oh-profile__info-tab mb-4 d-none" id="bonus_points_target">
-							{% include "tabs/bonus_points.html" %}
-						</div>
-
-						<div class="oh-general__tab-target oh-profile__info-tab mb-4 d-none" id="note_target">
-							{% include "tabs/note_tab.html" %}
-						</div>
-
-						<div class="oh-general__tab-target oh-profile__info-tab mb-4 d-none" id="maillog"></div>
-
-						{% if "payroll"|app_installed %}
-							<div class="oh-general__tab-target oh-profile__info-tab mb-4 d-none" id="allowance_deduction"> </div>
-						{% endif %}
-
-						{% if "attendance"|app_installed %}
-							<div class="oh-general__tab-target oh-profile__info-tab mb-4 d-none" id="attendance_target"> </div>
-						{% endif %}
-
-						{% if "attendance"|app_installed or "leave"|app_installed %}
-							<div class="oh-general__tab-target oh-profile__info-tab mb-4" id="penaltyTarget">
-								{% include 'tabs/penalty_account.html' %}
-							</div>
-						{% endif %}
-
-						{% if "pms"|app_installed %}
-							<div class="oh-general__tab-target oh-profile__info-tab mb-4 d-none" id="performance_target"> </div>
-						{% endif %}
-
-						{% if "asset"|app_installed %}
-							<div class="oh-general__tab-target oh-profile__info-tab mb-4 d-none" id="asset_target"> </div>
-						{% endif %}
-
-						<div class="oh-general__tab-target oh-profile__info-tab mb-4 d-none" id="document_target"> </div>
-
-						{% if perms.auth.view_permission or perms.auth.view_group or request.user|is_reportingmanager or request.user == employee.employee_user_id %}
-							<div class="oh-general__tab-target oh-profile__info-tab mb-4" id="permission_tab_content"></div>
-						{% endif %}
-
-						{% if request.user|check_manager:employee or request.user == employee.employee_user_id or perms.employee.view_historicalemployeeworkinformation %}
-							<div class="oh-general__tab-target oh-profile__info-tab mb-4 d-none" id="history">
-								{% include "tabs/history.html" %}
-							</div>
-						{% endif %}
-
-						{% if "payroll"|app_installed %}
-							{% if perms.view_payslip or request.user == employee.employee_user_id %}
-								<div class="oh-general__tab-target oh-profile__info-tab mb-4 d-none" id="payroll">
-									{% include "tabs/payroll-tab.html" %}
-								</div>
-							{% endif %}
-						{% endif %}
-
-						{% if "leave"|app_installed %}
-						<div class="oh-general__tab-target oh-profile__info-tab mb-4 d-none" id="leave"></div>
-						{% endif %}
-					</div>
-				</div>
-			</div>
-		</div>
-
-	</div>
-</div>
 <script src="{% static 'employee/search.js' %}"></script>
 <script src="{% static 'basedOn.js' %}"></script>
 <script>
diff --git a/employee/templates/policies/nav.html b/employee/templates/policies/nav.html
index a8d9c857c..936506fba 100644
--- a/employee/templates/policies/nav.html
+++ b/employee/templates/policies/nav.html
@@ -1,4 +1,5 @@
 {% load i18n %}
+{% include "generic/components.html" %}
 <section class="oh-wrapper oh-main__topbar" style="padding-bottom: 1rem;">
   <div class="oh-main__titlebar oh-main__titlebar--left oh-d-flex-column--resp oh-mb-3--small">
     <h1 class="oh-main__titlebar-title fw-bold">{% trans 'Policies' %}</h1>
@@ -13,7 +14,7 @@
     {% if perms.employee.add_policy %}
       <div class="oh-main__titlebar-button-container">
         <div class="oh-main__titlebar-button-container">
-          <a hx-get="{% url 'create-policy' %}" hx-target="#objectCreateModalTarget" data-toggle="oh-modal-toggle" data-target="#objectCreateModal" class="oh-btn oh-btn--secondary">
+          <a hx-get="{% url 'create-policy' %}" hx-target="#genericModalBody" data-toggle="oh-modal-toggle" data-target="#genericModal" class="oh-btn oh-btn--secondary">
             <ion-icon name="add-outline"></ion-icon>
             {% trans 'Create' %}
           </a>
diff --git a/employee/templates/policies/records.html b/employee/templates/policies/records.html
index 1eaf2eaf2..58a7dc528 100644
--- a/employee/templates/policies/records.html
+++ b/employee/templates/policies/records.html
@@ -14,7 +14,7 @@
             {{ policy.title }}</span>
           <div>
             {% if perms.employee.change_policy %}
-              <a hx-get="{% url 'create-policy' %}?instance_id={{ policy.id }}" hx-target="#objectCreateModalTarget" data-toggle="oh-modal-toggle" data-target="#objectCreateModal" title="Edit" style="cursor: pointer;"><ion-icon name="create-outline" role="img" class="md hydrated" aria-label="copy outline"></ion-icon></a>
+              <a hx-get="{% url 'create-policy' policy.id %}" hx-target="#genericModalBody" data-toggle="oh-modal-toggle" data-target="#genericModal" title="Edit" style="cursor: pointer;"><ion-icon name="create-outline" role="img" class="md hydrated" aria-label="copy outline"></ion-icon></a>
             {% endif %}
             {% if perms.employee.delete_policy %}
               <a href="{% url "delete-policies" %}?ids={{policy.id}}" class="text-danger" style="cursor: pointer;" onclick="return confirm('Do you want to delete this policy?')" title="Delete"><ion-icon name="trash-outline" role="img" class="md hydrated" aria-label="trash outline"></ion-icon></a>
diff --git a/employee/templates/tabs/attendance-tab.html b/employee/templates/tabs/attendance-tab.html
index 78a446afd..09c2bbe6d 100644
--- a/employee/templates/tabs/attendance-tab.html
+++ b/employee/templates/tabs/attendance-tab.html
@@ -312,7 +312,7 @@
 							<div class="oh-sticky-table__td" onclick="event.stopPropagation();">
 								<div class="oh-btn-group">
 								{% if perms.attendance.change_attendance or request.user|is_reportingmanager %}
-								<a hx-get="{% url 'attendance-update' attendance.id %}" hx-target='#updateAttendanceRequestModalBody' hx-swap='innerHTML' data-toggle='oh-modal-toggle' data-target='#updateAttendanceRequest'  class="oh-btn oh-btn--light-bkg w-50" title="{% trans 'Edit' %}"><ion-icon name="create-outline"></ion-icon></a>
+								<a hx-get="{% url 'attendance-update' attendance.id %}" hx-target='#genericModalBody' hx-swap='innerHTML' data-toggle='oh-modal-toggle' data-target='#genericModal'  class="oh-btn oh-btn--light-bkg w-50" title="{% trans 'Edit' %}"><ion-icon name="create-outline"></ion-icon></a>
 								{% endif %}
 								{% if perms.attendance.delete_attendance %}
 								<form action="{% url 'attendance-delete' attendance.id  %}" onsubmit="return confirm('{% trans "Are you sure want to delete this attendance?" %}')" hx-target="#tab_contents" method='post' class='w-50'>
diff --git a/employee/templates/tabs/document_tab.html b/employee/templates/tabs/document_tab.html
index 3f6d28e3d..57e87e256 100644
--- a/employee/templates/tabs/document_tab.html
+++ b/employee/templates/tabs/document_tab.html
@@ -7,9 +7,9 @@
 		<button
 			class="oh-btn oh-btn--secondary"
 			data-toggle="oh-modal-toggle"
-			data-target="#objectCreateModal"
+			data-target="#genericModal"
 			hx-get="{% url 'document-create' emp_id %}"
-			hx-target="#objectCreateModalTarget"
+			hx-target="#genericModalBody"
 			onclick="event.preventDefault()"
 
 		>
@@ -54,10 +54,10 @@
 								<span
 									class="oh-badge oh-badge--secondary oh-badge--small oh-badge--round ms-2 mr-2 file-upload"
 									hx-get="{% url 'file-upload' document.id %}"
-									hx-target="#objectCreateModalTarget"
+									hx-target="#genericModalBody"
 									data-document-id="{{ document.id }}"
 									data-toggle="oh-modal-toggle"
-									data-target="#objectCreateModal"
+									data-target="#genericModal"
 									onclick="event.stopPropagation()"
 									title="Upload File"
 								>
diff --git a/employee/templates/tabs/group_permissions.html b/employee/templates/tabs/group_permissions.html
index 4b382414f..9c2af66c2 100644
--- a/employee/templates/tabs/group_permissions.html
+++ b/employee/templates/tabs/group_permissions.html
@@ -1,7 +1,9 @@
-{% load i18n %}
+{% load i18n static %}
+
 {% if perms.auth.view_permission or perms.auth.view_group %}
+
 <div class="oh-tabs__contents">
-    <div class="oh-tabs__content oh-tabs__content--active" id="tab_1_permission">
+    <div class="" id="tab_1_permission">
         {% if employee %}
             <div class="oh-inner-sidebar-content__header d-flex justify-content-between align-items-center">
                 <h2 class="oh-inner-sidebar-content__title">{% trans "Employee Permissions" %}</h2>
@@ -11,13 +13,21 @@
         {% include "base/auth/permission_table.html" %}
         {% endif %}
     </div>
-    {% if employee.employee_user_id.groups.all.first %}
-    <div class="oh-tabs__content oh-tabs__content--active" style="display: none" id="tab_2_permission">
+    <br>
+
+
+    <div class="oh-tabs__contents" style="display: none" id="tab_2_permission">
         <div class="oh-inner-sidebar-content__header d-flex justify-content-between align-items-center">
             <h2 class="oh-inner-sidebar-content__title">
                 {% trans "Groups" %}
             </h2>
+            {% if perms.auth.change_group %}
+          <button class="oh-btn oh-btn--danger" hx-get="{% url "assign-group-user" %}" hx-vals='{"employee":"{{employee.id}}"}' hx-target="#groupAssignBody" data-toggle="oh-modal-toggle" data-target="#groupAssign" onclick="event.stopPropagation()" title="Assign user groups">
+            <ion-icon name="person-add-outline" class="text-light">Add</ion-icon>
+          </button>
+        {% endif %}
         </div>
+        {% if employee.employee_user_id.groups.all.first %}
         {% for gp in employee.employee_user_id.groups.all %}
         <div class="oh-user_permission-list_item exclude-accordion-style" onclick="event.stopPropagation()">
             <div class="oh-user_permission-list_profile">
@@ -34,8 +44,16 @@
             </div>
         </div>
         {% endfor %}
+        {% else %}
+          <div class="oh-wrapper" align="center" style="margin-top: 7vh; margin-bottom:7vh;">
+            <div align="center">
+              <img src="{% static  'images/ui/employee_group.png' %}" class="oh-404__image" alt="Page not found. 404.">
+              <h5 class="oh-404__subtitle mt-4 ml-2">{% trans "This employee is not assigned to any groups." %}</h5>
+            </div>
+          </div>
+          {% endif %}
     </div>
-    {% endif %}
+    {% comment %} {% endif %} {% endcomment %}
 </div>
 <script>
     var showSearch = true
diff --git a/employee/templates/tabs/history.html b/employee/templates/tabs/history.html
index b332cb5c3..ffa68a1d3 100644
--- a/employee/templates/tabs/history.html
+++ b/employee/templates/tabs/history.html
@@ -65,12 +65,21 @@
       </div>
     {% endfor %}
   {% else %}
-    <div
+
+  <div class="oh-wrapper" align="center" style="margin-top: 7vh; margin-bottom:7vh;">
+    <div align="center">
+      <img src="{% static "images/ui/history.png" %}" class="oh-404__image" alt="Page not found. 404.">
+      <h5 class="oh-404__subtitle mt-4 ml-2">{% trans "No history found." %}</h5>
+    </div>
+  </div>
+
+
+    {% comment %} <div
       class="d-flex justify-content-center align-items-center"
       style="height: 40vh"
     >
       <h5 class="oh-404__subtitle">{% trans "No history found." %}</h5>
-    </div>
+    </div> {% endcomment %}
   {% endif %}
 
 </div>
diff --git a/employee/templates/tabs/htmx/view_file.html b/employee/templates/tabs/htmx/view_file.html
index 81cae5b9e..ff73f0197 100644
--- a/employee/templates/tabs/htmx/view_file.html
+++ b/employee/templates/tabs/htmx/view_file.html
@@ -1,4 +1,5 @@
 {% load i18n %} {% load horillafilters %} {% load static %}
+{% include 'generic/components.html' %}
 <div class="d-flex justify-content-end">
 	<div class="oh-btn-group mb-4">
 		<a
@@ -36,8 +37,8 @@
 				<a
 					type="submit"
 					hx-get="{% url 'document-reject' document.id %}"
-					hx-target="#rejectFileForm"
-					data-target="#rejectFileModal"
+					hx-target="#objectCreateModalTarget"
+					data-target="#objectCreateModal"
 					data-toggle="oh-modal-toggle"
 					title="{% trans 'Reject' %}"
 					class="oh-btn oh-btn--danger w-100"
diff --git a/employee/templates/tabs/leave-tab.html b/employee/templates/tabs/leave-tab.html
index 3b9575658..c99ce56d7 100644
--- a/employee/templates/tabs/leave-tab.html
+++ b/employee/templates/tabs/leave-tab.html
@@ -133,7 +133,7 @@
       <!-- Container for Kanban cards -->
       {% for employee_leave in employee_leaves %}
         {% if perms.leave.view_leavetype or perms.leave.view_leaverequest or request.user|check_manager:employee_leave or request.user == employee_leave.employee_id.employee_user_id %}
-          <div
+         <div
             class="oh-kanban-card"
             data-toggle="oh-modal-toggle"
             data-target="#objectCreateModal"
diff --git a/employee/templates/tabs/main_asset_tab.html b/employee/templates/tabs/main_asset_tab.html
new file mode 100644
index 000000000..3d43d8d79
--- /dev/null
+++ b/employee/templates/tabs/main_asset_tab.html
@@ -0,0 +1,3 @@
+<div id="asset_target">
+    {% include "tabs/asset-tab.html" %}
+</div>
\ No newline at end of file
diff --git a/employee/templates/tabs/main_note_tab.html b/employee/templates/tabs/main_note_tab.html
new file mode 100644
index 000000000..546edc621
--- /dev/null
+++ b/employee/templates/tabs/main_note_tab.html
@@ -0,0 +1,3 @@
+<div id="note_target">
+    {% include "tabs/note_tab.html" %}
+</div>
\ No newline at end of file
diff --git a/employee/templates/tabs/shift-tab.html b/employee/templates/tabs/shift-tab.html
index dbffe41a8..692bd251f 100644
--- a/employee/templates/tabs/shift-tab.html
+++ b/employee/templates/tabs/shift-tab.html
@@ -13,12 +13,30 @@
 {% endif %}
 
 <div class="oh-wrapper mt-4">
-    {% if employee.employee_work_info.shift_id %}
-        <span class="fw-bold" style="font-size: 17px">
-            {% if employee.employee_work_info.shift_id %}
-                {% trans "Current Shift" %} &nbsp : &nbsp {{employee.employee_work_info.shift_id}}
-            {% endif %}
-        </span>
+	{% if employee.employee_work_info.shift_id %}
+	<span class="fw-bold" style="font-size:17px;"> {% if employee.employee_work_info.shift_id %} {% trans "Current Shift" %} &nbsp : &nbsp {{employee.employee_work_info.shift_id}} {% endif %}</span>
+	<button style="display:inline-block;"
+			class="oh-btn oh-btn--secondary ms-3"
+			data-toggle="oh-modal-toggle"
+			data-target="#genericModal"
+			hx-get="{% url 'shift-request-reallocate' %}?emp_id={{emp_id}}"
+			hx-target="#genericModalBody"
+		>
+		<ion-icon name="add-sharp" class="mr-1 md hydrated" role="img" aria-label="add sharp"></ion-icon>{% trans "Reallocate Shift." %}
+	</button>
+	{% endif %}
+
+  <div class="oh-tabs mt-3">
+    <ul class="oh-tabs__tablist">
+      <li class="oh-tabs__tab oh-tabs__tab--active" data-target="#shift_tab_1">
+        <div>
+          <img
+            src="{% static 'images/ui/work-from-home (1).png' %}"
+            alt=""
+            style="width: 25px; height: 25px; margin-right: 3px"
+          />
+          {% trans "Work type request" %}
+        </div>
         <button
             style="display: inline-block"
             class="oh-btn oh-btn--secondary ms-3"
diff --git a/employee/urls.py b/employee/urls.py
index 0c51a6b63..43cd1b653 100644
--- a/employee/urls.py
+++ b/employee/urls.py
@@ -6,13 +6,80 @@ This module is used to map url path with view methods.
 
 from django.urls import path
 
+from base.templatetags.horillafilters import app_installed
 from base.views import object_delete, object_duplicate
 from employee import not_in_out_dashboard, policies, views
+from employee.cbv import (
+    action_type,
+    allocations,
+    disciplinary_actions,
+    document_request,
+    employee_profile,
+    employee_tags,
+    employees,
+    policy_cbv,
+)
 from employee.forms import DisciplinaryActionForm
 from employee.models import DisciplinaryAction, Employee, EmployeeTag
 from horilla_documents.models import DocumentRequest
 
 urlpatterns = [
+    path(
+        "allocation-view/<int:pk>/",
+        allocations.AllocationView.as_view(),
+        name="allocation-view",
+    ),
+    path(
+        "allocation-employee-forms",
+        allocations.EmployeeForms.as_view(),
+        name="allocation-employee-forms",
+    ),
+    path("personal-form", allocations.PersonalFormView.as_view(), name="personal-form"),
+    path("work-form", allocations.WorkFormView.as_view(), name="work-form"),
+    path("bank-form", allocations.BankFormView.as_view(), name="bank-form"),
+    path(
+        "allocation-user-group-view",
+        allocations.GroupsView.as_view(),
+        name="allocation-user-group-view",
+    ),
+    path(
+        "allocation-user-groups",
+        allocations.Groups.as_view(),
+        name="allocation-user-groups",
+    ),
+    path(
+        "allocation-assign-group-user",
+        allocations.GroupAssignView.as_view(),
+        name="allocation-assign-group-user",
+    ),
+    path(
+        "allocation-summary", allocations.Summary.as_view(), name="allocation-summary"
+    ),
+    path(
+        "toggle-user-dashboard-access",
+        allocations.ToggleDashboardAccess.as_view(),
+        name="toggle-user-dashboard-access",
+    ),
+    path(
+        "employee-tag-list/",
+        employee_tags.EmployeeTagListView.as_view(),
+        name="employee-tag-list",
+    ),
+    path(
+        "employee-tag-create-form/",
+        employee_tags.EmployeeTagCreateForm.as_view(),
+        name="employee-tag-create-form",
+    ),
+    path(
+        "employee-tag-update-form/<int:pk>/",
+        employee_tags.EmployeeTagCreateForm.as_view(),
+        name="employee-tag-update-form",
+    ),
+    path(
+        "employee-tag-navbar/",
+        employee_tags.EmployeetagNavView.as_view(),
+        name="employee-tag-navbar",
+    ),
     path("get-language-code/", views.get_language_code, name="get-language-code"),
     path("employee-profile/", views.employee_profile, name="employee-profile"),
     path(
@@ -21,6 +88,12 @@ urlpatterns = [
         name="employee-view-individual",
         kwargs={"model": Employee},
     ),
+    # path(
+    #     "employee-profile/<int:obj_id>",
+    #     views.employee_view_individual,
+    #     name="employee-profile",
+    #     kwargs={"model": Employee},
+    # ),
     path("edit-profile", views.self_info_update, name="edit-profile"),
     path(
         "profile-edit-access/<int:emp_id>/",
@@ -52,7 +125,7 @@ urlpatterns = [
         views.employee_profile_bank_details,
         name="employee-profile-bank-update",
     ),
-    path("employee-view/", views.employee_view, name="employee-view"),
+    # path("employee-view/", views.employee_view, name="employee-view"),
     path("employee-view-new", views.employee_view_new, name="employee-view-new"),
     path(
         "employee-view-update/<int:obj_id>/",
@@ -195,7 +268,7 @@ urlpatterns = [
         name="dashboard-employee-department",
     ),
     path("employee-widget-filter", views.widget_filter, name="employee-widget-filter"),
-    path("note-tab/<int:emp_id>", views.note_tab, name="note-tab"),
+    path("note-tab/<int:pk>", views.note_tab, name="note-tab"),
     path("add-employee-note/<int:emp_id>/", views.add_note, name="add-employee-note"),
     path("add-employee-note-post", views.add_note, name="add-employee-note-post"),
     path(
@@ -218,17 +291,27 @@ urlpatterns = [
         views.employee_note_delete,
         name="employee-note-delete",
     ),
+    path(
+        "allowances-deductions-tab/<int:emp_id>",
+        views.allowances_deductions_tab,
+        name="allowances-deductions-tab",
+    ),
+    path("shift-tab/<int:pk>", views.shift_tab, name="shift-tab"),
+    # path(
+    #     "about-tab/<int:obj_id>",
+    #     views.about_tab,
+    #     name="about-tab",
+    #     kwargs={"model": Employee},
+    # ),
     path("shift-tab/<int:emp_id>", views.shift_tab, name="shift-tab"),
     path(
-        "about-tab/<int:obj_id>",
+        "about-tab/<int:pk>",
         views.about_tab,
         name="about-tab",
         kwargs={"model": Employee},
     ),
-    path("document-tab/<int:emp_id>", views.document_tab, name="document-tab"),
-    path(
-        "bonus-points-tab/<int:emp_id>", views.bonus_points_tab, name="bonus-points-tab"
-    ),
+    path("document-tab/<int:pk>", views.document_tab, name="document-tab"),
+    path("bonus-points-tab/<int:pk>", views.bonus_points_tab, name="bonus-points-tab"),
     path(
         "add-bonus-points/<int:emp_id>", views.add_bonus_points, name="add-bonus-points"
     ),
@@ -239,8 +322,8 @@ urlpatterns = [
         views.employee_select_filter,
         name="employee-select-filter",
     ),
-    path("not-in-yet/", not_in_out_dashboard.not_in_yet, name="not-in-yet"),
-    path("not-out-yet/", not_in_out_dashboard.not_out_yet, name="not-out-yet"),
+    # path("not-in-yet/", not_in_out_dashboard.not_in_yet, name="not-in-yet"),
+    # path("not-out-yet/", not_in_out_dashboard.not_out_yet, name="not-out-yet"),
     path(
         "send-mail/<int:emp_id>/",
         not_in_out_dashboard.send_mail,
@@ -271,7 +354,13 @@ urlpatterns = [
     ),
     path("view-policies/", policies.view_policies, name="view-policies"),
     path("search-policies", policies.search_policies, name="search-policies"),
-    path("create-policy", policies.create_policy, name="create-policy"),
+    # path("create-policy", policies.create_policy, name="create-policy"),
+    path("create-policy", policy_cbv.PolicyFormView.as_view(), name="create-policy"),
+    path(
+        "create-policy/<int:pk>/",
+        policy_cbv.PolicyFormView.as_view(),
+        name="create-policy",
+    ),
     path("view-policy", policies.view_policy, name="view-policy"),
     path(
         "add-attachment-policy", policies.add_attachment, name="add-attachment-policy"
@@ -286,9 +375,25 @@ urlpatterns = [
         policies.get_attachments,
         name="get-attachments-policy",
     ),
-    path("file-upload/<int:id>", views.file_upload, name="file-upload"),
+    path(
+        "file-upload/<int:pk>/",
+        document_request.DocumentUploadForm.as_view(),
+        name="file-upload",
+    ),
+    # path("file-upload/<int:id>", views.file_upload, name="file-upload"),
     path("view-file/<int:id>", views.view_file, name="view-file"),
-    path("document-create/<int:emp_id>", views.document_create, name="document-create"),
+    path("document-create", views.document_create, name="document-create"),
+    path(
+        "get-notify-field/",
+        views.get_notify_field,
+        name="get-notify-field",
+    ),
+    path(
+        "document-create/<int:emp_id>",
+        document_request.DocumentCreateForm.as_view(),
+        name="document-create",
+    ),
+    # path("document-create/<int:emp_id>", views.document_create, name="document-create"),
     path(
         "update-document-title/<int:id>",
         views.update_document_title,
@@ -303,7 +408,12 @@ urlpatterns = [
     path(
         "document-bulk-reject", views.document_bulk_reject, name="document-bulk-reject"
     ),
-    path("document-reject/<int:id>", views.document_reject, name="document-reject"),
+    path(
+        "document-reject/<int:pk>/",
+        document_request.DocumentRejectCbvForm.as_view(),
+        name="document-reject",
+    ),
+    # path("document-reject/<int:id>", views.document_reject, name="document-reject"),
     path(
         "document-request-view/",
         views.document_request_view,
@@ -316,14 +426,24 @@ urlpatterns = [
     ),
     path(
         "document-request-create",
-        views.document_request_create,
+        document_request.DocumentRequestCreateForm.as_view(),
         name="document-request-create",
     ),
+    # path(
+    #     "document-request-create",
+    #     views.document_request_create,
+    #     name="document-request-create",
+    # ),
     path(
-        "document-request-update/<int:id>",
-        views.document_request_update,
+        "document-request-update/<int:pk>/",
+        document_request.DocumentRequestCreateForm.as_view(),
         name="document-request-update",
     ),
+    # path(
+    #     "document-request-update/<int:id>",
+    #     views.document_request_update,
+    #     name="document-request-update",
+    # ),
     path(
         "document-request-delete/<int:obj_id>/",
         object_delete,
@@ -340,25 +460,60 @@ urlpatterns = [
     ),
     path("organisation-chart/", views.organisation_chart, name="organisation-chart"),
     path("delete-policies", policies.delete_policies, name="delete-policies"),
+    # path(
+    #     "disciplinary-actions/",
+    #     policies.disciplinary_actions,
+    #     name="disciplinary-actions",
+    # ),
+    # path(
+    #     "duplicate-disciplinary-actions/<int:obj_id>/",
+    #     object_duplicate,
+    #     name="duplicate-disciplinary-actions",
+    #     kwargs={
+    #         "model": DisciplinaryAction,
+    #         "form": DisciplinaryActionForm,
+    #         "template": "disciplinary_actions/form.html",
+    #     },
+    # ),
     path(
-        "disciplinary-actions/",
-        policies.disciplinary_actions,
-        name="disciplinary-actions",
-    ),
-    path(
-        "duplicate-disciplinary-actions/<int:obj_id>/",
-        object_duplicate,
+        "duplicate-disciplinary-actions/<int:pk>/",
+        disciplinary_actions.DisciplinaryActionsFormDuplicate.as_view(),
         name="duplicate-disciplinary-actions",
-        kwargs={
-            "model": DisciplinaryAction,
-            "form": DisciplinaryActionForm,
-            "template": "disciplinary_actions/form.html",
-        },
     ),
-    path("create-actions", policies.create_actions, name="create-actions"),
+    # path("create-actions", policies.create_actions, name="create-actions"),
     path(
-        "update-actions/<int:action_id>/",
-        policies.update_actions,
+        "create-actions",
+        disciplinary_actions.DisciplinaryActionsFormView.as_view(),
+        name="create-actions",
+    ),
+    path(
+        "action-type-list",
+        action_type.ActionTypeListView.as_view(),
+        name="action-type-list",
+    ),
+    path(
+        "action-type-nav",
+        action_type.ActionTypeNav.as_view(),
+        name="action-type-nav",
+    ),
+    path(
+        "create-action-type",
+        action_type.ActionTypeFormView.as_view(),
+        name="create-action-type",
+    ),
+    path(
+        "update-action-type/<int:pk>/",
+        action_type.ActionTypeFormView.as_view(),
+        name="update-action-type",
+    ),
+    # path(
+    #     "update-actions/<int:action_id>/",
+    #     policies.update_actions,
+    #     name="update-actions",
+    # ),
+    path(
+        "update-actions/<int:pk>/",
+        disciplinary_actions.DisciplinaryActionsFormView.as_view(),
         name="update-actions",
     ),
     path(
@@ -410,8 +565,42 @@ urlpatterns = [
         views.get_manager_in,
         name="get-manager-in",
     ),
+    path("employee-view/", employees.EmployeesView.as_view(), name="employee-view"),
+    path("employees-list/", employees.EmployeesList.as_view(), name="employees-list"),
+    path("employees-nav/", employees.EmployeeNav.as_view(), name="employees-nav"),
+    path("employees-export/", employees.ExportView.as_view(), name="employees-export"),
+    path("employees-card/", employees.EmployeeCard.as_view(), name="employees-card"),
+    path(
+        "disciplinary-actions/",
+        disciplinary_actions.DisciplinaryActionsView.as_view(),
+        name="disciplinary-actions",
+    ),
+    path(
+        "disciplinary-actions-list/",
+        disciplinary_actions.DisciplinaryActionsList.as_view(),
+        name="disciplinary-actions-list",
+    ),
+    path(
+        "disciplinary-actions-nav/",
+        disciplinary_actions.DisciplinaryActionsNav.as_view(),
+        name="disciplinary-actions-nav",
+    ),
+    path(
+        "disciplinary-actions-detail-view/<int:pk>/",
+        disciplinary_actions.DisciplinaryActionsDetailView.as_view(),
+        name="disciplinary-actions-detail-view",
+    ),
     path("get-job-positions", views.get_job_positions, name="get-job-positions"),
+    path(
+        "get-job-positions-hx", views.get_job_positions_hx, name="get-job-positions-hx"
+    ),
     path("get-job-roles", views.get_job_roles, name="get-job-roles"),
+    path(
+        "get-job-position-department",
+        views.get_position_department,
+        name="get-job-position-department",
+    ),
+    path("get-job-roles-hx", views.get_job_roles_hx, name="get-job-roles-hx"),
     path("employee-tag-view/", views.employee_tag_view, name="employee-tag-view"),
     path("employee-tag-create", views.employee_tag_create, name="employee-tag-create"),
     path(
@@ -423,6 +612,80 @@ urlpatterns = [
         "employee-tag-delete/<int:obj_id>/",
         object_delete,
         name="employee-tag-delete",
-        kwargs={"model": EmployeeTag, "HttpResponse": True},
+        kwargs={
+            "model": EmployeeTag,
+            "HttpResponse": "<script>$('#reloadMessagesButton').click()</script>",
+        },
+    ),
+    path(
+        "profile/employee/employee-view/<int:pk>/",
+        employee_profile.EmployeeProfileView.as_view(),
+        name="profile-new",
+    ),
+    path(
+        "employee-profile/<int:pk>/",
+        employee_profile.EmployeeProfileView.as_view(),
+        name="employee-profile",
+    ),
+    path(
+        "assign-group-user/",
+        employee_profile.GroupAssignView.as_view(),
+        name="assign-group-user",
     ),
 ]
+
+
+if app_installed("asset"):
+    urlpatterns += [
+        path(
+            "allocation-assets", allocations.Assets.as_view(), name="allocation-assets"
+        ),
+        path(
+            "allocation-asset-list",
+            allocations.AssetAllocationList.as_view(),
+            name="allocation-asset-list",
+        ),
+        path(
+            "allocation-return-asset/<int:asset_id>/",
+            allocations.return_allocation,
+            name="allocation-return-asset",
+        ),
+    ]
+
+if app_installed("leave"):
+    urlpatterns += [
+        path(
+            "allocation-leave-type",
+            allocations.LeaveTypeView.as_view(),
+            name="allocation-leave-type",
+        ),
+        path(
+            "allocation-leave-type-list",
+            allocations.LeaveTypeAllocationList.as_view(),
+            name="allocation-leave-type-list",
+        ),
+    ]
+
+if app_installed("payroll"):
+    urlpatterns += [
+        path(
+            "allocation-allowance",
+            allocations.AllowanceView.as_view(),
+            name="allocation-allowance",
+        ),
+        path(
+            "allocation-allowance-list",
+            allocations.AllowanceList.as_view(),
+            name="allocation-allowance-list",
+        ),
+        path(
+            "allocation-deduction",
+            allocations.DeductionView.as_view(),
+            name="allocation-deduction",
+        ),
+        path(
+            "allocation-deduction-list",
+            allocations.DeductionList.as_view(),
+            name="allocation-deduction-list",
+        ),
+    ]
diff --git a/employee/views.py b/employee/views.py
index cce901b69..fc1aa1093 100755
--- a/employee/views.py
+++ b/employee/views.py
@@ -30,7 +30,7 @@ from django.core.exceptions import ObjectDoesNotExist
 from django.db import models
 from django.db.models import F, ProtectedError
 from django.db.models.query import QuerySet
-from django.forms import DateInput, Select
+from django.forms import DateInput, HiddenInput, Select
 from django.http import HttpResponse, HttpResponseRedirect, JsonResponse
 from django.shortcuts import get_object_or_404, redirect, render
 from django.template.loader import render_to_string
@@ -298,96 +298,80 @@ def employee_view_individual(request, obj_id, **kwargs):
     """
     This method is used to view profile of an employee.
     """
-    try:
-        employee = Employee.objects.get(id=obj_id)
-    except ObjectDoesNotExist:
-        try:
-            employee = Employee.objects.entire().get(id=obj_id)
-            company = getattr(
-                getattr(employee, "employee_work_info", None), "company_id", None
-            )
-            company_id = getattr(company, "pk", None)
-            if company_id != request.session["selected_company"]:
-                messages.error(
-                    request, "Employee is not working in the selected company."
-                )
-                return redirect("employee-view")
-        except Exception as e:
-            return render(request, "404.html", status=404)
+    # employee = Employee.objects.get(id=obj_id)
+    # employee_leaves = (
+    #     employee.available_leave.all() if apps.is_installed("leave") else None
+    # )
+    # enabled_block_unblock = (
+    #     AccountBlockUnblock.objects.exists()
+    #     and AccountBlockUnblock.objects.first().is_enabled
+    # )
+    # # Retrieve the filtered employees from the session
+    # filtered_employee_ids = request.session.get("filtered_employees", [])
+    # filtered_employees = Employee.objects.filter(id__in=filtered_employee_ids)
 
-    employee_leaves = (
-        employee.available_leave.all() if apps.is_installed("leave") else None
-    )
-    enabled_block_unblock = (
-        AccountBlockUnblock.objects.exists()
-        and AccountBlockUnblock.objects.first().is_enabled
-    )
-    # Retrieve the filtered employees from the session
-    filtered_employee_ids = request.session.get("filtered_employees", [])
-    filtered_employees = Employee.objects.filter(id__in=filtered_employee_ids)
+    # request_ids_str = json.dumps(
+    #     [
+    #         instance.id
+    #         for instance in paginator_qry(
+    #             filtered_employees, request.GET.get("page")
+    #         ).object_list
+    #     ]
+    # )
 
-    request_ids_str = json.dumps(
-        [
-            instance.id
-            for instance in paginator_qry(
-                filtered_employees, request.GET.get("page")
-            ).object_list
-        ]
-    )
+    # # Convert the string to an actual list of integers
+    # requests_ids = (
+    #     ast.literal_eval(request_ids_str)
+    #     if isinstance(request_ids_str, str)
+    #     else request_ids_str
+    # )
 
-    # Convert the string to an actual list of integers
-    requests_ids = (
-        ast.literal_eval(request_ids_str)
-        if isinstance(request_ids_str, str)
-        else request_ids_str
-    )
+    # employee_id = employee.id
+    # previous_id = None
+    # next_id = None
 
-    employee_id = employee.id
-    previous_id = None
-    next_id = None
+    # for index, req_id in enumerate(requests_ids):
+    #     if req_id == employee_id:
 
-    for index, req_id in enumerate(requests_ids):
-        if req_id == employee_id:
+    #         if index == len(requests_ids) - 1:
+    #             next_id = None
+    #         else:
+    #             next_id = requests_ids[index + 1]
+    #         if index == 0:
+    #             previous_id = None
+    #         else:
+    #             previous_id = requests_ids[index - 1]
+    #         break
 
-            if index == len(requests_ids) - 1:
-                next_id = None
-            else:
-                next_id = requests_ids[index + 1]
-            if index == 0:
-                previous_id = None
-            else:
-                previous_id = requests_ids[index - 1]
-            break
-
-    context = {
-        "employee": employee,
-        "previous": previous_id,
-        "next": next_id,
-        "requests_ids": requests_ids,
-        "current_date": date.today(),
-        "leave_request_ids": json.dumps([]),
-        "enabled_block_unblock": enabled_block_unblock,
-    }
-    # if the requesting user opens own data
-    if request.user.employee_get == employee:
-        context["user_leaves"] = employee_leaves
-    else:
-        context["employee_leaves"] = employee_leaves
+    # context = {
+    #     "employee": employee,
+    #     "previous": previous_id,
+    #     "next": next_id,
+    #     "requests_ids": requests_ids,
+    #     "current_date": date.today(),
+    #     "leave_request_ids": json.dumps([]),
+    #     "enabled_block_unblock": enabled_block_unblock,
+    # }
+    # # if the requesting user opens own data
+    # if request.user.employee_get == employee:
+    #     context["user_leaves"] = employee_leaves
+    # else:
+    #     context["employee_leaves"] = employee_leaves
 
     return render(
         request,
         "employee/view/individual.html",
-        context,
+        # context,
     )
 
 
 @login_required
 @hx_request_required
-def about_tab(request, obj_id, **kwargs):
+def about_tab(request, pk, **kwargs):
     """
     This method is used to view profile of an employee.
     """
-    employee = Employee.objects.get(id=obj_id)
+    employee = Employee.objects.get(id=pk)
     contracts = employee.contract_set.all() if apps.is_installed("payroll") else None
     employee_leaves = (
         employee.available_leave.all() if apps.is_installed("leave") else None
@@ -403,10 +387,115 @@ def about_tab(request, obj_id, **kwargs):
     )
 
 
+@login_required
+@hx_request_required
+def allowances_deductions_tab(request, pk):
+    """
+    Retrieve and render the allowances and deductions applicable to an employee.
+
+    This view function retrieves the active contract, basic pay, allowances, and
+    deductions for a specified employee. It filters allowances and deductions
+    based on various conditions, including specific employee assignments and
+    condition-based rules. The results are then rendered in the allowance and
+    deduction tab template.
+    """
+    employee = Employee.objects.get(id=pk)
+    active_contracts = (
+        employee.contract_set.filter(contract_status="active").first()
+        if apps.is_installed("payroll")
+        else None
+    )
+    basic_pay = active_contracts.wage if active_contracts else None
+    employee_allowances = []
+    employee_deductions = []
+    if basic_pay:
+        # Find the applicable allowances for the employee
+        Allowance = get_horilla_model_class(app_label="payroll", model="allowance")
+        specific_allowances = Allowance.objects.filter(specific_employees=employee)
+        conditional_allowances = Allowance.objects.filter(
+            is_condition_based=True
+        ).exclude(exclude_employees=employee)
+        active_employees = Allowance.objects.filter(
+            include_active_employees=True
+        ).exclude(exclude_employees=employee)
+        allowances = specific_allowances | conditional_allowances | active_employees
+        for allowance in allowances:
+            if allowance.is_condition_based:
+                condition_field = allowance.field
+                condition_operator = allowance.condition
+                condition_value = allowance.value.lower().replace(" ", "_")
+                employee_value = dynamic_attr(employee, condition_field)
+                # employee_value = 0
+                operator_func = operator_mapping.get(condition_operator)
+                if employee_value is not None:
+                    condition_value = type(employee_value)(condition_value)
+                    if operator_func(employee_value, condition_value):
+                        employee_allowances.append(allowance)
+            else:
+                employee_allowances.append(allowance)
+            for allowance in employee_allowances:
+                operator_func = operator_mapping.get(allowance.if_condition)
+                condition_value = basic_pay if allowance.if_choice == "basic_pay" else 0
+                if not operator_func(condition_value, allowance.if_amount):
+                    employee_allowances.remove(allowance)
+
+        # Find the applicable deductions for the employee
+        Deduction = get_horilla_model_class(app_label="payroll", model="deduction")
+        specific_deductions = Deduction.objects.filter(
+            specific_employees=employee, is_pretax=True, is_tax=False
+        )
+        conditional_deduction = Deduction.objects.filter(
+            is_condition_based=True, is_pretax=True, is_tax=False
+        ).exclude(exclude_employees=employee)
+        active_employee_deduction = Deduction.objects.filter(
+            include_active_employees=True, is_pretax=True, is_tax=False
+        ).exclude(exclude_employees=employee)
+        deductions = (
+            specific_deductions | conditional_deduction | active_employee_deduction
+        )
+        employee_deductions = list(set(deductions))
+        for deduction in deductions:
+            if deduction.is_condition_based:
+                condition_field = deduction.field
+                condition_operator = deduction.condition
+                condition_value = deduction.value.lower().replace(" ", "_")
+                employee_value = dynamic_attr(employee, condition_field)
+                operator_func = operator_mapping.get(condition_operator)
+
+                if (
+                    employee_value is not None
+                    and not operator_func(
+                        employee_value, type(employee_value)(condition_value)
+                    )
+                    or employee_value is None
+                ):
+                    employee_deductions.remove(deduction)
+    allowance_ids = (
+        json.dumps([instance.id for instance in employee_allowances])
+        if employee_allowances
+        else None
+    )
+    deduction_ids = (
+        json.dumps([instance.id for instance in employee_deductions])
+        if employee_deductions
+        else None
+    )
+    context = {
+        "active_contracts": active_contracts,
+        "basic_pay": basic_pay,
+        "allowances": employee_allowances if employee_allowances else None,
+        "allowance_ids": allowance_ids,
+        "deductions": employee_deductions if employee_deductions else None,
+        "deduction_ids": deduction_ids,
+        "employee": employee,
+    }
+    return render(request, "tabs/allowance_deduction-tab.html", context=context)
+
+
 @login_required
 @hx_request_required
 @owner_can_enter("perms.employee.view_employee", Employee)
-def shift_tab(request, emp_id):
+def shift_tab(request, pk):
     """
     This function is used to view shift tab of an employee in employee individual & profile view.
 
@@ -416,16 +505,16 @@ def shift_tab(request, emp_id):
 
     Returns: return shift-tab template
     """
-    employee = Employee.objects.get(id=emp_id)
-    work_type_requests = WorkTypeRequest.objects.filter(employee_id=emp_id)
+    employee = Employee.objects.get(id=pk)
+    work_type_requests = WorkTypeRequest.objects.filter(employee_id=pk)
     work_type_requests_ids = json.dumps(
         [instance.id for instance in work_type_requests]
     )
-    rshift_assign = RotatingShiftAssign.objects.filter(employee_id=emp_id)
+    rshift_assign = RotatingShiftAssign.objects.filter(employee_id=pk)
     rshift_assign_ids = json.dumps([instance.id for instance in rshift_assign])
-    rwork_type_assign = RotatingWorkTypeAssign.objects.filter(employee_id=emp_id)
+    rwork_type_assign = RotatingWorkTypeAssign.objects.filter(employee_id=pk)
     rwork_type_assign_ids = json.dumps([instance.id for instance in rwork_type_assign])
-    shift_requests = ShiftRequest.objects.filter(employee_id=emp_id)
+    shift_requests = ShiftRequest.objects.filter(employee_id=pk)
     shift_requests_ids = json.dumps([instance.id for instance in shift_requests])
 
     context = {
@@ -437,7 +526,7 @@ def shift_tab(request, emp_id):
         "rwork_type_assign_ids": rwork_type_assign_ids,
         "shift_data": shift_requests,
         "shift_requests_ids": shift_requests_ids,
-        "emp_id": emp_id,
+        "emp_id": pk,
         "employee": employee,
     }
     return render(request, "tabs/shift-tab.html", context=context)
@@ -593,7 +682,7 @@ def document_request_update(request, id):
 @login_required
 @hx_request_required
 @owner_can_enter("horilla_documents.view_document", Employee)
-def document_tab(request, emp_id):
+def document_tab(request, pk):
     """
     This function is used to view documents tab of an employee in employee individual
     & profile view.
@@ -606,12 +695,12 @@ def document_tab(request, emp_id):
     """
 
     form = DocumentUpdateForm(request.POST, request.FILES)
-    documents = Document.objects.filter(employee_id=emp_id)
+    documents = Document.objects.filter(employee_id=pk)
 
     context = {
         "documents": documents,
         "form": form,
-        "emp_id": emp_id,
+        "emp_id": pk,
     }
     return render(request, "tabs/document_tab.html", context=context)
 
@@ -645,6 +734,23 @@ def document_create(request, emp_id):
     return render(request, "tabs/htmx/document_create_form.html", context=context)
 
 
+def get_notify_field(request):
+    expiry_date = request.GET.get("expiry_date")
+    form = DocumentForm()
+    if not expiry_date:
+        form.fields["notify_before"].widget = HiddenInput()
+        form.fields["notify_before"].label = ""
+    notify_field_html = render_to_string(
+        "cbv/document/notify_field.html",
+        {
+            "form": form,
+            "field_name": "notify_before",
+            "field": form.fields["notify_before"],
+        },
+    )
+    return HttpResponse(notify_field_html)
+
+
 @login_required
 def update_document_title(request, id):
     """
@@ -1930,7 +2036,7 @@ def employee_delete(request, obj_id):
         error_message = _("- {}.".format(model_names_str))
         error_message = str(error_message)
         request.session["error_message"] = error_message
-        return redirect(employee_view)
+        return redirect(reverse("employee-view") + "?error_message=true")
     return HttpResponseRedirect(request.META.get("HTTP_REFERER", f"/view={view}"))
 
 
@@ -2035,7 +2141,7 @@ def employee_archive(request, obj_id):
                     count = count + 1
             if count == 1:
                 messages.error(request, _("You can't archive the last superuser."))
-                return HttpResponse("<script>$('#filterEmployee').click();</script>")
+                return HttpResponse("<script>$('#applyFilter').click();</script>")
 
         result = employee.get_archive_condition()
         if result:
@@ -2049,7 +2155,7 @@ def employee_archive(request, obj_id):
         if key not in request.META.keys():
             return HttpResponseRedirect(request.META.get("HTTP_REFERER", "/"))
         else:
-            return HttpResponse("<script>$('#filterEmployee').click();</script>")
+            return HttpResponse("<script>$('#applyFilter').click();</script>")
     else:
         return render(
             request,
@@ -2974,7 +3080,7 @@ def employee_select_filter(request):
 @login_required
 @hx_request_required
 @manager_can_enter(perm="employee.view_employeenote")
-def note_tab(request, emp_id):
+def note_tab(request, pk):
     """
     This function is used to view note tab of an employee in employee individual
     & profile view.
@@ -2986,22 +3092,44 @@ def note_tab(request, emp_id):
     Returns: return note-tab template
 
     """
-    employee_obj = Employee.objects.get(id=emp_id)
-    notes = EmployeeNote.objects.filter(employee_id=emp_id).order_by("-id")
+    employee_obj = Employee.objects.get(id=pk)
+    notes = EmployeeNote.objects.filter(employee_id=pk).order_by("-id")
 
     return render(
         request,
-        "tabs/note_tab.html",
+        "tabs/main_note_tab.html",
         {"employee": employee_obj, "notes": notes},
     )
 
 
+def history_tab(request, pk):
+    """
+    This function is used to view history tab of an employee in employee individual
+    & profile view.
+
+    Parameters:
+    request (HttpRequest): The HTTP request object.
+    emp_id (int): The id of the employee.
+
+    Returns: return history template
+
+    """
+    employee_obj = Employee.objects.get(id=pk)
+
+    return render(
+        request,
+        "tabs/history.html",
+        {"employee": employee_obj},
+    )
+
+
 @login_required
 @hx_request_required
 @manager_can_enter(perm="employee.add_employeenote")
 def add_note(request, emp_id=None):
     """
-    This method renders template component to add candidate remark
+    Handles the addition of a note to a specific employee, including file attachments.
+    Saves the note and redirects to the employee's note tab upon successful submission.
     """
 
     form = EmployeeNoteForm(initial={"employee_id": emp_id})
@@ -3120,7 +3248,7 @@ def delete_employee_note_file(request, note_file_id):
 @login_required
 @hx_request_required
 @owner_can_enter("employee.view_bonuspoint", Employee)
-def bonus_points_tab(request, emp_id):
+def bonus_points_tab(request, pk):
     """
     This function is used to view Bonus Points tab of an employee in employee individual
     & profile view.
@@ -3132,15 +3260,15 @@ def bonus_points_tab(request, emp_id):
     Returns: return bonus_points template
 
     """
-    employee_obj = Employee.objects.get(id=emp_id)
+    employee_obj = Employee.objects.get(id=pk)
     try:
-        points = BonusPoint.objects.get(employee_id=emp_id)
+        points = BonusPoint.objects.get(employee_id=pk)
         if apps.is_installed("payroll"):
             Reimbursement = get_horilla_model_class(
                 app_label="payroll", model="reimbursement"
             )
             requested_bonus_points = Reimbursement.objects.filter(
-                employee_id=emp_id, type="bonus_encashment", status="requested"
+                employee_id=pk, type="bonus_encashment", status="requested"
             )
         else:
             requested_bonus_points = QuerySet().none()
@@ -3496,12 +3624,11 @@ def first_last_badge(request):
 @login_required
 @hx_request_required
 @manager_can_enter("employee.view_employee")
-def employee_get_mail_log(request):
+def employee_get_mail_log(request, pk):
     """
     This method is used to track mails sent along with the status
     """
-    employee_id = request.GET["emp_id"]
-    employee = Employee.objects.get(id=employee_id)
+    employee = Employee.objects.get(id=pk)
     tracked_mails = EmailLog.objects.filter(to__icontains=employee.email)
     try:
         if employee.employee_work_info and employee.employee_work_info.email:
@@ -3525,7 +3652,44 @@ def get_job_positions(request):
         if department_id
         else []
     )
-    return JsonResponse({"job_positions": dict(job_positions)})
+    job_id = (
+        request.GET.get("job_id") or job_positions.first()[0] if job_positions else None
+    )
+
+    job_roles = (
+        JobRole.objects.filter(job_position_id=job_id).values_list("id", "job_role")
+        if job_id
+        else []
+    )
+    return JsonResponse(
+        {"job_positions": dict(job_positions), "job_roles": dict(job_roles)}
+    )
+
+
+@login_required
+def get_job_positions_hx(request):
+    department_id = request.GET.get("department_id")
+    job_position_id = request.GET.get("job_position_id")
+    form = EmployeeWorkInformationUpdateForm()
+    if department_id:
+        job_positions = JobPosition.objects.filter(department_id=department_id)
+        form.fields["job_position_id"].queryset = job_positions
+        if job_position_id:
+            form.fields["job_position_id"].initial = job_position_id
+        else:
+            form.fields["job_position_id"].initial = (
+                form.fields["job_position_id"].queryset.first().id
+            )
+
+    job_position_field_html = render_to_string(
+        "cbv/dashboard/job_position_field.html",
+        {
+            "form": form,
+            "field_name": "job_position_id",
+            "field": form.fields["job_position_id"],
+        },
+    )
+    return HttpResponse(job_position_field_html)
 
 
 @login_required
@@ -3537,11 +3701,89 @@ def get_job_roles(request):
     JobRole model for job roles that match the provided job_position_id, and
     returns the results as a JSON response.
     """
-    job_id = request.GET.get("job_id")
-    job_roles = JobRole.objects.filter(job_position_id=job_id).values_list(
-        "id", "job_role"
+
+    job_position_id = request.GET.get("job_position_id")
+    job_position = JobPosition.objects.filter(id=job_position_id).first()
+    department = job_position.department_id if job_position else None
+    job_roles = (
+        JobRole.objects.filter(job_position_id=job_position_id).values_list(
+            "id", "job_role"
+        )
+        if job_position
+        else []
     )
-    return JsonResponse({"job_roles": dict(job_roles)})
+    all_departments = Department.objects.values_list("id", "department")
+    return JsonResponse(
+        {
+            "department_id": department.id if department else None,
+            "department_name": department.department if department else None,
+            "job_roles": dict(job_roles),
+            "departments": dict(all_departments),
+        }
+    )
+
+
+@login_required
+def get_position_department(request):
+    """
+    Retrieve job position and department associated with a specific job roles.
+
+    This view function extracts the job_id from the GET request, queries the
+    JobRole model for job roles that match the provided job_position_id, and
+    returns the results as a JSON response.
+    """
+
+    job_role_id = request.GET.get("job_role_id")
+    job_role = JobRole.objects.filter(id=job_role_id).first()
+    job_position = job_role.job_position_id if job_role else None
+    department = job_role.job_position_id.department_id if job_role else None
+
+    all_departments = Department.objects.values_list("id", "department")
+    all_job_position = (
+        JobPosition.objects.filter(department_id=department.id).values_list(
+            "id", "job_position"
+        )
+        if department
+        else []
+    )
+    return JsonResponse(
+        {
+            "job_position_id": job_position.id if job_position else None,
+            "job_position_name": job_position.job_position if job_position else None,
+            "job_positions": dict(all_job_position),
+            "departments": dict(all_departments),
+            "department_id": department.id if department else None,
+            "department_name": department.department if department else None,
+        }
+    )
+
+
+@login_required
+def get_job_roles_hx(request):
+    """
+    Retrieve job roles associated with a specific job position.
+
+    This view function extracts the job_id from the GET request, queries the
+    JobRole model for job roles that match the provided job_position_id, and
+    returns the results as a JSON response.
+    """
+    job_position_id = request.GET.get("job_position_id")
+    job_role_id = request.GET.get("job_role_id")
+    form = EmployeeWorkInformationUpdateForm()
+    if job_position_id:
+        job_role = JobRole.objects.filter(job_position_id=job_position_id)
+        form.fields["job_role_id"].queryset = job_role
+        if job_role_id:
+            form.fields["job_role_id"].initial = job_role_id
+    job_role_field_html = render_to_string(
+        "cbv/dashboard/job_role_field.html",
+        {
+            "form": form,
+            "field_name": "job_role_id",
+            "field": form.fields["job_role_id"],
+        },
+    )
+    return HttpResponse(job_role_field_html)
 
 
 @login_required
diff --git a/helpdesk/cbv/department_managers.py b/helpdesk/cbv/department_managers.py
new file mode 100644
index 000000000..4b5119a0c
--- /dev/null
+++ b/helpdesk/cbv/department_managers.py
@@ -0,0 +1,157 @@
+"""
+This page handles the department managers page in settings 
+"""
+from typing import Any
+from django.http import HttpResponse
+from django.utils.translation import gettext_lazy as _
+from django.utils.decorators import method_decorator
+from django.urls import reverse
+from django.contrib import messages
+from helpdesk.filter import DepartmentManagerFilter
+from helpdesk.forms import DepartmentManagerCreateForm
+from helpdesk.models import DepartmentManager
+from horilla_views.cbv_methods import login_required, permission_required
+from horilla_views.generic.cbv.views import (
+    HorillaFormView,
+    HorillaListView,
+    HorillaNavView,
+)
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(
+    permission_required(perm="helpdesk.add_departmentmanager"), name="dispatch"
+)
+class DepartmentManagersListView(HorillaListView):
+    """
+    List view of the resticted days page
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+
+        # self.action_method = "actions_col"
+        self.view_id = "department_managers"
+        self.search_url = reverse("department-manager-list")
+
+    model = DepartmentManager
+    filter_class = DepartmentManagerFilter
+
+    columns = [
+        (_("Department"), "department"),
+        (_("Manager"), "manager"),
+    ]
+
+    header_attrs = {
+        "department" : """
+                   style = "width:200px !important"
+                   """,
+        "manager" : """
+                   style = "width:200px !important"
+                   """,
+       
+    }
+
+    sortby_mapping = [
+        ("Department", "department__department"),
+        ("Manager", "manager__get_full_name"),
+    ]
+
+    actions = [
+        {
+            "action": "Edit",
+            "icon": "create-outline",
+            "attrs": """
+                    class="oh-btn oh-btn--light-bkg w-50"
+                    hx-get="{get_update_url}?instance_ids={ordered_ids}"
+                    hx-target="#genericModalBody"
+                    data-toggle="oh-modal-toggle"
+                    data-target="#genericModal"
+                    """,
+        },
+        {
+            "action": "Delete",
+            "icon": "trash-outline",
+            "attrs": """
+                    class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-50"
+                    hx-confirm="Are you sure you want to remove this department manager?"
+                    hx-target="#dapartmentManagerTr{get_instance_id}"
+                    hx-post="{get_delete_url}"
+                    hx-swap="innerHTML"
+                    """,
+        },
+    ]
+
+    row_attrs = """
+                id = "dapartmentManagerTr{get_instance_id}"
+                """
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(
+    permission_required(perm="helpdesk.add_departmentmanager"), name="dispatch"
+)
+class DepartmentManagersNav(HorillaNavView):
+    """
+    Nav bar
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("department-manager-list")
+        self.search_in = [
+            ("department__department", _("Department")),
+            (
+                "manager__employee_first_name",
+                "Manager",
+            ),
+        ]
+        self.create_attrs = f"""
+                            onclick = "event.stopPropagation();"
+                            data-toggle="oh-modal-toggle"
+                            data-target="#genericModal"
+                            hx-target="#genericModalBody"
+                            hx-get="{reverse('department-manager-create')}"
+                            """
+
+    nav_title = _("Department managers")
+    filter_instance = DepartmentManagerFilter()
+    search_swap_target = "#listContainer"
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(
+    permission_required(perm="helpdesk.add_departmentmanager"), name="dispatch"
+)
+class DepartmentManagersFormView(HorillaFormView):
+    """
+    Create and edit form for Department Manager
+    """
+
+    model = DepartmentManager
+    form_class = DepartmentManagerCreateForm
+    new_display_title = _("Create department manager")
+
+    def get_context_data(self, **kwargs):
+        """
+        Get context data for rendering the form view.
+        """
+        context = super().get_context_data(**kwargs)
+        if self.form.instance.pk:
+            self.form_class.verbose_name = _("Update department manager")
+        return context
+
+    def form_valid(self, form: DepartmentManagerCreateForm) -> HttpResponse:
+        """
+        Handle a valid form submission.
+        If the form is valid, save the instance and display a success message.
+        """
+        if form.is_valid():
+            if form.instance.pk:
+                message = _("The department manager updated successfully.")
+            else:
+                message = _("The department manager created successfully.")
+            form.save()
+            messages.success(self.request, message)
+            return self.HttpResponse()
+        return super().form_valid(form)
diff --git a/helpdesk/cbv/faq.py b/helpdesk/cbv/faq.py
new file mode 100644
index 000000000..4c2a58b6f
--- /dev/null
+++ b/helpdesk/cbv/faq.py
@@ -0,0 +1,99 @@
+"""
+This page handles the cbv methods for faq page
+"""
+
+from django.contrib import messages
+from django.http import HttpResponse
+from django.utils.translation import gettext_lazy as _
+from django.utils.decorators import method_decorator
+from base.forms import TagsForm
+from base.models import Tags
+from helpdesk.forms import FAQCategoryForm, FAQForm
+from horilla_views.cbv_methods import login_required, permission_required
+from helpdesk.models import FAQ, FAQCategory
+from helpdesk.cbv.tags import DynamicTagsCreateFormView
+from horilla_views.generic.cbv.views import HorillaFormView
+
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(permission_required("helpdesk_addfaqcategory"),name="dispatch")
+class FaqCategoryCreateFormView(HorillaFormView):
+    """
+    form view for create and update faq categories
+    """
+
+    form_class = FAQCategoryForm
+    model = FAQCategory
+    new_display_title = _("FAQ category Create")
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        if self.form.instance.pk:
+            self.form_class.verbose_name = _("FAQ category Update")
+
+        return context
+
+    def form_valid(self, form: FAQCategoryForm) -> HttpResponse:
+        if form.is_valid():
+            if form.instance.pk:
+                message = _("The FAQ category updated successfully.")
+            else:
+                message = _("The FAQ Category created successfully.")
+            form.save()
+
+            messages.success(self.request, _(message))
+            return self.HttpResponse("<script>location.reload();</script>")
+        return super().form_valid(form)
+    
+# class DynamicFaqTagCreate(HorillaFormView):
+#     """
+#     form view for dynamic creation of tags 
+#     """
+
+#     model = Tags
+#     form_class = TagsForm
+#     new_display_title = _("Create Tags")
+#     is_dynamic_create_view = True
+
+#     def form_valid(self, form: TagsForm) -> HttpResponse:
+       
+#         if form.is_valid():
+#             message = _("Tag Created")
+#             messages.success(self.request, _(message))
+#             form.save()
+#             return self.HttpResponse()
+#         return super().form_valid(form)
+
+    
+class FaqCreateFormView(HorillaFormView):
+    """
+    form view for create and update faqs
+    """
+
+    model =  FAQ
+    form_class = FAQForm
+    new_display_title = _("FAQ Create")
+    dynamic_create_fields = [("tags", DynamicTagsCreateFormView)]
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        category = self.kwargs.get("cat_id")
+        self.form.fields["category"].initial = category
+        if self.form.instance.pk:
+            self.form_class.verbose_name = _("FAQ Update")
+        context["form"] = self.form
+        return context
+    
+
+    def form_valid(self, form: FAQForm) -> HttpResponse:
+        if form.is_valid():
+            if form.instance.pk:
+                 messages.success(self.request,_("The FAQ updated successfully."))
+            else:
+                 messages.success(self.request,_("The FAQ created successfully."))
+            form.save()
+
+            return self.HttpResponse("<script>location.reload();</script>")
+        return super().form_valid(form)
+
diff --git a/helpdesk/cbv/pipeline.py b/helpdesk/cbv/pipeline.py
new file mode 100644
index 000000000..940e2307f
--- /dev/null
+++ b/helpdesk/cbv/pipeline.py
@@ -0,0 +1,227 @@
+from django.urls import reverse, reverse_lazy
+from base.methods import is_reportingmanager
+from helpdesk.filter import TicketFilter, TicketReGroup
+from helpdesk.models import TICKET_STATUS, Ticket
+from horilla_views.generic.cbv.pipeline import Pipeline
+from horilla_views.generic.cbv.views import (
+    HorillaListView,
+    HorillaNavView,
+    HorillaSectionView,
+    HorillaTabView,
+)
+from django.utils.decorators import method_decorator
+from horilla_views.cbv_methods import login_required
+
+
+@method_decorator(login_required, name="dispatch")
+class TicketPipelineView(HorillaSectionView):
+    """
+    Offboarding Pipeline View
+    """
+
+    nav_url = reverse_lazy("ticket-pipeline-nav")
+    view_url = reverse_lazy("get-ticket-tabs")
+    view_container_id = "pipelineContainer"
+    script_static_paths = ["tickets/action.js"]
+    template_name = "cbv/pipeline/ticket_section_view.html"
+
+
+@method_decorator(login_required, name="dispatch")
+class TicketPipelineNav(HorillaNavView):
+    """
+    Offboarding Pipeline Navigation View
+    """
+
+    nav_title = "Tickets"
+    search_swap_target = "#pipelineContainer"
+    search_url = reverse_lazy("ticket-tab")
+    filter_body_template = "cbv/pipeline/ticket_filter_form.html"
+    filter_instance = TicketFilter()
+    filter_form_context_name = "form"
+    group_by_fields = [
+        ("employee_id", "Owner"),
+        ("ticket_type", "Ticket Type"),
+        ("status", "Status"),
+        ("priority", "Priority"),
+        ("tags", "Tags"),
+        ("assigned_to", "Assigner"),
+        ("employee_id__employee_work_info__company_id", "Company"),
+    ]
+    actions = [
+        {
+            "action": "Archive",
+            "attrs": """
+                href="#"
+                role="button"
+                class="oh-dropdown__link"
+                onclick = "ticketBulkArchive(event)"
+            """
+        },
+        {
+            "action": "Unarchive",
+            "attrs": """
+                href="#"
+                role="button"
+                class="oh-dropdown__link"
+                onclick = "ticketBulkUnArchive(event)"
+            """
+        },
+        {
+            "action": "Delete",
+            "attrs": """
+                href="#"
+                role="button"
+                class="oh-dropdown__link oh-dropdown__link--danger"
+                onclick = "ticketsBulkDelete(event)"
+            """
+        },
+    ]
+
+    def __init__(self, **kwargs):
+        super().__init__(**kwargs)
+        self.create_attrs = f"""
+            class="oh-btn oh-btn--secondary"
+            hx-get="{reverse('ticket-create')}"
+            hx-target="#objectCreateModalTarget"
+            data-toggle="oh-modal-toggle"
+            data-target="#objectCreateModal"
+        """
+
+
+@method_decorator(login_required, name="dispatch")
+class TicketTabView(HorillaTabView):
+    """
+    Pipeline List View
+    """
+
+    def __init__(self, **kwargs):
+        super().__init__(**kwargs)
+
+        self.tabs = [
+            {
+                "title": "My Tickets",
+                # "url":f'{ reverse("ticket-pipeline-view")}?ticket_tab=my_tickets&',
+                "url":f'{ reverse("ticket-tab-list")}?ticket_tab=my_tickets&',
+            },
+            {
+                "title": "Suggested Tickets",
+                # "url":f'{ reverse("ticket-pipeline-view")}?ticket_tab=suggested_tickets&',
+                "url":f'{ reverse("ticket-tab-list")}?ticket_tab=suggested_tickets&',
+            }
+        ]
+        
+        if is_reportingmanager(self.request) or self.request.user.has_perm("helpdesk.view_ticket"):
+            self.tabs.append(
+                {
+                    "title": "All Tickets",
+                    # "url":f'{ reverse("ticket-pipeline-view")}?ticket_tab=all_tickets&',
+                    "url":f'{ reverse("ticket-tab-list")}?ticket_tab=all_tickets&',
+                }
+            )
+
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        context["show_filter_tags"] = True
+        return context
+
+
+# class TicketPipelineTabView(Pipeline):
+#     """
+#     Offboarding Pipeline View
+#     """
+#     grouper = "status"
+#     allowed_fields = [
+#         {
+#             "field" : "status",
+#             "model": Ticket,
+#             "url": reverse_lazy("ticket-tab-list"),
+#             "filter": TicketFilter,
+#             "parameters": [
+#                 "pipeline_status={status}",
+#             ],
+#             "actions": [],
+#         }
+#     ]
+#     def get_queryset(self):
+#         super().get_queryset()
+#         class Ticket():
+#             def __init__(self,status):
+#                 self.name = status
+#                 self.status = status[0]
+            
+#             def __str__(self):
+#                 return self.name[1]
+
+#         status = [Ticket(status) for status in TICKET_STATUS]
+#         self.queryset = status
+#         return self.queryset
+
+
+class TicketListView(HorillaListView):
+    """
+    Pipeline List View
+    """
+
+    model = Ticket
+    filter_class = TicketFilter
+    # custom_empty_template = "cbv/pipeline/empty_list.html"
+    bulk_update_fields = [
+        "ticket_type",
+        "status",
+        "priority",
+        "assigned_to",
+        "tags",
+    ]
+    columns = [
+        ("Ticket ID", "get_ticket_id_col"),
+        ("Title", "title"),
+        ("Owner", "employee_id"),
+        ("Type", "ticket_type"),
+        ("Forward to", "get_raised_on"),
+        ("Assigned to", "get_assigned_to"),
+        ("Status", "get_status_col"),
+        ("Priority", "get_priority_stars"),
+        ("Tags", "get_tags_col"),
+    ]
+
+    row_attrs = """
+        onclick="window.location.href = `{get_ticket_detail_url}`"
+        class = "{row_colors}"
+    """
+
+    action_method = """ticket_action_col"""
+    header_attrs = {"action": "style='width:200px'"}
+
+    def get_queryset(self):
+        queryset = super().get_queryset()
+        ticket_tab = self.request.GET.get("ticket_tab", "my_tickets")
+        if ticket_tab == "my_tickets":
+            return queryset.filter(employee_id=self.request.user.employee_get)
+
+        elif ticket_tab == "suggested_tickets":
+            employee = self.request.user.employee_get
+            qs_cpy = queryset
+            queryset = queryset.none()
+            if hasattr(employee, "employee_work_info"):
+                work_info = employee.employee_work_info
+                department = work_info.department_id
+                job_position = work_info.job_position_id
+
+                if department:
+                    queryset |= qs_cpy.filter(
+                        raised_on=department.id, assigning_type="department"
+                    )
+
+                if job_position:
+                    queryset |= qs_cpy.filter(
+                        raised_on=job_position.id, assigning_type="job_position"
+                    )
+
+            queryset |= qs_cpy.filter(
+                raised_on=employee.id, assigning_type="individual"
+            )
+            return queryset.distinct()
+
+        elif ticket_tab == "all_tickets":
+            return queryset.all()
diff --git a/helpdesk/cbv/tags.py b/helpdesk/cbv/tags.py
new file mode 100644
index 000000000..17d34a0a6
--- /dev/null
+++ b/helpdesk/cbv/tags.py
@@ -0,0 +1,167 @@
+"""
+This page is handling the cbv methods for Ticket types in settings
+"""
+
+from typing import Any
+from django.http import HttpResponse
+from django.shortcuts import render
+from django.urls import reverse
+from django.contrib import messages
+from django.utils.decorators import method_decorator
+from django.utils.translation import gettext_lazy as _
+from base.forms import TagsForm
+from base.models import Tags
+from helpdesk.filter import TagsFilter
+from helpdesk.forms import TicketTypeForm
+from horilla_views.cbv_methods import login_required, permission_required
+from horilla_views.generic.cbv.views import (
+    HorillaFormView,
+    HorillaListView,
+    HorillaNavView,
+)
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(permission_required(perm="helpdesk.view_tag"), name="dispatch")
+class TagsListView(HorillaListView):
+    """
+    list view for tickets in settings
+    """
+
+    model = Tags
+    filter_class = TagsFilter
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.view_id = "tagContainer"
+        self.search_url = reverse("helpdesk-tag-list")
+        self.actions = [
+        {
+            "action": _("Edit"),
+            "icon": "create-outline",
+            "attrs": """
+                        class="oh-btn oh-btn--light-bkg w-100"
+                        hx-get='{get_update_url}?instance_ids={ordered_ids}'
+								hx-target="#genericModalBody"
+								data-toggle="oh-modal-toggle"
+								data-target="#genericModal"
+                      """,
+        },
+        {
+            "action": _("Delete"),
+            "icon": "trash-outline",
+            "attrs": """
+                        class="oh-btn oh-btn--light-bkg w-100 text-danger"
+                        hx-confirm="Are you sure you want to delete this tag ?"
+                        hx-post="{get_delete_url}"
+                        hx-target="#tagTr{get_instance_id}"
+                        hx-swap="delete"      
+                        """,
+        },
+    ]
+        
+    columns = [(_("Title"), "title"), (_("Color"), "get_color")]
+
+    header_attrs = {
+        "title" :   """
+                   style = "width:200px !important"
+                   """,
+       
+    }
+
+
+    sortby_mapping = [
+        ("Title", "title")
+    ]
+    
+    row_attrs = """
+                id = "tagTr{get_instance_id}"
+                """
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(permission_required(perm="helpdesk.view_tag"), name="dispatch")
+class TagsNavView(HorillaNavView):
+    """
+    nav bar of the department view
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("helpdesk-tag-list")
+        self.create_attrs = f"""
+                            onclick = "event.stopPropagation();"
+                            data-toggle="oh-modal-toggle"
+                            data-target="#genericModal"
+                            hx-target="#genericModalBody"
+                            hx-get="{reverse('create-helpdesk-tag')}"
+                            """
+
+    nav_title = _("Helpdesk Tags")
+    search_swap_target = "#listContainer"
+    filter_instance = TagsFilter()
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(permission_required(perm="helpdesk.add_tag"), name="dispatch")
+class TagsFormView(HorillaFormView):
+    """
+    Form view for creating and updating Helpdesk Tags.
+    """
+
+    model = Tags
+    form_class = TagsForm
+    new_display_title = _("Create Helpdesk Tag")
+   
+
+    def get_context_data(self, **kwargs):
+        """
+        Get context data for rendering the form view.
+        """
+        context = super().get_context_data(**kwargs)
+        if self.form.instance.pk:
+            self.form_class(instance=self.form.instance)
+            self.form_class.verbose_name = _("Update Helpdesk Tag")
+        context["form"] = self.form
+        return context
+
+    def form_invalid(self, form: Any) -> HttpResponse:
+        """
+        Handle an invalid form submission.
+
+        If the form is invalid, render the form with error messages.
+        """
+        if self.form.instance.pk:
+            self.form_class.verbose_name = _("Update Helpdesk Tag")
+        if not form.is_valid():
+            errors = form.errors.as_data()
+            return render(
+                self.request, self.template_name, {"form": form, "errors": errors}
+            )
+        return super().form_invalid(form)
+
+    def form_valid(self, form: TicketTypeForm) -> HttpResponse:
+        """
+        Handle a valid form submission.
+
+        If the form is valid, save the instance and display a success message.
+        """
+        if form.is_valid():
+            if form.instance.pk:
+                messages.success(
+                    self.request, _("Tag has been updated successfully!")
+                )
+            else:
+                messages.success(
+                    self.request, _("Tag has been created successfully!")
+                )
+            form.save()
+            return self.HttpResponse()
+            # return HttpResponse("<script>$(document).ready(function(e) { $('#addTagModal').toggleClass('oh-modal--show')});</script>")
+            # return HttpResponse("<script>$('#addTagModal').find('.oh-modal--show').first().removeClass('.oh-modal--show');</script>")
+        return super().form_valid(form)
+
+class DynamicTagsCreateFormView(TagsFormView):
+
+    is_dynamic_create_view = True
+
diff --git a/helpdesk/cbv/ticket_type.py b/helpdesk/cbv/ticket_type.py
new file mode 100644
index 000000000..27cd1b738
--- /dev/null
+++ b/helpdesk/cbv/ticket_type.py
@@ -0,0 +1,237 @@
+"""
+this page is handling the cbv methods for Ticket types in settings
+"""
+
+from typing import Any
+from django.http import HttpResponse
+from django.shortcuts import render
+from django.urls import reverse
+from django.contrib import messages
+from django.utils.decorators import method_decorator
+from django.utils.translation import gettext_lazy as _
+from notifications.signals import notify
+from base.models import Attachment
+from helpdesk.cbv.tags import DynamicTagsCreateFormView
+from helpdesk.filter import TicketTypeFilter
+from helpdesk.forms import TicketForm, TicketTypeForm
+from helpdesk.models import Ticket, TicketType
+from helpdesk.threading import TicketSendThread
+from horilla_views.cbv_methods import login_required, permission_required
+from horilla_views.generic.cbv.views import (
+    HorillaFormView,
+    HorillaListView,
+    HorillaNavView,
+)
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(permission_required(perm="helpdesk.view_tickettype"), name="dispatch")
+class TicketsListView(HorillaListView):
+    """
+    list view for tickets in settings
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("ticket-list")
+        self.actions = []
+        if self.request.user.has_perm("helpdesk.change_tickettype"):
+            self.actions.append(
+                {
+                    "action": _("Edit"),
+                    "icon": "create-outline",
+                    "attrs": """
+                                class="oh-btn oh-btn--light-bkg w-100"
+                                hx-get='{get_update_url}?instance_ids={ordered_ids}'
+                                        hx-target="#genericModalBody"
+                                        data-toggle="oh-modal-toggle"
+                                        data-target="#genericModal"
+                            """,
+                },
+            )
+        if self.request.user.has_perm("helpdesk.delete_tickettype"):
+            self.actions.append(
+            {
+                "action": _("Delete"),
+                "icon": "trash-outline",
+                "attrs": """
+                        class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100"
+                        hx-get="{get_delete_url}?model=helpdesk.tickettype&pk={pk}"
+                        data-toggle="oh-modal-toggle"
+                        data-target="#deleteConfirmation"
+                        hx-target="#deleteConfirmationBody"
+                    """,
+            },
+        )
+
+    model = TicketType
+    filter_class = TicketTypeFilter
+
+    columns = [
+        (_("Ticket Type"), "title"),
+        (_("Type"), "type"),
+        (_("Prefix"), "prefix"),
+    ]
+
+    header_attrs = {
+        "title" : """
+                   style = "width:200px !important"
+                   """
+       
+    }
+
+
+    sortby_mapping = [
+        ("Ticket Type", "title"),
+        ("Type", "type"),
+        ("Prefix", "prefix"),
+    ]
+
+    row_attrs = """
+                id="ticketTypeTr{get_delete_instance}"
+                """ 
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(permission_required(perm="helpdesk.view_tickettype"), name="dispatch")
+class TicketsNavView(HorillaNavView):
+    """
+    nav bar of the department view
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("ticket-list")
+        self.create_attrs = f"""
+                            onclick = "event.stopPropagation();"
+                            data-toggle="oh-modal-toggle"
+                            data-target="#genericModal"
+                            hx-target="#genericModalBody"
+                            hx-get="{reverse('ticket-create-form')}"
+                            """
+
+    nav_title = _("Ticket Type")
+    search_swap_target = "#listContainer"
+    filter_instance = TicketTypeFilter()
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(permission_required(perm="helpdesk.add_tickettype"), name="dispatch")
+class TicketTypeCreateForm(HorillaFormView):
+    """
+    form view for creating and update tickets in settings
+    """
+
+    model = TicketType
+    form_class = TicketTypeForm
+    new_display_title = _("Create Ticket Type")
+    is_dynamic_create = True
+
+    def get_context_data(self, **kwargs):
+        """
+        Add form to context, initializing with instance if it exists.
+        """
+        context = super().get_context_data(**kwargs)
+        form = self.form_class()
+        if self.form.instance.pk:
+            form = self.form_class(instance=self.form.instance)
+            self.form_class.verbose_name = _("Update Ticket Type")
+        context[form] = form
+        return context
+
+    def form_invalid(self, form: Any) -> HttpResponse:
+        """
+        Handles and renders form errors or defers to superclass.
+        """
+        if self.form.instance.pk:
+            self.form_class.verbose_name = _("Update Ticket Type")
+        if not form.is_valid():
+            errors = form.errors.as_data()
+            return render(
+                self.request, self.template_name, {"form": form, "errors": errors}
+            )
+        return super().form_invalid(form)
+
+    def form_valid(self, form: TicketTypeForm) -> HttpResponse:
+        """
+        Handle valid form submission.
+        """
+        if form.is_valid():
+            if form.instance.pk:
+                messages.success(
+                    self.request, _("Ticket type has been updated successfully!")
+                )
+            else:
+                messages.success(
+                    self.request, _("Ticket type has been created successfully!")
+                )
+            form.save()
+            return self.HttpResponse()
+        return super().form_valid(form)
+    
+
+@method_decorator(login_required,name="dispatch")
+class TicketsCreateFormView(HorillaFormView):
+    """
+    form view for create and update tickets
+    """
+
+    model = Ticket
+    form_class = TicketForm
+    new_display_title = _("Create Ticket")
+    template_name = "cbv/tickets/inherit_form.html"
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        if self.request.user.has_perm("helpdesk.add_tickettype"):
+            self.dynamic_create_fields = [("ticket_type", TicketTypeCreateForm),
+                             ("tags", DynamicTagsCreateFormView)]
+    
+   
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        self.form.fields["employee_id"].initial = self.request.user.employee_get
+        status = self.request.GET.get("status")
+        self.form.fields["status"].initial = status
+        if self.form.instance.pk:
+            self.form_class.verbose_name = _("Update Ticket")
+        context["form"] = self.form
+        return context
+    
+    def form_valid(self, form: TicketForm) -> HttpResponse:
+        if form.is_valid():
+            if not form.instance.pk:
+                ticket = form.save()
+                attachments = form.files.getlist("attachment")
+                for attachment in attachments:
+                    attachment_instance = Attachment(file=attachment)
+                    attachment_instance.save()
+                mail_thread = TicketSendThread(self.request, ticket, type="create")
+                mail_thread.start()
+                messages.success(self.request, _("The Ticket created successfully."))
+                employees = ticket.assigned_to.all()
+                assignees = [employee.employee_user_id for employee in employees]
+                assignees.append(ticket.employee_id.employee_user_id)
+                if hasattr(ticket.get_raised_on_object(), "dept_manager"):
+                    if ticket.get_raised_on_object().dept_manager.all():
+                        manager = (
+                            ticket.get_raised_on_object().dept_manager.all().first().manager
+                        )
+                        assignees.append(manager.employee_user_id)
+                notify.send(
+                    self.request.user.employee_get,
+                    recipient=assignees,
+                    verb="You have been assigned to a new Ticket",
+                    verb_ar="لقد تم تعيينك لتذكرة جديدة",
+                    verb_de="Ihnen wurde ein neues Ticket zugewiesen",
+                    verb_es="Se te ha asignado un nuevo ticket",
+                    verb_fr="Un nouveau ticket vous a été attribué",
+                    icon="infinite",
+                    redirect=reverse("ticket-detail", kwargs={"ticket_id":ticket.id}),
+                )
+            else:
+                ticket = form.save()
+                messages.success(self.request,_("The Ticket updated successfully."))
+            
+            return HttpResponse("<script>window.location.reload();</script>")
+        return super().form_valid(form)
diff --git a/helpdesk/filter.py b/helpdesk/filter.py
index ae15cd1ac..87e902d95 100644
--- a/helpdesk/filter.py
+++ b/helpdesk/filter.py
@@ -5,11 +5,13 @@ This page is used to register filter for employee models
 
 """
 
+import django_filters
 from django import forms
 from django_filters import CharFilter, DateFilter
 
-from helpdesk.models import FAQ, FAQCategory, Ticket
-from horilla.filters import FilterSet
+from base.models import Tags
+from helpdesk.models import FAQ, DepartmentManager, FAQCategory, Ticket, TicketType
+from horilla.filters import FilterSet, HorillaFilterSet
 
 
 class FAQFilter(FilterSet):
@@ -74,6 +76,9 @@ class TicketFilter(FilterSet):
         lookup_expr="lte",
         widget=forms.DateInput(attrs={"type": "date"}),
     )
+    pipeline_status = django_filters.CharFilter(
+        field_name="status",
+    )
 
     class Meta:
         """
@@ -111,6 +116,64 @@ class TicketReGroup:
     ]
 
 
+class TicketTypeFilter(FilterSet):
+
+    search = CharFilter(method="search_method")
+
+    def search_method(self, queryset, _, value):
+        """
+        This method is used to search employees and objective
+        """
+
+        return (
+            queryset.filter(title__icontains=value)
+            | queryset.filter(type__icontains=value)
+            | queryset.filter(prefix__icontains=value)
+        ).distinct()
+
+    class Meta:
+        model = TicketType
+        fields = ["title", "type", "prefix"]
+
+
+class TagsFilter(FilterSet):
+
+    search = CharFilter(method="search_method")
+
+    def search_method(self, queryset, _, value):
+        """
+        This method is used to search employees and objective
+        """
+
+        return (queryset.filter(title__icontains=value)).distinct()
+
+    class Meta:
+        model = Tags
+        fields = [
+            "title",
+        ]
+
+
+class DepartmentManagerFilter(HorillaFilterSet):
+
+    search = django_filters.CharFilter(method="search_method")
+    search_field = django_filters.CharFilter(method="search_in")
+
+    class Meta:
+        model = DepartmentManager
+        fields = ["department", "manager"]
+
+    def search_method(self, queryset, _, value):
+        """
+        This method is used to search employees and objective
+        """
+
+        return (
+            (queryset.filter(department__department__icontains=value))
+            | queryset.filter(manager__employee_first_name__icontains=value)
+        ).distinct()
+
+
 class FaqSearch(FilterSet):
     search = CharFilter(method="search_method", lookup_expr="icontains")
 
diff --git a/helpdesk/forms.py b/helpdesk/forms.py
index a95f607d7..4d5949ebd 100644
--- a/helpdesk/forms.py
+++ b/helpdesk/forms.py
@@ -45,6 +45,8 @@ from horilla import horilla_middlewares
 
 class TicketTypeForm(ModelForm):
 
+    cols = {"title": 12, "type": 12, "prefix": 12}
+
     class Meta:
         model = TicketType
         fields = "__all__"
@@ -60,6 +62,9 @@ class TicketTypeForm(ModelForm):
 
 
 class FAQForm(ModelForm):
+
+    cols = {"question": 12, "answer": 12, "tags": 12}
+
     class Meta:
         model = FAQ
         fields = "__all__"
@@ -85,6 +90,8 @@ class FAQForm(ModelForm):
 
 
 class TicketForm(ModelForm):
+
+    cols = {"description": 12, "tags": 12}
     deadline = forms.DateField(widget=forms.DateInput(attrs={"type": "date"}))
 
     class Meta:
@@ -148,9 +155,9 @@ class TicketForm(ModelForm):
             self.fields["ticket_type"].choices = list(
                 self.fields["ticket_type"].choices
             )
-            self.fields["ticket_type"].choices.append(
-                ("create_new_ticket_type", "Create new ticket type")
-            )
+            # self.fields["ticket_type"].choices.append(
+            #     ("create_new_ticket_type", "Create new ticket type")
+            # )
         if is_reportingmanager(request) or request.user.has_perm("base.add_tags"):
             self.fields["tags"].choices = list(self.fields["tags"].choices)
             self.fields["tags"].choices.append(("create_new_tag", "Create new tag"))
@@ -203,6 +210,8 @@ class TicketAssigneesForm(ModelForm):
 
 
 class FAQCategoryForm(ModelForm):
+    cols = {"title": 12, "description": 12}
+
     class Meta:
         model = FAQCategory
         fields = "__all__"
@@ -239,6 +248,9 @@ class AttachmentForm(forms.ModelForm):
 
 
 class DepartmentManagerCreateForm(ModelForm):
+
+    cols = {"department": 12, "manager": 12}
+
     class Meta:
         model = DepartmentManager
         fields = ["department", "manager"]
@@ -252,11 +264,14 @@ class DepartmentManagerCreateForm(ModelForm):
 
     def __init__(self, *args, **kwargs):
         super().__init__(*args, **kwargs)
-        if "instance" in kwargs:
-            department = kwargs["instance"].department
-            # Get the employees related to this department
-            employees = department.employeeworkinformation_set.values_list(
-                "employee_id", flat=True
-            )
-            # Set the manager field queryset to be those employees
-            self.fields["manager"].queryset = Employee.objects.filter(id__in=employees)
+        if self.instance.pk:
+            if "instance" in kwargs:
+                department = kwargs["instance"].department
+                # Get the employees related to this department
+                employees = department.employeeworkinformation_set.values_list(
+                    "employee_id", flat=True
+                )
+                # Set the manager field queryset to be those employees
+                self.fields["manager"].queryset = Employee.objects.filter(
+                    id__in=employees
+                )
diff --git a/helpdesk/models.py b/helpdesk/models.py
index a664c8271..f9bb29736 100644
--- a/helpdesk/models.py
+++ b/helpdesk/models.py
@@ -1,18 +1,20 @@
 import os
-from datetime import datetime
+from datetime import date, datetime
 
-from django import apps
 from django.db import models
-from django.db.models.signals import post_delete, post_save
 from django.forms import ValidationError
+from django.middleware.csrf import get_token
+from django.urls import reverse_lazy
 from django.utils.translation import gettext_lazy as _
 
 from base.horilla_company_manager import HorillaCompanyManager
 from base.models import Company, Department, JobPosition, Tags
 from employee.models import Employee
+from horilla.horilla_middlewares import _thread_locals
 from horilla.models import HorillaModel
 from horilla_audit.methods import get_diff
 from horilla_audit.models import HorillaAuditInfo, HorillaAuditLog
+from horilla_views.cbv_methods import render_template
 
 PRIORITY = [
     ("low", "Low"),
@@ -59,8 +61,27 @@ class DepartmentManager(HorillaModel):
     company_id = models.ForeignKey(
         Company, null=True, editable=False, on_delete=models.PROTECT
     )
+
     objects = HorillaCompanyManager("manager__employee_work_info__company_id")
 
+    def get_update_url(self):
+        """
+        This method to get update url
+        """
+
+        url = reverse_lazy("department-manager-update-view", kwargs={"pk": self.pk})
+        return url
+
+    def get_delete_url(self):
+        """
+        This method to get delete url
+        """
+        url = reverse_lazy("department-manager-delete", kwargs={"dep_id": self.pk})
+        return url
+
+    def get_instance_id(self):
+        return self.id
+
     class Meta:
         unique_together = ("department", "manager")
         verbose_name = _("Department Manager")
@@ -84,6 +105,27 @@ class TicketType(HorillaModel):
     def __str__(self):
         return self.title
 
+    def get_update_url(self):
+        """
+        This method to get update url
+        """
+        url = reverse_lazy("ticket-update-form", kwargs={"pk": self.pk})
+        return url
+
+    def get_delete_url(self):
+        """
+        This method to get delete url
+        """
+        url = reverse_lazy("generic-delete")
+        return url
+
+    def get_delete_instance(self):
+        """
+        to get instance for delete
+        """
+
+        return self.pk
+
     class Meta:
         verbose_name = _("Ticket Type")
         verbose_name_plural = _("Ticket Types")
@@ -156,6 +198,182 @@ class Ticket(HorillaModel):
             raised_on = Employee.objects.get(id=obj_id)
         return raised_on
 
+    def get_ticket_id_col(self):
+        """
+        This method is used to get the ticket id
+        """
+        today = date.today()
+        ticket_id = f"{self.ticket_type.prefix}-{self.pk:03d}"
+
+        if self.deadline == today:
+            due_text = "Due today"
+        else:
+            days_diff = (self.deadline - today).days
+            if days_diff < 0:
+                days_diff = abs(days_diff)
+                due_text = f"Overdue by {days_diff} days"
+            else:
+                due_text = f"Due in {days_diff} days"
+
+        if self.deadline < today:
+            icon_class = "danger"
+        elif self.deadline == today:
+            icon_class = "warning"
+        else:
+            icon_class = "success"
+
+        col = f"""
+            <span
+                class='
+                    d-flex
+                    justify-content-between
+                    align-items-center
+                '
+            >
+                {ticket_id}
+                <span title='{due_text}'>
+                    <ion-icon
+                        class="text-{icon_class}"
+                        name="time-sharp"
+                    >
+                    </ion-icon>
+                </span>
+            </span>
+        """
+        return col
+
+    def get_ticket_detail_url(self):
+        """
+        This method is used to get the ticket detail url
+        """
+        return reverse_lazy("ticket-detail", kwargs={"ticket_id": self.pk})
+
+    def get_assigned_to(self):
+        """
+        This method is used to get the assigned to
+        """
+        assigned_to = self.assigned_to.all()
+        if assigned_to:
+            assigned_to = ", ".join([emp.get_full_name() for emp in assigned_to])
+
+        return assigned_to
+
+    def get_tags_col(self):
+        """
+        This method is used to get the tags column
+        """
+        tags = self.tags.all()
+        if tags:
+            tags = ", ".join([tag.title for tag in tags])
+
+        return tags
+
+    def get_priority_stars(self):
+        """
+        This method is used to get the priority stars
+        """
+        request = getattr(_thread_locals, "request", None)
+        csrf_token = get_token(request)
+        rating_inputs = ""
+        checked_value = {"low": "1", "medium": "2", "high": "3"}.get(self.priority, "1")
+
+        for i in "321":
+            checked = "checked" if i == checked_value else ""
+            title = {"1": _("Low"), "2": _("Medium"), "3": _("High")}[i]
+
+            rating_inputs += f"""
+                <input type="radio" id="star{i}{self.id}" name="rating" class="rating-radio" value="{i}" {checked} />
+                <label for="star{i}{self.id}" title="{title}"></label>
+            """
+
+        html = f"""
+            <form hx-swap="none" hx-post="{reverse_lazy('update-priority', kwargs = {'ticket_id' : self.id})}" method="post">
+                <input type="hidden" name="csrfmiddlewaretoken" value="{csrf_token}">
+                <div class="d-flex">
+                    <div class="oh-rate" onclick="event.stopPropagation();$(this).parents().closest('form').find('button').click()">
+                        {rating_inputs}
+                    </div>
+                    <button type="submit" hidden="true" onclick="event.stopPropagation()"></button>
+                </div>
+            </form>
+        """
+        return html
+
+    def row_colors(self):
+        """
+        This method is used to get the row colors
+        """
+        if self.status == "new":
+            return "row-status--blue"
+        elif self.status == "in_progress":
+            return "row-status--orange"
+        elif self.status == "on_hold":
+            return "row-status--red"
+        elif self.status == "resolved":
+            return "row-status--yellowgreen"
+        elif self.status == "canceled":
+            return "row-status--gray"
+
+    def ticket_action_col(self):
+        """
+        This method is used to get the ticket actions
+        """
+        request = getattr(_thread_locals, "request", None)
+        tab_name = request.GET.get("ticket_tab", "my_tickets")
+        claim_request = self.claimrequest_set.filter(
+            employee_id=request.user.employee_get
+        ).first()
+        return render_template(
+            "cbv/pipeline/pipeline_action_col.html",
+            {"ticket": self, "tab": tab_name, "claim_request": claim_request},
+        )
+
+    def get_status_col(self):
+        """
+        This method is used to get the status column
+        """
+
+        from helpdesk.methods import is_department_manager
+
+        request = getattr(_thread_locals, "request", None)
+        options = ""
+        for status, name in TICKET_STATUS:
+            selected = "selected" if status == self.status else ""
+            options += f"""
+                <option value="{status}" {selected}>
+                    {name}
+                </option>
+            """
+
+        col = self.get_status_display()
+        if (
+            request.user.employee_get == self.employee_id
+            or request.user.has_perm("helpdesk.change_ticket")
+            or request.user.employee_get in self.assigned_to.all()
+            or is_department_manager(request, self)
+        ):
+            col = f"""
+                <div onclick="event.stopPropagation()" >
+                    <select
+                        hx-post="{reverse_lazy('ticket-status-change', kwargs={'ticket_id': self.id})}"
+                        name="status"
+                        id="status"
+                        hx-swap="none"
+                        hx-on-htmx-after-request="$('#reloadMessagesButton').click();$(`#offboardingStageContainer{{instance.stage_id.pk}}`).find('.reload-record').click()"
+                        name="status"
+                        class="w-100"
+                        style="
+                            border: 1px solid hsl(213deg, 22%, 84%);
+                            padding: 0.3rem 0.8rem 0.3rem 0.3rem;
+                            border-radius: 0rem;
+                        "
+                    >
+                        {options}
+                    </select>
+                </div>
+            """
+        return col
+
     def __str__(self):
         return self.title
 
diff --git a/helpdesk/templates/cbv/pipeline/empty_list.html b/helpdesk/templates/cbv/pipeline/empty_list.html
new file mode 100644
index 000000000..fe4dbd7e5
--- /dev/null
+++ b/helpdesk/templates/cbv/pipeline/empty_list.html
@@ -0,0 +1,8 @@
+{% load i18n %}
+<div class="oh-wrapper" align="center" style="margin-top: 2vh; margin-bottom:2vh;">
+    <div align="center">
+      <p class="oh-404__subtitle">
+        {% trans "No records found." %}
+      </p>
+    </div>
+  </div>
\ No newline at end of file
diff --git a/helpdesk/templates/cbv/pipeline/pipeline_action_col.html b/helpdesk/templates/cbv/pipeline/pipeline_action_col.html
new file mode 100644
index 000000000..d73b985fb
--- /dev/null
+++ b/helpdesk/templates/cbv/pipeline/pipeline_action_col.html
@@ -0,0 +1,138 @@
+{% load static i18n helpdeskfilters %}
+<div class="oh-btn-group" style="border:none">
+    {% if tab != 'my_tickets' %}
+        {% if perms.helpdesk.change_ticket or perms.helpdesk.change_claimrequest or request.user.employee_get|is_department_manager:ticket %}
+            <button
+                hx-get = "{% url "view-ticket-claim-request" ticket.id %}"
+                hx-target="#objectDetailsModalTarget"
+                data-toggle="oh-modal-toggle"
+                data-target="#objectDetailsModal"
+                class="oh-btn oh-btn--light-bkg p-3 w-100" 
+                title = "{% trans "Claim Requests" %}"
+            >
+                <ion-icon name="eye-outline"></ion-icon>
+            </button>
+        {% else %}
+            {% if claim_request or request.user.employee_get in ticket.assigned_to.all %}
+                <a 
+                    href="#"
+                    class="
+                        oh-btn oh-btn--info oh-btn--disabled w-100
+                        {% if request.user.employee_get in ticket.assigned_to.all %}
+                            bg-success
+                        {% elif claim_request.is_rejected %}
+                            bg-danger
+                        {% endif %}
+                    "
+                    title="{% trans 'Claim' %}"
+                >
+                    <ion-icon name="checkmark-done-outline"></ion-icon>
+                </a>
+            {% else %}
+                <a
+                    type="submit"
+                    href = "{% url 'claim-ticket' ticket.id %}"
+                    class="oh-btn oh-btn--info w-100"
+                    title="{% trans 'Claim' %}"
+                >
+                    <ion-icon name="checkmark-done-outline"></ion-icon>
+                </a>
+            {% endif %}
+        {% endif %}
+    {% endif %}
+
+    {% if perms.helpdesk.change_ticket or request.user.employee_get|is_department_manager:ticket %}
+        <button
+            class="oh-btn oh-btn--light-bkg p-3 w-100"
+            title="{% trans 'Edit' %}"
+            data-toggle="oh-modal-toggle"
+            data-target="#objectCreateModal"
+            hx-get="{% url 'ticket-update' ticket.id %}"
+            hx-target="#objectCreateModalTarget"
+        >
+            <ion-icon name="create-outline"></ion-icon>
+        </button>
+    {% endif %}
+    {% if perms.helpdesk.change_ticket or request.user.employee_get|is_department_manager:ticket %}
+        {% if ticket.is_active %}
+            <form
+                action="{% url 'ticket-archive' ticket.id %}"
+                class="w-50"
+                onsubmit="event.stopPropagation();return confirm('{% trans "Do you want to archive this ticket?" %}');"
+                method="post"
+                style="display: contents"
+            >
+                {% csrf_token %}
+                <button
+                    class="oh-btn oh-btn--danger-outline p-3 w-100"
+                    title="{% trans 'Archive' %}"
+                >
+                <ion-icon
+                    name="archive-sharp"
+                    role="img"
+                    class="md hydrated"
+                    aria-label="archive sharp"
+                ></ion-icon>
+                </button>
+            </form>
+        {% else %}
+            <form
+                action="{% url 'ticket-archive' ticket.id %}"
+                class="w-100"
+                onsubmit="event.stopPropagation();return confirm('{% trans "Do you want to un-archive this ticket?" %}');"
+                method="post"
+                style="display: contents"
+            >
+                {% csrf_token %}
+                <button
+                    class="oh-btn oh-btn--danger-outline p-3 w-50"
+                    title="{% trans 'Un-archive' %}"
+                >
+                    <ion-icon
+                        name="archive-sharp"
+                        role="img"
+                        class="md hydrated"
+                        aria-label="archive sharp"
+                    ></ion-icon>
+                </button>
+            </form>
+        {% endif %}
+    {% endif %}
+    {% if perms.helpdesk.delete_ticket %}
+        {% if ticket.status == 'new' %}
+            <form
+                action="{% url 'ticket-delete' ticket.id %}"
+                class="w-100"
+                onsubmit="return confirm('{% trans 'Are you sure you want to delete	this Ticket?' %}');"
+                method='post' onclick="event.stopPropagation()" 
+            >
+                {% csrf_token %}
+                <button
+                    type="submit"
+                    class="oh-btn oh-btn--danger-outline oh-btn--light-bkg p-3"
+                    title="{% trans 'Delete' %}"
+                >
+                    <ion-icon
+                        class="me-1 md hydrated"
+                        name="trash-outline"
+                        role="img"
+                        aria-label="trash outline"
+                    ></ion-icon>
+                </button>
+            </form>
+        {% else %}
+            <button
+                class="oh-btn oh-btn--danger-outline oh-btn--light-bkg p-3 w-100"
+                disabled
+                title="{% trans 'Delete' %}"
+            >
+                <ion-icon
+                    class="me-1 md hydrated"
+                    name="trash-outline"
+                    role="img"
+                    aria-label="trash outline"
+                ></ion-icon>
+            </button>
+        {% endif %}
+    {% endif %}
+</div>
\ No newline at end of file
diff --git a/helpdesk/templates/cbv/pipeline/ticket_filter_form.html b/helpdesk/templates/cbv/pipeline/ticket_filter_form.html
new file mode 100644
index 000000000..9c21c3596
--- /dev/null
+++ b/helpdesk/templates/cbv/pipeline/ticket_filter_form.html
@@ -0,0 +1,71 @@
+{% load static i18n %}
+    <input type="hidden" name="view" id="filterView" value="{{request.GET.view}}">
+    <div class="oh-dropdown__filter-body">
+        <div class="oh-accordion">
+            <div
+                class="oh-accordion-header"
+            >
+                {% trans "Tickets" %}
+            </div>
+            <div class="oh-accordion-body">
+                <div class="row">
+                    <div class="col-sm-12 col-md-12 col-lg-12">
+                        <div class="oh-input-group">
+                            <label class="oh-label" for="{{form.ticket_type.id_for_label}}">{% trans "Ticket Type" %}</label>
+                            {{form.ticket_type}}
+                        </div>
+                    </div>
+                    <div class="col-sm-12 col-md-12 col-lg-6">
+                        <div class="oh-input-group">
+                            <label class="oh-label" for="{{form.employee_id.id_for_label}}">{% trans "Owner" %}</label>
+                            {{form.employee_id}}
+                        </div>
+                    </div>
+                    <div class="col-sm-12 col-md-12 col-lg-6">
+                        <div class="oh-input-group">
+                            <label class="oh-label" for="{{form.assigned_to.id_for_label}}">{% trans "Assigned to" %}</label>
+                            {{form.assigned_to}}
+                        </div>
+                    </div>
+                    <div class="col-sm-12 col-md-12 col-lg-6">
+                        <div class="oh-input-group">
+                            <label class="oh-label" for="{{form.to_date.id_for_label}}"
+                                >{% trans "Till date" %}</label
+                            >
+                            {{form.to_date}}
+                        </div>
+                    </div>
+                    <div class="col-sm-12 col-md-12 col-lg-6">
+                        <div class="oh-input-group">
+                            <label class="oh-label" for="{{form.priority.id_for_label}}"
+                                >{% trans "Priority" %}</label
+                            >
+                            {{form.priority}}
+                        </div>
+                    </div>
+                    <div class="col-sm-12 col-md-12 col-lg-6">
+                        <div class="oh-input-group">
+                            <label class="oh-label" for="{{form.tags.id_for_label}}"
+                                >{% trans "Tags" %}</label
+                            >
+                            {{form.tags}}
+                        </div>
+                    </div>
+                    <div class="col-sm-12 col-md-12 col-lg-6">
+                        <div class="oh-input-group">
+                            <label class="oh-label" for="{{form.is_active.id_for_label}}"
+                                >{% trans "Is Active" %}</label
+                            >
+                            {{form.is_active}}
+                        </div>
+                    </div>
+                    <div class="col-sm-12 col-md-12">
+                        <div class="oh-input-group">
+                            <label class="oh-label" for="{{form.status.id_for_label}}">{% trans "Status" %}</label>
+                            {{form.status}}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
diff --git a/helpdesk/templates/cbv/pipeline/ticket_section_view.html b/helpdesk/templates/cbv/pipeline/ticket_section_view.html
new file mode 100644
index 000000000..c01578f83
--- /dev/null
+++ b/helpdesk/templates/cbv/pipeline/ticket_section_view.html
@@ -0,0 +1,10 @@
+{% load static i18n %}
+{% include "generic/horilla_section.html" %}
+
+<div
+    class="oh-checkpoint-badge mb-2"
+    id="selectedTickets"
+    data-ids="[]"
+    data-clicked=""
+    style="display: none"
+></div>
diff --git a/helpdesk/templates/cbv/tickets/inherit_form.html b/helpdesk/templates/cbv/tickets/inherit_form.html
new file mode 100644
index 000000000..92c409799
--- /dev/null
+++ b/helpdesk/templates/cbv/tickets/inherit_form.html
@@ -0,0 +1,90 @@
+{% include 'generic/horilla_form.html' %}
+<div hidden id="cur_raised_on" value="{{form.instance.raised_on}}">
+    {{form.instance.raised_on}}
+</div>
+<script>
+    $(document).ready(function () {
+        var assigning_type = $('#id_assigning_type').find(":selected").val();
+        if (assigning_type) {
+            $.ajax({
+                type: "GET",
+                url: "/helpdesk/get-raised-on",
+                data: {
+                    'assigning_type': assigning_type,
+                },
+                success: function (response) {
+                    var raised_on = response.raised_on;
+                    var cur_raised_on = $("#cur_raised_on").attr("value");
+                    // Clear the existing options
+                    $("#id_raised_on").empty();
+                    var options = $('<option value="" >').text("---------");
+                    $("#id_raised_on").append(options);
+
+                    $.each(raised_on, function (id, obj) {
+                        // looping all raised_on
+                        var options = $(
+                            '<option value="' +
+                                obj.id +
+                                '" ' +
+                                (obj.id == cur_raised_on
+                                    ? 'selected="selected"'
+                                    : "") +
+                                ">"
+                        ).text(obj.name);
+                        $("#id_raised_on").append(options);
+                    });
+                },
+            });
+        }
+
+        $("#id_assigning_type").change(function () {
+            var assigning_type = $(this).find(":selected").val();
+            $.ajax({
+                type: "GET",
+                url: "/helpdesk/get-raised-on",
+                data: {
+                    assigning_type: assigning_type,
+                },
+                success: function (response) {
+                    var raised_on = response.raised_on;
+                    // Clear the existing options
+                    $("#id_raised_on").empty();
+                    var options = $(
+                        `<option value=" " selected="selected">`
+                    ).text(`---------`);
+
+                    $("#id_raised_on").append(options);
+                    $.each(raised_on, function (id, obj) {
+                        // looping all raised_on
+                        var options = $(`<option value=" ${obj.id}">`).text(
+                            obj.name
+                        );
+                        $("#id_raised_on").append(options);
+                    });
+                },
+            });
+        });
+        $("#id_tags").change(function () {
+            var selectedValues = $("#id_tags option:selected")
+                .map(function () {
+                    return $(this).val();
+                })
+                .get();
+            // Check if 'create_new_tag' exists in the list
+            if (selectedValues.includes("create_new_tag")) {
+                $("#createTagModal").addClass("oh-modal--show");
+            }
+        });
+
+        $("#id_ticket_type").change(function () {
+
+            var selectedValue = $(this).find(":selected").val(); // Get the selected value
+
+            // Check if 'create_new_ticket_type' is selected
+            if (selectedValue == "create_new_ticket_type") {
+
+                $("#createTicketTypeModal").addClass("oh-modal--show");
+            }
+        });
+    });
+</script>
\ No newline at end of file
diff --git a/helpdesk/templates/department_managers/department_managers.html b/helpdesk/templates/department_managers/department_managers.html
index d8a87f195..d78d29369 100644
--- a/helpdesk/templates/department_managers/department_managers.html
+++ b/helpdesk/templates/department_managers/department_managers.html
@@ -1,6 +1,10 @@
 {% extends 'settings.html' %}
 {% load i18n %}
 {% block settings %}{% load static %}
+<meta name="csrf-token" content="{{ csrf_token }}">
+{% include "generic/components.html" %}
+
+
 <div class="oh-inner-sidebar-content">
     {% if perms.helpdesk.view_departmentmanager %}
         <div class="oh-inner-sidebar-content__header d-flex justify-content-between align-items-center">
@@ -17,18 +21,37 @@
                 {% trans "Create" %}
             </button>
 			{% endif %}
-        </div>
-		{% if department_managers %}
+        </div> {% endcomment %}
+		{% comment %} ------------------------------------------------------ {% endcomment %}
+
+		<div
+    class="oh-checkpoint-badge mb-2"
+    id="selectedInstances"
+    data-ids="[]"
+    data-clicked=""
+    style="display: none"
+  ></div>
+
+
+  <div
+  class="oh-wrapper"
+  id="listContainer">
+  <div class="animated-background">
+  </div>
+</div>
+
+		{% comment %} ---------------------------------------------------- {% endcomment %}
+		{% comment %} {% if department_managers %}
 			{% include 'department_managers/department_managers_view.html' %}
         {% else %}
             <div style="display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%;">
                 <img style="display: block; width: 15%; margin: 20px auto; filter: opacity(0.5);" src="{% static 'images/ui/manager.png' %}" class="" alt="Page not found. 404." />
                 <h5 class="oh-404__subtitle">{% trans "There is no department managers at this moment." %}</h5>
             </div>
-        {% endif %}
+        {% endif %} {% endcomment %}
     {% endif %}
 
-</div>
+ </div>
 
 <button id="getDepartmentEmployeesButton" hx-get="{% url "get-department-employee" %}" hx-target="#id_manager" hidden></button>
 <script>
diff --git a/helpdesk/templates/helpdesk/faq/load_faq.html b/helpdesk/templates/helpdesk/faq/load_faq.html
index b9b3793a1..63eb15458 100644
--- a/helpdesk/templates/helpdesk/faq/load_faq.html
+++ b/helpdesk/templates/helpdesk/faq/load_faq.html
@@ -22,7 +22,7 @@
             {% for cat_id, category in catagories.items %}
                 <div class="oh-accordion">
                     <div class="oh-accordion-header">{{category}}</div>
-                    <div 
+                    <div
                         class="oh-accordion-body"
                         style="
                             max-height: 500px; overflow-y: auto;
@@ -108,4 +108,4 @@
             $(".selectAll").click();
         });
     });
-</script>
\ No newline at end of file
+</script>
diff --git a/helpdesk/templates/helpdesk/ticket/forms/add_tag.html b/helpdesk/templates/helpdesk/ticket/forms/add_tag.html
deleted file mode 100644
index 1b26a1cd3..000000000
--- a/helpdesk/templates/helpdesk/ticket/forms/add_tag.html
+++ /dev/null
@@ -1,583 +0,0 @@
-{% load i18n %}
-  <div
-    class="oh-dropdown__menu oh-dropdown__menu--top-align oh-dropdown__filter p-4"
-    style="right: 57px;bottom:100px"
-    {% comment %} x-data="{open: true}"
-    x-show="open"
-    @click.outside="open = false" {% endcomment %}
-  >
-    <form action="{% url 'ticket-change-tag' ticket_id %}" method="post" enctype="multipart/form-data">
-      {% csrf_token %}
-      <div class="oh-input-group">
-        <label for="id_name" class="oh-label">{% trans 'Tags' %}</label>
-        {{form.tags}}
-      </div>
-      <button
-        type="submit"
-        class="oh-btn oh-d-hide oh-btn--small oh-btn--secondary oh-btn--add-advanced-tab w-100 mt-3 mb-2"
-      >
-        <ion-icon class="me-1" name="add-circle-outline"></ion-icon>
-        {% trans 'Save Changes' %}
-      </button>
-    </form>
-  </div>
-
-  <div
-	class="oh-modal"
-	id="editModal"
-	role="dialog"
-	aria-labelledby="editDialogModal"
-	aria-hidden="true"
->
-	<div class="oh-modal__dialog">
-		<div class="oh-modal__dialog-header">
-			<h2 class="oh-modal__dialog-title" id="editTitle">
-				{% trans "Create Tag" %}
-			</h2>
-			<button class="oh-modal__close" aria-label="Close">
-				<ion-icon name="close-outline"></ion-icon>
-			</button>
-		</div>
-		<div class="oh-modal__dialog-body" id="editTarget">
-      <form
-        hx-post="{% url 'create-tag' %}"
-        hx-target="#addTagTarget"
-        method="post"
-        hx-encoding="multipart/form-data"
-      >
-        {% csrf_token %}
-        {{tag_form.as_p}}
-        <button
-          type="submit"
-          class="oh-btn oh-btn--secondary mt-2 mr-0 oh-btn--w-100-resp"
-        >
-          {% trans "Save" %}
-        </button>
-      </form>
-    </div>
-	</div>
-</div>
-
-<script>
-  $(document).ready(function(){
-    $("#id_tags").on("change",function(){
-      tag = $(this).val()
-      // Check if 'create_new_tag' exists in the list
-      if (tag.includes('create_new_tag')) {
-        {% comment %} $.ajax({
-            type: "GET",
-            url: '/helpdesk/create-tag',
-            success: function (response) {
-              $("#editModal").addClass("oh-modal--show");
-              $("#editTarget").html(response);
-            },
-          });    {% endcomment %}
-          $("#editModal").addClass("oh-modal--show");
-      }
-    });
-  })
-</script>
-
-
-{% extends 'index.html' %}  {% load static %} {% load i18n %}
-{% load basefilters %}
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Helpdesk</title>
-    <link rel="stylesheet" href="./build/css/style.min.css" />
-  </head>
-
-  <body>
-    <div class="oh-wrapper-main">
-      {% comment %} <div id="sidebar"></div> {% endcomment %}
-      {% block content %}
-
-      <div id="main">
-        <!-- Navigation -->
-        <div id="mainNav"></div>
-        <div id="ohMessages"></div>
-        <!-- End of Navigation -->
-        <main :class="sidebarOpen ? 'oh-main__sidebar-visible' : ''">
-          <div class="oh-helpdesk">
-            <div class="oh-helpdesk__left">
-              <div class="oh-helpdesk__header">
-                <div>
-                  <p class="oh-helpdesk__header-title">{{ticket.title}}</p>
-                </div>
-              <!-- Description Goes Here -->
-              </div>
-              <div class="oh-helpdesk__body">
-                <div class="oh-helpdesk__chat-container">
-                  <div class="oh-helpdesk__bubble oh-helpdesk__bubble--sender">
-                    <div class="oh-helpdesk__bubble-header">
-                      <div class="oh-helpdesk__bubble-user">
-                        <div class="oh-profile oh-profile--md">
-                          <div class="oh-profile__avatar mr-1">
-                            <img
-                              src="https://ui-avatars.com/api/?name={{ticket.employee_id}}&background=random"
-                              class="oh-profile__image"
-                              alt="oh-link--secondary" />
-                          </div>
-                        </div>
-                        <span class="oh-helpdesk__bubble-username">{{ticket.employee_id}}</span>
-                      </div>
-                      <span class="oh-helpdesk__bubble-timestamp"
-                        >{{ticket.created_date}}</span
-                      >
-                    </div>
-                    <div class="oh-helpdesk__bubble-body">
-                      <p>{{ticket.description}}</p>
-
-                    </div>
-                  </div>
-
-                  {% for comment in ticket.comment.all %}
-                    {% if comment.employee_id == ticket.employee_id %}
-                      <div class="oh-helpdesk__comment--container" >
-                        <div class="oh-helpdesk__bubble oh-helpdesk__bubble--comment" style="width:96%">
-                          <div class="oh-helpdesk__bubble-header">
-                            <div class="oh-helpdesk__bubble-user">
-                              <div class="oh-profile oh-profile--md">
-                                <div class="oh-profile__avatar mr-1">
-                                  <img
-                                    src="https://ui-avatars.com/api/?name={{comment.employee_id}}&background=random"
-                                    class="oh-profile__image"
-                                    alt="{{comment.employee_id}}" />
-                                </div>
-                              </div>
-                              <span class="oh-helpdesk__bubble-username">{{comment.employee_id}}</span>
-                              {% comment %} <span class="oh-text--xs oh-badge oh-badge--info ms-2"
-                                >Private</span
-                              > {% endcomment %}
-                            </div>
-                            <span class="oh-helpdesk__bubble-timestamp"
-                              >{{comment.date}}
-                            </span>
-                          </div>
-                          <div class="oh-helpdesk__bubble-body">
-                            <span class="oh-helpdesk__comment">
-                              {{comment.comment}}
-                            </span>
-                              {% if comment.comment_attachment.all %}
-                                {% for attachment in comment.comment_attachment.all %}
-                                <div class="oh-helpdesk_attached-items">
-                                  <div class="oh-helpdesk_attached--content">
-                                    {% with extension=attachment.file.name|lower|slice:"-4:" %}
-                                        <li class="oh-helpdesk__document">
-                                          <a href="{{ attachment.file.url }}" target="_blank">
-                                            <div class="oh-helpdesk__icon">
-                                              <span class="oh-file-icon
-                                                {% if extension == '.pdf' %} oh-file-icon--pdf
-                                                {% elif extension in '.jpg .jpeg .png .gif .svg' %} oh-file-icon--image
-                                                {% elif extension in '.mp3 .wav .ogg' %} oh-file-icon--audio
-                                                {% elif extension in '.doc .docx' %} oh-file-icon--word
-                                                {% elif extension in '.xls .xlsx' %} oh-file-icon--excel
-                                                {% elif extension in '.ppt .pptx' %} oh-file-icon--powerpoint
-                                                {% elif extension in '.html' %} oh-file-icon--html
-                                                {% else %} oh-file-icon--default
-                                                {% endif %}">
-                                              </span>
-                                            </div>
-                                          </a>
-                                          <a href="{{ attachment.file.url }}" target="_blank">
-                                            <span class="oh-helpdesk__filename">{{ attachment }}</span>
-                                          </a>
-                                        </li>
-                                    {% endwith %}
-                                  <button class="oh-user-panel__remove">
-                                    <ion-icon name="close-outline" role="img" class="md hydrated"
-                                      aria-label="close outline"></ion-icon>
-                                  </button>
-                                </div>
-                                {% endfor %}
-                              {% endif %}
-                          </div>
-                        </div>
-                      </div>
-                    {% else %}
-                      <div class="oh-helpdesk__bubble oh-helpdesk__bubble--reply">
-                        <div class="oh-helpdesk__bubble-header">
-                          <div class="oh-helpdesk__bubble-user">
-                            <div class="oh-profile oh-profile--md">
-                              <div class="oh-profile__avatar mr-1">
-                                <img
-                                  src="https://ui-avatars.com/api/?name={{comment.employee_id}}&background=random"
-                                  class="oh-profile__image"
-                                  alt="{{comment.employee_id}}" />
-                              </div>
-                            </div>
-                            <span class="oh-helpdesk__bubble-username"
-                              >{{comment.employee_id}}</span
-                            >
-                          </div>
-                          <span class="oh-helpdesk__bubble-timestamp"
-                            >{{comment.date}}</span
-                          >
-                        </div>
-                        <div class="oh-helpdesk__bubble-body">
-                          <p>{{comment.comment}}</p>
-                            {% if comment.comment_attachment.all %}
-                              {% for attachment in comment.comment_attachment.all %}
-                                  {% with extension=attachment.file.name|lower|slice:"-4:" %}
-                                    <li class="oh-helpdesk__document">
-                                      <a href="{{ attachment.file.url }}" target="_blank">
-                                        <div class="oh-helpdesk__icon">
-                                          <span class="oh-file-icon
-                                            {% if extension == '.pdf' %} oh-file-icon--pdf
-                                            {% elif extension in '.jpg .jpeg .png .gif .svg' %} oh-file-icon--image
-                                            {% elif extension in '.mp3 .wav .ogg' %} oh-file-icon--audio
-                                            {% elif extension in '.doc .docx' %} oh-file-icon--word
-                                            {% elif extension in '.xls .xlsx' %} oh-file-icon--excel
-                                            {% elif extension in '.ppt .pptx' %} oh-file-icon--powerpoint
-                                            {% elif extension in '.html' %} oh-file-icon--html
-                                            {% else %} oh-file-icon--default
-                                            {% endif %}">
-                                          </span>
-                                        </div>
-                                      </a>
-                                      <a href="{{ attachment.file.url }}" target="_blank">
-                                        <span class="oh-helpdesk__filename">{{ attachment }}</span>
-                                      </a>
-                                    </li>
-                                  {% endwith %}
-                              {% endfor %}
-                            {% endif %}
-                        </div>
-                      </div>
-                    {% endif %}
-                  {% endfor %}
-                    <div class="oh-helpdesk__chat-update">
-                      <span
-                        >Jane assigned ticket to <strong>Patricia</strong></span
-                      >
-                      <span>26 Mar 2019, 1:32PM</span>
-                    </div>
-
-
-                  <div class="oh-helpdesk__chat-update">
-                    <span
-                      >Patricia changed the ticket status from
-                      <strong>Open</strong> to <strong>Pending</strong></span
-                    >
-                    <span>26 Mar 2019, 1:33PM</span>
-                  </div>
-                </div>
-              </div>
-              <!-- start of comment box. -->
-              <div class="oh-helpdesk__chatbox">
-                <form name="comment-form" action="{% url 'comment-create' ticket.id %}" method="POST" enctype="multipart/form-data" class="oh-chat oh-chat__input-wrapper">
-                  {% csrf_token %}
-                  <input name= "file" multiple="True" type="file" id="fileUpload" class="d-none" />
-                  <label
-                    aria-role="button"
-                    for="fileUpload"
-                    aria-label="Send Message"
-                    class="oh-btn oh-btn--chat oh-btn--chat-attachments"></label>
-                  <textarea
-                    name="comment"
-                    class="oh-helpdesk__chat-input oh-chat__main-input"
-                    placeholder="Type something..."
-                  ></textarea>
-                  <button
-                    class="oh-btn oh-btn--chat oh-btn--chat-send"
-                    type="submit"
-                    onclick="validateComment(event)"
-                    aria-label="Send Message"></button>
-                </form>
-              </div>
-              <!-- end of comment box. -->
-            </div>
-            <!-- start of right side contents. -->
-            <div class="oh-helpdesk__right">
-              <div class="oh-helpdesk__right-header">Ticket Details</div>
-              <div class="oh-helpdesk__right-body">
-                <!-- Ticket Info. -->
-                <div class="oh-helpdesk__card">
-                  <div class="oh-helpdesk__card-header">
-                    <span class="oh-helpdesk__card-title">Ticket Info</span>
-                  </div>
-                  <div class="oh-helpdesk__card-body">
-                    <ul class="helpdesk__card-items">
-                      <li class="helpdesk__card-item">
-                        <span class="helpdesk__card-label">Ticket ID:</span>
-                        <span class="helpdesk__card-value" name="ticketId" id="{{ticket.id}}">{{ticket.id}}</span>
-                      </li>
-                      <li class="helpdesk__card-item">
-                        <span class="helpdesk__card-label">Created:</span>
-                        <span class="helpdesk__card-value">{{ticket.created_date}}</span>
-                      </li>
-                      <li class="helpdesk__card-item">
-                        <span class="helpdesk__card-label">Last message:</span>
-                        <span class="helpdesk__card-value">27 Mar 2019</span>
-                      </li>
-                      <li class="helpdesk__card-item">
-                        <span class="helpdesk__card-label">Status:</span>
-                        <span class="helpdesk__card-value">
-                          <select name="status_update" class="oh-select w-100" onchange="updateStatus()">
-                            {% for status in ticket_status %}
-                            <option value="{{status.0}}"  {% if status.0 == ticket.status %} selected {% endif %}>
-                              <span class="oh-dot oh-dot--small oh-dot--warning">{{status.1}}</span></option>
-                            {% comment %} <option value="{{stage.id}}">{{stage}}</option> {% endcomment %}
-                            {% endfor %}
-                          </select>
-                          {% comment %} <span
-                            class="oh-dot oh-dot--small oh-dot--warning"></span>
-                          <span>{{ticket.get_status_display}}</span> {% endcomment %}
-                        </span>
-                      </li>
-                      {% comment %} <li class="helpdesk__card-item">
-                        <span class="helpdesk__card-label">Source:</span>
-                        <span class="helpdesk__card-value">Email</span>
-                      </li> {% endcomment %}
-                    </ul>
-                    <div class="helpdesk__card-footer">
-                      <span class="helpdesk__card-label">Tags:</span>
-                          <div class="oh-helpdesk-selectbox">
-                            {{tag_form.tags}}
-                          </div>
-                    </div>
-                  </div>
-                </div>
-                <!-- End of Ticket Info. -->
-                <!-- Responsibility Card -->
-                <div class="oh-helpdesk__card">
-                  <div class="oh-helpdesk__card-header">
-                    <span class="oh-helpdesk__card-title">Responsibility</span>
-                  </div>
-                  <div class="oh-helpdesk__card-body">
-                    <div class="oh-helpdesk__subcard">
-                      <div class="oh-helpdesk__subcard-header">
-                        <span class="oh-helpdesk__subcard-title">Raised on</span>
-                        <a
-                          hx-get="{% url 'ticket-change-raised-on' ticket.id %}"
-                          data-target ="#addTagModal"
-                          hx-target="#addTagTarget"
-                          role="button"
-                          class="oh-link oh-link--secondary oh-text--xs"
-                          >Change</a
-                        >
-                      </div>
-                      <div class="oh-helpdesk__subcard-body">
-                        <ul class="oh-helpdesk__subcard-items">
-                          <li class="oh-helpdesk__subcard-item">{{ticket.get_raised_on}}</li>
-                        </ul>
-                      </div>
-                    </div>
-
-                    <div class="oh-helpdesk__subcard">
-                      <div class="oh-helpdesk__subcard-header">
-                        <span class="oh-helpdesk__subcard-title">Assigned to</span>
-                        <a
-                          hx-get="{% url 'ticket-change-assignees' ticket.id %}"
-                          data-target ="#addTagModal"
-                          hx-target="#addTagTarget"
-                          role="button"
-                          class="oh-link oh-link--secondary oh-text--xs"
-                          >Change</a
-                        >
-
-                      </div>
-                      {% for assigne in ticket.assigned_to.all %}
-                        <div class="oh-helpdesk__subcard-body">
-                          <ul class="oh-helpdesk__subcard-items">
-                            <li class="oh-helpdesk__subcard-item">
-                              <div class="oh-profile oh-profile--base">
-                                <div class="oh-profile__avatar mr-1">
-                                  <img
-                                    src="https://ui-avatars.com/api/?name={{assigne}}&background=random"
-                                    class="oh-profile__image"
-                                    alt="{{assigne}}" />
-                                </div>
-                                <div class="oh-profile__meta">
-                                  <span class="oh-profile__name oh-text--dark"
-                                    >{{assigne}}</span
-                                  >
-                                  {% comment %} <p class="oh-profile__subtext">
-                                    jane@gmail.com
-                                  </p> {% endcomment %}
-                                </div>
-                              </div>
-                            </li>
-                          </ul>
-                        </div>
-                      {% endfor %}
-                    </div>
-                  </div>
-                </div>
-                <!-- End of Responsibility Card -->
-                <!-- Responsibility Card -->
-                <div class="oh-helpdesk__card">
-                  <div class="oh-helpdesk__card-header">
-                    <span class="oh-helpdesk__card-title">Documents</span>
-                  </div>
-                  <div class="oh-helpdesk__card-body">
-                    <ul class="oh-helpdesk__documents">
-                      {% if attachments %}
-                        {% for attachment in attachments %}
-                          {% with extension=attachment.file.name|lower|slice:"-4:" %}
-                            <li class="oh-helpdesk__document">
-                              <a href="{{ attachment.file.url }}" target="_blank">
-                                <div class="oh-helpdesk__icon">
-                                  <span class="oh-file-icon
-                                    {% if extension == '.pdf' %} oh-file-icon--pdf
-                                    {% elif extension in '.jpg .jpeg .png .gif .svg' %} oh-file-icon--image
-                                    {% elif extension in '.mp3 .wav .ogg' %} oh-file-icon--audio
-                                    {% elif extension in '.doc .docx' %} oh-file-icon--word
-                                    {% elif extension in '.xls .xlsx' %} oh-file-icon--excel
-                                    {% elif extension in '.ppt .pptx' %} oh-file-icon--powerpoint
-                                    {% elif extension in '.html' %} oh-file-icon--html
-                                    {% else %} oh-file-icon--default
-                                    {% endif %}">
-                                  </span>
-                                </div>
-                              </a>
-                              <a href="{{ attachment.file.url }}" target="_blank">
-                                <span class="oh-helpdesk__filename">{{ attachment }}</span>
-                              </a>
-                            </li>
-                          {% endwith %}
-                        {% endfor %}
-                      {% endif %}
-
-                    </ul>
-                  </div>
-                </div>
-                <!-- End of Responsibility Card -->
-              </div>
-            </div>
-            <!-- end of right side contents. -->
-
-          </div>
-        </main>
-      </div>
-    </div>
-
-    <div id="addTagModal">
-      <div id="addTagTarget">
-      </div>
-    </div>
-    <div
-      class="oh-modal"
-      id="editModal"
-      role="dialog"
-      aria-labelledby="editDialogModal"
-      aria-hidden="true"
-    >
-      <div class="oh-modal__dialog">
-        <div class="oh-modal__dialog-header">
-          <h2 class="oh-modal__dialog-title" id="editTitle">
-            {% trans "Create Tag" %}
-          </h2>
-          <button class="oh-modal__close" aria-label="Close">
-            <ion-icon name="close-outline"></ion-icon>
-          </button>
-        </div>
-        <div class="oh-modal__dialog-body" id="editTarget">
-          <form
-            hx-post="{% url 'ticket-create-tag' %}"
-            hx-target="#addTagTarget"
-            method="post"
-            hx-encoding="multipart/form-data"
-            onsubmit="showTag()"
-          >
-            {% csrf_token %}
-            {{create_tag_f.as_p}}
-            <button
-              type="submit"
-              class="oh-btn oh-btn--secondary mt-2 mr-0 oh-btn--w-100-resp"
-            >
-              {% trans "Save" %}
-            </button>
-          </form>
-        </div>
-      </div>
-    </div>
-    <script>
-      function handleSuccess() {
-
-      }
-      function updateStatus(){
-        var status = $("[name='status_update']").val()
-        var ticketID = $("[name='ticketId']").attr('id');
-        $.ajax({
-          type: "post",
-          url: `/helpdesk/change-ticket-status/${ticketID}/`,
-          data: {
-            csrfmiddlewaretoken: getCookie("csrftoken"),
-            "status": status,
-          },
-          success: function (response) {
-            var duration = 0;
-            if (response.errors != "noChange") {
-                $("#ohMessages").append(`
-                <div class="oh-alert-container">
-                <div class="oh-alert oh-alert--animated oh-alert--${response.type}">
-                ${response.message}
-                </div>
-                </div>`);
-                duration = 1500;
-            }
-            // countSequence(false);
-          },
-        });
-      }
-
-      function validateComment(event){
-        var comment = $("[name='comment']").val()
-        if (comment === '') {
-          event.preventDefault();
-        }
-      }
-      function showTag()
-      function updateTag(event) {
-        var ticketId = $("[name='ticketId']").attr('id');
-        var selectedValues = $("#id_tags option:selected").map(function(){
-          return $(this).val();
-        }).get();
-        // Check if 'create_new_tag' exists in the list
-        if (selectedValues.includes('create_new_tag')) {
-          $("#editModal").addClass("oh-modal--show");
-        } else {
-          // ajax function for save the tag to ticket
-          $.ajax({
-            type:'GET',
-            url:'/helpdesk/ticket-change-tag',
-            data:{"selectedValues":selectedValues,'ticketId':ticketId},
-          })
-
-        }
-      }
-
-      function removeTag(element) {
-        var button = $(element);
-        var tagId = button.attr("id");
-        var ticketId = button.data("ticket_id");
-        tagCard = button.closest('.oh-helpdesk__tag');
-        $.ajax({
-          type:'GET',
-          url:'/helpdesk/remove-tag',
-          data:{'tag_id':tagId, 'ticket_id':ticketId},
-          success:function(response){
-            tagCard.remove()
-            $(".oh-alert-container").html(response.message)
-          }
-        })
-      }
-    </script>
-
-    <script src="./build/js/web.frontend.min.js"></script>
-    <script
-      type="module"
-      src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
-    <script
-      nomodule
-      src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
-    <script></script>
-  </body>
-</html>
-
-{% endblock content %}
diff --git a/helpdesk/templates/helpdesk/ticket/forms/change.html b/helpdesk/templates/helpdesk/ticket/forms/change.html
deleted file mode 100644
index 6b9dda611..000000000
--- a/helpdesk/templates/helpdesk/ticket/forms/change.html
+++ /dev/null
@@ -1,94 +0,0 @@
-{% load i18n %}
-<div class="oh-dropdown" x-data="{open: false}">
-  <button
-    class="oh-link oh-link--secondary oh-text--xs"
-    @click="open = !open"
-    {% comment %} title="Add Candidates" {% endcomment %}
-  >
-    change
-  </button>
-  <div
-    class="oh-dropdown__menu oh-dropdown__menu--top-align oh-dropdown__filter p-4"
-    style="right: 57px"
-    x-show="open"
-    @click.outside="open = false"
-  >
-    {% comment %} <form action="" method="post" enctype="multipart/form-data">
-      {% csrf_token %}
-      <div class="oh-input-group">
-        <label for="id_name" class="oh-label">{% trans 'Name' %}</label>
-        {{candidate_form.name}}
-      </div>
-      <div class="oh-input-group">
-        <label for="id_email" class="oh-label">{% trans 'Email' %}</label>
-        {{candidate_form.email}}
-      </div>
-      {% if rec.is_event_based %}
-      <div class="oh-input-group">
-        <label for="job-position" class="oh-label"
-          >{% trans 'Job Position' %}</label
-        >
-        <select
-          name="job_position_id"
-          style="
-            width: 100%;
-            display: flex;
-            padding: 2px;
-            border: 1px solid hsl(213deg, 22%, 84%);
-            border-radius: 0rem;
-            color: hsl(0deg, 0%, 11%);
-          "
-          id="id_job_position_id"
-        >
-          {% for jp in rec.open_positions.all %}
-          <option value="{{jp.id}}">{{jp}}</option>
-          {% endfor %}
-        </select>
-      </div>
-      {% endif %}
-      <div class="oh-input-group">
-        <label for="job-position" class="oh-label">{% trans 'Phone' %}</label>
-        {{candidate_form.mobile}}
-      </div>
-      <div class="row">
-        <div class="col-12 col-sm-12 col-md-6 col-lg-6">
-          <label for="job-position" class="oh-label"
-            >{% trans 'Profile' %}</label
-          >
-          {{candidate_form.profile}}
-        </div>
-        <div class="col-12 col-sm-12 col-md-6 col-lg-6">
-          <label for="job-position" class="oh-label"
-            >{% trans 'Resume' %}</label
-          >
-          {{candidate_form.resume}}
-        </div>
-      </div>
-
-      <div class="oh-input-group"></div>
-      <input type="hidden" name="recruitment_id" id="" value="{{rec.id}}" />
-      <input type="hidden" name="stage_id" id="" value="{{stage.id}}" />
-      <button
-        type="submit"
-        class="oh-btn oh-d-hide oh-btn--small oh-btn--secondary oh-btn--add-advanced-tab w-100 mt-3 mb-2"
-      >
-        <ion-icon class="me-1" name="add-circle-outline"></ion-icon>
-        {% trans 'Add Candidate' %}
-      </button>
-    </form> {% endcomment %}
-    <form action="{% url 'ticket-change-assignees' ticket.id %}" method="post" enctype="multipart/form-data">
-        {% csrf_token %}
-        <div class="oh-input-group">
-          <label for="id_name" class="oh-label">{% trans 'Assignees' %}</label>
-          {{form.assigned_to}}
-        </div>
-        <button
-          type="submit"
-          class="oh-btn oh-d-hide oh-btn--small oh-btn--secondary oh-btn--add-advanced-tab w-100 mt-3 mb-2"
-        >
-          <ion-icon class="me-1" name="add-circle-outline"></ion-icon>
-          {% trans 'Save Changes' %}
-        </button>
-      </form>
-  </div>
-</div>
diff --git a/helpdesk/urls.py b/helpdesk/urls.py
index 3ad897724..bb08b0be2 100644
--- a/helpdesk/urls.py
+++ b/helpdesk/urls.py
@@ -8,16 +8,39 @@ from django.urls import path
 
 from base.views import object_delete
 from helpdesk import views
+from helpdesk.cbv import department_managers, faq, pipeline, tags, ticket_type
 from helpdesk.models import FAQ, FAQCategory, Ticket
 
 urlpatterns = [
-    path("faq-category-view/", views.faq_category_view, name="faq-category-view"),
-    path("faq-category-create/", views.faq_category_create, name="faq-category-create"),
+    path("ticket-list/", ticket_type.TicketsListView.as_view(), name="ticket-list"),
+    path("ticket-nav/", ticket_type.TicketsNavView.as_view(), name="ticket-nav"),
     path(
-        "faq-category-update/<int:id>/",
-        views.faq_category_update,
+        "ticket-create-form/",
+        ticket_type.TicketTypeCreateForm.as_view(),
+        name="ticket-create-form",
+    ),
+    path(
+        "ticket-update-form/<int:pk>",
+        ticket_type.TicketTypeCreateForm.as_view(),
+        name="ticket-update-form",
+    ),
+    path("faq-category-view/", views.faq_category_view, name="faq-category-view"),
+    # path("faq-category-create/", views.faq_category_create, name="faq-category-create"),
+    path(
+        "faq-category-create/",
+        faq.FaqCategoryCreateFormView.as_view(),
+        name="faq-category-create",
+    ),
+    path(
+        "faq-category-update/<int:pk>/",
+        faq.FaqCategoryCreateFormView.as_view(),
         name="faq-category-update",
     ),
+    # path(
+    #     "faq-category-update/<int:id>/",
+    #     views.faq_category_update,
+    #     name="faq-category-update",
+    # ),
     path(
         "faq-category-delete/<int:id>/",
         views.faq_category_delete,
@@ -30,8 +53,12 @@ urlpatterns = [
         name="faq-view",
         kwargs={"model": FAQCategory},
     ),
-    path("faq-create/<int:obj_id>/", views.create_faq, name="faq-create"),
-    path("faq-update/<int:obj_id>", views.faq_update, name="faq-update"),
+    path(
+        "faq-create/<int:cat_id>/", faq.FaqCreateFormView.as_view(), name="faq-create"
+    ),
+    # path("faq-create/<int:cat_id>/", views.create_faq, name="faq-create"),
+    path("faq-update/<int:pk>/", faq.FaqCreateFormView.as_view(), name="faq-update"),
+    # path("faq-update/<int:id>", views.faq_update, name="faq-update"),
     path("faq-search/", views.faq_search, name="faq-search"),
     path("faq-filter/<int:id>/", views.faq_filter, name="faq-filter"),
     path("faq-suggestion/", views.faq_suggestion, name="faq-suggestion"),
@@ -40,15 +67,40 @@ urlpatterns = [
         views.faq_delete,
         name="faq-delete",
     ),
-    path("ticket-view/", views.ticket_view, name="ticket-view"),
-    path("ticket-create", views.ticket_create, name="ticket-create"),
-    path("ticket-update/<int:ticket_id>", views.ticket_update, name="ticket-update"),
+    # path("ticket-view/", views.ticket_view, name="ticket-view"),
+    path("ticket-view/", pipeline.TicketPipelineView.as_view(), name="ticket-view"),
+    path(
+        "ticket-pipeline-nav/",
+        pipeline.TicketPipelineNav.as_view(),
+        name="ticket-pipeline-nav",
+    ),
+    path("get-ticket-tabs", pipeline.TicketTabView.as_view(), name="get-ticket-tabs"),
+    path("ticket-tab/", pipeline.TicketTabView.as_view(), name="ticket-tab"),
+    path("ticket-tab-list/", pipeline.TicketListView.as_view(), name="ticket-tab-list"),
+    # path("ticket-pipeline-view/", pipeline.TicketPipelineTabView.as_view(), name="ticket-pipeline-view"),
+    path(
+        "ticket-create",
+        ticket_type.TicketsCreateFormView.as_view(),
+        name="ticket-create",
+    ),
+    # path("ticket-create", views.ticket_create, name="ticket-create"),
+    path(
+        "ticket-update/<int:pk>/",
+        ticket_type.TicketsCreateFormView.as_view(),
+        name="ticket-update",
+    ),
+    # path("ticket-update/<int:ticket_id>", views.ticket_update, name="ticket-update"),
     path("ticket-archive/<int:ticket_id>", views.ticket_archive, name="ticket-archive"),
     path(
         "change-ticket-status/<int:ticket_id>/",
         views.change_ticket_status,
         name="change-ticket-status",
     ),
+    path(
+        "ticket-status-change/<int:ticket_id>/",
+        views.ticket_status_change,
+        name="ticket-status-change",
+    ),
     path("ticket-delete/<int:ticket_id>", views.ticket_delete, name="ticket-delete"),
     path("ticket-filter", views.ticket_filter, name="ticket-filter"),
     path(
@@ -106,16 +158,56 @@ urlpatterns = [
         "tickets-bulk-archive", views.tickets_bulk_archive, name="tickets-bulk-archive"
     ),
     path("tickets-bulk-delete", views.tickets_bulk_delete, name="tickets-bulk-delete"),
+    # path(
+    #     "department-manager-create/",
+    #     views.create_department_manager,
+    #     name="department-manager-create",
+    # ),
+    path(
+        "settings/helpdesk-tag-list/",
+        tags.TagsListView.as_view(),
+        name="helpdesk-tag-list",
+    ),
+    path(
+        "settings/helpdesk-tag-nav/",
+        tags.TagsNavView.as_view(),
+        name="helpdesk-tag-nav",
+    ),
+    path(
+        "settings/create-helpdesk-tag/",
+        tags.TagsFormView.as_view(),
+        name="create-helpdesk-tag",
+    ),
+    path(
+        "settings/update-helpdesk-tag/<int:pk>/",
+        tags.TagsFormView.as_view(),
+        name="update-helpdesk-tag",
+    ),
     path(
         "department-manager-create/",
-        views.create_department_manager,
+        department_managers.DepartmentManagersFormView.as_view(),
         name="department-manager-create",
     ),
+    path(
+        "settings/department-manager-list/",
+        department_managers.DepartmentManagersListView.as_view(),
+        name="department-manager-list",
+    ),
+    path(
+        "settings/department-manager-nav/",
+        department_managers.DepartmentManagersNav.as_view(),
+        name="department-manager-nav",
+    ),
     path(
         "department-manager-update/<int:dep_id>",
         views.update_department_manager,
         name="department-manager-update",
     ),
+    path(
+        "department-manager-update-view/<int:pk>/",
+        department_managers.DepartmentManagersFormView.as_view(),
+        name="department-manager-update-view",
+    ),
     path(
         "department-manager-delete/<int:dep_id>",
         views.delete_department_manager,
diff --git a/helpdesk/views.py b/helpdesk/views.py
index 30c24ef2d..83e04de80 100644
--- a/helpdesk/views.py
+++ b/helpdesk/views.py
@@ -21,6 +21,7 @@ from base.forms import TagsForm
 from base.methods import (
     filtersubordinates,
     get_key_instances,
+    get_pagination,
     is_reportingmanager,
     paginator_qry,
     sortby,
@@ -598,6 +599,46 @@ def ticket_archive(request, ticket_id):
             )
 
 
+@login_required
+def ticket_status_change(request, ticket_id):
+    if request.method != "POST":
+        messages.error(request, _("Invalid request method."))
+        return HttpResponse("error")
+    ticket = Ticket.objects.get(id=ticket_id)
+    status = request.POST.get("status")
+    ticket.status = status
+    if ticket.status == "resolved":
+        ticket.resolved_date = datetime.today()
+    ticket.save()
+
+    employees = ticket.assigned_to.all()
+    assignees = [employee.employee_user_id for employee in employees]
+    assignees.append(ticket.employee_id.employee_user_id)
+    if hasattr(ticket.get_raised_on_object(), "dept_manager"):
+        if ticket.get_raised_on_object().dept_manager.all():
+            manager = ticket.get_raised_on_object().dept_manager.all().first().manager
+            assignees.append(manager.employee_user_id)
+    notify.send(
+        request.user.employee_get,
+        recipient=assignees,
+        verb=f"The status of the ticket has been changed to {ticket.status}.",
+        verb_ar="تم تغيير حالة التذكرة.",
+        verb_de="Der Status des Tickets wurde geändert.",
+        verb_es="El estado del ticket ha sido cambiado.",
+        verb_fr="Le statut du ticket a été modifié.",
+        icon="infinite",
+        redirect=reverse("ticket-detail", kwargs={"ticket_id": ticket.id}),
+    )
+    mail_thread = TicketSendThread(
+        request,
+        ticket,
+        type="status_change",
+    )
+    mail_thread.start()
+    messages.success(request, _("The Ticket status updated successfully."))
+    return HttpResponse("success")
+
+
 @login_required
 # @ticket_owner_can_enter(perm="helpdesk.change_ticket", model=Ticket)
 def change_ticket_status(request, ticket_id):
@@ -1535,10 +1576,12 @@ def update_department_manager(request, dep_id):
 @permission_required("helpdesk.delete_departmentmanager")
 def delete_department_manager(request, dep_id):
     department_manager = DepartmentManager.objects.get(id=dep_id)
+    count = DepartmentManager.objects.count()
     department_manager.delete()
     messages.success(request, _("The department manager has been deleted successfully"))
-
-    return HttpResponseRedirect(request.META.get("HTTP_REFERER", "/"))
+    if count == 1:
+        return HttpResponse("<script>$('.reload-record').click();</script>")
+    return HttpResponse("<script>$('#reloadMessagesButton').click();</script>")
 
 
 @login_required
@@ -1656,11 +1699,21 @@ def ticket_type_update(request, t_type_id):
 def ticket_type_delete(request, t_type_id):
     ticket_type = TicketType.find(t_type_id)
     if ticket_type:
-        ticket_type.delete()
-        messages.success(request, _("Ticket type has been deleted successfully!"))
-    else:
-        messages.error(request, _("Ticket type not found"))
-    return HttpResponse()
+        try:
+            ticket_type.delete()
+            messages.success(request, _("Ticket type has been deleted successfully!"))
+            count = TicketType.objects.count
+            if count == 0:
+                return HttpResponse("<script>$('.reload-record').click()</script>")
+            else:
+                return HttpResponse(
+                    "<script>$('#reloadMessagesButton').click()</script>"
+                )
+        except:
+            messages.error(request, _("Ticket type can not delete"))
+            return HttpResponse("<script>$('.reload-record').click()</script>")
+    # return HttpResponseRedirect(request.META.get("HTTP_REFERER", "/"))
+    return HttpResponse("<script>$('#reloadMessagesButton').click()</script>")
 
 
 @login_required
@@ -1680,7 +1733,7 @@ def view_department_managers(request):
 @permission_required("helpdesk.change_departmentmanager")
 def get_department_employees(request):
     """
-    Method to return employee in the department
+    Method to return employees in the department.
     """
     department = (
         Department.objects.filter(id=request.GET.get("dep_id")).first()
diff --git a/horilla_audit/cbv/audit.py b/horilla_audit/cbv/audit.py
new file mode 100644
index 000000000..39b16eb2d
--- /dev/null
+++ b/horilla_audit/cbv/audit.py
@@ -0,0 +1,155 @@
+"""
+this page is handling the cbv methods for Audit tags in settings
+"""
+
+from typing import Any
+from django.http import HttpResponse
+from django.shortcuts import render
+from django.urls import reverse
+from django.contrib import messages
+from django.utils.decorators import method_decorator
+from django.utils.translation import gettext_lazy as _
+from base.forms import AuditTagForm
+from horilla.decorators import permission_required
+from horilla_audit.filters import AudiTagFilter
+from horilla_audit.models import AuditTag
+from horilla_views.cbv_methods import login_required
+from horilla_views.generic.cbv.views import (
+    HorillaFormView,
+    HorillaListView,
+    HorillaNavView,
+)
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(permission_required("horilla_audit.view_audittag"), name="dispatch")
+class AudiTagsList(HorillaListView):
+    """
+    list view of the audit tags in settings
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("audit-tag-list")
+
+    model = AuditTag
+    filter_class = AudiTagFilter
+
+    bulk_update_fields = [
+        "highlight"
+    ]
+
+    columns = [
+        (_("Title"), "title"),
+        (_("Highlight"), "custom_highlight_col"),
+    ]
+
+    row_attrs = """
+                id="auditTagTr{get_delete_instance}"
+                """
+
+    actions = [
+        {
+            "action": _("Edit"),
+            "icon": "create-outline",
+            "attrs": """
+                        class="oh-btn oh-btn--light-bkg w-100"
+                        hx-get='{get_update_url}?instance_ids={ordered_ids}'
+								hx-target="#genericModalBody"
+								data-toggle="oh-modal-toggle"
+								data-target="#genericModal"
+                      """,
+        },
+        {
+            "action": _("Delete"),
+            "icon": "trash-outline",
+            "attrs": """
+                        class="oh-btn oh-btn--light-bkg w-100 text-danger"
+                        hx-confirm="Are you sure you want to delete this history tag ?"
+                        hx-post="{get_delete_url}"
+                        hx-target="#auditTagTr{get_delete_instance}"
+                        hx-swap="delete"
+                   
+                      """,
+        },
+    ]
+
+    header_attrs = {
+        "title": """ style="width:180px !important" """,
+        "custom_highlight_col": """ style="width:180px !important" """
+    }
+@method_decorator(login_required, name="dispatch")
+@method_decorator(permission_required("horilla_audit.view_audittag"), name="dispatch")
+class AuditTagsNavView(HorillaNavView):
+    """
+    navbar of audit tags view
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("audit-tag-list")
+        self.create_attrs = f"""
+                            onclick = "event.stopPropagation();"
+                            data-toggle="oh-modal-toggle"
+                            data-target="#genericModal"
+                            hx-target="#genericModalBody"
+                            hx-get="{reverse('settings-audit-tag-create')}"
+                            """
+
+    nav_title = _("History Tags")
+    search_swap_target = "#listContainer"
+    filter_instance = AudiTagFilter()
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(permission_required("horilla_audit.add_audittag"), name="dispatch")
+class AuditTagCreateForm(HorillaFormView):
+    """
+    form view for creating and update Audit Tag in settings
+    """
+
+    model = AuditTag
+    form_class = AuditTagForm
+    new_display_title = _("Create Audit Tag")
+
+    def get_context_data(self, **kwargs):
+        """
+        Add form to context, initializing with instance if it exists.
+        """
+        context = super().get_context_data(**kwargs)
+        form = self.form_class()
+        if self.form.instance.pk:
+            form = self.form_class(instance=self.form.instance)
+            self.form_class.verbose_name = _("Audit Tag Update")
+        context[form] = form
+        return context
+
+    def form_invalid(self, form: Any) -> HttpResponse:
+        """
+        Handles and renders form errors or defers to superclass.
+        """
+        if self.form.instance.pk:
+            self.form_class.verbose_name = _("Audit Tag Update")
+        if not form.is_valid():
+            errors = form.errors.as_data()
+            return render(
+                self.request, self.template_name, {"form": form, "errors": errors}
+            )
+        return super().form_invalid(form)
+
+    def form_valid(self, form: AuditTagForm) -> HttpResponse:
+        """
+        Handle valid form submission.
+        """
+        if form.is_valid():
+            if form.instance.pk:
+                messages.success(
+                    self.request, _("Tag has been updated successfully!")
+                )
+            else:
+                messages.success(
+                    self.request, _("Tag has been created successfully!")
+                )
+            form.save()
+            return self.HttpResponse()
+        return super().form_valid(form)
diff --git a/horilla_audit/filters.py b/horilla_audit/filters.py
new file mode 100644
index 000000000..c15c4944f
--- /dev/null
+++ b/horilla_audit/filters.py
@@ -0,0 +1,25 @@
+"""
+filters.py
+
+This page is used to register filter for horilla audit  models
+
+"""
+
+import django_filters
+from base.filters import FilterSet
+from horilla_audit.models import AuditTag
+
+class AudiTagFilter(FilterSet):
+    """
+    filter class for audit tag model
+    """
+
+    search = django_filters.CharFilter(field_name="title", lookup_expr="icontains")
+        
+    
+    class Meta:
+        model = AuditTag
+        fields = [
+            "title",
+            "highlight"  
+            ]
\ No newline at end of file
diff --git a/horilla_audit/models.py b/horilla_audit/models.py
index 6f26abfb7..4be93f240 100644
--- a/horilla_audit/models.py
+++ b/horilla_audit/models.py
@@ -6,6 +6,7 @@ from collections.abc import Iterable
 
 from django.db import models
 from django.dispatch import receiver
+from django.urls import reverse_lazy
 from simple_history.models import (
     HistoricalRecords,
     _default_get_user,
@@ -42,6 +43,33 @@ class AuditTag(models.Model):
 
         app_label = "horilla_audit"
 
+    def custom_highlight_col(self):
+        """
+        return yes or no based on highlight true or false
+        """
+        return "Yes" if self.highlight else "No"
+
+    def get_update_url(self):
+        """
+        This method to get update url
+        """
+        url = reverse_lazy("settings-audit-tag-update", kwargs={"pk": self.pk})
+        return url
+
+    def get_delete_url(self):
+        """
+        This method to get delete url
+        """
+        url = reverse_lazy("audit-tag-delete", kwargs={"obj_id": self.pk})
+        return url
+
+    def get_delete_instance(self):
+        """
+        to get instance for delete
+        """
+
+        return self.pk
+
 
 class HorillaAuditInfo(models.Model):
     """
diff --git a/horilla_automations/models.py b/horilla_automations/models.py
index 35596541b..967aaf579 100644
--- a/horilla_automations/models.py
+++ b/horilla_automations/models.py
@@ -1,6 +1,6 @@
 from django.db import models
 from django.urls import reverse
-from django.utils.translation import gettext_lazy as _trans
+from django.utils.translation import gettext_lazy as _
 
 from base.methods import eval_validate
 from base.models import HorillaMailTemplate
@@ -11,13 +11,13 @@ from horilla_views.cbv_methods import render_template
 MODEL_CHOICES = []
 
 CONDITIONS = [
-    ("equal", _trans("Equal (==)")),
-    ("notequal", _trans("Not Equal (!=)")),
-    ("lt", _trans("Less Than (<)")),
-    ("gt", _trans("Greater Than (>)")),
-    ("le", _trans("Less Than or Equal To (<=)")),
-    ("ge", _trans("Greater Than or Equal To (>=)")),
-    ("icontains", _trans("Contains")),
+    ("equal", _("Equal (==)")),
+    ("notequal", _("Not Equal (!=)")),
+    ("lt", _("Less Than (<)")),
+    ("gt", _("Greater Than (>)")),
+    ("le", _("Less Than or Equal To (<=)")),
+    ("ge", _("Greater Than or Equal To (>=)")),
+    ("icontains", _("Contains")),
 ]
 
 
@@ -43,8 +43,8 @@ class MailAutomation(HorillaModel):
     mail_to = models.TextField(verbose_name="Mail to/Notify to")
     mail_details = models.CharField(
         max_length=250,
-        help_text=_trans(
-            "Fill mail template details(reciever/instance, `self` will be the person who trigger the automation), `As template` option will sent instead of the mail template"
+        help_text=_(
+            "Fill mail template details(reciever/instance, `self` will be the person who trigger the automation)"
         ),
     )
     mail_detail_choice = models.TextField(default="", editable=False)
@@ -57,13 +57,13 @@ class MailAutomation(HorillaModel):
     also_sent_to = models.ManyToManyField(
         Employee,
         blank=True,
-        verbose_name=_trans("Also Send to"),
+        verbose_name=_("Also Send to"),
     )
     delivary_channel = models.CharField(
         default="email",
         max_length=50,
         choices=SEND_OPTIONS,
-        verbose_name=_trans("Choose Delivary Channel"),
+        verbose_name=_("Choose Delivary Channel"),
     )
     template_attachments = models.ManyToManyField(
         HorillaMailTemplate,
diff --git a/horilla_automations/signals.py b/horilla_automations/signals.py
index 42c410ab9..cf885eb07 100644
--- a/horilla_automations/signals.py
+++ b/horilla_automations/signals.py
@@ -361,154 +361,156 @@ def send_mail(request, automation, instance):
 
     mail_template = automation.mail_template
     employees = []
-    to_emails = []
-
-    if instance.pk:
-        # refreshing instance due to m2m fields are not loading here some times
-        time.sleep(0.1)
-        instance = instance._meta.model.objects.get(pk=instance.pk)
-
-    pk_or_text = getattribute(instance, automation.mail_details)
-    model_class = get_model_class(automation.model)
-    model_class = get_related_field_model(model_class, automation.mail_details)
-    context_instance = None
-    if isinstance(pk_or_text, int):
-        context_instance = model_class.objects.filter(pk=pk_or_text).first()
-
-    for mapping in eval_validate(automation.mail_to):
-        result = getattribute(instance, mapping)
-        if isinstance(result, list):
-            to_emails.extend(result)
-        else:
-            to_emails.append(result)
-
-    to_emails = list(filter(None, set(to_emails)))
-
-    employees = Employee.objects.filter(
-        models.Q(email__in=to_emails)
-        | models.Q(employee_work_info__email__in=to_emails)
-    ).select_related("employee_work_info")
-
-    employees = list(employees)
+    raw_emails = []
     try:
-        also_sent_to = automation.also_sent_to.select_related(
-            "employee_work_info"
-        ).all()
-        if also_sent_to.exists():
-            employees.extend(emp for emp in also_sent_to if emp)
-    except Exception as e:
-        logger.error(e)
+        if instance.pk:
+            # refreshing instance due to m2m fields are not loading here some times
+            time.sleep(0.1)
+            instance = instance._meta.model.objects.get(pk=instance.pk)
 
-    cc_emails = [str(emp.get_mail()) for emp in also_sent_to if emp and emp.get_mail()]
-    user_ids = [emp.employee_user_id for emp in employees]
+        pk_or_text = getattribute(instance, automation.mail_details)
+        model_class = get_model_class(automation.model)
+        model_class = get_related_field_model(model_class, automation.mail_details)
+        context_instance = None
+        if isinstance(pk_or_text, int):
+            context_instance = model_class.objects.filter(pk=pk_or_text).first()
 
-    to = to_emails
-    cc = cc_emails
+        for mapping in eval_validate(automation.mail_to):
+            result = getattribute(instance, mapping)
+            if isinstance(result, list):
+                raw_emails.extend(result)
+            else:
+                raw_emails.append(result)
 
-    email_backend = ConfiguredEmailBackend()
-    display_email_name = email_backend.dynamic_from_email_with_display_name
-    if request:
+        raw_emails = list(filter(None, set(raw_emails)))
+
+        employees = Employee.objects.filter(
+            models.Q(email__in=raw_emails)
+            | models.Q(employee_work_info__email__in=raw_emails)
+        ).select_related("employee_work_info")
+
+        employees = list(employees)
         try:
-            display_email_name = f"{request.user.employee_get.get_full_name()} <{request.user.employee_get.email}>"
-            from_email = display_email_name
-            reply_to = [display_email_name]
-        except:
-            logger.error(Exception)
+            also_sent_to = automation.also_sent_to.select_related(
+                "employee_work_info"
+            ).all()
+            if also_sent_to.exists():
+                employees.extend(emp for emp in also_sent_to if emp)
+        except Exception as e:
+            logger.error(e)
 
-    if pk_or_text and request and to_emails:
-        attachments = []
-        try:
-            sender = request.user.employee_get
-        except:
-            sender = None
-        if context_instance:
-            if template_attachments := automation.template_attachments.all():
-                for template_attachment in template_attachments:
-                    template_bdy = template.Template(template_attachment.body)
-                    context = template.Context(
-                        {
-                            "instance": context_instance,
-                            "self": sender,
-                            "model_instance": instance,
-                            "request": request,
-                        }
-                    )
-                    render_bdy = template_bdy.render(context)
-                    attachments.append(
-                        (
-                            "Document",
-                            generate_pdf(
-                                render_bdy, {}, path=False, title="Document"
-                            ).content,
-                            "application/pdf",
-                        )
-                    )
+        emails = [str(emp.get_mail()) for emp in employees if emp and emp.get_mail()]
+        user_ids = [emp.employee_user_id for emp in employees]
 
-            template_bdy = template.Template(mail_template.body)
-        else:
-            template_bdy = template.Template(pk_or_text)
-        context = template.Context(
-            {
-                "instance": context_instance,
-                "self": sender,
-                "model_instance": instance,
-                "request": request,
-            }
-        )
-        render_bdy = template_bdy.render(context)
+        to = emails[:1]
+        cc = emails[1:]
 
-        title_template = template.Template(automation.title)
-        title_context = template.Context(
-            {"instance": instance, "self": sender, "request": request}
-        )
-        render_title = title_template.render(title_context)
-        soup = BeautifulSoup(render_bdy, "html.parser")
-        plain_text = soup.get_text(separator="\n")
-
-        email = EmailMessage(
-            subject=render_title,
-            body=render_bdy,
-            to=to,
-            cc=cc,
-            from_email=from_email,
-            reply_to=reply_to,
-        )
-        email.content_subtype = "html"
-
-        email.attachments = attachments
-
-        def _send_mail(email):
+        email_backend = ConfiguredEmailBackend()
+        display_email_name = email_backend.dynamic_from_email_with_display_name
+        if request:
             try:
-                email.send()
-                logger.info(
-                    f"Automation <Mail> {automation.title} is triggered by {request.user.employee_get}"
+                display_email_name = f"{request.user.employee_get.get_full_name()} <{request.user.employee_get.email}>"
+                from_email = display_email_name
+                reply_to = [display_email_name]
+            except:
+                logger.error(Exception)
+
+        if pk_or_text and request and raw_emails:
+            attachments = []
+            try:
+                sender = request.user.employee_get
+            except:
+                sender = None
+            if context_instance:
+                if template_attachments := automation.template_attachments.all():
+                    for template_attachment in template_attachments:
+                        template_bdy = template.Template(template_attachment.body)
+                        context = template.Context(
+                            {
+                                "instance": context_instance,
+                                "self": sender,
+                                "model_instance": instance,
+                                "request": request,
+                            }
+                        )
+                        render_bdy = template_bdy.render(context)
+                        attachments.append(
+                            (
+                                "Document",
+                                generate_pdf(
+                                    render_bdy, {}, path=False, title="Document"
+                                ).content,
+                                "application/pdf",
+                            )
+                        )
+
+                template_bdy = template.Template(mail_template.body)
+            else:
+                template_bdy = template.Template(pk_or_text)
+            context = template.Context(
+                {
+                    "instance": context_instance,
+                    "self": sender,
+                    "model_instance": instance,
+                    "request": request,
+                }
+            )
+            render_bdy = template_bdy.render(context)
+
+            title_template = template.Template(automation.title)
+            title_context = template.Context(
+                {"instance": instance, "self": sender, "request": request}
+            )
+            render_title = title_template.render(title_context)
+            soup = BeautifulSoup(render_bdy, "html.parser")
+            plain_text = soup.get_text(separator="\n")
+
+            email = EmailMessage(
+                subject=render_title,
+                body=render_bdy,
+                to=to,
+                cc=cc,
+                from_email=from_email,
+                reply_to=reply_to,
+            )
+            email.content_subtype = "html"
+
+            email.attachments = attachments
+
+            def _send_mail(email):
+                try:
+                    email.send()
+                    logger.info(
+                        f"Automation <Mail> {automation.title} is triggered by {request.user.employee_get}"
+                    )
+                except Exception as e:
+                    logger.error(e)
+
+            def _send_notification(text):
+                notify.send(
+                    sender,
+                    recipient=user_ids,
+                    verb=f"{text}",
+                    icon="person-remove",
+                    redirect="",
+                )
+                logger.info(
+                    f"Automation <Notification> {automation.title} is triggered by {request.user.employee_get}"
                 )
-            except Exception as e:
-                logger.error(e)
 
-        def _send_notification(text):
-            notify.send(
-                sender,
-                recipient=user_ids,
-                verb=f"{text}",
-                icon="person-remove",
-                redirect="",
-            )
+            if automation.delivary_channel != "notification":
+                thread = threading.Thread(
+                    target=lambda: _send_mail(email),
+                )
+                thread.start()
+
+            if automation.delivary_channel != "email":
+                thread = threading.Thread(
+                    target=lambda: _send_notification(plain_text),
+                )
+                thread.start()
             logger.info(
-                f"Automation <Notification> {automation.title} is triggered by {request.user.employee_get}"
+                f"Automation Triggered | {automation.get_delivary_channel_display()} | {automation}"
             )
-
-        if automation.delivary_channel != "notification":
-            thread = threading.Thread(
-                target=lambda: _send_mail(email),
-            )
-            thread.start()
-
-        if automation.delivary_channel != "email":
-            thread = threading.Thread(
-                target=lambda: _send_notification(plain_text),
-            )
-            thread.start()
-        logger.info(
-            f"Automation Triggered | {automation.get_delivary_channel_display()} | {automation}"
-        )
+    except Exception as e:
+        logger.error(f"Error in Automation | {e}")
diff --git a/horilla_automations/views/cbvs.py b/horilla_automations/views/cbvs.py
index 4e9ae6556..c55ec2af1 100644
--- a/horilla_automations/views/cbvs.py
+++ b/horilla_automations/views/cbvs.py
@@ -4,6 +4,7 @@ horilla_automations/views/cbvs.py
 
 import json
 import os
+from typing import Any
 
 from django.conf import settings
 from django.contrib import messages
@@ -12,6 +13,7 @@ from django.http import HttpResponse
 from django.shortcuts import render
 from django.urls import reverse, reverse_lazy
 from django.utils.decorators import method_decorator
+from django.utils.translation import gettext_lazy as _
 from django.utils.translation import gettext_lazy as _trans
 from django.views import View
 
@@ -88,7 +90,7 @@ class AutomationNavView(views.HorillaNavView):
                 }
             )
 
-    nav_title = _trans("Automations")
+    nav_title = _("Automations")
     search_url = reverse_lazy("mail-automations-list-view")
     search_swap_target = "#listContainer"
 
@@ -104,14 +106,17 @@ class AutomationFormView(views.HorillaFormView):
 
     form_class = AutomationForm
     model = models.MailAutomation
-    new_display_title = _trans("New Automation")
+    new_display_title = _("New Automation")
     template_name = "horilla_automations/automation_form.html"
 
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.view_id = "automation"
+
     def get_form_kwargs(self):
         kwargs = super().get_form_kwargs()
         instance = models.MailAutomation.objects.filter(pk=self.kwargs["pk"]).first()
         kwargs["instance"] = instance
-
         return kwargs
 
     def form_valid(self, form: AutomationForm) -> views.HttpResponse:
@@ -120,8 +125,7 @@ class AutomationFormView(views.HorillaFormView):
             if form.instance.pk:
                 message = "Automation updated"
             form.save()
-
-            messages.success(self.request, _trans(message))
+            messages.success(self.request, _(message))
             return self.HttpResponse()
         return super().form_valid(form)
 
diff --git a/horilla_crumbs/context_processors.py b/horilla_crumbs/context_processors.py
index b13c51d03..cc37dd253 100644
--- a/horilla_crumbs/context_processors.py
+++ b/horilla_crumbs/context_processors.py
@@ -147,6 +147,7 @@ sidebar_urls = [
     "skills-view",
     "employee-bonus-point",
     "mail-automations",
+    "task-all",
     "check-in-check-out-setting",
     "user-accessibility",
     "asset-batch-view",
@@ -176,6 +177,7 @@ remove_urls = [
     "ticket-detail",
     "faq-view",
     "get-job-positions",
+    "task-view",
 ]
 
 user_breadcrumbs = {}
diff --git a/horilla_documents/forms.py b/horilla_documents/forms.py
index c62d8f53b..99c65cfbf 100644
--- a/horilla_documents/forms.py
+++ b/horilla_documents/forms.py
@@ -74,10 +74,25 @@ class DocumentForm(ModelForm):
         table_html = render_to_string("common_form.html", context)
         return table_html
 
+    def __init__(self, *args, **kwargs):
+        super().__init__(*args, **kwargs)
+        self.fields["expiry_date"].widget.attrs.update(
+            {
+                "hx-target": "#id_notify_before_parent_div",
+                "hx-trigger": "load,change",
+                "hx-swap": "innerHTML",
+                "hx-get": "/employee/get-notify-field/",
+            }
+        )
+
 
 class DocumentUpdateForm(ModelForm):
     """form to Update a Document"""
 
+    cols = {"document": 12, "expiry_date": 12, "notify_before": 12}
+
+    verbose_name = "Document"
+
     class Meta:
         model = Document
         fields = "__all__"
@@ -92,6 +107,20 @@ class DocumentUpdateForm(ModelForm):
         }
 
 
+class DocumentRejectCbvForm(ModelForm):
+    """form to add rejection reason while rejecting a Document"""
+
+    cols = {"reject_reason": 12}
+
+    class Meta:
+        model = Document
+        fields = ["reject_reason"]
+
+    def __init__(self, *args, **kwargs):
+        super().__init__(*args, **kwargs)
+        self.fields["reject_reason"].widget.attrs["required"] = True
+
+
 class DocumentRejectForm(forms.Form):
     verbose_name = Document()._meta.get_field("reject_reason").verbose_name
     reject_reason = forms.CharField(
diff --git a/horilla_theme/__init__.py b/horilla_theme/__init__.py
new file mode 100644
index 000000000..e69de29bb
diff --git a/horilla_theme/admin.py b/horilla_theme/admin.py
new file mode 100644
index 000000000..8c38f3f3d
--- /dev/null
+++ b/horilla_theme/admin.py
@@ -0,0 +1,3 @@
+from django.contrib import admin
+
+# Register your models here.
diff --git a/horilla_theme/apps.py b/horilla_theme/apps.py
new file mode 100644
index 000000000..ba143e969
--- /dev/null
+++ b/horilla_theme/apps.py
@@ -0,0 +1,6 @@
+from django.apps import AppConfig
+
+
+class HorillaThemeConfig(AppConfig):
+    default_auto_field = 'django.db.models.BigAutoField'
+    name = 'horilla_theme'
diff --git a/horilla_theme/migrations/__init__.py b/horilla_theme/migrations/__init__.py
new file mode 100644
index 000000000..e69de29bb
diff --git a/horilla_theme/models.py b/horilla_theme/models.py
new file mode 100644
index 000000000..71a836239
--- /dev/null
+++ b/horilla_theme/models.py
@@ -0,0 +1,3 @@
+from django.db import models
+
+# Create your models here.
diff --git a/horilla_theme/static/horilla_theme/assets/css/global.css b/horilla_theme/static/horilla_theme/assets/css/global.css
new file mode 100644
index 000000000..c67e8a0b3
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/css/global.css
@@ -0,0 +1,12 @@
+  .dropdown-content {
+    opacity: 0;
+    visibility: hidden;
+    transform: translateY(10px);
+    transition: opacity 0.3s ease, transform 0.3s ease;
+  }
+
+  .dropdown-wrapper:hover .dropdown-content {
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(0);
+  }
\ No newline at end of file
diff --git a/horilla_theme/static/horilla_theme/assets/css/v1_styles.css b/horilla_theme/static/horilla_theme/assets/css/v1_styles.css
new file mode 100644
index 000000000..1a87842fc
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/css/v1_styles.css
@@ -0,0 +1,1021 @@
+
+.oh-modal {
+  position: fixed;
+  background-color: rgba(28.05, 28.05, 28.05, 0.2);
+  z-index: 1021;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+  display: none;
+  transition: all 0.4 ease-in-out;
+  animation: fade-in-animation 0.2s 0s ease-in-out forwards;
+}
+@keyframes fade-in-animation {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@media (max-width: 575.98px) {
+  .oh-modal {
+    padding-left: 0.7rem;
+    padding-right: 0.7rem;
+  }
+}
+
+.oh-modal--show {
+  display: block;
+  transition: all 0.4 ease-in-out;
+}
+
+.oh-modal__dialog {
+  background-color: hsl(0, 0%, 100%);
+  max-width: 650px;
+  border-radius: 0rem;
+  box-shadow: rgba(0, 0, 0, 0.2) 0px 12px 28px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset;
+  margin: 1.75rem auto;
+}
+
+.oh-modal__dialog-header {
+  position: relative;
+  padding: 1.75rem 1.75rem 0.5rem;
+  width: 100%;
+}
+
+.oh-modal__dialog-body {
+  padding: 0 1.75rem 1.75rem 1.75rem;
+}
+
+.oh-modal__dialog-title {
+  font-size: 1.05rem;
+}
+
+.oh-modal__close {
+  border: none;
+  background: none;
+  font-size: 1.5rem;
+  opacity: 0.7;
+  position: absolute;
+  top: 25px;
+  right: 15px;
+  cursor: pointer;
+  transition: all 0.3s ease-in-out;
+}
+.oh-modal__close:hover {
+  opacity: 1;
+  transition: all 0.3s ease-in-out;
+}
+
+.oh-modal__section-head {
+  border-bottom: 1px solid hsl(0, 0%, 95%);
+  padding-bottom: 0.75rem;
+  color: hsl(0, 0%, 37%);
+  margin-bottom: 0.75rem;
+}
+
+.oh-modal__dialog-footer {
+  padding: 0.25rem 1.75rem 1.75rem;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.oh-modal__dialog--timeoff {
+  max-width: 350px;
+}
+
+.oh-modal__label {
+  display: block;
+  font-size: 0.8rem;
+  color: hsl(0, 0%, 45%);
+  margin-bottom: 0.25rem;
+}
+
+.oh-modal__value {
+  font-size: 1.05rem;
+  font-weight: bold;
+}
+
+.oh-modal__description {
+  max-height: 150px;
+  overflow-y: auto;
+}
+
+.oh-modal__dialog--confirm {
+  max-width: 350px;
+}
+
+.oh-modal__dialog--confirm .oh-modal__dialog-title {
+  font-weight: bold;
+}
+
+.oh-modal__dialog--confirm .oh-modal__dialog-footer {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.5rem;
+}
+
+.dropdown-content {
+  display: none;
+  position: absolute;
+  background-color: #fff;
+  min-width: 160px;
+  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+  z-index: 1;
+  top: 168px;
+  padding: 10px;
+  border-radius: 10px;
+}
+
+.dropdown-content .oh-input {
+  padding: 0.4rem 1rem;
+  padding-left: 28px;
+}
+
+.dropdown-content a {
+  color: black;
+  padding: 6px 10px;
+  text-decoration: none;
+  display: block;
+  border-radius: 10px;
+}
+
+.dropdown-content a span {
+  padding-left: 5px;
+}
+
+.dropdown-content a img {
+  width: 28px;
+}
+
+.dropdown-content a:hover {
+  background-color: #e7e7e9;
+  border-radius: 12px;
+}
+
+.oh-input--medium {
+  font-size: 0.9rem;
+  padding: 0.65rem 1rem;
+  height: 40.94px;
+}
+
+.oh-input {
+  border: 1px solid hsl(213, 22%, 84%);
+  border-radius: 0rem;
+  padding: 0.8rem 1.25rem;
+  color: hsl(0, 0%, 11%);
+}
+
+.oh-input:read-only {
+  border: none;
+}
+
+.oh-input:read-only:focus, .oh-input:read-only:focus-visible {
+  outline: none;
+  border: none !important;
+}
+
+.oh-input::placeholder,
+select::placeholder {
+  color: hsl(216, 18%, 64%);
+}
+@media (max-width: 575.98px) {
+  .oh-input::placeholder,
+  select::placeholder {
+    font-size: 0.8rem;
+  }
+}
+.oh-input:focus, .oh-input:focus-visible,
+select:focus,
+select:focus-visible {
+  outline: hsl(0, 0%, 13%) solid 1px;
+  border: 1px solid hsl(0, 0%, 13%) !important;
+}
+
+.oh-input--textarea {
+  width: 100%;
+  padding: 0.8rem 1.25rem !important;
+}
+
+.oh-input:disabled {
+  background-color: transparent;
+  padding-left: 0px;
+  padding-right: 0px;
+}
+
+.oh-input--small {
+  padding: 0.25rem 0.8rem;
+  font-size: 0.85rem;
+}
+
+.oh-input--filter,
+.oh-dropdown__filter-body .oh-select--sm + .select2-container .select2-selection--single {
+  font-size: 0.85rem !important;
+  height: 28px !important;
+}
+
+.oh-input--res-height {
+  height: 38px;
+}
+
+.oh-input--block {
+  width: 100%;
+}
+
+.oh-input__icon {
+  padding-left: 28px;
+}
+
+.oh-input-group {
+  position: relative;
+}
+
+.oh-input-group__icon {
+  position: relative;
+  color: hsl(216, 3%, 39%);
+}
+
+.oh-input-group__icon--left {
+  top: 3px;
+  left: 30px;
+}
+
+@media (max-width: 1000px) {
+  .oh-input__search-group {
+    display: none;
+    position: absolute;
+    padding: 15px;
+    background: white;
+    z-index: 99;
+    right: 0;
+    top: 150px;
+    border-radius: 0rem;
+  }
+}
+
+@media (max-width: 1000px) {
+  .oh-input__search-group--show {
+    display: block !important;
+  }
+}
+
+.oh-select {
+  border: 1px solid hsl(213, 22%, 84%);
+  padding: 0.3rem 0.8rem 0.3rem 0.3rem;
+  border-radius: 0rem;
+  background-color: #fff;
+}
+
+.oh-select--sm,
+.oh-select--xs-forced {
+  font-size: 0.8rem;
+  padding-top: 0.25rem;
+}
+
+.oh-select--xs-forced + .select2-container .select2-selection.select2-selection--single {
+  height: 29.03px !important;
+  font-size: 0.8rem !important;
+}
+
+.oh-select--xs + .select2-container .select2-selection--single {
+  height: 29.03px !important;
+  font-size: 0.8rem !important;
+}
+
+.oh-select--xs + .select2.select2-container .select2-selection__choice {
+  font-size: 0.8rem !important;
+}
+
+.oh-select--dropdown {
+  width: 100%;
+  padding: 0.35rem 0.25rem;
+  margin-top: 0.5rem;
+  margin-bottom: 0.15rem;
+  font-size: 0.9rem;
+  border-radius: 0rem;
+  height: 32px;
+}
+.oh-select--dropdown:first-child {
+  margin-top: 0;
+}
+.oh-select--dropdown:last-child {
+  margin-bottom: 0;
+}
+
+.oh-input--dropdown {
+  width: 100%;
+  font-size: 0.9rem;
+  padding: 0.35rem 0.25rem;
+  border-radius: 0rem;
+  margin-top: 0.6rem;
+  height: 32px;
+}
+
+.oh-input__label {
+  display: block;
+  font-size: 0.85rem;
+  margin-bottom: 0.5rem;
+  margin-top: 1rem;
+}
+
+.oh-label {
+  font-size: 0.85rem;
+  margin-bottom: 0.5rem;
+  margin-top: 1rem;
+}
+
+.oh-info {
+  display: flex;
+  align-items: center;
+  position: relative;
+  top: 3px;
+  left: 3px;
+  width: 16px;
+  height: 16px;
+  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIGZpbGw9IiM5YzljOWMiIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyIDJDNi40ODYgMiAyIDYuNDg2IDIgMTJzNC40ODYgMTAgMTAgMTAgMTAtNC40ODYgMTAtMTBTMTcuNTE0IDIgMTIgMlptMSAxNWgtMnYtNmgydjZabTAtOGgtMlY3aDJ2MloiPjwvcGF0aD4KPC9zdmc+");
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+  cursor: pointer;
+}
+
+.oh-label__info {
+  display: flex;
+  align-items: center;
+}
+
+.oh-label--question {
+  display: block;
+  font-weight: bold;
+}
+
+.oh-editable-input {
+  width: auto;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  background-color: transparent;
+}
+
+select.oh-select--lg {
+  padding: 0.8rem 1.25rem 0.8rem 0.25rem;
+}
+
+.oh-input-picker-group {
+  display: flex;
+  align-items: center;
+}
+
+@media (max-width: 767.98px) {
+  .oh-input-picker-group--resp {
+    flex-direction: column;
+  }
+}
+
+.oh-input-picker {
+  display: inline-block;
+  padding: 10px;
+  border: 1px solid hsl(213, 22%, 93%);
+  cursor: pointer;
+}
+.oh-input-picker input {
+  display: none;
+}
+.oh-input-picker:first-child {
+  border-radius: 0rem 0rem 0rem 0rem;
+  border-right: none;
+}
+.oh-input-picker:last-child {
+  border-radius: 0rem 0rem 0rem 0;
+  border-left: none;
+}
+
+.oh-input-picker--sm {
+  width: 46px;
+  height: 46px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.oh-input-picker--likert {
+  font-size: 0.85rem;
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
+}
+@media (max-width: 767.98px) {
+  .oh-input-picker--likert {
+    width: 100%;
+    text-align: center;
+  }
+}
+
+.oh-input-picker--1.oh-input-picker--selected {
+  background-color: hsl(1, 100%, 61%);
+}
+
+.oh-input-picker--2.oh-input-picker--selected {
+  background-color: hsl(19, 85%, 63%);
+}
+
+.oh-input-picker--3.oh-input-picker--selected {
+  background-color: hsl(40, 91%, 60%);
+}
+
+.oh-input-picker--4.oh-input-picker--selected {
+  background-color: hsl(121, 47%, 61%);
+}
+
+.oh-input-picker--5.oh-input-picker--selected {
+  background-color: hsl(148, 70%, 40%);
+}
+
+.oh-input-picker--selected {
+  background-color: hsl(8, 77%, 56%);
+  color: hsl(0, 0%, 100%);
+}
+
+.oh-input-picker-selected {
+  border: 1px solid hsl(213, 22%, 93%);
+}
+
+.oh-input--file {
+  padding: 1rem;
+}
+
+.oh-input--file-sm {
+  max-width: 250px;
+}
+
+.oh-select-image ~ .select2-container .select2-container--default,
+.oh-select-image ~ .select2-container .select2-selection--single {
+  border: none;
+}
+
+.oh-select-image__img {
+  width: 32px;
+  height: 32px;
+  object-fit: cover;
+  border-radius: 50%;
+}
+
+.row {
+  --bs-gutter-x: 1.5rem;
+  --bs-gutter-y: 0;
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: calc(var(--bs-gutter-y) * -1);
+  margin-right: calc(var(--bs-gutter-x) * -0.5);
+  margin-left: calc(var(--bs-gutter-x) * -0.5);
+}
+.row > * {
+  flex-shrink: 0;
+  width: 100%;
+  max-width: 100%;
+  padding-right: calc(var(--bs-gutter-x) * 0.5);
+  padding-left: calc(var(--bs-gutter-x) * 0.5);
+  margin-top: var(--bs-gutter-y);
+}
+
+.col {
+  flex: 1 0 0%;
+}
+
+.row-cols-auto > * {
+  flex: 0 0 auto;
+  width: auto;
+}
+
+.row-cols-1 > * {
+  flex: 0 0 auto;
+  width: 100%;
+}
+
+.row-cols-2 > * {
+  flex: 0 0 auto;
+  width: 50%;
+}
+
+.row-cols-3 > * {
+  flex: 0 0 auto;
+  width: 33.3333333333%;
+}
+
+.row-cols-4 > * {
+  flex: 0 0 auto;
+  width: 25%;
+}
+
+.row-cols-5 > * {
+  flex: 0 0 auto;
+  width: 20%;
+}
+
+.row-cols-6 > * {
+  flex: 0 0 auto;
+  width: 16.6666666667%;
+}
+
+@media (min-width: 576px) {
+  .col-sm {
+    flex: 1 0 0%;
+  }
+  .row-cols-sm-auto > * {
+    flex: 0 0 auto;
+    width: auto;
+  }
+  .row-cols-sm-1 > * {
+    flex: 0 0 auto;
+    width: 100%;
+  }
+  .row-cols-sm-2 > * {
+    flex: 0 0 auto;
+    width: 50%;
+  }
+  .row-cols-sm-3 > * {
+    flex: 0 0 auto;
+    width: 33.3333333333%;
+  }
+  .row-cols-sm-4 > * {
+    flex: 0 0 auto;
+    width: 25%;
+  }
+  .row-cols-sm-5 > * {
+    flex: 0 0 auto;
+    width: 20%;
+  }
+  .row-cols-sm-6 > * {
+    flex: 0 0 auto;
+    width: 16.6666666667%;
+  }
+}
+@media (min-width: 768px) {
+  .col-md {
+    flex: 1 0 0%;
+  }
+  .row-cols-md-auto > * {
+    flex: 0 0 auto;
+    width: auto;
+  }
+  .row-cols-md-1 > * {
+    flex: 0 0 auto;
+    width: 100%;
+  }
+  .row-cols-md-2 > * {
+    flex: 0 0 auto;
+    width: 50%;
+  }
+  .row-cols-md-3 > * {
+    flex: 0 0 auto;
+    width: 33.3333333333%;
+  }
+  .row-cols-md-4 > * {
+    flex: 0 0 auto;
+    width: 25%;
+  }
+  .row-cols-md-5 > * {
+    flex: 0 0 auto;
+    width: 20%;
+  }
+  .row-cols-md-6 > * {
+    flex: 0 0 auto;
+    width: 16.6666666667%;
+  }
+}
+@media (min-width: 992px) {
+  .col-lg {
+    flex: 1 0 0%;
+  }
+  .row-cols-lg-auto > * {
+    flex: 0 0 auto;
+    width: auto;
+  }
+  .row-cols-lg-1 > * {
+    flex: 0 0 auto;
+    width: 100%;
+  }
+  .row-cols-lg-2 > * {
+    flex: 0 0 auto;
+    width: 50%;
+  }
+  .row-cols-lg-3 > * {
+    flex: 0 0 auto;
+    width: 33.3333333333%;
+  }
+  .row-cols-lg-4 > * {
+    flex: 0 0 auto;
+    width: 25%;
+  }
+  .row-cols-lg-5 > * {
+    flex: 0 0 auto;
+    width: 20%;
+  }
+  .row-cols-lg-6 > * {
+    flex: 0 0 auto;
+    width: 16.6666666667%;
+  }
+}
+@media (min-width: 1200px) {
+  .col-xl {
+    flex: 1 0 0%;
+  }
+  .row-cols-xl-auto > * {
+    flex: 0 0 auto;
+    width: auto;
+  }
+  .row-cols-xl-1 > * {
+    flex: 0 0 auto;
+    width: 100%;
+  }
+  .row-cols-xl-2 > * {
+    flex: 0 0 auto;
+    width: 50%;
+  }
+  .row-cols-xl-3 > * {
+    flex: 0 0 auto;
+    width: 33.3333333333%;
+  }
+  .row-cols-xl-4 > * {
+    flex: 0 0 auto;
+    width: 25%;
+  }
+  .row-cols-xl-5 > * {
+    flex: 0 0 auto;
+    width: 20%;
+  }
+  .row-cols-xl-6 > * {
+    flex: 0 0 auto;
+    width: 16.6666666667%;
+  }
+}
+@media (min-width: 1400px) {
+  .col-xxl {
+    flex: 1 0 0%;
+  }
+  .row-cols-xxl-auto > * {
+    flex: 0 0 auto;
+    width: auto;
+  }
+  .row-cols-xxl-1 > * {
+    flex: 0 0 auto;
+    width: 100%;
+  }
+  .row-cols-xxl-2 > * {
+    flex: 0 0 auto;
+    width: 50%;
+  }
+  .row-cols-xxl-3 > * {
+    flex: 0 0 auto;
+    width: 33.3333333333%;
+  }
+  .row-cols-xxl-4 > * {
+    flex: 0 0 auto;
+    width: 25%;
+  }
+  .row-cols-xxl-5 > * {
+    flex: 0 0 auto;
+    width: 20%;
+  }
+  .row-cols-xxl-6 > * {
+    flex: 0 0 auto;
+    width: 16.6666666667%;
+  }
+}
+.col-auto {
+  flex: 0 0 auto;
+  width: auto;
+}
+
+.col-1 {
+  flex: 0 0 auto;
+  width: 8.33333333%;
+}
+
+.col-2 {
+  flex: 0 0 auto;
+  width: 16.66666667%;
+}
+
+.col-3 {
+  flex: 0 0 auto;
+  width: 25%;
+}
+
+.col-4 {
+  flex: 0 0 auto;
+  width: 33.33333333%;
+}
+
+.col-5 {
+  flex: 0 0 auto;
+  width: 41.66666667%;
+}
+
+.col-6 {
+  flex: 0 0 auto;
+  width: 50%;
+}
+
+.col-7 {
+  flex: 0 0 auto;
+  width: 58.33333333%;
+}
+
+.col-8 {
+  flex: 0 0 auto;
+  width: 66.66666667%;
+}
+
+.col-9 {
+  flex: 0 0 auto;
+  width: 75%;
+}
+
+.col-10 {
+  flex: 0 0 auto;
+  width: 83.33333333%;
+}
+
+.col-11 {
+  flex: 0 0 auto;
+  width: 91.66666667%;
+}
+
+.col-12 {
+  flex: 0 0 auto;
+  width: 100%;
+}
+
+@media (min-width: 576px) {
+  .col-sm-auto {
+    flex: 0 0 auto;
+    width: auto;
+  }
+  .col-sm-1 {
+    flex: 0 0 auto;
+    width: 8.33333333%;
+  }
+  .col-sm-2 {
+    flex: 0 0 auto;
+    width: 16.66666667%;
+  }
+  .col-sm-3 {
+    flex: 0 0 auto;
+    width: 25%;
+  }
+  .col-sm-4 {
+    flex: 0 0 auto;
+    width: 33.33333333%;
+  }
+  .col-sm-5 {
+    flex: 0 0 auto;
+    width: 41.66666667%;
+  }
+  .col-sm-6 {
+    flex: 0 0 auto;
+    width: 50%;
+  }
+  .col-sm-7 {
+    flex: 0 0 auto;
+    width: 58.33333333%;
+  }
+  .col-sm-8 {
+    flex: 0 0 auto;
+    width: 66.66666667%;
+  }
+  .col-sm-9 {
+    flex: 0 0 auto;
+    width: 75%;
+  }
+  .col-sm-10 {
+    flex: 0 0 auto;
+    width: 83.33333333%;
+  }
+  .col-sm-11 {
+    flex: 0 0 auto;
+    width: 91.66666667%;
+  }
+  .col-sm-12 {
+    flex: 0 0 auto;
+    width: 100%;
+  }
+}
+@media (min-width: 768px) {
+  .col-md-auto {
+    flex: 0 0 auto;
+    width: auto;
+  }
+  .col-md-1 {
+    flex: 0 0 auto;
+    width: 8.33333333%;
+  }
+  .col-md-2 {
+    flex: 0 0 auto;
+    width: 16.66666667%;
+  }
+  .col-md-3 {
+    flex: 0 0 auto;
+    width: 25%;
+  }
+  .col-md-4 {
+    flex: 0 0 auto;
+    width: 33.33333333%;
+  }
+  .col-md-5 {
+    flex: 0 0 auto;
+    width: 41.66666667%;
+  }
+  .col-md-6 {
+    flex: 0 0 auto;
+    width: 50%;
+  }
+  .col-md-7 {
+    flex: 0 0 auto;
+    width: 58.33333333%;
+  }
+  .col-md-8 {
+    flex: 0 0 auto;
+    width: 66.66666667%;
+  }
+  .col-md-9 {
+    flex: 0 0 auto;
+    width: 75%;
+  }
+  .col-md-10 {
+    flex: 0 0 auto;
+    width: 83.33333333%;
+  }
+  .col-md-11 {
+    flex: 0 0 auto;
+    width: 91.66666667%;
+  }
+  .col-md-12 {
+    flex: 0 0 auto;
+    width: 100%;
+  }
+}
+@media (min-width: 992px) {
+  .col-lg-auto {
+    flex: 0 0 auto;
+    width: auto;
+  }
+  .col-lg-1 {
+    flex: 0 0 auto;
+    width: 8.33333333%;
+  }
+  .col-lg-2 {
+    flex: 0 0 auto;
+    width: 16.66666667%;
+  }
+  .col-lg-3 {
+    flex: 0 0 auto;
+    width: 25%;
+  }
+  .col-lg-4 {
+    flex: 0 0 auto;
+    width: 33.33333333%;
+  }
+  .col-lg-5 {
+    flex: 0 0 auto;
+    width: 41.66666667%;
+  }
+  .col-lg-6 {
+    flex: 0 0 auto;
+    width: 50%;
+  }
+  .col-lg-7 {
+    flex: 0 0 auto;
+    width: 58.33333333%;
+  }
+  .col-lg-8 {
+    flex: 0 0 auto;
+    width: 66.66666667%;
+  }
+  .col-lg-9 {
+    flex: 0 0 auto;
+    width: 75%;
+  }
+  .col-lg-10 {
+    flex: 0 0 auto;
+    width: 83.33333333%;
+  }
+  .col-lg-11 {
+    flex: 0 0 auto;
+    width: 91.66666667%;
+  }
+  .col-lg-12 {
+    flex: 0 0 auto;
+    width: 100%;
+  }
+}
+@media (min-width: 1200px) {
+  .col-xl-auto {
+    flex: 0 0 auto;
+    width: auto;
+  }
+  .col-xl-1 {
+    flex: 0 0 auto;
+    width: 8.33333333%;
+  }
+  .col-xl-2 {
+    flex: 0 0 auto;
+    width: 16.66666667%;
+  }
+  .col-xl-3 {
+    flex: 0 0 auto;
+    width: 25%;
+  }
+  .col-xl-4 {
+    flex: 0 0 auto;
+    width: 33.33333333%;
+  }
+  .col-xl-5 {
+    flex: 0 0 auto;
+    width: 41.66666667%;
+  }
+  .col-xl-6 {
+    flex: 0 0 auto;
+    width: 50%;
+  }
+  .col-xl-7 {
+    flex: 0 0 auto;
+    width: 58.33333333%;
+  }
+  .col-xl-8 {
+    flex: 0 0 auto;
+    width: 66.66666667%;
+  }
+  .col-xl-9 {
+    flex: 0 0 auto;
+    width: 75%;
+  }
+  .col-xl-10 {
+    flex: 0 0 auto;
+    width: 83.33333333%;
+  }
+  .col-xl-11 {
+    flex: 0 0 auto;
+    width: 91.66666667%;
+  }
+  .col-xl-12 {
+    flex: 0 0 auto;
+    width: 100%;
+  }
+}
+@media (min-width: 1400px) {
+  .col-xxl-auto {
+    flex: 0 0 auto;
+    width: auto;
+  }
+  .col-xxl-1 {
+    flex: 0 0 auto;
+    width: 8.33333333%;
+  }
+  .col-xxl-2 {
+    flex: 0 0 auto;
+    width: 16.66666667%;
+  }
+  .col-xxl-3 {
+    flex: 0 0 auto;
+    width: 25%;
+  }
+  .col-xxl-4 {
+    flex: 0 0 auto;
+    width: 33.33333333%;
+  }
+  .col-xxl-5 {
+    flex: 0 0 auto;
+    width: 41.66666667%;
+  }
+  .col-xxl-6 {
+    flex: 0 0 auto;
+    width: 50%;
+  }
+  .col-xxl-7 {
+    flex: 0 0 auto;
+    width: 58.33333333%;
+  }
+  .col-xxl-8 {
+    flex: 0 0 auto;
+    width: 66.66666667%;
+  }
+  .col-xxl-9 {
+    flex: 0 0 auto;
+    width: 75%;
+  }
+  .col-xxl-10 {
+    flex: 0 0 auto;
+    width: 83.33333333%;
+  }
+  .col-xxl-11 {
+    flex: 0 0 auto;
+    width: 91.66666667%;
+  }
+  .col-xxl-12 {
+    flex: 0 0 auto;
+    width: 100%;
+  }
+}
\ No newline at end of file
diff --git a/horilla_theme/static/horilla_theme/assets/icons/a1.svg b/horilla_theme/static/horilla_theme/assets/icons/a1.svg
new file mode 100644
index 000000000..dd668dcc4
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/icons/a1.svg
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 21 21">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #191919;
+      }
+    </style>
+  </defs>
+  <!-- Generator: Adobe Illustrator 28.6.0, SVG Export Plug-In . SVG Version: 1.2.0 Build 709)  -->
+  <g>
+    <g id="Layer_1">
+      <g>
+        <path class="cls-1" d="M6.2,20.4c-1,0-2,0-3,0-1.9,0-3-1.3-3.2-3.2,0-1.2,0-2.4.6-3.5.9-1.8,2.3-2.7,4.2-3,.4,0,.9,0,1.3,0,1.6,0,3.2,0,4.8,0,1.3,0,2.5.6,3.4,1.5.2.2.2.4,0,.6-1.4,1.4-2.8,2.8-4.1,4.2-.4.4-.6.8-.6,1.4,0,.5,0,1,0,1.6,0,.3-.1.4-.4.4-1,0-2,0-3.1,0,0,0,0,0,0,0Z"/>
+        <path class="cls-1" d="M8.1,8.6c-2.3,0-4.3-1.9-4.3-4.3C3.8,1.9,5.7,0,8.1,0c2.4,0,4.3,1.9,4.3,4.3,0,2.4-1.9,4.3-4.3,4.3Z"/>
+        <path class="cls-1" d="M11.3,21c0-.9,0-1.7,0-2.6,0,0,0-.1,0-.2,1.6-1.6,3.1-3.1,4.7-4.7,0,0,0,0,0,0,.9.9,1.8,1.8,2.7,2.7,0,0-.1.1-.2.2-1.5,1.5-3,3-4.5,4.5,0,0-.3.2-.4.2-.7,0-1.5,0-2.2,0h-.3Z"/>
+        <path class="cls-1" d="M19.7,15.4c-.9-.9-1.8-1.8-2.7-2.7.4-.4.7-.8,1.2-1.2.4-.3.9-.2,1.3.1.4.4.9.8,1.3,1.3.4.4.4,1,0,1.4-.3.4-.7.7-1,1.1Z"/>
+      </g>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/horilla_theme/static/horilla_theme/assets/icons/a2.svg b/horilla_theme/static/horilla_theme/assets/icons/a2.svg
new file mode 100644
index 000000000..692bd8c6a
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/icons/a2.svg
@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 21 21">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #fff;
+      }
+
+      .cls-2 {
+        fill: #191919;
+      }
+    </style>
+  </defs>
+  <!-- Generator: Adobe Illustrator 28.6.0, SVG Export Plug-In . SVG Version: 1.2.0 Build 709)  -->
+  <g>
+    <g id="Layer_1">
+      <g>
+        <g id="Layer_1-2" data-name="Layer_1">
+          <g>
+            <path class="cls-2" d="M6.9,20.9h-3.1c-1.9,0-3.1-1.3-3.2-3.2,0-1.2,0-2.4.6-3.5.9-1.8,2.4-2.8,4.4-3h6.2c1.4,0,2.5.6,3.5,1.5.2.2.2.4,0,.6-1.4,1.4-2.8,2.9-4.3,4.3-.4.4-.6.9-.6,1.4v1.6c0,.3-.1.4-.5.4h-3.1,0Z"/>
+            <path class="cls-2" d="M9.7,9.4c-2.4,0-4.4-2-4.4-4.4.1-2.4,2-4.4,4.4-4.4s4.4,2,4.5,4.4c0,2.4-2,4.4-4.4,4.4h-.1Z"/>
+            <ellipse class="cls-1" cx="13.1" cy="16.3" rx="5.3" ry="2.9" transform="translate(-6.8 22.6) rotate(-69.1)"/>
+            <g>
+              <path class="cls-2" d="M18.4,14h-3c-.9,0-1.3.4-1.4,1.3,0,.4-.3.7-.7.7s-.7-.3-.7-.8c0-1.3,1.2-2.5,2.5-2.5h3.1c-.1-.4,0-.8.1-.9.3-.1.5-.1.8,0,.4.4.8.8,1.2,1.2.3.3.3.5,0,.8-.4.4-.8.8-1.2,1.2s-.5.3-.8,0c-.3-.1-.3-.5-.1-.8h0c0-.1.1-.1.1-.1Z"/>
+              <path class="cls-2" d="M15,19.5v.5c0,.3-.1.4-.4.5h-.7c-.4-.4-.8-.8-1.2-1.2-.3-.3-.3-.5,0-.8.4-.4.8-.8,1.2-1.2.3-.3.5-.3.8,0,.3.1.3.5.1.8h0c0,.1.1.1.3.1h2.9c.8,0,1.3-.5,1.4-1.3,0-.4.3-.7.7-.7s.7.3.7.7c0,1.4-1.2,2.5-2.6,2.5h-3.1Z"/>
+            </g>
+          </g>
+        </g>
+        <ellipse class="cls-2" cx="5.7" cy="20.5" rx="2.8" ry=".5"/>
+      </g>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/horilla_theme/static/horilla_theme/assets/icons/a3.svg b/horilla_theme/static/horilla_theme/assets/icons/a3.svg
new file mode 100644
index 000000000..19dbc4f9a
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/icons/a3.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 21 21">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #fff;
+      }
+
+      .cls-2 {
+        fill: #191919;
+      }
+    </style>
+  </defs>
+  <!-- Generator: Adobe Illustrator 28.6.0, SVG Export Plug-In . SVG Version: 1.2.0 Build 709)  -->
+  <g>
+    <g id="Layer_1">
+      <g>
+        <path class="cls-2" d="M15.6,13.6c-.5.2-1,.4-1.5.7-1.2.7-1.8,1.6-1.8,2.8,0,.6.2,1,.8,1.4,0,0,0,0,.2,0-1,.7-1.2,1.5-.6,2.4-.7,0-1.4,0-2,0-2.8,0-5.5-.2-8.3-.6-.7-.1-1.2-.5-1.3-1-.2-1.5,0-2.9,1.2-4.2.9-1,2-1.7,3.5-2.2.1,0,.3,0,.4,0,2.6,1.1,5.1,1.1,7.7,0,.2,0,.3,0,.5,0,.5.2.9.3,1.4.5Z"/>
+        <path class="cls-2" d="M6.4,21c-1,0-2.1,0-3.1,0-1.9,0-3.1-1.3-3.2-3.2,0-1.2,0-2.4.6-3.5.9-1.8,2.4-2.8,4.4-3,.4,0,.9,0,1.3,0,1.6,0,3.3,0,4.9,0,1.4,0,2.5.6,3.5,1.5.2.2.2.4,0,.6-1.4,1.4-2.8,2.9-4.3,4.3-.4.4-.6.9-.6,1.4,0,.5,0,1.1,0,1.6,0,.3-.1.4-.5.4-1,0-2.1,0-3.1,0,0,0,0,0,0,0Z"/>
+        <path class="cls-2" d="M8.4,8.8c-2.4,0-4.4-2-4.4-4.4C4.1,2,6,0,8.4,0c2.5,0,4.4,2,4.5,4.4,0,2.4-2,4.4-4.4,4.4Z"/>
+        <polygon class="cls-2" points="14.9 12.7 15.6 13.6 14.5 13.5 14.9 12.7"/>
+      </g>
+      <ellipse class="cls-1" cx="14" cy="16.6" rx="6" ry="2.9" transform="translate(-5.9 25.3) rotate(-73.7)"/>
+      <path class="cls-2" d="M12.4,15.7c0,0,0-.1,0-.2,0,0,0,0,0,0,0-.3.2-.4.5-.5.6,0,1.3-.2,1.9-.3.1,0,.2,0,.3-.2.3-.6.6-1.2.9-1.7,0,0,0-.1.1-.2.3-.3.8-.2,1,.1.3.6.6,1.2.9,1.8,0,.1.1.2.3.2.6,0,1.3.2,1.9.3.3,0,.5.2.5.5,0,.2,0,.4-.2.6-.5.5-.9.9-1.4,1.4,0,0-.1.2,0,.3.1.6.2,1.2.3,1.8,0,.1,0,.3,0,.4,0,.4-.5.6-.9.4-.6-.3-1.1-.6-1.7-.9-.1,0-.3,0-.4,0-.6.3-1.1.6-1.7.9-.2.1-.4.1-.6,0-.2-.1-.3-.4-.2-.6.1-.6.2-1.3.3-1.9,0-.1,0-.2-.1-.3-.4-.4-.9-.8-1.3-1.2-.1-.1-.3-.3-.3-.4Z"/>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/horilla_theme/static/horilla_theme/assets/icons/a4.svg b/horilla_theme/static/horilla_theme/assets/icons/a4.svg
new file mode 100644
index 000000000..3559b856a
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/icons/a4.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 21 21">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #191919;
+      }
+    </style>
+  </defs>
+  <!-- Generator: Adobe Illustrator 28.6.0, SVG Export Plug-In . SVG Version: 1.2.0 Build 709)  -->
+  <g>
+    <g id="Layer_1">
+      <g>
+        <path class="cls-1" d="M10.5,6.6c1.9,0,3.8,0,5.7,0,.7,0,1.2.5,1.1,1.2-.1,1.6-.3,3.1-.4,4.7-.1,1.4-.2,2.7-.3,4.1-.1,2.1-1.8,3.6-3.8,3.7-1.5,0-3,0-4.5,0-2.1,0-3.7-1.6-3.8-3.7-.1-1.7-.3-3.5-.4-5.2,0-1.2-.2-2.4-.3-3.6,0-.7.3-1.1,1.1-1.1,1.9,0,3.8,0,5.7,0Z"/>
+        <path class="cls-1" d="M10.5,4.7c-2.2,0-4.5,0-6.7,0-.5,0-.9-.3-1-.8-.1-.6.3-1.2,1-1.2.9,0,1.8,0,2.8,0,.6,0,.8-.2.8-.7,0-.7.6-1.2,1.3-1.2,1.2,0,2.4,0,3.6,0,.7,0,1.3.5,1.3,1.2,0,.5.3.7.8.7.9,0,1.9,0,2.8,0,.7,0,1.2.6,1,1.2-.1.4-.5.7-1,.7-1.3,0-2.6,0-3.9,0-.9,0-1.9,0-2.8,0Z"/>
+      </g>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/horilla_theme/static/horilla_theme/assets/icons/add.svg b/horilla_theme/static/horilla_theme/assets/icons/add.svg
new file mode 100644
index 000000000..6b1d70d75
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/icons/add.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 9V5H11V9H15V11H11V15H9V11H5V9H9ZM10 20C4.477 20 0 15.523 0 10C0 4.477 4.477 0 10 0C15.523 0 20 4.477 20 10C20 15.523 15.523 20 10 20ZM10 18C12.1217 18 14.1566 17.1571 15.6569 15.6569C17.1571 14.1566 18 12.1217 18 10C18 7.87827 17.1571 5.84344 15.6569 4.34315C14.1566 2.84285 12.1217 2 10 2C7.87827 2 5.84344 2.84285 4.34315 4.34315C2.84285 5.84344 2 7.87827 2 10C2 12.1217 2.84285 14.1566 4.34315 15.6569C5.84344 17.1571 7.87827 18 10 18Z" fill="black"/>
+</svg>
diff --git a/horilla_theme/static/horilla_theme/assets/icons/add1.svg b/horilla_theme/static/horilla_theme/assets/icons/add1.svg
new file mode 100644
index 000000000..c9f76c213
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/icons/add1.svg
@@ -0,0 +1,111 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 60 60">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #fe8298;
+      }
+
+      .cls-2 {
+        fill: #fe8297;
+      }
+
+      .cls-3 {
+        fill: #fe92a5;
+      }
+
+      .cls-4 {
+        fill: #fe3557;
+      }
+
+      .cls-5 {
+        fill: #fe4d6b;
+      }
+
+      .cls-6 {
+        fill: #fff;
+      }
+
+      .cls-7 {
+        fill: #fe2f52;
+      }
+
+      .cls-8 {
+        fill: #fe9aab;
+      }
+
+      .cls-9 {
+        fill: #2477fc;
+      }
+
+      .cls-10 {
+        fill: #fe7189;
+      }
+
+      .cls-11 {
+        fill: #fe9eaf;
+      }
+
+      .cls-12 {
+        fill: #fe9eae;
+      }
+
+      .cls-13 {
+        display: none;
+      }
+
+      .cls-14 {
+        fill: #fefefe;
+      }
+
+      .cls-15 {
+        fill: #fe2147;
+      }
+
+      .cls-16 {
+        fill: #fe8da0;
+      }
+    </style>
+  </defs>
+  <!-- Generator: Adobe Illustrator 28.6.0, SVG Export Plug-In . SVG Version: 1.2.0 Build 709)  -->
+  <g>
+    <g id="Layer_1">
+      <circle class="cls-6" cx="30" cy="30" r="30"/>
+      <g class="cls-13">
+        <g>
+          <path class="cls-15" d="M28.9,51.5h-.8c-.6-.1-1.1,0-1.7-.1-1.4-.1-2.7-.5-3.9-1-2.2-.8-4.3-1.9-6.1-3.5-2.3-1.9-4.1-4-5.5-6.6-1.1-2.1-1.9-4.3-2.2-6.6-.2-1.7-.2-3.4-.1-5.1,0-1.3.1-2.6.5-3.9.8-3.2,2.3-6,4.4-8.6,1.9-2.2,4.1-4,6.8-5.4,1.7-.9,3.5-1.5,5.3-1.9.8-.2,1.6-.2,2.4-.2,0,0,.2,0,.3,0h.3c0,0,.1,0,.2,0,0,0,.1,0,.2,0h.3c.2,0,.4,0,.6,0h1.4c0,0,.1,0,.2,0,0,0,.1,0,.2,0h.3c.6,0,1.2,0,1.7.1,1,0,1.9.3,2.8.6,3,.9,5.6,2.4,8,4.4,2.5,2.2,4.4,4.8,5.7,7.9.5,1.3,1,2.6,1.3,3.9.2.8.2,1.7.2,2.5,0,0,0,.2,0,.3v.3c0,0,0,.2,0,.3,0,0,0,.2,0,.3v.3c0,.2,0,.3,0,.5v.3c0,.2,0,.3,0,.5v.5c0,0,0,.2,0,.3v.4c-.1.6,0,1.1-.1,1.7-.2,1.6-.6,3.1-1.2,4.6-.8,2-1.9,3.8-3.2,5.5-1.8,2.2-4,4.1-6.5,5.4-1.8,1-3.8,1.7-5.8,2.2-.8.2-1.7.2-2.5.2,0,0-.2,0-.2,0h-.3c0,0-.1,0-.2,0,0,0-.2,0-.2,0h-.4c-.1,0-.3,0-.4,0h-.3c-.1,0-.3,0-.4,0-.2,0-.3,0-.5,0Z"/>
+          <path class="cls-4" d="M29.8,8.5c-.2.1-.4.1-.6,0h.6Z"/>
+          <path class="cls-7" d="M51.5,29.8c-.1-.2-.1-.3,0-.5v.5Z"/>
+          <path class="cls-7" d="M51.5,30.7c-.1-.2-.1-.3,0-.5v.5Z"/>
+          <path class="cls-5" d="M28.9,51.5c.1-.1.3,0,.5,0,0,0,0,0,0,0h-.5Z"/>
+          <path class="cls-7" d="M29.4,51.5s0,0,0,0c.1,0,.3,0,.4,0h-.4Z"/>
+          <path class="cls-7" d="M30.2,51.5c.1-.1.3-.1.4,0h-.4Z"/>
+          <path class="cls-8" d="M51.4,28.7c0,0,0-.2,0-.2v.3c0,0,0,0,0,0Z"/>
+          <path class="cls-10" d="M51.4,28.7s0,0,0,0v.3c0,0,0-.2,0-.3Z"/>
+          <path class="cls-16" d="M51.5,31.4c-.1,0,0-.2,0-.3v.3Z"/>
+          <path class="cls-10" d="M31,51.5c0,0,.2,0,.3,0,0,0,0,0,0,0h-.3Z"/>
+          <path class="cls-12" d="M28.7,8.6c0,0-.1,0-.2,0h.2c0,0,0,0,0,0Z"/>
+          <path class="cls-2" d="M28.7,8.6s0,0,0,0h.2c0,0-.1,0-.2,0Z"/>
+          <path class="cls-1" d="M31.4,8.6c0,0-.1,0-.2,0h.2c0,0,0,0,0,0Z"/>
+          <path class="cls-11" d="M31.4,8.6s0,0,0,0h.2c0,0,0,0-.2,0Z"/>
+          <path class="cls-3" d="M31.3,51.5s0,0,0,0c0,0,.1,0,.2,0h-.2Z"/>
+        </g>
+        <path class="cls-6" d="M24,26.6c2.2,0,4.4,0,6.6,0,.7,0,1-.2,1-1,0-1.2,0-2.3,0-3.5,0,0,0-.2,0-.3,0-.3.1-.5.4-.7.3-.1.5,0,.7.1.7.5,1.3,1,2,1.5,2.8,2.1,5.6,4.3,8.5,6.4.2.2.5.4.4.7,0,.2-.2.5-.4.6-2.1,1.6-4.2,3.2-6.3,4.8-1.3,1-2.7,2-4,3,0,0-.1.1-.2.1-.4.3-.9,0-1-.5,0-.8,0-1.5,0-2.3,0-.5,0-1.1,0-1.6,0-.7-.3-.9-.9-.9-4.4,0-8.8,0-13.2,0-.1,0-.2,0-.3,0-.4,0-.7-.3-.7-.7,0-1.8,0-3.6,0-5.4,0-.5.3-.7.8-.7,2.3,0,4.5,0,6.8,0Z"/>
+      </g>
+      <g>
+        <path class="cls-9" d="M52.2,29.7v.3c0,.2,0,.3,0,.5v.3c0,.2,0,.3,0,.5v.5c0,0,0,.2,0,.3v.4c-.1.6,0,1.1-.1,1.7-.2,1.6-.6,3.1-1.2,4.6-.8,2-1.9,3.8-3.2,5.5-1.8,2.2-4,4.1-6.5,5.5-1.8,1-3.8,1.7-5.8,2.2-.8.2-1.7.2-2.5.2,0,0-.2,0-.2,0h-.3c0,0-.1,0-.2,0,0,0-.2,0-.2,0h-.4c-.1,0-.3,0-.4,0h-.3c-.1,0-.3,0-.4,0-.2,0-.3,0-.5,0h-.8c-.6-.1-1.1,0-1.7-.1-1.4-.1-2.7-.5-4-1-2.2-.8-4.3-2-6.1-3.5-2.2-1.8-4.1-4-5.5-6.6-1-2-1.8-4-2.2-6.2-.1-.7-.1-1.3-.2-2,0-1.8,0-3.7,0-5.5,0-1,.3-2,.6-2.9.9-3,2.4-5.6,4.4-8,1.8-2.1,3.9-3.8,6.4-5,2-1,4.1-1.8,6.3-2.1,1.7-.2,3.4-.2,5.1-.1,1.3,0,2.7.1,4,.5,3.2.8,6,2.3,8.5,4.4,2.2,1.9,4.1,4.2,5.4,6.8.9,1.7,1.5,3.5,1.9,5.5.1.8.1,1.6.2,2.3,0,0,0,.2,0,.3v.3c0,0,0,.2,0,.3,0,0,0,.2,0,.3Z"/>
+        <path class="cls-7" d="M52.2,30.5c-.1-.2-.1-.3,0-.5v.5Z"/>
+        <path class="cls-7" d="M52.2,31.4c-.1-.2-.1-.3,0-.5v.5Z"/>
+        <path class="cls-5" d="M29.5,52.2c.1-.1.3,0,.5,0,0,0,0,0,0,0h-.5Z"/>
+        <path class="cls-7" d="M30,52.2s0,0,0,0c.1,0,.3,0,.4,0h-.4Z"/>
+        <path class="cls-7" d="M30.8,52.2c.1-.1.3-.1.4,0h-.4Z"/>
+        <path class="cls-8" d="M52.1,29.4c0,0,0-.2,0-.2v.3c0,0,0,0,0,0Z"/>
+        <path class="cls-10" d="M52.1,29.4s0,0,0,0v.3c0,0,0-.2,0-.3Z"/>
+        <path class="cls-16" d="M52.2,32.1c-.1,0,0-.2,0-.3v.3Z"/>
+        <path class="cls-10" d="M31.6,52.2c0,0,.2,0,.3,0,0,0,0,0,0,0h-.3Z"/>
+        <path class="cls-3" d="M31.9,52.2s0,0,0,0c0,0,.1,0,.2,0h-.2Z"/>
+        <path class="cls-14" d="M37.3,33.5c-1.2,0-2.4,0-3.5,0-.3,0-.4,0-.4.4,0,2.3,0,4.6,0,6.9,0,1.2-.6,1.8-1.8,1.8-.7,0-1.4,0-2.1,0-1,0-1.7-.6-1.7-1.7,0-2.3,0-4.6,0-6.9,0-.4,0-.5-.5-.5-2.3,0-4.5,0-6.8,0-1.2,0-1.8-.6-1.8-1.8,0-.7,0-1.4,0-2.1,0-1,.6-1.7,1.7-1.7,2.3,0,4.6,0,6.9,0,.4,0,.4,0,.4-.4,0-2.3,0-4.5,0-6.8,0-1.2.6-1.8,1.8-1.8.7,0,1.4,0,2.1,0,1,0,1.6.6,1.6,1.6,0,2.3,0,4.6,0,6.9,0,.5.1.5.6.5,2.2,0,4.5,0,6.7,0,1.1,0,1.7.6,1.7,1.7,0,.7,0,1.4,0,2.1,0,1-.6,1.6-1.7,1.6-1.1,0-2.3,0-3.4,0Z"/>
+      </g>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/horilla_theme/static/horilla_theme/assets/icons/addmore.svg b/horilla_theme/static/horilla_theme/assets/icons/addmore.svg
new file mode 100644
index 000000000..9942603ce
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/icons/addmore.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 15 16">
+  <defs>
+    <style>
+      .cls-1 {
+        fill-opacity: .9;
+        fill-rule: evenodd;
+      }
+    </style>
+  </defs>
+  <!-- Generator: Adobe Illustrator 28.6.0, SVG Export Plug-In . SVG Version: 1.2.0 Build 709)  -->
+  <g>
+    <g id="Layer_1">
+      <path class="cls-1" d="M0,8C0,3.9,3.4.5,7.5.5s7.5,3.4,7.5,7.5-3.4,7.5-7.5,7.5S0,12.1,0,8ZM7.5,2c-1.6,0-3.1.6-4.2,1.8-1.1,1.1-1.8,2.7-1.8,4.2s.6,3.1,1.8,4.2c1.1,1.1,2.7,1.8,4.2,1.8s3.1-.6,4.2-1.8c1.1-1.1,1.8-2.7,1.8-4.2s-.6-3.1-1.8-4.2c-1.1-1.1-2.7-1.8-4.2-1.8Z"/>
+      <path class="cls-1" d="M8.2,4.3c0-.2,0-.4-.2-.5-.1-.1-.3-.2-.5-.2s-.4,0-.5.2c-.1.1-.2.3-.2.5v3h-3c-.2,0-.4,0-.5.2-.1.1-.2.3-.2.5s0,.4.2.5c.1.1.3.2.5.2h3v3c0,.2,0,.4.2.5.1.1.3.2.5.2s.4,0,.5-.2c.1-.1.2-.3.2-.5v-3h3c.2,0,.4,0,.5-.2.1-.1.2-.3.2-.5s0-.4-.2-.5c-.1-.1-.3-.2-.5-.2h-3v-3Z"/>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/horilla_theme/static/horilla_theme/assets/icons/addmore1.svg b/horilla_theme/static/horilla_theme/assets/icons/addmore1.svg
new file mode 100644
index 000000000..013015d6a
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/icons/addmore1.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 15 16">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #e54f38;
+        fill-opacity: .9;
+        fill-rule: evenodd;
+      }
+    </style>
+  </defs>
+  <!-- Generator: Adobe Illustrator 28.6.0, SVG Export Plug-In . SVG Version: 1.2.0 Build 709)  -->
+  <g>
+    <g id="Layer_1">
+      <path class="cls-1" d="M0,8C0,3.9,3.4.5,7.5.5s7.5,3.4,7.5,7.5-3.4,7.5-7.5,7.5S0,12.1,0,8ZM7.5,2c-1.6,0-3.1.6-4.2,1.8-1.1,1.1-1.8,2.7-1.8,4.2s.6,3.1,1.8,4.2c1.1,1.1,2.7,1.8,4.2,1.8s3.1-.6,4.2-1.8c1.1-1.1,1.8-2.7,1.8-4.2s-.6-3.1-1.8-4.2c-1.1-1.1-2.7-1.8-4.2-1.8Z"/>
+      <path class="cls-1" d="M8.2,4.3c0-.2,0-.4-.2-.5-.1-.1-.3-.2-.5-.2s-.4,0-.5.2c-.1.1-.2.3-.2.5v3h-3c-.2,0-.4,0-.5.2-.1.1-.2.3-.2.5s0,.4.2.5c.1.1.3.2.5.2h3v3c0,.2,0,.4.2.5.1.1.3.2.5.2s.4,0,.5-.2c.1-.1.2-.3.2-.5v-3h3c.2,0,.4,0,.5-.2.1-.1.2-.3.2-.5s0-.4-.2-.5c-.1-.1-.3-.2-.5-.2h-3v-3Z"/>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/horilla_theme/static/horilla_theme/assets/icons/ar1.svg b/horilla_theme/static/horilla_theme/assets/icons/ar1.svg
new file mode 100644
index 000000000..a71f9da51
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/icons/ar1.svg
@@ -0,0 +1,3 @@
+<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.83325 8.53996H13.1666M13.1666 8.53996L8.49992 3.87329M13.1666 8.53996L8.49992 13.2066" stroke="#34C759" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/horilla_theme/static/horilla_theme/assets/icons/ar2.svg b/horilla_theme/static/horilla_theme/assets/icons/ar2.svg
new file mode 100644
index 000000000..a5b1c2afd
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/icons/ar2.svg
@@ -0,0 +1,3 @@
+<svg width="11" height="11" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.833252 5.53996H10.1666M10.1666 5.53996L5.49992 0.873291M10.1666 5.53996L5.49992 10.2066" stroke="#E54F38" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/horilla_theme/static/horilla_theme/assets/icons/ar3.svg b/horilla_theme/static/horilla_theme/assets/icons/ar3.svg
new file mode 100644
index 000000000..d8a0bf6bd
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/icons/ar3.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.3335 6.00004H10.6668M10.6668 6.00004L6.00016 1.33337M10.6668 6.00004L6.00016 10.6667" stroke="#E54F38" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/horilla_theme/static/horilla_theme/assets/icons/assignment.svg b/horilla_theme/static/horilla_theme/assets/icons/assignment.svg
new file mode 100644
index 000000000..2fc166d1e
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/icons/assignment.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 20 20">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #191919;
+      }
+    </style>
+  </defs>
+  <!-- Generator: Adobe Illustrator 28.6.0, SVG Export Plug-In . SVG Version: 1.2.0 Build 709)  -->
+  <g>
+    <g id="Layer_1">
+      <g>
+        <path class="cls-1" d="M.8,6.4h18.4c0,0,0,.2,0,.3,0,3.3,0,6.7,0,10,0,1-.7,1.7-1.6,1.9-.1,0-.3,0-.4,0-4.9,0-9.8,0-14.6,0-1,0-1.6-.6-1.7-1.6,0,0,0-.2,0-.2,0-3.4,0-6.8,0-10.1v-.2ZM15.5,9.7c0-.2,0-.5,0-.7,0-.3-.2-.5-.5-.5-.5,0-.9,0-1.4,0-.3,0-.5.2-.5.5,0,.5,0,.9,0,1.4,0,.3.2.5.5.5.5,0,1,0,1.4,0,.3,0,.4-.2.4-.5,0-.2,0-.5,0-.7ZM9.8,16c.2,0,.5,0,.7,0,.3,0,.5-.1.5-.5,0-.5,0-.9,0-1.4,0-.3-.2-.5-.5-.5-.5,0-.9,0-1.4,0-.3,0-.5.2-.5.5,0,.5,0,.9,0,1.4,0,.3.2.5.5.5.2,0,.5,0,.7,0ZM15.5,14.8c0-.2,0-.5,0-.7,0-.3-.2-.5-.5-.5-.5,0-.9,0-1.4,0-.3,0-.5.2-.5.5,0,.5,0,.9,0,1.4,0,.3.2.5.5.5.5,0,.9,0,1.4,0,.3,0,.5-.2.5-.5,0-.2,0-.5,0-.7ZM8.6,9.7c0,.2,0,.5,0,.7,0,.3.2.5.4.5.5,0,1,0,1.5,0,.3,0,.4-.1.4-.4,0-.5,0-1,0-1.5,0-.3-.2-.4-.4-.4-.5,0-.9,0-1.4,0-.3,0-.5.2-.5.5,0,.2,0,.5,0,.7ZM4.1,14.8c0,.2,0,.4,0,.7,0,0,0,0,0,0,0,.3.2.5.5.5.4,0,.9,0,1.3,0,.3,0,.5-.2.5-.5,0-.5,0-1,0-1.4,0-.3-.2-.4-.4-.4-.5,0-1,0-1.5,0-.3,0-.4.2-.4.5,0,.2,0,.5,0,.7ZM5.3,8.5c-.2,0-.5,0-.7,0-.3,0-.5.2-.5.5,0,.5,0,.9,0,1.4,0,.3.2.5.4.5.5,0,.9,0,1.4,0,.3,0,.5-.2.5-.5,0-.5,0-.9,0-1.4,0-.3-.2-.4-.5-.4-.2,0-.5,0-.7,0Z"/>
+        <path class="cls-1" d="M4,1.4c0,0,0,.2,0,.3,0,.5,0,.9,0,1.4,0,.4.2.6.6.6.3,0,.6-.2.6-.6,0-.5,0-1.1,0-1.6h9.1c0,0,0,.1,0,.2,0,.5,0,1,0,1.5,0,.3.2.5.4.6.2,0,.5,0,.6-.2,0-.1.1-.3.1-.4,0-.5,0-.9,0-1.4,0,0,0-.1,0-.2,0,0,0,0,.1,0,.6,0,1.3,0,1.9,0,.8,0,1.5.7,1.6,1.5,0,0,0,.1,0,.2,0,.7,0,1.4,0,2H.8c0-.8,0-1.6,0-2.4,0-.9.7-1.4,1.6-1.4.5,0,1,0,1.6,0Z"/>
+      </g>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/horilla_theme/static/horilla_theme/assets/icons/attachment.svg b/horilla_theme/static/horilla_theme/assets/icons/attachment.svg
new file mode 100644
index 000000000..8e6649b48
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/icons/attachment.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 15V9C6 7.4087 6.63214 5.88258 7.75736 4.75736C8.88258 3.63214 10.4087 3 12 3C13.5913 3 15.1174 3.63214 16.2426 4.75736C17.3679 5.88258 18 7.4087 18 9V17C18 18.0609 17.5786 19.0783 16.8284 19.8284C16.0783 20.5786 15.0609 21 14 21C12.9391 21 11.9217 20.5786 11.1716 19.8284C10.4214 19.0783 10 18.0609 10 17V9C10 8.46957 10.2107 7.96086 10.5858 7.58579C10.9609 7.21071 11.4696 7 12 7C12.5304 7 13.0391 7.21071 13.4142 7.58579C13.7893 7.96086 14 8.46957 14 9V17" stroke="black" stroke-opacity="0.878431" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/horilla_theme/static/horilla_theme/assets/icons/auto.svg b/horilla_theme/static/horilla_theme/assets/icons/auto.svg
new file mode 100644
index 000000000..c1dd90cc8
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/icons/auto.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 60 60">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #e54f38;
+      }
+    </style>
+  </defs>
+  <!-- Generator: Adobe Illustrator 28.6.0, SVG Export Plug-In . SVG Version: 1.2.0 Build 709)  -->
+  <g>
+    <g id="Layer_1">
+      <path class="cls-1" d="M37.1,59.3h-14.2c0,0,0-.2,0-.3-.3-2.7-.5-5.4-.8-8.1,0-.2-.3-.4-.5-.5-1.9-.8-3.7-1.8-5.4-3.1-.3-.2-.5-.3-.9-.1-2.1.9-4.2,1.9-6.3,2.8-.4.2-.9.4-1.3.6-2.4-4-4.7-8-7.1-12,.2-.2.4-.3.6-.5,2-1.4,4-2.9,6-4.3.4-.3.5-.5.5-1,0-1.6-.3-3.3,0-4.9.2-1.3-.2-2-1.3-2.7-2-1.3-3.8-2.7-5.7-4,2.4-4,4.7-8,7.1-12,.2,0,.4.2.6.3,2.3,1,4.7,2.1,7,3.1.2,0,.6,0,.8,0,1.7-1.3,3.6-2.4,5.6-3.2.2,0,.3-.3.4-.5.2-1.6.3-3.2.5-4.7.1-1.2.3-2.4.4-3.5h14.1c.3,2.7.6,5.4.8,8.1,0,.4.2.6.5.7,1.9.8,3.7,1.8,5.4,3.1.3.3.6.3.9.1,2.3-1.1,4.7-2.1,7-3.1.2,0,.4-.2.6-.2.1.2.2.4.3.5,1.4,2.3,2.7,4.7,4.1,7,.9,1.5,1.8,2.9,2.6,4.4h0c0,.1,0,.1-.1.1-2.3,1.6-4.6,3.2-6.8,4.8-.1,0-.2.4-.2.6,0,1.6.1,3.2.1,4.9,0,.6-.3,1.4,0,1.9.3.5,1,.8,1.6,1.2,1.8,1.3,3.7,2.6,5.5,3.8h0c-.1.3-.2.5-.3.6-2.1,3.6-4.3,7.3-6.4,10.9-.1.2-.2.4-.3.5-.2,0-.3-.1-.4-.2-2.4-1.1-4.8-2.1-7.2-3.2-.3-.2-.6-.2-.9,0-1.6,1.3-3.5,2.3-5.4,3.1-.3.1-.5.3-.5.6,0,.9-.2,1.9-.3,2.8-.2,1.8-.3,3.6-.5,5.4ZM18.8,39.1c3.8,4.2,8.4,6.1,13.9,4.9,6.5-1.3,10.2-5.6,11.6-12.1.5.4,1,.9,1.6,1.3.8-1,1.6-1.9,2.4-2.9-.1,0-.2-.1-.3-.2-1.5-1.2-2.9-2.4-4.4-3.6-.9-.7-1.6-.8-2.6-.2-1,.6-2.1,1.3-3.1,1.9-.6.4-1.3.8-2,1.2.7,1.1,1.3,2.1,2,3.2.9-.5,1.7-1,2.6-1.6-.6,3.9-2.5,6.8-6,8.4-4.9,2.3-9.2,1.1-12.9-2.7-.9.8-1.9,1.5-2.9,2.4ZM19.4,28.9c.6-4,2.6-6.9,6.2-8.5,4.6-2.1,8.7-1,12.4,2.4.9-.8,1.8-1.6,2.7-2.5-3.1-3.6-8.3-5.7-13.6-4.4-6.4,1.5-10,5.7-11.3,12.1-.5-.4-1-.8-1.6-1.3-.8,1-1.6,1.9-2.4,2.9,1.6,1.3,3.1,2.6,4.7,3.9.8.7,1.6.7,2.5.2,1.3-.8,2.7-1.6,4-2.5.4-.2.7-.5,1.1-.7-.7-1.1-1.3-2.1-2-3.2-.9.5-1.7,1-2.6,1.6Z"/>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/horilla_theme/static/horilla_theme/assets/icons/base.svg b/horilla_theme/static/horilla_theme/assets/icons/base.svg
new file mode 100644
index 000000000..21db094f7
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/icons/base.svg
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 60 60">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #e54f38;
+      }
+    </style>
+  </defs>
+  <!-- Generator: Adobe Illustrator 28.6.0, SVG Export Plug-In . SVG Version: 1.2.0 Build 709)  -->
+  <g>
+    <g id="Layer_1">
+      <g>
+        <path class="cls-1" d="M23.8,5.7c.9.2,1.7.6,2.3,1.3.6.7.9,1.5.9,2.4,0,4.6,0,9.2,0,13.8,0,2.2-1.6,3.8-3.8,3.8-4.6,0-9.2,0-13.8,0-2.2,0-3.8-1.6-3.8-3.8,0-4.6,0-9.1,0-13.7,0-2,1.1-3.4,3.1-3.8,0,0,0,0,.1,0,5,0,9.9,0,14.9,0Z"/>
+        <path class="cls-1" d="M54.3,23.8c-.2.9-.6,1.7-1.3,2.3-.7.6-1.5.9-2.4.9-4.6,0-9.2,0-13.8,0-2.2,0-3.8-1.6-3.8-3.8,0-4.6,0-9.1,0-13.7,0-2,1.1-3.4,3.1-3.8,0,0,0,0,.1,0,5,0,9.9,0,14.9,0,.6.3,1.2.4,1.7.8.9.6,1.3,1.5,1.5,2.4v14.9Z"/>
+        <path class="cls-1" d="M54.3,51.1c-.2.9-.6,1.7-1.3,2.3-.7.6-1.6.9-2.5.9-4.6,0-9.2,0-13.8,0-2.2,0-3.8-1.6-3.8-3.7,0-4.6,0-9.2,0-13.9,0-2.2,1.6-3.7,3.8-3.8,4.6,0,9.2,0,13.8,0,1.9,0,3.3,1.2,3.7,3,0,0,0,.1,0,.2v14.9Z"/>
+        <path class="cls-1" d="M5.7,43.6c0-2.2,0-4.5,0-6.7,0-2.4,1.6-4,4-4,4.5,0,8.9,0,13.4,0,2.4,0,4,1.6,4,4,0,4.4,0,8.9,0,13.3,0,2.4-1.6,4-4,4-4.5,0-8.9,0-13.4,0-2.4,0-4-1.6-4-4,0-2.2,0-4.5,0-6.7Z"/>
+      </g>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/horilla_theme/static/horilla_theme/assets/icons/birthday.svg b/horilla_theme/static/horilla_theme/assets/icons/birthday.svg
new file mode 100644
index 000000000..1ae8876ee
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/icons/birthday.svg
@@ -0,0 +1,61 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 60 60">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #fec63b;
+      }
+
+      .cls-2 {
+        fill: #fb4e3c;
+      }
+
+      .cls-3 {
+        fill: #fe7e3e;
+      }
+
+      .cls-4 {
+        fill: #e92f2f;
+      }
+
+      .cls-5 {
+        fill: #eeaf25;
+      }
+
+      .cls-6 {
+        fill: #fe4440;
+      }
+
+      .cls-7 {
+        fill: #fec53b;
+      }
+    </style>
+  </defs>
+  <!-- Generator: Adobe Illustrator 28.6.0, SVG Export Plug-In . SVG Version: 1.2.0 Build 709)  -->
+  <g>
+    <g id="Layer_1">
+      <g>
+        <path class="cls-6" d="M45.7,4.2h1.4c1.6.2,2.5,1.2,3,2.6.4,1.2.9,2.3,1.3,3.5.6,1.9-.4,3.8-2.2,4.6-1.2.5-2.5.7-3.7,1.1-1.5.4-3.1.9-4.6,1.3-1.9.5-3.8,1.1-5.7,1.6-.6.2-.7.1-.6-.5,0-1.2,0-2.3,0-3.5,0-.5.2-.8.6-1.1,2.2-1.2,4.4-2.3,6.8-3,.8-.2,1.7-.4,2.5-.4.8,0,1.5.3,2.1.9,0,0,0,0,.1.1.3.3.7.3.9,0,.3-.3.3-.6,0-.9-.5-.8-1.2-1.1-2.1-1.3-1.2-.3-2.4-.1-3.6.2-2.2.6-4.3,1.5-6.4,2.6-.9.5-1,.5-1-.6,0-.6-.3-1.1-.5-1.6,0-.2.2-.3.4-.4,2.6-1.2,5.1-2.5,7.7-3.7.7-.3,1.3-.6,1.9-.9.5-.2,1.1-.5,1.6-.6Z"/>
+        <path class="cls-6" d="M10.9,14.8c-1.8-.8-2.7-2.6-2.1-4.4.4-1.3.9-2.6,1.4-3.9.5-1.1,1.3-1.8,2.5-2.2,0,0,.2,0,.2-.1h1.3c.8,0,1.5.5,2.1.8,3,1.5,6.1,2.9,9.1,4.3.2.1.5.2.6.5-.4.6-.6,1.3-.5,2.1,0,.6-.1.7-.7.4-1.4-.8-2.9-1.5-4.4-2.1-1.7-.6-3.3-1.2-5.1-1.1-1.1,0-2.1.3-2.9,1.3-.3.4-.4.8-.1,1.1.3.3.7.3,1.1-.1.8-.8,1.8-1,2.9-.8,1.9.2,3.6.9,5.3,1.7,1.2.5,2.3,1.1,3.4,1.7.4.2.6.6.6,1,0,1.2,0,2.5,0,3.7,0,.4-.2.4-.5.3-1.3-.3-2.6-.7-3.8-1-.7-.2-1.3-.4-2-.5-.5-.2-1-.3-1.5-.4-2-.6-4-1.1-6-1.6-.3,0-.7-.1-.9-.4Z"/>
+        <path class="cls-1" d="M40.8,17.2c1.5-.5,3.1-.9,4.6-1.3,1.3-.4,2.5-.7,3.7-1.1,1.7-.2,3.3,0,5,0,1,0,1.5.4,1.7,1.4v8.7c-.4.9-1.2,1.2-2.1,1.1-.5,0-1.1,0-1.6,0-.1.1-.3.1-.4.1-2,0-3.9,0-5.9,0-.3,0-.5-.4-.6-.6-.5-1.2-1.2-2.4-1.8-3.7-.8-1.3-1.5-2.6-2.4-3.9-.1-.2-.3-.3-.3-.6Z"/>
+        <path class="cls-1" d="M26,55.8c-5.3,0-10.5,0-15.8,0-1.4,0-2.2-.8-2.2-2.1,0-8.1,0-16.2,0-24.3.2-.1.5,0,.7,0,1.2,0,2.3,0,3.5,0,.2,0,.5,0,.7.1.1.2,0,.3,0,.5-1.1,3-1.8,6.1-2.3,9.3,0,0,0,.1,0,.2,0,0,0,0,0,0,0,0,0,0,0,0,1.6-1.4,3.2-2.7,5-3.8.4-.3.5-.2.8.2.5.8.9,1.6,1.4,2.4.5.8,1.1,1.6,1.7,2.4.2-.2.2-.4.2-.6.6-3.5,1.6-6.9,3-10.2.1-.3.2-.5.5-.6.8,0,1.5,0,2.3,0,.2,0,.3,0,.4.1.1.2.1.5.1.7,0,8.3,0,16.7,0,25,0,.2,0,.4,0,.5Z"/>
+        <path class="cls-1" d="M52,29.4c0,7.2,0,14.4,0,21.7,0,.8,0,1.7,0,2.5,0,1.4-.8,2.2-2.2,2.2-3.4,0-6.8,0-10.2,0-1.9,0-3.8,0-5.6,0-.1-.2,0-.4,0-.6,0-8.3,0-16.5,0-24.8,0-.3,0-.6.1-.8.1-.1.3-.2.5-.2.8,0,1.5,0,2.3,0,.3,0,.4.4.5.6,1.4,3.3,2.4,6.7,3,10.2,0,.2,0,.4.2.6.4-.4.7-.9,1-1.4.7-1.1,1.4-2.2,2-3.3.4-.6.5-.7,1.1-.3,1.7,1.1,3.3,2.3,4.8,3.7.1.1,0,0,0,0,0,0,0,0,0-.1-.5-2.7-1.1-5.5-1.9-8.1-.1-.4-.2-.7-.4-1.1,0-.2-.2-.4,0-.6.1-.1.3-.2.5-.2,1.4,0,2.8,0,4.2,0,0,0,.2,0,.2,0Z"/>
+        <path class="cls-6" d="M34.1,29.5c0,.2,0,.4,0,.7,0,8.3,0,16.6,0,25,0,.2,0,.4,0,.6-2.7,0-5.4,0-8.1,0-.1-.2,0-.4,0-.6,0-8.3,0-16.6,0-25,0-.2,0-.4,0-.7,0,0,0-.1,0-.1,1.6,0,3.2,0,4.9,0,1.1,0,2.2,0,3.3,0,0,0,0,0,0,.1Z"/>
+        <path class="cls-1" d="M10.9,14.8c2.1.7,4.2,1.2,6.4,1.8.2,0,.3.1.5.2,0,.3-.1.4-.3.6-1.4,2.2-2.8,4.4-3.9,6.8-.2.5-.4.9-.6,1.4-.2.3-.4.4-.7.4-1.3,0-2.5,0-3.8,0-.2,0-.3,0-.5-.1-.7,0-1.4,0-2.1,0-1,0-1.7-.6-1.7-1.7,0-2.5,0-5.1,0-7.6,0-1.1.6-1.7,1.6-1.7,1.5,0,3,0,4.4,0,.2,0,.4,0,.5,0Z"/>
+        <path class="cls-5" d="M8,25.9c1.3,0,2.7,0,4,0,.5,0,.8-.2,1-.6,1.3-3,3-5.8,4.8-8.5.5,0,1,.2,1.5.4,0,.2,0,.3-.2.5-.9,1.3-1.7,2.6-2.4,4-1.3,2.5-2.5,4.9-3.4,7.5,0,.1,0,.3-.3.4-.1-.2-.3-.1-.5-.1-1.3,0-2.5,0-3.8,0-.2,0-.4,0-.6,0,0-1.2,0-2.3,0-3.5Z"/>
+        <path class="cls-5" d="M52,29.4c-.2.1-.4,0-.6,0-1.3,0-2.5,0-3.8,0-.2,0-.4,0-.5.1-.2,0-.2-.2-.3-.3-.4-1-.8-2-1.2-2.9,0-.2-.1-.3,0-.5,2.1,0,4.3,0,6.4,0,0,1.2,0,2.3,0,3.5Z"/>
+        <path class="cls-4" d="M16.5,21.6c.8-1.5,1.7-3,2.7-4.4,1.6.4,3.2.8,4.7,1.3.5.1,1,.3,1.5.4-.1-1.4,0-2.8,0-4.2,0-.2,0-.4-.3-.5-2.4-1.4-4.9-2.6-7.6-3.3-.9-.2-1.8-.4-2.7-.2-.5.1-.9.3-1.3.7-.2.2-.4.4-.8.4-.3,0-.6-.2-.7-.5-.1-.3,0-.6.2-.9.8-1,1.8-1.4,3.1-1.4,2,0,3.9.6,5.8,1.3,1.3.5,2.7,1.2,3.9,1.9.1,0,.2.2.4.1,0-.9,0-1.8.6-2.5.6-.5,1.2-.7,2-.7,1.4,0,2.7,0,4.1,0,.8,0,1.4.2,2,.7.5.6.7,1.3.6,2.1,0,.4.1.5.4.3,1.8-1,3.7-1.9,5.6-2.5,1.3-.4,2.6-.7,4-.6,1.2,0,2.3.4,3.1,1.5.3.4.2.9-.1,1.1-.3.3-.8.3-1.2-.1-.7-.9-1.7-1-2.8-.9-2.1.2-4.1,1.1-6,2-.9.4-1.8.9-2.7,1.4-.3.2-.5.4-.4.7,0,1.1,0,2.3,0,3.4,0,.2,0,.5-.1.7,1.1-.3,2.1-.6,3.2-.9,1-.3,2-.6,3.1-.8,1,1.4,1.9,2.9,2.7,4.4,0,.4-.2.4-.4.4-.9.3-1.8.5-2.7.7-2,.5-4,1.1-6,1.6,0,0-.2,0-.2,0,0,0-.2-.2-.3-.3-.7-1-1.3-2-2.1-3-.3-.3-.5-.5-1-.5-.6,0-1.2,0-1.8,0-.4,0-.6.1-.9.4-.8,1-1.4,2-2.1,3.1,0,0-.2.2-.3.3,0,0-.1,0-.2,0-2-.5-4-1.1-6-1.6-.9-.2-1.8-.5-2.7-.7-.2,0-.5,0-.4-.4Z"/>
+        <path class="cls-6" d="M34.3,24.4c1.3-.4,2.6-.7,3.8-1.1,1.7-.5,3.3-.9,5-1.4.1,0,.4,0,.4-.3.7,1.2,1.3,2.5,1.9,3.7,0,.2.2.3.2.5.5,1.2,1,2.5,1.5,3.7.6,1.7,1.1,3.5,1.5,5.3.4,1.5.7,3,.9,4.6,0,.1,0,.2-.1.2-1.6-1.4-3.2-2.7-5-3.8-.4-.3-.6-.2-.8.2-.9,1.7-1.9,3.2-3,4.7,0,.1-.1.2-.3.3-.1-.7-.2-1.4-.4-2.1-.7-3.3-1.6-6.5-3-9.5-.1,0-.2-.2-.3-.3-.6-1.5-1.4-2.9-2.2-4.2,0-.2-.3-.3-.1-.6Z"/>
+        <path class="cls-6" d="M16.5,21.6c0,.3.3.2.4.3,2.8.8,5.5,1.5,8.3,2.3.2,0,.3.1.5.2.1.3-.2.5-.3.8,0,.2-.2.4-.4.6-.6,1.1-1.2,2.2-1.7,3.3,0,.1-.2.3-.3.3-.9,2-1.6,4-2.2,6.1-.5,1.7-.9,3.5-1.1,5.2,0,0,0,.1-.1.3-.4-.5-.8-1-1.1-1.5-.8-1.2-1.6-2.3-2.2-3.6-.2-.4-.4-.5-.8-.2-1.7,1.2-3.4,2.5-5,3.8-.2,0-.2,0-.1-.2.3-2,.7-4,1.3-6,.4-1.3.8-2.6,1.2-3.8.7-1.8,1.4-3.7,2.3-5.4.4-.9.9-1.7,1.3-2.5Z"/>
+        <path class="cls-5" d="M23.1,29.5c.6-1.3,1.2-2.5,1.9-3.7.3,0,.6,0,.9,0,0,0,0,0,0,.2.1,1,0,2.1,0,3.1,0,.1,0,.2-.1.3,0,0,0,0,0,0-.9,0-1.9,0-2.8,0Z"/>
+        <path class="cls-3" d="M10.5,39.5c0,0,0,.2.1.2,0,0,0,.2-.2,0,0,0,0-.2,0-.3Z"/>
+        <path class="cls-5" d="M34.3,24.4c.6,1.1,1.2,2.2,1.8,3.3.3.6.6,1.2.9,1.9-.9,0-1.9,0-2.8,0,0,0,0,0,0,0-.1-.1-.1-.3-.1-.5,0-1,0-2,0-3,0-.4,0-.8,0-1.2,0-.2,0-.4.2-.4h0Z"/>
+        <path class="cls-3" d="M49.4,39.7c0,0,0-.1.1-.2,0,0,.1.2,0,.3,0,0-.1,0-.2,0Z"/>
+        <path class="cls-4" d="M34.1,25.9c0,1.2,0,2.3,0,3.5-.2.1-.3,0-.5,0-2.4,0-4.8,0-7.2,0-.2,0-.4,0-.5,0,0-1.2,0-2.4,0-3.5.2-.2.4-.1.6-.1,2.3,0,4.7,0,7,0,.2,0,.4,0,.6.1Z"/>
+        <path class="cls-6" d="M26,24.1c.7-1.2,1.5-2.3,2.3-3.4.1-.2.3-.2.5-.2.8,0,1.6,0,2.4,0,.2,0,.4,0,.5.2.8,1.1,1.6,2.2,2.3,3.4.1.5,0,1,0,1.5,0,.1,0,.2-.2.2,0,0-.2,0-.3,0-2.4,0-4.8,0-7.2,0-.4,0-.6-.1-.6-.5,0-.4,0-.8.1-1.2Z"/>
+        <path class="cls-2" d="M26,24.1c0,.4,0,.9,0,1.3,0,.3,0,.4.4.4,2.4,0,4.8,0,7.3,0,.3,0,.4-.1.4-.4,0-.4,0-.9,0-1.3,0,0,.2.1.2.2-.2.5,0,1.1-.1,1.6-2.7,0-5.5,0-8.2,0,0,0,0,0,0,0-.3-.5,0-1.1,0-1.6,0-.1,0-.2.2-.2Z"/>
+        <path class="cls-7" d="M25.8,24.3c.2.5,0,1.1,0,1.6-.3,0-.6.1-.9-.1.2-.5.5-.9.7-1.4,0,0,0,0,0,0Z"/>
+      </g>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/horilla_theme/static/horilla_theme/assets/icons/call.svg b/horilla_theme/static/horilla_theme/assets/icons/call.svg
new file mode 100644
index 000000000..659b84f51
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/icons/call.svg
@@ -0,0 +1,9 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect width="24" height="24" fill="url(#pattern0_399_9175)"/>
+<defs>
+<pattern id="pattern0_399_9175" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_399_9175" transform="scale(0.01)"/>
+</pattern>
+<image id="image0_399_9175" width="100" height="100" preserveAspectRatio="none" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAACXBIWXMAAAsTAAALEwEAmpwYAAAJFElEQVR4nO1deWxURRj/UUoLKJbLarUgigf1iEoVb0E08cCAipCo4IGCIVREDUg8UASJJ4oHCRFs5ApBUYkaweCBKFdBCAilETCgCIJaEeUo0Gcm+TZpmp1vvnlv3u6+3fdL5p/Nzux77/fmu+dbILdQCaAWwC8ANgFYBmAWgKcB9AdwHoC8dF9krhHiGcYfAOYBGAbgjHRfcLajUkBI47EBwOMAitN98dmISh+EJMYhADMBnJPum8gmVAYgJDGOAvgQQHm6byYbUOmAkMSoBzA9FmXBoMRNbwB3AHgQwHgA7wNYRyLJDzF/0lqxdeYYzQH0BDAOwHLaATbELIx3S7g4DcAzADZbkLIDQA9kOM4EMBzA6wAmAXgkYpZKHoBbAawSknIEwAhkIDoAmM9sfbXFOyNauBHARiExLwBoggyBCkHsEVz03wAuQbTQDMBoAP8K7u9dAPnpvuAuAHZZyN3aFNr0NwF4FMAQALeQ6CzwudapAFYKSUnbTjmdFJsf0/H8NPkhSuavATARQC8AhRbrFZBurBeIr5TjFADbAjhauwGcmwGOoXo53gZwocW6AwHUGdZ9GClEKYAthguqpjeR+84uEnmZ4ql/DuAKC4XP6RW1E7sjBTgRQI3hxhYBaEEK7gPDd3eEGPb2GzqZA+AkwfqXG0jZEXbU+HgAPxpuZjGAlo2slPmGOdvJMcukWNZeAIOEO4UTXwvDCrO0FYigpQBaJZmrFOdnhrk/k15yiSfIwdsqkPm6oQKKxwh0CqfolZXnFEUCk6+KvsfFjr4wrLGZ9FMYUOLzLAD3ApgB4C8LUqoEomeSISvZ3tWNHAvge8MFr6UdZIISZV8Z1qoBUILwoV6QfgC+E5JSY9jBBYaXdpqLi5Y8wA2kW6RQ23+JYc2NKY6kqgDhD0JSuHtVevA/zdx6S9M6KT4K6W1uRRUgHjPWudzmAjSlQOhBgfjidMpoZq6yOH3jbsOFbQko74vo5rjfWCMUhS7RVeBjvWcQXRuZdPDZfhXgVuaClIfeCcHRRiAqVgA4DqnFCYLrus8QQ9PNUwaFNa5hFvyVYliu0J7EE3fzHwcslKsmcTHc4kUqMpCyl3EeVXBxtWbeQT+7/nkmHKC2tGsUC/IOVztyDOvJ/L5YuFM4STGbmXsbM2+o7Y3MY7zOsFBiCMm86dhTrxeGSMoNiv4yzbw8Jh2sDBorLNAspJyfMFHK3ISKj4UROlHxpm6GdR5j5qsIhA7PMvOssqe6gKDaOWFjtua3lT8UVizrAIkYzshZ68O/6MyEVKzE1gTNIvsEcZ0geNGxp2sTXDxg2Ck9mbkqn6LDCs0cVR8mBvfjyj8JAy8ZHlhfn7n+gVQgt04ovjidspSJVRVYGkh7bKLAaovu1Cz0JVJPxiZHxQPdBc6oUvQ69GfmqTB8MlzLzLEqj3qFkZllSB0ZBwRK1wYqPzOZ+T11fxcxAclazTz1vJKhBWOlqeCm1Xb3IzNdklFHRWthgCOFM+9nauYoJ1IHXVLvKduLXs4o99aILhmJnbKKiTnpQu2DNHMOM3pknqswyl3MAxuJ6JLRMOyuu4YKJEcXZk6ZpWJXRoIVChjlvovkY1TJSGC95jrmQr+zdOngPpo5QzXfV+Eia3DepgrWufIzvDSQwflcKvGmgy6+9YClpFGng63RjnSGbsFCByEZL01kcHkfZU3poCv20FXB92FqnX1hIvMgH7JYh7PjK5EeKF9gSpKhrDAdRmrmqDxIMpT5+A1jcdx+xuPkqk0a6yRdYfY/Diy3nAJntys5LMVYZp0nQ7z+rEMps0v2W+TX21K2zUsy1OfxgX0HFkmiwk+KcSmIAuQEjqNjBLoYUA8Hu+Sw38qMXEUF83ZXW5jBY5l1qsgBiyFAM0PuW7U+klZFbmfWeS5mQ47rDOFyaZlQP2YdJboujUmRYwbzMJdQaaYEnzLrbKZIQQxhgdseBz5FCZ3z063zbYCTszmHwYbYlKQYzRTm9ygpFDd7ESCPjrDpHmSNRZXKVAMpUzOpU0ImoxNFLXUP8h3hOs0Fp7Smh2QOq5NVN1NUtms27EaTyNHlCZL1S/ndsNYCzTlGPxhAFS2Nf2MnRXQj7QvpKg49qrrQ1cA2xgVMZUfD5FGQo9T51ALDM4zFdGQikmht6Ozwm/DsN4g8XVIsMRRpt8MfGXMEZDSMGkSWlKsMx4+XW4RWegpI8cgfKgqJjKwgpUKgmKXWUjlTZNFwbKMKwTDIaEhKZBNo0ww395plW6RqwQOrJz1W6pOMfVQjkJWkFDKFybZBSNBDMLXnSAx1LHkMna+XkrGX4mYdBD0XV0aVlBJBL61hFus1IVP0sJCY3fR9KRkJZDUp3ZiD9B6VbN5puabqwPNTAF3AkZETpFxvaFpcR46lDVQu5Q0fvXYlZDQkZUu2ktKPTvByO6XCx7pXCg/i2JKRE6QMFrzRY3ysm08tMWodk5ETpAwXPLC3fAb32lDzyf0OybDRKavT0AbECbgSII/GLIr++sHJVKZ5yBEZCXQU7JQVFlGDjMJIgfiqojfTL5SD+DI1KgtKhg0py3we00g77jcoeo9C8UE7e7Z03JtFQoraoZFEX0F/qjqfFliYMJFyxPFLkPKSon0CvTI7wyyZjobGNKMQYZQbiuYSYzuF5aNAiirMiDSKAXwjIEU5ka8GsMJcY7zmOlV7xMijGYVEPMFY77ihgB9UMNZiVlXx30MlqZLdMjlNuoUjw6Pje1mFrsLElEfH5GwDlGGSYXsYNjJoQaEUaVT3a6ZPSarIOEr/S5LVuIGqVjyLVK5K/aaajHrLpFuk0Y66K3jCcYhy9+oEsQvEZGjQy+CQJSNmSsCmz0MEO8PmvH7WoSUdQLX5+9SDRIzt+cV4Z1igjDrcSUlJvM2L6F/bTIeKYjICiDFdVx/Tn8iMSpJYKqRkV6zAA6Ap9WM3FbslGyrL+AnlT6YKqiVzyppy4buMoB71tsRIRV5Mhg8UUOslVzVcsTXlMGA5gGloHO+MNKIbVd+bspTJGiX3TueFZzuKqUWrSc/UUj/eSJb3RBH59Oc1Y2jnzKUSpAlkSjf8g8wYMWLEiBEjRowYMWLEiBEDzvE/YxHV1QlCS4AAAAAASUVORK5CYII="/>
+</defs>
+</svg>
diff --git a/horilla_theme/static/horilla_theme/assets/icons/campaign.svg b/horilla_theme/static/horilla_theme/assets/icons/campaign.svg
new file mode 100644
index 000000000..dec7dd227
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/icons/campaign.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 60 60">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #76787b;
+      }
+    </style>
+  </defs>
+  <!-- Generator: Adobe Illustrator 28.6.0, SVG Export Plug-In . SVG Version: 1.2.0 Build 709)  -->
+  <g>
+    <g id="Layer_1">
+      <g>
+        <path class="cls-1" d="M24.9,40.1v-20.6c3-.8,5.8-1.9,8.5-3.2,4.5-2.1,8.7-4.6,13-7.1,2-1.1,4-2.2,6.1-3.2,2.1-1,4.7.5,4.9,2.8,0,.2,0,.5,0,.7,0,13.6,0,27.3,0,40.9,0,2-1,3.2-2.9,3.8-.8.2-1.4.1-2.1-.3-3.6-2.3-7.2-4.6-10.9-6.7-4.7-2.8-9.7-5.2-15.1-6.6-.5-.1-1.1-.3-1.6-.4Z"/>
+        <path class="cls-1" d="M21.1,39.7c-3.4,0-6.7.3-10,0-4.9-.5-8.3-4.7-8.5-9.6-.1-4.7,3.2-8.9,7.9-9.9.6-.1,1.3-.2,2-.2,2.7,0,5.4,0,8.1,0,.2,0,.3,0,.6,0v19.7Z"/>
+      </g>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/horilla_theme/static/horilla_theme/assets/icons/case.svg b/horilla_theme/static/horilla_theme/assets/icons/case.svg
new file mode 100644
index 000000000..49f0a3511
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/icons/case.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 60 60">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #e54f38;
+      }
+    </style>
+  </defs>
+  <!-- Generator: Adobe Illustrator 28.6.0, SVG Export Plug-In . SVG Version: 1.2.0 Build 709)  -->
+  <g>
+    <g id="Layer_1">
+      <g>
+        <path class="cls-1" d="M48.6,1.2c.3,0,.7.2,1,.3,2.6.8,4.1,2.9,4.1,5.6,0,4.3,0,8.6,0,12.8,0,9.1,0,18.3,0,27.4,0,3.7-2.8,5.9-5.8,5.9-.1,0-.3,0-.4,0,0-.3,0-.5,0-.7,0-13.2,0-26.3,0-39.5,0-2.8-1.5-5-3.9-5.8-.8-.3-1.6-.3-2.4-.3-9.2,0-18.5,0-27.7,0h-.9c.1-.6.2-1.2.4-1.8.8-2.1,2.3-3.2,4.4-3.7.1,0,.2,0,.4-.1,10.3,0,20.6,0,31,0Z"/>
+        <path class="cls-1" d="M43.7,34.7c0,7.2,0,14.3,0,21.5,0,1.7-1.1,2.6-2.6,2.6-10.8,0-21.6,0-32.4,0-1.7,0-2.5-.8-2.5-2.5,0-14.4,0-28.9,0-43.3,0-1.7.8-2.5,2.5-2.5,10.8,0,21.6,0,32.4,0,1.7,0,2.5.8,2.5,2.5,0,7.2,0,14.5,0,21.7ZM25.3,22.6c-2.9,0-5.8,0-8.7,0-.5,0-1,.2-1.4.5-.6.4-.8,1.3-.5,2,.3.8,1,1.2,1.9,1.2,5.8,0,11.6,0,17.3,0,1.2,0,2-.8,2.1-1.9,0-1.1-.8-1.9-2.1-1.9-2.9,0-5.7,0-8.6,0ZM25.4,41.1c2.9,0,5.7,0,8.6,0,.2,0,.5,0,.7,0,.9-.2,1.5-1.1,1.4-2-.1-1-.9-1.6-2-1.6-5.8,0-11.6,0-17.4,0-1.2,0-2,.8-2,1.9,0,1.1.8,1.8,2,1.8,2.9,0,5.8,0,8.7,0ZM25.4,30c-2.9,0-5.8,0-8.7,0-1.2,0-2,.7-2,1.8,0,1.1.8,1.9,2.1,1.9,5.7,0,11.5,0,17.2,0,.2,0,.5,0,.7,0,.9-.2,1.5-1.1,1.4-2-.1-1-.9-1.7-1.9-1.7-2.9,0-5.9,0-8.8,0Z"/>
+      </g>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/horilla_theme/static/horilla_theme/assets/icons/chart.svg b/horilla_theme/static/horilla_theme/assets/icons/chart.svg
new file mode 100644
index 000000000..ef43138df
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/icons/chart.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.83004 1.35572V3.39095C4.02037 4.52827 2.03837 7.28284 2.03837 10.5003C2.03837 14.7345 5.47085 18.167 9.70504 18.167C12.9225 18.167 15.6771 16.185 16.8144 13.3753H18.8496C17.6284 17.2634 13.9961 20.0837 9.70504 20.0837C4.41231 20.0837 0.121704 15.793 0.121704 10.5003C0.121704 6.20925 2.94197 2.57689 6.83004 1.35572ZM9.70504 0.916992C14.9977 0.916992 19.2884 5.20759 19.2884 10.5003C19.2884 10.8238 19.2724 11.1435 19.241 11.4587H8.7467V0.964315C9.0619 0.933016 9.3816 0.916992 9.70504 0.916992ZM10.6634 2.89297V9.54199H17.3124C16.88 6.07405 14.1313 3.32542 10.6634 2.89297Z" fill="black"/>
+</svg>
diff --git a/horilla_theme/static/horilla_theme/assets/icons/chat.svg b/horilla_theme/static/horilla_theme/assets/icons/chat.svg
new file mode 100644
index 000000000..ca5ff7319
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/icons/chat.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 20 20">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #191919;
+      }
+    </style>
+  </defs>
+  <!-- Generator: Adobe Illustrator 28.6.0, SVG Export Plug-In . SVG Version: 1.2.0 Build 709)  -->
+  <g>
+    <g id="Layer_1">
+      <path class="cls-1" d="M4.1,15.8c-.7-.2-1.3-.4-1.8-.9-1-.8-1.6-1.9-1.6-3.3,0-2.3,0-4.5,0-6.8,0-2.1,1.5-3.8,3.6-4.2.2,0,.4,0,.7,0,3.3,0,6.6,0,9.9,0,2.1,0,3.8,1.4,4.2,3.4,0,.3,0,.6,0,.9,0,2.2,0,4.4,0,6.6,0,2.1-1.4,3.8-3.5,4.2-.3,0-.6,0-.9,0-1.5,0-3,0-4.5,0-.1,0-.2,0-.3.1-1.5,1-3.1,2-4.6,3.1-.2.1-.4.2-.6.2-.5,0-.8-.4-.8-.8,0-.8,0-1.6,0-2.4,0,0,0-.1,0-.2ZM10,7.5c1.2,0,2.5,0,3.7,0,.5,0,.9,0,1.4,0,.4,0,.8-.3.8-.7,0-.4-.2-.8-.6-.9-.1,0-.3,0-.4,0-3.3,0-6.5,0-9.8,0,0,0-.1,0-.2,0-.4,0-.6.2-.8.6-.2.6.2,1.1.8,1.1,1.7,0,3.3,0,5,0ZM10,10.8c.7,0,1.3,0,2,0,.5,0,1,0,1.4,0,.5,0,.9-.5.8-1,0-.4-.4-.7-.9-.7-2.2,0-4.4,0-6.6,0,0,0-.1,0-.2,0-.4,0-.7.3-.7.6-.1.6.3,1,.9,1,1.1,0,2.2,0,3.3,0Z"/>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/horilla_theme/static/horilla_theme/assets/icons/close-red.svg b/horilla_theme/static/horilla_theme/assets/icons/close-red.svg
new file mode 100644
index 000000000..cdebac2f1
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/icons/close-red.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.99865 4.82178L10.1236 0.696777L11.302 1.87511L7.17698 6.00011L11.302 10.1251L10.1236 11.3034L5.99865 7.17844L1.87365 11.3034L0.695312 10.1251L4.82031 6.00011L0.695312 1.87511L1.87365 0.696777L5.99865 4.82178Z" fill="#E54F38"/>
+</svg>
diff --git a/horilla_theme/static/horilla_theme/assets/icons/close.svg b/horilla_theme/static/horilla_theme/assets/icons/close.svg
new file mode 100644
index 000000000..e20b25e1b
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/icons/close.svg
@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.00023 5.58599L11.9502 0.635986L13.3642 2.04999L8.41423 6.99999L13.3642 11.95L11.9502 13.364L7.00023 8.41399L2.05023 13.364L0.63623 11.95L5.58623 6.99999L0.63623 2.04999L2.05023 0.635986L7.00023 5.58599Z" fill="black"/>
+</svg>
diff --git a/horilla_theme/static/horilla_theme/assets/icons/close1.svg b/horilla_theme/static/horilla_theme/assets/icons/close1.svg
new file mode 100644
index 000000000..e63e426eb
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/icons/close1.svg
@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.99999 5.58623L11.95 0.63623L13.364 2.05023L8.41399 7.00023L13.364 11.9502L11.95 13.3642L6.99999 8.41423L2.04999 13.3642L0.635986 11.9502L5.58599 7.00023L0.635986 2.05023L2.04999 0.63623L6.99999 5.58623Z" fill="#E54F38"/>
+</svg>
diff --git a/horilla_theme/static/horilla_theme/assets/icons/comment.svg b/horilla_theme/static/horilla_theme/assets/icons/comment.svg
new file mode 100644
index 000000000..6aa0f0743
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/icons/comment.svg
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 60 60">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #fff;
+      }
+
+      .cls-2 {
+        fill: #f8595f;
+      }
+    </style>
+  </defs>
+  <!-- Generator: Adobe Illustrator 28.6.0, SVG Export Plug-In . SVG Version: 1.2.0 Build 709)  -->
+  <g>
+    <g id="Layer_1">
+      <g>
+        <path class="cls-2" d="M30,4.6c8,0,16,0,24,0,3.2,0,5.3,2.1,5.3,5.3,0,9.5,0,19,0,28.5,0,3.2-2,5.3-5.2,5.3-11.8,0-23.6,0-35.4,0-1.5,0-2.8.5-4,1.5-3.6,3.2-7.3,6.4-11,9.6-1.1,1-2.5.7-2.9-.6,0-.2,0-.4,0-.7,0-14.6,0-29.2,0-43.9,0-3,2.1-5.1,5.1-5.1,8.1,0,16.1,0,24.2,0Z"/>
+        <path class="cls-1" d="M30,18.3c-4.5,0-9.1,0-13.6,0-.9,0-1.6-.5-1.9-1.3-.3-.8,0-1.6.6-2.1.4-.3.8-.4,1.2-.4,9.1,0,18.2,0,27.2,0,1.1,0,2,.9,2,2,0,1.1-.9,1.9-2,1.9-4.5,0-9.1,0-13.6,0Z"/>
+        <path class="cls-1" d="M30,22.2c4.5,0,9,0,13.5,0,1.5,0,2.5,1.4,1.9,2.7-.3.8-1,1.2-1.9,1.2-1.7,0-3.5,0-5.2,0-7.2,0-14.4,0-21.6,0-.3,0-.6,0-.8,0-1-.2-1.6-1.2-1.5-2.1.1-1,1-1.7,2-1.7,4.5,0,9.1,0,13.6,0Z"/>
+        <path class="cls-1" d="M25.1,33.9c-2.9,0-5.8,0-8.7,0-.9,0-1.6-.5-1.9-1.4-.3-.8,0-1.6.7-2.1.3-.3.7-.4,1.2-.4,5.9,0,11.7,0,17.6,0,1.1,0,1.9.9,1.9,1.9,0,1.1-.8,2-2,2-2.9,0-5.9,0-8.8,0Z"/>
+      </g>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/horilla_theme/static/horilla_theme/assets/icons/completed.svg b/horilla_theme/static/horilla_theme/assets/icons/completed.svg
new file mode 100644
index 000000000..a8541ab2e
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/icons/completed.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 60 60">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #3dcf2a;
+      }
+    </style>
+  </defs>
+  <!-- Generator: Adobe Illustrator 28.6.0, SVG Export Plug-In . SVG Version: 1.2.0 Build 709)  -->
+  <g>
+    <g id="Layer_1">
+      <circle class="cls-1" cx="30" cy="30" r="29.2"/>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/horilla_theme/static/horilla_theme/assets/icons/copy.svg b/horilla_theme/static/horilla_theme/assets/icons/copy.svg
new file mode 100644
index 000000000..7c457cf22
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/icons/copy.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 60 60">
+  <!-- Generator: Adobe Illustrator 28.6.0, SVG Export Plug-In . SVG Version: 1.2.0 Build 709)  -->
+  <g>
+    <g id="Layer_1">
+      <g>
+        <path d="M4.5,33.9c0-6.4,0-12.8,0-19.3,0-3.8,2.5-6.3,6.3-6.3,8.9,0,17.8,0,26.7,0,3.8,0,6.3,2.5,6.3,6.3,0,12.8,0,25.7,0,38.5,0,3.8-2.5,6.3-6.3,6.3-8.9,0-17.8,0-26.7,0-3.8,0-6.3-2.5-6.3-6.3,0-6.4,0-12.8,0-19.3Z"/>
+        <path d="M47.7,51.6c0-.4,0-.6,0-.9,0-12.1,0-24.2,0-36.3,0-4.8-3.2-8.7-7.9-9.7-.7-.1-1.5-.2-2.2-.2-6.7,0-13.5,0-20.2,0-.2,0-.4,0-.7,0,.7-1.9,2-3.1,3.8-3.7.6-.2,1.2-.3,1.8-.3,9.1,0,18.2,0,27.2,0,3.4,0,6,2.6,6,6,0,13,0,26,0,39,0,3.4-2.6,6-6,6-.6,0-1.2,0-1.8,0Z"/>
+      </g>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/horilla_theme/static/horilla_theme/assets/icons/currency.svg b/horilla_theme/static/horilla_theme/assets/icons/currency.svg
new file mode 100644
index 000000000..a8006f3a0
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/icons/currency.svg
@@ -0,0 +1,10 @@
+<svg width="23" height="22" viewBox="0 0 23 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_569_21897)">
+<path d="M11.4871 22V20.2812C14.0298 20.2812 16.4203 19.3158 18.2182 17.5628C20.0162 15.8098 21.0064 13.4791 21.0064 11C21.0064 9.34171 20.5527 7.71465 19.6943 6.29475C19.171 5.42893 18.5065 4.65231 17.7328 3.99579L17.9505 6.42215L16.1943 6.57194L15.7335 1.43529L21.0018 0.985918L21.1555 2.69814L19.0911 2.87422C19.9217 3.61359 20.639 4.47253 21.213 5.42205C22.2311 7.10617 22.7692 9.035 22.7692 11C22.7692 13.9382 21.5956 16.7005 19.4648 18.7782C17.3338 20.8558 14.5007 22 11.4871 22ZM1.97248 21.0141L1.81885 19.3019L3.88311 19.1258C3.05256 18.3865 2.33527 17.5275 1.7613 16.578C0.743179 14.8938 0.205078 12.965 0.205078 11C0.205078 8.0618 1.37863 5.29947 3.50949 3.2218C5.64043 1.14421 8.47359 0 11.4871 0V1.71875C8.94448 1.71875 6.55396 2.68417 4.75602 4.43717C2.95807 6.19016 1.9679 8.52087 1.9679 11C1.9679 12.6583 2.4216 14.2853 3.27992 15.7052C3.8033 16.5711 4.4678 17.3477 5.2415 18.0042L5.02379 15.5778L6.77991 15.4281L7.24085 20.5647L1.97248 21.0141ZM12.3685 17.875H10.6057V16.1562C8.90469 16.1562 7.52078 14.8069 7.52078 13.1484H9.2836C9.2836 13.8592 9.8767 14.4375 10.6057 14.4375H12.3685C13.0976 14.4375 13.6907 13.8592 13.6907 13.1484C13.6907 12.4376 13.0976 11.8594 12.3685 11.8594H10.6057C8.90469 11.8594 7.52078 10.5101 7.52078 8.85156C7.52078 7.19305 8.90469 5.84375 10.6057 5.84375V4.125H12.3685V5.84375C14.0696 5.84375 15.4535 7.19305 15.4535 8.85156H13.6907C13.6907 8.14077 13.0976 7.5625 12.3685 7.5625H10.6057C9.8767 7.5625 9.2836 8.14077 9.2836 8.85156C9.2836 9.56235 9.8767 10.1406 10.6057 10.1406H12.3685C14.0696 10.1406 15.4535 11.4899 15.4535 13.1484C15.4535 14.8069 14.0696 16.1562 12.3685 16.1562V17.875Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_569_21897">
+<rect width="22.5641" height="22" fill="white" transform="translate(0.205078)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/horilla_theme/static/horilla_theme/assets/icons/customer.svg b/horilla_theme/static/horilla_theme/assets/icons/customer.svg
new file mode 100644
index 000000000..9a69b84f5
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/icons/customer.svg
@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 21 21">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: none;
+      }
+
+      .cls-2 {
+        fill: #191919;
+      }
+
+      .cls-3 {
+        clip-path: url(#clippath);
+      }
+    </style>
+    <clipPath id="clippath">
+      <rect class="cls-1" width="21" height="21"/>
+    </clipPath>
+  </defs>
+  <!-- Generator: Adobe Illustrator 28.6.0, SVG Export Plug-In . SVG Version: 1.2.0 Build 709)  -->
+  <g>
+    <g id="Layer_1">
+      <g class="cls-3">
+        <g>
+          <path class="cls-2" d="M10.5,8.5c2,0,3.6-1.6,3.6-3.6s-1.6-3.6-3.6-3.6-3.6,1.6-3.6,3.6,1.6,3.6,3.6,3.6Z"/>
+          <path class="cls-2" d="M17.7,8.5c1.2,0,2.3-1,2.3-2.3s-1-2.3-2.3-2.3-2.3,1-2.3,2.3,1,2.3,2.3,2.3Z"/>
+          <path class="cls-2" d="M3.3,8.5c1.2,0,2.3-1,2.3-2.3s-1-2.3-2.3-2.3-2.3,1-2.3,2.3,1,2.3,2.3,2.3Z"/>
+          <path class="cls-2" d="M5.5,10.5c-.9-.7-1.7-.6-2.7-.6-1.5,0-2.8,1.2-2.8,2.8v4.5c0,.7.5,1.2,1.2,1.2,2.9,0,2.5,0,2.5-.1,0-3.2-.4-5.5,1.8-7.7Z"/>
+          <path class="cls-2" d="M11.5,9.9c-1.8-.1-3.4,0-4.7,1.1-2.2,1.8-1.8,4.2-1.8,7.2s.6,1.4,1.4,1.4c8.7,0,9,.3,9.5-.9.2-.4.1-.3.1-3.9s-2.5-4.9-4.6-4.9Z"/>
+          <path class="cls-2" d="M18.2,9.9c-1,0-1.8,0-2.7.6,2.1,2.2,1.8,4.3,1.8,7.7s-.3.1,2.5.1,1.2-.6,1.2-1.2v-4.4c0-1.5-1.2-2.8-2.8-2.8Z"/>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/horilla_theme/static/horilla_theme/assets/icons/customers.svg b/horilla_theme/static/horilla_theme/assets/icons/customers.svg
new file mode 100644
index 000000000..e5d320285
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/icons/customers.svg
@@ -0,0 +1,3 @@
+<svg width="25" height="21" viewBox="0 0 25 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.25 21C0.25 18.8783 1.08827 16.8434 2.58041 15.3431C4.07255 13.8429 6.09632 13 8.20652 13C10.3167 13 12.3405 13.8429 13.8326 15.3431C15.3248 16.8434 16.163 18.8783 16.163 21H14.1739C14.1739 19.4087 13.5452 17.8826 12.4261 16.7574C11.307 15.6321 9.78916 15 8.20652 15C6.62387 15 5.10604 15.6321 3.98694 16.7574C2.86783 17.8826 2.23913 19.4087 2.23913 21H0.25ZM8.20652 12C4.90953 12 2.23913 9.315 2.23913 6C2.23913 2.685 4.90953 0 8.20652 0C11.5035 0 14.1739 2.685 14.1739 6C14.1739 9.315 11.5035 12 8.20652 12ZM8.20652 10C10.4045 10 12.1848 8.21 12.1848 6C12.1848 3.79 10.4045 2 8.20652 2C6.00853 2 4.22826 3.79 4.22826 6C4.22826 8.21 6.00853 10 8.20652 10ZM16.4455 13.703C17.8432 14.3359 19.0293 15.3612 19.8614 16.6557C20.6935 17.9502 21.136 19.4587 21.1359 21H19.1467C19.147 19.844 18.8151 18.7125 18.191 17.7416C17.567 16.7707 16.6773 16.0017 15.6289 15.527L16.4455 13.703ZM15.7612 2.413C16.7633 2.8283 17.62 3.53354 18.2228 4.43923C18.8255 5.34492 19.1471 6.41024 19.1467 7.5C19.1471 8.87233 18.6372 10.1952 17.7171 11.2088C16.797 12.2224 15.5331 12.8535 14.1739 12.978V10.965C14.9108 10.8589 15.5945 10.518 16.1245 9.99246C16.6546 9.4669 17.0031 8.78432 17.119 8.04493C17.2348 7.30555 17.1118 6.5483 16.7681 5.88435C16.4244 5.22041 15.878 4.68475 15.2092 4.356L15.7612 2.413Z" fill="#F6A723"/>
+</svg>
diff --git a/horilla_theme/static/horilla_theme/assets/icons/data-analytics.svg b/horilla_theme/static/horilla_theme/assets/icons/data-analytics.svg
new file mode 100644
index 000000000..48af3c53b
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/icons/data-analytics.svg
@@ -0,0 +1,35 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 20 20">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: none;
+      }
+
+      .cls-2 {
+        fill: #191919;
+      }
+
+      .cls-3 {
+        clip-path: url(#clippath);
+      }
+    </style>
+    <clipPath id="clippath">
+      <rect class="cls-1" y="0" width="20" height="20"/>
+    </clipPath>
+  </defs>
+  <!-- Generator: Adobe Illustrator 28.6.0, SVG Export Plug-In . SVG Version: 1.2.0 Build 709)  -->
+  <g>
+    <g id="Layer_1">
+      <g class="cls-3">
+        <g>
+          <path class="cls-2" d="M.6,12.8h2.2c.3,0,.6.2.6.6v5.6c0,.3-.2.6-.6.6H.6c-.3,0-.6-.2-.6-.6v-5.6c0-.3.2-.6.6-.6Z"/>
+          <path class="cls-2" d="M6.1,8.3h2.2c.3,0,.6.2.6.6v10c0,.3-.2.6-.6.6h-2.2c-.3,0-.6-.2-.6-.6v-10c0-.3.2-.6.6-.6Z"/>
+          <path class="cls-2" d="M11.7,10.6h2.2c.3,0,.6.2.6.6v7.8c0,.3-.2.6-.6.6h-2.2c-.3,0-.6-.2-.6-.6v-7.8c0-.3.2-.6.6-.6Z"/>
+          <path class="cls-2" d="M17.2,7.2h2.2c.3,0,.6.2.6.6v11.1c0,.3-.2.6-.6.6h-2.2c-.3,0-.6-.2-.6-.6V7.8c0-.3.2-.6.6-.6Z"/>
+          <path class="cls-2" d="M18.3.6c-.9,0-1.7.7-1.7,1.7,0,.2,0,.4,0,.5l-2.8,1.7c-.4-.4-.9-.6-1.4-.5-.5,0-1,.4-1.2.9l-2.5-1.2c0,0,0-.1,0-.2,0-.7-.4-1.3-1-1.5-.6-.3-1.3-.1-1.8.4-.5.5-.6,1.2-.4,1.8l-3.2,2.4c-.3-.2-.5-.2-.8-.2-.9,0-1.7.7-1.7,1.7s.7,1.7,1.7,1.7,1.7-.7,1.7-1.7c0-.2,0-.4-.1-.6l3.2-2.4c.6.4,1.4.2,1.9-.3l2.8,1.4c.2.8,1,1.4,1.8,1.3.8,0,1.5-.8,1.5-1.7,0,0,0,0,0-.1l3-1.8c.3.2.6.3.9.3.9,0,1.7-.7,1.7-1.7s-.7-1.7-1.7-1.7Z"/>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/horilla_theme/static/horilla_theme/assets/icons/data.svg b/horilla_theme/static/horilla_theme/assets/icons/data.svg
new file mode 100644
index 000000000..cd90be9c0
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/icons/data.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 60 60">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #e54f38;
+      }
+    </style>
+  </defs>
+  <!-- Generator: Adobe Illustrator 28.6.0, SVG Export Plug-In . SVG Version: 1.2.0 Build 709)  -->
+  <g>
+    <g id="Layer_1">
+      <g>
+        <path class="cls-1" d="M58.8,31.6c-.2,1.1-.3,2.3-.5,3.4-.8,4.6-2.7,8.8-5.6,12.5-.7.9-1.8,1-2.7.2-1.5-1.5-3.1-3.1-4.6-4.6-.8-.8-.9-1.6-.2-2.5,1.7-2.5,2.9-5.2,3.2-8.2.8-7.8-2.1-13.9-8.6-18.3-2-1.4-4.3-2.2-6.7-2.6-1.1-.2-1.6-.8-1.6-1.9,0-2,0-4.1,0-6.1,0-1,.3-1.8,1.2-2.2.3,0,.7,0,1,0,0,0,.2,0,.2.1,7,1,12.8,4.2,17.5,9.5,3.6,4.1,5.9,8.8,6.8,14.2.2,1.1.3,2.1.4,3.2v3.4Z"/>
+        <path class="cls-1" d="M27,1.2c.9.4,1.3,1.2,1.2,2.2,0,2,0,4,0,6,0,1.2-.5,1.8-1.7,2-7.9,1.7-12.9,6.5-15,14.4,0,.3-.1.6-.2.9-.2.9-.8,1.4-1.7,1.4-2.3,0-4.5,0-6.8,0-1.1,0-1.8-.9-1.7-2C2.7,14.3,11.5,4.5,23.3,1.7c.9-.2,1.8-.4,2.7-.6.3,0,.7,0,1,0Z"/>
+        <path class="cls-1" d="M6.3,31.6c1.1,0,2.2,0,3.3,0,1.1,0,1.7.5,1.9,1.6,1.4,6.8,5.2,11.7,11.7,14.2,6,2.4,11.8,1.6,17.3-1.9,1.3-.8,1.9-.8,2.9.3,1.4,1.4,2.9,2.9,4.3,4.3,1,1,1,2.1-.2,2.9-5.5,4.2-11.8,6.1-18.7,5.9-13.3-.5-24.7-10.4-27.2-23.4-.1-.6-.2-1.2-.3-1.8-.2-1.1.6-2,1.7-2,1.1,0,2.3,0,3.4,0Z"/>
+        <path class="cls-1" d="M32.6,39.7h-5.6c0-.2,0-.4,0-.6,0-6.3,0-12.5,0-18.8,0-1.3.6-2,2-2,.7,0,1.3,0,2,0,.9,0,1.6.7,1.6,1.7,0,6.5,0,13,0,19.5,0,0,0,.1,0,.2Z"/>
+        <path class="cls-1" d="M36.1,39.7v-16.8c.1,0,.2,0,.4,0,1.2,0,2.3,0,3.5,0,1,0,1.7.7,1.7,1.7,0,4.5,0,9,0,13.4,0,.9-.7,1.7-1.6,1.7-1.3,0-2.6,0-4,0Z"/>
+        <path class="cls-1" d="M23.7,39.7c-1.4,0-2.7,0-4,0-.9,0-1.6-.7-1.6-1.6,0-3,0-6.1,0-9.1,0-.9.7-1.6,1.5-1.6,1.3,0,2.7,0,4.1,0v12.4Z"/>
+      </g>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/horilla_theme/static/horilla_theme/assets/icons/dislike.svg b/horilla_theme/static/horilla_theme/assets/icons/dislike.svg
new file mode 100644
index 000000000..2f9d4df9b
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/icons/dislike.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 60 60">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #f8595f;
+      }
+    </style>
+  </defs>
+  <!-- Generator: Adobe Illustrator 28.6.0, SVG Export Plug-In . SVG Version: 1.2.0 Build 709)  -->
+  <g>
+    <g id="Layer_1">
+      <g>
+        <path class="cls-1" d="M59.6,31.2v-2.1c0-.2-.1-.5-.2-.7-.9-5.3-1.8-10.6-2.7-15.9-.8-4.7-4.8-8.2-9.6-8.3-5.3,0-10.5,0-15.8.9-4.1.7-8.1,1.7-11.9,3.4-.3.1-.5.3-.5.7,0,9.9,0,19.7,0,29.6,0,.4.1.5.4.7,1.1.8,2.2,1.7,3.3,2.6,1.6,1.4,3,2.9,4.1,4.8,1.1,1.8,1.6,3.7,1.6,5.8,0,1.7,0,3.4.6,5,.5,1.4,1.4,2,2.9,2.1,1.7,0,3.2-.6,4.5-1.6,2.6-1.9,3.6-4.6,3.7-7.7,0-3.5-.4-6.8-1.7-10.1,0,0,0-.2,0-.3.3,0,.5,0,.7,0,3.8,0,7.5,0,11.3,0,4.4,0,8.3-3.4,9.2-7.7,0-.4.2-.7.2-1.1Z"/>
+        <path class="cls-1" d="M15.2,23.4c0-4.6,0-9.2,0-13.9,0-2.8-1.8-4.6-4.6-4.6-1.8,0-3.7,0-5.5,0-2.8,0-4.6,1.8-4.6,4.6,0,9.2,0,18.5,0,27.7,0,2.8,1.8,4.6,4.6,4.6,1.8,0,3.7,0,5.5,0,2.8,0,4.6-1.8,4.6-4.6,0-4.6,0-9.2,0-13.9Z"/>
+      </g>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/horilla_theme/static/horilla_theme/assets/icons/dots.svg b/horilla_theme/static/horilla_theme/assets/icons/dots.svg
new file mode 100644
index 000000000..36fcf99b8
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/icons/dots.svg
@@ -0,0 +1,3 @@
+<svg width="4" height="18" viewBox="0 0 4 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.2087 0C1.36936 0 0.682617 0.675 0.682617 1.5C0.682617 2.325 1.36936 3 2.2087 3C3.04805 3 3.73479 2.325 3.73479 1.5C3.73479 0.675 3.04805 0 2.2087 0ZM2.2087 15C1.36936 15 0.682617 15.675 0.682617 16.5C0.682617 17.325 1.36936 18 2.2087 18C3.04805 18 3.73479 17.325 3.73479 16.5C3.73479 15.675 3.04805 15 2.2087 15ZM2.2087 7.5C1.36936 7.5 0.682617 8.175 0.682617 9C0.682617 9.825 1.36936 10.5 2.2087 10.5C3.04805 10.5 3.73479 9.825 3.73479 9C3.73479 8.175 3.04805 7.5 2.2087 7.5Z" fill="black"/>
+</svg>
diff --git a/horilla_theme/static/horilla_theme/assets/icons/down.svg b/horilla_theme/static/horilla_theme/assets/icons/down.svg
new file mode 100644
index 000000000..db055542e
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/icons/down.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 60 60">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #191919;
+      }
+    </style>
+  </defs>
+  <!-- Generator: Adobe Illustrator 28.6.0, SVG Export Plug-In . SVG Version: 1.2.0 Build 709)  -->
+  <g>
+    <g id="Layer_1">
+      <path class="cls-1" d="M3.3,31.6c0-1,0-2.1,0-3.1,0-.1,0-.3,0-.4.3-3.7,1.2-7.3,3.1-10.5C11.4,8.7,18.9,4,28.9,3.4c4.8-.3,9.4.7,13.6,3.1,8.8,4.9,13.6,12.4,14.2,22.4.3,4.8-.8,9.4-3.1,13.6-4.1,7.5-10.5,12.1-18.9,13.8-1,.2-2.1.3-3.1.4h-3.1c-.1,0-.3,0-.4,0-3.3-.2-6.4-1-9.4-2.4-8.2-4-13.2-10.5-15-19.5-.2-1-.3-2.1-.4-3.1ZM15.1,26.6c5,5,9.9,10,14.9,15,5-5,9.9-10,14.9-15-.7-.7-1.6-1.5-2.5-2.4-4.1,4.2-8.3,8.3-12.5,12.6-4.2-4.2-8.3-8.4-12.5-12.6-.8.8-1.6,1.6-2.4,2.4Z"/>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/horilla_theme/static/horilla_theme/assets/icons/downarrow.svg b/horilla_theme/static/horilla_theme/assets/icons/downarrow.svg
new file mode 100644
index 000000000..604ea6aa3
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/icons/downarrow.svg
@@ -0,0 +1,3 @@
+<svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.99996 5.99977L0.756958 1.75677L2.17196 0.342773L4.99996 3.17177L7.82796 0.342773L9.24296 1.75677L4.99996 5.99977Z" fill="black"/>
+</svg>
diff --git a/horilla_theme/static/horilla_theme/assets/icons/download.svg b/horilla_theme/static/horilla_theme/assets/icons/download.svg
new file mode 100644
index 000000000..0fc812b4a
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/icons/download.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 60 60">
+  <!-- Generator: Adobe Illustrator 28.6.0, SVG Export Plug-In . SVG Version: 1.2.0 Build 709)  -->
+  <g>
+    <g id="Layer_1">
+      <path d="M30.6,60c-6,0-11.4-.6-16.6-2.3-5.5-1.7-9.5-5.2-11.4-10.7-.4-1.3-.9-2.6-1.2-3.9C-.2,36-.4,28.9.6,21.7c.4-3.1,1.1-6.1,2.2-9.1,1.8-5.1,5.4-8.3,10.4-10.1,3.8-1.3,7.7-2,11.7-2.4,5.9-.5,11.8-.2,17.5,1.1,1.7.4,3.3.9,4.9,1.5,5.1,1.8,8.3,5.4,10.1,10.4,1.3,3.8,2,7.6,2.3,11.6.5,6.2.2,12.3-1.2,18.3-.4,1.6-.9,3.1-1.5,4.6-1.9,5.1-5.6,8.2-10.6,9.9-3.8,1.3-7.8,1.9-11.8,2.2-1.6.1-3.1.2-4.1.2ZM27,28.7c-1.4-1.4-2.6-2.6-3.9-3.8-1.2-1.2-3-1.2-4.2,0-1.2,1.2-1.2,3,0,4.2,3,3.1,6,6.1,9.1,9.1,1.2,1.2,2.9,1.2,4.1,0,3.1-3,6.1-6,9.1-9.1,1.2-1.2,1.1-3.1,0-4.2-1.2-1.2-3-1.2-4.2,0-1.1,1.1-2.2,2.2-3.3,3.3-.2.2-.3.3-.6.6,0-.4,0-.6,0-.9,0-4.2,0-8.4,0-12.6,0-1.5-.8-2.6-2-3-2-.6-3.9.8-3.9,2.9,0,4.2,0,8.5,0,12.7,0,.2,0,.5,0,.9ZM30,48c1.9,0,3.9,0,5.8,0,1.8,0,3.1-1.3,3.2-3,0-1.7-1.3-3-3.1-3-3.9,0-7.9,0-11.8,0-1.8,0-3.1,1.3-3.1,3,0,1.7,1.4,3,3.2,3,1.9,0,3.9,0,5.8,0Z"/>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/horilla_theme/static/horilla_theme/assets/icons/drive.svg b/horilla_theme/static/horilla_theme/assets/icons/drive.svg
new file mode 100644
index 000000000..fab36313b
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/icons/drive.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.3109 2C14.6341 2 14.9525 2.07832 15.2388 2.22827C15.5251 2.37822 15.7708 2.59533 15.9549 2.861L16.0429 3L21.8159 13C21.9763 13.2779 22.0675 13.5904 22.0818 13.911C22.0961 14.2316 22.033 14.5509 21.8979 14.842L21.8159 15L19.5059 19C19.3443 19.2798 19.1174 19.5162 18.8445 19.6892C18.5716 19.8621 18.2609 19.9664 17.9389 19.993L17.7749 20H6.22788C5.90451 20.0002 5.58591 19.9219 5.29941 19.772C5.01291 19.622 4.76704 19.4048 4.58288 19.139L4.49588 19L2.18588 15C2.02543 14.7221 1.93422 14.4096 1.91995 14.089C1.90568 13.7684 1.96876 13.4491 2.10388 13.158L2.18588 13L7.96088 3C8.12254 2.72009 8.34964 2.48354 8.62272 2.3106C8.8958 2.13766 9.20673 2.03349 9.52888 2.007L9.69188 2H14.3109ZM19.5069 15H9.11388L7.38188 18H17.7749L19.5069 15ZM9.11488 5L3.91788 14L5.64988 17L10.8459 8L9.11488 5ZM14.3109 4H10.8469L16.0429 13H19.5069L14.3109 4ZM12.0009 10L10.2689 13H13.7329L12.0009 10Z" fill="black" fill-opacity="0.878431"/>
+</svg>
diff --git a/horilla_theme/static/horilla_theme/assets/icons/edit.svg b/horilla_theme/static/horilla_theme/assets/icons/edit.svg
new file mode 100644
index 000000000..46fbbed87
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/icons/edit.svg
@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.9 3.85808L14.142 8.10108L4.242 18.0001H0V13.7571L9.9 3.85808ZM11.314 2.44408L13.435 0.322083C13.6225 0.134612 13.8768 0.0292969 14.142 0.0292969C14.4072 0.0292969 14.6615 0.134612 14.849 0.322083L17.678 3.15108C17.8655 3.33861 17.9708 3.59292 17.9708 3.85808C17.9708 4.12325 17.8655 4.37756 17.678 4.56508L15.556 6.68608L11.314 2.44408Z" fill="black" fill-opacity="0.878431"/>
+</svg>
diff --git a/horilla_theme/static/horilla_theme/assets/icons/email.svg b/horilla_theme/static/horilla_theme/assets/icons/email.svg
new file mode 100644
index 000000000..338fb7310
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/icons/email.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 20C3.45 20 2.97917 19.8042 2.5875 19.4125C2.19583 19.0208 2 18.55 2 18V6C2 5.45 2.19583 4.97917 2.5875 4.5875C2.97917 4.19583 3.45 4 4 4H20C20.55 4 21.0208 4.19583 21.4125 4.5875C21.8042 4.97917 22 5.45 22 6V18C22 18.55 21.8042 19.0208 21.4125 19.4125C21.0208 19.8042 20.55 20 20 20H4ZM12 13L4 8V18H20V8L12 13ZM12 11L20 6H4L12 11ZM4 8V6V18V8Z" fill="#49454F"/>
+</svg>
diff --git a/horilla_theme/static/horilla_theme/assets/icons/events.svg b/horilla_theme/static/horilla_theme/assets/icons/events.svg
new file mode 100644
index 000000000..6cf5e0258
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/icons/events.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.5 18C13.8 18 13.2083 17.7583 12.725 17.275C12.2417 16.7917 12 16.2 12 15.5C12 14.8 12.2417 14.2083 12.725 13.725C13.2083 13.2417 13.8 13 14.5 13C15.2 13 15.7917 13.2417 16.275 13.725C16.7583 14.2083 17 14.8 17 15.5C17 16.2 16.7583 16.7917 16.275 17.275C15.7917 17.7583 15.2 18 14.5 18ZM5 22C4.45 22 3.97933 21.8043 3.588 21.413C3.19667 21.0217 3.00067 20.5507 3 20V6C3 5.45 3.196 4.97933 3.588 4.588C3.98 4.19667 4.45067 4.00067 5 4H6V2H8V4H16V2H18V4H19C19.55 4 20.021 4.196 20.413 4.588C20.805 4.98 21.0007 5.45067 21 6V20C21 20.55 20.8043 21.021 20.413 21.413C20.0217 21.805 19.5507 22.0007 19 22H5ZM5 20H19V10H5V20ZM5 8H19V6H5V8Z" fill="#1E1E1E"/>
+</svg>
diff --git a/horilla_theme/static/horilla_theme/assets/icons/events1.svg b/horilla_theme/static/horilla_theme/assets/icons/events1.svg
new file mode 100644
index 000000000..c14de39e9
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/icons/events1.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 60 60">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #fec007;
+      }
+    </style>
+  </defs>
+  <!-- Generator: Adobe Illustrator 28.6.0, SVG Export Plug-In . SVG Version: 1.2.0 Build 709)  -->
+  <g>
+    <g id="Layer_1">
+      <path class="cls-1" d="M1.1,23.5c.2-.3.3-.6.5-.9.6-1.1,1.7-1.4,2.9-1.5,5.2-.5,10.4-.9,15.6-1.4.5,0,.7-.2.9-.6,2.1-4.9,4.2-9.8,6.2-14.6.6-1.3,1.5-2.1,3-2.1,1.4,0,2.4.8,2.9,2.1,2.1,4.8,4.1,9.7,6.2,14.5.2.5.5.7,1.1.8,5.3.5,10.6,1,16,1.4,1.3.1,2.2.9,2.6,2.2.4,1.2,0,2.4-.9,3.2-3.4,3-6.8,5.9-10.1,8.9-.7.6-1.4,1.2-2.1,1.9-.2.2-.3.4-.2.7,1.2,5.2,2.4,10.5,3.6,15.7.3,1.4,0,2.7-1.1,3.4-1.2.8-2.4.8-3.6,0-4.6-2.7-9.1-5.5-13.7-8.2-.4-.2-.6-.2-1,0-4.6,2.7-9.1,5.4-13.7,8.2-2.1,1.3-4.2.1-4.7-1.7-.2-.6-.1-1.2,0-1.7,1.2-5.2,2.4-10.4,3.6-15.6.1-.5,0-.8-.4-1.1-4-3.5-7.9-7-11.9-10.4-.6-.5-1-1.2-1.3-1.9v-1.2Z"/>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/horilla_theme/static/horilla_theme/assets/icons/eye.svg b/horilla_theme/static/horilla_theme/assets/icons/eye.svg
new file mode 100644
index 000000000..b3d0d7f4e
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/icons/eye.svg
@@ -0,0 +1,4 @@
+<svg width="21" height="13" viewBox="0 0 21 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.5 7.54004C5.1 -0.459961 15.9 -0.459961 19.5 7.54004" stroke="black" stroke-opacity="0.878431" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10.5 11.54C10.106 11.54 9.71593 11.4624 9.35195 11.3117C8.98797 11.1609 8.65726 10.9399 8.37868 10.6614C8.1001 10.3828 7.87913 10.0521 7.72836 9.68809C7.5776 9.32411 7.5 8.934 7.5 8.54004C7.5 8.14607 7.5776 7.75597 7.72836 7.39199C7.87913 7.02801 8.1001 6.69729 8.37868 6.41872C8.65726 6.14014 8.98797 5.91916 9.35195 5.7684C9.71593 5.61764 10.106 5.54004 10.5 5.54004C11.2956 5.54004 12.0587 5.85611 12.6213 6.41872C13.1839 6.98133 13.5 7.74439 13.5 8.54004C13.5 9.33569 13.1839 10.0988 12.6213 10.6614C12.0587 11.224 11.2956 11.54 10.5 11.54Z" stroke="black" stroke-opacity="0.878431" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/horilla_theme/static/horilla_theme/assets/icons/eye1.svg b/horilla_theme/static/horilla_theme/assets/icons/eye1.svg
new file mode 100644
index 000000000..c440b78e9
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/icons/eye1.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 60 60">
+  <!-- Generator: Adobe Illustrator 28.6.0, SVG Export Plug-In . SVG Version: 1.2.0 Build 709)  -->
+  <g>
+    <g id="Layer_1">
+      <g>
+        <path d="M59.4,30.5c-.6.9-1.2,1.8-1.8,2.7-3.7,4.5-8,8.2-13.2,10.9-3.6,1.8-7.3,3-11.3,3.3-7.7.7-14.7-1.3-21.2-5.6-4.2-2.8-7.6-6.3-10.7-10.2-.7-1-.7-2,0-3,3.5-4.6,7.6-8.5,12.6-11.4,4.1-2.4,8.5-4,13.3-4.4,7-.7,13.4,1,19.4,4.5,4.9,2.9,9,6.8,12.4,11.4.2.3.4.7.5,1v.9ZM30.1,42.3c6.9-.1,12.3-5.7,12.2-12.7,0-6.6-5.8-12.1-12.4-12-7,.1-12.3,5.6-12.3,12.7,0,6.6,5.8,12.1,12.5,12Z"/>
+        <path d="M36.7,30c0,3.7-3.1,6.7-6.8,6.6-3.6,0-6.5-3-6.5-6.7,0-3.7,3.1-6.6,6.8-6.6,3.6,0,6.5,3.1,6.5,6.7Z"/>
+      </g>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/horilla_theme/static/horilla_theme/assets/icons/filter.svg b/horilla_theme/static/horilla_theme/assets/icons/filter.svg
new file mode 100644
index 000000000..e022c618a
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/icons/filter.svg
@@ -0,0 +1,4 @@
+<svg width="15" height="16" viewBox="0 0 15 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 8C0 3.85775 3.35775 0.5 7.5 0.5C11.6423 0.5 15 3.85775 15 8C15 12.1423 11.6423 15.5 7.5 15.5C3.35775 15.5 0 12.1423 0 8ZM7.5 2C5.9087 2 4.38258 2.63214 3.25736 3.75736C2.13214 4.88258 1.5 6.4087 1.5 8C1.5 9.5913 2.13214 11.1174 3.25736 12.2426C4.38258 13.3679 5.9087 14 7.5 14C9.0913 14 10.6174 13.3679 11.7426 12.2426C12.8679 11.1174 13.5 9.5913 13.5 8C13.5 6.4087 12.8679 4.88258 11.7426 3.75736C10.6174 2.63214 9.0913 2 7.5 2Z" fill="#34C759"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.25 4.25146C8.25 4.05255 8.17098 3.86179 8.03033 3.72113C7.88968 3.58048 7.69891 3.50146 7.5 3.50146C7.30109 3.50146 7.11032 3.58048 6.96967 3.72113C6.82902 3.86179 6.75 4.05255 6.75 4.25146V7.25146H3.75C3.55109 7.25146 3.36032 7.33048 3.21967 7.47113C3.07902 7.61179 3 7.80255 3 8.00146C3 8.20038 3.07902 8.39114 3.21967 8.53179C3.36032 8.67245 3.55109 8.75146 3.75 8.75146H6.75V11.7515C6.75 11.9504 6.82902 12.1411 6.96967 12.2818C7.11032 12.4224 7.30109 12.5015 7.5 12.5015C7.69891 12.5015 7.88968 12.4224 8.03033 12.2818C8.17098 12.1411 8.25 11.9504 8.25 11.7515V8.75146H11.25C11.4489 8.75146 11.6397 8.67245 11.7803 8.53179C11.921 8.39114 12 8.20038 12 8.00146C12 7.80255 11.921 7.61179 11.7803 7.47113C11.6397 7.33048 11.4489 7.25146 11.25 7.25146H8.25V4.25146Z" fill="#34C759"/>
+</svg>
diff --git a/horilla_theme/static/horilla_theme/assets/icons/filter1.svg b/horilla_theme/static/horilla_theme/assets/icons/filter1.svg
new file mode 100644
index 000000000..533f5073d
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/icons/filter1.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 60 60">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #fff;
+      }
+    </style>
+  </defs>
+  <!-- Generator: Adobe Illustrator 28.6.0, SVG Export Plug-In . SVG Version: 1.2.0 Build 709)  -->
+  <g>
+    <g id="Layer_1">
+      <path class="cls-1" d="M30,.5c7.2,0,14.4,0,21.6,0,2.9,0,5.1,1.4,6.4,4,1.3,2.7,1.1,5.4-.8,7.7-2.2,2.7-4.5,5.4-6.8,8-3.4,4-6.9,8-10.3,12-.8.9-1.1,1.9-1.1,3.1,0,4.8,0,9.6,0,14.5,0,2.8-1.2,4.8-3.7,6-2,1-4,2-5.9,3-4.2,2-8.5-.6-8.5-5.3,0-5.9,0-11.9,0-17.8,0-1.5-.4-2.6-1.4-3.7-5.5-6.4-11.1-12.9-16.6-19.4C-.7,8.4,1.4,2,6.8.7c.7-.2,1.5-.2,2.2-.2,7,0,14,0,21,0,0,0,0,0,0,0ZM30,5.5c-7,0-14.1,0-21.1,0-1.1,0-2.1.3-2.6,1.4-.5,1.1,0,2,.6,2.8,5.4,6.3,10.8,12.7,16.3,19,1.8,2.1,2.7,4.5,2.7,7.3,0,5.8,0,11.6,0,17.4,0,1.2.5,1.5,1.6,1,1.9-1,3.8-1.9,5.7-2.9.7-.3,1-.8.9-1.6,0-4.8,0-9.6,0-14.4,0-2.4.7-4.6,2.3-6.4,3.8-4.4,7.5-8.8,11.3-13.2,1.8-2.1,3.6-4.2,5.4-6.3.7-.8,1-1.7.5-2.8-.5-1-1.4-1.4-2.5-1.4-.2,0-.4,0-.5,0-6.9,0-13.8,0-20.6,0Z"/>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/horilla_theme/static/horilla_theme/assets/icons/forecast.svg b/horilla_theme/static/horilla_theme/assets/icons/forecast.svg
new file mode 100644
index 000000000..657e215bd
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/icons/forecast.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 60 60">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #787878;
+      }
+    </style>
+  </defs>
+  <!-- Generator: Adobe Illustrator 28.6.0, SVG Export Plug-In . SVG Version: 1.2.0 Build 709)  -->
+  <g>
+    <g id="Layer_1">
+      <g>
+        <path class="cls-1" d="M21.8,30c0-8.7,0-17.4,0-26.1,0-1.8.7-2.5,2.5-2.5,3.8,0,7.7,0,11.5,0,1.6,0,2.4.8,2.4,2.4,0,17.5,0,35,0,52.4,0,1.6-.8,2.4-2.4,2.4-3.9,0-7.7,0-11.6,0-1.6,0-2.3-.8-2.3-2.4,0-8.7,0-17.5,0-26.2Z"/>
+        <path class="cls-1" d="M42.3,38.2c0-6,0-12,0-18,0-1.7.7-2.4,2.5-2.4,3.9,0,7.7,0,11.6,0,1.5,0,2.3.8,2.3,2.3,0,12.1,0,24.2,0,36.3,0,1.5-.8,2.3-2.3,2.3-3.9,0-7.8,0-11.8,0-1.5,0-2.3-.8-2.3-2.3,0-6,0-12.1,0-18.1Z"/>
+        <path class="cls-1" d="M17.7,46.4c0,3.3,0,6.6,0,9.9,0,1.6-.8,2.4-2.4,2.4-3.9,0-7.7,0-11.6,0-1.6,0-2.4-.8-2.4-2.3,0-6.6,0-13.2,0-19.9,0-1.5.8-2.3,2.3-2.3,3.9,0,7.8,0,11.7,0,1.5,0,2.3.8,2.3,2.3,0,3.3,0,6.6,0,10Z"/>
+      </g>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/horilla_theme/static/horilla_theme/assets/icons/general.svg b/horilla_theme/static/horilla_theme/assets/icons/general.svg
new file mode 100644
index 000000000..d1581f7bc
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/icons/general.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 60 60">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #e54f38;
+      }
+    </style>
+  </defs>
+  <!-- Generator: Adobe Illustrator 28.6.0, SVG Export Plug-In . SVG Version: 1.2.0 Build 709)  -->
+  <g>
+    <g id="Layer_1">
+      <g>
+        <path class="cls-1" d="M0,40.4c.1-.7.2-1.3.4-2,.2-1.2,1-1.9,2.2-2.1,3-.5,4.9-2.8,4.6-5.8,0-.4-.2-.8-.3-1.1-.3-1,0-2,.8-2.6,1.6-1.4,3.4-2.4,5.4-3.2,1-.4,1.9-.1,2.6.8,1.6,1.8,4,2.3,6.1,1.2.5-.3,1-.8,1.5-1.2.9-.9,1.7-1.1,2.9-.7,1.9.8,3.7,1.9,5.3,3.2.9.8,1.2,1.7.9,2.9-.9,3,.9,6,4,6.6,1.4.3,2,.9,2.3,2.3.4,2,.4,3.9,0,5.9-.3,1.3-.9,1.9-2.2,2.2-2.9.6-4.6,2.8-4.4,5.7,0,.4.1.8.3,1.2.3,1.1,0,2-.7,2.7-1.5,1.4-3.3,2.5-5.2,3.3-1,.5-2,.2-2.8-.8-1.2-1.4-2.7-2.1-4.5-1.8-1.3.2-2.3.8-3.1,1.8-.4.6-.9,1-1.6,1.2h-.9c-2.1-.9-4-1.9-5.7-3.4-1.1-1-1.4-1.8-.9-3.2.4-1.2.4-2.5-.1-3.7-.8-1.7-2.1-2.8-4-3.1-1.5-.3-2.2-.9-2.5-2.4,0-.4-.1-.7-.2-1.1,0-.9,0-1.8,0-2.7ZM19.4,35.2c-3.5,0-6.5,2.9-6.5,6.4,0,3.5,2.9,6.5,6.4,6.5,3.6,0,6.6-2.8,6.6-6.4,0-3.6-2.9-6.5-6.5-6.6Z"/>
+        <path class="cls-1" d="M60,15.7c0,.5-.2.9-.2,1.4-.2,1-.8,1.6-1.8,1.8-2.7.5-4.2,2.9-3.4,5.5.3.9,0,1.6-.6,2.2-1.2,1.1-2.6,1.9-4.1,2.6-.8.4-1.6.2-2.2-.5-1.9-2.2-4.6-2.2-6.4,0-.6.8-1.3,1-2.2.6-1.6-.7-3.1-1.6-4.4-2.7-.7-.6-.9-1.4-.6-2.3.9-2.6-.5-5.1-3.3-5.6-1.2-.2-1.7-.7-1.9-1.9-.3-1.6-.2-3.1.1-4.7.2-1,.8-1.6,1.8-1.7,2.8-.4,4.3-3.1,3.5-5.5-.3-.8,0-1.6.6-2.2,1.3-1.1,2.7-1.9,4.3-2.5.8-.3,1.5-.2,2.1.5,1.5,2,4.7,2.1,6.3,0,.5-.7,1.3-.9,2.1-.5,1.6.6,3.1,1.5,4.4,2.7.8.6,1,1.4.7,2.4-.7,2.3.7,4.6,3,5.2,1.6.4,2,.8,2.2,2.5,0,.2,0,.5.1.7v2.1ZM44.4,19.9c2.9,0,5.2-2.3,5.2-5.2,0-2.9-2.4-5.3-5.3-5.3-2.8,0-5.2,2.4-5.2,5.2,0,2.9,2.3,5.2,5.2,5.2Z"/>
+        <path class="cls-1" d="M60,45c-.6,1-1.1,1.9-1.8,2.9-.4.6-1,.7-1.7.4-1.7-.6-3.2.2-3.7,1.9-.2.6-.6,1-1.2,1-1,0-2.1,0-3.1,0-.6,0-.9-.4-1-1-.4-2.1-1.6-2.8-3.7-2.2-.6.2-1.1,0-1.4-.5-.5-1-1.1-2-1.5-3-.2-.5,0-1.1.4-1.5,1.5-1.3,1.5-3,0-4.4-.6-.5-.7-1-.4-1.7.5-.9,1.1-1.7,1.6-2.5.4-.6,1-.6,1.6-.4,1.8.7,3.3,0,3.9-1.9.2-.6.6-1,1.3-1,.9,0,1.9,0,2.8,0,.9,0,1.2.4,1.3,1.2.3,1.6,1.7,2.5,3.2,2,1-.3,1.3-.2,1.8.7.5.9,1,1.9,1.4,2.8v.8c-.2.2-.4.5-.6.7-1.1,1.1-1.1,2.8,0,3.9.2.3.4.5.7.8v.7ZM53.9,41.3c0-1.9-1.5-3.4-3.4-3.4-1.9,0-3.4,1.5-3.4,3.4,0,1.9,1.5,3.4,3.4,3.4,1.9,0,3.4-1.5,3.4-3.4Z"/>
+      </g>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/horilla_theme/static/horilla_theme/assets/icons/home.svg b/horilla_theme/static/horilla_theme/assets/icons/home.svg
new file mode 100644
index 000000000..e5dc12df2
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/icons/home.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 20 20">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #191919;
+      }
+    </style>
+  </defs>
+  <!-- Generator: Adobe Illustrator 28.6.0, SVG Export Plug-In . SVG Version: 1.2.0 Build 709)  -->
+  <g>
+    <g id="Layer_1">
+      <path class="cls-1" d="M10,18.4c-1.8,0-3.6,0-5.5,0-1.4,0-2.6-.9-2.9-2.3,0-.2,0-.5,0-.7,0-2.3,0-4.7,0-7,0-1.1.5-1.9,1.4-2.6,1.8-1.2,3.5-2.4,5.3-3.6,1.1-.8,2.4-.8,3.5,0,1.8,1.2,3.5,2.4,5.3,3.6.9.6,1.4,1.5,1.4,2.6,0,2.3,0,4.7,0,7,0,1.5-1,2.7-2.5,3-.2,0-.4,0-.6,0-1.8,0-3.6,0-5.4,0ZM10,15.4c.7,0,1.3,0,2,0,0,0,.2,0,.3,0,.2,0,.3-.2.3-.4,0-.2,0-.3-.3-.4,0,0-.2,0-.2,0-1.3,0-2.7,0-4,0,0,0-.1,0-.2,0-.2,0-.3.2-.3.4,0,.2.1.4.3.4,0,0,.2,0,.3,0,.7,0,1.3,0,2,0Z"/>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/horilla_theme/static/horilla_theme/assets/icons/img.svg b/horilla_theme/static/horilla_theme/assets/icons/img.svg
new file mode 100644
index 000000000..2f314f46e
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/icons/img.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18 4.25H6C5.27065 4.25 4.57118 4.53973 4.05546 5.05546C3.53973 5.57118 3.25 6.27065 3.25 7V17C3.25 17.7293 3.53973 18.4288 4.05546 18.9445C4.57118 19.4603 5.27065 19.75 6 19.75H18C18.7293 19.75 19.4288 19.4603 19.9445 18.9445C20.4603 18.4288 20.75 17.7293 20.75 17V7C20.75 6.27065 20.4603 5.57118 19.9445 5.05546C19.4288 4.53973 18.7293 4.25 18 4.25ZM6 5.75H18C18.3315 5.75 18.6495 5.8817 18.8839 6.11612C19.1183 6.35054 19.25 6.66848 19.25 7V15.19L16.53 12.47C16.4589 12.394 16.3717 12.3348 16.2748 12.2968C16.178 12.2587 16.0738 12.2427 15.97 12.25C15.8651 12.2567 15.7625 12.2839 15.6681 12.3303C15.5738 12.3766 15.4894 12.4411 15.42 12.52L14.13 14.07L9.53 9.47C9.46222 9.39797 9.37993 9.34111 9.28858 9.30319C9.19723 9.26527 9.09887 9.24714 9 9.25C8.89508 9.25666 8.7925 9.28393 8.69813 9.33026C8.60375 9.37659 8.51944 9.44106 8.45 9.52L4.75 13.93V7C4.75 6.83585 4.78233 6.6733 4.84515 6.52165C4.90797 6.36999 5.00004 6.23219 5.11612 6.11612C5.23219 6.00004 5.36999 5.90797 5.52165 5.84515C5.6733 5.78233 5.83585 5.75 6 5.75ZM4.75 17V16.27L9.05 11.11L13.17 15.23L10.65 18.23H6C5.67192 18.23 5.35697 18.1011 5.12311 17.871C4.88926 17.6409 4.75525 17.328 4.75 17ZM18 18.25H12.6L16.05 14.11L19.2 17.26C19.1447 17.538 18.9951 17.7884 18.7764 17.9688C18.5577 18.1492 18.2835 18.2485 18 18.25Z" fill="black" fill-opacity="0.878431"/>
+</svg>
diff --git a/horilla_theme/static/horilla_theme/assets/icons/l1.svg b/horilla_theme/static/horilla_theme/assets/icons/l1.svg
new file mode 100644
index 000000000..38f35b31c
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/icons/l1.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 21 21">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #444;
+      }
+    </style>
+  </defs>
+  <!-- Generator: Adobe Illustrator 28.6.0, SVG Export Plug-In . SVG Version: 1.2.0 Build 709)  -->
+  <g>
+    <g id="Layer_1">
+      <g id="Layer_1-2" data-name="Layer_1">
+        <path class="cls-1" d="M5.4,17.1c-.4,0-.7,0-1.1.3-.9.4-1.6.3-2.2-.5-.6-.7-1-1.5-1.4-2.4-.4-.9-.1-1.6.7-2.1,1.2-.8,1.4-2.5.3-3.5-.1-.1-.3-.2-.4-.3-.7-.5-1-1.2-.6-2,.4-.9.8-1.7,1.4-2.5.5-.7,1.3-.9,2.1-.5,1,.5,2,.3,2.7-.4.4-.4.6-.9.6-1.5,0-.9.5-1.5,1.4-1.6C9.9,0,10.8,0,11.8,0c.9,0,1.4.7,1.4,1.6s.6,1.8,1.5,2c.6.2,1.2,0,1.8-.2.4-.2.9-.3,1.3-.2.3,0,.6.3.8.5.6.8,1.1,1.6,1.5,2.6.3.8,0,1.5-.7,2-1.2.7-1.4,2.2-.6,3.3.2.2.4.4.6.5.8.5,1,1.2.7,2.1-.4.9-.8,1.6-1.4,2.4s-1.3,1-2.2.5c-1.2-.6-2.7,0-3.1,1.2,0,.2-.1.4-.1.6,0,.9-.5,1.5-1.5,1.7-1,.1-1.9.1-2.9,0-.9-.1-1.4-.7-1.4-1.6s-1-2.1-2.2-2.2v.2ZM13.6,10.6c0-1.7-1.3-3.1-3-3.2-1.7,0-3.1,1.3-3.2,3,0,1.7,1.3,3.1,3,3.2,1.7,0,3.1-1.3,3.2-3Z"/>
+      </g>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/horilla_theme/static/horilla_theme/assets/icons/l2.svg b/horilla_theme/static/horilla_theme/assets/icons/l2.svg
new file mode 100644
index 000000000..c190383a3
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/icons/l2.svg
@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 21 21">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #444;
+      }
+
+      .cls-2 {
+        fill: #191919;
+        font-family: MyriadPro-Regular, 'Myriad Pro';
+        font-size: 12px;
+      }
+    </style>
+  </defs>
+  <!-- Generator: Adobe Illustrator 28.6.0, SVG Export Plug-In . SVG Version: 1.2.0 Build 709)  -->
+  <g>
+    <g id="Layer_1">
+      <g>
+        <path class="cls-1" d="M1,10.5c0-2.4,0-4.9,0-7.3,0-.3,0-.5,0-.8.1-.8.6-1.2,1.3-1.3.2,0,.4,0,.6,0,1.4,0,2.8,0,4.2,0,.2,0,.5,0,.7,0,.7.2,1.1.6,1.2,1.3,0,.2,0,.5,0,.7,0,4.9,0,9.9,0,14.8,0,.3,0,.6,0,.9-.1.6-.5,1-1.1,1.1-.2,0-.5,0-.7,0-1.4,0-2.8,0-4.3,0-.2,0-.4,0-.6,0-.8-.2-1.2-.7-1.3-1.5,0-.2,0-.4,0-.6,0-2.4,0-4.9,0-7.3Z"/>
+        <path class="cls-1" d="M20,7.2c0,1.3,0,2.7,0,4,0,.2,0,.5,0,.7-.1.8-.6,1.2-1.4,1.3-.2,0-.5,0-.7,0-1.2,0-2.5,0-3.7,0-.3,0-.6,0-.9,0-.7-.1-1.1-.6-1.2-1.3,0-.2,0-.5,0-.7,0-2.7,0-5.4,0-8.2,0-.2,0-.5,0-.7.1-.7.6-1.2,1.3-1.3.2,0,.4,0,.6,0,1.4,0,2.8,0,4.1,0,.3,0,.6,0,.8.1.7.2,1.1.7,1.1,1.5,0,.9,0,1.8,0,2.7,0,.6,0,1.2,0,1.8Z"/>
+      </g>
+      <text class="cls-2" transform="translate(-287.2 -781.1)"><tspan x="0" y="0">&lt;div class=&quot;flex items-center gap-5&quot;&gt;</tspan><tspan x="0" y="14.4" xml:space="preserve">                  &lt;div class=&quot;flex items-center&quot;&gt;</tspan><tspan x="0" y="28.8" xml:space="preserve">                    &lt;button&gt;</tspan><tspan x="0" y="43.2" xml:space="preserve">                      &lt;img src=&quot;/assets/icons/l5.svg&quot; alt=&quot;&quot; width=&quot;18&quot; /&gt;</tspan><tspan x="0" y="57.6" xml:space="preserve">                    &lt;/button&gt;</tspan><tspan x="0" y="72" xml:space="preserve">                  &lt;/div&gt;</tspan><tspan x="0" y="100.8" xml:space="preserve">                  &lt;div class=&quot;flex items-center&quot;&gt;</tspan><tspan x="0" y="115.2" xml:space="preserve">                    &lt;button class=&quot;filtermenu&quot;&gt;</tspan><tspan x="0" y="129.6" xml:space="preserve">                      &lt;img src=&quot;/assets/icons/l4.svg&quot; alt=&quot;&quot; width=&quot;18&quot; /&gt;</tspan><tspan x="0" y="144" xml:space="preserve">                    &lt;/button&gt;</tspan><tspan x="0" y="158.4" xml:space="preserve">                  &lt;/div&gt;</tspan><tspan x="0" y="172.8" xml:space="preserve">                  &lt;div class=&quot;flex items-center&quot;&gt;</tspan><tspan x="0" y="187.2" xml:space="preserve">                    &lt;button class=&quot;filtermenu&quot; id=&quot;tableBtn&quot;&gt;</tspan><tspan x="0" y="201.6" xml:space="preserve">                      &lt;img src=&quot;/assets/icons/l3.svg&quot; alt=&quot;&quot; width=&quot;18&quot; /&gt;</tspan><tspan x="0" y="216" xml:space="preserve">                    &lt;/button&gt;</tspan><tspan x="0" y="230.4" xml:space="preserve">                  &lt;/div&gt;</tspan><tspan x="0" y="244.8" xml:space="preserve">                  &lt;div class=&quot;flex items-center&quot;&gt;</tspan><tspan x="0" y="259.2" xml:space="preserve">                    &lt;button class=&quot;filtermenu&quot; id=&quot;kanbanBtn&quot;&gt;</tspan><tspan x="0" y="273.6" xml:space="preserve">                      &lt;img src=&quot;/assets/icons/l2.svg&quot; alt=&quot;&quot; width=&quot;18&quot; /&gt;</tspan><tspan x="0" y="288" xml:space="preserve">                    &lt;/button&gt;</tspan><tspan x="0" y="302.4" xml:space="preserve">                  &lt;/div&gt;            </tspan><tspan x="0" y="316.8" xml:space="preserve">                  &lt;div class=&quot;flex items-center&quot;&gt;</tspan><tspan x="0" y="331.2" xml:space="preserve">                    &lt;button</tspan><tspan x="0" y="345.6" xml:space="preserve">                      id=&quot;dropdownDefaultButton&quot;</tspan><tspan x="0" y="360" xml:space="preserve">                      data-dropdown-toggle=&quot;dropdown&quot;</tspan><tspan x="0" y="374.4" xml:space="preserve">                      type=&quot;button&quot;</tspan><tspan x="0" y="388.8" xml:space="preserve">                    &gt;</tspan><tspan x="0" y="403.2" xml:space="preserve">                      &lt;img src=&quot;/assets/icons/l1.svg&quot; alt=&quot;&quot; width=&quot;18&quot; /&gt;</tspan><tspan x="0" y="417.6" xml:space="preserve">                    &lt;/button&gt;</tspan><tspan x="0" y="446.4" xml:space="preserve">                    &lt;div</tspan><tspan x="0" y="460.8" xml:space="preserve">                      id=&quot;dropdown&quot;</tspan><tspan x="0" y="475.2" xml:space="preserve">                      class=&quot;z-10 hidden bg-white rounded-lg [box-shadow:0px_0px_20px_0px_rgb(0_0_0_/_5%)] min-w-[160px]&quot;</tspan><tspan x="0" y="489.6" xml:space="preserve">                    &gt;</tspan><tspan x="0" y="504" xml:space="preserve">                      &lt;ul</tspan><tspan x="0" y="518.4" xml:space="preserve">                        class=&quot;text-sm&quot;</tspan><tspan x="0" y="532.8" xml:space="preserve">                        aria-labelledby=&quot;dropdownDefaultButton&quot;</tspan><tspan x="0" y="547.2" xml:space="preserve">                      &gt;</tspan><tspan x="0" y="561.6" xml:space="preserve">                        &lt;li&gt;</tspan><tspan x="0" y="576" xml:space="preserve">                          &lt;button</tspan><tspan x="0" y="590.4" xml:space="preserve">                            data-modal-target=&quot;default-modal1&quot;</tspan><tspan x="0" y="604.8" xml:space="preserve">                            data-modal-toggle=&quot;default-modal1&quot;</tspan><tspan x="0" y="619.2" xml:space="preserve">                            class=&quot;block px-4 py-2 hover:text-primary-600 transition duration-300 text-sm&quot;</tspan><tspan x="0" y="633.6" xml:space="preserve">                          &gt;</tspan><tspan x="0" y="648" xml:space="preserve">                            Kanban Settings</tspan><tspan x="0" y="662.4" xml:space="preserve">                          &lt;/button&gt;</tspan><tspan x="0" y="676.8" xml:space="preserve">                        &lt;/li&gt;</tspan><tspan x="0" y="691.2" xml:space="preserve">                        &lt;li&gt;</tspan><tspan x="0" y="705.6" xml:space="preserve">                          &lt;button</tspan><tspan x="0" y="720" xml:space="preserve">                            data-modal-target=&quot;default-modal&quot;</tspan><tspan x="0" y="734.4" xml:space="preserve">                            data-modal-toggle=&quot;default-modal&quot;</tspan><tspan x="0" y="748.8" xml:space="preserve">                            class=&quot;block px-4 py-2 hover:text-primary-600 transition duration-300 text-sm&quot;</tspan><tspan x="0" y="763.2" xml:space="preserve">                          &gt;</tspan><tspan x="0" y="777.6" xml:space="preserve">                            Add Columns to List</tspan><tspan x="0" y="792" xml:space="preserve">                          &lt;/button&gt;</tspan><tspan x="0" y="806.4" xml:space="preserve">                        &lt;/li&gt;</tspan><tspan x="0" y="820.8" xml:space="preserve">                        &lt;li&gt;</tspan><tspan x="0" y="835.2" xml:space="preserve">                          &lt;a</tspan><tspan x="0" y="849.6" xml:space="preserve">                            href=&quot;#&quot;</tspan><tspan x="0" y="864" xml:space="preserve">                            class=&quot;block px-4 py-2 hover:text-primary-600 transition duration-300 text-sm&quot;</tspan><tspan x="0" y="878.4" xml:space="preserve">                            &gt;Delete&lt;/a</tspan><tspan x="0" y="892.8" xml:space="preserve">                          &gt;</tspan><tspan x="0" y="907.2" xml:space="preserve">                        &lt;/li&gt;</tspan><tspan x="0" y="921.6" xml:space="preserve">                        &lt;li&gt;</tspan><tspan x="0" y="936" xml:space="preserve">                          &lt;button</tspan><tspan x="0" y="950.4" xml:space="preserve">                            data-modal-target=&quot;default-modal2&quot;</tspan><tspan x="0" y="964.8" xml:space="preserve">                            data-modal-toggle=&quot;default-modal2&quot;</tspan><tspan x="0" y="979.2" xml:space="preserve">                            class=&quot;block px-4 py-2 hover:text-primary-600 transition duration-300 text-sm&quot;</tspan><tspan x="0" y="993.6" xml:space="preserve">                          &gt;</tspan><tspan x="0" y="1008" xml:space="preserve">                            Export</tspan><tspan x="0" y="1022.4" xml:space="preserve">                          &lt;/button&gt;</tspan><tspan x="0" y="1036.8" xml:space="preserve">                        &lt;/li&gt;</tspan><tspan x="0" y="1051.2" xml:space="preserve">                        &lt;li&gt;</tspan><tspan x="0" y="1065.6" xml:space="preserve">                          &lt;a</tspan><tspan x="0" y="1080" xml:space="preserve">                            href=&quot;#&quot;</tspan><tspan x="0" y="1094.4" xml:space="preserve">                            class=&quot;block px-4 py-2 hover:text-primary-600 transition duration-300 text-sm&quot;</tspan><tspan x="0" y="1108.8" xml:space="preserve">                            &gt;Import&lt;/a</tspan><tspan x="0" y="1123.2" xml:space="preserve">                          &gt;</tspan><tspan x="0" y="1137.6" xml:space="preserve">                        &lt;/li&gt;</tspan><tspan x="0" y="1152" xml:space="preserve">                        &lt;li&gt;</tspan><tspan x="0" y="1166.4" xml:space="preserve">                          &lt;button</tspan><tspan x="0" y="1180.8" xml:space="preserve">                            data-modal-target=&quot;default-modal3&quot;</tspan><tspan x="0" y="1195.2" xml:space="preserve">                            data-modal-toggle=&quot;default-modal3&quot;</tspan><tspan x="0" y="1209.6" xml:space="preserve">                            class=&quot;block px-4 py-2 hover:text-primary-600 transition duration-300 text-sm&quot;</tspan><tspan x="0" y="1224" xml:space="preserve">                          &gt;</tspan><tspan x="0" y="1238.4" xml:space="preserve">                            Add to Campaign</tspan><tspan x="0" y="1252.8" xml:space="preserve">                          &lt;/button&gt;</tspan><tspan x="0" y="1267.2" xml:space="preserve">                        &lt;/li&gt;</tspan><tspan x="0" y="1281.6" xml:space="preserve">                        &lt;li&gt;</tspan><tspan x="0" y="1296" xml:space="preserve">                          &lt;button</tspan><tspan x="0" y="1310.4" xml:space="preserve">                            data-modal-target=&quot;default-modal4&quot;</tspan><tspan x="0" y="1324.8" xml:space="preserve">                            data-modal-toggle=&quot;default-modal4&quot;</tspan><tspan x="0" y="1339.2" xml:space="preserve">                            class=&quot;block px-4 py-2 hover:text-primary-600 transition duration-300 text-sm&quot;</tspan><tspan x="0" y="1353.6" xml:space="preserve">                          &gt;</tspan><tspan x="0" y="1368" xml:space="preserve">                            Change Owner</tspan><tspan x="0" y="1382.4" xml:space="preserve">                          &lt;/button&gt;</tspan><tspan x="0" y="1396.8" xml:space="preserve">                        &lt;/li&gt;</tspan><tspan x="0" y="1411.2" xml:space="preserve">                        &lt;li&gt;</tspan><tspan x="0" y="1425.6" xml:space="preserve">                          &lt;button</tspan><tspan x="0" y="1440" xml:space="preserve">                            data-modal-target=&quot;default-modal5&quot;</tspan><tspan x="0" y="1454.4" xml:space="preserve">                            data-modal-toggle=&quot;default-modal5&quot;</tspan><tspan x="0" y="1468.8" xml:space="preserve">                            class=&quot;block px-4 py-2 hover:text-primary-600 transition duration-300 text-sm&quot;</tspan><tspan x="0" y="1483.2" xml:space="preserve">                          &gt;</tspan><tspan x="0" y="1497.6" xml:space="preserve">                            Change Status</tspan><tspan x="0" y="1512" xml:space="preserve">                          &lt;/button&gt;</tspan><tspan x="0" y="1526.4" xml:space="preserve">                        &lt;/li&gt;</tspan><tspan x="0" y="1540.8" xml:space="preserve">                      &lt;/ul&gt;</tspan><tspan x="0" y="1555.2" xml:space="preserve">                    &lt;/div&gt;</tspan><tspan x="0" y="1569.6" xml:space="preserve">                  &lt;/div&gt;</tspan><tspan x="0" y="1584" xml:space="preserve">                &lt;/div&gt;</tspan></text>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/horilla_theme/static/horilla_theme/assets/icons/l3.svg b/horilla_theme/static/horilla_theme/assets/icons/l3.svg
new file mode 100644
index 000000000..8f8e55af7
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/icons/l3.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 21 21">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #444;
+      }
+    </style>
+  </defs>
+  <!-- Generator: Adobe Illustrator 28.6.0, SVG Export Plug-In . SVG Version: 1.2.0 Build 709)  -->
+  <g>
+    <g id="Layer_1">
+      <g>
+        <path class="cls-1" d="M13.6,12.9c-1.8,0-3.6,0-5.4,0-.7,0-.9-.3-.9-.9,0-1,0-2,0-2.9,0-.6.3-.9.9-.9,3.6,0,7.2,0,10.9,0,.6,0,.9.3.9.9,0,1,0,2,0,3,0,.6-.3.9-.9.9-1.8,0-3.6,0-5.4,0Z"/>
+        <path class="cls-1" d="M13.6,19.1c-1.8,0-3.6,0-5.4,0-.6,0-.9-.3-.9-.9,0-1,0-2,0-3,0-.6.3-.9.9-.9,2.4,0,4.9,0,7.3,0,1.1,0,2.3,0,3.4,0,.2,0,.5,0,.7.2.1.1.2.3.2.5,0,1.1,0,2.2,0,3.3,0,.5-.3.7-.8.7-1.8,0-3.7,0-5.5,0Z"/>
+        <path class="cls-1" d="M13.6,6.6c-1.8,0-3.5,0-5.3,0-.1,0-.2,0-.3,0-.4,0-.6-.3-.6-.7,0-1.1,0-2.2,0-3.3,0-.4.3-.7.7-.7,0,0,0,0,.1,0,3.6,0,7.2,0,10.9,0,.3,0,.6,0,.7.3,0,.2.1.4.1.5,0,1,0,2,0,2.9,0,.6-.3.9-.9.9-1.7,0-3.4,0-5,0-.1,0-.2,0-.3,0Z"/>
+        <path class="cls-1" d="M5.8,10.5c0,.5,0,1,0,1.5,0,.5-.3.8-.8.8-1,0-2,0-3.1,0-.5,0-.8-.3-.8-.8,0-1,0-2,0-3.1,0-.5.3-.8.8-.8,1,0,2,0,3.1,0,.5,0,.8.3.8.8,0,0,0,0,0,0,0,.5,0,1,0,1.5Z"/>
+        <path class="cls-1" d="M5.8,4.2c0,.5,0,1,0,1.5,0,.5-.3.8-.8.8-1.1,0-2.1,0-3.2,0-.5,0-.8-.3-.8-.8,0-1,0-2.1,0-3.1,0-.5.3-.8.8-.8,1,0,2,0,3.1,0,.5,0,.8.3.8.8,0,.5,0,1,0,1.5Z"/>
+        <path class="cls-1" d="M5.8,16.8c0,.5,0,1,0,1.5,0,.5-.3.8-.8.8-1,0-2,0-3.1,0-.5,0-.8-.3-.8-.8,0-1,0-2,0-3.1,0-.5.3-.8.8-.8,1,0,2.1,0,3.1,0,.5,0,.8.3.8.8,0,.5,0,1,0,1.5Z"/>
+      </g>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/horilla_theme/static/horilla_theme/assets/icons/l4.svg b/horilla_theme/static/horilla_theme/assets/icons/l4.svg
new file mode 100644
index 000000000..18d1b19c9
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/icons/l4.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 21 21">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #444;
+      }
+    </style>
+  </defs>
+  <!-- Generator: Adobe Illustrator 28.6.0, SVG Export Plug-In . SVG Version: 1.2.0 Build 709)  -->
+  <g>
+    <g id="Layer_1">
+      <path class="cls-1" d="M10.5.6c2.8,0,5.5,0,8.3,0,1.3,0,2.3,1,2.2,2.3,0,.5-.2,1-.6,1.4-2.3,2.5-4.6,5.1-6.9,7.6-.2.2-.3.4-.3.7,0,1.3,0,2.6,0,3.9,0,.3-.1.6-.4.8-1.2,1-2.5,2-3.7,3-.1.1-.3.2-.4.2-.5.1-.9-.3-.9-.7,0-.4,0-.8,0-1.2,0-2,0-4,0-6,0-.2,0-.3-.2-.5C5.3,9.4,2.9,6.8.6,4.3-.5,3,0,1.1,1.6.7c.2,0,.5,0,.7,0,2.7,0,5.5,0,8.2,0Z"/>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/horilla_theme/static/horilla_theme/assets/icons/l5.svg b/horilla_theme/static/horilla_theme/assets/icons/l5.svg
new file mode 100644
index 000000000..7b349c253
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/icons/l5.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 21 21">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #444;
+      }
+    </style>
+  </defs>
+  <!-- Generator: Adobe Illustrator 28.6.0, SVG Export Plug-In . SVG Version: 1.2.0 Build 709)  -->
+  <g>
+    <g id="Layer_1">
+      <g>
+        <path class="cls-1" d="M20.9,11.1c0,.4,0,.7-.2,1.1-.3,2-1.2,3.7-2.6,5.2,0,0,0,0-.1.2,0,0,.1,0,.2.1.6.6,1.1,1.1,1.7,1.7,0,0,.1.2,0,.2,0,0-.1.1-.2.2-.7.1-1.4.2-2.2.3-1.5.2-2.9.4-4.4.7,0,0,0,0-.1,0-.2,0-.3,0-.2-.3.1-.8.3-1.6.4-2.4.2-1.4.4-2.7.6-4.1,0,0,0-.1,0-.2,0,0,0-.2.2-.2,0,0,.2,0,.2,0,.6.6,1.2,1.2,1.8,1.8,1.4-1.3,2.5-3.9,1.9-6.7-.4-1.8-1.3-3.2-2.8-4.2-1.5-1.1-3.1-1.5-4.9-1.4.1-.9.3-1.9.4-2.8.7,0,1.3,0,2,.1,4.1.8,6.7,3.3,7.9,7.3.2.6.2,1.2.3,1.8,0,0,0,.1,0,.2v1.2Z"/>
+        <path class="cls-1" d="M10.8,17.7c-.1.9-.3,1.9-.4,2.8-2.5.2-6.3-.9-8.6-4.5C-.6,12.4-.5,7,3,3.4c0,0-.1,0-.2-.1-.6-.6-1.1-1.1-1.7-1.7,0,0-.1-.2-.1-.2,0,0,.2-.1.2-.2C3.5.9,5.7.5,7.9.2c.3,0,.4,0,.3.3-.3,2.2-.7,4.3-1,6.5,0,0,0,0,0,.1,0,0,0,.2-.2.2,0,0-.2,0-.2,0-.5-.4-.9-.9-1.3-1.3-.2-.2-.3-.3-.5-.5-1.5,1.4-2.6,4.1-1.8,6.9.4,1.7,1.4,3.1,2.8,4.1,1.4,1,3.1,1.4,4.9,1.3Z"/>
+      </g>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/horilla_theme/static/horilla_theme/assets/icons/lead.svg b/horilla_theme/static/horilla_theme/assets/icons/lead.svg
new file mode 100644
index 000000000..dd2098777
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/icons/lead.svg
@@ -0,0 +1,3 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.5765 14.9719V17.3331C12.5287 16.9716 11.4074 16.8607 10.3066 17.0098C9.20584 17.1588 8.15778 17.5635 7.25045 18.1898C6.34312 18.816 5.60301 19.6456 5.09227 20.6089C4.58154 21.5721 4.31509 22.6409 4.3153 23.7255L2 23.7243C1.99964 22.3447 2.32289 20.9834 2.94499 19.7445C3.56708 18.5057 4.47151 17.4223 5.58897 16.5774C6.70643 15.7324 8.00726 15.1483 9.39178 14.8698C10.7763 14.5913 12.2078 14.627 13.5765 14.9719ZM11.2612 13.5574C7.42359 13.5574 4.3153 10.5239 4.3153 6.7787C4.3153 3.03347 7.42359 0 11.2612 0C15.0988 0 18.2071 3.03347 18.2071 6.7787C18.2071 10.5239 15.0988 13.5574 11.2612 13.5574ZM11.2612 11.2978C13.8196 11.2978 15.8918 9.27553 15.8918 6.7787C15.8918 4.28188 13.8196 2.25957 11.2612 2.25957C8.7028 2.25957 6.6306 4.28188 6.6306 6.7787C6.6306 9.27553 8.7028 11.2978 11.2612 11.2978ZM19.8487 18.0765H24V20.3361H19.8487L21.966 22.4014L20.3291 24L15.4172 19.2063L20.3291 14.4127L21.966 16.0113L19.8487 18.0765Z" fill="#38BDF8"/>
+</svg>
diff --git a/horilla_theme/static/horilla_theme/assets/icons/lead1.svg b/horilla_theme/static/horilla_theme/assets/icons/lead1.svg
new file mode 100644
index 000000000..1dba5fbab
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/icons/lead1.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 60 60">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #e54f38;
+      }
+    </style>
+  </defs>
+  <!-- Generator: Adobe Illustrator 28.6.0, SVG Export Plug-In . SVG Version: 1.2.0 Build 709)  -->
+  <g>
+    <g id="Layer_1">
+      <g>
+        <path class="cls-1" d="M.3,35.1c0-.4.2-.7.3-1.1.9-3.3,3.8-5.7,7.2-5.7,1.7,0,3.4,0,5.1.3,1.1.1,2.1.7,2.9,1.5-.1.2-.3.3-.4.4-2.5,2.6-3.9,5.8-4.4,9.4-.4,2.9-.3,5.9-.3,8.8,0,1.1,0,2.2,0,3.4-.3,0-.5,0-.8,0-2,0-4.1,0-6.1,0-1.8,0-2.9-.9-3.5-2.6,0,0,0,0,0-.1,0-4.8,0-9.5,0-14.3Z"/>
+        <path class="cls-1" d="M29.3,55.8c-3.5,0-6.9,0-10.4,0-.7,0-1.4,0-2-.3-1.6-.6-2.5-1.9-2.6-3.6,0-3.3-.1-6.6,0-9.9.2-5.3,2.5-9.4,7.2-12,1.9-1.1,4-1.6,6.2-1.8,2.5-.2,5-.2,7.5.4,5.3,1.3,9.9,6.5,10.3,12,.3,3.8.1,7.7.1,11.5,0,.5-.2,1-.4,1.5-.4,1.1-1.2,1.7-2.3,1.8-2,.2-3.9.3-5.9.4-2.5,0-5.1,0-7.6,0,0,0,0,0,0,0Z"/>
+        <path class="cls-1" d="M30,4.1c5.6,0,10.1,4.5,10.1,10.1,0,5.6-4.5,10.1-10.1,10.1-5.5,0-10.1-4.5-10.1-10.1,0-5.6,4.5-10.1,10.1-10.1Z"/>
+        <path class="cls-1" d="M49.1,52c0-.2,0-.4,0-.6,0-3,0-5.9,0-8.9,0-3.9-1-7.5-3.4-10.7-.5-.6-1-1.2-1.5-1.8,1.2-1,2.5-1.6,4.1-1.7,1.8-.1,3.7-.3,5.5.2,3.5.9,5.9,4,5.9,7.5,0,4.2,0,8.3,0,12.5,0,2-1.3,3.5-3.3,3.6-2.3.1-4.6,0-6.8,0-.1,0-.3,0-.4,0Z"/>
+        <path class="cls-1" d="M9.6,11.5c3.5,0,6.4,2.9,6.4,6.4,0,3.5-2.9,6.4-6.4,6.4-3.5,0-6.4-2.9-6.4-6.4,0-3.5,2.9-6.4,6.4-6.3Z"/>
+        <path class="cls-1" d="M50.4,11.5c3.5,0,6.4,2.8,6.4,6.4,0,3.5-2.8,6.4-6.4,6.4-3.5,0-6.4-2.9-6.4-6.4,0-3.5,2.8-6.4,6.4-6.4Z"/>
+      </g>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/horilla_theme/static/horilla_theme/assets/icons/leads.svg b/horilla_theme/static/horilla_theme/assets/icons/leads.svg
new file mode 100644
index 000000000..40d4aac7e
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/icons/leads.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 60 60">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #fff;
+      }
+    </style>
+  </defs>
+  <!-- Generator: Adobe Illustrator 28.6.0, SVG Export Plug-In . SVG Version: 1.2.0 Build 709)  -->
+  <g>
+    <g id="Layer_1">
+      <g>
+        <path class="cls-1" d="M24.4,0c1.1,0,2.3,0,3.4,0,.1,0,.3,0,.4.1,2.1.2,4.2.6,6.2,1.3,16.3,5.5,22.8,24.9,13.3,39.2-.1.2-.2.3-.3.5,1.7,1.2,3.4,2.3,5.1,3.5,2.3,1.6,4.6,3.2,6.4,5.4.3.4.6.8.7,1.2.8,2.2.3,4.1-1.2,5.8-.3.4-.7.7-1.1,1.1-2.6,2.6-5.7,2.6-8.3,0-2.4-2.4-4.2-5.2-6.1-8-.6-.9-1.2-1.8-1.8-2.7-.2.1-.4.2-.6.4-3.7,2.5-7.8,3.9-12.2,4.3-6.9.5-13.1-1.3-18.6-5.7C4.7,42.3,1.7,37.1.5,30.8.3,29.8.2,28.8,0,27.8c0-1.1,0-2.3,0-3.4,0-.7.2-1.5.3-2.2.8-5.1,2.8-9.5,6.2-13.4C10.5,4.4,15.4,1.6,21.3.5c1-.2,2.1-.3,3.1-.5ZM45.3,26.1c0-10.7-8.7-19.3-19.4-19.3-10.6,0-19.2,8.7-19.1,19.4,0,10.5,8.8,19.2,19.3,19.1,10.7,0,19.2-8.7,19.2-19.2Z"/>
+        <path class="cls-1" d="M26.2,30.2c2.6.1,5.4.2,8.2.4,2.5.2,4.4,2.5,4.2,5,0,.2-.1.4-.2.5-5.8,7.4-17.3,8-23.9,1.1-.1-.1-.3-.3-.4-.4-.9-.7-.9-1.6-.7-2.7.5-1.9,2.1-3.4,4.1-3.5,2.8-.2,5.6-.2,8.6-.4Z"/>
+        <path class="cls-1" d="M33.7,20.9c0,4.3-3.6,7.6-7.8,7.6-4.3,0-7.6-3.6-7.5-7.9,0-4.1,3.6-7.5,7.7-7.4,4.2,0,7.6,3.6,7.6,7.7Z"/>
+      </g>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/horilla_theme/static/horilla_theme/assets/icons/like.svg b/horilla_theme/static/horilla_theme/assets/icons/like.svg
new file mode 100644
index 000000000..db5a31afa
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/icons/like.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 60 60">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #f8595f;
+      }
+    </style>
+  </defs>
+  <!-- Generator: Adobe Illustrator 28.6.0, SVG Export Plug-In . SVG Version: 1.2.0 Build 709)  -->
+  <g>
+    <g id="Layer_1">
+      <g>
+        <path class="cls-1" d="M59.9,30.8v2.1c0,.2-.1.5-.2.7-.9,5.3-1.9,10.7-2.8,16-.8,4.8-4.9,8.3-9.7,8.3-5.3,0-10.6,0-15.9-.9-4.1-.7-8.2-1.7-12-3.4-.3-.1-.5-.3-.5-.7,0-10,0-19.9,0-29.9,0-.4.1-.5.4-.8,1.1-.8,2.2-1.7,3.3-2.6,1.6-1.4,3-3,4.1-4.8,1.1-1.8,1.6-3.7,1.6-5.8,0-1.7,0-3.4.6-5,.5-1.4,1.4-2.1,2.9-2.1,1.7,0,3.2.6,4.5,1.6,2.6,1.9,3.7,4.7,3.8,7.8,0,3.5-.4,6.9-1.7,10.2,0,0,0,.2,0,.3.3,0,.5,0,.7,0,3.8,0,7.6,0,11.4,0,4.5,0,8.4,3.4,9.3,7.8,0,.4.2.7.2,1.1Z"/>
+        <path class="cls-1" d="M15.1,38.7c0,4.7,0,9.3,0,14,0,2.8-1.8,4.7-4.7,4.7-1.9,0-3.7,0-5.6,0-2.8,0-4.7-1.8-4.7-4.7,0-9.3,0-18.7,0-28,0-2.8,1.8-4.7,4.7-4.7,1.9,0,3.7,0,5.6,0,2.9,0,4.7,1.8,4.7,4.7,0,4.7,0,9.3,0,14Z"/>
+      </g>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/horilla_theme/static/horilla_theme/assets/icons/link.svg b/horilla_theme/static/horilla_theme/assets/icons/link.svg
new file mode 100644
index 000000000..130d9a07c
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/icons/link.svg
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 60 60">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #e54f38;
+      }
+    </style>
+  </defs>
+  <!-- Generator: Adobe Illustrator 28.6.0, SVG Export Plug-In . SVG Version: 1.2.0 Build 709)  -->
+  <g>
+    <g id="Layer_1">
+      <g id="Layer_1-2" data-name="Layer_1">
+        <g>
+          <path class="cls-1" d="M2.6,43.6c.2-1,.4-2,.7-3,.6-2,1.7-3.7,3.2-5.1,3.8-3.8,7.6-7.6,11.4-11.4,4.4-4.3,10.7-5.1,15.8-2,1.2.7,2.3,1.5,3,2.8.8,1.5.4,3.3-.8,4.3-1.4,1.1-3.3,1.2-4.6.2-.2-.2-.4-.3-.6-.5-2.1-1.8-5.2-1.8-7.3,0l-.9.9c-3.6,3.6-7.2,7.2-10.9,10.9-2,2-2.3,4.9-.8,7.1,2,2.8,6,3.2,8.5.7,2.2-2.1,4.3-4.3,6.4-6.4.1,0,.2-.2.3-.3.3-.3.7-.4,1.1-.2,2,.8,4,1.1,6.1,1.1s.7.2.9.6c.2.4,0,.7-.2,1-.5.5-1,1-1.5,1.6-2.8,2.8-5.6,5.6-8.5,8.4-1.9,1.8-4.3,2.9-6.9,3.2-.2,0-.3,0-.5,0h-2.1c-.2,0-.4,0-.6,0-5-.8-8.5-3.5-10.3-8.2-.4-1.1-.6-2.3-.9-3.5v-2.2Z"/>
+          <path class="cls-1" d="M31.4,39.7c-2.2,0-5.3-1.3-7.6-4-1.2-1.4-1.1-3.5.2-4.8,1.2-1.3,3.4-1.4,4.8-.3.8.7,1.6,1.4,2.7,1.6,2,.5,3.7.2,5.2-1.2,1.2-1.1,2.3-2.3,3.5-3.5l8.2-8.2c2.3-2.3,2.3-5.9,0-8.1-2.1-1.9-5.4-1.8-7.6.3-2.2,2.1-4.3,4.3-6.5,6.5s-1,.7-1.8.4c-1.8-.7-3.7-1-5.6-1s-.8-.1-1-.6c-.2-.4,0-.8.3-1.1,3.3-3.3,6.6-6.7,10-9.9,5-4.7,13.2-4.3,17.8.8,4.3,4.8,4.6,11.6.6,16.7-.3.4-.6.7-.9,1-3.9,3.9-7.8,7.8-11.7,11.7s-5.7,3.7-10.6,3.6h0Z"/>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/horilla_theme/static/horilla_theme/assets/icons/meetings.svg b/horilla_theme/static/horilla_theme/assets/icons/meetings.svg
new file mode 100644
index 000000000..c84666444
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/icons/meetings.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 20V17.225C0 16.6583 0.141667 16.1333 0.425 15.65C0.708333 15.1667 1.1 14.8 1.6 14.55C1.83333 14.4333 2.05833 14.325 2.275 14.225C2.50833 14.125 2.75 14.0333 3 13.95V20H0ZM4 13C3.16667 13 2.45833 12.7083 1.875 12.125C1.29167 11.5417 1 10.8333 1 10C1 9.16667 1.29167 8.45833 1.875 7.875C2.45833 7.29167 3.16667 7 4 7C4.83333 7 5.54167 7.29167 6.125 7.875C6.70833 8.45833 7 9.16667 7 10C7 10.8333 6.70833 11.5417 6.125 12.125C5.54167 12.7083 4.83333 13 4 13ZM4 11C4.28333 11 4.51667 10.9083 4.7 10.725C4.9 10.525 5 10.2833 5 10C5 9.71667 4.9 9.48333 4.7 9.3C4.51667 9.1 4.28333 9 4 9C3.71667 9 3.475 9.1 3.275 9.3C3.09167 9.48333 3 9.71667 3 10C3 10.2833 3.09167 10.525 3.275 10.725C3.475 10.9083 3.71667 11 4 11ZM4 20V17.2C4 16.6333 4.14167 16.1167 4.425 15.65C4.725 15.1667 5.11667 14.8 5.6 14.55C6.63333 14.0333 7.68333 13.65 8.75 13.4C9.81667 13.1333 10.9 13 12 13C13.1 13 14.1833 13.1333 15.25 13.4C16.3167 13.65 17.3667 14.0333 18.4 14.55C18.8833 14.8 19.2667 15.1667 19.55 15.65C19.85 16.1167 20 16.6333 20 17.2V20H4ZM6 18H18V17.2C18 17.0167 17.95 16.85 17.85 16.7C17.7667 16.55 17.65 16.4333 17.5 16.35C16.6 15.9 15.6917 15.5667 14.775 15.35C13.8583 15.1167 12.9333 15 12 15C11.0667 15 10.1417 15.1167 9.225 15.35C8.30833 15.5667 7.4 15.9 6.5 16.35C6.35 16.4333 6.225 16.55 6.125 16.7C6.04167 16.85 6 17.0167 6 17.2V18ZM12 12C10.9 12 9.95833 11.6083 9.175 10.825C8.39167 10.0417 8 9.1 8 8C8 6.9 8.39167 5.95833 9.175 5.175C9.95833 4.39167 10.9 4 12 4C13.1 4 14.0417 4.39167 14.825 5.175C15.6083 5.95833 16 6.9 16 8C16 9.1 15.6083 10.0417 14.825 10.825C14.0417 11.6083 13.1 12 12 12ZM12 10C12.55 10 13.0167 9.80833 13.4 9.425C13.8 9.025 14 8.55 14 8C14 7.45 13.8 6.98333 13.4 6.6C13.0167 6.2 12.55 6 12 6C11.45 6 10.975 6.2 10.575 6.6C10.1917 6.98333 10 7.45 10 8C10 8.55 10.1917 9.025 10.575 9.425C10.975 9.80833 11.45 10 12 10ZM20 13C19.1667 13 18.4583 12.7083 17.875 12.125C17.2917 11.5417 17 10.8333 17 10C17 9.16667 17.2917 8.45833 17.875 7.875C18.4583 7.29167 19.1667 7 20 7C20.8333 7 21.5417 7.29167 22.125 7.875C22.7083 8.45833 23 9.16667 23 10C23 10.8333 22.7083 11.5417 22.125 12.125C21.5417 12.7083 20.8333 13 20 13ZM20 11C20.2833 11 20.5167 10.9083 20.7 10.725C20.9 10.525 21 10.2833 21 10C21 9.71667 20.9 9.48333 20.7 9.3C20.5167 9.1 20.2833 9 20 9C19.7167 9 19.475 9.1 19.275 9.3C19.0917 9.48333 19 9.71667 19 10C19 10.2833 19.0917 10.525 19.275 10.725C19.475 10.9083 19.7167 11 20 11ZM21 20V13.95C21.25 14.0333 21.4833 14.125 21.7 14.225C21.9333 14.325 22.1667 14.4333 22.4 14.55C22.9 14.8 23.2917 15.1667 23.575 15.65C23.8583 16.1333 24 16.6583 24 17.225V20H21Z" fill="#49454F"/>
+</svg>
diff --git a/horilla_theme/static/horilla_theme/assets/icons/menuarrow.svg b/horilla_theme/static/horilla_theme/assets/icons/menuarrow.svg
new file mode 100644
index 000000000..832c52cb4
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/icons/menuarrow.svg
@@ -0,0 +1,11 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1_7102)">
+<rect width="24" height="24" rx="12" fill="#FFD8D2"/>
+<path d="M10.828 11.9998L15.778 16.9498L14.364 18.3638L7.99995 11.9998L14.364 5.63577L15.778 7.04977L10.828 11.9998Z" fill="#E54F38"/>
+</g>
+<defs>
+<clipPath id="clip0_1_7102">
+<rect width="24" height="24" rx="12" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/horilla_theme/static/horilla_theme/assets/icons/next.svg b/horilla_theme/static/horilla_theme/assets/icons/next.svg
new file mode 100644
index 000000000..2854e003d
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/icons/next.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 12 20">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #2995e3;
+      }
+    </style>
+  </defs>
+  <!-- Generator: Adobe Illustrator 28.6.0, SVG Export Plug-In . SVG Version: 1.2.0 Build 709)  -->
+  <g>
+    <g id="Layer_1">
+      <path class="cls-1" d="M2.4.7l-1.5,1.6,7.7,7.8L.9,17.8l1.5,1.6,9.4-9.4L2.4.7Z"/>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/horilla_theme/static/horilla_theme/assets/icons/oppor.svg b/horilla_theme/static/horilla_theme/assets/icons/oppor.svg
new file mode 100644
index 000000000..cb491d506
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/icons/oppor.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 60 60">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #e54f38;
+      }
+    </style>
+  </defs>
+  <!-- Generator: Adobe Illustrator 28.6.0, SVG Export Plug-In . SVG Version: 1.2.0 Build 709)  -->
+  <g>
+    <g id="Layer_1">
+      <g>
+        <path class="cls-1" d="M25.6,57.8c-.8-.4-1.8-.7-2.5-1.2-1.3-1-1.8-2.4-1.9-4,0-1.2,0-2.3,0-3.5h17.6c0,1.6,0,3.3-.3,4.9-.4,1.9-1.8,3.1-3.7,3.7-.2,0-.3.1-.5.2h-8.8Z"/>
+        <path class="cls-1" d="M38.9,44.6h-17.8c0-.2,0-.3-.1-.5-.5-2.2-1.7-3.9-3.4-5.3-4-3.1-6.5-7.2-7.6-12.2C7.6,15.6,15.2,4.5,26.3,2.5c10.9-1.9,21.1,4.7,23.6,15.5,1.8,8.1-.6,15-6.9,20.4-1.7,1.5-3.2,3.1-3.9,5.3,0,.3-.1.5-.2.8ZM31.2,9.5c-1.5,0-2.5.8-2.6,2.1,0,1.3,1,2.2,2.5,2.3,4.2.1,7.7,3.6,7.8,7.9,0,1.4,1,2.4,2.2,2.4,1.3,0,2.2-1.1,2.2-2.5,0-6.5-5.5-12-12-12.1Z"/>
+      </g>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/horilla_theme/static/horilla_theme/assets/icons/opportunities.svg b/horilla_theme/static/horilla_theme/assets/icons/opportunities.svg
new file mode 100644
index 000000000..9d94be329
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/icons/opportunities.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 60 60">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #787878;
+      }
+    </style>
+  </defs>
+  <!-- Generator: Adobe Illustrator 28.6.0, SVG Export Plug-In . SVG Version: 1.2.0 Build 709)  -->
+  <g>
+    <g id="Layer_1">
+      <g>
+        <path class="cls-1" d="M30,56.5c-8.7,0-17.4,0-26,0-2,0-3.1-1.1-3.1-3.1,0-7.3,0-14.7,0-22,0-1,.1-1.1,1-.7,9.1,3,18.2,6.1,27.3,9.1.4.1,1,0,1.5,0,3.8-1.2,7.7-2.5,11.5-3.8,5.3-1.8,10.6-3.5,15.9-5.3.8-.3,1-.1,1,.7,0,7.4,0,14.8,0,22.2,0,1.8-1.1,2.9-2.9,2.9-8.7,0-17.4,0-26.2,0Z"/>
+        <path class="cls-1" d="M10,15.2c2,0,4.1,0,6.1,0,.6,0,.8-.2.9-.8.9-5.3,5.2-9.7,10.4-10.6,6.4-1.2,12.5,2.2,14.9,8.3.3.8.5,1.7.7,2.5.1.5.3.6.8.6,4.1,0,8.1,0,12.2,0,1.8,0,3.2,1.2,3.2,3.2,0,2.4,0,4.8,0,7.2q0,.9-.9,1.2c-8.3,2.8-16.6,5.5-25,8.3-.9.3-1.9.6-2.8.9-.2,0-.5,0-.7,0-9.2-3.1-18.5-6.1-27.7-9.2q-1-.3-1-1.3c0-2.5,0-4.9,0-7.4,0-1.8,1.1-2.9,2.9-2.9,2,0,4.1,0,6.1,0ZM30,15c2.8,0,5.6,0,8.4,0,.8,0,.9-.1.7-.9-1.1-4.1-4.8-6.9-9.2-6.9-4.1,0-8,3-9,7-.2.7-.1.8.7.8,2.8,0,5.6,0,8.4,0Z"/>
+      </g>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/horilla_theme/static/horilla_theme/assets/icons/opportunity.svg b/horilla_theme/static/horilla_theme/assets/icons/opportunity.svg
new file mode 100644
index 000000000..8972845bf
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/icons/opportunity.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.42836 6.857L6.85693 2.57129H17.1426L14.5712 6.857" stroke="#71D736" stroke-width="2.4" stroke-miterlimit="10"/>
+<path d="M14.5714 6.85693H9.4285C9.4285 6.85693 4.28564 12.3118 4.28564 16.2855C4.28564 18.9349 6.21507 21.4284 11.9999 21.4284C17.7848 21.4284 19.7142 18.9349 19.7142 16.2855C19.7142 12.3118 14.5714 6.85693 14.5714 6.85693Z" stroke="#71D736" stroke-width="2.4" stroke-miterlimit="10" stroke-linecap="square"/>
+</svg>
diff --git a/horilla_theme/static/horilla_theme/assets/icons/pdf.svg b/horilla_theme/static/horilla_theme/assets/icons/pdf.svg
new file mode 100644
index 000000000..5b912ad72
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/icons/pdf.svg
@@ -0,0 +1,3 @@
+<svg width="40" height="50" viewBox="0 0 40 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22.5 17.5H36.25L22.5 3.75V17.5ZM5 0H25L40 15V45C40 46.3261 39.4732 47.5979 38.5355 48.5355C37.5979 49.4732 36.3261 50 35 50H5C3.67392 50 2.40215 49.4732 1.46447 48.5355C0.526784 47.5979 0 46.3261 0 45V5C0 3.67392 0.526784 2.40215 1.46447 1.46447C2.40215 0.526784 3.67392 0 5 0ZM17.325 26.1C18.35 28.35 19.65 30.2 21.15 31.475L22.175 32.275C20 32.675 17 33.375 13.825 34.6L13.55 34.7L14.8 32.1C15.925 29.925 16.75 27.95 17.325 26.1ZM33.525 35.625C33.975 35.175 34.2 34.6 34.225 33.975C34.3 33.475 34.175 33 33.925 32.6C33.2 31.425 31.325 30.875 28.225 30.875L25 31.05L22.825 29.6C21.25 28.3 19.825 26.025 18.825 23.2L18.925 22.85C19.75 19.525 20.525 15.5 18.875 13.85C18.6732 13.654 18.4345 13.5001 18.1727 13.3971C17.9109 13.2941 17.6313 13.2441 17.35 13.25H16.75C15.825 13.25 15 14.225 14.775 15.175C13.85 18.5 14.4 20.325 15.325 23.35V23.375C14.7 25.575 13.9 28.125 12.625 30.7L10.225 35.2L8 36.425C5 38.3 3.575 40.4 3.3 41.725C3.2 42.2 3.25 42.625 3.425 43.075L3.5 43.2L4.7 43.975L5.8 44.25C7.825 44.25 10.125 41.875 13.225 36.575L13.675 36.4C16.25 35.575 19.45 35 23.75 34.525C26.325 35.8 29.35 36.375 31.25 36.375C32.35 36.375 33.1 36.1 33.525 35.625ZM32.5 33.85L32.725 34.125C32.7 34.375 32.625 34.4 32.5 34.45H32.4L31.925 34.5C30.775 34.5 29 34.025 27.175 33.225C27.4 32.975 27.5 32.975 27.75 32.975C31.25 32.975 32.25 33.6 32.5 33.85ZM9.575 37.5C7.95 40.475 6.475 42.125 5.35 42.5C5.475 41.55 6.6 39.9 8.375 38.275L9.575 37.5ZM17.125 20.225C16.55 17.975 16.525 16.15 16.95 15.1L17.125 14.8L17.5 14.925C17.925 15.525 17.975 16.325 17.725 17.675L17.65 18.075L17.25 20.125L17.125 20.225Z" fill="#EF5350"/>
+</svg>
diff --git a/horilla_theme/static/horilla_theme/assets/icons/pen.svg b/horilla_theme/static/horilla_theme/assets/icons/pen.svg
new file mode 100644
index 000000000..eda2e2412
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/icons/pen.svg
@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.728 6.68608L11.314 5.27208L2 14.5861V16.0001H3.414L12.728 6.68608ZM14.142 5.27208L15.556 3.85808L14.142 2.44408L12.728 3.85808L14.142 5.27208ZM4.242 18.0001H0V13.7571L13.435 0.322083C13.6225 0.134612 13.8768 0.0292969 14.142 0.0292969C14.4072 0.0292969 14.6615 0.134612 14.849 0.322083L17.678 3.15108C17.8655 3.33861 17.9708 3.59292 17.9708 3.85808C17.9708 4.12325 17.8655 4.37756 17.678 4.56508L4.242 18.0001Z" fill="black"/>
+</svg>
diff --git a/horilla_theme/static/horilla_theme/assets/icons/pending.svg b/horilla_theme/static/horilla_theme/assets/icons/pending.svg
new file mode 100644
index 000000000..0b75092f5
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/icons/pending.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 60 60">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #666;
+      }
+    </style>
+  </defs>
+  <!-- Generator: Adobe Illustrator 28.6.0, SVG Export Plug-In . SVG Version: 1.2.0 Build 709)  -->
+  <g>
+    <g id="Layer_1">
+      <circle class="cls-1" cx="30" cy="30" r="29.2"/>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/horilla_theme/static/horilla_theme/assets/icons/pin-r.svg b/horilla_theme/static/horilla_theme/assets/icons/pin-r.svg
new file mode 100644
index 000000000..4a37d1d61
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/icons/pin-r.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 20 20">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #191919;
+      }
+    </style>
+  </defs>
+  <!-- Generator: Adobe Illustrator 28.6.0, SVG Export Plug-In . SVG Version: 1.2.0 Build 709)  -->
+  <g>
+    <g id="Layer_1">
+      <path class="cls-1" d="M5.3,12.4c0,0-.1,0-.2-.1-.8-.8-1.7-1.7-2.5-2.5-.1-.1-.2-.2-.3-.4-.3-.4-.3-.9,0-1.3.4-.5.9-.8,1.5-1,1-.4,2-.6,3.1-.2.3,0,.6.3.8.4,1-1,2-2,3.1-3.1-.3-.5-.4-1-.3-1.6.4-1.4,2.1-1.8,3.2-.8.6.6,1.1,1.1,1.7,1.7,1,1,1.9,1.9,2.9,2.9,1.2,1.2.3,2.9-.8,3.2-.5.1-1,0-1.4-.2-.1,0-.2,0-.3,0-1,1-1.9,1.9-2.9,2.9,0,0,0,0,0,0,0,0,0,0,0,0,.8,1.2.8,2.5.2,3.7-.2.5-.5.9-.8,1.3-.1.1-.3.3-.4.4-.3.2-.7.2-1,0-.2,0-.3-.2-.5-.4-.9-.9-1.8-1.8-2.8-2.8-.1-.1-.2-.1-.3,0-1.4,1.2-2.8,2.3-4.3,3.5-.4.3-.8.3-1.1,0-.2-.2-.2-.4-.1-.7,0-.1.1-.2.2-.3,1.1-1.5,2.2-2.9,3.2-4.4,0,0,0-.1.2-.2Z"/>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/horilla_theme/static/horilla_theme/assets/icons/pin.svg b/horilla_theme/static/horilla_theme/assets/icons/pin.svg
new file mode 100644
index 000000000..67df6171f
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/icons/pin.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 20 20">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #191919;
+      }
+    </style>
+  </defs>
+  <!-- Generator: Adobe Illustrator 28.6.0, SVG Export Plug-In . SVG Version: 1.2.0 Build 709)  -->
+  <g>
+    <g id="Layer_1">
+      <path class="cls-1" d="M8.4,13.5c0,0-.1,0-.2,0-1.2,0-2.4,0-3.5,0-.2,0-.3,0-.5,0-.5,0-.9-.4-.9-1,0-.6,0-1.2.3-1.8.4-1,1-1.9,2-2.4.3-.1.6-.2.8-.3,0-1.4,0-2.9,0-4.3-.6-.1-1-.4-1.3-.9C4.4,1.6,5.3,0,6.8,0c.8,0,1.6,0,2.4,0,1.4,0,2.7,0,4.1,0,1.7,0,2.3,1.8,1.7,2.9-.3.5-.7.7-1.2.9-.1,0-.2,0-.2.2,0,1.4,0,2.7,0,4.1,0,0,0,0,0,0,0,0,0,0,0,0,1.4.3,2.3,1.2,2.7,2.5.2.5.2,1,.3,1.5,0,.2,0,.4,0,.5,0,.4-.3.6-.7.7-.2,0-.4,0-.6,0-1.3,0-2.6,0-3.9,0-.2,0-.2,0-.3.2-.2,1.8-.4,3.6-.6,5.5,0,.5-.3.8-.8.7-.3,0-.5-.2-.6-.4,0-.1,0-.2,0-.4-.3-1.8-.5-3.6-.8-5.4,0,0,0-.2,0-.3Z"/>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/horilla_theme/static/horilla_theme/assets/icons/pin1.svg b/horilla_theme/static/horilla_theme/assets/icons/pin1.svg
new file mode 100644
index 000000000..34d923e33
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/icons/pin1.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7 17C5.61667 17 4.43767 16.5123 3.463 15.537C2.48833 14.5617 2.00067 13.3827 2 12C1.99933 10.6173 2.487 9.43833 3.463 8.463C4.439 7.48767 5.618 7 7 7H10C10.2833 7 10.521 7.096 10.713 7.288C10.905 7.48 11.0007 7.71733 11 8C10.9993 8.28267 10.9033 8.52033 10.712 8.713C10.5207 8.90567 10.2833 9.00133 10 9H7C6.16667 9 5.45833 9.29167 4.875 9.875C4.29167 10.4583 4 11.1667 4 12C4 12.8333 4.29167 13.5417 4.875 14.125C5.45833 14.7083 6.16667 15 7 15H10C10.2833 15 10.521 15.096 10.713 15.288C10.905 15.48 11.0007 15.7173 11 16C10.9993 16.2827 10.9033 16.5203 10.712 16.713C10.5207 16.9057 10.2833 17.0013 10 17H7ZM9 13C8.71667 13 8.47933 12.904 8.288 12.712C8.09667 12.52 8.00067 12.2827 8 12C7.99933 11.7173 8.09533 11.48 8.288 11.288C8.48067 11.096 8.718 11 9 11H15C15.2833 11 15.521 11.096 15.713 11.288C15.905 11.48 16.0007 11.7173 16 12C15.9993 12.2827 15.9033 12.5203 15.712 12.713C15.5207 12.9057 15.2833 13.0013 15 13H9ZM14 17C13.7167 17 13.4793 16.904 13.288 16.712C13.0967 16.52 13.0007 16.2827 13 16C12.9993 15.7173 13.0953 15.48 13.288 15.288C13.4807 15.096 13.718 15 14 15H17C17.8333 15 18.5417 14.7083 19.125 14.125C19.7083 13.5417 20 12.8333 20 12C20 11.1667 19.7083 10.4583 19.125 9.875C18.5417 9.29167 17.8333 9 17 9H14C13.7167 9 13.4793 8.904 13.288 8.712C13.0967 8.52 13.0007 8.28267 13 8C12.9993 7.71733 13.0953 7.48 13.288 7.288C13.4807 7.096 13.718 7 14 7H17C18.3833 7 19.5627 7.48767 20.538 8.463C21.5133 9.43833 22.0007 10.6173 22 12C21.9993 13.3827 21.5117 14.562 20.537 15.538C19.5623 16.514 18.3833 17.0013 17 17H14Z" fill="black" fill-opacity="0.878431"/>
+</svg>
diff --git a/horilla_theme/static/horilla_theme/assets/icons/play.svg b/horilla_theme/static/horilla_theme/assets/icons/play.svg
new file mode 100644
index 000000000..a56be3e72
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/icons/play.svg
@@ -0,0 +1,3 @@
+<svg width="15" height="20" viewBox="0 0 15 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.4925 10.0001L2.5 4.6714V15.3289L10.4925 10.0001ZM14.22 10.5201L0.971251 19.3526C0.877132 19.4153 0.767788 19.4512 0.654864 19.4566C0.541941 19.462 0.429666 19.4367 0.329999 19.3833C0.230332 19.33 0.147005 19.2506 0.088892 19.1536C0.0307794 19.0566 5.84005e-05 18.9457 0 18.8326V1.16765C5.84005e-05 1.05459 0.0307794 0.943674 0.088892 0.8467C0.147005 0.749727 0.230332 0.670331 0.329999 0.61697C0.429666 0.563609 0.541941 0.538281 0.654864 0.543683C0.767788 0.549085 0.877132 0.585015 0.971251 0.647646L14.22 9.48015C14.3056 9.53722 14.3758 9.61455 14.4243 9.70526C14.4729 9.79597 14.4983 9.89726 14.4983 10.0001C14.4983 10.103 14.4729 10.2043 14.4243 10.295C14.3758 10.3857 14.3056 10.4631 14.22 10.5201Z" fill="#A7ADB7"/>
+</svg>
diff --git a/horilla_theme/static/horilla_theme/assets/icons/prev.svg b/horilla_theme/static/horilla_theme/assets/icons/prev.svg
new file mode 100644
index 000000000..9a8d7e5ac
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/icons/prev.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 12 20">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #2995e3;
+      }
+    </style>
+  </defs>
+  <!-- Generator: Adobe Illustrator 28.6.0, SVG Export Plug-In . SVG Version: 1.2.0 Build 709)  -->
+  <g>
+    <g id="Layer_1">
+      <path class="cls-1" d="M.3,10l9.4,9.4,1.5-1.6-7.7-7.8,7.7-7.8-1.5-1.6L.3,10Z"/>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/horilla_theme/static/horilla_theme/assets/icons/progress.svg b/horilla_theme/static/horilla_theme/assets/icons/progress.svg
new file mode 100644
index 000000000..e2b05e43a
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/icons/progress.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 60 60">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #3f86e4;
+      }
+    </style>
+  </defs>
+  <!-- Generator: Adobe Illustrator 28.6.0, SVG Export Plug-In . SVG Version: 1.2.0 Build 709)  -->
+  <g>
+    <g id="Layer_1">
+      <circle class="cls-1" cx="30" cy="30" r="29.2"/>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/horilla_theme/static/horilla_theme/assets/icons/question.svg b/horilla_theme/static/horilla_theme/assets/icons/question.svg
new file mode 100644
index 000000000..a3a21508d
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/icons/question.svg
@@ -0,0 +1,3 @@
+<svg width="45" height="45" viewBox="0 0 45 45" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22.5 0.5C34.6551 0.5 44.5 10.3449 44.5 22.5C44.5 34.6551 34.6551 44.5 22.5 44.5C10.3449 44.5 0.5 34.6551 0.5 22.5C0.5 10.3449 10.3449 0.5 22.5 0.5ZM22.5 2.3125C11.3395 2.3125 2.3125 11.3395 2.3125 22.5C2.3125 33.6605 11.3395 42.6875 22.5 42.6875C33.6605 42.6875 42.6875 33.6605 42.6875 22.5C42.6875 11.3395 33.6605 2.3125 22.5 2.3125ZM22.5 32C22.6585 32 22.8157 32.0235 22.9668 32.0693L23.1162 32.1221C23.2625 32.1827 23.3985 32.2651 23.5205 32.3652L23.6377 32.4717C23.7498 32.5837 23.8445 32.7113 23.9189 32.8506L23.9873 32.9932C24.0682 33.1884 24.1094 33.398 24.1094 33.6094C24.1094 33.7678 24.0858 33.9251 24.04 34.0762L23.9873 34.2256C23.9064 34.4208 23.7871 34.5977 23.6377 34.7471C23.4883 34.8965 23.3114 35.0158 23.1162 35.0967C22.921 35.1776 22.7113 35.2188 22.5 35.2188C22.1267 35.2188 21.7668 35.089 21.4805 34.8545L21.3623 34.7471C21.0605 34.4453 20.8906 34.0362 20.8906 33.6094C20.8906 33.2361 21.0204 32.8762 21.2549 32.5898L21.3623 32.4717C21.6641 32.1699 22.0732 32 22.5 32ZM22.5 8.79688C24.1239 8.79688 25.6857 9.40148 26.8838 10.4863L27.1182 10.71C28.343 11.9348 29.0312 13.5959 29.0312 15.3281C29.0312 16.6808 28.6019 17.6962 27.9512 18.502C27.5345 18.9972 27.0597 19.44 26.5361 19.8193L26.3076 19.9785L26.2998 19.9844L25.832 20.3115C25.199 20.7513 24.6645 21.1279 24.251 21.5713L24.083 21.7627C23.6742 22.2589 23.4383 22.8724 23.4072 23.5098L23.4062 23.7627V26.5752C23.4062 26.8155 23.3105 27.0459 23.1406 27.2158C22.9707 27.3858 22.7404 27.4814 22.5 27.4814C22.2897 27.4814 22.087 27.4085 21.9258 27.2764L21.8594 27.2158C21.6895 27.0459 21.5938 26.8155 21.5938 26.5752V23.7627C21.5938 22.5903 21.9228 21.6738 22.4424 20.9287L22.6758 20.6201C23.1519 20.0384 23.7476 19.5697 24.3086 19.166L24.7949 18.8262L24.7939 18.8252C25.5112 18.3258 26.1047 17.9043 26.5371 17.3672L26.5381 17.3682C27.007 16.794 27.2477 16.0683 27.2178 15.3281H27.2188C27.2188 14.1549 26.7818 13.0267 25.998 12.1611L25.8369 11.9912C24.952 11.1063 23.7515 10.6094 22.5 10.6094C21.3268 10.6094 20.1986 11.0463 19.333 11.8301L19.1631 11.9912C18.2781 12.8761 17.7812 14.0766 17.7812 15.3281C17.7812 15.5384 17.7082 15.7411 17.5762 15.9023L17.5156 15.9688C17.3457 16.1387 17.1154 16.2344 16.875 16.2344C16.6648 16.2344 16.462 16.1614 16.3008 16.0293L16.2344 15.9688C16.0644 15.7988 15.9688 15.5685 15.9688 15.3281C15.9688 13.7042 16.5734 12.1424 17.6582 10.9443L17.8818 10.71C19.1067 9.48511 20.7678 8.79688 22.5 8.79688Z" fill="#7FD0F3" stroke="#7FD0F3"/>
+</svg>
diff --git a/horilla_theme/static/horilla_theme/assets/icons/refresh.svg b/horilla_theme/static/horilla_theme/assets/icons/refresh.svg
new file mode 100644
index 000000000..22e167232
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/icons/refresh.svg
@@ -0,0 +1,3 @@
+<svg width="25" height="26" viewBox="0 0 25 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.65741 5.04493C7.53648 3.43403 9.94044 2.54882 12.4268 2.55226C18.1462 2.55226 22.7823 7.13906 22.7823 12.7975C22.7823 14.9859 22.0885 17.0145 20.908 18.6783L17.6046 12.7975H20.7112C20.7114 11.1907 20.2341 9.61924 19.3388 8.2786C18.4435 6.93795 17.1696 5.88725 15.6755 5.25713C14.1815 4.62701 12.5332 4.44528 10.9356 4.73452C9.33797 5.02376 7.86153 5.77121 6.68985 6.88395L5.65741 5.04493ZM19.1962 20.5501C17.3171 22.161 14.9132 23.0462 12.4268 23.0428C6.70746 23.0428 2.07129 18.456 2.07129 12.7975C2.07129 10.6091 2.76511 8.58057 3.94564 6.91674L7.24905 12.7975H4.14239C4.14226 14.4044 4.61953 15.9758 5.51485 17.3164C6.41017 18.6571 7.68405 19.7078 9.1781 20.3379C10.6721 20.968 12.3204 21.1498 13.9181 20.8605C15.5157 20.5713 16.9921 19.8238 18.1638 18.7111L19.1962 20.5501Z" fill="#E54F38"/>
+</svg>
diff --git a/horilla_theme/static/horilla_theme/assets/icons/reports.svg b/horilla_theme/static/horilla_theme/assets/icons/reports.svg
new file mode 100644
index 000000000..a0dc8148e
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/icons/reports.svg
@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.4627 3.16875H15.0189V2.73125C15.0189 1.75625 14.2314 0.96875 13.2627 0.96875H2.93145C1.95645 0.96875 1.16895 1.75625 1.16895 2.73125V14.5625C1.16895 15.5375 1.95645 16.325 2.93145 16.325H3.36895V16.7625C3.36895 17.7313 4.1627 18.525 5.13145 18.525H12.1621C11.4596 17.7494 11.0277 16.7244 11.0277 15.5981C11.0277 13.1881 12.9883 11.2275 15.3983 11.2275C16.0508 11.2275 16.6683 11.375 17.2252 11.6331V4.93125C17.2252 3.9625 16.4314 3.16875 15.4627 3.16875ZM4.49395 6.94812V6.6375C4.49395 6.55375 4.5302 6.46812 4.58582 6.40938L6.5977 4.39125C6.66082 4.32875 6.74395 4.29375 6.83145 4.29375H7.14645V6.315C7.14645 6.66375 6.86207 6.94812 6.51332 6.94812H4.49395ZM10.2033 13.9844H7.19082C6.8802 13.9844 6.62832 13.7325 6.62832 13.4219C6.62832 13.1113 6.8802 12.8594 7.19082 12.8594H10.2033C10.5139 12.8594 10.7658 13.1113 10.7658 13.4219C10.7658 13.7325 10.5146 13.9844 10.2033 13.9844ZM12.4564 11.375H7.19395C6.88332 11.375 6.63144 11.1231 6.63144 10.8125C6.63144 10.5019 6.88332 10.25 7.19395 10.25H12.4564C12.7671 10.25 13.0189 10.5019 13.0189 10.8125C13.0189 11.1231 12.7671 11.375 12.4564 11.375ZM13.8971 3.16875H6.83145C6.44332 3.16875 6.0777 3.32063 5.80207 3.59687L3.7827 5.6225C3.51582 5.89937 3.36895 6.26 3.36895 6.6375V15.1994H2.92832C2.57832 15.1994 2.29332 14.9144 2.29332 14.5644V2.72875C2.29332 2.385 2.58395 2.09375 2.92832 2.09375H13.2627C13.6127 2.09375 13.8971 2.37875 13.8971 2.72875V3.16875Z" fill="black"/>
+<path d="M15.3985 12.165C13.5022 12.165 11.9653 13.7019 11.9653 15.5982C11.9653 17.4944 13.5022 19.0313 15.3985 19.0313C17.2947 19.0313 18.8316 17.4944 18.8316 15.5982C18.8316 13.7019 17.2947 12.165 15.3985 12.165ZM16.9185 15.4513L15.2422 16.8019C15.1416 16.8832 15.0172 16.9263 14.8897 16.9263C14.8685 16.9263 14.8472 16.925 14.826 16.9225C14.6766 16.9057 14.5397 16.8294 14.4472 16.7107L13.7885 15.8707C13.5966 15.6263 13.6397 15.2725 13.8841 15.0807C14.1285 14.8894 14.4822 14.9325 14.6741 15.1763L14.981 15.5675L16.2135 14.575C16.4553 14.38 16.8097 14.4188 17.0041 14.66C17.1985 14.9025 17.1603 15.2569 16.9185 15.4513Z" fill="black"/>
+</svg>
diff --git a/horilla_theme/static/horilla_theme/assets/icons/right-arrow.svg b/horilla_theme/static/horilla_theme/assets/icons/right-arrow.svg
new file mode 100644
index 000000000..46a8d36c1
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/icons/right-arrow.svg
@@ -0,0 +1,3 @@
+<svg width="6" height="10" viewBox="0 0 6 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 9L5 5L1 1" stroke="#1E1E1E" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/horilla_theme/static/horilla_theme/assets/icons/right1.svg b/horilla_theme/static/horilla_theme/assets/icons/right1.svg
new file mode 100644
index 000000000..4c642d225
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/icons/right1.svg
@@ -0,0 +1,85 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 60 60">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #fe8298;
+      }
+
+      .cls-2 {
+        fill: #fe8297;
+      }
+
+      .cls-3 {
+        fill: #fe92a5;
+      }
+
+      .cls-4 {
+        fill: #fe3557;
+      }
+
+      .cls-5 {
+        fill: #fe4d6b;
+      }
+
+      .cls-6 {
+        fill: #fff;
+      }
+
+      .cls-7 {
+        fill: #fe2f52;
+      }
+
+      .cls-8 {
+        fill: #fe9aab;
+      }
+
+      .cls-9 {
+        fill: #fe7189;
+      }
+
+      .cls-10 {
+        fill: #fe9eaf;
+      }
+
+      .cls-11 {
+        fill: #fe9eae;
+      }
+
+      .cls-12 {
+        fill: #fe2147;
+      }
+
+      .cls-13 {
+        fill: #fe8da0;
+      }
+    </style>
+  </defs>
+  <!-- Generator: Adobe Illustrator 28.6.0, SVG Export Plug-In . SVG Version: 1.2.0 Build 709)  -->
+  <g>
+    <g id="Layer_1">
+      <circle class="cls-6" cx="30" cy="30" r="30"/>
+      <g>
+        <g>
+          <path class="cls-12" d="M28.9,51.5h-.8c-.6-.1-1.1,0-1.7-.1-1.4-.1-2.7-.5-3.9-1-2.2-.8-4.3-1.9-6.1-3.5-2.3-1.9-4.1-4-5.5-6.6-1.1-2.1-1.9-4.3-2.2-6.6-.2-1.7-.2-3.4-.1-5.1,0-1.3.1-2.6.5-3.9.8-3.2,2.3-6,4.4-8.6,1.9-2.2,4.1-4,6.8-5.4,1.7-.9,3.5-1.5,5.3-1.9.8-.2,1.6-.2,2.4-.2,0,0,.2,0,.3,0h.3c0,0,.1,0,.2,0,0,0,.1,0,.2,0h.3c.2,0,.4,0,.6,0h1.4c0,0,.1,0,.2,0,0,0,.1,0,.2,0h.3c.6,0,1.2,0,1.7.1,1,0,1.9.3,2.8.6,3,.9,5.6,2.4,8,4.4,2.5,2.2,4.4,4.8,5.7,7.9.5,1.3,1,2.6,1.3,3.9.2.8.2,1.7.2,2.5,0,0,0,.2,0,.3v.3c0,0,0,.2,0,.3,0,0,0,.2,0,.3v.3c0,.2,0,.3,0,.5v.3c0,.2,0,.3,0,.5v.5c0,0,0,.2,0,.3v.4c-.1.6,0,1.1-.1,1.7-.2,1.6-.6,3.1-1.2,4.6-.8,2-1.9,3.8-3.2,5.5-1.8,2.2-4,4.1-6.5,5.4-1.8,1-3.8,1.7-5.8,2.2-.8.2-1.7.2-2.5.2,0,0-.2,0-.2,0h-.3c0,0-.1,0-.2,0,0,0-.2,0-.2,0h-.4c-.1,0-.3,0-.4,0h-.3c-.1,0-.3,0-.4,0-.2,0-.3,0-.5,0Z"/>
+          <path class="cls-4" d="M29.8,8.5c-.2.1-.4.1-.6,0h.6Z"/>
+          <path class="cls-7" d="M51.5,29.8c-.1-.2-.1-.3,0-.5v.5Z"/>
+          <path class="cls-7" d="M51.5,30.7c-.1-.2-.1-.3,0-.5v.5Z"/>
+          <path class="cls-5" d="M28.9,51.5c.1-.1.3,0,.5,0,0,0,0,0,0,0h-.5Z"/>
+          <path class="cls-7" d="M29.4,51.5s0,0,0,0c.1,0,.3,0,.4,0h-.4Z"/>
+          <path class="cls-7" d="M30.2,51.5c.1-.1.3-.1.4,0h-.4Z"/>
+          <path class="cls-8" d="M51.4,28.7c0,0,0-.2,0-.2v.3c0,0,0,0,0,0Z"/>
+          <path class="cls-9" d="M51.4,28.7s0,0,0,0v.3c0,0,0-.2,0-.3Z"/>
+          <path class="cls-13" d="M51.5,31.4c-.1,0,0-.2,0-.3v.3Z"/>
+          <path class="cls-9" d="M31,51.5c0,0,.2,0,.3,0,0,0,0,0,0,0h-.3Z"/>
+          <path class="cls-11" d="M28.7,8.6c0,0-.1,0-.2,0h.2c0,0,0,0,0,0Z"/>
+          <path class="cls-2" d="M28.7,8.6s0,0,0,0h.2c0,0-.1,0-.2,0Z"/>
+          <path class="cls-1" d="M31.4,8.6c0,0-.1,0-.2,0h.2c0,0,0,0,0,0Z"/>
+          <path class="cls-10" d="M31.4,8.6s0,0,0,0h.2c0,0,0,0-.2,0Z"/>
+          <path class="cls-3" d="M31.3,51.5s0,0,0,0c0,0,.1,0,.2,0h-.2Z"/>
+        </g>
+        <path class="cls-6" d="M24,26.6c2.2,0,4.4,0,6.6,0,.7,0,1-.2,1-1,0-1.2,0-2.3,0-3.5,0,0,0-.2,0-.3,0-.3.1-.5.4-.7.3-.1.5,0,.7.1.7.5,1.3,1,2,1.5,2.8,2.1,5.6,4.3,8.5,6.4.2.2.5.4.4.7,0,.2-.2.5-.4.6-2.1,1.6-4.2,3.2-6.3,4.8-1.3,1-2.7,2-4,3,0,0-.1.1-.2.1-.4.3-.9,0-1-.5,0-.8,0-1.5,0-2.3,0-.5,0-1.1,0-1.6,0-.7-.3-.9-.9-.9-4.4,0-8.8,0-13.2,0-.1,0-.2,0-.3,0-.4,0-.7-.3-.7-.7,0-1.8,0-3.6,0-5.4,0-.5.3-.7.8-.7,2.3,0,4.5,0,6.8,0Z"/>
+      </g>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/horilla_theme/static/horilla_theme/assets/icons/sale.svg b/horilla_theme/static/horilla_theme/assets/icons/sale.svg
new file mode 100644
index 000000000..4dfb8eb94
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/icons/sale.svg
@@ -0,0 +1,10 @@
+<svg width="24" height="23" viewBox="0 0 24 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_49_22689)">
+<path d="M12.36 10.0944C9.636 9.34056 8.76 8.56111 8.76 7.34722C8.76 5.95444 9.972 4.98333 12 4.98333C13.704 4.98333 14.556 5.67333 14.868 6.77222C15.012 7.28333 15.408 7.66667 15.912 7.66667H16.272C17.064 7.66667 17.628 6.83611 17.352 6.04389C16.848 4.53611 15.672 3.28389 13.8 2.79833V1.91667C13.8 0.856111 12.996 0 12 0C11.004 0 10.2 0.856111 10.2 1.91667V2.76C7.872 3.29667 6 4.90667 6 7.37278C6 10.3244 8.292 11.7939 11.64 12.65C14.64 13.4167 15.24 14.5411 15.24 15.7294C15.24 16.6111 14.652 18.0167 12 18.0167C10.02 18.0167 9 17.2628 8.604 16.1894C8.424 15.6911 8.016 15.3333 7.524 15.3333H7.188C6.384 15.3333 5.82 16.2022 6.12 16.9944C6.804 18.7706 8.4 19.8183 10.2 20.2272V21.0833C10.2 22.1439 11.004 23 12 23C12.996 23 13.8 22.1439 13.8 21.0833V20.2528C16.14 19.78 18 18.3361 18 15.7167C18 12.0878 15.084 10.8483 12.36 10.0944Z" fill="#ED4F9D"/>
+</g>
+<defs>
+<clipPath id="clip0_49_22689">
+<rect width="24" height="23" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/horilla_theme/static/horilla_theme/assets/icons/sales.svg b/horilla_theme/static/horilla_theme/assets/icons/sales.svg
new file mode 100644
index 000000000..432ea6125
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/icons/sales.svg
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 20 20">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #191919;
+      }
+    </style>
+  </defs>
+  <!-- Generator: Adobe Illustrator 28.6.0, SVG Export Plug-In . SVG Version: 1.2.0 Build 709)  -->
+  <g>
+    <g id="Layer_1">
+      <g>
+        <path class="cls-1" d="M20,9.4h-9.4V0c.4,0,.8,0,1.1,0,0,0,0,0,.2,0,1.5.1,2.9.6,4.2,1.5,2,1.4,3.3,3.3,3.8,5.8,0,.3.1.7.2,1v1.1Z"/>
+        <path class="cls-1" d="M17.6,10.6c.2,3.7-1.8,7.1-5.1,8.6-3.3,1.5-7,.8-9.5-1.4,0,0,0-.1.1-.2,2.3-2.3,4.6-4.6,6.9-6.9.1-.1.2-.1.4-.1,2.3,0,4.6,0,6.9,0h.2Z"/>
+        <path class="cls-1" d="M8.6,10.6c-2.1,2.1-4.2,4.2-6.3,6.3-2.8-3-3.3-8.4.6-12.1,1.9,1.9,3.8,3.9,5.8,5.8Z"/>
+        <path class="cls-1" d="M9.4,2.4v7.3c-1.9-1.9-3.8-3.8-5.6-5.6,1.5-1.1,3.5-1.7,5.6-1.6Z"/>
+      </g>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/horilla_theme/static/horilla_theme/assets/icons/save.svg b/horilla_theme/static/horilla_theme/assets/icons/save.svg
new file mode 100644
index 000000000..0d99d12cf
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/icons/save.svg
@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 16V10H14V16H16V4.828L13.172 2H2V16H4ZM1 0H14L18 4V17C18 17.2652 17.8946 17.5196 17.7071 17.7071C17.5196 17.8946 17.2652 18 17 18H1C0.734784 18 0.48043 17.8946 0.292893 17.7071C0.105357 17.5196 0 17.2652 0 17V1C0 0.734784 0.105357 0.48043 0.292893 0.292893C0.48043 0.105357 0.734784 0 1 0ZM6 12V16H12V12H6Z" fill="black"/>
+</svg>
diff --git a/horilla_theme/static/horilla_theme/assets/icons/search.svg b/horilla_theme/static/horilla_theme/assets/icons/search.svg
new file mode 100644
index 000000000..d5a01a223
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/icons/search.svg
@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.7142 13.7144L11.4285 11.4287" stroke="#171A1F" stroke-width="1.37143" stroke-miterlimit="10" stroke-linecap="square"/>
+<path d="M6.85707 11.4285C9.3818 11.4285 11.4285 9.3818 11.4285 6.85707C11.4285 4.33234 9.3818 2.28564 6.85707 2.28564C4.33234 2.28564 2.28564 4.33234 2.28564 6.85707C2.28564 9.3818 4.33234 11.4285 6.85707 11.4285Z" stroke="#171A1F" stroke-width="1.37143" stroke-miterlimit="10" stroke-linecap="square"/>
+<path d="M4.57153 6.857C4.57153 6.25079 4.81235 5.66941 5.241 5.24076C5.66966 4.8121 6.25104 4.57129 6.85725 4.57129" stroke="#171A1F" stroke-width="1.37143" stroke-miterlimit="10"/>
+</svg>
diff --git a/horilla_theme/static/horilla_theme/assets/icons/share.svg b/horilla_theme/static/horilla_theme/assets/icons/share.svg
new file mode 100644
index 000000000..51991bd88
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/icons/share.svg
@@ -0,0 +1,3 @@
+<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.875 11.375L17.125 7.125M8.875 14.625L17.125 18.875M1.75 13C1.75 13.9946 2.14509 14.9484 2.84835 15.6517C3.55161 16.3549 4.50544 16.75 5.5 16.75C6.49456 16.75 7.44839 16.3549 8.15165 15.6517C8.85491 14.9484 9.25 13.9946 9.25 13C9.25 12.0054 8.85491 11.0516 8.15165 10.3483C7.44839 9.64509 6.49456 9.25 5.5 9.25C4.50544 9.25 3.55161 9.64509 2.84835 10.3483C2.14509 11.0516 1.75 12.0054 1.75 13ZM16.75 5.5C16.75 6.49456 17.1451 7.44839 17.8483 8.15165C18.5516 8.85491 19.5054 9.25 20.5 9.25C21.4946 9.25 22.4484 8.85491 23.1517 8.15165C23.8549 7.44839 24.25 6.49456 24.25 5.5C24.25 4.50544 23.8549 3.55161 23.1517 2.84835C22.4484 2.14509 21.4946 1.75 20.5 1.75C19.5054 1.75 18.5516 2.14509 17.8483 2.84835C17.1451 3.55161 16.75 4.50544 16.75 5.5ZM16.75 20.5C16.75 21.4946 17.1451 22.4484 17.8483 23.1517C18.5516 23.8549 19.5054 24.25 20.5 24.25C21.4946 24.25 22.4484 23.8549 23.1517 23.1517C23.8549 22.4484 24.25 21.4946 24.25 20.5C24.25 19.5054 23.8549 18.5516 23.1517 17.8483C22.4484 17.1451 21.4946 16.75 20.5 16.75C19.5054 16.75 18.5516 17.1451 17.8483 17.8483C17.1451 18.5516 16.75 19.5054 16.75 20.5Z" stroke="#AEAEB2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/horilla_theme/static/horilla_theme/assets/icons/share1.svg b/horilla_theme/static/horilla_theme/assets/icons/share1.svg
new file mode 100644
index 000000000..927a3af4c
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/icons/share1.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 60 60">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #f8595f;
+      }
+    </style>
+  </defs>
+  <!-- Generator: Adobe Illustrator 28.6.0, SVG Export Plug-In . SVG Version: 1.2.0 Build 709)  -->
+  <g>
+    <g id="Layer_1">
+      <path class="cls-1" d="M0,31.9c0-1.2,0-2.5,0-3.7,0-.2,0-.4.1-.6.2-1.2.3-2.5.5-3.7C4.1,7.7,19.6-2.6,35.8.6c13.5,2.6,23.6,14.4,24.1,28.1.3,8-2.1,15-7.4,21-4.6,5.3-10.5,8.6-17.4,9.8-1.1.2-2.2.3-3.3.5h-3.8c-.1,0-.3,0-.4,0-5.2-.4-10-2-14.3-4.9C6.4,50.2,2,43.6.5,35.2.3,34.1.2,33,0,31.9ZM33.8,37.4c-1.9-1.1-3.8-2.2-5.7-3.3-1.1-.7-2.3-1.3-3.4-2-.1,0-.2-.4-.2-.6,0-1,0-2,0-3,0-.4,0-.5.4-.7,2.8-1.6,5.6-3.2,8.4-4.9.4-.2.6-.2.9,0,2.2,1.8,4.7,2.2,7.3,1.1,2.6-1.1,4.1-3.2,4.3-6,.2-2.9-1.1-5.2-3.7-6.6-2.5-1.4-5.1-1.2-7.4.5-2.4,1.7-3.3,4.2-2.7,7.1,0,.4,0,.6-.3.8-2.8,1.6-5.6,3.3-8.4,4.9-.4.2-.6.2-.8-.1-1.2-1-2.5-1.6-4.1-1.7-3.2-.2-6.2,1.7-7.2,4.8-1,3,.1,6.3,2.8,8,2.7,1.8,6.1,1.6,8.6-.6.3-.2.5-.3.8,0,2.8,1.7,5.7,3.3,8.5,5,.3.2.4.3.3.7-1.1,5.2,3.6,9.6,8.7,8.2,3.5-.9,5.8-4.6,5.1-8.2-.7-3.7-4.3-6.1-8-5.6-1.5.2-2.8.9-3.9,2Z"/>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/horilla_theme/static/horilla_theme/assets/icons/sign.svg b/horilla_theme/static/horilla_theme/assets/icons/sign.svg
new file mode 100644
index 000000000..3653ac66c
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/icons/sign.svg
@@ -0,0 +1,3 @@
+<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.5 16.79V14.9567H14.9167V2.12337H8.5V0.290039H14.9167C15.4208 0.290039 15.8526 0.469706 16.2119 0.829039C16.5713 1.18837 16.7506 1.61982 16.75 2.12337V14.9567C16.75 15.4609 16.5706 15.8926 16.2119 16.252C15.8532 16.6113 15.4214 16.7907 14.9167 16.79H8.5ZM6.66667 13.1234L5.40625 11.7942L7.74375 9.45671H0.25V7.62337H7.74375L5.40625 5.28587L6.66667 3.95671L11.25 8.54004L6.66667 13.1234Z" fill="white"/>
+</svg>
diff --git a/horilla_theme/static/horilla_theme/assets/icons/spinner.svg b/horilla_theme/static/horilla_theme/assets/icons/spinner.svg
new file mode 100644
index 000000000..94457f1e2
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/icons/spinner.svg
@@ -0,0 +1,57 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" width="200" height="200" style="shape-rendering: auto; display: block; background: rgba(255, 255, 255, 0);" xmlns:xlink="http://www.w3.org/1999/xlink"><g><g transform="translate(80,50)">
+<g transform="rotate(0)">
+<circle fill-opacity="1" fill="#ffffff" r="6" cy="0" cx="0">
+  <animateTransform repeatCount="indefinite" dur="1s" keyTimes="0;1" values="1.5 1.5;1 1" begin="-0.875s" type="scale" attributeName="transform"></animateTransform>
+  <animate begin="-0.875s" values="1;0" repeatCount="indefinite" dur="1s" keyTimes="0;1" attributeName="fill-opacity"></animate>
+</circle>
+</g>
+</g><g transform="translate(71.21320343559643,71.21320343559643)">
+<g transform="rotate(45)">
+<circle fill-opacity="0.875" fill="#ffffff" r="6" cy="0" cx="0">
+  <animateTransform repeatCount="indefinite" dur="1s" keyTimes="0;1" values="1.5 1.5;1 1" begin="-0.75s" type="scale" attributeName="transform"></animateTransform>
+  <animate begin="-0.75s" values="1;0" repeatCount="indefinite" dur="1s" keyTimes="0;1" attributeName="fill-opacity"></animate>
+</circle>
+</g>
+</g><g transform="translate(50,80)">
+<g transform="rotate(90)">
+<circle fill-opacity="0.75" fill="#ffffff" r="6" cy="0" cx="0">
+  <animateTransform repeatCount="indefinite" dur="1s" keyTimes="0;1" values="1.5 1.5;1 1" begin="-0.625s" type="scale" attributeName="transform"></animateTransform>
+  <animate begin="-0.625s" values="1;0" repeatCount="indefinite" dur="1s" keyTimes="0;1" attributeName="fill-opacity"></animate>
+</circle>
+</g>
+</g><g transform="translate(28.786796564403577,71.21320343559643)">
+<g transform="rotate(135)">
+<circle fill-opacity="0.625" fill="#ffffff" r="6" cy="0" cx="0">
+  <animateTransform repeatCount="indefinite" dur="1s" keyTimes="0;1" values="1.5 1.5;1 1" begin="-0.5s" type="scale" attributeName="transform"></animateTransform>
+  <animate begin="-0.5s" values="1;0" repeatCount="indefinite" dur="1s" keyTimes="0;1" attributeName="fill-opacity"></animate>
+</circle>
+</g>
+</g><g transform="translate(20,50.00000000000001)">
+<g transform="rotate(180)">
+<circle fill-opacity="0.5" fill="#ffffff" r="6" cy="0" cx="0">
+  <animateTransform repeatCount="indefinite" dur="1s" keyTimes="0;1" values="1.5 1.5;1 1" begin="-0.375s" type="scale" attributeName="transform"></animateTransform>
+  <animate begin="-0.375s" values="1;0" repeatCount="indefinite" dur="1s" keyTimes="0;1" attributeName="fill-opacity"></animate>
+</circle>
+</g>
+</g><g transform="translate(28.78679656440357,28.786796564403577)">
+<g transform="rotate(225)">
+<circle fill-opacity="0.375" fill="#ffffff" r="6" cy="0" cx="0">
+  <animateTransform repeatCount="indefinite" dur="1s" keyTimes="0;1" values="1.5 1.5;1 1" begin="-0.25s" type="scale" attributeName="transform"></animateTransform>
+  <animate begin="-0.25s" values="1;0" repeatCount="indefinite" dur="1s" keyTimes="0;1" attributeName="fill-opacity"></animate>
+</circle>
+</g>
+</g><g transform="translate(49.99999999999999,20)">
+<g transform="rotate(270)">
+<circle fill-opacity="0.25" fill="#ffffff" r="6" cy="0" cx="0">
+  <animateTransform repeatCount="indefinite" dur="1s" keyTimes="0;1" values="1.5 1.5;1 1" begin="-0.125s" type="scale" attributeName="transform"></animateTransform>
+  <animate begin="-0.125s" values="1;0" repeatCount="indefinite" dur="1s" keyTimes="0;1" attributeName="fill-opacity"></animate>
+</circle>
+</g>
+</g><g transform="translate(71.21320343559643,28.78679656440357)">
+<g transform="rotate(315)">
+<circle fill-opacity="0.125" fill="#ffffff" r="6" cy="0" cx="0">
+  <animateTransform repeatCount="indefinite" dur="1s" keyTimes="0;1" values="1.5 1.5;1 1" begin="0s" type="scale" attributeName="transform"></animateTransform>
+  <animate begin="0s" values="1;0" repeatCount="indefinite" dur="1s" keyTimes="0;1" attributeName="fill-opacity"></animate>
+</circle>
+</g>
+</g><g></g></g><!-- [ldio] generated by https://loading.io --></svg>
\ No newline at end of file
diff --git a/horilla_theme/static/horilla_theme/assets/icons/target.svg b/horilla_theme/static/horilla_theme/assets/icons/target.svg
new file mode 100644
index 000000000..1a3641dc3
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/icons/target.svg
@@ -0,0 +1,3 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 0L12.001 3.06201C15.6192 3.51365 18.4869 6.38163 18.9381 10H22V12L18.938 12.001C18.4864 15.6189 15.6189 18.4864 12.001 18.938L12 22H10V18.9381C6.38163 18.4869 3.51365 15.6192 3.06201 12.001L0 12V10H3.06189C3.51312 6.38129 6.38129 3.51312 10 3.06189V0H12ZM11 5C7.68629 5 5 7.68629 5 11C5 14.3137 7.68629 17 11 17C14.3137 17 17 14.3137 17 11C17 7.68629 14.3137 5 11 5ZM11 9C12.1046 9 13 9.8954 13 11C13 12.1046 12.1046 13 11 13C9.8954 13 9 12.1046 9 11C9 9.8954 9.8954 9 11 9Z" fill="black"/>
+</svg>
diff --git a/horilla_theme/static/horilla_theme/assets/icons/task.svg b/horilla_theme/static/horilla_theme/assets/icons/task.svg
new file mode 100644
index 000000000..1374a3987
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/icons/task.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 60 60">
+  <!-- Generator: Adobe Illustrator 28.6.0, SVG Export Plug-In . SVG Version: 1.2.0 Build 709)  -->
+  <g>
+    <g id="Layer_1">
+      <g>
+        <path d="M21.1,2.7c5.9,0,11.8,0,17.7,0,1.3.4,1.8,1.3,1.7,2.7,0,.5,0,1,0,1.5.2,0,.4,0,.6,0,1.5,0,3,0,4.4,0,3.2,0,5.5,2.3,5.5,5.5,0,13.2,0,26.3,0,39.5,0,3.2-2.4,5.5-5.6,5.5-10.3,0-20.7,0-31,0-3.2,0-5.6-2.3-5.6-5.6,0-13.1,0-26.2,0-39.3,0-3.3,2.3-5.6,5.6-5.6,1.4,0,2.9,0,4.3,0,.2,0,.4,0,.6,0,0-.7,0-1.3,0-2,0-.5.3-1.1.5-1.5.2-.3.7-.5,1.1-.7ZM19.5,11.1c-1.7,0-3.3,0-4.8,0-1.1,0-1.4.4-1.4,1.5,0,13,0,26,0,39,0,1.1.4,1.4,1.4,1.4,10.2,0,20.5,0,30.7,0,1,0,1.4-.4,1.4-1.4,0-13,0-26,0-39.1,0-1-.4-1.4-1.4-1.4-1.5,0-2.9,0-4.4,0-.2,0-.3,0-.5,0,0,.6,0,1.2,0,1.8,0,1.6-.9,2.4-2.4,2.4-5.4,0-10.8,0-16.3,0-1.5,0-2.4-.9-2.4-2.4,0-.6,0-1.2,0-1.8ZM36.2,7h-12.4v4.1h12.4v-4.1Z"/>
+        <path d="M27.2,37.4c.2-.3.3-.4.4-.6,3-3,6-6,9-9.1.7-.7,1.4-1,2.4-.7,1.4.5,1.9,2.2,1,3.3-.1.2-.3.3-.4.5-3.5,3.5-7.1,7.1-10.6,10.6-1.2,1.2-2.4,1.2-3.6,0-1.7-1.7-3.4-3.4-5.1-5.1-.8-.8-1-1.7-.6-2.5.6-1.4,2.4-1.7,3.5-.6,1.2,1.2,2.4,2.4,3.5,3.5.1.1.3.3.5.6Z"/>
+      </g>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/horilla_theme/static/horilla_theme/assets/icons/tasks.svg b/horilla_theme/static/horilla_theme/assets/icons/tasks.svg
new file mode 100644
index 000000000..b9d5d936a
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/icons/tasks.svg
@@ -0,0 +1,9 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect width="24" height="24" fill="url(#pattern0_399_63)"/>
+<defs>
+<pattern id="pattern0_399_63" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_399_63" transform="scale(0.0111111)"/>
+</pattern>
+<image id="image0_399_63" width="90" height="90" preserveAspectRatio="none" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoAAABaCAYAAAA4qEECAAAACXBIWXMAAAsTAAALEwEAmpwYAAADJUlEQVR4nO2czU4UQRSFjyy6deGecSX6EsJC0TdSeQdcGBdsFFY8AwviL28h+gDiAjFRxOCuTCU1CelMT1c1t7pO3aqT3ISQgfnOF2j6ZoYC8shjAHsAvgC4cGM/3gWwmRpOQ+4D+ATADMwHAGupYXPNBoAzD8nz+QFgPTV0brkL4DRA8nzO3G9BjWc+jpA8nyPfJyk9T64heT71D6RH9nrkXQJ4CmAVwAzAM/e5RY994/NEpedrjzwruZvnPY89TsCdXf70yLM/yd2s9jz2HAWku1wYobGXi25mgt8/myXId7kwI8dek7vZivh8lEtQ6HJhRsylkz1zY6/P/yI/J9USNHa5MJkMzRJ0neXCZDJHGpYLk8lssi8XoZESExrqJShkuWAXTb0EhSwXuYimXIKkS9qcCEj+Br5edEAvBERvE/aiA2qc7DE/2SfuaxvCXrqAtPaiA9Laiw5Iay86IK296IC09qID0tqLDkhrLzogrb3ogLT2ogPS2osOSGsvOiCtveiAtPaiA9Laiw5Iay86oCtpAbwE8BPAX/dWr1vItBcd0BXJhwu4rOwse9EBoV9yyAusdL3YgNolku38yrQXFVA7INnOqwx7UQG1HpIP3eNy6kUF1AA4GJD8FsDNzHpRATURJDP0ig60AuBGostFEaJvA9h37+S0y8XOgKCYkiV7iUUKaD9AVGzJkr3EIgG0suQ9yV1hU0iW6kUp+sJD3FSSpXqJRgpox0PgVJIle4lFCqj1EDmVZMlelECNxz2x1H3ylL0ogZpA2TEkFyE6RHYsycWI9pEdU3JRopfJji25ONFwdxL2H3++u9kWvrvoS3GiU4WuFx2Q1l50QFp70QFp7UUHpLUXHZDWXnRAWnvRAWntRQektRcdkNZedEBae9EBae1FB6S1Fx2Q1l50QFp7nUc4ji117vR0+s14wOCiI4hzyRbjAYO7HkcQ55Kho5Jfpz793BQyD5E47wkkmMhjXxBOnhIO6r4Hkqy7Y9qNsjkF8ABkWVN2GXnnfltp88gdan285NhjQziW9bO7u0j+h6+mpqampqampqampgZT5T8JTPCn7cOsUAAAAABJRU5ErkJggg=="/>
+</defs>
+</svg>
diff --git a/horilla_theme/static/horilla_theme/assets/icons/tasks1.svg b/horilla_theme/static/horilla_theme/assets/icons/tasks1.svg
new file mode 100644
index 000000000..f9734cc94
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/icons/tasks1.svg
@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 60 60">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #0794fd;
+      }
+
+      .cls-2 {
+        fill: #fefefe;
+      }
+
+      .cls-3 {
+        fill: #1d9dfd;
+      }
+    </style>
+  </defs>
+  <!-- Generator: Adobe Illustrator 28.6.0, SVG Export Plug-In . SVG Version: 1.2.0 Build 709)  -->
+  <g>
+    <g id="Layer_1">
+      <g>
+        <path class="cls-1" d="M3.7,32.4c-.4-6.7,1-13,5.2-18.3C15.7,5.5,24.6,2,35.3,4.3c10.9,2.3,17.9,9.4,20.4,20.2,3.4,14.9-6.3,28.8-21.3,31.5-.3,0-.7-.1-.8.3h-2c-1-.2-2.1-.2-3.1,0h-1.7c-.7-.6-1.7-.5-2.5-.7-5.1-1.2-9.5-3.8-13.2-7.5-2.2-1.3-3.2-3.6-4.4-5.6-1.4-2.4-2.2-5.1-2.8-7.8-.2-.8.3-1.6,0-2.3Z"/>
+        <path class="cls-3" d="M28.4,56.4c1-.5,2.1-.5,3.1,0h-3.1Z"/>
+        <path class="cls-2" d="M27,41.5c-1.2,0-2.3-.5-3.2-1.4-2.8-2.8-5.6-5.7-8.4-8.5-.5-.5-.5-.8,0-1.3,1.9-1.8,3.8-3.7,5.7-5.6.6-.6.9-.4,1.4,0,1.2,1.3,2.6,2.5,3.7,3.8.8.9,1.2.7,1.9,0,2.9-3.1,6-6.1,8.9-9.2.7-.7,1.1-.9,1.9,0,1.7,1.8,3.6,3.6,5.4,5.3.6.5.6.8,0,1.4-4.5,4.6-9,9.2-13.4,13.8-1.1,1.1-2.3,1.7-4,1.7Z"/>
+      </g>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/horilla_theme/static/horilla_theme/assets/icons/technical.svg b/horilla_theme/static/horilla_theme/assets/icons/technical.svg
new file mode 100644
index 000000000..ec3eb85c9
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/icons/technical.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 20 20">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #191919;
+      }
+    </style>
+  </defs>
+  <!-- Generator: Adobe Illustrator 28.6.0, SVG Export Plug-In . SVG Version: 1.2.0 Build 709)  -->
+  <g>
+    <g id="Layer_1">
+      <path class="cls-1" d="M18.6,10.4c0-.8,0-1.5,0-2.3-.3,0-.6,0-.9,0-.6,0-1-.3-1.2-.8-.9-2.4-2.6-3.9-5-4.4-3.2-.7-6.6,1.2-7.7,4.3,0,0,0,.2,0,.2-.2.4-.5.7-1,.7-.3,0-.7,0-1,0,0,.8,0,1.6,0,2.4,0,0,.1,0,.1-.1.9-1,2-1.4,3.3-1.4.6,0,1.1.5,1.1,1.2,0,1.5,0,3.1,0,4.6,0,.4,0,.8,0,1.2,0,.8-.5,1.3-1.3,1.3-2,0-3.6-1.3-4-3.3,0-.2,0-.5,0-.8,0-1.4,0-2.8,0-4.2,0-2.9,1.3-5.2,3.5-7.1C5.4,1,6.9.4,8.6.1c4.2-.6,8.3,1.6,10,5.4.6,1.3.8,2.6.8,3.9,0,1.2,0,2.5,0,3.7,0,2.1-1.4,3.7-3.4,4.1-.3,0-.6,0-1,0-.1,0-.2,0-.2.2-.3,1-1.1,1.6-2.2,1.6,0,0,0,0,0,0-.3,0-.5,0-.6.3-.2.4-.6.6-1,.6-.3,0-.5,0-.8,0-.7,0-1.3-.6-1.3-1.3,0-.7.6-1.3,1.3-1.3.3,0,.5,0,.8,0,.5,0,.9.3,1.2.7,0,.1.1.2.2.2.2,0,.5,0,.7,0,.6-.1,1-.7,1-1.4,0-2.2,0-4.4,0-6.6,0-.2,0-.4.1-.6.2-.4.6-.6,1-.7,1.2,0,2.4.4,3.3,1.4,0,0,0,0,0,0Z"/>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/horilla_theme/static/horilla_theme/assets/icons/tick.svg b/horilla_theme/static/horilla_theme/assets/icons/tick.svg
new file mode 100644
index 000000000..b4191640c
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/icons/tick.svg
@@ -0,0 +1,3 @@
+<svg width="18" height="13" viewBox="0 0 18 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.99999 10.172L16.192 0.979004L17.607 2.393L6.99999 13L0.635986 6.636L2.04999 5.222L6.99999 10.172Z" fill="#9AD26F"/>
+</svg>
diff --git a/horilla_theme/static/horilla_theme/assets/icons/tri1-first.svg b/horilla_theme/static/horilla_theme/assets/icons/tri1-first.svg
new file mode 100644
index 000000000..03bb91f5f
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/icons/tri1-first.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 60 60">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #f0f0f0;
+      }
+    </style>
+  </defs>
+  <!-- Generator: Adobe Illustrator 28.6.0, SVG Export Plug-In . SVG Version: 1.2.0 Build 709)  -->
+  <g>
+    <g id="Layer_1">
+      <g id="Layer_1-2" data-name="Layer_1">
+        <g id="Layer_1-2">
+          <g id="Layer_1-2-2" data-name="Layer_1-2">
+            <path class="cls-1" d="M36.6,26.2L8.4,1.2C5.1-1.7,0,.6,0,4.9v50.1c0,4.4,5.1,6.7,8.4,3.8l28.2-25.1c2.3-2,2.3-5.5,0-7.5Z"/>
+          </g>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/horilla_theme/static/horilla_theme/assets/icons/tri1.svg b/horilla_theme/static/horilla_theme/assets/icons/tri1.svg
new file mode 100644
index 000000000..e244077d0
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/icons/tri1.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 60 60">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #def7db;
+      }
+    </style>
+  </defs>
+  <!-- Generator: Adobe Illustrator 28.6.0, SVG Export Plug-In . SVG Version: 1.2.0 Build 709)  -->
+  <g>
+    <g id="Layer_1">
+      <g id="Layer_1-2" data-name="Layer_1">
+        <g id="Layer_1-2">
+          <path class="cls-1" d="M36.6,26.2L8.4,1.2C5.1-1.7,0,.6,0,4.9v50.1c0,4.4,5.1,6.7,8.4,3.8l28.2-25.1c2.3-2,2.3-5.5,0-7.5Z"/>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/horilla_theme/static/horilla_theme/assets/icons/tri2-b.svg b/horilla_theme/static/horilla_theme/assets/icons/tri2-b.svg
new file mode 100644
index 000000000..3c5a8d4f9
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/icons/tri2-b.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 60 60">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #fff;
+      }
+
+      .cls-2 {
+        fill: #d3e3f9;
+      }
+    </style>
+  </defs>
+  <!-- Generator: Adobe Illustrator 28.6.0, SVG Export Plug-In . SVG Version: 1.2.0 Build 709)  -->
+  <g>
+    <g id="Layer_1">
+      <g id="Layer_1-2" data-name="Layer_1">
+        <g id="Layer_1-2">
+          <g id="Layer_1-2-2" data-name="Layer_1-2">
+            <rect class="cls-2" x="-25.7" y="-7.3" width="104.4" height="100"/>
+            <path class="cls-1" d="M34.9,26.2L5.5,1.2C2.1-1.7-3.3.6-3.3,4.9v50.1c0,4.4,5.3,6.7,8.8,3.8l29.4-25.1c2.4-2,2.4-5.5,0-7.5Z"/>
+          </g>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/horilla_theme/static/horilla_theme/assets/icons/tri2-g.svg b/horilla_theme/static/horilla_theme/assets/icons/tri2-g.svg
new file mode 100644
index 000000000..e6d0c5103
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/icons/tri2-g.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 60 60">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #fff;
+      }
+
+      .cls-2 {
+        fill: #ddf6da;
+      }
+    </style>
+  </defs>
+  <!-- Generator: Adobe Illustrator 28.6.0, SVG Export Plug-In . SVG Version: 1.2.0 Build 709)  -->
+  <g>
+    <g id="Layer_1">
+      <g id="Layer_1-2" data-name="Layer_1">
+        <g id="Layer_1-2">
+          <g id="Layer_1-2-2" data-name="Layer_1-2">
+            <rect class="cls-2" x="-25.7" y="-7.3" width="104.4" height="100"/>
+            <path class="cls-1" d="M34.9,26.2L5.5,1.2C2.1-1.7-3.3.6-3.3,4.9v50.1c0,4.4,5.3,6.7,8.8,3.8l29.4-25.1c2.4-2,2.4-5.5,0-7.5Z"/>
+          </g>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/horilla_theme/static/horilla_theme/assets/icons/tri2-p.svg b/horilla_theme/static/horilla_theme/assets/icons/tri2-p.svg
new file mode 100644
index 000000000..9330602e6
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/icons/tri2-p.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 60 60">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #f6cfe4;
+      }
+
+      .cls-2 {
+        fill: #fff;
+      }
+    </style>
+  </defs>
+  <!-- Generator: Adobe Illustrator 28.6.0, SVG Export Plug-In . SVG Version: 1.2.0 Build 709)  -->
+  <g>
+    <g id="Layer_1">
+      <g id="Layer_1-2" data-name="Layer_1">
+        <g id="Layer_1-2">
+          <g id="Layer_1-2-2" data-name="Layer_1-2">
+            <rect class="cls-1" x="-25.7" y="-7.3" width="104.4" height="100"/>
+            <path class="cls-2" d="M34.9,26.2L5.5,1.2C2.1-1.7-3.3.6-3.3,4.9v50.1c0,4.4,5.3,6.7,8.8,3.8l29.4-25.1c2.4-2,2.4-5.5,0-7.5Z"/>
+          </g>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/horilla_theme/static/horilla_theme/assets/icons/tri2.svg b/horilla_theme/static/horilla_theme/assets/icons/tri2.svg
new file mode 100644
index 000000000..9cf408e7e
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/icons/tri2.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 60 60">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #fff;
+      }
+
+      .cls-2 {
+        fill: #f0f0f0;
+      }
+    </style>
+  </defs>
+  <!-- Generator: Adobe Illustrator 28.6.0, SVG Export Plug-In . SVG Version: 1.2.0 Build 709)  -->
+  <g>
+    <g id="Layer_1">
+      <g id="Layer_1-2" data-name="Layer_1">
+        <rect class="cls-2" x="-21.5" y="-7.3" width="100" height="100"/>
+        <path class="cls-1" d="M36.6,26.2L8.4,1.2C5.1-1.7,0,.6,0,4.9v50.1c0,4.4,5.1,6.7,8.4,3.8l28.2-25.1c2.3-2,2.3-5.5,0-7.5Z"/>
+      </g>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/horilla_theme/static/horilla_theme/assets/icons/tri3-b.svg b/horilla_theme/static/horilla_theme/assets/icons/tri3-b.svg
new file mode 100644
index 000000000..1d8c69c60
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/icons/tri3-b.svg
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 60 60">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #fff;
+      }
+
+      .cls-2 {
+        fill: #d3e3f9;
+      }
+    </style>
+  </defs>
+  <!-- Generator: Adobe Illustrator 28.6.0, SVG Export Plug-In . SVG Version: 1.2.0 Build 709)  -->
+  <g>
+    <g id="Layer_1">
+      <g id="Layer_1-2" data-name="Layer_1">
+        <g id="Layer_1-2">
+          <rect class="cls-1" x="-26.7" y="-7.3" width="105.2" height="100"/>
+          <path class="cls-2" d="M34.4,26.2L4.7,1.2C1.3-1.7-4.1.6-4.1,4.9v50.1c0,4.4,5.4,6.7,8.8,3.8l29.7-25.1c2.4-2,2.4-5.5,0-7.5Z"/>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/horilla_theme/static/horilla_theme/assets/icons/tri3-g.svg b/horilla_theme/static/horilla_theme/assets/icons/tri3-g.svg
new file mode 100644
index 000000000..765092b23
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/icons/tri3-g.svg
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 60 60">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #fff;
+      }
+
+      .cls-2 {
+        fill: #ddf6da;
+      }
+    </style>
+  </defs>
+  <!-- Generator: Adobe Illustrator 28.6.0, SVG Export Plug-In . SVG Version: 1.2.0 Build 709)  -->
+  <g>
+    <g id="Layer_1">
+      <g id="Layer_1-2" data-name="Layer_1">
+        <g id="Layer_1-2">
+          <rect class="cls-1" x="-26.7" y="-7.3" width="105.2" height="100"/>
+          <path class="cls-2" d="M31.1,26.2L1.4,1.2C-2.1-1.7-7.4.6-7.4,4.9v50.1c0,4.4,5.4,6.7,8.8,3.8l29.7-25.1c2.4-2,2.4-5.5,0-7.5Z"/>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/horilla_theme/static/horilla_theme/assets/icons/tri3-p.svg b/horilla_theme/static/horilla_theme/assets/icons/tri3-p.svg
new file mode 100644
index 000000000..be8569e6a
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/icons/tri3-p.svg
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 60 60">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #f6cfe4;
+      }
+
+      .cls-2 {
+        fill: #fff;
+      }
+    </style>
+  </defs>
+  <!-- Generator: Adobe Illustrator 28.6.0, SVG Export Plug-In . SVG Version: 1.2.0 Build 709)  -->
+  <g>
+    <g id="Layer_1">
+      <g id="Layer_1-2" data-name="Layer_1">
+        <g id="Layer_1-2">
+          <rect class="cls-2" x="-26.7" y="-7.3" width="105.2" height="100"/>
+          <path class="cls-1" d="M34.4,26.2L4.7,1.2C1.3-1.7-4.1.6-4.1,4.9v50.1c0,4.4,5.4,6.7,8.8,3.8l29.7-25.1c2.4-2,2.4-5.5,0-7.5Z"/>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/horilla_theme/static/horilla_theme/assets/icons/tri3.svg b/horilla_theme/static/horilla_theme/assets/icons/tri3.svg
new file mode 100644
index 000000000..65347e703
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/icons/tri3.svg
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 60 60">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #fff;
+      }
+
+      .cls-2 {
+        fill: #f0f0f0;
+      }
+    </style>
+  </defs>
+  <!-- Generator: Adobe Illustrator 28.6.0, SVG Export Plug-In . SVG Version: 1.2.0 Build 709)  -->
+  <g>
+    <g id="Layer_1">
+      <g id="Layer_1-2" data-name="Layer_1">
+        <g id="Layer_1-2">
+          <rect class="cls-1" x="-26.7" y="-7.3" width="105.2" height="100"/>
+          <path class="cls-2" d="M31.1,26.2L1.4,1.2C-2.1-1.7-7.4.6-7.4,4.9v50.1c0,4.4,5.4,6.7,8.8,3.8l29.7-25.1c2.4-2,2.4-5.5,0-7.5Z"/>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/horilla_theme/static/horilla_theme/assets/icons/up-arrow.svg b/horilla_theme/static/horilla_theme/assets/icons/up-arrow.svg
new file mode 100644
index 000000000..796fdbc45
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/icons/up-arrow.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 60 60">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #34c759;
+      }
+    </style>
+  </defs>
+  <!-- Generator: Adobe Illustrator 28.6.0, SVG Export Plug-In . SVG Version: 1.2.0 Build 709)  -->
+  <g>
+    <g id="Layer_1">
+      <g>
+        <path class="cls-1" d="M60.1,30c0,16.6-13.5,30-30.1,30C13.4,60,0,46.5,0,29.9,0,13.4,13.5,0,30.1,0c16.5,0,29.9,13.5,29.9,30ZM56.1,30c0-14.3-11.6-25.9-26-26-14.4,0-26.1,11.5-26.1,25.9,0,14.3,11.6,26,26,26,14.3,0,26-11.6,26.1-26Z"/>
+        <path class="cls-1" d="M27.9,24.9c-.9.9-1.7,1.7-2.6,2.6-.6.6-1.3,1.3-1.9,1.9-.8.7-2,.7-2.8,0-.8-.8-.8-2,0-2.8,2.7-2.7,5.4-5.4,8.1-8,.8-.8,1.9-.8,2.7,0,.4.3.8.7,1.1,1.1,2.3,2.3,4.6,4.6,6.9,6.9.6.6.8,1.4.5,2.2-.3.8-.8,1.2-1.6,1.3-.7,0-1.3-.2-1.8-.7-1.3-1.3-2.6-2.6-3.9-3.9-.1-.1-.3-.3-.5-.5,0,.3,0,.5,0,.8,0,4.7,0,9.4,0,14.1,0,1.3-.8,2.2-1.9,2.3-1.2,0-2.1-.8-2.1-2,0-2.7,0-5.4,0-8,0-2.3,0-4.6,0-6.9,0,0,0,0-.1,0Z"/>
+      </g>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/horilla_theme/static/horilla_theme/assets/icons/user.png b/horilla_theme/static/horilla_theme/assets/icons/user.png
new file mode 100644
index 000000000..60010a06d
Binary files /dev/null and b/horilla_theme/static/horilla_theme/assets/icons/user.png differ
diff --git a/horilla_theme/static/horilla_theme/assets/icons/user1.png b/horilla_theme/static/horilla_theme/assets/icons/user1.png
new file mode 100644
index 000000000..2e3287d6e
Binary files /dev/null and b/horilla_theme/static/horilla_theme/assets/icons/user1.png differ
diff --git a/horilla_theme/static/horilla_theme/assets/icons/users.svg b/horilla_theme/static/horilla_theme/assets/icons/users.svg
new file mode 100644
index 000000000..19599aa3a
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/icons/users.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 60 60">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #e54f38;
+      }
+    </style>
+  </defs>
+  <!-- Generator: Adobe Illustrator 28.6.0, SVG Export Plug-In . SVG Version: 1.2.0 Build 709)  -->
+  <g>
+    <g id="Layer_1">
+      <path class="cls-1" d="M.8,45.9c.2-.7.3-1.3.5-2,1.9-6.2,5.7-10.6,11.7-13.2,0,0,.2,0,.3-.1-3.7-3-5.4-6.9-4.7-11.7.5-3.2,2-5.7,4.5-7.7,4.9-3.8,11.6-3.1,15.8,1.6,4.3,4.8,4.2,13.2-1.8,17.7,1.3.7,2.5,1.3,3.7,1.9,1-1.1,2-2.2,3.1-3.2,1.1-1,2.5-1.7,3.7-2.5-4.8-4.2-3.9-11.2,0-14.6,3.8-3.3,9.3-3.2,12.9.3,3.8,3.7,4.1,10.3-.5,14.4,1.7.7,3.1,1.7,4.5,2.9,2.6,2.5,4.2,5.5,4.8,9,.4,2.3-1.5,4.4-3.9,4.4-4.3,0-8.7,0-13,0-1.1,0-2.2,0-3.3,0,.2.9.4,1.8.6,2.7.4,2.7-1.6,5.2-4.3,5.2-10,0-20,0-30,0-2,0-3.7-1.4-4.3-3.3,0-.1,0-.3-.1-.4,0-.5,0-1,0-1.5ZM20.1,47.7c4.9,0,9.7,0,14.6,0,1.1,0,1.5-.5,1.3-1.6-.2-.8-.3-1.5-.6-2.3-2.5-7.5-10-12.1-17.8-10.9-6.6,1-12.1,6.3-13.4,12.9-.3,1.3.2,1.8,1.5,1.8,4.8,0,9.5,0,14.3,0ZM20.2,29.4c4.6,0,8.3-3.8,8.3-8.5,0-4.7-3.7-8.5-8.3-8.6-4.6,0-8.3,3.8-8.3,8.6,0,4.7,3.7,8.5,8.3,8.5ZM33.6,34.8c1.5,1.5,2.7,3.1,3.7,4.8,0,.1.4.2.6.2,5.7,0,11.4,0,17.2,0,.7,0,.8-.2.7-.8-1.3-6.1-6.5-10.3-12.7-9.9-4,.2-7.1,2.3-9.4,5.7ZM43.8,13.2c-3.3,0-6,2.8-6,6.2,0,3.4,2.7,6.2,6.1,6.2,3.3,0,6-2.8,6-6.2,0-3.4-2.7-6.2-6.1-6.2Z"/>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/horilla_theme/static/horilla_theme/assets/icons/usersearch.svg b/horilla_theme/static/horilla_theme/assets/icons/usersearch.svg
new file mode 100644
index 000000000..3515d50ff
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/icons/usersearch.svg
@@ -0,0 +1,584 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:i="http://ns.adobe.com/AdobeIllustrator/10.0/" viewBox="0 0 60 60">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #1e1e1e;
+      }
+    </style>
+  </defs>
+  <!-- Generator: Adobe Illustrator 28.6.0, SVG Export Plug-In . SVG Version: 1.2.0 Build 709)  -->
+  <g>
+    <g id="Layer_1">
+      <g>
+        <path class="cls-1" d="M0,27.8c0-1.1,0-2.3,0-3.4,0-.7.2-1.5.3-2.2.8-5.1,2.8-9.5,6.2-13.4C10.5,4.4,15.4,1.6,21.3.5,22.3.3,23.3.2,24.4,0,25.5,0,26.6,0,27.8,0c.1,0,.3,0,.4,0,2.2.2,4.2.6,6.3,1.3,13.9,4.7,21.2,20.2,16,33.9-.8,2.1-1.8,4-3.1,5.8.4.3.9.6,1.3.9,2.6,1.8,5.2,3.6,7.7,5.5,1.6,1.3,3.3,2.6,3.7,4.8v1.5c-.4,2.1-1.8,3.4-3.2,4.8-.9.8-1.9,1.1-3,1.4h-1.6c-1.8-.4-3-1.5-4-2.9-1.7-2.2-3.3-4.4-4.9-6.6-.7-1-1.4-2.1-2.1-3.2,0,0-.2,0-.2,0-.1,0-.3.2-.4.3-3.7,2.5-7.8,3.9-12.2,4.3-6.9.5-13.1-1.3-18.5-5.6C4.8,42.3,1.7,37.1.5,30.8.3,29.8.2,28.8,0,27.8ZM45.3,26.1c0-10.7-8.6-19.3-19.3-19.3-10.6,0-19.2,8.7-19.2,19.3,0,10.6,8.7,19.2,19.3,19.2,10.6,0,19.3-8.7,19.2-19.2Z"/>
+        <path class="cls-1" d="M26.2,30.2c2.6.1,5.4.2,8.2.4,2.5.2,4.3,2.5,4.2,5,0,.2-.1.4-.2.5-5.8,7.4-17.3,8-23.9,1.1-.1-.1-.3-.3-.4-.4-.9-.7-1-1.6-.7-2.7.5-1.9,2.1-3.4,4.1-3.5,2.8-.2,5.6-.2,8.6-.4Z"/>
+        <path class="cls-1" d="M33.7,20.9c0,4.3-3.5,7.7-7.8,7.6-4.3,0-7.6-3.6-7.5-7.9,0-4.1,3.6-7.5,7.7-7.4,4.2,0,7.6,3.5,7.6,7.7Z"/>
+      </g>
+    </g>
+  </g>
+  <metadata>
+    <i:aipgfRef id="adobe_illustrator_pgf"/>
+    <i:aipgf id="adobe_illustrator_pgf" i:pgfEncoding="zstd/base64" i:pgfVersion="24">
+<![CDATA[
+KLUv/QBYpDwDui/DoiaQRIb57/GlMjloXtJcSUBaZnTmFoLc3TZVmXH57ZlEAAAEAQAAAbIJOgpO
+CmU5oesA5LuefM48x2uYp+KL/+T/JWnS9SnmCIhRNKUkyx/G91uao6iapznadecsvyia2j+9eYLt
+McZTqQFYnmFNzmmYpGtZFd+agHi2W/VJs+X5dKLhGTZpARr3WMYWPI9xPI1nE5zftS2gBfOTzCq0
+R86Z55dLSVmK2o5zAW2eii+j/+YoIM5Z9Z3jWkzLc/6qU1r3lDRPxZcczjkyLn9yeZZNcC4g7mhx
+gNt+2bVGi1XwS0XDF9WuOyuVvAlAvuMchzdanb9SjZIqtAcuz3CvbRwF2yELh1ufbKPKuT6JnzwV
+X1BxPKu1nMPzqyXj2h3bsK2dlPSu5/qkoW64NuU3rJ2UtOM1L9Oejoo3eSq+hONIqmh5hcs0/Lnr
+enbjAHIOz/GGhJLvN6flWtPHhtYzWh7j8a3R7ljTvKekMao+ybQH1BYIWuslo2LMgSKn5du+4wAD
+WpzLqwINx+Pbtl8crfSUFGU44RxGwXncAiAVn+5XzVnlKBmAs59e7ORKJcerTgoQMGAAHG9AjSTD
+PBVfWnWe16Y/17UKav4kzzgAKTyPOXnMgXOYjWe7BeOOAI5WneOvEwmnEfFsgmWPilmneqZrWuFl
+8phzwwG8bGrBNB7bA/IYVdM5TQG1T8c3apZXp8UDv+EAJJxGKOD7TsH4NcMBYlRNq2j5zjmgRuKw
+zNMWeJy/TPKd53AjRtX03BKg0B4xqs5cMKABN0zXcn6SHRpI4rAMzmH2RNEtSfw5Ll9UDZadNFiG
+ZQGATJo4z+MZ1pwPLRWzoIZlDxDLUCDNax7LNiCtZyitIxxoGK17DQDNawla1ypax7IBIK1jWQra
+aB3LYNCA1uPZbskcEMs8LW7BGVBbIOTzC07F7IECyxwaDUBNW0Asw+N5QM7J7xRFt6yKZbjqO5bh
+KonDMo5K4rTevdZHjdS89j0Z+rGfvhxF38+vayc5nub4RZI8xS6aokiOvvzi6c+S/Lo2kqd4iiUp
++l+eYvn1WyVxmpj17vvvYRf72MledrOfPe1qXzvb2+52LOve++9DL/rRk770pj996lW/eta33vX9
++/9/+MU/fvKX3/znT7/618/+9ru/hz78YRiK4RiSYRlimRmeYRqq4RqyYRu6YRe9+MVQFMVRJMVS
+NMVTTEVVXEVWbEVX7KMf/xiO4jiO5FiO5niO6aiO68iO7eiOWNZJT34yJEVyJEmyJE3yJFNSJVeS
+JVvSJXvpy1+GpViOJVmWpVmeZVqq5VqyZVu6ZTe9+c3QFM3RJM3SxDLTPM3UVM3VZM3WdM1++vOf
+4Sme40me5Wme55me6rme7Nme7tlTn/40TMV0TMm0TM30TNNUTdeUTdvUTbGsq179aqiK6qiSaqma
+6qmmqqquKqu2qqv21a9/DVdxHVdyLVdzPdd0Vdd1Zdd2ddfOevazISuyI0uyJYtlJnuyKauyK8uy
+LeuyvfXtb8NWbMeWbMvWbM82bdV2bdm2bd22u979buiK7uiSbuma7ummruquLuu2ruuS7diKbdj6
+trcu27Isu7Iqm7Ina7IkO7JYJrIh69nOtiu7rqu6puu5liu5iutf+9qqrKqqp1qqoxqqXnVTNlXT
+MyVTMf1pT9tzPc+zPMczPPvZmquJZadZmqMZmt1sy7U8y7Icy7D0pUuypEqeZEmOZEh60k3FMWTF
+lRTHNsQyNlTJcHR/a/7yt57FsrTspBh+j2VmapLfu2fLruXoz96WWObbMiQ/K/rRFd1RDEUs+2L7
+2fObHss+i2VpapJY5rLneq6nGp6maZomlpGeLbFsdMd2ZMd1XM/RHMtwbEX2i1iWkqHo16+a4g//
+b7FMHdvOpqTYQ987imVuy64qlqnpaZYqqZKjGH6vdrWrWNZVN3XTNm3ZdE1XNU3P1EzNMiVTMh3T
+MRVTMQ3TMP3pT33q05667cmeWMae66me6Zme52me5lme5Dme4yme4fnPf/qzn67pmq3JmqupmqmZ
+mqZZmqVJmqM5mqIZmt/8pje76ZZtiWVsuZZqmZZnaZZlSZZjKZZh+Utf9rKXLtmSLLmSKpmSJ2mS
+JUmSIhmSn/RkJ9uRHdUxHc3RHMlxHMUxHLHsj310xVZkxVVUxVQ0xVIkxVEUxVD0YhfdsA3ZcA3V
+8AzNsAzJcAzFMAx/2EP3t5/96k9/+s9ffvKPH8vEH37/++/f9axf/epVn/rTm770pBd96EP/vffd
+u73ta1d72s9+drOXnexjH7vYw/6771gmgGUHWIZSta91DcsWKg0Vt2Ca9ig0R07HMgq+X1rVfKMx
+tuIcH8CJ55Oc37CmhctzbWoN4HC0RWzDK46Gol+13arXOJdfHO2OUbScWuWwBpTHNDxrclqGLzdM
+w3McQL7gKDqeVW0VQM5PsY3fsebEOckrG75V8jzDa36nc1138jud67qjrfDXrWqrHNbQA7EK1Wq4
+Sb6sTjkMAEe761xGtRp9x3kOa+x6jgPQbeuuUzGr0BZafMOzu7Bl+FNoCxUtn+C7oym0RX6KE0wD
+GioOQL7r/BR/FFhWp2iK/arvl5ZVr1lDMjNYpqLlnJZvDV1nRvuVxxxVPde3hpZVMZ7TcatVryi6
+5Tgs42C+3jEr6dNxnsOzSzq/6M3Rk+c/+z+9Nz9T+yVKvl9SSUm7g5ZV8j0Qq2ANVwIQy58RFZNQ
+dAvAGecwfcf5nJJK77/XzJL8GtlPrQxNr3Xym/8TR29qYun/SI4naY7fOH5T61pJfqUm/k8cRc0s
+xVDsoT/D0n/n/5ojlj91h47tAVL3oiZ+R64iBSClZFJOxzldryRaVsUqqfT4HQ+AL61Xxsxfc43H
+mzxW3XCHNHp4ducYVWNOrzniGT5xYtUNX0jiJzUHnsu0547n16Z3UeTkd0oaY7rOaA4AYjlATHpT
+O7v/JBn23knyCzupebPs4yj68zzH8xN/QwvJfpplGJLneYbhZ85yZ/zIM9TGb+xhnMOz3Yo7pJCS
+kuXXHDjrhlt2fS8Q6FqWVfHmQNE1h/puNAeuouU8jzmxCm5RSKXmiFUw7iGFZy81xx2bWq8MapZf
+Kul7Suq1HG7dtRvPsksaKSmHZawTPKuaA7/ruV5xPD7Vtyan49brVLPjePbfP1LsZ3l+eLyRJxyH
+ZeQXtTIMNZIMtbH8mkNArapoGUW/apXjsCw0Q9JrjjgAGcfhADSM0Whid3ht/P2D5wdHzRHnMEvX
+8kJF299C9BUiLZ7tOrYVmiOec7nDcVi2UGiLTcvxKDTHXbvkZ37NQdcyfscfkklJOQ7L+id+bbFR
+3HUO3zn+mmeKpjnuOofje+U4LNP6FzZiU41KGxzNxgWM2jU7+GMA1I5cZ/y4rEDixAwNFRV+c9SM
+Gas+EyXxKXnvuL0clpFCMEYe4DaTrhKFWCzCYlNmugGBQDVGBkyH4CENIYHqCxRuBMUt4G0hZfiF
+CSKDB44YWoj3/QJBwJ6gTQw4v6zNwaRYtSoj2iVCA9rmtaPzNJDEP4QGNOSIYJ+5zgKq63r61NXt
+OSjhsOwTaA3YUBnpuGsiByWcj3CufPED4h8lM0xywMmZSUNMqLVJKR1QDScnLEomJ4r9qsHL4LXa
+cVg2klyw2zP3ETgiqiNhxDGbpIwwXAIT57DsRpQJXFEQ+NAlAToxXdU24AzHL4girxEPCl53ZBNg
+wBeDxelKpDruEZggOCybmBHPkOMSBKpvMPIAB3Yy34Z68NvbBEQPRXiY+AITv7v2vu+tgkD1ySQE
+KXBYxpGZjqVx73vbBMBvMTFvg9HNYVlIJmjy5BZ04Og2GR49Q14yhxGoQnlGkoOzIiHco9Y4viZL
+eroVAxEPvgHNA+E2AD93KIB3hLsWEaieyEcuLCi8psWcRfcHf6AG/zURm3gAi25SbSMcD4droA7R
+jCieqvekPojnsAxufESPoinD4+nBvZAMFHAvdTBK/aJSROJ6hLqsFgk0GoFExcjLcA6W7MkU8K4l
+4QmrTaYrwQidFDEMQAh9FKmXTiGBw7KCH3GlUcczYFeTgvU2JQVdeyngHJY1VPk+FDDUixppFHTM
+mxfg9DwU9MuBTYoVH0fBp2hOxeTBIaOPS/Si3ct0lZ7Pg0FCdQyNyznqn84elDokhjMxnQoDFJnS
+UdsVZ4u47mUUWl5j110QuuXlunB6d5CzVk5nHIj3zWGZZ7s+C9xB/HQSzwMcln0HEWOeQhfzVaB0
+H4HqpQHqzTyflAStS+ewTDUQW1PK8ArSgrr01MBliVpv8H1jabLwGFRY0aSBVDRCCBnK5fMeTCQX
+u0SgercZrrFFmhRwDssMDARvjzHipZLIvLy3C2xvAe90areT0pSj4VwEBA7LNI+QPpgJGgGL2w9C
+Z+phHhIJDdqebl+RG49A9ctsewziyC3gjEpLbrsnJC4OYNFmIL1WEek4LPsSWppzIzRo19K86FxD
+Xi4C1RMQl7LhPaUXCDMKJIwFpPQqbQIcQ+EovTgsW2Q886MLLcT5HdGuDSVgxWrEwa9h8ZHuZV7C
+jyxMHt0NQaB6h1TxCA7LXAmkF8gmEDZc8VhURBdPKGGq4EegOoXjHSF7lXJY1k/5+jd61ZQm3UQ7
+/taCV/5vc85hGSqZfJvBRIEmMpVFYtNQfEj9Co4IdvZkQGwp/u8bvxzOS/hxWJabl/D7npdODw8D
+TGqQAOlCQxpChJnxYJOuCRHSr1fVBlx0z/c5mEkXgglEKkoZXl2s27jxRFxEbC/acVhWf6XJepBA
+9ZXRWCvfwGDWjpThVxfICcwYi8FjtDAiLIdl5sdHHpyanKTmLbpbihcbWPGjej0ildKkbzJ3goQB
+Eih9hje2f/UWDMipETSSVd0YH+LmlX5YnERJ5pQp/fUW8waJK9BQT7EwZGOYsN4zxap5JxI+CA5h
+K3uIratggsap2zrfqdsIwrSxWb5Tt60stNvy7kh0Jc1tHJaBa4foJKy8jdMwG1vmO3Xblv/7NrBA
+YKfLlOFPkBTidkKuAdsNRHf7EQ1q9ysQmJgoflokHJZVMraXmiDofa8xadJrkQCTIgxaS9f4DKsX
+3C7+W20SJe5aY0AFirY/71S+z4EHUoLA4AgfF1sB19MZDaSb6E2td6j7bh4WvXNYBpo+kQGB1CX8
+ygEIYitxHAGWNLeV7LfbLiCMt5XC+d2w3taOPt5Wrh1i8yXN3SV72A5QJEqBoNsMElbeVndHYvPW
+DrExSprb8JI9bHUos9ggKhixNSgiYvMGIIjN4ETytgH3e5voLzqjMaYMT2M4LDtIRiZ/IdgYf4BS
+WXnW4VU6IiLJgBvXXPnLW5ZpilJ5vsAxWF2BVyAdh2UY/OMiwWLdxjBfRbqSAI7wZYn1+iB8cAJL
+n2mRXMAKwlpyB07pW3/q2r5QBpbDsrJD2u5VByfw7sSzO1h1EZbSelISA5ZrwNa2fIceSqDtjM3B
+CcQ/8exqdgDBAUmNkd9oFZS6Z98Ib4BSRNgBRKakir61oP2iSYHAZMTBj8MymzOinSIEAfvH9MbG
+gjDexnG8uu1LlRbbSl5522mQWWwCLLTbNgmwsUEm4WJbkRtI9x0EAuLHdGDnHHmlv0br6z0JsBve
+FZUlKZjQDPj27+Q5LIvgh5PHjK+fqiOF53/qAunI0oh2qB4WlLVbaggYtEgD0gxNNUw4TE5UwkGg
+OloaiIgsdkQ7NoRA9QSmAzto+kS6sjSiHYeqTzE7mhTKyklBzaF5T0lBLMsFxB3vKen74dyxpc5f
+6fvhCIg79Ylu3w/no2JTq30/HNz04uR07XpcPsW3BrbxuAVnUirN++F40PvhdNj3wznVl5yu3ffD
+yXH4IuM1LWtaTWun32gC4tmW51UFUTRMyxd5AkC9UsW4j1N3rJljAbKm/x7PtpzPL0wcAObQHPjE
+WeWwTVLRcoAaE8/yqsCGaQ4l1UiO93WKppjqCuquY/yOA8T3Z6oT+gzntHzPM0zDs8mWWXisglU0
+fH+mOmGe69NnqhNSTc7pVONoWo3sDGiUVPv+JLNaquW0/KBVMh6jPlOdEMBdr2x5Tn2o+2Sq7XsG
+4I5te85xf4Jn03fPJ/tD3acxp2P5l3Arl004/JnqhFgFt+TvtuN5rk9zjKpbKNv+5hyvV6369OE3
+bLrruV7VqdvuMS3PqRj1sVqq//U8xj88l3NTnZCi5VgF26g4ntVTzcb4607F85dK1R+rpcrvL5Wq
+Vff92QJCG57vOMA937Z9xwHkm9UGmDRUTMupmFWY6oR+Qn23bX+3bZ/+iz8se+8//MZz/G579N2f
+3zxPf35eNGN8Fc+wH3Ca7U6fTviHuk0v/MvpVH+hZjn/UPdpQI7Hsymn69OH2x22W/XJzx9uy/Pp
+swXUJ7v+bAH9a53inJa/1ulEv1L36WO1VLAqpj/c/mwBsunDbVTdmlFfTqfmOEA83zEKXuEfbtuf
+LYCm4ZWcqm/7a/0A2kKkGSjgKEQaKs7hetVMcYH2cT6P4lPd9Ye6T7MJpmM5p+HPFmDXcS6vAMA/
+WwD+4Tfqjld5PaB1+lqn/I4D0PXpswWAYF5nQA0MgQTU6vvhaArUXZ/iDS7f8IeS0vErX/I7RcU5
+fKtkjEJ7pHB8p3Z9r5TUDEmW4vGcZB/jL5pQpxLV+P3DjRAlio0yZaIap7CLJoyKFT8MtU9684Yx
+A+DZxmXWy3i9qTtzvCl/fornmINTNqnG+1SBayj5VmkDTnR8wzZOw3eunZTU5OPZpMU5PNe4rNLy
+V8061TRL03z+svPXQKha4TFGOympv7WvmV/8Y47LrIqWAYjljynmK5U8huNI5hyz7D4UTRWdxifY
+zVPx5VWv8xyvo8dv2Z3neC19aGrhP83xLEXT+xgc4T/ugQLsEeR7a1DcAu52ota3oniSIDGIU4RQ
+OKXE4Su9bpbmUP2iwHRn9zldDBaP1aFznSVTsGVIWnK7Dp4VR/RznLhwaBbHGgo4Bwc5ChXAjZtu
+G5eaWKwuqWvA5rhBg+OJDftBlZMbTnppAxJUTm5oSTjApBL7xYWZAckqVXjigZ4gonmtGdEOFR86
+1+m46VbKiLb32hgCLCjBNIA4RQp3mg2KDHgWChxrhai8HA2nzg/zoAFxCMamMkD4SFJnZjIwQcmN
+RP7vO9+YpNf9of3rftQi/OawDGzv+yZQYEo9AQpLPQ83pJ4CjUZ9oGBC6AuPZ9AVn0ZBf0FGnz7n
+/dNTK9zTPzKl088Qw+mreB7oqlTr0kkZyqU3ToK3X+Ta7SyBxe2ORkKb0La9ZsmdLrR5CHSnC310
+aQLk21aTUWJLGT6xIToRt92wptNNRraAJj6nwPRpRSAHJfKmU+JcUobK9X4zlmWae1wG5LDs2041
+XA+spbc+NUtCORxwYaKm2b9S0ZqMB8Bu+9Kkh3DTGwIdXCEPN734CAQib9JNUjhS/SbdJJco7Dye
+z8JjkIWHn9/pdECLxbcoTbrXMRalSV/hOGxpXjRsaTigBQlOkOC4f2vKMloWBA4LV3oiBI5IZ8F0
+lVfFRwwdZEknoE/bLbycVURyVhFBtIoxki+8b7L+bbJuk3WbJ2vhmpjfuooHyB4wGAv24GW4Cc1n
+D17uQevgQjksm9j1IYGDmscm4NgEvE3gYLY9hon5RRTRyGRf04Q/7ltycEvy9eQu0XxNBPzREhhY
+5eesSOBr4gevWfkIt+EtwB/jSXTP7kUkeg7DJnDfExPvHPjt6C8qJKJW8QURegwMr4iPSmxG5Ayk
+RsDiJrgGIVH0Il0GA4lhdLd/SOl1b0L1JsAxXE/bdg7LPl963aCFeCJVPGI1smoIWrJAYB9Jlsam
+QZG87bU4UGxmp11soA2B8QQF4MknKC32o56R4m8tJQNmSMnJz6uURsLiBIufenyq/9TltXpfK8+A
+AWiBm7411b811b81BH5r41s/hSMFAoFAN+lVOFK9M5gKsF8X9trBdU2kuh167dAHxPBciRTDlUg9
+UoZvYJnHeKQMz8LD+vOGnxf1dCw8XrDwuDPihI9A9RWB6isEgerhggTHCxIc95bmRTkcEAdkSBA4
+IpaedyJhpeU6D2FFwSE+xyG0+Ejlw3RgX0jy+EW7CY7mneb8P1FNSqNf+n70SwXWatIIgdT/ot6T
+9aIUJ+tFKV4QJPFNFtqJLuz6ptCFXRdmRa1nRa3vEI1Q2I7eE0XUv0Zo2BqhQQscFqG5V5aDpAw/
+MU+VDjlJJTeHZQhWPfrvRnp9/rdUz6DeDKgZWYeEZZA8n4sPOVVxAy7kvMYsiawEahrzSSC1DHFT
+iJu+deWBJP46gCiICz5V8Kle8KnvSqQ8VyLluRIpO/R+QIsP6AOiiFq/hnbotUNv/VGo3u9YeBx2
+LDzsWHjc648H5AGtikXJeSKhxebCjcBhURA4IhbbS1gMBI7IxnkiYa5xRCqu8xBWzkNYaSW84xBy
+WGbxkUoLUSg4DmEFZJ2HkFzhCJ+SsFjhCJ+SQKEkUHIc4XNYRlnkrCKCO0QSSP3oZqL6OJojuEj+
+/cQLv+8fSOKDB5cCXH9TOyIYaEftx4pab7ejdtS2Iy/0icTLx40VhEbFYVkILt7Q/y33oPKduk3i
+qkweAeEaPiNAOfkbf0lCzClvQA7LDG5l5V9VMvECrsPzd0XA0r+Fwgt9C5eIo0eFQ+H4Ckeqr6BP
+4fAUjlT/mALsewH2awEu+FR3iV7UJXKJ3kYI7QpABZ/qCj7VDRSOlB2yQ3bo/YAKIVH7EbWew7J1
+QNR6xKeJP1ci1Xk8jEVp0jsgmkNzXprzohwQp/5wQC9JadJXOO5w3BskOO4tzYu2FKVJXxOG0qQn
+NgJHxGJbRIu9gHgiocW2eE8ktNgMAkeke0lc5yEMXxUfqbQq5yF8VXykgteqxaNhpfWeaMXiI+Nq
+hSP8xQpHSGhbRWTdaBzhUz4TjvAneK1OPpp/JBCiEFK/73ho5zt/okLzu7RD70tzXo4+nKz/oiqR
+vMa8qPcAkvjqBmaxuMlC/4vqXNi1V1FLe6HOHjAUJsgjZfju8UJo2AOGwgSRQYTG0EJo0FXhIVC9
+VRnRjYQAURA4Hb8gTvoavm4Qwnjdm0hGhT9UMkGTr5kISfQtoSqUZ3zNcGP6PDAj/KH5sAjg4g3h
+j1JBIAkv6Et0d7dresLQqfiviYNfvDLgIILMYhNYlYo4Ebrft5OHtxQyfUAWZyA5mZTbf8stHIRE
+A/kHSNXtH+wWQCHRZhRIGKsxfA8yrXeUXjdBSJwPIorFasQMnB4dxyK97ob3eF7dwBNEwYb1tnXD
+epvLQrvtS1h5obPS2Dgsa89KYxuFaYNEQDc2VSPBaL+3HCpfxLLSEOeoLAl6QTNgJ5WePIKDHZJX
+/s4SdTVVukFogXRkqbx88FtJIPWv4LemOm56LxYf6UKgECgEek8UN73+W1O4CTfdJMaLdJPeT+FI
+9ZsEAnUHFiTxOcMKkvgmSOKveK1OQhPagUAdh2U3CQRqFLhELpFLVGAwvUAF2Bd8yiV60c8H8TGI
+RK1fEylXItU5LOuuRKrbofcD6hYl2wPqCAbeE60/9eetP/XHA9o0KcOvremSMvzKwuP6U39edOOJ
+Hc15Q0acEPceJ8Q9TogVcULcW5oX5EqkWpqXA8ohpUlfHaVJXzksM7jE0qSvHQmOe0vzbjgi2Fua
+18JhGcl5IuFG4LDY74laPOeJhBZb4fBEwgSBI2KxDZ0nElpsEOO9Kj5ioHCkeqVVCV3nIXxVfKTS
+UoiOQxhWWhW8VruDwnEIEZa30rLPQ6huYLzixRWO8HNWEQG5EqlOSag/L9pRVjhCIqHBdD6REKHI
+WwUloeDCESgJi1yFI/ybVZhetJvgtRrmq9CDJJD6PSQ47hMVgstB6j9E8omqwATZIjkKpP7fwglU
+n6i88Pv+gST+h2Wf80VtBl5JDEl8xov0vkaQxOewLDdZ301QGf5FvXitZvBahXT1CvyYArwITaAn
+j7vEHdgUSAXYcxhk8PVNLl6r3VuAK6eB+m0HiIEoVI/DslDBp3o72rDxCkSw8Qq0Qy/atQ1W1G4Y
+jbVDWF7bY0HwpCMWJQyBI9IIhRb1hfDbkcLDQBI/8SJRThbatXitdrbAwkYRnybutxdCO4KWgYpa
+f/CtqZv0ot/jxRFaXyM0aEdQwMLjzvjECXFnC0wQGSwkOCzjWvRieRxCFgRbWkXkwHs873mP5w24
+W2M8rkX/JHGAPXvwnijDwMYrkMMyjo1XoOqSpAyvbuAOSmGjHDdWurqBbYTGLhkv0qRziNKkazzv
+iW4v2rF4rS7Gjdd6aEjpkcRfQe+JJjCdGIJoHAQHmwDdeo1aKIN1MTFjDstIj5A+3JzHbwHNa57w
+R9qAN+T7PxxiND5eEv4Q8Hz5wcoZheNr4g/HioGIrxl+iNcE4Q8yH7nwNcP5KtKF33dwHMex9H/p
+9w/+X5r0hvd/Cb0n4Qc9WJp0EARLk+6BYEnDAFfLW8AN5Pe80qT3gQisUBBIQs83PM/jsIzhcVi2
+8Pyigx+HZQ1vIToIqXcL1htoAvrXZw2U4QayzkNYu9bIgXGXjW+EMlgX3mEK74Nu4OAl4uCsAIut
+NaXX7UkofAgTy0I1nIgDXNxer1iAPcJBRLHgsGz1IXCiEA+AHTNwehROAtUXSOQkXDSiXUjCEb4P
+SP3f6PUeW4C9P3ggwsZD1HpWDZlfGZJqQCBwLMR94roFfI3fCFooTNrIYV188EK6FuoRIekMwrSx
+VRJgAwTCeJvXUYqFocERwV5rWh8C1b0xZXiGRAP21+aJhJsXR+EIP05ZpXXyKdEOzIxoBzrs1zcy
+I9o1vtHrMwzIO/IDKNh7LVBh+2pbRrSLWExjByko2F0bSOIrJKjNrZ5nWEp097wLzdFOYUH0CTgZ
+vf5znYdQMhnRrn9A6hd5k84xLsTxG/FP0XveOg8hQlOQwa/AAjs+Aqm/Y4FqzcKQ6Hy9VSdkDko0
+97xQKxi1oFXUAwgOgQRHqnNMglmSk4zSj3gOiz/QEblmGwN+n1qmpxuqdBpEVbqBw0wZhtKkgyNF
+Pxk3IrQcLEhuSUDgEH6G0qSTDlPcx1YO9g+mdd2F2bFr6FNyCUSEEe1EFQYRUr5HGNFOURBCu44w
+ol0fWCDCD2FEu83h0x+S0eL0Wo4zf9JgTGCB/XSxTu2BxYYG8uiXvkE3GEGDE6lhMKId2Xq0XwwL
+RrSrC0ZfMKLdAsGEdr0ALBjRDlwJ2N8oGNHuVEbYL3bCUQjsvjOiXdegDFr58OKkKtMA4Y0PmnxU
+IReChYA7WXx15WwUC3tJnTQpQ/XN6uYhiSx+Z0S7hthY/Js06QYBA+oh8AQj2pmUyMmDBCPaeUjj
+5FWM5ygPJ49gRLuvU5kIRrQLN5GJZ9UQNDOiXeg2JpLDxH8ZlKh6vYxJ4XkZmRHtGC719arVBuNy
+1Dh1l84yoh2cnwsLaZXwPGUyoqD7rSPY7wOQ+j3ICHabUoB9wlCadEY5gl3hR7AnvhHsOWlEu0+R
+g/0Ojag3a9CuVFBAKigYuT6jaSMnqQj0mV+Uvhg8RqGkoNWwDKf7QOGgpIBaMyRo8yKsoNg1YF8r
+R6IGx8obIAXeH0AMnJRl8mbJhNzSUPLVmBv9aQX0fB9z+HhedF4Sl4snEuIOD6PAWFbHIXR9RpQR
+gqzuh1jiRiZh5ZHfqdta19ttBwmrXPMSuGEB7NJIFJdMGhowp59WSg6HxMUmNBJWpcKAlk9ySA73
++NODi8MyDss4LNsQBQIKCJQAGxuZdhgXFMnbwlm2XRd/mVMaSQJszJK1Y1kS+/JmwM3jsvItEYf9
+lDqESRmZVislCF3G/yoQ825lcliGH8YJQqcQaL+B2ksvN6akbgoVXHkko1DxhhPcYekpo01DghOC
+T13bxoAglOSRMNxUmbYHCs+LTAsOyxh449RtboGg2zbu97aQgG5sB4tWRFGwpd83eF+rtHVgMNBf
+25aGbjragAkPAcUPE78xfyZ1wd7SDRiW8XNYNumA9QbisKzhaEl4QovGdAsOyz5xpHV0KdIFnJSv
+wumCxEjH3SS+VS2RHJTkG4dlcqXg9ZALK+6gg8rKv064G1ossChxfDUGLIA430+IvZ8iuI/nD7pI
+7haAaqh4UBCMxgaKdMd6LxpoQiANQReMANkS4Dl1GTOL5KYdFbUP8b43kiuz4ijB00lFjE0Epb0Q
+2jkuHxc5iM5BQWvEwc8VI5SrNY8TpCzQrcgNZHGwyasiUYZpA3RWGtudMOi2Corkba44d5tEYdBt
+mQ3rbQkPTfkeY0T5OCtm/8tARPkqyDb5S0ZlSTgskw0uGPCDKyv/UZWzBEwg1LDAAql/ZTRWRP7l
+F0Wtt8HFUDVO/tI6uFDIgcPSFRyWcVj2YqF1qJMoA+v2HJRwPq4B+3nGSWqJXDhqQcvxr/H9L7M9
+Cy/I9R1IoPRzVjZ5CvxmQM3d0UhKivf8HRF9n7ZfkrCjSx6JOot5g8Oy7oLBvvFEDsvAsaQ5HECS
+y2EZwcinekHnsCxRsjr/oSaHZR8WCOyJ0uZt3n0vtgkI422oMG1saJi639v66ONtjozAgpOw8rbv
+u9gubxMwJBiIgcbiryBFqmNmh0PCYdn2WZYkQ1JtQA5ycPJ5DXchRyko/VeOMEp6SWGgUdjziLFx
+WHbOL7qBVA5WBzrx/2CrGBuHZaRTCW5N7Bo6DDYixXJYRlDhsAyxiJhoSGrlsOwubT6WtBI9JAzS
+6fcF5WLynvkjLLTb+nfqNhEB3djQWV5so4bZ2DyVsdgkkoW3cUAYb7sbp26zsNBuuyTARitqbF9l
+LDLu9zb1O3VkztksWD0BKfB+QqIW31VJSX+yeTPgwW9OftJpEWGLKMtUBZkqnZRdnxHtbA7LBEBr
+qi/+p8uUwR4+HpTDsgRPisOyFgH78UT5sSI6wVLX1eawDJQTsNudhhpH5L5D96SWuECJj+RGuPL6
+eY8IZ0PQbjsv4UfgiNyz2aAbifyLRmsnJbFr6BC5WofkcNhapN8dNNjPEDmi1t80twJL48i6CBLN
+gEqzeO8clh3yG5QMaOAXexiZ5nHAhHC3D7uTkmRK5CQtWMEvtntqL62MXYR1MwSnVNJtL82E1IL2
+909dJy9K8lMOyxAfbX/LFPD8rDIg/Uu4peHqqDEgwUFX+ZjH6PsIB2XxvxBKYaP4iws5LDtFota3
+0on4JXIOy04d4UVBlInC5bDsxXls97h8XIwMnNiPqxgQeOT5e7s8JKcCq2WQPKjrcyMCkoLixUkr
+5AGFVSQ8OimHZaFN4iMpgS5awmpLcCupJaK2IWBAO4WhNOnoxhT37wrZTsqCvC8rYg+WRwWBPiIE
+CgVLlePWIdlcHIYFyU2AKcMf2HgFehaB6vPLRT0Iy6tk9EL4KuKFdoXzEn4ZXGZF1c+si8stCsth
+WQqmLomXNZN2w6o8JB4hJ7kFAt/H/gJ7svggyQX7ilBzqwLKoP0SMNxeNhNXudpenJR1n/HjLvh0
+0pWB3LW4gUQ7s7QwlCb9IXYwIJpwmHj8UrfSOzSiBgPIfbM0t8EJUuxBZDvpRUA1kBomHsldDZCl
+duvkJJcCsXwk8Qc3D4vOUJp0GjOiHYrypDoXgoC90TpxoeJlRBL/c4uf6qGq12NiqCCsqM3hdNHR
+cLqcnympCN9JSTaxWtBSvNjB1ghHxpApqaoAOUklJDlJT4wGwVGqIofQqfgGE6vSP5jPJcldQwa0
+ZEqIUGDkLb2yWDkkmlMhDefWgtVTtPj4FJ3uEhg7nDcajsOyUKmIEwUGDQ77WP4eKGpDzYZ6EyqA
+GKOTSSGSmDxo5ZRyu2pR3c5YG9/Gurhvn0X8tbBFrAdLL2iB0FhNHpSAUzO2lUiiKlAEBUMne7EL
+3VBI5y8kmokQ1ASn9CRdDB6smLP4BaKXG+YjR6rbB4E0LHwHXDhp2RjwsHK+f0MWcsporCu/CJmc
+qLT1lMlQ0kGG0ICICAQANADjEgAgGBgWD8mG09m6twcUgAI9MiZQRkwuMCQwKg9H4rAwIBKJ5TCM
+AimKwljOIcYcu0EAdJC87peWjMG6PkXyeRJS7L2N0AoXrjEHXBJZKPNRXyTkkleMzDaY/oa6GNPA
+DbwkWriirsj0Q7j0v/9tqK+NBxHQy0/KshiirvySmlD/1spD5F8greRfqCubGIgxB+C0LLe1FH5G
+S/8jwTnwN2Rq6RSS02N6mx+RYuqQlMjS4TRuCeMUgzWG0ndyGOlmDxWktoMjPEvzCQHrwfYKkbm8
+BKAkw4hssAffZmLiY+HBARQDv6FypO6iUg694PBZi10ainggYC8pDfa8mSmBTdEAEYU7EM9LBv7C
+XhbUBkJB1XpZKlCSR5Y0yLEGqUZuMzkT5qXWFYQSnzJAIZNMm9C5qNoutG+6QjTS9iEmhKF6+EPo
+ucgJdwdCRIFUQvM8qMXOWtQKQiinogl0Sh1rBlJ3eYYb7i3cHHotDys73zeDA8KSK6aeF7YIQp4I
+2TVXrShRz8nFb3KpBgYsyuEuNM4j+AIk/CI0O+TWsWDPW6Z0heAz7maYAIJd+x+2pcRJ1yHKwNia
+3+ZmG+BM45yheHhTjuBj8tLLqskZEqRmPrh8Vlgg8eccs7N/MC8TX5OJKRlty/ykJrDuQ6MhjpDa
+jFtrIdTdwZZcQ39h7vKHlWl5NAW2g5/iM1ksuN3Bep5GxODyE+utSEJ8wMSUbvQacVRiU6DmqfRy
+6Z3JzjKciylSJHUtsabRXYySHOVliAtyx48EniSd9MGfa+zdXpC2CG4WkXackt2ni0ivqMcyJXOk
+/eCyBzRpomJtwJsH+ls79AHyF2SKz4nz14M4OCsC3/PDIfL39jAHR9U2bfnyWpbJUIWVIdiVFE/y
+G0gFApHrxHkHozFPtmH/G/wa7dAHx0dJuw1Zn3K3xkjPGNTRZcztUs0x+8FPndBVMqAWy7kNQxou
+NGWKh0lIH9S4QRSVnP1DvMz9QA4hLJAo0wTVMrj8g5brv/UJnqSgSUOp0nXgpoJ1iZimygFjQbhf
+ObFFtwrAooAqAIceorkABh3+7VJuwMFakSVQ5RT0aF2ISUVUMhE3sWhBunMSDPWMQZU9QIWHpcWL
+wof2rNW4gxYciN4/Qbj/XNeFVAGNeQ0XVZUlcwsyp21FITJgbCxaC3uSs8y79bTopXjDAWogHBVL
+xBtHCnAfPou5KE8wnPBmBcL+7FFnfnzznIpoJ+gVZnCCGbQCOkKP0lGI/9qrAo0lKEFWh5Q5RkU9
+F+0Ck0jahLDZuNTzGx/toKtaylOA63bj/9czZiYyFWK3QmI7NP9lnaB9g2fv8kuuyz6+JJ0cx3qN
+iwNXzIZ0wXS48WuLk9inJzSfq8V7bpNOJH+iOxMIiXHPxFcRZVjFLBRiO0veoxesidilD8iO6NnH
+4vtJptX1S14Rxba8Y1FQA5H36xl0F444mQUCtcYrjqBdlQMgRAGxTVc43oA4tGahjCj00Q681BWr
+3SBgFTOIhyXR6Uo8md8yUzNDHekIKc4HkMChjuYgiw0bDt/Eu+7VI9L4fTkN2GqToMlGbOfVG+e9
+SOVE8hVWBP7oDyzMeS/BFcBG5ig66G8d7twCUlM7kBAFp54TVJAQ/IfBshmxsdOxUiMLCXFqv3WT
+hFyEDkDfHBIv3aQzWFehAuccg2hdkViLfIqe1K8rctbd1jYN5Qzi5KKepTqduCIfaoHvvnqrUTYR
+/OarOARLENAS9OMP4u3wuN0ImXif0xM7nC4sCPw8+sNC7VVBs6/kRC/IsbZ9z/csWv/AoCyF0lj/
+p6XdPOQglNIz7RDue6b/+kx1Kjq6orjewjkNQqYnAcU1/VfhkvxeYaRru2Kr3cvl8bEBjtmSWO5v
+I92Sfmr6rFWlOomcZSFefDYP5BM881RSHoQmnZiEu0OjWeZORdgnbrDFGRlzbuIBJESIBvqJLdLs
+fb3QhXiDqKk28QOGi5RWhcqwuJTf387EEWLnkzwEG9TUlB6NSombFn+rlUFPPEmSEF4xOL33uIl3
+f7IAOV10/qz4Wx/X4iG4ChGZEVTck5XSnRCfeB0LBLf4xq4tJvudtcXJwMpkFML6JTBxVlmc6hTQ
+dsZ8Tb8AA/6Ki5bw92ZU220m3omX+zxT7/B/fy7wFzYeTvP+TRU4bFFzVP3fVrAUEaZO/HfYT4HX
+pMbdIcsb6FyR00oCv4eXtOxbCRlBkgBFgiXcRARE7RCdXWDsv8UVeazFm3i3RTLMSNJOxwUmykUL
+p/7d+6OqKyCzuPJNXEgfsMCPFSBWEHb8+/73KWK2CbKywlHLAJou5l6s/dq/93yhtsANeqvGvzeC
+2M7YxCK5mGcVuPETwvhvugJnNffq7L/vpzcGEbuN7icpxwe7RyWqD2RVsVARIT7oX7SQlOmno62I
+0VLTo8R7sBsFVaTeLgm75IjrHMxwgB89y0MCYkoFq0jQhUfCaZymqNcAlkimJe5I/QuhyrXZCp4N
+/3KzfTa0QIH5BEZrpn84ICGT8Gawcn2CQQ/5t8zGyxqI5UR1ki77cAmRG6tiTlcrFehh93C0sBG4
+PXps6S5gzwHL/gRjky6qKKuCyhLlyr1YLaTb8uQKVgPKbvE5362FCFVEmorrstlHDVWGe72qSppH
+dW8qiBdCRR4Lb/nJi7SZd3vUNAp5S0Iu8ChU3rCaOrKQtPQHMgmBNlPLmwRJucy9joNPGkeZSFDZ
+ki0vCSQhCXWyxPrcTLxCUFun4sanQnTyrBoEFevlDWWSXW1L6ruFm+yx2XIhDqQvbc22CdeParBn
+YWU6IjoStoFfJwoEWWj2vPbtlYvgG0gh520ag8FfAqBS3t7E4MVM2qHHjuMqrmzbn1jlVjw43aq1
+rl+j7lybklf3SK7ElU1HMb2SuP34hNgv243jNiGhwN7OO8ToBSqDr7bjs4fRhj4Sq8cL5/2nWCbN
+C2jU1Ew8rlJ2KfX5sREBcI893bphCig3/gO2WAIl/n23VIB19TDTQqQgOCY5pRaOA/EjyOJ95HiF
+jZfk13AyYBV0Gcn0Ls4C8iDPOf7qjN0c7xpO6hv57KBrz4B9ed4wmyBzE3XLwcERtyplhuClB2fd
+7jbXHe6Ld2I7XsFneYsY+z1Jf7fy23F2adxawvz1Y0KaHmgAWUSkvfcANakdZu2/eLOG6obbG4Kl
+/SBBkCB2xBNoTuBQtsnWSnzDm8vbtFtbWoC3u9efgEj+yavqBq6DerP3Snt7g8tR33T2IEb3YcDh
+8PXpm2fh/6hboMzJuvJGRf2TAR7lFxlBqSqzzIlml6FOBIOioxPf6FQgCVBHPfKjIAdHJfSa0d2V
+nOZ/lDvU6u6Z3A2xQmGE+bQJRbjhCXAigDOOGkhQRnXtGlOgrs6x1MZKLNICWWTSkHGh5tHO+Q8r
+5OUeOlJDFF9L/ThVg0vp9qi+cj/qqqD/Dfp8fSOckIDT1EulA6Wr7xPwzweEKSl5L1kraVXaSNmq
+5gHk7SuZX9HONKiPUa1Fzsfd3KWN+oh7cklHQqwHhjibOiJRD7nf5Sz6jTf6prlxuhkh+exF/X/a
+PTwQzu8E8hHNuS04cZ+F1H6R4yc83wFuXpu/+bj3P+9+OPenzpp85r0/t2OGO0lyGT0lERsRbnJh
+Iu5CVQKIm9d9AKSoA0IgrPNEwx08mAfGEJra02DZX3ReA4BCa+P+xtLmmpb5L0ovv9TVRjSpyZl7
+WZo6//tRkdNQU+/GAu5CcwlQVc3MAma1iu0egawxz31D3ayYdltRaVojVJDwKDI35b04qykea8Qh
+91BqpIMcP4GmUCPYOEBJheKYkRVZrx/OiCOKW2mA57Y1pjGrIwBIKYK72IizppOkvFRXuipNExrL
+jSQiJJu8Orn4RiDKhJZoChKWkzkS0+4P8BQcOQFxaxzlbckGrkB2OMpgwKKiynxFL9qNXo5I61+s
+kEaEMpRBjCxoe79pkmPbEQneuFhWN5T7L4UmxflRjKZ6bhwaE8jH+VSS3RhJSz49qwjz15j9sQLW
+4artl7IaWa0kJRXUq8FwAWq66GqjZ63Cc/uEXeXDrBiQFm5cHASegpATTM1qShe8LtT51k8lk7pQ
+bpEdeT+6THXwaRCnBakHjK+dG6yH834ujHTqdUMhGkCAS0Mhc2ykWoBgF0NIT00N4wuiveOs1x84
+IIoxuTXCp5p3wHOOZNfoCkjVmh6lsG2gDky+1BO04i2T5oLWAsufsHsSOHGqEovSEBplEOj8m1Gn
+Ncm93RqVp16UaKug9Xo7NKR1XeLncj5FpB9IOZySQh0VvhClxqDX4ZxX7twFlZxyvHAcUXvHL0v2
+TNTAlGqgVCDJROUGBYkj/fAJzhNRiZfpDWaBr1xZ8jZvNYeXy9TwFesrDCfgk6Nzv5Ave1o8BoB+
+pqcMyVJjYXKJsOfEfNxxxmUvejClzG9qbd+o+kJzLCHjdI37Se09aSb+zERt3I/hTBu5LbNTaQWh
+l7w9YY3dK2dNcYIKLiz9CwsBSJiZqwX0hZZ88jHZ9vlCwmHseMP+kl0BECJnIBzpvjRSkKkyP3Uc
++2gpvJHQ4EAnZKPhM3Ws1npEX7bD2Y08z7YWiN71B+FYLaUPWRz20L2DqjtNWDPCPi9x3vlS5mZX
+xJGaqg9Ir68emhriIa8RMb9r0qS9FBE4oJP/2N9WcH3P7DX6LYE0RUA1uNhpPLU/SyI+s+jC4Ih2
+jUvHEBrXb3xpBg3ecfa3bHR5iF5PHwTZKRJ7GKkevOLh7Pe1J4EXTIUGAoTdEnro5hGMtYXVWV1v
++cyNU4utMU0QAhvKECcYpKe3dkJtxsh0KPtsPlHacNwvxco2felb0UCNaBslYy6JzSjzMNg2ANhv
+84fyFTN3OfQyJdAAMrS3QGvAmdvb3QyYrwciu73j/hRMRfOZ9p4EZZC1pY/29nmWCigr9fYOQ5s0
+U7yVsXonKIMvKC8p2rsV5TCZZ44Mzq2cxh5gj0XjGrqShn2zAHdr7TZAYUqSCFjZe3Laa+ZceiDp
+bZmcY5I6usDX290GXQHoSGKKsrcimJOS5j7i9R41oETcxEtSSjW7dQHH9AfPHmTvzto0EK83zLTS
+MjPeZr9De73xOZ8QalT5jh6gfGIOmCcGjWGLAEM/Z+qMhBWZALBFDSkyf35Qe36i2w1X7i/M7aPA
+qOYJgFfC8unEmgEcBJ4KgsszrEOrbUSCY7rlC99pMoEJxzqrygvLUQ+oCa8p0z856CeFLdF/t7ml
+fzq13GaKLDxaEr+lctVx8eLzUxRoH3TBaZqH49MaZf/dhqpRItCaNLhhrL8hbdrvJyTieekfTict
+KXwXxBcHA+OREPRp2QwDEIUKoDUsziWonb+gfRjQ5AoPmPO0me9tl5lTILgycwG2vTmtUcDoJa54
+bUA+iyQn+gwUcdh6iU5vWOgBOm0CCP+0dDe95r1W/XQyll1BHgIrO9SZ2ZTXs9rweHd1gy9pZKgU
+OOayPSIub79pwQXtk7s+AizqmtpfDf5/iYR5ekfx1+Nv3kNqSeqawj0Ek0G50bLRJ/1eUEnJa6TH
+n9y+tqrf4rdsce8lO9auwaNU9WE5xhr1O7AEt1dwJ+UZl91FX62FPoHE1YRqnm4dj+bCtbAdzoXY
+l2csUmglj5OG9tVYwjSX6hZdwNnEDsHwjEZmaP2tCVaBs1lFzaGrj3zpWFdXAhPVF5zNlFZSN3/d
+0bTsZkvSFMHZzgxfbNdeFPPrAHD2bGGRD9BM/nO/utklW2W2AWfrxRZaeqr0DxQDzp6U+7Swz3+X
+QTAjuZDyEFZzcUkEvcZUFN3F6XWzfYcwajSDzuDsNCFS1obcQ5cIIox7J4s/RpCskXlicrWduhcL
+okzv5HGLU93Fxfe5CGfEtshpGOTRLqahjk7NXpgBArLAQsTGBpCSqmFF+cTFl6lOrGe6MEsQ+UQ7
+WvFMcMojuXDcudiVQDBerLCuKXK5YPAiDoX5JsEu2ZQcYe8CMpz9Xt877fmGioZ5dJM12PFWfiZx
+IPnHAq4WGmem5cRG045iU9c59GgvOZ+rM4UgVC0sRPFf4ZIeMAyAveqKCBkoCqqWtSslvCs7qiCV
+z5HAT0Xro+Kh6f7XBv/ugmMbncFax1OvIZUR6o63lkiG8SQ6FmcNjflixTvKYb7n0HFIfnWp8UKI
+rsNSqNsPzGPgAdWsRpCb7gO1Lp1FMCeaLomLpTPjuY4tw+0fUVtQatFN91qmJbwvzw6zB+rS/Brs
+tEeu+3iO/DhANNx2aQBQpEZ/dtPyfGaJHHmECz36XWiQCMQKFHHIKG+O0StAgxLTeTRTG0YnjNBp
+zhxPyEWqp7JUC4DnJxeHPcN2nc4H5T5ha4ZkvVqVPYPnehEgPJKPCP7+BhbV4Lpnmt78LhYaTQgF
+dCiQJ+gTJLy5TskOubvYxGE1UmfLZI/hNsYGnM4WN7AxyG9AsirKfpsBgs5rSUrVCd7M5qfz2i61
+zh6bFsDM61HZHHDUgvZdABAx882GkE179FrUKEKW6b4aQky5ijJqo/mokLEWqZGNu5jXAzpI3X9y
+5OCPHQFe6ryJt8TOqtxbS96ago8nmjxZVlHUvAyxU38pz7NhMRzr8jPujC4IdWThvQDXWQr19UuB
+d3Btw61IzTRKQJe8S0kMUsbsvz8EPH++BXsMJmz+aeHPMS0uXMcFyC5bjSOuJTmm+WpKgndiltIv
+y+qjzpIL0qBe/0XWc6n7QV3UGiqwUGHu9/GfVdG3pZV5iIIhrKWNrxM42ZgOeXa3QYuP+b5MFluY
+WGYfKuqO7WRreb2JSCQGCGoBtFGZPsKyhLzzA9inRDrHe4CWHakqeMR/YaZwNvDVUiRWbucjagbu
+/pnENV2V4wYUlxsYba4NITOy9BnXTD5d/mgfcNzqcnomqFV9Ne954kNvlz6/eVPVGktCyCT/qHI/
+IUf6zR/xh/qTl9xtJBx/PqEYslveY3eAZT5qR8sLEpLQsdihEQgFamQ6P65UFXQAK8YURFiPY3cl
+5TrTlOVmS+lR6lgMHnr8f0zZS0gUy9y+GC/btvG1g1PAsDN+KoX3GbzNMtgvIgOaR689kp/y2yEc
+MfUFwWdza1oyA8Vi/babRUJwiGc4wBdi7AdBi7SrVRLgzAWYjbIqaQPDlfeJifxOyoOuuk+CUdZO
+A8llsy/ImoaNnNRusPFZgoo0KuY7uTYAT6UxBkV2JQfARIYzbDcCVpI8GuLQ4K2apZk47hwa86an
+gtzEVzR0RHqhRquGDfKn6MZMMSNLq0lQrM0cbbiX/oBuzfh6wSe8ZaitUs+ou7Q1KGS2oK2qYxia
+gPGOrBZgi1+scYimsyd7oUNjQYOwnyBLGYW5APY9BBsKqY2ptqcKpsz/CAHm+6HTOzFcNOmGw5/W
+8o6f/Gx9vmR6/pcxTGxxbWwOQh5IzXAPrZPvSVqk9UDm17BfR6ZPfpYw0bNc6gPCr0ybBZPC0IA5
+RDQrGFWp7hx/WgF1W3GfM5mzYCJkHWz/GNZBAMd7KklHbAfLCqYQEnB1+KqBQygr2FxmdCo/vd0K
+5qZuY/PpmwRHwLDgPNvQBaBWsKUM60REFsCOXjB1zajjZMGEWmnWqHo0V8bkCMixyUudZRTBP3by
+HBY++1FSEgiawnA4JpIi0JjMmNsItx7QVgD6RCuRcg4oc+NrrFGc7pIJOKtaFvgDwpTkynCuawL1
+aOFkrgs7wjVhBL45KDfZpmT/8B3HK9rck/lT9/LLpRLJZsn8EE6eERBWN4qSksfNcuXQOVRCxRLy
+hIGGLptRrpJuRaOJMaN4AyPyhDOTr4Qmg0k5yZs1hatjgh0nUuqSAHF3+bGY4icamT2RJ8oNkfMR
+TwxyYNo01BWnX/D/tpuSkyBBysCzysRiiESjzgZ6K04XUMltu4ZVY9IeJd9PjpdNVsJ7tKjNpNTz
+KBX/xDUEgSF1r33uzcQDvbxXq9EFffIa+VXYfucLlHWvFJH8rPDC0urkd3dzdMypoM5I3yS2OpE9
+IvhpoXByhtV2xxW5Lpu/kmsiRAmvFgloSdR4wA3mkZ+qX5M4JW2OipWRi8YsRQatUHHiSK1J0vcu
+MacqoI9jZkC3BaP9QW6ESQ85zGBFQ05uAa9+xWo+EHc+zhaMB5pn8iPlNPrFXrDW23AV36B80rYe
+qvak2Apc/WL9t2AGL96WYjZesEA7PMK2YM5cMDf4CzJbsMwuWC7Ncf+cb4FCon/ygnEWyqB0iAO3
+YH77opZQf64LEUUvKRFlITWIBk5gvuzxID7itDYEDrE2DcmkCSX2BBVq+Nonk+smJtl0plAh/G5q
+1s+hUoVB/M5Dk+auvvIIbBNrAC19hS0nj9AtDgBYES9xiJvWg4maArloCakjXqc9vVjyGwJ3IRMj
+ftZUb5FK+ulTlw7iIHvIaICulu0lDb9Jh4dYLlnqaqeHs81tD9Ia+BwI1usOMlr2mV7A1qrFeMhZ
+GTALfR4UuUWvS1brDj03dfqtpUOvcD63bGaxYvuWNo5t+2ibbtBpNiYJD76KBp7DZm6npv+HnKjM
+BASswtVL0e2EF1E7q5D+HrsbiVcP3Ba7xgDHqC+eladyHjcnPTDfa9wPxxyLdajHqz3Bxtdx1f2v
+RgxnKiMIzeWh0Xqc15b+8gWidVOWvFcY8NglHADuvV6O0NhIj+Kmo3FyKMU7vbeC3S+c5RZUb23M
+c8ilRjinqWcdvM8ZLejmMCBZ2sZ5FhJzFr6TlrbWFXxchViiU4EPqxmYO18eO980naMH5lrzzLNo
+znMEfP7Mb/Go1AjnrjEj20VNlLKX/VViK7EwL1DtRLKZcMMXI02vRYJ7t5BFZ1g0HpCLHY5MxZ0i
+ZnQ+A1un4DZaPpvMzejuwEZcxc8PioxeD3Pc+2OF17jLLyoZ5RdNEO+xDA8RSAKOPV1bc5AWWBde
+XaOoOOh679MEZCgs0RB2DY7qeve0AbVKmR/UH3ON49vhOISKhMMtf4NoUxSrpEpuPhoBscG2DkA0
+d8gMe5Nu0xNewG4fbeTTvFDUgw2bOz41hpY2LibDDm7Owg+CDkeQCyVHKPJXrnuNPtgxDgRe5it4
+HyMuEIgr9rBzsIYmOPVEm0Qdv345+1qCKy3YV3woIp7mCUpoQsH3l50zXbqcBk68GrPR+/JVDTqf
+gHE+IjlYqogHcqSwupQJbapJdC8dKugafx40QdnziNeEssoixE9aQTGrVmE6Tq+s6ajiMzWq2gIn
+8Z2LmZtCndQ2l0QJ6QGip4vLBrxAN6b61Tm+Wp9l75Y8s1Jmd5KmcZCwfZ7AkEGRpOyxhPow+x46
+b+ZKaZsPxYjfq0M0Zr0lUPd7IaVPkYHjBn6v1Zig1biz+L1s+TTv2Dh+5e+B+r3QU70xZ9anzw2I
++vq9Wnz64BP4cvhhrQaMTf1eq+Q7iYGvqAaChf1eFTHnDQOFAr9XRApaUfdZQfYWmun3KsPDwFea
+ePsg+73Qb7N4GOv3ygdW4KsMhBfPtd+LVAq7Mh78XrrIB75yFLQy9P1eOXq2IYOEstrvVVAFvrBH
+ocbvhV0UdgCNKPqHaSMahIOlPdI1k6qcNlvs3aJ+7BJVAzyrnsB6/ji558v3jR5kdDEBOL3b+Qxt
+KI7vhYOmMkzfedc43B9OB+ch9qaJskXL4PcYj0gVj/mIvKN3yHb2mwEi8xFXYOjnGYWB7atGmUH+
+lsJFtr5fApn6Y6mvTbgIVXuFz9tjqSXmEy4aCCYIK2Ope1OjloaD5Qz9pW6K9WGBpRYlqzPlcFwM
+pW7RWbPUGiD8MXcmsL5xuuUs9S6YCmoRjuWx1ARNUbzpEnbNlCz16hRmfkf0FReqqrIdlzV5SZgs
+lj+nwnyGyXOH4AplkHLg5XOj1xwYI2ftDa9YKb02tgmKVAZY5s+qzHsSXyN0pCDtLG2FMN8YhZho
+KRKH43DFS0KjO9Q3QJdvjI0ss/o4sfkDZesobqC3AV8XRlGgQrGFuUbi2sTsGqCFqrJoLVoc50EC
+4dJi99NwgEP+fENF0SI0vCcVaQN1bgEEdyGMyKQA2DgOBTGcFIUTztkabGi7r+6sCQOe7MNQF8rz
+gAWcJdC1k+MQPKK93Onn2/qbUf7kEjjIhc7r+2T2M8H79xpQ2V8PdTIEyY+4h9QnyBprZ5UfXo9s
+IKG1DoAPGsYGCwLjalXv/YcnM+ItJMLQImjZJ8YbOEChj4L6E27B5dwBxHpA/PnXik+uizKsbxja
+pHBc+rkiKeA9tkmGJjxAOMeH5QnQBX7IYzKIoBoXjrSnGolh97irzl+VmIxgwpw+Y4ZwT9ANEgHQ
+mNrWhQaCoFiSG7SYOg6AmI5AOxMKMtGfY2pMU4kMZBhocsdoajiS69aJqR1fPImmVp3ivRzE1IXO
+uaTzum68khrv2KSte7KCJ/ENw42exNPUI4KBDEx4YmpPIKsgPHESlZQxtUKISVM3a9O4xNT46VT6
+pRygh5jaapJSoDrwYi1kTO0rUgDNNohp6mrH2S0fNrOG3TWpm/0Yt3+1KinxcpuQJE0risOlLIXD
+m9A3MA2ksnrI/HhzpKCdqsvWhWdDFr0J8gZRZJ2UJcbUVtwhDp+au+IgSM8FA7MB1N62jGu3rGPC
+3HNgYOAGrmG+WHUCWEsOT4Xjw78qgT53buWGPeeB47nQke9ZePAkKZNF2g26pGVERnJWvGnx2ABj
+XHRFdwG4PsCIHx2u3x9bRPoUtwctP98qWa1U90I5JCbeWJxWN4t6XbzN8zyCBLPAygWSWGVeFoeD
+AO7PMnipmQwGKI5Ur+9R7/GVvYaAggi38pM4nD9bOfA/L9VhXFtBQxwdcCgHQgVk+lDTlF8T/3UK
+3V2oXqJHzzZHYzfZm0+DkKeFRWnonXweFuxOajAbCBqvtjDOKzzGxVdef9oQ7cVYHgFWrBKH8l2v
+WXlP96MLqJAmS79nVSceKqvIulorrN3SM3Yw0zl33EbdICPqrAm/Z82GdGgjQqlgf5ehHv2p6sNO
+MjMJtzg6irZ7iEH/9EITQ6otWpk8KPvEU5NaqmJdDQp+r+B36XVEX5Z5OaYNZOveeaIm1V1BGkWv
+p2SDsPpy5TGB6W2RACA73jLoafD2e04tEVpQZnui5AvADz645tWDUNRaAhPZkl/EwdjaTlx5mn/k
+azXk8x3doc2vDBKK3mtujug0WRP+wh0Xd5SXTwHzfTKJzaVmER7CKZ1hhH2j2vO7QWqHEhtzSV6Z
+ZiXDaIhdVQgtTSt2ijPunIxr9Hka5ooLw2nk9oCaVabH1d8lW9xtvMMnXdjvrmBtoFCZNnczTcNH
+GZAy/TSu6x6O8HG07REg5MXhvbn26Xll+oBtmb5o7McQugd+UzMNo0ud4sq02THUZlqIuw1XIrOV
+6ZX8NbjU5S2UaY8X8i9Yh+ExbkymChAr84Qy2Oi9gLiZDgnUa+JzS1Y6HlDbGt0PloBdik9KzT2r
+OXvAggD3FI/bVwFXpaoaoiC94yfBKxZdXhttjJyyqWdvwoEwMhVpuu/OX3ZgRVtYvAZRfNOUHb01
+R53PfoJX2rkBsqZcxxECN+yndsO2UpQaYYSDth9OQR26x8QVkzY8WSzRcCZ4b8BZUeHC1DKaPObP
+wgU8DBnNG0QaBJW7bBo17NE0cC1/0Z2ujTnt58toxuEuusK5F+0AFwkZva7o9gu06Msru1JSJzXv
+Nfguo3vbQBPCeFqGudiCbbGP/K14gcu+Sch42wfpGVLV3y+6b9/sDQQSJaNNpoMalP0XMGkVisM4
+8qjprnnRGQLoIZKHpTx5eNHx6nK5y2j20ohfdBYeHQxuopeMrtbFhb5orcy5oH6BMpqdAUQvOiYV
+Gc1BIf8kdZIX/KIfcRFIGQ2jcF40TExltDc6LxpggPq0jP6LqnudAejkf9hQ9XmV0XVFXjTYFTb3
+hYxWUAYGxBcd2Pa6WG85hNVBRueGdmhKl/dFG9heXiWj1zbsfT4G96KLvbPakNCT0QhD17LcaTmz
+3OypZfR2KivBi/5WtmXEktFYpvOiCW4jo+1QWR1ftK6sGrR06SqjZUsoOhf3oknJaPEtgMa3XrTR
+6ZBGGS0UTfkMoMoXLcR9QlcRMJyxF03f52Jjx52MDr/Q06eqIWVG/h2ljJ6B43o3hvWigU5W/x2/
+OOzd0PeiF/oQCzKaQZ8AFBXWDOA0Ge3TjUHy109tZuFFL3GgmdzAf8J1tiGOAg2g8XqnINnKdc7f
+oWYgaF8XnBqitgDvw9OkrID4sB0peICW9X8lu5kuwI0xo8IUG04ce9yAfkECtj9bfBYBRv+YQH5L
++8FpNlFFVABpdfq8rdMnppeboi1/Y74Hqtpq2dPFmHUo/WfxQpJ/1602Gfv0c8DXhjwINReTawYL
+I+6UX4NK7YQkFZ+Gx7JTcSdJDJdEva6ZxMg6mszra/baVP/IzjLloLExryGYVwam1Y2/QKrXYHCd
+det2IwQuMpHbzCQvEQ6D+++67Itkf3RRux/fA6R1C7ViIPuuIamPICDRQvKX676LK70hWm0OfzHl
+UkEktS2rRAc4Nh2nUwXmtztzTapJzCreRrEQNiiThaMtO0rf0JIvmIWAOMbAWgg5RulJx/upwKYm
+AcJgyYB4crtXDnXO0VSmUujJWddMOyqPgg8EvPVtoSbiBTwwVBXeRLXHwZabHM04eWg0SND+ZJ+g
+0kLBGU65QW1Ho3l+Cb7faOg4gZGSFvr8rjJGmqSIRltye1OwIF0zTUgT0EzhYzc6V22U46twG3zV
+XAIrvhDg5TkPN3pWnlpEV/U8aN3ojd4rii0HGg2f3kftaGmRqRUfMHFWscNHuy405nH6GEbOSgWd
+aO/ZTQqmZywTN7VE2OY1+DbPmEXE8I85FaP7ruqbg6tr0Tr9Bhhu5uQoRIlFNOxToM54zINTuk2O
+H9sGhSXiaIMT1Gd9x0IMGFfHMW2EMjXRSe4kejyf5yv8oSs6kNcnbdKWwYRCSYWVVvPajo/mSPUQ
+ipSci1oGokZprqxAs9slxQrii6YWSH1ZOhLYm9uiajpSRxSV3EMQyQi1PcuBKivoiZ1bnPuOTKnE
+4kygj1uKeBHmvBFxVM0sv6kjNoH4Lfyd7qyqWpRhM5E9cXLgWulBoVzbIUtCViYl1ME27/+srG6n
+QFbs2ucdZkdG0nlQILm6Uk4oKQuJmaLoQMBKrqJmKqn3FjMgnnDlZ5u4Z7C75V/osPiddIgsitY9
+m6HM02ikWo4ZVSD1akBuoljBIimiot/sKAqIvly0YezG/wZ8RRT4S8amSZGahlA3cio4tqIotY1/
+vw9o8eR2Ci/0LN4fT1TD4dSUA57L+SliGE8e9ZFqk6Y4PHpYcJgqFQscTNbF3rVpMzAyS/PtEndW
+0WoIgB3YLksCKoQgXTohLUEZRatRMbZNreHm5z9I9lF0Tt+pB5cHCE8QLLK373FmkDcDI91/K3P0
+Dc6rWTWkq7GMtG419cJyxrKSDdNjbtOj9vovcmo1WQVk0AASiHzCsAdcFP1uj1dK1KsCh5oIHe70
+OfvJgToZmfle0ln8qncH2AqwPzMI+AGk3KiCVU7AF9QIYke3c76Xf87b0wJGVIP7q3Lpe/MqcKKI
+vBJfRUAEU1l9CHz1E+J0jDmdUHG0Rply0mQETIgqTXt9X7S+EfrWszJQuO/Fm7aiyjAsEmySf7Gi
+C47NPKI7M6KqJT/lFlUxOJNgtCBdOEfqhyXit+q//cuZOEV3ZWE0jGUTHJ/iKvtnJE7tENaJHqMh
++nxUwpA4wRI7yyjx1LCeZuUMZrwwZtBK5t9uLXaPGogexrl7SHj16CQLIKM4eG1DVBXMArmYAfdB
+vkyaCqWdK7/z7MB4hpGnC6wtyK1yjf6+wawZuHmG7NtfmDxzzoj+M8mrv5TZgMbZ2WCye1izVILS
+GGGUUFa0QWPQ3jVxc1oeWCqq4laVkPa4pUTAL2IMTmD9BWY+Bci06EV88blcHP2VvOYwKLlri6qA
+BTqYqqXTDZhNVS0DyGoGMEzXo4E7cxUPcsl/jHy7IHkDJ2cYiTsPML74felRCPm5ZW37ryRUhQpu
+MAcRI9nNg1Gv8Gvojaf4PtpFubBc4C4+cg0rCHSxPXS7TQf6yPTQXKRa3kVsbF+xiNml0upcjgcq
+Kq5A91xa9c7O9VDeNIDDT+bzXpqmONXeBqjuIALEUNI+C5sGrqJAl3QXEuPGGyoIj9DsxR8QKhj3
+gluRSh0DkgzTCKzRJrSa7IlvwPkGEG14AivUMrNjuh4CqlaSsrw2vu8u93ktAALSZAD29k2oU//N
+Gwgi+PhATYlx2iJgIHMi1Efbfh16ZkNBcgOJHI/zAptzzhDkuPFmee5jnlOcTExtoMg74bkgSY5y
+WH9YGuhzZcVei5BydwIDpwP9G57z7lCv2pWsUA/xa3Kl5104sJi3a1RVJyqz74HZVoKpLiMocr/e
+YLUVeUVoMzU6zYJ5q+r0xaRLCijJVHljJtZ2+2BWizsK6YSewn0f7YjNHe4qkUT7Z7cSbL/D4kEU
+VoxDvRdaFw0kw1EGn3NTxVDInD4CFHkzEhBj1vC9gWV3cB8DUL+8dEcBDbXFLEpT2tgPsNq5/Mdi
+B8NeCz9FUNcRzoRhagLS2iya+dpRalsYSUqBd9FKIzdpxFmYMAGU0VOhZ9tzzplbEs4yyP1zM0Mk
+5Jihs53AkSiueK4Mw8UZvYuGe/E/AcYwyepiFNEK+QFk1kGqeuDeG0SK7R2pT0sNWpTNTGdFtxDw
+By/V8AbEZ0LYcSB6nVN/vt9RCEuz8CaP6xhGQHMn8HEAF6drwyFmpZcVpN4swiDjpNrK80dGIWIK
+g+wBeZ89TN8ZmWY1OpAlPIE+Iy8GkEgFJAHy5iSlGRn/tb0ayIwxP0WPnPLaNLLO2ip8qZ0M4FuR
+k77GzNKhc52xAdzRaej4DwiRmpMRFDd9u6cBjIrD46AL/O6PPnKhAH7EpQwPcvqGbn3RygRCwfDM
+zkstzOOPf4qisk+DzN88vaNmdDYUe6+YrntkFbInFVsFz5B/strs2odw4Iam9FLu8MndtMEm6akI
+l3lLu1aXn07oxzra8S686VAdlWH7D4oW+C1Z6XuITXDvu7oEWoZ7SLp9wyyzThgMgOmNdXjx/MWd
+QrZdO2WLA6jKp+bAN+vvERnneGZbjqbGZTgnJ0Lg2SAd/eoTE13aaRaOEIWT2Sdwx3AYPCjqQomS
+oUOF4j1xZn6R4eyFSeooEogWBsyZHh86c5smUoMVwhn5GXyU7DvwYIFoihqOhhd9Vr0ywEMVhcQE
+1YCUgFnZmTRNNo66oMOqLTE34+IQStKsAZiAC4yOfZKosoWVB+ZqvfdzDYRhY7kHVGBYeNCHlU3y
+wyGFkuI6X2TMXe5gGlTcSPZ9UXU7BmSgC1+5gx7M1Bwt18dxpLxwWWn1m9bLlR6OSoULByMKvqOK
+ogbTB83qZTlBKBaY/lPCKI7azcCWEbr/0OrygxPq/frbdeEkXwerdWDg5pyAwLqAA7dDYWti/fny
+jj1s+cqmHn8qT1z5MvJSZHvPeL3zuwDDmEsejxiUPw8nDwNxJ4Q5ZCOtYjYBrTfWB4SacKbNhBio
+LoA6tUlrJNXWNptM6KJrHqlFgN9hKdr/5zKhKgshdJ4iivDX5xcnv3fotU2Dpz0UAYGGNEA5Gnoe
+MorUvv3bW9+2qioZoi4L/MeqKO9dRCox18xQEey5fAOn/x3HSEAc7KorfnxJEathbb/L4YcK/pse
+hf+vT3YGFMtHLJcVfkEyQ7lTV/vofpuBp7OYU+G4Q00j0e/7lyQFTwBfjeWpXYNghOlVfsA8abP6
+TNQ/gEEZ9dpdIycr98UGONXJZZ2mNnx3PHuivn4cUJwZlUFJ/TZvkgtZcthEcwL7QXg2gSiN11Hl
+PaLcdApFetRjvZTYQ6tEG1TJTLmDLA3naQOIM+r6Bk2DIETeYETGCnkCdKPLtp6k42gOAqe9Cz8m
+OIbG0yAdsRfh0JKp1gjjHLxEJFLK/ESU8ID5qx4hqXHY9NY9T207yFLXtc4QaZCPVkRj8HkXUgxn
+Ii7G3JG4vsYXFFE85vDOjuG/wYZbIgaJjLWpK/go5UpFv7oLxaGVq6N2WixP5PZJCQdnTGSRSvin
+r8KskSPFY2TleOLgznPOHh+p4IQ7NLv3GKiUoTTdJk/sgFUvnXbqPYmkYkdFuiDgw3zq33t0YsV2
+vO1SuyNWFN7zSD076JdMh1HgfPwT7owmSqbCMMnyhUQ2hIalaR4xuyC6flSK6HdGaE6qWV3sFvjk
+ASaya3J+kdBAi1auA/atsAneA4TB1q18GM8jUmcPBHH3VLyCHIRZaUmuQpBVAHmbm87A2y1SavMC
+WBlRG+K3iLi/svSwLKMhC+fH1ybHxYu6S/e3G+Unsy/18lF7mcbKz+ieiyybaJRu91QKRif0Ehot
+5Q7wE874kAUEXK/iHLUAIrpBoiUD5JYI0VgZdo2nkERQJrBtOjdNy1F8insxKChyAPW9TSKoM0Kl
+gg7OUTFzJrsncIZU8M/c47fCmIQDI1sUhZDeRFsGK2bDMZ74ma1Qbrn340bYM+fMepyqQCowPoam
+HC7c+kQUfmVB5GhdjnU8mY5rCsom9MSyOxubtyWSEcjI5w9/5J9v4DDP35QHMFFVsXil4WYwXl6A
+58fxdBmPDgcKb1o0+kTSZtg9dmDKnwtmZo+Z0vXOWtyrg5MsVW2lQ/tbbfJIQmKvbfn1zsJ9Jnj8
+p3JQUoWDJFag844fRoFvj/fgdOxTZQZzBi31zyeOSGxS965UJjIfrpfFm3+FYI7dsLlddrREaraS
+DhF8UruJ5nT4nfgkbPxxhuwKI1FCzMMsxySGmbpL8ukHJinNDWBOrZv+ZuVDta5rAoweAeBx6NRw
+/LjfWI++aODGZ8y6FbNrGx8cZP3H4tBN2s6U8U0rRxhAjjSpInklHAGwObBYmydLTIp2/PZsq7IO
+srjyZKUq88LmluwFbw6GnBHJI4GcXAcCruXZhIvbeaZSlRuvTrSEx+E8FaK2+K59xGMBGrq6wzIr
+YV+StoD0qgQkvniX1lcbaX9kCKcN1m8T4Wf4EcF9CFqZNtHpjDHcPv16Sjk1bcAj04w+9H6YEbj8
+896X7ZCexcmVS7o+GywNOdvXFOEMb6hQdqZNllBOEURAaaaP+ouDQ0pK78+3WhhuFzhKNBr1HGOs
+TSRjsIietcF0XnC5DagJ3FzfickruASF10gfFASAW5hHjx+7bgyYr/ILUx2X62VlL1N6TtbXtgf9
+CTXnKWEi6ByBTrQc1MpEW4Gv4t48Lr8pI1AoptYd1NP9xtJFUZtQQIenBjBBHwxPB9yhj/vdA1yD
+sM7YalCu0+8lNXDi6cprYBOIfYlLNkESHKeu+JNes1p714oQDUOCiBM6CSK/m3V4a2uJQarG/wPx
+BUAXe5CBaHqio1/lqyv6WE9Nm9Lvhr79vns89HE4DBSL7hKA3gG98UAWO+g7tIsxaWUaalUgmrTx
+4dCSln+byJ6PgIu3fNFBKpnk2h1NI3nRVuC3ZHYo5b50x4Ta6iwZJUeE7Yj/lpFGX5TSFM9lpjTa
+nB755Tr2WJ1pBhKBdyirqM30cyk8G4wBKkVmDW7cZqjumnnDmpaEziW7rFow2QLWHgalam5UOlIx
+RW4rjYVKE3S6BFOw3jdJQeZUR2sumr9XM8GBPhkmoYR8rGzmkUQXgX/bpT0GOiiN6HtFRtoX0AI6
+hcWsVtigBVO6/s0c4Ato1xS8V5y4sSD3fpJto/JAlTv7mTkr7NjFHauDYJZfSr1nD7OqVk1iJZzj
+/5zVn2yIW1W1yxhIMPgpY7/6CL1hsiF/OEHvnO/PNtbD3MZpSls/iq4yMVPogNC56k0p/YLm4v29
+KO88Gu9CMQiVUGmswocSI3aegWS4L1cd1COXNYMm4ad856y9PZCN8jClsSDfittF34BLoysP9POB
+JuQN3A1pj/Dk3mxGjOXgurnWvOmPhW4rzXUzmLTmERNuDDALL3tpwlxR9KAmIVvzB6KPRZ2Slgef
+xBwDCBy/WO+YTe/WyvkekbMYzTZX6qogZ0wOyLo+BAf5z5FEZX+zruK3DjuXoR6TkEEo5ODHc5bX
+GIM+Vrm3Z14xsqB6CLI1hxklDoanxeMTGdbStnImz7S+4niF+7KeRhREccsGx5M+9NxESYFD0V5N
+bDr+FFTxYEbOyHWblEPJL1V/RXvdWCpyP9ziFEVj0vHHZblHC0cw6BFe9Am8CRRf9xl5+Ic2z6Dg
+YMWz1w/tXbuJ79QP7EnQKBko4eEmndHfJxSpcht4cLeSrSjkAo3RpJXtZljvgldSL1cmUDCJVAVX
+7yyjqnlVR0M3eWwHr5Ra5Iww865d+MqPwMXLdn3jruj/ymfkn5ydP+JF3Jxngv1PhGPNuKnJH5wD
+0jISltcnlPA5P7CJSTMhfciGvgL0g+/2iUKOEipmwI4ikRbJiy4FiBOaMLflMwnCq3qdeFYhf6WL
+vtjGG7Y9K1i3IOoMeVZNVXprbDcC436YfQHeLZP24PzEhtxpHukw6YqvYMXnFCevBW8Vnq6ORVCz
+u/uwxpeESKvUoRWV2yrS1QLCxk8QWBiBapAEIOzEldnnDomwqRh/Cs/afGrd2ATwTe49CqDz4t75
+bnE8wLSQW27F5VgmQvd4KvftJgzpiNLMUgICwCBIOkjjZickQhzhFtLGki0hLw9k4+5IItWVe6+2
+lXYBZ3Lhb49jcdHpLPH54MVkK/TL0aBiwoFIrbRQouThiv5uV8GYl84IWCs5dj+2CKaraXFTCtin
+z585wlL1p7fQHtV/raQN7/K0lRUIGIh5wjY0mb+lg4OVPdffEsowm8yiLYSnhjZ23wgBIPCnceUA
+La9CygIWftiL2zbM1miLDn7aq5i09Y/rsm1bM0q3HfB4fUbb+M5smaMiUUsiHtA2q/ijrAOmE1TI
+7VaGlG42CvnHRMR5UDMCW6Jx0I1C381/syX8K8jUAqgvh1NgjbSl2py0uTSSgFJdJ6dzJWcBe9dz
+/3xhv/MHNsrNY1iZuVlwFUKzZsJ6iEjvw1gUQS8y2eF6TJgCptONozfgP7XBjCEG5hqVdXtlpxTe
+fful9lQxKb69QcUW4rmgyF8zKUvcZN3TqD+9arFuiRCJeCTLmCiGWLmwMJt8i6YxXl13MIkB4YzN
+sC3s079LBdM7Qyp5CLA8ixX4WExQSsUThfHcFKrnhM0hFOsB0kGsLxi/XcienB5WTw99xxNwSU2b
++Vvuu/BCZRJNpENglmEFJvgtEQldSo56kej5J7vzoLsnU2CGbs+eRWoCZNXRDSPcxdXqsouWt/jj
+o93f4Hn2dna6jufO7Q9quFGJWLyOTXWa4RY+DFBKB5QJaDBkL5a3Fm8DWXvaKxJSv4Tu7yTR8upR
+JeeTmQMqGyJnBc8fY9RL+Y1LAz36fOyeojyq4+kjT/Tnr5sJ6WDZb19jM1uv1gj08Yyjb7/J4dkn
+mCCkvAnRFjnECOY1+hZhgAsWbUeGQWzgZa4M/qTFSTAKRYBpdCkYX9FlgK1kHh+y2+pbkz4xbGPx
+S7NiElECvhcWSRK4SkDHjIFbhh4JUD67LRM12jKB4GY5XBiMkwwpy6fEs6xoha5lEeCU6mFzydBh
+wuw1RNTC5SWz2zh3pSTEMg38G86wgJ3javIoWVx0wwIjfKCFeqZADYVoRZupj6he+L7012pNy21S
+gZVRu2J8iDnB2lJTMSHe8HC9D3I5BjPZq5xNA+YEnU94rEPmNkPyiQ29cYVICfuh+W2uabnbDYbV
+OsLUy4bgzZ1C2Wk5D7+H9eKOhdxj1873kVX48CSkkGi/Jai80ObcnA9AA2qOdGTv4i2AEhEtabvj
+TWBvpW/a+hO2aouwqeGGsvKRG2RBwTsJrF4kSWOuIsadClt+Mzg9d7GS4TQ9Jt864Nw16iO8bA/u
+g1m62duUcoY7pfkboAgdLkYV3n/vaFCw9/onYRFfYiRQ43eQXAGjbtN8guRh4wP8VxXSEDHHNuUC
+bqZ2G0YTgxs+azmrgMWo6yGiQ1JA7alYnQuyEjbYMNIpwB/t56tZ7+9j//UD7l15INU/1WyvgLKD
+2kR3F7cJTQ07uL2WDmedfBrp3Ttko1h7hepSFCAa4hmz+tPnGv8WYvixr7n21coEefiUPlf3UC5U
+07VKdsz4fo850EDAEc/dGS+PjLkvW4Ca/axmd1vLZz8NGCq5F+qj/cLO4bjii+eYe6isYq5C7io4
+mdAV68s4HLDFLb6VgsJUOH54osfk0JZ5VUxQqPhvGritOl7QPw/PHWDyCysBeo/QrBEOx/JmdXjz
+8iWT6hhAF5HIDvvsjiN/0tOl4hIoFd+xKVzOZzwd/jV+icEIC6w1kDNQ8nFzVc+yO1tElugFq4yX
+aKKwYSNGp0v+Jl3q+9/fQC9unsG6vlhyn0jDe72APB+1d0r7F9RUqysOFl4gp0BVnB68AJjLGzM2
+kGIotmAtxMDPwcyge07vAsdfB/T/IadT9bqN0bEKeHnoWc98h/tCeMGPvvpzhO1Ns86ND5K6bf2n
+q2XfebYyOCBr9Y92jou5nV3BQI1Xg8VfmJGfuhBugwotDEkuUhOB0ZTSswdp279q6jUdzy4NUjjb
+71zgYC9lzXebXI8c2LB5MO3JniGcuFLOQdLhcOKpcO9xOuup+573rfiIt9bwb+sI89IPqCIbVqRS
+BOrvCzhbEDrUCDvMcp+vhOcjm408S6iyeJ0xwoD/++iSEBmP+L/Df+pwhCs6dIo0bG+Avmd4Gbkx
+fmFY/IL0hf9ySqlUKsk5CggiX1gVLbtSQVYOqwnMrWsQhxc4u3H66T84tDcsJDz4ESfcGum+0zSV
+CRvzRhh3yxcBXbCtRshC8vRXvCq6TEm4KNuC7RNt96Q0iXMDeIlDEvVHIlLkvyFjg2D+H+fMMd6W
+F5U3wjvjpTGM90IuPWnRJcNb4fUUw3kCeYnzj5j57mvwIRtueKILZiQAUVBJqMukqrEzFszVkeHE
+N3EsYXKDzKSz36j3+/qTPD/leMkUQAvXEVYT1bd+oDTDpG9LbbUqvEkBWu4frmXGps8jlsLiLMNB
+4JpB/p5W+g+n6EUApLGnVBTpzvv5laATLR8ij1AhqdvX5m5k9kbnqNAmirLZ9FtehcPIOpw0QTlS
++f9cxd0GebLU/YhRflvhm9jDWa7V6Dn6GFnLLDNoTCCLMq/qz7/9DI+OcxCivNPdFc3LLsupq0oj
+CcE70OhOVNJelOMvUQvmHFKsaVTpGfGy9L7BdpMZ84pvf2ihK4SZmWROQ44BowyRsXKWIEACoG21
+hxomZQj9cRzPnB4Y/PrySqeF+a7dl4MlgLQaD2I6Y/cJljAvLHEjnmHLpYblUgWUXdeYHev/UQnu
++bPLpJ3eZxNLUAud0gIhsyezlAypyAmiCWtxCWkAp8djtoxd1ZhgqQPXVt5ufk7W7Yk1vpuTsJeu
+Uc/w1Qq+Z0mMfhXrMjkz+LusCeqQJ8rJdx/hHiWQjB9XCfZPthA/f2Sg947zK6CO83eqecr85EWi
+vF4zCfnPFv9G4Bg9DbL9KKr2/QHdoQDqJDEvK6AkMG3owJwf3ZAYbMDX5PWThpZWZbRUJzJIspvs
+0nk+Z1OF4HV4TXBeC+MSBMMCWQInAIQiPA9ApFLoAcjlQMVlhGAcqKIh5YKhIgAf+EicThkQigDG
+IWaz4WQ0KR+PJSExbDhCILB4Nhstoc5mJEefTckX+Gw6Qg54Ng9g0MJl4eQ8GLJjgQAigImGYWm0
+MoAhrSMDJGJYXck4jo4VDwl1h1JGbyCMHjDpoNCHiIyKlwUU6cAwXBYiVLSgwIygw8ciNNIBsQjw
+nEUDEYmKWTCIKKmYRCMw2WmBJ9QR0Q0Ve0CZeAD6iJaCQ4SKKXC4dTCQEeosT4ODBZ0CCyf3UIIh
+oQDFCwxIVEBCQvc7C0IlEaICEbgiAgZcAcjDYlISUTDp6OTEhoXnXEYnKmJQcY3TAIWcwokDBwP1
+CL/EgFgkNhBGQUQfFJKABh8JRikLES4wRj4sOkYSFuTIyUVDMhjQkFrChgSNmAhU4GRDg8UGxARF
+ITgYYIIiIQ8mCSqU4EaEEpyAKKHOEtlQZ4lESnBBNtTZFSRhyckDiYRBBSxFuNiOlAskIHKBIBvq
+rAmNC/SAtDio8IAmICAGRpyMBhkAAGQbBSIODkZ6xKGlEJ8GlDoSMAFAZ6CP9RHBD/ixoU62KDgA
+6mAA4BiIpHRopJyhBacsD4aPx4Y6n3tB6XhwSFCQY0Md3GAN47CIl4z7cCySDI6FjYzjYCHA8DGV
+iRXPObiSxwDHwuOwIiJRMQEmGAGiFRBAwEKJIj8sMCNI4QRkHgcaJfhpCXExdUhEkJAcQDJCHVIH
+ABVIMbHf4fgoqYhEGkiqAKHoQ8SARAsoVICQFCc0RAjolwuS5xwINLDcRZ4SgDyckwgRKQJXRIFi
+wYSnlgAHRglGEiSMJjgnEz7dEgK6EkbD5k9CGjagk5AKDPRsVNqFw8loUgKEhg0EAW3YoIQUfDYf
+HDn6bDhEDx6LDkXLg4cNCHYwGpDOA4YBjoxiZSEp5FTsQAQQE8xYeLBxnIxmBCPCSQMMiwPUoQFh
+ggDANTn7ivuPCQEQxBMCYMXHAZMKTkaj0mAkBZQcCEQQgkSCZJ0VEBNDAQGZgMFhCvAYHCckVVC8
+EBAZAOLw4JS4mSBZp8TJaAq0hDqbEANn4nQcRDqbEQZ6NigeLp+NBBhU8ECBBwSRh4hhg6MhL0gb
+CCRwQoCjiY6ngLmAbBwAFaCAaMgGlQIPCLJxoEOqUHEyXQSAWJ4GBMwolgI5GY0HS2qMPk6sMfJw
+CfAYBkBYYxQDAeGUnRJIggTJFLiMnEicjGbBgeJ00piYEIAtEwDgoMSz8cBoOGwUYKBnpXQ2GhBY
+PBsKHy8CQEpQWEYQJKaFx0FhwoYMEcsoJmQlAehjw1kocFZWROINBGYwrAc8NmAynTAmOHApDcho
+PAqk3NcVu3dGExrABE5Gw3E5sKGMBoSiJFKBK2Bk4+4mGrYb1+3Hi4as7JfJutu9EvPYjtHd75d6
+ql3XZ/7MlZhKd62PtY97saf6TjVdv1R6t5yGb87LPZUe5nV28lpMvUy1zuxln+ra2xXT/3Qxplo0
+azbkTV1qql4NG88Ylddlqt/0U7U7/fWnahFzm9Mwcyku9me3ph3rnZkjIqsuu1SPd8a/3o+nboqf
+fKbLLVXqsm+irrbaqrEl4uViy4wmRflz7+6iue4m8qfxWafzG57v2m32oy21VOycZ+fKjNu+5ppo
+vzIN+7ZTs3vloh2qIpvyQku1/mz+eJfrLDMaC3O+zmWWSr1vkdtcffvf7bEz1z8qPntPZr/sbk9n
+bMfH5Y/av5eYnrsWVV26u/oj4+pH5YeujpeduhRV3Xcf56KarntU7Z7mvMfJ61AV836epuXrYufb
+O85d+1t9qrjT2ZOvcxc6qkzlO3xEzpWnSvm925Etb32jQnfV3H50X26q+DRZcR/bVjdmNCmqH5Oz
+lQ097f7Xb9vRLfe6Ve9tpany5rc+T+3D3E88682FpgqTV/3M9i1U6+kirzNVz9/27Ievy0xV/v9u
+52+u/1T9eRIUbqct8jLi8k/16s+NK2rbrzkZV7nvFsxIMWY0FSAqZDQmAYQoy2hKOBlNzGlUYurh
+SlSEuiBQijmNSCNlGY3Lhno45ZDRoGwoU7bK1C4qx1Pf58CFVMIJDQBGohGYKkwNSFfByWhA1kC0
+DrcgC065NfFJaYaUe0G5TmcFhUOCci0XGqETXtwGaxjGRwMkYtCIeMn46EqGZ5FkdBxKGRALGxl3
+EDAeKFRkUMgTA4gAXKGRsQBzBBg+13JhFi+giZXVJJ7zi8AgOSROPJ0NT4dj4TmImH9wMc85sAjw
+XMuFiUhUQBElFVu6wcloOBlNzAQno/lwIFxaIig6mqIXbwl1UITkHtYlkDBAYhOTwADHAorsuHQ8
+AAW88FK5PuOqsScvO1Xqtoibpo4SVP57P+r/fS7+87q55TrMjOZCnWY0KhmNhaa3oSW74epP1b5t
+a6q2rae+n37fetjOuYyLO/v73dmzb+2n4r9WVszL3+xE9uWtyIy4y6sbFS+i7bcl80pP5e7Y37u9
+vczRrF3dtJXXdyr+5E9P5+21juq/l9XTLRGx25l9jxnRrxmX1bVv2647Vz9qGitq/69s67Y8a1xq
+qdubprm0U/HusbEeXr/ts5qnmX/3LyPzfi/kvN5fPcfDzfPVtcWz1MM952y3bbdN5k4+29X+7Exu
+5V58qXjLiJy7vP0T0ft9sbJ69zGfJ+q7O+svvlRq7ax6Zu5t3Mzea7b6dtevLdOPlzde+5/atX+b
+c//zvrHe6u+Zr75UnsiJfviuizvVpT6zLr9LxO1fZdbj976/w/WXihl3/95T8bfVXdMtfRmmQldF
+X+s9W9epe+iruvC/0VTzff30GvvdXy/R2ZY7dVdzKva3Y7P3W4updu+U9U83l5q/2m2752JUM9xO
+db07c8y73OflmMiI1+6Hiusv0XCR7X2N2dTy/VGzjduX+SK63isvN7/L9fx13Xy8vJm6mo+vOa3N
+7LC5l3MqfDNsz3TFpZkKvRft9POWdSq3bLv0W+W1iv12uO34dwtf2y3vzWxlZ1vm+uem8m+0vLc3
+XpupGNW92dAvV3cqvMtUZ337lfn++O7fu7xTMfbnunHjwkyVednZif66zFOhH5p5L36vx1Tsrq+X
+2IkLPZWzo+22Wt9qReb1VLS11rte4+O9f2Q3TbP25l/9GQ1GB4nDMa2cvAhgAguMMp0mxMCYTivK
+tHLyYoo5UaYAnMCsZDQnU4QHJ6ePjYwGJEQ9OKjPaErq15wXXfkx0X63eZd7vWqudq/3wkNf1rS1
+ezu8Vb+9vc3kvOvjNNW0X3iqnn+XF/d//c7c0XHXmyrnZ7NfdV36eYrn33e61vrSd9U0GR/x1pn+
+bt9hLn1Uym3bj225++bca3m2aaarav/5x9uerNaq2fjsb3uLLdWzNn+fKfs2v13/Iq9fVTu8taYq
+eVVxVfl5veWlOp+b+vLaV8dz00Q9x9s8VWM+v9zPQ11szHm4z6eX652W3McrH9Xvu73yqSvyH/de
+Mt6p5z8f+spPhc5v7PzOlpvIeWa/7lPd8b3vtuqeqt4zIrPjH+M/I6u/xWtUXv2/1Htc74vrUfnQ
++RCf99yuWfcb3TnTmLnXbfWP0/gt2XXZmp1znxou/r7mHvKyR8Vt1+n/v7/OU931Yvfr+yErouql
+pvJyO3/WPPf7zrd/bMdWe1Zky272TuX1VeX2vkReXIb5l7r2vNS2LZ/zUpd9Lqf7M7Yp87rl/sJP
+9WjZh5Z+vvRSLfL3MeMfrjVkZlztx09t09w7XcfVNPPrbuVedmbs5+S7a15thqdszqzrq4duvb7U
+FDk9ua+7+/JUWc8TF5p5RlOCUH3abOuYzP/4ed2XCvvyWv1O+/X0nM/uNV1P0R17Xdu129rP2dx5
+k1dXE3c1jS0103K9p8pz3MxdN1+4uviOx+yOmWvGtt+Ih6/Mm4uLu26p562Y15hn3qdq/q7Omuse
+DTOP79r63JHPPfnXWarG299O5cREx+zvNg6DIqiSUwwEoTEEGeTMjEjapAPyCBKEIzkSZjmwZ7QH
+EmDwkZTkOEohYowhxBAiMiIiIiIiIklSHXQMVKrj3uftnaNrnBDc8AilBip+Q0s0E4lRds/IoTJB
+faszf6zUJLhmS14a2c/uQszhlR78uWcZCyrRpKf0B0lDc0CSXKODMEuGQqjkC/b2Q+EP3S4h14jc
+q+pHpFc+T9ujY6Da55UXUE8iLlFMHQzw55ec89RcAvW+1myZQgDEcZgQ7XWWB+CKw7ATtV3GZDa8
+EuShaX/RynYPcSe+GJ43kNPATOriXsRSStkTCE0Li1KdfOfFUmyxUg/F0jBjmcK7jKpPmfGSvP39
+GIiM1B0SeF7W0C2ZHb1s+r0a7U/oUZNpFpFHLuP/RfLvhrE4uQM5d9nVV/M9F3HimJFBJh5K7PBq
+tpIIm27VgZ6jcOIEaslmmEwOwfiwdSTzy4Bi0MlZsFZgZ00lbASiNbSUtocxffxx7xhWFnAvZPFl
+L3qVFxYO8XxlfpvnxqoBMMFSyICKsWqYKcDwpmT3GFu2LZR8HTNVGvBBn+x1ecy3wwciHZgFlbEr
+u1hf5jqexdIbemE3brtl4Dq5xbUQu1seJFYHargmv8i7o7djIBTXOTQQ20DOqllUemckLbDGLpAc
+EbelD/Pmz/yi60Qr1aLBOG0B2lrwk9/PQJN6sq8VA0HuH3VnoMjJ1gragEqaaKdrNrgylmFCqFoO
+sUUeGZc5iqAEsUGCKstCzDR3fRsgpGjVUdFnKp6Rx3ZfWXhRhBDZ9nG9WjXr7JK8aqTC1zOa+lTv
+sn4nP9I5R1ICyCJaQEFlOXYsaPXGLWgpUKFilR5Kt/28hszU1e7+9NAXEPjVwi6aC67jsKVT4siM
+ggPBEefJIOLoGyLO5RWE76OzoC35EWAMCOzRSMqPbNFc96hV8aPUss5+FycqP0qpXvaIlf1IiJ+c
+11OROOFvLfaU6DqFtrMH1FM5395Yp4hXT32qZHQq9iU/rKdmKiI6xQJ6inuMD4txXi3jibDP2Me6
+fSupE87eZXGAsUudaLSeiotXj+jUi+ipgTh59uvUcNdT3majKr9OrWmHR+ipnLdxV6e2VE/F2CWW
+TnnBntqKgTCT3YdO+vwDjQK3/PURNIPgPuSP8lpS5jtYqC9QjJV2QuYUmJ7B0Ekmog6ncSmPl3mh
+y03pWkTPtUAmu7Il9cIQjgGKkKXiyvogoatsoiKv9z2pGQoJdgL/A0WUS204FtMT01TEbTiShmAd
+nQMTbpuHVgoKg6bq8/0C2hDDZs7vPd6NGKyMzrONinHgCwLEGDM6CbONmhgLzs3nJ7fW6B10TVWv
+1hxLGuHYXlIajH3AEbxoQBLhPpVIwi3bmgn/1FomCSCjlNaoV7m/o0XuWCumQm2OZeWNkp/+wYew
+w6GEDKHJPcKeSSgTenXWeGf9hwDBQGgbotOULUHNfHq7si0v6bqCT5Byh9mApHCdtG7mBNxDy3BO
+SQeuSI/M0tBMiNxuQIG640VhqqBRiWGymXIIU+qgSByaKsmCOaOwvYOqRUMxFd4himrEbLhQYGGL
+sSolDf0kdeeEemYadVLSGIPBaowaMVv46TeTRlPcXQtx1TceLTK8oYVrrjBXUmAvx5kQ6kyYIY8b
+alpwW3gLPqfzvVcPngpYiSiOcwNwjIGdNEAZ+AtdYZIokMys5QbYMXe5ElqOeUJ0rNYK2JfqH/Ib
+0qPWVSv9r2OXoiGRQDx3bnOnETkOGYzVdGz9h/be8M/fwTB56xkEQG+7oNChY3yNIsytex7gCZ7h
+vF3BsUa4Tg5xsj/ZR6x1F/kaeMTrFvsEUl5m3j4CXYaRp/OZYsCIiNCX+kUNKvwZT6IQzkJITBLh
+CgQ4fEIE9bmBGix42IILtN6pTTBrfmJT4+7uqIf2xJqyCOORBBEvTtN+XZoHUEjOi5mC2fhPB1Oq
+bXx//vUMoRgQ4OIAQU8t6DpgNkhVw7eQavh8gj9IaMXizAWtEhRWWqWptEbWBtDcS7AZy+LrQMVg
+1NugNTZldycHEBstyon4TISL7kQCAF+JUVywYRPtgZBBvo3Myb9TsKyMGP6pfqOPsQWzgy66Xvt7
+U+4S5uLYd7oFZp3Ro3pZ3rKmvWviTAJbqz7PbfVy3ujQwM5OH2i8vduvMhX+udt7G7IUV4EPTi/E
+O5FkyUqAXIwc3r0Or4T7+bCJ+sgQE6IbYDcRIz1D0YHbYLJVj/Ejv6MgOWD4M1gkccaFPrEf08Hn
+wlkU5sF1fGsRWNYcE1i5YfIAXJnA6WW4rJtfocLl/AL4G569ZDGb231s10+AsTQBq7mISVX2sMzC
+Evzn8/35SUwVD28fuTbrXoARZHShS6q1ucunJ/+cY+pdzFYOVPkowqGY7CQXT9gHBNOAitPISVXK
+iR6dSH62pUtNMcRz5iO8rTrUC+aF1gLU5zM7veCKhuGyIkoADtHhWnjMqzWvgSTLJw5lKsQ2u7jE
+2rNPqBTAeBxcObynJaZcmTtcl26yLpEiOTIJUQKLPZZ4MNCCFSotCYZaslCpqMQLJg2fafWKFX2q
+b6vVExFNd/OzOn/uWZ1Qs3rInelsZOctGzJTgpxWyfWdCuPpO1a0SndDq6StmGN1oDByFY5vhbBy
+pRApG3qru0U75iTke7c4zfhWHcqVn9oZ3uqIlVHDxYIxBi5iGjgXW8dY8tGy3JpiDErPxVQxFvpM
+d7jYGt4lloGHzsUiI/GlbbcnnodjCOglVYs0GbOpn6tPkBEyaIqMSU08QhZtkRVwFo+QQbvIyIwh
+MqL9PEL2YZENxQdnxgjZaIrMlg/WMBIyBI5n1dk8+o1KyKLQLCAtUj0RAiCFJUPX7N2DtXadTJ6u
+r7Oabb3hDUg2RAOfHqF1
+]]>
+    </i:aipgf>
+  </metadata>
+</svg>
\ No newline at end of file
diff --git a/horilla_theme/static/horilla_theme/assets/img/avatar.png b/horilla_theme/static/horilla_theme/assets/img/avatar.png
new file mode 100644
index 000000000..ac4ab42a8
Binary files /dev/null and b/horilla_theme/static/horilla_theme/assets/img/avatar.png differ
diff --git a/horilla_theme/static/horilla_theme/assets/img/company.jpg b/horilla_theme/static/horilla_theme/assets/img/company.jpg
new file mode 100644
index 000000000..e15637b0f
Binary files /dev/null and b/horilla_theme/static/horilla_theme/assets/img/company.jpg differ
diff --git a/horilla_theme/static/horilla_theme/assets/img/horilla-logo.png b/horilla_theme/static/horilla_theme/assets/img/horilla-logo.png
new file mode 100644
index 000000000..2087092ee
Binary files /dev/null and b/horilla_theme/static/horilla_theme/assets/img/horilla-logo.png differ
diff --git a/horilla_theme/static/horilla_theme/assets/img/icons/absent.svg b/horilla_theme/static/horilla_theme/assets/img/icons/absent.svg
new file mode 100644
index 000000000..ba61ff03e
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/img/icons/absent.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 512 512">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #b71db0;
+      }
+    </style>
+  </defs>
+  <!-- Generator: Adobe Illustrator 28.6.0, SVG Export Plug-In . SVG Version: 1.2.0 Build 709)  -->
+  <g>
+    <g id="Layer_1">
+      <g>
+        <circle class="cls-1" cx="256" cy="85.3" r="85.3"/>
+        <path class="cls-1" d="M341.3,213.3h-170.7c-47.1,0-85.3,38.2-85.3,85.3v213.3h341.3v-213.3c0-47.1-38.2-85.3-85.3-85.3ZM256,490.7c-11.8,0-21.3-9.5-21.3-21.3s9.5-21.3,21.3-21.3,21.3,9.5,21.3,21.3-9.5,21.3-21.3,21.3ZM294.2,378.6c-11.7,10.4-16.8,15.5-16.8,26.7s-9.5,21.3-21.3,21.3-21.3-9.5-21.3-21.3c0-30.9,18-46.9,31.2-58.6,11.7-10.4,16.8-15.5,16.8-26.7s-12-26.7-26.7-26.7-26.7,12-26.7,26.7-9.5,21.3-21.3,21.3-21.3-9.5-21.3-21.3c0-38.2,31.1-69.3,69.3-69.3s69.3,31.1,69.3,69.3-18,46.9-31.2,58.6Z"/>
+      </g>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/horilla_theme/static/horilla_theme/assets/img/icons/add-user.svg b/horilla_theme/static/horilla_theme/assets/img/icons/add-user.svg
new file mode 100644
index 000000000..42f6bcef4
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/img/icons/add-user.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 512 512">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #1cba51;
+      }
+    </style>
+  </defs>
+  <!-- Generator: Adobe Illustrator 28.6.0, SVG Export Plug-In . SVG Version: 1.2.0 Build 709)  -->
+  <g>
+    <g id="Layer_1">
+      <circle class="cls-1" cx="256" cy="138" r="134.9"/>
+      <path class="cls-1" d="M70.6,508.9h208.4c-61.4-49.2-74.8-137.2-30.8-202.5-43.6-2.2-84.6-21.1-114.6-52.8-68.7,29-113.4,96.3-113.4,170.9v33.7c0,27.9,22.7,50.5,50.6,50.6Z"/>
+      <path class="cls-1" d="M256,390.9c0,65.2,52.8,118,118,118s118-52.8,118-118-52.8-118-118-118c-65.1,0-117.9,52.9-118,118ZM390.9,357.1v16.9h16.9c9.3,0,16.9,7.5,16.9,16.9s-7.5,16.9-16.9,16.9h-16.9v16.9c0,9.3-7.5,16.9-16.9,16.9s-16.9-7.5-16.9-16.9v-16.9h-16.9c-9.3,0-16.9-7.5-16.9-16.9s7.5-16.9,16.9-16.9h16.9v-16.9c0-9.3,7.5-16.9,16.9-16.9s16.9,7.5,16.9,16.9Z"/>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/horilla_theme/static/horilla_theme/assets/img/icons/adjust.svg b/horilla_theme/static/horilla_theme/assets/img/icons/adjust.svg
new file mode 100644
index 000000000..6ae4d178b
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/img/icons/adjust.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" height="512" viewBox="0 0 128 128" width="512" xmlns="http://www.w3.org/2000/svg"><g><path d="m10.127 26.904h58.979c1.842 8.508 9.419 14.904 18.47 14.904s16.628-6.396 18.47-14.904h11.827c2.209 0 4-1.791 4-4s-1.791-4-4-4h-11.827c-1.842-8.508-9.419-14.904-18.47-14.904s-16.628 6.396-18.47 14.904h-58.979c-2.209 0-4 1.791-4 4s1.791 4 4 4zm77.449-14.904c6.013 0 10.904 4.892 10.904 10.904s-4.892 10.904-10.904 10.904-10.904-4.892-10.904-10.904 4.891-10.904 10.904-10.904z"/><path d="m117.873 60h-58.979c-1.842-8.508-9.419-14.904-18.47-14.904s-16.628 6.396-18.47 14.904h-11.827c-2.209 0-4 1.791-4 4s1.791 4 4 4h11.827c1.842 8.508 9.419 14.904 18.47 14.904s16.628-6.396 18.47-14.904h58.979c2.209 0 4-1.791 4-4s-1.791-4-4-4zm-77.449 14.904c-6.013 0-10.904-4.892-10.904-10.904s4.892-10.904 10.904-10.904 10.904 4.891 10.904 10.904-4.891 10.904-10.904 10.904z"/><path d="m117.873 101.096h-11.827c-1.842-8.508-9.419-14.904-18.47-14.904s-16.628 6.396-18.47 14.904h-58.979c-2.209 0-4 1.791-4 4s1.791 4 4 4h58.979c1.842 8.508 9.419 14.904 18.47 14.904s16.628-6.396 18.47-14.904h11.827c2.209 0 4-1.791 4-4s-1.791-4-4-4zm-30.297 14.904c-6.013 0-10.904-4.892-10.904-10.904s4.892-10.904 10.904-10.904 10.904 4.892 10.904 10.904-4.891 10.904-10.904 10.904z"/></g></svg>
\ No newline at end of file
diff --git a/horilla_theme/static/horilla_theme/assets/img/icons/bar-chart.svg b/horilla_theme/static/horilla_theme/assets/img/icons/bar-chart.svg
new file mode 100644
index 000000000..25a182a30
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/img/icons/bar-chart.svg
@@ -0,0 +1 @@
+<svg height="512" viewBox="0 0 24 24" width="512" xmlns="http://www.w3.org/2000/svg"><path d="m7 13v9a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1-1v-9a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1zm7-12h-4a1 1 0 0 0 -1 1v20a1 1 0 0 0 1 1h4a1 1 0 0 0 1-1v-20a1 1 0 0 0 -1-1zm8 5h-4a1 1 0 0 0 -1 1v15a1 1 0 0 0 1 1h4a1 1 0 0 0 1-1v-15a1 1 0 0 0 -1-1z"/></svg>
\ No newline at end of file
diff --git a/horilla_theme/static/horilla_theme/assets/img/icons/building.svg b/horilla_theme/static/horilla_theme/assets/img/icons/building.svg
new file mode 100644
index 000000000..e66267a26
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/img/icons/building.svg
@@ -0,0 +1 @@
+<svg id="bold" enable-background="new 0 0 24 24" height="512" viewBox="0 0 24 24" width="512" xmlns="http://www.w3.org/2000/svg"><path d="m13.03 1.87-10.99-1.67c-.51-.08-1.03.06-1.42.39-.39.34-.62.83-.62 1.34v21.07c0 .55.45 1 1 1h3.25v-5.25c0-.97.78-1.75 1.75-1.75h2.5c.97 0 1.75.78 1.75 1.75v5.25h4.25v-20.4c0-.86-.62-1.59-1.47-1.73zm-7.53 12.88h-1.5c-.414 0-.75-.336-.75-.75s.336-.75.75-.75h1.5c.414 0 .75.336.75.75s-.336.75-.75.75zm0-3h-1.5c-.414 0-.75-.336-.75-.75s.336-.75.75-.75h1.5c.414 0 .75.336.75.75s-.336.75-.75.75zm0-3h-1.5c-.414 0-.75-.336-.75-.75s.336-.75.75-.75h1.5c.414 0 .75.336.75.75s-.336.75-.75.75zm0-3h-1.5c-.414 0-.75-.336-.75-.75s.336-.75.75-.75h1.5c.414 0 .75.336.75.75s-.336.75-.75.75zm5 9h-1.5c-.414 0-.75-.336-.75-.75s.336-.75.75-.75h1.5c.414 0 .75.336.75.75s-.336.75-.75.75zm0-3h-1.5c-.414 0-.75-.336-.75-.75s.336-.75.75-.75h1.5c.414 0 .75.336.75.75s-.336.75-.75.75zm0-3h-1.5c-.414 0-.75-.336-.75-.75s.336-.75.75-.75h1.5c.414 0 .75.336.75.75s-.336.75-.75.75zm0-3h-1.5c-.414 0-.75-.336-.75-.75s.336-.75.75-.75h1.5c.414 0 .75.336.75.75s-.336.75-.75.75z"/><path d="m22.62 10.842-7.12-1.491v14.649h6.75c.965 0 1.75-.785 1.75-1.75v-9.698c0-.826-.563-1.529-1.38-1.71zm-2.37 10.158h-1.5c-.414 0-.75-.336-.75-.75s.336-.75.75-.75h1.5c.414 0 .75.336.75.75s-.336.75-.75.75zm0-3h-1.5c-.414 0-.75-.336-.75-.75s.336-.75.75-.75h1.5c.414 0 .75.336.75.75s-.336.75-.75.75zm0-3h-1.5c-.414 0-.75-.336-.75-.75s.336-.75.75-.75h1.5c.414 0 .75.336.75.75s-.336.75-.75.75z"/></svg>
\ No newline at end of file
diff --git a/horilla_theme/static/horilla_theme/assets/img/icons/calendar.svg b/horilla_theme/static/horilla_theme/assets/img/icons/calendar.svg
new file mode 100644
index 000000000..33e54a3ce
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/img/icons/calendar.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g id="Layer_2" data-name="Layer 2"><path d="m22 8h-20a.99974.99974 0 0 0 -1 1v11a2.00229 2.00229 0 0 0 2 2h18a2.0026 2.0026 0 0 0 2-2v-11a.99943.99943 0 0 0 -1-1zm-5.293 5.04-5.33349 5.334a.99964.99964 0 0 1 -1.41407 0l-2.66644-2.667a.99989.99989 0 0 1 1.414-1.414l1.95947 1.96 4.62653-4.627a.99989.99989 0 0 1 1.414 1.414z"/><path d="m22 10h-20a.99974.99974 0 0 1 -1-1v-4a2.00229 2.00229 0 0 1 2-2h18a2.0026 2.0026 0 0 1 2 2v4a.99943.99943 0 0 1 -1 1zm-19-2h18v-3h-18z"/><path d="m14.167 7a.99943.99943 0 0 1 -1-1v-3a1 1 0 1 1 2 0v3a.99942.99942 0 0 1 -1 1z"/><path d="m9.8335 7a.99974.99974 0 0 1 -1-1v-3a1 1 0 0 1 2 0v3a.99974.99974 0 0 1 -1 1z"/><path d="m5.5 7a.99974.99974 0 0 1 -1-1v-3a1 1 0 0 1 2 0v3a.99974.99974 0 0 1 -1 1z"/><path d="m18.5 7a.99943.99943 0 0 1 -1-1v-3a1 1 0 0 1 2 0v3a.99943.99943 0 0 1 -1 1z"/></g></svg>
\ No newline at end of file
diff --git a/horilla_theme/static/horilla_theme/assets/img/icons/cancel.svg b/horilla_theme/static/horilla_theme/assets/img/icons/cancel.svg
new file mode 100644
index 000000000..645b02860
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/img/icons/cancel.svg
@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<g>
+	<g>
+		<path d="M256,0C115.39,0,0,115.39,0,256s115.39,256,256,256s256-115.39,256-256S396.61,0,256,0z M383.28,340.858l-42.422,42.422
+			L256,298.422l-84.858,84.858l-42.422-42.422L213.578,256l-84.858-84.858l42.422-42.422L256,213.578l84.858-84.858l42.422,42.422
+			L298.422,256L383.28,340.858z"/>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
diff --git a/horilla_theme/static/horilla_theme/assets/img/icons/downarrow.svg b/horilla_theme/static/horilla_theme/assets/img/icons/downarrow.svg
new file mode 100644
index 000000000..604ea6aa3
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/img/icons/downarrow.svg
@@ -0,0 +1,3 @@
+<svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.99996 5.99977L0.756958 1.75677L2.17196 0.342773L4.99996 3.17177L7.82796 0.342773L9.24296 1.75677L4.99996 5.99977Z" fill="black"/>
+</svg>
diff --git a/horilla_theme/static/horilla_theme/assets/img/icons/email.svg b/horilla_theme/static/horilla_theme/assets/img/icons/email.svg
new file mode 100644
index 000000000..30628dde4
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/img/icons/email.svg
@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 490.667 490.667" style="enable-background:new 0 0 490.667 490.667;" xml:space="preserve">
+<path style="fill:#F6B445;" d="M490.667,85.333V384c-0.02,11.314-4.505,22.162-12.48,30.187L288,224l-2.987-4.587L490.667,85.333z"
+	/>
+<path style="fill:#F6A645;" d="M478.187,414.187c-8.025,7.975-18.873,12.46-30.187,12.48H42.667
+	c-11.314-0.02-22.162-4.505-30.187-12.48L202.667,224l2.667-4.16l40,25.493l39.68-25.92L288,224L478.187,414.187z"/>
+<path style="fill:#F6B445;" d="M205.334,219.84l-2.667,4.16L12.48,414.187C4.505,406.162,0.02,395.314,0,384V106.667
+	c-0.013-4.304,0.634-8.585,1.92-12.693L10.667,96L205.334,219.84z"/>
+<path style="fill:#FED049;" d="M490.667,85.333l-205.653,134.08l-39.68,25.92l-40-25.493L10.667,96L1.92,93.973
+	C7.477,76.14,23.988,63.995,42.667,64h394.667C480,64,490.667,85.333,490.667,85.333L490.667,85.333z"/>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
diff --git a/horilla_theme/static/horilla_theme/assets/img/icons/exit.svg b/horilla_theme/static/horilla_theme/assets/img/icons/exit.svg
new file mode 100644
index 000000000..b179d28d7
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/img/icons/exit.svg
@@ -0,0 +1 @@
+<svg height="512pt" viewBox="0 0 512.00533 512" width="512pt" xmlns="http://www.w3.org/2000/svg"><path d="m320 277.335938c-11.796875 0-21.332031 9.558593-21.332031 21.332031v85.335937c0 11.753906-9.558594 21.332032-21.335938 21.332032h-64v-320c0-18.21875-11.605469-34.496094-29.054687-40.554688l-6.316406-2.113281h99.371093c11.777344 0 21.335938 9.578125 21.335938 21.335937v64c0 11.773438 9.535156 21.332032 21.332031 21.332032s21.332031-9.558594 21.332031-21.332032v-64c0-35.285156-28.714843-63.99999975-64-63.99999975h-229.332031c-.8125 0-1.492188.36328175-2.28125.46874975-1.027344-.085937-2.007812-.46874975-3.050781-.46874975-23.53125 0-42.667969 19.13281275-42.667969 42.66406275v384c0 18.21875 11.605469 34.496093 29.054688 40.554687l128.386718 42.796875c4.351563 1.34375 8.679688 1.984375 13.226563 1.984375 23.53125 0 42.664062-19.136718 42.664062-42.667968v-21.332032h64c35.285157 0 64-28.714844 64-64v-85.335937c0-11.773438-9.535156-21.332031-21.332031-21.332031zm0 0"/><path d="m505.75 198.253906-85.335938-85.332031c-6.097656-6.101563-15.273437-7.9375-23.25-4.632813-7.957031 3.308594-13.164062 11.09375-13.164062 19.714844v64h-85.332031c-11.777344 0-21.335938 9.554688-21.335938 21.332032 0 11.777343 9.558594 21.332031 21.335938 21.332031h85.332031v64c0 8.621093 5.207031 16.40625 13.164062 19.714843 7.976563 3.304688 17.152344 1.46875 23.25-4.628906l85.335938-85.335937c8.339844-8.339844 8.339844-21.824219 0-30.164063zm0 0"/></svg>
\ No newline at end of file
diff --git a/horilla_theme/static/horilla_theme/assets/img/icons/gender.svg b/horilla_theme/static/horilla_theme/assets/img/icons/gender.svg
new file mode 100644
index 000000000..272369e2d
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/img/icons/gender.svg
@@ -0,0 +1,8 @@
+<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.132 5.10312C15.1313 4.24908 14.8772 3.41444 14.4021 2.70477C13.927 1.9951 13.252 1.44226 12.4627 1.11618C11.6733 0.790102 10.805 0.705423 9.96755 0.872854C9.13008 1.04029 8.36106 1.45231 7.75776 2.05681C7.15446 2.66131 6.74397 3.43114 6.57821 4.26895C6.41245 5.10676 6.49885 5.9749 6.8265 6.7636C7.15415 7.55229 7.70833 8.22611 8.41895 8.69984C9.12956 9.17357 9.9647 9.42593 10.8187 9.425C11.9634 9.42231 13.0602 8.96583 13.8688 8.15566C14.6773 7.34549 15.1316 6.24774 15.132 5.10312Z" fill="#0061BB"/>
+<path d="M41.2824 5.10313C41.2816 4.24911 41.0276 3.41451 40.5525 2.70485C40.0774 1.99519 39.4026 1.44236 38.6133 1.11626C37.824 0.790154 36.9557 0.705429 36.1182 0.872797C35.2808 1.04016 34.5118 1.45211 33.9084 2.05653C33.3051 2.66096 32.8945 3.43072 32.7287 4.26847C32.5628 5.10622 32.6491 5.97435 32.9767 6.76306C33.3042 7.55176 33.8583 8.22564 34.5688 8.69946C35.2793 9.17328 36.1143 9.42577 36.9684 9.425C38.113 9.42231 39.21 8.96586 40.0187 8.15571C40.8273 7.34556 41.2818 6.24782 41.2824 5.10313Z" fill="#E90855"/>
+<path d="M1.48438 14.659V26.3051C1.48599 27.1879 1.78968 28.0436 2.34496 28.7299C2.90025 29.4162 3.67368 29.8919 4.53672 30.0777V19.952C4.53672 19.7369 4.62216 19.5306 4.77424 19.3785C4.92632 19.2265 5.13258 19.141 5.34766 19.141C5.56273 19.141 5.769 19.2265 5.92108 19.3785C6.07316 19.5306 6.15859 19.7369 6.15859 19.952V46.9465C6.11672 47.5019 6.29497 48.0514 6.65485 48.4765C7.01473 48.9016 7.52736 49.168 8.08203 49.2184C8.63657 49.1678 9.149 48.9013 9.50871 48.4762C9.86842 48.0512 10.0466 47.5017 10.0047 46.9465V36.8387C10.0047 36.6236 10.0901 36.4173 10.2422 36.2653C10.3943 36.1132 10.6006 36.0277 10.8156 36.0277C11.0307 36.0277 11.237 36.1132 11.389 36.2653C11.5411 36.4173 11.6266 36.6236 11.6266 36.8387V46.9465C11.5847 47.5017 11.7628 48.0512 12.1225 48.4762C12.4823 48.9013 12.9947 49.1678 13.5492 49.2184C14.1038 49.1678 14.6163 48.9013 14.9762 48.4763C15.336 48.0513 15.5143 47.5018 15.4727 46.9465V19.952C15.4727 19.7369 15.5581 19.5306 15.7102 19.3785C15.8623 19.2265 16.0685 19.141 16.2836 19.141C16.4987 19.141 16.7049 19.2265 16.857 19.3785C17.0091 19.5306 17.0945 19.7369 17.0945 19.952V30.0777C17.9573 29.8915 18.7304 29.4158 19.2853 28.7295C19.8403 28.0432 20.1438 27.1877 20.1453 26.3051V14.659C20.1447 13.9514 19.8633 13.2729 19.363 12.7726C18.8626 12.2722 18.1842 11.9909 17.4766 11.9902H4.15391C3.44616 11.9906 2.76752 12.2719 2.267 12.7723C1.76647 13.2727 1.485 13.9512 1.48438 14.659Z" fill="#0061BB"/>
+<path d="M34.5462 49.2186C34.9949 49.189 35.4138 48.9838 35.7121 48.6474C36.0104 48.311 36.1642 47.8706 36.14 47.4217V37.2881H32.9517V47.4217C32.9275 47.8708 33.0813 48.3113 33.3798 48.6477C33.6784 48.9841 34.0975 49.1892 34.5462 49.2186Z" fill="#E90855"/>
+<path d="M40.9492 47.4217V37.2881H37.7617V47.4217C37.7343 47.6472 37.7551 47.876 37.8227 48.0929C37.8902 48.3098 38.0031 48.5098 38.1537 48.6799C38.3044 48.8499 38.4894 48.9861 38.6965 49.0793C38.9037 49.1726 39.1283 49.2208 39.3555 49.2208C39.5826 49.2208 39.8072 49.1726 40.0144 49.0793C40.2216 48.9861 40.4066 48.8499 40.5572 48.6799C40.7079 48.5098 40.8207 48.3098 40.8883 48.0929C40.9558 47.876 40.9766 47.6472 40.9492 47.4217Z" fill="#E90855"/>
+<path d="M28.1417 14.1326L25.4995 25.0396C25.3964 25.4478 25.3865 25.8739 25.4705 26.2864C25.5544 26.6988 25.7302 27.0871 25.9846 27.4225C26.2216 27.7282 26.5404 27.9604 26.9042 28.092L29.6143 17.3545C29.6404 17.2512 29.6865 17.1541 29.7501 17.0687C29.8137 16.9833 29.8935 16.9112 29.9849 16.8566C30.0764 16.802 30.1777 16.766 30.2831 16.7505C30.3884 16.7351 30.4958 16.7405 30.5991 16.7666C30.7023 16.7927 30.7995 16.8388 30.8849 16.9024C30.9703 16.966 31.0424 17.0458 31.097 17.1372C31.1516 17.2287 31.1876 17.33 31.2031 17.4353C31.2185 17.5407 31.213 17.6481 31.187 17.7514L26.6659 35.6662H47.2331L42.7112 17.7514C42.6851 17.6481 42.6797 17.5407 42.6951 17.4353C42.7106 17.33 42.7466 17.2287 42.8012 17.1372C42.8558 17.0458 42.9278 16.966 43.0133 16.9024C43.0987 16.8388 43.1958 16.7927 43.2991 16.7666C43.5076 16.714 43.7285 16.7463 43.9132 16.8566C44.0047 16.9112 44.0845 16.9833 44.1481 17.0687C44.2116 17.1541 44.2578 17.2512 44.2838 17.3545L47.0042 28.1357C47.3892 28.0186 47.7277 27.7836 47.9721 27.4639C48.216 27.1436 48.3844 26.7724 48.4649 26.3779C48.5454 25.9835 48.5359 25.576 48.437 25.1857L45.7565 14.1326C45.6389 13.5797 45.3382 13.0826 44.9032 12.7216C44.4681 12.3607 43.924 12.157 43.3588 12.1436H30.537C29.9723 12.1577 29.4288 12.3616 28.9942 12.7225C28.5596 13.0834 28.2593 13.5801 28.1417 14.1326Z" fill="#E90855"/>
+</svg>
diff --git a/horilla_theme/static/horilla_theme/assets/img/icons/home.svg b/horilla_theme/static/horilla_theme/assets/img/icons/home.svg
new file mode 100644
index 000000000..e5dc12df2
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/img/icons/home.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 20 20">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #191919;
+      }
+    </style>
+  </defs>
+  <!-- Generator: Adobe Illustrator 28.6.0, SVG Export Plug-In . SVG Version: 1.2.0 Build 709)  -->
+  <g>
+    <g id="Layer_1">
+      <path class="cls-1" d="M10,18.4c-1.8,0-3.6,0-5.5,0-1.4,0-2.6-.9-2.9-2.3,0-.2,0-.5,0-.7,0-2.3,0-4.7,0-7,0-1.1.5-1.9,1.4-2.6,1.8-1.2,3.5-2.4,5.3-3.6,1.1-.8,2.4-.8,3.5,0,1.8,1.2,3.5,2.4,5.3,3.6.9.6,1.4,1.5,1.4,2.6,0,2.3,0,4.7,0,7,0,1.5-1,2.7-2.5,3-.2,0-.4,0-.6,0-1.8,0-3.6,0-5.4,0ZM10,15.4c.7,0,1.3,0,2,0,0,0,.2,0,.3,0,.2,0,.3-.2.3-.4,0-.2,0-.3-.3-.4,0,0-.2,0-.2,0-1.3,0-2.7,0-4,0,0,0-.1,0-.2,0-.2,0-.3.2-.3.4,0,.2.1.4.3.4,0,0,.2,0,.3,0,.7,0,1.3,0,2,0Z"/>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/horilla_theme/static/horilla_theme/assets/img/icons/joining.svg b/horilla_theme/static/horilla_theme/assets/img/icons/joining.svg
new file mode 100644
index 000000000..a30392d6a
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/img/icons/joining.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 512 512">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #ea7f2f;
+      }
+    </style>
+  </defs>
+  <!-- Generator: Adobe Illustrator 28.6.0, SVG Export Plug-In . SVG Version: 1.2.0 Build 709)  -->
+  <g>
+    <g id="Layer_1">
+      <g id="Layer_2">
+        <path class="cls-1" d="M476.9,167.6H35.1c-12.2,0-22.1,9.9-22.1,22.1,0,0,0,0,0,0v243c0,24.4,19.8,44.2,44.2,44.2h397.6c24.4,0,44.2-19.8,44.2-44.2v-243c0-12.2-9.9-22.1-22.1-22.1h0ZM360,279l-117.8,117.8c-8.6,8.6-22.6,8.6-31.2,0h0s-58.9-58.9-58.9-58.9c-8.5-8.7-8.4-22.7.3-31.2,8.6-8.4,22.4-8.4,31,0l43.3,43.3,102.2-102.2c8.7-8.5,22.7-8.4,31.2.3,8.4,8.6,8.4,22.4,0,31Z"/>
+        <path class="cls-1" d="M476.9,211.8H35.1c-12.2,0-22.1-9.9-22.1-22.1,0,0,0,0,0,0v-88.4c0-24.4,19.8-44.2,44.2-44.2h397.6c24.4,0,44.2,19.8,44.2,44.2v88.4c0,12.2-9.9,22.1-22.1,22.1h0ZM57.2,167.6h397.6v-66.3H57.2v66.3Z"/>
+        <path class="cls-1" d="M303.9,145.5c-12.2,0-22.1-9.9-22.1-22.1h0V57.2c0-12.2,9.9-22.1,22.1-22.1s22.1,9.9,22.1,22.1v66.3c0,12.2-9.9,22.1-22.1,22.1h0Z"/>
+        <path class="cls-1" d="M208.1,145.5c-12.2,0-22.1-9.9-22.1-22.1h0V57.2c0-12.2,9.9-22.1,22.1-22.1s22.1,9.9,22.1,22.1v66.3c0,12.2-9.9,22.1-22.1,22.1h0Z"/>
+        <path class="cls-1" d="M112.4,145.5c-12.2,0-22.1-9.9-22.1-22.1h0V57.2c0-12.2,9.9-22.1,22.1-22.1s22.1,9.9,22.1,22.1v66.3c0,12.2-9.9,22.1-22.1,22.1h0Z"/>
+        <path class="cls-1" d="M399.6,145.5c-12.2,0-22.1-9.9-22.1-22.1h0V57.2c0-12.2,9.9-22.1,22.1-22.1s22.1,9.9,22.1,22.1v66.3c0,12.2-9.9,22.1-22.1,22.1h0Z"/>
+      </g>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/horilla_theme/static/horilla_theme/assets/img/icons/more.svg b/horilla_theme/static/horilla_theme/assets/img/icons/more.svg
new file mode 100644
index 000000000..1d42ccd8d
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/img/icons/more.svg
@@ -0,0 +1 @@
+<svg id="Capa_1" enable-background="new 0 0 24 24" height="512" viewBox="0 0 24 24" width="512" xmlns="http://www.w3.org/2000/svg"><g id="_x33_"><path d="m18 2c2.206 0 4 1.794 4 4v12c0 2.206-1.794 4-4 4h-12c-2.206 0-4-1.794-4-4v-12c0-2.206 1.794-4 4-4zm0-2h-12c-3.314 0-6 2.686-6 6v12c0 3.314 2.686 6 6 6h12c3.314 0 6-2.686 6-6v-12c0-3.314-2.686-6-6-6z"/></g><g id="_x32_"><path d="m12 18c-.552 0-1-.447-1-1v-10c0-.552.448-1 1-1s1 .448 1 1v10c0 .553-.448 1-1 1z"/></g><g id="_x31_"><path d="m6 12c0-.552.447-1 1-1h10c.552 0 1 .448 1 1s-.448 1-1 1h-10c-.553 0-1-.448-1-1z"/></g></svg>
\ No newline at end of file
diff --git a/horilla_theme/static/horilla_theme/assets/img/icons/setting.svg b/horilla_theme/static/horilla_theme/assets/img/icons/setting.svg
new file mode 100644
index 000000000..813c6fe72
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/img/icons/setting.svg
@@ -0,0 +1 @@
+<svg height="512" viewBox="0 0 32 32" width="512" xmlns="http://www.w3.org/2000/svg"><g id="Layer_2" data-name="Layer 2"><path d="m29.21 11.84a3.92 3.92 0 0 1 -3.09-5.3 1.84 1.84 0 0 0 -.55-2.07 14.75 14.75 0 0 0 -4.4-2.55 1.85 1.85 0 0 0 -2.09.58 3.91 3.91 0 0 1 -6.16 0 1.85 1.85 0 0 0 -2.09-.58 14.82 14.82 0 0 0 -4.1 2.3 1.86 1.86 0 0 0 -.58 2.13 3.9 3.9 0 0 1 -3.25 5.36 1.85 1.85 0 0 0 -1.62 1.49 14.14 14.14 0 0 0 -.28 2.8 14.32 14.32 0 0 0 .19 2.35 1.85 1.85 0 0 0 1.63 1.55 3.9 3.9 0 0 1 3.18 5.51 1.82 1.82 0 0 0 .51 2.18 14.86 14.86 0 0 0 4.36 2.51 2 2 0 0 0 .63.11 1.84 1.84 0 0 0 1.5-.78 3.87 3.87 0 0 1 3.2-1.68 3.92 3.92 0 0 1 3.14 1.58 1.84 1.84 0 0 0 2.16.61 15 15 0 0 0 4-2.39 1.85 1.85 0 0 0 .54-2.11 3.9 3.9 0 0 1 3.13-5.39 1.85 1.85 0 0 0 1.57-1.52 14.5 14.5 0 0 0 .26-2.53 14.35 14.35 0 0 0 -.25-2.67 1.83 1.83 0 0 0 -1.54-1.49zm-8.21 4.16a5 5 0 1 1 -5-5 5 5 0 0 1 5 5z"/></g></svg>
\ No newline at end of file
diff --git a/horilla_theme/static/horilla_theme/assets/img/icons/sort.svg b/horilla_theme/static/horilla_theme/assets/img/icons/sort.svg
new file mode 100644
index 000000000..36a800c6e
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/img/icons/sort.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" enable-background="new 0 0 24 24" height="512" viewBox="0 0 24 24" width="512" xmlns="http://www.w3.org/2000/svg"><g><path d="m18 13h-12c-.6 0-1-.4-1-1s.4-1 1-1h12c.6 0 1 .4 1 1s-.4 1-1 1z"/></g><g><path d="m15 19h-6c-.6 0-1-.4-1-1s.4-1 1-1h6c.6 0 1 .4 1 1s-.4 1-1 1z"/></g><g><path d="m21 7h-18c-.6 0-1-.4-1-1s.4-1 1-1h18c.6 0 1 .4 1 1s-.4 1-1 1z"/></g></svg>
\ No newline at end of file
diff --git a/horilla_theme/static/horilla_theme/assets/img/icons/strenth.svg b/horilla_theme/static/horilla_theme/assets/img/icons/strenth.svg
new file mode 100644
index 000000000..971f8e4ba
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/img/icons/strenth.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 512 512">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #d82149;
+      }
+    </style>
+  </defs>
+  <!-- Generator: Adobe Illustrator 28.6.0, SVG Export Plug-In . SVG Version: 1.2.0 Build 709)  -->
+  <g>
+    <g id="Layer_1">
+      <path class="cls-1" d="M309.4,115.3c23.6,14.8,40.2,39.9,43.2,69,9.6,4.5,20.3,7.1,31.7,7.1,41.4,0,74.9-33.6,74.9-74.9s-33.6-74.9-74.9-74.9c-41,0-74.3,33-74.9,73.8ZM260.3,268.7c41.4,0,74.9-33.6,74.9-74.9s-33.6-74.9-74.9-74.9-75,33.6-75,74.9,33.6,74.9,75,74.9ZM292.1,273.8h-63.6c-52.9,0-96,43.1-96,96v77.8l.2,1.2,5.4,1.7c50.5,15.8,94.4,21,130.5,21,70.5,0,111.4-20.1,113.9-21.4l5-2.5h.5v-77.8c0-52.9-43-96-95.9-96ZM416,196.5h-63.1c-.7,25.2-11.5,48-28.5,64.3,47,14,81.4,57.6,81.4,109.1v24c62.3-2.3,98.2-19.9,100.6-21.1l5-2.5h.5v-77.8c0-52.9-43-96-96-96ZM128.8,191.4c14.7,0,28.3-4.3,39.9-11.6,3.7-24,16.5-44.9,34.9-59.2,0-1.4.2-2.8.2-4.2,0-41.4-33.6-74.9-74.9-74.9S53.8,75.1,53.8,116.4s33.5,74.9,74.9,74.9ZM196.1,260.8c-17-16.3-27.7-38.9-28.5-64-2.3-.2-4.7-.4-7-.4h-63.6c-52.9,0-96,43-96,96v77.8l.2,1.2,5.4,1.7c40.5,12.6,76.7,18.5,108.1,20.3v-23.5c0-51.5,34.4-95.1,81.5-109.1Z"/>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/horilla_theme/static/horilla_theme/assets/img/icons/support.svg b/horilla_theme/static/horilla_theme/assets/img/icons/support.svg
new file mode 100644
index 000000000..8121cdd7a
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/img/icons/support.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" viewBox="0 0 512 512"><path d="M503.765,274.64A71.442,71.442,0,0,1,435.535,349q-1.658.077-3.31.077a70.061,70.061,0,0,1-14.935-1.621,192.414,192.414,0,0,1-130.067,85.23,41.593,41.593,0,1,1-1.328-30.209A161.532,161.532,0,0,0,418.05,243.188c0-89.355-72.695-162.05-162.05-162.05S93.95,153.833,93.95,243.188a162.016,162.016,0,0,0,20.513,78.934,9.831,9.831,0,0,1,1.017,2.544,14.96,14.96,0,0,1-8.321,18.873,70.639,70.639,0,0,1-27.412,5.531q-1.662,0-3.331-.077a71.434,71.434,0,0,1-68.181-74.36c.319-7.535.141-14.258-.033-20.759-.162-6.121-.331-12.451-.053-19.056a71.5,71.5,0,0,1,71.782-68.287C109.587,98.679,177.34,51.138,256,51.138S402.414,98.679,432.07,166.532a71.443,71.443,0,0,1,71.78,68.275c.279,6.615.111,12.944-.053,19.065C503.625,260.374,503.446,267.1,503.765,274.64Zm-121.96-31.452a125.854,125.854,0,0,1-158.119,121.6l-50.921,29.407a15,15,0,0,1-21.99-16.873l13.014-48.548A126.293,126.293,0,0,1,130.2,243.188C130.2,173.8,186.631,117.354,256,117.354S381.805,173.8,381.805,243.188Zm-160.78,0a15,15,0,0,0-15-15H206a15,15,0,1,0,15.028,15Zm49.978,0a14.2,14.2,0,0,0-.08-1.47,14,14,0,0,0-.219-1.46,11.356,11.356,0,0,0-.361-1.42c-.139-.47-.309-.93-.489-1.39s-.4-.89-.63-1.32a14.425,14.425,0,0,0-.75-1.26,14.625,14.625,0,0,0-.881-1.19,12.625,12.625,0,0,0-.989-1.09c-.34-.35-.71-.68-1.09-1-.381-.3-.781-.6-1.191-.87a14.408,14.408,0,0,0-1.259-.75c-.431-.23-.88-.44-1.331-.63a13.277,13.277,0,0,0-1.379-.49,13.138,13.138,0,0,0-2.88-.58,15.38,15.38,0,0,0-4.4.21,14.206,14.206,0,0,0-1.429.37,13.131,13.131,0,0,0-1.38.49c-.45.19-.9.4-1.33.63s-.85.48-1.261.75-.81.57-1.179.87c-.39.32-.75.65-1.1,1a12.813,12.813,0,0,0-.991,1.09,14.486,14.486,0,0,0-.869,1.19,14.272,14.272,0,0,0-.76,1.26,13.431,13.431,0,0,0-.621,1.32,14.706,14.706,0,0,0-.5,1.39c-.139.46-.259.94-.359,1.42a14.279,14.279,0,0,0-.221,1.46c-.049.49-.07.98-.07,1.47s.021.99.07,1.48a14.517,14.517,0,0,0,.221,1.45c.1.48.22.96.359,1.43a14.524,14.524,0,0,0,.5,1.38,13.6,13.6,0,0,0,.621,1.33c.229.43.49.85.76,1.26a14.327,14.327,0,0,0,.869,1.18,14.682,14.682,0,0,0,.991,1.1c.35.34.71.68,1.1.99a12.8,12.8,0,0,0,1.179.87c.411.27.83.53,1.261.76a16.568,16.568,0,0,0,2.71,1.12c.469.14.949.26,1.429.36a14.293,14.293,0,0,0,2.93.29,15.089,15.089,0,0,0,10.6-4.39,16.227,16.227,0,0,0,1.87-2.28q.405-.615.75-1.26c.23-.43.44-.88.63-1.33s.35-.92.489-1.38a11.972,11.972,0,0,0,.361-1.43,14.224,14.224,0,0,0,.219-1.45A14.389,14.389,0,0,0,271,243.186Zm50,0a15,15,0,0,0-15-15h-.029a15,15,0,1,0,15.029,15Z"/></svg>
diff --git a/horilla_theme/static/horilla_theme/assets/img/icons/users.svg b/horilla_theme/static/horilla_theme/assets/img/icons/users.svg
new file mode 100644
index 000000000..87c41133b
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/img/icons/users.svg
@@ -0,0 +1,599 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:i="http://ns.adobe.com/AdobeIllustrator/10.0/" viewBox="0 0 60 60">
+  <!-- Generator: Adobe Illustrator 28.6.0, SVG Export Plug-In . SVG Version: 1.2.0 Build 709)  -->
+  <g>
+    <g id="Layer_1">
+      <g>
+        <path d="M1.1,20c0-.2.1-.3.2-.5.6-1.7,2.2-2.7,4-2.4,1.7.2,3,1.7,3,3.5,0,4,0,8,0,12.1,0,2.2.7,4.1,2.3,5.6,1.6,1.5,3.2,3.2,4.8,4.7,1,1,2.6.6,2.9-.8.2-.7,0-1.2-.5-1.7-1.6-1.6-3.3-3.3-4.9-4.9-1.6-1.7-1.5-4.2.4-5.6,1.4-1,3.3-.9,4.6.3,2.7,2.7,5.5,5.3,8.1,8.1,2.9,3.1,3.1,7.9.5,11.4-.2.3-.3.6-.3,1,0,2.1,0,4.1,0,6.2,0,1.3-.7,1.9-1.9,1.9-3.2,0-6.5,0-9.7,0-1.3,0-1.9-.7-1.9-2,0-1.2,0-2.4,0-3.7,0-.3-.2-.7-.4-.9-2.8-2.9-5.7-5.7-8.5-8.5-1.2-1.2-2.1-2.6-2.3-4.3,0,0,0-.1,0-.2,0-6.5,0-12.9,0-19.4Z"/>
+        <path d="M30.8,1.1c.9.3,1.8.6,2.6,1,2.2,1.3,3.3,3.9,2.8,6.4-.4,2.4-2.3,4.4-4.8,5-.2,0-.3,0-.5.1.7.2,1.5.2,2.2.5.7.2,1.4.5,2,.8,3.8,2.1,5.8,5.3,6,9.6,0,1.1-.6,1.7-1.7,1.7-6.3,0-12.5,0-18.8,0-1.1,0-1.7-.6-1.7-1.7,0-5.5,4.5-10.4,10-10.8,0,0,.1,0,.4,0-.3,0-.5-.1-.6-.2-2.9-.7-5-3.3-4.9-6.2,0-3,2.3-5.5,5.2-6.1.1,0,.2,0,.4-.1.5,0,1,0,1.5,0Z"/>
+        <path d="M58.9,29.7c0,2.8,0,5.6,0,8.5,0,2.2-.8,4-2.3,5.6-2.9,2.9-5.7,5.7-8.6,8.6-.2.2-.4.6-.4.9,0,1.2,0,2.4,0,3.7,0,1.3-.7,2-1.9,2-3.3,0-6.5,0-9.8,0-1.2,0-1.9-.7-1.9-1.9,0-2.1,0-4.2,0-6.3,0-.3-.1-.6-.3-.9-2.7-3.6-2.4-8.5.8-11.7,2.5-2.6,5.1-5.1,7.6-7.6,1-1,2.3-1.4,3.7-.9,1.3.4,2.2,1.3,2.5,2.7.3,1.3,0,2.5-1,3.4-1.6,1.6-3.3,3.3-4.9,4.9-.5.5-.7,1-.6,1.7.3,1.2,1.7,1.7,2.7.9.1-.1.3-.3.4-.4,1.5-1.5,3-3,4.5-4.5,1.6-1.5,2.4-3.4,2.3-5.6,0-4,0-8,0-11.9,0-2.3,1.8-3.9,4.1-3.6,1.8.2,3.1,1.7,3.1,3.6,0,3,0,6,0,9.1Z"/>
+      </g>
+    </g>
+  </g>
+  <metadata>
+    <i:aipgfRef id="adobe_illustrator_pgf"/>
+    <i:aipgf id="adobe_illustrator_pgf" i:pgfEncoding="zstd/base64" i:pgfVersion="24">
+<![CDATA[
+KLUv/QBY1D0DGjbnoyaQRGj57zGFiiQLXVByXCDQcNFz92Cxu2VKVZewhjKJAAAAggAAgLYJTQpm
+CirVgAvHrgbfsivKM7x6a03AG9OuGaXRcIxCyW7snrQAjzocX4x9v7Z9vvHJveuZFrB+NwpWF1rk
+9sTxi7WcrcVMv7eA9Va9mbB7j5OhgPduzfVta68Mx/drVmm8W85b9WZu9/bANgy64Rg+uTecWrVb
+wFugvQFq+kXPHO1dua+V7GZQei5greBOAHD93rbb0eb7dWqWc6FFbDh2+UzbKZcWf8t2XR5Mp8Z4
+RoGgW/VmUu8bo3yGbzd+uWBbq1/apbXSctZzPKO0VO3Op7t2tdJyFnStw/KHp97OrXozPwzFlQyz
+bFh2QfU8x+wbAL7d+O2UUnDd3jI8czgPHxrfaPdrvzVHq19N691yvqkZBcufT2MkaK4XnHo1CItb
+hmu6fgMMaO8Nsww0235rmn55tLFbztShdG835d6vCwDVi6pfs4d1p2AAvMhawS+r+/KDpPhJsPfR
+G0MBAkY/YID7dr5b9WZc833PJx/PM/ppHQXHNgAq+3499+txb1d9Y9rl2pAAENd82y9UyZYTb3xy
+4Z56W6g5lmd54djcr6d2A3T45HJl+6UH3G9qlm/Z8mlefutUDLNQjIhduwFKtpxYuHV9fu8rdgO8
+qVleyXB9ez6txGGZQ2PY7/06wfV9u483NcuxS8BCi7ypeZPRhAbUrjzDNwqGaF+JwzL3dtUyJa8l
+0IPecnK3DWdQDpahOFiGZQGETpz3vt/Y5ZQRTfWqn4ZlkQ/LUiGtax3LOiGNZymNJyBoGo13DQCt
+awoa1y4ax7IBIY1j2RnqaBzL3NCAxt+YdsGeD8sc2utyN5/GSLjjl6t6VYQFlkE0GYBZxnxYZr/x
+gNtz12dKXlUUy2y0cyyz0RKHZR60xGmcd42Hmqh1zXfx95CXfQzBzkuPa6UYlmToQVEsQQ6SICiG
+ffRg2ctR9LgWiiVYgqMIdj+W4OjxGi1xGphx3rnnn4M85CIfOclLfnKUp1zlK2c5lvHeu++/gz3s
+Yh872ct+drSnXe1rZzv33Xv/PehDL/rRk770p0d96lW/etbz37///4M//OIfP5aRv/znR3/61b9+
+9nOwgx78IAiGoAiOIAmW4AmiYAqq4AqyIA976MMfgmEYiuEYkmEZniEapqEariEbYhkXu+jFL4Ji
+KIriKJJiKZ4iKqaiKq4iK/Kxj378IziGoziOIzmW4zmiYzqq4zqyIyc76clPgmRIiuRIYhlJluRJ
+omRKquRKsiQve+nLX4JlWIrlWJJlWZ4lWqalWq4lW/Kzn/78J3iGp3iOJ3mW53miZ3qq53qyJ5Zx
+tKMe/SiIhqiIjiiJluiJomiKquiKsihPe+rTn4JpmIrpmJJpmZ4pmqapmq4pm3K1q179KqiGqqiO
+KpaRaqmeKqqmqqquKqvyta9+/Su4hqu4jiu5luu5omu6quu6sitnO+vZz4JsyIrsyJJsyZ4syqas
+yq4sy4pruILrX/vKV1ZdVVVNVVQ91VIlVVENVSwD1a92latrqqZpiqZnWqZjKqZg6lOerqiKomiJ
+jmiIfrSj7Kme6Fme4gme/uTnWqZlWY5lWP6SlyuZklhWkiMZkp/k5DqmYzmOYzj+sY+sqIqoWIqj
+GIpf7CJ7guFXwVQEw/VjmfpR8YesX0k/+rWrWHaOXAS/71hGnqTvbLli2dhLvo5Y1tfxi14Fe8iC
+bAh+EMs8uHq19GTHMq+mJ5adJynyky2xTC3VMi3TEv0qmZ5kSZIkSWKZ2NURy0I2XEM1TMO0DMlw
+/OEKqh7EslP8YE89SoL+e79iGRquXD1FkP/OuYll7KqmKJahZ0mOqIiKIfh9RznKUSzjKHuy53qu
+p3qqp3qmZ3qiJ3qi53me53mWJ3mS53iO53iKp3iGZ3iCJ3j+85/+9Gc/+8lPtlzLtVxLtcQytUxL
+tDzLsyxLsiTLsRTLsAxLsPylL33ZS16yJEuupEqmJEqe5EmS5EiOpEiGZEiC5Cc96clOcpId1xHL
+1DEd0fEcy5Ecx1EcwxEc/+jHPvKRj6y4iqqYiqh4iqVIiqMoiqD4RS92kYtrqIZoeIZkSIZiGIZg
++EMs8yEPWXAFVTAFUfAESXAERTAEQfCDHeQg+9ev/vSjv/zkH7/4ww/+//3nn/WrVz3qT3/60o9e
+9KHHMtB/3z333LNd7WlPO9rPXnayj13sYP/9d997553lK085yk9e8pKTfOQiD3nIQf65551zLBPA
+MgQsS6Ga17iGZYyVlnpdrix/Fhrkll845datjGr98Qhd720P8LwxCr5rl+Oy4Xg+uQZ4PBrjpV2W
+R0vJr5l2zel7wy+PVr8pGVaxbpcTul/ZjTm3DLuZ2pXd+A0AZ+yU/MaoxgoA36iXtuuXg/KgYBbt
+1is4jt30rs94ngvu+oznuUBj2a8a1Vi3y5EH3lVq1ewTnGGhbhcAj1bPN5xaNbl+79vl0HP8BpBX
+Vz2rXnWhMbS3dmOWQcOut9AYKxlGuXWBttAYN+pVOA1oqTcAuJ5v1AtaYNmski30a65bGV69Yk6J
+3GDZSoZvGa458rwJ6df9elZzPNccGV699i2/LtecpuSV47DMo/E416QlL7/37cZsqfRgJ8MujmXp
+S+7L3jnpkZofU3DdlkbLySEyvILrgXflcrgRgBcGham3lJJXAMr3duX6veOzNPbuu0aOotdEXmrj
+J7s2lmXocd9JrXsvBD2pca17oQaKJBdD75Og1sPyjyLogWHXIC8Mmgvklx4o8Q5qoIfcq1KAkgou
+3fJ7y3NakuHVi5bGbtfvADfjem3I+xXP9tu531XtFpTC7sZs/KZmTdk1yBu7KM+7qt1MCfQaxL5h
++VO/8avDOQh67vosha88bzQIAC8c4BU7qZW8e1H8nHNR9D4XtU6OPAzBXpZlWHqgf2hf5CU5/i+W
+Zfm/R8Zw6Inl10Iv5P+93Zh2vQWiBzXxf00UvyaOXoPYrdp10XPNSJBnGF69HYQF1yBo29Eg9kqG
+7/v1vCvXZSmNGuRdufan9Es+apD6Pblem1QMv9CS75aza7frqmf2jWG2FFpODstaKDdGNYhdz/Gc
+2vaLmmvOLb+uF2pWOQ7LxrJ7kOzgGIakB3pQK8fuQzEsRTIkPfB/LeTkGHYy9CDYvVH82vfkCH6Q
+/w52z347cIXjsCz0oBb+r43i18bRaxABM7qS4ZT8mlGOw7JPfrFrkDcA2LbdALKr4WgkCOla6Ln/
+Sv+FGuS9XVWeYcYqgO3Z9Wu/FhrkjW+4gOOwjLHQGJ3V81lokHpmRY/0GkSeYbt+QSXScnIclnEP
+9Bqjs6jn261v+xXHFk2D1PPtvnXKcVimce8/3tOcOh8ezsYFJZGrgQe4ToWvRqKWmsDojBt+SCRS
+D9JB0yV8xMMnWHkBQ52wsAZ7NZyNzjhJ4A/hAUUMsK5fIcnHFTKp+eK21UGcFizXJTQ7xT+Y6z1D
+OgdHovCIfzC/B/x4zHWYD01TlIemLL8/CodlnsB6oIrGSQGbKu6PwvUJx8KZPgD6kBK7ouerlJvz
+a0Suzmkp+NBfKV2QUilTqkcPjo09ox2HZWGJ/Tgdcx4BZIJCFEJbs1HGSYMlIG0Oy+rEqLAXBgGQ
+PBKYFZJF6YPdgHgDOOocEMHgVU82gYabOWCUCwoVtz8ClQSHZRVy4jjcNiWR4h0NPMB9BRtvMz92
+7dgERpHFR1S6AWnX3VrX9XZJpHilIpIYOCzjxE3X4rB1vW0Cn8eokPUBqeaw7IsKWUSxBt1Hqk+H
+CN+ImQ2C9K1Sn7AE8bBKCTXJFYYtqYqfLtVIQARvgBNJqA8+UP0FbJ5Qz2AixRV3yH0DQ0tiyHhU
+g+yIeeBbMrGBCO6oLs10AhKBLAzM39yAYIn2j8qTdA7L3AcI7KZ5Nrp9ItQMyoDBdpyQholnVovJ
+O5NMtuUqhUikELggOTYcpAV/Nga7W0u2Aquz6UxuAhdHjYNQAg9HaKbAoMBhmaGTOBOpwHGgsioG
+aU1SDLo1Y7A5LHugcI0waKAZdPIw4Jr2NrhniTDgGQS69C5AEENXyZ7L6WNLSKCFUWt2L3Jh/IAi
+jVKq4PDIlCQO4iqCqUDUeConlGHAAlsK0JXl2SYsmyF9zCvsukwCx7wWMh7eIdyt1MMbCGBdc1jm
+oBc8jFuQ8GfljQc4LPMQoIZEiTLky2DpfCLFxwOzk/ddGQlcGc5hGXoArqez0RciJpXh5wHbGq39
+wPPCkWzZb8jAksWDuHiIEjaWDKhFqFAy9JhIcU43FkJXqWKwOSw7OBC0/NWAmYti83K0XGBrDXZB
+wczy0nl6OBybkMBhGSfyZQSpwBHAsBxBVKoiJEKh4JhryXKW2OmJFM/E9OcAkliD3bi44JV/RCAD
+wR1tB9GxLiYdh2Wewip76gTH7Fyc1oxnyYtNpLhCIjM++sf0+tyGAaXBkJhepk2AaywgpheHZYzN
+J450IgYYt6HZrSKFu2CF9uc9MH3SvcjM90RDJdLVkkSKF5QuPcFh2YJC6fWpioTNXkQYl1HmI1KQ
+6OcTKW7xdIiIZp0clnHUnfpNTjmmCj/JEL+5XFb3W3xzWGZSKt52UFmYis2Fodg4li5C/cIDflxF
+HRLbafu6tjOIMvM9DstuMvM9/2nlExE50JwHCpLuH05R4m9ChM6ZKkxKfk5XnY/BP573aCrd/xSJ
+c3Q2OspIt7DjAG0wsbVmx2HZ7JkqKYIixdPGI734gwM5Q85GTxc+TiDWYA4iIaYxUTksI0F9EvHM
+YuUk61G9WhzvQQVBq1dkcjFVeGdTK1AaIQGTbzjC1acdo/k8cwKHkqJbw0vY+8IRDBRI2aA2Jp/W
+4P0Q7YUp4irVlXQOlVZbqlT0Lpj8CAHir7AjsfGVS/BAdVuBh+o2gn8+NoyH6ra0ZXbbzSGKbpS5
+jcOyL+0SBQosx+Z5kI9t46G6bbt9XR9aoY/L49noKMkpYQtE7IHKD0b1CgIPZtYzEKiQpl1iKByW
+XTa04zxJzLpO31KFzyCB5kwcrBjO6ZsWN7Dd67f5BFLYdNZ8C9Nc/V1w8Tz3IURKQmMneBtcBdhP
+AWng3EatKq1FvHMSweCcw7LvBJoMCKgy3xsHJIlttO3EN8rcZqLbbsuENI7N9OO2ozq2lQRybGPa
+JbY+ylw9qogNIVWyGAi67UCB5dhmDlFsjrRLbI1R5jZ7VBHbLNowNsnKTWwPC5jYHAOSxHaAKjm2
+AdY7tpFn8MYjPBtd1nBYhqCQTj1DsDX8gOXC6irEceGJCWXzdViS1TPtOJ5nauXoBq7R4gv7Iuk4
+LNPY3gYJGOkW/ps16UwCdqKPptbLfy4C6jN5JIaS+S4JqYkdQJ3t7KHp+kodVA7LRi5ZeV8hoL66
+A8sOgdVNVMv6UVEOWuyBOtNw/R0pgZU3Ogioz/bAspvVgQSIRBVO/MNlYOIOuk70g9Riog4kNiZ0
+5KUGqx9VDAQqof15HJbRntDsFiLJx72GPzY1pHFsHsir2zyVibGxYJZjKw82jE2gZXZbR/E9Nknl
+MzaW2JF0HkIgAHpN93EOcl/4i5S2/aPgsr++oC2K4WRuvpZ7qM5h2cRGoLomfPkTJS0c3asykk40
+hWaX4t9gnFnTQ+DAJR6I5CfRr4ColCbFk0hx0zQwAVtqaHaqKJHiCk338e8EmnSjKTQ7LjWjXjUk
+LZbUc34aROvdcn5Ydgt4C3q3nC3IU7+Y+X6dLcgj4C2YUfLagjw+9Z5cawvy2KeX55Znttsw6q05
+Lm2/LnejWnFakKeHWpCnQG1BHtScueWZbUGe23YzsD3LsKbNslb2jibgjWk4TtEvJbsynIErAMys
+1Wv3V1W/nPgVAHO4529Mw3f80rwBXI/scVEe1u3SpZUMB5g1bwyzDGhX9lhOTfT0Pqtky2m+pOr5
+tes3wFt7p1mBx+4tw3Ucu7Ibn2i4Zb8rdyW7tXeaFeJ4RnmnWeHU4Fs+NQ9n1cSCAc1yar6jYFU7
+tVuGI/IKtt+Ud5oVAqhnFg3HKi9Vo04zXccA1C9Nx7fdUW588uoYRXupGhXe8gv70XXd8Ml2vdOs
+8K5cF+zV9BvHMyp+U7MrRdNefNszyzWjPLt2T/Ucz6xZVdP8leFY9aa8lmvlPX6/tmff8H2aFVQy
+/K5cOvW+MYqa1dd+1ao39lSq2Wu5VnftqVTzqq49WsCn3bh+A9RxTdP1GwCuVW3ASUu9Mqx61cVp
+VuColFfTtFfTdNk96P/IOfffC8vQq+mw8156six76XWQfG3WG7t9ACqmuYxC2V6qPr1s75ZV/JWK
+4dtL1agBt/3Gp1ueUZ5Nc5d2zageezYNxyiPFjCj6NmjBXDPhXpvGfZcKJT8UtUor+VauatX9mza
+owXAJ8+mU7MrTnm3rIrfAG9cvymXZXs2TXu0AFl2WbBqrmnP5QNojBFnwMCzGGmp93bnVDu9Bprn
+8T4Lb1XPXqpGxS6PT678wrfserQAen5vmAWA7dECbM+uU/XLuucBLpTnQt31G0CeUR4t4PvuefNp
+nxZJ1TPq7dhw7YIsp/y2cOauz9R7u/UK1iy0yOm+9UnPdWo5yS+qls+nFHn4evCUQo2ph+feffwU
+CD5GFZl6oD4HSTf1Lvz/mhc7WbuaAW5M27DaYXvuzAXx2xn9jXrj12NbOiennwtbS8H1ShuAkt/a
+pW3ZrW+ttJyn/sYn7b3deLbhlXa/5hZqllua1u8Xfb8G/oplvxqttJy91rxGetCHtw2rKxkG4IVB
+JHizVnD4w1C8PeTI+wfJlXy+KJe9VW/mNadx/KZht2uYjeM3Hfsnte9LMixHkBxLr/dxrMhzAHA9
+V7wnjt/036o3073o/SiS8ox6PQLelGwZxdH/t25HMgRRsiRDei4oRw+CpObLTqJcOnzto7Wvo7ei
+EDWJEpRYPCYFwjO9alXmUjyz0HRlB0JlDhgRFoJzHWZjsG1EmVIvID4sD9jjV5HxyC1OPRh4EBCR
+JDJ8HfbcOguogsHKnOyBetsHjm0rOqoPXVDsr3BT5yO4oNiPUUDQnBT6xf3NAIV1Lj7vAFcAzXvm
+hGaXehGcKyhgz820AWnHa2sIqCGF00CiBC0cKj4sNl9pMHAtVuLSejgcGkdIBCfEJRrb6iABRFGV
+m8pAJQU/FLev67tDll41SO6vOjKP7JrDsm+t65pgoTFxReib+P07Ja4KkUh8wHBK4IyP44AvQA8D
+/pKQQDy+OYirWPaHg2BLAS+/xsNZbzzAVypXhpc2lgx/lAQtz8Azy1UCDMshD4VVYV353IILOlEn
+ItCVC2akOxUk3saqkBTb2eiKLdGNuK12OQVdJVQNpsJ7DMh+XgTujwJ3CkyezNlYsb13wnE8bwe3
++Tgs87YS/SlCxXAXaG5RLAgE7itmWfUs1JzFd+DjdDdVuMg+taIQYkHksE+tTQqFxLpUlxYQFa9L
+dWlh9LvPx7fs92vZH+QLCgpCDIbHMFW4o2swTBWeuu93cVrzuzieEKPkKkruy71UhQkxDAIIhhs/
+EwLIpMNousvr0icHHsKclRBo7RiOW11MbnUxSayLcHIzHJ5s+Zps1WSrJssWgyU1fmUXkU9FaDQY
+KkLbYBUcryK8WAQXYsHksKxCzwiF/XEimwBkE3BsAggx/TlUSD+yjEik2pInO1LXFAQ7iu3nXgDJ
+lkywIyvBoTV6D6v0taSN0JIXn1AfWgM7EqJGdcxmRqADctgE6rpC2h3EriG8TYnAFOvNJP7n4NCC
+NsmkbkDuIHIEMKwCeyACRy9x4XAQNQ3Oci8xveqOaN4EuAb7WVfOYZnXTa86xABRpUtPsMLWLDHH
+VujjYQnz2DipkmN7MRAWG1mwMrbQltB0AoMP1RUWl+rND2nht9Wy+TYiBdVjlopDUW0Chj8/XcW9
+KvNitS/WZ+AgxLBPXqriXqriXir6vPThpd4CogqFQqG61C4gKt4dTga3pww65V+aKlScFrW0CBRq
+OBYUqsaCQhU5G/2BZY5G5Gz0lv1nUPtBrfnpWvbLaNkvb7wKPpHiaSLFU0kixT+j5L6MkvtyF6c1
+PZ6QJ3RQEEAmGH4XTP7FtVAi/mXBJTwI4mP65OJpuo8zKPfbml3FNm8ue7yvrComkjf5TvImQ4tV
+eYhCqG9TbdlqU4uy1aYWbUii8GTL7EDWXfCnz7os66qjtaujtXeJh+ivpLY0E7OfExx1TnBMg0dN
+cOpU5SRno1dI1KVArJyUmsOyRGsm+XYrtf32m4pvUu3m44QqhKI2So5+gxH4RO0D7nOOR0yZsARm
+WeNLIXT89unbJy9lfSQKnw4kDF5DVxm6ihu6yi8oVI4FhcqxoFDRohYUYoBCoJBltPb006KWFrUz
+aIE6fNey39+17N+17JfPoE/oE0oXjJH7TD6G5v5GAMEsCCATDO1QYA4EkMnGfSb/5kAml4US8S8l
+4l9cig5BfA7LMH1ycSUMBgjiX75Wifgiy07wFgUGy07wFgWLRcFy2wmewzIL41YXExsClkKoNzuV
+lbfNO8FNbt8rju87B0kU/kPIGNzZn1YSwcBKWj11tHZ6Ja2kdSU5RN4IzHhceElwVhyW/Y/Rirx3
+sQgXD9VtFHZ16gkJ9+gbAQuq1/aL8jUl3Pk4LDuwF1ZvUUqlC7AQR68vAhjuMRYOkcdYGHFyuIAs
+IH4BUfE05C0gjgVExb3G4HZucHtqcA1dxRdGrbkwWhi1D5HZGYQMXdUZuoofLCAqWkSLaFELChlE
+oxU0WjuHZenAaO0Jj/N6CwpV9/k0GKYKLwjJHtnTyp7W9IQ8M8gTelFMFZ66L3df/ii5L3dxWtO1
+MFV4qjiYKlyxEUAmGBoDYmiG5DP5GBrTP5OPoRsEkEn3oiyUiP9flz65uC4l4r8ufXKxZxTTzX9x
+taV5wfRJyGLZCZ7BshMU1nUxSTfZTvAW72Qn+Io9oxVv3l4plDCIUN8LHGbXC3xlZd71SIvaVva0
+nIwoW75NXSb3rGlTLYJE4dGO21JtsmX6NtWxLkuno1V2iLiK0FicJJGz0bvIK8FRERqLkwT+EpyD
+K8Ex04UjkeKuS2h2KAQJg0AJ8QawwtP/qj9J41V3JpuVHUFFhSy2pOKLZmsyV6lP2JK/cwJFNCQ7
+wgGpCR+jFdmRcUFA+RnzNaq7miU/X1QufEvan/eyDnaIYMPYBFjj4lWI6rblIqI1iU6gr8UdRM9G
+xXLvYg0IIvAg+gERZbnnsoaQCKQbBpQGK/wtwmbtENOrJhCBMcJkwWCFmgFUpONapVf96B9HRztu
+JWHQUR1b2lEdG9syu81TYDlE5eWxcVi2lpfHRvrno0QgP7bVQ9FYfccgLn6kts5ve9AWxcyYm69A
+daJ6gnMhlNfdxhQ0PV34wcdIOtE0ZvznpaUQ6tPPS1XcPrUZTJ90opAoJAq1pWmf2u6lKvtkn+pS
+41WqS623gKh4XQqFOkRLovDcgSVR+JNE4VN7Riv/ZHahUMdhWV0KhR4GC6OF0cLI4HB6hQxuN3TV
+wqg1QaAE6DAarT1VqBYUKs5hGV9QqDgtakGhjmGiP6GOYKAtzRk0g9oZNIM+oY1zNnq6njJno6ct
++51BM6g1Ow6wkz3tb7wKL+evwstfhXfxKrzcxWlDCwqVi9N6QrfEVOEpxFThKYdlhwXQVOFpV3Jf
+7uK0HQ/4cRenxXBYJnKfyd8IIBi6LU1M5z6Tj6EXkM/kKwggEwx96D6Tj6E/jeN16ZODBUTFL67L
+XygR/3Xpk4trAUIQ/19cF3tGO8QCgvgJTHtx0SXiox3XvnSQZSf4W11MQgsKFbcozKDW7CwsO0Gh
+4GgKQJOfWNzrwqJgWLATLAqMe2Un+FpdnFqzq9gz+m/W718phPpPyX15ZZXg7hDqEZO7sjI4SbbJ
+nQqh3q+uIsUrK8f3nYMkCu9hGahsU52BlvJKFL7xKrUvkkThOSy7yZZnFdBGb1OtPaMbe0Yl3cz6
+vMbgMv7p+9wvp7ADHUPJ4DogB/h7+RNrz2jXGtxLeYB6GvJpJAvUwWGZyNBVfCV11Jf1JdSX9dGi
+1uzWhzpaO41H2iUwLe1QQ26FJxgmDQFk8hB9DPpK8Ctp4dBIFF7xKlnKltmt9ox2tACDNhMe5+W1
+Q2R2BGvDHK0dwUtVdak1vUhrJ6x9TnDMjsCgZb+8AXoVXq4anCTwZ1BwWMatZgYTQXw15GLWxQSh
+fxzd0T+OfrDZWePgVtNXFAi3qwhtaTYO6sv6OCzj1Jf1oQuUs9HRjluQWtAmx4UXjnZcOsGhx8ar
+VOFcwlThnE9bmltrdqo9o4yw41gd5rfwicKnobY0FZoOFEk4EAKETUB2vUiu1EHKqJAvh2WlyJcR
+NdftWoDTkig7cj7cjth6EJcghZG2ZEcEPt6NkHpIP2xJOwJJNRKwJb+XaMmQHRHvkPst+RszSxbY
+kYHQSloo30iGFQIr5D9cVnbtQTfku/JOFgXI5GjDreWwLFj2b9ak+77zLwzD0OS9yXP/eW+q8IfD
+e5NZV77/+meq8O/7TBXu+D4Tp/GlmNZgH0TvcJgqnA9M3MWCgPId/eFwODgsazg4LGM4OoN/Hodl
+DwdjhCBC6/Wbt1Dl6y/fGhj/9rVKxJ8X0gmiUY8Pj5Q6SBkdcvo1QjeA8Bp5bFWgpc4c06v+KBi8
+hAqGgR7KBIINbq8WNLg9AWGyYHBYxvISV2F4Bz6uGUBFDCXBygso7pI9Cs3ul+wEDxRCvUdqu0M1
+uL0jRBL/ERmtvTVL4haWnJxQ6AsNL6+wrMFO33ZiGgyVdYJIGSDbcKaGOUxQuoN/PraL4nuEQhrH
+5uCpBePw8IAfnzkuL5HijvBs9AaF8/HX9pn8Tmun7AT/ni1TWgGNZvdtQrP7IHTbH5vQ7B4eqe2b
+hqQl9QHz43wWuKg8pTGh2U0wp5B/FvPjCx2Jwi8oJs2ljt7AmGTu6AvmbXYLTIJXvgqp7d5CifiU
+Smh2HBRC/chR6SAhAwy90PYWnN+uEvETHAP8eYbWx21SCPVdKzRzGAdFgcdXtCLeH4VTxwz0okEN
+1sU8kAARUICouIckiCm32DD5yQfB8AMFo4WY1nyeh45nyYouXP5SF34AIc/GwVThH2nBy0ad+BgE
+Rok1CQggvncwVbgIOb08dN0fB2lWlmWQnZqKQCaWAEwIzQ5caRLf4ntCaHYLA5HZ8YTQ7PgAI/G9
+hNDsOggQj1BIjNKxcp7YiwehQuvj5UILtSJa6j+ASd7kD/hB+B2gSo+D0OxEV2T14DcIzW42CLtB
+aHaMhJPZcYPPIDS7LyVQ/cMgNDvUOFE9WPBJoo/3gtDsOCd1sMKIl+dckQcJ7Yvg3CEqyRAwBNgK
+w6OpZ7Ng1IwKxTkbKy9GOxHKhOELQrN7gA+Gr0sVfhA4mB+CThCaHWmZoPpHEJpdlzxQHdU4ICMC
+5SAIzc7rVieC0Ox+Z1LprVlibkKz++yjQkFUurdJgavWsTktPm1jE5pdYwFt+yqlv3ckPVBdpsOE
+ZufeJQNTYikc3VIJzY/10vDjNUII9Q5J+HHaYnC74mCq8MYYfnzRw48rvPDjdyk0O29xf7wWhaYj
+5pidycCgZGBAWgCFp02snKMQKG5NOXMQIX2KwcppHUo2krI/iiGVbsRQp01IQy97oL5STjQPEFY/
+SAx6R5AcPGfr5IgpFXE7P8WbNbXpz8v38bwGAXL0UZlRZDKfybchDs1Cg0khiL8ACs2GSJKyXoJ5
+HxsFlkP0UN22LrTdhqDAujktAfsN3AUOZZHZnP+gQfnzYoJAKAuqgkNRVyvNh/ElCAVRh/5ELHBY
+xmEZh2VbwkBgCYUU32MTz4JGJlVybD+G6YVMz8QqDkXxPWJK2qktCp1pN18nkmF118ijesss0pyN
+jct1EogyoX8ZgHfHIjkssxFhJaFbCKzewOw4M7XGhG4L9GN9KKS/aH/FhmD42VjPT4BK6CdL05ov
+ZJY+lAarGs8VYeHooxODw7KG/UB1G2sg6LYO6x3bJ5AfGwLDNVkYbKfnD9oX63QhHAzw17adnz1J
+nU/hSDBtRKV3SL85F9yO4QcNTOg5LKsUfPMW4rDsAVlLtoJL1nQMDstA72SFdKpS5quML0PJhsBJ
+AbtR+opiJvdHuTcOy+CLQdslmdbLQwgXVn+hbPZjMC5IgXiz5jOEPJ5XeB3+THAgR0foJjdr8KF/
+EbEkGo8tNOGQtGY8TIXA+b8FN0GyKbjxyTbiVok9uTlaI2BdbyUWVkGSwqfgHDU6E1N2iMwOkvE2
+6EkUIBi4QvvzFt6EkZXer0KEBTqW2JEwEDY4XSjGfz5C5eWx1YqDbrukSo6NBeNuoywOum3TUR2b
+4iNbvKNBsni79ar+dTCyeDREn3pmg7YoHJbBBxnN57kXVgetxpjyKRLoN7RCqE8bjzRxe7g1U2l9
+WGisHqiecSEWTAkCBMMXHJZxWPZqmbOIi6mDyvL7o3hA7IHqfcLKiZlkPKjB6umvsPUvci0NbYjt
+XUjA5G8VPnWL224+Tl3AoYyW7uj1ZOR5mX5RfiebPhQ0Bu8Hh2V8wf14xwFyWPaFJg4C8ZVYDssI
+SF3FDTiHZYqx1XXPJDksA7VCH1eYNsfmqGvGVglpHFvqn4/N/CfrHRsngRwbZCPA8CiwHJvnZegF
+xyZwUDQSAw+GT0MLFdfEEAiFw7LNqy3KprTqfJwEAdXv2e0+ZzEw+dedEFK4aXHAWdAxqbFxWFbG
+rdmRXBBSiFnpHkGvGhuHZSWUyV1PavohBzqhUjksI7hwWJZgTE6yRJVyWFabOp5aYo0ilEYJ5TnD
+kjl1B+knLbPbuIfqthGB/NjMGGZspAf52Bxog7FRKAzH5glpHFv9QHUbpmV2W0bxPdbRY/Nog7Fh
+vWNDPVQn3p4Oo8UVEoPeK2KK4RcuZ8lXOu3mQ/QOqlcK1sRfE+N4oqHThYvwAig0O5rDMoFQquIM
+7+XxbKgI0MfksEzho+KwzEWgelsxeupIVrTQNKU5LAvdBOpWn58DmdS1qK7MlIWQAkSpEyyceo7I
+hKMlZreVme8RQCZ1TD7kh+L2I1JacJbU9ENGCyuEgkBsrpLvEB6qb4Ce0dprmWN9pjBU2QQKZwCV
+VZtzDssQd/1RBjjuS0WQTnE4cEqo1whdoKJsTGLlNGC5L5V/Zsd5CbuJym4IUCeF045zI0INVs89
+NK20KYo/OSxLeHP1LlLA0ePVQcln/nb+FDJrPgKE7uI1EZLnExALw3ui1II27Rf3OSwrR6O1u84K
+6CluDstQPKE1Q5bKguWw7MU51C6S8TY4GUCp3l41JC7J0estE6GgDK21UfqYCx47EaAYFi/PeRER
+LOpCIVJwclgm6ihAFNO3IFNaq8ldKTNltD4EDma3OJgq3OycXu4XvlpwtiRtq45UBCZySZiRCcFi
+0ULhd4VQOhnIgVFiFd/Z6Aj1ZX1dTaR4/GLN/rlwSiG9EjyaeJmdocx8b2PDKoj2WGVt2GVROSw7
+v3OB0mFOZe20LhFKT7hLrIGA56negK4w/FdiP54mzBzLkDpYPYXrrplOZWFkbS/P2arLN1IbgApO
+1gHcrfZBNDvSxDiYKjwCFmg+UwFR6XZmdp21KDQPB5K6VmWuYxOoVASoFpwZgdXAeag4SixrQDSt
+W8FdYi0SDIjygmwSwegOpgqXNaHZmamPinMiyccfLhT3F21jovCgGvRQh7l6RSqHS0Ka6iBK1gwP
+JevxGxOa6AUqSudFDVaL44WocwKyOWxMKCogVk6KKFbOUsNJgIyrCUJULvzh1LpwkMZboNzsYfNh
+NqbEFyB1DL8wWBAKB2U4f+xitLhKBiPegsudQkP/uMPhOCwTjYtXYXDg2G5/YS9iprZUfJg7IkOo
+QUKdFiPK6WNeUCqWoxiU5Y304W2tDNvyGLRfDHqk9s/UhhgJj/T0MQk8c2NjjSjoIkVgOHSw410w
+N1PS9YxobiYEMwHqLEuZg0jr9TC8wejF/psEUXEaIXB+g4fA/YqL1nyI1OP5WsKAz8YjZXWGxk7w
+kXrA4PYEuN4eFtZgs12Zj6jU9ZTJUNE5htCAiIiIAGAA4xIAABgYFg/JhtPZurcHFAADPTQmUERK
+LjAkMCoPR+KwMCASieUwjAIpisJYziHGHLtBAHSQvO6XS8KAuj9l8onyUszejRArFK67A0ERWUjh
+qFMkhFIvRuY0mP6KuhjT4FYvOlu4oq6I/SC+/O9DE+pXiYeR7SUnx7I4wpf8kg3U8UnmQ9QvRidM
+V6gLMq98mD1x3uWgRIrromVGYHCA/K8xV8YUJXtcWpsrkKKtil5kGnF+tlVlij43huqaHMbutodK
+rU/DkcOleYVA5sGVgkipXgKgJB9EdrCDo+4ywbHwwAGIgb/jdIQvUSkXXvD4rM8uy480EbD1lIZ7
+3sqUwKbGAInCH4jjJcN4YS8LahShbGi97JkoySOrGuRfg1QjR5rUCfBCyyxChU8ZsJAJpg3qXFRt
+F5o2/cMaa7uRCaShmvwhFC6yhDsoJkRBKukCHtViZxJqByYoUIEUOmWnNSGpuzzDDXcXGoReuZWV
+mbC5uQuB2RfjgAucBCFhhDSaK1eUqOV847dWVAOpdFsAFz7nEUPJkegRZOGs/ls44C3jo8Ly6d0F
+Shjh2Q4Dt6VWOOsQN2C8y28Trwc4JDi0KB6Clk/6mKSHs3JyhueomTcuAxYWcf4c8OwVLeZlctBk
+BoeM1jI/6Yysdddo2KrHj2ZlWgh7WLCFYdGTzS3JWJkcp6aWVqdTKJzFguEcrLdpRDyRn5Deim/i
+OzbRdDNKi6PGNwWqR6XXwd6V8izDsZhqbKmLhzUvd1F8cpS6wjhEONAt4EkOpg9n3JH69pKzLS+z
+iB3jlOxsXUQ6RXXLlJgjQweXLaFJk5FuA/IO6Bvbod6QrSBT/U4cgq7i4E4RGJ4fDtO/t88cnCm0
+acnKfLNUT5V+KME2Uzx27SBdBKLHiUNajHmkbOb7V/k1SooPzpKSFm2zvhN3jVEnEdRBb8zt0swx
+OZWfgoqrVAkttnYbrzVcuoQUbyOkD0R5AxGVusuHUJnlgRxUWCBVpinDMN39B014Y+uzIEVB06ZS
+tetAC4LVEjFNlgPGErO/coLtK5UNoYBC05r6onkADPqd7VJ0gEezliagjBb0B13oU6SoIRdrRXQR
+3pFRTCyLQYkiQCK0icqLNi+ud6txBi4eiN1/gmf7Kcq23B/NxxoFJFQG8taBORsUha7AG/FoifUk
+FZh3oxzRK6SGA5R7cFQs724cyfkfpDPmfptglPBmZoz9Z1TzcX/zNJ5oX0UVtizZwDMRpCuN0vvO
+f+JVAUn4RpBNVcrMhKhCVFUgYzFCEiM2Wfr8R0WxmJV/8lRgcbtljOgZMxOZCvlaIXEbnG6xTpK8
+wTtG+SV0wD6plk4mxnofNbArhol0bTnc0mbF6fvpqYb1apEqt0mnkH+ikwQiP+4J8FUhOHwOCyW0
+Z8Fh6MhoIvLWA2JyOt+w+MqSSbB+PaCIoq7qWM7WQNR+vU51FzacS4EA33jFQLb7fQAkr01sawsH
+G/CF1lkqI94+uj8vdZO1iw2swgweb4kpXckV8zt9amKoIw0hNf0AUjhu0XzIYqGx4JvxrrN6RDW/
+/6IBcdskNdmIrLyi5ryLqZnMvsLKgb/8gdV57wW4AsDwjKKP9q3PzS0caWofEqLg1HOZC5KA9zBQ
+NgNnd1oWNbIoIU7qt27SAE3pABD9kFi7m8vk0FV41Zy5cNQVSdQibkTT4nBFvNtua+einEmckKtn
+BZtO1MkHBuAjrF7llD0HP5gVh+AS5GhJ/fiDcDscbzfizbxvdGJnlAsLAZ9HfbBQeSvo7iuB6AN5
+rC3/862L8jowKFOhNN77aWqbxxyIVHpF7OB2z+S0PjtLRUVfUdq36E+DkLVJAPmasXlckq1fGGHW
+rlhs91p5fCzBMUtILPVt9rWk/5o+66tUmyLn4BA3epoHkgHP/JWUFahJ99BwN6HRwNzp6fvEbW5x
+Isacn3ggCvEoQH+Si6AeXy+0kG4kaqonfoChIqRVoX4sPuX3mzNxhOx8hIeom5rl0iN9KAHb4vZq
+pbITl7YEqCoGn967YOLRplzgnC7jnlH81jdbXLuvQkxmggp7vDLdWeInbmOBYC3O2bVoZb9kbXEz
+WJkcHbrfAk7cFYtTOkV6JxmN0W9g4C91oyb52hnVv2fiMN7lXrDqXe7fzALHstbDKd5/VwROGwyQ
+bvt39q8iBPQJ/y32UuA3qHl3yPMGAi8ybVLgd+Ell705QlaQLEaR4AlXgIDINEGzC4z6b3Ejj2Xx
+pt7tkMwgkjjruHCPcmnhlH/3flTjEhAtV5oKF9I3FPhvBYgJAgv/feJui5gpn6xw/NJmoObFzIs1
+X/fve1/YLnBCb+3/78sf23MlsZxdTGYC5//0jf8emsARze2r/W8eyskgYneU/iTlPmP3oYrqI64q
+qxR5cwL+oQmpcv0624owOrUYSbiH3S1yRebbJbUlp73OIZUD+FixfkguilSAiqT9cKQ5bcYUpQY+
+jCS+44/kXAiZXRt0xzP8l0vcZ+4HCvZPMLhmKgkEopuEywYr6tMh9kCwZQa9TOUvJ6aRdKfDZRW5
+YJJaukKpwFB216AFgYCrzTCQro7WMWANT/BPuv8YZXBUdg2unK8vRrooJxdgBaDs1pr1boU7VPHZ
+VBiqmH2eoUpCrzekpPFVI02FRISoiGPgHZdCkUrLVY8aBiFuSZILPAiVGlYzbxaCYn8QI0lEWxN5
+M1wyhrmF0uAr4sQhkkJbUsxLYiSU5EmWTJ2bj1cC1JZZXH5VSE6eUV+ksri8VVrym23JfLewJD2U
+Wa7FQOZVW5424fhZDVasrEzNRMfLtmecibJgG802b75RctH8gBSOrw2dIvBXAFzK27YveGGTdvix
+Q0GJK0X5E5O5lYZN9y/WZZyoO3SX5HURyQlzpZ6emAoRt9mZEGvJdnrcBvdYYJfzHWJXsMrg68Tx
+g2G0I47ER+OlmP5TFIrmBTpqgiQeVMlykNI/dgkY4mNHN2+YAsqN/4AtloAS//YtFUC4GqaKECkX
+HBNOqY3n+Pg4sXgYOx5h46WRNfwM6ABdxjO9i7OAPcg7kL86r5vzu4Zz8kZeO+jcM+Bezhdmo2R2
+Rl1zOjhxViXZIXjpwVm3e811B/LinXCOZxRZ3iK6eU/Sc6X8dhxdGteWMMfbmJhMDzRAliHSAj9A
+ztQOWQuvu9lCuuHuDaE0w5Q4PYgy6wT6CVgo2yhfSQfw5vU2GqItY/Cm5vVeIFl8bqdYgcuz3lRe
+l1tk4NrW96IeY9t92CIcvnj6ZijcQuoWSXKyTupRUV9kgIfyC0ZQxpVZZqLZZagTwaDY6IxvdBUI
+AtRRj/woyMFRCb1mdXcmp/kf5Q61unsm94RYGRJhPG2C8V55AqoI0NajBhKUUfW4xhQorHNQs6ES
+i7RBFpk0ZF1oeLSP8MMK0fIOndQQz9dSH07p4NK9N6qn7o/6u+W/AQNu3zAbJeCL7aU6UeiKGwSc
+5AOYkqXH19bqWZUBVrZRegB89UqKg2jNWfU7bWsZ89G37m5T39menKSR+NsDK2Z7l0iiR27Xcot7
+470e0tycNiMsP1ux/0p2OxRI4J28ecQgt92LuCshJbbIodCU4QLuO/OnIO7jn5w8XH0KiE3ec2+m
+2wzDjZ5cdU+5xUYUJnIXI45tle/ZC9gbAM7uQBCEtzyZcQcE8iEjhMDrNCj0iw7dADNnbdzisVQ5
+hmX+xfbkl+jzENU0OfIVlqZukX5U5HaoqRdjAbvQ/B2oqkhmRbVah3aPdtaY57ahcFZMu6usNK2R
+7kp4iCzt8h6e1Rh3NeKSq0A1miLnl0AVqxE0EKOkslhn9Iqs0Q03JhHH3RhId1u8aUZZCACgioh+
+NiK56a5Sbsr1bpXSQkPyRFIJcSNHTW5fIxCe0RKRVRnnJIfEbPOGcoqOIoDgNu5TWwIMrp893MQY
+yBeq8kfTyz+xWlzS5Bsr1I60HMohtgra7h+T7Dh2RMPVF491GUp+DkKTY/0o5qm+Jg4dueRjPyus
+3Bi8JAPJqrv5as6e2AJlcnX7payNxFZSksr0ajNcgJwSutLoWZPg3L7IU3kJK+bYwiUQh/LTGG4C
+9V9N6QauC3XY+mllEovlLaop70cpqQ5nD+L0YOqh+tq5j/XIvJ/zLUy923CtHhDI0jDNxI10TRBs
+wRDSpaaCfEFkg53ljQUOP2JMbp3wifoUeM6RbzdaClKBrkcpeBuoq5Mv3VKteOekefRaYJenTT1J
+JU7VVaw0dKL6HLqKY9ShJHAvNUfloRMlWgrQerUODWlYl/jpclbRvgFSzaekUUfBr6F0Meg1nPOa
+O3ehklOpFw4iai/oZcmaCTOaUi2TCiSbqNyIIPGjHz7AeeIt8RHckjrwlUtI3uZnz+EHrDSMPvoK
+Aw865OhcLOTNnhYvEkDXJRZBsoK1MOmV2PMZMu44W0gvPZhC6zc1AvZXfdHrRsg49Nf9pD+esDt/
+ZqQ27ttwto0cgdqptILQg96esGL3SrOm+KCCKxb+hYEcJszM1QLyQkuffITs+nwh4SA23oR/yeYE
+RIgzAEQxX/YwZAqYn9aPfeoUnpQUcC5NspGzmfoGth4Bme3QuxEayLY4RHs8hjhUl9KMVj740L1G
+ak4nrBWxj6s457yUudkVeUhb6QNS0keHpvZ5yJtFzPs1aXIvRRwO6CQ/9rc1uEAxe879BiFNEVAN
+LvYaTdlfhYjPXHRpOOKrxuExlOL1j78Mp8HtOFsiG589ZKbTBwJ2mmmPe6r3mV84tX/tJyJBS75B
+gABZAlK6+T5jrX/tzKO3UODGk2L7dhGEZIEy2gkK6Wm6d0JOnSAAlFOZny2NOC5jYmVlvgBadMdH
+tNKSQ5CMN8qlGNkbUNu3y6G8zDhcTvKZYhoYKO3d7hpB4vbePgNM5oGbbm9OP9VX0Rmiva9CefDa
+zqa9t88SN8qbd3uTbXPK5ESlU1gIZaoXFJtGezehDDjzc5bBidhplggAqqhRo3zS5N0sWGx73EYR
+DFMSVUT2xkt7uziXxks6WZbOGar3pvl6E7V5WgDqSehT9qZk+mRpbsd9vQcDChNJ8ZJOqeZrXdiY
+QsVzrOzNijav83oHnFaMzYyc7beOX+/h81lajU7d0SmU0eZW5ek7Y2gPYNPnvmYkiMMQgLJqCAZm
+6g+C6k8SOxTnPjQTWQXGG58AREnMM50AQoODmLwPVTzDmWy1NSSep6No4dOVCTwf2vFReekcgZI0
+sZzy5POzfiLwFv1XmRtpXqrlzlRkodoq+S01io4rLnx+BYG2sAsN0zwLPwtQ9oXbaB4VCi3Rx81u
+/Y3Yhtd+jhGPW/9QPGkg4btg+eIQGA+goG/5ZBiPKEQArRlzLkOD+QW104AlV3jBvKfNvG67zJwK
+wZWZlbwtzGmfAkZYUqVTA7BpJnqir1DkwNZ5dIKKhx5ibJNL+Iujs1NrXrPShpexrAryCKzcoc7M
+rLyKPcbB+6sb9Eojp1LYEZL+iLV4+11rF9RP3FUBcHrXTP+O+D9GEZPTG+y/HmVzLqmlumsKjyFI
+Dsqky0ar+3vBAyVTkR6Hceh6q76KZWWLy5fs8HY9bqdiBnOMzKgfwRLcwYFrlQff7Eb+aol9Am6u
+xigsdetBmqfRwtZ4LkQ4PMOfQot5nGS0L8cSxqNURwQOzqaUBMMnGjRDM26N+ATOZi1qRq8+8kvH
+TF0Jmqg64GxetpKz+elH01I3W1JTCM52Mvhie3tRm9+5g7Nng0U+gGbxz/3dzS5tFd8OOFsf22jT
+U6V/oBg4e5Lcp8U+31sGQZbkQp2HtMyFIiJoElPReBd372bHd6ix0WSJg7NrQiSODXb3XxFkGPe+
+LL5MN1nZeSI7Tzt0LpNENcPJYxan9otL77kIz4itkK8y2LtdTKHeThq5MYMPyMIJEdsGICVVs4vy
+aYsvoJ3QdnVBniByE83K4lkelCvlwuJy8SqB1LyYYBrR4ncB8JJw//ANd1yyJdUS7oJL4OwuvnfC
+s33VR2bhnqxrji/BMgk2yX8vuAQa95/aiQ1WFsVGUufa0cjlzFpnJEEQa+GnVmTFSnpsFAAb1SpE
+ZLgowCxrr5WoV1awgsg/kUCxCuZHPZKm++QG709oxjZ6g7WCUmsiFQ3UjWIt0wzj2egg+xqa8MVK
+OvphvuqhE5b8TlEjiJCtwwqh7t/MA8ID6lyNUDfdoAdpPIsxTjRFiPOl27ZyHViG+0NcQkCpf003
+9TAlPDbPdicHbkD+NXQaEbuS8SzhOFGZuC1RAHDeRqHYpvX81E8Ofv0HPToRNEhkiBXodogmb3rY
+KySCEiM82i0bNrNH6K5mdB/OxRansnELYlM6F2tkpnOdAAcFesJwDMkKWhUDg15HESAwko8J/tcN
+jQr7WmOaMOxdLJ1NKAt0bZwhdyfIjYmOkhuyu9jEYWWkTstkf8Nvrw2cxjZuoDHI34BUKso+NgMQ
+zmsxKFXwebOKp/Paq9ROHpvmgZnvUUm6cdQy2ncOHzFzqQGQnfbpXdRRTa3Q+2qnpHIVJWqv+Jip
+dh2pjxV3se0DciLFSslhwz92/lzmbhPfgp1KeW/tuYWSL05oemumokN7KXInn2aeZ81huNflsdxZ
+OhDkkIXiAq5ZVqvXl7734FrGrZg606qATraLSQxjjPllf7iHf44xeywmLPzT2p9jDlS4xhCFLiqi
+gLjuccyL1aAG74Ef0o/A6iO5JcdcgzL0i2xxYf6DmhGa9WahyNx/3zmrsW9LMfCQqCEsXxvbJuC1
+MUECVG6XLj5Wt0zGUZhIwz5y1h0ryNYJepPQSQw81QLoCTKdhXUKUfsHICgheY4zAy08UhdODaTj
+ygnYwHnIUzwWg094GvD70wncSYMeqZM3YKDanAmjdwr5Gfdd+WD+uD1AuNTzf0BQXyVq3jHEQW/n
+en7nUtUfAUVIZP9Uy/2BjnSbdcTf/fOX3Iw0HD9vaxqy5bz+zKDv8Kjtz19I6MFhsW1hoBwkSDXH
+2E0qaAtWLNbwBKmUUfvOdQ6GH2+4dTLUMcd46MV/fL8X0OzMHao2Xoa3oZrXYdSJzniuJbwCvN13
+xbVLWd882sGRzMNvzzhiZCcIUZtbM5YZKMbpt71KCpISP8PrWogFGASbM139moBWUcEMwpUQDIz3
+1ycL6DvpPWhMn++PMgwN75WlX/BAmp/kLLSBji8UKspQzO/JtQA86cYxKFGTGADDOU6xuzGsBEFi
+qFGBt9KRZra4ow+aN5EcckOjaEwRSZnaCRt21Z8ONwbAjJOoJgFrbbay4a7EAzI1Y/SaMOF0Q9mV
+StapD/JB7dmaalXe/WiojPd0tfEtTjwahzLODgqXLpq+GlQniSzlLsxX2/d4RF84Z0w1nqr/Mr/L
+CDDvh0PfqVrRlpUf/ijLH1fkN/EThiksuoxZH4uLdnNQeiAAxD3cm3xj0kKeB6Je44Yd6WhytoQ5
+z3JUH6R+paAsGC1DY+QQfq1gSEs16fguBtRsxcea9ZQFs5x1J+PhWMetHK8pJDmxfWxWMIeQ1NDh
+CQ3sqKxgQTejX/lFbysYj93G/qdvGNwIhmEnXwNa6LWC5QOskwRZ4GX0gp1rXu7LgmnXSotGVdEY
+BCaHRo6da+qsRgQPtdOGsPDbR0qBQNwkgMO1T4p0VGQGm83bPrO2K1wkBJqUc1vmzlFjjYq1K0LA
+RdVd8gf5LZ8rh3JdF9Rzg5OdCns21xAKvB7oYHJAJHvWtzZeE5snP0+dEJVL5yQVPCtNORkkIOQw
+iradPDnLl0PnJQmBKuRZBjQcGlNlFQ8oGjXmZOoB5ueSTSY3mdTMJ3KUV2sKV48JeGSk9GUCxu/y
+v9HjZzRkNiRPyRR2zkecGOqIyVKoSz79rv+SOHQQQaYlAzWViVkRibx7r+qtvC5Imdv6DOv+OjuK
+v588l3VcSf5oZMOk0ufRVf6x6xADQurcfdZbEz/U8B4towt/yWv2VXh6HYSu605fpPmsXoVlkZPf
+XM1FMs2GWmZbSCzm5EdExH2kMCSY7XZHE7nO//7KcSIxFl4NCOiIqWXBzTaRz93CJTE4bXxt4SAX
+eS1FHloBfOII/knS1y0x11Sjj8OGMbcFY/ODTIRJizvMwB1AzqICXlvF6v8A7czOFqxKmvfgR3Jp
+NFm9YA23QRWfYvnctI5s7YGDFUf9YtVswawp/leKa71gyXbAxrZgKL5gOfBXD7ZgFC8YRZsLmTnn
+AQVrjuQF8yiUo+mgBrdg8eaLQqKOLNQHip4oEaVC1CQG3Nh8+WOg+IJp7QkOsdQByWQNSkwjVNwQ
+aq8h1zkmmTmmUHb8idRSzkHgCoMiy0O+zK0HcwqcN9aQWno7W2C7oVugWGkRcXGy+qwHxG0KCGUJ
+eEa8pz2xMcBvCO5Cp0f8vKkmJ5V03ie0DuJFdkrQAL4t+2UN3zMdlLFEtfThTv9hm7V/JDXwEQi6
+151ktuwxvYS9XYs3kVvlMNNtHkStkm46S+sONnc6/Uanc1c4n7fsZrDi+9bGjvEAapv+wGk6JomH
+r0J/nsdmrqem7yMnXsYEBqzi1UuS7ZQXATsrkvAcexsNVgHcF7vGAMWoKXDNE3YemZM+q9818o9j
+Fss61MabdPG213H1/ndbDacoESUb9XjIYJwHS3/CBqJFKQulV8nw6E8pm/Je346YP7VHY00HOAqV
+4iDdW8yNGk5fx7TegmEyyBUrHLuoNw/e1zEic3PYnSx9zgkWCT4VvlRLW8kVzFVhCqIE4EvGTPad
+oY6Bb6Ly0ROqWjPqeUjnOwU+NOf3/qh0hXXWoIzt4kWUXpexVaqUvL4uUOLD10yItBdjJdf6xQC3
+xETvvmgtyV2GnkztnCL4dE6GrXNxG68/L83NMMGBiK4C4g/Sga8H0vn7g5/XuOYX/RnlYk2w5LOM
+rwh2AI4iXf84aDKsK5qu6SI4qIHvcxYyPJSoUpAPRxy9k9mALKfMlPXHX+JYIOFYgAqH/5aVRbR1
+F/u2kq8eDdG0QVUO4Lo7bObexFfTDXdotx0R+hRbKMJDwc0ZlShGS5MXk2eDN0XCg6CDA8iFwhGK
++ivX7KUPUhzHgpf3FFyHkB14ypVa2HkYR4NEdbFNpsbvXM6+lsCVGPYVPxTxoHlzS0SB4LvaTn0v
+DqepBlGNsep9VV4j4AjLOI9MDi5R4gFcUhhf5UE2lQTdKwcI9MyfBZtAvbxE14TZsjzhJ4mImDXW
+MIWzV7YEqvhAbbTadKFW50LjTSFNamNIovLxAJHkYnwDCkM39H115qfWp41367/YIrO7oaY7SP2f
+tmrI0EhSLI2udJgtIZ17uVKs5kMZx+9VEw1/b2my+73w6FNlwMQCv9c2JvRqnGT8Xj58zk1sXLjy
+O6V+r8Cpng109OmABtJb/V5+PstMA1/wdCxuAyFcv1fJeSt04GvKANey3ytezLlg4MmD34tfQYvD
+fRan3qJC+r3yhRf4qiXeo2a/l/xtNqLy+r34VAl8oYnwQkD7vXCRwvY4gt8rK2SBr2IFLd5/vxdp
+PWsy6PFz+72ie4GvsGgY9HvxLDYC0FKK3mHaQYMosLQTu2YpSqcNjL0VqHO6WNWAueo/WCdNTs52
++b7lg4wIJmDTc3x+N43i0Lmw3VSA6fU0Loc3hdMPeYilYGK9aAn5PfaIVGyiHhHj6HXYToQZ+Mh0
+MQVG/ITaYgD56g4znndRuOSE4EtQc28s9bUTLqJqk/Bpeyz1xvzCRQPCBOGzLLVuNcqqAbDc0F/q
+pVgvDLDUpWQFUw6PmyERI7ofSw2cwj/ovwK7BUe9Z6mRTFLZHOGsCks90BSEN91h10TJUq9OYfZ3
+pF9xuKoq2/FXkyfj5HD5Uy/MZ5gsdwiwUAgpB1c+b37NgTCS1t44CpWy62ObaUhl9DKvqMoOksA1
+QiEFEc7WVgjzjVGIiZYyccgOV7wkNLrD2AYEl8a4Z5lViRMSPr9+HZMCLBvQ28LoAahOVJgZFNf2
+zK45Wigli0amxRk5SDhcWmE/JQU4pMg35ipalsN7pCEthPMEZOAu1IjIFIDGKaGgDo+oN+EsXoNH
+bRd1Z5dw6smQmbZQUB8g3FnC3pwsTYJZ2hM7vdsWQrFMn1zC0YXQoc8nHzuTYt9dg4v91U6TmZf8
+vnuIxUC2r/1h+Xk3yAYgzzQ78KFybJgzME6legxDe3IXbyHnDK0eKHBiWcDFIvTRqCvuVoLIA0B6
+AcQVXzt0ki+Qw9rAkCCFjqV1igwK7wlhZHjFA5zD+JhN4GPgmQAmk4vucfKc9mRIDEQfN97+ih2T
+oRDmyH3PUHKC/0Eyc2Pqg7rQEQReJRlWxdQoRhHTC1o7Q+EWnWhMvSmVYSBDgSZLjKamI7nrTEyN
+4YshaerWUzzKIaYWdM5lOq3r9pXsd8clbasky2xy9TBq9CSfpt4WDGxgPhJTWwlZB+OJclVZiakL
+gyZNDXmbwCWmpg+nUi7lYB9iaqhJygbVwRNrjzG13klxaOYYpqmlHWdu+bDbNTz3pS72Y6j91a1J
+6c1NkUQ0R1C8BmWRC2+vvplqwJXVKfEj3OcH3UNdQxaesCw6kpDniXp0ov0YU6m4O1+raW6JYzw9
+hwwM7aDm2pKv3ayNAeZ22ACbC1zA+GLXCfhUcj8Lx99+Seb8zDaV+3nOnsczk0qeqvDIkkQgi3g3
+cFA0PYyENZOaxcMnY1wci54/4FqNJ37xcF0UbDnx6d4e7/w8tWWtEt0HcwiY8gZwQN1s6lF9m+bz
+WPzNApUVyAU1c/kMh764H9RgPmsyJKL4EL2yoC7L13UNdxVEOpb/4wB6DvMff1aiYXENCc1REPem
+HBgpIOmhoFG++vzvFL5zCRWJNnmWXM18sqo++V+eLiq6wfTkw1Cwl6mdXyBoQtrChaBwG4tV8xpr
+8/IX4TkCV2KJGMq6vgbknkZXFyKEmq78PZBOYlBZNOtOrLR3t5ft8EznjHkb/4NOrPMgf083G+Kh
+HhFShf3fhj76W8OHPpmZVdzirVFU9pAE/unnIozUmujm/Be3E2ctVZSK7TQo/72e79LigI4UzOOY
+GsjWdcdJTa9zxSiKbnXJ/m715UpfA6a3PQEAdkBn0OvA7fCcOxy0oIPtCZDPMxm34NpSD2pRQwQW
+sqV+y4N9ayqKecLvnK8BqLR3hIo2jxkEIlpsYSgCeYMj/Ik+xO/ot0/O5nuSif9LoSg881OSboRn
+jmr479bwDqU/5l5DmcaHhjEydr1o9isFGhTn0XMyRdPyFNKVjrrIiPABW1CmVa6f+WyR1XiXzt7W
+7F3BukOjMm2uZrrGx2IiZXourm8GDt64IO3BFOTp5b3p9SlsZXqybcK+0NaPt93DnoZmuk+X1OfK
+9Moxsc10EXcgVw7TyvSV+Cux1EWWlGmNF/JesN7CY0ZMJvnDRfMEMNhYvbB/M815qGPio5asaCqg
+3mbvDzARuzyvlNq81TQ7yYLo0xRPCBkDh1dVraggou0nicY2lLU2MpicctWz8YWzE5kuNJ105xJ1
+0EtbUFkDZL4JIRu9lVWdOztBm925PVlTCorzHTckJ7vh4BTUNSKCI7YfBmgdW9vERZB21SzSaMAs
+eNe2sxrhctkyGpj56f/yDUBGYxgizVScLEtHzVH0E7h6vei8a8N7O4Vl9H24r17h7YvWnku/jAY9
+ug0EWtzlfa1U60n94xoWL6P1bT6FMBst7rkIlG2rIH+RX2DvvhnTvG27esZjVLoXDbdv3IGgspPR
+ItLhBmWrS5h0C8VjHEluOja96A0A+gjJEzlPObzo+XX53GV0vLTDL3oKjw6Hm7BJRqO7uOVetBYm
+TVCjVhntbgDRF50lrYzWUMg57d3kD37RjrLRqIwmScsX7d1WGW2H6EWDNcD+RkZfouo2bQDS/BMW
+VH28Mrq7uhcNcIWdDkpGWyjJgOBFp9teK9ZbCmHVyujEonWd0rXxok3by5jJ6N0Nmw0fxb7oBnd2
+OGQeZHSaoeuFO8mGMze7xTJ6nsqu8KLvyranrshoFLl60a3fyOiGVHbXFy0oq04tXaLKaFkSinbF
+vWhSMnq8G6BxrRdtdDqkUUYPoTk3A175ohlxn9RVlAyn/EXj+7zIWHKT0eIvYPhkcUiJkZ8RL6NJ
+4LzZjT9edK4l2f/0IE5nN9RfdOHnpJmMJtDnQUaBMQM4XUb7dGOQ/PpJm1m86CUc6CQ3cJxwvW2I
+YyABaLrYKXa2ct35O6wZBO3DBZeGmCvgZ3h6GqtfPlVHDA/YYv2rsruSC3ExZqqwCf8aB40btC6I
+3varCKRFKegvI5BBaZhwqgqqcAVALIEub+P/pJmKpmj3b2z1QCFtdXs6JbNupP+lX0jw75obkycw
+PRf4vEOe8RF/crfBtOJOJq7hVjuDS4hP47J8UNyJx3DGgtcJJ/GXpT+z8JrQTRU+sqGmHO0e81QI
+5vbASHajVKRULBhGvm5V2Ah1fSaOkpmMFeHMT/89nH0J9EcnNVMtN0BObsF+BzLnGs/6+g0ZzSJ/
+u+x7aaUHAmrL8JcXKBVIUNvZSlzA4aMjiirQfiuUa6KIxAbr28gJwRhncjht1al0Gi0ZkXkIRGQY
+uG3INZUqKbzfG9hsCRwAS/4+J6P7ylRznqby+49O/nJNsZH4BXxKgLf9VlQiKvGBrdLhrUl7Du2c
+yaSN0weNllTvT9YRVC8KnsEpgeq7NLrPl+j/jY6OM8uVRKHP7ytuSZOSabQStzGBBdA1k4Q0oWYK
+FbvRfdVGO76ao+Cj5hKw4gvDXt54uNG38oTF6JLOV+5GY/RecGxvoNH79P5rR0eLzFvxEQ3nDjl8
+2XdBMY+biWEq7FTsQ3tNbqJget4ScIMlwjCuIddms1nbg3/IoRiy7ip/c2BSiw6fH8dwYU7eQlTv
+I8c+DXGOx3yUEtvkuLEtKZaUR5t5oCbLd2xiwPg6jukhlpGJbvAi+cxzPa/sK12xI/w+aYN2DCYU
+SiqsR02Ed3yQRuotFNHpiGNZQG1cc2X5ml0kKXYQn1wtSfWFDCYwnd4WyXQ0GFGmun+NSJit7XcD
+ba6gM3Zu/dh3RqUyi1udPo664rU5589kVTUzf1OR2ATx0/L3imYVJ1HY9kR6w8mxa6UNgFVtRw2y
+rEwIoo5g3tNnNdnrAlm+a/cnM7M8SaW6QHKNAyyhkFk2LYqidYDVoIoyqKQeW8wSe8KdnO3untHv
+lnGho2Q00kFbFC3IbIZETyOWajlmVIXUKwDZmmKFjoSKil6yoyAt+nLBhrGP/yvw+WfgLxmbJqVr
+GsLdSK3gmImitPb+/TzQckUUJrwtZxGte6IAR4lTTqRc7m0fw6DyyORVm0Gx5NGR4KBJqXA45vku
+zNVm34DsLI3GLji4ikQhjO2wvSgU0EcM0tCAaAmWKLqGinA0dQo3ff5B0I2i8vrOPVwYWnieaJF5
++94Sg5yhNNJBrMzTb5CwmpZDOtwy0j6rAT8sa5RBwTAQjjM9Bui/AqOWsZWmWgKQHuRT3z7AX/Rb
+Jl6RRb10PNS/6OanG9mfm6iTkBnHkobAL6s7Oaz4/uxwQGuQcjsVrGwCvVAjCDu6zfmu/HNuTxsw
+shIFXpVN35uqwPFFJGB8FWkiSeU/Qui9n4jTcczpQcUyBcoakybyCDlV6YTrH6J1khB0kZWlw301
+b+oflYfhcWaTgMUGQjh26Yj2M4MpLJknt0LMIDrB4Cj34SDSPCwR3Ur/7UHOxDm6K4TIcyx9bnxg
+Y9mrkMixAzGH1piWFKoIDUPoCVrlVJXEY4n1H5W5xXgLYdBsmDOjtThw1Eh4GHJdf+GYnGlZgIji
+2G7bJTXYROhSrrhf/jLYXShFrvSWZwfm+QY+neC2MJfKJfb3RbNmwOEMqbG/sOOZNCM8n4lXf0ly
+Ayp8mAaT3WDbUgtKc+yThHrUBolBW8/Ev2j5a6loFfdIQpLjliAAv6TW4MTzF3j6FASmxRjiJ1dz
+ceGvyJqfoOSmLeolFthlqpZON2AmVbUVJ2sHsi6rHmfthFc010W+YeabgeRFnEzCSAx58PmC96UX
+Q+gnLcv3f1/hESoowxxsCsk+FbTWCudB76XiwtFmxgXOBTDjY9OEgpAU26bKbar+ItN+5yJ33C4W
+2QY6i1jwNQ3OpbKhQggKVPiFJ+4sQg9TusYRftA+/aVpKFO9+wDpDuJYDGTtY2XTWxU9fkkrL7FT
+eWPCfYRuLfoBAYDxGeCWt9Tp5skIvcBa2oRSk23ABkw0AIqNq7JCWjws5uohhXksqUvjxvfV5b7W
+ArAInwxo3l6EOqyme5fcNJ/gqq4Ydw8fBm5PBB1aonT6C1mpEDdAT10qxD/5YUVArjFevOee00WK
+vstEAwhAB5tLIgkUgv8Pk4FgfqzYrQypz1ZgKG+gy8ecUA51eWgUyu8Q/8F0eo6CAxbztl3Lm6c4
++4ZPgXHb1x/cIvf0OKy281WA9QpBhPBj3qxqFPKWYuolGUle7qEv+2rPanuMdlPTU+erNzjilYK7
+8kOCNcOtBErMYakiCiutUO+FsosGEvkoA8+5AzGkMKdfAEXIjBjEOGpIbXCrHYDHgPku+d1xq4bP
+Iou7ljaMBwR1UvlYlIhhwyFOEbDrbDOBh9osYW2vZvR2HKwt7HRKEVm0cRA3aUosbJEAiNHTUbJd
+h+bMIQmXMMj6ucNBJAjmj7Id5J28rhWXBcMNjN5F4179l4DHsElxMYrRKvkActMBSj3Q7w2iiv2d
+1Z9NDTzKdqazRLcE+IVxVXgDATlBWDkwjZ1RP1/pbghLs32Tp+sYI2C9E/hxCI5TeeGwzYORFRTa
+LG8gW6UiuJUj30IElsGNAfm2Hia7MzJ99QCQgzhhRCPfB/DrijEB5cxJ5o8MPGs7GeRZYzyQR654
+VDFyyNrevpQ1DqD7yPFYw6nSARDO0wBio9Mw99+NSLWSER838OPZAUyIg1/Q6/xMRx85RQH04VLh
+CjJWQzeBomACPYJdzu5Ujanyx79UUbRPM+YfmN4vMUE3VDZVOlzntAqxJhRb1cLIvzXbzMxzOHCd
+ptQyd7nkdgJhkvTUhcu8pV2rq88n9HMd7XgXPunQjMpwVXuIFhIsoeoTzbZw71tdAizDPSTduWGW
+WSf8Bs70xjq8AP6iTiHbrn2yxgEUtVNT4Jvq+ciNc1rcZMRTU2U4mxPA52ywH23whH6EwGlgHhHh
+kN0TIDmcFQyKt1CUV92h9seeiDN/znAwYQ46isJRqgTmK47v2twsUamhkXAI/gl0JTMNrDCDs78N
+B3BFT+2jDBx0osp/Dm7wSUBE9k9ASxubUFAV1e7MbQN0UiTp4mtMzgtGLT7ZgbKdlAcbtMYcnsb+
+2LjrAfsxbMLvYTgmqcDh/GRbnQc7hjN3gAdUrEoMvyiCHXs1sIWvQHIPBmuOykh6HIuycbw0CU3L
+58rgR7rWhTZzBaOpfqyB90OwehaMINQLLCeUcHin5jKg8OXuPYy69uAe9T4s29U4SS9hOTogozmF
+UOB34UC1qjCJWFtoeeN+mGBls47/ydM/cSt5h6TBM9bs9HHAkXGrx9IB4Z9ny8MAOglBANnoqjhN
+QNmN9QMhIZtsM4EGPthFR217GUlFbls3E4z9mi9q+aXvUBTq/6tM+KqFEOdMDoqgs/lZPNs7OrUF
+vw8fRYCBhhoYvPF6FoUiwr+tzq3rWtWYGCJGHFyFqugcJd7uMVdaqLh8Lm2II/wdLSRVHOw7K8tf
+cnGrsWh/1OHbgT/BPYr4r8V3mrLyyVlIH/wYzMS787F9j9xmuNKxzVl9nB9BI2H3fV+SmiUwVhfL
+Il1jQoQGqiRfeaJTffTUF8CJCfWcrlEJZCvtBsDCNcvJozaQPp7n0VjHOEBXZviBkjCbByIhWPbc
+RH0C5El4igLhkLm9SjCi2P4Umvcoeb0k30OoRO1RtYa4Q44azocGkGHUBYdMY1qI5mAebb55wmij
+2LbupLfTOQRIe1+3JjiAxsMhfWKfw+HcO9cI0Tk4i0h6k/lAFKsCg+X/Imni1/Q09gXRdkCkruI/
+QPwjb8iJDuATTaRwNlGpGD8gMXONwBXxNSY0nSWRkwaEe00MPoq1xa64f55xxX2NVRTHb1dLblol
+nmjs0/6O1ySnonLx776CZ5HzlONJZbrjIP3n3B4HWkGLO56l9whYimNpvSZHwQFNF33GxHucWhmf
+yryEsMH5xOt7OGGFZt7+ppY3Vqi+h1pDX3SQTIlR8EX6rXcwJkpsxzACCZ9EYkKzdWmSIrtwX1+n
+WXTuJjT61PEuSgA88QHvnu7n6EkoGIuarwMiA2KT7AF9qNaXfMDmkRmzlPDwcuqtgssIYn3oVQGu
+KoCSmHtU4LkaRWhjHVrTohbMt9i9f216qH7S8Mj2g+Qjh+/FwMr7zo2+Jof/9TKoue9iDdfoXgVZ
+jGj7tmIq/2InTY0Nf3Jn+LhkfP8CAq5DcY5agBH9KByL9JeJhIyuMLkmYiaxxwXWbePmYvVIj+JC
+GAyiPDD+2zgR1Yy8qOCHc/fPRLyjCqxFWvmTx/CjMKaFwGUVFVHStKIjwZBzcEwa/LQVikDuiZjo
+6Bgy4zPO8Uw1wMfaVZ4Mt9IRxbYyGTh6gONeT27swQVlmL1YzsiexSmJuAOf5PvgD/dnrRjzgGzK
+k2NU2f1zaJwMSuOXPchgkgfcUdmBdkWLmoxJMjBcHTuLsuCHsbXHRemcphaEzcOvVoK2pqS98Zqm
+SEJoW7hkemfNPo3H/iPkUEbDcZAV3nkLH4bot1GR4A/q+ACD3RgUrx92HB9s6uodzEoycwAtK/+b
+CRHzXa65ZXb0dTW29swKfCJ0E3bE8D756MYjSpD8FWmiIJIL/Aa6Jvk6fPMrIfai5wQ992JJcuLF
+56G4hFkffXDAU9vHVTPTFJEe3c9AWj7hunnLLtDYGqT0HxBBs7UNleU957dE+ty0qcxyKRx1VPme
+UyU/0oAX7efdcYvK5o6H50el4s7nm/vX094q1gC4nqPbUTnsFI1jD+Kn6XMopdp2Pku0cnzdvNhW
+vEhW+wjdAEcaulOhVZIuiRUI11NJyjV4T5CvNpIbyHDRhkntE2H28BnofbBPma3p5qcD3Lb1erI6
+9a4mdNCMcmk/5I7p/fO9d3bIdMXJmEtAoweWBiYhagpRhp+o8BC7eD4l5w5coDQzXetyORmSGgJz
+iqiGt7j8AECtO8+2tTJlDFvA+w1Jz10o70NqhBLLt/HysixB4xqRQvwy1GvlMfD0sxtrybnmpXZg
+kPV9W5Qpcs79a3ND75Obq42QGujyQE80LwLe6IAwOnofj6vSjEfOo1K7NuqWZcvSq7fq9Ed/BwOI
+0GcMTy+B0Ke07nGvISFDuBhHVm/vQRRPouimbkwaWH3xMcqGyZxS1/9JXLNXG3ftgAdss+GgdIIB
+J6QVWmpLry410P+/tyXRlx/YAK1RpetDxt4LXRiOGoPvt5IO+jp3vdIxtwSUA9/Vjb6Lrkgsizil
+O94/TLKOjAfsUksqhHUIm9a2jeN8w/wCib6wgX2DcsI7UKR8yQySt7ACLuSwegdITQWlYQot2twL
+H9Voi14UXmDnDmU1xZxy3ssb8BgW0QMJwriwrrihtHMpngG8IS+RzApu3abXsRo0HiIyowGqaxas
+5yU36zOjpU5WqjRJ1ZDSVtV9Bg7LMYCYYNE9AilzYkcZXzQs8xhQDbc/04OFKFf0eEteWmGq7Z83
+9vuURui9IqO7BQOup/Bpq/E3pWJKcaOZbXzTdU0J9oqTamxivRuybdofqHJwf4ZnhXa6+LrrIJj0
+S6lX2gOkqlWTowf/xD6hiKVc4laZ9mYGshj5ZJqjnr1XmFbpH3zQOyHcYJt8Z1bePkXmz58j3rWT
+JEjSmPrLo9lBQ1m+o8wbT6P/i1hFxVia8vCzajSHZK4u98FQJ37kJqEgCX5K3fxq1uld2wpgzCSd
+98GN2LcHbKSbB48gKhNyCneDhcc4Wl0oDCM/uu6oJW/R97Y2lQ67mZva9vyEBwM9VJeSNG9XHCNo
+emGemQ+iNdGAS8WITwtZAiYfv5ummNm7FmO+ZMhpjnDOjWVSthuZB/RQH3gm+F9oTtG6AVZR2w6K
+S1gP08sLUHSWkRUdUyxBaYEyzOcoJRZAPYRRleMXRAyD98Wj1wwKqG1B4WYIvJp6RXWzHsFRM3E/
+Qxkcn23cq5KprYxegVY3MscWwCBMzqDrkgCBwi+9dkWfehgw8vC4xQ+BYRJbjUsOj/xF0OtdO9AT
+a2csvp6T3XCibXoAgFsQP+IayggpRHw/NHBMeqBA3Ym2G7zCv4YrgmMa6EHASoQTcZ3rNc5VAc3W
+U9qNBXV8mWCiHoZfXP0qDT3MOzmCzAxgf6Ty/pnlbIG//YV/ZIQmNmuYD7+Lfpsvov7x7CQXL4xy
+fhwsCS2c3GZWXf8gD+CnPEBY30XCuveAe076Jvqs+X0x/WfEHbAUNpQgNAM8iua1xi/WK0BUaULa
+lm/lwK7qT7Fpcv4mBnqNl9owyHlv3eqp1/Ewn2qjrfHc/MRJobsru1vDzOORE/+lQoNCh+k1fk39
+SiyWNy5E0TtiVRYZ3G7E/TOTJAetCPhUztiWp1ZeNbZ7ggVg3FcrAxCvuVY2zR05hBex8BRia0v6
+uoYogHIUWVWggxejXTrveGDjIRytFRViiR3uTaJ8VzfHpx5JE0ahrX87SSKux+VJ+KW4cNtfmpIQ
+YZwQZM19kDTV9Uuvgi5z6Wf0wqcCh6gszwGP+dhS8kxoglg+xIiNyP3pqcTG43D/7p7pkqNObKNE
+YfZIPoK+r6lo03LtR8+aOWUpMEK21hkF45S0aO/ybKrlBgquNnszNPkxpN5KlyuvuymRZZvIInmI
+5w1lAC83ooemkPaoQOfL9GgbYChk31ziYWJFjTpoub22JD9/PU0Lp48xtS6SR0I5Le4gs9V4EYnu
+E4FzC+O8P1cS8GkKylJYJZDSMLRQr5gW3gLxR5h7Dxe2UanRFLmdC3oVqVkg/yUICnyRNvKW2gWX
+VtqjM/Jktax0mddGfd4HUdXwnOCzckQYs/ac2SUqrNTwJ88Emv4Sj5LgTkpufUaE6WA6rHS86j0o
+M5jVq2hfm5buMXCKsbibPhSGohBCI7YmWMAjkmVRVzQ+qLMkGuRspu0XdkUfVpIfw1bGJEqrGKis
+iQufYmzwH6JgtNxIPUOQ/rPMS5ZNAAWDOP2S/4JCnVfYBkJOJUA6CPuCTdmFxMkz8+ppxU95Aisp
+YKD/5Ma2MOZN6kA6GYYX+52G6xKR1lJW0etGz6Wy++u62zMFjFf3IFKEGCByjg48onQaaS5ronnL
+FD4y+gYGddf7S1cqdwR7mcXRigiQ1XVS6xO34qPbMu2ATDgEw8XGfJV7uJH1ZGQk+f/LEn9ViSn5
+Hj+fDzEfONDQdZZM/shRnfFvNg60beRN7ekjUB2u3/TsKB+UW0iqhT3iNWvZzbbGzYyPGT3y2yHu
+RySDyP9NkGoRFozYrF1gERtcTNaDMWy8AWbVZxB2WmByo6A+uFBXc5xuLm54pchyPW5R2fp3iSGP
+da0W5JbeHMBauIuawDrV0UWCwNnkR8CQb58r+xotohe8sg/HBuMCw7vke/HcWLSQkLLUUx3k2Cpk
+GDvBRAjOx+SKkXnZ+LmSBOKFDTQMC3aB/uCceJTmLSya0iNFoAk8u1BTeaWiJtQXw4+t3qbWNidL
+klRbldvaMlFkeI1SeogYAugPGflBDvvBIOxxsO17jjz1E64PNgbRcp/4DzseOkp8PlTy/SpUt2yA
+YG0oTDDYYHkuhintlTOEe8ZMzIcnGOi0/QyivfDWdJ5Cl36/olp/N78RMASNxhwZ2t69tLZXxLT0
+Z0eju/l9PwXUFtxP2zIEKd9jDL+GdX1gatECNjYuVhdWGMcGxN28y5wMgfdkPK5Y6and160Mxvtr
+dxpf2wGoRiGi9hVfIYtvGppfz5NFY31ghwiF8TwnnyjDXzvKis26ffPJko9BH8DHxVBGBEDrFNO+
+IS3pCKgvb6DxUhEQVjK8dJY9Xg6F3x9It2pi5vAvOVVg9ZjFLy0qQN6fUABw440DKf8Vlx2Gy+aq
+po28eVRoarDC5rV8G+ssUoONf2JRsiva5S/OhMyOFYFr+O+PC34T+yeYbzyALsbiFHcRcQDoRtaW
+h4dQOtbazTEQ+6F5geaWz2UebbysW8xW3ALU5Ge1221BnpU0wHjJPa2P6fd1DscVRzhH3cNhFXMV
+alfByQSueH/G+obNEuCtCgJTyuWHAV+jDmX8K2AKhdp/0+PG0fHC/XkYzgEhv7AWsHYEtI1zHJub
+q0PaKy+ykbMg2ghaRuyzcfxzkUqXLZdJqciuzbFznuEJYt/iSwDm8PDH4Y4CRR+by/vM23kJiWav
+zFnMQztaBpVipFnyV9Klaf/9DXpxywzW9QIF+kY0ec8Xs8ci5UJRXp40tbqehOClDQ1UzunBC6KT
+uTekMAATWzlkTOLYt9GH0RPAkWUHkP/w0JE7t+Ac+B54Aen5qtDhjSo8pUfz/AFF4EbzzMwHae5t
+VRvbskori8lRIMj4jxvHQd3u62BgJus+4o9aI3+hSFODNivU5FwsGg6iyaZnDxbcf/XwNZ0/XRqk
+AL7fudBkL82ab7e5kjiwhH3wNydL+HDmpxwB0/l+4lLhXuO66qniPYSyqIiBuOEPlTzAp49bRW7Y
+SKUWqb8Xdk3CE+BoO8gbWijkbz3CaWSohOvBcncmj8B98IeQ/ZkH8h1mtQ7CzbwDjU+D0oamwUbL
+yB/jDaPAFxS7YAUhckARJrsdoCCyFGd0WccKknMYnOAxUoMOeMFWGAn07+rGws2Qv+2k16jsVRq+
+Msl5TBt0pYt+q3GyGELpCt5VcR1xEpuTJ+p8yNIEf0l8SZEkSkeSV8SeQ9qDRAc/4pbDTU7DnBtN
+fUaqx8jzhZsptgUa1rxCoikidsJeCdU3Im43M/4D1GywmQuS4HhDQFklnOeESSybWU6NXN/Rc7MH
+/vxJ8zrl4MCUQMumETYD1Zd/YDXAFCnqzLbauSnAatEPRWvphr4/N1UiWQMF8U8Gdp9W7g/vwgt6
+yiFCaXjpcvTblOASLQohf8pCUrfX892l6IrO1aENFWU/6au82u9oNRZpQznS/+9cn7ttcSrk94jd
+fk/Rm8mD3K6G6DlFTDJnlgE0DpCFMq+c59/+ZB4Z5XDas0O11ZKvGYxzV9X8Ep98WNL5ieU8Ia/T
+oAqqH9sH05TTY+Nu6L0SdqskJu1fCaAAxTBaAVSKhhQDRjJFOlG5lHD+Ku46rfNXlo0O91Pmm9jg
+Tso5lQ4WW6G+uZg2pCVPpMkM2UewAHgZhnWuh6qX1BrLD0r2vks2feibEzHPQCbfGqGuAy/1v/1K
+6Yu96BQPEMqe33rPM664EWVPa3W4pHM6O2YNyRaBFqLEmszXlWTF7VCfXdpfcpp5UeN5pv1aQXN5
+mOkuMVKGfETgfEdnP/1A9wPtcQ7v+FylLe6Fi0iFxwR6MwyJ9RPN9CoZ7J8vF/yDtaVoEPdH85/2
+D3XHAOqDvToucIRUStqgnCs1XrmEYUXP6ez3dDH5kEO9kHZ3986UUj4+KV4nWRsoWRtZB0pWZogF
+8gL1AkW3If61arTNLG+82+8qpk+mm3vpLm0Z+WrTThGRTKLR00Uj2qeDZC0vIY25wgIAFRYsArDQ
+UIWFBowKixQuIRqo2SgNzYLGwQOVFC4hJCENVViUQGk2qtGosOiA0lBD11Bz50ZdzWZ9KEGiAcNj
+AC8McgAWEZYESEoEo8IiQwmAnEZdZgQ91GnQ4SEReKgTHQqDaemAkaFDjXBw4uFiB4WCJ1TScZIB
+QXCy4IRJh7WYcJwMJhgNFRMFBlBMqhQo2UAhYoLiLggoOIAiJyYGXuoBgo4a4YBGTmQatJzMwFFa
+CyDwFAYcODAoHBiMEY5SkGI3ShBHaYRIwFEjHBBIBhCZBSog6BgKRoUFRoVFigYYFRYdGApKjFjw
+gbGDnNARHhhfyFAbpwggIQCDixQEREgx4OOYEhNEZFwO8FjAISJDouIhIlNCgkiZWCipjEiGBwcI
+RA6ghA4GLi4mCmyAF40UFxcYFRYeOihcBhIEFykWFAjBcYEywgNzgeEhHRcaFkLHxQQLEjguRLx4
+pIQBDkUBwTEjAyg4sOGErBLSIgCC0wSTDAiCsxaTSpnQQoGBqYaKSaL4xSRsmPBhGwtMRE4Y8PEP
+VFLCwAIiIzq8YLBGx4gHBkwmRAKOGkkAJAMIGkFggQoIYpADsJCLARwemAuGAoI2OjQQkekAORQa
+C0BQARp1GhFMPDCHI+ODARgIBjjUhoYSEhA+TrxkQCAwYGC3GAM8NCwAgbDAB/IgghaQ4QixQQUE
+xYYJmDdAGeGoEiEcDAQBCD2pk4yHouDwQYMyiQFPpMiEYIDiF1sB6ehAkiCBCgSEeDCwgIMSDBVG
+JoSQMOAYODjIOAICZNxUnPEMBpYHAMB4RsbIxcqGDqbABwE2+IKFjQ0EAECDURbQYBPu4IE5F84D
+c0AuaPCtnAfmWkxiDRw2SDIgAACrLODgJnhw4AcXHHjlPDCnwYkDc6yM+ACADW9YWYkQglFhYQQO
+yNBFARc0PmDIkBRT8UAXAVQwDF4OZIoyFU6FBbjhCueB+YgCJGQwJQcUAhc8TDjxUOQR9HAoIOig
+cB6YjjrRAUMBI0MHp5wHxih4Qim04IRJdaScDCYpBlBMKiXEAwQdBKJBC0d9KBWOCBgjHBotIBlA
+UAKWlwQgl+BAAgMqH+8I8YLBKDhkiOPDiQZ3jLBQgmUCgwUZSDRWTDwwJJgDRPzR4BaTUkEFBAjI
+iUlEMh1sFaTIgBiAQmSFxGwiY0GCPOGAhKM0HmSEKAd3ISDDgcFhAQjJAh8Iig8DLHYZcUBCCAEh
+JEiENMDgYKIjR1jIlEpJxsVysJBxkeFgQaTEHBcgsgQGRoXFSSiQcaHggWVcdPAooOOiQspDOi5S
+QDY4RjAfI0RsXKwYU5IASVF4QcAh9NFyTGKhQJCEBVY22MSACJTCqLAIebmA8QgITkpmwomCDT7A
+t6FoRWormDjgDJo4YJEKEjaIYFRYgEgAg4fMUwa4YAUZGJAQpmVlA3VYWTFRksJyYEtSXEwi8nHi
+wQUBVjREuNwXDUgIo4JRYQFhhAfmwkKEYsHAaFzAXISUmOOiA4USHRckXlyAiAIoKABCAQQBSkrG
+HZBcKPADlwEc0gDDAYFKrKBIyED4UJDxDBAQNryCIgFDAgARFxYHBxQcjgQeEH3chzEqLCiE+ElI
+BRc8CaFQ4sCWRFjBk5AUChRwOUYlQ4IBCRVQAoMLCUaFhQGNDxeXkwYNEniEiQM+aOC44Hg50bgo
+oMQcxwPm4kSBEBwXKCqcSLCioUOIEAUZWI4r5YPFGSYgIUJSWGghIFMBRUOgwGg5EBK8UGATBGfD
+hRFYWFxKTHwooSJAhQVHk2lUTxtUzQoLjwGYwKiwwCgh4TwqLFY+VC6I+BJguFDVDSd0F26KrPRb
+iGp7VZV2mPa5xJd3S41FpD86Khv+tOycNLfyS+gsXDUZ6pExzXc/leXrS0bHPM43P8UzapFdZYZp
+t3vm82oltKN6dbUs/1C+OdlSrey3o0q31poS1Vl8c13FMl6vPv2Gt6W4ir+72WLSX+a0MqWlvESq
+OqumPaRTY72+aKt5W0ujtR6xquxpavxtSZp6cG26K7oSjc7/pesQvcmiRTUvWqnvimlX2ZrXZbTd
+XKvZGmIhlel79CqdxbsivJ19ere7OpVvkG5no0Sk1ToZkZZ9nm9ub927OeloL9WLZ3tlqpm3MzPd
+KkyjzXz6SseUqXsu32i9DJFu5OPC/e6WqflgvqmfUPcU98f05nIRbdp8Y0Sr+kO9PUa+yWapN8ui
+PFuP0S+1XldGeFkv1VP0xvDqt9btcX0y7er57LpBo6qerpHSZUR30P41Vdpbnts3r7I6WiEm0Vlp
+6m0h2rbyfMfrJvWqRfj1s2h379CW3j+jJbKm3ZmP5LO6aLS/4rF9s3nF/El1U0aIiLZVHe8bPLqs
+Whv5pK4umvLMDu0bzcus09fpUXVjpZpH9Q3iHtaNqXZo3dz0Ssa0wrryWamsjvNcX9NZml2nps3z
+dZO0ZdSbT+f0zd5xD8low6OpWZfWyLp2bNVoWrL+Ko2s9+d6a+1Y9e51VtGxdaOERTZ0KR3rmzr7
+Ymbd2fFeqZZqIp3rG2/i2ux8dmrd6JKRFO+Ox/QNqq/lsj09q258mrbX1/mgvrlab+rR60f9/f3V
+3Typb9bQ7LhZlAfVzY9oeSrfz+ob283aVUSlc+omTem+H8un9k1ZdU19dLa2VvKa2fm+MToWZSqm
+z351Qzu5b7zHXeNxq7bqrmxqp8ia4/GuSas/Zj1VJp7uHFmzW0tGa8Zd3/Cuu0+SNb514qnux9SN
+ne6/IlWm/ZZestO5rlkVrd7uYflLmz+lbkytUg+T7rNkTZ1ZqtoQ72y6Ma2bTarmo2SNC524S14P
+jZbuTddq93WZpv/2pzJbI8VD4zEX15ubeuynpDeS73qtKt2zD/NXm3V4yG64STcdmqmi1d2JcO12
+1sVTl9GZZHX2mXJ9kJLyqZjeU9JzmKZ7RWTynazHXkalv63askI6PxPpeodGJ52jU6l91XV5eqrn
+O9s7Eenp9D5GukTXzHWdFPeKladsjdmMmj7p2VLv0akWj5Y1ai9f1+w8a6Y6YT7PlTVHhzd8mffH
+pNK8U13zVp4ixaS9OjM8I9Lp8GW2W64lu5/ockn1Val1WGVKrUJE324Wap7lnqnJ7j/rHm1Mo0Xf
+sSrPfFyHhFqbi+e6vOreq7m53qPaY4U3pXPmF/eEuGRmPSUqfiuT6Ea/PbaXVbeZZtupW/Pd6W64
+p6Y8rX7VaszCtNQ/te7c+k65ZJfPs2boPOFBUzL6KQ+LyHt6VPs6lmEqWpWfV09K0zXcK8qfqzdH
+Vlo30ufZ0/ttr+YiemGd/RBZg/YrumrpZJJP1faEtXk0o5P1xnz1K7prIp0SbYZ6sN7YbrdWwtyj
+eqOnXY9lIR4enSop4tGRTtWb29WlREMypec61Xao3tzrzIp3iFv0oz10nqWr/ainyppawtt2a8LC
+2zFPSXrUtR/tr5evKBGxfi16IuFIU0p6fFrWFpra9qgH6c2WWROJEm9J/hKej9Z5l2tolbX28kmk
+JCr86+y4rHlekeolvSm0mu2yiM7LGlO8N+lp3UVcyr3TPVbWpDdtaUl/bt52sqyxIVrlFmatnXlr
+X7hny5q7Ja1ipfG43qCR9yYr3bGtuauemcY7VUetuu6l9dzWmMhUdkb5s/TGVLbr1dWzU0O9o/Qm
+yWp18l1m+ZauDk/SKyxINHdLilf6Ce00D9KzKixAVFiM2JbtXu3inf1p5eElVeUV2UhjuHa+fIaG
+tHRoQjob8w6aYepi5dF6t3S/kq2RlU9m2uVp83aQ8mRPs9N2ua7781y2XVXTXlTpwyL8bt7u07Z+
+NM9ZZZpKWNZvVfo2Mm5R3X+nWGqv/bEGFRYlE0gwMDAwKixYWjicEICJEC8Ni4uJFC8sLi0NSwuH
+EywpODQsAeDw0lJh4cKygAgOLhVQKixWLDQbGg1WWHywoHLkWrqfS1euK7tMz/8xWUOmJNRjJ8S1
+vfs51TM9dqOsPbrX1K5K3Osi7dlqM/O0ekdvqZ3jLQszrWu7VZ66pdaWEdqlrXl21m9w1fIOb6aZ
+RXgy/DkiX9reePIvuyXVJ51QT9OEJ316WYlkaiw7rcO9k36qv2qZ50M661Haf6MyPOk3eKf2XFQT
+2drqQZ+fXzzNrVeR4abPOTG3sn5Qb9OZWpKdy9K1Walm+jt9bMvNw9caX6u/uTL3dlKy1KuqIl+d
+HnPpDhONTOeah5q1dId8W5bW0+ruFZWOP2RapXuVbqVu2c9v1qFSoQmN9O57SssltWv99p5fOjxZ
+ZFu+XLqzO9NcK9I0xb2NKvX6PFl5mGbqoqLC46tct2vnW336Rj1bbypJ6TC1SM9s07undKfsvKsz
+k5GvEL1G1+5PLe2aCZc0l8iLSHaGtTe+0o75yq70fJNO06h1zG/QNI2sdzc5k1bPjXXPrdfBRbJV
+RKNz643U/h05aavuVDWXN+/8Uuf/Q35jNsosUi2sO+ntX+lsHVHzrkXVS7zzpdIaHa03P6WZ1GZ0
+r5UszdZ2zc5QXXSHqMx0/R5XeVfNkvZbqVZEhEV2qMzqtJqprlL1b/Tilb1Mqn96Dz4zV9FKZOtZ
+Wu7hi3LvCo109z681ZHMtWezSPOs7OdWUTfxSrPwME3v/L7utt+zh+qle+33rspHdHvm+om2pm9I
+VeZvVa3X+7VpUSoe4j1xlfTU3oa3fXWYdK7epFrVV5s2JLMfrbPq2tAIzQqr8JTflN7iFjoRV++r
+Uj023WnNK63E56ndqWIlXZesvqIqMy3Ve9ZqZdnuLdnhnfK5p0rTM9xDLfMVnZdkp1+6o/VdUp31
+zq16/VqZmfOnr+e51bfuTfffujT9nvsN1pIWXZXuoJmNhl6X2l0VyS5N5cOzPtWjnfA+Ruv6er/j
+PHMVogaD2agCS4zjOMggpRg0RCPSKB3iCBIEJEGQhWmsVnQHEmBAmpgEKYUMMYQQQkRERkRERCSI
+JEmaA9HJbQLQMfajSVHiYOEG1GCJJr0v8eHSbLToDyFBO03jqjVupf2XEb2HxzTM4HDwT5jbYOwe
+/zoce3A1p/oaL9EfGOvYzLuBYBQJmhjbv7sSlUh0EGBoPtzDexwpaqxLLWj+wzZvPIl1LEKJDb62
+dxxPQpa72W6sEnVcMjAly2jI+9OBjbXr2e6H1V8aoBydk91q1wXMpWIPtsr01fZDul+qigps2dcA
+GUcjZJoW3gtzikOY0zrdSNLtKeqM6QqVZRQ+GKhd8ijuvKh7ierk2R7V0MhI9gEmJjXmrqf2yt4y
+1nmx0ME+szOVwClWvzZWBcSBbBPwYBgr2FEgMFNld6E7EkmJoOhM0Ig/BFfPgx5H8vIerAbcQJuY
+h+bp76/vLLBIihTjioMfims3DSMxmaa/vGsOrtx8YOYvxvenfMS+qrFNImLc/G5PYBltKgfKFky/
+F4H9z8DDgD6IG6kocwxS+U7jFNskpqIDu4PTDa7+TBUCIKZARPbgDDy83FMMwDfeBi2q1SjjrG4l
+KnQOj5GQVzjXs0mcZMVBR4orF3LTRSScbgyF7okIL6aYYcfoMsr7VewopAAJBV8OfS1MDqOuHGGl
+1tm0kyNExY6NnuFYKQdwhNnj4D35xkjU7u5jWWktG+P0GlA1kxxK+MJBkRz6lKn/VsMTYFfc4MMp
+RdIcbzikG1ObgOBQg45hbEdbOJ6YdYCuHQ+06Hc+MHR16iUVC82PrHYS89ahJy+PQVOQkiLPJXxD
+oxNRl6zxBotHBZn/T3pufXbpYRAZAswgF6JpBuGORHaJ7Moz0ndeRpNNPwhBDe1HcaCnmLithLoG
+DxHfPnUcp1olX/hEQ/X0dV+3uEwMqeJt9hlTpFHXGPQq/a7gVtCIO1GEXJE7X8q/pqhSqQVsVaTs
+8K+ymgjQG0pFvy40iNZoZeSp4U+zHnZCWS2JImi1G36AqMhitDtGDRd9PuWwjY6hOisckSE34WCd
+GsQq6LWuZxWIWqvDExB91/gGeaPqIOD6zBUGp9d/g/e7gzs76squjeKjEqRxF2TceSNTvhJ4BQpe
+T0zxiwOzZdzE1eh10zI6hyq86qLHKlBERhInVVV2sc3an5cPH19IgkWgQZvD83jUZB4USraEckly
+0Z2pg3op4IrlMAP1+kDFbCqSxssCxjfQBuW/xcqHM3NuW+Y1SFK1GcBSAcKF442jcIBpFNygKcA3
+TxWsiBJyDafnosME1xhYERH4WZKz+HB/SLRFq+IFTb0+X7W2bZkaRL/yELIvQ8Wh64pD6V6yFMUY
+MNCGVXgLzLd7VLNBXWh/raqUzGMyiAoux5A3Vh7LSrNSro1/EKjp7z+j2a6Aoh614BDwBZ9gmPfc
+iczUi3Lt2J7vn+JXb1g0f5fHsUJSQleHgmZsIy7SPoQ2C0RU/ytwN+FnQdbIjwBjAMMezVt+tC76
+5R41RPxIqlkX7OKIlR+x1JT3yKH9KM+eOLWncHEaoMewp6LVqbF3Nkc99efbcdSpvdVTy9R76JT/
+S2JZT+lU1HUq7+ipOWR8cAJnzTJiCPu5/lijuWLqZIl3mQxgAE6d+ree6otX1+nUPdFTnO7kMU+n
+GGs9dXeGqrrUqRvtYA566uNtDKlTx1RPaeyyOJ3S255K6AbCrXffFeljTikK1PJXCEFLgHuUP/K2
+pM1fgUO9C8UAMRAyQWYujzxPmirqmhvHptjavDTkphgVhNlaMDpys/9sYR5OsZcQOqsraymhKrOJ
+sVwvb1JzKRLsNPx/zahaaJPnzK5OU1hpA0pyNxEWhDE7tWGzSfFKoMlHfP+CNiGxyROkeXyd9KMN
++s60OSqOLSCA/0dCXxXZ5nLGggEkWXHmC9COiFFhudZcWxp9uz0ENSwsZUdtoQEYEU62byfm0ta4
+VJhf2zYBsX7AevGrnH1twMGBbsyEsTmLkjeo+gRbOyYZjqYyCOPUg7qYhEOOPgHr4r0+z4MoDLQN
+0qftt4Tq8Mkb4UVebNgV6MscR0xgJIUuSXtmtsw9zA6nWXSsRHrkV5p2CsHuBoTOOtplTKXSiHgx
+2bQywmp30C0OzQmSBR+jEGJHoBYNDqkwL0QxQEzCLhSL2GIylJIGfZJ854TVzTQwR9LgH4P+VjUi
+3NiSrDVpEMT6ZKGsvrFdRIbnu7DeFep6FGiTHANCLCTM1JXXxrQQVXcL8Unne8sZeALESvK0MW6A
+mjG4KQ1gAzdCV9SgaebN7MkNwGNuFiQ0kvGEQ7ZfKxAc6k96byiYVbla4XyyuhSwRgKmuHP7ncaX
+NmSw7oFwZXhgzRsy5XdIbrLyDLJAbyc6Nnvg5fwR5qzZrQgTz5AeXcGWRlglh5/Zn2xl1nqIfGjw
+KOsW5gik/Gfu5AW6MI08WZgpLAARSWhSj2MgwT/jGwrBX4iOkQQWArndJ6lan5vEYIXAFiw69A71
+9hnzYyG173fn/9cTj5FFJCoShFt4mth1N+9AIYkc84LMC/V0yKTaCfRnqWdwFEMeXBgv6BaDLhLD
+iFRQ3rDTBqMn9EFCSywuJdC2QOH2lwY6NDLgAi2G3TNjWe/PoBiMoj5o0ExZP5GDyaDFySG+G7gY
+20lAxkjSoyuw2YSfIT7CNzyz1+3kB62M/WDAfuPEscWumRAduPaITZYKc0n1HQAKDozRw+Ys70fT
+PkScXZ/2YJ/HY/XCF3QQaKvLCBqbvBtWGXN77gjYai2dVeBiphcIOBH/0iJIP2PkSvM6Fwzu35VN
+3CtDjIVuYG5BuAiHIjECkylbVe1Hjr0gQdW8BQi0pIgL0cTGu4O544YoJuWuu9kipKU5Hs2z/ls1
+PmwCNzBcAj28oUIiHApg6zfBSwah3B5gu2cDzD2SR811VRTwwoIQNvw/nyj5T4KYeLD6KN2sOwhG
+CNHdIqnUcheUngg5x6l3L6mcsvLpfw3F7U6qe8IPEaYxTnsjJ0VTThp0wt/PtsBOU4wTnAkab6u4
+GO260CpW3cYBpAXXPY3L+poGMGeH61PHvFqqhoq/H6CVqVZvduG95QxeQv4DW+Dg6uM93ZhyNdvh
++gomDppS1o9MzFpTsMeuAgbqZAuVPYGhvi9UoCoxYJNGybTwhxX9MWarFf1ENMvFzyoocc/qamrW
+xbgzHzfZ2X9AZp2X02qdXp4d1pTHitYqN7SK7QM4tlhWJleKw7fagVwJiJRUvVWFFwXNqSB4ucU3
+wrc6rVxxVbOEtzLlqyq7GD/GbkUs+XMxqDHGGRWkm74Ya+1zMXSMEX6+OFxsmt7lkIE9nItZI5FS
+28tNwAaOVaHXUC3CdszmVb76QB0hG40iY6nZjJB5uMiScNwcIdtBkVEYw+uIdvAI2WmLjC8fHJNG
+yHioyN5+sIaUkFVx/CidLeffKI0sRJqV30UqV4TAuLAkCjd7wWDNuU7mp8tMiO96aEjnSh/i5tP9
+iAw=
+]]>
+    </i:aipgf>
+  </metadata>
+</svg>
\ No newline at end of file
diff --git a/horilla_theme/static/horilla_theme/assets/img/icons/users1.svg b/horilla_theme/static/horilla_theme/assets/img/icons/users1.svg
new file mode 100644
index 000000000..be8c2efa5
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/img/icons/users1.svg
@@ -0,0 +1,51 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="80.13px" height="80.13px" viewBox="0 0 80.13 80.13" style="enable-background:new 0 0 80.13 80.13;" xml:space="preserve"
+	>
+<g>
+	<path d="M48.355,17.922c3.705,2.323,6.303,6.254,6.776,10.817c1.511,0.706,3.188,1.112,4.966,1.112
+		c6.491,0,11.752-5.261,11.752-11.751c0-6.491-5.261-11.752-11.752-11.752C53.668,6.35,48.453,11.517,48.355,17.922z M40.656,41.984
+		c6.491,0,11.752-5.262,11.752-11.752s-5.262-11.751-11.752-11.751c-6.49,0-11.754,5.262-11.754,11.752S34.166,41.984,40.656,41.984
+		z M45.641,42.785h-9.972c-8.297,0-15.047,6.751-15.047,15.048v12.195l0.031,0.191l0.84,0.263
+		c7.918,2.474,14.797,3.299,20.459,3.299c11.059,0,17.469-3.153,17.864-3.354l0.785-0.397h0.084V57.833
+		C60.688,49.536,53.938,42.785,45.641,42.785z M65.084,30.653h-9.895c-0.107,3.959-1.797,7.524-4.47,10.088
+		c7.375,2.193,12.771,9.032,12.771,17.11v3.758c9.77-0.358,15.4-3.127,15.771-3.313l0.785-0.398h0.084V45.699
+		C80.13,37.403,73.38,30.653,65.084,30.653z M20.035,29.853c2.299,0,4.438-0.671,6.25-1.814c0.576-3.757,2.59-7.04,5.467-9.276
+		c0.012-0.22,0.033-0.438,0.033-0.66c0-6.491-5.262-11.752-11.75-11.752c-6.492,0-11.752,5.261-11.752,11.752
+		C8.283,24.591,13.543,29.853,20.035,29.853z M30.589,40.741c-2.66-2.551-4.344-6.097-4.467-10.032
+		c-0.367-0.027-0.73-0.056-1.104-0.056h-9.971C6.75,30.653,0,37.403,0,45.699v12.197l0.031,0.188l0.84,0.265
+		c6.352,1.983,12.021,2.897,16.945,3.185v-3.683C17.818,49.773,23.212,42.936,30.589,40.741z"/>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
diff --git a/horilla_theme/static/horilla_theme/assets/img/icons/usersearch.svg b/horilla_theme/static/horilla_theme/assets/img/icons/usersearch.svg
new file mode 100644
index 000000000..c17ce5526
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/img/icons/usersearch.svg
@@ -0,0 +1,1235 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:i="http://ns.adobe.com/AdobeIllustrator/10.0/" viewBox="0 0 60 60">
+  <!-- Generator: Adobe Illustrator 28.6.0, SVG Export Plug-In . SVG Version: 1.2.0 Build 709)  -->
+  <g>
+    <g id="Layer_1">
+      <g>
+        <path d="M0,27.8c0-1.1,0-2.3,0-3.4,0-.7.2-1.5.3-2.2.8-5.1,2.8-9.5,6.2-13.4C10.5,4.4,15.4,1.6,21.3.5,22.3.3,23.3.2,24.4,0,25.5,0,26.6,0,27.8,0c.1,0,.3,0,.4,0,2.2.2,4.2.6,6.3,1.3,13.9,4.7,21.2,20.2,16,33.9-.8,2.1-1.8,4-3.1,5.8.4.3.9.6,1.3.9,2.6,1.8,5.2,3.6,7.7,5.5,1.6,1.3,3.3,2.6,3.7,4.8v1.5c-.4,2.1-1.8,3.4-3.2,4.8-.9.8-1.9,1.1-3,1.4h-1.6c-1.8-.4-3-1.5-4-2.9-1.7-2.2-3.3-4.4-4.9-6.6-.7-1-1.4-2.1-2.1-3.2,0,0-.2,0-.2,0-.1,0-.3.2-.4.3-3.7,2.5-7.8,3.9-12.2,4.3-6.9.5-13.1-1.3-18.5-5.6C4.8,42.3,1.7,37.1.5,30.8.3,29.8.2,28.8,0,27.8ZM45.3,26.1c0-10.7-8.6-19.3-19.3-19.3-10.6,0-19.2,8.7-19.2,19.3,0,10.6,8.7,19.2,19.3,19.2,10.6,0,19.3-8.7,19.2-19.2Z"/>
+        <path d="M26.2,30.2c2.6.1,5.4.2,8.2.4,2.5.2,4.3,2.5,4.2,5,0,.2-.1.4-.2.5-5.8,7.4-17.3,8-23.9,1.1-.1-.1-.3-.3-.4-.4-.9-.7-1-1.6-.7-2.7.5-1.9,2.1-3.4,4.1-3.5,2.8-.2,5.6-.2,8.6-.4Z"/>
+        <path d="M33.7,20.9c0,4.3-3.5,7.7-7.8,7.6-4.3,0-7.6-3.6-7.5-7.9,0-4.1,3.6-7.5,7.7-7.4,4.2,0,7.6,3.5,7.6,7.7Z"/>
+      </g>
+    </g>
+  </g>
+  <metadata>
+    <i:aipgfRef id="adobe_illustrator_pgf"/>
+    <i:aipgf id="adobe_illustrator_pgf" i:pgfEncoding="zstd/base64" i:pgfVersion="24">
+<![CDATA[
+KLUv/QBYRD4G3mKMbSYlkKYmkA/uPr80DA3f2tfme+4tvnv+6UVZ6gR2/atWAQACAgAAEBEmgyWG
+JYjiU9FVc1EBrRRNh/PEJ0hxQTaDbBlWHzdPm0zL5ZsKKSjwVSDNNjd20ucrPe/tmsJ2Np4Sl+IO
+usu3i157U7zGj1lPmiVPSbTmehMxLm5DmwpnuCGv9FW90HHjzIv0E/fDVYOIW5c83LVFRelxJUNJ
+PJxKPciOj83BmHGJO/Qpl2fPmfV7+CKKHz72OSWjtyWlu9i4p7dITvo48jaaVBsWPN/l0ezo6yoc
+5VL2FwF83bg5tIe27p1GPARW8AjEWtdPke5QTHgHnqjDGOfYZI6hx73E57Ql2GZ0X0gvvXTauIDc
+lfqNnOyRluT7fCkkbBwpqDt5BdCFtBjMUkMcUe/VyIQ2+ia395e6WAzWw04aHN80uiKctjgLz00/
+gVLEUxNaHhdDfkUTXCbQYWTr7Wl4n5qWJ6L25fJ30sX/kvl3NnagK01+MxprJUVHAR7CJXfNiY0f
+zDNfV8t1Pe4nDi71sFFzF0rhKCwaMPt7ipAVkEj7ekNXyLWzwPwvsRF9+7MiDwoTZzbMh3fhiWuv
+FaIGjm+jFam2Txkh83plvRax262I29CkQfd/qmCOJ7CoY5WmTGIhb5RVNqLF2sM3gZAdTmBRNeK3
+CTIsEwd1z4H4rtBF2SxJ2EhvMMbB88Cj8jXBGEFis8zRPozAP3gE3Zb5wIv89uPbu5FxXa5BY1oO
+4h599kwapYhyks7QD0Gq4ujk8l/pDr0Iqdc4Ik5+jgnUNsf7XoDSeTUQi1JlK9hFHhV5VKZ3eUI5
+aVmGPNWUtxTHSLQSFIw62NpTSCB93/aKqQcCj/MfmuKyu5Opn7HLAeNR5CzQlt2aF+XfQKD0trIz
+ww6Zb7Xp0WGm8ooWSJ8y2DQWN/2qHMeYyIfIuzhyLIXreump3puKYAqFvlJKzTltWF2k84peYSWP
+3e6GlvE4da4tYZKQFNdFXkeQqZnEf9yRIh0M3nu1P0kSCN2+4PRRNu25u9NuDoluDr7AwHSso3wW
+03mapl52Ed7a/NLvxnoCCWNXuKWM9BJ84lYmuL1B3PpvOhrJ5b9WtpzK2ueE2LIRK8haO6e/kbEI
+rG7CfuBvhXc/vC71LwvFf3oEW0rbC32w3K0P+b22XNzjUVZQFQpfW31h4iVZj1ZQ3Ir0ePN5hylr
+jZCOTl5+CQvazwajTFg3rGhzQzzDD8GHt8a1MNPXOBbE6YZs2uNKuTiurdIKBcYEomyFT+hsXEVf
+2xZE0Zc0ChGh+7tYo959Mun7hde6J9nwmF8Ey/aMihX9rFI7HC96SzdHnnzABM8IkpKONiZ3d6JV
+krLt4NqBHOhV/luBa8UatGz6fKtfybbWKbiGp/4IsTGT5oSJMxk0lLVCppIFIq0hSSUEjzM9XiEz
+cZjpUsRCKXpcsUDJQ7670F5o/fHs2wnI1LmmU0fJIqtmdxde581ECsq7Imevk4kjq87duxk/g1A/
+7VgXpsKBTzE/3U7mMnbUlVFaYKK0O6gJJuzDl7laQ0MONXLk10RsHXWrOO2mSyjFJCLGrM0IBMU6
+jNAbzjdx54eUduX0qZHQxVxwIQoHzWorvyxE2tOdJOUbSISTrZgxOGzdHKjpwOVv4e0zQ5PIGAct
+qyoa6oPw7Yqqj019cFFhm07aJsAGaG96aJKUjmUQCts74ouQr5hKZzLSQsKwa7UgSqYOh8OV09rG
+xRIKRpTpVyRGmNxeqQ7S0uZR9EOph93UyL3JJmmKm25rhhVy64DhKVeKbpKk2Pb9iBmn7VP1q61f
+Sw/tn1vga28q8LFGuqTUNhKbFvbe0o7EpZjkYXMW0UT45hFrrwodaVmjgj7rcSzyMYnaQIvyRh8m
+BV2vUUFCaOVDaL8bFZo+yFMbungyfmWRx7Vf2kWfgq0Unhqd2EcWZuuQnm1yZ4hVJuHa5mnEXczm
+yR8PKefN+zyhQBKkwC3cy3Npt+P4YLjZms3sGRdQ3ixp5EccudWe8WhFgWDd2Qry6mOo0emAoHby
+o/b17zkTuYfomIgxFYfD/MLT1WTGSzJiRukEzCELws68KSYLeJZiixMSfPXZ80soCQU+/NPNVbWq
+U7xF6222PnxVh0rKxUpY/UbMp2p43E/O2uXelLYPduCeiDvo5q8nHBenLoyJfT9qT1SO+oPXa8vG
+j09TZdL62mrK+8I3oUSXhEstZ3VRBHx4GmTz7vXbX9e+vt2FE+kuOIxogehOaI3DrhERSfXpvMYR
+coMM2UZeG1l2yyJobjRwT9gL6qjw43Xes6Iyb/DHwSZ0Y1ISHRl7/nSYWekoMRhhf1XHJFs2l5NO
+DAoZYRjlEbbtj+GZDmaZflNCU1xX13czw8LhjQlP2safNo3hjE4wfU8UEUG25hAOWk6LXV9fxnyO
+eJkWZwElhdhdQg+aj7SQ0/JmotQbov8cF3i2G2yWivUlVGV6/KVdKz6508hSztHTMDKnL98isZt6
+HagdOl13tk88CSkx5HTo8LLzGuOxTrLDt7wXD3UCt7OioSXGcwoZcQpycFjMvHnMsus6T5qw79ec
+2nrDW0Z+lIYd+UPRViw+KpGH0ezJ7kKaxf9RDko1a2PIRzKdR5FGEeF9Ee5JIi7gBhCJdZWIncLK
+fgdzbOf27TPl2lEu0WWdjeIQfHPObOqXv8ElWtI4bZ+vYG4qbR+tICuZJNgUkiIazB+vxwpH7eOF
+adE9gbPBfDvwwj5FXq+pZyYUBOGXtOfgUwSsU1xV3ON4L9id3X/LHC+F75q+ZlFmK3Jxbkph2yU8
+UEZZ5CF4lXGhNlEwhBO2JcllueRNsrw+kWuLo+pqOFx3k5K1K2j/ezr8Km8euk8sGsZ4LD12UthW
+HTaG+OR+MtOHaDLLfBWF2GwwWJ66G9NX7TBdhWVh3bCW/KY2DA48mlWn7sJ0mJaBr59TV/WLYAxT
+rxi0z95C8jZskiqaiRhDg3mx6w3GDmInqGHTO/87igRHC98Wlj9rCblVPgUXkmJC4f4gp40Na03L
+4tWuYrTVBZVHTPozCzD71QdhMF1B4GdxI6wI0tBJBWaXGfv5H1dY85BkuEVuIk2xwhZ2iMbh+tmt
+kXiQ1tMQZfBgRqzN9Inn1nMpyBcZRqcgWefUNGQylVCD1svB5B+KnrM9fo+jI8j1m5bXjhxPbY9h
+Rfpjd2y2RfErBbo+tAfvT5ahb31ja0ttLE3KUNjNEEFyqL09N+WSJxVFGM4fNfHdX6mZJGsKV41D
+Ldak2dbsX5H028pbd/+V/bct81ss9M8LfS0L6ZtBZX2l2fRSE+aXhUEHRSYtn71FHefqooPaHoTA
+Nq5v3gOOu1tKXjFUmySMK2wUFooFH5uOh3OWSL5V/pVVXw4vu8w9QVzqd66L8phl6f/WTVLsw7h1
+hqVJ/qOLH1kefD8hmI3VDxbEZHXj5t6IxpZf17OheZuc59uwFVwuUdJXsvXXTfBf04M9H7jU2d30
+mN0E5ujqUvGDZBhRvDiFjDLQq7d1IUQQOmqdWURcKELO9xT+oxyCjVYpCBs1EyQb2y8spzk0vPgg
+6xCVUYfK2tnmJt/QBf+yYsKDsq1+fp2VPb/lguxhYnHgUV4VZqAIv12/yLfzZWG15cZLCAejoph/
+rxfIKDzFuUJVS22GxZCchzsQNmqzanuEa6nUCzLtxJMb3SP1+D4hRnv6v8uiHHyi0b+sFX043sKs
+t88WdJJ3XoLeqBMhyli0l/hY1Haplw61rHEQ+sjEYN8VPLJJGYTwNDz5VDyDXemGiDQhugvMfB8T
+55xSqxPKYYUlRN71mBc8e7NYpuKEceAoOjSWrj0IZRne+3OGLEFmGYkOd4K+65LepYvRFeSzI/it
+9xNqgkX/kcHfYKkQWNdWu4mgm8I+jI3rWufMFsOGEg4dkd407+TMgvw6Qf4TguM7DqpYFEGEx+7w
+x67zLgH2DD/OtnBU5vuttkKLFrTugRnm4BUsSVPkL0zokysE4SZ1sFxZBRwd+C4XUNEItuET5izf
+S/dDo45d+IEqgJyM7hqjWDDjrkSpaqbdwaK6y+bKGkScgKcjixw51CwIPeKrDv9OaRAP0Kjk3y7/
+sDGwdGPALjwarZDwu5hWYrvms3kIK8VuoUS4Ena7M/REyyiOyfh9weuOUt+cT+/oA6yXSpZciXiz
+lQGfdVQQbDkdEZAECSV731OhMulPB8P0BhFljtFo7MLFILZN5YyOcLsZZKC6PN/O09rtM915tEC7
+juwZf84nUJqzfqqqlGiF4RhzDLthN6a4xbaZo4yc2HF5Skvec6unecaxXHukT9JiZbr/BvWAiYJK
+PpP2k3x4W79u2gtVQ/3/yoa7qq/6/vnN4FtPgS+o+nygBfI+m+9gcbFFIOysHmo2R7t8xyxPSdS/
+lDqGVbY3uE1h5JByOWEXsDtsPPVt2sA1Lj/SaP4VCJdntW9BMH96SqIgFgV0daY3OkdcefjVPIWM
+Ips+aMUsZbZczlHBgGaadDyu0qvTkC/nCy2I058Fuj1D4daMCX2T4WnqQ10ufsDm3sVQ83Zt6rFR
+/4GM4j0yvpdEXfrsr1IhEul+LY1HojCqjjxIEvuRB7dB9I6t2ioUL/uQEVbJDFvaKImaxQo8x1n5
+spENdLUSE6LShaB5X8AuEy5AhmM+yKkt5O1W0H8Gl4vjzcbbURmKg4mqggqHuRRI4snMiaPUqkCf
+piXtyeGpvLjSWQ83EAozxPd5mDeOPMRLDP+hg5nHGC7DZj8R1zIirCaOnUzPrlQGq5Cb3iPsBtqO
+/wGKzcyJD/CqNVyN9QRxkUm6F0enwOOkjoPUHkp9RDodJGwpNmju+Jh7O+ldibZJIk2ObfmHl/ie
+WCzfJpthhcxb6kwJf7tJzBXjT47nL5SwfnhT33/QRY7YdxJ+QjL+Cjfrea7L58wj+svgNUwMe6BF
+Hr6NRhPRnFS69NjQ2bvWQNNXf1a+t3mrX0EU2hbg8YEM52dzx/IdEoP85RY6rJ1cfe6w44Qjw0zP
+4EmiDbYHKDfgeDfssWLhUskfDGxaoLwrGxprBw2GbSqL4zjw4kD36eHeUPbB55EZerqlqb2IM5R6
+kFv5REIKy2BM3S6QuKh6c8ElE9cIl9tDpGdvT08TeoY4ykFhT+0XiwrGdUEnENSue0Z1QFD5uKGp
+vUbDUrSKQQC7qaAXx1kfDtz1aYQHhZvrUUyJQ9dB7C/qMc+qXsxER5caNVl5FH0UkYYCITRk3lWO
+1QrviVaMPoIe4hlRc+BMWAFvDUPk0oAa3NFAL0je6of7eQaRWGn9cxIICkcyTLsxYtyp+aKwNxiv
+rDCmL26HFyLpN0NHr2kVvV4JoX34v7fm/EOXFdi062vDPefV5RWUKm9XYncqiZFk7Gl7SA9n5FLR
+jLItp6II+dG/FAIi5MaLnBGH3XZIfu3vyQqqUEpKqL8+J48Q4RF/sPRqax1Szt/5sEgZ6HhzQeyZ
+lhQE6she7W0tRD91jT949nhFEMQ/9vb7BBrHNak+7pLmomlVwf61/sgCJXfK1OcVC/PUu9a6gB1i
+ETSjOeStRMjpLrFG4hChq7fXvzJe/1GJZRNaEPWz93BykPdG5E84iPL2MIqSMgQ+NShhuPVesMHb
+YCrnR2z8B7nM0GKu4ns1Mq6+pDZxPbzvHWmJslTXBp3aVYB28nCnlr4lQxNbs2Y69KUsiqAd0g5M
+JMZotbXwQvhUrQWUO/AJKZqFwtibbmLW+mGpu5jPIdoriLU+KHrVtLfFGrGH5prRbSUUP714oYwo
+/uHVFxt+PfZY8gCp136XHieh/dpT4PYhCAnaFURTsUVDjmk4F2n5Cm+DIwTRUHnm2z2h808LpJdb
+WwCfn22LDyUPN7paraf0gy0Xh3H/6rPiOpXryPqRIEh1lcXibWV6p/XCUQGLjvLvDyeSL1Wv47nx
+1kPJSVP1VvcTF7V/Z1tbksWE8wkb4hOmJbddlpBMQslIZvpbV/NrpDKqt5kT0/PYPWDZed2tiXdM
+vC5B3C6u5jXGe2i65gjQy1DNWf6HLZ/5zue238Zj6sAUGqdidKPCrYZbDK7X7Yb84/ffJlPPXJhV
+nsu55yxpn5U5/dmNnSUbcneZsgtiCX9mG87d0lc5TQsv2ptXzQohRKi72/TnJ1UWvLUWCIkKhp3L
+vBCmbK7KGoi9b//APRblLHcL7vYK0cXdz35SZ4W9q1LShbaY3icjWyS3NZ8qWya3HZViFgturylG
+Yj/nwRdQIlbKi2Ve4YYgDR3LyAjTNwZFwphVS4rtmfmAK8Q5vsXJHxvXhBSGzILls5exjsREVe7h
+euPfW4s5HfNSoKCrK7j1THSXSGwJ4V1yM2Qoikz9Kyam8crNMuKlXsx/+tmhFEK5lmWfF7pNxBEP
+Mev76Kdw0zePPdZFnQtSkUQrmpso8JZjam//0UG2CqEXaT3KLRCrzeaqJVFB8giMF9Y/HeA/4sSr
+nmK7q6HTcFi+LFnabBt/6t60rqOCZBLk93hZ4aTHXM00NKLYSy+2ejckltMHCq+UtcAxUl+reVsp
+jA77j1Pp85YW9pXb7va6i+7vST8XtjTuk+1ge4BNi/xls91b9wONaX6lMB4tyLpydtZhXcN0SEuK
+nezLKhmZ0g+3EyM3P67eWxLB+xAN4BUfNqWlYey8FNi3HgJhpThLySepOgtpaMH1YYaKuXVMyJJT
+k19upOyMUX1o3/h7ME7RrfXYiwPRuCzQjjVA0z3p1iej/i22526wvg3NjxO2ENgS9M7X+/6TpjSe
+ro04PLbeG9wkWuGIEjvPQ6+472Jb2t6qjaZW7cLMr2Yqv8S3lIu5d/rLnCJQY9oyZS1efPkYI5zj
+huao0uBRhtbuS1kX6cvsnyzfDXlbg7izbig842F39vqlaNtP7vDsSkZzQ+4R9olZB8PQSIiippv6
+/UXDpg3BXRIuMw0MHxbsaR0gO54bCSYMFQ7dCsHBjaosCQpCq2xA/eI9kHkbJinN/F+RR+zZcD6T
+VDRqEI/oegfWAft0nQpsAdGdSTRItSKFCv3+q/BMBP98Ho7b50L6JK3nVvl2DN/ZzrceFR56YHPj
+0MZG327GCimyeln0hPGJUq60v4tEoztJgZCL+m7A7I0hpN41E10qO4GXauVuNgiXVTOzax88EJrK
+OHRDKuJLppfL3cjy7fc4qp+WVf4aPZrXLoXjha72RcmGbDJw3SFU3mWBimQmWGRYPOfajKdN1pKv
+OSdCVjvHpamqgBkWxzv8qh3Tp1XF8Odm/O1G0Bj909TuKuoem+I8E+Qmkhxk+tmt+/Eug39CrsgL
+p10suBrYKm6IndnkdYNE7oVaqVbyHbZdEPk45VNpu2R3mA6Zw7p6BfriQNbwjJeiu/NaOX4pzNH1
+lcOl1yK9UtVAdYY1hX+H+it2xPknkdS2c+wb9Embwvhj5CwmFuMxu6jrxS2Fxt6VF6Fihy0S6Uju
+nQmWwIJd07kHTqR+8Kd8PyQYQJsgxyTeyWzS6LCtvvDlsMtrHwar4BOGjFX5Y5J0gnigPR9vrMPz
+eBynM+E70K+cTxMVkBFPPq1J7lMaj4lHX3coZVnaDSCGGSXhFjGmMzqkYDqG+JWwUv+awDmtwPRr
+hRQ2D24ro5nwH3EyrmWkcfsFnfZFWa5WxnBEyrJKhVCpZFloZjkl93p+je2wiSRPynJJ2G8Hv1Aa
+pUixsaiG3/lHaTN0e8KwrlnqM2TwriXsAVJae4hJWeUMx/SNLVMej26hsiw65DzcbTG44q0WQlcG
+OpU4z3xP73Gcf/OYi6Mj7uXSoxtpfqP6Wmh07t5xROEObFn+6s3iha07lDJvyMGD4uWKT1BhnxD/
+z/gZRsXm6mfnH99Ppb8o8GZNHvSqK9JNrh6DgvqY/ikmkzaGnKT6rZZM+aI1jG+bgfq0tEVaVC8g
+BwrNcvZXYpq+erZ3k6P662bUSVbBo0Oah9YnZQeOmQj5SbfpHwoighuZ7Jqqdz5oRPI8Tkiws7Nb
+xairkh8K8qM8MuLGyjOH4zgEwqsRhIpBnjdwOoEl5cUhKNwgHIYheJb1mgPb1A3BMf6FQMIbIWhk
+JTyTsKRe3KRe3qT+2KS+VKVeVqX+cKj360Qq/EQqfEUqlEYqHEcqnEcqLNnusObpFPrpVB7SSf3V
+KTTUSTlor3LY7Kze6wTl60Tp65zv69zz6zz21M4PwgAVa5btbZaxcZZtdZbPe5aVA3lixyzbPFOY
+DwSCzm6Nzn+NzqKNzrKNzueNzsuNzimOzjvOcjiBcFKCy5wZzJxczJzkzJwozZyzzZw3zti+qZwH
+HcfpEF/ZTl6JflMlfxspf1OtwzZih2ILRSINjXQMC1k1HJuqIqJsmDqqH87Nmtsd2/cr2/J6k/eL
+awx5ZvuPSG7BnpfmUHsx5x1CenEFL+G1BlGM1FD2yyHkkE7On46IH5+IX/hkridnTKLvbJ83jaY3
+vqh7PsNyfMvkqS3/Yc2V5uR5k/nBb5tGZJx0At5I2CHXFfO0kQ5elX1vToagx/dJnt1iVfGB0w9k
+TiMZT+COpfbyNh6X5B/pRo3kdvpiGoK4BcaKCcaKDcYZA8pgl2u/m2t/qGs/iaCzX6OzYctycqOz
+Q2i232825nc25OhkkvC3Efs3dTy2UV3tu4Lvm6Tv+87v+2AIY8lmJiNnZplv5t53JjuW9MCtN59b
+OWe8N8fVNzfcb84c3tzAHPTj7g7dvg5dU5YdZZY9uZcdRZcdP5cdw5Ydv5bd4BEGNSD6aTj0szT0
+8//z0znkp+Lnp9Hzxuo4GbPoF3PAL+a2L2adxeOVLwaELyZzN9xZlMYwTsSQR8QYP8RwNmTUL2RU
+J2QsNAg+Goj7Rpn7Tu77RtH7xs/7xrD7xq/7NvgSP6B54XOOwqcYhc8oto/9t89w2L7S3z6YYLnx
+2JnzyJlzv5lzppkTlZkThJkzcwmlWZjyL071j0f1Fz/1bzZ9mzT1jyf1Fx/1VxCmINsMKWM4KeM3
+KSsnKaMnKScXKaNJqdGEVb4cUr6UUb4MMb7YML4MYHyVX3zBbCfHhqlci85cB5y5bpu51pm5yJi5
+uJe5KoLw65wdv/wcv3Qcv60w+sU1+vE0+uIz+gnCUK7NVC6GVy5+V65yVmdGVi6GVS5+Va7PdxaB
+2Q+G+Euc4DuVI1jWbghO6CcEQjAI66wsbiyOYbwRpJtBng8rncBvBcMwzpKbNGPgHY61ScZplPxQ
+xoPJE5TrEAh72c1oVWKGkSW8ilIuNIhlL2KDKLw3mvLbGkcQlgt8b1ujfjimXF5Z5x/DneVny8ki
+EM58ob/u+DWjsMaGsxT0F4/hw5a+97TLTM3tsn3hCDlRPJ3/j4wk0h95BmPyCjVkaZrX5mUealun
+tDklnlNu0Pv/4PXfYZedhJSuotVTq7b16CyQeDu1uYXLWYmPEW5sTyEvcbOtLLjIMtrIriPPLdzY
+Lk/fpk6c3ZYzUHrz0CTtJx0MzxtkPvJ5kUVhywXPKPdYIjADLKaTNbn/yV84rtTLZg9qIUSmp+57
++b8r2PKke0pD1qgKUUojdrM5Gp2cfrFJeFJBKMfRHYof0/hSfW+0bM/pXVKbEx0/XkJwnk+vsnyr
+v9+Nhqcg/8Xouo2U61Yx5WjuGx6ps+ZDSSaoPtuLipIZwTyjA9l8KRqFzZKoqAw/SZJQOXMWXiWF
+DumqNFdnPw/XhS9x255eErBdMqeKOiPVbBtWiApD+jxm/7gRpy++XE9Kzhj0H5lVLa5kgZUZloSu
+qFdXyDBZLhyeooc5+sEvj91JLKR98H2j0cLzwAxzyOx9QYfchMnDgrotJbKPjjHw7XuL3XAFcrdU
+3O92Cy3ARrU2BToSbKTZ4wk1m45p02fb1UVf9yb8D9RsofdbJNOCZ4oKv9yiFLz4JwV40vkaKkeL
+G1zwJtBM5ojHife7aqHdiuEc0ackczeTJbIj1LFz3Sl3U+eOQlq7dxnKx9KdLO2YA1Tcb1zIDF69
+jYJ18BNCJEYNqWRMghrlln4axI4aKuongxxPZaG79Gq9EcsKhrD7FXLc78sUMRXElSdD+yZ+fQvR
+wkobtPy37asQ3aJly2mANhpGcZPE9EKmafu3PnzrlIZ6UM0gFOgwJeFmQuDGdH1T5SsongvntNeF
+zCr/LDqGU1ufW0HG2EDj90Q5RDTXd3xsTvb9Ym8Po4BAMZgOxbGMOBwUw1Y5+sZu+FZIxNBYWgja
+xUS9l7lmhqaictMpBF8n9Kug1g//jaLssdQv7hyeiOGODqOAwLN7DtsMz/N4z/Q8zySfjGKV83iG
+SKrV1BzSJwqJYIrpZS3Dm1wRjGK4Pg9965B4F6mXYBPyCF7UssMoIFDrlJ6WNUcNhKrn/wFsax/J
+ocD6sa39ogwYCxqYUVp9D1jtg76qNa3TF7HgoFdclV83XdU6fWmRWIAA29oRvBGshlpFD0Bx/CHW
+XUb5Va3pln5xHSQWRNAggQIFFiCQr/pueHFdRxdY1ZqWZ/+ABQ2sal3QtvKAo3T96unLwAIiggYJ
+FKA6KjkqPUWQHHr+alCXQEHaJVCQQMFfGrpV11cZ7ZwGFrCrRCxIoKABIoECtVxgLDASKPjKBYUC
+dUFRAAIs2BYUxoJ+gbEAXlAswA4JFDylsSCGUjgGoyRG4TgoFjiL4jTKkSyLkxRJkySLYjBH4hgO
+szgoFiiLkzgJsyTGwTgJ46BIoOBbUCRQgJZGAgXcgmKV7fkFiQQKFFiwzmiBWIBAAXR5R9lVIsAB
+CRQwsIDuazojEijIV/mggzr+OMVhLDAOSKAAgQMSKGgcLECAcNO9DhcQCOCrinML8LVFaXRboNKT
+BBlGAgU5FEGDBApAKIIGC4rCWFAoCxYciqDBgiSBggQKEihwGsooDuM4jgQKIkRKoCCBgqZxmgQK
+CiiBgkZCjuRQjuVgjuZwjueAjuiQjumgjgIxkANBkARRkAVhkAZxkAeBkAQKIkRCJmRCKKRIjORI
+kCRJlGRJmKRJnORJoCRKpGRKqKRQDOVQECVRFGVRGKVRHOVRICVSJGVSKKVYjOVYEihAlmRRlmVh
+lmZxlmeBlmiRlmmhloIxmINBmIRRGIVZGIZpGId5GIiJGImZGIopGqM5GqRJGqVZGqZpngaaGqop
+HMM5HMRJHMVZHMZpHMd5HMiJHMmZHMopHuM5HuRJHuVZHuZpHud5Hkh6pod6CiiBAgM6IARKIAVa
+IAZqIAd6IAiKIAmaIAoqIiM6IiRKIiVaIiZqIid6IiiKIimaIioqJEM6JERKJEVaJEZqpAQKHOmR
+ICmSJGmSKKmYjOmYkAmZkkmZlomZmsmZngmaokmapomaCsqgDgqhEkqhFoqhGsqhHgqiIkqiJoqi
+JAiCHIiBFAiBDIh6pOd5mmd5kud4ikdyIMdxGCdxDqdwpgZqnCaBAqZRmqMpmolhFMpZGCNSHqVR
+FiWhGiRCEiiAECc6IMWgEih4mAQ5DAN6nMZhEOdolkZJoMCAoGdJoGBZlEUxFuNRnCmJEig4HsSB
+lkM5oEVJoGBSpgQKHsZBGCNaogQKnKVZGGVBlmNaDKU5kgQKDCM6niY5kOOYEihQjGQqpGdJCsQo
+igcJFBzQYRQQNUlRAgXQAz3P8zzO4zzN0zDP8iyPkjzIgxyP8RhP8VAO5UzO5EiO5ERO5EDO4zxO
+AgUO4yzO4ihO4iQO4hyO4RRO4VAN1UxSEzVQ8zRO0zRMwzRLozRJgzRHczRGUzRFQzETIzERk0AB
+xDyMwzQMwyyMwiQMwhyMwRQMtVDLtEgLtEDLszhLkyzIcizGUiyUIimRAimO0iiMoiiKkiiIcigJ
+FBQKlUyJlEQJlDyJkzDJkihJkiCJkRQJhUyIhEQIhDhIgzDIgihIgiDIgRQIdUyHdEDHcziHczDH
+cihHciRQgBzGYRzFQRmSERmRARmP4RiO0RiMsRiJgRiIcRiGURhUMRVRARVP4RRO0RRMsRRKoRRJ
+gRRHYRQJFAgggQICJFCgQguOBcWCBAoQaBeo64zStHjAAgZ0en1VFK9oaIGxwALKvOr5AVzl9NVx
+tJvzV64N8wEEFyCw2qgLLlDpvbbnOlr1dwcX4KtKv6yro12przQqdzr9ohqO0qi88q+Wq/QqQwtc
+/tXT1c7xtUvB9HVtFG9fWUYjHX/kug51/JHrOlzg5jsOLXB1tKO5tVWnBbnh1dxUR3twAV7rrzot
+oPFV19HOruWVp6cZr9lVOmABAgtWHJUpBOwXdXDAAgRa+k1RPFxwwAIE9HSFDdwCdf1fvNbTdTwg
+gYKapS97r/GKfttd7iJoCgkUtPSr0y/e0XVBsXd9BdtarvGOfts11+l1nutIpacGDRIoADcHRbFF
+ERz0quuoTEXgHInRKMbiHE5xOIbROGgWHIz64lUEzPUUDNBv++Lc2qJdA6Zf31FR1whUeuqdVUdp
+fNXlJwLGMA5jQcMsx4KlcBYwSGMsKJajORwkitEsSBjjUBbFWRrFgaIczYJiAbM4YBYoSrLAOY4F
+DKzvWIf0anMRFEayIDkY0NsI+AjYNwKdXnW6jiKg33aFImCMHF8PqDbvhUbf5TpfP31tcTSMQDFQ
+mZJXtd4cYwEDq4ym4NriqBZBciwLGMj1lxbxVd6/okgSUMefCJSVrgsLGOjXl18Xo1ngFMaxLEhR
+FMviACmWBUbDFIqSGI7jKI6D5FhgAbIUTsMgyOI4DoI4aOQ3VBwsDrJAcaAUyKqjsj2vYQTI9SzM
+sYCBPMbR2a5xBApA1+/brh8BDigWMABV3wIG8pZ+dX0F1xadrwiYBQysLZqLESBOwSxgAF8N815Q
+5XeHIjiM6zEW6OiM19Qqv1QEyvU0SKAgTlEZWsBAjtdyHeX5mtZ4p9PrvKe1pChOcRQOlqRwGMdB
+vn6v1aBBAgXLkSxgEGTBsiALFOZYwIBfQy39qvReQw0aJFCANMhiLGBg/d88R3ka3boFTcKAsUA5
+ioNwDkJZwMCqoxJdvwi0fO7ATXF0zfE13w9YwMAq62/YoEECBQgcsACBbwLFAxYwgNfU4qA5FjBA
+12+Or2MEzfU0aJBAQeEgORYg8B2A1zqK6/kuy9eCBQzgtY6ueNSgQQIFCwoHyAKroVafBcCOQYM+
+mO7cTojQWdwj0RA3awlvVznVIMbN35PmPHIzbbbkxz2iKlT0vlESxfVUdutunMb4zTTJ+NeNIoEw
+hkmrEM659QYM/u0vJfcV+dzC/SndNHLh1Sy8O1L1hiKa+0XYTJxDwcPJ/Ctc40X6Q0FDePQXMMdy
+auHE/fl58UVHQnnq5TJ9p3W4SviISjhrcqQhNN+zxh3ScJ1E0oa3ZlcRaRvfW3IlJMOzx6OsjP5b
+Ih9VJ1GbFxN6EuvWV3D58j1uAdvvdwjQaa8oV33uwfc3Mx8NKGZEiuNMveHwRETHtCUXhVsMznC4
+fsKysstV3H1ojeMKiUcBhWakk0lGWS+tU87Zu7g0kyx/J0qrNKiOZ9CwuZHPNN4zUXDfyYnNnlmR
+njJiz25yeywYp1jmGbX6W9mNj+v68JCiwnh0bMDIDU3Jxm9QzNDrjdNnTlsmWlJ5gin1XDiujRKY
+ATZMnfB2+KkbtO5XspRfRWIR6UJX7yDTzHFmaKwcozb6KBz8sLlVb+YLsSMJSbzsq3cwMIRZE/r3
+R2wjKptPmpYVLhvZNpCwN+sDSqEKYgQJzNwlnON4ju/aMUxOf5YT8hCS2fhr1XpjrSVTqLbnKlmQ
+HqMXDNSKt48MlerJIi/J6Cxg3Nh+DSkpqxYfJK2O2Ez8fZ3MCFaVhW4x01NtyKmvw+BEdcUETuZx
+2MSPnKKDsSmSHT9pb6iCgbpu9IAZb3UoPol5M666+2lk43fUplC1bpEQbVa+St/ZPwb8EyMhRc8i
+ot9PC8kC0baGdnA/7T/0UOwamjMhIMEnaJ8bteloIMVXLVMwPoPadqsq+skZEqYThQUbIr+ZRWa4
+HrX82JhHsSiN5DUpJWnq9a6zsjTw7tkHJK4pNcBa6FmSOjLtKasfH9vfmiYeP6qVAsJXpEx2zBxm
+/cWmA9Fw6szS2t9QpE7xckewGSvxX25EjlOFZJcLTGGLD4Q9uVVTKhEYzynzGPzmgjth1ZT2j/IS
+NdgpT6alckSJw7p74+cDK/e15XzNwRimrskIU0pf52yqLUIkHrtimnzCuNth/MtpRBMbZW7t1MxJ
+LEIeMCTKyZN/krP+sHd7R9J65HT2ZjGkvANvEI4N3nt1QjBXrdGrwCl1KFCH6pDCZ8vbfU/sSZSC
+jnyYusrbRi2fCyVnxTMLz+N4ODPDqlgmL7mwD5OF4WXQjOVaFzrUzfcYrrvXFhdjfyWm9O++2tbn
+XIiILRb8LlVRuu8mOgzZ+cPXH+KPT5RD4shaw+c0trSj1sLpwqQT5TPu25vSz3+blJ4zuoYoW9b5
+8xeU7qxsx8qY8xLnMa2CzVVXj7b/q+wLRKO9P5v5ylzx23mWbN35cMJeFEda08f8kiClMlAFtM0K
+26ZcKDyS+kjVPpFh0wB9cc5JeYSPLQkVhhC8e68pUEXmNN1s8DgS2l2Hxz37fH2QIg+2PV5LLXwR
+tpX+S3hVOC5OGUbOlNQiiTfUc47mXF1J0efl6iFxfilyET94FA6aXB0V/IpvObsZYyvJ4VPxTLq3
+6VudyiQtxNDCTUWUIHOqSL3LRasHWap2J6XBMfkkf+XvIgoy25UYfxCpickhQ466tPzR9TMbgS/0
+kYhnslF1cnaH5TdazIBtLBpVU9tUpicSh9tegRCGec0eLdrB+FsxKSsbCgbJQLJhsrnxUN6qp2w0
+nahr8m/asxNLcsxGAcl6TL0nuJPqiifYNG+QptOq7eulCm9MFPKxC+da+H6d3bTCgVCIhv8QmbKO
+eIfNTVVb2PQs+z22UDBIzxB1xt8ty5IJlo4Dif9qxrGVnwxnZzDpbVugDjfAlmegFcuPealPpGIW
+Ee7ZWhkqwMYY7fPrrXg3S3FbaehSpznRj51tMvQ5N1RXOK2Ibkuy4FxvQvCwHs5VIMOiPEsSaV4f
+zzyqo7+q/bl6cU3cXyGJp/IcjXTvIDQwUvw/5nvqvYS2w9OJv0zcmqVOGBuokeQPXW2DeMrG3PUV
+oHL6aJ8j9ZovaM5gGU3hqnmiQMoaU/lH36ViFKaM0izEnBDmuaS9TMihT7htUZaNwQjVnVWUHLHI
+QtWQOoGNqJDGOv6XXss/dG2j2swfF9zDcLBSdKtnf7Ss7H4vwmKFf9ec04JlNEheNng8uPpuqrJy
+z13GL05CGw8v1CI+Tnv45h6c6vCkoBHCDwVJs514kWsjMzicndkdZmHbdTDnxM9YWLUNrvYVfqH1
+3ckX+NfwvEdpblNBfoMhSgS6j9nUS+KvGemjRyzHaAufS2/hy73yjaxiyYSDudLPNbLdHDPZzpHT
+qdpKVIisPU2bzlgzgulP5ME/FgG2UgJBNKc5VeH6rerUZmEZboazJltiX8tVN0ROK6Nrdb93u5aZ
+QmC9wfsvj7ofdtdl8sGT8N7DXSxuRbNjHykGwXAYFQ5snEnxN55gIh1UkYelbK449XB/RSr2GrXD
+HrefoYzMBpVrxFHGQkmbom5j3h1DBUoGdDfbp9/10rpbGs7hVZ2h4y04aY2qI6N0xkg2r5uJmWKo
+YP8cRSePX9WykmK2CqkV3rDK16NH41zmwhuVaDNHMKQCD2VK3AIjiQm72z3y7LOQFyPBDf/fUPib
+r3s2QQ5W3E7eu7FdlcyZgaaHbeLcAm8lqP6VTdmNPZ7B2ODXsiJqGnhudZOyHlwb8vOvi5k2ZPN5
+y0JWWC0qfmGQuiro8nBNXVSI6/9vF13WmQ97X0Ch9JlILYnoxJc73C8TcAylzIiJJz36UGewsEmj
+E2SOmf0KtVfdMGO4zkXkJJovKLCgChx1vEshg0/hFFrEJO/C01utYiHSqFsHNVHcK+5/F8PW8jeF
+TUZs0/9xt6L+TMUKnBQeB0MB1K97i0d6MXXphgsWDEor0uNOwUmdNS4y82zfNKIgl8JzkAJ5ndTa
+DxK3C6RGHnpMs+zk6+BJKWuM6G3FtBJnrdzgjFDSM/XVepnDJPkt203Tr+fj7oLOmRitcjYKkJMX
+RFX6b0clHLjaqym0wjk3YoZSOlpnfcKvtfI07sbSdSm+pZLM58rdxRBwXAzkW9onlnUXWU1qwbq5
+w2tjxPtzY6Ft/OOL2/4i+raP8Uo9GG8z5MOUfvw7qpez/JTni/dgbwqWm94QC5H3EO6WNf+3QLLt
+bX5Pfsf0yIlvcrWQZFikH7k0U+dHZ4aS5ifO/29dOaLmhdMrmj9aEP/o42DofEqCgfuQ2UXGlSTP
+gQt75lAD++Ep2o9jf8izvRIdTWyPEn4UZzgeqWc2y1hVSmP//D+nbQT13M5DdlIbWj2gBbnQO9S4
+yV5JFkj7wMC4RYbUrGxQaha6wULnwv4l0e2LdKF94HohYbk3EVtHOT8suK8orgf5Kvsfdd2jKEig
+sxxKCk5lLSos3ziQ63CONisN/aOsUetcxu7HqVT9IoL6u3kioFzmuSwnzDia7Kkf4Eu+4y9a+aV0
+ahlTz8qLJqs0C6NGGeUM5x3BMAoxQRFB32rYn533ee/d9t6JySjFFnd+g36h7MHs1yykTnsxPMPp
+CH0m5iV5zqfXc/gVl9DhygeYXkmeDJfTUv2mBA9H9UvRmHpLflj2jxORSb1AD3agFi8Qgvzp5qTS
+Bu2QC/UBtmrt1WlDfKR4E23MXT89bMstYVj3cpZsUqpn0Zzgv0F0z1C42/JwhGgsewlElfZg6RV6
+aYKUSjQJOzD5Q6yqaXULF8acMDBosxXUhUzqggZDmzlMd/AvfJOhpmiHAgoPkRPXO0T+yrCOBNnv
+FwFbmkLjadO2W+gAqU2FNh/8dJioFC581PJSwNBa17/C1vmHt5qdCbfPSi99Ak6SR0tmCsHxBRPE
+nfziBEu0QgINs3rVc/ZkkHeBh5PdSuIpId2fMvU3yEprp9HHOHZlo+QvMQ6/JHrO5N98NtmmtqvP
+OnNmbAw5/0nUYsye44pNEMHEr8Os67mVwJlU0tG+ELsHPaHYWD11Dx9YgbMgy45beoB5gWFwPtGq
+YbBh3sJG7AOryv3Sstdz0zUc6Dn74MxQoQci59mfIM5R5O6tKCNzskyiSs8+PCaPYnJ+KEmumFOe
+2O2DIU5OA+MUtFGtzbSMq1bAa/5e2HUpIMfUIwbwMRCO1YdAmFZmRzx4kt+LCZ1E3axQoszrjmho
+kS0bFYOZg26comjhYC5H9LAYnftrf9jQTe7+9M6kdiLzLVaPQqEoL0inIe+QTdF/lDlW2NM6p4of
+/3nSYujGUEmoj9oHOhjC6IlDk+dXH6MQvjScdNMLfPhI8bqchB4toPbIGazk6xrNwlnlbqHFP9Em
+rb9STDMfU2VnPhKuNJ/7MtFYJRjPiTFvj/uD4ammUL3oXbG8qBVn+yY1/v81pMTYKNfHYNqisC+G
+DjH+TDbNgtULd3vImAy8UGAM36KCfGeWm5z7S3raf6cT876qJjUwSunWfLCw/EuURAwjmrw0lpth
+Gl2/Q+x15cGpn8OjvJPHHQ655x0XTtyiJOQ4Rmji2GO01uCQDXu8y3VKG6o40ZMj3ObLvGAP+gHs
+LpJUuDgtroKPbUxh2icB8yvORewGTgtLu4HpprKjUfWIGSqSbndivJBJw3Voxh7Wh88mZOaRcoBK
+rIhS/+3OuSGTRz34FuSXJvuebXVyXTOzt7LyRTZGnQYhBtRH3lpx8Y690Ka9MquescN4gRLo2hW2
+nK/s8gSRjb8ySTwwW1YVbJSksBzz0U34aqDvO+xXXh4ETmwrtAjtywrVmqALpEL69b19RtSgeu7z
+Iy8HUS2jGqmX+hPtUQ9f76azTnVamyoazEETI4NU4hArnir9oF+H0nhTxVs5lvwnSutgEUvvfmyy
+SQ/9ZUYfX+k16iF+WGGi/mrSvBA+vNtuu9ZEuhe32yXtbge6qZSl2krdt+7llDk/TVIrxH545afR
+8NlTnDeiARtUrUE1EFf0O3wUc1MVrjmA1Hsr+BU3+5vzqUbEp7sXyxKdz8HY7o8/gJk8TsiFyzur
+9vr+mAz/3zKx30fzyAkn7f6dEVulYIUrmYnhnt2IgDvbKxceNOS3taewex3WFNMOBjXEqYp6D2dM
+XrVpaHF412hhYTXLIQ8wel+wC+7GF5dh+xjswzE8mMdB85ucr9N824zp6axeJAYfpAJOLERdi+ul
+XLH6dnfKVFnV93y/xjCk5QtJ2EJ8sueK988eFfKHoIJaptOb/tL3329hqLgDuNScF041SXnPul9o
+KWX4YydGc1UjY1sH/CTFtgTn6cSLdrmZQzzu1K3TsG08Tq2W9phT5xzdbwY1krND26HaL4peMEoQ
+EDXMG+0Qh/oMi2TB56mhHYhDAStvWC9TI7M7yMM5vuVEe+QfzyRAm/RZkhauqwRdEFggn8IyDG0i
+3dMNv+mc7i4IXxlNZ7OGGVATRQ4w8jNfSDuFkzqSyq4d0jjnzy/rY/h/zIU3WiQT2fddJw0x38EQ
+tZbO6zBWn/hlnXfdj5fJfY6atfoX5yCv++N5cWbSP755ht+9R7qcDKG6mZ0nfBfto6OTGWPRoTxY
+ykhYPYps66DjZsiOkjyDn5rLPIeETKXoF49IgCGL9ZcjtoRFG6umKww4Aa/ENjIF0o60Ap2N902w
+Il4ltOZLuu7BaughFfY4hM38uVgt8j0fctI3GjMZpRH4jdSuqa3Hgrrp6Xor7JHr2gqHysDtf+EY
+NmllxN9wfszUSL6C29J6FdWsXHZPj50VDvl+ZepFBEjUOu2baUrepAw2ZAT8xDnxctnqfLMCGpHB
+QEheCHlCIllIvxP1lpccD6M69Bt4dS8PpypkaaLDtOdFyEAWjsf6A2+QIjIvBWqF5KQ6GAjJpL0w
+ektpuijp2jS1LxSE3sDEo1le6l82I42SlYA5Wf5cha4fc7/mYdd48SLXOJ0mSAK8aQc2/YbTkg75
+ckZsHC7fZ4Q5cikrNBIGgzq4Ja1h37FZjbm+6dJZ62lZKw7fAMssKCEqobCOCJumXaxN/VnW5Zne
+WlQTDwEvEGClbd0BCpu4sDY+21Sgb2NJ8opuDM3GY7V3PjKEEnzyfHwIHpKpJ0R2RfGT6HnNnyeI
+uyErFRe77apAmYQ432SiL5dkpE3rPXrVYo/SSmUptU01JcgtNM6FFk8ONx/d5M/3771NDrUzipCC
+B1CNDZnBtFmh/Qu8E3Y53owY1qyP19cuSdqmG96+10gDAmL702QJhBOV4uJiVei1bCgIqzHP5JSe
+YbN0ulrD123Opkvh6IY2EVLxx3rOUn6VRyQ7GDUbFM0+IN464zG9ylDswgeJ9maU4BdGrQb7m1+l
+LqdO6nZBMMrjQwwa6Ngr34o9e4sv0v0KvRljDQMUxxslErr3aBxa4UYdTYkKYeBB9zYStvAlld+6
+Lpmr8b/JiNy6nQsF2Qf3xbD6qiwVLOZk6H5eTyqy/wxRchYhySeMvL250EXr6fIgM98hQmuRNAgx
+wdA3otQisMwt88ivyQLVRmQxD65QtWiEoX1H4e6lyr/Hh20evlQ6TESuJ8TjMQed+mjVgNHhWjzQ
+xk8nOliNZ4ARe6hKImp+6ikNBzf3CE3hrkiP5YffxG0MC3SNXQMd31MrmrPhkvnke353s+6QUZLI
+KAnkPE6xIWe+pBbTu8aaLNc5JwtRzWoJy/o4csPRvbvvzUKclvGU+LBO5OISqX5+5AiRA620ft9p
+QvckgitbcvPH/fWP84gOL2/x86pdqf7gPOPszrsf1LnXdktW9gJ1ODdXc3boiaPw1CRCILVVTZ7C
+RZlDhf2IptHcbgJLsHaWFgfZbP1CYQcrKRyPHakmAl1FMeX1ripT0kMm9fHSMWopzMsfe4xUZtVF
+MOGlPF6+Y4zMvrnYcrVXKQFPViO6b5mygzymCLEr11cmKVQ6pRuqJswtJiQ6DsGA6mEdCQkEpj98
+c7Cq2SdM9lqrFQYDYeucq35LelOjXwipRiNV2d16Lkz17+BjqkH9JdX+rPd3NfL/GxcblKUmswoj
+J3sTkjngBHIRhSJz0KSxh57sxs9wfj9OYBuXG1TIN4lQBrS1L+OT97BQTY50xd0xVchGqKxC6N/N
+JSn7nbi2QeL7hkDE9RCN1a1Ny2YWetHm6rHVcHD9l7IMBrp2wI3dn0qv94mA7Z3tSfGbKcwZgWs/
+L6k09et+HfEykgi9EeGy57zq5G0sw9ilNTKNwGSunqdpNgYZtwaTJsPjiYvFNb23ZvHjU+Q32xOO
+EBsOK9olOX454mty3QqjtsMjxZSBffR34G/iP5NTJPFDH91nuqSOCkTlC5F0Kt9HyfL4B6KwWhqh
+YPs+9xQuAnjZTKxBPldHJOH1q13kJc9lCao+h2IR6VGtbvf9W2UrPlwhlaS+Erkgfpx2KMAdxMNt
+5R6JuPPM1fYT8y1Q8qTpJiEPRHi7QEfYdBD/TM+ZGcoh1CSsBxsfX7Gr7Yv7yRAlRGcahVwY+PWn
+qqUeJFo75JZigpXE03VUZQMVQhPfSYNVrr7E0x6fbUswtHhxhKIaRkEyvDfFN03lW+lEtYyoXTqX
+ZZ8oNerMv/HCydP6hxX1GlGZz9jNGGxhWHz1GfmTRMpF4YejvNzpIdgOhWuz6SSvhX0l1XKDtRid
+/Kj6bzoE7vumbzFYFsNsNLEYw1JEvnXp4tuS08fyLSelmBbDnTqhY99hiItFkGs5nchRtoEx41vd
+fXveHXtM9cOvc6/NeNUOtivBwNPnHYKz22maPTWEwWoJPeUwA8H1X+Pm453FynSInYVQEnYDMtwy
+H8qfxX9dgedUn3BgssrJfWIwjJVniZJsHYpPHFMeEimdoJMFJGovJlv0sTbMYLcOHxq+ZaZ5Qqzd
+P1Ga/yatMuxj3cy8u/Psr1pUFG9S6QNSz0SwM48n68JRssxeQXzUHIgQRnatcP+x9JQnjzL89SjX
+plGiigTigAiYMDF9FL6hAe/rZxBF5eXy/jEkv0VzdI6fw05fqjl2rxeqX/fxmnPz0QHSJ6NYzgcv
+s0PeWeluLdsgPKnKvE8WT4Ns9koj5xOltXyHhZNN9iAkc/on1yKkoo9fE1iWiCGFx855PtgUBpKb
+77aN9SecSOh1/La/flmXMxnKfFOXtyqNazecXz3aL0OIfQqfin3SivPcy7ZVd8UaQJYeI+pb7J8z
+Fxn3CdwnmqOJM1h9pjesFogQgYaJt+zCyiUVtD2bly3sJ3RUOmi1n3RiTyS2VirQi9P/87JOfLGQ
+OmCX9oj67zmF539uHTnEVYERyZ6BW2UZSflTJ1ADl11u/95HXYNGmLfVKBCIjPQ2H4JN/OhcXE59
+A4vcOlFqIf1hbF4uwxDF1nCqGbGPZbmERsGbD5fh25CmwiAjvZ3bGjcTXh1zHddldMle+yD5izWH
+8zNaQ0SMJ62YwmlXaBnSaqicyu6xb2lPN00Yscd+75SGBLVzQ8mQPt9So9wykxqltz5TkcdUuW25
+Zg9sLG0C5tRx46LXG5p11E2t7R6z48A+P9ESk526XmjZ4WwRyY1MR0z03XwVX/BcEz8o9yRWGEoA
+/eRL+9/wnActNi5RJ0j3R2Xzo32juFQxupKoVxa2711siqz6YMkniZPYIlMo2vvqJiMFMOyN3X4K
+4Bi7LXda9WygsZrjaRC8P/fx22SNr04rLKksSO72S8wrF+ymhi5KGpPKhWhZSVQ1yUx4YmWIaE+i
+2WJGF+Ia+iEbJdPrbCc9NxSyiippyRn9OQ4JxT5+l43oIx/eA+srhxQplTz95REyjdmIpo1W/hln
+w/CeTpfAUMI1fZRyfgFxDZwEzt8pRg/odeG1ujj3pJFr26Tt+6YYQaMTY4fEKLpIhXhtyEADhSic
+eX+iKo5irxEGvoEv97AdOnQJSYGmtlZQOSJAn7OWlXvO0Px8sow+symuGXkj364LyMtXTGnG0SdR
+ql8prFqbV3oJKkQ4ab3FBnBRzevFyMY8L/oQ+en2yPVg9jHxJqBqikgkb66JfIv5TPR0VOJr2B2d
+FShGWtpCm/BbDG8rNWVY13FQFD2QrlmV9f4mlr/29cC9uL7gE219Rvi6OtriB9a2bxLnC+6i56Ks
+FN/PTncxoqXMFnqey08eT3qm9nmfSHchrCBi4ekU7zKfXM+ztEQm/mMoDrYmJTiFPkWrl871cayk
+WfrT0NRPOi20X/YaYjV6eeIPpn4Tv6+BelU+rO42ekHq+17QQH/3gxfS3Gfo8zGUzNXG2+okQTv8
+yEEtYYeE83U21KShVO44LRYoxCDIxqwC/Ixf5HDx6ZIa1TWW5qg1JGXeO4XUfVKHX8jdX+3NCFHi
+t/Fp0q7XHi/QrjejP9hD+KnI8kGSsml8N7TgXTu4x/TfWHY5vtLBGutOjEc3SiS0wOKDHYNeRj8k
+NYpvY8Jegrb+XtotqZk6hsUEzhU/5ecQiqvdfe9PziAhaPSnfxml0enGdCfo+jpMnZgcGLpKqacV
+tqiMsfTRH7wUU0aPhWvgLgK4SCS0x/FhRHbQzaEdJMBh8YDoc18FYuetyWbTQzjQWeZjq28/+7Ns
+frwJvhQmxTSZuTQROhs065FUs8xLcZl57HRZeoTyXeJf7jzki6rE52Tmk6rCEquQKW9UXvRzsEvx
+DiXpTAkLO2sb9U7sEeppFUeTmeNZCxs5HB+tJ1eXFFefZOfl5XBtawyRgjV7RLFUQ73rQRyVaXFr
+mWadRze7qNcM3cTJjyFSIi6X9r6KcYs+yJnpRpNvPVhSa6yXj6mNQOOB5WOiMnhiFh89e1hKt5E0
+GSx5Ektsl0WDqaeQJ1ZnMz96LoUnvV5uFkl1M3p34lsiCE3fboS6dWGhAXFyvBYj32hdd/XeaP17
+WJmxRuiN9TjAyQHLqRvGh/bKGm5FT2uGpyYUF4O+im9hy6lo+o1F5fLbl4nGtNNhObC/sXiUJd4L
+GQZEF2n5Et7sjgSXjmQH17vXPK0ZJMipH+/rQmCsGI3OQz7mPQsxs1qyXKsMhmwc/1E+HE5edipf
+IYgZjmuAca91/2bzzU6LukJVi5LC9AcutfhzzLxZviD1I1O5SkiUcCyfD720v1dcsxd6X3GHgoin
+7qUarR6HJFNTSvcVooLhZLivL0RNeSh6TR3yaZ14h7ZK+EK+ScpKDTNWl6CncJF4nMEdWJ1DZoFG
+cToz1QoiGy1bHSl5T4r06cskXbuR2OYxs/IoCPYzjOd+ZLUuHG7y73cejoe4vclKpiDtLWZCR6dS
+0tMQfxKSHd8Lo1XjRbQW9SwYTvaHcqhDeuGVFaFd6tDcuiH6dYt9JfJW5KkyYuFw9C2KOIOWHsC+
+IjMGM+SFVDwIkVb/s+F5k9nQQ0K3derriV+h4DTaO8c2tNMa16TmuIUStcjDqGFFP33meZG9u1x5
+DJvf7kJq0apzqkF2pm8ScsEjxLAJojz42maP4VA0L2lJW/AVn8s8SbIdMqpeQgT92ttxt5k7Tkmf
+64jRC9wnjfmr3LUO/V+Fxvsoo99V3vS3kxn3enkgS4RXV1MW+/YsvmPqHMc4GPWfCocpzeIZNhPY
+H2XCMMfGotPZQVrT5lKHiQRykrWJkT+E8uHHmVtkUDDpldKrQLbl4b4tgrRUo54U2TdkSk+OiX2w
+CvK5ExLeGibwpS97EbobuPpPSqjJlUypOzFOWkLMfu46OzIBJoyk5Grj4GrTqGHwHxLP6lhJHUvM
+WLbiPBnLo+aMH3Ea00a2VfUxHJVqfLB0Dd0vRDhIbXkPBH/htbsRoNq2rox65vuc9nYT5SlDcCeV
+pncgDxB24FCs4bFz7Om6FQ/iJyG6wdCtO9C2Bda6Ybj+4+W29yj2dJULh1KEDJ9VccYK43X4FNyW
+fSSlmDCcV94+1gZXxNJ8HvF0ylYueUupblfuS/MELg8fcyVyEaGv/3ro0oZneo7nwdAUVuvWX47T
+U0rG4OWANVhftZX+1FV0XkXRUw4371ShNyv3yRpvLDx6r8aFAf3shnxNjEzsgUmjmJJql088jCQL
+UErZQymXpOexJUW9+dpr437YUviAx9J12jeruQY4vE3oK5PSzsMo5qjlhoukOU+LbHd4FOvGi/T+
+LJB+oV2fEJnzWCJofwvZRGUunNKZBPW1Mq61wKvXDb8g6aKBf7mqr+FjdDLe0OyFCb81LhbtsUre
+pRsrwn8GTyr0o17T5uCdFtnalLq6Ul4I76WqLowHvacwdWWxIdrrXRMtRLDLd7rvExcVwQOMZ2JS
+AAtGVZIo8zgF/drGetoIkvSD3CE1rBfpszATuaCo3Jt/2RHigoTC9pIzS/onl/xxyWIHMEfp/Dym
+ByvM0U/sNW74wUT/9lfrE24zTPi5J4ia2uc6ZjkVD/ecSB+iOYJRL0xJD4eHmkV8bqvwmhNJNTG8
+KQrz8KQ5j984ntXn0RAspvHxS9rjICz6URk8nDc9p1y+f/AQw+hddXMRam2C+UxrKcO1qjIKxeaA
+EV6O7yVWaWp+wR6dgFz/LXeZrcxeXDCshzoPq+cg8doTF0SCKVXGNRKyHO05kaS+tci+So9i0YOs
+2inormlXBQgZ9dr3ZeZE/xI+Y1hh+kdg5QZ+VNu+WemSBQOof9ZS9heLIi8o0QfcI2HrXD2D9ul2
+cwUXNAlPmhV0DYqVj7io3skt13AkVTwvmE7sSafI5OcYrzjTA1wONqpMSHuP+rqwmHS4178dtCZG
+89IBZXBr8MSVm8ng0dpHu/NVH/kENzN1O9fUi3eJ6HWfFrEFKmmFv43/ZZ1uuS30cUrmi8x3Xasn
+ss/DXSp6xETeH56KLRuBQp/Hsepss7V422F8GNwMhdNl0TQ1yj2If+J7CUPL3JpnJmWQstbGuCFP
+n/GP9pHjezKX/6m8ezPErWCxqZgpWaDar6knMfYIItudKlT8hkIj7lyUmWgoIhm4qlD1nvpCUgYb
+ngXRPnaVtth8DIRt2jj7SDjWx0d3rqm2UBaKEd7SG1bkjX7XlSCtS9DCTMXSfZ+MfisYbtQselHr
+jbQIUubIMdoCEzH7HrI9wcoP5k4fXAxTUcmRoh6KMAR8Ka4eJ0Of0G919iB9eJuJmg+iZ+/RcqPR
+FyFyCInKg/8D9dbE51uH/7MNIoj9YD/HoQFfl2eB3nPjUYH6JlUvxoqSB+iwuffKaOpFzacRiTkb
+qi1bfG2rUslFg7WXmjRvSAv9snCiESgzXcFmN522+Y3aN+d6i3+FwJfbAYMWKcrpd1aoxVkXMtL+
+Jh/nUJ/GqcMKScaInt/6aKZRtnPpooHt35tyDhwFxawVG7zKgAkIWqzTufvLgfhPgcan1VaygsNF
+vi7WFCG1duT9VCBQxmpryYc3c9EXiODhRpOZV8QVUbllOLLxLuY9/dxmJq6alWfFF0lEKhWthCTK
+Y2TGxCKC+DPno0JNCddOJQ90GfEk8YfcxQ8YdbfV9PrfWqVU627L4ZXOtppC5Iav9uGuBl4WptVr
+S9del8Qu/LDP+7nStBg0snflup126/kPI7/MGuTlITqhJwbWnei9Dq7pM1luLQmVKfh0KTIVDhX9
+jNajVaTCvgZrfcyTZV4dlLPwpJmhz3GEfYqiX6hcM6YDmhC0ziXC7D/GWg1+xPWGjfTVnTakax23
+T0Z+j8doKrrqdFM9qybzWet+Wf6oLChnV7QUk7ZuVxMuBZfYiX4xCo1ge0JB4ASzsMNJ/jPS/7Gz
+eZp7pYybFU7SlUZ8BBF/M06S6MKs1xgW3m8jVzeKtF5NGPGNW/lJgzgXQT4FwUyaVJ+jxoGV1sC6
+yReTB9d/sWOpnlFHRX6HTFi62rCYJphrjWJatYTHuLfwItXhdwhW7bGBP7xUOxdJVBWUI1/Bvrs8
+FCN85c5jfBa+y/AXhaf1IHp5xiI2SgVu6L/Tig5joardz5CSg7eel44J7UCtFaulhia3fqawItZ1
+yEBcv/rITS7Wr0vcNyELNDHpMlH3f7vv9QNUoee277Gg56EMx5a4aY8Zkhr6IcPhh9zCLTT6o8yE
+pga5//TOEzYcJNKbIutooRhcG1i87a2XndzbuIdyH4leJqxxnvZ7xv4AnYWoPFuEwUmbWcrjsRkI
+HaC1cr1ng2orSWT18sjo2aBwI0QrVIbJaCUUZ5yEmC5y3s4v7MfEz3CSp+2GZKeU0mYwnxNhe6yv
+kWqLnyXjxQi7I68eCR9CJAW84k7hdVaUWhhK2PVk4PsT90ZpznwkL7RqXf3eNvq6F0iCWIo8z+Kg
+87J+NLkMmPM3KE8cYsm79uPzLPOavzzLBVdse9xriPxf7Rr+pDkkmZIiRmFv6JUQJ4ePwgoTM3n9
+dOooFVuDiLuj8rXhe5WVkjGY7D2RXJf846MhezNTyPy/U1iE8DsK5MS4Bz3il1ze85eQEnjO1mOy
+4LHN0bng7/S0XMmirDYvHqLcxdlDBO73GcdyTluE3mXVDy251DbmrLjgvchUWhEFO2XTxSTNCC2Y
+aI6JppoBZwryboGdXYgFrIL/xL6xFyNezi5Kkzy42sWBqL0YijhXHG7sXsNl++86lg/TbMcTKHT1
+YtmDK5Gc74Ji0QdcGfsWMwWJxQiEwydAPEUQNYRDFpbAEywXNNCJh6P5MY4HguUhahYZuPsHJTOv
+wTlwDhQd6GDt21eXh5Xw6V0yxCyn/w/Sy07iWZnOoL7ARFfMV9zITxSyOWZBP1z0ALmsmSGdk7m7
+nDYONiyd7L5CWJ+HScUOyXjoCgWbwDDMzf5MxIXX/oQlh4JNqknfX9Unl732maN/3T5b2pteoYjS
+I9Ud2CLMwr2Nx2JkZ4Of096jHFYFOlJgb2j49lYY7dDfQWrSEvbTQ1oQdnRQLqUis3sC4VCMbQd8
+0sgQhnC4x3VH6uNB2d73Z4c78n8IPink5vTCpjDCqCwIqjTzbL6QsHYHEvtyfstPVyNVuMN5vr17
+h3q4E61NNVpKEwvbDP1Qd5M3MXo17bfttq6SzalQVmxGZoLzwqRtRuEXCv37sgNEUWSn9lPDM+Dk
+au1kOT7bt/SHN7eBYj793drpQKdMIPtvTVUUiYf/svbVoSfZXl3oHsezCG/Ij+US7beqW2zVSgyu
+k1el4+taqhTY0ha1+DLn1cY5oxASkhePuBqYvhGjfNirMoedJ/RbDWL6+cBLHuVb6OccG5TMaWxe
+kCwiCboPkPW12HA8iWRQYUnaOJU3tIWdhhHeu5JHep2cy0kmXYxFLwpJ4vtKwVCQRXxjkRBTtEIE
+cy74miTyQ1jCCGlkt1CcjiAdiwmtpY1v6tmeXBL7Oul6/kVJVXeQP4RQEie/NegTNCztNRJB7fFx
+3sMGLSc/+URu7AKkaKlvmIXwp2BCxRBsaC3TP1efScC+aKfOjWGUSlBPwq7tCvxWW+salZmYU69R
+hOaHW0rQ2LqgXWA9j7KuGnAe87PfdWcVbhX6JjkcwwxuJA/O/lyalzD/NVwvTzO7FZ7dVXeCtqYj
+woEhUe4R1iZ4YnZWBbJsl+aRGY0Ur9fpsbX3oeGThXMNWa2BI5SLJsEsKG2Hl/7ImQSFOzLNZCfh
+4WS5MTDkjxPgQou6BJaCZe1My59YmvCDJdixebr4Wh0sfa31V5+Q2oRE9H6xZPn9YQgKiQgnuhdK
+Z6hg5PXqfllalM+POVenfa0cu/CvJsm/oVVlNqePKPIZpDqXlgwtmdCHY4tUDc9i6QjM88bs8tCk
+wRHWfmIhvPAo3Uc8l8RvOgvwwhfombMdOZyY5b0vmiL5DrWWMeXbN/EUabhPVB2M/Ic8Ey/kanQ2
+3BlY68OvBIINwztY7XMpa73Qnrjwh0EEmQTt/tSPk0WMf432gybnRMEcuIocjdR90tkURs9BPnJl
+jb24pm1yKkm2+9P6VrZv3sMRKFFE7MKY5Pfi0J9hJqw5/BiIqtoFONVGj385YxYFaVqeev21n5zG
+tqd0un0jR9ypiPAmJr/rbioiq8szn7KRGSZHycHQyro6e56hhBIUyeBMRgpj09Pg5BBVCRO0YpLG
+cfgytvG7BcHn+SPr+xz+PRVOsyY5FHuv40cX2rouu0e5ssgoCFY6jVSsoV/zW9MJBlAes9tGy5Rs
+i+mxHR/8KDAXOy6iaXen1KmyoUXjNcwfHd2FY+op9W1209fFJP9xDU6f0mgro9BOZWvVdb1V9cxW
+un6aaAQHWXn+WSW5G8odgh+HkLQQIoaeDpGHuB+11i14zJRJCKd9LxRZ5yabfX/YOnMLUoqlqbTK
+X5JZNQw+E+pMsWwfilRYTL9VxebL55uoXf4W4Pw6GN5RKB/ZYq1CiJCM7cLGtwxGjeqybuDY2pUg
+FZ/v3RX+qrCWaHyF9aCzzL+8c1U08wEtZAfCP1MGFe397xMuOnXEVMMKhPX01IExkI939HJcmj2U
+zUHCHnRz52XXk49ij+mo7xQPoVckt183LG6HEYMzmvBfWCnB3S7Jy1XRX83u5fKNQkT1Ju/yTNIz
+dEs+9hwCIhKjGb6uLFDxB21VAzFC69ejiyTwK+Ebnv4V+mCNKGdj3rIoR+B53heJJeKT73W6fJwp
+fFqnr1wd0uh9ukPC/bwkuaNCrlhR7JxsdHCdt9Cn5+DZi8fegv7G/3ajfQ/ifXKHyneRhC/EYX4P
+WXhFM/BQGanQTvIJdlHbo6j+Z0X1otfopGFqf1hSGrJmOCgUP7jZ6BPCKI3L+fF96D6GpaPokMqv
+tfVXkW5pQnXs5jeWc0mGowvlB93skyK/6dVEDBzqm5grb3orOOLS1eUQyQWp6IWIID4E8JY8/VBH
+RJlLRnjGBXyYNSmdti5boR55LycT4Z/MOHElzNrz7adzcYKi4Dx5oM7WMKqwjxuxprWfzuvj8RSa
+RrYto1TPcnOtO2JVGMbeT4W4PhmiX59coV6Czp2NhzZg+EhxXyxuhNZjLeZxrtfbqamGcUdlepFk
+JJac+RSty4PIn+yUqNHoIkyskcHlgo1MRTwPN4EApSFSu/MSqV9PeNbaxJpJXleOdA08THBPs8R4
+ZiqvaP5u8ZkrMgExpuA3hpYMrlKTPO9Oc0qNS4rHHDn2GbMP41jaBBE5L4nnXDcYX2NM664VST1F
+audg9XOinLyL8687F//zn7WRt5Tpb+6BpgN1s14sMMYXsB6m3Hh9HrQAMgmZQbYt23UZThDy0GpZ
++LE2NRYRNloHE7k8yjo+PTXloC4/9ZOcHCO00/Vq4ab52L16Tx1Uhi5dAud3WbjUbTWKYEM0sHXy
+BFVGZKTt7XRGVlg3DiLt9NtCmfjI+z9kMHt4xerfiZSZV6jZzpodLAm6n2NTtj67uCkGl0VwZKgy
+sK69C/VUw87Sql8cGs9mNd1M1V4hr881wuW5tO5x2bYZ2bCKLcKkSMf882edOAlGqyIhitly4SOC
+Q234h4+TwiAU7rMR3b8GTSoMA3//ZPn+yleLrcJLi2e5wXjRWG3G4dzlPx/GgXI6qNivA/PzrJGe
+pBJfL0GXTqpT3IBFYl+BfNnqPJ/s+uS5N+H4CLTXOW977CLZ8Z+9odn4/18bC89dJncXYbUT6Bkr
+rogwqIkET73rg8jIaAWnfvyY8GqSHF5VwSt4lb6/eK1uPo1lzt7kKdNlt0pTxuZfJEOhPNnfyu/1
+7ekeCjXNBWzxvRT5j7+mIex7o9Wanw8RUgjy9eX5f3Hnh1T9oLjE+pR9D1C23HbUGGoza52EmNr/
+wYnMWwoHTj7BXNmvqPoxuFzyrcTLisuc3te2S+4vNfml8bshDYUOqbEZooLa1xlKaDRMXwxRwexh
+BdY/9DDMe2GA/kRg1FlkxVh7nHmTpsHBcNMzVUJnpEl0UXKg92o9YYLZ6F0Op3OBAyXcwBm0amaU
+YL9x0RtOAvJvKWQlVvq9Y6uWhaZmEiPt/Za6liuk2EJ5POJqxUIrgmGXtAEVPcGfuBJe4NZm7+23
+NsxACAnY4iCtgh+KQkvwRr6zWO7SoMPkW5HatRkkYvZAsFSToTWpl1Cz8vUuNnwHqa3Blw95odD/
+r797W4k/57qjMocJx9rKR9tYxgQnmp3ZAd1TI6vUmc+Iqv/HJGT3houFz6YKBrZ13tBp0ZIVX1gd
+Zqa5r0nSBEcVreN9RT8SrDC2JywxFKKMxArQi44uwxqwsrtfu4A5ehdnvzMV6SzhkuwpqiB5pM9A
+CLosyKxBCHqi37oVMpQUDpoT0km+3+z1vYUNckyWOLQrVBRbRDHECJOxGtddFdFGjV1ZgQ5SZ/c3
+dOBi7oldur1ZuD9KOp8egoDFRU6Wuae0qhsSzMygn5duromEaaPh/Kg7zCOsYsCGtSb/LHh+oT7r
+o1JqCmGFk91EA3GcGocrq45fo4CL2moMCqFExnjSpfZBCJWpwcSBMD+nvXeDvEzDkG7m6zH9hr1U
+IcpnEsXXP3HiZDnYIfZZRdpPeFLEDL92XrhjBk3gp5LFcleWcmFCYARbWe7hCUmBZMEnrsK7o14u
+jtZI0T2mqv3SsF0UgaLxaM92/v3rvikUUQ1pmXOloLd6Jp5+elcQboGwENIotk+coJaVSKOsftFY
+R6orozxrMRukB5KO7lBe5OuvilxQDJVSiAqCxnv7Zx1uryn604RHf9YVHJ4fFCKYhJpRTkFaUKZo
+tjksTgEGs/Q1HNRLSTuHz2pspbHWJjipBaV0PTSpnJdJi9kLJYgO7cLYK6lsHZ/kfDDsu9lKetdd
+2NZ3+WIyy2l3uP8r1JyOopt1ve/hnJ2Mgz6ZMRXfOubj+SFBcAVPTKVHq9BojX/pLP2eEvT+zOUY
+V8YlVo6Klf6TcJw+RCaPz6Mk/Bxe0KU8OmEtq8Mpmn4e80M3otull2dIq4hSZLJ3+iyi5f3Bg8FE
+bpvtGvf0oKWcqVR4jMIFWjweMV4XaSBe8gl/MjQJkaHnC8hyfzY+uAX+1qk/arzwH/ZCIjQHSh4F
+/rtc6UyiSnAQDtZO5lC4+PWrDLVBIP+mK2vjh25PVOsQE+RBMCjUVdyo8FKdVIOrHHyQe1mfac7v
+SM/Izh5i/+Z122FrJmrpPphdmFlQRXQiUTkuaXKsgXZd4+ai77Tqo4MNTcHzBI6wiwZ9g7CJc1DE
+wyHcJpXZxyUvq41W2eQ0RyIzf6lSLhxUl3dY4SM++ahr51PXLSRWgk84aStsCU1SoCQ101BzLVDo
+6lU9SSj7pvsR6iGwiZ/Mr+cIucyKvz1oKwKnjPJydAGNMRRjPv2Tk4PcoIeMhT+q3Sma+Xvl343L
+X0nudXfDfsPDLzyX9BX+VKCiqEa1sivObSb81enAPYhD/Xhw47k+nKQZIdXND0VYzKxsaNHIMisG
+zLK10DjlYN2nCqnZvL4xLCiUOt+E2j3xvJF2h6GcbLJR4648/3xCuVxEOTRhiBWFbTX0/abIXvsh
+STGFrDQKs5y15SAiGp3eTAFfCLKUunya23HXNJdExwR3XlWCtJusVJPcsZljYdZiXShQJTPbg78h
+xKtiwSu8Wraxt6rlD6hsf7eHz4EwSKklSIdicrfHlpIb1bApw+Dt/BKF8IhSp9U845eUWqcbXR/Y
+S9i1jbHo2HZsjJriGsPf0KReSH4K185YxAuxcXFWXHEY42vt2ct0b7JC2UbDn94lVhbDeBXS1GV8
+vxNzf8feL2e1lcc/+HN26bD9jBNvsNbd4Lbx4nUKIeegLyWMnOJnK+Fa7Z5nrVWjqBNUF5Oid7Ug
+6kzXDTJeqhu11x9B5RENvzsO76TVuJ+7465PdH3EPNX8a1xWqP3kHQvaFK+PkjS7TcGee016tSYZ
+MmBwF7NHJ/AHKdHlJytMWphagtqxfkyCCBrisA25t/JxxgMTiQn9xSrUQvSk3Dmzx39F8LZgl3Ea
+WLTgp4w1qH7Yz+8lVn8NM+5yaIve5XDIsjJaNjj5wJbCJczxerCMpZjBwgcnc+SK9Ls2SHyI9go9
+YpILzCGbsM4ME1l8CLNStb7B1i9h634INVRyfsDHQluo7TIr54+Z4eW/oIePs2Vhs+/XvANpPNFk
+yHfqPAvH08yGB7IIo/eVfT6JSJzINtsur7AOStQ0cUx/HBHU01fpPKWKfqeIqqOWLyaytOn5g93h
+c8QwhnZLeToYD4tRHU649dGVbE/cuSon3gCncViMI5TqLfTKFHz/y6I7u8FedY3lINEREmkomN4j
+JrBFyB/0anbWZ0mFtyaq7iUk+vzX1X6csFBRcgwP1d4IjmXbZqgGm4Qw3Vh1J4VMs4WggqalE1hH
+JBvakAcnOJedrtdjdaGVOkVhxdQH1+JOLKj3w04jO4P4cheLJ8QfwgnPFUol71MWlq3V8H5vX5HO
+AxHUNvJcJZeuhSKYXbwRRh4iCB5PtCjOFQjPyHOUHNDFNKOOontCJEZcSd5WIq0GL18MGSz28VHW
+3qLmRcYeUSG+1CbCOc2nmuyOJdwswihKcOopN+Zw2zqxcMx07w3qddjsd8sw9ljt8jZ+z8QiME5/
+bAbrShLX2asIpivxfy32pA86eBBG16cO2EFL3z1jZeogUUjfpMHr/cpAVj5/uOunozZd8fb7LrT0
+0CS1k0J66sHKp51FH0m/eEAwvZvc4zTt0/AqiE+vvHtKVArJ3+ek2tT0cMzGb176qJqA8uW5omSo
+G0V4Gvu0bu9qqINtYxRGp5t+UE3+SHWYU6tcMMTpb86bY5ErxQ8G6CjCIkIgMt4d4kC6hPwiRBOB
+GqYCZz4hPcuyy4RWjPyPjomWukKEOUv3IuIpR/d8Te7yLCxMdoIYSUEisIfY3X7cKsnx2rfJRaFg
+oobuVNISvQvG07uEVzhL/CQs0LhXTVzBPLuYbbdxylDvlb8R+Ho55Xw4p0hhCMGKvGps/u6YmlTQ
+3lt9HlLos5MVE7CLVCj2SDbdiIavYp57ojnKL6f39RFOwcI7+YhvHbblJg+tS4eVF4VCgfivqbUH
+kxYTpNRTcEULct3X+mJhFYoNEzEa7d8yWfxfrQfHNEq2hP4abFs5SFxufDtp35oZZ26kNIfE1nMb
+JyGMdxIfVQyfhpbhDQihXO6WTKx5G5dwJ9du1W+shZjMJzbljsY3HYFriDjpwUSZEC+5F4dqrdeQ
+LelseCNdYUH9J4h9X3Ai1fEKHn51bTNiWUaVTuz69cNSxFpY3fXPa7foC0vqIFe/hycxSYTrrD26
+5C4QNoB8QaItA+1H6lJ7mrf2mXaCzAwWMNR5vfPtTS2Gf6ZGClaP0cxI53b+l6zICDSsn2b0rk0T
+HrSomy69PnzkdsAKjFIvmGtJVSI9O7u0h8IUVlaE0ViXSQXL6dX7vuvebVcWeWBYFoR3lUANr6cE
+5Ioul5PjP+LnGn2HW7tIX5JUdUS3qJ1dz9Hc+X/Kosg1B6Mx49vCPYRqOGtRIQ7p3zN8R0U67aF0
+infmZOh78u/1SPydEw4eKE9JfRIXP+aLv894u/r9hRKSCbqXqmVtmQpsGdk6UOqdHGipUOiXLpd/
+N4YKdG9T2IPCxtynWYkf9EZDU+WSIpowhOvPjI1negplfv3OhwS5X+I0cv1D7xqsfXbEQYmZHZii
+IHxPTw6D1cfu+TyoWkCWRSOkdKnKCVTHh1RSYXK4Tmrs+EJbmLCWxcEjeYxZc8fJnSEsEpEMSo6I
+8Ehi2/wtUd2W2RsGg2lhezxrHTmVi18ZHB9tsQPrKVJU8eB4oPER0RFhWS9UZFO1UIa99AQeQQcV
+icozKlVqr7o30dB0vGJzcCBX8njhZO1mVj7jeDFs8hwMb1Tq6SNvz+1Cl1pjV4dewp56S8/OVShc
+szy2XpMfGIYuT/iQoujj+Z6QrW4CX/PyY+igxaqCf0S77od97WqUprjhxqKCOyHTvudDDtmaanTO
+/Uj44YVlLUPOtR2Lrkz1k5DA11wQUoxgkpAjzeFWI9oTinaCdvG4yMl9R+RaG6lfwoankV6xUqJY
+WRaoXcb/GushIk/D1p6hwuNzsxFw+/++NLN6galmesf6xScs7HswMlhPF7uT4S7xMeZH/uy8U+ro
+W15T2UectWhDnpE5Zj25skITD4YBwx/+2+4a11W3lNquOOncHhuaOFslzidB0gofBn8m/7zksftI
+gUF30y0XLXi6NmGyTmct0cMYmcEHKHQRdeLON+2ImUC+5MFFwcnaUy7r6ynyTXqUeRTDI/jcqYKl
+JlfWtI4O9jPVPHDx3sQ8EdnuYUzOM+VEAJnS4Uvrbq9w8uLiINvfUlmiOktwgREmA7GiLibEuBY/
+FoOgK8qau2B5Q2NupcvPqtA3Bu1nx4VIDWxhXp66tkvxQTxlxfeDdrnR/bd50FNpJ1JcqFQ4VyLy
+/DvLFc6KXAXhget5x6sB70dHmaqXR4fyBSWviLFPP3yFg795By44UsVJkjmSiDxerTHRR+UayuUf
+YknNEEGX8nvDn+dYcWwkDDHblJpyLphCUtOstUjJxNX8/VytSKFgiD2V/dIp1erj/NvCZKFL17Sk
+769ejEmXfvSOAY/Hr87SsFOounKLR91txb211MmFQ37bJrkW0/EaoqYRZ5bxVeaGTEhhkxazoXtI
+H6JAe5pAU9y+1Dx93QapYxcFMTXkSbfBW6pxeqL6P9NYiHKyoSxn95qv3guC5fqI4tTQwPFMalJ+
+k+KzDjMh9z7yKajq+9X1P54MyJzJzpz0Q9P9hlPWfGcNltXGQ171hc6r3lx1I5qfT8V13IoVRp92
+wjLIiXn3yoO5RzhoBRnR5mdzLooGZDShz4DnmJXyrjgfIDS+/9I7h85prLzQegiSofO9wxcxI9W6
+cwvsEsB0k9GP4wnaYJx4UX7v47OEcXuR1+RMXzeXY0CFly/MeexZvYIzWsGY3tLz5ZzIIb/Fff0U
+tQMM1fZ+0aIDZ6KFDZ07GqUJRp/Zk5FqoJvCdehgzfAHZX8RS+5H+dPgbTrCzSKoaitieKG3m94k
+VC5BVzaZQtraZug888ekNf0WlM/m3pDe/r31k8VaC9yPJX1Ey6MTKaV5GoYnt8OoHMPkqgnCDXNu
+/Nv3hSeRoept0txB3H6LVuokcvm0NtNrRwkxuH+HZ8EJHjlvq6Af+6slBbg2dEWhd+2KcJq0iUKX
++4fHqlgSe0rxR6pSNfzadvBlhU33mOT5sePZ1p6eM6rDOcJfXBUKZFoqYZeBlW37lFoQBz01PFFb
+RumBvbJBlliA7PDgwCtYQzrBt7HQcDj7Dp/ntfzG/hBCkzF9zl5YsSZuu8znxNQpMUZVCJ9RcKUV
+8qB19ix4aHWzdYu0ZVYedjwq/ZIHIlzvw4VzWL61VU+9zi3KPFG9m8DfiksG7FPDXz5ISvNukIb5
+tG2T0WB15/JsTeMJ5ZhJAo6MfIEY/Le6cHTgWdlI0pPzLFjVMDiFYoU/23cnMOLNYcJxqN6+Vjmd
+ETA/iG/77chtGBShRT+7XdhwNGN/7K+YhgvHJe5NBV/sbYAEI7zgtXD4SbZDB0u2yjswn+cbC+1L
+ECuEOl60LPbr3ya7+OZThfZiJbbqi/DfG10fSwJdRBwhOdW+bjRBPPG7uteYhRsD/u4KRWCXtvBL
+WThZDziK8U0fnpTH7kMdhCW2Y5s3jOErn1mqrMJXKOQgoa8KpWJZXbVyfkOzemUyFDaEa/m6nFTC
+tgUPLUyrXnq4ByMEDZFv0+Azk24XQDByjyffCxBByqwzxGsCb/6brtB85LdfCWpnFy3b9rniuliF
+z8LmCdRxbdldnSZ9onEJTW8oyxhNGUL9f154Hri2MeJI2hxMpGpOj53mgObHX78Vf1t0kR2YeOef
+AmtI/axQKAXvhzS9wMJ1OzsYPrkTf+e5vBut/e4O4mdjvHKGGvLY1guzH66lgjPQgJTpuVV+MnsG
+9lA/vhxjR6S7TOMNpKJsCXZQDSWX5l/Bb1wu2RqVheSvQMTuiCMbd1bMNx+8Oe+hKpNmcVZon11G
+YThxvUAWCjWZ1+kWIJlisDNC19LgK/2RTmpA1MGO0QsdRmGUv+5kf8LTtxV/HYQaj1/ko0sUbMkD
+ytv9wZs/gS4MtT/dxdNOsTALBsokFp4Pie22B/PIqAJRadFdHSbxVd6Cqqh77SCj/XO3RqyKyI8F
+k9Hl2jwK/1C+RkFrHGoUCDNQZviyXtWpDEm8meyT+W5bC0asvTbwAl/8DeRJAwyHP8LXz8GbBDWn
+DC0ZH3yaPKa7b/ITggmRY/D4HqJjZuCZN/Ek0PDBVUG2uxL1mLK7PcUpNAx8gxzKHFWqel9Sqj2r
+3f/9hSQCRVPRJgX0kipfT93O39Zab0StNFWa8pCWPp/3jXPHVsNyg6q8RKCtkVCugr4bEm38NJkO
+wpAr5SzQxg6GzdJ10Fv2ktbIr1PzMyKYaJtDxpy2BwJBXQoqGEqHkJ2jishFmZaqCSFX0TWomGDD
+kzV9hiiDXNbiu3Jmu6VCz4FQkHKp20m4HthjsoWh4ETT+tFGZH2N733vPGN7j1haHheg34bybXOx
+3zKYXWtoCl/7RR0bFIgRxgNrFLhZWfvrMoSYMHdkbpfKwU5AujByDXEelW++PLK702B5yxgRbNSw
+OASOOrCql1PsRiY5gqRu5WRSgbLFoxZ+/ZCxwjWwZGdLUmUXr0Ey8OCbfyRjezwK7QEnk7qn1Gan
+u7GDv4L4iujfHppTL5lLsX/mbyUbI7/RMaiKBpyFT8OQnNMEHjbnWl6k2r8cExhxpjt6KiAeSogT
+Ky7U2uMZBKV/brt15w9fzTq7W1JaPRvJtNWRhlyafV6+YHc6skxdG7QAaTtbNSMW5voWReq7F5Ae
+4RIcGg3PKT2QRqhCrFCyknR2poy65QWLbFl5Y3NhhKeuu3DIZoZzcJ6AxPGvW4QahvITRdv+6V71
+lPIscIyqSkexE833Nnipy/1KcU7CFuIbeXcnnA3tZN59Hen15obaJXz8v3coNcjs/4WySRauq4he
++LuET5mhxm4pZj6esyHoVR23YtxUWnQu87HPT922iYhDVDCgBdkga8e0l3yZ6Nhz0/9uiSuVmtbc
+FNJnkctsRYefPmA0PuN95KDlu4AJRwgdlGD0tB2tdfF8lHlQL8Qr3HMsSr4Vj2TDirTSsu1EIFnh
+Xlkq/gu/1Ht3T06IrW39kQZuXTfx0IS0hfdZMiJvicZHAv11n3WMkIi0vh/vKb1S4o2EfK9v+TAV
++GZFfpk+9Mb88d3VNqLg9OiT0St9HYk5/ZB2TOF+fVsBno8yx7lneOWN7p3/hzdCah0dQu8G+XBy
+7GG8CSutXykutSZMUP+3nhQxYYgtuF9yPpJZDFA3Ng9tv4qrac4yQIgIs/l+cfxc/ddkr47XTFfr
+7vnXw9pxG+7l7j/DGidnqcrPpJKEhUfM6z54PSNyF/kqhXgAMcUp/e4AG2yJndmKq6LZh/zP5IsY
+KdGfaWts14e5nqoGfWonVhgqhjkI4TkHqlk4oxnmotKN1mchShdxjQ1R3qCew5jnOBdsezbETMGu
+YHtgG5YmmlmjZjiAutH7vVzIDn5/a3H+ESMKHyq37KReasp/a+QKuwK5u+ZsZ3uPGYXpCu8IdfpY
+VSModdFMj2Lu3dvNoEJ403wuuh9nRzzdT7PQI7y2qdNjzTGfO6mx706kgUBzwrpDsiO/kHi/GXXK
+QwBbZDokBs6R0o0QK+fLs141iqDt3E/pSvUhWQc2bmuV2KMXqy1PfWyPdAnDowqOm6NtFDaE3rFJ
+MxUvXomUg7gqo5TDPo02U0vrXvPQPRKlbyE0h64hGPy51R7fcWQCO7kTx3cikwgG/3J2R2imHZIc
+GM4uhCWkbX1EvHP/ZzHLLRobnPMluRYdrLa617M6xJBkxRxOkHXIb1dZ7nuKETnotkPlasXmnEQm
+SkD2V1Ijuq6VcMmayjbioC+Jju4FUVCfyi75nzRSJMiWylDHK9HjxuO4MKOKdRvavd8lp+r7flP7
+mSDsw1TY242ySriATQljTbWOp2k/fKivgTj5+LVrcp6+ZnDxufO0kzedtAd9MZwensaWIfSR9pTr
+quTz7Nz+2m5WH3GtNordA4UivpTThWakL6IJlz+cGyY5yGdMLNqLM4uJJLuUUewru3fHP46acVre
+ejARY0o8t13keOMz5PhDFw524jxJG0OEvDjRQNRSOD6nDBbyuslI+SaU3l/In0s/GClMklyYTFfz
+UNhDcGKn5XLlhPhRl7J3GH/EOpIC+t0FJZyhzxvc3XT3+Pm8NacI9bZ2JrFf0z2p1nw6sZ6Uim5C
+WAs2qhVD3ovZ26jfIrG/WybtWkjbGMJq6XW7zxJa9xcKedg+sJQ5SHPiP4f1cc61ixL1aGIbSBFv
+kcnQF1Fmn0ulH6i7tJixbmV2Jx7rldpb8sn/ZAlL9XiG8oxhbOouLKyg8rI/btBF7ymhjUFFn3mk
+5HDtKXb2bnRbxPMSAyT6dOl0x2UwJaIk4OfpEKb7JaqH5kvHAkUeO17C1ryQI/q8lE6tVSFzB1I8
+7DTPQuq99FONp9wsneXPqMtPf2jQ/ksdn8gEgRqhV1MXJsfoOlsdTdx7Ai/5z4KJUysJOIXYkB7W
+n85LG9JiYVaEi0ZwORUBb/cikdWHv/ovxyxVEkVy+NObDH387Li+pKp0ihxUnsLHSExmME70KDAh
+Txgl/OcT81rAxzz8z3IeQ8LqDFPQDrvDQnn9hma7Bvg+zIwdjU8b5703yRGe3ffCXJ4+z9E0rr1k
+IBmLCE3ieP0zLusrF1N9YG1fTK7HD33K8g4fJ4UUZ9k35Rjrth2jCyJFudc2Tc5MAr8LNlt8+Jdf
+V/cESMxSzTHOPUUSm8PMxcrMj6m7Q3dj5fBHM1cYVI4cHgv37dQreBI+OOUUPdOdPhNXQBghGqr0
+iMv0IFf3S5tN2kJZk63u24xJprsOJ4XI8RKkaVhaJeE83PMrT1ILHwtlmsLdoxXVM4no3kUf7ggS
+BJODKDKALWyzsk3brB6MCtwGsAncBrDFQYhzwsECCjTwJGBEcY7UY/UAGauxeiCWCSAQ52uRwAof
+BahFFBWgFpEDBahFZAACEaArAhGgKwIRoGsxd2AJlmBZOziAVWQ2khV6+ACCzXgECXYA5oCBACCZ
+8QCGYLODawD6Wj0gWPkD/cgf6NZhtYd1AAMcBzgMAxwHOAiI3RI6rAXMEjoq9YBKrQDgVOoBTvyA
+cFRqiTfxgzsh3IcBoVAFKAqVIJgMCYLJsBUwJwmCaTJAAQuYyGQA/IJgOuoCOumo6wI68EnAaFBA
+F0kOPAkYkgDYtEECBQBYALA0SKCgQQIFWLhYzwDwAuLaAEfFIILK0A8GbFFQqwLRKRIDA5ASiEAB
+Q08aeB8oPxsgDRRYQB7AA64AanpTHhwMkhuq3FAhBgcRWySwR4BHQMBFBww4oigAKwGoERFgsAQY
+BBgsckNQKaDAbQBrm2M5lgXgFwSTESG2WdXjgRDifCXE+Vo0SKCgHsVSLMUymruuenAAAjbTQHwA
+yewMaSA+gCAMsgM8Bh7I7AwAHgMPMGggPoDoHQMPEAiYcjsBQLAZcwKAGGAwEAAkMx5AsLkAAhgI
+AIIRsRMAxM0LcFyw6+YFOK5LzwtwXIcuHfBAzoDVEpIISug4HuQP9AIaHGBYllU0KNwaAWh9GCYD
+SBBMhq2AORkAmQwwTQZQwKwdQJBobOFAIkACCRywgDkX0GEOUgKDATSgWoPRIIGCAhxosIBREMCV
+Gni+DwDZnPcjAEBhrlFBA7AMAVAMKGDgmACywgFCOIgQMEuC6aDEIygPYIA9gIEDGIjK0sEBDChw
+AANscSxAgMEaBQGoETnYCEAVAgy2uCG4IaiqBcwHBJIAgy0IBBhsYZu2WdmmbVYPxpIAE4KJwQjB
+xEEwGQ5uA9hiJIhiAgiEJYEGabCiwYoGqwcEEATBch/AAawiKtC1WGDuqgcHHMAqIgMAcACrMICB
+x0CDBAoyO0saMPAYyGwEHMjszBAfQJDMTsBjYB/A7QQA2THDNo8dMx7ADMiMB7AZIyAzlAtGAHHd
+vAAPYAewLng64AEECJgOeMCL6LwAx+XAkBfgyB/ox/EgghI6CiDAhEIFHhCMUAGrzR/oDwg4Q4NV
+RTvxgT2gPyBU9aZApVbOgyqvIZ0ADhhw5E38oFIJFIVSDRIosCMIJloBswEHEgEaaGAvoJMIkMAB
+BgdwAMwFdNEBChSgFjOmPPgG4BVAgAAcBg4CkgYJFFhNESE7TjiQwI4zeCDm3wOFJm+hxQD6QdXk
+B8gbeNCqolI1n2FsYDNA3kA3SgVAoGpyM2+AOcAbAFI12oMdApyAU42YN4CYzgFH1XyrC4DSKzQ5
+AgwE4DIHrAaYeFUVSwCqA5iJYSTiBgBYwAJLFcdMEUAAMwHAcnALRBUOUIqA0kzsBMgBJOAqSEWA
+wmQwcIAd98xEJsADByDgKhuXNkBokEBBgziCHV/AEBUwCMALID9JAQbRJynAoEECBVT8gMDAAewq
+YDrYAgwmB1uAgQGQZ4EIPHoBBu0CBiQwHUYWAOyAQIofJAeheAAPtAcFImSf1CigAcrAAHa9kgcA
+RYYTyRwgLAdgtCOCEjoIBxFb5AYtMx4gmKVZVs4DMzcYDiI2N+SG6gEewebgAAbYghCA2AEDDtcB
+Aw4GBgcMOCILMTwglCUeQbnAAMjzAAbYG4IbghuCiiwNBKBGgwQK9pIA1IgIMNjihoBAKGAsCwAA
+BBBMBrC3AextAGub1VgSEDiAVdhiWTkPCB5Xj/VYjyKD7knAiLQnASNaIM7rsR4JNFglsMJrscJr
+scJrccAKr8XcVWCpO3AAq4hyBg5gFVFyAKuICBGg69x9YEIUc1c9IGQLA4+BrEFmH8CA+ABigMfA
+A5kNAIL4AJLZxHkAA+wNQfWAgCG3EwBkx4wHsPmAhIEAIAg2YwE4gIEAIAg2J7DbTgCQHDNyQ+Lm
+BTh06YAHovI2gC0uGIEGCRTUY/WAcOU1RDjcvABHgwQKtnB8ALngAg7QC3DAAxdcOQ8IuPMCXLDe
+5gU4oA/FpQMSKMgN1QOCFUEJHZ/VGlYbwSdGgK5FAQ/oDfQSCsADutWSBgcYPKA/IHgNEiiAdrWE
+jgk1wGor54ECyGEU4+iAAcfoxA8IXqV+XDUAAlYHDDgSqHYDOGDAAX2o3sQHBUMJGJVqwB5B5QCh
+doljQwAxEKK+FgOguAYEREAAqgADAHgJBRgAwH4YKEJFAGpgzgkdDRIouBkgNgcOgBQwCTDYYjLA
+J60uUYBtVg8WkCCYDOhDvwKyylbAlErUKgpA4ACbx8ADC5hIBu0FOCYDHKDA5oABR4MECgzYI7ic
++AFhsgWAgP2gAAfdWiRQgCtgTgk8gGAyCOAgYvEIHDRQ5QWYjLqA7gHBI+N8LRIYV3gt5q56QBoc
+eAkCDOgeELwG0wMtayAACAIlmk0HPECQ8hoigCEqYChgiAoYAMipelOgwfTgsAwIAGpIBKicBx4A
+pNUlGkirS0DHPYAnAQP6UCtUD7AfNFCgD7UL6GwmgT0Cq2hQwAGsohMr5wGDSsprCAHlScD4FJgU
+eEDwNuQqHjDgiMrKedAggYLEdKBjwGuQQAEANgIBGAiAnncDIGA1s3pGCFhNBA0gdAAsvIGRC6Cr
+mvRZAP2W6hgbFGAApYEqgrwBAYgOdAJEoAFwRKkaCBiINgeSqmmQQIGDAqqmzBtYdKUBUjUJ1FQT
+5g1w5WSAe21Ac8vEahAAYG2Og1ChyRskULC2DgyXAeMBFKgUBlUEJrq9XAMALJ9VtBCYsVQABD4m
+AIXCoQoAFFCAuoABALARCiAuAEC89hAAAXgBF0VAPhHwJGAgYHDgJQIAJiYCCY7vpQNEYQDdbESD
+BArkKv4CYDjAVXLCwYwpDwgGIAB4MOk1AwQFOgcMOAKAAOABAiZEITdokECBDSoPCISMgKIodQBF
+VKETA3AggOmUTOaBkIoM0IkBNDAeaEC9msElhzIAGV1AwnIKD7KZ8/dcIQEhloMmA7AcVTogACig
+L9AggYIlP6CQ15ASAUUUttzAgcfAAxADsJJvDAbAPJAA5TV4AYwB+QEECGCkGe+B1VCQDYA8AQYO
+AhIIjC4hALnjDzAQQAKodiLg3AawRS4KwCrAanLCwQMKAEDH8wEUoBbf9nINiNABgwdijisAQQMH
+IAGwDLLJccKE4zgDrAC1sCzTAQIaLIUGTIgi7igcZ8BAADhOOEDAakr8NACyGEAvKUUSCAPgBgA0
+UBSWqtEKATAA0aqiEgEDVXMA6EZQANwAeQOzokiLSIg2BxICOOC6BgqAn3kDON4ggQKXGHFEAHlR
+ALxOClALA3SlAUISUDUHZI0MAT7mDTw4j6opgEFCABQCvLYLYKBBAgUNMHBzNfKgYCSJAxki68AB
+dIExMR48eBIwovwhAI7AADgFHgYSOEChtQc8sNYGeEDFMwCWnHDQIIGCCEoDGKBMDjCAAoUGDMSv
+WCAgJ0wR5LD7FQgHQAtQLBAkcJYFKBQIIC0kAG6QQAEBhgEaHMAAoQKn5FpkEeHNAEjCpC0AvXgA
+yAQgDXpgAbLYKp0A1DgATB4nAGSh2RGsB4wMEGCwNIgZxNwBA4zFDcHNiGMDCUSghgBYQHMMUIyF
+RIAGCRQcIFw20DKkBHDXe4XQ5IJFgwQKGDxAUZoBkGxXCAStAEW23xpYEAigxxFYJEAABezbQYaG
+BRxPgwQKrFXmHAQg2ZrU1JqdgItwFKAWzPnAaHTdIiBvkEAB481aAZ3JZHgSMJZM1YrnTKgYgsk4
+HThQmCbO16JBAgUlAS69HLCAWYDCVY8VAawBaDZTgFoUdgK3MkdgEZA3SKDgBIBXFau5JRpmAACW
+wq5A1SCBAtoQAIMqDGuqiOB5wK4BVYACUEWDBAq6BhA6AA1MEZB3AsioggCmwzbQBKBBAgUGGNA9
+eDA5lFGAWmiyLQIgMQBFQJ4ANr9TIZoJAgRAIWDQIIECACwKTAc84ACeaFABVQBTgRfQPSA0SKBg
+7qoHcu3Ag50qQC3gAjRmAUNEEyAHkAACDhygQQIFB2AggAYJHMDAAXYECqLcAMFEIJEr5QFhMg1A
+D3C3/MiTBTLjAcLeaIiDhQCrAUKDBApwBwpQizACzCjghiPYCcmAAjDID2gAAQwCTTQNaKAGCRQQ
+RwFqcYEGA6btPkWqRwcDWo+6A1iFgWbgYDDrqGscDBokUCDrDwZgOWBwWgc8MKCAIWAAg+4yTOg4
+AEyIQkoBUACDJz9wPNcIAXA0xIHeaIiDQ6zoJwANnNtzwg4QEAA8ZgFIQSHA90TwAxEcddR+BAKF
+6OAAN4uAEAYU8EDwJGBACEQMlE+BJE8a2A48oAkHsCICGKAWUQILRNhxAqBpkEBBzcCTgBHdRAMB
+yFt2NqBkCTwgTbsKAKkZjQcaAOvFehocAny6FFgBICVjuzdgKTnh4AHsAFbxFXB4AAmUAjjAkYAC
+ynRERrYRYF2AbgARxCCBwwFKx4oGCRQEAIE0GUAhLRzgiPBEX2DJDyiKB2bBSqgDHwCsuHJYCdLD
+B5AGvAAgeeIhEDFQpleBAhgULeotkBIYhA5SAgMPeRZgkDlICQwaJFAQxQ8IDPSCAQMYJEAgIkIB
+IewqwABcoFmAQcFBSmDAQD9wHABxSRQ08yRgpA48DlChSZ1SgwQKihMCfBqTs6YckAKwmge5kw0A
+K9gKPAYHHuB4tEZgFXXibU8B55QVnVGICwIownowqA3JAKio3ogDHjyYDj3EHBwNiAAsAyhgywtw
+5MkkAKpBAgViaADuYQBBxUa4WRhFEwAECg6BiIGC6O4DBAGwGuKA4RwogAGT5wUwIIgD2BWBgVZu
+CjA4ACJXn6QAg8kAowIMmIhQAIMGCRQYDN0AZ6QAMCCAGoECDC4CPAKDE3YVYFAXDBjAQIGIUACD
+BBi6AYOckQLAoDYLCDBwoEULYLDAlRTAQAHOgQIYnGkECjDgqEMBBhAcCBQJLKA8CRgNEiigN+UB
+4QDTAaI4tmIBBlK5KcAAZGAnMHDAHgABBu7rKsDAOQsIMBBA/IDA4DOAWICBAxaCAAN3+RwgHAx4
+AkiOjUAUARiAAQyG5jFI4OAuzDUkBhTAigIeGECB+KjGNRokUKBVDPM8aquAQUCDBOLigBxzgLAc
+QHlAUAuEZGrqAAsI4JyXc2mQBkLgAFjOgwGABajFgwNwDySxpDwgSGYBamHARiAKwjA+QGAOoDwg
+NFDrdJWU5roi8CEWMLDAMK6HSKBA99fQMK6nGkF8zWp9f6oR9NewGsFjlQ86qK6GeapGMDfsoE7X
+lJG/6Yp3qJ2vM1pg264aQaOsRjCUqhFMa02na6oaQT1HtTev6XfBgppe4BjfAn+V7VeOoJFQaXSB
+jj8LVvrVXquv3XVu19xYWXzt5NV/u+IoVtl+dXnfVh4FaRBNQVdH7Qha+uXrbZVfl7RRGryeBQto
+GDVLX4Yaq9ccX/kVd2Co4UJGdfrFZRmlUdlgv3G+tmhLo7gDQw3Lcp06MNTws+DV6WcB2E0LlpBb
+cD0LDiN9pQXPAp1+G6DbN19VB4Ya/vHatV+ZdaDiqaG2cbnHV9uW9dxIUdngAJdT24GKp4pOr+/B
+oLP+GnLUgaGG1xadXwe4Lct1Kq9qPau27UDW89qd69RBjqMGvJZrt2Zxu1jpV2ZX1UE8t4eDQl9z
+B7n+6oYaZul3bVE7raU133F2lR2wbO0gnlsdd8CydYvjDmwfsVEZX3lcxm0bX/kXlxYcDAvUlX7Z
+VTrAUMNFqjrAbdsBbtuOcSQHwhRFcSAOFEdxgNuKURjO0TiO4TgwkmbN3VVGjUMq2wWdprkDFTfs
+uQOdZotdlV/dgYqnBz1fZYNO16mD3C5Qe65TQ3aQ26+cOrD9OrVrB7ZfOJjTVadfB3Oa0juLpw7i
+uUXblXaQ2w5s/zU4yG21nmXVgU6z8sqvMr6qqJs7yG3bge3TNOq+bI3bDuaDX4AABB1HggdAsEBd
+dbSOFhhWcoED0IF4gIMWrx2oeCobUHp9dRp1YPt2veqv2+cObD93kOMqvrp6fZhTB3Oq4ytP16kD
+2ycIvS4QCwiz9GuoGsEFB6h4na5f/uLoeD30Wr2ajj/qqqN4+24HLGiAf/X0QVf8sWs8QnH8kS5R
+dJZCWY/EoKaMusBRHOgCiJokCzBsoy6QIkXSoOp6wLFgQZAFx2I0OLodUNnOX8l48/qrQ3n9liNZ
+sDCHnq7yCubX93SG8RyQL1BfvF1wSOkVR+2cRnF9gXM9BmOVDQtWHZXr/G0X6HsdpzUdL1hg6Lut
+7xzSuvm6LXCux8AXHAuaIzkUPX+lln779R2bRHfbV0EUZdHBhikMJGla+llTlNLZVdvrSJbXSDFy
+/KVkeY0YA2kWIIfTKA6TNIbBMBZd/y9eWwcoy2uE6OyqGcdyHMzS0HW6gv6q0hezMAey4hXTKAnU
+OI1i16HDHEnSLDgco0lRW1lzluXQV0YXvDqNLnT9tiu+wF9le67TBfYrpymNyqiBXwBXmDXL9TXP
+n1U2oDpe2/5E6OkrHbCgAR2U5Z26nviA2l51f9LZVVOMo1H8VY9rXM8XrPQr63vNLiiM69HZVdNR
+HXzzd1xpVO70V34NqP6q0wLdX8MFK4/bu113C9YW3Vsa1SC7Dt32/dR1laH/xVc9R78Ftb4/C67n
+gAUN5K+MFrWdq6iNxDk6O3htlZHrdNTZVVPXVYZQeZ/ffAG+2qi9wLkevJbrdIGKo7VBx9EFzvWE
+MpqCxgLjpcVi/XR21RBFWVr6dfOXRke8rmVq5V8dldcvAvXFqwgaJFCg02/dFcoCC4rCAn3NV7xb
+gK8LFhjG9RRgwby/6roR4ACdfnEbX3luwaq/Lrkgz1fctndwAWNcjwoAB9VRFdXXuWdVeq+hNcX3
+GnR19e2dwjGSYnHbd3WLxfcPB3T9iAXLgujsqs21rteGQ65riFhgpK+c92yur6C+gqiOSqtsz2jO
+AM8Az8Bc6/meRpDTBayyAX0NdY3TWqZruqCvII7yh/Eaclqe/aOBHEf5CHK6AATo+tXTNV8A1VE1
+BUBSoHLePgbkKan/o5s45/ic4DOzglZ5Hj1eW4ffTGKzalPRpxhIJKUJfpdSEBY7EUkwv0PEIAy2
+W7jDY51SL8NE4/7V9O2Z55eeg9f6W9evzfP2bTvKfZWoQCdMJjDOIdtMhjeJEyIv9KHORn5dV8D3
+NGOtgCSpX7KGLJueWd/Cr5O2LOAM/iDjoDYfasi57UAlP+WnJtpMZdEqZOFwJ+p8H1QqM3QjKSba
+YMBkupUyJRsoB7nOKxtXM2sK1v2t5mMT/CcfQfKsmfGtcASq/TPvFtBAOcnMzqPVw4tRX/VNm9PN
+wHwlum8eCQsavdjNGsiqsxmZsrZjQ+HeJiJFiYfj8KbLzsbnus3+R1exgevp3pRrjPdrN6gHgzsP
+uB1vMsImt0Q8czSt4KFoR6nqtulevyuNeww1WWE8uc6BrIWePJu7DEl1a4mz/NsbOhA51srl+R2p
+FKafll7/ELco17tZfb1iXAvTt6IQjKLR/oR0W0/HeWW+YtB3vsrMAjr+kqdhVFh3ZGZAcKVPjzPJ
+mv33tUCksiHBpEwnmSD0R7PzLdRAe2ZuPw2T55hG3rEOk2tOJzqrZHuYpZvqVXZxFpIM0o/xk7cr
+vW5jSYJerqnTBWInmVuwTBu/DjZrEiV+JPPZTA06Rc6CCBeOdn3+0x8nYvCG6Nzu1uYDHbDuM32W
+jVbl4r9ZqnITK0mRaRuK5p4Hf00Sb8I3Jdjs0KP/aigUunQ5W0dSeQpfkdWgPQNd5sna1q5Adj3I
+f+7+S1kfqymr/2ev2jFK8FnxNuT+mGyaE6DBVNyS5d7P4AbUYyNMfqg06neHEi9lnKz2Qsa4n3vr
+s9ETvrg+ZjJmRh/VcEuw2ZJlI/vX8TYVKuXHhZ5xoe9vdJl0q8Flfn635SaSaIgH6WqU7bXuVZi+
+2FZ139KwW29jRzg4v4pqZm86MT8z/xZ4U5x6hXZGnV5dGvqidaLH0D/C+mYR1ZYzna2VPzwcDHpW
+4nFwqcIz8YtmdoTevSiTnrZPvGjIrTO/JkLTqx19WqavQH2/aEK4afYpsWgO1uzMWzWRnpvkYbUb
+N+CeQJ/E79KtcRmgHUcl4p+ermvMW/kug/ejAvNeNvJka3Vrk9kSCEpNHKuk8PpSz+OWXtbFqTuy
+w3TbTvHHi3nJsPK9r6J6PAS8Jmxd7NHSNlyNmY5YYxxmRHgOJ36mSgs+DOo2/VOgyXRVePgoVS7N
+BuPpWA/XaaRAsxw5NFT7k7YtDMcEhj2mo9siTgUKb8+kdipJW0XY+GWvZMvJ9dB/zHxOqaC7grON
+NkyM3p6wkyx6DxU60XQRrySDKyaRdYg/M0Mj+5JftIhGtVjds88p7KOKtywg0FU88WjirRbhaaMj
+voCMbGvVWJtI0sTOZZzSpS646patlvY341sWCnyhjZfk6FBSJS2u+qgcoUTosWbWVNA/IvWJpu1f
+QBPMWXjdeu7s2pXAJgyepPU62bSNCW5RECuSM5ZnzisIwVl6lRljRzFKqjU/xwuy8omwjsoPKep7
+Hz9mwW6NzfhVwWBYehFXWHoW7My2e6ZdtVjV4v9WIjNV5hly179/+ih/Gjj0Z1rR4Gb/pOYuY4vr
+zOIgH4LcOaElupR+8AqsIYKWHO45EUxNOLlj8rX5yzrE+0C3DDGhZZTF3+2kBP5emaGuomvB80SO
+7BdKrikqWeyw49gzGv7pHvWCnuaKerZ6+xdcdmPYqZrVi83VIxZ4i9UsROXFl9nGXFgcsyUQWE7K
+T+jRmSQPzofIocfJI/quM5nKEstvz5n0nZWhnt0GYhuLDkzQ/7DZE7tlg0YZZX4wIJvmIDlbsHdR
+K/f2DYhI/klcL9GW9Yf91FBVbg55fpTvYUGdrN8SMoVNd0DsdjmILwrbWY30ESGfNBqvNDg6iW2q
+3EFoDgxWE7mE2qkadthhEJv4Gka4xn4HdnfhtTD8IHJv877FfuBXbXT81yqACEGvOSJ+yy6qTP9K
+vpg1QOrc8q1qyHWa3PNbq3SIf+/tRpEJvtE5HrhX4z8DrfFR0xJyZEVMWptBEqN/hvc+Yhlrsy1Y
+D2qIfTG76v0zkgnXsivCfkPRYCI2SnulQ0MMJt0olaetfYbjNpW7Y7V7ygiHCE+4+sBLfqPsWZVm
+1F3oxx2F5iuWzRp8C613ThZ2SNwJM0Bofoetgm4LiqGVfcwPVhgesXDIrHPbCJ8jQR6lV9qKZuKv
+dk5j8PNnEcOnlXSm0BuF/d1EmB32Mc9u8xyK26RtuM8L+X90yPktpxKltTeIKqI6Z7YvBoSBc2HI
+tUIh622B1tOgHKNbdy+ogaAaM4Y8Ye5GVKF5eXqLE9VN/vP8V5O8lp8ZlzKR0gzHqRD6AsWFM1hS
+MEZ8bjJhEH7chUQ5MbqoJzzaHC4tDD1J2kMrTt0wnd3Q/L/XodlYFB7/asizIGm9TR2UuaIiuJmV
+qyRcy3VZp/QX4GQcRIoAnV3eqaaBHjkCltCu+D2vutJJvmgGNRYe1ijooK7+Id2dTiRmvpc1/ipo
+MOrEDyGxo11Qz/vf352tmzCK4x2s5IdwDDmYGL3tsWkZ+eJu7tVD3QtpvK/pM0x4OEVZXvsoLzOC
+S70pMm7m7m6Vx7t5bCLush6bQxXFLy18Vc5KqqSTz2Uy/D1OgbFxGrF+4Zk2Xo74whDnNbl2vNEk
+hlaa31f+UvDG77xBIRT9EAJMMGURvpw7DRvUW0CEfdj6NRARHY4XLB5micsskBM5dy6gg41sr2Qh
+kzMgDfPJ7p97O5EeaG+8M/SBhwNb5iirYmHtMufyyfVU0MWD2BkkY0+DShaN6yGtWzsCGzJn82jJ
+BsF4+qqvbU3PTDdPRLfJO+NemifLY859hk8wlrDpgqJD99goPMFbuFbTFNZT34vgu1gSyjA5u31T
+uYcsr/v3bBgK8v/fQSegBAH+i9bCcfvfFx6lF+c018Ksr+u968yr7djPr9fLGnAfl204Z3M4wbWd
+VcNy+500Y1H+UFALemEWkII/loVzTWnnR3lVNyDGqk5OqI4w0/2YY/B86OByw+C9rNIWgfi3Gf/n
+w4HkNjzFFV39qaOp8cATOz8bOsWDDMKBG6x9WfJlM9CoaVj1Y49ZjplPupSZY/nD0LAQg0s71dCp
+KZOe1WkkiwVbv3NAXrFgcJZczaMeiTBiWGXh2OzgfgK9gGyZGQ17vLr4486ynoTqIJeTgjtyOToy
+Ezu7vp2kTo/Wf7DI0hCQHzYIHU4PBtS+tSVzc2JBNNJRO/knCAxhs6qBYuP8wLgKYeE1tFFS9T4P
+Q1a1pHNgAzkM5VUKpXAqhJbxlCVoL+4KxTIWjcCVzOfwDkON+NjwOHfoYMJP/uywrfhN3waGcSoW
+CRUCP8vWwYDaf/MTDFyZhBlOWES63qsGlwjhNnh8N87OMCPhZ9avy+pOkGnCtiv+ZlALxZ8SeAeP
+VGdg024qOKnFyscBJ2b2Dm0ZMaxKOaajTGczqfGMaJR8diBUBy8w9IEmzj8fkcPLOBWT0PpN/jdt
+YFMCgR/3PM+6olfIzLO77iSHbm+jo4Amy8zEiaoNG0OFkaWLxaDviOMo2UwT1BEp//VQ7lwxfKqA
+cAjBIqwvE4p9Jw6lj+Gf4L+mFBADT5AUz+SlXqBOKWGNw6M0fhvMWs6ITqDUTUEMKl31JXOPv37D
+bvpeaDsSmF4P0MQZWOFV+PNjz1yNXJbNzeHDD3gyzU+YY2omwdr1mFev0Xr199jafoXYlf6jKMRO
+ycPdXjKoqhfg6MxljLK4rOvdko/HH2GvI/NLxohqgxMccEUJXx36+U6gzeOkS3nDmsS3GeWwfrHZ
+GWSHeUIpFYKjVqP24xmiGppHq/wIf7dhMQrIQdN5jLdpnFcMKnnmRsPouVNqqcogBBo2sInB5O9y
+dBjw2POUng0DkYgFA6k3ejDG7SR65GrsHJm5Pj9CHCMoPHob9sYvsE7Z/cb+a3Tj7HvNxyeb7GqB
+bVSt4CrGSjtU4XKJ5L1ZHbZgbKlLR994q/v3MhwZqYS/Pad1lUcJNmepBC2HCF7NBoFZj/xnXxUt
+IIVx1w17MhAC8QlLWBJqoaD7hFbfvHUbaKOAIwbIjoUNmmWmIkbhkMT4dTzLpua8sKn+E3im7OZR
+JtKw2A88YbsRQ0xuhrFejsZIAnjTPE1AlsXQEDqE/nUGGW+iZBLFLYlDrRKIc9yzoTEFQ47M7Hxz
+BtXWsJ34d5x/Z6RhU+TGUx9xKr8z8Ol+/Ymerae/GyiFI1JGLWjKHh7Hoesq11mIk0+dwTDKpi90
+/6gSOJN7CLFvh4ZQFfxc8eU/DIuwGBKfGfMfRGeSX9DTrjrmsJ/4gTDwtY8utdHRu25gCKo8pujB
+TubKHupumMBC7U6dJup9L9fQcghEnNBHuRoM0UCRzdJ453AOHt5DyuGznyTY+uVb8t7s2rvhNcJ+
+c1j4O54qD5SAvyzJs51KcPj/1XbtPxnrWByb55dF19EZZQ49lIl9d3NUd9faHQuQuz/707Xab/p9
+N2aeACc0oRPwSvCyNWU3Xe3aQtohhjeM7eJ/vsr58291/VjS04ecaz6QFMumbsXhJRpybyive17a
+90J96uploqa9p5bTftlHSp4gT3TFl9q3Hn5ypUm33rHmaw4TWE3CQoF13Ady7dO8P4NhY3m+LeGl
+XAwxCC0E/ZCXf1VWPm3yhO0mxh+VrY80IbJfac9XZT6kxpRyVve0JPS2XpFuxlv/VbCPVr1ehtNd
+lcWbRpzoUukcKlWxiqiJYhRbUJYialNcKqLYeFzyALEUWOjjzKzcuoI8Cbu2kYoahe0M/04iIzMw
+Yt1X9SedSlLTroaYlVyIwMIMvx707hMogy6+m6Jc/QUZ4jL3ONSe+cyedN4PSBUmuV1+Q52JROho
+mnpfDSEQ2Ugwh4u/3uOgVo9uTqOzeYVgQBii5MYN1wgEJzU0JSEuF6+tJO6x//GPtLXdb1WuneY7
+f96JHbEQnDlDURkxeAM/GKp1HAS7d4Xi5EfOr/k6RAvTMMgcKf24s2tbZolPR5qxsA8FUmMPNWcQ
+8UbX9CN8EqONWYfWiB0SnELhshU1CFJDYATnD+XlUflQeCscuV6jGSVF99L5lnm/9wlxnFEVNRk9
+EptbCJ/M7tnf4bvBHi0DVeb1ZYzuJvwUe5ybejCEwxEezp8RaqdDuLVwCIRUfwX1CSJ9n6lOUPqJ
+qQ9JuiNOrXQ8NxYEMDvcYI0yh5Ehf46HmAI32XffSSY55Pgh0z/FxyJKwKfKoASXwDnDsSsCew04
+bms7S3RiRqGbAddW7ECixXLf9o4xDGiDvr7T8kaYb251eI6g3dLRMHw5ZCB3LmqO8rNKYHNScqGk
+pIaNrBeWLTj76IThYkBLhaJgXzIYtwG1Rcbx5oLhu7mD6gx2Uw0ct1G+3Hhu1ELV59fDuVLkEvoF
+foZZVGNLWxuJQnT2m1GhnYFlQhmWN3Yw/hkpVZRFb4LBImZBgP0cRJgDOhPs7VD7OKsSyN0wjuRj
+2jY+6Q1OsieZk2j+0O52CxY9pIRtC6fiybJrI7R60ll52J5uUMXJ2GZI/IeE/S0yvebND1niQZpr
+ac5z2XnofeeFJp4LSTWsNQXY9lfeglg79VRHmtJ6iKJC7nJgQSv6ui2knmQmsp54kPVgJtZf/RTa
+dpg+ECGvlAnjzqnMvLmFPjDi7C19qvr1++yS+medWsNqmg7GmmJB3mp/O5yt9rlntPVh/sTPHmNc
+TY6XB4fHlHptVrjO4pnE7Kml45nKpzP8iSr0bgtPU/HY5XMWkKT5kpu30rPViR1JkVn8JeGhDMX/
+XEVKv0nL+YWwvQ6RjuwRKrw5Cf0s3nwd7N0yffrnvRIquy9l4g7PSj1S8vxT+1Toe93tf6jiC3Lb
+a0paMLqwzaaMmhY98OH2pK+86IWfZ1pTgkIsGo24B4Kk1sPXhzKYT1ytU8TBH+dKR9O/J9bWT2vS
+2eGD4kOFfxbU91DKgYXW5yaz76Fyry2ygK0rs47CsjhCPxPq1vP8ufBkNSRp4mN70ulqKXOb8FqJ
+D4hBTlWYDthvHTVWjA+WHDS2YXRoxhO2RRDMPa1WkPuW0rx3B1uxvVxMya1H7sM34UjUa6VfTiEt
+7KC39qfsnbzb+6A3ik3X68SHpLDCFX3ih7G9wx0meEcP593chFZt8oAXFmFLi+0TqBFgkTxdBj/9
+h04m6lsfKNYtFEXZVHg2DnrMF42/dkzdrmpheSvTdH8nfJsTqZr6ivYrrPGrOKaSgva1byP988p3
+xav9d8viVuoKCOU7RPFgtektUxGjSP/BD+bAb5J66NkM6LHE3MA8t0BYD/cu7Fb8T/aYs2dlhT68
+Mqp4kf+yUm+Kijp/nkeS0DiEt2fyNshLPspCoXilzM0ly1LyInH3rg/K2MmQYq8cPXc/UZcSS3ic
+9ftieKJdvqLvfzMDtlaiGMUhdhVXb4vUtCmQV51e3z+Wd91ta0LWnfd2BG1n3EoUqV1uJZ3TW8fh
+nmpxf6mmb8GtT13iJcNgD0uRCGZNW7dbFhkuSHuwo5zuspWqy3eZ2Hvm2U9edBs3v943upe0OS0+
+a65jM/OnSnmS5YEmqLwmU7yus6YKheBW0XV7L0RdXOtBZ1/nSExVdRhVaU+jp3q1W7X0BU4Uc8+d
+GnAyrKfpp9qpa7eG6yV8Nj2Hz+k9TKMITlUubt9V1TUHW5AJmQs6+aYr6V8LyeQ9+dHeQmZh149W
+5t9UmBbvs+bOnCZkQzPJ1lzrTnzLh879gG7g5MWkhPVnHZNRqMQSValMJEdyEMQgCAIgCAAAAAAI
+H2MUAAAYIBiPSuaSYVgeFIAiLRkQISAiFRgSyqTxSCAUhpEgSFEcBGIQQlA5xFRZTQBreOGY3C2C
+8UtpMO53l0Dlg/OBpM0mrFHtrkHJ9PIH4tp1C5nKGXVP1h/Yv4ZEFTx0tEh912SQkr0bBwAik4d1
+dK2775wp+QHIXY9rZXJIbxFTH9wLaj1vtPRZrvnxZFafJm3EgIlflqR3LjCdAQ0J04EE3TNhh/k4
+asPkEZd4m2AyoEs3eCvc0SrT3BnCbZO8xr/AKVnaA70WpHSegASq0NVYjX78kHHYS0sXQ1+jTcz5
+Ov/HM24mrGL5D2uaWXjv1W2pSf6KYKtwyZtYTjwcBnUhhVK9DoGw9Sy8jETxlYEkBN/Imr6OQWXl
+I//QuiMuO5BffF27UoMNdm5+k+ewxi+6Bri+qnVxleV1n4iA58Vu4OSi1Bb1cOzmSkaYQztFJLZJ
+AmQ1FBbF7OK1f2WUnEfas19JgSEYG+NXIn0btL99NfGnHx5yVdTGuaOLsuCxYnUZpRTB8YP40m+m
+Zgt2KS9YuzwttN+C+dNSYAwa/tLZ95K6Bbuue5HtInK39DKCEq0J4MVbMAfaYUCsyf7Ygh3unW6J
+TVnhu16wk9LhaH8LdmKwCTgVb05ZtgW72YygRcDwNByyFywsonzOWzBCvahodlmBvfScRkYPJglF
+hH3pQu20BV4aQU1PyUp4dGzkdlrtqXeFC5FMCiMMDYPIZUygCdbaIQSDTDAHtIPkOLe1HFdTMWTO
+PGz5wjgIhNg8wenkEOvs4EdovY1zDok5NC8ntriUSnRvslsFtuRrEs46dhz+vtuHtM9ky/60cevv
+5APMF7jU36jWP991pSBWDLRs7pq+Iq810kVtovHAcH3v46ZLEBRid8kNiA5VSZYyLRsIrLzs9Yer
+lBgDmEORJ6M3zwo1PdVyz0wrBsgEUFEBTfBFNkOiBF4V01ir45v72AvAuU7NJNxkeQA1dqryaSsf
+DRdMtDchWQ7ljZRfUPlX0UNKT9ShNWQLnyfcAz07wSFBh1hPjVJB0hZ5RoxWBvDXcZ2EMPN4uDe6
++zgbQBKKZtvpT1IFVTDMzuj+FXPRkKmjRSoRktDy3HVbNoi41JP1TakKwJOpJn0rdyvzEroCEpZC
+ERAFwtn7qLRN4BevoKJxcLrfP0SbaN6cns9Wxw9zi2Qn4FMaqe14DOWb/Is0Pc2KW7zaFV46o/6b
+NhyV3GLNcKVDgCm4eauUVEK/XaAWxfmJGQAcLw0qeBdjIFzraW41r40ZqnO5Y4wHBWUdIHUOz83b
+B8rCbE9edy0lloEt6E0dO/qYCTI4vNR18iyc1oSn/zGK8nW38dj9MlHRsHtbJTPErB4qPeF4BT6L
+vc+CjvWQoDgeYbNt0RX1t6w6oq3mZ3W1CvTBPEbHAWqDVkEMuvaXpCcaV9dNq/2f/pB4Scvnl+cC
+3PvEAzXDEe12i+3m2H6jJ7dnxuJ9dztPAa4P/QkD6JILbyi6hqBJBbHlAseHulAZdGiFyt2+0Qd3
+ccDHjpVC0V4oUiAhxdPwZszluPBFK76Iwb5rDDsv7CsADscsBMptBaFyZmmGaullcXCBZ3LyUAU4
+eGO41E6hcQbVvGpMsIAGxJ3Bf8cUhrGW2HRRoXs5x/CSy6poI+rKIp1wKZOIWRu6AI73oNgO4wcE
+kBZKj75c+25Zw+BRCw8eUsSNI/YQRcBcBMBJjoTZgLWJtyV0QwmK2GpgJOp5aezcT40daJWv3vBD
+wgjfaS1IQR2aIvv3AJgLz+NOizCz4dnD24PszLJjy4gko/i99FGpRRxRHZvfixwh9a5JAUa2KyF+
+r76yenmtBx6b2LzmQsDvpbpKtwzx+L26m37zG/gydxdCh/BKn5i6Al93g4vfq+sKWl7B34m3bo/f
+q5iuwBf8pfhmbsbvFaVN4IsSwitqfeL3cnpBiyuyDgW+hCePhgS+7iZe+L06Bf30L37SYedI1hG8
+aLg+kTFTuYbumqFHshGpcplGgyyqTgLrg0gOewjFdXJPfp3BOYrpIZak3r6BxmfF8bepc5IyGgI+
+GosPQJclcLlSOPIIF0/ZWN4K9zPkGPJzW6VtOwrIdu41o6SHcMSJY7aIr/iIKZhR3ZHCpRs0Kkeo
+nbD4YKnxZwDsl5pPm3Y1qDviv5PohsWJWJ/KAP9Cb3pNsoty3BXgYIqlrsegB68+4iT6/XnN2SZ8
+ODvcKwoC+WKpyW51Lw1GmtrywVJ3Ofwj44Ce+p1PVV5qL4VyXXxsTdt/mKVOynpWCnKzJNOHswEx
+NCdXcX1z2qQjd4j4rH5QokzbAbhgAFK6IMgu7vkGweYTsqhcKny0fSpiTjG4M5LwQlVblRntboWt
+zt4oBzzzGUIhXsxYjY+iUbh9WH8JFFf92ZalpZQwL7VNcYDkZrGFXkUyd16zdg6qcXoQcACX3xl8
+aKHX3hhbrXDXkairs26yncmUGZVSJbCKdvL0EioxL/fK8SfG094EyO+b28KUyVNGu9iHtNJT/+Qa
+ycleWyOAnNBPpjzq9FFtZ6N40skdrj6LWUsXzuxk1shDYhdbLMrvLQZRFOBiBnxziw3KGREu9d2y
+fJefK++qXxQktwOj4RJssoVMYWENYkjoKrYFDnjiERX3Y+wAMjbT/3MQTWJeGmsbU4RnoMYu8baV
+1RnajiXe+vhwvAtYAJM1Gu3XHNf2nKC5wDZW87gLc/ycZn+Z3ZSSjQpzbMB1Jw8N9SHRriSmngUz
+qaGprWDasLeMqe1X7VGsLV7H1Hz39w+aSJ9dFB5TV71EtS0qxPwcmlqWZL4MhBhTryIKcjRlSbke
+zcM0Ndlr8L1AE0k9bj8g0iTlBL4GeXDM8JITUhjFK2pZ01FQCSBaupkmS3eAfWguP4SIqaUQIDS1
+J9qofGPqaQGERjmNfL28bcbUrhBWwU2noald5zNq9lt0/o2VEk3Xt8tKfXG4o0lnomblnTJzKrhb
+f7bTcAMRXfCtZPsYGzQRE7yL/aOPU3cB1cVFAqmLy38NhFW1/XSxXt5u4HJIUPMRVouBOtKpqjOB
+94aXynFmc1ffrQI3cGHwmUNK10lYaof+xQ1jXOUnPkwUI1GRJHG4CxS+KsQmpnK+XONEIq0D1c6e
+W+nAUkP0A9BT4gMarlEHZoOFT0K3BcLmGG+cT7yN1z6LeCPZJ3WzpJ2AeCPNZgGOz8FR/oHvFTVR
+qDw08aCTitcgOQU0+vRBfpvxpa2XP2/7ZtWezlOFRX1+lANCP0A52NSrKs3g0hMTL68biy7KzcX9
+JVqpd39dTLAZZ69bBsdbNBZqiJo7yPjgw2XeosyhZAVpxWX6ERjFBWAfd3vd0x14IUbEYvk9mn80
+qFl5dukjvs5EYSy9Q85rcwWDKy11nbjZAf3cotUS+XBoH5o8oKlYivnlVGU7caz7sUK+DTu0Mu2t
+xHM8Ma3U1ytsEbsk0RMfJgm/wpcbzDGz/Kp7R5+adIyVPosWS9aXWKUdCbaH6YyyfBHfMyjcx+xA
+Yk6JIqzw7bsNK4FDC5Sp8QySTY00QVhwgflUhuD+ZFXI2qPTa2hCyfYdmTPlCG5/+QcWrInNnVo9
+YvkHolOXmzWiMUSA4fL9ALlWvxS48OaoUtM7cQPCop4moOuGcJM3073UIFJuhmyds5D4ij6nHItR
+T7KV6R3UX+5zXkfEhfwbzqQxfbDGJyvTss8tmKuZrlczWJnO5+IFE02bo9JqM816lIRrebBH/ZM3
+C7qDsldTlelGjgOZ8oliHOj60KX2sDIt+e2LWsWt30yLHV9pX82GyvTma52VPT1qJrf6oecHN9PI
+MXE+y4KU6SwrQBPmrx0mk/DnCbWiCli8PkuZ5jfU0ZFnwET2B4yiC1yDSBxWEBk2lHZRI8pT3n1k
+gMD/nRKJVi3Hf2GH0HkjB6mbEKNt8Lc87Pw95xqzWl9kj7gs9BdOPXLtncEpR986mGZbOOt8E2r0
+VpucE37c4hYNNS4jPn/rDL/EEe3bD43vT1srpbTxRCfJ3aDNRcmr9pTbTb5SESP1jAfjVUkbjbbB
+rUdZEI4TEYc3dsq96BO5vK6M5juINMuQsLwUHbaCnnzRP8WPai2j0a5pdub4elEXGX20gHHJFOKA
+LWPjv5MLPgIU4TUq0VAnHpJevpyW8RZU5qfCXbsvF6uvBLaxrWvhZHRHJgimG3/woqUoURNkPx+A
+Lyj8LxpSUja+hknz9mqho856kaqTN1XnFsro9Vgu6AUUhNaQyPuiccNdEZwRUezZp7nsYOothL9o
+ACWjuQfzSP9F1ySjgdhhGNh50Sc60BVvyui4KTfx8IbUL7oayWjMBth80VKAxwyW0TjWshnI7Ys+
+DcpopYEWfdG052YsWUaXZeDUX/TGKaNhXGFyXzR428sNy2iQ6erCedEIH8vomGfl2QZK8UXPlDIa
+2ls8Py+66VAGzWQ0wZ837otel2U0GJVl9kWDf4W5iYyGqqi8dlj5L3omktFgzf3I+KLV4AsjNqdD
+V2X04J/n12efx9wjgWlG7xcT+0UXQnyoymgKIK0iS50KYcJcSPGbjB5EHK1ftOgyGp2Q+3/TDU0c
+gL7ok510iE0jTcQnihGqPqFbRkNEohHqpzbKGjMIwslo9kx4FOo52IfogzqBwFk0kVaj3vFJNG3l
++35CIUGXWKP2jHloiAl4fQ+xknBk2bhEhWT/+ZKNg11U/BY8kwVRs4vW3/mkMg5hNoC42ozT4J+q
+8FeX0NVWlF98IezuHtG7hE5XWS8ExwNwrsm34HAEgZPhtzm5LOkx7tpJ3ixk/BkoY/ocnygba+dE
+r2vcmZgfFeuMLbROk6PkSMK1wjKjKupnzJJNhxaTAhbFJzOGmuG3cfkjMLt459pBdRLSLnBQsY03
+jVYVNEzwiOQACnf5Sp1kAwj4zAA4xv9dTW1WyvapcSFx1IzzTk9UBY3eHftqUxVoyRq1tb0NfUcc
+b/xn5mBUgUEoRJS3MXORkE7m2UejMhgY3iva0HnS4D0twWTGalNsvb69Bmi+cXKVeBBEuA/KWic5
+k/fJdTqAIhYotxWOrb8mOy16LwRyfZLywLzD2xprHwCHSNHsX4SVNyF84vxP3Md4BybzLzmvX5sX
+wZVlSh2ImwxyRQ8F/0H2pKATIXez5Nne6GjehjrnVl5752+0SgQZ63Y50F4W5mI6k3QYDUPcaKFK
+XSHwmX+jj3AClce9xBdIXPFhE+AneqPA39vQ6LmHadO90QuZJYZBt/x//P/2jVYYkaedelOgLrmH
+M08t9i6AOnRA1hv/PvfvKIdKtU+UNAK2uMG4jXQObG3/WKEYhF9IuOgq6sk7koUl9xElzKiqa9zE
+XWLB/Jv5OtKELv2PGZkr61P+KsmSvBjh2BgOdC4/I2BUOYxj78gODRVWHdi3zWcOh0ZvM1vEXuiU
+xOan+8mKcFtqClyULF0iDMQHzdinOP3EcWT4hAA1G4Nyjv79coRhl/nqASyVLvUat6JAVeLOtlCZ
+TrnmNEbHoMbcre26yhlNOnLxIXj3DeVTKlp8HHDwYvlRT1AhNGh9lZWtT+wNNi+L4pq+wgk6J0lr
+v5sDDu0aCzbbH1wkEx/c1gZaDsya9JtWbsTa5LIhILk3+E2m0b8SNPlkYfkpCuc1ae7HtATiJNxx
+Ny60uf9LWCj5Qe/iJ9qGXVqh3y9tRk08Yg+KMZ9ZLMC/Hcht4saHCPKj3nsBcLKnVtXMewwmCbII
+AIcsl3LBqycsEjK8AqTapA+hVVYblolHK2P0bBLHmFJNnKUCLo7LrU5v2LUzAV1mU6hmWTeHZGj7
+hk95F6RvFuJ5pgj2EkbRrK4wi6Ym56baB3ljRVcb1iHsa5d6WDZWhTRoKjy1tOFlEDOgaqQtxOVp
+OsjmQEREI23G/7nsn7KTBM7SkDZkuQcZL9xWa24tzhnWVe1wdahRegYiLs50wcBVzrejIXGk/+HR
+jw55pUrqpedQQwxRb8VqryVtoOKKe8d2awS1Er+aK5zDKx5K4EmiB9wgwcvQuEZ5duwVKD1S6nZT
+iyHbr+q2RkQRW51oq+8rnM1bMlPt6FPUBOvQTAdYeztBVFn4hLc2ySRNhFGlWdLKGygSskpKVhFE
+FMrujl6nHRxzMMgy4TxGGYUuJm9vKPwXBowNPoFT0mProXLrEMEoTtO7x4yU6P7N7n/7SCyOgsNZ
+tZdsNHIfVcseww4MRvWuz2KBQHxUrFMHj6SsxIu4HrY1XsljkbhDm1JJ7gTAWcQDUA964xBavQOX
+BRiucYWz3vdWyOzErNpWvuQlc2G8J1G1mHhxczQ+PTLKHBFXe5yzJqopwtOlj/6zXMkzVGDI+O3T
+fs9gd+Ph+F+pBlOUspz2Kb3GSJBQJmtDVNCGY+IYtGAThO8bHLPi1jPdKMc0cWil4SstDsGq8b01
+/wLh9ysCssWCK60mWtXS9+0rq/5bth5rS3PWYzqXyfnQ7nhSqd6VglC8F5j2/Rvwhb3zKCO+PJO2
+D4EKThcQ2EI09XGF9xBzzK1Qxtab6AKe+Cjrit6YxRaovbHF5cVk2sLFB7FVLZxZ9S4iLvMVi5gu
+neiBbyDEf0pvNXO/+FszilsZdunVNE17VRwdoIGCvkMMUB5yPk23pc5QKT6iX8+8wUh43YuotCSU
+1Jc5UtqrDAG7UgfwJeMMBuSlWroBQHbJu3XtTxks5JVh0l2OJP1pAMpn++fQMSB2L5bhm1yDYvdO
+K6b1aiZsCzkRdsB8alrYawWpYDlO91ysXAN24/HcxNeknN80X2bm7ZBXNiH9xTWNYD7biBqgdReL
+CAyMBzowKyO25yjfEaxui25ceitCq9wx1gTmYZbMKejYN0ljABQ7ZPnLJbnIxaxDdbPa2O079OXg
+25JgXm6HAag3K8mE8O8NWe0vK2xsQArlYFf3fDCsEqFDo86HNd15FiFLGJb2nVeCrC8sSDqLFUSr
+94Lk5QYS7JxjalMikHAewZ/T8IACK9sFrcOQna80zMblrCsUaKDlZLGo6YCKNgyKACcdjtEcDFeq
+mKPsS70Jqci2KmUo9NkB3WHx9vu1FnAvEEhtm30oZVWASMXRU84ywbMzhSdhgdwdPnvTEEkwF+lk
+O/ES6tGtAMOH7W5WtoSh+VH+73tNXMsirF+WGspKdApuDaqpe+Osqz01Qgt7Q8Oc1GLlW5vZFJZo
+MeEnH6fkyEWTUbXXm/pjGXSCXTedpbL+ZcJNn6i/AdYYIxHlk3esPUTJvuyQeASmN8uVMP7ITXfr
+zBcD7mqABPYa+bF0SEGyc/Cuz8kU+sjcgdg5Jwow26Yy6fIcmb1mxpGhWG3X4bAJ8gwMEKQceaxP
+oCZrBhTA1PjsYEGk3nrglVILoDchp+HL2XnhejSAt5FJg+FPXd1Ak9LtIiEhPwh7YX3qCnJi+fAA
+JsxzZMA3b9SUQL7Hebh7/I7BgVgVFT9+DipQUPEHyclQWof5+k4/lVke4s2ZFZIkA3r+uT5nd9Lg
+YqeMeTelWyCAXukgeII50q51FBOpaDM/s1wwdbV4Qkhdx/xaPdjhi7rSD1TiZujQczdznU4A7spt
+CUkqqy67e9b1R7ON+EXnhZzOagXHAUTavFfMN1Ue5Ryckzkc+Rmvac9gwjHHqD53vPvaNwP3zGLS
+pqnqNLpHOcNZqBOwg7d3SZhzeiucyGFgYgN8FaiyklhDmsPpnSquAimtwvm4ysGOcPgSwKkngX15
+KtYoLTBp4XQP2MVjD1ojePz6Ck2GOa/Hhx3IFIEgQZwARt+uxPBGltc4ui6ydPQMm+rOE11rB1Jp
+PN2Z2wy7+HDQHIwncVBnWLLtMft6gnA++SQpWmM4NtRz4YwwIF3yI8gKQxRzOcyxGP5LKzctsPzU
+0hhhW9HyqUWXe+Cjl8BrNZDCYv14DJnAixBNx9AgSe2GacL6ojY1+mD9ZtNg05q8FNt2of6A9agr
+t1RfDfB9RFRdlACBL9ouT6P4raeXDjQP3mVZ1/5hHsxpY6BQeQGwJRE3EJBHVw5xpzhmiwuKD0/B
+3ZQh9BpnFJAdvdu/MqtjQfbpO/HOXh5jN9ETW6gICxV32rezUbXtgrFtF6JEWELKV0XLfMcGieGk
+/zBFdr8Nx5cwKDR8FLfy25m19Q/2fCxt457VsV2I2lujXM93o8gLW6WC9OG4p60zgCHYvZUMgNVl
+sAqYCGbraMw1AlRkMIjtgs/OO6qkEtVPZK5GiqWBeICHIxT+CVQrSaUWi65hviKQcUBZlA3fSn1q
+BH0FpqWTZuJPh7nMvJDSSLqhMsLhBpNf5VzTuSJsIZISB88H2ItF4361L2v6dX3nhZo/XLAQijq6
+Wlgxn4AohEjpcHQHObBtgI4vYOBSlmP73/4s5SF8cgJxDBOfUKgwKlOosEehpJeDwQZQO6VPNsJo
+vdoA5mCy8EaGtJ33Jjj2s3wPI5zztCYSxgfxfwXgaCAxd8N7LsEUroy4mr1cYxP1fxyNgg2el3ay
+X+bdB1FDUiU27J3iLOSi1INxzToO0naLZRUE9J7QmJDPi/4nCIdDH5UyCs0Uyeaihx1gGrfGpoju
+fj46O5so7mEsGvrUvHC3B7RFV+Jx+lh3q9rNOForianZtAM3LSZQd8XcApEB2BC+6C/2lhGdT0AA
+T0Lu0JnKKMe2nBgH9TgGzhkiKuTH7z3wK7iMTbqGAxHiPRAaslXPR+28wZ4okxjzglRbIoH9NRl7
+T7dmkgfUo9xajJUCabUg+o4YnbAcGVN8UVAymMDN06P0NXDA6pjIbRRNpC7rNxWAl0HRYZSyen00
+6OhpSGgKWaM+tvXXSxg1NjhuUbZpUXNHv/gA61fwgvvWc/KlAqYbR5TdVkKU3mIcq1Mlv6uASdXj
+oRJvQOoSD5wv3QVh8Y7AaitorDorar7Uzwf0uNjXMKeP/TkHOWCTZZHmR6spT3dfzXMy/YNj7PDW
+QaFC8jKdvOLb0FT6UNtbghLpIBTkgp/P+fwCO9kV0FcQUfTbdv4kSgBmPMh8CGJI0lHfvRdgAI7A
+uElwtPA6ZxkNNPISiVuM9PKxcSIKemk9YyGqbD9HPBCBGxJqd34ppseYoKKjck85PzJceDNBOBOu
+pPtmxo67/kRb5bIEHHlcjuUM4+iewsmUC3vTFdGXY5YllcrdW6bOzG/t5j4wkUDyzXlgTck/Nnl+
+aLYiVE06tO5X7jLcEjYN0I6c7859oShnQQoi5FA9dyz5P5vNibyVzhZZN0RxcDp5e2GC6JgmlQmK
+ZKC0Y8v+d7a1T1rxH0bcqZ1NXuot+LxBeLz+bfL44OO6sU9j8ABRvXLWUaPUNvXVN5kVvaw0RYm3
+5GNy60ZH4gYrGqckbAJ5f6QSfb+Gm88mEsQy3uMmsNY6bbFIvkMFb/tdIyB24BhA2+9MDg++DMNp
+7iOPTjq/vzofkhS+aqMDLI/CqxHRiGfgH42OJx/HVn9CIA2oMlDCR4rX0XdtXNYTw4UUjvlHxx39
+LsFzwcd/iwyJPHDUKVb0/3xfKOSDxkupr+2G9/1HIEXSnA88SHQ1EX9U2D05bW7yeCmUasapgvoc
+eYU5A+sQsg+B/5UgPN8KLAmzReujwh43EMH7ux8ZiNEv+OaI8FDiAzKOnooufh65Dfz1blS1sDeF
+owrwV4cV2FdOVnagL6ITMC7fgZGluxJGnGNLfC4zIT9PBF4BH1l2NLKs0jjjOVxq60qnPZWyvGlp
+Tl77CdO+J36g3fHRpQ/SYO+uPxPasN5Sg1YtYd7TqEaN4ZA8VeTPoVqEyBRPnD+U7dox1c8tSCHr
+OQ2wnsTXJPz1tLG5Lf4iQLhUHbDg1IwR3gY2EXND4IZPpeQQmrjzqGelJh/XbNM9XXAPNx7pxKww
+MHSpUS9zuFL+hr5I8x4RdBJ2OH6JTpx3j0GURlYpklzmGT47lSsGnak6Buwz6OCqNL6uNRecai2r
+dJCE6BSIBV3NCK8fnfj6r1bWp0j3zNrEnWk8KnDXJDCRT4gCIPld/7yjRO9w2NuGLHyAT3F0F2uv
+04/1sPS/AqHEdV4Kwp8lkM/ZJPK6h9BXpBRILHfrHcurcmlir/I5EuXJG8xZ5OXnmwEKplxgpkKP
+6RjLtwLflWj8B5RxTsDGkScQTBQKicZf02wUl6IhuGBZ4zzYQmh1beMKWBcvcU81LzlbmbwXwcLA
+siAK4cd5c+SDoqIAhRiNVgGi4jdmi2WMIwXMMHSH0SNqbAXMSVUaLfBXI03Rx94CsY3XX2ttqdt6
+CigqJavhXZZKW49VGXS2tAvQnYVZmtQufiAWpQOuOpcxbhLVh7nHMJ9zZBfzO50pL+vnFncpY9Im
+CIAUu93M6iYGzWur4B1542HBtyi/0IPyLY1I+Kzg6CzPxLPdd6su0HHYVj1Bz/iA3OprYeFBWk5W
+lNJEuQH7xi6NCOGB1Q6KDfLPKTa5eA4W99p1+X8huKRRUOgX5R08tKWnbj5pFqFZwpUBQ+HtQJqK
+rhxSULUwsLl7oz0idpRGI3yodgzuwfiX4Ma0eteum08uORSjHXMAuipvjYIDwFcfEUr+y2YHv+PN
+R2q10jlxQezRSPIZiiX8iJLhGkOi2V56u2vWitH4Xtzrh6IEqjiweAhLhg0qtuVfZ3vFo7BeWFEQ
+Jmjo3cOTo/NFvAbJdKxbk+IBpdxetzs4h2a/FKkV73TjpxDMw21DaBaTOWhcKnreKggAdoQffsJd
+XMVVdzwPJ8Amjjl4kniZ/RCRiI2tMk8WvkEx8JAkQOl7iThuFAZ/j0iRgGsuDwBXahfFH6wDHmkJ
+rBlIvuABVVc4E8yYxObhq7uWEUNeSUdNG29sIlFKc3IeMPMJemEEOAI3L5vrG1+JXqQ++P6FtkNO
+vJSWc7dgUS3DYct4yvkHaMCsUgkj6kWWcD8/YBuTbiP6FOe+BvGzxX0/LQOKA53hMuqL2t0v3l2A
+VKSJOLa807B2VdognlHhF2zRT7Bohg0+p9WdA3UovFemCnpr0LYM4hwq9hW+m6/pkWSJy3Cnxftg
+ajN+8oqFRhunEwLsyMZGxxeRbfdfwdquJFxZZQ6tb7utmK28BWzlCVQAU1+1/gHmGHIlbHMHgOBy
+LFOKKbTN/rodC8CPLdAq0M+LTOK76fJAk0LiTCtfiGVsuRf+cnmpeU1KV5oNFAgEoDqSyXG5LMgj
+IgF38YFbwyot3zFsIISMkdz4f9Cln165Xrpfz0CE5yeOoKGaY/AZBy0mHqE4Oj0xfETkkPSgRN3h
+/O5u5y6pGZyCSVYisr/VIlBSTX6aFtA7fuDFKSwVZFN/KY4S1rD8V1s58Or2Av+wPW03PPW4pd+X
+VE6eToXPy6hVFo4hijPUnCAtYouiLw2VDRBKrvQVcApm70hzMEdHxR2wub3tpH7+0cvySJ6x0kwb
+D6mgtVjjZk0xxohALzJZbNMJfzSDwM4EPXAjZ3VSPqQX8lzTj82DbCJQeMftaQzPu5FPtnC/IlZb
+VP9FFgoelNCkCfxo83WknqVCOvmDSiUr8a43+zCF9bE/IKeESkymdpoRfiFa32DPAhHzezSeJvBF
+BjNdXxI4AovYDQUbUBwIAywhxodabOuykV23413s59sTxkoRBs0BNh0vBxX9/Uyey/XWcSv48wc0
+xqVEPvUetRsNiYHKF96UzYNF6yr9R3f+3sCBzefqlAvb/44FU4+AVDYIR8xjQ/2PAyXKqfuKnDML
+lRy96m/zr0+Lc2CdMOSnLw6ewNlVT3k9mBOLEUi5h1hwk6N0bUwStUgbYJRjNpPgCEaka6nb6cWY
+Zwqy6266e3FPgYUocg4jXY7qMiKpXVNetrbwFij4aOMbIpMytQhIl/zcIebVNieKRHStm4caLLpq
+H2TatkNmQiwwhGak9xgvBLI80cOW+eCXKfjLFnCJ3kjG86n1AWEIIc7SmD9VFArzG1EJFOt5Uu8p
+blDNVz/HKft8JFshfQP79q7hzZrD1pil8blGj/gWgu9gFUHI4k1QsUhejDBSK7FFkLk8ozHHcF8N
+/2dNhjvR4uk+ip+A1bqQjIfYZchbiSREwa19W6M2YniMNWXi3UmQCKi7sD9EoHog1OhBXCP5mIvy
+pX9l6I32bgm+eoYtBWMrwzzJF/LU6WgVVWXl/KmvtzT9ZPgucUMJaxmpJRW5oQ05VxogHrgBucJL
+XYBHnBU9ynUt4H8eCCjQeHkmTk1YT0WnSJ8u9xT6brx2nFuuSWVdGQ9ChEiMONylkF5DjPjQjXgw
+xFaKybVXNVtNzmlGPyFZh9s8Voa7ibuxHGlqSk4+NKhypC+5oxpyphUTEx4bwzCHLIoN4Oz8e7uX
+buJflzDa1zdaCBOwZS9pMPo9gJqBu3PDvRX0M+fMMXa6KhvJkog7Ppv8nv3plYqTpWnShrJwBzV6
+uQIHbRAc4hjJeJYgXqwK1IdcO6nmEpbxpntALva9lnuiL90ylHLdlVTcZoQ7eVRqFXr0UXIcJJik
+BW94zOZpEOdbGLoVD+VncDbiP4qkaCvcxx2/SWfjwMSGAJgEU7tIG3bTw/jLtLXrAzShblmpil+9
+Ld/rb8XYW7GpJRuHT133TcIbLSOEGEPbcCpqWaywVLE14ekC9oEP0upJNbcKhnE7qAqbQgrDDtC/
+lceszQEnvaGNNpia2iveNZSBiA7KmKXn53PvgBC/3uar9XtVfowMDgmf/3poAJXetY4iDob9hL7/
+2bigh7lpEv3iUsyI8QLU5o/VSrF9bDb9gHGxe1w/BsrpHNZTfKkfRHisWOGqEGANHqzSittlNFvY
+/QzeymRhSiXrD5/cInP4KLpCYSjU7W0aH2o6XsQ/D8k5IHJQWFGwc4TwBno4SvjjDbF0pHbbolk5
+kk34bOOmHKXaV9a/JE0VZVulu662DFCnTL4gugJmhJ+3e6qOoU682EqMYHrPfjKrSebp3fbaGf81
+PVaoeBgvCj5gdoIYc3RRsSMvuqXxs74JI5TRjLMsegcx1xCmojH/JTVDTG80vp65qW8ZNOPKpDJI
+porZyfQz7K0MU3SiMpRbMiSGiGHI0DJtho8ZYoIYDgwyQ2SGDBtzweRneBkIVuYPfMwTM8VoMLvM
+N9PHIDGI0psGoSit98yecWVSGTiGgsHOvBlO5pNJYwAMegaWaV7YmCWmxJBgWBlqpsfQqZOpREp7
+8c44Y9IZKLPKyDEZDDpTzWwyhQwYg8DAM1UGmtljohgqBgdDyoQZNGbEREgZnwxGlFFmagwRw8TQ
+YLoMnZXpgsckMSimBrPLdDNgDE7K5IiYHcwvc1jxWWSRsmkZBohBYggZUubMUFuemC4GAQNmEJnk
+go15YNIzVIaYYWNWDBbzgwllgBl4Uwa+IiaLcbFUmWUmjmFioBgaTJfBZs6YIAbFsGBQmTRDx5xJ
+mcRiUjCwzJrBY76YLoYHg8pgsDJYuzEuhotZwUQZZAaOwWJSDA1mlylmwBikBYiJYECZYaaPQWJg
+SJnwWjChjJtJY05MEcOCoWWwmd8CiDkxKRhYhpmBY1YMFrODKWWAGRzDxJQYGMwtk73wMVAME7PB
+4DLfTBgDxHAxKJiVIWbemCoGi+HBAF1mBo2ZYpoYGAwtg830FlrLEpODIWWAGeiUYXZivpgfzCoD
+M2vMFJPFwGBoGWxmtlAxU0wNBpfhZviYF4PETDCpDDSDx0AxKwYHc8oEM2gMiEFiAgllCpJlwAyO
+eWJSKpn7IBjMKmOnmjFjXgyJmcHsMtEMHYPFEDERDCozZtIYKAaLAQtlfGaZYsaNqWJYTA9mlOlm
++BgkBsRUMLDMNhPHUDFYDAkmyiAzMyaJgWJwMLDMmsFjjpggBgUDZZCZHIPFTDE1GFyGeAFjWgwU
+c4PJZbAZMgaIqRgWzCoTzdAxWAsXk8GwMtdMHsOTMlO0mBRMLEPN4DFcTGihwcwy2QwcQ8VgMRMM
+KLPMhC1ADBADgvkyyMyNKWKYGBoMLvNmwJghpotBwVAZYubGUDHnpEz9BoMyyswck8VAMTQYXGbM
+gDFLTIhBwcAy2EyOoWK2mBIMUZM5UDNmjBCjYlowVCaauWOyGC6GB8PLlBkYs8REMTgYWIaa6VOA
+mCsmB8PLADN8TIkhMSeYVoaawWO4mIBSxxUsf84j//Fa/5+FZOyZLsPL/DEpuJ7v4fPzYuac8TKp
+DByDwUBn1gwmc8iEMQgMPIO6JDNozBETxKBgoAwyk2OwmCmmBoPLEDNgTIkBMSuYWAabgWOomBZD
+gjmsMmiZ+TFBzBfTg0FlwAwak2KwmBlMLYPNkDFATImBYFaZaAaPgWKomA6GlBlm0hgQg8TAYLoM
+7OVtCWKoGBwML/Nm0JgTU8SwYGgZbObHADFDTA8GlSEzZMyJoWJ2ML0MMAPGcDElhoI5ZZoZOgZr
+wVMKn5sVoSbWQHX5+2Bm/FAMrLKn49tpFmyH79WJtzfg2mQxRONXLTLcbXqqYM3UegyQD4LNH1K1
+nNGaEafHH9J3pxE3m1FJ42r8Pu5Nbzulpo90LeJQxrGZK9u3JAYT+P8l0Be3ymDt71Sqr6Gpky5q
+q5kktvLWaHoaxa3MsCE2neJDTtOG7JlL9u5OduP5GM6VV7Mfh9ZFr5wefAG5S62qBBk7oMDtOTKL
+Y69vfe29OzwcgSfmQE7+11pZgUE86sTWpBIebDDZj/vcz3pX9kunAAYHVJP+IXDcfrga94jPlfb7
+o1yC+Z2vEjQa8OaRjCZdpNMYwQ4hVvDEb1PlYVeA8yPADSTtZ3Rs+0hWOrbRXQVcdylJlWsMpasj
+aSCri9zKJAVcfRa3uFmbi64hDGGldZNDOj2X7DSMYVNvhc6+rv//Gdk1p5YSXfQZ3URXmKYJ066N
+FnbXag1bT+G6A88gJTfkY2msMjjx93VYXhDDCH2cYq5zIPZ/OGET/DgK46uYIGzRtWQ83WQAk1tD
+R6eaUWne4eIg81gO5imR5Wyy6gQBoH3PKos9RvctTX3susIEdIkXIDVAQQCx/5FOkf4zuP/Ifbms
+/yf+2at4v7Fi7SFIeuP783FdvjLeI/zqe/6WRca/WWj6tiqSA8Pj691/PGg4R6DVOd4CqHuLmVf7
+Hm1rU4HXBWMfvIBAAusiDLwDzLOwVxKTD6XA/h4o5woC9MaAZRrg8/4Hqf258nu/h5cNWYBK1DvX
+eW8cb+k9jNun14twemtVOyfNdLQ/rxae6y9YLrLGE3AaR31L3+3i+BpH1C7pHPt03L9TvLOv+f9r
+piuM3vVjECtt9fsNIJWs+PW/o//evCR7sy+nmLCiodrhB+W+T5+/ZFuqh5u0ONYHnDQPJvT+M6nO
+yeITCIwyWPhpxe9w8r0wNRG2Ky0mXdL/1iMjRZvlyEutkBT+0+duObpEz/ehDQhlcfjLes2PUT0K
+qcF0pNiruR5ta+G04MxHbPuV2W4YD3TsMknMaYvJWYafgQwFyiwzadm5LM8GI6gObQvujLwShHVm
+c3xVrNyEaQdhPr+xPHPIha4UerPjBeoTDf/aMwH/LzxTdbvJ75dIeIFQ+NIgj5APzTBi0YyYwWgJ
+YsIEcy9pDsB5qZgcXLCycstPz0ze02cp3v2TftTVdqlngAuXmdgWTq7EAT/aSMHpVSeWZuikWTt+
+Nxo0Ssr98Zfv/0QVOOZPQRgBua8swBy8FRei8tFKCYW+7yOM/Vm62O+ERjmc5PF3fON8bleS/Z84
+feVC5csZz1J5fCZD+51AXeplaiyRTTEdZ0FSRNKvYi+VLBailUTznq0oWG/c8f8N0Syoks5vth4A
+5h8BEl1I83LBP7Tg+cN5jNM83o8+lNwf/TMCCowqfCugRMR2G8CcficcglmGXvkStkzzZPYongSx
+u7t7p0w67RcXjZfj5eowngIBfwhOCN4HloqL4L8FI2ejdX63ahH8RlUhcxFpY9NArESjUMYKaq7w
+cCM0oSSymZUL51swIrqHAIkNHAfc41Z5uMychTHonU2UFAsi+C0Yldfs2zZ8WhdqEBQ+q45E1dBo
+kNGFGhHCJuVB8F0F/Q57sgOk+jioEoC9rgMhc4IYiBSWcAklzSVwS6Ylf6Jip5ngBAyl2URQXd9i
+YZ8sNKzfggH7FgyXO6S+BaO/BUNybaDLhQEXvwUDNyjYVGFLYJ4Fh6N4IdXI4jXM8eKJc7x4CJ+3
+eO1SsHgYkgDFQwhQs3hSiipuFk/gIalEDi6U56gmDj2KwGA03ndsGtLr4RR+A6yZ6yhi4PwIUrDf
+6RiqpmGrkjjRVUS4Kt63YOQIkHgayBSwOBiJ7iEVDxXvWzC+BeM1g8U8sg5nYh4VEYeOKULJfAuG
+bGLAgYODnWTnVWsFaCqv2VMIRDK34G/B+IxNBL2WM9BrmSYunhgBQfFcF3zxLJsKxdNoKBZvZPFw
+lxnoGdhE0BNJwouH4GldvN9UKKTPW7yNnIFWh3Ci2FoykHIP2QbK3wrG14dOIFII8dPMQwmeyPwW
+DE/k3nGjkhW0hRDdFKoIVnwLhoCK49CU/4k7VjoQBZQYCoBy+BYMCVPnc5IrO60JiW3D4VQwfAuG
+SkfrbxNIBDsebpwlTAaHW8CFKDQ3lURB8y0YuMgHgiMtARnQy6IpTZgMLgJfJi7fgiHRfcvFSRhf
+Hc7EtG4ejAYC8SReIOvS+QpFaHkcN/HBau18GDSlg81EB6LDhZqDUmzXgbhkEfVAxoDzBFQkOGhI
+MBsaU7XYrtMoCstYUMFM50MyzUZNV1hG0sIm5fkWjG+54YAaND9GXvS8BBaweMTD6vWi6Y2Tg6EY
+hSYWWPCjAJf8CIaA8nKhYVIh5nbfzK2WxyXGEJUS3bdgzEAimHuoNANIVBGEJp/dZ+mAAaLP0czB
+rPNf7qEyEHNZHOeJAjQzhy30VF4o8VZzoZSfjIDGMdkhjAWWRdCZBAhIGBdOEgUNLLxNaGweWMyj
+odC0PBeBhwhOHrBQiycZrb8F42+zkzDaBkCgTqsDMQj4FoyCiBiQMU0mts23YEDQPBjNSYR5UF4f
+SThWHNKh1ULvRBo6YvcRPYxBcDSuHcNvIjsRdGTRlKQcRIduPKLzyUFIEHTGcLxpHKIU8pxsBQEa
+Z9C9PikBKTufqghRPnx9wuYwUHzeDtccDSuPlMRiHtEpdLs1b4cw2nCZFoBLKSSMtRUE6Mk9rAhi
+mI1iQHzAQh1AE0ahGAAS8pyIQmLELVTxsRrA4ToT3ylncuhAaCdhFAk8HIyPkOX1+RaM2oGFebwE
+3etDMGCgoKEp5Bp8wEItNqAc+lsYCPsiMfvmBFTJSF4BR+XGIj7sAkKPAgZOwwmSP2J95M+3YCA8
+CbaJeIKD5kTbpDAdigiG9CDBNhsBGxo11obGPCoxYO5DBrKQJ/+Q2QpaYSRvGt3nQQoNSLDIFHC5
+QRdQahhNaeYY57dgREhQbO0wQXUBctItGVGUqgjOiFNp4U5okhQNQgaIDV5DxIPitOBQVVwz2aSl
+kaHEgpnDpzcGm09XOBfpfQuGTfQBdQTN7SgVrY6HMJCKwnDhyFCiCYGi4tVams2kweR4gBAW2rdg
+eOIA6CIrkjImCtNszC/RKsBGQ6B8qrX7TJ0L49AVEIFxOiTrmyGJilEI4SDIxw1QIMZvwahcODWn
+jHIMH4A7cMScAQLnXQg+jtwHbHnc06KFJLVqR5FMBwgQYJJvwYBI2A7XmfgaWiQBuYmTEZhBhZlo
+RQmoQfoDDUgpj2QnNLgbBFVDoB5Bk4gQJmxf55FCgGCsa8ERnj6jd7ptJJTat2CIxs+qo8s9SrmY
+5ySnzqsKZp8ZatgpNBXMPtMgAGs0aip23yQdaGrjBEU76ABU1FGUagMN0l9Cwmf0YCRaYdl5sIpA
+RxVAdhDJlOCbRTwmpDA7HJ+tFikAIZS+TUQAhpRUX6TiPawYFDQOmRQ6CDVAXCS6x+F0J/za4RQm
+fIcLoGjlcKEHh8OZJiNYS1QT1rp5erWDyuXqA4eMoSkoy6onCpdU7wZcCh2ha4V2qOVQrQBBkNB5
+jhC6Ros46AcHCVG/SASiSzaBWgRB8emOyeDTmEsAT4cBPJ6msEEkgAunAAEw38QAcAwwIL1ayCXx
+xopLvAjY+jxcrJQAhjoOUfIIKexjgYAu1ECcRBwuAYYgGisPH/dTvXfUWT5SKL28mRxIx6AlFChs
+GgII65sSionO1zYixcXSDsKucMpoPhZCycnJFiA31WZBBeZkLtXmOSqV6mJxr4l7gXyCcWjcC/ei
+Dndw+Cs8UChbjua2HK1tOVpPBRBHEiaoEiiSAgs1pUKBhZoCC71itJYoIagorxhN8orR2qDiQ2Wm
+Z1BhQDFhMgYXlZkmTMYgLLjlgl2BZ3QDj1YZjCGVggekWCINresQ6Dqv61A8kwyFgGJEEMDzTDL1
+pdr8l9GJoQdKKPRgwbbHYdvj8GfbrLAsiBY8es9nEtBhVSpP6bAqH0lJBDvfYU12H5YE5CaGKigg
+klyHpQCMJ2DxBFgRFahHi6DlwuGOLBeggXyuBaF0N4pBmMFjetguCL+HLFLBM+AuD1AqF1DxF/ys
+haNEfLCoZcE8GDyBEM6BmBwO0yBHQ0ONJoo8LGr1ADXNfRw51wKsQ6JfScDg4wE+jtUCbe3s7fGw
+o0p/+gdgO9xpgcIT+Cr/QXk8LR22w6lmrwKP1KqNYkC8NlXY9WVQanhZvB2FNfFwgofiqbzIyE2p
+cOYSAonOiyjX5D0PASkkWc3MI2oOJU0nZ6L8iHKHdxB5YpKGGkgEUQerMCd7SI6D5Dj0lJwFVSg5
+F8lxaI6cYBxwL5BKpVKpJu4FmmAcWqW6pG6tCIcCq9gEHsckExoYkLyNYqHhZfEsudDkkzPQCwWo
+WbxbQoUk9ZLVxoqLJt9JGdpHQJraqFM9nMIEEa757Xuomm/B8Fiv8iCIpLxbg1VOwNMeKq1+1TDJ
+dA4iJNimJTkpz7dCKQHKwkDYEBsdxYuwQVC82vCyYAcYxUOQM9DDF3zxCFwKFo/icHfi0KJ5Q35g
+SoHcJsaoJncCkUKDyjdzjHajMUAABZFfbtekQdFouA9FwwQqYMGwNMIGxhU3LMZ3wRADYIJM0FRF
+8PK5ZP4iG3KSCNSyHMNfPqA7gh1kKKgBSYeIQqoRQC7+mXBEbCJsGTIZUimDUX7CgQeLG1QRvIAi
+ixuwKKwGl8cnGMxk0tByQbX5CRXDjlCaoIafqjoAZVFyatiXkGWgVkJVBC22HK0noSqC8hWjdcyT
+ysyuY8UvtRzDVxAGJBXawcQoEkYaYFUE+xQwztm3YFiGKoIVBBX0zb0iM38j2GfkuCjcAJFS+Sjo
+Kg2g+waP6cKeaBzk7dLNpEoXNoclwQ8csTn42BrHgeKiBVgJ23cbwf41PdfLZoNNFGUkL3PZWLZQ
+ZQv7crLRhhmThU3xBFl8l4wla5UsRMksD1ioLweyGI0tPF4RlE9w1ULY3kADQSeBJtF8QDibcAEl
+i54z4Yh5FplUoCwGoB6BD0oy8YCJCMTCzmUFEy2ELSEjDWBCFcFpQxiFk1UKK6hS2JY6Vg5KYeMO
+HDHHos9RLBuACGktj1c+pZemFPYuQI7hwZZq8xVLpKElAchl4YAqA6CD8SEAMjOo1eYvnAEOJAYO
+iJQrZl0s1AxN8C0YOgzKIVRF8DLBOIChKoLgTeLQoSqCFVqAyStG6xDSodXEhweLVyBQlF6fsAOc
+U/EPqcihXRXW5qvoczRAwUOM8y0YIZINjSvpwnlWmEzCB2MMC9Vaa4WFVdZaYf+w0PeHL/9i+YeJ
+ofneYfgtGJfQEoawUiXkGIAcuYf9b8GoWWChtsBCHR5kYpOJSTOlBRa6WFoWiwUWaqd0KC8WsEKB
+fQtG6wSRTVgLG5wnpPBUodB3bzu40/sWjFglpaG4cTLgA1K5SFfDiuMY2cSxKqDqgLVrURByHYoS
+bIf7gKgADskQMqBsHlk0pSrCylFvNwGCqCPmDD8Qc9AOwh4dzAIc2fTwApKH7pVrVRGcrxyDVFBt
+PpQukFs6jpg7KyAyLwEtj9soBiYQY0mlCquD1qHPx5Hj0EAZ0eEIeTIQDkhRcIwch0dRI55mNceL
+VyAJLyrVyOJZumFCeVwoShIy0tCWOla8ointPFRmuvwECjvXkGN42miDcUIKVwRDUhXBEFMBclxn
+kgEvpCqCF+kCOakyAHKlUn4ght0UAgWd5lRY3KCKYMZAVjskEMO+nQYkP9GIFR/H4hUD2ERb/Cbq
+RHBiUCORLwy5QC5vGTI1oSqCraDafMsS+hYMEFMptIYta05OunUSGTIjJQdEKB22sEGbiqJEeUgS
+ZHs2IasLNSVcBGVTMNqkPBOKAwaMQAAMAjZFaHS2AvsMCkL5g4TWN28RFaNQys0d82ehoCfChoJe
+YSrwWPHwAQt16Jp0ruAi04BFeX1gAgKQKR+wUFuMjNZVQhe2wsjz+VAw2OEsKMA+JkofRu8MVQQn
+qQURbIYqgn1AiUzJUEWIQgdoXJRs8XwIEW9XNYAt7HyzzTwQWwf2cwXheth7r8LV7LWqImglAjx0
+pqoIUqSqp6oIUhhkItipKoapKoIhx9T5S2p2M52nCdO1ELYnVBHsUsPKAwHZIYwPeMUA+hYMGqSk
+q5sBkYnyAp8Q5eMgeAQGHZHDrDRWHmTE5hSgyVA+oYrghV4o/+FeoX4IPERwokwzUxVBTJCZeWiq
+IugDl5lvRhYRcyEzi6mKoAQfZE5gqiI4T5mQO6mK4PxcQhpIyCWpgT6ALCTZBAWqkOptA/IHTkVI
+u67LDBSBmWLwqkksTtChKoYfyalh41iqzVsGatgVBI6YSx6wUFduDXviEll1ryqCcqILG7dQRUtE
+SQRhqdQrlXJNZJ4NjS2VQgRInBCtAlxTk/KUbI/8CWjIhRpHA4dkVScQA0dF+6w6O85nxQem5o+B
+lPu3YLAGHgijTWaJ0ISsN06NpBiFI5z4Y0GIkj+CKFi8lUUiESozHwMbSVhnwYCDgcxvwQhFKJnK
+wgDn8xaPJGfggAHtQgpQs3IGep4bCPRYAWoWT1cCmT4zFbuVNBMRaZyP0ezHAhgGo7l1JCVN5+Fh
+FBr8C4KrP0Ju34IRfgvGt2CYQBQLXsRhIlCpJOHFs2NCxQupRqKGl8WbERCUipvIRREOJY0kvERo
+OGDHpqkQgUjhKUBUc4kWQucJKBZGY4UkITGaFkT/uxTVgbVvwcA5SA0xgBMBjzygsIwi3Ai28Sbf
+grEJayiNa05AM5TDGPRY8YzTNGPw8VNRMQpV4gulqXwc7uhhTSze+hYMGUX8FoxvwchdZqD3cZhA
+7/R5izdNExePRZHITFLeKH8F2tXGb8GQYK0Oeud54/yMrlMosTDMXMxBQn7CTxpvMTfoVcWgfkJI
+4akuj/G8cgG+BUMC/G/BoPzESIGW+RYMD4aCDi9RGLo7R/6oaCbh42ncs/kWDJ0HUZAC+YDIRmsV
+q6Dmu1nuMw0MYlSDkRSj0KFCkB+AZvkx8ilYnAVmdJ9UuJkBBJGKp8r05VswMBwc5SIRGKe8xRgG
+vACxiPFTibC9PqMuITPDelOoYgDF4bzXxxUAlTC2KqeMKBEpiSBG9DmKEElgpSTqjcZwaxwdTeK6
+mGrzGwshANbsaYDC8iA4E8md40WVCy4eTrICvYKGl8X70AjQ00xWoEc6dSyeBDVB8AGN/99SKttn
+I79721zxze8UN/08rTeVuGdj0mpxnU8rvbQrbdvz36e0PReMWQNne2ut9RvTWufbPNt634lt7ndc
+a3udN39L2rNhsZ3ejqm1Xy+ujen8znLO/uv1TjrvlbN++1P6tqmV37NRcbaN87tPx7er9J4LBqdR
+aefG1u+U3bNB8fX69jamuN6ccee/c8qcv2G9M57WYp/3Xjyx/Ys/v8T56c3V5088q6xPGz4xxhTn
+ty9v/gb2xxS/zzuppE8bnu91O+vTptLzNy7Gs7GtbqeV/rRhbc3T6eyZqbTYenW3s9bOLq/Thr0T
+Wzyt31nl42/MSa3753875XTaoDbje/Hbni7z/cZjTOmsNz/GEjdtWKfT0q/5b8t7f8GYNW7+aeel
+th/P9pwr9nrx457V76XUc8vZtIGvzX0dT3r9Z83zvW+d8ps2ftpKsXfXzGlc6rS+ld60kW2+nS32
+z1R208bMOdd6Z65T5jwbN0+XaHy9s+vbav8lzrORKc72/kNubNhfMHaV3YJBC0DV6AXj9S0YASgd
+bnx1g+KvBqbRIUDpcKNnbPSCMSFqULwxWTBkokY3uja6Ues38Hsj3wWjYcLz+sQA5EBOqfKAhfpR
+oD4AaSCVPoCcVEXw4MEkQPEEBaJgQJsKhcxsaAObLMfwkwtHZAANqgiCYU1icU6kpXE5sDAohxa4
+OAWLCK6oyKEpsgGI8KK5TTAOjUCpY8Vr2K2JAUgEpSXS0DcFsMARc8rrI1HQMOnwMtgKnYDoczSl
+ucg8klbCaZw5IjofhgTOwSihEJmTIdaJTFZAZFLUR2bIQLD7JsdLwWQ0QEMAbKWiwP60e70o4vUU
+LxNBuaoiKDWr19dUFcH68K8YxeNi7R4V0fl6MOs8wSpVRVAOhDpvSdkadpSHsRY8hBXlJw0MdyRR
+lGhxAShQIPcIOyFMqKJMwFjKg58FZ61mfhCaeT/HzqSpipCLV8hA0+d6kQ15kxpTMZMuEEiKOUQg
+J7XDwIOjLAYfx2JQJxqXQ0toOYaXaOqERyQPiQN1i4VtaQi9/mJThT1BOxDAuDxOMEmBRLB1CWVR
+V3GT6SZkNhmuRpOJ4MtkChLvH4+VY7fg4VwTC7YFFaW2gKMtqFo32cJD9VpYaM0WRqGWWHDgPIrW
+zua1aiURUsnRSiuXTHV7uVol10LJpVBSeRE1VUtHAy2oXgsLFAotVasEkg7sEaxJEoj9ylU5SQQI
+gN+C4elOkZWcNG6iC/uGYBHBDqXY8jgYsojgRWx5/EkWUYJAQ5HQ7k0HAp5+5BAyAqYOiX4BwgEc
+7qnoc7QChLE8KwrJHxVCAQPHYhIIYdO3YBxU3CwCrM0HnCXYgDsBbRegS7DWNz2HOIWPR8LMBWIo
+kN8aASFgNRpVL1Fk9C0YkpDgWzDwLZbBHQjJYQJD3IF4HZsIegqS8OJRkgDFi+g8l3i9IzMd+lOp
+gDxCYadQBOIefKJEcuivIfeZBrgAPjen2ISCu7DQiEKIuGKAkxrBNgMFGBPIJnhWHStRQ6NnYgw0
+rInPqqPzvgVjnjqPE9kKGgHPamNFaACcnwODj5lLMQoPKBG18THyzawkeBMjq0PKvUTBt2CoRpWD
+k/JYEEYxEABmOnMkWgV8C0YE5jHoSOQSoQkVPJzCi1VAaTyPDkYTMKCjtQdjKejwdorQgAiqjPIt
+GB4M9YxywcULiICgeJpILjQpmpsG8giNRu963L8FQ+LKQLdxXKfQA7nJ/PsCYDQRAYKbpiWbgVMB
+ckWwHe4jgHIISbDNfFQEiKWL7TqU/vruqIPWuQ4J5CmI7TMrohAhDK0SShqDMQTOEA6F0XBymdeD
+XwfUSBSfIz6YUe5blVOGYjUwyn1JzkDvQDWyeJIFmXinC754Nwc7sSCENM6F8UJ7S4OD9g8foxqd
+SiSFEQ6uecXqA04DnK02Uh5iNQqXb8GQ+BYMHMtyecBCbaMY+BYMXMXEqDIxWjys0/iO0aQpCKVg
+fyu1vlmBqxiFOZcL5JycG7REajqVbCvdDA4nMZkHF3zxAhwmkCFATTLhDIAKugTbVI2BbXj9DiOL
+zAqEx48CoKWg70TBKAQFuFC+NMOU92rfguFQinEsPvkWjI4IFNt1BHQXAYEEGIJo9ImDNLI8EO2v
+DmEUPj4CkYnzTITmWzBAESKMJgTRvP6TNYvjAomJkOUWB82XQ38LxrdgfAvGt2BICJBYq8iFmmZV
+jAvnscywJ2tC79kgdAoYODjvWzC+T6TmM2H2mbuGOIXgRfeZOQgVOClqpdH4oBBr42NSA7knFHXy
+WzC+BeNbMCKiCplHqunH0rvkV1TsNPNbMHIHD6fQu1XIPBRjjcaJWo3QpBxgkblQMTh4fb4FA3zI
+t2BQJiUCBIIXxVij0aLwpDE0i2xmx6Yg8o9HUtJ8NRAp/AhG+TeVO3Tog8pMR30iXo6pIl4YU20+
+b/Ec7sTnmeY4JQJEvAoBjXgyEeHiJZDmePFIGoqFA2ZsEBQv9WDuWzBun5bHC2wi6KkMnPaBkxXo
+jZ+3eDLTxMWTyL0px/qxMw/So3KHHkWkYA9yQIh8zK2+aQCRpPAgVIH9wlfYp0Qj0LPb4GidR0Va
+WgTdmZp5SwUu4t+CYarN0JiAs6HRNPHIH4OUDY26SgDcBFGsGpjpEHhQDpqV7bPqUFRA4GYoIeDp
+yok1C3EgzSDCBAMuC8bnwPN9tIdYRQAUtVyDhqPQ5Wi4hwbtIVZB08UaNADEcg8LBo4WARHDJdAe
+YqXvWzAuF9GCkVI1KJNGXjBQjVwb2/qY2vzzO9d6ba32ykzprPTeiq98f1wtnV3bc/t7pdirV69z
+2ul+3c6mdHaW77SRba7V1q85V+zeGD/+KnPTBrbZdudKMZU0T6fvOF93Kmtfn7hW2nTaz/8uvWmu
+9br/lDR/g9rb9ea/PWvNje2tPb3r7KaV0s55Zrf14mlpX0rn/Wxx7urS9mxkS6/N15taXK/N7TfX
+tzJXStvfZW3amLZS+pVSm63MPX1SbB03xdXKmil+x03nU8fvdTqlba1jnzVPfyptWzv9a7ZOfVZ8
+Z0973cqZv5Frxp2pdYrp2+z2Vp/23SmeOVt/LGeejcc2t8U2Y9uzzrfTu7P0PBvu1jOu9VJanVLq
+2f5biz+7/Zzt20b2+n6f2kpz9kk9v8y4vsxPrT+2/p9tddx+La35PsZ2zrbW3oq70ux2ts09Laay
+a7dje532188101n9rez8DXvb78Q555ql49lwv/XvzTRjf0v/KfVJJ7USt+Ns6XSMPd+ZO+e/+C/t
+bOnbnvdafCe1FVdK7cXX59v6sn9mn7R2tpJ2vT2znT6p7DyrnRhn+7eptRX3rFl+no38Pa9/T+xY
+Up+N+jZft/azv6z91tqv9ObPk96ms7rTir/S2Y393kvtrRZb+zfbad39Wnm736ltbC2tuFJ/3Ldi
+SZu+nXja6/fe69MptdTxfPndeMFAVRrX6bVd8U9rc/48/V6fjb8+/VLsTm+mTh1bb890Yur0Mf5b
+Mb2Y3tsXO7aNsa3TVlrp/FrpbNuTztlTZjwb0/HXOWvFjeVXWj/jd2sx/jlrt+2a779/ptbWWb9+
+rbgndXzpT78/vfF1ShtnTLGlU3r+/jndut++jvFbx3jaLL1n477XXO+kdv58/PPme9ta+T4bmGb7
+lbbF08p22qC463+dTfFLNGbO+OanOXue9XO2FTfuKf3ngtFpOF0wHBYMDp349ve0uF/ePBsX19u1
+Ke16qVNc88QubZ6NfKn/xXZW+9LeefPNGFs8r8uaZ8Nmv9TSnz5znXe+xRJf+tb+12rlvd+w9b9r
+vj2tlRPPBsb4b7613npl4+++mOKml1qZ72zYPG2eeGJbr6z4GznfaimeuOf/34utxdWt/cd+7VdL
+Mb1eb/u9U978dLalT2/Oct6+t6f3fUl70nrrbDolvbNha3Xblvr7zV2zpY1nN8735mrf2pqvfDv9
+1lyp4/ev03Gltet7T+pfHdt5cdeLu05r77TetdKb553TXmqvtD7pe7X/dlaJL87zH9+MpaWW4nvd
+WsfzacYYW5ql9dmgfbGl1Lsxvm2vtfjWbnm9Vuy358RuJb7vF2en7Rfn29jenG2Vty31SnP1xvL6
+bOD5dj72z5hKe2fDPz/+SbO1VGL3+V9vrtRa6jbj69n9ZfbZsPZrzZ7xpJ/rpRjTiXti2T8bjyl9
+XPtWb+l30uqPK6Xyc77flM6MK3bq92/GOFOfj21Xeyet8trZsDi32+6MXdafjVrdqaXZaZ2SNs60
+vV6Mp7RPu7/eSTF198Y/3WfNVuKfb//9YuxPX2af31/fdsa1rW3aM+P8dN5KK61tL5aN6z+mnqmV
+uLH7rHhm6fdat9XWOam81q3nmme+dvbtbv9rr8R2Nj53/8VzYvqSztl4fOu30zxd9p0N3PO2T+yV
+Wlnp39z+9eLP7vViv/Izvbin5+6W887bc1acZ50NnO/39Ny5raxzNuxTjK/txz7lvbPx7nNSbGnu
+LOfMOH/GON8q8Z0N+zfPitvelz9nY06fd975OFPZeDYe+3fjWz9fmX82LMY0U59/58vHs4Et/q71
+0r4uL31rK570u/al7re2dVs957e46ey++NpcafZ7sdv6/ZZa7HNaWuu9cv50224fY+xZUjwbtWKa
+rc1zyvmzQWvt65Zet1daPBv5Ttq0Yp8N6l7t7M+NrcR4Nqj/9DvvtLL+pD4n7TvnlZ1nwy++mP7E
+2am0Pxv1u6/tt3VSSZs2Mu2/722fWulzNnKd2Cltd5pldtqo/7NeO/vnlPTr3zzvpbPdUvcOjw6o
+FJXE0UDQQYgpxBBCMyNDowejEkgwKCAWjQqGg+HG2QMUAANTRChQREYoKB4QySJxOCQOhUIhURhH
+gRwFQTDMYtJBlwWUAEDmO7u0qpxIpRPwguzxqD/aQYxGCSZGK1NmYbK678elXBIIWCxPypFdsbpw
+hstrevNnLZfjhWqq01PdQfIVOlGQjF0O7kmyL4CqGhT24h/h67Pdv0QjKq9qeUhZy3loP7rBq9b1
+Oq+XicQCFEo7MRidI78w3E+vWaT5+sWAWBQiwchxgZB4daYhII5DqzqRSBcS0Bmyo1gFilqZLnYV
+3UPoxL0MhQuk04oZS11ujmKZttybIEiS91qx1XmtrlkoPjEjIVCoG+ZooYDx2mA6KCMRhejp+wvM
+UBvXzdXA890Vus2zBwdgilmjoTkI37IS/jKiEMvSjv5ln3cNavE0Hgj8n2wWpdrpukhNcTg6Bo15
+jYgvPPXFyoVrukWNRbwunKQGsXQM030IHA9QrpIxiJ0FYgIzVpWY30G07Eapywoj6sQfKujhviwn
+0AV2jUuXQQ+sERZ8nSentCjqeKylOpufqH3IWod9rXbKobA+N8n26MVv2SznlAd1MKGzCbseA6zw
+Ias0UI+iAo1XNrp9CbvCVzggODVgOIEbLvMRGKtHs0McHLR06tf6QqHo0dTdCchCVWYBOZg0S1pv
+4WdZ2rKOsNuqQHOIn80NusOBqHTZvd8xe9J0A/wM3HuK0jaTCbWlTVCE24HOL4I4MVvT0guIh160
+A7/HMroZE27DYqrnRw2ItJtzaT8TtaY6y+kyFWohlGG5mkMXi35owIdtamWtA4oYLlLiHtesXjUL
+tVcO3RpLuF/zsVIorP4nkbVUon/i4wwbQac2p5S65E1rqPOhuaFucG5I8e49syy3eejmbiXReXCV
+7wRJd4r+iO7URhrdNI7K22iyC7jRsKsJJbvw5MguBh5Z1KlfhDUA9rv0DQju1BgDeqTuSxUtDRcc
+Qixo1ykLCg0ICoBDVEabtV8ncwFjV6bAdw1PzwL4uX5N7CdPXezgccXxFi0KN31tvK40SauVunaa
+8gEsrFYsIvg5LCFsrVjU9kZUxO8WQGotSbDAqOFnFwmeA9OuSSD9rBSNxmvhYfhrmGMDArPqv66K
+aLOb5RQLZfm8RFoiUsnkDuJzJU7BMQruhnrVQA75ZjLhyVvijQOIt7sPvtdtbwSAeDyfoWBEg279
+LSFHDyqcAB0t9r70184qlhxY2ozqHpxFLP7ciZJpZLv4mEny1uj2P49Ei4aIjm6mr8zq0geHWClw
+krwmSCQbC16cO0JIQI3jTaMqeAUPCU0o3sDnaSDvf2U5j/Woe3u8zd4SOuH9ZQe+0faBBJ2VC7XG
+6lVPRxO0DnsknoEVR8L2DmQp/E+AhXFsTYD4fTSDzV9NAJarJgOrc3ZXHGwRINgNdYIVqC7wqNMM
+Aq7pcUMX9m1HsJNrF+oYUA4VtOJMtRiIYwtgFFwwGS8XWqexCj3w41g5RI2RkEVMW6LohS++HdDP
+RYCNUfvtiopQc+AHSHNgmI9DyFFxpT2MJU9VDXXCIiHJIjM0ppLooV5Jxh3OCxDIC1d03Kk9ou//
+4sNLscoW2xXDnvHSXrpCnJf5iJ+pT4e3ltlFLNSU7RTQYbribiGWMRIii7TJVKRgayyov02e2fwH
+YeB2oFinMThmPAX16TKVxbNmipCTAFLZfTJE9ChxTh43hCBEj+lIAEYiVnHOzDAXtajI5cCIIxNb
+LvnXd1isZO3swB5m7bn31lMgzpOpF16LMyfbE8cKMX9kQAwB8rwQ9AtxzSL2i7b3zntp6nrU82gv
+Do7iaGjH/jRJFqtDLF3aW6F7o5eSgVO9UgAMwGGALh21w4glmj+PctKYNhN95KLY/AhJHeIo/C90
+AC/sxxZzcSU2dYRkspzfcZBa1T+TngQ3HV+iHLKq1+UTxyzf4BtLeFEW3ysqvowtazQdHjquEe/k
+iE6FUH3CY58vaxNb3sBBVMvUzWqeYMsd5ZLOEJHjmUzFQtHT8QA6FTephqRSUHWTI/SKycutv8Cy
+evN59ylsQE6NOm7SNPw+MH1kH57pLp53+KU2003ZluFd+vUrMst83ZtPbIy7oI7BVDL+9eXV9xsA
+B68/9xnUlOxS+6oS1swBYR/pstcEeKgYdNkJKLmsip0RyebbH12O9d/+gED/HWiwMAH3Ixlynj7i
+EkUGT6oIAmImIu1BZv/AUAS1TO2aSSNpot8WwtU00D0VcaItLnymIoQ+uiXWiKMDdHOO0MqJsIh4
+G3Drto8Cbyutisx1G0bibeBnHvB126dl7mDgbV0NbKNuY/Z4mwjjBqnwwJBDuKGYXDNoUKXtTTjI
+Ey07ggaHs6r+S/8hiID2gLDV+Z3qEIELIbOd/bmauh5R3huSq+G21fCAXO3Hyshkq1n/XK0j6vm2
+GqQgVwPG+bPV2gVyNbm7YRQ5zCdXW5CCgg7TuoxdMoiOegsV9lxtdyqtrTZs52pyuBTKtlp0z9UQ
+9WhFyK9u8VytC1ztYqu1n7kaF/OteltNANwSd7layK8C4Yj0tfJUa3oNt6+OgEea2mUmARaiOKzT
+S7/y1JZV0m61t2St4iueOPOHa8tel4bMONeF+B8PM9C+Ra6oqM0v6li+o+XJilM7FkcRuGoS8zHr
+TRL5MqJwfBPXR88iB8k0iqIKqKA2kbQAaJAT5vdVgoJGSg3zazI1Z09HMpJ8QF1I+fVn44IvQR8b
+OgEAPgDjjRaQBixonkRqPNIWhuftUoEIK8cCovnWRvdePOcN0aY8sQkirnss1LFog2TlGY/TRPIz
+QVABpy+IaecU11UJiEe+9Y9AbexykeDjXH6bUF5pGoRm/65IxLg+1QffU/tev4ek8VtqtiviNpIS
+aF48HOnJMxIc9McbXFlgaAMqJ8BXybImreLCLMEXJb62H4Str8STESyeWKJFYEvttMo86j5hIzam
+xe9zEf0bRZQiUIftfBc0JKLbIBubYzOUpmPv1CvGjS6RpEOUuVeQEEvFEP2H0Gsg1nvegvgMQiIp
+50BJ1oaRVIyi8ENGqtihX4cR1nMvBG8B+tbyt0CKM4mhQNKh8ROa2aln2XRCM9PRzGJwJRWY+KaM
+Yig02pj4zb+Y28NZHLKJaOdy4o9xaRGXAlb6TrGf2opYMtw6M5lTiPM2mW/y/gbQe3flLPy5qOnj
+ii481xQk5bdl8bnVyoNqdOK4ktxYhoBXIiuhYjjxXvH1kuad9QXaKWg4bIdntVKUSHwwxYuEincy
+8RFbXAXWcGzhzT7x70cWr41Tb2FN2jH/1Pl1uGkW8YJKC/1qwLWLrAksi+OjU0xGZ9hMhs7znASS
+KQt0pD5dagnjvdM+7oom/sppjCex3nufQiLwjv67NENf4J7Ad1xNrHHZafD075RIqKcKsTs+6c09
+JK+0cW/p58wS4k2hxsCcBXbRLwkt0sTKYPo3vM9DBknzruWGw+MZALAh6EwpKEDAN4mLPCB6Sim5
+X1lcKWLZ9WQgo8EZ92+oHPoJVYutNViwqtvRBF7vq5uXdnzs7qBYl2VnZh16IKQ3nFO/cDDFQGyv
+LCsNdkNdsOYdtcNuexdR/twld8CmBeib/E06qgiEQW2s2F3sRRLH2b1JEtpVTkhKZCAy7FqZSGgP
+IewmRxZWZmiKDDfLotAkhgjWhx6cWEUClWKHH55VGXgZzbswaRYlVBZa9lip00HzL/FpX3NHH3J6
+1Qfh3i8IsaoXBgKBKl8Okn0sA4mWmCZ8ulCiBWaB+7pzlTNMmyDd5yp229h1KB7ZyZtuevaaxuRC
+ZZdKm9YzDEBFOt2xwkFRIXohCL9MydSXB7wdCbM51NqVUFPCVwRHl0Dxk7m5DY79MX4k9ai4LXPv
+ooSuTLsIM7QSRd4aXbqFX5KcU5ccHJESyVEJYTaTTBN1RhzUrBXH0RYAofaOZ/cW25rKscgbPUqK
+b2FaS04xADKjx/XdhrMIu2VfchV9hDKdNM4v0z6/XuHTR5Rp+AFAOi5Tg7kQawk1CVH2kiFW3mgo
+U4Qi1PAPNUg1mqenOyjJc/Iq6ZQLMK7UM+X2ZepnhFrvoWlt8TALns+XLcziOcJD04mRZGNadDfo
+DF1IIYfLVA61ahPvFpDI44OGxpukajPjJf6AnHGZRycBl/vjngkl8AoPmOO/FYUEOzg3MbzF04hm
+mOB6TIUqdXPp7lVqheOFvjdizgHeobG5OUGXONu+381zrzo/pUXuk/uYsdDzEvGBtIQ7ClsVk9UR
+OE3EIBe4VX0yBF/JaoomkAz0SBkY3Z0Q5heD/+ReONxXxsVVNfozb6CujAAAzmQtiqUJAKJa1xX5
+EJAqdEtPQ92RJOFNtutT4scrgBXcDVjYelOmq4EzikSN1yHr25DwZk/EM50yCCAVnnqSlfqeLWxP
+XSztCV06/J2uDFRs0zKlYSISYJJXziAzAJST7gMtKcqbZg2iLfgmVTqxKqQ7eyvgS2MqHrbJiev9
+vnLEedaTHlabICJNJRuwpMbJoHd9QYFq4JSbqfXUgLlR/xVivDIvvgCxQxd9P8RUOkMBF8nZ3VMp
+fhtBWIu4AZrtD75CLK6L4nrtHkmqZ+FlA2n97pgevLwHveMjYUEPKpttWs/ogUiEQs4dDK2WCNgI
+ntngzU6KcVFxYjfv0f5fytygg4EwIhcddPIRE+oaJWl2JHVBKAjwixwAuL81srGrd0EjRHzATZj9
+mGcb/xUs8nBWAtdArvey4S7QAp13UJsajieKEE+8pbPETmchVxcmLUpZwGKH+4eH0uoArkhOlWry
+LFwa3DCVhRVllqy09CCrVh/DdIo9b6++6O3FD7IGrq9OPmgpppzVHp14YoxPPogqiBza9byTJctu
+OtD8KUeV58+O9ayat8x9n6CVSTLt39VwyAc5owaqTB9W451+pmVya9ZTUGnkXxPA+2HZeBfdu4jE
+Td7wlwN20anfarHhXw+vW5UYaPrH4f7wr3rI0VdJRMzfIf4Y1ZtkKBxyMpLadtIQGw66Z9qOKZ1X
+CcBjmR9G+JsJhwMaTQUKAwCKHzxFnzP9+CRimDyP2mSacpkbUMJ41Xb+aXlWpCNWXc3nGGX/BlPp
+CWdqKjMt9d6HCJQ345zpFptt1vOCziFUE65ySugmBVEgQYBAo6a2bFylKrzhBwNzqPr6x1ZXLhZu
+fCunAXOoR9xGRGCUVXMIePJTuZBeLOPzHClmDao55FL0YOy9QomDaaCOpjn0W9czFPTYqyBziG6f
+YQGMVTN4sxZ9+8vuHELoRKXjUiN2iUKxOZRtl5LT1GyCAF2MLezLOZTY0fnK8ACQeYNWgzdvHwT+
++N1h9OUcIsZjeaajDwXxzgiiTl4XWX7VeabcF3ysFmFZ2VV4XNYC913Wy41GsnQM7rYWpqKx7kmH
+rgEYAFHW1eAna3mckvQWRpKUQaBrPnSMngLW+Qb2W8Yw1Ejw5kueFA3T961lY5MuluKMM4poteal
+LlREQgl3Wi//k8wXXYk1SGYYuZh1QWD+9+3qGtbKjDyvMwUorfjFZgJNHxoA4pRfLR+qr14y5mCc
+pBQgTVLGpoBZGPXnBla05z5WO60NP9Tg2+VK8CtuDwE3xE+BZRqQ5XUKZ41MpQaHsl0q2fisu7jK
+/oASTCwEPkL0U4DI8UcpQ4CbnAPL3IxcYx6JYwAhbX1aY/1wjRVNtYQoxUB4l9Sfz2eX4D/WfyJX
+OXklHiNaJaGQoFjFnYJ4VxyazXjjEnD2g9shXr6xqlZo0prqIs71eP4Sr6P9gJ74ksI9OLwz1v1E
+aDChmqx03b01Pa6/HcAmrFG/sx1uIv6L0a4pS0cY+aZo+Czg0SfjlvkoPbFbZa9owgLJLgY/zVu1
+jd5ebZ/0f3m3LZIwe9lCE/8zROJ+27BROQjAw8kTnXhWTX1//FGPWeXP5HtuTA151+YBoanqGuHI
+gisURGoADa1AnYRUFg4ieRUKwiz9o3qfM3gJk3cOoGAfsMKMW6AWlaUGjAF65bDHjlcOXXB1EPpy
+fYr4TLeuYo9nUwgfXAoM9JNAukEk/JbGwDzAjCfXtOF4lS7i1rSpD28tYQWkSdKQw2gY5zFmfaiV
+UV3xwQLnOrl+ul81sBAjxQ7ItUq74FC/CXA1HEBo+FEFdFYirSAOw47r1lKMm42QDBD+fg4Af/DR
+SKjTamHgkakuk4Qj6dOVtRENPJAb9ZJ1vBHuWYTBwCnqBwRuBCLYS1OP3TISwt6VL4mgXTbqXVRc
+sumBApTpc5ueZG+ZUPiY0OOiOwaHic4UvSekPo/Tk0XcEOExUGU+SrwNKNydtTTOy4Uk5E2aFseU
+wxjfHooU0kg47MSgNZRR3yoMLVWsKWBUbQkeHwd49PJiB7g8Wwtu734S9qBRHo1HpQHgmlLXxBnu
+gytzsR8BrdEginhLqbTtuEVvhDZ6AQLgsOjEme5HJvQC5Po80xSkhR6IvGQ2HPzxIupTSg2R9DLF
+OGcL2AhxSU6J0toGoBkGhBmCGwBhG2ekAafrICCv497VL8Q3Raoh6FkBOviUHaIKDAIWwSGYytOY
+KJVtZCd1T+M8Qc1mau9FAQcCIEHOL/zmOKM+KYHwtKo5M+fRbyuqAa6sV86wLTXByAkCa8DT97r5
+eNvu43x/JRdeggyUVnCyokkR6tL40iZUm5Te+WEaS1gdY5UG8ysB4ErzmKJ40KAn/Jjk1nIY+5JJ
+7pdUPYdg9fnhpdd5dpltiEoHodWBZTQPlR8qVU9Wb7yEF8oP2ULonEMa3PDPd8v3Xombp6nu9CYu
+9OVEL2JlOYs9PTOigIA7AdaooJJuSh8yJ7UpEJcvvVr+TC0sA96poVqz3G1ylJmw52BYpYlf/gfa
++LpT3V5CT/It+EkicZGcFlFZVs2kR3wrfzPSRM3qE+qxVq4y3WbxR3kvx5y4PjE5OCZ9G+tKN55+
+ecG0FY1YLsgi5arE00Fq8BWzD1K0QTTG4AqcFBXPVtpmhM3AAQxquXWQXQJjJ1tjXArZGMVYbpej
+xNxJ/9QBMiz5FUsoMMs2xbOu70NDvkvGdISrpAwRudD6Fw2w8Sj8b6Mx0P4/hRJq3IPGWqnax9pI
+Krqlv7+m0lws0ac5wVy5Io2kYCOPutgEW+2Xq2Pog/6ySIzI6dyxZJIr2q0wlINsyhCIVJePyh0V
+YV0cI2YNlC12u//UA9C5av3tYa3wzjsBDj0ORgF1EJNb5RHvFj2GxvGqud9T9l1M0zbQklr4Aoqh
+e2QizvzTcKBE31iCRfgHSOLDOIuYi28gegzlbdjvMJd7u8f3aJVgYlz5fRk6wduOWXYAJ1oKCY10
+OlMyOQGYCUCc4WXubzalqUPYv2T/IE1+dF3nML1VoeYpC4MXtgJ0pZZJUkFyODASEl294FACwmNf
+DMjne5H33MlxR1vAc14xStYNMMF7pVFBcGROqZieRoKrxSoBIJ2CVglehob4YR+YqrdaWD+L9HS5
+c5eIbI7P2Kc7AQ/H4guTTDc0RrkN/uKS4kcNQko3VijaBWsgoHqf9LmgvZVxKrgK1wuG7jOlMyKR
+BBcX+/tm1xL0KjaUyIkS+1iI1Lbm/bWafoR0Omyh0blgjOYdij3sY+Guu9MjKok3pKJJEmwEA+ZV
+93ntS5Xvggir+EAO3gv+CkBxeq9CfWsWslJb7YaWEFFj9lxbhtXJr31LYO4Wv6U9bSVc6kX0t6Zs
+p+lQeUha0s08p/UVrcImgXZFGjqfWdLrFekQrwyxEk/ga7A5eZh98yHZR8ke/MQp0z0SpeMHrQXB
+2gojhuIoeB/TiWWrJifTyAGjYqc+ghLe0dAiXmafsELYJuoriA/UNWhIxGANAU5poJ1xGtEa7Cfo
+07Z8PPgS6STZ2faMOnx99qaiTyro7zZ2tsM+LTuicwbhRPnUsCRnRVhxhqVfD1QivChrY4UTN1Ti
+bJ1ogSI3RoT4ougE9B08qyoplY8mhU1WhvR7EwfYnqngJJ93RO2sTFx7RTIWRye+EPmAWtEm7lIV
+fkVSBt+aeeg1KYEVvEVFJ6lqSjTX7fNgJPXVSkcTvxc17eNkfHqNhkz8/fMVTB2+r/9sKYt70Amd
+AAmggt+JC0PsUDp0p+LEdSJaXDr89V2ly4krYPHjR2rVxAej3+00/qKY+DmMWbtWjr/M4Jr9I4rJ
+y/eJ7qWeeORY7jkC9aZKTPT9b+mt8UzUcYH/I03gVTMu/feBOUUMRtNtYzS71Kh19Ucj/3YieaMR
+Ei7iXdAsMMdmF11HAlcl8L4qIFammnfJZp3s0Cvt2A/Kvw/GAubyMxVvYcf+73F54lXEnj0ya55a
+/VdDYUUi8Kr6N6MzsPWMwDUPUPE9A/92z8B+39FCkHbWx2Gt1GloTgcXR7peqYkolZF/sy3mXOCS
+drvxkftvpNbhNMwgk6zVbH3Z2L31IlNnsJfWQh4iNbKAWbHuN9HUsEyCPHb7MYSU9Ed8JHdzOiA1
+E6mQfYBu3otsPg6hr1trbXL7mE9bDGmKpwLH4SN9Ra9lyyOFVPD2qQ1PvYI8PY79dygByJsSiPUJ
+tESnx9uWkepliA9UMdoj9y6RnKrRdwI3+QYTRS8C1xXYjqdPmceEA1dbuuOf3bSCSjLd2VHZClfC
+wPJIV4KlkGRXLITU997tSXe3kgTcRJoKI1SZMrs12pJGWvk3mGtTkf97EVhSU+ysOXgLnCJE1Z4G
+SAiIgtrcIT68EGf7Y5ikXJBGPn0uAbW5aaytR6t8CfAVPbMd8DsfFFENkswwckAQSP5X5wa75IBV
+yOPrWbK5+xwJHpdU2sKK2+PRAAHT1qVvEScRJ6gs7axMJKKjy3YGosj0f/IfaOZywYe7Uo3nFIVR
+/fcROY4/kjdxqSk+OYzkh8i3M42WK4U03U/QxV1jBUc8nN5uOLgjfIHgWKKoIRjU2b7ucpul6LAX
+tkPsy7QMvpZ/t6iGz0ey7q0kscClnYaoEM6kV9R6Tnwa41/WIK800IdMc9If9Dwg05hRHxK2egAI
+8jDkLKv/TqDUQ6G6KuJrRECOujm4jrSGxKDkND76drzI8xeY4c3wzT0LXWXOgCFP0jrPf+piH6Cl
+ueEW0uTMkUN+aLgkE7djeiV6kfRnTIzarFvyaYYfOvjYF++v0vGY8v5VbtiJpn7bTR+YphRjYEOX
+BscShjo9JkpjLfUA8oAWKByCDWtl9c1GdUPdGf6rgMu1llLATErqHmMpllTaxnMlUi8pAGorOVfe
++sw24gbvkevlJGSdRnhSbxfx3QDXouqt5vVH/gRA3+T6zQ2uWU+6V0ka+v7PwiUKrilteY8QIqpW
+oUk0e8/5d+ASXmqimVCpU2WmKSpOgpYYHl7AnBMleUdh2goUzzPztk1AHW7YNOU8wSwU8+ruM1eq
+IiRZSXdPRG3CjzSdnULm5BHBDX4yx4VH7IvblxJSqf7R0AYVcRaBX3crFAM2VhpDCY+0QkZD/bPV
+h/peSeCA9ZRUwKs/Dd9jDQeYu8oX8Pi0qPmuhTfrKAmk2230Te8yKNs3fgB3adKVkN1Gq7VVv5+z
+oOO0IKC76tbXs7MRQxb1ebJ5byJFjZzmljPVhXdjze3zvdb/vthz1uH+m8Bum4BcEz7Czl3ZknKA
+9KLW3aYXctmn1eG+SJwB7k7z366gBp6K63Cryl4zcK90O8nhBmZctiGnuZLLvlVq8GuvpL5ypQcA
+utNGielArjfN2PJmok9V3cHaTIsG8WNpN+Uy/3/0K7RPzIi3UI6bjy+xxSfV7u+y0Ni0DxlkFvUk
+pJC1qJxbFcbsmiwTg4tvbvuVECWy/nrPOK718u0Rp9doDVHlzgj0+MxShO+IsdS3uZb7jIym2wnU
+uEeGI3u3p3ACAKwaMeuOpozT4YqcoWFIyJQEAUjuvSLCE9BtO3+u8FZhRREJt5C34TOScupH99fK
+BBCTx3CLUuUtIILomHOcQB0Go1qCoqn3P94k7QUF2sbPccjAjZr9xaUwqy8cy34oE3Dp1uSUEQGl
+q+fq5WJvFJFcmQCE7DJuEqJgHkw4bI2xfq7jlZ2Qq+KO1Sv7v0tAf0UiTTcKdy0psfKHGDCG8/Gb
+6ESuGFPbpBGH6qd1RxNU8MskokH+rR/8ntRzZW/55P3otOpgD+KznNs44dJcO2WKNjXVDlki1adt
+g4hcG2NCVmcGuo8mSQwXl8izw4d+sqA8uT+jT0lHujnv5MYFA6Ij7sREQug2qj4gzAzqIqMWnog1
+ifvaiKUJe+m026ni1U2jeJT7QEc9Rp0ip7CnF3aP/I7jfmhtXL0ehTi/I2r/4jZBod8YSjtJiq/z
+wAlM+XAOgvJHbzKDGRxcQ/FR22SBMcp7US8zT0NUMJtHIqFhfHqbkeJHecoYJvgKh4y8zYNclQGl
+kQaOufASksSSo+NZDCkddEFSxckygVFXW5hoIfbcntpn3MkktHOqA0zR0ksw2Uut5qYhyzFxEX9C
+fUDKx3RL/PaRkluIZyrlBVC5olCb/O1JUNUe2ZoYiaJwm4R49y3SLehABUm4fu3bbf7dIDvtjgGW
+uH13FPph4oZOsx3Y2stqyL7Ckn+WQPc+NIG84vxwWXNjgCJyV5wcufXB+QvFNdsi4jGrwvkRHD4z
+e6pFDPrdLkXg6sNke+l36iJlzLSLxzacH11g6p892FK5hkCTKbOBsr4kDsVOMKDCubmR8DP84Syf
+2GIBtgChA/bgjt3JTAyCPeASda70mRjQiJ80fU4EOF7gwGyfcG0dMMLMi6CB+IhVbGn5g5Av2wR2
+iCv5bVhgPDOjrHvACMYjMlbWOsqvrSm20t5YO+d/fV7tcdzerMrUlQ7ng/aWbKfZ6hRU0N5FYeib
+b+/cewtXubgR9CvyAWXQlNPeR3geviSsrWWRuItyAWJv2O0dd2uIDIEiD0t7az9ghG5vxftEaLNt
+CwhTx7dEfFwGZ1fAyAEWtSfPEE1/v+A0whJJKNkbcEGxJCVDsrdEk4KkoqV4vaO/HI4HyTtWpFr9
++GGXlb1d1tyker0p0GLwzOnsCeIQMoZIumgtyUpFRa7srbWNLshUJ3uvtK8lWsa9Vn7J652gpSs/
+6LHLvTIX9LjDK+T1m5J0ZSSwO8YjANKDVkHWNbIRnmw6JlfOE6PKO514TwC8BmSTKWcEh8hKJyKo
+HhVmFwYI7cTyK3VxPDBq4YODBEipC3QPfTJAnIFdnt668IHDbdzjd35Nnodgf/F7WwJrOUtt6GKa
+YxE106mOB8su4IPbn9Q8THOb+gOUoa0pN2kuWREcVPuxypA2dx9tqF63CiwuWnSOwTWoyxHtXDAN
+K5NSaebpnvlkn0wjGzzbJvGdNwuKPDRP8NlgQDAFZJgEafMcVOoGhOTXtac/W0s7hamhhzfOax0v
+J7E2zHAzRhV/SKYjsDSO4X1NflOREeLtJCNODEpB8A8fC/CyUQZjHVj0Nkn47650AjwZMGZrkfwy
+XbWZojT/SA1mCNf10STPOGHuSdcUwBBitYbi38i7JMKYeYq64ibr4Yb0M5LKj/OsJla+BvX6l2B6
+quVz8Dp20cQM/jHGR10wIekxA8srKaPO0iJwHXR+4065bkYl3I5wdiJsCn12nfB9oHMz3EHBobQP
+41nXfn9MgTMcS8HZ5NjCuHTIBM7O2Ll0ZRy9Qh1+1WkJTQOO/a69t8pumDFuCJw9Cg/BZT04e/mC
+DirJOruu183uIOysI6sDnH3zbdFg+2bJPRrN0Kxu9teBhGTgbLeid40fJ9SeqgQogmG+RAAe+IGs
+wrK78GIyy1HUap48QY9vb5sC9/PRIAet34qR7xL+hXqRrlN4ac6FfaCEvA1aC5eK4lCqz1cYHPki
+OPKhlralC4Bz4Y93kYf5UP3eYZPYZbVu08FCcjnmScCzIiH8SuYjeo/yeBcMCBKDqfP4dSeZ9Y6Q
+m7HbEK4UpZrJOUZxBHDsqDC/zEuKKlEUu6ogSLLQus7UTxTMkBAsJbd9n2FDBZddfgNKsKytQyio
+d4oCJLgVqFtAme9o/t1036TPL2rdyJhJP5WGbiUEUJ3xqBauGW0dTfc0O8aUmtYDW9hVMY6FpDRV
+i4zhsNGo0iIdlHP8MCHhiW+V0e1EsxnRL9MkfM3MQd39iW6Mt8fjmeZpO0pd9njwIOFQWmaIaKC0
+bQV5pYfgqSX3mivWmhPSg4szC5hW7FDLFXkEGX9SZNykR559xvEOeyrPALypj5E2859vhRqVMmyR
+CkLn/oyZ6yTo06i2GAHNc7F0JlxUr4owBrX/MK/j075Z1Qr9zickgENK589T4B+zC1y72ncGdZW7
+WCHbSypl7Opj9nAPFfPsDpow6uEuWnJ6F3vcc9aPuJP2ILBdJ1yawZnDggacIHZeA4JtXvD6HS88
+lXXW2mEX9XVGFlk8/VRvTkxo3Cgmz9526h7ee6c92HmdPUyR9ZBdOK9Ffm6dTV++RPtTdzFrD4hm
+Vc+JrNhm0CQu+H4TP7szd/Ui9r31skuASRPomauKUsSJLjxLTlyXDy38N1mD9RKLbQwPQ65eQG3u
+JIi7UfR0zL9a33nj1Wb7PNkluIK8ANfBquTMtHLdGnmqMqZHp3RtSFRj7dekcFyY9vk+eNOXyoZH
+F09lnhTtjDEPMTqY22D8Thr1V0vWFymJV9PMUZMXg4FD2uAnEdQkb+B0VrFioik7xkN+FAo5eOkp
+qI2tpxaruUywbbRfj5V29zGU3fGNh2d6k/eGGDirBegAltIo3RRKeE9iIGWdZC/mAhX/87G8heQm
+WlC8cRIOIUBj2v0KOfiK3xGogY58wA5JuOH2OmWKB3kOYwsSCcgwF8IYQHD+Yglq7TzSgQEZVWaO
+23qCj3dy3xhPqQFp0U4PkkSHlrcr6L5BwbdqSe7DY7GVi0VtRMNU0Mxiq5z7LE9CuWczAnUBfnuZ
+Gc0y/JA9LnqUvgPf2PqnPGMNgPNbncIRtwmToOSM3xQpq/Kv1yBN0GdRM8qGEZLx+82WLt3uzFvZ
+jXpm8+N6q+Y4ZV+xtFpAMWDR3HYaOxrLDTSU5eiFWF2DIGKQZKrP2r4gcgCi/EeC7kabMDACFiZ6
+SwXq6O6zxgsxWNLwvlNELttpeJ5Vn+cl0QDBJPwTJOS6EeuISUeLx0HXfwH3m8pXsqmAgijw1oMH
+HGqrrul/f8uTU2gp6hXFpZib8pCKSoKKinktM1DEhIVeM5GDqQzKqO+yCg4Fg4IJNE7KIWdoqt4K
+KfAf29vPYvGsycbDawc+cH61WHq09l0n1HK/XH/W98wVGgsotlmpgeLvRFA00g//UuhdSmSQabu3
+feEHBRVKYfIvWSjikAqTHkB652lHAk7TK5UW1+gT8wD4hMGl0Fbu5A02ilw8+h6cjC6gvmuWlT3d
+pFDvqkU5WBJ8ek6sYMOHBJQ21hM+LN0GZvEJC2C8QtqQEOJQK1gDq6FoWw1G5WTBzCWFmTZNyJXE
+QzOdl1knsdHmXUO+FezBTxRFW1oJcswuuqDkrDA5I+dZJ6DwMATrFx48gTgKxzbzV5Z00RAmNwRi
+wRmykx0=
+]]>
+    </i:aipgf>
+  </metadata>
+</svg>
\ No newline at end of file
diff --git a/horilla_theme/static/horilla_theme/assets/img/icons/wallet.svg b/horilla_theme/static/horilla_theme/assets/img/icons/wallet.svg
new file mode 100644
index 000000000..c351f8619
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/img/icons/wallet.svg
@@ -0,0 +1,53 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="890.5px" height="890.5px" viewBox="0 0 890.5 890.5" style="enable-background:new 0 0 890.5 890.5;" xml:space="preserve"
+	>
+<g>
+	<g>
+		<path d="M208.1,180.56l355-96.9l-18.8-38c-12.3-24.7-42.3-34.9-67-22.6l-317.8,157.5H208.1z"/>
+		<path d="M673.3,86.46c-4.399,0-8.8,0.6-13.2,1.8l-83.399,22.8L322,180.56h289.1h126l-15.6-57.2
+			C715.5,101.06,695.3,86.46,673.3,86.46z"/>
+		<path d="M789.2,215.56h-11.4h-15.5h-15.5H628.5H193.8h-57h-48h-8.9H50.1c-15.8,0-29.9,7.3-39.1,18.8c-4.2,5.3-7.4,11.4-9.2,18.1
+			c-1.1,4.2-1.8,8.6-1.8,13.1v6v57v494.1c0,27.601,22.4,50,50,50h739.1c27.601,0,50-22.399,50-50v-139.5H542.4
+			c-46.9,0-85-38.1-85-85v-45.8v-15.5v-15.5v-34.4c0-23,9.199-43.899,24.1-59.199c13.2-13.601,30.9-22.801,50.7-25.101
+			c3.3-0.399,6.7-0.6,10.1-0.6h255.2H813h15.5h10.6v-136.5C839.2,237.96,816.8,215.56,789.2,215.56z"/>
+		<path d="M874.2,449.86c-5-4.6-10.9-8.1-17.5-10.4c-5.101-1.699-10.5-2.699-16.2-2.699h-1.3h-1h-15.5h-55.9H542.4
+			c-27.601,0-50,22.399-50,50v24.899v15.5v15.5v55.4c0,27.6,22.399,50,50,50h296.8h1.3c5.7,0,11.1-1,16.2-2.7
+			c6.6-2.2,12.5-5.8,17.5-10.4c10-9.1,16.3-22.3,16.3-36.899v-111.3C890.5,472.16,884.2,458.959,874.2,449.86z M646.8,552.36
+			c0,13.8-11.2,25-25,25h-16.6c-13.8,0-25-11.2-25-25v-16.6c0-8,3.7-15.101,9.6-19.601c4.3-3.3,9.601-5.399,15.4-5.399h4.2H621.8
+			c13.8,0,25,11.199,25,25V552.36L646.8,552.36z"/>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
diff --git a/horilla_theme/static/horilla_theme/assets/img/logo.svg b/horilla_theme/static/horilla_theme/assets/img/logo.svg
new file mode 100644
index 000000000..278dc54a7
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/img/logo.svg
@@ -0,0 +1,9 @@
+<svg width="75" height="58" viewBox="0 0 75 58" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_1_82889" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="75" height="58">
+<path d="M74.0916 0H0.908447V57.5401H74.0916V0Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_1_82889)">
+<path d="M41.6392 57.539C55.0134 57.539 65.8553 46.3499 65.8553 32.5476C65.8553 18.7452 55.0134 7.55615 41.6392 7.55615C28.265 7.55615 17.4231 18.7452 17.4231 32.5476C17.4231 46.3499 28.265 57.539 41.6392 57.539Z" fill="#E54F38"/>
+<path d="M13.0046 44.7348L17.6093 38.3707L27.4766 22.3289L39.2361 7.73734C39.2361 7.73734 41.1424 6.76669 42.6064 6.54424C43.0627 6.47491 48.5464 0.422775 48.9383 0.518107C48.9383 0.518107 50.0888 -0.0827743 51.4044 0.00966879C52.0622 0.434329 60.6138 6.71469 60.6138 6.71469V9.68443L63.5754 15.6267V16.9007C63.5754 16.9007 63.3291 19.7867 59.9561 19.1078C56.583 18.429 51.8131 16.2219 51.8131 16.2219L63.5726 47.4532V53.1385L62.8336 54.0716H55.76C55.76 54.0716 54.8587 53.9734 54.979 52.4943L54.853 52.0349L57.0729 49.7441L45.4785 35.2305L25.4135 43.2095L22.3708 48.2159L24.3443 50.6772C24.3443 50.6772 24.5374 52.6011 23.5213 52.685C22.508 52.7687 21.9033 52.7427 21.9033 52.7427C21.9033 52.7427 21.8222 54.1583 21.0804 54.2131C20.3414 54.2709 14.0627 54.2131 14.0627 54.2131C14.0627 54.2131 13.1586 53.4216 13.1306 53.1385C13.1026 52.8554 12.9934 44.7348 12.9934 44.7348H13.0046Z" fill="#070707"/>
+</g>
+</svg>
diff --git a/horilla_theme/static/horilla_theme/assets/img/no-chart.svg b/horilla_theme/static/horilla_theme/assets/img/no-chart.svg
new file mode 100644
index 000000000..eb9265704
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/img/no-chart.svg
@@ -0,0 +1,3 @@
+<svg width="254" height="254" viewBox="0 0 254 254" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M253.78 127C253.78 197.14 196.97 254 126.89 254C56.8107 254 0 197.14 0 127C0 56.8598 56.8107 0 126.89 0C196.97 0 253.78 56.8598 253.78 127ZM57.4031 127C57.4031 165.41 88.5135 196.547 126.89 196.547C165.267 196.547 196.377 165.41 196.377 127C196.377 88.5902 165.267 57.4528 126.89 57.4528C88.5135 57.4528 57.4031 88.5902 57.4031 127Z" fill="#E3E3E3"/>
+</svg>
diff --git a/horilla_theme/static/horilla_theme/assets/img/no-records.svg b/horilla_theme/static/horilla_theme/assets/img/no-records.svg
new file mode 100644
index 000000000..1d421311d
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/img/no-records.svg
@@ -0,0 +1,173 @@
+<svg width="302" height="199" viewBox="0 0 302 199" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M268.559 60.1919L264.705 78.5826L262.226 76.1997L258.005 79.1648L254.781 75.2199L247.547 80.4025L241.369 70.2155L234.473 74.1949L231.74 70.4793L222.986 75.3405L220.352 69.7837L226.487 40.4932L259.387 47.1873L268.559 60.1919Z" fill="#EBEBEB"/>
+<path d="M259.386 47.1875L268.558 60.1905L257.148 57.869L259.386 47.1875Z" fill="#DBDBDB"/>
+<path d="M263.885 82.2589L258.233 109.241L213.922 100.227L219.531 73.46L222.165 79.0164L230.92 74.1552L233.653 77.8711L240.549 73.8917L246.726 84.0784L253.961 78.8958L257.185 82.8407L261.406 79.8759L263.885 82.2589Z" fill="#EBEBEB"/>
+<path d="M200.459 79.0969L155.3 81.8509L151.713 24.7207L185.243 22.6758L197.556 32.8525L200.459 79.0969Z" fill="#EBEBEB"/>
+<path d="M185.244 22.6758L197.556 32.8525L185.928 33.5617L185.244 22.6758Z" fill="#DBDBDB"/>
+<path d="M172.725 61.1136L172.55 59.8251C172.094 57.154 172.837 54.1671 175.192 51.0416C177.315 48.2781 178.467 46.2669 178.34 44.0276C178.196 41.4891 176.483 39.8859 173.299 40.0117C171.48 40.1121 169.494 40.8208 168.285 41.8363L166.895 38.7672C168.494 37.4807 171.327 36.5255 174.004 36.3775C179.812 36.0569 182.638 39.4462 182.853 43.2284C183.046 46.6134 181.265 49.1579 179.002 52.1289C176.927 54.8397 176.244 57.0747 176.54 59.6045L176.664 60.8958L172.725 61.1136ZM172.01 68.1431C171.905 66.3014 173.094 64.9375 174.861 64.8399C176.629 64.7422 177.915 65.9696 178.019 67.8113C178.118 69.5534 177.033 70.9614 175.165 71.0646C173.397 71.1622 172.109 69.8852 172.01 68.1431Z" fill="#DBDBDB"/>
+<path d="M59.7872 51.3972L55.2427 49.3662L54.6125 50.7377C54.4273 51.1408 54.0258 51.3984 53.5768 51.4178C53.3288 51.4285 53.0807 51.4528 52.8339 51.4897C52.391 51.5563 51.9472 51.3805 51.6863 51.0218L50.7968 49.798L46.7391 52.6631L47.6286 53.8865C47.8896 54.2456 47.9157 54.7159 47.7096 55.108C47.5944 55.3262 47.4917 55.55 47.4015 55.7782C47.2385 56.1909 46.862 56.4826 46.415 56.5258L44.8945 56.6727L45.3846 61.5664L46.9103 61.4168C47.3576 61.3728 47.7808 61.5922 48.0237 61.9652C48.0897 62.0664 48.1585 62.1664 48.2298 62.2648C48.3015 62.3632 48.3752 62.4597 48.4513 62.5537C48.7299 62.8986 48.8048 63.3617 48.6204 63.7633L47.9858 65.1446L52.5303 67.1756L53.1633 65.8014C53.3489 65.3982 53.7512 65.1411 54.2002 65.122C54.4474 65.1117 54.6942 65.0879 54.9403 65.0514C55.3828 64.9855 55.8257 65.1609 56.0867 65.5196L56.9765 66.7439L61.0342 63.8787L60.1443 62.6545C59.8838 62.2958 59.8572 61.8259 60.063 61.4343C60.1773 61.2168 60.2792 60.9938 60.3686 60.7664C60.5313 60.3537 60.9074 60.0612 61.3547 60.0176L62.8784 59.8688L62.3884 54.975L60.8639 55.1234C60.4181 55.1667 59.9961 54.948 59.7541 54.5762C59.6877 54.4746 59.6184 54.3738 59.5464 54.2742C59.4747 54.1758 59.401 54.0794 59.3249 53.9853C59.0446 53.6389 58.9697 53.1734 59.1554 52.7698L59.7872 51.3972ZM57.2093 55.9246C58.524 57.733 58.1024 60.2469 56.2678 61.5426C54.4329 62.8382 51.8788 62.4251 50.5641 60.6168C49.2494 58.8084 49.6718 56.2889 51.5067 54.9933C53.3413 53.698 55.8946 54.1167 57.2093 55.9246Z" fill="#EBEBEB"/>
+<path d="M265.108 116.319L262.08 118.041L262.616 118.954C262.773 119.223 262.758 119.553 262.586 119.813C262.491 119.957 262.404 120.105 262.324 120.259C262.182 120.535 261.9 120.712 261.586 120.712H260.516V124.158H261.586C261.9 124.158 262.182 124.336 262.324 124.611C262.404 124.765 262.491 124.914 262.586 125.057C262.758 125.317 262.773 125.647 262.616 125.916L262.08 126.829L265.108 128.551L265.644 127.634C265.801 127.365 266.101 127.217 266.415 127.232C266.5 127.237 266.586 127.239 266.672 127.239C266.759 127.239 266.844 127.237 266.93 127.232C267.243 127.217 267.541 127.363 267.698 127.631L268.237 128.551L271.264 126.829L270.728 125.913C270.571 125.644 270.587 125.314 270.759 125.054C270.854 124.911 270.941 124.763 271.02 124.61C271.163 124.335 271.445 124.158 271.758 124.158H272.829V120.712H271.758C271.445 120.712 271.163 120.535 271.02 120.259C270.941 120.107 270.854 119.958 270.759 119.815C270.587 119.555 270.571 119.225 270.728 118.956L271.264 118.04L268.237 116.318L267.7 117.235C267.543 117.503 267.245 117.65 266.931 117.634C266.846 117.63 266.759 117.628 266.672 117.628C266.586 117.628 266.5 117.63 266.415 117.634C266.1 117.65 265.801 117.502 265.643 117.233L265.108 116.319ZM266.673 119.613C268.254 119.613 269.535 120.876 269.535 122.434C269.535 123.992 268.254 125.257 266.673 125.257C265.092 125.257 263.808 123.992 263.808 122.434C263.808 120.876 265.091 119.613 266.673 119.613Z" fill="#EBEBEB"/>
+<path d="M68.9764 36.7348L66.1996 38.8272L66.8499 39.6646C67.0412 39.911 67.0694 40.2404 66.9333 40.5197C66.8576 40.6741 66.7907 40.8328 66.7323 40.9955C66.6276 41.2868 66.3703 41.4987 66.0591 41.5388L64.998 41.6749L65.4494 45.0924L66.5105 44.9563C66.8217 44.9162 67.1253 45.0563 67.3021 45.3115C67.4008 45.4539 67.5067 45.5905 67.6198 45.7206C67.8244 45.9563 67.8823 46.2821 67.7615 46.5682L67.3504 47.5421L70.5782 48.8643L70.9893 47.8865C71.1101 47.6 71.3876 47.4151 71.7016 47.3905C71.787 47.3837 71.8724 47.375 71.9577 47.3643C72.0431 47.3532 72.1281 47.3405 72.2118 47.325C72.5203 47.2694 72.8351 47.3774 73.0256 47.6226L73.6807 48.4663L76.4579 46.3738L75.8068 45.5337C75.6156 45.2873 75.5878 44.9575 75.7247 44.6781C75.8 44.5242 75.8668 44.3662 75.9252 44.2043C76.0303 43.9134 76.2872 43.7019 76.5981 43.6618L77.6595 43.5257L77.2081 40.1082L76.1467 40.2443C75.8358 40.2844 75.5326 40.1447 75.3554 39.8896C75.2572 39.7479 75.1513 39.6122 75.0385 39.4824C74.8336 39.2467 74.7748 38.9209 74.8956 38.6344L75.3071 37.6582L72.0789 36.3359L71.667 37.3125C71.5466 37.5983 71.2696 37.7824 70.9567 37.8066C70.8713 37.8133 70.7852 37.8221 70.6986 37.8332C70.6132 37.8443 70.5283 37.857 70.4441 37.8721C70.1341 37.928 69.818 37.8193 69.6263 37.5725L68.9764 36.7348ZM70.9591 39.8023C72.5271 39.6011 73.9626 40.69 74.1668 42.2352C74.3709 43.7805 73.2664 45.198 71.6984 45.3992C70.1304 45.6004 68.6917 44.5091 68.4876 42.9638C68.2834 41.4186 69.3911 40.0035 70.9591 39.8023Z" fill="#EBEBEB"/>
+<path d="M48.2451 126.268C48.4037 122.428 48.3401 118.581 48.0848 114.746C47.5581 106.837 46.237 98.989 44.4226 91.2719C43.4014 86.9277 42.1435 82.6574 40.8332 78.3915C40.7937 78.2625 40.5852 78.299 40.6214 78.4332C44.6738 93.4715 47.9987 108.991 47.7699 124.623C47.7059 128.998 47.1921 133.295 46.7705 137.642C46.7592 137.758 46.9533 137.805 46.9803 137.685C47.8162 133.965 48.088 130.067 48.2451 126.268Z" fill="#EBEBEB"/>
+<path d="M40.6216 78.4336C40.6216 78.4336 34.4825 93.7902 35.8568 97.3998C37.2315 101.009 40.0651 101.779 40.0651 101.779C40.0651 101.779 36.309 107.064 38.9336 112.021C41.5586 116.978 47.3904 116.744 47.7777 122.364C47.7777 122.364 48.1027 98.8637 40.6216 78.4336Z" fill="#EBEBEB"/>
+<path d="M47.1107 112.661C47.1183 112.635 47.1163 112.607 47.1042 112.58C46.2421 102.138 44.3625 91.729 41.1496 81.688C41.1403 81.6582 41.0908 81.6677 41.0988 81.6987C42.3153 86.1908 43.3977 90.7071 44.3226 95.2481C43.5253 94.439 42.4824 93.9739 41.392 93.6377C41.3714 93.6314 41.3614 93.6604 41.3807 93.6687C42.5162 94.1524 43.6038 94.7132 44.4063 95.6612C44.5855 96.5513 44.7611 97.4418 44.9278 98.3335C43.5559 96.8223 41.6533 96.0727 39.7495 95.36C39.7225 95.3501 39.7084 95.3906 39.7346 95.4013C41.7173 96.1969 43.6924 97.2219 45.0357 98.9057C45.504 101.454 45.9139 104.012 46.2687 106.577C45.2656 105.544 44.0278 104.85 42.608 104.509C42.5654 104.499 42.5416 104.561 42.5847 104.574C44.0435 104.988 45.2983 105.792 46.2973 106.917C46.3045 106.925 46.3122 106.929 46.3202 106.934C46.443 107.837 46.559 108.74 46.6677 109.645C45.8954 108.996 45.0418 108.502 44.1019 108.12C44.077 108.11 44.0637 108.148 44.0878 108.158C45.0426 108.559 45.9014 109.136 46.6577 109.834C46.6685 109.844 46.6794 109.843 46.6903 109.847C46.7925 110.707 46.8944 111.567 46.9826 112.429C45.5753 110.758 43.835 109.548 41.7757 108.765C41.7355 108.75 41.7149 108.811 41.7536 108.827C43.7556 109.685 45.5205 111.044 46.8852 112.719C46.9226 112.765 46.9713 112.772 47.0144 112.759C47.1473 114.08 47.2661 115.404 47.3643 116.73C47.3655 116.748 47.3957 116.75 47.3949 116.731C47.318 115.374 47.2218 114.017 47.1107 112.661Z" fill="white"/>
+<path d="M42.1776 92.11C41.1129 91.389 39.76 91.081 38.4892 90.9767C38.4586 90.9743 38.4561 91.0187 38.4859 91.0227C39.8079 91.2163 40.9184 91.6878 42.1329 92.1965C42.1856 92.2191 42.2235 92.1414 42.1776 92.11Z" fill="white"/>
+<path d="M42.9246 108.369C42.0822 107.871 41.121 107.589 40.1558 107.436C40.122 107.431 40.1192 107.482 40.1522 107.488C41.1323 107.663 42.0005 108.006 42.8912 108.434C42.929 108.453 42.9604 108.391 42.9246 108.369Z" fill="white"/>
+<path d="M64.385 97.6509C61.8249 99.4248 59.3678 101.47 57.2796 103.772C55.0536 106.225 53.4301 109.01 52.2962 112.101C49.9732 118.432 48.7 125.291 48.584 132.02C48.5188 135.792 48.8594 139.535 49.6784 143.222C49.7082 143.356 49.9116 143.318 49.8911 143.183C48.89 136.696 48.9267 130.076 50.0022 123.602C51.0576 117.249 52.7137 110.337 56.8113 105.174C59.0425 102.363 61.8245 100.151 64.5747 97.8656C64.7184 97.7454 64.5336 97.5477 64.385 97.6509Z" fill="#EBEBEB"/>
+<path d="M49.4863 127.446C49.4863 127.446 51.5947 123.946 54.6658 120.92C57.737 117.895 60.3237 115.744 60.7227 113.743C61.1222 111.742 57.6464 110.268 57.6464 110.268C57.6464 110.268 61.8965 111.02 63.0594 109.262C64.2223 107.504 64.7836 97.3232 64.7836 97.3232C64.7836 97.3232 57.052 102.763 53.4494 110.389C49.8471 118.015 49.4863 127.446 49.4863 127.446Z" fill="#EBEBEB"/>
+<path d="M62.1089 99.9341C58.8557 103.083 55.5817 106.439 53.6658 110.575C53.009 111.994 52.4501 113.465 51.9581 114.963C51.9569 114.966 51.9569 114.968 51.9556 114.97C51.857 115.271 51.7567 115.571 51.6637 115.874C51.6545 115.889 51.6496 115.906 51.648 115.924C50.7009 119.013 50.0313 122.208 49.4515 125.329C49.4478 125.35 49.4788 125.36 49.4829 125.339C49.8159 123.751 50.1835 122.147 50.5938 120.547C50.6083 120.548 50.624 120.545 50.6401 120.538C51.2977 120.266 51.9593 120.095 52.6692 120.031C52.7155 120.027 52.7119 119.947 52.6647 119.95C51.9798 119.982 51.309 120.101 50.6579 120.311C51.0323 118.868 51.4394 117.43 51.8973 116.013C53.3899 115.653 54.9479 115.459 56.4828 115.422C56.4985 115.422 56.5014 115.399 56.4848 115.398C54.9374 115.327 53.483 115.458 51.9758 115.775C52.0555 115.532 52.1385 115.29 52.221 115.048C53.2289 114.822 54.2412 114.631 55.2724 114.538C55.2909 114.537 55.2893 114.505 55.2708 114.506C54.2609 114.533 53.2655 114.637 52.283 114.864C52.7038 113.637 53.1584 112.428 53.6626 111.249C54.0797 110.275 54.5758 109.349 55.1222 108.456C55.9489 108.271 56.7502 108.096 57.5974 108.021C57.6208 108.019 57.6183 107.982 57.5954 107.981C56.8263 107.931 56.0254 107.988 55.2813 108.206C55.688 107.559 56.1152 106.925 56.5726 106.31C58.3065 105.932 60.0641 105.581 61.8379 105.909C61.8685 105.914 61.8798 105.864 61.8496 105.856C60.1612 105.418 58.4853 105.671 56.8054 105.998C56.9886 105.758 57.1762 105.521 57.3655 105.285C58.4297 104.96 59.4883 104.803 60.6049 104.783C60.6279 104.783 60.6315 104.75 60.6077 104.748C59.5886 104.652 58.5723 104.749 57.5873 105.012C59.0208 103.257 60.6041 101.608 62.1693 99.9781C62.2426 99.9035 62.1862 99.8595 62.1089 99.9341Z" fill="white"/>
+<path d="M62.0231 106.873C61.5142 106.82 60.9967 106.764 60.4853 106.821C60.4233 106.827 60.4286 106.927 60.491 106.929C60.9999 106.943 61.5089 106.906 62.0179 106.933C62.0569 106.935 62.0618 106.877 62.0231 106.873Z" fill="white"/>
+<path d="M56.4574 116.749C55.6448 116.739 54.8334 116.955 54.0744 117.221C54.0555 117.228 54.066 117.259 54.0857 117.254C54.8725 117.07 55.6686 116.995 56.4634 116.865C56.5287 116.855 56.5254 116.75 56.4574 116.749Z" fill="white"/>
+<path d="M54.7894 113.338C54.4596 113.321 54.1028 113.378 53.7779 113.428C53.7444 113.433 53.7464 113.487 53.7811 113.488C54.1096 113.493 54.4712 113.502 54.795 113.441C54.8522 113.43 54.8498 113.341 54.7894 113.338Z" fill="white"/>
+<path d="M26.8212 108.455C29.3093 109.307 31.7772 110.403 34.0072 111.79C36.3841 113.268 38.3511 115.153 39.9936 117.395C43.3583 121.99 45.9974 127.251 47.6697 132.67C48.6071 135.708 49.2095 138.815 49.4112 141.985C49.4184 142.1 49.2449 142.116 49.23 142.001C48.5185 136.523 46.9364 131.175 44.5474 126.179C42.2035 121.279 39.2422 116.063 34.7151 112.818C32.2499 111.051 29.48 109.895 26.7181 108.671C26.5736 108.607 26.6766 108.406 26.8212 108.455Z" fill="#EBEBEB"/>
+<path d="M45.8662 129.173C45.8662 129.173 43.3391 126.821 40.1444 125.072C36.9492 123.323 34.3516 122.172 33.5591 120.643C32.7667 119.115 35.2338 117.13 35.2338 117.13C35.2338 117.13 31.9706 118.707 30.6173 117.549C29.2639 116.392 26.4219 108.28 26.4219 108.28C26.4219 108.28 33.955 110.922 38.6585 116.272C43.3625 121.624 45.8662 129.173 45.8662 129.173Z" fill="#EBEBEB"/>
+<path d="M45.4734 127.5C41.7056 120.53 36.6784 114.226 29.7895 110.064C29.7863 110.062 29.7835 110.067 29.7863 110.068C31.5999 111.207 33.271 112.521 34.8285 113.957C33.4341 113.919 32.0147 114.138 30.7785 114.799C30.7511 114.814 30.7708 114.851 30.799 114.841C32.1769 114.381 33.5005 114.08 34.9662 114.147C34.9864 114.148 34.9992 114.137 35.0133 114.129C35.2577 114.358 35.4989 114.59 35.7377 114.824C35.0129 114.855 34.2797 114.956 33.5734 115.107C33.5545 115.111 33.5597 115.14 33.579 115.137C34.3433 114.991 35.0894 114.94 35.865 114.951C37.1273 116.201 38.3035 117.538 39.4181 118.927C38.9148 118.855 38.3873 118.897 37.9049 119.035C37.869 119.045 37.8783 119.096 37.9158 119.091C38.4646 119.023 38.9864 119.032 39.5313 119.07C39.7374 119.328 39.946 119.586 40.1481 119.847C38.5991 119.755 37.0814 119.902 35.5763 120.286C35.5541 120.291 35.5602 120.325 35.5831 120.32C37.1358 120.02 38.7014 119.924 40.279 120.02C40.4711 120.271 40.6531 120.529 40.8415 120.783C39.9174 120.755 39.0211 120.869 38.1199 121.09C38.0857 121.099 38.0953 121.152 38.1304 121.144C39.0573 120.936 40 120.883 40.9474 120.928C41.758 122.028 42.5343 123.153 43.2805 124.292C42.8855 124.211 42.4707 124.255 42.0858 124.362C42.0652 124.368 42.0709 124.397 42.0922 124.394C42.5355 124.343 42.9495 124.399 43.3848 124.455C44.0556 125.484 44.7043 126.524 45.3256 127.569C45.3788 127.658 45.5233 127.592 45.4734 127.5Z" fill="white"/>
+<path d="M39.6134 121.719C38.8769 121.657 38.1283 121.771 37.4249 121.983C37.4047 121.989 37.4096 122.019 37.4313 122.015C38.1557 121.884 38.8737 121.834 39.6077 121.795C39.6556 121.793 39.6649 121.724 39.6134 121.719Z" fill="white"/>
+<path d="M33.0413 113.226C32.7083 113.189 32.3608 113.232 32.0318 113.284C31.9927 113.29 32.0048 113.347 32.0435 113.343C32.3753 113.308 32.7026 113.32 33.0348 113.311C33.0888 113.309 33.0976 113.232 33.0413 113.226Z" fill="white"/>
+<path d="M55.5823 152.219H38.5781L41.0026 134.716L41.6223 130.229H52.5382L53.1575 134.716L55.5823 152.219Z" fill="#DBDBDB"/>
+<path d="M53.1588 134.716H41.0039L41.6236 130.229H52.5395L53.1588 134.716Z" fill="#C7C7C7"/>
+<path d="M54.1003 128.672H40.0625V132.473H54.1003V128.672Z" fill="#DBDBDB"/>
+<path d="M27.7695 152.22L58.3758 152.124L88.9821 152.089L150.195 152.022L211.407 152.089L242.014 152.124L272.62 152.22L242.014 152.318L211.407 152.353L150.195 152.418L88.9821 152.352L58.3758 152.317L27.7695 152.22Z" fill="#263238"/>
+<path d="M151.001 181.797C214.768 181.797 266.462 176.215 266.462 169.329C266.462 162.443 214.768 156.86 151.001 156.86C87.2329 156.86 35.5391 162.443 35.5391 169.329C35.5391 176.215 87.2329 181.797 151.001 181.797Z" fill="#EBEBEB"/>
+<path d="M124.123 167.261C123.184 167.574 96.2805 167.668 95.2521 167.032C94.8607 166.793 94.6187 162.933 94.46 158.259C94.4258 157.25 94.3964 156.208 94.3731 155.15L92.1914 141.008L110.177 140.895L111.874 155.039L111.805 158.15C111.805 158.15 122.122 162.655 123.174 163.471C124.221 164.287 125.062 166.948 124.123 167.261Z" fill="#EB9481"/>
+<path d="M124.123 167.261C123.184 167.574 96.2805 167.667 95.2521 167.032C94.7769 166.738 94.5176 161.1 94.373 155.149L111.874 155.038L111.805 158.149C111.805 158.149 122.122 162.654 123.174 163.47C124.221 164.287 125.062 166.947 124.123 167.261Z" fill="white"/>
+<path d="M124.124 167.262C123.185 167.575 96.2814 167.668 95.253 167.033C94.8616 166.794 94.6196 162.933 94.4609 158.26L111.806 158.15C111.806 158.15 122.123 162.655 123.175 163.472C124.222 164.288 125.063 166.949 124.124 167.262Z" fill="#A6A6A6"/>
+<path d="M123.734 166.202C119.224 166.109 101.024 166.151 96.5584 166.396C96.5222 166.398 96.5222 166.422 96.5584 166.424C101.027 166.613 119.226 166.426 123.735 166.275C123.83 166.272 123.829 166.204 123.734 166.202Z" fill="#263238"/>
+<path d="M121.442 162.524C120.372 162.484 119.328 162.989 118.747 163.618C118.189 164.224 117.713 165.073 117.748 165.995C117.749 166.021 117.799 166.022 117.802 165.995C118.054 164.255 119.653 162.721 121.442 162.58C121.478 162.576 121.478 162.525 121.442 162.524Z" fill="#263238"/>
+<path d="M113.556 158.586C111.751 158.568 109.66 159.203 108.543 160.662C108.5 160.718 108.582 160.778 108.636 160.751C110.264 159.916 111.813 159.293 113.587 158.805C113.713 158.771 113.685 158.588 113.556 158.586Z" fill="#263238"/>
+<path d="M114.954 159.118C113.149 159.099 111.058 159.734 109.942 161.193C109.899 161.25 109.981 161.309 110.034 161.282C111.663 160.447 113.212 159.824 114.986 159.337C115.111 159.302 115.083 159.119 114.954 159.118Z" fill="#263238"/>
+<path d="M116.349 159.647C114.544 159.629 112.453 160.264 111.336 161.722C111.293 161.779 111.375 161.839 111.429 161.811C113.057 160.977 114.606 160.354 116.381 159.866C116.506 159.831 116.478 159.648 116.349 159.647Z" fill="#263238"/>
+<path d="M117.743 160.178C115.938 160.159 113.848 160.795 112.731 162.254C112.688 162.31 112.77 162.37 112.823 162.342C114.452 161.508 116.001 160.885 117.775 160.397C117.9 160.362 117.872 160.179 117.743 160.178Z" fill="#263238"/>
+<path d="M97.6917 162.171C95.6667 162.184 95.6832 165.286 97.7119 165.273C99.7369 165.26 99.7204 162.158 97.6917 162.171Z" fill="#263238"/>
+<path d="M115.492 153.833C114.575 153.089 113.427 153.823 112.866 154.6C111.958 155.859 111.338 157.621 111.242 159.155C111.24 159.193 111.269 159.208 111.299 159.206C111.338 159.333 111.491 159.44 111.624 159.348C112.906 158.468 114.387 157.683 115.357 156.441C115.923 155.715 116.358 154.536 115.492 153.833ZM113.29 157.621C112.671 158.069 112.032 158.485 111.429 158.955C111.748 158.068 112.027 157.171 112.437 156.316C112.633 155.908 112.841 155.492 113.092 155.114C113.482 154.525 115.249 153.032 115.435 154.966C115.538 156.034 114.029 157.087 113.29 157.621Z" fill="#263238"/>
+<path d="M106.759 159.83C108.331 160.063 109.951 159.616 111.494 159.374C111.654 159.349 111.69 159.168 111.628 159.049C111.651 159.031 111.661 159 111.633 158.974C110.486 157.934 108.798 157.088 107.259 156.802C106.308 156.625 104.964 156.881 104.827 158.043C104.697 159.142 105.84 159.694 106.759 159.83ZM105.665 158.821C104.438 157.299 106.761 157.168 107.457 157.326C107.904 157.428 108.347 157.585 108.775 157.745C109.672 158.082 110.503 158.537 111.358 158.959C110.592 159.031 109.84 159.168 109.078 159.268C108.17 159.389 106.341 159.661 105.665 158.821Z" fill="#263238"/>
+<path d="M65.7617 75.6396C65.7617 75.6396 86.648 110.656 87.2073 113.114C88.0666 116.892 92.622 154.2 92.622 154.2L114.354 153.815C114.354 153.815 110.609 120.921 107.061 110.084C104.506 102.278 86.0734 76.3893 86.0734 76.3893L65.7617 75.6396Z" fill="#6F7A80"/>
+<path d="M112.38 150.531C109.259 150.508 98.1991 150.385 94.0448 150.767C94.013 150.77 94.0142 150.822 94.0456 150.827C95.4755 151.029 109.261 150.714 112.381 150.615C112.44 150.614 112.439 150.531 112.38 150.531Z" fill="#263238"/>
+<path d="M69.3278 78.8526C70.6965 80.9681 72.1404 83.0396 73.5397 85.1368C74.9398 87.2349 76.3346 89.3361 77.7113 91.4488C80.4627 95.6715 83.1425 99.9383 85.7731 104.232C87.0069 106.245 88.1819 108.277 89.0291 110.474C89.8682 112.649 90.4396 114.913 90.8624 117.194C91.2884 119.493 91.5687 121.814 91.8336 124.134C92.1155 126.604 92.3934 129.075 92.6732 131.546C93.2458 136.601 93.8184 141.656 94.391 146.711C94.461 147.331 94.5299 147.951 94.5931 148.572C94.6024 148.663 94.4373 148.681 94.4256 148.59C93.7862 143.567 93.2551 138.529 92.674 133.499C92.3849 130.995 92.0958 128.491 91.8067 125.987C91.5377 123.658 91.282 121.327 90.9156 119.011C90.5552 116.736 90.0877 114.47 89.385 112.268C88.651 109.967 87.6113 107.807 86.3803 105.715C83.8617 101.435 81.1968 97.2271 78.5307 93.0306C75.8417 88.798 73.1302 84.5769 70.318 80.4185C69.9709 79.905 69.6205 79.3947 69.2606 78.8891C69.2324 78.8494 69.3012 78.8117 69.3278 78.8526Z" fill="#263238"/>
+<path d="M72.6098 169.328C71.6188 169.268 46.0354 159.052 45.3223 158.084C45.2985 158.052 45.2844 157.988 45.2832 157.898C45.288 157.031 47.0598 153.996 48.5404 150.014C48.633 149.759 49.2934 148.578 50.2098 146.984C52.7289 142.608 57.1864 135.11 57.1864 135.11L73.9088 141.658L65.9046 153.466L64.6587 156.324C64.6587 156.324 72.5071 164.317 73.1699 165.461C73.8286 166.605 73.5971 169.383 72.6098 169.328Z" fill="#EB9481"/>
+<path d="M72.6098 169.328C71.6188 169.268 46.0354 159.052 45.3223 158.084C45.2985 158.052 45.2844 157.988 45.2832 157.898C45.288 157.031 47.0598 153.996 48.5404 150.014C48.633 149.759 49.2934 148.578 50.2098 146.984L65.905 153.466L64.6591 156.324C64.6591 156.324 72.5075 164.317 73.1703 165.461C73.8286 166.605 73.5971 169.383 72.6098 169.328Z" fill="white"/>
+<path d="M72.6096 169.325C71.6202 169.269 46.036 159.052 45.3245 158.083C45.0527 157.716 46.1967 154.273 48.5402 150.015L64.6605 156.326C64.6605 156.326 72.5089 164.316 73.1733 165.461C73.8321 166.605 73.5989 169.382 72.6096 169.325Z" fill="#A6A6A6"/>
+<path d="M72.6518 168.199C68.5067 166.445 51.6193 159.755 47.3865 158.331C47.3522 158.32 47.343 158.342 47.376 158.357C51.4461 160.184 68.3879 166.739 72.6244 168.266C72.7138 168.299 72.7392 168.235 72.6518 168.199Z" fill="#263238"/>
+<path d="M71.9259 163.942C70.9495 163.51 69.7902 163.591 69.0118 163.96C68.2641 164.315 67.499 164.926 67.1809 165.794C67.1716 165.819 67.2176 165.837 67.2316 165.813C68.1272 164.293 70.1937 163.463 71.9054 163.993C71.9396 164.004 71.9598 163.956 71.9259 163.942Z" fill="#263238"/>
+<path d="M66.118 157.377C64.4518 156.693 62.2722 156.508 60.6816 157.448C60.62 157.484 60.6736 157.57 60.7336 157.564C62.5613 157.393 64.234 157.388 66.0641 157.592C66.1933 157.606 66.2372 157.426 66.118 157.377Z" fill="#263238"/>
+<path d="M67.2098 158.385C65.5436 157.7 63.364 157.516 61.7734 158.456C61.7118 158.492 61.7654 158.578 61.8254 158.572C63.6527 158.4 65.3258 158.396 67.1559 158.599C67.2851 158.614 67.329 158.434 67.2098 158.385Z" fill="#263238"/>
+<path d="M68.2997 159.393C66.6334 158.708 64.4538 158.524 62.8633 159.463C62.8017 159.5 62.8552 159.586 62.9152 159.58C64.7425 159.409 66.4156 159.403 68.2457 159.607C68.3746 159.622 68.4189 159.442 68.2997 159.393Z" fill="#263238"/>
+<path d="M69.3931 160.4C67.7269 159.715 65.5472 159.531 63.9571 160.47C63.8955 160.507 63.9486 160.592 64.009 160.587C65.8368 160.415 67.5094 160.411 69.3395 160.614C69.4684 160.629 69.5127 160.449 69.3931 160.4Z" fill="#263238"/>
+<path d="M50.0449 154.834C48.1628 154.097 46.9975 156.979 48.8828 157.717C50.7652 158.454 51.9306 155.572 50.0449 154.834Z" fill="#263238"/>
+<path d="M69.7205 153.685C69.1539 152.657 67.8102 152.912 66.9948 153.426C65.6741 154.257 64.4278 155.661 63.7558 157.047C63.7393 157.082 63.7606 157.106 63.7888 157.115C63.7763 157.248 63.8778 157.403 64.036 157.368C65.5597 157.025 67.2316 156.846 68.6031 156.053C69.4036 155.59 70.256 154.658 69.7205 153.685ZM66.2378 156.384C65.4925 156.57 64.7427 156.719 64.0046 156.932C64.6384 156.228 65.238 155.499 65.9435 154.858C66.2801 154.552 66.632 154.244 67.0085 153.986C67.5944 153.584 69.8002 152.853 69.2365 154.716C68.9256 155.743 67.1261 156.161 66.2378 156.384Z" fill="#263238"/>
+<path d="M59.3418 156.016C60.7108 156.813 62.3823 156.998 63.9048 157.345C64.0626 157.381 64.1645 157.226 64.1528 157.093C64.181 157.084 64.2028 157.059 64.1863 157.025C63.5182 155.637 62.2764 154.229 60.9585 153.394C60.1443 152.878 58.8014 152.619 58.232 153.645C57.6929 154.616 58.5425 155.551 59.3418 156.016ZM58.7124 154.677C58.1547 152.813 60.3581 153.55 60.9424 153.954C61.3181 154.213 61.6688 154.522 62.0046 154.829C62.7081 155.473 63.3056 156.203 63.9374 156.909C63.2001 156.694 62.4508 156.542 61.7058 156.354C60.8184 156.129 59.0196 155.705 58.7124 154.677Z" fill="#263238"/>
+<path d="M67.1945 152.805L48.4766 145.356C48.4766 145.356 71.6847 111.727 71.8566 109.224C72.0084 107.007 61.8149 87.7123 61.413 82.0892C60.9794 76.0208 63.9446 71.3239 67.2026 68.4092L86.5125 76.4986C86.5125 76.4986 84.4746 79.7117 81.2641 81.5003C81.2641 81.5003 91.1665 103.803 90.6048 110.66C90.0402 117.554 67.1945 152.805 67.1945 152.805Z" fill="#6F7A80"/>
+<path d="M68.0259 149.298C65.3191 148.151 66.1124 148.442 63.3924 147.325C62.0616 146.778 53.312 143.194 51.98 142.899C51.9506 142.893 51.9317 142.938 51.9575 142.954C53.122 143.657 61.9331 147.09 63.2744 147.611C66.0154 148.677 65.2402 148.342 67.9932 149.377C68.0452 149.396 68.0766 149.319 68.0259 149.298Z" fill="#263238"/>
+<path d="M84.4435 81.0914C82.4317 81.5176 80.4583 82.2181 78.5625 82.9708C78.488 83.0006 78.5231 83.1093 78.6028 83.0863C80.5767 82.5185 82.5844 81.9879 84.522 81.3168C84.6742 81.2641 84.5977 81.0585 84.4435 81.0914Z" fill="#263238"/>
+<path d="M82.1517 80.3087C81.9613 80.6357 81.7998 80.9802 81.6556 81.3282C81.5441 81.5984 81.4007 81.8881 81.4024 82.183C81.4028 82.2401 81.4809 82.254 81.5167 82.2191C81.741 82.0016 81.8602 81.6841 82.0019 81.4131C82.1662 81.0992 82.3378 80.7881 82.4928 80.4694C82.5955 80.2583 82.2689 80.1071 82.1517 80.3087Z" fill="#263238"/>
+<path d="M82.3874 78.5198C82.5058 78.227 82.625 77.9345 82.7498 77.6444C82.8791 77.344 83.0293 77.048 83.1348 76.7389C83.1513 76.6901 83.2298 76.723 83.21 76.7722C83.0921 77.0655 83.0152 77.3782 82.9205 77.6797C82.8255 77.9825 82.7252 78.2833 82.6238 78.5841C82.4345 79.1441 82.203 79.6996 81.959 80.2401C82.2746 80.2361 82.5996 80.2222 82.8867 80.0814C83.1984 79.9282 83.3872 79.602 83.5406 79.3072C83.711 78.9798 83.8676 78.6448 84.0428 78.3198C84.2364 77.9603 84.4507 77.6047 84.5783 77.2155C84.5944 77.1662 84.6713 77.1992 84.6536 77.2484C84.3629 78.052 84.077 78.8544 83.6248 79.5949C83.4472 79.8857 83.3031 80.1885 82.9757 80.3024C82.6242 80.4246 82.2396 80.4008 81.8736 80.3746C81.8285 80.3869 81.7701 80.3584 81.7858 80.3044C81.9586 79.7056 82.153 79.0984 82.3874 78.5198Z" fill="#263238"/>
+<path d="M81.5668 82.2278C82.2529 83.6615 82.8565 85.0901 83.498 86.5187C84.1249 87.9147 84.712 89.3271 85.2818 90.7461C86.4334 93.614 87.465 96.5339 88.3698 99.4868C88.8176 100.948 89.2299 102.419 89.6028 103.901C89.9765 105.386 90.3417 106.886 90.4967 108.412C90.6521 109.942 90.5414 111.455 90.1089 112.935C89.67 114.436 89.0918 115.747 88.4049 117.152C87.9853 118.01 87.8407 117.894 88.0441 117.461C88.6203 116.232 90.1295 112.506 90.02 109.374C89.9672 107.863 89.6523 106.375 89.306 104.907C88.9525 103.408 88.5534 101.92 88.1182 100.442C87.2605 97.5304 86.2417 94.6764 85.1936 91.8271C84.6065 90.2307 83.9763 88.6505 83.3804 87.0576C82.78 85.4528 82.1611 84.0087 81.4951 82.2563C81.4774 82.2103 81.5454 82.1833 81.5668 82.2278Z" fill="#263238"/>
+<path d="M67.3525 77.4912C67.6879 77.369 68.153 77.5714 68.4949 77.6278C68.9334 77.7004 69.3767 77.7444 69.8213 77.7595C70.2594 77.7742 70.7011 77.7567 71.1372 77.7147C71.5733 77.673 72.0182 77.6198 72.3971 77.3865C73.0358 76.9936 73.5705 76.3015 74.0034 75.7055C74.4789 75.0503 74.9726 74.2971 75.2561 73.5384C75.2734 73.492 75.3414 73.5237 75.3265 73.5694C75.1856 74.0118 75.0809 74.4579 74.9017 74.89C74.733 75.2968 74.5152 75.6857 74.284 76.0603C73.8524 76.7603 73.3571 77.5075 72.617 77.9238C71.8402 78.3607 70.8396 78.3345 69.9735 78.2853C69.4726 78.2567 68.9737 78.1917 68.4824 78.0897C68.1281 78.0159 67.5317 77.9599 67.3058 77.6531C67.2651 77.5992 67.2865 77.5155 67.3525 77.4912Z" fill="#263238"/>
+<path d="M53.8207 141.842C56.8975 137.253 59.9171 132.627 62.8823 127.967C65.8552 123.295 68.7733 118.589 71.6508 113.86C72.3389 112.729 73.1342 111.598 73.5775 110.345C74.0595 108.983 73.7857 107.664 73.3492 106.331C72.5487 103.887 71.5517 101.509 70.4754 99.1714C69.3958 96.8269 68.2337 94.5209 67.0902 92.2066C65.9562 89.911 64.7495 87.6077 63.8894 85.1954C63.0679 82.891 62.755 80.5013 63.3856 78.1112C64.0114 75.7397 65.3647 73.6103 66.7781 71.623C67.151 71.0987 67.5307 70.5793 67.9047 70.0559C67.9333 70.0162 67.9945 70.0642 67.9647 70.1039C66.4072 72.1758 64.8884 74.3686 63.9751 76.8012C63.5237 78.0032 63.2314 79.2687 63.2028 80.5529C63.1734 81.8557 63.4219 83.1481 63.8112 84.389C64.5687 86.8018 65.7642 89.0863 66.878 91.353C68.0167 93.6701 69.186 95.9733 70.2841 98.3099C71.389 100.661 72.4223 103.047 73.2715 105.5C73.6496 106.593 74.0712 107.735 74.0462 108.906C74.0188 110.187 73.3979 111.341 72.7553 112.422C69.9559 117.127 67.0499 121.773 64.108 126.392C61.1548 131.029 58.1433 135.629 55.0851 140.199C54.6993 140.775 54.3127 141.351 53.9258 141.926C53.8779 141.997 53.7732 141.913 53.8207 141.842Z" fill="#263238"/>
+<path d="M87.5837 55.1107C89.3264 58.881 98.1307 64.0763 102.254 64.6347C105.221 65.0363 114.229 65.1744 117.319 64.7097C120.937 64.1652 118.172 54.5389 116.033 54.7853C110.155 55.4627 105.163 56.2167 103.594 56.2167C101.678 56.2167 91.3075 52.9365 90.058 52.475C86.9998 51.3452 86.5951 52.9722 87.5837 55.1107Z" fill="#EB9481"/>
+<path d="M87.6384 56.1085C89.8446 59.3264 97.18 64.5868 97.18 64.5868L98.198 62.3641L101.567 55.0168C101.567 55.0168 94.8305 52.9219 90.3975 51.9886C89.7987 51.862 89.2708 51.7862 88.8114 51.7659C85.9815 51.6155 85.7358 53.3402 87.6384 56.1085Z" fill="#737791"/>
+<path d="M87.6384 56.1085C89.8446 59.3264 97.18 64.5868 97.18 64.5868L98.198 62.3641C95.4626 59.2351 91.2403 54.4926 88.8114 51.7659C85.9815 51.6155 85.7358 53.3402 87.6384 56.1085Z" fill="#263238"/>
+<path d="M95.8578 63.1022C96.4167 61.7518 98.9072 56.3033 99.5253 55.16C99.5684 55.0807 99.6292 55.087 99.595 55.1747C98.0185 59.2585 96.5287 61.8225 95.9122 63.1205C95.8969 63.153 95.8437 63.1364 95.8578 63.1022Z" fill="#263238"/>
+<path d="M114.955 54.8897C118.533 54.427 122.959 53.6361 126.706 55.204C127.442 55.5115 127.708 56.0516 127.708 56.0516C129.4 56.7251 129.586 57.7148 129.586 57.7148C130.968 58.8176 131.016 59.8557 131.016 59.8557C131.016 59.8557 132.995 60.6676 132.695 61.9275C132.364 63.3414 129.65 61.9244 127.675 62.0446C123.148 62.3196 116.792 63.9585 115.494 64.1657L114.955 54.8897Z" fill="#EB9481"/>
+<path d="M122.727 59.0471C124.06 58.9923 125.369 58.9042 126.703 59.0276C128.167 59.1629 129.553 59.5356 130.974 59.88C131.018 59.8907 131.038 59.8312 130.996 59.8137C128.525 58.7891 125.356 58.5201 122.723 58.9875C122.659 58.9987 122.659 59.0499 122.727 59.0471Z" fill="#263238"/>
+<path d="M122.16 56.379C123.461 56.3965 125.747 56.4421 129.573 57.7556C129.585 57.76 129.596 57.7405 129.584 57.7338C127.215 56.5556 124.786 56.1365 122.161 56.3179C122.08 56.3235 122.074 56.3778 122.16 56.379Z" fill="#263238"/>
+<path d="M121.883 54.9393C124.093 55.0524 125.473 55.3993 127.696 56.058C127.709 56.0616 127.719 56.0413 127.706 56.0358C125.258 55.0258 124.254 54.9326 121.876 54.8643C121.795 54.8616 121.797 54.935 121.883 54.9393Z" fill="#263238"/>
+<path d="M122.241 62.7168C121.666 62.9827 121.804 63.2819 122.904 63.5331C124.017 63.7894 128.575 63.8581 128.414 65.4272C128.255 67.0022 121.806 66.8006 120.007 66.2442C118.206 65.6918 115.494 64.1664 115.494 64.1664C116.757 63.9561 119.77 63.1597 122.241 62.7168Z" fill="#EB9481"/>
+<path d="M92.3724 61.1202C92.3446 61.798 92.2769 62.4881 92.1803 63.1722C92.1895 63.1476 92.2004 63.1234 92.2097 63.0988C92.3438 62.7417 92.4742 62.3754 92.6369 62.0302C92.6454 62.0119 92.678 62.0171 92.674 62.0393C92.6031 62.4139 92.4698 62.7901 92.3248 63.1437C92.2556 63.3123 92.1851 63.481 92.111 63.648C92.0611 63.9528 92.0055 64.2556 91.9431 64.5536C91.8243 65.1211 91.2803 67.535 91.1567 67.9429C91.1305 68.0287 91.027 68.0092 91.0335 67.9132C91.0633 67.4687 91.5195 64.9548 91.6117 64.3857C91.7889 63.2929 92.0325 62.1778 92.3293 61.1099C92.3361 61.0845 92.3732 61.0964 92.3724 61.1202Z" fill="#263238"/>
+<path d="M88.1745 79.1604C87.1006 79.7061 85.7154 80.5513 79.4745 79.3406C79.0843 79.2624 78.6921 79.168 78.2991 79.0529C72.4464 77.3203 65.4271 70.5377 65.0312 70.0595C65.0312 70.0595 74.326 55.2057 86.2176 50.5366C87.6873 49.9596 90.1206 51.0723 91.4675 52.4572C91.9487 52.9521 92.9924 56.5966 92.5918 59.5502C92.1871 62.4995 89.2561 78.62 88.1745 79.1604Z" fill="#737791"/>
+<path d="M87.3459 59.4141C87.3801 59.7331 87.3544 60.0438 87.3149 60.3526C87.2678 60.6605 87.2062 60.9665 87.0846 61.2641C87.0499 60.945 87.0757 60.6343 87.1156 60.3256C87.1631 60.0176 87.2247 59.7117 87.3459 59.4141Z" fill="white"/>
+<path d="M83.2912 69.5293C83.3254 69.8483 83.2997 70.1591 83.2602 70.4682C83.2131 70.7761 83.1515 71.0821 83.0299 71.3797C82.9953 71.0607 83.021 70.75 83.0609 70.4408C83.1088 70.1329 83.17 69.8269 83.2912 69.5293Z" fill="white"/>
+<path d="M76.4025 61.8848C76.4368 62.2038 76.411 62.5145 76.3715 62.8233C76.3244 63.1312 76.2628 63.4372 76.1412 63.7348C76.1066 63.4157 76.1324 63.105 76.1722 62.7959C76.2201 62.4883 76.2817 62.1824 76.4025 61.8848Z" fill="white"/>
+<path d="M90.0002 69.0156C90.0344 69.3347 90.0087 69.6454 89.9692 69.9541C89.9221 70.2621 89.8605 70.568 89.7389 70.8656C89.7042 70.5466 89.73 70.2359 89.7699 69.9267C89.8174 69.6192 89.879 69.3132 90.0002 69.0156Z" fill="white"/>
+<path d="M81.1523 60.5724C81.4761 60.5386 81.7914 60.564 82.1051 60.6029C82.4175 60.6493 82.728 60.7101 83.03 60.8299C82.7062 60.864 82.3909 60.8386 82.0773 60.7993C81.7648 60.7525 81.4547 60.6918 81.1523 60.5724Z" fill="white"/>
+<path d="M73.332 67.881C73.6558 67.8472 73.9711 67.8726 74.2843 67.9115C74.5968 67.9579 74.9073 68.0187 75.2093 68.1385C74.8855 68.1726 74.5702 68.1472 74.257 68.1079C73.9441 68.0611 73.634 68.0004 73.332 67.881Z" fill="white"/>
+<path d="M82.5312 75.7901C82.855 75.7564 83.1703 75.7818 83.4836 75.8207C83.796 75.8671 84.1065 75.9278 84.4085 76.0477C84.0847 76.0818 83.7694 76.0564 83.4562 76.0171C83.1437 75.9703 82.8332 75.9096 82.5312 75.7901Z" fill="white"/>
+<path d="M70.9219 72.9161C71.2456 72.8824 71.5609 72.9078 71.8746 72.9467C72.1871 72.9931 72.4975 73.0538 72.7995 73.1737C72.4758 73.2078 72.1605 73.1824 71.8468 73.1431C71.5343 73.0959 71.2239 73.0352 70.9219 72.9161Z" fill="white"/>
+<path d="M87.2852 52.3048C87.6089 52.271 87.9242 52.2965 88.2379 52.3353C88.5503 52.3818 88.8604 52.4425 89.1624 52.5623C88.8386 52.5965 88.5234 52.5711 88.2101 52.5318C87.8976 52.4845 87.5872 52.4238 87.2852 52.3048Z" fill="white"/>
+<path d="M85.014 54.8359C84.809 55.0851 84.5682 55.2871 84.3186 55.478C84.0645 55.6629 83.8015 55.8363 83.502 55.9617C83.7065 55.7121 83.9477 55.5102 84.1974 55.3197C84.4514 55.1351 84.7148 54.9617 85.014 54.8359Z" fill="white"/>
+<path d="M72.6136 62.0283C72.4086 62.2775 72.1678 62.4795 71.9182 62.6704C71.6641 62.8553 71.4011 63.0287 71.1016 63.1545C71.3061 62.9049 71.5473 62.7029 71.797 62.5125C72.0514 62.3275 72.3144 62.1545 72.6136 62.0283Z" fill="white"/>
+<path d="M88.094 65.2783C87.8891 65.5275 87.6483 65.7295 87.3986 65.9204C87.1446 66.1053 86.8816 66.2787 86.582 66.4041C86.7866 66.1545 87.0278 65.9525 87.2774 65.7621C87.5319 65.5779 87.7949 65.4045 88.094 65.2783Z" fill="white"/>
+<path d="M78.0687 71.5C77.8637 71.7492 77.6229 71.9512 77.3732 72.1421C77.1192 72.327 76.8562 72.5004 76.5566 72.6258C76.7612 72.3762 77.0024 72.1742 77.252 71.9837C77.5061 71.7996 77.7691 71.6262 78.0687 71.5Z" fill="white"/>
+<path d="M91.9362 56.7764C91.7313 57.0256 91.4905 57.2276 91.2408 57.4184C90.9868 57.6034 90.7238 57.7768 90.4238 57.9022C90.6284 57.6526 90.8696 57.4506 91.1192 57.2601C91.3741 57.0756 91.6371 56.9022 91.9362 56.7764Z" fill="white"/>
+<path d="M91.7264 63.9872C91.4735 63.7852 91.2685 63.5479 91.0748 63.3018C90.8872 63.0514 90.7112 62.7923 90.584 62.4971C90.8373 62.6987 91.0422 62.9364 91.2355 63.1824C91.4223 63.4332 91.5983 63.6923 91.7264 63.9872Z" fill="white"/>
+<path d="M69.3806 68.954C69.1278 68.752 68.9228 68.5147 68.7291 68.2686C68.5415 68.0182 68.3655 67.7591 68.2383 67.4639C68.4916 67.6655 68.6965 67.9032 68.8898 68.1492C69.077 68.3996 69.253 68.6587 69.3806 68.954Z" fill="white"/>
+<path d="M89.01 74.8661C88.7571 74.6641 88.5521 74.4268 88.3584 74.1808C88.1708 73.9304 87.9948 73.6712 87.8672 73.376C88.1205 73.5776 88.3254 73.8153 88.5187 74.0613C88.7063 74.3117 88.8819 74.5712 89.01 74.8661Z" fill="white"/>
+<path d="M79.1736 58.0194C78.9207 57.8174 78.7158 57.5801 78.5221 57.3341C78.3345 57.0837 78.1585 56.8245 78.0312 56.5293C78.2845 56.7309 78.4895 56.9686 78.6828 57.2146C78.87 57.465 79.046 57.7242 79.1736 58.0194Z" fill="white"/>
+<path d="M79.3455 78.2294C79.0926 78.0274 78.8877 77.7901 78.694 77.544C78.5063 77.2936 78.3304 77.0345 78.2031 76.7393C78.4564 76.9408 78.6614 77.1785 78.8546 77.4246C79.0415 77.675 79.2174 77.9341 79.3455 78.2294Z" fill="white"/>
+<path d="M81.0193 66.3085C80.7664 66.1065 80.5615 65.8692 80.3678 65.6231C80.1802 65.3727 80.0042 65.1136 79.877 64.8184C80.1302 65.0199 80.3352 65.2576 80.5285 65.5037C80.7157 65.7541 80.8917 66.0132 81.0193 66.3085Z" fill="white"/>
+<path d="M89.2814 56.4108C87.7662 56.1331 86.3379 53.0421 86.1583 50.9627C86.1467 50.8203 86.8678 49.6881 87.6776 48.2714C88.1656 47.4099 88.6887 46.4393 89.101 45.5198C89.1848 45.3305 89.6813 45.9615 89.6813 45.9615L90.76 46.7746L94.3256 49.4691C94.3256 49.4691 92.8861 51.1465 92.1774 52.754C92.1198 52.889 92.0771 53.0195 92.0486 53.1489C92.0429 53.1671 92.0385 53.1902 92.0292 53.2152C91.8259 53.9838 90.7459 56.6783 89.2814 56.4108Z" fill="#EB9481"/>
+<path d="M92.0495 53.1494C92.0439 53.1677 92.0394 53.1907 92.0302 53.2157C91.8353 53.1617 91.6311 53.0852 91.4145 52.9851C87.5123 51.1827 89.2337 46.0303 89.2337 46.0303L90.7614 46.7751L94.327 49.4696C94.327 49.4696 92.8875 51.147 92.1788 52.7546C92.1208 52.8895 92.0785 53.0201 92.0495 53.1494Z" fill="#263238"/>
+<path d="M98.418 38.4883C98.418 38.4883 100.201 39.6042 100.212 41.5875C100.224 43.5713 99.4222 45.5118 99.2362 45.5813C99.0502 45.6507 98.418 38.4883 98.418 38.4883Z" fill="#263238"/>
+<path d="M89.5694 39.5164C88.4975 41.6017 88.5514 48.1677 89.8903 49.8598C91.8307 52.3126 95.5691 53.1579 97.8252 50.7328C100.013 48.382 99.7882 39.8263 98.2408 38.2318C95.9617 35.8834 91.153 36.4362 89.5694 39.5164Z" fill="#EB9481"/>
+<path d="M95.2558 44.7777C95.2518 44.7606 95.2208 44.7995 95.222 44.8181C95.2469 45.2654 95.199 45.7816 94.7915 45.9396C94.779 45.9444 94.7807 45.967 94.796 45.9646C95.2953 45.8832 95.352 45.1971 95.2558 44.7777Z" fill="#263238"/>
+<path d="M94.8391 44.3201C94.1075 44.282 94.0845 45.7268 94.7622 45.7622C95.4294 45.7967 95.4524 44.3518 94.8391 44.3201Z" fill="#263238"/>
+<path d="M97.7396 44.762C97.7433 44.745 97.7747 44.7839 97.7739 44.8021C97.7521 45.2493 97.8041 45.7652 98.2124 45.9204C98.2253 45.9252 98.2232 45.9478 98.2083 45.9454C97.7082 45.8676 97.6462 45.1823 97.7396 44.762Z" fill="#263238"/>
+<path d="M98.1521 44.3008C98.8833 44.2575 98.9171 45.702 98.2399 45.7421C97.573 45.7817 97.5388 44.3369 98.1521 44.3008Z" fill="#263238"/>
+<path d="M94.3797 43.2203C94.5802 43.1739 94.7574 43.0981 94.9507 43.0322C95.1689 42.9576 95.3505 42.9203 95.4959 42.731C95.5736 42.6295 95.545 42.4445 95.452 42.3604C95.235 42.1652 94.9451 42.191 94.6785 42.2703C94.3894 42.3564 94.1889 42.4953 94.0201 42.7414C93.8558 42.9799 94.1152 43.2814 94.3797 43.2203Z" fill="#263238"/>
+<path d="M98.661 43.8608C98.4584 43.8251 98.2772 43.7588 98.0807 43.7029C97.8589 43.6398 97.6753 43.612 97.5202 43.4302C97.4369 43.3326 97.4558 43.1465 97.544 43.058C97.7498 42.8517 98.0413 42.8624 98.3115 42.9275C98.605 42.9981 98.8128 43.1267 98.9944 43.3636C99.1708 43.5929 98.9284 43.908 98.661 43.8608Z" fill="#263238"/>
+<path d="M94.2205 49.0183C94.3276 49.1246 94.4339 49.2707 94.5982 49.287C94.756 49.3024 94.9424 49.235 95.0882 49.1818C95.1027 49.1766 95.1168 49.1917 95.1075 49.2052C94.9867 49.375 94.7371 49.4786 94.5273 49.4393C94.3223 49.4008 94.2237 49.2243 94.1766 49.0381C94.1701 49.0119 94.2048 49.0028 94.2205 49.0183Z" fill="#263238"/>
+<path d="M96.8582 47.1055C96.8582 47.1055 96.8775 47.7753 96.8433 48.0864C96.84 48.1154 95.9493 47.9436 94.9894 48.1519C94.8456 48.1833 94.8597 48.0678 95.0256 47.9924C95.3578 47.8412 95.7798 47.6995 96.6013 47.7864C96.6331 47.7027 96.5521 46.7558 96.6025 46.7574C96.7768 46.7614 97.1042 46.9138 97.3019 46.9947C97.3027 45.5983 97.0764 44.2133 97.0986 42.8228C97.1002 42.7732 97.1735 42.7661 97.1831 42.8117C97.5246 44.2471 97.5592 45.8538 97.5963 47.2959C97.6031 47.4757 96.979 47.1721 96.8582 47.1055Z" fill="#263238"/>
+<path d="M95.9543 47.8485C95.9543 47.8485 95.6378 48.6334 95.1087 48.8441C94.4999 49.087 94.2913 48.5437 94.9126 48.064C95.2384 47.8124 95.9543 47.8485 95.9543 47.8485Z" fill="#263238"/>
+<path d="M95.3201 48.7213C95.2516 48.7729 95.1832 48.8166 95.1067 48.8443C94.547 49.0666 94.3255 48.6261 94.7765 48.1816C95.0829 48.2055 95.4167 48.3166 95.3201 48.7213Z" fill="#FF99BA"/>
+<path d="M89.2609 45.1348C89.997 45.3574 90.8442 43.1752 91.0838 42.3363C91.2948 41.597 91.5384 39.2514 91.5742 39.0914C91.6101 38.9315 94.7843 41.1669 96.6402 40.6323C98.4961 40.0978 99.7363 38.4565 99.762 37.6902C99.7874 36.9243 97.4833 34.9795 95.4893 34.8799C93.4953 34.7803 90.7963 37.2779 90.7963 37.2779C90.7963 37.2779 91.7131 36.1989 91.6821 36.1104C91.6511 36.0219 90.3626 36.5291 90.1258 37.4335C90.1258 37.4335 90.3807 36.2981 90.2833 36.2771C90.1858 36.2561 89.1848 37.2283 89.4107 37.9652C89.4107 37.9652 88.2526 38.9537 88.1455 40.0375C88.038 41.1216 88.396 44.8733 89.2609 45.1348Z" fill="#263238"/>
+<path d="M97.9602 40.2504C97.3961 40.5064 96.8308 40.7877 96.207 40.8687C95.533 40.9564 94.8335 40.7897 94.2062 40.5524C93.5643 40.3103 92.9813 39.9588 92.4514 39.529C91.9871 39.1524 91.5755 38.698 91.0799 38.3627C90.9558 38.279 90.8121 38.4548 90.8886 38.5675C91.6412 39.6802 92.9728 40.6092 94.2561 41.0104C95.6062 41.4322 96.8754 41.1354 97.9675 40.2651C97.9739 40.2595 97.9695 40.2461 97.9602 40.2504Z" fill="#263238"/>
+<path d="M90.0316 44.9409C90.0316 44.9409 88.8888 42.6544 87.858 43.025C86.8272 43.3957 87.4618 46.5552 88.5136 47.1338C89.5657 47.7124 90.1279 46.7632 90.1279 46.7632L90.0316 44.9409Z" fill="#EB9481"/>
+<path d="M88.0631 43.9263C88.0454 43.9219 88.0382 43.9461 88.0527 43.9549C88.7863 44.3858 89.0867 45.1632 89.2594 45.9486C89.0714 45.6279 88.7787 45.4235 88.3482 45.6378C88.3257 45.6489 88.3402 45.6835 88.3631 45.6823C88.6941 45.6632 88.9168 45.7529 89.0939 46.0386C89.2192 46.241 89.2888 46.4835 89.3662 46.7069C89.3919 46.7815 89.524 46.7636 89.5099 46.6803C89.5087 46.674 89.5075 46.6676 89.5063 46.6613C89.6794 45.6807 89.1189 44.1874 88.0631 43.9263Z" fill="#263238"/>
+<path d="M82.4805 55.1443C81.6933 59.6396 86.6183 74.7875 89.7893 77.6169C94.5049 81.8245 103.224 84.5912 106.383 85.4912C107.76 85.8837 111.57 76.3347 110.177 75.7057C107.193 74.3589 97.9235 71.5096 97.051 70.7779C96.1784 70.0461 90.8519 62.4936 88.4838 58.138C85.3072 52.2939 82.8787 52.8704 82.4805 55.1443Z" fill="#EB9481"/>
+<path d="M107.832 74.8652C107.832 74.8652 111.943 75.8978 114.6 76.6978C116.082 77.1438 118.553 78.1323 119.49 78.951C120.891 80.1756 125.957 86.1785 124.506 87.4206C123.193 88.5448 119.506 82.8427 119.506 82.8427C119.506 82.8427 123.743 88.2722 121.91 89.3393C120.076 90.4064 116.779 83.4178 116.779 83.4178C116.779 83.4178 121.006 89.0924 118.938 89.8984C117.376 90.5071 114.028 84.3436 114.028 84.3436C114.028 84.3436 117.626 89.246 116.047 89.9405C114.302 90.7079 110.849 85.2094 110.849 85.2094C106.533 86.3083 104.022 85.092 102.34 84.017C101.933 83.7558 107.832 74.8652 107.832 74.8652Z" fill="#EB9481"/>
+<path d="M118.162 80.8723C118.683 81.4922 119.215 82.1164 119.678 82.7799C120.142 83.4434 120.582 84.1236 120.981 84.8268C121.959 86.5514 122.298 87.782 122.268 87.7081C121.575 85.9637 119.953 83.5628 119.489 82.8989C119.027 82.2366 118.598 81.5517 118.136 80.8886C118.124 80.8719 118.149 80.8576 118.162 80.8723Z" fill="#263238"/>
+<path d="M115.699 82.4784C116.592 83.176 118.466 85.7741 119.189 87.5146C119.219 87.5876 119.179 87.5816 119.135 87.5154C118.569 86.6554 116.283 83.3209 115.678 82.4919C115.669 82.4788 115.687 82.4689 115.699 82.4784Z" fill="#263238"/>
+<path d="M113.336 83.4814C114.37 84.4902 115.238 85.8672 115.921 87.4589C115.952 87.5307 115.894 87.5196 115.851 87.4517C115.017 86.1136 114.373 85.058 113.293 83.5167C113.277 83.4925 113.312 83.458 113.336 83.4814Z" fill="#263238"/>
+<path d="M86.962 55.4758C83.2852 50.3511 81.0883 52.2507 81.8256 57.8131C82.5149 63.0152 84.3652 69.2125 84.3652 69.2125L93.643 64.7838C93.643 64.7838 89.3148 58.7556 86.962 55.4758Z" fill="#737791"/>
+<path d="M89.2102 57.4902C89.3415 57.7839 89.4136 58.0875 89.4712 58.3934C89.5215 58.701 89.5577 59.0105 89.534 59.3307C89.4023 59.0371 89.3302 58.7335 89.273 58.4276C89.2231 58.1196 89.1873 57.8101 89.2102 57.4902Z" fill="white"/>
+<path d="M83.7188 60.6067C84.0167 60.4773 84.3248 60.4067 84.6352 60.3495C84.9473 60.2999 85.2614 60.2642 85.5863 60.2876C85.2883 60.4174 84.9803 60.4884 84.6698 60.5448C84.3578 60.594 84.0433 60.6293 83.7188 60.6067Z" fill="white"/>
+<path d="M83.9588 52.6377C83.8408 52.9369 83.6741 53.2016 83.4953 53.4583C83.3105 53.7107 83.1136 53.9552 82.8672 54.1647C82.9848 53.8655 83.1519 53.6004 83.3307 53.3441C83.5159 53.0917 83.7128 52.8476 83.9588 52.6377Z" fill="white"/>
+<path d="M91.7865 62.999C91.6686 63.2978 91.5019 63.5629 91.3231 63.8197C91.1382 64.0721 90.9417 64.3165 90.6953 64.526C90.8129 64.2268 90.9796 63.9617 91.1588 63.7054C91.344 63.4534 91.5409 63.2089 91.7865 62.999Z" fill="white"/>
+<path d="M85.3678 66.1086C85.0642 65.9923 84.7956 65.8281 84.5351 65.6519C84.279 65.4697 84.031 65.2757 83.8184 65.0332C84.122 65.1491 84.3905 65.3134 84.6511 65.49C84.9072 65.6721 85.1548 65.8662 85.3678 66.1086Z" fill="white"/>
+<path d="M88.1939 57.0184C88.6876 57.6878 89.1994 58.3442 89.7092 59.0017C89.5799 58.6692 89.468 58.3331 89.3681 57.9898C89.3637 57.9739 89.3866 57.9672 89.3927 57.9823C89.4958 58.2454 89.6101 58.5049 89.7088 58.7696C89.7563 58.897 89.8046 59.0236 89.8541 59.1502C89.865 59.1775 89.8759 59.2045 89.8867 59.2315C90.2834 59.7446 90.6784 60.2589 91.0601 60.7823C91.5155 61.4073 91.9553 62.0431 92.397 62.6776C92.8532 63.3332 93.2861 64.1018 93.7681 64.7391C93.8099 64.7943 92.947 65.138 92.8665 65.182C92.7839 65.2272 92.728 65.1483 92.8157 65.1221C92.8967 65.0979 93.58 64.684 93.5885 64.6756C93.1471 64.036 92.6341 63.4443 92.1719 62.8189C91.712 62.1962 91.2502 61.5752 90.804 60.943C89.898 59.6589 89.0661 58.3247 88.167 57.035C88.1553 57.0188 88.1819 57.0021 88.1939 57.0184Z" fill="#263238"/>
+<path d="M82.0534 61.4929C82.1943 61.7636 82.3461 62.0314 82.4709 62.3096C82.5225 62.4247 82.5732 62.5398 82.6248 62.6549C82.4134 61.6644 82.206 60.6731 82.0002 59.681C81.9978 59.6695 82.0155 59.6636 82.0188 59.6755C82.444 61.2814 82.8736 62.8858 83.2682 64.4993C83.6447 66.0375 84.0993 67.5946 84.3148 69.1641C84.4432 69.1224 85.1652 68.828 85.1861 68.874C85.2071 68.9204 84.2423 69.3681 84.2294 69.3308C83.7043 67.797 83.379 66.0549 83.0218 64.4763C82.9211 64.0319 82.8273 63.5862 82.7311 63.1406C82.6264 62.8723 82.4995 62.614 82.3759 62.3533C82.245 62.0775 82.1396 61.7886 82.0248 61.506C82.0179 61.4898 82.0449 61.4771 82.0534 61.4929Z" fill="#263238"/>
+<path d="M84.5119 67.6834C85.8008 66.9671 91.1861 64.2199 92.3909 63.702C92.4742 63.6659 92.5181 63.7083 92.436 63.7564C88.6272 65.9929 85.8439 67.0905 84.5425 67.7314C84.5103 67.7473 84.4793 67.7017 84.5119 67.6834Z" fill="#263238"/>
+<path d="M232.065 172.01H109.381L127.121 72.8613H249.804L232.065 172.01Z" fill="#737791"/>
+<path d="M169.11 62.5938H128.958L127.121 72.8618H170.09L169.11 62.5938Z" fill="#737791"/>
+<g opacity="0.1">
+<path d="M232.065 172.01H109.381L127.121 72.8613H249.804L232.065 172.01Z" fill="#D7D7D7"/>
+<path d="M169.11 62.5938H128.958L127.121 72.8618H170.09L169.11 62.5938Z" fill="black"/>
+</g>
+<path d="M124.625 66.7823C124.467 66.2069 124.431 65.6311 124.424 65.0557C124.429 64.4799 124.465 63.9045 124.625 63.3291C124.785 63.9045 124.82 64.4803 124.826 65.0557C124.82 65.6315 124.784 66.2069 124.625 66.7823Z" fill="#263238"/>
+<path d="M121.057 67.7991C120.627 67.3789 120.304 66.8979 120.007 66.4031C119.719 65.9019 119.459 65.3856 119.305 64.8086C119.735 65.2284 120.058 65.7094 120.355 66.2046C120.641 66.7062 120.902 67.2225 121.057 67.7991Z" fill="#263238"/>
+<path d="M118.484 70.4376C117.899 70.2852 117.375 70.028 116.866 69.7459C116.363 69.453 115.875 69.1348 115.449 68.7109C116.035 68.8625 116.559 69.1197 117.067 69.4026C117.569 69.6963 118.057 70.0141 118.484 70.4376Z" fill="#263238"/>
+<path d="M117.594 73.9914C117.01 74.1477 116.426 74.1831 115.842 74.1898C115.258 74.1838 114.674 74.1489 114.09 73.9914C114.674 73.8342 115.258 73.7989 115.842 73.793C116.426 73.7997 117.01 73.835 117.594 73.9914Z" fill="#263238"/>
+<path d="M118.626 77.5078C118.2 77.9312 117.712 78.2495 117.21 78.5428C116.701 78.8257 116.177 79.0828 115.592 79.2344C116.018 78.8106 116.506 78.4924 117.008 78.1995C117.517 77.9173 118.041 77.6598 118.626 77.5078Z" fill="#263238"/>
+<path d="M121.303 80.0439C121.148 80.6205 120.887 81.1368 120.601 81.6384C120.304 82.1341 119.981 82.615 119.551 83.0345C119.705 82.4575 119.966 81.9412 120.253 81.44C120.55 80.9451 120.873 80.4642 121.303 80.0439Z" fill="#263238"/>
+<path d="M124.908 80.9219C125.067 81.4977 125.103 82.0731 125.11 82.6485C125.104 83.2239 125.068 83.7997 124.908 84.3751C124.749 83.7997 124.713 83.2239 124.707 82.6485C124.714 82.0731 124.75 81.4977 124.908 80.9219Z" fill="#263238"/>
+<path d="M128.477 79.9043C128.906 80.3245 129.229 80.8055 129.527 81.3003C129.814 81.8015 130.075 82.3178 130.229 82.8948C129.798 82.475 129.476 81.994 129.178 81.4988C128.892 80.9968 128.631 80.4809 128.477 79.9043Z" fill="#263238"/>
+<path d="M131.051 77.2666C131.636 77.419 132.16 77.6761 132.669 77.9583C133.172 78.2511 133.66 78.5694 134.085 78.9932C133.5 78.8416 132.976 78.5845 132.467 78.3015C131.965 78.0083 131.477 77.69 131.051 77.2666Z" fill="#263238"/>
+<path d="M131.941 73.7131C132.525 73.5567 133.11 73.5214 133.693 73.5146C134.277 73.5206 134.862 73.5555 135.445 73.7131C134.861 73.8702 134.277 73.9055 133.693 73.9115C133.109 73.9047 132.525 73.8698 131.941 73.7131Z" fill="#263238"/>
+<path d="M130.91 70.1963C131.337 69.7729 131.825 69.4547 132.327 69.1614C132.835 68.8789 133.359 68.6213 133.945 68.4697C133.519 68.8935 133.031 69.2118 132.528 69.5047C132.019 69.7868 131.495 70.044 130.91 70.1963Z" fill="#263238"/>
+<path d="M128.23 67.6604C128.385 67.0838 128.646 66.5676 128.932 66.066C129.229 65.5703 129.552 65.0894 129.982 64.6699C129.829 65.2469 129.568 65.7632 129.281 66.2644C128.983 66.7592 128.66 67.2402 128.23 67.6604Z" fill="#263238"/>
+<path d="M231.885 172.01H108.936L91.4805 76.4609H214.429L231.885 172.01Z" fill="#D7D7D7"/>
+<path d="M134.085 134.871C136.907 134.871 139.195 132.616 139.195 129.835C139.195 127.054 136.907 124.799 134.085 124.799C131.263 124.799 128.975 127.054 128.975 129.835C128.975 132.616 131.263 134.871 134.085 134.871Z" fill="#263238"/>
+<path d="M174.483 134.871C177.306 134.871 179.594 132.616 179.594 129.835C179.594 127.054 177.306 124.799 174.483 124.799C171.661 124.799 169.373 127.054 169.373 129.835C169.373 132.616 171.661 134.871 174.483 134.871Z" fill="#263238"/>
+<path d="M161.623 135.675L161.342 135.148C161.317 135.1 158.677 130.291 153.365 130.291C148.521 130.291 147.34 134.819 147.292 135.011L147.148 135.588L145.977 135.309L146.117 134.732C146.131 134.676 147.557 129.101 153.365 129.101C159.42 129.101 162.293 134.371 162.412 134.595L162.693 135.122L161.623 135.675Z" fill="#263238"/>
+<path d="M223.725 129.257C223.987 129.201 224.248 129.141 224.509 129.075" stroke="#263238" stroke-miterlimit="10"/>
+<path d="M226.053 128.624C232.212 126.575 237.37 121.8 237.856 116.221C238.925 103.919 223.723 97.1239 225.294 82.9086C226.792 69.3484 241.224 68.381 247.009 70.2552C253.399 72.3255 251.21 78.3783 245.425 77.5974C235.394 76.2434 229.089 65.4968 233.853 53.3061C237.412 44.1984 246.285 40.7635 249.889 39.7158" stroke="#263238" stroke-miterlimit="10" stroke-dasharray="4 4"/>
+<path d="M250.668 39.5036C251.167 39.377 251.451 39.3242 251.451 39.3242" stroke="#263238" stroke-miterlimit="10"/>
+<path d="M257.835 37.1311C256.807 33.9945 249.93 35.1215 251.273 39.2192C252.615 43.3173 258.863 40.2676 257.835 37.1311Z" fill="#263238"/>
+<path d="M247.532 35.8673C247.583 34.4919 249.525 33.4336 252.27 33.9217C255.015 34.4102 257.6 36.232 257.6 36.232C257.6 36.232 254.886 37.8682 252.112 38.1567C249.338 38.4456 247.481 37.2495 247.532 35.8673Z" fill="#EBEBEB"/>
+<path d="M257.6 36.2324C256.175 36.242 254.752 36.1951 253.328 36.1523C251.906 36.0924 250.483 36.0368 249.062 35.9233C250.488 35.913 251.911 35.9606 253.334 36.0035C254.757 36.0638 256.179 36.1197 257.6 36.2324Z" fill="#263238"/>
+<path d="M250.291 34.6494C250.703 34.8312 251.085 35.0617 251.468 35.2879C251.843 35.5292 252.22 35.7665 252.566 36.0526C252.154 35.8713 251.772 35.6407 251.389 35.4137C251.014 35.1728 250.637 34.9355 250.291 34.6494Z" fill="#263238"/>
+<path d="M254.024 36.1025C253.663 36.4045 253.271 36.6581 252.881 36.9156C252.481 37.1585 252.085 37.4057 251.656 37.6038C252.017 37.3018 252.409 37.0478 252.799 36.7906C253.198 36.5478 253.595 36.3014 254.024 36.1025Z" fill="#263238"/>
+<path d="M254.438 35.3271C254.65 35.4172 254.826 35.5518 255.005 35.6831C255.173 35.8276 255.344 35.9684 255.478 36.1545C255.265 36.0649 255.089 35.9299 254.911 35.7986C254.743 35.6537 254.572 35.5125 254.438 35.3271Z" fill="#263238"/>
+<path d="M250.149 44.0317C251.007 45.1178 253.21 44.8571 255.147 42.8793C257.083 40.9011 258.099 37.9336 258.099 37.9336C258.099 37.9336 254.927 38.1705 252.506 39.5352C250.084 40.8995 249.287 42.9404 250.149 44.0317Z" fill="#EBEBEB"/>
+<path d="M258.099 37.9326C256.937 38.7461 255.811 39.6045 254.682 40.4596C253.564 41.3283 252.442 42.1934 251.357 43.1037C252.52 42.2906 253.646 41.4319 254.774 40.5767C255.893 39.708 257.014 38.8429 258.099 37.9326Z" fill="#263238"/>
+<path d="M253.109 43.4291C253.336 43.0438 253.508 42.6375 253.686 42.2323C253.846 41.8208 254.011 41.4108 254.122 40.9795C253.895 41.3644 253.723 41.7712 253.546 42.1763C253.385 42.5879 253.221 42.9978 253.109 43.4291Z" fill="#263238"/>
+<path d="M255.272 40.0999C254.8 40.063 254.332 40.0833 253.863 40.0988C253.395 40.1317 252.926 40.1603 252.461 40.2464C252.933 40.2837 253.402 40.2634 253.871 40.2476C254.339 40.2142 254.807 40.1853 255.272 40.0999Z" fill="#263238"/>
+<path d="M256.07 40.4898C256.189 40.2942 256.252 40.0834 256.32 39.8739C256.37 39.6596 256.425 39.4469 256.424 39.2188C256.304 39.4144 256.241 39.6251 256.174 39.8346C256.124 40.0489 256.069 40.262 256.07 40.4898Z" fill="#263238"/>
+<path d="M257.835 37.1326C257.201 37.3342 256.521 36.9913 256.316 36.3663C256.112 35.7413 256.46 35.0714 257.094 34.8694C257.727 34.6675 258.408 35.0107 258.612 35.6357C258.817 36.2607 258.469 36.931 257.835 37.1326Z" fill="#455A64"/>
+<path d="M258.578 39.3951C257.943 39.5967 257.264 39.2538 257.059 38.6288C256.854 38.0038 257.202 37.334 257.836 37.132C258.471 36.9304 259.15 37.2733 259.355 37.8983C259.56 38.5229 259.212 39.1931 258.578 39.3951Z" fill="#455A64"/>
+<path d="M126.564 38.3855C125.987 43.8178 121.049 47.7627 115.537 47.1944C113.31 46.9647 111.33 46.0329 109.796 44.6412L104.775 45.3674L107.288 41.0896C106.678 39.628 106.421 38.0014 106.599 36.3272C107.176 30.895 112.114 26.95 117.626 27.5183C123.137 28.0866 127.14 32.9533 126.564 38.3855Z" fill="white"/>
+<path d="M126.564 38.3857C126.354 40.1913 125.685 41.9611 124.539 43.3993C124.275 43.7758 123.936 44.0905 123.629 44.4314C123.28 44.7306 122.955 45.0592 122.57 45.3152C121.836 45.8723 121.011 46.3092 120.149 46.6437C119.291 46.9997 118.368 47.1696 117.447 47.2787C116.983 47.3033 116.518 47.3449 116.053 47.3049C115.587 47.2946 115.123 47.2453 114.664 47.1624C112.827 46.8346 111.088 45.9874 109.699 44.7465L109.818 44.7826L104.802 45.5413L104.438 45.5965L104.622 45.2802L107.119 40.9941L107.108 41.1631C105.891 38.34 106.165 34.9781 107.726 32.3475C108.504 31.0304 109.588 29.8955 110.869 29.049C112.149 28.2002 113.633 27.668 115.152 27.4653C116.673 27.2665 118.238 27.403 119.691 27.8784C121.141 28.3597 122.471 29.1693 123.561 30.2173C125.776 32.2931 126.89 35.4075 126.564 38.3857ZM126.564 38.3857C126.869 35.4051 125.733 32.3098 123.517 30.2617C122.416 29.2375 121.084 28.4617 119.646 28.0113C118.206 27.5673 116.666 27.4613 115.183 27.6815C113.7 27.9057 112.265 28.4498 111.038 29.2951C109.813 30.1423 108.781 31.2502 108.035 32.5229C107.274 33.7927 106.88 35.2475 106.761 36.7079C106.667 38.173 106.91 39.6559 107.468 41.0167L107.504 41.1052L107.456 41.1861L104.929 45.4552L104.75 45.1941L109.775 44.5005L109.845 44.4909L109.894 44.5366C111.222 45.7656 112.904 46.6235 114.7 46.9763C115.148 47.0656 115.603 47.1215 116.061 47.1394C116.518 47.187 116.976 47.1537 117.435 47.1374C118.344 47.0453 119.26 46.8938 120.115 46.5557C120.974 46.2386 121.805 45.8231 122.536 45.2699C122.921 45.0179 123.246 44.6937 123.596 44.3981C123.904 44.0612 124.244 43.7501 124.509 43.3766C125.66 41.9512 126.342 40.1901 126.564 38.3857Z" fill="#263238"/>
+<path d="M111.676 41.9684C111.676 41.3779 112.092 40.9513 112.657 40.9513C113.257 40.9513 113.64 41.3779 113.64 41.9684C113.64 42.5426 113.257 42.9851 112.657 42.9851C112.075 42.9851 111.676 42.5422 111.676 41.9684ZM112.092 39.6227L111.859 31.75H113.456L113.223 39.6227H112.092Z" fill="#737791"/>
+<path d="M115.504 41.9684C115.504 41.3779 115.92 40.9513 116.486 40.9513C117.085 40.9513 117.468 41.3779 117.468 41.9684C117.468 42.5426 117.085 42.9851 116.486 42.9851C115.903 42.9851 115.504 42.5422 115.504 41.9684ZM115.92 39.6227L115.687 31.75H117.285L117.052 39.6227H115.92Z" fill="#737791"/>
+<path d="M119.332 41.9684C119.332 41.3779 119.748 40.9513 120.314 40.9513C120.913 40.9513 121.296 41.3779 121.296 41.9684C121.296 42.5426 120.913 42.9851 120.314 42.9851C119.731 42.9851 119.332 42.5422 119.332 41.9684ZM119.748 39.6227L119.515 31.75H121.113L120.88 39.6227H119.748Z" fill="#737791"/>
+</svg>
diff --git a/horilla_theme/static/horilla_theme/assets/img/not-found.svg b/horilla_theme/static/horilla_theme/assets/img/not-found.svg
new file mode 100644
index 000000000..4850fd0f0
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/img/not-found.svg
@@ -0,0 +1,246 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 508.7 367">
+  <defs>
+    <style>
+      .cls-1 {
+        opacity: .2;
+      }
+
+      .cls-1, .cls-2, .cls-3, .cls-4, .cls-5, .cls-6, .cls-7, .cls-8, .cls-9, .cls-10, .cls-11, .cls-12, .cls-13, .cls-14, .cls-15 {
+        isolation: isolate;
+      }
+
+      .cls-1, .cls-3, .cls-16, .cls-4, .cls-7, .cls-8, .cls-10, .cls-12, .cls-15 {
+        fill: #fff;
+      }
+
+      .cls-2 {
+        opacity: .6;
+      }
+
+      .cls-2, .cls-17, .cls-9 {
+        fill: #3e479b;
+      }
+
+      .cls-3 {
+        opacity: .9;
+      }
+
+      .cls-18, .cls-6 {
+        fill: #ecf1f7;
+      }
+
+      .cls-4 {
+        opacity: .2;
+      }
+
+      .cls-5 {
+        opacity: .7;
+      }
+
+      .cls-5, .cls-13, .cls-19 {
+        fill: #ef929c;
+      }
+
+      .cls-6 {
+        opacity: .8;
+      }
+
+      .cls-7 {
+        opacity: .3;
+      }
+
+      .cls-8 {
+        opacity: .1;
+      }
+
+      .cls-9 {
+        opacity: .8;
+      }
+
+      .cls-10 {
+        opacity: .5;
+      }
+
+      .cls-11 {
+        opacity: .5;
+      }
+
+      .cls-11, .cls-20 {
+        fill: #599af2;
+      }
+
+      .cls-21 {
+        fill: #f9dcd2;
+      }
+
+      .cls-12 {
+        opacity: .7;
+      }
+
+      .cls-13 {
+        opacity: .4;
+      }
+
+      .cls-22 {
+        fill: #373449;
+      }
+
+      .cls-23, .cls-15 {
+        opacity: .1;
+      }
+
+      .cls-14 {
+        opacity: .5;
+      }
+
+      .cls-14, .cls-24 {
+        fill: #4c65ba;
+      }
+    </style>
+  </defs>
+  <!-- Generator: Adobe Illustrator 28.6.0, SVG Export Plug-In . SVG Version: 1.2.0 Build 709)  -->
+  <g>
+    <g id="Layer_1">
+      <g id="OBJECTS">
+        <g>
+          <g>
+            <path class="cls-14" d="M332,2.5h125.3c1.2,0,2.1.9,2.1,2.1v41.2c0,1.2-.9,2.1-2.1,2.1h-90.3l-20.7,20.7v-20.7h-14.4c-1.2,0-2.1-.9-2.1-2.1V4.6c0-1.2.9-2.1,2.1-2.1Z"/>
+            <g>
+              <path class="cls-16" d="M350,16.2h89c.6,0,1-.3,1-.6s-.5-.6-1-.6h-89c-.6,0-1,.3-1,.6,0,.3.5.6,1,.6Z"/>
+              <path class="cls-16" d="M350,37.3h89c.6,0,1-.3,1-.6s-.5-.6-1-.6h-89c-.6,0-1,.3-1,.6,0,.3.5.6,1,.6Z"/>
+              <g>
+                <path class="cls-16" d="M392.5,26.3h46.5c.6,0,1-.3,1-.6s-.5-.6-1-.6h-46.5c-.6,0-1,.3-1,.6,0,.3.5.6,1,.6Z"/>
+                <path class="cls-16" d="M363.5,26.3h20.2c.6,0,1-.3,1-.6s-.5-.6-1-.6h-20.2c-.6,0-1,.3-1,.6,0,.3.5.6,1,.6Z"/>
+              </g>
+            </g>
+          </g>
+          <g>
+            <path class="cls-11" d="M415.9,132.9h63.4c2.8,0,5.1-2.3,5.1-5.1v-20.1c0-2.8-2.3-5.1-5.1-5.1h-63.4c-2.8,0-5.1,2.3-5.1,5.1v20.1c0,2.8,2.3,5.1,5.1,5.1Z"/>
+            <g>
+              <g>
+                <path class="cls-16" d="M428.1,109h75.6c2.3,0,4.2-1.9,4.2-4.2v-23.2c0-2.3-1.9-4.2-4.2-4.2h-75.6c-2.3,0-4.2,1.9-4.2,4.2v23.2c0,2.3,1.9,4.2,4.2,4.2Z"/>
+                <path class="cls-5" d="M428.1,109h75.6c2.3,0,4.2-1.9,4.2-4.2v-23.2c0-2.3-1.9-4.2-4.2-4.2h-75.6c-2.3,0-4.2,1.9-4.2,4.2v23.2c0,2.3,1.9,4.2,4.2,4.2Z"/>
+              </g>
+              <g>
+                <path class="cls-16" d="M481.3,96.9c-2,0-3.7-1.7-3.7-3.7s1.7-3.7,3.7-3.7,3.7,1.7,3.7,3.7c0,2-1.7,3.7-3.7,3.7ZM481.3,90.5c-1.5,0-2.7,1.2-2.7,2.7s1.2,2.7,2.7,2.7,2.7-1.2,2.7-2.7-1.2-2.7-2.7-2.7Z"/>
+                <path class="cls-16" d="M466.2,96.9c-2,0-3.7-1.7-3.7-3.7s1.7-3.7,3.7-3.7,3.7,1.7,3.7,3.7c0,2-1.7,3.7-3.7,3.7ZM466.2,90.5c-1.5,0-2.7,1.2-2.7,2.7s1.2,2.7,2.7,2.7,2.7-1.2,2.7-2.7-1.2-2.7-2.7-2.7Z"/>
+                <path class="cls-16" d="M452.2,96.9c-2,0-3.7-1.7-3.7-3.7s1.7-3.7,3.7-3.7,3.7,1.7,3.7,3.7c0,2-1.7,3.7-3.7,3.7ZM452.2,90.5c-1.5,0-2.7,1.2-2.7,2.7s1.2,2.7,2.7,2.7,2.7-1.2,2.7-2.7-1.2-2.7-2.7-2.7Z"/>
+              </g>
+            </g>
+          </g>
+        </g>
+        <g>
+          <g>
+            <g>
+              <path class="cls-22" d="M452.3,354.3h.2s0,1.9,0,1.9l-21.1.3v-1.4c0-.2.2-.4.4-.5,0,0,.1,0,.2,0l20.4-.3Z"/>
+              <path class="cls-22" d="M444.9,347.2h6.4c.2,0,.3,0,.4,0,0,0,0,0,.1.1.1.1.2.3.2.5v.7s.1,2.4.1,2.4v3.3c.1,0-20.3.3-20.3.3,0,0-.1,0-.2,0,.5-1.5,1.6-2.6,3.1-3l4.7-.4c1.1-.6,2.1-1.1,3.2-1.6l1.9-2.3s0,0,.1,0c0,0,0,0,0,0,0,0,.1,0,.2,0Z"/>
+            </g>
+            <path class="cls-22" d="M489.9,276l-14.9-42.7-.2-1.6h-40.7v22.4c0,2.9.1,5.7.4,8.6l7.8,86h11.2l2.8-97.8h.6c0,0,15.9,31.6,15.9,31.6l-11.9,26.9c-.2.4,0,.8.3,1l7.5,5.8c.6.5,1.5.3,1.9-.4l18.8-33.2c1.2-2,1.4-4.5.6-6.7Z"/>
+            <g>
+              <path class="cls-22" d="M458.2,315h-.1c0-.1-1.3,1.3-1.3,1.3l14.8,15.1,1-1c.2-.2.2-.4.1-.6,0,0,0,0,0-.1l-14.3-14.6Z"/>
+              <path class="cls-22" d="M468.4,315.2l-4.5-4.5c-.1-.1-.2-.2-.4-.2,0,0-.1,0-.2,0-.2,0-.3,0-.5.2l-.5.5-1.8,1.6-2.4,2.2,14.3,14.6s0,0,0,.1c.7-1.4.7-3,0-4.3l-3.1-3.6c-.4-1.2-.7-2.2-1.1-3.4l.3-3s0,0,0-.1c0,0,0,0,0,0,0,0,0,0,0-.1Z"/>
+            </g>
+          </g>
+          <g>
+            <path class="cls-21" d="M485,190c-.6-1.1-7.6,5.6-9.2,12.2,0,.3.1-.2,0,0l5.9,8.4-16.1,18,4.1,3.1s23.4-15.3,24.8-20.9c1-4-6.6-15.7-9.6-20.9Z"/>
+            <g>
+              <path class="cls-21" d="M398.9,188.1c-.4-.9-1.2-2.1-3.2-3.7l-3.6-3.1c-.3-.2-.6-.3-.9,0h-.1c-.3.3-.4.7-.2,1l1.6,2.6c.3.5,0,1.1-.6,1.1l-3.7-.3s0,0-.1,0l-4.7-1.1c-.4,0-.7.1-.8.5v.2c-.2.4,0,.8.5.9l4.9,1.5-6-.9c-.4,0-.8.2-.8.6h0c0,.4.2.8.6.9l6.1,1.5-5.3-.6c-.5,0-.8.4-.7.8v.2c.1.3.3.5.6.6l5.2,1-3.7.2c-.3,0-.6.2-.6.5-.1.4.2.8.7.9l4,.4s0,0,0,0c.5.1,7,1.5,9.5,1.6,0,0,0,0,0,0l26.4,2.5c0,0,.1,0,.2,0-1.3-3.9-2.1-8-2.4-12l-22.8,2.5Z"/>
+              <path class="cls-19" d="M485.3,190.1c-2.8-3.3-5.5-6.3-7.2-7.9-4.4-4.2-12.6-3.7-12.6-3.7l-22.1,1.7c-2.5.2-5.1.5-7.6,1-4.9.9-9.3,1.8-14.2,2.8,0,.5,0,1,0,1.4.3,4.1,1.1,8.1,2.4,12,0,.2.1.3.2.5,5.6-.6,9.9-1,9.9-1v45.8c-.1,0,40.6-9.2,40.6-9.2l-1.8-33.5,2.9,1.8c2.7-4.3,6-8.2,9.5-11.9Z"/>
+            </g>
+          </g>
+          <g>
+            <path class="cls-22" d="M476.1,170.6c-1.8-6.1-5.4-7.8-7.9-8.3,1.5-2.5,2.6-5.3,2.9-8.4.8-8.8-13.8-23.5-22.4-12.8-2.8,0-6.1,1.3-9.4,5.3-6.2,7.4-4.3,13.4-2.3,16.6,1,1.5,2.4,2.7,4.1,3.3l13,4.9c2.7,1,5.7.4,7.8-1.5.8-.7,1.7-1.6,2.6-2.6,4.4,1.9,2.3,6,2.3,6-4.4,9.4,1,14.1,5,16.8,1.7,1.2,4.1.2,4.5-1.9.8-4.3,1.6-11.4-.2-17.6Z"/>
+            <g>
+              <path class="cls-21" d="M463,157.1h-.6s0,0,0,0l-2.8,4.5c-3.7-1.9-5.1-6.7-5.5-10.9-3.1,2-8,4.3-14.6,4.4l-1.1,10.9c-.6,6,4.8,10.5,9.6,10.8v3.6c-.8,4.1,1.5,7.9,4.9,8.4,3.2.5,6.3-2.1,7-5.9l1.3-17.7c0,0,.1,0,.2,0h1.2c1.5.2,2.7-1,2.8-2.4l.2-2.7c0-1.5-1-2.7-2.5-2.8Z"/>
+              <polygon class="cls-13" points="456.4 176.8 447.8 176.9 447.8 180 456.4 176.8"/>
+            </g>
+            <g>
+              <g>
+                <path class="cls-22" d="M443.1,158.6c-.2,0-.5,0-.7,0-.2,0-.5,0-.7,0-.2,0-.5,0-.7,0-.2,0-.5,0-.7-.1-.2-.1-.2-.4,0-.7.2-.3.8-.7,1.5-.6.7,0,1.2.5,1.4.8.2.4,0,.6-.1.7Z"/>
+                <path class="cls-22" d="M451.7,159.2c-.2,0-.5,0-.7,0-.2,0-.5,0-.7,0-.2,0-.5,0-.7,0-.2,0-.5,0-.7-.1-.2-.1-.2-.4,0-.7.2-.3.8-.7,1.5-.6.7,0,1.2.5,1.4.8.2.4,0,.6-.1.7Z"/>
+                <path class="cls-22" d="M441.2,162.1h0c-.3,0-.5-.3-.5-.6v-1.1c.1-.3.4-.5.7-.5h0c.3,0,.5.3.5.6v1.1c-.1.3-.4.5-.7.5Z"/>
+                <path class="cls-22" d="M449.5,162.9h0c-.3,0-.5-.3-.5-.6v-1.1c.1-.3.4-.5.7-.5h0c.3,0,.5.3.5.6v1.1c-.1.3-.4.5-.7.5Z"/>
+              </g>
+              <path class="cls-19" d="M445.8,165s0,0,0,0h-.9c-.5,0-1-.4-1.3-.9-.3-.5-.2-1,0-1.5h0c0,0,0-.1,0-.1.8-.3,1.4-1.1,1.5-1.9v-.3c0-.1.2-.2.3-.2.1,0,.2.1.2.3v.3c-.2,1-.8,1.9-1.7,2.3-.1.3-.1.7,0,1,.2.3.5.5.9.6h.9c.1,0,.2.2.2.3,0,.1-.1.2-.2.2Z"/>
+              <path class="cls-16" d="M449,169.7h-2.2c-.5-.2-.9-.6-.8-1.1v-2.2c.1,0,5.2.3,5.2.3v1.1c-.1,1.1-1.1,1.9-2.2,1.9Z"/>
+            </g>
+          </g>
+        </g>
+        <g>
+          <g>
+            <path class="cls-9" d="M85.1,133H2.2c-.8,0-1.4.6-1.4,1.4v27.3c0,.8.6,1.4,1.4,1.4h59.7l13.7,13.7v-13.7h9.5c.8,0,1.4-.6,1.4-1.4v-27.3c0-.8-.6-1.4-1.4-1.4Z"/>
+            <g>
+              <path class="cls-16" d="M73.2,142.2H14.3c-.4,0-.7-.2-.7-.4s.3-.4.7-.4h58.9c.4,0,.7.2.7.4s-.3.4-.7.4Z"/>
+              <path class="cls-16" d="M73.2,156.1H14.3c-.4,0-.7-.2-.7-.4s.3-.4.7-.4h58.9c.4,0,.7.2.7.4s-.3.4-.7.4Z"/>
+              <g>
+                <path class="cls-16" d="M45.1,148.8H14.3c-.4,0-.7-.2-.7-.4s.3-.4.7-.4h30.8c.4,0,.7.2.7.4s-.3.4-.7.4Z"/>
+                <path class="cls-16" d="M64.3,148.8h-13.4c-.4,0-.7-.2-.7-.4s.3-.4.7-.4h13.4c.4,0,.7.2.7.4s-.3.4-.7.4Z"/>
+              </g>
+            </g>
+          </g>
+          <g>
+            <path class="cls-11" d="M165.2,114.6H55.2c-4.9,0-8.9-4-8.9-8.9v-34.9c0-4.9,4-8.9,8.9-8.9h110c4.9,0,8.9,4,8.9,8.9v34.9c0,4.9-4,8.9-8.9,8.9Z"/>
+            <g>
+              <g>
+                <path class="cls-16" d="M143.8,73H12.6c-4,0-7.2-3.2-7.2-7.2V25.6c0-4,3.2-7.2,7.2-7.2h131.2c4,0,7.2,3.2,7.2,7.2v40.2c0,4-3.2,7.2-7.2,7.2Z"/>
+                <path class="cls-5" d="M143.8,73H12.6c-4,0-7.2-3.2-7.2-7.2V25.6c0-4,3.2-7.2,7.2-7.2h131.2c4,0,7.2,3.2,7.2,7.2v40.2c0,4-3.2,7.2-7.2,7.2Z"/>
+              </g>
+              <g>
+                <path class="cls-16" d="M51.6,51.7c-3.3,0-6-2.7-6-6s2.7-6,6-6,6,2.7,6,6-2.7,6-6,6ZM51.6,40.6c-2.8,0-5,2.3-5,5s2.3,5,5,5,5-2.3,5-5-2.3-5-5-5Z"/>
+                <path class="cls-16" d="M77.7,51.7c-3.3,0-6-2.7-6-6s2.7-6,6-6,6,2.7,6,6-2.7,6-6,6ZM77.7,40.6c-2.8,0-5,2.3-5,5s2.3,5,5,5,5-2.3,5-5-2.3-5-5-5Z"/>
+                <path class="cls-16" d="M102.1,51.7c-3.3,0-6-2.7-6-6s2.7-6,6-6,6,2.7,6,6-2.7,6-6,6ZM102.1,40.6c-2.8,0-5,2.3-5,5s2.3,5,5,5,5-2.3,5-5-2.3-5-5-5Z"/>
+              </g>
+            </g>
+          </g>
+        </g>
+        <g>
+          <g>
+            <rect class="cls-17" x="225.4" y="299.6" width="65.5" height="47.9"/>
+            <path class="cls-17" d="M412.4,284.4H103.8c-4.6,0-8.3-3.7-8.3-8.3V93.4c0-4.6,3.7-8.3,8.3-8.3h308.6c4.6,0,8.3,3.7,8.3,8.3v182.7c0,4.6-3.7,8.3-8.3,8.3Z"/>
+            <path class="cls-24" d="M411,304.3H105.2c-5.3,0-9.7-5.1-9.7-11.4v-29.5h325.1v29.5c0,6.3-4.3,11.4-9.7,11.4Z"/>
+            <path class="cls-16" d="M404.9,262.6H111.4c-1,0-1.8-.8-1.8-1.8V100.7c0-1,.8-1.8,1.8-1.8h293.5c1,0,1.8.8,1.8,1.8v160.2c0,1-.8,1.8-1.8,1.8Z"/>
+            <path class="cls-6" d="M384.3,251.6h-252.4c-1,0-1.8-.8-1.8-1.8V112.3c0-1,.8-1.8,1.8-1.8h252.4c1,0,1.8.8,1.8,1.8v137.5c0,1-.8,1.8-1.8,1.8Z"/>
+            <path class="cls-16" d="M258.1,296c-6.6,0-11.9-5.3-11.9-11.9s5.3-11.9,11.9-11.9,11.9,5.3,11.9,11.9-5.3,11.9-11.9,11.9ZM258.1,273.2c-6,0-10.9,4.9-10.9,10.9s4.9,10.9,10.9,10.9,10.9-4.9,10.9-10.9-4.9-10.9-10.9-10.9Z"/>
+            <path class="cls-24" d="M327.7,355.7h-139.2v-2c0-6.6,5.4-12,12-12h115.2c6.6,0,12,5.4,12,12v2h0Z"/>
+            <g>
+              <circle class="cls-3" cx="258.1" cy="147.7" r="8.7"/>
+              <circle class="cls-4" cx="258.1" cy="213.8" r="8.7"/>
+              <circle class="cls-10" cx="291.2" cy="180.7" r="8.7"/>
+              <circle class="cls-16" cx="225.1" cy="180.7" r="8.7"/>
+              <path class="cls-12" d="M287.6,163.5c-3.4,3.4-8.9,3.4-12.3,0s-3.4-8.9,0-12.3c3.4-3.4,8.9-3.4,12.3,0,3.4,3.4,3.4,8.9,0,12.3Z"/>
+              <circle class="cls-15" cx="234.8" cy="204.1" r="8.7"/>
+              <path class="cls-7" d="M275.3,210.2c-3.4-3.4-3.4-8.9,0-12.3s8.9-3.4,12.3,0,3.4,8.9,0,12.3c-3.4,3.4-8.9,3.4-12.3,0Z"/>
+              <path class="cls-16" d="M228.6,163.5c-3.4-3.4-3.4-8.9,0-12.3,3.4-3.4,8.9-3.4,12.3,0s3.4,8.9,0,12.3c-3.4,3.4-8.9,3.4-12.3,0Z"/>
+            </g>
+            <g>
+              <path class="cls-11" d="M404.9,115.6H111.4c-1,0-1.8-.8-1.8-1.8v-13.2c0-1,.8-1.8,1.8-1.8h293.5c1,0,1.8.8,1.8,1.8v13.2c0,1-.8,1.8-1.8,1.8Z"/>
+              <path class="cls-18" d="M378.2,107c0,.8-.7,1.5-1.5,1.5s-1.5-.7-1.5-1.5.7-1.5,1.5-1.5c.8,0,1.5.7,1.5,1.5Z"/>
+              <path class="cls-18" d="M394.4,107c0,.8-.7,1.5-1.5,1.5s-1.5-.7-1.5-1.5.7-1.5,1.5-1.5,1.5.7,1.5,1.5Z"/>
+              <circle class="cls-18" cx="384.8" cy="107" r="1.5"/>
+            </g>
+          </g>
+          <g>
+            <path class="cls-20" d="M119.1,276.8l1.6-4.5c.7-2,2.6-3.3,4.7-3.3h39.1c2.8,0,5,2.2,5,5v77.8c0,2.8-2.2,5-5,5H46.4c-2.8,0-5-2.2-5-5v-66.6c0-2.8,2.2-5,5-5h67.9c2.1,0,4-1.3,4.7-3.3Z"/>
+            <path class="cls-8" d="M121.9,281.4l1.5-4.3c.7-1.9,2.4-3.2,4.4-3.2h36.9c2.6,0,4.7,2.1,4.7,4.7v73.4c0,2.6-2.1,4.7-4.7,4.7H53.5c-2.6,0-4.7-2.1-4.7-4.7v-62.8c0-2.6,2.1-4.7,4.7-4.7h64c2,0,3.8-1.3,4.4-3.2Z"/>
+          </g>
+        </g>
+        <g>
+          <g>
+            <circle class="cls-1" cx="315.1" cy="197.1" r="69.7"/>
+            <circle class="cls-6" cx="319.1" cy="155.4" r="15.1"/>
+          </g>
+          <path class="cls-2" d="M315.1,268.8c-39.6,0-71.7-32.2-71.7-71.7s32.2-71.7,71.7-71.7,71.7,32.2,71.7,71.7-32.2,71.7-71.7,71.7ZM315.1,129.4c-37.3,0-67.7,30.4-67.7,67.7s30.4,67.7,67.7,67.7,67.7-30.4,67.7-67.7c0-37.3-30.4-67.7-67.7-67.7Z"/>
+          <path class="cls-17" d="M426.7,296.1l-45.9-45c-.9-.9-1.9-1.6-3-2,11.7-14.1,18.8-32.2,18.8-52,0-44.9-36.4-81.4-81.4-81.4s-81.4,36.4-81.4,81.4,36.4,81.4,81.4,81.4,36.1-6.4,49.9-17.1c.5,1.3,1.2,2.5,2.3,3.5l45.9,45c1.9,1.8,4.3,2.8,6.7,2.8s5-1,6.9-2.9c3.7-3.8,3.7-9.9-.1-13.6ZM245.4,197.1c0-38.5,31.2-69.7,69.7-69.7s69.7,31.2,69.7,69.7-31.2,69.7-69.7,69.7-69.7-31.2-69.7-69.7Z"/>
+          <g>
+            <path class="cls-20" d="M475.8,334.9l-66.8-66.8c-1.7-1.7-26.3,22.9-24.6,24.6l66.8,66.8c6.8,6.8,17.8,6.8,24.6,0h0c6.8-6.8,6.8-17.8,0-24.6ZM470.8,346.2c0,3.4-2.7,6.1-6.1,6.1s-6.1-2.7-6.1-6.1h0c0-3.4,2.7-6.1,6.1-6.1,3.4,0,6.1,2.7,6.1,6.1h0Z"/>
+            <g class="cls-23">
+              <path class="cls-16" d="M468,351.3c-1,.6-2.1,1-3.4,1-3.4,0-6.1-2.7-6.1-6.1h0c0-1.3.4-2.5,1.1-3.5-15.3-15.8-37.8-39-51.4-52.9-7-7.2-11.6-12-11.7-11.9-6.6,6.5-13.2,13.9-12.3,14.8l66.8,66.8c6.8,6.8,17.8,6.8,24.6,0h0s-3-3.2-7.8-8.2Z"/>
+            </g>
+            <path class="cls-16" d="M412.6,272.3l-24.1,24.1c-1.1,1.1-2.9,1.1-4,0l-4.4-4.4c-1.1-1.1-1.1-2.9,0-4l24.1-24.1c1.1-1.1,2.9-1.1,4,0l4.4,4.4c1.1,1.1,1.1,2.9,0,4Z"/>
+          </g>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/horilla_theme/static/horilla_theme/assets/img/user.png b/horilla_theme/static/horilla_theme/assets/img/user.png
new file mode 100644
index 000000000..0d413d8f4
Binary files /dev/null and b/horilla_theme/static/horilla_theme/assets/img/user.png differ
diff --git a/horilla_theme/static/horilla_theme/assets/js/footerScripts.js b/horilla_theme/static/horilla_theme/assets/js/footerScripts.js
new file mode 100644
index 000000000..79bfa5b95
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/js/footerScripts.js
@@ -0,0 +1,492 @@
+async function loadComponent(elementId, path) {
+    try {
+        const response = await fetch(path);
+        const html = await response.text();
+        document.getElementById(elementId).innerHTML = html;
+    } catch (error) {
+        console.error("Error loading component:", error);
+    }
+}
+
+
+// Gender Chart
+
+document.addEventListener("DOMContentLoaded", () => {
+    const ctx = document
+        .getElementById("genderChart")
+        .getContext("2d");
+
+    // Load image only once
+    const centerImage = new Image();
+    centerImage.src =
+        "/static/horilla_theme/assets/img/icons/gender.svg";
+
+    new Chart(ctx, {
+        type: "doughnut",
+        data: {
+            labels: ["Male", "Female", "Others"],
+            datasets: [
+                {
+                    data: [35, 55, 10],
+                    backgroundColor: [
+                        "#cfe9ff",
+                        "#ffc9de",
+                        "#e6ccff",
+                    ],
+                    borderWidth: 0,
+                },
+            ],
+        },
+        options: {
+            cutout: "70%",
+            responsive: true,
+            maintainAspectRatio: false,
+            plugins: {
+                legend: {
+                    position: "bottom",
+                    labels: {
+                        usePointStyle: true,
+                        pointStyle: "circle",
+                        padding: 20,
+                        font: {
+                            size: 12,
+                        },
+                        color: "#000",
+                    },
+                },
+            },
+        },
+        plugins: [
+            {
+                id: "centerIcon",
+                afterDraw(chart) {
+                    if (!centerImage.complete) return; // Wait till image is loaded
+                    const ctx = chart.ctx;
+                    const size = 70;
+                    ctx.drawImage(
+                        centerImage,
+                        chart.width / 2 - size / 2,
+                        chart.height / 2 - size / 2 - 20,
+                        size,
+                        size
+                    );
+                },
+            },
+        ],
+    });
+});
+
+
+// Department chart
+
+document.addEventListener("DOMContentLoaded", () => {
+    const ctx = document
+        .getElementById("departmentChart")
+        .getContext("2d");
+
+    const departmentLabels = [
+        "Sales Dept",
+        "IT Dept",
+        "DM Dept",
+        "SEO Dept",
+        "Odoo Dept",
+        "Horilla Dept",
+    ];
+
+    const departmentColors = [
+        "#facc15",
+        "#f87171",
+        "#ddd6fe",
+        "#a5b4fc",
+        "#93c5fd",
+        "#d1d5db",
+    ];
+
+    const departmentValues = [1000, 800, 900, 1100, 2000, 1070];
+
+    const visibility = Array(departmentLabels.length).fill(true);
+
+    const departmentChart = new Chart(ctx, {
+        type: "doughnut",
+        data: {
+            labels: departmentLabels,
+            datasets: [
+                {
+                    data: departmentValues,
+                    backgroundColor: departmentColors,
+                    borderWidth: 0,
+                    borderRadius: 10,
+                    hoverOffset: 8,
+                },
+            ],
+        },
+        options: {
+            cutout: "70%",
+            responsive: true,
+            maintainAspectRatio: false,
+            plugins: {
+                legend: { display: false },
+                tooltip: {
+                    backgroundColor: "#111827",
+                    bodyColor: "#f3f4f6",
+                    borderColor: "#e5e7eb",
+                    borderWidth: 1,
+                },
+            },
+        },
+        plugins: [
+            {
+                id: "centerText",
+                afterDraw(chart) {
+                    const { width, height, ctx } = chart;
+                    ctx.save();
+
+                    const total =
+                        chart.data.datasets[0].data.reduce(
+                            (sum, val) => sum + val,
+                            0
+                        );
+
+                    ctx.font = "bold 22px sans-serif";
+                    ctx.fillStyle = "#374151";
+                    ctx.textAlign = "center";
+                    ctx.textBaseline = "middle";
+                    ctx.fillText(total, width / 2, height / 2 - 5);
+
+                    ctx.font = "15px sans-serif";
+                    ctx.fillStyle = "#9ca3af";
+                    ctx.fillText(
+                        "Total",
+                        width / 2,
+                        height / 2 + 20
+                    );
+
+                    ctx.restore();
+                },
+            },
+        ],
+    });
+
+    // Make custom legend items clickable
+    const legendItems =
+        document.querySelectorAll("#chartLegend > div");
+
+    legendItems.forEach((item, index) => {
+        item.style.cursor = "pointer";
+
+        item.addEventListener("click", () => {
+            visibility[index] = !visibility[index];
+
+            // Update chart dataset
+            departmentChart.data.datasets[0].data =
+                departmentValues.map((val, i) =>
+                    visibility[i] ? val : 0
+                );
+
+            // Dim legend dot and strike-through label
+            const span = item.querySelector("span");
+            if (visibility[index]) {
+                span.style.opacity = "1";
+                item.style.textDecoration = "none";
+            } else {
+                span.style.opacity = "0.4";
+                item.style.textDecoration = "line-through";
+            }
+
+            departmentChart.update();
+        });
+    });
+});
+
+// Onboarding Chart
+
+
+
+document.addEventListener("DOMContentLoaded", () => {
+    const ctx = document
+        .getElementById("recruitmentChart")
+        .getContext("2d");
+
+    const labels = [
+        "Recruitment drive",
+        "Future force recruitment",
+        "Administrative assistant",
+    ];
+    const colors = ["#a5b4fc", "#fca5a5", "#fdba74"];
+    const dataValues = [35, 45, 38];
+    const visibility = [true, true, true];
+
+    const chart = new Chart(ctx, {
+        type: "bar",
+        data: {
+            labels: labels,
+            datasets: [
+                {
+                    label: "Recruitment Count",
+                    data: dataValues,
+                    backgroundColor: colors,
+                    borderRadius: 20,
+                    barPercentage: 0.6,
+                    categoryPercentage: 0.6,
+                },
+            ],
+        },
+        options: {
+            responsive: true,
+            maintainAspectRatio: false,
+            plugins: {
+                legend: { display: false },
+                tooltip: { enabled: true },
+            },
+            scales: {
+                y: {
+                    beginAtZero: true,
+                    max: 100,
+                    ticks: { stepSize: 20 },
+                    grid: { drawBorder: false, color: "#e5e7eb" },
+                },
+                x: {
+                    ticks: { display: false },
+                    grid: { display: false },
+                    border: { display: true, color: "#d1d5db" },
+                },
+            },
+        },
+    });
+
+    // Create clickable legend dynamically
+    const legendContainer =
+        document.getElementById("recruitmentLegend");
+    labels.forEach((label, i) => {
+        const item = document.createElement("div");
+        item.className = "flex items-center gap-2 cursor-pointer";
+        item.innerHTML = `
+      <span class="w-4 h-4 rounded-full inline-block" style="background:${colors[i]}; transition: 0.3s;"></span>
+      <span>${label}</span>
+    `;
+        item.addEventListener("click", () => {
+            visibility[i] = !visibility[i];
+
+            // Update data & bar color
+            chart.data.datasets[0].data = dataValues.map(
+                (val, index) => (visibility[index] ? val : 0)
+            );
+            chart.data.datasets[0].backgroundColor = colors.map(
+                (color, index) =>
+                    visibility[index] ? color : "#e5e7eb"
+            );
+            chart.update();
+
+            // Update legend visuals
+            const dot = item.querySelector("span");
+            const text = item.querySelectorAll("span")[1];
+            dot.style.opacity = visibility[i] ? "1" : "0.4";
+            text.style.textDecoration = visibility[i]
+                ? "none"
+                : "line-through";
+        });
+
+        legendContainer.appendChild(item);
+    });
+});
+
+
+// Recruitment Chart
+
+document.addEventListener("DOMContentLoaded", () => {
+    const ctx = document
+        .getElementById("recruitmentFlowChart")
+        .getContext("2d");
+
+    new Chart(ctx, {
+        type: "bar",
+        data: {
+            labels: [
+                "Initial",
+                "Applied",
+                "Test",
+                "Interview",
+                "Cancelled",
+                "Hired",
+            ],
+            datasets: [
+                {
+                    label: "Recruitment Drive",
+                    data: [55, 35, 0, 0, 28, 90],
+                    backgroundColor: "#a5b4fc",
+                    borderRadius: 10,
+                    barPercentage: 0.8,
+                    categoryPercentage: 0.6,
+                },
+                {
+                    label: "Future Force Recruitment",
+                    data: [0, 15, 0, 0, 0, 65],
+                    backgroundColor: "#fca5a5",
+                    borderRadius: 10,
+                    barPercentage: 0.8,
+                    categoryPercentage: 0.6,
+                },
+                {
+                    label: "Administrative Assistant",
+                    data: [0, 0, 0, 0, 0, 15],
+                    backgroundColor: "#fdba74",
+                    borderRadius: 10,
+                    barPercentage: 0.8,
+                    categoryPercentage: 0.6,
+                },
+            ],
+        },
+        options: {
+            responsive: true,
+            maintainAspectRatio: false,
+            scales: {
+                y: {
+                    beginAtZero: true,
+                    ticks: {
+                        stepSize: 20,
+                        color: "#6b7280",
+                    },
+                    grid: {
+                        color: "#e5e7eb",
+                    },
+                },
+                x: {
+                    ticks: {
+                        color: "#6b7280",
+                    },
+                    grid: {
+                        display: false,
+                    },
+                },
+            },
+            plugins: {
+                legend: {
+                    position: "bottom",
+                    labels: {
+                        usePointStyle: true,
+                        pointStyle: "circle",
+                        font: {
+                            size: 12,
+                        },
+                        color: "#374151",
+                        padding: 15,
+                    },
+                },
+                tooltip: {
+                    enabled: true,
+                },
+            },
+        },
+    });
+});
+
+
+document.addEventListener("DOMContentLoaded", () => {
+    const ctx = document
+        .getElementById("hiredChart")
+        .getContext("2d");
+
+    const labels = [
+        "Recruitment drive",
+        "Future force recruitment",
+        "Administrative assistant",
+    ];
+    const colors = ["#a5b4fc", "#fca5a5", "#fdba74"];
+    const values = [35, 45, 38];
+    const visibility = [true, true, true];
+
+    const chart = new Chart(ctx, {
+        type: "bar",
+        data: {
+            labels: labels,
+            datasets: [
+                {
+                    label: "Recruitment Count",
+                    data: values,
+                    backgroundColor: colors,
+                    borderRadius: 20,
+                    barPercentage: 0.6,
+                    categoryPercentage: 0.6,
+                },
+            ],
+        },
+        options: {
+            responsive: true,
+            maintainAspectRatio: false,
+            plugins: {
+                legend: { display: false },
+                tooltip: { enabled: true },
+            },
+            scales: {
+                y: {
+                    beginAtZero: true,
+                    max: 100,
+                    ticks: { stepSize: 20 },
+                    grid: { drawBorder: false, color: "#e5e7eb" },
+                },
+                x: {
+                    ticks: { display: false },
+                    grid: { display: false },
+                    border: { display: true, color: "#d1d5db" },
+                },
+            },
+        },
+    });
+
+    // Toggle bars and strike text
+    const legendItems =
+        document.querySelectorAll("#hiredLegend > div");
+    legendItems.forEach((item, i) => {
+        item.addEventListener("click", () => {
+            visibility[i] = !visibility[i];
+
+            // Update chart data
+            chart.data.datasets[0].data = values.map((val, index) =>
+                visibility[index] ? val : 0
+            );
+            chart.data.datasets[0].backgroundColor = colors.map(
+                (col, index) =>
+                    visibility[index] ? col : "#e5e7eb"
+            );
+            chart.update();
+
+            // Update legend visuals
+            const dot = item.querySelectorAll("span")[0];
+            const text = item.querySelectorAll("span")[1];
+
+            dot.style.opacity = visibility[i] ? "1" : "0.4";
+            text.style.textDecoration = visibility[i]
+                ? "none"
+                : "line-through";
+        });
+    });
+});
+
+
+
+function validateFile(element, fileTarget, reload = false) {
+    var fileInput = document.getElementById(fileTarget);
+    var filePath = fileInput.value;
+    var allowedExtensions = /(\.xlsx|\.csv)$/i;
+
+    if (!allowedExtensions.exec(filePath)) {
+        Swal.fire({
+            icon: 'error',
+            title: "Invalid File",
+            text: "Please upload a valid XLSX file.",
+            customClass: {
+                popup: 'file-xlsx-validation',
+            },
+        })
+            .then((result) => {
+                if (result.isConfirmed && reload) {
+                    $(".oh-modal--show").removeClass("oh-modal--show");
+                    window.location.reload()
+                }
+            })
+            ;
+        fileInput.value = '';
+        return false;
+    }
+    $(this).closest("form").submit();
+}
diff --git a/horilla_theme/static/horilla_theme/assets/js/global.js b/horilla_theme/static/horilla_theme/assets/js/global.js
new file mode 100644
index 000000000..69f8b4015
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/js/global.js
@@ -0,0 +1,31 @@
+document.addEventListener("DOMContentLoaded", () => {
+  // Open modal
+  document.querySelectorAll("[data-modal-open]").forEach((btn) => {
+    btn.addEventListener("click", () => {
+      const modalId = btn.getAttribute("data-modal-open");
+      const modal = document.getElementById(modalId);
+      const box = modal.querySelector(".modal-box");
+
+      modal.classList.remove("hidden");
+      setTimeout(() => {
+        box.classList.remove("opacity-0", "scale-95");
+        box.classList.add("opacity-100", "scale-100");
+      }, 10);
+    });
+  });
+
+  // Close modal
+  document.querySelectorAll("[data-modal-close]").forEach((btn) => {
+    btn.addEventListener("click", () => {
+      const modalId = btn.getAttribute("data-modal-close");
+      const modal = document.getElementById(modalId);
+      const box = modal.querySelector(".modal-box");
+
+      box.classList.remove("opacity-100", "scale-100");
+      box.classList.add("opacity-0", "scale-95");
+      setTimeout(() => {
+        modal.classList.add("hidden");
+      }, 300);
+    });
+  });
+});
diff --git a/horilla_theme/static/horilla_theme/assets/js/tailwind.config.js b/horilla_theme/static/horilla_theme/assets/js/tailwind.config.js
new file mode 100644
index 000000000..4d4939144
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/js/tailwind.config.js
@@ -0,0 +1,79 @@
+window.tailwind.config = {
+  theme: {
+    colors: {
+      white: '#FFFFFF',
+      primary: {
+        50: '#f6f6f6',
+        100: '#FFF5F1',
+        200: '#FEF6F5',
+        300: '#FCEDEB',
+        400: '#FBE5E1',
+        500: '#F7C8C1',
+        600: '#E54F38',
+        700: '#ce4732',
+        800: '#AC3B2A',
+        900: '#672419',
+      },
+
+      dark: {
+        50: '#E6E6E6',
+        100: '#A8A8A8',
+        200: '#515151',
+        300: '#501C14',
+        400: '#64748B',
+        500: '#190906',
+        600: '#000000',
+      },
+
+      secondary: {
+        50: '#f8fafc',
+        100: '#f1f5f9',
+        200: '#e2e8f0',
+        300: '#cbd5e1',
+        400: '#FBE5E1',
+        500: '#F7C8C1',
+        600: '#E54F38',
+        700: '#334155',
+        800: '#1e293b',
+        900: '#0f172a',
+      },
+      success: {
+        light: "#86efac",
+        DEFAULT: "#22c55e",
+        dark: "#15803d",
+      },
+      warning: {
+        light: "#fde68a",
+        DEFAULT: "#f59e0b",
+        dark: "#b45309",
+      },
+      danger: {
+        light: "#fca5a5",
+        DEFAULT: "#ef4444",
+        dark: "#b91c1c",
+      },
+    },
+    extend: {
+      boxShadow: {
+        card: "0px 0px 10px rgba(0, 0, 0, 0.05)",
+      },
+      spacing: {
+        18: "4.5rem",
+        72: "18rem",
+        84: "21rem",
+        96: "24rem",
+      },
+      borderRadius: {
+        "4xl": "2rem",
+        "5xl": "2.5rem",
+      },
+      fontSize: {
+        xxs: "0.625rem",
+      },
+      height: {
+        "screen-50": "50vh",
+        "screen-75": "75vh",
+      },
+    },
+  },
+};
diff --git a/horilla_theme/static/horilla_theme/assets/js/timeRunner.js b/horilla_theme/static/horilla_theme/assets/js/timeRunner.js
new file mode 100644
index 000000000..1391c2ae2
--- /dev/null
+++ b/horilla_theme/static/horilla_theme/assets/js/timeRunner.js
@@ -0,0 +1,55 @@
+// time-runner
+function secondsToDuration(seconds) {
+    var hours = Math.floor(seconds / 3600);
+    var minutes = Math.floor((seconds % 3600) / 60);
+    var remainingSeconds = Math.floor(seconds % 60);
+
+    // add leading zeros if necessary
+    var formattedHours = (hours < 10) ? "0" + hours : hours;
+    var formattedMinutes = (minutes < 10) ? "0" + minutes : minutes;
+    var formattedSeconds = (remainingSeconds < 10) ? "0" + remainingSeconds : remainingSeconds;
+
+    return formattedHours + ":" + formattedMinutes + ":" + formattedSeconds;
+}
+// accessing initial worked hours from the user
+$(".time-runner").not("title").html(secondsToDuration(at_work_seconds));
+$("title.time-runner").html("{{white_label_company_name}} | " + secondsToDuration(at_work_seconds));
+setInterval(() => {
+    if (run) {
+        at_work_seconds = at_work_seconds + 1
+        $("div.time-runner").html(secondsToDuration(at_work_seconds));
+        $("title").html("{{white_label_company_name}} | " + secondsToDuration(at_work_seconds));
+    }
+}, 1000);
+
+function switchTab(e) {
+    let parentContainerEl = e.target.closest(".oh-tabs");
+    let tabElement = e.target.closest(".oh-tabs__tab");
+    let targetSelector = e.target.dataset.target;
+    let targetEl = parentContainerEl
+        ? parentContainerEl.querySelector(targetSelector)
+        : null;
+
+    // Highlight active tabs
+    if (tabElement && !tabElement.classList.contains("oh-tabs__tab--active")) {
+        parentContainerEl
+            .querySelectorAll(".oh-tabs__tab--active")
+            .forEach(function (item) {
+                item.classList.remove("oh-tabs__tab--active");
+            });
+
+        if (!tabElement.classList.contains("oh-tabs__new-tab")) {
+            tabElement.classList.add("oh-tabs__tab--active");
+        }
+    }
+
+    // Switch tabs
+    if (targetEl && !targetEl.classList.contains("oh-tabs__content--active")) {
+        parentContainerEl
+            .querySelectorAll(".oh-tabs__content--active")
+            .forEach(function (item) {
+                item.classList.remove("oh-tabs__content--active");
+            });
+        targetEl.classList.add("oh-tabs__content--active");
+    }
+}
\ No newline at end of file
diff --git a/horilla_theme/templates/generic/horilla_nav.html b/horilla_theme/templates/generic/horilla_nav.html
new file mode 100644
index 000000000..a9a2b2fcd
--- /dev/null
+++ b/horilla_theme/templates/generic/horilla_nav.html
@@ -0,0 +1,131 @@
+{% load i18n %}
+<div class="flex flex-wrap justify-between items-center mb-3">
+    <h3 class="text-lg font-semibold">{{nav_title}}</h3>
+
+    {% if search_url %}
+        <form autocomplete="off" 
+            id="filterForm" 
+            onsubmit="event.preventDefault()" 
+            hx-get="{{search_url}}?&referrer={{request.META.HTTP_REFERER}}&{{request.GET.urlencode}}" 
+            hx-replace-url="false" 
+            hx-target="{{search_swap_target}}"
+            hx-on:submit="htmxLoadIndicator(this);"
+        >
+            <div class="flex flex-wrap gap-1">
+
+                <input type="text" name="nav_url" value="{{request.path}}" hidden>
+
+                <div class="relative">
+                    <input
+                        type="text"
+                        class="text-color-600 ps-8 p-1.5 pb-2 placeholder:text-xs w-full border border-dark-50 rounded-md focus-visible:outline-0 placeholder:text-dark-100 text-sm [transition:.3s] focus:border-primary-600"
+                        name="search"
+                        aria-label="Search Input"
+                        placeholder="Search"
+                        autocomplete="false"
+                        autofocus ="true"
+                        onkeyup="
+                        $(this).closest('form').find('#applyFilter').click();
+                        {% comment %} {% if search_in %}
+                            $('#applyFilter')[0].click();if(this.value) {
+                            $('.search_text').html(this.value)
+                            $(this).parent().find('#dropdown').show()
+                            }else{
+                            $(this).parent().find('#dropdown').hide()
+                            }
+                        {% endif %} {% endcomment %}
+                        "
+                        {% comment %} {% if search_in %}
+                            onfocus="
+                                if (this.value) {
+                                    $(this).parent().find('#dropdown').show()
+                                }"
+                            onfocusout="
+                                setTimeout(function() {
+                                    $('#dropdown').hide()
+                                }, 300);
+                            "
+                        {% endif %} {% endcomment %}
+                        {{search_input_attrs|safe}}
+                    />
+                    <i
+                        class="fas fa-search absolute left-3 top-[1px] bottom-0 m-auto flex items-center opacity-50 text-xs"
+                    ></i>
+                    {% comment %} {% if search_in %}
+                        <input type="text" hidden name="search_field">
+                        <div class="custom-dropdown" id="dropdown" style="z-index: 1000 !important;">
+                            <ul class="search_content">
+                                {% for option in search_in %}
+                                <li>
+                                    <a href="#" onclick="$('[name=search_field]').val('{{option.0}}'); $(this).closest('form').find('#applyFilter').click()">
+                                        {% trans "Search" %} <b>{{option.1}}</b> {% trans "for:" %}
+                                        <b class="search_text"></b>
+                                    </a>
+                                </li>
+                                {% endfor %}
+                            </ul>
+                        </div>
+                    {% endif %} {% endcomment %}
+                </div>
+                {% if group_by_fields %}
+                    <button
+                        class="px-4 py-2 bg-[white] rounded-md text-xs flex items-center gap-2 border border-primary-500 hover:border-primary-600 transition duration-300"
+                    >
+                        <img src="/static/horilla_theme/assets/img/icons/adjust.svg" alt="" width="15" />Group
+                        By
+                    </button>
+                {% endif %}
+
+                {% if filter_body_template %}
+                    <button
+                        class="px-4 py-2 bg-[white] rounded-md text-xs flex items-center gap-2 border border-primary-500 hover:border-primary-600 transition duration-300"
+                        id="applyFilter"
+                    >
+                        <img
+                            src="/static/horilla_theme/assets/img/icons/sort.svg"
+                            alt=""
+                            width="16"
+                            class="mt-[-1px]"
+                        />Filter
+                    </button>
+                {% else %}
+                    <button 
+                        hidden
+                        type="submit"
+                        id="applyFilter"
+                        class="oh-btn oh-btn--secondary oh-btn--small w-100">
+                        {% trans "Filter" %}
+                    </button>
+                {% endif %}
+                <input type="hidden" id="pageInput">
+                <input type="hidden" id="sortInput">
+            
+                {% if create_attrs %}
+                    <a
+                        {% comment %} data-modal-open="deletemodal" {% endcomment %}
+                        class="px-4 py-2 bg-primary-600 text-white rounded-md text-xs flex items-center gap-2 hover:bg-primary-800 transition duration-300"
+                        {{create_attrs|safe}}
+                    >
+                        <img
+                            src="/static/horilla_theme/assets/img/icons/more.svg"
+                            alt=""
+                            width="13"
+                            class="filter brightness-0 invert"
+                        />
+                        Create
+                    </a>
+                {% endif %}
+            </div>
+        </form>
+    {% endif %}
+</div>
+<script>
+    setTimeout(() => {
+      // $(".oh-btn--view-active").click();
+      {% if apply_first_filter %}
+      if (!$(".oh-btn--view-active").length) {
+        $("#applyFilter").click()
+      }
+      {% endif %}
+    }, 100);
+</script>
\ No newline at end of file
diff --git a/horilla_theme/templates/generic/quick_actions.html b/horilla_theme/templates/generic/quick_actions.html
new file mode 100644
index 000000000..6b24a2f7a
--- /dev/null
+++ b/horilla_theme/templates/generic/quick_actions.html
@@ -0,0 +1,54 @@
+{% load i18n %}
+<div class="flex justify-between items-center mb-2">
+    <div class="flex flex-wrap gap-1 items-center">
+        <button
+            class="px-4 py-2 bg-primary-600 text-white rounded-md text-xs hover:bg-primary-800 transition duration-300"
+        >
+            {% trans "Select All" %}
+        </button>
+        <button
+            class="px-4 py-2 bg-[#720c80] text-white rounded-md text-xs hover:bg-primary-800 transition duration-300"
+        >
+            <i class="fa-solid fa-xmark pe-1"></i> {% trans "Unselect" %}
+        </button>
+        <button
+            class="px-4 py-2 bg-[#15159e] text-white rounded-md text-xs hover:bg-primary-800 transition duration-300"
+        >
+            <i class="fa-solid fa-print pe-1"></i>{% trans "Export" %}
+        </button>
+        <button
+            class="px-4 py-2 bg-[#0f800f] text-white rounded-md text-xs hover:bg-primary-800 transition duration-300"
+        >
+            <i class="fa-solid fa-pen pe-1"></i>{% trans "Update" %}
+        </button>
+        <button
+            class="px-4 py-2 bg-[#129192] text-white rounded-md text-xs hover:bg-primary-800 transition duration-300"
+        >
+            <i class="fa-solid fa-download pe-1"></i>{% trans "Import" %}
+        </button>
+        <button
+            class="px-4 py-2 bg-[#a4933b] text-white rounded-md text-xs hover:bg-primary-800 transition duration-300"
+        >
+            <i class="fa-solid fa-filter pe-1"></i>{% trans "Filter" %}
+        </button>
+        <p class="ps-3 text-sm text-primary-600">57 {% trans "Selected" %}</p>
+    </div>
+
+
+
+    <div class="flex flex-wrap gap-2">
+        <button
+            class="px-4 py-2 bg-[white] border border-[#FFB400] rounded-md text-xs flex gap-2 items-center"><span
+                class="h-3 w-3 rounded-full bg-[#FFB400] flex"></span>{% trans "Requested" %}</button>
+        <button
+            class="px-4 py-2 bg-[white] rounded-md text-xs flex gap-2 items-center border border-primary-500 hover:border-[#9D9D9D] transition duration-300"><span
+                class="h-3 w-3 rounded-full bg-[#9D9D9D] flex"></span>{% trans "Cancelled" %}</button>
+        <button
+            class="px-4 py-2 bg-[white] rounded-md text-xs flex gap-2 items-center border border-primary-500 hover:border-[#FF2200] transition duration-300"><span
+                class="h-3 w-3 rounded-full bg-[#FF2200] flex"></span>{% trans "Rejected" %}</button>
+        <button
+            class="px-4 py-2 bg-[white] rounded-md text-xs flex gap-2 items-center border border-primary-500 hover:border-[#00C490] transition duration-300"><span
+                class="h-3 w-3 rounded-full bg-[#00C490] flex"></span>{% trans "Approved" %}</button>
+    </div>
+</div>
+
diff --git a/horilla_theme/templates/horilla_theme/components/dashboard.html b/horilla_theme/templates/horilla_theme/components/dashboard.html
new file mode 100644
index 000000000..0285b5ce1
--- /dev/null
+++ b/horilla_theme/templates/horilla_theme/components/dashboard.html
@@ -0,0 +1,702 @@
+<!-- Stats Cards -->
+<div class="grid grid-cols-1 xl:grid-cols-4 md:grid-cols-2 gap-4 mb-4">
+  <div class="bg-white p-6 rounded-md shadow-card relative">
+    <div class="flex items-center gap-4">
+      <div class="bg-[#1cba5121] p-3 rounded-md">
+        <img src="/static/horilla_theme/assets/img/icons/add-user.svg" width="20" />
+        <!-- <i class="fas fa-users text-primary-600"></i> -->
+      </div>
+      <div>
+        <p class="text-sm">Todays's New Joiner</p>
+        <div class="flex items-center gap-2">
+          <p class="text-xl font-bold text-secondary-900">01</p>
+          <!-- <p class="text-success text-sm">+23%</p> -->
+        </div>
+      </div>
+    </div>
+    <!--  <button class="w-3 h-3 absolute right-6 top-6">
+              <img src="/static/horilla_theme/assets/icons/right-arrow.svg" alt="" class="rotate-45">
+            </button>  -->
+  </div>
+  <div class="bg-white p-6 rounded-md shadow-card relative">
+    <div class="flex items-center gap-4">
+      <div class="bg-[#b71db01f] p-3 rounded-md">
+        <img src="/static/horilla_theme/assets/img/icons/absent.svg" width="20" />
+      </div>
+      <div>
+        <p class="text-sm">Leave on today</p>
+        <div class="flex items-center gap-2">
+          <p class="text-xl font-bold text-secondary-900">002</p>
+          <!-- <p class="text-success text-sm">+23%</p> -->
+        </div>
+      </div>
+    </div>
+    <!--  <button class="w-3 h-3 absolute right-6 top-6">
+              <img src="/static/horilla_theme/assets/icons/right-arrow.svg" alt="" class="rotate-45">
+            </button>  -->
+  </div>
+  <div class="bg-white p-6 rounded-md shadow-card relative">
+    <div class="flex items-center gap-4">
+      <div class="bg-[#ea7f2f2e] p-3 rounded-md">
+        <img src="/static/horilla_theme/assets/img/icons/joining.svg" width="20" />
+      </div>
+      <div>
+        <p class="text-sm">Joining this week</p>
+        <div class="flex items-center gap-2">
+          <p class="text-xl font-bold text-secondary-900">000</p>
+          <!-- <p class="text-red-600 text-sm">-25%</p> -->
+        </div>
+      </div>
+    </div>
+    <!--  <button class="w-3 h-3 absolute right-6 top-6">
+              <img src="/static/horilla_theme/assets/icons/right-arrow.svg" alt="" class="rotate-45">
+            </button>  -->
+  </div>
+  <div class="bg-white p-6 rounded-md shadow-card relative">
+    <div class="flex items-center gap-4">
+      <div class="bg-[#d821491c] p-3 rounded-md">
+        <img src="/static/horilla_theme/assets/img/icons/strenth.svg" width="20" />
+      </div>
+      <div>
+        <p class="text-sm">Total Strength</p>
+        <div class="flex items-center gap-2">
+          <p class="text-xl font-bold text-secondary-900">250</p>
+          <!-- <p class="text-success text-sm">+23%</p> -->
+        </div>
+      </div>
+    </div>
+    <!--  <button class="w-3 h-3 absolute right-6 top-6">
+              <img src="/static/horilla_theme/assets/icons/right-arrow.svg" alt="" class="rotate-45">
+            </button>  -->
+  </div>
+</div>
+
+<div class="grid grid-cols-12 gap-4 mb-4">
+  <div class="xl:col-span-6 md:col-span-6 col-span-12 bg-white p-6 rounded-md shadow-card">
+    <div class="flex justify-between items-center mb-2">
+      <h3 class="text-md font-semibold">Shift Requests to Approve</h3>
+      <!--  <button class="w-3 h-3">
+                <img src="/static/horilla_theme/assets/icons/right-arrow.svg" alt="" class="rotate-45">
+              </button>  -->
+    </div>
+    <div class="overflow-hidden overflow-x-auto">
+      <table class="w-full">
+        <thead>
+          <tr class="border-b border-[#ececec]">
+            <th class="text-sm font-medium text-left p-3 pl-0">
+              <span class="flex w-max">Employee</span>
+            </th>
+            <th class="text-sm font-medium text-left p-3 pl-0">
+              <span class="flex w-max">Requested Shift</span>
+            </th>
+            <th class="text-sm font-medium text-left p-3 pl-0">
+              <span class="flex w-max">Action</span>
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr class="border-b border-[#ececec]">
+            <td class="text-sm text-left p-3 pl-0 text-[#666]">
+              <div class="flex gap-3 items-center w-max">
+                <img src="/static/horilla_theme/assets/icons/user1.png" alt="" width="30" /><span>Richard Dom</span>
+              </div>
+            </td>
+            <td class="text-sm text-left p-3 pl-0 text-[#666]">Regular Shift</td>
+            <td class="text-sm text-left p-3 pl-0 text-[#666]">
+              <div class="flex gap-1">
+                <button class="cursor-pointer px-2 py-1 text-xs bg-[#07bd072e] text-[#00c700] rounded-sm w-6 h-6 flex items-center justify-center"><i class="fa-solid fa-check"></i></button>
+                <button class="cursor-pointer px-2 py-1 text-xs bg-[#ff000024] text-[red] rounded-sm w-6 h-6 flex items-center justify-center"><i class="fa-solid fa-xmark"></i></button>
+              </div>
+            </td>
+          </tr>
+          <tr class="border-b border-[#ececec]">
+            <td class="text-sm text-left p-3 pl-0 text-[#666]">
+              <div class="flex gap-3 items-center w-max">
+                <img src="/static/horilla_theme/assets/icons/user1.png" alt="" width="30" /><span>Richard Dom</span>
+              </div>
+            </td>
+            <td class="text-sm text-left p-3 pl-0 text-[#666]">Regular Shift</td>
+            <td class="text-sm text-left p-3 pl-0 text-[#666]">
+              <div class="flex gap-1">
+                <button class="cursor-pointer px-2 py-1 text-xs bg-[#07bd072e] text-[#00c700] rounded-sm w-6 h-6 flex items-center justify-center"><i class="fa-solid fa-check"></i></button>
+                <button class="cursor-pointer px-2 py-1 text-xs bg-[#ff000024] text-[red] rounded-sm w-6 h-6 flex items-center justify-center"><i class="fa-solid fa-xmark"></i></button>
+              </div>
+            </td>
+          </tr>
+          <tr class="border-b border-[#ececec]">
+            <td class="text-sm text-left p-3 pl-0 text-[#666]">
+              <div class="flex gap-3 items-center w-max">
+                <img src="/static/horilla_theme/assets/icons/user1.png" alt="" width="30" /><span>Richard Dom</span>
+              </div>
+            </td>
+            <td class="text-sm text-left p-3 pl-0 text-[#666]">Regular Shift</td>
+            <td class="text-sm text-left p-3 pl-0 text-[#666]">
+              <div class="flex gap-1">
+                <button class="cursor-pointer px-2 py-1 text-xs bg-[#07bd072e] text-[#00c700] rounded-sm w-6 h-6 flex items-center justify-center"><i class="fa-solid fa-check"></i></button>
+                <button class="cursor-pointer px-2 py-1 text-xs bg-[#ff000024] text-[red] rounded-sm w-6 h-6 flex items-center justify-center"><i class="fa-solid fa-xmark"></i></button>
+              </div>
+            </td>
+          </tr>
+          <tr class="border-b border-[#ececec]">
+            <td class="text-sm text-left p-3 pl-0 text-[#666]">
+              <div class="flex gap-3 items-center w-max">
+                <img src="/static/horilla_theme/assets/icons/user1.png" alt="" width="30" /><span>Richard Dom</span>
+              </div>
+            </td>
+            <td class="text-sm text-left p-3 pl-0 text-[#666]">Regular Shift</td>
+            <td class="text-sm text-left p-3 pl-0 text-[#666]">
+              <div class="flex gap-1">
+                <button class="cursor-pointer px-2 py-1 text-xs bg-[#07bd072e] text-[#00c700] rounded-sm w-6 h-6 flex items-center justify-center"><i class="fa-solid fa-check"></i></button>
+                <button class="cursor-pointer px-2 py-1 text-xs bg-[#ff000024] text-[red] rounded-sm w-6 h-6 flex items-center justify-center"><i class="fa-solid fa-xmark"></i></button>
+              </div>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+
+  <div class="xl:col-span-3 md:col-span-6 col-span-12 bg-white p-6 rounded-md shadow-card">
+    <div class="flex justify-between items-center mb-2">
+      <h3 class="text-md font-semibold">Gender Chart</h3>
+      <!--  <button class="w-3 h-3">
+                <img src="/static/horilla_theme/assets/icons/right-arrow.svg" alt="" class="rotate-45">
+              </button>  -->
+    </div>
+
+    <div class="w-full max-w-xs mx-auto">
+      <div class="relative">
+        <canvas id="genderChart"></canvas>
+      </div>
+    </div>
+  </div>
+
+  <div class="xl:col-span-3 md:col-span-6 col-span-12 bg-white p-6 rounded-md shadow-card">
+    <div class="flex justify-between items-center mb-4">
+      <h3 class="text-md font-semibold">Announcements</h3>
+      <button class="w-4 h-4"><img src="/static/horilla_theme/assets/img/icons/more.svg" alt="" /></button>
+    </div>
+
+    <ul>
+      <li>
+        <div class="flex gap-3 items-center text-sm font-medium py-1">
+          <img src="/static/horilla_theme/assets/icons/user1.png" alt="" width="30" /><span>Horilla Tour</span>
+        </div>
+      </li>
+      <li>
+        <div class="flex gap-3 items-center text-sm font-medium py-1">
+          <img src="/static/horilla_theme/assets/icons/user1.png" alt="" width="30" /><span>Horilla Tour</span>
+        </div>
+      </li>
+      <li>
+        <div class="flex gap-3 items-center text-sm font-medium py-1">
+          <img src="/static/horilla_theme/assets/icons/user1.png" alt="" width="30" /><span>Horilla Tour</span>
+        </div>
+      </li>
+      <li>
+        <div class="flex gap-3 items-center text-sm font-medium py-1">
+          <img src="/static/horilla_theme/assets/icons/user1.png" alt="" width="30" /><span>Horilla Tour</span>
+        </div>
+      </li>
+      <li>
+        <div class="flex gap-3 items-center text-sm font-medium py-1">
+          <img src="/static/horilla_theme/assets/icons/user1.png" alt="" width="30" /><span>Horilla Tour</span>
+        </div>
+      </li>
+      <li>
+        <div class="flex gap-3 items-center text-sm font-medium py-1">
+          <img src="/static/horilla_theme/assets/icons/user1.png" alt="" width="30" /><span>Horilla Tour</span>
+        </div>
+      </li>
+    </ul>
+  </div>
+
+  <!-- Recent Activities -->
+  <div class="xl:col-span-4 md:col-span-6 col-span-12 bg-white p-6 rounded-md shadow-card">
+    <div class="flex justify-between items-center mb-2">
+      <h3 class="text-md font-semibold">Employee Work Information</h3>
+    </div>
+    <div class="flex items-center gap-2 w-full mb-3 flex-wrap sm:flex-nowrap">
+      <div class="relative w-full">
+        <input type="text" placeholder="Search Here..." class="text-color-600 ps-10 p-2 placeholder:text-xs w-full border border-dark-50 rounded-md focus-visible:outline-0 placeholder:text-dark-100 text-sm [transition:.3s] focus:border-primary-600" />
+        <i class="fas fa-search absolute left-3 top-0 bottom-0 m-auto flex items-center opacity-50 text-sm"></i>
+      </div>
+      <button class="cursor-pointer border border-dark-50 p-1.5 rounded-md flex justify-between gap-2 text-sm items-center" style="width: 100px; height: 38px;"><span>Filter</span> <img src="/static/horilla_theme/assets/img/icons/sort.svg" alt="" width="20" /></button>
+    </div>
+
+    <div class="overflow-hidden overflow-x-auto">
+      <table class="w-full">
+        <thead>
+          <tr class="border-b border-[#ececec]">
+            <th class="text-sm font-medium text-left p-3 pl-0">
+              <span class="flex w-max">Name</span>
+            </th>
+            <th class="text-sm font-medium text-left p-3 pl-0">
+              <span class="flex w-max">Progress</span>
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr class="border-b border-[#ececec]">
+            <td class="text-sm text-left p-3 pl-0 text-[#666]">
+              <div class="flex gap-3 items-center w-max">
+                <img src="/static/horilla_theme/assets/icons/user1.png" alt="" width="30" /><span>Richard Dom</span>
+              </div>
+            </td>
+            <td class="text-sm text-left p-3 pl-0 text-[#666] pe-0">
+              <div class="flex gap-3 items-center">
+                <div class="w-full bg-gray-200 rounded-full h-1.5">
+                  <div class="bg-[#ff5613] h-1.5 rounded-full" style="width: 45%"></div>
+                </div>
+                <div class="text-sm font-medium">60%</div>
+              </div>
+            </td>
+          </tr>
+          <tr class="border-b border-[#ececec]">
+            <td class="text-sm text-left p-3 pl-0 text-[#666]">
+              <div class="flex gap-3 items-center w-max">
+                <img src="/static/horilla_theme/assets/icons/user1.png" alt="" width="30" /><span>Richard Dom</span>
+              </div>
+            </td>
+            <td class="text-sm text-left p-3 pl-0 text-[#666] pe-0">
+              <div class="flex gap-3 items-center">
+                <div class="w-full bg-gray-200 rounded-full h-1.5">
+                  <div class="bg-[#81d620] h-1.5 rounded-full" style="width: 45%"></div>
+                </div>
+                <div class="text-sm font-medium">60%</div>
+              </div>
+            </td>
+          </tr>
+          <tr class="border-b border-[#ececec]">
+            <td class="text-sm text-left p-3 pl-0 text-[#666]">
+              <div class="flex gap-3 items-center w-max">
+                <img src="/static/horilla_theme/assets/icons/user1.png" alt="" width="30" /><span>Richard Dom</span>
+              </div>
+            </td>
+            <td class="text-sm text-left p-3 pl-0 text-[#666] pe-0">
+              <div class="flex gap-3 items-center">
+                <div class="w-full bg-gray-200 rounded-full h-1.5">
+                  <div class="bg-[#26d6e2] h-1.5 rounded-full" style="width: 45%"></div>
+                </div>
+                <div class="text-sm font-medium">60%</div>
+              </div>
+            </td>
+          </tr>
+          <tr class="border-b border-[#ececec]">
+            <td class="text-sm text-left p-3 pl-0 text-[#666]">
+              <div class="flex gap-3 items-center w-max">
+                <img src="/static/horilla_theme/assets/icons/user1.png" alt="" width="30" /><span>Richard Dom</span>
+              </div>
+            </td>
+            <td class="text-sm text-left p-3 pl-0 text-[#666] pe-0">
+              <div class="flex gap-3 items-center">
+                <div class="w-full bg-gray-200 rounded-full h-1.5">
+                  <div class="bg-[#2661e2] h-1.5 rounded-full" style="width: 45%"></div>
+                </div>
+                <div class="text-sm font-medium">60%</div>
+              </div>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <div class="flex justify-between items-center mt-4">
+      <p class="text-xs text-[#666]">Page 1 / 2</p>
+      <div class="flex gap-3 text-[#666]">
+        <button class="text-xs hover:text-primary-600 transition duration-300"><i class="fa-solid fa-arrow-left"></i></button>
+        <button class="text-xs hover:text-primary-600 transition duration-300"><i class="fa-solid fa-arrow-right"></i></button>
+      </div>
+    </div>
+  </div>
+
+  <div class="xl:col-span-4 md:col-span-6 col-span-12 bg-white p-6 rounded-md shadow-card">
+    <div class="flex justify-between items-center mb-2">
+      <h3 class="text-md font-semibold">Assets Requests To Approve</h3>
+    </div>
+
+    <div class="flex flex-col items-center justify-center h-full">
+      <img src="/static/horilla_theme/assets/img/no-records.svg" alt="" width="300" class="mb-4" />
+      <p class="text-[#666]">No records available at the moment</p>
+    </div>
+  </div>
+
+  <div class="xl:col-span-4 md:col-span-6 col-span-12 bg-white p-6 rounded-md shadow-card">
+    <div class="flex justify-between items-center mb-2">
+      <h3 class="text-md font-semibold">Department Chart</h3>
+      <!--  <button class="w-3 h-3">
+                <img src="/static/horilla_theme/assets/icons/right-arrow.svg" alt="" class="rotate-45">
+              </button>  -->
+    </div>
+
+    <div class="flex items-center justify-between flex-col">
+      <!-- Chart container -->
+      <div class="md:w-60 w-full max-w-xs mx-auto">
+        <canvas id="departmentChart"></canvas>
+      </div>
+
+      <!-- Custom legend -->
+      <div id="chartLegend" class="text-xs flex gap-3 flex-wrap justify-center">
+        <div class="flex items-center gap-2">
+          <span class="w-4 h-4 rounded-full bg-[#facc15]"></span> Sales Dept
+        </div>
+        <div class="flex items-center gap-2">
+          <span class="w-4 h-4 rounded-full bg-[#f87171]"></span> IT Dept
+        </div>
+        <div class="flex items-center gap-2">
+          <span class="w-4 h-4 rounded-full bg-[#ddd6fe]"></span> DM Dept
+        </div>
+        <div class="flex items-center gap-2">
+          <span class="w-4 h-4 rounded-full bg-[#a5b4fc]"></span> SEO Dept
+        </div>
+        <div class="flex items-center gap-2">
+          <span class="w-4 h-4 rounded-full bg-[#93c5fd]"></span> Odoo Dept
+        </div>
+        <div class="flex items-center gap-2">
+          <span class="w-4 h-4 rounded-full bg-[#d1d5db]"></span> Horilla Dept
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Recent Activities -->
+  <div class="xl:col-span-4 md:col-span-6 col-span-12 bg-white p-6 rounded-md shadow-card">
+    <div class="flex justify-between items-center mb-2">
+      <h3 class="text-md font-semibold">Key Result Status</h3>
+    </div>
+    <div class="flex flex-col items-center justify-center h-full pb-4">
+      <img src="/static/horilla_theme/assets/img/no-chart.svg" alt="" width="200" class="mb-4" />
+      <p class="text-md font-medium text-[#666]">Not Started</p>
+    </div>
+  </div>
+
+  <div class="xl:col-span-4 md:col-span-6 col-span-12 bg-white p-6 rounded-md shadow-card">
+    <div class="flex justify-between items-center mb-2">
+      <h3 class="text-md font-semibold">Attendance to Validate</h3>
+    </div>
+
+    <div class="overflow-hidden overflow-x-auto">
+      <table class="w-full">
+        <thead>
+          <tr class="border-b border-[#ececec]">
+            <th class="text-sm font-medium text-left p-3 pl-0">
+              <span class="flex w-max">Employee</span>
+            </th>
+            <th class="text-sm font-medium text-left p-3 pl-0">
+              <span class="flex w-max">At Work</span>
+            </th>
+            <th class="text-sm font-medium text-left p-3 pl-0">
+              <span class="flex w-max">Action</span>
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr class="border-b border-[#ececec]">
+            <td class="text-sm text-left p-3 pl-0 text-[#666]">
+              <div class="flex gap-3 items-center w-max">
+                <img src="/static/horilla_theme/assets/icons/user1.png" alt="" width="30" /><span>Richard Dom</span>
+              </div>
+            </td>
+            <td class="text-sm text-left p-3 pl-0 text-[#666]">10:46 PM</td>
+            <td class="text-xs text-left p-3 pl-0 text-[#666]">
+              <button class="cursor-pointer px-2.5 py-1 bg-[#00c49025] text-[#00C490] rounded-md">Validate</button>
+            </td>
+          </tr>
+          <tr class="border-b border-[#ececec]">
+            <td class="text-sm text-left p-3 pl-0 text-[#666]">
+              <div class="flex gap-3 items-center w-max">
+                <img src="/static/horilla_theme/assets/icons/user1.png" alt="" width="30" /><span>Richard Dom</span>
+              </div>
+            </td>
+            <td class="text-sm text-left p-3 pl-0 text-[#666]">10:46 PM</td>
+            <td class="text-xs text-left p-3 pl-0 text-[#666]">
+              <button class="cursor-pointer px-2.5 py-1 bg-[#00c49025] text-[#00C490] rounded-md">Validate</button>
+            </td>
+          </tr>
+          <tr class="border-b border-[#ececec]">
+            <td class="text-sm text-left p-3 pl-0 text-[#666]">
+              <div class="flex gap-3 items-center w-max">
+                <img src="/static/horilla_theme/assets/icons/user1.png" alt="" width="30" /><span>Richard Dom</span>
+              </div>
+            </td>
+            <td class="text-sm text-left p-3 pl-0 text-[#666]">10:46 PM</td>
+            <td class="text-xs text-left p-3 pl-0 text-[#666]">
+              <button class="cursor-pointer px-2.5 py-1 bg-[#00c49025] text-[#00C490] rounded-md">Validate</button>
+            </td>
+          </tr>
+          <tr class="border-b border-[#ececec]">
+            <td class="text-sm text-left p-3 pl-0 text-[#666]">
+              <div class="flex gap-3 items-center w-max">
+                <img src="/static/horilla_theme/assets/icons/user1.png" alt="" width="30" /><span>Richard Dom</span>
+              </div>
+            </td>
+            <td class="text-sm text-left p-3 pl-0 text-[#666]">10:46 PM</td>
+            <td class="text-xs text-left p-3 pl-0 text-[#666]">
+              <button class="cursor-pointer px-2.5 py-1 bg-[#00c49025] text-[#00C490] rounded-md">Validate</button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+
+  <div class="xl:col-span-4 md:col-span-6 col-span-12 bg-white p-6 rounded-md shadow-card">
+    <div class="flex justify-between items-center mb-2">
+      <h3 class="text-md font-semibold">Candidate Started Onboarding</h3>
+      <!--  <button class="w-3 h-3">
+                <img src="/static/horilla_theme/assets/icons/right-arrow.svg" alt="" class="rotate-45">
+              </button>  -->
+    </div>
+
+    <div>
+      <canvas id="recruitmentChart" class="w-40 h-64"></canvas>
+    </div>
+
+    <div id="recruitmentLegend" class="mt-4 flex justify-center flex-wrap gap-3 text-xs"></div>
+  </div>
+
+  <div class="xl:col-span-7 md:col-span-6 col-span-12 bg-white p-6 rounded-md shadow-card">
+    <div class="flex justify-between items-center mb-2">
+      <h3 class="text-md font-semibold">Recruitment Analytics</h3>
+      <!--  <button class="w-3 h-3">
+                <img src="/static/horilla_theme/assets/icons/right-arrow.svg" alt="" class="rotate-45">
+              </button>  -->
+    </div>
+
+    <div>
+      <canvas id="recruitmentFlowChart" class="w-full h-96"></canvas>
+    </div>
+  </div>
+
+  <div class="xl:col-span-5 md:col-span-6 col-span-12 bg-white p-6 rounded-md shadow-card">
+    <div class="flex justify-between items-center mb-2">
+      <h3 class="text-md font-semibold">Offline Employees</h3>
+    </div>
+
+    <div class="overflow-hidden overflow-x-auto">
+      <table class="w-full">
+        <thead>
+          <tr class="border-b border-[#ececec]">
+            <th class="text-sm font-medium text-left p-3 pl-0">
+              <span class="flex w-max">Employee</span>
+            </th>
+            <th class="text-sm font-medium text-left p-3 pl-0">
+              <span class="flex w-max">Mail</span>
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr class="border-b border-[#ececec]">
+            <td class="text-sm text-left p-3 pl-0 text-[#666]">
+              <div class="flex gap-3 items-center w-max">
+                <img src="/static/horilla_theme/assets/icons/user1.png" alt="" width="30" /><span>Richard Dom</span>
+                <button class="cursor-pointer px-2.5 py-1 bg-[#00c49025] text-[#00C490] rounded-sm text-xs">Expected working</button>
+              </div>
+            </td>
+
+            <td class="text-xs text-left p-3 pl-0 text-[#666]">
+              <button class="cursor-pointer"><img src="/static/horilla_theme/assets/img/icons/email.svg" alt="" width="25" /></button>
+            </td>
+          </tr>
+          <tr class="border-b border-[#ececec]">
+            <td class="text-sm text-left p-3 pl-0 text-[#666]">
+              <div class="flex gap-3 items-center w-max">
+                <img src="/static/horilla_theme/assets/icons/user1.png" alt="" width="30" /><span>Richard Dom</span>
+                <button class="cursor-pointer px-2.5 py-1 bg-[#00c49025] text-[#00C490] rounded-sm text-xs">Expected working</button>
+              </div>
+            </td>
+
+            <td class="text-xs text-left p-3 pl-0 text-[#666]">
+              <button class="cursor-pointer"><img src="/static/horilla_theme/assets/img/icons/email.svg" alt="" width="25" /></button>
+            </td>
+          </tr>
+          <tr class="border-b border-[#ececec]">
+            <td class="text-sm text-left p-3 pl-0 text-[#666]">
+              <div class="flex gap-3 items-center w-max">
+                <img src="/static/horilla_theme/assets/icons/user1.png" alt="" width="30" /><span>Richard Dom</span>
+                <button class="cursor-pointer px-2.5 py-1 bg-[#00c49025] text-[#00C490] rounded-sm text-xs">Expected working</button>
+              </div>
+            </td>
+
+            <td class="text-xs text-left p-3 pl-0 text-[#666]">
+              <button class="cursor-pointer"><img src="/static/horilla_theme/assets/img/icons/email.svg" alt="" width="25" /></button>
+            </td>
+          </tr>
+          <tr class="border-b border-[#ececec]">
+            <td class="text-sm text-left p-3 pl-0 text-[#666]">
+              <div class="flex gap-3 items-center w-max">
+                <img src="/static/horilla_theme/assets/icons/user1.png" alt="" width="30" /><span>Richard Dom</span>
+                <button class="cursor-pointer px-2.5 py-1 bg-[#00c49025] text-[#00C490] rounded-sm text-xs">Expected working</button>
+              </div>
+            </td>
+
+            <td class="text-xs text-left p-3 pl-0 text-[#666]">
+              <button class="cursor-pointer"><img src="/static/horilla_theme/assets/img/icons/email.svg" alt="" width="25" /></button>
+            </td>
+          </tr>
+          <tr class="border-b border-[#ececec]">
+            <td class="text-sm text-left p-3 pl-0 text-[#666]">
+              <div class="flex gap-3 items-center w-max">
+                <img src="/static/horilla_theme/assets/icons/user1.png" alt="" width="30" /><span>Richard Dom</span>
+                <button class="cursor-pointer px-2.5 py-1 bg-[#00c49025] text-[#00C490] rounded-sm text-xs">Expected working</button>
+              </div>
+            </td>
+
+            <td class="text-xs text-left p-3 pl-0 text-[#666]">
+              <button class="cursor-pointer"><img src="/static/horilla_theme/assets/img/icons/email.svg" alt="" width="25" /></button>
+            </td>
+          </tr>
+          <tr class="border-b border-[#ececec]">
+            <td class="text-sm text-left p-3 pl-0 text-[#666]">
+              <div class="flex gap-3 items-center w-max">
+                <img src="/static/horilla_theme/assets/icons/user1.png" alt="" width="30" /><span>Richard Dom</span>
+                <button class="cursor-pointer px-2.5 py-1 bg-[#00c49025] text-[#00C490] rounded-sm text-xs">Expected working</button>
+              </div>
+            </td>
+
+            <td class="text-xs text-left p-3 pl-0 text-[#666]">
+              <button class="cursor-pointer"><img src="/static/horilla_theme/assets/img/icons/email.svg" alt="" width="25" /></button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+
+  <div class="xl:col-span-5 md:col-span-6 col-span-12 bg-white p-6 rounded-md shadow-card">
+    <div class="flex justify-between items-center mb-2">
+      <h3 class="text-md font-semibold">Overtime TO Approve</h3>
+    </div>
+
+    <div class="overflow-hidden overflow-x-auto">
+      <table class="w-full">
+        <thead>
+          <tr class="border-b border-[#ececec]">
+            <th class="text-sm font-medium text-left p-3 pl-0">
+              <span class="flex w-max">Employee</span>
+            </th>
+            <th class="text-sm font-medium text-left p-3 pl-0">
+              <span class="flex w-max">Overtime</span>
+            </th>
+            <th class="text-sm font-medium text-left p-3 pl-0">
+              <span class="flex w-max">Action</span>
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr class="border-b border-[#ececec]">
+            <td class="text-sm text-left p-3 pl-0 text-[#666]">
+              <div class="flex gap-3 items-center w-max">
+                <img src="/static/horilla_theme/assets/icons/user1.png" alt="" width="30" /><span>Richard Dom</span>
+              </div>
+            </td>
+            <td class="text-sm text-left p-3 pl-0 text-[#666]">10:45</td>
+            <td class="text-sm text-left p-3 pl-0 text-[#666]">
+              <div class="flex gap-1">
+                <button class="cursor-pointer px-2 py-1 text-xs bg-[#07bd072e] text-[#00c700] rounded-sm w-6 h-6 flex items-center justify-center"><i class="fa-solid fa-check"></i></button>
+                <button class="cursor-pointer px-2 py-1 text-xs bg-[#ff000024] text-[red] rounded-sm w-6 h-6 flex items-center justify-center"><i class="fa-solid fa-xmark"></i></button>
+              </div>
+            </td>
+          </tr>
+          <tr class="border-b border-[#ececec]">
+            <td class="text-sm text-left p-3 pl-0 text-[#666]">
+              <div class="flex gap-3 items-center w-max">
+                <img src="/static/horilla_theme/assets/icons/user1.png" alt="" width="30" /><span>Richard Dom</span>
+              </div>
+            </td>
+            <td class="text-sm text-left p-3 pl-0 text-[#666]">10:45</td>
+            <td class="text-sm text-left p-3 pl-0 text-[#666]">
+              <div class="flex gap-1">
+                <button class="cursor-pointer px-2 py-1 text-xs bg-[#07bd072e] text-[#00c700] rounded-sm w-6 h-6 flex items-center justify-center"><i class="fa-solid fa-check"></i></button>
+                <button class="cursor-pointer px-2 py-1 text-xs bg-[#ff000024] text-[red] rounded-sm w-6 h-6 flex items-center justify-center"><i class="fa-solid fa-xmark"></i></button>
+              </div>
+            </td>
+          </tr>
+          <tr class="border-b border-[#ececec]">
+            <td class="text-sm text-left p-3 pl-0 text-[#666]">
+              <div class="flex gap-3 items-center w-max">
+                <img src="/static/horilla_theme/assets/icons/user1.png" alt="" width="30" /><span>Richard Dom</span>
+              </div>
+            </td>
+            <td class="text-sm text-left p-3 pl-0 text-[#666]">10:45</td>
+            <td class="text-sm text-left p-3 pl-0 text-[#666]">
+              <div class="flex gap-1">
+                <button class="cursor-pointer px-2 py-1 text-xs bg-[#07bd072e] text-[#00c700] rounded-sm w-6 h-6 flex items-center justify-center"><i class="fa-solid fa-check"></i></button>
+                <button class="cursor-pointer px-2 py-1 text-xs bg-[#ff000024] text-[red] rounded-sm w-6 h-6 flex items-center justify-center"><i class="fa-solid fa-xmark"></i></button>
+              </div>
+            </td>
+          </tr>
+          <tr class="border-b border-[#ececec]">
+            <td class="text-sm text-left p-3 pl-0 text-[#666]">
+              <div class="flex gap-3 items-center w-max">
+                <img src="/static/horilla_theme/assets/icons/user1.png" alt="" width="30" /><span>Richard Dom</span>
+              </div>
+            </td>
+            <td class="text-sm text-left p-3 pl-0 text-[#666]">10:45</td>
+            <td class="text-sm text-left p-3 pl-0 text-[#666]">
+              <div class="flex gap-1">
+                <button class="cursor-pointer px-2 py-1 text-xs bg-[#07bd072e] text-[#00c700] rounded-sm w-6 h-6 flex items-center justify-center"><i class="fa-solid fa-check"></i></button>
+                <button class="cursor-pointer px-2 py-1 text-xs bg-[#ff000024] text-[red] rounded-sm w-6 h-6 flex items-center justify-center"><i class="fa-solid fa-xmark"></i></button>
+              </div>
+            </td>
+          </tr>
+          <tr class="border-b border-[#ececec]">
+            <td class="text-sm text-left p-3 pl-0 text-[#666]">
+              <div class="flex gap-3 items-center w-max">
+                <img src="/static/horilla_theme/assets/icons/user1.png" alt="" width="30" /><span>Richard Dom</span>
+              </div>
+            </td>
+            <td class="text-sm text-left p-3 pl-0 text-[#666]">10:45</td>
+            <td class="text-sm text-left p-3 pl-0 text-[#666]">
+              <div class="flex gap-1">
+                <button class="cursor-pointer px-2 py-1 text-xs bg-[#07bd072e] text-[#00c700] rounded-sm w-6 h-6 flex items-center justify-center"><i class="fa-solid fa-check"></i></button>
+                <button class="cursor-pointer px-2 py-1 text-xs bg-[#ff000024] text-[red] rounded-sm w-6 h-6 flex items-center justify-center"><i class="fa-solid fa-xmark"></i></button>
+              </div>
+            </td>
+          </tr>
+          <tr class="border-b border-[#ececec]">
+            <td class="text-sm text-left p-3 pl-0 text-[#666]">
+              <div class="flex gap-3 items-center w-max">
+                <img src="/static/horilla_theme/assets/icons/user1.png" alt="" width="30" /><span>Richard Dom</span>
+              </div>
+            </td>
+            <td class="text-sm text-left p-3 pl-0 text-[#666]">10:45</td>
+            <td class="text-sm text-left p-3 pl-0 text-[#666]">
+              <div class="flex gap-1">
+                <button class="cursor-pointer px-2 py-1 text-xs bg-[#07bd072e] text-[#00c700] rounded-sm w-6 h-6 flex items-center justify-center"><i class="fa-solid fa-check"></i></button>
+                <button class="cursor-pointer px-2 py-1 text-xs bg-[#ff000024] text-[red] rounded-sm w-6 h-6 flex items-center justify-center"><i class="fa-solid fa-xmark"></i></button>
+              </div>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+
+  <div class="xl:col-span-4 md:col-span-6 col-span-12 bg-white p-6 rounded-md shadow-card">
+    <div class="flex justify-between items-center mb-5">
+      <h3 class="text-md font-semibold">Hired Candidates</h3>
+      <!--  <button class="w-3 h-3">
+                <img src="/static/horilla_theme/assets/icons/right-arrow.svg" alt="" class="rotate-45">
+              </button>  -->
+    </div>
+
+    <div>
+      <canvas id="hiredChart" class="w-40 h-72"></canvas>
+    </div>
+    <div id="hiredLegend" class="mt-4 flex justify-center flex-wrap gap-3 text-xs">
+      <div class="flex items-center gap-2 cursor-pointer">
+        <span class="w-4 h-4 rounded-full inline-block bg-[#a5b4fc]"></span>
+        <span>Recruitment drive</span>
+      </div>
+      <div class="flex items-center gap-2 cursor-pointer">
+        <span class="w-4 h-4 rounded-full inline-block bg-[#fca5a5]"></span>
+        <span>Future force recruitment</span>
+      </div>
+      <div class="flex items-center gap-2 cursor-pointer">
+        <span class="w-4 h-4 rounded-full inline-block bg-[#fdba74]"></span>
+        <span>Administrative assistant</span>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/horilla_theme/templates/horilla_theme/components/footer_scripts.html b/horilla_theme/templates/horilla_theme/components/footer_scripts.html
new file mode 100644
index 000000000..2897b7799
--- /dev/null
+++ b/horilla_theme/templates/horilla_theme/components/footer_scripts.html
@@ -0,0 +1,47 @@
+{% load static i18n horillafilters %}
+<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+<script src="{% static 'build/js/web.frontend.min.js' %}"></script>
+<script src="{% static 'htmx/htmx.min.js' %}"></script>
+<script>
+  document.body.addEventListener('htmx:configRequest', (event) => {
+    event.detail.headers['X-CSRFToken'] = '{{ csrf_token }}'
+  })
+</script>
+<script src="{% static '/index/index.js' %}"></script>
+<script src="{% static '/index/saveFilters.js' %}"></script>
+<script src="{% static 'build/js/htmxSelect2.js' %}"></script>
+<script src="{% static 'build/js/summernote-lite.min.js' %}"></script>
+
+<!-- This CDN is for date format change -->
+<script src="{% static 'build/js/moment.js' %}"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment-with-locales.min.js"></script>
+
+<script src="{% static '/base/date_settings.js' %}"></script>
+<script src="{% static '/base/time_formatting.js' %}"></script>
+<script src="{% static '/base/time_settings.js' %}"></script>
+<script src="{% static '/base/date_formatting.js' %}"></script>
+
+<script src="{% static 'build/js/pivottable.min.js' %}"></script>
+<script src="{% static 'build/js/pivottable_plot.min.js' %}"></script>
+<script src="{% static 'build/js/pivottable_ploty.min.js' %}"></script>
+<script src="{% static 'build/js/pivottable_excel.min.js' %}"></script>
+{% if 'attendance'|app_installed %}
+  <script src="{% static 'attendance/actions.js' %}"></script>
+{% endif %}
+<script type="module" src="{% static 'images/ionicons/ui_icons/ionicons/ionicons.esm.js' %}"></script>
+<script src="{% static '/build/js/sweetAlert.js' %}"></script>
+<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+<script>
+  // Clear all query parameters from the URL
+  function clearQueryParameters() {
+    var urlWithoutQuery = window.location.origin + window.location.pathname
+    window.history.replaceState({}, document.title, urlWithoutQuery)
+  }
+</script>
+{% if enabled_timerunner %}
+  <script src="{% static 'horilla_theme/assets/js/timeRunner.js' %}"></script>
+{% endif %}
+
+{% block footer_scripts %}
+
+{% endblock %}
diff --git a/horilla_theme/templates/horilla_theme/components/header.html b/horilla_theme/templates/horilla_theme/components/header.html
new file mode 100644
index 000000000..69e6d6d4a
--- /dev/null
+++ b/horilla_theme/templates/horilla_theme/components/header.html
@@ -0,0 +1,163 @@
+<div
+  class="flex justify-between items-center bg-[#fff] py-3 px-5 border-b border-b-dark-50 fixed w-[calc(100%-76px)] z-40">
+
+
+  <div class="relative">
+    <input type="text" placeholder="Search Here..."
+      class="text-color-600 ps-10 p-2 placeholder:text-sm w-full border border-dark-50 rounded-md focus-visible:outline-0 placeholder:text-dark-100 text-sm [transition:.3s] focus:border-primary-600" />
+    <i class="fas fa-search absolute left-3 top-0 bottom-0 m-auto flex items-center opacity-50 text-sm"></i>
+  </div>
+
+  <!-- Right side - Search and Actions -->
+
+  <div class="flex items-center gap-8">
+    <!-- Search Bar -->
+
+    <!-- Action Icons -->
+    <div class="flex items-center gap-2">
+
+      <button
+        class="hidden md:block p-2 group text-primary-600 w-12 h-12 bg-primary-100 hover:bg-primary-600 rounded-full transition duration-300 flex items-center justify-center">
+        <i class="fas fa-cog transition duration-300 group-hover:text-white"></i>
+      </button>
+
+      <button
+        class="hidden md:block p-2 group text-primary-600 w-12 h-12 bg-primary-100 hover:bg-primary-600 rounded-full transition duration-300 relative before:content[''] before:absolute before:bg-[#1dd75b] before:w-3 before:h-3 before:top-0 before:-right-0 before:rounded-full">
+
+        <i class="fas fa-bell transition duration-300  group-hover:text-white"></i>
+      </button>
+
+      <button
+        class="hidden md:block p-2 group text-primary-600 w-12 h-12 bg-primary-100 hover:bg-primary-600 rounded-full transition duration-300">
+        <i class="fas fa-globe transition duration-300  group-hover:text-white"></i>
+      </button>
+      <!-- <div id="langdropdown"
+        class="z-10 hidden bg-white rounded-lg [box-shadow:0px_0px_20px_0px_rgb(0_0_0_/_8%)] min-w-[150px] py-2">
+        <ul class="text-sm" aria-labelledby="langbtn">
+          <li>
+            <button data-modal-target="default-modal1" data-modal-toggle="default-modal1"
+              class="px-4 py-1.5 hover:text-primary-600 transition duration-300 text-sm gap-3 items-center">
+              <span>English</span>
+            </button>
+          </li>
+          <li>
+            <button data-modal-target="default-modal1" data-modal-toggle="default-modal1"
+              class="px-4 py-1.5 hover:text-primary-600 transition duration-300 text-sm gap-3 items-center">
+              <span>Arabic</span>
+            </button>
+          </li>
+          <li>
+            <button data-modal-target="default-modal1" data-modal-toggle="default-modal1"
+              class="px-4 py-1.5 hover:text-primary-600 transition duration-300 text-sm gap-3 items-center">
+              <span>Spanish</span>
+            </button>
+          </li>
+          <li>
+            <button data-modal-target="default-modal1" data-modal-toggle="default-modal1"
+              class="px-4 py-1.5 hover:text-primary-600 transition duration-300 text-sm gap-3 items-center">
+              <span>Chinese</span>
+            </button>
+          </li>
+          <li>
+            <button data-modal-target="default-modal1" data-modal-toggle="default-modal1"
+              class="px-4 py-1.5 hover:text-primary-600 transition duration-300 text-sm gap-3 items-center">
+              <span>Korea</span>
+            </button>
+          </li>
+        </ul>
+      </div> -->
+
+
+      <button
+        class="hidden md:block p-2 group text-primary-600 w-12 h-12 bg-primary-100 hover:bg-primary-600 rounded-full transition duration-300">
+        <i class="fa-solid fa-building transition duration-300  group-hover:text-white"></i>
+      </button>
+      <!-- <div id="companydropdown"
+        class="z-10 hidden bg-white rounded-lg [box-shadow:0px_0px_20px_0px_rgb(0_0_0_/_8%)] min-w-[150px] py-2">
+        <ul class="text-sm" aria-labelledby="companybtn">
+          <li>
+            <button data-modal-target="default-modal1" data-modal-toggle="default-modal1"
+              class="px-4 py-1.5 hover:text-primary-600 transition duration-300 text-sm gap-3 items-center">
+              <span>Company 1</span>
+            </button>
+          </li>
+          <li>
+            <button data-modal-target="default-modal1" data-modal-toggle="default-modal1"
+              class="px-4 py-1.5 hover:text-primary-600 transition duration-300 text-sm gap-3 items-center">
+              <span>Company 2</span>
+            </button>
+          </li>
+          <li>
+            <button data-modal-target="default-modal1" data-modal-toggle="default-modal1"
+              class="px-4 py-1.5 hover:text-primary-600 transition duration-300 text-sm gap-3 items-center">
+              <span>Company 3</span>
+            </button>
+          </li>
+          <li>
+            <button data-modal-target="default-modal1" data-modal-toggle="default-modal1"
+              class="px-4 py-1.5 hover:text-primary-600 transition duration-300 text-sm gap-3 items-center">
+              <span>Company 4</span>
+            </button>
+          </li>
+          <li>
+            <button data-modal-target="default-modal1" data-modal-toggle="default-modal1"
+              class="px-4 py-1.5 hover:text-primary-600 transition duration-300 text-sm gap-3 items-center">
+              <span>Company 5</span>
+            </button>
+          </li>
+        </ul>
+      </div> -->
+
+
+
+    </div>
+
+    <!-- User Profile -->
+
+    <div class="relative dropdown-wrapper">
+      <button>
+        <div class="flex gap-3">
+          <div class="relative flex items-center cursor-pointer w-max">
+            <img src="/static/horilla_theme/assets/icons/user1.png" alt="" class="w-11 h-11 rounded-full" />
+            <span class="absolute bottom-0 right-0 w-3 h-3 bg-[#1dd75b] rounded-full border-2 border-white"></span>
+          </div>
+          <div class="hidden md:block">
+            <div class="flex flex-col justify-center items-start h-full">
+              <h5 class="font-semibold text-sm">John Mc</h5>
+              <p class="text-xs text-dark-200">Admin</p>
+            </div>
+          </div>
+          <div class="hidden md:block pt-2.5">
+            <img src="/static/horilla_theme/assets/img/icons/downarrow.svg" alt="">
+          </div>
+        </div>
+      </button>
+
+      <div
+        class="dropdown-content absolute z-10 bg-white rounded-lg [box-shadow:0px_0px_20px_0px_rgb(0_0_0_/_8%)] min-w-[150px] py-2 right-0">
+        <ul class="text-sm" aria-labelledby="profilebtn">
+          <li>
+            <button
+              class="block px-4 py-1.5 hover:text-primary-600 transition duration-300 text-sm flex gap-4 items-center">
+              Profile
+            </button>
+          </li>
+          <li>
+            <button
+              class="block px-4 py-1.5 hover:text-primary-600 transition duration-300 text-sm flex gap-4 items-center">
+              Settings
+            </button>
+          </li>
+          <li>
+            <button
+              class="block px-4 py-1.5 hover:text-primary-600 transition duration-300 text-sm flex gap-4 items-center">
+              Logout
+            </button>
+          </li>
+        </ul>
+      </div>
+    </div>
+
+
+  </div>
+</div>
\ No newline at end of file
diff --git a/horilla_theme/templates/horilla_theme/components/header_scripts.html b/horilla_theme/templates/horilla_theme/components/header_scripts.html
new file mode 100644
index 000000000..2263cff40
--- /dev/null
+++ b/horilla_theme/templates/horilla_theme/components/header_scripts.html
@@ -0,0 +1,12 @@
+{% load static %}
+<script src="https://cdn.tailwindcss.com"></script>
+<script src="/static/horilla_theme/assets/js/tailwind.config.js"></script>
+<script src="{% static '/jquery/ajax.js' %}"></script>
+<script src="{% static '/jquery/jquery.min.js' %}"></script>
+<script src="{% static '/jquery/jqueryui.js' %}"></script>
+<script src="{% static '/base/toggleColumn.js' %}"></script>
+<script src="{% static '/build/js/orgChart.js' %}"></script>
+<script src="{% static 'build/js/driver.js' %}"></script>
+<script src="{% static 'build/js/clearFilter.js' %}"></script>
+{% block header_scripts %}
+{% endblock header_scripts %}
\ No newline at end of file
diff --git a/horilla_theme/templates/horilla_theme/components/sidebar.html b/horilla_theme/templates/horilla_theme/components/sidebar.html
new file mode 100644
index 000000000..503bf0011
--- /dev/null
+++ b/horilla_theme/templates/horilla_theme/components/sidebar.html
@@ -0,0 +1,70 @@
+<div class="fixed inset-y-0 left-0 w-auto bg-white border-r border-r-dark-50">
+  <div class="p-4">
+    <div class="flex items-center justify-center gap-2 mb-6">
+      <img src="/static/horilla_theme/assets/img/horilla-logo.png" alt="Logo" class="w-10 h-10" />
+    </div>
+
+    <nav class="space-y-2.5 overflow-hidden overflow-y-auto h-screen">
+      <a href="#" class="flex items-center gap-3 p-3 rounded-full transition duration-300 bg-primary-600">
+        <img src="/static/horilla_theme/assets/img/icons/home.svg" alt=""
+          class="w-4.5 h-4.5 transition duration-300 filter brightness-0 invert" />
+      </a>
+      <a href="#"
+        class="group flex items-center gap-3 p-3 rounded-full bg-gray-100 hover:bg-primary-600 transition duration-300">
+        <img src="/static/horilla_theme/assets/img/icons/usersearch.svg" alt=""
+          class="w-4.5 h-4.5 transition duration-300 group-hover:filter group-hover:brightness-0 group-hover:invert " />
+      </a>
+
+      <a href="#"
+        class="group flex items-center gap-3 p-3 rounded-full bg-gray-100 hover:bg-primary-600 transition duration-300">
+        <img src="/static/horilla_theme/assets/img/icons/users.svg" alt=""
+          class="w-4.5 h-4.5 transition duration-300 hover:filter group-hover:filter group-hover:brightness-0 group-hover:invert" />
+      </a>
+      <a href="#"
+        class="group flex items-center gap-3 p-3 rounded-full bg-gray-100 hover:bg-primary-600 transition duration-300">
+        <img src="/static/horilla_theme/assets/img/icons/users1.svg" alt=""
+          class="w-4.5 h-4.5 transition duration-300 hover:filter group-hover:filter group-hover:brightness-0 group-hover:invert" />
+      </a>
+      <a href="#"
+        class="group flex items-center gap-3 p-3 rounded-full bg-gray-100 hover:bg-primary-600 transition duration-300">
+        <img src="/static/horilla_theme/assets/img/icons/calendar.svg" alt=""
+          class="w-4.5 h-4.5 transition duration-300 hover:filter group-hover:filter group-hover:brightness-0 group-hover:invert" />
+      </a>
+      <a href="#"
+        class="group flex items-center gap-3 p-3 rounded-full bg-gray-100 hover:bg-primary-600 transition duration-300">
+        <img src="/static/horilla_theme/assets/img/icons/cancel.svg" alt=""
+          class="w-4.5 h-4.5 transition duration-300 hover:filter group-hover:filter group-hover:brightness-0 group-hover:invert" />
+      </a>
+      <a href="#"
+        class="group flex items-center gap-3 p-3 rounded-full bg-gray-100 hover:bg-primary-600 transition duration-300">
+        <img src="/static/horilla_theme/assets/img/icons/wallet.svg" alt=""
+          class="w-4.5 h-4.5 transition duration-300 hover:filter group-hover:filter group-hover:brightness-0 group-hover:invert" />
+      </a>
+      <a href="#"
+        class="group flex items-center gap-3 p-3 rounded-full bg-gray-100 hover:bg-primary-600 transition duration-300">
+        <img src="/static/horilla_theme/assets/img/icons/bar-chart.svg" alt=""
+          class="w-4.5 h-4.5 transition duration-300 hover:filter group-hover:filter group-hover:brightness-0 group-hover:invert" />
+      </a>
+      <a href="#"
+        class="group flex items-center gap-3 p-3 rounded-full bg-gray-100 hover:bg-primary-600 transition duration-300">
+        <img src="/static/horilla_theme/assets/img/icons/exit.svg" alt=""
+          class="w-4.5 h-4.5 transition duration-300 hover:filter group-hover:filter group-hover:brightness-0 group-hover:invert" />
+      </a>
+      <a href="#"
+        class="group flex items-center gap-3 p-3 rounded-full bg-gray-100 hover:bg-primary-600 transition duration-300">
+        <img src="/static/horilla_theme/assets/img/icons/building.svg" alt=""
+          class="w-4.5 h-4.5 transition duration-300 hover:filter group-hover:filter group-hover:brightness-0 group-hover:invert" />
+      </a>
+      <a href="#"
+        class="group flex items-center gap-3 p-3 rounded-full bg-gray-100 hover:bg-primary-600 transition duration-300">
+        <img src="/static/horilla_theme/assets/img/icons/support.svg" alt=""
+          class="w-4.5 h-4.5 transition duration-300 hover:filter group-hover:filter group-hover:brightness-0 group-hover:invert" />
+      </a>
+      <a href="#"
+        class="group flex items-center gap-3 p-3 rounded-full bg-gray-100 hover:bg-primary-600 transition duration-300">
+        <img src="/static/horilla_theme/assets/img/icons/setting.svg" alt=""
+          class="w-4.5 h-4.5 transition duration-300 hover:filter group-hover:filter group-hover:brightness-0 group-hover:invert" />
+      </a>
+    </nav>
+  </div>
+</div>
\ No newline at end of file
diff --git a/horilla_theme/templates/index.html b/horilla_theme/templates/index.html
new file mode 100644
index 000000000..a08da26f5
--- /dev/null
+++ b/horilla_theme/templates/index.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        {% include "horilla_theme/components/header_scripts.html" %}
+        <link
+            rel="stylesheet"
+            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
+        />
+
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+        <link
+            href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"
+            rel="stylesheet"
+        />
+
+        <script src="/static/horilla_theme/assets/js/global.js"></script>
+        <link
+            rel="stylesheet"
+            href="/static/horilla_theme/assets/css/global.css"
+        />
+        <link
+            rel="stylesheet"
+            href="/static/horilla_theme/assets/css/v1_styles.css"
+        />
+        <link
+            href="https://cdn.jsdelivr.net/npm/flowbite@3.1.2/dist/flowbite.min.css"
+            rel="stylesheet"
+        />
+
+        <script src="https://cdn.jsdelivr.net/npm/flowbite@3.1.2/dist/flowbite.min.js"></script>
+    </head>
+
+    <body class="bg-secondary-50 font-[Inter,_sans-serif]">
+        <!-- Include Sidebar -->
+        <div id="sidebar">
+            {% include "horilla_theme/components/sidebar.html" %}
+        </div>
+
+        <!-- Main Content -->
+        <div class="ml-[4.7rem] h-screen">
+            <div class="bg-[#F6F6F6]">
+                <!-- Include Header -->
+                <div id="header">
+                    {% include "horilla_theme/components/header.html" %}
+                </div>
+
+                <div class="p-6 pt-24">
+                    {% block content %} 
+                        {% include "horilla_theme/components/dashboard.html" %} 
+                    {% endblock %}
+                </div>
+            </div>
+        </div>
+        {% include "generic/components.html" %}
+        {% include "horilla_theme/components/footer_scripts.html" %}
+    </body>
+</html>
diff --git a/horilla_theme/tests.py b/horilla_theme/tests.py
new file mode 100644
index 000000000..7ce503c2d
--- /dev/null
+++ b/horilla_theme/tests.py
@@ -0,0 +1,3 @@
+from django.test import TestCase
+
+# Create your tests here.
diff --git a/horilla_theme/views.py b/horilla_theme/views.py
new file mode 100644
index 000000000..91ea44a21
--- /dev/null
+++ b/horilla_theme/views.py
@@ -0,0 +1,3 @@
+from django.shortcuts import render
+
+# Create your views here.
diff --git a/horilla_views/cbv_methods.py b/horilla_views/cbv_methods.py
index 98968366a..cf04fc7d4 100644
--- a/horilla_views/cbv_methods.py
+++ b/horilla_views/cbv_methods.py
@@ -659,3 +659,243 @@ def export_xlsx(json_data, columns, file_name="quick_export"):
     )
     response["Content-Disposition"] = f'attachment; filename="{file_name}.xlsx"'
     return response
+
+
+from django.apps import apps
+from django.core.exceptions import FieldDoesNotExist
+from django.db.models import Model
+from django.db.models.fields.related import (
+    ForeignKey,
+    ManyToManyRel,
+    ManyToOneRel,
+    OneToOneField,
+    OneToOneRel,
+)
+from openpyxl import Workbook
+
+
+def get_verbose_name_from_field_path(model, field_path, import_mapping):
+    """
+    Get verbose name
+    """
+    parts = field_path.split("__")
+    current_model = model
+    verbose_name = None
+
+    for i, part in enumerate(parts):
+        try:
+            field = current_model._meta.get_field(part)
+
+            # Skip reverse relations (e.g., OneToOneRel)
+            if isinstance(field, (OneToOneRel, ManyToOneRel, ManyToManyRel)):
+                related_model = field.related_model
+                field = getattr(related_model, parts[-1]).field
+                return field.verbose_name.title()
+
+            verbose_name = field.verbose_name
+
+            if isinstance(field, (ForeignKey, OneToOneField)):
+                current_model = field.related_model
+
+        except FieldDoesNotExist:
+            return f"[Invalid: {field_path}]"
+
+    return verbose_name.title() if verbose_name else field_path
+
+
+def generate_import_excel(
+    base_model, import_fields, reference_field="id", import_mapping={}, queryset=[]
+):
+    """
+    Generate import excel
+    """
+    wb = Workbook()
+    ws = wb.active
+    ws.title = "Import Sheet"
+
+    # Style definitions
+    header_fill = PatternFill(
+        start_color="FFD700", end_color="FFD700", fill_type="solid"
+    )
+    bold_font = Font(bold=True)
+    wrap_alignment = Alignment(wrap_text=True, vertical="center", horizontal="center")
+    thin_border = Border(
+        left=Side(style="thin"),
+        right=Side(style="thin"),
+        top=Side(style="thin"),
+        bottom=Side(style="thin"),
+    )
+
+    # Generate headers
+    headers = [
+        get_verbose_name_from_field_path(base_model, field, import_mapping)
+        for field in import_fields
+    ]
+    headers = [
+        f"{get_verbose_name_from_field_path(base_model, reference_field,import_mapping)} | Reference"
+    ] + headers
+    ws.append(headers)
+
+    # Apply styles to header row
+    for col_num, _ in enumerate(headers, 1):
+        cell = ws.cell(row=1, column=col_num)
+        cell.font = bold_font
+        cell.fill = header_fill
+        cell.alignment = wrap_alignment
+        cell.border = thin_border
+
+        col_letter = get_column_letter(col_num)
+        ws.column_dimensions[col_letter].width = 30
+
+    for obj in queryset:
+        row = [str(getattribute(obj, reference_field))] + [
+            str(getattribute(obj, import_mapping.get(field, field)))
+            for field in import_fields
+        ]
+        ws.append(row)
+    ws.freeze_panes = "A2"
+    ws.freeze_panes = "B2"
+    return wb
+
+
+def split_by_import_reference(employee_data):
+    with_import_reference = []
+    without_import_reference = []
+
+    for record in employee_data:
+        if record.get("id_import_reference") is not None:
+            with_import_reference.append(record)
+        else:
+            without_import_reference.append(record)
+
+    return with_import_reference, without_import_reference
+
+
+def resolve_foreign_keys(
+    base_model,
+    record,
+    import_column_mapping,
+    model_lookup,
+    primary_key_mapping,
+    pk_values_mapping,
+    prefix="",
+):
+    resolved = {}
+
+    for key, value in record.items():
+        full_key = f"{prefix}__{key}" if prefix else key
+
+        if isinstance(value, dict):
+            try:
+                field = base_model._meta.get_field(key)
+                related_model = field.related_model
+            except Exception:
+                resolved[key] = value
+                continue
+
+            # Recursively resolve nested foreign keys
+            nested_data = resolve_foreign_keys(
+                related_model,
+                value,
+                import_column_mapping,
+                model_lookup,
+                primary_key_mapping,
+                pk_values_mapping,
+                prefix=full_key,
+            )
+            instance = related_model.objects.create(**nested_data)
+            resolved[key] = instance
+
+        else:
+            model_class = model_lookup.get(full_key)
+            lookup_field = primary_key_mapping.get(full_key)
+
+            if model_class and lookup_field:
+                if value in [None, ""]:
+                    resolved[key] = None
+                    continue
+
+                try:
+                    instance, _ = model_class.objects.get_or_create(
+                        **{lookup_field: value}
+                    )
+                    resolved[key] = instance
+                except Exception as e:
+                    raise ValueError(
+                        f"Failed to get_or_create '{model_class.__name__}' using {lookup_field}={value}: {e}"
+                    )
+            else:
+                resolved[key] = value
+
+    return resolved
+
+
+def update_related(
+    obj,
+    record,
+    primary_key_mapping,
+    reverse_model_relation_to_base_model,
+):
+    related_objects = {
+        key: getattribute(obj, key) or None
+        for key in reverse_model_relation_to_base_model
+    }
+    for relation in reverse_model_relation_to_base_model:
+        related_record_info = record.get(relation)
+        for key, value in related_record_info.items():
+            related_object = related_objects[relation]
+            obj_related_field = relation + "__" + key
+            pk_mapping = primary_key_mapping.get(obj_related_field)
+            if obj_related_field in primary_key_mapping and pk_mapping:
+                previous_obj = getattr(related_object, key, None)
+                if previous_obj and value is not None:
+                    new_obj = previous_obj._meta.model.objects.get(
+                        **{pk_mapping: value}
+                    )
+                    setattr(related_object, key, new_obj)
+            else:
+                if value is not None:
+                    setattr(related_object, key, value)
+            if related_object:
+                related_object.save()
+
+
+def assign_related(
+    record,
+    reverse_field,
+    pk_values_mapping,
+    pk_field_mapping,
+):
+    """
+    Method to assign related records
+    """
+    reverse_obj_dict = {}
+    if reverse_field in record:
+        if isinstance(record[reverse_field], dict):
+            for field, value in record[reverse_field].items():
+                full_field = reverse_field + "__" + field
+                if full_field in pk_values_mapping:
+                    reverse_obj_dict.update(
+                        {
+                            field: data
+                            for data in pk_values_mapping[full_field]
+                            if getattr(data, pk_field_mapping[full_field], None)
+                            == value
+                        }
+                    )
+                else:
+                    reverse_obj_dict[field] = value
+        else:
+            instance = [
+                data
+                for data in pk_values_mapping[reverse_field]
+                if getattr(
+                    data,
+                    pk_field_mapping[reverse_field],
+                    record[reverse_field],
+                )
+                == record[reverse_field]
+            ][0]
+            reverse_obj_dict.update({reverse_field: instance})
+
+    return reverse_obj_dict
diff --git a/horilla_views/generic/cbv/pipeline.py b/horilla_views/generic/cbv/pipeline.py
index b099e85b9..278b09869 100644
--- a/horilla_views/generic/cbv/pipeline.py
+++ b/horilla_views/generic/cbv/pipeline.py
@@ -32,6 +32,8 @@ class Pipeline(ListView):
         super().__init__(**kwargs)
         self.request = getattr(_thread_locals, "request", None)
         self.grouper = self.request.GET.get("grouper", self.grouper)
+        if kwargs.get("view") == "kanban":
+            self.template_name = "generic/pipeline/kanban.html"
         for allowed_field in self.allowed_fields:
             if self.grouper == allowed_field["field"]:
                 self.field_model = allowed_field["model"]
@@ -40,7 +42,23 @@ class Pipeline(ListView):
                 self.parameters = allowed_field["parameters"]
                 self.actions = allowed_field["actions"]
 
+    @classmethod
+    def as_view(cls, **initkwargs):
+        def view(request, *args, **kwargs):
+            # Inject URL params into initkwargs
+            initkwargs_with_url = {**initkwargs, **kwargs}
+            self = cls(**initkwargs_with_url)
+            self.request = request
+            self.args = args
+            self.kwargs = kwargs
+            return self.dispatch(request, *args, **kwargs)
+
+        return view
+
     def get_queryset(self):
+        if self.kwargs.get("view"):
+            del self.kwargs["view"]
+
         if not self.queryset:
             self.queryset = self.field_filter_class(self.request.GET).qs.filter(
                 **self.kwargs
diff --git a/horilla_views/generic/cbv/views.py b/horilla_views/generic/cbv/views.py
index 927f32f1b..b25c9f607 100644
--- a/horilla_views/generic/cbv/views.py
+++ b/horilla_views/generic/cbv/views.py
@@ -5,16 +5,21 @@ horilla/generic/views.py
 import io
 import json
 import logging
+import traceback
 from typing import Any
 from urllib.parse import parse_qs
 
+import pandas as pd
 from bs4 import BeautifulSoup
 from django import forms
 from django.contrib import messages
 from django.core.cache import cache as CACHE
 from django.core.exceptions import FieldDoesNotExist
 from django.core.paginator import Page
-from django.http import HttpRequest, HttpResponse, QueryDict
+from django.db import transaction
+from django.db.models import CharField, F
+from django.db.models.functions import Cast
+from django.http import HttpRequest, HttpResponse, JsonResponse, QueryDict
 from django.shortcuts import render
 from django.template.loader import render_to_string
 from django.urls import resolve, reverse
@@ -27,14 +32,21 @@ from base.methods import closest_numbers, eval_validate, get_key_instances
 from horilla.filters import FilterSet
 from horilla.group_by import group_by_queryset
 from horilla.horilla_middlewares import _thread_locals
+from horilla.signals import post_generic_import, pre_generic_import
 from horilla_views import models
 from horilla_views.cbv_methods import (  # update_initial_cache,
+    assign_related,
     export_xlsx,
+    generate_import_excel,
     get_short_uuid,
+    get_verbose_name_from_field_path,
     hx_request_required,
     paginator_qry,
+    resolve_foreign_keys,
     sortby,
+    split_by_import_reference,
     structured,
+    update_related,
     update_saved_filter_cache,
 )
 from horilla_views.forms import DynamicBulkUpdateForm, ToggleColumnForm
@@ -71,6 +83,18 @@ class HorillaListView(ListView):
     filter_selected: bool = True
     quick_export: bool = True
     bulk_update: bool = True
+    import_fields: list = []
+    import_file_name: str = "Quick Import"
+    update_reference: str = "pk"
+    import_related_model_column_mapping: dict = {}
+    primary_key_mapping: dict = {}
+    import_related_column_export_mapping: dict = {}
+    reverse_model_relation_to_base_model: dict = {}
+    fk_mapping: dict = {}
+    import_help: dict = {}
+    fk_o2o_field_in_base_model: list = []
+    individual_update: bool = False
+    o2o_related_name_mapping: dict = {}
 
     custom_empty_template: str = ""
 
@@ -118,6 +142,19 @@ class HorillaListView(ListView):
 
     header_attrs: dict = {}
 
+    @classmethod
+    def as_view(cls, **initkwargs):
+        def view(request, *args, **kwargs):
+            # Inject URL params into initkwargs
+            initkwargs_with_url = {**initkwargs, **kwargs}
+            self = cls(**initkwargs_with_url)
+            self.request = request
+            self.args = args
+            self.kwargs = kwargs
+            return self.dispatch(request, *args, **kwargs)
+
+        return view
+
     def post(self, *args, **kwargs):
         """
         POST method to handle post submissions
@@ -170,6 +207,14 @@ class HorillaListView(ListView):
             f"{self.model._meta.app_label}.change_{self.model.__name__.lower()}"
         )
 
+    def import_accessibility(self) -> bool:
+        """
+        Accessibility method for bulk importz
+        """
+        return self.request.user.has_perm(
+            f"{self.model._meta.app_label}.add_{self.model.__name__.lower()}"
+        )
+
     def serve_bulk_form(self, request: HttpRequest) -> HttpResponse:
         """
         Bulk form serve method
@@ -234,6 +279,673 @@ class HorillaListView(ListView):
             root_model=self.model, bulk_update_fields=self.bulk_update_fields
         )
 
+    def serve_import_sheet(self, request, *args, **kwargs):
+        """
+        Method to serve bulk import sheet
+        """
+        if not self.import_accessibility():
+            messages.info(request, "You dont have permission")
+            return HorillaFormView.HttpResponse()
+        ids = eval_validate(request.POST["selected_ids"])
+
+        wb = generate_import_excel(
+            self.model,
+            self.import_fields,
+            reference_field=self.update_reference,
+            import_mapping=self.import_related_column_export_mapping,
+            queryset=self.model.objects.filter(id__in=ids),
+        )
+
+        # Create response
+        response = HttpResponse(
+            content_type="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
+        )
+        filename = f"{self.import_file_name}.xlsx"
+        response["Content-Disposition"] = f'attachment; filename="{filename}"'
+        wb.save(response)
+        return response
+
+    def import_records(self, request, *args, **kwargs):
+        """
+        Method to import records
+        """
+        try:
+            if not self.import_accessibility():
+                messages.info(request, "You dont have permission")
+            field_column_mapping = {
+                field: get_verbose_name_from_field_path(
+                    self.model, field, self.import_related_model_column_mapping
+                )
+                for field in self.import_fields
+            }
+            update_reference = f"{get_verbose_name_from_field_path(self.model, self.update_reference, self.import_related_model_column_mapping)} | Reference"
+            update_reference_key = f"{self.update_reference}_import_reference"
+            field_column_mapping[f"{self.update_reference}_import_reference"] = (
+                update_reference
+            )
+
+            excel_file = request.FILES.get("file")
+            if not excel_file:
+                return JsonResponse({"error": "No file uploaded"}, status=400)
+
+            df = pd.read_excel(excel_file)
+
+            serialized = []
+            field_column_mapping_values = {}
+            for _, row in df.iterrows():
+                record = {}
+                for model_field, excel_col in field_column_mapping.items():
+                    if excel_col in row:
+                        value = row[excel_col]
+                        if model_field in (
+                            list(self.primary_key_mapping.keys())
+                            + list(self.import_related_model_column_mapping.keys())
+                        ) and not pd.isna(value):
+                            field_column_mapping_values[model_field] = (
+                                field_column_mapping_values.get(
+                                    model_field, set({})
+                                ).union({value})
+                            )
+                        if pd.isna(value):
+                            value = None
+                        if isinstance(value, str):
+                            value = value.strip()
+                        parts = model_field.split("__")
+                        current = record
+                        for part in parts[:-1]:
+                            current = current.setdefault(part, {})
+                        current[parts[-1]] = value
+                serialized.append(record)
+            with_ref, without_ref = split_by_import_reference(serialized)
+
+            error_records = []
+
+            error_records = []
+            pk_values_mapping = {}
+            fk_values_mapping = {}
+
+            for mapping, values in field_column_mapping_values.items():
+                related_model = self.import_related_model_column_mapping[mapping]
+                if mapping in self.primary_key_mapping:
+                    field = self.primary_key_mapping[mapping]
+                    if hasattr(related_model.objects, "entire"):
+                        existing_objects = (
+                            related_model.objects.entire()
+                            .filter(**{f"{field}__in": list(values)})
+                            .only("pk", field)
+                        )
+                    else:
+                        existing_objects = related_model.objects.filter(
+                            **{f"{field}__in": list(values)}
+                        ).only("pk", field)
+
+                    existing_values = existing_objects.annotate(
+                        field_as_str=Cast(F(field), CharField())
+                    ).values_list("field_as_str", flat=True)
+
+                    to_create = [
+                        related_model(**{field: value})
+                        for value in values
+                        if str(value) not in existing_values
+                    ]
+
+                    if to_create:
+                        pre_generic_import.send(
+                            sender=related_model,
+                            records=to_create,
+                            view=self,
+                        )
+                        related_model.objects.bulk_create(to_create)
+                        post_generic_import.send(
+                            sender=related_model,
+                            records=to_create,
+                            view=self,
+                        )
+                    pk_values_mapping[mapping] = pk_values_mapping.get(
+                        mapping, []
+                    ) + list(existing_objects)
+                elif mapping in self.fk_mapping:
+                    field = self.fk_mapping[mapping]
+                    related_model = self.import_related_model_column_mapping[mapping]
+                    existing_objects = related_model.objects.filter(
+                        **{f"{field}__in": list(values)}
+                    ).only("pk", field)
+                    existing_values = existing_objects.values_list(field, flat=True)
+                    to_create = [
+                        related_model(**{field: value})
+                        for value in values
+                        if value not in existing_values
+                    ]
+                    if to_create:
+                        pre_generic_import.send(
+                            sender=related_model,
+                            records=to_create,
+                            view=self,
+                        )
+                        related_model.objects.bulk_create(to_create)
+                        post_generic_import.send(
+                            sender=related_model,
+                            records=to_create,
+                            view=self,
+                        )
+                    fk_values_mapping[mapping] = fk_values_mapping.get(
+                        mapping, []
+                    ) + list(existing_objects)
+            if without_ref:
+                with transaction.atomic():
+                    records_to_import = []
+                    for record in without_ref:
+                        try:
+                            for reverse_field in (
+                                list(self.reverse_model_relation_to_base_model.keys())
+                                + self.fk_o2o_field_in_base_model
+                            ):
+                                if reverse_field in list(
+                                    self.primary_key_mapping.keys()
+                                ) + list(
+                                    self.reverse_model_relation_to_base_model.keys()
+                                ):
+                                    result = assign_related(
+                                        record,
+                                        reverse_field,
+                                        pk_values_mapping,
+                                        self.primary_key_mapping,
+                                    )
+                                    record[reverse_field] = result
+                                elif reverse_field in self.fk_mapping:
+                                    record.update(
+                                        {
+                                            reverse_field: data
+                                            for data in fk_values_mapping[reverse_field]
+                                            if getattr(
+                                                data,
+                                                self.fk_mapping[reverse_field],
+                                                None,
+                                            )
+                                            == record[reverse_field]
+                                        }
+                                    )
+                            records_to_import.append(record)
+
+                        except Exception as e:
+                            error_records.append(
+                                {
+                                    "record": record.get(next(iter(record)), "Unknown"),
+                                    "error": str(e),
+                                }
+                            )
+                    bulk_base_fk_grouping = {}
+                    bulk_create_reverse_related_grouping = {}
+                    bulk_create_base_grouping = []
+
+                    related_fields = list(
+                        self.reverse_model_relation_to_base_model.keys()
+                    )
+                    fk_fields = self.fk_o2o_field_in_base_model
+                    for record in records_to_import:
+                        if record.get(update_reference_key):
+                            del record[update_reference_key]
+                        instance_record = record.copy()
+                        if update_reference_key in instance_record:
+                            del instance_record[update_reference_key]
+                        for relation in related_fields:
+                            if relation in instance_record:
+                                del instance_record[relation]
+                        for fk_field in self.fk_o2o_field_in_base_model:
+                            if (
+                                fk_field in instance_record
+                                and fk_field not in self.fk_mapping
+                            ):
+                                del instance_record[fk_field]
+
+                        instance = self.model(**instance_record)
+                        for relation in related_fields:
+                            related_record = record[relation]
+                            related_record[
+                                self.reverse_model_relation_to_base_model[relation]
+                            ] = instance
+                            related_instance = self.import_related_model_column_mapping[
+                                relation
+                            ](**related_record)
+                            bulk_create_reverse_related_grouping[relation] = (
+                                bulk_create_reverse_related_grouping.get(relation, [])
+                                + [related_instance]
+                            )
+
+                        for fk_field in fk_fields:
+                            fk_record = record[fk_field]
+                            if isinstance(fk_record, dict):
+                                fk_instance = self.import_related_model_column_mapping[
+                                    fk_field
+                                ](**fk_record)
+                            else:
+                                fk_instance = fk_record
+                            bulk_base_fk_grouping[fk_field] = bulk_base_fk_grouping.get(
+                                fk_field, []
+                            ) + [fk_instance]
+                            setattr(instance, fk_field, fk_instance)
+
+                        bulk_create_base_grouping.append(instance)
+
+                    for fk_field in self.fk_o2o_field_in_base_model:
+                        if fk_field not in self.fk_mapping:
+                            for relation, items in bulk_base_fk_grouping.items():
+                                pre_generic_import.send(
+                                    sender=self.import_related_model_column_mapping[
+                                        fk_field
+                                    ],
+                                    records=items,
+                                    view=self,
+                                )
+
+                                if relation not in self.fk_mapping:
+                                    pre_generic_import.send(
+                                        sender=self.import_related_model_column_mapping[
+                                            fk_field
+                                        ],
+                                        records=items,
+                                        view=self,
+                                    )
+                                    self.import_related_model_column_mapping[
+                                        fk_field
+                                    ].objects.bulk_create(items)
+                                    post_generic_import.send(
+                                        sender=self.import_related_model_column_mapping[
+                                            fk_field
+                                        ],
+                                        records=items,
+                                        view=self,
+                                    )
+                    pre_generic_import.send(
+                        sender=self.model,
+                        records=items,
+                        view=self,
+                    )
+                    self.model.objects.bulk_create(bulk_create_base_grouping)
+                    post_generic_import.send(
+                        sender=self.model,
+                        records=items,
+                        view=self,
+                    )
+                    for related, items in bulk_create_reverse_related_grouping.items():
+                        pre_generic_import.send(
+                            sender=self.import_related_model_column_mapping[related],
+                            records=items,
+                            view=self,
+                        )
+                        self.import_related_model_column_mapping[
+                            related
+                        ].objects.bulk_create(items)
+                        post_generic_import.send(
+                            sender=self.import_related_model_column_mapping[related],
+                            records=items,
+                            view=self,
+                        )
+            if with_ref:
+                base_instance_ids = [item["id_import_reference"] for item in with_ref]
+                fields = (
+                    list(self.reverse_model_relation_to_base_model)
+                    + ["pk"]
+                    + self.fk_o2o_field_in_base_model
+                )
+                mapped_ids_queryset = (
+                    self.model.objects.filter(pk__in=base_instance_ids)
+                    .only(*fields)
+                    .values(*fields)
+                )
+                mapped_ids_with_reverse = {
+                    item["pk"]: {
+                        key: item[key]
+                        for key in list(
+                            self.reverse_model_relation_to_base_model.keys()
+                        )
+                        + self.fk_o2o_field_in_base_model
+                        if key not in self.fk_mapping
+                    }
+                    for item in mapped_ids_queryset
+                }
+                field_to_update_o2o = {}
+                o2o_to_create = []
+                o2o_create_base_mapping = {}
+                with transaction.atomic():
+                    records_to_update = []
+                    for record in with_ref:
+                        try:
+                            for reverse_field in (
+                                list(self.reverse_model_relation_to_base_model.keys())
+                                + self.fk_o2o_field_in_base_model
+                            ):
+                                if reverse_field in list(
+                                    self.primary_key_mapping.keys()
+                                ) + list(
+                                    self.reverse_model_relation_to_base_model.keys()
+                                ):
+                                    result = assign_related(
+                                        record,
+                                        reverse_field,
+                                        pk_values_mapping,
+                                        self.primary_key_mapping,
+                                    )
+                                    if list(result.keys())[0] not in self.fk_mapping:
+                                        if (
+                                            reverse_field
+                                            in self.fk_o2o_field_in_base_model
+                                        ):
+                                            result["main_instance_id"] = record[
+                                                "id_import_reference"
+                                            ]
+                                        record[reverse_field] = result
+                                    else:
+                                        record[list(result.keys())[0]] = list(
+                                            result.values()
+                                        )[0]
+                                elif reverse_field in self.fk_mapping:
+                                    record.update(
+                                        {
+                                            reverse_field: data
+                                            for data in fk_values_mapping[reverse_field]
+                                            if getattr(
+                                                data,
+                                                self.fk_mapping[reverse_field],
+                                                None,
+                                            )
+                                            == record[reverse_field]
+                                        }
+                                    )
+                            records_to_update.append(record)
+
+                        except Exception as e:
+                            logger.error(traceback.format_exc())
+                            error_records.append(
+                                {
+                                    "record": record[list(record.keys())[0]],
+                                    "error": str(e),
+                                }
+                            )
+                    bulk_base_fk_grouping = {}
+                    bulk_update_reverse_related_grouping = {}
+                    bulk_create_from_update_reverse_related_grouping = {}
+                    bulk_update_base_grouping = []
+
+                    related_fields = list(
+                        self.reverse_model_relation_to_base_model.keys()
+                    )
+                    fk_fields = self.fk_o2o_field_in_base_model
+                    related_update_fields = {}
+                    for record in records_to_update:
+                        instance_record = record.copy()
+                        for relation in related_fields:
+                            if relation in instance_record:
+                                del instance_record[relation]
+                        for fk_field in self.fk_o2o_field_in_base_model:
+                            if (
+                                fk_field in instance_record
+                                and fk_field not in self.fk_mapping
+                            ):
+                                del instance_record[fk_field]
+
+                        instance_record["id"] = instance_record["id_import_reference"]
+                        instance_record["pk"] = instance_record["id_import_reference"]
+                        del instance_record["id_import_reference"]
+                        instance = self.model(**instance_record)
+                        for relation in related_fields:
+                            related_update_fields[relation] = record[relation].keys()
+
+                        for relation in related_fields:
+                            related_record = record[relation]
+                            related_record[
+                                self.reverse_model_relation_to_base_model[relation]
+                            ] = instance
+                            related_record["id"] = mapped_ids_with_reverse[instance.id][
+                                relation
+                            ]
+                            related_record["pk"] = mapped_ids_with_reverse[instance.id][
+                                relation
+                            ]
+                            related_instance = self.import_related_model_column_mapping[
+                                relation
+                            ](**related_record)
+                            if related_instance.pk is not None:
+                                bulk_update_reverse_related_grouping[relation] = (
+                                    bulk_update_reverse_related_grouping.get(
+                                        relation, []
+                                    )
+                                    + [related_instance]
+                                )
+                            else:
+                                bulk_create_from_update_reverse_related_grouping[
+                                    relation
+                                ] = bulk_update_reverse_related_grouping.get(
+                                    relation, []
+                                ) + [
+                                    related_instance
+                                ]
+
+                        for fk_field in fk_fields:
+                            if fk_field not in self.fk_mapping:
+                                fk_record = record[fk_field]
+                                pk = mapped_ids_with_reverse[
+                                    fk_record["main_instance_id"]
+                                ][fk_field]
+                                del fk_record["main_instance_id"]
+                                if pk is None:
+                                    fk_record[
+                                        self.o2o_related_name_mapping[fk_field]
+                                    ] = self.model(pk=pk, id=pk)
+                                    o2o_related_instance = (
+                                        self.import_related_model_column_mapping[
+                                            fk_field
+                                        ](**fk_record)
+                                    )
+                                    setattr(instance, fk_field, o2o_related_instance)
+                                    o2o_to_create.append(o2o_related_instance)
+                                    continue
+                                fk_record["pk"] = pk
+                                fk_record["id"] = pk
+                                if fk_field not in field_to_update_o2o:
+                                    field_to_update_o2o[fk_field] = list(
+                                        fk_record.keys()
+                                    )
+                                fk_instance = self.import_related_model_column_mapping[
+                                    fk_field
+                                ](**fk_record)
+                                bulk_base_fk_grouping[fk_field] = (
+                                    bulk_base_fk_grouping.get(fk_field, [])
+                                    + [fk_instance]
+                                )
+                                setattr(instance, fk_field, fk_instance)
+                        bulk_update_base_grouping.append(instance)
+            if with_ref and bulk_update_base_grouping:
+                for o2o_field, records in bulk_base_fk_grouping.items():
+                    field_to_update_o2o = [
+                        field
+                        for field in field_to_update_o2o[o2o_field]
+                        if field not in ["pk", "id"]
+                    ]
+                    related_model = self.import_related_model_column_mapping[o2o_field]
+                    pre_generic_import.send(
+                        sender=related_model,
+                        records=records,
+                        view=self,
+                    )
+                    if not self.individual_update:
+                        related_model.objects.bulk_update(
+                            records,
+                            field_to_update_o2o,
+                        )
+                        if o2o_to_create:
+                            pre_generic_import.send(
+                                sender=related_model,
+                                records=o2o_to_create,
+                                view=self,
+                            )
+                            related_model.objects.bulk_create(o2o_to_create)
+                            post_generic_import.send(
+                                sender=related_model,
+                                records=o2o_to_create,
+                                view=self,
+                            )
+                    else:
+                        if o2o_to_create:
+                            pre_generic_import.send(
+                                sender=related_model,
+                                records=o2o_to_create,
+                                view=self,
+                            )
+                            related_model.objects.bulk_create(o2o_to_create)
+                            post_generic_import.send(
+                                sender=related_model,
+                                records=o2o_to_create,
+                                view=self,
+                            )
+                        for o2o_instance in records:
+                            related_model.objects.update_or_create(
+                                id=o2o_instance.id,
+                                defaults={
+                                    field: getattr(o2o_instance, field)
+                                    for field in field_to_update_o2o
+                                },
+                            )
+                    post_generic_import.send(
+                        sender=related_model,
+                        records=records,
+                        view=self,
+                    )
+                field_to_update = [
+                    key for key in instance_record.keys() if key not in ["id", "pk"]
+                ] + [key for key in self.o2o_related_name_mapping]
+                pre_generic_import.send(
+                    sender=self.model,
+                    records=bulk_update_base_grouping,
+                    view=self,
+                )
+                if not self.individual_update:
+                    self.model.objects.bulk_update(
+                        bulk_update_base_grouping, field_to_update
+                    )
+                else:
+                    for model_obj in bulk_update_base_grouping:
+                        self.model.objects.update_or_create(
+                            id=model_obj.id,
+                            defaults={
+                                field: getattr(model_obj, field)
+                                for field in field_to_update
+                            },
+                        )
+                post_generic_import.send(
+                    sender=self.model,
+                    records=bulk_update_base_grouping,
+                    view=self,
+                )
+
+            if with_ref and related_update_fields:
+                for field in related_fields:
+                    related_model = self.import_related_model_column_mapping[field]
+                    if field in bulk_update_reverse_related_grouping:
+                        update_fields = [
+                            key
+                            for key in related_update_fields[field]
+                            if key not in ["id", "pk"]
+                        ]
+                        pre_generic_import.send(
+                            sender=related_model,
+                            records=bulk_update_reverse_related_grouping[field],
+                            view=self,
+                        )
+                        if not self.individual_update:
+                            related_model.objects.bulk_update(
+                                bulk_update_reverse_related_grouping[field],
+                                update_fields,
+                            )
+                        else:
+                            for (
+                                reverse_related_obj
+                            ) in bulk_update_reverse_related_grouping[field]:
+                                related_model.objects.update_or_create(
+                                    id=reverse_related_obj.id,
+                                    defaults={
+                                        field: getattr(reverse_related_obj, field)
+                                        for field in update_fields
+                                    },
+                                )
+                        post_generic_import.send(
+                            sender=related_model,
+                            records=bulk_update_reverse_related_grouping[field],
+                            view=self,
+                        )
+
+                    elif field in bulk_create_from_update_reverse_related_grouping:
+                        update_fields = [
+                            key
+                            for key in related_update_fields[field]
+                            if key not in ["id", "pk"]
+                        ]
+                        pre_generic_import.send(
+                            sender=related_model,
+                            records=bulk_create_from_update_reverse_related_grouping[
+                                field
+                            ],
+                            view=self,
+                        )
+                        if not self.individual_update:
+                            related_model.objects.bulk_create(
+                                bulk_create_from_update_reverse_related_grouping[field]
+                            )
+                        else:
+                            for (
+                                reverse_related_obj
+                            ) in bulk_create_from_update_reverse_related_grouping[
+                                field
+                            ]:
+                                # reverse_related_obj.save()
+                                related_model.objects.update_or_create(
+                                    id=reverse_related_obj.id,
+                                    defaults={
+                                        field: getattr(reverse_related_obj, field)
+                                        for field in update_fields
+                                    },
+                                )
+                        post_generic_import.send(
+                            sender=related_model,
+                            records=bulk_create_from_update_reverse_related_grouping[
+                                field
+                            ],
+                            view=self,
+                        )
+            status = "Success"
+            if error_records:
+                status = "Error Found"
+
+            return render(
+                request,
+                "cbv/import_response.html",
+                context={
+                    "view_id": self.view_id,
+                    "status": status,
+                    "imported": len(without_ref),
+                    "updated": len(with_ref),
+                    "errors": error_records[:10],  # Optional: truncate if too large
+                    "total_errors": error_records,  # Optional: truncate if too large
+                    "more_error": len(error_records) > 10,
+                },
+            )
+        except Exception as e:
+            traceback_message = traceback.format_exc()
+            error = e
+        return render(
+            request,
+            "cbv/import_response.html",
+            context={
+                "view_id": self.view_id,
+                "status": "Error Found",
+                "imported": 0,
+                "updated": 0,
+                "errors": 0,  # Optional: truncate if too large
+                "error_message": error,  # Optional: truncate if too large
+                "traceback_message": traceback_message,  # Optional: truncate if too large
+            },
+        )
+
     def get_queryset(self, queryset=None, filtered=False, *args, **kwargs):
         if not self.queryset:
             self.queryset = super().get_queryset() if not queryset else queryset
@@ -433,6 +1145,28 @@ class HorillaListView(ListView):
         urlpatterns.append(path(self.export_path, self.export_data))
         context["export_path"] = self.export_path
 
+        if self.import_fields:
+            get_import_sheet_path = (
+                f"get-import-sheet-{self.view_id}-{self.request.session.session_key}/"
+            )
+            post_import_sheet_path = (
+                f"post-import-sheet-{self.view_id}-{self.request.session.session_key}/"
+            )
+            urlpatterns.append(
+                path(
+                    get_import_sheet_path,
+                    self.serve_import_sheet,
+                )
+            )
+            urlpatterns.append(
+                path(
+                    post_import_sheet_path,
+                    self.import_records,
+                )
+            )
+            context["get_import_sheet_path"] = get_import_sheet_path
+            context["post_import_sheet_path"] = post_import_sheet_path
+        context["import_fields"] = self.import_fields
         if self.bulk_update_fields and self.bulk_update_accessibility():
             get_bulk_path = (
                 f"get-bulk-update-{self.view_id}-{self.request.session.session_key}/"
@@ -456,6 +1190,8 @@ class HorillaListView(ListView):
             context["bulk_update_fields"] = self.bulk_update_fields
             context["bulk_path"] = get_bulk_path
         context["export_formats"] = self.export_formats
+        context["import_help"] = self.import_help
+        context["import_accessibility"] = self.import_accessibility()
         return context
 
     def select_all(self, *args, **kwargs):
@@ -677,6 +1413,19 @@ class HorillaSectionView(TemplateView):
         context["style_static_paths"] = self.style_static_paths
         return context
 
+    @classmethod
+    def as_view(cls, **initkwargs):
+        def view(request, *args, **kwargs):
+            # Inject URL params into initkwargs
+            initkwargs_with_url = {**initkwargs, **kwargs}
+            self = cls(**initkwargs_with_url)
+            self.request = request
+            self.args = args
+            self.kwargs = kwargs
+            return self.dispatch(request, *args, **kwargs)
+
+        return view
+
 
 @method_decorator(hx_request_required, name="dispatch")
 class HorillaDetailedView(DetailView):
@@ -776,6 +1525,19 @@ class HorillaTabView(TemplateView):
 
     tabs: list = []
 
+    @classmethod
+    def as_view(cls, **initkwargs):
+        def view(request, *args, **kwargs):
+            # Inject URL params into initkwargs
+            initkwargs_with_url = {**initkwargs, **kwargs}
+            self = cls(**initkwargs_with_url)
+            self.request = request
+            self.args = args
+            self.kwargs = kwargs
+            return self.dispatch(request, *args, **kwargs)
+
+        return view
+
     def __init__(self, **kwargs: Any) -> None:
         super().__init__(**kwargs)
         request = getattr(_thread_locals, "request", None)
@@ -942,6 +1704,19 @@ class HorillaCardView(ListView):
         )
         return context
 
+    @classmethod
+    def as_view(cls, **initkwargs):
+        def view(request, *args, **kwargs):
+            # Inject URL params into initkwargs
+            initkwargs_with_url = {**initkwargs, **kwargs}
+            self = cls(**initkwargs_with_url)
+            self.request = request
+            self.args = args
+            self.kwargs = kwargs
+            return self.dispatch(request, *args, **kwargs)
+
+        return view
+
 
 @method_decorator(hx_request_required, name="dispatch")
 class ReloadMessages(TemplateView):
@@ -1235,6 +2010,19 @@ class HorillaFormView(FormView):
             self.form = form
         return self.form
 
+    @classmethod
+    def as_view(cls, **initkwargs):
+        def view(request, *args, **kwargs):
+            # Inject URL params into initkwargs
+            initkwargs_with_url = {**initkwargs, **kwargs}
+            self = cls(**initkwargs_with_url)
+            self.request = request
+            self.args = args
+            self.kwargs = kwargs
+            return self.dispatch(request, *args, **kwargs)
+
+        return view
+
 
 @method_decorator(hx_request_required, name="dispatch")
 class HorillaNavView(TemplateView):
@@ -1298,18 +2086,6 @@ class HorillaNavView(TemplateView):
                     verbose_name = get_field(field).verbose_name
                     append((field, verbose_name))
                 except FieldDoesNotExist:
-                    # Check for related fields (field paths with '__')
-                    if "__" in field and hasattr(
-                        model_class_ref, "get_verbose_name_related_field"
-                    ):
-                        try:
-                            verbose_name = (
-                                model_class_ref.get_verbose_name_related_field(field)
-                            )
-                            append((field, verbose_name))
-                            continue
-                        except Exception as e:
-                            pass
                     append(field)
             else:
                 append(field)
@@ -1346,6 +2122,19 @@ class HorillaNavView(TemplateView):
         # CACHE.get(self.request.session.session_key + "cbv")[HorillaNavView] = context
         return context
 
+    @classmethod
+    def as_view(cls, **initkwargs):
+        def view(request, *args, **kwargs):
+            # Inject URL params into initkwargs
+            initkwargs_with_url = {**initkwargs, **kwargs}
+            self = cls(**initkwargs_with_url)
+            self.request = request
+            self.args = args
+            self.kwargs = kwargs
+            return self.dispatch(request, *args, **kwargs)
+
+        return view
+
 
 @method_decorator(hx_request_required, name="dispatch")
 class HorillaProfileView(DetailView):
@@ -1438,6 +2227,19 @@ class HorillaProfileView(DetailView):
                 return
             cls.tabs.index(index, tab)
 
+    @classmethod
+    def as_view(cls, **initkwargs):
+        def view(request, *args, **kwargs):
+            # Inject URL params into initkwargs
+            initkwargs_with_url = {**initkwargs, **kwargs}
+            self = cls(**initkwargs_with_url)
+            self.request = request
+            self.args = args
+            self.kwargs = kwargs
+            return self.dispatch(request, *args, **kwargs)
+
+        return view
+
     def get_context_data(self, **kwargs: Any) -> dict:
         context = super().get_context_data(**kwargs)
         context["instance"] = context["object"]
diff --git a/horilla_views/templates/cbv/import_response.html b/horilla_views/templates/cbv/import_response.html
new file mode 100644
index 000000000..ec7d643d8
--- /dev/null
+++ b/horilla_views/templates/cbv/import_response.html
@@ -0,0 +1,69 @@
+{% load i18n %}
+<style>
+  table.import {
+    border-collapse: collapse;
+    width: 100%;
+  }
+
+  table.import th,
+  table.import td {
+    border: 1px solid #cdd5df;
+    padding: 8px;
+    text-align: left;
+  }
+
+  table.import th {
+    background-color: #f2f2f2;
+  }
+</style>
+<table class="table import">
+  <tr>
+    <th>Status</th>
+    <th>Imported</th>
+    <th>Updated</th>
+  </tr>
+  <tr>
+    <td>{{ status }}</td>
+    <td>{{ imported }}</td>
+    <td>{{ updated }}</td>
+  </tr>
+</table>
+{% if traceback_message %}
+   <h6 class="mt-2">{{error_message}}</h6>
+
+  <button id="toggleErrorBtn" class="toggle-button" onclick="
+  $(this).next().toggleClass('d-none');
+  ">Show Error Details</button>
+
+  <div id="errorDetails" class="error-details d-none">
+    <pre style="white-space: pre-wrap;">{{ traceback_message }}</pre>
+  </div>
+
+  <style>
+    .toggle-button {
+      background-color: #eee;
+      border: none;
+      padding: 8px 12px;
+      cursor: pointer;
+      font-size: 14px;
+      margin-top: 5px;
+    }
+
+    .toggle-button:hover {
+      background-color: #ddd;
+    }
+
+    .error-details {
+      background: #f8d7da;
+      color: #721c24;
+      border: 1px solid #f5c6cb;
+      padding: 10px;
+      margin-top: 10px;
+      border-radius: 4px;
+      font-family: monospace;
+    }
+  </style>
+{% endif %}
+<div class="modal-footer d-flex flex-row-reverse">
+  <input type="button" onclick="$('#{{ view_id }} .reload-record').click()" class="oh-btn oh-btn--small oh-btn--success w-100 mr-1 mt-2" value="Refresh" />
+</div>
diff --git a/horilla_views/templates/generic/horilla_list_table.html b/horilla_views/templates/generic/horilla_list_table.html
index b7cca8af8..53bec7adc 100644
--- a/horilla_views/templates/generic/horilla_list_table.html
+++ b/horilla_views/templates/generic/horilla_list_table.html
@@ -362,6 +362,7 @@
         <h1 class="oh-404__title">{% trans "No Records found" %}</h1>
         <p class="oh-404__subtitle">
           {% trans "No records found." %}
+          {% include "generic/import_block.html" %}
         </p>
       </div>
     </div>
diff --git a/horilla_views/templates/generic/import_block.html b/horilla_views/templates/generic/import_block.html
new file mode 100644
index 000000000..ca62dcb44
--- /dev/null
+++ b/horilla_views/templates/generic/import_block.html
@@ -0,0 +1,87 @@
+{% load generic_template_filters i18n %}
+{% if import_fields and import_accessibility %}
+  <div id="import_{{ view_id }}" class="oh-checkpoint-badge text-warning" style="cursor: pointer;color: hsl(211.72deg 91% 60%) !important;" data-toggle="oh-modal-toggle" data-target="#importModal{{ view_id }}" onclick="
+      ids = $('#{{ selected_instances_key_id }}').attr('data-ids');
+      $('#submitGetImportSheet{{ view_id }}Form').find('[name=selected_ids]').val(ids);">
+    <span class="label">{% trans 'Import' %}</span>
+    (<ion-icon name="arrow-down-outline" class="m-0"></ion-icon>)
+  </div>
+  <div class="oh-modal" id="importModal{{ view_id }}">
+    <div class="oh-modal__dialog" id="objectCreateModalTarget">
+      <div class="oh-modal__dialog-header">
+        <h2 class="oh-modal__dialog-title">Import Records</h2>
+        <button class="oh-modal__close" aria-label="Close"><ion-icon name="close-outline" role="img"></ion-icon></button>
+        <div class="oh-modal__dialog-body p-0 pb-4">
+          <form hx-post="/{{ post_import_sheet_path }}" hx-encoding="multipart/form-data" class="oh-profile-section">
+            <div class="oh-modal__dialog-body mr-5" id="uploading" style="display: none">
+              <div class="loader-container">
+                <div class="loader"></div>
+                <div class="loader-text">Uploading...</div>
+              </div>
+            </div>
+            <div id="error-container" style="color: red"></div>
+            <div class="modal-body">
+              <div class="oh-dropdown__import-form">
+                <label class="oh-dropdown__import-label">
+                  <ion-icon name="cloud-upload" class="oh-dropdown__import-form-icon md hydrated" role="img" aria-label="cloud upload"></ion-icon>
+                  <span class="oh-dropdown__import-form-title">Upload a File</span>
+                  <span class="oh-dropdown__import-form-text">Drag and drop files here</span>
+                </label>
+                <input type="file" name="file" required="" />
+                <div class="d-inline float-end">
+                  <a onclick="
+                                  $('#submitGetImportSheet{{ view_id }}').click();
+                                  " style="text-decoration:none; display: inline-block;" class="oh-dropdown__link" hx-on:click="template_download(event)">
+                    <ion-icon name="cloud-download-outline" style="font-size:20px; vertical-align: middle;" role="img" class="md hydrated"></ion-icon>
+                    <span>Download Template</span>
+                  </a>
+                </div>
+              </div>
+            </div>
+            {% if import_help %}
+              <h6 class="mt-3"><b>{% trans 'Import Help' %}</b></h6>
+              <div class="row">
+                {% for key in import_help %}
+                  <div class="mt-1 col-3">
+                    <b>{{ key }}</b>
+                    {% for val in import_help|get_item:key %}
+                      <li>{{ val }}</li>
+                    {% endfor %}
+                  </div>
+                {% endfor %}
+              </div>
+            {% endif %}
+            <div class="modal-footer d-flex flex-row-reverse">
+              <input type="submit" class="oh-btn oh-btn--small oh-btn--secondary w-100 mt-3" value="Upload" />
+            </div>
+          </form>
+          <script>
+            let htmxBusy = false
+            
+            document.body.addEventListener('htmx:configRequest', function (event) {
+              if (htmxBusy) {
+                event.preventDefault()
+                console.warn('Blocked concurrent HTMX request.')
+              } else {
+                htmxBusy = true
+              }
+            })
+            
+            document.body.addEventListener('htmx:afterRequest', function () {
+              htmxBusy = false
+            })
+            
+            document.body.addEventListener('htmx:responseError', function () {
+              htmxBusy = false
+            })
+          </script>
+          <form id="submitGetImportSheet{{ view_id }}Form" action="/{{ get_import_sheet_path }}" method="post">
+            {% csrf_token %}
+            <input type="text" name="selected_ids" hidden />
+            <input type="submit" hidden id="submitGetImportSheet{{ view_id }}" />
+          </form>
+        </div>
+      </div>
+    </div>
+  </div>
+{% endif %}
diff --git a/horilla_views/templates/generic/pipeline/kanban.html b/horilla_views/templates/generic/pipeline/kanban.html
new file mode 100644
index 000000000..17148c336
--- /dev/null
+++ b/horilla_views/templates/generic/pipeline/kanban.html
@@ -0,0 +1,575 @@
+{% load i18n recruitmentfilters %}
+{% load generic_template_filters %}
+<div id="{{ view_id }}">
+  <div class="kanban-board">
+    {% for group in groups %}
+      <div class="kanban-column" data-stage="todo">
+        <div class="column-header">
+          <div class="column-title">
+            <h3 title="{{group}}">{{ group|stringformat:"s"|truncatechars:22 }}</h3>
+          </div>
+          <div div class="d-flex" style="width: 50px;">
+            <span class="task-count">2</span><div class="dropdown">
+              {% if actions %}
+              <div>
+                <button class="dropbtn">⋮</button>
+                <div class="dropdown-content">
+                {% for action in actions %}
+                  {% if action.accessibility|accessibility:group %}
+                  <a {{action.attrs|format:group|safe}}>{{action.action}}</a>
+                  {% endif %}
+                {% endfor %}
+                </div>
+              </div>
+              {% endif %}
+            </div>
+          </div>
+        </div>
+        <div class="cards-container">
+          <div class="kanban-card" draggable="true" data-id="1">
+            <div class="card-title">Design Homepage</div>
+            <div class="card-description">Create wireframes and mockups for the new homepage design.</div>
+            <div class="card-meta">
+              <span class="card-priority priority-high">High Priority</span>
+              <div class="meta-content">
+                <span>May 16</span>
+                <div class="profile-container">
+                  <div class="avatar-placeholder" title="Unassigned">+</div>
+                  <div class="assignee-dropdown">
+                    <div class="assignee-option" data-initials="JD">
+                      <div class="avatar" style="background-color: #4f46e5;">JD</div>
+                      <span>John Doe</span>
+                    </div>
+                    <div class="assignee-option" data-initials="AS">
+                      <div class="avatar" style="background-color: #10b981;">AS</div>
+                      <span>Alice Smith</span>
+                    </div>
+                    <div class="assignee-option" data-initials="RJ">
+                      <div class="avatar" style="background-color: #f43f5e;">RJ</div>
+                      <span>Robert Johnson</span>
+                    </div>
+                    <div class="assignee-option" data-initials="UN">
+                      <div class="avatar-placeholder">+</div>
+                      <span>Unassigned</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="kanban-card" draggable="true" data-id="2">
+            <div class="card-title">Update Documentation</div>
+            <div class="card-description">Review and update the API documentation for v2.0 release.</div>
+            <div class="card-meta">
+              <span class="card-priority priority-medium">Medium Priority</span>
+              <div class="meta-content">
+                <span>May 20</span>
+                <div class="profile-container">
+                  <div class="avatar" style="background-color: #10b981;" title="Alice Smith">AS</div>
+                  <div class="assignee-dropdown">
+                    <div class="assignee-option" data-initials="JD">
+                      <div class="avatar" style="background-color: #4f46e5;">JD</div>
+                      <span>John Doe</span>
+                    </div>
+                    <div class="assignee-option" data-initials="AS">
+                      <div class="avatar" style="background-color: #10b981;">AS</div>
+                      <span>Alice Smith</span>
+                    </div>
+                    <div class="assignee-option" data-initials="RJ">
+                      <div class="avatar" style="background-color: #f43f5e;">RJ</div>
+                      <span>Robert Johnson</span>
+                    </div>
+                    <div class="assignee-option" data-initials="UN">
+                      <div class="avatar-placeholder">+</div>
+                      <span>Unassigned</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="add-task">+ Add new task</div>
+        </div>
+      </div>
+    {% endfor %}
+  </div>
+</div>
+
+<script>
+  $(document).ready(function () {
+    // Define the viewId
+    var viewId = '#{{view_id}}'
+  
+    let draggedCard = null
+  
+    // Initialize drag events for cards
+    function initDragAndDrop() {
+      // Drag start
+      $(viewId + ' .kanban-card').on('dragstart', function () {
+        draggedCard = $(this)
+        setTimeout(function () {
+          draggedCard.addClass('dragging')
+        }, 0)
+      })
+  
+      // Drag end
+      $(viewId + ' .kanban-card').on('dragend', function () {
+        $(this).removeClass('dragging')
+        draggedCard = null
+        updateTaskCounts()
+      })
+  
+      // Handle dragover to allow drops
+      $(viewId + ' .cards-container').on('dragover', function (e) {
+        e.preventDefault()
+        $(this).addClass('drop-zone')
+      })
+  
+      // Remove drop zone highlighting
+      $(viewId + ' .cards-container').on('dragleave', function () {
+        $(this).removeClass('drop-zone')
+      })
+  
+      // Handle drops
+      $(viewId + ' .cards-container').on('drop', function (e) {
+        e.preventDefault()
+        $(this).removeClass('drop-zone')
+  
+        if (draggedCard) {
+          // Find the "Add task" button and insert before it
+          const addTaskButton = $(this).find('.add-task')
+          draggedCard.insertBefore(addTaskButton)
+  
+          const itemId = draggedCard.data('id')
+          const column = $(this).closest('.kanban-column')
+          const newStage = column.data('stage')
+  
+          console.log(`Item ${itemId} moved to ${newStage}`)
+  
+          // Update card styling based on new column
+          updateCardStyling(draggedCard, newStage)
+  
+          // 🔁 Replace with AJAX to update backend
+          /*
+                  $.ajax({
+                    url: '/api/kanban/update-stage/',
+                    type: 'POST',
+                    contentType: 'application/json',
+                    headers: {
+                      'X-CSRFToken': '{{ csrf_token }}'
+                    },
+                    data: JSON.stringify({
+                      item_id: itemId,
+                      new_stage: newStage
+                    })
+                  });
+                  */
+        }
+      })
+    }
+  
+    // Initialize profile dropdowns for cards
+    function initProfileDropdowns() {
+      // Avatar click to show dropdown
+      $(viewId).on('click', '.avatar, .avatar-placeholder', function (e) {
+        e.stopPropagation()
+        const dropdown = $(this).siblings('.assignee-dropdown')
+  
+        // Close all other dropdowns first
+        $(viewId + ' .assignee-dropdown.active')
+          .not(dropdown)
+          .removeClass('active')
+  
+        // Toggle this dropdown
+        dropdown.toggleClass('active')
+      })
+  
+      // Assignee selection
+      $(viewId).on('click', '.assignee-option', function () {
+        const profileContainer = $(this).closest('.profile-container')
+        const initials = $(this).data('initials')
+  
+        if (initials === 'UN') {
+          // Unassign
+          profileContainer.find('.avatar, .avatar-placeholder').replaceWith($('<div class="avatar-placeholder" title="Unassigned">+</div>'))
+        } else {
+          // Assign to selected person
+          const personName = $(this).find('span').text()
+          const avatar = $(this).find('.avatar').clone()
+          avatar.attr('title', personName)
+  
+          profileContainer.find('.avatar, .avatar-placeholder').replaceWith(avatar)
+        }
+  
+        // Close dropdown
+        profileContainer.find('.assignee-dropdown').removeClass('active')
+      })
+  
+      // Close dropdowns when clicking elsewhere
+      $(document).on('click', function () {
+        $(viewId + ' .assignee-dropdown.active').removeClass('active')
+      })
+    }
+  
+    // Initialize column collapse/expand functionality
+    function initColumnCollapse() {
+      $(viewId + ' .column-header').on('click', function () {
+        $(this).closest('.kanban-column').toggleClass('collapsed')
+      })
+    }
+  
+    // Handle adding new tasks
+    function initAddTask() {
+      $(viewId + ' .add-task').on('click', function () {
+        const column = $(this).closest('.kanban-column')
+        const stage = column.data('stage')
+  
+        // Create a new card
+        const newCard = createNewTaskCard(stage)
+  
+        // Add it before the add button
+        $(this).before(newCard)
+  
+        // Initialize drag events for the new card
+        newCard
+          .on('dragstart', function () {
+            draggedCard = $(this)
+            setTimeout(function () {
+              draggedCard.addClass('dragging')
+            }, 0)
+          })
+          .on('dragend', function () {
+            $(this).removeClass('dragging')
+            draggedCard = null
+            updateTaskCounts()
+          })
+  
+        // Update counts
+        updateTaskCounts()
+  
+        console.log(`New task created in ${stage}`)
+      })
+    }
+  
+    // Create a new task card
+    function createNewTaskCard(stage) {
+      // Create unique ID for the card
+      const newId = Date.now()
+  
+      // Create the card with proper structure
+      const newCard = $('<div class="kanban-card" draggable="true"></div>').attr('data-id', newId).append(`
+                  <div class="card-title">New Task</div>
+                  <div class="card-description">Click to edit this task description.</div>
+                  <div class="card-meta">
+                    <span class="card-priority priority-medium">Medium Priority</span>
+                    <div class="meta-content">
+                      <span>Today</span>
+                      <div class="profile-container">
+                        <div class="avatar-placeholder" title="Unassigned">+</div>
+                        <div class="assignee-dropdown">
+                          <div class="assignee-option" data-initials="JD">
+                            <div class="avatar" style="background-color: #4f46e5;">JD</div>
+                            <span>John Doe</span>
+                          </div>
+                          <div class="assignee-option" data-initials="AS">
+                            <div class="avatar" style="background-color: #10b981;">AS</div>
+                            <span>Alice Smith</span>
+                          </div>
+                          <div class="assignee-option" data-initials="RJ">
+                            <div class="avatar" style="background-color: #f43f5e;">RJ</div>
+                            <span>Robert Johnson</span>
+                          </div>
+                          <div class="assignee-option" data-initials="UN">
+                            <div class="avatar-placeholder">+</div>
+                            <span>Unassigned</span>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                `)
+  
+      // Apply styling based on column
+      updateCardStyling(newCard, stage)
+  
+      return newCard
+    }
+  
+    // Update card styling based on column
+    function updateCardStyling(card, stage) {
+      if (stage === 'todo') {
+        card.css({
+          'border-left-color': '#f43f5e',
+          background: '#fff1f2'
+        })
+      } else if (stage === 'inprogress') {
+        card.css({
+          'border-left-color': '#f59e0b',
+          background: '#fffbeb'
+        })
+      } else if (stage === 'done') {
+        card.css({
+          'border-left-color': '#10b981',
+          background: '#ecfdf5'
+        })
+      }
+    }
+  
+    // Update task counts for each column
+    function updateTaskCounts() {
+      $(viewId + ' .kanban-column').each(function () {
+        const cardCount = $(this).find('.kanban-card').length
+        $(this).find('.task-count').text(cardCount)
+      })
+    }
+  
+    // Initialize everything
+    function init() {
+      initDragAndDrop()
+      initProfileDropdowns()
+      initColumnCollapse()
+      initAddTask()
+      updateTaskCounts()
+    }
+  
+    // Run initialization
+    init()
+  })
+</script>
+
+<script>
+  const cards = document.querySelectorAll('.kanban-card')
+  const columns = document.querySelectorAll('.kanban-column')
+  const cardsContainers = document.querySelectorAll('.cards-container')
+  const addTaskButtons = document.querySelectorAll('.add-task')
+  
+  let draggedCard = null
+  
+  // Initialize card dragging
+  cards.forEach((card) => {
+    card.addEventListener('dragstart', () => {
+      draggedCard = card
+      setTimeout(() => {
+        card.classList.add('dragging')
+      }, 0)
+    })
+  
+    card.addEventListener('dragend', () => {
+      draggedCard = null
+      card.classList.remove('dragging')
+      updateTaskCounts()
+    })
+  
+    // Set up profile dropdown functionality
+    const profileContainer = card.querySelector('.profile-container')
+    if (profileContainer) {
+      const avatar = profileContainer.querySelector('.avatar, .avatar-placeholder')
+      const dropdown = profileContainer.querySelector('.assignee-dropdown')
+  
+      avatar.addEventListener('click', (e) => {
+        e.stopPropagation()
+        // Close all other dropdowns first
+        document.querySelectorAll('.assignee-dropdown.active').forEach((el) => {
+          if (el !== dropdown) {
+            el.classList.remove('active')
+          }
+        })
+        dropdown.classList.toggle('active')
+      })
+  
+      // Handle assignee selection
+      const assigneeOptions = dropdown.querySelectorAll('.assignee-option')
+      assigneeOptions.forEach((option) => {
+        option.addEventListener('click', () => {
+          const initials = option.getAttribute('data-initials')
+          const currentAvatar = profileContainer.querySelector('.avatar, .avatar-placeholder')
+  
+          if (initials === 'UN') {
+            // Unassign
+            profileContainer.innerHTML = `
+                      <div class="avatar-placeholder" title="Unassigned">+</div>
+                      <div class="assignee-dropdown">
+                        ${dropdown.innerHTML}
+                      </div>
+                    `
+          } else {
+            // Assign to selected person
+            const newAvatar = option.querySelector('.avatar').cloneNode(true)
+            newAvatar.title = option.querySelector('span').textContent
+            profileContainer.innerHTML = `
+                      ${newAvatar.outerHTML}
+                      <div class="assignee-dropdown">
+                        ${dropdown.innerHTML}
+                      </div>
+                    `
+          }
+  
+          // Reset event listeners for the new elements
+          const newDropdown = profileContainer.querySelector('.assignee-dropdown')
+          const newAvatar = profileContainer.querySelector('.avatar, .avatar-placeholder')
+  
+          newAvatar.addEventListener('click', (e) => {
+            e.stopPropagation()
+            newDropdown.classList.toggle('active')
+          })
+  
+          // Reset assignee option event listeners
+          const newOptions = newDropdown.querySelectorAll('.assignee-option')
+          newOptions.forEach((newOpt) => {
+            newOpt.addEventListener('click', function () {
+              const newInitials = this.getAttribute('data-initials')
+              // Recursive call to handle this selection
+              this.click() // This is a simplified approach
+            })
+          })
+  
+          dropdown.classList.remove('active')
+        })
+      })
+    }
+  })
+  
+  // Handle column collapse
+  document.querySelectorAll('.column-header').forEach((header) => {
+    header.addEventListener('click', () => {
+      const column = header.closest('.kanban-column')
+      column.classList.toggle('collapsed')
+    })
+  })
+  
+  // Close dropdowns when clicking outside
+  document.addEventListener('click', () => {
+    document.querySelectorAll('.assignee-dropdown.active').forEach((dropdown) => {
+      dropdown.classList.remove('active')
+    })
+  })
+  
+  // Handle drag and drop for columns
+  cardsContainers.forEach((container) => {
+    container.addEventListener('dragover', (e) => {
+      e.preventDefault()
+      container.classList.add('drop-zone')
+    })
+  
+    container.addEventListener('dragleave', () => {
+      container.classList.remove('drop-zone')
+    })
+  
+    container.addEventListener('drop', (e) => {
+      e.preventDefault()
+      container.classList.remove('drop-zone')
+  
+      if (draggedCard) {
+        // Find the "Add task" button and insert before it
+        const addTaskButton = container.querySelector('.add-task')
+        container.insertBefore(draggedCard, addTaskButton)
+  
+        const itemId = draggedCard.getAttribute('data-id')
+        const column = container.closest('.kanban-column')
+        const newStage = column.getAttribute('data-stage')
+  
+        console.log(`Item ${itemId} moved to ${newStage}`)
+  
+        // Update card styling based on new column
+        updateCardStyling(draggedCard, newStage)
+  
+        // 🔁 Replace with AJAX to update backend
+        /*
+                fetch('/api/kanban/update-stage/', {
+                  method: 'POST',
+                  headers: {
+                    'Content-Type': 'application/json',
+                    'X-CSRFToken': '{{ csrf_token }}'
+                  },
+                  body: JSON.stringify({
+                    item_id: itemId,
+                    new_stage: newStage
+                  })
+                });
+                */
+      }
+    })
+  })
+  
+  // Handle add task button clicks
+  addTaskButtons.forEach((button) => {
+    button.addEventListener('click', () => {
+      const column = button.closest('.kanban-column')
+      const stage = column.getAttribute('data-stage')
+      const container = column.querySelector('.cards-container')
+  
+      // Create a new card with a unique ID (this is just for demo purposes)
+      const newId = Date.now()
+      const newCard = document.createElement('div')
+      newCard.className = 'kanban-card'
+      newCard.setAttribute('draggable', 'true')
+      newCard.setAttribute('data-id', newId)
+  
+      // Set the default content for the new card
+      newCard.innerHTML = `
+                <div class="card-title">New Task</div>
+                <div class="card-description">Click to edit this task description.</div>
+                <div class="card-meta">
+                  <span class="card-priority priority-medium">Medium Priority</span>
+                  <span>Today</span>
+                </div>
+              `
+  
+      // Apply styling based on the column
+      updateCardStyling(newCard, stage)
+  
+      // Add the new card before the add task button
+      container.insertBefore(newCard, button)
+  
+      // Set up drag events for the new card
+      newCard.addEventListener('dragstart', () => {
+        draggedCard = newCard
+        setTimeout(() => {
+          newCard.classList.add('dragging')
+        }, 0)
+      })
+  
+      newCard.addEventListener('dragend', () => {
+        draggedCard = null
+        newCard.classList.remove('dragging')
+        updateTaskCounts()
+      })
+  
+      // Update counts
+      updateTaskCounts()
+  
+      console.log(`New task created in ${stage}`)
+    })
+  })
+  
+  // Function to update card styling based on column
+  function updateCardStyling(card, stage) {
+    // Remove all potential styling classes first
+    card.style.borderLeftColor = ''
+    card.style.background = ''
+  
+    // Apply styling based on stage
+    if (stage === 'todo') {
+      card.style.borderLeftColor = '#f43f5e'
+      card.style.background = '#fff1f2'
+    } else if (stage === 'inprogress') {
+      card.style.borderLeftColor = '#f59e0b'
+      card.style.background = '#fffbeb'
+    } else if (stage === 'done') {
+      card.style.borderLeftColor = '#10b981'
+      card.style.background = '#ecfdf5'
+    }
+  }
+  
+  // Function to update task counts
+  function updateTaskCounts() {
+    columns.forEach((column) => {
+      const cards = column.querySelectorAll('.kanban-card').length
+      const countSpan = column.querySelector('.task-count')
+      countSpan.textContent = cards
+    })
+  }
+  
+  // Initial count update
+  updateTaskCounts()
+</script>
diff --git a/horilla_views/templates/generic/quick_actions.html b/horilla_views/templates/generic/quick_actions.html
index 8ed5025fa..7930c36bf 100644
--- a/horilla_views/templates/generic/quick_actions.html
+++ b/horilla_views/templates/generic/quick_actions.html
@@ -1,4 +1,4 @@
-{% load i18n %}
+{% load i18n generic_template_filters %}
 {% if request.actual_ids and request.session.prev_path == request.path %}
 <script>
   var ids =  {{request.session.hlv_selected_ids|safe}}
@@ -105,6 +105,7 @@
       </button>
     </form>
     {% endif %}
+    {% include "generic/import_block.html" %}
     {% if filter_selected %}
     <div
       id="filter_selected_{{view_id}}"
diff --git a/horilla_views/templatetags/generic_template_filters.py b/horilla_views/templatetags/generic_template_filters.py
index 44c429122..34309f22a 100644
--- a/horilla_views/templatetags/generic_template_filters.py
+++ b/horilla_views/templatetags/generic_template_filters.py
@@ -46,16 +46,14 @@ time_format_mapping = {
 
 @register.filter(name="selected_format")
 def selected_format(date: datetime.date, company: object = None) -> str:
-    if isinstance(date, datetime.date):
-        format = (
-            company.date_format if company and company.date_format else "MMM. D, YYYY"
-        )
-        strftime_format = date_format_mapping.get(format, "%b. %d, %Y")
-        return date.strftime(strftime_format)
-    elif isinstance(date, datetime.time):
-        format = company.time_format if company and company.time_format else "hh:mm A"
-        strftime_format = time_format_mapping.get(format, "%I:%M %p")
-        return date.strftime(strftime_format)
+    if company and (company.date_format or company.time_format):
+        if isinstance(date, datetime.date):
+            format = company.date_format
+            date_format_mapping.get(format)
+            return date.strftime(date_format_mapping[format])
+        elif isinstance(date, datetime.time):
+            format = company.time_format
+            return date.strftime(time_format_mapping[format])
     return date
 
 
@@ -89,31 +87,28 @@ def getattribute(value, attr: str):
 @register.filter(name="format")
 def format(string: str, instance: object):
     """
-    Format a string by resolving instance attributes, including method calls like get_status_display.
+    format
     """
     attr_placeholder_regex = r"{([^}]*)}"
     attr_placeholders = re.findall(attr_placeholder_regex, string)
 
     if not attr_placeholders:
         return string
-
-    original_instance = instance
+    flag = instance
     format_context = {}
-
     for attr_placeholder in attr_placeholders:
-        instance = original_instance  # reset each time
-        attrs = attr_placeholder.split("__")
-        try:
-            for attr in attrs:
-                instance = getattr(instance, attr, "")
-            # If final resolved attr is a method, call it
-            if callable(instance):
-                instance = instance()
-        except Exception:
-            instance = ""
-        format_context[attr_placeholder] = instance
+        attr_name: str = attr_placeholder
+        attrs = attr_name.split("__")
+        for attr in attrs:
+            value = getattr(instance, attr, "")
+            if isinstance(value, types.MethodType):
+                value = value()
+            instance = value
+            format_context[attr_name] = value
+        instance = flag
+    formatted_string = string.format(**format_context)
 
-    return string.format(**format_context)
+    return formatted_string
 
 
 @register.filter("accessibility")
diff --git a/leave/cbv/__init__.py b/leave/cbv/__init__.py
new file mode 100644
index 000000000..e69de29bb
diff --git a/leave/cbv/accessibility.py b/leave/cbv/accessibility.py
new file mode 100644
index 000000000..5c0c2f246
--- /dev/null
+++ b/leave/cbv/accessibility.py
@@ -0,0 +1,27 @@
+"""
+Accessibility page for card functions
+"""
+from django.contrib.auth.models import User
+from base.methods import check_manager
+from employee.models import Employee
+from leave.models import LeaveType
+from django.contrib.auth.context_processors import PermWrapper
+
+def assign_leave(request, instance, user_perm):
+    if request.user.has_perm('leave.add_availableleave'):
+        if not instance.is_compensatory_leave:
+             return True
+    return False
+
+
+def leave_accessibility(request, instance: object = None, user_perms: PermWrapper = [], *args, **kwargs) -> bool:
+    """
+    accessibility for leave tab in individual view
+    """
+    employee = Employee.objects.get(id=instance.pk)
+    if request.user.has_perm("leave.view_leaverequest") or check_manager(request.user.employee_get, instance) or request.user == employee.employee_user_id:
+        return True
+    return False
+
+
+
diff --git a/leave/cbv/assigned_leave.py b/leave/cbv/assigned_leave.py
new file mode 100644
index 000000000..fab06aba5
--- /dev/null
+++ b/leave/cbv/assigned_leave.py
@@ -0,0 +1,226 @@
+"""
+this page handles cbv of assigned leave page
+"""
+
+from typing import Any
+from django.http import HttpResponse
+from django.contrib import messages
+from django.urls import reverse, reverse_lazy
+from django.utils.translation import gettext_lazy as _
+from django.utils.decorators import method_decorator
+from base.methods import filtersubordinates
+from base.decorators import manager_can_enter
+from horilla_views.generic.cbv.views import (
+    TemplateView,
+    HorillaListView,
+    HorillaNavView,
+    HorillaDetailedView,
+    HorillaFormView,
+)
+from horilla_views.cbv_methods import login_required
+from leave.filters import AssignedLeaveFilter
+from leave.forms import AssignLeaveForm, AvailableLeaveColumnExportForm
+from leave.models import AvailableLeave
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(manager_can_enter("leave.view_availableleave"), name="dispatch")
+class AssignedLeaveViewPage(TemplateView):
+    """
+    for assigned leave page
+    """
+
+    template_name = "cbv/assigned_leave/assigned_leave_home.html"
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(manager_can_enter("leave.view_availableleave"), name="dispatch")
+class AssignedleaveList(HorillaListView):
+    """
+    list view of the page
+    """
+
+    model = AvailableLeave
+    filter_class = AssignedLeaveFilter
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("assign-filter")
+        self.view_id = "assignedleavedelete"
+
+    row_attrs = """
+                hx-get='{assigned_leave_detail_view}?instance_ids={ordered_ids}'
+                hx-target="#genericModalBody"
+                data-target="#genericModal"
+                data-toggle="oh-modal-toggle"
+                """
+
+    def get_queryset(self):
+        queryset = super().get_queryset()
+        queryset = filtersubordinates(
+            self.request, queryset, "leave.view_availableleave"
+        )
+        return queryset
+
+    columns = [
+        (_("Employee"), "employee_id", "employee_id__get_avatar"),
+        (_("Leave Type"), "leave_type_id"),
+        (_("Available Days"), "available_days"),
+        (_("Carryforward Days"), "carryforward_days"),
+        (_("Total Leave Days"), "total_leave_days"),
+        (_("Assigned Date"), "assigned_date"),
+        (_("taken Leaves"), "leave_taken"),
+    ]
+
+    action_method = "assigned_leave_actions"
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(manager_can_enter("leave.view_availableleave"), name="dispatch")
+class AssignedLeaveNavView(HorillaNavView):
+    """
+    navbar of the page
+    """
+
+    template_name = "cbv/assigned_leave/nav_fixed_filter.html"
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("assign-filter")
+
+        self.actions = [
+            {
+                "action": _("Import"),
+                "attrs": """
+                        onclick="
+                        importAssignedLeave();
+                        "
+                        data-toggle = "oh-modal-toggle"
+                        data-target = "#assignLeaveTypeImport
+                        "
+                        style="cursor: pointer;"
+                    """,
+            },
+            {
+                "action": _("Export"),
+                "attrs": f"""
+                        data-toggle = "oh-modal-toggle"
+                        data-target = "#genericModal"
+                        hx-target="#genericModalBody"
+                        hx-get ="{reverse('assigned-leave-nav-export')}"
+                        style="cursor: pointer;"
+                    """,
+            },
+            {
+                "action": _("Delete"),
+                "attrs": """
+                            onclick="leaveAssigBulkDelete()"
+                            data-action ="delete"
+                            style="cursor: pointer; color:red !important"
+                             """,
+            },
+        ]
+
+        self.create_attrs = f"""
+                data-toggle="oh-modal-toggle"
+                data-target="#objectCreateModal"
+                hx-target="#objectCreateModalTarget"
+                hx-get="{reverse_lazy('assign')}"
+            """
+
+    nav_title = _("All Assigned Leaves")
+    filter_instance = AssignedLeaveFilter()
+    filter_form_context_name = "form"
+    filter_body_template = "cbv/assigned_leave/assigned_filter.html"
+    search_swap_target = "#listContainer"
+
+    group_by_fields = [
+        ("employee_id", _("Employee")),
+        ("leave_type_id", _("Leave Type")),
+        ("available_days", _("Available Days")),
+        ("carryforward_days", _("Carryforward Days")),
+        ("total_leave_days", _("Total Leave Days")),
+        ("assigned_date", _("Assigned Date")),
+        ("employee_id__employee_work_info__reporting_manager_id", _("Reporting Manager")),
+        ("employee_id__employee_work_info__department_id",_("Department")),
+        ("employee_id__employee_work_info__job_position_id", _("Job Position")),
+        ("employee_id__employee_work_info__employee_type_id", _("Employement Type")),
+        ("employee_id__employee_work_info__company_id", _("Company")),
+    ]
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(manager_can_enter("leave.view_availableleave"), name="dispatch")
+class AssignedLeaveExport(TemplateView):
+    """
+    view for Export leave assigns
+    """
+
+    template_name = "cbv/assigned_leave/assigned_leave_export.html"
+
+    def get_context_data(self, **kwargs: Any):
+        """
+        context to get data
+        """
+        leaves = AvailableLeave.objects.all()
+        export_column = AvailableLeaveColumnExportForm()
+        export_filter = AssignedLeaveFilter(queryset=leaves)
+        context = super().get_context_data(**kwargs)
+        context["export_column"] = export_column
+        context["export_filter"] = export_filter
+        return context
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(manager_can_enter("leave.view_availableleave"), name="dispatch")
+class AssignedLeaveDetailView(HorillaDetailedView):
+    """
+    detail view
+    """
+
+    model = AvailableLeave
+    ttile = _("Details")
+    header = {
+        "title": "assigned_leave_detail_name_subtitle",
+        "subtitle": "assigned_leave_detail_postion_subtitle",
+        "avatar": "employee_id__get_avatar",
+    }
+    body = [
+        (_("Leave Type"), "leave_type_id"),
+        (_("Available Days"), "available_days"),
+        (_("Carryforward Days"), "carryforward_days"),
+        (_("Total Leave Days"), "total_leave_days"),
+        (_("Assigned Date"), "assigned_date"),
+        (_("Leave Reset Date"), "reset_date"),
+    ]
+
+    action_method = "assigned_leave_detail_actions"
+
+# not done 
+class AssignedLeaveFormView(HorillaFormView):
+    """
+    form view
+    """
+
+    form_class = AssignLeaveForm
+    model = AvailableLeave
+    new_display_title = _("Assign Leaves")
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        if self.form.instance.pk:
+            self.form_class.verbose_name = _("Update Available Leave")
+
+        return context
+
+    def form_valid(self, form: AssignLeaveForm) -> HttpResponse:
+        if form.is_valid():
+            if form.instance.pk:
+                message = _("Available Leave Updated Successfully")
+            else:
+                message = _("Available Leave Created Successfully")
+            form.save()
+
+            messages.success(self.request, message)
+            return self.HttpResponse()
+        return super().form_valid(form)
diff --git a/leave/cbv/compensatory_leave_request.py b/leave/cbv/compensatory_leave_request.py
new file mode 100644
index 000000000..8f864903c
--- /dev/null
+++ b/leave/cbv/compensatory_leave_request.py
@@ -0,0 +1,329 @@
+"""
+this page handles the cbv methods of compensatory leave request page.
+"""
+
+from typing import Any
+from django.apps import apps
+from django.http import HttpResponse
+from django.contrib import messages
+from django.urls import reverse, reverse_lazy
+from django.utils.translation import gettext_lazy as _
+from django.utils.decorators import method_decorator
+from base.methods import filtersubordinates, is_reportingmanager
+from horilla_views.generic.cbv.views import (
+    HorillaDetailedView,
+    HorillaListView,
+    HorillaNavView,
+    HorillaTabView,
+    TemplateView,
+    HorillaFormView,
+)
+from horilla_views.cbv_methods import login_required
+from leave.decorators import is_compensatory_leave_enabled
+from leave.methods import attendance_days
+
+if apps.is_installed("attendance"):
+    from leave.filters import CompensatoryLeaveRequestFilter
+    from leave.forms import CompensatoryLeaveForm
+    from leave.models import CompensatoryLeaveRequest
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(is_compensatory_leave_enabled(), name="dispatch")
+class CompensatoryLeaveView(TemplateView):
+    """
+    for compensatory page
+    """
+
+    template_name = "cbv/compensatory_leave/compensatory_home.html"
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(is_compensatory_leave_enabled(), name="dispatch")
+class CompensatoryListView(HorillaListView):
+    """
+    generic list view of page
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("compensatory-list")
+        # self.view_id = "compensator-container"
+
+    filter_class = CompensatoryLeaveRequestFilter
+    model = CompensatoryLeaveRequest
+    columns = [
+        (_("Employee"), "employee_id", "employee_id__get_avatar"),
+        (_("Leave Type"), "leave_type_id"),
+        (_("Attendance Dates"), "compensatory_date"),
+        (_("Requested Days"), "requested_days"),
+        (_("Created By"), "created_by__employee_get"),
+        (_("Status"), "status_display"),
+        (_("Description"), "description"),
+        (_("Comment"), "compensatory_comment"),
+    ]
+    option_method = "compensatory_options"
+
+    sortby_mapping = [
+        ("Employee", "employee_id__get_full_name"),
+        ("Leave Type", "leave_type_id__name"),
+        ("Attendance Dates", "compensatory_date"),
+        ("Requested Days", "requested_days"),
+        ("Created By", "created_by__get_full_name"),
+        ("Status", "status_display")
+    ]
+    row_status_indications = [
+        (
+            "rejected--dot",
+            _("Rejected"),
+            """
+            onclick="
+            $('#applyFilter').closest('form').find('[name=status]').val('rejected');
+            $('[name=approved]').val('unknown').change();
+            $('[name=requested]').val('unknown').change();
+            $('#applyFilter').click();
+            "
+
+            """,
+        ),
+        (
+            "requested--dot",
+            _("Requested"),
+            """
+            onclick="
+            $('#applyFilter').closest('form').find('[name=status]').val('requested');
+            $('[name=rejected]').val('unknown').change();
+            $('[name=approved]').val('unknown').change();
+            $('#applyFilter').click();
+            "
+
+            """,
+        ),
+        (
+            "approved--dot",
+            _("Approved"),
+            """
+            onclick="
+            $('#applyFilter').closest('form').find('[name=status]').val('approved');
+            $('[name=rejected]').val('unknown').change();
+            $('[name=requested]').val('unknown').change();
+            $('#applyFilter').click();
+            "
+
+            """,
+        ),
+    ]
+
+    row_status_class = "status-{status}"
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(is_compensatory_leave_enabled(), name="dispatch")
+class CompensatoryNavView(HorillaNavView):
+    """
+    nav bar
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("compensatory-tab-view")
+        self.create_attrs = f"""
+             hx-get="{reverse_lazy("create-compensatory-leave")}"
+             hx-target="#genericModalBody"
+             data-target="#genericModal"
+             data-toggle="oh-modal-toggle"
+         """
+
+    nav_title = _("Compensatory Leave Requests")
+    filter_body_template = "cbv/compensatory_leave/compensatory_leave_filter.html"
+    filter_instance = CompensatoryLeaveRequestFilter()
+    filter_form_context_name = "form"
+    search_swap_target = "#listContainer"
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(is_compensatory_leave_enabled(), name="dispatch")
+class CompensatoryLeaveTabView(HorillaTabView):
+    """
+    tabview of the page
+    """
+
+    template_name = "cbv/compensatory_leave/inherit_class.html"
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.tabs = [
+            {
+                "title": _("My Compensatory Leave Requests"),
+                "url": f"{reverse('my-compensatory-tab')}",
+            }
+        ]
+
+        if self.request.user.has_perm(
+            "leave.change_leaveallocationrequest"
+        ) or is_reportingmanager(self.request):
+            self.tabs.append(
+                {
+                    "title": _("Compensatory Leave Requests"),
+                    "url": f"{reverse('compensatory-tab')}",
+                }
+            )
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(is_compensatory_leave_enabled(), name="dispatch")
+class MyCompensatoryLeaveTab(CompensatoryListView):
+    """
+    my compensate leave tab
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("my-compensatory-tab")
+
+    def get_queryset(self):
+        queryset = super().get_queryset()
+        employee = self.request.user.employee_get
+        queryset = queryset.filter(employee_id=employee.id)
+        return queryset
+
+    row_attrs = """
+                {is_compensatory_request_rejected},
+                hx-get='{my_compensatory_detail_view}?instance_ids={ordered_ids}'
+                hx-target="#genericModalBody"
+                data-target="#genericModal"
+                data-toggle="oh-modal-toggle"
+                """
+    
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(is_compensatory_leave_enabled(), name="dispatch")
+class CompensatoryLeaveTab(CompensatoryListView):
+    """
+    compensate leave tab
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("compensatory-list")
+
+    def get_queryset(self):
+        queryset = super().get_queryset()
+        queryset = filtersubordinates(
+            self.request, queryset, "leave.view_compensatoryleaverequest"
+        )
+
+        return queryset
+
+    action_method = "compensatory_confirm_actions"
+    row_attrs = """
+                {is_compensatory_request_rejected},
+                hx-get='{compensatory_detail_view}?instance_ids={ordered_ids}'
+                hx-target="#genericModalBody"
+                data-target="#genericModal"
+                data-toggle="oh-modal-toggle"
+                """
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(is_compensatory_leave_enabled(), name="dispatch")
+class CompensatoryGenericDetailView(HorillaDetailedView):
+    """
+    Generic Detail view of page
+    """
+
+    model = CompensatoryLeaveRequest
+    title = _("Details")
+    header = {
+        "title": "compensatory_detail_name_subtitle",
+        "subtitle": "compensatory_detail_subtitle",
+        "avatar": "employee_id__get_avatar",
+    }
+
+    body = [
+        (_("Requested Days"), "requested_days"),
+        (_("Leave Type"), "leave_type_id"),
+        (_("Created Date"), "requested_date"),
+        (_("Created By"), "created_by__employee_get"),
+        (_("Attendance Dates"), "compensatory_date"),
+        (_("Description"), "description"),
+        (_("Reject Reason"),"compensatory_detail_reject_reason", True)
+    ]
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(is_compensatory_leave_enabled(), name="dispatch")
+class MyCompensatoryDetailView(CompensatoryGenericDetailView):
+    """
+    my compensatory tab detail view
+    """
+
+    action_method = "my_compensatory_detail_actions"
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(is_compensatory_leave_enabled(), name="dispatch")
+class CompensatoryTabDetailView(CompensatoryGenericDetailView):
+    """
+    compensatory tab detail view
+    """
+
+    action_method = "compensatory_detail_actions"
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(is_compensatory_leave_enabled(), name="dispatch")
+class CompensatoryForm(HorillaFormView):
+    """
+    for view
+    """
+
+    model = CompensatoryLeaveRequest
+    form_class = CompensatoryLeaveForm
+    new_display_title = _("Create Compensatory Leave Request")
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        if self.form.instance.pk:
+            self.form_class.verbose_name = _("Update Compensatory Leave Request")
+
+        return context
+
+    def form_valid(self, form: CompensatoryLeaveForm) -> HttpResponse:
+        if form.is_valid():
+            if form.instance.pk:
+                message = _("Compensatory Leave Updated")
+            else:
+                comp_req = form.save()
+                comp_req.requested_days = attendance_days(
+                comp_req.employee_id, comp_req.attendance_id.all()
+                )
+                comp_req.save()
+                message = _("Compensatory Leave Created")
+            form.save()
+            messages.success(self.request, message)
+            return self.HttpResponse("<script>window.location.reload()</script>")
+        return super().form_valid(form)
+
+
+# class CompensatoryRejectForm(HorillaFormView):
+#     """
+#     for view
+#     """
+
+#     model = CompensatoryLeaveRequest
+#     form_class = CompensatoryLeaveRequestRejectForm
+
+#     def get_context_data(self, **kwargs):
+#         context = super().get_context_data(**kwargs)
+#         if self.form.instance.pk:
+#             self.form_class.verbose_name = _(
+#                 "Reject Compensatory Leave Request"
+#             )
+
+#         return context
+
+#     def form_valid(self, form: CompensatoryLeaveForm) -> HttpResponse:
+#         if form.is_valid():
+#             if form.instance.pk:
+#                 message = _("Compensatory Leave Request Rejected")
+#             form.save()
+#             messages.success(self.request, message)
+#             return self.HttpResponse("<script>window.location.reload()</script>")
+#         return super().form_valid(form)
diff --git a/leave/cbv/dashboard.py b/leave/cbv/dashboard.py
new file mode 100644
index 000000000..ef6a95eea
--- /dev/null
+++ b/leave/cbv/dashboard.py
@@ -0,0 +1,209 @@
+from datetime import date
+from typing import Any
+from django.urls import reverse
+from base.methods import filtersubordinates
+from base.decorators import manager_can_enter
+from django.utils.decorators import method_decorator
+from horilla_views.generic.cbv.views import HorillaListView
+from leave.cbv.leave_allocation_request import LeaveAllocationRequests
+from django.utils.translation import gettext_lazy as _
+from leave.cbv.leave_requests import LeaveRequestsListView
+from horilla_views.cbv_methods import login_required
+from leave.cbv.my_leave_request import MyLeaveRequestListView
+from leave.filters import UserLeaveRequestFilter
+from leave.models import LeaveRequest
+
+
+@method_decorator(login_required, name="dispatch")
+class LeaveAllocationRequestToApprove(LeaveAllocationRequests):
+    """
+    List view of the page leave allocation to approve in dashboard
+    """
+
+    bulk_select_option = False
+    row_status_indications = None
+    option_method = None
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("leave-allocation-approve")
+
+    def get_queryset(self):
+        queryset = super().get_queryset()
+        queryset = queryset.filter(status="requested", employee_id__is_active=True)
+        return queryset
+
+    columns = [
+        (_("Employee"), "employee_id", "employee_id__get_avatar"),
+        (_("Leave Type"), "leave_type_id"),
+        (_("Requested Days"), "requested_days"),
+    ]
+
+    header_attrs = {
+        "action": """
+                        style ="width:120px !important"
+                        """,
+        "employee_id": """
+                        style ="width:120px !important"
+                        """,
+        "leave_type_id": """
+                        style ="width:120px !important"
+                        """,
+        "requested_days": """
+                        style ="width:100px !important"
+                        """,
+    }
+
+@method_decorator(login_required, name="dispatch")
+class LeaveRequestsToApprove(LeaveRequestsListView):
+    """
+    List view of the page leave requests to approve in dashboard
+    """
+
+    bulk_select_option = False
+    row_status_indications = None
+    option_method = None
+    show_toggle_form = False
+    
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("leave-request-and-approve")
+
+    def get_queryset(self):
+        queryset = super().get_queryset()
+        queryset = queryset.filter(
+            status="requested",
+            employee_id__is_active=True,
+            start_date__gte=date.today(),
+        )
+        queryset = filtersubordinates(
+            self.request, queryset, "leave.change_leaverequest"
+        )
+        return queryset
+
+    columns = [
+        (_("Employee"), "employee_id", "employee_id__get_avatar"),
+        (_("Period"), "get_period"),
+    ]
+    header_attrs = {
+        "action": """
+                        style ="width:100px !important"
+                        """,
+        "employee_id": """
+                        style ="width:100px !important"
+                        """,
+        "get_period":     """
+                        style ="width:100px !important"
+                        """,
+    }
+
+   
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(manager_can_enter("leave.view_leaverequest"), name="dispatch")
+class DashboardOnLeave(HorillaListView):
+    """
+    list view for on leave in dashboard
+    """
+
+    model = LeaveRequest
+    filter_class = UserLeaveRequestFilter
+    show_toggle_form = False
+    bulk_select_option = False
+
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("dashboard-on-leave")
+        if self.request.user.has_perm("leave.view_leaverequest"):
+            self.row_attrs = """
+                hx-get='{leave_requests_detail_view}?instance_ids={ordered_ids}'
+                hx-target="#genericModalBody"
+                data-target="#genericModal"
+                data-toggle="oh-modal-toggle"
+                """
+        
+
+    def get_queryset(self):
+        today = date.today()
+        queryset =  super().get_queryset()
+        queryset = queryset.filter(
+        employee_id__is_active=True,
+        status="approved",
+        start_date__lte=today,
+        end_date__gte=today,
+            )
+        return queryset
+    
+    columns = [
+        ("Employee", "employee_id", "employee_id__get_avatar"),
+    ]
+
+
+@method_decorator(login_required, name="dispatch")
+class DashboardTotalLeaveRequest(MyLeaveRequestListView):
+    """
+    list view for total leave request in dashboard
+    """
+
+    option_method = None
+    action_method = None
+    bulk_select_option = False
+    row_status_class = None
+    row_status_indications = None
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("dashboard-total-leave-request")
+
+    def get_queryset(self):
+        """
+        to filter data
+        """
+        queryset = super().get_queryset()
+        employee = self.request.user.employee_get
+        queryset = queryset.filter(employee_id=employee,status="approved")
+        return queryset
+
+    columns = [
+        ("Employee", "employee_id", "employee_id__get_avatar"),
+        ("Leave Type", "leave_type_id"),
+        ("Start Date", "start_date"),
+        ("End Date", "end_date"),
+        ("Requested Days", "requested_days"),
+        ("Status", "status"),
+    ]
+
+    sortby_mapping = [
+        ("Employee", "employee_id__get_full_name", "employee_id__get_avatar"),
+        ("Leave Type", "leave_type_id__name", "leave_type_id__get_avatar"),
+        ("Start Date", "start_date"),
+        ("End Date", "end_date"),
+        ("Requested Days", "requested_days"),
+        ("Status", "status"),
+    ]
+
+    header_attrs = {
+        "start_date": """
+                        style ="width:100px !important"
+                        """,
+        "employee_id": """
+                        style ="width:100px !important"
+                        """,
+        "leave_type_id": """
+                        style ="width:100px !important"
+                        """,
+        "end_date": """
+                        style ="width:100px !important"
+                        """,
+        "status": """
+                        style ="width:100px !important"
+                        """,
+        "requested_days": """
+                        style ="width:100px !important"
+                        """,
+    }
+
+    
diff --git a/leave/cbv/leave_allocation_request.py b/leave/cbv/leave_allocation_request.py
new file mode 100644
index 000000000..92ffd7a9a
--- /dev/null
+++ b/leave/cbv/leave_allocation_request.py
@@ -0,0 +1,379 @@
+"""
+Leave allocation request page
+"""
+
+from typing import Any
+import contextlib
+from django.contrib import messages
+from django.http import HttpResponse
+from django.shortcuts import render
+from django.urls import reverse, reverse_lazy
+from django.utils.translation import gettext_lazy as _
+from django.utils.decorators import method_decorator
+from notifications.signals import notify
+from base.methods import choosesubordinates, filtersubordinates, is_reportingmanager
+from employee.cbv.employee_profile import EmployeeProfileView
+from employee.models import Employee
+from horilla_views.cbv_methods import login_required
+from horilla_views.generic.cbv.views import (
+    HorillaDetailedView,
+    HorillaFormView,
+    HorillaListView,
+    HorillaNavView,
+    HorillaTabView,
+    TemplateView,
+)
+from leave.cbv.leave_tab import IndividualLeaveTab
+from leave.filters import LeaveAllocationRequestFilter
+from leave.forms import LeaveAllocationRequestForm
+from leave.models import LeaveAllocationRequest
+
+
+
+@method_decorator(login_required, name="dispatch")
+class LeaveAllocationRequestView(TemplateView):
+    """
+    for leave allocation  request page view
+    """
+
+    template_name = "cbv/leave_allocation_request/leave_allocation_request.html"
+
+
+@method_decorator(login_required, name="dispatch")
+class LeaveAllocationRequestList(HorillaListView):
+    """
+    List view of the page
+    """
+
+    model = LeaveAllocationRequest
+    filter_class = LeaveAllocationRequestFilter
+
+
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("leave-allocation-request-filter")
+        self.view_id = "view-container"
+
+
+    columns = [
+        (_("Employee"), "employee_id", "employee_id__get_avatar"),
+        (_("Leave Type"), "leave_type_id"),
+        (_("Requested Days"), "requested_days"),
+        (_("Created By"), "created_by__employee_get"),
+        (_("Status"), "get_status"),
+        (_("Description"), "description"),
+        (_("Comment"), "comment"),
+    ]
+
+    header_attrs = {
+        "action" :  """
+                    style="width:180px !important;"
+                    """,
+        "description" :  """
+                    style="width:180px !important;"
+                    """,
+
+    }
+
+
+    sortby_mapping = [
+        ("Employee", "employee_id__get_full_name"),
+        ("Leave Type", "leave_type_id__name"),
+        ("Requested Days", "requested_days"),
+        ("Created By", "created_by__get_full_name"),
+        ("Status", "get_status"),
+    ]
+
+
+    option_method = "action_col"
+
+    row_status_indications = [
+        (
+            "rejected--dot",
+            _("Rejected"),
+            """
+            onclick="
+            $('#applyFilter').closest('form').find('[name=status]').val('rejected');
+            $('#applyFilter').click();
+            "
+
+            """,
+        ),
+        (
+            "requested--dot",
+            _("Requested"),
+            """
+            onclick="
+            $('#applyFilter').closest('form').find('[name=status]').val('requested');
+            $('#applyFilter').click();
+            "
+
+            """,
+        ),
+        (
+            "approved--dot",
+            _("Approved"),
+            """
+            onclick="
+            $('#applyFilter').closest('form').find('[name=status]').val('approved');
+            $('#applyFilter').click();
+            "
+
+            """,
+        ),
+    ]
+
+    row_status_class = "status-{status}"
+
+
+@method_decorator(login_required, name="dispatch")
+class LeaveAllocationRequestTab(HorillaTabView):
+    """
+    Tab View
+    """
+
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.view_id = "leave-allocation"
+        self.tabs = [
+            {
+                "title": _("My Leave allocation request"),
+                "url": f"{reverse('my-leave-allocation-request-tab')}",
+            },
+        ]
+        if self.request.user.has_perm(
+            "leave.view_leaveallocationrequest"
+        ) or is_reportingmanager(self.request):
+
+            self.tabs.append(
+                {
+                    "title": _("Leave allocation requests"),
+                    "url": f"{reverse('leave-allocation-requests-tab-view')}",
+                },
+            )
+
+
+@method_decorator(login_required, name="dispatch")
+class MyLeaveAllocationRequest(LeaveAllocationRequestList):
+    """
+    My leave allocations
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("leave-allocation-request-filter")
+        self.view_id = "my-leave-container"
+
+    def get_queryset(self):
+        queryset = super().get_queryset()
+        employee = self.request.user.employee_get
+        queryset = queryset.filter(employee_id=employee).order_by("-id")
+        return queryset
+
+    row_attrs = """
+                {diff_cell}
+                hx-get='{leave_request_allocation_detail_view}?instance_ids={ordered_ids}'
+                hx-target="#genericModalBody"
+                data-target="#genericModal"
+                data-toggle="oh-modal-toggle"
+                """
+    option_method = None
+    action_method = "action_col"
+
+
+@method_decorator(login_required, name="dispatch")
+class LeaveAllocationRequests(LeaveAllocationRequestList):
+    """
+    Leave allocation request
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("leave-allocation-requests-tab-view")
+        self.view_id = "all-leave-container"
+
+    def get_queryset(self):
+        queryset = super().get_queryset()
+        queryset = filtersubordinates(
+            self.request, queryset, "leave.view_leaveallocationrequest"
+        )
+        return queryset
+
+    action_method = "confirm_col"
+
+    row_attrs = """
+                {diff_cell}
+                hx-get='{detail_view_leave_request_allocation}?instance_ids={ordered_ids}'
+                hx-target="#genericModalBody"
+                data-target="#genericModal"
+                data-toggle="oh-modal-toggle"
+                """
+
+
+@method_decorator(login_required, name="dispatch")
+class LeaveAllocationRequestNav(HorillaNavView):
+    """
+    Nav bar
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("leave-allocation-request-filter")
+        self.create_attrs = f"""
+                            data-toggle="oh-modal-toggle"
+                            data-target="#objectCreateModal"
+                            hx-target="#objectCreateModalTarget"
+                            hx-get="{reverse_lazy('leave-allocation-request-create')}"
+                            """
+
+    nav_title = _("Leave Allocation Requests")
+    filter_instance = LeaveAllocationRequestFilter()
+    filter_body_template = "cbv/leave_allocation_request/filter.html"
+    filter_form_context_name = "form"
+    search_swap_target = "#listContainer"
+
+    group_by_fields = [
+        ("employee_id", _("Employee")),
+        ("leave_type_id", _("Leave Type")),
+        ("status", _("Status")),
+        ("requested_days", _("Requested Days")),
+        (
+            "employee_id__employee_work_info__reporting_manager_id",
+            _("Reporting Manager"),
+        ),
+        ("employee_id__employee_work_info__department_id", _("Department")),
+        ("employee_id__employee_work_info__job_position_id", _("Job Position")),
+        (
+            "employee_id__employee_work_info__employee_type_id",
+            _("Employment Type"),
+        ),
+        ("employee_id__employee_work_info__company_id", _("Company")),
+    ]
+
+
+@method_decorator(login_required, name="dispatch")
+class LeaveAllocationRequestDetailView(HorillaDetailedView):
+    """
+    detail view of page
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.body = [
+            (_("Requested Days"), "requested_days"),
+            (_("Leave Type"), "leave_type_id"),
+            (_("Created Date"), "requested_date"),
+            (_("Created By"), "created_by__employee_get"),
+            (_("Description"), "description"),
+            (_("History"), "history_col", True),
+            (_("Reject Reason"), "reject_col", True),
+            (_("Attachment"), "attachment_col", True),
+        ]
+
+    action_method = "detail_action"
+
+    model = LeaveAllocationRequest
+    title = _("Details")
+    header = {
+        "title": "employee_id__get_full_name",
+        "subtitle": "leave_request_allocation_detail_subtitle",
+        "avatar": "employee_id__get_avatar",
+    }
+
+
+@method_decorator(login_required, name="dispatch")
+class LeaveAllocationsRequestsTabDetailView(LeaveAllocationRequestDetailView):
+    """
+    Detail view
+    """
+
+    action_method = "leave_detail_action"
+
+
+@method_decorator(login_required, name="dispatch")
+class LeaveAllocationRequestFormView(HorillaFormView):
+    """
+    Form View
+    """
+
+    model = LeaveAllocationRequest
+    form_class = LeaveAllocationRequestForm
+    new_display_title = _("Create Leave Allocation Request")
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        employee = self.request.user.employee_get
+        self.form_class(initial={"employee_id": employee})
+        if self.form.instance.pk:
+            self.form_class.verbose_name = "Update Request"
+            self.form_class(instance=self.form.instance)
+        self.form = choosesubordinates(
+            self.request, self.form, "leave.add_leaveallocationrequest"
+        )
+        self.form.fields["employee_id"].queryset = self.form.fields[
+            "employee_id"
+        ].queryset | Employee.objects.filter(employee_user_id=self.request.user)
+        context["form"] = self.form
+        return context
+
+    def form_invalid(self, form: Any) -> HttpResponse:
+        if not form.is_valid():
+            errors = form.errors.as_data()
+            return render(
+                self.request, self.template_name, {"form": form, "errors": errors}
+            )
+        return super().form_invalid(form)
+
+    def form_valid(self, form: LeaveAllocationRequestForm) -> HttpResponse:
+        if form.is_valid():
+            self.form_class(self.request.FILES)
+            instance = form.save()
+            instance.skip_history = False
+            if form.instance.pk:
+                message = _("Leave allocation request updated")
+                with contextlib.suppress(Exception):
+                    notify.send(
+                        self.request.user.employee_get,
+                        recipient=instance.employee_id.employee_work_info.reporting_manager_id.employee_user_id,
+                        verb=f"Leave allocation request updated for {instance.employee_id}.",
+                        verb_ar=f"تم تحديث طلب تخصيص الإجازة لـ {instance.employee_id}.",
+                        verb_de=f"Urlaubszuteilungsanforderung aktualisiert für {instance.employee_id}.",
+                        verb_es=f"Solicitud de asignación de licencia actualizada para {instance.employee_id}.",
+                        verb_fr=f"Demande d'allocation de congé mise à jour pour {instance.employee_id}.",
+                        icon="people-cicle",
+                        redirect=reverse("leave-allocation-request-view")
+                        + f"?id={instance.id}",
+                    )
+            else:
+                message = _("New leave allocation request created")
+                with contextlib.suppress(Exception):
+                    notify.send(
+                        self.request.user.employee_get,
+                        recipient=instance.employee_id.employee_work_info.reporting_manager_id.employee_user_id,
+                        verb=f"New leave allocation request created for {instance.employee_id}.",
+                        verb_ar=f"تم إنشاء طلب تخصيص إجازة جديد لـ {instance.employee_id}.",
+                        verb_de=f"Neue Anfrage zur Urlaubszuweisung erstellt für {instance.employee_id}.",
+                        verb_es=f"Nueva solicitud de asignación de permisos creada para {instance.employee_id}.",
+                        verb_fr=f"Nouvelle demande d'allocation de congé créée pour {instance.employee_id}.",
+                        icon="people-cicle",
+                        redirect=reverse("leave-allocation-request-view")
+                        + f"?id={instance.id}",
+                    )
+            instance.save()
+            messages.success(self.request, message)
+            return self.HttpResponse()
+        return super().form_valid(form)
+
+
+EmployeeProfileView.add_tab(
+    tabs=[
+        {
+            "title": "Leave",
+            # "view": views.employee_view_individual_leave_tab,
+            "view": IndividualLeaveTab.as_view(),
+            "accessibility": "leave.cbv.accessibility.leave_accessibility",
+        },
+    ]
+)
diff --git a/leave/cbv/leave_requests.py b/leave/cbv/leave_requests.py
new file mode 100644
index 000000000..3dedff414
--- /dev/null
+++ b/leave/cbv/leave_requests.py
@@ -0,0 +1,536 @@
+"""
+This page handles the cbv of leave requests page
+"""
+
+import contextlib
+from typing import Any
+
+from django.contrib import messages
+from django.http import HttpResponse
+from django.utils.translation import gettext_lazy as _
+from django.shortcuts import get_object_or_404, render
+from django.db.models import Q
+from django.urls import resolve, reverse, reverse_lazy
+from django.utils.decorators import method_decorator
+from base.cbv.penalty import ViewPenaltyList
+from base.filters import PenaltyFilter
+from base.models import PenaltyAccounts
+from leave.views import multiple_approvals_check
+from notifications.signals import notify
+from base.decorators import manager_can_enter
+from base.methods import (
+    choosesubordinates,
+    filtersubordinates,
+)
+from leave.methods import filter_conditional_leave_request
+from horilla_views.cbv_methods import login_required
+from horilla_views.generic.cbv.views import (
+    HorillaDetailedView,
+    HorillaNavView,
+    TemplateView,
+    HorillaListView,
+    HorillaFormView,
+)
+from leave.filters import LeaveRequestFilter
+from leave.forms import LeaveRequestCreationForm, LeaveRequestExportForm
+from leave.models import AvailableLeave, LeaveRequest, LeaveType
+from leave.threading import LeaveMailSendThread
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(manager_can_enter("leave.view_leaverequest"), name="dispatch")
+class LeaveRequestsView(TemplateView):
+    """
+    for leave requests page view
+    """
+
+    template_name = "cbv/leave_requests/leave_requests_home.html"
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(manager_can_enter("leave.view_leaverequest"), name="dispatch")
+class LeaveRequestsListView(HorillaListView):
+    """
+    Lits view of the page
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("request-filter")
+        self.view_id = "leaveRequest"
+        if self.request.user.has_perm("leave.change_leaverequest"):
+            self.bulk_update_fields = [
+                "status"
+            ]
+
+
+    def get_queryset(self):
+        queryset = super().get_queryset()
+        data = queryset
+        queryset = filter_conditional_leave_request(self.request)
+        data = filtersubordinates(self.request, data, "leave.view_leaverequest")
+        return data
+
+    filter_class = LeaveRequestFilter
+    model = LeaveRequest
+    records_per_page = 10
+    columns = [
+        (_("Employee"), "leave_requests_custom_emp_col"),
+        (_("Leave Type"), "leave_type_id"),
+        (_("Start Date"), "start_date"),
+        (_("End Date"), "end_date"),
+        (_("Requested Days"), "requested_days"),
+        (_("Leave Clash"), "leave_clash_col"),
+        (_("Status"), "custom_status_col"),
+        (_("Comment"), "comment_sidebar"),
+        (_("Penalities"), "penality_col"),
+    ]
+    row_attrs = """
+                {is_attendance_request_cancelled},
+                hx-get='{leave_requests_detail_view}?instance_ids={ordered_ids}'
+                hx-target="#genericModalBody"
+                data-target="#genericModal"
+                data-toggle="oh-modal-toggle"
+                """
+    sortby_mapping = [
+        ("Employee", "employee_id__get_full_name", "employee_id__get_avatar"),
+        ("Leave Type", "leave_type_id"),
+        ("Start Date", "start_date"),
+        ("End Date", "end_date"),
+        ("Requested Days", "requested_days"),
+        ("Status", "status"),
+    ]
+
+    action_method = "confirmation_col"
+    option_method = "actions_col"
+
+    header_attrs = {
+        "leave_requests_custom_emp_col": """
+                                style="width:200px !important;"
+                                """,
+        
+        "option": """
+                                style="width:200px !important;"
+                                """,                  
+    }
+
+    row_status_indications = [
+        (
+            "rejected--dot",
+            _("Rejected"),
+            """
+            onclick="
+            $('#applyFilter').closest('form').find('[name=status]').val('rejected');
+            $('[name=canceled]').val('unknown').change();
+            $('[name=approved]').val('unknown').change();
+            $('[name=requested]').val('unknown').change();
+            $('#applyFilter').click();
+            "
+
+            """,
+        ),
+        (
+            "cancelled--dot",
+            _("Canecelled"),
+            """
+            onclick="
+            $('#applyFilter').closest('form').find('[name=status]').val('cancelled');
+            $('[name=rejected]').val('unknown').change();
+            $('[name=approved]').val('unknown').change();
+            $('[name=requested]').val('unknown').change();
+            $('#applyFilter').click();
+            "
+
+            """,
+        ),
+        (
+            "approved--dot",
+            _("Approved"),
+            """
+            onclick="
+            $('#applyFilter').closest('form').find('[name=status]').val('approved');
+            $('[name=rejected]').val('unknown').change();
+            $('[name=canceled]').val('unknown').change();
+            $('[name=requested]').val('unknown').change();
+            $('#applyFilter').click();
+            "
+
+            """,
+        ),
+        (
+            "requested--dot",
+            _("Requested"),
+            """
+            onclick="
+            $('#applyFilter').closest('form').find('[name=status]').val('requested');
+            $('[name=rejected]').val('unknown').change();
+            $('[name=canceled]').val('unknown').change();
+            $('[name=approved]').val('unknown').change();
+            $('#applyFilter').click();
+            "
+
+            """,
+        ),
+    ]
+    row_status_class = (
+        "rejected-{status} cancelled-{status} requested-{status} approved-{status}"
+    )
+
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(manager_can_enter("leave.view_leaverequest"), name="dispatch")
+class LeaveRequestsNavView(HorillaNavView):
+    """
+    nav bar
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("request-filter")
+        self.search_in = [
+            ("leave_type_id", "Leave Type"),
+            ("status", "Status"),
+            ("employe_id__employee_work_info__department_id", "Department"),
+            ("employee_id__employee_work_info__job_position_id", "Job Position"),
+            ("employee_id__employee_work_info__company_id", "Company"),
+        ]
+
+        self.actions = [
+            {
+                "action": _("Bulk Approve"),
+                "attrs": """
+                    onclick="
+                    bulkApproveLeaveRequests();
+                    "
+                    style="cursor: pointer;"
+                """,
+            },
+            {
+                "action": _("Export"),
+                "attrs": f"""
+                    data-toggle = "oh-modal-toggle"
+                    data-target = "#genericModal"
+                    hx-target="#genericModalBody"
+                    hx-get ="{reverse('leave-requests-nav-export')}"
+                    style="cursor: pointer;"
+                """,
+            },
+            {
+                "action": _("Delete"),
+                "attrs": """
+                    onclick="
+                    bulkDeleteLeaveRequests();
+                    "
+                    data-action ="delete"
+                    style="cursor: pointer; color:red !important"
+                """,
+            },
+        ]
+
+        self.create_attrs = f"""
+             hx-get="{reverse_lazy("request-creation")}"
+             hx-target="#genericModalBody"
+             data-target="#genericModal"
+             data-toggle="oh-modal-toggle"
+         """
+
+    nav_title = _("Leave Requests")
+    filter_instance = LeaveRequestFilter()
+    filter_body_template = "cbv/leave_requests/filter.html"
+    filter_form_context_name = "form"
+    search_swap_target = "#listContainer"
+
+    group_by_fields = [
+        ("employee_id", _("Employee")),
+        ("leave_type_id", _("Leave Type")),
+        ("start_date", _("Start Date")),
+        ("end_date", _("End Date")),
+        ("status", _("Status")),
+        ("requested_days", _("Requested Days")),
+        ("employee_id__employee_work_info__reporting_manager_id", _("Reporting Manager")),
+        ("employee_id__employee_work_info__department_id", _("Department")),
+        ("employee_id__employee_work_info__job_position_id", _("Job Position")),
+        ("employee_id__employee_work_info__employee_type_id", _("Employement Type")),
+        ("employee_id__employee_work_info__company_id", _("Company")),
+    ]
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(manager_can_enter("leave.view_leaverequest"), name="dispatch")
+class LeaveRequestsExportNav(TemplateView):
+    """
+    for bulk export
+    """
+
+    template_name = "cbv/leave_requests/leave_requests_export.html"
+
+    def get_context_data(self, **kwargs: Any):
+        """
+        get data for export
+        """
+        data = LeaveRequest.objects.all()
+        export_form = LeaveRequestExportForm
+        export_filter = LeaveRequestFilter(queryset=data)
+        context = super().get_context_data(**kwargs)
+        context["export_form"] = export_form
+        context["export_filter"] = export_filter
+        return context
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(manager_can_enter("leave.view_leaverequest"), name="dispatch")
+class LeaveRequestsDetailView(HorillaDetailedView):
+    """
+    detail view of page
+    """
+
+    model = LeaveRequest
+    title = _("Details")
+    header = {
+        "title": "leave_requests_detail_subtitle",
+        "subtitle": "my_leave_request_detail_subtitle",
+        "avatar": "employee_id__get_avatar",
+    }
+    body = [
+        (_("Leave Type"), "leave_type_id"),
+        (_("Days"), "requested_days"),
+        (_("Start Date"), "start_date"),
+        (_("End Date"), "end_date"),
+        (_("Created Date"), "requested_date"),
+        (_("Created By"), "created_by"),
+        (_("Description"), "description"),
+        (_("View attachment"), "attachment_action", True),
+        (_("Reason for Rejection"), "rejected_action", True),
+        (_("Reason for Cancellation"), "cancelled_action", True),
+        (_("Multiple Approvals"), "multiple_approval_action", True),
+    ]
+    action_method = "leave_requests_detail_view_actions"
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(manager_can_enter("leave.add_leaverequest"), name="dispatch")
+class LeaveRequestFormView(HorillaFormView):
+    """
+    form view
+    """
+
+    model = LeaveRequest
+    form_class = LeaveRequestCreationForm
+    template_name = "cbv/leave_requests/form/inherit.html"
+    new_display_title = _("Leave Request")
+
+    def get_initial(self) -> dict:
+        initial = super().get_initial()
+        leave_type_id = self.kwargs.get("type_id")
+        employee_id = self.kwargs.get("emp_id")
+        if leave_type_id and employee_id:
+            initial["leave_type_id"] = leave_type_id
+            initial["employee_id"] = employee_id
+            return initial
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+      
+        if self.request:
+            employee = self.request.user.employee_get
+            if employee:
+                available_leaves = employee.available_leave.all()
+                assigned_leave_types = LeaveType.objects.filter(
+                    id__in=available_leaves.values_list("leave_type_id", flat=True)
+                )
+                self.form.fields["leave_type_id"].queryset = assigned_leave_types
+
+        
+        if self.form.instance.pk:
+            leave_request = LeaveRequest.objects.get(id=self.form.instance.pk)
+            leave_type_id = leave_request.leave_type_id
+            employee = leave_request.employee_id
+            self.form_class(instance=leave_request)
+            if employee:
+                available_leaves = employee.available_leave.all()
+                assigned_leave_types = LeaveType.objects.filter(
+                    id__in=available_leaves.values_list("leave_type_id", flat=True)
+                )
+                if leave_type_id not in assigned_leave_types.values_list(
+                    "id", flat=True
+                ):
+                    assigned_leave_types = (
+                        assigned_leave_types
+                        | LeaveType.objects.filter(id=leave_type_id.id)
+                    )
+                self.form.fields["leave_type_id"].queryset = assigned_leave_types
+                # form = self.form_class(instance = self.form.instance)
+        self.form = choosesubordinates(self.request, self.form, "leave.add_leaverequest")
+        if self.form.instance.pk:
+            self.form_class.verbose_name = _("Leave Request")
+
+        context["form"] = self.form
+        context["view_id"] = "leaverequest"
+
+        return context
+
+    def form_invalid(self, form: Any) -> HttpResponse:
+        if self.form.instance.pk:
+            self.form_class.verbose_name = _("Leave Request")
+        if not form.is_valid():
+            errors = form.errors.as_data()
+            return render(
+                self.request, self.template_name, {"form": form, "errors": errors}
+            )
+        return super().form_invalid(form)
+
+    def form_valid(self, form: LeaveRequestCreationForm) -> HttpResponse:
+        form = self.form_class(
+            self.request.POST, self.request.FILES, instance=self.form.instance
+        )
+        if form.is_valid():
+            if form.instance.pk:
+                leave_request = form.save(commit=False)
+                save = True
+
+                if save:
+                    leave_request.save()
+                    messages.success(
+                        self.request, _("Leave request is updated successfully")
+                    )
+                    with contextlib.suppress(Exception):
+                        notify.send(
+                            self.request.user.employee_get,
+                            recipient=leave_request.employee_id.employee_work_info.reporting_manager_id.employee_user_id,
+                            verb=f"Leave request updated for {leave_request.employee_id}.",
+                            verb_ar=f"تم تحديث طلب الإجازة لـ {leave_request.employee_id}.",
+                            verb_de=f"Urlaubsantrag aktualisiert für {leave_request.employee_id}.",
+                            verb_es=f"Solicitud de permiso actualizada para {leave_request.employee_id}.",
+                            verb_fr=f"Demande de congé mise à jour pour {leave_request.employee_id}.",
+                            icon="people-circle",
+                            redirect=reverse("request-view")
+                            + f"?id={leave_request.id}",
+                        )
+
+            else:
+                leave_request = form.save(commit=False)
+                save = True
+
+                if leave_request.leave_type_id.require_approval == "no":
+                    employee_id = leave_request.employee_id
+                    leave_type_id = leave_request.leave_type_id
+                    available_leave = AvailableLeave.objects.get(
+                        leave_type_id=leave_type_id, employee_id=employee_id
+                    )
+                    leave_request.created_by = self.request.user.employee_get
+                    leave_request.save()
+                    if leave_request.requested_days > available_leave.available_days:
+                        leave = (
+                            leave_request.requested_days
+                            - available_leave.available_days
+                        )
+                        leave_request.approved_available_days = (
+                            available_leave.available_days
+                        )
+                        available_leave.available_days = 0
+                        available_leave.carryforward_days = (
+                            available_leave.carryforward_days - leave
+                        )
+                        leave_request.approved_carryforward_days = leave
+                    else:
+                        available_leave.available_days = (
+                            available_leave.available_days
+                            - leave_request.requested_days
+                        )
+                        leave_request.approved_available_days = (
+                            leave_request.requested_days
+                        )
+                    leave_request.status = "approved"
+                    available_leave.save()
+                if save:
+                    leave_request.created_by = self.request.user.employee_get
+                    leave_request.save()
+
+                    if multiple_approvals_check(leave_request.id):
+                        conditional_requests = multiple_approvals_check(leave_request.id)
+                        managers = []
+                        for manager in conditional_requests["managers"]:
+                            managers.append(manager.employee_user_id)
+                        with contextlib.suppress(Exception):
+                            notify.send(
+                                self.request.user.employee_get,
+                                recipient=managers[0],
+                                verb="You have a new leave request to validate.",
+                                verb_ar="لديك طلب إجازة جديد يجب التحقق منه.",
+                                verb_de="Sie haben eine neue Urlaubsanfrage zur Validierung.",
+                                verb_es="Tiene una nueva solicitud de permiso que debe validar.",
+                                verb_fr="Vous avez une nouvelle demande de congé à valider.",
+                                icon="people-circle",
+                                redirect=f"/leave/request-view?id={leave_request.id}",
+                            )
+
+                    mail_thread = LeaveMailSendThread(
+                        self.request, leave_request, type="request"
+                    )
+                    mail_thread.start()
+                    messages.success(
+                        self.request, _("Leave request created successfully")
+                    )
+                    with contextlib.suppress(Exception):
+                        notify.send(
+                            self.request.user.employee_get,
+                            recipient=leave_request.employee_id.employee_work_info.reporting_manager_id.employee_user_id,
+                            verb=f"New leave request created for {leave_request.employee_id}.",
+                            verb_ar=f"تم إنشاء طلب إجازة جديد لـ {leave_request.employee_id}.",
+                            verb_de=f"Neuer Urlaubsantrag erstellt für {leave_request.employee_id}.",
+                            verb_es=f"Nueva solicitud de permiso creada para {leave_request.employee_id}.",
+                            verb_fr=f"Nouvelle demande de congé créée pour {leave_request.employee_id}.",
+                            icon="people-circle",
+                            redirect=reverse("request-view")
+                            + f"?id={leave_request.id}",
+                        )
+
+                leave_requests = LeaveRequest.objects.all()
+                if len(leave_requests) == 1:
+                    return HttpResponse("")
+
+            return self.HttpResponse("")
+        return super().form_valid(form)
+    
+
+@method_decorator(login_required, name="dispatch")
+class LeaveClashListView(LeaveRequestsListView):
+    """
+    list view of leave clash col
+    """
+
+    def get_queryset(self):
+        queryset = HorillaListView.get_queryset(self)
+        pk = self.kwargs.get("pk")
+        record = LeaveRequest.objects.get(id=pk)
+        if  record.status != 'rejected' or record.status != 'cancelled':
+            queryset = queryset.filter(
+                Q(
+                    employee_id__employee_work_info__department_id=record.employee_id.employee_work_info.department_id
+                )
+                | Q(
+                    employee_id__employee_work_info__job_position_id=record.employee_id.employee_work_info.job_position_id
+                ),
+                start_date__lte=record.end_date,
+                end_date__gte=record.start_date,
+            ).exclude(id=pk).exclude(Q(status='cancelled') | Q(status='rejected'))
+
+        return queryset.distinct()
+
+
+    columns = [
+            col for col in LeaveRequestsListView.columns
+            if col[1] not in ["leave_clash_col", "penality_col", "actions_col"]
+        ] + [(_("Clased Due To"), "clashed_due_to")]
+    
+    row_status_class = ""
+    row_status_indications = None
+    bulk_select_option = None
+    row_attrs = ""
+
+
+ViewPenaltyList.columns.extend([
+    (_("Leave Type"), "leave_type_id"),
+    (_("Minus Days"), "minus_leaves"),
+    (_("Deducted FromCFD"), "get_deduct_from_carry_forward")
+])
diff --git a/leave/cbv/leave_tab.py b/leave/cbv/leave_tab.py
new file mode 100644
index 000000000..a8bbd2ae8
--- /dev/null
+++ b/leave/cbv/leave_tab.py
@@ -0,0 +1,58 @@
+"""
+This page is handling the cbv methods of leave tab in employee profile page.
+"""
+
+from typing import Any
+from django.urls import reverse
+from django.utils.translation import gettext_lazy as _
+from base.methods import is_reportingmanager
+from employee.models import Employee
+from leave.cbv.my_leave_request import MainParentListView, MyLeaveRequestListView
+
+
+class IndividualLeaveTab(MainParentListView):
+    """
+    class for rendering leave tab in employee profile
+    """
+
+    template_name = "cbv/employee_individual/leave_tab.html"
+
+    def get_context_data(self, **kwargs: Any):
+        """
+        context data
+        """
+        context = super().get_context_data(**kwargs)
+        pk = self.kwargs.get("pk")
+        employee = Employee.objects.get(id=pk)
+        user_leave = employee.available_leave.all()
+
+        if self.request.user.employee_get == employee:
+            context["user_leaves"] = user_leave
+        else:
+            context["employee_leaves"] = user_leave
+        return context
+
+    def get_queryset(self):
+        queryset = super().get_queryset()
+        pk = self.kwargs.get("pk")
+        queryset = queryset.filter(employee_id=pk)
+        return queryset
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.view_id = "leave-tab"
+        pk = self.request.resolver_match.kwargs.get("pk")
+        self.search_url = reverse("individual-leave-tab-list",kwargs={'pk':pk})
+        if self.request.user.has_perm(
+            "leave.change_leaverequest"
+        ) or is_reportingmanager(self.request):
+            self.action_method = "confirmation_col"
+        else:
+            self.action_method = None
+
+    columns = [
+        col for col in MyLeaveRequestListView.columns if col[1] != "comment_action"
+    ]
+
+    # option_method = None
+    # row_status_indications = None
diff --git a/leave/cbv/leave_types.py b/leave/cbv/leave_types.py
new file mode 100644
index 000000000..aaefae8ca
--- /dev/null
+++ b/leave/cbv/leave_types.py
@@ -0,0 +1,340 @@
+"""
+This page handles the cbv methods for leave types page
+"""
+
+import contextlib
+from typing import Any
+from django.http import HttpResponse
+from django.contrib import messages
+from django.shortcuts import render
+from django.utils.decorators import method_decorator
+from django.urls import reverse, reverse_lazy
+from django.utils.translation import gettext_lazy as _
+from notifications.signals import notify
+from employee.models import Employee
+from horilla_views.generic.cbv.views import (
+    HorillaFormView,
+    HorillaListView,
+    TemplateView,
+    HorillaNavView,
+    HorillaCardView,
+    HorillaDetailedView,
+)
+from horilla_views.cbv_methods import login_required, permission_required
+from leave.filters import LeaveTypeFilter
+from leave.forms import AssignLeaveForm, LeaveOneAssignForm
+from leave.models import AvailableLeave, LeaveType
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(permission_required(perm="leave.view_leavetype"), name="dispatch")
+class LeaveTypeView(TemplateView):
+    """
+    template view
+    """
+
+    template_name = "cbv/leave_types/leave_type_home.html"
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(permission_required(perm="leave.view_leavetype"), name="dispatch")
+class LeaveTypeListView(HorillaListView):
+    """
+    list view
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("leave-type-list")
+
+    filter_class = LeaveTypeFilter
+    model = LeaveType
+
+
+    columns = [
+        (_("Leave Type"), "name", "get_avatar"),
+        (_("Payment"), "payment"),
+        (_("Total Days"), "count"),
+    ]
+
+    action_method = "leave_list_actions"
+
+    sortby_mapping = [
+        ("Leave Type", "name", "get_avatar"),
+        ("Total Days", "count"),
+    ]
+
+
+    row_status_indications = [
+        (
+            "paid--dot",
+            _("Paid"),
+            """
+            onclick="
+                $('#applyFilter').closest('form').find('[name=payment]').val('paid');
+                $('#applyFilter').click();
+            "
+            """,
+        ),
+        (
+            "unpaid--dot",
+            _("Un Paid"),
+            """
+            onclick="
+                $('#applyFilter').closest('form').find('[name=payment]').val('unpaid');
+                $('#applyFilter').click();
+            "
+            """,
+        ),
+    ]
+
+    header_attrs = {
+        "action" : """
+                   style = "width:180px !important"
+                   """
+    }
+
+    row_status_class = "payment-{payment}"
+
+    row_attrs = """
+                hx-get='{leave_detail_view}?instance_ids={ordered_ids}'
+                data-toggle="oh-modal-toggle"
+                data-target="#genericModal"
+                hx-target="#genericModalBody"
+
+                """
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(permission_required(perm="leave.view_leavetype"), name="dispatch")
+class LeaveTypeNavView(HorillaNavView):
+    """
+    navbar
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("leave-type-list")
+        if self.request.user.has_perm("leave.add_leavetype"):
+            self.create_attrs = f"""
+                                    href="{reverse_lazy('type-creation')}"
+                                """
+            self.view_types = [
+                {
+                    "type": "list",
+                    "icon": "list-outline",
+                    "url": reverse("leave-type-list"),
+                    "attrs" : """
+                            title='List'
+                            """
+                },
+                {
+                    "type": "card",
+                    "icon": "grid-outline",
+                    "url": reverse("leave-type-card-view"),
+                    "attrs" : """
+                            title='Card'
+                            """
+                },
+            ]
+
+    nav_title = _("Leave Types")
+    filter_body_template = "cbv/leave_types/leave_type_filter.html"
+    filter_form_context_name = "form"
+    filter_instance = LeaveTypeFilter()
+    search_swap_target = "#listContainer"
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(permission_required(perm="leave.view_leavetype"), name="dispatch")
+class LeaveTypeDetailView(HorillaDetailedView):
+    """
+    detail view
+    """
+
+    model = LeaveType
+    title = _("Details")
+    header = {"title": "name", "subtitle": "", "avatar": "get_avatar"}
+
+    body = [
+        (_("Period In"), "period_in"),
+        (_("Total Days"), "count"),
+        (_("Reset"), "leave_detail_reset", True),
+        (_("Carryforward Type"), "leave_detail_carryforward", True),
+        (_("Is paid"), "payment"),
+        (_("Require Approval"), "require_approval"),
+        (_("Require Attachment"), "require_attachment"),
+        (_("Exclude company Leaves"), "exclude_company_leave"),
+        (_("Exclude Holidays"), "exclude_holiday"),
+        (_("Is Encashable"), "encashable"),
+    ]
+    action_method = "detail_view_actions"
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(permission_required(perm="leave.view_leavetype"), name="dispatch")
+class LeaveTypeCardView(HorillaCardView):
+    """
+    card view
+    """
+
+    model = LeaveType
+    filter_class = LeaveTypeFilter
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("leave-type-card-view")
+
+    details = {
+        "image_src": "get_avatar",
+        "title": "{name}",
+        "subtitle": "Payment : {payment} <br> Total Days : {count}",
+    }
+
+    card_status_indications = [
+        (
+            "paid--dot",
+            _("Paid"),
+            """
+            onclick="
+                $('#applyFilter').closest('form').find('[name=payment]').val('paid');
+                $('#applyFilter').click();
+            "
+            """,
+        ),
+        (
+            "unpaid--dot",
+            _("Un Paid"),
+            """
+            onclick="
+                $('#applyFilter').closest('form').find('[name=payment]').val('unpaid');
+                $('#applyFilter').click();
+            "
+            """,
+        ),
+    ]
+
+    card_status_class = "payment-{payment}"
+
+    card_attrs = """
+                hx-get='{leave_detail_view}?instance_ids={ordered_ids}'
+                data-toggle="oh-modal-toggle"
+                data-target="#genericModal"
+                hx-target="#genericModalBody"
+                """
+
+    actions = [
+        {
+            "action": _("Assign Leave"),
+            "accessibility": "leave.cbv.accessibility.assign_leave",
+            "attrs": """
+                    data-toggle = "oh-modal-toggle"
+                    data-target = "#genericModal"
+                    hx-target="#genericModalBody"
+                    hx-get ='{get_assign_url}'
+                    class="oh-dropdown__link"
+                    style="cursor: pointer;"
+                    """,
+        },
+        {
+            "action": _("Edit"),
+            "attrs": """
+            class="oh-dropdown__link"
+            onclick="window.location.href='{get_update_url}' "
+            """,
+        },
+        {
+            "action": _("Delete"),
+            "attrs": """
+            class="oh-dropdown__link"
+            hx-get="{get_delete_url}?model=leave.LeaveType&pk={pk}"
+            data-toggle="oh-modal-toggle" 
+            data-target="#deleteConfirmation"
+            hx-target="#deleteConfirmationBody"
+            style="cursor: pointer; color:red !important"
+           
+            """,
+        },
+    ]
+
+    records_per_page = 10
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(permission_required(perm="leave.view_leavetype"), name="dispatch")
+class LeaveTypeAssignForm(HorillaFormView):
+    """
+    form view
+    """
+
+    form_class = LeaveOneAssignForm
+    model = LeaveType
+    template_name = "cbv/leave_types/inherit.html"
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+
+        if self.form.instance.pk:
+            self.form_class.verbose_name = _("Assign Leave")
+
+        return context
+
+    def form_invalid(self, form: Any) -> HttpResponse:
+        if self.form.instance.pk:
+            self.form_class.verbose_name = _("Assign Leave")
+        if not form.is_valid():
+            errors = form.errors.as_data()
+            return render(
+                self.request, self.template_name, {"form": form, "errors": errors}
+            )
+        return super().form_invalid(form)
+
+    def form_valid(self, form: AssignLeaveForm) -> HttpResponse:
+        form = self.form_class(self.request.POST, instance=self.form.instance)
+        if form.is_valid():
+            if form.instance.pk:
+                leave_type = LeaveType.objects.get(id=form.instance.pk)
+                if not leave_type.is_compensatory_leave:
+                    employee_ids = self.request.POST.getlist("employee_id")
+                    for employee_id in employee_ids:
+                        employee = Employee.objects.get(id=employee_id)
+                        if not AvailableLeave.objects.filter(
+                            leave_type_id=leave_type, employee_id=employee
+                        ).exists():
+                            AvailableLeave(
+                                leave_type_id=leave_type,
+                                employee_id=employee,
+                                available_days=leave_type.total_days,
+                            ).save()
+                            messages.success(
+                                self.request,
+                                _("Leave type assign is successfull"),
+                            )
+                            with contextlib.suppress(Exception):
+                                notify.send(
+                                    self.request.user.employee_get,
+                                    recipient=employee.employee_user_id,
+                                    verb="New leave type is assigned to you",
+                                    verb_ar="تم تعيين نوع إجازة جديد لك",
+                                    verb_de="Ihnen wurde ein neuer Urlaubstyp zugewiesen",
+                                    verb_es="Se le ha asignado un nuevo tipo de permiso",
+                                    verb_fr="Un nouveau type de congé vous a été attribué",
+                                    icon="people-circle",
+                                    redirect=reverse("user-request-view"),
+                                )
+                        else:
+                            messages.info(
+                                self.request,
+                                _(
+                                    "leave type is already assigned to the employee"
+                                ),
+                            )
+                else:
+                    messages.info(
+                        self.request,
+                        _("Compensatory leave type cant assigned manually"),
+                    )
+            form.save()
+
+            # messages.success(self.request, _(message))
+            return self.HttpResponse()
+        return super().form_valid(form)
diff --git a/leave/cbv/my_leave_request.py b/leave/cbv/my_leave_request.py
new file mode 100644
index 000000000..9778cb5cf
--- /dev/null
+++ b/leave/cbv/my_leave_request.py
@@ -0,0 +1,614 @@
+"""
+This page is handled the cbv of my leave request page
+"""
+
+import contextlib
+from datetime import datetime
+from typing import Any
+
+from django.contrib import messages
+from django.http import HttpResponse
+from django.shortcuts import render
+from django.urls import resolve, reverse, reverse_lazy
+from django.utils.decorators import method_decorator
+from django.utils.translation import gettext_lazy as _
+
+from horilla_views.cbv_methods import login_required
+from horilla_views.generic.cbv.views import (
+    HorillaDetailedView,
+    HorillaFormView,
+    HorillaListView,
+    HorillaNavView,
+    TemplateView,
+)
+from leave.filters import UserLeaveRequestFilter
+from leave.forms import UserLeaveRequestCreationForm
+from leave.methods import (
+    calculate_requested_days,
+    company_leave_dates_list,
+    holiday_dates_list,
+)
+from leave.models import (
+    AvailableLeave,
+    CompanyLeave,
+    Holiday,
+    LeaveRequest,
+    LeaveType,
+    leave_requested_dates,
+)
+from leave.threading import LeaveMailSendThread
+from notifications.signals import notify
+
+
+@method_decorator(login_required, name="dispatch")
+class MyLeaveRequestView(TemplateView):
+    """
+    for my leave request page view
+    """
+
+    template_name = "cbv/my_leave_request/my_leave_request_home.html"
+
+    def get_context_data(self, **kwargs: Any):
+        """
+        context data
+        """
+        context = super().get_context_data(**kwargs)
+        user_leave = AvailableLeave.objects.filter(
+            employee_id=self.request.user.employee_get
+        )
+        context["user_leaves"] = user_leave
+        return context
+
+
+@method_decorator(login_required, name="dispatch")
+class MainParentListView(HorillaListView):
+    """
+    main parent class for list view
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("user-request-filter")
+
+    filter_class = UserLeaveRequestFilter
+    model = LeaveRequest
+    records_per_page = 10
+    view_id = "deleteleavedata"
+    columns = [
+        ("Leave Type", "leave_type_custom"),
+        ("Start Date", "start_date"),
+        ("End Date", "end_date"),
+        ("Requested Days", "requested_days"),
+        ("Status", "custom_status_col"),
+        ("Comment", "comment_action"),
+    ]
+    option_method = "cancel_confirmation_action"
+    action_method = "leave_actions"
+    sortby_mapping = [
+        ("Leave Type", "leave_type_id__name", "leave_type_id__get_avatar"),
+        ("Start Date", "start_date"),
+        ("End Date", "end_date"),
+        ("Requested Days", "requested_days"),
+        ("Status", "status"),
+    ]
+    row_status_indications = [
+        (
+            "rejected--dot",
+            _("Rejected"),
+            """
+            onclick="
+            $('#applyFilter').closest('form').find('[name=status]').val('rejected');
+            $('[name=canceled]').val('unknown').change();
+            $('[name=approved]').val('unknown').change();
+            $('[name=requested]').val('unknown').change();
+            $('#applyFilter').click();
+            "
+
+            """,
+        ),
+        (
+            "cancelled--dot",
+            _("Canecelled"),
+            """
+            onclick="
+            $('#applyFilter').closest('form').find('[name=status]').val('cancelled');
+            $('[name=rejected]').val('unknown').change();
+            $('[name=approved]').val('unknown').change();
+            $('[name=requested]').val('unknown').change();
+            $('#applyFilter').click();
+            "
+
+            """,
+        ),
+        (
+            "approved--dot",
+            _("Approved"),
+            """
+            onclick="
+            $('#applyFilter').closest('form').find('[name=status]').val('approved');
+            $('[name=rejected]').val('unknown').change();
+            $('[name=canceled]').val('unknown').change();
+            $('[name=requested]').val('unknown').change();
+            $('#applyFilter').click();
+            "
+
+            """,
+        ),
+        (
+            "requested--dot",
+            _("Requested"),
+            """
+            onclick="
+            $('#applyFilter').closest('form').find('[name=status]').val('requested');
+            $('[name=rejected]').val('unknown').change();
+            $('[name=canceled]').val('unknown').change();
+            $('[name=approved]').val('unknown').change();
+            $('#applyFilter').click();
+            "
+
+            """,
+        ),
+    ]
+    row_status_class = "status-{status}"
+    row_attrs = """
+                {is_rejected},
+                hx-get='{my_leave_request_detail_view}?instance_ids={ordered_ids}'
+                hx-target="#genericModalBody"
+                data-target="#genericModal"
+                data-toggle="oh-modal-toggle"
+                """
+
+
+@method_decorator(login_required, name="dispatch")
+class MyLeaveRequestListView(MainParentListView):
+    """
+    List view of the page
+    """
+
+    def get_queryset(self):
+        """
+        to filter data
+        """
+        queryset = super().get_queryset()
+        employee = self.request.user.employee_get
+        queryset = queryset.filter(employee_id=employee)
+        return queryset
+
+
+class MyLeaveRequestNavView(HorillaNavView):
+    """
+    nav bar
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("user-request-filter")
+        self.filter_instance = UserLeaveRequestFilter()
+
+        self.actions = [
+            {
+                "action": "Delete",
+                "attrs": """
+                    class="delete"
+                    onclick="
+                    myLeaveRequestBulkDelete();
+                    "
+                    data-action ="delete"
+                    style="cursor: pointer; color:red !important"
+                """,
+            }
+        ]
+
+        self.create_attrs = f"""
+             hx-get="{reverse_lazy("leave-request-create")}"
+             hx-target="#genericModalBody"
+             data-target="#genericModal"
+             data-toggle="oh-modal-toggle"
+         """
+
+    nav_title = _("My Leave requests")
+    filter_body_template = "cbv/my_leave_request/filter.html"
+
+    filter_form_context_name = "form"
+    search_swap_target = "#listContainer"
+
+    group_by_fields = [
+        ("leave_type_id", "Leave Type"),
+        ("status", "Status"),
+        ("requested_days", "Requested Days"),
+    ]
+
+
+class MyLeaveRequestDetailView(HorillaDetailedView):
+    """
+    detail view of page
+    """
+
+    model = LeaveRequest
+    title = _("Details")
+    header = {
+        "title": "employee_id__get_full_name",
+        "subtitle": "my_leave_request_detail_subtitle",
+        "avatar": "employee_id__get_avatar",
+    }
+    body = [
+        ("Leave Type", "leave_type_id"),
+        ("Days", "requested_days"),
+        ("Start Date", "start_date"),
+        ("End Date", "end_date"),
+        ("Status", "get_status"),
+        ("Description", "description"),
+        ("Reason for Rejection", "rejected_action", True),
+        ("Reason for Cancellation", "cancelled_action", True),
+        ("View attachment", "attachment_action", True),
+    ]
+    action_method = "detail_leave_actions"
+
+
+class MyLeaveRequestForm(HorillaFormView):
+    """
+    form view
+    """
+
+    form_class = UserLeaveRequestCreationForm
+    model = LeaveRequest
+    template_name = "cbv/my_leave_request/form/inherit.html"
+
+    new_display_title = _("Create Request")
+
+    # def get_initial(self) -> dict:
+    #     initial = super().get_initial()
+    #     emp = self.request.user.employee_get
+    #     initial["employee_id"] = emp
+    #     return initial
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        self.request.my_leave_request = "my_leave_request"
+        emp = self.request.user.employee_get
+        available_leaves = emp.available_leave.all()
+        assigned_leave_types = LeaveType.objects.filter(
+            id__in=available_leaves.values_list("leave_type_id", flat=True)
+        )
+        self.form.fields["leave_type_id"].queryset = assigned_leave_types
+        self.form.fields["employee_id"].initial = emp
+
+        if self.form.instance.pk:
+            leave_request = LeaveRequest.objects.get(id=self.form.instance.pk)
+            if (
+                self.request.user.employee_get == leave_request.employee_id
+                and leave_request.status != "approved"
+            ):
+                self.form_class(
+                    employee=leave_request.employee_id, instance=leave_request
+                )
+            self.form_class.verbose_name = _("Leave Request Update")
+
+        context["form"] = self.form
+        context["view_id"] = "myleaverequest"
+
+        return context
+
+    # def form_invalid(self, form: Any) -> HttpResponse:
+
+    #     form = self.form_class(self.request.POST)
+    #     if not form.is_valid():
+    #         errors = form.errors.as_data()
+    #         return render(
+    #             self.request, self.template_name, {"form": form, "errors": errors}
+    #         )
+    #     return super().form_invalid(form)
+
+    def form_valid(self, form: UserLeaveRequestCreationForm) -> HttpResponse:
+        emp = self.request.user.employee_get
+        emp_id = emp.id
+        form = self.form_class(
+            self.request.POST, instance=self.form.instance, employee=emp
+        )
+        if form.is_valid():
+            self.form_class(
+                self.request.POST, self.request.FILES, instance=self.form.instance
+            )
+            if form.instance.pk:
+                leave_request = form.save(commit=False)
+
+                start_date = leave_request.start_date
+                end_date = leave_request.end_date
+                start_date_breakdown = leave_request.start_date_breakdown
+                end_date_breakdown = leave_request.end_date_breakdown
+                leave_type = leave_request.leave_type_id
+                employee = self.request.user.employee_get
+                available_leave = AvailableLeave.objects.get(
+                    employee_id=employee, leave_type_id=leave_type
+                )
+                available_total_leave = (
+                    available_leave.available_days + available_leave.carryforward_days
+                )
+                requested_days = calculate_requested_days(
+                    start_date, end_date, start_date_breakdown, end_date_breakdown
+                )
+                requested_dates = leave_requested_dates(start_date, end_date)
+                holidays = Holiday.objects.all()
+                holiday_dates = holiday_dates_list(holidays)
+                company_leaves = CompanyLeave.objects.all()
+                company_leave_dates = company_leave_dates_list(
+                    company_leaves, start_date
+                )
+                if (
+                    leave_type.exclude_company_leave == "yes"
+                    and leave_type.exclude_holiday == "yes"
+                ):
+                    total_leaves = list(set(holiday_dates + company_leave_dates))
+                    total_leave_count = sum(
+                        requested_date in total_leaves
+                        for requested_date in requested_dates
+                    )
+                    requested_days = requested_days - total_leave_count
+                else:
+                    holiday_count = 0
+                    if leave_type.exclude_holiday == "yes":
+                        for requested_date in requested_dates:
+                            if requested_date in holiday_dates:
+                                holiday_count += 1
+                        requested_days = requested_days - holiday_count
+                    if leave_type.exclude_company_leave == "yes":
+                        company_leave_count = sum(
+                            requested_date in company_leave_dates
+                            for requested_date in requested_dates
+                        )
+                        requested_days = requested_days - company_leave_count
+                if requested_days <= available_total_leave:
+                    leave_request.save()
+                    messages.success(
+                        self.request, _("Leave request updated successfully")
+                    )
+                else:
+                    form.add_error(
+                        None,
+                        _("You dont have enough leave days to make the request"),
+                    )
+            else:
+                if int(form.data["employee_id"]) == int(emp_id):
+                    if form.is_valid():
+                        # if form.instance.pk:
+                        leave_request = form.save(commit=False)
+                        save = True
+                        if leave_request.leave_type_id.require_approval == "no":
+                            employee_id = leave_request.employee_id
+                            leave_type_id = leave_request.leave_type_id
+                            available_leave = AvailableLeave.objects.get(
+                                leave_type_id=leave_type_id, employee_id=employee_id
+                            )
+                            if (
+                                leave_request.requested_days
+                                > available_leave.available_days
+                            ):
+                                leave = (
+                                    leave_request.requested_days
+                                    - available_leave.available_days
+                                )
+                                leave_request.approved_available_days = (
+                                    available_leave.available_days
+                                )
+                                available_leave.available_days = 0
+                                available_leave.carryforward_days = (
+                                    available_leave.carryforward_days - leave
+                                )
+                                leave_request.approved_carryforward_days = leave
+                            else:
+                                available_leave.available_days = (
+                                    available_leave.available_days
+                                    - leave_request.requested_days
+                                )
+                                leave_request.approved_available_days = (
+                                    leave_request.requested_days
+                                )
+                            leave_request.status = "approved"
+                            available_leave.save()
+                        if save:
+                            leave_request.created_by = self.request.user.employee_get
+                            leave_request.save()
+                            messages.success(
+                                self.request,
+                                _("Leave request created successfully"),
+                            )
+                            with contextlib.suppress(Exception):
+                                notify.send(
+                                    self.request.user.employee_get,
+                                    recipient=leave_request.employee_id.employee_work_info.reporting_manager_id.employee_user_id,
+                                    verb=f"New leave request created for {leave_request.employee_id}.",
+                                    verb_ar=f"تم إنشاء طلب إجازة جديد لـ {leave_request.employee_id}.",
+                                    verb_de=f"Neuer Urlaubsantrag für {leave_request.employee_id} erstellt.",
+                                    verb_es=f"Nueva solicitud de permiso creada para {leave_request.employee_id}.",
+                                    verb_fr=f"Nouvelle demande de congé créée pour {leave_request.employee_id}.",
+                                    icon="people-circle",
+                                    redirect=reverse("request-view")
+                                    + f"?id={leave_request.id}",
+                                )
+                            mail_thread = LeaveMailSendThread(
+                                self.request, leave_request, type="request"
+                            )
+                            mail_thread.start()
+                            form = UserLeaveRequestCreationForm(employee=emp)
+                            if (
+                                len(LeaveRequest.objects.filter(employee_id=emp_id))
+                                == 1
+                            ):
+                                return HttpResponse(
+                                    "<script>window.location.reload();</script>"
+                                )
+                            form.save(commit=False)
+
+                        return HttpResponse("<script>location.reload();</script>")
+                else:
+                    messages.error(self.request, _("You don't have permission"))
+
+            return HttpResponse("<script>location.reload();</script>")
+        return super().form_valid(form)
+
+
+@method_decorator(login_required, name="dispatch")
+class MyLeaveRequestSingleForm(HorillaFormView):
+    """
+    single leave request form
+    """
+
+    model = LeaveRequest
+    form_class = UserLeaveRequestCreationForm
+    new_display_title = _("Leave Request")
+    template_name = "cbv/my_leave_request/form/inherit.html"
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        employee = self.request.user.employee_get
+        resolved = resolve(self.request.path_info)
+        leave_id = resolved.kwargs.get("leave")
+        leave_type = LeaveType.objects.filter(id=leave_id)
+        form = self.form_class(
+            initial={"employee_id": employee, "leave_type_id": leave_type.first()}
+        )
+
+        self.form_class.verbose_name = _("Leave Request")
+        form.fields["leave_type_id"].queryset = leave_type
+
+        context["form"] = form
+        return context
+
+    def form_invalid(self, form: Any) -> HttpResponse:
+        form = self.form_class(self.request.POST)
+        self.form_class.verbose_name = _("Leave Request")
+        if not form.is_valid():
+            errors = form.errors.as_data()
+            return render(
+                self.request, self.template_name, {"form": form, "errors": errors}
+            )
+        return super().form_invalid(form)
+
+    def form_valid(self, form: UserLeaveRequestCreationForm) -> HttpResponse:
+        employee = self.request.user.employee_get
+        resolved = resolve(self.request.path_info)
+        leave_id = resolved.kwargs.get("leave")
+        leave_type = LeaveType.objects.get(id=leave_id)
+        form = self.form_class(self.request.POST, self.request.FILES, employee=employee)
+        start_date = datetime.strptime(self.request.POST.get("start_date"), "%Y-%m-%d")
+        end_date = datetime.strptime(self.request.POST.get("end_date"), "%Y-%m-%d")
+        start_date_breakdown = self.request.POST.get("start_date_breakdown")
+        end_date_breakdown = self.request.POST.get("end_date_breakdown")
+        available_leave = AvailableLeave.objects.get(
+            employee_id=employee, leave_type_id=leave_type
+        )
+        available_total_leave = (
+            available_leave.available_days + available_leave.carryforward_days
+        )
+        requested_days = calculate_requested_days(
+            start_date, end_date, start_date_breakdown, end_date_breakdown
+        )
+        requested_dates = leave_requested_dates(start_date, end_date)
+        requested_dates = [date.date() for date in requested_dates]
+        holidays = Holiday.objects.all()
+        holiday_dates = holiday_dates_list(holidays)
+        company_leaves = CompanyLeave.objects.all()
+        company_leave_dates = company_leave_dates_list(company_leaves, start_date)
+        if (
+            leave_type.exclude_company_leave == "yes"
+            and leave_type.exclude_holiday == "yes"
+        ):
+            total_leaves = list(set(holiday_dates + company_leave_dates))
+            total_leave_count = sum(
+                requested_date in total_leaves for requested_date in requested_dates
+            )
+            requested_days = requested_days - total_leave_count
+        else:
+            holiday_count = 0
+            if leave_type.exclude_holiday == "yes":
+                for requested_date in requested_dates:
+                    if requested_date in holiday_dates:
+                        holiday_count += 1
+                requested_days = requested_days - holiday_count
+            if leave_type.exclude_company_leave == "yes":
+                company_leave_count = sum(
+                    requested_date in company_leave_dates
+                    for requested_date in requested_dates
+                )
+                requested_days = requested_days - company_leave_count
+        overlapping_requests = LeaveRequest.objects.filter(
+            employee_id=employee, start_date__lte=end_date, end_date__gte=start_date
+        ).exclude(status__in=["cancelled", "rejected"])
+        if overlapping_requests.exists():
+            form.add_error(
+                None, _("There is already a leave request for this date range")
+            )
+        elif requested_days <= available_total_leave or form.instance.status not in [
+            "approved"
+        ]:
+            if form.is_valid():
+                leave_request = form.save(commit=False)
+                save = True
+                leave_request.leave_type_id = leave_type
+                leave_request.employee_id = employee
+
+                if leave_request.leave_type_id.require_approval == "no":
+                    employee_id = leave_request.employee_id
+                    leave_type_id = leave_request.leave_type_id
+                    available_leave = AvailableLeave.objects.get(
+                        leave_type_id=leave_type_id, employee_id=employee_id
+                    )
+                    if leave_request.requested_days > available_leave.available_days:
+                        leave = (
+                            leave_request.requested_days
+                            - available_leave.available_days
+                        )
+                        leave_request.approved_available_days = (
+                            available_leave.available_days
+                        )
+                        available_leave.available_days = 0
+                        available_leave.carryforward_days = (
+                            available_leave.carryforward_days - leave
+                        )
+                        leave_request.approved_carryforward_days = leave
+                    else:
+                        available_leave.available_days = (
+                            available_leave.available_days
+                            - leave_request.requested_days
+                        )
+                        leave_request.approved_available_days = (
+                            leave_request.requested_days
+                        )
+                    leave_request.status = "approved"
+                    available_leave.save()
+                if save:
+                    leave_request.created_by = employee
+                    leave_request.save()
+                    messages.success(
+                        self.request, _("Leave request created successfully")
+                    )
+                    with contextlib.suppress(Exception):
+                        notify.send(
+                            self.request.user.employee_get,
+                            recipient=leave_request.employee_id.employee_work_info.reporting_manager_id.employee_user_id,
+                            verb="You have a new leave request to validate.",
+                            verb_ar="لديك طلب إجازة جديد يجب التحقق منه.",
+                            verb_de="Sie haben eine neue Urlaubsanfrage zur Validierung.",
+                            verb_es="Tiene una nueva solicitud de permiso que debe validar.",
+                            verb_fr="Vous avez une nouvelle demande de congé à valider.",
+                            icon="people-circle",
+                            redirect=reverse("request-view")
+                            + f"?id={leave_request.id}",
+                        )
+                        return HttpResponse("<script>window.location.reload()</script>")
+                    if len(
+                        LeaveRequest.objects.filter(employee_id=employee)
+                    ) == 1 or self.request.META.get("HTTP_REFERER").endswith(
+                        "employee-profile/"
+                    ):
+                        return HttpResponse("<script>window.location.reload()</script>")
+                else:
+                    form.add_error(
+                        None,
+                        _("You dont have enough leave days to make the request"),
+                    )
+
+                return HttpResponse("<script>window.location.reload()</script>")
+            else:
+                return self.form_invalid(form)
+        return super().form_valid(form)
diff --git a/leave/cbv/restricted_days.py b/leave/cbv/restricted_days.py
new file mode 100644
index 000000000..a65fd0894
--- /dev/null
+++ b/leave/cbv/restricted_days.py
@@ -0,0 +1,172 @@
+"""
+Restricted page
+"""
+
+from typing import Any
+from django.http import HttpResponse
+from django.urls import reverse
+from django.utils.decorators import method_decorator
+from django.utils.translation import gettext_lazy as _
+from django.contrib import messages
+from horilla_views.generic.cbv.views import (
+    HorillaDetailedView,
+    HorillaFormView,
+    HorillaListView,
+    HorillaNavView,
+    TemplateView,
+)
+from horilla_views.cbv_methods import login_required, permission_required
+from leave.filters import RestrictLeaveFilter
+from leave.forms import RestrictLeaveForm
+from leave.models import RestrictLeave
+
+
+@method_decorator(login_required, name="dispatch")
+class RestrictedDaysView(TemplateView):
+    """
+    for resticted days page
+    """
+
+    template_name = "cbv/restricted_days/restricted_days.html"
+
+
+@method_decorator(login_required, name="dispatch")
+class RestrictedDaysList(HorillaListView):
+    """
+    List view of the resticted days page
+    """
+
+    bulk_update_fields = [
+        "department",
+        "job_position"
+
+    ]
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+
+        self.search_url = reverse("restrict-filter")
+        if self.request.user.has_perm("leave.add_restrictleave"):
+            self.action_method = "actions_col"
+        self.view_id = "restrictday"
+
+    model = RestrictLeave
+    filter_class = RestrictLeaveFilter
+
+    columns = [
+        (_("Title"), "title"),
+        (_("Start Date"), "start_date"),
+        (_("End date"), "end_date"),
+        (_("Department"), "department"),
+        (_("Job Position"), "job_position_col"),
+        (_("Description"), "description"),
+    ]
+
+    header_attrs = {
+        "title": """ style="width:180px !important" """
+    }
+
+    sortby_mapping = [
+        ("Start Date", "start_date"),
+        ("End date", "end_date"),
+        ("Department", "department__department"),
+        ("Job Position", "job_position_col"),
+    ]
+
+    row_attrs = """
+                hx-get='{restricted_days_detail_view}?instance_ids={ordered_ids}'
+                hx-target="#genericModalBody"
+                data-target="#genericModal"
+                data-toggle="oh-modal-toggle"
+                """
+
+@method_decorator(login_required, name="dispatch")
+class RestrictedDaysNav(HorillaNavView):
+    """
+    Nav bar
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("restrict-filter")
+        if self.request.user.has_perm("leave.add_restrictleave"):
+            self.create_attrs = f"""
+                            data-toggle="oh-modal-toggle"
+                            data-target="#genericModal"
+                            hx-target="#genericModalBody"
+                            hx-get="{reverse('restrict-creation')}"
+                            """
+            self.actions = [
+                {
+                    "action": _("Delete"),
+                    "attrs": """
+                    onclick="
+                    bulkRestrictedDaysDelete();
+                    "
+                    data-action ="delete"
+                    style="cursor: pointer; color:red !important"
+                    """,
+                }
+            ]
+
+    nav_title = _("Restricted Days")
+    filter_instance = RestrictLeaveFilter()
+    filter_body_template = "cbv/restricted_days/filter.html"
+    search_swap_target = "#listContainer"
+    filter_form_context_name = "form"
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(permission_required("leave.add_restrictleave"),name="dispatch")
+class RestrictedDaysFormView(HorillaFormView):
+    """
+    Create and edit form
+    """
+
+    model = RestrictLeave
+    form_class = RestrictLeaveForm
+    new_display_title = _("Create Restricted Day")
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        if self.form.instance.pk:
+            self.form_class.verbose_name = _("Update Restricted Day")
+        return context
+
+    def form_valid(self, form: RestrictLeaveForm) -> HttpResponse:
+
+        if form.is_valid():
+            if form.instance.pk:
+                message = _("Restricted Day Updated Successfully")
+            else:
+                message = _("Restricted Day Created Successfully")
+            form.save()
+            messages.success(self.request, message)
+            return self.HttpResponse()
+        return super().form_valid(form)
+
+
+@method_decorator(login_required, name="dispatch")
+class RestrictedDaysDetailView(HorillaDetailedView):
+    """
+    detail view of page
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.body = [
+            (_("Start Date"), "start_date"),
+            (_("End date"), "end_date"),
+            (_("Department"), "department"),
+            (_("Job Position"), "job_position_col"),
+            (_("Description"), "description"),
+        ]
+
+    action_method = "detail_action"
+
+    model = RestrictLeave
+    title = _("Details")
+    header = {
+        "title": "title",
+        "subtitle": "",
+        "avatar": "get_avatar",
+    }
diff --git a/leave/filters.py b/leave/filters.py
index 0d6de85de..84f08f6e0 100644
--- a/leave/filters.py
+++ b/leave/filters.py
@@ -17,8 +17,9 @@ from django.utils.translation import gettext as __
 from django.utils.translation import gettext_lazy as _
 from django_filters import DateFilter, FilterSet, NumberFilter, filters
 
-from base.filters import FilterSet
 from employee.models import Employee
+from horilla.filters import FilterSet, HorillaFilterSet, filter_by_name
+from horilla_views.templatetags.generic_template_filters import getattribute
 
 from .models import (
     AvailableLeave,
@@ -122,16 +123,16 @@ class AssignedLeaveFilter(FilterSet):
             self.form.fields[field].widget.attrs["id"] = f"{uuid.uuid4()}"
 
 
-class LeaveRequestFilter(FilterSet):
+class LeaveRequestFilter(HorillaFilterSet):
     """
     Filter class for LeaveRequest model.
     This filter allows searching LeaveRequest objects
     based on employee,date range, leave type, and status.
     """
 
-    overall_leave = django_filters.CharFilter(method="overall_leave_filter")
-
     search = django_filters.CharFilter(method="filter_by_name")
+    search_field = django_filters.CharFilter(method="search_in")
+    overall_leave = django_filters.CharFilter(method="overall_leave_filter")
     from_date = DateFilter(
         field_name="end_date",
         lookup_expr="gte",
@@ -225,13 +226,16 @@ class LeaveRequestFilter(FilterSet):
         return queryset
 
     def filter_by_name(self, queryset, name, value):
+
+        if self.data.get("search_field"):
+            return queryset
         # Call the imported function
         filter_method = {
-            "leave_type": "leave_type_id__name__icontains",
+            "leave_type_id": "leave_type_id__name__icontains",
             "status": "status__icontains",
-            "department": "employee_id__employee_work_info__department_id__department__icontains",
-            "job_position": "employee_id__employee_work_info__job_position_id__job_position__icontains",
-            "company": "employee_id__employee_work_info__company_id__company__icontains",
+            "employee_id__employee_work_info__department_id": "employee_id__employee_work_info__department_id__department__icontains",
+            "employee_id__employee_work_info__job_position_id__": "employee_id__employee_work_info__job_position_id__job_position__icontains",
+            "employee_id__employee_work_info__company_id": "employee_id__employee_work_info__company_id__company__icontains",
         }
         search_field = self.data.get("search_field")
         if not search_field:
@@ -256,7 +260,6 @@ class LeaveRequestFilter(FilterSet):
         else:
             filter = filter_method.get(search_field)
             queryset = queryset.filter(**{filter: value})
-
         return queryset
 
     def __init__(self, data=None, queryset=None, *, request=None, prefix=None):
@@ -272,6 +275,9 @@ class UserLeaveRequestFilter(FilterSet):
     based on leave type, date range, and status.
     """
 
+    search = filters.CharFilter(
+        field_name="leave_type_id__name", lookup_expr="icontains"
+    )
     leave_type = filters.CharFilter(
         field_name="leave_type_id__name", lookup_expr="icontains"
     )
diff --git a/leave/forms.py b/leave/forms.py
index 045462bca..f79d9d2c7 100644
--- a/leave/forms.py
+++ b/leave/forms.py
@@ -18,10 +18,13 @@ from django.utils.translation import gettext_lazy as _
 
 from base.forms import ModelForm as BaseModelForm
 from base.methods import filtersubordinatesemployeemodel, reload_queryset
+from base.models import CompanyLeaves, Holidays
 from employee.filters import EmployeeFilter
 from employee.forms import MultipleFileField
 from employee.models import Employee
 from horilla import horilla_middlewares
+from horilla.horilla_middlewares import _thread_locals
+from horilla_views.generic.cbv.views import HorillaFormView
 from horilla_widgets.forms import HorillaForm, HorillaModelForm
 from horilla_widgets.widgets.horilla_multi_select_field import HorillaMultiSelectField
 from horilla_widgets.widgets.select_widgets import HorillaMultiSelectWidget
@@ -198,6 +201,7 @@ class UpdateLeaveTypeForm(ConditionForm):
 
 
 class LeaveRequestCreationForm(BaseModelForm):
+    cols = {"description": 12}
     start_date = forms.DateField(widget=forms.DateInput(attrs={"type": "date"}))
     end_date = forms.DateField(widget=forms.DateInput(attrs={"type": "date"}))
 
@@ -205,29 +209,40 @@ class LeaveRequestCreationForm(BaseModelForm):
 
         super().__init__(*args, **kwargs)
         self.fields["attachment"].widget.attrs["accept"] = ".jpg, .jpeg, .png, .pdf"
+        request = getattr(_thread_locals, "request")
+
+        # self.fields["start_date"].widget.attrs.update(
+        #     {
+        #         "onchange": "dateChange($(this))",
+        #     }
+        # )
+
         self.fields["leave_type_id"].widget.attrs.update(
             {
-                "hx-include": "#leaveRequestCreateForm",
-                "hx-target": "#availableLeaveCount",
-                "hx-swap": "outerHTML",
+                "hx-include": "#leaverequestForm",
+                "hx-target": "#createTitle",
+                "hx-swap": "afterend",
                 "hx-trigger": "change",
-                "hx-get": "/leave/employee-available-leave-count",
+                "hx-get": f"/leave/employee-available-leave-count",
             }
         )
+
         self.fields["employee_id"].widget.attrs.update(
             {
                 "hx-target": "#id_leave_type_id_parent_div",
                 "hx-trigger": "change",
+                "hx-swap": "innerHTML",
                 "hx-get": "/leave/get-employee-leave-types?form=LeaveRequestCreationForm",
             }
         )
+
         self.fields["start_date"].widget.attrs.update(
             {
-                "hx-include": "#leaveRequestCreateForm",
-                "hx-target": "#availableLeaveCount",
-                "hx-swap": "outerHTML",
+                "hx-include": "#leaverequestForm",
+                "hx-target": "#createTitle",
+                "hx-swap": "afterend",
                 "hx-trigger": "change",
-                "hx-get": "/leave/employee-available-leave-count",
+                "hx-get": f"/leave/employee-available-leave-count",
             }
         )
 
@@ -349,6 +364,8 @@ class LeaveOneAssignForm(HorillaModelForm):
         - employee_id: A HorillaMultiSelectField representing the employee to assign leave to.
     """
 
+    cols = {"employee_id": 12}
+
     employee_id = HorillaMultiSelectField(
         queryset=Employee.objects.all(),
         widget=HorillaMultiSelectWidget(
@@ -396,6 +413,32 @@ class AvailableLeaveUpdateForm(BaseModelForm):
         fields = ["available_days", "carryforward_days", "is_active"]
 
 
+class CompanyLeaveForm(BaseModelForm):
+    """
+    Form for managing company leave data.
+
+    This form allows users to manage company leave data by including all fields from
+    the CompanyLeaves model except for is_active.
+
+    Attributes:
+        - Meta: Inner class defining metadata options.
+            - model: The model associated with the form (CompanyLeaves).
+            - fields: A special value indicating all fields should be included in the form.
+            - exclude: A list of fields to exclude from the form (is_active).
+    """
+
+    cols = {"based_on_week": 12, "based_on_week_day": 12}
+
+    class Meta:
+        """
+        Meta class for additional options
+        """
+
+        model = CompanyLeaves
+        fields = "__all__"
+        exclude = ["is_active"]
+
+
 class UserLeaveRequestForm(BaseModelForm):
     start_date = forms.DateField(widget=forms.DateInput(attrs={"type": "date"}))
     end_date = forms.DateField(widget=forms.DateInput(attrs={"type": "date"}))
@@ -518,6 +561,7 @@ class RejectForm(forms.Form):
 
 
 class UserLeaveRequestCreationForm(BaseModelForm):
+    cols = {"description": 12}
     start_date = forms.DateField(widget=forms.DateInput(attrs={"type": "date"}))
     end_date = forms.DateField(widget=forms.DateInput(attrs={"type": "date"}))
 
@@ -539,11 +583,12 @@ class UserLeaveRequestCreationForm(BaseModelForm):
                 id__in=available_leaves.values_list("leave_type_id", flat=True)
             )
             self.fields["leave_type_id"].queryset = assigned_leave_types
+
         self.fields["leave_type_id"].widget.attrs.update(
             {
-                "hx-include": "#userLeaveForm",
-                "hx-target": "#availableLeaveCount",
-                "hx-swap": "outerHTML",
+                "hx-include": "#myleaverequestForm",
+                "hx-target": "#createTitle",
+                "hx-swap": "afterend",
                 "hx-trigger": "change",
                 "hx-get": f"/leave/employee-available-leave-count",
             }
@@ -584,6 +629,8 @@ class LeaveAllocationRequestForm(BaseModelForm):
         - as_p: Render the form fields as HTML table rows with Bootstrap styling.
     """
 
+    cols = {"description": 12}
+
     def as_p(self, *args, **kwargs):
         """
         Render the form fields as HTML table rows with Bootstrap styling.
@@ -837,6 +884,15 @@ class LeaveAllocationCommentForm(BaseModelForm):
 
 
 class RestrictLeaveForm(BaseModelForm):
+
+    cols = {"title": 12, "description": 12}
+    start_date = forms.DateField(
+        widget=forms.DateInput(attrs={"type": "date"}),
+    )
+    end_date = forms.DateField(
+        widget=forms.DateInput(attrs={"type": "date"}),
+    )
+
     def clean_end_date(self):
         start_date = self.cleaned_data.get("start_date")
         end_date = self.cleaned_data.get("end_date")
@@ -886,6 +942,12 @@ if apps.is_installed("attendance"):
             - as_p: Render the form fields as HTML table rows with Bootstrap styling.
         """
 
+        cols = {
+            "attendance_id": 12,
+            "description": 12,
+            "employee_id": 12,
+        }
+
         class Meta:
             """
             Meta class for additional options
@@ -932,8 +994,9 @@ if apps.is_installed("attendance"):
             self.fields["employee_id"].queryset = queryset
             self.fields["employee_id"].widget.attrs.update(
                 {
-                    "hx-target": "#id_attendance_id_parent_div",
+                    "hx-target": "#dynamic_field_attendance_id",
                     "hx-trigger": "change",
+                    "hx-swap": "innerHTML",
                     "hx-get": "/leave/get-leave-attendance-dates",
                 }
             )
diff --git a/leave/methods.py b/leave/methods.py
index 0c9c2d258..5f6f1d5ed 100644
--- a/leave/methods.py
+++ b/leave/methods.py
@@ -144,6 +144,7 @@ def filter_conditional_leave_request(request):
         multiple_approval_requests = LeaveRequestConditionApproval.objects.filter(
             manager_id=approval_manager
         )
+
     else:
         multiple_approval_requests = None
     for instance in multiple_approval_requests:
diff --git a/leave/models.py b/leave/models.py
index ee5f03a95..6395a8624 100644
--- a/leave/models.py
+++ b/leave/models.py
@@ -2,15 +2,18 @@ import calendar
 import logging
 import math
 import operator
+import threading
 from datetime import date, datetime, timedelta
 
 from dateutil.relativedelta import relativedelta
 from django.apps import apps
+from django.conf import settings
 from django.contrib import messages
 from django.core.exceptions import ValidationError
 from django.core.files.storage import default_storage
 from django.db import models
 from django.db.models import Q, Sum
+from django.urls import reverse, reverse_lazy
 from django.utils import timezone
 from django.utils.translation import gettext_lazy as _
 
@@ -26,14 +29,19 @@ from base.models import (
 )
 from employee.models import Employee, EmployeeWorkInformation
 from horilla import horilla_middlewares
+from horilla.horilla_middlewares import _thread_locals
+from horilla.methods import get_horilla_model_class
 from horilla.models import HorillaModel
 from horilla_audit.methods import get_diff
 from horilla_audit.models import HorillaAuditInfo, HorillaAuditLog
+from horilla_views.cbv_methods import render_template
 from leave.methods import (
     calculate_requested_days,
     company_leave_dates_list,
+    filter_conditional_leave_request,
     holiday_dates_list,
 )
+from leave.threading import LeaveClashThread
 
 logger = logging.getLogger(__name__)
 
@@ -226,7 +234,7 @@ class LeaveType(HorillaModel):
     def leave_type_next_reset_date(self):
         today = datetime.now().date()
 
-        if not self.reset:
+        if not self.reset or not self.reset_day:
             return None
 
         def get_reset_day(month, day):
@@ -280,8 +288,14 @@ class LeaveType(HorillaModel):
         return expired_date
 
     def clean(self, *args, **kwargs):
+        super().clean(self)
         if self.is_compensatory_leave:
-            if LeaveType.objects.filter(is_compensatory_leave=True).count() >= 1:
+            if (
+                LeaveType.objects.filter(is_compensatory_leave=True)
+                .exclude(pk=self.pk)
+                .count()
+                >= 1
+            ):
                 raise ValidationError(_("Compensatory Leave Request already exists."))
 
     def save(self, *args, **kwargs):
@@ -308,6 +322,96 @@ class LeaveType(HorillaModel):
     def __str__(self):
         return self.name
 
+    def leave_list_actions(self):
+        """
+        actions for list view
+        """
+
+        return render_template(
+            path="cbv/leave_types/leave_type_list_actions.html",
+            context={"instance": self},
+        )
+
+    def leave_detail_reset(self):
+        """
+        reset col in detail view
+        """
+        return render_template(
+            path="cbv/leave_types/leave_detail_reset.html", context={"instance": self}
+        )
+
+    def leave_detail_carryforward(self):
+        """
+        carryforward col in detail view
+        """
+        return render_template(
+            path="cbv/leave_types/leave_detail_carryforward.html",
+            context={"instance": self},
+        )
+
+    def get_create_url(self):
+        """
+        This method to get create url
+        """
+
+        url = reverse_lazy("type-creation")
+        return url
+
+    def get_assign_url(self):
+        """
+        This method to get assign url
+        """
+
+        url = reverse_lazy("assign-one", kwargs={"pk": self.pk})
+        return url
+
+    def get_update_url(self):
+        """
+        for to get update url
+        """
+
+        url = reverse_lazy("type-update", kwargs={"id": self.pk})
+        return url
+
+    def get_delete_url(self):
+        """
+        This method to get delete url
+        """
+        url = reverse_lazy("generic-delete")
+
+        return url
+
+    # def get_delete_url(self):
+    #     """
+    #     for to get delete url
+    #     """
+
+    #     url = reverse_lazy("type-delete", kwargs={"obj_id": self.pk})
+    #     message = "Are you sure you want to delete this leave type?"
+    #     return f"'{url}'" + "," + f"'{message}'"
+
+    def leave_detail_view(self):
+        """
+        detail view
+        """
+
+        url = reverse("leave-type-detail-view", kwargs={"pk": self.pk})
+        return url
+
+    def encashable(self):
+        """
+        encashable condition
+        """
+        return "Yes" if self.is_encashable else "No"
+
+    def detail_view_actions(self):
+        """
+        detail view actions
+        """
+        return render_template(
+            path="cbv/leave_types/detail_actions.html", context={"instance": self}
+        )
+
 
 class Holiday(HorillaModel):
     name = models.CharField(max_length=30, null=False, verbose_name=_("Name"))
@@ -322,6 +426,39 @@ class Holiday(HorillaModel):
     def __str__(self):
         return self.name
 
+    def detail_view(self):
+        """
+        detail view
+        """
+
+        url = reverse("holiday-detail-view", kwargs={"pk": self.pk})
+        return url
+
+    def detail_view_actions(self):
+        """
+        detail view actions
+        """
+        return render_template(
+            path="cbv/holidays/detail_view_actions.html",
+            context={"instance": self},
+        )
+
+    def get_recurring_status(self):
+        """
+        recurring data
+        """
+        return "Yes" if self.recurring else "No"
+
+    def holidays_actions(self):
+        """
+        method for rendering actions(edit,delete)
+        """
+
+        return render_template(
+            path="cbv/holidays/holidays_actions.html",
+            context={"instance": self},
+        )
+
 
 class CompanyLeave(HorillaModel):
     based_on_week = models.CharField(
@@ -339,6 +476,76 @@ class CompanyLeave(HorillaModel):
     def __str__(self):
         return f"{dict(WEEK_DAYS).get(self.based_on_week_day)} | {dict(WEEKS).get(self.based_on_week)}"
 
+    def custom_based_on_week(self):
+        """
+        custom based on col
+        """
+
+        return render_template(
+            path="cbv/company_leaves/on_week.html",
+            context={"instance": self, "weeks": WEEKS},
+        )
+
+    def get_detail_title(self):
+        """
+        for return title
+        """
+
+        title = "Company Leaves"
+        return title
+
+    def detail_view_actions(self):
+        """
+        detail view actions
+        """
+        return render_template(
+            path="cbv/company_leaves/detail_view_actions.html",
+            context={"instance": self},
+        )
+
+    def based_on_week_day_col(self):
+        """
+        custom based on week day col
+        """
+
+        return render_template(
+            path="cbv/company_leaves/on_week_day.html",
+            context={"instance": self, "week_days": WEEK_DAYS},
+        )
+
+    def company_leave_actions(self):
+        """
+        custom actions col
+        """
+
+        return render_template(
+            path="cbv/company_leaves/company_leave_actions.html",
+            context={"instance": self, "weeks": WEEKS},
+        )
+
+    def detail_view(self):
+        """
+        detail view
+        """
+
+        url = reverse("company-leave-detail-view", kwargs={"pk": self.pk})
+        return url
+
+    def get_avatar(self):
+        """
+        Method will rerun the api to the avatar or path to the profile image
+        """
+        url = (
+            f"https://ui-avatars.com/api/?name={self.get_full_name()}&background=random"
+        )
+        if self.profile:
+            full_filename = settings.MEDIA_ROOT + self.profile.name
+
+            if default_storage.exists(full_filename):
+                url = self.profile.url
+
+        return url
+
 
 class AvailableLeave(HorillaModel):
     employee_id = models.ForeignKey(
@@ -385,6 +592,63 @@ class AvailableLeave(HorillaModel):
     def __str__(self):
         return f"{self.employee_id} | {self.leave_type_id}"
 
+    def assigned_leave_actions(self):
+        """
+        method for edit and delete actions coloumn
+        """
+        return render_template(
+            path="cbv/assigned_leave/assigned_leave_actions.html",
+            context={"instance": self},
+        )
+
+    def assigned_leave_detail_actions(self):
+        """
+        method for detail view edit and delete actions
+        """
+        return render_template(
+            path="cbv/assigned_leave/assigned_leave_detail_actions.html",
+            context={"instance": self},
+        )
+
+    def assigned_leave_detail_view(self):
+        """
+        detail view
+        """
+        url = reverse("available-leave-single-view", kwargs={"pk": self.pk})
+        return url
+
+    def assigned_leave_detail_name_subtitle(self):
+        """
+        Return subtitle containing both name and emp id.
+        """
+        return f"{self.employee_id}"
+
+    def assigned_leave_detail_postion_subtitle(self):
+        """
+        Return subtitle containing both department and job position information.
+        """
+        return f"{self.employee_id.employee_work_info.department_id} / {self.employee_id.employee_work_info.job_position_id}"
+
+    def forcasted_leaves(self):
+        forecasted_leave = {}
+        if self.leave_type_id.reset_based == "monthly":
+            today = datetime.now()
+            for i in range(1, 7):  # Calculate for the next 6 months
+                next_month = today + relativedelta(months=i)
+                if self.leave_type_id.carryforward_max:
+                    forecasted_leave[next_month.strftime("%Y-%m")] = (
+                        self.available_days
+                        + min(
+                            self.leave_type_id.carryforward_max,
+                            (self.leave_type_id.total_days * i),
+                        )
+                    )
+                else:
+                    forecasted_leave[next_month.strftime("%Y-%m")] = (
+                        self.available_days + (self.leave_type_id.total_days * i)
+                    )
+        return forecasted_leave
+
     def forcasted_leaves(self, date):
         if isinstance(date, str):
             date = datetime.strptime(date, "%Y-%m-%d").date()
@@ -464,6 +728,9 @@ class AvailableLeave(HorillaModel):
         return reset_date
 
     def leave_taken(self):
+        """
+        taken leaves calculation
+        """
         leave_taken = LeaveRequest.objects.filter(
             leave_type_id=self.leave_type_id,
             employee_id=self.employee_id,
@@ -626,7 +893,6 @@ class LeaveRequest(HorillaModel):
     created_by = models.ForeignKey(
         Employee,
         on_delete=models.PROTECT,
-        blank=True,
         null=True,
         related_name="leave_request_created",
         verbose_name=_("Created By"),
@@ -640,6 +906,303 @@ class LeaveRequest(HorillaModel):
         verbose_name = "Leave Request"
         verbose_name_plural = "Leave Requests"
 
+    def comment_action(self):
+        """
+        method for rendering comment action
+        """
+
+        return render_template(
+            path="cbv/my_leave_request/comment.html",
+            context={"instance": self},
+        )
+
+    def cancel_confirmation_action(self):
+        """
+        method for rendering cancel action
+        """
+
+        current_date = date.today()
+        return render_template(
+            path="cbv/my_leave_request/confirm_cancel.html",
+            context={"instance": self, "current_date": current_date},
+        )
+
+    def leave_actions(self):
+        """
+        method for rendering cancel action
+        """
+
+        return render_template(
+            path="cbv/my_leave_request/leave_actions.html",
+            context={"instance": self},
+        )
+
+    def detail_leave_actions(self):
+        """
+        method for rendering detail view action
+        """
+
+        return render_template(
+            path="cbv/my_leave_request/detail_leave_actions.html",
+            context={"instance": self},
+        )
+
+    def get_period(self):
+
+        return f"{self.start_date} to {self.end_date}"
+
+    def clashed_due_to(self):
+        """
+        method for rendering clashed_due_to col in clashes
+        """
+        overlapping_requests = LeaveRequest.objects.filter(
+            Q(
+                employee_id__employee_work_info__department_id=self.employee_id.employee_work_info.department_id
+            )
+            | Q(
+                employee_id__employee_work_info__job_position_id=self.employee_id.employee_work_info.job_position_id
+            ),
+            start_date__lte=self.end_date,
+            end_date__gte=self.start_date,
+        )
+
+        clashed_due_to_department = overlapping_requests.filter(
+            employee_id__employee_work_info__department_id=self.employee_id.employee_work_info.department_id
+        )
+        clashed_due_to_job_position = overlapping_requests.filter(
+            employee_id__employee_work_info__job_position_id=self.employee_id.employee_work_info.job_position_id
+        )
+
+        return render_template(
+            path="cbv/leave_requests/clashed_due_to.html",
+            context={
+                "instance": self,
+                "clashed_due_to_department": clashed_due_to_department,
+                "clashed_due_to_job_position": clashed_due_to_job_position,
+            },
+        )
+
+    def leave_type_custom(self):
+        """
+        leave type custom col
+        """
+        leave_requests_with_interview = []
+        context = {"instance": self}
+        if apps.is_installed("recruitment"):
+            Schedule = get_horilla_model_class(
+                app_label="recruitment", model="interviewschedule"
+            )
+            interviews = Schedule.objects.filter(
+                employee_id=self.employee_id,
+                interview_date__range=[
+                    self.start_date,
+                    self.end_date,
+                ],
+            )
+            if interviews:
+                leave_requests_with_interview.append(interviews)
+
+            context = {
+                "instance": self,
+                "leave_requests_with_interview": leave_requests_with_interview,
+            }
+        return render_template(
+            path="cbv/my_leave_request/leave_type_col.html", context=context
+        )
+
+    def is_rejected(self):
+        """
+        method to change background if they are rejected
+        """
+
+        if self.status == "rejected":
+            return 'style="background-color: rgba(255, 166, 0, 0.158);"'
+
+    def my_leave_request_detail_subtitle(self):
+        """
+        Return subtitle containing both department and job position information.
+        """
+        return f"{self.employee_id.employee_work_info.department_id} / {self.employee_id.employee_work_info.job_position_id}"
+
+    def my_leave_request_detail_view(self):
+        """
+        detail view
+        """
+        url = reverse("my-leave-request-detail-view", kwargs={"pk": self.pk})
+        return url
+
+    def rejected_action(self):
+        """
+        method for rendering rejected action
+        """
+
+        return render_template(
+            path="cbv/my_leave_request/rejected_action.html",
+            context={"instance": self},
+        )
+
+    def cancelled_action(self):
+        """
+        method for rendering cancelled action
+        """
+
+        return render_template(
+            path="cbv/my_leave_request/cancelled_action.html",
+            context={"instance": self},
+        )
+
+    def attachment_action(self):
+        """
+        method for rendering attachment action
+        """
+
+        return render_template(
+            path="cbv/my_leave_request/attachment_action.html",
+            context={"instance": self},
+        )
+
+    def multiple_approval_action(self):
+        """
+        method for rendering multiple approval action
+        """
+
+        return render_template(
+            path="cbv/leave_requests/multiple_approval_action.html",
+            context={"instance": self},
+        )
+
+    def custom_status_col(self):
+        """
+        method for rendering custom status col
+        """
+        request = getattr(_thread_locals, "request")
+        multiple_approvals = filter_conditional_leave_request(request).distinct()
+
+        return render_template(
+            path="cbv/leave_requests/custom_status_col.html",
+            context={"instance": self, "multiple_approvals": multiple_approvals},
+        )
+
+    def leave_request_detail_action(self):
+        """
+        method for rendering detail view action
+        """
+
+        return render_template(
+            path="cbv/leave_requests/leave_request_detail_actions.html",
+            context={"instance": self},
+        )
+
+    def comment_sidebar(self):
+        """
+        method for comment sidebar
+        """
+        return render_template(
+            path="cbv/leave_requests/comment_action.html",
+            context={"instance": self},
+        )
+
+    def leave_clash_col(self):
+        """
+        method for leave clash coloumn
+        """
+        return render_template(
+            path="cbv/leave_requests/leave_clash.html",
+            context={"instance": self},
+        )
+
+    def penality_col(self):
+        """
+        method for penality coloumn
+        """
+        return render_template(
+            path="cbv/leave_requests/penality.html",
+            context={"instance": self},
+        )
+
+    def actions_col(self):
+        """
+        method for actions coloumn
+        """
+        return render_template(
+            path="cbv/leave_requests/actions_col.html",
+            context={"instance": self},
+        )
+
+    def confirmation_col(self):
+        """
+        method for confirmation button coloumn
+        """
+        current_date = date.today()
+
+        return render_template(
+            path="cbv/leave_requests/confirmation.html",
+            context={
+                "instance": self,
+                "current_date": current_date,
+                "end_date": self.end_date,
+            },
+        )
+
+    def is_attendance_request_cancelled(self):
+        """
+        method to change background if they are cancelled
+        """
+
+        if self.status == "cancelled":
+            return 'style="background-color: lightgrey"'
+
+    def leave_requests_detail_view(self):
+        """
+        detail view
+        """
+        url = reverse("leave-requests-detail-view", kwargs={"pk": self.pk})
+        return url
+
+    def leave_requests_detail_view_actions(self):
+        """
+        method for detail view actions coloumn
+        """
+        current_date = date.today()
+        return render_template(
+            path="cbv/leave_requests/leave_request_detail_actions.html",
+            context={"instance": self, "current_date": current_date},
+        )
+
+    def leave_requests_custom_emp_col(self):
+        """
+        custom emp col in leave requests
+        """
+        leave_requests_with_interview = []
+        context = {"instance": self}
+        if apps.is_installed("recruitment"):
+            Schedule = get_horilla_model_class(
+                app_label="recruitment", model="interviewschedule"
+            )
+            interviews = Schedule.objects.filter(
+                employee_id=self.employee_id,
+                interview_date__range=[
+                    self.start_date,
+                    self.end_date,
+                ],
+            )
+            if interviews:
+                leave_requests_with_interview.append(interviews)
+            context = {
+                "instance": self,
+                "leave_requests_with_interview": leave_requests_with_interview,
+            }
+
+        return render_template(
+            path="cbv/leave_requests/leave_request_emp_col.html", context=context
+        )
+
+    def leave_requests_detail_subtitle(self):
+        """
+        Return subtitle containing both name and emp id.
+        """
+        return f"{self.employee_id}"
+
     def tracking(self):
         return get_diff(self)
 
@@ -779,7 +1342,6 @@ class LeaveRequest(HorillaModel):
         return overlapping_requests
 
     def save(self, *args, **kwargs):
-
         self.requested_days = calculate_requested_days(
             self.start_date,
             self.end_date,
@@ -1002,6 +1564,7 @@ class LeaveRequest(HorillaModel):
         total_leave_count = sum(
             requested_date in total_leaves for requested_date in requested_dates
         )
+
         if (self.start_date in total_leaves or self.end_date in total_leaves) and (
             self.start_date_breakdown == "second_half"
             or self.end_date_breakdown == "first_half"
@@ -1203,6 +1766,14 @@ class LeaveAllocationRequest(HorillaModel):
     def save(self, *args, **kwargs):
         super().save(*args, **kwargs)
 
+    def clean(self, *args, **kwargs):
+        if self.status != "requested":
+            raise ValidationError(
+                _(
+                    "This form cannot be edited because the status is Requested / Rejected."
+                )
+            )
+
     def __init__(self, *args, **kwargs):
         super().__init__(*args, **kwargs)
         self.skip_history = False
@@ -1225,6 +1796,116 @@ class LeaveAllocationRequest(HorillaModel):
         except:
             return None
 
+    def get_status(self):
+        """
+        Display status
+        """
+        return dict(LEAVE_ALLOCATION_STATUS).get(self.status)
+
+    def comment(self):
+        """
+        For comment column
+        """
+
+        return render_template(
+            path="cbv/leave_allocation_request/comment.html",
+            context={"instance": self},
+        )
+
+    def action_col(self):
+        """
+        For action column
+        """
+
+        return render_template(
+            path="cbv/leave_allocation_request/action_column.html",
+            context={"instance": self},
+        )
+
+    def detail_action(self):
+        """
+        For action column
+        """
+
+        return render_template(
+            path="cbv/leave_allocation_request/detail_action.html",
+            context={"instance": self},
+        )
+
+    def leave_detail_action(self):
+        """
+        For action column
+        """
+
+        return render_template(
+            path="cbv/leave_allocation_request/leave_detail_action.html",
+            context={"instance": self},
+        )
+
+    def attachment_col(self):
+        """
+        For attachment column
+        """
+
+        return render_template(
+            path="cbv/leave_allocation_request/attachment.html",
+            context={"instance": self},
+        )
+
+    def history_col(self):
+        """
+        For history column
+        """
+
+        return render_template(
+            path="cbv/leave_allocation_request/history.html",
+            context={"instance": self},
+        )
+
+    def reject_col(self):
+        """
+        For rejeect column
+        """
+
+        return render_template(
+            path="cbv/leave_allocation_request/reject.html",
+            context={"instance": self},
+        )
+
+    def confirm_col(self):
+        """
+        For action column
+        """
+
+        return render_template(
+            path="cbv/leave_allocation_request/confirmations.html",
+            context={"instance": self},
+        )
+
+    def diff_cell(self):
+        if self.status == "rejected":
+            return 'style="background-color: rgba(255, 166, 0, 0.158);"'
+
+    def leave_request_allocation_detail_subtitle(self):
+        """
+        Return subtitle containing both department and job position information.
+        """
+        return f"{self.employee_id.employee_work_info.department_id} / {self.employee_id.employee_work_info.job_position_id}"
+
+    def leave_request_allocation_detail_view(self):
+        """
+        detail view
+        """
+        url = reverse("detail-leave-allocation-request", kwargs={"pk": self.pk})
+        return url
+
+    def detail_view_leave_request_allocation(self):
+        """
+        detail view
+        """
+        url = reverse("leave-allocation-request-detail-view", kwargs={"pk": self.pk})
+        return url
+
 
 class LeaveallocationrequestComment(HorillaModel):
     """
@@ -1298,6 +1979,50 @@ class RestrictLeave(HorillaModel):
     def __str__(self) -> str:
         return f"{self.title}"
 
+    def job_position_col(self):
+        """
+        For job position column
+        """
+
+        return render_template(
+            path="cbv/restricted_days/job_position.html",
+            context={"instance": self},
+        )
+
+    def actions_col(self):
+        """
+        For action column
+        """
+
+        return render_template(
+            path="cbv/restricted_days/actions.html",
+            context={"instance": self},
+        )
+
+    def detail_action(self):
+        """
+        For action column
+        """
+
+        return render_template(
+            path="cbv/restricted_days/detail_action.html",
+            context={"instance": self},
+        )
+
+    def get_avatar(self):
+        """
+        Method will retun the api to the avatar or path to the profile image
+        """
+        url = f"https://ui-avatars.com/api/?name={self.title}&background=random"
+        return url
+
+    def restricted_days_detail_view(self):
+        """
+        detail view
+        """
+        url = reverse("restricted-days-detail-view", kwargs={"pk": self.pk})
+        return url
+
 
 if apps.is_installed("attendance"):
 
@@ -1332,6 +2057,121 @@ if apps.is_installed("attendance"):
         class Meta:
             ordering = ["-id"]
 
+        def status_display(self):
+            """
+            status
+            """
+            return dict(LEAVE_ALLOCATION_STATUS).get(self.status)
+
+        def compensatory_comment(self):
+            """
+            comment sidebar col
+            """
+            return render_template(
+                path="cbv/compensatory_leave/compensatory_comment.html",
+                context={"instance": self},
+            )
+
+        def compensatory_date(self):
+            """
+            date col
+            """
+            return render_template(
+                path="cbv/compensatory_leave/custom_date.html",
+                context={"instance": self},
+            )
+
+        def compensatory_options(self):
+            """
+            edit and delete options
+            """
+            return render_template(
+                path="cbv/compensatory_leave/compensatory_actions.html",
+                context={"instance": self},
+            )
+
+        def compensatory_confirm_actions(self):
+            """
+            approve and reject options
+            """
+            return render_template(
+                path="cbv/compensatory_leave/compensatory_confirmation.html",
+                context={"instance": self},
+            )
+
+        def compensatory_detail_name_subtitle(self):
+            """
+            Return subtitle containing both name and emp id.
+            """
+            return f"{self.employee_id}"
+
+        def compensatory_detail_subtitle(self):
+            """
+            Return subtitle containing both department and job position information.
+            """
+            return f"{self.employee_id.employee_work_info.department_id} / {self.employee_id.employee_work_info.job_position_id}"
+
+        def my_compensatory_detail_actions(self):
+            """
+            my compensatory detail view actions
+            """
+            return render_template(
+                path="cbv/compensatory_leave/my_compensatory_detail_action.html",
+                context={"instance": self},
+            )
+
+        def compensatory_detail_actions(self):
+            """
+            compensatory detail view actions
+            """
+            return render_template(
+                path="cbv/compensatory_leave/compensatory_detail_actions.html",
+                context={"instance": self},
+            )
+
+        def compensatory_detail_reject_reason(self):
+            """
+            compensatory reject reason in detail view
+            """
+            return render_template(
+                path="cbv/compensatory_leave/detail_reject_reason.html",
+                context={"instance": self},
+            )
+
+        def my_compensatory_detail_view(self):
+            """
+            detail view of my compensatory tab
+            """
+            url = reverse("my-compensatory-detail-view", kwargs={"pk": self.pk})
+            return url
+
+        def compensatory_detail_view(self):
+            """
+            detail view of compensatory tab
+            """
+            url = reverse("compensatory-detail-view", kwargs={"pk": self.pk})
+            return url
+
+        def is_compensatory_request_rejected(self):
+            """
+            method to change background if they are rejected
+            """
+            hovering = "lightgrey"
+            if self.status == "rejected":
+                return (
+                    f'style="background-color: rgba(255, 166, 0, 0.158);"'
+                    f"onmouseover=\"this.style.backgroundColor='{hovering}';\" "
+                    f"onmouseout=\"this.style.backgroundColor='rgba(255, 166, 0, 0.158)';\""
+                )
+
+        def assign_compensatory_leave_type(self):
+            available_leave, created = AvailableLeave.objects.get_or_create(
+                employee_id=self.employee_id,
+                leave_type_id=self.leave_type_id,
+            )
+            available_leave.available_days += self.requested_days
+            available_leave.save()
+
         def __str__(self):
             return f"{self.employee_id}| {self.leave_type_id}| {self.id}"
 
diff --git a/leave/scheduler.py b/leave/scheduler.py
index ccc03a053..825d63ed1 100644
--- a/leave/scheduler.py
+++ b/leave/scheduler.py
@@ -1,13 +1,13 @@
-import calendar
-import datetime as dt
 import sys
-from datetime import datetime, timedelta
+from datetime import datetime
 
 from apscheduler.schedulers.background import BackgroundScheduler
-from dateutil.relativedelta import relativedelta
+
+from horilla.signals import post_scheduler, pre_scheduler
 
 
 def leave_reset():
+    pre_scheduler.send(sender=leave_reset)
     from leave.models import LeaveType
 
     today = datetime.now()
@@ -44,6 +44,14 @@ def leave_reset():
                 today_date
             )
             leave_type.save()
+    post_scheduler.send(
+        sender=leave_reset,
+        **{
+            "today": today,
+            "today_date": today_date,
+            "leave_types": leave_types,
+        }
+    )
 
 
 if not any(
diff --git a/leave/static/cbv/assigned_leave/assigned_leave.js b/leave/static/cbv/assigned_leave/assigned_leave.js
new file mode 100644
index 000000000..4d1c7808f
--- /dev/null
+++ b/leave/static/cbv/assigned_leave/assigned_leave.js
@@ -0,0 +1,158 @@
+var rowMessages = {
+    ar: " تم الاختيار",
+    de: " Ausgewählt",
+    es: " Seleccionado",
+    en: " Selected",
+    fr: " Sélectionné",
+};
+
+var excelMessages = {
+    ar: "هل ترغب في تنزيل ملف Excel؟",
+    de: "Möchten Sie die Excel-Datei herunterladen?",
+    es: "¿Desea descargar el archivo de Excel?",
+    en: "Do you want to download the excel file?",
+    fr: "Voulez-vous télécharger le fichier Excel?",
+};
+
+var deleteAssignedMessages = {
+    ar: "هل تريد حقًا حذف كافة حالات الغياب المعينة المحددة؟",
+    de: "Möchten Sie wirklich alle ausgewählten zugewiesenen abwesenheit löschen?",
+    es: "¿Realmente desea eliminar todas las hojas asignadas dejar?",
+    en: "Do you really want to delete all the selected assigned leaves?",
+    fr: "Voulez-vous vraiment supprimer tous les sélectionnés congés attribués ?",
+};
+
+var no_rows_deleteMessages = {
+    ar: "لم يتم تحديد أي صفوف لحذف الإجازات المخصصة.",
+    de: "Es gibt keine Zeilen zum Löschen der zugewiesenen abwesenheit.",
+    es: "No se ha seleccionado ninguna fila para eliminar la  asignadas dejar",
+    en: "No rows are selected for deleting assigned leaves.",
+    fr: "Aucune ligne n'est sélectionnée pour supprimer les congés attribués.",
+};
+
+var downloadMessages = {
+    ar: "هل ترغب في تنزيل القالب؟",
+    de: "Möchten Sie die Vorlage herunterladen?",
+    es: "¿Quieres descargar la plantilla?",
+    en: "Do you want to download the template?",
+    fr: "Voulez-vous télécharger le modèle ?",
+};
+
+tickLeaveCheckboxes();
+function makeLeaveListUnique(list) {
+    return Array.from(new Set(list));
+}
+
+function getCurrentLanguageCode(callback) {
+    var languageCode = $("#main-section-data").attr("data-lang");
+    var allowedLanguageCodes = ["ar", "de", "es", "en", "fr"];
+    if (allowedLanguageCodes.includes(languageCode)) {
+        callback(languageCode);
+    } else {
+        $.ajax({
+            type: "GET",
+            url: "/employee/get-language-code/",
+            success: function (response) {
+                var ajaxLanguageCode = response.language_code;
+                $("#main-section-data").attr("data-lang", ajaxLanguageCode);
+                callback(
+                    allowedLanguageCodes.includes(ajaxLanguageCode)
+                        ? ajaxLanguageCode
+                        : "en"
+                );
+            },
+            error: function () {
+                callback("en");
+            },
+        });
+    }
+}
+
+function importAssignedLeave() {
+    var languageCode = null;
+    getCurrentLanguageCode(function (code) {
+        languageCode = code;
+        var confirmMessage = downloadMessages[languageCode];
+        Swal.fire({
+            text: confirmMessage,
+            icon: "question",
+            showCancelButton: true,
+            confirmButtonColor: "#008000",
+            cancelButtonColor: "#d33",
+            confirmButtonText: "Confirm",
+        }).then(function (result) {
+            if (result.isConfirmed) {
+                $.ajax({
+                    type: "GET",
+                    url: "/leave/assign-leave-type-excel",
+                    dataType: "binary",
+                    xhrFields: {
+                        responseType: "blob",
+                    },
+                    success: function (response) {
+                        const file = new Blob([response], {
+                            type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+                        });
+                        const url = URL.createObjectURL(file);
+                        const link = document.createElement("a");
+                        link.href = url;
+                        link.download = "assign_leave_type_excel.xlsx";
+                        document.body.appendChild(link);
+                        link.click();
+                    },
+                    error: function (xhr, textStatus, errorThrown) {
+                        console.error("Error downloading file:", errorThrown);
+                    },
+                });
+            }
+        });
+    });
+}
+
+function leaveAssigBulkDelete() {
+    var languageCode = null;
+    getCurrentLanguageCode(function (code) {
+        languageCode = code;
+        var confirmMessage = deleteAssignedMessages[languageCode];
+        var textMessage = no_rows_deleteMessages[languageCode];
+        ids = [];
+        ids.push($("#selectedInstances").attr("data-ids"));
+        ids = JSON.parse($("#selectedInstances").attr("data-ids"));
+        if (ids.length === 0) {
+            Swal.fire({
+                text: textMessage,
+                icon: "warning",
+                confirmButtonText: "Close",
+            });
+        } else {
+            Swal.fire({
+                text: confirmMessage,
+                icon: "error",
+                showCancelButton: true,
+                confirmButtonColor: "#008000",
+                cancelButtonColor: "#d33",
+                confirmButtonText: "Confirm",
+            }).then(function (result) {
+                if (result.isConfirmed) {
+                    ids = [];
+                    ids.push($("#selectedInstances").attr("data-ids"));
+                    ids = JSON.parse($("#selectedInstances").attr("data-ids"));
+                    $.ajax({
+                        type: "POST",
+                        url: "/leave/assigned-leave-bulk-delete",
+                        data: {
+                            csrfmiddlewaretoken: getCookie("csrftoken"),
+                            ids: JSON.stringify(ids),
+                        },
+                        success: function (response, textStatus, jqXHR) {
+                            if (jqXHR.status === 200) {
+                                location.reload();
+                            } else {
+                            }
+                        },
+                    });
+                }
+            });
+        }
+    });
+}
\ No newline at end of file
diff --git a/leave/static/cbv/compensatory_leave/compensatory_leave.js b/leave/static/cbv/compensatory_leave/compensatory_leave.js
new file mode 100644
index 000000000..fb2afe1b6
--- /dev/null
+++ b/leave/static/cbv/compensatory_leave/compensatory_leave.js
@@ -0,0 +1,60 @@
+var closeButtonText = {
+    ar: "إغلاق",
+    de: "Schließen",
+    es: "Cerrar",
+    en: "Close",
+    fr: "Fermer",
+  };
+  
+  var confirmButtonText = {
+    ar: "تأكيد",
+    de: "Bestätigen",
+    es: "Confirmar",
+    en: "Confirm",
+    fr: "Confirmer",
+  };
+  
+  var deleteCompensatoryMessages = {
+    ar: "هل تريد حقًا حذف جميع طلبات الإجازة المحددة؟",
+    de: "Möchten Sie wirklich alle ausgewählten Urlaubsanfragen löschen?",
+    es: "¿Realmente desea eliminar todas las solicitudes de permiso seleccionadas?",
+    en: "Are you sure you want to delete ?",
+    fr: "Voulez-vous vraiment supprimer toutes les demandes de congé sélectionnées?",
+  };
+
+
+  
+  tickLeaverequestsCheckboxes();
+  function makeLeaverequestsListUnique(list) {
+    return Array.from(new Set(list));
+  }
+  
+  tickUserrequestsCheckboxes();
+  function makeUserrequestsListUnique(list) {
+    return Array.from(new Set(list));
+  }
+  
+  function getCurrentLanguageCode(callback) {
+    var languageCode = $("#main-section-data").attr("data-lang");
+    var allowedLanguageCodes = ["ar", "de", "es", "en", "fr"];
+    if (allowedLanguageCodes.includes(languageCode)) {
+      callback(languageCode);
+    } else {
+      $.ajax({
+        type: "GET",
+        url: "/employee/get-language-code/",
+        success: function (response) {
+          var ajaxLanguageCode = response.language_code;
+          $("#main-section-data").attr("data-lang", ajaxLanguageCode);
+          callback(
+            allowedLanguageCodes.includes(ajaxLanguageCode)
+              ? ajaxLanguageCode
+              : "en"
+          );
+        },
+        error: function () {
+          callback("en");
+        },
+      });
+    }
+  }
\ No newline at end of file
diff --git a/leave/static/cbv/holidays/holiday_action.js b/leave/static/cbv/holidays/holiday_action.js
new file mode 100644
index 000000000..aff9808f1
--- /dev/null
+++ b/leave/static/cbv/holidays/holiday_action.js
@@ -0,0 +1,188 @@
+var rowMessages = {
+    ar: " تم الاختيار",
+    de: " Ausgewählt",
+    es: " Seleccionado",
+    en: " Selected",
+    fr: " Sélectionné",
+  };
+  
+  var deleteHolidayMessages = {
+    ar: "هل تريد حقًا حذف جميع العطل المحددة؟",
+    de: "Möchten Sie wirklich alle ausgewählten Feiertage löschen?",
+    es: "¿Realmente quieres eliminar todas las vacaciones seleccionadas?",
+    en: "Do you really want to delete all the selected holidays?",
+    fr: "Voulez-vous vraiment supprimer toutes les vacances sélectionnées?",
+  };
+  
+  var no_rows_deleteMessages = {
+    ar: "لم تتم تحديد صفوف لحذف العطلات.",
+    de: "Es wurden keine Zeilen zum Löschen von Feiertagen ausgewählt.",
+    es: "No se han seleccionado filas para eliminar las vacaciones.",
+    en: "No rows are selected for deleting holidays.",
+    fr: "Aucune ligne n'a été sélectionnée pour supprimer les vacances.",
+  };
+  var downloadMessages = {
+    ar: "هل ترغب في تنزيل القالب؟",
+    de: "Möchten Sie die Vorlage herunterladen?",
+    es: "¿Quieres descargar la plantilla?",
+    en: "Do you want to download the template?",
+    fr: "Voulez-vous télécharger le modèle ?",
+  };
+  
+  function createHolidayHxValue() {
+    var pd = $(".oh-pagination").attr("data-pd");
+    var hxValue = JSON.stringify(pd);
+    $("#holidayCreateButton").attr("hx-vals", `{"pd":${hxValue}}`);
+  }
+  
+  tickHolidayCheckboxes();
+  function makeHolidayListUnique(list) {
+    return Array.from(new Set(list));
+  }
+  
+  function getCurrentLanguageCode(callback) {
+    var languageCode = $("#main-section-data").attr("data-lang");
+    var allowedLanguageCodes = ["ar", "de", "es", "en", "fr"];
+    if (allowedLanguageCodes.includes(languageCode)) {
+      callback(languageCode);
+    } else {
+      $.ajax({
+        type: "GET",
+        url: "/employee/get-language-code/",
+        success: function (response) {
+          var ajaxLanguageCode = response.language_code;
+          $("#main-section-data").attr("data-lang", ajaxLanguageCode);
+          callback(
+            allowedLanguageCodes.includes(ajaxLanguageCode)
+              ? ajaxLanguageCode
+              : "en"
+          );
+        },
+        error: function () {
+          callback("en");
+        },
+      });
+    }
+  }
+  
+  function tickHolidayCheckboxes() {
+    var ids = JSON.parse($("#selectedHolidays").attr("data-ids") || "[]");
+    uniqueIds = makeHolidayListUnique(ids);
+    toggleHighlight(uniqueIds);
+    click = $("#selectedHolidays").attr("data-clicked");
+    if (click === "1") {
+      $(".all-holidays").prop("checked", true);
+    }
+    uniqueIds.forEach(function (id) {
+      $("#" + id).prop("checked", true);
+    });
+    var selectedCount = uniqueIds.length;
+    getCurrentLanguageCode(function (code) {
+      languageCode = code;
+      var message = rowMessages[languageCode];
+      if (selectedCount > 0) {
+        $("#unselectAllHolidays").css("display", "inline-flex");
+        $("#exportHolidays").css("display", "inline-flex");
+        $("#selectedShowHolidays").css("display", "inline-flex");
+        $("#selectedShowHolidays").text(selectedCount + " -" + message);
+      } else {
+        $("#unselectAllHolidays").css("display", "none  ");
+        $("#selectedShowHolidays").css("display", "none");
+        $("#exportHolidays").css("display", "none");
+      }
+    });
+  }
+
+
+  //$(".holidaysInfoImport").click(function (e) {
+
+function importHolidays() {
+    var languageCode = null;
+    getCurrentLanguageCode(function (code) {
+      languageCode = code;
+      var confirmMessage = downloadMessages[languageCode];
+      Swal.fire({
+        text: confirmMessage,
+        icon: "question",
+        showCancelButton: true,
+        confirmButtonColor: "#008000",
+        cancelButtonColor: "#d33",
+        confirmButtonText: "Confirm",
+      }).then(function (result) {
+        if (result.isConfirmed) {
+          $.ajax({
+            type: "GET",
+            url: "/configuration/holidays-excel-template",
+            dataType: "binary",
+            xhrFields: {
+              responseType: "blob",
+            },
+            success: function (response) {
+              const file = new Blob([response], {
+                type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+              });
+              const url = URL.createObjectURL(file);
+              const link = document.createElement("a");
+              link.href = url;
+              link.download = "holiday_excel.xlsx";
+              document.body.appendChild(link);
+              link.click();
+            },
+            error: function (xhr, textStatus, errorThrown) {
+              console.error("Error downloading file:", errorThrown);
+            },
+          });
+        }
+      });
+    });
+  }
+
+
+
+function bulkDeleteHoliday(){
+    var languageCode = null;
+    getCurrentLanguageCode(function (code) {
+      languageCode = code;
+      var confirmMessage = deleteHolidayMessages[languageCode];
+      var textMessage = no_rows_deleteMessages[languageCode];
+      ids = [];
+      ids.push($("#selectedInstances").attr("data-ids"));
+      ids = JSON.parse($("#selectedInstances").attr("data-ids"));
+      if (ids.length === 0) {
+        Swal.fire({
+          text: textMessage,
+          icon: "warning",
+          confirmButtonText: "Close",
+        });
+      } else {
+        Swal.fire({
+          text: confirmMessage,
+          icon: "error",
+          showCancelButton: true,
+          confirmButtonColor: "#008000",
+          cancelButtonColor: "#d33",
+          confirmButtonText: "Confirm",
+        }).then(function (result) {
+          if (result.isConfirmed) {
+            ids = [];
+            ids.push($("#selectedInstances").attr("data-ids"));
+            ids = JSON.parse($("#selectedInstances").attr("data-ids"));
+            $.ajax({
+              type: "POST",
+              url: "/holidays-bulk-delete",
+              data: {
+                csrfmiddlewaretoken: getCookie("csrftoken"),
+                ids: JSON.stringify(ids),
+              },
+              success: function (response, textStatus, jqXHR) {
+                if (jqXHR.status === 200) {
+                  location.reload();
+                } else {
+                }
+              },
+            });
+          }
+        });
+      }
+    });
+}
\ No newline at end of file
diff --git a/leave/static/cbv/leave_requests/leave_requests.js b/leave/static/cbv/leave_requests/leave_requests.js
new file mode 100644
index 000000000..4ee911868
--- /dev/null
+++ b/leave/static/cbv/leave_requests/leave_requests.js
@@ -0,0 +1,259 @@
+var closeButtonText = {
+  ar: "إغلاق",
+  de: "Schließen",
+  es: "Cerrar",
+  en: "Close",
+  fr: "Fermer",
+};
+
+var confirmButtonText = {
+  ar: "تأكيد",
+  de: "Bestätigen",
+  es: "Confirmar",
+  en: "Confirm",
+  fr: "Confirmer",
+};
+
+var deleteLeaveRequestMessages = {
+  ar: "هل تريد حقًا حذف جميع طلبات الإجازة المحددة؟",
+  de: "Möchten Sie wirklich alle ausgewählten Urlaubsanfragen löschen?",
+  es: "¿Realmente desea eliminar todas las solicitudes de permiso seleccionadas?",
+  en: "Do you really want to delete all the selected leave requests?",
+  fr: "Voulez-vous vraiment supprimer toutes les demandes de congé sélectionnées?",
+};
+
+var approveLeaveRequests = {
+  ar: "هل ترغب في الموافقة على طلبات الإجازة المحددة؟",
+  de: "Möchten Sie die ausgewählten Urlaubsanfragen genehmigen?",
+  es: "¿Quieres aprobar las solicitudes de licencia seleccionadas?",
+  en: "Do you want to approve the selected leave requests?",
+  fr: "Voulez-vous approuver les demandes de congé sélectionnées?",
+};
+
+var noRowMessage = {
+  ar: "لم يتم تحديد أي صفوف.",
+  de: "Es wurden keine Zeilen ausgewählt.",
+  es: "No se han seleccionado filas.",
+  en: "No rows have been selected.",
+  fr: "Aucune ligne n'a été sélectionnée.",
+};
+
+var rowMessages = {
+  ar: " تم الاختيار",
+  de: " Ausgewählt",
+  es: " Seleccionado",
+  en: " Selected",
+  fr: " Sélectionné",
+};
+
+var excelMessages = {
+  ar: "هل ترغب في تنزيل ملف Excel؟",
+  de: "Möchten Sie die Excel-Datei herunterladen?",
+  es: "¿Desea descargar el archivo de Excel?",
+  en: "Do you want to download the excel file?",
+  fr: "Voulez-vous télécharger le fichier Excel?",
+};
+
+tickLeaverequestsCheckboxes();
+function makeLeaverequestsListUnique(list) {
+  return Array.from(new Set(list));
+}
+
+
+function getCurrentLanguageCode(callback) {
+  var languageCode = $("#main-section-data").attr("data-lang");
+  var allowedLanguageCodes = ["ar", "de", "es", "en", "fr"];
+  if (allowedLanguageCodes.includes(languageCode)) {
+    callback(languageCode);
+  } else {
+    $.ajax({
+      type: "GET",
+      url: "/employee/get-language-code/",
+      success: function (response) {
+        var ajaxLanguageCode = response.language_code;
+        $("#main-section-data").attr("data-lang", ajaxLanguageCode);
+        callback(
+          allowedLanguageCodes.includes(ajaxLanguageCode)
+            ? ajaxLanguageCode
+            : "en"
+        );
+      },
+      error: function () {
+        callback("en");
+      },
+    });
+  }
+}
+
+// ---------------------------------------
+//            LEAVE REQUEST
+// ---------------------------------------
+
+function tickLeaverequestsCheckboxes() {
+  var ids = JSON.parse($("#selectedLeaverequests").attr("data-ids") || "[]");
+  uniqueIds = makeLeaverequestsListUnique(ids);
+  toggleHighlight(uniqueIds);
+  click = $("#selectedLeaverequests").attr("data-clicked");
+  if (click === "1") {
+    $(".all-leave-requests").prop("checked", true);
+  }
+  uniqueIds.forEach(function (id) {
+    $("#" + id).prop("checked", true);
+  });
+  var selectedCount = uniqueIds.length;
+  getCurrentLanguageCode(function (code) {
+    languageCode = code;
+    var message = rowMessages[languageCode];
+    if (selectedCount > 0) {
+      $("#unselectAllLeaverequests").css("display", "inline-flex");
+      $("#exportLeaverequests").css("display", "inline-flex");
+      $("#selectedShowLeaverequests").css("display", "inline-flex");
+      $("#selectedShowLeaverequests").text(selectedCount + " -" + message);
+    } else {
+      $("#selectedShowLeaverequests").css("display", "none");
+      $("#exportLeaverequests").css("display", "none");
+      $("#unselectAllLeaverequests").css("display", "none");
+    }
+  });
+}
+  
+  // function bulkApproveLeaveRequests() {
+  //   var languageCode = null;
+  //   getCurrentLanguageCode(function (code) {
+  //     languageCode = code;
+  //     var confirmMessage = approveLeaveRequests[languageCode];
+  //     var textMessage = noRowMessage[languageCode];
+  //     ids = [];
+  //     ids.push($("#selectedInstances").attr("data-ids"));
+  //     ids = JSON.parse($("#selectedInstances").attr("data-ids"));
+  //     console.log(ids) // Parse IDs
+  
+  //     if (ids.length === 0) {
+  //       Swal.fire({
+  //         text: textMessage,
+  //         icon: "warning",
+  //         confirmButtonText: closeButtonText[languageCode], // Use language-specific text for close button
+  //       });
+  //     } else {
+  //       Swal.fire({
+  //         text: confirmMessage,
+  //         icon: "question",
+  //         showCancelButton: true,
+  //         confirmButtonColor: "#008000",
+  //         cancelButtonColor: "#d33",
+  //         confirmButtonText: confirmButtonText[languageCode], // Use language-specific text for confirm button
+  //       }).then(function (result) {
+  //         if (result.isConfirmed) {
+  //           ids = [];
+  //           ids.push($("#selectedInstances").attr("data-ids"));
+  //           ids = JSON.parse($("#selectedInstances").attr("data-ids"));
+  //           console.log(ids)
+  //           $.ajax({
+  //             type: "POST",
+  //             url: "/leave/leave-requests-bulk-approve",
+  //             data: {
+  //               csrfmiddlewaretoken: getCookie("csrftoken"),
+  //               ids: JSON.stringify(ids),
+  //             },
+  //             success: function (response, textStatus, jqXHR) {
+  //               if (jqXHR.status === 200) {
+  //                 location.reload(); // Reload the current page on success
+  //               } else {
+  //                 console.error("Unexpected HTTP status:", jqXHR.status);
+  //               }
+  //             },
+  //             error: function (jqXHR, textStatus, errorThrown) {
+  //               console.error("AJAX Error:", errorThrown);
+  //             },
+  //           });
+  //         }
+  //       });
+  //     }
+  //   });
+  // }
+  
+
+
+function bulkApproveLeaveRequests() {
+    var languageCode = null;
+    getCurrentLanguageCode(function(code) {
+        languageCode = code;
+        var confirmMessage = approveLeaveRequests[languageCode];
+        var textMessage = noRowMessage[languageCode];
+        ids = JSON.parse($("#selectedInstances").attr("data-ids"));
+  
+        if (ids.length === 0) {
+            Swal.fire({
+                text: textMessage,
+                icon: "warning",
+                confirmButtonText: "Close",
+            });
+        } else {
+            Swal.fire({
+                text: confirmMessage,
+                icon: "question",
+                showCancelButton: true,
+                confirmButtonColor: "#008000",
+                cancelButtonColor: "#d33",
+                confirmButtonText: "Confirm",
+            }).then(function(result) {
+                if (result.isConfirmed) {
+                  console.log("worked")
+                  var hxVals = JSON.stringify(ids);
+                  console.log(hxVals)
+                  $("#bulkApproveSpan").attr("hx-vals", `{"ids":${hxVals}}`);
+                  $("#bulkApproveSpan").click();
+                        }
+                      });
+                    }
+                  });
+                }
+
+function bulkDeleteLeaveRequests(){
+
+    var languageCode = null;
+    getCurrentLanguageCode(function (code) {
+      languageCode = code;
+      var confirmMessage = deleteLeaveRequestMessages[languageCode];
+      var textMessage = noRowMessage[languageCode];
+      ids = [];
+      ids.push($("#selectedInstances").attr("data-ids"));
+      ids = JSON.parse($("#selectedInstances").attr("data-ids"));
+      if (ids.length === 0) {
+        Swal.fire({
+          text: textMessage,
+          icon: "warning",
+          confirmButtonText: "Close",
+        });
+      } else {
+        Swal.fire({
+          text: confirmMessage,
+          icon: "error",
+          showCancelButton: true,
+          confirmButtonColor: "#008000",
+          cancelButtonColor: "#d33",
+          confirmButtonText: "Confirm",
+        }).then(function (result) {
+          if (result.isConfirmed) {
+            ids = [];
+            ids.push($("#selectedInstances").attr("data-ids"));
+            ids = JSON.parse($("#selectedInstances").attr("data-ids"));
+            $.ajax({
+              type: "POST",
+              url: "/leave/leave-request-bulk-delete",
+              data: {
+                csrfmiddlewaretoken: getCookie("csrftoken"),
+                ids: JSON.stringify(ids),
+              },
+              success: function (response, textStatus, jqXHR) {
+                if (jqXHR.status === 200) {
+                  location.reload();
+                } else {
+                }
+              },
+            });
+          }
+        });
+      }
+    });
+  }
diff --git a/leave/static/cbv/my_leave_request/my_leave_request.js b/leave/static/cbv/my_leave_request/my_leave_request.js
new file mode 100644
index 000000000..9b418913f
--- /dev/null
+++ b/leave/static/cbv/my_leave_request/my_leave_request.js
@@ -0,0 +1,172 @@
+var closeButtonText = {
+  ar: "إغلاق",
+  de: "Schließen",
+  es: "Cerrar",
+  en: "Close",
+  fr: "Fermer",
+};
+
+var confirmButtonText = {
+  ar: "تأكيد",
+  de: "Bestätigen",
+  es: "Confirmar",
+  en: "Confirm",
+  fr: "Confirmer",
+};
+
+var deleteLeaveRequestMessages = {
+  ar: "هل تريد حقًا حذف جميع طلبات الإجازة المحددة؟",
+  de: "Möchten Sie wirklich alle ausgewählten Urlaubsanfragen löschen?",
+  es: "¿Realmente desea eliminar todas las solicitudes de permiso seleccionadas?",
+  en: "Do you really want to delete all the selected leave requests?",
+  fr: "Voulez-vous vraiment supprimer toutes les demandes de congé sélectionnées?",
+};
+
+var approveLeaveRequests = {
+  ar: "هل ترغب في الموافقة على طلبات الإجازة المحددة؟",
+  de: "Möchten Sie die ausgewählten Urlaubsanfragen genehmigen?",
+  es: "¿Quieres aprobar las solicitudes de licencia seleccionadas?",
+  en: "Do you want to approve the selected leave requests?",
+  fr: "Voulez-vous approuver les demandes de congé sélectionnées?",
+};
+
+var noRowMessages = {
+  ar: "لم يتم تحديد أي صفوف.",
+  de: "Es wurden keine Zeilen ausgewählt.",
+  es: "No se han seleccionado filas.",
+  en: "No rows have been selected.",
+  fr: "Aucune ligne n'a été sélectionnée.",
+};
+
+var rowMessages = {
+  ar: " تم الاختيار",
+  de: " Ausgewählt",
+  es: " Seleccionado",
+  en: " Selected",
+  fr: " Sélectionné",
+};
+
+var excelMessages = {
+  ar: "هل ترغب في تنزيل ملف Excel؟",
+  de: "Möchten Sie die Excel-Datei herunterladen?",
+  es: "¿Desea descargar el archivo de Excel?",
+  en: "Do you want to download the excel file?",
+  fr: "Voulez-vous télécharger le fichier Excel?",
+};
+
+// tickLeaverequestsCheckboxes();
+// function makeLeaverequestsListUnique(list) {
+//   return Array.from(new Set(list));
+// }
+
+// tickUserrequestsCheckboxes();
+// function makeUserrequestsListUnique(list) {
+//   return Array.from(new Set(list));
+// }
+
+function getCurrentLanguageCode(callback) {
+  var languageCode = $("#main-section-data").attr("data-lang");
+  var allowedLanguageCodes = ["ar", "de", "es", "en", "fr"];
+  if (allowedLanguageCodes.includes(languageCode)) {
+    callback(languageCode);
+  } else {
+    $.ajax({
+      type: "GET",
+      url: "/employee/get-language-code/",
+      success: function (response) {
+        var ajaxLanguageCode = response.language_code;
+        $("#main-section-data").attr("data-lang", ajaxLanguageCode);
+        callback(
+          allowedLanguageCodes.includes(ajaxLanguageCode)
+            ? ajaxLanguageCode
+            : "en"
+        );
+      },
+      error: function () {
+        callback("en");
+      },
+    });
+  }
+}
+
+// ---------------------------------------
+//            LEAVE REQUEST
+// ---------------------------------------
+
+// function tickLeaverequestsCheckboxes() {
+//   var ids = JSON.parse($("#selectedLeaverequests").attr("data-ids") || "[]");
+//   uniqueIds = makeLeaverequestsListUnique(ids);
+//   toggleHighlight(uniqueIds);
+//   click = $("#selectedLeaverequests").attr("data-clicked");
+//   if (click === "1") {
+//     $(".all-leave-requests").prop("checked", true);
+//   }
+//   uniqueIds.forEach(function (id) {
+//     $("#" + id).prop("checked", true);
+//   });
+//   var selectedCount = uniqueIds.length;
+//   getCurrentLanguageCode(function (code) {
+//     languageCode = code;
+//     var message = rowMessages[languageCode];
+//     if (selectedCount > 0) {
+//       $("#unselectAllLeaverequests").css("display", "inline-flex");
+//       $("#exportLeaverequests").css("display", "inline-flex");
+//       $("#selectedShowLeaverequests").css("display", "inline-flex");
+//       $("#selectedShowLeaverequests").text(selectedCount + " -" + message);
+//     } else {
+//       $("#selectedShowLeaverequests").css("display", "none");
+//       $("#exportLeaverequests").css("display", "none");
+//       $("#unselectAllLeaverequests").css("display", "none");
+//     }
+//   });
+// }
+
+
+function myLeaveRequestBulkDelete() {
+    var languageCode = null;
+    getCurrentLanguageCode(function (code) {
+      languageCode = code;
+      var confirmMessage = deleteLeaveRequestMessages[languageCode];
+      var textMessage = noRowMessages[languageCode];
+      ids = [];
+      ids.push($("#selectedInstances").attr("data-ids"));
+      ids = JSON.parse($("#selectedInstances").attr("data-ids"));
+      if (ids.length === 0) {
+        Swal.fire({
+          text: textMessage,
+          icon: "warning",
+          confirmButtonText: "Close",
+        });
+      } else {
+        Swal.fire({
+          text: confirmMessage,
+          icon: "error",
+          showCancelButton: true,
+          confirmButtonColor: "#008000",
+          cancelButtonColor: "#d33",
+          confirmButtonText: "Confirm",
+        }).then(function (result) {
+          if (result.isConfirmed) {
+            ids = [];
+            ids.push($("#selectedInstances").attr("data-ids"));
+            ids = JSON.parse($("#selectedInstances").attr("data-ids"));
+            $.ajax({
+              type: "POST",
+              url: "/leave/user-request-bulk-delete",
+              data: {
+                csrfmiddlewaretoken: getCookie("csrftoken"),
+                ids: JSON.stringify(ids),
+              },
+              success: function (response, textStatus, jqXHR) {
+                if (jqXHR.status === 200) {
+                  location.reload();
+                }
+              },
+            });
+          }
+        });
+      }
+    });
+  }
+
+ 
\ No newline at end of file
diff --git a/leave/static/leave_assign/action.js b/leave/static/leave_assign/action.js
index a085816ce..a6318e4ef 100644
--- a/leave/static/leave_assign/action.js
+++ b/leave/static/leave_assign/action.js
@@ -315,50 +315,3 @@ $("#bulkAssignedLeavesDelete").click(function (e) {
     }
   });
 });
-
-$(".assign-leave-type-info-import").click(function (e) {
-  e.preventDefault();
-  var languageCode = null;
-  getCurrentLanguageCode(function (code) {
-    languageCode = code;
-    var confirmMessage = downloadMessages[languageCode];
-    Swal.fire({
-      text: confirmMessage,
-      icon: "question",
-      showCancelButton: true,
-      confirmButtonColor: "#008000",
-      cancelButtonColor: "#d33",
-      confirmButtonText: "Confirm",
-    }).then(function (result) {
-      if (result.isConfirmed) {
-        $.ajax({
-          type: "GET",
-          url: "/leave/assign-leave-type-excel",
-          dataType: "binary",
-          xhrFields: {
-            responseType: "blob",
-          },
-          success: function (response) {
-            const file = new Blob([response], {
-              type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
-            });
-            const url = URL.createObjectURL(file);
-            const link = document.createElement("a");
-            link.href = url;
-            link.download = "assign_leave_type_excel.xlsx";
-            document.body.appendChild(link);
-            link.click();
-          },
-          error: function (xhr, textStatus, errorThrown) {
-            console.error("Error downloading file:", errorThrown);
-          },
-        });
-      }
-    });
-  });
-});
-
-$("#select-all-fields").change(function () {
-  const isChecked = $(this).prop("checked");
-  $('[name="selected_fields"]').prop("checked", isChecked);
-});
diff --git a/leave/static/restrict_days/action.js b/leave/static/restrict_days/action.js
index 753c93d3d..742fc8f70 100644
--- a/leave/static/restrict_days/action.js
+++ b/leave/static/restrict_days/action.js
@@ -271,3 +271,36 @@ $("#bulkRestrictedDaysDelete").click(function (e) {
         }
     });
 });
+
+
+function bulkRestrictedDaysDelete() {
+  var languageCode = null;
+  getCurrentLanguageCode(function (code) {
+    languageCode = code;
+    var confirmMessage = deleteDaysMessages[languageCode];
+    var textMessage = noRowsDeleteMessages[languageCode];
+    ids = JSON.parse($("#selectedInstances").attr("data-ids"));
+    if (ids.length === 0) {
+      Swal.fire({
+        text: textMessage,
+        icon: "warning",
+        confirmButtonText: "Close",
+      });
+    } else {
+      Swal.fire({
+        text: confirmMessage,
+        icon: "question",
+        showCancelButton: true,
+        confirmButtonColor: "#008000",
+        cancelButtonColor: "#d33",
+        confirmButtonText: "Confirm",
+      }).then(function (result) {
+        if (result.isConfirmed) {
+          var hxVals = JSON.stringify(ids);
+          $("#bulkDeleteSpan").attr("hx-vals", `{"ids":${hxVals}}`);
+          $("#bulkDeleteSpan").click();
+        }
+      });
+    }
+  });
+};
diff --git a/leave/templates/cbv/assigned_leave/assigned_filter.html b/leave/templates/cbv/assigned_leave/assigned_filter.html
new file mode 100644
index 000000000..9f33dd2f2
--- /dev/null
+++ b/leave/templates/cbv/assigned_leave/assigned_filter.html
@@ -0,0 +1,109 @@
+{% load i18n %}
+<div class="oh-dropdown__filter-body">
+    <div class="oh-accordion">
+        <div class="oh-accordion-header">{% trans "Assigned Leave" %}</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 "Employees" %}</label>
+                        {{form.employee_id}}
+                    </div>
+                </div>
+                <div class="col-sm-12 col-md-12 col-lg-6">
+                    <div class="oh-input-group">
+                        <label class="oh-label">{% trans "Leave Type" %}</label>
+                        {{form.leave_type_id}}
+                    </div>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-sm-12 col-md-12 col-lg-6">
+                    <div class="oh-input-group">
+                        <label class="oh-label">{% trans "Available Days" %}</label>
+                        {{form.available_days}}
+                    </div>
+                </div>
+                <div class="col-sm-12 col-md-12 col-lg-6">
+                    <div class="oh-input-group">
+                        <label class="oh-label">{% trans "Carryforward Days" %}</label>
+                        {{form.carryforward_days}}
+                    </div>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-sm-12 col-md-12 col-lg-6">
+                    <div class="oh-input-group">
+                        <label class="oh-label">{% trans "Total Leave Days" %}</label>
+                        {{form.total_leave_days}}
+                    </div>
+                </div>
+                <div class="col-sm-12 col-md-12 col-lg-6">
+                    <div class="oh-input-group">
+                        <label class="oh-label">{% trans "Assigned Date" %}</label>
+                        {{form.assigned_date}}
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="oh-accordion">
+        <div class="oh-accordion-header">{% trans "Advanced" %}</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 "Available Days Greater or Equal" %}</label
+                        >
+                        {{form.available_days__gte}}
+                    </div>
+                </div>
+                <div class="col-sm-12 col-md-12 col-lg-6">
+                    <div class="oh-input-group">
+                        <label class="oh-label"
+                            >{% trans "Available Days Less Than or Equal" %}</label
+                        >
+                        {{form.available_days__lte}}
+                    </div>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-sm-12 col-md-12 col-lg-6">
+                    <div class="oh-input-group">
+                        <label class="oh-label"
+                            >{% trans "Carryforward Days Greater or Equal" %}</label
+                        >
+                        {{form.carryforward_days__gte}}
+                    </div>
+                </div>
+                <div class="col-sm-12 col-md-12 col-lg-6">
+                    <div class="oh-input-group">
+                        <label class="oh-label"
+                            >{% trans "Carryforward Days Less Than or Equal" %}</label
+                        >
+                        {{form.carryforward_days__lte}}
+                    </div>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-sm-12 col-md-12 col-lg-6">
+                    <div class="oh-input-group">
+                        <label class="oh-label"
+                            >{% trans "Total Leave Days Greater or Equal" %}</label
+                        >
+                        {{form.total_leave_days__gte}}
+                    </div>
+                </div>
+                <div class="col-sm-12 col-md-12 col-lg-6">
+                    <div class="oh-input-group">
+                        <label class="oh-label"
+                            >{% trans "Total Leave Days Less Than or Equal" %}</label
+                        >
+                        {{form.total_leave_days__lte}}
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/leave/templates/cbv/assigned_leave/assigned_leave_actions.html b/leave/templates/cbv/assigned_leave/assigned_leave_actions.html
new file mode 100644
index 000000000..d05aabf78
--- /dev/null
+++ b/leave/templates/cbv/assigned_leave/assigned_leave_actions.html
@@ -0,0 +1,19 @@
+{% load i18n %}
+{% load basefilters %}
+<div class="oh-btn-group" onclick="event.stopPropagation();">
+    {% if request.user|is_reportingmanager or perms.leave.change_availableleave %}
+        <button class="oh-btn oh-btn--light-bkg w-100" title="{% trans 'Edit' %}" data-toggle="oh-modal-toggle"
+            data-target="#objectUpdateModal" hx-get="{% url 'available-leave-update' instance.id %}"
+            hx-target="#objectUpdateModalTarget"><ion-icon name="create-outline"></ion-icon></button>
+    {% endif %}
+    {% if request.user|is_reportingmanager or perms.leave.delete_availableleave %}
+
+    <a class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100" 
+        id="delete-link" 
+        hx-get="{% url 'generic-delete' %}?model=leave.AvailableLeave&pk={{instance.id}}" 
+        hx-target="#deleteConfirmationBody" data-toggle="oh-modal-toggle" 
+        data-target="#deleteConfirmation"
+    >
+        <ion-icon name="trash-outline"></ion-icon></a> 
+    {% endif %}
+</div>
\ No newline at end of file
diff --git a/leave/templates/cbv/assigned_leave/assigned_leave_detail_actions.html b/leave/templates/cbv/assigned_leave/assigned_leave_detail_actions.html
new file mode 100644
index 000000000..be6d76a2d
--- /dev/null
+++ b/leave/templates/cbv/assigned_leave/assigned_leave_detail_actions.html
@@ -0,0 +1,25 @@
+{% load i18n %}
+{% load basefilters %}
+<div class="oh-btn-group" style="width: 100%;">
+    {% if request.user|is_reportingmanager or perms.leave.change_availableleave %}
+      <a hx-get="{% url 'available-leave-update' instance.id %}" hx-target='#objectUpdateModalTarget'
+        data-toggle="oh-modal-toggle" data-target='#objectUpdateModal' class="oh-btn oh-btn--info w-50" title="{% trans 'Edit' %}">
+        <ion-icon name="create-outline"></ion-icon>
+      </a>
+    {% endif %}
+    <button class="oh-btn oh-btn-group oh-btn--secondary"
+                    hx-confirm="{% trans 'Are you sure you want to delete this assigned leave request?' %}" id="deletebtn"
+                    hx-post="{% url 'assign-delete' instance.id %}?instances_ids={{request.GET.instance_ids}}"
+                    hx-target="#genericModalBody" style="width:50%;"
+                    title="{% trans 'Delete' %}"
+                    data-toggle="oh-modal-toggle">
+                <ion-icon class="me-1" name="trash-outline"></ion-icon>
+            </button>
+</div>
+{% if request.GET.deleted %}
+<script>
+    $(".reload-record").click()
+    $("#reloadMessagesButton").click()
+</script>
+{% endif %}
+
diff --git a/leave/templates/cbv/assigned_leave/assigned_leave_export.html b/leave/templates/cbv/assigned_leave/assigned_leave_export.html
new file mode 100644
index 000000000..dc1c6832b
--- /dev/null
+++ b/leave/templates/cbv/assigned_leave/assigned_leave_export.html
@@ -0,0 +1,159 @@
+{% load i18n %}
+<div class="oh-modal__dialog-header">
+  <h2 class="oh-modal__dialog-title" id="assignedLeavesExportLavel">
+    {% trans "Export Assigned Leaves" %}
+  </h2>
+  <button class="oh-modal__close" aria-label="Close">
+    <ion-icon name="close-outline"></ion-icon>
+  </button>
+</div>
+<div class="oh-modal__dialog-body" id="assignedLeavesExportModalBody">
+  <form
+    action="{%url 'assigned-leaves-info-export' %}"
+    method="get"
+    onsubmit="event.stopPropagation();$(this).parents().find('.oh-modal--show').last().toggleClass('oh-modal--show');"
+    id="assignedLeavesExportForm"
+    class="oh-profile-section"
+  >
+    {% csrf_token %}
+    <div class="oh-dropdown__filter-body">
+        <div class="oh-accordion">
+          <div class="oh-accordion-header">{% trans "Excel columns" %}</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">
+                    <input type="checkbox" id="select-all-fields" />
+                    {% trans "Select All" %}
+                  </label>
+                </div>
+              </div>
+            </div>
+            <div class="row">
+              {% for field in export_column.selected_fields %}
+              <div class="col-sm-12 col-md-12 col-lg-6">
+                <div class="oh-input-group">
+                  <label class="oh-label"> {{ field }} </label>
+                </div>
+              </div>
+              {% endfor %}
+            </div>
+          </div>
+        </div>
+        <div class="oh-accordion">
+          <div class="oh-accordion-header">{% trans "Assigned Leave" %}</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 "Employees" %}</label>
+                  {{export_filter.form.employee_id}}
+                </div>
+              </div>
+              <div class="col-sm-12 col-md-12 col-lg-6">
+                <div class="oh-input-group">
+                  <label class="oh-label">{% trans "Leave Type" %}</label>
+                  {{export_filter.form.leave_type_id}}
+                </div>
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-sm-12 col-md-12 col-lg-6">
+                <div class="oh-input-group">
+                  <label class="oh-label">{% trans "Available Days" %}</label>
+                  {{export_filter.form.available_days}}
+                </div>
+              </div>
+              <div class="col-sm-12 col-md-12 col-lg-6">
+                <div class="oh-input-group">
+                  <label class="oh-label">{% trans "Carryforward Days" %}</label>
+                  {{export_filter.form.carryforward_days}}
+                </div>
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-sm-12 col-md-12 col-lg-6">
+                <div class="oh-input-group">
+                  <label class="oh-label">{% trans "Total Leave Days" %}</label>
+                  {{export_filter.form.total_leave_days}}
+                </div>
+              </div>
+              <div class="col-sm-12 col-md-12 col-lg-6">
+                <div class="oh-input-group">
+                  <label class="oh-label">{% trans "Assigned Date" %}</label>
+                  {{export_filter.form.assigned_date}}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="oh-accordion">
+          <div class="oh-accordion-header">{% trans "Advanced" %}</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 "Available Days Greater or Equal" %}</label
+                  >
+                  {{export_filter.form.available_days__gte}}
+                </div>
+              </div>
+              <div class="col-sm-12 col-md-12 col-lg-6">
+                <div class="oh-input-group">
+                  <label class="oh-label"
+                    >{% trans "Available Days Less Than or Equal" %}</label
+                  >
+                  {{export_filter.form.available_days__lte}}
+                </div>
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-sm-12 col-md-12 col-lg-6">
+                <div class="oh-input-group">
+                  <label class="oh-label"
+                    >{% trans "Carryforward Days Greater or Equal" %}</label
+                  >
+                  {{export_filter.form.carryforward_days__gte}}
+                </div>
+              </div>
+              <div class="col-sm-12 col-md-12 col-lg-6">
+                <div class="oh-input-group">
+                  <label class="oh-label"
+                    >{% trans "Carryforward Days Less Than or Equal" %}</label
+                  >
+                  {{export_filter.form.carryforward_days__lte}}
+                </div>
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-sm-12 col-md-12 col-lg-6">
+                <div class="oh-input-group">
+                  <label class="oh-label"
+                    >{% trans "Total Leave Days Greater or Equal" %}</label
+                  >
+                  {{export_filter.form.total_leave_days__gte}}
+                </div>
+              </div>
+              <div class="col-sm-12 col-md-12 col-lg-6">
+                <div class="oh-input-group">
+                  <label class="oh-label"
+                    >{% trans "Total Leave Days Less Than or Equal" %}</label
+                  >
+                  {{export_filter.form.total_leave_days__lte}}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="oh-modal__dialog-footer p-0 mt-3">
+        <button type="submit" class="oh-btn oh-btn--secondary oh-btn--shadow">
+          {% trans "Export" %}
+        </button>
+      </div>
+    </form>
+  </div>
+    
+  
\ No newline at end of file
diff --git a/leave/templates/cbv/assigned_leave/assigned_leave_home.html b/leave/templates/cbv/assigned_leave/assigned_leave_home.html
new file mode 100644
index 000000000..ff0e533f1
--- /dev/null
+++ b/leave/templates/cbv/assigned_leave/assigned_leave_home.html
@@ -0,0 +1,80 @@
+{% extends "index.html" %}
+{% load static %}
+{% load i18n %}
+{% block content %}
+<meta name="csrf-token" content="{{ csrf_token }}">
+<div hx-get="{% url 'assigned-leave-nav' %}" hx-trigger="load"></div>
+
+{% include "generic/components.html" %}
+<div class="oh-checkpoint-badge mb-2" id="selectedInstances" data-ids="[]" data-clicked="" style="display: none">
+</div>
+
+
+<div class="oh-wrapper" hx-get="{% url "assign-filter" %}?{{request.GET.urlencode}}" hx-trigger="load"
+ id="listContainer">
+  <div class="animated-background">   
+</div>
+</div>
+
+<div class="oh-modal" id="objectUpdateModal" role="dialog" aria-labelledby="objectUpdateModalLabel" aria-hidden="true">
+    <div class="oh-modal__dialog" id="objectUpdateModalTarget"></div>
+</div>
+
+<!-- start of import assigned leaves form !-->
+<div class="oh-modal" id="assignLeaveTypeImport" role="dialog" aria-labelledby="assignLeaveTypeImport"
+    aria-hidden="true">
+    <div class="oh-modal__dialog">
+        <div class="oh-modal__dialog-header">
+            <h2 class="oh-modal__dialog-title" id="assignLeaveTypeImportLavel">
+                {% trans "Import Assigned Leaves" %}
+            </h2>
+            <button class="oh-modal__close" aria-label="Close">
+                <ion-icon name="close-outline"></ion-icon>
+            </button>
+            <div class="oh-modal__dialog-body p-0 pt-2" id="assignLeaveTypeImportModalBody">
+                <form hx-post="{% url 'assign-leave-type-info-import' %}" hx-encoding="multipart/form-data"
+                    hx-target="#assignLeaveTypeImport" id="assignLeaveTypeImportForm">
+                    {% csrf_token %}
+                    <div class="oh-modal__dialog-body mr-5" id="uploading" style="display: none">
+                        <div class="loader-container">
+                            <div class="loader"></div>
+                            <div class="loader-text">{% trans "Uploading..." %}</div>
+                        </div>
+                    </div>
+                    <div id="uploadContainer">
+                        <label class="oh-dropdown__import-label" for="uploadFile">
+                            <ion-icon name="cloud-upload" class="oh-dropdown__import-form-icon"></ion-icon>
+                            <span class="oh-dropdown__import-form-title">{% trans "Upload a File" %}</span>
+                            <span class="oh-dropdown__import-form-text">{% trans "Drag and drop files here" %}</span>
+                        </label>
+                        <input type="file" name="assign_leave_type_import" id="assignedLeaveFile" required />
+                        <div class="d-inline float-end">
+                            <a href="#" style="text-decoration:none; display: inline-block;"
+                                onclick="importAssignedLeave();" class="oh-dropdown__link assign-leave-type-info-import"
+                                data-toggle="oh-modal-toggle" data-target="#assignLeaveTypeImport">
+                                <ion-icon name="cloud-download-outline"
+                                    style="font-size:20px; vertical-align: middle;"></ion-icon>
+                                <span>{% trans "Download Template" %}</span>
+                            </a>
+                        </div>
+                    </div>
+                    <div class="oh-modal__dialog-footer p-0 pb-2">
+                        <button onclick="validateFile($(this),'assignedLeaveFile');" type="submit"
+                            class="oh-btn oh-btn--small oh-btn--secondary w-100 mt-3">
+                            {% trans "Upload" %}
+                        </button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+</div>
+<!-- End of import assigned leaves form !-->
+
+<script src="{% static 'cbv/assigned_leave/assigned_leave.js' %}"></script>
+<script>
+    $(document).on('submit', '#deletebtn', function () {
+        $('.oh-modal--show').removeClass('oh-modal--show');
+    });
+</script>
+{% endblock content %}
\ No newline at end of file
diff --git a/leave/templates/cbv/assigned_leave/nav_fixed_filter.html b/leave/templates/cbv/assigned_leave/nav_fixed_filter.html
new file mode 100644
index 000000000..19cf54b0a
--- /dev/null
+++ b/leave/templates/cbv/assigned_leave/nav_fixed_filter.html
@@ -0,0 +1,8 @@
+<div>
+    {% include 'generic/horilla_nav.html' %}
+</div>
+
+<script>
+    $('#applyFilter').closest('form').find('[name=field]').val('leave_type_id');
+    $('#applyFilter').click();
+</script>
\ No newline at end of file
diff --git a/leave/templates/cbv/compensatory_leave/compensatory_actions.html b/leave/templates/cbv/compensatory_leave/compensatory_actions.html
new file mode 100644
index 000000000..82aa07966
--- /dev/null
+++ b/leave/templates/cbv/compensatory_leave/compensatory_actions.html
@@ -0,0 +1,34 @@
+{% load i18n %}
+<div class="" onclick="event.stopPropagation()">
+    <div class="oh-btn-group">
+        {% if instance.status ==  'requested' %}
+            <button  
+                class="oh-btn oh-btn--light-bkg w-50" 
+                title="{% trans 'Edit' %}" 
+                data-toggle="oh-modal-toggle"
+                data-target="#genericModal" 
+                hx-get="{% url 'update-compensatory-leave' instance.id %}?instance_ids={{instance.ordered_ids}}"
+                hx-target="#genericModalBody">
+                <ion-icon name="create-outline"></ion-icon>
+            </button>
+        {% else %}
+            <button 
+                class="oh-btn oh-btn--light-bkg w-50" disabled>
+                <ion-icon name="create-outline" ></ion-icon>
+            </button></td>  
+        {% endif %}
+        {% if instance.status !=  'approved' %}
+            <a class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-50" id="delete-link"
+                hx-confirm="{% trans 'Are you sure you want to delete ?' %}" 
+                hx-post="{% url 'delete-compensatory-leave' instance.id %}"
+                hx-target="#listContainer"
+                title="{% trans 'Delete' %}">
+                <ion-icon name="trash-outline"></ion-icon>
+            </a>
+        {% else %}
+            <button class="oh-btn oh-btn--light-bkg w-50" disabled>
+                <ion-icon name="trash-outline"></ion-icon>
+            </button></td>
+        {% endif %}
+    </div>
+</div>
\ No newline at end of file
diff --git a/leave/templates/cbv/compensatory_leave/compensatory_comment.html b/leave/templates/cbv/compensatory_leave/compensatory_comment.html
new file mode 100644
index 000000000..d7138f924
--- /dev/null
+++ b/leave/templates/cbv/compensatory_leave/compensatory_comment.html
@@ -0,0 +1,6 @@
+{% load i18n %}
+    <button type="button" hx-get="{% url 'view-compensatory-leave-comment' instance.id %}" hx-target="#commentContainer"
+      data-target = '#allocationactivitySidebar' title='{% trans "Add / View Comment" %}'  class="oh-btn oh-btn--light oh-activity-sidebar__open w-100" style="flex: 1 0 auto; width:20px;height: 40.68px; padding: 0;" onclick="event.stopPropagation()">
+      <ion-icon name="newspaper-outline" role="img" class="md hydrated" aria-label="newspaper outline"></ion-icon>
+    </button>
+
diff --git a/leave/templates/cbv/compensatory_leave/compensatory_confirmation.html b/leave/templates/cbv/compensatory_leave/compensatory_confirmation.html
new file mode 100644
index 000000000..26885adec
--- /dev/null
+++ b/leave/templates/cbv/compensatory_leave/compensatory_confirmation.html
@@ -0,0 +1,38 @@
+{% load i18n %}
+{% load basefilters %}
+<div class="oh-btn-group" onclick="event.stopPropagation();">
+
+    {% if perms.leave.change_leaveallocationrequest or request.user|is_reportingmanager %}
+        {% if instance.status == 'requested' %}
+            <a type="submit" 
+                hx-confirm="{% trans 'Are you sure you want to approve ?' %}" 
+                hx-post="{% url 'approve-compensatory-leave' instance.id %}"
+                hx-target="#listContainer"
+                title="{% trans 'Approve' %}"
+                class="oh-btn oh-btn--success w-100">
+                <ion-icon class="me-1" name="checkmark-outline"></ion-icon>
+            </a>
+        {% else %}
+            <a type="submit" href="#" title="{% trans 'Approve' %}"
+                class="oh-btn oh-btn--success oh-btn--disabled w-100">
+                <ion-icon class="me-1" name="checkmark-outline"></ion-icon>
+            </a>
+        {% endif %}
+        {% if instance.status == 'approved' or instance.status == 'requested' %}
+            <a type="submit" data-toggle="oh-modal-toggle"
+                data-target="#rejectModal" 
+                hx-get="{% url 'reject-compensatory-leave' instance.id %}" 
+                hx-target="#rejectTarget" 
+                title="{% trans 'Reject' %}"
+                class="oh-btn oh-btn--danger w-100">
+                <ion-icon class="me-1" name="close-circle-outline"></ion-icon>
+            </a>
+        {% else %}
+            <a type="submit" href="#" title="{% trans 'Reject' %}"
+                class="oh-btn oh-btn--danger oh-btn--disabled
+                w-100" >
+                <ion-icon class="me-1" name="close-circle-outline"></ion-icon>
+            </a>
+        {% endif %}
+    {% endif %}
+</div>
diff --git a/leave/templates/cbv/compensatory_leave/compensatory_detail_actions.html b/leave/templates/cbv/compensatory_leave/compensatory_detail_actions.html
new file mode 100644
index 000000000..7cd8f6057
--- /dev/null
+++ b/leave/templates/cbv/compensatory_leave/compensatory_detail_actions.html
@@ -0,0 +1,52 @@
+{% load i18n %}
+{% load basefilters %}
+
+
+    <div class="oh-btn-group" style="width: 100%;">
+       {% if perms.leave.change_compensatoryleaverequest or request.user|is_reportingmanager %}
+                    {% if instance.status == 'requested' %}
+                    <a type="submit" 
+                        hx-confirm="{% trans 'Are you sure you want to approve ?' %}" 
+                        hx-post="{% url 'approve-compensatory-leave' instance.id %}?instances_ids={{request.GET.instance_ids}}"
+                        hx-target="#genericModalBody"
+                        title="{% trans 'Approve' %}"
+                        class="oh-btn oh-btn-group oh-btn--success" style="width: 100%;">
+                        <ion-icon class="me-1" name="checkmark-outline"></ion-icon>
+                        Approve
+                </a>
+                    {% else %}
+                    <a type="submit" href="#" title="{% trans 'Approve' %}"
+                    class="oh-btn oh-btn-group oh-btn--success oh-btn--disabled" style="width: 100%;">
+                    <ion-icon class="me-1" name="checkmark-outline"></ion-icon>
+                    Approve
+                </a>
+                    {% endif %}
+        {% if instance.status == 'requested' or instance.status == 'approved' %}
+            <a type="submit" data-toggle="oh-modal-toggle"
+                data-target="#rejectModal" 
+                hx-get="{% url 'reject-compensatory-leave' instance.id %}" 
+                hx-target="#rejectTarget" 
+                title="{% trans 'Reject' %}"
+                class="oh-btn oh-btn-group oh-btn--danger w-100">
+                <ion-icon class="me-1" name="close-circle-outline"></ion-icon>
+                Reject
+            </a>
+        {% else %}
+            <a type="submit" href="#" title="{% trans 'Reject' %}"
+                class="oh-btn oh-btn-group oh-btn--danger oh-btn--disabled
+                w-100" >
+                <ion-icon class="me-1" name="close-circle-outline"></ion-icon>
+                Reject
+            </a>
+        {% endif %}
+        {% endif %}
+        </div>
+
+
+{% if request.GET.deleted %}
+    <script>
+        $(".reload-record").click()
+        $("#reloadMessagesButton").click()
+    </script>
+    {% endif %}
+        
\ No newline at end of file
diff --git a/leave/templates/cbv/compensatory_leave/compensatory_home.html b/leave/templates/cbv/compensatory_leave/compensatory_home.html
new file mode 100644
index 000000000..45c599e8a
--- /dev/null
+++ b/leave/templates/cbv/compensatory_leave/compensatory_home.html
@@ -0,0 +1,62 @@
+{% extends "index.html" %}
+{% load static %}
+{% load i18n %}
+
+{% block content %}
+<style>
+      .approved--dot{
+        background-color:green;
+      }
+      .rejected--dot{
+        background-color:red;
+      }
+      .requested--dot{
+        background-color: rgb(103, 171, 238);
+      }
+
+      .status-rejected{
+        border-left: 4px solid red !important;
+        border-radius: 5px 0 0 4px;
+      
+      }
+      .status-requested{
+        
+        border-left: 4px solid  rgb(103, 171, 238)!important;
+        border-radius: 5px 0 0 4px;
+      
+      }
+     .status-approved {
+        border-left: 4px solid yellowgreen !important;
+        border-radius: 5px 0 0 4px;
+      
+      } 
+</style>
+<meta name="csrf-token" content="{{ csrf_token }}">
+
+<div hx-get="{% url "compensatory-nav" %}" hx-trigger="load">
+</div>  
+
+{% include "generic/components.html" %}
+<div class="oh-checkpoint-badge mb-2" id="selectedInstances" data-ids="[]" data-clicked="" style="display: none"></div>
+
+<div class="oh-wrapper" hx-get="{% url "compensatory-tab-view" %}?{{request.GET.urlencode}}"  id="listContainer">
+    <div class="animated-background"></div>
+</div> 
+
+
+<div class="oh-activity-sidebar" id="allocationactivitySidebar" style="z-index:1000;">
+	<div class="oh-activity-sidebar__body" id="commentContainer">
+	</div>
+</div>
+
+
+
+<div class="oh-modal" id="rejectModal" role="dialog" aria-labelledby="rejectDialogModal" aria-hidden="true">
+<div class="oh-modal__dialog" id="rejectTarget"></div>
+</div>
+
+<script src="{% static 'cbv/attendance_activity.js' %}"></script>
+
+
+
+{% endblock content %}
diff --git a/leave/templates/cbv/compensatory_leave/compensatory_leave_filter.html b/leave/templates/cbv/compensatory_leave/compensatory_leave_filter.html
new file mode 100644
index 000000000..624e73869
--- /dev/null
+++ b/leave/templates/cbv/compensatory_leave/compensatory_leave_filter.html
@@ -0,0 +1,56 @@
+{% load i18n %}
+<div class="oh-dropdown__filter-body">
+    <div class="oh-accordion">
+        <div
+            class="oh-accordion-header"
+            onclick="event.stopImmediatePropagation();$(this).parent().toggleClass('oh-accordion--show');"
+        >
+            {% trans "Compensatory Leave Request" %}
+        </div>
+        <div class="oh-accordion-body">
+            <div class="row">
+                <div class="col-sm-12 col-md-12 col-lg-12">
+                    <div class="oh-input-group">
+                        <label class="oh-label">{% trans "Leave Type" %}</label>
+                        {{form.leave_type_id}}
+                    </div>
+                </div>
+                <div class="col-sm-12 col-md-12 col-lg-6">
+                    <div class="oh-input-group">
+                        <label class="oh-label">{% trans "Employee" %}</label>
+                        {{form.employee_id}}
+                    </div>
+                </div>
+                <div class="col-sm-12 col-md-12 col-lg-6">
+                    <div class="oh-input-group">
+                        <label class="oh-label">{% trans "Created By" %}</label>
+                        {{form.created_by__employee_get}}
+                    </div>
+                </div>
+                <div class="col-sm-12 col-md-12 col-lg-6">
+                    <div class="oh-input-group">
+                        <label class="oh-label"
+                            >{% trans "Requested days Up To" %}</label
+                        >
+                        {{form.number_of_days_up_to}}
+                    </div>
+                </div>
+                <div class="col-sm-12 col-md-12 col-lg-6">
+                    <div class="oh-input-group">
+                        <label class="oh-label"
+                            >{% trans "Requested days More Than " %}</label
+                        >
+                        {{form.number_of_days_more_than}}
+                    </div>
+                </div>
+
+                <div class="col-sm-12 col-md-12">
+                    <div class="oh-input-group">
+                        <label class="oh-label">{% trans "Status" %}</label>
+                        {{form.status}}
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/leave/templates/cbv/compensatory_leave/custom_date.html b/leave/templates/cbv/compensatory_leave/custom_date.html
new file mode 100644
index 000000000..558ac4114
--- /dev/null
+++ b/leave/templates/cbv/compensatory_leave/custom_date.html
@@ -0,0 +1,6 @@
+{% load i18n %}
+<div class="">
+    {% for attendance in instance.attendance_id.all %}
+        {{ attendance.attendance_date }}<br/>
+    {% endfor %}
+</div>
\ No newline at end of file
diff --git a/leave/templates/cbv/compensatory_leave/detail_reject_reason.html b/leave/templates/cbv/compensatory_leave/detail_reject_reason.html
new file mode 100644
index 000000000..f9e9df192
--- /dev/null
+++ b/leave/templates/cbv/compensatory_leave/detail_reject_reason.html
@@ -0,0 +1,13 @@
+{% load i18n %}
+{% load basefilters %}
+{% if instance.reject_reason %}
+            {% if instance.status == "rejected" %}
+                <div class="oh-timeoff-modal__stats w-100 mt-3 p-2 row-status--red ">
+                    <div class="oh-timeoff-modal__stat">
+                        <span class="oh-timeoff-modal__stat-title">{% trans "Reason for Rejection" %}</span>
+                        <div class="oh-timeoff-modal__stat-description">{{instance.reject_reason}}</div>
+                    </div>
+                </div>
+            {% endif %}
+        {% endif %}
+</div>
\ No newline at end of file
diff --git a/leave/templates/cbv/compensatory_leave/inherit_class.html b/leave/templates/cbv/compensatory_leave/inherit_class.html
new file mode 100644
index 000000000..45cb6a5ff
--- /dev/null
+++ b/leave/templates/cbv/compensatory_leave/inherit_class.html
@@ -0,0 +1,3 @@
+<div class="compensatorydelete">
+    {% include "generic/horilla_tabs.html" %}
+</div>
\ No newline at end of file
diff --git a/leave/templates/cbv/compensatory_leave/my_compensatory_detail_action.html b/leave/templates/cbv/compensatory_leave/my_compensatory_detail_action.html
new file mode 100644
index 000000000..c17b33a0a
--- /dev/null
+++ b/leave/templates/cbv/compensatory_leave/my_compensatory_detail_action.html
@@ -0,0 +1,44 @@
+{% load i18n %}
+
+
+
+    <div class="oh-btn-group" style="width:100%;">
+        {% if instance.status ==  'requested' %}
+        
+                <button  
+                    class="oh-btn oh-btn-group oh-btn--info" style="width:50%;" 
+                    title="{% trans 'Edit' %}" 
+                    data-toggle="oh-modal-toggle"
+                    data-target="#genericModal" 
+                    hx-get="{% url 'update-compensatory-leave' instance.id %}"
+                    hx-target="#genericModalBody">
+                    <ion-icon name="create-outline"></ion-icon>
+                </button>
+            {% else %}
+                <button style="width:50%;"
+                    class="oh-btn oh-btn-group oh-btn--info" disabled>
+                    <ion-icon name="create-outline" ></ion-icon>
+                </button>
+                {% endif %}
+                {% if instance.status !=  'approved' %}
+                <button class="oh-btn oh-btn-group oh-btn--secondary"
+                    hx-confirm="{% trans 'Are you sure you want to delete ?' %}" id="delete-link"
+                    hx-post="{% url 'delete-compensatory-leave' instance.id %}?instances_ids={{request.GET.instance_ids}}"
+                    hx-target="#genericModalBody" style="width:50%;"
+                    title="{% trans 'Delete' %}"
+                    data-toggle="oh-modal-toggle">
+                <ion-icon class="me-1" name="trash-outline"></ion-icon>
+            </button>
+                {% else %}
+                    <button class="oh-btn oh-btn-group oh-btn--secondary" style="width:50%;" disabled>
+                        <ion-icon name="trash-outline"></ion-icon>
+                    </button></td>
+                {% endif %}
+            </div>
+
+{% if request.GET.deleted %}
+<script>
+    $(".reload-record").click()
+    $("#reloadMessagesButton").click()
+</script>
+{% endif %}
\ No newline at end of file
diff --git a/leave/templates/cbv/employee_individual/leave_tab.html b/leave/templates/cbv/employee_individual/leave_tab.html
new file mode 100644
index 000000000..a556861d5
--- /dev/null
+++ b/leave/templates/cbv/employee_individual/leave_tab.html
@@ -0,0 +1,391 @@
+{% load i18n %} {% load basefilters %}
+{% load horillafilters %}
+<div id="leave-tab">
+    
+    {% comment %} {% include "leave/user_leave/user_leave.html" %} {% endcomment %}
+
+<br>
+<style>
+
+
+  .cancelled--dot{
+    background-color:grey;
+  }
+  .approved--dot{
+    background-color:green;
+  }
+  .rejected--dot{
+    background-color:red;
+  }
+  .requested--dot{
+    background-color:orange;
+  }
+
+  .status-rejected{
+    border-left: 4px solid red !important;
+    border-radius: 5px 0 0 4px;
+  
+  }
+ .status-cancelled {
+    border-left: 4px solid grey !important;
+    border-radius: 5px 0 0 4px;
+  
+  } 
+  .status-requested{
+    border-left: 4px solid orange !important;
+    border-radius: 5px 0 0 4px;
+  
+  }
+ .status-approved {
+    border-left: 4px solid yellowgreen !important;
+    border-radius: 5px 0 0 4px;
+  
+  } 
+
+
+
+  .oh-sticky-table-container {
+    max-width: 2000px;
+    max-height: 170px;
+  }
+  .oh-sticky-table-request {
+    max-height: 500px;
+    overflow-y: auto;
+  }
+  .row-status--orange {
+    border-left: 4px solid orange;
+    border-radius: 5px;
+  }
+  .row-status--gray {
+    border-left: 4px solid gray;
+    border-radius: 5px;
+  }
+  .row-status--yellow {
+    border-left: 4px solid yellowgreen;
+    border-radius: 5px;
+  }
+
+  .kanban-card-container {
+    display: flex;
+    gap: 10px;
+    width: 100%;
+    overflow-x: scroll;
+  }
+  .oh-kanban-card {
+    min-width: 350px;
+    border-radius:10px;
+    flex-basis: calc(17% - 15px);
+  }
+  .oh-sticky-table-container + .oh-sticky-table-request {
+    margin-top: 20px;
+  }
+
+  .tooltip {
+    position: relative;
+    display: inline-block; /* Ensures that the tooltip container doesn't stretch to the full width */
+}
+
+.tooltip .tooltiptext {
+    visibility: hidden;
+    width: auto; /* Allow the tooltip width to adjust based on content */
+    max-width: auto; /* Limit the maximum width of the tooltip to prevent it from overflowing */
+    background-color: hsl(8,77%,56%);
+    color: white;
+    text-align: center;
+    border-radius: 6px;
+    padding: 5px;
+    position: absolute;
+    z-index: 1;
+    bottom: 5%;
+    left: 50%;
+    transform: translateX(5%);
+    opacity: 0;
+    transition: opacity 0.3s;
+    white-space: nowrap; /* Prevents the text from wrapping */
+    overflow: hidden; /* Hides any overflowed content */
+    font-size:15px;
+}
+
+.tooltip:hover .tooltiptext {
+    visibility: visible;
+    opacity: 1;
+}
+
+.delete{
+  color = hsl(1, 100%, 61%) !important;
+}
+  .diff-cell {
+      background: rgba(255, 166, 0, 0.158);
+  }
+</style>
+{% if user_leaves %}
+<!-- Profile leave type card -->
+<div class="oh-sticky-table-container">
+  <div class="oh-sticky-table">
+    <div class="kanban-card-container">
+      <!-- Container for Kanban cards -->
+      {% for user_leave in user_leaves %}
+        {% comment %} {% if perms.leave.view_leavetype or perms.leave.view_leaverequest or request.user|check_manager:employee_leave or request.user == user_leave.employee_id.employee_user_id %} {% endcomment %}
+          <div
+            class="oh-kanban-card"
+            data-toggle="oh-modal-toggle"
+            data-target="#objectCreateModal"
+            hx-get="{% url 'user-request' user_leave.leave_type_id.id %}?instances_ids={{user_request_ids}}"
+            hx-target="#objectCreateModalTarget"
+           >
+            <div class="oh-kanban-card__avatar">
+              <div class="oh-kanban-card__profile-container">
+                {% if user_leave.leave_type_id.icon %}
+                <img
+                  src="{{user_leave.leave_type_id.icon.url }}"
+                  class="oh-kanban-card__profile-image"
+                  alt="Leave Icon"
+                />
+                {% else %}
+                <img
+                  src="https://ui-avatars.com/api/?name={{user_leave.leave_type_id}}&background=random"
+                  class="oh-kanban-card__profile-image"
+                  alt="Leave Icon"
+                />
+                {% endif %}
+              </div>
+            </div>
+            <div class="oh-kanban-card__details">
+              <span class="oh-kanban-card__title"
+                >{{user_leave.leave_type_id}}</span
+              >
+              <span class="oh-kanban-card__subtitle"
+                >{% trans "Available Leave Days" %} :
+                {{user_leave.available_days}}</span
+              ><br />
+              <span class="oh-kanban-card__subtitle"
+                >{% trans "Carryforward Leave Days" %} :
+                {{user_leave.carryforward_days}}</span
+              ><br />
+              <span class="oh-kanban-card__subtitle"
+                >{% trans "Total Leave Days" %} :
+                {{user_leave.total_leave_days}}</span
+              >
+            </div>
+          </div>
+        {% comment %} {% endif %} {% endcomment %}
+      {% endfor %}
+    </div>
+  </div>
+</div>
+{% elif employee_leaves %}
+<!-- Employe leave type card -->
+<div class="oh-sticky-table-container">
+  <div class="oh-sticky-table">
+    <div class="kanban-card-container">
+      <!-- Container for Kanban cards -->
+      {% for employee_leave in employee_leaves %}
+
+        {% comment %} {% if perms.leave.view_leavetype or perms.leave.view_leaverequest or request.user|check_manager:employee_leave or request.user == employee_leave.employee_id.employee_user_id %} {% endcomment %}
+          <div
+            class="oh-kanban-card"
+            data-toggle="oh-modal-toggle"
+            data-target="#objectCreateModal"
+            hx-get="{% url 'leave-request-creation' employee_leave.leave_type_id.id employee_leave.employee_id.id%}"
+            hx-target="#objectCreateModalTarget"
+           >
+            <div class="oh-kanban-card__avatar">
+              <div class="oh-kanban-card__profile-container">
+                {% if employee_leave.leave_type_id.icon %}
+                <img
+                  src="{{employee_leave.leave_type_id.icon.url }}"
+                  class="oh-kanban-card__profile-image"
+                  alt="Leave Icon"
+                />
+                {% else %}
+                <img
+                  src="https://ui-avatars.com/api/?name={{employee_leave.leave_type_id}}&background=random"
+                  class="oh-kanban-card__profile-image"
+                  alt="Leave Icon"
+                />
+                {% endif %}
+              </div>
+            </div>
+            <div class="oh-kanban-card__details">
+              <span class="oh-kanban-card__title"
+                >{{employee_leave.leave_type_id}}</span
+              >
+              <span class="oh-kanban-card__subtitle"
+                >{% trans "Available Leave Days" %} :
+                {{employee_leave.available_days}}</span
+              ><br />
+              <span class="oh-kanban-card__subtitle"
+                >{% trans "Carryforward Leave Days" %} :
+                {{employee_leave.carryforward_days}}</span
+              ><br />
+              <span class="oh-kanban-card__subtitle"
+                >{% trans "Total Leave Days" %} :
+                {{employee_leave.total_leave_days}}</span
+              >
+            </div>
+          </div>
+        {% comment %} {% endif %} {% endcomment %}
+      {% endfor %}
+    </div>
+  </div>
+</div>
+{% endif %}
+{% include "generic/horilla_list.html" %}
+</div>
+<script>
+    $('#penaltyModalBody').submit(function(e) {
+        $(".reload-record").click()
+        });
+    
+    $("#LeaveForm [type=submit]").hide();
+    var button = `
+    <div class="oh-modal__dialog-footer p-0 mt-3">
+      <button id="buttonID" class="oh-btn oh-btn--secondary oh-btn--shadow">
+        Save
+      </button>
+    </div>
+    `;
+    $("#LeaveForm .row").after(button);
+
+{% if "recruitment"|app_installed %}
+    $(document).ready(function () {
+        $("#buttonID").on("click", function () {
+            event.preventDefault();
+            event.stopPropagation();
+            var startDate = $("#LeaveForm [name = start_date]").val();
+            var endDate = $("#LeaveForm [name = end_date]").val();
+            var employee = $("#LeaveForm [name = employee_id]").val();
+
+            $.ajax({
+                type: "GET",
+                url: "{% url 'check-interview-conflicts' %}",
+                data: {
+                    start_date: startDate,
+                    end_date: endDate,
+                    employee_id: employee,
+                },
+                success: function (response) {
+                    var interviews = response.interviews;
+
+                    title = "Leave Request Alert.";
+                    var content = `<div>
+            <p>${employee} has interview in the requested date.</p>
+            <ol style="margin-left:5%">`;
+                    interviews.forEach(function (interview, index) {
+                        content += `<li style="text-align:left; font-size:14px">${interview}</li>`;
+                    });
+                    content += `</ol>
+            <p style="font-weight:700">Are you sure you want to proceed with the request?</p>
+          </div>`;
+
+                    if (interviews.length != 0) {
+                        Swal.fire({
+                            title: title,
+                            icon: "info",
+                            html: content,
+                            showCancelButton: true,
+                            confirmButtonColor: "#008000",
+                            cancelButtonColor: "#d33",
+                            confirmButtonText: "Confirm",
+                        }).then(function (result) {
+                            if (result.isConfirmed) {
+                                $("#LeaveForm [type=submit]").click();
+                            }
+                        });
+                    } else {
+                        $("#LeaveForm [type=submit]").click();
+                    }
+                },
+            });
+        });
+    });
+{% endif %}
+
+    function leaveRequestConfirm(message,event) {
+      // Define the select box options
+        event.preventDefault()
+        var question = '<p> Would you like to proceed?</p>'
+        html = '<p>' + message + '</p>'
+        html = html + "<div align='center'>" +question + "</div>"
+        Swal.fire({
+          html: html,
+          icon: 'question',
+          showCancelButton: true,
+          confirmButtonColor: '#008000',
+          cancelButtonColor: '#d33',
+          confirmButtonText: "Confirm",
+          cancelButtonText: "Close"
+        }).then((result) => {
+          if (result.isConfirmed) {
+            if (event.target.tagName.toLowerCase() === "form") {
+              event.target.submit();
+            } else if (event.target.tagName.toLowerCase() === "a") {
+              window.location.href = event.target.href;
+            }
+            else{
+              console.log(target)
+              console.log(event.target.href)
+            }
+          } else {
+          }
+        });
+    
+    }
+  </script>
+{% comment %} function typeChange(selectElement) {
+        var selectedLeavetype =selectElement.val()
+        let parentForm = selectElement.parents().closest("form")
+        var employeeId = parentForm.find('[name = employee_id]').val()
+        $.ajax({
+          type: "post",
+          url: "{% url 'employee-leave-details' %}",
+          data: {
+        csrfmiddlewaretoken: getCookie("csrftoken"),
+        "leave_type":selectedLeavetype,
+        "employee_id":employeeId,
+      },
+      success: function (response) {
+    
+        // Assuming parentForm is a reference to the form containing the element to update
+          var messageDiv = parentForm.find(".leave-message");
+    
+          // Check if the messageDiv already exists, if not create it
+          if (!messageDiv.length) {
+            messageDiv = $("<div class='leave-message'></div>");
+            parentForm.find(".oh-modal__dialog-body").prepend(messageDiv);
+          }
+          // Checking leave type is selected in the form or not
+          if (response.leave_count === ''){
+            messageDiv.hide()
+          }
+          else if (response.leave_count === 0.0){
+            messageDiv.show()
+            messageDiv.text("Available Leaves :  " + response.leave_count);
+            messageDiv.css({
+              'background-color': 'rgb(229 79 56 / 17%)',
+              'border': '2px solid hsl(8,77%,56%)',
+              'border-radius': '18px',
+              'padding': '10px',
+              'font-weight': 'bold',
+              'margin-bottom': '15px',
+              'width': '35%'
+            });
+          }
+          else{
+            messageDiv.show()
+            // Set the message content and apply styling
+            messageDiv.text("Available Leaves :  " + response.leave_count);
+            messageDiv.css({
+              'background-color': '#dff0d8',
+              'border': '2px solid #3c763d',
+              'border-radius': '18px',
+              'padding': '10px',
+              'font-weight': 'bold',
+              'margin-bottom': '15px',
+              'width': '35%'
+            });
+          }
+    
+        }
+      });
+    } {% endcomment %}
diff --git a/leave/templates/cbv/leave_allocation_request/action_column.html b/leave/templates/cbv/leave_allocation_request/action_column.html
new file mode 100644
index 000000000..1c839fa4b
--- /dev/null
+++ b/leave/templates/cbv/leave_allocation_request/action_column.html
@@ -0,0 +1,34 @@
+{% load i18n %}
+<div  onclick="event.stopPropagation()">
+    <div class="oh-btn-group">
+        {% if instance.status ==  'requested' %}
+            <button
+                class="oh-btn oh-btn--light-bkg w-50"
+               title="{% trans 'Edit' %}"
+                data-toggle="oh-modal-toggle"
+                data-target="#genericModal"
+                hx-get="{% url 'leave-allocation-request-update' instance.id %}?instance_ids={{instance.ordered_ids}}"
+                hx-target="#genericModalBody">
+                <ion-icon name="create-outline"></ion-icon>
+            </button>
+        {% else %}
+            <button
+                class="oh-btn oh-btn--light-bkg w-50" disabled>
+                <ion-icon name="create-outline" ></ion-icon>
+            </button></td>
+        {% endif %}
+        {% if instance.status ==  'requested' %}
+            <button class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-50" id="delete-link"
+                hx-confirm="{% trans 'Are you sure you want to delete ?' %}"
+                hx-post="{% url 'leave-allocation-request-delete' instance.id %}?{{pd}}"
+                hx-target="#leave-allocation"
+                title="{% trans 'Delete' %}">
+                <ion-icon name="trash-outline"></ion-icon>
+        </button>
+        {% else %}
+            <button class="oh-btn oh-btn--light-bkg w-50" disabled>
+                <ion-icon name="trash-outline"></ion-icon>
+            </button></td>
+        {% endif %}
+    </div>
+</div>
\ No newline at end of file
diff --git a/leave/templates/cbv/leave_allocation_request/attachment.html b/leave/templates/cbv/leave_allocation_request/attachment.html
new file mode 100644
index 000000000..7d3c93539
--- /dev/null
+++ b/leave/templates/cbv/leave_allocation_request/attachment.html
@@ -0,0 +1,8 @@
+{% load i18n %}
+{% if instance.attachment %}
+            <a href="{{instance.attachment.url}}" target="_blank" class="oh-timeoff-modal__download-link justify-content-center" >
+                <ion-icon class="me-1" name="download-outline" ></ion-icon>
+                <span class="oh-timeoff-modal__download-link-text " ></span>
+                {% trans "View attachment" %}
+            </a>
+{% endif %}
\ No newline at end of file
diff --git a/leave/templates/cbv/leave_allocation_request/comment.html b/leave/templates/cbv/leave_allocation_request/comment.html
new file mode 100644
index 000000000..a34f3f6b7
--- /dev/null
+++ b/leave/templates/cbv/leave_allocation_request/comment.html
@@ -0,0 +1,7 @@
+{% load i18n %}
+<div onclick="event.stopPropagation();">
+    <button type="button" hx-get="{% url 'allocation-request-view-comment' instance.id %}" hx-target="#commentContainer" data-target = '#allocationactivitySidebar' title="View Comment"
+        class="oh-btn oh-btn--light oh-activity-sidebar__open w-100" title="{% trans 'Add / View Comment' %}" style="flex: 1 0 auto; width:20px;height: 40.68px; padding: 0;">
+        <ion-icon name="newspaper-outline" role="img" class="md hydrated" aria-label="newspaper outline"></ion-icon>
+    </button>
+</div>
\ No newline at end of file
diff --git a/leave/templates/cbv/leave_allocation_request/confirmations.html b/leave/templates/cbv/leave_allocation_request/confirmations.html
new file mode 100644
index 000000000..844034887
--- /dev/null
+++ b/leave/templates/cbv/leave_allocation_request/confirmations.html
@@ -0,0 +1,37 @@
+{% load i18n %}{% load basefilters %}
+<div  onclick="event.stopPropagation()">
+    <div class="oh-btn-group" >
+
+        {% if perms.leave.change_leaveallocationrequest or request.user|is_reportingmanager %}
+            {% if instance.status == 'requested' %}
+                <a type="submit" href="{% url 'leave-allocation-request-approve' instance.id %}"
+                    onclick="return confirm('{% trans "Do you want to approve this request?" %}')"
+                    title="{% trans 'Approve' %}"
+                    class="oh-btn oh-btn--success w-100">
+                    <ion-icon class="me-1" name="checkmark-outline"></ion-icon>
+                </a>
+            {% else %}
+                <a type="submit" href="#" title="{% trans 'Approve' %}"
+                    class="oh-btn oh-btn--success oh-btn--disabled w-100">
+                    <ion-icon class="me-1" name="checkmark-outline"></ion-icon>
+                </a>
+            {% endif %}
+            {% if instance.status == 'requested' or instance.status == 'approved' %}
+                <a type="submit" data-toggle="oh-modal-toggle"
+                    data-target="#rejectModal"
+                    hx-get="{% url 'leave-allocation-request-reject' instance.id %}"
+                    hx-target="#rejectTarget"
+                    title="{% trans 'Reject' %}"
+                    class="oh-btn oh-btn--danger w-100">
+                    <ion-icon class="me-1" name="close-circle-outline"></ion-icon>
+                </a>
+            {% else %}
+                <a type="submit" href="#" title="{% trans 'Reject' %}"
+                    class="oh-btn oh-btn--danger oh-btn--disabled
+                    w-100" >
+                    <ion-icon class="me-1" name="close-circle-outline"></ion-icon>
+                </a>
+            {% endif %}
+        {% endif %}
+    </div>
+</div>
\ No newline at end of file
diff --git a/leave/templates/cbv/leave_allocation_request/detail_action.html b/leave/templates/cbv/leave_allocation_request/detail_action.html
new file mode 100644
index 000000000..65a807076
--- /dev/null
+++ b/leave/templates/cbv/leave_allocation_request/detail_action.html
@@ -0,0 +1,48 @@
+{% load i18n %}
+
+    <div class="oh-btn-group" style="width: 100%;">
+        
+            {% if instance.status ==  'requested' %}
+                <button
+                    class="oh-btn oh-btn--info w-100 "
+                    title="{% trans 'Edit' %}"
+                    data-toggle="oh-modal-toggle"
+                    data-target="#genericModal"
+                    hx-get="{% url 'leave-allocation-request-update' instance.id %}"
+                    hx-target="#genericModalBody">
+                    <ion-icon name="create-outline" role="img"
+                    class="md hydrated" aria-label="create outline">
+                    </ion-icon>{% trans "Edit" %}
+                </button>
+            {% else %}
+                <button
+                    class="oh-btn oh-btn--info  w-100" disabled>
+                    <ion-icon name="create-outline" ></ion-icon>
+                </button></td>
+            {% endif %}
+            {% if instance.status  ==  'requested' %}
+            
+                <button class="oh-btn oh-btn--danger w-100" id="delete-link"
+                hx-confirm="{% trans 'Are you sure you want to delete ?' %}"
+                hx-post="{% url 'leave-allocation-request-delete' instance.id %}?instances_ids={{ request.GET.instance_ids }}"
+                hx-target="#genericModalBody"
+                title="{% trans 'Delete' %}">
+                <ion-icon name="trash-outline" role="img"
+                class="md hydrated"
+                aria-label="create outline"></ion-icon>
+                {% trans "Delete" %}
+        </button>
+            {% else %}
+                <button class="oh-btn oh-btn--danger  w-100" disabled>
+                    <ion-icon name="trash-outline"></ion-icon>
+                </button></td>
+            {% endif %}
+
+            </div>
+{% if request.GET.deleted %}
+    <script>
+        console.log($(".reload-record"))
+    $(".reload-record").click()
+    $("#reloadMessagesButton").click()
+    </script>
+{% endif %}
diff --git a/leave/templates/cbv/leave_allocation_request/filter.html b/leave/templates/cbv/leave_allocation_request/filter.html
new file mode 100644
index 000000000..b2af6050f
--- /dev/null
+++ b/leave/templates/cbv/leave_allocation_request/filter.html
@@ -0,0 +1,56 @@
+{% load i18n %}
+<div class="oh-dropdown__filter-body">
+    <div class="oh-accordion">
+        <div
+            class="oh-accordion-header"
+            onclick="event.stopImmediatePropagation();$(this).parent().toggleClass('oh-accordion--show');"
+        >
+            {% trans "Leave Allocation Request" %}
+        </div>
+        <div class="oh-accordion-body">
+            <div class="row">
+                <div class="col-sm-12 col-md-12 col-lg-12">
+                    <div class="oh-input-group">
+                        <label class="oh-label">{% trans "Leave Type" %}</label>
+                        {{form.leave_type_id}}
+                    </div>
+                </div>
+                <div class="col-sm-12 col-md-12 col-lg-6">
+                    <div class="oh-input-group">
+                        <label class="oh-label">{% trans "Employee" %}</label>
+                        {{form.employee_id}}
+                    </div>
+                </div>
+                <div class="col-sm-12 col-md-12 col-lg-6">
+                    <div class="oh-input-group">
+                        <label class="oh-label">{% trans "Created By" %}</label>
+                        {{form.created_by}}
+                    </div>
+                </div>
+                <div class="col-sm-12 col-md-12 col-lg-6">
+                    <div class="oh-input-group">
+                        <label class="oh-label"
+                            >{% trans "Requested days Up To" %}</label
+                        >
+                        {{form.number_of_days_up_to}}
+                    </div>
+                </div>
+                <div class="col-sm-12 col-md-12 col-lg-6">
+                    <div class="oh-input-group">
+                        <label class="oh-label"
+                            >{% trans "Requested days More Than " %}</label
+                        >
+                        {{form.number_of_days_more_than}}
+                    </div>
+                </div>
+
+                <div class="col-sm-12 col-md-12">
+                    <div class="oh-input-group">
+                        <label class="oh-label">{% trans "Status" %}</label>
+                        {{form.status}}
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/leave/templates/cbv/leave_allocation_request/history.html b/leave/templates/cbv/leave_allocation_request/history.html
new file mode 100644
index 000000000..8aba2a7f3
--- /dev/null
+++ b/leave/templates/cbv/leave_allocation_request/history.html
@@ -0,0 +1,24 @@
+{% load i18n %}
+{% if instance.allocate_tracking and instance.status == 'approved' %}
+    
+        <div class="oh-timeoff-modal__stats w-100 mt-3 mb-3">
+            <div class="oh-timeoff-modal__stat">
+                <span class="oh-timeoff-modal__stat-title">{% trans "History" %}</span>
+                <div class="oh-checkpoint-badge oh-checkpoint-badge--secondary">
+                    <div class="oh-timeoff-modal__stat-count">
+                        <span style="color: #665d5d;">{% trans "Requested days" %} : {{instance.allocate_tracking.old}}</span>
+                        <br >
+                        <img src="/static/images/ui/arrow-right-line.svg" style="width: 100px; height: 20px;" class="oh-progress_arrow">
+                        <br >
+                        <span style="color: #35b835;"> {% trans "Allocated days" %} : {{instance.allocate_tracking.new}}</span>
+                    </div>
+                    <div class="oh-timeoff-modal__stat-count"></div>
+                </div>
+            </div>
+        </div>
+    
+    {% endif %}
+
+  
+        
+    
\ No newline at end of file
diff --git a/leave/templates/cbv/leave_allocation_request/leave_allocation_request.html b/leave/templates/cbv/leave_allocation_request/leave_allocation_request.html
new file mode 100644
index 000000000..5bd92f565
--- /dev/null
+++ b/leave/templates/cbv/leave_allocation_request/leave_allocation_request.html
@@ -0,0 +1,127 @@
+
+
+
+{% extends "index.html" %}
+{% load i18n %}{% load static %}
+
+
+{% block content %}
+<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+
+
+
+
+<meta name="csrf-token" content="{{ csrf_token }}">
+
+
+
+<style>
+
+    .oh-modal_close--custom {
+		border: none;
+		background: none;
+		font-size: 1.5rem;
+		opacity: 0.7;
+		position: absolute;
+		top: 25px;
+		right: 15px;
+	}
+	
+.approved--dot{
+  background-color:yellowgreen;
+}
+.rejected--dot{
+  background-color:red;
+}
+.requested--dot{
+    background-color: rgb(103, 171, 238);
+}
+
+.status-approved{
+  border-left: 3.4px solid yellowgreen !important;
+  border-radius: 4px 0 0 4px;
+
+}
+.status-rejected {
+
+  border-left: 3.4px solid red !important;
+  border-radius: 4px 0 0 4px;
+
+
+}
+.status-requested {
+
+  border-left: 3.4px solid rgb(103, 171, 238) !important;
+  border-radius: 4px 0 0 4px;
+
+}
+
+.diff-cell {
+    background: rgba(255, 166, 0, 0.158);
+}
+
+
+
+
+
+</style>
+
+<div hx-get="{% url "nav-leave-allocation-request" %}" hx-trigger="load">
+</div>  
+
+
+{% include "generic/components.html" %}
+
+
+<div
+    class="oh-checkpoint-badge mb-2"
+    id="selectedInstances"
+    data-ids="[]"
+    data-clicked=""
+    style="display: none"
+  ></div>
+
+  
+  <div 
+  class="oh-wrapper" 
+  hx-get="{% url "leave-allocation-request-filter"  %}?{{request.GET.urlencode}}" 
+  id="listContainer">
+  <div class="animated-background">
+  </div>
+</div>
+
+
+
+<div class="oh-activity-sidebar" id="allocationactivitySidebar" style="z-index:1000;">
+	<div class="oh-activity-sidebar__body" id="commentContainer">
+	</div>
+</div>
+
+
+
+<div
+	class="oh-modal"
+	id="rejectModal"
+	role="dialog"
+	aria-labelledby="rejectDialogModal"
+	aria-hidden="true"
+>
+	<div class="oh-modal__dialog" id="rejectTarget"></div>
+</div>
+
+
+<script src="{% static 'cbv/shift_request/shift_request_bulk_actions.js' %}"></script>
+<script>
+    $(document).ready(function () {
+		$(".oh-modal_close--custom").click(function () {
+			$(this).closest(".oh-modal").removeClass("oh-modal--show");
+		});
+		$("#id_field").on("change", function () {
+			$(".filterButton")[0].click();
+		});
+	});
+</script>
+ 
+ 
+{% endblock content %}
\ No newline at end of file
diff --git a/leave/templates/cbv/leave_allocation_request/leave_detail_action.html b/leave/templates/cbv/leave_allocation_request/leave_detail_action.html
new file mode 100644
index 000000000..61a1f24fc
--- /dev/null
+++ b/leave/templates/cbv/leave_allocation_request/leave_detail_action.html
@@ -0,0 +1,39 @@
+{% load i18n %} {% load basefilters %}
+{% if perms.leave.Change_leaveallocationrequest or request.user|is_reportingmanager %}
+                    {% if instance.status == 'requested' %}
+                        <a
+                            href="{% url 'leave-allocation-request-approve' instance.id %}"
+                            class="oh-btn oh-btn--success w-100"
+                            title="{% trans 'Approve' %}"                        >
+                            <ion-icon class="me-1 " name="checkmark-outline"></ion-icon>
+                            {% trans "Approve" %}
+                        </a>
+                    {% else %}
+                        <a href="" class="oh-btn oh-btn--success oh-btn--disabled w-100"
+                            title="{% trans 'Approved' %}"
+                            onclick="event.preventDefault()">
+                            <ion-icon class="me-1" name="checkmark-outline"></ion-icon>
+                            {% trans "Approve" %}
+                        </a>
+                    {% endif %}
+                    {% if instance.status == 'requested' or instance.status == 'approved' %}
+                        <a
+                            hx-get="{% url 'leave-allocation-request-reject' instance.id %}"
+                            data-target="{% if dashboard == 'true' %}#bigModal {% else %}#rejectModal {% endif %}"
+                            hx-target="{% if dashboard == 'true' %}#bigModalTarget {% else %}#rejectTarget{% endif %}"
+                            class="oh-btn oh-btn--danger w-100"
+                            data-toggle="oh-modal-toggle"
+                            title="{% trans 'Reject' %}"
+                        >
+                            <ion-icon class="me-1" name="close-circle-outline"></ion-icon>
+                            {% trans "Reject" %}
+                        </a>
+                    {% else %}
+                        <a href="" class="oh-btn oh-btn--danger oh-btn--disabled w-100"
+                            title="{% trans 'Rejected' %}"
+                            onclick="event.preventDefault()">
+                            <ion-icon class="me-1" name="close-circle-outline"></ion-icon>
+                            {% trans "Reject" %}
+                        </a>
+                    {% endif %}
+                {% endif %}
\ No newline at end of file
diff --git a/leave/templates/cbv/leave_allocation_request/main.html b/leave/templates/cbv/leave_allocation_request/main.html
new file mode 100644
index 000000000..38e23102d
--- /dev/null
+++ b/leave/templates/cbv/leave_allocation_request/main.html
@@ -0,0 +1,3 @@
+<div id="leave-allocation">
+    {% include "generic/horilla_tabs.html" %}
+</div>
diff --git a/leave/templates/cbv/leave_allocation_request/reject.html b/leave/templates/cbv/leave_allocation_request/reject.html
new file mode 100644
index 000000000..7e72a1225
--- /dev/null
+++ b/leave/templates/cbv/leave_allocation_request/reject.html
@@ -0,0 +1,11 @@
+{% load i18n %}
+{% if instance.reject_reason %}
+            {% if instance.status == "rejected" %}
+                <div class="oh-timeoff-modal__stats w-100 mt-3 p-2 row-status--red ">
+                    <div class="oh-timeoff-modal__stat">
+                        <span class="oh-timeoff-modal__stat-title">{% trans "Reason for Rejection" %}</span>
+                        <div class="oh-timeoff-modal__stat-description">{{instance.reject_reason}}</div>
+                    </div>
+                </div>
+            {% endif %}
+        {% endif %}
\ No newline at end of file
diff --git a/leave/templates/cbv/leave_requests/actions_col.html b/leave/templates/cbv/leave_requests/actions_col.html
new file mode 100644
index 000000000..ebace8715
--- /dev/null
+++ b/leave/templates/cbv/leave_requests/actions_col.html
@@ -0,0 +1,46 @@
+{%load i18n %}
+{% load basefilters %}
+<div onclick="event.stopPropagation()">
+    <div class="oh-btn-group">
+        {% if request.user|is_reportingmanager or perms.attendance.chanage_penaltyaccount or request.user|is_leave_approval_manager %}
+        <button
+            data-toggle="oh-modal-toggle"
+            data-target="#penaltyModal"
+            hx-target="#penaltyModalBody"
+            hx-get="{% url "leave-cut-penalty" instance.id %}"
+            type='submit'
+            class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100"
+            title="{% trans 'Penalty' %}">
+            <ion-icon name="information-circle-outline"></ion-icon>
+        </button>
+        {% endif %}
+        {% if request.user|is_reportingmanager or perms.leave.change_leaverequest or perms.leave.delete_leaverequest or request.user|is_leave_approval_manager %}
+        {% if instance.status == 'requested' %}
+            <button  class="oh-btn oh-btn--light-bkg w-100" title="{% trans 'Edit' %}" data-toggle="oh-modal-toggle"
+                data-target="#genericModal" hx-get="{% url 'request-update' instance.id %}?instance_ids={{instance.ordered_ids}}"
+                hx-target="#genericModalBody"><ion-icon name="create-outline"></ion-icon></button>
+                {% else %}
+                <button class="oh-btn oh-btn--light-bkg w-50" disabled>
+                  <ion-icon name="create-outline"></ion-icon>
+                </button>
+          
+          {% endif %}
+          {% if instance.status == 'requested' %}
+            <a class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100"
+            title="{% trans 'Delete' %}" id="delete-link"
+            hx-confirm="{% trans 'Are you sure you want to delete?' %}"
+            hx-get="{% url 'request-delete' instance.id %}"
+            hx-target="#leaveRequest"
+            >
+            <ion-icon name="trash-outline"></ion-icon>
+        </a>  
+          {% else %}
+            <button class="oh-btn oh-btn--light-bkg w-50" disabled>
+              <ion-icon name="trash-outline"></ion-icon>
+            </button>
+          {% endif %}
+          {% endif %}
+    </div>
+</div>
+
+
diff --git a/leave/templates/cbv/leave_requests/clashed_due_to.html b/leave/templates/cbv/leave_requests/clashed_due_to.html
new file mode 100644
index 000000000..220e71914
--- /dev/null
+++ b/leave/templates/cbv/leave_requests/clashed_due_to.html
@@ -0,0 +1,11 @@
+{% load i18n %}
+{% if instance in clashed_due_to_department and instance in clashed_due_to_job_position %}
+    <div align="center" style="background-color: rgba(229, 79, 56, 0.13); border: 1.5px solid rgb(229, 79, 56); border-radius: 12px; padding: 7px; font-weight: bold; font-size: 12px; width: 99%;">{% trans "Same Department & Job Position" %}</div>
+{% elif instance in clashed_due_to_department %}
+    <div align="center" style="background-color: rgb(229 56 226 / 13%); border: 1.5px solid rgb(229, 79, 56); border-radius: 12px; padding: 7px; font-weight: bold; font-size: 1em; width: 99%;">{% trans "Same Department" %}</div>
+{% elif instance in clashed_due_to_job_position %}
+    <div align="center" style="background-color: rgb(56 89 229 / 13%); border: 1.5px solid rgb(229, 79, 56); border-radius: 12px; padding: 7px; font-weight: bold; font-size: 1em; width: 99%;">{% trans "Same Job Position" %}</div>
+{% endif %}
+
+
+
diff --git a/leave/templates/cbv/leave_requests/comment_action.html b/leave/templates/cbv/leave_requests/comment_action.html
new file mode 100644
index 000000000..2b7b190ff
--- /dev/null
+++ b/leave/templates/cbv/leave_requests/comment_action.html
@@ -0,0 +1,7 @@
+{% load i18n %}
+<div onclick="event.stopPropagation();">
+    <button type="button" hx-get="{% url 'leave-request-view-comment' instance.id %}" hx-target="#commentContainer"
+      data-target = '#leaveactivitySidebar' title='{% trans "Add / View Comment" %}'  class="oh-btn oh-btn--light oh-activity-sidebar__open w-100" style="flex: 1 0 auto; width:20px;height: 40.68px; padding: 0;" onclick="event.stopPropagation()">
+      <ion-icon name="newspaper-outline" role="img" class="md hydrated" aria-label="newspaper outline"></ion-icon>
+    </button>
+</div>
\ No newline at end of file
diff --git a/leave/templates/cbv/leave_requests/confirmation.html b/leave/templates/cbv/leave_requests/confirmation.html
new file mode 100644
index 000000000..4d6dff341
--- /dev/null
+++ b/leave/templates/cbv/leave_requests/confirmation.html
@@ -0,0 +1,114 @@
+{% load i18n %}
+{% load basefilters %}
+{% if request.user.employee_get != instance.employee_id and request.user|is_reportingmanager or perms.leave.change_leaverequest or request.user|is_self_reporting_manager %}
+<div class="oh-btn-group" onclick="event.stopPropagation();">
+        {% if instance.status == 'cancelled' %}
+            {% if instance.end_date >= current_date %}
+                <button type="button" data-toggle="oh-modal-toggle"
+                    data-target="#rejectModal" hx-get="{% url 'request-cancel' instance.id %}"
+                    hx-target="#rejectForm" title="{% trans 'Approve cancellation request' %}"
+                    class="oh-btn oh-btn--warning w-100">
+                    <ion-icon class="me-1" name="checkmark-outline"></ion-icon>
+                </button>
+            {% else %}
+                <button type="button" href="#" title="{% trans 'Approve cancellation request' %}"
+                    class="oh-btn oh-btn--secondary oh-btn--disabled w-100">
+                    <ion-icon class="me-1" name="checkmark-outline"></ion-icon>
+                </button>
+            {% endif %}
+        {% else %}
+            {% if instance.is_approved and instance.status == 'requested' %}
+                <a href="{% url 'request-approve' instance.id %}" title="{% trans 'Approve' %}"
+                    class="oh-btn oh-btn--success w-100" 
+                    {% if instance.end_date.month > current_date.month %} 
+                        onclick="leaveRequestConfirm('This leave request is for the month of {{instance.start_date|date:'F'}}. Approval depends on the {{instance.employee_id.get_full_name}} having available leave days for this month.', event);" 
+                    {% else %}  
+                        onclick="return confirm('Do you really want to approve this request?');" 
+                    {% endif %}>
+                    <ion-icon class="me-1" name="checkmark-outline"></ion-icon>
+                </a>
+            {% else %}
+                <a type="button" href="#" title="{% trans 'Approve' %}"
+                    class="oh-btn oh-btn--success oh-btn--disabled w-100">
+                    <ion-icon class="me-1" name="checkmark-outline"></ion-icon>
+                </a>
+            {% endif %} 
+            {% comment %} {% if instance.is_approved and instance.status == 'requested' %}
+                <a href="{% url 'request-approve' instance.id %}" 
+                    hx-get="{% url 'request-approve' instance.id %}" 
+                    hx-confirm="{% if instance.end_date.month > current_date.month %} 
+                        'This leave request is for the month of {{ instance.start_date|date:'F' }}. Approval depends on {{ instance.employee_id.get_full_name }} having available leave days for this month.'
+                    {% else %}  
+                        'Do you really want to approve this request?' 
+                    {% endif %}"
+                    title="{% trans 'Approve' %}" 
+                    class="oh-btn oh-btn--success w-100">
+                    <ion-icon class="me-1" name="checkmark-outline"></ion-icon>
+                </a>
+            {% else %}
+                <a href="#" 
+                    class="oh-btn oh-btn--success oh-btn--disabled w-100" 
+                    title="{% trans 'Approve' %}">
+                    <ion-icon class="me-1" name="checkmark-outline"></ion-icon>
+                </a>
+            {% endif %} {% endcomment %}
+
+            {% if instance.status != 'rejected' and instance.end_date >= current_date %}
+                <a type="button" data-toggle="oh-modal-toggle"
+                    data-target="#rejectModal" hx-get="{% url 'request-cancel' instance.id %}" hx-target="#rejectForm" title="{% trans 'Reject' %}"
+                    class="oh-btn oh-btn--danger w-100">
+                    <ion-icon class="me-1" name="close-circle-outline"></ion-icon>
+                </a>
+            {% else %}
+                <a type="button" href="#" title="{% trans 'Reject' %}"
+                    class="oh-btn oh-btn--danger oh-btn--disabled w-100">
+                    <ion-icon class="me-1" name="close-circle-outline"></ion-icon>
+                </a>
+            {% endif %}
+        {% endif %}
+    </div>
+{% else %}
+    <div class="oh-btn-group" onclick="event.stopPropagation();">
+        {% if instance.status == 'cancelled' %}
+            {% if instance.end_date >= current_date %}
+                <button type="button" disabled title="{% trans 'Approve cancellation request' %}"
+                    class="oh-btn oh-btn--warning w-100">
+                    <ion-icon class="me-1" name="checkmark-outline"></ion-icon>
+                </button>
+            {% else %}
+                <button type="button" disabled title="{% trans 'Approve cancellation request' %}"
+                    class="oh-btn oh-btn--secondary oh-btn--disabled w-100">
+                    <ion-icon class="me-1" name="checkmark-outline"></ion-icon>
+                </button>
+            {% endif %}
+        {% else %}
+            {% if instance.is_approved and instance.status == 'requested' %}
+                <button type="button" disabled title="{% trans 'Approve' %}"
+                    class="oh-btn oh-btn--success w-100" 
+                    {% if instance.end_date.month > current_date.month %} 
+                        onclick="leaveRequestConfirm('This leave request is for the month of {{instance.start_date|date:'F'}}. Approval depends on the {{instance.employee_id.get_full_name}} having available leave days for this month.', event);" 
+                    {% else %}  
+                        onclick="return confirm('Do you really want to approve this request?');" 
+                    {% endif %}>
+                    <ion-icon class="me-1" name="checkmark-outline"></ion-icon>
+                </button>
+            {% else %}
+                <button type="button" disabled title="{% trans 'Approve' %}"
+                    class="oh-btn oh-btn--success oh-btn--disabled w-100">
+                    <ion-icon class="me-1" name="checkmark-outline"></ion-icon>
+                </button>
+            {% endif %}
+            {% if instance.status != 'rejected' and instance.end_date >= current_date %}
+                <button type="button" disabled title="{% trans 'Reject' %}"
+                    class="oh-btn oh-btn--danger w-100">
+                    <ion-icon class="me-1" name="close-circle-outline"></ion-icon>
+                </button>
+            {% else %}
+                <button type="button" disabled title="{% trans 'Reject' %}"
+                    class="oh-btn oh-btn--danger oh-btn--disabled w-100">
+                    <ion-icon class="me-1" name="close-circle-outline"></ion-icon>
+                </button>
+            {% endif %}
+        {% endif %}
+    </div>
+{% endif %}
diff --git a/leave/templates/cbv/leave_requests/custom_status_col.html b/leave/templates/cbv/leave_requests/custom_status_col.html
new file mode 100644
index 000000000..2605cd4bc
--- /dev/null
+++ b/leave/templates/cbv/leave_requests/custom_status_col.html
@@ -0,0 +1,13 @@
+{% load i18n %}
+{% load static %}
+{% load basefilters %}
+{% load horillafilters %}
+
+{% if instance.multiple_approvals and instance.status == 'requested' %}
+<div class="oh-checkpoint-badge oh-checkpoint-badge--secondary" title="{% for manager in instance.multiple_approvals.managers %}{{ manager }}{% if not forloop.last %} , {% endif %}{% endfor %}" style="width:120px;height:30px;">
+        {{instance.multiple_approvals.approved|length}} / {{instance.multiple_approvals.managers|length}} {% trans "Approved" %}
+      </div>
+    {% else %}
+    <div style="text-align: center;">{{ instance.get_status_display }}</div>
+
+    {% endif %}
\ No newline at end of file
diff --git a/leave/templates/cbv/leave_requests/filter.html b/leave/templates/cbv/leave_requests/filter.html
new file mode 100644
index 000000000..99afe74c3
--- /dev/null
+++ b/leave/templates/cbv/leave_requests/filter.html
@@ -0,0 +1,96 @@
+{% load i18n %}
+{% load static %}
+<div class="oh-dropdown__filter-body">
+    <div class="oh-accordion">
+        <div class="oh-accordion-header" onclick="event.stopImmediatePropagation();$(this).parent().toggleClass('oh-accordion--show');">{% trans "Leave Request" %}</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" for="{{form.employee_id.id_for_label}}">{% trans "Employee" %}</label>
+                        {{form.employee_id}}
+                      </div>
+                    <div class="oh-input-group">
+                        <label class="oh-label">{% trans "Start Date" %}</label>
+                        {{form.start_date}}
+                    </div>
+                </div>
+                <div class="col-sm-12 col-md-12 col-lg-6">
+                    <div class="oh-input-group">
+                        <label class="oh-label">{% trans "Leave Type" %}</label>
+                        {{form.leave_type_id}}
+                    </div>
+                    <div class="oh-input-group">
+                        <label class="oh-label">{% trans "End Date" %}</label>
+                        {{form.end_date}}
+                    </div>
+                </div>
+                <div class="col-sm-12 col-md-12">
+                    <div class="oh-input-group">
+                        <label class="oh-label">{% trans "Status" %}</label>
+                        {{form.status}}
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="oh-accordion">
+        <div class="oh-accordion-header">{% trans "Work Info" %}</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" for="{{form.employee_id__employee_work_info__company_id.id_for_label}}">{% trans "Company" %}</label>
+                  {{form.employee_id__employee_work_info__company_id}}
+                </div>
+                <div class="oh-input-group">
+                    <label class="oh-label" for="{{form.employee_id__employee_work_info__department_id.id_for_label}}">{% trans "Department" %}</label>
+                    {{form.employee_id__employee_work_info__department_id}}
+                  </div>
+                  <div class="oh-input-group">
+                    <label class="oh-label" for="{{form.employee_id__employee_work_info__shift_id.id_for_label}}">{% trans "Shift" %}</label>
+                    {{form.employee_id__employee_work_info__shift_id}}
+                  </div>
+                </div>
+                  <div class="col-sm-12 col-md-12 col-lg-6">
+                <div class="oh-input-group">
+                    <label class="oh-label" for="{{form.employee_id__employee_work_info__reporting_manager_id.id_for_label}}">{% trans "Reporting Manager" %}</label>
+                    {{form.employee_id__employee_work_info__reporting_manager_id}}
+                  </div>
+              <div class="oh-input-group">
+                <label class="oh-label" for="{{form.employee_id__employee_work_info__job_position_id.id_for_label}}">{% trans "Job Position" %}</label>
+                {{form.employee_id__employee_work_info__job_position_id}}
+              </div>
+              <div class="oh-input-group">
+                <label class="oh-label" for="{{form.employee_id__employee_work_info__work_type_id.id_for_label}}">{% trans "Work Type" %}</label>
+                {{form.employee_id__employee_work_info__work_type_id}}
+              </div>
+            </div>
+             
+            </div>
+          </div>
+        </div>
+      
+    <div class="oh-accordion" >
+        <div class="oh-accordion-header" onclick="event.stopImmediatePropagation();$(this).parent().toggleClass('oh-accordion--show');">{% trans "Advanced" %}</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 "From Date" %}</label>
+                        {{form.from_date}}
+                    </div>
+                </div>
+
+                <div class="col-sm-12 col-md-12 col-lg-6">
+                    <div class="oh-input-group">
+                        <label class="oh-label">{% trans "To Date" %}</label>
+                        {{form.to_date}}
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+</div>
diff --git a/leave/templates/cbv/leave_requests/form/inherit.html b/leave/templates/cbv/leave_requests/form/inherit.html
new file mode 100644
index 000000000..d142e40e1
--- /dev/null
+++ b/leave/templates/cbv/leave_requests/form/inherit.html
@@ -0,0 +1,84 @@
+{% load horillafilters %}
+<div>
+    {% include "generic/horilla_form.html" %}
+</div>
+
+<script>
+    $(document).ready(function () {
+        $("select").on("select2:select", function (e) {
+           $(".leave-message").hide();
+            $(this).closest("select")[0].dispatchEvent(new Event("change"));
+        });
+    });
+    
+        $("#createTitle").on("htmx:beforeSwap",function(e){
+            $('.available-leave-count').remove();
+        });
+</script>
+<script>
+    var test = $("#createTitle").closest("form")
+    test.find("button[type=submit]").hide();
+    var button = `
+    <div class="oh-modal__dialog-footer p-0 mt-3">
+      <button id="buttonID" class="oh-btn oh-btn--secondary oh-btn--shadow">
+        Save
+      </button>
+    </div>
+    `;
+    test.find(".d-flex").after(button);
+    {% if "recruitment"|app_installed %}
+    $(document).ready(function () {
+        $("#buttonID").on("click", function () {
+            event.preventDefault();
+            event.stopPropagation();
+            var startDate = test.find("[name=start_date]").val();
+            var endDate = test.find("[name=end_date]").val();
+            var parentForm = $(this).closest('form');
+            var employee = parentForm.find('[name="employee_id"]').val()
+            var employeeName = parentForm.find('[name="employee_id"] option:selected').text();
+            $.ajax({
+                type: "GET",
+                url: "{% url 'check-interview-conflicts' %}",
+                data: {
+                    start_date: startDate,
+                    end_date: endDate,
+                    employee_id: employee,
+                },
+                success: function (response) {
+                    var interviews = response.interviews;
+                    title = "Leave Request Alert.";
+                    var content = `<div>
+                        <p>${employeeName} has interview in the requested date.</p>
+                        <ol style="margin-left:5%">`;
+                            interviews.forEach(function (interview, index) {
+                                content += `<li style="text-align:left; font-size:14px">${interview}</li>`;
+                            });
+                            content += `</ol>
+                            <p style="font-weight:700">Are you sure you want to proceed with the request?</p>
+                        </div>`;
+                        
+                        if (interviews.length != 0) {
+                            Swal.fire({
+                                title: title,
+                                icon: "info",
+                                html: content,
+                                showCancelButton: true,
+                                confirmButtonColor: "#008000",
+                                cancelButtonColor: "#d33",
+                                confirmButtonText: "Confirm",
+                            }).then(function (result) {
+                                if (result.isConfirmed) {
+                                    test.find("[type=submit]").show();
+                                    $("#buttonID").hide();
+                                test.find("[type=submit]").click();
+                            }
+                        });
+                    } else {
+                        test.find("[type=submit]").click();
+                    }
+                },
+            });
+        });
+    });
+    {% endif %}
+</script>
\ No newline at end of file
diff --git a/leave/templates/cbv/leave_requests/leave_clash.html b/leave/templates/cbv/leave_requests/leave_clash.html
new file mode 100644
index 000000000..f359ad659
--- /dev/null
+++ b/leave/templates/cbv/leave_requests/leave_clash.html
@@ -0,0 +1,12 @@
+{% load i18n %}
+<div onclick="event.stopPropagation();">
+<div class="d-flex" style="justify-content:center;" data-target="#clashModal" data-toggle="oh-modal-toggle" hx-get="{% url 'view-clashes' instance.id %}" hx-target="#clashModalBody">
+    <i class="material-icons" style="font-size:33px;">groups</i>
+      <span
+      class="oh-badge oh-badge--secondary oh-badge--small oh-badge--round ms-1"
+      >
+        {{ instance.leave_clashes_count }}
+      </span>
+  </div>
+</div>
+
diff --git a/leave/templates/cbv/leave_requests/leave_request_detail_actions.html b/leave/templates/cbv/leave_requests/leave_request_detail_actions.html
new file mode 100644
index 000000000..98250b925
--- /dev/null
+++ b/leave/templates/cbv/leave_requests/leave_request_detail_actions.html
@@ -0,0 +1,39 @@
+{% load i18n %}
+<div class="oh-modal__button-container text-center mt-3 w-100">
+    <div class="oh-btn oh-btn-group">
+        {% if instance.is_approved and instance.status == 'requested' %}
+        <a href="{% url 'request-approve' instance.id %}" title="{% trans 'Approve' %}"
+        class="oh-btn oh-btn--success w-100" {% if instance.end_date.month > current_date.month %} onclick = "leaveRequestConfirm('This leave request is for the month of {{instance.start_date|date:'F'}}. Approval depends on the {{instance.employee_id.get_full_name}} having available leave days for this month.',event);" {% else %}  onclick = "return confirm('Do You really want to Approve this request?')"; {% endif %}>
+        <ion-icon class="me-1" name="checkmark-outline"></ion-icon>
+    </a>
+        {% else %}
+            <a type="submit" href="#" title="{% trans 'Approve' %}"
+                class="oh-btn oh-btn-group oh-btn--success oh-btn--disabled
+                w-100">
+                <ion-icon class="me-1" name="checkmark-outline"></ion-icon>
+            </a>
+        {% endif %}
+        <button data-toggle="oh-modal-toggle"
+        data-target="#penaltyModal"
+        hx-target="#penaltyModalBody"
+        hx-get="{% url 'leave-cut-penalty' instance.id %}"
+        type="submit" class="oh-btn oh-btn--info w-100" 
+        title="Penalty" id="penaltyButton">
+            <ion-icon name="information-circle-outline" role="img" class="md hydrated" aria-label="information circle outline"></ion-icon>
+        </button>
+        {% if instance.status != 'rejected' and instance.end_date >= current_date %}
+      {% comment %} {% if instance.status != 'cancelled' %} {% endcomment %}
+        <a type="submit" data-toggle="oh-modal-toggle"
+            data-target="#rejectModal" hx-get="{% url 'request-cancel' instance.id %}" hx-target="#rejectForm" title="{% trans 'Reject' %}"
+            class="oh-btn oh-btn--danger w-100">
+            <ion-icon class="me-1" name="close-circle-outline"></ion-icon>
+        </a>
+        {% else %}
+            <a type="submit" href="#" title="{% trans 'Reject' %}"
+                class="oh-btn oh-btn-group oh-btn--danger oh-btn--disabled
+                w-100" >
+                <ion-icon class="me-1" name="close-circle-outline"></ion-icon>
+            </a>
+        {% endif %}
+    </div>
+</div>
\ No newline at end of file
diff --git a/leave/templates/cbv/leave_requests/leave_request_emp_col.html b/leave/templates/cbv/leave_requests/leave_request_emp_col.html
new file mode 100644
index 000000000..ba246ee58
--- /dev/null
+++ b/leave/templates/cbv/leave_requests/leave_request_emp_col.html
@@ -0,0 +1,27 @@
+{% load i18n %}
+{% load basefilters %} 
+{% if leave_requests_with_interview %}
+    <div class="oh-profile oh-profile--md">
+        <div class="oh-profile__avatar mr-1">
+            <img src="{{instance.employee_id.get_avatar}}" class="oh-profile__image"
+                alt="" />
+        </div>
+    <span class="oh-profile__name oh-text--dark">{{instance.employee_id}}</span>
+        <span class="tooltip">
+            <span class="material-symbols-outlined" style="flex-direction: row-reverse;color:#ff9146;">
+                warning
+            </span>
+            <span class="tooltiptext fw-bold">
+              {{instance.employee_id}}&nbsp {% trans "has an interview in this requested date range." %}
+            </span>
+        </span>
+      </div>
+    {% else %}
+    <div class="oh-profile oh-profile--md">
+        <div class="oh-profile__avatar mr-1">
+            <img src="{{instance.employee_id.get_avatar}}" class="oh-profile__image"
+                alt="" />
+        </div>
+        <span class="oh-profile__name oh-text--dark">{{instance.employee_id}}</span>
+    </div>
+    {% endif %}
diff --git a/leave/templates/cbv/leave_requests/leave_requests_export.html b/leave/templates/cbv/leave_requests/leave_requests_export.html
new file mode 100644
index 000000000..645c71b23
--- /dev/null
+++ b/leave/templates/cbv/leave_requests/leave_requests_export.html
@@ -0,0 +1,160 @@
+{% load i18n %}
+<div class="oh-modal__dialog-header">
+    <h2 class="oh-modal__dialog-title" id="leaveRequestsExportLavel">
+      {% trans "Export Leave Requests" %}
+    </h2>
+    <button class="oh-modal__close" aria-label="Close">
+        <ion-icon name="close-outline"></ion-icon>
+      </button>
+<div class="oh-modal__dialog-body p-0 pt-2"
+    id="leaveRequestsExportModalBody">
+    <form
+        action="{%url 'leave-requests-info-export' %}"
+        method="get"
+        onsubmit="event.stopPropagation();$(this).parents().find('.oh-modal--show').last().toggleClass('oh-modal--show');"
+        id="leaveRequestsExportForm">
+        {% csrf_token %}
+        <div class="oh-dropdown__filter-body" id="export_attendance_form">
+            <div class="oh-accordion">
+              <div class="oh-accordion-header">{% trans "Excel columns" %}</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">
+                        <input type="checkbox" id="select-all-fields" /> {% trans "Select All" %}
+                      </label>
+                    </div>
+                  </div>
+                </div>
+                <div class="row">
+                  {% for field in export_form.selected_fields %}
+                  <div class="col-sm-12 col-md-12 col-lg-6">
+                    <div class="oh-input-group">
+                      <label class="oh-label"> {{ field }} </label>
+                    </div>
+                  </div>
+                  {% endfor %}
+                </div>
+              </div>
+            </div>
+
+  <div class="oh-accordion">
+    <div
+      class="oh-accordion-header"
+      onclick="event.stopImmediatePropagation();$(this).parent().toggleClass('oh-accordion--show');"
+    >
+      {% trans "Leave Request" %}
+    </div>
+    <div class="oh-accordion-body">
+      <div class="row">
+        <div class="col-sm-12 col-md-12 col-lg-12">
+          <div class="oh-input-group">
+            <label class="oh-label" for="{{ export_filter.form.leave_type_id.id_for_label }}">{% trans "Leave Type" %}</label>
+            {{export_filter.form.leave_type_id}}
+          </div>
+        </div>
+        <div class="col-sm-12 col-md-12 col-lg-6">
+          <div class="oh-input-group">
+            <label class="oh-label" for="{{ export_filter.form.start_date.id_for_label }}">{% trans "Start Date" %}</label>
+            {{export_filter.form.start_date}}
+          </div>
+        </div>
+
+        <div class="col-sm-12 col-md-12 col-lg-6">
+          <div class="oh-input-group">
+            <label class="oh-label" for="{{ export_filter.form.end_date.id_for_label }}">{% trans "End Date" %}</label>
+            {{export_filter.form.end_date}}
+          </div>
+        </div>
+        <div class="col-sm-12 col-md-12">
+          <div class="oh-input-group">
+            <label class="oh-label" for="{{ export_filter.form.status.id_for_label }}">{% trans "Status" %}</label>
+            {{export_filter.form.status}}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="oh-accordion">
+    <div
+      class="oh-accordion-header"
+      onclick="event.stopImmediatePropagation();$(this).parent().toggleClass('oh-accordion--show');"
+    >
+      {% trans "Work Info" %}
+    </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" for="{{ export_filter.form.employee_id__employee_work_info__company_id.id_for_label }}">{% trans "Company" %}</label>
+            {{export_filter.form.employee_id__employee_work_info__company_id}}
+          </div>
+        </div>
+        <div class="col-sm-12 col-md-12 col-lg-6">
+          <div class="oh-input-group">
+            <label class="oh-label" for="{{ export_filter.form.employee_id__employee_work_info__reporting_manager_id.id_for_label }}">{% trans "Reporting Manager" %}</label>
+            {{export_filter.form.employee_id__employee_work_info__reporting_manager_id}}
+          </div>
+        </div>
+        <div class="col-sm-12 col-md-12 col-lg-6">
+          <div class="oh-input-group">
+            <label class="oh-label" for="{{ export_filter.form.employee_id__employee_work_info__department_id.id_for_label }}">{% trans "Department" %}</label>
+            {{export_filter.form.employee_id__employee_work_info__department_id}}
+          </div>
+        </div>
+        <div class="col-sm-12 col-md-12 col-lg-6">
+          <div class="oh-input-group">
+            <label class="oh-label" for="{{ export_filter.form.employee_id__employee_work_info__job_position_id.id_for_label }}">{% trans "Job Position" %}</label>
+            {{export_filter.form.employee_id__employee_work_info__job_position_id}}
+          </div>
+        </div>
+        <div class="col-sm-12 col-md-12 col-lg-6">
+          <div class="oh-input-group">
+            <label class="oh-label" for="{{ export_filter.form.employee_id__employee_work_info__shift_id.id_for_label }}">{% trans "Shift" %}</label>
+            {{export_filter.form.employee_id__employee_work_info__shift_id}}
+          </div>
+        </div>
+        <div class="col-sm-12 col-md-12 col-lg-6">
+          <div class="oh-input-group">
+            <label class="oh-label" for="{{ export_filter.form.employee_id__employee_work_info__work_type_id.id_for_label }}">{% trans "Work Type" %}</label>
+            {{export_filter.form.employee_id__employee_work_info__work_type_id}}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="oh-accordion">
+    <div
+      class="oh-accordion-header"
+      onclick="event.stopImmediatePropagation();$(this).parent().toggleClass('oh-accordion--show');"
+    >
+      {% trans "Advanced" %}
+    </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" for="{{ export_filter.form.from_date.id_for_label }}">{% trans "From Date" %}</label>
+            {{export_filter.form.from_date}}
+          </div>
+        </div>
+
+        <div class="col-sm-12 col-md-12 col-lg-6">
+          <div class="oh-input-group">
+            <label class="oh-label" for="{{ export_filter.form.to_date.id_for_label }}">{% trans "To Date" %}</label>
+            {{export_filter.form.to_date}}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+<div class="oh-modal__dialog-footer p-0 pt-4">
+    <button class="oh-btn oh-btn--secondary  w-100">
+      {% trans "Export" %}
+    </button>
+  </div>
+</form>
+</div>
+
diff --git a/leave/templates/cbv/leave_requests/leave_requests_home.html b/leave/templates/cbv/leave_requests/leave_requests_home.html
new file mode 100644
index 000000000..2371b9f88
--- /dev/null
+++ b/leave/templates/cbv/leave_requests/leave_requests_home.html
@@ -0,0 +1,350 @@
+{% extends "index.html" %}
+{% load horillafilters %}
+{% load static %}
+{% load i18n %}
+{% block content %}
+<meta name="csrf-token" content="{{ csrf_token }}">
+<style>
+    .cancelled--dot{
+        background-color:grey;
+      }
+      .approved--dot{
+        background-color:green;
+      }
+      .rejected--dot{
+        background-color:red;
+      }
+      .requested--dot{
+        background-color:orange;
+      }
+
+      .rejected-rejected{
+        border-left: 4px solid red !important;
+        border-radius: 5px 0 0 4px;
+
+      }
+     .cancelled-cancelled {
+        border-left: 4px solid grey !important;
+        border-radius: 5px 0 0 4px;
+
+      }
+      .requested-requested{
+        border-left: 4px solid orange !important;
+        border-radius: 5px 0 0 4px;
+
+      }
+     .approved-approved {
+        border-left: 4px solid yellowgreen !important;
+        border-radius: 5px 0 0 4px;
+
+      }
+      .delete{
+        color = hsl(1, 100%, 61%) !important;
+      }
+        .diff-cell {
+            background: rgba(255, 166, 0, 0.158);
+        }
+        .tooltip {
+            position: relative;
+            display: inline-block; /* Ensures that the tooltip container doesn't stretch to the full width */
+        }
+
+        .tooltip .tooltiptext {
+            visibility: hidden;
+            width: auto; /* Allow the tooltip width to adjust based on content */
+            max-width: auto; /* Limit the maximum width of the tooltip to prevent it from overflowing */
+            background-color: hsl(8,77%,56%);
+            color: white;
+            text-align: center;
+            border-radius: 6px;
+            padding: 5px;
+            position: absolute;
+            z-index: 1;
+            bottom: 5%;
+            left: 50%;
+            transform: translateX(5%);
+            opacity: 0;
+            transition: opacity 0.3s;
+            white-space: nowrap; /* Prevents the text from wrapping */
+            overflow: hidden; /* Hides any overflowed content */
+            font-size:15px;
+        }
+
+        .tooltip:hover .tooltiptext {
+            visibility: visible;
+            opacity: 1;
+        }
+    </style>
+
+<div hx-get="{% url "leave-requests-nav" %}?{{request.GET.urlencode}}" hx-trigger="load">
+</div>
+
+{% include "generic/components.html" %}
+<div class="oh-checkpoint-badge mb-2" id="selectedInstances" data-ids="[]" data-clicked="" style="display: none">
+</div>
+
+
+<div class="oh-wrapper" hx-get="{% url "request-filter" %}?{{request.GET.urlencode}}" hx-trigger="load"
+  id="listContainer">
+  <div class="animated-background">
+</div>
+</div>
+
+
+<div class="oh-activity-sidebar" id="leaveactivitySidebar" style="z-index:1000;">
+    <div class="oh-activity-sidebar__body" id="commentContainer">
+    </div>
+  </div>
+
+
+  <div class="oh-modal" id="clashViewModal" role="dialog" aria-hidden="true" style="z-index:99;">
+    <div class="oh-modal__dialog" style="max-width: 900px;">
+      <div class="oh-modal__dialog-header">
+        <h3 class="oh-main__titlebar-title fw-bold ">{% trans "Clashed Leave Requests" %}</h3>
+        <button class="oh-modal__close" aria-label="Close">
+          <ion-icon name="close-outline"></ion-icon>
+        </button>
+      </div>
+      <div class="oh-modal__dialog-body" id="clashViewModalBody" style="overflow-x:auto;"></div>
+    </div>
+  </div>
+
+
+
+  <div
+  class="oh-modal"
+  id="clashModal"
+  role="dialog"
+  aria-labelledby="clashModal"
+  aria-hidden="true" style="z-index:99;"
+>
+<div class="oh-modal__dialog" style="max-width: 900px;">
+<div class="oh-modal__dialog-header" onclick="event.stopPropagation();">
+    <h3 class="oh-main__titlebar-title fw-bold ">{% trans "Clashed Leave Requests" %}</h3>
+    <button type="button" class="oh-modal__close--custom" onclick="$(this).closest('.oh-modal--show').removeClass('oh-modal--show')" aria-label="Close">
+      <ion-icon name="close-outline" role="img" class="md hydrated" aria-label="close outline"></ion-icon>
+  </button>
+</div>
+  <div class="oh-modal__dialog-body" id="clashModalBody" style="overflow-x:auto;"></div>
+</div>
+</div>
+
+
+  <div class="oh-modal" id="penaltyViewModal" role="dialog" aria-hidden="true">
+    <div class="oh-modal__dialog" style="max-width: 900px">
+      <div class="oh-modal__dialog-header">
+        <button type="button" class="oh-modal__close" aria-label="Close"><ion-icon name="close-outline"></ion-icon></button>
+      </div>
+      <div class="oh-modal__dialog-body" id="penaltyViewModalBody" style="overflow-x:auto;"></div>
+    </div>
+  </div>
+  <div class="oh-modal" id="penaltyModal" role="dialog" aria-hidden="true">
+    <div class="oh-modal__dialog" style="max-width: 596px" id="penaltyModalBody"></div>
+  </div>
+
+
+<div class="oh-modal" id="rejectModal" role="dialog" aria-labelledby="rejectModal" aria-hidden="true">
+  <div class="oh-modal__dialog">
+    <div class="oh-modal__dialog-header">
+      <h2 class="oh-modal__dialog-title" id="editModal1ModalLabel">
+        {% trans "Rejection" %}
+      <button class="oh-modal_close--custom"
+        onclick="$('#rejectModal').removeClass('oh-modal--show');"
+        aria-label="Close" style="margin-left:80%; border:none; background:none;">
+        <ion-icon name="close-outline"></ion-icon>
+      </button>
+    </h2>
+    </div>
+    <div class="oh-modal__dialog-body" id="rejectForm"></div>
+  </div>
+</div>
+
+<div class="oh-wrapper" id="leaveRequest">
+</div>
+
+<span id="bulkApproveSpan" hx-post="{% url 'leave-requests-bulk-approve' %}" hx-target="#leaveRequest"></span>
+
+
+<script src="{% static 'cbv/leave_requests/leave_requests.js' %}"></script>
+<script>
+  $('#penaltyModalBody').submit(function(e) {
+              $(".reload-record").click()
+              });
+            </script>
+
+  <script>
+              $("#LeaveForm [type=submit]").hide();
+              var button = `
+              <div class="oh-modal__dialog-footer p-0 mt-3">
+                <button id="buttonID" class="oh-btn oh-btn--secondary oh-btn--shadow">
+                  Save
+                </button>
+              </div>
+              `;
+              $("#LeaveForm .row").after(button);
+
+{% if "recruitment"|app_installed %}
+  $(document).ready(function () {
+                  $("#buttonID").on("click", function () {
+                      event.preventDefault();
+                      event.stopPropagation();
+                      var startDate = $("#LeaveForm [name = start_date]").val();
+                      var endDate = $("#LeaveForm [name = end_date]").val();
+                      var employee = $("#LeaveForm [name = employee_id]").val();
+
+                      $.ajax({
+                          type: "GET",
+                          url: "{% url 'check-interview-conflicts' %}",
+                          data: {
+                              start_date: startDate,
+                              end_date: endDate,
+                              employee_id: employee,
+                          },
+                          success: function (response) {
+                              var interviews = response.interviews;
+
+                              title = "Leave Request Alert.";
+                              var content = `<div>
+                      <p>${employee} has interview in the requested date.</p>
+                      <ol style="margin-left:5%">`;
+                              interviews.forEach(function (interview, index) {
+                                  content += `<li style="text-align:left; font-size:14px">${interview}</li>`;
+                              });
+                              content += `</ol>
+                      <p style="font-weight:700">Are you sure you want to proceed with the request?</p>
+                    </div>`;
+
+                              if (interviews.length != 0) {
+                                  Swal.fire({
+                                      title: title,
+                                      icon: "info",
+                                      html: content,
+                                      showCancelButton: true,
+                                      confirmButtonColor: "#008000",
+                                      cancelButtonColor: "#d33",
+                                      confirmButtonText: "Confirm",
+                                  }).then(function (result) {
+                                      if (result.isConfirmed) {
+                                          $("#LeaveForm [type=submit]").click();
+                                      }
+                                  });
+                              } else {
+                                  $("#LeaveForm [type=submit]").click();
+                              }
+                          },
+                      });
+                  });
+              });
+
+              {% endif %}
+
+              function leaveRequestConfirm(message,event) {
+                // Define the select box options
+                  event.preventDefault()
+                  var question = '<p> Would you like to proceed?</p>'
+                  html = '<p>' + message + '</p>'
+                  html = html + "<div align='center'>" +question + "</div>"
+                  Swal.fire({
+                    html: html,
+                    icon: 'question',
+                    showCancelButton: true,
+                    confirmButtonColor: '#008000',
+                    cancelButtonColor: '#d33',
+                    confirmButtonText: "Confirm",
+                    cancelButtonText: "Close"
+                  }).then((result) => {
+                    if (result.isConfirmed) {
+                      if (event.target.tagName.toLowerCase() === "form") {
+                        event.target.submit();
+                      } else if (event.target.tagName.toLowerCase() === "a") {
+                        window.location.href = event.target.href;
+                      }
+                      else{
+                        console.log(target)
+                        console.log(event.target.href)
+                      }
+                    } else {
+                    }
+                  });
+
+              }
+
+
+    function employeeleaveChange(selectElement) {
+                var employeeId = $('#id_employee_id').val()
+                let parentForm = selectElement.parents().closest("form")
+                var leavetypeId = parentForm.find('[name = leave_type_id]').val()
+                var start_date = parentForm.find('[name = start_date_id]').val()
+                $.ajax({
+                  type: "post",
+                  url: "/leave/employee-leave-details",
+                  data: {
+                  csrfmiddlewaretoken: getCookie("csrftoken"),
+                  "leave_type":leavetypeId,
+                  "employee_id":employeeId,
+                  "date":start_date,
+                  },
+                  success: function (response) {
+
+                    // Assuming parentForm is a reference to the form containing the element to update
+                    var messageDiv = parentForm.find(".leave-message");
+
+                    // Check if the messageDiv already exists, if not create it
+                    if (!messageDiv.length) {
+                      messageDiv = $("<div class='leave-message'></div>");
+                      parentForm.find(".oh-modal__dialog-body").prepend(messageDiv);
+                    }
+                    // Checking leave type is selected in the form or not
+                    if (response.leave_count != '' && response.employee != ''){
+                      messageDiv.show()
+                      messageDiv.text("Available Leaves :  " + response.leave_count);
+                      messageDiv.css({
+                        'background-color': '#dff0d8',
+                        'border': '2px solid #3c763d',
+                        'border-radius': '18px',
+                        'padding': '10px',
+                        'font-weight': 'bold',
+                        'margin-bottom': '15px',
+                        'width': '35%'
+                      });
+                    }
+                    else if ( leavetypeId === ''){
+                      messageDiv.hide()
+                    }
+                    else if (leavetypeId != '' && response.leave_count === '' && response.employee != ''){
+                      messageDiv.show()
+                      messageDiv.text("Leave type is not assigned for selecetd employee.");
+                      messageDiv.css({
+                        'background-color': 'rgb(229 79 56 / 17%)',
+                        'border': '2px solid hsl(8,77%,56%)',
+                        'border-radius': '18px',
+                        'padding': '10px',
+                        'font-weight': 'bold',
+                        'margin-bottom': '15px',
+                        'width': 'auto'
+                      });
+                    }
+                    else if (response.leave_count === 0.0){
+                      messageDiv.show()
+                      messageDiv.text("Available Leaves :  " + response.leave_count);
+                      messageDiv.css({
+                        'background-color': 'rgb(229 79 56 / 17%)',
+                        'border': '2px solid hsl(8,77%,56%)',
+                        'border-radius': '18px',
+                        'padding': '10px',
+                        'font-weight': 'bold',
+                        'margin-bottom': '15px',
+                        'width': '35%'
+                      });
+                    }
+                    else{
+                      messageDiv.hide()
+                    }
+
+                  }
+                });
+              }
+
+              </script>
+
+{% endblock content %}
diff --git a/leave/templates/cbv/leave_requests/multiple_approval_action.html b/leave/templates/cbv/leave_requests/multiple_approval_action.html
new file mode 100644
index 000000000..7fae05102
--- /dev/null
+++ b/leave/templates/cbv/leave_requests/multiple_approval_action.html
@@ -0,0 +1,22 @@
+{% load i18n %}
+{% if instance.multiple_approvals %}
+        <div class="oh-timeoff-modal__stats w-100 mt-3">
+            <div class="oh-timeoff-modal__stat">
+                <span class="oh-timeoff-modal__stat-title">{% trans "Multiple Approvals" %}</span>
+                {% for approval in  instance.multiple_approvals.approvals %}
+                    <div class="oh-timeoff-modal__stat-description">{{forloop.counter}}.{{approval.manager_id}} :
+                        {% if approval.is_approved %}{% trans "Approved" %}
+                        {% else %}
+                            {% if approval.is_rejected %}
+                                {% trans "Rejected" %}
+                            {% else %}
+                                {% trans "Not Marked" %}
+                            {% endif %}
+                        {% endif %}
+                    </div>
+                {% endfor %}
+            </div>
+        </div>
+        {% endif %}
+
+
diff --git a/leave/templates/cbv/leave_requests/penality.html b/leave/templates/cbv/leave_requests/penality.html
new file mode 100644
index 000000000..120d18a5c
--- /dev/null
+++ b/leave/templates/cbv/leave_requests/penality.html
@@ -0,0 +1,10 @@
+{% load i18n %}
+<div onclick="event.stopPropagation();">
+{% if instance.get_penalties_count %}
+
+<div data-target="#penaltyViewModal" data-toggle="oh-modal-toggle" hx-get="{% url "view-penalties" %}?leave_request_id={{instance.id}}" hx-target="#penaltyViewModalBody" align="center" style="background-color: rgba(229, 79, 56, 0.036); border: 2px solid rgb(229, 79, 56); border-radius: 18px; padding: 10px; font-weight: bold; width: 90%;">{% trans "Penalties" %} :{{instance.get_penalties_count}}
+</div>
+{% else %}
+<div class="" style="background-color: rgba(144, 238, 144, 0.036); border: 2px solid rgb(144, 238, 144); border-radius: 18px; padding: 10px; " align="center">No Penalties</div>
+{% endif %}
+</div>
diff --git a/leave/templates/cbv/leave_types/detail_actions.html b/leave/templates/cbv/leave_types/detail_actions.html
new file mode 100644
index 000000000..42e4b45c7
--- /dev/null
+++ b/leave/templates/cbv/leave_types/detail_actions.html
@@ -0,0 +1,37 @@
+{% load i18n %}
+<div class="oh-modal__button-container text-center mt-3 w-100">
+{% if perms.leave.change_leavetype and perms.leave.add_availableleave and  perms.leave.delete_leavetype %}
+                <div class="oh-btn-group">
+                    {% if compensatory %}
+                        <a href="{% url 'type-update' instance.id %}?compensatory=True"  class="oh-btn oh-btn--info w-100">
+                            <ion-icon class="me-1" name="create-outline"></ion-icon>
+                            {% trans "Edit" %}
+                        </a>
+                    {% else %}
+                    <a href="{% url 'type-update' instance.id %}"  class="oh-btn oh-btn--info w-50">
+                        <ion-icon class="me-1" name="create-outline"></ion-icon>
+                        {% trans "Edit" %}
+                    </a>
+                    {% if not instance.is_compensatory_leave %}
+                        <a data-toggle="oh-modal-toggle" data-target="#genericModal"
+                        hx-get="{% url 'assign-one' instance.id %}" hx-target="#genericModalBody" class="oh-btn oh-btn--success w-50">
+                            <ion-icon class="me-1" name="checkmark-outline"></ion-icon>
+                            {% trans "Assign" %}
+                        </a> 
+                    {% endif %}
+                        <a href="{% url 'type-delete' instance.id %}" hx-confirm="{% trans 'Are you sure you want to delete this leave type?' %}" 
+                        hx-post="true" hx-target="#listContainer" class="oh-btn oh-btn--danger w-50">
+                            <ion-icon class="me-1" name="close-circle-outline"></ion-icon>
+                            {% trans "Delete" %}
+                    </a>
+                    {% endif %}
+                </div>
+            {% endif %}
+            </div>
+{% comment %} {{request.GET.deleted}}
+{% if request.GET.deleted %}
+
+            <script>
+                window.location.reload();
+            </script>
+{% endif %} {% endcomment %}
\ No newline at end of file
diff --git a/leave/templates/cbv/leave_types/inherit.html b/leave/templates/cbv/leave_types/inherit.html
new file mode 100644
index 000000000..ec44097e9
--- /dev/null
+++ b/leave/templates/cbv/leave_types/inherit.html
@@ -0,0 +1,6 @@
+<div>
+    {% include "generic/horilla_form.html" %}
+</div>
+<script>
+    $("#id_is_active_parent_div").hide();
+</script>
\ No newline at end of file
diff --git a/leave/templates/cbv/leave_types/leave_detail_carryforward.html b/leave/templates/cbv/leave_types/leave_detail_carryforward.html
new file mode 100644
index 000000000..434b86813
--- /dev/null
+++ b/leave/templates/cbv/leave_types/leave_detail_carryforward.html
@@ -0,0 +1,25 @@
+{% load i18n %}
+<div class="oh-timeoff-modal__stats ">
+    <div class="oh-timeoff-modal__stat">
+        <span class="oh-timeoff-modal__stat-title">{% trans "Carryforward Type" %}</span>
+        <div class="oh-timeoff-modal__stat-count">{{instance.get_carryforward_type_display}}</div>
+    </div>
+</div>
+{% if instance.carryforward_max %}
+<div class="oh-timeoff-modal__stat">
+    <span class="oh-timeoff-modal__stat-title">{% trans "Maximum Carryforward" %}</span>
+    <span class="oh-timeoff-modal__stat-count">{{instance.carryforward_max}}</span>
+</div>
+{% endif %}
+{% if instance.carryforward_expire_in %}
+<div class="oh-timeoff-modal__stat">
+    <span class="oh-timeoff-modal__stat-title">{% trans "Carryforward Expire in" %}</span>
+    <span class="oh-timeoff-modal__stat-count">{{instance.carryforward_expire_in}}</span>
+</div>
+{% endif %}
+{% if instance.carryforward_expire_period %}
+<div class="oh-timeoff-modal__stat">
+    <span class="oh-timeoff-modal__stat-title">{% trans "Carryforward Expire period" %}</span>
+    <span class="oh-timeoff-modal__stat-count">{{instance.carryforward_expire_period}}</span>
+</div>
+{% endif %}
\ No newline at end of file
diff --git a/leave/templates/cbv/leave_types/leave_detail_reset.html b/leave/templates/cbv/leave_types/leave_detail_reset.html
new file mode 100644
index 000000000..db69ab6c1
--- /dev/null
+++ b/leave/templates/cbv/leave_types/leave_detail_reset.html
@@ -0,0 +1,34 @@
+{% load i18n %}
+{% load static %}
+{% load horillafilters %}
+<div class="oh-timeoff-modal__stat">
+    <div class="oh-label__info">
+        <span class="oh-timeoff-modal__stat-title">{% trans "Reset" %}</span>
+        <span class=" oh-info me-3" title="{% trans 'resetting the leaves based on conditions or not' %}"></span>
+    </div>
+    <span class="oh-timeoff-modal__stat-count">{{instance.reset|yes_no}}</span>
+</div>
+{% if instance.reset_based %}
+<div class="oh-timeoff-modal__stat">
+    <span class="oh-timeoff-modal__stat-title">{% trans "Reset Based" %}</span>
+    <span class="oh-timeoff-modal__stat-count">{{instance.get_reset_based_display}}</span>
+</div>
+{% endif %}
+{% if instance.reset_month %}
+<div class="oh-timeoff-modal__stat">
+    <span class="oh-timeoff-modal__stat-title">{% trans "Reset Month" %}</span>
+    <span class="oh-timeoff-modal__stat-count">{{instance.get_reset_month_display}}</span>
+</div>
+{% endif %}
+{% if instance.reset_day %}
+<div class="oh-timeoff-modal__stat">
+    <span class="oh-timeoff-modal__stat-title">{% trans "Reset Day" %}</span>
+    <span class="oh-timeoff-modal__stat-count">{{instance.reset_day}}</span>
+</div>
+{% endif %}
+{% if instance.reset_weekend %}
+<div class="oh-timeoff-modal__stat">
+    <span class="oh-timeoff-modal__stat-title">{% trans "Reset weekend" %}</span>
+    <span class="oh-timeoff-modal__stat-count">{{instance.get_reset_weekend_display}}</span>
+</div>
+{% endif %}
\ No newline at end of file
diff --git a/leave/templates/cbv/leave_types/leave_type_filter.html b/leave/templates/cbv/leave_types/leave_type_filter.html
new file mode 100644
index 000000000..5ae1511cd
--- /dev/null
+++ b/leave/templates/cbv/leave_types/leave_type_filter.html
@@ -0,0 +1,105 @@
+{% load i18n %}
+<div class="oh-dropdown__filter-body">
+	<div class="oh-accordion">
+		<div class="oh-accordion-header">{% trans "Leave Type" %}</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 "Name" %}</label>
+						{{form.name}}
+					</div>
+				</div>
+				<div class="col-sm-12 col-md-12 col-lg-6">
+					<div class="oh-input-group">
+						<label class="oh-label">{% trans "Payment Method" %}</label>
+						{{form.payment}}
+					</div>
+				</div>
+			</div>
+
+			<div class="row">
+				<div class="col-sm-12 col-md-12 col-lg-6">
+					<div class="oh-input-group">
+						<label class="oh-label">{% trans "Reset" %}</label>
+						{{form.reset}}
+					</div>
+				</div>
+				<div class="col-sm-12 col-md-12 col-lg-6">
+					<div class="oh-input-group">
+						<label class="oh-label">{% trans "Carry Forward Type" %}</label>
+						{{form.carryforward_type}}
+					</div>
+				</div>
+			</div>
+
+			<div class="row">
+				<div class="col-sm-12 col-md-12 col-lg-6">
+					<div class="oh-input-group">
+						<label class="oh-label">{% trans "Require Approval" %}</label>
+						{{form.require_approval}}
+					</div>
+				</div>
+				<div class="col-sm-12 col-md-12 col-lg-6">
+					<div class="oh-input-group">
+						<label class="oh-label">{% trans "Require Attachment" %}</label>
+						{{form.require_attachment}}
+					</div>
+				</div>
+			</div>
+			<div class="row">
+				<div class="col-sm-12 col-md-12 col-lg-6">
+					<div class="oh-input-group">
+						<label class="oh-label">{% trans "Is Encashable" %}</label>
+						{{form.is_encashable}}
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="oh-accordion">
+		<div class="oh-accordion-header">{% trans "Advanced" %}</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" title="Carry Forward greater Than or Equal"
+							>{% trans "Carry Forward greater Than or Equal"|truncatechars:25 %}
+							</label
+						>
+						{{form.carry_forward_gte}}
+					</div>
+				</div>
+				<div class="col-sm-12 col-md-12 col-lg-6">
+					<div class="oh-input-group">
+						<label class="oh-label" title="Carry Forward less Than or Equal"
+							>{% trans "Carry Forward less Than or Equal"|truncatechars:25 %}
+							</label
+						>
+						{{form.carry_forward_lte}}
+					</div>
+				</div>
+			</div>
+			<div class="row">
+				<div class="col-sm-12 col-md-12 col-lg-6">
+					<div class="oh-input-group">
+						<label class="oh-label" title="Total Days greater Than or Equal"
+							>{% trans "Total Days greater Than or Equal"|truncatechars:25 %}
+							</label
+						>
+						{{form.total_days_gte}}
+					</div>
+				</div>
+				<div class="col-sm-12 col-md-12 col-lg-6">
+					<div class="oh-input-group">
+						<label class="oh-label" title="Total Days less Than or Equal"
+							>{% trans "Total Days less Than or Equal"|truncatechars:25 %}
+							</label
+						>
+						{{form.total_days_lte}}
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
diff --git a/leave/templates/cbv/leave_types/leave_type_home.html b/leave/templates/cbv/leave_types/leave_type_home.html
new file mode 100644
index 000000000..353413c43
--- /dev/null
+++ b/leave/templates/cbv/leave_types/leave_type_home.html
@@ -0,0 +1,61 @@
+{% extends "index.html" %}
+{% load static %}
+{% load i18n %}
+{% block content %}
+
+<meta name="csrf-token" content="{{ csrf_token }}">
+
+
+
+<style>
+.paid--dot{
+  background-color:yellowgreen;
+}
+.unpaid--dot{
+  background-color:orange;
+}
+
+.payment-paid{
+  border-left: 3.4px solid yellowgreen !important;
+  border-radius: 4px 0 0 4px;
+
+}
+.payment-unpaid{
+  border-left: 3.4px solid orange !important;
+  border-radius: 4px 0 0 4px;
+
+}
+</style>
+
+
+<div hx-get="{% url "leave-type-navbar" %}" hx-trigger="load">
+</div>
+
+
+
+{% include "generic/components.html" %}
+
+
+<div
+    class="oh-checkpoint-badge mb-2"
+    id="selectedInstances"
+    data-ids="[]"
+    data-clicked=""
+    style="display: none"
+  ></div>
+
+  
+  <div 
+  class="oh-wrapper" 
+  hx-get="{% url "leave-type-list"  %}?{{request.GET.urlencode}}" hx-trigger="load" 
+  id="listContainer">
+  <div class="animated-background">
+  </div>
+</div>
+
+
+
+<script src="{% static '/candidate/bulk.js' %}"></script>
+<script src="{% static 'cbv/deleteFunc.js' %}"></script>
+
+{% endblock content %}
\ No newline at end of file
diff --git a/leave/templates/cbv/leave_types/leave_type_list_actions.html b/leave/templates/cbv/leave_types/leave_type_list_actions.html
new file mode 100644
index 000000000..903cd3f41
--- /dev/null
+++ b/leave/templates/cbv/leave_types/leave_type_list_actions.html
@@ -0,0 +1,35 @@
+{% load i18n %}
+<div class="oh-btn-group" onclick="event.stopPropagation();">
+    {% if not instance.is_compensatory_leave %}
+    <a data-toggle="oh-modal-toggle" data-target="#genericModal"
+        hx-get="{% url 'assign-one' instance.id %}" hx-target="#genericModalBody" class="oh-btn oh-btn--light-bkg w-100 text-success" title="{% trans 'Assign' %}">
+        <ion-icon class="me-1" name="checkmark-done-outline"></ion-icon>
+        
+    </a>
+    {% endif %}
+
+    {% if perms.leave.change_leavetype and perms.leave.add_availableleave %}
+        {% if compensatory %}
+        <a href="{% url 'type-update' instance.id %}?compensatory=True" class="oh-btn oh-btn--light-bkg w-100" title="{% trans 'Update' %}">
+            <ion-icon class="me-1" name="create-outline"></ion-icon>
+        </a>
+        {% else %}
+        <a href="{% url 'type-update' instance.id %}" class="oh-btn oh-btn--light-bkg w-100" title="{% trans 'Update' %}">
+            <ion-icon class="me-1" name="create-outline"></ion-icon>
+            
+        </a>
+        {% endif %}
+    {% endif %}
+
+    {% if perms.leave.delete_leavetype and perms.leave.add_availableleave %}
+    <a hx-get="{% url 'generic-delete' %}?model=leave.LeaveType&pk={{instance.id}}" 
+        hx-target="#deleteConfirmationBody" data-toggle="oh-modal-toggle" 
+        data-target="#deleteConfirmation"
+        class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100" title="{% trans 'Delete' %}"
+    >
+            <ion-icon name="trash-outline"></ion-icon>
+    </a>
+    {% endif %}
+
+    
+</div>
diff --git a/leave/templates/cbv/my_leave_request/attachment_action.html b/leave/templates/cbv/my_leave_request/attachment_action.html
new file mode 100644
index 000000000..91b236b07
--- /dev/null
+++ b/leave/templates/cbv/my_leave_request/attachment_action.html
@@ -0,0 +1,17 @@
+{% load i18n %}
+<style>
+    .diff-cell{
+        background: rgba(255, 166, 0, 0.158);
+    }
+    
+</style>
+{% if instance.attachment %}
+<a href="{{instance.attachment.url}}" target="_blank" class="oh-timeoff-modal__download-link">
+    <ion-icon class="me-1" name="download-outline"></ion-icon>
+    <span class="oh-timeoff-modal__download-link-text"></span>
+    {% trans "View attachment" %}
+</a>
+{% endif %}
+
+</div>
+
diff --git a/leave/templates/cbv/my_leave_request/cancelled_action.html b/leave/templates/cbv/my_leave_request/cancelled_action.html
new file mode 100644
index 000000000..3469124eb
--- /dev/null
+++ b/leave/templates/cbv/my_leave_request/cancelled_action.html
@@ -0,0 +1,19 @@
+{% load i18n %}
+<style>
+    .diff-cell{
+        background: rgba(255, 166, 0, 0.158);
+    }
+    
+</style>
+    
+    {% if instance.reject_reason %}
+    {% if instance.status == "cancelled" %}
+    <div class="oh-timeoff-modal__stats w-100 mt-3 p-2 row-status--gray diff-cell">
+        <div class="oh-timeoff-modal__stat">
+            <span class="oh-timeoff-modal__stat-title">{% trans "Reason for Cancellation" %}</span>
+            <div class="oh-timeoff-modal__stat-description">{{instance.reject_reason}}</div>
+        </div>
+    </div>
+    {% endif %}
+    {% endif %}
+    
\ No newline at end of file
diff --git a/leave/templates/cbv/my_leave_request/comment.html b/leave/templates/cbv/my_leave_request/comment.html
new file mode 100644
index 000000000..15cdee585
--- /dev/null
+++ b/leave/templates/cbv/my_leave_request/comment.html
@@ -0,0 +1,7 @@
+{% load i18n %}
+<div class="" onclick="event.stopPropagation();">
+    <button type="button" hx-get="{% url 'leave-request-view-comment' instance.id %}" hx-target="#commentContainer"
+      data-target = '#leaveactivitySidebar' title='{% trans "Add / View Comment" %}'  class="oh-btn oh-btn--light oh-activity-sidebar__open w-100" style="flex: 1 0 auto; width:20px;height: 40.68px; padding: 0;" onclick="event.stopPropagation()">
+      <ion-icon name="newspaper-outline" role="img" class="md hydrated" aria-label="newspaper outline"></ion-icon>
+    </button>
+</div>
\ No newline at end of file
diff --git a/leave/templates/cbv/my_leave_request/confirm_cancel.html b/leave/templates/cbv/my_leave_request/confirm_cancel.html
new file mode 100644
index 000000000..fb1019d34
--- /dev/null
+++ b/leave/templates/cbv/my_leave_request/confirm_cancel.html
@@ -0,0 +1,17 @@
+{% load i18n%}
+<div class="{% if instance.status == 'rejected' %} diff-cell{% endif %}" onclick="event.stopPropagation()">
+    {% if instance.status == 'approved' and instance.end_date >= current_date %}
+        <a type="submit" data-toggle="oh-modal-toggle"
+            data-target="#cancelModal"
+            hx-get="{% url 'user-request-cancel' instance.id %}"
+            hx-target="#cancelForm"
+            title="{% trans 'Cancel' %}"
+            class="oh-btn oh-btn--primary w-100"> {% trans "Cancel" %}
+        </a>
+    {% else %}
+        <button class="oh-btn oh-btn--primary w-100" disabled>
+            {% trans "Cancel" %}
+        </button> 
+    {% endif %}
+
+</div>
\ No newline at end of file
diff --git a/leave/templates/cbv/my_leave_request/detail_leave_actions.html b/leave/templates/cbv/my_leave_request/detail_leave_actions.html
new file mode 100644
index 000000000..9d79a3a6d
--- /dev/null
+++ b/leave/templates/cbv/my_leave_request/detail_leave_actions.html
@@ -0,0 +1,56 @@
+{% load basefilters %}
+{% load i18n %}
+{% if instance.status == 'requested'%}
+    <a hx-get="{% url 'user-request-update' instance.id %}" 
+    hx-target='#genericModalBody' 
+    data-toggle="oh-modal-toggle"
+    data-target='#genericModal' 
+    class="oh-btn oh-btn--info w-50" title="{% trans 'Edit' %}">
+    <ion-icon name="create-outline"></ion-icon>
+</a>
+     {% else %}
+        <button class="oh-btn oh-btn--info w-50" disabled><ion-icon name="create-outline" ></ion-icon></button></td>
+            {% endif %}
+            {% if instance.status == 'requested'%}
+                    <form hx-confirm="{% trans 'Are you sure you want to delete this leave request?' %}" 
+                    hx-post="{% url 'user-request-delete' instance.id  %}"
+                    hx-target="#genericModalBody" style="width: 50%">
+                    {% csrf_token %}
+                <button type='submit' class="oh-btn oh-btn--secondary w-100" title="{% trans 'Remove' %}"><ion-icon name="trash-outline"></ion-icon></button>
+            </form>
+        {% else %}
+    <button class="oh-btn oh-btn--secondary w-50" disabled><ion-icon name="trash-outline"></ion-icon></button></td>
+{% endif %}
+
+
+{% comment %} 
+{% load i18n %}
+<div class=" {% if instance.status == 'rejected' %} diff-cell{% endif %}" onclick="event.stopPropagation()">
+    {% if instance.status == 'requested'%}
+        <div class="oh-btn-group" >
+            <button class="oh-btn oh-btn--info w-50" title="{% trans 'Edit' %}" data-toggle="oh-modal-toggle"
+                data-target="#genericModal" hx-get="{% url 'user-request-update' instance.id %}?instance_ids={{instance.ordered_ids}}"
+                hx-target="#genericModalBody">
+                <ion-icon name="create-outline"></ion-icon>
+            </button>
+            <a class="oh-btn oh-btn--secondary w-50"
+                title="{% trans 'Delete' %}" id="delete-link"
+                hx-confirm="{% trans 'Are you sure you want to delete this leave request?' %}"
+                hx-post="{% url 'user-request-delete' instance.id %}"
+                hx-target="#deleteleavedata"
+                >
+                <ion-icon name="trash-outline"></ion-icon>
+            </a>
+        </div>
+    {% else %}
+        <div class="oh-btn-group" >
+            <button
+            class="oh-btn oh-btn--info w-50" disabled style="width: 50%">
+                <ion-icon name="create-outline" ></ion-icon>
+            </button></td>
+            <button class="oh-btn oh-btn--secondary w-50" disabled style="width: 50%">
+                <ion-icon name="trash-outline"></ion-icon>
+            </button></td>
+        </div>
+    {% endif %}
+</div> {% endcomment %}
\ No newline at end of file
diff --git a/leave/templates/cbv/my_leave_request/filter.html b/leave/templates/cbv/my_leave_request/filter.html
new file mode 100644
index 000000000..2b4e857b9
--- /dev/null
+++ b/leave/templates/cbv/my_leave_request/filter.html
@@ -0,0 +1,65 @@
+{% load i18n %}
+{% load static  %}
+<div class="oh-dropdown__filter-body">
+    <div class="oh-accordion">
+        <div class="oh-accordion-header"
+            onclick="event.stopImmediatePropagation();$(this).parent().toggleClass('oh-accordion--show');">
+            {% trans "Leave Request" %}
+        </div>
+        <div class="oh-accordion-body">
+            <div class="row">
+                <div class="col-sm-12 col-md-12 col-lg-12">
+                    <div class="oh-input-group">
+                        <label class="oh-label">{% trans "Leave Type" %}</label>
+                        {{form.leave_type_id}}
+                    </div>
+                </div>
+                <div class="col-sm-12 col-md-12 col-lg-6">
+                    <div class="oh-input-group">
+                        <label class="oh-label">{% trans "Start Date" %}</label>
+                        {{form.start_date}}
+                    </div>
+                </div>
+
+                <div class="col-sm-12 col-md-12 col-lg-6">
+                    <div class="oh-input-group">
+                        <label class="oh-label">{% trans "End Date" %}</label>
+                        {{form.end_date}}
+                    </div>
+                </div>
+                <div class="col-sm-12 col-md-12">
+                    <div class="oh-input-group">
+                        <label class="oh-label">{% trans "Status" %}</label>
+                        {{form.status}}
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="oh-accordion">
+        <div
+            class="oh-accordion-header"
+            onclick="event.stopImmediatePropagation();$(this).parent().toggleClass('oh-accordion--show');"
+        >
+            {% trans "Advanced" %}
+        </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 "From Date" %}</label>
+                        {{form.from_date}}
+                    </div>
+                </div>
+
+                <div class="col-sm-12 col-md-12 col-lg-6">
+                    <div class="oh-input-group">
+                        <label class="oh-label">{% trans "To Date" %}</label>
+                        {{form.to_date}}
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/leave/templates/cbv/my_leave_request/form/inherit.html b/leave/templates/cbv/my_leave_request/form/inherit.html
new file mode 100644
index 000000000..7295afda3
--- /dev/null
+++ b/leave/templates/cbv/my_leave_request/form/inherit.html
@@ -0,0 +1,78 @@
+{% load horillafilters %}
+<div>
+    {% include "generic/horilla_form.html" %}
+</div>
+<script>
+        $("#createTitle").on("htmx:beforeSwap",function(e){
+            $('.available-leave-count').remove();
+        });
+</script>
+
+<script>
+    var test = $("#createTitle").closest("form")
+    test.find("button[type=submit]").hide();
+    var button = `
+    <div class="oh-modal__dialog-footer p-0 mt-3">
+      <button id="buttonID" class="oh-btn oh-btn--secondary oh-btn--shadow">
+        Save
+      </button>
+    </div>
+    `;
+    test.find(".d-flex").after(button);
+
+{% if "recruitment"|app_installed %}
+    $(document).ready(function () {
+        $("#buttonID").on("click", function () {
+            event.preventDefault();
+            event.stopPropagation();
+            var startDate = test.find("[name = start_date]").val();
+            var endDate = test.find("[name = end_date]").val();
+            var employee = "{{request.user.employee_get.id}}";
+
+            $.ajax({
+                type: "GET",
+                url: "{% url 'check-interview-conflicts' %}",
+                data: {
+                    start_date: startDate,
+                    end_date: endDate,
+                    employee_id: employee,
+                },
+                success: function (response) {
+                    var interviews = response.interviews;
+                    
+                    title = "Leave Request Alert.";
+                    var content = `<div>
+                        <p>{{request.user.employee_get}} has interview in the requested date.</p>
+                        <ol style="margin-left:5%">`;
+                            interviews.forEach(function (interview, index) {
+                                content += `<li style="text-align:left; font-size:14px">${interview}</li>`;
+                            });
+                            content += `</ol>
+                            <p style="font-weight:700">Are you sure you want to proceed with the request?</p>
+                        </div>`;
+                        
+                        if (interviews.length != 0) {
+                            Swal.fire({
+                                title: title,
+                                icon: "info",
+                                html: content,
+                                showCancelButton: true,
+                                confirmButtonColor: "#008000",
+                                cancelButtonColor: "#d33",
+                                confirmButtonText: "Confirm",
+                            }).then(function (result) {
+                                if (result.isConfirmed) {
+                                    test.find("[type=submit]").show();
+                                    $("#buttonID").hide();
+                                test.find("[type=submit]").click();
+                            }
+                        });
+                    } else {
+                        test.find("[type=submit]").click();
+                    }
+                },
+            });
+        });
+    });
+    {% endif %}
+</script>
\ No newline at end of file
diff --git a/leave/templates/cbv/my_leave_request/leave_actions.html b/leave/templates/cbv/my_leave_request/leave_actions.html
new file mode 100644
index 000000000..d7245e7bf
--- /dev/null
+++ b/leave/templates/cbv/my_leave_request/leave_actions.html
@@ -0,0 +1,31 @@
+
+{% load i18n %}
+<div class=" {% if instance.status == 'rejected' %} diff-cell{% endif %}" onclick="event.stopPropagation()">
+    {% if instance.status == 'requested'%}
+        <div class="oh-btn-group" >
+            <button class="oh-btn oh-btn--light-bkg w-100" title="{% trans 'Edit' %}" data-toggle="oh-modal-toggle"
+                data-target="#genericModal" hx-get="{% url 'user-request-update' instance.id %}?instance_ids={{instance.ordered_ids}}"
+                hx-target="#genericModalBody">
+                <ion-icon name="create-outline"></ion-icon>
+            </button>
+            <a class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100"
+                title="{% trans 'Delete' %}" id="delete-link"
+                hx-confirm="{% trans 'Are you sure you want to delete this leave request?' %}"
+                hx-post="{% url 'user-request-delete' instance.id %}"
+                hx-target="#deleteleavedata"
+                >
+                <ion-icon name="trash-outline"></ion-icon>
+            </a>
+        </div>
+    {% else %}
+        <div class="oh-btn-group" >
+            <button
+                class="oh-btn oh-btn--light-bkg w-50" disabled>
+                <ion-icon name="create-outline" ></ion-icon>
+            </button>
+            <button class="oh-btn oh-btn--light-bkg w-50" disabled>
+                <ion-icon name="trash-outline"></ion-icon>
+            </button>
+        </div>
+    {% endif %}
+</div>
\ No newline at end of file
diff --git a/leave/templates/cbv/my_leave_request/leave_type_col.html b/leave/templates/cbv/my_leave_request/leave_type_col.html
new file mode 100644
index 000000000..ebfdfc338
--- /dev/null
+++ b/leave/templates/cbv/my_leave_request/leave_type_col.html
@@ -0,0 +1,28 @@
+{% load i18n %}
+{% load basefilters %} 
+
+{% if leave_requests_with_interview %}
+        <div class="oh-profile oh-profile--md">
+            <div class="oh-profile__avatar mr-1">
+                <img src="{{instance.leave_type_id.get_avatar}}" class="oh-profile__image"
+                    alt="Leave Type Icon" />
+            </div>
+            <span class="oh-profile__name oh-text--dark">{{instance.leave_type_id}}</span>
+            <span class="tooltip">
+                <span class="material-symbols-outlined" style="flex-direction: row-reverse;color:#ff9146;">
+                    {% trans "warning" %}
+                </span>
+                <span class="tooltiptext fw-bold">
+                    {% trans "You have an interview in this requested date range." %}
+                </span>
+            </span>
+    </div>
+    {% else %}
+    <div class="oh-profile oh-profile--md">
+        <div class="oh-profile__avatar mr-1">
+            <img src="{{instance.leave_type_id.get_avatar}}" class="oh-profile__image"
+                alt="Leave Type Icon" />
+        </div>
+        <span class="oh-profile__name oh-text--dark">{{instance.leave_type_id}}</span>
+    </div>
+    {% endif %}
\ No newline at end of file
diff --git a/leave/templates/cbv/my_leave_request/my_leave_request_home.html b/leave/templates/cbv/my_leave_request/my_leave_request_home.html
new file mode 100644
index 000000000..03446bd87
--- /dev/null
+++ b/leave/templates/cbv/my_leave_request/my_leave_request_home.html
@@ -0,0 +1,107 @@
+{% extends "index.html" %}
+{% load static %}
+{% block content %}
+<meta name="csrf-token" content="{{ csrf_token }}">
+<style>
+    .cancelled--dot{
+        background-color:grey;
+      }
+      .approved--dot{
+        background-color:green;
+      }
+      .rejected--dot{
+        background-color:red;
+      }
+      .requested--dot{
+        background-color:orange;
+      }
+
+      .status-rejected{
+        border-left: 4px solid red !important;
+        border-radius: 5px 0 0 4px;
+
+      }
+     .status-cancelled {
+        border-left: 4px solid grey !important;
+        border-radius: 5px 0 0 4px;
+
+      }
+      .status-requested{
+        border-left: 4px solid orange !important;
+        border-radius: 5px 0 0 4px;
+
+      }
+     .status-approved {
+        border-left: 4px solid yellowgreen !important;
+        border-radius: 5px 0 0 4px;
+
+      }
+      .delete{
+        color = hsl(1, 100%, 61%) !important;
+      }
+        .diff-cell {
+            background: rgba(255, 166, 0, 0.158);
+        }
+        .tooltip {
+            position: relative;
+            display: inline-block; /* Ensures that the tooltip container doesn't stretch to the full width */
+        }
+
+        .tooltip .tooltiptext {
+            visibility: hidden;
+            width: auto; /* Allow the tooltip width to adjust based on content */
+            max-width: auto; /* Limit the maximum width of the tooltip to prevent it from overflowing */
+            background-color: hsl(8,77%,56%);
+            color: white;
+            text-align: center;
+            border-radius: 6px;
+            padding: 5px;
+            position: absolute;
+            z-index: 1;
+            bottom: 5%;
+            left: 50%;
+            transform: translateX(5%);
+            opacity: 0;
+            transition: opacity 0.3s;
+            white-space: nowrap; /* Prevents the text from wrapping */
+            overflow: hidden; /* Hides any overflowed content */
+            font-size:15px;
+        }
+
+        .tooltip:hover .tooltiptext {
+            visibility: visible;
+            opacity: 1;
+        }
+    </style>
+
+<div hx-get="{% url "my-leave-request-nav" %}" hx-trigger="load">
+</div>
+<div>
+    {% include "leave/user_leave/user_leave.html" %}
+
+</div>
+{% include "generic/components.html" %}
+<div class="oh-checkpoint-badge mb-2" id="selectedInstances" data-ids="[]" data-clicked="" style="display: none">
+</div>
+
+
+<div class="oh-wrapper" hx-trigger="load" hx-get="{% url "user-request-filter" %}?{{request.GET.urlencode}}"
+   id="listContainer">
+  <div class="animated-background">
+</div>
+</div>
+
+
+<div class="oh-activity-sidebar" id="leaveactivitySidebar" style="z-index:1000;">
+    <div class="oh-activity-sidebar__body" id="commentContainer">
+    </div>
+  </div>
+
+<div class="oh-modal" id="cancelModal" role="dialog"
+	aria-labelledby="cancelModal" aria-hidden="true">
+<div class="oh-modal__dialog" id="cancelForm"></div>
+</div>
+
+<script src="{% static 'cbv/my_leave_request/my_leave_request.js' %}"></script>
+
+{% endblock content %}
diff --git a/leave/templates/cbv/my_leave_request/rejected_action.html b/leave/templates/cbv/my_leave_request/rejected_action.html
new file mode 100644
index 000000000..090b4de0d
--- /dev/null
+++ b/leave/templates/cbv/my_leave_request/rejected_action.html
@@ -0,0 +1,20 @@
+{% load i18n %}
+<style>
+    .diff-cell{
+        background: rgba(255, 166, 0, 0.158);
+    }
+    
+</style>
+    
+    {% if instance.reject_reason %}
+    {% if instance.status == "rejected" %}
+    <div class="oh-timeoff-modal__stats w-100 mt-3 p-2 row-status--gray diff-cell">
+        <div class="oh-timeoff-modal__stat">
+            <span class="oh-timeoff-modal__stat-title">{% trans "Reason for Rejection" %}</span>
+            <div class="oh-timeoff-modal__stat-description">{{instance.reject_reason}}</div>
+        </div>
+    </div>
+    
+    {% endif %}
+    {% endif %}
+
diff --git a/leave/templates/cbv/restricted_days/actions.html b/leave/templates/cbv/restricted_days/actions.html
new file mode 100644
index 000000000..09505adf9
--- /dev/null
+++ b/leave/templates/cbv/restricted_days/actions.html
@@ -0,0 +1,30 @@
+{% load i18n %}
+{% if perms.leave.change_restrictleave or perms.leave.delete_restrictleave %}
+          <div>
+            <div class="oh-btn-group">
+              {% if perms.leave.change_restrictleave %}
+              <button
+                class="oh-btn oh-btn--light-bkg w-100"
+                title="{% trans 'Edit' %}"
+                data-toggle="oh-modal-toggle"
+                data-target="#genericModal"
+                hx-get="{% url 'restrict-update' instance.id %}?{{pd}}&instance_ids={{instance.ordered_ids}}"
+                hx-target="#genericModalBody"
+              >
+                <ion-icon name="create-outline"></ion-icon>
+              </button>
+              {% endif %} {% if perms.leave.delete_restrictleave %}
+              <a onclick = "event.stopPropagation();"
+                class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100"
+                id="delete-link"
+                hx-confirm="{% trans 'Are you sure you want to delete?' %}"
+                hx-post="{% url 'restrict-delete' instance.id %}?{{pd}}"
+                hx-target="#restrictday"
+                title="{% trans 'Delete' %}"
+              >
+                <ion-icon name="trash-outline"></ion-icon>
+              </a>
+              {% endif %}
+            </div>
+          </div>
+          {% endif %}
\ No newline at end of file
diff --git a/leave/templates/cbv/restricted_days/detail_action.html b/leave/templates/cbv/restricted_days/detail_action.html
new file mode 100644
index 000000000..36ce4fda2
--- /dev/null
+++ b/leave/templates/cbv/restricted_days/detail_action.html
@@ -0,0 +1,35 @@
+{% load i18n %}
+{% if perms.leave.change_restrictleave or perms.leave.delete_restrictleave %}
+            <div class="oh-btn-group" style="width: 100%;" >
+              {% if perms.leave.change_restrictleave %}
+              <button
+                class="oh-btn oh-btn--info w-50"
+                title="{% trans 'Edit' %}"
+                data-toggle="oh-modal-toggle"
+                data-target="#genericModal"
+                hx-get="{% url 'restrict-update' instance.id %}?{{pd}}"
+                hx-target="#genericModalBody"
+              >
+                <ion-icon name="create-outline" role="img"
+                class="md hydrated" aria-label="create outline"></ion-icon>
+              </button>
+              {% endif %} {% if perms.leave.delete_restrictleave %}
+              <a
+                class="oh-btn oh-btn--secondary w-50"
+                id="delete-link"
+                hx-confirm="{% trans 'Are you sure you want to delete?' %}"
+                hx-post="{% url 'restrict-delete' instance.id %}?instances_ids={{ request.GET.instance_ids }}"
+                hx-target="#genericModalBody"
+                title="{% trans 'Delete' %}"
+              >
+                <ion-icon name="trash-outline"></ion-icon>
+              </a>
+              {% endif %}
+            </div>
+        
+          {% endif %}
+{% if request.GET.deleted %}
+<script>
+$(".reload-record").click()
+</script>
+{% endif %}
\ No newline at end of file
diff --git a/leave/templates/cbv/restricted_days/filter.html b/leave/templates/cbv/restricted_days/filter.html
new file mode 100644
index 000000000..3a7aeade7
--- /dev/null
+++ b/leave/templates/cbv/restricted_days/filter.html
@@ -0,0 +1,47 @@
+{% load i18n %}
+<div class="oh-dropdown__filter-body">
+    <div class="oh-accordion">
+      <div class="oh-accordion-header">{% trans "Restrict Leaves" %}</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" for="{{ form.from_date.id_for_label }}">{% trans "From Date" %}</label>
+              {{form.from_date}}
+            </div>
+          </div>
+          <div class="col-sm-12 col-md-12 col-lg-6">
+            <div class="oh-input-group">
+              <label class="oh-label" for="{{ form.to_date.id_for_label }}">{% trans "To Date" %}</label>
+                {{form.to_date}}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="oh-accordion">
+      <div
+        class="oh-accordion-header"
+        onclick="event.stopImmediatePropagation();$(this).parent().toggleClass('oh-accordion--show');"
+      >
+        {% trans "Work Information" %}
+      </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" for="{{ form.department.id_for_label }}">{% trans "Department" %}</label>
+              {{form.department}}
+            </div>
+          </div>
+          <div class="col-sm-12 col-md-12 col-lg-6">
+            <div class="oh-input-group">
+              <label class="oh-label" for="{{ form.job_position.id_for_label }}">{% trans "Job Position" %}</label>
+              {{form.job_position}}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+  </div>
diff --git a/leave/templates/cbv/restricted_days/job_position.html b/leave/templates/cbv/restricted_days/job_position.html
new file mode 100644
index 000000000..5ebee16c8
--- /dev/null
+++ b/leave/templates/cbv/restricted_days/job_position.html
@@ -0,0 +1,9 @@
+<div>
+    {% if instance.job_position.all  %}
+      {% for i in  instance.job_position.all %}
+        <span class="d-flex">{{forloop.counter}}. {{i}}</span>
+      {% endfor %}
+    {% else %}
+      All
+    {% endif %}
+  </div>
\ No newline at end of file
diff --git a/leave/templates/cbv/restricted_days/restricted_days.html b/leave/templates/cbv/restricted_days/restricted_days.html
new file mode 100644
index 000000000..1bfc33fe9
--- /dev/null
+++ b/leave/templates/cbv/restricted_days/restricted_days.html
@@ -0,0 +1,47 @@
+{% extends "index.html" %}
+{% load i18n %}{% load static %}
+
+
+{% block content %}
+<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+
+
+
+
+<meta name="csrf-token" content="{{ csrf_token }}">
+
+
+
+ <div hx-get="{% url "nav-restricted-days" %}" hx-trigger="load">
+</div>
+
+{% include "generic/components.html" %}
+
+
+<div
+    class="oh-checkpoint-badge mb-2"
+    id="selectedInstances"
+    data-ids="[]"
+    data-clicked=""
+    style="display: none"
+  ></div>
+
+  
+  <div 
+  class="oh-wrapper" 
+  hx-get="{% url "restrict-filter"  %}?{{request.GET.urlencode}}" 
+  id="listContainer">
+  <div class="animated-background">
+  </div>
+</div>
+
+<script src="{% static '/restrict_days/action.js' %}"></script>
+
+<span
+  id="bulkDeleteSpan"
+  hx-post="{% url 'restrict-days-bulk-delete' %}?{{pd}}"
+  hx-target="#restrictday"
+></span>
+    
+{% endblock %}
\ No newline at end of file
diff --git a/leave/templates/leave/company_leave/company_leave_creation_form.html b/leave/templates/leave/company_leave/company_leave_creation_form.html
index 512922714..3df72d380 100644
--- a/leave/templates/leave/company_leave/company_leave_creation_form.html
+++ b/leave/templates/leave/company_leave/company_leave_creation_form.html
@@ -12,6 +12,7 @@
   setTimeout(() => {
     $(".oh-modal__close").click();
   }, 1000);
+  $(".reload-record").click();
 </script>
 {% endif %} {% if form.errors %}
 <div class="oh-wrapper">
diff --git a/leave/templates/leave/company_leave/company_leave_update_form.html b/leave/templates/leave/company_leave/company_leave_update_form.html
index 5643d56b4..25f005aa2 100644
--- a/leave/templates/leave/company_leave/company_leave_update_form.html
+++ b/leave/templates/leave/company_leave/company_leave_update_form.html
@@ -12,6 +12,7 @@
   setTimeout(() => {
     $(".oh-modal__close").click();
   }, 1000);
+  $(".reload-record").click();
 </script>
 {% endif %}
 {% if form.errors %}
diff --git a/leave/templates/leave/compensatory_leave/compensatory_leave_reject_form..html b/leave/templates/leave/compensatory_leave/compensatory_leave_reject_form..html
index 1064a985d..070281229 100644
--- a/leave/templates/leave/compensatory_leave/compensatory_leave_reject_form..html
+++ b/leave/templates/leave/compensatory_leave/compensatory_leave_reject_form..html
@@ -12,13 +12,9 @@
   <h2 class="oh-modal__dialog-title" id="rejectTitle">
     {% trans "Reject Compensatory Leave Request" %}
   </h2>
-  <button
-    class="oh-modal_close--custom"
-    aria-label="Close"
-    onclick="$(this).parents().closest('.oh-modal--show').toggleClass('oh-modal--show')"
-  >
-    <ion-icon name="close-outline"></ion-icon>
-  </button>
+    <button class="oh-modal__close--custom" onclick="$(this).closest('.oh-modal--show').removeClass('oh-modal--show');">
+      <ion-icon name="close-outline" role="img" class="md hydrated" aria-label="close outline"></ion-icon>
+    </button>
 </div>
 <form
   hx-post="{% url 'reject-compensatory-leave' comp_id %}"
diff --git a/leave/templates/leave/dashboard.html b/leave/templates/leave/dashboard.html
index 25fc7dc00..e6cecd83f 100644
--- a/leave/templates/leave/dashboard.html
+++ b/leave/templates/leave/dashboard.html
@@ -2,6 +2,7 @@
 {% load static %}
 {% load i18n %}
 {% block content %}
+{% include 'generic/components.html' %}
 {% load tz %}
 
 {% now "Y-m-d" as current_date %}
diff --git a/leave/templates/leave/employee_dashboard.html b/leave/templates/leave/employee_dashboard.html
index 812cbfd1b..542ca837a 100644
--- a/leave/templates/leave/employee_dashboard.html
+++ b/leave/templates/leave/employee_dashboard.html
@@ -1,6 +1,7 @@
 {% extends 'index.html' %}
 {% load static %}
 {% block content %}
+{% include 'generic/components.html' %}
 {% load i18n %}
 <style>
     .oh-dashboard__right {
@@ -87,10 +88,13 @@
                             <input type="month" hx-trigger="change delay:100ms" class="float-end month"
                                 hx-get="{% url 'dashboard-leave-requests' %}" hx-target="#leaveRequest">
                         </div>
-                        <div class="oh-card-dashboard__body" id="leaveRequest"
-                            hx-get="{% url 'dashboard-leave-requests' %}" hx-trigger="load">
-                            <div class="animated-background"></div>
+                        <div class=" oh-card-dashboard__body" id="leaveRequest"  style="height:80%">
+                            <div class="oh-sticky-table h-100" hx-get="{% url 'dashboard-total-leave-request' %}" hx-trigger="load" style="border: none;">
+                            </div>
                         </div>
+                        {% comment %} <div class="oh-card-dashboard__body" id="leaveRequest" style="height:35vh;overflow-y:auto">
+                            {% include 'leave/leave_request/dashboard_leave_requests.html' %}
+                        </div>  {% endcomment %}
                     </div>
                 </div>
             </div>
diff --git a/leave/templates/leave/holiday/holiday_form.html b/leave/templates/leave/holiday/holiday_form.html
index 73b238b0e..9c9eb33eb 100644
--- a/leave/templates/leave/holiday/holiday_form.html
+++ b/leave/templates/leave/holiday/holiday_form.html
@@ -12,6 +12,7 @@
   setTimeout(() => {
     $(".oh-modal__close").click();
   }, 1000);
+  $(".reload-record").click();
 </script>
 {% endif %}
 <div class="oh-modal__dialog-header pb-0">
diff --git a/leave/templates/leave/holiday/holiday_update_form.html b/leave/templates/leave/holiday/holiday_update_form.html
index 020c20dab..1c3877786 100644
--- a/leave/templates/leave/holiday/holiday_update_form.html
+++ b/leave/templates/leave/holiday/holiday_update_form.html
@@ -12,6 +12,7 @@
   setTimeout(() => {
     $(".oh-modal__close").click();
   }, 1000);
+  $(".reload-record").click();
 </script>
 {% endif %}
 <div class="oh-modal__dialog-header pb-0">
diff --git a/leave/templates/leave/leave_assign/available_update_form.html b/leave/templates/leave/leave_assign/available_update_form.html
index a1f5ada97..ca22823d9 100644
--- a/leave/templates/leave/leave_assign/available_update_form.html
+++ b/leave/templates/leave/leave_assign/available_update_form.html
@@ -23,6 +23,26 @@
             {% endfor %}
         </div>
     </div>
+  </div>
+  {% endfor %}
+  <script>
+    setTimeout(function () {
+      $(".oh-modal__close--custom").click();
+    }, 1000);
+    $(document).ready(function(){
+      $('.reload-record').click();
+    })
+  </script>
+</div>
+{% endif %} {% if form.errors %}
+<!-- form errors  -->
+<div class="oh-wrapper">
+  <div class="oh-alert-container">
+    {% for error in form.non_field_errors %}
+    <div class="oh-alert oh-alert--animated oh-alert--danger">{{ error }}</div>
+    {% endfor %}
+  </div>
+</div>
 {% endif %}
 <div class="oh-modal__dialog-header">
     <span class="oh-modal__dialog-title" id="updateAssignLeaveModalLabel">{% trans "Update Available Leave" %}</span>
diff --git a/leave/templates/leave/leave_assign/leave_assign_form.html b/leave/templates/leave/leave_assign/leave_assign_form.html
index 34c5c6673..bb3688197 100644
--- a/leave/templates/leave/leave_assign/leave_assign_form.html
+++ b/leave/templates/leave/leave_assign/leave_assign_form.html
@@ -11,6 +11,9 @@
     setTimeout(function () {
       $(".oh-modal__close").click();
     }, 2000);
+    $(document).ready(function(){
+      $('.reload-record').click();
+    })
   </script>
 </div>
 {% endif %} {% if form.errors %}
diff --git a/leave/templates/leave/leave_request/leave_requests.html b/leave/templates/leave/leave_request/leave_requests.html
index 05400b052..5a11d40c6 100644
--- a/leave/templates/leave/leave_request/leave_requests.html
+++ b/leave/templates/leave/leave_request/leave_requests.html
@@ -1,4 +1,4 @@
-{% load i18n %}
+2{% load i18n %}
 {% load static %}
 {% load basefilters %}
 {% load horillafilters %}
diff --git a/leave/templates/leave/leave_request/penalty/form.html b/leave/templates/leave/leave_request/penalty/form.html
index 2d3dc5698..65cd5310f 100644
--- a/leave/templates/leave/leave_request/penalty/form.html
+++ b/leave/templates/leave/leave_request/penalty/form.html
@@ -18,7 +18,6 @@
 <div class="oh-modal__dialog-header">
   <button type="button" class="oh-modal__close--custom"
       onclick = "$(this).closest('.oh-modal--show').removeClass('oh-modal--show')"
-      hx-target="#leaveRequest" hx-get="{% url 'request-filter' %}?{{pd}}"
       aria-label="Close">
     <ion-icon name="close-outline"></ion-icon>
   </button>
diff --git a/leave/templates/leave/user_leave/user_leave.html b/leave/templates/leave/user_leave/user_leave.html
index 374e10ae0..f2607e83a 100644
--- a/leave/templates/leave/user_leave/user_leave.html
+++ b/leave/templates/leave/user_leave/user_leave.html
@@ -1,6 +1,4 @@
 {% load i18n %}
-{% include 'filter_tags.html' %}
-
 <style>
     .oh-scrollable-container {
         overflow-x: auto;
@@ -18,8 +16,6 @@
         border-radius:15px;
     }
 </style>
-
-
 <div class="oh-scrollable-container oh-wrapper mb-3">
     <div class="oh-layout--grid-3 mt-2 mb-2">
         {% for user_leave in user_leaves %}
diff --git a/leave/templatetags/leavefilters.py b/leave/templatetags/leavefilters.py
index fc9ec39d9..f89d62147 100644
--- a/leave/templatetags/leavefilters.py
+++ b/leave/templatetags/leavefilters.py
@@ -1,7 +1,8 @@
 from django import template
 from django.template.defaultfilters import register
 
-from leave.models import LeaveGeneralSetting
+from employee.models import Employee
+from leave.models import LeaveGeneralSetting, LeaveRequest
 
 register = template.Library()
 
diff --git a/leave/urls.py b/leave/urls.py
index e46a63335..429b67d02 100644
--- a/leave/urls.py
+++ b/leave/urls.py
@@ -2,15 +2,128 @@ from django import views
 from django.apps import apps
 from django.urls import path
 
+from base.cbv import company_leaves, holidays
+from employee.models import Employee
+
+if apps.is_installed("attendance"):
+    from leave.cbv import compensatory_leave_request
+
 from base.views import object_duplicate
 from employee.models import Employee
+from leave.cbv import (
+    assigned_leave,
+    dashboard,
+    leave_allocation_request,
+    leave_requests,
+    leave_tab,
+    leave_types,
+    my_leave_request,
+    restricted_days,
+)
 from leave.forms import RestrictLeaveForm
 
 from . import models, views
 
 urlpatterns = [
+    path(
+        "individual-leave-tab-list/<int:pk>/",
+        leave_tab.IndividualLeaveTab.as_view(),
+        name="individual-leave-tab-list",
+    ),
+    path(
+        "user-request-view/",
+        my_leave_request.MyLeaveRequestView.as_view(),
+        name="user-request-view",
+    ),
+    path(
+        "user-request-filter/",
+        my_leave_request.MyLeaveRequestListView.as_view(),
+        name="user-request-filter",
+    ),
+    path(
+        "my-leave-request-nav/",
+        my_leave_request.MyLeaveRequestNavView.as_view(),
+        name="my-leave-request-nav",
+    ),
+    path(
+        "my-leave-request-detail-view/<int:pk>/",
+        my_leave_request.MyLeaveRequestDetailView.as_view(),
+        name="my-leave-request-detail-view",
+    ),
+    path(
+        "request-view/",
+        leave_requests.LeaveRequestsView.as_view(),
+        name="request-view",
+    ),
+    # user-leave-filter
+    path(
+        "request-filter/",
+        leave_requests.LeaveRequestsListView.as_view(),
+        name="request-filter",
+    ),
+    path(
+        "leave-requests-nav/",
+        leave_requests.LeaveRequestsNavView.as_view(),
+        name="leave-requests-nav",
+    ),
+    path(
+        "leave-requests-nav-export/",
+        leave_requests.LeaveRequestsExportNav.as_view(),
+        name="leave-requests-nav-export",
+    ),
+    path(
+        "leave-requests-detail-view/<int:pk>/",
+        leave_requests.LeaveRequestsDetailView.as_view(),
+        name="leave-requests-detail-view",
+    ),
+    path(
+        "assign-view/",
+        assigned_leave.AssignedLeaveViewPage.as_view(),
+        name="assign-view",
+    ),
+    path(
+        "assign-filter/",
+        assigned_leave.AssignedleaveList.as_view(),
+        name="assign-filter",
+    ),
+    path(
+        "assigned-leave-nav/",
+        assigned_leave.AssignedLeaveNavView.as_view(),
+        name="assigned-leave-nav",
+    ),
+    path(
+        "assigned-leave-nav-export/",
+        assigned_leave.AssignedLeaveExport.as_view(),
+        name="assigned-leave-nav-export",
+    ),
+    path(
+        "available-leave-single-view/<int:pk>/",
+        assigned_leave.AssignedLeaveDetailView.as_view(),
+        name="available-leave-single-view",
+    ),
+    path("type-view/", leave_types.LeaveTypeView.as_view(), name="type-view"),
+    path(
+        "leave-type-list/",
+        leave_types.LeaveTypeListView.as_view(),
+        name="leave-type-list",
+    ),
+    path(
+        "leave-type-navbar/",
+        leave_types.LeaveTypeNavView.as_view(),
+        name="leave-type-navbar",
+    ),
+    path(
+        "leave-type-detail-view/<int:pk>/",
+        leave_types.LeaveTypeDetailView.as_view(),
+        name="leave-type-detail-view",
+    ),
+    path(
+        "leave-type-card-view/",
+        leave_types.LeaveTypeCardView.as_view(),
+        name="leave-type-card-view",
+    ),
     path("type-creation", views.leave_type_creation, name="type-creation"),
-    path("type-view/", views.leave_type_view, name="type-view"),
+    # path("type-view/", views.leave_type_view, name="type-view"),
     path(
         "leave-type-individual-view/<int:id>",
         views.leave_type_individual_view,
@@ -24,15 +137,25 @@ urlpatterns = [
     ),
     path("type-delete/<int:obj_id>", views.leave_type_delete, name="type-delete"),
     path("type-filter", views.leave_type_filter, name="type-filter"),
-    path("request-creation", views.leave_request_creation, name="request-creation"),
+    # path("request-creation", views.leave_request_creation, name="request-creation"),
+    path(
+        "request-creation",
+        leave_requests.LeaveRequestFormView.as_view(),
+        name="request-creation",
+    ),
     path(
         "get-employee-leave-types",
         views.get_employee_leave_types,
         name="get-employee-leave-types",
     ),
+    # path(
+    #     "leave-request-creation/<int:type_id>/<int:emp_id>",
+    #     views.leave_request_creation,
+    #     name="leave-request-creation",
+    # ),
     path(
         "leave-request-creation/<int:type_id>/<int:emp_id>",
-        views.leave_request_creation,
+        leave_requests.LeaveRequestFormView.as_view(),
         name="leave-request-creation",
     ),
     path(
@@ -45,7 +168,6 @@ urlpatterns = [
         views.create_leave_report,
         name="create-leave-report",
     ),
-    path("request-view/", views.leave_request_view, name="request-view"),
     path(
         "request-approve/<int:id>", views.leave_request_approve, name="request-approve"
     ),
@@ -70,23 +192,40 @@ urlpatterns = [
         views.leave_request_cancel,
         name="request-cancel",
     ),
-    path("request-update/<int:id>", views.leave_request_update, name="request-update"),
-    path("request-delete/<int:id>", views.leave_request_delete, name="request-delete"),
-    path("user-request/<int:id>", views.user_leave_request, name="user-request"),
-    path("request-filter", views.leave_request_filter, name="request-filter"),
-    path("assign", views.leave_assign, name="assign"),
-    path("assign-one/<int:obj_id>", views.leave_assign_one, name="assign-one"),
-    path("assign-view/", views.leave_assign_view, name="assign-view"),
+    # path("request-update/<int:id>", views.leave_request_update, name="request-update"),
     path(
-        "available-leave-single-view/<int:obj_id>/",
-        views.available_leave_single_view,
-        name="available-leave-single-view",
+        "request-update/<int:pk>",
+        leave_requests.LeaveRequestFormView.as_view(),
+        name="request-update",
     ),
+    path("request-delete/<int:id>", views.leave_request_delete, name="request-delete"),
+    # path("user-request/<int:id>", views.user_leave_request, name="user-request"),
+    path(
+        "user-request/<int:leave>",
+        my_leave_request.MyLeaveRequestSingleForm.as_view(),
+        name="user-request",
+    ),
+    # path("request-filter", views.leave_request_filter, name="request-filter"),
+    path("assign", views.leave_assign, name="assign"),
+    # path("assign",assigned_leave.AssignedLeaveFormView.as_view(),name="assign"),
+    # path("assign-one/<int:id>", views.leave_assign_one, name="assign-one"),
+    path(
+        "assign-one/<int:pk>/",
+        leave_types.LeaveTypeAssignForm.as_view(),
+        name="assign-one",
+    ),
+    # path("assign-view/", views.leave_assign_view, name="assign-view"),
+    # path(
+    #     "available-leave-single-view/<int:obj_id>/",
+    #     views.available_leave_single_view,
+    #     name="available-leave-single-view",
+    # ),
     path(
         "available-leave-update/<int:id>",
         views.available_leave_update,
         name="available-leave-update",
     ),
+    # path("available-leave-update/<int:pk>",assigned_leave.AssignedLeaveFormView.as_view(),name="available-leave-update"),
     path("assign-delete/<int:obj_id>", views.leave_assign_delete, name="assign-delete"),
     path(
         "assigned-leave-bulk-delete",
@@ -108,7 +247,22 @@ urlpatterns = [
         views.assigned_leaves_export,
         name="assigned-leaves-info-export",
     ),
-    path("assign-filter", views.leave_assign_filter, name="assign-filter"),
+    # path("assign-filter", views.leave_assign_filter, name="assign-filter"),
+    path("get_job_positions", views.get_job_positions, name="get_job_positions"),
+    # path("restrict-view", views.restrict_view, name="restrict-view"),
+    # path("restrict-filter", views.restrict_filter, name="restrict-filter"),
+    # path("restrict-creation", views.restrict_creation, name="restrict-creation"),
+    path(
+        "restrict-creation",
+        restricted_days.RestrictedDaysFormView.as_view(),
+        name="restrict-creation",
+    ),
+    # path("restrict-update/<int:id>", views.restrict_update, name="restrict-update"),
+    path(
+        "restrict-update/<int:pk>",
+        restricted_days.RestrictedDaysFormView.as_view(),
+        name="restrict-update",
+    ),
     path(
         "get-restrict-job-positions",
         views.get_job_positions,
@@ -131,10 +285,15 @@ urlpatterns = [
     ),
     path("restrict-day-select", views.restrict_day_select, name="restrict-day-select"),
     path("user-leave-filter", views.user_leave_filter, name="user-leave-filter"),
-    path("user-request-view/", views.user_request_view, name="user-request-view"),
+    # path("user-request-view/", views.user_request_view, name="user-request-view"),
+    # path(
+    #     "user-request-update/<int:id>",
+    #     views.user_request_update,
+    #     name="user-request-update",
+    # ),
     path(
-        "user-request-update/<int:id>",
-        views.user_request_update,
+        "user-request-update/<int:pk>/",
+        my_leave_request.MyLeaveRequestForm.as_view(),
         name="user-request-update",
     ),
     path(
@@ -148,7 +307,7 @@ urlpatterns = [
         name="user-request-cancel",
     ),
     path("one-request-view/<int:id>", views.one_request_view, name="one-request-view"),
-    path("user-request-filter", views.user_request_filter, name="user-request-filter"),
+    # path("user-request-filter", views.user_request_filter, name="user-request-filter"),
     path("user-request-one/<int:id>", views.user_request_one, name="user-request-one"),
     path("employee-leave", views.employee_leave, name="employee-leave"),
     path("overall-leave", views.overall_leave, name="overall-leave"),
@@ -174,34 +333,49 @@ urlpatterns = [
     ),
     path("leave-type-chart", views.leave_type_chart, name="leave-type-chart"),
     path("leave-over-period", views.leave_over_period, name="leave-over-period"),
+    # path(
+    #     "leave-request-create", views.leave_request_create, name="leave-request-create"
+    # ),
     path(
-        "leave-request-create", views.leave_request_create, name="leave-request-create"
+        "leave-request-create",
+        my_leave_request.MyLeaveRequestForm.as_view(),
+        name="leave-request-create",
     ),
     path(
-        "leave-allocation-request-view/",
-        views.leave_allocation_request_view,
-        name="leave-allocation-request-view",
+        "employee-leave-details",
+        views.employee_leave_details,
+        name="employee-leave-details",
     ),
+    # path(
+    #     "leave-allocation-request-view/",
+    #     views.leave_allocation_request_view,
+    #     name="leave-allocation-request-view",
+    # ),
+    # path(
+    #     "leave-allocation-request-create",
+    #     views.leave_allocation_request_create,
+    #     name="leave-allocation-request-create",
+    # ),
     path(
         "leave-allocation-request-create",
-        views.leave_allocation_request_create,
+        leave_allocation_request.LeaveAllocationRequestFormView.as_view(),
         name="leave-allocation-request-create",
     ),
-    path(
-        "leave-allocation-request-filter",
-        views.leave_allocation_request_filter,
-        name="leave-allocation-request-filter",
-    ),
+    # path(
+    #     "leave-allocation-request-filter",
+    #     views.leave_allocation_request_filter,
+    #     name="leave-allocation-request-filter",
+    # ),
     path(
         "leave-allocation-request-single-view/<int:req_id>",
         views.leave_allocation_request_single_view,
         name="leave-allocation-request-single-view",
     ),
-    path(
-        "leave-allocation-request-update/<int:req_id>",
-        views.leave_allocation_request_update,
-        name="leave-allocation-request-update",
-    ),
+    # path(
+    #     "leave-allocation-request-update/<int:req_id>",
+    #     views.leave_allocation_request_update,
+    #     name="leave-allocation-request-update",
+    # ),
     path(
         "leave-allocation-request-approve/<int:req_id>",
         views.leave_allocation_request_approve,
@@ -217,19 +391,24 @@ urlpatterns = [
         views.leave_allocation_request_delete,
         name="leave-allocation-request-delete",
     ),
+    # path(
+    #     "leave-allocation-request-view/",
+    #     views.leave_allocation_request_view,
+    #     name="leave-allocation-request-view",
+    # ),
+    # path(
+    #     "leave-allocation-request-filter",
+    #     views.leave_allocation_request_filter,
+    #     name="leave-allocation-request-filter",
+    # ),
+    # path(
+    #     "leave-allocation-request-update/<int:req_id>",
+    #     views.leave_allocation_request_update,
+    #     name="leave-allocation-request-update",
+    # ),
     path(
-        "leave-allocation-request-view/",
-        views.leave_allocation_request_view,
-        name="leave-allocation-request-view",
-    ),
-    path(
-        "leave-allocation-request-filter",
-        views.leave_allocation_request_filter,
-        name="leave-allocation-request-filter",
-    ),
-    path(
-        "leave-allocation-request-update/<int:req_id>",
-        views.leave_allocation_request_update,
+        "leave-allocation-request-update/<int:pk>",
+        leave_allocation_request.LeaveAllocationRequestFormView.as_view(),
         name="leave-allocation-request-update",
     ),
     path(
@@ -323,8 +502,13 @@ urlpatterns = [
         name="delete-allocation-comment-file",
     ),
     path(
-        "view-clashes/<int:leave_request_id>/", views.view_clashes, name="view-clashes"
+        "view-clashes/<int:pk>/",
+        leave_requests.LeaveClashListView.as_view(),
+        name="view-clashes",
     ),
+    # path(
+    #     "view-clashes/<int:leave_request_id>/", views.view_clashes, name="view-clashes"
+    # ),
     path(
         "compensatory-leave-settings-view/",
         views.compensatory_leave_settings_view,
@@ -340,22 +524,113 @@ urlpatterns = [
         views.employee_past_leave_restriction,
         name="employee-past-leave-restriction",
     ),
+    # path(
+    #     "leave-tab/<int:obj_id>/",
+    #     views.employee_view_individual_leave_tab,
+    #     name="leave-tab",
+    #     kwargs={"model": Employee},
+    # ),
     path(
-        "leave-tab/<int:obj_id>/",
+        "leave-tab/<int:pk>/",
         views.employee_view_individual_leave_tab,
         name="leave-tab",
         kwargs={"model": Employee},
     ),
+    # path(
+    #     "leave-request-and-approve",
+    #     views.leave_request_and_approve,
+    #     name="leave-request-and-approve",
+    # ),
     path(
-        "leave-request-and-approve",
-        views.leave_request_and_approve,
-        name="leave-request-and-approve",
+        "dashboard-on-leave/",
+        dashboard.DashboardOnLeave.as_view(),
+        name="dashboard-on-leave",
     ),
+    path(
+        "dashboard-total-leave-request/",
+        dashboard.DashboardTotalLeaveRequest.as_view(),
+        name="dashboard-total-leave-request",
+    ),
+    path(
+        "leave-request-and-approve",
+        dashboard.LeaveRequestsToApprove.as_view(),
+        name="leave-request-and-approve",
+    ),
+    # path(
+    #     "leave-allocation-approve",
+    #     views.leave_allocation_approve,
+    #     name="leave-allocation-approve",
+    # ),
     path(
         "leave-allocation-approve",
-        views.leave_allocation_approve,
+        dashboard.LeaveAllocationRequestToApprove.as_view(),
         name="leave-allocation-approve",
     ),
+    path(
+        "leave-allocation-request-view/",
+        leave_allocation_request.LeaveAllocationRequestView.as_view(),
+        name="leave-allocation-request-view",
+    ),
+    path(
+        "list-leave-allocation-request/",
+        leave_allocation_request.LeaveAllocationRequestList.as_view(),
+        name="list-leave-allocation-request",
+    ),
+    path(
+        "leave-allocation-request-filter/",
+        leave_allocation_request.LeaveAllocationRequestTab.as_view(),
+        name="leave-allocation-request-filter",
+    ),
+    path(
+        "my-leave-allocation-request-tab/",
+        leave_allocation_request.MyLeaveAllocationRequest.as_view(),
+        name="my-leave-allocation-request-tab",
+    ),
+    path(
+        "leave-allocation-requests-tab-view/",
+        leave_allocation_request.LeaveAllocationRequests.as_view(),
+        name="leave-allocation-requests-tab-view",
+    ),
+    path(
+        "nav-leave-allocation-request/",
+        leave_allocation_request.LeaveAllocationRequestNav.as_view(),
+        name="nav-leave-allocation-request",
+    ),
+    path(
+        "detail-leave-allocation-request/<int:pk>/",
+        leave_allocation_request.LeaveAllocationRequestDetailView.as_view(),
+        name="detail-leave-allocation-request",
+    ),
+    path(
+        "leave-allocation-request-detail-view/<int:pk>/",
+        leave_allocation_request.LeaveAllocationsRequestsTabDetailView.as_view(),
+        name="leave-allocation-request-detail-view",
+    ),
+    path(
+        "restrict-view",
+        restricted_days.RestrictedDaysView.as_view(),
+        name="restrict-view",
+    ),
+    path(
+        "restrict-filter",
+        restricted_days.RestrictedDaysList.as_view(),
+        name="restrict-filter",
+    ),
+    path(
+        "nav-restricted-days",
+        restricted_days.RestrictedDaysNav.as_view(),
+        name="nav-restricted-days",
+    ),
+    path(
+        "restricted-days-detail-view/<int:pk>/",
+        restricted_days.RestrictedDaysDetailView.as_view(),
+        name="restricted-days-detail-view",
+    ),
+    path(
+        "employee-past-leave-restriction",
+        views.employee_past_leave_restriction,
+        name="employee-past-leave-restriction",
+    ),
     path(
         "cut-penalty/<int:instance_id>/",
         views.cut_available_leave,
@@ -388,16 +663,56 @@ if apps.is_installed("attendance"):
 
     urlpatterns.extend(
         [
+            path(
+                "view-compensatory-leave/",
+                compensatory_leave_request.CompensatoryLeaveView.as_view(),
+                name="view-compensatory-leave",
+            ),
+            path(
+                "compensatory-list/",
+                compensatory_leave_request.CompensatoryListView.as_view(),
+                name="compensatory-list",
+            ),
+            path(
+                "compensatory-nav/",
+                compensatory_leave_request.CompensatoryNavView.as_view(),
+                name="compensatory-nav",
+            ),
+            path(
+                "compensatory-tab-view/",
+                compensatory_leave_request.CompensatoryLeaveTabView.as_view(),
+                name="compensatory-tab-view",
+            ),
+            path(
+                "my-compensatory-tab/",
+                compensatory_leave_request.MyCompensatoryLeaveTab.as_view(),
+                name="my-compensatory-tab",
+            ),
+            path(
+                "compensatory-tab/",
+                compensatory_leave_request.CompensatoryLeaveTab.as_view(),
+                name="compensatory-tab",
+            ),
+            path(
+                "my-compensatory-detail-view/<int:pk>/",
+                compensatory_leave_request.MyCompensatoryDetailView.as_view(),
+                name="my-compensatory-detail-view",
+            ),
+            path(
+                "compensatory-detail-view/<int:pk>/",
+                compensatory_leave_request.CompensatoryTabDetailView.as_view(),
+                name="compensatory-detail-view",
+            ),
             path(
                 "get-leave-attendance-dates",
                 views.get_leave_attendance_dates,
                 name="get-leave-attendance-dates",
             ),
-            path(
-                "view-compensatory-leave",
-                views.view_compensatory_leave,
-                name="view-compensatory-leave",
-            ),
+            # path(
+            #     "view-compensatory-leave",
+            #     views.view_compensatory_leave,
+            #     name="view-compensatory-leave",
+            # ),
             path(
                 "filter-compensatory-leave",
                 views.filter_compensatory_leave,
@@ -405,14 +720,24 @@ if apps.is_installed("attendance"):
             ),
             path(
                 "create-compensatory-leave",
-                views.create_compensatory_leave,
+                compensatory_leave_request.CompensatoryForm.as_view(),
                 name="create-compensatory-leave",
             ),
+            # path(
+            #     "create-compensatory-leave",
+            #     views.create_compensatory_leave,
+            #     name="create-compensatory-leave",
+            # ),
             path(
-                "update-compensatory-leave/<int:comp_id>",
-                views.create_compensatory_leave,
+                "update-compensatory-leave/<int:pk>",
+                compensatory_leave_request.CompensatoryForm.as_view(),
                 name="update-compensatory-leave",
             ),
+            # path(
+            #     "update-compensatory-leave/<int:comp_id>",
+            #     views.create_compensatory_leave,
+            #     name="update-compensatory-leave",
+            # ),
             path(
                 "delete-compensatory-leave/<int:comp_id>",
                 views.delete_compensatory_leave,
diff --git a/leave/views.py b/leave/views.py
index 48af848d7..e2407099e 100644
--- a/leave/views.py
+++ b/leave/views.py
@@ -126,7 +126,7 @@ def leave_type_creation(request):
         if form.is_valid():
             form.save()
             messages.success(request, _("New leave type Created.."))
-            return redirect(leave_type_view)
+            return redirect(reverse("type-view"))
     return render(request, "leave/leave_type/leave_type_creation.html", {"form": form})
 
 
@@ -258,7 +258,7 @@ def leave_type_update(request, id, **kwargs):
         return redirect(leave_type_view)
     form = UpdateLeaveTypeForm(instance=leave_type)
     compensatory = request.GET.get("compensatory")
-    redirect_url = leave_type_view
+    redirect_url = reverse("type-view")
     if compensatory:
         redirect_url = compensatory_leave_settings_view
     if request.method == "POST":
@@ -320,7 +320,7 @@ def leave_type_delete(request, obj_id):
                 f"/leave/leave-type-individual-view/{next_instance}?instances_ids={instances_list}"
             )
         return redirect(f"/leave/type-filter?{request.GET.urlencode()}")
-    return redirect(leave_type_view)
+    return redirect(reverse("type-view"))
 
 
 @login_required
@@ -984,7 +984,7 @@ def leave_request_delete(request, id):
             return redirect(f"/leave/request-filter?{previous_data}")
         else:
             return HttpResponse("<script>window.location.reload();</script>")
-    return redirect(leave_request_view)
+    return redirect(reverse("request-filter"))
 
 
 @login_required
@@ -1735,20 +1735,23 @@ def leave_assign_delete(request, obj_id):
     except AvailableLeave.DoesNotExist:
         messages.error(request, _("Assigned leave not found."))
     except ProtectedError:
-        messages.error(request, _("Related entries exist."))
-
-    if instances_ids := request.GET.get("instances_ids"):
+        messages.error(request, _("Related entries exists"))
+    if not request.GET.get("instances_ids"):
+        if not AvailableLeave.objects.filter():
+            return HttpResponse("<script>window.location.reload()</script>")
+        return redirect("/leave/assign-filter?field=leave_type_id")
+    else:
+        instances_ids = request.GET.get("instances_ids")
         instances_list = json.loads(instances_ids)
         previous_instance, next_instance = closest_numbers(instances_list, obj_id)
         if obj_id in instances_list:
             instances_list.remove(obj_id)
         return redirect(
-            f"/leave/available-leave-single-view/{next_instance}/?{pd}&instances_ids={json.dumps(instances_list)}"
+            f"/leave/available-leave-single-view/{next_instance}/?instances_ids={instances_list}&deleted=true"
         )
-
-    if not AvailableLeave.objects.exists():
-        return HttpResponse("<script>window.location.reload()</script>")
-    return redirect(f"/leave/assign-filter?{pd}")
+    # if not AvailableLeave.objects.exists():
+    #     return HttpResponse("<script>window.location.reload()</script>")
+    # return redirect(f"/leave/assign-filter?{pd}")
 
 
 @require_http_methods(["POST"])
@@ -1784,6 +1787,8 @@ def assign_leave_type_excel(_request):
         columns = [
             "Employee Badge ID",
             "Leave Type",
+            "Available Days",
+            "Carry Forward Days",
         ]
         data_frame = pd.DataFrame(columns=columns)
         response = HttpResponse(content_type="application/ms-excel")
@@ -2081,6 +2086,10 @@ def restrict_delete(request, id):
     Returns:
     GET : return restricted days view template
     """
+    request_copy = request.GET.copy()
+    request_copy.pop("instances_ids", None)
+    previous_data = request_copy.urlencode()
+
     query_string = request.GET.urlencode()
     try:
         RestrictLeave.objects.get(id=id).delete()
@@ -2089,6 +2098,19 @@ def restrict_delete(request, id):
         messages.error(request, _("Restricted day not found."))
     except ProtectedError:
         messages.error(request, _("Related entries exists"))
+
+    hx_target = request.META.get("HTTP_HX_TARGET")
+    if hx_target and hx_target == "genericModalBody":
+        instances_ids = request.GET.get("instances_ids")
+        instances_list = json.loads(instances_ids)
+        if id in instances_list:
+            instances_list.remove(id)
+            previous_instance, next_instance = closest_numbers(
+                json.loads(instances_ids), id
+            )
+        return redirect(
+            f"/leave/restricted-days-detail-view/{next_instance}/?{previous_data}&instance_ids={instances_list}&deleted=true"
+        )
     if not RestrictLeave.objects.filter():
         return HttpResponse("<script>window.location.reload();</script>")
     return redirect(f"/leave/restrict-filter?{query_string}")
@@ -2447,6 +2469,9 @@ def user_request_delete(request, id):
     Returns:
     GET : return user leave request view template
     """
+
+    hx_target = request.META.get("HTTP_HX_TARGET", None)
+
     previous_data = request.GET.urlencode()
     try:
         leave_request = LeaveRequest.objects.get(id=id)
@@ -2457,6 +2482,9 @@ def user_request_delete(request, id):
         messages.error(request, _("User has no leave request.."))
     except ProtectedError:
         messages.error(request, _("Related entries exists"))
+    if hx_target and hx_target == "genericModalBody":
+        return HttpResponse("<script>window.location.reload();</script>")
+
     if not LeaveRequest.objects.filter(employee_id=request.user.employee_get):
         return HttpResponse("<script>window.location.reload();</script>")
     else:
@@ -3235,6 +3263,30 @@ def leave_request_create(request):
     )
 
 
+@login_required
+def employee_leave_details(request):
+    balance_count = ""
+    if request.POST["employee_id"]:
+        employee = request.POST["employee_id"]
+    else:
+        employee = ""
+    date = request.POST.get("date", "")
+    if request.POST["leave_type"] and request.POST["employee_id"]:
+        leave_type_id = request.POST["leave_type"]
+        leave_type = LeaveType.objects.filter(id=leave_type_id).first()
+        balance = AvailableLeave.objects.filter(
+            Q(leave_type_id=leave_type.id) & Q(employee_id=employee)
+        )
+        for i in balance:
+            balance_count = i.available_days
+        if date:
+            try:
+                balance_count += balance.first().forcasted_leaves()[date[:7]]
+            except:
+                pass
+    return JsonResponse({"leave_count": balance_count, "employee": employee})
+
+
 @login_required
 def leave_allocation_request_view(request):
     """
@@ -3667,6 +3719,9 @@ def leave_allocation_request_delete(request, req_id):
     Returns:
     GET : return leave allocation request view template
     """
+    request_copy = request.GET.copy()
+    request_copy.pop("instances_ids", None)
+    previous_data = request_copy.urlencode()
 
     try:
         leave_allocation_request = LeaveAllocationRequest.objects.get(id=req_id)
@@ -3687,25 +3742,26 @@ def leave_allocation_request_delete(request, req_id):
         messages.error(request, _("Related entries exist"))
     hx_target = request.META.get("HTTP_HX_TARGET")
     previous_data = request.GET.urlencode()
-    if hx_target and hx_target == "view-container":
+    if hx_target and hx_target == "leave-allocation":
         leave_allocations = LeaveAllocationRequest.objects.all()
         if leave_allocations.exists():
             return redirect(f"/leave/leave-allocation-request-filter?{previous_data}")
         else:
             return HttpResponse("<script>location.reload();</script>")
-    elif hx_target and hx_target == "objectDetailsModalW25Target":
+    elif hx_target and hx_target == "genericModalBody":
         instances_ids = request.GET.get("instances_ids")
         instances_list = json.loads(instances_ids)
         if req_id in instances_list:
             instances_list.remove(req_id)
-        previous_instance, next_instance = closest_numbers(
-            json.loads(instances_ids), req_id
-        )
+            previous_instance, next_instance = closest_numbers(
+                json.loads(instances_ids), req_id
+            )
         return redirect(
-            f"/leave/leave-allocation-request-single-view/{next_instance}?{previous_data}"
+            f"/leave/detail-leave-allocation-request/{next_instance}/?{previous_data}&instance_ids={instances_list}&deleted=true"
         )
+    else:
 
-    return redirect(leave_allocation_request_view)
+        return redirect(reverse("leave-allocation-request-view"))
 
 
 @login_required
@@ -3924,6 +3980,11 @@ def employee_available_leave_count(request):
         if request.GET.getlist("employee_id")
         else None
     )
+    referer = request.headers.get("Referer")
+
+    if not employee_id and "user-request-view" in referer:
+        employee_id = request.user.employee_get
+
     available_leave = (
         AvailableLeave.objects.filter(
             leave_type_id=leave_type_id, employee_id=employee_id
@@ -3951,7 +4012,6 @@ def employee_available_leave_count(request):
             total_leave_days = 0
         total_leave_days += forcasted_days
 
-    print(datetime.today().date())
     pending_requests = available_leave.employee_id.leaverequest_set.filter(
         status="requested", leave_type_id=leave_type_id
     ).exclude(start_date__lt=datetime.today().date())
@@ -5197,11 +5257,11 @@ def employee_profile_leave_tab(request):
 
 
 @login_required
-def employee_view_individual_leave_tab(request, obj_id, **kwargs):
+def employee_view_individual_leave_tab(request, pk, **kwargs):
     """
     This method is used to view profile of an employee.
     """
-    employee = Employee.objects.get(id=obj_id)
+    employee = Employee.objects.get(id=pk)
     instances = (
         LeaveRequest.objects.filter(employee_id=employee)
         if apps.is_installed("leave")
diff --git a/load_data/faqs.json b/load_data/faqs.json
deleted file mode 100644
index 6dc9b9dcd..000000000
--- a/load_data/faqs.json
+++ /dev/null
@@ -1,870 +0,0 @@
-[
-  {
-    "model": "helpdesk.faqcategory",
-    "pk": 1,
-    "fields": {
-      "created_at": "2025-03-12T03:19:37.526Z",
-      "created_by": null,
-      "modified_by": null,
-      "is_active": true,
-      "title": "Leave",
-      "description": "FAQs related to leave are shown here"
-    }
-  },
-  {
-    "model": "helpdesk.faqcategory",
-    "pk": 2,
-    "fields": {
-      "created_at": "2025-03-12T03:19:37.542Z",
-      "created_by": null,
-      "modified_by": null,
-      "is_active": true,
-      "title": "Attendance",
-      "description": "FAQs related to attendance are shown here"
-    }
-  },
-  {
-    "model": "helpdesk.faqcategory",
-    "pk": 3,
-    "fields": {
-      "created_at": "2025-03-12T03:19:37.558Z",
-      "created_by": null,
-      "modified_by": null,
-      "is_active": true,
-      "title": "Employee",
-      "description": "FAQs related to employee are shown here"
-    }
-  },
-  {
-    "model": "helpdesk.faqcategory",
-    "pk": 4,
-    "fields": {
-      "created_at": "2025-03-12T03:19:37.570Z",
-      "created_by": null,
-      "modified_by": null,
-      "is_active": true,
-      "title": "Base",
-      "description": "FAQs related to base are shown here"
-    }
-  },
-  {
-    "model": "helpdesk.faqcategory",
-    "pk": 5,
-    "fields": {
-      "created_at": "2025-03-12T03:19:37.583Z",
-      "created_by": null,
-      "modified_by": null,
-      "is_active": true,
-      "title": "Recruitment",
-      "description": "FAQs related to recruitment are shown here"
-    }
-  },
-  {
-    "model": "helpdesk.faqcategory",
-    "pk": 6,
-    "fields": {
-      "created_at": "2025-03-12T06:16:05.685Z",
-      "created_by": 1,
-      "modified_by": 1,
-      "is_active": true,
-      "title": "Payroll",
-      "description": "FAQs related to attendance are shown here"
-    }
-  },
-  {
-    "model": "helpdesk.faqcategory",
-    "pk": 7,
-    "fields": {
-      "created_at": "2025-03-12T06:46:44.110Z",
-      "created_by": 1,
-      "modified_by": 1,
-      "is_active": true,
-      "title": "Asset",
-      "description": "FAQs related to attendance are shown here"
-    }
-  },
-  {
-    "model": "helpdesk.faq",
-    "pk": 1,
-    "fields": {
-      "created_at": "2025-03-12T03:19:37.597Z",
-      "created_by": null,
-      "modified_by": null,
-      "is_active": true,
-      "question": "How to create a leave request?",
-      "answer": "Click on My Leave Request > Select Leave Type > Fill out the form",
-      "category": 1,
-      "company_id": null
-    }
-  },
-  {
-    "model": "helpdesk.faq",
-    "pk": 2,
-    "fields": {
-      "created_at": "2025-03-12T03:19:38.034Z",
-      "created_by": null,
-      "modified_by": 1,
-      "is_active": true,
-      "question": "How to export work records?",
-      "answer": "Click on Work Records inside Attendance, filter the data and click on Export button",
-      "category": 2,
-      "company_id": null
-    }
-  },
-  {
-    "model": "helpdesk.faq",
-    "pk": 3,
-    "fields": {
-      "created_at": "2025-03-12T03:19:38.147Z",
-      "created_by": null,
-      "modified_by": null,
-      "is_active": true,
-      "question": "How to create a shift request?",
-      "answer": "go to employee --> shift request --> create --> Fill out the form",
-      "category": 4,
-      "company_id": null
-    }
-  },
-  {
-    "model": "helpdesk.faq",
-    "pk": 4,
-    "fields": {
-      "created_at": "2025-03-12T03:19:38.278Z",
-      "created_by": null,
-      "modified_by": 1,
-      "is_active": true,
-      "question": "How to add stage managers to an existing stage?",
-      "answer": "Recruitment --> Stage 3 dot --> Edit --> Managers",
-      "category": 5,
-      "company_id": null
-    }
-  },
-  {
-    "model": "helpdesk.faq",
-    "pk": 5,
-    "fields": {
-      "created_at": "2025-03-12T03:19:38.394Z",
-      "created_by": null,
-      "modified_by": 1,
-      "is_active": true,
-      "question": "What is recruitment pipeline?",
-      "answer": "All the details about the recruitment, stage, and candidate can be controlled from here.",
-      "category": 5,
-      "company_id": null
-    }
-  },
-  {
-    "model": "helpdesk.faq",
-    "pk": 6,
-    "fields": {
-      "created_at": "2025-03-12T03:19:38.503Z",
-      "created_by": null,
-      "modified_by": 1,
-      "is_active": true,
-      "question": "How to create an Employee?",
-      "answer": "Employee > Employees > Create > Fill out the form",
-      "category": 3,
-      "company_id": null
-    }
-  },
-  {
-    "model": "helpdesk.faq",
-    "pk": 7,
-    "fields": {
-      "created_at": "2025-03-12T03:26:34.988Z",
-      "created_by": 1,
-      "modified_by": 1,
-      "is_active": true,
-      "question": "How to assign leave type to employee",
-      "answer": "Leave > Assigned Leave > Assign",
-      "category": 1,
-      "company_id": null
-    }
-  },
-  {
-    "model": "helpdesk.faq",
-    "pk": 8,
-    "fields": {
-      "created_at": "2025-03-12T03:31:56.975Z",
-      "created_by": 1,
-      "modified_by": 1,
-      "is_active": true,
-      "question": "How to create leave types",
-      "answer": "Leave > Leave Types > Create > Fill Out Form",
-      "category": 1,
-      "company_id": null
-    }
-  },
-  {
-    "model": "helpdesk.faq",
-    "pk": 9,
-    "fields": {
-      "created_at": "2025-03-12T03:45:00Z",
-      "created_by": null,
-      "modified_by": 1,
-      "is_active": true,
-      "question": "What is the Attendance Module used for?",
-      "answer": "The Attendance Module tracks and manages employee attendance, including check-ins, check-outs, and biometric integration.",
-      "category": 2,
-      "company_id": null
-    }
-  },
-  {
-    "model": "helpdesk.faq",
-    "pk": 10,
-    "fields": {
-      "created_at": "2025-03-12T03:45:00Z",
-      "created_by": null,
-      "modified_by": 1,
-      "is_active": true,
-      "question": "What is the Check-In/Check-Out system?",
-      "answer": "It records employee working hours by tracking their check-in and check-out times.",
-      "category": 2,
-      "company_id": null
-    }
-  },
-  {
-    "model": "helpdesk.faq",
-    "pk": 11,
-    "fields": {
-      "created_at": "2025-03-12T03:45:00Z",
-      "created_by": null,
-      "modified_by": 1,
-      "is_active": true,
-      "question": "What is the purpose of Biometric Devices?",
-      "answer": "Biometric devices, such as ZKTeco,Matrix COSEC & Anviz synchronize attendance data automatically for accurate tracking.",
-      "category": 2,
-      "company_id": null
-    }
-  },
-  {
-    "model": "helpdesk.faq",
-    "pk": 12,
-    "fields": {
-      "created_at": "2025-03-12T03:45:00Z",
-      "created_by": null,
-      "modified_by": 1,
-      "is_active": true,
-      "question": "How can employees edit their attendance records?",
-      "answer": "Employees can submit an Attendance Request to edit or add missing attendance records.",
-      "category": 2,
-      "company_id": null
-    }
-  },
-  {
-    "model": "helpdesk.faq",
-    "pk": 13,
-    "fields": {
-      "created_at": "2025-03-12T03:45:00Z",
-      "created_by": null,
-      "modified_by": 1,
-      "is_active": true,
-      "question": "What is the Hour Account feature?",
-      "answer": "It tracks total worked hours for employees by month and year.",
-      "category": 2,
-      "company_id": null
-    }
-  },
-  {
-    "model": "helpdesk.faq",
-    "pk": 14,
-    "fields": {
-      "created_at": "2025-03-12T03:45:00Z",
-      "created_by": null,
-      "modified_by": 1,
-      "is_active": true,
-      "question": "What does the Work Records feature do?",
-      "answer": "It compiles daily attendance statuses (e.g., present, absent) into monthly records.",
-      "category": 2,
-      "company_id": null
-    }
-  },
-  {
-    "model": "helpdesk.faq",
-    "pk": 15,
-    "fields": {
-      "created_at": "2025-03-12T03:45:00Z",
-      "created_by": null,
-      "modified_by": 1,
-      "is_active": true,
-      "question": "What is Attendance Activity?",
-      "answer": "It shows attendance records generated from check-ins, check-outs, or biometric devices.",
-      "category": 2,
-      "company_id": null
-    }
-  },
-  {
-    "model": "helpdesk.faq",
-    "pk": 16,
-    "fields": {
-      "created_at": "2025-03-12T03:45:00Z",
-      "created_by": null,
-      "modified_by": 1,
-      "is_active": true,
-      "question": "What does Late Come Early Out mean?",
-      "answer": "It flags employees who check in late or leave early based on their shift schedule.",
-      "category": 2,
-      "company_id": null
-    }
-  },
-  {
-    "model": "helpdesk.faq",
-    "pk": 17,
-    "fields": {
-      "created_at": "2025-03-12T03:45:00Z",
-      "created_by": null,
-      "modified_by": 1,
-      "is_active": true,
-      "question": "What can employees see in My Attendance?",
-      "answer": "Employees can view their previous attendance records and statuses.",
-      "category": 2,
-      "company_id": null
-    }
-  },
-  {
-    "model": "helpdesk.faq",
-    "pk": 18,
-    "fields": {
-      "created_at": "2025-03-12T03:45:00Z",
-      "created_by": null,
-      "modified_by": 1,
-      "is_active": true,
-      "question": "What are Attendance Requests?",
-      "answer": "They allow employees to request modifications to attendance records if errors occur.",
-      "category": 2,
-      "company_id": null
-    }
-  },
-  {
-    "model": "helpdesk.faq",
-    "pk": 19,
-    "fields": {
-      "created_at": "2025-03-12T04:00:00Z",
-      "created_by": null,
-      "modified_by": 1,
-      "is_active": true,
-      "question": "What is the Employee Profile view used for?",
-      "answer": "The Employee Profile view displays all details about an employee, including personal, work, bank information, and more. It also allows employees to customize visible tabs.",
-      "category": 3,
-      "company_id": null
-    }
-  },
-  {
-    "model": "helpdesk.faq",
-    "pk": 20,
-    "fields": {
-      "created_at": "2025-03-12T04:00:00Z",
-      "created_by": null,
-      "modified_by": 1,
-      "is_active": true,
-      "question": "How can an employee request a shift change?",
-      "answer": "Employees can request a shift change through the 'Reallocate Shift' option in the Work Type & Shift tab. Admin approval is required for changes.",
-      "category": 3,
-      "company_id": null
-    }
-  },
-  {
-    "model": "helpdesk.faq",
-    "pk": 21,
-    "fields": {
-      "created_at": "2025-03-12T04:00:00Z",
-      "created_by": null,
-      "modified_by": 1,
-      "is_active": true,
-      "question": "What details can employees view in the Attendance tab?",
-      "answer": "The Attendance tab shows all attendance records for the employee in a detailed tabular view.",
-      "category": 3,
-      "company_id": null
-    }
-  },
-  {
-    "model": "helpdesk.faq",
-    "pk": 22,
-    "fields": {
-      "created_at": "2025-03-12T04:00:00Z",
-      "created_by": null,
-      "modified_by": 1,
-      "is_active": true,
-      "question": "What actions are available in the Employee Directory?",
-      "answer": "The Employee Directory allows actions like importing, exporting, bulk archiving, unarchiving, updating, and deleting employee data.",
-      "category": 3,
-      "company_id": null
-    }
-  },
-  {
-    "model": "helpdesk.faq",
-    "pk": 23,
-    "fields": {
-      "created_at": "2025-03-12T04:00:00Z",
-      "created_by": null,
-      "modified_by": 1,
-      "is_active": true,
-      "question": "How are document requests handled?",
-      "answer": "Admins or managers create document requests specifying details like title, format, and size. Employees upload documents directly from their profile.",
-      "category": 3,
-      "company_id": null
-    }
-  },
-  {
-    "model": "helpdesk.faq",
-    "pk": 24,
-    "fields": {
-      "created_at": "2025-03-12T04:00:00Z",
-      "created_by": null,
-      "modified_by": 1,
-      "is_active": true,
-      "question": "What is the Shift Request feature?",
-      "answer": "The Shift Request feature allows employees to request temporary or permanent shift changes. Approval by a manager or admin is required.",
-      "category": 3,
-      "company_id": null
-    }
-  },
-  {
-    "model": "helpdesk.faq",
-    "pk": 25,
-    "fields": {
-      "created_at": "2025-03-12T04:00:00Z",
-      "created_by": null,
-      "modified_by": 1,
-      "is_active": true,
-      "question": "What is a Rotating Work Type Assign?",
-      "answer": "A Rotating Work Type Assign automates frequent changes in work types based on conditions like intervals, weekends, or specific dates.",
-      "category": 3,
-      "company_id": null
-    }
-  },
-  {
-    "model": "helpdesk.faq",
-    "pk": 26,
-    "fields": {
-      "created_at": "2025-03-12T04:00:00Z",
-      "created_by": null,
-      "modified_by": 1,
-      "is_active": true,
-      "question": "How can employees manage disciplinary actions?",
-      "answer": "Admins can create disciplinary actions like warnings or suspensions, and these may block employee logins for the specified period.",
-      "category": 3,
-      "company_id": null
-    }
-  },
-  {
-    "model": "helpdesk.faq",
-    "pk": 27,
-    "fields": {
-      "created_at": "2025-03-12T04:00:00Z",
-      "created_by": null,
-      "modified_by": 1,
-      "is_active": true,
-      "question": "What can employees find in the Policies section?",
-      "answer": "Employees can access company policies and guidelines in the Policies section for reference.",
-      "category": 3,
-      "company_id": null
-    }
-  },
-  {
-    "model": "helpdesk.faq",
-    "pk": 28,
-    "fields": {
-      "created_at": "2025-03-12T04:00:00Z",
-      "created_by": null,
-      "modified_by": 1,
-      "is_active": true,
-      "question": "What is the Organization Chart feature?",
-      "answer": "The Organization Chart provides a visual representation of reporting structures, helping to identify team members and managers.",
-      "category": 3,
-      "company_id": null
-    }
-  },
-  {
-    "model": "helpdesk.faq",
-    "pk": 29,
-    "fields": {
-      "created_at": "2025-03-12T04:00:00Z",
-      "created_by": null,
-      "modified_by": 1,
-      "is_active": true,
-      "question": "What is the Recruitment module in Horilla HRMS?",
-      "answer": "The Recruitment module allows HR professionals to create and manage job postings, receive and review resumes, manage interviews, and track candidate progress throughout the hiring process.",
-      "category": 5,
-      "company_id": null
-    }
-  },
-  {
-    "model": "helpdesk.faq",
-    "pk": 30,
-    "fields": {
-      "created_at": "2025-03-12T04:00:00Z",
-      "created_by": null,
-      "modified_by": 1,
-      "is_active": true,
-      "question": "What is the Recruitment Pipeline feature?",
-      "answer": "The Recruitment Pipeline is a comprehensive feature that organizes candidates through various stages using tabular and Kanban views. It supports multiple recruitment drives, each represented as a tab for easy management.",
-      "category": 5,
-      "company_id": null
-    }
-  },
-  {
-    "model": "helpdesk.faq",
-    "pk": 31,
-    "fields": {
-      "created_at": "2025-03-12T04:00:00Z",
-      "created_by": null,
-      "modified_by": 1,
-      "is_active": true,
-      "question": "How can I create a new recruitment in Horilla?",
-      "answer": "To create a new recruitment, click on the '+ Create' button from Recruitment > Recruitments , specify the job position, description, vacancies, managers, start and end dates, and select a recruitment survey.",
-      "category": 5,
-      "company_id": null
-    }
-  },
-  {
-    "model": "helpdesk.faq",
-    "pk": 32,
-    "fields": {
-      "created_at": "2025-03-12T04:00:00Z",
-      "created_by": null,
-      "modified_by": 1,
-      "is_active": true,
-      "question": "What are the main stage types in the recruitment process?",
-      "answer": "The main stage types are Initial, Interview, Hired, and Cancelled. Each type serves a specific purpose, such as automatically registering candidates or marking them as hired.",
-      "category": 5,
-      "company_id": null
-    }
-  },
-  {
-    "model": "helpdesk.faq",
-    "pk": 33,
-    "fields": {
-      "created_at": "2025-03-12T04:00:00Z",
-      "created_by": null,
-      "modified_by": 1,
-      "is_active": true,
-      "question": "How do I add a new stage to the recruitment process?",
-      "answer": "To add a new stage, click on the '+ Stage' button from Recruitment Pipeline, provide the stage title, assign stage managers, and specify the stage type (e.g., Initial, Interview, Hired).",
-      "category": 5,
-      "company_id": null
-    }
-  },
-  {
-    "model": "helpdesk.faq",
-    "pk": 34,
-    "fields": {
-      "created_at": "2025-03-12T04:00:00Z",
-      "created_by": null,
-      "modified_by": 1,
-      "is_active": true,
-      "question": "What is Resume Shortlisting and how does it work?",
-      "answer": "Resume Shortlisting is a feature that uses skill-based keyword optimization to rank resumes. The system calculates scores for each resume based on matching skills and displays them in descending order.",
-      "category": 5,
-      "company_id": null
-    }
-  },
-  {
-    "model": "helpdesk.faq",
-    "pk": 35,
-    "fields": {
-      "created_at": "2025-03-12T04:00:00Z",
-      "created_by": null,
-      "modified_by": 1,
-      "is_active": true,
-      "question": "What is the Skill Zone feature?",
-      "answer": "The Skill Zone categorizes candidates based on their skills, helping recruiters match them to relevant job positions more efficiently.",
-      "category": 5,
-      "company_id": null
-    }
-  },
-  {
-    "model": "helpdesk.faq",
-    "pk": 36,
-    "fields": {
-      "created_at": "2025-03-12T04:00:00Z",
-      "created_by": null,
-      "modified_by": 1,
-      "is_active": true,
-      "question": "How can I manage interviews within the Recruitment module?",
-      "answer": "You can manage interviews through the 'Scheduled Interviews' page, where you can add, edit, or delete interviews, assign interviewers, and track the status of interviews.",
-      "category": 5,
-      "company_id": null
-    }
-  },
-  {
-    "model": "helpdesk.faq",
-    "pk": 37,
-    "fields": {
-      "created_at": "2025-03-12T04:00:00Z",
-      "created_by": null,
-      "modified_by": 1,
-      "is_active": true,
-      "question": "Can I customize application forms in Horilla HRMS?",
-      "answer": "Yes, the Recruitment Survey feature allows HR managers to create custom questionnaires for candidates, which are integrated into the application forms.",
-      "category": 5,
-      "company_id": null
-    }
-  },
-  {
-    "model": "helpdesk.faq",
-    "pk": 38,
-    "fields": {
-      "created_at": "2025-03-12T04:00:00Z",
-      "created_by": null,
-      "modified_by": 1,
-      "is_active": true,
-      "question": "What are the available views for managing candidates?",
-      "answer": "Candidates can be managed using the Kanban view, list view, and detailed view. These views allow for filtering, grouping, and performing actions like editing, exporting, or converting candidates to employees.",
-      "category": 5,
-      "company_id": null
-    }
-  },
-  {
-    "model": "helpdesk.faq",
-    "pk": 39,
-    "fields": {
-      "created_at": "2025-03-12T04:00:00Z",
-      "created_by": null,
-      "modified_by": 1,
-      "is_active": true,
-      "question": "What is the Payroll module in Horilla HRMS?",
-      "answer": "The Payroll module in Horilla HRMS enables businesses to manage employee allowances, deductions, taxes, and generate accurate payslips, ensuring streamlined and efficient payroll processes.",
-      "category": 6,
-      "company_id": null
-    }
-  },
-  {
-    "model": "helpdesk.faq",
-    "pk": 40,
-    "fields": {
-      "created_at": "2025-03-12T04:00:00Z",
-      "created_by": null,
-      "modified_by": 1,
-      "is_active": true,
-      "question": "What features does the Payroll Dashboard offer?",
-      "answer": "The Payroll Dashboard provides visual insights into payroll processes, including charts for payslips, contract details, and department-wise payslips. Managers can also download data as Excel files.",
-      "category": 6,
-      "company_id": null
-    }
-  },
-  {
-    "model": "helpdesk.faq",
-    "pk": 41,
-    "fields": {
-      "created_at": "2025-03-12T04:00:00Z",
-      "created_by": null,
-      "modified_by": 1,
-      "is_active": true,
-      "question": "How does Contract Management work in Horilla?",
-      "answer": "Contract Management allows users to create contracts, define compensation, set contract duration, and manage leave settings. It supports various wage types for customized work arrangements.",
-      "category": 6,
-      "company_id": null
-    }
-  },
-  {
-    "model": "helpdesk.faq",
-    "pk": 42,
-    "fields": {
-      "created_at": "2025-03-12T04:00:00Z",
-      "created_by": null,
-      "modified_by": 1,
-      "is_active": true,
-      "question": "What is the Allowance Management feature?",
-      "answer": "Allowance Management enables users to create and customize allowances, set eligibility conditions, and specify fixed or variable allowances. It simplifies targeting allowances to employee groups and ensures fairness.",
-      "category": 6,
-      "company_id": null
-    }
-  },
-  {
-    "model": "helpdesk.faq",
-    "pk": 43,
-    "fields": {
-      "created_at": "2025-03-12T04:00:00Z",
-      "created_by": null,
-      "modified_by": 1,
-      "is_active": true,
-      "question": "How are deductions managed in Horilla?",
-      "answer": "The Deduction Management feature allows users to create and personalize deductions, set eligibility conditions, and choose fixed or variable amounts. It ensures streamlined deductions and fair practices.",
-      "category": 6,
-      "company_id": null
-    }
-  },
-  {
-    "model": "helpdesk.faq",
-    "pk": 44,
-    "fields": {
-      "created_at": "2025-03-12T04:00:00Z",
-      "created_by": null,
-      "modified_by": 1,
-      "is_active": true,
-      "question": "What is the Loan and Advance Salary module?",
-      "answer": "This module helps manage employee loans, installments, and advance salary transactions, ensuring accurate and transparent financial dealings.",
-      "category": 6,
-      "company_id": null
-    }
-  },
-  {
-    "model": "helpdesk.faq",
-    "pk": 45,
-    "fields": {
-      "created_at": "2025-03-12T04:00:00Z",
-      "created_by": null,
-      "modified_by": 1,
-      "is_active": true,
-      "question": "What does the Encashments & Reimbursements feature offer?",
-      "answer": "This feature supports reimbursements for company-related expenses, leave encashments, and bonus point encashments, simplifying the process for diverse employee needs.",
-      "category": 6,
-      "company_id": null
-    }
-  },
-  {
-    "model": "helpdesk.faq",
-    "pk": 46,
-    "fields": {
-      "created_at": "2025-03-12T04:00:00Z",
-      "created_by": null,
-      "modified_by": 1,
-      "is_active": true,
-      "question": "How does the Federal Tax feature work?",
-      "answer": "The Federal Tax feature automates tax calculations, defines tax brackets, and sets rates based on income. It ensures compliance and smooth payroll processing.",
-      "category": 6,
-      "company_id": null
-    }
-  },
-  {
-    "model": "helpdesk.faq",
-    "pk": 47,
-    "fields": {
-      "created_at": "2025-03-12T04:00:00Z",
-      "created_by": null,
-      "modified_by": 1,
-      "is_active": true,
-      "question": "How are payslips generated in Horilla?",
-      "answer": "The Payslip Generation feature calculates salaries, including allowances, deductions, and taxes, and creates accurate and detailed payslips for each pay period.",
-      "category": 6,
-      "company_id": null
-    }
-  },
-  {
-    "model": "helpdesk.faq",
-    "pk": 48,
-    "fields": {
-      "created_at": "2025-03-12T04:00:00Z",
-      "created_by": null,
-      "modified_by": 1,
-      "is_active": true,
-      "question": "What is the Asset Management System in Horilla HRMS?",
-      "answer": "The Asset Management System enables employees to request and manage work-related assets like computers and equipment. It categorizes assets, tracks requests, and ensures efficient allocation.",
-      "category": 7,
-      "company_id": null
-    }
-  },
-  {
-    "model": "helpdesk.faq",
-    "pk": 49,
-    "fields": {
-      "created_at": "2025-03-12T04:00:00Z",
-      "created_by": null,
-      "modified_by": 1,
-      "is_active": true,
-      "question": "What features are available on the Asset Dashboard?",
-      "answer": "The Asset Dashboard displays the total number of assets, asset requests, and assets in use. It includes pie charts and tables for asset allocation and provides tools for admins to approve requests and allocate assets directly.",
-      "category": 7,
-      "company_id": null
-    }
-  },
-  {
-    "model": "helpdesk.faq",
-    "pk": 50,
-    "fields": {
-      "created_at": "2025-03-12T04:00:00Z",
-      "created_by": null,
-      "modified_by": 1,
-      "is_active": true,
-      "question": "How can admin search for assets in Horilla HRMS?",
-      "answer": "Admin can search for specific asset categories or individual assets using the search bar. The system dynamically filters results based on the search term.",
-      "category": 7,
-      "company_id": null
-    }
-  },
-  {
-    "model": "helpdesk.faq",
-    "pk": 51,
-    "fields": {
-      "created_at": "2025-03-12T04:00:00Z",
-      "created_by": null,
-      "modified_by": 1,
-      "is_active": true,
-      "question": "What is the Asset Import feature?",
-      "answer": "The Asset Import feature allows admin to upload large amounts of asset data, such as names, purchase dates, and categories, from an external file like Excel, improving efficiency in asset management.",
-      "category": 7,
-      "company_id": null
-    }
-  },
-  {
-    "model": "helpdesk.faq",
-    "pk": 52,
-    "fields": {
-      "created_at": "2025-03-12T04:00:00Z",
-      "created_by": null,
-      "modified_by": 1,
-      "is_active": true,
-      "question": "What is the purpose of the Asset Export feature?",
-      "answer": "The Asset Export feature enables admin to download asset data, either filtered or in full, for reporting or further processing.",
-      "category": 7,
-      "company_id": null
-    }
-  },
-  {
-    "model": "helpdesk.faq",
-    "pk": 53,
-    "fields": {
-      "created_at": "2025-03-12T04:00:00Z",
-      "created_by": null,
-      "modified_by": 1,
-      "is_active": true,
-      "question": "How can asset categories be managed in Horilla HRMS?",
-      "answer": "Admin can create, update, and delete asset categories. Categories can only be deleted if they are empty, ensuring no associated assets remain in use.",
-      "category": 7,
-      "company_id": null
-    }
-  },
-  {
-    "model": "helpdesk.faq",
-    "pk": 54,
-    "fields": {
-      "created_at": "2025-03-12T04:00:00Z",
-      "created_by": null,
-      "modified_by": 1,
-      "is_active": true,
-      "question": "What is the Asset Request and Allocation feature?",
-      "answer": "This feature allows employees to request new assets or return allocated ones, while admins can allocate or reallocate assets based on requests and availability.",
-      "category": 7,
-      "company_id": null
-    }
-  },
-  {
-    "model": "helpdesk.faq",
-    "pk": 55,
-    "fields": {
-      "created_at": "2025-03-12T04:00:00Z",
-      "created_by": null,
-      "modified_by": 1,
-      "is_active": true,
-      "question": "What details can be updated in the Asset Updation form?",
-      "answer": "Admin can update details like asset name, description, tracking ID, purchase date, cost, status, and expiry date. Notifications can also be set for upcoming expiry dates.",
-      "category": 7,
-      "company_id": null
-    }
-  },
-  {
-    "model": "helpdesk.faq",
-    "pk": 56,
-    "fields": {
-      "created_at": "2025-03-12T04:00:00Z",
-      "created_by": null,
-      "modified_by": 1,
-      "is_active": true,
-      "question": "How does Asset History tracking work?",
-      "answer": "The Asset History feature tracks details of returned assets, allowing admin to filter, group, and sort asset usage data as needed.",
-      "category": 7,
-      "company_id": null
-    }
-  }
-]
diff --git a/notifications/base/models.py b/notifications/base/models.py
old mode 100755
new mode 100644
diff --git a/offboarding/cbv/__init__.py b/offboarding/cbv/__init__.py
new file mode 100644
index 000000000..e69de29bb
diff --git a/offboarding/cbv/accessibility.py b/offboarding/cbv/accessibility.py
new file mode 100644
index 000000000..7d8fe6856
--- /dev/null
+++ b/offboarding/cbv/accessibility.py
@@ -0,0 +1,61 @@
+"""
+Accessibility page to specify the permissions
+"""
+
+from base.context_processors import resignation_request_enabled
+from employee.models import Employee
+from django.contrib.auth.context_processors import PermWrapper
+
+from offboarding.templatetags.offboarding_filter import (
+    is_any_stage_manager,
+    is_offboarding_manager,
+)
+
+
+def resignation_accessibility(
+    request, instance: object = None, user_perms: PermWrapper = [], *args, **kwargs
+) -> bool:
+    """
+    accessibility for resignation tab employee individual and employee profile
+    """
+    employee = Employee.objects.get(id=instance.pk)
+    enabled_resignation_request = resignation_request_enabled(request)
+    value = enabled_resignation_request.get("enabled_resignation_request")
+    if (request.user == employee.employee_user_id) and value:
+        return True
+    return False
+
+
+def edit_stage_accessibility(
+    request, instance: object = None, user_perms: PermWrapper = [], *args, **kwargs
+) -> bool:
+    """
+    accessibility for stage edit
+    """
+    perm = request.user.has_perm(
+        "offboarding.change_offboardingstage"
+    ) or is_offboarding_manager(request.user.employee_get)
+    return perm
+
+
+def add_employee_accessibility(
+    request, instance: object = None, user_perms: PermWrapper = [], *args, **kwargs
+):
+    """
+    accessibility to add employee to stages
+    """
+    perms = (
+        request.user.has_perm("offboarding.change_offboarding")
+        or request.user.has_perm("offboarding.change_offboardingemployee")
+        or is_any_stage_manager(request.user.employee_get)
+    )
+    return perms
+
+def delete_stage_accessibility(
+    request, instance: object = None, user_perms: PermWrapper = [], *args, **kwargs
+):
+    """
+    accessibility to delete stage
+    """
+    perm = request.user.has_perm("offboarding.delete_offboarding")
+    return perm
diff --git a/offboarding/cbv/exit_process.py b/offboarding/cbv/exit_process.py
new file mode 100644
index 000000000..9c552c5b8
--- /dev/null
+++ b/offboarding/cbv/exit_process.py
@@ -0,0 +1,622 @@
+"""
+This page handles the cbv methods for existing process
+"""
+
+from datetime import datetime, timedelta
+import re
+from django import forms
+from django.http import HttpResponse
+from django.contrib import messages
+from django.urls import reverse, reverse_lazy
+from django.utils.decorators import method_decorator
+from django.utils.translation import gettext_lazy as _
+from base.context_processors import intial_notice_period
+from base.methods import eval_validate
+from horilla_views.generic.cbv.views import (
+    HorillaDetailedView,
+    HorillaFormView,
+    HorillaSectionView,
+    HorillaNavView,
+    HorillaListView,
+    HorillaTabView,
+)
+from horilla_views.generic.cbv.pipeline import Pipeline
+from horilla_views.cbv_methods import login_required, permission_required
+from offboarding.cbv_decorators import (
+    any_manager_can_enter,
+    offboarding_manager_can_enter,
+    offboarding_or_stage_manager_can_enter,
+)
+from offboarding.filters import (
+    PipelineEmployeeFilter,
+    PipelineFilter,
+    PipelineStageFilter,
+)
+from offboarding.forms import (
+    OffboardingEmployeeForm,
+    OffboardingStageForm,
+    OffboardingForm,
+    TaskForm,
+)
+from offboarding.models import (
+    EmployeeTask,
+    OffboardingEmployee,
+    OffboardingStage,
+    Offboarding,
+    OffboardingEmployee,
+    OffboardingTask,
+)
+from notifications.signals import notify
+from offboarding.templatetags.offboarding_filter import (
+    any_manager,
+    is_offboarding_manager,
+)
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(
+    offboarding_manager_can_enter("offboarding.add_offboardingstage"), name="dispatch"
+)
+class OffboardingStageFormView(HorillaFormView):
+    """
+    form view for create button
+    """
+
+    form_class = OffboardingStageForm
+    model = OffboardingStage
+    new_display_title = _("Create Offboarding Stage")
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        offboarding_id = self.request.GET["offboarding_id"]
+        self.form.fields["offboarding_id"].initial = offboarding_id
+        self.form.fields["offboarding_id"].widget = forms.HiddenInput()
+        if self.form.instance.pk:
+            self.form_class.verbose_name = _("Update Offboarding Stage")
+        return context
+
+    def form_valid(self, form: OffboardingStageForm) -> HttpResponse:
+        if form.is_valid():
+            if form.instance.pk:
+                message = _("Offboarding Stage Updated Successfully")
+            else:
+                message = _("Offboarding Stage Created Successfully")
+            form.save()
+
+            messages.success(self.request, message)
+            return self.HttpResponse("<script>window.location.reload</script>")
+        return super().form_valid(form)
+
+
+@method_decorator(
+    any_manager_can_enter("offboarding.add_offboardingemployee"), name="dispatch"
+)
+class OffboardingStageAddEmployeeForm(HorillaFormView):
+    """
+    form view for create button
+    """
+
+    form_class = OffboardingEmployeeForm
+    model = OffboardingEmployee
+    new_display_title = _("Add Employee")
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        default_notice_period = (
+            intial_notice_period(self.request)["get_initial_notice_period"]
+            if intial_notice_period(self.request)["get_initial_notice_period"]
+            else 0
+        )
+        end_date = datetime.today() + timedelta(days=default_notice_period)
+        stage_id = self.request.GET["stage_id"]
+        self.form.fields["stage_id"].initial = stage_id
+        self.form.fields["notice_period_ends"].initial = end_date
+        if self.form.instance.pk:
+            self.form_class.verbose_name = _("Update Employee")
+        return context
+
+    def form_valid(self, form: OffboardingEmployeeForm) -> HttpResponse:
+        stage_id = self.request.GET["stage_id"]
+        stage = OffboardingStage.objects.get(id=stage_id)
+        if form.is_valid():
+            if form.instance.pk:
+                message = _("Updated Employee")
+            else:
+                message = _("Added Employee")
+                instance = form.save()
+                notify.send(
+                    self.request.user.employee_get,
+                    recipient=instance.employee_id.employee_user_id,
+                    verb=f"You have been added to the {stage} of {stage.offboarding_id}",
+                    verb_ar=f"لقد تمت إضافتك إلى {stage} من {stage.offboarding_id}",
+                    verb_de=f"Du wurdest zu {stage} von {stage.offboarding_id} hinzugefügt",
+                    verb_es=f"Has sido añadido a {stage} de {stage.offboarding_id}",
+                    verb_fr=f"Vous avez été ajouté à {stage} de {stage.offboarding_id}",
+                    redirect=reverse("offboarding-pipeline"),
+                    icon="information",
+                )
+            form.save()
+            messages.success(self.request, message)
+            return self.HttpResponse("<script>window.location.reload</script>")
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(permission_required("offboarding.add_offboarding"), name="dispatch")
+class OffboardingCreateFormView(HorillaFormView):
+    """
+    form view for create and edit offboarding
+    """
+
+    form_class = OffboardingForm
+    model = Offboarding
+    new_display_title = _("Create Offboarding")
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        if self.form.instance.pk:
+            self.form_class.verbose_name = _("Update Offboarding")
+
+        return context
+
+    def form_valid(self, form: OffboardingForm) -> HttpResponse:
+        if form.is_valid():
+            if form.instance.pk:
+                message = _("Offboarding Updated")
+            else:
+                message = _("Offboarding saved")
+            form.save()
+
+            messages.success(self.request, message)
+            return HttpResponse("<script>window.location.reload()</script>")
+        return super().form_valid(form)
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(
+    offboarding_or_stage_manager_can_enter("offboarding.add_offboardingtask"),
+    name="dispatch",
+)
+class OffboardingTaskFormView(HorillaFormView):
+    """
+    form view for create and edit offboarding tasks
+    """
+
+    model = OffboardingTask
+    form_class = TaskForm
+    new_display_title = _("Create Task")
+
+    def get_initial(self) -> dict:
+        initial = super().get_initial()
+        stage_id = self.request.GET.get("stage_id")
+        employees = OffboardingEmployee.objects.filter(stage_id=stage_id)
+        if stage_id:
+            initial["stage_id"] = stage_id
+            initial["tasks_to"] = employees
+        return initial
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        stage_id = self.request.GET.get("stage_id")
+        employees = OffboardingEmployee.objects.filter(stage_id=stage_id)
+        if self.form.instance.pk:
+            self.form.fields["stage_id"].initial = stage_id
+            self.form.fields["tasks_to"].initial = employees
+            self.form.fields["tasks_to"].queryset = employees
+
+            self.form_class.verbose_name = _("Update Task")
+
+        return context
+
+    def form_valid(self, form: TaskForm) -> HttpResponse:
+        if form.is_valid():
+            if form.instance.pk:
+                message = _("Task Updated")
+            else:
+                message = _("Task Added")
+            form.save()
+
+            messages.success(self.request, message)
+            return self.HttpResponse()
+        return super().form_valid(form)
+
+
+@method_decorator(login_required, name="dispatch")
+class ExitProcessDetailView(HorillaDetailedView):
+    """
+    detail view
+    """
+
+    model = OffboardingEmployee
+    title = _("Details")
+    header = {
+        "title": "employee_id__get_full_name",
+        "subtitle": "detail_subtitle",
+        "avatar": "employee_id__get_avatar",
+    }
+    empty_template = "cbv/exit_process/detailed_page_empty.html"
+    body = [
+        (_("Email"), "employee_id__employee_work_info__email"),
+        (_("Job Position"), "employee_id__employee_work_info__job_position_id"),
+        (_("Contact"), "employee_id__phone"),
+        (_("Notice Period start Date"), "notice_period_starts"),
+        (_("Notice Period end Date"), "notice_period_ends"),
+        (_("Stage"), "get_stage_col"),
+        (_("Tasks"), "detail_view_task_custom", "custom_template"),
+    ]
+    cols = {
+        "detail_view_task_custom": 12,
+    }
+
+
+@method_decorator(login_required, name="dispatch")
+class OffboardingPipelineView(HorillaSectionView):
+    """
+    Offboarding Pipeline View
+    """
+
+    template_name = "cbv/exit_process/pipeline_view.html"
+    nav_url = reverse_lazy("offboarding-pipeline-nav")
+    view_url = reverse_lazy("get-offboarding-tab")
+    view_container_id = "pipelineContainer"
+
+
+@method_decorator(login_required, name="dispatch")
+class OffboardingPipelineNav(HorillaNavView):
+    """
+    Offboarding Pipeline Navigation View
+    """
+
+    nav_title = "Pipeline"
+    search_swap_target = "#pipelineContainer"
+    search_url = reverse_lazy("get-offboarding-tab")
+    filter_body_template = "cbv/exit_process/pipeline_filter.html"
+
+    def __init__(self, **kwargs):
+        super().__init__(**kwargs)
+        if self.request.user.has_perm("offboarding.create_offboarding"):
+            self.create_attrs = f"""
+                class="oh-btn oh-btn--secondary"
+                hx-get="{reverse_lazy("create-offboarding")}"
+                hx-target="#objectDetailsModalTarget"
+                data-toggle="oh-modal-toggle"
+                data-target="#objectDetailsModal"
+            """
+
+    def get_context_data(self, **kwargs):
+
+        context = super().get_context_data(**kwargs)
+        context["employee_filter"] = PipelineEmployeeFilter()
+        context["pipeline_filter"] = PipelineFilter()
+        context["stage_filter"] = PipelineStageFilter()
+
+        return context
+
+
+@method_decorator(login_required, name="dispatch")
+class PipeLineTabView(HorillaTabView):
+    """
+    Pipeline List View
+    """
+
+    def __init__(self, **kwargs):
+        super().__init__(**kwargs)
+        offboardings = PipelineFilter(self.request.GET).qs.filter(is_active=True)
+
+        self.tabs = []
+        for offboarding in offboardings:
+            tab = {}
+            tab["actions"] = []
+            tab["title"] = offboarding.title
+            tab["url"] = reverse(
+                "get-offboarding-stage", kwargs={"offboarding_id": offboarding.pk}
+            )
+            tab["badge_label"] = _("Stages")
+            if self.request.user.has_perm(
+                "offboarding.add_offboardingstage"
+            ) or is_offboarding_manager(self.request.user.employee_get):
+                tab["actions"].append(
+                    {
+                        "action": _("Add Stage"),
+                        "attrs": f"""
+                            data-toggle="oh-modal-toggle"
+                            data-target="#genericModal"
+                            hx-get="{reverse("create-offboarding-stage")}?offboarding_id={offboarding.pk}"
+                            hx-target="#genericModalBody"
+                            style="cursor: pointer;"
+                        """,
+                    }
+                )
+                tab["actions"].append(
+                    {
+                        "action": _("Manage Stage Order"),
+                        "attrs": f"""
+                            data-toggle="oh-modal-toggle"
+                            data-target="#genericModal"
+                            hx-get="{reverse("update-stage-sequence",kwargs={"pk": offboarding.pk})}"
+                            hx-target="#genericModalBody"
+                            style="cursor: pointer;"
+                        """,
+                    }
+                )
+            if self.request.user.has_perm(
+                "offboarding.change_offboarding"
+            ) or is_offboarding_manager(self.request.user.employee_get):
+                tab["actions"].append(
+                    {
+                        "action": _("Edit"),
+                        "attrs": f"""
+                            data-toggle="oh-modal-toggle"
+                            data-target="#genericModal"
+                            hx-get="{reverse("update-offboarding", kwargs={"pk": offboarding.pk})}"
+                            hx-target="#genericModalBody"
+                            style="cursor: pointer;"
+                        """,
+                    }
+                )
+            if self.request.user.has_perm("offboarding.delete_offboarding"):
+                tab["actions"].append(
+                    {
+                        "action": _("Delete"),
+                        "attrs": f"""
+                            data-toggle="oh-modal-toggle"
+                            data-target="#deleteConfirmation"
+                            hx-get="{reverse('generic-delete')}?model=offboarding.Offboarding&pk={offboarding.pk}"
+                            hx-target="#deleteConfirmationBody"
+                            style="cursor: pointer;"
+                        """,
+                    }
+                )
+
+            self.tabs.append(tab)
+
+
+@method_decorator(login_required, name="dispatch")
+class OffboardingPipelineStage(Pipeline):
+    """
+    Offboarding Pipeline Stage
+    """
+
+    model = OffboardingEmployee
+    filter_class = PipelineEmployeeFilter
+    grouper = "stage_id"
+    selected_instances_key_name = "OffboardingEmployeeRecords"
+    allowed_fields = [
+        {
+            "field": "stage_id",
+            "model": OffboardingStage,
+            "filter": PipelineStageFilter,
+            "url": reverse_lazy("get-offboarding-employees-cbv"),
+            "parameters": [
+                "offboarding_stage_id={pk}",
+                "offboarding_id={offboarding_id__pk}",
+            ],
+            "actions": [
+                {
+                    "action": "Add Employee",
+                    "accessibility": "offboarding.cbv.accessibility.add_employee_accessibility",
+                    "attrs": """
+                        data-toggle="oh-modal-toggle"
+                        data-target="#genericModal"
+                        hx-get="{get_add_employee_url}"
+                        hx-target="#genericModalBody"
+                        class="oh-dropdown__link"
+                    """,
+                },
+                {
+                    "action": "Edit",
+                    "accessibility": "offboarding.cbv.accessibility.edit_stage_accessibility",
+                    "attrs": """
+                        hx-target="#genericModalBody" 
+                        hx-get="{get_update_url}" 
+                        data-toggle="oh-modal-toggle" 
+                        data-target="#genericModal" 
+                    """,
+                },
+                {
+                    "action": "Delete",
+                    "accessibility": "offboarding.cbv.accessibility.delete_stage_accessibility",
+                    "attrs": """
+                        data-target="#deleteConfirmation"
+                        data-toggle="oh-modal-toggle"
+                        hx-get="{get_delete_url}"
+                        hx-target="#deleteConfirmationBody"
+                    """,
+                },
+            ],
+        }
+    ]
+
+    def get_queryset(self):
+        queryset = super().get_queryset()
+        self.queryset = queryset.order_by("sequence")
+        return self.queryset
+
+
+@method_decorator(login_required, name="dispatch")
+class OffboardingEmployeeList(HorillaListView):
+    """
+    Offboarding Employee List View
+    """
+
+    model = OffboardingEmployee
+    filter_class = PipelineEmployeeFilter
+    search_url = reverse_lazy("get-offboarding-tab")
+    filter_keys_to_remove = ["offboarding_stage_id", "offboarding_id"]
+    next_prev = False
+    quick_export = False
+    filter_selected = False
+    custom_empty_template = "cbv/pipeline/empty.html"
+    columns = [
+        ("Employee", "employee_id", "employee_id__get_avatar"),
+        ("Notice Period", "get_notice_period_col"),
+        ("Start Date", "notice_period_starts"),
+        ("End Date", "notice_period_ends"),
+        ("Stage", "get_stage_col"),
+        ("Task Status", "get_task_status_col"),
+    ]
+
+    action_method = """get_action_col"""
+
+    row_attrs = """
+        class = "fw-bold"
+        hx-get='{get_individual_url}'
+        hx-target='#genericModalBody'
+        data-toggle = 'oh-modal-toggle'
+        data-target="#genericModal"
+    """
+    bulk_update_fields = ["stage_id"]
+
+    def get(self, request, *args, **kwargs):
+        self.selected_instances_key_id = (
+            f"OffboardingEmployeeRecords{self.request.GET['offboarding_stage_id']}"
+        )
+        return super().get(request, *args, **kwargs)
+
+    def get_queryset(self, queryset=None, filtered=False, *args, **kwargs):
+        if not getattr(self, "queryset", None):
+            qs = OffboardingEmployee.objects.entire()
+            queryset = super().get_queryset(qs, filtered, *args, **kwargs)
+            if not (
+                self.request.user.has_perm("offboarding.view_offboarding")
+                or any_manager(self.request.user.employee_get)
+            ):
+                queryset = queryset.filter(employee_id=self.request.user.employee_get)
+            self.queryset = queryset
+        return self.queryset
+
+    def __init__(self, **kwargs):
+        super().__init__(**kwargs)
+        self.view_id = (
+            f"offboardingStageContainer{self.request.GET.get('offboarding_stage_id')}"
+        )
+        self.managing_offboarding_tasks = OffboardingTask.objects.filter(
+            managers__employee_user_id=self.request.user
+        ).values_list("pk", flat=True)
+        self.request.managing_offboarding_tasks = self.managing_offboarding_tasks
+
+        self.managing_offboarding_stages = OffboardingStage.objects.filter(
+            managers__employee_user_id=self.request.user
+        ).values_list("pk", flat=True)
+        self.request.managing_offboarding_stages = self.managing_offboarding_stages
+
+        self.managing_offboardings = Offboarding.objects.filter(
+            managers__employee_user_id=self.request.user
+        ).values_list("pk", flat=True)
+        self.request.managing_offboardings = self.managing_offboardings
+
+    def get_context_data(self, **kwargs):
+        stage_id = self.request.GET["offboarding_stage_id"]
+        tasks = OffboardingTask.objects.filter(stage_id=stage_id)
+        context = super().get_context_data(**kwargs)
+        for task in tasks:
+            context["columns"].append(
+                (
+                    f"""
+                        <div class="oh-hover-btn-container position-relative">
+                            <button class="oh-hover-btn fw-bold"
+                                style="border: none !important;"
+                            >
+                                {task.title}
+                            </button>
+                            <div class="oh-hover-btn-drawer oh-hover-btn-table-drawer">
+                                <button
+                                    hx-get="{reverse("offboarding-update-task",kwargs={"pk":task.pk})}"
+                                    hx-target="#genericModalBody"
+                                    data-toggle="oh-modal-toggle" 
+                                    data-target="#genericModal"
+                                    class="oh-hover-btn__small"
+                                    style="
+                                        border:1px hsl(8,77%,56%) solid;
+                                    "
+                                    title="Edit"
+                                >
+                                    <ion-icon name="create-outline"></ion-icon>
+                                </button>
+                                <a 
+                                    hx-get="{reverse("generic-delete")}?model=offboarding.OffboardingTask&pk={task.id}" 
+                                    hx-target="#deleteConfirmationBody"
+                                    data-target="#deleteConfirmation"
+                                    data-toggle="oh-modal-toggle"
+                                    class="oh-hover-btn__small"
+                                    style="
+                                        border:1px hsl(8,77%,56%) solid;
+                                    "
+                                    title="Delete"
+                                >
+                                    <ion-icon name="trash-outline"></ion-icon>
+                                </a>
+                            </div>
+                        </div>
+                    """,
+                    f"get_{task.pk}_task",
+                )
+            )
+        if self.request.user.has_perm(
+            "perms.offboarding.add_offboardingtask"
+        ) or any_manager(self.request.user.employee_get):
+            context["columns"].append(
+                (
+                    f"""
+                        <button 
+                            class="oh-checkpoint-badge text-success" 
+                            data-toggle="oh-modal-toggle" 
+                            data-target="#genericModal"
+                            hx-get="{reverse('offboarding-add-task')}?stage_id={stage_id}"
+                            hx-target="#genericModalBody"
+                            >
+                            + Task
+                        </button>
+                        """,
+                    "",
+                )
+            )
+        return context
+
+    def bulk_update_accessibility(self):
+        return (
+            self.request.user.has_perm("offboarding.change_offboardingstage")
+            or self.request.user.has_perm("offboarding.change_offboarding")
+            or any_manager(self.request.user.employee_get)
+        )
+
+    def get_bulk_form(self):
+        form = super().get_bulk_form()
+        offboarding_id = self.request.GET.get("offboarding_id")
+        offboarding_stage_id = self.request.GET.get("offboarding_stage_id")
+        form.fields.get("stage_id").queryset = form.fields.get(
+            "stage_id"
+        ).queryset.filter(offboarding_id=offboarding_id)
+
+        tasks = OffboardingTask.objects.filter(stage_id= offboarding_stage_id)
+        for task in tasks:
+            form.fields[f"bulk_task_status_{task.pk}"] = forms.ChoiceField(
+                choices=[
+                    ("", "----------"),
+                ]
+                + list(EmployeeTask.statuses),
+                label=task.title,
+                required=False,
+                widget=forms.Select(
+                    attrs={"class": "oh-select oh-select-2 w-100"}
+                ),
+            )
+
+        if not self.bulk_update_accessibility():
+            del form["stage_id"]
+
+        return form
+
+    def handle_bulk_submission(self, request):
+        response = super().handle_bulk_submission(request)
+        mapped_data = {
+            int(re.search(r"bulk_task_status_(\d+)", key).group(1)): value
+            for key, value in request.POST.items()
+            if re.search(r"bulk_task_status_(\d+)", key)
+        }
+        instance_ids = request.POST.get("instance_ids", "[]")
+        instance_ids = eval_validate(instance_ids)
+        for pk, status in mapped_data.items():
+            EmployeeTask.objects.filter(
+                employee_id__in=instance_ids, task_id=pk
+            ).update(status=status)
+        return response
diff --git a/offboarding/cbv/resignation.py b/offboarding/cbv/resignation.py
new file mode 100644
index 000000000..51e1e4cd3
--- /dev/null
+++ b/offboarding/cbv/resignation.py
@@ -0,0 +1,226 @@
+
+"""
+CBV of resigantions page
+"""
+from typing import Any
+from django.http import HttpResponse
+from django.urls import reverse, reverse_lazy
+from django.utils.decorators import method_decorator
+from django.utils.translation import gettext_lazy as _
+from django.contrib import messages
+from horilla_views.cbv_methods import login_required,permission_required,check_feature_enabled
+from horilla_views.generic.cbv.views import (
+    HorillaDetailedView,
+    HorillaFormView,
+    HorillaListView,
+    HorillaNavView,
+    TemplateView,
+)
+from offboarding.filters import LetterFilter
+from offboarding.forms import ResignationLetterForm
+from offboarding.models import Offboarding, OffboardingGeneralSetting, ResignationLetter
+
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(permission_required("offboarding.view_resignationletter"),name="dispatch")
+@method_decorator(check_feature_enabled("resignation_request",OffboardingGeneralSetting),name="dispatch")
+class ResignationLettersView(TemplateView):
+    """
+    for reimbursements and encashments page
+    """
+
+    def get_context_data(self, **kwargs: Any):
+        context = super().get_context_data(**kwargs)
+        offboardings = Offboarding.objects.all()
+        context["offboardings"] = offboardings
+        return context
+
+    template_name = "cbv/resignation/resignation.html"
+
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(permission_required("offboarding.view_resignationletter"),name="dispatch")
+@method_decorator(check_feature_enabled("resignation_request",OffboardingGeneralSetting),name="dispatch")
+class ResignationListView(HorillaListView):
+    """
+    list view
+    """
+    
+
+    model = ResignationLetter
+    filter_class = LetterFilter
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse('list-resignation-request')
+        if self.request.user.has_perm("offboarding.change_resignationletter"):
+            self.action_method = "actions_column"
+
+    records_per_page = 5
+    option_method = "option_column"
+
+    row_status_indications = [
+        (
+            "rejected--dot",
+            _("Rejected"),
+            """
+            onclick="
+            $('#applyFilter').closest('form').find('[name=status]').val('rejected');
+            $('#applyFilter').click();
+            "
+            """,
+        ),
+        (
+            "approved--dot",
+            _("Approved"),
+            """
+            onclick="
+            $('#applyFilter').closest('form').find('[name=status]').val('approved');
+            $('#applyFilter').click();
+            "
+            """,
+        ),
+        (
+            "requested--dot",
+            _("Requested"),
+            """
+            onclick="
+            $('#applyFilter').closest('form').find('[name=status]').val('requested');
+            $('#applyFilter').click();
+            "
+            """,
+        ),
+    ]
+
+    row_status_class = "status-{status}"
+
+    row_attrs = """
+                hx-get='{get_detail_url}?instance_ids={ordered_ids}'
+                hx-target="#genericModalBody"
+                data-target="#genericModal"
+                data-toggle="oh-modal-toggle"
+                """
+    columns = [
+        (_("Employee"), "employee_id", "employee_id__get_avatar"),
+        (_("Title"), "title"),
+        (_("Planned To Leave"), "planned_to_leave_on"),
+        (_("Status"), "get_status"),
+        (_("Description"), "description_col")
+    ]
+
+    header_attrs = {
+        "description_col" : """
+                            style="width:200px !important"
+                            """ 
+                }
+
+    sortby_mapping = [
+        ("Employee", "employee_id", "employee_id__get_avatar"),
+        ("Planned To Leave", "planned_to_leave_on"),
+        ("Status", "get_status"),
+    ]
+
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(permission_required("offboarding.view_resignationletter"),name="dispatch")
+@method_decorator(check_feature_enabled("resignation_request",OffboardingGeneralSetting),name="dispatch")
+class ResinationLettersNav(HorillaNavView):
+    """
+    Nav bar
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("list-resignation-request")
+        self.create_attrs = f"""
+                            hx-get="{reverse_lazy("resignation-requests-create")}"
+                            hx-target="#genericModalBody"
+                            data-target="#genericModal"
+                            data-toggle="oh-modal-toggle"
+                            """
+
+    nav_title = _("Resignations")
+    filter_instance = LetterFilter()
+    filter_form_context_name = "form"
+    filter_body_template = "cbv/resignation/filter.html"
+    search_swap_target = "#listContainer"
+
+    group_by_fields = [
+        ("employee_id", _("Employee")),
+        ("planned_to_leave_on", _("Planned to leave date")),
+        ("status", _("Status")),
+        ("employee_id__employee_work_info__department_id", _("Department")),
+        ("employee_id__employee_work_info__job_position_id", _("Job Position")),
+        ("employee_id__employee_work_info__reporting_manager_id", _("Reporting Manager")),
+    ]
+
+
+@method_decorator(login_required, name="dispatch")
+# @method_decorator(check_feature_enabled("resignation_request",OffboardingGeneralSetting),name="dispatch")
+class ResignationLettersFormView(HorillaFormView):
+    """
+    Create and edit form for resignations
+    """
+
+    model = ResignationLetter
+    form_class = ResignationLetterForm
+    new_display_title = _("Create Resignation Letter")
+
+    def form_valid(self, form: ResignationLetterForm) -> HttpResponse:
+        """
+        Handle a valid form submission.
+        If the form is valid, save the instance and display a success message.
+        """
+        if form.is_valid():
+            if form.instance.pk:
+                message = _("Resignation updated successfully")
+            else:
+                message = _("Resignation created successfully")
+            form.save()
+            messages.success(self.request, message)
+            return self.HttpResponse()
+        return super().form_valid(form)
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(permission_required("offboarding.view_resignationletter"),name="dispatch")
+@method_decorator(check_feature_enabled("resignation_request",OffboardingGeneralSetting),name="dispatch")
+class ResignationLetterDetailView(HorillaDetailedView):
+    """
+    detail view of resignations
+    """
+
+    template_name = "cbv/resignation/detail_view.html"
+
+    def get_context_data(self, **kwargs: Any):
+        """
+        To set title.
+        """
+        context = super().get_context_data(**kwargs)
+        pk = self.kwargs.get("pk")
+        letter = ResignationLetter.objects.get(id=pk)
+        title = context["resignationletter"].title
+        context["title"] = title
+        context["letter"] = letter
+        return context
+
+    body = [
+        (_(""),""),
+        (_("Actions"),"option_column",True),
+        (_("Planned To Leave"), "planned_to_leave_on"),
+        (_("Status"), "get_status"),
+        (_("Description"), "detail_description_col"),
+    ]
+
+    action_method = "actions_column"
+
+    model = ResignationLetter
+    # title = _("Details")
+    header = {
+        "title": "employee_id__get_full_name",
+        "subtitle": "resgnation_subtitle",
+        "avatar": "employee_id__get_avatar",
+    }
diff --git a/offboarding/cbv/resignation_tab.py b/offboarding/cbv/resignation_tab.py
new file mode 100644
index 000000000..83a550c73
--- /dev/null
+++ b/offboarding/cbv/resignation_tab.py
@@ -0,0 +1,78 @@
+"""
+This page handles the cbv methods for resignation tab 
+"""
+
+from typing import Any
+from django.urls import reverse
+from django.utils.decorators import method_decorator
+from employee.cbv.employee_profile import EmployeeProfileView
+from offboarding.cbv.resignation import ResignationLetterDetailView, ResignationListView
+from horilla_views.cbv_methods import login_required, check_feature_enabled
+from offboarding.models import OffboardingGeneralSetting
+
+
+# @method_decorator(check_feature_enabled("resignation_request", OffboardingGeneralSetting), name="dispatch")
+class ResignationTabView(ResignationListView):
+
+    """
+    List view of resignation Tab in profile
+    """
+
+    records_per_page = 1
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.action_method = None
+        self.view_id = "resignation-container"
+        pk = self.request.resolver_match.kwargs.get("pk")
+        self.search_url = reverse("individual-resignation-tab-list",kwargs={'pk':pk})
+
+    template_name = "cbv/resignation/resignation_tab.html"
+
+    @method_decorator(login_required, name="dispatch")
+    def dispatch(self, *args, **kwargs):
+        return super(ResignationListView, self).dispatch(*args, **kwargs)
+
+    def get_context_data(self, **kwargs: Any):
+        context = super().get_context_data(**kwargs)
+        pk = self.kwargs.get("pk")
+        context["employee"] = pk
+        return context
+
+    def get_queryset(self):
+        queryset = super().get_queryset()
+        pk = self.kwargs.get("pk")
+        queryset = queryset.filter(employee_id=pk)
+        return queryset
+
+    row_attrs = """
+                hx-get='{get_detail_tab_url}?instance_ids={ordered_ids}'
+                hx-target="#genericModalBody"
+                data-target="#genericModal"
+                data-toggle="oh-modal-toggle"
+                """
+
+
+class ResignationTabDetailView(ResignationLetterDetailView):
+    """
+    Detail view of resignation tab in profile
+    """
+
+    @method_decorator(login_required, name="dispatch")
+    def dispatch(self, *args, **kwargs):
+        return super(ResignationLetterDetailView, self).dispatch(*args, **kwargs)
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.action_method = None
+
+
+EmployeeProfileView.add_tab(
+    tabs=[
+        {
+            "title": "Resignation",
+            "view": ResignationTabView.as_view(),
+            "accessibility": "offboarding.cbv.accessibility.resignation_accessibility",
+        },
+    ]
+)
diff --git a/offboarding/cbv_decorators.py b/offboarding/cbv_decorators.py
new file mode 100644
index 000000000..380dcfdc9
--- /dev/null
+++ b/offboarding/cbv_decorators.py
@@ -0,0 +1,84 @@
+from django.http import HttpResponse
+from django.shortcuts import render
+from horilla.decorators import decorator_with_arguments
+from offboarding.models import Offboarding, OffboardingStage, OffboardingTask
+from horilla.horilla_middlewares import _thread_locals
+from django.contrib import messages
+
+
+@decorator_with_arguments
+def any_manager_can_enter(function, perm, offboarding_employee_can_enter=False):
+    def _function(self, *args, **kwargs):
+        request = getattr(_thread_locals, "request")
+        if not getattr(self, "request", None):
+            self.request = request
+        employee = request.user.employee_get
+        if (
+            request.user.has_perm(perm)
+            or offboarding_employee_can_enter
+            or (
+                Offboarding.objects.filter(managers=employee).exists()
+                | OffboardingStage.objects.filter(managers=employee).exists()
+                | OffboardingTask.objects.filter(managers=employee).exists()
+            )
+        ):
+            return function(self, *args, **kwargs)
+        else:
+            previous_url = request.META.get("HTTP_REFERER", "/")
+            script = f'<script>window.location.href = "{previous_url}"</script>'
+            key = "HTTP_HX_REQUEST"
+            if key in request.META.keys():
+                return render(self, "decorator_404.html")
+            return HttpResponse(script)
+
+    return _function
+
+
+
+@decorator_with_arguments
+def offboarding_manager_can_enter(function, perm):
+    def _function(self, *args, **kwargs):
+        request = getattr(_thread_locals, "request")
+        if not getattr(self, "request", None):
+            self.request = request
+        employee = request.user.has_perm(perm)
+        if (
+            request.user.has_perm(perm)
+            or Offboarding.objects.filter(managers=employee).exists()
+        ):
+            return function(self, *args, **kwargs)
+        else:
+            messages.info(request, "You dont have permission.")
+            previous_url = request.META.get("HTTP_REFERER", "/")
+            script = f'<script>window.location.href = "{previous_url}"</script>'
+            key = "HTTP_HX_REQUEST"
+            if key in request.META.keys():
+                return render(self, "decorator_404.html")
+            return HttpResponse(script)
+
+    return _function
+
+
+@decorator_with_arguments
+def offboarding_or_stage_manager_can_enter(function, perm):
+    def _function(self, *args, **kwargs):
+        request = getattr(_thread_locals, "request")
+        if not getattr(self, "request", None):
+            self.request = request
+        employee = request.user.has_perm(perm)
+        if (
+            request.user.has_perm(perm)
+            or Offboarding.objects.filter(managers=employee).exists()
+            or OffboardingStage.objects.filter(managers=employee).exists()
+        ):
+            return function(self, *args, **kwargs)
+        else:
+            messages.info(request, "You dont have permission.")
+            previous_url = request.META.get("HTTP_REFERER", "/")
+            key = "HTTP_HX_REQUEST"
+            if key in request.META.keys():
+                return render(request, "decorator_404.html")
+            script = f'<script>window.location.href = "{previous_url}"</script>'
+            return HttpResponse(script)
+
+    return _function
diff --git a/offboarding/filters.py b/offboarding/filters.py
index 760e7ac42..2143af7f1 100644
--- a/offboarding/filters.py
+++ b/offboarding/filters.py
@@ -10,6 +10,8 @@ import django_filters
 from django import forms
 
 from base.filters import FilterSet
+from employee.models import Employee
+from horilla.filters import HorillaFilterSet
 from offboarding.models import (
     Offboarding,
     OffboardingEmployee,
@@ -18,7 +20,7 @@ from offboarding.models import (
 )
 
 
-class LetterFilter(FilterSet):
+class LetterFilter(HorillaFilterSet):
     """
     LetterFilter class
     """
@@ -41,12 +43,15 @@ class LetterFilter(FilterSet):
         ]
 
 
-class PipelineFilter(FilterSet):
+class PipelineFilter(HorillaFilterSet):
     """
     PipelineFilter
     """
 
     search = django_filters.CharFilter(method="search_method", lookup_expr="icontains")
+    offboarding_manager = django_filters.ModelChoiceFilter(
+        field_name="managers", queryset=Employee.objects.all()
+    )
 
     class Meta:
         model = Offboarding
@@ -65,7 +70,7 @@ class PipelineFilter(FilterSet):
         ).distinct()
 
 
-class PipelineStageFilter(FilterSet):
+class PipelineStageFilter(HorillaFilterSet):
     """
     PipelineStageFilter
     """
@@ -93,7 +98,7 @@ class PipelineStageFilter(FilterSet):
         ).distinct()
 
 
-class PipelineEmployeeFilter(FilterSet):
+class PipelineEmployeeFilter(HorillaFilterSet):
     """
     PipelineEmployeeFilter
     """
@@ -110,6 +115,9 @@ class PipelineEmployeeFilter(FilterSet):
         lookup_expr="lte",
         widget=forms.DateInput(attrs={"type": "date"}),
     )
+    offboarding_stage_id = django_filters.CharFilter(
+        field_name="stage_id",
+    )
 
     class Meta:
         model = OffboardingEmployee
diff --git a/offboarding/forms.py b/offboarding/forms.py
index 29df141ea..cb08d5f04 100644
--- a/offboarding/forms.py
+++ b/offboarding/forms.py
@@ -13,6 +13,7 @@ from django.template.loader import render_to_string
 
 from base.forms import ModelForm
 from employee.forms import MultipleFileField
+from employee.models import Employee
 from horilla import horilla_middlewares
 from notifications.signals import notify
 from offboarding.models import (
@@ -34,6 +35,8 @@ class OffboardingForm(ModelForm):
 
     verbose_name = "Offboarding"
 
+    cols = {"title": 12, "description": 12, "managers": 12, "status": 12}
+
     class Meta:
         model = Offboarding
         fields = "__all__"
@@ -55,10 +58,12 @@ class OffboardingStageForm(ModelForm):
 
     verbose_name = "Stage"
 
+    cols = {"title": 12, "type": 12, "managers": 12}
+
     class Meta:
         model = OffboardingStage
         fields = "__all__"
-        exclude = ["offboarding_id", "is_active"]
+        exclude = ["is_active"]
 
     def as_p(self):
         """
@@ -127,7 +132,7 @@ class StageSelectForm(ModelForm):
         super().__init__(*args, **kwargs)
         attrs = self.fields["stage_id"].widget.attrs
         attrs["onchange"] = "offboardingUpdateStage($(this))"
-        attrs["class"] = "w-100 oh-select-custom"
+        attrs["class"] = "w-100 oh-custom-select"
         self.fields["stage_id"].widget.attrs.update(attrs)
         self.fields["stage_id"].empty_label = None
         self.fields["stage_id"].queryset = OffboardingStage.objects.filter(
@@ -189,6 +194,7 @@ class TaskForm(ModelForm):
         queryset=OffboardingEmployee.objects.all(),
         required=False,
     )
+    cols = {"title": 12, "managers": 12, "stage_id": 12, "tasks_to": 12}
 
     class Meta:
         model = OffboardingTask
@@ -233,6 +239,14 @@ class ResignationLetterForm(ModelForm):
     Resignation Letter
     """
 
+    cols = {
+        "employee_id": 12,
+        "title": 12,
+        "description": 12,
+        "planned_to_leave_on": 12,
+        "status": 12,
+    }
+
     description = forms.CharField(
         widget=forms.Textarea(attrs={"data-summernote": "", "style": "display:none;"}),
         label="Description",
@@ -261,17 +275,22 @@ class ResignationLetterForm(ModelForm):
         if self.instance.pk:
             exclude.append("employee_id")
             self.verbose_name = (
-                self.instance.employee_id.get_full_name() + " Resignation Letter"
+                self.instance.employee_id.get_full_name() + "'s Resignation Letter"
             )
 
         request = getattr(horilla_middlewares._thread_locals, "request", None)
-
         if request and not request.user.has_perm("offboarding.add_offboardingemployee"):
             exclude = exclude + [
                 "employee_id",
                 "status",
             ]
             self.instance.employee_id = request.user.employee_get
+        if request and request.user.has_perm("offboarding.add_offboardingemployee"):
+            if request.GET.get("emp_id"):
+                emp_id = request.GET.get("emp_id")
+                self.fields["employee_id"].queryset = Employee.objects.filter(id=emp_id)
+                self.fields["employee_id"].initial = emp_id
+
         exclude = list(set(exclude))
         for field in exclude:
             del self.fields[field]
diff --git a/offboarding/migrations/__init__.py b/offboarding/migrations/__init__.py
index e69de29bb..cea0ec0a8 100644
--- a/offboarding/migrations/__init__.py
+++ b/offboarding/migrations/__init__.py
@@ -0,0 +1 @@
+from offboarding.cbv import resignation_tab
diff --git a/offboarding/models.py b/offboarding/models.py
index 3fc488be8..2097b9b25 100644
--- a/offboarding/models.py
+++ b/offboarding/models.py
@@ -1,3 +1,4 @@
+from ast import literal_eval
 from collections.abc import Iterable
 from datetime import date, timedelta
 
@@ -6,6 +7,8 @@ from django.contrib.auth.models import User
 from django.db import models
 from django.db.models.signals import post_save
 from django.dispatch import receiver
+from django.urls import reverse_lazy
+from django.utils.timesince import timesince
 from django.utils.translation import gettext_lazy as _
 
 from base.horilla_company_manager import HorillaCompanyManager
@@ -16,6 +19,7 @@ from horilla.horilla_middlewares import _thread_locals
 from horilla.methods import get_horilla_model_class
 from horilla.models import HorillaModel
 from horilla_audit.models import HorillaAuditInfo, HorillaAuditLog
+from horilla_views.cbv_methods import render_template
 from notifications.signals import notify
 
 # Create your models here.
@@ -92,6 +96,26 @@ class OffboardingStage(HorillaModel):
         """
         return self.type == "archived"
 
+    def get_delete_url(self):
+        """
+        This method is used to get delete url
+        """
+        return f"{reverse_lazy('generic-delete')}?model=offboarding.OffboardingStage&pk={self.pk}"
+
+    def get_update_url(self):
+        """
+        This method is used to get update url
+        """
+        return f'{reverse_lazy("create-offboarding-stage", kwargs={"pk": self.pk})}?offboarding_id={self.offboarding_id.pk}'
+
+    def get_add_employee_url(self):
+        """
+        This method is used to get add employee url
+        """
+        url = f'{reverse_lazy("add-offboarding-employee")}?stage_id={self.id}'
+
+        return url
+
 
 @receiver(post_save, sender=Offboarding)
 def create_initial_stage(sender, instance, created, **kwargs):
@@ -137,6 +161,116 @@ class OffboardingEmployee(HorillaModel):
     def __str__(self) -> str:
         return self.employee_id.get_full_name()
 
+    def detail_subtitle(self):
+        """
+        Return subtitle containing both department and job position information.
+        """
+        return f"{self.employee_id.employee_work_info.department_id} / {self.employee_id.employee_work_info.job_position_id}"
+
+    def detail_view_task_custom(self):
+        """
+        This method for get custom column for stage in detail view.
+        """
+        tasks = self.employeetask_set.all()
+
+        return render_template(
+            path="cbv/exit_process/detail_view_tasks.html",
+            context={
+                "instance": self,
+                "tasks": tasks,
+            },
+        )
+
+    def get_individual_url(self):
+        """
+        This method is used to get update url
+        """
+        return f'{reverse_lazy("offboarding-individual-view", kwargs={"pk": self.pk})}'
+
+    def get_notice_period_col(self):
+        """
+        This method for get custom column for notice period in detail view.
+        """
+
+        notice_period_ends = self.notice_period_ends
+        today = date.today()
+
+        if notice_period_ends:
+            col = (
+                _("today")
+                if notice_period_ends == today
+                else (
+                    _("Notice period ended")
+                    if notice_period_ends < today
+                    else (
+                        _("In") + " " + timesince(today, notice_period_ends)
+                        if notice_period_ends
+                        else ""
+                    )
+                )
+            )
+
+        return col if notice_period_ends else ""
+
+    def get_stage_col(self):
+        """
+        This method for get custom column for stage in Pipeline view.
+        """
+        from offboarding.forms import StageSelectForm
+
+        return render_template(
+            path="cbv/exit_process/pipeline_stage_col.html",
+            context={
+                "employee": self,
+                "stage_form": StageSelectForm(
+                    offboarding=self.stage_id.offboarding_id,
+                    initial={"stage_id": self.stage_id.pk},
+                ),
+                "stages": self.stage_id.offboarding_id.offboardingstage_set.all(),
+            },
+        )
+
+    def get_task_status_col(self):
+        """
+        This method for get custom column for task status in Pipeline view.
+        """
+        completed_tasks = self.employeetask_set.filter(status="completed").count()
+        total_tasks = self.employeetask_set.all().count()
+
+        task_status = f"{completed_tasks} / {total_tasks}"
+        col = f"""
+            <div class="oh-checkpoint-badge oh-checkpoint-badge--primary" title="Completed {completed_tasks} of {total_tasks} tasks">
+                {task_status}
+            </div>
+        """
+        return col
+
+    def get_action_col(self):
+        """
+        This method for get custom column for action in Pipeline view.
+        """
+        return render_template(
+            path="cbv/exit_process/pipeline_action_col.html",
+            context={"employee": self, "stage": self.stage_id},
+        )
+
+    def __getattribute__(self, name):
+        if name.startswith("get_") and name.endswith("_task"):
+            task_id = literal_eval(name[4:-5])
+            task = EmployeeTask.objects.filter(
+                task_id__id=task_id,
+                employee_id_id=self.id,
+                task_id__stage_id=self.stage_id,
+            ).first()
+
+            return render_template(
+                "cbv/exit_process/tasks_cols.html",
+                {"instance": self, "task": task, "task_id": task_id},
+            )
+        value = super().__getattribute__(name)
+
+        return value
+
 
 class ResignationLetter(HorillaModel):
     """
@@ -162,6 +296,76 @@ class ResignationLetter(HorillaModel):
         related_company_field="employee_id__employee_work_info__company_id"
     )
 
+    def get_status(self):
+        """
+        Display status
+        """
+        return dict(self.statuses).get(self.status)
+
+    def option_column(self):
+        """
+        This method for get custome coloumn .
+        """
+
+        return render_template(
+            path="cbv/resignation/options.html",
+            context={"instance": self},
+        )
+
+    def actions_column(self):
+        """
+        This method for get custome coloumn .
+        """
+
+        return render_template(
+            path="cbv/resignation/actions.html",
+            context={"instance": self},
+        )
+
+    def description_col(self):
+        """
+        This method for get custome column .
+        """
+
+        return render_template(
+            path="cbv/resignation/description.html",
+            context={"instance": self},
+        )
+
+    def detail_description_col(self):
+        """
+        This method for get custome column .
+        """
+
+        return render_template(
+            path="cbv/resignation/detail_description.html",
+            context={"instance": self},
+        )
+
+    def resgnation_subtitle(self):
+        """
+        Detail view subtitle
+        """
+
+        return f"""{self.employee_id.employee_work_info.department_id } /
+          { self.employee_id.employee_work_info.job_position_id}"""
+
+    def get_detail_url(self):
+        """
+        Detail view url
+        """
+        url = reverse_lazy("resignation-requests-detail-view", kwargs={"pk": self.pk})
+        return url
+
+    def get_detail_tab_url(self):
+        """
+        Detail view url
+        """
+        url = reverse_lazy(
+            "tab-resignation-requests-detail-view", kwargs={"pk": self.pk}
+        )
+        return url
+
     def save(self, *args, **kwargs):
         super().save(*args, **kwargs)
         if self.status == "approved":
diff --git a/offboarding/templates/cbv/exit_process/detail_view_tasks.html b/offboarding/templates/cbv/exit_process/detail_view_tasks.html
new file mode 100644
index 000000000..9318d3362
--- /dev/null
+++ b/offboarding/templates/cbv/exit_process/detail_view_tasks.html
@@ -0,0 +1,50 @@
+{% load static i18n offboarding_filter %}
+{% if tasks %}
+    <div class="oh-timeoff-modal__stat m-0">
+        <span class="oh-timeoff-modal__stat-count fw-bold">{% trans "Tasks" %}</span>
+        <div class="row ms-2">
+            {% for task in tasks %}
+            <div class="col-6 ps-0 pb-1 my-1">
+                <div class="oh-timeoff-modal__stat-title mb-1">
+                    <span
+                        class="oh-dot oh-dot--small me-1 oh-dot--color-{{task.status}}"
+                    ></span>
+                    {{task.task_id.title}}
+                </div>
+                <div class="" id="task{{task.id}}{{instance.id}}">
+                    <select
+                        hx-get="{% url "update-task-status" %}?stage_id={{instance.stage_id.id}}&employee_ids={{instance.id}}&task_id={{task.task_id.id}}"
+                        hx-swap="none"
+                        hx-on-htmx-after-request="$(`#offboardingStageContainer{{instance.stage_id.pk}}`).find('.reload-record').click()"
+                        name="task_status"
+                        id="task_status{{assinged_tasks.id}}"
+                        class="p-2 w-100"
+                        onclick="event.stopPropagation()"
+                    >
+                        {% for t in task.statuses %}
+                            {% if task.status == t.0 %}
+                                <option value="{{ t.0 }}" selected>
+                                    {{ t.1 }}
+                                </option>
+                            {% else %}
+                                <option value="{{ t.0 }}">{{ t.1 }}</option>
+                            {% endif %} 
+                        {% endfor %}
+                    </select>
+                </div>
+            </div>
+            {% endfor %}
+        </div>
+    </div>
+{% endif %}
+
+<script>
+    $(document).on("htmx:afterRequest", function (event, data) {
+        $("select[name='task_status']").on("change", function() {
+            var value = $(this).val();
+            var dot = $(this).closest('.col-6').find('span.oh-dot');
+
+            dot.removeClass().addClass('oh-dot oh-dot--small me-1 oh-dot--color-' + value);
+        })
+    })
+</script>
\ No newline at end of file
diff --git a/offboarding/templates/cbv/exit_process/detailed_page_empty.html b/offboarding/templates/cbv/exit_process/detailed_page_empty.html
new file mode 100644
index 000000000..0659a5355
--- /dev/null
+++ b/offboarding/templates/cbv/exit_process/detailed_page_empty.html
@@ -0,0 +1,16 @@
+{% load static i18n %}
+<div class="oh-modal__dialog-header">
+    <span class="oh-modal__dialog-title" id="genericModalLabel">
+        {% trans "Details" %}
+    </span>
+    <button class="oh-modal__close--custom" onclick="$(this).closest('.oh-modal--show').removeClass('oh-modal--show');" aria-label="Close">
+        <ion-icon name="close-outline" role="img" class="md hydrated"></ion-icon>
+    </button>
+</div>
+<div class="oh-modal__dialog-body oh-modal__dialog-relative">
+    <img style="margin-left: 33%; width: 150px; height: 150px" src="{% static 'images/ui/search.svg' %}"
+        class="oh-404__image mb-2" alt="Page not found. 404." />
+    <h5 class="oh-404__subtitle">
+        {% trans "No Records found..." %}
+    </h5>
+</div>
\ No newline at end of file
diff --git a/offboarding/templates/cbv/exit_process/pipeline_action_col.html b/offboarding/templates/cbv/exit_process/pipeline_action_col.html
new file mode 100644
index 000000000..300122f93
--- /dev/null
+++ b/offboarding/templates/cbv/exit_process/pipeline_action_col.html
@@ -0,0 +1,87 @@
+{% load static i18n offboarding_filter %}
+<div class="oh-btn-group" >
+    {% if request.user.employee_get|is_any_stage_manager or perms.offboarding.change_offboarding or	perms.offboarding.change_offboardingemployee %}
+        <button
+            type="button"
+            hx-get="{% url 'send-mail-employee' employee.employee_id.id %}"
+            title="{% trans 'Send Mail' %}"
+            hx-target="#mail-content"
+            class="oh-btn oh-btn--light w-100"
+            data-toggle="oh-modal-toggle"
+            data-target="#sendMailModal"
+        >
+            <ion-icon name="mail-open-outline"></ion-icon>
+        </button>
+        <button
+            type="button"
+            title="{% trans 'Notes' %}"
+            class="oh-btn oh-btn--light w-100 oh-activity-sidebar__open"
+            data-target="#genericSidebar"
+            hx-get="{% url 'view-offboarding-note' employee.id %}"
+            hx-target="#genericOffCanvas"
+            onclick="$('#genericSidebar').addClass('oh-activity-sidebar--show')"
+        >
+            <ion-icon name="newspaper-outline"></ion-icon>
+        </button>
+        {% if stage.type == "archived" %}
+        <a
+            type="button"
+            hx-get="{% url 'employee-archive' employee.employee_id.id %}"
+            hx-target="#objectDetailsModalTarget"
+            data-toggle="oh-modal-toggle"
+            data-target="#objectDetailsModal"
+            title="{% if not employee.employee_id.is_active %}{% trans 'Un Archive' %} {% else %} {% trans 'Archive' %}{% endif %}"
+            class="oh-btn oh-btn--light w-100"
+            ><ion-icon name="archive"></ion-icon
+        ></a>
+        {% else %}
+        <a
+            type="button"
+            hx-get="{% url "add-employee" employee.id %}?stage_id={{stage.id}}"
+            hx-target="#objectDetailsModalTarget"
+            data-toggle="oh-modal-toggle"
+            data-target="#objectDetailsModal"
+            title="{% trans 'Edit' %}"
+            class="oh-btn oh-btn--light w-100"
+            ><ion-icon name="create-outline"></ion-icon
+        ></a>
+        {% endif %}
+        {% if employee.employee_id and employee.employee_id.get_archive_condition %}
+        <a
+            type="button"
+            title="{% trans 'Show managing records' %}"
+            hx-get="{% url 'get-manager-in' %}?employee_id={{employee.employee_id.id}}&offboarding=True"
+            hx-target="#objectDetailsModalTarget"
+            data-toggle="oh-modal-toggle"
+            data-target="#objectDetailsModal"
+            class="oh-btn oh-btn--light w-100"
+            ><ion-icon name="people-outline"></ion-icon
+        ></a>
+        {% endif %}
+        {% if perms.offboarding.delete_offboardingemployee %}
+        <a
+            type="button"
+            hx-confirm="Do you want to delete this offboarding user?"
+            hx-post="{% url "delete-offboarding-employee" %}?employee_ids={{employee.id}}"
+            hx-swap="none" 
+            hx-on-htmx-after-request = "$(`#offboardingStageContainer{{stage.pk}}`).find('.reload-record').click()"
+            title="{% trans 'Delete' %}"
+            class="oh-btn oh-btn--light w-100"
+            ><ion-icon name="trash-outline"></ion-icon>
+        </a>
+        {% endif %}
+    {% else %}
+    <button
+        type="button"
+        title="{% trans 'Notes' %}"
+        class="oh-btn oh-btn--light w-100 oh-activity-sidebar__open"
+        data-target="#genericSidebar"
+        hx-get="{% url 'view-offboarding-note' employee.id %}"
+        hx-target="#genericOffCanvas"
+        onclick="$('#genericSidebar').addClass('oh-activity-sidebar--show')"
+
+    >
+        <ion-icon name="newspaper-outline"></ion-icon>
+    </button>
+    {% endif %}
+</div>
\ No newline at end of file
diff --git a/offboarding/templates/cbv/exit_process/pipeline_filter.html b/offboarding/templates/cbv/exit_process/pipeline_filter.html
new file mode 100644
index 000000000..86faca6f4
--- /dev/null
+++ b/offboarding/templates/cbv/exit_process/pipeline_filter.html
@@ -0,0 +1,102 @@
+{% load static i18n %}
+<div class="oh-dropdown__filter-body">
+    <div class="oh-accordion">
+      <div class="oh-accordion-header">
+        {% trans 'Employee' %}
+      </div>
+      <div class="oh-accordion-body">
+        <div class="row">
+          <div class="col-sm-12 col-md-12 col-lg-6 mb-1">
+            <div class="oh-input-group">
+              <label class="oh-label">{% trans 'Notice Period Starts' %} (>=)</label>
+              {{employee_filter.form.notice_period_starts}}
+            </div>
+          </div>
+          <div class="col-sm-12 col-md-12 col-lg-6 mb-1">
+            <div class="oh-input-group">
+              <label class="oh-label">{% trans 'Notice Period Ends' %} (<=)</label>
+              {{employee_filter.form.notice_period_ends}}
+            </div>
+          </div>
+          <div class="col-sm-12 col-md-12 col-lg-6 mb-1">
+            <div class="oh-input-group">
+              <label class="oh-label">{% trans 'Department' %}</label>
+              {{employee_filter.form.employee_id__employee_work_info__department_id}}
+            </div>
+          </div>
+          <div class="col-sm-12 col-md-12 col-lg-6 mb-1">
+            <div class="oh-input-group">
+              <label class="oh-label">{% trans 'Job Position' %}</label>
+              {{employee_filter.form.employee_id__employee_work_info__job_position_id}}
+            </div>
+          </div>
+          <div class="col-sm-12 col-md-12 col-lg-6 mb-1">
+            <div class="oh-input-group">
+              <label class="oh-label">{% trans 'Job Role' %}</label>
+              {{employee_filter.form.employee_id__employee_work_info__job_role_id}}
+            </div>
+          </div>
+          <div class="col-sm-12 col-md-12 col-lg-6 mb-1">
+            <div class="oh-input-group">
+              <label class="oh-label">{% trans 'Employee Type' %}</label>
+              {{employee_filter.form.employee_id__employee_work_info__employee_type_id}}
+            </div>
+          </div>
+          <div class="col-sm-12 col-md-12 col-lg-6 mb-1">
+            <div class="oh-input-group">
+              <label class="oh-label">{% trans 'Shift' %}</label>
+              {{employee_filter.form.employee_id__employee_work_info__shift_id}}
+            </div>
+          </div>
+          <div class="col-sm-12 col-md-12 col-lg-6 mb-1">
+            <div class="oh-input-group">
+              <label class="oh-label">{% trans 'Work Type' %}</label>
+              {{employee_filter.form.employee_id__employee_work_info__work_type_id}}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="oh-accordion">
+      <div class="oh-accordion-header">
+        {% trans 'Offboarding' %}
+      </div>
+      <div class="oh-accordion-body">
+        <div class="row">
+          <div class="col-sm-12 col-md-12 col-lg-6 mb-1">
+            <div class="oh-input-group">
+              <label class="oh-label">{% trans 'Managers' %}</label>
+              {{pipeline_filter.form.offboarding_manager}}
+            </div>
+          </div>
+          <div class="col-sm-12 col-md-12 col-lg-6 mb-1">
+            <div class="oh-input-group">
+              <label class="oh-label">{% trans 'Status' %}</label>
+              {{pipeline_filter.form.status}}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <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 mb-1">
+            <div class="oh-input-group">
+              <label class="oh-label">{% trans 'Offboarding' %}</label>
+              {{stage_filter.form.offboarding_id}}
+            </div>
+          </div>
+          <div class="col-sm-12 col-md-12 col-lg-6 mb-1">
+            <div class="oh-input-group">
+              <label class="oh-label">{% trans 'Status' %}</label>
+              {{stage_filter.form.type}}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
\ No newline at end of file
diff --git a/offboarding/templates/cbv/exit_process/pipeline_stage_col.html b/offboarding/templates/cbv/exit_process/pipeline_stage_col.html
new file mode 100644
index 000000000..fc4cb003b
--- /dev/null
+++ b/offboarding/templates/cbv/exit_process/pipeline_stage_col.html
@@ -0,0 +1,12 @@
+{% load static i18n offboarding_filter %}
+{% if request.user.employee_get|is_any_stage_manager or perms.offboarding.change_offboarding or	perms.offboarding.change_offboardingemployee %}
+    <form onclick="event.stopPropagation()" hx-get="{% url "change-offboarding-stage" %}?employee_ids={{employee.id}}"
+        hx-target="#reloadMessagesButton">
+        {{ stage_form.stage_id }}
+        <input type="submit" hidden />
+    </form>
+{% else %}
+    <span class="oh-timeoff-modal__stat-count">
+        {{employee.stage_id}}
+    </span>
+{% endif %}
\ No newline at end of file
diff --git a/offboarding/templates/cbv/exit_process/pipeline_view.html b/offboarding/templates/cbv/exit_process/pipeline_view.html
new file mode 100644
index 000000000..0cbc77a8c
--- /dev/null
+++ b/offboarding/templates/cbv/exit_process/pipeline_view.html
@@ -0,0 +1,23 @@
+{% load static i18n %}
+
+{% include "generic/horilla_section.html" %}
+
+<div
+    class="oh-modal"
+    id="sendMailModal"
+    role="dialog"
+    aria-labelledby="sendMailModal"
+    aria-hidden="true"
+>
+    <div class="oh-modal__dialog">
+        <div class="oh-modal__dialog-header">
+            <span class="oh-modal__dialog-title" id="sendMailModalLabel"
+                ><h5>{% trans 'Send Mail' %}</h5></span
+            >
+            <button class="oh-modal__close" aria-label="Close">
+                <ion-icon name="close-outline"></ion-icon>
+            </button>
+        </div>
+        <div class="oh-modal__dialog-body" id="mail-content"></div>
+    </div>
+</div>
diff --git a/offboarding/templates/cbv/exit_process/stage_order.html b/offboarding/templates/cbv/exit_process/stage_order.html
new file mode 100644
index 000000000..ceef974cc
--- /dev/null
+++ b/offboarding/templates/cbv/exit_process/stage_order.html
@@ -0,0 +1,72 @@
+{% load static i18n %}
+<div class="oh-modal__dialog-header">
+    <span class="oh-modal__dialog-title" id="genericModalLabel">
+        {% trans "Update Stage Order" %}
+    </span>
+    <button
+        class="oh-modal__close--custom"
+        onclick="$(this).closest('.oh-modal--show').removeClass('oh-modal--show');"
+        aria-label="Close"
+    >
+        <ion-icon
+            name="close-outline"
+            role="img"
+            class="md hydrated"
+        ></ion-icon>
+    </button>
+</div>
+<div class="oh-modal__dialog-body oh-modal__dialog-relative rounded ">
+    <div class="oh-profile-section" id="sequenceForm">
+        <ul class="mt-3 p-0" id="sortable">
+            {% for stage in stages %}
+            <li
+                class="oh-btn oh-btn--small border d-flex align-items-center justify-content-start p-3 rounded mb-2"
+                style="cursor: grab"
+                data-id = "{{stage.id}}"
+            >
+                <span class="text-secondary me-3 fs-5">≡</span>
+                <span class="fw-bold text-primary me-2">{{stage.sequence}}.</span>
+                <span>{{stage}}</span>
+            </li>
+            {% endfor %}
+        </ul>
+        <div class="d-flex flex-row-reverse">
+            <button
+                type="submit"
+                class="oh-btn oh-btn--secondary mt-2 mr-0 oh-btn--w-100-resp"
+            >
+                {% trans "Save" %}
+            </button>
+        </div>
+    </div>
+</div>
+<script>
+    $(document).on("htmx:afterRequest", function (event, data) {
+        $(function () {
+            $("#sortable").sortable();
+            $("#sequenceForm button[type=submit]").on("click", function (e) {
+                e.preventDefault();
+                let order = [];
+                $("#sortable li").each(function (index) {
+                    order.push($(this).data("id"));
+                });
+    
+                $.ajax({
+                    url: "{% url 'update-stage-sequence' offboarding.id %}",
+                    method: "POST",
+                    data: {
+                        order: JSON.stringify(order),
+                        csrfmiddlewaretoken: '{{ csrf_token }}'
+                    },
+                    success: function (response) {
+                        $(".oh-modal--show").removeClass("oh-modal--show");
+                        $("#applyFilter").click()
+                    },
+                    error: function (response) {
+                        console.log("Error updating order");
+                    }
+                });
+            });
+        });
+    });
+</script>
diff --git a/offboarding/templates/cbv/exit_process/tasks_cols.html b/offboarding/templates/cbv/exit_process/tasks_cols.html
new file mode 100644
index 000000000..82436d4e2
--- /dev/null
+++ b/offboarding/templates/cbv/exit_process/tasks_cols.html
@@ -0,0 +1,44 @@
+{% load i18n %} 
+{% if task_id in request.managing_offboarding_tasks or perms.offboarding.change_employeetask or perms.offboarding.change_offboardingtask or instance.stage_id.pk in request.managing_offboarding_stages or instance.stage_id.offboarding_id.pk in request.managing_recruitments or request.user.employee_get == instance.employee_id %}
+    <div
+        onclick="event.stopPropagation()"
+        id="taskContainer{{ task_id }}{{ instance.pk }}"
+    >
+        {% if task %}
+            <select
+                hx-get="{% url 'update-task-status' %}?stage_id={{instance.stage_id.pk}}&employee_ids={{instance.id}}&task_id={{task_id}}"
+                name="task_status"
+                id="task_status{{task.id}}"
+                hx-swap="none"
+                hx-on-htmx-after-request="$('#reloadMessagesButton').click();$(`#offboardingStageContainer{{instance.stage_id.pk}}`).find('.reload-record').click()"
+                name="status"
+                class="w-100"
+                style="
+                    border: 1px solid hsl(213deg, 22%, 84%);
+                    padding: 0.3rem 0.8rem 0.3rem 0.3rem;
+                    border-radius: 0rem;
+                "
+            >
+                {% for choice in task.statuses %} 
+                    {% if choice.0 == task.status %}
+                        <option value="{{ choice.0 }}" selected>{{ choice.1 }}</option>
+                    {% else %}
+                        <option value="{{ choice.0 }}">{{ choice.1 }}</option>
+                    {% endif %} 
+                {% endfor %}
+            </select>
+        {% else %}
+            <button
+                class="oh-checkpoint-badge text-info"
+                data-toggle="oh-modal-toggle"
+                hx-get="{% url 'offboarding-assign-task' %}?employee_ids={{instance.id}}&task_id={{task_id}}"
+                hx-swap="none"
+                hx-on-htmx-after-request="$(`#offboardingStageContainer{{instance.stage_id.pk}}`).find('.reload-record').click();"
+            >
+                {% trans 'Assign' %}
+            </button>
+        {% endif %}
+    </div>
+{% else %} 
+    {{ task.get_status_display }} 
+{% endif %}
diff --git a/offboarding/templates/cbv/resignation/actions.html b/offboarding/templates/cbv/resignation/actions.html
new file mode 100644
index 000000000..3b074b704
--- /dev/null
+++ b/offboarding/templates/cbv/resignation/actions.html
@@ -0,0 +1,69 @@
+{% load i18n %}
+<div style="width : 100%" onclick="event.stopPropagation()">
+    <form action="{% url 'update-letter-status' %}">
+        {% if perms.offboarding.change_resignationletter %}
+        <div class="oh-btn-group">
+            {% if instance.status != "approved" %}
+            <button
+                title="By approving the request employee will added to the offboarding pipeline"
+                type="button"
+                onclick="event.stopPropagation();$(this).closest('form').find('input[name=status]').val('approved');resignLetterConfirmation('{% trans 'Do You really want to approve the request' %}?',$(this).closest('form').find('[type=submit]'),true);"
+                class="oh-btn oh-btn--success w-100 oh-btn--block w-100"
+            >
+                <ion-icon
+                    name="checkmark"
+                    class="mr-1 md hydrated"
+                    role="img"
+                    aria-label="checkmark"
+                ></ion-icon>
+            </button>
+            {% else %}
+            <button
+                type="button"
+                class="oh-btn oh-btn--success oh-btn--disabled oh-btn--block w-100"
+            >
+                <ion-icon
+                    name="checkmark"
+                    class="mr-1 md hydrated"
+                    role="img"
+                    aria-label="checkmark"
+                ></ion-icon>
+            </button>
+            {% endif %}
+            <button
+                type="button"
+                onclick="event.stopPropagation();$(this).closest('form').find('input[name=status]').val('rejected');resignLetterConfirmation('{% trans 'Do You really want to reject the request?' %}',$(this).closest('form').find('[type=submit]'));"
+                class="oh-btn oh-btn--danger oh-btn--block w-100"
+            >
+                <ion-icon
+                    name="close-circle-outline"
+                    class="mr-1 md hydrated"
+                    role="img"
+                    aria-label="close"
+                ></ion-icon>
+            </button>
+            <input type="hidden" name="status" />
+            <input
+                type="hidden"
+                name="letter_ids"
+                value="{{instance.id}}"
+            />
+            <input type="hidden" name="offboarding_id" />
+            <input type="hidden" name="notice_period_starts"
+            value="{% now "Y-m-d" %}"
+            id="notice_period_starts{{instance.id}}">
+            <input
+                type="hidden"
+                name="notice_period_ends"
+                id="notice_period_ends{{instance.id}}"
+            />
+            <button type="submit" hidden></button>
+        </div>
+        {% endif %}
+        <input
+            type="submit"
+            hidden=""
+            id="requestCard1Button"
+        />
+    </form>
+</div>
\ No newline at end of file
diff --git a/offboarding/templates/cbv/resignation/description.html b/offboarding/templates/cbv/resignation/description.html
new file mode 100644
index 000000000..cc285b74a
--- /dev/null
+++ b/offboarding/templates/cbv/resignation/description.html
@@ -0,0 +1,74 @@
+
+<div class="description-container">
+    <div class="description-text">
+        {{ instance.description|safe|truncatechars_html:30 }}
+    </div>
+    <div class="full-description">
+        {{ instance.description|safe }}
+    </div>
+</div>
+
+<style>
+    .description-container {
+        position: relative;
+        width: 100%; /* Adjust as needed */
+    }
+    
+    .description-text {
+        display: inline;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        cursor: pointer;
+    }
+   .full-description {
+        display: none;
+        position: absolute;
+        top: 100%;
+        left: 0;
+        background: white;
+        border: 1px solid #ccc;
+        padding: 10px;
+        z-index: 10;
+        max-height: 150px;
+        overflow-y: auto; /* Enable vertical scrolling */
+        overflow-x: hidden; /* Hide horizontal scrolling */
+    } 
+    {% comment %} .full-description {
+        display: none;
+        position: absolute;
+        top: 100%;
+        left: 0;
+        background: white;
+        border: 1px solid #ccc;
+        padding: 10px;
+        z-index: 10;
+        max-height: 150px; /* Adjust height as needed */
+        overflow-y: scroll; /* Enable vertical scrolling */
+        overflow-x: hidden; /* Hide horizontal scrolling */
+    }
+    
+    /* Hide scrollbar for Webkit browsers (Chrome, Safari) */
+    .full-description::-webkit-scrollbar {
+        display: none;
+    }
+    
+    /* Hide scrollbar for Firefox */
+    .full-description {
+        -ms-overflow-style: none;  /* IE and Edge */
+        scrollbar-width: none;  /* Firefox */
+    }
+     {% endcomment %}
+    .description-container:hover .full-description {
+        display: block;
+    }
+</style>    
+
+
+
+
+
+
+
+
+
diff --git a/offboarding/templates/cbv/resignation/detail_description.html b/offboarding/templates/cbv/resignation/detail_description.html
new file mode 100644
index 000000000..20cda2f10
--- /dev/null
+++ b/offboarding/templates/cbv/resignation/detail_description.html
@@ -0,0 +1,15 @@
+<style>
+    .descriptionContainer {
+        max-height: 200px; /* Set the desired height */
+        overflow-y: auto;  /* Enable vertical scrolling */
+        padding: 10px;     /* Optional: Add padding for better readability */
+        border: none; /* Optional: Add a border */
+    }
+</style>    
+<div class = "descriptionContainer">
+    {{ instance.description|safe }}
+</div>
+
+<script>
+    $('.descriptionContainer').parent().parent().parent().removeClass('col-6');
+</script>
\ No newline at end of file
diff --git a/offboarding/templates/cbv/resignation/detail_view.html b/offboarding/templates/cbv/resignation/detail_view.html
new file mode 100644
index 000000000..95151b8f6
--- /dev/null
+++ b/offboarding/templates/cbv/resignation/detail_view.html
@@ -0,0 +1,8 @@
+{% load i18n %}
+
+<div id = "detailContainer">
+    {% include  "generic/horilla_detailed_view.html" %}
+</div>
+
+
+
diff --git a/offboarding/templates/cbv/resignation/filter.html b/offboarding/templates/cbv/resignation/filter.html
new file mode 100644
index 000000000..6984b3340
--- /dev/null
+++ b/offboarding/templates/cbv/resignation/filter.html
@@ -0,0 +1,38 @@
+{% load i18n %}
+<div class="oh-dropdown__filter-body">
+    <div class="oh-accordion">
+      <div class="oh-accordion-header">{% trans "Resignation" %}</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 "Employee" %}</label>
+              {{form.employee_id}}
+            </div>
+            <div class="oh-input-group">
+              <label class="oh-label">{% trans "Status" %}</label>
+              {{form.status}}
+            </div>
+            <div class="oh-input-group">
+              <label class="oh-label">{% trans "Reporting manager" %}</label>
+              {{form.employee_id__employee_work_info__reporting_manager_id}}
+            </div>
+          </div>
+          <div class="col-sm-12 col-md-12 col-lg-6">
+            <div class="oh-input-group">
+              <label class="oh-label">{% trans "Department" %}</label>
+              {{form.employee_id__employee_work_info__department_id}}
+            </div>
+            <div class="oh-input-group">
+              <label class="oh-label">{% trans "Planned to resign" %}</label>
+              {{form.planned_to_leave_on}}
+            </div>
+            <div class="oh-input-group">
+              <label class="oh-label">{% trans "Job position" %}</label>
+              {{form.employee_id__employee_work_info__job_position_id}}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
\ No newline at end of file
diff --git a/offboarding/templates/cbv/resignation/options.html b/offboarding/templates/cbv/resignation/options.html
new file mode 100644
index 000000000..3369cf188
--- /dev/null
+++ b/offboarding/templates/cbv/resignation/options.html
@@ -0,0 +1,27 @@
+{% load i18n %}
+<div  onclick="event.stopPropagation()">
+    <div class="oh-btn-group">
+        {% if perms.offboarding.change_resignationletter %}
+        <button type="button" hx-get="{% url 'send-mail-employee' instance.employee_id.id %}"
+          title="{% trans " Send Mail" %}" hx-target="#resignationModalBody" class="oh-btn oh-btn--light" data-toggle="oh-modal-toggle"
+          data-target="#resignationModal" style="flex: 1 0 auto; width: 40px; height: 40.68px; padding: 0"
+          onclick="event.stopPropagation()"><ion-icon name="mail-open-outline" role="img" class="md hydrated"
+            aria-label="mail open outline"></ion-icon>
+        </button>
+        {% endif %}
+
+        <a hx-get="{% url 'resignation-request-update' instance.id %}" title = {% trans "Edit" %}
+          class="oh-btn oh-btn--light" data-toggle="oh-modal-toggle" hx-target="#genericModalBody"
+          data-target="#genericModal" style="flex: 1 0 auto; width: 40px; height: 40.68px; padding: 0"><ion-icon
+            class="text-dark md hydrated" name="create-outline" role="img" aria-label="create outline"></ion-icon></a>
+        {% if perms.offboarding.delete_resignationletter %}
+        <a href="{% url 'delete-resignation-request' %}?letter_ids={{instance.id}}" class="oh-btn oh-btn--light"
+          title = {%trans "Delete" %} style="flex: 1 0 auto; width: 40px; height: 40.68px; padding: 0"
+          onclick="return confirm('{% trans 'Do you want to delete this record' %}?')"><ion-icon
+            class="text-danger md hydrated" name="trash-outline" role="img" aria-label="trash outline"></ion-icon>
+        </a>
+        {% endif %}
+
+      </div>
+</div>
+
diff --git a/offboarding/templates/cbv/resignation/resignation.html b/offboarding/templates/cbv/resignation/resignation.html
new file mode 100644
index 000000000..b27333f56
--- /dev/null
+++ b/offboarding/templates/cbv/resignation/resignation.html
@@ -0,0 +1,148 @@
+{% extends "index.html" %}
+{% load i18n %}{% load static %}
+
+
+{% block content %}
+<style>
+    .rejected--dot{
+        background-color:red;
+      }
+      .approved--dot{
+        background-color:yellowgreen;
+      }
+      .requested--dot{
+        background-color: rgba(128, 128, 128, 0.482);
+      }
+      .status-requested{
+        border-left: 3.4px solid rgba(128, 128, 128, 0.482) !important;
+        border-radius: 4px 0 0 4px;
+      }
+      .status-rejected{
+        border-left: 3.4px solid red !important;
+        border-radius: 4px 0 0 4px;
+      }
+      .status-approved{
+        border-left: 3.4px solid yellowgreen !important;
+        border-radius: 4px 0 0 4px;
+      }
+      
+    </style>
+
+  
+
+<meta name="csrf-token" content="{{ csrf_token }}">
+
+
+<div hx-get="{% url "nav-resignation-request" %}" hx-trigger="load">
+</div> 
+{% comment %} my_app/templates/my_app/generic/index.html {% endcomment %}
+
+
+
+{% include "generic/components.html" %}
+
+
+<div
+    class="oh-checkpoint-badge mb-2"
+    id="selectedInstances"
+    data-ids="[]"
+    data-clicked=""
+    style="display: none"
+  ></div>
+
+  
+  <div 
+  class="oh-wrapper" 
+  hx-get="{% url "list-resignation-request"  %}?{{request.GET.urlencode}}&status=requested" hx-trigger="load"
+  id="listContainer">
+  <div class="animated-background">
+  </div>
+</div>
+
+
+<div class="oh-modal" id="resignationModal" role="dialog" aria-hidden="true">
+    <div class="oh-modal__dialog" style="max-width: 550px">
+      <div class="oh-modal__dialog-header">
+        <button type="button" class="oh-modal__close" aria-label="Close"><ion-icon name="close-outline"></ion-icon></button>
+      </div>
+      <div class="oh-modal__dialog-body" id="resignationModalBody"></div>
+    </div>
+  </div>
+
+
+  <script>
+    // toggle columns //
+    toggleColumns("resignation-column-table", "resignationCells");
+    localStorageresignationCells = localStorage.getItem(
+        "resignation_column_tab"
+    );
+    if (!localStorageresignationCells) {
+        $("#resignationCells").find("[type=checkbox]").prop("checked", true);
+    }
+    $("[type=checkbox]").change();
+    
+    function resignLetterConfirmation(params, target, approve = false) {
+      // Define the select box options
+      var selectOptions = ``;
+    var dateFields = '<label style="display:block;" for="notice_period_starts">Start Date:</label>' +
+      `<input style="display:block;" onchange="$('#${target.siblings("input[name=notice_period_starts]").first().attr("id")}').val(this.value)" class="oh-input" type="date" id="notice_period_starts" name="notice_period_starts">` +
+      '<label style="display:block;" for="notice_period_ends">End Date:</label>' +
+      `<input style="display:block;" onchange="$('#${target.siblings("input[name=notice_period_ends]").first().attr("id")}').val(this.value)" class="oh-input" type="date" id="notice_period_ends" name="notice_period_ends">`;
+  
+    html = '<p>' + params + '</p>'
+    if (approve) { html = html + "<div >" + selectOptions + `
+      <div class='row' style='overflow-x:hidden;'>
+        <div class="col-12">
+          <div class="oh-label__info" for="offboardingSelect">
+            <label class="oh-label" for="offboardingSelect">Add to</label>
+          </div>
+            <select id="offboardingSelect" class="oh-select oh-select2 w-100" name="reason" title="{% trans "Add to offboarding" %}">
+              // {% for offboarding in offboardings %}
+                <option value="{{offboarding.id}}">{{offboarding.title}}</option>
+              // {% endfor %}
+          </select>
+        </div>
+        <div class="col-6 col-md-6">
+          <div class="oh-label__info" for="notice_period_starts">
+            <label class="oh-label" for="notice_period_starts">Planned to leave on</label>
+          </div>
+            <input type="date" onchange="$('#${target.siblings("input[name=notice_period_starts]").first().attr("id")}').val(this.value);" name="notice_period_starts" value="{% now "Y-m-d" %}"  class="oh-input w-100 form-control" required id="notice_period_starts">
+        </div>
+        <div class="col-6 col-md-6">
+          <div class="oh-label__info" for="notice_period_ends">
+            <label class="oh-label" for="notice_period_ends">Notice period end</label>
+          </div>
+            <input type="date" onchange="$('#${target.siblings("input[name=notice_period_ends]").first().attr("id")}').val(this.value);" name="notice_period_ends"  class="oh-input w-100 form-control" required id="notice_period_ends">
+        </div>
+      </div>
+      ` + "</div>" }
+    Swal.fire({
+      html: html,
+      icon: 'question',
+      showCancelButton: true,
+      confirmButtonColor: '#008000',
+      cancelButtonColor: '#d33',
+      confirmButtonText: "Confirm",
+      cancelButtonText: "Close"
+    }).then((result) => {
+      if (result.isConfirmed) {
+        // Access the selected value from the select box
+        if (approve) {
+          var selectedOffboarding = document.getElementById('offboardingSelect').value;
+          target.siblings("input[name=offboarding_id]").val(selectedOffboarding)
+        }
+        target.click();
+  
+        if (event.target.tagName.toLowerCase() === 'form') {
+          event.target.submit();
+        } else if (event.target.tagName.toLowerCase() === 'a') {
+          window.location.href = event.target.href;
+        }
+      } else {
+        // Handle cancel
+      }
+    });
+  }
+  </script>
+
+{% endblock %}
\ No newline at end of file
diff --git a/offboarding/templates/cbv/resignation/resignation_tab.html b/offboarding/templates/cbv/resignation/resignation_tab.html
new file mode 100644
index 000000000..22c57dafa
--- /dev/null
+++ b/offboarding/templates/cbv/resignation/resignation_tab.html
@@ -0,0 +1,14 @@
+
+{% load i18n %}
+<div id="resignation-container">
+  {% if enabled_resignation_request %}
+<div class="d-flex flex-row-reverse oh-wrapper">
+    <a hx-get="{% url 'resignation-requests-create' %}?emp_id={{employee}}" hx-target="#genericModalBody" data-toggle="oh-modal-toggle" data-target="#genericModal" class="oh-btn oh-btn--secondary">
+      <ion-icon name="add-outline"></ion-icon>
+      {% trans 'Create' %}
+    </a>
+  </div>
+{% endif %}
+<br>
+{% include "generic/horilla_list.html" %}
+</div>
diff --git a/offboarding/templates/employees/extended_detailed_view.html b/offboarding/templates/employees/extended_detailed_view.html
new file mode 100644
index 000000000..32beb5377
--- /dev/null
+++ b/offboarding/templates/employees/extended_detailed_view.html
@@ -0,0 +1,77 @@
+{% load i18n %}
+
+{% include "cbv/profile/profile_view.html" %}
+<script>
+    toggleColumns("resignation-column-table", "resignationCells");
+          localStorageresignationCells = localStorage.getItem(
+              "resignation_column_tab"
+          );
+          if (!localStorageresignationCells) {
+              $("#resignationCells").find("[type=checkbox]").prop("checked", true);
+          }
+          $("[type=checkbox]").change();
+          
+          function resignLetterConfirmation(params, target, approve = false) {
+            // Define the select box options
+            var selectOptions = ``;
+          var dateFields = '<label style="display:block;" for="notice_period_starts">Start Date:</label>' +
+            `<input style="display:block;" onchange="$('#${target.siblings("input[name=notice_period_starts]").first().attr("id")}').val(this.value)" class="oh-input" type="date" id="notice_period_starts" name="notice_period_starts">` +
+            '<label style="display:block;" for="notice_period_ends">End Date:</label>' +
+            `<input style="display:block;" onchange="$('#${target.siblings("input[name=notice_period_ends]").first().attr("id")}').val(this.value)" class="oh-input" type="date" id="notice_period_ends" name="notice_period_ends">`;
+        
+          html = '<p>' + params + '</p>'
+          if (approve) { html = html + "<div >" + selectOptions + `
+            <div class='row' style='overflow-x:hidden;'>
+              <div class="col-12">
+                <div class="oh-label__info" for="offboardingSelect">
+                  <label class="oh-label" for="offboardingSelect">Add to</label>
+                </div>
+                  <select id="offboardingSelect" class="oh-select oh-select2 w-100" name="reason" title="{% trans "Add to offboarding" %}">
+                     {% for offboarding in offboardings %}
+                      <option value="{{offboarding.id}}">{{offboarding.title}}</option>
+                     {% endfor %}
+                </select>
+              </div>
+              <div class="col-6 col-md-6">
+                <div class="oh-label__info" for="notice_period_starts">
+                  <label class="oh-label" for="notice_period_starts">Planned to leave on</label>
+                </div>
+                  <input type="date" onchange="$('#${target.siblings("input[name=notice_period_starts]").first().attr("id")}').val(this.value);" name="notice_period_starts" value="{% now "Y-m-d" %}"  class="oh-input w-100 form-control" required id="notice_period_starts">
+              </div>
+              <div class="col-6 col-md-6">
+                <div class="oh-label__info" for="notice_period_ends">
+                  <label class="oh-label" for="notice_period_ends">Notice period end</label>
+                </div>
+                  <input type="date" onchange="$('#${target.siblings("input[name=notice_period_ends]").first().attr("id")}').val(this.value);" name="notice_period_ends"  class="oh-input w-100 form-control" required id="notice_period_ends">
+              </div>
+            </div>
+            ` + "</div>" }
+          Swal.fire({
+            html: html,
+            icon: 'question',
+            showCancelButton: true,
+            confirmButtonColor: '#008000',
+            cancelButtonColor: '#d33',
+            confirmButtonText: "Confirm",
+            cancelButtonText: "Close"
+          }).then((result) => {
+            if (result.isConfirmed) {
+              // Access the selected value from the select box
+              if (approve) {
+                var selectedOffboarding = document.getElementById('offboardingSelect').value;
+                target.siblings("input[name=offboarding_id]").val(selectedOffboarding)
+              }
+              target.click();
+        
+              if (event.target.tagName.toLowerCase() === 'form') {
+                event.target.submit();
+              } else if (event.target.tagName.toLowerCase() === 'a') {
+                window.location.href = event.target.href;
+              }
+            } else {
+              // Handle cancel
+            }
+          });
+        }
+      </script>
+  
\ No newline at end of file
diff --git a/offboarding/templates/offboarding/pipeline/offboardings.html b/offboarding/templates/offboarding/pipeline/offboardings.html
index 2cadcc504..5995c82c0 100644
--- a/offboarding/templates/offboarding/pipeline/offboardings.html
+++ b/offboarding/templates/offboarding/pipeline/offboardings.html
@@ -46,9 +46,7 @@
 
     // Highlight active tabs
     if (tabElement && !tabElement.classList.contains("oh-tabs__tab--active")) {
-        parentContainerEl
-            .querySelectorAll(".oh-tabs__tab--active")
-            .forEach(function (item) {
+        parentContainerEl.querySelectorAll(".oh-tabs__tab--active").forEach(function (item) {
                 item.classList.remove("oh-tabs__tab--active");
             });
 
@@ -59,9 +57,7 @@
 
     // Switch tabs
     if (targetEl && !targetEl.classList.contains("oh-tabs__content--active")) {
-        parentContainerEl
-            .querySelectorAll(".oh-tabs__content--active")
-            .forEach(function (item) {
+        parentContainerEl.querySelectorAll(".oh-tabs__content--active").forEach(function (item) {
                 item.classList.remove("oh-tabs__content--active");
             });
         targetEl.classList.add("oh-tabs__content--active");
@@ -93,7 +89,7 @@
                   <ul class="oh-dropdown__items">
                     {% if perms.offboarding.change_offboarding or request.user.employee_get|is_offboarding_manager %}
                     <li class="oh-dropdown__item">
-                      <a hx-get="{% url "create-offboarding" %}?instance_id={{offboarding.offboarding.id}}" hx-target="#objectDetailsModalTarget" data-toggle="oh-modal-toggle" data-target="#objectDetailsModal" class="oh-dropdown__link">{% trans "Edit" %}</a>
+                      <a hx-get="{% url "update-offboarding" offboarding.offboarding.id %}" hx-target="#objectDetailsModalTarget" data-toggle="oh-modal-toggle" data-target="#objectDetailsModal" class="oh-dropdown__link">{% trans "Edit" %}</a>
                     </li>
                     {% endif %}
                     {% if perms.offboarding.delete_offboarding %}
diff --git a/offboarding/templates/offboarding/resignation/request_cards.html b/offboarding/templates/offboarding/resignation/request_cards.html
index b5fbf210d..60a408b52 100644
--- a/offboarding/templates/offboarding/resignation/request_cards.html
+++ b/offboarding/templates/offboarding/resignation/request_cards.html
@@ -1,4 +1,16 @@
-{% load i18n %} {% load static %} {% include 'filter_tags.html' %}
+{% load i18n %} {% load static %}
+{% include 'filter_tags.html' %}
+<style>
+  .resign-status {
+	background: #73bbe12b;
+	font-size: 0.8rem;
+	padding: 4px 8px;
+	border-radius: 10px;
+	margin-bottom: 6px;
+	font-weight: 600;
+	color: #357579;
+	}
+</style>
 {% if perms.offboarding.view_resignationletter %}
     <div class="d-flex flex-row-reverse oh-wrapper">
         <span
diff --git a/offboarding/templates/offboarding/resignation/requests_view.html b/offboarding/templates/offboarding/resignation/requests_view.html
index dbd99ad58..5d9a67fd4 100644
--- a/offboarding/templates/offboarding/resignation/requests_view.html
+++ b/offboarding/templates/offboarding/resignation/requests_view.html
@@ -12,6 +12,7 @@
       }
 </style>
 {% include "offboarding/resignation/nav.html" %}
+fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff
 {% if letters %}
     {% include "filter_tags.html" %}
     <div
diff --git a/offboarding/templates/offboarding/stage/offboarding_body.html b/offboarding/templates/offboarding/stage/offboarding_body.html
index 4287eadbf..0af51b98e 100644
--- a/offboarding/templates/offboarding/stage/offboarding_body.html
+++ b/offboarding/templates/offboarding/stage/offboarding_body.html
@@ -39,7 +39,7 @@
                 {% if perms.offboarding.change_offboardingstage or request.user.employee_get|is_offboarding_manager %}
                   <li class="oh-dropdown__item">
                     <a
-                      hx-get="{% url "create-offboarding-stage" %}?offboarding_id={{offboarding.offboarding.id}}&instance_id={{stage.grouper.id}}"
+                      hx-get="{% url "create-offboarding-stage" stage.grouper.id %}?offboarding_id={{offboarding.offboarding.id}}"
                       data-target="#objectDetailsModal"
                       data-toggle="oh-modal-toggle" hx-target="#objectDetailsModalTarget" class="oh-dropdown__link">{% trans "Edit" %}</a>
                   </li>
diff --git a/offboarding/templates/offboarding/task/table_body.html b/offboarding/templates/offboarding/task/table_body.html
index 3f4adb39c..e82230d5d 100644
--- a/offboarding/templates/offboarding/task/table_body.html
+++ b/offboarding/templates/offboarding/task/table_body.html
@@ -12,10 +12,10 @@
             class="oh-sticky-table__tr oh-multiple-table-sort__movable"
             data-employee="{{employee.employee_id.get_full_name}}"
             data-employee-id="{{ employee.id }}"
-            hx-get='{% url "offboarding-individual-view" employee.id %}?requests_ids={{offboarding.employee_ids}}'
-            hx-target='#objectDetailsModalTarget'
+            hx-get='{% url "offboarding-individual-view" employee.id %}?instance_ids={{offboarding.employee_ids}}'
+            hx-target='#genericModalBody'
             data-toggle = 'oh-modal-toggle'
-            data-target="#objectDetailsModal"
+            data-target="#genericModal"
         >
             <div class="oh-sticky-table__sd">
                 <div class="oh-profile oh-profile--md">
@@ -101,7 +101,7 @@
                         {% else %}
                         <a
                             type="button"
-                            hx-get="{% url "add-employee" %}?instance_id={{employee.id}}&stage_id={{stage.grouper.id}}"
+                            hx-get="{% url "add-employee" employee.id %}?stage_id={{stage.grouper.id}}"
                             hx-target="#objectDetailsModalTarget"
                             data-toggle="oh-modal-toggle"
                             data-target="#objectDetailsModal"
diff --git a/offboarding/urls.py b/offboarding/urls.py
index 418e5c480..9c26f909a 100644
--- a/offboarding/urls.py
+++ b/offboarding/urls.py
@@ -7,26 +7,103 @@ This module is used to register url mappings to functions
 from django.apps import apps
 from django.urls import path
 
+from horilla_views.cbv_methods import check_feature_enabled
 from offboarding import views
+from offboarding.cbv import exit_process, resignation, resignation_tab
+from offboarding.models import OffboardingGeneralSetting
 
 urlpatterns = [
-    path("offboarding-pipeline", views.pipeline, name="offboarding-pipeline"),
-    path("create-offboarding", views.create_offboarding, name="create-offboarding"),
+    path(
+        "individual-resignation-tab-list/<int:pk>",
+        resignation_tab.ResignationTabView.as_view(),
+        name="individual-resignation-tab-list",
+    ),
+    path(
+        "offboarding-pipeline",
+        exit_process.OffboardingPipelineView.as_view(),
+        name="offboarding-pipeline",
+    ),
+    # path("create-offboarding", views.create_offboarding, name="create-offboarding"),
+    path(
+        "create-offboarding",
+        exit_process.OffboardingCreateFormView.as_view(),
+        name="create-offboarding",
+    ),
+    path(
+        "update-offboarding/<int:pk>/",
+        exit_process.OffboardingCreateFormView.as_view(),
+        name="update-offboarding",
+    ),
     path(
         "delete-offboarding/<int:id>",
         views.delete_offboarding,
         name="delete-offboarding",
     ),
+    # path(
+    #     "create-offboarding-stage", views.create_stage, name="create-offboarding-stage"
+    # ),
     path(
-        "create-offboarding-stage", views.create_stage, name="create-offboarding-stage"
+        "get-offboarding-stage/<int:offboarding_id>/",
+        exit_process.OffboardingPipelineStage.as_view(),
+        name="get-offboarding-stage",
+    ),
+    path(
+        "get-offboarding-employees-cbv",
+        exit_process.OffboardingEmployeeList.as_view(),
+        name="get-offboarding-employees-cbv",
+    ),
+    path(
+        "get-offboarding-tab",
+        exit_process.PipeLineTabView.as_view(),
+        name="get-offboarding-tab",
+    ),
+    path(
+        "create-offboarding-stage",
+        exit_process.OffboardingStageFormView.as_view(),
+        name="create-offboarding-stage",
+    ),
+    path(
+        "create-offboarding-stage/<int:pk>/",
+        exit_process.OffboardingStageFormView.as_view(),
+        name="create-offboarding-stage",
+    ),
+    path(
+        "update-stage-sequence/<int:pk>/",
+        views.update_stage_order,
+        name="update-stage-sequence",
+    ),
+    path(
+        "offboarding-pipeline-nav/",
+        exit_process.OffboardingPipelineNav.as_view(),
+        name="offboarding-pipeline-nav",
+    ),
+    # path("add-employee", views.add_employee, name="add-employee"),
+    path(
+        "add-employee",
+        exit_process.OffboardingStageAddEmployeeForm.as_view(),
+        name="add-employee",
+    ),
+    path(
+        "add-offboarding-employee",
+        exit_process.OffboardingStageAddEmployeeForm.as_view(),
+        name="add-offboarding-employee",
+    ),
+    path(
+        "add-employee/<int:pk>/",
+        exit_process.OffboardingStageAddEmployeeForm.as_view(),
+        name="add-employee",
     ),
-    path("add-employee", views.add_employee, name="add-employee"),
     path(
         "delete-offboarding-stage", views.delete_stage, name="delete-offboarding-stage"
     ),
     path(
         "offboarding-change-stage", views.change_stage, name="offboarding-change-stage"
     ),
+    path(
+        "change-offboarding-stage",
+        views.change_offboarding_stage,
+        name="change-offboarding-stage",
+    ),
     path(
         "view-offboarding-note/<int:employee_id>/",
         views.view_notes,
@@ -36,7 +113,17 @@ urlpatterns = [
     path(
         "delete-note-attachment", views.delete_attachment, name="delete-note-attachment"
     ),
-    path("offboarding-add-task", views.add_task, name="offboarding-add-task"),
+    # path("offboarding-add-task", views.add_task, name="offboarding-add-task"),
+    path(
+        "offboarding-add-task",
+        exit_process.OffboardingTaskFormView.as_view(),
+        name="offboarding-add-task",
+    ),
+    path(
+        "offboarding-update-task/<int:pk>/",
+        exit_process.OffboardingTaskFormView.as_view(),
+        name="offboarding-update-task",
+    ),
     path("update-task-status", views.update_task_status, name="update-task-status"),
     path("offboarding-assign-task", views.task_assign, name="offboarding-assign-task"),
     path(
@@ -45,9 +132,14 @@ urlpatterns = [
         name="delete-offboarding-employee",
     ),
     path("delete-offboarding-task", views.delete_task, name="delete-offboarding-task"),
+    # path(
+    #     "offboarding-individual-view/<int:emp_id>/",
+    #     views.offboarding_individual_view,
+    #     name="offboarding-individual-view",
+    # ),
     path(
-        "offboarding-individual-view/<int:emp_id>/",
-        views.offboarding_individual_view,
+        "offboarding-individual-view/<int:pk>/",
+        exit_process.ExitProcessDetailView.as_view(),
         name="offboarding-individual-view",
     ),
     path(
@@ -55,11 +147,58 @@ urlpatterns = [
         views.offboarding_note_delete,
         name="offboarding-note-delete",
     ),
+    # path(
+    #     "resignation-requests-view/",
+    #     views.request_view,
+    #     name="resignation-request-view",
+    # ),
     path(
         "resignation-requests-view/",
-        views.request_view,
+        resignation.ResignationLettersView.as_view(),
         name="resignation-request-view",
     ),
+    path(
+        "list-resignation-requests/",
+        resignation.ResignationListView.as_view(),
+        name="list-resignation-request",
+    ),
+    # path(
+    #     "tab-resignation-requests/<int:pk>",
+    #     resignation_tab.ResignationTabView.as_view(),
+    #     name="tab-resignation-requests",
+    # ),
+    path(
+        "tab-resignation-requests/<int:pk>",
+        check_feature_enabled("resignation_request", OffboardingGeneralSetting)(
+            resignation_tab.ResignationTabView.as_view()
+        ),
+        name="tab-resignation-requests",
+    ),
+    path(
+        "tab-resignation-requests-detail-view/<int:pk>",
+        resignation_tab.ResignationTabDetailView.as_view(),
+        name="tab-resignation-requests-detail-view",
+    ),
+    path(
+        "nav-resignation-requests/",
+        resignation.ResinationLettersNav.as_view(),
+        name="nav-resignation-request",
+    ),
+    path(
+        "resignation-requests-create/",
+        resignation.ResignationLettersFormView.as_view(),
+        name="resignation-requests-create",
+    ),
+    path(
+        "resignation-requests-update/<int:pk>",
+        resignation.ResignationLettersFormView.as_view(),
+        name="resignation-request-update",
+    ),
+    path(
+        "resignation-requests-detail-view/<int:pk>",
+        resignation.ResignationLetterDetailView.as_view(),
+        name="resignation-requests-detail-view",
+    ),
     path(
         "resignation-requests-single-view/<int:id>/",
         views.request_single_view,
diff --git a/offboarding/views.py b/offboarding/views.py
index 9604bb733..dc13700b2 100644
--- a/offboarding/views.py
+++ b/offboarding/views.py
@@ -312,6 +312,39 @@ def create_stage(request):
     return render(request, "offboarding/stage/form.html", {"form": form})
 
 
+@login_required
+@offboarding_manager_can_enter("offboarding.change_offboardingstage")
+def update_stage_order(request, pk):
+    """
+    This method is used to update the stage sequence of the offboarding
+    """
+    offboarding = Offboarding.objects.get(id=pk)
+
+    if request.method == "POST":
+        try:
+            order = json.loads(request.POST.get("order", "[]"))
+            for index, stage_id in enumerate(order):
+                stage = offboarding.offboardingstage_set.get(id=stage_id)
+                stage.sequence = index + 1
+                stage.save()
+            messages.success(request, "Sequence Updated Successfully")
+            return JsonResponse({"status": "success"})
+        except Exception as e:
+            messages.error(request, "Error Updating Sequence..")
+            return JsonResponse({"status": "error", "message": str(e)}, status=400)
+
+    stages = offboarding.offboardingstage_set.order_by("sequence")
+
+    return render(
+        request,
+        "cbv/exit_process/stage_order.html",
+        {
+            "stages": stages,
+            "offboarding": offboarding,
+        },
+    )
+
+
 @login_required
 @any_manager_can_enter("offboarding.add_offboardingemployee")
 def add_employee(request):
@@ -461,6 +494,51 @@ def change_stage(request):
     )
 
 
+@login_required
+@hx_request_required
+@any_manager_can_enter("offboarding.change_offboarding")
+def change_offboarding_stage(request):
+    """
+    This method is used to update the stages of the employee
+    """
+    employee_ids = request.GET.getlist("employee_ids")
+    stage_id = request.GET["stage_id"]
+    employees = OffboardingEmployee.objects.filter(id__in=employee_ids)
+    stage = OffboardingStage.objects.get(id=stage_id)
+    # This wont trigger the save method inside the offboarding employee
+    # employees.update(stage_id=stage)
+    for employee in employees:
+        employee.stage_id = stage
+        employee.save()
+    if stage.type == "archived":
+        Employee.objects.filter(
+            id__in=employees.values_list("employee_id__id", flat=True)
+        ).update(is_active=False)
+    stage_forms = {}
+    stage_forms[str(stage.offboarding_id.id)] = StageSelectForm(
+        offboarding=stage.offboarding_id
+    )
+    notify.send(
+        request.user.employee_get,
+        recipient=User.objects.filter(
+            id__in=employees.values_list("employee_id__employee_user_id", flat=True)
+        ),
+        verb=f"Offboarding stage has been changed",
+        verb_ar=f"تم تغيير مرحلة إنهاء الخدمة",
+        verb_de=f"Die Offboarding-Stufe wurde geändert",
+        verb_es=f"Se ha cambiado la etapa de offboarding",
+        verb_fr=f"L'étape d'offboarding a été changée",
+        redirect=reverse("offboarding-pipeline"),
+        icon="information",
+    )
+    groups = pipeline_grouper({}, [stage.offboarding_id])
+    for item in groups:
+        setattr(item["offboarding"], "stages", item["stages"])
+    from horilla_views.generic.cbv.views import HorillaFormView
+
+    return HorillaFormView.HttpResponse()
+
+
 @login_required
 @hx_request_required
 @any_manager_can_enter(
@@ -597,14 +675,15 @@ def update_task_status(request, *args, **kwargs):
     """
     This method is used to update the assigned tasks status
     """
-    stage_id = request.GET["stage_id"]
+    stage_id = request.GET.get("stage_id")
     employee_ids = request.GET.getlist("employee_ids")
-    task_id = request.GET["task_id"]
-    status = request.GET["task_status"]
+    task_id = request.GET.get("task_id")
+    status = request.GET.get("task_status")
     employee_task = EmployeeTask.objects.filter(
         employee_id__id__in=employee_ids, task_id__id=task_id
     )
     employee_task.update(status=status)
+    messages.success(request, _("Task status updated successfully..."))
     notify.send(
         request.user.employee_get,
         recipient=User.objects.filter(
@@ -832,6 +911,20 @@ def search_resignation_request(request):
     )
 
 
+@login_required
+@hx_request_required
+@check_feature_enabled("resignation_request")
+def resignation_tab(request, pk):
+
+    letters = ResignationLetter.objects.filter(employee_id=pk)
+    employee = Employee.objects.get(id=pk)
+    return render(
+        request,
+        "cbv/resignation/resignation_tab.html",
+        {"letters": letters, "employee": employee},
+    )
+
+
 @login_required
 @check_feature_enabled("resignation_request")
 def delete_resignation_request(request):
@@ -846,7 +939,7 @@ def delete_resignation_request(request):
     ):
         return redirect("/employee/employee-profile/")
     else:
-        return redirect(request_view)
+        return redirect("resignation-request-view")
 
 
 @login_required
@@ -937,7 +1030,8 @@ def update_status(request):
                 redirect="#",
                 icon="information",
             )
-    return redirect(request_view)
+    # return redirect(request_view)
+    return redirect(reverse("resignation-request-view"))
 
 
 @login_required
diff --git a/onboarding/cbv/__init__.py b/onboarding/cbv/__init__.py
new file mode 100644
index 000000000..e69de29bb
diff --git a/onboarding/cbv/accessibility.py b/onboarding/cbv/accessibility.py
new file mode 100644
index 000000000..7cb7c5108
--- /dev/null
+++ b/onboarding/cbv/accessibility.py
@@ -0,0 +1,28 @@
+"""
+onboarding/cbv/accessibility.py
+"""
+
+from recruitment.methods import recruitment_manages
+from onboarding.templatetags.onboardingfilters import stage_manages
+
+
+def edit_stage_accessibility(
+    request, instance=None, user_perms=[], *args, **kwargs
+) -> bool:
+    """
+    Edit accessibility
+    """
+    return request.user.has_perm("onboarding.change_onboardingstage") or stage_manages(
+        request.user, instance
+    )
+
+
+def delete_stage_accessibility(
+    request, instance=None, user_perms=[], *args, **kwargs
+) -> bool:
+    """
+    Delete accessibility
+    """
+    return request.user.has_perm(
+        "onboarding.delete_onboardingstage"
+    ) or recruitment_manages(request.user, instance.recruitment_id)
diff --git a/onboarding/cbv/dashboard.py b/onboarding/cbv/dashboard.py
new file mode 100644
index 000000000..08238fb61
--- /dev/null
+++ b/onboarding/cbv/dashboard.py
@@ -0,0 +1,152 @@
+"""
+Dashboard of onboarding
+"""
+
+from typing import Any
+from django.urls import reverse
+from django.utils.translation import gettext_lazy as _
+from django.db.models import Count, Q, Value, CharField
+from django.db.models.functions import Concat, Cast
+from django.utils.decorators import method_decorator
+from horilla_views.cbv_methods import login_required
+from horilla_views.generic.cbv.views import HorillaListView
+from onboarding.cbv_decorators import all_manager_can_enter
+from onboarding.filters import OnboardingTaskFilter
+from onboarding.models import CandidateTask, OnboardingTask
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(
+    all_manager_can_enter("onboarding.change_onboardingtask"), name="dispatch"
+)
+class MyOnboardingTaskList(HorillaListView):
+    """
+    List view for onboarding tasks in dashboard
+    """
+
+    model = OnboardingTask
+    bulk_select_option = False
+    filter_class = OnboardingTaskFilter
+
+    row_attrs = """
+                hx-get="{get_detail_url}"
+                hx-target="#taskModalBody"
+                data-target="#taskModal"
+                data-toggle="oh-modal-toggle"
+                """
+
+    columns = [
+        (_("Task"), "task_title_count"),
+        (_("Todo"), "todo_count"),
+        (_("Scheduled"), "scheduled_count"),
+        (_("Ongoing"), "ongoing_count"),
+        (_("Stuck"), "stuck_count"),
+        (_("Done"), "done_count"),
+    ]
+
+    header_attrs = {
+        "task_title_count": """
+                          style = "width:100px !important "                          
+                          """,
+        "todo_count": """
+                          style = "width:55px !important"                          
+                          """,
+        "scheduled_count": """
+                          style = "width:55px !important;"                          
+                          """,
+        "ongoing_count": """
+                          style = "width:60px !important"                          
+                          """,
+        "stuck_count": """
+                          style = "width:55px !important"                          
+                          """,
+        "done_count": """
+                          style = "width:65px !important"                          
+                          """,
+    }
+
+    def get_queryset(self):
+        queryset = super().get_queryset()
+        employee_id = self.request.user.employee_get.id
+        queryset = (
+            queryset.filter(
+                employee_id__id=employee_id,
+                candidates__is_active=True,
+                candidates__recruitment_id__closed=False,
+            )
+            .distinct()
+            .annotate(
+                todo_count=Count(
+                    "candidatetask",
+                    filter=Q(candidatetask__status="todo"),
+                    distinct=True,
+                ),
+                scheduled_count=Count(
+                    "candidatetask",
+                    filter=Q(candidatetask__status="scheduled"),
+                    distinct=True,
+                ),
+                ongoing_count=Count(
+                    "candidatetask",
+                    filter=Q(candidatetask__status="ongoing"),
+                    distinct=True,
+                ),
+                stuck_count=Count(
+                    "candidatetask",
+                    filter=Q(candidatetask__status="stuck"),
+                    distinct=True,
+                ),
+                done_count=Count(
+                    "candidatetask",
+                    filter=Q(candidatetask__status="done"),
+                    distinct=True,
+                ),
+                task_title_count=Concat(
+                    "task_title",
+                    Value(" ("),
+                    Cast(Count("candidatetask", distinct=True), CharField()),
+                    Value(")"),
+                    output_field=CharField(),
+                ),
+            )
+        )
+
+        return queryset
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.view_id = "myOnboarding"
+        self.search_url = reverse("task-report-onboarding")
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(
+    all_manager_can_enter("onboarding.view_candidatetask"), name="dispatch"
+)
+class MyOnboardingCandidatesSingleView(HorillaListView):
+    """
+    Single view of my onboarding task in dashboard
+    """
+
+    model = CandidateTask
+    bulk_select_option = None
+
+    template_name = "cbv/dashboard/my_onboarding_task.html"
+
+    columns = [
+        (_("Candidaate"), "candidate_id__name"),
+        (_("Status"), "status_col"),
+    ]
+
+    def get_context_data(self, **kwargs: Any):
+        context = super().get_context_data(**kwargs)
+        task_id = self.request.GET.get("task_id")
+        candidate_tasks = CandidateTask.objects.filter(onboarding_task_id__id=task_id)
+        context["candidate_tasks"] = candidate_tasks
+        return context
+
+    def get_queryset(self):
+        queryset = super().get_queryset()
+        task_id = self.request.GET.get("task_id")
+        queryset = queryset.filter(onboarding_task_id__id=task_id)
+        return queryset
diff --git a/onboarding/cbv/onboarding_candidates.py b/onboarding/cbv/onboarding_candidates.py
new file mode 100644
index 000000000..b12fb1fb1
--- /dev/null
+++ b/onboarding/cbv/onboarding_candidates.py
@@ -0,0 +1,199 @@
+"""
+Onboarding candidate view.
+"""
+
+from typing import Any
+from django.urls import reverse, reverse_lazy
+from django.utils.decorators import method_decorator
+from django.utils.translation import gettext_lazy as _
+from django.db.models import Q
+from horilla_views.cbv_methods import login_required, permission_required
+from horilla_views.generic.cbv.views import (
+    HorillaListView,
+    HorillaNavView,
+    TemplateView,
+)
+from recruitment.filters import CandidateFilter
+from recruitment.models import Candidate
+from base.models import HorillaMailTemplate
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(permission_required(perm="candidate.view_candidate"), name="dispatch")
+class OnboardingCandidatesView(TemplateView):
+    """
+    onboarding candidates view
+    """
+
+    template_name = "cbv/onboarding_candidates/onboarding_candidates.html"
+
+    def get_context_data(self, **kwargs: Any):
+        context = super().get_context_data(**kwargs)
+        hired_candidates = Candidate.objects.filter(
+            is_active=True,
+            hired=True,
+            recruitment_id__closed=False,
+        )
+        mail_templates = HorillaMailTemplate.objects.all()
+        context["mail_templates"] = mail_templates
+        context["hired_candidates"] = hired_candidates
+        return context
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(permission_required(perm="candidate.view_candidate"), name="dispatch")
+class OnboardingCandidatesList(HorillaListView):
+    """
+    List view
+    """
+
+    bulk_update_fields = [
+        "joining_date",
+        "probation_end",
+        "job_position_id",
+        "recruitment_id",
+    ]
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("onboarding-candidates-list")
+
+    def get_queryset(self):
+        if not getattr(self, "queryset"):
+            queryset = super().get_queryset()
+            self.queryset = (
+                queryset.filter(
+                    is_active=True,
+                    recruitment_id__closed=False,
+                )
+                .filter(Q(hired=True) | Q(stage_id__stage_type="hired"))
+                .distinct()
+            ).order_by("-id")
+
+        return self.queryset
+
+    model = Candidate
+    filter_class = CandidateFilter
+
+    columns = [
+        ("Candidate", "name", "get_avatar"),
+        ("Email", "last_email"),
+        ("Date of joining", "date_of_joining"),
+        ("Probation ends", "probation_date"),
+        ("Job position", "job_position_id"),
+        ("Recruitment", "recruitment_id"),
+        ("Offer letter", "offer_letter"),
+    ]
+    header_attrs = {
+        "action": "style='width: 350px;'",
+    }
+
+    action_method = "actions"
+
+    row_status_indications = [
+        (
+            "joining--dot",
+            _("Joining Set"),
+            """
+            onclick="
+                $('#applyFilter').closest('form').find('[name=joining_set]').val('true');
+                $('[name=portal_sent]').val('unknown').change();
+                $('#applyFilter').click();
+                
+            "
+            """,
+        ),
+        (
+            "not-joining--dot",
+            _("Joining Not-Set"),
+            """
+            onclick="
+                $('#applyFilter').closest('form').find('[name=joining_set]').val('false');
+                $('[name=portal_sent]').val('unknown').change();
+                $('#applyFilter').click();
+                
+            "
+            """,
+        ),
+        (
+            "not-portal--dot",
+            _("Portal Not-Sent"),
+            """
+            onclick="
+                $('#applyFilter').closest('form').find('[name=portal_sent]').val('false');
+                $('[name=joining_set]').val('unknown').change();
+                $('#applyFilter').click();
+            "
+            """,
+        ),
+        (
+            "portal--dot",
+            _("Portal Send"),
+            """
+            onclick="
+                $('#applyFilter').closest('form').find('[name=portal_sent]').val('true');
+                $('[name=joining_set]').val('unknown').change();
+                $('#applyFilter').click();
+                
+            "
+            """,
+        ),
+    ]
+
+    sortby_mapping = [
+        ("Candidate", "name"),
+        ("Email", "last_email"),
+        ("Date of joining", "date_of_joining"),
+        ("Job position", "job_position_id__job_position"),
+        ("Recruitment", "recruitment_id__title"),
+        ("Probation ends", "probation_date"),
+    ]
+
+    row_attrs = """
+                onclick="window.location.href='{get_individual_url}'"
+                """
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(permission_required(perm="candidate.view_candidate"), name="dispatch")
+class OnboardingCandidatesNav(HorillaNavView):
+    """
+    Nav bar
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("onboarding-candidates-list")
+        self.create_attrs = f"""
+                                href="{reverse_lazy('candidate-create')}?onboarding=True"
+                                """
+
+    nav_title = _("Hired Candidates")
+    filter_instance = CandidateFilter()
+    filter_body_template = "cbv/onboarding_candidates/filter.html"
+    filter_form_context_name = "form"
+    search_swap_target = "#listContainer"
+
+    group_by_fields = [
+        ("recruitment_id", _("Recruitment")),
+        ("job_position_id", _("Job position")),
+        ("country", _("Country")),
+        ("stage_id", _("Stage")),
+        ("joining_date", _("Joining Date")),
+        ("probation_end", _("Probation End")),
+        ("offer_letter_status", _("Offer Letter Status")),
+        ("rejected_candidate__reject_reason_id", _("Rejected Reason")),
+        ("skillzonecandidate_set__skill_zone_id", _("Skill Zone")),
+    ]
+
+    actions = [
+        {
+            "action": _("Send Portal"),
+            "attrs": """
+                    
+                    data-target="#addAttachments"
+                    data-toggle="oh-modal-toggle"
+                    id="send-port"
+                    """,
+        }
+    ]
diff --git a/onboarding/cbv/onboarding_view.py b/onboarding/cbv/onboarding_view.py
new file mode 100644
index 000000000..28bfa3c22
--- /dev/null
+++ b/onboarding/cbv/onboarding_view.py
@@ -0,0 +1,260 @@
+"""
+This page handles the cbv methods for onboarding view 
+"""
+
+import contextlib
+from typing import Any
+from django import forms
+from django.contrib import messages
+from django.http import HttpResponse
+from django.shortcuts import render
+from django.urls import reverse
+from django.utils.decorators import method_decorator
+from django.utils.translation import gettext_lazy as _
+from notifications.signals import notify
+from employee.models import Employee
+from horilla_views.generic.cbv.views import HorillaDetailedView, HorillaFormView
+from horilla_views.cbv_methods import login_required
+from onboarding.forms import (
+    OnboardingTaskForm,
+    OnboardingViewStageForm,
+    OnboardingViewTaskForm,
+)
+from onboarding.models import CandidateTask, OnboardingStage, OnboardingTask
+from recruitment.models import Candidate
+from onboarding.cbv_decorators import (
+    recruitment_manager_can_enter,
+    stage_manager_can_enter,
+)
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(
+    recruitment_manager_can_enter("onboarding.add_onboardingstage"), name="dispatch"
+)
+class StageCreateForm(HorillaFormView):
+    """
+    Form view for create and update stage
+    """
+
+    form_class = OnboardingViewStageForm
+    model = OnboardingStage
+    new_display_title = _("Create Stage")
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        obj_id = self.kwargs.get("obj_id")
+        self.form.fields["recruitment_id"].widget = forms.HiddenInput()
+        self.form.fields["recruitment_id"].initial = obj_id
+        if self.form.instance.pk:
+            self.form_class.verbose_name = _("Update Stage")
+        return context
+
+    def form_valid(self, form: OnboardingViewStageForm) -> HttpResponse:
+        if form.is_valid():
+            if form.instance.pk:
+                message = _("Stage Updated Successfully")
+            else:
+                message = _("New stage created successfully")
+            stage = form.save()
+            stage.employee_id.set(
+                Employee.objects.filter(id__in=form.data.getlist("employee_id"))
+            )
+            users = [employee.employee_user_id for employee in stage.employee_id.all()]
+            messages.success(self.request, _(message))
+            with contextlib.suppress(Exception):
+                notify.send(
+                    self.request.user.employee_get,
+                    recipient=users,
+                    verb="You are chosen as onboarding stage manager",
+                    verb_ar="لقد تم اختيارك كمدير مرحلة التدريب.",
+                    verb_de="Sie wurden als Onboarding-Stage-Manager ausgewählt.",
+                    verb_es="Ha sido seleccionado/a como responsable de etapa de incorporación.",
+                    verb_fr="Vous avez été choisi(e) en tant que responsable de l'étape d'intégration.",
+                    icon="people-circle",
+                    redirect=reverse("onboarding-view"),
+                )
+
+            return self.HttpResponse("<script>window.location.reload();</script>")
+        return super().form_valid(form)
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(
+    stage_manager_can_enter("onboarding.add_onboardingtask"), name="dispatch"
+)
+class TaskCreateForm(HorillaFormView):
+    """
+    form view for create tasks
+    """
+
+    model = CandidateTask
+    form_class = OnboardingViewTaskForm
+    new_display_title = _("Create Task")
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        self.form.fields["stage_id"].widget = forms.HiddenInput()
+
+        obj_id = self.kwargs.get("obj_id")
+        stage = OnboardingStage.objects.get(id=obj_id)
+        self.form.fields["stage_id"].initial = obj_id
+
+        candidate_ids = stage.candidate.all().values_list("candidate_id", flat=True)
+        cand_queryset = Candidate.objects.filter(id__in=candidate_ids)
+        self.form.fields["candidates"].queryset = cand_queryset
+        self.form.fields["candidates"].initial = cand_queryset
+
+        context["form"] = self.form
+        return context
+
+    def form_invalid(self, form: Any) -> HttpResponse:
+
+        if self.form.instance.pk:
+            self.form_class.verbose_name = _("Update Request")
+        if not form.is_valid():
+            errors = form.errors.as_data()
+            return render(
+                self.request, self.template_name, {"form": form, "errors": errors}
+            )
+        return super().form_invalid(form)
+
+    def form_valid(self, form: OnboardingTaskForm) -> HttpResponse:
+        if form.is_valid():
+            message = _("New Task Created Successfully")
+            candidates = self.form.cleaned_data["candidates"]
+            stage_id = self.form.cleaned_data["stage_id"]
+            managers = self.request.POST.getlist("managers")
+            title = self.form.cleaned_data["task_title"]
+            onboarding_task = OnboardingTask(task_title=title, stage_id=stage_id)
+            onboarding_task.save()
+            onboarding_task.employee_id.set(managers)
+            onboarding_task.candidates.set(candidates)
+            if candidates:
+                for cand in candidates:
+                    task = CandidateTask(
+                        candidate_id=cand,
+                        stage_id=stage_id,
+                        onboarding_task_id=onboarding_task,
+                    )
+                    task.save()
+            users = [
+                manager.employee_user_id
+                for manager in onboarding_task.employee_id.all()
+            ]
+            notify.send(
+                self.request.user.employee_get,
+                recipient=users,
+                verb="You are chosen as an onboarding task manager",
+                verb_ar="لقد تم اختيارك كمدير مهام التدريب.",
+                verb_de="Sie wurden als Onboarding-Aufgabenmanager ausgewählt.",
+                verb_es="Ha sido seleccionado/a como responsable de tareas de incorporación.",
+                verb_fr="Vous avez été choisi(e) en tant que responsable des tâches d'intégration.",
+                icon="people-circle",
+                redirect=reverse("onboarding-view"),
+            )
+            messages.success(self.request, _(message))
+            return self.HttpResponse()
+        return super().form_valid(form)
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(
+    stage_manager_can_enter("onboarding.change_onboardingtask"), name="dispatch"
+)
+class TaskUpdateFormView(HorillaFormView):
+    """
+    form view for update tasks
+    """
+
+    model = OnboardingTask
+    form_class = OnboardingTaskForm
+    new_display_title = _("Update Task")
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        self.form.fields["stage_id"].widget = forms.HiddenInput()
+        context["form"] = self.form
+        # onboarding_task = OnboardingTask.objects.get(id=self.form.instance.pk)
+        return context
+
+    def form_valid(self, form: OnboardingTaskForm) -> HttpResponse:
+        if form.is_valid():
+            if form.instance.pk:
+                onboarding_task = OnboardingTask.objects.get(id=self.form.instance.pk)
+                task = form.save()
+                task.employee_id.set(
+                    Employee.objects.filter(id__in=form.data.getlist("employee_id"))
+                )
+                for cand_task in onboarding_task.candidatetask_set.all():
+                    if cand_task.candidate_id not in task.candidates.all():
+                        cand_task.delete()
+                    else:
+                        cand_task.stage_id = task.stage_id
+                messages.success(self.request, _("Task updated successfully.."))
+                users = [
+                    employee.employee_user_id for employee in task.employee_id.all()
+                ]
+                notify.send(
+                    self.request.user.employee_get,
+                    recipient=users,
+                    verb="You are chosen as an onboarding task manager",
+                    verb_ar="لقد تم اختيارك كمدير مهام التدريب.",
+                    verb_de="Sie wurden als Onboarding-Aufgabenmanager ausgewählt.",
+                    verb_es="Ha sido seleccionado/a como responsable de tareas de incorporación.",
+                    verb_fr="Vous avez été choisi(e) en tant que responsable des tâches d'intégration.",
+                    icon="people-circle",
+                    redirect=reverse("onboarding-view"),
+                )
+
+            form.save()
+            return self.HttpResponse()
+        return super().form_valid(form)
+
+
+class OnboardingCandidateDetailView(HorillaDetailedView):
+    """
+    detail view of onboarding view
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.body = [
+            (_("Job Position"), "get_job_position"),
+            (_("Contact"), "mobile"),
+            (_("Joining Date"), "joining_date"),
+            (_("Onboarding Portal Stage"), "onboarding_portal_html"),
+            (_("Status"), "onboarding_status_col"),
+            (_("Tasks"), "onboarding_task_col"),
+        ]
+
+    template_name = "cbv/onboarding_view/detail_view.html"
+
+    model = Candidate
+    title = _("Details")
+    header = {
+        "title": "name",
+        "subtitle": "email",
+        "avatar": "get_avatar",
+    }
+
+    cols = {"onboarding_task_col": 12}
+
+    actions = [
+        {
+            "action": "View",
+            "icon": "eye-outline",
+            "attrs": """
+                     class="oh-btn oh-btn--light w-50"
+                     href="{get_individual_url}"
+                     """,
+        },
+        {
+            "action": "Edit",
+            "icon": "create-outline",
+            "attrs": """
+                    class="oh-btn oh-btn--info w-50"
+                    href ="{get_update_url}"
+                    """,
+        },
+    ]
diff --git a/onboarding/cbv/pipeline.py b/onboarding/cbv/pipeline.py
new file mode 100644
index 000000000..4875bf19c
--- /dev/null
+++ b/onboarding/cbv/pipeline.py
@@ -0,0 +1,683 @@
+"""
+onboarding/cbv/pipeline.py
+"""
+
+import re
+from django.http import HttpResponse
+from django.urls import reverse, reverse_lazy
+from django.views import View
+from django.views.generic import TemplateView
+from django.utils.decorators import method_decorator
+from django.utils.translation import gettext_lazy as _
+from django.contrib import messages
+from base.methods import eval_validate
+from horilla.horilla_middlewares import _thread_locals
+from horilla_views.cbv_methods import render_template, login_required
+from horilla_views.generic.cbv.pipeline import Pipeline
+from horilla_views.generic.cbv.views import (
+    HorillaFormView,
+    HorillaListView,
+    HorillaNavView,
+    HorillaTabView,
+)
+from recruitment.cbv.candidates import CandidateDetail
+from recruitment.methods import recruitment_manages
+from recruitment import models as recruitment_models
+from onboarding.templatetags.onboardingfilters import stage_manages
+from onboarding import models as onboarding_models, filters as onboarding_filters, forms
+from onboarding.cbv_decorators import all_manager_can_enter, stage_manager_can_enter
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(
+    all_manager_can_enter(perm="recruitment.view_recruitment"), name="dispatch"
+)
+class PipelineView(TemplateView):
+    """
+    PipelineView
+    """
+
+    template_name = "cbv/pipeline/onboarding/pipeline.html"
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(
+    all_manager_can_enter(perm="recruitment.view_recruitment"), name="dispatch"
+)
+class PipelineNav(HorillaNavView):
+    """
+    HorillaNavView
+    """
+
+    search_url = reverse_lazy("cbv-pipeline-tab-onboarding")
+    nav_title = _("Pipeline")
+    search_swap_target = "#pipelineContainer"
+    apply_first_filter = False
+    filter_body_template = "cbv/pipeline/onboarding/filters.html"
+    filter_instance = onboarding_filters.RecruitmentFilter
+    # filter_instance_context_name = "filter"
+    filter_form_context_name = "form"
+
+    def __init__(self, **kwargs) -> None:
+        super().__init__(**kwargs)
+        if self.request.user.has_perm("recruitment.add_recruitment"):
+            self.create_attrs = f"""
+                hx-get="{reverse_lazy('recruitment-create')}?closed=false"
+                hx-target="#genericModalBody"
+                data-target="#genericModal"
+                data-toggle="oh-modal-toggle"
+            """
+        else:
+            self.create_attrs = None
+
+    def get_context_data(self, **kwargs):
+        """
+        context data
+        """
+        context = super().get_context_data(**kwargs)
+        stage_filter_obj = onboarding_filters.OnboardingStageFilter()
+        candidate_filter_obj = onboarding_filters.OnboardingCandidateFilter()
+        context["stage_filter_obj"] = stage_filter_obj
+        context["candidate_filter_obj"] = candidate_filter_obj
+        return context
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(
+    all_manager_can_enter(perm="recruitment.view_recruitment"), name="dispatch"
+)
+class RecruitmentTabView(HorillaTabView):
+    """
+    RecruitmentTabView
+    """
+
+    def __init__(self, **kwargs):
+        super().__init__(**kwargs)
+        recruitments = onboarding_filters.RecruitmentFilter(self.request.GET).qs.filter(
+            is_active=True
+        )
+        self.tabs = []
+        for rec in recruitments:
+            tab = {}
+            tab["title"] = rec
+            tab["url"] = reverse(
+                "get-stages-onboarding", kwargs={"recruitment_id": rec.pk}
+            )
+            tab["badge_label"] = _("Stages")
+            tab["actions"] = []
+            if self.request.user.has_perm(
+                "onboarding.add_onboardingstage"
+            ) or recruitment_manages(self.request, rec):
+                tab["actions"].append(
+                    {
+                        "action": _("Add Stage"),
+                        "attrs": f"""
+                            data-toggle="oh-modal-toggle"
+                            data-target="#genericModal"
+                            hx-get="{reverse("stage-creation", kwargs={"obj_id": rec.pk})}"
+                            hx-target="#genericModalBody"
+                            style="cursor: pointer;"
+                        """,
+                    }
+                )
+                tab["actions"].append(
+                    {
+                        "action": _("Manage Stage Order"),
+                        "attrs": f"""
+                            data-toggle="oh-modal-toggle"
+                            data-target="#genericModal"
+                            hx-get="{reverse("onboarding-stage-sequence-update", kwargs={"pk": rec.pk})}"
+                            hx-target="#genericModalBody"
+                            style="cursor: pointer;"
+                        """,
+                    }
+                )
+            if self.request.user.has_perm("recruitment.change_recruitment"):
+                tab["actions"].append(
+                    {
+                        "action": _("Edit"),
+                        "attrs": f"""
+                                    data-toggle="oh-modal-toggle"
+                                    data-target="#genericModal"
+                                    hx-get="{reverse("recruitment-update-pipeline", kwargs={"pk": rec.pk})}"
+                                    hx-target="#genericModalBody"
+                                    style="cursor: pointer;"
+                                    onclick="
+                                    "
+                                    """,
+                    }
+                )
+            if self.request.user.has_perm("recruitment.delete_recruitment"):
+                tab["actions"].append(
+                    {
+                        "action": _("Delete"),
+                        "attrs": f"""
+                                        data-toggle="oh-modal-toggle"
+                                        data-target="#deleteConfirmation"
+                                        hx-get="{reverse('generic-delete')}?model=recruitment.Recruitment&pk={rec.pk}"
+                                        hx-target="#deleteConfirmationBody"
+                                        style="cursor: pointer;"
+                                        """,
+                    }
+                )
+            self.tabs.append(tab)
+
+
+def edit_stage_path(self):
+    """
+    Edit stage path
+    """
+    return reverse(
+        "stage-update", kwargs={"pk": self.pk, "obj_id": self.recruitment_id.pk}
+    )
+
+
+def generic_delete_path(self):
+    """
+    Generic delete
+    """
+    return f"{reverse('generic-delete')}?model=recruitment.Stage&pk={self.pk}"
+
+
+def bulk_send_mail_path(self):
+    """
+    bulk_send_mail
+    """
+    return f"{reverse_lazy('send-mail')}?onboarding_stage_id={self.pk}"
+
+
+def allocation_path(self):
+    """
+    allocate path
+    """
+    return f'{reverse("allocation-view",kwargs={"pk":self.candidate_id.pk})}?model=recruitment.models.Candidate'
+
+
+onboarding_models.CandidateStage.allocation_path = allocation_path
+
+onboarding_models.OnboardingStage.edit_stage_path = edit_stage_path
+onboarding_models.OnboardingStage.generic_delete_path = generic_delete_path
+onboarding_models.OnboardingStage.bulk_send_mail_path = bulk_send_mail_path
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(
+    all_manager_can_enter(perm="recruitment.view_recruitment"), name="dispatch"
+)
+class CandidatePipeline(Pipeline):
+    """
+    CandidatePipeline
+    """
+
+    model = onboarding_models.CandidateStage
+    filter_class = onboarding_filters.OnboardingCandidateFilter
+    grouper = "onboarding_stage_id"
+    selected_instances_key_name = "selectedCandidateRecords"
+    allowed_fields = [
+        {
+            "field": "onboarding_stage_id",
+            "model": onboarding_models.OnboardingStage,
+            "filter": onboarding_filters.OnboardingStageFilter,
+            "url": reverse_lazy("candidate-lists-cbv-onboarding"),
+            "parameters": [
+                "onboarding_stage_id={pk}",
+                "recruitment_id={recruitment_id__pk}",
+            ],
+            "actions": [
+                {
+                    "action": "Edit",
+                    "accessibility": "onboarding.cbv.accessibility.edit_stage_accessibility",
+                    "attrs": """
+                    hx-target="#genericModalBody" 
+                    hx-get="{edit_stage_path}" 
+                    data-toggle="oh-modal-toggle" 
+                    data-target="#genericModal" 
+                """,
+                },
+                {
+                    "action": "Bulk Mail",
+                    "attrs": """
+                    hx-target="#objectCreateModalTarget"
+                    hx-get="{bulk_send_mail_path}" 
+                    data-toggle="oh-modal-toggle" 
+                    data-target="#objectCreateModal"  
+                """,
+                },
+                {
+                    "action": "Delete",
+                    "accessibility": "onboarding.cbv.accessibility.delete_stage_accessibility",
+                    "attrs": """
+                    data-target="#deleteConfirmation"
+                    data-toggle="oh-modal-toggle"
+                    hx-get="{generic_delete_path}"
+                    hx-target="#deleteConfirmationBody"
+                """,
+                },
+            ],
+        },
+    ]
+
+    def get_queryset(self):
+        queryset = super().get_queryset()
+        self.queryset = queryset.order_by("sequence")
+        return self.queryset
+
+
+def stage_drop_down(self):
+    """
+    Stage drop down
+    """
+    request = getattr(_thread_locals, "request", None)
+    all_onboarding_stages = getattr(request, "all_rec_stages", {})
+    if all_onboarding_stages.get(self.onboarding_stage_id.recruitment_id.pk) is None:
+        stages = onboarding_models.OnboardingStage.objects.filter(
+            recruitment_id=self.onboarding_stage_id.recruitment_id
+        )
+        all_onboarding_stages[self.onboarding_stage_id.recruitment_id.pk] = stages
+        request.all_onboarding_stages = all_onboarding_stages
+    return render_template(
+        path="cbv/pipeline/onboarding/stage_drop_down.html",
+        context={
+            "instance": self,
+            "stages": request.all_onboarding_stages[
+                self.onboarding_stage_id.recruitment_id.pk
+            ],
+        },
+    )
+
+
+onboarding_models.CandidateStage.stage_drop_down = stage_drop_down
+
+
+def get_detail_url_pipeline(self):
+    """
+    Get detail url pipeline
+    """
+    return reverse("onboarding-cand-detail-view", kwargs={"pk": self.candidate_id.pk})
+
+
+onboarding_models.CandidateStage.get_detail_url_pipeline = get_detail_url_pipeline
+
+
+def task_fetch(self):
+    """
+    task fetch
+    """
+    return f"""
+    <div id="selectedInstanceIds" data-ids="[]"></div>
+    <div style="width:220% !important;" hx-get="{reverse('get-cand-task',kwargs={"pk":self.pk})}?field=stage_id" hx-trigger="load">
+    </div>
+"""
+
+
+recruitment_models.Candidate.task_fetch = task_fetch
+
+
+class CandidateOnboardingDetail(CandidateDetail):
+    """
+    Extended candidate detail view
+    """
+
+    body = [
+        ("Gender", "gender"),
+        ("Phone", "mobile"),
+        ("Stage", "stage_drop_down"),
+        ("Rating", "rating_bar"),
+        ("Recruitment", "recruitment_id"),
+        ("Job Position", "job_position_id"),
+        ("Tasks", "task_fetch", True),
+    ]
+
+    def __init__(self, **kwargs):
+        super().__init__(**kwargs)
+
+    def get(self, request, *args, **kwargs):
+        instance = self.get_object()
+        self.ordered_ids_key = f"ordered_ids_{self.model.__name__.lower()}{instance.onboarding_stage.onboarding_stage_id.pk}"
+        response = super().get(request, *args, **kwargs)
+        return response
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(
+    all_manager_can_enter(perm="recruitment.view_recruitment"), name="dispatch"
+)
+class CandidateList(HorillaListView):
+    """
+    CandidateList
+    """
+
+    model = onboarding_models.CandidateStage
+    filter_class = onboarding_filters.PipelineCandidateFilter
+    filter_selected = False
+    quick_export = False
+    next_prev = False
+    filter_keys_to_remove = ["onboarding_stage_id", "rec_id", "recruitment_id"]
+    custom_empty_template = "cbv/pipeline/empty.html"
+    header_attrs = {
+        "action": "style='width:313px;'",
+        "mobile": "style='width:100px;'",
+        "Stage": "style='width:100px;'",
+        "get_interview_count": "style='width:200px;'",
+    }
+    columns = [
+        ("Name", "candidate_id__candidate_name", "candidate_id__get_avatar"),
+        ("Email", "candidate_id__mail_indication"),
+        ("Contact", "candidate_id__mobile"),
+        ("Stage", "stage_drop_down"),
+        ("Rating", "candidate_id__rating_bar"),
+        ("Job Position", "candidate_id__job_position_id"),
+    ]
+
+    default_columns = [
+        ("Name", "candidate_id__candidate_name", "candidate_id__get_avatar"),
+        ("Email", "candidate_id__mail_indication"),
+        ("Stage", "stage_drop_down"),
+    ]
+
+    bulk_update_fields = [
+        "onboarding_stage_id",
+    ]
+
+    row_attrs = """
+                hx-get='{get_detail_url_pipeline}'
+                data-toggle="oh-modal-toggle"
+                data-target="#genericModal"
+                hx-target="#genericModalBody"
+                """
+
+    actions = [
+        {
+            "action": _("Allocations"),
+            "icon": "clipboard-outline",
+            "attrs": """
+                    class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100"
+                    hx-get = "{allocation_path}"
+                    data-toggle="oh-modal-toggle"
+                    data-target="#allocationModal"
+                    hx-target="#allocationModalBody"
+                """,
+        },
+        {
+            "action": _("Send Mail"),
+            "icon": "mail-open-outline",
+            "attrs": """
+                    class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100"
+                    hx-get = "{candidate_id__get_send_mail}"
+                    data-toggle="oh-modal-toggle"
+                    data-target="#objectDetailsModal"
+                    hx-target="#objectDetailsModalTarget"
+                """,
+        },
+        {
+            "action": _("View Note"),
+            "icon": "newspaper-outline",
+            "attrs": """
+                    class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100 oh-activity-sidebar__open"
+                    hx-get="{candidate_id__get_view_note_url}"
+                    data-target="#activitySidebar"
+                    hx-target="#activitySidebar"
+                    onclick="$('#activitySidebar').addClass('oh-activity-sidebar--show')"
+                """,
+        },
+        {
+            "action": _("Document Request"),
+            "icon": "document-attach-outline",
+            "attrs": """
+                     hx-get="{candidate_id__get_document_request}"
+                    data-target="#genericModal"
+                    hx-target="#genericModalBody"
+                    class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100"
+                    data-toggle="oh-modal-toggle"
+                """,
+        },
+    ]
+    records_count_in_tab = False
+
+    def get(self, request, *args, **kwargs):
+        self.selected_instances_key_id = (
+            f"selectedCandidateRecords{self.request.GET['onboarding_stage_id']}"
+        )
+        return super().get(request, *args, **kwargs)
+
+    def get_queryset(self, queryset=None, filtered=False, *args, **kwargs):
+        queryset = super().get_queryset(queryset, filtered, *args, **kwargs)
+        return queryset
+
+    def bulk_update_accessibility(self):
+        """
+        Check has perm to update candidate stage
+        """
+        if self.request.method == "GET":
+            return True
+        return (
+            self.request.user.has_perm("onboarding.change_candidatestage")
+            or self.request.user.has_perm("recruitment.change_recruitment")
+            or recruitment_manages(
+                self.request,
+                onboarding_models.Recruitment.objects.get(
+                    pk=self.request.GET["recruitment_id"]
+                ),
+            )
+            or stage_manages(
+                self.request.user,
+                onboarding_models.OnboardingStage.objects.get(
+                    pk=self.request.GET["onboarding_stage_id"]
+                ),
+            )
+        )
+
+    def get_bulk_form(self):
+        form = super().get_bulk_form()
+        recruitment_id = self.request.GET["recruitment_id"]
+        stage_id = self.request.GET["onboarding_stage_id"]
+        form.fields["onboarding_stage_id"].queryset = form.fields[
+            "onboarding_stage_id"
+        ].queryset.filter(recruitment_id=recruitment_id)
+        tasks = onboarding_models.OnboardingTask.objects.filter(stage_id__pk=stage_id)
+
+        for task in tasks:
+            form.fields[f"bulk_task_status_{task.pk}"] = forms.forms.ChoiceField(
+                choices=[
+                    ("", "----------"),
+                ]
+                + list(onboarding_models.CandidateTask.choice),
+                label=task.task_title,
+                required=False,
+                widget=forms.forms.Select(
+                    attrs={"class": "oh-select oh-select-2 w-100"}
+                ),
+            )
+        if not self.bulk_update_accessibility():
+            del form["onboarding_stage_id"]
+        return form
+
+    def handle_bulk_submission(self, request):
+        response = super().handle_bulk_submission(request)
+        mapped_data = {
+            int(re.search(r"bulk_task_status_(\d+)", key).group(1)): value
+            for key, value in request.POST.items()
+            if re.search(r"bulk_task_status_(\d+)", key)
+        }
+        instance_ids = request.POST.get("instance_ids", "[]")
+        instance_ids = eval_validate(instance_ids)
+        for pk, status in mapped_data.items():
+            onboarding_models.CandidateTask.objects.filter(
+                candidate_id__onboarding_stage__in=instance_ids, onboarding_task_id=pk
+            ).update(status=status)
+        return response
+
+    records_per_page = 10
+
+    def __init__(self, **kwargs):
+        super().__init__(**kwargs)
+        self.ordered_ids_key = f"ordered_ids_{recruitment_models.Candidate.__name__.lower()}{self.request.GET['onboarding_stage_id']}"
+        self.search_url = self.request.path
+
+        self.managing_onboarding_tasks = (
+            onboarding_models.OnboardingTask.objects.filter(
+                employee_id__employee_user_id=self.request.user
+            ).values_list("pk", flat=True)
+        )
+        self.request.managing_onboarding_tasks = self.managing_onboarding_tasks
+
+        self.managing_onboarding_stages = (
+            onboarding_models.OnboardingStage.objects.filter(
+                employee_id__employee_user_id=self.request.user
+            ).values_list("pk", flat=True)
+        )
+        self.request.managing_onboarding_stages = self.managing_onboarding_stages
+
+        self.managing_recruitments = recruitment_models.Recruitment.objects.filter(
+            recruitment_managers__employee_user_id=self.request.user
+        ).values_list("pk", flat=True)
+        self.request.managing_recruitments = self.managing_recruitments
+
+    def get_context_data(self, **kwargs):
+        stage_id = self.request.GET["onboarding_stage_id"]
+        tasks = onboarding_models.OnboardingTask.objects.filter(stage_id=stage_id)
+        context = super().get_context_data(**kwargs)
+        for task in tasks:
+            context["columns"].append(
+                (
+                    f"""
+                <div class="oh-hover-btn-container">
+                <button class="oh-hover-btn"
+                style="border: none !important;"
+                >
+                {task.task_title}
+                </button>
+                <div class="oh-hover-btn-drawer oh-hover-btn-table-drawer">
+                  <button
+                   hx-get="{reverse("task-update",kwargs={"pk":task.pk})}"
+                   hx-target="#genericModalBody"
+                   data-toggle="oh-modal-toggle" 
+                   data-target="#genericModal"
+                   class="oh-hover-btn__small"
+                   style="
+                   border:1px hsl(8,77%,56%) solid;
+                   "
+                   title="Edit"
+                   >
+                    <ion-icon name="create-outline"></ion-icon>
+                   </button>
+                  <a 
+                    hx-get="{reverse("generic-delete")}?model=onboarding.OnboardingTask&pk={task.id}" 
+                    hx-target="#deleteConfirmationBody"
+                    data-target="#deleteConfirmation"
+                    data-toggle="oh-modal-toggle"
+                    class="oh-hover-btn__small"
+                    style="
+                    border:1px hsl(8,77%,56%) solid;
+                    "
+                    title="Delete"
+
+                  >
+                  <ion-icon name="trash-outline"></ion-icon>
+                  </a>
+                </div>
+              </div>
+            """,
+                    f"get_{task.pk}_task",
+                )
+            )
+        context["columns"].append(
+            (
+                f"""
+            <button 
+                class="oh-checkpoint-badge text-success" 
+                data-toggle="oh-modal-toggle" 
+                data-target="#genericModal"
+                hx-get="{reverse('task-creation',kwargs={'obj_id':stage_id})}"
+                hx-target="#genericModalBody"
+                >
+                + Task
+            </button>
+            """,
+                "",
+            )
+        )
+        self.request.session[self.ordered_ids_key] = list(
+            self.queryset.values_list("candidate_id__pk", flat=True)
+        )
+        return context
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(
+    stage_manager_can_enter(perm="recruitment.view_recruitment"), name="dispatch"
+)
+class ChangeStage(HorillaFormView):
+    """
+    Change Candidate stage
+    """
+
+    model = onboarding_models.CandidateStage
+    form_class = forms.StageChangeForm
+
+    def form_valid(self, form):
+        if form.is_valid():
+            messages.success(self.request, _("Stage Updated"))
+            form.save()
+            return self.HttpResponse()
+        messages.info(self.request, _("Stage not updated"))
+
+        return self.HttpResponse()
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(
+    all_manager_can_enter(perm="recruitment.view_recruitment"), name="dispatch"
+)
+class AssignTask(View):
+    """
+    AssignTask
+    """
+
+    def get(self, *args, **kwargs):
+        """
+        get
+        """
+        task = onboarding_models.OnboardingTask.objects.get(pk=kwargs["task_id"])
+        candidate = onboarding_models.CandidateStage.objects.get(
+            candidate_id__id=kwargs["cand_id"]
+        )
+        task.candidates.add(candidate.candidate_id)
+        candidate_task = onboarding_models.CandidateTask()
+        candidate_task.candidate_id = candidate.candidate_id
+        candidate_task.stage_id = candidate.onboarding_stage_id
+        candidate_task.onboarding_task_id = task
+        candidate_task.save()
+        messages.success(self.request, "Task Allocated")
+
+        return HttpResponse(
+            f"""
+            <div id="taskHidden{candidate_task.pk}"></div>
+            <script>$('#taskHidden{candidate_task.pk}').closest('.hlv-container').find(".reload-record").click();</script>
+            <script>$('#reloadMessagesButton').click();</script>
+            """
+        )
+
+    def post(self, *args, **kwargs):
+        """
+        post
+        """
+        candidate = onboarding_models.CandidateStage.objects.get(
+            candidate_id__id=kwargs["cand_id"]
+        )
+        candidate_task = onboarding_models.CandidateTask.objects.get(
+            pk=kwargs["cand_task_id"]
+        )
+        status = self.request.POST["status"]
+        candidate_task.status = status
+        candidate_task.save()
+
+        messages.success(self.request, "Status updated")
+
+        return HttpResponse(
+            f"""
+            <div id="taskHidden{candidate_task.pk}"></div>
+            <script>$('#taskHidden{candidate_task.pk}').closest('.hlv-container').find(".reload-record").click();</script>
+            <script>$('#reloadMessagesButton').click();</script>
+            """
+        )
diff --git a/onboarding/cbv_decorators.py b/onboarding/cbv_decorators.py
new file mode 100644
index 000000000..3adb5bc5d
--- /dev/null
+++ b/onboarding/cbv_decorators.py
@@ -0,0 +1,93 @@
+from django.http import HttpResponse
+from django.shortcuts import render
+from employee.models import Employee
+from horilla_views.cbv_methods import decorator_with_arguments
+from horilla.horilla_middlewares import _thread_locals
+from onboarding.models import OnboardingStage, OnboardingTask
+from recruitment.models import Recruitment
+from django.contrib import messages
+
+
+@decorator_with_arguments
+def recruitment_manager_can_enter(function, perm):
+    """
+    This method is used to check permission of employee for enter to the function
+    """
+
+    def _function(self, *args, **kwargs):
+        request = getattr(_thread_locals, "request")
+        if not getattr(self, "request", None):
+            self.request = request
+        user = request.user
+        employee = Employee.objects.filter(employee_user_id=user).first()
+        is_manager = Recruitment.objects.filter(recruitment_managers=employee).exists()
+        if user.has_perm(perm) or is_manager:
+            return function(self, *args, **kwargs)
+        messages.info(request, "You dont have permission.")
+        previous_url = request.META.get("HTTP_REFERER", "/")
+        script = f'<script>window.location.href = "{previous_url}"</script>'
+        key = "HTTP_HX_REQUEST"
+        if key in request.META.keys():
+            return render(request, "decorator_404.html")
+        return HttpResponse(script)
+
+    return _function
+
+
+@decorator_with_arguments
+def stage_manager_can_enter(function, perm):
+    """
+    This method is used to check permission of employee for enter to the function
+    """
+
+    def _function(self, *args, **kwargs):
+        request = getattr(_thread_locals, "request")
+        if not getattr(self, "request", None):
+            self.request = request
+        user = request.user
+        employee = Employee.objects.filter(employee_user_id=user).first()
+        is_manager = (
+            OnboardingStage.objects.filter(employee_id=employee)
+            or Recruitment.objects.filter(recruitment_managers=employee).exists()
+        )
+        if user.has_perm(perm) or is_manager:
+            return function(self, *args, **kwargs)
+        messages.info(request, "You dont have permission.")
+        previous_url = request.META.get("HTTP_REFERER", "/")
+        script = f'<script>window.location.href = "{previous_url}"</script>'
+        key = "HTTP_HX_REQUEST"
+        if key in request.META.keys():
+            return render(request, "decorator_404.html")
+        return HttpResponse(script)
+
+    return _function
+
+
+@decorator_with_arguments
+def all_manager_can_enter(function, perm):
+    """
+    This method is used to check permission of employee for enter to the function
+    """
+
+    def _function(self, *args, **kwargs):
+        request = getattr(_thread_locals, "request")
+        if not getattr(self, "request", None):
+            self.request = request
+        user = request.user
+        employee = Employee.objects.filter(employee_user_id=user).first()
+        is_manager = (
+            OnboardingTask.objects.filter(employee_id=employee).exists()
+            or OnboardingStage.objects.filter(employee_id=employee)
+            or Recruitment.objects.filter(recruitment_managers=employee).exists()
+        )
+        if user.has_perm(perm) or is_manager:
+            return function(self, *args, **kwargs)
+        messages.info(request, "You dont have permission.")
+        previous_url = request.META.get("HTTP_REFERER", "/")
+        script = f'<script>window.location.href = "{previous_url}"</script>'
+        key = "HTTP_HX_REQUEST"
+        if key in request.META.keys():
+            return render(request, "decorator_404.html")
+        return HttpResponse(script)
+
+    return _function
diff --git a/onboarding/filters.py b/onboarding/filters.py
index db0e1df0b..39daa2f73 100644
--- a/onboarding/filters.py
+++ b/onboarding/filters.py
@@ -3,14 +3,180 @@ filters.py
 Used to register filter for onboarding models
 """
 
+import django_filters
 from django import forms
 from django_filters import filters
 
 from base.filters import FilterSet
 from base.models import Company
 from employee.models import Employee
-from onboarding.models import CandidateStage, OnboardingStage
-from recruitment.models import Candidate
+from horilla.filters import HorillaFilterSet
+from onboarding.models import (
+    CandidateStage,
+    CandidateTask,
+    OnboardingStage,
+    OnboardingTask,
+)
+from recruitment.filters import RecruitmentFilter as rec_filter
+from recruitment.models import Candidate, Recruitment
+
+
+class CandidateTaskFilter(HorillaFilterSet):
+    """
+    Task filter class
+    """
+
+    class Meta:
+        """
+        Meta
+        """
+
+        model = CandidateTask
+        fields = "__all__"
+
+
+class RecruitmentFilter(rec_filter):
+    """
+    RecruitmentFilter
+    """
+
+    search = django_filters.CharFilter(method="filter_by_name")
+
+    class Meta:
+        """
+        Meta
+        """
+
+        model = Recruitment
+        fields = "__all__"
+
+    def filter_by_name(self, queryset, _, value):
+        """
+        Filter queryset by first name or last name.
+        """
+        # Split the search value into first name and last name
+        parts = value.split()
+        first_name = parts[0]
+        last_name = " ".join(parts[1:]) if len(parts) > 1 else ""
+
+        job_queryset = (
+            queryset.filter(open_positions__job_position__icontains=value)
+            | queryset.filter(title__icontains=value)
+            | queryset.filter(onboarding_stage__stage_title__icontains=value)
+            | queryset.filter(
+                onboarding_stage__candidate__candidate_id__name__icontains=value
+            )
+        )
+        if first_name and last_name:
+            queryset = queryset.filter(
+                recruitment_managers__employee_first_name__icontains=first_name,
+                recruitment_managers__employee_last_name__icontains=last_name,
+            )
+        elif first_name:
+            queryset = queryset.filter(
+                recruitment_managers__employee_first_name__icontains=first_name
+            )
+        elif last_name:
+            queryset = queryset.filter(
+                recruitment_managers__employee_last_name__icontains=last_name
+            )
+
+        queryset = queryset | job_queryset
+        return queryset.distinct()
+
+
+class PipelineCandidateFilter(FilterSet):
+    """
+    FilterSet class for Candidate model
+    """
+
+    search = django_filters.CharFilter(method="search_by_name", lookup_expr="icontains")
+    tasks = filters.ModelMultipleChoiceFilter(
+        field_name="candidate_id__candidate_task__onboarding_task_id",
+        queryset=OnboardingTask.objects.all(),
+    )
+    task_status = filters.ChoiceFilter(
+        field_name="candidate_id__candidate_task__onboarding_task_id__status",
+        choices=CandidateTask.choice,
+    )
+    candidate = django_filters.ModelMultipleChoiceFilter(
+        queryset=Candidate.objects.all(),
+        field_name="name",
+    )
+
+    start_date = django_filters.DateFilter(
+        field_name="candidate_id__recruitment_id__start_date",
+        widget=forms.DateInput(attrs={"type": "date"}),
+    )
+    end_date = django_filters.DateFilter(
+        field_name="candidate_id__recruitment_id__end_date",
+        widget=forms.DateInput(attrs={"type": "date"}),
+    )
+    scheduled_from = django_filters.DateFilter(
+        field_name="candidate_id__candidate_interview__interview_date",
+        lookup_expr="gte",
+        widget=forms.DateInput(attrs={"type": "date"}),
+    )
+    probation_end = django_filters.DateFilter(
+        field_name="candidate_id__probation_end",
+        widget=forms.DateInput(attrs={"type": "date"}),
+    )
+    probation_end_till = django_filters.DateFilter(
+        field_name="candidate_id__probation_end",
+        lookup_expr="lte",
+        widget=forms.DateInput(attrs={"type": "date"}),
+    )
+    probation_end_from = django_filters.DateFilter(
+        field_name="candidate_id__probation_end",
+        lookup_expr="gte",
+        widget=forms.DateInput(attrs={"type": "date"}),
+    )
+    schedule_date = django_filters.DateFilter(
+        field_name="candidate_id__schedule_date",
+        widget=forms.DateInput(attrs={"type": "date"}),
+    )
+    interview_date = django_filters.DateFilter(
+        field_name="candidate_id__candidate_interview__interview_date",
+        widget=forms.DateInput(attrs={"type": "date"}),
+    )
+    scheduled_till = django_filters.DateFilter(
+        field_name="candidate_id__candidate_interview__interview_date",
+        lookup_expr="lte",
+        widget=forms.DateInput(attrs={"type": "date"}),
+    )
+    recruitment = django_filters.CharFilter(
+        field_name="candidate_id__recruitment_id__title", lookup_expr="icontains"
+    )
+
+    portal_sent = django_filters.BooleanFilter(
+        field_name="onboarding_portal",
+        method="filter_mail_sent",
+        widget=django_filters.widgets.BooleanWidget(),
+    )
+    joining_set = django_filters.BooleanFilter(
+        field_name="joining_date",
+        method="filter_joining_set",
+        widget=django_filters.widgets.BooleanWidget(),
+    )
+
+    class Meta:
+        """
+        Meta class to add some additional options
+        """
+
+        model = CandidateStage
+        fields = "__all__"
+
+    def search_by_name(self, queryset, _, value):
+        """
+        Search by name
+        """
+        queryset = (
+            queryset.filter(candidate_id__name__icontains=value)
+            | queryset.filter(onboarding_stage_id__stage_title__icontains=value)
+            | queryset.filter(candidate_id__recruitment_id__title__icontains=value)
+        )
+        return queryset.distinct()
 
 
 class CandidateFilter(FilterSet):
@@ -29,7 +195,7 @@ class CandidateFilter(FilterSet):
         fields = {}
 
 
-class OnboardingStageFilter(FilterSet):
+class OnboardingStageFilter(HorillaFilterSet):
     """
     OnboardingStageFilter
     """
@@ -37,6 +203,9 @@ class OnboardingStageFilter(FilterSet):
     search_onboarding = filters.CharFilter(
         field_name="stage_title", method="pipeline_search"
     )
+    search = filters.CharFilter(
+        method="search_method",
+    )
 
     employee_id = filters.ModelChoiceFilter(
         queryset=Employee.objects.all(), label="Stage Manager"
@@ -66,7 +235,50 @@ class OnboardingStageFilter(FilterSet):
 
     class Meta:
         model = OnboardingStage
-        fields = "__all__"
+        fields = [
+            "recruitment_id",
+            "stage_title",
+            "employee_id",
+            "sequence",
+            "is_final_stage",
+        ]
+
+    def __init__(self, *args, **kwargs):
+        super().__init__(*args, **kwargs)
+        self.form.fields["employee_id"].widget.attrs.update({"style": "width:100%;"})
+
+    def search_method(self, queryset, _, value):
+        """
+        Search by name
+        """
+        parts = value.split()
+        first_name = parts[0]
+        last_name = " ".join(parts[1:]) if len(parts) > 1 else ""
+        recruitment_query = (
+            queryset.filter(recruitment_id__title__icontains=value)
+            | queryset.filter(candidate__candidate_id__name__icontains=value)
+            | queryset.filter(
+                recruitment_id__onboarding_stage__candidate__candidate_id__name__icontains=value
+            )
+        )
+        # Filter the queryset by first name and last name
+        stage_queryset = queryset.filter(stage_title__icontains=value)
+        if first_name and last_name:
+            queryset = queryset.filter(
+                employee_id__employee_first_name__icontains=first_name,
+                employee_id__employee_last_name__icontains=last_name,
+            )
+        elif first_name:
+            queryset = queryset.filter(
+                employee_id__employee_first_name__icontains=first_name
+            )
+        elif last_name:
+            queryset = queryset.filter(
+                employee_id__employee_last_name__icontains=last_name
+            )
+
+        queryset = queryset | stage_queryset | recruitment_query
+        return queryset.distinct()
 
     def pipeline_search(self, queryset, _, value):
         """
@@ -86,7 +298,32 @@ class OnboardingCandidateFilter(FilterSet):
     search_onboarding = filters.CharFilter(
         field_name="candidate_id__name", lookup_expr="icontains"
     )
+    stage_id = filters.CharFilter(field_name="onboarding_stage_id")
+    country = filters.CharFilter(field_name="candidate_id___country")
+    state = filters.CharFilter(field_name="candidate_id___state")
+    tasks = filters.ModelMultipleChoiceFilter(
+        field_name="candidate_id__candidate_task__onboarding_task_id",
+        queryset=OnboardingTask.objects.all(),
+    )
 
     class Meta:
         model = CandidateStage
         fields = "__all__"
+
+    def __init__(self, data=None, queryset=None, *, request=None, prefix=None):
+        super().__init__(data, queryset, request=request, prefix=prefix)
+        self.form.fields["tasks"].widget.attrs.update({"style": "width:100%;"})
+
+
+class OnboardingTaskFilter(FilterSet):
+    """
+    Onboarding task filter
+    """
+
+    search_onboarding = filters.CharFilter(
+        field_name="task_title", lookup_expr="icontains"
+    )
+
+    class Meta:
+        model = OnboardingTask
+        fields = "__all__"
diff --git a/onboarding/forms.py b/onboarding/forms.py
index 94fb767f4..4b7ce8fec 100644
--- a/onboarding/forms.py
+++ b/onboarding/forms.py
@@ -38,7 +38,12 @@ from employee.filters import EmployeeFilter
 from employee.models import Employee, EmployeeBankDetails
 from horilla_widgets.widgets.horilla_multi_select_field import HorillaMultiSelectField
 from horilla_widgets.widgets.select_widgets import HorillaMultiSelectWidget
-from onboarding.models import CandidateTask, OnboardingStage, OnboardingTask
+from onboarding.models import (
+    CandidateStage,
+    CandidateTask,
+    OnboardingStage,
+    OnboardingTask,
+)
 from recruitment.models import Candidate
 
 
@@ -203,13 +208,6 @@ class OnboardingViewTaskForm(ModelForm):
             label=_("Task Managers"),
         )
         reload_queryset(self.fields)
-        stage = self.initial.get("stage_id")
-        if stage:
-            # Adjust the queryset based on the 'stage'
-            candidate_ids = stage.candidate.all().values_list("candidate_id", flat=True)
-            cand_queryset = Candidate.objects.filter(id__in=candidate_ids)
-            self.fields["candidates"].queryset = cand_queryset
-            self.fields["candidates"].initial = cand_queryset
 
 
 class OnboardingTaskForm(ModelForm):
@@ -224,7 +222,7 @@ class OnboardingTaskForm(ModelForm):
 
         model = OnboardingTask
         fields = "__all__"
-        exclude = ["stage_id", "is_active"]
+        exclude = ["is_active"]
         widgets = {
             "candidates": forms.SelectMultiple(
                 attrs={"class": "oh-select oh-select-2 w-100 select2-hidden-accessible"}
@@ -276,7 +274,11 @@ class OnboardingViewStageForm(ModelForm):
         """
 
         model = OnboardingStage
-        fields = ["stage_title", "employee_id", "is_final_stage"]
+        fields = ["stage_title", "employee_id", "is_final_stage", "recruitment_id"]
+        labels = {
+            "stage_title": _("Stage Title"),
+            "is_final_stage": _("Is Final Stage"),
+        }
 
     def __init__(self, *args, **kwargs):
         """
@@ -402,3 +404,19 @@ class BankDetailsCreationForm(ModelForm):
         model = EmployeeBankDetails
         fields = "__all__"
         exclude = ["employee_id", "additional_info", "is_active"]
+
+
+class StageChangeForm(forms.ModelForm):
+    """
+    StageChangeForm
+    """
+
+    class Meta:
+        """
+        Meta class for additional options
+        """
+
+        model = CandidateStage
+        fields = [
+            "onboarding_stage_id",
+        ]
diff --git a/onboarding/models.py b/onboarding/models.py
index 6a715f7d8..0d94bbe42 100644
--- a/onboarding/models.py
+++ b/onboarding/models.py
@@ -5,17 +5,21 @@ This module is used to register models for onboarding app
 
 """
 
+from ast import literal_eval
 from datetime import datetime
+from urllib.parse import urlencode
 
 from django.db import models
 from django.db.models.signals import post_save
 from django.dispatch import receiver
+from django.urls import reverse
 from django.utils.translation import gettext_lazy as _
 
 from base.horilla_company_manager import HorillaCompanyManager
 from employee.models import Employee
 from horilla.models import HorillaModel
 from horilla_audit.models import HorillaAuditInfo, HorillaAuditLog
+from horilla_views.cbv_methods import render_template
 from recruitment.models import Candidate, Recruitment
 
 
@@ -91,6 +95,16 @@ class OnboardingTask(HorillaModel):
 
     objects = HorillaCompanyManager("stage_id__recruitment_id__company_id")
 
+    def get_detail_url(self):
+        """
+        To get edit url
+        """
+        query_params = {
+            "task_id": self.pk,
+        }
+        url = reverse("candidate-tasks-status")
+        return f"{url}?{urlencode(query_params)}"
+
     def __str__(self):
         return f"{self.task_title}"
 
@@ -112,7 +126,10 @@ class CandidateStage(HorillaModel):
         Candidate, on_delete=models.PROTECT, related_name="onboarding_stage"
     )
     onboarding_stage_id = models.ForeignKey(
-        OnboardingStage, on_delete=models.PROTECT, related_name="candidate"
+        OnboardingStage,
+        on_delete=models.PROTECT,
+        related_name="candidate",
+        verbose_name=_("Stage"),
     )
     onboarding_end_date = models.DateField(blank=True, null=True)
     sequence = models.IntegerField(null=True, default=0)
@@ -134,6 +151,23 @@ class CandidateStage(HorillaModel):
         completed_tasks = cans_tasks.filter(status="done")
         return f"{completed_tasks.count()}/{cans_tasks.count()}"
 
+    def __getattribute__(self, name):
+        if name.startswith("get_") and name.endswith("_task"):
+            task_id = literal_eval(name[4:-5])
+            task = CandidateTask.objects.filter(
+                onboarding_task_id__id=task_id,
+                candidate_id=self.candidate_id,
+                stage_id=self.onboarding_stage_id,
+            ).first()
+
+            return render_template(
+                "cbv/pipeline/onboarding/tasks.html",
+                {"instance": self, "task": task, "task_id": task_id},
+            )
+        value = super().__getattribute__(name)
+
+        return value
+
     class Meta:
         """
         Meta class for additional options
@@ -180,6 +214,16 @@ class CandidateTask(HorillaModel):
     def __str__(self):
         return f"{self.candidate_id}|{self.onboarding_task_id}"
 
+    def status_col(self):
+        """
+        This method for get custom column for status.
+        """
+
+        return render_template(
+            path="cbv/dashboard/status.html",
+            context={"instance": self},
+        )
+
     class Meta:
         """
         Meta class to add some additional options
diff --git a/onboarding/sidebar.py b/onboarding/sidebar.py
index 0389ef398..c4dbd3dc5 100644
--- a/onboarding/sidebar.py
+++ b/onboarding/sidebar.py
@@ -16,7 +16,7 @@ IMG_SRC = "images/ui/rocket.svg"
 SUBMENUS = [
     {
         "menu": "Onboarding view",
-        "redirect": reverse("onboarding-view") + "?closed=false",
+        "redirect": reverse("cbv-pipeline-onboarding") + "?closed=false",
         "accessibility": "onboarding.sidebar.onboarding_view_accessibility",
     },
     {
diff --git a/onboarding/templates/cbv/dashboard/my_onboarding_task.html b/onboarding/templates/cbv/dashboard/my_onboarding_task.html
new file mode 100644
index 000000000..1c9b9e261
--- /dev/null
+++ b/onboarding/templates/cbv/dashboard/my_onboarding_task.html
@@ -0,0 +1,6 @@
+<div id="listContainer">
+    <div class="oh-main__titlebar oh-main__titlebar--left">
+        <span class="oh-main__titlebar-title fw-bold mb-0 text-dark">{{ candidate_tasks.first.onboarding_task_id.task_title }}</span>
+      </div>
+    {% include "generic/horilla_list.html" %}
+</div>
\ No newline at end of file
diff --git a/onboarding/templates/cbv/dashboard/status.html b/onboarding/templates/cbv/dashboard/status.html
new file mode 100644
index 000000000..aed5608c1
--- /dev/null
+++ b/onboarding/templates/cbv/dashboard/status.html
@@ -0,0 +1,42 @@
+{% load i18n %}
+<span class="oh-recuritment_tag  {% if instance.status == 'done' %} done-task {% elif instance.status == 'scheduled' %} scheduled-task{% elif instance.status == 'ongoing' %} ongoing-task{% elif instance.status == 'stuck' %} dd stuck-task {% elif instance.status == 'todo' %} todo-task{% endif %}">
+    <select  onchange="
+    if ($(this).val() == 'done') {
+        $(this).parent().addClass('done-task')
+    }else{
+        $(this).parent().removeClass('done-task')
+    }
+    if ($(this).val() == 'scheduled') {
+        $(this).parent().addClass('scheduled-task')
+    }else{
+        $(this).parent().removeClass('scheduled-task')
+    }
+    if ($(this).val() == 'ongoing') {
+        $(this).parent().addClass('ongoing-task')
+    }else{
+        $(this).parent().removeClass('ongoing-task')
+    }
+    if ($(this).val() == 'stuck') {
+        $(this).parent().addClass('stuck-task')
+    }else{
+        $(this).parent().removeClass('stuck-task')
+    }
+    if ($(this).val() == 'todo') {
+        $(this).parent().addClass('todo-task')
+    }else{
+        $(this).parent().removeClass('todo-task')
+    }
+    " hx-get="{% url 'change-task-status' %}?task_id={{instance.id}}" hx-swap="afterend"
+    name="status"
+    class=""
+    style="width: 150px;"
+    id="task_status{{instance.id}}">
+        {% for status in instance.choice %}
+        <option value="{{status.0}}"
+        {% if status.0 == instance.status %}
+        selected
+        {% endif %}
+        >{{status.1}}</option>
+        {% endfor %}
+    </select>
+  </span>
\ No newline at end of file
diff --git a/onboarding/templates/cbv/onboarding_candidates/actions.html b/onboarding/templates/cbv/onboarding_candidates/actions.html
new file mode 100644
index 000000000..51284738a
--- /dev/null
+++ b/onboarding/templates/cbv/onboarding_candidates/actions.html
@@ -0,0 +1,73 @@
+{% load i18n %}
+<div onclick="event.stopPropagation();" class="oh-btn-group">
+    <a class="oh-btn oh-btn--light-bkg w-100" title="{% trans 'Edit' %}"
+      href="{% url 'rec-candidate-update' instance.id %}?onboarding=True"><ion-icon
+        name="create-outline"></ion-icon></a>
+    {% if perms.recruitment.change_candidate %}
+    <button type="button" hx-get="{% url 'send-mail' instance.id %}" title="{% trans "Send Mail" %}" hx-target="#objectDetailsModalTarget" hx-swap="innerHTML" class="oh-btn oh-btn--light w-100" data-toggle="oh-modal-toggle" data-target="#objectDetailsModal" >
+      <ion-icon name="mail-open-outline" role="img" class="md hydrated" aria-label="mail open outline"></ion-icon>
+    </button>
+    {% endif %}
+    {% if perms.recruitment.change_candidate %}
+    <button {% if instance.is_offer_rejected %} style="background: #ff4500a3;
+    color: white;" {% endif %} type="button" hx-get="{% url 'add-to-rejected-candidates' %}?candidate_id={{instance.id}}" {% if instance.is_offer_rejected %} title="{% trans "Added In Rejected Candidates" %}" {% else %} title="{% trans "Add To Rejected Candidates" %}" {% endif %} hx-target="#genericModalBody" hx-swap="innerHTML" class="oh-btn oh-btn--light w-100" data-toggle="oh-modal-toggle" data-target="#genericModal" >
+      <ion-icon name="thumbs-down-outline"></ion-icon></button>
+    {% endif %}
+    {% if not instance.onboarding_stage %}
+    <form hx-post="{% url 'email-send' %}?&no_portal=True" hx-target="#reloadMessages">
+    <a class="oh-btn oh-btn--light-bkg w-100" 
+      onclick="
+      event.preventDefault()
+      Swal.fire({
+          title: 'Are you sure?',
+          text: '{% trans "Do you want to add this candidate to onboarding stage?" %}',
+          icon: 'question',
+          showCancelButton: true,
+          confirmButtonText: '{% trans "Yes" %}',
+          cancelButtonText: '{% trans "Cancel" %}'
+      }).then((result) => {
+          if (result.isConfirmed) {
+              this.nextElementSibling.nextElementSibling.click();
+          }
+      })"
+    {% comment %} style="background-color: yellowgreen;color: white;" {% endcomment %}
+      title="{% trans 'Start Onboarding' %}" 
+      >
+      <ion-icon name="add-outline"></ion-icon>
+    </a>
+    <input type="text" hidden name="ids" value="{{instance.pk}}">
+    <input type="submit" hidden>
+    </form>
+    {% else %}
+    <a class="oh-btn w-100" 
+      disabled
+      onclick="
+      event.preventDefault();
+      Swal.fire({
+          icon: 'warning',
+          title: '{% trans "Already Added!" %}',
+          text: '{% trans "Candidate already added to onboarding" %}.',
+          confirmButtonText: 'OK'
+      });
+      "
+      style="background-color: #1dbfca;color: white;"
+      title="{% trans 'Added to Onobarding' %}" 
+      >
+      <ion-icon name="add-outline"></ion-icon>
+      </a>
+    {% endif %}
+    {% if instance.onboarding_portal %}
+    <a href="#" class="oh-btn w-100" style="background-color: yellowgreen;color: white;"
+      title="{% trans 'Send Portal / Start Onboarding' %}" onclick="$('select[name=ids]').val('{{instance.id}}');"
+      data-target="#addAttachments" data-toggle="oh-modal-toggle"
+      href="{% url 'email-send' %}?ids={{instance.id}}"><ion-icon name="link-outline"></ion-icon></a>
+    {% else %}
+    <a href="#" class="oh-btn oh-btn--light-bkg w-100" title="{% trans 'Send Portal  / Start onboarding' %}"
+      onclick="$('select[name=ids]').val('{{instance.id}}');" data-target="#addAttachments"
+      data-toggle="oh-modal-toggle" href="{% url 'email-send' %}?ids={{instance.id}}"><ion-icon
+        name="link-outline"></ion-icon></a>
+    {% endif %}
+    <a class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100" onclick="return confirm('{% trans "Do you want to delete this record" %}?')"  id="delete-link"
+      href="{% url 'candidate-delete' instance.id %}" title="{% trans 'Delete' %}"><ion-icon
+        name="trash-outline"></ion-icon></a>
+  </div>
\ No newline at end of file
diff --git a/onboarding/templates/cbv/onboarding_candidates/cand_email.html b/onboarding/templates/cbv/onboarding_candidates/cand_email.html
new file mode 100644
index 000000000..83e32d7d0
--- /dev/null
+++ b/onboarding/templates/cbv/onboarding_candidates/cand_email.html
@@ -0,0 +1,7 @@
+
+<a  style="color: inherit; text-decoration: none">
+    {{instance.email|truncatechars:10}}
+    {% if instance.get_last_sent_mail %}
+      <span title="{{instance.get_last_sent_mail.subject}} | {{instance.get_last_sent_mail.get_status_display}}" class="oh-dot oh-dot--small me-1" style="background-color:{% if instance.get_last_sent_mail.status == "sent" %}yellowgreen{% else %}red{% endif %}"></span>
+    {% endif %}
+  </a>
\ No newline at end of file
diff --git a/onboarding/templates/cbv/onboarding_candidates/date_of_joining.html b/onboarding/templates/cbv/onboarding_candidates/date_of_joining.html
new file mode 100644
index 000000000..9ef03fecb
--- /dev/null
+++ b/onboarding/templates/cbv/onboarding_candidates/date_of_joining.html
@@ -0,0 +1,6 @@
+
+<a onclick="event.stopPropagation();"style="color: inherit; text-decoration: none" >
+    <input type="date" class="oh-input joining-date" style="width: 150px;" value={{instance.joining_date|date:"Y-m-d"}}
+      name="joining_date" data-candidate-id="{{instance.id}}" onchange="dateJoining($(this))">
+  </a>
+
diff --git a/onboarding/templates/cbv/onboarding_candidates/filter.html b/onboarding/templates/cbv/onboarding_candidates/filter.html
new file mode 100644
index 000000000..22fed4765
--- /dev/null
+++ b/onboarding/templates/cbv/onboarding_candidates/filter.html
@@ -0,0 +1,70 @@
+{% load i18n %}
+<div class="oh-dropdown__filter-body">
+    <div class="oh-accordion">
+      <div class="oh-accordion-header">{% trans "Candidate Filter" %}</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" %}</label>
+              {{form.recruitment_id}}
+            </div>
+          </div>
+          <div class="col-sm-12 col-md-12 col-lg-6">
+            <div class="oh-input-group">
+              <label class="oh-label">{% trans "Job Position" %}</label>
+              {{form.job_position_id}}
+            </div>
+          </div>
+          <div class="col-sm-12 col-md-12 col-lg-6">
+            <div class="oh-input-group">
+              <label class="oh-label">{% trans "Joining From" %}</label>
+              {{form.scheduled_from}}
+            </div>
+          </div>
+          <div class="col-sm-12 col-md-12 col-lg-6">
+            <div class="oh-input-group">
+              <label class="oh-label">{% trans "Joining Till" %}</label>
+              {{form.scheduled_till}}
+            </div>
+          </div>
+          <div class="col-sm-12 col-md-12 col-lg-6">
+            <div class="oh-input-group">
+              <label class="oh-label">{% trans "Probation From" %}</label>
+              {{form.probation_end_from}}
+            </div>
+          </div>
+          <div class="col-sm-12 col-md-12 col-lg-6">
+            <div class="oh-input-group">
+              <label class="oh-label">{% trans "Probation Till" %}</label>
+              {{form.probation_end_till}}
+            </div>
+          </div>
+          <div class="col-sm-12 col-md-12 col-lg-6">
+            <div class="oh-input-group">
+              <label class="oh-label">{% trans "Portal Sent" %}</label>
+              {{form.portal_sent}}
+            </div>
+          </div>
+          <div class="col-sm-12 col-md-12 col-lg-6">
+            <div class="oh-input-group">
+              <label class="oh-label">{% trans "Joining Set" %}</label>
+              {{form.joining_set}}
+            </div>
+          </div>
+          <div class="col-sm-12 col-md-12 col-lg-6 mb-2">
+            <div class="oh-input-group">
+              <label class="oh-label">{% trans "Reject Reason" %}</label>
+              {{form.rejected_candidate__reject_reason_id}}
+            </div>
+          </div>
+          <div class="col-sm-12 col-md-12 col-lg-6 mb-2">
+            <div class="oh-input-group">
+              <label class="oh-label">{% trans "Offer Status" %}</label>
+              {{form.offer_letter_status}}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
\ No newline at end of file
diff --git a/onboarding/templates/cbv/onboarding_candidates/offer_letter.html b/onboarding/templates/cbv/onboarding_candidates/offer_letter.html
new file mode 100644
index 000000000..90a101ad2
--- /dev/null
+++ b/onboarding/templates/cbv/onboarding_candidates/offer_letter.html
@@ -0,0 +1,7 @@
+<a onclick="event.stopPropagation();" style="color: inherit; text-decoration: none" onload="event.stopPropagation()">
+    <select onchange="offerLetter('{% url 'update-offer-letter-status' %}?candidate_id={{ instance.id }}&status=' + this.value);" name="status" id="id_offeletter_status_{{candidate.id}}" class="w-100" style="height: 40px;border:solid 1px rgba(128, 128, 128, 0.32);">
+        {% for status in instance.offer_letter_statuses %}
+        <option value="{{ status.0 }}" {% if instance.offer_letter_status == status.0 %} selected{% endif %}>{{ status.1 }}</option>
+        {% endfor %}
+    </select>
+</a>
\ No newline at end of file
diff --git a/onboarding/templates/cbv/onboarding_candidates/onboarding_candidates.html b/onboarding/templates/cbv/onboarding_candidates/onboarding_candidates.html
new file mode 100644
index 000000000..fd66d191b
--- /dev/null
+++ b/onboarding/templates/cbv/onboarding_candidates/onboarding_candidates.html
@@ -0,0 +1,205 @@
+
+
+
+{% extends "index.html" %}
+{% load i18n %}{% load static %}
+
+
+{% block content %}
+
+
+
+
+
+<meta name="csrf-token" content="{{ csrf_token }}">
+
+
+
+<style>
+.portal--dot{
+  background-color:yellowgreen;
+}
+.not-portal--dot{
+  background-color:rgba(128, 128, 128, 0.482);
+}
+.joining--dot{
+  background-color:yellow;
+}
+.not-joining--dot{
+  background-color:burlywood;
+}
+
+
+
+</style>
+
+ <div hx-get="{% url "onboarding-candidates-nav" %}" hx-trigger="load">
+</div>  
+
+
+
+
+{% include "generic/components.html" %}
+<div id="ohMessages"></div>
+<div id="messages"> </div>
+
+<div
+    class="oh-checkpoint-badge mb-2"
+    id="selectedInstances"
+    data-ids="[]"
+    data-clicked=""
+    style="display: none">
+  </div>
+
+  
+  <div 
+  class="oh-wrapper" 
+  hx-get="{% url 'onboarding-candidates-list' %}?{{request.GET.urlencode}}" 
+  hx-trigger="load"
+  id="listContainer">
+  <div class="animated-background">
+  </div>
+</div>
+
+
+
+<div class="oh-activity-sidebar" id="activitySidebar" style="z-index: 1000">
+    <div class="oh-activity-sidebar__body" id="commentContainer"></div>
+  </div>
+
+  <div class="oh-modal" id="rejectReasonModal" role="dialog" aria-hidden="true">
+    <div class="oh-modal__dialog" style="max-width: 550px">
+      <div class="oh-modal__dialog-header">
+        <button type="button" class="oh-modal__close" aria-label="Close"><ion-icon name="close-outline"></ion-icon></button>
+      </div>
+  
+      <div class="oh-modal__dialog-body" id="rejectReasonModalBody"></div>
+    </div>
+  </div>
+
+  <div class="oh-modal" id="addAttachments" role="dialog" aria-labelledby="addAttachments" aria-hidden="true">
+    <div class="oh-modal__dialog">
+      <div class="oh-modal__dialog-header">
+        <span class="oh-modal__dialog-title" id="addEmployeeModalLabel">{% trans "Attachments" %} <span
+            style="color: #80808080;font-size: 14px;">({% trans "Optional" %})</span></span>
+        <button class="oh-modal__close" aria-label="Close">
+          <ion-icon name="close-outline"></ion-icon>
+        </button>
+      </div>
+      <form hx-post="{% url 'email-send' %}"
+      hx-target="#addAttachmentsBody"
+      hx-encoding="multipart/form-data">
+        <div class="oh-modal__dialog-body" id="addAttachmentsBody">
+          <section>
+            <div id="keyResultsContainer">
+              <div class="my-3" id="keyResultCard">
+                <div class="oh-card oh-card--no-shadow oh-card__body">
+  
+                  <div class="oh-input__group">
+                    <select name="ids" id="hired_candidates" multiple class="w-100" hidden >
+                      {% for candidate in hired_candidates %}
+                      <option value="{{candidate.id}}">{{candidate.name}}</option>
+                      {% endfor %}
+                    </select>
+                  </div>
+                  <div class="oh-input__group">
+                    <label class="oh-input__label mt-0" for="keyTitle">{% trans "Template as Attachments" %}</label>
+                    <select name="template_attachment_ids" id="template_attachment_ids" multiple
+                      class="oh-select oh-select-2 w-100">
+                      {% for template in mail_templates %}
+                      <option value="{{template.id}}">{{template.title}}</option>
+                      {% endfor %}
+                    </select>
+                  </div>
+                  <div class="oh-input__group">
+                    <label class="oh-input__label" for="keyDesc">{% trans "Other Attachments" %}</label>
+                    <input type="file" multiple name="other_attachments" id="other_attachments">
+                  </div>
+                </div>
+              </div>
+            </div>
+          </section>
+        </div>
+        <div class="oh-modal__dialog-footer">
+          <button onclick="$('.oh-modal#addAttachments').removeClass('oh-modal--show');$(`#messages`).html(
+            $(`<div class ='oh-alert-container'>
+            <div class='oh-alert oh-alert--animated oh-alert--info'>
+              Processing...
+            </div>
+          </div>
+            `)
+          )"
+            class="oh-btn oh-btn--secondary oh-btn--shadow" id="trigger-onboarding" title="Send portal link / Trigger Onboarding">
+            {% trans "Send Portal Link" %}
+          </button>
+        </div>
+      </form>
+    </div>
+  </div>
+  
+
+  <script>
+
+    $(document).on("click", "#send-port", function () {
+      ids = [];
+      ids.push($("#selectedInstances").attr("data-ids"));
+      ids = JSON.parse($("#selectedInstances").attr("data-ids"));
+      $("#hired_candidates[name=ids]").val(ids);
+      $("select[name=ids]").change();
+  });
+
+    function dateJoining($element){
+        var candId = $element.attr("data-candidate-id"); 
+        console.log(candId);
+        var dateVal = $element.val();
+        $.ajax({
+          type: "POST", 
+          url: "{% url 'update-joining' %}",
+          data: {
+            "candId": candId,
+            "date": dateVal,
+            csrfmiddlewaretoken: '{{ csrf_token }}' 
+          },
+          success: function (response) {
+            $("#reloadMessagesButton").click()
+          }
+        });
+      }
+
+      function probotionEnd($element){
+        candId = $element.attr("data-candidate-id");
+        dateVal = $element.val()
+        $.ajax({
+          type: "POST", 
+          url: "{% url 'update-probation-end' %}",
+          data: {
+            "candidate_id":candId,
+            "probation_end":dateVal,
+            csrfmiddlewaretoken: '{{ csrf_token }}' 
+          },
+          success: function (response) {
+            $("#reloadMessagesButton").click()
+          }
+        });
+      }
+
+      function offerLetter(url){
+        $.ajax({
+          type: "get",
+          url: url,
+          success: function (response) {
+            $("#reloadMessagesButton").click()
+          }
+        });
+      }
+
+    
+  
+  
+    
+</script>
+
+ 
+<script src="{% static 'cbv/attendance/hour_account.js' %}"></script>
+
+{% endblock content %}
\ No newline at end of file
diff --git a/onboarding/templates/cbv/onboarding_candidates/probation_date.html b/onboarding/templates/cbv/onboarding_candidates/probation_date.html
new file mode 100644
index 000000000..f4b339c15
--- /dev/null
+++ b/onboarding/templates/cbv/onboarding_candidates/probation_date.html
@@ -0,0 +1,5 @@
+
+<a  onclick="event.stopPropagation();" style="color: inherit; text-decoration: none" >
+    <input type="date" class="oh-input" style="width: 150px;" value="{{instance.probation_end|date:'Y-m-d'}}"
+      name="probation_end" onchange="probotionEnd($(this))" data-candidate-id="{{instance.id}}">
+  </a>
\ No newline at end of file
diff --git a/onboarding/templates/cbv/onboarding_view/detail_view.html b/onboarding/templates/cbv/onboarding_view/detail_view.html
new file mode 100644
index 000000000..4b47766c6
--- /dev/null
+++ b/onboarding/templates/cbv/onboarding_view/detail_view.html
@@ -0,0 +1,6 @@
+<div id="onboardingContainer">
+    <span  id="taskUpdate" hidden
+    hx-get="{% url 'candidate-single-view' instance.id %}" hx-target="#genericModalBody .row.ms-2" hx-select=".row.ms-2" hx-swap="outerHTML" hx-trigger="click"
+    >New</span> 
+    {% include "generic/horilla_detailed_view.html" %}
+</div>
diff --git a/onboarding/templates/cbv/onboarding_view/status.html b/onboarding/templates/cbv/onboarding_view/status.html
new file mode 100644
index 000000000..e2421d003
--- /dev/null
+++ b/onboarding/templates/cbv/onboarding_view/status.html
@@ -0,0 +1,24 @@
+{% load onboardingfilters %}
+{% if request.user|stage_manages:instance.onboarding_stage.onboarding_stage_id or perms.onboarding.change_candidatestage %}
+<select id="" class="w-100" style="
+    border: 1px solid hsl(213deg,22%,84%);
+    padding: 0.3rem 0.8rem 0.3rem 0.3rem;
+    border-radius: 0rem;" name="stage"
+    hx-post="{% url 'candidate-stage-update' instance.id instance.recruitment_id.id %}"
+    hx-trigger="change" hx-target="#onboardingTable{{instance.recruitment_id.id}}">
+    {% for stage in instance.recruitment_id.onboarding_stage.all %}
+    {% if instance.onboarding_stage.onboarding_stage_id == stage %}
+    <option value="{{stage.id}}" selected>{{stage}}</option>
+    {% else %}
+    <option value="{{stage.id}}">{{stage}}</option>
+    {% endif %}
+    {% endfor %}
+</select>
+{% else %}
+{% for stage in instance.recruitment_id.onboarding_stage.all %}
+    {% if instance.onboarding_stage_id == stage %}
+    {{stage}}
+    {% endif %}
+{% endfor %}
+
+{% endif %}
\ No newline at end of file
diff --git a/onboarding/templates/cbv/onboarding_view/task.html b/onboarding/templates/cbv/onboarding_view/task.html
new file mode 100644
index 000000000..efcf59e7d
--- /dev/null
+++ b/onboarding/templates/cbv/onboarding_view/task.html
@@ -0,0 +1,19 @@
+{% load onboardingfilters %}
+ <div class="row ms-2">
+    {% for task in instance.candidate_task.all %}
+        <div class="col-6 ps-0 pb-1">
+            <div class="oh-timeoff-modal__stat-title mb-1"><span  class="oh-dot oh-dot--small  me-1 oh-dot--color-{{task.status}}"></span>{{task.onboarding_task_id}}, {{task.stage_id}} </div>
+            <div class="" id="task{{task.id}}{{instance.id}}">
+                {% if request.user|task_manager:task or perms.onboarding.change_candidatetask %}
+                    {% include 'onboarding/candidate_task.html' %}
+                {% else %}
+                {% for choice in choices %}
+                {% if choice.0 == task.status %}
+                {{choice.1}}
+                {% endif %}
+                {% endfor %}
+                {% endif %}
+            </div>
+        </div>
+    {% endfor %}
+</div> 
\ No newline at end of file
diff --git a/onboarding/templates/cbv/pipeline/onboarding/filters.html b/onboarding/templates/cbv/pipeline/onboarding/filters.html
new file mode 100644
index 000000000..7829fffbd
--- /dev/null
+++ b/onboarding/templates/cbv/pipeline/onboarding/filters.html
@@ -0,0 +1,108 @@
+{% 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>
+            {{ filter_instance_context_name.form.recruitment_managers }}
+          </div>
+          <div class="oh-input-group">
+            <label class="oh-label">{% trans 'Start Date' %}</label>
+            {{ filter_instance_context_name.form.start_date }}
+          </div>
+          <div class="oh-input-group">
+            <label class="oh-label">{% trans 'Is Published' %}</label>
+            {{ filter_instance_context_name.form.is_published }}
+          </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>
+            {{ filter_instance_context_name.form.company_id }}
+          </div>
+          <div class="oh-input-group">
+            <label class="oh-label">{% trans 'End Date' %}</label>
+            {{ filter_instance_context_name.form.end_date }}
+          </div>
+          <div class="oh-input-group">
+            <label class="oh-label">{% trans 'Is closed' %}</label>
+            {{ filter_instance_context_name.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 'Start Date From' %}</label>
+            {{ filter_instance_context_name.form.start_from }}
+          </div>
+        </div>
+        <div class="col-sm-12 col-md-12 col-lg-6">
+          <div class="oh-input-group">
+            <label class="oh-label">{% trans 'Till End Date' %}</label>
+            {{ filter_instance_context_name.form.end_till }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="oh-accordion">
+    <div class="oh-accordion-header">
+      {% trans 'Candidate' %}
+    </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>
+        <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>
+        <div class="col-sm-12 col-md-12 col-lg-6">
+          <div class="oh-input-group">
+            <label class="oh-label">{% trans 'Taks' %}</label>
+            {{ candidate_filter_obj.form.tasks }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <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">
+          <div class="col-sm-12 col-md-12 col-lg-12 mb-2" style="width: 100%;">
+            <div class="oh-input-group">
+              <label class="oh-label">{% trans 'Stage Managers' %}</label>
+            </div>
+            {{ stage_filter_obj.form.employee_id }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<script>
+  $(document).ready(function () {
+    {% include "country.js" %}
+    populateCountries("country","state")
+  });
+</script>
+{% comment %} <div class="oh-dropdown__filter-footer">
+  <button class="oh-btn oh-btn--secondary oh-btn--small w-100 filterButton" id="">{% trans 'Filter' %}</button>
+</div> {% endcomment %}
diff --git a/onboarding/templates/cbv/pipeline/onboarding/pipeline.html b/onboarding/templates/cbv/pipeline/onboarding/pipeline.html
new file mode 100644
index 000000000..960a333cb
--- /dev/null
+++ b/onboarding/templates/cbv/pipeline/onboarding/pipeline.html
@@ -0,0 +1,94 @@
+{% extends "index.html" %}
+{% load i18n %}
+{% block content %}
+<style>
+  .note-modal-backdrop {
+      z-index: 998 !important;
+  }
+
+  .tooltip {
+      position: relative;
+      display: inline-block; /* Ensures that the tooltip container doesn't stretch to the full width */
+  }
+
+  .tooltip .tooltiptext {
+      visibility: hidden;
+      width: auto; /* Allow the tooltip width to adjust based on content */
+      max-width: auto; /* Limit the maximum width of the tooltip to prevent it from overflowing */
+      background-color: green;
+      color: white;
+      text-align: center;
+      border-radius: 6px;
+      padding: 5px;
+      position: absolute;
+      z-index: 1;
+      bottom: 5%;
+      left: 50%;
+      transform: translateX(5%);
+      opacity: 0;
+      transition: opacity 0.3s;
+      white-space: nowrap; /* Prevents the text from wrapping */
+      overflow: hidden; /* Hides any overflowed content */
+      font-size: 15px;
+  }
+
+  .tooltip:hover .tooltiptext {
+      visibility: visible;
+      opacity: 1;
+
+  
+      
+  }
+</style>
+{% include "generic/components.html" %}
+
+<div hx-get="{% url "cbv-pipeline-nav-onboarding" %}" hx-trigger="load"></div>
+
+<div 
+  class="oh-wrapper" 
+  id="pipelineContainer" 
+  hx-get="{% url "cbv-pipeline-tab-onboarding" %}?is_active=true" 
+  hx-trigger="load"
+>
+</div>
+
+<div class="oh-activity-sidebar" id="activitySidebar" style="z-index:1000">
+    <div class="oh-activity-sidebar__body" id="noteContainer">
+      <div class="oh-activity-sidebar__header">
+        <a event.stopPropagation
+        style="cursor: pointer;"
+        onclick="$('.oh-activity-sidebar--show').removeClass('oh-activity-sidebar--show');">
+        <ion-icon
+        name="chevron-forward-outline"
+        class="oh-activity-sidebar__header-icon me-2 oh-activity-sidebar__close"
+        data-target="#activitySidebar">
+        </ion-icon>
+        </a>
+      </div>
+    </div>
+  </div>
+
+  <div
+    class="oh-modal"
+    id="bulkResumeUpload"
+    role="dialog"
+    aria-labelledby="bulkResumeUpload"
+    aria-hidden="true"
+>
+    <div class="oh-modal__dialog">
+        <div class="oh-modal__dialog-header">
+            <h2 class="oh-modal__dialog-title" id="bulkResumeUploadLabel">
+                {% trans "Upload Resumes" %}
+            </h2>
+            <button class="oh-modal__close" aria-label="Close">
+                <ion-icon name="close-outline"></ion-icon>
+            </button>
+            <div
+                class="oh-modal__dialog-body mb-4 p-0 pt-2"
+                id="bulkResumeUploadBody"
+            >
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock content %}
\ No newline at end of file
diff --git a/onboarding/templates/cbv/pipeline/onboarding/stage_drop_down.html b/onboarding/templates/cbv/pipeline/onboarding/stage_drop_down.html
new file mode 100644
index 000000000..a76d6bc9c
--- /dev/null
+++ b/onboarding/templates/cbv/pipeline/onboarding/stage_drop_down.html
@@ -0,0 +1,17 @@
+{% load i18n %}
+{% load basefilters %}
+{% load onboardingfilters %}
+{% if perms.recruitment.change_recruitment or request.user|stage_manages:instance.onboarding_stage_id %}
+<div data-cell-index="3" onclick="event.stopPropagation();">
+  <select hx-post="{% url "onboarding-cbv-change-stage" instance.pk %}" name="onboarding_stage_id"
+          class="row-dropdown"
+          style="width: 90%;color: hsl(0,0%,11%); background-color: transparent; height: 100%; border: 1px solid transparent;"
+          >
+    {% for stage in stages %}
+    <option value="{{stage.pk}}"{% if stage.pk == instance.onboarding_stage_id.pk %}selected{% endif %}>{{stage}}</option>
+    {% endfor %}
+  </select>
+</div>
+{% else %}
+  {{instance.onboarding_stage_id}}
+{% endif %}
\ No newline at end of file
diff --git a/onboarding/templates/cbv/pipeline/onboarding/stage_order.html b/onboarding/templates/cbv/pipeline/onboarding/stage_order.html
new file mode 100644
index 000000000..2f0e9bb8a
--- /dev/null
+++ b/onboarding/templates/cbv/pipeline/onboarding/stage_order.html
@@ -0,0 +1,70 @@
+{% load static i18n %}
+<div class="oh-modal__dialog-header">
+    <span class="oh-modal__dialog-title" id="genericModalLabel">
+        {% trans "Update Stage Order" %}
+    </span>
+    <button
+        class="oh-modal__close--custom"
+        onclick="$(this).closest('.oh-modal--show').removeClass('oh-modal--show');"
+        aria-label="Close"
+    >
+        <ion-icon
+            name="close-outline"
+            role="img"
+            class="md hydrated"
+        ></ion-icon>
+    </button>
+</div>
+<div class="oh-modal__dialog-body oh-modal__dialog-relative rounded ">
+    <div class="oh-profile-section" id="sequenceForm">
+        <ul class="mt-3 p-0" id="sortable">
+            {% for stage in stages %}
+            <li
+                class="oh-btn oh-btn--small border d-flex align-items-center justify-content-start p-3 rounded mb-2"
+                style="cursor: grab"
+                data-id = "{{stage.id}}"
+            >
+                <span class="text-secondary me-3 fs-5">≡</span>
+                <span class="fw-bold text-primary me-2">{{stage.sequence}}.</span>
+                <span>{{stage}}</span>
+            </li>
+            {% endfor %}
+        </ul>
+        <div class="d-flex flex-row-reverse">
+            <button
+                type="submit"
+                class="oh-btn oh-btn--secondary mt-2 mr-0 oh-btn--w-100-resp"
+            >
+                {% trans "Save" %}
+            </button>
+        </div>
+    </div>
+</div>
+<script>
+    $(function () {
+        $("#sortable").sortable();
+        $("#sequenceForm button[type=submit]").on("click", function (e) {
+            e.preventDefault();
+            let order = [];
+            $("#sortable li").each(function (index) {
+                order.push($(this).data("id"));
+            });
+
+            $.ajax({
+                url: "{% url 'onboarding-stage-sequence-update' recruitment.id %}",
+                method: "POST",
+                data: {
+                    order: JSON.stringify(order),
+                    csrfmiddlewaretoken: '{{ csrf_token }}'
+                },
+                success: function (response) {
+                    $(".oh-modal--show").removeClass("oh-modal--show");
+                    $("#applyFilter").click()
+                },
+                error: function (response) {
+                    console.log("Error updating order");
+                }
+            });
+        });
+    });
+</script>
diff --git a/onboarding/templates/cbv/pipeline/onboarding/tasks.html b/onboarding/templates/cbv/pipeline/onboarding/tasks.html
new file mode 100644
index 000000000..eefd74660
--- /dev/null
+++ b/onboarding/templates/cbv/pipeline/onboarding/tasks.html
@@ -0,0 +1,22 @@
+{% load i18n %}
+{% if task_id in request.managing_onboarding_tasks or perms.onboarding.change_candidatetask or perms.onboarding.change_onboardingtask or instance.onboarding_stage_id.pk in request.managing_onboarding_stages or instance.onboarding_stage_id.recruitment_id.pk in request.managing_recruitments %}
+  <div onclick="event.stopPropagation()" id="taskContainer{{ task_id }}{{ instance.pk }}">
+    {% if task %}
+      <select hx-post="{% url 'assign-task-pipeline' task_id instance.candidate_id.pk task.id %}" hx-target="#taskContainer{{ task_id }}{{ instance.pk }}" name="status" class="w-100" style="border: 1px solid hsl(213deg,22%,84%);
+      padding: 0.3rem 0.8rem 0.3rem 0.3rem;
+      border-radius: 0rem;">
+        {% for choice in task.choice %}
+          {% if choice.0 == task.status %}
+            <option value="{{ choice.0 }}" selected>{{ choice.1 }}</option>
+          {% else %}
+            <option value="{{ choice.0 }}">{{ choice.1 }}</option>
+          {% endif %}
+        {% endfor %}
+      </select>
+    {% else %}
+      <button class="oh-checkpoint-badge text-info" data-toggle="oh-modal-toggle" hx-get="{% url 'assign-task-pipeline' task_id instance.candidate_id.pk %}" hx-target="#taskContainer{{ task_id }}{{ instance.pk }}">{% trans 'Assign' %}</button>
+    {% endif %}
+  </div>
+{% else %}
+  {{ task.get_status_display }}
+{% endif %}
diff --git a/onboarding/templates/onboarding/candidate_task.html b/onboarding/templates/onboarding/candidate_task.html
index 424ef3a4d..6ac774e73 100644
--- a/onboarding/templates/onboarding/candidate_task.html
+++ b/onboarding/templates/onboarding/candidate_task.html
@@ -1,6 +1,6 @@
 {% load i18n %}
 {% if single_view %}
-  {% if candidate == task.candidate_id %}
+  {% if candidate.candidate_id == task.candidate_id %}
   <select name="task"  class="w-100" id="{{task.id}}"
       data-task-id="{{task.id}}" data-candidate-id={{candidate.id}}
       data-onboarding-task-id={{task.id}}
@@ -24,7 +24,6 @@
       {% trans "Assign" %}
   </button>
   {% endif %}
-
   </select>
 {% else %}
   {% if candidate.candidate_id  in task.candidates.all %}
@@ -107,6 +106,7 @@ function updateSingleStatus(selectElement,event) {
   var taskId = $(selectElement).data("task-id");
   var candId = $(selectElement).data('candidate-id');
   var status = $(selectElement).val();
+  console.log(status)
   $.ajax({
       type: "POST",
       url: "{% url 'candidate-task-update' 0 %}".replace('0', taskId),
@@ -123,6 +123,7 @@ function updateSingleStatus(selectElement,event) {
         }
 
   });
+  $('#taskUpdate').click();
 }
 
 </script>
diff --git a/onboarding/templates/onboarding/dashboard/status_list.html b/onboarding/templates/onboarding/dashboard/status_list.html
index 391469484..5e32c3edd 100644
--- a/onboarding/templates/onboarding/dashboard/status_list.html
+++ b/onboarding/templates/onboarding/dashboard/status_list.html
@@ -14,7 +14,7 @@
             <span class="oh-profile__name oh-text--dark">{{ task.candidate_id.name }}</span>
           </div>
           <span class="oh-recuritment_tag  {% if task.status == 'done' %} done-task {% elif task.status == 'scheduled' %} scheduled-task{% elif task.status == 'ongoing' %} ongoing-task{% elif task.status == 'stuck' %} dd stuck-task {% elif task.status == 'todo' %} todo-task{% endif %}">
-            <select hx-swap="none" onchange="
+            <select  onchange="
             if ($(this).val() == 'done') {
                 $(this).parent().addClass('done-task')
             }else{
@@ -40,7 +40,7 @@
             }else{
                 $(this).parent().removeClass('todo-task')
             }
-            " hx-get="{% url 'change-task-status' %}?task_id={{task.id}}"
+            " hx-get="{% url 'change-task-status' %}?task_id={{task.id}}" hx-swap="afterend"
             name="status"
             class=""
             style="width: 150px;"
diff --git a/onboarding/templates/onboarding/dashboard/task_report.html b/onboarding/templates/onboarding/dashboard/task_report.html
index c39f4198f..aaed45978 100644
--- a/onboarding/templates/onboarding/dashboard/task_report.html
+++ b/onboarding/templates/onboarding/dashboard/task_report.html
@@ -16,7 +16,7 @@
                 {% trans 'Todo' %}
               </div>
               <div class="oh-sticky-table__th" style="width: 100px;" align="center">
-                {% trans 'Scheduled' %}
+                {% trans 'Scheduled' %}task_report
               </div>
               <div class="oh-sticky-table__th" style="width: 100px;" align="center">
                 {% trans 'Ongoing' %}
diff --git a/onboarding/templates/onboarding/empty_task.html b/onboarding/templates/onboarding/empty_task.html
new file mode 100644
index 000000000..2a6a4ebc1
--- /dev/null
+++ b/onboarding/templates/onboarding/empty_task.html
@@ -0,0 +1,8 @@
+{% load i18n %}
+<div class="oh-wrapper" align="center" style="margin-top: 1vh; margin-bottom:2vh;">
+    <div align="center">
+      <p class="oh-404__subtitle">
+        {% trans "No Tasks found." %}
+      </p>
+    </div>
+  </div>
\ No newline at end of file
diff --git a/onboarding/templates/onboarding/kanban/kanban.html b/onboarding/templates/onboarding/kanban/kanban.html
index 33aea3d82..693ffdb95 100644
--- a/onboarding/templates/onboarding/kanban/kanban.html
+++ b/onboarding/templates/onboarding/kanban/kanban.html
@@ -62,9 +62,9 @@
                                                 <ul class="oh-dropdown__items">
                                                     <li class="oh-dropdown__item">
                                                         <a data-toggle="oh-modal-toggle"
-                                                        data-target="#objectUpdateModal"
+                                                        data-target="#genericModal"
                                                         hx-get="{% url 'stage-update' stage.grouper.id rec.id %}"
-                                                        hx-target="#objectUpdateModalTarget" class="oh-dropdown__link" style="cursor:pointer;">{% trans "Edit" %}</a>
+                                                        hx-target="#genericModalBody" class="oh-dropdown__link" style="cursor:pointer;">{% trans "Edit" %}</a>
                                                     </li>
                                                     <li class="oh-dropdown__item">
                                                         <a  href="{% url 'stage-delete' stage.grouper.id %}"
diff --git a/onboarding/templates/onboarding/onboarding_table.html b/onboarding/templates/onboarding/onboarding_table.html
index cc4a13be2..1c7f3ad31 100644
--- a/onboarding/templates/onboarding/onboarding_table.html
+++ b/onboarding/templates/onboarding/onboarding_table.html
@@ -65,9 +65,9 @@
                      {% if request.user|stage_manages:stage or perms.onboarding.change_onboardingstage %}
                      <li class="oh-dropdown__item">
                         <a hx-get="{% url 'stage-update' stage.grouper.id recruitment.id %}"
-                           hx-target="#objectUpdateModalTarget"
+                           hx-target="#genericModalBody"
                            data-toggle="oh-modal-toggle"
-                           data-target="#objectUpdateModal"
+                           data-target="#genericModal"
                            class="oh-dropdown__link"
                         >{% trans "Edit" %}</a
                         >
@@ -136,9 +136,9 @@
                                  {% if request.user|stage_manages:stage or perms.onboarding.change_onboardingtask %}
                                  <li class="oh-dropdown__item">
                                     <a class="oh-dropdown__link" data-toggle="oh-modal-toggle"
-                                       data-target="#objectUpdateModal"
+                                       data-target="#genericModal"
                                        hx-get="{% url 'task-update' task.id %}"
-                                       hx-target="#objectUpdateModalTarget">{% trans "Edit" %}
+                                       hx-target="#genericModalBody">{% trans "Edit" %}
                                     </a>
                                  </li>
                                  {% endif %}
@@ -193,8 +193,8 @@
                   data-job-position = "{{candidate.candidate_id.job_position_id}}"
                   data-join-date="{{candidate.candidate_id.joining_date}}"
                   data-portal-count="{{candidate.candidate_id.onboarding_portal.count}}"
-                  data-toggle="oh-modal-toggle" data-target="#tableTimeOff"
-                  hx-get="{% url 'candidate-single-view' candidate.candidate_id.id %}?requests_ids={{recruitment.employee_ids}}" hx-target="#singleView"
+                  data-toggle="oh-modal-toggle" data-target="#genericModal"
+                  hx-get="{% url 'candidate-single-view' candidate.candidate_id.id %}?instance_ids={{recruitment.employee_ids}}" hx-target="#genericModalBody"
                   >
                   <div class="oh-sticky-table__sd" onclick="event.stopPropagation()">
                      <div class="oh-profile oh-profile--md">
diff --git a/onboarding/templates/onboarding/onboarding_view.html b/onboarding/templates/onboarding/onboarding_view.html
index 5577835fa..9b466a9a5 100644
--- a/onboarding/templates/onboarding/onboarding_view.html
+++ b/onboarding/templates/onboarding/onboarding_view.html
@@ -4,6 +4,7 @@
 {% load i18n %}
 {% load recruitmentfilters %}
 {% load onboardingfilters %}
+{% include 'generic/components.html' %}
 <style>
     .select2-container {
         width: 100% !important;
diff --git a/onboarding/templates/onboarding/onboardings.html b/onboarding/templates/onboarding/onboardings.html
index d5cee8087..de97400e3 100644
--- a/onboarding/templates/onboarding/onboardings.html
+++ b/onboarding/templates/onboarding/onboardings.html
@@ -80,7 +80,6 @@
           csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val()
         },
         success: function (data) {
-          alert(data)
         }
 
       });
@@ -104,4 +103,4 @@
   });
 
 </script>
-{% endblock content %}
+{% endblock content %}
diff --git a/onboarding/urls.py b/onboarding/urls.py
index 6fb055d99..8a3d7c1d4 100644
--- a/onboarding/urls.py
+++ b/onboarding/urls.py
@@ -7,23 +7,55 @@ This module is used to map url path with view methods.
 from django.urls import path
 
 from onboarding import views
+from onboarding.cbv import dashboard, onboarding_candidates, onboarding_view, pipeline
+from recruitment.cbv import candidates
 from recruitment.models import Candidate
 
 urlpatterns = [
-    path("stage-creation/<str:obj_id>", views.stage_creation, name="stage-creation"),
     path(
-        "stage-update/<int:stage_id>/<int:recruitment_id>",
-        views.stage_update,
+        "stage-creation/<int:obj_id>/",
+        onboarding_view.StageCreateForm.as_view(),
+        name="stage-creation",
+    ),
+    path(
+        "stage-update/<int:pk>/<int:obj_id>/",
+        onboarding_view.StageCreateForm.as_view(),
         name="stage-update",
     ),
-    path("stage-delete/<int:stage_id>", views.stage_delete, name="stage-delete"),
-    path("task-creation", views.task_creation, name="task-creation"),
-    path("task-delete/<int:task_id>", views.task_delete, name="task-delete"),
     path(
-        "task-update/<int:task_id>/",
-        views.task_update,
+        "onboarding-stage-sequence-update/<int:pk>/",
+        views.update_stage_order,
+        name="onboarding-stage-sequence-update",
+    ),
+    path(
+        "task-creation/<int:obj_id>/",
+        onboarding_view.TaskCreateForm.as_view(),
+        name="task-creation",
+    ),
+    path(
+        "onboarding-cand-detail-view/<int:pk>/",
+        pipeline.CandidateOnboardingDetail.as_view(),
+        name="onboarding-cand-detail-view",
+    ),
+    path(
+        "task-update/<int:pk>/",
+        onboarding_view.TaskUpdateFormView.as_view(),
         name="task-update",
     ),
+    # path("stage-creation/<str:obj_id>", views.stage_creation, name="stage-creation"),
+    # path(
+    #     "stage-update/<int:stage_id>/<int:recruitment_id>",
+    #     views.stage_update,
+    #     name="stage-update",
+    # ),
+    path("stage-delete/<int:stage_id>", views.stage_delete, name="stage-delete"),
+    # path("task-creation", views.task_creation, name="task-creation"),
+    path("task-delete/<int:task_id>", views.task_delete, name="task-delete"),
+    # path(
+    #     "task-update/<int:task_id>/",
+    #     views.task_update,
+    #     name="task-update",
+    # ),
     path("candidate-creation", views.candidate_creation, name="candidate-creation"),
     path(
         "candidate-update/<int:obj_id>", views.candidate_update, name="candidate-update"
@@ -31,13 +63,18 @@ urlpatterns = [
     path(
         "candidate-delete/<int:obj_id>", views.candidate_delete, name="candidate-delete"
     ),
+    # path(
+    #     "candidate-single-view/<int:id>",
+    #     views.candidates_single_view,
+    #     name="candidate-single-view",
+    #     kwargs={"model": Candidate},
+    # ),
     path(
-        "candidate-single-view/<int:id>",
-        views.candidates_single_view,
+        "candidate-single-view/<int:pk>",
+        onboarding_view.OnboardingCandidateDetailView.as_view(),
         name="candidate-single-view",
-        kwargs={"model": Candidate},
     ),
-    path("candidates-view/", views.candidates_view, name="candidates-view"),
+    # path("candidates-view/", views.candidates_view, name="candidates-view"),
     path(
         "hired-candidates-view",
         views.hired_candidate_view,
@@ -125,10 +162,20 @@ urlpatterns = [
     path(
         "update-probation-end", views.update_probation_end, name="update-probation-end"
     ),
-    path("task-report-onboarding", views.task_report, name="task-report-onboarding"),
+    # path("task-report-onboarding", views.task_report, name="task-report-onboarding"),
+    path(
+        "task-report-onboarding",
+        dashboard.MyOnboardingTaskList.as_view(),
+        name="task-report-onboarding",
+    ),
+    # path(
+    #     "candidate-tasks-status",
+    #     views.candidate_tasks_status,
+    #     name="candidate-tasks-status",
+    # ),
     path(
         "candidate-tasks-status",
-        views.candidate_tasks_status,
+        dashboard.MyOnboardingCandidatesSingleView.as_view(),
         name="candidate-tasks-status",
     ),
     path("change-task-status", views.change_task_status, name="change-task-status"),
@@ -137,11 +184,11 @@ urlpatterns = [
         views.update_offer_letter_status,
         name="update-offer-letter-status",
     ),
-    path(
-        "add-to-rejected-candidates",
-        views.add_to_rejected_candidates,
-        name="add-to-rejected-candidates",
-    ),
+    # path(
+    #     "add-to-rejected-candidates",
+    #     views.add_to_rejected_candidates,
+    #     name="add-to-rejected-candidates",
+    # ),
     path(
         "candidate-select-filter-onboarding",
         views.candidate_select_filter,
@@ -150,6 +197,21 @@ urlpatterns = [
     path(
         "candidate-select/", views.candidate_select, name="candidate-select-onboarding"
     ),
+    path(
+        "candidates-view/",
+        onboarding_candidates.OnboardingCandidatesView.as_view(),
+        name="candidates-view",
+    ),
+    path(
+        "onboarding-candidates-list/",
+        onboarding_candidates.OnboardingCandidatesList.as_view(),
+        name="onboarding-candidates-list",
+    ),
+    path(
+        "onboarding-candidates-nav/",
+        onboarding_candidates.OnboardingCandidatesNav.as_view(),
+        name="onboarding-candidates-nav",
+    ),
     path(
         "offer-letter-bulk-status-update/",
         views.offer_letter_bulk_status_update,
@@ -160,4 +222,45 @@ urlpatterns = [
         views.onboarding_candidate_bulk_delete,
         name="onboarding-candidate-bulk-delete",
     ),
+    path(
+        "cbv-change-stage/<int:pk>/",
+        pipeline.ChangeStage.as_view(),
+        name="onboarding-cbv-change-stage",
+    ),
+    path(
+        "cbv-pipeline/", pipeline.PipelineView.as_view(), name="cbv-pipeline-onboarding"
+    ),
+    path(
+        "cbv-pipeline-nav/",
+        pipeline.PipelineNav.as_view(),
+        name="cbv-pipeline-nav-onboarding",
+    ),
+    path(
+        "cbv-pipeline-tab/",
+        pipeline.RecruitmentTabView.as_view(),
+        name="cbv-pipeline-tab-onboarding",
+    ),
+    path(
+        "get-stages/<int:recruitment_id>/",
+        pipeline.CandidatePipeline.as_view(),
+        name="get-stages-onboarding",
+    ),
+    path(
+        "assign-task-pipeline/<int:task_id>/<int:cand_id>/",
+        pipeline.AssignTask.as_view(),
+        name="assign-task-pipeline",
+    ),
+    path(
+        "assign-task-pipeline/<int:task_id>/<int:cand_id>/<int:cand_task_id>/",
+        pipeline.AssignTask.as_view(),
+        name="assign-task-pipeline",
+    ),
+    # path("candidate-lists-cbv/<int:stage_id>/",pipeline.CandidateList.as_view(),name='candidate-lists-cbv'),
+    # path("candidate-lists-cbv/<int:stage_id>/<int:rec_id>/",pipeline.CandidateList.as_view(),name='candidate-lists-cbv'),
+    path(
+        "candidate-lists-cbv/",
+        pipeline.CandidateList.as_view(),
+        name="candidate-lists-cbv-onboarding",
+    ),
+    # path("cbv-change-stage/<int:pk>/",pipeline.ChangeStage.as_view(),name="cbv-change-stage")
 ]
diff --git a/onboarding/views.py b/onboarding/views.py
index 9a52125f8..95bb06079 100644
--- a/onboarding/views.py
+++ b/onboarding/views.py
@@ -200,6 +200,39 @@ def stage_update(request, stage_id, recruitment_id):
     )
 
 
+@login_required
+@recruitment_manager_can_enter("onboarding.change_onboardingstage")
+def update_stage_order(request, pk):
+    """
+    This method is used to update the stage sequence of the onboarding
+    """
+    recruitment = Recruitment.objects.get(id=pk)
+
+    if request.method == "POST":
+        try:
+            order = json.loads(request.POST.get("order", "[]"))
+            for index, stage_id in enumerate(order):
+                stage = recruitment.onboarding_stage.get(id=stage_id)
+                stage.sequence = index + 1
+                stage.save()
+            messages.success(request, "Sequence Updated Successfully")
+            return JsonResponse({"status": "success"})
+        except Exception as e:
+            messages.error(request, "Error Updating Sequence..")
+            return JsonResponse({"status": "error", "message": str(e)}, status=400)
+
+    stages = recruitment.onboarding_stage.order_by("sequence")
+
+    return render(
+        request,
+        "cbv/pipeline/onboarding/stage_order.html",
+        {
+            "stages": stages,
+            "recruitment": recruitment,
+        },
+    )
+
+
 @login_required
 @permission_required("onboarding.delete_onboardingstage")
 @recruitment_manager_can_enter("onboarding.delete_onboardingstage")
@@ -451,7 +484,7 @@ def candidate_delete(request, obj_id):
                 )
             ),
         )
-    return redirect(candidates_view)
+    return redirect(reverse("candidates-view"))
 
 
 @login_required
@@ -1069,6 +1102,7 @@ def employee_creation(request, token):
             work_info.job_position_id = job_position
             work_info.date_joining = candidate.joining_date
             work_info.email = candidate.email
+            work_info.company_id = candidate.recruitment_id.company_id
             work_info.save()
             onboarding_portal.count = 3
             onboarding_portal.save()
@@ -1720,7 +1754,11 @@ def change_task_status(request):
     ]:
         candidate_task.status = status
         candidate_task.save()
-    return HttpResponse("Success")
+        messages.success(request, _("Task status updated successfully."))
+
+    return HttpResponse(
+        "<script>$('#reloadMessagesButton').click(); $('#myOnboardingReload').click(); </script>"
+    )
 
 
 @login_required
diff --git a/payroll/cbv/accessibility.py b/payroll/cbv/accessibility.py
new file mode 100644
index 000000000..3ea9c7a59
--- /dev/null
+++ b/payroll/cbv/accessibility.py
@@ -0,0 +1,33 @@
+from base.methods import check_manager
+from employee.models import Employee
+from django.contrib.auth.context_processors import PermWrapper
+
+def payroll_accessibility(request, instance: object = None, user_perms: PermWrapper = [], *args, **kwargs) -> bool:
+    """
+    accessibility for payroll tab
+    """
+    employee = Employee.objects.get(id=instance.pk)
+    if request.user.has_perm("payroll.view_payslip") or request.user == employee.employee_user_id:
+        return True
+    return False
+
+def bonus_accessibility(request, instance: object = None, user_perms: PermWrapper = [], *args, **kwargs) -> bool:
+    """
+    accessibility for bonus tab
+    """
+    employee = Employee.objects.get(id=instance.pk)
+    if request.user.has_perm("employee.view_bonuspoint") or check_manager(request.user.employee_get, instance)or request.user == employee.employee_user_id:
+        return True
+    return False
+
+def allowance_and_deduction_accessibility(request, instance: object = None, user_perms: PermWrapper = [], *args, **kwargs) -> bool:
+    """
+    accessibility for allowance and deduction tab
+    """
+    employee = Employee.objects.get(id=instance.pk)
+    if (
+        request.user.has_perm("payroll.view_payslip")
+        or request.user == employee.employee_user_id
+    ):
+        return True
+    return False
diff --git a/payroll/cbv/allowance_deduction.py b/payroll/cbv/allowance_deduction.py
new file mode 100644
index 000000000..50343d65c
--- /dev/null
+++ b/payroll/cbv/allowance_deduction.py
@@ -0,0 +1,346 @@
+"""
+This page is handling the cbv methods of allowance and deduction in employee profile page.
+"""
+
+import operator
+from typing import Any
+from django.apps import apps
+from django.utils.translation import gettext_lazy as _
+from django.urls import reverse
+from employee.models import Employee
+from employee.views import return_none
+from horilla_views.cbv_methods import login_required
+from horilla_views.generic.cbv.views import (
+    HorillaDetailedView,
+    HorillaTabView,
+    HorillaListView,
+)
+from payroll.cbv.deduction import DeductionListView
+from payroll.cbv.allowances import AllowanceListView
+from payroll.methods.payslip_calc import dynamic_attr
+from payroll.models.models import Allowance, Deduction
+from horilla_views.cbv_methods import login_required
+from django.utils.decorators import method_decorator
+
+operator_mapping = {
+    "equal": operator.eq,
+    "notequal": operator.ne,
+    "lt": operator.lt,
+    "gt": operator.gt,
+    "le": operator.le,
+    "ge": operator.ge,
+    "icontains": operator.contains,
+    "range": return_none,
+}
+
+
+class AllowanceDeductionTabView(HorillaTabView):
+    """
+    generic tab view for allowance and deduction
+    """
+    
+
+    def get_context_data(self, **kwargs):
+        """
+        Adds tab information for allowances and deductions, including actions for adding bonuses
+        """
+
+        context = super().get_context_data(**kwargs)
+        pk = self.kwargs.get("pk")
+        context["tabs"] = [
+            {
+                "title": _("Allowances"),
+                "url": f"{reverse('allowance-tab-list',kwargs={'pk': pk})}",
+                "actions": [
+                    {
+                        "action": "Add Bonus",
+                        "attrs": f"""
+                                hx-get="{reverse('add-bonus')}?employee_id={pk}",
+								hx-target="#addBonusModalBody"
+								data-toggle="oh-modal-toggle"
+								data-target="#addBonusModal"
+                      """,
+                    }
+                ],
+            },
+            {
+                "title": _("Deductions"),
+                "url": f"{reverse('deduction-tab-list',kwargs={'pk': pk })}",
+            },
+        ]
+        return context
+
+
+class AllowanceTabList(AllowanceListView):
+    """
+    list view for allowance tab
+    """
+
+    template_name = "cbv/allowance_deduction/allowance_deduction.html"
+    records_per_page = 5
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.view_id = "allowance_tab_id"
+        pk = self.request.resolver_match.kwargs.get("pk")
+        self.search_url = reverse("allowance-tab-list", kwargs={'pk':pk})
+
+    columns = [
+    col for col in AllowanceListView.columns
+    if col[1] not in ("get_specific_employees", "get_exclude_employees", "condition_based_display", "rate")
+    ]
+
+    # row_status_class = None
+    row_status_indications = None
+
+
+    @method_decorator(login_required, name="dispatch")
+    def dispatch(self, *args, **kwargs):
+        return super(AllowanceListView, self).dispatch(*args, **kwargs)
+
+
+
+    def get_context_data(self, **kwargs: Any):
+        """
+        Adds active contract details and basic pay for a specified employee
+        to the context
+        """
+
+        context = super().get_context_data(**kwargs)
+        pk = self.kwargs.get("pk")
+        self.request.emp_id = pk
+        self.request.allowance_div = None
+        self.request.allowance_tab_id = "allowance_tab_id"
+        employee = Employee.objects.get(id=pk)
+        active_contracts = (
+            employee.contract_set.filter(contract_status="active").first()
+            if apps.is_installed("payroll")
+            else None
+        )
+        basic_pay = active_contracts.wage if active_contracts else None
+        context["active_contracts"] = active_contracts
+        context["basic_pay"] = basic_pay
+        return context
+
+    def get_queryset(self):
+        """
+        Returns a filtered queryset of allowance based on 
+        the employee's active contract and specific conditions
+        """
+
+        queryset = HorillaListView.get_queryset(self)
+        pk = self.kwargs.get("pk")
+        employee = Employee.objects.get(id=pk)
+        active_contracts = (
+            employee.contract_set.filter(contract_status="active").first()
+            if apps.is_installed("payroll")
+            else None
+        )
+        basic_pay = active_contracts.wage if active_contracts else None
+        employee_allowances = []
+
+        if basic_pay:
+            specific_allowances = queryset.filter(specific_employees=employee)
+            conditional_allowances = queryset.filter(is_condition_based=True).exclude(
+                exclude_employees=employee
+            )
+            active_employees = queryset.filter(include_active_employees=True).exclude(
+                exclude_employees=employee
+            )
+
+            combined_allowances = (
+                specific_allowances | conditional_allowances | active_employees
+            )
+            combined_allowances = combined_allowances.distinct()
+
+            for allowance in combined_allowances:
+                if allowance.is_condition_based:
+                    condition_field = allowance.field
+                    condition_operator = allowance.condition
+                    condition_value = allowance.value.lower().replace(" ", "_")
+                    employee_value = dynamic_attr(employee, condition_field)
+
+                    operator_func = operator_mapping.get(condition_operator)
+                    if employee_value is not None:
+                        condition_value = type(employee_value)(condition_value)
+                        if operator_func(employee_value, condition_value):
+                            employee_allowances.append(allowance)
+                else:
+                    employee_allowances.append(allowance)
+
+            filtered_allowances = []
+            for allowance in employee_allowances:
+                operator_func = operator_mapping.get(allowance.if_condition)
+                condition_value = basic_pay if allowance.if_choice == "basic_pay" else 0
+                if operator_func(condition_value, allowance.if_amount):
+                    filtered_allowances.append(allowance)
+
+            queryset = queryset.filter(
+                id__in=[allowance.id for allowance in filtered_allowances]
+            )
+        else:
+            queryset = queryset.none()
+
+        return queryset
+
+
+class DeductionTab(DeductionListView):
+    """
+    list view for deduction tab 
+    """
+
+    @method_decorator(login_required, name="dispatch") 
+    def dispatch(self, *args, **kwargs):
+        return super(DeductionListView, self).dispatch(*args, **kwargs)
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.view_id = "deduct-div"
+        pk = self.request.resolver_match.kwargs.get('pk')
+        self.search_url = reverse("deduction-tab-list",kwargs= {'pk': pk} )
+        self.row_status_indications = None
+
+
+
+
+
+    columns = [
+        col for col in DeductionListView.columns
+        if col[1] not in ("specific_employees_col","excluded_employees_col","condition_bsed_col","rate")
+    ]
+
+    # action_method = "deduct_detail_actions"
+
+    template_name = "cbv/allowance_deduction/allowance_deduction.html"
+
+    def get_context_data(self, **kwargs: Any):
+        """
+        Adds employee details, active contracts, and basic pay to the context.
+        """
+
+        context = super().get_context_data(**kwargs)
+        pk = self.kwargs.get("pk")
+        self.request.my_id = pk
+        employee = Employee.objects.get(id=pk)
+        active_contracts = (
+            employee.contract_set.filter(contract_status="active").first()
+            if apps.is_installed("payroll")
+            else None
+        )
+        basic_pay = active_contracts.wage if active_contracts else None
+        context["active_contracts"] = active_contracts
+        context["basic_pay"] = basic_pay
+        # context["search_url"] = (
+        #     f"{reverse('deduction-tab-list', kwargs={'pk': pk})}"
+        # )
+        return context
+
+
+    def get_queryset(self):
+        """
+        Returns a filtered queryset of deductions based on 
+        the employee's active contract and specific conditions
+        """
+
+        queryset = HorillaListView.get_queryset(self)
+        pk = self.kwargs.get("pk")
+        employee = Employee.objects.get(id=pk)
+        active_contracts = (
+            employee.contract_set.filter(contract_status="active").first()
+            if apps.is_installed("payroll")
+            else None
+        )
+        basic_pay = active_contracts.wage if active_contracts else None
+        if basic_pay:
+            specific_deductions = queryset.filter(
+                specific_employees=employee, is_pretax=True, is_tax=False
+            ).distinct()
+            conditional_deduction = (
+                queryset.filter(is_condition_based=True, is_pretax=True, is_tax=False)
+                .exclude(exclude_employees=employee)
+                .distinct()
+            )
+            active_employee_deduction = (
+                queryset.filter(
+                    include_active_employees=True, is_pretax=True, is_tax=False
+                )
+                .exclude(exclude_employees=employee)
+                .distinct()
+            )
+            queryset = (
+                specific_deductions | conditional_deduction | active_employee_deduction
+            )
+
+            filtered_queryset = []
+            for deduction in queryset:
+                if deduction.is_condition_based:
+                    condition_field = deduction.field
+                    condition_operator = deduction.condition
+                    condition_value = deduction.value.lower().replace(" ", "_")
+                    employee_value = dynamic_attr(employee, condition_field)
+                    operator_func = operator_mapping.get(condition_operator)
+
+                    if employee_value is not None and operator_func(
+                        employee_value, type(employee_value)(condition_value)
+                    ):
+                        filtered_queryset.append(deduction)
+                else:
+                    filtered_queryset.append(deduction)
+            queryset = queryset.filter(
+                id__in=[deduction.id for deduction in filtered_queryset]
+            )
+        else:
+            queryset = super().get_queryset().none()
+        return queryset
+
+
+class DeductionDetailView(HorillaDetailedView):
+    """
+    Detail View
+    """
+
+    model = Deduction
+    title = _("Details")
+
+    header = {
+        "title": "title",
+        "subtitle": "Deduction",
+        "avatar": "get_avatar",
+    }
+
+    body = [
+        (_("Tax"), "tax_col", True),
+        (_("One Time deduction"), "get_one_time_deduction"),
+        (_("Condition Based"), "condition_bsed_col"),
+        (_("Amount"), "amount_col"),
+        (_("Has Maximum Limit"), "has_maximum_limit_col"),
+        (_("Deduction Eligibility"), "deduction_eligibility"),
+    ]
+
+    action_method = "deduct_detail_actions"
+
+
+class AllowanceDetailView(HorillaDetailedView):
+    """
+    detail view for allowance tab
+    """
+
+    model = Allowance
+    title = _("Details")
+
+    header = {
+        "title": "title",
+        "subtitle": "",
+        "avatar": "get_avatar",
+    }
+
+    body = [
+        (_("Taxable"), "get_is_taxable_display"),
+        (_("One Time Allowance"), "one_time_date_display"),
+        (_("Condition Based"), "condition_based_display"),
+        (_("Amount"), "based_on_amount"),
+        (_("Has Maximum Limit"), "cust_allowance_max_limit"),
+        (_("Allowance Eligibility"), "allowance_eligibility"),
+    ]
+    
+    action_method = "allowance_detail_actions"
diff --git a/payroll/cbv/allowances.py b/payroll/cbv/allowances.py
new file mode 100644
index 000000000..8d9ca014a
--- /dev/null
+++ b/payroll/cbv/allowances.py
@@ -0,0 +1,364 @@
+"""
+this page handles cbv of allowances page
+"""
+
+from typing import Any
+from django.urls import reverse, reverse_lazy
+from django.utils.translation import gettext_lazy as _
+from django.utils.decorators import method_decorator
+from horilla_views.cbv_methods import login_required, permission_required
+from horilla_views.generic.cbv.views import (
+    HorillaCardView,
+    HorillaDetailedView,
+    HorillaListView,
+    HorillaNavView,
+    TemplateView,
+)
+from payroll.filters import AllowanceFilter
+from payroll.models.models import Allowance
+
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(
+    permission_required(perm="payroll.view_allowance"), name="dispatch"
+)
+class AllowanceViewPage(TemplateView):
+    """
+    for interview page
+    """
+
+    template_name = "cbv/allowances/allowances_home.html"
+
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(
+    permission_required(perm="payroll.view_allowance"), name="dispatch"
+)
+class AllowanceListView(HorillaListView):
+    """
+    list view of the page
+    """
+
+    bulk_update_fields = [
+        "specific_employees",
+        "exclude_employees",
+        "is_taxable",
+        "is_fixed",
+        "amount",
+        "based_on",
+        "rate"
+
+    ]
+
+    model = Allowance
+    filter_class = AllowanceFilter
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.view_id = "allowance_id"
+        self.search_url = reverse("allowances-list-view")
+        if self.request.user.has_perm(
+            "payroll.change_allowance"
+        ) or self.request.user.has_perm("payroll.delete_allowance"):
+            self.action_method = "get_allowance_actions"
+        else:
+            self.action_method = None
+
+    columns = [
+        (_("Allowance"), "title"),
+        (_("Specific Employees"), "get_specific_employees"),
+        (_("Excluded Employees"), "get_exclude_employees"),
+        (_("Is Taxable"), "get_is_taxable_display"),
+        (_("Is Condition Based"), "get_is_condition_based"),
+        (_("Condition"),"condition_based_display"),
+        (_("Is Fixed"), "get_is_fixed"),
+        (_("Amount"), "amount"),
+        (_("Based On"), "get_based_on_display"),
+        (_("Rate"),"rate")
+    ]
+
+    sortby_mapping = [
+        ("Allowance", "title"),
+        ("Specific Employees", "get_specific_employees"),
+        ("Excluded Employees", "get_exclude_employees"),
+        ("Amount", "amount"),
+
+    ]
+
+    header_attrs = {
+        "title": """
+                style="width:200px !important;"
+                """,
+        
+        "get_specific_employees": """
+                                style="width:200px !important;"
+                                """,   
+        "get_exclude_employees": """
+                                style="width:200px !important;"
+                                """,                  
+    }
+
+    row_attrs = """
+                hx-get='{allowance_detail_view}?instance_ids={ordered_ids}'
+                hx-target="#genericModalBody"
+                data-target="#genericModal"
+                data-toggle="oh-modal-toggle"
+                """
+    
+    row_status_class = "taxable-{is_taxable} fixed-{is_fixed}"
+
+    row_status_indications = [
+        (
+            "taxable--dot",
+            _("Taxable"),
+            """
+            onclick="
+                $('#applyFilter').closest('form').find('[name=is_taxable]').val('true');
+                $('[name=is_fixed]').val('unknown');
+                $('#applyFilter').click();
+            "
+            """,
+        ),
+        (
+            "non-taxable--dot",
+            _("Non Taxable"),
+            """
+            onclick="$('#applyFilter').closest('form').find('[name=is_taxable]').val('false');
+            $('[name=is_fixed]').val('unknown');
+            $('#applyFilter').click();
+            "
+            """,
+        ),
+         (
+            "fixed--dot",
+            _("Fixed"),
+            """
+            onclick="$('#applyFilter').closest('form').find('[name=is_fixed]').val('true');
+            $('[name=is_taxable]').val('unknown');
+            $('#applyFilter').click();
+            "
+            """,
+        ),
+         (
+            "not-fixed--dot",
+            _("Not Fixed"),
+            """
+            onclick="$('#applyFilter').closest('form').find('[name=is_fixed]').val('false');
+            $('[name=is_taxable]').val('unknown');
+                $('#applyFilter').click();
+            "
+            """,
+        ),
+    ]
+    
+    def get_context_data(self, **kwargs: Any):
+        context =  super().get_context_data(**kwargs)
+        self.request.allowance_div = "allowance_div"
+        return context
+
+    def get_queryset(self):
+        """
+        Returns a filtered queryset of allowance
+        """
+
+        queryset = super().get_queryset()
+        queryset = queryset.exclude(
+            only_show_under_employee=True
+        )
+
+        return queryset
+    
+
+    
+@method_decorator(login_required, name="dispatch")
+@method_decorator(
+    permission_required(perm="payroll.view_allowance"), name="dispatch"
+)
+class AllowanceNavView(HorillaNavView):
+    """
+    nav bar of the page
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("allowances-list-view")
+
+        self.create_attrs = f"""
+                            href="{reverse_lazy('create-allowance')}"
+                            """
+        
+        self.view_types = [
+                {
+                    "type": "list",
+                    "icon": "list-outline",
+                    "url": reverse("allowances-list-view"),
+                    "attrs" : """
+                            title='List'
+                            """
+                },
+                {
+                    "type": "card",
+                    "icon": "grid-outline",
+                    "url": reverse("allowances-card-view"),
+                    "attrs" : """
+                            title='Card'
+                            """
+                },
+            ]
+
+
+
+    nav_title = _("Allowances")
+    filter_instance = AllowanceFilter()
+    filter_body_template = "cbv/allowances/allowance_filter.html"
+    filter_form_context_name = "form"
+    search_swap_target = "#listContainer"
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(
+    permission_required(perm="payroll.view_allowance"), name="dispatch"
+)
+class AllowancesCardView(HorillaCardView):
+    """
+    card view for the page
+    """
+
+    model = Allowance
+    filter_class = AllowanceFilter
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("allowances-card-view")
+        self.view_id = "allowance_card"
+
+    def get_queryset(self):
+        """
+        Returns a filtered queryset of allowance
+        """
+
+        queryset = super().get_queryset()
+        queryset = queryset.exclude(
+            only_show_under_employee=True
+        )
+
+        return queryset
+    
+    details = {
+        "image_src": "get_avatar",
+        "title": "{title}",
+        "subtitle": "Amount : {based_on_amount} <br> One Time Allowance : {one_time_date_display} <br> Taxable : {get_is_taxable_display}",
+    }
+
+
+    card_attrs = """
+                hx-get='{allowance_detail_view}?instance_ids={ordered_ids}'
+                hx-target="#genericModalBody"
+                data-target="#genericModal"
+                data-toggle="oh-modal-toggle"
+                """
+    
+    card_status_class = "taxable-{is_taxable} fixed-{is_fixed}"
+
+    card_status_indications = [
+        (
+            "taxable--dot",
+            _("Taxable"),
+            """
+            onclick="
+                $('#applyFilter').closest('form').find('[name=is_taxable]').val('true');
+                $('[name=is_fixed]').val('unknown');
+                $('#applyFilter').click();
+            "
+            """,
+        ),
+        (
+            "non-taxable--dot",
+            _("Non Taxable"),
+            """
+            onclick="$('#applyFilter').closest('form').find('[name=is_taxable]').val('false');
+            $('[name=is_fixed]').val('unknown');
+            $('#applyFilter').click();
+            "
+            """,
+        ),
+         (
+            "fixed--dot",
+            _("Fixed"),
+            """
+            onclick="$('#applyFilter').closest('form').find('[name=is_fixed]').val('true');
+            $('[name=is_taxable]').val('unknown');
+            $('#applyFilter').click();
+            "
+            """,
+        ),
+         (
+            "not-fixed--dot",
+            _("Not Fixed"),
+            """
+            onclick="$('#applyFilter').closest('form').find('[name=is_fixed]').val('false');
+            $('[name=is_taxable]').val('unknown');
+                $('#applyFilter').click();
+            "
+            """,
+        ),
+    ]
+
+    actions = [
+        {
+            "action": _("Edit"),
+            "attrs": """
+            class="oh-dropdown__link"
+            onclick="window.location.href='{get_update_url}' "
+            """,
+        },
+        {
+            "action": _("Delete"),
+            "attrs": """
+                    class="oh-dropdown__link"
+                    hx-get="{get_delete_url}?model=payroll.Allowance&pk={pk}"
+                    data-toggle="oh-modal-toggle"
+                    data-target="#deleteConfirmation"
+                    hx-target="#deleteConfirmationBody"
+                """,
+        },
+    ]
+
+
+
+
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(
+    permission_required(perm="payroll.view_allowance"), name="dispatch"
+)
+class AllowanceDetailView(HorillaDetailedView):
+    """
+    detail view for allowances
+    """
+
+    model = Allowance
+    title = _("Details")
+
+    header = {
+        "title": "title",
+        "subtitle": "",
+        "avatar": "get_avatar",
+    }
+
+    body = [
+        (_("Taxable"), "get_is_taxable_display"),
+        (_("One Time Allowance"), "one_time_date_display"),
+        (_("Condition Based"), "condition_based_display"),
+        (_("Amount"), "based_on_amount"),
+        (_("Has Maximum Limit"), "cust_allowance_max_limit"),
+        (_("Allowance Eligibility"), "allowance_eligibility"),
+    ]
+
+    action_method = "allowance_detail_actions"
+
+
+
diff --git a/payroll/cbv/asset_fine.py b/payroll/cbv/asset_fine.py
new file mode 100644
index 000000000..255626f5f
--- /dev/null
+++ b/payroll/cbv/asset_fine.py
@@ -0,0 +1,33 @@
+
+
+import datetime 
+from typing import Any
+from django.apps import apps
+from django import forms
+from django.contrib import messages
+from django.http import HttpResponse
+from employee.models import Employee
+from horilla.methods import get_horilla_model_class
+from horilla_views.generic.cbv.views import HorillaFormView
+from payroll.forms.component_forms import AssetFineForm, LoanAccountForm
+from payroll.models.models import LoanAccount
+from django.utils.translation import gettext_lazy as _
+
+class AssetFineFormView(HorillaFormView):
+    """
+    form view for create asset assign form
+    """
+   
+
+    model = LoanAccount
+    form_class = AssetFineForm
+    new_display_title = _("Asset Fine")
+
+
+    def form_valid(self, form: AssetFineForm) -> HttpResponse:
+        if form.is_valid():
+            form.save()
+            messages.success(self.request, "Asset fine added")
+            return HttpResponse("<script>$('#reloadMessagesButton').click()</script>")
+        return super().form_valid(form)
+
diff --git a/payroll/cbv/contracts.py b/payroll/cbv/contracts.py
new file mode 100644
index 000000000..ab80c71ee
--- /dev/null
+++ b/payroll/cbv/contracts.py
@@ -0,0 +1,258 @@
+"""
+Contracts page
+"""
+
+from typing import Any
+from django.urls import reverse, reverse_lazy
+from django.utils.decorators import method_decorator
+from django.utils.translation import gettext_lazy as _
+from horilla_views.cbv_methods import login_required, permission_required
+from horilla_views.generic.cbv.views import (
+    HorillaDetailedView,
+    HorillaListView,
+    HorillaNavView,
+    TemplateView,
+)
+from payroll.filters import ContractFilter
+from payroll.forms.component_forms import ContractExportFieldForm
+from payroll.models.models import Contract
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(permission_required(perm="payroll.view_contract"), name="dispatch")
+class ContractsView(TemplateView):
+    """
+    Contracts
+    """
+
+    template_name = "cbv/contracts/contracts.html"
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(permission_required(perm="payroll.view_contract"), name="dispatch")
+class ContractsList(HorillaListView):
+    """
+    List view
+    """
+
+    bulk_update_fields = [
+        "contract_start_date",
+        "contract_end_date",
+        "wage_type",
+        "filing_status",
+        "wage",
+        "contract_status"
+
+    ]
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("contract-filter")
+        self.view_id = "contract-container"
+
+    model = Contract
+    filter_class = ContractFilter
+
+    columns = [
+        (_("Contract"), "contract_name"),
+        (_("Employee"), "employee_id"),
+        (_("Start Date"), "contract_start_date"),
+        (_("End Date"), "contract_end_date"),
+        (_("Wage Type"), "get_wage_type_display"),
+        (_("Basic Salary"), "wage"),
+        (_("Filing Status"), "filing_status"),
+        (_("Status"), "status_col"),
+    ]
+
+    header_attrs = {
+        "contract_name" : """
+                          style="width:250px !important;"
+                          """
+    }
+
+    sortby_mapping = [
+        ("Contract", "contract_name"),
+        ("Employee", "employee_id__get_full_name"),
+        ("Start Date", "contract_start_date"),
+        ("End Date", "contract_end_date"),
+        ("Basic Salary", "wage"),
+        ("Status", "status_col")
+    ]
+
+    action_method = "actions_col"
+
+    row_status_indications = [
+        (
+            "terminated--dot",
+            _("Terminated"),
+            """
+            onclick="
+                $('#applyFilter').closest('form').find('[name=contract_status]').val('terminated');
+                $('#applyFilter').click();
+                
+            "
+            """,
+        ),
+        (
+            "expired--dot",
+            _("Expired"),
+            """
+            onclick="
+                $('#applyFilter').closest('form').find('[name=contract_status]').val('expired');
+                $('#applyFilter').click();
+                
+            "
+            """,
+        ),
+        (
+            "draft--dot",
+            _("Draft"),
+            """
+            onclick="
+                $('#applyFilter').closest('form').find('[name=contract_status]').val('draft');
+                $('#applyFilter').click();
+            "
+            """,
+        ),
+        (
+            "active--dot",
+            _("Active"),
+            """
+            onclick="
+                $('#applyFilter').closest('form').find('[name=contract_status]').val('active');
+                $('#applyFilter').click();
+                
+            "
+            """,
+        ),
+    ]
+
+    row_status_class = "status-{contract_status}"
+
+    row_attrs = """
+                hx-get='{contracts_detail}?instance_ids={ordered_ids}'
+                hx-target="#genericModalBody"
+                data-target="#genericModal"
+                data-toggle="oh-modal-toggle"
+                """
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(permission_required(perm="payroll.view_contract"), name="dispatch")
+class ContractsNav(HorillaNavView):
+    """
+    Nav bar
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("contract-filter")
+        self.create_attrs = f"""
+                          href={reverse('contract-create')}  
+                          """
+        self.actions = [
+            {
+                "action": _("Export"),
+                "attrs": f"""
+                        data-toggle="oh-modal-toggle"
+                        data-target="#hxContractExport"
+                        hx-get="{reverse_lazy('contracts-export')}"
+                        hx-target="#hxContractExportForm"
+                        style="cursor: pointer;"
+                        """,
+            },
+            {
+                "action": _("Delete"),
+                "attrs": """
+                    onclick="
+                    DeleteContractBulk();
+                    "
+                    data-action ="delete"
+                    style="cursor: pointer; color:red !important"
+                    """,
+            },
+        ]
+
+    nav_title = _("Contracts")
+    filter_body_template = "cbv/contracts/filter.html"
+    filter_instance = ContractFilter()
+    filter_form_context_name = "form"
+    search_swap_target = "#listContainer"
+
+    group_by_fields = [
+        ("employee_id", _("Employee")),
+        ("employee_id__employee_work_info__job_position_id", _("Job Position")),
+        ("employee_id__employee_work_info__department_id", _("Department")),
+        ("contract_status", _("Status")),
+        ("employee_id__employee_work_info__shift_id", _("Shift")),
+        ("employee_id__employee_work_info__work_type_id", _("Work Type")),
+        ("employee_id__employee_work_info__job_role_id", _("Job Role")),
+        ("employee_id__employee_work_info__reporting_manager_id", _("Reporting Manager")),
+        ("employee_id__employee_work_info__company_id", _("Company")),
+    ]
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(permission_required(perm="payroll.view_contract"), name="dispatch")
+class ContractsExportView(TemplateView):
+    """
+    For contracts export
+    """
+
+    template_name = "cbv/contracts/export.html"
+
+    def get_context_data(self, **kwargs: Any):
+        """
+        Return context data for rendering contract export fields and filters.
+        """
+        context = super().get_context_data(**kwargs)
+        conracts = Contract.objects.all()
+        export_column = ContractExportFieldForm
+        export_filter = ContractFilter(queryset=conracts)
+        context["export_column"] = export_column
+        context["export_filter"] = export_filter
+        return context
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(permission_required(perm="payroll.view_contract"), name="dispatch")
+class ContractsDetailView(HorillaDetailedView):
+    """
+    Detail View
+    """
+
+    def get_context_data(self, **kwargs: Any):
+        """
+        Return context data with the title set to the contract's name.
+        """
+        context = super().get_context_data(**kwargs)
+        contract_name = context["contract"].contract_name
+        context["title"] = contract_name
+        return context
+
+    model = Contract
+    # title = _("Details")
+
+    header = {
+        "title": "employee_id__get_full_name",
+        "subtitle": "conract_subtitle",
+        "avatar": "employee_id__get_avatar",
+    }
+
+    body = [
+        (_("Start Date"), "contract_start_date"),
+        (_("End Date"), "contract_end_date"),
+        (_("Wage Type"), "get_wage_type_display"),
+        (_("Basic Salary"), "wage"),
+        (_("Deduct From Basic Pay"), "deduct_leave_from_basic_pay_col"),
+        (_("Department"), "department"),
+        (_("Job Position"), "job_position"),
+        (_("Job Role"), "job_role"),
+        (_("Shift"), "shift"),
+        (_("Work Type"), "work_type"),
+        (_("Filing Status"), "filing_status"),
+        (_("Pay Frequency"), "get_pay_frequency_display"),
+        (_("Status"), "get_status_display"),
+        (_("Calculate Leave Amount"), "cal_leave_amount", True),
+        (_("Note"), "note_col", True),
+        (_("Document"), "edocument_col", True),
+    ]
+
+    action_method = "detail_action"
diff --git a/payroll/cbv/dashboard.py b/payroll/cbv/dashboard.py
new file mode 100644
index 000000000..f3200f471
--- /dev/null
+++ b/payroll/cbv/dashboard.py
@@ -0,0 +1,174 @@
+"""
+This page handles the cbv methods for payroll dashboard
+"""
+
+from typing import Any
+from django.urls import reverse
+from django.utils import timezone
+from base.filters import DepartmentViewFilter
+from base.models import Department
+from horilla_views.generic.cbv.views import HorillaListView
+from django.db.models import Sum, F, Value
+import calendar
+from django.utils.translation import gettext_lazy as _
+
+from payroll.filters import ContractFilter
+from payroll.models.models import Contract
+
+
+class DashboardDepartmentPayslip(HorillaListView):
+    """
+    list view for total department payslip
+    """
+
+    model = Department
+    filter_class = DepartmentViewFilter
+    show_filter_tags = False
+    bulk_select_option = False
+
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("dashboard-department-chart")
+        self.view_id = "dashboadDepartment"
+
+    def get_queryset(self):
+
+        month_year = self.request.GET.get("monthYearField")
+        current_year = month_year.split("-")[0]
+        current_month = month_year.split("-")[1]
+
+        month_name = calendar.month_name[int(current_month)]
+        queryset = (
+            super()
+            .get_queryset()
+            .filter(
+                employeeworkinformation__employee_id__payslip__start_date__year=current_year,
+                employeeworkinformation__employee_id__payslip__start_date__month=current_month,
+            )
+            .annotate(
+                total_net_pay=Sum(
+                    "employeeworkinformation__employee_id__payslip__net_pay"
+                ),
+                department_id=F("employeeworkinformation__department_id__department"),
+                month=Value(current_month),
+            )
+        )
+        return queryset
+
+    columns = [
+        (_("Department"), "department_id"),
+        (_("Total Net Pay"), "total_net_pay"),
+    ]
+
+    row_attrs = """
+                onclick="window.location.href='/payroll/view-payslip/?department={department_id}&month={month}&department={department_id}'"
+                """
+
+
+class DashboardContractList(HorillaListView):
+    """
+    list view for contract ending this month
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("dashboard-contract-ending")
+
+    model = Contract
+    filter_class = ContractFilter
+    show_filter_tags = None
+    bulk_select_option = False
+    template_name = "cbv/dashboard/contract_ending.html"
+    show_toggle_form = False
+
+    def get_queryset(self):
+        queryset = super().get_queryset()
+        month_year = self.request.GET.get("monthYearField")
+        current_date = timezone.now()
+        current_year = current_date.year
+        current_month = current_date.month
+        year = month_year.split("-")[0]
+        month = month_year.split("-")[1]
+        input_month_year = (int(year), int(month))
+        current_month_year = (current_year, current_month)
+        
+        if input_month_year < current_month_year:
+            month = current_month
+            year = current_year
+        queryset = queryset.filter(
+            contract_end_date__month=int(month), contract_end_date__year=int(year)
+        )
+        return queryset
+
+    columns = [
+        (_("Contract"), "contract_name"),
+         (_("Ending Date"), "contract_end_date"),
+    ]
+
+    header_attrs = {
+        "contract_name" : """
+                              style="width:200px !important;"
+                              """
+    }
+    row_attrs = """
+                hx-get='{contracts_detail}?instance_ids={ordered_ids}'
+                hx-target="#genericModalBody"
+                data-target="#genericModal"
+                data-toggle="oh-modal-toggle"
+                """
+
+
+class DashboardContractListExpired(HorillaListView):
+    """
+    list view for contract ending this month
+    """
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("dashboard-contract-expired")
+
+    model = Contract
+    filter_class = ContractFilter
+    show_filter_tags = None
+    bulk_select_option = False
+    template_name = "cbv/dashboard/contract_expired.html"
+    show_toggle_form = False
+
+    def get_queryset(self):
+        queryset = super().get_queryset()
+        month_year = self.request.GET.get("monthYearField")
+        current_date = timezone.now()
+        current_year = current_date.year
+        current_month = current_date.month
+        year = month_year.split("-")[0]
+        month = month_year.split("-")[1]
+        input_month_year = (int(year), int(month))
+        current_month_year = (current_year, current_month)
+        if input_month_year >= current_month_year:
+           if current_month == 1: 
+                month = 12
+                year = current_year - 1
+           else:
+                month = current_month - 1
+                year = current_year
+        queryset = queryset.filter(
+            contract_end_date__month=int(month), contract_end_date__year=int(year)
+        )
+        return queryset
+
+    columns = [
+        (_("Contract"), "contract_name"),
+         (_("Expired Date"), "contract_end_date"),
+    ]
+
+    header_attrs = {
+        "contract_name" : """
+                              style="width:200px !important;"
+                              """
+    }
+    row_attrs = """
+                hx-get='{contracts_detail}?instance_ids={ordered_ids}'
+                hx-target="#genericModalBody"
+                data-target="#genericModal"
+                data-toggle="oh-modal-toggle"
+                """
diff --git a/payroll/cbv/deduction.py b/payroll/cbv/deduction.py
new file mode 100644
index 000000000..ce1842c16
--- /dev/null
+++ b/payroll/cbv/deduction.py
@@ -0,0 +1,282 @@
+from typing import Any
+
+from django.urls import reverse
+from django.utils.translation import gettext_lazy as _
+from horilla_views.generic.cbv.views import HorillaCardView, HorillaListView, HorillaNavView,TemplateView
+from payroll.filters import DeductionFilter
+from payroll.models.models import Deduction
+from horilla_views.cbv_methods import login_required, permission_required
+from django.utils.decorators import method_decorator
+
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(permission_required(perm="payroll.view_deduction"), name="dispatch")
+class DeductionView(TemplateView):
+
+    template_name = "cbv/deduction/deduction.html"
+
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(permission_required(perm="payroll.view_deduction"), name="dispatch")
+class DeductionNav(HorillaNavView):
+    """
+    Nav bar
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("deduction-view-list")
+        self.create_attrs = f"""
+                          href={reverse('create-deduction')}  
+                          """
+        self.view_types = [
+                {
+                    "type": "list",
+                    "icon": "list-outline",
+                    "url": reverse("deduction-view-list"),
+                    "attrs" : """
+                            title='List'
+                            """
+                },
+                {
+                    "type": "card",
+                    "icon": "grid-outline",
+                    "url": reverse("deduction-view-card"),
+                    "attrs" : """
+                            title='Card'
+                            """
+                },
+            ]
+
+    nav_title = _("Deductions")
+    filter_body_template = "cbv/deduction/filter.html"
+    filter_instance = DeductionFilter()
+    filter_form_context_name = "form"
+    search_swap_target = "#listContainer"
+
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(permission_required(perm="payroll.view_deduction"), name="dispatch")
+class DeductionListView(HorillaListView):
+    """
+    list view for deduction tab
+    """
+
+    model = Deduction
+    filter_class = DeductionFilter
+
+    bulk_update_fields = [
+        "specific_employees",
+        "exclude_employees",
+        "is_pretax",
+        "is_fixed",
+        "amount",
+        "based_on",
+        "rate"
+    ]
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.view_id = "deduct-container"
+        if self.request.user.has_perm(
+            "payroll.change_deduction"
+        ) or self.request.user.has_perm("payroll.change_deduction"):
+            self.action_method = "deduct_actions"
+        else:
+            self.action_method = None
+        self.search_url = reverse("deduction-view-list")
+
+
+    row_attrs = """
+                {diff_cell}
+                hx-get='{deduction_detail_view}?instance_ids={ordered_ids}'
+                hx-target="#genericModalBody"
+                data-target="#genericModal"
+                data-toggle="oh-modal-toggle"
+                """
+    
+    row_status_indications = [
+        (
+            "pretax--dot",
+            _("Pretax"),
+            """
+            onclick="
+                $('#applyFilter').closest('form').find('[name=is_pretax]').val('true');
+                $('[name=is_fixed]').val('unknown').change();
+                $('#applyFilter').click();
+            "
+            """,
+        ),
+        (
+            "fixed--dot",
+            _("Fixed"),
+            """
+            onclick="
+                $('#applyFilter').closest('form').find('[name=is_fixed]').val('true');
+                $('[name=is_pretax]').val('unknown').change();
+                $('#applyFilter').click();
+                
+            "
+            """,
+        ),
+        (
+            "not-fixed--dot",
+            _("Not Fixed"),
+            """
+            onclick="
+                $('#applyFilter').closest('form').find('[name=is_fixed]').val('false');
+                $('[name=is_pretax]').val('unknown').change();
+                $('#applyFilter').click();
+                
+            "
+            """,
+        ),
+    ]
+
+    # row_status_class = "pretax-{is_pretax} fixed-{is_fixed}"
+
+    columns = [
+        (_("Deduction"), "title"),
+        (_("Specific Employees"),"specific_employees_col"),
+        (_("Excluded Employees"),"excluded_employees_col"),
+        (_("Is Pretax"), "get_is_pretax_display"),
+        (_("Is Condition Based"), "get_is_condition_based_display"),
+        (_("Condition"),"condition_bsed_col"),
+        (_("Is Fixed"), "get_is_fixed_display"),
+        (_("Amount"), "amount"),
+        (_("Based On"), "get_based_on_display"),
+        (_("Rate"),"rate")
+    ]
+
+    header_attrs = {
+        "title" : """
+                  style="width:180px !important;
+                  """,
+        "excluded_employees_col" : """
+                  style="width:180px !important;
+                  """
+    }
+
+    sortby_mapping = [
+        ("Deduction", "title"),
+        ("Specific Employees","specific_employees_col"),
+        ("Excluded Employees","excluded_employees_col"),
+        ("Amount", "amount"),
+
+    ]
+
+    def get_queryset(self):
+        queryset = super().get_queryset()
+        # queryset = queryset.exclude(only_show_under_employee=True)
+        return queryset.exclude(only_show_under_employee=True)
+    
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(permission_required(perm="payroll.view_deduction"), name="dispatch")
+class DeductionCardView(HorillaCardView):
+    """
+    card view
+    """
+
+    model = Deduction
+    filter_class = DeductionFilter
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.view_id = "deduct-container"
+        # if self.request.user.has_perm(
+        #     "payroll.change_deduction"
+        # ) or self.request.user.has_perm("payroll.change_deduction"):
+        #     self.action_method = "deduct_actions"
+        # else:
+        #     self.action_method = None
+        # self.search_url = reverse("deduction-view-card")
+
+    def get_queryset(self):
+        queryset = super().get_queryset()
+        queryset = queryset.exclude(only_show_under_employee=True)
+        return queryset
+
+    details = {
+        "image_src": "get_avatar",
+        "title": "{title}",
+        "subtitle": "Amount : <br> {amount_col} <br> Is Pretax : {get_is_pretax_display} <br> One Time deduction : {get_one_time_deduction}",
+        
+    }
+
+    card_status_indications = [
+        (
+            "pretax--dot",
+            _("Pretax"),
+            """
+            onclick="
+                $('#applyFilter').closest('form').find('[name=is_pretax]').val('true');
+                $('[name=is_fixed]').val('unknown').change();
+                $('#applyFilter').click();
+            "
+            """,
+        ),
+        (
+            "fixed--dot",
+            _("Fixed"),
+            """
+            onclick="
+                $('#applyFilter').closest('form').find('[name=is_fixed]').val('true');
+                $('[name=is_pretax]').val('unknown').change();
+                $('#applyFilter').click();
+                
+            "
+            """,
+        ),
+        (
+            "not-fixed--dot",
+            _("Not Fixed"),
+            """
+            onclick="
+                $('#applyFilter').closest('form').find('[name=is_fixed]').val('false');
+                $('[name=is_pretax]').val('unknown').change();
+                $('#applyFilter').click();
+                
+            "
+            """,
+        ),
+    ]
+
+ 
+    card_attrs = """
+                hx-get='{deduction_detail_view}?instance_ids={ordered_ids}'
+                data-toggle="oh-modal-toggle"
+                data-target="#genericModal"
+                hx-target="#genericModalBody"
+                """
+
+
+    actions = [
+        {
+            "action": _("Edit"),
+            "attrs": """
+            class="oh-dropdown__link"
+            onclick="window.location.href='{get_update_url}' "
+            """,
+        },
+        {
+            "action": _("Delete"),
+            "attrs": """
+                    onclick="event.stopPropagation()"
+                    hx-get="{get_delete_url}?model=payroll.Deduction&pk={pk}"
+                    data-toggle="oh-modal-toggle" 
+                    data-target="#deleteConfirmation"
+                    hx-target="#deleteConfirmationBody"
+                    class="oh-dropdown__link"
+                    style="cursor: pointer;"
+
+                    """,
+        },
+    ]
+
+    records_per_page = 10
+
diff --git a/payroll/cbv/federal_tax.py b/payroll/cbv/federal_tax.py
new file mode 100644
index 000000000..cfe59dfd8
--- /dev/null
+++ b/payroll/cbv/federal_tax.py
@@ -0,0 +1,102 @@
+"""
+This page handles the cbv methods for federal tax
+"""
+
+import math
+from typing import Any
+from django import forms
+from django.template.loader import render_to_string
+from django.contrib import messages
+from django.http import HttpResponse
+from django.urls import reverse
+from django.utils.decorators import method_decorator
+from django.utils.translation import gettext_lazy as _
+from horilla_views.generic.cbv.views import HorillaFormView
+from horilla_views.cbv_methods import login_required, permission_required
+from base.models import Holidays
+from payroll.forms.tax_forms import FilingStatusForm, TaxBracketForm
+from payroll.models.models import FilingStatus
+from payroll.models.tax_models import TaxBracket
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(permission_required("payroll.add_filingstatus"),name="dispatch")
+class FederalTaxFormView(HorillaFormView):
+    """
+    form view for create button
+    """
+
+    form_class = FilingStatusForm
+    model = FilingStatus
+    template_name = "cbv/federal_tax/form_inherit.html"
+    new_display_title = _("Create Filing Status")
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        if self.form.instance.pk:
+            self.form_class.verbose_name = _("Update Filing Status")
+
+        return context
+
+    def form_valid(self, form: FilingStatusForm) -> HttpResponse:
+        if form.is_valid():
+            if form.instance.pk:
+                message = _("Filing Status Updated Successfully")
+            else:
+                message = _("Filing StatusCreated Successfully")
+            form.save()
+
+            messages.success(self.request, _(message))
+            return self.HttpResponse("<script>location.reload();</script>")
+        return super().form_valid(form)
+    
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(permission_required("payroll.add_taxbracket"),name="dispatch")
+class TaxBracketCreateForm(HorillaFormView):
+    """
+    from view for create and edit tax brackets
+    """
+
+    model = TaxBracket
+    form_class = TaxBracketForm
+    new_display_title = _("Create Tax Bracket")
+
+    def get_context_data(self, **kwargs):
+        context =  super().get_context_data(**kwargs)
+        if self.form.instance.pk:
+            tax_bracket = TaxBracket.find(self.form.instance.pk)
+            filing_status_id = tax_bracket.filing_status_id.id
+            self.form_class.verbose_name = _("Update Tax Bracket")
+        else:
+            filing_status_id = self.kwargs.get("filing_status_id")
+            filling = FilingStatus.objects.get(id=filing_status_id)
+            self.form.fields["filing_status_id"].initial = filling
+            context['is_create'] = True
+
+        
+        context["form"] = self.form
+        return context
+    
+
+
+    def form_valid(self, form: TaxBracketForm) -> HttpResponse:
+        if form.is_valid():
+            max_income = self.form.cleaned_data.get("max_income")
+            if not max_income:
+                messages.info(self.request, _("The maximum income will be infinite"))
+                self.form.instance.max_income = math.inf
+            if form.instance.pk:
+                messages.success(self.request,_("The tax bracket has been updated successfully."))
+            else:
+                messages.success(self.request,_("The tax bracket was created successfully."))
+            filing_status_id = self.form.cleaned_data.get("filing_status_id")
+            context = {"filing_status_id":filing_status_id.id,"form_instance":form.instance.pk}
+            template = "cbv/federal_tax/tax_bracket.html"
+            html = render_to_string(template,context)
+            form.save()
+            return HttpResponse(html)
+        return super().form_valid(form)
+
+
+
diff --git a/payroll/cbv/loan_advance_salary.py b/payroll/cbv/loan_advance_salary.py
new file mode 100644
index 000000000..f792cde75
--- /dev/null
+++ b/payroll/cbv/loan_advance_salary.py
@@ -0,0 +1,226 @@
+"""
+this page is handling the cbv methods of loan/advanced salary page
+"""
+
+
+from typing import Any
+from django.http import HttpResponse
+from django.urls import reverse, reverse_lazy
+from django.contrib import messages
+from django.utils.translation import gettext_lazy as _
+from django.utils.decorators import method_decorator
+from horilla_views.generic.cbv.views import (
+    HorillaDetailedView,
+    HorillaListView,
+    HorillaNavView,
+    HorillaTabView,
+    TemplateView,
+    HorillaFormView,
+)
+from horilla_views.cbv_methods import login_required, permission_required
+from payroll.filters import LoanAccountFilter
+from payroll.forms.component_forms import LoanAccountForm
+from payroll.models.models import LoanAccount
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(permission_required("payroll.view_loanaccount"), name="dispatch")
+class AdvanceSalaryView(TemplateView):
+    """
+    for loan/advance salary page
+    """
+
+    template_name = "cbv/loan/loan_main.html"
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(permission_required("payroll.view_loanaccount"), name="dispatch")
+class LoansGenericTab(HorillaTabView):
+    """
+    Tab view for loans/advanced salary
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.tabs = [
+            {
+                "title": _("Loan"),
+                "url": f"{reverse('loan-tab-list-view')}",
+            },
+            {
+                "title": _("Advanced Salary"),
+                "url": f"{reverse('advanced-salary-list-view')}",
+            },
+            {
+                "title": _("Fine"),
+                "url": f"{reverse('fines-list-view')}",
+            },
+        ]
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(permission_required("payroll.view_loanaccount"), name="dispatch")
+class LoanListView(HorillaListView):
+    """
+    List view for loan tab
+    """
+
+    bulk_update_fields = [
+        "provided_date",
+        "installment_start_date",
+    ]
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("loan-tab-list-view")
+
+    def get_queryset(self):
+        """
+        queryset for rendering loan data only
+        """
+        queryset = super().get_queryset()
+        queryset = queryset.filter(type="loan")
+        return queryset
+
+    filter_class = LoanAccountFilter
+    model = LoanAccount
+
+    columns = [
+        (_("Employee"), "employee_id", "employee_id__get_avatar"),
+        (_("Title"), "title"),
+        (_("Provided Date"), "provided_date"),
+        (_("Installment Start Date"), "installment_start_date"),
+        (_("Toatal Installments"), "installments"),
+        (_("Amount"), "loan_amount"),
+        (_("Description"), "description"),
+        (_("Progress Bar"),"progress_bar_col")
+    ]
+
+    sortby_mapping = [
+        ("Employee", "employee_id__get_full_name", "employee_id__get_avatar"),
+        ("Provided Date", "provided_date"),
+        ("Installment Start Date", "installment_start_date"),
+        ("Toatal Installments", "installments"),
+        ("Amount", "loan_amount"),
+    ]
+
+    action_method = "loan_actions"
+
+    row_attrs = """
+                hx-get='{loan_detail_view}?instance_ids={ordered_ids}'
+                hx-target="#genericModalBody"
+                data-target="#genericModal"
+                data-toggle="oh-modal-toggle"
+                """
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(permission_required("payroll.view_loanaccount"), name="dispatch")
+class AdvancedSalaryList(LoanListView):
+    """
+    List view for advanced salary
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("advanced-salary-list-view")
+
+    def get_queryset(self):
+        queryset = HorillaListView.get_queryset(self)
+        queryset = queryset.filter(type="advanced_salary")
+        return queryset
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(permission_required("payroll.view_loanaccount"), name="dispatch")
+class FinesListView(LoanListView):
+    """
+    List view for fines tab
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("fines-list-view")
+
+    def get_queryset(self):
+        queryset = HorillaListView.get_queryset(self)
+        queryset = queryset.filter(type="fine")
+        return queryset
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(permission_required("payroll.view_loanaccount"), name="dispatch")
+class LoanNavView(HorillaNavView):
+    """
+    Navbar for the laons/advance salary
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("loan-generic-tab-view")
+
+        self.create_attrs = f"""
+             hx-get="{reverse_lazy("loan-create-form")}"
+             hx-target="#genericModalBody"
+             data-target="#genericModal"
+             data-toggle="oh-modal-toggle"
+         """
+
+
+    nav_title = _("Loan / Advanced Salary")
+    filter_body_template = "cbv/loan/loan_filter.html"
+    filter_instance = LoanAccountFilter()
+    filter_form_context_name = "form"
+    search_swap_target = "#listContainer"
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(permission_required("payroll.view_loanaccount"), name="dispatch")
+class LoanDetailView(HorillaDetailedView):
+    """
+    detail view for the loan page
+    """
+
+    model = LoanAccount
+    template_name = "cbv/loan/loan_detail_view.html"
+
+    def get_context_data(self, **kwargs: Any):
+        context = super().get_context_data(**kwargs)
+        pk = self.kwargs.get("pk")
+        loan = LoanAccount.objects.get(id=pk)
+        installments = loan.deduction_ids.all()
+        loan_id = self.request.GET.get("loan_id")
+        ded_id = self.request.GET.get("ded_id")
+        context["loan"] = loan
+        context["loan_id"] = loan_id
+        context["ded_id"] = ded_id
+        context["installments"] = installments
+        return context
+    
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(permission_required("payroll.view_loanaccount"), name="dispatch")
+class LoanFormView(HorillaFormView):
+    """
+    form view for create and edit loans
+    """
+
+    form_class = LoanAccountForm
+    model = LoanAccount
+    new_display_title = _("Loan / Advanced Sarlary")
+
+    def form_valid(self, form: LoanAccountForm) -> HttpResponse:
+        if form.is_valid():
+            if form.instance.pk:
+                message = _("Loan Updated Successfully")
+            else:
+                message = _("New Loan Created Successfully")
+            form.save()
+
+            messages.success(self.request, _(message))
+            return self.HttpResponse(
+                "<script>$('#reloadMessagesButton').click();</script>"
+            )
+        return super().form_valid(form)
+
diff --git a/payroll/cbv/payslip.py b/payroll/cbv/payslip.py
new file mode 100644
index 000000000..ce0464135
--- /dev/null
+++ b/payroll/cbv/payslip.py
@@ -0,0 +1,415 @@
+"""
+this page handles cbv methods of payslip page
+"""
+
+import json
+from typing import Any
+from django.http import HttpResponse
+from django.shortcuts import render
+from django.urls import reverse
+from django.contrib import messages
+from django.utils.translation import gettext_lazy as _
+from django.utils.decorators import method_decorator
+from employee.cbv.employee_profile import EmployeeProfileView
+from employee import views as employee_view
+from horilla_views.cbv_methods import login_required, permission_required
+from horilla_views.generic.cbv.views import (
+    HorillaListView,
+    HorillaNavView,
+    TemplateView,
+    HorillaFormView,
+)
+from notifications.signals import notify
+from payroll.cbv.allowance_deduction import AllowanceDeductionTabView
+from payroll.forms import component_forms as forms
+from payroll.filters import PayslipFilter
+from payroll.methods.methods import calculate_employer_contribution, save_payslip
+from payroll.models.models import Contract, Payslip
+from payroll.views.component_views import payroll_calculation
+
+
+
+@method_decorator(login_required, name="dispatch")
+class PayslipView(TemplateView):
+    """
+    payslip page
+    """
+
+    def get_context_data(self, **kwargs: Any):
+        """
+        Return context for rendering payslip generation forms.
+        """
+        form = forms.GeneratePayslipForm()
+        individual_form = forms.PayslipForm()
+        bulk_form = forms.GeneratePayslipForm()
+        group_name = form["group_name"]
+        context = super().get_context_data(**kwargs)
+        context["individual_form"] = individual_form
+        context["group_name"] = group_name
+        context["bulk_form"] = bulk_form
+        return context
+
+    template_name = "cbv/payslip/payslip_home.html"
+
+
+@method_decorator(login_required, name="dispatch")
+class PayslipList(HorillaListView):
+    """
+    list view
+    """
+    selected_instances_key_id = "selectedInstances"
+    bulk_update_fields = [
+        "status",
+        "start_date",
+        "end_date",
+        
+    ]
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("payslip-list")
+        self.view_id = "payslip-div"
+
+    def get_queryset(self):
+        """
+        Return the queryset of Payslip objects based on user permissions.
+        """
+        queryset = super().get_queryset()
+        if not self.request.user.has_perm("payroll.view_payslip"):
+            queryset = queryset.filter(employee_id__employee_user_id=self.request.user)
+        return queryset
+
+    model = Payslip
+    filter_class = PayslipFilter
+    columns = [
+        (_("Employee"), "employee_id", "employee_id__get_avatar"),
+        (_("Start date"), "start_date"),
+        (_("End Date"), "end_date"),
+        (_("Batch"), "group_name"),
+        (_("Gross Pay"), "gross_pay_display"),
+        (_("Deduction"), "deduction_display"),
+        (_("Net Pay"), "net_pay_display"),
+        (_("Status"), "custom_status_col"),
+    ]
+
+    sortby_mapping = [
+        ("Employee", "employee_id__get_full_name", "employee_id__get_avatar"),
+        ("Start date", "start_date"),
+        ("End Date", "end_date"),
+        ("Gross Pay", "gross_pay_display"),
+        ("Deduction", "deduction_display"),
+        ("Net Pay", "net_pay_display"),
+        ("Status", "custom_status_col")
+    ]
+    records_per_page = 5
+    action_method = "custom_actions_col"
+
+    row_status_indications = [
+        (
+            "draft--dot",
+            _("Draft"),
+            """
+            onclick="
+            $('#applyFilter').closest('form').find('[name=status]').val('draft');
+            $('[name=review_ongoing]').val('unknown').change();
+            $('[name=confirmed]').val('unknown').change();
+            $('[name=paid]').val('unknown').change();
+            $('#applyFilter').click();
+            "
+            """,
+        ),
+        (
+            "review_ongoing--dot",
+            _("Review Ongoing"),
+            """
+            onclick="
+            $('#applyFilter').closest('form').find('[name=status]').val('review_ongoing');
+            $('[name=draft]').val('unknown').change();
+            $('[name=confirmed]').val('unknown').change();
+            $('[name=paid]').val('unknown').change();
+            $('#applyFilter').click();
+            "
+            """,
+        ),
+        (
+            "confirmed--dot",
+            _("Confirmed"),
+            """
+            onclick="
+            $('#applyFilter').closest('form').find('[name=status]').val('confirmed');
+            $('[name=draft]').val('unknown').change();
+            $('[name=review_ongoing]').val('unknown').change();
+            $('[name=paid]').val('unknown').change();
+            $('#applyFilter').click();
+            "
+            """,
+        ),
+        (
+            "paid--dot",
+            _("Paid"),
+            """
+            onclick="
+            $('#applyFilter').closest('form').find('[name=status]').val('paid');
+            $('[name=draft]').val('unknown').change();
+            $('[name=review_ongoing]').val('unknown').change();
+            $('[name=confirmed]').val('unknown').change();
+            $('#applyFilter').click();
+            "
+            """,
+        ),
+    ]
+
+    row_attrs = """
+   
+                onclick="
+                event.stopPropagation();
+                window.location.href='{get_individual_payslip}'"
+                
+                """
+
+    row_status_class = "status-{status} sent_to_employee-{sent_to_employee}"
+
+
+@method_decorator(login_required, name="dispatch")
+class PayslipNav(HorillaNavView):
+    """
+    navbar
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("payslip-list")
+        if self.request.user.has_perm("payroll.add_payslip"):
+            self.create_attrs = f"""
+                data-target="#genericModal"
+                data-toggle="oh-modal-toggle"
+                hx-get="{reverse('payroll-create-form-view')}"
+                hx-target="#genericModalBody"
+            """
+
+            self.actions = [
+                {
+                    "action": _("Generate"),
+                    "attrs": """
+                    data-toggle = "oh-modal-toggle"
+                    data-target = "#bulkPayslipModal"
+                    style="cursor: pointer;"
+                """,
+                },
+                {
+                    "action": _("Payslip Report"),
+                    "attrs": f"""
+                            data-toggle = "oh-modal-toggle"
+                            data-target = "#genericModal"
+                            hx-target="#genericModalBody"
+                            hx-get ="{reverse('payslip-detailed-export')}"
+                            style="cursor: pointer;"
+                """,
+                },
+                {
+                    "action": _("Send Via Mail"),
+                    "attrs": """
+                   onclick="bulkSendViaMail()"
+                    style="cursor: pointer;"
+                """,
+                },
+                
+                {
+                    "action": _("Export"),
+                    "attrs": f"""
+                    data-toggle = "oh-modal-toggle"
+                    data-target = "#payslipExport"
+                    hx-target="#payslipExportForm"
+                    hx-get ="{reverse('payslip-bulk-export-data')}"
+                    style="cursor: pointer;"
+                """,
+                },
+                {
+                    "action": _("Delete"),
+                    "attrs": """
+                            onclick="payslipBulkDelete()"
+                            data-action ="delete"
+                            style="cursor: pointer; color:red !important"
+                             """,
+                },
+            ]
+        else:
+            self.create_attrs = None
+            self.actions = None
+
+    nav_title = _("Payslip")
+    filter_body_template = "cbv/payslip/payslip_filter.html"
+    filter_instance = PayslipFilter()
+    filter_form_context_name = "form"
+    search_swap_target = "#listContainer"
+
+    group_by_fields = [
+        ("employee_id", _("Employee")),
+        ("group_name", _("Pay Slip Batch")),
+        ("start_date", _("Start date")),
+        ("end_date", _("End Date")),
+        ("basic_pay", _("Basic Pay")),
+        ("gross_pay", _("Gross Pay")),
+        ("net_pay", _("Net Pay")),
+        ("status", _("Status")),
+        ("employee_id__employee_work_info__department_id", _("Department")),
+        ("employee_id__employee_work_info__job_position_id", _("Job Position")),
+        ("employee_id__employee_work_info__job_role_id", _("Job Role")),
+        ("employee_id__employee_work_info__company_id", _("Company")),
+    ]
+
+@method_decorator(login_required, name="dispatch")
+class PayslipBulkExport(TemplateView):
+    """
+    bulk export
+    """
+
+    template_name = "cbv/payslip/payslip_export.html"
+
+    def get_context_data(self, **kwargs: Any):
+        """
+        Override the get_context_data method to add Payslip export related data to the context
+        Args:
+            **kwargs (Dict[str, Any]): Keyword arguments passed to the method
+        Returns:
+            Dict[str, Any]: Updated context dictionary containing export form and filter.
+        """
+        payslip = Payslip.objects.all()
+        export_column = forms.PayslipExportColumnForm
+        export_filter = PayslipFilter(queryset=payslip)
+        context = super().get_context_data(**kwargs)
+        context["export_column"] = export_column
+        context["export_filter"] = export_filter
+        return context
+
+
+@method_decorator(permission_required("payroll.add_payslip"), name="dispatch")
+@method_decorator(login_required, name="dispatch")
+class PayrollCreateFormView(HorillaFormView):
+    """
+    form view for creating payslip
+    """
+
+    model = Payslip
+    form_class = forms.PayslipForm
+    new_display_title = _("Create Payslip")
+    template_name = "cbv/payslip/payslip_inherit_form.html"
+
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        context["view_id"] = "payslipCreate"
+
+        return context
+
+    def form_invalid(self, form: Any) -> HttpResponse:
+        """
+        form invalid function
+        """
+        if not form.is_valid():
+            errors = form.errors.as_data()
+            return render(
+                self.request, self.template_name, {"form": form, "errors": errors}
+            )
+        return super().form_invalid(form)
+
+    def form_valid(self, form: forms.PayslipForm) -> HttpResponse:
+        """
+        form valid function
+        """
+        if form.is_valid():
+            employee = form.cleaned_data["employee_id"]
+            start_date = form.cleaned_data["start_date"]
+            end_date = form.cleaned_data["end_date"]
+            payslip = Payslip.objects.filter(
+                employee_id=employee, start_date=start_date, end_date=end_date
+            ).first()
+            contract = Contract.objects.filter(
+                employee_id=employee, contract_status="active"
+            ).first()
+            if start_date < contract.contract_start_date:
+                start_date = contract.contract_start_date
+            payslip_data = payroll_calculation(employee, start_date, end_date)
+            payslip_data["payslip"] = payslip
+            data = {}
+            data["employee"] = employee
+            data["start_date"] = payslip_data["start_date"]
+            data["end_date"] = payslip_data["end_date"]
+            data["status"] = (
+                "draft"
+                if self.request.GET.get("status") is None
+                else self.request.GET["status"]
+            )
+            data["contract_wage"] = payslip_data["contract_wage"]
+            data["basic_pay"] = payslip_data["basic_pay"]
+            data["gross_pay"] = payslip_data["gross_pay"]
+            data["deduction"] = payslip_data["total_deductions"]
+            data["net_pay"] = payslip_data["net_pay"]
+            data["pay_data"] = json.loads(payslip_data["json_data"])
+            calculate_employer_contribution(data)
+            data["installments"] = payslip_data["installments"]
+            payslip_data["instance"] = save_payslip(**data)
+            form = forms.PayslipForm()
+            messages.success(self.request, _("Payslip Saved"))
+            payslip = payslip_data["instance"]
+            notify.send(
+                self.request.user.employee_get,
+                recipient=employee.employee_user_id,
+                verb="Payslip has been generated for you.",
+                verb_ar="تم إصدار كشف راتب لك.",
+                verb_de="Gehaltsabrechnung wurde für Sie erstellt.",
+                verb_es="Se ha generado la nómina para usted.",
+                verb_fr="La fiche de paie a été générée pour vous.",
+                redirect=reverse(
+                    "view-created-payslip", kwargs={"payslip_id": payslip.pk}
+                ),
+                icon="close",
+            )
+            # form.save()
+            return self.HttpResponse()
+        return super().form_valid(form)
+
+
+class PayrollTab(PayslipList):
+    """
+    class for rendering payroll tab in employee profile
+    """
+
+    records_per_page = 3
+
+    def get_queryset(self):
+        queryset = super().get_queryset()
+        pk = self.kwargs.get("pk")
+        queryset = queryset.filter(employee_id=pk)
+        return queryset
+    
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        pk = self.request.resolver_match.kwargs.get("pk")
+        self.search_url = reverse("individual-payslip-tab-list",kwargs={'pk':pk})
+
+    columns = [col for col in PayslipList.columns if col[0] != _("Status")]
+    columns.append((_("Status"), "get_status"))
+
+    action_method = "get_download_url"
+
+
+EmployeeProfileView.add_tab(
+    tabs=[
+        {
+            "title": "Payroll",
+            "view": PayrollTab.as_view(),
+            "accessibility": "payroll.cbv.accessibility.payroll_accessibility",
+        },
+        {
+            "title": "Allowance & Deduction",
+            "view": AllowanceDeductionTabView.as_view(),
+            # "view": views.allowances_deductions_tab,
+            "accessibility": "payroll.cbv.accessibility.allowance_and_deduction_accessibility",
+        },
+        {
+            "title": "Bonus Points",
+            "view": employee_view.bonus_points_tab,
+            "accessibility": "payroll.cbv.accessibility.bonus_accessibility",
+        },
+    ]
+)
diff --git a/payroll/cbv/payslip_automation.py b/payroll/cbv/payslip_automation.py
new file mode 100644
index 000000000..32049d2b6
--- /dev/null
+++ b/payroll/cbv/payslip_automation.py
@@ -0,0 +1,193 @@
+"""
+This page is handle the payslip automation page in settings.
+"""
+
+from typing import Any
+from django.http import HttpResponse, HttpResponseRedirect
+from django.shortcuts import get_object_or_404
+from django.utils.translation import gettext_lazy as _
+from django.utils.decorators import method_decorator
+from django.urls import reverse
+from django.contrib import messages
+from django.views import View
+from horilla_views.cbv_methods import login_required, permission_required
+from horilla_views.generic.cbv.views import (
+    HorillaFormView,
+    HorillaListView,
+    HorillaNavView,
+)
+from payroll.filters import PayslipAutoGenerateFilter
+from payroll.forms.component_forms import PayslipAutoGenerateForm
+from payroll.models.models import PayslipAutoGenerate
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(
+    permission_required(perm="payroll.view_PayslipAutoGenerate"), name="dispatch"
+)
+class PaySlipAutomationListView(HorillaListView):
+    """
+    List view of the page
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+
+        # self.action_method = "actions_col"
+        self.view_id = "pay_slip_id"
+        self.search_url = reverse("pay-slip-automation-list")
+
+    model = PayslipAutoGenerate
+    filter_class = PayslipAutoGenerateFilter
+
+    columns = [
+        (_("Payslip creation date"), "get_generate_day_display"),
+        (_("Company"), "get_company"),
+        (_("Is active"), "is_active_col"),
+    ]
+
+    header_attrs = {
+        "get_generate_day_display" : """
+                   style = "width:200px !important"
+                   """,
+       
+    }
+
+    actions = [
+        {
+            "action": "Edit",
+            "icon": "create-outline",
+            "attrs": """
+                    class="oh-btn oh-btn--light-bkg w-50"
+                    hx-get="{get_update_url}?instance_ids={ordered_ids}"
+                    hx-target="#genericModalBody"
+                    data-toggle="oh-modal-toggle"
+                    data-target="#genericModal"
+                    """,
+        },
+        {
+            "action": "Delete",
+            "icon": "trash-outline",
+            "attrs": """
+                    class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-50"
+                    hx-confirm="Are you sure you want to delete this payslip auto generate?"
+                    hx-target="#autoPayslipTr{get_instance_id}"
+                    hx-post="{get_delete_url}"
+                    hx-swap="delete"
+                    """,
+        },
+    ]
+
+    row_attrs = """
+                id = "autoPayslipTr{get_instance_id}"
+                """
+
+
+#   onclick = "deleteItem({get_delete_url})"
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(
+    permission_required(perm="payroll.view_PayslipAutoGenerate"), name="dispatch"
+)
+class PaySlipAutomationNav(HorillaNavView):
+    """
+    Nav bar
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("pay-slip-automation-list")
+        self.create_attrs = f"""
+                            onclick = "event.stopPropagation();"
+                            data-toggle="oh-modal-toggle"
+                            data-target="#genericModal"
+                            hx-target="#genericModalBody"
+                            hx-get="{reverse('pay-slip-automation-create')}"
+                            """
+
+    nav_title = _("Payslip Automation")
+    filter_instance = PayslipAutoGenerateFilter()
+    search_swap_target = "#listContainer"
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(
+    permission_required(perm="payroll.change_PayslipAutoGenerate"), name="dispatch"
+)
+class PaySlipAutomationFormView(HorillaFormView):
+    """
+    Create and edit form
+    """
+
+    model = PayslipAutoGenerate
+    form_class = PayslipAutoGenerateForm
+    new_display_title = _("Create Auto Payslip Generate")
+
+    def get_context_data(self, **kwargs):
+        """
+        Get context data for rendering the form view.
+        """
+        context = super().get_context_data(**kwargs)
+        if self.form.instance.pk:
+            self.form_class.verbose_name = _("Update Auto Payslip Generate")
+        return context
+
+    def form_valid(self, form: PayslipAutoGenerateForm) -> HttpResponse:
+        """
+        Handle a valid form submission.
+
+        If the form is valid, save the instance and display a success message.
+        """
+        company = (
+            self.form.instance.company_id
+            if self.form.instance.company_id
+            else "All company"
+        )
+        if form.is_valid():
+            if form.instance.pk:
+                message = _(
+                    f"Payslip Auto generate for {company} created successfully "
+                )
+            else:
+                message = _(
+                    f"Payslip Auto generate for {company} created successfully "
+                )
+            form.save()
+            messages.success(self.request, message)
+            return self.HttpResponse()
+        return super().form_valid(form)
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(
+    permission_required(perm="payroll.delete_PayslipAutoGenerate"), name="dispatch"
+)
+class DeleteAutoPayslipView(View):
+    """
+    Handles deletion of a PayslipAutoGenerate object.
+
+    Deletes the object if 'auto_generate' is False, else shows a message.
+    Redirects to the referring page or root URL.
+    """
+
+    def post(self, request, auto_id):
+        """
+        Deletes the PayslipAutoGenerate object and redirects.
+        """
+        auto_payslip = get_object_or_404(PayslipAutoGenerate, id=auto_id)
+        if not auto_payslip.auto_generate:
+            company = (
+                auto_payslip.company_id
+                if auto_payslip.company_id
+                else _("All companies")
+            )
+            auto_payslip.delete()
+            messages.success(
+                request,
+                _(f"Payslip auto generate for {company} deleted successfully."),
+            )
+        else:
+            messages.info(
+                request, _("Active 'Payslip auto generate' cannot be deleted.")
+            )
+        return HttpResponseRedirect(request.META.get("HTTP_REFERER", "/"))
diff --git a/payroll/cbv/reimbursements.py b/payroll/cbv/reimbursements.py
new file mode 100644
index 000000000..de48c4b03
--- /dev/null
+++ b/payroll/cbv/reimbursements.py
@@ -0,0 +1,337 @@
+from typing import Any
+from django.http import HttpResponse
+from django.urls import reverse, reverse_lazy
+from django.utils.decorators import method_decorator
+from base.methods import filter_own_records
+from horilla_views.cbv_methods import login_required
+from django.utils.translation import gettext_lazy as _
+from horilla_views.generic.cbv.views import (
+    HorillaDetailedView,
+    HorillaFormView,
+    HorillaListView,
+    HorillaNavView,
+    HorillaTabView,
+    TemplateView,
+)
+from payroll.filters import ReimbursementFilter
+from payroll.forms.component_forms import ReimbursementForm
+from payroll.models.models import Reimbursement
+from django.contrib import messages
+
+
+
+@method_decorator(login_required, name="dispatch")
+class ReimbursementsView(TemplateView):
+    """
+    for reimbursements and encashments page
+    """
+
+    template_name = "cbv/reimbursements/reimbursements.html"
+
+
+@method_decorator(login_required, name="dispatch")
+class ReimbursementsAndEncashmentsTabView(HorillaTabView):
+    """
+    Tab View
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.view_id = "reimbursmentContainer"
+        self.tabs = [
+            {
+                "title": _("Reimbursements"),
+                "url": f"{reverse('list-reimbursement')}",
+            },
+            {
+                "title": _("Leave Encashments"),
+                "url": f"{reverse('list-leave-encash')}",
+            },
+            {
+                "title": _("Bonus Encashments"),
+                "url": f"{reverse('list-bonus-encash')}",
+            },
+        ]
+
+@method_decorator(login_required, name="dispatch")
+class ReimbursementsAndEncashmentsListView(HorillaListView):
+    """
+    list view
+    """
+
+    model = Reimbursement
+    filter_class = ReimbursementFilter
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        if self.request.user.has_perm("payroll.change_reimbursement"):
+            self.action_method = "actions_col"
+
+    records_per_page = 5
+    option_method = "options_col"
+
+    row_status_indications = [
+        (
+            "rejected--dot",
+            _("Rejected"),
+            """
+            onclick="
+            $('#applyFilter').closest('form').find('[name=status]').val('rejected');
+            $('#applyFilter').click();
+            "
+            """,
+        ),
+        (
+            "approved--dot",
+            _("Approved"),
+            """
+            onclick="
+            $('#applyFilter').closest('form').find('[name=status]').val('approved');
+            $('#applyFilter').click();
+            "
+            """,
+        ),
+        (
+            "requested--dot",
+            _("Requested"),
+            """
+            onclick="
+            $('#applyFilter').closest('form').find('[name=status]').val('requested');
+            $('#applyFilter').click();
+            "
+            """,
+        ),
+    ]
+
+    row_status_class = "status-{status}"
+
+    columns = [
+        (_("Employee"), "employee_id", "employee_id__get_avatar"),
+        (_("Date"), "created_at"),
+        (_("Title"), "title"),
+        (_("Amount"), "amount"),
+        (_("Status"), "get_status_display"),
+        (_("Description"), "description"),
+        (_("Comment"), "comment_col"),
+    ]
+
+    header_attrs = {
+        "description" : """
+                        style="width:250px !important;"
+                        """,
+        "action" : """
+                        style="width:200px !important;"
+                        """
+    }
+
+@method_decorator(login_required, name="dispatch")
+class ReimbursementsListView(ReimbursementsAndEncashmentsListView):
+
+    sortby_mapping = [
+        ("Employee", "employee_id__get_full_name", "employee_id__get_avatar"),
+        ("Date", "created_at"),
+        ("Amount", "amount"),
+        ("Status", "get_status_display")
+    ]
+
+    row_attrs = """
+                hx-get='{reimbursements_detail_view}?instance_ids={ordered_ids}'
+                hx-target="#genericModalBody"
+                data-target="#genericModal"
+                data-toggle="oh-modal-toggle"
+                """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("list-reimbursement")
+
+    def get_queryset(self):
+        queryset = super().get_queryset()
+        queryset = queryset.filter(type="reimbursement")
+        queryset = filter_own_records(
+            self.request, queryset, "payroll.view_reimbursement"
+        )
+        return queryset
+
+@method_decorator(login_required, name="dispatch")
+class LeaveEncashmentsListView(ReimbursementsAndEncashmentsListView):
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("list-leave-encash")
+
+    sortby_mapping = [
+        ("Employee", "employee_id__get_full_name", "employee_id__get_avatar"),
+        ("Date", "created_at"),
+        ("Amount", "amount"),
+        ("Available days to encash", "ad_to_encash"),
+        ("Carryforward to encash", "cfd_to_encash"),
+    ]
+
+    columns = [
+        column
+        for column in ReimbursementsAndEncashmentsListView.columns
+        if column[1] != "amount"
+    ] + [
+        (_("Amount"), "amount_col"),
+        (_("Leave type"), "leave_type_id"),
+        (_("Available days to encash"), "ad_to_encash"),
+        (_("Carryforward to encash"), "cfd_to_encash"),
+    ]
+
+    row_attrs = """
+                hx-get='{leave_encash_detail_view}?instance_ids={ordered_ids}'
+                hx-target="#genericModalBody"
+                data-target="#genericModal"
+                data-toggle="oh-modal-toggle"
+                """
+
+    def get_queryset(self):
+        queryset = super().get_queryset()
+        queryset = queryset.filter(type="leave_encashment")
+        queryset = filter_own_records(
+            self.request, queryset, "payroll.view_reimbursement"
+        )
+        return queryset
+
+@method_decorator(login_required, name="dispatch")
+class BonusEncashmentsListView(ReimbursementsAndEncashmentsListView):
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("list-bonus-encash")
+
+    sortby_mapping = [
+        ("Employee", "employee_id__get_full_name", "employee_id__get_avatar"),
+        ("Date", "created_at"),
+        ("Amount", "amount"),
+        ("Status", "get_status_display"),
+        ("Bonus to encash", "bonus_to_encash"),
+    ]
+
+    columns = [
+        column
+        for column in ReimbursementsAndEncashmentsListView.columns
+        if column[1] != "amount"
+    ] + [
+        (_("Amount"), "amount_col"),
+        (_("Bonus to encash"), "bonus_to_encash"),
+    ]
+
+    row_attrs = """
+                hx-get='{bonus_encash_detail_view}?instance_ids={ordered_ids}'
+                hx-target="#genericModalBody"
+                data-target="#genericModal"
+                data-toggle="oh-modal-toggle"
+                """
+
+    def get_queryset(self):
+        queryset = super().get_queryset()
+        queryset = queryset.filter(type="bonus_encashment")
+        queryset = filter_own_records(
+            self.request, queryset, "payroll.view_reimbursement"
+        )
+        return queryset
+
+
+@method_decorator(login_required, name="dispatch")
+class ReimbursementsNav(HorillaNavView):
+    """
+    Nav bar
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("tab-reimbursement")
+        self.create_attrs = f"""
+                            hx-get="{reverse_lazy("reimbursement-create")}"
+                            hx-target="#genericModalBody"
+                            data-target="#genericModal"
+                            data-toggle="oh-modal-toggle"
+                            """
+
+    nav_title = _("Reimbursements")
+    filter_instance = ReimbursementFilter()
+    filter_form_context_name = "form"
+    filter_body_template = "cbv/reimbursements/filter.html"
+    search_swap_target = "#listContainer"
+
+
+@method_decorator(login_required, name="dispatch")
+class ReimbursementsDetailView(HorillaDetailedView):
+    """
+    detail view of reimbursements
+    """
+
+    body = [
+        (_("Date"), "created_at"),
+        (_("Amount"), "amount"),
+        (_("Status"), "get_status_display"),
+        (_("Description"), "description"),
+        (_("Attachments"), "attachments_col"),
+    ]
+
+    action_method = "detail_action_col"
+
+    model = Reimbursement
+    title = _("Details")
+    header = {
+        "title": "employee_id__get_full_name",
+        "subtitle": "title",
+        "avatar": "employee_id__get_avatar",
+    }
+
+@method_decorator(login_required, name="dispatch")
+class LeaveEncashmentsDetailedView(ReimbursementsDetailView):
+
+    position = 3
+    body = [
+        body for body in ReimbursementsDetailView.body if body[1] != "attachments_col"
+    ]
+    body.insert(position, (_("Leave type"), "leave_type_id"))
+    body.insert(position + 1, (_("Available days to encash"), "ad_to_encash"))
+    body.insert(position + 2, (_("Carryforward to encash"), "cfd_to_encash"))
+
+@method_decorator(login_required, name="dispatch")
+class BonusEncashmentsDetailedView(ReimbursementsDetailView):
+
+    body = [
+        body for body in ReimbursementsDetailView.body if body[1] != "attachments_col"
+    ]
+    body.insert(3, (_("Bonus to encash"), "bonus_to_encash"))
+
+
+@method_decorator(login_required, name="dispatch")
+class ReimbursementsFormView(HorillaFormView):
+    """
+    Create and edit form for reimbursements
+    """
+
+    model = Reimbursement
+    form_class = ReimbursementForm
+    new_display_title = _("Create Reimbursement / Encashment")
+    template_name =  "cbv/reimbursements/forms.html"
+
+    def get_context_data(self, **kwargs):
+        """
+        Get context data for rendering the form view.
+        """
+        context = super().get_context_data(**kwargs)
+        if self.form.instance.pk:
+            self.form_class.verbose_name = _("Update Reimbursement / Encashment")
+        return context
+
+    def form_valid(self, form: ReimbursementForm) -> HttpResponse:
+        """
+        Handle a valid form submission.
+        If the form is valid, save the instance and display a success message.
+        """
+        if form.is_valid():
+            if form.instance.pk:
+                message = _("Reimbursement updated successfully")
+            else:
+                message = _("Reimbursement created successfully")
+            form.save()
+            messages.success(self.request, message)
+            return self.HttpResponse()
+        return super().form_valid(form)
diff --git a/payroll/filters.py b/payroll/filters.py
index 3f8e0ff2d..ccbe55c84 100644
--- a/payroll/filters.py
+++ b/payroll/filters.py
@@ -11,11 +11,12 @@ import uuid
 
 import django_filters
 from django import forms
+from django.db.models import Q
 from django.utils.translation import gettext_lazy as _
 
 from base.filters import FilterSet
 from employee.models import Employee
-from horilla.filters import filter_by_name
+from horilla.filters import HorillaFilterSet, filter_by_name
 from payroll.models.models import (
     Allowance,
     Contract,
@@ -23,11 +24,12 @@ from payroll.models.models import (
     FilingStatus,
     LoanAccount,
     Payslip,
+    PayslipAutoGenerate,
     Reimbursement,
 )
 
 
-class ContractFilter(FilterSet):
+class ContractFilter(HorillaFilterSet):
     """
     Filter set class for Contract model
 
@@ -123,7 +125,7 @@ class ContractFilter(FilterSet):
         return queryset
 
 
-class AllowanceFilter(FilterSet):
+class AllowanceFilter(HorillaFilterSet):
     """
     Filter set class for Allowance model.
     """
@@ -172,7 +174,7 @@ class AllowanceFilter(FilterSet):
         return queryset.distinct()
 
 
-class DeductionFilter(FilterSet):
+class DeductionFilter(HorillaFilterSet):
     """
     Filter set class for Deduction model.
     """
@@ -221,7 +223,7 @@ class DeductionFilter(FilterSet):
         return queryset.distinct()
 
 
-class PayslipFilter(FilterSet):
+class PayslipFilter(HorillaFilterSet):
     """
     Filter set class for payslip model.
     """
@@ -272,6 +274,10 @@ class PayslipFilter(FilterSet):
     net_pay__lte = django_filters.NumberFilter(field_name="net_pay", lookup_expr="lte")
     net_pay__gte = django_filters.NumberFilter(field_name="net_pay", lookup_expr="gte")
 
+    department_id = django_filters.CharFilter(
+        field_name="employee_id__employee_work_info__department_id",
+        lookup_expr="icontains",
+    )
     department = django_filters.CharFilter(
         field_name="employee_id__employee_work_info__department_id__department",
         lookup_expr="icontains",
@@ -396,18 +402,26 @@ class PayslipFilter(FilterSet):
             self.form.fields[field].widget.attrs["id"] = f"{uuid.uuid4()}"
 
 
-class LoanAccountFilter(FilterSet):
+class LoanAccountFilter(HorillaFilterSet):
     """
     LoanAccountFilter
     """
 
-    search = django_filters.CharFilter(field_name="title", lookup_expr="icontains")
+    # search = django_filters.CharFilter(field_name="title", lookup_expr="icontains")
+    search = django_filters.CharFilter(method="filter_by_search")
     search_employee = django_filters.CharFilter(method=filter_by_name)
     provided_date = django_filters.DateFilter(
         widget=forms.DateInput(attrs={"type": "date"}),
         field_name="provided_date",
     )
 
+    def filter_by_search(self, queryset, name, value):
+        return queryset.filter(
+            Q(title__icontains=value)
+            | Q(employee_id__employee_first_name__icontains=value)
+            | Q(employee_id__employee_last_name__icontains=value)
+        )
+
     class Meta:
         model = LoanAccount
         fields = [
@@ -423,12 +437,13 @@ class LoanAccountFilter(FilterSet):
         ]
 
 
-class ReimbursementFilter(FilterSet):
+class ReimbursementFilter(HorillaFilterSet):
     """
     ReimbursementFilter
     """
 
-    search = django_filters.CharFilter(field_name="title", lookup_expr="icontains")
+    # search = django_filters.CharFilter(field_name="title", lookup_expr="icontains")
+    search = django_filters.CharFilter(method="search_method")
 
     class Meta:
         model = Reimbursement
@@ -443,6 +458,16 @@ class ReimbursementFilter(FilterSet):
             "employee_id__employee_work_info__reporting_manager_id",
         ]
 
+    def search_method(self, queryset, _, value):
+        """
+        This method is used to search employees and objective
+        """
+
+        return (
+            (queryset.filter(employee_id__employee_first_name__icontains=value))
+            | queryset.filter(title__icontains=value)
+        ).distinct()
+
 
 class ContractReGroup:
     """
@@ -486,3 +511,19 @@ class PayslipReGroup:
         ("employee_id__employee_work_info__job_role_id", _("Job Role")),
         ("employee_id__employee_work_info__company_id", _("Company")),
     ]
+
+
+class PayslipAutoGenerateFilter(HorillaFilterSet):
+
+    search = django_filters.CharFilter(method="search_method")
+
+    class Meta:
+        model = PayslipAutoGenerate
+        fields = ["company_id"]
+
+    def search_method(self, queryset, _, value):
+        """
+        This method is used to search employees and objective
+        """
+
+        return ((queryset.filter(company_id__company__icontains=value))).distinct()
diff --git a/payroll/forms/component_forms.py b/payroll/forms/component_forms.py
index 2cba46b97..d0f03ec49 100644
--- a/payroll/forms/component_forms.py
+++ b/payroll/forms/component_forms.py
@@ -20,6 +20,7 @@ from base.methods import reload_queryset
 from employee.filters import EmployeeFilter
 from employee.models import BonusPoint, Employee
 from horilla import horilla_middlewares
+from horilla.horilla_middlewares import _thread_locals
 from horilla.methods import get_horilla_model_class
 from horilla_widgets.forms import HorillaForm, default_select_option_template
 from horilla_widgets.widgets.horilla_multi_select_field import HorillaMultiSelectField
@@ -214,7 +215,6 @@ class DeductionForm(forms.ModelForm):
                 }
             kwargs["initial"] = initial
         super().__init__(*args, **kwargs)
-
         self.fields["specific_employees"] = HorillaMultiSelectField(
             queryset=Employee.objects.all(),
             widget=HorillaMultiSelectWidget(
@@ -354,6 +354,12 @@ class PayslipForm(ModelForm):
     Form for Payslip
     """
 
+    cols = {
+        "employee_id": 12,
+        "start_date": 12,
+        "end_date": 12,
+    }
+
     def __init__(self, *args, **kwargs):
         super().__init__(*args, **kwargs)
         active_contracts = Contract.objects.filter(contract_status="active")
@@ -368,6 +374,7 @@ class PayslipForm(ModelForm):
                 "hx-target": "#contractStartDateDiv",
                 "hx-include": "#payslipCreateForm",
                 "hx-trigger": "change delay:300ms",
+                "hx-swap": "innerHTML",
             }
         )
         if self.instance.pk is None:
@@ -394,6 +401,7 @@ class PayslipForm(ModelForm):
                     "hx-target": "#contractStartDateDiv",
                     "hx-include": "#payslipCreateForm",
                     "hx-trigger": "change delay:300ms",
+                    "hx-swap": "innerHTML",
                 }
             ),
             "end_date": forms.DateInput(
@@ -788,6 +796,8 @@ class ReimbursementForm(ModelForm):
     ReimbursementForm
     """
 
+    cols = {"description": 12}
+
     verbose_name = "Reimbursement / Encashment"
 
     class Meta:
@@ -857,7 +867,11 @@ class ReimbursementForm(ModelForm):
         if not request.user.has_perm("payroll.add_reimbursement"):
             exclude_fields.append("employee_id")
 
-        if type == "reimbursement" and self.instance.pk:
+        if (
+            type == "reimbursement"
+            and self.instance.pk
+            or self.data.get("type") == "reimbursement"
+        ):
             exclude_fields = exclude_fields + [
                 "leave_type_id",
                 "cfd_to_encash",
diff --git a/payroll/forms/tax_forms.py b/payroll/forms/tax_forms.py
index 47c64e6a8..814b839b7 100644
--- a/payroll/forms/tax_forms.py
+++ b/payroll/forms/tax_forms.py
@@ -21,6 +21,12 @@ from payroll.models.tax_models import TaxBracket
 class FilingStatusForm(ModelForm):
     """Form for creating and updating filing status."""
 
+    cols = {
+        "filing_status": 12,
+        "based_on": 12,
+        "description": 12,
+    }
+
     class Meta:
         """Meta options for the form."""
 
@@ -54,6 +60,8 @@ class FilingStatusForm(ModelForm):
 class TaxBracketForm(ModelForm):
     """Form for creating and updating tax bracket."""
 
+    cols = {"min_income": 12, "max_income": 12, "tax_rate": 12}
+
     class Meta:
         """Meta options for the form."""
 
diff --git a/payroll/models/models.py b/payroll/models/models.py
index 83e4f322d..3389ce61b 100644
--- a/payroll/models/models.py
+++ b/payroll/models/models.py
@@ -5,6 +5,7 @@ Used to register models
 
 import calendar
 import logging
+import re
 from datetime import date, datetime, timedelta
 
 from django import forms
@@ -13,7 +14,9 @@ from django.contrib import messages
 from django.core.exceptions import ValidationError
 from django.db import models
 from django.http import QueryDict
+from django.urls import reverse, reverse_lazy
 from django.utils import timezone
+from django.utils.html import format_html
 from django.utils.translation import gettext_lazy as _
 
 from base.horilla_company_manager import HorillaCompanyManager
@@ -30,8 +33,10 @@ from base.models import (
 from employee.methods.duration_methods import strtime_seconds
 from employee.models import BonusPoint, Employee, EmployeeWorkInformation
 from horilla import horilla_middlewares
+from horilla.horilla_middlewares import _thread_locals
 from horilla.models import HorillaModel
 from horilla_audit.models import HorillaAuditInfo, HorillaAuditLog
+from horilla_views.cbv_methods import render_template
 
 logger = logging.getLogger(__name__)
 
@@ -272,6 +277,104 @@ class Contract(HorillaModel):
 
     objects = HorillaCompanyManager("employee_id__employee_work_info__company_id")
 
+    def get_wage_type_display(self):
+        """
+        Display wage type
+        """
+        return dict(self.WAGE_CHOICES).get(self.wage_type)
+
+    def get_pay_frequency_display(self):
+        """
+        Display pay frequency
+        """
+        return dict(self.PAY_FREQUENCY_CHOICES).get(self.pay_frequency)
+
+    def get_status_display(self):
+        """
+        Display status
+        """
+        return dict(self.CONTRACT_STATUS_CHOICES).get(self.contract_status)
+
+    def status_col(self):
+        """
+        status column
+        """
+        return render_template(
+            path="cbv/contracts/status.html",
+            context={"instance": self},
+        )
+
+    def detail_action(self):
+        """
+        Detail actions
+        """
+        return render_template(
+            path="cbv/contracts/detail_action.html",
+            context={"instance": self},
+        )
+
+    def note_col(self):
+        """
+        Note column
+        """
+        return render_template(
+            path="cbv/contracts/note.html",
+            context={"instance": self},
+        )
+
+    def document_col(self):
+        """
+        Document column
+        """
+        return render_template(
+            path="cbv/contracts/document.html",
+            context={"instance": self},
+        )
+
+    def actions_col(self):
+        """
+        actions column
+        """
+        return render_template(
+            path="cbv/contracts/actions.html",
+            context={"instance": self},
+        )
+
+    def cal_leave_amount(self):
+        """
+        Action column for Calculate Leave Amount
+        """
+        return render_template(
+            path="cbv/contracts/cal_leave_amount.html",
+            context={"instance": self},
+        )
+
+    def conract_subtitle(self):
+        """
+        Detail view subtitle
+        """
+
+        return f"""{self.employee_id.employee_work_info.department_id } /
+          { self.employee_id.employee_work_info.job_position_id}"""
+
+    def contracts_detail(self):
+        """
+        detail view
+        """
+
+        url = reverse("contracts-detail-view", kwargs={"pk": self.pk})
+
+        return url
+
+    def deduct_leave_from_basic_pay_col(self):
+        """
+        Deduct leave from basic pay column
+        """
+        if self.deduct_leave_from_basic_pay:
+            return "Yes"
+        else:
+            return "No"
+
     def __str__(self) -> str:
         return f"{self.contract_name} -{self.contract_start_date} - {self.contract_end_date}"
 
@@ -961,6 +1064,175 @@ class Allowance(HorillaModel):
         ]
         verbose_name = _("Allowance")
 
+    def get_specific_employees(self):
+        """
+        Get all specific employees separated by commas.
+        """
+
+        employees = self.specific_employees.all()
+        employee_names_string = "<br>".join([str(employee) for employee in employees])
+        return employee_names_string
+
+    def get_exclude_employees(self):
+        """
+        Get all specific employees separated by commas.
+        """
+
+        return ", ".join([str(employee) for employee in self.exclude_employees.all()])
+
+    def get_is_taxable_display(self):
+        """
+        method to return is taxable or not
+        """
+        return "Yes" if self.is_taxable else "No"
+
+    def get_is_condition_based(self):
+        """
+        method to return is condition based or not
+        """
+        return "Yes" if self.is_condition_based else "No"
+
+    def get_is_fixed(self):
+        """
+        method to return is fixed
+        """
+        return "Yes" if self.is_fixed else "No"
+
+    def get_based_on_display(self):
+        """
+        method to return get based on field
+        """
+        return dict(self.based_on_choice).get(self.based_on)
+
+    def allowance_detail_view(self):
+        """
+        detail view
+        """
+
+        url = reverse("allowance-detail-view", kwargs={"pk": self.pk})
+
+        return url
+
+    def get_delete_url(self):
+        """
+        to get the delete url for card action delete
+        """
+
+        url = reverse_lazy("generic-delete")
+
+        return url
+
+    def get_update_url(self):
+        """
+        to get the update url for card action update
+        """
+
+        url = reverse("update-allowance", kwargs={"allowance_id": self.pk})
+        return url
+
+    def get_allowance_actions(self):
+        """
+        This method to get allowance actions
+        """
+
+        return render_template(
+            path="cbv/allowance_deduction/allowance_action.html",
+            context={"instance": self},
+        )
+
+    def get_avatar(self):
+        """
+        Method will return the API URL for the avatar or the path to the profile image.
+        """
+        sanitized_title = re.sub(r"[^a-zA-Z0-9\s]", "", self.title)
+        sanitized_title = sanitized_title.replace(" ", "+")
+        url = f"https://ui-avatars.com/api/?name={sanitized_title}&background=random"
+        return url
+
+    def one_time_date_display(self):
+        """
+        method to return one time field
+        """
+        if self.one_time_date:
+            return f'On <span class="dateformat_changer">{self.one_time_date}</span>'
+        else:
+            return "No"
+
+    def get_field_display(self):
+        """
+        get field choice dict if based on condition
+        """
+        return dict(FIELD_CHOICE).get(self.field)
+
+    def get_condition_display(self):
+        """
+        get condition choice dict if based on condition
+        """
+        return dict(CONDITION_CHOICE).get(self.condition)
+
+    def condition_based_display(self):
+        """
+        method to return condition if condition based
+        """
+        if self.is_condition_based:
+            condition_display = self.get_condition_display()
+            return f"{self.get_field_display()} {condition_display} {self.value}"
+        else:
+            return "No"
+
+    def based_on_amount(self):
+        """
+        custome template for retrieve amount
+        """
+        return render_template(
+            path="cbv/allowance_deduction/allowance/custom_amount.html",
+            context={"instance": self},
+        )
+
+    def cust_allowance_max_limit(self):
+        """
+        custom template to retrive allowance max limit
+        """
+        return render_template(
+            path="cbv/allowance_deduction/allowance/max_limit_col.html",
+            context={"instance": self},
+        )
+
+    def get_if_choice_display(self):
+        """
+        for allowance eligibility
+        """
+        return (
+            dict(self.if_condition_choice).get(self.if_choice, self.if_choice)
+            if self.if_choice
+            else ""
+        )
+
+    def get_if_condition_display(self):
+        """
+        for allowance eligibility
+        """
+        return (
+            dict(IF_CONDITION_CHOICE).get(self.if_condition, self.if_condition)
+            if self.if_condition
+            else ""
+        )
+
+    def allowance_eligibility(self):
+        """
+        for allowance eligibility
+        """
+        return f'{_("If")} {self.get_if_choice_display()} {self.get_if_condition_display()} {self.if_amount}'
+
+    def allowance_detail_actions(self):
+        """
+        custom template to retrive detail view actions
+        """
+        return render_template(
+            path="cbv/allowance_deduction/allowance/detail_view_actions.html",
+            context={"instance": self},
+        )
+
     def reset_based_on(self):
         """Reset the this fields when is_fixed attribute is true"""
         attributes_to_reset = [
@@ -1252,6 +1524,161 @@ class Deduction(HorillaModel):
         payslip = Payslip.objects.filter(installment_ids=self).first()
         return payslip
 
+    def get_is_pretax_display(self):
+        return "Yes" if self.is_pretax else "No"
+
+    def get_is_condition_based_display(self):
+        return "Yes" if self.is_condition_based else "No"
+
+    def get_is_fixed_display(self):
+        return "Yes" if self.is_fixed else "No"
+
+    def get_based_on_display(self):
+        """
+        Display work type
+        """
+        return dict(self.based_on_choice).get(self.based_on)
+
+    def get_field_display(self):
+        """
+        Field column
+        """
+        return dict(FIELD_CHOICE).get(self.field)
+
+    def get_condition_display(self):
+        """
+        condition display column
+        """
+        return dict(CONDITION_CHOICE).get(self.condition)
+
+    def condition_bsed_col(self):
+        """
+        Condition based column
+        """
+        if self.is_condition_based:
+            return f"{self.get_field_display()} {self.get_condition_display()} {self.value}"
+        else:
+            return "No"
+
+    def deduct_actions(self):
+        """
+        This method for get custom coloumn .
+        """
+
+        return render_template(
+            path="cbv/allowance_deduction/deductions/deductions_actions.html",
+            context={"instance": self},
+        )
+
+    def deduct_detail_actions(self):
+        """
+        This method for get custom coloumn .
+        """
+
+        return render_template(
+            path="cbv/allowance_deduction/deductions/detail_view_actions.html",
+            context={"instance": self},
+        )
+
+    def deduction_eligibility(self):
+        """
+        Deduction eligibility column
+        """
+        return f"{self.get_if_choice_display()} {self.get_if_condition_display()} {self.if_amount}"
+
+    def has_maximum_limit_col(self):
+        """
+        This method for get custom coloumn .
+        """
+
+        return render_template(
+            path="cbv/allowance_deduction/deductions/has_maximum_limit.html",
+            context={"instance": self},
+        )
+
+    def amount_col(self):
+        """
+        This method for get custom coloumn for amount .
+        """
+
+        return render_template(
+            path="cbv/allowance_deduction/deductions/amount.html",
+            context={"instance": self},
+        )
+
+    def get_avatar(self):
+        """
+        Method will return the API URL for the avatar or the path to the profile image.
+        """
+        sanitized_title = re.sub(r"[^a-zA-Z0-9\s]", "", self.title)
+        sanitized_title = sanitized_title.replace(" ", "+")
+        url = f"https://ui-avatars.com/api/?name={sanitized_title}&background=random"
+        return url
+
+    def deduction_detail_view(self):
+        """
+        detail view
+        """
+        url = reverse("deduction-detail-view", kwargs={"pk": self.pk})
+        return url
+
+    def get_delete_url(self):
+        """
+        detail view
+        """
+        # url = reverse("delete-deduction", kwargs={"deduction_id": self.pk})
+        url = reverse_lazy("generic-delete")
+
+        return url
+
+    def get_update_url(self):
+        """
+        This method to get update url
+        """
+        url = reverse_lazy("update-deduction", kwargs={"deduction_id": self.pk})
+        return url
+
+    def specific_employees_col(self):
+        """
+        Specific Employees
+        """
+        employees = self.specific_employees.all()
+        employee_names_string = "<br>".join([str(employee) for employee in employees])
+        return employee_names_string
+
+    def excluded_employees_col(self):
+        """
+        Excluded employees
+        """
+        employees = self.exclude_employees.all()
+        employee_names_string = "<br>".join([str(employee) for employee in employees])
+        return employee_names_string
+
+    def tax_col(self):
+        if self.is_tax:
+            title = _("Tax")
+            count = "Yes" if self.is_tax else "No"
+        else:
+            title = _("Pretax")
+            count = "Yes" if self.is_pretax else "No"
+        count = count.capitalize()
+
+        return f"""
+        <div class="oh-timeoff-modal__stat">
+            <span class="oh-timeoff-modal__stat-title">{title}</span>
+            <span class="oh-timeoff-modal__stat-count">{count}</span>
+        </div>
+        """
+
+    def get_one_time_deduction(self):
+        """
+        One time deduction column
+        """
+        if self.one_time_date:
+            return f"On <span class='dateformat_changer'> {self.one_time_date}</span> "
+        else:
+            return "No"
+
     def clean(self):
         super().clean()
 
@@ -1370,6 +1797,70 @@ class Payslip(HorillaModel):
     def __str__(self) -> str:
         return f"Payslip for {self.employee_id} - Period: {self.start_date} to {self.end_date}"
 
+    def get_status(self):
+        """
+        Display status
+        """
+        return dict(self.status_choices).get(self.status)
+
+    def get_download_url(self):
+        """
+        This method to get download url
+        """
+        return render_template(
+            path="cbv/payslip/payslip_download_tab.html",
+            context={"instance": self},
+        )
+
+    def gross_pay_display(self):
+        """
+        gross pay
+        """
+        gross_pay = self.gross_pay
+        return f"Rs {gross_pay:.2f}"
+
+    def deduction_display(self):
+        """
+        deduction
+        """
+        deduction = self.deduction
+        return f"Rs {deduction:.2f}"
+
+    def net_pay_display(self):
+        """
+        net pay
+        """
+        net_pay = self.net_pay
+        return f"Rs {net_pay:.2f}"
+
+    def custom_status_col(self):
+        """
+        custom status coloumn
+        """
+
+        return render_template(
+            path="cbv/payslip/payslip_status_col.html",
+            context={"instance": self},
+        )
+
+    def custom_actions_col(self):
+        """
+        custom actions coloumn
+        """
+
+        return render_template(
+            path="cbv/payslip/payslip_actions.html",
+            context={"instance": self},
+        )
+
+    def get_individual_payslip(self):
+        """
+        This method to get individual payslip
+        """
+
+        url = reverse_lazy("view-created-payslip", kwargs={"payslip_id": self.pk})
+        return url
+
     def clean(self):
         super().clean()
         today = date.today()
@@ -1499,6 +1990,75 @@ class LoanAccount(HorillaModel):
     def __str__(self):
         return f"{self.title} - {self.employee_id}"
 
+    def installment_paid(self):
+        installment_paid = Payslip.objects.filter(
+            installment_ids__in=self.deduction_ids.all()
+        ).count()
+        return installment_paid
+
+    def total_installments(self):
+        return self.installments
+
+    def loan_actions(self):
+        """
+        This method for get loan actions.
+        """
+
+        return render_template(
+            path="cbv/loan/loan_actions.html",
+            context={"instance": self},
+        )
+
+    def get_delete_url(self):
+        """
+        This method to get delete url
+        """
+        base_url = reverse_lazy("delete-loan")
+        message = "Do you want to delete this record?"
+        loan_id = self.pk
+        url = f"{base_url}?ids={loan_id}"
+        return f"'{url}'" + "," + f"'{message}'"
+
+    # def delete_url(self):
+    #     """
+    #     Edit url
+    #     """
+
+    #     return reverse("delete-loan", kwargs={"pk": self.pk})
+
+    def edit_url(self):
+        """
+        Edit url
+        """
+        return reverse("loan-edit-form", kwargs={"pk": self.pk})
+
+    def progress_bar_col(self):
+        """
+        This method for get progress bar col.
+        """
+
+        return render_template(
+            path="cbv/loan/loan_card.html",
+            context={
+                "instance": self,
+                "total_installments": self.total_installments,
+                "installment_paid": self.installment_paid,
+            },
+        )
+
+    def loan_detail_view(self):
+        """
+        for detail view of page
+        """
+        url = reverse("loan-detail-view", kwargs={"pk": self.pk})
+        return url
+
+    def detail_subtitle(self):
+        """
+        Return subtitle containing both department and job position information.
+        """
+        return f"{self.employee_id.employee_work_info.department_id} / {self.employee_id.employee_work_info.job_position_id}"
+
     def get_installments(self):
         """
         Method to calculate installment schedule for the loan.
@@ -1545,7 +2105,9 @@ class LoanAccount(HorillaModel):
         ).count()
         if not installment_paid:
             return 0
-        return (installment_paid / total_installments) * 100
+        ratio = (installment_paid / total_installments) * 100
+
+        return ratio
 
     def save(self, *args, **kwargs):
 
@@ -1777,6 +2339,93 @@ class Reimbursement(HorillaModel):
     def __str__(self):
         return f"{self.title}"
 
+    def get_status_display(self):
+        """
+        Display status types
+        """
+        return dict(self.status_types).get(self.status)
+
+    def comment_col(self):
+        """
+        This method for get custom coloumn .
+        """
+
+        return render_template(
+            path="cbv/reimbursements/comment.html",
+            context={"instance": self},
+        )
+
+    def options_col(self):
+        """
+        This method for get custom coloumn .
+        """
+
+        return render_template(
+            path="cbv/reimbursements/options.html",
+            context={"instance": self},
+        )
+
+    def actions_col(self):
+        """
+        This method for get custom coloumn .
+        """
+
+        return render_template(
+            path="cbv/reimbursements/actions.html",
+            context={"instance": self},
+        )
+
+    def amount_col(self):
+        """
+        This method for get custom column for amount .
+        """
+
+        return render_template(
+            path="cbv/reimbursements/amount.html",
+            context={"instance": self},
+        )
+
+    def attachments_col(self):
+        """
+        This method for get custom column for attachment .
+        """
+
+        return render_template(
+            path="cbv/reimbursements/attachments.html",
+            context={"instance": self},
+        )
+
+    def detail_action_col(self):
+        """
+        This method for get custom column for actions in detail .
+        """
+
+        return render_template(
+            path="cbv/reimbursements/detail_actions.html",
+            context={"instance": self},
+        )
+
+    def reimbursements_detail_view(self):
+        """
+        for detail view of reimbursements
+        """
+        url = reverse("detail-view-reimbursement", kwargs={"pk": self.pk})
+        return url
+
+    def leave_encash_detail_view(self):
+        """
+        for detail view of leave encashments.
+        """
+        url = reverse("detail-view-leave-encashment", kwargs={"pk": self.pk})
+        return url
+
+    def bonus_encash_detail_view(self):
+        """
+        for detail view of bonus encashments.
+        """
+        url = reverse("detail-view-bonus-encashment", kwargs={"pk": self.pk})
+        return url
+
 
 class ReimbursementFile(models.Model):
     file = models.FileField(upload_to="payroll/request_files")
@@ -1878,6 +2527,42 @@ class PayslipAutoGenerate(models.Model):
         Company, on_delete=models.CASCADE, null=True, blank=True, verbose_name="Company"
     )
 
+    def get_generate_day_display(self):
+        """
+        Display work type
+        """
+        return dict(DAYS).get(self.generate_day)
+
+    def get_company(self):
+        if self.company_id:
+            return self.company_id
+        return "All company"
+
+    def is_active_col(self):
+        """
+        is active column
+        """
+        return render_template(
+            path="cbv/settings/is_active_col.html", context={"instance": self}
+        )
+
+    def get_update_url(self):
+        """
+        This method to get update url
+        """
+        url = reverse_lazy("pay-slip-automation-update", kwargs={"pk": self.pk})
+        return url
+
+    def get_delete_url(self):
+        """
+        This method to get delete url
+        """
+        url = reverse_lazy("delete-auto-payslip", kwargs={"auto_id": self.pk})
+        return url
+
+    def get_instance_id(self):
+        return self.id
+
     def clean(self):
         # Unique condition checking for all company
         if (
diff --git a/payroll/static/cbv/actions.js b/payroll/static/cbv/actions.js
new file mode 100644
index 000000000..f1e342e22
--- /dev/null
+++ b/payroll/static/cbv/actions.js
@@ -0,0 +1,135 @@
+var excelMessages = {
+    ar: "هل ترغب في تنزيل ملف Excel؟",
+    de: "Möchten Sie die Excel-Datei herunterladen?",
+    es: "¿Desea descargar el archivo de Excel?",
+    en: "Do you want to download the excel file?",
+    fr: "Voulez-vous télécharger le fichier Excel?",
+  };
+  
+  var deletePayslipMessages = {
+    ar: "هل تريد حقًا حذف جميع كشوف الدفع المحددة؟",
+    de: "Sind Sie sicher, dass Sie alle ausgewählten Gehaltsabrechnungen löschen möchten?",
+    es: "¿Realmente quieres eliminar todas las nóminas seleccionadas?",
+    en: "Do you really want to delete all the selected payslips?",
+    fr: "Voulez-vous vraiment supprimer tous les bulletins de paie sélectionnés?",
+  };
+  
+  var deleteContractMessage = {
+    ar: "هل ترغب حقًا في حذف جميع العقود المحددة؟",
+    de: "Möchten Sie wirklich alle ausgewählten Verträge löschen?",
+    es: "¿Realmente quieres borrar todos los contratos seleccionados?",
+    en: "Do you really want to delete all the selected contracts?",
+    fr: "Voulez-vous vraiment supprimer tous les contrats sélectionnés?",
+  };
+  
+  var noRowMessage = {
+    ar: "لم يتم تحديد أي صفوف.",
+    de: "Es wurden keine Zeilen ausgewählt.",
+    es: "No se han seleccionado filas.",
+    en: "No rows have been selected.",
+    fr: "Aucune ligne n'a été sélectionnée.",
+  };
+  
+  var rowMessages = {
+    ar: " تم الاختيار",
+    de: " Ausgewählt",
+    es: " Seleccionado",
+    en: " Selected",
+    fr: " Sélectionné",
+  };
+
+  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();
+        // Does this cookie string begin with the name we want?
+        if (cookie.substring(0, name.length + 1) === name + "=") {
+          cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
+          break;
+        }
+      }
+    }
+    return cookieValue;
+  }
+  
+  
+  function getCurrentLanguageCode(callback) {
+    var languageCode = $("#main-section-data").attr("data-lang");
+    var allowedLanguageCodes = ["ar", "de", "es", "en", "fr"];
+    if (allowedLanguageCodes.includes(languageCode)) {
+      callback(languageCode);
+    } else {
+      $.ajax({
+        type: "GET",
+        url: "/employee/get-language-code/",
+        success: function (response) {
+          var ajaxLanguageCode = response.language_code;
+          $("#main-section-data").attr("data-lang", ajaxLanguageCode);
+          callback(
+            allowedLanguageCodes.includes(ajaxLanguageCode)
+              ? ajaxLanguageCode
+              : "en"
+          );
+        },
+        error: function () {
+          callback("en");
+        },
+      });
+    }
+  }
+  
+  
+function DeleteContractBulk() {
+   
+  
+    var languageCode = null;
+    getCurrentLanguageCode(function (code) {
+      languageCode = code;
+      var confirmMessage = deleteContractMessage[languageCode];
+      var textMessage = noRowMessage[languageCode];
+      ids = [];
+      ids.push($("#selectedInstances").attr("data-ids"));
+      ids = JSON.parse($("#selectedInstances").attr("data-ids"));
+      if (ids.length === 0) {
+        Swal.fire({
+          text: textMessage,
+          icon: "warning",
+          confirmButtonText: "Close",
+        });
+      } else {
+        Swal.fire({
+          text: confirmMessage,
+          icon: "error",
+          showCancelButton: true,
+          confirmButtonColor: "#008000",
+          cancelButtonColor: "#d33",
+          confirmButtonText: "Confirm",
+        }).then(function (result) {
+          if (result.isConfirmed) {
+            ids = [];
+            ids.push($("#selectedInstances").attr("data-ids"));
+            ids = JSON.parse($("#selectedInstances").attr("data-ids"));
+  
+            $.ajax({
+              type: "POST",
+              url: "/payroll/contract-bulk-delete",
+              data: {
+                csrfmiddlewaretoken: getCookie("csrftoken"),
+                ids: JSON.stringify(ids),
+              },
+              success: function (response, textStatus, jqXHR) {
+                if (jqXHR.status === 200) {
+                  location.reload(); // Reload the current page
+                } else {
+                  // console.log("Unexpected HTTP status:", jqXHR.status);
+                }
+              },
+            });
+          }
+        });
+      }
+    });
+  };
+  
\ No newline at end of file
diff --git a/payroll/static/cbv/payslip.js b/payroll/static/cbv/payslip.js
new file mode 100644
index 000000000..11bd4e1d3
--- /dev/null
+++ b/payroll/static/cbv/payslip.js
@@ -0,0 +1,204 @@
+var excelMessages = {
+    ar: "هل ترغب في تنزيل ملف Excel؟",
+    de: "Möchten Sie die Excel-Datei herunterladen?",
+    es: "¿Desea descargar el archivo de Excel?",
+    en: "Do you want to download the excel file?",
+    fr: "Voulez-vous télécharger le fichier Excel?",
+  };
+  
+  var deletePayslipMessages = {
+    ar: "هل تريد حقًا حذف جميع كشوف الدفع المحددة؟",
+    de: "Sind Sie sicher, dass Sie alle ausgewählten Gehaltsabrechnungen löschen möchten?",
+    es: "¿Realmente quieres eliminar todas las nóminas seleccionadas?",
+    en: "Do you really want to delete all the selected payslips?",
+    fr: "Voulez-vous vraiment supprimer tous les bulletins de paie sélectionnés?",
+  };
+  
+  var deleteContractMessages = {
+    ar: "هل ترغب حقًا في حذف جميع العقود المحددة؟",
+    de: "Möchten Sie wirklich alle ausgewählten Verträge löschen?",
+    es: "¿Realmente quieres borrar todos los contratos seleccionados?",
+    en: "Do you really want to delete all the selected contracts?",
+    fr: "Voulez-vous vraiment supprimer tous les contrats sélectionnés?",
+  };
+  
+  var noRowMessagesMail = {
+    ar: "لم يتم تحديد أي صفوف.",
+    de: "Es wurden keine Zeilen ausgewählt.",
+    es: "No se han seleccionado filas.",
+    en: "No rows have been selected.",
+    fr: "Aucune ligne n'a été sélectionnée.",
+  };
+  var mailSentMessages = {
+    ar: "هل ترغب في إرسال كشف الرواتب عبر البريد؟",
+    de: "Möchten Sie den Gehaltsabrechnung per E-Mail versenden?",
+    es: "¿Quieres enviar la nómina por correo electrónico?",
+    en: "Do you want to send the payslip by mail?",
+    fr: "Voulez-vous envoyer le bulletin de salaire par e-mail?",
+  };
+  
+  var rowMessages = {
+    ar: " تم الاختيار",
+    de: " Ausgewählt",
+    es: " Seleccionado",
+    en: " Selected",
+    fr: " Sélectionné",
+  };
+  
+
+  
+  function makeEmpListUnique(list) {
+    return Array.from(new Set(list));
+  }
+  
+  function makePayslipListUnique(list) {
+    return Array.from(new Set(list));
+  }
+  
+  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();
+        // Does this cookie string begin with the name we want?
+        if (cookie.substring(0, name.length + 1) === name + "=") {
+          cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
+          break;
+        }
+      }
+    }
+    return cookieValue;
+  }
+  
+  function getCurrentLanguageCode(callback) {
+    var languageCode = $("#main-section-data").attr("data-lang");
+    var allowedLanguageCodes = ["ar", "de", "es", "en", "fr"];
+    if (allowedLanguageCodes.includes(languageCode)) {
+      callback(languageCode);
+    } else {
+      $.ajax({
+        type: "GET",
+        url: "/employee/get-language-code/",
+        success: function (response) {
+          var ajaxLanguageCode = response.language_code;
+          $("#main-section-data").attr("data-lang", ajaxLanguageCode);
+          callback(
+            allowedLanguageCodes.includes(ajaxLanguageCode)
+              ? ajaxLanguageCode
+              : "en"
+          );
+        },
+        error: function () {
+          callback("en");
+        },
+      });
+    }
+  }
+
+
+ function bulkSendViaMail(){
+    var languageCode = null;
+    getCurrentLanguageCode(function (code) {
+      languageCode = code;
+      var confirmMessage = mailSentMessages[languageCode];
+      var textMessage = noRowMessagesMail[languageCode];
+      ids = [];
+      ids.push($("#selectedInstances").attr("data-ids"));
+      maildata = JSON.parse($("#selectedInstances").attr("data-ids"));
+      if (maildata.length === 0){
+        Swal.fire({
+          text: textMessage,
+          icon: "warning",
+          confirmButtonText: "Close",
+        });
+      } else {
+        Swal.fire({
+          text: confirmMessage,
+          icon: "question",
+          showCancelButton: true,
+          confirmButtonColor: "#008000",
+          cancelButtonColor: "#d33",
+          confirmButtonText: "Confirm",
+        }).then(function (result) {
+          if (result.isConfirmed) {
+              
+             // ids.push($("#selectedInstances").attr("data-ids"));
+              //ids = JSON.parse($("#selectedInstances").attr("data-ids"));
+    
+            $.ajax({
+
+              type: "GET",
+              url: "/payroll/send-slip",
+              data: { id: maildata},
+              traditional: true,
+              success: function (response, textStatus, jqXHR) {
+                if (jqXHR.status === 200) {
+                  location.reload();
+                }
+              },
+              
+            });
+          }
+        });
+      }
+    });
+      }
+
+function payslipBulkDelete(){
+var languageCode = null;
+        getCurrentLanguageCode(function (code) {
+          languageCode = code;
+          var confirmMessage = deletePayslipMessages[languageCode];
+          var textMessage = noRowMessages[languageCode];
+          var checkedRows = $(".payslip-checkbox").filter(":checked");
+          ids = [];
+          ids.push($("#selectedInstances").attr("data-ids"));
+          ids = JSON.parse($("#selectedInstances").attr("data-ids"));
+          if ((ids.length === 0) & (checkedRows.length === 0)) {
+            Swal.fire({
+              text: textMessage,
+              icon: "warning",
+              confirmButtonText: "Close",
+            });
+          } else {
+            Swal.fire({
+              text: confirmMessage,
+              icon: "error",
+              showCancelButton: true,
+              confirmButtonColor: "#008000",
+              cancelButtonColor: "#d33",
+              confirmButtonText: "Confirm",
+            }).then(function (result) {
+              if (result.isConfirmed) {
+                if (ids.length === 0) {
+                  e.preventDefault();
+                  ids = [];
+                  checkedRows.each(function () {
+                    ids.push($(this).attr("id"));
+                  });
+                } else if (checkedRows.length === 0) {
+                  ids = [];
+                  ids.push($("#selectedInstances").attr("data-ids"));
+                  ids = JSON.parse($("#selectedInstances").attr("data-ids"));
+                }
+                $.ajax({
+                  type: "POST",
+                  url: "/payroll/payslip-bulk-delete",
+                  data: {
+                    csrfmiddlewaretoken: getCookie("csrftoken"),
+                    ids: JSON.stringify(ids),
+                  },
+                  success: function (response, textStatus, jqXHR) {
+                    if (jqXHR.status === 200) {
+                      location.reload(); // Reload the current page
+                    } else {
+                      // console.log("Unexpected HTTP status:", jqXHR.status);
+                    }
+                  },
+                });
+              }
+            });
+          }
+        });
+      }
diff --git a/payroll/static/payroll/dashboard.js b/payroll/static/payroll/dashboard.js
index cb4ba0bed..b9e02281f 100644
--- a/payroll/static/payroll/dashboard.js
+++ b/payroll/static/payroll/dashboard.js
@@ -294,95 +294,224 @@ $(document).ready(function () {
       },
     });
   }
+  //   $.ajax({
+  //     url: "/payroll/dashboard-department-chart",
+  //     type: "GET",
+  //     dataType: "json",
+  //     headers: {
+  //       "X-Requested-With": "XMLHttpRequest",
+  //     },
+  //     data: {
+  //       period: period,
+  //     },
+  //     success: (response) => {
+  //       dataSet = response.dataset;
+  //       labels = response.labels;
+  //       department_total = response.department_total;
+  //       if (department_total.length != 0) {
+  //         $("#department_total").html("");
+  //         $("#department_total").show();
+  //         $("#department_total_empty").hide();
+  //         $.each(department_total, function (key, value) {
+  //           $("#department_total").append(
+  //             `<li class='m-3 department' style = 'cursor: pointer;''><span class='department_item'>${value["department"]}</span>: <span> ${value["amount"]}</span></li>`
+  //           );
+  //         });
+  //       } else {
+  //         $("#department_total").hide();
+  //         $("#department_total_empty").show();
+  //         $("#department_total_empty").html(
+  //           `<div style="display:flex;align-items: center;justify-content: center; padding-top:50px" class="">
+  //                       <div style="" class="">
+  //                       <img style="display: block;width: 70px;margin: 10px auto ;" src="${
+  //                         staticUrl + "images/ui/money.png"
+  //                       }" class="" alt=""/>
+  //                       <h3 style="font-size:16px" class="oh-404__subtitle">${
+  //                         response.message
+  //                       }</h3>
+  //                       </div>
+  //                   </div>`
+  //         );
+  //       }
+
+  //       if (isChartEmpty(dataSet)) {
+  //         $("#department_canvas_body").html(
+  //           `<div style="height: 310px; display:flex;align-items: center;justify-content: center;" class="">
+  //                       <div style="" class="">
+  //                       <img style="display: block;width: 70px;margin: 10px auto ;" src="${
+  //                         staticUrl + "images/ui/no-money.png"
+  //                       }" class="" alt=""/>
+  //                       <h3 style="font-size:16px" class="oh-404__subtitle">${
+  //                         response.message
+  //                       }</h3>
+  //                       </div>
+  //                   </div>`
+  //         );
+  //       } else {
+  //         department_chart(dataSet, labels);
+  //       }
+  //     },
+  //     error: (error) => {
+  //       console.log("Error", error);
+  //     },
+  //   });
+
+
+
+
+  // function contract_ending(initialLoad) {
+  //   var period = $("#monthYearField").val();
+  //   var date = period.split("-");
+  //   var year = date[0];
+  //   var month = parseInt(date[1]);
+
+  //   var monthNames = [
+  //     "January",
+  //     "February",
+  //     "March",
+  //     "April",
+  //     "May",
+  //     "June",
+  //     "July",
+  //     "August",
+  //     "September",
+  //     "October",
+  //     "November",
+  //     "December",
+  //   ];
+  //   if (initialLoad) {
+  //     let date = new Date();
+  //     let year = date.getFullYear();
+  //     let month = date.getMonth();
+  //     var formattedDate = `${monthNames[month]} ${year}`;
+  //   } else {
+  //     var formattedDate = `${monthNames[month - 1]} ${year}`;
+  //   }
+
+  //   $.ajax({
+  //     url: "/payroll/dashboard-contract-ending",
+  //     type: "GET",
+  //     dataType: "json",
+  //     headers: {
+  //       "X-Requested-With": "XMLHttpRequest",
+  //     },
+  //     data: {
+  //       period: period,
+  //       initialLoad: initialLoad,
+  //     },
+  //     success: (response) => {
+  //       var contract_end = response.contract_end;
+  //       if (contract_end.length != 0) {
+  //         $("#contract_ending").html("");
+  //         $.each(contract_end, function (key, value) {
+  //           id = value.contract_id;
+  //           elem = `<li class='m-3 contract_id' style = "cursor: pointer;" data-id=${id}> ${value.contract_name} </li>`;
+
+  //           $("#contract_ending").append(elem);
+  //         });
+  //         $(".contract-number").html(
+  //           `${formattedDate} : ${contract_end.length}`
+  //         );
+  //       } else {
+  //         $(".contract-number").html(
+  //           `${formattedDate} : ${contract_end.length}`
+  //         );
+  //         $("#contract_ending").html(
+  //           `<div style="display:flex;align-items: center;justify-content: center; padding-top:50px" class="">
+  //             <div style="" class="">
+  //               <img style="display: block;width: 70px;margin: 10px auto ;" src="${
+  //                 staticUrl + "images/ui/contract.png"
+  //               }" class="" alt=""/>
+  //               <h3 style="font-size:16px" class="oh-404__subtitle">${
+  //                 response.message
+  //               }</h3>
+  //             </div>
+  //           </div>`
+  //         );
+  //       }
+  //     },
+  //     error: (error) => {
+  //       console.log("Error", error);
+  //     },
+  //   });
+  // }
+
+  function contract_ending(){
 
-  function contract_ending(initialLoad) {
     var period = $("#monthYearField").val();
-    var date = period.split("-");
-    var year = date[0];
-    var month = parseInt(date[1]);
+      var date = period.split("-");
+      var year = date[0];
+      var month = parseInt(date[1]);
 
-    var monthNames = [
-      "January",
-      "February",
-      "March",
-      "April",
-      "May",
-      "June",
-      "July",
-      "August",
-      "September",
-      "October",
-      "November",
-      "December",
-    ];
-    if (initialLoad) {
-      let date = new Date();
-      let year = date.getFullYear();
-      let month = date.getMonth();
-      var formattedDate = `${monthNames[month]} ${year}`;
-    } else {
-      var formattedDate = `${monthNames[month - 1]} ${year}`;
+
+      var currentDate = new Date();
+      var currentYear = currentDate.getFullYear();
+      var currentMonth = currentDate.getMonth() + 1;
+      var inputMonthYear = year * 100 + month;
+      var currentMonthYear = currentYear * 100 + currentMonth
+
+      if (inputMonthYear < currentMonthYear) {
+        month = currentMonth;
+        year = currentYear;
     }
+    var monthNames = [
+      "January", "February", "March", "April", "May", "June",
+      "July", "August", "September", "October", "November", "December"
+  ];
+    var formattedDate = `${monthNames[month - 1]} ${year}`;
 
-    $.ajax({
-      url: "/payroll/dashboard-contract-ending",
-      type: "GET",
-      dataType: "json",
-      headers: {
-        "X-Requested-With": "XMLHttpRequest",
-      },
-      data: {
-        period: period,
-        initialLoad: initialLoad,
-      },
-      success: (response) => {
-        var contract_end = response.contract_end;
-        if (contract_end.length != 0) {
-          $("#contract_ending").html("");
-          $.each(contract_end, function (key, value) {
-            id = value.contract_id;
-            elem = `<li class='m-3 contract_id' style = "cursor: pointer;" data-id=${id}> ${value.contract_name} </li>`;
+    $(".contract-number").html(
+        `${formattedDate} : `
+              );
 
-            $("#contract_ending").append(elem);
-          });
-          $(".contract-number").html(
-            `${formattedDate} : ${contract_end.length}`
-          );
+  }
+
+  function contract_expired(){
+
+    var period = $("#monthYearField").val();
+      var date = period.split("-");
+      var year = date[0];
+      var month = parseInt(date[1]);
+
+
+      var currentDate = new Date();
+      var currentYear = currentDate.getFullYear();
+      var currentMonth = currentDate.getMonth() + 1;
+      var inputMonthYear = year * 100 + month;
+      var currentMonthYear = currentYear * 100 + currentMonth
+
+      if (inputMonthYear >= currentMonthYear) {
+        if (currentMonth === 1) {
+            month = 12;
+            year = currentYear - 1;
         } else {
-          $(".contract-number").html(
-            `${formattedDate} : ${contract_end.length}`
-          );
-          $("#contract_ending").html(
-            `<div style="display:flex;align-items: center;justify-content: center; padding-top:50px" class="">
-              <div style="" class="">
-                <img style="display: block;width: 70px;margin: 10px auto ;" src="${
-                  staticUrl + "images/ui/contract.png"
-                }" class="" alt=""/>
-                <h3 style="font-size:16px" class="oh-404__subtitle">${
-                  response.message
-                }</h3>
-              </div>
-            </div>`
-          );
+            month = currentMonth - 1;
+            year = currentYear;
         }
-      },
-      error: (error) => {
-        console.log("Error", error);
-      },
-    });
+    }
+    var monthNames = [
+      "January", "February", "March", "April", "May", "June",
+      "July", "August", "September", "October", "November", "December"
+  ];
+    var formattedDate = `${monthNames[month - 1]} ${year}`;
+
+    $(".contract-expired-number").html(
+        `${formattedDate} : `
+              );
+
   }
 
   employee_chart_view();
   payslip_details();
   department_chart_view();
-  contract_ending(initialLoad);
-
+  contract_ending();
+  contract_expired();
   $("#monthYearField").on("change", function () {
-    initialLoad = false;
     employee_chart_view();
     payslip_details();
     department_chart_view();
-    contract_ending(initialLoad);
+    contract_ending();
+    contract_expired();
   });
 
   $("#payroll-employee-next").on("click", function () {
diff --git a/payroll/templates/cbv/allowance_deduction/allowance/custom_amount.html b/payroll/templates/cbv/allowance_deduction/allowance/custom_amount.html
new file mode 100644
index 000000000..ed86c776e
--- /dev/null
+++ b/payroll/templates/cbv/allowance_deduction/allowance/custom_amount.html
@@ -0,0 +1,20 @@
+{% load i18n %}
+{% if instance.is_fixed %}
+        <span class="oh-timeoff-modal__stat-count">{{instance.amount}}</span>
+    {% else %}
+        {% if instance.based_on == "basic_pay" %}
+            <span class="oh-timeoff-modal__stat-count">{{instance.rate}}% of {{instance.get_based_on_display}}</span>
+        {% endif %}
+        {% if instance.based_on == "attendance" %}
+            <span class="oh-timeoff-modal__stat-count">{{instance.per_attendance_fixed_amount}} {{currency}} {% trans "Amount Per Attendance" %}</span>
+        {% endif %}
+        {% if instance.based_on == "shift_id" %}
+            <span class="oh-timeoff-modal__stat-count">{{instance.shift_per_attendance_amount}} {{currency}} {% trans "Amount Per" %} {{instance.shift_id}}</span>
+        {% endif %}
+        {% if instance.based_on == "work_type_id" %}
+            <span class="oh-timeoff-modal__stat-count">{{instance.work_type_per_attendance_amount}} {{currency}} {% trans "Amount Per" %} {{instance.work_type_id}}</span>
+        {% endif %}
+        {% if instance.based_on == "overtime" %}
+            <span class="oh-timeoff-modal__stat-count">{{instance.amount_per_one_hr}} {{currency}} {% trans "Amount Per One Hour" %}</span>
+        {% endif %}
+    {% endif %}
\ No newline at end of file
diff --git a/payroll/templates/cbv/allowance_deduction/allowance/detail_view_actions.html b/payroll/templates/cbv/allowance_deduction/allowance/detail_view_actions.html
new file mode 100644
index 000000000..adf117e37
--- /dev/null
+++ b/payroll/templates/cbv/allowance_deduction/allowance/detail_view_actions.html
@@ -0,0 +1,43 @@
+{% load i18n %}
+{% if perms.payroll.change_allowance or perms.payroll.delete_allowance %}
+    <div class="oh-modal__button-container w-100">
+       <div class="oh-btn-group">
+         <a href="{% url 'update-allowance' instance.id %}" class="oh-btn oh-btn--info" style="width: 50%;">
+           <ion-icon
+           name="create-outline"
+           role="img"
+           class="md hydrated"
+           aria-label="create outline"
+           ></ion-icon>{% trans "Edit" %}
+          </a>
+          <a hx-post="{% url 'delete-employee-allowance' instance.id %}?instances_ids={{ request.GET.instance_ids }}" onclick="event.preventDefault();event.stopPropagation();"
+                class="oh-btn oh-btn--danger" style="width: 50%;"
+                hx-confirm="{% trans 'Do you want to delete this Allowance?' %}"
+                hx-target="#genericModalBody"
+                >
+            <ion-icon
+                name="trash-outline"
+                role="img"
+                class="md hydrated"
+                aria-label="create outline"
+            >
+            </ion-icon>{% trans "Delete" %}
+               </a>
+
+        </div>
+    </div>
+    {% endif %}
+
+{% comment %} {% if request.GET.deleted %}
+    <script>
+    $(".reload-record").click()
+    $("#reloadMessagesButton").click()
+    </script>
+{% endif %}
+?instance_ids={{ request.GET.instance_ids }} {% endcomment %}
+{% if request.GET.deleted %}
+    <script>
+    $(".reload-record").click()
+    $("#reloadMessagesButton").click()
+    </script>
+{% endif %}
\ No newline at end of file
diff --git a/payroll/templates/cbv/allowance_deduction/allowance/max_limit_col.html b/payroll/templates/cbv/allowance_deduction/allowance/max_limit_col.html
new file mode 100644
index 000000000..707a04e97
--- /dev/null
+++ b/payroll/templates/cbv/allowance_deduction/allowance/max_limit_col.html
@@ -0,0 +1,6 @@
+{% load i18n %}
+{% if instance.has_max_limit %}
+<span class="oh-timeoff-modal__stat-count">{{instance.maximum_amount}} {{currency}} {% if instance.based_on == "basic_pay" %}{% trans "For working days on a month" %}{% endif %}</span>
+{% else %}
+<span class="oh-timeoff-modal__stat-count">{% trans "No" %}</span>
+{% endif %}
\ No newline at end of file
diff --git a/payroll/templates/cbv/allowance_deduction/allowance_action.html b/payroll/templates/cbv/allowance_deduction/allowance_action.html
new file mode 100644
index 000000000..fa54721b6
--- /dev/null
+++ b/payroll/templates/cbv/allowance_deduction/allowance_action.html
@@ -0,0 +1,27 @@
+{% load i18n %}
+{% if perms.payroll.change_allowance or perms.payroll.delete_allowance %}
+    <div class="oh-sticky-table__right">
+        <div class="oh-btn-group">
+        <a onclick="event.stopPropagation();" class="oh-btn oh-btn--light-bkg w-100"
+         href="{% url 'update-allowance' instance.id %}" title='{% trans "Update" %}'>
+          <ion-icon name="create-outline" role="img" class="md hydrated" style="color: blue"
+           aria-label="create outline"></ion-icon>
+            </a>
+            <a class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100"
+                onclick = "event.preventDefault();event.stopPropagation();"
+                hx-get="{% url 'generic-delete' %}?model=payroll.Allowance&pk={{instance.id}}" 
+                hx-target="#deleteConfirmationBody" data-toggle="oh-modal-toggle" 
+                data-target="#deleteConfirmation"
+                itle="{% trans 'Delete' %}">
+                <ion-icon name="trash-outline" role="img" class="md hydrated"
+                    aria-label="trash outline" >
+                </ion-icon>
+            </a>
+        </div>
+    </div>
+{% endif %}
+{% if request.GET.deleted %}
+    <script>
+    $("#reloadMessagesButton").click()
+    </script>
+{% endif %}
\ No newline at end of file
diff --git a/payroll/templates/cbv/allowance_deduction/allowance_deduction.html b/payroll/templates/cbv/allowance_deduction/allowance_deduction.html
new file mode 100644
index 000000000..be5d702aa
--- /dev/null
+++ b/payroll/templates/cbv/allowance_deduction/allowance_deduction.html
@@ -0,0 +1,31 @@
+{% load i18n %}
+{%load static%}
+{% if active_contracts %}
+    {% if basic_pay <= 0 %}
+    <div class="d-flex justify-content-center align-items-center" style="height:40vh">
+    <h5 class="oh-404__subtitle">{% trans "Basic pay not added . Please update in the active contract." %}</h5>
+    </div>
+    {% else %}
+<div id="allowance-deduction">
+{% if request.GET.deleted %}
+    <script>
+    $("#reloadMessagesButton").click()
+    </script>
+{% endif %}
+    {% include "generic/horilla_list.html" %}
+</div>
+    {% endif %}
+{% else %}
+
+<div class="oh-wrapper" align="center" style="margin-top: 7vh; margin-bottom:7vh;">
+    <div align="center">
+      <img src="{% static "images/ui/contract.png" %}" class="oh-404__image" alt="Page not found. 404.">
+      <h5 class="oh-404__subtitle mt-4 ml-2">{% trans "This employee doesn't have an active contract. Please check the employee's contract" %}</h5>
+    </div>
+  </div>
+{% comment %} 
+
+<div class="d-flex justify-content-center align-items-center" style="height:40vh">
+    <h5 class="oh-404__subtitle">{% trans "This employee doesn't have an active contract. Please check the employee's contract" %}</h5>
+</div> {% endcomment %}
+{% endif %}
diff --git a/payroll/templates/cbv/allowance_deduction/deductions/amount.html b/payroll/templates/cbv/allowance_deduction/deductions/amount.html
new file mode 100644
index 000000000..7c0c53a16
--- /dev/null
+++ b/payroll/templates/cbv/allowance_deduction/deductions/amount.html
@@ -0,0 +1,15 @@
+{% load i18n %}
+{% if instance.update_compensation %}
+{% if instance.is_fixed %}
+    <span class="oh-timeoff-modal__stat-count">{{instance.amount}}{{currency}} Deduct From {{instance.get_update_compensation_display}}</span>
+{% else %}
+    <span class="oh-timeoff-modal__stat-count">{{instance.rate}}% {% trans "of" %} {{instance.get_update_compensation_display}}</span>
+{% endif %}
+{% else %}
+{% if instance.is_fixed %}
+    <span class="oh-timeoff-modal__stat-count">{{instance.amount}}{{currency}}</span>
+{% else %}
+    <span class="oh-timeoff-modal__stat-count">{% trans "Employer Rate :" %} {{instance.employer_rate}}% {% trans "of" %} {{instance.get_based_on_display}}</span><br>
+    <span class="oh-timeoff-modal__stat-count">{% trans "Employee Rate :" %} {{instance.rate}}% {% trans "of" %} {{instance.get_based_on_display}}</span>
+{% endif %}
+{% endif %}
\ No newline at end of file
diff --git a/payroll/templates/cbv/allowance_deduction/deductions/deductions_actions.html b/payroll/templates/cbv/allowance_deduction/deductions/deductions_actions.html
new file mode 100644
index 000000000..9fe04ddfb
--- /dev/null
+++ b/payroll/templates/cbv/allowance_deduction/deductions/deductions_actions.html
@@ -0,0 +1,36 @@
+{% load i18n %}
+{% if perms.payroll.change_deduction or perms.payroll.change_deduction %}
+                              <div class="">
+                                <div class="oh-btn-group">
+                                  <a
+                                    onclick="event.stopPropagation();"
+                                    class="oh-btn oh-btn--light-bkg w-100"
+                                    href="{% url 'update-deduction' instance.id %}"
+                                    title="{% trans 'Update' %}"
+                                    >
+                                    <ion-icon
+                                      name="create-outline"
+                                      role="img"
+                                      class="md hydrated"
+                                      style="color: blue"
+                                      aria-label="create outline"
+                                    ></ion-icon>
+                                  </a>
+                                  <a
+                                    class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100"
+                                    onclick = "event.preventDefault();event.stopPropagation();"
+                                    hx-get="{% url 'generic-delete' %}?model=payroll.Deduction&pk={{instance.id}}" 
+                                    hx-target="#deleteConfirmationBody" data-toggle="oh-modal-toggle" 
+                                    data-target="#deleteConfirmation"
+                                    title="{% trans 'Delete' %}"
+                                    >
+                                    <ion-icon
+                                      name="trash-outline"
+                                      role="img"
+                                      class="md hydrated"
+                                      aria-label="trash outline"
+                                    ></ion-icon>
+                                  </a>
+                                </div>
+                              </div>
+                              {% endif %}
\ No newline at end of file
diff --git a/payroll/templates/cbv/allowance_deduction/deductions/detail_view_actions.html b/payroll/templates/cbv/allowance_deduction/deductions/detail_view_actions.html
new file mode 100644
index 000000000..783a56ff0
--- /dev/null
+++ b/payroll/templates/cbv/allowance_deduction/deductions/detail_view_actions.html
@@ -0,0 +1,25 @@
+{% load i18n %}
+{% if perms.payroll.change_deduction or perms.payroll.delete_deduction %}
+    <div class="oh-modal__button-container text-center w-100">
+       <div class="oh-btn-group">
+          <a href="{% url 'update-deduction' instance.id %}" class="oh-btn oh-btn--info" style="width: 50%;">
+            <ion-icon name="create-outline" role="img" class="md hydrated" aria-label="create outline"></ion-icon>
+            {% trans "Edit" %}
+          </a>
+          <a onclick = "event.preventDefault();event.stopPropagation();" hx-confirm="{% trans 'Do you want to delete this deduction?' %}"
+            hx-post="{% url 'delete-deduction' instance.id %}?instances_ids={{ request.GET.instance_ids }}" hx-target = "#genericModalBody"
+            class="oh-btn oh-btn--danger" style="width: 50%;">
+            <ion-icon name="trash-outline" role="img" class="md hydrated" aria-label="create outline"></ion-icon>
+            {% trans "Delete" %}
+          </a>
+        </div>
+    </div>
+    {% endif %}
+
+
+{% if request.GET.deleted %}
+    <script>
+    $(".reload-record").click()
+    $("#reloadMessagesButton").click()
+    </script>
+{% endif %}
diff --git a/payroll/templates/cbv/allowance_deduction/deductions/has_maximum_limit.html b/payroll/templates/cbv/allowance_deduction/deductions/has_maximum_limit.html
new file mode 100644
index 000000000..b9a7b1149
--- /dev/null
+++ b/payroll/templates/cbv/allowance_deduction/deductions/has_maximum_limit.html
@@ -0,0 +1,8 @@
+
+{% load i18n%}
+
+{% if instance.has_max_limit %}
+<span class="oh-timeoff-modal__stat-count">{{instance.maximum_amount}} {{currency}} {% trans "For working days on a month" %}</span>
+{% else %}
+<span class="oh-timeoff-modal__stat-count">{% trans "No" %}</span>
+{% endif %}
\ No newline at end of file
diff --git a/payroll/templates/cbv/allowances/allowance_filter.html b/payroll/templates/cbv/allowances/allowance_filter.html
new file mode 100644
index 000000000..82ec57d22
--- /dev/null
+++ b/payroll/templates/cbv/allowances/allowance_filter.html
@@ -0,0 +1,37 @@
+{% load static %}
+{% load i18n %}
+<div class="oh-dropdown__filter-body">
+    <div class="oh-accordion">
+      <div class="oh-accordion-header">{% trans "Allowance" %}</div>
+      <div class="oh-accordion-body">
+        <div class="row">
+          <div class="col-sm-6">
+            <div class="oh-input-group">
+              <label class="oh-label">{% trans "Taxable" %}</label>
+              {{ form.is_taxable }}
+            </div>
+          </div>
+          <div class="col-sm-6">
+            <div class="oh-input-group">
+              <label class="oh-label">{% trans "Condition Based" %}</label>
+              {{ form.is_condition_based }}
+            </div>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-sm-6">
+            <div class="oh-input-group">
+              <label class="oh-label">{% trans "Fixed" %}</label>
+              {{ form.is_fixed }}
+            </div>
+          </div>
+          <div class="col-sm-6">
+            <div class="oh-input-group">
+              <label class="oh-label">{% trans "Based" %}</label>
+              {{ form.based_on }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
\ No newline at end of file
diff --git a/payroll/templates/cbv/allowances/allowances_home.html b/payroll/templates/cbv/allowances/allowances_home.html
new file mode 100644
index 000000000..6464f8886
--- /dev/null
+++ b/payroll/templates/cbv/allowances/allowances_home.html
@@ -0,0 +1,75 @@
+{% extends "index.html" %}
+{% load static %}
+{% load i18n %}
+{% block content %}
+<meta name="csrf-token" content="{{ csrf_token }}">
+<style>
+    .taxable--dot{
+    background-color:red;
+  }
+  .non-taxable--dot{
+    background-color:gray;
+  }
+  
+  .fixed--dot{
+    background-color:orange;
+  
+  }
+  .not-fixed--dot{
+    background-color:yellowgreen;
+  
+  }
+
+  .taxable-True {
+    border-left: 3.4px solid red !important;
+    border-radius: 4px 0 0 4px;
+  }
+  .taxable-False {
+    border-left: 3.4px solid gray !important;
+    border-radius: 4px 0 0 4px;
+  }
+  .fixed-True{
+    border-left: 3.4px solid orange !important;
+    border-radius: 4px 0 0 4px;
+  }
+  .fixed-False{
+    border-left: 3.4px solid yellowgreen !important;
+    border-radius: 4px 0 0 4px;
+  }
+</style>
+<div hx-get="{% url "allowances-nav-view" %}" hx-trigger="load">
+</div> 
+
+
+{% include "generic/components.html" %}
+<div class="oh-checkpoint-badge mb-2" id="selectedInstances" data-ids="[]" data-clicked="" style="display: none">
+</div>
+
+
+<div class="oh-wrapper"  
+   id="listContainer">
+  <div class="animated-background">   
+</div>
+</div> 
+
+<script>
+    $("#filterForm").submit(function (e) {
+      var formData = $(this).serialize();
+      count = 0;
+      formData.split("&").forEach(function (field) {
+        parts = field.split("=");
+        value = parts[1];
+        if (parts[0] !== "view"){
+          if (value && value !== "unknown") {
+            count++;
+          }
+        }
+      });
+      $("#filterCount").empty();
+      if (count > 0) {
+        $("#filterCount").text("(" + count + ")");
+      }
+      // $('#field').attr('hx-vals',`{'data':${formData}}` );
+    });
+  </script>
+{% endblock content %}
\ No newline at end of file
diff --git a/payroll/templates/cbv/contracts/actions.html b/payroll/templates/cbv/contracts/actions.html
new file mode 100644
index 000000000..2ce3e9eb6
--- /dev/null
+++ b/payroll/templates/cbv/contracts/actions.html
@@ -0,0 +1,35 @@
+{% load i18n %}
+<div>
+    <div class="oh-btn-group">
+      <a
+      onclick="event.stopPropagation()"
+        class="oh-btn oh-btn--light-bkg w-100"
+        href="{% url 'update-contract' instance.id %}"
+        title="{% trans 'Update' %}"
+      >
+        <ion-icon
+          name="create-outline"
+          role="img"
+          class="md hydrated"
+          style="color: blue"
+          aria-label="create outline"
+        ></ion-icon>
+      </a>
+      <a
+        onclick = "event.preventDefault();event.stopPropagation();"
+        class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100"
+        hx-confirm="{% trans 'Do you want to delete this Contract?' %}"
+        hx-post="{% url 'delete-contract' instance.id %}?{{pd}}"
+        hx-target="#contract-container"
+        hx-swap="innerHTML"
+        title="{% trans 'Delete' %}"
+      >
+        <ion-icon
+          name="trash-outline"
+          role="img"
+          class="md hydrated"
+          aria-label="trash outline"
+        ></ion-icon>
+      </a>
+    </div>
+  </div>
\ No newline at end of file
diff --git a/payroll/templates/cbv/contracts/cal_leave_amount.html b/payroll/templates/cbv/contracts/cal_leave_amount.html
new file mode 100644
index 000000000..8d68d66fe
--- /dev/null
+++ b/payroll/templates/cbv/contracts/cal_leave_amount.html
@@ -0,0 +1,10 @@
+{% load i18n %}
+<div class="oh-timeoff-modal__stat">
+    {% if instance.calculate_daily_leave_amount %}
+        <span class="oh-timeoff-modal__stat-title">{% trans "Calculate Leave Amount" %}</span>
+        <span class="oh-timeoff-modal__stat-count">{{instance.calculate_daily_leave_amount|yesno|capfirst}}</span>
+    {% else %}
+        <span class="oh-timeoff-modal__stat-title">{% trans "Deduction Amount For One Leave" %}</span>
+        <span class="oh-timeoff-modal__stat-count">{{instance.deduction_for_one_leave_amount}}</span>
+    {% endif %}
+</div>
\ No newline at end of file
diff --git a/payroll/templates/cbv/contracts/contracts.html b/payroll/templates/cbv/contracts/contracts.html
new file mode 100644
index 000000000..bc176cd34
--- /dev/null
+++ b/payroll/templates/cbv/contracts/contracts.html
@@ -0,0 +1,126 @@
+
+
+
+{% extends "index.html" %}
+{% load i18n %}{% load static %}
+
+
+{% block content %}
+<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+
+
+
+
+<meta name="csrf-token" content="{{ csrf_token }}">
+
+
+
+<style>
+.terminated--dot{
+  background-color:black;
+}
+.expired--dot{
+  background-color:red;
+}
+.draft--dot{
+  background-color: rgba(128, 128, 128, 0.482);
+}
+.active--dot{
+  background-color:yellowgreen;
+}
+.status-terminated{
+  border-left: 3.4px solid black !important;
+  border-radius: 4px 0 0 4px;
+
+}
+
+.status-expired{
+  border-left: 3.4px solid red !important;
+  border-radius: 4px 0 0 4px;
+
+}
+.status-draft{
+  border-left: 3.4px solid rgba(128, 128, 128, 0.482) !important;
+  border-radius: 4px 0 0 4px;
+
+}
+.status-active{
+  border-left: 3.4px solid yellowgreen !important;
+  border-radius: 4px 0 0 4px;
+
+}
+
+
+
+
+
+
+
+</style>
+
+<div hx-get="{% url "contracts-nav" %}" hx-trigger="load">
+</div>  
+{% comment %} my_app/templates/my_app/generic/index.html {% endcomment %}
+
+
+
+{% include "generic/components.html" %}
+
+
+<div
+    class="oh-checkpoint-badge mb-2"
+    id="selectedInstances"
+    data-ids="[]"
+    data-clicked=""
+    style="display: none"
+  ></div>
+
+  
+  <div 
+  class="oh-wrapper" 
+  id="listContainer">
+  <div class="animated-background">
+  </div>
+</div>
+
+<div
+    class="oh-modal"
+    id="hxContractExport"
+    role="dialog"
+    aria-labelledby="hxContractExport"
+    aria-hidden="true"
+>
+    <div class="oh-modal__dialog">
+        <div class="oh-modal__dialog-header">
+            <h2 class="oh-modal__dialog-title" id="hxContractExportLavel">
+                {% trans "Export Contracts" %}
+            </h2>
+            <button class="oh-modal__close" aria-label="Close">
+                <ion-icon name="close-outline"></ion-icon>
+            </button>
+            <div
+                class="oh-modal__dialog-body p-0 pt-2"
+                id="hxContractExportModalBody"
+            >
+                <form
+                    action="{%url 'contract-export' %}"
+                    method="get"
+                    onsubmit="event.stopPropagation();$(this).parents().find('.oh-modal--show').last().toggleClass('oh-modal--show');"
+                    id="hxContractExportForm"
+                >
+                    {% csrf_token %}
+			
+                   
+                </form>
+            </div>
+        </div>
+    </div>
+</div>
+
+
+<script src="{% static 'cbv/actions.js' %}"></script>
+
+ 
+ 
+{% endblock content %}
\ No newline at end of file
diff --git a/payroll/templates/cbv/contracts/detail_action.html b/payroll/templates/cbv/contracts/detail_action.html
new file mode 100644
index 000000000..274784389
--- /dev/null
+++ b/payroll/templates/cbv/contracts/detail_action.html
@@ -0,0 +1,32 @@
+{% load i18n %}
+{% if  perms.payroll.delete_contract or perms.payroll.change_contract %}
+            
+                
+                    {% if perms.payroll.change_contract  %}
+                        <a href="{% url 'update-contract' instance.id %}" class="oh-btn-group oh-btn oh-btn--info" style="width: 50%;">
+                            <ion-icon
+                            name="create-outline"
+                            role="img"
+                            class="md hydrated"
+                            aria-label="create outline"
+                            ></ion-icon>{% trans "Edit" %}
+                        </a>
+                    {% endif %}
+                    {% if perms.payroll.delete_contract  %}
+                        <a
+                            class="oh-btn-group oh-btn oh-btn--danger"style="width: 50%;"
+                            hx-confirm="{% trans 'Do you want to delete this Contract?' %}"
+                            hx-post="{% url 'delete-contract-modal' instance.id %}?{{pd}}"
+                            hx-target="{{delete_hx_target}}"
+                            >
+                            <ion-icon
+                            name="trash-outline"
+                            role="img"
+                            class="md hydrated"
+                            aria-label="create outline"
+                            ></ion-icon>{% trans "Delete" %}
+                        </a>
+                    {% endif %}
+            
+           
+        {% endif %}
\ No newline at end of file
diff --git a/payroll/templates/cbv/contracts/document.html b/payroll/templates/cbv/contracts/document.html
new file mode 100644
index 000000000..55b8eaa9b
--- /dev/null
+++ b/payroll/templates/cbv/contracts/document.html
@@ -0,0 +1,5 @@
+{% load i18n %}
+{% if instance.contract_document %}
+<span class="oh-timeoff-modal__stat-title">{% trans "Document" %}</span>
+    <a href="{{ instance.contract_document.url }}" target="_blank">{{ instance.contract_document.name }}</a>
+{% endif %}
\ No newline at end of file
diff --git a/payroll/templates/cbv/contracts/export.html b/payroll/templates/cbv/contracts/export.html
new file mode 100644
index 000000000..e8fef9f09
--- /dev/null
+++ b/payroll/templates/cbv/contracts/export.html
@@ -0,0 +1,182 @@
+{% load static %} {% load i18n %}
+<div class="oh-dropdown__filter-body">
+  <div class="oh-accordion">
+    <div class="oh-accordion-header">{% trans "Excel columns" %}</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" for="select-all-fields">
+              <input type="checkbox" id="select-all-fields" /> {% trans "Select All" %}
+            </label>
+          </div>
+        </div>
+      </div>
+      <div class="row">
+        {% for field in export_column.selected_fields %}
+        <div class="col-sm-12 col-md-12 col-lg-4">
+          <div class="oh-input-group">
+            <label class="oh-label"> {{ field }} </label>
+          </div>
+        </div>
+        {% endfor %}
+      </div>
+    </div>
+  </div>
+  <div class="oh-accordion">
+    <div class="oh-accordion-header">{% trans "Contract" %}</div>
+    <div class="oh-accordion-body">
+      <div class="row">
+        <div class="col-sm-6">
+          <div class="oh-input-group">
+            <label class="oh-label" for="{{export_filter.form.contract_start_date.id_for_label}}">{% trans "Start Date" %}</label>
+            {{ export_filter.form.contract_start_date }}
+          </div>
+        </div>
+        <div class="col-sm-6">
+          <div class="oh-input-group">
+            <label class="oh-label" for="{{export_filter.form.contract_end_date.id_for_label}}">{% trans "End Date" %}</label>
+            {{ export_filter.form.contract_end_date }}
+          </div>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-sm-6">
+          <div class="oh-input-group">
+            <label class="oh-label" for="{{export_filter.form.wage_type.id_for_label}}">{% trans "Wage Type" %}</label>
+            {{ export_filter.form.wage_type }}
+          </div>
+        </div>
+        <div class="col-sm-6">
+          <div class="oh-input-group">
+            <label class="oh-label" for="{{export_filter.form.filing_status.id_for_label}}">{% trans "Filing Status" %}</label>
+            {{ export_filter.form.filing_status }}
+          </div>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-sm-6">
+          <div class="oh-input-group">
+            <label class="oh-label" for="{{export_filter.form.pay_frequency.id_for_label}}">{% trans "Pay Frequency" %}</label>
+            {{ export_filter.form.pay_frequency }}
+          </div>
+        </div>
+        <div class="col-sm-6">
+          <div class="oh-input-group">
+            <label class="oh-label" for="{{export_filter.form.contract_status.id_for_label}}">{% trans "Status" %}</label>
+            {{ export_filter.form.contract_status }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="oh-accordion">
+    <div class="oh-accordion-header">{% trans "Work Info" %}</div>
+    <div class="oh-accordion-body">
+      <div class="row">
+        <div class="col-sm-6">
+          <div class="oh-input-group">
+            <label class="oh-label" for="{{export_filter.form.employee_id__employee_work_info__company_id.id_for_label}}">{% trans "Company" %}</label>
+            {{ export_filter.form.employee_id__employee_work_info__company_id }}
+          </div>
+        </div>
+        <div class="col-sm-6">
+          <div class="oh-input-group">
+            <label class="oh-label" for="{{export_filter.form.department.id_for_label}}">{% trans "Department" %}</label>
+            {{ export_filter.form.department }}
+          </div>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-sm-6">
+          <div class="oh-input-group">
+            <label class="oh-label" for="{{export_filter.form.job_position.id_for_label}}">{% trans "Job Position" %}</label>
+            {{ export_filter.form.job_position }}
+          </div>
+        </div>
+        <div class="col-sm-6">
+          <div class="oh-input-group">
+            <label class="oh-label" for="{{export_filter.form.job_role.id_for_label}}">{% trans "Job Role" %}</label>
+            {{ export_filter.form.job_role }}
+          </div>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-sm-6">
+          <div class="oh-input-group">
+            <label class="oh-label" for="{{export_filter.form.shift.id_for_label}}">{% trans "Shift" %}</label>
+            {{ export_filter.form.shift }}
+          </div>
+        </div>
+        <div class="col-sm-6">
+          <div class="oh-input-group">
+            <label class="oh-label" for="{{export_filter.form.work_type.id_for_label}}">{% trans "Work Type" %}</label>
+            {{ export_filter.form.work_type }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="oh-accordion">
+    <div class="oh-accordion-header">{% trans "Advanced" %}</div>
+    <div class="oh-accordion-body">
+      <div class="row">
+        <div class="col-sm-6">
+          <div class="oh-input-group">
+            <label class="oh-label" for="{{export_filter.form.contract_start_date_from.id_for_label}}"
+              >{% trans "Contract Start Date From" %}</label
+            >
+            {{ export_filter.form.contract_start_date_from }}
+          </div>
+        </div>
+        <div class="col-sm-6">
+          <div class="oh-input-group">
+            <label class="oh-label" for="{{export_filter.form.contract_start_date_till.id_for_label}}"
+              >{% trans "Contract Start Date Till" %}</label
+            >
+            {{ export_filter.form.contract_start_date_till }}
+          </div>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-sm-6">
+          <div class="oh-input-group">
+            <label class="oh-label" for="{{export_filter.form.contract_end_date_from.id_for_label}}">{% trans "Contract End Date From" %}</label>
+            {{ export_filter.form.contract_end_date_from }}
+          </div>
+        </div>
+        <div class="col-sm-6">
+          <div class="oh-input-group">
+            <label class="oh-label" for="{{export_filter.form.contract_end_date_till.id_for_label}}">{% trans "Contract End Date Till" %}</label>
+            {{ export_filter.form.contract_end_date_till }}
+          </div>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-sm-6">
+          <div class="oh-input-group">
+            <label class="oh-label" for="{{export_filter.form.basic_pay__lte.id_for_label}}"
+              >{% trans "Basic Salary Less Than or Equal" %}</label
+            >
+            {{ export_filter.form.basic_pay__lte }}
+          </div>
+        </div>
+        <div class="col-sm-6">
+          <div class="oh-input-group">
+            <label class="oh-label" for="{{export_filter.form.basic_pay__gte.id_for_label}}"
+              >{% trans "Basic Salary Greater or Equal" %}</label
+            >
+            {{ export_filter.form.basic_pay__gte }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<div class="oh-dropdown__filter-footer">
+  <button
+      class="oh-btn oh-btn--secondary oh-btn--small w-100"
+  >
+      {% trans "Export" %}
+  </button>
+</div>
\ No newline at end of file
diff --git a/payroll/templates/cbv/contracts/filter.html b/payroll/templates/cbv/contracts/filter.html
new file mode 100644
index 000000000..55933e73f
--- /dev/null
+++ b/payroll/templates/cbv/contracts/filter.html
@@ -0,0 +1,149 @@
+{% load i18n %}
+{% load static %}
+<div class="oh-dropdown__filter-body">
+    <div class="oh-accordion">
+      <div class="oh-accordion-header">{% trans "Contract" %}</div>
+      <div class="oh-accordion-body">
+        <div class="row">
+          <div class="col-sm-6">
+            <div class="oh-input-group">
+              <label class="oh-label" for="{{form.contract_start_date.id_for_label}}">{% trans "Start Date" %}</label>
+              {{ form.contract_start_date }}
+            </div>
+          </div>
+          <div class="col-sm-6">
+            <div class="oh-input-group">
+              <label class="oh-label" for="{{form.contract_end_date.id_for_label}}">{% trans "End Date" %}</label>
+              {{ form.contract_end_date }}
+            </div>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-sm-6">
+            <div class="oh-input-group">
+              <label class="oh-label" for="{{form.wage_type.id_for_label}}">{% trans "Wage Type" %}</label>
+              {{ form.wage_type }}
+            </div>
+          </div>
+          <div class="col-sm-6">
+            <div class="oh-input-group">
+              <label class="oh-label" for="{{form.filing_status.id_for_label}}">{% trans "Filing Status" %}</label>
+              {{ form.filing_status }}
+            </div>
+          </div>
+        </div>
+        <div class="row">
+            <div class="col-sm-6">
+              <div class="oh-input-group">
+                <label class="oh-label" for="{{form.pay_frequency.id_for_label}}">{% trans "Pay Frequency" %}</label>
+                {{ form.pay_frequency }}
+              </div>
+            </div>
+            <div class="col-sm-6">
+              <div class="oh-input-group">
+                <label class="oh-label" for="{{form.contract_status.id_for_label}}">{% trans "Status" %}</label>
+                {{ form.contract_status }}
+              </div>
+            </div>
+        </div>
+      </div>
+    </div>
+    <div class="oh-accordion">
+      <div class="oh-accordion-header">{% trans "Work Info" %}</div>
+      <div class="oh-accordion-body">
+        <div class="row">
+          <div class="col-sm-6">
+            <div class="oh-input-group">
+              <label class="oh-label" for="{{form.employee_id__employee_work_info__company_id.id_for_label}}">{% trans "Company" %}</label>
+              {{ form.employee_id__employee_work_info__company_id }}
+            </div>
+          </div>
+          <div class="col-sm-6">
+            <div class="oh-input-group">
+              <label class="oh-label" for="{{form.department.id_for_label}}">{% trans "Department" %}</label>
+              {{ form.department }}
+            </div>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-sm-6">
+            <div class="oh-input-group">
+              <label class="oh-label" for="{{form.job_position.id_for_label}}">{% trans "Job Position" %}</label>
+              {{ form.job_position }}
+            </div>
+          </div>
+          <div class="col-sm-6">
+            <div class="oh-input-group">
+              <label class="oh-label" for="{{form.job_role.id_for_label}}">{% trans "Job Role" %}</label>
+              {{ form.job_role }}
+            </div>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-sm-6">
+            <div class="oh-input-group">
+              <label class="oh-label" for="{{form.shift.id_for_label}}">{% trans "Shift" %}</label>
+              {{ form.shift }}
+            </div>
+          </div>
+          <div class="col-sm-6">
+            <div class="oh-input-group">
+              <label class="oh-label" for="{{form.work_type.id_for_label}}">{% trans "Work Type" %}</label>
+              {{ form.work_type }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="oh-accordion">
+      <div class="oh-accordion-header">{% trans "Advanced" %}</div>
+      <div class="oh-accordion-body">
+        <div class="row">
+          <div class="col-sm-6">
+            <div class="oh-input-group">
+              <label class="oh-label" for="{{form.contract_start_date_from.id_for_label}}">{% trans "Contract Start Date From" %}</label>
+              {{ form.contract_start_date_from }}
+            </div>
+          </div>
+          <div class="col-sm-6">
+            <div class="oh-input-group">
+              <label class="oh-label" for="{{form.contract_start_date_till.id_for_label}}">{% trans "Contract Start Date Till" %}</label>
+              {{ form.contract_start_date_till }}
+            </div>
+          </div>
+        </div>
+        <div class="row">
+            <div class="col-sm-6">
+              <div class="oh-input-group">
+                <label class="oh-label" for="{{form.contract_end_date_from.id_for_label}}">{% trans "Contract End Date From" %}</label>
+                {{ form.contract_end_date_from }}
+              </div>
+            </div>
+            <div class="col-sm-6">
+              <div class="oh-input-group">
+                <label class="oh-label" for="{{form.contract_end_date_till.id_for_label}}">{% trans "Contract End Date Till" %}</label>
+                {{ form.contract_end_date_till }}
+              </div>
+            </div>
+          </div>
+        <div class="row">
+          <div class="col-sm-6">
+            <div class="oh-input-group">
+              <label class="oh-label" for="{{form.basic_pay__lte.id_for_label}}"
+                >{% trans "Basic Salary Less Than or Equal" %}</label
+              >
+              {{ form.basic_pay__lte }}
+            </div>
+          </div>
+          <div class="col-sm-6">
+            <div class="oh-input-group">
+              <label class="oh-label" for="{{form.basic_pay__gte.id_for_label}}"
+                >{% trans "Basic Salary Greater or Equal" %}</label
+              >
+              {{ form.basic_pay__gte }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
diff --git a/payroll/templates/cbv/contracts/note.html b/payroll/templates/cbv/contracts/note.html
new file mode 100644
index 000000000..cdaa9f743
--- /dev/null
+++ b/payroll/templates/cbv/contracts/note.html
@@ -0,0 +1,9 @@
+{% load i18n %}
+{% if instance.note %}
+            <div class="mt-3 mb-5" style="width:100%;">
+                <div class="oh-timeoff-modal__stat">
+                    <span class="oh-timeoff-modal__stat-title">{% trans "Note" %}</span>
+                    <span class="oh-timeoff-modal__stat-count">{{instance.note}} </span>
+                </div>
+            </div>
+        {% endif %}
\ No newline at end of file
diff --git a/payroll/templates/cbv/contracts/status.html b/payroll/templates/cbv/contracts/status.html
new file mode 100644
index 000000000..7fad5c8ed
--- /dev/null
+++ b/payroll/templates/cbv/contracts/status.html
@@ -0,0 +1,7 @@
+<div onclick="event.stopPropagation();">
+    <select name="status" hx-trigger="change" hx-post="{% url 'update-contract-status' instance.id %}?{{pd}}" hx-target="#listContainer" hx-vals='{"view":"table"}' class="oh-table__editable-input w-100" >
+      {% for option in instance.CONTRACT_STATUS_CHOICES %}
+      <option value="{{option.0}}"{% if option.0 == instance.contract_status %}selected{% endif %}>{{option.1}}</option>
+      {% endfor %}
+    </select>
+  </div>
\ No newline at end of file
diff --git a/payroll/templates/cbv/dashboard/contract_ending.html b/payroll/templates/cbv/dashboard/contract_ending.html
new file mode 100644
index 000000000..d0be672c3
--- /dev/null
+++ b/payroll/templates/cbv/dashboard/contract_ending.html
@@ -0,0 +1,11 @@
+
+<div id="contractContainer">
+    {% include "generic/horilla_list_table.html" %}
+</div>
+<script>
+    $(document).ready(function() {
+        var count = {{ queryset.paginator.count }};
+        $('#contract-count').text(count);
+        
+    });
+</script>
\ No newline at end of file
diff --git a/payroll/templates/cbv/dashboard/contract_expired.html b/payroll/templates/cbv/dashboard/contract_expired.html
new file mode 100644
index 000000000..943810a52
--- /dev/null
+++ b/payroll/templates/cbv/dashboard/contract_expired.html
@@ -0,0 +1,11 @@
+
+<div id="contractContainerExpired">
+    {% include "generic/horilla_list_table.html" %}
+</div>
+<script>
+    $(document).ready(function() {
+        var count = {{ queryset.paginator.count }};
+        $('#contract-expired-count').text(count);
+        
+    });
+</script>
\ No newline at end of file
diff --git a/payroll/templates/cbv/deduction/deduction.html b/payroll/templates/cbv/deduction/deduction.html
new file mode 100644
index 000000000..84b09d9bc
--- /dev/null
+++ b/payroll/templates/cbv/deduction/deduction.html
@@ -0,0 +1,51 @@
+{% extends "index.html" %}
+{% load static %}
+{% load i18n %}
+{% block content %}
+
+<style>
+  .pretax--dot{
+    background-color:red;
+  }
+  .not-fixed--dot{
+    background-color:yellowgreen;
+  }
+  .fixed--dot{
+    background-color:orange;
+  }
+  {% comment %} .fixed-True{
+    border-left: 3.4px solid orange !important;
+    border-radius: 4px 0 0 4px;
+  
+  }
+  .fixed-False {
+  
+    border-left: 3.4px solid yellowgreen !important;
+    border-radius: 4px 0 0 4px;
+  
+  
+  }
+  .pretax-True {
+  
+    border-left: 3.4px solid red !important;
+    border-radius: 4px 0 0 4px;
+  
+  } {% endcomment %}
+</style>
+
+<meta name="csrf-token" content="{{ csrf_token }}">
+<div hx-get="{% url "deduction-view-nav" %}" hx-trigger="load">
+</div> 
+
+
+{% include "generic/components.html" %}
+<div class="oh-checkpoint-badge mb-2" id="selectedInstances" data-ids="[]" data-clicked="" style="display: none">
+</div>
+
+
+<div class="oh-wrapper"  
+   id="listContainer">
+  <div class="animated-background">   
+</div>
+</div> 
+{% endblock %}
\ No newline at end of file
diff --git a/payroll/templates/cbv/deduction/filter.html b/payroll/templates/cbv/deduction/filter.html
new file mode 100644
index 000000000..a70a29373
--- /dev/null
+++ b/payroll/templates/cbv/deduction/filter.html
@@ -0,0 +1,60 @@
+{% load static %} {% load i18n %}
+
+<input type="hidden" name="view" id="filterView" value="">
+  <div class="oh-dropdown__filter-body">
+    <div class="oh-accordion">
+      <div class="oh-accordion-header">{% trans "Deduction" %}</div>
+      <div class="oh-accordion-body">
+        <div class="row">
+          <div class="col-sm-6">
+            <div class="oh-input-group">
+              <label class="oh-label">{% trans "Pretax" %}</label>
+              {{ form.is_pretax }}
+            </div>
+          </div>
+          <div class="col-sm-6">
+            <div class="oh-input-group">
+              <label class="oh-label">{% trans "Condition Based" %}</label>
+              {{ form.is_condition_based }}
+            </div>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-sm-6">
+            <div class="oh-input-group">
+              <label class="oh-label">{% trans "Fixed" %}</label>
+              {{ form.is_fixed }}
+            </div>
+          </div>
+          <div class="col-sm-6">
+            <div class="oh-input-group">
+              <label class="oh-label">{% trans "Based" %}</label>
+              {{ form.based_on }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  
+
+<script>
+  $("#filterForm").submit(function (e) {
+    var formData = $(this).serialize();
+    count = 0;
+    formData.split("&").forEach(function (field) {
+      parts = field.split("=");
+      value = parts[1];
+      if (parts[0] !== "view"){
+        if (value && value !== "unknown") {
+          count++;
+        }
+      }
+    });
+    $("#filterCount").empty();
+    if (count > 0) {
+      $("#filterCount").text("(" + count + ")");
+    }
+    // $('#field').attr('hx-vals',`{'data':${formData}}` );
+  });
+</script>
diff --git a/payroll/templates/cbv/federal_tax/form_inherit.html b/payroll/templates/cbv/federal_tax/form_inherit.html
new file mode 100644
index 000000000..ed243d36c
--- /dev/null
+++ b/payroll/templates/cbv/federal_tax/form_inherit.html
@@ -0,0 +1,52 @@
+{% load i18n %}
+<div>
+    {% include "generic/horilla_form.html" %}
+</div>
+<iframe 
+style="display: none;"
+frameBorder="0" 
+height="450px"
+id="oc-editor"
+src="https://onecompiler.com/embed/python?codeChangeEvent=true&hideNew=true&hideNewFileOption=true&hideStdin=true&hideTitle=true&listenToEvents=true&availableLanguages=false&theme=dark"
+width="100%"
+>
+</iframe>
+<script>
+    {% comment %} var inputBox = $('#id_use_py');
+    if($(this).is(':checked')){
+        $('#oc-editor').show();
+    }
+    console.log(inputBox) {% endcomment %}
+    var iFrame = document.getElementById('oc-editor');
+    console.log(iFrame)
+   
+    // Make sure the iframe is fully loaded before sending the postMessage
+    iFrame.onload = function() {
+        // Populate the code in the OneCompiler editor
+        iFrame.contentWindow.postMessage({
+            eventType: 'populateCode',
+            language: 'python',
+            files: [
+              {
+                "name": "federal_tax.py",
+                "content": `{{form.instance.python_code|safe}}`
+              }
+            ]
+        }, "*");
+   
+        // Trigger the code to run
+        iFrame.contentWindow.postMessage({
+            eventType: 'triggerRun'
+        }, "*");
+    };
+    window.onmessage = function (e) {
+          if (e.data && e.data.language) {
+              code = e.data.files[0].content
+              $("[name=python_code]").html(code);
+          }
+      };
+   </script>
+   <script>
+    $("[name=python_code]").parent().parent().hide();
+    $("[name=use_py]").change();
+   </script>
diff --git a/payroll/templates/cbv/federal_tax/tax_bracket.html b/payroll/templates/cbv/federal_tax/tax_bracket.html
new file mode 100644
index 000000000..874a0b33a
--- /dev/null
+++ b/payroll/templates/cbv/federal_tax/tax_bracket.html
@@ -0,0 +1,32 @@
+{% if not form_instance %}
+<span
+  class="oh-span__class"
+  data-toggle="oh-modal-toggle"
+  data-target="#filingStatus{{filing_status_id}}"
+  hx-get="{%url 'tax-bracket-list' filing_status_id=filing_status_id %}"
+  hx-trigger="load"
+  hx-target="#taxbracketList{{filing_status_id}}"
+  onclick="$(`[data-target='#filingStatus{{filing_status_id}}']`).addClass('oh-accordion-meta__header--show');$('#filingStatus{{filing_status_id}}').removeClass('d-none')"
+></span>
+<span hx-get="{% url 'tax-bracket-create' filing_status_id=filing_status_id %}"
+      onclick="event.stopPropagation()"
+      hx-target="#objectCreateModalTarget"
+      hx-trigger="load"
+></span>
+{% else %}
+<script>
+$(document).ready(function(e) {
+  $("#objectUpdateModal").toggleClass("oh-modal--show");
+});
+</script>
+<span
+  class="oh-span__class"
+  data-toggle="oh-modal-toggle"
+  data-target="#filingStatus{{filing_status_id}}"
+  hx-get="{%url 'tax-bracket-list' filing_status_id=filing_status_id %}"
+  hx-trigger="load"
+  hx-target="#taxbracketList{{filing_status_id}}"
+  onclick="$(`[data-target='#filingStatus{{filing_status_id}}']`).addClass('oh-accordion-meta__header--show');$('#filingStatus{{filing_status_id}}').removeClass('d-none')"
+></span>
+
+{% endif %}
\ No newline at end of file
diff --git a/payroll/templates/cbv/loan/loan_actions.html b/payroll/templates/cbv/loan/loan_actions.html
new file mode 100644
index 000000000..4c89086ee
--- /dev/null
+++ b/payroll/templates/cbv/loan/loan_actions.html
@@ -0,0 +1,15 @@
+{% load i18n %}
+<div class="" onclick="event.stopPropagation()">
+    <div class="oh-btn-group">
+        {% if perms.payroll.change_loanaccount or request.user %}
+            <a class="oh-btn oh-btn--light-bkg w-100" hx-get="{% url 'loan-edit-form' instance.id %}?instance_ids={{instance.ordered_ids}}" hx-target="#genericModalBody" data-toggle="oh-modal-toggle" data-target="#genericModal" title='{% trans "Edit" %}'>
+                <ion-icon class="text-dark" name="create-outline"></ion-icon></a>
+        {% endif %}
+        {% if perms.payroll.delete_loanaccount %}
+            <a class="oh-btn oh-btn--light-bkg w-100" href="{% url 'delete-loan' %}?ids={{ instance.id }}" onclick="return confirm('Do you want to delete this record?')" title='{% trans "Delete" %}'>
+                <ion-icon class="text-danger"request_copy = request.GET.copy()
+                request_copy.pop("instances_ids", None)
+                previous_data = request_copy.urlencode() name="trash-outline"></ion-icon></a>
+        {% endif %}
+    </div>
+</div>
\ No newline at end of file
diff --git a/payroll/templates/cbv/loan/loan_card.html b/payroll/templates/cbv/loan/loan_card.html
new file mode 100644
index 000000000..a01963e58
--- /dev/null
+++ b/payroll/templates/cbv/loan/loan_card.html
@@ -0,0 +1,32 @@
+{% load i18n %} {% load static %}{% include "filter_tags.html" %}
+{% comment %} <style>
+    .oh-recuritment__progress-bar {
+        width: 50%;        
+        height: 5px;          
+        border-radius: 15px; 
+        margin: 0.75rem 0;
+        background-color: hsl(213, 22%, 93%);
+        position: relative;
+    }
+
+    .oh-progress-bar__state {
+        background-color: hsl(8, 77%, 56%);
+        position: absolute;
+        left: 0px;
+        height: 5px;
+        width: 20%;          
+        border-radius: 15px;  
+    }
+</style> {% endcomment %}
+
+
+
+<div class="oh-recuritment__progress-bar">
+    <div class="oh-progress-bar__state"
+         role="progressbar"
+         aria-valuemax="100"
+         style="width:{{ instance.installment_ratio }}%;"
+         title="{{ installment_paid }}  ({% trans 'Installment paid' %}) / {{ total_installments }}  ({% trans 'Total installments' %})">
+    </div>
+</div>
+
diff --git a/payroll/templates/cbv/loan/loan_detail_view.html b/payroll/templates/cbv/loan/loan_detail_view.html
new file mode 100644
index 000000000..85eba3d61
--- /dev/null
+++ b/payroll/templates/cbv/loan/loan_detail_view.html
@@ -0,0 +1,205 @@
+{% load i18n payrollfilters %}
+<div class="oh-modal__dialog-header">
+    <h2 class="oh-modal__dialog-title" id="objectDetailsModalLabel">
+        {% trans "Details" %}
+    </h2>
+    <button class="oh-modal__close" aria-label="Close">
+      <ion-icon name="close-outline"></ion-icon>
+    </button>
+  </div>
+<div class="oh-modal__dialog-body oh-modal__dialog-relative">
+    {% if instance_ids %}
+  <div class="oh-modal__dialog oh-modal__dialog--navigation m-0 p-0">
+    <button
+      hx-get="{{previous_url}}?{{ids_key}}={{instance_id}}&{{request.GET.urlencode}}"
+      hx-target="#genericModalBody"
+      class="oh-modal__diaglog-nav oh-modal__nav-prev"
+    >
+      <ion-icon name="chevron-back-outline"></ion-icon>
+    </button>
+
+    <button
+      hx-get="{{next_url}}?{{ids_key}}={{instance_id}}&{{request.GET.urlencode}}"
+      hx-target="#genericModalBody"
+      class="oh-modal__diaglog-nav oh-modal__nav-next"
+    >
+      <ion-icon name="chevron-forward-outline"></ion-icon>
+    </button>
+  </div>
+  {% endif %}
+<a
+class="oh-timeoff-modal__profile-content"
+style="text-decoration: none"
+href="{% url 'employee-view-individual' loan.employee_id.id %}"
+>
+<div class="oh-profile mb-2">
+    <div class="oh-profile__avatar mr-1">
+        <img
+            src="{{ loan.employee_id.get_avatar }}"
+            class="oh-profile__image me-2"
+            alt="{{loan.employee_id}}"
+        />
+    </div>
+    <div class="oh-timeoff-modal__profile-info">
+        <span class="oh-timeoff-modal__user fw-bold"
+            >{{ loan.employee_id }}</span
+        >
+        <span
+            class="oh-timeoff-modal__user m-0"
+            style="font-size: 18px; color: #4d4a4a"
+            >{{ loan.employee_id.get_department }} / 
+            {{ loan.employee_id.get_job_position }}</span
+        >
+    </div>
+</div>
+</a>
+<div class="oh-modal__dialog-header" style="padding-top: 5px">
+<h3 class="oh-faq-card__title">{{loan.title}}</h3>
+
+<div class="container">
+    <div class="row">
+        <div class="col-md-4">
+            <b>{% trans "Total Amount" %} :</b> <div>{{loan.loan_amount}} </div>
+        </div>
+        <div class="col-md-4">
+            <b>{% trans "Paid Amount" %} :</b><div> {{installments|paid_amount}}</div>
+        </div>
+        <div class="col-md-4">
+            <b>{% trans "Balance Amount" %} :</b> <div>{{loan.loan_amount|balance_amount:installments}} </div>
+        </div>
+    </div>
+</div>
+
+<div class="oh-sticky-table__table mt-3" id="deductionContainer">
+    {% if messages %}
+        <div class="oh-wrapper">
+            {% for message in messages %}
+            <div class="oh-alert-container">
+                <div class="oh-alert oh-alert--animated {{message.tags}}">
+                {{ message }}
+                </div>
+            </div>
+            {% endfor %}
+        </div>
+    {% endif %}
+    <div class="oh-sticky-table__thead">
+        <div class="oh-sticky-table__tr">
+            <div
+                class="oh-sticky-table__th"
+                align="center"
+                style="width: 50px"
+            >
+                {% trans "S/N" %}
+            </div>
+            <div
+                class="oh-sticky-table__th"
+                align="center"
+                style="width: 80px"
+            >
+                {% trans "One Time Date" %}
+            </div>
+            <div
+                class="oh-sticky-table__th"
+                align="center"
+                style="width: 80px"
+            >
+                {% trans "Amount" %}
+            </div>
+            <div
+                class="oh-sticky-table__th"
+                align="center"
+                style="width: 60px"
+            >
+                {% trans "Status" %}
+            </div>
+        </div>
+    </div>
+    <div class="oh-sticky-table__tbody">
+        {% for deduction in installments %}
+        <div class="oh-sticky-table__tr">
+            <div class="oh-sticky-table__td" align="center">
+                {{ forloop.counter }}
+            </div>
+            <div
+                class="oh-sticky-table__td dateformat_changer"
+                align="center"
+            >
+                {{ deduction.one_time_date }}
+            </div>
+            <input
+                name="amount"
+                class="oh-card__title oh-card__title--sm ms-3 w-100 editable-input border-0"
+                hx-post="{% url 'edit-installment-amount' %}?loan_id={{loan.id}}&ded_id={{deduction.id}}"
+                hx-select="#deductionContainer"
+                hx-target="#deductionContainer"
+                hx-trigger="change"
+                hx-swap = "outerHTML"
+                onclick="event.stopPropagation();"
+                align="center"
+                value="{{ deduction.amount|floatformat:2 }}"
+                readonly
+            />
+            <div class="oh-sticky-table__td" align="center">
+                {% if deduction.installment_payslip %}
+                <span title="Installment paid, Click to view">
+                    <a href="{% url "view-created-payslip" deduction.installment_payslip.id %}"> ✅ </a>
+                </span>
+                {% endif %}
+            </div>
+        </div>
+        {% endfor %} {% if loan.settled %}
+        <div class="oh-sticky-table__tr">
+            <div class="oh-sticky-table__td" align="center">
+                {{ installments|length|add:1 }}
+            </div>
+            <div
+                class="oh-sticky-table__td dateformat_changer"
+                align="center"
+            >
+                {{loan.settled_date.date}}
+            </div>
+            <div class="oh-sticky-table__td" align="center">
+                {{loan.loan_amount|balance_amount:installments}}
+            </div>
+            <div class="oh-sticky-table__td" align="center">
+                <span title="Loan Settled">
+                    <a href="#"> ✅ </a>
+                </span>
+            </div>
+        </div>
+        {% endif %}
+    </div>
+</div>
+</div>
+</div>
+
+
+
+<script>
+    $(document).on("htmx:afterSettle", function () {
+        editableInput = $(".editable-input");
+
+        editableInput.on("focus", function () {
+            $(this).prop("readonly", false);
+        });
+
+        editableInput.on("blur", function () {
+            $(this).prop("readonly", true);
+        });
+    });
+</script>
+
+
+<div class="oh-btn-group" style="padding:20px;">
+    {% if perms.payroll.change_loanaccount or request.user %}
+    <button data-toggle="oh-modal-toggle" data-target="#genericModal" hx-target="#genericModalBody" hx-get="{% url 'loan-edit-form' instance.id %}" type="submit" class="oh-btn oh-btn-group oh-btn--info w-100" title="dit">
+        <ion-icon name="create-outline" role="img" class="md hydrated" aria-label="information circle outline"></ion-icon>
+    </button>
+        {% comment %} <a class="oh-btn oh-btn--light-bkg w-100" hx-get="{% url 'loan-edit-form' instance.id%}" hx-target="#genericModalBody" data-toggle="oh-modal-toggle" data-target="#genericModal" title='{% trans "Edit" %}'>
+            <ion-icon class="text-dark" name="create-outline"></ion-icon></a> {% endcomment %}
+    {% endif %}
+    {% if perms.payroll.delete_loanaccount %}
+        <a class="oh-btn oh-btn-group oh-btn--secondary  w-100" href="{% url 'delete-loan' %}?ids={{ instance.id }}" onclick="return confirm('Do you want to delete this record?')" title='{% trans "Delete" %}'>
+            <ion-icon name="trash-outline" role="img" class="md hydrated" aria-label="trash outline"></ion-icon>
+    {% endif %}
+</div>
\ No newline at end of file
diff --git a/payroll/templates/cbv/loan/loan_filter.html b/payroll/templates/cbv/loan/loan_filter.html
new file mode 100644
index 000000000..3584801b8
--- /dev/null
+++ b/payroll/templates/cbv/loan/loan_filter.html
@@ -0,0 +1,42 @@
+{% load i18n %}
+<div class="oh-dropdown__filter-body">
+    <div class="oh-accordion">
+      <div class="oh-accordion-header">{% trans "Loan Filter" %}</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 "Employee" %}</label>
+              {{form.employee_id}}
+            </div>
+            <div class="oh-input-group">
+              <label class="oh-label">{% trans "Provided date" %}</label>
+              {{form.provided_date}}
+            </div>
+            <div class="oh-input-group">
+              <label class="oh-label">{% trans "Type" %}</label>
+              {{form.type}}
+            </div>
+            <div class="oh-input-group">
+              <label class="oh-label">{% trans "Reporting manager" %}</label>
+              {{form.employee_id__employee_work_info__reporting_manager_id}}
+            </div>
+          </div>
+          <div class="col-sm-12 col-md-12 col-lg-6">
+            <div class="oh-input-group">
+              <label class="oh-label">{% trans "Department" %}</label>
+              {{form.employee_id__employee_work_info__department_id}}
+            </div>
+            <div class="oh-input-group">
+              <label class="oh-label">{% trans "Is settled" %}</label>
+              {{form.settled}}
+            </div>
+            <div class="oh-input-group">
+              <label class="oh-label">{% trans "Job position" %}</label>
+              {{form.employee_id__employee_work_info__job_position_id}}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
\ No newline at end of file
diff --git a/payroll/templates/cbv/loan/loan_main.html b/payroll/templates/cbv/loan/loan_main.html
new file mode 100644
index 000000000..50b87cc3e
--- /dev/null
+++ b/payroll/templates/cbv/loan/loan_main.html
@@ -0,0 +1,65 @@
+{% extends "index.html" %}
+{% load static %}
+{% load i18n %}
+
+{% block content %}
+
+<meta name="csrf-token" content="{{ csrf_token }}">
+
+<div hx-get="{% url "loan-navbar-view" %}" hx-trigger="load">
+</div>  
+
+{% include "generic/components.html" %}
+<div class="oh-checkpoint-badge mb-2" id="selectedInstances" data-ids="[]" data-clicked="" style="display: none"></div>
+<div class="oh-wrapper"  id="listContainer">
+    <div class="animated-background"></div>
+</div> 
+
+
+<div class="oh-modal" id="loanModal" role="dialog" aria-hidden="true">
+    <div class="oh-modal__dialog" style="max-width: 550px">
+      <div class="oh-modal__dialog-header">
+        <button type="button" class="oh-modal__close" aria-label="Close"><ion-icon name="close-outline"></ion-icon></button>
+      </div>
+
+      <div class="oh-modal__dialog-body" id="loanModalBody"></div>
+    </div>
+  </div>
+
+<script>
+    $(document).ready(function () {
+        $("#genericModalBody").on("htmx:afterSwap", function () {
+            $("[name='installment_amount']").on("change", function () {
+                var loanAmount = $("#id_loan_amount").val()
+                //var loanAmount = $("[name='loan_amount']").val();
+                console.log(loanAmount)
+
+                var installmentAmount = $(this).val();
+
+
+                var installments = loanAmount / installmentAmount;
+                console.log(installments)
+                $("[name='installments']").val(installments);
+                if (Math.round(installments) !== installments) {
+                    installments = Math.round(installments);
+                    $("[name='installments']").val(installments);
+                    $("[name='installments']").trigger("change");
+                }
+            });
+
+            $("[name='installments']").on("change keyup", function () {
+                var loanAmount = $("[name='loan_amount']").val();
+                var installments = $(this).val();
+
+                var installmentAmount = loanAmount / installments;
+
+                $("[name='installment_amount']").val(installmentAmount);
+            });
+        });
+    });
+
+    
+</script>
+<script src="{% static 'cbv/deleteFunc.js' %}"></script>	
+
+{% endblock content %}
diff --git a/payroll/templates/cbv/payslip/payslip_actions.html b/payroll/templates/cbv/payslip/payslip_actions.html
new file mode 100644
index 000000000..90aad7697
--- /dev/null
+++ b/payroll/templates/cbv/payslip/payslip_actions.html
@@ -0,0 +1,25 @@
+{% load i18n %}
+{% load basefilters %}
+<div class="oh-sticky-table__right"style="width: 251px !important;" onclick="event.stopPropagation();">
+    <div class="oh-btn-group">
+
+      <form action="{% url 'payslip-pdf' instance.id %}" method='post' class="w-100">
+        {% csrf_token %}
+        <button type='submit' title="{% trans 'Download' %}" class="oh-btn oh-btn--light-bkg w-100"> <ion-icon name="download"></ion-icon></button>
+      </form>
+      {% if perms.payroll.add_payslip %}
+        <button hx-confirm="{% trans 'Do you want to sent the payslip by mail?' %}" hx-get="{% url "send-slip" %}?id={{instance.id}}" hx-target="#listContainer"
+                title="{% trans 'Send via mail' %}" type="button" {% if instance.sent_to_employee %}class="oh-btn sent-to-employee w-50"{% else %}class="oh-btn oh-btn--light-bkg w-50"{% endif %}>
+          <ion-icon name="mail-outline"></ion-icon>
+        </button>
+      {% endif %}
+      {% if perms.payroll.delete_payslip %}
+
+          <button hx-confirm="{% trans 'Are you sure you want to delete this payslip?' %}" hx-post="{% url 'delete-payslip' instance.id %}"
+                  hx-target="#listContainer" class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-50" title="{% trans 'Remove' %}"
+                >
+            <ion-icon name="trash-outline"></ion-icon>
+          </button>              {% endif %}
+    </div>
+  </div>
+
diff --git a/payroll/templates/cbv/payslip/payslip_download_tab.html b/payroll/templates/cbv/payslip/payslip_download_tab.html
new file mode 100644
index 000000000..20fbd292b
--- /dev/null
+++ b/payroll/templates/cbv/payslip/payslip_download_tab.html
@@ -0,0 +1,5 @@
+{% load i18n %}
+<form action="{% url 'payslip-pdf' instance.id %}" method='post' class="w-100">
+    {% csrf_token %}
+    <button type='submit' title="{% trans 'Download' %}" class="oh-btn oh-btn--light-bkg w-100"> <ion-icon name="download"></ion-icon></button>
+  </form>
\ No newline at end of file
diff --git a/payroll/templates/cbv/payslip/payslip_export.html b/payroll/templates/cbv/payslip/payslip_export.html
new file mode 100644
index 000000000..cbf114fa8
--- /dev/null
+++ b/payroll/templates/cbv/payslip/payslip_export.html
@@ -0,0 +1,159 @@
+{% load i18n %}
+<div class="oh-dropdown__filter-body">
+  <div class="oh-accordion">
+    <div class="oh-accordion-header">{% trans "Excel columns" %}</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" for="select-all-fields">
+              <input type="checkbox" id="select-all-fields" /> {% trans "Select All" %}
+            </label>
+          </div>
+        </div>
+      </div>
+      <div class="row">
+        {% for field in export_column.selected_fields %}
+          <div class="col-sm-12 col-md-12 col-lg-4">
+            <div class="oh-input-group">
+              <label class="oh-label"> {{ field }} </label>
+            </div>
+          </div>
+        {% endfor %}
+      </div>
+    </div>
+  </div>
+  <div class="oh-accordion">
+    <div class="oh-accordion-header">{% trans "Payslip" %}</div>
+    <div class="oh-accordion-body">
+      <div class="row">
+        <div class="col-sm-12">
+          <div class="oh-input-group">
+            <label class="oh-label" for="{{export_filter.form.employee_id.id_for_label}}">{% trans "Employee" %}</label>
+            {{ export_filter.form.employee_id }}
+          </div>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-sm-6">
+          <div class="oh-input-group">
+            <label class="oh-label" for="{{export_filter.form.start_date.id_for_label}}">{% trans "Start Date" %}</label>
+            {{ export_filter.form.start_date }}
+          </div>
+        </div>
+        <div class="col-sm-6">
+          <div class="oh-input-group">
+            <label class="oh-label" for="{{export_filter.form.end_date.id_for_label}}">{% trans "End Date" %}</label>
+            {{ export_filter.form.end_date }}
+          </div>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-sm-6">
+          <div class="oh-input-group">
+            <label class="oh-label" for="{{export_filter.form.status.id_for_label}}">{% trans "Status" %}</label>
+            {{ export_filter.form.status }}
+          </div>
+        </div>
+        <div class="col-sm-6">
+          <div class="oh-input-group">
+            <label class="oh-label" for="{{export_filter.form.group_name.id_for_label}}">{% trans "Batch" %}</label>
+            {{ export_filter.form.group_name }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="oh-accordion">
+    <div class="oh-accordion-header">{% trans "Advanced" %}</div>
+    <div class="oh-accordion-body">
+      <div class="row">
+        <div class="col-sm-6">
+          <div class="oh-input-group">
+            <label class="oh-label" for="{{export_filter.form.start_date_from.id_for_label}}">{% trans "Start Date From" %}</label>
+            {{ export_filter.form.start_date_from }}
+          </div>
+        </div>
+        <div class="col-sm-6">
+          <div class="oh-input-group">
+            <label class="oh-label" for="{{export_filter.form.start_date_till.id_for_label}}">{% trans "Start Date Till" %}</label>
+            {{ export_filter.form.start_date_till }}
+          </div>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-sm-6">
+          <div class="oh-input-group">
+            <label class="oh-label" for="{{export_filter.form.end_date_from.id_for_label}}">{% trans "End Date From" %}</label>
+            {{ export_filter.form.end_date_from }}
+          </div>
+        </div>
+        <div class="col-sm-6">
+          <div class="oh-input-group">
+            <label class="oh-label" for="{{export_filter.form.end_date_till.id_for_label}}">{% trans "End Date Till" %}</label>
+            {{ export_filter.form.end_date_till }}
+          </div>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-sm-6">
+          <div class="oh-input-group">
+            <label class="oh-label" for="{{export_filter.form.gross_pay__lte.id_for_label}}"
+              >{% trans "Gross Pay Less Than or Equal" %}</label
+            >
+            {{ export_filter.form.gross_pay__lte }}
+          </div>
+        </div>
+        <div class="col-sm-6">
+          <div class="oh-input-group">
+            <label class="oh-label" for="{{export_filter.form.gross_pay__gte.id_for_label}}"
+              >{% trans "Gross Pay Greater or Equal" %}</label
+            >
+            {{ export_filter.form.gross_pay__gte }}
+          </div>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-sm-6">
+          <div class="oh-input-group">
+            <label class="oh-label" for="{{export_filter.form.deduction__lte.id_for_label}}"
+              >{% trans "Deduction Less Than or Equal" %}</label
+            >
+            {{ export_filter.form.deduction__lte }}
+          </div>
+        </div>
+        <div class="col-sm-6">
+          <div class="oh-input-group">
+            <label class="oh-label" for="{{export_filter.form.deduction__gte.id_for_label}}"
+              >{% trans "Deduction Greater or Equal" %}</label
+            >
+            {{ export_filter.form.deduction__gte }}
+          </div>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-sm-6">
+          <div class="oh-input-group">
+            <label class="oh-label" for="{{export_filter.form.net_pay__lte.id_for_label}}"
+              >{% trans "Net Pay Less Than or Equal" %}</label
+            >
+            {{ export_filter.form.net_pay__lte }}
+          </div>
+        </div>
+        <div class="col-sm-6">
+          <div class="oh-input-group">
+            <label class="oh-label" for="{{export_filter.form.net_pay__gte.id_for_label}}"
+              >{% trans "Net Pay Greater or Equal" %}</label
+            >
+            {{ export_filter.form.net_pay__gte }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<div class="oh-dropdown__filter-footer">
+    <button class="oh-btn oh-btn--secondary oh-btn--small w-100">
+      {% trans "Export" %}
+    </button>
+  </div>
diff --git a/payroll/templates/cbv/payslip/payslip_filter.html b/payroll/templates/cbv/payslip/payslip_filter.html
new file mode 100644
index 000000000..b723826e8
--- /dev/null
+++ b/payroll/templates/cbv/payslip/payslip_filter.html
@@ -0,0 +1,142 @@
+{% load i18n %}
+<div class="oh-dropdown__filter-body">
+	<div class="oh-accordion">
+		<div class="oh-accordion-header">{% trans "Payslip" %}</div>
+		<div class="oh-accordion-body">
+			<div class="row">
+				{% if perms.payroll.view_payslip %}
+					<div class="col-sm-12">
+						<div class="oh-input-group">
+							<label class="oh-label" for="{{form.employee_id.id_for_label}}">{% trans "Employee" %}</label>
+							{{ form.employee_id }}
+						</div>
+					</div>
+				{% endif %}
+			</div>
+			<div class="row">
+				<div class="col-sm-6">
+					<div class="oh-input-group">
+						<label class="oh-label" for="{{form.start_date.id_for_label}}">{% trans "Start Date" %}</label>
+						{{ form.start_date }}
+					</div>
+				</div>
+				<div class="col-sm-6">
+					<div class="oh-input-group">
+						<label class="oh-label" for="{{form.end_date.id_for_label}}">{% trans "End Date" %}</label>
+						{{ form.end_date }}
+					</div>
+				</div>
+			</div>
+			<div class="row">
+				<div class="col-sm-6">
+					<div class="oh-input-group">
+						<label class="oh-label" for="{{form.status.id_for_label}}">{% trans "Status" %}</label>
+						{{ form.status }}
+					</div>
+				</div>
+				<div class="col-sm-6">
+					<div class="oh-input-group">
+						<label class="oh-label" for="{{form.group_name.id_for_label}}">{% trans "Batch" %}</label>
+						{{ form.group_name }}
+					</div>
+				</div>
+			</div>
+			<div class="row">
+					<div class="col-sm-12">
+						<div class="oh-input-group">
+							<label class="oh-label" for="{{form.sent_to_employee.id_for_label}}">{% trans "Mail Sent" %}</label>
+							{{ form.sent_to_employee }}
+						</div>
+					</div>
+			</div>
+		</div>
+	</div>
+	<div class="oh-accordion">
+		<div class="oh-accordion-header">{% trans "Advanced" %}</div>
+		<div class="oh-accordion-body">
+			<div class="row">
+				<div class="col-sm-6">
+					<div class="oh-input-group">
+						<label class="oh-label" for="{{form.start_date_from.id_for_label}}">{% trans "Start Date From" %}</label>
+						{{ form.start_date_from }}
+					</div>
+				</div>
+				<div class="col-sm-6">
+					<div class="oh-input-group">
+						<label class="oh-label" for="{{form.start_date_till.id_for_label}}">{% trans "Start Date Till" %}</label>
+						{{ form.start_date_till }}
+					</div>
+				</div>
+			</div>
+			<div class="row">
+				<div class="col-sm-6">
+					<div class="oh-input-group">
+						<label class="oh-label" for="{{form.end_date_from.id_for_label}}">{% trans "End Date From" %}</label>
+						{{ form.end_date_from }}
+					</div>
+				</div>
+				<div class="col-sm-6">
+					<div class="oh-input-group">
+						<label class="oh-label" for="{{form.end_date_till.id_for_label}}">{% trans "End Date Till" %}</label>
+						{{ form.end_date_till }}
+					</div>
+				</div>
+			</div>
+			<div class="row">
+				<div class="col-sm-6">
+					<div class="oh-input-group">
+						<label class="oh-label" for="{{form.gross_pay__lte.id_for_label}}"
+							>{% trans "Gross Pay Less Than or Equal" %}</label
+						>
+						{{ form.gross_pay__lte }}
+					</div>
+				</div>
+				<div class="col-sm-6">
+					<div class="oh-input-group">
+						<label class="oh-label" for="{{form.gross_pay__gte.id_for_label}}"
+							>{% trans "Gross Pay Greater or Equal" %}</label
+						>
+						{{ form.gross_pay__gte }}
+					</div>
+				</div>
+			</div>
+			<div class="row">
+				<div class="col-sm-6">
+					<div class="oh-input-group">
+						<label class="oh-label" for="{{form.deduction__lte.id_for_label}}"
+							>{% trans "Deduction Less Than or Equal" %}</label
+						>
+						{{ form.deduction__lte }}
+					</div>
+				</div>
+				<div class="col-sm-6">
+					<div class="oh-input-group">
+						<label class="oh-label" for="{{form.deduction__gte.id_for_label}}"
+							>{% trans "Deduction Greater or Equal" %}</label
+						>
+						{{ form.deduction__gte }}
+					</div>
+				</div>
+			</div>
+			<div class="row">
+				<div class="col-sm-6">
+					<div class="oh-input-group">
+						<label class="oh-label" for="{{form.net_pay__lte.id_for_label}}"
+							>{% trans "Net Pay Less Than or Equal" %}</label
+						>
+						{{ form.net_pay__lte }}
+					</div>
+				</div>
+				<div class="col-sm-6">
+					<div class="oh-input-group">
+						<label class="oh-label" for="{{form.net_pay__gte.id_for_label}}"
+							>{% trans "Net Pay Greater or Equal" %}</label
+						>
+						{{ form.net_pay__gte }}
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+	{% comment %} {{form.}} {% endcomment %}
+</div>
\ No newline at end of file
diff --git a/payroll/templates/cbv/payslip/payslip_home.html b/payroll/templates/cbv/payslip/payslip_home.html
new file mode 100644
index 000000000..49df22555
--- /dev/null
+++ b/payroll/templates/cbv/payslip/payslip_home.html
@@ -0,0 +1,161 @@
+{% extends "index.html" %}
+{% load i18n %}{% load static %}
+
+
+{% block content %}
+{% comment %} <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+ {% endcomment %}
+
+
+
+<meta name="csrf-token" content="{{ csrf_token }}">
+
+
+
+<style>
+.draft--dot{
+  background-color:grey;
+}
+.review_ongoing--dot{
+  background-color:orange;
+}
+.confirmed--dot{
+  background-color: rgb(103, 171, 238)
+}
+.paid--dot{
+  background-color:green;
+}
+
+.status-draft {
+
+  border-left: 3.4px solid grey !important;
+  border-radius: 4px 0 0 4px;
+}
+.status-review_ongoing {
+
+  border-left: 3.4px solid orange !important;
+  border-radius: 4px 0 0 4px;
+}
+.status-confirmed {
+
+  border-left: 3.4px solid rgb(103, 171, 238) !important;
+  border-radius: 4px 0 0 4px;
+}
+.status-paid {
+
+  border-left: 3.4px solid green !important;
+  border-radius: 4px 0 0 4px;
+}
+
+.sent-to-employee {
+  background-color: yellowgreen;
+  color: white;
+}
+
+</style>
+
+<div hx-get="{% url "payslip-navbar" %}" hx-trigger="load">
+</div>  
+{% comment %} my_app/templates/my_app/generic/index.html {% endcomment %}
+
+
+
+{% include "generic/components.html" %}
+
+<div
+    class="oh-checkpoint-badge mb-2"
+    id="selectedInstances"
+    data-ids="[]"
+    data-clicked=""
+    style="display: none"
+  ></div>
+
+  
+  <div 
+  class="oh-wrapper" 
+  id="listContainer">
+  <div class="animated-background">
+  </div>
+</div>
+
+
+<div
+  class="oh-modal"
+  id="individualPayslipModal"
+  role="dialog"
+  aria-labelledby="individualPayslipModal"
+  aria-hidden="true"
+  >
+  <div class="oh-modal__dialog">
+    <div class="oh-modal__dialog-header pb-0">
+      <h1 class="oh-modal__dialog-title" id="addEmployeeModalLabel">
+        {% trans "Create Payslip" %}
+      </h1>
+      <button class="oh-modal__close" aria-label="Close">
+        <ion-icon name="close-outline"></ion-icon>
+      </button>
+    </div>
+    <div class="oh-modal__dialog-body" id="individualPayslipModal">
+      {% include "payroll/payslip/create_payslip.html" %}
+    </div>
+  </div>
+</div>
+
+
+<div
+  class="oh-modal"
+  id="bulkPayslipModal"
+  role="dialog"
+  aria-labelledby="bulkPayslipModal"
+  aria-hidden="true"
+  >
+  <div class="oh-modal__dialog">
+    <div class="oh-modal__dialog-header pb-0">
+      <h1 class="oh-modal__dialog-title" id="addEmployeeModalLabel">
+        {% trans "Bulk Payslip" %}
+      </h1>
+      <button class="oh-modal__close" aria-label="Close">
+        <ion-icon name="close-outline"></ion-icon>
+      </button>
+    </div>
+    <div class="oh-modal__dialog-body" id="bulkPayslipModal">
+      {% include "payroll/payslip/bulk_create_payslip.html" %}
+    </div>
+  </div>
+</div>
+
+
+
+<div
+  class="oh-modal"
+  id="payslipExport"
+  role="dialog"
+  aria-labelledby="payslipExport"
+  aria-hidden="true"
+  >
+  <div class="oh-modal__dialog">
+    <div class="oh-modal__dialog-header">
+      <h2 class="oh-modal__dialog-title" id="employeeExportLavel">
+        {% trans "Export Payslips" %}
+      </h2>
+      <button class="oh-modal__close" aria-label="Close">
+        <ion-icon name="close-outline"></ion-icon>
+      </button>
+      <div class="oh-modal__dialog-body p-0 pt-2" id="payslipExportModalBody">
+        <form
+          action="{%url 'payslip-info-export' %}"
+          method="get"
+          onsubmit="event.stopPropagation();$(this).parents().find('.oh-modal--show').last().toggleClass('oh-modal--show');"
+          id="payslipExportForm"
+        >
+        {% csrf_token %}
+        </form>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script src="{% static 'cbv/payslip.js' %}"></script>
+
+{% endblock content %}
\ No newline at end of file
diff --git a/payroll/templates/cbv/payslip/payslip_inherit_form.html b/payroll/templates/cbv/payslip/payslip_inherit_form.html
new file mode 100644
index 000000000..d9c7735c9
--- /dev/null
+++ b/payroll/templates/cbv/payslip/payslip_inherit_form.html
@@ -0,0 +1,18 @@
+<div>
+    {% include 'generic/horilla_form.html'%}
+
+</div>
+<script>
+    $(document).ready(function() {
+        var contractStartDateHtml = `
+        <div class="row">
+            <div class="col-12">
+                <div id="contractStartDateDiv" class="mt-2">
+                </div>
+            </div>
+        </div>`;
+            $('#id_start_date_parent_div').before(contractStartDateHtml);
+    });
+
+    
+</script>    
\ No newline at end of file
diff --git a/payroll/templates/cbv/payslip/payslip_status_col.html b/payroll/templates/cbv/payslip/payslip_status_col.html
new file mode 100644
index 000000000..5b7ce784d
--- /dev/null
+++ b/payroll/templates/cbv/payslip/payslip_status_col.html
@@ -0,0 +1,17 @@
+{% load i18n %}
+{% load basefilters %}
+{% if perms.payroll.add_payslip %}
+<div data-cell-index="3" onclick="event.stopPropagation();">
+  <select name="status" data-instance-id="{{instance.id}}" hx-trigger="change" hx-post="{% url 'payslip-status-update' instance.id %}"
+          hx-target="#listContainer" hx-vals='{"view":"table"}'
+          style="color: hsl(0,0%,11%); background-color: transparent; border: none; height: 100%; border: 1px solid transparent;">
+    {% for opt in instance.status_choices %}
+    <option value="{{opt.0}}"{% if opt.0 == instance.status %}selected{% endif %}>{{opt.1}}</option>
+    {% endfor %}
+  </select>
+</div>
+{% else %}
+<div data-cell-index="3" class="oh-sticky-table__td">
+  {{instance.get_status_display}}
+</div>
+{% endif %}
\ No newline at end of file
diff --git a/payroll/templates/cbv/reimbursements/actions.html b/payroll/templates/cbv/reimbursements/actions.html
new file mode 100644
index 000000000..c6c06788e
--- /dev/null
+++ b/payroll/templates/cbv/reimbursements/actions.html
@@ -0,0 +1,52 @@
+{% load i18n %}
+{% if perms.payroll.change_reimbursement %}
+<div id="requestCard{{ instance.id }}" onclick="event.stopPropagation()">
+    <form
+        action="{% url 'approve-reimbursements' %}"
+    >
+    <input type="hidden" name="ids" value="{{ instance.id }}" />
+    <input type="hidden" name="status" />
+    <input type="hidden" name="amount" default="0" min="0" />
+    <div class="oh-btn-group" onclick="event.stopPropagation()">
+        {% if instance.status == 'requested' %}
+            <button
+                type="button"
+                title="{% trans 'Approve' %}"
+                onclick="reimbursementConfirm('Do You really want to approve the request?','#requestCard{{ instance.id }}',true);$('#requestCard{{ instance.id }} [name=status]').val('approved')"
+                class="oh-btn oh-btn--success w-100"
+            >
+                <ion-icon class="me-1" name="checkmark-outline"></ion-icon>
+            </button>
+        {% else %}
+                <button
+                    title="{% trans 'Approve' %}"
+                    type="button"
+                    class="oh-btn oh-btn--success oh-btn--disabled w-100"
+                >
+                    <ion-icon class="me-1" name="checkmark-outline"></ion-icon>
+                </button>
+        {% endif %}
+        {% if instance.status != 'rejected' %}
+            <button
+                type="button"
+                onclick="$('#requestCard{{ instance.id }} [name=amount]').attr('required',false);reimbursementConfirm('Do You really want to reject the request?','#requestCard{{ instance.id }}');$('#requestCard{{ instance.id }} [name=status]').val('canceled')"
+                class="oh-btn oh-btn--danger w-100"
+            >
+            <ion-icon class="me-1" name="close-circle-outline"></ion-icon>
+
+            </button>
+        {% else %}
+            <button class="oh-btn oh-btn--danger w-100" disabled onclick="event.preventDefault();">
+                <ion-icon class="me-1" name="close-circle-outline"></ion-icon>
+            </button>
+        {% endif %}
+            <input
+                type="submit"
+                hidden
+                id="requestCard{{ instance.id }}Button"
+            />
+    </div>
+
+</form>
+</div>
+{% endif %}
\ No newline at end of file
diff --git a/payroll/templates/cbv/reimbursements/amount.html b/payroll/templates/cbv/reimbursements/amount.html
new file mode 100644
index 000000000..2928f7eb4
--- /dev/null
+++ b/payroll/templates/cbv/reimbursements/amount.html
@@ -0,0 +1,8 @@
+<div data-cell-index="13" onclick="event.stopPropagation()">
+    <input type="number" required
+    default="0" min="0" placeholder="Amount"
+    onchange="inputAmount($(this))"
+    onkeyup="inputAmount($(this))"
+    name="reqAmount" class="w-75"{% if instance.status != "requested" %}disabled{% endif %} {% if instance.amount %}
+    value="{{instance.amount}}"{% endif %} />
+</div>
\ No newline at end of file
diff --git a/payroll/templates/cbv/reimbursements/attachments.html b/payroll/templates/cbv/reimbursements/attachments.html
new file mode 100644
index 000000000..9a65fc32d
--- /dev/null
+++ b/payroll/templates/cbv/reimbursements/attachments.html
@@ -0,0 +1,12 @@
+{% for doc in instance.other_attachments.all %}
+                        <a
+                            href="{{doc.attachment.url}}"
+                            rel="noopener noreferrer"
+                            target="_blank"
+                            ><span
+                                class="oh-file-icon oh-file-icon--pdf"
+                                onmouseover="enlargeattachment('{{doc.attachment.url}}')"
+                                style="width:40px;height:40px"
+                            ></span
+                        ></a>
+                    {% endfor %}
\ No newline at end of file
diff --git a/payroll/templates/cbv/reimbursements/comment.html b/payroll/templates/cbv/reimbursements/comment.html
new file mode 100644
index 000000000..a956698d3
--- /dev/null
+++ b/payroll/templates/cbv/reimbursements/comment.html
@@ -0,0 +1,6 @@
+<div onclick="event.stopPropagation();">
+    <button type="button" hx-get="{% url 'payroll-request-view-comment' instance.id %}" hx-target="#commentContainer"
+            data-target = '#activitySidebar' title="View Comment"  class="oh-btn oh-btn--light oh-activity-sidebar__open w-100" style="flex: 1 0 auto; width:20px;height: 40.68px; padding: 0;" onclick="event.stopPropagation()">
+            <ion-icon name="newspaper-outline" role="img" class="md hydrated" aria-label="newspaper outline"></ion-icon>
+    </button>
+</div>
\ No newline at end of file
diff --git a/payroll/templates/cbv/reimbursements/detail_actions.html b/payroll/templates/cbv/reimbursements/detail_actions.html
new file mode 100644
index 000000000..4594a487e
--- /dev/null
+++ b/payroll/templates/cbv/reimbursements/detail_actions.html
@@ -0,0 +1,26 @@
+{% load i18n %}
+<div class="oh-modal__button-container w-100">
+    <div class="oh-btn-group">
+        {% if perms.payroll.change_reimbursement or request.user %}
+        <a
+            onclick="event.stopPropagation()"
+            hx-get="{% url 'create-reimbursement' %}?instance_id={{ instance.id }}"
+            hx-target="#objectCreateModalTarget"
+            data-toggle="oh-modal-toggle"
+            data-target="#objectCreateModal"
+            class="oh-btn oh-btn--info"
+            title="{% trans 'Edit' %}"
+            style="width: 50%;"
+        >
+        <ion-icon name="create-outline"></ion-icon>
+        </a>
+        {% endif %}
+        {% if perms.payroll.delete_reimbursement %}
+            <a href="{% url "delete-reimbursement" %}?ids={{instance.id}}" onclick="return confirm('Do you want to delete this record?')"
+            class="oh-btn oh-btn--secondary"  title='{% trans "Delete" %}' style="width: 50%;">
+                <ion-icon name="trash-outline"></ion-icon>
+            </a>
+        {% endif %}
+    </div>
+</div>
+
diff --git a/payroll/templates/cbv/reimbursements/filter.html b/payroll/templates/cbv/reimbursements/filter.html
new file mode 100644
index 000000000..3f6cb3d30
--- /dev/null
+++ b/payroll/templates/cbv/reimbursements/filter.html
@@ -0,0 +1,38 @@
+{% load i18n %}
+<div class="oh-dropdown__filter-body">
+    <div class="oh-accordion">
+      <div class="oh-accordion-header">{% trans "Reimbursement" %}</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 "Employee" %}</label>
+              {{form.employee_id}}
+            </div>
+            <div class="oh-input-group">
+              <label class="oh-label">{% trans "Status" %}</label>
+              {{form.status}}
+            </div>
+            <div class="oh-input-group">
+              <label class="oh-label">{% trans "Reporting manager" %}</label>
+              {{form.employee_id__employee_work_info__reporting_manager_id}}
+            </div>
+          </div>
+          <div class="col-sm-12 col-md-12 col-lg-6">
+            <div class="oh-input-group">
+              <label class="oh-label">{% trans "Department" %}</label>
+              {{form.employee_id__employee_work_info__department_id}}
+            </div>
+            <div class="oh-input-group">
+              <label class="oh-label">{% trans "Type" %}</label>
+              {{form.type}}
+            </div>
+            <div class="oh-input-group">
+              <label class="oh-label">{% trans "Job position" %}</label>
+              {{form.employee_id__employee_work_info__job_position_id}}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
\ No newline at end of file
diff --git a/payroll/templates/cbv/reimbursements/forms.html b/payroll/templates/cbv/reimbursements/forms.html
new file mode 100644
index 000000000..2d3f19888
--- /dev/null
+++ b/payroll/templates/cbv/reimbursements/forms.html
@@ -0,0 +1,58 @@
+{% load i18n %}
+<div id="formContainer">
+    {% include "generic/horilla_form.html" %}
+    <div class ="oh-modal__dialog-body oh-modal__dialog-relative">
+    <table 
+    class="oh-table  custom-table"
+    {% if not form.instance.id or form.instance.type == "reimbursement" or form.instance.type == "bonus_encashment" %}
+        id="availableTable"
+        style="display: none; padding: 10px;"
+    {% else %}
+        style="padding: 10px;"
+    {% endif %}
+>
+    <thead>
+        <tr>
+            <th>{% trans "Leave Type" %}</th>
+            <th>{% trans "Available Days" %}</th>
+            <th title="{% trans 'Carry Forward Days' %}" >{% trans "CFD" %}</th>
+        </tr>
+    </thead>
+    <tbody
+        {% if not form.instance.id %}
+        id="availableTableBody"
+        {% endif %}
+    >
+        {% for available_leave in form.assigned_leaves %}
+        <tr class="toggle-highlight">
+            <td >{{available_leave.leave_type_id}}</td>
+            <td>{{available_leave.available_days}}</td>
+            <td>{{available_leave.carryforward_days}}</td>
+        </tr>
+        {% endfor %}
+    </tbody>
+</table>
+</div>
+</div>
+
+
+<script>
+    toggleReimbursmentType($("#genericModalBody [name=type]").first());
+    removeHighlight();
+    var attachemntLabelElement = $(
+        "#genericModalBody [for=id_attachment]"
+    );
+    var attachemntlElement = $("#genericModalBody #id_attachment");
+    var attachemntParentlElement = $(
+        "#genericModalBody [for=id_attachment]"
+    ).parent();
+
+    // Detach both elements from the DOM
+    attachemntLabelElement.detach();
+    attachemntlElement.detach();
+    attachemntParentlElement.html("");
+    // Append them in the desired order
+    attachemntParentlElement.append(attachemntLabelElement);
+    attachemntParentlElement.append(attachemntlElement);
+
+</script>
\ No newline at end of file
diff --git a/payroll/templates/cbv/reimbursements/options.html b/payroll/templates/cbv/reimbursements/options.html
new file mode 100644
index 000000000..84953ebc5
--- /dev/null
+++ b/payroll/templates/cbv/reimbursements/options.html
@@ -0,0 +1,32 @@
+{% load i18n %}
+<div class="oh-btn-group"  >
+    {% if perms.payroll.change_reimbursement or request.user == instance.employee_id.employee_user_id %}
+        {% if instance.status == 'requested' %}
+            <a
+                onclick="event.stopPropagation()"
+                hx-get="{% url 'reimbursement-update' instance.id %}"
+                hx-target="#genericModalBody"
+                data-toggle="oh-modal-toggle"
+                data-target="#genericModal"
+                class="oh-btn oh-btn--light-bkg w-100"
+                title="{% trans 'Edit' %}"
+            >
+            <ion-icon name="create-outline"></ion-icon>
+            </a>
+        {% else %}
+            <button
+                class="oh-btn oh-btn--light-bkg w-100"
+                disabled
+            >
+                <ion-icon name="create-outline"></ion-icon>
+            </button>
+        {% endif %}
+    {% endif %}
+    {% if perms.payroll.delete_reimbursement %}
+        <a href="{% url "delete-reimbursement" %}?ids={{instance.id}}" onclick="event.stopPropagation();return confirm('Do you want to delete this record?')"
+            class='w-100 oh-btn oh-btn--danger-outline oh-btn--light-bkg' title='{% trans "Delete" %}'>
+
+            <ion-icon name="trash-outline"></ion-icon>
+        </a>
+    {% endif %}
+</div>
\ No newline at end of file
diff --git a/payroll/templates/cbv/reimbursements/reimbursements.html b/payroll/templates/cbv/reimbursements/reimbursements.html
new file mode 100644
index 000000000..c69ae6c9d
--- /dev/null
+++ b/payroll/templates/cbv/reimbursements/reimbursements.html
@@ -0,0 +1,161 @@
+{% extends "index.html" %}
+{% load i18n %}{% load static %}
+
+
+{% block content %}
+<style>
+    .rejected--dot{
+        background-color:red;
+      }
+      .approved--dot{
+        background-color:yellowgreen;
+      }
+      .requested--dot{
+        background-color: rgba(128, 128, 128, 0.482);
+      }
+      .status-requested{
+        border-left: 3.4px solid rgba(128, 128, 128, 0.482) !important;
+        border-radius: 4px 0 0 4px;
+      }
+      .status-rejected{
+        border-left: 3.4px solid red !important;
+        border-radius: 4px 0 0 4px;
+      }
+      .status-approved{
+        border-left: 3.4px solid yellowgreen !important;
+        border-radius: 4px 0 0 4px;
+      }
+    </style>
+
+<meta name="csrf-token" content="{{ csrf_token }}">
+
+
+<div hx-get="{% url "reimbursement-nav" %}" hx-trigger="load">
+</div> 
+{% comment %} my_app/templates/my_app/generic/index.html {% endcomment %}
+
+
+
+{% include "generic/components.html" %}
+
+
+<div
+    class="oh-checkpoint-badge mb-2"
+    id="selectedInstances"
+    data-ids="[]"
+    data-clicked=""
+    style="display: none"
+  ></div>
+ {% comment %} status=requested {% endcomment %}
+  
+  <div 
+  class="oh-wrapper" 
+  id="listContainer">
+  <div class="animated-background">
+  </div>
+</div>
+
+<div class="oh-activity-sidebar" id="activitySidebar" style="z-index:1000;">
+
+    <div class="oh-activity-sidebar__body" id="commentContainer">
+    </div>
+
+  </div>
+
+ 
+  <script>
+    function reimbursementConfirm(params, target, approve = false) {
+        Swal.fire({
+            text: params,
+            icon: "question",
+            showCancelButton: true,
+            confirmButtonColor: "#008000",
+            cancelButtonColor: "#d33",
+            confirmButtonText: "Confirm",
+            cancelButtonText: "Close",
+        }).then((result) => {
+            if (result.isConfirmed) {
+                if (approve) {
+                    $(`${target} [name=amount]`).attr("required", true);
+                }
+                $(target + "Button").click();
+                if (event.target.tagName.toLowerCase() === "form") {
+                    event.target.submit();
+                } else if (event.target.tagName.toLowerCase() === "a") {
+                    window.location.href = event.target.href;
+                }
+            } else {
+            }
+        });
+    }
+    function inputAmount(elem) {
+        let amount=elem.val()
+        $(elem).parents().closest("tr").find('[name=amount]').val(amount);
+      }
+     
+
+     function enlargeImage(src,$element) {
+        $(".enlargeImageContainer").empty()
+        var enlargeImageContainer = $element.parents().closest("li").find(".enlargeImageContainer")
+        enlargeImageContainer.empty()
+        style = 'width:100%; height:90%; box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.2); background:white'
+        var enlargedImage = $('<iframe>').attr({ src: src, style: style })
+        var name = $('<span>').text(src.split('/').pop().replace(/_/g, ' '))
+        enlargeImageContainer.append(enlargedImage)
+        enlargeImageContainer.append(name)
+        setTimeout(function () {
+            enlargeImageContainer.show()
+
+            const iframe = document.querySelector('iframe').contentWindow
+            var iframe_document = iframe.document
+            iframe_image = iframe_document.getElementsByTagName('img')[0]
+            $(iframe_image).attr('style', 'width:100%; height:100%;')
+        }, 100)
+    } 
+
+ function hideEnlargeImage() {
+        var enlargeImageContainer = $('.enlargeImageContainer')
+        enlargeImageContainer.empty()
+    }
+
+    $(document).on('click', function (event) {
+        if (!$(event.target).closest('#enlargeImageContainer').length) {
+            hideEnlargeImage()
+        }
+    }) 
+    function submitForm(elem) {
+        $(elem).siblings(".add_more_submit").click();
+    }
+    
+   function enlargeattachment(src,$element) {
+      $("#enlargeattachmentContainer").empty()
+      var enlargeattachmentContainer = $("#enlargeattachmentContainer")
+      enlargeattachmentContainer.empty()
+      style = 'width:100%; height:90%; box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.2); background:white'
+      var enlargedImage = $('<iframe>').attr({ src: src, style: style })
+      var name = $('<span>').text(src.split('/').pop().replace(/_/g, ' '))
+      enlargeattachmentContainer.append(enlargedImage)
+      enlargeattachmentContainer.append(name)
+      setTimeout(function () {
+          enlargeattachmentContainer.show()
+
+          const iframe = document.querySelector('iframe').contentWindow
+          var iframe_document = iframe.document
+          iframe_image = iframe_document.getElementsByTagName('img')[0]
+          $(iframe_image).attr('style', 'width:100%; height:100%;')
+      }, 100)
+  }
+
+  function hideEnlargeattachment() {
+      var enlargeattachmentContainer = $('#enlargeattachmentContainer')
+      enlargeattachmentContainer.empty()
+  }
+  $(document).on('click', function (event) {
+    if (!$(event.target).closest('#enlargeattachmentContainer').length) {
+      hideEnlargeattachment()
+    }
+  }) 
+</script>
+
+    
+{% endblock %}
\ No newline at end of file
diff --git a/payroll/templates/cbv/settings/is_active_col.html b/payroll/templates/cbv/settings/is_active_col.html
new file mode 100644
index 000000000..824b4de87
--- /dev/null
+++ b/payroll/templates/cbv/settings/is_active_col.html
@@ -0,0 +1,12 @@
+{% if perms.payroll.change_PayslipAutoGenerate or perms.payroll.delete_PayslipAutoGenerate %}
+                        <div class="d-flex">
+                            <div class="oh-switch">
+                                {% if  perms.payroll.change_PayslipAutoGenerate %}
+                                    <input type="checkbox" id="GTIsActivate" data-id ="{{instance.id}}" class="oh-switch__checkbox" {% if instance.auto_generate %} checked {% endif %} onchange="updateAutoPayslipIsActivate(this)">
+                                {% else %}
+                                    <input type="checkbox" id="GTIsActivate" class="oh-switch__checkbox" {% if instance.auto_generate %} checked {% endif %} disabled>
+                                {% endif %}
+                            </div>
+                        </div>
+                    {% endif %}
+
diff --git a/payroll/templates/one_time_deduction.html b/payroll/templates/one_time_deduction.html
index bdb8b9109..382a35b9c 100644
--- a/payroll/templates/one_time_deduction.html
+++ b/payroll/templates/one_time_deduction.html
@@ -55,6 +55,7 @@
 {% endfor %}
 <script>
   function conditionalVisibility() {
+    console.log("______________Onetime========")
   if (!$("#id_is_condition_based").is(":checked")) {
     $('[onclick="conditionAdd()"]').parent().hide()
     $("#conditionContainer").hide();
diff --git a/payroll/templates/payroll/dashboard.html b/payroll/templates/payroll/dashboard.html
index 06efea9bb..db6b77048 100644
--- a/payroll/templates/payroll/dashboard.html
+++ b/payroll/templates/payroll/dashboard.html
@@ -144,7 +144,7 @@
                             </div>
                         </div>
                     </div>
-                    <div class="col-12 col-sm-12 col-md-12 col-lg-6" >
+                    <div class="col-12 col-sm-12 col-md-12 col-lg-6 oh-card-dashboard--moveable mb-4" >
                         <div class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent" style = "cursor: default;">
                             <h6 class="ms-4 m-2 fw-bold">{% trans "Total Payslips Genarated :" %}  <b><span class="payslip-number"></span></b></h6>
                             {% if position == "prefix" %}
@@ -154,9 +154,16 @@
                             {% endif %}
                             <h5 class="ms-4 m-2 fw-bold" style="color:#9C4000">{% trans "Department Total Amount" %}</h5>
                             <hr class="line">
-                            <ul id="department_total" style="height: 286px; overflow-y: auto; list-style: disc;"></ul>
-                            <ul id="department_total_empty" style="height: 232px; overflow-y: auto; list-style: disc;"></ul>
+                            <div id="department_total">
+                            <div class="oh-wrapper" hx-get="{% url "dashboard-department-chart" %}?{{request.GET.urlencode}}"
+                            hx-trigger="click" id="dashboard_department">
+                            <div class="animated-background">
+                            </div>
+                            </div>
                         </div>
+                        </div>
+                            {% comment %} <ul id="department_total" style="height: 286px; overflow-y: auto; list-style: disc;"></ul>
+                            <ul id="department_total_empty" style="height: 232px; overflow-y: auto; list-style: disc;"></ul> {% endcomment %}
                     </div>
 
                     <div class="col-12 col-sm-12 col-md-12 col-lg-6 mb-4">
@@ -193,17 +200,38 @@
                             <button type="submit" hidden>
                         </form>
                     </div>
-                    <div class="col-12 col-sm-12 col-md-12 col-lg-6">
+                    <div class="col-12 col-sm-12 col-md-12 col-lg-6 oh-card-dashboard--moveable mb-4">
                         <div class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent" style = "cursor: default;">
-                            <h4 class="ms-4 m-2 fw-bold text-danger">{% trans "Contracts ending " %}  <b><span class=""></span></b></h4>
-                            <h6 class="ms-4 fw-bold" >{% trans "Number of contracts expiring in " %} <b class="contract-number"></b></h6>
+                            <h4 class="ms-4 m-2 fw-bold text-danger">{% trans "Contracts Ending " %}  <b><span class=""></span></b></h4>
+                            <h6 class="ms-4 fw-bold" >{% trans "Number of contracts expiring in " %} <b class="contract-number"></b><span id="contract-count"></span></h6>
                             <hr class="line">
-                            <ul id="contract_ending" style="height: 200px; overflow-y: auto; list-style: disc;">
+                            <div id="contract_ending" style="height: 200px; overflow-y: auto; list-style: disc;">
+                                <div
+                                class="oh-wrapper"
+                                hx-get="{% url "dashboard-contract-ending" %}?{{request.GET.urlencode}}" hx-trigger="click"
+                                id="contractEnding">
+                                <div class="animated-background">
+                                </div>
+                                </div>
 
-                            </ul>
+                            </div>
                         </div>
                     </div>
-                    <div class="col-12 col-sm-12 col-md-12 col-lg-6">
+                    <div class="col-12 col-sm-12 col-md-12 col-lg-6 oh-card-dashboard--moveable mb-4">
+                        <div class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent" style = "cursor: default;">
+                            <h4 class="ms-4 m-2 fw-bold text-danger">{% trans "Contracts Expired" %}  <b><span class=""></span></b></h4>
+                            <h6 class="ms-4 fw-bold" >{% trans "Number of contracts expired in " %} <b class="contract-expired-number"></b><span id="contract-expired-count"></span></h6>
+                            <hr class="line">
+                            <div id="contract_expired" style="height: 200px; overflow-y: auto; list-style: disc;">
+                                <div class="oh-wrapper"
+                                hx-get="{% url 'dashboard-contract-expired' %}?{{request.GET.urlencode}}" hx-trigger="click" id="contractExpired">
+                                <div class="animated-background">
+                                </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-12 col-sm-12 col-md-12 col-lg-6 oh-card-dashboard--moveable mb-4">
                         <div class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent">
                             <div class="oh-card-dashboard__header oh-card-dashboard__header--divider">
                                 <span class="oh-card-dashboard__title">{% trans "Department Chart" %}</span>
@@ -242,4 +270,22 @@
     })
 
 </script>
+
+<script>
+
+   $(document).ready(function() {
+        $('#monthYearField').on('change', function() {
+            var selectedMonthYear = $(this).val();
+            $('#dashboard_department').attr('hx-vals', JSON.stringify({'monthYearField': selectedMonthYear}));
+            $('#dashboard_department').click();
+            $('#contractEnding').attr('hx-vals', JSON.stringify({'monthYearField': selectedMonthYear}));
+            $('#contractEnding').click();
+            $('#contractExpired').attr('hx-vals', JSON.stringify({'monthYearField': selectedMonthYear}));
+            $('#contractExpired').click();
+        });
+        $('#monthYearField').change();
+
+    });
+</script>
+
 {% endblock content %}
diff --git a/payroll/templates/payroll/htmx/form.html b/payroll/templates/payroll/htmx/form.html
index ccbf99eb6..35b880f12 100644
--- a/payroll/templates/payroll/htmx/form.html
+++ b/payroll/templates/payroll/htmx/form.html
@@ -4,6 +4,8 @@
 <script>
     $(document).ready(function () {
         function conditionalVisibility() {
+    console.log("______________form.ht========")
+
           if (!$("#id_is_condition_based").is(":checked")) {
             $("#id_field, #id_value, #id_condition").hide();
             $("[for='id_field'], [for='id_value'], [for='id_condition']").hide();
diff --git a/payroll/templates/payroll/payslip/bulk_create_payslip.html b/payroll/templates/payroll/payslip/bulk_create_payslip.html
index fe2326c84..c4c86e076 100644
--- a/payroll/templates/payroll/payslip/bulk_create_payslip.html
+++ b/payroll/templates/payroll/payslip/bulk_create_payslip.html
@@ -1,13 +1,13 @@
 {% load i18n %}
-<div class="oh-modal__dialog-header pb-0">
+{% comment %} <div class="oh-modal__dialog-header pb-0">
     <h1 class="oh-modal__dialog-title" id="addEmployeeModalLabel">
         {% trans "Bulk Payslip" %}
     </h1>
     <button class="oh-modal__close" aria-label="Close">
         <ion-icon name="close-outline"></ion-icon>
     </button>
-</div>
-<div class="oh-modal__dialog-body" id="bulkPayslipModal">
+</div> {% endcomment %}
+<div class="oh-modal__dialog-body p-0" id="bulkPayslipModal">
     <form action="{% url 'generate-payslip' %}" class="oh-profile-section pt-2" method="post">
         {% csrf_token %}
         <div class="row">
diff --git a/payroll/templates/payroll/reimbursement/form.html b/payroll/templates/payroll/reimbursement/form.html
index 99eeb0143..13f41dc72 100644
--- a/payroll/templates/payroll/reimbursement/form.html
+++ b/payroll/templates/payroll/reimbursement/form.html
@@ -42,14 +42,14 @@
         </tbody>
     </table>
 <script>
-    toggleReimbursmentType($("#objectCreateModalTarget [name=type]").first());
+    toggleReimbursmentType($("#genericModalBody [name=type]").first());
     removeHighlight();
     var attachemntLabelElement = $(
-        "#objectCreateModalTarget [for=id_attachment]"
+        "#genericModalBody [for=id_attachment]"
     );
-    var attachemntlElement = $("#objectCreateModalTarget #id_attachment");
+    var attachemntlElement = $("#genericModalBody #id_attachment");
     var attachemntParentlElement = $(
-        "#objectCreateModalTarget [for=id_attachment]"
+        "#genericModalBody [for=id_attachment]"
     ).parent();
 
     // Detach both elements from the DOM
diff --git a/payroll/templates/payroll/settings/auto_payslip_settings.html b/payroll/templates/payroll/settings/auto_payslip_settings.html
index 1d3a38adc..636bb198e 100644
--- a/payroll/templates/payroll/settings/auto_payslip_settings.html
+++ b/payroll/templates/payroll/settings/auto_payslip_settings.html
@@ -1,8 +1,13 @@
 {% extends 'settings.html' %} {% load i18n %} {% block settings %} {% load static %}
+{% include "generic/components.html" %}
+<meta name="csrf-token" content="{{ csrf_token }}">
 <div id="ohMessages"></div>
 <div class="oh-inner-sidebar-content">
   {% if perms.payroll.view_PayslipAutoGenerate %}
-  <div
+
+  <div hx-get="{% url "pay-slip-automation-nav" %}" hx-trigger="load" >
+	</div>
+  {% comment %} <div
     class="oh-inner-sidebar-content__header d-flex justify-content-between align-items-center"
   >
     <h2 class="oh-inner-sidebar-content__title">{% trans "Payslip Automation" %}</h2>
@@ -18,15 +23,53 @@
         {% trans "Create" %}
     </button>
     {% endif %}
+  </div> {% endcomment %}
+  <div
+    class="oh-checkpoint-badge mb-2"
+    id="selectedInstances"
+    data-ids="[]"
+    data-clicked=""
+    style="display: none"
+  ></div>
+
+
+  <div
+  class="oh-wrapper"
+  id="listContainer">
+  <div class="animated-background">
   </div>
-    {% if payslip_auto_generate %}
+</div>
+    {% comment %} {% if payslip_auto_generate %}
       {% include 'payroll/settings/payslip_auto_generate_table.html' %}
     {% else %}
       <div style="display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%;">
         <img style="display: block; width: 15%; margin: 20px auto; filter: opacity(0.5);" src="{% static 'images/ui/payment.png' %}" class="" alt="Page not found. 404." />
         <h5 class="oh-404__subtitle">{% trans "There is no auto payslip generation at this moment." %}</h5>
       </div>
-    {% endif %}
+    {% endif %} {% endcomment %}
   {% endif %}
 </div>
+<script src="{% static 'cbv/deleteFunc.js' %}"></script>
+<script>
+  function updateAutoPayslipIsActivate(checkbox) {
+      // Using jQuery to check if the checkbox is checked
+      var isChecked = $(checkbox).prop('checked');
+      var autoId = $(checkbox).data('id');
+      $.ajax({
+        type: "POST",
+        url: "{% url 'activate-auto-payslip-generate' %}",
+        data: { 'isChecked': isChecked, 'autoId':autoId,'csrfmiddlewaretoken': getCookie('csrftoken') },
+        dataType: "json",
+        success: function (response) {
+          $("#ohMessages").append(`
+                  <div class="oh-alert-container">
+                    <div class="oh-alert oh-alert--animated oh-alert--${response.type}">
+                      ${response.message}
+                    </div>
+                  </div>`);
+                  duration = 1500;
+        }
+      });
+    }
+  </script>
 {% endblock settings %}
diff --git a/payroll/templates/payroll/tax/filing_status_list.html b/payroll/templates/payroll/tax/filing_status_list.html
index a068e9d74..85b0599c6 100644
--- a/payroll/templates/payroll/tax/filing_status_list.html
+++ b/payroll/templates/payroll/tax/filing_status_list.html
@@ -63,7 +63,7 @@
                       class="oh-dropdown__link oh-dropdown__link"
                       data-toggle="oh-modal-toggle"
                       data-target="#objectUpdateModal"
-                      hx-get="{% url 'filing-status-update' filing_status_id=filing_status.id %}"
+                      hx-get="{% url 'filing-status-update' pk=filing_status.id %}"
                       onclick="event.stopPropagation()"
                       hx-target="#objectUpdateModalTarget"
                     >
@@ -73,16 +73,16 @@
                   {% endif %}
                   {% if perms.payroll.delete_filingstatus %}
                   <li class="oh-dropdown__item">
-                    <form
-                      hx-confirm="{% trans 'Are you sure to delete this status ?' %}"
-                      hx-post="{% url 'filing-status-delete' filing_status_id=filing_status.id %}"
-                      hx-target="#FilingStatusList"
+                    <a
+                      hx-get="{% url 'generic-delete' %}?model=payroll.FilingStatus&pk={{filing_status.id}}"
+                      hx-target="#deleteConfirmationBody" data-toggle="oh-modal-toggle"
+                      data-target="#deleteConfirmation"
                       style="display: contents">
                       {% csrf_token %}
                       <button class="oh-dropdown__link oh-dropdown__link--danger">
                         {% trans 'Delete' %}
                       </button>
-                    </form>
+                    </a>
                   </li>
                   {% endif %}
                 </ul>
diff --git a/payroll/templatetags/payrollfilters.py b/payroll/templatetags/payrollfilters.py
index ef173f3ef..158e955fe 100644
--- a/payroll/templatetags/payrollfilters.py
+++ b/payroll/templatetags/payrollfilters.py
@@ -9,10 +9,10 @@ def paid_amount(installment):
         deduction.amount for deduction in installment if deduction.installment_payslip()
     ]
 
-    return sum(paid)
+    return round(sum(paid), 2)
 
 
 @register.filter(name="balance_amount")
 def balance_amount(amount, installment):
     balance = amount - paid_amount(installment)
-    return balance
+    return round(balance, 2)
diff --git a/payroll/urls/component_urls.py b/payroll/urls/component_urls.py
index 4d2fe9958..790f8c787 100644
--- a/payroll/urls/component_urls.py
+++ b/payroll/urls/component_urls.py
@@ -6,17 +6,130 @@ This module is used to bind the urls related to payslip and its pay-heads method
 
 from django.urls import path
 
+from payroll.cbv import (
+    allowance_deduction,
+    allowances,
+    asset_fine,
+    deduction,
+    loan_advance_salary,
+    payslip,
+    reimbursements,
+)
 from payroll.models.models import Allowance, Deduction
 from payroll.views import component_views
 
 urlpatterns = [
+    path(
+        "individual-payslip-tab-list/<int:pk>/",
+        payslip.PayrollTab.as_view(),
+        name="individual-payslip-tab-list",
+    ),
+    path("view-payslip/", payslip.PayslipView.as_view(), name="view-payslip"),
+    path("payslip-list/", payslip.PayslipList.as_view(), name="payslip-list"),
+    path("payslip-navbar/", payslip.PayslipNav.as_view(), name="payslip-navbar"),
+    path(
+        "payslip-bulk-export-data/",
+        payslip.PayslipBulkExport.as_view(),
+        name="payslip-bulk-export-data",
+    ),
+    path(
+        "payroll-create-form-view/",
+        payslip.PayrollCreateFormView.as_view(),
+        name="payroll-create-form-view",
+    ),
+    path(
+        "deduction-tab-list/<int:pk>/",
+        allowance_deduction.DeductionTab.as_view(),
+        name="deduction-tab-list",
+    ),
+    path(
+        "allowance-deduction-tab-view/<int:pk>/",
+        allowance_deduction.AllowanceDeductionTabView.as_view(),
+        name="allowance-deduction-tab-view",
+    ),
+    path(
+        "deduction-detail-view/<int:pk>/",
+        allowance_deduction.DeductionDetailView.as_view(),
+        name="deduction-detail-view",
+    ),
+    path(
+        "allowance-tab-list/<int:pk>/",
+        allowance_deduction.AllowanceTabList.as_view(),
+        name="allowance-tab-list",
+    ),
+    path(
+        "allowance-detail-view/<int:pk>/",
+        allowance_deduction.AllowanceDetailView.as_view(),
+        name="allowance-detail-view",
+    ),
+    path(
+        "view-loan/", loan_advance_salary.AdvanceSalaryView.as_view(), name="view-loan"
+    ),
+    path(
+        "loan-generic-tab-view/",
+        loan_advance_salary.LoansGenericTab.as_view(),
+        name="loan-generic-tab-view",
+    ),
+    path(
+        "loan-tab-list-view/",
+        loan_advance_salary.LoanListView.as_view(),
+        name="loan-tab-list-view",
+    ),
+    path(
+        "advanced-salary-list-view/",
+        loan_advance_salary.AdvancedSalaryList.as_view(),
+        name="advanced-salary-list-view",
+    ),
+    path(
+        "fines-list-view/",
+        loan_advance_salary.FinesListView.as_view(),
+        name="fines-list-view",
+    ),
+    path(
+        "loan-navbar-view/",
+        loan_advance_salary.LoanNavView.as_view(),
+        name="loan-navbar-view",
+    ),
+    path(
+        "loan-detail-view/<int:pk>/",
+        loan_advance_salary.LoanDetailView.as_view(),
+        name="loan-detail-view",
+    ),
+    path(
+        "loan-create-form/",
+        loan_advance_salary.LoanFormView.as_view(),
+        name="loan-create-form",
+    ),
+    path(
+        "loan-edit-form/<int:pk>/",
+        loan_advance_salary.LoanFormView.as_view(),
+        name="loan-edit-form",
+    ),
+    path(
+        "view-allowance/", allowances.AllowanceViewPage.as_view(), name="view-allowance"
+    ),
+    path(
+        "allowances-list-view/",
+        allowances.AllowanceListView.as_view(),
+        name="allowances-list-view",
+    ),
+    path(
+        "allowances-nav-view/",
+        allowances.AllowanceNavView.as_view(),
+        name="allowances-nav-view",
+    ),
+    path(
+        "allowances-card-view/",
+        allowances.AllowancesCardView.as_view(),
+        name="allowances-card-view",
+    ),
     path(
         "allowances-deductions-tab/<int:emp_id>",
         component_views.allowances_deductions_tab,
         name="allowances-deductions-tab",
     ),
     path("create-allowance", component_views.create_allowance, name="create-allowance"),
-    path("view-allowance/", component_views.view_allowance, name="view-allowance"),
+    # path("view-allowance/", component_views.view_allowance, name="view-allowance"),
     path(
         "single-allowance-view/<int:allowance_id>",
         component_views.view_single_allowance,
@@ -30,17 +143,38 @@ urlpatterns = [
         kwargs={"model": Allowance},
     ),
     path(
-        "delete-allowance/<int:allowance_id>/",
+        "delete-allowance/<int:allowance_id>",
         component_views.delete_allowance,
         name="delete-allowance",
     ),
+    path(
+        "delete-allowances/<int:allowance_id>/<int:emp_id>/",
+        component_views.delete_allowance,
+        name="delete-allowances",
+    ),
     path(
         "delete-employee-allowance/<int:allowance_id>/",
         component_views.delete_allowance,
         name="delete-employee-allowance",
     ),
     path("create-deduction", component_views.create_deduction, name="create-deduction"),
-    path("view-deduction/", component_views.view_deduction, name="view-deduction"),
+    # path("view-deduction/", component_views.view_deduction, name="view-deduction"),
+    path(
+        "deduction-view-list/",
+        deduction.DeductionListView.as_view(),
+        name="deduction-view-list",
+    ),
+    path(
+        "deduction-view-nav/",
+        deduction.DeductionNav.as_view(),
+        name="deduction-view-nav",
+    ),
+    path(
+        "deduction-view-card/",
+        deduction.DeductionCardView.as_view(),
+        name="deduction-view-card",
+    ),
+    path("view-deduction/", deduction.DeductionView.as_view(), name="view-deduction"),
     path(
         "single-deduction-view/<int:deduction_id>",
         component_views.view_single_deduction,
@@ -86,7 +220,7 @@ urlpatterns = [
         component_views.view_individual_payslip,
         name="view-individual-payslip",
     ),
-    path("view-payslip/", component_views.view_payslip, name="view-payslip"),
+    # path("view-payslip/", component_views.view_payslip, name="view-payslip"),
     path(
         "hx-create-allowance",
         component_views.hx_create_allowance,
@@ -99,7 +233,7 @@ urlpatterns = [
         component_views.add_deduction,
         name="add-payslip-deduction",
     ),
-    path("view-loan/", component_views.view_loans, name="view-loan"),
+    # path("view-loan/", component_views.view_loans, name="view-loan"),
     path("create-loan/", component_views.create_loan, name="create-loan"),
     path(
         "view-installments/",
@@ -113,16 +247,21 @@ urlpatterns = [
     ),
     path("delete-loan/", component_views.delete_loan, name="delete-loan"),
     path("search-loan/", component_views.search_loan, name="search-loan"),
+    # path(
+    #     "asset-fine/",
+    #     component_views.asset_fine,
+    #     name="asset-fine",
+    # ),
     path(
         "asset-fine/",
-        component_views.asset_fine,
+        asset_fine.AssetFineFormView.as_view(),
         name="asset-fine",
     ),
-    path(
-        "view-reimbursement/",
-        component_views.view_reimbursement,
-        name="view-reimbursement",
-    ),
+    # path(
+    #     "view-reimbursement",
+    #     component_views.view_reimbursement,
+    #     name="view-reimbursement",
+    # ),
     path(
         "create-reimbursement",
         component_views.create_reimbursement,
@@ -173,4 +312,59 @@ urlpatterns = [
         component_views.payslip_detailed_export,
         name="payslip-detailed-export",
     ),
+    path(
+        "view-reimbursement",
+        reimbursements.ReimbursementsView.as_view(),
+        name="view-reimbursement",
+    ),
+    path(
+        "reimbursement-nav",
+        reimbursements.ReimbursementsNav.as_view(),
+        name="reimbursement-nav",
+    ),
+    path(
+        "tab-reimbursement",
+        reimbursements.ReimbursementsAndEncashmentsTabView.as_view(),
+        name="tab-reimbursement",
+    ),
+    path(
+        "detail-view-reimbursement/<int:pk>/",
+        reimbursements.ReimbursementsDetailView.as_view(),
+        name="detail-view-reimbursement",
+    ),
+    path(
+        "detail-view-leave-encashment/<int:pk>/",
+        reimbursements.LeaveEncashmentsDetailedView.as_view(),
+        name="detail-view-leave-encashment",
+    ),
+    path(
+        "detail-view-bonus-encashment/<int:pk>/",
+        reimbursements.BonusEncashmentsDetailedView.as_view(),
+        name="detail-view-bonus-encashment",
+    ),
+    path(
+        "list-reimbursement",
+        reimbursements.ReimbursementsListView.as_view(),
+        name="list-reimbursement",
+    ),
+    path(
+        "list-leave-encash",
+        reimbursements.LeaveEncashmentsListView.as_view(),
+        name="list-leave-encash",
+    ),
+    path(
+        "list-bonus-encash",
+        reimbursements.BonusEncashmentsListView.as_view(),
+        name="list-bonus-encash",
+    ),
+    path(
+        "reimbursement-create",
+        reimbursements.ReimbursementsFormView.as_view(),
+        name="reimbursement-create",
+    ),
+    path(
+        "reimbursement-update/<int:pk>",
+        reimbursements.ReimbursementsFormView.as_view(),
+        name="reimbursement-update",
+    ),
 ]
diff --git a/payroll/urls/tax_urls.py b/payroll/urls/tax_urls.py
index 1d62419d3..6bae28a04 100644
--- a/payroll/urls/tax_urls.py
+++ b/payroll/urls/tax_urls.py
@@ -6,6 +6,7 @@ This module is used to bind url patterns with django views that related to feder
 
 from django.urls import path
 
+from payroll.cbv import federal_tax
 from payroll.views import tax_views
 
 urlpatterns = [
@@ -13,15 +14,25 @@ urlpatterns = [
         "filing-status-view/", tax_views.filing_status_view, name="filing-status-view"
     ),
     path(
-        "create-filing-status",
-        tax_views.create_filing_status,
+        "create-filing-status/",
+        federal_tax.FederalTaxFormView.as_view(),
         name="create-filing-status",
     ),
+    # path(
+    #     "create-filing-status",
+    #     tax_views.create_filing_status,
+    #     name="create-filing-status",
+    # ),
     path(
-        "filing-status-update/<int:filing_status_id>",
-        tax_views.update_filing_status,
+        "filing-status-update/<int:pk>/",
+        federal_tax.FederalTaxFormView.as_view(),
         name="filing-status-update",
     ),
+    # path(
+    #     "filing-status-update/<int:filing_status_id>",
+    #     tax_views.update_filing_status,
+    #     name="filing-status-update",
+    # ),
     path(
         "filing-status-delete/<int:filing_status_id>",
         tax_views.filing_status_delete,
@@ -39,14 +50,24 @@ urlpatterns = [
     ),
     path(
         "tax-bracket-create/<int:filing_status_id>",
-        tax_views.create_tax_bracket,
+        federal_tax.TaxBracketCreateForm.as_view(),
         name="tax-bracket-create",
     ),
+    # path(
+    #     "tax-bracket-create/<int:filing_status_id>",
+    #     tax_views.create_tax_bracket,
+    #     name="tax-bracket-create",
+    # ),
     path(
-        "tax-bracket-update/<int:tax_bracket_id>/",
-        tax_views.update_tax_bracket,
+        "tax-bracket-update/<int:pk>/",
+        federal_tax.TaxBracketCreateForm.as_view(),
         name="tax-bracket-update",
     ),
+    # path(
+    #     "tax-bracket-update/<int:tax_bracket_id>/",
+    #     tax_views.update_tax_bracket,
+    #     name="tax-bracket-update",
+    # ),
     path(
         "tax-bracket-delete/<int:tax_bracket_id>/",
         tax_views.delete_tax_bracket,
diff --git a/payroll/urls/urls.py b/payroll/urls/urls.py
index eaed680ee..15d62d152 100644
--- a/payroll/urls/urls.py
+++ b/payroll/urls/urls.py
@@ -6,6 +6,7 @@ This module is used to map url pattern or request path with view functions
 
 from django.urls import include, path
 
+from payroll.cbv import contracts, dashboard, payslip_automation
 from payroll.models.models import Contract, Payslip
 from payroll.views import views
 
@@ -45,14 +46,14 @@ urlpatterns = [
         views.contract_delete,
         name="delete-contract-modal",
     ),
-    path("view-contract/", views.contract_view, name="view-contract"),
+    # path("view-contract/", views.contract_view, name="view-contract"),
     path(
         "single-contract-view/<int:contract_id>/",
         views.view_single_contract,
         name="single-contract-view",
     ),
     path("payslip-pdf/<int:id>", views.payslip_pdf, name="payslip-pdf"),
-    path("contract-filter", views.contract_filter, name="contract-filter"),
+    # path("contract-filter", views.contract_filter, name="contract-filter"),
     path("settings", views.settings, name="payroll-settings"),
     path(
         "payslip-status-update/<int:payslip_id>/",
@@ -103,16 +104,31 @@ urlpatterns = [
         views.payslip_details,
         name="dashboard-payslip-details",
     ),
+    # path(
+    #     "dashboard-department-chart",
+    #     views.dashboard_department_chart,
+    #     name="dashboard-department-chart",
+    # ),
     path(
         "dashboard-department-chart",
-        views.dashboard_department_chart,
+        dashboard.DashboardDepartmentPayslip.as_view(),
         name="dashboard-department-chart",
     ),
+    # path(
+    #     "dashboard-contract-ending",
+    #     views.contract_ending,
+    #     name="dashboard-contract-ending",
+    # ),
     path(
         "dashboard-contract-ending",
-        views.contract_ending,
+        dashboard.DashboardContractList.as_view(),
         name="dashboard-contract-ending",
     ),
+    path(
+        "dashboard-contract-expired",
+        dashboard.DashboardContractListExpired.as_view(),
+        name="dashboard-contract-expired",
+    ),
     path(
         "dashboard-export/",
         views.payslip_export,
@@ -171,6 +187,19 @@ urlpatterns = [
         views.initial_notice_period,
         name="initial-notice-period",
     ),
+    path("view-contract/", contracts.ContractsView.as_view(), name="view-contract"),
+    path("contract-filter/", contracts.ContractsList.as_view(), name="contract-filter"),
+    path("contracts-nav/", contracts.ContractsNav.as_view(), name="contracts-nav"),
+    path(
+        "contracts-export/",
+        contracts.ContractsExportView.as_view(),
+        name="contracts-export",
+    ),
+    path(
+        "contracts-detail-view/<int:pk>/",
+        contracts.ContractsDetailView.as_view(),
+        name="contracts-detail-view",
+    ),
     # ===========================Auto payslip generate================================
     path(
         "auto-payslip-settings-view/",
@@ -197,4 +226,29 @@ urlpatterns = [
         views.activate_auto_payslip_generate,
         name="activate-auto-payslip-generate",
     ),
+    path(
+        "pay-slip-automation-list",
+        payslip_automation.PaySlipAutomationListView.as_view(),
+        name="pay-slip-automation-list",
+    ),
+    path(
+        "pay-slip-automation-nav",
+        payslip_automation.PaySlipAutomationNav.as_view(),
+        name="pay-slip-automation-nav",
+    ),
+    path(
+        "pay-slip-automation-create",
+        payslip_automation.PaySlipAutomationFormView.as_view(),
+        name="pay-slip-automation-create",
+    ),
+    path(
+        "pay-slip-automation-update/<int:pk>/",
+        payslip_automation.PaySlipAutomationFormView.as_view(),
+        name="pay-slip-automation-update",
+    ),
+    path(
+        "pay-slip-automation-delete/<int:auto_id>/",
+        payslip_automation.DeleteAutoPayslipView.as_view(),
+        name="pay-slip-automation-delete",
+    ),
 ]
diff --git a/payroll/views/component_views.py b/payroll/views/component_views.py
index a507f6712..6fd3afbc4 100644
--- a/payroll/views/component_views.py
+++ b/payroll/views/component_views.py
@@ -25,6 +25,7 @@ from openpyxl import Workbook
 from openpyxl.styles import Alignment, Border, Font, Side
 from openpyxl.utils import get_column_letter
 
+import payroll.models.models
 from base.backends import ConfiguredEmailBackend
 from base.methods import (
     closest_numbers,
@@ -86,6 +87,8 @@ from payroll.models.models import (
 )
 from payroll.threadings.mail import MailSendThread
 
+# from asset.models import Asset
+
 
 def return_none(a, b):
     return None
@@ -386,7 +389,8 @@ def create_allowance(request):
             form.save()
             form = forms.AllowanceForm()
             messages.success(request, _("Allowance created."))
-            return redirect(view_allowance)
+            # return redirect(view_allowance)
+            return redirect(reverse("view-allowance"))
     return render(request, "payroll/common/form.html", {"form": form})
 
 
@@ -396,7 +400,10 @@ def view_allowance(request):
     """
     This method is used render template to view all the allowance instances
     """
-    allowances = Allowance.objects.exclude(only_show_under_employee=True)
+
+    allowances = payroll.models.models.Allowance.objects.exclude(
+        only_show_under_employee=True
+    )
     allowance_filter = AllowanceFilter(request.GET)
     allowances = paginator_qry(allowances, request.GET.get("page"))
     allowance_ids = json.dumps([instance.id for instance in allowances.object_list])
@@ -483,46 +490,94 @@ def update_allowance(request, allowance_id, **kwargs):
         if form.is_valid():
             form.save()
             messages.success(request, _("Allowance updated."))
-            return redirect(view_allowance)
+            return redirect(reverse("view-allowance"))
     return render(request, "payroll/common/form.html", {"form": form})
 
 
+# @login_required
+# @hx_request_required
+# @permission_required("payroll.delete_allowance")
+# def delete_allowance(request, allowance_id):
+#     """
+#     This method is used to delete the allowance instance
+#     """
+#     target = request.META.get("HTTP_HX_TARGET")
+
+
+#     try:
+#         allowance = payroll.models.models.Allowance.objects.filter(
+#             id=allowance_id
+#         ).first()
+#         if allowance:
+#             # allowance.delete()
+#             messages.success(request, _("Allowance deleted successfully"))
+#         else:
+#             messages.error(request, _("Allowance not found"))
+
+#     except ValidationError as validation_error:
+#         messages.error(
+#             request, _("Validation error occurred while deleting the allowance")
+#         )
+#         messages.error(request, str(validation_error))
+#     except Exception as exception:
+#         messages.error(request, _("An error occurred while deleting the allowance"))
+#         messages.error(request, str(exception))
+#     if target and target == "allowance_id":
+#         return redirect(reverse("allowances-list-view"))
+#         # return HttpResponse("<script>location.reload();</script>")
+#     if target and target == "allowance_tab_id":
+#         # return redirect(reverse("allowance-tab-list"))
+#         return HttpResponse("<script>location.reload();</script>")
+
+#     if (
+#         request.path.split("/")[2] == "delete-employee-allowance"
+#         or not payroll.models.models.Allowance.objects.filter()
+#     ):
+#         return HttpResponse("<script>window.location.reload();</script>")
+#     return redirect(filter_allowance)
+
+
 @login_required
 @hx_request_required
 @permission_required("payroll.delete_allowance")
-def delete_allowance(request, allowance_id):
-    """
-    This method is used to delete the allowance instance
-    """
-    previous_data = get_urlencode(request)
-    try:
-        allowance = Allowance.objects.filter(id=allowance_id).first()
-        if allowance:
-            allowance.delete()
-            messages.success(request, _("Allowance deleted successfully"))
-        else:
-            messages.error(request, _("Allowance not found"))
-    except Exception as e:
-        messages.error(request, _("An error occurred while deleting the allowance"))
-        messages.error(request, str(e))
-
-    if (
-        request.path.split("/")[2] == "delete-employee-allowance"
-        or not Allowance.objects.exists()
-    ):
-        return HttpResponse("<script>window.location.reload();</script>")
-
+def delete_allowance(request, allowance_id, emp_id=None):
+    target = request.META.get("HTTP_HX_TARGET")
     instances_ids = request.GET.get("instances_ids")
+    next_instance = None
+    instances_list = None
     if instances_ids:
         instances_list = json.loads(instances_ids)
         previous_instance, next_instance = closest_numbers(instances_list, allowance_id)
-        if allowance_id in instances_list:
-            instances_list.remove(allowance_id)
-            url = f"/payroll/single-allowance-view/{next_instance}"
-            params = f"?{previous_data}&instances_ids={instances_list}"
-            return redirect(url + params)
+        instances_list.remove(allowance_id)
+    allowance = payroll.models.models.Allowance.objects.filter(id=allowance_id).first()
+    if allowance:
+        allowance.delete()
+        messages.success(request, _("Allowance deleted successfully"))
+    else:
+        messages.error(request, _("Allowance not found"))
 
-    return redirect(f"/payroll/filter-allowance?{previous_data}")
+    paths = {
+        "payroll-deduction-container": f"/payroll/filter_allowance?{request.GET.urlencode()}",
+        "allowance_tab_id": f"/payroll/allowance-tab-list/{emp_id}?deleted=true",
+        "allowance_id": "/payroll/allowances-list-view/",
+        "allowance_card": "/payroll/allowances-card-view/",
+        "genericModalBody": f"/payroll/allowance-detail-view/{next_instance}?instance_ids={instances_list}&deleted=true",
+    }
+    http_hx_target = request.META.get("HTTP_HX_TARGET")
+    redirected_path = paths.get(http_hx_target)
+    if http_hx_target:
+        if (
+            http_hx_target == "payroll-deduction-container"
+            and not Deduction.objects.filter()
+        ):
+            return HttpResponse("<script>window.location.reload();</script>")
+        if redirected_path:
+            return redirect(redirected_path)
+
+    default_redirect = (
+        request.path if http_hx_target else request.META.get("HTTP_REFERER", "/")
+    )
+    return HttpResponseRedirect(default_redirect)
 
 
 @login_required
@@ -537,7 +592,8 @@ def create_deduction(request):
         if form.is_valid():
             form.save()
             messages.success(request, _("Deduction created."))
-            return redirect(view_deduction)
+            # return redirect(view_deduction)
+            return redirect(reverse("view-deduction"))
     return render(request, "payroll/common/form.html", {"form": form})
 
 
@@ -660,7 +716,7 @@ def update_deduction(request, deduction_id, **kwargs):
         if form.is_valid():
             form.save()
             messages.success(request, _("Deduction updated."))
-            return redirect(view_deduction)
+            return redirect(reverse("view-deduction"))
     return render(request, "payroll/common/form.html", {"form": form})
 
 
@@ -685,9 +741,12 @@ def delete_deduction(request, deduction_id, emp_id=None):
         messages.error(request, _("Deduction not found"))
 
     paths = {
+        "deduct-container": f"/payroll/deduction-view-list?{request.GET.urlencode()}",
         "payroll-deduction-container": f"/payroll/filter-deduction?{request.GET.urlencode()}",
-        "allowance_deduction": f"/payroll/allowances-deductions-tab/{emp_id}",
-        "objectDetailsModalTarget": f"/payroll/single-deduction-view/{next_instance}?{previous_data}&instances_ids={instances_list}",
+        "allowance_deduction": f"/employee/allowances-deductions-tab/{emp_id}",
+        "deduct-div": f"/payroll/deduction-tab-list/{emp_id}?deleted=true",
+        "objectDetailsModalTarget": f"/payroll/single-deduction-view/{next_instance}?instances_ids={instances_list}",
+        "genericModalBody": f"/payroll/deduction-detail-view/{next_instance}?instance_ids={instances_list}&deleted=true",
     }
     http_hx_target = request.META.get("HTTP_HX_TARGET")
     redirected_path = paths.get(http_hx_target)
@@ -699,6 +758,7 @@ def delete_deduction(request, deduction_id, emp_id=None):
             return HttpResponse("<script>window.location.reload();</script>")
         if redirected_path:
             return redirect(redirected_path)
+
     default_redirect = (
         request.path if http_hx_target else request.META.get("HTTP_REFERER", "/")
     )
@@ -807,6 +867,7 @@ def check_contract_start_date(request):
     """
     Check if the employee's contract start date is after the provided payslip start date.
     """
+
     employee_id = request.GET.get("employee_id")
     start_date = request.GET.get("start_date")
 
@@ -1172,14 +1233,18 @@ def hx_create_allowance(request):
 
 
 @login_required
+# @hx_request_required
 @permission_required("payroll.add_payslip")
 def send_slip(request):
     """
     Send payslip method
     """
+
     email_backend = ConfiguredEmailBackend()
     view = request.GET.get("view")
     payslip_ids = request.GET.getlist("id")
+
+    # payslip_ids = request.GET.get("id")
     payslips = Payslip.objects.filter(id__in=payslip_ids)
     if not getattr(
         email_backend, "dynamic_from_email_with_display_name", None
@@ -1188,7 +1253,7 @@ def send_slip(request):
         if view:
             return HttpResponse("<script>window.location.reload()</script>")
         else:
-            return redirect(filter_payslip)
+            return redirect(reverse("payslip-list"))
 
     result_dict = defaultdict(
         lambda: {"employee_id": None, "instances": [], "count": 0}
@@ -1198,13 +1263,14 @@ def send_slip(request):
         result_dict[employee_id]["employee_id"] = employee_id
         result_dict[employee_id]["instances"].append(payslip)
         result_dict[employee_id]["count"] += 1
+
     mail_thread = MailSendThread(request, result_dict=result_dict, ids=payslip_ids)
     mail_thread.start()
     messages.info(request, "Mail processing")
     if view:
         return HttpResponse("<script>window.location.reload()</script>")
     else:
-        return redirect(filter_payslip)
+        return redirect(reverse("payslip-list"))
 
 
 @login_required
@@ -1257,6 +1323,9 @@ def add_bonus(request):
                         ).format(employee),
                     )
             return HttpResponse("<script>window.location.reload()</script>")
+    else:
+        print(form.errors)
+
     return render(
         request,
         "payroll/bonus/form.html",
@@ -1384,6 +1453,7 @@ def view_installments(request):
     installments = loan.deduction_ids.all()
 
     requests_ids_json = request.GET.get("instances_ids")
+    previous_id, next_id = None, None
     if requests_ids_json:
         requests_ids = json.loads(requests_ids_json)
         previous_id, next_id = closest_numbers(requests_ids, int(loan_id))
@@ -1423,7 +1493,8 @@ def delete_loan(request):
             messages.success(request, "Loan account deleted")
         else:
             messages.error(request, "Loan account cannot be deleted")
-    return redirect(view_loans)
+    # return redirect(view_loans)
+    return redirect(reverse("view-loan"))
 
 
 @login_required
@@ -1467,6 +1538,7 @@ def edit_installment_amount(request):
 
     return render(
         request,
+        # "cbv/loan/loan_detail_view.html",
         "payroll/loan/installments.html",
         {
             "installments": loan.deduction_ids.all(),
@@ -1747,7 +1819,7 @@ def approve_reimbursements(request):
                 redirect=reverse("view-reimbursement") + f"?id={reimbursement.id}",
                 icon="checkmark",
             )
-    return redirect(view_reimbursement)
+    return redirect(reverse("view-reimbursement"))
 
 
 @login_required
@@ -1774,7 +1846,7 @@ def delete_reimbursements(request):
         icon="trash",
     )
 
-    return redirect(view_reimbursement)
+    return redirect("view-reimbursement")
 
 
 @login_required
diff --git a/payroll/views/views.py b/payroll/views/views.py
index 2d8a54fc9..4a703ed91 100644
--- a/payroll/views/views.py
+++ b/payroll/views/views.py
@@ -123,7 +123,7 @@ def contract_update(request, contract_id, **kwargs):
         if contract_form.is_valid():
             contract_form.save()
             messages.success(request, _("Contract updated"))
-            return redirect(contract_view)
+            return redirect(reverse("view-contract"))
     return render(
         request,
         "payroll/common/form.html",
@@ -469,7 +469,7 @@ def update_payslip_status(request, payslip_id):
     if view:
         from .component_views import filter_payslip
 
-        return redirect(filter_payslip)
+        return redirect(reverse("payslip-list"))
     data = payslip.pay_head_data
     data["employee"] = payslip.employee_id
     data["payslip"] = payslip
@@ -664,7 +664,7 @@ def delete_payslip(request, payslip_id):
         messages.error(request, _("Something went wrong"))
     if not Payslip.objects.filter():
         return HttpResponse("<script>window.location.reload()</script>")
-    return redirect(filter_payslip)
+    return redirect(reverse("payslip-list"))
 
 
 @login_required
@@ -1924,8 +1924,10 @@ def delete_auto_payslip(request, auto_id):
 
     """
     try:
+        count = PayslipAutoGenerate.objects.count()
         auto_payslip = PayslipAutoGenerate.objects.get(id=auto_id)
         if not auto_payslip.auto_generate:
+            delete_error = False
             company = (
                 auto_payslip.company_id if auto_payslip.company_id else "All company"
             )
@@ -1934,8 +1936,28 @@ def delete_auto_payslip(request, auto_id):
                 request, _(f"Payslip auto generate for {company} deleted successfully.")
             )
         else:
+            delete_error = True
             messages.info(request, _(f"Active 'Payslip auto generate' cannot delete."))
-        return HttpResponse("<script>window.location.reload();</script>")
     except PayslipAutoGenerate.DoesNotExist:
+        delete_error = True
         messages.error(request, _("Payslip auto generate not found."))
-    return HttpResponseRedirect(request.META.get("HTTP_REFERER", "/"))
+    if delete_error or count == 1:
+        print("==============================================")
+        return HttpResponse("<script>$('.reload-record').click();</script>")
+    return HttpResponse("<script>$('#reloadMessagesButton').click();</script>")
+
+
+@login_required
+def payroll_tab(request, pk, **kwargs):
+    """
+    method for rendering payroll tab
+    """
+
+    employee = Employee.objects.get(id=pk)
+    return render(
+        request,
+        "tabs/payroll-tab.html",
+        {
+            "employee": employee,
+        },
+    )
diff --git a/pms/cbv/__init__.py b/pms/cbv/__init__.py
new file mode 100644
index 000000000..e69de29bb
diff --git a/pms/cbv/accessibility.py b/pms/cbv/accessibility.py
new file mode 100644
index 000000000..43a12f272
--- /dev/null
+++ b/pms/cbv/accessibility.py
@@ -0,0 +1,32 @@
+"""
+Accessiblility for pms
+"""
+
+from django.contrib.auth.context_processors import PermWrapper
+from base.methods import check_manager
+from employee.models import Employee
+
+
+def performance_accessibility(
+    request, instance: object = None, user_perms: PermWrapper = [], *args, **kwargs
+) -> bool:
+    """
+    permission for performance tab
+    """
+    employee = Employee.objects.get(id=instance.pk)
+    check_manages = check_manager(request.user.employee_get, instance)
+    return (
+        request.user == employee.employee_user_id
+        or check_manages
+        or request.user.has_perm("pms.view_feedback")
+    )
+
+
+def create_objective_accessibility(
+    request, instance: object = None, user_perms: PermWrapper = [], *args, **kwargs
+) -> bool:
+    """
+    To check the user has permission to add objectives
+    """
+    return request.user.has_perm("pms.add_objective")
+        
diff --git a/pms/cbv/dashboard.py b/pms/cbv/dashboard.py
new file mode 100644
index 000000000..eb9988c25
--- /dev/null
+++ b/pms/cbv/dashboard.py
@@ -0,0 +1,146 @@
+"""
+This page handles the cbv methods for dashboard views
+"""
+
+
+from typing import Any
+from django.urls import reverse
+from django.db.models import Q
+from django.utils.decorators import method_decorator
+from django.utils.translation import gettext_lazy as _
+from base.methods import filtersubordinates
+from horilla_views.cbv_methods import login_required
+from horilla_views.generic.cbv.views import HorillaListView
+from pms.cbv.feedback import RequestedFeedbackTab
+from pms.filters import EmployeeObjectiveFilter, KeyResultFilter
+from pms.models import EmployeeKeyResult, EmployeeObjective
+
+
+@method_decorator(login_required, name="dispatch")
+class DashboardFeedbackView(RequestedFeedbackTab):
+    """
+    feedback view on dashboard
+    """
+
+    show_toggle_form = False
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("dashboard-feedback-answer")
+        self.request.dashboard_feedback = "dashboard_feedback"
+
+    
+    def get_queryset(self):
+        queryset = super().get_queryset()
+        employee = self.request.user.employee_get
+        # employee = Employee.objects.filter(employee_user_id=user).first()
+        feedback_requested_ids = queryset.filter(
+            Q(manager_id=employee, manager_id__is_active=True)
+            | Q(colleague_id=employee, colleague_id__is_active=True)
+            | Q(subordinate_id=employee, subordinate_id__is_active=True)
+        ).distinct()
+
+        queryset = feedback_requested_ids.exclude(feedback_answer__employee_id=employee)
+        return queryset
+
+
+
+    columns = [
+        (_("Employee"), "employee_id", "employee_id__get_avatar"),
+        (_("Title"), "review_cycle"),
+    ]
+
+    header_attrs = {
+        "employee_id": """
+                        style ="width:100px !important"
+                        """,
+        "review_cycle": """
+                        style ="width:100px !important"
+                        """,
+        "action": """
+                        style ="width:100px !important"
+                        """,
+    }
+
+    row_status_indications = None
+
+    bulk_select_option = False
+
+
+class KeyResultStatus(HorillaListView):
+
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.view_id = "keyContainer"
+        self.search_url = reverse("key-result-view")
+
+    model = EmployeeKeyResult
+    filter_class = KeyResultFilter
+    show_filter_tags = False
+    bulk_select_option = False
+
+    header_attrs = {
+        "key_result_column" : """
+                              style="width:200px !important;"
+                              """
+    }
+
+
+    columns = [
+        (_("Title"),"key_result_column"),
+        (_("Start Value"),"start_value"),
+        (_("Current Value"),"current_value_col"),
+        (_("Target Value"),"target_value_col"),
+        (_("Progress Percentage"),"progress_col"),
+        (_("Start Date"),"start_date"),
+        (_("End date"),"end_date"),
+        (_("Status"),"status")
+    ]
+
+    action_method = "actions_col"
+
+    row_attrs = """
+                id="empObjTr{get_instance_id}"
+                data-kr-id ="{get_instance_id}"
+                """
+
+    @method_decorator(login_required, name="dispatch")
+    def dispatch(self, *args, **kwargs):
+        return super(HorillaListView, self).dispatch(*args, **kwargs)
+
+
+
+
+class DasboardObjectivesRisk(HorillaListView):
+    """
+    list view for objectives at risk 
+    """
+
+    model = EmployeeObjective
+    filter_class = EmployeeObjectiveFilter
+    bulk_select_option = False
+    show_toggle_form = False
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("dashboard-risk-objectives")
+
+    def get_queryset(self):
+        queryset = super().get_queryset()
+        queryset = queryset.filter(status="At Risk")
+        return queryset
+
+    columns = [
+        (_("Employee"), "employee_id", "employee_id__get_avatar"),
+    ]
+
+    row_attrs = """
+                hx-get='{employee_objective_detail_view}?instance_ids={ordered_ids}'
+                hx-target="#genericModalBody"
+                data-target="#genericModal"
+                data-toggle="oh-modal-toggle"
+                """
+
+
+    
diff --git a/pms/cbv/feedback.py b/pms/cbv/feedback.py
new file mode 100644
index 000000000..a37cc88c1
--- /dev/null
+++ b/pms/cbv/feedback.py
@@ -0,0 +1,539 @@
+"""
+this page handles cbv of assigned leave page
+"""
+
+from typing import Any
+from django.shortcuts import render
+from django.urls import reverse,reverse_lazy
+from django.contrib import messages
+from django.contrib.auth.models import User
+from django.http import HttpResponse
+from django.db.models import Q
+from django.utils.translation import gettext_lazy as _
+from django.utils.decorators import method_decorator
+from base.decorators import manager_can_enter
+from notifications.signals import notify
+from base.methods import choosesubordinates, is_reportingmanager
+from employee.cbv.employee_profile import EmployeeProfileView
+from employee.models import Employee
+from horilla_views.generic.cbv.views import (
+    TemplateView,
+    HorillaListView,
+    HorillaTabView,
+    HorillaNavView,
+    HorillaFormView,
+)
+from horilla_views.cbv_methods import login_required
+from pms.filters import AnonymousFilter, FeedbackFilter
+from pms.forms import AnonymousFeedbackForm, FeedbackForm
+from pms.models import AnonymousFeedback, EmployeeKeyResult, Feedback
+from pms.views import send_feedback_notifications
+
+
+@method_decorator(login_required, name="dispatch")
+class FeedbackViewPage(TemplateView):
+    """
+    for 360 feedback page
+    """
+
+    template_name = "cbv/360_feedback/feedback_home.html"
+
+
+@method_decorator(login_required, name="dispatch")
+class FeedbackListView(HorillaListView):
+    """
+    list view
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("feedback-list-page")
+
+    model = Feedback
+    filter_class = FeedbackFilter
+    columns = [
+        (_("Employee"), "employee_id", "employee_id__get_avatar"),
+        (_("Title"), "review_cycle"),
+        (_("Status"), "custom_status_style"),
+        (_("Start Date"), "start_date"),
+        (_("Due On"), "get_feedback_due_date"),
+    ]
+    export_fields = [
+        (
+            _("Answers"),
+            "question_answer",
+            {
+                "question_id__question": "Question",
+                "answer": "Answer",
+                "answer_by": "Answered By",
+            },
+        ),
+    ]
+    action_method = "custom_actions_col"
+
+    header_attrs = {
+        "action": """style="width:200px!important;" """,
+    }
+
+    sortby_mapping = [
+        ("Employee", "employee_id__get_full_name"),
+        ("Status", "custom_status_style"),
+        ("Title", "review_cycle"),
+        ("Status", "custom_status_style"),
+        ("Start Date", "start_date"),
+        ("Due On", "due_days_diff"),
+    ]
+
+    row_attrs = """
+                onclick="
+                event.stopPropagation();
+                window.location.href='{get_individual_feedback}'" 
+                """
+
+    row_status_indications = [
+        (
+            "at_risk--dot",
+            _("At Risk"),
+            """
+            onclick="
+            $('#applyFilter').closest('form').find('[name=status]').val('At Risk');
+            $('#applyFilter').click();
+            "
+            """,
+        ),
+        (
+            "not_started--dot",
+            _("Not Started"),
+            """
+            onclick="
+            $('#applyFilter').closest('form').find('[name=status]').val('Not Started');
+            $('#applyFilter').click();
+            "
+            """,
+        ),
+        (
+            "behind--dot",
+            _("Behind"),
+            """
+            onclick="
+            $('#applyFilter').closest('form').find('[name=status]').val('Behind');
+            $('#applyFilter').click();
+            "
+            """,
+        ),
+        (
+            "closed--dot",
+            _("Closed"),
+            """
+            onclick="
+            $('#applyFilter').closest('form').find('[name=status]').val('Closed');
+            $('#applyFilter').click();
+            "
+            """,
+        ),
+        (
+            "on_track--dot",
+            _("On Track"),
+            """
+            onclick="
+            $('#applyFilter').closest('form').find('[name=status]').val('On Track');
+            $('#applyFilter').click();
+            "
+            """,
+        ),
+    ]
+
+    row_status_class = "status-{status}"
+
+
+@method_decorator(login_required, name="dispatch")
+class FeedbackGenericTabView(HorillaTabView):
+    """
+    tab view of the page
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("feedback-generic-tab")
+
+        tabs = [
+            {
+                "title": _("Self Feedback"),
+                "url": f"{reverse('self-feedback-tab')}",
+            },
+            {
+                "title": _("Requested Feedback"),
+                "url": f"{reverse('requested-feedback-tab')}",
+            },
+            {
+                "title": _("Anonymous Feedback"),
+                "url": f"{reverse('anonymous-feedback-tab')}",
+                "actions": [
+                    {
+                        "action": "Add Anonymous",
+                        "attrs": f"""
+                                data-toggle = "oh-modal-toggle"
+                                data-target = "#genericModal"
+                                hx-target="#genericModalBody"
+                                hx-get ="{reverse('add-anonymous-feedback')}"
+                                style="cursor: pointer;"
+                            """,
+                    }
+                ],
+            },
+        ]
+        if self.request.user.has_perm("pms.view_feedback") or is_reportingmanager(
+            self.request
+        ):
+            tabs.insert(
+                2,
+                {
+                    "title": _("Feedbacks to Review"),
+                    "url": f"{reverse('all-feedback-tab')}",
+                },
+            )
+
+        self.tabs = tabs
+
+
+@method_decorator(login_required, name="dispatch")
+class SelfFeedbacktab(FeedbackListView):
+    """
+    self feedback tab
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("self-feedback-tab")
+        self.request.self_feedback = "self_feedback"
+
+    def get_queryset(self):
+        queryset = super().get_queryset()
+        employee = self.request.user.employee_get
+        # employee = Employee.objects.filter(employee_user_id=user).first()
+        queryset = queryset.filter(employee_id=employee).filter(
+            employee_id__is_active=True
+        )
+        return queryset
+
+
+@method_decorator(login_required, name="dispatch")
+class RequestedFeedbackTab(FeedbackListView):
+    """
+    requested feedback tab
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("requested-feedback-tab")
+        self.request.request_feedback = "request_feedback"
+        self.row_attrs = ''
+
+    def get_queryset(self):
+        queryset = super().get_queryset()
+        employee = self.request.user.employee_get
+        # employee = Employee.objects.filter(employee_user_id=user).first()
+        feedback_requested_ids = queryset.filter(
+            Q(manager_id=employee, manager_id__is_active=True)
+            | Q(colleague_id=employee, colleague_id__is_active=True)
+            | Q(subordinate_id=employee, subordinate_id__is_active=True)
+            | Q(others_id=employee, others_id__is_active=True)
+        ).values_list("id", flat=True)
+
+        queryset = queryset.filter(pk__in=feedback_requested_ids).filter(
+            employee_id__is_active=True
+        )
+
+        return queryset
+
+
+@method_decorator(login_required, name="dispatch")
+class AllFeedbackTab(FeedbackListView):
+    """
+    all feedback tab
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("all-feedback-tab")
+        self.request.all_feedback = "all_feedback"
+
+    def get_queryset(self):
+        queryset = super().get_queryset()
+        # employee = self.request.user
+        employee = self.request.user.employee_get
+        if self.request.user.has_perm("pms.view_feedback"):
+            queryset = queryset.filter(employee_id__is_active=True)
+        else:
+            # employee = self.request.user.employee_get
+            if employee:
+                data = Employee.objects.filter(
+                    employee_work_info__reporting_manager_id=employee, is_active=True
+                )
+                queryset = queryset.filter(
+                    employee_id__in=data, employee_id__is_active=True
+                )
+        return queryset
+
+
+@method_decorator(login_required, name="dispatch")
+class AnonymousFeedbackTab(HorillaListView):
+    """
+    anonymous feedback tab
+    """
+
+    selected_instances_key_id = "anounyselectedInstances"
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("anonymous-feedback-tab")
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        querys = self.get_queryset()
+        anonymous_feedback_ids = querys.values_list("anonymous_feedback_id", flat=True)
+        context["created_user"] = anonymous_feedback_ids
+        return context
+
+    model = AnonymousFeedback
+    filter_class = AnonymousFilter
+
+    columns = [
+        (_("Subject"), "feedback_subject"),
+        (_("based on"), "get_based_on_value"),
+        (_("Created At"), "created_at"),
+    ]
+
+    sortby_mapping = [("Created At", "created_at")]
+
+    action_method = "anonymous_actions_col"
+    header_attrs = {
+        "action": """style="width:200px!important;" """,
+    }
+
+    def get_queryset(self):
+        queryset = super().get_queryset()
+        employee = self.request.user.employee_get
+        queryset = (
+            queryset.filter(employee_id=employee)
+            if not self.request.user.has_perm("pms.view_feedback")
+            else queryset
+        )
+        return queryset
+
+    row_attrs = """
+                onclick="
+                event.stopPropagation();"
+                hx-get='{get_individual_anonymous_feedback}'
+                hx-target="#OneFeedbackTarget"
+                data-target="#FeedbackModal"
+                data-toggle="oh-modal-toggle"
+                data-anounymous = "true"
+
+                """
+
+
+class FeedbacknavView(HorillaNavView):
+    """
+    navbar
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("feedback-generic-tab")
+        self.actions = [
+            {
+                "action": _("Archive"),
+                "attrs": """
+                    id="archiveFeedback"
+                    style="cursor: pointer;"
+                """,
+            },
+            {
+                "action": _("Un-Archive"),
+                "attrs": """
+                    id="UnarchiveFeedback"
+                    style="cursor: pointer;"
+                """,
+            },
+        ]
+        if self.request.user.has_perm("pms.add_feedback"):
+            self.actions.append(
+                {
+                    "action": _("Bulk feedback"),
+                    "attrs": f"""
+                        data-toggle="oh-modal-toggle"
+                        data-target="#objectCreateModal"
+                        hx-get ="{reverse_lazy('bulk-feedback-create')}"
+                        hx-target="#objectCreateModalTarget"
+                        class="oh-dropdown__link"
+                        id="bulkfeedback"
+                        style="cursor: pointer;"
+                    """,
+                }
+            )
+        if self.request.user.has_perm("pms.view_feedback") or is_reportingmanager(
+            self.request
+        ):
+            self.create_attrs = """
+                 href="/pms/feedback-creation"
+             """
+            self.actions.append(
+                {
+                    "action": _("Delete"),
+                    "attrs": """
+                        id="deleteFeedback"
+                        data-action ="delete"
+                        style="cursor: pointer; color:red !important"
+                    """,
+                }
+            )
+
+    nav_title = _("Feedbacks")
+    filter_body_template = "cbv/360_feedback/feedback_filter.html"
+    filter_instance = FeedbackFilter()
+    filter_form_context_name = "feedback_filter_form"
+    search_swap_target = "#listContainer"
+
+
+class AddAnonymousFeedbackForm(HorillaFormView):
+    """
+    form view
+    """
+
+    form_class = AnonymousFeedbackForm
+    model = AnonymousFeedback
+    template_name = "cbv/360_feedback/inherit.html"
+    new_display_title = _("Anonymous Feedback")
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        # form = self.form_class(instance=self.form.instance)
+        if self.form.instance.pk:
+            self.form_class.verbose_name = _("Anonymous Feedback")
+
+        context["form"] = self.form
+        return context
+
+    def form_invalid(self, form: Any) -> HttpResponse:
+        if self.form.instance.pk:
+            self.form_class.verbose_name = _("Anonymous Feedback")
+        if not form.is_valid():
+            errors = form.errors.as_data()
+            return render(
+                self.request, self.template_name, {"form": form, "errors": errors}
+            )
+        return super().form_invalid(form)
+
+    def form_valid(self, form: AnonymousFeedbackForm) -> HttpResponse:
+        anonymous_id = self.request.user.id
+        feedback = form.save(commit=False)
+        feedback.anonymous_feedback_id = anonymous_id
+        form = self.form_class(self.request.POST, instance=feedback)
+        if form.is_valid():
+            if form.instance.pk:
+                message = _("Feedback Updated Successfully")
+            else:
+                message = _("Feedback Created Successfully")
+                if feedback.based_on == "employee":
+                    notify.send(
+                        User.objects.filter(username="Horilla Bot").first(),
+                        recipient=feedback.employee_id.employee_user_id,
+                        verb="You received an anonymous feedback!",
+                        verb_ar="لقد تلقيت تقييمًا مجهولًا!",
+                        verb_de="Sie haben anonymes Feedback erhalten!",
+                        verb_es="¡Has recibido un comentario anónimo!",
+                        verb_fr="Vous avez reçu un feedback anonyme!",
+                        redirect=reverse("feedback-view"),
+                        icon="bag-check",
+                    )
+            feedback.save()
+            messages.success(self.request, message)
+            return HttpResponse("<script>window.location.reload();</script>")
+        return super().form_valid(form)
+
+
+class PerformanceTab(SelfFeedbacktab):
+    """
+    performance tab in employee profile
+    """
+
+    records_per_page = 2
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        pk = self.request.resolver_match.kwargs.get("pk")
+        self.search_url = reverse("individual-performance-tab-list", kwargs={"pk": pk})
+
+    def get_queryset(self):
+        queryset = super().get_queryset()
+        pk = self.kwargs.get("pk")
+        queryset = Feedback.objects.filter(employee_id=pk, archive=False)
+        return queryset
+
+
+EmployeeProfileView.add_tab(
+    tabs=[
+        {
+            "title": "Performance",
+            "view": PerformanceTab.as_view(),
+            "accessibility": "pms.cbv.accessibility.performance_accessibility",
+        },
+    ]
+)
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(manager_can_enter("pms.change_feedback"), name="dispatch")
+class FeedbackUpdateFormView(HorillaFormView):
+    """
+    Form View for update feedback
+    """
+
+    form_class = FeedbackForm
+    model = Feedback
+    template_name = "cbv/360_feedback/form/form_inherit.html"
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        if self.form.instance.pk:
+            employees = self.form.instance.employee_id
+            subordinate_ids = self.form.instance.subordinate_id.values_list(
+                "id", flat=True
+            )
+            subordinate_ids_list = list(subordinate_ids)
+            key_result = EmployeeKeyResult.objects.filter(
+                employee_objective_id__employee_id=employees.id
+            )
+
+            self.form_class.verbose_name = _("Update Feedback")
+            self.form.fields["employee_key_results_id"].queryset = key_result
+            self.form.fields["subordinate_id"].initial = subordinate_ids_list
+            context["subordinates"] = subordinate_ids_list
+        context["form"] = self.form
+        context["feedback_form"] = self.form
+        return context
+
+    def form_valid(self, form: FeedbackForm) -> HttpResponse:
+        if form.is_valid():
+            if form.instance.pk:
+                employees = form.data.getlist("subordinate_id")
+                if key_result_ids := self.request.POST.getlist(
+                    "employee_key_results_id"
+                ):
+                    for key_result_id in key_result_ids:
+                        key_result = EmployeeKeyResult.objects.filter(
+                            id=key_result_id
+                        ).first()
+                        feedback_form = form.save()
+                        feedback_form.employee_key_results_id.add(key_result)
+                instance = form.save()
+                instance.subordinate_id.set(employees)
+                form = form.save()
+                message = _("Feedback updated successfully!")
+                send_feedback_notifications(self.request, form)
+            # form.save()
+
+            messages.success(self.request, message)
+            return self.HttpResponse()
+        return super().form_valid(form)
diff --git a/pms/cbv/key_result.py b/pms/cbv/key_result.py
new file mode 100644
index 000000000..cdfa7a644
--- /dev/null
+++ b/pms/cbv/key_result.py
@@ -0,0 +1,302 @@
+"""
+this page handles cbv of key result page
+"""
+
+import json
+from typing import Any
+
+from django.contrib import messages
+from django.http import HttpResponse
+from django.shortcuts import redirect, render
+from django.urls import reverse
+from django.utils.decorators import method_decorator
+from django.utils.translation import gettext_lazy as _
+from django.views import View
+
+from base.methods import closest_numbers
+from horilla.decorators import manager_can_enter
+from horilla_views.cbv_methods import login_required, permission_required
+from horilla_views.generic.cbv.views import (
+    HorillaCardView,
+    HorillaDetailedView,
+    HorillaFormView,
+    HorillaListView,
+    HorillaNavView,
+    TemplateView,
+)
+from horilla_views.generic.cbv.history import HorillaHistoryView
+from pms.filters import ActualKeyResultFilter
+from pms.forms import KRForm
+from pms.models import KeyResult, EmployeeKeyResult
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(manager_can_enter(perm="pms.view_keyresult"), name="dispatch")
+class KeyResultViewPage(TemplateView):
+    """
+    for key result page
+    """
+
+    template_name = "cbv/key_results/key_result_home.html"
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(manager_can_enter(perm="pms.view_keyresult"), name="dispatch")
+class KeyResultNavView(HorillaNavView):
+    """
+    navbar of the page
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("filter-key-result")
+
+        self.create_attrs = f"""
+                        data-toggle="oh-modal-toggle"
+                        data-target="#genericModal"
+                        hx-get="{reverse('create-key-result')}"
+                        hx-target="#genericModalBody"
+                        """
+
+        self.view_types = [
+            {
+                "type": "list",
+                "icon": "list-outline",
+                "url": reverse("filter-key-result"),
+                "attrs": """
+                            title='List'
+                            """,
+            },
+            {
+                "type": "card",
+                "icon": "grid-outline",
+                "url": reverse("key-result-card-view"),
+                "attrs": """
+                            title='Card'
+                            """,
+            },
+        ]
+
+    nav_title = _("Key Results")
+    filter_instance = ActualKeyResultFilter()
+    filter_body_template = "cbv/key_results/key_result_filter.html"
+    filter_form_context_name = "form"
+    search_swap_target = "#listContainer"
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(manager_can_enter(perm="pms.view_keyresult"), name="dispatch")
+class KeyResultsListView(HorillaListView):
+
+    model = KeyResult
+    filter_class = ActualKeyResultFilter
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("filter-key-result")
+        self.view_id = "key-result-container"
+
+    columns = [
+        (_("Key Results"), "title"),
+        (_("Progress Type"), "get_progress_type"),
+        (_("Target Value"), "target_value"),
+        (_("Duration"), "duration"),
+        (_("Description"), "description"),
+    ]
+
+    sortby_mapping = [
+        ("Progress Type", "get_progress_type"),
+        ("Target Value", "target_value"),
+        ("Duration", "duration"),
+    ]
+
+    action_method = "action_col"
+
+    row_attrs = """
+                hx-get='{get_detail_url}?instance_ids={ordered_ids}'
+                hx-target="#genericModalBody"
+                data-target="#genericModal"
+                data-toggle="oh-modal-toggle"
+                """
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(manager_can_enter(perm="pms.view_keyresult"), name="dispatch")
+class KeyResultCardView(HorillaCardView):
+    """
+    card view of the page
+    """
+
+    model = KeyResult
+    filter_class = ActualKeyResultFilter
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("key-result-card-view")
+        self.view_id = "key-result-container"
+
+    # def get_context_data(self, **kwargs):
+    #     context =  super().get_context_data(**kwargs)
+    #     self.request.card_div = "card_div"
+    #     return context
+
+    details = {
+        "image_src": "get_avatar",
+        "title": "{title}",
+        "subtitle": "Target Value : {target_value} {progress_type} <br> Duration : {duration} Days",
+    }
+
+    card_attrs = """
+                hx-get='{get_detail_url}?instance_ids={ordered_ids}'
+                hx-target="#genericModalBody"
+                data-target="#genericModal"
+                data-toggle="oh-modal-toggle"
+                """
+
+    actions = [
+        {
+            "action": _("Edit"),
+            "attrs": """
+                    class="oh-dropdown__link"
+                    hx-get='{get_update_url}?instance_ids={ordered_ids}'
+			        hx-target="#genericModalBody"
+			        data-toggle="oh-modal-toggle"
+			        data-target="#genericModal"
+            """,
+        },
+        {
+            "action": _("Delete"),
+            "attrs": """
+                    class="oh-dropdown__link"
+                    hx-confirm="Do you want to delete this Key result?"
+                    hx-post='{get_delete_url}'
+                    hx-swap="innerHTML"
+                    hx-target="#key-result-container"
+                """,
+        },
+    ]
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(manager_can_enter(perm="pms.view_keyresult"), name="dispatch")
+class KeyResultsDetailedView(HorillaDetailedView):
+    """
+    Detail View
+    """
+
+    model = KeyResult
+    title = _("Details")
+
+    header = {
+        "title": "title",
+        "subtitle": "",
+        "avatar": "get_avatar",
+    }
+
+    body = [
+        (_("Key Results"), "title"),
+        (_("Progress Type"), "get_progress_type"),
+        (_("Target Value"), "target_value"),
+        (_("Duration"), "duration"),
+        (_("Description"), "description"),
+    ]
+
+    action_method = "detail_action_col"
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(manager_can_enter(perm="pms.view_keyresult"), name="dispatch")
+class KeyResultFormView(HorillaFormView):
+    """
+    form view for create and update key results
+    """
+
+    model = KeyResult
+    form_class = KRForm
+    new_display_title = _("Create Key result")
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+
+        if self.form.instance.pk:
+            self.form_class.verbose_name = _("Update Key result")
+
+        context["form"] = self.form
+        return context
+
+    def form_invalid(self, form: Any) -> HttpResponse:
+        if self.form.instance.pk:
+            self.form_class.verbose_name = _("Update Key result")
+        if not form.is_valid():
+            errors = form.errors.as_data()
+            return render(
+                self.request, self.template_name, {"form": form, "errors": errors}
+            )
+        return super().form_invalid(form)
+
+    def form_valid(self, form: KRForm) -> HttpResponse:
+        if form.is_valid():
+            if form.instance.pk:
+                messages.success(
+                    self.request,
+                    _(f"Key result {self.form.instance} updated successfully"),
+                )
+            else:
+                messages.success(
+                    self.request,
+                    _(f"Key result {self.form.instance} created successfully"),
+                )
+            form.save()
+            return self.HttpResponse()
+        return super().form_valid(form)
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(
+    permission_required(perm="employee.delete_actiontype"), name="dispatch"
+)
+class DeleteKeyResults(View):
+    """
+    Handle deletion of key results.
+    """
+
+    def post(self, request, key_id):
+        """
+        Handle POST request to delete an action type.
+        """
+
+        instances_ids = request.GET.get("instances_ids")
+        next_instance = None
+        instances_list = None
+        if instances_ids:
+            instances_list = json.loads(instances_ids)
+            previous_instance, next_instance = closest_numbers(instances_list, key_id)
+            instances_list.remove(key_id)
+        key_result = KeyResult.objects.get(id=key_id)
+        if key_result:
+            key_result.delete()
+            messages.success(request, _("Ket result  deleted successfully!"))
+
+        else:
+            messages.error(request, _("Key result not found"))
+        paths = {
+            "genericModalBody": f"/pms/key-result-detail-view/{next_instance}?instance_ids={instances_list}&deleted=true",
+        }
+        http_hx_target = self.request.META.get("HTTP_HX_TARGET")
+        redirected_path = paths.get(http_hx_target)
+        return redirect(redirected_path)
+
+
+@method_decorator(login_required, name="dispatch")
+class EKRHistory(HorillaHistoryView):
+    """
+    EKR History
+    """
+
+    model = EmployeeKeyResult
+
+    def __init__(self, **kwargs):
+        super().__init__(**kwargs)
+        self.has_perm_to_revert = self.request.user.has_perm(
+            "pms.change_employeekeyresult"
+        )
diff --git a/pms/cbv/meetings.py b/pms/cbv/meetings.py
new file mode 100644
index 000000000..1bede1f18
--- /dev/null
+++ b/pms/cbv/meetings.py
@@ -0,0 +1,266 @@
+"""
+Meetings page
+"""
+
+from typing import Any
+import contextlib
+from django.http import HttpResponse
+from django.shortcuts import render
+from django.utils.translation import gettext_lazy as _
+from django.utils.decorators import method_decorator
+from django.urls import reverse, reverse_lazy
+from django.db.models import Q
+from django.contrib import messages
+from horilla_views.cbv_methods import login_required
+from horilla_views.generic.cbv.views import (
+    HorillaDetailedView,
+    HorillaFormView,
+    HorillaListView,
+    HorillaNavView,
+    TemplateView,
+)
+from notifications.signals import notify
+from pms.filters import MeetingsFilter
+from pms.forms import MeetingResponseForm, MeetingsForm
+from pms.models import Meetings
+
+
+@method_decorator(login_required, name="dispatch")
+class MeetingsView(TemplateView):
+    """
+    for meeting page
+    """
+
+    template_name = "cbv/meetings/meetings.html"
+
+
+@method_decorator(login_required, name="dispatch")
+class MeetingsList(HorillaListView):
+    """
+    List view of the page
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("meetings-list")
+        self.view_id = "meetingManagerContainer"
+
+
+    def get_queryset(self):
+        queryset = super().get_queryset()
+        if not self.request.user.has_perm("pms.view_meetings"):
+            employee_id = self.request.user.employee_get
+            queryset = queryset.filter(
+                Q(employee_id=employee_id) | Q(manager=employee_id)
+            ).distinct()
+            return queryset.order_by("-id")
+        return queryset.order_by("-id")
+
+    model = Meetings
+    filter_class = MeetingsFilter
+
+
+
+    columns = [
+        (_("Title"), "title_col"),
+        (_("Employees"), "employees_col"),
+        (_("Managers"), "managers_col"),
+        (_("Date"), "date_col"),
+        (_("MoM"), "mom_col"),
+    ]
+
+    sortby_mapping = [
+        ("Date", "date_col")
+    ]
+
+    bulk_update_fields = [
+        "manager"
+    ]
+
+    action_method = "action_col"
+
+    row_attrs = """
+                {diff_cell}
+                class="oh-permission-table--collapsed"
+                hx-get='{meeting_detail_view}?instance_ids={ordered_ids}'
+                hx-target="#genericModalBody"
+                data-target="#genericModal"
+                data-toggle="oh-modal-toggle"
+                """
+
+
+@method_decorator(login_required, name="dispatch")
+class MeetingsNav(HorillaNavView):
+    """
+    Nav bar
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("meetings-list")
+        if self.request.user.has_perm("pms.add_meetings"):
+            self.create_attrs = f"""
+                            hx-get='{reverse_lazy('create-meeting')}'
+                            data-toggle="oh-modal-toggle"
+                            data-target="#genericModal"
+                            hx-target="#genericModalBody"
+                            """
+
+    nav_title = _("Meetings")
+    filter_instance = MeetingsFilter()
+    filter_body_template = "cbv/meetings/filter.html"
+    filter_form_context_name = "filter_form"
+    search_swap_target = "#listContainer"
+
+
+@method_decorator(login_required, name="dispatch")
+class MeetingsDetailedView(HorillaDetailedView):
+    """
+    detail view of page
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.body = [
+            (_("Date"), "date"),
+            (_("Question Template"), "question_template"),
+            (_("Employees"), "employ_detail_col", True),
+            (_("Managers"), "manager_detail_col", True),
+            (_("Minutes of Meeting"), "mom_col"),
+            (_("Answerable employees"), "answerable_col", True),
+        ]
+
+    action_method = "detail_action"
+
+    model = Meetings
+    title = _("Details")
+    header = {
+        "title": "title",
+        "subtitle": "Meeting",
+        "avatar": "get_avatar",
+    }
+
+
+@method_decorator(login_required, name="dispatch")
+class MeetingsFormView(HorillaFormView):
+    """
+    Form View
+    """
+
+    model = Meetings
+    form_class = MeetingsForm
+    template_name = "cbv/meetings/forms/meet_create.html"
+    new_display_title = _("Meetings")
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        self.form_class(initial={"manager": self.request.user.employee_get})
+        if self.form.instance.pk:
+            self.form_class.verbose_name = _("Update Meeting")
+            self.form_class(instance=self.form.instance)
+        context["form"] = self.form
+        return context
+
+    def form_invalid(self, form: Any) -> HttpResponse:
+        # form = self.form_class(self.request.POST)
+        if self.form.instance.pk:
+            self.form_class.verbose_name = _("Update Meeting")
+        if not form.is_valid():
+            errors = form.errors.as_data()
+            return render(
+                self.request, self.template_name, {"form": form, "errors": errors}
+            )
+        return super().form_invalid(form)
+
+    def form_valid(self, form: MeetingsForm) -> HttpResponse:
+        if form.is_valid():
+            if form.instance.pk:
+                message = _("Meeting updated successfully")
+            else:
+                message = _("Meeting added successfully")
+            instance = form.save()
+            managers = [
+                manager.employee_user_id for manager in form.cleaned_data["manager"]
+            ]
+            answer_employees = [
+                answer_emp.employee_user_id
+                for answer_emp in form.cleaned_data["answer_employees"]
+            ]
+            employees = form.cleaned_data["employee_id"]
+            employees = [
+                employee.employee_user_id
+                for employee in employees.exclude(
+                    id__in=form.cleaned_data["answer_employees"]
+                )
+            ]
+            messages.success(self.request, _(message))
+            with contextlib.suppress(Exception):
+                notify.send(
+                    self.request.user.employee_get,
+                    recipient=managers,
+                    verb=f"You have been added as a manager for the meeting {instance.title}",
+                    verb_ar=f"لقد تمت إضافتك كمدير للاجتماع {instance.title}",
+                    verb_de=f"Sie wurden als Manager für das Meeting {instance.title} hinzugefügt",
+                    verb_es=f"Se le ha agregado como administrador de la reunión {instance.title}",
+                    verb_fr=f"Vous avez été ajouté en tant que responsable de réunion {instance.title}",
+                    icon="information",
+                    redirect=reverse("view-meetings") + f"?search={instance.title}",
+                )
+            with contextlib.suppress(Exception):
+                notify.send(
+                    self.request.user.employee_get,
+                    recipient=employees,
+                    verb=f"You have been added to the meeting {instance.title}",
+                    verb_ar=f"لقد تمت إضافتك إلى اجتماع {instance.title}.",
+                    verb_de=f"Sie wurden zur {instance.title} Besprechung hinzugefügt",
+                    verb_es=f"Te han agregado a la reunión {instance.title}",
+                    verb_fr=f"Vous avez été ajouté à la réunion {instance.title}",
+                    icon="information",
+                    redirect=reverse("view-meetings") + f"?search={instance.title}",
+                )
+            with contextlib.suppress(Exception):
+                notify.send(
+                    self.request.user.employee_get,
+                    recipient=answer_employees,
+                    verb=f"You have been added as an answerable employee for the meeting {instance.title}",
+                    verb_ar=f"لقد تمت إضافتك كموظف مسؤول عن الاجتماع {instance.title}",
+                    verb_de=f"Du wurden als Mitarbeiter zum Ausfüllen für das {instance.title}-Meeting hinzugefügt",
+                    verb_es=f"Se le ha agregado como empleado responsable de la reunión {instance.title}",
+                    verb_fr=f"Vous avez été ajouté en tant que employé responsable pour la réunion {instance.title}",
+                    icon="information",
+                    redirect=reverse("view-meetings") + f"?search={instance.title}",
+                )
+            return self.HttpResponse()
+        return super().form_valid(form)
+
+
+@method_decorator(login_required, name="dispatch")
+class MeetingResponseFormView(HorillaFormView):
+    """
+    Form View
+    """
+
+    model = Meetings
+    form_class = MeetingResponseForm
+    # template_name = "cbv/recruitment/forms/create_form.html"
+    new_display_title = "Add Response"
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        meet_id = self.kwargs.get("id")
+        meeting = Meetings.objects.filter(id=meet_id).first()
+        form = self.form_class(instance=meeting)
+        context["form"] = form
+        return context
+
+    def form_valid(self, form: MeetingResponseForm) -> HttpResponse:
+        meet_id = self.kwargs.get("id")
+        meeting = Meetings.objects.filter(id=meet_id).first()
+        if form.is_valid():
+            message = _("Response added successfully")
+            response = self.request.POST.get("response")
+            meeting.response = response
+            meeting.save()
+            messages.success(self.request, message)
+            return self.HttpResponse()
+        return super().form_valid(form)
diff --git a/pms/cbv/objectives.py b/pms/cbv/objectives.py
new file mode 100644
index 000000000..d21d493be
--- /dev/null
+++ b/pms/cbv/objectives.py
@@ -0,0 +1,761 @@
+from typing import Any
+
+from django import forms
+from django.contrib import messages
+from django.db.models import Q
+from django.http import HttpResponse
+from django.urls import resolve, reverse, reverse_lazy
+from django.utils.decorators import method_decorator
+from django.utils.translation import gettext_lazy as _
+
+from employee.cbv.employee_profile import EmployeeProfileView
+from employee.models import Employee
+from horilla_views.cbv_methods import login_required
+from horilla_views.generic.cbv.views import (
+    HorillaDetailedView,
+    HorillaFormView,
+    HorillaListView,
+    HorillaNavView,
+    HorillaTabView,
+    TemplateView,
+)
+from notifications.signals import notify
+from pms.cbv.key_result import KeyResultFormView
+from pms.filters import ActualObjectiveFilter, KeyResultFilter, ObjectiveFilter
+from pms.forms import (
+    AddAssigneesForm,
+    EmployeeKeyResultForm,
+    EmployeeObjectiveCreateForm,
+    ObjectiveForm,
+)
+from pms.models import EmployeeKeyResult, EmployeeObjective, Objective
+
+
+@method_decorator(login_required, name="dispatch")
+class ObjectivesView(TemplateView):
+    """
+    for objectives page
+    """
+
+    template_name = "cbv/objectives/objectives.html"
+
+
+@method_decorator(login_required, name="dispatch")
+class ObjectivesList(HorillaListView):
+    """
+    List view of the page
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("tab-objectives-view")
+
+    model = Objective
+    bulk_update_fields = [
+        "self_employee_progress_update",
+    ]
+    filter_class = ActualObjectiveFilter
+
+    columns = [
+        ("Title", "title_col"),
+        ("Mangers", "manager_col"),
+        ("Key Results", "key_res_col"),
+        ("Assignees", "assingnees_col"),
+        ("Duration", "duration_col"),
+        ("Description", "description"),
+    ]
+
+    header_attrs = {
+        "title_col": """
+                      style="width:200px !important;"
+                      """
+    }
+    row_attrs = """
+                id="tr{get_instance_id}"
+                class="oh-permission-table--collapsed"
+                onclick="window.location.href='{get_individual_url}'"
+                """
+
+
+class MyObjectives(ObjectivesList):
+    """
+    My objectives class
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.view_id = "myObjContainer"
+        if self.request.user.has_perm(
+            "pms.change_objective"
+        ) or self.request.user.has_perm("pms.delete_objective"):
+            self.action_method = "self_action_col"
+
+    columns = (
+        [
+            col
+            for col in ObjectivesList.columns
+            if col[1] != "assingnees_col" and col[1] != "key_res_col"
+        ][:2]
+        + [(_("Key Results"), "self_key_res_col")]
+        + [
+            col
+            for col in ObjectivesList.columns
+            if col[1] != "assingnees_col" and col[1] != "key_res_col"
+        ][2:]
+    )
+
+    def get_queryset(self):
+        queryset = super().get_queryset()
+        employee = self.request.user.employee_get
+        queryset = queryset.filter(employee_objective__employee_id=employee)
+        queryset = queryset.distinct()
+        return queryset
+
+
+@method_decorator(login_required, name="dispatch")
+class AllObjectives(ObjectivesList):
+    """
+    List view of all objectives
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.view_id = "allobjContainer"
+        if self.request.user.has_perm(
+            "pms.change_objective"
+        ) or self.request.user.has_perm("pms.delete_objective"):
+            self.action_method = "actions_col"
+
+    selected_instances_key_id = "selectedInastacesAll"
+
+    def get_queryset(self):
+        queryset = super().get_queryset()
+        employee = self.request.user.employee_get
+        manager = False
+        if Objective.objects.filter(managers=employee).exists():
+            manager = True
+        if self.request.user.has_perm("pms.view_employeeobjective"):
+            queryset = queryset
+        elif manager:
+            queryset = queryset.filter(Q(managers=employee)) | queryset.filter(
+                employee_objective__employee_id=employee
+            )
+        else:
+            queryset = queryset.none()
+        return queryset.distinct()
+
+
+@method_decorator(login_required, name="dispatch")
+class ObjectivesTab(HorillaTabView):
+    """
+    Tab View
+    """
+
+    template_name = "cbv/objectives/extended_objectives.html"
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        employee = self.request.user.employee_get
+        context["instance"] = employee
+        return context
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.view_id = "objContainer"
+        employee = self.request.user.employee_get
+        manager = False
+        if Objective.objects.filter(managers=employee).exists():
+            manager = True
+        self.tabs = [
+            {
+                "title": _("Assigned Objectives"),
+                "url": f"{reverse('my-objectives-view-tab')}",
+            },
+        ]
+        if self.request.user.has_perm("pms.view_employeeobjective") or manager:
+            self.tabs.append(
+                {
+                    "title": _("All Objectives"),
+                    "url": f"{reverse('all-objectives-view-tab')}",
+                    "actions": [
+                        {
+                            "action": "Create Objectives",
+                            "accessibility": "pms.cbv.accessibility.create_objective_accessibility",
+                            "attrs": f"""
+                                data-toggle="oh-modal-toggle"
+                                hx-get='{reverse_lazy('objective-creation')}'"
+                                data-toggle="oh-modal-toggle"
+                                data-target="#genericModal"
+                                hx-target="#genericModalBody"
+                                style="cursor: pointer;"
+                                """,
+                        }
+                    ],
+                },
+            )
+
+
+@method_decorator(login_required, name="dispatch")
+class ObjectivesNav(HorillaNavView):
+    """
+    Nav bar
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("tab-objectives-view")
+        self.create_attrs = f"""
+                        hx-get='{reverse_lazy('create-employee-objective')}'"
+                        data-toggle="oh-modal-toggle"
+                        data-target="#genericModal"
+                        hx-target="#genericModalBody"
+                        """
+
+    nav_title = _("Objectives")
+    filter_instance = ActualObjectiveFilter()
+    filter_form_context_name = "form"
+    filter_body_template = "cbv/objectives/filter.html"
+    search_swap_target = "#listContainer"
+
+
+@method_decorator(login_required, name="dispatch")
+class DynamicKeyResultCreateForm(KeyResultFormView):
+
+    is_dynamic_create_view = True
+
+
+@method_decorator(login_required, name="dispatch")
+class CreateEmployeeObjectiveForm(HorillaFormView):
+    """
+    form view for create employee objective
+    """
+
+    form_class = EmployeeObjectiveCreateForm
+    model = EmployeeObjective
+    new_display_title = _("Create Employee Objective")
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        pk = resolve(self.request.path_info).kwargs.get("pk")
+        if not pk:
+            self.dynamic_create_fields = [("key_result_id", DynamicKeyResultCreateForm)]
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        if self.form.instance.pk:
+            self.form_class.verbose_name = _("Update Employee Objective")
+        return context
+
+    def form_valid(self, form: EmployeeObjectiveCreateForm) -> HttpResponse:
+        if form.is_valid():
+            if form.instance.pk:
+                message = _("Employee objective Updated successfully")
+                form.save()
+            else:
+                message = _("Employee objective created successfully")
+                krs = list(form.cleaned_data["key_result_id"])
+                emp_obj = form.save(commit=False)
+                obj = emp_obj.objective_id
+                obj.assignees.add(emp_obj.employee_id)
+                krs.extend([key_result for key_result in obj.key_result_id.all()])
+                set_krs = set(krs)
+                emp_obj.save()
+                for kr in set_krs:
+                    emp_obj.key_result_id.add(kr)
+                    if not EmployeeKeyResult.objects.filter(
+                        employee_objective_id=emp_obj, key_result_id=kr
+                    ).exists():
+                        emp_kr = EmployeeKeyResult.objects.create(
+                            employee_objective_id=emp_obj,
+                            key_result_id=kr,
+                            progress_type=kr.progress_type,
+                            target_value=kr.target_value,
+                            start_date=emp_obj.start_date,
+                        )
+                        emp_kr.save()
+            messages.success(self.request, _(message))
+            return self.HttpResponse()
+        return super().form_valid(form)
+
+
+@method_decorator(login_required, name="dispatch")
+class CreateObjectiveFormView(HorillaFormView):
+    """
+    form view for create objectives
+    """
+
+    form_class = ObjectiveForm
+    model = Objective
+    new_display_title = _("Create  Objective")
+    dynamic_create_fields = [("key_result_id", DynamicKeyResultCreateForm)]
+    template_name = "cbv/objectives/form.html"
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.view_id = "objectiveForm"
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        if self.form.instance.pk:
+            self.form.fields["assignees"].initial = self.form.instance.assignees.all()
+            self.form_class.verbose_name = _("Update Objective")
+        return context
+
+    def form_valid(self, form: ObjectiveForm) -> HttpResponse:
+        if form.is_valid():
+            objective = form.save()
+            assignees = self.form.cleaned_data["assignees"]
+            start_date = self.form.cleaned_data["start_date"]
+            default_krs = self.form.cleaned_data["key_result_id"]
+            if form.instance.pk:
+                message = _("Objective Updated successfully")
+                new_emp = [assignee for assignee in assignees]
+                delete_list = []
+                if objective.employee_objective.exists():
+                    emp_objectives = objective.employee_objective.all()
+                    existing_emp = [emp.employee_id for emp in emp_objectives]
+                    delete_list = [
+                        employee for employee in existing_emp if employee not in new_emp
+                    ]
+                if len(delete_list) > 0:
+                    for emp in delete_list:
+                        EmployeeObjective.objects.filter(
+                            employee_id=emp, objective_id=objective
+                        ).delete()
+                for emp in new_emp:
+                    if EmployeeObjective.objects.filter(
+                        employee_id=emp, objective_id=objective
+                    ).exists():
+                        emp_obj = EmployeeObjective.objects.filter(
+                            employee_id=emp, objective_id=objective
+                        ).first()
+                        emp_obj.start_date = start_date
+                    else:
+                        emp_obj = EmployeeObjective(
+                            employee_id=emp,
+                            objective_id=objective,
+                            start_date=start_date,
+                        )
+                    emp_obj.save()
+                    emp_obj.key_result_id.set(default_krs)
+                    # assiging default key result
+                    if default_krs:
+                        for key in default_krs:
+                            if not EmployeeKeyResult.objects.filter(
+                                employee_objective_id=emp_obj, key_result_id=key
+                            ).exists():
+                                emp_kr = EmployeeKeyResult.objects.create(
+                                    employee_objective_id=emp_obj,
+                                    key_result_id=key,
+                                    progress_type=key.progress_type,
+                                    target_value=key.target_value,
+                                    start_date=start_date,
+                                )
+                                emp_kr.save()
+                    notify.send(
+                        self.request.user.employee_get,
+                        recipient=emp.employee_user_id,
+                        verb="You got an OKR!.",
+                        verb_ar="لقد حققت هدفًا ونتيجة رئيسية!",
+                        verb_de="Du hast ein Ziel-Key-Ergebnis erreicht!",
+                        verb_es="¡Has logrado un Resultado Clave de Objetivo!",
+                        verb_fr="Vous avez atteint un Résultat Clé d'Objectif !",
+                        redirect=reverse(
+                            "objective-detailed-view", kwargs={"obj_id": objective.id}
+                        ),
+                    )
+            else:
+                message = _("Objective created successfully")
+                if assignees:
+                    for emp in assignees:
+                        emp_objective = EmployeeObjective(
+                            objective_id=objective,
+                            employee_id=emp,
+                            start_date=start_date,
+                        )
+                        emp_objective.save()
+                        # assigning default key result
+                        if default_krs:
+                            for key in default_krs:
+                                emp_kr = EmployeeKeyResult(
+                                    employee_objective_id=emp_objective,
+                                    key_result_id=key,
+                                    progress_type=key.progress_type,
+                                    target_value=key.target_value,
+                                    start_date=start_date,
+                                )
+                                emp_kr.save()
+                        notify.send(
+                            self.request.user.employee_get,
+                            recipient=emp.employee_user_id,
+                            verb="You got an OKR!.",
+                            verb_ar="لقد حققت هدفًا ونتيجة رئيسية!",
+                            verb_de="Du hast ein Ziel-Key-Ergebnis erreicht!",
+                            verb_es="¡Has logrado un Resultado Clave de Objetivo!",
+                            verb_fr="Vous avez atteint un Résultat Clé d'Objectif !",
+                            redirect=reverse(
+                                "objective-detailed-view",
+                                kwargs={"obj_id": objective.id},
+                            ),
+                        )
+            messages.success(self.request, _(message))
+            return self.HttpResponse()
+        return super().form_valid(form)
+
+
+@method_decorator(login_required, name="dispatch")
+class AddAssigneesFormView(HorillaFormView):
+    """
+    form view for add assignees
+    """
+
+    form_class = AddAssigneesForm
+    model = Objective
+    new_display_title = _("Add assignees")
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        if self.form.instance.pk:
+            self.form_class.verbose_name = _("Add assignees")
+        return context
+
+    def form_valid(self, form: AddAssigneesForm) -> HttpResponse:
+        if form.is_valid():
+            if form.instance.pk:
+                message = _(f"{form.instance} Updated")
+                objective = form.save(commit=False)
+                assignees = form.cleaned_data["assignees"]
+                start_date = form.cleaned_data["start_date"]
+                for emp in assignees:
+                    objective.assignees.add(emp)
+                    if not EmployeeObjective.objects.filter(
+                        employee_id=emp, objective_id=objective
+                    ).exists():
+                        emp_obj = EmployeeObjective(
+                            employee_id=emp,
+                            objective_id=objective,
+                            start_date=start_date,
+                        )
+                        emp_obj.save()
+                    # assiging default key result
+                    default_krs = objective.key_result_id.all()
+                    emp_obj.key_result_id.set(default_krs)
+                    if default_krs:
+                        for key_result in default_krs:
+                            if not EmployeeKeyResult.objects.filter(
+                                employee_objective_id=emp_obj, key_result_id=key_result
+                            ).exists():
+                                emp_kr = EmployeeKeyResult.objects.create(
+                                    employee_objective_id=emp_obj,
+                                    key_result_id=key_result,
+                                    progress_type=key_result.progress_type,
+                                    target_value=key_result.target_value,
+                                    start_date=start_date,
+                                )
+                                emp_kr.save()
+                    notify.send(
+                        self.request.user.employee_get,
+                        recipient=emp.employee_user_id,
+                        verb="You got an OKR!.",
+                        verb_ar="لقد حققت هدفًا ونتيجة رئيسية!",
+                        verb_de="Du hast ein Ziel-Key-Ergebnis erreicht!",
+                        verb_es="¡Has logrado un Resultado Clave de Objetivo!",
+                        verb_fr="Vous avez atteint un Résultat Clé d'Objectif !",
+                        redirect=reverse(
+                            "objective-detailed-view", kwargs={"obj_id": objective.id}
+                        ),
+                    )
+                objective.save()
+                messages.success(self.request, _(message))
+            return self.HttpResponse()
+        return super().form_valid(form)
+
+
+@method_decorator(login_required, name="dispatch")
+class CreateEmployeeKeyResultFormView(HorillaFormView):
+    """
+    form view for create employee key result form
+    """
+
+    form_class = EmployeeKeyResultForm
+    model = EmployeeKeyResult
+    new_display_title = _("Create Key result")
+    dynamic_create_fields = [("key_result_id", DynamicKeyResultCreateForm)]
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.view_id = "empKeyrsult"
+        emp_obj_id = self.kwargs.get("emp_obj_id")
+        self.emp_objective = EmployeeObjective.objects.get(id=emp_obj_id)
+
+    def get(self, request, *args, pk=None, **kwargs):
+        if (
+            self.request.user.has_perm("pms.change_objective")
+            or self.request.user.has_perm("pms.change_employeeobjective")
+            or self.request.user.has_perm("pms.change_employeekeyresult")
+            or self.request.user.employee_get
+            in self.emp_objective.objective_id.managers.all()
+            or (
+                self.emp_objective.objective_id.self_employee_progress_update
+                and (self.emp_objective.employee_id == self.request.user.employee_get)
+            )
+        ):
+            return super().get(request, *args, pk=pk, **kwargs)
+        messages.info(request, "You dont have permission")
+        return HttpResponse("<script>window.location.reload()</script>")
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        if not self.form.instance.pk:
+            employee = self.emp_objective.employee_id
+            self.form.fields["employee_objective_id"].initial = self.emp_objective.pk
+            self.form_class.verbose_name = _(f"Create Key result for {employee}")
+        if self.form.instance.pk:
+            self.form_class.verbose_name = _(
+                f"Update Key result for {self.form.instance}"
+            )
+        return context
+
+    def form_valid(self, form: EmployeeKeyResultForm) -> HttpResponse:
+        if form.is_valid():
+            if form.instance.pk:
+                message = _("Key result updated sucessfully.")
+                employee = self.form.instance.employee_objective_id.employee_id
+                self.form.instance.employee_objective_id.update_objective_progress()
+                form.save()
+                notify.send(
+                    self.request.user.employee_get,
+                    recipient=employee.employee_user_id,
+                    verb="Your Key Result updated.",
+                    verb_ar="تم تحديث نتيجتك الرئيسية.",
+                    verb_de="Ihr Schlüsselergebnis wurde aktualisiert.",
+                    verb_es="Se ha actualizado su Resultado Clave.",
+                    verb_fr="Votre Résultat Clé a été mis à jour.",
+                    redirect=reverse(
+                        "objective-detailed-view",
+                        kwargs={
+                            "obj_id": self.form.instance.employee_objective_id.objective_id.id
+                        },
+                    ),
+                )
+            else:
+                message = _("Key result assigned sucessfully.")
+                emp_obj_id = self.kwargs.get("emp_obj_id")
+                emp_objective = EmployeeObjective.objects.get(id=emp_obj_id)
+                employee = emp_objective.employee_id
+                emp_objective.update_objective_progress()
+                key_result = self.form.cleaned_data["key_result_id"]
+                emp_objective.key_result_id.add(key_result)
+                form.save()
+                notify.send(
+                    self.request.user.employee_get,
+                    recipient=employee.employee_user_id,
+                    verb="You got an Key Result!.",
+                    verb_ar="لقد حصلت على نتيجة رئيسية!",
+                    verb_de="Du hast ein Schlüsselergebnis erreicht!",
+                    verb_es="¡Has conseguido un Resultado Clave!",
+                    verb_fr="Vous avez obtenu un Résultat Clé!",
+                    redirect=reverse(
+                        "objective-detailed-view",
+                        kwargs={"obj_id": emp_objective.objective_id.id},
+                    ),
+                )
+            messages.success(self.request, _(message))
+            return self.HttpResponse("<script>window.location.reload()</script>")
+        return super().form_valid(form)
+
+
+@method_decorator(login_required, name="dispatch")
+class EmployeeObjectiveDetailView(HorillaDetailedView):
+    """
+    Generic Detail view of page
+    """
+
+    model = EmployeeObjective
+
+    title = _("Details")
+    header = {
+        "title": "employee_id__get_full_name",
+        "subtitle": "objective_detail_subtitle",
+        "avatar": "employee_id__get_avatar",
+    }
+    body = [
+        (_("Title"), "objective_id__title"),
+        (_("Description"), "objective_id__description"),
+        (_("Start Date"), "start_date"),
+        (_("End Date"), "end_date"),
+        (_("Status"), "status_col"),
+    ]
+
+    action_method = "emp_obj_action"
+
+
+def get_history_url(self):
+    """
+    History url
+    """
+    return reverse("ekr-history", kwargs={"pk": self.pk})
+
+
+EmployeeKeyResult.get_history_url = get_history_url
+
+
+@method_decorator(login_required, name="dispatch")
+class EmployeeObjectiveKeyResultDetailListView(HorillaListView):
+    """
+    List view of the page
+    """
+
+    model = EmployeeKeyResult
+    filter_class = KeyResultFilter
+    columns = [
+        ("Title", "title_col"),
+        ("Start Value", "start_value"),
+        ("Current Value", "get_current_value_col"),
+        ("Target Value", "target_value"),
+        ("Progress Percentage", "get_progress_col"),
+        ("Start Date", "start_date"),
+        ("End Date", "end_date"),
+        ("Status", "status_col"),
+    ]
+    filter_selected = False
+    show_filter_tags = False
+
+    def __init__(self, **kwargs):
+        super().__init__(**kwargs)
+        self.search_url = self.request.path
+        emp_objective = EmployeeObjective.objects.filter(
+            pk=self.request.GET.get("employee_objective_id")
+        ).first()
+        self.selected_instances_key_id = (
+            f'ekrIds{self.request.GET.get("employee_objective_id")}'
+        )
+        self.actions = []
+        if (
+            self.request.user.has_perm("pms.change_objective")
+            or self.request.user.has_perm("pms.change_employeeobjective")
+            or self.request.user.has_perm("pms.change_employeekeyresult")
+            or self.request.user.employee_get
+            in emp_objective.objective_id.managers.all()
+            or (
+                emp_objective.objective_id.self_employee_progress_update
+                and (emp_objective.employee_id == self.request.user.employee_get)
+            )
+        ):
+            self.actions.append(
+                {
+                    "action": "Edit",
+                    "icon": "create-outline",
+                    "attrs": """
+                    hx-get='{get_update_url}'
+                    class="oh-btn w-100"
+                    data-toggle="oh-modal-toggle"
+                    data-target="#genericModal"
+                    hx-target="#genericModalBody"
+                    style="cursor: pointer;"
+                    """,
+                },
+            )
+        if self.request.user.has_perm("pms.delete_employeekeyresult"):
+            self.actions.append(
+                {
+                    "action": "Delete",
+                    "icon": "trash-outline",
+                    "attrs": """
+                hx-get='{get_delete_url}'
+                hx-confirm="Are you sure you want to delete	this Key result?"
+                hx-swap="none"
+                class="oh-btn oh-btn--danger-outline w-100"
+                hx-on-htmx-after-request= "window.location.reload();"
+                style="cursor: pointer;"
+                """,
+                }
+            )
+
+        if (
+            emp_objective
+            and self.request.user.employee_get
+            in emp_objective.objective_id.managers.all()
+            or self.request.user.has_perm("pms.view_employeekeyresult")
+        ):
+            self.actions.append(
+                {
+                    "action": "History",
+                    "icon": "hourglass-outline",
+                    "attrs": """
+                hx-get='{get_history_url}'
+                hx-target="#genericOffCanvas"
+                data-target='#genericSidebar'
+                class="oh-btn oh-btn--danger-outline w-100 oh-activity-sidebar__open"
+                style="cursor: pointer;"
+                """,
+                }
+            )
+
+    header_attrs = {
+        "title_col": """
+                      style="width:200px !important;"
+                      """,
+        "action": """
+            style="width:180px !important;"
+        """,
+    }
+    row_attrs = """
+                class = "oh-employee-okr-row"
+                data-kr-id = "{get_instance_id}"
+                """
+
+    def get_queryset(self, queryset=None, filtered=False, *args, **kwargs):
+        """
+        Get querysetmethod
+        """
+        self.queryset = (
+            super()
+            .get_queryset(queryset, filtered, *args, **kwargs)
+            .filter(employee_objective_id=self.kwargs["emp_objective_id"])
+        )
+        return self.queryset
+
+
+@method_decorator(login_required, name="dispatch")
+class EKRTab(EmployeeObjectiveKeyResultDetailListView):
+    """
+    EKR tab
+    """
+
+    columns = [
+        ("Title", "title_col"),
+        ("Objective", "employee_objective_id__objective_id__title"),
+        ("Start Value", "start_value"),
+        ("Current Value", "current_value"),
+        ("Target Value", "target_value"),
+        ("Progress Percentage", "get_progress_col"),
+        ("Start Date", "start_date"),
+        ("End Date", "end_date"),
+        ("Status", "status"),
+    ]
+
+    def __init__(self, **kwargs):
+        super().__init__(**kwargs)
+        self.selected_instances_key_id = "selectedInstanceIds"
+
+    filter_selected = False
+
+    def get_queryset(self, queryset=None, filtered=False, *args, **kwargs):
+        self.queryset = HorillaListView.get_queryset(
+            self, queryset, filtered, *args, **kwargs
+        ).filter(employee_objective_id__employee_id__pk=self.kwargs["pk"])
+        self._saved_filters = self._saved_filters.copy()
+        self._saved_filters["field"] = "employee_objective_id"
+        return self.queryset
+
+
+EmployeeProfileView.add_tab(
+    tabs=[
+        {
+            "title": "Key Results",
+            "view": EKRTab.as_view(),
+            "accessibility": "pms.cbv.accessibility.performance_accessibility",
+        },
+    ]
+)
diff --git a/pms/cbv/period.py b/pms/cbv/period.py
new file mode 100644
index 000000000..be5834f9c
--- /dev/null
+++ b/pms/cbv/period.py
@@ -0,0 +1,159 @@
+"""
+Question Template page
+"""
+
+from typing import Any
+from django.http import HttpResponse
+from django.urls import reverse
+from django.utils.decorators import method_decorator
+from django.contrib import messages
+from django.utils.translation import gettext_lazy as _
+from base.methods import is_reportingmanager
+from base.decorators import manager_can_enter
+from horilla_views.generic.cbv.views import (
+    HorillaFormView,
+    HorillaListView,
+    HorillaNavView,
+    TemplateView,
+    HorillaDetailedView
+)
+from horilla_views.cbv_methods import login_required
+from pms.forms import PeriodForm
+from pms.models import Period
+from pms.filters import PeriodFilter
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(manager_can_enter("pms.view_period"), name="dispatch")
+class PeriodView(TemplateView):
+    """
+    for period page
+    """
+
+    template_name = "cbv/period/period.html"
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(manager_can_enter("pms.view_period"), name="dispatch")
+class PeriodList(HorillaListView):
+    """
+    List view of the question template page
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+
+        self.search_url = reverse("period-hx-view")
+        self.action_method = "action_col"
+        self.view_id = "periodListTable"
+
+    model = Period
+    filter_class = PeriodFilter
+
+    columns = [
+        (_("Title"), "period_name"),
+        (_("Start Date"), "start_date"),
+        (_("End date"), "end_date"),
+        
+    ]
+
+    header_attrs = {
+        "action" : """
+                   style = "width:180px !important"
+                   """,
+        "period_name" : """
+                   style = "width:180px !important"
+                   """
+    }
+
+    sortby_mapping = [
+        ("Start Date", "start_date"),
+        ("End date", "end_date"),
+    ]
+
+    row_attrs = """
+                hx-get='{detail_view}?instance_ids={ordered_ids}'
+                hx-target="#genericModalBody"
+                data-target="#genericModal"
+                data-toggle="oh-modal-toggle"
+                """
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(manager_can_enter("pms.view_period"), name="dispatch")
+class PeriodNav(HorillaNavView):
+    """
+    Nav bar
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("period-hx-view")
+        if self.request.user.has_perm("pms.add_period") or is_reportingmanager(
+            self.request
+        ):
+            self.create_attrs = f"""
+                            data-toggle="oh-modal-toggle"
+                            data-target="#genericModal"
+                            hx-target="#genericModalBody"
+                            hx-get="{reverse('period-create')}"
+                            """
+
+    nav_title = _("Period")
+    filter_instance = PeriodFilter()
+    search_swap_target = "#listContainer"
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(manager_can_enter("pms.view_period"), name="dispatch")
+class PeriodDetailView(HorillaDetailedView):
+    """
+    detail view of page
+    """
+
+    model = Period
+    title = _("Details")
+
+    header = {
+        "title": "period_name",
+        "subtitle": "",
+        "avatar": "" 
+    }
+
+    body = {
+        (_("Title"), "period_name"),
+        (_("Start Date"), "start_date"),
+        (_("End date"), "end_date"),
+        (_("Company"), "company_id_detail"),
+    }
+    action_method = "detail_view_actions"
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(manager_can_enter("pms.add_period"), name="dispatch")
+class PeriodFormView(HorillaFormView):
+    """
+    Create and edit form
+    """
+
+    model = Period
+    form_class = PeriodForm
+    new_display_title = _("Create Period")
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        if self.form.instance.pk:
+            self.form_class.verbose_name = _("Update Period")
+        return context
+
+    def form_valid(self, form: PeriodForm) -> HttpResponse:
+
+        if form.is_valid():
+            if form.instance.pk:
+                message = _("Period Updated Successfully")
+            else:
+                message = _("Period Created Successfully")
+            form.save()
+            messages.success(self.request, _(message))
+            return self.HttpResponse()
+        return super().form_valid(form)
diff --git a/pms/cbv/question_template.py b/pms/cbv/question_template.py
new file mode 100644
index 000000000..2054678db
--- /dev/null
+++ b/pms/cbv/question_template.py
@@ -0,0 +1,135 @@
+"""
+Question Template page
+"""
+
+from typing import Any
+from django.http import HttpResponse
+from django.urls import reverse
+from django.utils.decorators import method_decorator
+from django.utils.translation import gettext_lazy as _
+from django.contrib import messages
+from base.methods import is_reportingmanager
+from base.decorators import manager_can_enter
+from horilla_views.generic.cbv.views import (
+    HorillaFormView,
+    HorillaListView,
+    HorillaNavView,
+    TemplateView,
+)
+from horilla_views.cbv_methods import login_required
+from pms.forms import QuestionTemplateForm
+from pms.models import QuestionTemplate
+from pms.filters import QuestionTemplateFilter
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(manager_can_enter("pms.view_questiontemplate"), name="dispatch")
+class QuestionTemplateView(TemplateView):
+    """
+    for question template page
+    """
+
+    def get_context_data(self, **kwargs: Any):
+        context = super().get_context_data(**kwargs)
+        context["form"] = QuestionTemplateForm
+        return context
+
+    template_name = "cbv/question_template/question_template.html"
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(manager_can_enter("pms.view_questiontemplate"), name="dispatch")
+class QuestionTemplateList(HorillaListView):
+    """
+    List view of the question template page
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("question-template-hx-view")
+        self.action_method = "action_col"
+        self.view_id = "questionTemplateList"
+
+    model = QuestionTemplate
+    filter_class = QuestionTemplateFilter
+    
+
+
+    columns = [
+        (_("Title"), "question_template", "get_avatar"),
+        (_("Total Questions"), "question_count"),
+    ]
+
+    header_attrs = {
+        "action" : """
+                    style="width:250px !important"
+                   """
+    }
+
+    sortby_mapping = [
+        ("Total Questions", "question_count"),
+    ]
+
+    row_attrs = """
+                onclick="window.location.href='{get_detail_url}'"
+                """
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(manager_can_enter("pms.view_questiontemplate"), name="dispatch")
+class QuestionTemplateNav(HorillaNavView):
+    """
+    Nav bar
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("question-template-hx-view")
+        if self.request.user.has_perm(
+            "pms.add_questiontemplate"
+        ) or is_reportingmanager(self.request):
+            self.create_attrs = f"""
+                            data-toggle="oh-modal-toggle"
+                            data-target="#genericModal"
+                            hx-target="#genericModalBody"
+                            hx-get="{reverse('question-template-creation')}"
+                            """
+
+    nav_title = _("Question Template")
+    filter_instance = QuestionTemplateFilter()
+    search_swap_target = "#listContainer"
+
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(manager_can_enter("pms.add_questiontemplate"), name="dispatch")
+class QuestionTemplateFormView(HorillaFormView):
+    """
+    Form view
+    """
+
+    model = QuestionTemplate
+    form_class = QuestionTemplateForm
+   
+    new_display_title = _("Add Question Template")
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        if self.form.instance.pk:
+            self.form_class.verbose_name = _("Edit Question Template")
+        return context
+
+    def form_valid(self, form: QuestionTemplateForm) -> HttpResponse:
+        if form.is_valid():
+            if form.instance.pk:
+                message = _("Question Template Updated Successfully")
+                form.save()
+                messages.success(self.request, _(message))
+                return self.HttpResponse()
+            else:
+                message = _("Question Template Created Successfully")
+                form.save()
+                messages.success(self.request, _(message))
+                detail_url = form.instance.get_detail_url()
+                return self.HttpResponse(f'<script>window.location.href="{detail_url}"</script>')
+        return super().form_valid(form)
diff --git a/pms/filters.py b/pms/filters.py
index 96e250bc5..4225b6aa1 100644
--- a/pms/filters.py
+++ b/pms/filters.py
@@ -6,14 +6,18 @@ the PMS (Performance Management System) app.
 """
 
 import datetime
+from datetime import timedelta
 
 import django
 import django_filters
+from dateutil.relativedelta import relativedelta
 from django import forms
-from django_filters import DateFilter
+from django.utils import timezone
+from django_filters import DateFilter, DateFromToRangeFilter
 
 from base.filters import FilterSet
 from base.methods import reload_queryset
+from horilla.filters import HorillaFilterSet
 from pms.models import (
     AnonymousFeedback,
     BonusPointSetting,
@@ -24,6 +28,8 @@ from pms.models import (
     KeyResult,
     Meetings,
     Objective,
+    Period,
+    QuestionTemplate,
 )
 
 
@@ -100,7 +106,7 @@ class CustomFilterSet(django_filters.FilterSet):
                 field.lookup_expr = "icontains"
 
 
-class ActualObjectiveFilter(FilterSet):
+class ActualObjectiveFilter(HorillaFilterSet):
     """
     ActualObjectiveFilter
     """
@@ -131,7 +137,6 @@ class ActualObjectiveFilter(FilterSet):
                 | queryset.filter(assignees__employee_last_name__icontains=split)
                 | queryset.filter(title__icontains=split)
             )
-
         return empty.distinct()
 
 
@@ -206,15 +211,40 @@ class ObjectiveFilter(CustomFilterSet):
         return empty
 
 
-class FeedbackFilter(CustomFilterSet):
+DUE_DATE_CHOICES = [
+    ("", "All"),
+    ("overdue", "Overdue"),
+    ("due_today", "Due Today"),
+    ("due_this_week", "Due This Week"),
+    ("due_this_month", "Due This Month"),
+]
+
+
+class FeedbackFilter(HorillaFilterSet):
     """
     Custom filter set for Feedback records.
 
     This filter set allows to filter Feedback records based on various criteria.
     """
 
+    due_date_quick_filter = django_filters.ChoiceFilter(
+        label="Quick Date",
+        choices=DUE_DATE_CHOICES,
+        method="filter_due_date",
+        widget=forms.HiddenInput(),  # We'll trigger this via pills
+    )
+    offboarding_employees = django_filters.BooleanFilter(
+        method="filter_offboarding_employees",
+    )
+
+    search = django_filters.CharFilter(method="search_method")
     review_cycle = django_filters.CharFilter(lookup_expr="icontains")
-    created_at_date_range = DateRangeFilter(field_name="created_at")
+    created_at_date_range = DateRangeFilter(
+        field_name="created_at",
+        widget=django_filters.widgets.RangeWidget(
+            attrs={"type": "date", "class": "oh-input w-100"}
+        ),
+    )
     start_date = DateFilter(
         widget=forms.DateInput(attrs={"type": "date", "class": "oh-input  w-100"}),
         # add lookup expression here
@@ -224,18 +254,98 @@ class FeedbackFilter(CustomFilterSet):
         # add lookup expression here
     )
 
+    start_date_range = DateFromToRangeFilter(
+        field_name="start_date",
+        widget=django_filters.widgets.RangeWidget(
+            attrs={"type": "date", "class": "oh-input w-100"}
+        ),
+    )
+    end_date_range = DateFromToRangeFilter(
+        field_name="end_date",
+        widget=django_filters.widgets.RangeWidget(
+            attrs={"type": "date", "class": "oh-input w-100"}
+        ),
+    )
+
     class Meta:
         """
         A nested class that specifies the model and fields for the filter.
         """
 
         model = Feedback
-        fields = "__all__"
+        fields = [
+            "manager_id",
+            "employee_id",
+            "colleague_id",
+            "subordinate_id",
+            "question_template_id",
+            "status",
+            "archive",
+            "start_date",
+            "end_date",
+            "employee_key_results_id",
+            "cyclic_feedback",
+            "cyclic_feedback_days_count",
+            "cyclic_feedback_period",
+            "cyclic_next_start_date",
+            "cyclic_next_end_date",
+            "start_date_range",
+            "end_date_range",
+        ]
 
-    def __init__(self, data=None, queryset=None, *, request=None, prefix=None):
-        super(FeedbackFilter, self).__init__(
-            data=data, queryset=queryset, request=request, prefix=prefix
-        )
+    def filter_due_date(self, queryset, name, value):
+        """
+        Filter due date
+        """
+        queryset = queryset.exclude(status__iexact="Closed")
+
+        today = timezone.now().date()
+
+        if value == "overdue":
+            return queryset.filter(end_date__lt=today)
+        elif value == "due_today":
+            return queryset.filter(end_date=today)
+        elif value == "due_this_week":
+            start_of_week = today - timedelta(days=today.weekday())
+            end_of_week = start_of_week + timedelta(days=6)
+            return queryset.filter(end_date__range=(start_of_week, end_of_week))
+        elif value == "due_this_month":
+            first_day = today.replace(day=1)
+            last_day = (first_day + relativedelta(months=1)) - timedelta(days=1)
+            return queryset.filter(end_date__range=(first_day, last_day))
+        return queryset
+
+    def filter_offboarding_employees(self, queryset, name, value):
+        """
+        Filter offboarding employees
+        """
+        queryset = queryset.filter(
+            employee_id__offboardingemployee__isnull=not value
+        ) | queryset.filter(employee_id__resignationletter__isnull=not value)
+        return queryset.distinct()
+
+    def search_method(self, queryset, _, value: str):
+        """
+        Search Method
+        """
+        parts = value.split()
+        first_name = parts[0]
+        last_name = " ".join(parts[1:]) if len(parts) > 1 else ""
+        qrst = queryset.none()
+        if first_name and last_name:
+            qrst = queryset.filter(
+                employee_id__employee_first_name__icontains=first_name,
+                employee_id__employee_last_name__icontains=last_name,
+            ) | queryset.filter(review_cycle__icontains=value)
+        elif first_name:
+            qrst = queryset.filter(
+                employee_id__employee_first_name__icontains=first_name
+            ) | queryset.filter(review_cycle__icontains=value)
+        elif last_name:
+            qrst = queryset.filter(
+                employee_id__employee_last_name__icontains=last_name
+            ) | queryset.filter(review_cycle__icontains=value)
+        return qrst.distinct()
 
 
 class AnonymousFeedbackFilter(django_filters.FilterSet):
@@ -267,13 +377,73 @@ class AnonymousFeedbackFilter(django_filters.FilterSet):
 
 
 class KeyResultFilter(CustomFilterSet):
+    """
+    KeyResult Filter
+    """
+
+    due = django_filters.ChoiceFilter(
+        method="filter_due_date",
+        label="Due",
+        choices=[
+            ("due_today", "Due Today"),
+            ("due_this_week", "Due This Week"),
+            ("due_this_month", "Due This Month"),
+            ("due_next_month", "Due Next Month"),
+            ("overdue", "Overdue"),
+        ],
+    )
+
+    kr_progress_percentage__gte = django_filters.NumberFilter(
+        field_name="progress_percentage", lookup_expr="gte"
+    )
+    kr_progress_percentage__lte = django_filters.NumberFilter(
+        field_name="progress_percentage", lookup_expr="lte"
+    )
+
+    kr_start_date_from = django_filters.CharFilter(
+        lookup_expr="gte", field_name="start_date"
+    )
+    kr_start_date_till = django_filters.CharFilter(
+        lookup_expr="lte", field_name="start_date"
+    )
+    kr_end_date_from = django_filters.CharFilter(
+        lookup_expr="gte", field_name="end_date"
+    )
+    kr_end_date_till = django_filters.CharFilter(
+        lookup_expr="lte", field_name="end_date"
+    )
+
+    def filter_due_date(self, queryset, name, value):
+        """
+        Filter due date
+        """
+        today = timezone.now().date()
+
+        if value == "due_today":
+            return queryset.filter(end_date=today)
+        elif value == "due_this_week":
+            start = today - timedelta(days=today.weekday())
+            end = start + timedelta(days=6)
+            return queryset.filter(end_date__range=(start, end))
+        elif value == "due_this_month":
+            start = today.replace(day=1)
+            end = (start + relativedelta(months=1)) - timedelta(days=1)
+            return queryset.filter(end_date__range=(start, end))
+        elif value == "due_next_month":
+            start = (today + relativedelta(months=1)).replace(day=1)
+            end = (start + relativedelta(months=1)) - timedelta(days=1)
+            return queryset.filter(end_date__range=(start, end))
+        elif value == "overdue":
+            return queryset.filter(end_date__lt=today)
+
+        return queryset
 
     class Meta:
         model = EmployeeKeyResult
         fields = "__all__"
 
 
-class ActualKeyResultFilter(FilterSet):
+class ActualKeyResultFilter(HorillaFilterSet):
     """
     Filter through KeyResult model
     """
@@ -308,7 +478,7 @@ class ObjectiveReGroup:
     ]
 
 
-class EmployeeObjectiveFilter(FilterSet):
+class EmployeeObjectiveFilter(HorillaFilterSet):
     """
     Filter through EmployeeObjective model
     """
@@ -334,6 +504,107 @@ class EmployeeObjectiveFilter(FilterSet):
         lookup_expr="lte",
         widget=forms.DateInput(attrs={"type": "date"}),
     )
+    kr_start_date_from = django_filters.DateFilter(
+        method="kr_start_date_till_method",
+        lookup_expr="gte",
+        widget=forms.DateInput(attrs={"type": "date"}),
+    )
+    kr_start_date_till = django_filters.DateFilter(
+        method="kr_start_date_till_method",
+        lookup_expr="lte",
+        widget=forms.DateInput(attrs={"type": "date"}),
+    )
+    kr_end_date_from = django_filters.DateFilter(
+        method="kr_end_date_from_method",
+        lookup_expr="gte",
+        widget=forms.DateInput(attrs={"type": "date"}),
+    )
+    kr_end_date_till = django_filters.DateFilter(
+        method="kr_end_date_till_method",
+        lookup_expr="lte",
+        widget=forms.DateInput(attrs={"type": "date"}),
+    )
+
+    due = django_filters.ChoiceFilter(
+        method="filter_due_date",
+        label="Due",
+        choices=[
+            ("due_today", "Due Today"),
+            ("due_this_week", "Due This Week"),
+            ("due_this_month", "Due This Month"),
+            ("due_next_month", "Due Next Month"),
+            ("overdue", "Overdue"),
+        ],
+    )
+    progress_percentage__gte = django_filters.NumberFilter(
+        field_name="progress_percentage", lookup_expr="gte"
+    )
+    progress_percentage__lte = django_filters.NumberFilter(
+        field_name="progress_percentage", lookup_expr="lte"
+    )
+    kr_progress_percentage__gte = django_filters.NumberFilter(method="kr_progress_gte")
+    kr_progress_percentage__lte = django_filters.NumberFilter(method="kr_progress_lte")
+
+    def kr_start_date_from_method(self, queryset, name, value):
+        """
+        Kr filter
+        """
+        return queryset.filter(employee_key_result__start_date__gte=value)
+
+    def kr_start_date_till_method(self, queryset, name, value):
+        """
+        Kr filter
+        """
+        return queryset.filter(employee_key_result__start_date__lte=value)
+
+    def kr_end_date_from_method(self, queryset, name, value):
+        """
+        Kr filter
+        """
+        return queryset.filter(employee_key_result__end_date__gte=value)
+
+    def kr_end_date_till_method(self, queryset, name, value):
+        """
+        Kr filter
+        """
+        return queryset.filter(employee_key_result__end_date__lte=value)
+
+    def kr_progress_gte(self, queryset, name, value):
+        """
+        Kr prgress filter
+        """
+        return queryset.filter(employee_key_result__progress_percentage__gte=value)
+
+    def kr_progress_lte(self, queryset, name, value):
+        """
+        Kr prgress filter
+        """
+        return queryset.filter(employee_key_result__progress_percentage__lte=value)
+
+    def filter_due_date(self, queryset, name, value):
+        """
+        Filter due date
+        """
+        today = timezone.now().date()
+
+        if value == "due_today":
+            return queryset.filter(employee_key_result__end_date=today)
+        elif value == "due_this_week":
+            start = today - timedelta(days=today.weekday())
+            end = start + timedelta(days=6)
+            return queryset.filter(employee_key_result__end_date__range=(start, end))
+        elif value == "due_this_month":
+            start = today.replace(day=1)
+            end = (start + relativedelta(months=1)) - timedelta(days=1)
+            return queryset.filter(employee_key_result__end_date__range=(start, end))
+        elif value == "due_next_month":
+            start = (today + relativedelta(months=1)).replace(day=1)
+            end = (start + relativedelta(months=1)) - timedelta(days=1)
+            return queryset.filter(employee_key_result__end_date__range=(start, end))
+        elif value == "overdue":
+            return queryset.filter(employee_key_result__end_date__lt=today)
+
+        return queryset
 
     class Meta:
         model = EmployeeObjective
@@ -358,12 +629,13 @@ class EmployeeObjectiveFilter(FilterSet):
                 | (queryset.filter(employee_id__employee_first_name__icontains=split))
                 | (queryset.filter(employee_id__employee_last_name__icontains=split))
                 | (queryset.filter(objective__icontains=split))
+                | (queryset.filter(employee_key_result__key_result__icontains=split))
             )
 
         return empty.distinct()
 
 
-class MeetingsFilter(FilterSet):
+class MeetingsFilter(HorillaFilterSet):
 
     search = django_filters.CharFilter(field_name="title", lookup_expr="icontains")
     date = django_filters.DateFilter(
@@ -441,6 +713,98 @@ class MeetingsFilter(FilterSet):
     #     return super().filter_queryset(queryset)
 
 
+class AnonymousFilter(HorillaFilterSet):
+    """
+    Custom filter set for Anonymous records.
+
+    This filter set allows to filter Anonymous records based on various criteria.
+    """
+
+    search = django_filters.CharFilter(method="search_method", lookup_expr="icontains")
+    review_cycle = django_filters.CharFilter(lookup_expr="icontains")
+    created_at_date_range = DateRangeFilter(field_name="created_at")
+    start_date = DateFilter(
+        widget=forms.DateInput(attrs={"type": "date", "class": "oh-input  w-100"}),
+        # add lookup expression here
+    )
+    end_date = DateFilter(
+        widget=forms.DateInput(attrs={"type": "date", "class": "oh-input  w-100"}),
+        # add lookup expression here
+    )
+
+    def filter(self, qs, value):
+        if value:
+            if value == "today":
+                today = datetime.datetime.now().date()
+                formatted_date = today.strftime("%Y-%m-%d")
+                qs = qs.filter(created_at__startswith=formatted_date)
+
+            if value == "yesterday":
+                today = datetime.date.today()
+                yesterday = today - datetime.timedelta(days=1)
+                formatted_date = yesterday.strftime("%Y-%m-%d")
+                qs = qs.filter(created_at__startswith=formatted_date)
+
+            if value == "week":
+                today = datetime.date.today()
+                start_of_week = today - datetime.timedelta(days=today.weekday())
+                end_of_week = start_of_week + datetime.timedelta(days=6)
+                qs = qs.filter(created_at__range=[start_of_week, end_of_week])
+
+            elif value == "month":
+                today = datetime.date.today()
+                start_of_month = datetime.date(today.year, today.month, 1)
+                end_of_month = start_of_month + datetime.timedelta(days=31)
+                qs = qs.filter(created_at__range=[start_of_month, end_of_month])
+
+        return qs
+
+    class Meta:
+        """
+        A nested class that specifies the model and fields for the filter.
+        """
+
+        model = AnonymousFeedback
+        fields = "__all__"
+
+    def search_method(self, queryset, _, value: str):
+        """
+        Search Method
+        """
+        return queryset.filter(feedback_subject__icontains=value)
+
+    def __init__(self, data=None, queryset=None, *, request=None, prefix=None):
+        super(AnonymousFilter, self).__init__(
+            data=data, queryset=queryset, request=request, prefix=prefix
+        )
+
+
+class QuestionTemplateFilter(FilterSet):
+
+    search = django_filters.CharFilter(
+        field_name="question_template", lookup_expr="icontains"
+    )
+
+    class Meta:
+        model = QuestionTemplate
+        fields = [
+            "question_template",
+        ]
+
+
+class PeriodFilter(HorillaFilterSet):
+
+    search = django_filters.CharFilter(
+        field_name="period_name", lookup_expr="icontains"
+    )
+
+    class Meta:
+        model = Period
+        fields = [
+            "period_name",
+        ]
+
+
 class BonusPointSettingFilter(FilterSet):
     """
     Filter through BonusPointSetting model
diff --git a/pms/forms.py b/pms/forms.py
index a8530db14..259dcf3d8 100644
--- a/pms/forms.py
+++ b/pms/forms.py
@@ -345,7 +345,7 @@ class EmployeeObjectiveCreateForm(BaseForm):
         widgets = {
             "start_date": forms.DateInput(
                 attrs={"class": "oh-input w-100", "type": "date"}
-            ),
+            )
         }
 
     def __init__(self, *args, **kwargs):
@@ -684,10 +684,48 @@ class FeedbackForm(HorillaModelForm):
 
     class Meta:
         model = Feedback
-        fields = "__all__"
-        exclude = ["status", "archive", "is_active"]
+        fields = [
+            "review_cycle",
+            "employee_id",
+            "manager_id",
+            "subordinate_id",
+            "colleague_id",
+            "start_date",
+            "end_date",
+            "question_template_id",
+            "employee_key_results_id",
+            "cyclic_feedback",
+            "cyclic_feedback_days_count",
+            "cyclic_feedback_period",
+        ]
+        # fields = "__all__"
+        exclude = [
+            "status",
+            "archive",
+            "is_active",
+            "cyclic_next_start_date",
+            "cyclic_next_end_date",
+        ]
+
+        labels = {
+            "manager_id": _("Manager"),
+            "employee_id": _("Employee"),
+            "colleague_id": _("Colleague"),
+            "question_template_id": _("Question Template"),
+            "employee_key_results_id": _("Key Result"),
+            "cyclic_feedback": _("Is Cyclic Feedback"),
+            # "cyclic_feedback_period":_("")
+        }
 
         widgets = {
+            "employee_key_results_id": forms.SelectMultiple(
+                attrs={
+                    "class": "oh-select oh-select-2 w-100",
+                    "multiple": "multiple",
+                    "style": "width:100%; display:none;",
+                    "required": False,
+                }
+            ),
             "review_cycle": forms.TextInput(
                 attrs={"placeholder": _("Enter a title"), "class": "oh-input w-100"}
             ),
@@ -711,6 +749,8 @@ class FeedbackForm(HorillaModelForm):
         """
         request = getattr(horilla_middlewares._thread_locals, "request", None)
         super().__init__(*args, **kwargs)
+        # if instance:
+        #     kwargs["initial"] = set_date_field_initial(instance)
 
         user = request.user if request else None
         user_perms = user.get_all_permissions() if user else set()
@@ -807,6 +847,8 @@ class QuestionTemplateForm(ModelForm):
     Form for creating or updating a question template instance
     """
 
+    cols = {"question_template": 12, "company_id": 12}
+
     question_template = forms.CharField(
         widget=forms.TextInput(
             attrs={
@@ -1015,6 +1057,15 @@ class PeriodForm(ModelForm):
 
 
 class AnonymousFeedbackForm(BaseForm):
+    cols = {
+        "feedback_subject": 12,
+        "based_on": 12,
+        "feedback_description": 12,
+        "employee_id": 12,
+        "department_id": 12,
+        "job_position_id": 12,
+    }
+
     class Meta:
         model = AnonymousFeedback
         fields = "__all__"
@@ -1022,6 +1073,13 @@ class AnonymousFeedbackForm(BaseForm):
 
 
 class MeetingsForm(BaseForm):
+
+    cols = {
+        "employee_id": 12,
+        "manager": 12,
+        "answer_employees": 12,
+        "question_template": 12,
+    }
     date = forms.DateTimeField(
         widget=forms.DateTimeInput(
             attrs={"class": "oh-input w-100", "type": "datetime-local"}
@@ -1092,6 +1150,21 @@ class MeetingsForm(BaseForm):
             pass
 
 
+class MeetingResponseForm(ModelForm):
+    """
+    Meeting response form
+    """
+
+    cols = {"response": 12}
+
+    class Meta:
+        model = Meetings
+        fields = ["response"]
+        widgets = {
+            "response": forms.Textarea(attrs={"data-summernote": ""}),
+        }
+
+
 class BonusPointSettingForm(HorillaModelForm):
     """
     BonusPointSetting form
diff --git a/pms/models.py b/pms/models.py
index 0b02ae360..50c980378 100644
--- a/pms/models.py
+++ b/pms/models.py
@@ -1,5 +1,6 @@
 import operator
-from datetime import date
+import re
+from datetime import date, datetime, timezone
 from typing import Iterable
 
 from dateutil.relativedelta import relativedelta
@@ -8,13 +9,19 @@ from django.apps import apps
 from django.core.exceptions import ValidationError
 from django.core.validators import MinValueValidator
 from django.db import models
+from django.db.models import Value
+from django.db.models.functions import Concat
 from django.db.models.signals import post_delete, post_save, pre_save
-from django.urls import reverse
+from django.http import JsonResponse
+from django.urls import reverse, reverse_lazy
+from django.utils import timezone
+from django.utils.timesince import timesince
 from django.utils.translation import gettext_lazy as _
 
 from base.horilla_company_manager import HorillaCompanyManager
 from base.models import Company, Department, JobPosition
 from employee.models import BonusPoint, Employee
+from horilla.horilla_middlewares import _thread_locals
 from horilla.models import HorillaModel
 from horilla_audit.methods import get_diff
 from horilla_audit.models import HorillaAuditInfo, HorillaAuditLog
@@ -36,6 +43,41 @@ class Period(HorillaModel):
     def __str__(self):
         return self.period_name
 
+    def action_col(self):
+        """
+        For action column
+        """
+
+        return render_template(
+            path="cbv/period/actions.html",
+            context={"instance": self},
+        )
+
+    def detail_view(self):
+        """
+        detail view
+        """
+
+        url = reverse("period-detail-view", kwargs={"pk": self.pk})
+        return url
+
+    def detail_view_actions(self):
+        """
+        detail view actions
+        """
+        return render_template(
+            path="cbv/period/detail_view_actions.html",
+            context={"instance": self},
+        )
+
+    def company_id_detail(self):
+        """
+        interviewer in detail view
+        """
+        company_name = self.company_id.all()
+        company_names_string = ", ".join([str(company) for company in company_name])
+        return company_names_string
+
 
 class KeyResult(HorillaModel):
     """model used to create key results"""
@@ -55,7 +97,7 @@ class KeyResult(HorillaModel):
         max_length=60, default="%", choices=PROGRESS_CHOICES
     )
     target_value = models.IntegerField(null=True, blank=True, default=100)
-    duration = models.IntegerField(null=True, blank=True)
+    duration = models.IntegerField(null=True, blank=True, help_text="In Days")
     archive = models.BooleanField(default=False)
     history = HorillaAuditLog(bases=[HorillaAuditInfo])
     company_id = models.ForeignKey(
@@ -79,6 +121,65 @@ class KeyResult(HorillaModel):
     def __str__(self):
         return f"{self.title}"
 
+    def get_progress_type(self):
+        currency_dict = dict(self.PROGRESS_CHOICES[2][1])
+        if self.progress_type in currency_dict:
+            return currency_dict[self.progress_type]
+        progress_dict = dict(self.PROGRESS_CHOICES)
+        return progress_dict.get(self.progress_type)
+
+    def action_col(self):
+        """
+        This method for get custome coloumn .
+        """
+
+        return render_template(
+            path="cbv/key_results/actions.html",
+            context={"instance": self},
+        )
+
+    def detail_action_col(self):
+        """
+        This method for get custome coloumn .
+        """
+
+        return render_template(
+            path="cbv/key_results/detail_view_actions.html",
+            context={"instance": self},
+        )
+
+    def get_avatar(self):
+        """
+        Method will return the API URL for the avatar or the path to the profile image.
+        """
+        sanitized_title = re.sub(r"[^a-zA-Z0-9\s]", "", self.title)
+        sanitized_title = sanitized_title.replace(" ", "+")
+        url = f"https://ui-avatars.com/api/?name={sanitized_title}&background=random"
+        return url
+
+    def get_delete_url(self):
+        """
+        to get the delete url for card action delete
+        """
+
+        url = reverse("delete-key-result", kwargs={"obj_id": self.pk})
+        return url
+
+    def get_detail_url(self):
+        """
+        Detail view url
+        """
+        url = reverse_lazy("key-result-detail-view", kwargs={"pk": self.pk})
+        return url
+
+    def get_update_url(self):
+        """
+        to get the update url for card action update
+        """
+
+        url = reverse("update-key-result", kwargs={"pk": self.pk})
+        return url
+
 
 class Objective(HorillaModel):
     """Model used for creating objectives"""
@@ -143,16 +244,111 @@ class Objective(HorillaModel):
     def __str__(self):
         return f"{self.title}"
 
+    def get_instance_id(self):
+        return self.pk
+
+    def title_col(self):
+        """
+        For title column
+        """
+
+        return render_template(
+            path="cbv/objectives/title.html",
+            context={"instance": self},
+        )
+
+    def manager_col(self):
+        """
+        For manager column
+        """
+
+        return render_template(
+            path="cbv/objectives/manager.html",
+            context={"instance": self},
+        )
+
+    def actions_col(self):
+        """
+        For action column
+        """
+
+        return render_template(
+            path="cbv/objectives/actions.html",
+            context={"instance": self},
+        )
+
+    def self_action_col(self):
+        """
+        For self action column
+        """
+
+        return render_template(
+            path="cbv/objectives/self_objective_action.html",
+            context={"instance": self},
+        )
+
+    def key_res_col(self):
+        """
+        For Key results column
+        """
+
+        return render_template(
+            path="cbv/objectives/key_results.html",
+            context={"instance": self},
+        )
+
+    def self_key_res_col(self):
+        """
+        For Key results column for employee objectives
+        """
+
+        return render_template(
+            path="cbv/objectives/self_key_results.html",
+            context={"instance": self},
+        )
+
+    def assingnees_col(self):
+        """
+        For Key results column
+        """
+
+        return render_template(
+            path="cbv/objectives/assignees.html",
+            context={"instance": self},
+        )
+
+    def duration_col(self):
+        """
+        Duration col
+        """
+        return (
+            str(self.duration) + " " + dict(self.DURATION_UNIT).get(self.duration_unit)
+        )
+
+    def get_employee_objective(self):
+
+        request = getattr(_thread_locals, "request", None)
+        user = request.user.employee_get
+        emp_object = self.employee_objective.get(employee_id=user, objective_id=self.id)
+        return emp_object
+
+    def get_individual_url(self):
+        """
+        Detail view of employee objective
+        """
+        url = reverse_lazy("objective-detailed-view", kwargs={"obj_id": self.pk})
+        return url
+
 
 class EmployeeObjective(HorillaModel):
     """this is a EmployObjective model used for creating Employee objectives"""
 
     STATUS_CHOICES = (
+        ("Not Started", _("Not Started")),
         ("On Track", _("On Track")),
         ("Behind", _("Behind")),
-        ("Closed", _("Closed")),
         ("At Risk", _("At Risk")),
-        ("Not Started", _("Not Started")),
+        ("Closed", _("Closed")),
     )
     objective = models.CharField(
         null=True,
@@ -220,7 +416,7 @@ class EmployeeObjective(HorillaModel):
         if len(krs) > 0:
             current = 0
             for kr in krs:
-                current += kr.progress_percentage
+                current += min(kr.progress_percentage, 100)
             self.progress_percentage = int(current / len(krs))
             self.save()
 
@@ -245,6 +441,113 @@ class EmployeeObjective(HorillaModel):
     def tracking(self):
         return get_diff(self)
 
+    def employee_objective_detail_view(self):
+        """
+        for detail view of page
+        """
+        url = reverse("view-employee-objective", kwargs={"emp_obj_id": self.pk})
+        return url
+
+    def title_col(self):
+        """
+        For title column
+        """
+
+        return render_template(
+            path="cbv/objectives/title.html",
+            context={"instance": self},
+        )
+
+    def emp_obj_action(self):
+        """
+        Action in detail view
+        """
+
+        return render_template(
+            path="cbv/objectives/emp_obj_actions.html",
+            context={"instance": self},
+        )
+
+    def status_col(self):
+        """
+        For status column
+        """
+        objective_key_result_status = self.STATUS_CHOICES
+
+        return render_template(
+            path="cbv/objectives/employee_objective_status.html",
+            context={
+                "instance": self,
+                "objective_key_result_status": objective_key_result_status,
+            },
+        )
+
+    def objective_detail_subtitle(self):
+        """
+        Return subtitle containing both department and job position information.
+        """
+        return f"{self.employee_id.employee_work_info.department_id} / {self.employee_id.employee_work_info.job_position_id}"
+
+    def manager_col(self):
+        """
+        For manager column
+        """
+
+        return render_template(
+            path="cbv/objectives/manager.html",
+            context={"instance": self},
+        )
+
+    def actions_col(self):
+        """
+        For action column
+        """
+
+        return render_template(
+            path="cbv/objectives/actions.html",
+            context={"instance": self},
+        )
+
+    def self_action_col(self):
+        """
+        For self action column
+        """
+
+        return render_template(
+            path="cbv/objectives/self_objective_action.html",
+            context={"instance": self},
+        )
+
+    def key_res_col(self):
+        """
+        For Key results column
+        """
+
+        return render_template(
+            path="cbv/objectives/key_results.html",
+            context={"instance": self},
+        )
+
+    def assingnees_col(self):
+        """
+        For Key results column
+        """
+
+        return render_template(
+            path="cbv/objectives/assignees.html",
+            context={"instance": self},
+        )
+
+    def duration_col(self):
+        """
+        Duration col
+        """
+        return (
+            str(self.objective_id.duration)
+            + " "
+            + dict(self.objective_id.DURATION_UNIT).get(self.objective_id.duration_unit)
+        )
+
 
 class Comment(models.Model):
     """comments for objectives"""
@@ -283,11 +586,11 @@ class EmployeeKeyResult(models.Model):
         ("Currency", (("$", "USD$"), ("₹", "INR"), ("€", "EUR"))),
     )
     STATUS_CHOICES = (
+        ("Not Started", _("Not Started")),
         ("On Track", _("On Track")),
         ("Behind", _("Behind")),
-        ("Closed", _("Closed")),
         ("At Risk", _("At Risk")),
-        ("Not Started", _("Not Started")),
+        ("Closed", _("Closed")),
     )
 
     key_result = models.CharField(max_length=60, null=True, blank=True)
@@ -331,7 +634,156 @@ class EmployeeKeyResult(models.Model):
     progress_percentage = models.IntegerField(default=0)
 
     def __str__(self):
-        return f"{self.key_result_id} | {self.employee_objective_id.employee_id} "
+        return f"{self.key_result_id} | {self.employee_objective_id.employee_id}"
+
+    def get_update_url(self):
+        """
+        to get the update url for card action update
+        """
+
+        url = reverse("employee-key-result-update", kwargs={"pk": self.pk})
+        return url
+
+    def get_delete_url(self):
+        """
+        to get the delete url for card action delete
+        """
+
+        url = reverse("delete-employee-keyresult", kwargs={"kr_id": self.pk})
+        return url
+
+    def key_result_column(self):
+
+        today = datetime.today().date()
+        return render_template(
+            path="cbv/dashboard/keyresult_col.html",
+            context={"instance": self, "today": today},
+        )
+
+    def actions_col(self):
+
+        return render_template(
+            path="cbv/dashboard/actions.html",
+            context={"instance": self},
+        )
+
+    def title_col(self):
+        """
+        For title column
+        """
+        due = None
+        color = "success"
+        if self.end_date:
+            due = (
+                f"due {self.end_date}"
+                if self.end_date == date.today()
+                else f"due in{self.end_date - date.today()}"
+            )
+
+            if self.end_date < date.today():
+                color = "danger"
+            elif self.end_date == date.today():
+                color = "warning"
+
+        col = f"""
+        <span class='d-flex justify-content-between align-items-center'
+        >
+            {self.key_result}
+            <span title = 'due  {due}'>
+                <ion-icon
+                    class="text-{color}"
+                    name="time-sharp"
+                >
+                </ion-icon>
+            </span>
+        </span>
+        """
+
+        return col
+
+    def get_current_value_col(self):
+        """
+        For current value column
+        """
+        # request is required
+        request = _thread_locals.request
+        if (
+            request.user.has_perm("pms.change_objective")
+            or request.user.has_perm("pms.change_employeeobjective")
+            or request.user.has_perm("pms.change_employeekeyresult")
+            or request.user.employee_get
+            in self.employee_objective_id.objective_id.managers.all()
+            or (
+                self.employee_objective_id.objective_id.self_employee_progress_update
+                and (
+                    self.employee_objective_id.employee_id == request.user.employee_get
+                )
+            )
+        ):
+            col = f"""
+                <input
+                    id = "{self.id}"
+                    type="number" class="oh-input p-1"
+                    style="width: 100px;"
+                    min="0"
+                    value="{self.current_value}"
+                    name="current_value"
+                    onchange="delayedProgress(this)"
+                />
+            """
+            return col
+        return self.current_value
+
+    def get_progress_col(self):
+        """
+        For progress column
+        """
+        col = f"""
+        <span class="progressPercentage"> {self.progress_percentage}%</span>
+        """
+        return col
+
+    def status_col(self):
+        """
+        For status column
+        """
+        update_url = reverse(
+            "employee-keyresult-update-status", kwargs={"kr_id": self.pk}
+        )
+        options = "".join(
+            f"<option value='{str(key)}' {'selected' if key == self.status else ''}>{str(value)}</option>"
+            for key, value in self.STATUS_CHOICES
+        )
+
+        col = f"""
+            <select
+                id="keyResultStatus" name="key_result_status"
+                hx-post="{update_url}"
+                hx-trigger="change" class="oh-table__editable-input w-100"
+                hx-on-htmx-after-request = "$('#reloadMessagesButton').click()"
+                hx-swap = "none"
+            >
+                    {options}
+            </select>
+        """
+        return col
+
+    def get_instance_id(self):
+        return self.pk
+
+    def current_value_col(self):
+
+        return render_template(
+            path="cbv/dashboard/current_value.html",
+            context={"instance": self},
+        )
+
+    def progress_col(self):
+
+        return f'<div class="p-percentage">{self.progress_percentage}%</div>'
+
+    def target_value_col(self):
+        return f'<div data-value="{self.target_value}">{self.target_value}</div>'
 
     def update_kr_progress(self):
         if self.target_value != 0:
@@ -392,14 +844,14 @@ class EmployeeKeyResult(models.Model):
             raise ValidationError(
                 "The start value can't be greater than current value or target value."
             )
-        if current_value > target_value:
-            raise ValidationError(
-                {
-                    "current_value": _(
-                        "The current value can't be greater than target value."
-                    )
-                }
-            )
+        # if current_value > target_value:
+        #     raise ValidationError(
+        #         {
+        #             "current_value": _(
+        #                 "The current value can't be greater than target value."
+        #             )
+        #         }
+        #     )
 
     def save(self, *args, **kwargs):
         if self.start_date and not self.end_date:
@@ -438,6 +890,35 @@ class QuestionTemplate(HorillaModel):
     def __str__(self):
         return self.question_template
 
+    def question_count(self):
+        return self.question.count()
+
+    def action_col(self):
+        """
+        For action column
+        """
+
+        return render_template(
+            path="cbv/question_template/actions.html",
+            context={"instance": self},
+        )
+
+    def get_avatar(self):
+        """
+        Method will retun the api to the avatar or path to the question template
+        """
+        url = f"https://ui-avatars.com/api/?name={self.question_template}&background=random"
+        return url
+
+    def get_detail_url(self):
+        """
+        Detail view url
+        """
+        url = reverse_lazy(
+            "question-template-detailed-view", kwargs={"template_id": self.pk}
+        )
+        return url
+
 
 class Question(HorillaModel):
     """question creation"""
@@ -608,6 +1089,89 @@ class Feedback(HorillaModel):
     def __str__(self):
         return f"{self.employee_id.employee_first_name} - {self.review_cycle}"
 
+    def due_days_diff(self):
+        """
+        Returns number of days between current date and end_date.
+        """
+        current_date = timezone.now().date()
+        if not self.end_date:
+            return None
+        return (self.end_date - current_date).days
+
+    def custom_status_style(self):
+        """
+        method for rendering custom status col
+        """
+
+        return render_template(
+            path="cbv/360_feedback/custom_status_col.html",
+            context={"instance": self},
+        )
+
+    def custom_actions_col(self):
+        """
+        method for rendering custom actions col
+        """
+
+        return render_template(
+            path="cbv/360_feedback/custom_actions.html",
+            context={"instance": self},
+        )
+
+    def get_individual_feedback(self):
+        """
+        This method to get individual feedback
+        """
+
+        url = reverse_lazy("feedback-detailed-view", kwargs={"id": self.pk})
+        return url
+
+    def get_feedback_due_date(self):
+        """
+        Due display
+        """
+        if self.status == "Closed":
+            return self.end_date.strftime("%b %d, %Y")
+        current_date = timezone.now().date()
+        date_diff = (self.end_date - current_date).days
+
+        status = (
+            "danger"
+            if self.end_date < current_date
+            else "warning" if self.end_date == current_date else "success"
+        )
+
+        title_text = (
+            "Due today"
+            if self.end_date == current_date
+            else (
+                f"Over due by {abs(date_diff)} days"
+                if self.end_date < current_date
+                else f"Due in {date_diff} days"
+            )
+        )
+
+        html = f"""
+            <span title="{title_text}">
+                <ion-icon
+                    class="text-{status}"
+                    name="time-sharp"
+                >
+                </ion-icon>
+            </span>
+        """
+
+        return f"{self.end_date.strftime('%b %d, %Y')} {html}"
+
+    def custom_due_in_col(self):
+        """
+        This method fro custom due in col
+        """
+        return render_template(
+            path="cbv/360_feedback/due_in_col.html",
+            context={"instance": self, "current_date": datetime.today()},
+        )
+
     def requested_employees(self):
         employees = set(self.subordinate_id.all())
         employees.update(self.colleague_id.all())
@@ -618,6 +1182,28 @@ class Feedback(HorillaModel):
             employees.add(self.employee_id)
         return list(employees)
 
+    def question_answer(self):
+        """
+        Returns all the values list of question inside the template
+        """
+        # Employee.objects.select_related()
+        return list(
+            self.feedback_answer.annotate(
+                answer_by=Concat(
+                    "employee_id__employee_first_name",
+                    Value(" "),
+                    "employee_id__employee_last_name",
+                    Value(" ("),
+                    "employee_id__badge_id",
+                    Value(")"),
+                ),
+            ).values(
+                "question_id__question",
+                "answer",
+                "answer_by",
+            )
+        )
+
 
 class AnonymousFeedback(models.Model):
     """feedback model for creating feedback"""
@@ -700,6 +1286,37 @@ class AnonymousFeedback(models.Model):
                 }
             )
 
+    def anonymous_actions_col(self):
+        """
+        method for rendering custom actions col
+        """
+
+        return render_template(
+            path="cbv/360_feedback/anonymous_action.html",
+            context={"instance": self},
+        )
+
+    def get_based_on_value(self):
+        """
+        return based on condition
+        """
+        if self.based_on == "employee":
+            return f"Based On  :  {self.employee_id}"
+        elif self.based_on == "department":
+            return f"Based On  :  {self.department_id}"
+        elif self.based_on == "job_position":
+            return f"Based On  :  {self.job_position_id}"
+        else:
+            return "Based On  :  General"
+
+    def get_individual_anonymous_feedback(self):
+        """
+        This method to get individual feedback
+        """
+
+        url = reverse_lazy("single-anonymous-feedback-view", kwargs={"obj_id": self.pk})
+        return url
+
 
 class Answer(models.Model):
     """feedback answer model"""
@@ -781,6 +1398,140 @@ class Meetings(HorillaModel):
     def __str__(self):
         return self.title
 
+    def title_col(self):
+        """
+        For title column
+        """
+
+        return render_template(
+            path="cbv/meetings/title.html",
+            context={"instance": self},
+        )
+
+    def answerable_col(self):
+        """
+        manager in detail view
+        """
+        employees = self.answer_employees.all()
+        if employees:
+            employee_names_string = "<br>".join(
+                [str(employee) for employee in employees]
+            )
+            employee_title = _("Answerable employees")
+            return f'<span class="oh-timeoff-modal__stat-title">{employee_title}</span><span class="oh-timeoff-modal__stat-count">{employee_names_string}</span>'
+        else:
+            return ""
+
+    def detail_action(self):
+        """
+        For answerable employees  column
+        """
+
+        return render_template(
+            path="cbv/meetings/detail_action.html",
+            context={"instance": self},
+        )
+
+    def date_col(self):
+        """
+        For date column
+        """
+
+        return render_template(
+            path="cbv/meetings/date.html",
+            context={"instance": self},
+        )
+
+    def employees_col(self):
+        """
+        For employees column
+        """
+
+        return render_template(
+            path="cbv/meetings/employees.html",
+            context={"instance": self},
+        )
+
+    def managers_col(self):
+        """
+        For manager column
+        """
+
+        return render_template(
+            path="cbv/meetings/managers.html",
+            context={"instance": self},
+        )
+
+    def action_col(self):
+        """
+        For action column
+        """
+
+        return render_template(
+            path="cbv/meetings/actions.html",
+            context={"instance": self},
+        )
+
+    def employ_detail_col(self):
+        """
+        employees in detail view
+        """
+        employees = self.employee_id.all()
+        if employees:
+            employee_names_string = "<br>".join(
+                [str(employee) for employee in employees]
+            )
+            employee_title = _("Employees")
+            return f'<span class="oh-timeoff-modal__stat-title">{employee_title}</span><span class="oh-timeoff-modal__stat-count">{employee_names_string}</span>'
+        else:
+            return ""
+
+    def manager_detail_col(self):
+        """
+        manager in detail view
+        """
+        employees = self.manager.all()
+        if employees:
+            employee_names_string = "<br>".join(
+                [str(employee) for employee in employees]
+            )
+            employee_title = _("Managers")
+            return f'<span class="oh-timeoff-modal__stat-title">{employee_title}</span><span class="oh-timeoff-modal__stat-count">{employee_names_string}</span>'
+        else:
+            return ""
+
+    def mom_col(self):
+        request = getattr(_thread_locals, "request", None)
+        if not self.response:
+            return "-"
+        if (
+            request.user.has_perm("pms.view_meetings")
+            or request.user.employee_get in self.manager.all()
+        ):
+            return self.response
+        return "-" if not self.show_response else self.response
+
+    def diff_cell(self):
+        request = getattr(_thread_locals, "request", None)
+        if not getattr(self, "request", None):
+            self.request = request
+        if request.user.employee_get in self.manager.all():
+            return f'style="background-color: rgba(255, 166, 0, 0.158);" '
+
+    def meeting_detail_view(self):
+        """
+        detail view
+        """
+        url = reverse("meetings-detail-view", kwargs={"pk": self.pk})
+        return url
+
+    def get_avatar(self):
+        """
+        Method will retun the api to the avatar or path to the profile image
+        """
+        url = f"https://ui-avatars.com/api/?name={self.title}&background=random"
+        return url
+
 
 class MeetingsAnswer(models.Model):
     """feedback answer model"""
diff --git a/pms/static/cbv/360_feedback.js b/pms/static/cbv/360_feedback.js
new file mode 100644
index 000000000..32d2c7d91
--- /dev/null
+++ b/pms/static/cbv/360_feedback.js
@@ -0,0 +1,266 @@
+var archiveMessagedata = {
+    ar: "هل ترغب حقاً في أرشفة كل التعليقات المحددة؟",
+    de: "Möchten Sie wirklich alle ausgewählten Rückmeldungen archivieren?",
+    es: "¿Realmente quieres archivar todas las retroalimentaciones seleccionadas?",
+    en: "Do you really want to archive all the selected feedbacks?",
+    fr: "Voulez-vous vraiment archiver tous les retours sélectionnés?",
+  };
+  
+  var unarchiveMessagedata = {
+    ar: "هل ترغب حقاً في إلغاء الأرشفة عن كل التعليقات المحددة؟",
+    de: "Möchten Sie wirklich alle ausgewählten Rückmeldungen aus der Archivierung nehmen?",
+    es: "¿Realmente quieres desarchivar todas las retroalimentaciones seleccionadas?",
+    en: "Do you really want to unarchive all the selected feedbacks?",
+    fr: "Voulez-vous vraiment désarchiver tous les retours sélectionnés?",
+  };
+  
+  var deleteMessagedata = {
+    ar: "هل ترغب حقاً في حذف كل التعليقات المحددة؟",
+    de: "Möchten Sie wirklich alle ausgewählten Rückmeldungen löschen?",
+    es: "¿Realmente quieres eliminar todas las retroalimentaciones seleccionadas?",
+    en: "Do you really want to delete all the selected feedbacks?",
+    fr: "Voulez-vous vraiment supprimer tous les retours sélectionnés?",
+  };
+  
+  var norowMessages = {
+    ar: "لم يتم تحديد أي صفوف.",
+    de: "Es wurden keine Zeilen ausgewählt.",
+    es: "No se han seleccionado filas.",
+    en: "No rows have been selected.",
+    fr: "Aucune ligne n'a été sélectionnée.",
+  };
+  
+  $(".all-feedbacks").change(function (e) {
+    var is_checked = $(this).is(":checked");
+    if (is_checked) {
+      $(".all-feedback-row").prop("checked", true);
+    } else {
+      $(".all-feedback-row").prop("checked", false);
+    }
+  });
+  
+  $(".self-feedbacks").change(function (e) {
+    var is_checked = $(this).is(":checked");
+    if (is_checked) {
+      $(".self-feedback-row").prop("checked", true);
+    } else {
+      $(".self-feedback-row").prop("checked", false);
+    }
+  });
+  
+  $(".requested-feedbacks").change(function (e) {
+    var is_checked = $(this).is(":checked");
+    if (is_checked) {
+      $(".requested-feedback-row").prop("checked", true);
+    } else {
+      $(".requested-feedback-row").prop("checked", false);
+    }
+  });
+  
+  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();
+        // Does this cookie string begin with the name we want?
+        if (cookie.substring(0, name.length + 1) === name + "=") {
+          cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
+          break;
+        }
+      }
+    }
+    return cookieValue;
+  }
+  
+  function getCurrentLanguageCode(callback) {
+    var languageCode = $("#main-section-data").attr("data-lang");
+    var allowedLanguageCodes = ["ar", "de", "es", "en", "fr"];
+    if (allowedLanguageCodes.includes(languageCode)) {
+      callback(languageCode);
+    } else {
+      $.ajax({
+        type: "GET",
+        url: "/employee/get-language-code/",
+        success: function (response) {
+          var ajaxLanguageCode = response.language_code;
+          $("#main-section-data").attr("data-lang", ajaxLanguageCode);
+          callback(
+            allowedLanguageCodes.includes(ajaxLanguageCode)
+              ? ajaxLanguageCode
+              : "en"
+          );
+        },
+        error: function () {
+          callback("en");
+        },
+      });
+    }
+  }
+
+  
+
+$(document).on('click', '#archiveFeedback', function(e) {
+              e.preventDefault();
+            
+              var languageCode = null;
+              getCurrentLanguageCode(function(code) {
+                languageCode = code;
+            
+                var confirmMessage = archiveMessagedata[languageCode];
+                var textMessage = norowMessages[languageCode];
+            
+                var ids = JSON.parse($("#selectedInstances").attr("data-ids")) || [];
+                var announy_ids = JSON.parse($("#anounyselectedInstances").attr("data-ids")) || [];
+      
+                if (announy_ids.length > 0) {
+                  ids = []; 
+                }
+            
+                if (ids.length === 0 && announy_ids.length === 0) {
+                  Swal.fire({
+                    text: textMessage,
+                    icon: "warning",
+                    confirmButtonText: "Close",
+                  });
+                } else {
+                  Swal.fire({
+                    text: confirmMessage,
+                    icon: "info",
+                    showCancelButton: true,
+                    confirmButtonColor: "#008000",
+                    cancelButtonColor: "#d33",
+                    confirmButtonText: "Confirm",
+                  }).then(function(result) {
+                    if (result.isConfirmed) {
+                      $.ajax({
+                        type: "POST",
+                        url: "/pms/feedback-bulk-archive?is_active=False",
+                        data: {
+                          csrfmiddlewaretoken: getCookie("csrftoken"),
+                          ids: JSON.stringify(ids),
+                          announy_ids: JSON.stringify(announy_ids),
+                        },
+                        success: function(response, textStatus, jqXHR) {
+                          if (jqXHR.status === 200) {
+                            window.location.reload();
+                          } else {
+                          }
+                        },
+                      });
+                    }
+                  });
+                }
+              });
+            });
+
+
+$(document).on('click', '#UnarchiveFeedback', function(e) {
+              e.preventDefault();
+            
+              var languageCode = null;
+              getCurrentLanguageCode(function(code) {
+                languageCode = code;
+            
+                var confirmMessage = unarchiveMessagedata[languageCode];
+                var textMessage = norowMessages[languageCode];
+            
+                var ids = JSON.parse($("#selectedInstances").attr("data-ids")) || [];
+                var announy_ids = JSON.parse($("#anounyselectedInstances").attr("data-ids")) || [];
+      
+                if (announy_ids.length > 0) {
+                  ids = []; 
+                }
+            
+                if (ids.length === 0 && announy_ids.length === 0) {
+                  Swal.fire({
+                    text: textMessage,
+                    icon: "warning",
+                    confirmButtonText: "Close",
+                  });
+                } else {
+                  Swal.fire({
+                    text: confirmMessage,
+                    icon: "info",
+                    showCancelButton: true,
+                    confirmButtonColor: "#008000",
+                    cancelButtonColor: "#d33",
+                    confirmButtonText: "Confirm",
+                  }).then(function(result) {
+                    if (result.isConfirmed) {
+                      $.ajax({
+                        type: "POST",
+                        url: "/pms/feedback-bulk-archive?is_active=True",
+                        data: {
+                          csrfmiddlewaretoken: getCookie("csrftoken"),
+                          ids: JSON.stringify(ids),
+                          announy_ids: JSON.stringify(announy_ids),
+                        },
+                        success: function(response, textStatus, jqXHR) {
+                          if (jqXHR.status === 200) {
+                            window.location.reload();
+                          } else {
+                          }
+                        },
+                      });
+                    }
+                  });
+              }
+        });
+  });
+
+$(document).on('click', '#deleteFeedback', function(e) {
+      e.preventDefault();
+    
+      var languageCode = null;
+      getCurrentLanguageCode(function(code) {
+        languageCode = code;
+    
+        var confirmMessage = deleteMessagedata[languageCode];
+        var textMessage = norowMessages[languageCode];
+    
+        var ids = JSON.parse($("#selectedInstances").attr("data-ids")) || [];
+        console.log(ids)
+        var announy_ids = JSON.parse($("#anounyselectedInstances").attr("data-ids")) || [];
+    
+        if (ids.length === 0 && announy_ids.length === 0) {
+          Swal.fire({
+            text: textMessage,
+            icon: "warning",
+            confirmButtonText: "Close",
+          });
+        } else {
+          Swal.fire({
+            text: confirmMessage,
+            icon: "info",
+            showCancelButton: true,
+            confirmButtonColor: "#008000",
+            cancelButtonColor: "#d33",
+            confirmButtonText: "Confirm",
+          }).then(function(result) {
+            if (result.isConfirmed) {
+              $.ajax({
+                type: "POST",
+                url: "/pms/feedback-bulk-delete",
+                data: {
+                  csrfmiddlewaretoken: getCookie("csrftoken"),
+                  ids: JSON.stringify(ids),
+                  announy_ids: JSON.stringify(announy_ids),
+                },
+                success: function(response, textStatus, jqXHR) {
+                  if (jqXHR.status === 200) {
+                    window.location.reload();
+                  } else {
+                  }
+                },
+              });
+            }
+          });
+        }
+      });
+    });
+
+
+
+
+      
diff --git a/pms/static/src/dashboard/pmsChart.js b/pms/static/src/dashboard/pmsChart.js
index 267108f4d..9f51da15a 100644
--- a/pms/static/src/dashboard/pmsChart.js
+++ b/pms/static/src/dashboard/pmsChart.js
@@ -127,22 +127,14 @@ if (keyResultStatusChartCtx != null) {
 				let datasetLabel = e.chart.data.datasets[datasetIndex].label;
 				let value = e.chart.data.datasets[datasetIndex].data[dataIndex];
 				let label = e.chart.data.labels[dataIndex];
-				let params = "?status=" + label + "&archive=false";
-
-				$.ajax({
-					url: "/pms/key-result-view" + params,
-					type: "GET",
-					headers: {
-						"X-Requested-With": "XMLHttpRequest",
-					},
-					success: (response) => {
-						$("#dashboard").html(response);
-					},
-					error: (error, response) => {
-						console.log("Error", error);
-					},
-				});
+				let params = "?field=employee_objective_id__employee_id"+"&status=" + label + "&archive=false"
+				let statusValue = params.split("&")[1].split("=")[1];
+				$('input[name="status"]').val(decodeURIComponent(statusValue));
+				$('#dashboardKeyresult button').click();
 				$("#back_button").removeClass("d-none");
+				$("#employeeKeyRes").removeClass("d-none");
+
+
 			},
 		},
 		plugins: [{
diff --git a/pms/static/src/okr/objective_creation.js b/pms/static/src/okr/objective_creation.js
new file mode 100644
index 000000000..8985f2b5d
--- /dev/null
+++ b/pms/static/src/okr/objective_creation.js
@@ -0,0 +1,19 @@
+$(document).ready(function () {
+  // $('#id_aassignees').hide();
+  // $('#id_start_date').hide();
+
+
+  // $("#id_period").on("change",function(){
+  //   period_id = $(this).val()
+  //   if (period_id === 'create_new_period'){
+  //     $.ajax({
+  //         type: "GET",
+  //         url: 'create-period',
+  //         success: function (response) {
+  //           $("#PeriodModal").addClass("oh-modal--show");
+  //           $("#periodModalTarget").html(response);
+  //         },
+  //       });
+  //   }
+  // });
+});
diff --git a/pms/templates/bonus/bonus_point_setting_section.html b/pms/templates/bonus/bonus_point_setting_section.html
index 7e03e2bdb..1472a3171 100644
--- a/pms/templates/bonus/bonus_point_setting_section.html
+++ b/pms/templates/bonus/bonus_point_setting_section.html
@@ -62,9 +62,5 @@
       },
     });
   };
-  $(".oh-inner-sidebar__item .oh-accordion").click(function (e) {
-		e.stopPropagation();
-		$(this).toggleClass('oh-accordion--show')
-	});
 </script>
 {% endblock settings %}
diff --git a/pms/templates/bonus/bonus_seetting_action.html b/pms/templates/bonus/bonus_seetting_action.html
index 1829f2004..0729a93c7 100644
--- a/pms/templates/bonus/bonus_seetting_action.html
+++ b/pms/templates/bonus/bonus_seetting_action.html
@@ -6,7 +6,7 @@
       title="{% trans 'Edit' %}"
       data-toggle="oh-modal-toggle"
       data-target="#genericModal"
-      hx-get="{% url 'update-bonus-point-setting' instance.id %}?{{pd}}"
+      hx-get="{% url 'update-bonus-point-setting' instance.id %}?{{pd}}&instance_ids={{instance.ordered_ids}}"
       hx-target="#genericModalBody"
     >
       <ion-icon name="create-outline"></ion-icon>
diff --git a/pms/templates/cbv/360_feedback/anonymous_action.html b/pms/templates/cbv/360_feedback/anonymous_action.html
new file mode 100644
index 000000000..31830ad55
--- /dev/null
+++ b/pms/templates/cbv/360_feedback/anonymous_action.html
@@ -0,0 +1,28 @@
+{% load i18n %}
+
+{% if request.user.id|stringformat:"d" == instance.anonymous_feedback_id  or request.user.is_superuser %}
+<div class="oh-btn-group" onclick="event.stopPropagation();">
+    <a class="oh-btn w-100" data-toggle="oh-modal-toggle"
+     data-target="#genericModal" 
+    hx-get="{% url 'edit-anonymous-feedback' instance.id %}?instance_ids={{instance.ordered_ids}}"
+     title="{% trans 'Edit' %}" 
+     hx-target="#genericModalBody">
+     <ion-icon name="create-outline"></ion-icon></a>
+    <form action="{% url 'archive-anonymous-feedback' obj_id=instance.id %}" method="post" onsubmit="return confirm('{% if instance.archive %}{% trans "Are you sure you want to Un-archive this feedback?" %}{% else %}{% trans "Are you sure you want to archive this feedback?" %}{% endif %}')" style="display: contents">
+      {% if instance.archive == True %}
+        <button class="oh-btn oh-btn--danger-outline  w-100 "  title="{% trans 'Un-archive' %}" >
+      {% else %}
+        <button class="oh-btn oh-btn--danger-outline  w-100 "  title="{% trans 'Archive' %}" >
+      {% endif %}
+       {% csrf_token %}
+      <ion-icon name="archive-sharp" type="submit"></ion-icon>
+    </button>
+    </form>
+      <form action="{% url 'delete-anonymous-feedback' obj_id=instance.id %}" method="post" onsubmit="return confirm('{% trans "Do you want Delete this Feedback ?" %}')" style="display: contents">
+        {% csrf_token %}
+        <button  class="oh-btn oh-btn--danger-outline  w-100" title="{% trans 'Delete' %}" >
+            <ion-icon name="trash-outline" role="img" class="md hydrated" aria-label="trash outline"></ion-icon>
+        </button>
+      </form>
+    </div>
+    {% endif %}
diff --git a/pms/templates/cbv/360_feedback/custom_actions.html b/pms/templates/cbv/360_feedback/custom_actions.html
new file mode 100644
index 000000000..1dabfc78d
--- /dev/null
+++ b/pms/templates/cbv/360_feedback/custom_actions.html
@@ -0,0 +1,79 @@
+{% load i18n %}
+{% load static %}
+<div class="oh-btn-group" onclick="event.stopPropagation();">
+  {% if request.dashboard_feedback %}
+  <a class="oh-btn w-100"  href="{% url 'feedback-answer-get' id=instance.id %}" title="{% trans 'Answer' %}">
+    <img
+    style="width: 20px; height: 20px"
+    src="{% static 'images/ui/writing.png' %}"
+  /></a>
+  {% elif request.request_feedback %}
+        <a class="oh-btn w-100"  href="{% url 'feedback-answer-get' id=instance.id %}" title="{% trans 'Answer' %}">
+          <img
+          style="width: 20px; height: 20px"
+          src="{% static 'images/ui/writing.png' %}"
+        /></a>
+          <a class="oh-btn w-100"  href="{% url 'feedback-answer-view' id=instance.id %}" title="{% trans 'Answer view' %}"><ion-icon name="eye"></ion-icon></ion-icon></a>
+  {% elif request.all_feedback%}
+      {% if perms.pms.delete_feedback %}
+      <form action="{% url 'feedback-archive' id=instance.id %}" method="post" onsubmit="return confirm('{% if instance.archive %}{% trans "Are you sure you want to Un-archive this feedback?" %}{% else %}{% trans "Are you sure you want to archive this feedback?" %}{% endif %}')" style="display: contents">
+        {% if instance.archive %}
+            <button class="oh-btn oh-btn--danger-outline w-100" title="{% trans 'Un-archive' %}">
+        {% else %}
+            <button class="oh-btn oh-btn--danger-outline w-100" title="{% trans 'Archive' %}">
+        {% endif %}
+        {% csrf_token %}
+        <ion-icon name="archive-sharp" type="submit"></ion-icon>
+        </button>
+      </form>
+       {% if not instance.feedback_answer.all %}
+          <form action="{% url 'feedback-delete' id=instance.id %}" method="post" onsubmit="return confirm('{% trans "Do you want Delete this Feedback ?" %}')" style="display: contents">
+            {% csrf_token %}
+            <button  class="oh-btn oh-btn--danger-outline  w-100" title="{% trans 'Delete' %}" >
+                <ion-icon name="trash-outline" role="img" class="md hydrated" aria-label="trash outline"></ion-icon>
+            </button>
+          </form>
+          {% else %}
+          <button  class="oh-btn oh-btn--danger-outline  w-100" disabled title="{% trans "Can't delete the feedback it's already answered." %}">
+            <ion-icon name="trash-outline" role="img" class="md hydrated" aria-label="trash outline"></ion-icon>
+          </button>
+        {% endif %}
+        {%endif%}
+
+  {% else %}
+      <a class="oh-btn w-100"  href="{% url 'feedback-answer-get' id=instance.id %}" title="{% trans 'Answer' %}">
+        <img
+        style="width: 20px; height: 20px"
+        src="{% static 'images/ui/writing.png' %}"
+      /></a>
+      <a class="oh-btn w-100"  href="{% url 'feedback-answer-view' id=instance.id %}" title="{% trans 'Answer view' %}"><ion-icon name="eye"></ion-icon></ion-icon></a>
+      {% if perms.pms.delete_feedback %}
+      <form action="{% url 'feedback-archive' id=instance.id %}" method="post" onsubmit="return confirm('{% if instance.archive %}{% trans "Are you sure you want to Un-archive this feedback?" %}{% else %}{% trans "Are you sure you want to archive this feedback?" %}{% endif %}')" style="display: contents">
+        {% if instance.archive %}
+            <button class="oh-btn oh-btn--danger-outline w-100" title="{% trans 'Un-archive' %}">
+        {% else %}
+            <button class="oh-btn oh-btn--danger-outline w-100" title="{% trans 'Archive' %}">
+        {% endif %}
+            {% csrf_token %}
+            <ion-icon name="archive-sharp" type="submit"></ion-icon>
+        </button>
+      </form>
+      {% if not instance.feedback_answer.all %}
+        <form action="{% url 'feedback-delete' id=instance.id %}" method="post" onsubmit="return confirm('{% trans "Do you want Delete this Feedback ?" %}')" style="display: contents">
+          {% csrf_token %}
+          <button  class="oh-btn oh-btn--danger-outline  w-100" title="{% trans 'Delete' %}" >
+              <ion-icon name="trash-outline" role="img" class="md hydrated" aria-label="trash outline"></ion-icon>
+          </button>
+        </form>
+      {% elif request.self_feedback %}
+        <button  class="oh-btn oh-btn--danger-outline  w-100" disabled title="{% trans "Can't delete the feedback it's already answered." %}">
+          <ion-icon name="trash-outline" role="img" class="md hydrated" aria-label="trash outline"></ion-icon>
+        </button>
+      {% endif %}
+      {%endif%}
+{%endif%}
+</div>
+
+
+
+
diff --git a/pms/templates/cbv/360_feedback/custom_status_col.html b/pms/templates/cbv/360_feedback/custom_status_col.html
new file mode 100644
index 000000000..d02773b98
--- /dev/null
+++ b/pms/templates/cbv/360_feedback/custom_status_col.html
@@ -0,0 +1,22 @@
+{% load i18n %}
+<style>
+    .oh-dot--colorOn {
+        background-color: yellowgreen
+    }
+    .oh-dot--colorBehind {
+        background-color: hsl(40deg, 91%, 60%)
+    }
+    
+    .oh-dot--colorAt {
+        background-color: hsl(1deg, 100%, 61%)
+    }
+    .oh-dot--colorClosed {
+        background-color: hsl(204deg, 70%, 53%)
+    }
+    
+    .oh-dot--colorNot {
+        background-color: hsla(270, 5%, 48%, 0.709)
+    }
+</style>
+<span class="oh-dot oh-dot--small  me-1 oh-dot--color{{ instance.status }}"></span>
+              <span>{% trans instance.status %}</span>
\ No newline at end of file
diff --git a/pms/templates/cbv/360_feedback/due_in_col.html b/pms/templates/cbv/360_feedback/due_in_col.html
new file mode 100644
index 000000000..8357dbeb9
--- /dev/null
+++ b/pms/templates/cbv/360_feedback/due_in_col.html
@@ -0,0 +1,2 @@
+{% load i18n %}
+<a>{{ current_date|timesince:instance.end_date }}</a>
\ No newline at end of file
diff --git a/pms/templates/cbv/360_feedback/feedback_filter.html b/pms/templates/cbv/360_feedback/feedback_filter.html
new file mode 100644
index 000000000..1ac33931f
--- /dev/null
+++ b/pms/templates/cbv/360_feedback/feedback_filter.html
@@ -0,0 +1,159 @@
+{% load i18n %}
+<div class="oh-dropdown__filter-body">
+    <style>
+      .filter-pill {
+        border-radius: 999px;
+        padding: 2px 8px;
+        background-color: #f0f0f0;
+        display: inline-block;
+        margin: 4px 1px;
+        cursor: pointer;
+        transition: background-color 0.3s ease;
+      }
+      .filter-pill.active {
+        background-color: #007bff;
+        color: white;
+      }
+    </style>
+    <div class="oh-accordion">
+      <div class="oh-accordion-header">{% trans "Feedback" %}</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" for="{{feedback_filter_form.employee_id.id_for_label}}">{% trans "Employee" %}</label>
+              {{feedback_filter_form.employee_id}}
+            </div>
+          </div>
+        
+          <div class="col-sm-12 col-md-12 col-lg-6">
+            <div class="oh-input-group">
+              <label class="oh-label" for="{{feedback_filter_form.manager_id.id_for_label}}">{% trans "Manager" %}</label>
+              {{feedback_filter_form.manager_id}}
+            </div>
+          </div>
+          <div class="col-sm-12 col-md-12 col-lg-6">
+            <div class="oh-input-group">
+              <label class="oh-label" for="{{feedback_filter_form.subordinate_id.id_for_label}}">{% trans "Subordinate" %}</label>
+              {{feedback_filter_form.subordinate_id}}
+            </div>
+          </div>
+          <div class="col-sm-12 col-md-12 col-lg-6">
+            <div class="oh-input-group">
+              <label class="oh-label" for="{{feedback_filter_form.colleague_id.id_for_label}}">{% trans "Colleague" %}</label>
+              {{feedback_filter_form.colleague_id}}
+            </div>
+          </div>
+        
+          <div class="col-sm-12 col-md-12 col-lg-6">
+            <div class="oh-input-group">
+              <label class="oh-label" for="{{feedback_filter_form.start_date.id_for_label}}">{% trans "Start Date" %}</label>
+              {{feedback_filter_form.start_date}}
+            </div>
+          </div>
+        
+          <div class="col-sm-12 col-md-12 col-lg-6">
+            <div class="oh-input-group">
+              <label class="oh-label" for="{{feedback_filter_form.end_date.id_for_label}}">{% trans "End Date" %}</label>
+              {{feedback_filter_form.end_date}}
+            </div>
+          </div>       
+          <div class="col-sm-12 col-md-12 col-lg-4">
+            <div class="oh-input-group">
+              <label class="oh-label" for="{{feedback_filter_form.status.id_for_label}}">{% trans "Status" %}</label>
+              {{feedback_filter_form.status}}
+            </div>
+          </div>
+          <div class="col-sm-12 col-md-12 col-lg-4">
+            <div class="oh-input-group">
+              <label class="oh-label" for="{{feedback_filter_form.offboarding_employees.id_for_label}}">{% trans "In Offboarding?" %}</label>
+              {{feedback_filter_form.offboarding_employees}}
+            </div>
+          </div>
+          <div class="col-sm-12 col-md-12 col-lg-4">
+            <div class="oh-input-group">
+              <label class="oh-label" for="{{feedback_filter_form.archive.id_for_label}}">{% trans "Archive" %}</label>
+              {{feedback_filter_form.archive}}
+            </div>
+          </div>
+        </div>
+        
+      </div>
+    </div>
+    
+    <div class="oh-accordion">
+      <div class="oh-accordion-header">{% trans "Advanced" %}</div>
+      <div class="oh-accordion-body">
+        <div class="row">
+          <div class="row">
+            <!-- Start Date Range -->
+            <div class="col-md-6 col-lg-12">
+              <label class="oh-label">{% trans "Start Date Range" %}</label>
+              <div class="d-flex gap-2">
+                {{ feedback_filter_form.start_date_range.0 }}
+                {{ feedback_filter_form.start_date_range.1 }}
+              </div>
+            </div>
+          
+            <!-- End Date Range -->
+            <div class="col-md-6 col-lg-12">
+              <label class="oh-label">{% trans "End Date Range" %}</label>
+              <div class="d-flex gap-2">
+                {{ feedback_filter_form.end_date_range.0 }}
+                {{ feedback_filter_form.end_date_range.1 }}
+              </div>
+            </div>
+          
+            <!-- Created At Range (if needed) -->
+            <div class="col-md-6 col-lg-12">
+              <label class="oh-label">{% trans "Created At Range" %}</label>
+              <div class="d-flex gap-2">
+                {{ feedback_filter_form.created_at_date_range.0 }}
+                {{ feedback_filter_form.created_at_date_range.1 }}
+              </div>
+            </div>
+          </div>        
+          <div class="col-md-6 col-lg-12">
+            <div class="oh-input-group">
+              <label class="oh-label">{% trans "Quick Filters" %}</label>
+              <div>
+                <input type="text" name="due_date_quick_filter" hidden >
+                {% for value, label in feedback_filter_form.due_date_quick_filter.field.choices %}
+                  {% if value %}
+                    <button type="button" onclick="$(this).closest('form').find('[name=due_date_quick_filter]').val('{{value}}');$(this).closest('form').find('[type=submit]').click();"
+                            class="filter-pill {% if request.GET.due_date_quick_filter == value %}active{% endif %}">
+                      {{ label }}
+                    </button>
+                  {% endif %}
+                {% endfor %}
+              </div>
+              </div>
+          </div>
+          {% comment %} <div class="col-sm-12 col-md-12 col-lg-6">
+          <div class="oh-input-group fil">
+              <a id="filtertoday" class="oh-btn oh-btn--secondary oh-btn--small w-100" onclick="updateHiddenInput('today')">{% trans "Today" %} </a>
+              <input type="hidden" name="created_at_date_range">
+            </div>
+
+          </div>
+          <div class="col-sm-12 col-md-12 col-lg-6">
+            <div class="oh-input-group fil">
+              <a id="filteryesterday" class="oh-btn oh-btn--secondary oh-btn--small w-100" onclick="updateHiddenInput('yesterday')">{% trans "Yesterday" %}</a>
+            </div>
+          </div>
+          <div class="col-sm-12 col-md-12 col-lg-6">
+            <div class="oh-input-group fil">
+              <a id="filterweek" class="oh-btn oh-btn--secondary oh-btn--small w-100" onclick="updateHiddenInput('week')">{% trans "This Week" %}</a>
+            </div>
+          </div>
+          <div class="col-sm-12 col-md-12 col-lg-6">
+            <div class="oh-input-group fil">
+              <a id="filtermonth" class="oh-btn oh-btn--secondary oh-btn--small w-100" onclick="updateHiddenInput('month')">{% trans "This Month" %}</a>
+            </div>
+          </div> {% endcomment %}
+        </div>
+      </div>
+    </div>
+  </div>
+
+  
diff --git a/pms/templates/cbv/360_feedback/feedback_home.html b/pms/templates/cbv/360_feedback/feedback_home.html
new file mode 100644
index 000000000..c7bace653
--- /dev/null
+++ b/pms/templates/cbv/360_feedback/feedback_home.html
@@ -0,0 +1,103 @@
+{% extends "index.html" %}
+{% load static %}
+{% load i18n %}
+{% block content %}
+<meta name="csrf-token" content="{{ csrf_token }}">
+<style>
+  
+    .at_risk--dot{
+        background-color:red;
+      }
+      .not_started--dot{
+        background-color:grey;
+      }
+      .behind--dot{
+        background-color: orange;
+      }
+      .closed--dot{
+        background-color:rgb(103, 171, 238)
+      }
+      .on_track--dot{
+        background-color:yellowgreen;
+      }
+      .status-At.Risk {
+      
+        border-left: 3.4px solid red !important;
+        border-radius: 4px 0 0 4px;
+      }
+      
+      .status-Not.Started {
+      
+        border-left: 3.4px solid grey !important;
+        border-radius: 4px 0 0 4px;
+      }
+      .status-Behind {
+      
+        border-left: 3.4px solid orange !important;
+        border-radius: 4px 0 0 4px;
+      }
+      .status-Closed {
+      
+        border-left: 3.4px solid rgb(103, 171, 238) !important;
+        border-radius: 4px 0 0 4px;
+      }
+      .status-On.Track {
+      
+        border-left: 3.4px solid yellowgreen !important;
+        border-radius: 4px 0 0 4px;
+      }
+    </style>
+<div hx-get="{% url "feedback-nav-view" %}?{{request.GET.urlencode}}" hx-trigger="load">
+</div> 
+
+
+{% include "generic/components.html" %}
+<div class="oh-checkpoint-badge mb-2" id="selectedInstances" data-ids="[]" data-clicked="" style="display: none"></div>
+<div class="oh-checkpoint-badge mb-2" id="anounyselectedInstances" data-ids="[]" data-clicked="" style="display: none"></div>
+
+{% comment %} <div class="oh-checkpoint-badge mb-2" id="selectedAnonymous" data-ids="[]" data-clicked=""  data-anounymous = "true" style="display: none">
+</div> {% endcomment %}
+{% comment %} archive=false {% endcomment %}
+<div class="oh-wrapper" 
+  id="listContainer">
+  <div class="animated-background">   
+</div>
+</div>
+
+
+
+
+<div class="oh-modal" id="objectUpdateModal"
+role="dialog" aria-labelledby="objectUpdateModalLabel"
+aria-hidden="true">
+<div class="oh-modal__dialog" id="objectUpdateModalTarget"></div>
+</div>
+
+
+<div
+  class="oh-modal"
+  id="FeedbackModal"
+  role="dialog"
+  aria-labelledby="FeedbackModal"
+  aria-hidden="true"
+  >
+  <div class="oh-modal__dialog">
+    <div class="oh-modal__dialog-body" id="OneFeedbackTarget"></div>
+  </div>
+</div>
+<script src="{% static 'cbv/360_feedback.js' %}"></script>
+{% comment %} <script>
+  $(document).on('submit', '#deletebtn', function() {
+          $('.oh-modal--show').removeClass('oh-modal--show');
+  });
+</script> {% endcomment %}
+
+<script>
+  function updateHiddenInput(value) {
+      var hiddenInput = document.querySelector('input[name="created_at_date_range"]');
+      hiddenInput.value = '';
+      hiddenInput.value = value;
+      $("#applyFilter").click();
+  }
+</script>
+{% endblock content %}
\ No newline at end of file
diff --git a/pms/templates/cbv/360_feedback/form/form_inherit.html b/pms/templates/cbv/360_feedback/form/form_inherit.html
new file mode 100644
index 000000000..d46b8ba45
--- /dev/null
+++ b/pms/templates/cbv/360_feedback/form/form_inherit.html
@@ -0,0 +1,45 @@
+   
+   {% load i18n %}
+   <div>
+    {% include 'generic/horilla_form.html' %}
+
+</div>
+
+
+
+
+
+<button id="colleguesButton" hx-get="{% url 'get-collegues' %}" hx-target="#id_colleague_id" hidden > </button>
+<button id="managerButton" hx-get="{% url 'get-collegues' %}" hx-target="#id_manager_id" hidden > </button>
+<button id="subordinatesButton" hx-get="{% url 'get-collegues' %}" hx-target="#id_subordinate_id" hidden > </button>
+<button id="keyresultButtton" hx-get="{% url 'get-collegues' %}" hx-target="#id_employee_key_results_id" hidden > </button>
+
+
+<script>
+  $('#id_period_parent_div').hide();
+
+   $(document).ready(function () {
+    if (!$('#id_cyclic_feedback').is(':checked')) {
+        $("#id_cyclic_feedback_days_count_parent_div").hide();
+        $("#id_cyclic_feedback_period_parent_div").hide(); 
+    }
+    $("#id_cyclic_feedback").on("change", function () {
+        if (this.checked) {
+            $("#id_cyclic_feedback_days_count_parent_div").show();
+            $("#id_cyclic_feedback_period_parent_div").show();
+            $("#id_cyclic_feedback_days_count").prop("required", true);
+            $("#id_cyclic_feedback_period").prop("required", true);
+        } else {
+            $("#id_cyclic_feedback_days_count_parent_div").hide();
+            $("#id_cyclic_feedback_period_parent_div").hide();
+            $("#id_cyclic_feedback_days_count").prop("required", false);
+            $("#id_cyclic_feedback_period").prop("required", false);
+        }
+    });
+});
+
+
+
+</script>
+
+      
\ No newline at end of file
diff --git a/pms/templates/cbv/360_feedback/inherit.html b/pms/templates/cbv/360_feedback/inherit.html
new file mode 100644
index 000000000..acc00a5c4
--- /dev/null
+++ b/pms/templates/cbv/360_feedback/inherit.html
@@ -0,0 +1,30 @@
+<div>
+    {% include "generic/horilla_form.html" %}
+</div>
+<script>
+    $(document).ready(function () {
+      var fields = [
+        "#id_employee_id_parent_div",
+        "#id_department_id_parent_div",
+        "#id_job_position_id_parent_div",
+      ];
+  
+      function updateFieldsVisibility() {
+        var based_on = $("#id_based_on").val();
+  
+        fields.forEach(function (field) {
+          if (field.includes(based_on)) {
+            $(field).show();
+          } else {
+            $(field).hide();
+          }
+        });
+      }
+  
+      updateFieldsVisibility();
+  
+      $("#id_based_on").change(function () {
+        updateFieldsVisibility();
+      });
+    });
+  </script>
\ No newline at end of file
diff --git a/pms/templates/cbv/dashboard/actions.html b/pms/templates/cbv/dashboard/actions.html
new file mode 100644
index 000000000..7959c69a0
--- /dev/null
+++ b/pms/templates/cbv/dashboard/actions.html
@@ -0,0 +1,35 @@
+{% load i18n %}
+<div class="oh-btn-group">
+    <button
+        class="oh-btn oh-btn--light-bkg w-50"
+        title="{% trans 'Edit' %}"
+        data-toggle="oh-modal-toggle"
+        data-target="#genericModal"
+        hx-get='{% url "employee-key-result-update" instance.id %}'
+        hx-target="#genericModalBody"
+    >
+        <ion-icon name="create-outline"></ion-icon>
+    </button>
+    <form
+        hx-post='{% url "delete-employee-keyresult" instance.id %}?dashboard=True'
+        class="w-50"
+        hx-target = "#empObjTr{{instance.id}}"
+        hx-swap="innerHTML"
+        hx-confirm="{% trans 'Are you sure you want to delete this Key result?' %}"
+        onclick="event.stopPropagation()" >
+        <input type="hidden" name="dashboard" value="True">
+        {% csrf_token %}
+        <button
+            type="submit"
+            class="oh-btn oh-btn--light-bkg w-100"
+            title="{% trans 'Delete' %}"
+        >
+            <ion-icon
+                class="me-1 md hydrated"
+                name="trash-outline"
+                role="img"
+                aria-label="trash outline"
+            ></ion-icon>
+        </button>
+    </form>
+</div>
\ No newline at end of file
diff --git a/pms/templates/cbv/dashboard/current_value.html b/pms/templates/cbv/dashboard/current_value.html
new file mode 100644
index 000000000..af80e8f91
--- /dev/null
+++ b/pms/templates/cbv/dashboard/current_value.html
@@ -0,0 +1,75 @@
+<input
+                                                    id = {{instance.id}}
+                                                    type="number" class="oh-input p-1"  min="0"
+                                                    max="{{instance.target_value}}"
+                                                    value="{{instance.current_value}}"
+                                                    name="current_value"
+                                                    onchange="progress(this)"
+                                                />
+
+<script>
+    function progress (element) {
+        var currentValue = $(element).val()
+       // keyResultTable = $(element).closest('.oh-sticky-table__tbody');
+        keyResultRow = $(element).closest('tr');
+        empKeyResultId = keyResultRow.attr("data-kr-id")
+        var targetValue = keyResultRow.find('[data-value]').attr("data-value")
+        console.log(targetValue)
+
+        // Extract only the numeric part using a regular expression
+        var numericValue = parseFloat(targetValue.replace(/[^\d.]/g, ''));
+        var prgressPercentage = parseInt( currentValue*100/numericValue )
+        // Ensure totalProgress doesn't exceed 100
+        if (prgressPercentage < 0) {
+            Swal.fire({
+                icon: 'error',
+                title: 'Oops...',
+                text: 'Current Value Cannot be -ve',
+                timer: 3000, // Display the alert for 3 seconds
+                timerProgressBar: true, // Show the progress bar
+                showConfirmButton: false // Hide the "OK" button
+            });
+        }
+        else{
+            $.ajax({
+            type: "post",
+            url: "{% url 'key-result-current-value-update' %}",
+            data: {
+                csrfmiddlewaretoken: getCookie("csrftoken"),
+                "current_value":currentValue,
+                "emp_key_result_id":empKeyResultId
+
+            },
+            success: function (response) {
+                if (response.type != 'error'){
+                keyResultRow.find('.p-percentage').text(prgressPercentage+'%');
+
+                // Iterate over each span and get its text content
+                var total_percentage = 0
+                var total_kr = 0
+                keyResultRow.find('.p-percentage').each(function() {
+                    strPercentage =  $(this).text();
+                    numPercentage = parseFloat(strPercentage.replace(/[^\d.]/g, ''));
+                    total_percentage += numPercentage
+                    total_kr += 1
+                });
+                totalProgress = parseInt( total_percentage/total_kr)
+                // Ensure totalProgress doesn't exceed 100
+                if (totalProgress > 100) {
+                    totalProgress = 100;
+                }
+                objectiveProgressContainer = $(element).closest('.oh-accordion-meta__item').find('.progress_bar_objective');
+                objectiveProgressContainer.html(
+                    '<div class="oh-progress" role="progressbar">'+
+                    '<div class="oh-progress__bar oh-progress__bar--secondary" style="width: calc('+ totalProgress + '%)"></div>' +
+                    '</div>' +
+                    '<div class="oh-progress-container__percentage" style="width:50px" name= "key_result_percentage">'+ totalProgress +' %</div>'
+
+                    )
+                }
+            }
+            });
+        }
+    }
+
+</script>
\ No newline at end of file
diff --git a/pms/templates/cbv/dashboard/keyresult_col.html b/pms/templates/cbv/dashboard/keyresult_col.html
new file mode 100644
index 000000000..1ad87f0a1
--- /dev/null
+++ b/pms/templates/cbv/dashboard/keyresult_col.html
@@ -0,0 +1,12 @@
+{% load i18n mathfilters%}
+<span class='d-flex justify-content-between align-items-center'>
+    {{ instance.key_result_id }}
+    {% if instance.end_date %}
+    <span title='due {% if instance.end_date == today %}today {% else %}in {{ instance.end_date|sub:today }}{% endif %}'>
+        <ion-icon
+            class="text-{% if instance.end_date < today %}danger {% elif instance.end_date == today %}warning {% else %}success{% endif %}"
+            name="time-sharp">
+        </ion-icon>
+    </span>
+    {% endif%}
+</span>
diff --git a/pms/templates/cbv/key_results/actions.html b/pms/templates/cbv/key_results/actions.html
new file mode 100644
index 000000000..1e6856a44
--- /dev/null
+++ b/pms/templates/cbv/key_results/actions.html
@@ -0,0 +1,36 @@
+{% load i18n %}
+<div class="oh-btn-group">
+    <a
+    onclick="event.stopPropagation();"
+    class="oh-btn oh-btn--light-bkg w-100"
+    data-toggle="oh-modal-toggle"
+    data-target="#genericModal"
+    hx-get="{% url 'update-key-result' instance.id %}?instance_ids={{instance.ordered_ids}}"
+    hx-target="#genericModalBody"
+    title='{% trans "Edit" %}'
+    >
+    <ion-icon
+        name="create-outline"
+        role="img"
+        class="md hydrated"
+        style="color: blue"
+        aria-label="create outline"
+    ></ion-icon>
+    </a>
+    <a
+    class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100"
+    onclick = "event.preventDefault();event.stopPropagation();"
+    hx-confirm="{% trans 'Do you want to delete this Key result?' %}"
+    hx-post="{% url 'delete-key-result' instance.id %}?{{pd}}"
+    hx-target="#key-result-container"
+    title="{% trans 'Delete' %}"
+    >
+    <ion-icon
+        name="trash-outline"
+        role="img"
+        class="md hydrated"
+        aria-label="trash outline"
+    ></ion-icon>
+    </a>
+</div>
+
diff --git a/pms/templates/cbv/key_results/detail_view_actions.html b/pms/templates/cbv/key_results/detail_view_actions.html
new file mode 100644
index 000000000..3e403d911
--- /dev/null
+++ b/pms/templates/cbv/key_results/detail_view_actions.html
@@ -0,0 +1,41 @@
+{% load i18n %}
+<div class="oh-btn-group w-100">
+    <a
+    onclick="event.stopPropagation();"
+    class="oh-btn oh-btn--info w-50"
+    data-toggle="oh-modal-toggle"
+    data-target="#genericModal"
+    hx-get="{% url 'update-key-result' instance.id %}?instances_ids={{ request.GET.instance_ids }}"
+    hx-target="#genericModalBody"
+    title='{% trans "Edit" %}'
+    >
+    <ion-icon
+        name="create-outline"
+        role="img"
+        class="md hydrated"
+        aria-label="create outline"
+    ></ion-icon>
+    </a>
+    <a
+    class="oh-btn oh-btn--secondary w-50"
+    onclick = "event.preventDefault();event.stopPropagation();"
+    hx-confirm="{% trans 'Do you want to delete this Key result?' %}"
+    hx-post="{% url 'key-result-delete' instance.id %}?instances_ids={{request.GET.instance_ids}}"
+    hx-target="#genericModalBody"
+    title="{% trans 'Delete' %}"
+    >
+    <ion-icon
+        name="trash-outline"
+        role="img"
+        class="md hydrated"
+        aria-label="trash outline"
+    ></ion-icon>
+    </a>
+</div>
+
+
+{% if request.GET.deleted %}
+<script>
+    $('#reloadMessagesButton').click();
+</script> 
+{% endif %}
\ No newline at end of file
diff --git a/pms/templates/cbv/key_results/key_result_filter.html b/pms/templates/cbv/key_results/key_result_filter.html
new file mode 100644
index 000000000..c34d38943
--- /dev/null
+++ b/pms/templates/cbv/key_results/key_result_filter.html
@@ -0,0 +1,60 @@
+{% load i18n %}
+<div class="oh-dropdown__filter-body">
+    <div class="oh-accordion">
+      <div class="oh-accordion-header">{% trans "Key Result" %}</div>
+      <div class="oh-accordion-body">
+        <div class="row">
+          <div class="col-sm-6">
+            <div class="oh-input-group">
+              <label class="oh-label">{% trans "Progress Type" %}</label>
+              {{ form.progress_type }}
+            </div>
+          </div>
+          <div class="col-sm-6">
+            <div class="oh-input-group">
+              <label class="oh-label">{% trans "Target Value" %}</label>
+              {{ form.target_value }}
+            </div>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-sm-6">
+            <div class="oh-input-group">
+              <label class="oh-label">{% trans "Duration" %}</label>
+              {{ form.duration }}
+            </div>
+          </div>
+          <div class="col-sm-6">
+            <div class="oh-input-group">
+              <label class="oh-label">{% trans "Company" %}</label>
+              {{ form.company_id }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+
+
+<script>
+    $("#filterForm").submit(function (e) {
+      var formData = $(this).serialize();
+      count = 0;
+      formData.split("&").forEach(function (field) {
+        parts = field.split("=");
+        value = parts[1];
+        if (parts[0] !== "view"){
+          if (value && value !== "unknown") {
+            count++;
+          }
+        }
+      });
+      $("#filterCount").empty();
+      if (count > 0) {
+        $("#filterCount").text("(" + count + ")");
+      }
+      // $('#field').attr('hx-vals',`{'data':${formData}}` );
+    });
+</script>
+  
\ No newline at end of file
diff --git a/pms/templates/cbv/key_results/key_result_home.html b/pms/templates/cbv/key_results/key_result_home.html
new file mode 100644
index 000000000..10d22d9ae
--- /dev/null
+++ b/pms/templates/cbv/key_results/key_result_home.html
@@ -0,0 +1,27 @@
+{% extends "index.html" %}
+{% load static %}
+{% load i18n %}
+{% block content %}
+<meta name="csrf-token" content="{{ csrf_token }}">
+
+<div hx-get="{% url "key-result-navbar" %}" hx-trigger="load">
+</div> 
+
+
+{% include "generic/components.html" %}
+<div class="oh-checkpoint-badge mb-2" id="selectedInstances" data-ids="[]" data-clicked="" style="display: none">
+</div>
+
+
+<div class="oh-wrapper" 
+  id="listContainer">
+  <div class="animated-background">   
+</div>
+</div> 
+
+
+
+
+<script src="{% static 'cbv/deleteFunc.js' %}"></script>	
+
+{% endblock content %}
\ No newline at end of file
diff --git a/pms/templates/cbv/meetings/actions.html b/pms/templates/cbv/meetings/actions.html
new file mode 100644
index 000000000..575f9b47d
--- /dev/null
+++ b/pms/templates/cbv/meetings/actions.html
@@ -0,0 +1,101 @@
+{% load i18n %}
+<style>
+    .oh-btn-group button {
+        border-right: 1px solid hsl(213, 22%, 93%);
+    }
+</style>
+<div>
+    <div class="oh-btn-group" onclick="event.stopPropagation()">
+
+        {% if perms.pms.add_meetings or request.user.employee_get in instance.manager.all or request.user.employee_get in instance.answer_employees.all  %}
+        
+        <a 
+        onclick="event.preventDefault(); event.stopPropagation();"
+        hx-get="{% url 'add-response' instance.id %}"
+        hx-target="#genericModalBody"
+        data-toggle="oh-modal-toggle"
+        data-target="#genericModal"
+        class="oh-btn oh-btn--light-bkg w-100"
+        title="Add MoM"
+     >
+       <ion-icon name="add-outline"></ion-icon>
+     </a>
+        {% endif %}
+        {% if request.user.employee_get in instance.answer_employees.all or request.user.employee_get in instance.manager.all %}
+        {% if instance.question_template %}
+        <a
+            hx-get="{% url 'meeting-question-template-view' instance.id %}"
+            hx-target="#answerContainer"
+            data-target="#activitySidebar"
+            class="oh-btn oh-btn--light-bkg oh-activity-sidebar__open w-100 text-decoration-none"
+            title="Answer"
+        >
+            <i class="material-symbols-outlined fw-light" data-target="#activitySidebar" style="font-size:14px;">
+                edit_document
+            </i>
+        </a>
+        {% else %}
+        <a
+            class="oh-btn oh-btn--light-bkg oh-btn--disabled w-100 text-decoration-none"
+        >
+            <i class="material-symbols-outlined fw-light" style="font-size:14px;">
+                edit_document
+            </i>
+        </a>
+        {% endif %}
+        {% else %}
+        <a
+            class="oh-btn oh-btn--light-bkg oh-btn--disabled w-100 text-decoration-none"
+        >
+            <i class="material-symbols-outlined fw-light" style="font-size:14px;">
+                edit_document
+            </i>
+        </a>
+        {% endif %}
+        {% if perms.pms.change_meetings or request.user.employee_get in instance.manager.all %}
+            <a
+                onclick="event.preventDefault();event.stopPropagation()"
+                hx-get="{% url 'update-meeting' instance.id %}?instance_ids={{instance.ordered_ids}}" hx-target='#genericModalBody' hx-swap='innerHTML' data-toggle='oh-modal-toggle' data-target='#genericModal'  class="oh-btn oh-btn--light-bkg w-100" title="Edit"
+            ><ion-icon name="create-outline"></ion-icon></a>
+        {% endif %}
+        {% if perms.pms.delete_meetings %}
+            {% if not instance.is_active %}
+                    <form
+                        action='{% url "archive-meeting" instance.id %}'
+                        onsubmit="return confirm('{% trans "Do you want to unarchive this meeting?" %}')"
+                        method="post"
+                        style="display: contents;width:100%">
+                        {% csrf_token %}
+                        <button onclick="event.stopPropagation()" class="oh-btn oh-btn--light-bkg w-100" title="{% trans 'Unarchive' %}">
+                            <ion-icon name="archive"></ion-icon>
+                        </button>
+                    </form>
+            {% else %}
+                    <form
+                        action="{% url 'archive-meeting' instance.id %}"
+                        onsubmit="return confirm('{% trans "Do you want to archive this meeting?" %}')"
+                        method="post"
+                        style="display: contents;width:100%">
+                        {% csrf_token %}
+                        <button onclick="event.stopPropagation()" class="oh-btn oh-btn--light-bkg w-100" title="{% trans 'Archive' %}">
+                            <ion-icon name="archive"></ion-icon>
+                        </button>
+                    </form>
+            {% endif %}
+        {% endif %}
+        {% if perms.pms.delete_meetings %}
+            <form
+                action="{% url 'meetings-delete' instance.id %}"
+                onsubmit="return confirm('{% trans "Are you sure to delete this meeting?" %}')"
+                method="post"
+                style="display: contents;width:100%">
+                {% csrf_token %}
+                <button onclick="event.stopPropagation()" class="oh-btn oh-btn--light-bkg oh-btn--danger-outline  w-100" title="{% trans 'Delete' %}">
+                <ion-icon name="trash-outline" role="img" class="md hydrated" aria-label="trash outline"></ion-icon>
+                </button>
+            </form>
+        {% endif %}
+    </div>
+</div>
+
+                                 
\ No newline at end of file
diff --git a/pms/templates/cbv/meetings/date.html b/pms/templates/cbv/meetings/date.html
new file mode 100644
index 000000000..3c3f88dad
--- /dev/null
+++ b/pms/templates/cbv/meetings/date.html
@@ -0,0 +1,3 @@
+<div>
+    {{instance.date}}
+</div>
\ No newline at end of file
diff --git a/pms/templates/cbv/meetings/detail_action.html b/pms/templates/cbv/meetings/detail_action.html
new file mode 100644
index 000000000..b177dc77e
--- /dev/null
+++ b/pms/templates/cbv/meetings/detail_action.html
@@ -0,0 +1,18 @@
+{% load i18n %}
+{% if perms.pms.change_meetings or request.user.employee_get in instance.manager.all %}
+    <button data-toggle="oh-modal-toggle" data-target="#genericModal" hx-target="#genericModalBody" hx-get="{% url 'update-meeting' instance.id %}" type="submit" class="oh-btn oh-btn-group oh-btn--info w-100" title="dit">
+        <ion-icon name="create-outline" role="img" class="md hydrated" aria-label="information circle outline"></ion-icon>
+    </button>
+    {% endif %}
+    {% if perms.pms.delete_meetings %}
+    <form
+        action="{% url 'meetings-delete' instance.id %}"
+        onsubmit="return confirm('{% trans "Are you sure to delete this meeting?" %}')"
+        method="post"
+        style="display: contents;width:100%">
+        {% csrf_token %}
+        <button onclick="event.stopPropagation()" class="oh-btn oh-btn-group oh-btn--secondary  w-100" title="{% trans 'Delete' %}">
+        <ion-icon name="trash-outline" role="img" class="md hydrated" aria-label="trash outline"></ion-icon>
+        </button>
+    </form>
+{% endif %}
diff --git a/pms/templates/cbv/meetings/employees.html b/pms/templates/cbv/meetings/employees.html
new file mode 100644
index 000000000..5a7220424
--- /dev/null
+++ b/pms/templates/cbv/meetings/employees.html
@@ -0,0 +1,33 @@
+{% load i18n %}
+<div >
+    {% for employee in instance.employee_id.all %}
+    <div id="employeeContainer{{employee.id}}-{{instance.id}}">
+        <span class="oh-user-panel oh-collapse-panel" data-type="user" >
+            <div class="oh-profile oh-profile--md">
+                <div class="oh-profile__avatar mr-1">
+                    <img
+                    src="https://ui-avatars.com/api/?name={{employee.get_full_name}}&background=random"
+                    class="oh-profile__image"
+                    alt="Baby C."
+                    />
+                </div>
+                <span class="oh-profile__name oh-text--dark" title="{{employee.get_full_name}}"
+                >{{employee.get_full_name|truncatechars:15}}</span>
+            </div>
+            {% if perms.pms.change_meetings or request.user.employee_get in instance.manager.all %}
+            <a
+                hx-confirm="{% trans 'Are you sure to remove this employee?' %}"
+                hx-post="{% url 'meeting-employee-remove' instance.id employee.id %}"
+                title="{% trans "Remove" %}" hx-swap="outerHTML"
+                hx-target="#employeeContainer{{employee.id}}-{{instance.id}}" class="oh-user-panel__remove"
+                onclick="event.stopPropagation()"
+            >
+                <ion-icon name="close-outline"></ion-icon>
+            </a>
+            {% endif %}
+        </span>
+    </div>
+    {% endfor %}
+    <span class="count-span">{{instance.employee_id.all|length}} {% trans "Employees" %}</span>
+
+</div>
\ No newline at end of file
diff --git a/pms/templates/cbv/meetings/filter.html b/pms/templates/cbv/meetings/filter.html
new file mode 100644
index 000000000..6922f2f5f
--- /dev/null
+++ b/pms/templates/cbv/meetings/filter.html
@@ -0,0 +1,139 @@
+{% load i18n %}
+<div class="oh-accordion">
+    <div class="oh-accordion-header">{% trans "Meeting" %}</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"
+                        for="{{filter_form.employee_id.id_for_label}}"
+                        >{% trans "Employee" %}
+                    </label>
+                    {{filter_form.employee_id}}
+                </div>
+                <div class="oh-input-group">
+                    <label
+                        class="oh-label"
+                        for="{{filter_form.manager.id_for_label}}"
+                        >{% trans "Manager" %}
+                    </label>
+                    {{filter_form.manager}}
+                </div>
+                <div class="oh-input-group">
+                    <label
+                        class="oh-label"
+                        for="{{filter_form.manager.id_for_label}}"
+                        >{% trans "Is active" %}
+                    </label>
+                    {{filter_form.is_active}}
+                </div>
+            </div>
+            <div class="col-sm-12 col-md-12 col-lg-6">
+                <div class="oh-input-group">
+                    <label
+                        class="oh-label"
+                        for="{{filter_form.date.id_for_label}}"
+                        >{% trans "Date" %}</label
+                    >
+                    {{filter_form.date}}
+                </div>
+                <div class="oh-input-group">
+                    <label
+                        class="oh-label"
+                        for="{{filter_form.question_template.id_for_label}}"
+                        >{% trans "Question Template" %}
+                    </label>
+                    {{filter_form.question_template}}
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<div class="oh-accordion">
+    <div class="oh-accordion-header">{% trans "Work Information" %}</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"
+                        for="{{filter_form.employee_id__employee_work_info__department_id.id_for_label}}"
+                        >{% trans "Department" %}</label
+                    >
+                    {{filter_form.employee_id__employee_work_info__department_id}}
+                </div>
+                <div class="oh-input-group">
+                    <label
+                        class="oh-label"
+                        for="{{filter_form.employee_id__employee_work_info__company_id.id_for_label}}"
+                        >{% trans "Company" %}</label
+                    >
+                    {{filter_form.employee_id__employee_work_info__company_id}}
+                </div>
+                <div class="oh-input-group">
+                    <label
+                        class="oh-label"
+                        for="{{filter_form.employee_id__employee_work_info__shift_id.id_for_label}}"
+                        >{% trans "Shift" %}</label
+                    >
+                    {{filter_form.employee_id__employee_work_info__shift_id}}
+                </div>
+            </div>
+
+            <div class="col-sm-12 col-md-12 col-lg-6">
+                <div class="oh-input-group">
+                    <label
+                        class="oh-label"
+                        for="{{filter_form.employee_id__employee_work_info__reporting_manager_id.id_for_label}}"
+                        >{% trans "Reporting Manager" %}</label
+                    >
+                    {{filter_form.employee_id__employee_work_info__reporting_manager_id}}
+                </div>
+                <div class="oh-input-group">
+                    <label
+                        class="oh-label"
+                        for="{{filter_form.employee_id__employee_work_info__job_position_id.id_for_label}}"
+                        >{% trans "Job Position" %}</label
+                    >
+                    {{filter_form.employee_id__employee_work_info__job_position_id}}
+                </div>
+                <div class="oh-input-group">
+                    <label
+                        class="oh-label"
+                        for="{{filter_form.employee_id__employee_work_info__work_type_id.id_for_label}}"
+                        >{% trans "Work Type" %}</label
+                    >
+                    {{filter_form.employee_id__employee_work_info__work_type_id}}
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<div class="oh-accordion">
+    <div class="oh-accordion-header">{% trans "Advanced" %}</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"
+                        for="{{filter_form.date_gte.id_for_label}}"
+                        >{% trans "Date greater than or equal" %}
+                    </label>
+                    {{filter_form.date_greater}}
+                </div>
+            </div>
+            <div class="col-sm-12 col-md-12 col-lg-6">
+                <div class="oh-input-group">
+                    <label
+                        class="oh-label"
+                        for="{{filter_form.date_lte.id_for_label}}"
+                        >{% trans "Date less than or equal" %}
+                    </label>
+                    {{filter_form.date_less}}
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/pms/templates/cbv/meetings/forms/meet_create.html b/pms/templates/cbv/meetings/forms/meet_create.html
new file mode 100644
index 000000000..695bf2f5a
--- /dev/null
+++ b/pms/templates/cbv/meetings/forms/meet_create.html
@@ -0,0 +1,22 @@
+<div id="formContainer">
+    {% include "generic/horilla_form.html" %}
+</div>
+
+<script>
+    $(document).ready(function () {
+		$("#id_employee_id").closest(".col-md-6").removeClass("col-md-6")
+        $("#id_employee_id").on("change", function () {
+            var employees = $(this).find("option:selected");
+            values = $("#id_answer_employees").val();
+            $("#id_answer_employees").empty();
+            employees.each(function () {
+                var value = $(this).val();
+                var text = $(this).text();
+                var option = `<option value="${value}"> ${text}</option>`;
+                $("#id_answer_employees").append(option);
+            });
+            $("#id_answer_employees").val(values).change();
+        });
+    });
+</script>
+
diff --git a/pms/templates/cbv/meetings/managers.html b/pms/templates/cbv/meetings/managers.html
new file mode 100644
index 000000000..ae27b7ed2
--- /dev/null
+++ b/pms/templates/cbv/meetings/managers.html
@@ -0,0 +1,34 @@
+{% load i18n %}
+<div >
+    {% for manager in instance.manager.all %}
+    <div id="meetingManagerContainer{{manager.id}}-{{instance.id}}">
+        <span class="oh-user-panel oh-collapse-panel" data-type="user" >
+            <div class="oh-profile oh-profile--md">
+                <div class="oh-profile__avatar mr-1">
+                    <img
+                    src="https://ui-avatars.com/api/?name={{manager.get_full_name}}&background=random"
+                    class="oh-profile__image"
+                    alt="Baby C."
+                    />
+                </div>
+                <span class="oh-profile__name oh-text--dark" title="{{manager.get_full_name}}"
+                >{{manager.get_full_name|truncatechars:15}}</span
+                >
+            </div>
+            {% if perms.pms.add_meetings %}
+            <button
+                hx-confirm="{% trans 'Are you sure to remove this manager?' %}"
+                hx-post="{% url 'meeting-manager-remove' instance.id manager.id %}"
+                title="{% trans "Remove" %}" hx-swap="outerHTML"
+                hx-target="#meetingManagerContainer{{manager.id}}-{{instance.id}}"
+                class="oh-user-panel__remove"
+                onclick="event.stopPropagation()"
+            >
+                <ion-icon name="close-outline"></ion-icon>
+        </button>
+            {% endif %}
+        </span>
+    </div>
+    {% endfor %}
+    <span class="count-span">{{instance.manager.all|length}} {% trans "Managers" %}</span>
+</div>
\ No newline at end of file
diff --git a/pms/templates/cbv/meetings/meetings.html b/pms/templates/cbv/meetings/meetings.html
new file mode 100644
index 000000000..f9a36f4d9
--- /dev/null
+++ b/pms/templates/cbv/meetings/meetings.html
@@ -0,0 +1,68 @@
+
+
+
+{% extends "index.html" %}
+{% load i18n %}{% load static %}
+
+
+{% block content %}
+<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+
+
+
+
+<meta name="csrf-token" content="{{ csrf_token }}">
+
+
+
+ <div hx-get="{% url "meetings-nav" %}" hx-trigger="load">
+</div>
+{% comment %} my_app/templates/my_app/generic/index.html {% endcomment %}
+
+
+
+{% include "generic/components.html" %}
+
+
+<div
+    class="oh-checkpoint-badge mb-2"
+    id="selectedInstances"
+    data-ids="[]"
+    data-clicked=""
+    style="display: none"
+  ></div>
+
+  {% comment %} is_active=True {% endcomment %}
+
+  <div 
+  class="oh-wrapper"  
+  id="listContainer">
+  <div class="animated-background">
+  </div>
+</div>
+
+
+
+<div class="oh-activity-sidebar" id="activitySidebar" style="z-index:1000;">
+  <div class="oh-activity-sidebar__body" id="answerContainer">
+  </div>
+</div>
+
+<script src="{% static 'cbv/shift_request/shift_request_bulk_actions.js' %}"></script>
+
+<script>
+  
+    $(document).on("htmx:afterSwap", function () {
+      $("[data-toggle-count]").off("click").on("click", function (e) { 
+        e.stopPropagation();
+        let recViewContainer = $(this).closest('tr');
+        span = recViewContainer.find(".count-span").toggle();
+        var row = $(this).closest("tr");
+        row.toggleClass("oh-permission-table--collapsed");
+      });
+    });
+  </script>
+
+
+{% endblock content %}
\ No newline at end of file
diff --git a/pms/templates/cbv/meetings/title.html b/pms/templates/cbv/meetings/title.html
new file mode 100644
index 000000000..3e74096f3
--- /dev/null
+++ b/pms/templates/cbv/meetings/title.html
@@ -0,0 +1,12 @@
+{% load i18n %}
+<div onclick="event.stopPropagation();">
+<div class="oh-sticky-table__tr  oh-permission-table--toggle "  data-toggle-count  onclick="event.stopPropagation();">
+    <div class="d-flex align-items-center">
+        <button class="oh-permission-table__collapse me-2" >
+            <span  title="{% trans "Reveal" %}"><ion-icon class="oh-permission-table__collapse-down" name="chevron-down-outline"></ion-icon></span>
+            <span  title="{% trans "Collapse" %}"><ion-icon class="oh-permission-table__collapse-up" name="chevron-up-outline"></ion-icon></span>
+        </button>
+        <span class="oh-permission-table__user">{{instance}} </span>
+    </div>
+</div>
+</div>
diff --git a/pms/templates/cbv/objectives/actions.html b/pms/templates/cbv/objectives/actions.html
new file mode 100644
index 000000000..2abfacc2f
--- /dev/null
+++ b/pms/templates/cbv/objectives/actions.html
@@ -0,0 +1,66 @@
+{% load i18n %}
+<style>
+    .oh-btn-group button {
+        border-right: 1px solid hsl(213, 22%, 93%);
+    }
+</style>
+{% if  perms.pms.add_employeeobjective or perms.pms.change_objective or perms.pms.delete_objective %}
+
+                                                          
+                                                                <div class="oh-btn-group" onclick="event.stopPropagation()">
+                                                                    {% if perms.pms.add_employeeobjective %}
+                                                                        <a
+                                                                            onclick="event.preventDefault();event.stopPropagation()"
+                                                                            hx-get="{% url 'add-assignees' instance.pk %}" hx-target='#genericModalBody' hx-swap='innerHTML' data-toggle='oh-modal-toggle' data-target='#genericModal'  class="oh-btn oh-btn--light-bkg w-100" title="Add assignees"
+                                                                        ><ion-icon name="add-outline"></ion-icon></a>
+                                                                    {% endif %}
+                                                                    {% if perms.pms.change_objective %}
+                                                                        <a
+                                                                            onclick="event.preventDefault();event.stopPropagation()"
+                                                                            data-toggle='oh-modal-toggle' data-target='#genericModal'
+                                                                            hx-get="{% url 'objective-update' instance.id %}" hx-target='#genericModalBody' 
+                                                                            class="oh-btn oh-btn--light-bkg w-100" title="{% trans 'Edit' %}"
+                                                                        ><ion-icon name="create-outline"></ion-icon></a>
+                                                                    {% endif %}
+                                                                    {% if perms.pms.delete_objective %}
+                                                                        {% if instance.archive %}
+                                                                                <form
+                                                                                    hx-post='{% url "objective-archive" instance.id %}'
+                                                                                    hx-confirm="{% trans "Do you want to unarchive this objective?" %}"
+                                                                                    hx-swap="innerHTML"
+                                                                                    hx-target="#tr{{ instance.id }}"
+                                                                                    style="display: contents;width:100%">
+                                                                                    {% csrf_token %}
+                                                                                    <button onclick="event.stopPropagation()" class="oh-btn oh-btn--light-bkg w-100" title="{% trans 'Unarchive' %}">
+                                                                                        <ion-icon name="archive"></ion-icon>
+                                                                                    </button>
+                                                                                </form>
+                                                                        {% else %}
+                                                                                <form
+                                                                                    hx-post='{% url "objective-archive" instance.id %}'
+                                                                                    hx-confirm="{% trans "Do you want to archive this objective?" %}"
+                                                                                    hx-swap="innerHTML"
+                                                                                    hx-target="#tr{{ instance.id }}"
+                                                                                    style="display: contents;width:100%">
+                                                                                    {% csrf_token %}
+                                                                                    <button onclick="event.stopPropagation()" class="oh-btn oh-btn--light-bkg w-100" title="{% trans 'Archive' %}">
+                                                                                        <ion-icon name="archive"></ion-icon>
+                                                                                    </button>
+                                                                                </form>
+                                                                        {% endif %}
+                                                                    {% endif %}
+                                                                    {% if perms.pms.delete_objective %}
+                                                                        <form hx-post='{% url "objective-delete" instance.id %}'
+                                                                            hx-confirm="{% trans 'Are you sure to delete this objective?' %}"
+                                                                            hx-swap="innerHTML"
+                                                                            hx-target="#tr{{ instance.id }}"
+                                                                            style="display: contents;width:100%">
+                                                                        {% csrf_token %}
+                                                                        <button class="oh-btn oh-btn--light-bkg oh-btn--danger-outline  w-100" title="{% trans 'Delete' %}">
+                                                                        <ion-icon name="trash-outline" role="img" class="md hydrated" aria-label="trash outline"></ion-icon>
+                                                                        </button>
+                                                                    </form>
+                                                                    {% endif %}
+                                                                </div>
+                                                       
+                                                            {% endif %}
\ No newline at end of file
diff --git a/pms/templates/cbv/objectives/assignees.html b/pms/templates/cbv/objectives/assignees.html
new file mode 100644
index 000000000..eaf4f0500
--- /dev/null
+++ b/pms/templates/cbv/objectives/assignees.html
@@ -0,0 +1,30 @@
+{% load i18n %}
+<div >
+    {% for emp_objective in instance.employee_objective.all %}
+        <div id="assigneesContainer{{emp_objective.id}}">
+            <span class="oh-user-panel oh-collapse-panel" data-type="user" >
+                <div class="oh-profile oh-profile--md">
+                    <div class="oh-profile__avatar mr-1">
+                        <img
+                        src="https://ui-avatars.com/api/?name={{emp_objective.employee_id.get_full_name}}&background=random"
+                        class="oh-profile__image"
+                        alt="Baby C."
+                        />
+                    </div>
+                    <span class="oh-profile__name oh-text--dark" title="{{emp_objective.employee_id}}"
+                    >{{emp_objective.employee_id|truncatechars:15}}</span
+                    >
+                </div>
+                <a
+                    hx-confirm="{% trans 'Are you sure want to remove this assignee?' %}"
+                    hx-post="{% url 'assignees-remove' instance.id emp_objective.employee_id.id %}"
+                    title="{% trans "Remove" %}" hx-swap="innerHTML" hx-target="#assigneesContainer{{emp_objective.id}}"
+                    onclick="event.stopPropagation()" class="oh-user-panel__remove"
+                >
+                    <ion-icon name="close-outline"></ion-icon>
+                </a>
+            </span>
+        </div>
+    {% endfor %}
+    <span class="count-span">{{ instance.employee_objective.all|length}} {% trans "Assignees" %}</span>
+</div>
\ No newline at end of file
diff --git a/pms/templates/cbv/objectives/emp_obj_actions.html b/pms/templates/cbv/objectives/emp_obj_actions.html
new file mode 100644
index 000000000..7adb0ccfa
--- /dev/null
+++ b/pms/templates/cbv/objectives/emp_obj_actions.html
@@ -0,0 +1,56 @@
+{% load i18n%}
+<div class="oh-btn-group w-100">
+    {% if perms.pms.change_employeeobjective or instance|is_manager:request.user %}
+        <a class="oh-btn oh-btn--info" hx-get='{% url "update-employee-objective" instance.id %}' hx-target="#genericModalBody" data-toggle="oh-modal-toggle" data-target="#genericModalBody" style="width: 50%;">
+            <ion-icon name="create-outline">
+            </ion-icon>{% trans "Edit" %}
+        </a>
+    {% endif %}
+    {% if perms.pms.delete_employeeobjective or instance|is_manager:request.user %}
+
+        {% if instance.archive %}
+            <form  class="oh-btn oh-btn--primary" onsubmit="return confirm('Do you want to Unarchive this Employee objective?')"  action='{% url "archive-employee-objective" instance.id %}'>
+                <input type="hidden" name="archive" value="False" id="">
+                <input type="hidden" name="single_view" value="True">
+                <button style="background: none;
+                    color: inherit;
+                    border: none;
+                    padding: 0;
+                    font: inherit;
+                    cursor: pointer;
+                    outline: inherit;">
+                    <ion-icon name="archive-outline"></ion-icon>
+                    {% trans "Unarchive" %}
+                </button>
+            </form>
+        {% else %}
+            <form  class="oh-btn oh-btn--primary" style="width: 50%;" onsubmit="return confirm('Do you want to archive this Employee objective?')"  action='{% url "archive-employee-objective" instance.id %}'>
+                <input type="hidden" name="archive" value="False" id="">
+                <input type="hidden" name="single_view" value="True">
+                <button style="background: none;
+                    color: inherit;
+                    border: none;
+                    padding: 0;
+                    font: inherit;
+                    cursor: pointer;
+                    outline: inherit;">
+                    <ion-icon name="archive-outline"></ion-icon>
+                    {% trans "Archive" %}
+                </button>
+            </form>
+        {% endif %}
+        <form  class="oh-btn oh-btn--secondary" method="post" style="width: 50%;" onsubmit="return confirm('Do you Want to delete this employee objective?')"  action='{% url "delete-employee-objective" instance.id %}'>
+            {% csrf_token %}
+            <button style="background: none;
+                color: inherit;
+                border: none;
+                padding: 0;
+                font: inherit;
+                cursor: pointer;
+                outline: inherit;">
+                <ion-icon name="trash-outline">
+                </ion-icon>{% trans "Delete" %}
+            </button>
+        </form>
+    {% endif %}
+</div>
\ No newline at end of file
diff --git a/pms/templates/cbv/objectives/employee_objective_status.html b/pms/templates/cbv/objectives/employee_objective_status.html
new file mode 100644
index 000000000..9532d558a
--- /dev/null
+++ b/pms/templates/cbv/objectives/employee_objective_status.html
@@ -0,0 +1,13 @@
+{% if perms.pms.change_employeeobjective or instance|is_manager_or_owner:request.user %}
+
+                    <select name="status" id="{{instance.id}}" class="oh-select"
+                    onchange="changeObjectiveStatus(this)" data-empObj = {{instance.id}}
+                    >
+                        {% for status in objective_key_result_status %}
+                        <option value="{{status.0}}"  {% if status.0 == instance.status %} selected {% endif %}>
+                            <span class="oh-dot oh-dot--small oh-dot--warning">{{status.1}}</span></option>
+                        {% endfor %}
+                    </select>
+                {% else %}
+                    <span class="oh-timeoff-modal__stat-count">{{instance.get_status_display}}</span>
+                {% endif %}
\ No newline at end of file
diff --git a/pms/templates/cbv/objectives/extended_objectives.html b/pms/templates/cbv/objectives/extended_objectives.html
new file mode 100644
index 000000000..ba6d36c51
--- /dev/null
+++ b/pms/templates/cbv/objectives/extended_objectives.html
@@ -0,0 +1,16 @@
+
+<div>
+    {% include "generic/horilla_tabs.html" %}
+</div>
+
+<script>
+    $(document).on("htmx:afterSettle", function () {
+      $("[data-toggle-count]").off("click").on("click", function (e) { 
+        e.stopPropagation();
+        let recViewContainer = $(this).closest('tr');
+        span = recViewContainer.find(".count-span").toggle();
+        var row = $(this).closest("tr");
+        row.toggleClass("oh-permission-table--collapsed");
+      });
+    });
+  </script> 
\ No newline at end of file
diff --git a/pms/templates/cbv/objectives/filter.html b/pms/templates/cbv/objectives/filter.html
new file mode 100644
index 000000000..2a880d594
--- /dev/null
+++ b/pms/templates/cbv/objectives/filter.html
@@ -0,0 +1,40 @@
+{% load i18n %}
+<div class="oh-dropdown__filter-body">
+    <div class="oh-accordion">
+        <div class="oh-accordion-header">{% trans "Objective" %}</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" for=""
+                            >{% trans "Managers" %}</label
+                        >
+                        {{form.managers}}
+                    </div>
+                    <div class="oh-input-group">
+                        <label class="oh-label" for="">{% trans "Key Result" %}</label>
+                        {{form.employee_objective__key_result_id}}
+                    </div>
+                </div>
+                <div class="col-sm-12 col-md-12 col-lg-6">
+                    <div class="oh-input-group">
+                        <label class="oh-label" for="">{% trans "Assignees" %}</label>
+                        {{form.assignees}}
+                    </div>
+                    <div class="oh-input-group">
+                        <label class="oh-label" for="">{% trans "Duration" %} </label>
+                        {{form.duration}}
+                    </div>
+                </div>
+                <div class="col-sm-12 col-md-12 col-lg-6">
+                    <div class="oh-input-group">
+                        <label class="oh-label" for=""
+                            >{% trans "Is Archived" %}</label
+                        >
+                        {{form.archive}}
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/pms/templates/cbv/objectives/form.html b/pms/templates/cbv/objectives/form.html
new file mode 100644
index 000000000..5a2772e02
--- /dev/null
+++ b/pms/templates/cbv/objectives/form.html
@@ -0,0 +1,26 @@
+<div>
+    {% include "generic/horilla_form.html" %}
+</div>
+<script>
+$(document).ready(function(){
+    $('[id="id_start_date"]').parent().parent().hide();
+    $('#id_assignees').closest('div.col-12').hide();
+    addAssignees()
+  })
+  $('#id_add_assignees').change(function(){
+    addAssignees()
+  })
+  
+  function addAssignees(){
+    if ($('#id_add_assignees').is(":checked")){
+      $('[id="id_start_date"]').parent().parent().show();
+      $('#id_assignees').closest('div.col-12').show();
+  
+    }
+    else{ 
+      $('[id="id_start_date"]').parent().parent().hide();
+      $('#id_assignees').closest('div.col-12').hide();
+  
+    }
+  }
+</script>
\ No newline at end of file
diff --git a/pms/templates/cbv/objectives/key_results.html b/pms/templates/cbv/objectives/key_results.html
new file mode 100644
index 000000000..5cea3974f
--- /dev/null
+++ b/pms/templates/cbv/objectives/key_results.html
@@ -0,0 +1,36 @@
+{% load i18n %}
+<div >
+   
+    {% for kr in instance.key_result_id.all %}
+    <div id="keyResultContainer{{kr.id}}">
+        <span class="oh-user-panel oh-collapse-panel" data-type="user" >
+            <div class="oh-profile oh-profile--md">
+                <div class="oh-profile__avatar mr-1">
+                    <img
+                    src="https://ui-avatars.com/api/?name={{kr.key_result_id}}&background=random"
+                    class="oh-profile__image"
+                    alt="Baby C."
+                    />
+                </div>
+                <span class="oh-profile__name oh-text--dark" title="{{kr.key_result_id}}"
+                >{{kr|truncatechars:15}}</span
+                >
+            </div>
+            {% if "perms.pms.delete_keyresult" %}
+            <a
+                hx-confirm="{% trans 'Are you sure want to remove this key result?' %}"
+                hx-post="{% url 'key-result-remove' instance.id kr.id %}"
+                title="{% trans "Remove" %}" hx-swap="outerHTML"
+                hx-target="#keyResultContainer{{kr.id}}"
+                class="oh-user-panel__remove"
+                onclick="event.stopPropagation()"
+            >
+                <ion-icon name="close-outline"></ion-icon>
+            </a>
+            {% endif %}
+        </span>
+    </div>
+    {% endfor %}
+    <span class="count-span">{{instance.key_result_id.all|length}} {% trans "Key results" %}</span>
+
+</div>
\ No newline at end of file
diff --git a/pms/templates/cbv/objectives/manager.html b/pms/templates/cbv/objectives/manager.html
new file mode 100644
index 000000000..2b4fd65bd
--- /dev/null
+++ b/pms/templates/cbv/objectives/manager.html
@@ -0,0 +1,33 @@
+{% load i18n %}
+<div>
+    {% for manager in instance.managers.all %}
+    <div id="managerContainer{{manager.id}}">
+        <span class="oh-user-panel oh-collapse-panel" data-type="user" >
+            <div class="oh-profile oh-profile--md">
+                <div class="oh-profile__avatar mr-1">
+                    <img
+                    src="https://ui-avatars.com/api/?name={{manager.get_full_name}}&background=random"
+                    class="oh-profile__image"
+                    alt="Baby C."
+                    />
+                </div>
+                <span class="oh-profile__name oh-text--dark" title="{{manager}}"
+                >{{manager.employee_first_name|truncatechars:15}}</span>
+            </div>
+            {% if perms.pms.change_objective %}
+            <a
+                hx-confirm="{% trans 'Are you sure want to remove this manager?' %}"
+                hx-post="{% url 'objective-manager-remove' instance.id manager.id %}"
+                title="{% trans "Remove" %}" hx-swap="outerHTML"
+                hx-target="#managerContainer{{manager.id}}" class="oh-user-panel__remove"
+                onclick="event.stopPropagation()"
+            >
+                <ion-icon name="close-outline"></ion-icon>
+            </a>
+            {% endif %}
+        </span>
+    </div>
+    {% endfor %}
+    <span class="count-span">{{instance.managers.all|length}} {% trans "Managers" %}</span>
+
+</div>
\ No newline at end of file
diff --git a/pms/templates/cbv/objectives/objectives.html b/pms/templates/cbv/objectives/objectives.html
new file mode 100644
index 000000000..ed67fdd48
--- /dev/null
+++ b/pms/templates/cbv/objectives/objectives.html
@@ -0,0 +1,117 @@
+
+
+
+{% extends "index.html" %}
+{% load i18n %}{% load static %}
+
+
+{% block content %}
+
+<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+
+
+
+
+<meta name="csrf-token" content="{{ csrf_token }}">
+
+
+
+<style>
+.validated--dot{
+  background-color:yellowgreen;
+}
+.not-validated--dot{
+  background-color:red;
+}
+.requested--dot{
+  background-color:orange;
+}
+.approved-request--dot{
+  background-color:blue;
+}
+.validated-True{
+  border-left: 3.4px solid yellowgreen !important;
+  border-radius: 4px 0 0 4px;
+
+}
+.validated-False {
+
+  border-left: 3.4px solid red !important;
+  border-radius: 4px 0 0 4px;
+
+
+}
+.requested-True {
+
+  border-left: 3.4px solid orange !important;
+  border-radius: 4px 0 0 4px;
+
+}
+.approved-request-True {
+
+  border-left: 3.4px solid blue !important;
+  border-radius: 4px 0 0 4px;
+
+}
+
+
+
+
+
+</style>
+
+ <div hx-get="{% url "nav-objectives-view" %}" hx-trigger="load">
+</div>   
+{% comment %} my_app/templates/my_app/generic/index.html {% endcomment %}
+
+
+
+{% include "generic/components.html" %}
+
+
+<div
+    class="oh-checkpoint-badge mb-2"
+    id="selectedInstances"
+    data-ids="[]"
+    data-clicked=""
+    style="display: none"
+  ></div>
+  <div
+    class="oh-checkpoint-badge mb-2"
+    id="selectedInastacesAll"
+    data-ids="[]"
+    data-clicked=""
+    style="display: none"
+  ></div>
+
+ 
+  <div 
+  class="oh-wrapper" 
+  id="listContainer">
+  <div class="animated-background">
+  </div>
+</div>
+
+
+
+<div class="oh-activity-sidebar" id="activitySidebar" style="z-index: 1000">
+    <div class="oh-activity-sidebar__body" id="commentContainer"></div>
+  </div>
+
+
+
+
+ 
+<script>
+  $(document).on("htmx:afterSettle", function () {
+    $("[data-toggle-count]").off("click").on("click", function (e) { 
+      e.stopPropagation();
+      let recViewContainer = $(this).closest('.oh-sticky-table__tr');
+      span = recViewContainer.find(".count-span").toggle();
+      var row = $(this).closest(".oh-sticky-table__tr");
+      row.toggleClass("oh-permission-table--collapsed");
+    });
+  });
+</script> 
+{% endblock content %}
\ No newline at end of file
diff --git a/pms/templates/cbv/objectives/self_key_results.html b/pms/templates/cbv/objectives/self_key_results.html
new file mode 100644
index 000000000..ab914d1aa
--- /dev/null
+++ b/pms/templates/cbv/objectives/self_key_results.html
@@ -0,0 +1,36 @@
+{% load i18n %}
+<div >
+   
+    {% for kr in instance.get_employee_objective.key_result_id.all %}
+    <div id="keyResultContainer{{kr.id}}">
+        <span class="oh-user-panel oh-collapse-panel" data-type="user" >
+            <div class="oh-profile oh-profile--md">
+                <div class="oh-profile__avatar mr-1">
+                    <img
+                    src="https://ui-avatars.com/api/?name={{kr.key_result_id}}&background=random"
+                    class="oh-profile__image"
+                    alt="Baby C."
+                    />
+                </div>
+                <span class="oh-profile__name oh-text--dark" title="{{kr.key_result_id}}"
+                >{{kr|truncatechars:15}}</span
+                >
+            </div>
+            {% if "perms.pms.delete_keyresult" %}
+            <a
+                hx-confirm="{% trans 'Are you sure want to remove this key result?' %}"
+                hx-post="{% url 'key-result-remove' instance.id kr.id %}"
+                title="{% trans "Remove" %}" hx-swap="outerHTML"
+                hx-target="#keyResultContainer{{kr.id}}"
+                class="oh-user-panel__remove"
+                onclick="event.stopPropagation()"
+            >
+                <ion-icon name="close-outline"></ion-icon>
+            </a>
+            {% endif %}
+        </span>
+    </div>
+    {% endfor %}
+    <span class="count-span">{{instance.get_employee_objective.key_result_id.all|length}} {% trans "Key results" %}</span>
+
+</div>
\ No newline at end of file
diff --git a/pms/templates/cbv/objectives/self_objective_action.html b/pms/templates/cbv/objectives/self_objective_action.html
new file mode 100644
index 000000000..22380d32f
--- /dev/null
+++ b/pms/templates/cbv/objectives/self_objective_action.html
@@ -0,0 +1,52 @@
+{% load i18n %}
+{% if perms.pms.change_objective or perms.pms.delete_objective %}
+<div>
+    <div class="oh-btn-group" onclick="event.stopPropagation()">
+        {% if perms.pms.change_objective %}
+            <a
+                onclick="event.preventDefault();event.stopPropagation()"
+                hx-get="{% url 'update-employee-objective' instance.get_employee_objective.id %}" hx-target='#genericModalBody' hx-swap='innerHTML' data-toggle='oh-modal-toggle' data-target='#genericModal'  class="oh-btn oh-btn--light-bkg w-100" title="Edit"
+            ><ion-icon name="create-outline"></ion-icon></a>
+        {% endif %}
+        {% if perms.pms.delete_objective %}
+            {% if instance.get_employee_objective.archive %}
+                    <form
+                        hx-post='{% url "archive-employee-objective" instance.get_employee_objective.id %}?detail_view=True'
+                        hx-confirm="{% trans "Do you want to unarchive this employee objective?" %}"
+                        hx-swap="innerHTML"
+                        hx-target="#tr{{ instance.id }}"
+                        style="display: contents;width:100%">
+                        {% csrf_token %}
+                        <button onclick="event.stopPropagation()" class="oh-btn oh-btn--light-bkg w-100" title="{% trans 'Unarchive' %}">
+                            <ion-icon name="archive"></ion-icon>
+                        </button>
+                    </form>
+            {% else %}
+                    <form
+                        hx-post='{% url "archive-employee-objective" instance.get_employee_objective.id %}?detail_view=True'
+                        hx-confirm="{% trans "Do you want to archive this employee objective?" %}"
+                        hx-swap="innerHTML"
+                        hx-target="#tr{{ instance.id }}"
+                        style="display: contents;width:100%">
+                        {% csrf_token %}
+                        <button onclick="event.stopPropagation()" class="oh-btn oh-btn--light-bkg w-100" title="{% trans 'Archive' %}">
+                            <ion-icon name="archive"></ion-icon>
+                        </button>
+                    </form>
+            {% endif %}
+        {% endif %}
+        {% if perms.pms.delete_objective %}
+        <form hx-post='{% url "objective-delete" instance.id %}'
+        hx-confirm="{% trans 'Are you sure to delete this objective?' %}"
+        hx-swap="innerHTML"
+        hx-target="#tr{{ instance.id }}"
+        style="display: contents;width:100%">
+    {% csrf_token %}
+    <button class="oh-btn oh-btn--light-bkg oh-btn--danger-outline  w-100" title="{% trans 'Delete' %}">
+    <ion-icon name="trash-outline" role="img" class="md hydrated" aria-label="trash outline"></ion-icon>
+    </button>
+</form>
+        {% endif %}
+    </div>
+</div>
+{% endif %}
\ No newline at end of file
diff --git a/pms/templates/cbv/objectives/title.html b/pms/templates/cbv/objectives/title.html
new file mode 100644
index 000000000..6e6e887d3
--- /dev/null
+++ b/pms/templates/cbv/objectives/title.html
@@ -0,0 +1,17 @@
+{% load i18n %}
+
+
+
+  <div class="oh-sticky-table__tr oh-permission-table--toggle" data-toggle-count onclick="event.stopPropagation();">
+    <div class="d-flex align-items-center">
+        <button class="oh-permission-table__collapse me-2">
+            <span  title="{% trans "Reveal" %}"><ion-icon class="oh-permission-table__collapse-down" name="chevron-down-outline"></ion-icon></span>
+            <span  title="{% trans "Collapse" %}"><ion-icon class="oh-permission-table__collapse-up" name="chevron-up-outline"></ion-icon></span>
+        </button>
+            <span class="oh-permission-table__user">{{instance.title}}</span>
+    </div>
+  </div>
+
+
+
+
diff --git a/pms/templates/cbv/period/actions.html b/pms/templates/cbv/period/actions.html
new file mode 100644
index 000000000..d9902e8a7
--- /dev/null
+++ b/pms/templates/cbv/period/actions.html
@@ -0,0 +1,40 @@
+{% load i18n %}{% load basefilters %}
+{% if perms.pms.change_period or perms.pms.delete_period or request.user|filtersubordinates %}
+        <div>
+          <div  onclick="event.stopPropagation();" class="oh-btn-group">
+            {% if perms.pms.change_period or request.user|filtersubordinates %}
+            <a
+              data-toggle="oh-modal-toggle"
+              data-target="#genericModal"
+              class="oh-btn oh-btn--light-bkg w-100"
+              title="{% trans 'Update' %}"
+              hx-get="{% url 'period-update' pk=instance.id%}?instance_ids={{instance.ordered_ids}}"
+              hx-target="#genericModalBody"
+            >
+              <ion-icon
+                name="create-outline"
+                role="img"
+                class="md hydrated"
+                aria-label="create outline"
+              ></ion-icon
+            ></a>
+            {% endif %} {% if perms.pms.delete_period or request.user|filtersubordinates %}
+            <a
+              class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100"
+              hx-confirm="{% trans 'Do you want to delete this period ?' %}"
+              hx-get="{% url 'period-delete' period_id=instance.id %}"
+              hx-target="#periodListTable"
+              title="{% trans 'Delete' %}"
+            >
+              <ion-icon
+                name="trash-outline"
+                role="img"
+                class="md hydrated"
+                aria-label="trash outline"
+              ></ion-icon>
+            </a>
+            
+          </div>
+        </div>
+        {% endif %}
+        {% endif %}
\ No newline at end of file
diff --git a/pms/templates/cbv/period/detail_view_actions.html b/pms/templates/cbv/period/detail_view_actions.html
new file mode 100644
index 000000000..41fb55689
--- /dev/null
+++ b/pms/templates/cbv/period/detail_view_actions.html
@@ -0,0 +1,25 @@
+{% load basefilters %}
+{% load i18n %}
+{% if perms.pms.change_period or request.user|filtersubordinates %}
+    <a hx-get="{% url 'period-update' instance.id %}" 
+    hx-target='#genericModalBody' 
+    data-toggle="oh-modal-toggle"
+    data-target='#genericModal' 
+    class="oh-btn oh-btn--info w-50" title="{% trans 'Edit' %}">
+    <ion-icon name="create-outline"></ion-icon>
+</a>
+{% endif %}
+{% if perms.pms.delete_period or request.user|filtersubordinates %}
+<form
+hx-post="{% url 'period-delete' instance.id %}"
+hx-target = "#listContainer"
+hx-confirm="{% trans "Do you want to delete this period ?" %}"
+method="post"
+style="display: contents;width:100%">
+{% csrf_token %}
+<button onclick="event.stopPropagation()" type="submit" class="oh-btn oh-btn--secondary w-50" title="{% trans 'Delete' %}">
+<ion-icon name="trash-outline" role="img" class="md hydrated" aria-label="trash outline"></ion-icon>
+</button> 
+   
+{% endif %}
+
diff --git a/pms/templates/cbv/period/period.html b/pms/templates/cbv/period/period.html
new file mode 100644
index 000000000..6641065d5
--- /dev/null
+++ b/pms/templates/cbv/period/period.html
@@ -0,0 +1,43 @@
+{% extends "index.html" %}
+{% load i18n %}{% load static %}
+
+
+{% block content %}
+<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+
+
+
+
+<meta name="csrf-token" content="{{ csrf_token }}">
+
+
+
+ <div hx-get="{% url "nav-period" %}" hx-trigger="load">
+</div>
+
+
+{% include "generic/components.html" %}
+
+
+<div
+    class="oh-checkpoint-badge mb-2"
+    id="selectedInstances"
+    data-ids="[]"
+    data-clicked=""
+    style="display: none"
+  ></div>
+
+  
+  <div 
+  class="oh-wrapper" 
+  id="listContainer">
+  <div class="animated-background">
+  </div>
+</div>
+
+
+
+
+    
+{% endblock %}
\ No newline at end of file
diff --git a/pms/templates/cbv/question_template/actions.html b/pms/templates/cbv/question_template/actions.html
new file mode 100644
index 000000000..61e698662
--- /dev/null
+++ b/pms/templates/cbv/question_template/actions.html
@@ -0,0 +1,46 @@
+{% load i18n %}
+{% load basefilters %}
+<style>
+    .oh-btn--danger-outline {
+        background-color: hsl(0, 0%, 97.5%) !important;
+    }
+</style>
+{% if perms.pms.change_questiontemplate or perms.pms.delete_questiontemplate or request.user|filtersubordinates %}
+        <div >
+          <div class="oh-btn-group"  onclick="event.stopPropagation()">
+            {% if perms.pms.change_questiontemplate or request.user|filtersubordinates %}
+            <a
+              class="oh-btn oh-btn--light-bkg w-100"
+              data-toggle="oh-modal-toggle"
+              data-target="#genericModal"
+              hx-get="{% url 'question-template-update'  pk=instance.id %}?instance_ids={{instance.ordered_ids}}"
+              title="{% trans 'Update' %}"
+              hx-target="#genericModalBody"
+            >
+              <ion-icon
+                name="create-outline"
+                role="img"
+                class="md hydrated"
+                aria-label="create outline"
+              ></ion-icon
+            ></a>
+            {% endif %}
+             {% if perms.pms.delete_questiontemplate or request.user|filtersubordinates %}
+            <a
+              class="oh-btn oh-btn--danger-outline w-100"
+              title="{% trans 'Delete' %}"
+              hx-confirm="{% trans 'Do you want to delete this question template?' %}"
+              hx-get="{% url 'question-template-delete' template_id=instance.id %}"
+              hx-target="#questionTemplateList"
+            >
+              <ion-icon
+                name="trash-outline"
+                role="img"
+                class="md hydrated"
+                aria-label="trash outline"
+              ></ion-icon>
+            </a>
+            {% endif %}
+          </div>
+        </div>
+        {% endif %}
diff --git a/pms/templates/cbv/question_template/main.html b/pms/templates/cbv/question_template/main.html
new file mode 100644
index 000000000..91eac89fb
--- /dev/null
+++ b/pms/templates/cbv/question_template/main.html
@@ -0,0 +1,4 @@
+
+<div id="questionTemplateList">
+    {% include "generic/horilla_list.html" %}
+</div>
\ No newline at end of file
diff --git a/pms/templates/cbv/question_template/question_template.html b/pms/templates/cbv/question_template/question_template.html
new file mode 100644
index 000000000..fa612903c
--- /dev/null
+++ b/pms/templates/cbv/question_template/question_template.html
@@ -0,0 +1,68 @@
+{% extends "index.html" %}
+{% load i18n %}{% load static %}
+
+
+{% block content %}
+<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+
+
+
+
+<meta name="csrf-token" content="{{ csrf_token }}">
+
+
+
+ <div hx-get="{% url "nav-question-template" %}" hx-trigger="load">
+</div>
+
+
+{% include "generic/components.html" %}
+
+
+<div
+    class="oh-checkpoint-badge mb-2"
+    id="selectedInstances"
+    data-ids="[]"
+    data-clicked=""
+    style="display: none"
+  ></div>
+
+  
+  <div 
+  class="oh-wrapper" 
+  id="listContainer">
+  <div class="animated-background">
+  </div>
+</div>
+
+
+
+
+    <script>
+      var errorElement = $('#id_question_template_error')
+      $(errorElement).hide()
+    
+      $('form').on('submit', function (event) {
+        event.preventDefault();
+    
+        var fieldValue = $('#id_question_template').val();
+    
+        if (fieldValue.trim() === '') {
+          $(errorElement).show()
+          errorElement.text('This field is required.');
+          errorElement.insertAfter($('#id_question_template'));
+        } else if (fieldValue.length > 100) {
+          $(errorElement).show()
+          errorElement.text('The field cannot contain more than 100 characters.');
+          errorElement.insertAfter($('#id_question_template'));
+        } else {
+          errorElement.text('');
+          errorElement.remove();
+          // Submit the form
+          this.submit();
+        }
+      });
+    
+    </script>
+{% endblock %}
\ No newline at end of file
diff --git a/pms/templates/dashboard/pms_dashboard.html b/pms/templates/dashboard/pms_dashboard.html
index 9070aa4ef..124218001 100644
--- a/pms/templates/dashboard/pms_dashboard.html
+++ b/pms/templates/dashboard/pms_dashboard.html
@@ -11,10 +11,28 @@
 <!-- End of Navigation -->
 <main :class="sidebarOpen ? 'oh-main__sidebar-visible' : ''">
     <div class="oh-wrapper">
-        <div class="d-none mt-5">
-
+        <div class="d-none mt-5" id="back_button" style="width: 10%">
+            <a href="{% url 'dashboard-view' %}" class="oh-btn oh-btn--secondary oh-btn--shadow ms-3">
+                <ion-icon class="me-2 md hydrated" name="arrow-back-outline" role="img"
+                    aria-label="arrow-back-outline"></ion-icon>{% trans "Back" %}</a>
         </div>
+
+        <br>
+        <br>
+
+        <div id="employeeKeyRes" class="d-none oh-main__titlebar oh-main__titlebar--left">
+            <h1 class="oh-main__titlebar-title fw-bold">
+                Employee Key Results
+            </h1>
+        </div>
+
         <div class="oh-dashboard row" id="dashboard">
+            <form hidden hx-get="{% url 'key-result-view' %}" hx-target="#dashboard" hx-swap="innerHTML" id="dashboardKeyresult">
+                <input type="text" name="status">
+                <input type="text" name="archive" value="false">
+                <input type="text" name="field" value="employee_objective_id__employee_id">
+                <button type="submit"></button>
+            </form>
             <div class="oh-dashboard__left col-12 col-sm-12 col-md-12 col-lg-9">
                 <div class="oh-dashboard__cards row">
                     <div class="col-12 col-sm-12 col-md-6 col-lg-4">
@@ -141,7 +159,12 @@
                         <span class="oh-card-dashboard__title"> {% trans "Objectives At-Risk" %}</span>
                     </div>
                     <div class="oh-card-dashboard__body">
-                        {% if okr_at_risk %}
+                        <div class="oh-wrapper" hx-get="{% url "dashboard-risk-objectives" %}"
+                                        hx-trigger="load" id="dashboard_objectives">
+                                        <div class="animated-background">
+                                        </div>
+                                        </div>
+                        {% comment %} {% if okr_at_risk %}
                             <ul class="oh-card-dashboard__user-list">
                             {% for okr in okr_at_risk %}
                                 <li class="oh-card-dashboard__user-item">
@@ -166,7 +189,7 @@
                             </ul>
                         {% else %}
                             <h6 style="font-size:16px; text-align:left;" class="oh-404__subtitle" >{% trans "No OKRs are currently At-Risk." %}</h6>
-                        {% endif %}
+                        {% endif %} {% endcomment %}
                     </div>
                 </div>
             </div>
diff --git a/pms/templates/feedback/feedback_creation.html b/pms/templates/feedback/feedback_creation.html
index e09e8f2fa..3b721a242 100644
--- a/pms/templates/feedback/feedback_creation.html
+++ b/pms/templates/feedback/feedback_creation.html
@@ -16,13 +16,11 @@
 <div class="oh-wrapper" id="message"></div>
 <!-- Feedback form'-->
 <main class="oh-onboarding">
-    <div class="oh-onboarding-card oh-profile-section" style="max-width: 868px">
-        <form
-            action="{%url 'feedback-creation' %}"
-            id="feedbackCreationForm"
-            method="post"
-        >
-            {% csrf_token %} {{feedback_form.non_field_errors}}
+    <div class="oh-onboarding-card oh-profile-section" style="max-width: 868px;">
+        {{feedback_form.non_field_errors}}
+        <form action="{%url 'feedback-creation' %}" id="feedbackCreationForm" method="post">
+            {{feedback_form.non_field_errors}}
+            {% csrf_token %}
             <div class="oh-onboarding-card__address-group">
                 <h2 class="oh-onboarding-card__section-title">
                     {{feedback_form.verbose_name}}
diff --git a/pms/templates/feedback/feedback_detailed_view.html b/pms/templates/feedback/feedback_detailed_view.html
index 50d858e98..396b30967 100644
--- a/pms/templates/feedback/feedback_detailed_view.html
+++ b/pms/templates/feedback/feedback_detailed_view.html
@@ -1,5 +1,6 @@
 {% extends 'index.html' %}
 {% block content %}
+{% include 'generic/components.html' %}
 {% load static i18n %}
 {% load i18n %}
 {% load basefilters %}
@@ -121,7 +122,7 @@
                           data-toggle="oh-modal-toggle"
                           class="oh-btn oh-btn--light-bkg w-100"
                           data-target="#feedbackModalPopup"
-                          hx-get="{% url 'feedback-update' id=feedback.id %}"
+                          hx-get="{% url 'feedback-update' feedback.id %}"
                           hx-target="#feedbackModalTarget"
                           title = {% trans "Edit" %}>
                           <ion-icon name="create-outline" class="me-1" ></ion-icon>
@@ -301,6 +302,7 @@
           <div class="row">
             <div class="col-12 col-sm-12 col-md-12 col-lg-12">
               <div class="m-2">
+                {% if feedback.manager_id %}
                 <div class="oh-card__body">
                   <div class="oh-sticky-table">
                     <div class="oh-sticky-table__table">
@@ -359,6 +361,8 @@
                     </div>
                   </div>
                 </div>
+                {% endif %}
+              </div>
               </div>
             </div>
           </div>
@@ -517,17 +521,16 @@
           <!-- end of other employees section -->
         </div>
         </div>
-
-      </div>
       <div class="oh-tabs__content" id="feedback-overview">
         <div id="feedback_overview_div">
-          <button hx-get="{% url 'get-feedback-overview' feedback.id %}"
-              hx-target="#feedback-overview" id="feedback-overview-button" hidden>
-          </button>
-      </div>
+        </div>
       </div>
     </div>
 </div>
+<button
+  hx-get="{% url 'get-feedback-overview' feedback.id %}"
+  hx-target="#feedback-overview" id="feedback-overview-button" hidden>
+</button>
 </main>
 
   <!-- answer off canvas -->
@@ -552,12 +555,6 @@
   <!-- update modal  -->
   <div class="oh-modal" id="feedbackModalPopup" role="dialog" aria-labelledby="" aria-hidden="true">
     <div class="oh-modal__dialog" style="max-width:885px;" id="">
-      <div class="oh-modal__dialog-header">
-        <span class="oh-modal__dialog-title" id="addEmployeeObjectiveModalLabel">{% trans "Update Feedback" %}</span>
-        <button type="button" class="oh-modal__close reloadButton" aria-label="Close">
-            <ion-icon name="close-outline"></ion-icon>
-        </button>
-      </div>
       <div class="oh-modal__dialog-body" id="feedbackModalTarget">
       </div>
     </div>
@@ -578,7 +575,15 @@
   });
 
   function get_collegues(element) {
-      var employee_id = $(element).val();
+
+        if (typeof element === 'object')
+        {
+            var employee_id = $(element).val();
+        }
+        else {
+          var employee_id = element
+        }
+
 
       // Check if the employee_id is valid
       if (employee_id) {
diff --git a/pms/templates/feedback/feedback_list.html b/pms/templates/feedback/feedback_list.html
index 5095fe1fc..bf6102bf2 100644
--- a/pms/templates/feedback/feedback_list.html
+++ b/pms/templates/feedback/feedback_list.html
@@ -142,7 +142,7 @@
             </div>
             <div class="oh-sticky-table__td">
               {{feedback.end_date}}
-              <span title = 'due {% if feedback.end_date == current_date %} {{current_date}} {% else %}in {{feedback.end_date|sub:current_date}}{% endif %}'>
+              <span title = 'due  {% if feedback.end_date == current_date %} current_date {% else %}in {{feedback.end_date|sub:current_date}}{% endif %}'>
                   <ion-icon
                       class="text-{% if feedback.end_date < current_date %}danger {% elif feedback.end_date == current_date %}warning {% else %}success{% endif %}"
                       name="time-sharp"
@@ -302,7 +302,7 @@
             </div>
             <div class="oh-sticky-table__td">
               {{feedback.end_date}}
-              <span title = 'due {% if feedback.end_date == current_date %} {{current_date}} {% else %}in {{feedback.end_date|sub:current_date}}{% endif %}'>
+              <span title = 'due  {% if feedback.end_date == current_date %} current_date {% else %}in {{feedback.end_date|sub:current_date}}{% endif %}'>
                   <ion-icon
                       class="text-{% if feedback.end_date < current_date %}danger {% elif feedback.end_date == current_date %}warning {% else %}success{% endif %}"
                       name="time-sharp"
@@ -441,7 +441,7 @@
             </div>
             <div class="oh-sticky-table__td">
               {{feedback.end_date}}
-              <span title = 'due {% if feedback.end_date == current_date %} {{current_date}} {% else %} in {{feedback.end_date|sub:current_date}}{% endif %}'>
+              <span title = 'due  {% if feedback.end_date == current_date %} current_date {% else %}in {{feedback.end_date|sub:current_date}}{% endif %}'>
                   <ion-icon
                       class="text-{% if feedback.end_date < current_date %}danger {% elif feedback.end_date == current_date %}warning {% else %}success{% endif %}"
                       name="time-sharp"
diff --git a/pms/templates/okr/emp_obj_single.html b/pms/templates/okr/emp_obj_single.html
index 798d4205b..555efb665 100644
--- a/pms/templates/okr/emp_obj_single.html
+++ b/pms/templates/okr/emp_obj_single.html
@@ -121,7 +121,7 @@
         <div class="oh-modal__button-container text-center mt-3">
             <div class="oh-btn-group">
                 {% if perms.pms.change_employeeobjective or instance|is_manager:request.user %}
-                    <a class="oh-btn oh-btn--info" hx-get='{% url "update-employee-objective" instance.id %}' hx-target="#objectDetailsModalTarget" data-toggle="oh-modal-toggle" data-target="#objectDetailsModal" style="width: 50%;">
+                    <a class="oh-btn oh-btn--info" hx-get='{% url "update-employee-objective" instance.id %}' hx-target="#genericModalBody" data-toggle="oh-modal-toggle" data-target="#genericModalBody" style="width: 50%;">
                         <ion-icon name="create-outline">
                         </ion-icon>{% trans "Edit" %}
                     </a>
diff --git a/pms/templates/okr/emp_objective/emp_objective_dashboard_view.html b/pms/templates/okr/emp_objective/emp_objective_dashboard_view.html
index 53a15d365..419f25405 100644
--- a/pms/templates/okr/emp_objective/emp_objective_dashboard_view.html
+++ b/pms/templates/okr/emp_objective/emp_objective_dashboard_view.html
@@ -48,10 +48,10 @@
                                                 {% comment %} {% if request.user|is_reportingmanager or perms.pms.view_employeekeyresult %} {% endcomment %}
                                                     <a
                                                         hx-get='{% url "view-employee-objective" emp_objective.id %}'
-                                                        hx-target="#objectDetailsModalTarget"
+                                                        hx-target="#genericModal"
                                                         data-toggle="oh-modal-toggle"
-                                                        data-target="#objectDetailsModal"
-                                                        type="button" title="{% trans 'Viewxxxxxxxxxxxx' %}"
+                                                        data-target="#genericModalBody"
+                                                        type="button" title="{% trans 'View' %}"
                                                         class="oh-btn oh-btn--light-bkg p-3 w-100"  onclick="event.stopPropagation()"
                                                     >
                                                         <ion-icon name="eye-outline"></ion-icon>
@@ -72,9 +72,9 @@
                                                     <button  style="border-right:1px solid hsl(8, 77%, 56%)"
                                                         class="oh-btn oh-btn--secondary-outline float-end"
                                                         hx-get='{% url "employee-key-result-creation" emp_objective.id %}'
-                                                        hx-target="#objectCreateModalTarget"
+                                                        hx-target="#genericModalBody"
                                                         data-toggle="oh-modal-toggle"
-                                                        data-target="#objectCreateModal"
+                                                        data-target="#genericModal"
                                                         title="Add Key Result"
                                                         onclick="event.stopPropagation()"
                                                     >
@@ -184,12 +184,11 @@
         var numericValue = parseFloat(targetValue.replace(/[^\d.]/g, ''));
         var prgressPercentage = parseInt( currentValue*100/numericValue )
         // Ensure totalProgress doesn't exceed 100
-        if (prgressPercentage > 100) {
-            prgressPercentage = 100;
+        if (prgressPercentage < 0) {
             Swal.fire({
                 icon: 'error',
                 title: 'Oops...',
-                text: 'Current Value cannot exceed target value!',
+                text: 'Current Value Cannot be -ve',
                 timer: 3000, // Display the alert for 3 seconds
                 timerProgressBar: true, // Show the progress bar
                 showConfirmButton: false // Hide the "OK" button
diff --git a/pms/templates/okr/emp_objective/emp_objective_list.html b/pms/templates/okr/emp_objective/emp_objective_list.html
index a812106d4..ed0d17fde 100644
--- a/pms/templates/okr/emp_objective/emp_objective_list.html
+++ b/pms/templates/okr/emp_objective/emp_objective_list.html
@@ -13,6 +13,7 @@
 {% endif %}
 {% for emp_objective in emp_objectives.object_list %}
     {% if perms.pms.view_employeeobjective or emp_objective|is_manager_or_owner:request.user %}
+        <div id="ekrIds{{emp_objective.pk}}" data-ids="[]"></div>
         <div class="oh-accordion-meta">
             <div class="oh-accordion-meta__item">
                 <div class="oh-accordion-meta__header"
@@ -21,12 +22,12 @@
                         $(this).parent().find('.oh-accordion-meta__body').toggleClass('d-none');
                         "
                         data-target="#krBody{{emp_objective.id}}"
-                        hx-get="{% url 'kr-table-view' emp_objective.id %}?{{request.GET.urlencode}}&objective_id={{objective.id}}"
+                        hx-get="{% url 'kr-table-view' emp_objective.id %}?{{request.GET.urlencode}}&employee_objective_id={{emp_objective.id}}"
                         hx-target="#krData{{emp_objective.id}}"
                     >
                     <div class="oh-accordion-meta__title d-flex align-items-center justify-content-between w-100 ">
                         <div class="d-flex align-items-center justify-content-between" style="width:85%">
-                            <div class="oh-tabs__input-badge-container">
+                            <div class="oh-tabs__input-badge-container" style="width: 20%;">
                                 <span
                                     class="oh-badge oh-badge--secondary oh-badge--small oh-badge--round mr-1"
                                 >
@@ -37,9 +38,9 @@
                             {% if emp_objective.employee_key_result.first %}
                             <div class="oh-progress-container progress_bar_objective"  style="width:50%">
                                 <div class="oh-progress" role="progressbar">
-                                        <div class="oh-progress__bar oh-progress__bar--secondary" style="width: calc( {{ emp_objective.progress_percentage }}%)"></div>
+                                        <div class="oh-progress__bar oh-progress__bar--secondary" id="kr{{emp_objective.pk}}" style="width: calc({% if emp_objective.progress_percentage > 100 %}100 {% else %}{{emp_objective.progress_percentage}}{% endif %}%)"></div>
                                 </div>
-                                <div class="oh-progress-container__percentage" style="width:50px" name= "key_result_percentage">{{emp_objective.progress_percentage}} %</div>
+                                <div class="oh-progress-container__percentage" style="width:50px" id="kr{{emp_objective.pk}}Html" name= "key_result_percentage">{{emp_objective.progress_percentage}} %</div>
                             </div>
                             {% endif %}
                             <div
@@ -70,102 +71,99 @@
                             </div>
                         </div>
                         <div>
+                            <div class="oh-btn-group">
+                                <a
+                                    hx-get='{% url "view-employee-objective" emp_objective.id %}'
+                                    hx-target="#genericModalBody"
+                                    data-toggle="oh-modal-toggle"
+                                    data-target="#genericModal"
+                                    type="button" title="{% trans 'View' %}"
+                                    class="oh-btn oh-btn--light-bkg p-3 w-100"  onclick="event.stopPropagation()"
+                                >
+                                    <ion-icon name="eye-outline"></ion-icon>
+                                </a>
+                                {% if request.user.employee_get in emp_objective.objective_id.managers.all or emp_objective.employee_id == request.user.employee_get or perms.pms.view_employeekeyresult %}
+                                    <a
+                                        hx-get='{% url "objective-detailed-view-activity" emp_objective.id %}'
+                                        hx-target="#activityContainer"
+                                        data-target="#OKRactivitySidebar"
+                                        type="button" title="{% trans 'Activites' %}"
+                                        class="oh-btn oh-btn--light-bkg p-3 w-50 oh-activity-sidebar__open"  onclick="event.stopPropagation()"
+                                    >
+                                        <ion-icon name="newspaper-outline"></ion-icon>
+                                    </a>
+                                {% endif %}
+                                {% if request.user.employee_get in emp_objective.objective_id.managers.all or perms.pms.add_employeekeyresult %}
+                                    <button  style="border-right:1px solid hsl(8, 77%, 56%)"
+                                        class="oh-btn oh-btn--secondary-outline float-end"
+                                        hx-get='{% url "employee-key-result-creation" emp_objective.id %}'
+                                        hx-target="#genericModalBody"
+                                        data-toggle="oh-modal-toggle"
+                                        data-target="#genericModal"
+                                        title="Add Key Result"
+                                        onclick="event.stopPropagation()"
+                                    >
+                                        <ion-icon name="add-outline" class="m-0 md hydrated" role="img" aria-label="add outline"></ion-icon>
+                                    </button>
+                                {% endif %}
+                                {% if request.user.employee_get in emp_objective.objective_id.managers.all or perms.pms.add_employeeobjective %}
 
-                                <div class="oh-btn-group">
-                                        <a
-                                            hx-get='{% url "view-employee-objective" emp_objective.id %}'
-                                            hx-target="#objectDetailsModalTarget"
-                                            data-toggle="oh-modal-toggle"
-                                            data-target="#objectDetailsModal"
-                                            type="button" title="{% trans 'View' %}"
-                                            class="oh-btn oh-btn--light-bkg p-3 w-100"  onclick="event.stopPropagation()"
-                                        >
-                                            <ion-icon name="eye-outline"></ion-icon>
-                                        </a>
-                                    {% if request.user.employee_get in emp_objective.objective_id.managers.all or emp_objective.employee_id == request.user.employee_get or perms.pms.view_employeekeyresult %}
-                                        <a
-                                            hx-get='{% url "objective-detailed-view-activity" emp_objective.id %}'
-                                            hx-target="#activityContainer"
-                                            data-target="#OKRactivitySidebar"
-                                            type="button" title="{% trans 'Activites' %}"
-                                            class="oh-btn oh-btn--light-bkg p-3 w-50 oh-activity-sidebar__open"  onclick="event.stopPropagation()"
-                                        >
-                                            <ion-icon name="newspaper-outline"></ion-icon>
-                                        </a>
-                                    {% endif %}
-                                    {% if request.user.employee_get in emp_objective.objective_id.managers.all or perms.pms.add_employeekeyresult %}
-                                        <button  style="border-right:1px solid hsl(8, 77%, 56%)"
-                                            class="oh-btn oh-btn--secondary-outline float-end"
-                                            hx-get='{% url "employee-key-result-creation" emp_objective.id %}'
-                                            hx-target="#objectCreateModalTarget"
-                                            data-toggle="oh-modal-toggle"
-                                            data-target="#objectCreateModal"
-                                            title="Add Key Result"
-                                            onclick="event.stopPropagation()"
-                                        >
-                                            <ion-icon name="add-outline" class="m-0 md hydrated" role="img" aria-label="add outline"></ion-icon>
+                                <div class="" onclick="event.stopPropagation()">
+                                    <div class="oh-dropdown" x-data="{show: false}">
+                                        <button class="oh-btn oh-btn--transparent text-muted p-3" @click="show = !show" title={% trans "Actions" %}>
+                                            <ion-icon name="ellipsis-vertical-sharp" title="{% trans 'Options' %}" role="img" class="md hydrated" aria-label="ellipsis vertical sharp"></ion-icon>
                                         </button>
-                                    {% endif %}
-                                    {% if request.user.employee_get in emp_objective.objective_id.managers.all or perms.pms.add_employeeobjective %}
-
-                                    <div class="" onclick="event.stopPropagation()">
-                                        <div class="oh-dropdown" x-data="{show: false}">
-                                            <button class="oh-btn oh-btn--transparent text-muted p-3" @click="show = !show" title={% trans "Actions" %}>
-                                                <ion-icon name="ellipsis-vertical-sharp" title="{% trans 'Options' %}" role="img" class="md hydrated" aria-label="ellipsis vertical sharp"></ion-icon>
-                                            </button>
-                                            <div class="oh-dropdown__menu oh-dropdown__menu--dark-border oh-dropdown__menu--right" x-show="show" @click.outside="show = false" style="display: none;">
-                                                <ul class="oh-dropdown__items">
-                                                {% if perms.pms.change_employeeobjective or request.user.employee_get in emp_objective.objective_id.managers.all %}
+                                        <div class="oh-dropdown__menu oh-dropdown__menu--dark-border oh-dropdown__menu--right" x-show="show" @click.outside="show = false" style="display: none;">
+                                            <ul class="oh-dropdown__items">
+                                            {% if perms.pms.change_employeeobjective or request.user.employee_get in emp_objective.objective_id.managers.all %}
+                                                <li class="oh-dropdown__item">
+                                                    <a
+                                                    class="fw-light"
+                                                    data-toggle="oh-modal-toggle"
+                                                    data-target="#objectDetailsModal"
+                                                    hx-get='{% url "update-employee-objective" emp_objective.id %}'
+                                                    hx-target="#objectDetailsModalTarget"
+                                                    >{% trans "Edit" %}</a>
+                                                </li>
+                                                {% if emp_objective.archive %}
                                                     <li class="oh-dropdown__item">
                                                         <a
                                                         class="fw-light"
-                                                        data-toggle="oh-modal-toggle"
-                                                        data-target="#objectDetailsModal"
-                                                        hx-get='{% url "update-employee-objective" emp_objective.id %}'
-                                                        hx-target="#objectDetailsModalTarget"
-                                                        >{% trans "Edit" %}</a>
+                                                        onclick="return confirm(`{% trans 'Do you want to un-archive this employee objective?' %}`)"
+                                                        href='{% url "archive-employee-objective" emp_objective.id %}?single_view=False'
+                                                        hx-target="#emp_objective_card"
+                                                        >{% trans "Unarchive" %}</a>
                                                     </li>
-                                                    {% if emp_objective.archive %}
-                                                        <li class="oh-dropdown__item">
-                                                            <a
-                                                            class="fw-light"
-                                                            onclick="return confirm(`{% trans 'Do you want to un-archive this employee objective?' %}`)"
-                                                            href='{% url "archive-employee-objective" emp_objective.id %}?single_view=False'
-                                                            hx-target="#emp_objective_card"
-                                                            >{% trans "Unarchive" %}</a>
-                                                        </li>
-                                                    {% else %}
-                                                        <li class="oh-dropdown__item">
-                                                            <a
-                                                            class="fw-light"
-                                                            onclick="return confirm(`{% trans 'Do you want to archive this employee objective?' %}`)"
-                                                            href='{% url "archive-employee-objective" emp_objective.id %}?single_view=False'
-                                                            hx-target="#emp_objective_card"
-                                                            >{% trans "Archive" %}</a>
-                                                        </li>
-                                                    {% endif %}
-
-                                                {% endif %}
-                                                {% if perms.pms.delete_employeeobjective or request.user.employee_get in emp_objective.objective_id.managers.all %}
+                                                {% else %}
                                                     <li class="oh-dropdown__item">
                                                         <a
                                                         class="fw-light"
-                                                        data-toggle="oh-modal-toggle"
-                                                        data-target="#objectDetailsModal"
-                                                        hx-confirm="{% trans 'Do you want to delete this employee objective?' %}"
-                                                        hx-get='{% url "delete-employee-objective" emp_objective.id %}?single_view="False'
-                                                        hx-target="#objectDetailsModalTarget"
-                                                        >{% trans "Delete" %}</a>
+                                                        onclick="return confirm(`{% trans 'Do you want to archive this employee objective?' %}`)"
+                                                        href='{% url "archive-employee-objective" emp_objective.id %}?single_view=False'
+                                                        hx-target="#emp_objective_card"
+                                                        >{% trans "Archive" %}</a>
                                                     </li>
                                                 {% endif %}
-                                                </ul>
-                                            </div>
+
+                                            {% endif %}
+                                            {% if perms.pms.delete_employeeobjective or request.user.employee_get in emp_objective.objective_id.managers.all %}
+                                                <li class="oh-dropdown__item">
+                                                    <a
+                                                    class="fw-light"
+                                                    data-toggle="oh-modal-toggle"
+                                                    data-target="#objectDetailsModal"
+                                                    hx-confirm="{% trans 'Do you want to delete this employee objective?' %}"
+                                                    hx-get='{% url "delete-employee-objective" emp_objective.id %}?single_view="False'
+                                                    hx-target="#objectDetailsModalTarget"
+                                                    >{% trans "Delete" %}</a>
+                                                </li>
+                                            {% endif %}
+                                            </ul>
                                         </div>
                                     </div>
-                                    {% endif %}
-
-
                                 </div>
+                                {% endif %}
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -173,7 +171,6 @@
                     class="oh-accordion-meta__body d-none"
                     id="krBody{{emp_objective.id}}"
                 >
-                    <!-- htmx tax bracket loading here -->
                     <div
                     class="oh-sticky-table oh-sticky-table--no-overflow mb-5"
                     id="krData{{emp_objective.id}}"
diff --git a/pms/templates/okr/emp_objective/emp_objective_nav.html b/pms/templates/okr/emp_objective/emp_objective_nav.html
index 898cb71f7..9ab0a1329 100644
--- a/pms/templates/okr/emp_objective/emp_objective_nav.html
+++ b/pms/templates/okr/emp_objective/emp_objective_nav.html
@@ -1,4 +1,20 @@
 {% load i18n %}{% load widget_tweaks %} {% load mathfilters %} {% load basefilters %}
+<style>
+    .filter-pill {
+      border-radius: 999px;
+      padding: 6px 16px;
+      background-color: #f0f0f0;
+      display: inline-block;
+      margin: 4px;
+      cursor: pointer;
+      transition: background-color 0.3s ease;
+      border: none;
+    }
+    .filter-pill.active {
+      background-color: #007bff;
+      color: white;
+    }
+  </style>
 <span
   name=""
   id="dynamicKeyResult"
@@ -130,10 +146,84 @@
                                                 {{emp_obj_form.form.status}}
                                             </div>
                                         </div>
+
+
+
+                                        <div class="col-sm-12 col-md-12 col-lg-6">
+                                            <div class="oh-input-group">
+                                                <label class="oh-label" for="">{% trans "Objective Progress % (GTE)" %}</label>
+                                                {{emp_obj_form.form.progress_percentage__gte}}
+                                            </div>
+                                        </div>
+                                        <div class="col-sm-12 col-md-12 col-lg-6">
+                                            <div class="oh-input-group">
+                                                <label class="oh-label" for="">{% trans "Objective Progress % (LTE)" %}</label>
+                                                {{emp_obj_form.form.progress_percentage__lte}}
+                                            </div>
+                                        </div>
                                     </div>
                                 </div>
                             </div>
+                            <div class="oh-accordion">
+                                <div class="oh-accordion-header">{% trans "Key Results" %}</div>
+                                    <div class="oh-accordion-body" onclick="event.stopPropagation()">
+                                        <div class="row">
+                                            <div class="col-sm-12 col-md-12 col-lg-6">
+                                                <div class="oh-input-group">
+                                                    <label class="oh-label" for="">{% trans "Start Date From" %}</label>
+                                                    {{emp_obj_form.form.kr_start_date_from}}
+                                                </div>
+                                            </div>
+                                            <div class="col-sm-12 col-md-12 col-lg-6">
+                                                <div class="oh-input-group">
+                                                    <label class="oh-label" for="">{% trans "Start Date Till" %}</label>
+                                                    {{emp_obj_form.form.kr_start_date_till}}
+                                                </div>
+                                            </div>
 
+                                            <div class="col-sm-12 col-md-12 col-lg-6">
+                                                <div class="oh-input-group">
+                                                    <label class="oh-label" for="">{% trans "End Date From" %}</label>
+                                                    {{emp_obj_form.form.kr_end_date_from}}
+                                                </div>
+                                            </div>
+                                            <div class="col-sm-12 col-md-12 col-lg-6">
+                                                <div class="oh-input-group">
+                                                    <label class="oh-label" for="">{% trans "End Date TTill" %}</label>
+                                                    {{emp_obj_form.form.kr_end_date_till}}
+                                                </div>
+                                            </div>
+                                            <div class="col-sm-12 col-md-12 col-lg-6">
+                                                <div class="oh-input-group">
+                                                    <label class="oh-label" for="">{% trans "KR Progress % (GTE)" %}</label>
+                                                    {{emp_obj_form.form.kr_progress_percentage__gte}}
+                                                </div>
+                                            </div>
+                                            <div class="col-sm-12 col-md-12 col-lg-6">
+                                                <div class="oh-input-group">
+                                                    <label class="oh-label" for="">{% trans "KR Progress % (LTE)" %}</label>
+                                                    {{emp_obj_form.form.kr_progress_percentage__lte}}
+                                                </div>
+                                            </div>
+                                            <div class="col-md-6 col-lg-12">
+                                                <div class="oh-input-group">
+                                                  <label class="oh-label">{% trans "Quick Filters" %}</label>
+                                                  <div>
+                                                    <input type="text" name="due" hidden >
+                                                    {% for value, label in emp_obj_form.form.due.field.choices %}
+                                                      {% if value %}
+                                                        <button type="button" onclick="$(this).closest('form').find('[name=due]').val('{{value}}');$(this).closest('form').find('.filterButton').click();"
+                                                                class="filter-pill {% if request.GET.due == value %}active{% endif %}">
+                                                          {{ label }}
+                                                        </button>
+                                                      {% endif %}
+                                                    {% endfor %}
+                                                  </div>
+                                                  </div>
+                                              </div>
+                                        </div>
+                                    </div>
+                            </div>
                         </div>
                         <div class="oh-dropdown__filter-footer">
                             <button
diff --git a/pms/templates/okr/key_result/kr_dashboard_view.html b/pms/templates/okr/key_result/kr_dashboard_view.html
index 7b1a1a7b0..7880ace59 100644
--- a/pms/templates/okr/key_result/kr_dashboard_view.html
+++ b/pms/templates/okr/key_result/kr_dashboard_view.html
@@ -131,9 +131,9 @@
                                                             class="oh-btn oh-btn--light-bkg w-50"
                                                             title="{% trans 'Edit' %}"
                                                             data-toggle="oh-modal-toggle"
-                                                            data-target="#objectDetailsModal"
+                                                            data-target="#genericModal"
                                                             hx-get='{% url "employee-key-result-update" kr.id %}'
-                                                            hx-target="#objectDetailsModalTarget"
+                                                            hx-target="#genericModalBody"
                                                         >
                                                             <ion-icon name="create-outline"></ion-icon>
                                                         </button>
@@ -245,12 +245,11 @@
         var numericValue = parseFloat(targetValue.replace(/[^\d.]/g, ''));
         var prgressPercentage = parseInt( currentValue*100/numericValue )
         // Ensure totalProgress doesn't exceed 100
-        if (prgressPercentage > 100) {
-            prgressPercentage = 100;
+        if (prgressPercentage < 0) {
             Swal.fire({
                 icon: 'error',
                 title: 'Oops...',
-                text: 'Current Value cannot exceed target value!',
+                text: 'Current Value Cannot be -ve',
                 timer: 3000, // Display the alert for 3 seconds
                 timerProgressBar: true, // Show the progress bar
                 showConfirmButton: false // Hide the "OK" button
diff --git a/pms/templates/okr/kr_list.html b/pms/templates/okr/kr_list.html
index 8cc118fdc..5e060b11e 100644
--- a/pms/templates/okr/kr_list.html
+++ b/pms/templates/okr/kr_list.html
@@ -38,6 +38,7 @@
             </div>
             <div class="oh-sticky-table__tbody">
                 {% for kr in krs.object_list %}
+
                     <div class="oh-sticky-table__tr" data-kr-id="{{kr.id}}"
                         {% comment %} onclick="window.location.href = `{% url 'ticket-detail' ticket.id %}`" {% endcomment %}
                     >
@@ -73,8 +74,9 @@
                         <div class="oh-sticky-table__td">
                             <input
                                 id = {{kr.id}}
-                                type="number" class="oh-input p-1"  min="0"
-                                max="{{kr.target_value}}"
+                                type="number" class="oh-input p-1"
+                                style="width: 100px;"
+                                min="0"
                                 value="{{kr.current_value}}"
                                 {% comment %} hx-post="{%url 'employee-keyresult-update-current_value' kr.id %}"
                                 hx-trigger="change"
@@ -109,9 +111,9 @@
                                         class="oh-btn oh-btn--light-bkg w-50"
                                         title="{% trans 'Edit' %}"
                                         data-toggle="oh-modal-toggle"
-                                        data-target="#objectCreateModal"
+                                        data-target="#genericModal"
                                         hx-get='{% url "employee-key-result-update" kr.id %}'
-                                        hx-target="#objectCreateModalTarget"
+                                        hx-target="#genericModalBody"
                                     >
                                         <ion-icon name="create-outline"></ion-icon>
                                     </button>
diff --git a/pms/templates/okr/okr_detailed_view.html b/pms/templates/okr/okr_detailed_view.html
index dee1d80ec..e6264303b 100644
--- a/pms/templates/okr/okr_detailed_view.html
+++ b/pms/templates/okr/okr_detailed_view.html
@@ -1,205 +1,136 @@
 {% extends 'index.html' %} {% load static i18n %} {% load i18n %}
 {% load widget_tweaks %} {% block content %} {% load basefilters %}
 {% include 'filter_tags.html' %}
-<style>
-  .avatars {
-    display: flex;
-    padding: 8px 10px 8px 10px;
-  }
-
-  .avatars__item {
-    background-color: #596376;
-    border: 2px solid white;
-    border-radius: 100%;
-    color: #ffffff;
-    display: block;
-    font-family: sans-serif;
-    font-size: 12px;
-    font-weight: 100;
-    height: 26px;
-    width: 26px;
-    line-height: 17px;
-    text-align: center;
-    transition: margin 0.1s ease-in-out;
-    overflow: hidden;
-    margin-left: -10px;
-  }
-
-  .avatars__item:first-child {
-    z-index: 5;
-  }
-
-  .avatars__item:nth-child(2) {
-    z-index: 4;
-  }
-
-  .avatars__item:nth-child(3) {
-    z-index: 3;
-  }
-
-  .avatars__item:nth-child(4) {
-    z-index: 2;
-  }
-
-  .avatars__item:nth-child(5) {
-    z-index: 1;
-  }
-
-  .avatars__item:last-child {
-    z-index: 0;
-  }
-
-  .avatars__item img {
-    width: 100%;
-  }
-
-  .avatars:hover .avatars__item {
-    margin-right: 10px;
-  }
-  .select2-container .select2-selection.select2-selection--multiple {
-    padding: 5px !important;
-    max-height: 70px !important;
-    overflow: hidden;
-    overflow-y: scroll;
-  }
-  .search-highlight {
-    background-color: rgba(255, 68, 0, 0.076);
-  }
-  #enlargeImageContainer {
-    position: absolute;
-    left: -300px;
-    top: 100px;
-    height: 200px;
-    width: 200px;
-  }
-</style>
 {% include "okr/emp_objective/emp_objective_nav.html" %}
+{% include "generic/components.html" %}
 <main :class="sidebarOpen ? 'oh-main__sidebar-visible' : ''">
-  <div class="oh-wrapper" style="margin-top: 5px">
-    <div class="oh-card">
-      <div class="oh-helpdesk__header">
-        <div class="d-flex justify-content-between align-items-center">
-          <p class="oh-helpdesk__header-title">{{objective}}</p>
-          <span class="helpdesk__card-value me-3">
-            <div class="oh-btn-group">
-              {% if perms.pms.change_objective %}
-              <a
-                onclick="event.preventDefault();event.stopPropagation()"
-                data-toggle="oh-modal-toggle"
-                data-target="#objectCreateModal"
-                hx-get="{% url 'objective-update' objective.id %}"
-                hx-target="#objectCreateModalTarget"
-                class="oh-btn oh-btn--light-bkg w-100"
-                title="{% trans 'Edit' %}"
-                ><ion-icon name="create-outline"></ion-icon
-              ></a>
-              {% endif %} {% if perms.pms.add_employeeobjective %}
-              <a
-                onclick="event.preventDefault();event.stopPropagation()"
-                hx-get="{% url 'add-assignees' objective.id %}"
-                hx-target="#objectDetailsModalTarget"
-                hx-swap="innerHTML"
-                data-toggle="oh-modal-toggle"
-                data-target="#objectDetailsModal"
-                class="oh-btn oh-btn--light-bkg w-100"
-                title="Add assignees"
-                ><ion-icon name="add-outline"></ion-icon
-              ></a>
-              {% endif %}
-            </div>
-          </span>
-        </div>
-
-        <ul class="helpdesk__card-items">
-          <li class="helpdesk__card-item">
-            <span class="helpdesk__card-label">{% trans "Managers:" %}</span>
-            <span class="helpdesk__card-value" name="" id="">
-              <div class="d-flex justify-content-between custom-scroll">
-                <div class="avatars" id="avatarsContainer">
-                  {% for manager in objective.managers.all %}
-                  <a
-                    href="{% url 'employee-view-individual' manager.id %}"
-                    class="avatars__item"
-                    title="{{manager}}"
-                    ><img class="avatar" src="{{manager.get_avatar}}" alt=""
-                  /></a>
-                  {% endfor %}
-                </div>
+  <div id="ObjectiveDetailedViewContainer">
+    <div class="oh-wrapper" style="margin-top: 5px">
+      <div class="oh-card">
+        <div class="oh-helpdesk__header">
+          <div class="d-flex justify-content-between align-items-center">
+            <p class="oh-helpdesk__header-title">{{objective}}</p>
+            <span class="helpdesk__card-value me-3">
+              <div class="oh-btn-group">
+                {% if perms.pms.change_objective %}
+                <a
+                  onclick="event.preventDefault();event.stopPropagation()"
+                  data-toggle="oh-modal-toggle"
+                  data-target="#objectCreateModal"
+                  hx-get="{% url 'objective-update' objective.id %}"
+                  hx-target="#objectCreateModalTarget"
+                  class="oh-btn oh-btn--light-bkg w-100"
+                  title="{% trans 'Edit' %}"
+                  ><ion-icon name="create-outline"></ion-icon
+                ></a>
+                {% endif %} {% if perms.pms.add_employeeobjective or request.user.employee_get in objective.managers.all %}
+                <a
+                  onclick="event.preventDefault();event.stopPropagation()"
+                  hx-get="{% url 'add-assignees' objective.id %}"
+                  hx-target="#objectDetailsModalTarget"
+                  hx-swap="innerHTML"
+                  data-toggle="oh-modal-toggle"
+                  data-target="#objectDetailsModal"
+                  class="oh-btn oh-btn--light-bkg w-100"
+                  title="Add assignees"
+                  ><ion-icon name="add-outline"></ion-icon
+                ></a>
+                {% endif %}
               </div>
             </span>
-          </li>
-          <li class="helpdesk__card-item">
-            <span class="helpdesk__card-label">{% trans "Duration:" %}</span>
-            <span class="helpdesk__card-value" name="" id=""
-              >{{objective.duration}}
-              {{objective.get_duration_unit_display}}</span
-            >
-          </li>
-          <li class="helpdesk__card-item">
-            <span class="helpdesk__card-label">{% trans "Description:" %}</span>
-            <span class="helpdesk__card-value" name="" id=""
-              >{{objective.description}}</span
-            >
-          </li>
-        </ul>
+          </div>
+
+          <ul class="helpdesk__card-items">
+            <li class="helpdesk__card-item">
+              <span class="helpdesk__card-label">{% trans "Managers:" %}</span>
+              <span class="helpdesk__card-value" name="" id="">
+                <div class="d-flex justify-content-between custom-scroll">
+                  <div class="avatars" id="avatarsContainer">
+                    {% for manager in objective.managers.all %}
+                    <a
+                      href="{% url 'employee-view-individual' manager.id %}"
+                      class="avatars__item"
+                      title="{{manager}}"
+                      ><img class="avatar" src="{{manager.get_avatar}}" alt=""
+                    /></a>
+                    {% endfor %}
+                  </div>
+                </div>
+              </span>
+            </li>
+            <li class="helpdesk__card-item">
+              <span class="helpdesk__card-label">{% trans "Duration:" %}</span>
+              <span class="helpdesk__card-value" name="" id=""
+                >{{objective.duration}}
+                {{objective.get_duration_unit_display}}</span
+              >
+            </li>
+            <li class="helpdesk__card-item">
+              <span class="helpdesk__card-label">{% trans "Description:" %}</span>
+              <span class="helpdesk__card-value" name="" id=""
+                >{{objective.description}}</span
+              >
+            </li>
+          </ul>
+        </div>
       </div>
-    </div>
 
-    {% if objective.employee_objective.all %}
-    <div
-      class="oh-card"
-      id="emp_objective_card"
-      hx-get="{% url 'emp-objective-search' objective.id %}?{{request.GET.urlencode}}"
-      hx-trigger="load"
-    ></div>
-    {% else %}
-    <!-- start of empty page-->
-    <div
-      style="
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-        height: 100%;
-      "
-    >
-      <img
+      {% if objective.employee_objective.all %}
+      <div
+        class="oh-card"
+        id="emp_objective_card"
+        hx-get="{% url 'emp-objective-search' objective.id %}?{{request.GET.urlencode}}"
+        hx-trigger="load"
+      ></div>
+      {% else %}
+      <!-- start of empty page-->
+      <div
         style="
-          display: block;
-          width: 15%;
-          margin: 20px auto;
-          filter: opacity(0.5);
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          align-items: center;
+          height: 100%;
         "
-        src="{% static 'static/images/ui/target.png' %}"
-        class=""
-        alt="Page not found. 404."
-      />
-      <h5 class="oh-404__subtitle">
-        {% trans "There are no assignees for this objective at the moment." %}
-      </h5>
+      >
+        <img
+          style="
+            display: block;
+            width: 15%;
+            margin: 20px auto;
+            filter: opacity(0.5);
+          "
+          src="{% static 'static/images/ui/target.png' %}"
+          class=""
+          alt="Page not found. 404."
+        />
+        <h5 class="oh-404__subtitle">
+          {% trans "There are no assignees for this objective at the moment." %}
+        </h5>
+      </div>
+      <!-- end of empty page-->
+      {% endif %}
     </div>
-    <!-- end of empty page-->
-    {% endif %}
-  </div>
 
-  <!-- Modals -->
+    <!-- Modals -->
 
-  <div
-    class="oh-modal"
-    id="objectivesModal"
-    role="dialog"
-    aria-labelledby="objectivesModal"
-    aria-hidden="true"
-  >
-    <div class="oh-modal__dialog" id="objectivesTarget"></div>
-  </div>
+    <div
+      class="oh-modal"
+      id="objectivesModal"
+      role="dialog"
+      aria-labelledby="objectivesModal"
+      aria-hidden="true"
+    >
+      <div class="oh-modal__dialog" id="objectivesTarget"></div>
+    </div>
 
-  <div class="oh-activity-sidebar" id="OKRactivitySidebar">
-    <div class="oh-activity-sidebar__body" id="activityContainer"></div>
+    <div class="oh-activity-sidebar" id="OKRactivitySidebar">
+      <div class="oh-activity-sidebar__body" id="activityContainer"></div>
+    </div>
+    <button id="keyresultDataButton" hx-include="#empKeyrsultForm" hx-get="{% url "get-keyresult-data" %}?data-update=target_value" hx-target="#empKeyrsultForm #id_target_value" hx-swap="outerHTML" hidden></button>
+    <button id="endDateChangeButton" hx-include="#empKeyrsultForm" hx-get="{% url "get-keyresult-data" %}?data-update=end_date" hx-target="#empKeyrsultForm #id_end_date" hx-swap="outerHTML" hidden></button>
+    <button id="changeObjStatusButton" hx-get="{% url 'change-employee-objective-status' %}" hx-target="" hidden></button>
   </div>
-  <button id="keyresultDataButton" hx-include="#empKeyrsultForm" hx-get="{% url "get-keyresult-data" %}?data-update=target_value" hx-target="#empKeyrsultForm #id_target_value" hx-swap="outerHTML" hidden></button>
-  <button id="endDateChangeButton" hx-include="#empKeyrsultForm" hx-get="{% url "get-keyresult-data" %}?data-update=end_date" hx-target="#empKeyrsultForm #id_end_date" hx-swap="outerHTML" hidden></button>
-  <button id="changeObjStatusButton" hx-get="{% url 'change-employee-objective-status' %}" hx-target="" hidden></button>
   <script>
     $(document).ready(function () {
       $(".oh-accordion-meta__header").click(function () {
@@ -268,24 +199,18 @@
     }
     function progress(element) {
       var currentValue = $(element).val();
-      keyResultTable = $(element).closest(".oh-sticky-table__tbody");
-      keyResultRow = $(element).closest(".oh-sticky-table__tr");
-      empKeyResultId = keyResultRow.attr("data-kr-id");
-      var targetValue = keyResultRow.find("[data-value]").attr("data-value");
+      var keyResultRow = $(element).closest(".oh-employee-okr-row");
+      var empKeyResultId = keyResultRow.data("kr-id");
+      var progressCol = keyResultRow.find(".progressPercentage")
 
-      // Extract only the numeric part using a regular expression
-      var numericValue = parseFloat(targetValue.replace(/[^\d.]/g, ""));
-      var prgressPercentage = parseInt((currentValue * 100) / numericValue);
-      // Ensure totalProgress doesn't exceed 100
-      if (prgressPercentage > 100) {
-        prgressPercentage = 100;
+      if (currentValue < 0) {
         Swal.fire({
           icon: "error",
           title: "Oops...",
-          text: "Current Value cannot exceed target value!",
-          timer: 3000, // Display the alert for 3 seconds
-          timerProgressBar: true, // Show the progress bar
-          showConfirmButton: false, // Hide the "OK" button
+          text: "Current Value Cannot be -ve",
+          timer: 3000,
+          timerProgressBar: true,
+          showConfirmButton: false,
         });
       } else {
         $.ajax({
@@ -298,37 +223,10 @@
           },
           success: function (response) {
             if (response.type != "error") {
-              keyResultRow.find(".p-percentage").text(prgressPercentage + "%");
-
-              // Iterate over each span and get its text content
-              var total_percentage = 0;
-              var total_kr = 0;
-              keyResultTable.find(".p-percentage").each(function () {
-                strPercentage = $(this).text();
-                numPercentage = parseFloat(
-                  strPercentage.replace(/[^\d.]/g, "")
-                );
-                total_percentage += numPercentage;
-                total_kr += 1;
-              });
-              totalProgress = parseInt(total_percentage / total_kr);
-              // Ensure totalProgress doesn't exceed 100
-              if (totalProgress > 100) {
-                totalProgress = 100;
-              }
-              objectiveProgressContainer = $(element)
-                .closest(".oh-accordion-meta__item")
-                .find(".progress_bar_objective");
-              objectiveProgressContainer.html(
-                '<div class="oh-progress" role="progressbar">' +
-                  '<div class="oh-progress__bar oh-progress__bar--secondary" style="width: calc(' +
-                  totalProgress +
-                  '%)"></div>' +
-                  "</div>" +
-                  '<div class="oh-progress-container__percentage" style="width:50px" name= "key_result_percentage">' +
-                  totalProgress +
-                  " %</div>"
-              );
+              $(`#kr${response.pk}`).attr("style",`width:${response.progress}% !important;`)
+              $(`#kr${response.pk}Html`).html(`${response.progress}%`)
+              $(progressCol).html(`${response.kr_progress}%`)
+              $("#reloadMessagesButton").click()
             }
           },
         });
diff --git a/pms/urls.py b/pms/urls.py
index 329865be0..c98dcd887 100644
--- a/pms/urls.py
+++ b/pms/urls.py
@@ -3,26 +3,134 @@ from django.urls import path
 from base.views import object_delete
 from horilla_audit.methods import history_tracking
 from pms import cbvs
+from pms.cbv import (
+    dashboard,
+    feedback,
+    key_result,
+    meetings,
+    objectives,
+    period,
+    question_template,
+)
 
 from . import models, views
 
 urlpatterns = [
-    # objectives
-    path("objective-list-view/", views.objective_list_view, name="objective-list-view"),
-    path("objective-creation/", views.objective_creation, name="objective-creation"),
     path(
-        "objective-update/<int:obj_id>", views.objective_update, name="objective-update"
+        "ekr-history/<int:pk>",
+        key_result.EKRHistory.as_view(),
+        name="ekr-history",
     ),
-    path("add-assignees/<int:obj_id>", views.add_assignees, name="add-assignees"),
-    # key results
-    path("view-key-result/", views.view_key_result, name="view-key-result"),
-    path("filter-key-result/", views.filter_key_result, name="filter-key-result"),
-    path("create-key-result/", views.kr_create_or_update, name="create-key-result"),
     path(
-        "update-key-result/<int:kr_id>",
-        views.kr_create_or_update,
+        "individual-performance-tab-list/<int:pk>/",
+        feedback.PerformanceTab.as_view(),
+        name="individual-performance-tab-list",
+    ),
+    path("feedback-view/", feedback.FeedbackViewPage.as_view(), name="feedback-view"),
+    path(
+        "feedback-list-page/",
+        feedback.FeedbackListView.as_view(),
+        name="feedback-list-page",
+    ),
+    path(
+        "feedback-generic-tab/",
+        feedback.FeedbackGenericTabView.as_view(),
+        name="feedback-generic-tab",
+    ),
+    path(
+        "self-feedback-tab/",
+        feedback.SelfFeedbacktab.as_view(),
+        name="self-feedback-tab",
+    ),
+    path(
+        "requested-feedback-tab/",
+        feedback.RequestedFeedbackTab.as_view(),
+        name="requested-feedback-tab",
+    ),
+    path(
+        "all-feedback-tab/", feedback.AllFeedbackTab.as_view(), name="all-feedback-tab"
+    ),
+    path(
+        "anonymous-feedback-tab/",
+        feedback.AnonymousFeedbackTab.as_view(),
+        name="anonymous-feedback-tab",
+    ),
+    path(
+        "feedback-nav-view/",
+        feedback.FeedbacknavView.as_view(),
+        name="feedback-nav-view",
+    ),
+    # objectives
+    # path("objective-list-view/", views.objective_list_view, name="objective-list-view"),
+    # path("objective-creation/", views.objective_creation, name="objective-creation"),
+    path(
+        "objective-creation/",
+        objectives.CreateObjectiveFormView.as_view(),
+        name="objective-creation",
+    ),
+    path(
+        "objective-update/<int:pk>",
+        objectives.CreateObjectiveFormView.as_view(),
+        name="objective-update",
+    ),
+    # path(
+    #     "objective-update/<int:obj_id>", views.objective_update, name="objective-update"
+    # ),
+    # path("add-assignees/<int:obj_id>", views.add_assignees, name="add-assignees"),
+    path(
+        "add-assignees/<int:pk>",
+        objectives.AddAssigneesFormView.as_view(),
+        name="add-assignees",
+    ),
+    # key results
+    path(
+        "view-key-result/",
+        key_result.KeyResultViewPage.as_view(),
+        name="view-key-result",
+    ),
+    path(
+        "filter-key-result/",
+        key_result.KeyResultsListView.as_view(),
+        name="filter-key-result",
+    ),
+    path(
+        "key-result-detail-view/<int:pk>/",
+        key_result.KeyResultsDetailedView.as_view(),
+        name="key-result-detail-view",
+    ),
+    path(
+        "key-result-navbar/",
+        key_result.KeyResultNavView.as_view(),
+        name="key-result-navbar",
+    ),
+    path(
+        "key-result-card-view/",
+        key_result.KeyResultCardView.as_view(),
+        name="key-result-card-view",
+    ),
+    path(
+        "create-key-result/",
+        key_result.KeyResultFormView.as_view(),
+        name="create-key-result",
+    ),
+    path(
+        "update-key-result/<int:pk>/",
+        key_result.KeyResultFormView.as_view(),
         name="update-key-result",
     ),
+    path(
+        "key-result-delete/<int:key_id>/",
+        key_result.DeleteKeyResults.as_view(),
+        name="key-result-delete",
+    ),
+    # path("view-key-result/", views.view_key_result, name="view-key-result"),
+    # path("filter-key-result/", views.filter_key_result, name="filter-key-result"),
+    # path("create-key-result/", views.kr_create_or_update, name="create-key-result"),
+    # path(
+    #     "update-key-result/<int:kr_id>",
+    #     views.kr_create_or_update,
+    #     name="update-key-result",
+    # ),
     path(
         "delete-key-result/<int:obj_id>/",
         object_delete,
@@ -98,13 +206,23 @@ urlpatterns = [
         name="objective-detailed-view-comment",
     ),
     path(
-        "kr-table-view/<int:emp_objective_id>",
-        views.kr_table_view,
+        "kr-table-view/<int:emp_objective_id>/",
+        objectives.EmployeeObjectiveKeyResultDetailListView.as_view(),
         name="kr-table-view",
     ),
+    # path(
+    #     "kr-table-view/<int:emp_objective_id>",
+    #     views.kr_table_view,
+    #     name="kr-table-view",
+    # ),
+    # path(
+    #     "key-result-view",
+    #     views.key_result_view,
+    #     name="key-result-view",
+    # ),
     path(
         "key-result-view",
-        views.key_result_view,
+        dashboard.KeyResultStatus.as_view(),
         name="key-result-view",
     ),
     path(
@@ -120,11 +238,22 @@ urlpatterns = [
     path(
         "key-result-update/<int:id>", views.key_result_update, name="key-result-update"
     ),
-    path("feedback-view/", views.feedback_list_view, name="feedback-view"),
+    # path("feedback-view/", views.feedback_list_view, name="feedback-view"),
     path(
         "feedback-list-search", views.feedback_list_search, name="feedback-list-search"
     ),
     path("feedback-creation", views.feedback_creation, name="feedback-creation"),
+    # path(
+    #     "feedback-creation-ajax",
+    #     views.feedback_creation_ajax,
+    #     name="feedback-creation-ajax",
+    # ),
+    path(
+        "feedback-update/<int:pk>/",
+        feedback.FeedbackUpdateFormView.as_view(),
+        name="feedback-update",
+    ),
+    # path("feedback-update/<int:id>", views.feedback_update, name="feedback-update"),
     path(
         "bulk-feedback-create",
         cbvs.BulkFeedbackFormView.as_view(),
@@ -188,30 +317,40 @@ urlpatterns = [
         name="question-update",
     ),
     path("question-delete/<int:id>", views.question_delete, name="question-delete"),
+    # path(
+    #     "question-template-creation",
+    #     views.question_template_creation,
+    #     name="question-template-creation",
+    # ),
     path(
         "question-template-creation",
-        views.question_template_creation,
+        question_template.QuestionTemplateFormView.as_view(),
         name="question-template-creation",
     ),
-    path(
-        "question-template-view/",
-        views.question_template_view,
-        name="question-template-view",
-    ),
-    path(
-        "question-template-hx-view",
-        views.question_template_hx_view,
-        name="question-template-hx-view",
-    ),
+    # path(
+    #     "question-template-view/",
+    #     views.question_template_view,
+    #     name="question-template-view",
+    # ),
+    # path(
+    #     "question-template-hx-view",
+    #     views.question_template_hx_view,
+    #     name="question-template-hx-view",
+    # ),
     path(
         "question-template-detailed-view/<int:template_id>",
         views.question_template_detailed_view,
         name="question-template-detailed-view",
         kwargs={"model": models.QuestionTemplate},
     ),
+    # path(
+    #     "question-template-update/<int:template_id>/",
+    #     views.question_template_update,
+    #     name="question-template-update",
+    # ),
     path(
-        "question-template-update/<int:template_id>/",
-        views.question_template_update,
+        "question-template-update/<int:pk>/",
+        question_template.QuestionTemplateFormView.as_view(),
         name="question-template-update",
     ),
     path(
@@ -219,13 +358,22 @@ urlpatterns = [
         views.question_template_delete,
         name="question-template-delete",
     ),
-    path("period-create", views.period_create, name="period-create"),
-    path("period-view", views.period_view, name="period-view"),
-    path("period-hx-view", views.period_hx_view, name="period-hx-view"),
+    # path("period-create", views.period_create, name="period-create"),
+    path("period-create", period.PeriodFormView.as_view(), name="period-create"),
+    # path("period-view/", views.period_view, name="period-view"),
+    # path("period-hx-view", views.period_hx_view, name="period-hx-view"),
     path("period-delete/<int:period_id>", views.period_delete, name="period-delete"),
-    path("period-update/<int:period_id>", views.period_update, name="period-update"),
+    # path("period-update/<int:period_id>", views.period_update, name="period-update"),
+    path(
+        "period-update/<int:pk>", period.PeriodFormView.as_view(), name="period-update"
+    ),
     path("period-change", views.period_change, name="period-change"),
     path("dashboard-view", views.dashboard_view, name="dashboard-view"),
+    path(
+        "dashboard-risk-objectives",
+        dashboard.DasboardObjectivesRisk.as_view(),
+        name="dashboard-risk-objectives",
+    ),
     path(
         "dashboard-objective-status",
         views.dashboard_objective_status,
@@ -276,14 +424,24 @@ urlpatterns = [
         views.objective_select_filter,
         name="objective-select-filter",
     ),
+    # path(
+    #     "add-anonymous-feedback",
+    #     views.anonymous_feedback_add,
+    #     name="add-anonymous-feedback",
+    # ),
     path(
         "add-anonymous-feedback",
-        views.anonymous_feedback_add,
+        feedback.AddAnonymousFeedbackForm.as_view(),
         name="add-anonymous-feedback",
     ),
+    # path(
+    #     "edit-anonymous-feedback/<int:obj_id>/",
+    #     views.edit_anonymous_feedback,
+    #     name="edit-anonymous-feedback",
+    # ),
     path(
-        "edit-anonymous-feedback/<int:obj_id>/",
-        views.edit_anonymous_feedback,
+        "edit-anonymous-feedback/<int:pk>/",
+        feedback.AddAnonymousFeedbackForm.as_view(),
         name="edit-anonymous-feedback",
     ),
     path(
@@ -301,26 +459,41 @@ urlpatterns = [
         views.view_single_anonymous_feedback,
         name="single-anonymous-feedback-view",
     ),
+    # path(
+    #     "view-employee-objective/<int:emp_obj_id>/",
+    #     views.view_employee_objective,
+    #     name="view-employee-objective",
+    # ),
     path(
-        "view-employee-objective/<int:emp_obj_id>/",
-        views.view_employee_objective,
+        "view-employee-objective/<int:pk>/",
+        objectives.EmployeeObjectiveDetailView.as_view(),
         name="view-employee-objective",
     ),
+    # path(
+    #     "create-employee-objective/",
+    #     views.create_employee_objective,
+    #     name="create-employee-objective",
+    # ),
     path(
         "create-employee-objective/",
-        views.create_employee_objective,
+        objectives.CreateEmployeeObjectiveForm.as_view(),
         name="create-employee-objective",
     ),
+    path(
+        "update-employee-objective/<int:pk>/",
+        objectives.CreateEmployeeObjectiveForm.as_view(),
+        name="update-employee-objective",
+    ),
     path(
         "get-objective-keyresult/",
         views.get_objective_keyresults,
         name="get-objective-keyresult",
     ),
-    path(
-        "update-employee-objective/<int:emp_obj_id>/",
-        views.update_employee_objective,
-        name="update-employee-objective",
-    ),
+    # path(
+    #     "update-employee-objective/<int:emp_obj_id>/",
+    #     views.update_employee_objective,
+    #     name="update-employee-objective",
+    # ),
     path(
         "archive-employee-objective/<int:emp_obj_id>/",
         views.archive_employee_objective,
@@ -336,14 +509,24 @@ urlpatterns = [
         views.change_employee_objective_status,
         name="change-employee-objective-status",
     ),
+    # path(
+    #     "employee-key-result-creation/<int:emp_obj_id>",
+    #     views.employee_keyresult_creation,
+    #     name="employee-key-result-creation",
+    # ),
     path(
         "employee-key-result-creation/<int:emp_obj_id>",
-        views.employee_keyresult_creation,
+        objectives.CreateEmployeeKeyResultFormView.as_view(),
         name="employee-key-result-creation",
     ),
+    # path(
+    #     "employee-key-result-update/<int:kr_id>",
+    #     views.employee_keyresult_update,
+    #     name="employee-key-result-update",
+    # ),
     path(
-        "employee-key-result-update/<int:kr_id>",
-        views.employee_keyresult_update,
+        "employee-key-result-update/<int:pk>/",
+        objectives.CreateEmployeeKeyResultFormView.as_view(),
         name="employee-key-result-update",
     ),
     path(
@@ -361,16 +544,26 @@ urlpatterns = [
         views.key_result_current_value_update,
         name="key-result-current-value-update",
     ),
+    # path(
+    #     "view-meetings",
+    #     views.view_meetings,
+    #     name="view-meetings",
+    # ),
+    # path(
+    #     "create-meeting",
+    #     views.create_meetings,
+    #     name="create-meeting",
+    # ),
     path("get-keyresult-data", views.get_keyresult_data, name="get-keyresult-data"),
     path(
-        "view-meetings/",
-        views.view_meetings,
-        name="view-meetings",
+        "create-meeting",
+        meetings.MeetingsFormView.as_view(),
+        name="create-meeting",
     ),
     path(
-        "create-meeting",
-        views.create_meetings,
-        name="create-meeting",
+        "update-meeting/<int:pk>/",
+        meetings.MeetingsFormView.as_view(),
+        name="update-meeting",
     ),
     path(
         "meetings-delete/<int:obj_id>/",
@@ -388,9 +581,14 @@ urlpatterns = [
         views.filter_meetings,
         name="filter-meeting",
     ),
+    # path(
+    #     "add-response/<int:id>/",
+    #     views.add_response,
+    #     name="add-response",
+    # ),
     path(
-        "add-response/<int:obj_id>/",
-        views.add_response,
+        "add-response/<int:id>/",
+        meetings.MeetingResponseFormView.as_view(),
         name="add-response",
     ),
     path(
@@ -428,10 +626,88 @@ urlpatterns = [
         views.meeting_employee_remove,
         name="meeting-employee-remove",
     ),
-    path("performance-tab/<int:emp_id>", views.performance_tab, name="performance-tab"),
+    path(
+        "objective-list-view/",
+        objectives.ObjectivesView.as_view(),
+        name="objective-list-view",
+    ),
+    path(
+        "list-objectives-view/",
+        objectives.ObjectivesList.as_view(),
+        name="list-objectives-view",
+    ),
+    path(
+        "tab-objectives-view/",
+        objectives.ObjectivesTab.as_view(),
+        name="tab-objectives-view",
+    ),
+    path(
+        "nav-objectives-view/",
+        objectives.ObjectivesNav.as_view(),
+        name="nav-objectives-view",
+    ),
+    path(
+        "my-objectives-view-tab/",
+        objectives.MyObjectives.as_view(),
+        name="my-objectives-view-tab",
+    ),
+    path(
+        "all-objectives-view-tab/",
+        objectives.AllObjectives.as_view(),
+        name="all-objectives-view-tab",
+    ),
+    path("view-meetings/", meetings.MeetingsView.as_view(), name="view-meetings"),
+    path("meetings-list/", meetings.MeetingsList.as_view(), name="meetings-list"),
+    path("meetings-nav/", meetings.MeetingsNav.as_view(), name="meetings-nav"),
+    path(
+        "meetings-detail-view/<int:pk>/",
+        meetings.MeetingsDetailedView.as_view(),
+        name="meetings-detail-view",
+    ),
+    path(
+        "question-template-view/",
+        question_template.QuestionTemplateView.as_view(),
+        name="question-template-view",
+    ),
+    path(
+        "question-template-hx-view/",
+        question_template.QuestionTemplateList.as_view(),
+        name="question-template-hx-view",
+    ),
+    path(
+        "nav-question-template/",
+        question_template.QuestionTemplateNav.as_view(),
+        name="nav-question-template",
+    ),
+    path(
+        "period-view/",
+        period.PeriodView.as_view(),
+        name="period-view",
+    ),
+    path(
+        "period-hx-view/",
+        period.PeriodList.as_view(),
+        name="period-hx-view",
+    ),
+    path(
+        "nav-period/",
+        period.PeriodNav.as_view(),
+        name="nav-period",
+    ),
+    path(
+        "period-detail-view/<int:pk>/",
+        period.PeriodDetailView.as_view(),
+        name="period-detail-view",
+    ),
+    path("performance-tab/<int:pk>", views.performance_tab, name="performance-tab"),
+    # path(
+    #     "dashboard-feedback-answer",
+    #     views.dashboard_feedback_answer,
+    #     name="dashboard-feedback-answer",
+    # ),
     path(
         "dashboard-feedback-answer",
-        views.dashboard_feedback_answer,
+        dashboard.DashboardFeedbackView.as_view(),
         name="dashboard-feedback-answer",
     ),
     # ===========bonus point setting============
diff --git a/pms/views.py b/pms/views.py
index bb429eb42..132211534 100644
--- a/pms/views.py
+++ b/pms/views.py
@@ -509,7 +509,10 @@ def objective_delete(request, obj_id):
             )
     except EmployeeObjective.DoesNotExist:
         messages.error(request, _("Objective not found."))
-    return redirect(objective_list_view)
+    # return redirect(reverse("objective-list-view"))
+    return HttpResponse(
+        "<script> $('.reload-record').click(); $('#reloadMessagesButton').click();</script>"
+    )
 
 
 @login_required
@@ -528,7 +531,10 @@ def objective_manager_remove(request, obj_id, manager_id):
     """
     objective = get_object_or_404(Objective, id=obj_id)
     objective.managers.remove(manager_id)
-    return HttpResponse("")
+    messages.success(request, _("Manger removed successfully."))
+    return HttpResponse(
+        "<script> $('.reload-record').click(); $('#reloadMessagesButton').click();</script>"
+    )
 
 
 @login_required
@@ -547,7 +553,10 @@ def key_result_remove(request, obj_id, kr_id):
     """
     objective = get_object_or_404(Objective, id=obj_id)
     objective.key_result_id.remove(kr_id)
-    return HttpResponse("")
+    messages.success(request, _("Key result removed successfully."))
+    return HttpResponse(
+        "<script> $('.reload-record').click(); $('#reloadMessagesButton').click();</script>"
+    )
 
 
 @login_required
@@ -569,8 +578,10 @@ def assignees_remove(request, obj_id, emp_id):
         EmployeeObjective, employee_id=emp_id, objective_id=obj_id
     ).delete()
     objective.assignees.remove(emp_id)
-
-    return HttpResponse()
+    messages.success(request, _("Assignee removed successfully."))
+    return HttpResponse(
+        "<script>$('.reload-record').click();$('#reloadMessagesButton').click();</script>"
+    )
 
 
 def objective_filter_pagination(request, objective_own):
@@ -856,7 +867,7 @@ def emp_objective_search(request, obj_id):
     search_val = request.GET.get("search")
     if search_val is None:
         search_val = ""
-    emp_objectives = EmployeeObjectiveFilter(request.GET, emp_objectives).qs
+    emp_objectives = EmployeeObjectiveFilter(request.GET, emp_objectives).qs.distinct()
     if not request.GET.get("archive") == "true":
         emp_objectives = emp_objectives.filter(archive=False)
     previous_data = request.GET.urlencode()
@@ -892,11 +903,11 @@ def kr_table_view(request, emp_objective_id):
     """
     emp_objective = EmployeeObjective.objects.get(id=emp_objective_id)
     krs = emp_objective.employee_key_result.all()
+    krs = KeyResultFilter(request.GET, queryset=krs).qs.distinct()
     krs = Paginator(krs, get_pagination())
     krs_page = request.GET.get("krs_page")
     krs = krs.get_page(krs_page)
     previous_data = request.GET.urlencode()
-
     context = {
         "krs": krs,
         "key_result_status": EmployeeKeyResult.STATUS_CHOICES,
@@ -1029,7 +1040,9 @@ def objective_archive(request, id):
         objective.archive = True
         objective.save()
         messages.info(request, _("Objective archived successfully!."))
-    return redirect(f"/pms/objective-list-view?{request.environ['QUERY_STRING']}")
+    return HttpResponse(
+        "<script> $('.reload-record').click(); $('#reloadMessagesButton').click();</script>"
+    )
 
 
 @login_required
@@ -1165,6 +1178,10 @@ def archive_employee_objective(request, emp_obj_id):
         emp_objective.archive = True
         emp_objective.save()
         messages.success(request, _("Objective archived successfully!."))
+    if request.GET.get("detail_view"):
+        return HttpResponse(
+            "<script> $('.reload-record').click(); $('#reloadMessagesButton').click();</script>"
+        )
     return HttpResponseRedirect(request.META.get("HTTP_REFERER", "/"))
 
 
@@ -1208,6 +1225,19 @@ def change_employee_objective_status(request):
     """
     emp_obj = request.GET.get("empObjId")
     emp_objective = EmployeeObjective.objects.filter(id=emp_obj).first()
+    if not (
+        request.user.has_perm("pms.change_objective")
+        or request.user.has_perm("pms.change_employeeobjective")
+        or request.user.has_perm("pms.change_employeekeyresult")
+        or request.user.employee_get in emp_objective.objective_id.managers.all()
+        or (
+            emp_objective.objective_id.self_employee_progress_update
+            and (emp_objective.employee_id == request.user.employee_get)
+        )
+    ):
+        messages.info(request, "You dont have permission")
+        return HttpResponse("<script>$('#reloadMessagesButton').click();</script>")
+
     status = request.GET.get("status")
     if not (
         request.user.has_perm("pms.change_objective")
@@ -1473,11 +1503,13 @@ def feedback_creation(request):
         it will return feedback creation html.
     """
     form = FeedbackForm()
+    form.fields["manager_id"].required = False
     context = {
         "feedback_form": form,
     }
     if request.method == "POST":
         form = FeedbackForm(request.POST)
+        form.fields["manager_id"].required = False
         if form.is_valid():
             employees = form.data.getlist("subordinate_id")
             if key_result_ids := request.POST.getlist("employee_key_results_id"):
@@ -1492,7 +1524,7 @@ def feedback_creation(request):
 
             messages.success(request, _("Feedback created successfully."))
             send_feedback_notifications(request, feedback=instance)
-            return redirect(feedback_list_view)
+            return redirect(reverse("feedback-view"))
         else:
             context["feedback_form"] = form
     return render(request, "feedback/feedback_creation.html", context)
@@ -1853,12 +1885,12 @@ def feedback_answer_get(request, id, **kwargs):
     # check if the feedback start_date is not started yet
     if feedback.start_date > datetime.date.today():
         messages.info(request, _("Feedback not started yet"))
-        return redirect(feedback_list_view)
+        return redirect(reverse("feedback-view"))
 
     # check if the feedback end_date is not over
     if feedback.end_date and feedback.end_date < datetime.date.today():
-        messages.info(request, _("Feedback is due"))
-        return redirect(feedback_list_view)
+        messages.info(request, _("Feedback is due/closed"))
+        return redirect(reverse("feedback-view"))
     user = request.user
     employee = Employee.objects.filter(employee_user_id=user).first()
     answer = Answer.objects.filter(feedback_id=feedback, employee_id=employee)
@@ -1874,7 +1906,7 @@ def feedback_answer_get(request, id, **kwargs):
     )
     if not employee in feedback_employees:
         messages.info(request, _("You are not allowed to answer"))
-        return redirect(feedback_list_view)
+        return redirect(reverse("feedback-view"))
 
     # Employee does not have an answer object
     for employee in feedback_employees:
@@ -1888,7 +1920,7 @@ def feedback_answer_get(request, id, **kwargs):
     # Check if the feedback has already been answered
     if answer:
         messages.info(request, _("Feedback already answered"))
-        return redirect(feedback_list_view)
+        return redirect(reverse("feedback-view"))
 
     context = {
         "questions": questions,
@@ -1941,7 +1973,7 @@ def feedback_answer_post(request, id):
             _("Feedback %(review_cycle)s has been answered successfully!.")
             % {"review_cycle": feedback.review_cycle},
         )
-        return redirect(feedback_list_view)
+        return redirect(reverse("feedback-view"))
 
 
 @login_required
@@ -1964,7 +1996,7 @@ def feedback_answer_view(request, id, **kwargs):
 
     if not answers:
         messages.info(request, _("Feedback is not answered yet"))
-        return redirect(feedback_list_view)
+        return redirect(reverse("feedback-view"))
 
     context = {
         "answers": answers,
@@ -2005,13 +2037,13 @@ def feedback_delete(request, id):
                 _("You can't delete feedback %(review_cycle)s with status %(status)s")
                 % {"review_cycle": feedback.review_cycle, "status": feedback.status},
             )
-            return redirect(feedback_list_view)
+            return redirect(reverse("feedback-view"))
 
     except Feedback.DoesNotExist:
         messages.error(request, _("Feedback not found."))
     except ProtectedError:
         messages.error(request, _("Related entries exists"))
-    return redirect(feedback_list_view)
+    return redirect(reverse("feedback-view"))
 
 
 @login_required
@@ -2099,6 +2131,7 @@ def feedback_archive(request, id):
     """
 
     feedback = Feedback.objects.get(id=id)
+
     if feedback.archive:
         feedback.archive = False
         feedback.save()
@@ -2107,7 +2140,7 @@ def feedback_archive(request, id):
         feedback.archive = True
         feedback.save()
         messages.info(request, _("Feedback archived successfully!."))
-    return redirect(feedback_list_view)
+    return redirect(reverse("feedback-view"))
 
 
 @login_required
@@ -2585,6 +2618,7 @@ def period_delete(request, period_id):
     Returns:
         it will redirect to period_view.
     """
+    target = request.META.get("HTTP_HX_TARGET")
     try:
         obj_period = Period.objects.get(id=period_id)
         obj_period.delete()
@@ -2593,6 +2627,8 @@ def period_delete(request, period_id):
         messages.error(request, _("Period not found."))
     except ProtectedError:
         messages.error(request, _("Related entries exists"))
+    if target == "listContainer":
+        return HttpResponse("<script>window.location.reload();</script>")
     return redirect("period-hx-view")
 
 
@@ -2840,6 +2876,7 @@ def feedback_bulk_archive(request):
     """
     This method is used to archive/un-archive bulk feedbacks
     """
+
     ids = request.POST["ids"]
     announy_ids = request.POST["announy_ids"]
     ids = json.loads(ids)
@@ -2879,6 +2916,8 @@ def feedback_bulk_delete(request):
     """
     ids = request.POST["ids"]
     ids = json.loads(ids)
+    announy_ids = request.POST["announy_ids"]
+    announy_ids = json.loads(announy_ids)
     for feedback_id in ids:
         try:
             feedback = Feedback.objects.get(id=feedback_id)
@@ -2903,6 +2942,17 @@ def feedback_bulk_delete(request):
 
         except Feedback.DoesNotExist:
             messages.error(request, _("Feedback not found."))
+    for feedback_id in announy_ids:
+        feedback_id = AnonymousFeedback.objects.get(id=feedback_id)
+        message = _("Deleted")
+        # feedback_id.archive = is_active
+        feedback_id.delete()
+        messages.success(
+            request,
+            _("{feedback} is {message}").format(
+                feedback=feedback_id.feedback_subject, message=message
+            ),
+        )
     return JsonResponse({"message": "Success"})
 
 
@@ -3119,7 +3169,7 @@ def delete_anonymous_feedback(request, obj_id):
     except ProtectedError:
         messages.error(request, _("Related entries exists"))
 
-    return redirect(feedback_list_view)
+    return redirect(reverse("feedback-view"))
 
 
 @login_required
@@ -3271,7 +3321,7 @@ def delete_employee_keyresult(request, kr_id):
     # objective.assignees.remove(employee)
     messages.success(request, _("Objective deleted successfully!."))
     if request.GET.get("dashboard"):
-        return redirect(f"/pms/dashboard-view")
+        return HttpResponse("<script>$('#reloadMessagesButton').click();</script>")
     return redirect(f"/pms/objective-detailed-view/{objective.id}")
 
 
@@ -3285,13 +3335,27 @@ def employee_keyresult_update_status(request, kr_id):
             redirect to detailed of employee objective
     """
     emp_kr = EmployeeKeyResult.objects.get(id=kr_id)
-    status = request.POST.get("key_result_status")
-    emp_kr.status = status
-    emp_kr.save()
-    messages.success(request, _("Key result sattus changed to {}.").format(status))
-    return redirect(
-        f"/pms/kr-table-view/{emp_kr.employee_objective_id.id}?&objective_id={emp_kr.employee_objective_id.objective_id.id}"
-    )
+    if (
+        request.user.has_perm("pms.change_objective")
+        or request.user.has_perm("pms.change_employeeobjective")
+        or request.user.has_perm("pms.change_employeekeyresult")
+        or request.user.employee_get
+        in emp_kr.employee_objective_id.objective_id.managers.all()
+        or (
+            emp_kr.employee_objective_id.objective_id.self_employee_progress_update
+            and (emp_kr.employee_id == request.user.employee_get)
+        )
+    ):
+        status = request.POST.get("key_result_status")
+        emp_kr.status = status
+        emp_kr.save()
+        messages.success(request, _("Key result sattus changed to {}.").format(status))
+        return redirect(
+            f"/pms/kr-table-view/{emp_kr.employee_objective_id.id}?&objective_id={emp_kr.employee_objective_id.objective_id.id}"
+        )
+
+    messages.info(request, "You dont have permission")
+    return HttpResponse("<script>window.location.reload()</script>")
 
 
 @login_required
@@ -3317,13 +3381,25 @@ def key_result_current_value_update(request):
                 )
             )
         ):
+            current_value = max(0, current_value)
             emp_kr.current_value = current_value
             emp_kr.save()
             emp_kr.employee_objective_id.update_objective_progress()
-            return JsonResponse({"type": "sucess"})
+            messages.success(request, "Value updated")
         else:
-            messages.info(request, "You dont have permission")
-    except:
+            messages.info(
+                request, "You dont have permission to update the current value"
+            )
+        return JsonResponse(
+            {
+                "type": "sucess",
+                "progress": emp_kr.employee_objective_id.progress_percentage,
+                "kr_progress": emp_kr.progress_percentage,
+                "pk": emp_kr.employee_objective_id.pk,
+            }
+        )
+    except Exception as e:
+        print(e)
         return JsonResponse({"type": "error"})
 
 
@@ -3546,7 +3622,7 @@ def meeting_employee_remove(request, meet_id, employee_id):
     messages.success(
         request, _("Employee has been successfully removed from the meeting.")
     )
-    return HttpResponse("")
+    return HttpResponse("<script>$('#reloadMessagesButton').click()</script>")
 
 
 @login_required
@@ -3679,7 +3755,7 @@ def meeting_answer_post(request, id):
             _("Questions for meeting %(meeting)s has been answered successfully!.")
             % {"meeting": meeting.title},
         )
-        return redirect(view_meetings)
+        return redirect(reverse("view-meetings"))
 
 
 @login_required
@@ -3746,7 +3822,7 @@ def meeting_single_view(request, id):
 @login_required
 @hx_request_required
 @owner_can_enter("pms.view_feedback", Employee)
-def performance_tab(request, emp_id):
+def performance_tab(request, pk):
     """
     This function is used to view performance tab of an employee in employee individual
     & profile view.
@@ -3758,7 +3834,7 @@ def performance_tab(request, emp_id):
     Returns: return performance-tab template
 
     """
-    feedback_own = Feedback.objects.filter(employee_id=emp_id, archive=False)
+    feedback_own = Feedback.objects.filter(employee_id=pk, archive=False)
 
     today = datetime.datetime.today()
     context = {
diff --git a/project/cbv/dashboard.py b/project/cbv/dashboard.py
index 40ccc2220..5c8deee8d 100644
--- a/project/cbv/dashboard.py
+++ b/project/cbv/dashboard.py
@@ -10,7 +10,6 @@ from django.db.models import Count, Q
 from django.db.models.query import QuerySet
 from django.urls import resolve, reverse
 from django.utils.decorators import method_decorator
-from django.utils.functional import cached_property
 from django.utils.translation import gettext_lazy as _
 
 from base.methods import get_subordinates
@@ -71,6 +70,16 @@ class ProjectDetailView(HorillaDetailedView):
     model = Project
     title = _("Details")
     header = {"title": "title", "subtitle": "", "avatar": "get_avatar"}
+    body = [
+        (_("Manager"), "manager"),
+        (_("Members"), "get_members"),
+        (_("Status"), "status_column"),
+        (_("No of Tasks"), "task_count"),
+        (_("Start date"), "start_date"),
+        (_("End date"), "end_date"),
+        (_("Document"), "get_document_html"),
+        (_("Description"), "description"),
+    ]
 
     def __init__(self, **kwargs: Any) -> None:
         super().__init__(**kwargs)
@@ -97,17 +106,3 @@ class ProjectDetailView(HorillaDetailedView):
         queryset = super().get_queryset()
         queryset = queryset.annotate(task_count=Count("task"))
         return queryset
-
-    @cached_property
-    def body(self):
-        get_field = self.model()._meta.get_field
-        return [
-            (get_field("managers").verbose_name, "get_managers"),
-            (get_field("members").verbose_name, "get_members"),
-            (get_field("status").verbose_name, "get_status_display"),
-            (_("No of Tasks"), "task_count"),
-            (get_field("start_date").verbose_name, "start_date"),
-            (get_field("end_date").verbose_name, "end_date"),
-            (get_field("document").verbose_name, "get_document_html"),
-            (get_field("description").verbose_name, "description"),
-        ]
diff --git a/project/cbv/projects.py b/project/cbv/projects.py
index f258e90f6..1890fc552 100644
--- a/project/cbv/projects.py
+++ b/project/cbv/projects.py
@@ -56,12 +56,7 @@ class ProjectsNavView(HorillaNavView):
     Nav bar
     """
 
-    filter_form_context_name = "form"
-    filter_instance = ProjectFilter()
-    search_swap_target = "#listContainer"
-    group_by_fields = ["status", "is_active"]
     template_name = "cbv/projects/project_nav.html"
-    filter_body_template = "cbv/projects/filter.html"
 
     def __init__(self, **kwargs: Any) -> None:
         super().__init__(**kwargs)
@@ -144,6 +139,16 @@ class ProjectsNavView(HorillaNavView):
                                 hx-get="{reverse('create-project')}"
                                 """
 
+    group_by_fields = [
+        ("status", _("Status")),
+        ("is_active", _("Is active")),
+    ]
+    nav_title = Project._meta.verbose_name_plural
+    filter_instance = ProjectFilter()
+    filter_form_context_name = "form"
+    filter_body_template = "cbv/projects/filter.html"
+    search_swap_target = "#listContainer"
+
 
 @method_decorator(login_required, name="dispatch")
 @method_decorator(
@@ -154,9 +159,6 @@ class ProjectsList(HorillaListView):
     Projects list view
     """
 
-    model = Project
-    filter_class = ProjectFilter
-
     def get_queryset(self):
         queryset = super().get_queryset()
         if not self.request.user.has_perm("project.view_project"):
@@ -176,26 +178,26 @@ class ProjectsList(HorillaListView):
 
     @cached_property
     def columns(self):
-        get_field = self.model()._meta.get_field
+        instance = self.model()
         return [
-            (get_field("title").verbose_name, "title"),
-            (get_field("managers").verbose_name, "get_managers"),
-            (get_field("members").verbose_name, "get_members"),
-            (get_field("status").verbose_name, "get_status_display"),
-            (get_field("start_date").verbose_name, "start_date"),
-            (get_field("end_date").verbose_name, "end_date"),
-            (get_field("document").verbose_name, "get_document_html"),
-            (get_field("description").verbose_name, "get_description"),
+            (instance._meta.get_field("title").verbose_name, "title"),
+            (instance._meta.get_field("managers").verbose_name, "get_managers"),
+            (instance._meta.get_field("members").verbose_name, "get_members"),
+            (instance._meta.get_field("status").verbose_name, "status_column"),
+            (instance._meta.get_field("start_date").verbose_name, "start_date"),
+            (instance._meta.get_field("end_date").verbose_name, "end_date"),
+            (instance._meta.get_field("document").verbose_name, "get_document_html"),
+            (instance._meta.get_field("description").verbose_name, "get_description"),
         ]
 
-    @cached_property
-    def sortby_mapping(self):
-        get_field = self.model()._meta.get_field
-        return [
-            (get_field("title").verbose_name, "title"),
-            (get_field("start_date").verbose_name, "start_date"),
-            (get_field("end_date").verbose_name, "end_date"),
-        ]
+    model = Project
+    filter_class = ProjectFilter
+
+    sortby_mapping = [
+        ("Project", "title"),
+        ("Start Date", "start_date"),
+        ("End Date", "end_date"),
+    ]
 
     row_status_indications = [
         (
@@ -279,8 +281,8 @@ class ProjectFormView(HorillaFormView):
     form view for create project
     """
 
-    model = Project
     form_class = ProjectForm
+    model = Project
     new_display_title = _("Create") + " " + model._meta.verbose_name
 
     def __init__(self, **kwargs):
@@ -391,7 +393,7 @@ class ProjectCardView(HorillaCardView):
     details = {
         "image_src": "get_avatar",
         "title": "{get_task_badge_html}",
-        "subtitle": "Status : {get_status_display} <br> Start date : {start_date} <br>End date : {end_date}",
+        "subtitle": "Status : {status_column} <br> Start date : {start_date} <br>End date : {end_date}",
     }
     card_status_class = "status-{status}"
 
diff --git a/project/cbv/tasks.py b/project/cbv/tasks.py
index d729f0560..7d781cde0 100644
--- a/project/cbv/tasks.py
+++ b/project/cbv/tasks.py
@@ -12,7 +12,6 @@ from django.http import HttpResponse
 from django.shortcuts import render
 from django.urls import reverse
 from django.utils.decorators import method_decorator
-from django.utils.functional import cached_property
 from django.utils.translation import gettext_lazy as _
 
 from base.methods import get_subordinates
@@ -53,7 +52,6 @@ class TaskListView(HorillaListView):
 
     model = Task
     filter_class = TaskAllFilter
-    action_method = "actions"
 
     def __init__(self, **kwargs: Any) -> None:
         super().__init__(**kwargs)
@@ -83,30 +81,26 @@ class TaskListView(HorillaListView):
             )
         return queryset.distinct()
 
-    @cached_property
-    def columns(self):
-        get_field = self.model()._meta.get_field
-        return [
-            (get_field("title").verbose_name, "title"),
-            (get_field("project").verbose_name, "project"),
-            (get_field("stage").verbose_name, "stage"),
-            (get_field("task_managers").verbose_name, "get_managers"),
-            (get_field("task_members").verbose_name, "get_members"),
-            (get_field("end_date").verbose_name, "end_date"),
-            (get_field("status").verbose_name, "get_status_display"),
-            (get_field("description").verbose_name, "get_description"),
-        ]
+    columns = [
+        (_("Task"), "title"),
+        (_("Project"), "project"),
+        (_("Stage"), "stage"),
+        (_("Mangers"), "get_managers"),
+        (_("Members"), "get_members"),
+        (_("End Date"), "end_date"),
+        (_("Status"), "status_column"),
+        (_("Description"), "description"),
+    ]
 
-    @cached_property
-    def sortby_mapping(self):
-        get_field = self.model()._meta.get_field
-        return [
-            (get_field("title").verbose_name, "title"),
-            (get_field("project").verbose_name, "project__title"),
-            (get_field("stage").verbose_name, "stage"),
-            (get_field("end_date").verbose_name, "end_date"),
-            (get_field("status").verbose_name, "status"),
-        ]
+    sortby_mapping = [
+        ("Task", "title"),
+        ("Project", "project__title"),
+        ("Stage", "stage"),
+        ("End Date", "end_date"),
+        ("Status", "status"),
+    ]
+
+    action_method = "actions"
 
     row_status_indications = [
         (
@@ -170,15 +164,11 @@ class TasksNavBar(HorillaNavView):
     navbar of teh page
     """
 
-    group_by_fields = [
-        "project",
-        "stage",
-        "status",
-    ]
-    filter_form_context_name = "form"
+    nav_title = _("Tasks")
     filter_instance = TaskAllFilter()
-    search_swap_target = "#listContainer"
+    filter_form_context_name = "form"
     filter_body_template = "cbv/tasks/task_filter.html"
+    search_swap_target = "#listContainer"
 
     def __init__(self, **kwargs: Any) -> None:
         super().__init__(**kwargs)
@@ -247,6 +237,12 @@ class TasksNavBar(HorillaNavView):
                 },
             ]
 
+    group_by_fields = [
+        ("project", _("Project")),
+        ("stage", _("Stage")),
+        ("status", _("Status")),
+    ]
+
 
 @method_decorator(login_required, name="dispatch")
 class TaskCreateForm(HorillaFormView):
@@ -254,10 +250,10 @@ class TaskCreateForm(HorillaFormView):
     Form view for create and update tasks
     """
 
-    model = Task
     form_class = TaskAllForm
+    model = Task
     template_name = "cbv/tasks/task_form.html"
-    new_display_title = _("Create") + " " + model._meta.verbose_name
+    new_display_title = _("Create Task")
 
     def __init__(self, **kwargs: Any) -> None:
         super().__init__(**kwargs)
@@ -411,23 +407,22 @@ class TaskDetailView(HorillaDetailedView):
 
     model = Task
     title = _("Task Details")
-    action_method = "detail_view_actions"
+
     header = {"title": "title", "subtitle": "project", "avatar": "get_avatar"}
 
-    @cached_property
-    def body(self):
-        get_field = self.model()._meta.get_field
-        return [
-            (get_field("title").verbose_name, "title"),
-            (get_field("project").verbose_name, "project"),
-            (get_field("stage").verbose_name, "stage"),
-            (get_field("task_managers").verbose_name, "get_managers"),
-            (get_field("task_members").verbose_name, "get_members"),
-            (get_field("status").verbose_name, "get_status_display"),
-            (get_field("end_date").verbose_name, "end_date"),
-            (get_field("description").verbose_name, "description"),
-            (get_field("document").verbose_name, "document_col", True),
-        ]
+    body = [
+        (_("Task"), "title"),
+        (_("Project"), "project"),
+        (_("Stage"), "stage"),
+        (_("Task Mangers"), "get_managers"),
+        (_("Task Members"), "get_members"),
+        (_("Status"), "status_column"),
+        (_("End Date"), "end_date"),
+        (_("Description"), "description"),
+        (_("Document"), "document_col", True),
+    ]
+
+    action_method = "detail_view_actions"
 
 
 @method_decorator(login_required, name="dispatch")
diff --git a/project/cbv/timesheet.py b/project/cbv/timesheet.py
index 296b6ae95..57d9634c3 100644
--- a/project/cbv/timesheet.py
+++ b/project/cbv/timesheet.py
@@ -11,7 +11,6 @@ from django.http import HttpResponse
 from django.shortcuts import render
 from django.urls import resolve, reverse
 from django.utils.decorators import method_decorator
-from django.utils.functional import cached_property
 from django.utils.translation import gettext_lazy as _
 
 from employee.models import Employee
@@ -53,22 +52,7 @@ class TimeSheetNavView(HorillaNavView):
     Nav bar
     """
 
-    filter_form_context_name = "form"
-    filter_instance = TimeSheetFilter()
-    search_swap_target = "#listContainer"
     template_name = "cbv/timesheet/timesheet_nav.html"
-    filter_body_template = "cbv/timesheet/filter.html"
-    group_by_fields = [
-        "employee_id",
-        "project_id",
-        "date",
-        "status",
-        "employee_id__employee_work_info__reporting_manager_id",
-        "employee_id__employee_work_info__department_id",
-        "employee_id__employee_work_info__job_position_id",
-        "employee_id__employee_work_info__employee_type_id",
-        "employee_id__employee_work_info__company_id",
-    ]
 
     def __init__(self, **kwargs: Any) -> None:
         super().__init__(**kwargs)
@@ -121,6 +105,27 @@ class TimeSheetNavView(HorillaNavView):
                                 hx-get="{reverse('create-time-sheet')}"
                                 """
 
+    group_by_fields = [
+        ("employee_id", _("Employee")),
+        ("project_id", _("Project")),
+        ("date", _("Date")),
+        ("status", _("Status")),
+        (
+            "employee_id__employee_work_info__reporting_manager_id",
+            _("Reporting Manager"),
+        ),
+        ("employee_id__employee_work_info__department_id", _("Department")),
+        ("employee_id__employee_work_info__job_position_id", _("Job Position")),
+        ("employee_id__employee_work_info__employee_type_id", _("Employement Type")),
+        ("employee_id__employee_work_info__company_id", _("Company")),
+    ]
+
+    nav_title = _("Time Sheet")
+    filter_instance = TimeSheetFilter()
+    filter_form_context_name = "form"
+    filter_body_template = "cbv/timesheet/filter.html"
+    search_swap_target = "#listContainer"
+
 
 @method_decorator(login_required, name="dispatch")
 @method_decorator(
@@ -131,9 +136,6 @@ class TimeSheetList(HorillaListView):
     Time sheet list view
     """
 
-    model = TimeSheet
-    filter_class = TimeSheetFilter
-
     def get_queryset(self):
         queryset = super().get_queryset()
         if not self.request.user.has_perm("project.view_timesheet"):
@@ -151,37 +153,26 @@ class TimeSheetList(HorillaListView):
         self.search_url = reverse("time-sheet-list")
         self.action_method = "actions"
 
-    @cached_property
-    def columns(self):
-        get_field = self.model()._meta.get_field
-        return [
-            (
-                get_field("employee_id").verbose_name,
-                "employee_id",
-                "employee_id__get_avatar",
-            ),
-            (get_field("project_id").verbose_name, "project_id"),
-            (get_field("task_id").verbose_name, "task_id"),
-            (get_field("date").verbose_name, "date"),
-            (get_field("time_spent").verbose_name, "time_spent"),
-            (get_field("status").verbose_name, "get_status_display"),
-            (get_field("description").verbose_name, "description"),
-        ]
+    model = TimeSheet
+    filter_class = TimeSheetFilter
 
-    @cached_property
-    def sortby_mapping(self):
-        get_field = self.model()._meta.get_field
-        return [
-            (
-                get_field("employee_id").verbose_name,
-                "employee_id__employee_first_name",
-                "employee_id__get_avatar",
-            ),
-            (get_field("project_id").verbose_name, "project_id__title"),
-            (get_field("task_id").verbose_name, "task_id__title"),
-            (get_field("time_spent").verbose_name, "time_spent"),
-            (get_field("date").verbose_name, "date"),
-        ]
+    columns = [
+        (_("Employee"), "employee_id", "employee_id__get_avatar"),
+        (_("Project"), "project_id"),
+        (_("Task"), "task_id"),
+        (_("Date"), "date"),
+        (_("Time Spent"), "time_spent"),
+        (_("Status"), "status_column"),
+        (_("Description"), "description"),
+    ]
+
+    sortby_mapping = [
+        ("Employee", "employee_id__employee_first_name", "employee_id__get_avatar"),
+        ("Project", "project_id__title"),
+        ("Task", "task_id__title"),
+        ("Time Spent", "time_spent"),
+        ("Date", "date"),
+    ]
 
     row_status_indications = [
         (
@@ -276,10 +267,6 @@ class TimeSheetFormView(HorillaFormView):
     form view for create project
     """
 
-    form_class = TimeSheetForm
-    model = TimeSheet
-    new_display_title = _("Create") + " " + model._meta.verbose_name
-
     def __init__(self, **kwargs: Any) -> None:
         super().__init__(**kwargs)
         self.dynamic_create_fields = [
@@ -292,7 +279,7 @@ class TimeSheetFormView(HorillaFormView):
 
     form_class = TimeSheetForm
     model = TimeSheet
-    new_display_title = _("Create") + " " + model._meta.verbose_name
+    new_display_title = _("Create Time Sheet")
     # template_name = "cbv/timesheet/form.html"
 
     def get_initial(self) -> dict:
@@ -498,15 +485,13 @@ class TimeSheetDetailView(HorillaDetailedView):
         "subtitle": "project_id",
         "avatar": "employee_id__get_avatar",
     }
-    action_method = "detail_actions"
 
-    @cached_property
-    def body(self):
-        get_field = self.model()._meta.get_field
-        return [
-            (get_field("task_id").verbose_name, "task_id"),
-            (get_field("date").verbose_name, "date"),
-            (get_field("time_spent").verbose_name, "time_spent"),
-            (get_field("status").verbose_name, "get_status_display"),
-            (get_field("description").verbose_name, "description"),
-        ]
+    body = [
+        (_("Task"), "task_id"),
+        (_("Date"), "date"),
+        (_("Time Spent"), "time_spent"),
+        (_("Status"), "status_column"),
+        (_("Description"), "description"),
+    ]
+
+    action_method = "detail_actions"
diff --git a/project/filters.py b/project/filters.py
index 00e48e762..8e6263ea9 100644
--- a/project/filters.py
+++ b/project/filters.py
@@ -77,7 +77,6 @@ class TaskAllFilter(HorillaFilterSet):
         field_name="end_date",
         lookup_expr="lte",
         widget=forms.DateInput(attrs={"type": "date"}),
-        label=_("End Till"),
     )
 
     class Meta:
@@ -92,12 +91,6 @@ class TaskAllFilter(HorillaFilterSet):
             "status",
         ]
 
-    def __init__(self, *args, **kwargs):
-        super().__init__(*args, **kwargs)
-        self.form.fields["end_till"].label = (
-            f"{self.Meta.model()._meta.get_field('end_date').verbose_name} Till"
-        )
-
     def filter_by_task(self, queryset, _, value):
         queryset = queryset.filter(title__icontains=value)
         return queryset
@@ -147,11 +140,6 @@ class TimeSheetFilter(HorillaFilterSet):
             "status",
         ]
 
-    def __init__(self, *args, **kwargs):
-        super().__init__(*args, **kwargs)
-        self.form.fields["start_from"].label = _("Start Date From")
-        self.form.fields["end_till"].label = _("End Date Till")
-
     def filter_by_employee(self, queryset, _, value):
         """
         Filter queryset by first name or last name.
diff --git a/project/models.py b/project/models.py
index cba958850..bbf777780 100644
--- a/project/models.py
+++ b/project/models.py
@@ -236,6 +236,9 @@ class Project(HorillaModel):
     def __str__(self):
         return self.title
 
+    def status_column(self):
+        return dict(self.PROJECT_STATUS).get(self.status)
+
     class Meta:
         """
         Meta class to add the additional info
@@ -537,7 +540,7 @@ class TimeSheet(HorillaModel):
         on_delete=models.CASCADE,
         verbose_name=_("Employee"),
     )
-    date = models.DateField(default=timezone.now, verbose_name=_("Date"))
+    date = models.DateField(default=timezone.now)
     time_spent = models.CharField(
         null=True,
         default="00:00",
@@ -632,5 +635,5 @@ class TimeSheet(HorillaModel):
         return url
 
     class Meta:
-        verbose_name = _("Time Sheet")
-        verbose_name_plural = _("Time Sheets")
+        verbose_name = _("TimeSheet")
+        verbose_name_plural = _("TimeSheets")
diff --git a/project/templates/cbv/tasks/task_filter.html b/project/templates/cbv/tasks/task_filter.html
index 6e8e33bf5..13d8f1ae3 100644
--- a/project/templates/cbv/tasks/task_filter.html
+++ b/project/templates/cbv/tasks/task_filter.html
@@ -9,31 +9,32 @@
             <div class="row">
                 <div class="col-sm-6">
                     <div class="oh-input-group">
-                        <label class="oh-label"
-                            for="{{ form.task_managers.id_for_label }}">{{form.task_managers.label}}</label>
-                        {{form.task_managers}}
+                        <label class="oh-label">{% trans "Manager" %}</label>
+                        {{form.task_manager}}
                     </div>
                     <div class="oh-input-group">
-                        <label class="oh-label" for="{{ form.stage.id_for_label }}">{{form.stage.label}}</label>
+                        <label class="oh-label">{% trans "Stage" %}</label>
                         {{form.stage}}
                     </div>
                 </div>
                 <div class="col-sm-12 col-md-12 col-lg-6">
                     <div class="oh-input-group">
-                        <label class="oh-label" for="{{ form.project.id_for_label }}">{{form.project.label}}</label>
+                        <label class="oh-label">{% trans "Project" %}</label>
                         {{form.project}}
                     </div>
                     <div class="oh-input-group">
-                        <label class="oh-label" for="{{ form.status.id_for_label }}">{{form.status.label}}</label>
+                        <label class="oh-label">{% trans "Status" %}</label>
                         {{form.status}}
                     </div>
                 </div>
                 <div class="col-sm-12 col-md-12 col-lg-6">
                     <div class="oh-input-group">
-                        <label class="oh-label" for="{{ form.end_till.id_for_label }}">{{form.end_till.label}}</label>
+                        <label class="oh-label">{% trans "End Date" %}</label>
                         {{form.end_till}}
                     </div>
                 </div>
+
+
             </div>
         </div>
     </div>
diff --git a/project/templates/cbv/timesheet/filter.html b/project/templates/cbv/timesheet/filter.html
index daa4e40b3..abd72ebea 100644
--- a/project/templates/cbv/timesheet/filter.html
+++ b/project/templates/cbv/timesheet/filter.html
@@ -6,29 +6,29 @@
             <div class="row">
                 <div class="col-sm-12 col-md-12 col-lg-6">
                     <div class="oh-input-group">
-                        <label class="oh-label" for="{{form.project_id.id_for_label}}">{{form.project_id.label}}</label>
+                        <label class="oh-label">{% trans "Project" %}</label>
                         {{form.project_id}}
                     </div>
                     <div class="oh-input-group">
-                        <label class="oh-label" for="{{form.status.id_for_label}}">{{form.status.label}}</label>
+                        <label class="oh-label">{% trans "Status" %}</label>
                         {{form.status}}
                     </div>
                 </div>
 
                 <div class="col-sm-12 col-md-12 col-lg-6">
                     <div class="oh-input-group">
-                        <label class="oh-label" for="{{form.task.id_for_label}}">{{form.task.label}}</label>
+                        <label class="oh-label">{% trans "Task" %}</label>
                         {{form.task}}
                     </div>
                     <div class="oh-input-group">
-                        <label class="oh-label" for="{{form.date.id_for_label}}">{{form.date.label}}</label>
+                        <label class="oh-label">{% trans "Date" %}</label>
                         {{form.date}}
                     </div>
                 </div>
                 {% if perms.project.view_timesheet or request.user|is_reportingmanager %}
                     <div class="col-sm-12 col-md-12 col-lg-6">
                         <div class="oh-input-group">
-                            <label class="oh-label" for="{{form.employee_id.id_for_label}}">{{form.employee_id.label}}</label>
+                            <label class="oh-label">{% trans "Employee" %}</label>
                             {{form.employee_id}}
                         </div>
                     </div>
@@ -43,13 +43,13 @@
             <div class="row">
                 <div class="col-sm-12 col-md-12 col-lg-6">
                     <div class="oh-input-group">
-                        <label class="oh-label" for="{{form.start_from.id_for_label}}">{{form.start_from.label}}</label>
+                        <label class="oh-label">{% trans "Start Date From" %}</label>
                         {{form.start_from}}
                     </div>
                 </div>
                 <div class="col-sm-12 col-md-12 col-lg-6">
                     <div class="oh-input-group">
-                        <label class="oh-label" for="{{form.end_till.id_for_label}}">{{form.end_till.label}}</label>
+                        <label class="oh-label">{% trans "Till End Date" %}</label>
                         {{form.end_till}}
                     </div>
                 </div>
diff --git a/project/templates/task/new/filter_task.html b/project/templates/task/new/filter_task.html
index 614082c01..14c5018a0 100644
--- a/project/templates/task/new/filter_task.html
+++ b/project/templates/task/new/filter_task.html
@@ -7,27 +7,27 @@
             <input type="text" value="{{project_id}}" name="project" style="display:none;">
                 <div class="col-sm-6">
                     <div class="oh-input-group">
-                        <label class="oh-label" for="{{f.form.task_managers.id_for_label}}">{{f.form.task_managers.label}}</label>
+                        <label class="oh-label">{% trans "Managers" %}</label>
                         {{f.form.task_managers}}
                     </div>
                     <div class="oh-input-group">
-                        <label class="oh-label" for="{{f.form.stage.id_for_label}}">{{f.form.stage.label}}</label>
+                        <label class="oh-label">{% trans "Stage" %}</label>
                         {{f.form.stage}}
                     </div>
                 </div>
                 <div class="col-sm-12 col-md-12 col-lg-6">
                     <div class="oh-input-group">
-                        <label class="oh-label" for="{{f.form.task_members.id_for_label}}">{{f.form.task_members.label}}</label>
+                        <label class="oh-label">{% trans "Members" %}</label>
                         {{f.form.task_members}}
                     </div>
                     <div class="oh-input-group">
-                        <label class="oh-label" for="{{f.form.status.id_for_label}}">{{f.form.status.label}}</label>
+                        <label class="oh-label">{% trans "Status" %}</label>
                         {{f.form.status}}
                     </div>
                 </div>
                 <div class="col-sm-12 col-md-12 col-lg-6">
                     <div class="oh-input-group">
-                        <label class="oh-label" for="{{f.form.end_till.id_for_label}}">{{f.form.end_till.label}}</label>
+                        <label class="oh-label">{% trans "End till" %}</label>
                         {{f.form.end_till}}
                     </div>
                 </div>
diff --git a/project/templates/task/new/task_kanban_view.html b/project/templates/task/new/task_kanban_view.html
index 64fad9a94..3be8a5c13 100644
--- a/project/templates/task/new/task_kanban_view.html
+++ b/project/templates/task/new/task_kanban_view.html
@@ -122,8 +122,8 @@
                                                 </span>
                                             </span><br>
                                             <div style="display: flex;" class="mb-2">
-                                                <label class="oh-kanban-card__subtitle" for="id_{{task.id}}_task_status">{% trans "Status" %} </label>
-                                                <select class="oh-table__editable-input w-100 ml-2" id="id_{{task.id}}_task_status"
+                                                <label class="oh-kanban-card__subtitle">{% trans "Status" %} </label>
+                                                <select class="oh-table__editable-input w-100 ml-2"
                                                     hx-get="{% url 'update-project-task-status' task.id %}?view=card"
                                                     hx-trigger="change" hx-swap="afterend" tabindex="-1" aria-hidden="true"
                                                     name="status">
diff --git a/recruitment/accessibility.py b/recruitment/accessibility.py
new file mode 100644
index 000000000..4e0eb57b5
--- /dev/null
+++ b/recruitment/accessibility.py
@@ -0,0 +1,41 @@
+"""
+recruitment/accessibility.py
+
+"""
+
+from recruitment.templatetags.recruitmentfilters import recruitment_manages
+
+
+def add_candidate_accessibility(
+    request, instance=None, user_perms=[], *args, **kwargs
+) -> bool:
+    """
+    Candidate add accessibility
+    """
+    return (
+        request.user.has_perm("recruitment.add_candidate")
+        or request.user.employee_get in instance.stage_managers.all
+        or request.user.employee_get in instance.recruitment_id.recruitment_managers.all
+    )
+
+
+def edit_stage_accessibility(
+    request, instance=None, user_perms=[], *args, **kwargs
+) -> bool:
+    """
+    Edit stage accessibility
+    """
+    return (
+        request.user.has_perm("recruitment.change_stage")
+        or recruitment_manages(request.user, instance.recruitment_id)
+        or request.user.employee_get in instance.stage_managers.all
+    )
+
+
+def delete_stage_accessibility(
+    request, instance=None, user_perms=[], *args, **kwargs
+) -> bool:
+    """
+    Delete stage accessibility
+    """
+    return request.user.has_perm("recruitment.delete_stage")
diff --git a/recruitment/cbv/accessibility.py b/recruitment/cbv/accessibility.py
new file mode 100644
index 000000000..5f8a453b6
--- /dev/null
+++ b/recruitment/cbv/accessibility.py
@@ -0,0 +1,173 @@
+"""
+Accessibility
+"""
+
+from django.contrib.auth.context_processors import PermWrapper
+from django.contrib.auth.models import User
+from base.methods import check_manager
+from employee.models import Employee
+from recruitment.methods import (
+    in_all_managers,
+    is_recruitmentmanager,
+    is_stagemanager,
+    stage_manages,
+)
+from recruitment.models import Candidate, RecruitmentGeneralSetting, RejectedCandidate
+
+
+def convert_emp(request, instance, user_perm):
+    """
+    Covert employee accessibility
+    """
+    mails = list(Candidate.objects.values_list("email", flat=True))
+    existing_emails = list(
+        User.objects.filter(username__in=mails).values_list("email", flat=True)
+    )
+    if not instance.email in existing_emails and not instance.start_onboard:
+        return True
+
+
+def add_skill_zone(request, instance, user_perm):
+    """
+    Add skill zone  accessibility
+    """
+
+    mails = list(Candidate.objects.values_list("email", flat=True))
+    existing_emails = list(
+        User.objects.filter(username__in=mails).values_list("email", flat=True)
+    )
+    if not instance.email in existing_emails and request.user.has_perm(
+        "recruitment.add_skillzonecandidate"
+    ):
+        return True
+
+
+def add_reject(request, instance, user_perm):
+    """
+    add reject accessibility
+    """
+    first = RejectedCandidate.objects.filter(candidate_id=instance).first()
+    mails = list(Candidate.objects.values_list("email", flat=True))
+    existing_emails = list(
+        User.objects.filter(username__in=mails).values_list("email", flat=True)
+    )
+    if not instance.email in existing_emails:
+        if request.user.has_perm(
+            "recruitment.add_rejectedcandidate"
+        ) or is_stagemanager(request):
+            if not first:
+                return True
+
+
+def edit_reject(request, instance, user_perm):
+    """
+    Edit reject accessibility
+    """
+    first = RejectedCandidate.objects.filter(candidate_id=instance).first()
+    mails = list(Candidate.objects.values_list("email", flat=True))
+    existing_emails = list(
+        User.objects.filter(username__in=mails).values_list("email", flat=True)
+    )
+    if not instance.email in existing_emails:
+        if request.user.has_perm(
+            "recruitment.add_rejectedcandidate"
+        ) or is_stagemanager(request):
+            if first:
+                return True
+
+
+def archive_status(request, instance, user_perm):
+    """
+    To acces archive in list candidates
+    """
+    if instance.is_active:
+        return True
+
+
+def unarchive_status(request, instance, user_perm):
+    """
+    To acces un-archive in list candidates
+    """
+    if not instance.is_active:
+        return True
+
+
+def onboarding_accessibility(
+    request, instance: object = None, user_perms: PermWrapper = [], *args, **kwargs
+) -> bool:
+    """
+    accessibility for onboarding tab in candidate individual view
+    """
+    candidate = Candidate.objects.get(pk=instance.pk)
+    if candidate.cand_onboarding_task.exists() and in_all_managers(request) or request.user.has_perm("onboarding.view_onboardingtask"):
+        return True
+    return False
+
+
+def rating_accessibility(
+    request, instance: object = None, user_perms: PermWrapper = [], *args, **kwargs
+) -> bool:
+    """
+    accessebility for rating tab in candidate individual view
+    """
+    candidate = Candidate.objects.get(pk=instance.pk)
+    stage_manage = stage_manages(request.user.employee_get, candidate.recruitment_id)
+    if stage_manage or request.user.has_perm("recruitment.view_candidate") or request.user.has_perm("recruitment.view_candidate"):
+        return True
+    return False
+
+
+def if_manager_accessibility(request, instance, *args, **kwargs):
+    """
+    If manager accessibility
+    """
+    return is_recruitmentmanager(request) or is_stagemanager(request) or request.user.has_perm("recruitment.view_candidate")
+
+
+def empl_scheduled_interview_accessibility(
+    request, instance: object = None, user_perms: PermWrapper = [], *args, **kwargs
+) -> bool:
+    """
+    sheduled interview tab accessibility for candidate individual view, employee individual view and employee profile
+    """
+    employee = Employee.objects.get(id=instance.pk)
+    if (
+        request.user.has_perm("recruitment.view_interviewschedule")
+        or check_manager(request.user.employee_get, instance)
+        or request.user == employee.employee_user_id
+        or is_recruitmentmanager(request)
+    ):
+        return True
+    return False
+
+
+def view_candidate_self_tracking(request, instance, *args, **kwargs):
+    if (
+        request.user.has_perm("recruitment.view_candidate")
+        or is_stagemanager(request)
+        or is_recruitmentmanager(request)
+    ):
+        return True
+
+
+def request_document(request, instance, *args, **kwargs):
+    if (
+        request.user.has_perm("recruitment.change_candidate")
+        or request.user.has_perm("recruitment.add_candidatedocumentrequest")
+        or is_stagemanager(request)
+        or is_recruitmentmanager(request)
+    ):
+        return True
+
+
+def check_candidate_self_tracking(request, instance, user_perm):
+    """
+    This method is used to get the candidate self tracking is enabled or not
+    """
+
+    candidate_self_tracking = False
+    if RecruitmentGeneralSetting.objects.exists():
+        candidate_self_tracking = (
+            RecruitmentGeneralSetting.objects.first().candidate_self_tracking
+        )
+    return candidate_self_tracking
diff --git a/recruitment/cbv/candidate_mail_log.py b/recruitment/cbv/candidate_mail_log.py
new file mode 100644
index 000000000..00fc73cd5
--- /dev/null
+++ b/recruitment/cbv/candidate_mail_log.py
@@ -0,0 +1,54 @@
+"""
+This page is handling the cbv methods of mail log tab in employee individual page.
+"""
+
+from typing import Any
+from django.utils.translation import gettext_lazy as _
+from django.urls import reverse
+from django.utils.decorators import method_decorator
+from base.cbv.mail_log_tab import MailLogTabList
+from horilla_views.generic.cbv.views import HorillaListView
+from horilla_views.cbv_methods import login_required
+from recruitment.models import Candidate
+from recruitment.cbv_decorators import all_manager_can_enter
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(
+    all_manager_can_enter(perm="recruitment.view_candidate"), name="dispatch"
+)
+class CandidateMailLogTabList(MailLogTabList):
+    """
+    list view for mail log tab in candidate
+    """
+
+    def get_context_data(self, **kwargs: Any):
+        """
+        Adds a search URL to the context based on the candidate's primary key.
+        """
+        context = super().get_context_data(**kwargs)
+        pk = self.kwargs.get("pk")
+        context["search_url"] = (
+            f"{reverse('candidate-mail-log-list',kwargs={'pk': pk})}"
+        )
+        return context
+
+    def get_queryset(self):
+        """
+        Returns a filtered and ordered queryset of email logs for the specified candidate.
+        """
+
+        # queryset = super().get_queryset()
+        pk = self.kwargs.get("pk")
+        candidate_obj = Candidate.objects.get(id=pk)
+        return (
+            HorillaListView.get_queryset(self)
+            .filter(to__icontains=candidate_obj.email)
+            .order_by("-created_at")
+        )
+
+    def dispatch(self, request, *args, **kwargs):
+        """
+        To avoide parent permissions
+        """
+        return super(MailLogTabList, self).dispatch(request, *args, **kwargs)
diff --git a/recruitment/cbv/candidate_profile.py b/recruitment/cbv/candidate_profile.py
new file mode 100644
index 000000000..5c712f157
--- /dev/null
+++ b/recruitment/cbv/candidate_profile.py
@@ -0,0 +1,176 @@
+"""
+This page handles the cbv methods for canidate profile page
+"""
+
+from django.utils.translation import gettext_lazy as _
+from django.utils.decorators import method_decorator
+from employee.cbv.employee_profile import EmployeeProfileView
+from horilla import settings
+from horilla_views.generic.cbv.views import HorillaProfileView, HorillaListView
+from recruitment.cbv.candidate_mail_log import CandidateMailLogTabList
+from recruitment.filters import CandidateFilter
+from recruitment.views import views
+from recruitment.models import Candidate
+from recruitment.cbv_decorators import all_manager_can_enter
+from horilla_views.cbv_methods import login_required
+from onboarding.models import CandidateTask
+from onboarding.filters import CandidateTaskFilter
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(
+    all_manager_can_enter(perm="recruitment.view_candidate"), name="dispatch"
+)
+class CandidateProfileView(HorillaProfileView):
+    """
+    Candidate ProfileView
+    """
+
+    model = Candidate
+    filter_class = CandidateFilter
+    push_url = "candidate-view-individual"
+    key_name = "cand_id"
+
+    actions = [
+        {
+            "title": _("Edit"),
+            "src": f"/{settings.STATIC_URL}images/ui/edit_btn.png",
+            "attrs": """
+                        onclick="
+                        window.location.href='{get_update_url}' "
+                    """,
+        },
+        {
+            "title": _("View candidate self tracking"),
+            "src": f"/{settings.STATIC_URL}images/ui/exit-outline.svg",
+            "accessibility": "recruitment.cbv.accessibility.view_candidate_self_tracking",
+            "attrs": """
+                href="{get_self_tracking_url}"
+                class="oh-dropdown__link"
+            """,
+        },
+    ]
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(
+    all_manager_can_enter(perm="recruitment.view_candidate"), name="dispatch"
+)
+class CandidateProfileTasks(HorillaListView):
+    """
+    CandidateProfileTasks
+    """
+
+    custom_empty_template = "onboarding/empty_task.html"
+    model = CandidateTask
+    show_filter_tags = False
+    filter_class = CandidateTaskFilter
+    filter_selected = False
+    selected_instances_key_id = "selectedInstanceIds"
+    bulk_update_fields = [
+        "status",
+    ]
+
+    def bulk_update_accessibility(self):
+        return (
+            super().bulk_update_accessibility()
+            or self.request.user.employee_get.onboardingstage_set.filter(
+                candidate__candidate_id__pk=self.kwargs["pk"]
+            ).exists()
+        )
+
+    columns = [
+        ("Task", "onboarding_task_id__task_title"),
+        ("Status", "status_col"),
+        (
+            "Modified By",
+            "modified_by__employee_get__get_full_name",
+            "modified_by__employee_get__get_avatar",
+        ),
+    ]
+
+    header_attrs = {
+        "status_col": """
+        style="width:180px!important;"
+"""
+    }
+
+    def __init__(self, **kwargs):
+        super().__init__(**kwargs)
+        self.search_url = self.request.path
+
+    def get_queryset(self, queryset=None, filtered=False, *args, **kwargs):
+        self.queryset = (
+            super()
+            .get_queryset(queryset, filtered, *args, **kwargs)
+            .filter(candidate_id__pk=self.kwargs["pk"])
+        )
+        return self.queryset
+
+
+CandidateProfileView.add_tab(
+    tabs=[
+        {
+            "title": "About",
+            "view": views.candidate_about_tab,
+            "accessibility": "recruitment.cbv.accessibility.if_manager_accessibility",
+        },
+        {
+            "title": "Resume",
+            "view": views.candidate_resume_tab,
+            "accessibility": "recruitment.cbv.accessibility.if_manager_accessibility",
+        },
+        {
+            "title": "Survey",
+            "view": views.candidate_survey_tab,
+            "accessibility": "recruitment.cbv.accessibility.if_manager_accessibility",
+        },
+        {
+            "title": "Documents",
+            "view": views.candidate_document_request_tab,
+            "accessibility": "recruitment.cbv.accessibility.if_manager_accessibility",
+        },
+        {
+            "title": "Notes",
+            "view": views.add_note,
+            "accessibility": "recruitment.cbv.accessibility.if_manager_accessibility",
+        },
+        {
+            "title": "History",
+            "view": views.candidate_history_tab,
+            "accessibility": "recruitment.cbv.accessibility.if_manager_accessibility",
+        },
+        {
+            "title": "Rating",
+            "view": views.candidate_rating_tab,
+            "accessibility": "recruitment.cbv.accessibility.rating_accessibility",
+        },
+        {
+            "title": "Onboarding",
+            "view": CandidateProfileTasks.as_view(),
+            "accessibility": "recruitment.cbv.accessibility.onboarding_accessibility",
+        },
+        {
+            "title": "Mail Log",
+            # "view": views.get_mail_log
+            "view": CandidateMailLogTabList.as_view(),
+            "accessibility": "recruitment.cbv.accessibility.if_manager_accessibility",
+        },
+        {
+            "title": "Sheduled Interviews",
+            "view": views.candidate_interview_tab,
+            "accessibility": "recruitment.cbv.accessibility.empl_scheduled_interview_accessibility",
+        },
+    ]
+)
+
+
+EmployeeProfileView.add_tab(
+    tabs=[
+        {
+            "title": "Scheduled Interviews",
+            "view": views.scheduled_interview_tab,
+            "accessibility": "recruitment.cbv.accessibility.empl_scheduled_interview_accessibility",
+        },
+    ]
+)
diff --git a/recruitment/cbv/candidate_reject_reason.py b/recruitment/cbv/candidate_reject_reason.py
new file mode 100644
index 000000000..ed455a506
--- /dev/null
+++ b/recruitment/cbv/candidate_reject_reason.py
@@ -0,0 +1,159 @@
+"""
+This page handles reject reason in settings
+"""
+
+from typing import Any
+from django.http import HttpResponse
+from django.urls import reverse
+from django.utils.translation import gettext_lazy as _
+from django.utils.decorators import method_decorator
+from django.contrib import messages
+from recruitment.filters import RejectReasonFilter
+from horilla_views.cbv_methods import permission_required, login_required
+from horilla_views.generic.cbv.views import (
+    HorillaFormView,
+    HorillaListView,
+    HorillaNavView,
+)
+from recruitment.forms import RejectReasonForm
+from recruitment.models import RejectReason
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(
+    permission_required(perm="recruitment.view_rejectreason"), name="dispatch"
+)
+class RejectReasonListView(HorillaListView):
+    """
+    List view of the rejected reason page
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+
+        # self.action_method = "actions_col"
+        self.view_id = "reje_reason"
+        self.search_url = reverse("candidate-reject-reasons-list")
+
+    model = RejectReason
+    filter_class = RejectReasonFilter
+
+    columns = [
+        (_("Reject Reasons"), "title"),
+        (_("Description"), "description"),
+    ]
+
+    actions = [
+        {
+            "action": "Edit",
+            "icon": "create-outline",
+            "attrs": """
+                    class="oh-btn oh-btn--light-bkg w-50"
+                    hx-get="{get_update_url}?instance_ids={ordered_ids}"
+                    hx-target="#genericModalBody"
+                    data-toggle="oh-modal-toggle"
+                    data-target="#genericModal"
+                    """,
+        },
+        {
+            "action": "Delete",
+            "icon": "trash-outline",
+            "attrs": """
+                    id = "delete-reject"
+                    class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-50"
+                    hx-confirm="Are you sure want to delete this reason?"
+                    hx-target="#rejectReasonTr{get_instance_id}"
+                    hx-post="{get_delete_url}"
+                    hx-swap="delete"
+                    """,
+        },
+    ]
+
+    header_attrs = {
+        "title": """ style="width:200px !important" """,
+        "description": """ style="width:200px !important" """,
+        "action": """ style="width:200px !important" """
+    }
+
+    row_attrs = """
+                id = "rejectReasonTr{get_instance_id}"
+                """
+
+#  onclick="deleteRejectReason('{get_delete_url}')"
+@method_decorator(login_required, name="dispatch")
+@method_decorator(
+    permission_required(perm="recruitment.view_rejectreason"), name="dispatch"
+)
+class RejectReasonNav(HorillaNavView):
+    """
+    Nav bar
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("candidate-reject-reasons-list")
+        self.create_attrs = f"""
+                            data-toggle="oh-modal-toggle"
+                            data-target="#genericModal"
+                            hx-target="#genericModalBody"
+                            hx-get="{reverse('create-reject-reason-view')}"
+                            """
+
+    nav_title = _("Reject Reasons")
+    filter_instance = RejectReasonFilter()
+    search_swap_target = "#listContainer"
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(
+    permission_required(perm="recruitment.add_rejectreason"), name="dispatch"
+)
+class RejectReasonFormView(HorillaFormView):
+    """
+    Create and edit form
+    """
+
+    model = RejectReason
+    form_class = RejectReasonForm
+    new_display_title = _("Create reject reason")
+
+    def get_context_data(self, **kwargs):
+        """
+        Get context data for rendering the form view.
+        """
+        context = super().get_context_data(**kwargs)
+        if self.form.instance.pk:
+            self.form_class.verbose_name = _("Update reject reason")
+        return context
+
+    def form_valid(self, form: RejectReasonForm) -> HttpResponse:
+        """
+        Handle a valid form submission.
+
+        If the form is valid, save the instance and display a success message.
+        """
+        if form.is_valid():
+            if form.instance.pk:
+                message = _("Reject reason updated successfully.")
+            else:
+                message = _("Reject reason created successfully.")
+            form.save()
+            messages.success(self.request, _(message))
+            return self.HttpResponse()
+        return super().form_valid(form)
+    
+class DynamicRejectReasonFormView(HorillaFormView):
+
+    model = RejectReason
+    form_class = RejectReasonForm
+    new_display_title = _("Create reject reason")
+    is_dynamic_create_view = True
+
+    def form_valid(self, form: RejectReasonForm) -> HttpResponse:
+
+        if form.is_valid():
+            message = _("Reject reason created successfully.")
+            messages.success(self.request, _(message))
+            form.save()
+            return self.HttpResponse()
+        return super().form_valid(form)
diff --git a/recruitment/cbv/candidates.py b/recruitment/cbv/candidates.py
new file mode 100644
index 000000000..92460c6a3
--- /dev/null
+++ b/recruitment/cbv/candidates.py
@@ -0,0 +1,1003 @@
+"""
+This module used for recruitment candidates
+"""
+
+import io
+import ast
+import json
+import re
+from bs4 import BeautifulSoup
+from xhtml2pdf import pisa
+from openpyxl import Workbook
+from openpyxl.styles import PatternFill, Font, Border, Side, Alignment
+from openpyxl.utils import get_column_letter
+from typing import Any
+from import_export import fields, resources
+from django.http import HttpResponse
+from django.shortcuts import render
+from django.utils.decorators import method_decorator
+from django.urls import reverse, reverse_lazy
+from django.views import View
+from django.utils.translation import gettext_lazy as _
+from django.contrib import messages
+from django import forms
+from django.template.loader import render_to_string
+from horilla.horilla_middlewares import _thread_locals
+from employee.forms import BulkUpdateFieldForm
+from recruitment.cbv.candidate_reject_reason import DynamicRejectReasonFormView
+from recruitment.filters import CandidateFilter
+from recruitment.forms import (
+    CandidateExportForm,
+    RejectedCandidateForm,
+    ToSkillZoneForm,
+)
+from recruitment.models import (
+    Candidate,
+    RejectedCandidate,
+    SkillZoneCandidate,
+    RecruitmentSurvey,
+    RecruitmentSurveyAnswer,
+)
+from recruitment.cbv_decorators import manager_can_enter, all_manager_can_enter
+from horilla_views.forms import DynamicBulkUpdateForm
+from horilla_views.templatetags.generic_template_filters import getattribute
+from horilla_views.generic.cbv.views import (
+    HorillaFormView,
+    HorillaListView,
+    TemplateView,
+    HorillaNavView,
+    HorillaCardView,
+    HorillaDetailedView,
+)
+from horilla_views.cbv_methods import export_xlsx, login_required, permission_required
+
+_getattribute = getattribute
+
+
+def clean_column_name(question):
+    """
+    Convert the question text into a safe attribute name by:
+    - Replacing spaces with underscores
+    - Removing special characters except underscores
+    """
+    return re.sub(r"[^\w\s]", "", question).replace(" ", "_")
+
+
+@method_decorator(
+    permission_required(perm="recruitment.view_candidate"), name="dispatch"
+)
+@method_decorator(login_required, name="dispatch")
+class CandidatesView(TemplateView):
+    """
+    For page view
+
+    """
+
+    template_name = "cbv/candidates/candidates.html"
+
+    def get_context_data(self, **kwargs: Any) -> dict:
+        context = super().get_context_data(**kwargs)
+        update_fields = BulkUpdateFieldForm()
+        context["update_fields_form"] = update_fields
+        return context
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(manager_can_enter(perm="recruitment.view_candidate"), name="dispatch")
+class ListCandidates(HorillaListView):
+    """
+    List view of candidates
+    """
+
+    model = Candidate
+    filter_class = CandidateFilter
+    bulk_template = "cbv/employees_view/bulk_update_page.html"
+    bulk_update_fields = [
+        "gender",
+        "job_position_id",
+        "hired_date",
+        "referral",
+        "country",
+        "state",
+        "city",
+        "zip",
+        "joining_date",
+        "probation_end",
+    ]
+
+    def get_bulk_form(self):
+        """
+        Bulk from generating method
+        """
+
+        form = DynamicBulkUpdateForm(
+            root_model=Candidate, bulk_update_fields=self.bulk_update_fields
+        )
+
+        form.fields["country"] = forms.ChoiceField(
+            required=False,
+            widget=forms.Select(
+                attrs={
+                    "class": "oh-select oh-select-2",
+                    "required": False,
+                    "style": "width: 100%; height:45px;",
+                }
+            ),
+        )
+
+        form.fields["state"] = forms.ChoiceField(
+            required=False,
+            widget=forms.Select(
+                attrs={
+                    "class": "oh-select oh-select-2",
+                    "required": False,
+                    "style": "width: 100%; height:45px;",
+                },
+            ),
+        )
+
+        return form
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.export_fields = []
+        self.search_url = reverse("list-candidate")
+        if self.request.user.has_perm("recruitment.change_candidate"):
+            self.option_method = "options"
+        else:
+            self.option_method = None
+
+        unique_questions = RecruitmentSurvey.objects.values_list(
+            "question", flat=True
+        ).distinct()
+        self.survey_question_mapping = {}
+        for question in unique_questions:
+            survey_question = (question, f"question_{clean_column_name(question)}")
+            self.survey_question_mapping[f"question_{clean_column_name(question)}"] = (
+                question
+            )
+            if not survey_question in self.export_fields:
+                self.export_fields.append(survey_question)
+
+    columns = [
+        ("Candidates", "name", "get_avatar"),
+        ("Email", "email"),
+        ("Phone", "mobile"),
+        ("Rating", "rating"),
+        ("Recruitment", "recruitment_id"),
+        ("Job Position", "job_position_id"),
+        ("Hired Date", "hired_date"),
+        ("Resume", "resume_pdf"),
+    ]
+    default_columns = columns
+
+    header_attrs = {
+        "option": """
+                   style ="width : 230px !important;"
+                   """,
+        "action": """
+                   style ="width : 200px !important;"
+                   """,
+        "email": """
+                   style ="width : 200px !important;"
+                   """,
+    }
+
+    actions = [
+        {
+            "action": "Edit",
+            "icon": "create-outline",
+            "attrs": """class="oh-btn oh-btn--light-bkg w-100"
+            onclick="event.stopPropagation()
+            window.location.href='{get_update_url}' "
+             """,
+        },
+        {
+            "action": "Archive",
+            "accessibility": "recruitment.cbv.accessibility.archive_status",
+            "icon": "archive",
+            "attrs": """
+                class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100"
+                onclick="event.stopPropagation()
+                archiveCandidate({get_archive_url});  "  
+            """,
+        },
+        {
+            "action": "Un-archive",
+            "accessibility": "recruitment.cbv.accessibility.unarchive_status",
+            "icon": "archive",
+            "attrs": """
+                class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100"
+                onclick="event.stopPropagation()
+                archiveCandidate({get_archive_url});  "  
+            """,
+        },
+        {
+            "action": _("Delete"),
+            "icon": "trash-outline",
+            "attrs": """
+                    class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100"
+                    hx-get="{get_delete_url}?model=recruitment.candidate&pk={pk}"
+                    data-toggle="oh-modal-toggle"
+                    data-target="#deleteConfirmation"
+                    hx-target="#deleteConfirmationBody"
+                """,
+        },
+    ]
+
+    sortby_mapping = [
+        ("Candidates", "name", "get_avatar"),
+    ]
+    row_status_indications = [
+        (
+            "canceled--dot",
+            "Canceled",
+            """
+            onclick="
+                $('#applyFilter').closest('form').find('[name=canceled]').val('true');
+                $('#applyFilter').click();
+            "
+            """,
+        ),
+        (
+            "nothired--dot",
+            "Not Hired",
+            """
+            onclick="
+                $('#applyFilter').closest('form').find('[name=hired]').val('false');
+                $('#applyFilter').click();
+            "
+            """,
+        ),
+        (
+            "hired--dot",
+            "Hired",
+            """
+            onclick="$('#applyFilter').closest('form').find('[name=hired]').val('true');
+                $('#applyFilter').click();
+            "
+            """,
+        ),
+    ]
+
+    records_per_page = 10
+
+    row_status_class = "hired-{hired} canceled-{canceled}"
+
+    # row_attrs = """
+    #             {is_employee_converted}
+    #             hx-get='{get_details_candidate}'
+    #             data-toggle="oh-modal-toggle"
+    #             data-target="#genericModal"
+    #             hx-target="#genericModalBody"
+    #             """
+    row_attrs = """
+                {is_employee_converted}
+                onclick="window.location.href='{get_individual_url}?instance_ids={ordered_ids}'"
+                """
+
+    def export_data(self, *args, **kwargs):
+        """
+        Export with survey answer and question
+        """
+
+        request = getattr(_thread_locals, "request", None)
+        ids = ast.literal_eval(request.POST["ids"])
+        _columns = ast.literal_eval(request.POST["columns"])
+        queryset = self.model.objects.filter(id__in=ids)
+        question_mapping = self.survey_question_mapping
+        export_format = request.POST.get("format", "xlsx")
+
+        _model = self.model
+
+        class HorillaListViewResorce(resources.ModelResource):
+            """
+            Instant Resource class
+            """
+
+            id = fields.Field(column_name="ID")
+            question = {}
+
+            class Meta:
+                """
+                Meta class for additional option
+                """
+
+                model = _model
+                fields = []
+
+            def __init__(self, **kwargs):
+                super().__init__(**kwargs)
+
+                for field_tuple in _columns:
+                    if field_tuple[1].startswith("question_"):
+                        safe_field_name = field_tuple[1]
+                        self.fields[safe_field_name] = fields.Field(
+                            column_name=question_mapping[safe_field_name],
+                            attribute=safe_field_name,
+                            readonly=True,
+                        )
+
+            def export_field(self, field, obj):
+                """
+                Override this method to fetch the candidate's answers dynamically.
+                """
+
+                if field.attribute:
+                    # Get the stored JSON field containing answers
+                    survey_answers = RecruitmentSurveyAnswer.objects.filter(
+                        candidate_id=obj
+                    ).first()
+                    if survey_answers and field.attribute.startswith("question_"):
+                        survey_answers = survey_answers.answer_json
+                        if isinstance(survey_answers, str):
+                            try:
+                                survey_answers = ast.literal_eval(
+                                    survey_answers
+                                )  # Convert string to dict
+                            except Exception:
+                                survey_answers = {}
+
+                        # Extract the actual question text
+
+                        original_question = question_mapping[field.attribute]
+                        # Retrieve answer from JSON if available
+                        answer = survey_answers.get(original_question, "")
+                        if not answer:
+                            answer = survey_answers.get(
+                                "rating_" + original_question, ""
+                            )
+                        if not answer:
+                            answer = survey_answers.get(
+                                "percentage_" + original_question, ""
+                            )
+                        if not answer:
+                            answer = survey_answers.get("file_" + original_question, "")
+                        if not answer:
+                            answer = survey_answers.get("date_" + original_question, "")
+                        if not answer:
+                            answer = survey_answers.get(
+                                "multiple_choices_" + original_question, ""
+                            )
+                        return answer
+
+                return super().export_field(field, obj)
+
+            def dehydrate_id(self, instance):
+                """
+                Dehydrate method for id field
+                """
+                return instance.pk
+
+            for field_tuple in _columns:
+                if not field_tuple[1].startswith("question_"):
+                    dynamic_fn_str = f"def dehydrate_{field_tuple[1]}(self, instance):return self.remove_extra_spaces(getattribute(instance, '{field_tuple[1]}'))"
+                    exec(dynamic_fn_str)
+                    dynamic_fn = locals()[f"dehydrate_{field_tuple[1]}"]
+                    locals()[field_tuple[1]] = fields.Field(column_name=field_tuple[0])
+
+            def remove_extra_spaces(self, text):
+                """
+                Remove blank space but keep line breaks and add new lines for <li> tags.
+                """
+                soup = BeautifulSoup(str(text), "html.parser")
+                for li in soup.find_all("li"):
+                    li.insert_before("\n")
+                    li.unwrap()
+                text = soup.get_text()
+                lines = text.splitlines()
+                non_blank_lines = [line.strip() for line in lines if line.strip()]
+                cleaned_text = "\n".join(non_blank_lines)
+                return cleaned_text
+
+        book_resource = HorillaListViewResorce()
+
+        # Export the data using the resource
+        dataset = book_resource.export(queryset)
+
+        # Set the response headers
+        # file_name = self.export_file_name
+        if export_format == "json":
+            json_data = json.loads(dataset.export("json"))
+            response = HttpResponse(
+                json.dumps(json_data, indent=4), content_type="application/json"
+            )
+            response["Content-Disposition"] = (
+                f'attachment; filename="{self.export_file_name}.json"'
+            )
+            return response
+
+        # CSV
+        elif export_format == "csv":
+            csv_data = dataset.export("csv")
+            response = HttpResponse(csv_data, content_type="text/csv")
+            response["Content-Disposition"] = (
+                f'attachment; filename="{self.export_file_name}.csv"'
+            )
+            return response
+        elif export_format == "pdf":
+
+            headers = dataset.headers
+            rows = dataset.dict
+
+            # Render to HTML using a template
+            html_string = render_to_string(
+                "generic/export_pdf.html",
+                {
+                    "headers": headers,
+                    "rows": rows,
+                },
+            )
+
+            # Convert HTML to PDF using xhtml2pdf
+            result = io.BytesIO()
+            pisa_status = pisa.CreatePDF(html_string, dest=result)
+
+            if pisa_status.err:
+                return HttpResponse("PDF generation failed", status=500)
+
+            # Return response
+            response = HttpResponse(result.getvalue(), content_type="application/pdf")
+            response["Content-Disposition"] = (
+                f'attachment; filename="{self.export_file_name}.pdf"'
+            )
+            return response
+
+        # response = HttpResponse(
+        #     dataset.export("xlsx"), content_type="application/vnd.ms-excel"
+        # )
+        # response["Content-Disposition"] = (
+        #     f'attachment; filename="{self.export_file_name}.xls"'
+        # )
+        json_data = json.loads(dataset.export("json"))
+        headers = list(json_data[0].keys()) if json_data else []
+
+        wb = Workbook()
+        ws = wb.active
+        ws.title = "Exported Data"
+
+        # Styling
+        header_fill = PatternFill(start_color="FFD700", end_color="FFD700", fill_type="solid")
+        bold_font = Font(bold=True)
+        thin_border = Border(
+            left=Side(style="thin"),
+            right=Side(style="thin"),
+            top=Side(style="thin"),
+            bottom=Side(style="thin"),
+        )
+        wrap_alignment = Alignment(vertical="top", wrap_text=True)
+
+        # Write headers
+        for col_idx, header in enumerate(headers, start=1):
+            cell = ws.cell(row=1, column=col_idx, value=header)
+            cell.fill = header_fill
+            cell.font = bold_font
+            cell.border = thin_border
+            cell.alignment = Alignment(horizontal="center", vertical="center", wrap_text=True)
+
+        # Write data rows
+        for row_idx, item in enumerate(json_data, start=2):
+            for col_idx, key in enumerate(headers, start=1):
+                value = item.get(key, "")
+                # Convert lists to newline-separated string
+                if isinstance(value, list):
+                    value = "\n".join(str(v) for v in value)
+                elif isinstance(value, dict):
+                    value = json.dumps(value, ensure_ascii=False)  # or format it as needed
+                cell = ws.cell(row=row_idx, column=col_idx, value=value)
+                cell.border = thin_border
+                cell.alignment = wrap_alignment
+
+        # Auto-fit column widths
+        for col_cells in ws.columns:
+            max_len = max(len(str(cell.value or "")) for cell in col_cells)
+            col_letter = get_column_letter(col_cells[0].column)
+            ws.column_dimensions[col_letter].width = min(max_len + 5, 50)
+
+        # Output to Excel
+        output = io.BytesIO()
+        wb.save(output)
+        output.seek(0)
+
+        response = HttpResponse(
+            output.read(),
+            content_type="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+        )
+        response["Content-Disposition"] = 'attachment; filename="exported_data.xlsx"'
+        return response
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(manager_can_enter(perm="recruitment.view_candidate"), name="dispatch")
+class CardCandidates(HorillaCardView):
+    """
+    For card view
+    """
+
+    model = Candidate
+    filter_class = CandidateFilter
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("card-candidate")
+
+    details = {
+        "image_src": "get_avatar",
+        "title": "{get_full_name}",
+        "subtitle": "{email} <br> {get_job_position}",
+    }
+
+    actions = [
+        {
+            "action": "Convert to Employee",
+            "accessibility": "recruitment.cbv.accessibility.convert_emp",
+            "attrs": """
+                onclick="event.stopPropagation()
+                return confirm('Are you sure you want to convert this candidate into an employee?')"
+                href='{get_convert_to_emp}'
+                class="oh-dropdown__link"
+                
+            """,
+        },
+        {
+            "action": "Add to Skill Zone",
+            "accessibility": "recruitment.cbv.accessibility.add_skill_zone",
+            "attrs": """
+                data-toggle="oh-modal-toggle"
+                data-target="#genericModal"
+                hx-get="{get_add_to_skill}"
+                hx-target="#genericModalBody"
+                class="oh-dropdown__link"
+                
+            """,
+        },
+        {
+            "action": "View candidate self tracking",
+            "accessibility": "recruitment.cbv.accessibility.check_candidate_self_tracking",
+            "attrs": """
+                href="{get_self_tracking_url}"
+                class="oh-dropdown__link"
+            """,
+        },
+        {
+            "action": "Request Document",
+            "accessibility": "recruitment.cbv.accessibility.request_document",
+            "attrs": """
+                data-toggle="oh-modal-toggle"
+                data-target="#genericModal"
+                hx-get="{get_document_request_doc}"
+                hx-target="#genericModalBody"
+                class="oh-dropdown__link"
+            """,
+        },
+        {
+            "action": "Add to Rejected",
+            "accessibility": "recruitment.cbv.accessibility.add_reject",
+            "attrs": """
+                hx-target="#genericModalBody"
+                hx-swap="innerHTML"
+                data-toggle="oh-modal-toggle"
+                data-target="#genericModal"
+                hx-get="{get_add_to_reject}"
+                class="oh-dropdown__link"
+                
+            """,
+        },
+        {
+            "action": "Edit Rejected Candidate",
+            "accessibility": "recruitment.cbv.accessibility.edit_reject",
+            "attrs": """
+                hx-target="#genericModalBody"
+                hx-swap="innerHTML"
+                data-toggle="oh-modal-toggle"
+                data-target="#genericModal"
+                hx-get="{get_add_to_reject}"
+                class="oh-dropdown__link"
+                
+            """,
+        },
+        {
+            "action": "Edit Profile",
+            "attrs": """
+                onclick="event.stopPropagation()
+                window.location.href='{get_update_url}' "
+                class="oh-dropdown__link"
+                
+            """,
+        },
+        {
+            "action": "archive_status",
+            "attrs": """
+                class="oh-dropdown__link"
+                onclick="archiveCandidate({get_archive_url});"
+                
+                
+            """,
+        },
+        {
+            "action": "Delete",
+            "attrs": """
+                class="oh-dropdown__link oh-dropdown__link--danger"
+                onclick="event.stopPropagation();
+                deleteCandidate('{get_delete_url}'); "
+                
+            """,
+        },
+    ]
+    card_status_indications = [
+        (
+            "canceled--dot",
+            "Canceled",
+            """
+            onclick="
+                $('#applyFilter').closest('form').find('[name=canceled]').val('true');
+                $('#applyFilter').click();
+            "
+            """,
+        ),
+        (
+            "nothired--dot",
+            "Not Hired",
+            """
+            onclick="
+                $('#applyFilter').closest('form').find('[name=hired]').val('false');
+                $('#applyFilter').click();
+            "
+            """,
+        ),
+        (
+            "hired--dot",
+            "Hired",
+            """
+            onclick="$('#applyFilter').closest('form').find('[name=hired]').val('true');
+                $('#applyFilter').click();
+            "
+            """,
+        ),
+    ]
+    card_status_class = "hired-{hired} canceled-{canceled}"
+    card_attrs = """
+                onclick="window.location.href='{get_individual_url}?instance_ids={ordered_ids}'"
+                """
+
+    records_per_page = 30
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(manager_can_enter(perm="recruitment.view_candidate"), name="dispatch")
+class CandidateNav(HorillaNavView):
+    """
+    For nav bar
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("list-candidate")
+        self.create_attrs = f"""
+                            href='{reverse_lazy('candidate-create')}'"
+                            """
+        self.actions = [
+            {
+                "action": "Export",
+                "attrs": f"""
+                 data-toggle="oh-modal-toggle"
+                 data-target="#genericModal"
+                 hx-get="{reverse('export')}"
+                 hx-target="#genericModalBody"
+                 """,
+            },
+            {
+                "action": "Bulk mail",
+                "attrs": f"""
+                data-toggle="oh-modal-toggle"
+                data-target="#genericModal"
+                hx-get="{reverse('send-mail')}"
+                hx-target="#genericModalBody"
+                """,
+            },
+            {
+                "action": "Create document request",
+                "attrs": f"""
+                data-toggle="oh-modal-toggle"
+                data-target="#objectCreateModal"
+                hx-get="{reverse('candidate-document-request')}"
+                hx-target="#objectCreateModalTarget"
+                """,
+            },
+            {
+                "action": "Archive",
+                "attrs": """
+                id="archiveCandidates"
+                 
+                """,
+            },
+            {
+                "action": "Un archive",
+                "attrs": """
+                id="unArchiveCandidates"
+                 
+                """,
+            },
+            {
+                "action": "Delete",
+                "attrs": """
+                data-action = "delete"
+                id="deleteCandidates"
+                 new_init
+                """,
+            },
+        ]
+
+        self.view_types = [
+            {
+                "type": "list",
+                "icon": "list-outline",
+                "url": reverse("list-candidate"),
+                "attrs": """
+                            title='List'
+                            """,
+            },
+            {
+                "type": "card",
+                "icon": "grid-outline",
+                "url": reverse("card-candidate"),
+                "attrs": """
+                            title='Card'
+                            """,
+            },
+        ]
+
+    nav_title = "Candidates"
+    filter_body_template = "cbv/candidates/filter.html"
+    filter_instance = CandidateFilter()
+    filter_form_context_name = "form"
+    search_swap_target = "#listContainer"
+    group_by_fields = [
+        ("recruitment_id", "Recruitment"),
+        ("job_position_id", "Job Position"),
+        ("hired", "Hired"),
+        ("country", "Country"),
+        ("stage_id", "Stage"),
+        ("joining_date", "Date joining"),
+        ("probation_end", "Probation End"),
+        ("offer_letter_status", "offer Letter Status"),
+        ("rejected_candidate__reject_reason_id", "Reject reason"),
+        ("skillzonecandidate_set", "Skill zone"),
+    ]
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(manager_can_enter(perm="recruitment.view_candidate"), name="dispatch")
+class ExportView(TemplateView):
+    """
+    For candidate export
+    """
+
+    template_name = "cbv/candidates/export.html"
+
+    def get_context_data(self, **kwargs: Any):
+        """
+        Adds export fields and filter object to the context.
+        """
+        context = super().get_context_data(**kwargs)
+        candidates = Candidate.objects.filter(is_active=True)
+        export_column = CandidateExportForm()
+        export_filter = CandidateFilter(queryset=candidates)
+        context["export_column"] = export_column
+        context["export_filter"] = export_filter
+        return context
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(manager_can_enter(perm="recruitment.view_candidate"), name="dispatch")
+class AddToRejectedCandidatesView(View):
+    """
+    Class for Add to reject candidate
+    """
+
+    template_name = "onboarding/rejection/form.html"
+
+    def get(self, request):
+        """
+        get method
+        """
+        candidate_id = request.GET.get("candidate_id")
+        instance = None
+        if candidate_id:
+            instance = RejectedCandidate.objects.filter(
+                candidate_id=candidate_id
+            ).first()
+        form = RejectedCandidateForm(
+            initial={"candidate_id": candidate_id}, instance=instance
+        )
+        return render(request, self.template_name, {"form": form})
+
+    def post(self, request):
+        """
+        post method
+        """
+        candidate_id = request.GET.get("candidate_id")
+        instance = None
+        if candidate_id:
+            instance = RejectedCandidate.objects.filter(
+                candidate_id=candidate_id
+            ).first()
+        form = RejectedCandidateForm(request.POST, instance=instance)
+        if form.is_valid():
+            form.save()
+            messages.success(request, "Candidate reject reason saved")
+            return HttpResponse("<script>window.location.reload()</script>")
+        return render(request, self.template_name, {"form": form})
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(
+    all_manager_can_enter(perm="recruitment.view_candidate"), name="dispatch"
+)
+class CandidateDetail(HorillaDetailedView):
+    """
+    Candidate detail
+    """
+
+    title = "Candidate Details"
+
+    model = Candidate
+
+    header = {"title": "get_full_name", "subtitle": "get_email", "avatar": "get_avatar"}
+
+    body = [
+        ("Gender", "gender"),
+        ("Phone", "mobile"),
+        ("Stage", "stage_drop_down"),
+        ("Rating", "rating_bar"),
+        ("Recruitment", "recruitment_id"),
+        ("Job Position", "job_position_id"),
+        ("Interview Table", "candidate_interview_view", True),
+    ]
+
+    cols = {
+        "candidate_interview_view": 12,
+    }
+
+    def __init__(self, **kwargs):
+        super().__init__(**kwargs)
+        self.actions = [
+            {
+                "action": "Edit",
+                "icon": "create-outline",
+                "attrs": """
+            class="oh-btn oh-btn--info w-50"
+            onclick="window.location.href='{get_update_url}' "
+            """,
+            },
+            {
+                "action": "View",
+                "icon": "eye-outline",
+                "attrs": """
+            class="oh-btn oh-btn--success w-50"
+            onclick="window.location.href='{get_individual_url}'"
+            """,
+            },
+        ]
+
+        if self.request.user.has_perm("recruitment.delete_candidate"):
+            self.actions.append(
+                {
+                    "action": "Delete",
+                    "icon": "trash-outline",
+                    "accessibility": "recruitment.cbv.candidates.delete_cand",
+                    "attrs": f"""
+            class="oh-btn oh-btn--danger w-50"
+            hx-get="{reverse_lazy("generic-delete")}?model=recruitment.Candidate&pk={{pk}}"
+            hx-target="#deleteConfirmationBody"
+            data-toggle="oh-modal-toggle"
+            data-target="#deleteConfirmation"
+            onclick="event.stopPropagation()
+            deleteCandidate('{{get_delete_url}}'); "
+            """,
+                }
+            )
+
+
+class ToSkillZoneFormView(HorillaFormView):
+    """
+    Form View
+    """
+
+    model = SkillZoneCandidate
+    form_class = ToSkillZoneForm
+    new_display_title = "Add To Skill Zone"
+
+    def get_context_data(self, **kwargs):
+        """
+        Returns context with form and candidate data.
+        """
+        context = super().get_context_data(**kwargs)
+        candidate_id = self.kwargs.get("cand_id")
+        candidate = Candidate.objects.get(id=candidate_id)
+        form = self.form_class(
+            initial={
+                "candidate_id": candidate,
+                "skill_zone_ids": SkillZoneCandidate.objects.filter(
+                    candidate_id=candidate
+                ).values_list("skill_zone_id", flat=True),
+            }
+        )
+        context["form"] = form
+        return context
+
+    def form_invalid(self, form: Any) -> HttpResponse:
+        """
+        Handles and renders form errors or defers to superclass.
+        """
+        form = self.form_class(self.request.POST)
+        if not form.is_valid():
+            errors = form.errors.as_data()
+            return render(
+                self.request, self.template_name, {"form": form, "errors": errors}
+            )
+        return super().form_invalid(form)
+
+    def form_valid(self, form: ToSkillZoneForm) -> HttpResponse:
+        """
+        Handles valid form submission and saves rejected candidate reason.
+        """
+        if form.is_valid():
+            candidate_id = self.kwargs.get("cand_id")
+            candidate = Candidate.objects.get(id=candidate_id)
+            self.form_class(
+                initial={
+                    "candidate_id": candidate,
+                    "skill_zone_ids": SkillZoneCandidate.objects.filter(
+                        candidate_id=candidate
+                    ).values_list("skill_zone_id", flat=True),
+                }
+            )
+            skill_zones = self.form.cleaned_data["skill_zone_ids"]
+            for zone in skill_zones:
+                if not SkillZoneCandidate.objects.filter(
+                    candidate_id=candidate_id, skill_zone_id=zone
+                ).exists():
+                    zone_candidate = SkillZoneCandidate()
+                    zone_candidate.candidate_id = candidate
+                    zone_candidate.skill_zone_id = zone
+                    zone_candidate.reason = self.form.cleaned_data["reason"]
+                    zone_candidate.save()
+            message = "Candidate Added to skill zone successfully"
+            messages.success(self.request, _(message))
+            return self.HttpResponse()
+        return super().form_valid(form)
+
+
+class RejectReasonFormView(HorillaFormView):
+    """
+    Form View
+    """
+
+    model = RejectedCandidate
+    form_class = RejectedCandidateForm
+    new_display_title = "Rejected Candidate"
+    dynamic_create_fields = [("reject_reason_id", DynamicRejectReasonFormView)]
+
+    def get_initial(self) -> dict:
+        initial = super().get_initial()
+        initial["candidate_id"] = self.request.GET.get("candidate_id")
+        return initial
+
+    def init_form(self, *args, data={}, files={}, instance=None, **kwargs):
+        candidate_id = self.request.GET.get("candidate_id")
+        instance = RejectedCandidate.objects.filter(candidate_id=candidate_id).first()
+        return super().init_form(
+            *args, data=data, files=files, instance=instance, **kwargs
+        )
+
+    def form_valid(self, form: RejectedCandidateForm) -> HttpResponse:
+        """
+        Handles valid form submission and saves rejected candidate reason.
+        """
+        if form.is_valid():
+            message = _("Candidate reject reason saved")
+            messages.success(self.request, _(message))
+            form.save()
+            return self.HttpResponse()
+        return super().form_valid(form)
diff --git a/recruitment/cbv/dashboard.py b/recruitment/cbv/dashboard.py
new file mode 100644
index 000000000..108ff6e3c
--- /dev/null
+++ b/recruitment/cbv/dashboard.py
@@ -0,0 +1,191 @@
+"""
+Dashboard of recruitment
+"""
+
+from typing import Any
+from django.urls import reverse
+from django.db.models import Count, Q
+from django.utils.translation import gettext_lazy as _
+from django.utils.decorators import method_decorator
+from base.filters import JobRoleFilter
+from base.models import JobPosition
+from horilla_views.generic.cbv.views import HorillaListView
+from horilla_views.cbv_methods import login_required
+from recruitment.cbv_decorators import manager_can_enter
+from recruitment.filters import CandidateFilter, RecruitmentFilter, SkillZoneFilter
+from recruitment.models import Candidate, Recruitment, SkillZone
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(
+    manager_can_enter(perm="recruitment.view_recruitment"), name="dispatch"
+)
+class SkillZoneStatusList(HorillaListView):
+    """
+    List view for skill zone status in recruitment dashboard
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("skill-zone-status-dashboard")
+
+    model = SkillZone
+    filter_class = SkillZoneFilter
+    columns = [
+        (_("Skill Zone"), "title", "get_avatar"),
+        (_("No. of Candidates"), "candidate_count_display"),
+    ]
+    bulk_select_option = False
+
+    header_attrs = {
+        "title": """
+                 style="width:150px !important"
+                 """
+    }
+
+    def get_queryset(self):
+        queryset = super().get_queryset()
+        queryset = queryset.filter(is_active=True)
+        return queryset
+
+    row_attrs = """
+                onclick = "window.location.href='{get_skill_zone_url}'"
+                """
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(
+    manager_can_enter(perm="recruitment.view_recruitment"), name="dispatch"
+)
+class CandidateOnOnboardList(HorillaListView):
+    """
+    List view for candidate on onboard in recruitment dashboard
+    """
+
+    model = Candidate
+    filter_class = CandidateFilter
+    bulk_select_option = False
+
+    columns = [
+        (_("Candidates"), "name", "get_avatar"),
+        (_("Job Position"), "job_position_id"),
+    ]
+
+    header_attrs = {
+        "name": """
+                 style="width:100px !important"
+                 """
+    }
+
+    def get_queryset(self):
+        queryset = super().get_queryset()
+        queryset = queryset.filter(onboarding_stage__isnull=False)
+        return queryset
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("candidate-on-onboard-dashboard")
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(
+    manager_can_enter(perm="recruitment.view_recruitment"), name="dispatch"
+)
+class CurrentHiringList(HorillaListView):
+    """
+    List view for hiring in each job position in dashboard
+    """
+
+    model = JobPosition
+    filter_class = JobRoleFilter
+    bulk_select_option = False
+    records_per_page = 10
+
+    columns = [
+        (_("Job Positions"), "job_position"),
+        (_("Initial"), "initial_count"),
+        (_("Test"), "test_count"),
+        (_("Interview"), "interview_count"),
+        (_("Hired"), "hired_count"),
+        (_("Cancelled"), "cancelled_count"),
+    ]
+
+    header_attrs = {
+        "job_position": """
+                          style = "width:100px !important "                          
+                          """,
+        "initial_count": """
+                          style = "width:55px !important"                          
+                          """,
+        "test_count": """
+                          style = "width:55px !important;"                          
+                          """,
+        "interview_count": """
+                          style = "width:60px !important"                          
+                          """,
+        "hired_count": """
+                          style = "width:55px !important"                          
+                          """,
+        "cancelled_count": """
+                          style = "width:65px !important"                          
+                          """,
+    }
+
+    def get_queryset(self):
+        queryset = super().get_queryset()
+        queryset = queryset.annotate(
+            initial_count=Count(
+                "candidate", filter=Q(candidate__stage_id__stage_type="initial")
+            ),
+            test_count=Count(
+                "candidate", filter=Q(candidate__stage_id__stage_type="test")
+            ),
+            interview_count=Count(
+                "candidate", filter=Q(candidate__stage_id__stage_type="interview")
+            ),
+            hired_count=Count(
+                "candidate", filter=Q(candidate__stage_id__stage_type="hired")
+            ),
+            cancelled_count=Count(
+                "candidate", filter=Q(candidate__stage_id__stage_type="cancelled")
+            ),
+        )
+        return queryset
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("current-hiring-pipeline-dashboard")
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(
+    manager_can_enter(perm="recruitment.view_recruitment"), name="dispatch"
+)
+class OnGoingRecruitmentList(HorillaListView):
+    """
+    List view for ongoing recruitment and its managers in  dashboard
+    """
+
+    model = Recruitment
+    filter_class = RecruitmentFilter
+    bulk_select_option = False
+
+    columns = [
+        (_("Recrutment"), "title"),
+        (_("Managers"), "managers"),
+    ]
+
+    header_attrs = {
+        "title": """
+                 style="width:100px !important"
+                 """
+    }
+
+    def get_queryset(self):
+        queryset = super().get_queryset()
+        queryset = queryset.filter(closed=False)
+        return queryset
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("ongoing-recruitment-dashboard")
diff --git a/recruitment/cbv/interview.py b/recruitment/cbv/interview.py
new file mode 100644
index 000000000..2840f5362
--- /dev/null
+++ b/recruitment/cbv/interview.py
@@ -0,0 +1,251 @@
+"""
+this page handles cbv of interview page
+"""
+
+from typing import Any
+
+from django.contrib import messages
+from django.http import HttpResponse
+from django.shortcuts import render
+from django.urls import resolve, reverse, reverse_lazy
+from django.utils.decorators import method_decorator
+from django.utils.translation import gettext_lazy as _
+
+from horilla_views.cbv_methods import login_required
+from horilla_views.generic.cbv.views import (
+    HorillaDetailedView,
+    HorillaFormView,
+    HorillaListView,
+    HorillaNavView,
+    TemplateView,
+)
+from recruitment.decorators import recruitment_manager_can_enter, manager_can_enter
+from notifications.signals import notify
+from recruitment.filters import InterviewFilter
+from recruitment.forms import ScheduleInterviewForm
+from recruitment.models import Candidate, InterviewSchedule
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(
+    recruitment_manager_can_enter(perm="recruitment.view_recruitment"), name="dispatch"
+)
+class InterviewViewPage(TemplateView):
+    """
+    for interview page
+    """
+
+    template_name = "cbv/interview/interview_home_view.html"
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(
+    recruitment_manager_can_enter(perm="recruitment.view_recruitment"), name="dispatch"
+)
+class InterviewNavView(HorillaNavView):
+    """
+    nav bar of the page
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("interview-list-view")
+
+        if self.request.user.has_perm("view_interviewschedule"):
+            self.create_attrs = f"""
+                hx-get="{reverse_lazy("create-interview-schedule")}"
+                hx-target="#genericModalBody"
+                data-target="#genericModal"
+                data-toggle="oh-modal-toggle"
+            """
+        else:
+            self.create_attrs = None
+
+    nav_title = _("Scheduled Interviews")
+    filter_instance = InterviewFilter()
+    filter_body_template = "cbv/interview/interview_filter.html"
+    filter_form_context_name = "form"
+    search_swap_target = "#listContainer"
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(
+    recruitment_manager_can_enter(perm="recruitment.view_recruitment"), name="dispatch"
+)
+class InterviewLIstView(HorillaListView):
+    """
+    list view of the page
+    """
+
+    bulk_update_fields = ["employee_id", "interview_date", "interview_time"]
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("interview-list-view")
+        self.view_id = "interviewdelete"
+
+    def get_queryset(self):
+        """
+        Override queryset based on user permissions.
+
+        Returns:
+            queryset: Filtered queryset based on user permissions and employee ID.
+        """
+        queryset = super().get_queryset()
+        if self.request.user.has_perm("view_interviewschedule"):
+            queryset = queryset.all().order_by("-interview_date")
+        else:
+            queryset = queryset.filter(
+                employee_id=self.request.user.employee_get.id
+            ).order_by("-interview_date")
+
+        return queryset
+
+    filter_class = InterviewFilter
+    model = InterviewSchedule
+    records_per_page = 10
+    template_name = "cbv/interview/inherit_script.html"
+
+    columns = [
+        (_("Candidate"), "candidate_custom_col"),
+        (_("Interviewer"), "interviewer_custom_col"),
+        (_("Interview Date"), "interview_date"),
+        (_("Interview Time"), "interview_time"),
+        (_("Description"), "get_description"),
+        (_("Status"), "status_custom_col"),
+    ]
+    header_attrs = {
+        "candidate_custom_col": """
+                                style="width:200px !important;"
+                                """
+    }
+
+    sortby_mapping = [
+        ("Interview Date", "interview_date"),
+        ("Interview Time", "interview_time"),
+    ]
+    action_method = "custom_action_col"
+
+    row_attrs = """
+                {custom_color}
+                class="oh-permission-table--collapsed"
+                hx-get='{detail_view}?instance_ids={ordered_ids}'
+                hx-target="#genericModalBody"
+                data-target="#genericModal"
+                data-toggle="oh-modal-toggle"
+                """
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(
+    recruitment_manager_can_enter(perm="recruitment.view_recruitment"), name="dispatch"
+)
+class InterviewDetailView(HorillaDetailedView):
+    """
+    detailed view
+    """
+
+    model = InterviewSchedule
+    title = _("Details")
+    header = {
+        "title": "candidate_id__get_full_name",
+        "subtitle": "detail_subtitle",
+        "avatar": "candidate_id__get_avatar",
+    }
+    body = [
+        (_("Candidate"), "candidate_id"),
+        (_("Interviewer"), "interviewer_detail"),
+        (_("Interview Date"), "interview_date"),
+        (_("Interview Time"), "interview_time"),
+        (_("Description"), "get_description"),
+        (_("Status"), "status_custom_col"),
+    ]
+    action_method = "detail_view_actions"
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(
+    manager_can_enter(perm="recruitment.add_interviewschedule"), name="dispatch"
+)
+class InterviewForm(HorillaFormView):
+    """
+    form view
+    """
+
+    form_class = ScheduleInterviewForm
+    model = InterviewSchedule
+    new_display_title = _("Schedule Interview")
+
+    def get_context_data(self, **kwargs):
+        """
+        Override to add custom context data.
+        """
+        context = super().get_context_data(**kwargs)
+        resolved = resolve(self.request.path_info)
+        cand_id = resolved.kwargs.get("cand_id")
+        if cand_id:
+            self.form.fields["candidate_id"].queryset = Candidate.objects.filter(
+                id=cand_id
+            )
+            self.form.fields["candidate_id"].initial = cand_id
+        if self.form.instance.pk:
+            self.form_class.verbose_name = _("Schedule Interview")
+        context["form"] = self.form
+        context["view_id"] = "InterviewCreate"
+        return context
+
+    def form_invalid(self, form: Any) -> HttpResponse:
+        if self.form.instance.pk:
+            self.form_class.verbose_name = _("Schedule Interview")
+        if not form.is_valid():
+            errors = form.errors.as_data()
+            return render(
+                self.request, self.template_name, {"form": form, "errors": errors}
+            )
+        return super().form_invalid(form)
+
+    def form_valid(self, form: ScheduleInterviewForm) -> HttpResponse:
+        """
+        Handle form submission when the form is valid.
+
+        Args:
+            form (ScheduleInterviewForm): The validated form object.
+
+        Returns:
+            HttpResponse: Redirect response or HTTP response.
+        """
+        if form.is_valid():
+            view_data = self.request.GET.get("view")
+            emp_ids = self.form.cleaned_data["employee_id"]
+            cand_id = self.form.cleaned_data["candidate_id"]
+            interview_date = self.form.cleaned_data["interview_date"]
+            interview_time = self.form.cleaned_data["interview_time"]
+            users = [employee.employee_user_id for employee in emp_ids]
+            notify.send(
+                self.request.user.employee_get,
+                recipient=users,
+                verb=f"You are scheduled as an interviewer for an interview with {cand_id.name} on {interview_date} at {interview_time}.",
+                verb_ar=f"أنت مجدول كمقابلة مع {cand_id.name} يوم {interview_date} في توقيت {interview_time}.",
+                verb_de=f"Sie sind als Interviewer für ein Interview mit {cand_id.name} am {interview_date} um {interview_time} eingeplant.",
+                verb_es=f"Estás programado como entrevistador para una entrevista con {cand_id.name} el {interview_date} a las {interview_time}.",
+                verb_fr=f"Vous êtes programmé en tant qu'intervieweur pour un entretien avec {cand_id.name} le {interview_date} à {interview_time}.",
+                icon="people-circle",
+                redirect=reverse("interview-view"),
+            )
+            if form.instance.pk:
+                messages.success(self.request, _("Interview Updated Successfully"))
+                if view_data == "false":
+                    form.save()
+                    return self.HttpResponse(
+                        "<script>window.location.reload();</script>"
+                    )
+            else:
+                messages.success(self.request, _("Interview Scheduled successfully."))
+                if not view_data:
+                    form.save()
+                    return self.HttpResponse(
+                        "<script>window.location.reload();</script>"
+                    )
+            form.save()
+            return self.HttpResponse()
+        return super().form_valid(form)
diff --git a/recruitment/cbv/pipeline.py b/recruitment/cbv/pipeline.py
new file mode 100644
index 000000000..39e45b904
--- /dev/null
+++ b/recruitment/cbv/pipeline.py
@@ -0,0 +1,464 @@
+"""
+recruitment/cbv/pipeline.py
+"""
+
+from typing import Any
+from django.urls import reverse, reverse_lazy
+from django.utils.decorators import method_decorator
+from django.utils.translation import gettext_lazy as _
+from django.utils.http import urlencode
+from django.core.cache import cache as CACHE
+from django.contrib import messages
+from horilla_views.cbv_methods import login_required
+from horilla_views.generic.cbv.views import (
+    HorillaFormView,
+    HorillaListView,
+    HorillaNavView,
+    TemplateView,
+    HorillaTabView,
+    get_short_uuid,
+)
+from recruitment import models, filters, forms
+from recruitment.templatetags.recruitmentfilters import (
+    recruitment_manages,
+    stage_manages,
+)
+from recruitment.cbv_decorators import manager_can_enter
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(
+    manager_can_enter(perm="recruitment.view_recruitment"), name="dispatch"
+)
+class PipelineView(TemplateView):
+    """
+    PipelineView
+    """
+
+    template_name = "cbv/pipeline/pipeline.html"
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(
+    manager_can_enter(perm="recruitment.view_recruitment"), name="dispatch"
+)
+class RecruitmentTabView(HorillaTabView):
+    """
+    RecruitmentTabView
+    """
+
+    filter_class = filters.RecruitmentFilter
+
+    def __init__(self, **kwargs):
+        super().__init__(**kwargs)
+        recruitments = self.filter_class(self.request.GET).qs.filter(is_active=True)
+        CACHE.set(
+            self.request.session.session_key + "pipeline",
+            {
+                "stages": GetStages.filter_class(self.request.GET).qs.order_by(
+                    "sequence"
+                ),
+                "recruitments": recruitments,
+                "candidates": False,
+            },
+        )
+        self.tabs = []
+        view_perm = self.request.user.has_perm("recruitment.view_recruitment")
+        change_perm = self.request.user.has_perm("recruitment.change_recruitment")
+        add_cand_perm = self.request.user.has_perm("recruitment.add_candidate")
+        delete_perm = self.request.user.has_perm("recruitment.delete_recruitment")
+        add_stage_perm = self.request.user.has_perm("recruitment.add_stage")
+        for rec in recruitments:
+            rec_manager_perm = recruitment_manages(self.request.user, rec)
+            stage_manage_perm = stage_manages(self.request.user, rec)
+            tab = {}
+            tab["title"] = rec
+            tab["url"] = reverse("get-stages-recruitment", kwargs={"rec_id": rec.pk})
+            tab["badge_label"] = _("Stages")
+            tab["actions"] = []
+            if rec_manager_perm or change_perm:
+                if add_stage_perm or rec_manager_perm or change_perm:
+                    tab["actions"].append(
+                        {
+                            "action": _("Add Stage"),
+                            "attrs": f"""
+                                        data-toggle="oh-modal-toggle"
+                                        data-target="#genericModal"
+                                        hx-get="{reverse('rec-stage-create')}?recruitment_id={rec.pk}"
+                                        hx-target="#genericModalBody"
+                                        style="cursor: pointer;"
+                                        """,
+                        },
+                    )
+
+                    tab["actions"].append(
+                        {
+                            "action": _("Manage Stage Order"),
+                            "attrs": f"""
+                                data-toggle="oh-modal-toggle"
+                                data-target="#genericModal"
+                                hx-get="{reverse("rec-update-stage-seq", kwargs={"pk": rec.pk})}"
+                                hx-target="#genericModalBody"
+                                style="cursor: pointer;"
+                            """,
+                        }
+                    )
+
+                if change_perm or rec_manager_perm or change_perm:
+                    tab["actions"].append(
+                        {
+                            "action": _("Edit"),
+                            "attrs": f"""
+                                    data-toggle="oh-modal-toggle"
+                                    data-target="#genericModal"
+                                    hx-get="{reverse("recruitment-update-pipeline", kwargs={"pk": rec.pk})}"
+                                    hx-target="#genericModalBody"
+                                    style="cursor: pointer;"
+                                    """,
+                        },
+                    )
+
+                if add_cand_perm or rec_manager_perm or change_perm:
+                    tab["actions"].append(
+                        {
+                            "action": _("Resume Shortlisting"),
+                            "attrs": f"""
+                                    data-toggle="oh-modal-toggle"
+                                    data-target="#bulkResumeUpload"
+                                    hx-get="{reverse('view-bulk-resume')}?rec_id={rec.pk}"
+                                    hx-target="#bulkResumeUploadBody"
+                                    style="cursor: pointer;"
+                                    """,
+                        },
+                    )
+
+                if change_perm or rec_manager_perm:
+                    if rec.closed:
+                        tab["actions"].append(
+                            {
+                                "action": _("Reopen"),
+                                "attrs": f"""
+                                            href="{reverse("recruitment-reopen-pipeline", kwargs={"rec_id": rec.pk})}"
+                                            style="cursor: pointer;"
+                                            onclick="return confirm('Are you sure you want to reopen this recruitment?');"
+                                            """,
+                            },
+                        )
+                    else:
+                        tab["actions"].append(
+                            {
+                                "action": _("Close"),
+                                "attrs": f"""
+                                        href="{reverse("recruitment-close-pipeline", kwargs={"rec_id": rec.pk})}"
+                                        style="cursor: pointer;"
+                                        onclick="return confirm('Are you sure you want to close this recruitment?');"
+                                        """,
+                            },
+                        )
+                if delete_perm:
+                    tab["actions"].append(
+                        {
+                            "action": _("Delete"),
+                            "attrs": f"""
+                                        data-toggle="oh-modal-toggle"
+                                        data-target="#deleteConfirmation"
+                                        hx-get="{reverse('generic-delete')}?model=recruitment.Recruitment&pk={rec.pk}"
+                                        hx-target="#deleteConfirmationBody"
+                                        style="cursor: pointer;"
+                                        """,
+                        }
+                    )
+            if stage_manage_perm or view_perm:
+                self.tabs.append(tab)
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(
+    manager_can_enter(perm="recruitment.view_recruitment"), name="dispatch"
+)
+class GetStages(TemplateView):
+    """
+    GetStages
+    """
+
+    filter_class = filters.StageFilter
+
+    template_name = "cbv/pipeline/stages.html"
+    stages = None
+
+    def get(self, request, *args, **kwargs):
+        """
+        get method
+        """
+        rec_id = kwargs["rec_id"]
+        cache = CACHE.get(request.session.session_key + "pipeline")
+        if not cache.get("candidates"):
+            cache["candidates"] = CandidateList.filter_class(
+                self.request.GET
+            ).qs.filter(is_active=True)
+            CACHE.set(request.session.session_key + "pipeline", cache)
+
+        self.stages = cache["stages"].filter(recruitment_id=rec_id)
+        return super().get(request, *args, **kwargs)
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        context["stages"] = self.stages
+        context["view_id"] = get_short_uuid(6, "hsv")
+        return context
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(
+    manager_can_enter(perm="recruitment.view_recruitment"), name="dispatch"
+)
+class CandidateList(HorillaListView):
+    """
+    CandidateList
+    """
+
+    model = models.Candidate
+    filter_class = filters.CandidateFilter
+    filter_selected = False
+    quick_export = False
+    next_prev = False
+    custom_empty_template = "cbv/pipeline/empty.html"
+    header_attrs = {
+        "action": """
+        style="width:413px;"
+""",
+        "mobile": """
+        style="width:100px;"
+""",
+        "Stage": """
+        style="width:100px;"
+""",
+        "get_interview_count": """
+        style="width:200px;"
+""",
+    }
+    columns = [
+        ("Name", "candidate_name", "get_avatar"),
+        ("Email", "mail_indication"),
+        ("Stage", "stage_drop_down"),
+        ("Rating", "rating_bar"),
+        ("Hired Date", "hired_date"),
+        ("Scheduled Interview", "get_interview_count"),
+        ("Job Position", "job_position_id"),
+        ("Contact", "mobile"),
+    ]
+
+    default_columns = [
+        ("Name", "candidate_name", "get_avatar"),
+        ("Email", "mail_indication"),
+        ("Stage", "stage_drop_down"),
+    ]
+
+    bulk_update_fields = [
+        "stage_id",
+        "hired_date",
+    ]
+
+    row_attrs = """
+                hx-get='{get_details_candidate}'
+                data-toggle="oh-modal-toggle"
+                data-target="#genericModal"
+                hx-target="#genericModalBody"
+                """
+
+    header_attrs = {
+        "option": """
+    style="width:280px !important"
+    """
+    }
+    actions = [
+        {
+            "action": _("Schedule Interview"),
+            "icon": "time-outline",
+            "attrs": """
+                    class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100"
+                    hx-get = "{get_schedule_interview}"
+                    data-toggle="oh-modal-toggle"
+                    data-target="#genericModal"
+                    hx-target="#genericModalBody"
+                """,
+        },
+        {
+            "action": _("Send Mail"),
+            "icon": "mail-open-outline",
+            "attrs": """
+                    class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100"
+                    hx-get = "{get_send_mail}"
+                    data-toggle="oh-modal-toggle"
+                    data-target="#objectDetailsModal"
+                    hx-target="#objectDetailsModalTarget"
+                """,
+        },
+        {
+            "action": _("Add to Skill Zone"),
+            "icon": "heart-circle-outline",
+            "attrs": """
+                    class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100 disabled"
+                    data-toggle="oh-modal-toggle"
+                    hx-get="{get_skill_zone_url}"
+                    data-target="#genericModal"
+                    hx-target="#genericModalBody"
+                """,
+        },
+        {
+            "action": _("Reject Candidate"),
+            "icon": "thumbs-down-outline",
+            "attrs": """
+                    class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100"
+                    data-toggle="oh-modal-toggle"
+                    hx-get="{get_rejected_candidate_url}"
+                    {rejected_candidate_class}
+                    data-target="#genericModal"
+                    hx-target="#genericModalBody"
+                """,
+        },
+        {
+            "action": _("View Note"),
+            "icon": "newspaper-outline",
+            "attrs": """
+                    class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100 oh-activity-sidebar__open"
+                    hx-get="{get_view_note_url}"
+                    data-target="#activitySidebar"
+                    hx-target="#activitySidebar"
+                    onclick="$('#activitySidebar').addClass('oh-activity-sidebar--show')"
+                """,
+        },
+        {
+            "action": _("Document Request"),
+            "icon": "document-attach-outline",
+            "attrs": """
+                     hx-get="{get_document_request}"
+                    data-target="#genericModal"
+                    hx-target="#genericModalBody"
+                    class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100"
+                    data-toggle="oh-modal-toggle"
+                """,
+        },
+        {
+            "action": _("Resume"),
+            "icon": "document-outline",
+            "attrs": """
+                    class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100"
+                    href="{get_resume_url}" target="_blank" 
+                """,
+        },
+    ]
+    records_count_in_tab = False
+
+    def get_bulk_form(self):
+        form = super().get_bulk_form()
+        form.fields["stage_id"].queryset = form.fields["stage_id"].queryset.filter(
+            recruitment_id=self.kwargs["rec_id"]
+        )
+        return form
+
+    def bulk_update_accessibility(self):
+        """
+        Bulk Update accessiblity
+        """
+        if not self.kwargs.get("stage_id"):
+            return super().bulk_update_accessibility()
+        first_cand_in_stage = self.queryset.first()
+        return super().bulk_update_accessibility() or (
+            first_cand_in_stage
+            and (
+                self.request.user.employee_get
+                in first_cand_in_stage.stage_id.stage_managers.all()
+                or self.request.user.employee_get
+                in first_cand_in_stage.recruitment_id.recruitment_managers.all()
+            )
+        )
+
+    records_per_page = 10
+
+    def __init__(self, **kwargs):
+        super().__init__(**kwargs)
+        self.search_url = self.request.path
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        if not self.bulk_update_accessibility():
+            context["actions"] = []
+        return context
+
+    def get(self, request, *args, **kwargs):
+        self.selected_instances_key_id = f"selectedCandidateRecords{kwargs['stage_id']}"
+        return super().get(request, *args, **kwargs)
+
+    def get_queryset(self, *args, **kwargs):
+        if self.queryset is None:
+            queryset = CACHE.get(self.request.session.session_key + "pipeline")[
+                "candidates"
+            ].filter(stage_id=self.kwargs["stage_id"])
+            queryset = queryset.filter(stage_id=self.kwargs["stage_id"])
+            super().get_queryset(queryset=queryset, filtered=True)
+
+        return self.queryset
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(
+    manager_can_enter(perm="recruitment.view_recruitment"), name="dispatch"
+)
+class PipelineNav(HorillaNavView):
+    """
+    HorillaNavView
+    """
+
+    search_url = reverse_lazy("cbv-pipeline-tab")
+    nav_title = _("Pipeline")
+    search_swap_target = "#pipelineContainer"
+    filter_body_template = "cbv/pipeline/pipeline_filter.html"
+    filter_instance = filters.RecruitmentFilter()
+    filter_form_context_name = "form"
+    apply_first_filter = False
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        if self.request.user.has_perm("recruitment.add_recruitment"):
+            self.create_attrs = f"""
+                                hx-get="{reverse_lazy('recruitment-create')}?{urlencode({'pipeline': 'true'})}"
+                                hx-target="#genericModalBody"
+                                data-target="#genericModal"
+                                data-toggle="oh-modal-toggle"
+                                """
+        else:
+            self.create_attrs = None
+
+    def get_context_data(self, **kwargs):
+        """
+        context data
+        """
+        context = super().get_context_data(**kwargs)
+        stage_filter_obj = GetStages.filter_class()
+        candidate_filter_obj = CandidateList.filter_class()
+        context["stage_filter_obj"] = stage_filter_obj
+        context["candidate_filter_obj"] = candidate_filter_obj
+        return context
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(
+    manager_can_enter(perm="recruitment.view_recruitment"), name="dispatch"
+)
+class ChangeStage(HorillaFormView):
+    """
+    Change Candidate stage
+    """
+
+    model = models.Candidate
+    form_class = forms.StageChangeForm
+
+    def form_valid(self, form):
+        if form.is_valid():
+            messages.success(self.request, _("Stage Updated"))
+            form.save()
+            return self.HttpResponse()
+        messages.info(self.request, _("Stage not updated"))
+
+        return self.HttpResponse()
diff --git a/recruitment/cbv/recruitment_survey.py b/recruitment/cbv/recruitment_survey.py
new file mode 100644
index 000000000..d6dc1cc1a
--- /dev/null
+++ b/recruitment/cbv/recruitment_survey.py
@@ -0,0 +1,183 @@
+"""
+This page handles the cbv methods for recruitment survey page
+"""
+from typing import Any
+from django import forms
+from django.contrib import messages
+from django.http import HttpResponse
+from django.utils.decorators import method_decorator
+from django.utils.translation import gettext_lazy as _
+from django.shortcuts import render
+from horilla_views.generic.cbv.views import (
+    HorillaDetailedView,
+    HorillaFormView,
+)
+from horilla_views.cbv_methods import login_required, permission_required
+from recruitment.forms import QuestionForm,TemplateForm
+from recruitment.models import RecruitmentSurvey,SurveyTemplate
+
+
+
+@method_decorator(login_required,name="dispatch")
+@method_decorator(permission_required("recruitment.add_recruitmentsurvey"),name="dispatch")
+class QuestionFormView(HorillaFormView):
+    """
+    form view for create button
+    """
+
+    form_class = QuestionForm
+    model = RecruitmentSurvey
+    new_display_title = _("Survey Questions")
+    template_name = "cbv/recruitment_survey/survey_form.html"
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        if self.form.instance.pk:
+            self.form_class.verbose_name = _("Update Survey Questions")
+        return context
+
+    def form_valid(self, form: QuestionForm) -> HttpResponse:
+        if form.is_valid():
+            if form.instance.pk:
+                message = _("Survey question updated.")
+            else:
+                message = _("New survey question created.")
+            instance = form.save(commit=False)
+            instance.save()
+            instance.recruitment_ids.set(form.recruitment)
+            instance.template_id.set(form.cleaned_data["template_id"])
+            messages.success(self.request, _(message))
+            return HttpResponse("<script>window.location.reload()</script>")
+        return super().form_valid(form)
+    
+
+@method_decorator(login_required,name="dispatch")
+@method_decorator(permission_required("recruitment.add_recruitmentsurvey"),name="dispatch")
+class QuestionDuplicateFormView(HorillaFormView):
+    """
+    form view for create duplicate for asset 
+    """
+
+    form_class = QuestionForm
+    model = RecruitmentSurvey
+    new_display_title = _("Duplicate Survey Questions")
+    template_name = "cbv/recruitment_survey/survey_form.html"
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        original_object = RecruitmentSurvey.objects.get(id=self.kwargs["obj_id"])
+        form = self.form_class(instance=original_object)
+        for field_name, field in form.fields.items():
+            if isinstance(field, forms.CharField):
+                if field.initial:
+                    initial_value = field.initial
+                else:
+                    initial_value = f"{form.initial.get(field_name, '')} (copy)"
+                form.initial[field_name] = initial_value
+                form.fields[field_name].initial = initial_value
+        context["form"] = form
+        self.form_class.verbose_name = _("Duplicate")
+        return context
+
+    def form_valid(self, form: QuestionForm) -> HttpResponse:
+        if form.is_valid():
+            message = _("New survey question created.")
+            instance = form.save(commit=False)
+            instance.save()
+            instance.recruitment_ids.set(form.recruitment)
+            instance.template_id.set(form.cleaned_data["template_id"])
+            messages.success(self.request, _(message))
+            return HttpResponse("<script>window.location.reload()</script>")
+        return super().form_valid(form)
+
+
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(permission_required("recruitment.add_surveytemplate"),name="dispatch")
+class SurveyTemplateFormView(HorillaFormView):
+    """
+    form view for create and edit survey templates
+    """
+
+    form_class = TemplateForm
+    model = SurveyTemplate
+
+    def get_form(self, form_class=None):
+        title = self.request.GET.get("title")
+        instance = SurveyTemplate.objects.filter(title=title).first()
+
+        if not self.request.POST:
+            self.form =  self.form_class(instance=instance)
+        else:
+            self.form =  self.form_class(self.request.POST,instance=instance)
+        return self.form
+
+    
+    def form_invalid(self, form: Any) -> HttpResponse:
+        if not form.is_valid():
+            errors = form.errors.as_data()
+            return render(
+                self.request, self.template_name, {"form": form, "errors": errors}
+            )
+        return super().form_invalid(form)
+
+    def form_valid(self, form: TemplateForm) -> HttpResponse:
+        if form.is_valid():
+            message = _("Template saved")
+            form.save()
+            messages.success(self.request, _(message))
+            return HttpResponse("<script>window.location.reload();</script>")
+        return super().form_valid(form)
+
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(permission_required("recruitment.add_surveytemplate"),name="dispatch")
+class RecruitmentSurveyDetailView(HorillaDetailedView):
+    """
+    detail view of the page
+    """
+
+    model = RecruitmentSurvey
+    title = _("Details")
+    body = [
+        (_("Question"),"question"),
+        (_("Question Type"),"get_question_type"),
+        (_("Sequence"),"sequence"),
+        (_("Recruitment"),"recruitment_col"),
+        (_("Options"),"options_col",True),
+    ]
+
+    header = {"title": "question", "subtitle": "","avatar":""}
+
+
+    cols = {
+        "question" : 12
+    }
+
+    actions = [
+        {
+            "action": "Edit",
+            "icon": "create-outline",
+            "attrs": """
+                     class="oh-btn oh-btn--info w-50"
+                     hx-get="{get_edit_url}"
+                     hx-target ="#genericModalBody"
+                     data-target = "#genericModal"
+                     data-toggle ="oh-modal-toggle"   
+                     """,
+        },
+        {
+            "action": "Delete",
+            "icon": "trash-outline",
+            "attrs": """
+                    class="oh-btn oh-btn--danger w-50"
+                    href ="{get_delete_url}"
+                    onclick="return confirm(' Are you sure want to delete?')"
+                    """,
+        },
+    ]
+
+
+
diff --git a/recruitment/cbv/recruitment_view.py b/recruitment/cbv/recruitment_view.py
new file mode 100644
index 000000000..79d5c2956
--- /dev/null
+++ b/recruitment/cbv/recruitment_view.py
@@ -0,0 +1,382 @@
+"""
+recruitment 
+"""
+
+from typing import Any
+from django.http import HttpResponse
+from django.urls import reverse, reverse_lazy
+from django.utils.decorators import method_decorator
+from django.utils.translation import gettext_lazy as _
+from django.contrib import messages
+from django import forms
+from horilla_views.cbv_methods import login_required, permission_required
+from horilla_views.generic.cbv.views import (
+    HorillaDetailedView,
+    HorillaListView,
+    HorillaNavView,
+    TemplateView,
+    HorillaFormView,
+)
+from recruitment.filters import RecruitmentFilter
+from recruitment.forms import AddCandidateForm, RecruitmentCreationForm, SkillsForm
+from recruitment.models import Candidate, Recruitment, Skill
+from recruitment.views.linkedin import delete_post, post_recruitment_in_linkedin
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(
+    permission_required(perm="recruitment.view_recruitment"), name="dispatch"
+)
+class RecruitmentView(TemplateView):
+    """
+    Recuitment page
+    """
+
+    template_name = "cbv/recruitment/recruitment.html"
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(
+    permission_required(perm="recruitment.view_recruitment"), name="dispatch"
+)
+class RecruitmentList(HorillaListView):
+    """
+    List view of recruitment
+    """
+
+    model = Recruitment
+    filter_class = RecruitmentFilter
+    view_id = "rec-view-container"
+
+    bulk_update_fields = ["vacancy", "start_date", "end_date", "closed"]
+
+    template_name = "cbv/recruitment/rec_main.html"
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("list-recruitment")
+
+    columns = [
+        ("Recruitment", "recruitment_column"),
+        ("Managers", "managers_column"),
+        ("Open Jobs", "open_job_col"),
+        ("Vaccancy", "vacancy"),
+        ("Total Hires", "tot_hires"),
+        ("Start Date", "start_date"),
+        ("End date", "end_date"),
+        ("Status", "status_col"),
+    ]
+    action_method = "rec_actions"
+
+    header_attrs = {
+        "recruitment_column" : """
+                                style="width : 200px !important"
+                               """
+    }
+
+    row_status_indications = [
+        (
+            "closed--dot",
+            _("Closed"),
+            """
+            onclick="
+                $('#applyFilter').closest('form').find('[name=closed]').val('true');
+                $('#applyFilter').click();
+                
+            "
+            """,
+        ),
+        (
+            "open--dot",
+            _("Open"),
+            """
+            onclick="
+                $('#applyFilter').closest('form').find('[name=closed]').val('false');
+                $('#applyFilter').click();
+                
+            "
+            """,
+        ),
+    ]
+
+    row_status_class = "closed-{closed}"
+
+    sortby_mapping = [
+        ("Recruitment", "recruitment_column"),
+        ("Vaccancy", "vacancy"),
+        ("Start Date", "start_date"),
+        ("End date", "end_date"),
+    ]
+
+    row_attrs = """
+                class="oh-permission-table--collapsed"
+                hx-get='{recruitment_detail_view}?instance_ids={ordered_ids}'
+                hx-target="#genericModalBody"
+                data-target="#genericModal"
+                data-toggle="oh-modal-toggle"
+                """
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(
+    permission_required(perm="recruitment.view_recruitment"), name="dispatch"
+)
+class RecruitmentNav(HorillaNavView):
+    """
+    For nav bar
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("list-recruitment")
+
+        self.create_attrs = f"""
+                            hx-get='{reverse_lazy('recruitment-create')}'
+                            hx-target="#genericModalBody"
+                            data-target="#genericModal"
+                            data-toggle="oh-modal-toggle"
+                            """
+
+    nav_title = _("Recruitment")
+    filter_instance = RecruitmentFilter()
+    filter_form_context_name = "form"
+    search_swap_target = "#listContainer"
+    filter_body_template = "cbv/recruitment/filters.html"
+
+
+class RecruitmentCreationFormExtended(RecruitmentCreationForm):
+    """
+    extended form view for create
+    """
+
+    cols = {"title": 12, "description": 12,
+            "is_published":4,
+            "optional_profile_image":4,
+            "optional_resume":4,}
+
+    class Meta:
+        """
+        Meta class to add the additional info
+        """
+
+        model = Recruitment
+        fields = [
+            "title",
+            "description",
+            "open_positions",
+            "recruitment_managers",
+            "start_date",
+            "end_date",
+            "vacancy",
+            "company_id",
+            "survey_templates",
+            "skills",
+            "is_published",
+            "optional_profile_image",
+            "optional_resume",
+            'publish_in_linkedin',
+            'linkedin_account_id',
+        ]
+        exclude = ["is_active"]
+        widgets = {
+            "start_date": forms.DateInput(attrs={"type": "date"}),
+            "end_date": forms.DateInput(attrs={"type": "date"}),
+            "description": forms.Textarea(attrs={"data-summernote": ""}),
+        }
+        labels = {
+            "description": _("Description"),
+            "start_date": _("Start Date"),
+            "end_date": _("End Date"),
+            "survey_templates": _("Survey Templates"),
+            "is_published": _("Is Published?"),
+            "vacancy": _("Vacancy"),
+            "open_positions": _("Job Position"),
+            "recruitment_managers": _("Managers"),
+            "optional_profile_image":_("Optional Profile Image?"),
+            "optional_resume": _("Optional Resume?")
+        }
+
+
+class RecruitmentNewSkillForm(HorillaFormView):
+    """
+    form view for add new skill
+    """
+
+    model = Skill
+    form_class = SkillsForm
+    new_display_title = _("Skills")
+    is_dynamic_create_view = True
+
+    def form_valid(self, form: SkillsForm) -> HttpResponse:
+        if form.is_valid():
+            message = _("New Skill Created Successfully")
+            form.save()
+            messages.success(self.request, message)
+            return self.HttpResponse()
+        return super().form_valid(form)
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(
+    permission_required(perm="recruitment.view_recruitment"), name="dispatch"
+)
+class RecruitmentForm(HorillaFormView):
+    """
+    Form View
+    """
+
+    model = Recruitment
+    form_class = RecruitmentCreationFormExtended
+    new_display_title = _("Add Recruitment")
+    dynamic_create_fields = [("skills", RecruitmentNewSkillForm)]
+    template_name = "cbv/recruitment/recruitment_form.html"
+
+    
+
+    def get_context_data(self, **kwargs):
+        """
+        Return context data with optional verbose name for form based on instance state.
+        """
+        context = super().get_context_data(**kwargs)
+
+        if self.form.instance.pk:
+            self.form_class.verbose_name = "Edit Recruitment"
+        return context
+
+    def form_valid(self, form: RecruitmentCreationFormExtended) -> HttpResponse:
+        """
+        Process form submission to save or update a Recruitment object and display success message.
+        """
+        if form.is_valid():
+            if form.instance.pk:
+                recruitment = form.save()
+                recruitment_managers = self.request.POST.getlist("recruitment_managers")
+                if recruitment_managers:
+                    recruitment.recruitment_managers.set(recruitment_managers)
+                if (recruitment.publish_in_linkedin and recruitment.linkedin_account_id):
+                    delete_post(recruitment)
+                    post_recruitment_in_linkedin(self.request,recruitment,recruitment.linkedin_account_id)
+                message = _("Recruitment Updated Successfully")
+            else:
+                recruitment = form.save()
+                recruitment_managers = self.request.POST.getlist("recruitment_managers")
+                if recruitment_managers:
+                    recruitment.recruitment_managers.set(recruitment_managers)
+                if (recruitment.publish_in_linkedin and recruitment.linkedin_account_id):
+                    post_recruitment_in_linkedin(self.request,recruitment,recruitment.linkedin_account_id)
+                message = _("Recruitment Created Successfully")
+            messages.success(self.request, message)
+            if self.request.GET.get("pipeline") == "true" :
+                return HttpResponse("<script>window.location.reload();</script>")
+            return self.HttpResponse()
+        return super().form_valid(form)
+
+
+
+class AddCandidateFormView(HorillaFormView):
+    """
+    form view for add candidate
+    """
+
+    form_class = AddCandidateForm
+    model = Candidate
+    new_display_title = _("Add Candidate")
+
+    def get_initial(self) -> dict:
+        initial = super().get_initial()
+        stage_id = self.request.GET.get("stage_id")
+        rec_id = self.request.GET.get("rec_id")
+        initial["stage_id"] = stage_id
+        initial["rec_id"] = rec_id
+        return initial
+
+    def form_valid(self, form: AddCandidateForm) -> HttpResponse:
+        if form.is_valid():
+            message = _("Candidate Added successfully.")
+            form.save()
+            messages.success(self.request, message)
+            return self.HttpResponse("<script>window.location.reload</script>")
+        return super().form_valid(form)
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(
+    permission_required(perm="recruitment.view_recruitment"), name="dispatch"
+)
+class RecruitmentFormDuplicate(HorillaFormView):
+    """
+    Duplicate form view
+    """
+
+    model = Recruitment
+    form_class = RecruitmentCreationFormExtended
+
+    def get_context_data(self, **kwargs):
+        """
+        Return context data for duplicating a Recruitment object form with modified initial values.
+        """
+        context = super().get_context_data(**kwargs)
+        original_object = Recruitment.objects.get(id=self.kwargs["pk"])
+        form = self.form_class(instance=original_object)
+        for field_name, field in form.fields.items():
+            if isinstance(field, forms.CharField):
+                if field.initial:
+                    initial_value = field.initial
+                else:
+                    initial_value = f"{form.initial.get(field_name, '')} (copy)"
+                form.initial[field_name] = initial_value
+                form.fields[field_name].initial = initial_value
+        context["form"] = form
+        self.form_class.verbose_name = _("Duplicate")
+        return context
+
+    def form_valid(self, form: RecruitmentCreationFormExtended) -> HttpResponse:
+        """
+        Process form submission to add a new recruitment.
+        """
+        form = self.form_class(self.request.POST)
+        if form.is_valid():
+            recruitment = form.save()
+            message = _("Recruitment added")
+            recruitment.save()
+            recruitment_managers = self.request.POST.getlist("recruitment_managers")
+            job_positions = self.request.POST.getlist("open_positions")
+            if recruitment_managers:
+                recruitment.recruitment_managers.set(recruitment_managers)
+            if job_positions:
+                recruitment.open_positions.set(job_positions)
+            messages.success(self.request, message)
+            return self.HttpResponse()
+
+        return super().form_valid(form)
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(
+    permission_required(perm="recruitment.view_recruitment"), name="dispatch"
+)
+class RecruitmentDetailView(HorillaDetailedView):
+    """
+    detail view of page
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.body = [
+            ("Managers", "managers_detail", True),
+            ("Open Jobs", "open_job_detail", True),
+            ("Vaccancy", "vacancy"),
+            ("Total Hires", "tot_hires"),
+            ("Start Date", "start_date"),
+            ("End date", "end_date"),
+        ]
+
+    action_method = "detail_actions"
+
+    model = Recruitment
+    title = _("Details")
+    header = {
+        "title": "title",
+        "subtitle": "status_col",
+        "avatar": "get_avatar",
+    }
diff --git a/recruitment/cbv/skill_zone.py b/recruitment/cbv/skill_zone.py
new file mode 100644
index 000000000..7287fed59
--- /dev/null
+++ b/recruitment/cbv/skill_zone.py
@@ -0,0 +1,78 @@
+"""
+this page is handling the cbv methods of skill zone page
+"""
+
+from django.contrib import messages
+from django.http import HttpResponse
+from django.utils.decorators import method_decorator
+from django.utils.translation import gettext_lazy as _
+from horilla_views.cbv_methods import login_required
+from recruitment.cbv_decorators import manager_can_enter
+from horilla_views.generic.cbv.views import (
+    HorillaFormView,
+)
+from recruitment.forms import SkillZoneCandidateForm, SkillZoneCreateForm
+from recruitment.models import SkillZone, SkillZoneCandidate
+
+
+
+@method_decorator(login_required,name="dispatch")
+@method_decorator(manager_can_enter("recruitment.add_skillzone"),name="dispatch")
+class SkillZoneFormView(HorillaFormView):
+    """
+    form view for create skill zone
+    """
+
+    form_class = SkillZoneCreateForm
+    model = SkillZone
+    new_display_title = _("Create Skill Zone")
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        if self.form.instance.pk:
+            self.form_class.verbose_name = _("Update Skill Zone")
+
+        return context
+
+    def form_valid(self, form: SkillZoneCreateForm) -> HttpResponse:
+        if form.is_valid():
+            if form.instance.pk:
+                message = _("Skill Zone updated successfully.")
+            else:
+                message = _("Skill Zone created successfully")
+            form.save()
+
+            messages.success(self.request, _(message))
+            return self.HttpResponse("<script>window.location.reload()</script>")
+        return super().form_valid(form)
+
+
+@method_decorator(login_required,name="dispatch")
+@method_decorator(manager_can_enter("recruitment.add_skillzonecandidate"),name="dispatch")
+class SkillZoneCandidateFormView(HorillaFormView):
+    """
+    form view for create skill zone candidate
+    """
+
+    form_class = SkillZoneCandidateForm
+    model = SkillZoneCandidate
+    new_display_title = _("Add Candidate to  skill zone")
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        id = self.kwargs.get("sz_id")
+        self.form.fields["skill_zone_id"].initial = id
+        # if self.form.instance.pk:
+        #     self.form_class.verbose_name = _("Update Skill Zone")
+        return context
+
+    def form_valid(self, form: SkillZoneCandidateForm) -> HttpResponse:
+        if form.is_valid():
+            if form.instance.pk:
+                message = _("Candidate updated successfully.")
+            else:
+                message = _("Candidate added successfully.")
+            form.save(commit=True)
+            messages.success(self.request, _(message))
+            return self.HttpResponse("<script>window.location.reload()</script>")
+        return super().form_valid(form)
diff --git a/recruitment/cbv/skills.py b/recruitment/cbv/skills.py
new file mode 100644
index 000000000..c0418129f
--- /dev/null
+++ b/recruitment/cbv/skills.py
@@ -0,0 +1,150 @@
+"""
+this page is handling the cbv methods for skills in settings
+"""
+
+from typing import Any
+from django.http import HttpResponse
+from django.shortcuts import render
+from django.urls import reverse
+from django.contrib import messages
+from django.utils.decorators import method_decorator
+from django.utils.translation import gettext_lazy as _
+from recruitment.filters import SkillsFilter
+from recruitment.forms import SkillsForm
+from recruitment.models import Skill
+from horilla_views.cbv_methods import login_required, permission_required
+from horilla_views.generic.cbv.views import (
+    HorillaFormView,
+    HorillaListView,
+    HorillaNavView,
+)
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(
+    permission_required(perm="recruitment.view_recruitment"), name="dispatch"
+)
+class SkillsListView(HorillaListView):
+    """
+    list view of the skills in settings
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("skills-list-view")
+
+    model = Skill
+    filter_class = SkillsFilter
+
+    columns = [(_("SI.No"), "get_sino"), (_("Skill"), "title")]
+
+    row_attrs = """
+                    id="skillsTr{get_delete_instance}"
+                """
+    
+    actions = [
+        {
+            "action": _("Edit"),
+            "icon": "create-outline",
+            "attrs": """
+                        class="oh-btn oh-btn--light-bkg w-100"
+                        hx-get='{get_update_url}?instance_ids={ordered_ids}'
+								hx-target="#genericModalBody"
+								data-toggle="oh-modal-toggle"
+								data-target="#genericModal"
+                      """,
+        },
+        {
+            "action": _("Delete"),
+            "icon": "trash-outline",
+            "attrs": """
+                        class="oh-btn oh-btn--light-bkg w-100 text-danger"
+                        hx-post="{get_delete_url}"
+                        hx-swap="delete"
+                        hx-confirm="Are you sure want to delete this skill?"
+                        hx-target="#skillsTr{get_delete_instance}"         
+                      """,
+        },
+    ]
+
+    header_attrs = {
+        "title": """ style="width:200px !important" """,
+        "action": """ style="width:200px !important" """
+    }
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(
+    permission_required(perm="recruitment.view_recruitment"), name="dispatch"
+)
+class SkillsNavView(HorillaNavView):
+    """
+    navbar of skills view
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("skills-list-view")
+        self.create_attrs = f"""
+                            onclick = "event.stopPropagation();"
+                            data-toggle="oh-modal-toggle"
+                            data-target="#genericModal"
+                            hx-target="#genericModalBody"
+                            hx-get="{reverse('settings-create-skills')}"
+                            """
+
+    nav_title = _("Skills")
+    search_swap_target = "#listContainer"
+    filter_instance = SkillsFilter()
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(
+    permission_required(perm="recruitment.add_recruitment"), name="dispatch"
+)
+class SkillsCreateForm(HorillaFormView):
+    """
+    form view for creating and update skills in settings
+    """
+
+    model = Skill
+    form_class = SkillsForm
+    new_display_title = _("Skills")
+
+    def get_context_data(self, **kwargs):
+        """
+        Add form to context, initializing with instance if it exists.
+        """
+        context = super().get_context_data(**kwargs)
+        form = self.form_class()
+        if self.form.instance.pk:
+            form = self.form_class(instance=self.form.instance)
+            self.form_class.verbose_name = _("Update Skills")
+        context[form] = form
+        return context
+
+    def form_invalid(self, form: Any) -> HttpResponse:
+        """
+        Handles and renders form errors or defers to superclass.
+        """
+        if self.form.instance.pk:
+            self.form_class.verbose_name = _("Update Skills")
+        if not form.is_valid():
+            errors = form.errors.as_data()
+            return render(
+                self.request, self.template_name, {"form": form, "errors": errors}
+            )
+        return super().form_invalid(form)
+
+    def form_valid(self, form: SkillsForm) -> HttpResponse:
+        """
+        Handle valid form submission.
+        """
+        if form.is_valid():
+            if form.instance.pk:
+                messages.success(self.request, _("Skill updated"))
+            else:
+                messages.success(self.request, _("Skill created successfully!"))
+            form.save()
+            return self.HttpResponse()
+        return super().form_valid(form)
diff --git a/recruitment/cbv/stage_view.py b/recruitment/cbv/stage_view.py
new file mode 100644
index 000000000..dc57a9d16
--- /dev/null
+++ b/recruitment/cbv/stage_view.py
@@ -0,0 +1,314 @@
+"""
+Stage.py
+"""
+
+from typing import Any
+import contextlib
+from django import forms
+from django.http import HttpResponse
+from django.shortcuts import render
+from django.urls import reverse, reverse_lazy
+from django.utils.decorators import method_decorator
+from django.utils.translation import gettext_lazy as _
+from django.contrib import messages
+from notifications.signals import notify
+from employee.models import Employee
+from horilla_views.cbv_methods import login_required, permission_required
+from horilla_views.generic.cbv.views import (
+    HorillaDetailedView,
+    HorillaFormView,
+    HorillaListView,
+    HorillaNavView,
+    TemplateView,
+)
+from recruitment.filters import StageFilter
+from recruitment.forms import StageCreationForm
+from recruitment.models import Stage
+
+
+@method_decorator(login_required, name="dispatch")
+@method_decorator(permission_required(perm="recruitment.view_stage"), name="dispatch")
+class StageView(TemplateView):
+    """
+    Stage
+    """
+
+    template_name = "cbv/stages/stages.html"
+
+
+class StageList(HorillaListView):
+    """
+    List view of stage
+    """
+
+    bulk_update_fields = [
+        "stage_managers",
+    ]
+
+    model = Stage
+    filter_class = StageFilter
+
+    def get_queryset(self):
+        """
+        Returns a filtered queryset of active recruitments.
+        """
+        queryset = super().get_queryset()
+        queryset = queryset.filter(recruitment_id__is_active=True)
+        return queryset
+
+    columns = [
+        ("Title", "title_col"),
+        ("Managers", "managers_col"),
+        ("Type", "get_type"),
+    ]
+    sortby_mapping = [
+        ("Type", "get_type"),
+    ]
+    action_method = "actions_col"
+
+    row_status_indications = [
+        (
+            "hired--dot",
+            "Hired",
+            """
+            onclick="
+                $('#applyFilter').closest('form').find('[name=stage_type]').val('hired');
+                $('#applyFilter').click();
+            "
+            """,
+        ),
+        (
+            "cancelled--dot",
+            "Cancelled",
+            """
+            onclick="
+                 $('#applyFilter').closest('form').find('[name=stage_type]').val('cancelled');
+                $('#applyFilter').click();
+            "
+            """,
+        ),
+        (
+            "interview--dot",
+            "Interview",
+            """
+            onclick=" $('#applyFilter').closest('form').find('[name=stage_type]').val('interview');
+                $('#applyFilter').click();
+            "
+            """,
+        ),
+        (
+            "test--dot",
+            "Test",
+            """
+            onclick=" $('#applyFilter').closest('form').find('[name=stage_type]').val('test');
+                $('#applyFilter').click();
+            "
+            """,
+        ),
+        (
+            "initial--dot",
+            "Initial",
+            """
+            onclick=" $('#applyFilter').closest('form').find('[name=stage_type]').val('initial');
+                $('#applyFilter').click();
+            "
+            """,
+        ),
+    ]
+
+    row_status_class = "stage-type-{stage_type}"
+
+    row_attrs = """
+                class="oh-permission-table--collapsed"
+                hx-get='{stage_detail_view}?instance_ids={ordered_ids}'
+                hx-target="#genericModalBody"
+                data-target="#genericModal"
+                data-toggle="oh-modal-toggle"
+                """
+    header_attrs = {
+        "title_col": """
+                      style='width:250px !important'
+                      """,
+        "managers_col": """
+                      style='width:250px !important'
+                      """,
+        "get_type": """
+                      style='width:250px !important'
+                      """,
+        "action": """
+                   style="width:250px !important" 
+                   """,
+    }
+
+
+class StageNav(HorillaNavView):
+    """
+    For nav bar
+    """
+
+    template_name = "cbv/stages/stage_main.html"
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.search_url = reverse("list-stage")
+        self.create_attrs = f"""
+                          hx-get='{reverse_lazy('rec-stage-create')}'
+                          hx-target="#genericModalBody"
+                          data-target="#genericModal"
+                          data-toggle="oh-modal-toggle"
+                          """
+
+    nav_title = _("Stage")
+    filter_instance = StageFilter()
+    filter_form_context_name = "form"
+    search_swap_target = "#listContainer"
+    filter_body_template = "cbv/stages/filter.html"
+
+    group_by_fields = [("recruitment_id", "Recruitment")]
+
+
+class StageFormView(HorillaFormView):
+    """
+    Form View
+    """
+
+    model = Stage
+    form_class = StageCreationForm
+    new_display_title = _("Add Stage")
+
+    def get_context_data(self, **kwargs):
+        """
+        Returns context with a form for creating or editing a stage.
+        """
+        context = super().get_context_data(**kwargs)
+        rec_id = self.request.GET.get("recruitment_id")
+        self.form.fields["recruitment_id"].initial = rec_id
+        if self.form.instance.pk:
+            self.form_class.verbose_name = _("Edit Stage")
+            self.form_class(instance=self.form.instance)
+        context["form"] = self.form
+        return context
+
+    def form_valid(self, form: StageCreationForm) -> HttpResponse:
+        """
+        Handles valid form submission, updating or saving a stage.
+        """
+        if form.is_valid():
+            if form.instance.pk:
+                stage = form.save()
+                stage.save()
+                stage_managers = self.request.POST.getlist("stage_managers")
+                if stage_managers:
+                    stage.stage_managers.set(stage_managers)
+                message = _("Stage updated")
+            else:
+                stage_obj = form.save()
+                stage_obj.stage_managers.set(
+                    Employee.objects.filter(id__in=form.data.getlist("stage_managers"))
+                )
+                stage_obj.save()
+                recruitment_obj = stage_obj.recruitment_id
+                rec_stages = (
+                    Stage.objects.filter(recruitment_id=recruitment_obj, is_active=True)
+                    .order_by("sequence")
+                    .last()
+                )
+                if rec_stages.sequence is None:
+                    stage_obj.sequence = 1
+                else:
+                    stage_obj.sequence = rec_stages.sequence + 1
+                stage_obj.save()
+                message = _("Stage added")
+                with contextlib.suppress(Exception):
+                    managers = stage_obj.stage_managers.select_related(
+                        "employee_user_id"
+                    )
+                    users = [employee.employee_user_id for employee in managers]
+                    notify.send(
+                        self.request.user.employee_get,
+                        recipient=users,
+                        verb=f"Stage {stage_obj} is updated on recruitment {stage_obj.recruitment_id},\
+                            You are chosen as one of the managers",
+                        verb_ar=f"تم تحديث المرحلة {stage_obj} في التوظيف\
+                            {stage_obj.recruitment_id}، تم اختيارك كأحد المديرين",
+                        verb_de=f"Stufe {stage_obj} wurde in der Rekrutierung {stage_obj.recruitment_id}\
+                            aktualisiert. Sie wurden als einer der Manager ausgewählt",
+                        verb_es=f"La etapa {stage_obj} ha sido actualizada en la contratación\
+                            {stage_obj.recruitment_id}. Has sido elegido/a como uno de los gerentes",
+                        verb_fr=f"L'étape {stage_obj} a été mise à jour dans le recrutement\
+                            {stage_obj.recruitment_id}. Vous avez été choisi(e) comme l'un des responsables",
+                        icon="people-circle",
+                        redirect=reverse("pipeline"),
+                    )
+            messages.success(self.request, message)
+            return self.HttpResponse()
+        return super().form_valid(form)
+
+
+class StageDuplicateForm(HorillaFormView):
+    """
+    Duplicate form view
+    """
+
+    model = Stage
+    form_class = StageCreationForm
+
+    def get_context_data(self, **kwargs):
+        """
+        Prepares form context for duplicating a stage.
+        """
+        context = super().get_context_data(**kwargs)
+        original_object = Stage.objects.get(id=self.kwargs["pk"])
+        form = self.form_class(instance=original_object)
+        for field_name, field in form.fields.items():
+            if isinstance(field, forms.CharField):
+                if field.initial:
+                    initial_value = field.initial
+                else:
+                    initial_value = f"{form.initial.get(field_name, '')} (copy)"
+                form.initial[field_name] = initial_value
+                form.fields[field_name].initial = initial_value
+        context["form"] = form
+        self.form_class.verbose_name = "Duplicate"
+        return context
+
+    def form_valid(self, form: StageCreationForm) -> HttpResponse:
+        """
+        Handles valid submission of a stage creation form.
+        """
+        form = self.form_class(self.request.POST)
+        if form.is_valid():
+            message = "Stage added"
+            stage = form.save()
+            stage.save()
+            stage_managers = self.request.POST.getlist("stage_managers")
+            if stage_managers:
+                stage.stage_managers.set(stage_managers)
+            messages.success(self.request, _(message))
+            return self.HttpResponse()
+
+        return super().form_valid(form)
+
+
+class StageDetailView(HorillaDetailedView):
+    """
+    detail view of page
+    """
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.body = [
+            ("Title", "stage"),
+            ("Managers", "detail_managers_col"),
+            ("Type", "get_type"),
+        ]
+
+    action_method = "detail_action"
+
+    model = Stage
+    title = _("Details")
+    header = {
+        "title": "recruitment_id",
+        "subtitle": "Stages",
+        "avatar": "get_avatar",
+    }
diff --git a/recruitment/cbv_decorators.py b/recruitment/cbv_decorators.py
new file mode 100644
index 000000000..74c5add19
--- /dev/null
+++ b/recruitment/cbv_decorators.py
@@ -0,0 +1,111 @@
+from django.http import HttpResponse
+from django.shortcuts import render
+from django.contrib import messages
+from employee.models import Employee
+from horilla_views.cbv_methods import decorator_with_arguments
+from recruitment.models import Recruitment, Stage
+from horilla.horilla_middlewares import _thread_locals
+
+
+@decorator_with_arguments
+def manager_can_enter(function, perm):
+    """
+    Decorator that checks if the user has the specified permission or is a manager.
+
+    Args:
+        perm (str): The permission to check.
+
+    Returns:
+        function: The decorated function.
+
+    Raises:
+        None
+
+    """
+
+    def _function(self, *args, **kwargs):
+        """
+        Inner function that performs the permission and manager check.
+
+        Args:
+            request (HttpRequest): The request object.
+            *args: Variable length argument list.
+            **kwargs: Arbitrary keyword arguments.
+
+        Returns:
+            HttpResponse: The response from the decorated function.
+
+        """
+        request = getattr(_thread_locals, "request")
+        if not getattr(self, "request", None):
+            self.request = request
+        user = request.user
+        employee = Employee.objects.filter(employee_user_id=user).first()
+        is_manager = (
+            Stage.objects.filter(stage_managers=employee).exists()
+            or Recruitment.objects.filter(recruitment_managers=employee).exists()
+        )
+        if user.has_perm(perm) or is_manager:
+            return function(self, *args, **kwargs)
+        messages.info(request, "You dont have permission.")
+        previous_url = request.META.get("HTTP_REFERER", "/")
+        script = f'<script>window.location.href = "{previous_url}"</script>'
+        key = "HTTP_HX_REQUEST"
+        if key in request.META.keys():
+            return render(request, "decorator_404.html")
+        return HttpResponse(script)
+
+    return _function
+
+
+@decorator_with_arguments
+def all_manager_can_enter(function, perm):
+    """
+    Decorator that checks if the user has the specified permission or is a manager.
+
+    Args:
+        perm (str): The permission to check.
+
+    Returns:
+        function: The decorated function.
+
+    Raises:
+        None
+
+    """
+
+    def _function(self, *args, **kwargs):
+        """
+        Inner function that performs the permission and manager check.
+
+        Args:
+            request (HttpRequest): The request object.
+            *args: Variable length argument list.
+            **kwargs: Arbitrary keyword arguments.
+
+        Returns:
+            HttpResponse: The response from the decorated function.
+
+        """
+        request = getattr(_thread_locals, "request")
+        if not getattr(self, "request", None):
+            self.request = request
+        user = request.user
+        employee = Employee.objects.filter(employee_user_id=user).first()
+        is_manager = (
+            Stage.objects.filter(stage_managers=employee).exists()
+            or Recruitment.objects.filter(recruitment_managers=employee).exists()
+            or request.user.employee_get.onboardingstage_set.exists()
+            or request.user.employee_get.onboarding_task.exists()
+        )
+        if user.has_perm(perm) or is_manager:
+            return function(self, *args, **kwargs)
+        messages.info(request, "You dont have permission.")
+        previous_url = request.META.get("HTTP_REFERER", "/")
+        script = f'<script>window.location.href = "{previous_url}"</script>'
+        key = "HTTP_HX_REQUEST"
+        if key in request.META.keys():
+            return render(request, "decorator_404.html")
+        return HttpResponse(script)
+
+    return _function
diff --git a/recruitment/decorators.py b/recruitment/decorators.py
index e75f8171c..7cea0c536 100644
--- a/recruitment/decorators.py
+++ b/recruitment/decorators.py
@@ -105,6 +105,56 @@ def manager_can_enter(function, perm):
     return _function
 
 
+@decorator_with_arguments
+def all_manager_can_enter(function, perm):
+    """
+    Decorator that checks if the user has the specified permission or is a manager.
+
+    Args:
+        perm (str): The permission to check.
+
+    Returns:
+        function: The decorated function.
+
+    Raises:
+        None
+
+    """
+
+    def _function(request, *args, **kwargs):
+        """
+        Inner function that performs the permission and manager check.
+
+        Args:
+            request (HttpRequest): The request object.
+            *args: Variable length argument list.
+            **kwargs: Arbitrary keyword arguments.
+
+        Returns:
+            HttpResponse: The response from the decorated function.
+
+        """
+        user = request.user
+        employee = Employee.objects.filter(employee_user_id=user).first()
+        is_manager = (
+            Stage.objects.filter(stage_managers=employee).exists()
+            or Recruitment.objects.filter(recruitment_managers=employee).exists()
+            or request.user.employee_get.onboardingstage_set.exists()
+            or request.user.employee_get.onboarding_task.exists()
+        )
+        if user.has_perm(perm) or is_manager:
+            return function(request, *args, **kwargs)
+        messages.info(request, "You dont have permission.")
+        previous_url = request.META.get("HTTP_REFERER", "/")
+        script = f'<script>window.location.href = "{previous_url}"</script>'
+        key = "HTTP_HX_REQUEST"
+        if key in request.META.keys():
+            return render(request, "decorator_404.html")
+        return HttpResponse(script)
+
+    return _function
+
+
 @decorator_with_arguments
 def recruitment_manager_can_enter(function, perm):
     """
diff --git a/recruitment/filters.py b/recruitment/filters.py
index 000ab4406..d7d85fdd9 100644
--- a/recruitment/filters.py
+++ b/recruitment/filters.py
@@ -12,12 +12,15 @@ from django import forms
 from django.utils.translation import gettext_lazy as _
 
 from base.filters import FilterSet
+from horilla.filters import HorillaFilterSet, filter_by_name
 from recruitment.models import (
     Candidate,
     InterviewSchedule,
     LinkedInAccount,
     Recruitment,
     RecruitmentSurvey,
+    RejectReason,
+    Skill,
     SkillZone,
     SkillZoneCandidate,
     Stage,
@@ -27,7 +30,7 @@ from recruitment.models import (
 # from django.forms.widgets import Boo
 
 
-class CandidateFilter(FilterSet):
+class CandidateFilter(HorillaFilterSet):
     """
     Filter set class for Candidate model
 
@@ -36,6 +39,8 @@ class CandidateFilter(FilterSet):
     """
 
     name = django_filters.CharFilter(field_name="name", lookup_expr="icontains")
+    search = django_filters.CharFilter(method="search_by_name", lookup_expr="icontains")
+
     start_onboard = django_filters.CharFilter(
         method="start_onboard_method", lookup_expr="icontains"
     )
@@ -118,12 +123,16 @@ class CandidateFilter(FilterSet):
         ).distinct()
         return queryset
 
-    def start_onboard_method(self, queryset, _, value):
+    def search_by_name(self, queryset, _, value):
         """
-        This method will include the candidates whether they are on the onboarding pipline stage
+        search by name method
         """
-
-        return queryset.filter(onboarding_stage__isnull=False)
+        queryset = (
+            queryset.filter(name__icontains=value)
+            | queryset.filter(stage_id__stage__icontains=value)
+            | queryset.filter(stage_id__recruitment_id__title__icontains=value)
+        )
+        return queryset.distinct()
 
     class Meta:
         """
@@ -236,7 +245,7 @@ BOOLEAN_CHOICES = (
 )
 
 
-class RecruitmentFilter(FilterSet):
+class RecruitmentFilter(HorillaFilterSet):
     """
     Filter set class for Recruitment model
 
@@ -311,9 +320,12 @@ class RecruitmentFilter(FilterSet):
         first_name = parts[0]
         last_name = " ".join(parts[1:]) if len(parts) > 1 else ""
 
-        job_queryset = queryset.filter(
-            open_positions__job_position__icontains=value
-        ) | queryset.filter(title__icontains=value)
+        job_queryset = (
+            queryset.filter(open_positions__job_position__icontains=value)
+            | queryset.filter(title__icontains=value)
+            | queryset.filter(stage_set__stage__icontains=value)
+            | queryset.filter(stage_set__candidate__name__icontains=value)
+        )
         if first_name and last_name:
             queryset = queryset.filter(
                 recruitment_managers__employee_first_name__icontains=first_name,
@@ -356,7 +368,29 @@ class RecruitmentFilter(FilterSet):
         return queryset.distinct()
 
 
-class StageFilter(FilterSet):
+class SkillsFilter(FilterSet):
+
+    search = django_filters.CharFilter(field_name="title", lookup_expr="icontains")
+
+    class Meta:
+        model = Skill
+        fields = [
+            "title",
+        ]
+
+
+class RejectReasonFilter(FilterSet):
+
+    search = django_filters.CharFilter(field_name="title", lookup_expr="icontains")
+
+    class Meta:
+        model = RejectReason
+        fields = [
+            "title",
+        ]
+
+
+class StageFilter(HorillaFilterSet):
     """
     Filter set class for Stage model
 
@@ -391,7 +425,13 @@ class StageFilter(FilterSet):
         parts = value.split()
         first_name = parts[0]
         last_name = " ".join(parts[1:]) if len(parts) > 1 else ""
-        recruitment_query = queryset.filter(recruitment_id__title__icontains=value)
+        recruitment_query = (
+            queryset.filter(recruitment_id__title__icontains=value)
+            | queryset.filter(candidate__name__icontains=value)
+            | queryset.filter(
+                recruitment_id__stage_set__candidate__name__icontains=value
+            )
+        )
         # Filter the queryset by first name and last name
         stage_queryset = queryset.filter(stage__icontains=value)
         if first_name and last_name:
@@ -409,7 +449,7 @@ class StageFilter(FilterSet):
             )
 
         queryset = queryset | stage_queryset | recruitment_query
-        return queryset
+        return queryset.distinct()
 
     def pipeline_search(self, queryset, _, value):
         """
@@ -423,7 +463,7 @@ class StageFilter(FilterSet):
         return queryset.distinct()
 
 
-class SurveyFilter(FilterSet):
+class SurveyFilter(HorillaFilterSet):
     """
     SurveyFIlter
     """
@@ -628,7 +668,7 @@ class SkillZoneCandFilter(FilterSet):
         ).distinct()
 
 
-class InterviewFilter(FilterSet):
+class InterviewFilter(HorillaFilterSet):
     """
     Filter set class for Candidate model
 
diff --git a/recruitment/forms.py b/recruitment/forms.py
index df13f7ee1..d9695c9dd 100644
--- a/recruitment/forms.py
+++ b/recruitment/forms.py
@@ -36,6 +36,7 @@ from django.utils.translation import gettext_lazy as _
 from base.forms import Form
 from base.forms import ModelForm as BaseModelForm
 from base.methods import reload_queryset
+from base.widgets import CustomTextInputWidget
 from employee.filters import EmployeeFilter
 from employee.models import Employee
 from horilla import horilla_middlewares
@@ -231,16 +232,12 @@ class RecruitmentCreationForm(BaseModelForm):
     Form for Recruitment model
     """
 
-    # survey_templates = forms.ModelMultipleChoiceField(
-    #     queryset=SurveyTemplate.objects.all(),
-    #     widget=forms.SelectMultiple(),
-    #     label=_("Survey Templates"),
-    #     required=False,
-    # )
-    # linkedin_account_id = forms.ModelChoiceField(
-    #     queryset=LinkedInAccount.objects.filter(is_active=True)
-    #     label=_('')
-    # )
+    cols = {
+        "is_published": 4,
+        "optional_profile_image": 4,
+        "optional_resume": 4,
+    }
+
     class Meta:
         """
         Meta class to add the additional info
@@ -265,7 +262,6 @@ class RecruitmentCreationForm(BaseModelForm):
 
     def __init__(self, *args, **kwargs):
         super().__init__(*args, **kwargs)
-
         reload_queryset(self.fields)
         if not self.instance.pk:
             self.fields["recruitment_managers"] = HorillaMultiSelectField(
@@ -295,11 +291,6 @@ class RecruitmentCreationForm(BaseModelForm):
     # def create_option(self, *args,**kwargs):
     #     option = super().create_option(*args,**kwargs)
 
-    #     if option.get('value') == "create":
-    #         option['attrs']['class'] = 'text-danger'
-
-    #     return option
-
     def clean(self):
         if isinstance(self.fields["recruitment_managers"], HorillaMultiSelectField):
             ids = self.data.getlist("recruitment_managers")
@@ -748,6 +739,8 @@ class QuestionForm(ModelForm):
     QuestionForm
     """
 
+    cols = {"options": 12, "template_id": 12, "question": 12}
+
     verbose_name = "Survey Questions"
 
     recruitment = forms.ModelMultipleChoiceField(
@@ -836,6 +829,20 @@ class QuestionForm(ModelForm):
                 initial=initial,
             )
 
+        def create_options_field_more(option_key, initial=None):
+            self.fields[option_key] = forms.CharField(
+                widget=CustomTextInputWidget(
+                    delete_url="add-remove-options-field",
+                    attrs={
+                        "name": option_key,
+                        "id": f"{option_key}",
+                        "class": "oh-input w-100",
+                    },
+                ),
+                required=False,
+                initial=initial,
+            )
+
         if instance:
             split_options = instance.options.split(",")
             for i, option in enumerate(split_options):
@@ -843,7 +850,7 @@ class QuestionForm(ModelForm):
                     create_options_field("options", option)
                 else:
                     self.option_count += 1
-                    create_options_field(f"options{i}", option)
+                    create_options_field_more(f"options{i}", option)
 
         if instance:
             self.fields["recruitment"].initial = instance.recruitment_ids.all()
@@ -901,6 +908,10 @@ class TemplateForm(BaseModelForm):
     TemplateForm
     """
 
+    cols = {"title": 12, "description": 12, "company_id": 12}
+
+    verbose_name = "Template"
+
     class Meta:
         model = SurveyTemplate
         fields = "__all__"
@@ -988,6 +999,8 @@ class CandidateExportForm(forms.Form):
 
 class SkillZoneCreateForm(BaseModelForm):
 
+    cols = {"title": 12, "description": 12, "company_id": 12}
+
     class Meta:
         """
         Class Meta for additional options
@@ -998,8 +1011,10 @@ class SkillZoneCreateForm(BaseModelForm):
         exclude = ["is_active"]
 
 
-class SkillZoneCandidateForm(BaseModelForm):
-    verbose_name = _("Skill Zone Candidate")
+class SkillZoneCandidateForm(ModelForm):
+
+    cols = {"skill_zone_id": 12, "candidate_id": 12, "reason": 12}
+    verbose_name = "Skill Zone Candidate"
     candidate_id = forms.ModelMultipleChoiceField(
         queryset=Candidate.objects.all(),
         widget=forms.SelectMultiple,
@@ -1045,6 +1060,11 @@ class SkillZoneCandidateForm(BaseModelForm):
                 + " / "
                 + self.instance.skill_zone_id.title
             )
+            self.fields["candidate_id"] = forms.ModelChoiceField(
+                queryset=Candidate.objects.all(),
+                widget=forms.Select(attrs={"class": "oh-select oh-select2 w-100"}),
+                label=_("Candidate"),
+            )
 
     def save(self, commit: bool = True) -> SkillZoneCandidate:
 
@@ -1066,12 +1086,15 @@ class SkillZoneCandidateForm(BaseModelForm):
         return self.instance
 
 
-class ToSkillZoneForm(BaseModelForm):
-    verbose_name = _("Add To Skill Zone")
+class ToSkillZoneForm(ModelForm):
+
+    verbose_name = "Add To Skill Zone"
     skill_zone_ids = forms.ModelMultipleChoiceField(
         queryset=SkillZone.objects.all(), label=_("Skill Zones")
     )
 
+    cols = {"reason": 12, "skill_zone_ids": 12}
+
     class Meta:
         """
         Class Meta for additional options
@@ -1125,6 +1148,8 @@ class RejectReasonForm(ModelForm):
     RejectReasonForm
     """
 
+    cols = {"title": 12, "description": 12, "company_id": 12}
+
     verbose_name = "Reject Reason"
 
     class Meta:
@@ -1148,6 +1173,8 @@ class RejectedCandidateForm(ModelForm):
 
     verbose_name = "Rejected Candidate"
 
+    cols = {"reject_reason_id": 12, "description": 12}
+
     class Meta:
         model = RejectedCandidate
         fields = "__all__"
@@ -1172,6 +1199,16 @@ class ScheduleInterviewForm(BaseModelForm):
     ScheduleInterviewForm
     """
 
+    cols = {
+        "interview_date": 12,
+        "interview_time": 12,
+        "candidate_id": 12,
+        "description": 12,
+        "employee_id": 12,
+    }
+
+    verbose_name = "Schedule Interview"
+
     class Meta:
         model = InterviewSchedule
         fields = "__all__"
@@ -1185,6 +1222,19 @@ class ScheduleInterviewForm(BaseModelForm):
         self.fields["interview_time"].widget = forms.TimeInput(
             attrs={"type": "time", "class": "oh-input w-100"}
         )
+        candidate_attr = {
+            "hx-include": "#InterviewCreateForm",
+            "hx-target": "#id_employee_id_parent_div",
+            "hx-get": "/recruitment/get-interview-managers",
+            "hx-swap": "innerHTML",
+            "hx-select": "#id_employee_id_parent_div",
+            "hx-trigger": "change, load delay:300ms",
+        }
+
+        if self.instance.pk:
+            candidate_attr["hx-get"] += f"?pk={self.instance.pk}"
+
+        self.fields["candidate_id"].widget.attrs.update(candidate_attr)
 
     def clean(self):
 
@@ -1239,6 +1289,10 @@ class ScheduleInterviewForm(BaseModelForm):
 
 
 class SkillsForm(ModelForm):
+    cols = {
+        "title": 12,
+    }
+
     class Meta:
         model = Skill
         fields = ["title"]
@@ -1311,6 +1365,22 @@ class CandidateDocumentForm(ModelForm):
         return table_html
 
 
+class StageChangeForm(forms.ModelForm):
+    """
+    StageChangeForm
+    """
+
+    class Meta:
+        """
+        Meta class for additional options
+        """
+
+        model = Candidate
+        fields = [
+            "stage_id",
+        ]
+
+
 class LinkedInAccountForm(BaseModelForm):
     """
     LinkedInAccount form
diff --git a/recruitment/methods.py b/recruitment/methods.py
index 4c2497ebd..fd6952a9c 100644
--- a/recruitment/methods.py
+++ b/recruitment/methods.py
@@ -70,3 +70,15 @@ def update_rec_template_grp(upt_template_ids, template_groups, rec_id):
             )
             for survey in rec_surveys_templates:
                 survey.recruitment_ids.add(recruitment_obj)
+
+
+def in_all_managers(request):
+    """
+    Check the user in any recruitment/onboarding related managers
+    """
+    return (
+        request.user.employee_get.stage_set.exists()
+        or request.user.employee_get.recruitment_set.exists()
+        or request.user.employee_get.onboardingstage_set.exists()
+        or request.user.employee_get.onboarding_task.exists()
+    )
diff --git a/recruitment/models.py b/recruitment/models.py
index d63485d64..918dac52d 100644
--- a/recruitment/models.py
+++ b/recruitment/models.py
@@ -8,26 +8,30 @@ This module is used to register models for recruitment app
 import json
 import os
 import re
-from datetime import date
+from datetime import date, datetime, timezone
+from urllib.parse import urlencode
 from uuid import uuid4
 
 import django
 import requests
 from django import forms
 from django.conf import settings
+from django.contrib.auth.models import User
 from django.core.exceptions import ValidationError
 from django.core.files.storage import default_storage
 from django.core.validators import MaxValueValidator, MinValueValidator
 from django.db import models
 from django.db.models.signals import m2m_changed, post_save
 from django.dispatch import receiver
-from django.http import JsonResponse
-from django.urls import reverse_lazy
+from django.urls import reverse, reverse_lazy
+from django.utils import timezone as tz
+from django.utils.html import format_html
 from django.utils.translation import gettext_lazy as _
 
 from base.horilla_company_manager import HorillaCompanyManager
 from base.models import Company, JobPosition
 from employee.models import Employee
+from horilla.horilla_middlewares import _thread_locals
 from horilla.models import HorillaModel
 from horilla_audit.methods import get_diff
 from horilla_audit.models import HorillaAuditInfo, HorillaAuditLog
@@ -111,6 +115,40 @@ class Skill(HorillaModel):
         self.title = title.capitalize()
         super().save(*args, **kwargs)
 
+    def get_sino(self):
+        """
+        for get serial nos
+        """
+        all_instances = list(Skill.objects.order_by("id"))
+        sino = all_instances.index(self) + 1
+        return sino
+
+    def get_update_url(self):
+        """
+        This method to get update url
+        """
+        url = reverse_lazy("settings-update-skills", kwargs={"pk": self.pk})
+        return url
+
+    def get_delete_url(self):
+        """
+        This method to get delete url
+        """
+        base_url = reverse_lazy("delete-skills")
+        skill_id = self.pk
+        url = f"{base_url}?ids={skill_id}"
+        return url
+
+    def get_delete_instance(self):
+        """
+        to get instance for delete
+        """
+
+        return self.pk
+
+    def __str__(self) -> str:
+        return f"{self.title}"
+
     class Meta:
         verbose_name = _("Skill")
         verbose_name_plural = _("Skills")
@@ -239,7 +277,7 @@ class Recruitment(HorillaModel):
         if not self.is_event_based and self.job_position_id is not None:
             self.open_positions.add(self.job_position_id)
 
-        return title
+        return str(title)
 
     def clean(self):
         if self.title is None:
@@ -274,6 +312,119 @@ class Recruitment(HorillaModel):
         """
         return self.stage_set.order_by("sequence")
 
+    def recruitment_column(self):
+        """
+        This method for get custom column for recruitment.
+        """
+
+        return render_template(
+            path="cbv/recruitment/recruitment_col.html",
+            context={"instance": self},
+        )
+
+    def recruitment_detail_view(self):
+        """
+        detail view
+        """
+        url = reverse("recruitment-detail-view", kwargs={"pk": self.pk})
+        return url
+
+    def managers_column(self):
+        """
+        This method for get custom column for managers.
+        """
+
+        return render_template(
+            path="cbv/recruitment/managers_col.html",
+            context={"instance": self},
+        )
+
+    def managers_detail(self):
+        """
+        manager in detail view
+        """
+        employees = self.recruitment_managers.all()
+        if employees:
+            employee_names_string = "<br>".join(
+                [str(employee) for employee in employees]
+            )
+            managers_title = _("Managers")
+            return f'<span class="oh-timeoff-modal__stat-title">{managers_title}</span><span class="oh-timeoff-modal__stat-count">{employee_names_string}</span>'
+        else:
+            return ""
+
+    def managers(self):
+        manager_list = self.recruitment_managers.all()
+        formatted_managers = [
+            f"<div>{i + 1}. {manager}</div>" for i, manager in enumerate(manager_list)
+        ]
+        return "".join(formatted_managers)
+
+    def detail_actions(self):
+        """
+        This method for get custom column for managers.
+        """
+
+        return render_template(
+            path="cbv/recruitment/detail_action.html",
+            context={"instance": self},
+        )
+
+    def open_job_col(self):
+        """
+        This method for get custom column for open jobs.
+        """
+
+        return render_template(
+            path="cbv/recruitment/open_jobs.html",
+            context={"instance": self},
+        )
+
+    def open_job_detail(self):
+        """
+        open jobs in detail view
+        """
+        jobs = self.open_positions.all()
+        if jobs:
+            jobs_names_string = "<br>".join([str(job) for job in jobs])
+            job_title = _("Open Jobs")
+            return f'<span class="oh-timeoff-modal__stat-title">{job_title}</span><span class="oh-timeoff-modal__stat-count">{jobs_names_string}</span>'
+        else:
+            return ""
+
+    def tot_hires(self):
+        """
+        This method for get custom column for Total hires.
+        """
+
+        return render_template(
+            path="cbv/recruitment/total_hires.html",
+            context={"instance": self},
+        )
+
+    def status_col(self):
+        if self.closed:
+            return "Closed"
+        else:
+            return "Open"
+
+    def rec_actions(self):
+        """
+        This method for get custom column for actions.
+        """
+
+        return render_template(
+            path="cbv/recruitment/actions.html",
+            context={"instance": self},
+        )
+
+    def get_avatar(self):
+        """
+        Method will retun the api to the avatar or path to the profile image
+        """
+        url = f"https://ui-avatars.com/api/?name={self.title}&background=random"
+        return url
+
     def is_vacancy_filled(self):
         """
         This method is used to check wether the vaccancy for the recruitment is completed or not
@@ -344,6 +495,83 @@ class Stage(HorillaModel):
             )
         }
 
+    def stage_detail_view(self):
+        """
+        detail view
+        """
+        url = reverse("stage-detail-view", kwargs={"pk": self.pk})
+        return url
+
+    def detail_action(self):
+        """
+        For answerable employees  column
+        """
+
+        return render_template(
+            path="cbv/stages/detail_action.html",
+            context={"instance": self},
+        )
+
+    def title_col(self):
+        """
+        This method for get custome coloumn for title.
+        """
+        return render_template(
+            path="cbv/stages/title.html",
+            context={"instance": self},
+        )
+
+    def managers_col(self):
+        """
+        This method for get custome coloumn for managers.
+        """
+
+        return render_template(
+            path="cbv/stages/managers.html",
+            context={"instance": self},
+        )
+
+    def get_avatar(self):
+        """
+        Method will retun the api to the avatar or path to the profile image
+        """
+        url = (
+            f"https://ui-avatars.com/api/?name={self.recruitment_id}&background=random"
+        )
+        return url
+
+    def detail_managers_col(self):
+        """
+        Manager in detail view
+        """
+        employees = self.stage_managers.all()
+        employee_names_string = "<br>".join([str(employee) for employee in employees])
+        return employee_names_string
+
+    def actions_col(self):
+        """
+        This method for get custome coloumn for actions.
+        """
+
+        return render_template(
+            path="cbv/stages/actions.html",
+            context={"instance": self},
+        )
+
+    def get_type(self):
+        """
+        Display type
+        """
+        stage_types = [
+            ("initial", _("Initial")),
+            ("test", _("Test")),
+            ("interview", _("Interview")),
+            ("cancelled", _("Cancelled")),
+            ("hired", _("Hired")),
+        ]
+
+        return dict(stage_types).get(self.stage_type)
+
 
 class Candidate(HorillaModel):
     """
@@ -486,6 +714,295 @@ class Candidate(HorillaModel):
     def __str__(self):
         return f"{self.name}"
 
+    def stage_drop_down(self):
+        """
+        Stage drop down
+        """
+        request = getattr(_thread_locals, "request", None)
+        all_rec_stages = getattr(request, "all_rec_stages", {})
+        if all_rec_stages.get(self.stage_id.recruitment_id.pk) is None:
+            stages = Stage.objects.filter(recruitment_id=self.stage_id.recruitment_id)
+            all_rec_stages[self.stage_id.recruitment_id.pk] = stages
+            request.all_rec_stages = all_rec_stages
+        return render_template(
+            path="cbv/pipeline/stage_drop_down.html",
+            context={
+                "instance": self,
+                "stages": request.all_rec_stages[self.stage_id.recruitment_id.pk],
+            },
+        )
+
+    def rating_bar(self):
+        """
+        Rating bar
+        """
+        return render_template(
+            path="cbv/pipeline/rating.html", context={"instance": self}
+        )
+
+    def get_interview_count(self):
+        """
+        Scheduled interviews count
+        """
+        return render_template(
+            path="cbv/pipeline/count_of_interviews.html", context={"instance": self}
+        )
+
+    def mail_indication(self):
+        """
+        Rating bar
+        """
+        return render_template(
+            path="cbv/pipeline/mail_status.html", context={"instance": self}
+        )
+
+    def candidate_name(self):
+        """
+        Rating bar
+        """
+        now = tz.now()
+        return render_template(
+            path="cbv/pipeline/candidate_column.html",
+            context={"instance": self, "now": now},
+        )
+
+    def get_contact(self):
+        """
+        to get contact no of candidates
+        """
+        return self.mobile
+
+    def get_resume_url(self):
+        return self.resume.url
+
+    def onboarding_portal_html(self):
+        return format_html(
+            '<div class="oh-checkpoint-badge oh-checkpoint-badge--secondary">{}/4</div>',
+            self.onboarding_portal.count,
+        )
+
+    def rating(self):
+        """
+        This method for get custome coloumn for rating.
+        """
+
+        return render_template(
+            path="cbv/candidates/rating.html",
+            context={"instance": self},
+        )
+
+    def onboarding_status_col(self):
+        """
+        This method for get custome coloumn for status.
+        """
+
+        return render_template(
+            path="cbv/onboarding_view/status.html",
+            context={"instance": self},
+        )
+
+    def onboarding_task_col(self):
+        """
+        This method for get custome coloumn for tasks.
+        """
+        from onboarding.models import CandidateStage, CandidateTask
+
+        cand_stage = self.onboarding_stage.id
+        cand_stage_obj = CandidateStage.objects.get(id=cand_stage)
+        choices = CandidateTask.choice
+
+        return render_template(
+            path="cbv/onboarding_view/task.html",
+            context={
+                "instance": self,
+                "candidate": cand_stage_obj,
+                "choices": choices,
+                "single_view": True,
+            },
+        )
+
+    def archive_status(self):
+        """
+        archive status
+        """
+        if self.is_active:
+            return "Archive"
+        else:
+            return "Un-Archive"
+
+    def resume_pdf(self):
+        """
+        This method for get custome coloumn for resume.
+        """
+
+        return render_template(
+            path="cbv/candidates/resume.html",
+            context={"instance": self},
+        )
+
+    def options(self):
+        """
+        This method for get custom coloumn for options.
+        """
+
+        request = getattr(_thread_locals, "request", None)
+        mails = getattr(request, "mails", None)
+
+        if not mails:
+            mails = list(Candidate.objects.values_list("email", flat=True))
+            setattr(request, "mails", mails)
+
+        emp_list = User.objects.filter(username__in=mails).values_list(
+            "email", flat=True
+        )
+
+        return render_template(
+            path="cbv/candidates/option.html",
+            context={"instance": self, "emp_list": emp_list},
+        )
+
+    def get_profile_url(self):
+        """
+        This method to get profile url
+        """
+        url = reverse_lazy("candidate-view", kwargs={"pk": self.pk})
+        return url
+
+    def get_update_url(self):
+        """
+        This method to get update url
+        """
+        url = reverse_lazy("rec-candidate-update", kwargs={"cand_id": self.pk})
+        return url
+
+    def get_skill_zone_url(self):
+        """
+        This method to get update url
+        """
+        url = reverse_lazy("to-skill-zone", kwargs={"cand_id": self.pk})
+        return url
+
+    def get_rejected_candidate_url(self):
+        """
+        This method to get the update URL with cand_id as a query parameter.
+        """
+        base_url = reverse_lazy("add-to-rejected-candidates")
+        query_params = urlencode({"candidate_id": self.pk})
+        return f"{base_url}?{query_params}"
+
+    def get_document_request(self):
+        """
+        This method to get the update URL with cand_id as a query parameter.
+        """
+        base_url = reverse_lazy("candidate-document-request")
+        query_params = urlencode({"candidate_id": self.pk})
+        return f"{base_url}?{query_params}"
+
+    def get_view_note_url(self):
+        """
+        This method to get update url
+        """
+        url = reverse_lazy("view-note", kwargs={"cand_id": self.pk})
+        return url
+
+    def get_individual_url(self):
+        """
+        This method to get update url
+        """
+        url = reverse_lazy("candidate-view-individual", kwargs={"cand_id": self.pk})
+        return url
+
+    def get_push_url(self):
+        """
+        This method to get update url
+        """
+        url = reverse_lazy("candidate-view-individual", kwargs={"cand_id": self.pk})
+        return url
+
+    def get_convert_to_emp(self):
+        """
+        This method to get covert to employee url
+        """
+        url = reverse_lazy("candidate-conversion", kwargs={"cand_id": self.pk})
+        return url
+
+    def get_add_to_skill(self):
+        """
+        This method to get add to skill zone employee url
+        """
+        url = reverse_lazy("to-skill-zone", kwargs={"cand_id": self.pk})
+        return url
+
+    def get_add_to_reject(self):
+        """
+        This method to get add to reject zone employee url
+        """
+        url = reverse_lazy("add-to-rejected-candidates")
+        return f"{url}?candidate_id={self.pk}"
+
+    def get_archive_url(self):
+        """
+        This method to get archive  url
+        """
+
+        if self.is_active:
+            action = "archive"
+        else:
+            action = "un-archive"
+
+        message = f"Do you want to {action} this candidate?"
+        url = reverse_lazy("rec-candidate-archive", kwargs={"cand_id": self.pk})
+
+        return f"'{url}','{message}'"
+
+    def get_delete_url(self):
+        """
+        This method to get delete url
+        """
+        url = reverse_lazy("generic-delete")
+        return url
+
+    def get_self_tracking_url(self):
+        """
+        This method to get self tracking url
+        """
+        url = reverse_lazy(
+            "candidate-self-status-tracking", kwargs={"cand_id": self.pk}
+        )
+        return url
+
+    def get_document_request_doc(self):
+        """
+        This method to get document request url
+        """
+        url = reverse_lazy("candidate-document-request") + f"?candidate_id={self.pk}"
+        return url
+
+    def is_employee_converted(self):
+        """
+        The method to get converted employee
+        """
+        request = getattr(_thread_locals, "request", None)
+        if not getattr(request, "employees", None):
+            request.employees = Employee.objects.all()
+
+        if request.employees.filter(email=self.email).exists():
+            return 'style="background-color: #f1ffd5;"'
+
+    def get_details_candidate(self):
+        """
+        Candidate detail
+        """
+        url = reverse_lazy("candidate-detail", kwargs={"pk": self.pk})
+        return url
+
+    def get_send_mail(self):
+        """
+        Candidate detail
+        """
+        url = reverse_lazy("send-mail", kwargs={"cand_id": self.pk})
+        return url
+
     def is_offer_rejected(self):
         """
         Is offer rejected checking method
@@ -563,6 +1080,10 @@ class Candidate(HorillaModel):
             .first()
         )
 
+    def get_schedule_interview(self):
+        url = reverse_lazy("interview-schedule", kwargs={"cand_id": self.pk})
+        return url
+
     def get_interview(self):
         """
         This method is used to get the interview dates and times for the candidate for the mail templates
@@ -588,6 +1109,13 @@ class Candidate(HorillaModel):
         else:
             return ""
 
+    def candidate_interview_view(self):
+        interviews = InterviewSchedule.objects.filter(candidate_id=self.pk)
+        return render_template(
+            path="cbv/pipeline/interview_template.html",
+            context={"instance": self, "interviews": interviews},
+        )
+
     def save(self, *args, **kwargs):
         if self.stage_id is not None:
             self.hired = self.stage_id.stage_type == "hired"
@@ -628,6 +1156,70 @@ class Candidate(HorillaModel):
 
         super().save(*args, **kwargs)
 
+    def last_email(self):
+        """
+        for last send mail column
+
+        """
+
+        return render_template(
+            path="cbv/onboarding_candidates/cand_email.html",
+            context={"instance": self},
+        )
+
+    def date_of_joining(self):
+        """
+        for joining date column
+
+        """
+
+        return render_template(
+            path="cbv/onboarding_candidates/date_of_joining.html",
+            context={"instance": self},
+        )
+
+    def probation_date(self):
+        """
+        for probation date column
+
+        """
+
+        return render_template(
+            path="cbv/onboarding_candidates/probation_date.html",
+            context={"instance": self},
+        )
+
+    def offer_letter(self):
+        """
+        for offer letter  column
+
+        """
+
+        return render_template(
+            path="cbv/onboarding_candidates/offer_letter.html",
+            context={"instance": self},
+        )
+
+    def rejected_candidate_class(self):
+        """
+        Returns the appropriate style and title attributes for rejected candidates.
+        """
+        if self.is_offer_rejected():
+            return f'style="background: #ff4500a3 !important; color: white;" title="{_("Added In Rejected Candidates")}"'
+        else:
+            return f'title="{_("Add To Rejected Candidates")}"'
+
+    def actions(self):
+        """
+        for actions  column
+
+        """
+
+        return render_template(
+            path="cbv/onboarding_candidates/actions.html",
+            context={"instance": self},
+        )
+
     class Meta:
         """
         Meta class to add the additional info
@@ -667,6 +1259,26 @@ class RejectReason(HorillaModel):
     def __str__(self) -> str:
         return self.title
 
+    def get_update_url(self):
+        """
+        This method to get update url
+        """
+
+        url = reverse_lazy("update-reject-reason-view", kwargs={"pk": self.pk})
+        return url
+
+    def get_delete_url(self):
+        """
+        This method to get delete url
+        """
+        base_url = reverse_lazy("delete-reject-reasons")
+        rej_id = self.pk
+        url = f"{base_url}?id={rej_id}"
+        return url
+
+    def get_instance_id(self):
+        return self.id
+
     class Meta:
         verbose_name = _("Reject Reason")
         verbose_name_plural = _("Reject Reasons")
@@ -778,6 +1390,40 @@ class RecruitmentSurvey(HorillaModel):
     def __str__(self) -> str:
         return str(self.question)
 
+    def options_col(self):
+        if self.type == "options" or self.type == "multiple":
+            return (
+                f"<div class='oh-timeoff-modal__stat-title'>Options</div><div>{self.options}</div>"
+                if self.options
+                else ""
+            )
+        return ""
+
+    def get_edit_url(self):
+
+        url = reverse(
+            "recruitment-survey-question-template-edit", kwargs={"pk": self.pk}
+        )
+        return url
+
+    def get_delete_url(self):
+
+        url = reverse(
+            "recruitment-survey-question-template-delete", kwargs={"survey_id": self.pk}
+        )
+        return url
+
+    def recruitment_col(self):
+        """
+        Manager in detail view
+        """
+        recruitment = self.recruitment_ids.all()
+        recruitment_string = "<br>".join([str(rec) for rec in recruitment])
+        return recruitment_string
+
+    def get_question_type(self):
+        return dict(self.question_types).get(self.type)
+
     def choices(self):
         """
         Used to split the choices
@@ -876,6 +1522,28 @@ class SkillZone(HorillaModel):
     def __str__(self) -> str:
         return self.title
 
+    def get_avatar(self):
+        """
+        Method will retun the api to the avatar or path to the profile image
+        """
+        url = f"https://ui-avatars.com/api/?name={self.title}&background=random"
+        return url
+
+    def candidate_count_display(self):
+        count = self.skillzonecandidate_set.count()
+        if count != 1:
+            return f"{count} { _('Candidates') }"
+        else:
+            return f"{count} { _('Candidate') }"
+
+    def get_skill_zone_url(self):
+        """
+        This method returns the skill zone URL with the title as a query parameter.
+        """
+        base_url = reverse("skill-zone-view")
+        query_string = urlencode({"search": self.title})
+        return f"{base_url}?{query_string}"
+
 
 class SkillZoneCandidate(HorillaModel):
     """
@@ -986,6 +1654,106 @@ class InterviewSchedule(HorillaModel):
     def __str__(self) -> str:
         return f"{self.candidate_id} -Interview."
 
+    def candidate_custom_col(self):
+        """
+        method for candidate coloumn
+        """
+        return render_template(
+            path="cbv/interview/candidate_custom_col.html",
+            context={"instance": self},
+        )
+
+    def interviewer_custom_col(self):
+        """
+        method for interviewer coloumn
+        """
+        return render_template(
+            path="cbv/interview/interviewer_custom_col.html",
+            context={"instance": self},
+        )
+
+    def custom_color(self):
+        """
+        Custom background color for all rows with hover effect
+        """
+        # interviews = InterviewSchedule.objects.filter(
+        #     employee_id=self.user.employee_get.id
+        # )
+        request = getattr(_thread_locals, "request", None)
+        if not getattr(self, "request", None):
+            self.request = request
+        user = request.user
+        if user.employee_get in self.employee_id.all():
+            color = "rgba(255, 166, 0, 0.158)"
+            hovering = "white"
+
+            return (
+                f'style="background-color: {color};" '
+                f"onmouseover=\"this.style.backgroundColor='{hovering}';\" "
+                f"onmouseout=\"this.style.backgroundColor='{color}';\""
+            )
+
+    def interviewer_detail(self):
+        """
+        interviewer in detail view
+        """
+        employees = self.employee_id.all()
+        employee_names_string = ", ".join([str(employee) for employee in employees])
+        return employee_names_string
+
+    def detail_subtitle(self):
+        """
+        Return subtitle for detail view
+        """
+        return (
+            f"{self.candidate_id.recruitment_id} / {self.candidate_id.job_position_id}"
+        )
+
+    def get_description(self):
+        """
+        get description
+        """
+        if self.description:
+            return self.description
+        else:
+            return _("None")
+
+    def status_custom_col(self):
+        """
+        method for status coloumn
+        """
+        now = datetime.now(tz=timezone.utc if settings.USE_TZ else None)
+        return render_template(
+            path="cbv/interview/status_custom_col.html",
+            context={"instance": self, "now": now},
+        )
+
+    def custom_action_col(self):
+        """
+        method for actions coloumn
+        """
+        return render_template(
+            path="cbv/interview/interview_actions.html",
+            context={"instance": self},
+        )
+
+    def detail_view(self):
+        """
+        for detail view
+        """
+
+        url = reverse("interview-detail-view", kwargs={"pk": self.pk})
+        return url
+
+    def detail_view_actions(self):
+        """
+        detail view actions
+        """
+        return render_template(
+            path="cbv/interview/detail_view_actions.html",
+            context={"instance": self},
+        )
+
     class Meta:
         verbose_name = _("Schedule Interview")
         verbose_name_plural = _("Schedule Interviews")
diff --git a/recruitment/sidebar.py b/recruitment/sidebar.py
index 16a210b99..6a76854f2 100644
--- a/recruitment/sidebar.py
+++ b/recruitment/sidebar.py
@@ -25,7 +25,7 @@ SUBMENUS = [
     },
     {
         "menu": _("Recruitment Pipeline"),
-        "redirect": reverse("pipeline"),
+        "redirect": reverse("cbv-pipeline"),
         "accessibility": "recruitment.sidebar.pipeline_accessibility",
     },
     {
diff --git a/recruitment/templates/candidate/export_filter.html b/recruitment/templates/candidate/export_filter.html
index 3a90059a5..a5f79a9e8 100644
--- a/recruitment/templates/candidate/export_filter.html
+++ b/recruitment/templates/candidate/export_filter.html
@@ -248,5 +248,11 @@
                 {% trans "Export" %}
             </button>
         </div>
+<<<<<<< HEAD
+      </div>
+
+
+=======
     </form>
 </div>
+>>>>>>> 99553272eb5ec68396db80a610cdcd0901a4dfca
diff --git a/recruitment/templates/candidate/individual.html b/recruitment/templates/candidate/individual.html
index e3360989c..57cc5fdd4 100644
--- a/recruitment/templates/candidate/individual.html
+++ b/recruitment/templates/candidate/individual.html
@@ -1,4 +1,6 @@
-{% extends 'index.html' %} {% load i18n %} {% load horillafilters %} {% load static %} {% block content %} {% load recruitmentfilters %}
+{% extends "index.html" %}
+{% block content %}
+{% include "generic/components.html" %}
 <script>
   function submitForm(elem) {
     $(elem).siblings(".add_more_submit").click();
@@ -65,6 +67,87 @@
     background-color: #f9f9f9 !important;
   }
 </style>
+<div class="oh-checkpoint-badge mb-2"
+id="selectedInstances"
+data-ids="[]"
+data-clicked=""
+style="display: none">
+</div>
+
+<div class="oh-wrapper" hx-get="/recruitment/profile{{request.path}}?{{request.GET.urlencode}}&instance_ids={{request.GET.instance_ids}}" hx-trigger="load">
+</div>
+{% endblock content %}
+
+{% comment %} {% extends 'index.html' %} {% load i18n %} {% load horillafilters %} {% load static %} {% block content %} {% load recruitmentfilters %}
+<script>
+  function submitForm(elem) {
+    $(elem).siblings(".add_more_submit").click();
+  }
+  function enlargeImage(src, $element) {
+    var enlargeDocContainer = $element
+      .parents()
+      .closest("li")
+      .find("#enlargeDocContainer");
+    enlargeDocContainer.empty();
+    style =
+      "width:100%; height:90%; box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.2); background:white";
+    var enlargedImage = $("<iframe>").attr({ src: src, style: style });
+    var name = $("<span>").text(src.split("/").pop().replace(/_/g, " "));
+    enlargeDocContainer.append(enlargedImage);
+    enlargeDocContainer.append(name);
+    setTimeout(function () {
+      enlargeDocContainer.show();
+
+      const iframe = document.querySelector("iframe").contentWindow;
+      var iframe_document = iframe.document;
+      iframe_image = iframe_document.getElementsByTagName("img")[0];
+      $(iframe_image).attr("style", "width:100%; height:100%;");
+    }, 100);
+  }
+
+  function hideEnlargeImage() {
+    var enlargeDocContainer = $(".enlargeDocContainer");
+    enlargeDocContainer.empty();
+  }
+
+  $(document).on("click", function (event) {
+    if (!$(event.target).closest("#enlargeDocContainer").length) {
+      hideEnlargeImage();
+    }
+  });
+</script>
+<style>
+  .enlarge-image-container {
+    display: none;
+    position: fixed;
+    top: 40%;
+    left: 40%;
+    transform: translate(-50%, -50%);
+    width: 30%;
+    height: 50%;
+    z-index: 9999;
+  }
+  .enlarge-image-container img{
+    max-width: 100%;
+    height: auto;
+    border-radius: 5%;
+  }
+  .oh-rate:not(:checked)>label {
+    font-size:40px;
+  }
+  .star {
+    font-size:20px !important;
+  }
+  .ul {
+    margin:0;
+  }
+  body {
+    background-color: #f9f9f9 !important;
+  }
+</style>
+{% include "generic/components.html" %}
+
+{% include "generic/components.html" %}
 
 <div id="showImageContainer"></div>
 
@@ -191,7 +274,7 @@
         >
           <li class="oh-general__tab">
             <a
-              href="#"
+              href="#
               class="oh-general__tab-link oh-general__tab-link--active"
               data-action="general-tab"
               data-target="#personal"
@@ -711,4 +794,4 @@
     showImageContainer.style.display = "none";
   }
 </script>
-{% endblock content %}
+{% endblock content %} {% endcomment %}
diff --git a/recruitment/templates/candidate/interview_form.html b/recruitment/templates/candidate/interview_form.html
index 9a43b73f9..da9170bc3 100644
--- a/recruitment/templates/candidate/interview_form.html
+++ b/recruitment/templates/candidate/interview_form.html
@@ -9,7 +9,7 @@
     id="skillform">
     {{form.as_p}}
 </form>
-<script>
+<!-- <script>
     $("#skillform .col-md-6").toggleClass("col-md-6");
 
     $('[name=candidate_id]').change(function () {
@@ -45,4 +45,8 @@
         });
     });
 
+<<<<<<< HEAD
+</script> -->
+=======
 </script>
+>>>>>>> a557b8a4c05c90515a575c7585620c822d2503d6
diff --git a/recruitment/templates/candidate/rating_tab.html b/recruitment/templates/candidate/rating_tab.html
index 57e934a18..0623aa2f2 100644
--- a/recruitment/templates/candidate/rating_tab.html
+++ b/recruitment/templates/candidate/rating_tab.html
@@ -39,10 +39,19 @@
   {% endfor %}
 </div>
 {% else %}
-<div
+
+<div class="oh-wrapper" align="center" style="margin-top: 7vh; margin-bottom:7vh;">
+    <div align="center">
+      <img src="{% static "images/ui/rating.png" %}" class="oh-404__image" alt="Page not found. 404.">
+      <h5 class="oh-404__subtitle mt-4 ml-2">{% trans "There are no ratings to display at the moment." %}</h5>
+    </div>
+  </div>
+
+
+{% comment %} <div
     class="d-flex justify-content-center align-items-center"
     style="height: 40vh"
 >
     <h5 class="oh-404__subtitle">{% trans " There are no ratings to display at the moment." %}</h5>
-</div>
+</div> {% endcomment %}
 {% endif %}
diff --git a/recruitment/templates/cbv/candidates/candidates.html b/recruitment/templates/cbv/candidates/candidates.html
new file mode 100644
index 000000000..e1c5bf385
--- /dev/null
+++ b/recruitment/templates/cbv/candidates/candidates.html
@@ -0,0 +1,314 @@
+
+
+{% extends "index.html" %}
+{% load i18n %}{% load static recruitmentfilters %}
+
+
+{% block content %}
+
+<meta name="csrf-token" content="{{ csrf_token }}">
+
+
+
+<style>
+.hired--dot{
+  background-color:yellowgreen;
+}
+.nothired--dot{
+  background-color:grey;
+}
+.canceled--dot{
+  background-color:red;
+}
+.hired-True{
+  border-left: 3.4px solid yellowgreen !important;
+  border-radius: 4px 0 0 4px;
+
+}
+.hired-False{
+  border-left: 3.4px solid grey !important;
+  border-radius: 4px 0 0 4px;
+
+}
+.canceled-True {
+
+  border-left: 3.4px solid red !important;
+  border-radius: 4px 0 0 4px;
+
+}
+
+.employee{
+  background-color:yellowgreen;
+}
+
+
+
+
+</style>
+
+
+<div hx-get="{% url "nav-candidate" %}?{{request.GET.urlencode}}" hx-trigger="load">
+</div>
+{% comment %} my_app/templates/my_app/generic/index.html {% endcomment %}
+
+
+
+{% include "generic/components.html" %}
+
+
+<div
+    class="oh-checkpoint-badge mb-2"
+    id="selectedInstances"
+    data-ids="[]"
+    data-clicked=""
+    style="display: none"
+  ></div>
+
+  
+  <div 
+  class="oh-wrapper" 
+  id="listContainer">
+  <div class="animated-background">
+  </div>
+</div>
+
+
+
+
+<div class="oh-activity-sidebar" id="activitySidebar" style="z-index:1000">
+  <div class="oh-activity-sidebar__body" id="noteContainer">
+    <div class="oh-activity-sidebar__header">
+      <a event.stopPropagation
+      style="cursor: pointer;"
+      onclick="$('.oh-activity-sidebar--show').removeClass('oh-activity-sidebar--show');">
+      <ion-icon
+      name="chevron-forward-outline"
+      class="oh-activity-sidebar__header-icon me-2 oh-activity-sidebar__close"
+      data-target="#activitySidebar">
+      </ion-icon>
+      </a>
+    </div>
+  </div>
+</div>
+
+
+
+<script>
+  function archiveCandidate(url,msg) {
+    Swal.fire({
+        text: msg,
+        icon: "question",
+        showCancelButton: true,
+        confirmButtonColor: "green",
+        cancelButtonColor: "#d33",
+        confirmButtonText: "Confirm"
+    }).then((result) => {
+        if (result.isConfirmed) {
+              window.location.href = url;
+        } 
+    });
+}
+
+function getCSRFToken() {
+  return document.querySelector('meta[name="csrf-token"]').getAttribute('content');
+}
+
+function deleteCandidate(url) {
+  Swal.fire({
+    text: "Do you want to delete this candidate?",
+    icon: "question",
+    showCancelButton: true,
+    confirmButtonColor: "green",
+    cancelButtonColor: "#d33",
+    confirmButtonText: "Confirm"
+}).then((result) => {
+    if (result.isConfirmed) {
+        const form = document.createElement('form');
+        form.setAttribute('action', url);
+        form.setAttribute('method', 'post');
+        
+        const csrfTokenInput = document.createElement('input');
+        csrfTokenInput.setAttribute('type', 'hidden');
+        csrfTokenInput.setAttribute('name', 'csrfmiddlewaretoken');
+        csrfTokenInput.value = getCSRFToken();
+        form.appendChild(csrfTokenInput);
+        
+        document.body.appendChild(form);
+        form.submit();
+    }
+});
+}
+
+
+function toEmployee(url) {
+  Swal.fire({
+    text: "Are you sure you want to convert this candidate into an employee?",
+    icon: "question",
+    showCancelButton: true,
+    confirmButtonColor: "#3085d6",
+    cancelButtonColor: "#d33",
+    confirmButtonText: "Confirm"
+  }).then((result) => {
+    if (result.isConfirmed) {
+      window.location.href = url;
+    } else {
+      pass
+    }
+  });
+}
+
+$(document).on('click', '#archiveCandidates', function(e) { 
+  e.preventDefault();
+  var languageCode = null;
+  getCurrentLanguageCode(function (code) {
+    languageCode = code;
+    var confirmMessage = archive_CanMessages[languageCode];
+    var textMessage = noRowMessages[languageCode];
+    ids = [];
+    ids.push($("#selectedInstances").attr("data-ids"));
+    ids = JSON.parse($("#selectedInstances").attr("data-ids"));
+    if (ids.length === 0) {
+      Swal.fire({
+        text: textMessage,
+        icon: "warning",
+        confirmButtonText: "Close",
+      });
+    } else {
+      Swal.fire({
+        text: confirmMessage,
+        icon: "info",
+        showCancelButton: true,
+        confirmButtonColor: "#008000",
+        cancelButtonColor: "#d33",
+        confirmButtonText: "Confirm",
+      }).then(function (result) {
+        if (result.isConfirmed) {
+          e.preventDefault();
+          $.ajax({
+            type: "POST",
+            url: "/recruitment/candidate-bulk-archive?is_active=False",
+            data: {
+              csrfmiddlewaretoken: getCookie("csrftoken"),
+              ids: JSON.stringify(ids),
+            },
+            success: function (response, textStatus, jqXHR) {
+              if (jqXHR.status === 200) {
+                location.reload(); // Reload the current page
+              } else {
+                // console.log("Unexpected HTTP status:", jqXHR.status);
+              }
+            },
+          });
+        }
+      });
+    }
+  });
+});
+
+$(document).on('click', '#unArchiveCandidates', function(e) {
+  e.preventDefault();
+
+  var languageCode = null;
+  getCurrentLanguageCode(function (code) {
+    languageCode = code;
+    var confirmMessage = unarchive_CanMessages[languageCode];
+    var textMessage = noRowMessages[languageCode];
+    ids = [];
+    ids.push($("#selectedInstances").attr("data-ids"));
+    ids = JSON.parse($("#selectedInstances").attr("data-ids"));
+    if (ids.length === 0) {
+      Swal.fire({
+        text: textMessage,
+        icon: "warning",
+        confirmButtonText: "Close",
+      });
+    } else {
+      Swal.fire({
+        text: confirmMessage,
+        icon: "info",
+        showCancelButton: true,
+        confirmButtonColor: "#008000",
+        cancelButtonColor: "#d33",
+        confirmButtonText: "Confirm",
+      }).then(function (result) {
+        if (result.isConfirmed) {
+          e.preventDefault();
+          $.ajax({
+            type: "POST",
+            url: "/recruitment/candidate-bulk-archive?is_active=True",
+            data: {
+              csrfmiddlewaretoken: getCookie("csrftoken"),
+              ids: JSON.stringify(ids),
+            },
+            success: function (response, textStatus, jqXHR) {
+              if (jqXHR.status === 200) {
+                location.reload(); // Reload the current page
+              } else {
+                // console.log("Unexpected HTTP status:", jqXHR.status);
+              }
+            },
+          });
+        }
+      });
+    }
+  });
+});
+
+$(document).on('click', '#deleteCandidates', function(e) {
+  e.preventDefault();
+
+  var languageCode = null;
+  getCurrentLanguageCode(function (code) {
+    languageCode = code;
+    var confirmMessage = delete_CanMessages[languageCode];
+    var textMessage = noRowMessages[languageCode];
+    ids = [];
+    ids.push($("#selectedInstances").attr("data-ids"));
+    ids = JSON.parse($("#selectedInstances").attr("data-ids"));
+    if (ids.length === 0) {
+      Swal.fire({
+        text: textMessage,
+        icon: "warning",
+        confirmButtonText: "Close",
+      });
+    } else {
+      Swal.fire({
+        text: confirmMessage,
+        icon: "error",
+        showCancelButton: true,
+        confirmButtonColor: "#008000",
+        cancelButtonColor: "#d33",
+        confirmButtonText: "Confirm",
+      }).then(function (result) {
+        if (result.isConfirmed) {
+          e.preventDefault();
+          ids = [];
+
+          ids.push($("#selectedInstances").attr("data-ids"));
+          ids = JSON.parse($("#selectedInstances").attr("data-ids"));
+
+          $.ajax({
+            type: "POST",
+            url: "/recruitment/candidate-bulk-delete",
+            data: {
+              csrfmiddlewaretoken: getCookie("csrftoken"),
+              ids: JSON.stringify(ids),
+            },
+            success: function (response, textStatus, jqXHR) {
+              if (jqXHR.status === 200) {
+                location.reload(); // Reload the current page
+              } else {
+                // console.log("Unexpected HTTP status:", jqXHR.status);
+              }
+            },
+          });
+        }
+      });
+    }
+  });
+});
+
+</script>
+<script src="{% static '/candidate/bulk.js' %}"></script>
+
+{% endblock content %}
\ No newline at end of file
diff --git a/recruitment/templates/cbv/candidates/export.html b/recruitment/templates/cbv/candidates/export.html
new file mode 100644
index 000000000..27f419c18
--- /dev/null
+++ b/recruitment/templates/cbv/candidates/export.html
@@ -0,0 +1,30 @@
+
+{% load i18n %}{% load static recruitmentfilters %}
+<div class="oh-modal__dialog">
+    <div class="oh-modal__dialog-header">
+      <h2 class="oh-modal__dialog-title" id="candidateExportLavel">
+        {% trans "Export Candidates" %}
+      </h2>
+      <button class="oh-modal__close" aria-label="Close">
+        <ion-icon name="close-outline"></ion-icon>
+      </button>
+      <div
+        class="oh-modal__dialog-body p-0 pt-2"
+        id="candidateExportModalBody"
+      >
+        <form
+          action="{%url 'candidate-info-export' %}"
+          method="get"
+          onsubmit="event.stopPropagation();$(this).parents().find('.oh-modal--show').last().toggleClass('oh-modal--show');"
+          id="candidateExportForm"
+        >
+          {% csrf_token %} {% include 'candidate/export_filter.html'%}
+          <div class="oh-dropdown__filter-footer">
+            <button class="oh-btn oh-btn--secondary oh-btn--small w-100">
+              {% trans "Export" %}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
\ No newline at end of file
diff --git a/recruitment/templates/cbv/candidates/filter.html b/recruitment/templates/cbv/candidates/filter.html
new file mode 100644
index 000000000..fb1e17f7f
--- /dev/null
+++ b/recruitment/templates/cbv/candidates/filter.html
@@ -0,0 +1,184 @@
+{% load i18n %}
+{% load static %}
+
+<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 'Phone' %}</label>
+            {{ form.mobile }}
+          </div>
+          <div class="oh-input-group">
+            <label class="oh-label">{% trans 'Hired Date' %}</label>
+            {{ form.hired_date }}
+          </div>
+          <div class="oh-input-group">
+            <label class="oh-label">{% trans 'Country' %}</label>
+            <select name="country" class="oh-select-2 oh-select w-100 country" id="country">
+            </select>
+          </div>
+          <div class="oh-input-group">
+            <label class="oh-label">{% trans 'Is Hired' %}?</label>
+            {{ form.hired }}
+          </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>
+              {{form.rejected_candidate__reject_reason_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 'Email' %}</label>
+            {{ form.email }}
+          </div>
+
+          <div class="oh-input-group">
+            <label class="oh-label">{% trans 'Gender' %}</label>
+            {{ form.gender }}
+          </div>
+
+          <div class="oh-input-group">
+            <label class="oh-label">{% trans 'State' %}</label>
+            <select name="state" class="oh-select-2 oh-select w-100 country" id="state">
+            </select>
+          </div>
+
+          <div class="oh-input-group">
+            <label class="oh-label">{% trans 'Is Canceled' %}?</label>
+            {{ form.canceled }}
+          </div>
+          <div class="col-sm-12 col-md-12 col-lg-12 mb-2">
+            <div class="oh-input-group">
+              <label class="oh-label">{% trans "Offer Status" %}</label>
+              {{form.offer_letter_status}}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <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 'Recruitment' %}</label>
+            {{ form.recruitment_id }}
+          </div>
+
+          <div class="oh-input-group">
+            <label class="oh-label">{% trans 'Job Position' %}</label>
+            {{ form.job_position_id }}
+          </div>
+
+          <div class="oh-input-group">
+            <label class="oh-label">{% trans 'Start Date' %}</label>
+            {{ form.start_date }}
+          </div>
+          <div class="oh-input-group">
+            <label class="oh-label">{% trans 'Is Closed' %}?</label>
+            {{ form.recruitment_id__closed }}
+          </div>
+
+          <div class="oh-input-group">
+            <label class="oh-label">{% trans 'Stage Type' %}</label>
+            {{ form.stage_id__stage_type }}
+          </div>
+          <div class="oh-input-group">
+            <label class="oh-label">{% trans 'Stage Managers' %}</label>
+            {{ form.stage_id__stage_managers }}
+          </div>
+        </div>
+        <div class="col-sm-12 col-md-12 col-lg-6">
+          <div class="oh-input-group">
+            <label class="oh-label">{% trans 'Stage' %}</label>
+            {{ form.stage_id }}
+          </div>
+          <div class="oh-input-group">
+            <label class="oh-label">{% trans 'Department' %}</label>
+            {{ form.job_position_id__department_id }}
+          </div>
+
+          <div class="oh-input-group">
+            <label class="oh-label">{% trans 'Company' %}</label>
+            {{ form.recruitment_id__company_id }}
+          </div>
+
+          <div class="oh-input-group">
+            <label class="oh-label">{% trans 'Recruitment Managers' %}</label>
+            {{ form.recruitment_id__recruitment_managers }}
+          </div>
+          <div class="oh-input-group">
+            <label class="oh-label">{% trans 'End Date' %}</label>
+            {{ form.end_date }}
+          </div>
+          <div class="oh-input-group">
+            <label class="oh-label">{% trans 'Skill Zone' %}</label>
+            {{ form.skillzonecandidate_set__skill_zone_id }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="oh-accordion">
+    <div class="oh-accordion-header">
+      {% trans 'Survey' %}
+    </div>
+    <div class="oh-accordion-body">
+      <div class="row">
+        <div class="col-sm-12 col-md-12 col-lg-12">
+          <div class="oh-input-group">
+            <label class="oh-label">{% trans 'Question & Response' %}</label>
+            {{ form.survey_answer_by }}
+          </div>
+        </div>
+        {% comment %} <div class="col-sm-12 col-md-12 col-lg-6">
+          <div class="oh-input-group">
+            <label class="oh-label">{% trans 'Response' %}</label>
+            {{ form.survey_response }}
+          </div>
+        </div> {% endcomment %}
+      </div>
+    </div>
+  </div>
+
+  <div class="oh-accordion">
+    <div class="oh-accordion-header">
+      {% trans 'Advanced' %}
+    </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 'Scheduled From' %}</label>
+            {{ form.scheduled_from }}
+          </div>
+          <div class="oh-input-group">
+            <label class="oh-label">{% trans 'Is Active' %}?</label>
+            {{ form.is_active }}
+          </div>
+        </div>
+        <div class="col-sm-12 col-md-12 col-lg-6">
+          <div class="oh-input-group">
+            <label class="oh-label">{% trans 'Scheduled Till' %}</label>
+            {{ form.scheduled_till }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<script src="{% static '/base/filter.js' %}"></script>
+<script>
+{% include 'filter_country.js' %}
+</script> 
\ No newline at end of file
diff --git a/recruitment/templates/cbv/candidates/option.html b/recruitment/templates/cbv/candidates/option.html
new file mode 100644
index 000000000..e3c9ad584
--- /dev/null
+++ b/recruitment/templates/cbv/candidates/option.html
@@ -0,0 +1,77 @@
+{% load basefilters %}
+{% load i18n %}
+{% load recruitmentfilters %}
+{% if perms.recruitment.change_candidate %}
+              <div class="oh-btn-group">
+                {% if not instance.email in emp_list and not instance.start_onboard %}
+                  <a href="{% url 'candidate-conversion' instance.id %}"
+                    onclick="return confirm('{% trans "Are you sure you want to convert this candidate into an employee?" %}')"
+                    class="oh-btn oh-btn--light-bkg w-100"
+                    title='{% trans "To employee " %}'
+                    style="padding:0.8rem 1rem"
+                  >
+                    <ion-icon name="person-circle-outline"></ion-icon></a>
+              {% else %}
+                <button class="oh-btn oh-btn--light-bkg w-100"  title='{% trans "Converted " %}' style="opacity: 30%; padding:0.8rem 1rem" disabled>
+                  <ion-icon name="person-circle-outline"></ion-icon></button>
+              {% endif %}
+              {% if instance.email in emp_list %}
+                <button class="oh-btn oh-btn--light-bkg w-100"  title='{% trans "Candidate is Converted " %}' style="opacity: 30%; padding:0.8rem 1rem">
+                  <ion-icon name="heart-circle-outline"></ion-icon></button>
+              {% else %}
+                <button class="oh-btn oh-btn--light-bkg w-100" title="{% trans 'To Skill zone' %}"
+                    data-toggle="oh-modal-toggle"
+                    data-target="#genericModal"
+                    hx-get="{% url 'to-skill-zone' instance.id %}"
+                    hx-target="#genericModalBody"
+                    style="padding:0.8rem 1rem"
+                  >
+                  <ion-icon name="heart-circle-outline"></ion-icon>
+                </button>
+              {% endif %}
+              {% if check_candidate_self_tracking %}
+                  {% if perms.recruitment.view_candidate or request.user|is_stagemanager %}
+                    <a class="oh-btn oh-btn--light-bkg w-100" title="{% trans "View candidate self tracking" %}"
+                      href="{% url 'candidate-self-status-tracking' instance.id %}"
+                        style="padding:0.8rem 1rem" 
+                      >
+                      <ion-icon name="heart-circle-outline"></ion-icon>
+                    </a>
+                  {% endif %} 
+              {% endif %} 
+              {% if instance.email in emp_list %}
+                <button class="oh-btn oh-btn--light-bkg w-100"  title='{% trans "Candidate is Converted " %}' style="opacity: 30%; padding:0.8rem 1rem">
+                  <ion-icon name="thumbs-down-outline"></ion-icon></button>
+              {% else %}
+                {% if perms.recruitment.add_rejectedcandidate or request.user|is_stagemanager %}
+                <button
+                  type="button"
+                  class="oh-btn oh-btn--light-bkg w-100"
+                  hx-get="{% url 'add-to-rejected-candidates' %}?candidate_id={{instance.id}}"
+                  hx-target="#genericModalBody"
+                  data-toggle="oh-modal-toggle"
+                  data-target="#genericModal"
+                  {% if instance.is_offer_rejected %}
+                  style="background: #ff4500a3 !important; color: white;"
+                  title="{% trans "Added In Rejected Candidates" %}"
+                  {% else %}
+                  title="{% trans "Add To Rejected Candidates" %}"
+                  {% endif %}>
+                <ion-icon name="thumbs-down-outline"></ion-icon>
+                </button>
+                {% endif %}
+              {% endif %}
+              <button
+                type="button"
+                hx-get='{% url "send-mail" instance.id %}'
+                title="{% trans "Send Mail" %}"
+                hx-target="#objectDetailsModalTarget"
+                class="oh-btn oh-btn--light-bkg w-100"
+                data-toggle="oh-modal-toggle"
+                data-target="#objectDetailsModal"
+                style="padding:0.8rem 1rem"
+              >
+                <ion-icon name="mail-open-outline"></ion-icon>
+              </button>
+              </div>
+            {% endif %}
\ No newline at end of file
diff --git a/recruitment/templates/cbv/candidates/profile_about_tab.html b/recruitment/templates/cbv/candidates/profile_about_tab.html
new file mode 100644
index 000000000..7d8d5a32b
--- /dev/null
+++ b/recruitment/templates/cbv/candidates/profile_about_tab.html
@@ -0,0 +1,154 @@
+{% load i18n %}
+
+<div class="row">
+            <div class="col-sm-12 col-md-12 col-lg-4">
+              <div class="oh-card oh-card--margin">
+                <div class="oh-card__header">
+                  <span class="oh-card__title oh-card__title--sm fw-bold me-2"
+                    >{% trans "Personal Information" %}</span
+                  >
+                </div>
+                <div class="oh-card__body mt-4">
+                  <ul class="oh-profile__card-info-list">
+                    <li class="oh-profile__card-info-item">
+                      <span class="oh-profile__info-label mb-1">
+                        <ion-icon name="calendar-outline"></ion-icon>
+                        <span>{% trans "Date of Birth" %}</span>
+                      </span>
+                      <span class="oh-profile__info-value dateformat_changer"
+                        >{{candidate.dob}}</span
+                      >
+                    </li>
+                    <li class="oh-profile__card-info-item">
+                      <span class="oh-profile__info-label mb-1">
+                        <ion-icon name="transgender-outline"></ion-icon>
+                        <span>{% trans "Gender" %}</span>
+                      </span>
+                      <span class="oh-profile__info-value"
+                        >{{candidate.gender|capfirst}}</span
+                      >
+                    </li>
+                    <li class="oh-profile__card-info-item">
+                      <span class="oh-profile__info-label mb-1">
+                        <ion-icon name="home-outline"></ion-icon>
+                        <span>{% trans "Address" %}</span>
+                      </span>
+                      <p class="oh-profile__info-value mb-0">
+                        {{candidate.address}}
+                      </p>
+                    </li>
+                    <li class="oh-profile__card-info-item">
+                      <span class="oh-profile__info-label mb-1">
+                        <ion-icon name="flag-outline"></ion-icon>
+                        <span>{% trans "Country" %}</span>
+                      </span>
+                      <span class="oh-profile__info-value">
+                        {{candidate.country}}
+                      </span>
+                    </li>
+                    <li class="oh-profile__card-info-item">
+                      <span class="oh-profile__info-label mb-1">
+                        <ion-icon name="compass-outline"></ion-icon>
+                        <span>{% trans "State" %}</span>
+                      </span>
+                      <span class="oh-profile__info-value">
+                        {{candidate.state}}
+                      </span>
+                    </li>
+                    <li class="oh-profile__card-info-item">
+                      <span class="oh-profile__info-label mb-1">
+                        <ion-icon name="brush-outline"></ion-icon>
+                        <span>{% trans "Portfolio" %}</span>
+                      </span>
+                      <span class="oh-profile__info-value">
+                        {{candidate.portfolio}}
+                      </span>
+                    </li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+            <div class="col-sm-12 col-md-12 col-lg-8">
+              <div class="oh-card oh-card--margin">
+                <div class="oh-card__header">
+                  <span class="oh-card__title oh-card__title--sm fw-bold me-2"
+                    >{% trans "Recruitment Information" %}</span
+                  >
+                </div>
+                <div class="oh-card__body mt-4">
+                  <div class="row">
+                    <div class="col-12 col-sm-12 col-md-12 col-lg-6">
+                      <ul class="oh-profile__card-info-list">
+                        <li class="oh-profile__card-info-item">
+                          <span class="oh-profile__info-label mb-1">
+                            <ion-icon name="construct-outline"></ion-icon>
+                            <span>{% trans "Recruitment" %}</span>
+                          </span>
+                          <span class="oh-profile__info-value"
+                            >{{candidate.recruitment_id}}</span
+                          >
+                        </li>
+                        <li class="oh-profile__card-info-item">
+                          <span class="oh-profile__info-label mb-1">
+                            <ion-icon name="briefcase-outline"></ion-icon>
+
+                            <span>{% trans "Department" %}</span>
+                          </span>
+                          <span class="oh-profile__info-value"
+                            >{{candidate.job_position_id.department_id}}</span
+                          >
+                        </li>
+                        <li class="oh-profile__card-info-item">
+                          <span class="oh-profile__info-label mb-1">
+                            <ion-icon
+                              name="file-tray-stacked-outline"
+                            ></ion-icon>
+                            <span>{% trans "Source" %}</span>
+                          </span>
+                          {% if candidate.get_source_display != None %}
+                            <span class="oh-profile__info-value"
+                              >{{candidate.get_source_display}}</span
+                            >
+                          {% endif %}
+                        </li>
+                      </ul>
+                    </div>
+
+                    <div class="col-12 col-sm-12 col-md-12 col-lg-6">
+                      <ul class="oh-profile__card-info-list">
+                        <li class="oh-profile__card-info-item">
+                          <span class="oh-profile__info-label mb-1">
+                            <ion-icon
+                              name="file-tray-stacked-outline"
+                            ></ion-icon>
+                            <span>{% trans "Current Stage" %}</span>
+                          </span>
+                          <span class="oh-profile__info-value"
+                            >{{candidate.stage_id}}</span
+                          >
+                        </li>
+                        <li class="oh-profile__card-info-item">
+                          <span class="oh-profile__info-label mb-1">
+                            <ion-icon name="briefcase-outline"></ion-icon>
+                            <span>{% trans "Job Position" %}</span>
+                          </span>
+                          <span class="oh-profile__info-value"
+                            >{{candidate.job_position_id}}</span
+                          >
+                        </li>
+                        <li class="oh-profile__card-info-item">
+                          <span class="oh-profile__info-label mb-1">
+                            <ion-icon name="people-outline"></ion-icon>
+                            <span>{% trans "Referral" %}</span>
+                          </span>
+                          <span class="oh-profile__info-value"
+                            >{{candidate.referral}}</span
+                          >
+                        </li>
+                      </ul>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
diff --git a/recruitment/templates/cbv/candidates/profile_interview_tab.html b/recruitment/templates/cbv/candidates/profile_interview_tab.html
new file mode 100644
index 000000000..f81bbf17d
--- /dev/null
+++ b/recruitment/templates/cbv/candidates/profile_interview_tab.html
@@ -0,0 +1,104 @@
+{% load i18n %}
+{% load static %}
+{% include "generic/components.html" %}
+{% comment %} {% include "generic/components.html" %} {% endcomment %}
+<div id="interview">
+{% if candidate.candidate_interview.exists %}
+<div class="mt-4 d-flex">
+  <span class="oh-activity-sidebar__title fw-bold">{{candidate}}'s {% trans "Scheduled Interviews" %}</span>
+</div>
+<div class="d-flex" style="flex-direction: row-reverse;">
+  <button type="button" hx-get='{% url "interview-schedule" candidate.id %}' title="{% trans "Schedule Interview" %}"
+        hx-target="#genericModalBody"
+        hx-swap="innerHTML"
+        data-target="#genericModal"
+        class="oh-btn oh-btn--secondary mt-2 mr-0 oh-btn--w-100-resp"
+        data-toggle="oh-modal-toggle">
+        <ion-icon name="add" class="mr-1 md hydrated" role="img" aria-label="add"></ion-icon>
+        {% trans "Add" %}
+  </button>
+</div>
+
+  <ol class="oh-activity-sidebar__qa-list" role="list">
+    {% for interview_schedule in candidate.candidate_interview.all %}
+      <li class="oh-activity-sidebar__qa-item">
+        <span class="oh-activity-sidebar__q" style="font-size:16px;">
+          <span class="float-end" title="{% trans "Delete" %}" hx-get="{% url 'delete-interview' interview_schedule.id %}?view=false"
+                data-target="#activitySidebar"
+                hx-swap="innerHTML" hx-target="#interview">
+            <ion-icon name="close-outline" style="font-size: 24px" role="img" class="md hydrated"
+                aria-label="close outline"></ion-icon>
+          </span>
+          <span class="float-end" title="{% trans "Edit" %}" hx-get="{% url 'edit-interview' interview_schedule.id %}?view=false"
+                data-target="#genericModal" hx-swap="innerHTML" hx-target="#genericModalBody"
+                data-toggle="oh-modal-toggle">
+            <ion-icon name="create-outline" style="font-size: 19px" role="img" class="md hydrated"
+                aria-label="create outline"></ion-icon>
+          </span>
+          {{forloop.counter}}.<span class="ms-1 mb-2"> {% trans "Date" %} :</span> <span class="ms-2 dateformat_changer">{{ interview_schedule.interview_date }}</span>
+          <span class="d-flex ms-3 mb-2 mt-2">{% trans "Time" %} : <span class=" ms-2 timeformat_changer">{{ interview_schedule.interview_time }}</span></span>
+          <span class="ms-3">{% trans "Interviewer" %} :</span>
+            {% for interviewer in  interview_schedule.employee_id.all %}
+              &nbsp<i id="fabIcon" style="font-size:12px;" class="material-icons">radio_button_checked</i> {{ interviewer }}
+            {% endfor %}
+            <br>
+            {% if interview_schedule.description %}
+              <span class="d-flex ms-3 mb-2 mt-2">{% trans "Description" %} : <span class=" ms-2">{{ interview_schedule.description }}</span>                      
+            {% endif %}
+        </span>
+        {% if interview_schedule.completed %}
+            <div class="d-flex" style="color:green;">
+                <i id="fabIcon" style="font-size:18px;" class="material-icons ms-3 mt-2">check_circle</i>
+                <span class="oh-activity-sidebar__q mt-2">{% trans "Interview Completed" %}</span>
+            </div>
+        {% elif interview_schedule.interview_date|date:"Y-m-d" < now|date:"Y-m-d" %}
+            <div class="d-flex" style="color:red;">
+                <i id="fabIcon" style="font-size:18px" class="material-icons ms-3 mt-2">dangerous</i>
+                <span class="oh-activity-sidebar__q mt-2">{% trans "Expired Interview" %}</span>
+            </div>
+        {% elif interview_schedule.interview_date|date:"Y-m-d" > now|date:"Y-m-d" %}
+            <div class="d-flex" style="color:orange;">
+                <i id="fabIcon" title="{{interview_schedule.interview_date|timeuntil}}" style="font-size:18px;" class="material-icons ms-3 mt-2">schedule</i>
+                <span class="oh-activity-sidebar__q mt-2">{% trans "Upcoming Interview" %}</span>
+            </div>
+        {% elif interview_schedule.interview_date|date:"Y-m-d" == now|date:"Y-m-d" and not interview_schedule.completed %}
+            <div class="d-flex" style="color:blue;">
+                <i id="fabIcon" style="font-size:18px;" class="material-symbols-outlined ms-3 mt-2">today</i>
+                <span class="oh-activity-sidebar__q mt-2">{% trans "Interview Today" %}</span>
+            </div>
+        {% endif %}
+
+      </li>
+
+    {% endfor %}
+  </ol>
+{% else %}
+  <div class="mt-4 d-flex">
+    <span class="oh-activity-sidebar__title fw-bold">{{candidate}}'s {% trans "Scheduled Interviews" %}</span>
+  </div>
+  <div class="d-flex" style="flex-direction: row-reverse;">
+    <button type="button" hx-get='{% url "interview-schedule" candidate.id %}' title="{% trans "Schedule Interview" %}"
+          hx-target="#genericModalBody"
+          hx-swap="innerHTML"
+          data-target="#genericModal"
+          class="oh-btn oh-btn--secondary mt-2 mr-0 oh-btn--w-100-resp"
+          data-toggle="oh-modal-toggle">
+          <ion-icon name="add" class="mr-1 md hydrated" role="img" aria-label="add"></ion-icon>
+          {% trans "Add" %}
+    </button>
+  </div>
+
+
+  <div class="oh-wrapper" align="center" style="margin-top: 7vh; margin-bottom:7vh;">
+    <div align="center">
+      <img src="{% static "images/ui/interview.png" %}" class="oh-404__image" alt="Page not found. 404.">
+      <h5 class="oh-404__subtitle mt-4 ml-2">{% trans "No interviews are scheduled for this candidate." %}</h5>
+    </div>
+  </div>
+
+    {% comment %} <div class='d-flex mt-5' style='margin-left:30%;'>
+      <img style="width: 80px;height: 90px;" src="{% static 'images/ui/interview.png' %}"/>
+      <h5 class="oh-404__subtitle mt-4 ml-2">{% trans "No interviews are scheduled for this candidate" %}</h5>
+    </div> {% endcomment %}
+{% endif %}
+</div>
\ No newline at end of file
diff --git a/recruitment/templates/cbv/candidates/profile_notes_tab.html b/recruitment/templates/cbv/candidates/profile_notes_tab.html
new file mode 100644
index 000000000..43b0b2dce
--- /dev/null
+++ b/recruitment/templates/cbv/candidates/profile_notes_tab.html
@@ -0,0 +1,4 @@
+{% load i18n %}
+<div id="note">
+{% include "candidate/individual_view_note.html" %}
+</div>
\ No newline at end of file
diff --git a/recruitment/templates/cbv/candidates/profile_onboarding_tab.html b/recruitment/templates/cbv/candidates/profile_onboarding_tab.html
new file mode 100644
index 000000000..2ba0e7ce9
--- /dev/null
+++ b/recruitment/templates/cbv/candidates/profile_onboarding_tab.html
@@ -0,0 +1,82 @@
+{% load i18n %}
+{% load static %}
+{% load horillafilters %}
+<style>
+       .onboarding-task-status{
+         padding: 20px;
+         margin-top: 5px;
+         font-weight: 700;
+       }
+       .onboarding-task-status--ongoing{
+         border-left: solid 4px yellow;
+         background-color: rgba(255, 255, 0, 0.113);
+       }
+       .onboarding-task-status--stuck{
+         border-left: solid 4px rgb(255, 60, 0);
+         background-color: rgb(255, 60, 0,0.113);
+       }
+       .onboarding-task-status--todo, .onboarding-task-status--None{
+         border-left: solid 4px rgb(205, 205, 205);
+         background-color: rgba(205,205,205,0.113);
+       }
+       .onboarding-task-status--done{
+         border-left: solid 4px rgb(154, 205, 50);
+         background-color: rgba(154, 205, 50,0.113);
+       }
+       .onboarding-task-status--scheduled{
+         border-left: solid 4px rgb(0, 255, 255);
+         background-color: rgb(0, 255, 255,0.133);
+       }
+       .oh-sticky-table__tr:hover {
+         background-color: #fff
+       }
+</style>
+     <div class="oh-sticky-table">
+       <div class="oh-sticky-table__table oh-table--sortable">
+         <div class="oh-sticky-table__thead">
+             <div class="oh-sticky-table__tr">
+                 <div class="oh-sticky-table__th"></div>
+             </div>
+         </div>
+         <div class="oh-sticky-table__tbody">
+          {% if candidate.candidate_task.exists %}
+           {% for task in candidate.candidate_task.all %}
+             <div class="oh-sticky-table__tr">
+               <div class="oh-sticky-table__td">
+                 <div class="oh-sticky-table__sd d-flex justify-content-between" style="width: 500px;overflow: hidden;">
+                   <div class="oh-profile oh-profile--md">
+                     <span class="oh-profile__name oh-text--dark">{{ task.onboarding_task_id.task_title }}</span>
+                   </div>
+                   <span class="oh-recuritment_tag  {% if task.status == 'done' %} done-task {% elif task.status == 'scheduled' %} scheduled-task{% elif task.status == 'ongoing' %} ongoing-task{% elif task.status == 'stuck' %} dd stuck-task {% elif task.status == 'todo' %} todo-task{% endif %}">
+                     <select hx-swap="none" hx-get="{% url 'change-task-status' %}?task_id={{task.id}}"
+                     name="status"
+                     style="width: 150px;"
+                     id="task_status{{task.id}}">
+                         {% for status in task.choice %}
+                         <option value="{{status.0}}"
+                         {% if status.0 == task.status %}
+                         selected
+                         {% endif %}
+                         >{{status.1}}</option>
+                         {% endfor %}
+                     </select>
+                   </span>
+                 </div>
+               </div>
+             </div>
+           {% endfor %}
+           {% else %}
+           <div class="oh-wrapper" align="center" style="margin-top: 7vh; margin-bottom:7vh;">
+            <div align="center">
+              <img src="{% static "images/ui/project/task.png" %}" class="oh-404__image" alt="Page not found. 404.">
+              <h5 class="oh-404__subtitle mt-4 ml-2">{% trans "There are no tasks assigned for this candidate." %}</h5>
+            </div>
+          </div>
+       {% endif %}
+   </div>
+</div>
+</div>
+     </div>
+    </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/recruitment/templates/cbv/candidates/profile_resume_tab.html b/recruitment/templates/cbv/candidates/profile_resume_tab.html
new file mode 100644
index 000000000..6dccdd86b
--- /dev/null
+++ b/recruitment/templates/cbv/candidates/profile_resume_tab.html
@@ -0,0 +1,17 @@
+{% load i18n %}
+{% load static %}
+{% if candidate.resume %}
+    <iframe id="iframe_pdf"
+    src="{{candidate.resume.url}}" style="width: 100%; height: 500px"
+    frameborder="0">
+    </iframe>
+{% else %}
+
+<div class="oh-wrapper" align="center" style="margin-top: 7vh; margin-bottom:7vh;">
+    <div align="center">
+      <img src="{% static "images/ui/curriculum-vitae.png" %}" class="oh-404__image" alt="Page not found. 404.">
+      <h5 class="oh-404__subtitle mt-4 ml-2">{% trans "This candidate does not have a resume on file." %}</h5>
+    </div>
+  </div>
+  {% endif %}
+
diff --git a/recruitment/templates/cbv/candidates/profile_survey_tab.html b/recruitment/templates/cbv/candidates/profile_survey_tab.html
new file mode 100644
index 000000000..04907118c
--- /dev/null
+++ b/recruitment/templates/cbv/candidates/profile_survey_tab.html
@@ -0,0 +1,67 @@
+{% load i18n %}
+{% load horillafilters %}
+{% load static %}
+
+{% if candidate.recruitmentsurveyanswer_set.all %}
+            {% for surveys in candidate.recruitmentsurveyanswer_set.all %}
+            <div class="oh-survey__table">
+              {% for question, answer_list in surveys.answer.items %}
+              {% if question != "csrfmiddlewaretoken" %}
+                  <div class="oh-survey__table-row">
+                    <div class="oh-survey__table-col">
+                      {% if question|slice:"0:11" == "percentage_" %}
+                        {{ question|slice:"11:" }}
+                      {% elif question|slice:"0:7" == "rating_" %}
+                        {{ question|slice:"7:" }}
+                      {% elif question|slice:"0:5" == "file_" %}
+                        {{ question|slice:"5:" }}
+                      {% else %}
+                        {{ question }}
+                      {% endif %}
+                    </div>
+                    <div class="oh-survey__table-col">
+                      {% if answer_list|length > 1 %}
+                        {{ answer_list|join:", " }}
+                      {% else %}
+                        {% if answer_list.0 == "on" or answer_list.0 == "off"%}
+                          {{ answer_list.0|on_off }}
+                        {% elif question|slice:"0:11" == "percentage_" %}
+                          {{ answer_list.0 }}%
+                        {% elif question|slice:"0:5" == "file_" %}
+                          <a href="/media/{{ answer_list.0 }}" target="_blank">{{ answer_list.0 }}</a>
+                        {% elif question|slice:"0:7" == "rating_" %}
+                            <div class="oh-rate">
+                              <input type="radio" id="star5{{question.id}}" value="5" disabled {% if answer_list.0 == '5' %} checked {% endif %} />
+                              <label for="star5{{question.id}}" title="5 Stars">5 {% trans "Stars" %}</label>
+                              <input type="radio" id="star4{{question.id}}" value="4" disabled  {% if answer_list.0 == '4' %} checked {% endif %} />
+                              <label for="star4{{question.id}}" title="4 Stars">4 {% trans "Stars" %}</label>
+                              <input type="radio" id="star3{{question.id}}" value="3" disabled  {% if answer_list.0 == '3' %} checked {% endif %} />
+                              <label for="star3{{question.id}}" title="3 Stars">3 {% trans "Stars" %}</label>
+                              <input type="radio" id="star2{{question.id}}" value="2" disabled  {% if answer_list.0 == '2' %} checked {% endif %}  />
+                              <label for="star2{{question.id}}" title="2 Stars">2 {% trans "Stars" %}</label>
+                              <input type="radio" id="star1{{question.id}}" value="1" disabled  {% if answer_list.0 == '1' %} checked {% endif %} />
+                              <label for="star1{{question.id}}" title="1 Star">1 {% trans "Star" %}</label>
+                            </div>
+                        {% else %}
+                          {{ answer_list.0 }}
+                        {% endif %}
+                      {% endif %}
+                    </div>
+                  </div>
+              {% endif %}
+            {% endfor %}
+            </div>
+            {% endfor %}
+            {% else %}
+            <div class="oh-wrapper" align="center" style="margin-top: 7vh; margin-bottom:7vh;">
+              <div align="center">
+                <img src="{% static "images/ui/editor.png" %}" class="oh-404__image" alt="Page not found. 404.">
+                <h5 class="oh-404__subtitle mt-4 ml-2">{% trans "No survey templates have been established yet." %}</h5>
+              </div>
+            </div>
+            {% endif %}
+              {% comment %} <div class='d-flex mt-5' style='margin-left:30%;'>
+                <img style="width: 80px;height: 80px;" src="{% static 'images/ui/editor.png' %}" />
+                <h5 class="oh-404__subtitle mt-4 ml-2">{% trans "No survey templates have been established yet." %}</h5>
+              </div> {% endcomment %}
+        </div>
\ No newline at end of file
diff --git a/recruitment/templates/cbv/candidates/rating.html b/recruitment/templates/cbv/candidates/rating.html
new file mode 100644
index 000000000..ddbb8edb7
--- /dev/null
+++ b/recruitment/templates/cbv/candidates/rating.html
@@ -0,0 +1,16 @@
+{% load basefilters %}
+{% load i18n %}
+{% load recruitmentfilters%}
+{% with instance.request.user.employee_get.candidate_rating.all as candidate_ratings  %}
+<form >
+  <div class="d-block mb-0">
+    <div class="oh-rate" onmouseenter="event.stopPropagation()">
+      {% for i in "54321" %}
+      <input type="radio" id="star{{i}}{{instance.id}}" name="rating" class="rating-radio" value="{{i}}" disabled {% if instance.candidate_rating.all|avg_rating:instance == i %} checked {% endif %} />
+      <label for="star{{i}}{{instance.id}}" >5 {% trans "Stars" %}</label>
+      {% endfor %}
+    </div>
+    <span id="rating-radio-error"></span>
+  </div>
+</form>
+{% endwith %}
\ No newline at end of file
diff --git a/recruitment/templates/cbv/candidates/resume.html b/recruitment/templates/cbv/candidates/resume.html
new file mode 100644
index 000000000..d140c02fe
--- /dev/null
+++ b/recruitment/templates/cbv/candidates/resume.html
@@ -0,0 +1,13 @@
+
+<div onclick="event.stopPropagation()">
+    <a
+      style="text-decoration: none"
+      class="oh-btn oh-btn--light"
+      href="/media/{{instance.resume}}"
+      target="_blank"
+      title="Resume"
+      rel="noopener noreferrer"
+      >
+      <span class="oh-file-icon oh-file-icon--pdf"></span> &nbsp View
+    </a>
+  </div>
\ No newline at end of file
diff --git a/recruitment/templates/cbv/interview/candidate_custom_col.html b/recruitment/templates/cbv/interview/candidate_custom_col.html
new file mode 100644
index 000000000..0e482796a
--- /dev/null
+++ b/recruitment/templates/cbv/interview/candidate_custom_col.html
@@ -0,0 +1,12 @@
+{% load i18n %}
+<div class="oh-sticky-table__tr oh-permission-table--toggle" data-toggle-count="">
+    <div class="d-flex align-items-center">
+        <button class="oh-permission-table__collapse me-2">
+            <span title="Reveal"><ion-icon class="oh-permission-table__collapse-down md hydrated" name="chevron-down-outline" role="img" aria-label="chevron down outline"></ion-icon></span>
+            <span title="Collapse"><ion-icon class="oh-permission-table__collapse-up md hydrated" name="chevron-up-outline" role="img" aria-label="chevron up outline"></ion-icon></span>
+        </button>
+        <span class="oh-permission-table__user">{{instance.candidate_id}} </span>
+    </div>
+</div>
+
+
diff --git a/recruitment/templates/cbv/interview/detail_view_actions.html b/recruitment/templates/cbv/interview/detail_view_actions.html
new file mode 100644
index 000000000..129d8962e
--- /dev/null
+++ b/recruitment/templates/cbv/interview/detail_view_actions.html
@@ -0,0 +1,27 @@
+{% load basefilters %}
+{% load i18n %}
+{% if perms.recruitment.change_interviewschedule or request.user.employee_get in instance.employee_id.all %}
+    <a hx-get="{% url 'edit-interview' instance.id %}" 
+    hx-target='#genericModalBody' 
+    data-toggle="oh-modal-toggle"
+    data-target='#genericModal' 
+    class="oh-btn oh-btn--info w-100" title="{% trans 'Edit' %}">
+    <ion-icon name="create-outline"></ion-icon>
+</a>
+{% endif %}
+{% if perms.recruitment.delete_interviewschedule %}
+<form
+hx-post="{% url 'delete-interview' instance.id %}"
+hx-target = "#interviewdelete"
+hx-confirm="{% trans "Are you sure you want to delete this interview?" %}"
+method="post"
+style="display: contents;width:100%">
+{% csrf_token %}
+<button onclick="event.stopPropagation()" type="submit" class="oh-btn oh-btn--secondary w-100" title="{% trans 'Delete' %}">
+<ion-icon name="trash-outline" role="img" class="md hydrated" aria-label="trash outline"></ion-icon>
+</button> 
+
+
+   
+{% endif %}
+
diff --git a/recruitment/templates/cbv/interview/forms/form_hx.html b/recruitment/templates/cbv/interview/forms/form_hx.html
new file mode 100644
index 000000000..35019d51a
--- /dev/null
+++ b/recruitment/templates/cbv/interview/forms/form_hx.html
@@ -0,0 +1,8 @@
+{{form.employee_id}}
+<script>
+    $(document).ready(function () {
+        $("select").on("select2:select", function (e) {
+            $(this).closest("select")[0].dispatchEvent(new Event("change"));
+        });
+    });
+</script>
\ No newline at end of file
diff --git a/recruitment/templates/cbv/interview/inherit_script.html b/recruitment/templates/cbv/interview/inherit_script.html
new file mode 100644
index 000000000..aac8782ce
--- /dev/null
+++ b/recruitment/templates/cbv/interview/inherit_script.html
@@ -0,0 +1,12 @@
+<div>
+    {% include 'generic/horilla_list_table.html' %}
+</div>
+<script>
+    $(document).ready(function () {
+        $("[data-toggle-count]").click(function (e) {
+          e.preventDefault();
+          let recViewContainer = $(this).closest('tr');
+          span = recViewContainer.find(".count-span").toggle()
+        });
+      })
+</script>
\ No newline at end of file
diff --git a/recruitment/templates/cbv/interview/interview_actions.html b/recruitment/templates/cbv/interview/interview_actions.html
new file mode 100644
index 000000000..dbca9d2be
--- /dev/null
+++ b/recruitment/templates/cbv/interview/interview_actions.html
@@ -0,0 +1,25 @@
+{% load i18n %}
+<div class="oh-btn-group" onclick="event.stopPropagation()">
+
+    {% if perms.recruitment.change_interviewschedule or request.user.employee_get in instance.employee_id.all %}
+        <a
+        title="{% trans "Edit" %}" hx-get="{% url 'edit-interview' instance.id %}?view=true&instance_ids={{instance.ordered_ids}}"
+        data-target="#genericModal" hx-swap="innerHTML" hx-target="#genericModalBody"
+        data-toggle="oh-modal-toggle"  class="oh-btn oh-btn--light-bkg w-100"
+        ><ion-icon name="create-outline"></ion-icon></a>
+    {% endif %}
+
+    {% if perms.recruitment.delete_interviewschedule %}
+        <form
+            hx-post="{% url 'delete-interview' instance.id %}?view=true"
+            hx-target = "#interviewdelete"
+            hx-confirm="{% trans "Are you sure you want to delete this interview?" %}"
+            method="post"
+            style="display: contents;width:100%">
+            {% csrf_token %}
+            <button onclick="event.stopPropagation()" type="submit" class="oh-btn oh-btn--light-bkg oh-btn--danger-outline  w-100" title="{% trans 'Delete' %}">
+            <ion-icon name="trash-outline" role="img" class="md hydrated" aria-label="trash outline"></ion-icon>
+            </button>
+        </form>
+    {% endif %}
+</div>
diff --git a/recruitment/templates/cbv/interview/interview_filter.html b/recruitment/templates/cbv/interview/interview_filter.html
new file mode 100644
index 000000000..9f8a80915
--- /dev/null
+++ b/recruitment/templates/cbv/interview/interview_filter.html
@@ -0,0 +1,44 @@
+{%load i18n %}
+{% load static %}
+<div class="oh-dropdown__filter-body">
+    <div class="oh-accordion">
+      <div class="oh-accordion-header">{% trans "Interview" %}</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" for="{{form.employee_id.id_for_label}}">{% trans "Candidate" %}</label>
+              {{form.candidate_id}}
+            </div>
+
+            <div class="oh-input-group">
+              <label class="oh-label" for="{{form.start_date.id_for_label}}">{% trans "Interview Date From" %}</label>
+              {{form.scheduled_from}}
+            </div>
+
+          </div>
+          <div class="col-sm-12 col-md-12 col-lg-6">
+
+            <div class="oh-input-group">
+              <label class="oh-label" for ="{{form.action.id_for_label}}">{% trans "Interviewer" %}</label>
+              {{form.employee_id}}
+            </div>
+
+            <div class="oh-input-group">
+              <label class="oh-label" for="{{form.start_date.id_for_label}}">{% trans "Interview Date Till" %}</label>
+              {{form.scheduled_till}}
+            </div>
+
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  {% comment %} <div class="oh-dropdown__filter-footer">
+    <button
+      class="oh-btn oh-btn--secondary oh-btn--small w-100 filterButton"
+    >
+      {% trans "Filter" %}
+    </button>
+  </div> {% endcomment %}
diff --git a/recruitment/templates/cbv/interview/interview_home_view.html b/recruitment/templates/cbv/interview/interview_home_view.html
new file mode 100644
index 000000000..bd094a877
--- /dev/null
+++ b/recruitment/templates/cbv/interview/interview_home_view.html
@@ -0,0 +1,43 @@
+{% extends "index.html" %}
+{% load static %}
+{% load i18n %}
+{% block content %}
+<meta name="csrf-token" content="{{ csrf_token }}">
+<div hx-get="{% url "interview-nav-view" %}" hx-trigger="load">
+</div> 
+
+
+{% include "generic/components.html" %}
+<div class="oh-checkpoint-badge mb-2" id="selectedInstances" data-ids="[]" data-clicked="" style="display: none">
+</div>
+
+
+<div class="oh-wrapper"
+   id="listContainer">
+  <div class="animated-background">   
+</div>
+</div> 
+
+
+<div class="oh-activity-sidebar" id="leaveactivitySidebar" style="z-index:1000;">
+    <div class="oh-activity-sidebar__body" id="commentContainer">
+    </div>
+  </div>
+
+  
+<script src="{% static 'cbv/leave_requests/leave_requests.js' %}"></script>
+
+<script>
+    $(document).on("htmx:afterSwap", function () {
+          $("[data-toggle-count]").off("click").on("click", function (e) { 
+            e.stopPropagation();
+            let recViewContainer = $(this).closest('tr');
+            span = recViewContainer.find(".count-span").toggle();
+            var row = $(this).closest(".oh-permission-table--toggle").parent().parent();
+            row.toggleClass("oh-permission-table--collapsed");
+            
+          });
+        });
+        
+</script>
+{% endblock content %}
\ No newline at end of file
diff --git a/recruitment/templates/cbv/interview/interviewer_custom_col.html b/recruitment/templates/cbv/interview/interviewer_custom_col.html
new file mode 100644
index 000000000..1f9b5dbd1
--- /dev/null
+++ b/recruitment/templates/cbv/interview/interviewer_custom_col.html
@@ -0,0 +1,35 @@
+{% load i18n %}
+
+<div data-cell-index="1">
+{% for employee in instance.employee_id.all %}
+<div id="employeeContainer{{employee.id}}-{{instance.id}}">
+    <span class="oh-user-panel oh-collapse-panel" data-type="user" >
+        <div class="oh-profile oh-profile--md">
+            <div class="oh-profile__avatar mr-1">
+                <img
+                src="https://ui-avatars.com/api/?name={{employee.get_full_name}}&background=random"
+                class="oh-profile__image"
+                alt="Baby C."
+                />
+            </div>
+        <span class="oh-profile__name oh-text--dark" title="{{employee.get_full_name}}">
+        {{employee.get_full_name|truncatechars:15}}</span>
+        </div>
+        {% if perms.recruitment.change_interviewschedule or request.user.employee_get in instance.employee_id.all %}
+        <a
+        hx-confirm="{% trans 'Are you sure you want to remove this interviewer?' %}"
+        hx-post="{% url 'interview-employee-remove' instance.id employee.id %}"
+        title="{% trans "Remove" %}" hx-swap="innerHTML"
+        hx-target="#listContainer"
+        onclick="event.stopPropagation()"
+        >
+        <ion-icon name="close-outline"></ion-icon>
+        </a>
+        {% endif %}
+        </span>
+        </div>
+        {% endfor %}
+        <span class="count-span">{{instance.employee_id.all|length}} {% trans "Interviewers" %}</span>
+        </div>
+
+      
\ No newline at end of file
diff --git a/recruitment/templates/cbv/interview/status_custom_col.html b/recruitment/templates/cbv/interview/status_custom_col.html
new file mode 100644
index 000000000..5d94283fb
--- /dev/null
+++ b/recruitment/templates/cbv/interview/status_custom_col.html
@@ -0,0 +1,24 @@
+{% load i18n %}
+<div data-cell-index="5">
+    {% if instance.completed %}
+        <div class="d-flex" style="color:green;">
+            <i id="fabIcon" style="font-size:18px;" class="material-icons ms-3 mt-2">check_circle</i>
+            <span class="oh-activity-sidebar__q mt-2">{% trans "Interview Completed" %}</span>
+        </div>
+    {% elif instance.interview_date|date:"Y-m-d" < now|date:"Y-m-d" %}
+        <div class="d-flex" style="color:red;">
+            <i id="fabIcon" style="font-size:18px" class="material-icons ms-3 mt-2">dangerous</i>
+            <span class="oh-activity-sidebar__q mt-2">{% trans "Expired Interview" %}</span>
+        </div>
+    {% elif instance.interview_date|date:"Y-m-d" > now|date:"Y-m-d" %}
+        <div class="d-flex" style="color:orange;">
+            <i id="fabIcon" title="{{instance.interview_date|timeuntil}}" style="font-size:18px;" class="material-icons ms-3 mt-2">schedule</i>
+            <span class="oh-activity-sidebar__q mt-2">{% trans "Upcoming Interview" %}</span>
+        </div>
+    {% elif instance.interview_date|date:"Y-m-d" == now|date:"Y-m-d" and not instance.completed %}
+        <div class="d-flex" style="color:blue;">
+            <i id="fabIcon" style="font-size:18px;" class="material-symbols-outlined ms-3 mt-2">today</i>
+            <span class="oh-activity-sidebar__q mt-2">{% trans "Interview Today" %}</span>
+        </div>
+    {% endif %}
+</div>
\ No newline at end of file
diff --git a/recruitment/templates/cbv/pipeline/candidate_column.html b/recruitment/templates/cbv/pipeline/candidate_column.html
new file mode 100644
index 000000000..7ad6fb7e9
--- /dev/null
+++ b/recruitment/templates/cbv/pipeline/candidate_column.html
@@ -0,0 +1,23 @@
+{% load i18n %}
+<div class="oh-table-config__td"
+                    style="text-decoration: none;width: 150px !important;">
+{% for interview_schedule in instance.candidate_interview.all %}
+                        {% if interview_schedule.interview_date|date:"Y-m-d" == now|date:"Y-m-d" %}
+                            <div class="d-flex" style="flex-direction: row-reverse; margin-bottom:-30px;">
+                                <span class="tooltip">
+                                    <span class="material-symbols-outlined" style="flex-direction: row-reverse;color:green;">
+                                        alarm_on
+                                    </span>
+                                    <span class="tooltiptext fw-bold">
+                                        {% trans "INTERVIEW : Today at" %} {{interview_schedule.interview_time}} {% trans "with" %}
+                                        {% for emp in interview_schedule.employee_id.all %} {{emp}}, {% endfor %}
+                                    </span>
+                                </span>
+                            </div>
+                        {% endif %}
+                    {% endfor %}
+
+                    
+                        <span title="{{instance}}">{{instance|truncatechars:15}} </span>
+                  
+    </div>
\ No newline at end of file
diff --git a/recruitment/templates/cbv/pipeline/count_of_interviews.html b/recruitment/templates/cbv/pipeline/count_of_interviews.html
new file mode 100644
index 000000000..0da64711f
--- /dev/null
+++ b/recruitment/templates/cbv/pipeline/count_of_interviews.html
@@ -0,0 +1,4 @@
+{% load i18n %}
+<div class=" oh-table-config__td">
+    {% trans "Interviews Scheduled" %} : {{instance.candidate_interview.count}}
+</div>
\ No newline at end of file
diff --git a/recruitment/templates/cbv/pipeline/empty.html b/recruitment/templates/cbv/pipeline/empty.html
new file mode 100644
index 000000000..9dccecfa4
--- /dev/null
+++ b/recruitment/templates/cbv/pipeline/empty.html
@@ -0,0 +1,9 @@
+{% load i18n %}
+<div class="oh-wrapper" align="center" style="margin-top: 2vh; margin-bottom:2vh;">
+    <div align="center">
+      {% comment %} <h1 class="oh-404__title">{% trans "No Records found" %}</h1> {% endcomment %}
+      <p class="oh-404__subtitle">
+        {% trans "No records found." %}
+      </p>
+    </div>
+  </div>
\ No newline at end of file
diff --git a/recruitment/templates/cbv/pipeline/interview_template.html b/recruitment/templates/cbv/pipeline/interview_template.html
new file mode 100644
index 000000000..545425f8f
--- /dev/null
+++ b/recruitment/templates/cbv/pipeline/interview_template.html
@@ -0,0 +1,29 @@
+<style>
+.oh-sticky-table__th.sl-no,
+.oh-sticky-table__td.sl-no {
+            width: 70px !important; /* Adjust the width as needed */
+        }
+ </style>
+
+{% if interviews %}
+<div class="oh-sticky-table">
+    <div class="oh-sticky-table__thead">
+        <div class="oh-sticky-table__tr">
+            <div class="oh-sticky-table__th  sl-no" >Sl No.</div>
+            <div class="oh-sticky-table__th">Date </div>
+            <div class="oh-sticky-table__th">Time </div>
+            <div class="oh-sticky-table__th">Is Completed</div>
+        </div>
+    </div>
+        {% for interview in interviews %}
+    <div class="oh-sticky-table__tbody">
+        <div class="oh-sticky-table__tr">
+            <div class="oh-sticky-table__td sl-no">{{ forloop.counter }}</div>
+            <div class="oh-sticky-table__td dateformat_changer">{{ interview.interview_date }}</div>
+            <div class="oh-sticky-table__td timeformat_changer">{{ interview.interview_time }}</div>
+            <div class="oh-sticky-table__td">{% if interview.completed %}Yes{% else %}No{% endif %}</div>
+        </div>
+    </div>
+        {% endfor %}
+</div>
+{% endif %}
diff --git a/recruitment/templates/cbv/pipeline/mail_status.html b/recruitment/templates/cbv/pipeline/mail_status.html
new file mode 100644
index 000000000..cd600ff3a
--- /dev/null
+++ b/recruitment/templates/cbv/pipeline/mail_status.html
@@ -0,0 +1,15 @@
+<span title="{{instance.email}}">
+    {{instance.email|truncatechars:10}}
+</span>
+{% if instance.get_last_sent_mail %}
+  <span title="{{ instance.get_last_sent_mail.subject }} | {{ instance.get_last_sent_mail.get_status_display }}"
+    class="oh-dot oh-dot--small me-1"
+    style="background-color:{% if instance.get_last_sent_mail.status == 'sent' %}
+      yellowgreen
+
+    {% else %}
+      red
+    {% endif %}">
+
+  </span>
+{% endif %}
diff --git a/recruitment/templates/cbv/pipeline/pipeline.html b/recruitment/templates/cbv/pipeline/pipeline.html
new file mode 100644
index 000000000..e0b0cd9f5
--- /dev/null
+++ b/recruitment/templates/cbv/pipeline/pipeline.html
@@ -0,0 +1,95 @@
+{% extends "index.html" %}
+{% load i18n %}
+{% block content %}
+<style>
+  .note-modal-backdrop {
+      z-index: 998 !important;
+  }
+
+  .tooltip {
+      position: relative;
+      display: inline-block; /* Ensures that the tooltip container doesn't stretch to the full width */
+  }
+
+  .tooltip .tooltiptext {
+      visibility: hidden;
+      width: auto; /* Allow the tooltip width to adjust based on content */
+      max-width: auto; /* Limit the maximum width of the tooltip to prevent it from overflowing */
+      background-color: green;
+      color: white;
+      text-align: center;
+      border-radius: 6px;
+      padding: 5px;
+      position: absolute;
+      z-index: 1;
+      bottom: 5%;
+      left: 50%;
+      transform: translateX(5%);
+      opacity: 0;
+      transition: opacity 0.3s;
+      white-space: nowrap; /* Prevents the text from wrapping */
+      overflow: hidden; /* Hides any overflowed content */
+      font-size: 15px;
+  }
+
+  .tooltip:hover .tooltiptext {
+      visibility: visible;
+      opacity: 1;
+
+  
+      
+  }
+</style>
+
+{% include "generic/components.html" %}
+
+<div hx-get="{% url "cbv-pipeline-nav" %}" hx-trigger="load"></div>
+
+<div 
+  class="oh-wrapper" 
+  id="pipelineContainer" 
+  hx-get="{% url "cbv-pipeline-tab" %}?is_active=true" 
+  hx-trigger="load"
+>
+</div>
+
+<div class="oh-activity-sidebar" id="activitySidebar" style="z-index:1000">
+    <div class="oh-activity-sidebar__body" id="noteContainer">
+      <div class="oh-activity-sidebar__header">
+        <a event.stopPropagation
+        style="cursor: pointer;"
+        onclick="$('.oh-activity-sidebar--show').removeClass('oh-activity-sidebar--show');">
+        <ion-icon
+        name="chevron-forward-outline"
+        class="oh-activity-sidebar__header-icon me-2 oh-activity-sidebar__close"
+        data-target="#activitySidebar">
+        </ion-icon>
+        </a>
+      </div>
+    </div>
+  </div>
+
+  <div
+    class="oh-modal"
+    id="bulkResumeUpload"
+    role="dialog"
+    aria-labelledby="bulkResumeUpload"
+    aria-hidden="true"
+>
+    <div class="oh-modal__dialog">
+        <div class="oh-modal__dialog-header">
+            <h2 class="oh-modal__dialog-title" id="bulkResumeUploadLabel">
+                {% trans "Upload Resumes" %}
+            </h2>
+            <button class="oh-modal__close" aria-label="Close">
+                <ion-icon name="close-outline"></ion-icon>
+            </button>
+            <div
+                class="oh-modal__dialog-body mb-4 p-0 pt-2"
+                id="bulkResumeUploadBody"
+            >
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock content %}
\ No newline at end of file
diff --git a/recruitment/templates/cbv/pipeline/pipeline_filter.html b/recruitment/templates/cbv/pipeline/pipeline_filter.html
new file mode 100644
index 000000000..cc2a7fb6a
--- /dev/null
+++ b/recruitment/templates/cbv/pipeline/pipeline_filter.html
@@ -0,0 +1,171 @@
+{% 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"
+              for="{{form.recruitment_managers.id_for_label}}"
+              >{% trans 'Managers' %}</label
+            >
+            {{ form.recruitment_managers }}
+          </div>
+          <div class="oh-input-group">
+            <label
+              class="oh-label"
+              for="{{form.start_date.id_for_label}}"
+              >{% trans 'Start Date' %}</label
+            >
+            {{ form.start_date }}
+          </div>
+          <div class="oh-input-group">
+            <label
+              class="oh-label"
+              for="{{form.start_from.id_for_label}}"
+              >{% trans 'Start Date From' %}</label
+            >
+            {{ form.start_from }}
+          </div>
+          <div class="oh-input-group">
+            <label
+              class="oh-label"
+              for="{{form.closed.id_for_label}}"
+              >{% trans 'Is Closed' %}</label
+            >
+            {{ form.closed }}
+          </div>
+        </div>
+
+        <div class="col-sm-12 col-md-12 col-lg-6">
+          <div class="oh-input-group">
+            <label
+              class="oh-label"
+              for="{{form.company_id.id_for_label}}"
+              >{% trans 'Company' %}</label
+            >
+            {{ form.company_id }}
+          </div>
+          <div class="oh-input-group">
+            <label
+              class="oh-label"
+              for="{{form.end_date.id_for_label}}"
+              >{% trans 'End Date' %}</label
+            >
+            {{ form.end_date }}
+          </div>
+          <div class="oh-input-group">
+            <label
+              class="oh-label"
+              for="{{form.end_till.id_for_label}}"
+              >{% trans 'Till End Date' %}</label
+            >
+            {{ form.end_till }}
+          </div>
+          <div class="oh-input-group">
+            <label
+              class="oh-label"
+              for="{{form.is_published.id_for_label}}"
+              >{% trans 'Is Published' %}</label
+            >
+            {{ form.is_published }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <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' %}</label>
+            {{ stage_filter_obj.form.recruitment_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>
+      </div>
+    </div>
+  </div>
+
+  <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>
+
+<script src="{% static '/base/filter.js' %}"></script>
+<script>
+  {% include "country.js" %}
+</script>
diff --git a/recruitment/templates/cbv/pipeline/rating.html b/recruitment/templates/cbv/pipeline/rating.html
new file mode 100644
index 000000000..fea6f6f4f
--- /dev/null
+++ b/recruitment/templates/cbv/pipeline/rating.html
@@ -0,0 +1,36 @@
+{% load i18n recruitmentfilters horillafilters %}
+<div onclick="event.stopPropagation()">
+    {% with request.user.employee_get.candidate_rating.all as candidate_ratings %}
+    {% if candidate_ratings|has_candidate_rating:instance %}
+    <form hx-swap="none" hx-post='{% url "update-candidate-rating" instance.id %}' method="post">
+        {% csrf_token %}
+        <div class="d-block mb-0" style="width: max-content;">
+            <div class="oh-rate" onclick="$(this).parents().closest('form').find('button').click()">
+                {% for i in "54321" %}
+                <input type="radio" id="star{{i}}{{instance.id}}" name="rating" class="rating-radio"
+                    value="{{i}}" {% if candidate_ratings|rating:instance == i %} checked {% endif %} />
+                <label for="star{{i}}{{instance.id}}" title="{{i}} Stars"></label>
+                {% endfor %}
+            </div>
+            <button type="submit" hidden="true"></button>
+            <span id="rating-radio-error"></span>
+        </div>
+    </form>
+    {% else %}
+    <form hx-swap="none" hx-post='{% url "create-candidate-rating" instance.id %}' method="post">
+        {% csrf_token %}
+        <div class="d-block mb-0">
+            <div class="oh-rate" onclick="$(this).parents().closest('form').find('button').click()">
+                {% for i in "54321" %}
+                <input type="radio" id="star{{i}}{{instance.id}}" name="rating" class="rating-radio"
+                    value="{{i}}" />
+                <label for="star{{i}}{{instance.id}}" title="{{i}} Stars"></label>
+                {% endfor %}
+            </div>
+            <button type="submit" hidden="true"></button>
+            <span id="rating-radio-error"></span>
+        </div>
+    </form>
+    {% endif %}
+    {% endwith %}
+</div>
\ No newline at end of file
diff --git a/recruitment/templates/cbv/pipeline/recruitment_tabs.html b/recruitment/templates/cbv/pipeline/recruitment_tabs.html
new file mode 100644
index 000000000..0a1c8248b
--- /dev/null
+++ b/recruitment/templates/cbv/pipeline/recruitment_tabs.html
@@ -0,0 +1,119 @@
+{% load i18n generic_template_filters %}
+<div id="{{view_id}}">
+  {% if show_filter_tags %} {% include "generic/filter_tags.html" %} {% endif %}
+  <div class="oh-tabs HTV">
+    <script>
+        $("#reloadMessagesButton").click()
+    </script>
+    <div class="HTV"></div>
+    <ul class="oh-tabs__tablist">
+      {% for tab in tabs %}
+      <li
+        class="oh-tabs__tab d-flex {% if forloop.counter == 1 and not active_target %} oh-tabs__tab--active {% endif %}"
+        data-target="#{{view_id}}{{forloop.counter}}"
+        hx-get="{{tab.url}}?{{request.GET.urlencode}}"
+        hx-target="#{{view_id}}{{forloop.counter}}"
+        hx-trigger="load"
+        onclick="switchTab(event)"
+      >
+        {{tab.title}}
+        <div class="d-flex">
+          <div class="oh-tabs__input-badge-container" onclick="event.stopPropagation()">
+            <span
+              class="oh-badge oh-badge--secondary oh-badge--small oh-badge--round ms-2 mr-2"
+              id="badge-{{view_id}}{{forloop.counter}}"
+              {% if tab.badge_label %}
+              data-badge-label="{{tab.badge_label}}"
+              title="0 {{tab.badge_label}}"
+              {% else %}
+              title="0 {% trans "Records" %}"
+              {% endif %}
+              onclick="event.stopPropagation()"
+            >
+              0
+            </span>
+          </div>
+          {% if tab.actions %}
+          <div onclick="event.stopPropagation()" class="oh-dropdown" x-data="{open: false}">
+            <button
+              class="oh-btn oh-stop-prop oh-btn--transparent oh-accordion-meta__btn"
+              @click="open = !open"
+              @click.outside="open = false"
+              title="Actions"
+            >
+              <ion-icon
+                name="ellipsis-vertical"
+                role="img"
+                class="md hydrated"
+                aria-label="ellipsis vertical"
+              ></ion-icon>
+            </button>
+            <div
+              class="oh-dropdown__menu oh-dropdown__menu--right"
+              x-show="open"
+              style="display: none"
+            >
+              <ul class="oh-dropdown__items">
+                {% for action in tab.actions %}
+                {% if instance %}
+                {% if action.accessibility|accessibility:instance %}
+                <li class="oh-dropdown__item">
+                  <a {{action.attrs|safe}}>{{action.action}}</a>
+                </li>
+                {% endif %}
+                {% else %}
+                <li class="oh-dropdown__item">
+                  <a {{action.attrs|safe}}>{{action.action}}</a>
+                </li>
+                {% endif %}
+                {% endfor %}
+              </ul>
+            </div>
+          </div>
+          {% endif %}
+        </div>
+      </li>
+      {% endfor %}
+    </ul>
+    <div class="oh-tabs__contents">
+      {% for tab in tabs %}
+      <div
+        class="oh-tabs__content {% if forloop.counter == 1 and not active_target %} oh-tabs__content--active {% endif %}"
+        id="{{view_id}}{{forloop.counter}}"
+      >
+    <div class="animated-background"></div>
+    </div>
+      {% endfor %}
+    </div>
+  </div>
+
+  
+
+  <script>
+    $("li.oh-tabs__tab").click(function (e) { 
+      var target = `li[data-target="${$(this).attr("data-target")}"]`
+      e.preventDefault();
+      $.ajax({
+        type: "get",
+        url: "{% url 'active-tab' %}",
+        data: {
+          "path":"{{request.path}}",
+          "target":target,
+        },
+        success: function (response) {
+          
+        }
+      });
+    });
+    {% if active_target %}
+    $("div.oh-tabs").find(`{{active_target|safe}}`).click();
+    if (!$(".oh-tabs__tab--active").length) {
+      $("#{{view_id}}").find(".oh-tabs__tab").first().click()
+    }else{
+      setTimeout(() => {
+        $(".oh-tabs__tab--active").click();
+      }, 100);
+    }
+    {% endif %}
+  </script>
+</div>
diff --git a/recruitment/templates/cbv/pipeline/stage_drop_down.html b/recruitment/templates/cbv/pipeline/stage_drop_down.html
new file mode 100644
index 000000000..391510b15
--- /dev/null
+++ b/recruitment/templates/cbv/pipeline/stage_drop_down.html
@@ -0,0 +1,17 @@
+{% load i18n %}
+{% load basefilters %}
+{% load recruitmentfilters %}
+{% if perms.recruitment.change_recruitment or request.user.employee_get in instance.recruitment_id.recruitment_managers.all or request.user.employee_get in instance.stage_id.stage_managers.all  %}
+<div data-cell-index="3" onclick="event.stopPropagation();">
+  <select hx-post="{% url "cbv-change-stage" instance.pk %}" name="stage_id"
+          class="row-dropdown"
+          style="width: 90%;color: hsl(0,0%,11%); background-color: transparent; height: 100%; border: 1px solid transparent;"
+          >
+    {% for stage in stages %}
+    <option value="{{stage.pk}}"{% if stage.pk == instance.stage_id.pk %}selected{% endif %}>{{stage}}</option>
+    {% endfor %}
+  </select>
+</div>
+{% else %}
+  {{instance.stage_id}}
+{% endif %}
diff --git a/recruitment/templates/cbv/pipeline/stage_order.html b/recruitment/templates/cbv/pipeline/stage_order.html
new file mode 100644
index 000000000..25398b4a6
--- /dev/null
+++ b/recruitment/templates/cbv/pipeline/stage_order.html
@@ -0,0 +1,70 @@
+{% load static i18n %}
+<div class="oh-modal__dialog-header">
+    <span class="oh-modal__dialog-title" id="genericModalLabel">
+        {% trans "Update Stage Order" %}
+    </span>
+    <button
+        class="oh-modal__close--custom"
+        onclick="$(this).closest('.oh-modal--show').removeClass('oh-modal--show');"
+        aria-label="Close"
+    >
+        <ion-icon
+            name="close-outline"
+            role="img"
+            class="md hydrated"
+        ></ion-icon>
+    </button>
+</div>
+<div class="oh-modal__dialog-body oh-modal__dialog-relative rounded ">
+    <div class="oh-profile-section" id="sequenceForm">
+        <ul class="mt-3 p-0" id="sortable">
+            {% for stage in stages %}
+            <li
+                class="oh-btn oh-btn--small border d-flex align-items-center justify-content-start p-3 rounded mb-2"
+                style="cursor: grab"
+                data-id = "{{stage.id}}"
+            >
+                <span class="text-secondary me-3 fs-5">≡</span>
+                <span class="fw-bold text-primary me-2">{{stage.sequence}}.</span>
+                <span>{{stage}}</span>
+            </li>
+            {% endfor %}
+        </ul>
+        <div class="d-flex flex-row-reverse">
+            <button
+                type="submit"
+                class="oh-btn oh-btn--secondary mt-2 mr-0 oh-btn--w-100-resp"
+            >
+                {% trans "Save" %}
+            </button>
+        </div>
+    </div>
+</div>
+<script>
+    $(function () {
+        $("#sortable").sortable();
+        $("#sequenceForm button[type=submit]").on("click", function (e) {
+            e.preventDefault();
+            let order = [];
+            $("#sortable li").each(function (index) {
+                order.push($(this).data("id"));
+            });
+
+            $.ajax({
+                url: "{% url 'rec-update-stage-seq' recruitment.id %}",
+                method: "POST",
+                data: {
+                    order: JSON.stringify(order),
+                    csrfmiddlewaretoken: '{{ csrf_token }}'
+                },
+                success: function (response) {
+                    $(".oh-modal--show").removeClass("oh-modal--show");
+                    $("#applyFilter").click()
+                },
+                error: function (response) {
+                    console.log("Error updating order");
+                }
+            });
+        });
+    });
+</script>
diff --git a/recruitment/templates/cbv/pipeline/stages.html b/recruitment/templates/cbv/pipeline/stages.html
new file mode 100644
index 000000000..14c74cd10
--- /dev/null
+++ b/recruitment/templates/cbv/pipeline/stages.html
@@ -0,0 +1,65 @@
+{% load i18n recruitmentfilters %}
+<div id="{{view_id}}">
+  {% for stage in stages %}
+  <div id="selectedCandidateRecords{{ stage.id }}" data-ids="[]"></div>
+  <div class="oh-tabs__movable-area mb-2">
+    <div class="oh-tabs__movable">
+      <div class="oh-tabs__movable-header"  onclick="$(this).parent().find('.oh-tabs__movable-body').toggleClass('d-none');">
+        <input class="oh-tabs__movable-title oh-table__editable-input" value="{{stage.stage}}" readonly />
+
+        <div onclick="event.stopPropagation()" class="oh-dropdown" x-data="{open: false}">
+          <button class="oh-btn oh-stop-prop oh-btn--transparent oh-accordion-meta__btn" @click="open = !open" @click.outside="open = false" title=" Actions">
+              <ion-icon name="ellipsis-vertical" role="img" class="md hydrated" aria-label="ellipsis vertical"></ion-icon>
+            </button>
+            <div class="oh-dropdown__menu oh-dropdown__menu--right" x-show="open">
+              <ul class="oh-dropdown__items">
+                {% if perms.recruitment.add_candidate or request.user.employee_get in stage.stage_managers.all or request.user.employee_get in rec.recruitment_managers.all %}
+                <li class="oh-dropdown__item" style="cursor: pointer;">
+                  <a hx-target="#genericModalBody" hx-get="{% url 'add-candidate-to-stage'%}?stage_id={{ stage.id }}" data-toggle="oh-modal-toggle" data-target="#genericModal" class="oh-dropdown__link">Add Candidate</a>
+                </li>
+                {% endif %}
+                {% if perms.recruitment.change_stage or request.user|recruitment_manages:rec or request.user.employee_get in stage.stage_managers.all %}
+                  <li class="oh-dropdown__item" style="cursor: pointer;">
+                    <a hx-target="#genericModalBody" hx-get="{% url 'stage-update-pipeline' stage.id %}" data-toggle="oh-modal-toggle" data-target="#genericModal" class="oh-dropdown__link">Edit</a>
+                  </li>
+                  <li class="oh-dropdown__item" style="cursor: pointer;">
+                    <a hx-target="#objectCreateModalTarget" hx-get="{% url 'send-mail' %}?stage_id={{stage.id}}" data-toggle="oh-modal-toggle" data-target="#objectCreateModal"  class="oh-dropdown__link">
+                      {% trans "Bulk mail" %}
+                    </a>
+                  </li>
+                  {% endif %}
+                  {% if perms.recruitment.delete_stage %}
+                  <li class="oh-dropdown__item oh-dropdown__link--danger">
+                    
+                    <a data-toggle="oh-modal-toggle"
+                    data-target="#deleteConfirmation"
+                    hx-get="{% url 'generic-delete' %}?model=recruitment.Stage&pk={{stage.pk}}"
+                    hx-target="#deleteConfirmationBody"> Delete </a>
+                  </li>
+                  {% endif %}
+
+                  
+                </ul>
+              </div>
+        </div>
+      </div>
+      <div 
+      class="oh-tabs__movable-body position-relative"
+      hx-get="{% url "candidate-lists-cbv" stage.pk stage.recruitment_id.pk %}?{{request.GET.urlencode}}"
+      hx-trigger="load"
+      
+      ></div>
+    </div>
+  </div>
+  {% endfor %}
+  <script>
+    var tabId = $("#{{view_id}}").closest(".oh-tabs__content").attr("id");
+    var badge = $(`#badge-${tabId}`);
+    var count = "{{stages|length}}";
+    var label = badge.attr("data-badge-label") || "";
+    var title = count + " " + label;
+    badge.html(count);
+    badge.attr("title", title);
+  </script>
+</div>
+  
\ No newline at end of file
diff --git a/recruitment/templates/cbv/recruitment/actions.html b/recruitment/templates/cbv/recruitment/actions.html
new file mode 100644
index 000000000..e79ebb76d
--- /dev/null
+++ b/recruitment/templates/cbv/recruitment/actions.html
@@ -0,0 +1,31 @@
+{% load i18n %}
+<div class="oh-btn-group" onclick="event.stopPropagation()">
+    <a href="#" class="oh-btn oh-btn--light-bkg w-100" onclick="copyLink(window.location.origin+'/recruitment/application-form?recruitmentId={{instance.id}}')" title="{% trans "Share Link" %}">
+      <ion-icon name="share-social-outline"></ion-icon>
+    </a>
+    {% if perms.recruitment.change_recruitment %}
+    <a  hx-get="{% url 'recruitment-update' instance.id %}?instance_ids={{instance.ordered_ids}}" hx-target='#genericModalBody' hx-swap='innerHTML' data-toggle='oh-modal-toggle' data-target='#genericModal'  class="oh-btn oh-btn--light-bkg w-100" title="Edit"><ion-icon name="create-outline"></ion-icon></a>
+    {% endif %}
+    <a hx-get="{% url 'recruitment-duplicate' instance.id %}" hx-target='#genericModalBody' hx-swap='innerHTML' data-toggle='oh-modal-toggle' data-target='#genericModal'  class="oh-btn oh-btn--light-bkg w-100" title="{% trans 'Duplicate' %}"><ion-icon name="copy-outline"></ion-icon></a>
+    {% if perms.recruitment.delete_recruitment %}
+      {% if instance.is_active %}
+        <a onclick="return confirm('{% trans "Are you sure you want to archive this recruitment?" %}');" href="{% url 'recruitment-archive' instance.id %}" class="oh-btn oh-btn--light-bkg w-100" title="{% trans 'Archive' %}"><ion-icon name="archive"></ion-icon></a>
+        {% else %}
+        <a onclick="return confirm('{% trans "Are you sure you want to unarchive this recruitment?" %}');" href="{% url 'recruitment-archive' instance.id %}" class="oh-btn oh-btn--light-bkg w-100" title="{% trans 'Unarchive' %}"><ion-icon name="archive"></ion-icon></a>
+      {% endif %}
+    {% endif %}
+    {% if perms.recruitment.delete_recruitment %}
+    <span>
+      <a
+        hx-get="{% url 'generic-delete' %}?model=recruitment.Recruitment&pk={{instance.id}}" 
+        hx-target="#deleteConfirmationBody" data-toggle="oh-modal-toggle" 
+        data-target="#deleteConfirmation"
+        style="display: contents"
+      >
+      <button class="oh-btn oh-btn--light-bkg oh-btn--danger-outline  w-100" title="{% trans 'Delete' %}">
+        <ion-icon name="trash-outline" role="img" class="md hydrated" aria-label="trash outline"></ion-icon>
+      </button>
+    </a>
+    </span>
+    {% endif %}
+  </div>
\ No newline at end of file
diff --git a/recruitment/templates/cbv/recruitment/detail_action.html b/recruitment/templates/cbv/recruitment/detail_action.html
new file mode 100644
index 000000000..774de8102
--- /dev/null
+++ b/recruitment/templates/cbv/recruitment/detail_action.html
@@ -0,0 +1,69 @@
+{% load i18n %}
+<div class="oh-btn-group" style="width: 100%;">
+  
+    {% if perms.recruitment.change_recruitment %}
+    <a hx-get="{% url 'recruitment-update' instance.id %}" hx-target='#genericModalBody' hx-swap='innerHTML' data-toggle='oh-modal-toggle' data-target='#genericModal'  class="oh-btn oh-btn--info w-50 " title="Edit">
+        <button style="
+        background: none;
+        color: inherit;
+        border: none;
+        padding: 0;
+        font: inherit;
+        cursor: pointer;
+        outline: inherit;"
+         title="{% trans 'Edit' %}">
+        <ion-icon name="create-outline" ></ion-icon>
+      Edit</button></a>
+    {% endif %}
+    {% if perms.recruitment.delete_recruitment %}
+      {% if instance.is_active %}
+        <a onclick="return confirm('{% trans "Are you sure you want to archive this recruitment?" %}');" href="{% url 'recruitment-archive' instance.id %}" class="oh-btn  oh-btn--primary w-50 " title="{% trans 'Archive' %}">
+            <button style="
+            background: none;
+            color: inherit;
+            border: none;
+            padding: 0;
+            font: inherit;
+            cursor: pointer;
+            outline: inherit;"
+             title="{% trans 'Archive' %}">
+            <ion-icon name="archive" ></ion-icon>
+          Archive</button></a>
+        {% else %}
+        <a onclick="return confirm('{% trans "Are you sure you want to unarchive this recruitment?" %}');" href="{% url 'recruitment-archive' instance.id %}" class="oh-btn  oh-btn--primary w-50" title="{% trans 'Unarchive' %}">
+            <button style="
+            background: none;
+            color: inherit;
+            border: none;
+            padding: 0;
+            font: inherit;
+            cursor: pointer;
+            outline: inherit;"
+             title="{% trans 'Unarchive' %}">
+            <ion-icon name="archive" ></ion-icon> Un-archive
+          </button></a>
+      {% endif %}
+    {% endif %}
+    {% if perms.recruitment.delete_recruitment %}
+    
+      <form class="oh-btn  oh-btn--secondary w-50" title="{% trans 'Delete' %}"
+      action="{% url 'recruitment-delete' instance.id  %}"
+      onsubmit="return confirm('{% trans "Are you sure to delete this recruitment?" %}')"
+      method="post"
+     >
+      {% csrf_token %}
+      <button style="
+        background: none;
+        color: inherit;
+        border: none;
+        padding: 0;
+        font: inherit;
+        cursor: pointer;
+        outline: inherit;"
+         title="{% trans 'Delete' %}">
+        <ion-icon name="trash-outline" ></ion-icon>
+      Delete</button>
+    </form>
+  
+    {% endif %}
+  </div>
\ No newline at end of file
diff --git a/recruitment/templates/cbv/recruitment/filters.html b/recruitment/templates/cbv/recruitment/filters.html
new file mode 100644
index 000000000..2ecab32b0
--- /dev/null
+++ b/recruitment/templates/cbv/recruitment/filters.html
@@ -0,0 +1,70 @@
+{% 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>
+              {{form.recruitment_managers}}
+          </div>
+          <div class="oh-input-group">
+            <label class="oh-label">{% trans "Start Date" %}</label>
+            {{form.start_date}}
+          </div>
+          <div class="oh-input-group">
+            <label class="oh-label">{% trans "Is Closed" %}</label>
+            {% comment %} {{form.closed}} {% endcomment %}
+            <select name="closed" id="closed" class="oh-select oh-select-2 w-100">
+              <option value="unknown">{% trans "Unknown" %}</option>
+              <option value="true">{% trans "True" %}</option>
+              <option value="false" selected>{% trans "False" %}</option>
+            </select>
+          </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>
+            {{form.company_id}}
+          </div>
+          <div class="oh-input-group">
+            <label class="oh-label">{% trans "End Date" %}</label>
+            {{form.end_date}}
+          </div>
+          <div class="oh-input-group">
+            <label class="oh-label">{% trans "Is Published" %}</label>
+            {{form.is_published}}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+
+  <div class="oh-accordion">
+    <div class="oh-accordion-header">{% trans "Advanced" %}</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 "Start Date From" %}</label>
+            {{form.start_from}}
+          </div>
+          <div class="oh-input-group">
+            <label class="oh-label">{% trans "Is Active" %}?</label>
+            {{form.is_active}}
+          </div>
+        </div>
+        <div class="col-sm-12 col-md-12 col-lg-6">
+          <div class="oh-input-group">
+            <label class="oh-label">{% trans "Till End Date" %}</label>
+            {{form.end_till}}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script src="{% static '/base/filter.js' %}"></script>
diff --git a/recruitment/templates/cbv/recruitment/managers_col.html b/recruitment/templates/cbv/recruitment/managers_col.html
new file mode 100644
index 000000000..e16f56115
--- /dev/null
+++ b/recruitment/templates/cbv/recruitment/managers_col.html
@@ -0,0 +1,37 @@
+{% load i18n %}
+<style>
+    .count-span{
+      width: 100%;
+      display: -webkit-box;
+      display: -ms-flexbox;
+      display: flex;
+      padding: 0.5rem 0rem;
+      font-style: italic;
+      color: hsl(0deg,0%,37%);
+      width: 100%;
+    }
+  </style>
+
+<div>
+    {% for manager in instance.recruitment_managers.all %}
+    <span class="oh-user-panel oh-collapse-panel" data-type="user">
+      <div class="oh-profile oh-profile--md">
+        <div class="oh-profile__avatar mr-1">
+          <img
+          src="https://ui-avatars.com/api/?name={{manager.get_full_name}}&background=random"
+          class="oh-profile__image"
+          alt="Baby C."
+          />
+        </div>
+        <span class="oh-profile__name oh-text--dark" title="{{manager}}"
+        >{{manager.employee_first_name|truncatechars:4}}</span
+        >
+      </div>
+      <a  hx-confirm="{% trans 'Are you sure you want to remove this recruitment manager?' %}" hx-post="{% url 'remove-recruitment-manager' manager.id instance.id %}?{{pd}}&page={{data.number}}"  title="{% trans "Remove" %}" 
+      hx-target="#listContainer" hx-swap="outerHTML" class="oh-user-panel__remove" onclick="event.stopPropagation()">
+        <ion-icon name="close-outline"></ion-icon>
+      </a>
+    </span>
+    {% endfor %}
+    <span class="count-span">{{instance.recruitment_managers.all|length}} {% trans "Managers" %}</span>
+  </div>
\ No newline at end of file
diff --git a/recruitment/templates/cbv/recruitment/open_jobs.html b/recruitment/templates/cbv/recruitment/open_jobs.html
new file mode 100644
index 000000000..c8f94a93c
--- /dev/null
+++ b/recruitment/templates/cbv/recruitment/open_jobs.html
@@ -0,0 +1,21 @@
+{% load i18n %}
+<div>
+    {% for jb in instance.open_positions.all %}
+    <span class="oh-user-panel oh-collapse-panel" data-type="user">
+      <div class="oh-profile oh-profile--md">
+        <div class="oh-profile__avatar mr-1">
+          <img
+          src="https://ui-avatars.com/api/?name={{jb.job_position}}&background=random"
+          class="oh-profile__image"
+          alt="Baby C."
+          />
+        </div>
+        <span class="oh-profile__name oh-text--dark" title="{{jb}}"
+        >{{jb.job_position|truncatechars:5}}.</span
+        >
+      </div>
+    </span>
+    {% endfor %}
+    <span class="count-span">{{instance.open_positions.all|length}} {% trans "Jobs" %}</span>
+
+  </div>
\ No newline at end of file
diff --git a/recruitment/templates/cbv/recruitment/rec_main.html b/recruitment/templates/cbv/recruitment/rec_main.html
new file mode 100644
index 000000000..1882f78a0
--- /dev/null
+++ b/recruitment/templates/cbv/recruitment/rec_main.html
@@ -0,0 +1,16 @@
+
+<div class="rec-view-container">
+    {% include "generic/horilla_list_table.html" %}
+</div>
+<script>
+  $(document).on("htmx:afterSwap", function () {
+    $("[data-toggle-count]").off("click").on("click", function (e) { 
+      e.stopPropagation();
+      let recViewContainer = $(this).closest('tr');
+      span = recViewContainer.find(".count-span").toggle();
+      var row = $(this).closest(".oh-permission-table--toggle").parent().parent();
+      row.toggleClass("oh-permission-table--collapsed");
+    });
+  });
+</script>
+
diff --git a/recruitment/templates/cbv/recruitment/recruitment.html b/recruitment/templates/cbv/recruitment/recruitment.html
new file mode 100644
index 000000000..7ceffa098
--- /dev/null
+++ b/recruitment/templates/cbv/recruitment/recruitment.html
@@ -0,0 +1,118 @@
+{% extends "index.html" %}
+
+{% load i18n %}{% load static recruitmentfilters %}
+
+
+{% block content %}
+
+<meta name="csrf-token" content="{{ csrf_token }}">
+<style>
+    .count-span{
+      width: 100%;
+      display: -webkit-box;
+      display: -ms-flexbox;
+      display: flex;
+      padding: 0.5rem 0rem;
+      font-style: italic;
+      color: hsl(0deg,0%,37%);
+      width: 100%;
+    }
+
+    .open--dot{
+      background-color:yellowgreen;
+    }
+    .closed--dot{
+      background-color:red;
+    }
+
+    .closed-True{
+      border-left: 3.4px solid red !important;
+      border-radius: 4px 0 0 4px;
+    
+    }
+    .closed-False {
+    
+      border-left: 3.4px solid yellowgreen !important;
+      border-radius: 4px 0 0 4px;
+    
+    }
+.oh-permission-table--collapsed .oh-permission-panel,
+.oh-permission-table--collapsed .oh-user-panel {
+  display: none !important ;
+}
+.oh-permission-table--collapsed
+  .oh-permission-table__collapse
+  .oh-permission-table__collapse-up {
+  display: none  !important;
+}
+.oh-permission-table--collapsed
+  .oh-permission-table__collapse
+  .oh-permission-table__collapse-down {
+  display: block  !important;
+}
+.oh-permission-table__collapse .oh-permission-table__collapse-up {
+  display: block  !important;
+}
+.oh-permission-table__collapse .oh-permission-table__collapse-down {
+  display: none  !important;
+}
+
+  </style>
+
+<script>
+    function copyLink(link){
+        var $temp = $("<input>");
+        var $url = $(location).attr('href');
+        $("body").append($temp);
+        $temp.val(link).select();
+        document.execCommand("copy");
+        $temp.remove();
+        Swal.fire({
+          text: "Link copied",
+          icon: "success",
+          showConfirmButton: false,
+          timer: 3000, // Set the timer to 3000 milliseconds (3 seconds)
+          timerProgressBar: true, // Show a progress bar as the timer counts down
+        });
+      }
+
+      function toggleLinkedIn() {
+        const linkedInInput = $("[name='linkedin_account_id']");
+        const inputContainer = linkedInInput.closest('div');
+        inputContainer.toggleClass('d-none')
+        inputContainer.parent().find('label').parent().toggleClass('d-none');
+      }
+</script>
+
+
+
+ <div hx-get="{% url 'nav-recruitment' %}" hx-trigger="load">
+</div>  
+{% comment %} my_app/templates/my_app/generic/index.html {% endcomment %}
+
+
+
+{% include "generic/components.html" %}
+
+
+<div
+    class="oh-checkpoint-badge mb-2"
+    id="selectedInstances"
+    data-ids="[]"
+    data-clicked=""
+    style="display: none"
+  ></div>
+
+  
+  <div 
+  class="oh-wrapper" 
+  id="listContainer">
+  <div class="animated-background">
+  </div>
+</div>
+
+
+
+
+
+{% endblock %}
\ No newline at end of file
diff --git a/recruitment/templates/cbv/recruitment/recruitment_col.html b/recruitment/templates/cbv/recruitment/recruitment_col.html
new file mode 100644
index 000000000..c88c394af
--- /dev/null
+++ b/recruitment/templates/cbv/recruitment/recruitment_col.html
@@ -0,0 +1,26 @@
+{% load i18n %}
+
+
+
+    <div class="oh-sticky-table__tr oh-permission-table--toggle" onclick ="event.stopPropagation();" data-toggle-count>
+      <div class="d-flex align-items-center">
+        <button class="oh-permission-table__collapse me-2">
+          <span  data-action="reveal" title="{% trans "Reveal" %}"><ion-icon class="oh-permission-table__collapse-down" name="chevron-down-outline"></ion-icon></span>
+          <span  data-action="collapse" title="{% trans "Collapse" %}"><ion-icon class="oh-permission-table__collapse-up" name="chevron-up-outline"></ion-icon></span>
+        </button>
+        <span class="oh-permission-table__user">{{instance}}</span>
+        {% if instance.linkedin_account_id %}
+          <div style="margin-left: 8px;" title="{{ instance }} posted on {{ instance.linkedin_account_id }} LinkedIn account.">
+            <ion-icon name="logo-linkedin"></ion-icon>
+          </div>
+        {% endif %}
+      </div>
+    </div>
+ 
+
+ 
+
+    
+ 
+ 
+   
\ No newline at end of file
diff --git a/recruitment/templates/cbv/recruitment/recruitment_form.html b/recruitment/templates/cbv/recruitment/recruitment_form.html
new file mode 100644
index 000000000..17a780bad
--- /dev/null
+++ b/recruitment/templates/cbv/recruitment/recruitment_form.html
@@ -0,0 +1,8 @@
+{% include "generic/horilla_form.html" %}
+<script>
+    $(document).ready(function () {
+        if (!$("#id_publish_in_linkedin").is(":checked")) {
+            toggleLinkedIn()
+            }
+    });
+</script>
\ No newline at end of file
diff --git a/recruitment/templates/cbv/recruitment/total_hires.html b/recruitment/templates/cbv/recruitment/total_hires.html
new file mode 100644
index 000000000..3ca2c2c41
--- /dev/null
+++ b/recruitment/templates/cbv/recruitment/total_hires.html
@@ -0,0 +1,4 @@
+{% load i18n %}
+<div>
+    {{instance.total_hires}} {% trans "Hired" %} <span style="font-size: 12px; color: gray;">{% trans "of" %} {{instance.candidate.all|length}} {% trans "Candidates" %}</span>
+  </div>
\ No newline at end of file
diff --git a/recruitment/templates/cbv/recruitment_survey/survey_form.html b/recruitment/templates/cbv/recruitment_survey/survey_form.html
new file mode 100644
index 000000000..bb25e8ebf
--- /dev/null
+++ b/recruitment/templates/cbv/recruitment_survey/survey_form.html
@@ -0,0 +1,83 @@
+{% load i18n %}
+<div id ="formContainer">
+    {% include "generic/horilla_form.html" %}
+    <button hidden
+                    hx-target="#moreOptionContainer_{{form.option_count}}"
+                    hx-swap="outerHTML"
+                    hx-post="{% url 'add-remove-options-field' %}"
+                    role="button"
+                    style="color: green"
+                    id="addMoreOptions"
+                  >
+                    {% trans "Add more options.." %}
+</button>
+</div>
+
+<script>
+    function toggleOpt() {
+        if ($("#genericModalBody form [name=type]").first().val() == "options" || $("#genericModalBody form [name=type]").first().val() == "multiple") {
+            $("#id_options_parent_div").show();
+            $('[id^="moreOptionContainer_"]').remove();
+            var optionCount = {{ form.option_count }}
+    
+            for (var i = 1; i < optionCount; i++) {
+                var parentDivId = "id_options"+ i +"_parent_div";
+                var parentDiv = document.getElementById(parentDivId);
+                $(parentDiv).removeClass("col-md-6");
+                if (i >= 1) {
+                    $(parentDiv).find('.oh-label__info').remove();
+                }
+            }
+    
+            // Check if "Add more options" button already exists
+            var test = document.getElementById('addOptions')
+            if (!document.getElementById('addOptions')) {
+                var divElement = document.createElement('div');
+                divElement.id = 'moreOptionContainer_' + optionCount;
+                divElement.className = 'pt-2';
+                divElement.style.textAlign = 'end';
+    
+                var anchorElement = document.createElement('a');
+                anchorElement.setAttribute('role', 'button');
+                anchorElement.setAttribute('id', 'addOptions');
+                anchorElement.style.color = 'green';
+                anchorElement.innerText = 'Add more options..';
+    
+                divElement.appendChild(anchorElement);
+    
+                //var parentDiv = document.getElementById('id_options_parent_div');
+                if (parentDiv) {
+                    parentDiv.insertAdjacentElement('afterend', divElement);
+                   
+                } 
+                else {
+                    var parentDivMain = document.getElementById('id_options_parent_div');
+                    parentDivMain.insertAdjacentElement('afterend', divElement);
+                    var nextDiv = parentDivMain.nextElementSibling;
+                    nextDiv.id = 'moreOptionContainer_1'; 
+                }
+              
+            }
+            else{
+                $("#addOptions").show();
+            }
+    
+        } else {
+            $("#id_options_parent_div").hide();
+            $("#addOptions").hide();
+            $('[id^="moreOptionContainer_"]').remove();
+        }
+    }
+    $(document).off('click', '#addOptions').on('click', '#addOptions', function(event) {
+        $('#addMoreOptions').click();
+    });
+
+  $(document).on('change', '#genericModalBody form [name=type]', function (e) {
+    toggleOpt();
+});
+
+  $(document).ready(function() {
+      toggleOpt();
+  });
+  </script>
+  
\ No newline at end of file
diff --git a/recruitment/templates/cbv/stages/actions.html b/recruitment/templates/cbv/stages/actions.html
new file mode 100644
index 000000000..36c84e458
--- /dev/null
+++ b/recruitment/templates/cbv/stages/actions.html
@@ -0,0 +1,43 @@
+{% load i18n %}
+<div>
+    <div class="oh-btn-group" onclick="event.stopPropagation();">
+      {% if perms.recruitment.change_stage %}
+        <a
+          hx-get="{% url 'rec-stage-update' instance.id %}?instance_ids={{instance.ordered_ids}}"
+          hx-target="#genericModalBody"
+          data-toggle="oh-modal-toggle"
+          data-target="#genericModal"
+          class="oh-btn oh-btn--light-bkg w-50"
+          title="{% trans 'Edit' %}"
+        >
+          <ion-icon name="create-outline"></ion-icon>
+        </a>
+      {% endif %}
+      {% if perms.recruitment.change_stage %}
+        <a
+          hx-get="{% url 'rec-stage-duplicate' instance.id %}"
+          hx-target="#genericModalBody"
+          data-toggle="oh-modal-toggle"
+          data-target="#genericModal"
+          class="oh-btn oh-btn--light-bkg w-50"
+          title="{% trans 'Duplicate' %}"
+        >
+          <ion-icon name="copy-outline"></ion-icon>
+        </a>
+      {% endif %}
+      {% if perms.recruitment.delete_stage %}
+      <form action="{% url 'rec-stage-delete' instance.id %}"
+        onsubmit="return confirm('{% trans "Are you sure you want to delete this stage?" %}');" method='post' class="w-50"
+        >
+        {% csrf_token %}
+        <button
+          type="submit"
+          class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100"
+          title="Remove"
+        >
+          <ion-icon name="trash-outline"></ion-icon>
+        </button>
+      </form>
+      {% endif %}
+    </div>
+  </div>
\ No newline at end of file
diff --git a/recruitment/templates/cbv/stages/detail_action.html b/recruitment/templates/cbv/stages/detail_action.html
new file mode 100644
index 000000000..6e274b9e4
--- /dev/null
+++ b/recruitment/templates/cbv/stages/detail_action.html
@@ -0,0 +1,31 @@
+{% load i18n %}
+    <div class="oh-btn-group" style="width: 100%;" onclick="event.stopPropagation()">
+      {% if perms.recruitment.change_stage %}
+        <a
+          hx-get="{% url 'rec-stage-update' instance.id %}"
+          hx-target="#genericModalBody"
+          data-toggle="oh-modal-toggle"
+          data-target="#genericModal"
+          class="oh-btn oh-btn--info w-50"
+          title="{% trans 'Edit' %}"
+        >
+        <ion-icon name="create-outline" role="img"
+        class="md hydrated" aria-label="create outline">
+        </ion-icon>
+        </a>
+      {% endif %}
+      {% if perms.recruitment.delete_stage %}
+      <form action="{% url 'rec-stage-delete' instance.id %}"
+        onsubmit="return confirm('{% trans "Are you sure you want to delete this stage?" %}');" method='post' class="w-50"
+        >
+        {% csrf_token %}
+        <button
+          type="submit"
+          class="oh-btn oh-btn--secondary w-100"
+          title="Remove"
+        >
+          <ion-icon name="trash-outline"></ion-icon>
+        </button>
+      </form>
+      {% endif %}
+    </div>
diff --git a/recruitment/templates/cbv/stages/filter.html b/recruitment/templates/cbv/stages/filter.html
new file mode 100644
index 000000000..e1b7991b9
--- /dev/null
+++ b/recruitment/templates/cbv/stages/filter.html
@@ -0,0 +1,47 @@
+{% load i18n %}{% load static %}
+  <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>
+              {{form.recruitment_id__recruitment_managers}}
+          </div>
+          <div class="oh-input-group">
+            <label class="oh-label">{% trans "Recruitment" %}</label>
+            {{form.recruitment_id}}
+          </div>
+          <div class="oh-input-group">
+            <label class="oh-label">{% trans "Department" %}</label>
+            {{form.recruitment_id__job_position_id__department_id}}
+          </div>
+          <div class="oh-input-group">
+            <label class="oh-label">{% trans "Stage Type" %}</label>
+            {{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>
+            {{form.stage_managers}}
+          </div>
+          <div class="oh-input-group">
+            <label class="oh-label">{% trans "Company" %}</label>
+            {{form.recruitment_id__company_id}}
+          </div>
+          <div class="oh-input-group">
+            <label class="oh-label">{% trans "Job Position" %}</label>
+            {{form.recruitment_id__job_position_id}}
+          </div>
+
+
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<script src="{% static '/base/filter.js' %}"></script>
\ No newline at end of file
diff --git a/recruitment/templates/cbv/stages/managers.html b/recruitment/templates/cbv/stages/managers.html
new file mode 100644
index 000000000..24302bd04
--- /dev/null
+++ b/recruitment/templates/cbv/stages/managers.html
@@ -0,0 +1,30 @@
+{% load i18n %}
+    {% for manager in instance.stage_managers.all %}
+    <span
+      class="oh-user-panel oh-collapse-panel"
+      data-type="user">
+      <div class="oh-profile oh-profile--md">
+        <div class="oh-profile__avatar mr-1">
+          <img
+            src="https://ui-avatars.com/api/?name={{manager.get_full_name}}&background=random"
+            class="oh-profile__image"
+            alt="Baby C."
+          />
+        </div>
+        <span class="oh-profile__name oh-text--dark" title="{{manager}}">
+          {{manager.employee_first_name|truncatechars:6}}.
+        </span>
+      </div>
+      <button hx-post="{% url 'rec-remove-stage-manager' manager.id instance.id %}?{{pd}}&page={{data.number}}"
+              hx-target='#listContainer' class="oh-user-panel__remove"
+              hx-confirm='{% trans "Are sure want to remove this manager?" %}'
+              onclick = "event.stopPropagation();"
+              title='{% trans "Remove" %}'>
+        <ion-icon name="close-outline"></ion-icon>
+      </button>
+    </span>
+    {% endfor %}
+    <span class="count-span">
+      {{instance.stage_managers.all|length}} {% trans "Managers"%}
+    </span>
+  
\ No newline at end of file
diff --git a/recruitment/templates/cbv/stages/stage_main.html b/recruitment/templates/cbv/stages/stage_main.html
new file mode 100644
index 000000000..6f514cdf6
--- /dev/null
+++ b/recruitment/templates/cbv/stages/stage_main.html
@@ -0,0 +1,13 @@
+{% load i18n %}
+<div id="stage-container">
+    {% include "generic/horilla_nav.html" %}
+</div>
+
+<script>
+    
+     
+    $('#applyFilter').closest('form').find('[name=field]').val('recruitment_id');
+    $('#applyFilter').click();
+
+        
+</script> 
\ No newline at end of file
diff --git a/recruitment/templates/cbv/stages/stages.html b/recruitment/templates/cbv/stages/stages.html
new file mode 100644
index 000000000..642a3df1e
--- /dev/null
+++ b/recruitment/templates/cbv/stages/stages.html
@@ -0,0 +1,97 @@
+{% extends "index.html" %}
+
+{% load i18n %}{% load static recruitmentfilters %}
+
+
+{% block content %}
+
+<meta name="csrf-token" content="{{ csrf_token }}">
+<style>
+    .count-span{
+      width: 100%;
+      display: -webkit-box;
+      display: -ms-flexbox;
+      display: flex;
+      padding: 0.5rem 0rem;
+      font-style: italic;
+      color: hsl(0deg,0%,37%);
+      width: 100%;
+    }
+
+    .hired--dot{
+      background-color:yellowgreen;
+    }
+    .cancelled--dot{
+      background-color:red;
+    }
+    .interview--dot{
+        background-color:orange;
+      }
+    .test--dot{
+        background-color:blue;
+      }
+    .initial--dot{
+        background-color:cyan;
+      }
+  
+  
+
+    .stage-type-initial{
+      border-left: 3.4px solid cyan !important;
+      border-radius: 4px 0 0 4px;
+    
+    }
+    .stage-type-test{
+        border-left: 3.4px solid blue !important;
+        border-radius: 4px 0 0 4px;
+      
+      }
+    .stage-type-interview{
+        border-left: 3.4px solid orange !important;
+        border-radius: 4px 0 0 4px;
+      
+      }
+    .stage-type-cancelled{
+        border-left: 3.4px solid red !important;
+        border-radius: 4px 0 0 4px;
+      
+      }
+    .stage-type-hired{
+        border-left: 3.4px solid yellowgreen !important;
+        border-radius: 4px 0 0 4px;
+      
+      }
+    
+  </style>
+
+
+
+
+
+ <div hx-get="{% url 'nav-stage' %}" hx-trigger="load">
+</div>  
+{% comment %} my_app/templates/my_app/generic/index.html {% endcomment %}
+
+
+
+{% include "generic/components.html" %}
+
+
+<div
+    class="oh-checkpoint-badge mb-2"
+    id="selectedInstances"
+    data-ids="[]"
+    data-clicked=""
+    style="display: none"
+  ></div>
+
+  
+  <div 
+  class="oh-wrapper" 
+ 
+  id="listContainer">
+  <div class="animated-background">
+  </div>
+</div>
+
+{% endblock %}
\ No newline at end of file
diff --git a/recruitment/templates/cbv/stages/title.html b/recruitment/templates/cbv/stages/title.html
new file mode 100644
index 000000000..97d6d27d5
--- /dev/null
+++ b/recruitment/templates/cbv/stages/title.html
@@ -0,0 +1,33 @@
+{% load i18n %}
+
+
+<div class="oh-sticky-table__tr oh-permission-table--toggle"  onclick="event.stopPropagation();" data-toggle-count>
+    <div class="d-flex align-items-center">
+        <button class="oh-permission-table__collapse me-2">
+            <span class="oh-reveal" title="{% trans "Reveal" %}">
+                <ion-icon class="oh-permission-table__collapse-down md hydrated" name="chevron-down-outline" ></ion-icon>
+            </span>
+                
+                <span class="oh-test" title="{% trans "Collapse" %}">
+                <ion-icon class="oh-permission-table__collapse-up md hydrated" name="chevron-up-outline"></ion-icon>
+                </span>
+               
+        </button>
+        <span class="oh-permission-table__user">{{instance}}</span>
+     </div>
+    </div>
+
+        <script>
+            $(document).on("htmx:afterSwap", function () {
+                  $("[data-toggle-count]").off("click").on("click", function (e) { 
+                    e.stopPropagation();
+                    let recViewContainer = $(this).closest('tr');
+                    span = recViewContainer.find(".count-span").toggle();
+                    var row = $(this).closest(".oh-permission-table--toggle").parent().parent();
+                    row.toggleClass("oh-permission-table--collapsed");
+                    
+                  });
+                });
+                
+        </script>
+    
\ No newline at end of file
diff --git a/recruitment/templates/dashboard/dashboard.html b/recruitment/templates/dashboard/dashboard.html
index 44a0f7e82..40f2ba56e 100644
--- a/recruitment/templates/dashboard/dashboard.html
+++ b/recruitment/templates/dashboard/dashboard.html
@@ -8,7 +8,7 @@
     }
     .scheduled-task{
         background-color: #00afff2e !important;
-    }
+    }prett
     .ongoing-task{
         background-color: #e6ff002e !important;
     }
@@ -29,6 +29,15 @@
 	}
 
 </style>
+<div class="oh-modal" id="taskModal" role="dialog" aria-hidden="true">
+	<div class="oh-modal__dialog" style="max-width: 550px">
+	  <div class="oh-modal__dialog-header">
+		<button type="button" class="oh-modal__close" aria-label="Close"><ion-icon name="close-outline"></ion-icon></button>
+	  </div>
+
+	  <div class="oh-modal__dialog-body" id="taskModalBody"></div>
+	</div>
+  </div>
 <div class="oh-wrapper">
 	<div class="oh-dashboard row">
 		<div class="oh-dashboard__left col-12 col-sm-12 col-md-12 col-lg-12">
@@ -120,7 +129,10 @@
 							<span class="oh-card-dashboard__title">{% trans "Skill Zone Status" %}</span>
 						</div>
 						<div class="oh-card-dashboard__body" style="height:325px; overflow-y:auto;">
-							{% if skill_zone %}
+							<div class="oh-sticky-table h-100"  hx-get='{% url "skill-zone-status-dashboard" %}' hx-trigger="load" style="border: none;">
+							</div>
+
+							{% comment %} {% if skill_zone %}
 								<ul class="oh-card-dashboard__user-list">
 									{% for skill in skill_zone %}
 									<li class="oh-card-dashboard__user-item">
@@ -146,7 +158,7 @@
 										<h3 style="font-size:16px" class="oh-404__subtitle">{% trans "No skill zone available." %}</h3>
 									</div>
 								</div>
-							{% endif %}
+							{% endif %} {% endcomment %}
 
 						</div>
 					</div>
@@ -208,7 +220,10 @@
 								{% if onboarding_count %}<span class="oh-card-dashboard__title float-end"><a href="{% url 'candidate-view' %}?start_onboard=true" style="text-decoration:none; color:orange;">{% trans "View" %}</a></span>{% endif %}
 							</div>
 							<div class="oh-card-dashboard__body" style="height:325px; overflow-y:auto;">
-								{% if onboarding_count %}
+
+								<div class="oh-sticky-table h-100"  hx-get='{% url "candidate-on-onboard-dashboard" %}' hx-trigger="load" style="border: none;">
+								</div>
+								{% comment %} {% if onboarding_count %}
 									<ul class="oh-card-dashboard__user-list">
 										{% for cand in onboard_candidates %}
 										<li class="oh-card-dashboard__user-item">
@@ -234,7 +249,7 @@
 											<h3 style="font-size:16px" class="oh-404__subtitle">{% trans "No candidates started onboarding." %}</h3>
 										</div>
 									</div>
-								{% endif %}
+								{% endif %} {% endcomment %}
 							</div>
 						</div>
 					{% endif %}
@@ -269,12 +284,14 @@
 						</div>
 
 						{% if ongoing_recruitments %}
-							<div class="col-12 col-sm-12 col-md-12 col-lg-5 oh-card-dashboard--moveable">
+							<div class="col-12 col-sm-12 col-md-12 col-lg-5 oh-card-dashboard--moveable" >
 								<div>
 									<div class="oh-card-dashboard__header">
 									<span class="oh-card-dashboard__title">{% trans "Current Hiring Pipeline" %}</span>
 								</div>
-								<div class="oh-sticky-table float-start" style="height:500px">
+								<div  class="oh-card-dashboard__body"  hx-get='{% url "current-hiring-pipeline-dashboard" %}' hx-trigger="load" style="border: none;">
+								</div>
+								{% comment %} <div class="oh-sticky-table float-start" style="height:500px">
 									<div class="oh-sticky-table__table">
 										<div class="oh-sticky-table__thead">
 											<div class="oh-sticky-table__tr">
@@ -302,7 +319,7 @@
 											{% endfor %}
 										</div>
 									</div>
-								</div>
+								</div> {% endcomment %}
 							</div>
 						{% endif %}
 					</div>
@@ -367,7 +384,10 @@
 							<div class="oh-card-dashboard__header">
 								<span class="oh-card-dashboard__title">{% trans "Ongoing Recruitments & Hiring Managers" %}</span>
 							</div>
-							<div class="oh-sticky-table float-start">
+
+							<div  class="oh-card-dashboard__body"  hx-get='{% url "ongoing-recruitment-dashboard" %}' hx-trigger="load" style="border: none;">
+							</div>
+							{% comment %} <div class="oh-sticky-table float-start">
 								<div class="oh-sticky-table__table">
 									<div class="oh-sticky-table__thead">
 										<div class="oh-sticky-table__tr">
@@ -387,7 +407,7 @@
 										{% endfor %}
 									</div>
 								</div>
-							</div>
+							</div> {% endcomment %}
 						</div>
 					{% endif %}
 				</div>
diff --git a/recruitment/templates/pipeline/components/candidate_stage_component.html b/recruitment/templates/pipeline/components/candidate_stage_component.html
index b0991f2da..be5e33a98 100644
--- a/recruitment/templates/pipeline/components/candidate_stage_component.html
+++ b/recruitment/templates/pipeline/components/candidate_stage_component.html
@@ -1,5 +1,5 @@
+{% include "generic/components.html" %}
 {% load i18n recruitmentfilters horillafilters %}
-
 <!-- start of messages -->
 {% if messages %}
 <div class="oh-wrapper">
@@ -180,7 +180,7 @@
                     {% if candidate_ratings|has_candidate_rating:cand %}
                     <form hx-swap="none" hx-post='{% url "update-candidate-rating" cand.id %}' method="post">
                         {% csrf_token %}
-                        <div class="d-block mb-0">
+                        <div class="d-block mb-0" style="width: max-content;">
                             <div class="oh-rate" onclick="$(this).parents().closest('form').find('button').click()">
                                 {% for i in "54321" %}
                                 <input type="radio" id="star{{i}}{{cand.id}}" name="rating" class="rating-radio"
@@ -237,9 +237,9 @@
                         <div class="oh-btn-group">
                             {% if perms.recruitment.add_interviewschedule or request.user.employee_get in stage.stage_managers.all %}
                                 <button type="button" hx-get='{% url "interview-schedule" cand.id %}' title="{% trans "Schedule Interview" %}"
-                                        hx-target="#createTarget"
+                                        hx-target="#genericModalBody"
                                         hx-swap="innerHTML"
-                                        data-target="#createModal" class="oh-btn oh-btn--light"
+                                        data-target="#genericModal" class="oh-btn oh-btn--light"
                                         data-toggle="oh-modal-toggle"
                                         style="flex: 1 0 auto; width:20px;height: 40.68px; padding: 0;">
                                     <ion-icon name="time-outline"></ion-icon>
@@ -258,9 +258,9 @@
                                 <button type="button" class="oh-btn oh-btn--light-bkg w-100" title="{% trans 'To Skill zone' %}"
                                     data-toggle="oh-modal-toggle"
                                     hx-get="{% url 'to-skill-zone' cand.id %}"
-                                    hx-target="#createTarget"
+                                    hx-target="#genericModalBody"
                                     hx-swap="innerHTML"
-                                    data-target="#createModal"
+                                    data-target="#genericModal"
                                     style="flex: 1 0 auto; width:25px !important;height: 40.68px; padding: 0;color: orangered;">
                                     <ion-icon name="heart-circle-outline"></ion-icon>
                                 </button>
diff --git a/recruitment/templates/pipeline/components/stages_tab_content.html b/recruitment/templates/pipeline/components/stages_tab_content.html
index 86f226847..db192045a 100644
--- a/recruitment/templates/pipeline/components/stages_tab_content.html
+++ b/recruitment/templates/pipeline/components/stages_tab_content.html
@@ -34,8 +34,8 @@
                   justify-content: center;
                   width: 50px;
                   height: 28px;" class="oh-btn oh-btn--secondary-outline float-end ms-3"
-                hx-get="{% url 'add-candidate-to-stage' %}?stage_id={{stage.id}}" hx-target="#createTarget"
-                data-toggle="oh-modal-toggle" data-target="#createModal" title="Add Candidate">
+                hx-get="{% url 'add-candidate-to-stage' %}?stage_id={{stage.id}}" hx-target="#genericModalBody"
+                data-toggle="oh-modal-toggle" data-target="#genericModal" title="Add Candidate">
                 <ion-icon name="add-outline" class="m-0 md hydrated" role="img" aria-label="add outline"></ion-icon>
             </button>
             {% endif %}
diff --git a/recruitment/templates/pipeline/kanban_components/candidate_kanban_components.html b/recruitment/templates/pipeline/kanban_components/candidate_kanban_components.html
index 62bce0642..9c175faa7 100644
--- a/recruitment/templates/pipeline/kanban_components/candidate_kanban_components.html
+++ b/recruitment/templates/pipeline/kanban_components/candidate_kanban_components.html
@@ -1,4 +1,5 @@
 {% load i18n static recruitmentfilters horillafilters %}
+{% include "generic/components.html" %}
 {% for cand in candidates %}
     <div
         class="oh-kanban__card candidate change-cand"
@@ -104,11 +105,11 @@
                             <a
                             class="oh-dropdown__link oh-dropdown__link--secondary"
                             hx-get='{% url "interview-schedule" cand.id %}'
-                            hx-target="#createTarget"
+                            hx-target="#genericModalBody"
                             hx-swap='innerHTML'
                             style="cursor: pointer;"
                             data-toggle='oh-modal-toggle'
-                            data-target="#createModal"
+                            data-target="#genericModal"
                             >{% trans "Schedule Interview" %}</a>
                         </li>
                     {% endif %}
@@ -131,9 +132,9 @@
                             <a
                             class="oh-dropdown__link oh-dropdown__link--secondary"
                             data-toggle="oh-modal-toggle"
-                            data-target="#createModal"
+                            data-target="#genericModal"
                             hx-get="{% url 'to-skill-zone' cand.id %}"
-                            hx-target="#createTarget"
+                            hx-target="#genericModalBody"
                             >{% trans "Add to Skill Zone" %}</a
                             >
                         </li>
diff --git a/recruitment/templates/pipeline/pipeline.html b/recruitment/templates/pipeline/pipeline.html
index b39953c00..6ea97d297 100644
--- a/recruitment/templates/pipeline/pipeline.html
+++ b/recruitment/templates/pipeline/pipeline.html
@@ -2,6 +2,7 @@
 <div id="messages" class="oh-alert-container">
 
 </div>
+{% include "generic/components.html" %}
 <style>
   .oh-tabs__tab--active {
     border-right: solid 1px #dedede !important;
diff --git a/recruitment/templates/pipeline/pipeline_card.html b/recruitment/templates/pipeline/pipeline_card.html
index 8c9915884..e5c59239f 100644
--- a/recruitment/templates/pipeline/pipeline_card.html
+++ b/recruitment/templates/pipeline/pipeline_card.html
@@ -87,9 +87,9 @@
             {% if perms.recruitment.add_candidate or request.user|is_stagemanager %}
             <div class="oh-dropdown" x-data="{open: false}">
               <a class="" hx-get="{% url 'add-candidate-to-stage' %}?stage_id={{stage.grouper.id}}"
-              hx-target="#createTarget"
+              hx-target="#genericModalBody"
               data-toggle="oh-modal-toggle"
-              data-target="#createModal" @click="open = !open" title="Add Candidates">
+              data-target="#genericModal" @click="open = !open" title="Add Candidates">
                 <ion-icon name="add-sharp" role="img" class="md hydrated mt-1" aria-label="add sharp"></ion-icon>
               </a>
             </div>
diff --git a/recruitment/templates/pipeline/pipeline_components/schedule_interview.html b/recruitment/templates/pipeline/pipeline_components/schedule_interview.html
index 15d83bba6..137c5ebca 100644
--- a/recruitment/templates/pipeline/pipeline_components/schedule_interview.html
+++ b/recruitment/templates/pipeline/pipeline_components/schedule_interview.html
@@ -1,7 +1,9 @@
 {% load i18n %}
+
+{% include "generic/components.html" %}
 <form
     hx-post='{% url "interview-schedule" cand_id %}?view={{view}}'
-    hx-target="#createTarget"
+    hx-target="#genericModalBody"
     hx-encoding="multipart/form-data"
     id="skillform"
 >
diff --git a/recruitment/templates/pipeline/pipeline_components/view_note.html b/recruitment/templates/pipeline/pipeline_components/view_note.html
index 23df97b42..eba476d76 100644
--- a/recruitment/templates/pipeline/pipeline_components/view_note.html
+++ b/recruitment/templates/pipeline/pipeline_components/view_note.html
@@ -39,7 +39,7 @@
 		<span class="oh-activity-sidebar__title fw-bold">{{cand}}'s {% trans "Notes" %}</span>
 	</div>
 
-{% if perms.recruitment.add_stagenote or request.user|is_stagemanager %}
+{% if perms.recruitment.add_stagenote or request|is_any_manager %}
 	<form hx-target="#noteContainerList" hx-select=".oh-activity-sidebar__qa-list" hx-post="{% url 'create-note' cand.id %}" id="commentForm"
 		hx-on-htmx-after-request="reloadMessage(this);$('#commentInput').val('');$('#commentButton').hide();">
 		{% csrf_token %}
diff --git a/recruitment/templates/pipeline/pipeline_tabs.html b/recruitment/templates/pipeline/pipeline_tabs.html
index a367dd108..f3172b886 100644
--- a/recruitment/templates/pipeline/pipeline_tabs.html
+++ b/recruitment/templates/pipeline/pipeline_tabs.html
@@ -1,5 +1,4 @@
-{% load i18n %}
-{% load recruitmentfilters %}
+{% load i18n %} {% load recruitmentfilters %}
 <ul class="oh-tabs__tablist">
     {% for rec in recruitment %}
     {% if request.user|stage_manages:rec or perms.recruitment.view_recruitment %}
@@ -72,17 +71,15 @@
               {% endif %}
               {% if perms.recruitment.delete_recruitment %}
               <li class="oh-dropdown__item">
-                <form
-                action = "{% url 'recruitment-delete-pipeline' rec.id %}"
-                onsubmit="return confirm('{% trans "Are you sure you want to delete this recruitment?" %}');"
-                  method='post'
-                  action=""
+                <a
+                  hx-get="{% url 'generic-delete' %}?model=recruitment.Recruitment&pk={{rec.id}}"
+                  hx-target="#deleteConfirmationBody" data-toggle="oh-modal-toggle"
+                  data-target="#deleteConfirmation"
                   >
-                  {% csrf_token %}
                   <button type="submit" class="oh-dropdown__link oh-dropdown__link--danger">
                     {% trans "Delete" %}
                   </button>
-                  </form
+                  </a
                   >
                 </li>
                 {% endif %}
@@ -95,4 +92,4 @@
     </li>
     {% endif %}
     {% endfor %}
-  </ul>
+</ul>
diff --git a/recruitment/templates/recruitment/recruitment_component.html b/recruitment/templates/recruitment/recruitment_component.html
index 51579b719..5385574f5 100644
--- a/recruitment/templates/recruitment/recruitment_component.html
+++ b/recruitment/templates/recruitment/recruitment_component.html
@@ -19,6 +19,7 @@
     $("[data-toggle-count]").click(function (e) {
       e.preventDefault();
       span = $(this).parent().find(".count-span").toggle()
+
     });
 
   })
diff --git a/recruitment/templates/recruitment/settings/settings.html b/recruitment/templates/recruitment/settings/settings.html
index 842b89449..66f74c526 100644
--- a/recruitment/templates/recruitment/settings/settings.html
+++ b/recruitment/templates/recruitment/settings/settings.html
@@ -5,30 +5,42 @@
 <div class="oh-inner-sidebar-content__header mt-4">
     <h2 class="oh-inner-sidebar-content__title">{% trans 'Candidate Self Tracking' %}</h2>
 </div>
-<div class="row">
-    <form class="col-6"  hx-get="{% url 'candidate-self-tracking' %}" hx-swap="none">
+<div class="row d-flex" >
         <div class="oh-label__info" for="application_tracking">
             <label class="oh-label" for="application_tracking">{% trans "Application Tracking" %}</label>
             <span class="oh-info mr-2" title="{% trans "By enabling the feature candidates can track their recruitment progress" %}">
             </span>
+            <div class="oh-switch p-3">
+                <input type="checkbox" class="oh-switch__checkbox" name="candidate_self_tracking" onchange="selfTrack($(this))" {% if check_candidate_self_tracking %} checked {% endif %} />
+            </div>
         </div>
-        <div class="oh-switch p-3">
-            <input type="checkbox"class="oh-switch__checkbox" name="candidate_self_tracking" onchange="$(this).closest('form').find('input[type=submit]').click()" {% if check_candidate_self_tracking %} checked {% endif %} />
-        </div>
-        <input type="submit" hidden>
-    </form>
-    <form class="col-6"  hx-get="{% url 'candidate-self-tracking-rating-option' %}" hx-swap="none">
+
         <div class="oh-label__info" for="rating_visiblity">
             <label class="oh-label" for="rating_visiblity">{% trans "Rating Visiblity" %}</label>
             <span class="oh-info mr-2" title="{% trans "By enabling the feature candidates can view their recruitment overall rating" %}">
             </span>
+            <div class="oh-switch p-3">
+                <input type="checkbox" class="oh-switch__checkbox" name="candidate_self_tracking" onchange="ratingVisibility($(this))" {% if check_candidate_self_tracking_rating %} checked {% endif %} />
+            </div>
           </div>
-        <div class="oh-switch p-3">
-            <input type="checkbox"class="oh-switch__checkbox" name="candidate_self_tracking" onchange="$(this).closest('form').find('input[type=submit]').click()" {% if check_candidate_self_tracking_rating %} checked {% endif %} />
-        </div>
-        <input type="submit" hidden>
-    </form>
+
 </div>
 <div class="oh-inner-sidebar-content__footer"></div>
+<button id="selfTrackButton" hx-get="{% url 'candidate-self-tracking' %}" hx-target="#reloadMessages" hidden>
+</button>
+<button id="ratingButton" hx-get="{% url 'candidate-self-tracking-rating-option' %}" hx-target="#reloadMessages" hidden>
+</button>
 
+<script>
+    function selfTrack(element){
+        var value = $(element).is(':checked')
+        $('#selfTrackButton').attr('hx-vals', `{"candidate_self_tracking":${value}}`);
+        $('#selfTrackButton').click()
+    }
+    function ratingVisibility(element){
+        var value = $(element).is(':checked')
+        $('#ratingButton').attr('hx-vals', `{"candidate_self_tracking":${value}}`);
+        $('#ratingButton').click()
+    }
+</script>
 {% endblock settings %}
diff --git a/recruitment/templates/settings/reject_reasons.html b/recruitment/templates/settings/reject_reasons.html
index ff5a77319..2ee43b9e4 100644
--- a/recruitment/templates/settings/reject_reasons.html
+++ b/recruitment/templates/settings/reject_reasons.html
@@ -1,8 +1,12 @@
 {% extends 'settings.html' %}
 {% block settings %}
   {% load i18n static %}
+  {% include "generic/components.html" %}
   <div class="oh-inner-sidebar-content">
-    <div class="oh-inner-sidebar-content__header d-flex justify-content-between align-items-center">
+
+    <div hx-get="{% url "candidate-reject-reasons-nav" %}" hx-trigger="load">
+    </div>
+    {% comment %} <div class="oh-inner-sidebar-content__header d-flex justify-content-between align-items-center">
       <h2 class="oh-inner-sidebar-content__title">{% trans 'Reject Reasons' %}</h2>
       {% if perms.recruitment.add_rejectreason %}
         <button class="oh-btn oh-btn--secondary oh-btn--shadow" data-toggle="oh-modal-toggle" data-target="#rejectReasonModal" hx-get="{% url 'create-reject-reason' %}" hx-target="#rejectReasonModalBody">
@@ -10,15 +14,30 @@
           {% trans 'Create' %}
         </button>
       {% endif %}
+    </div> {% endcomment %}
+
+    <div
+    class="oh-checkpoint-badge mb-2"
+    id="selectedInstances"
+    data-ids="[]"
+    data-clicked=""
+    style="display: none"
+  ></div>
+
+    <div
+    class="oh-wrapper"
+    id="listContainer">
+    <div class="animated-background">
     </div>
-    {% if reject_reasons|length %}
+  </div>
+    {% comment %} {% if reject_reasons|length %}
       {% include 'settings/reject_reason_lines.html' %}
     {% else %}
       <div style="display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%;">
         <img style="display: block; width: 15%; margin: 20px auto; filter: opacity(0.5);" src="{% static 'images/ui/connection.png' %}" class="" alt="Page not found. 404." />
         <h5 class="oh-404__subtitle">{% trans 'There is no reject reasons at this moment.' %}</h5>
       </div>
-    {% endif %}
+    {% endif %} {% endcomment %}
   </div>
 
   <div class="oh-modal" id="rejectReasonModal" role="dialog" aria-hidden="true">
diff --git a/recruitment/templates/settings/skills/skills_view.html b/recruitment/templates/settings/skills/skills_view.html
index 747c25d2e..338cea7d6 100644
--- a/recruitment/templates/settings/skills/skills_view.html
+++ b/recruitment/templates/settings/skills/skills_view.html
@@ -1,24 +1,40 @@
 {% extends 'settings.html' %}
 {% block settings %}
+{% include "generic/components.html" %}
+<meta name="csrf-token" content="{{ csrf_token }}">
+
   {% load i18n static %}
   <div class="oh-inner-sidebar-content">
-    <div class="oh-inner-sidebar-content__header d-flex justify-content-between align-items-center">
-      <h2 class="oh-inner-sidebar-content__title">{% trans 'Skills' %}</h2>
+    {% comment %} <div class="oh-inner-sidebar-content__header d-flex justify-content-between align-items-center">
+      <h2 class="oh-inner-sidebar-content__title">{% trans 'Skills' %}</h2> {% endcomment %}
       {% if perms.recruitment.add_rejectreason %}
-        <button class="oh-btn oh-btn--secondary oh-btn--shadow" data-toggle="oh-modal-toggle" data-target="#objectCreateModal" hx-get="{% url 'create-skills' %}" hx-target="#objectCreateModalTarget">
+      <div hx-get="{% url "skills-nav-view" %}" hx-trigger="load">
+      </div>
+        {% comment %} <button class="oh-btn oh-btn--secondary oh-btn--shadow" data-toggle="oh-modal-toggle" data-target="#objectCreateModal" hx-get="{% url 'create-skills' %}" hx-target="#objectCreateModalTarget">
           <ion-icon name="add-outline" class="me-1"></ion-icon>
           {% trans 'Create' %}
-        </button>
+        </button> {% endcomment %}
       {% endif %}
     </div>
-    {% if skills|length %}
-      {% include 'settings/skills/skills_list.html' %}
-    {% else %}
+    {% comment %} {% if skills|length %} {% endcomment %}
+          <div
+          class="oh-checkpoint-badge mb-2"
+          id="selectedInstances"
+          data-ids="[]"
+          data-clicked=""
+          style="display: none"
+        ></div>
+        <div class="oh-wrapper" id="listContainer">
+          <div class="animated-background">
+        </div>
+        </div>
+      {% comment %} {% include 'settings/skills/skills_list.html' %} {% endcomment %}
+    {% comment %} {% else %}
       <div style="display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%;">
         <img style="display: block; width: 15%; margin: 20px auto; filter: opacity(0.5);" src="{% static 'images/ui/customer-support.png' %}" class="" alt="Page not found. 404." />
         <h5 class="oh-404__subtitle">{% trans 'There are no skills added at this moment.' %}</h5>
       </div>
-    {% endif %}
+    {% endif %} {% endcomment %}
   </div>
 
   <div class="oh-modal" id="skillsModal" role="dialog" aria-hidden="true">
@@ -30,4 +46,6 @@
       <div class="oh-modal__dialog-body" id="skillsModalBody"></div>
     </div>
   </div>
+
+<script src="{% static 'cbv/deleteFunc.js' %}"></script>
 {% endblock %}
diff --git a/recruitment/templates/skill_zone/empty_skill_zone.html b/recruitment/templates/skill_zone/empty_skill_zone.html
index d31175330..2655dfa7b 100644
--- a/recruitment/templates/skill_zone/empty_skill_zone.html
+++ b/recruitment/templates/skill_zone/empty_skill_zone.html
@@ -3,7 +3,9 @@
 {% load i18n %}{% load static %}{% load basefilters %}
 
 <div class="oh-wrapper">
+
     {% include 'skill_zone/skill_zone_nav.html' %}
+
     <main :class="sidebarOpen ? 'oh-main__sidebar-visible' : ''">
         <div id="skill_zone_container">
             <div class="oh-empty">
@@ -14,7 +16,7 @@
         </div>
     </main>
 </div>
-
+{% include "generic/components.html" %}
 <div class="oh-modal" id="editCandModal" role="dialog" aria-hidden="true">
     <div class="oh-modal__dialog" style="max-width: 550px">
         <div class="oh-modal__dialog-header">
diff --git a/recruitment/templates/skill_zone/skill_zone_list.html b/recruitment/templates/skill_zone/skill_zone_list.html
index 89cb304e5..5da473ec0 100644
--- a/recruitment/templates/skill_zone/skill_zone_list.html
+++ b/recruitment/templates/skill_zone/skill_zone_list.html
@@ -24,9 +24,9 @@
                                 class="oh-btn oh-btn--light-bkg w-100"
                                 onclick="event.stopPropagation();"
                                 data-toggle="oh-modal-toggle"
-                                data-target="#editCandModal"
+                                data-target="#genericModal"
                                 hx-get="{% url 'skill-zone-cand-create' skill_zone.grouper.id %}"
-                                hx-target="#editCandTarget"
+                                hx-target="#genericModalBody"
                                 title="Add candidate"
                             >
                                 <ion-icon name="person-add-outline"></ion-icon>
@@ -149,9 +149,9 @@
                                                           class="oh-btn oh-btn--light-bkg w-100"
                                                           title="{% trans 'Edit' %}"
                                                           data-toggle="oh-modal-toggle"
-                                                          data-target="#editCandModal"
+                                                          data-target="#genericModal"
                                                           hx-get="{% url 'skill-zone-cand-edit' sz_candidate.id %}"
-                                                          hx-target="#editCandTarget">
+                                                          hx-target="#genericModalBody"                                                          >
                                                           <ion-icon name="create-outline"></ion-icon>
                                                       </button>
                                                     {% endif %}
diff --git a/recruitment/templates/skill_zone/skill_zone_view.html b/recruitment/templates/skill_zone/skill_zone_view.html
index 95c92fd9f..66a9e9deb 100644
--- a/recruitment/templates/skill_zone/skill_zone_view.html
+++ b/recruitment/templates/skill_zone/skill_zone_view.html
@@ -21,7 +21,7 @@
         <div class="oh-modal__dialog-body" id="editCandTarget"></div>
     </div>
 </div>
-
+{% include "generic/components.html" %}
 <div class="oh-modal" id="createModal" role="dialog" aria-hidden="true">
     <div class="oh-modal__dialog" style="max-width: 550px">
         <div class="oh-modal__dialog-header">
diff --git a/recruitment/templates/survey/add_more_options.html b/recruitment/templates/survey/add_more_options.html
index 34ab88152..13a6a313a 100644
--- a/recruitment/templates/survey/add_more_options.html
+++ b/recruitment/templates/survey/add_more_options.html
@@ -1,9 +1,9 @@
 {% load i18n %}
-<div id="optionDiv">
+<div id="optionDiv" style="padding-right: 0px;">
   <div
-    class="oh-input__group pt-3"
+    class="oh-input__group pt-2"
     id="{{ current_hx_target }}"
-    style="display: flex"
+    style="display: flex; padding-right: 0px;"
   >
     {{field_html}}
     <a
diff --git a/recruitment/templates/survey/survey-card.html b/recruitment/templates/survey/survey-card.html
index cdd278a20..75e374e5b 100644
--- a/recruitment/templates/survey/survey-card.html
+++ b/recruitment/templates/survey/survey-card.html
@@ -33,8 +33,8 @@
               <a
                 hx-get="{% url 'recruitment-survey-question-template-edit' question.id %}"
                 data-toggle="oh-modal-toggle"
-                data-target="#updateSurvey"
-                hx-target="#updateSurveyModalBody"
+                data-target="#genericModal"
+                hx-target="#genericModalBody"
                 class="oh-dropdown__link"
                 >{% trans "Edit" %}</a
               >
diff --git a/recruitment/templates/survey/survey_card.html b/recruitment/templates/survey/survey_card.html
index ecc058282..5acb1dada 100644
--- a/recruitment/templates/survey/survey_card.html
+++ b/recruitment/templates/survey/survey_card.html
@@ -10,60 +10,74 @@
     {% include "survey/template_accordion.html" %}
 </div>
 <div class="oh-tabs__content" id="questionTab">
-    {% if questions %}
-        <div>
-            <div class="oh-layout--grid-3">
-                {% for question in questions %}
-                    <div class="oh-kanban-card" data-toggle="oh-modal-toggle" data-target="#objectDetailsModal"
-                        hx-get="{% url 'single-survey-view' question.id %}?instances_ids={{requests_ids}}"
-                        hx-target="#objectDetailsModalTarget">
-                        <div class="oh-kanban-card__details">
-                            <span class="oh-kanban-card__title">{{question}}</span>
-                            <span class="oh-kanban-card__subtitle">
-                                {% for rec in question.recruitment_ids.all %} {{rec}},&nbsp;
-                                {% endfor %}
-                            </span>
-                        </div>
-                        {% if perms.recruitment.delete_recruitmentsurvey or perms.recruitment.change_recruitmentsurvey or perms.recruitment.add_recruitmentsurvey %}
-                        <div class="oh-kanban-card__dots">
-                            <div class="oh-dropdown" x-data="{show: false}">
-                                <button class="oh-btn oh-btn--transparent text-muted p-3" @click="show = !show" title="{% trans 'Actions' %}" onclick="event.stopPropagation()">
-                                    <ion-icon name="ellipsis-vertical-sharp"></ion-icon>
-                                </button>
-                                <div class="oh-dropdown__menu oh-dropdown__menu--dark-border oh-dropdown__menu--right"
-                                    x-show="show" @click.outside="show = false">
-                                    <ul class="oh-dropdown__items">
-                                        {% if perms.recruitment.change_recruitmentsurvey %}
-                                            <li class="oh-dropdown__item">
-                                                <a hx-get="{% url 'recruitment-survey-question-template-edit' question.id %}"
-                                                    data-toggle="oh-modal-toggle" data-target="#updateSurvey"
-                                                    hx-target="#updateSurveyModalBody" class="oh-dropdown__link">{% trans "Edit" %}
-                                                </a>
-                                            </li>
-                                        {% endif %}
-                                        {% if perms.recruitment.add_recruitmentsurvey %}
-                                            <li class="oh-dropdown__item">
-                                                <a hx-get="{% url 'recruitment-survey-question-template-duplicate' question.id %}"
-                                                    data-toggle="oh-modal-toggle" data-target="#addSurvey"
-                                                    hx-target="#addSurveyModalBody" class="oh-dropdown__link">{% trans "Duplicate" %}
-                                                </a>
-                                            </li>
-                                        {% endif %}
-                                        {% if perms.recruitment.delete_recruitmentsurvey %}
-                                            <li class="oh-dropdown__item">
-                                                <a href="{% url 'recruitment-survey-question-template-delete' question.id %}"
-                                                    onclick="event.preventDefault();event.stopPropagation(); confirm('{% trans "Are you sure want to delete?" %}')" class="text-danger">
-                                                    {% trans "Delete" %}
-                                                </a>
-                                            </li>
-                                        {% endif %}
-                                    </ul>
-                                </div>
-                            </div>
-                        </div>
-                        {% endif %}
-                    </div>
-                {% endfor %}
+  {% if questions %}
+  <div>
+    <div class="oh-layout--grid-3">
+      {% for question in questions %}
+      <div
+        class="oh-kanban-card"
+        data-toggle="oh-modal-toggle"
+        data-target="#genericModal"
+        hx-get="{% url 'single-survey-view' question.id %}?instance_ids={{requests_ids}}"
+        hx-target="#genericModalBody"
+      >
+        <div class="oh-kanban-card__details">
+          <span class="oh-kanban-card__title">{{question}}</span>
+          <span class="oh-kanban-card__subtitle">
+            {% for rec in question.recruitment_ids.all %} {{rec}},&nbsp;
+            {% endfor %}
+          </span>
+        </div>
+        {% if perms.recruitment.delete_recruitmentsurvey or perms.recruitment.change_recruitmentsurvey or perms.recruitment.add_recruitmentsurvey %}
+        <div class="oh-kanban-card__dots">
+          <div class="oh-dropdown" x-data="{show: false}">
+            <button class="oh-btn oh-btn--transparent text-muted p-3" @click="show = !show" title={% trans "Actions" %} onclick="event.stopPropagation()" >
+              <ion-icon name="ellipsis-vertical-sharp"></ion-icon>
+            </button>
+            <div
+              class="oh-dropdown__menu oh-dropdown__menu--dark-border oh-dropdown__menu--right"
+              x-show="show"
+              @click.outside="show = false"
+            >
+              <ul class="oh-dropdown__items">
+                {% if perms.recruitment.change_recruitmentsurvey %}
+                <li class="oh-dropdown__item">
+                  <a
+                    hx-get="{% url 'recruitment-survey-question-template-edit' question.id %}"
+                    data-toggle="oh-modal-toggle"
+                    data-target="#genericModal"
+                    hx-target="#genericModalBody"
+                    class="oh-dropdown__link"
+                    >{% trans "Edit" %}
+                  </a>
+                </li>
+                {% endif %} {% if perms.recruitment.add_recruitmentsurvey %}
+                <li class="oh-dropdown__item">
+                  <a
+                    hx-get="{% url 'recruitment-survey-question-template-duplicate' question.id %}"
+                    data-toggle="oh-modal-toggle"
+                    data-target="#genericModal"
+                    hx-target="#genericModalBody"
+                    class="oh-dropdown__link"
+                    >{% trans "Duplicate" %}
+                  </a>
+                </li>
+                {% endif %} {% if perms.recruitment.delete_recruitmentsurvey %}
+                <li class="oh-dropdown__item">
+                  <a href="{% url 'recruitment-survey-question-template-delete' question.id %}" onclick="event.preventDefault();event.stopPropagation(); confirm('{% trans "Are you sure want to delete?" %}')"
+                      class="text-danger" >
+                    {% trans "Delete" %}
+                  </a>
+                </li>
+                {% endif %}
+              </ul>
+            </div>
+        </div>
+    </div>
+    {% endif %}
+</div>
+{% endfor %}
+
             </div>
 
             <div class="oh-pagination">
diff --git a/recruitment/templates/survey/templates.html b/recruitment/templates/survey/templates.html
index 3925cff7e..99abedf0d 100644
--- a/recruitment/templates/survey/templates.html
+++ b/recruitment/templates/survey/templates.html
@@ -40,7 +40,7 @@
               <ion-icon name="add-circle-outline"></ion-icon>
             </button>
             <button
-              hx-get="{% url 'survey-template-create' %}?title={{template.title}}"
+              hx-get="{% url 'survey-template-update' %}?title={{template.title}}"
               hx-target="#templateModalBody"
               data-toggle="oh-modal-toggle"
               data-target="#templateModal"
diff --git a/recruitment/templates/survey/view_question_templates.html b/recruitment/templates/survey/view_question_templates.html
index 2988bcbeb..7eb9dcc7a 100644
--- a/recruitment/templates/survey/view_question_templates.html
+++ b/recruitment/templates/survey/view_question_templates.html
@@ -1,6 +1,8 @@
 {% extends 'index.html' %}
 {% block content %}
+{% include "generic/components.html" %}
 {% load i18n %} {% load basefilters %}
+
 <style>
     .oh-modal_close--custom {
         border: none;
@@ -12,7 +14,6 @@
         right: 15px;
     }
 </style>
-
 <div class="oh-modal" id="addSurvey" role="dialog" aria-labelledby="addSurvey" aria-hidden="true">
     <div class="oh-modal__dialog">
         <div class="oh-modal__dialog-header">
@@ -92,34 +93,35 @@
     <ul class="oh-tabs__tablist">
         <li class="oh-tabs__tab oh-tabs__tab--active" data-target="#templateTab">
             {% trans "Templates" %}
-            {% if perms.recruitment.add_surveytemplate %}
-                <button onclick="event.stopPropagation()" style="display: inline-block;padding: 0px;
-                    border-radius: 6px;
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-                    width: 50px;
-                    height: 28px;" class="oh-btn oh-btn--secondary-outline float-end ms-3"
-                    hx-get="{% url 'survey-template-create' %}" hx-target="#templateModalBody" data-toggle="oh-modal-toggle"
-                    data-target="#templateModal" title="{% trans " Create template group" %}">
-                    <ion-icon name="add-outline" class="m-0 md hydrated" role="img" aria-label="add outline"></ion-icon>
-                </button>
+            {% if perms.recruitment.add_recruitmentsurvey %}
+            <button onclick="event.stopPropagation()" style="display: inline-block;padding: 0px;
+          border-radius: 6px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 50px;
+          height: 28px;" class="oh-btn oh-btn--secondary-outline float-end ms-3"
+                hx-get="{% url 'survey-template-create' %}" hx-target="#genericModalBody" data-toggle="oh-modal-toggle"
+                data-target="#genericModal" title="{% trans " Create template group" %}">
+                <ion-icon name="add-outline" class="m-0 md hydrated" role="img" aria-label="add outline"></ion-icon>
+            </button>
             {% endif %}
         </li>
         <li class="oh-tabs__tab" data-target="#questionTab">
             {% trans "Questions" %}
             {% if perms.recruitment.add_recruitmentsurvey %}
-                <button onclick="event.stopPropagation()" style="display: inline-block;padding: 0px;
-                        border-radius: 6px;
-                        display: flex;
-                        align-items: center;
-                        justify-content: center;
-                        width: 50px;
-                        height: 28px;" class="oh-btn oh-btn--secondary-outline float-end ms-3"
-                    hx-get="{% url 'recruitment-survey-question-template-create' %}" hx-target="#templateModalBody"
-                    data-toggle="oh-modal-toggle" data-target="#templateModal" title="{% trans 'Create survey questions' %}">
-                    <ion-icon name="add-outline" class="m-0 md hydrated" role="img" aria-label="add outline"></ion-icon>
-                </button>
+            <button onclick="event.stopPropagation()" style="display: inline-block;padding: 0px;
+            border-radius: 6px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 50px;
+            height: 28px;" class="oh-btn oh-btn--secondary-outline float-end ms-3"
+                hx-get="{% url 'recruitment-survey-question-template-create' %}" hx-target="#genericModalBody"
+                data-toggle="oh-modal-toggle" data-target="#genericModal" title="{% trans " Create survey questions"
+                %}">
+                <ion-icon name="add-outline" class="m-0 md hydrated" role="img" aria-label="add outline"></ion-icon>
+            </button>
             {% endif %}
         </li>
     </ul>
diff --git a/recruitment/templates/survey/view_single_template.html b/recruitment/templates/survey/view_single_template.html
index 767faba03..8bc331e6d 100644
--- a/recruitment/templates/survey/view_single_template.html
+++ b/recruitment/templates/survey/view_single_template.html
@@ -63,7 +63,7 @@
         {% if perms.recruitment.change_recruitmentsurvey and perms.recruitment.delete_recruitmentsurvey %}
         <div class="oh-btn-group">
             <a class="oh-btn oh-btn--info" hx-get="{% url 'recruitment-survey-question-template-edit' question.id %}"
-                data-toggle="oh-modal-toggle" data-target="#updateSurvey" hx-target="#updateSurveyModalBody"
+                data-toggle="oh-modal-toggle" data-target="#genericModal" hx-target="#genericModalBody"
                 style="width: 50%;">
                 <ion-icon name="create-outline" role="img" class="md hydrated" aria-label="create outline">
                 </ion-icon>{% trans "Edit" %}
@@ -80,7 +80,7 @@
         <div class="oh-btn-group">
             {% if perms.recruitment.change_recruitmentsurvey %}
             <a class="oh-btn oh-btn--info" hx-get="{% url 'recruitment-survey-question-template-edit' question.id %}"
-                data-toggle="oh-modal-toggle" data-target="#updateSurvey" hx-target="#updateSurveyModalBody"
+                data-toggle="oh-modal-toggle" data-target="#genericModal" hx-target="#genericModalBody"
                 style="width: 100%;">
                 <ion-icon name="create-outline" role="img" class="md hydrated" aria-label="create outline">
                 </ion-icon>{% trans "Edit" %}
diff --git a/recruitment/templatetags/recruitmentfilters.py b/recruitment/templatetags/recruitmentfilters.py
index 1c4016d43..c6a154a0b 100644
--- a/recruitment/templatetags/recruitmentfilters.py
+++ b/recruitment/templatetags/recruitmentfilters.py
@@ -35,6 +35,19 @@ def is_stagemanager(user):
         return False
 
 
+@register.filter(name="is_any_manager")
+def is_any_manager(request):
+    """
+    This method is used to check the employee is stage or recruitment manager
+    """
+    return (
+        request.user.employee_get.stage_set.exists()
+        or request.user.employee_get.recruitment_set.exists()
+        or request.user.employee_get.onboardingstage_set.exists()
+        or request.user.employee_get.onboarding_task.exists()
+    )
+
+
 @register.filter(name="is_recruitmentmanager")
 def is_recruitmentmangers(user):
     """
diff --git a/recruitment/urls.py b/recruitment/urls.py
index 6ebe20217..e017d5a1e 100644
--- a/recruitment/urls.py
+++ b/recruitment/urls.py
@@ -12,37 +12,94 @@ import recruitment.views.search
 import recruitment.views.surveys
 from base.views import add_remove_dynamic_fields, object_duplicate
 from recruitment import cbvs
+from recruitment.cbv import (
+    candidate_mail_log,
+    candidate_profile,
+    candidate_reject_reason,
+    candidates,
+    dashboard,
+    interview,
+    pipeline,
+    recruitment_survey,
+    recruitment_view,
+    skill_zone,
+    skills,
+    stage_view,
+)
 from recruitment.forms import QuestionForm, RecruitmentCreationForm, StageCreationForm
 from recruitment.models import Candidate, Recruitment, RecruitmentSurvey, Stage
 from recruitment.views import linkedin, views
 from recruitment.views.actions import get_mail_preview, get_template, get_template_hint
 
 urlpatterns = [
-    path("recruitment-create", views.recruitment, name="recruitment-create"),
-    path("recruitment-view", views.recruitment_view, name="recruitment-view"),
     path(
-        "recruitment-search",
+        "interview-view/", interview.InterviewViewPage.as_view(), name="interview-view"
+    ),
+    path(
+        "get-cand-tasks/<int:pk>/",
+        candidate_profile.CandidateProfileTasks.as_view(),
+        name="get-cand-task",
+    ),
+    path(
+        "interview-nav-view/",
+        interview.InterviewNavView.as_view(),
+        name="interview-nav-view",
+    ),
+    path(
+        "interview-list-view/",
+        interview.InterviewLIstView.as_view(),
+        name="interview-list-view",
+    ),
+    path(
+        "interview-detail-view/<int:pk>",
+        interview.InterviewDetailView.as_view(),
+        name="interview-detail-view",
+    ),
+    # path("recruitment-create", views.recruitment, name="recruitment-create"),
+    path(
+        "recruitment-create",
+        recruitment_view.RecruitmentForm.as_view(),
+        name="recruitment-create",
+    ),
+    # path("recruitment-view", views.recruitment_view, name="recruitment-view"),
+    path(
+        "recruitment-search",  # form.save()
         recruitment.views.search.recruitment_search,
         name="recruitment-search",
     ),
+    # path(
+    #     "recruitment-update/<int:rec_id>/",
+    #     views.recruitment_update,
+    #     name="recruitment-update",
+    # ),
     path(
-        "recruitment-update/<int:rec_id>/",
-        views.recruitment_update,
+        "recruitment-update/<int:pk>/",
+        recruitment_view.RecruitmentForm.as_view(),
         name="recruitment-update",
     ),
+    # path(
+    #     "recruitment-duplicate/<int:obj_id>/",
+    #     object_duplicate,
+    #     name="recruitment-duplicate",
+    #     kwargs={
+    #         "model": Recruitment,
+    #         "form": RecruitmentCreationForm,
+    #         "template": "recruitment/recruitment_form.html",
+    #     },
+    # ),
     path(
-        "recruitment-duplicate/<int:obj_id>/",
-        object_duplicate,
+        "recruitment-duplicate/<int:pk>/",
+        recruitment_view.RecruitmentFormDuplicate.as_view(),
         name="recruitment-duplicate",
-        kwargs={
-            "model": Recruitment,
-            "form": RecruitmentCreationForm,
-            "template": "recruitment/recruitment_form.html",
-        },
     ),
+    # path(
+    #     "recruitment-update-pipeline/<int:rec_id>/",
+    #     views.recruitment_update_pipeline,
+    #     name="recruitment-update-pipeline",
+    # ),
     path(
-        "recruitment-update-pipeline/<int:rec_id>/",
-        views.recruitment_update_pipeline,
+        "recruitment-update-pipeline/<int:pk>/",
+        recruitment_view.RecruitmentForm.as_view(),
         name="recruitment-update-pipeline",
     ),
     path(
@@ -109,27 +166,53 @@ urlpatterns = [
         views.candidate_schedule_date_update,
         name="candidate-schedule-date-update",
     ),
-    path("stage-create", views.stage, name="rec-stage-create"),
-    path("stage-view", views.stage_view, name="rec-stage-view"),
+    # path("stage-create", views.stage, name="rec-stage-create"),
+    path("stage-create", stage_view.StageFormView.as_view(), name="rec-stage-create"),
+    path(
+        "update-stage-seq/<int:pk>/",
+        views.update_stage_order,
+        name="rec-update-stage-seq",
+    ),
+    # path("stage-view", views.stage_view, name="rec-stage-view"),
     path("stage-data/<int:rec_id>/", views.stage_data, name="stage-data"),
     path("stage-search", recruitment.views.search.stage_search, name="stage-search"),
-    path("stage-update/<int:stage_id>/", views.stage_update, name="rec-stage-update"),
+    # path("stage-update/<int:stage_id>/", views.stage_update, name="rec-stage-update"),
     path(
-        "rec-stage-duplicate/<int:obj_id>/",
-        object_duplicate,
-        name="rec-stage-duplicate",
-        kwargs={
-            "model": Stage,
-            "form": StageCreationForm,
-            "template": "stage/stage_form.html",
-        },
+        "stage-update/<int:pk>/",
+        stage_view.StageFormView.as_view(),
+        name="rec-stage-update",
     ),
-    path("add-candidate-to-stage", views.add_candidate, name="add-candidate-to-stage"),
+    # path(
+    #     "rec-stage-duplicate/<int:obj_id>/",
+    #     object_duplicate,
+    #     name="rec-stage-duplicate",
+    #     kwargs={
+    #         "model": Stage,
+    #         "form": StageCreationForm,
+    #         "template": "stage/stage_form.html",
+    #     },
+    # ),
     path(
-        "stage-update-pipeline/<int:stage_id>/",
-        views.stage_update_pipeline,
+        "rec-stage-duplicate/<int:pk>/",
+        stage_view.StageDuplicateForm.as_view(),
+        name="rec-stage-duplicate",
+    ),
+    # path("add-candidate-to-stage", views.add_candidate, name="add-candidate-to-stage"),
+    path(
+        "add-candidate-to-stage",
+        recruitment_view.AddCandidateFormView.as_view(),
+        name="add-candidate-to-stage",
+    ),
+    path(
+        "stage-update-pipeline/<int:pk>/",
+        stage_view.StageFormView.as_view(),
         name="stage-update-pipeline",
     ),
+    # path(
+    #     "stage-update-pipeline/<int:stage_id>/",
+    #     views.stage_update_pipeline,
+    #     name="stage-update-pipeline",
+    # ),
     path(
         "stage-title-update/<int:stage_id>/",
         views.stage_title_update,
@@ -162,7 +245,7 @@ urlpatterns = [
         name="candidate-stage-update",
     ),
     path("view-note/<int:cand_id>/", views.view_note, name="view-note"),
-    path("add-note/<int:cand_id>/", views.add_note, name="add-note"),
+    path("add-note/<int:pk>/", views.add_note, name="add-note"),
     path("add-note", views.add_note, name="add-note-post"),
     path("create-note/<int:cand_id>/", views.create_note, name="create-note"),
     path("create-note", views.create_note, name="create-note-post"),
@@ -189,29 +272,49 @@ urlpatterns = [
     ),
     path("send-mail/<int:cand_id>/", views.form_send_mail, name="send-mail"),
     path("send-mail/", views.form_send_mail, name="send-mail"),
+    # path(
+    #     "interview-schedule/<int:cand_id>/",
+    #     views.interview_schedule,
+    #     name="interview-schedule",
+    # ),
     path(
-        "interview-schedule/<int:cand_id>/",
-        views.interview_schedule,
+        "interview-schedule/<int:cand_id>",
+        interview.InterviewForm.as_view(),
         name="interview-schedule",
     ),
     path(
         "create-interview-schedule",
-        views.create_interview_schedule,
+        interview.InterviewForm.as_view(),
         name="create-interview-schedule",
     ),
+    # path(
+    #     "create-interview-schedule",
+    #     views.create_interview_schedule,
+    #     name="create-interview-schedule",
+    # ),
     path(
-        "edit-interview/<int:interview_id>/",
-        views.interview_edit,
+        "edit-interview/<int:pk>/",
+        interview.InterviewForm.as_view(),
         name="edit-interview",
     ),
+    # path(
+    #     "edit-interview/<int:interview_id>/",
+    #     views.interview_edit,
+    #     name="edit-interview",
+    # ),
     path(
         "delete-interview/<int:interview_id>/",
         views.interview_delete,
         name="delete-interview",
     ),
     path("get_managers", views.get_managers, name="get_managers"),
-    path("candidate-view/", views.candidate_view, name="candidate-view"),
-    path("interview-view/", views.interview_view, name="interview-view"),
+    path(
+        "get-interview-managers",
+        views.get_interview_managers,
+        name="get-interview-managers",
+    ),
+    # path("candidate-view/", views.candidate_view, name="candidate-view"),
+    # path("interview-view/", views.interview_view, name="interview-view"),
     path(
         "interview-filter-view/",
         views.interview_filter_view,
@@ -241,6 +344,17 @@ urlpatterns = [
         name="candidate-view-individual",
         kwargs={"model": Candidate},
     ),
+    path(
+        "profile/recruitment/candidate-view/<int:pk>/",
+        candidate_profile.CandidateProfileView.as_view(),
+        name="candidate-view",
+    ),
+    path(
+        "candidate-mail-log-list/<int:pk>/",
+        candidate_mail_log.CandidateMailLogTabList.as_view(),
+        name="candidate-mail-log-list",
+    ),
+    # path("candidate-mail-log-detail/<int:pk>/", candidate_mail_log.CandidateMailLogDetailView.as_view(), name="candidate-mail-log-deail"),
     path(
         "candidate-update/<int:cand_id>/",
         views.candidate_update,
@@ -294,6 +408,26 @@ urlpatterns = [
     path(
         "dashboard", recruitment.views.dashboard.dashboard, name="recruitment-dashboard"
     ),
+    path(
+        "skill-zone-status-dashboard",
+        dashboard.SkillZoneStatusList.as_view(),
+        name="skill-zone-status-dashboard",
+    ),
+    path(
+        "candidate-on-onboard-dashboard",
+        dashboard.CandidateOnOnboardList.as_view(),
+        name="candidate-on-onboard-dashboard",
+    ),
+    path(
+        "current-hiring-pipeline-dashboard",
+        dashboard.CurrentHiringList.as_view(),
+        name="current-hiring-pipeline-dashboard",
+    ),
+    path(
+        "ongoing-recruitment-dashboard",
+        dashboard.OnGoingRecruitmentList.as_view(),
+        name="ongoing-recruitment-dashboard",
+    ),
     path(
         "dashboard-pipeline",
         recruitment.views.dashboard.dashboard_pipeline,
@@ -354,9 +488,14 @@ urlpatterns = [
         recruitment.views.surveys.view_question_template,
         name="recruitment-survey-question-template-view",
     ),
+    # path(
+    #     "recruitment-survey-question-template-create",
+    #     recruitment.views.surveys.create_question_template,
+    #     name="recruitment-survey-question-template-create",
+    # ),
     path(
         "recruitment-survey-question-template-create",
-        recruitment.views.surveys.create_question_template,
+        recruitment_survey.QuestionFormView.as_view(),
         name="recruitment-survey-question-template-create",
     ),
     path(
@@ -371,20 +510,30 @@ urlpatterns = [
             "field_name_pre": "options",
         },
     ),
+    # path(
+    #     "recruitment-survey-question-template-edit/<int:survey_id>/",
+    #     recruitment.views.surveys.update_question_template,
+    #     name="recruitment-survey-question-template-edit",
+    # ),
     path(
-        "recruitment-survey-question-template-edit/<int:survey_id>/",
-        recruitment.views.surveys.update_question_template,
+        "recruitment-survey-question-template-edit/<int:pk>/",
+        recruitment_survey.QuestionFormView.as_view(),
         name="recruitment-survey-question-template-edit",
     ),
+    # path(
+    #     "recruitment-survey-question-template-duplicate/<int:obj_id>/",
+    #     object_duplicate,
+    #     name="recruitment-survey-question-template-duplicate",
+    #     kwargs={
+    #         "model": RecruitmentSurvey,
+    #         "form": QuestionForm,
+    #         "template": "survey/template_form.html",
+    #     },
+    # ),
     path(
         "recruitment-survey-question-template-duplicate/<int:obj_id>/",
-        object_duplicate,
+        recruitment_survey.QuestionDuplicateFormView.as_view(),
         name="recruitment-survey-question-template-duplicate",
-        kwargs={
-            "model": RecruitmentSurvey,
-            "form": QuestionForm,
-            "template": "survey/template_form.html",
-        },
     ),
     path(
         "recruitment-survey-question-template-delete/<int:survey_id>/",
@@ -401,16 +550,26 @@ urlpatterns = [
         recruitment.views.search.filter_survey,
         name="rec-filter-survey",
     ),
+    # path(
+    #     "single-survey-view/<int:survey_id>/",
+    #     recruitment.views.surveys.single_survey,
+    #     name="single-survey-view",
+    # ),
     path(
-        "single-survey-view/<int:survey_id>/",
-        recruitment.views.surveys.single_survey,
+        "single-survey-view/<int:pk>/",
+        recruitment_survey.RecruitmentSurveyDetailView.as_view(),
         name="single-survey-view",
     ),
     path(
         "survey-template-create",
-        recruitment.views.surveys.create_template,
+        recruitment_survey.SurveyTemplateFormView.as_view(),
         name="survey-template-create",
     ),
+    # path(
+    #     "survey-template-create",
+    #     recruitment.views.surveys.create_template,
+    #     name="survey-template-create",
+    # ),
     path(
         "survey-template-delete",
         recruitment.views.surveys.delete_template,
@@ -428,10 +587,20 @@ urlpatterns = [
         name="candidate-select-filter",
     ),
     path("skill-zone-view/", views.skill_zone_view, name="skill-zone-view"),
-    path("skill-zone-create", views.skill_zone_create, name="skill-zone-create"),
+    # path("skill-zone-create", views.skill_zone_create, name="skill-zone-create"),
     path(
-        "skill-zone-update/<int:sz_id>",
-        views.skill_zone_update,
+        "skill-zone-create",
+        skill_zone.SkillZoneFormView.as_view(),
+        name="skill-zone-create",
+    ),
+    # path(
+    #     "skill-zone-update/<int:sz_id>",
+    #     views.skill_zone_update,
+    #     name="skill-zone-update",
+    # ),
+    path(
+        "skill-zone-update/<int:pk>",
+        skill_zone.SkillZoneFormView.as_view(),
         name="skill-zone-update",
     ),
     path(
@@ -445,9 +614,14 @@ urlpatterns = [
         name="skill-zone-archive",
     ),
     path("skill-zone-filter", views.skill_zone_filter, name="skill-zone-filter"),
+    # path(
+    #     "skill-zone-cand-create/<int:sz_id>",
+    #     views.skill_zone_candidate_create,
+    #     name="skill-zone-cand-create",
+    # ),
     path(
         "skill-zone-cand-create/<int:sz_id>",
-        views.skill_zone_candidate_create,
+        skill_zone.SkillZoneCandidateFormView.as_view(),
         name="skill-zone-cand-create",
     ),
     path(
@@ -455,9 +629,14 @@ urlpatterns = [
         views.skill_zone_cand_card_view,
         name="skill-zone-cand-card-view",
     ),
+    # path(
+    #     "skill-zone-cand-edit/<int:sz_cand_id>/",
+    #     views.skill_zone_cand_edit,
+    #     name="skill-zone-cand-edit",
+    # ),
     path(
-        "skill-zone-cand-edit/<int:sz_cand_id>/",
-        views.skill_zone_cand_edit,
+        "skill-zone-cand-edit/<int:pk>/",
+        skill_zone.SkillZoneCandidateFormView.as_view(),
         name="skill-zone-cand-edit",
     ),
     path(
@@ -470,7 +649,17 @@ urlpatterns = [
         views.skill_zone_cand_archive,
         name="skill-zone-cand-archive",
     ),
-    path("to-skill-zone/<int:cand_id>", views.to_skill_zone, name="to-skill-zone"),
+    # path("to-skill-zone/<int:cand_id>", views.to_skill_zone, name="to-skill-zone"),
+    path(
+        "to-skill-zone/<int:cand_id>",
+        candidates.ToSkillZoneFormView.as_view(),
+        name="to-skill-zone",
+    ),
+    path(
+        "add-to-rejected-candidates",
+        candidates.RejectReasonFormView.as_view(),
+        name="add-to-rejected-candidates",
+    ),
     path(
         "skill-zone-cand-delete/<int:sz_cand_id>",
         views.skill_zone_cand_delete,
@@ -548,6 +737,26 @@ urlpatterns = [
     path(
         "create-reject-reason", views.create_reject_reason, name="create-reject-reason"
     ),
+    path(
+        "candidate-reject-reasons-list",
+        candidate_reject_reason.RejectReasonListView.as_view(),
+        name="candidate-reject-reasons-list",
+    ),
+    path(
+        "candidate-reject-reasons-nav",
+        candidate_reject_reason.RejectReasonNav.as_view(),
+        name="candidate-reject-reasons-nav",
+    ),
+    path(
+        "create-reject-reason-view",
+        candidate_reject_reason.RejectReasonFormView.as_view(),
+        name="create-reject-reason-view",
+    ),
+    path(
+        "update-reject-reason-view/<int:pk>/",
+        candidate_reject_reason.RejectReasonFormView.as_view(),
+        name="update-reject-reason-view",
+    ),
     path(
         "delete-reject-reasons",
         views.delete_reject_reason,
@@ -558,13 +767,68 @@ urlpatterns = [
         views.resume_completion,
         name="resume-completion",
     ),
+    path("candidate-view/", candidates.CandidatesView.as_view(), name="candidate-view"),
+    path("list-candidate/", candidates.ListCandidates.as_view(), name="list-candidate"),
+    path("card-candidate/", candidates.CardCandidates.as_view(), name="card-candidate"),
+    path("nav-candidate/", candidates.CandidateNav.as_view(), name="nav-candidate"),
+    path("export/", candidates.ExportView.as_view(), name="export"),
+    path(
+        "candidate-detail/<int:pk>/",
+        candidates.CandidateDetail.as_view(),
+        name="candidate-detail",
+    ),
     path(
         "check-vaccancy",
         views.check_vaccancy,
         name="check-vaccancy",
     ),
     path(
-        "skills-view/",
+        "add-candidate-reject/",
+        candidates.AddToRejectedCandidatesView.as_view(),
+        name="add-candidate-reject",
+    ),
+    path(
+        "candidate-detail/<int:pk>/",
+        candidates.CandidateDetail.as_view(),
+        name="candidate-detail",
+    ),
+    path(
+        "recruitment-view/",
+        recruitment_view.RecruitmentView.as_view(),
+        name="recruitment-view",
+    ),
+    path(
+        "list-recruitment/",
+        recruitment_view.RecruitmentList.as_view(),
+        name="list-recruitment",
+    ),
+    path(
+        "nav-recruitment/",
+        recruitment_view.RecruitmentNav.as_view(),
+        name="nav-recruitment",
+    ),
+    path(
+        "recruitment-detail-view/<int:pk>/",
+        recruitment_view.RecruitmentDetailView.as_view(),
+        name="recruitment-detail-view",
+    ),
+    path("stage-view/", stage_view.StageView.as_view(), name="rec-stage-view"),
+    path("list-stage/", stage_view.StageList.as_view(), name="list-stage"),
+    path("nav-stage/", stage_view.StageNav.as_view(), name="nav-stage"),
+    path(
+        "stage-detail-view/<int:pk>/",
+        stage_view.StageDetailView.as_view(),
+        name="stage-detail-view",
+    ),
+    path(
+        "add-skill-form/",
+        recruitment_view.RecruitmentNewSkillForm.as_view(),
+        name="add-skill-form",
+    ),
+    path("skills-list-view/", skills.SkillsListView.as_view(), name="skills-list-view"),
+    path("skills-nav-view/", skills.SkillsNavView.as_view(), name="skills-nav-view"),
+    path(
+        "settings/skills-view/",
         views.skills_view,
         name="skills-view",
     ),
@@ -573,6 +837,16 @@ urlpatterns = [
         views.create_skills,
         name="create-skills",
     ),
+    path(
+        "settings-create-skills/",
+        skills.SkillsCreateForm.as_view(),
+        name="settings-create-skills",
+    ),
+    path(
+        "settings-update-skills/<int:pk>",
+        skills.SkillsCreateForm.as_view(),
+        name="settings-update-skills",
+    ),
     path(
         "delete-skills/",
         views.delete_skills,
@@ -655,15 +929,42 @@ urlpatterns = [
         name="candidate-document-delete",
     ),
     path(
-        "candidate-add-notes/<int:cand_id>",
+        "candidate-add-notes/<int:cand_id>/",
         views.candidate_add_notes,
         name="candidate-add-notes",
     ),
     path(
-        "employee-interview-tab",
+        "employee-interview-tab/",
         views.employee_profile_interview_tab,
         name="employee-interview-tab",
     ),
+    path("cbv-pipeline/", pipeline.PipelineView.as_view(), name="cbv-pipeline"),
+    path(
+        "cbv-pipeline-tab/",
+        pipeline.RecruitmentTabView.as_view(),
+        name="cbv-pipeline-tab",
+    ),
+    path("cbv-pipeline-nav/", pipeline.PipelineNav.as_view(), name="cbv-pipeline-nav"),
+    path(
+        "get-stages/<int:rec_id>/",
+        pipeline.GetStages.as_view(),
+        name="get-stages-recruitment",
+    ),
+    path(
+        "candidate-lists-cbv/<int:stage_id>/",
+        pipeline.CandidateList.as_view(),
+        name="candidate-lists-cbv",
+    ),
+    path(
+        "candidate-lists-cbv/<int:stage_id>/<int:rec_id>/",
+        pipeline.CandidateList.as_view(),
+        name="candidate-lists-cbv",
+    ),
+    path(
+        "cbv-change-stage/<int:pk>/",
+        pipeline.ChangeStage.as_view(),
+        name="cbv-change-stage",
+    ),
     # Linkedin Integration urls
     path(
         "linkedin-integration-setting",
diff --git a/recruitment/views/actions.py b/recruitment/views/actions.py
index 2bb9963d9..d2af25b90 100644
--- a/recruitment/views/actions.py
+++ b/recruitment/views/actions.py
@@ -396,14 +396,16 @@ def remove_recruitment_manager(request, mid, rid):
     )
     recruitment_queryset = Recruitment.objects.all()
     previous_data = request.GET.urlencode()
-    return render(
-        request,
-        "recruitment/recruitment_component.html",
-        {
-            "data": paginator_qry(recruitment_queryset, request.GET.get("page")),
-            "pd": previous_data,
-        },
-    )
+    return HttpResponse("<script> $('#applyFilter').click();</script>")
+
+    # return render(
+    #     request,
+    #     "recruitment/recruitment_component.html",
+    #     {
+    #         "data": paginator_qry(recruitment_queryset, request.GET.get("page")),
+    #         "pd": previous_data,
+    #     },
+    # )
 
 
 @login_required
diff --git a/recruitment/views/linkedin.py b/recruitment/views/linkedin.py
index f6df129cd..26d46192b 100644
--- a/recruitment/views/linkedin.py
+++ b/recruitment/views/linkedin.py
@@ -14,6 +14,8 @@ import json
 import requests
 from bs4 import BeautifulSoup
 from django.conf import settings
+from django.db.models.signals import post_delete
+from django.dispatch import receiver
 from django.http import HttpResponse, JsonResponse
 from django.utils.translation import gettext_lazy as _
 
@@ -152,24 +154,26 @@ def post_recruitment_in_linkedin(
         recruitment.save()
 
 
-@login_required
-def delete_post(recruitment):
+def delete_post(recruitment, update=False):
     """Delete recruitment post from linkedin"""
     # Ensure you are using the correct post ID from when you created the post
-    linkedin_post_id = recruitment.linkedin_post_id  # e.g., "urn:li:ugcPost:123456789"
+    if recruitment.linkedin_post_id:
+        linkedin_post_id = recruitment.linkedin_post_id
+        url = f"https://api.linkedin.com/v2/ugcPosts/{linkedin_post_id}"
+        headers = {
+            "Authorization": f"Bearer {recruitment.linkedin_account_id.api_token}",
+            "Content-Type": "application/json",
+        }
+        response = requests.delete(url, headers=headers)
+        if response.status_code == 204:
+            if update:
+                recruitment.linkedin_post_id = None
+                recruitment.save()
 
-    url = f"https://api.linkedin.com/v2/ugcPosts/{linkedin_post_id}"
-    headers = {
-        "Authorization": f"Bearer {recruitment.linkedin_account_id.api_token}",
-        "Content-Type": "application/json",
-    }
 
-    response = requests.delete(url, headers=headers)
-
-    if response.status_code == 204:
-        # Successfully deleted
-        recruitment.linkedin_post_id = None
-        recruitment.save()
-        return True
-    else:
-        return False
+@receiver(post_delete, sender=Recruitment)
+def delete_linkedin_post(sender, instance, **kwargs):
+    """
+    This is a post delete method, used to delete the linkedin post of recruitment"""
+    if instance.linkedin_post_id:
+        delete_post(instance)
diff --git a/recruitment/views/views.py b/recruitment/views/views.py
index 225571ac0..57aeeba27 100644
--- a/recruitment/views/views.py
+++ b/recruitment/views/views.py
@@ -65,6 +65,7 @@ from horilla_documents.models import Document
 from notifications.signals import notify
 from recruitment.auth import CandidateAuthenticationBackend
 from recruitment.decorators import (
+    all_manager_can_enter,
     candidate_login_required,
     manager_can_enter,
     recruitment_manager_can_enter,
@@ -922,7 +923,7 @@ def candidate_stage_update(request, cand_id):
 
 @login_required
 @hx_request_required
-@manager_can_enter(perm="recruitment.view_stagenote")
+@all_manager_can_enter(perm="recruitment.view_stagenote")
 def view_note(request, cand_id):
     """
     This method renders a template components to view candidate remark or note
@@ -941,11 +942,11 @@ def view_note(request, cand_id):
 @login_required
 @hx_request_required
 @manager_can_enter(perm="recruitment.add_stagenote")
-def add_note(request, cand_id=None):
+def add_note(request, pk=None):
     """
     This method renders template component to add candidate remark
     """
-    form = StageNoteForm(initial={"candidate_id": cand_id})
+    form = StageNoteForm(initial={"candidate_id": pk})
     if request.method == "POST":
         form = StageNoteForm(
             request.POST,
@@ -953,17 +954,17 @@ def add_note(request, cand_id=None):
         )
         if form.is_valid():
             note, attachment_ids = form.save(commit=False)
-            candidate = Candidate.objects.get(id=cand_id)
+            candidate = Candidate.objects.get(id=pk)
             note.candidate_id = candidate
             note.stage_id = candidate.stage_id
             note.updated_by = request.user.employee_get
             note.save()
             note.stage_files.set(attachment_ids)
             messages.success(request, _("Note added successfully.."))
-    candidate_obj = Candidate.objects.get(id=cand_id)
+    candidate_obj = Candidate.objects.get(id=pk)
     return render(
         request,
-        "candidate/individual_view_note.html",
+        "cbv/candidates/profile_notes_tab.html",
         {
             "candidate": candidate_obj,
             "note_form": form,
@@ -1279,6 +1280,39 @@ def stage_update(request, stage_id):
     return render(request, "stage/stage_update_form.html", {"form": form})
 
 
+@login_required
+@recruitment_manager_can_enter("recruitment.change_stage")
+def update_stage_order(request, pk):
+    """
+    This method is used to update the stage sequence of the onboarding
+    """
+    recruitment = Recruitment.objects.get(id=pk)
+
+    if request.method == "POST":
+        try:
+            order = json.loads(request.POST.get("order", "[]"))
+            for index, stage_id in enumerate(order):
+                stage = recruitment.stage_set.get(id=stage_id)
+                stage.sequence = index + 1
+                stage.save()
+            messages.success(request, "Sequence Updated Successfully")
+            return JsonResponse({"status": "success"})
+        except Exception as e:
+            messages.error(request, "Error Updating Sequence..")
+            return JsonResponse({"status": "error", "message": str(e)}, status=400)
+
+    stages = recruitment.stage_set.order_by("sequence")
+
+    return render(
+        request,
+        "cbv/pipeline/stage_order.html",
+        {
+            "stages": stages,
+            "recruitment": recruitment,
+        },
+    )
+
+
 @login_required
 @hx_request_required
 @manager_can_enter("recruitment.add_candidate")
@@ -1500,7 +1534,8 @@ def interview_employee_remove(request, interview_id, employee_id):
     interview.employee_id.remove(employee_id)
     messages.success(request, "Interviewer removed succesfully.")
     interview.save()
-    return HttpResponse("<script>$('.filterButton')[0].click()</script>")
+    # return redirect(interview_filter_view)
+    return HttpResponse("<script> $('#applyFilter').click();</script>")
 
 
 @login_required
@@ -1570,70 +1605,243 @@ def candidate_view_card(request):
 
 @login_required
 @manager_can_enter(perm="recruitment.view_candidate")
+def candidate_about_tab(request, pk, **kwargs):
+    """
+    method for rendering about tab
+    """
+
+    candidate_obj = Candidate.find(pk)
+    if not candidate_obj:
+        messages.error(request, _("Candidate not found"))
+        return HttpResponseRedirect(request.META.get("HTTP_REFERER", "/"))
+    return render(
+        request,
+        "cbv/candidates/profile_about_tab.html",
+        {
+            "candidate": candidate_obj,
+        },
+    )
+
+
+@login_required
+@manager_can_enter(perm="recruitment.view_candidate")
+def candidate_resume_tab(request, pk, **kwargs):
+    """
+    method for rendering resume tab
+    """
+
+    candidate_obj = Candidate.find(pk)
+    return render(
+        request,
+        "cbv/candidates/profile_resume_tab.html",
+        {
+            "candidate": candidate_obj,
+        },
+    )
+
+
+@login_required
+@manager_can_enter(perm="recruitment.view_candidate")
+def candidate_survey_tab(request, pk, **kwargs):
+    """
+    method for rendering survey tab
+    """
+
+    candidate_obj = Candidate.find(pk)
+    return render(
+        request,
+        "cbv/candidates/profile_survey_tab.html",
+        {
+            "candidate": candidate_obj,
+        },
+    )
+
+
+@login_required
+@manager_can_enter(perm="recruitment.view_candidate")
+def candidate_document_request_tab(request, pk, **kwargs):
+    """
+    method for rendering survey tab
+    """
+
+    candidate_obj = Candidate.find(pk)
+    documents = candidate_obj.candidatedocument_set.all()
+    return render(
+        request,
+        "candidate/document.html",
+        {
+            "candidate": candidate_obj,
+            "documents": documents,
+        },
+    )
+
+
+# @login_required
+# @manager_can_enter(perm="recruitment.view_candidate")
+# def candidate_notes_tab(request, pk, **kwargs):
+#     """
+#     method for rendering notes tab
+#     """
+
+#     candidate_obj = Candidate.find(pk)
+#     return render(
+#         request,
+#         "candidate/individual_view_note.html",
+#         {
+#             "candidate": candidate_obj,
+#         },
+#     )
+
+
+@login_required
+@manager_can_enter(perm="recruitment.view_candidate")
+def candidate_history_tab(request, pk, **kwargs):
+    """
+    method for rendering history tab
+    """
+
+    candidate_obj = Candidate.find(pk)
+    return render(
+        request,
+        "candidate/history.html",
+        {
+            "candidate": candidate_obj,
+        },
+    )
+
+
+@login_required
+@all_manager_can_enter(perm="recruitment.view_candidate")
+def candidate_onboarding_tab(request, pk, **kwargs):
+    """
+    method for rendering onboarding tab
+    """
+
+    candidate_obj = Candidate.find(pk)
+    return render(
+        request,
+        "cbv/candidates/profile_onboarding_tab.html",
+        {
+            "candidate": candidate_obj,
+        },
+    )
+
+
+@login_required
+@all_manager_can_enter(perm="recruitment.view_candidate")
+def candidate_rating_tab(request, pk, **kwargs):
+    """
+    method for rendering rating tab
+    """
+
+    candidate_obj = Candidate.find(pk)
+    return render(
+        request,
+        "candidate/rating_tab.html",
+        {
+            "candidate": candidate_obj,
+        },
+    )
+
+
+@login_required
+@manager_can_enter(perm="recruitment.view_candidate")
+def candidate_interview_tab(request, pk, **kwargs):
+    """
+    method for rendering interview tab
+    """
+
+    candidate_obj = Candidate.find(pk)
+    return render(
+        request,
+        "cbv/candidates/profile_interview_tab.html",
+        {
+            "candidate": candidate_obj,
+        },
+    )
+
+
+def scheduled_interview_tab(request, pk, **kwargs):
+    """
+    method for rendering interview tab
+    """
+    employee = Employee.objects.get(id=pk)
+    interviews = InterviewSchedule.objects.filter(employee_id=employee).order_by(
+        "-interview_date"
+    )
+    return render(
+        request,
+        "tabs/scheduled_interview.html",
+        {"interviews": interviews, "employee": employee},
+    )
+
+
+@login_required
+@all_manager_can_enter(perm="recruitment.view_candidate")
 def candidate_view_individual(request, cand_id, **kwargs):
     """
     This method is used to view profile of candidate.
     """
-    candidate_obj = Candidate.find(cand_id)
-    if not candidate_obj:
-        messages.error(request, _("Candidate not found"))
-        return HttpResponseRedirect(request.META.get("HTTP_REFERER", "/"))
+    # candidate_obj = Candidate.find(cand_id)
+    # # if not candidate_obj:
+    # #     messages.error(request, _("Candidate not found"))
+    # #     return HttpResponseRedirect(request.META.get("HTTP_REFERER", "/"))
 
-    mails = list(Candidate.objects.values_list("email", flat=True))
-    # Query the User model to check if any email is present
-    existing_emails = list(
-        User.objects.filter(username__in=mails).values_list("email", flat=True)
-    )
-    ratings = candidate_obj.candidate_rating.all()
-    documents = CandidateDocument.objects.filter(candidate_id=cand_id)
-    rating_list = []
-    avg_rate = 0
-    for rating in ratings:
-        rating_list.append(rating.rating)
-    if len(rating_list) != 0:
-        avg_rate = round(sum(rating_list) / len(rating_list))
+    # mails = list(Candidate.objects.values_list("email", flat=True))
+    # # Query the User model to check if any email is present
+    # existing_emails = list(
+    #     User.objects.filter(username__in=mails).values_list("email", flat=True)
+    # )
+    # ratings = candidate_obj.candidate_rating.all()
+    # documents = CandidateDocument.objects.filter(candidate_id=cand_id)
+    # rating_list = []
+    # avg_rate = 0
+    # for rating in ratings:
+    #     rating_list.append(rating.rating)
+    # if len(rating_list) != 0:
+    #     avg_rate = round(sum(rating_list) / len(rating_list))
 
-    # Retrieve the filtered candidate from the session
-    filtered_candidate_ids = request.session.get("filtered_candidates", [])
+    # # Retrieve the filtered candidate from the session
+    # filtered_candidate_ids = request.session.get("filtered_candidates", [])
 
-    # Convert the string to an actual list of integers
-    requests_ids = (
-        ast.literal_eval(filtered_candidate_ids)
-        if isinstance(filtered_candidate_ids, str)
-        else filtered_candidate_ids
-    )
+    # # Convert the string to an actual list of integers
+    # requests_ids = (
+    #     ast.literal_eval(filtered_candidate_ids)
+    #     if isinstance(filtered_candidate_ids, str)
+    #     else filtered_candidate_ids
+    # )
 
-    next_id = None
-    previous_id = None
+    # next_id = None
+    # previous_id = None
 
-    for index, req_id in enumerate(requests_ids):
-        if req_id == cand_id:
+    # for index, req_id in enumerate(requests_ids):
+    #     if req_id == cand_id:
 
-            if index == len(requests_ids) - 1:
-                next_id = None
-            else:
-                next_id = requests_ids[index + 1]
-            if index == 0:
-                previous_id = None
-            else:
-                previous_id = requests_ids[index - 1]
-            break
+    #         if index == len(requests_ids) - 1:
+    #             next_id = None
+    #         else:
+    #             next_id = requests_ids[index + 1]
+    #         if index == 0:
+    #             previous_id = None
+    #         else:
+    #             previous_id = requests_ids[index - 1]
+    #         break
 
-    now = timezone.now()
+    # now = timezone.now()
 
     return render(
         request,
         "candidate/individual.html",
-        {
-            "candidate": candidate_obj,
-            "previous": previous_id,
-            "next": next_id,
-            "requests_ids": requests_ids,
-            "emp_list": existing_emails,
-            "average_rate": avg_rate,
-            "documents": documents,
-            "now": now,
-        },
+        # {
+        #     "candidate": candidate_obj,
+        #     "previous": previous_id,
+        #     "next": next_id,
+        #     "requests_ids": requests_ids,
+        #     "emp_list": existing_emails,
+        #     "average_rate": avg_rate,
+        #     "documents": documents,
+        #     "now": now,
+        # },
     )
 
 
@@ -1968,6 +2176,25 @@ def interview_edit(request, interview_id):
     )
 
 
+def get_interview_managers(request):
+    cand_id = request.GET.get("candidate_id")
+    form = ScheduleInterviewForm()
+    candidate_obj = Candidate.objects.get(id=cand_id)
+
+    managers = candidate_obj.recruitment_id.recruitment_managers.all()
+
+    form.fields["employee_id"].queryset = managers
+    pk = request.GET.get("pk")
+    if pk:
+        interviewer = InterviewSchedule.objects.get(id=pk)
+        form.fields["employee_id"].initial = interviewer.employee_id.all()
+    return render(
+        request,
+        "candidate/interview_form.html",
+        {"form": form, "CBV": True},
+    )
+
+
 def get_managers(request):
     cand_id = request.GET.get("cand_id")
     candidate_obj = Candidate.objects.get(id=cand_id)
@@ -2645,16 +2872,23 @@ def recruitment_details(request, id):
 
 @login_required
 @manager_can_enter("recruitment.view_candidate")
-def get_mail_log(request):
+def get_mail_log(request, pk):
     """
     This method is used to track mails sent along with the status
     """
-    candidate_id = request.GET["candidate_id"]
-    candidate = Candidate.objects.get(id=candidate_id)
-    tracked_mails = EmailLog.objects.filter(to__icontains=candidate.email).order_by(
+
+    candidate_obj = Candidate.find(pk)
+    tracked_mails = EmailLog.objects.filter(to__icontains=candidate_obj.email).order_by(
         "-created_at"
     )
-    return render(request, "candidate/mail_log.html", {"tracked_mails": tracked_mails})
+    return render(
+        request,
+        "candidate/mail_log.html",
+        {
+            "candidate": candidate_obj,
+            "tracked_mails": tracked_mails,
+        },
+    )
 
 
 @login_required
@@ -2666,9 +2900,15 @@ def candidate_self_tracking(request):
     """
     settings = RecruitmentGeneralSetting.objects.first()
     settings = settings if settings else RecruitmentGeneralSetting()
-    settings.candidate_self_tracking = "candidate_self_tracking" in request.GET.keys()
+    if request.GET.get("candidate_self_tracking") == "true":
+        settings.candidate_self_tracking = True
+        message = _("Application Tracking is enabled ")
+    else:
+        settings.candidate_self_tracking = False
+        message = _("Application Tracking is disabled ")
     settings.save()
-    return HttpResponse("success")
+    messages.success(request, message)
+    return HttpResponse("<script>$('#reloadMessagesButton').click()</script>")
 
 
 @login_required
@@ -2680,9 +2920,16 @@ def candidate_self_tracking_rating_option(request):
     """
     settings = RecruitmentGeneralSetting.objects.first()
     settings = settings if settings else RecruitmentGeneralSetting()
-    settings.show_overall_rating = "candidate_self_tracking" in request.GET.keys()
+    if request.GET.get("candidate_self_tracking") == "true":
+        settings.show_overall_rating = True
+        message = _("Rating visibility is enabled ")
+    else:
+        settings.show_overall_rating = False
+        message = _("Rating visibility is disabled ")
     settings.save()
-    return HttpResponse("success")
+    messages.success(request, message)
+    settings.save()
+    return HttpResponse("<script>$('#reloadMessagesButton').click()</script>")
 
 
 def candidate_login(request):
@@ -2821,12 +3068,14 @@ def delete_reject_reason(request):
     """
     This method is used to delete the reject reasons
     """
-    ids = request.GET.getlist("ids")
-    reasons = RejectReason.objects.filter(id__in=ids)
-    for reason in reasons:
-        reasons.delete()
-        messages.success(request, f"{reason.title} is deleted.")
-    return HttpResponseRedirect(request.META.get("HTTP_REFERER", "/"))
+    id = request.GET.get("id")
+    reason = RejectReason.objects.get(id=id)
+    count = RejectReason.objects.count()
+    reason.delete()
+    messages.success(request, f"{reason.title} is deleted.")
+    if count == 1:
+        return HttpResponse("<script>$('.reload-record').click();</script>")
+    return HttpResponse("<script>$('#reloadMessagesButton').click();</script>")
 
 
 def extract_text_with_font_info(pdf):
@@ -3066,16 +3315,21 @@ def create_skills(request):
 
 @login_required
 @permission_required("recruitment.delete_rejectreason")
-def delete_skills(request):
+def delete_skills(request, id=None):
     """
     This method is used to delete the skills
     """
+
     ids = request.GET.getlist("ids")
     skills = Skill.objects.filter(id__in=ids)
     for skill in skills:
+        count = Skill.objects.count
         skill.delete()
         messages.success(request, f"{skill.title} is deleted.")
-    return HttpResponseRedirect(request.META.get("HTTP_REFERER", "/"))
+        if count == 0:
+            return HttpResponse("<script>$('#reloadMessagesButton').click()</script>")
+        else:
+            return HttpResponse("<script>$('.reload-record').click()</script>")
 
 
 @login_required
diff --git a/templates/country.js b/templates/country.js
index e92acd7a1..0e50e7b86 100644
--- a/templates/country.js
+++ b/templates/country.js
@@ -691,10 +691,15 @@ function populateStates(countryElementId, stateElementId) {
         document.getElementById(countryElementId).selectedIndex;
 
     var stateElement = document.getElementById(stateElementId);
+    if (!stateElement) {
+        console.error(`Element with ID '${stateElementId}' not found.`);
+        return; // Exit if the state element doesn't exist
+    }
 
     stateElement.length = 0;
     stateElement.options[0] = new Option("Select State", "");
     stateElement.selectedIndex = 0;
+
     if (s_a[selectedCountryIndex]) {
         state_arr = s_a[selectedCountryIndex].split("|");
         for (var i = 0; i < state_arr.length; i++) {
@@ -708,7 +713,8 @@ function populateStates(countryElementId, stateElementId) {
 }
 
 function populateCountries(countryElementId, stateElementId) {
-    // given the id of the <select> tag as function argument, it inserts <option> tags
+
+    // Get the country select element by its ID
     var countryElement = document.getElementById(countryElementId);
     var value = countryElement?.value;
     if (value != undefined) {
@@ -731,5 +737,5 @@ function populateCountries(countryElementId, stateElementId) {
     }
 }
 
+{% comment %} populateCountries("country", "id_state"); {% endcomment %}
 populateCountries("id_country", "id_state");
-populateCountries("country", "state");
diff --git a/templates/dashboard.html b/templates/dashboard.html
index 85c80637c..a206f4208 100755
--- a/templates/dashboard.html
+++ b/templates/dashboard.html
@@ -1,4 +1,5 @@
 {% load static basefilters horillafilters employee_filter i18n %} {% load tz %} {% now "Y-m-d" as current_date %}
+{% include 'generic/components.html' %}
 {% load accessibility_filters %}
 <link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">
 
@@ -111,7 +112,32 @@
     }
 </style>
 
-<div class="oh-wrapper">
+<!-- leave allocation reject modal -->
+<div class="oh-modal" id="rejectModal" role="dialog" aria-labelledby="rejectDialogModal" aria-hidden="true">
+    <div class="oh-modal__dialog" id="rejectTarget"></div>
+  </div>
+
+  <!-- end of modal -->
+
+<!-- activity view modal for attendance activity col -->
+
+<div class="oh-modal" id="activityViewModal" role="dialog" aria-hidden="true" style="z-index:1100;">
+    <div class="oh-modal__dialog" style="max-width: 900px;">
+      <div class="oh-modal__dialog-header">
+        <h3 class="oh-main__titlebar-title fw-bold ">{% trans " Activities" %}</h3>
+        <button class="oh-modal__close--custom" aria-label="Close"
+        onclick="$(this).parents().closest('.oh-modal--show').toggleClass('oh-modal--show');">
+        <ion-icon name="close-outline"></ion-icon>
+        </button>
+      </div>
+      <div class="oh-modal__dialog-body" id="activityViewModalBody" style="overflow-x:auto;"></div>
+    </div>
+  </div>
+
+  <!-- end of modal -->
+
+{% include "generic/components.html" %}
+    <div class="oh-wrapper">
 
     <!-- back button -->
     <div class="d-none mt-5" id="back_button" style="width: 10%">
@@ -179,9 +205,530 @@
                             </div>
                         </a>
                     </div>
-                {% endif %}
-                <div class="oh-dashboard__movable-cards row mt-4" id="tileContainer">
-                    {% include "dashboard_tile_container.html" %}
+                    {% endif %}
+                    <div class="oh-dashboard__movable-cards row mt-4" id="tileContainer">
+                        {% if "attendance"|app_installed %}
+                            {% if not 'offline_employees' in charts %}
+                                {% if perms.employee.view_employee or request.user|is_reportingmanager %}
+                            <div class="col-12 col-sm-12 col-md-12 col-lg-6 oh-card-dashboard--moveable dashboardChart"
+                                id="notInYetId">
+                                <div class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent" style="height:425px">
+                                    <div class="oh-card-dashboard__header oh-card-dashboard__header--divider">
+                                        <span class="oh-card-dashboard__title">{% trans "Offline Employees" %}</span>
+                                        <span class="float-end chart_close_button " role="button" data-chart="offline_employees" hx-post="{% url 'dashboard-components-toggle' %}?chart_id=offline_employees" hx-target="#notInYetId" hx-swap="outerHTML">
+                                            <i class="material-icons fw-lighter fs-5">close</i>
+                                        </span>
+                                    </div>
+                                    <div class=" oh-card-dashboard__body" id="notInYetIdBody"  style="height:80%">
+                                        <div class="oh-sticky-table h-100" hx-get="{% url 'not-in-yet' %}" hx-trigger="load" style="border: none;">
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                                    {% comment %} <div class="col-12 col-sm-12 col-md-12 col-lg-6 oh-card-dashboard--moveable dashboardChart"
+                                        id="notInYetId" hx-get="{% url 'not-in-yet' %}" hx-trigger="load">
+                                        {% include "dashboard/not_in_yet.html" %}
+                                    </div> {% endcomment %}
+                                {% endif %}
+                            {% endif %}
+                            {% if not 'online_employees' in charts %}
+                                {% if perms.employee.view_employee or request.user|is_reportingmanager %}
+
+                                <div class="col-12 col-sm-12 col-md-12 col-lg-6 oh-card-dashboard--moveable dashboardChart"
+                                id="notoutYetdd">
+                                <div class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent"
+                                    style="height:425px">
+                                    <div class="oh-card-dashboard__header oh-card-dashboard__header--divider">
+                                        <span class="oh-card-dashboard__title">{% trans "Online Employees" %}</span>
+                                        <span class="float-end chart_close_button fs-5" role="button" data-chart="online_employees" hx-post="{% url 'dashboard-components-toggle' %}?chart_id=online_employees" hx-target="#notoutYetdd" hx-swap="outerHTML">
+                                            <i class="material-icons fw-lighter">close</i>
+                                        </span>
+                                    </div>
+                                    <div class=" oh-card-dashboard__body" id="notoutYetddBody"  style="height:80%">
+                                        <div class="oh-sticky-table h-100" hx-get="{% url 'not-out-yet' %}" hx-trigger="load" style="border: none;">
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                                    {% comment %} <div class="col-12 col-sm-12 col-md-12 col-lg-6 oh-card-dashboard--moveable dashboardChart"
+                                        id="notoutYetdd" hx-get="{% url 'not-out-yet' %}" hx-trigger="load">
+                                        {% include "dashboard/not_out_yet.html" %}
+                                    </div> {% endcomment %}
+                                {% endif %}
+                            {% endif %}
+                        {% endif %}
+                        {% if "leave"|app_installed and not 'overall_leave_chart' in charts %}
+                            {% if perms.leave.view_leaverequest %}
+                                <div class="col-12 col-sm-12 col-md-12 col-lg-4 oh-card-dashboard--moveable dashboardChart"
+                                    id="movable1">
+                                    <div class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent">
+                                        <div class="oh-card-dashboard__header oh-card-dashboard__header--divider">
+                                            <span class="oh-card-dashboard__title">{% trans "Overall Leave" %}</span>
+                                            <span class="float-end chart_close_button ms-3" role="button"
+                                                data-chart="overall_leave_chart"
+                                                hx-post="{% url 'dashboard-components-toggle' %}?chart_id=overall_leave_chart"
+                                                hx-target="#movable1" hx-swap="outerHTML">
+                                                <i class="material-icons fw-lighter fs-5">close</i>
+                                            </span>
+                                            <select class="oh-select oh-select--sm float-end" name="" id="overAllLeaveSelect">
+                                                <option value="today" selected>{% trans "Today" %}</option>
+                                                <option value="week">{% trans "This Week" %}</option>
+                                                <option value="month">{% trans "This Month" %}</option>
+                                                <option value="year">{% trans "This Year" %}</option>
+                                            </select>
+                                        </div>
+                                        <div class="oh-card-dashboard__body">
+                                            <canvas id="overAllLeave" style="cursor: pointer" height='300' width="350"></canvas>
+                                        </div>
+                                    </div>
+                                </div>
+                            {% endif %}
+                        {% endif %}
+                        {% if "recruitment"|app_installed and perms.recruitment.view_candidate or request.user|is_stagemanager %}
+                            {% if not 'hired_candidates' in charts %}
+                            <div class="col-12 col-sm-12 col-md-12 col-lg-6 oh-card-dashboard--moveable dashboardChart"
+                                id="movable2">
+                                <div class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent">
+                                    <div class="oh-card-dashboard__header oh-card-dashboard__header--divider">
+                                        <span class="oh-card-dashboard__title">{% trans "Hired Candidates" %}</span>
+                                        <span class="float-end chart_close_button " role="button"
+                                            data-chart="hired_candidates"
+                                            hx-post="{% url 'dashboard-components-toggle' %}?chart_id=hired_candidates"
+                                            hx-target="#movable2" hx-swap="outerHTML">
+                                            <i class="material-icons fw-lighter fs-5">close</i>
+                                        </span>
+                                    </div>
+                                    <div class="oh-card-dashboard__body">
+                                        <canvas id="hiredCandidate" style="cursor: pointer"></canvas>
+                                    </div>
+                                </div>
+                            </div>
+                            {% endif %}
+                            {% if "onboarding"|app_installed and not 'onboarding_candidates' in charts %}
+                            <div class="col-12 col-sm-12 col-md-12 col-lg-6 oh-card-dashboard--moveable dashboardChart"
+                                id="movable3">
+                                <div class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent">
+                                    <div class="oh-card-dashboard__header oh-card-dashboard__header--divider">
+                                        <span class="oh-card-dashboard__title">{% trans "Candidates Started Onboarding" %}</span>
+                                        <span class="float-end chart_close_button " role="button"
+                                            data-chart="onboarding_candidates"
+                                            hx-post="{% url 'dashboard-components-toggle' %}?chart_id=onboarding_candidates"
+                                            hx-target="#movable3" hx-swap="outerHTML">
+                                            <i class="material-icons fw-lighter fs-5">close</i>
+                                        </span>
+                                    </div>
+                                    <div class="oh-card-dashboard__body">
+                                        <canvas id="onboardCandidate" style="cursor: pointer"></canvas>
+                                    </div>
+                                </div>
+                            </div>
+                            {% endif %}
+                        {% endif %}
+                        {% if "recruitment"|app_installed and not 'recruitment_analytics' in charts %}
+                            {% if request.user|is_stagemanager or perms.recruitment.view_recruitment %}
+                            <div class="col-12 col-sm-12 col-md-12 col-lg-6 oh-card-dashboard--moveable dashboardChart"
+                                id="movable8">
+                                <div class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent">
+                                    <div class="oh-card-dashboard__header oh-card-dashboard__header--divider">
+                                        <span class="oh-card-dashboard__title">{% trans "Recruitment Analytics" %}</span>
+                                        <span class="float-end chart_close_button " role="button"
+                                            data-chart="recruitment_analytics"
+                                            hx-post="{% url 'dashboard-components-toggle' %}?chart_id=recruitment_analytics"
+                                            hx-target="#movable8" hx-swap="outerHTML">
+                                            <i class="material-icons fw-lighter fs-5">close</i>
+                                        </span>
+                                    </div>
+                                    <div class="oh-card-dashboard__body">
+                                        <canvas id="recruitmentChart1" style="cursor: pointer"></canvas>
+                                    </div>
+                                </div>
+                            </div>
+                            {% endif %}
+                        {% endif %}
+                        {% if "attendance"|app_installed and not 'attendance_analytic' in charts %}
+                            {% if request.user|is_reportingmanager or perms.attendance.view_attendance %}
+                            <div class="col-12 col-sm-12 col-md-12 col-lg-6 oh-card-dashboard--moveable dashboardChart"
+                                id="movable4">
+                                <div class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent">
+                                    <div class="oh-card-dashboard__header oh-card-dashboard__header--divider"
+                                        id="attendance_header">
+                                        <div class="oh-card-dashboard__title mb-2">
+                                            {% trans "Attendance Analytics" %}
+                                            <span class="float-end chart_close_button " role="button"
+                                                data-chart="attendance_analytic"
+                                                hx-post="{% url 'dashboard-components-toggle' %}?chart_id=attendance_analytic"
+                                                hx-target="#movable4" hx-swap="outerHTML">
+                                                <i class="material-icons fw-lighter fs-5">close</i>
+                                            </span>
+                                        </div>
+                                        <div class="d-flex justify-content-between mb-2">
+                                            <select id="type" class="oh-select" name="type" onchange="changeView(this)"
+                                                style="width: 150px; padding: 3px; color: #5e5c5c">
+                                                <option value="day">{% trans "Day" %}</option>
+                                                <option value="weekly">{% trans "Weekly" %}</option>
+                                                <option value="monthly">{% trans "Monthly" %}</option>
+                                                <option value="date_range">{% trans "Date range" %}</option>
+                                            </select>
+                                            <span id="day_input">
+                                                <input type="date" class="mb-2 float-end pointer oh-select"
+                                                    id="attendance_month" onchange="changeMonth()"
+                                                    style="width: 100px; color: #5e5c5c" />
+                                            </span>
+                                        </div>
+                                    </div>
+                                    <div class="oh-card-dashboard__body">
+                                        <canvas id="dailyAnalytic" style="cursor: pointer"></canvas>
+                                    </div>
+                                </div>
+                            </div>
+                            {% endif %}
+                        {% endif %}
+                        {% if "attendance"|app_installed and not 'hours_chart' in charts %}
+                            {% if request.user|is_reportingmanager or perms.attendance.view_attendance %}
+                            <div class="col-12 col-sm-12 col-md-12 col-lg-6 oh-card-dashboard--moveable dashboardChart"
+                                id="pendingHours">
+                                <div class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent">
+                                    <div class="oh-card-dashboard__header oh-card-dashboard__header--divider"
+                                        id="pendingHoursHeader">
+                                        <div class="oh-card-dashboard__title mb-2">
+                                            {% trans "Hours Chart" %}
+                                            <span class="float-end chart_close_button " role="button"
+                                                data-chart="hours_chart"
+                                                hx-post="{% url 'dashboard-components-toggle' %}?chart_id=hours_chart"
+                                                hx-target="#pendingHours" hx-swap="outerHTML">
+                                                <i class="material-icons fw-lighter fs-5">close</i>
+                                            </span>
+                                        </div>
+                                        <div class="d-flex justify-content-between mb-2">
+                                            <input type="month" class="mb-2 float-end pointer oh-select"
+                                                id="hourAccountMonth" onchange="dynamicMonth($(this))"
+                                                style="width: 100px; color: #5e5c5c" />
+                                        </div>
+                                        <div class="oh-card-dashboard__body" style="height:300px">
+                                            <canvas id="pendingHoursCanvas" style="cursor: pointer"></canvas>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            {% endif %}
+                        {% endif %}
+                        {% if not 'employees_chart' in charts %}
+                            {% if 'employees_chart'|feature_is_accessible:request or perms.employee.view_employee or request.user|is_reportingmanager %}
+                                <div class="col-12 col-sm-12 col-md-12 col-lg-4 oh-card-dashboard--moveable dashboardChart"
+                                    id="movable5">
+                                    <div class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent">
+                                        <div class="oh-card-dashboard__header oh-card-dashboard__header--divider">
+                                            <span class="oh-card-dashboard__title">{% trans "Employees Chart" %}</span>
+                                            <span class="float-end chart_close_button " role="button"
+                                                data-chart="employees_chart"
+                                                hx-post="{% url 'dashboard-components-toggle' %}?chart_id=employees_chart"
+                                                hx-target="#movable5" hx-swap="outerHTML">
+                                                <i class="material-icons fw-lighter fs-5">close</i>
+                                            </span>
+                                        </div>
+                                        <div class="oh-card-dashboard__body">
+                                            <canvas id="totalEmployees" style="cursor: pointer"></canvas>
+                                        </div>
+                                    </div>
+                                </div>
+                            {% endif %}
+                        {% endif %}
+                        {% if not 'department_chart' in charts %}
+                            {% if 'department_chart'|feature_is_accessible:request or perms.employee.view_employee or request.user|is_reportingmanager %}
+                                <div class="col-12 col-sm-12 col-md-12 col-lg-4 oh-card-dashboard--moveable dashboardChart"
+                                    id="movable6">
+                                    <div class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent">
+                                        <div class="oh-card-dashboard__header oh-card-dashboard__header--divider">
+                                            <span class="oh-card-dashboard__title">{% trans "Department Chart" %}</span>
+                                            <span class="float-end chart_close_button " role="button"
+                                                data-chart="department_chart"
+                                                hx-post="{% url 'dashboard-components-toggle' %}?chart_id=department_chart"
+                                                hx-target="#movable6" hx-swap="outerHTML">
+                                                <i class="material-icons fw-lighter fs-5">close</i>
+                                            </span>
+                                        </div>
+                                        <div class="oh-card-dashboard__body">
+                                            <canvas id="departmentChart" style="cursor: pointer"></canvas>
+                                        </div>
+                                    </div>
+                                </div>
+                            {% endif %}
+                        {% endif %}
+                        {% if not 'gender_chart' in charts  %}
+                            {% if  'gender_chart'|feature_is_accessible:request or perms.employee.view_employee or request.user|is_reportingmanager %}
+                            <div class="col-12 col-sm-12 col-md-12 col-lg-4 oh-card-dashboard--moveable dashboardChart"
+                                id="movable7">
+                                <div class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent">
+                                    <div class="oh-card-dashboard__header oh-card-dashboard__header--divider">
+                                        <span class="oh-card-dashboard__title">{% trans "Gender Chart" %}</span>
+                                        <span class="float-end chart_close_button " role="button" data-chart="gender_chart"
+                                            hx-post="{% url 'dashboard-components-toggle' %}?chart_id=gender_chart"
+                                            hx-target="#movable7" hx-swap="outerHTML">
+                                            <i class="material-icons fw-lighter fs-5">close</i>
+                                        </span>
+                                    </div>
+                                    <div class="oh-card-dashboard__body">
+                                        <canvas id="genderChart" style="cursor: pointer"></canvas>
+                                    </div>
+                                </div>
+                            </div>
+                            {% endif %}
+                        {% endif %}
+                        {% if not 'objective_status' in charts and "pms"|app_installed %}
+                            <div class="col-12 col-sm-12 col-md-12 col-lg-4 oh-card-dashboard--moveable dashboardChart"
+                                id="movable9">
+                                <div class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent">
+                                    <div class="oh-card-dashboard__header oh-card-dashboard__header--divider">
+                                        <span class="oh-card-dashboard__title">{% trans "Objective Status" %}</span>
+                                        <span class="float-end chart_close_button " role="button"
+                                            data-chart="objective_status"
+                                            hx-post="{% url 'dashboard-components-toggle' %}?chart_id=objective_status"
+                                            hx-target="#movable9" hx-swap="outerHTML">
+                                            <i class="material-icons fw-lighter fs-5">close</i>
+                                        </span>
+                                    </div>
+                                    <div class="oh-card-dashboard__body">
+                                        <canvas id="objectiveChart" style="cursor: pointer"></canvas>
+                                    </div>
+                                </div>
+                            </div>
+                        {% endif %}
+                        {% if "pms"|app_installed and not 'key_result_status' in charts %}
+                            {% if perms.pms.view_employeekeyresult or request.user|is_reportingmanager %}
+                            <div class="col-12 col-sm-12 col-md-12 col-lg-4 oh-card-dashboard--moveable dashboardChart"
+                                id="movable10">
+                                <div class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent">
+                                    <div class="oh-card-dashboard__header oh-card-dashboard__header--divider">
+                                        <span class="oh-card-dashboard__title">{% trans "Key Result Status" %}</span>
+                                        <span class="float-end chart_close_button " role="button"
+                                            data-chart="key_result_status"
+                                            hx-post="{% url 'dashboard-components-toggle' %}?chart_id=key_result_status"
+                                            hx-target="#movable10" hx-swap="outerHTML">
+                                            <i class="material-icons fw-lighter fs-5">close</i>
+                                        </span>
+                                    </div>
+                                    <div class="oh-card-dashboard__body">
+                                        <canvas id="keyResultChart" style="cursor: pointer"></canvas>
+                                    </div>
+                                </div>
+                            </div>
+                            {% endif %}
+                        {% endif %}
+                        {% if "pms"|app_installed and not 'feedback_status' in charts %}
+                            {% if perms.pms.view_feedback or request.user|is_reportingmanager %}
+                            <div class="col-12 col-sm-12 col-md-12 col-lg-4 oh-card-dashboard--moveable dashboardChart"
+                                id="movable11">
+                                <div class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent">
+                                    <div class="oh-card-dashboard__header oh-card-dashboard__header--divider">
+                                        <span class="oh-card-dashboard__title">{% trans "Feedback Status" %}</span>
+                                        <span class="float-end chart_close_button " role="button"
+                                            data-chart="feedback_status"
+                                            hx-post="{% url 'dashboard-components-toggle' %}?chart_id=feedback_status"
+                                            hx-target="#movable11" hx-swap="outerHTML">
+                                            <i class="material-icons fw-lighter fs-5">close</i>
+                                        </span>
+                                    </div>
+                                    <div class="oh-card-dashboard__body">
+                                        <div class="oh-card-dashboard__body">
+                                            <canvas id="feedbackChart" style="cursor: pointer"></canvas>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            {% endif %}
+                        {% endif %}
+                        {% if not 'shift_request_approve' in charts %}
+                        {% if perms.base.change_shiftrequest or request.user|is_reportingmanager %}
+                        <div class="col-12 col-sm-12 col-md-12 col-lg-6 oh-card-dashboard--moveable dashboardChart"
+                            id="shiftRequestApprove">
+                            <div class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent"
+                                style="height:425px">
+                                <div class="oh-card-dashboard__header oh-card-dashboard__header--divider">
+                                    <span class="oh-card-dashboard__title">{% trans "Shift Requests To Approve" %}</span>
+                                    <span class="float-end chart_close_button " role="button"
+                                        data-chart="shift_request_approve"
+                                        hx-post="{% url 'dashboard-components-toggle' %}?chart_id=shift_request_approve"
+                                        hx-target="#shiftRequestApprove" hx-swap="outerHTML">
+                                        <i class="material-icons fw-lighter fs-5">close</i>
+                                    </span>
+                                </div>
+                                <div class=" oh-card-dashboard__body" id="shiftRequestApproveBody"  style="height:80%">
+                                    <div class="oh-sticky-table h-100" hx-get="{% url 'dashboard-shift-request' %}" hx-trigger="load" style="border: none;">
+                                    </div>
+                                    {% comment %} {% include "request_and_approve/shift_request.html" %} {% endcomment %}
+                                </div>
+                            </div>
+                        </div>
+                        {% endif %}
+                        {% endif %}
+                        {% if not 'work_type_request_approve' in charts %}
+                        {% if perms.base.change_worktyperequest or request.user|is_reportingmanager %}
+                        <div class="col-12 col-sm-12 col-md-12 col-lg-6 oh-card-dashboard--moveable dashboardChart"
+                            id="WorkTypeRequestApprove">
+                            <div class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent"
+                                style="height:425px">
+                                <div class="oh-card-dashboard__header oh-card-dashboard__header--divider">
+                                    <span class="oh-card-dashboard__title">{% trans "Work Type Requests To Approve" %}</span>
+                                    <span class="float-end chart_close_button " role="button"
+                                        data-chart="work_type_request_approve"
+                                        hx-post="{% url 'dashboard-components-toggle' %}?chart_id=work_type_request_approve"
+                                        hx-target="#WorkTypeRequestApprove" hx-swap="outerHTML">
+                                        <i class="material-icons fw-lighter fs-5">close</i>
+                                    </span>
+                                </div>
+
+                                <div class=" oh-card-dashboard__body" id="WorkTypeRequestApproveBody"  style="height:80%">
+                                    <div class="oh-sticky-table h-100" hx-get="{% url 'dashboard-work-type-request' %}" hx-trigger="load" style="border: none;">
+                                    </div>
+                                    {% comment %} {% include "request_and_approve/work_type_request.html" %} {% endcomment %}
+                                </div>
+                            </div>
+                        </div>
+                        {% endif %}
+                        {% endif %}
+                        {% if "attendance"|app_installed and not 'overtime_approve' in charts %}
+                            {% if perms.attendance.change_attendance or request.user|is_reportingmanager %}
+                                    <div class="col-12 col-sm-12 col-md-12 col-lg-6 oh-card-dashboard--moveable dashboardChart" id="OTApprove">
+                                        <div class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent"
+                                        style="height:425px">
+                                        <div class="oh-card-dashboard__header oh-card-dashboard__header--divider">
+                                            <span class="oh-card-dashboard__title">{% trans "Overtime To Approve" %}</span>
+                                            <span class="float-end chart_close_button " role="button" data-chart="overtime_approve" hx-post="{% url 'dashboard-components-toggle' %}?chart_id=overtime_approve" hx-target="#OTApprove" hx-swap="outerHTML">
+                                                <i class="material-icons fw-lighter fs-5">close</i>
+                                              </span>
+                                        </div>
+
+                                        <div class=" oh-card-dashboard__body" id="OTApproveTarget"  style="height:80%">
+                                            <div class="oh-sticky-table h-100" hx-get="{% url 'dashboard-overtime-approve' %}" hx-trigger="load" style="border: none;">
+                                            </div>
+                                                {% comment %} {% include "request_and_approve/overtime_approve.html" %} {% endcomment %}
+                                            </div>
+                                        </div>
+                                    </div>
+                            {% endif %}
+                        {% endif %}
+                        {% if "attendance"|app_installed %}
+                                <script src="{% static 'cbv/attendance_activity.js' %}"></script>
+
+                            {% if not 'attendance_validate' in charts %}
+                                {% if perms.attendance.change_attendance or request.user|is_reportingmanager %}
+                                    <div class="col-12 col-sm-12 col-md-12 col-lg-6 oh-card-dashboard--moveable dashboardChart" id="AttendanceValidate">
+                                        <div class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent"
+                                        style="height:425px">
+                                        <div class="oh-card-dashboard__header oh-card-dashboard__header--divider">
+                                            <span class="oh-card-dashboard__title">{% trans "Attendance To Validate" %}</span>
+                                            <span class="float-end chart_close_button " role="button" data-chart="attendance_validate" hx-post="{% url 'dashboard-components-toggle' %}?chart_id=attendance_validate" hx-target="#AttendanceValidate" hx-swap="outerHTML">
+                                                <i class="material-icons fw-lighter fs-5">close</i>
+                                              </span>
+                                        </div>
+
+                                        <div class=" oh-card-dashboard__body" id="AttendanceValidateTarget"  style="height:80%">
+                                            <div class="oh-sticky-table h-100" hx-get="{% url 'dashboard-attendance-validate' %}" hx-trigger="load" style="border: none;">
+                                            </div>
+                                            {% comment %} {% include "request_and_approve/attendance_validate.html" %} {% endcomment %}
+                                        </div>
+                                    </div>
+                                </div>
+                                {% endif %}
+                            {% endif %}
+                        {% endif %}
+                        {% if "leave"|app_installed and not 'leave_request_approve' in charts %}
+                            {% if perms.leave.change_leaverequest or request.user|is_reportingmanager %}
+                            <div class="col-12 col-sm-12 col-md-12 col-lg-6 oh-card-dashboard--moveable dashboardChart"
+                                id="LeaveApprove">
+                                <div class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent"
+                                    style="height:425px">
+                                    <div class="oh-card-dashboard__header oh-card-dashboard__header--divider">
+                                        <span class="oh-card-dashboard__title">{% trans "Leave Requests To Approve" %}</span>
+                                        <span class="float-end chart_close_button " role="button"
+                                            data-chart="leave_request_approve"
+                                            hx-post="{% url 'dashboard-components-toggle' %}?chart_id=leave_request_approve"
+                                            hx-target="#LeaveApprove" hx-swap="outerHTML">
+                                            <i class="material-icons fw-lighter fs-5">close</i>
+                                        </span>
+                                    </div>
+                                    <div class="oh-card-dashboard__body" id="LeaveApproveBody"
+                                        style="height:80%">
+                                        <div class="oh-sticky-table h-100"  hx-get='{% url "leave-request-and-approve" %}' hx-trigger="load" style="border: none;">
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            {% endif %}
+                        {% endif %}
+                        {% if "leave"|app_installed and not 'leave_allocation_approve' in charts %}
+                            {% if perms.leave.change_leaveallocationrequest or request.user|is_reportingmanager %}
+                            <div class="col-12 col-sm-12 col-md-12 col-lg-6 oh-card-dashboard--moveable dashboardChart"
+                                id="LeaveAllocationApprove">
+                                <div class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent"
+                                    style="height:425px">
+                                    <div class="oh-card-dashboard__header oh-card-dashboard__header--divider">
+                                        <span class="oh-card-dashboard__title">{% trans "Leave Allocation Request To Approve" %}</span>
+                                        <span class="float-end chart_close_button " role="button"
+                                            data-chart="leave_allocation_approve"
+                                            hx-post="{% url 'dashboard-components-toggle' %}?chart_id=leave_allocation_approve"
+                                            hx-target="#LeaveAllocationApprove" hx-swap="outerHTML">
+                                            <i class="material-icons fw-lighter fs-5">close</i>
+                                        </span>
+                                    </div>
+
+                                    <div class=" oh-card-dashboard__body" id="LeaveAllocationApproveBody"  style="height:80%">
+                                            <div class="oh-sticky-table h-100" hx-get="{% url 'leave-allocation-approve' %}" hx-trigger="load" style="border: none;">
+                                            </div>
+
+                                        {% comment %} {% include "request_and_approve/leave_request_approve.html" %} {% endcomment %}
+                                    </div>
+                                </div>
+                            </div>
+                            {% endif %}
+                        {% endif %}
+                        {% if "pms"|app_installed and not 'feedback_answer' in charts %}
+                            <div class="col-12 col-sm-12 col-md-12 col-lg-6 oh-card-dashboard--moveable dashboardChart"
+                                id="feedbackAnswer">
+                                <div class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent"
+                                    style="height:425px">
+                                    <div class="oh-card-dashboard__header oh-card-dashboard__header--divider">
+                                        <span class="oh-card-dashboard__title">{% trans "Feedback To Answers" %}</span>
+                                        <span class="float-end chart_close_button " role="button"
+                                            data-chart="feedback_answer"
+                                            hx-post="{% url 'dashboard-components-toggle' %}?chart_id=feedback_answer"
+                                            hx-target="#feedbackAnswer" hx-swap="outerHTML">
+                                            <i class="material-icons fw-lighter fs-5">close</i>
+                                        </span>
+                                    </div>
+                                    <div class="oh-card-dashboard__body" id="feedbackAnswerBody"
+                                        hx-get="{% url 'dashboard-feedback-answer' %}" hx-trigger="load" style="height:80%">
+                                        {% comment %} {% include "request_and_approve/feedback_answer.html" %} {% endcomment %}
+                                    </div>
+                                </div>
+                            </div>
+                        {% endif %}
+                        {% if "asset"|app_installed and not 'asset_request_approve' in charts %}
+                            {% if perms.asset.change_assetrequest or request.user|is_reportingmanager %}
+                            <div class="col-12 col-sm-12 col-md-12 col-lg-6 oh-card-dashboard--moveable dashboardChart"
+                                id="assetRequestApprove">
+                                <div class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent"
+                                    style="height:425px">
+                                    <div class="oh-card-dashboard__header oh-card-dashboard__header--divider">
+                                        <span class="oh-card-dashboard__title">{% trans "Asset Requests To Approve" %}</span>
+                                        <span class="float-end chart_close_button " role="button"
+                                            data-chart="asset_request_approve"
+                                            hx-post="{% url 'dashboard-components-toggle' %}?chart_id=asset_request_approve"
+                                            hx-target="#assetRequestApprove" hx-swap="outerHTML">
+                                            <i class="material-icons fw-lighter fs-5">close</i>
+                                        </span>
+                                    </div>
+                                    <div class="oh-card-dashboard__body" id="assetRequestApproveBody"
+                                        style="height:80%">
+                                        <div class="oh-sticky-table h-100"  hx-get='{% url "dashboard-asset-request-approve" %}' hx-trigger="load" style="border: none;">
+                                        </div>
+                                        {% comment %} {% include "request_and_approve/asset_requests_approve.html" %} {% endcomment %}
+                                    </div>
+                                </div>
+                            </div>
+                            {% endif %}
+                        {% endif %}
+                    </div>
                 </div>
             </div>
         </div>
@@ -207,7 +754,28 @@
                                 <ion-icon name="add-outline" class="m-0"></ion-icon>
                             </button>
                         </span>
+                        {% endif %}
+                    </div>
+
+                    <hr>
+
+                    <div class="oh-card-dashboard__body" hx-get="{% url 'announcement-list' %}" hx-trigger="load" id="announcementListCard">
+                        <div class="animated-background"></div>
+                    </div>
+                </div>
+                {% if "leave"|app_installed %}
+                    {% if perms.leave.view_leaverequest or request.user|is_reportingmanager %}
+                        <div class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent mb-3">
+                            <div class="oh-card-dashboard__header oh-card-dashboard__header--divider">
+                                <span class="oh-card-dashboard__title">{% trans "On Leave" %}</span>
+                            </div>
+                            <div class="oh-card-dashboard__body" hx-get="{% url 'employee-leave' %}" hx-trigger="load" style="height:300px;overflow-x: auto;">
+                                <div class="animated-background"></div>
+                            </div>
+                            {% comment %} <div class="oh-card-dashboard__body" hx-get="{% url 'employee-leave' %}" hx-trigger="load"></div> {% endcomment %}
+                        </div>
                     {% endif %}
+                {% endif %}
                 </div>
 
                 <hr>
diff --git a/templates/filter_country.js b/templates/filter_country.js
new file mode 100644
index 000000000..83cee0f0d
--- /dev/null
+++ b/templates/filter_country.js
@@ -0,0 +1,333 @@
+// Countries
+var country_arr = new Array("Afghanistan", "Albania", "Algeria", "American Samoa", "Angola", "Anguilla", "Antartica", "Antigua and Barbuda", "Argentina", "Armenia", "Aruba", "Ashmore and Cartier Island", "Australia", "Austria", "Azerbaijan", "Bahamas", "Bahrain", "Bangladesh", "Barbados", "Belarus", "Belgium", "Belize", "Benin", "Bermuda", "Bhutan", "Bolivia", "Bosnia and Herzegovina", "Botswana", "Brazil", "British Virgin Islands", "Brunei", "Bulgaria", "Burkina Faso", "Burma", "Burundi", "Cambodia", "Cameroon", "Canada", "Cape Verde", "Cayman Islands", "Central African Republic", "Chad", "Chile", "China", "Christmas Island", "Clipperton Island", "Cocos (Keeling) Islands", "Colombia", "Comoros", "Congo, Democratic Republic of the", "Congo, Republic of the", "Cook Islands", "Costa Rica", "Cote d'Ivoire", "Croatia", "Cuba", "Cyprus", "Czeck Republic", "Denmark", "Djibouti", "Dominica", "Dominican Republic", "Ecuador", "Egypt", "El Salvador", "Equatorial Guinea", "Eritrea", "Estonia", "Ethiopia", "Europa Island", "Falkland Islands (Islas Malvinas)", "Faroe Islands", "Fiji", "Finland", "France", "French Guiana", "French Polynesia", "French Southern and Antarctic Lands", "Gabon", "Gambia, The", "Gaza Strip", "Georgia", "Germany", "Ghana", "Gibraltar", "Glorioso Islands", "Greece", "Greenland", "Grenada", "Guadeloupe", "Guam", "Guatemala", "Guernsey", "Guinea", "Guinea-Bissau", "Guyana", "Haiti", "Heard Island and McDonald Islands", "Holy See (Vatican City)", "Honduras", "Hong Kong", "Howland Island", "Hungary", "Iceland", "India", "Indonesia", "Iran", "Iraq", "Ireland", "Ireland, Northern", "Israel", "Italy", "Jamaica", "Jan Mayen", "Japan", "Jarvis Island", "Jersey", "Johnston Atoll", "Jordan", "Juan de Nova Island", "Kazakhstan", "Kenya", "Kiribati", "Korea, North", "Korea, South", "Kuwait", "Kyrgyzstan", "Laos", "Latvia", "Lebanon", "Lesotho", "Liberia", "Libya", "Liechtenstein", "Lithuania", "Luxembourg", "Macau", "Macedonia, Former Yugoslav Republic of", "Madagascar", "Malawi", "Malaysia", "Maldives", "Mali", "Malta", "Man, Isle of", "Marshall Islands", "Martinique", "Mauritania", "Mauritius", "Mayotte", "Mexico", "Micronesia, Federated States of", "Midway Islands", "Moldova", "Monaco", "Mongolia", "Montserrat", "Morocco", "Mozambique", "Namibia", "Nauru", "Nepal", "Netherlands", "Netherlands Antilles", "New Caledonia", "New Zealand", "Nicaragua", "Niger", "Nigeria", "Niue", "Norfolk Island", "Northern Mariana Islands", "Norway", "Oman", "Pakistan", "Palau", "Panama", "Papua New Guinea", "Paraguay", "Peru", "Philippines", "Pitcaim Islands", "Poland", "Portugal", "Puerto Rico", "Qatar", "Reunion", "Romainia", "Russia", "Rwanda", "Saint Helena", "Saint Kitts and Nevis", "Saint Lucia", "Saint Pierre and Miquelon", "Saint Vincent and the Grenadines", "Samoa", "San Marino", "Sao Tome and Principe", "Saudi Arabia", "Scotland", "Senegal", "Seychelles", "Sierra Leone", "Singapore", "Slovakia", "Slovenia", "Solomon Islands", "Somalia", "South Africa", "South Georgia and South Sandwich Islands", "Spain", "Spratly Islands", "Sri Lanka", "Sudan", "Suriname", "Svalbard", "Swaziland", "Sweden", "Switzerland", "Syria", "Taiwan", "Tajikistan", "Tanzania", "Thailand", "Tobago", "Toga", "Tokelau", "Tonga", "Trinidad", "Tunisia", "Turkey", "Turkmenistan", "Tuvalu", "Uganda", "Ukraine", "United Arab Emirates", "United Kingdom", "Uruguay", "USA", "Uzbekistan", "Vanuatu", "Venezuela", "Vietnam", "Virgin Islands", "Wales", "Wallis and Futuna", "West Bank", "Western Sahara", "Yemen", "Yugoslavia", "Zambia", "Zimbabwe");
+
+// States
+var s_a = new Array();
+s_a[0] = "";
+s_a[1] = "Badakhshan|Badghis|Baghlan|Balkh|Bamian|Farah|Faryab|Ghazni|Ghowr|Helmand|Herat|Jowzjan|Kabol|Kandahar|Kapisa|Konar|Kondoz|Laghman|Lowgar|Nangarhar|Nimruz|Oruzgan|Paktia|Paktika|Parvan|Samangan|Sar-e Pol|Takhar|Vardak|Zabol";
+s_a[2] = "Berat|Bulqize|Delvine|Devoll (Bilisht)|Diber (Peshkopi)|Durres|Elbasan|Fier|Gjirokaster|Gramsh|Has (Krume)|Kavaje|Kolonje (Erseke)|Korce|Kruje|Kucove|Kukes|Kurbin|Lezhe|Librazhd|Lushnje|Malesi e Madhe (Koplik)|Mallakaster (Ballsh)|Mat (Burrel)|Mirdite (Rreshen)|Peqin|Permet|Pogradec|Puke|Sarande|Shkoder|Skrapar (Corovode)|Tepelene|Tirane (Tirana)|Tirane (Tirana)|Tropoje (Bajram Curri)|Vlore";
+s_a[3] = "Adrar|Ain Defla|Ain Temouchent|Alger|Annaba|Batna|Bechar|Bejaia|Biskra|Blida|Bordj Bou Arreridj|Bouira|Boumerdes|Chlef|Constantine|Djelfa|El Bayadh|El Oued|El Tarf|Ghardaia|Guelma|Illizi|Jijel|Khenchela|Laghouat|M'Sila|Mascara|Medea|Mila|Mostaganem|Naama|Oran|Ouargla|Oum el Bouaghi|Relizane|Saida|Setif|Sidi Bel Abbes|Skikda|Souk Ahras|Tamanghasset|Tebessa|Tiaret|Tindouf|Tipaza|Tissemsilt|Tizi Ouzou|Tlemcen";
+s_a[4] = "Eastern|Manu'a|Rose Island|Swains Island|Western";
+s_a[5] = "Andorra la Vella|Bengo|Benguela|Bie|Cabinda|Canillo|Cuando Cubango|Cuanza Norte|Cuanza Sul|Cunene|Encamp|Escaldes-Engordany|Huambo|Huila|La Massana|Luanda|Lunda Norte|Lunda Sul|Malanje|Moxico|Namibe|Ordino|Sant Julia de Loria|Uige|Zaire";
+s_a[6] = "Anguilla";
+s_a[7] = "Antartica";
+s_a[8] = "Barbuda|Redonda|Saint George|Saint John|Saint Mary|Saint Paul|Saint Peter|Saint Philip";
+s_a[9] = "Antartica e Islas del Atlantico Sur|Buenos Aires|Buenos Aires Capital Federal|Catamarca|Chaco|Chubut|Cordoba|Corrientes|Entre Rios|Formosa|Jujuy|La Pampa|La Rioja|Mendoza|Misiones|Neuquen|Rio Negro|Salta|San Juan|San Luis|Santa Cruz|Santa Fe|Santiago del Estero|Tierra del Fuego|Tucuman";
+s_a[10] = "Aragatsotn|Ararat|Armavir|Geghark'unik'|Kotayk'|Lorri|Shirak|Syunik'|Tavush|Vayots' Dzor|Yerevan";
+s_a[11] = "Aruba";
+s_a[12] = "Ashmore and Cartier Island";
+s_a[13] = "Australian Capital Territory|New South Wales|Northern Territory|Queensland|South Australia|Tasmania|Victoria|Western Australia";
+s_a[14] = "Burgenland|Kaernten|Niederoesterreich|Oberoesterreich|Salzburg|Steiermark|Tirol|Vorarlberg|Wien";
+s_a[15] = "Abseron Rayonu|Agcabadi Rayonu|Agdam Rayonu|Agdas Rayonu|Agstafa Rayonu|Agsu Rayonu|Ali Bayramli Sahari|Astara Rayonu|Baki Sahari|Balakan Rayonu|Barda Rayonu|Beylaqan Rayonu|Bilasuvar Rayonu|Cabrayil Rayonu|Calilabad Rayonu|Daskasan Rayonu|Davaci Rayonu|Fuzuli Rayonu|Gadabay Rayonu|Ganca Sahari|Goranboy Rayonu|Goycay Rayonu|Haciqabul Rayonu|Imisli Rayonu|Ismayilli Rayonu|Kalbacar Rayonu|Kurdamir Rayonu|Lacin Rayonu|Lankaran Rayonu|Lankaran Sahari|Lerik Rayonu|Masalli Rayonu|Mingacevir Sahari|Naftalan Sahari|Naxcivan Muxtar Respublikasi|Neftcala Rayonu|Oguz Rayonu|Qabala Rayonu|Qax Rayonu|Qazax Rayonu|Qobustan Rayonu|Quba Rayonu|Qubadli Rayonu|Qusar Rayonu|Saatli Rayonu|Sabirabad Rayonu|Saki Rayonu|Saki Sahari|Salyan Rayonu|Samaxi Rayonu|Samkir Rayonu|Samux Rayonu|Siyazan Rayonu|Sumqayit Sahari|Susa Rayonu|Susa Sahari|Tartar Rayonu|Tovuz Rayonu|Ucar Rayonu|Xacmaz Rayonu|Xankandi Sahari|Xanlar Rayonu|Xizi Rayonu|Xocali Rayonu|Xocavand Rayonu|Yardimli Rayonu|Yevlax Rayonu|Yevlax Sahari|Zangilan Rayonu|Zaqatala Rayonu|Zardab Rayonu";
+s_a[16] = "Acklins and Crooked Islands|Bimini|Cat Island|Exuma|Freeport|Fresh Creek|Governor's Harbour|Green Turtle Cay|Harbour Island|High Rock|Inagua|Kemps Bay|Long Island|Marsh Harbour|Mayaguana|New Providence|Nicholls Town and Berry Islands|Ragged Island|Rock Sound|San Salvador and Rum Cay|Sandy Point";
+s_a[17] = "Al Hadd|Al Manamah|Al Mintaqah al Gharbiyah|Al Mintaqah al Wusta|Al Mintaqah ash Shamaliyah|Al Muharraq|Ar Rifa' wa al Mintaqah al Janubiyah|Jidd Hafs|Juzur Hawar|Madinat 'Isa|Madinat Hamad|Sitrah";
+s_a[18] = "Barguna|Barisal|Bhola|Jhalokati|Patuakhali|Pirojpur|Bandarban|Brahmanbaria|Chandpur|Chittagong|Comilla|Cox's Bazar|Feni|Khagrachari|Lakshmipur|Noakhali|Rangamati|Dhaka|Faridpur|Gazipur|Gopalganj|Jamalpur|Kishoreganj|Madaripur|Manikganj|Munshiganj|Mymensingh|Narayanganj|Narsingdi|Netrokona|Rajbari|Shariatpur|Sherpur|Tangail|Bagerhat|Chuadanga|Jessore|Jhenaidah|Khulna|Kushtia|Magura|Meherpur|Narail|Satkhira|Bogra|Dinajpur|Gaibandha|Jaipurhat|Kurigram|Lalmonirhat|Naogaon|Natore|Nawabganj|Nilphamari|Pabna|Panchagarh|Rajshahi|Rangpur|Sirajganj|Thakurgaon|Habiganj|Maulvi bazar|Sunamganj|Sylhet";
+s_a[19] = "Bridgetown|Christ Church|Saint Andrew|Saint George|Saint James|Saint John|Saint Joseph|Saint Lucy|Saint Michael|Saint Peter|Saint Philip|Saint Thomas";
+s_a[20] = "Brestskaya (Brest)|Homyel'skaya (Homyel')|Horad Minsk|Hrodzyenskaya (Hrodna)|Mahilyowskaya (Mahilyow)|Minskaya|Vitsyebskaya (Vitsyebsk)";
+s_a[21] = "Antwerpen|Brabant Wallon|Brussels Capitol Region|Hainaut|Liege|Limburg|Luxembourg|Namur|Oost-Vlaanderen|Vlaams Brabant|West-Vlaanderen";
+s_a[22] = "Belize|Cayo|Corozal|Orange Walk|Stann Creek|Toledo";
+s_a[23] = "Alibori|Atakora|Atlantique|Borgou|Collines|Couffo|Donga|Littoral|Mono|Oueme|Plateau|Zou";
+s_a[24] = "Devonshire|Hamilton|Hamilton|Paget|Pembroke|Saint George|Saint Georges|Sandys|Smiths|Southampton|Warwick";
+s_a[25] = "Bumthang|Chhukha|Chirang|Daga|Geylegphug|Ha|Lhuntshi|Mongar|Paro|Pemagatsel|Punakha|Samchi|Samdrup Jongkhar|Shemgang|Tashigang|Thimphu|Tongsa|Wangdi Phodrang";
+s_a[26] = "Beni|Chuquisaca|Cochabamba|La Paz|Oruro|Pando|Potosi|Santa Cruz|Tarija";
+s_a[27] = "Federation of Bosnia and Herzegovina|Republika Srpska";
+s_a[28] = "Central|Chobe|Francistown|Gaborone|Ghanzi|Kgalagadi|Kgatleng|Kweneng|Lobatse|Ngamiland|North-East|Selebi-Pikwe|South-East|Southern";
+s_a[29] = "Acre|Alagoas|Amapa|Amazonas|Bahia|Ceara|Distrito Federal|Espirito Santo|Goias|Maranhao|Mato Grosso|Mato Grosso do Sul|Minas Gerais|Para|Paraiba|Parana|Pernambuco|Piaui|Rio de Janeiro|Rio Grande do Norte|Rio Grande do Sul|Rondonia|Roraima|Santa Catarina|Sao Paulo|Sergipe|Tocantins";
+s_a[30] = "Anegada|Jost Van Dyke|Tortola|Virgin Gorda";
+s_a[31] = "Belait|Brunei and Muara|Temburong|Tutong";
+s_a[32] = "Blagoevgrad|Burgas|Dobrich|Gabrovo|Khaskovo|Kurdzhali|Kyustendil|Lovech|Montana|Pazardzhik|Pernik|Pleven|Plovdiv|Razgrad|Ruse|Shumen|Silistra|Sliven|Smolyan|Sofiya|Sofiya-Grad|Stara Zagora|Turgovishte|Varna|Veliko Turnovo|Vidin|Vratsa|Yambol";
+s_a[33] = "Bale|Bam|Banwa|Bazega|Bougouriba|Boulgou|Boulkiemde|Comoe|Ganzourgou|Gnagna|Gourma|Houet|Ioba|Kadiogo|Kenedougou|Komandjari|Kompienga|Kossi|Koupelogo|Kouritenga|Kourweogo|Leraba|Loroum|Mouhoun|Nahouri|Namentenga|Naumbiel|Nayala|Oubritenga|Oudalan|Passore|Poni|Samentenga|Sanguie|Seno|Sissili|Soum|Sourou|Tapoa|Tuy|Yagha|Yatenga|Ziro|Zondomo|Zoundweogo";
+s_a[34] = "Ayeyarwady|Bago|Chin State|Kachin State|Kayah State|Kayin State|Magway|Mandalay|Mon State|Rakhine State|Sagaing|Shan State|Tanintharyi|Yangon";
+s_a[35] = "Bubanza|Bujumbura|Bururi|Cankuzo|Cibitoke|Gitega|Karuzi|Kayanza|Kirundo|Makamba|Muramvya|Muyinga|Mwaro|Ngozi|Rutana|Ruyigi";
+s_a[36] = "Banteay Mean Cheay|Batdambang|Kampong Cham|Kampong Chhnang|Kampong Spoe|Kampong Thum|Kampot|Kandal|Kaoh Kong|Keb|Kracheh|Mondol Kiri|Otdar Mean Cheay|Pailin|Phnum Penh|Pouthisat|Preah Seihanu (Sihanoukville)|Preah Vihear|Prey Veng|Rotanah Kiri|Siem Reab|Stoeng Treng|Svay Rieng|Takev";
+s_a[37] = "Adamaoua|Centre|Est|Extreme-Nord|Littoral|Nord|Nord-Ouest|Ouest|Sud|Sud-Ouest";
+s_a[38] = "Alberta|British Columbia|Manitoba|New Brunswick|Newfoundland|Northwest Territories|Nova Scotia|Nunavut|Ontario|Prince Edward Island|Quebec|Saskatchewan|Yukon Territory";
+s_a[39] = "Boa Vista|Brava|Maio|Mosteiros|Paul|Porto Novo|Praia|Ribeira Grande|Sal|Santa Catarina|Santa Cruz|Sao Domingos|Sao Filipe|Sao Nicolau|Sao Vicente|Tarrafal";
+s_a[40] = "Creek|Eastern|Midland|South Town|Spot Bay|Stake Bay|West End|Western";
+s_a[41] = "Bamingui-Bangoran|Bangui|Basse-Kotto|Gribingui|Haut-Mbomou|Haute-Kotto|Haute-Sangha|Kemo-Gribingui|Lobaye|Mbomou|Nana-Mambere|Ombella-Mpoko|Ouaka|Ouham|Ouham-Pende|Sangha|Vakaga";
+s_a[42] = "Batha|Biltine|Borkou-Ennedi-Tibesti|Chari-Baguirmi|Guera|Kanem|Lac|Logone Occidental|Logone Oriental|Mayo-Kebbi|Moyen-Chari|Ouaddai|Salamat|Tandjile";
+s_a[43] = "Aisen del General Carlos Ibanez del Campo|Antofagasta|Araucania|Atacama|Bio-Bio|Coquimbo|Libertador General Bernardo O'Higgins|Los Lagos|Magallanes y de la Antartica Chilena|Maule|Region Metropolitana (Santiago)|Tarapaca|Valparaiso";
+s_a[44] = "Anhui|Beijing|Chongqing|Fujian|Gansu|Guangdong|Guangxi|Guizhou|Hainan|Hebei|Heilongjiang|Henan|Hubei|Hunan|Jiangsu|Jiangxi|Jilin|Liaoning|Nei Mongol|Ningxia|Qinghai|Shaanxi|Shandong|Shanghai|Shanxi|Sichuan|Tianjin|Xinjiang|Xizang (Tibet)|Yunnan|Zhejiang";
+s_a[45] = "Christmas Island";
+s_a[46] = "Clipperton Island";
+s_a[47] = "Direction Island|Home Island|Horsburgh Island|North Keeling Island|South Island|West Island";
+s_a[48] = "Amazonas|Antioquia|Arauca|Atlantico|Bolivar|Boyaca|Caldas|Caqueta|Casanare|Cauca|Cesar|Choco|Cordoba|Cundinamarca|Distrito Capital de Santa Fe de Bogota|Guainia|Guaviare|Huila|La Guajira|Magdalena|Meta|Narino|Norte de Santander|Putumayo|Quindio|Risaralda|San Andres y Providencia|Santander|Sucre|Tolima|Valle del Cauca|Vaupes|Vichada";
+// <!-- -->
+s_a[49] = "Anjouan (Nzwani)|Domoni|Fomboni|Grande Comore (Njazidja)|Moheli (Mwali)|Moroni|Moutsamoudou";
+s_a[50] = "Bandundu|Bas-Congo|Equateur|Kasai-Occidental|Kasai-Oriental|Katanga|Kinshasa|Maniema|Nord-Kivu|Orientale|Sud-Kivu";
+s_a[51] = "Bouenza|Brazzaville|Cuvette|Kouilou|Lekoumou|Likouala|Niari|Plateaux|Pool|Sangha";
+s_a[52] = "Aitutaki|Atiu|Avarua|Mangaia|Manihiki|Manuae|Mauke|Mitiaro|Nassau Island|Palmerston|Penrhyn|Pukapuka|Rakahanga|Rarotonga|Suwarrow|Takutea";
+s_a[53] = "Alajuela|Cartago|Guanacaste|Heredia|Limon|Puntarenas|San Jose";
+s_a[54] = "Abengourou|Abidjan|Aboisso|Adiake'|Adzope|Agboville|Agnibilekrou|Ale'pe'|Bangolo|Beoumi|Biankouma|Bocanda|Bondoukou|Bongouanou|Bouafle|Bouake|Bouna|Boundiali|Dabakala|Dabon|Daloa|Danane|Daoukro|Dimbokro|Divo|Duekoue|Ferkessedougou|Gagnoa|Grand Bassam|Grand-Lahou|Guiglo|Issia|Jacqueville|Katiola|Korhogo|Lakota|Man|Mankono|Mbahiakro|Odienne|Oume|Sakassou|San-Pedro|Sassandra|Seguela|Sinfra|Soubre|Tabou|Tanda|Tiassale|Tiebissou|Tingrela|Touba|Toulepleu|Toumodi|Vavoua|Yamoussoukro|Zuenoula";
+s_a[55] = "Bjelovarsko-Bilogorska Zupanija|Brodsko-Posavska Zupanija|Dubrovacko-Neretvanska Zupanija|Istarska Zupanija|Karlovacka Zupanija|Koprivnicko-Krizevacka Zupanija|Krapinsko-Zagorska Zupanija|Licko-Senjska Zupanija|Medimurska Zupanija|Osjecko-Baranjska Zupanija|Pozesko-Slavonska Zupanija|Primorsko-Goranska Zupanija|Sibensko-Kninska Zupanija|Sisacko-Moslavacka Zupanija|Splitsko-Dalmatinska Zupanija|Varazdinska Zupanija|Viroviticko-Podravska Zupanija|Vukovarsko-Srijemska Zupanija|Zadarska Zupanija|Zagreb|Zagrebacka Zupanija";
+s_a[56] = "Camaguey|Ciego de Avila|Cienfuegos|Ciudad de La Habana|Granma|Guantanamo|Holguin|Isla de la Juventud|La Habana|Las Tunas|Matanzas|Pinar del Rio|Sancti Spiritus|Santiago de Cuba|Villa Clara";
+s_a[57] = "Famagusta|Kyrenia|Larnaca|Limassol|Nicosia|Paphos";
+s_a[58] = "Brnensky|Budejovicky|Jihlavsky|Karlovarsky|Kralovehradecky|Liberecky|Olomoucky|Ostravsky|Pardubicky|Plzensky|Praha|Stredocesky|Ustecky|Zlinsky";
+s_a[59] = "Arhus|Bornholm|Fredericksberg|Frederiksborg|Fyn|Kobenhavn|Kobenhavns|Nordjylland|Ribe|Ringkobing|Roskilde|Sonderjylland|Storstrom|Vejle|Vestsjalland|Viborg";
+s_a[60] = "'Ali Sabih|Dikhil|Djibouti|Obock|Tadjoura";
+s_a[61] = "Saint Andrew|Saint David|Saint George|Saint John|Saint Joseph|Saint Luke|Saint Mark|Saint Patrick|Saint Paul|Saint Peter";
+s_a[62] = "Azua|Baoruco|Barahona|Dajabon|Distrito Nacional|Duarte|El Seibo|Elias Pina|Espaillat|Hato Mayor|Independencia|La Altagracia|La Romana|La Vega|Maria Trinidad Sanchez|Monsenor Nouel|Monte Cristi|Monte Plata|Pedernales|Peravia|Puerto Plata|Salcedo|Samana|San Cristobal|San Juan|San Pedro de Macoris|Sanchez Ramirez|Santiago|Santiago Rodriguez|Valverde";
+// <!-- -->
+s_a[63] = "Azuay|Bolivar|Canar|Carchi|Chimborazo|Cotopaxi|El Oro|Esmeraldas|Galapagos|Guayas|Imbabura|Loja|Los Rios|Manabi|Morona-Santiago|Napo|Orellana|Pastaza|Pichincha|Sucumbios|Tungurahua|Zamora-Chinchipe";
+s_a[64] = "Ad Daqahliyah|Al Bahr al Ahmar|Al Buhayrah|Al Fayyum|Al Gharbiyah|Al Iskandariyah|Al Isma'iliyah|Al Jizah|Al Minufiyah|Al Minya|Al Qahirah|Al Qalyubiyah|Al Wadi al Jadid|As Suways|Ash Sharqiyah|Aswan|Asyut|Bani Suwayf|Bur Sa'id|Dumyat|Janub Sina'|Kafr ash Shaykh|Matruh|Qina|Shamal Sina'|Suhaj";
+s_a[65] = "Ahuachapan|Cabanas|Chalatenango|Cuscatlan|La Libertad|La Paz|La Union|Morazan|San Miguel|San Salvador|San Vicente|Santa Ana|Sonsonate|Usulutan";
+s_a[66] = "Annobon|Bioko Norte|Bioko Sur|Centro Sur|Kie-Ntem|Litoral|Wele-Nzas";
+s_a[67] = "Akale Guzay|Barka|Denkel|Hamasen|Sahil|Semhar|Senhit|Seraye";
+s_a[68] = "Harjumaa (Tallinn)|Hiiumaa (Kardla)|Ida-Virumaa (Johvi)|Jarvamaa (Paide)|Jogevamaa (Jogeva)|Laane-Virumaa (Rakvere)|Laanemaa (Haapsalu)|Parnumaa (Parnu)|Polvamaa (Polva)|Raplamaa (Rapla)|Saaremaa (Kuessaare)|Tartumaa (Tartu)|Valgamaa (Valga)|Viljandimaa (Viljandi)|Vorumaa (Voru)"
+s_a[69] = "Adis Abeba (Addis Ababa)|Afar|Amara|Dire Dawa|Gambela Hizboch|Hareri Hizb|Oromiya|Sumale|Tigray|YeDebub Biheroch Bihereseboch na Hizboch";
+s_a[70] = "Europa Island";
+s_a[71] = "Falkland Islands (Islas Malvinas)"
+s_a[72] = "Bordoy|Eysturoy|Mykines|Sandoy|Skuvoy|Streymoy|Suduroy|Tvoroyri|Vagar";
+s_a[73] = "Central|Eastern|Northern|Rotuma|Western";
+s_a[74] = "Aland|Etela-Suomen Laani|Ita-Suomen Laani|Lansi-Suomen Laani|Lappi|Oulun Laani";
+s_a[75] = "Alsace|Aquitaine|Auvergne|Basse-Normandie|Bourgogne|Bretagne|Centre|Champagne-Ardenne|Corse|Franche-Comte|Haute-Normandie|Ile-de-France|Languedoc-Roussillon|Limousin|Lorraine|Midi-Pyrenees|Nord-Pas-de-Calais|Pays de la Loire|Picardie|Poitou-Charentes|Provence-Alpes-Cote d'Azur|Rhone-Alpes";
+s_a[76] = "French Guiana";
+s_a[77] = "Archipel des Marquises|Archipel des Tuamotu|Archipel des Tubuai|Iles du Vent|Iles Sous-le-Vent";
+s_a[78] = "Adelie Land|Ile Crozet|Iles Kerguelen|Iles Saint-Paul et Amsterdam";
+s_a[79] = "Estuaire|Haut-Ogooue|Moyen-Ogooue|Ngounie|Nyanga|Ogooue-Ivindo|Ogooue-Lolo|Ogooue-Maritime|Woleu-Ntem";
+s_a[80] = "Banjul|Central River|Lower River|North Bank|Upper River|Western";
+s_a[81] = "Gaza Strip";
+s_a[82] = "Abashis|Abkhazia or Ap'khazet'is Avtonomiuri Respublika (Sokhumi)|Adigenis|Ajaria or Acharis Avtonomiuri Respublika (Bat'umi)|Akhalgoris|Akhalk'alak'is|Akhalts'ikhis|Akhmetis|Ambrolauris|Aspindzis|Baghdat'is|Bolnisis|Borjomis|Ch'khorotsqus|Ch'okhatauris|Chiat'ura|Dedop'listsqaros|Dmanisis|Dushet'is|Gardabanis|Gori|Goris|Gurjaanis|Javis|K'arelis|K'ut'aisi|Kaspis|Kharagaulis|Khashuris|Khobis|Khonis|Lagodekhis|Lanch'khut'is|Lentekhis|Marneulis|Martvilis|Mestiis|Mts'khet'is|Ninotsmindis|Onis|Ozurget'is|P'ot'i|Qazbegis|Qvarlis|Rust'avi|Sach'kheris|Sagarejos|Samtrediis|Senakis|Sighnaghis|T'bilisi|T'elavis|T'erjolis|T'et'ritsqaros|T'ianet'is|Tqibuli|Ts'ageris|Tsalenjikhis|Tsalkis|Tsqaltubo|Vanis|Zestap'onis|Zugdidi|Zugdidis";
+s_a[83] = "Baden-Wuerttemberg|Bayern|Berlin|Brandenburg|Bremen|Hamburg|Hessen|Mecklenburg-Vorpommern|Niedersachsen|Nordrhein-Westfalen|Rheinland-Pfalz|Saarland|Sachsen|Sachsen-Anhalt|Schleswig-Holstein|Thueringen";
+s_a[84] = "Ashanti|Brong-Ahafo|Central|Eastern|Greater Accra|Northern|Upper East|Upper West|Volta|Western";
+s_a[85] = "Gibraltar";
+s_a[86] = "Ile du Lys|Ile Glorieuse";
+s_a[87] = "Aitolia kai Akarnania|Akhaia|Argolis|Arkadhia|Arta|Attiki|Ayion Oros (Mt. Athos)|Dhodhekanisos|Drama|Evritania|Evros|Evvoia|Florina|Fokis|Fthiotis|Grevena|Ilia|Imathia|Ioannina|Irakleion|Kardhitsa|Kastoria|Kavala|Kefallinia|Kerkyra|Khalkidhiki|Khania|Khios|Kikladhes|Kilkis|Korinthia|Kozani|Lakonia|Larisa|Lasithi|Lesvos|Levkas|Magnisia|Messinia|Pella|Pieria|Preveza|Rethimni|Rodhopi|Samos|Serrai|Thesprotia|Thessaloniki|Trikala|Voiotia|Xanthi|Zakinthos";
+s_a[88] = "Avannaa (Nordgronland)|Kitaa (Vestgronland)|Tunu (Ostgronland)"
+s_a[89] = "Carriacou and Petit Martinique|Saint Andrew|Saint David|Saint George|Saint John|Saint Mark|Saint Patrick";
+s_a[90] = "Basse-Terre|Grande-Terre|Iles de la Petite Terre|Iles des Saintes|Marie-Galante";
+s_a[91] = "Guam";
+s_a[92] = "Alta Verapaz|Baja Verapaz|Chimaltenango|Chiquimula|El Progreso|Escuintla|Guatemala|Huehuetenango|Izabal|Jalapa|Jutiapa|Peten|Quetzaltenango|Quiche|Retalhuleu|Sacatepequez|San Marcos|Santa Rosa|Solola|Suchitepequez|Totonicapan|Zacapa";
+s_a[93] = "Castel|Forest|St. Andrew|St. Martin|St. Peter Port|St. Pierre du Bois|St. Sampson|St. Saviour|Torteval|Vale";
+s_a[94] = "Beyla|Boffa|Boke|Conakry|Coyah|Dabola|Dalaba|Dinguiraye|Dubreka|Faranah|Forecariah|Fria|Gaoual|Gueckedou|Kankan|Kerouane|Kindia|Kissidougou|Koubia|Koundara|Kouroussa|Labe|Lelouma|Lola|Macenta|Mali|Mamou|Mandiana|Nzerekore|Pita|Siguiri|Telimele|Tougue|Yomou";
+s_a[95] = "Bafata|Biombo|Bissau|Bolama-Bijagos|Cacheu|Gabu|Oio|Quinara|Tombali";
+s_a[96] = "Barima-Waini|Cuyuni-Mazaruni|Demerara-Mahaica|East Berbice-Corentyne|Essequibo Islands-West Demerara|Mahaica-Berbice|Pomeroon-Supenaam|Potaro-Siparuni|Upper Demerara-Berbice|Upper Takutu-Upper Essequibo";
+s_a[97] = "Artibonite|Centre|Grand'Anse|Nord|Nord-Est|Nord-Ouest|Ouest|Sud|Sud-Est";
+s_a[98] = "Heard Island and McDonald Islands";
+s_a[99] = "Holy See (Vatican City)"
+s_a[100] = "Atlantida|Choluteca|Colon|Comayagua|Copan|Cortes|El Paraiso|Francisco Morazan|Gracias a Dios|Intibuca|Islas de la Bahia|La Paz|Lempira|Ocotepeque|Olancho|Santa Barbara|Valle|Yoro";
+s_a[101] = "Hong Kong";
+s_a[102] = "Howland Island";
+s_a[103] = "Bacs-Kiskun|Baranya|Bekes|Bekescsaba|Borsod-Abauj-Zemplen|Budapest|Csongrad|Debrecen|Dunaujvaros|Eger|Fejer|Gyor|Gyor-Moson-Sopron|Hajdu-Bihar|Heves|Hodmezovasarhely|Jasz-Nagykun-Szolnok|Kaposvar|Kecskemet|Komarom-Esztergom|Miskolc|Nagykanizsa|Nograd|Nyiregyhaza|Pecs|Pest|Somogy|Sopron|Szabolcs-Szatmar-Bereg|Szeged|Szekesfehervar|Szolnok|Szombathely|Tatabanya|Tolna|Vas|Veszprem|Veszprem|Zala|Zalaegerszeg";
+s_a[104] = "Akranes|Akureyri|Arnessysla|Austur-Bardhastrandarsysla|Austur-Hunavatnssysla|Austur-Skaftafellssysla|Borgarfjardharsysla|Dalasysla|Eyjafjardharsysla|Gullbringusysla|Hafnarfjordhur|Husavik|Isafjordhur|Keflavik|Kjosarsysla|Kopavogur|Myrasysla|Neskaupstadhur|Nordhur-Isafjardharsysla|Nordhur-Mulasys-la|Nordhur-Thingeyjarsysla|Olafsfjordhur|Rangarvallasysla|Reykjavik|Saudharkrokur|Seydhisfjordhur|Siglufjordhur|Skagafjardharsysla|Snaefellsnes-og Hnappadalssysla|Strandasysla|Sudhur-Mulasysla|Sudhur-Thingeyjarsysla|Vesttmannaeyjar|Vestur-Bardhastrandarsysla|Vestur-Hunavatnssysla|Vestur-Isafjardharsysla|Vestur-Skaftafellssysla";
+s_a[105] = "Andaman and Nicobar Islands|Andhra Pradesh|Arunachal Pradesh|Assam|Bihar|Chandigarh|Chhattisgarh|Dadra and Nagar Haveli|Daman and Diu|Delhi|Goa|Gujarat|Haryana|Himachal Pradesh|Jammu and Kashmir|Jharkhand|Karnataka|Kerala|Lakshadweep|Madhya Pradesh|Maharashtra|Manipur|Meghalaya|Mizoram|Nagaland|Orissa|Pondicherry|Punjab|Rajasthan|Sikkim|Tamil Nadu|Tripura|Uttar Pradesh|Uttaranchal|West Bengal";
+s_a[106] = "Aceh|Bali|Banten|Bengkulu|East Timor|Gorontalo|Irian Jaya|Jakarta Raya|Jambi|Jawa Barat|Jawa Tengah|Jawa Timur|Kalimantan Barat|Kalimantan Selatan|Kalimantan Tengah|Kalimantan Timur|Kepulauan Bangka Belitung|Lampung|Maluku|Maluku Utara|Nusa Tenggara Barat|Nusa Tenggara Timur|Riau|Sulawesi Selatan|Sulawesi Tengah|Sulawesi Tenggara|Sulawesi Utara|Sumatera Barat|Sumatera Selatan|Sumatera Utara|Yogyakarta";
+s_a[107] = "Ardabil|Azarbayjan-e Gharbi|Azarbayjan-e Sharqi|Bushehr|Chahar Mahall va Bakhtiari|Esfahan|Fars|Gilan|Golestan|Hamadan|Hormozgan|Ilam|Kerman|Kermanshah|Khorasan|Khuzestan|Kohgiluyeh va Buyer Ahmad|Kordestan|Lorestan|Markazi|Mazandaran|Qazvin|Qom|Semnan|Sistan va Baluchestan|Tehran|Yazd|Zanjan";
+s_a[108] = "Al Anbar|Al Basrah|Al Muthanna|Al Qadisiyah|An Najaf|Arbil|As Sulaymaniyah|At Ta'mim|Babil|Baghdad|Dahuk|Dhi Qar|Diyala|Karbala'|Maysan|Ninawa|Salah ad Din|Wasit";
+s_a[109] = "Carlow|Cavan|Clare|Cork|Donegal|Dublin|Galway|Kerry|Kildare|Kilkenny|Laois|Leitrim|Limerick|Longford|Louth|Mayo|Meath|Monaghan|Offaly|Roscommon|Sligo|Tipperary|Waterford|Westmeath|Wexford|Wicklow";
+s_a[110] = "Antrim|Ards|Armagh|Ballymena|Ballymoney|Banbridge|Belfast|Carrickfergus|Castlereagh|Coleraine|Cookstown|Craigavon|Derry|Down|Dungannon|Fermanagh|Larne|Limavady|Lisburn|Magherafelt|Moyle|Newry and Mourne|Newtownabbey|North Down|Omagh|Strabane";
+s_a[111] = "Central|Haifa|Jerusalem|Northern|Southern|Tel Aviv";
+s_a[112] = "Abruzzo|Basilicata|Calabria|Campania|Emilia-Romagna|Friuli-Venezia Giulia|Lazio|Liguria|Lombardia|Marche|Molise|Piemonte|Puglia|Sardegna|Sicilia|Toscana|Trentino-Alto Adige|Umbria|Valle d'Aosta|Veneto";
+s_a[113] = "Clarendon|Hanover|Kingston|Manchester|Portland|Saint Andrew|Saint Ann|Saint Catherine|Saint Elizabeth|Saint James|Saint Mary|Saint Thomas|Trelawny|Westmoreland";
+s_a[114] = "Jan Mayen";
+s_a[115] = "Aichi|Akita|Aomori|Chiba|Ehime|Fukui|Fukuoka|Fukushima|Gifu|Gumma|Hiroshima|Hokkaido|Hyogo|Ibaraki|Ishikawa|Iwate|Kagawa|Kagoshima|Kanagawa|Kochi|Kumamoto|Kyoto|Mie|Miyagi|Miyazaki|Nagano|Nagasaki|Nara|Niigata|Oita|Okayama|Okinawa|Osaka|Saga|Saitama|Shiga|Shimane|Shizuoka|Tochigi|Tokushima|Tokyo|Tottori|Toyama|Wakayama|Yamagata|Yamaguchi|Yamanashi";
+s_a[116] = "Jarvis Island";
+s_a[117] = "Jersey";
+s_a[118] = "Johnston Atoll";
+s_a[119] = "'Amman|Ajlun|Al 'Aqabah|Al Balqa'|Al Karak|Al Mafraq|At Tafilah|Az Zarqa'|Irbid|Jarash|Ma'an|Madaba";
+s_a[120] = "Juan de Nova Island";
+s_a[121] = "Almaty|Aqmola|Aqtobe|Astana|Atyrau|Batys Qazaqstan|Bayqongyr|Mangghystau|Ongtustik Qazaqstan|Pavlodar|Qaraghandy|Qostanay|Qyzylorda|Shyghys Qazaqstan|Soltustik Qazaqstan|Zhambyl";
+s_a[122] = "Central|Coast|Eastern|Nairobi Area|North Eastern|Nyanza|Rift Valley|Western";
+s_a[123] = "Abaiang|Abemama|Aranuka|Arorae|Banaba|Banaba|Beru|Butaritari|Central Gilberts|Gilbert Islands|Kanton|Kiritimati|Kuria|Line Islands|Line Islands|Maiana|Makin|Marakei|Nikunau|Nonouti|Northern Gilberts|Onotoa|Phoenix Islands|Southern Gilberts|Tabiteuea|Tabuaeran|Tamana|Tarawa|Tarawa|Teraina";
+s_a[124] = "Chagang-do (Chagang Province)|Hamgyong-bukto (North Hamgyong Province)|Hamgyong-namdo (South Hamgyong Province)|Hwanghae-bukto (North Hwanghae Province)|Hwanghae-namdo (South Hwanghae Province)|Kaesong-si (Kaesong City)|Kangwon-do (Kangwon Province)|Namp'o-si (Namp'o City)|P'yongan-bukto (North P'yongan Province)|P'yongan-namdo (South P'yongan Province)|P'yongyang-si (P'yongyang City)|Yanggang-do (Yanggang Province)"
+s_a[125] = "Ch'ungch'ong-bukto|Ch'ungch'ong-namdo|Cheju-do|Cholla-bukto|Cholla-namdo|Inch'on-gwangyoksi|Kangwon-do|Kwangju-gwangyoksi|Kyonggi-do|Kyongsang-bukto|Kyongsang-namdo|Pusan-gwangyoksi|Soul-t'ukpyolsi|Taegu-gwangyoksi|Taejon-gwangyoksi|Ulsan-gwangyoksi";
+s_a[126] = "Al 'Asimah|Al Ahmadi|Al Farwaniyah|Al Jahra'|Hawalli";
+s_a[127] = "Batken Oblasty|Bishkek Shaary|Chuy Oblasty (Bishkek)|Jalal-Abad Oblasty|Naryn Oblasty|Osh Oblasty|Talas Oblasty|Ysyk-Kol Oblasty (Karakol)"
+s_a[128] = "Attapu|Bokeo|Bolikhamxai|Champasak|Houaphan|Khammouan|Louangnamtha|Louangphabang|Oudomxai|Phongsali|Salavan|Savannakhet|Viangchan|Viangchan|Xaignabouli|Xaisomboun|Xekong|Xiangkhoang";
+s_a[129] = "Aizkraukles Rajons|Aluksnes Rajons|Balvu Rajons|Bauskas Rajons|Cesu Rajons|Daugavpils|Daugavpils Rajons|Dobeles Rajons|Gulbenes Rajons|Jekabpils Rajons|Jelgava|Jelgavas Rajons|Jurmala|Kraslavas Rajons|Kuldigas Rajons|Leipaja|Liepajas Rajons|Limbazu Rajons|Ludzas Rajons|Madonas Rajons|Ogres Rajons|Preilu Rajons|Rezekne|Rezeknes Rajons|Riga|Rigas Rajons|Saldus Rajons|Talsu Rajons|Tukuma Rajons|Valkas Rajons|Valmieras Rajons|Ventspils|Ventspils Rajons";
+s_a[130] = "Beyrouth|Ech Chimal|Ej Jnoub|El Bekaa|Jabal Loubnane";
+s_a[131] = "Berea|Butha-Buthe|Leribe|Mafeteng|Maseru|Mohales Hoek|Mokhotlong|Qacha's Nek|Quthing|Thaba-Tseka";
+s_a[132] = "Bomi|Bong|Grand Bassa|Grand Cape Mount|Grand Gedeh|Grand Kru|Lofa|Margibi|Maryland|Montserrado|Nimba|River Cess|Sinoe";
+s_a[133] = "Ajdabiya|Al 'Aziziyah|Al Fatih|Al Jabal al Akhdar|Al Jufrah|Al Khums|Al Kufrah|An Nuqat al Khams|Ash Shati'|Awbari|Az Zawiyah|Banghazi|Darnah|Ghadamis|Gharyan|Misratah|Murzuq|Sabha|Sawfajjin|Surt|Tarabulus|Tarhunah|Tubruq|Yafran|Zlitan";
+s_a[134] = "Balzers|Eschen|Gamprin|Mauren|Planken|Ruggell|Schaan|Schellenberg|Triesen|Triesenberg|Vaduz";
+s_a[135] = "Akmenes Rajonas|Alytaus Rajonas|Alytus|Anyksciu Rajonas|Birstonas|Birzu Rajonas|Druskininkai|Ignalinos Rajonas|Jonavos Rajonas|Joniskio Rajonas|Jurbarko Rajonas|Kaisiadoriu Rajonas|Kaunas|Kauno Rajonas|Kedainiu Rajonas|Kelmes Rajonas|Klaipeda|Klaipedos Rajonas|Kretingos Rajonas|Kupiskio Rajonas|Lazdiju Rajonas|Marijampole|Marijampoles Rajonas|Mazeikiu Rajonas|Moletu Rajonas|Neringa Pakruojo Rajonas|Palanga|Panevezio Rajonas|Panevezys|Pasvalio Rajonas|Plunges Rajonas|Prienu Rajonas|Radviliskio Rajonas|Raseiniu Rajonas|Rokiskio Rajonas|Sakiu Rajonas|Salcininku Rajonas|Siauliai|Siauliu Rajonas|Silales Rajonas|Silutes Rajonas|Sirvintu Rajonas|Skuodo Rajonas|Svencioniu Rajonas|Taurages Rajonas|Telsiu Rajonas|Traku Rajonas|Ukmerges Rajonas|Utenos Rajonas|Varenos Rajonas|Vilkaviskio Rajonas|Vilniaus Rajonas|Vilnius|Zarasu Rajonas";
+s_a[136] = "Diekirch|Grevenmacher|Luxembourg";
+s_a[137] = "Macau";
+s_a[138] = "Aracinovo|Bac|Belcista|Berovo|Bistrica|Bitola|Blatec|Bogdanci|Bogomila|Bogovinje|Bosilovo|Brvenica|Cair (Skopje)|Capari|Caska|Cegrane|Centar (Skopje)|Centar Zupa|Cesinovo|Cucer-Sandevo|Debar|Delcevo|Delogozdi|Demir Hisar|Demir Kapija|Dobrusevo|Dolna Banjica|Dolneni|Dorce Petrov (Skopje)|Drugovo|Dzepciste|Gazi Baba (Skopje)|Gevgelija|Gostivar|Gradsko|Ilinden|Izvor|Jegunovce|Kamenjane|Karbinci|Karpos (Skopje)|Kavadarci|Kicevo|Kisela Voda (Skopje)|Klecevce|Kocani|Konce|Kondovo|Konopiste|Kosel|Kratovo|Kriva Palanka|Krivogastani|Krusevo|Kuklis|Kukurecani|Kumanovo|Labunista|Lipkovo|Lozovo|Lukovo|Makedonska Kamenica|Makedonski Brod|Mavrovi Anovi|Meseista|Miravci|Mogila|Murtino|Negotino|Negotino-Poloska|Novaci|Novo Selo|Oblesevo|Ohrid|Orasac|Orizari|Oslomej|Pehcevo|Petrovec|Plasnia|Podares|Prilep|Probistip|Radovis|Rankovce|Resen|Rosoman|Rostusa|Samokov|Saraj|Sipkovica|Sopiste|Sopotnika|Srbinovo|Star Dojran|Staravina|Staro Nagoricane|Stip|Struga|Strumica|Studenicani|Suto Orizari (Skopje)|Sveti Nikole|Tearce|Tetovo|Topolcani|Valandovo|Vasilevo|Veles|Velesta|Vevcani|Vinica|Vitoliste|Vranestica|Vrapciste|Vratnica|Vrutok|Zajas|Zelenikovo|Zileno|Zitose|Zletovo|Zrnovci";
+s_a[139] = "Antananarivo|Antsiranana|Fianarantsoa|Mahajanga|Toamasina|Toliara";
+s_a[140] = "Balaka|Blantyre|Chikwawa|Chiradzulu|Chitipa|Dedza|Dowa|Karonga|Kasungu|Likoma|Lilongwe|Machinga (Kasupe)|Mangochi|Mchinji|Mulanje|Mwanza|Mzimba|Nkhata Bay|Nkhotakota|Nsanje|Ntcheu|Ntchisi|Phalombe|Rumphi|Salima|Thyolo|Zomba";
+s_a[141] = "Johor|Kedah|Kelantan|Labuan|Melaka|Negeri Sembilan|Pahang|Perak|Perlis|Pulau Pinang|Sabah|Sarawak|Selangor|Terengganu|Wilayah Persekutuan";
+s_a[142] = "Alifu|Baa|Dhaalu|Faafu|Gaafu Alifu|Gaafu Dhaalu|Gnaviyani|Haa Alifu|Haa Dhaalu|Kaafu|Laamu|Lhaviyani|Maale|Meemu|Noonu|Raa|Seenu|Shaviyani|Thaa|Vaavu";
+s_a[143] = "Gao|Kayes|Kidal|Koulikoro|Mopti|Segou|Sikasso|Tombouctou";
+s_a[144] = "Valletta";
+s_a[145] = "Man, Isle of";
+s_a[146] = "Ailinginae|Ailinglaplap|Ailuk|Arno|Aur|Bikar|Bikini|Bokak|Ebon|Enewetak|Erikub|Jabat|Jaluit|Jemo|Kili|Kwajalein|Lae|Lib|Likiep|Majuro|Maloelap|Mejit|Mili|Namorik|Namu|Rongelap|Rongrik|Toke|Ujae|Ujelang|Utirik|Wotho|Wotje";
+s_a[147] = "Martinique";
+s_a[148] = "Adrar|Assaba|Brakna|Dakhlet Nouadhibou|Gorgol|Guidimaka|Hodh Ech Chargui|Hodh El Gharbi|Inchiri|Nouakchott|Tagant|Tiris Zemmour|Trarza";
+s_a[149] = "Agalega Islands|Black River|Cargados Carajos Shoals|Flacq|Grand Port|Moka|Pamplemousses|Plaines Wilhems|Port Louis|Riviere du Rempart|Rodrigues|Savanne";
+s_a[150] = "Mayotte";
+s_a[151] = "Aguascalientes|Baja California|Baja California Sur|Campeche|Chiapas|Chihuahua|Coahuila de Zaragoza|Colima|Distrito Federal|Durango|Guanajuato|Guerrero|Hidalgo|Jalisco|Mexico|Michoacan de Ocampo|Morelos|Nayarit|Nuevo Leon|Oaxaca|Puebla|Queretaro de Arteaga|Quintana Roo|San Luis Potosi|Sinaloa|Sonora|Tabasco|Tamaulipas|Tlaxcala|Veracruz-Llave|Yucatan|Zacatecas";
+s_a[152] = "Chuuk (Truk)|Kosrae|Pohnpei|Yap";
+s_a[153] = "Midway Islands";
+s_a[154] = "Balti|Cahul|Chisinau|Chisinau|Dubasari|Edinet|Gagauzia|Lapusna|Orhei|Soroca|Tighina|Ungheni";
+s_a[155] = "Fontvieille|La Condamine|Monaco-Ville|Monte-Carlo";
+s_a[156] = "Arhangay|Bayan-Olgiy|Bayanhongor|Bulgan|Darhan|Dornod|Dornogovi|Dundgovi|Dzavhan|Erdenet|Govi-Altay|Hentiy|Hovd|Hovsgol|Omnogovi|Ovorhangay|Selenge|Suhbaatar|Tov|Ulaanbaatar|Uvs";
+s_a[157] = "Saint Anthony|Saint Georges|Saint Peter's";
+s_a[158] = "Agadir|Al Hoceima|Azilal|Ben Slimane|Beni Mellal|Boulemane|Casablanca|Chaouen|El Jadida|El Kelaa des Srarhna|Er Rachidia|Essaouira|Fes|Figuig|Guelmim|Ifrane|Kenitra|Khemisset|Khenifra|Khouribga|Laayoune|Larache|Marrakech|Meknes|Nador|Ouarzazate|Oujda|Rabat-Sale|Safi|Settat|Sidi Kacem|Tan-Tan|Tanger|Taounate|Taroudannt|Tata|Taza|Tetouan|Tiznit";
+s_a[159] = "Cabo Delgado|Gaza|Inhambane|Manica|Maputo|Nampula|Niassa|Sofala|Tete|Zambezia";
+s_a[160] = "Caprivi|Erongo|Hardap|Karas|Khomas|Kunene|Ohangwena|Okavango|Omaheke|Omusati|Oshana|Oshikoto|Otjozondjupa";
+s_a[161] = "Aiwo|Anabar|Anetan|Anibare|Baiti|Boe|Buada|Denigomodu|Ewa|Ijuw|Meneng|Nibok|Uaboe|Yaren";
+s_a[162] = "Bagmati|Bheri|Dhawalagiri|Gandaki|Janakpur|Karnali|Kosi|Lumbini|Mahakali|Mechi|Narayani|Rapti|Sagarmatha|Seti";
+s_a[163] = "Drenthe|Flevoland|Friesland|Gelderland|Groningen|Limburg|Noord-Brabant|Noord-Holland|Overijssel|Utrecht|Zeeland|Zuid-Holland";
+s_a[164] = "Netherlands Antilles";
+s_a[165] = "Iles Loyaute|Nord|Sud";
+s_a[166] = "Akaroa|Amuri|Ashburton|Bay of Islands|Bruce|Buller|Chatham Islands|Cheviot|Clifton|Clutha|Cook|Dannevirke|Egmont|Eketahuna|Ellesmere|Eltham|Eyre|Featherston|Franklin|Golden Bay|Great Barrier Island|Grey|Hauraki Plains|Hawera|Hawke's Bay|Heathcote|Hikurangi|Hobson|Hokianga|Horowhenua|Hurunui|Hutt|Inangahua|Inglewood|Kaikoura|Kairanga|Kiwitea|Lake|Mackenzie|Malvern|Manaia|Manawatu|Mangonui|Maniototo|Marlborough|Masterton|Matamata|Mount Herbert|Ohinemuri|Opotiki|Oroua|Otamatea|Otorohanga|Oxford|Pahiatua|Paparua|Patea|Piako|Pohangina|Raglan|Rangiora|Rangitikei|Rodney|Rotorua|Runanga|Saint Kilda|Silverpeaks|Southland|Stewart Island|Stratford|Strathallan|Taranaki|Taumarunui|Taupo|Tauranga|Thames-Coromandel|Tuapeka|Vincent|Waiapu|Waiheke|Waihemo|Waikato|Waikohu|Waimairi|Waimarino|Waimate|Waimate West|Waimea|Waipa|Waipawa|Waipukurau|Wairarapa South|Wairewa|Wairoa|Waitaki|Waitomo|Waitotara|Wallace|Wanganui|Waverley|Westland|Whakatane|Whangarei|Whangaroa|Woodville";
+s_a[167] = "Atlantico Norte|Atlantico Sur|Boaco|Carazo|Chinandega|Chontales|Esteli|Granada|Jinotega|Leon|Madriz|Managua|Masaya|Matagalpa|Nueva Segovia|Rio San Juan|Rivas";
+s_a[168] = "Agadez|Diffa|Dosso|Maradi|Niamey|Tahoua|Tillaberi|Zinder";
+s_a[169] = "Abia|Abuja Federal Capital Territory|Adamawa|Akwa Ibom|Anambra|Bauchi|Bayelsa|Benue|Borno|Cross River|Delta|Ebonyi|Edo|Ekiti|Enugu|Gombe|Imo|Jigawa|Kaduna|Kano|Katsina|Kebbi|Kogi|Kwara|Lagos|Nassarawa|Niger|Ogun|Ondo|Osun|Oyo|Plateau|Rivers|Sokoto|Taraba|Yobe|Zamfara";
+s_a[170] = "Niue";
+s_a[171] = "Norfolk Island";
+s_a[172] = "Northern Islands|Rota|Saipan|Tinian";
+s_a[173] = "Akershus|Aust-Agder|Buskerud|Finnmark|Hedmark|Hordaland|More og Romsdal|Nord-Trondelag|Nordland|Oppland|Oslo|Ostfold|Rogaland|Sogn og Fjordane|Sor-Trondelag|Telemark|Troms|Vest-Agder|Vestfold";
+s_a[174] = "Ad Dakhiliyah|Al Batinah|Al Wusta|Ash Sharqiyah|Az Zahirah|Masqat|Musandam|Zufar";
+s_a[175] = "Balochistan|Federally Administered Tribal Areas|Islamabad Capital Territory|North-West Frontier Province|Punjab|Sindh";
+s_a[176] = "Aimeliik|Airai|Angaur|Hatobohei|Kayangel|Koror|Melekeok|Ngaraard|Ngarchelong|Ngardmau|Ngatpang|Ngchesar|Ngeremlengui|Ngiwal|Palau Island|Peleliu|Sonsoral|Tobi";
+s_a[177] = "Bocas del Toro|Chiriqui|Cocle|Colon|Darien|Herrera|Los Santos|Panama|San Blas|Veraguas";
+s_a[178] = "Bougainville|Central|Chimbu|East New Britain|East Sepik|Eastern Highlands|Enga|Gulf|Madang|Manus|Milne Bay|Morobe|National Capital|New Ireland|Northern|Sandaun|Southern Highlands|West New Britain|Western|Western Highlands";
+s_a[179] = "Alto Paraguay|Alto Parana|Amambay|Asuncion (city)|Boqueron|Caaguazu|Caazapa|Canindeyu|Central|Concepcion|Cordillera|Guaira|Itapua|Misiones|Neembucu|Paraguari|Presidente Hayes|San Pedro";
+s_a[180] = "Amazonas|Ancash|Apurimac|Arequipa|Ayacucho|Cajamarca|Callao|Cusco|Huancavelica|Huanuco|Ica|Junin|La Libertad|Lambayeque|Lima|Loreto|Madre de Dios|Moquegua|Pasco|Piura|Puno|San Martin|Tacna|Tumbes|Ucayali";
+s_a[181] = "Abra|Agusan del Norte|Agusan del Sur|Aklan|Albay|Angeles|Antique|Aurora|Bacolod|Bago|Baguio|Bais|Basilan|Basilan City|Bataan|Batanes|Batangas|Batangas City|Benguet|Bohol|Bukidnon|Bulacan|Butuan|Cabanatuan|Cadiz|Cagayan|Cagayan de Oro|Calbayog|Caloocan|Camarines Norte|Camarines Sur|Camiguin|Canlaon|Capiz|Catanduanes|Cavite|Cavite City|Cebu|Cebu City|Cotabato|Dagupan|Danao|Dapitan|Davao City Davao|Davao del Sur|Davao Oriental|Dipolog|Dumaguete|Eastern Samar|General Santos|Gingoog|Ifugao|Iligan|Ilocos Norte|Ilocos Sur|Iloilo|Iloilo City|Iriga|Isabela|Kalinga-Apayao|La Carlota|La Union|Laguna|Lanao del Norte|Lanao del Sur|Laoag|Lapu-Lapu|Legaspi|Leyte|Lipa|Lucena|Maguindanao|Mandaue|Manila|Marawi|Marinduque|Masbate|Mindoro Occidental|Mindoro Oriental|Misamis Occidental|Misamis Oriental|Mountain|Naga|Negros Occidental|Negros Oriental|North Cotabato|Northern Samar|Nueva Ecija|Nueva Vizcaya|Olongapo|Ormoc|Oroquieta|Ozamis|Pagadian|Palawan|Palayan|Pampanga|Pangasinan|Pasay|Puerto Princesa|Quezon|Quezon City|Quirino|Rizal|Romblon|Roxas|Samar|San Carlos (in Negros Occidental)|San Carlos (in Pangasinan)|San Jose|San Pablo|Silay|Siquijor|Sorsogon|South Cotabato|Southern Leyte|Sultan Kudarat|Sulu|Surigao|Surigao del Norte|Surigao del Sur|Tacloban|Tagaytay|Tagbilaran|Tangub|Tarlac|Tawitawi|Toledo|Trece Martires|Zambales|Zamboanga|Zamboanga del Norte|Zamboanga del Sur";
+s_a[182] = "Pitcaim Islands";
+s_a[183] = "Dolnoslaskie|Kujawsko-Pomorskie|Lodzkie|Lubelskie|Lubuskie|Malopolskie|Mazowieckie|Opolskie|Podkarpackie|Podlaskie|Pomorskie|Slaskie|Swietokrzyskie|Warminsko-Mazurskie|Wielkopolskie|Zachodniopomorskie";
+s_a[184] = "Acores (Azores)|Aveiro|Beja|Braga|Braganca|Castelo Branco|Coimbra|Evora|Faro|Guarda|Leiria|Lisboa|Madeira|Portalegre|Porto|Santarem|Setubal|Viana do Castelo|Vila Real|Viseu";
+s_a[185] = "Adjuntas|Aguada|Aguadilla|Aguas Buenas|Aibonito|Anasco|Arecibo|Arroyo|Barceloneta|Barranquitas|Bayamon|Cabo Rojo|Caguas|Camuy|Canovanas|Carolina|Catano|Cayey|Ceiba|Ciales|Cidra|Coamo|Comerio|Corozal|Culebra|Dorado|Fajardo|Florida|Guanica|Guayama|Guayanilla|Guaynabo|Gurabo|Hatillo|Hormigueros|Humacao|Isabela|Jayuya|Juana Diaz|Juncos|Lajas|Lares|Las Marias|Las Piedras|Loiza|Luquillo|Manati|Maricao|Maunabo|Mayaguez|Moca|Morovis|Naguabo|Naranjito|Orocovis|Patillas|Penuelas|Ponce|Quebradillas|Rincon|Rio Grande|Sabana Grande|Salinas|San German|San Juan|San Lorenzo|San Sebastian|Santa Isabel|Toa Alta|Toa Baja|Trujillo Alto|Utuado|Vega Alta|Vega Baja|Vieques|Villalba|Yabucoa|Yauco";
+s_a[186] = "Ad Dawhah|Al Ghuwayriyah|Al Jumayliyah|Al Khawr|Al Wakrah|Ar Rayyan|Jarayan al Batinah|Madinat ash Shamal|Umm Salal";
+s_a[187] = "Reunion";
+s_a[188] = "Alba|Arad|Arges|Bacau|Bihor|Bistrita-Nasaud|Botosani|Braila|Brasov|Bucuresti|Buzau|Calarasi|Caras-Severin|Cluj|Constanta|Covasna|Dimbovita|Dolj|Galati|Giurgiu|Gorj|Harghita|Hunedoara|Ialomita|Iasi|Maramures|Mehedinti|Mures|Neamt|Olt|Prahova|Salaj|Satu Mare|Sibiu|Suceava|Teleorman|Timis|Tulcea|Vaslui|Vilcea|Vrancea";
+s_a[189] = "Adygeya (Maykop)|Aginskiy Buryatskiy (Aginskoye)|Altay (Gorno-Altaysk)|Altayskiy (Barnaul)|Amurskaya (Blagoveshchensk)|Arkhangel'skaya|Astrakhanskaya|Bashkortostan (Ufa)|Belgorodskaya|Bryanskaya|Buryatiya (Ulan-Ude)|Chechnya (Groznyy)|Chelyabinskaya|Chitinskaya|Chukotskiy (Anadyr')|Chuvashiya (Cheboksary)|Dagestan (Makhachkala)|Evenkiyskiy (Tura)|Ingushetiya (Nazran')|Irkutskaya|Ivanovskaya|Kabardino-Balkariya (Nal'chik)|Kaliningradskaya|Kalmykiya (Elista)|Kaluzhskaya|Kamchatskaya (Petropavlovsk-Kamchatskiy)|Karachayevo-Cherkesiya (Cherkessk)|Kareliya (Petrozavodsk)|Kemerovskaya|Khabarovskiy|Khakasiya (Abakan)|Khanty-Mansiyskiy (Khanty-Mansiysk)|Kirovskaya|Komi (Syktyvkar)|Komi-Permyatskiy (Kudymkar)|Koryakskiy (Palana)|Kostromskaya|Krasnodarskiy|Krasnoyarskiy|Kurganskaya|Kurskaya|Leningradskaya|Lipetskaya|Magadanskaya|Mariy-El (Yoshkar-Ola)|Mordoviya (Saransk)|Moskovskaya|Moskva (Moscow)|Murmanskaya|Nenetskiy (Nar'yan-Mar)|Nizhegorodskaya|Novgorodskaya|Novosibirskaya|Omskaya|Orenburgskaya|Orlovskaya (Orel)|Penzenskaya|Permskaya|Primorskiy (Vladivostok)|Pskovskaya|Rostovskaya|Ryazanskaya|Sakha (Yakutsk)|Sakhalinskaya (Yuzhno-Sakhalinsk)|Samarskaya|Sankt-Peterburg (Saint Petersburg)|Saratovskaya|Severnaya Osetiya-Alaniya [North Ossetia] (Vladikavkaz)|Smolenskaya|Stavropol'skiy|Sverdlovskaya (Yekaterinburg)|Tambovskaya|Tatarstan (Kazan')|Taymyrskiy (Dudinka)|Tomskaya|Tul'skaya|Tverskaya|Tyumenskaya|Tyva (Kyzyl)|Udmurtiya (Izhevsk)|Ul'yanovskaya|Ust'-Ordynskiy Buryatskiy (Ust'-Ordynskiy)|Vladimirskaya|Volgogradskaya|Vologodskaya|Voronezhskaya|Yamalo-Nenetskiy (Salekhard)|Yaroslavskaya|Yevreyskaya";
+s_a[190] = "Butare|Byumba|Cyangugu|Gikongoro|Gisenyi|Gitarama|Kibungo|Kibuye|Kigali Rurale|Kigali-ville|Ruhengeri|Umutara";
+s_a[191] = "Ascension|Saint Helena|Tristan da Cunha";
+s_a[192] = "Christ Church Nichola Town|Saint Anne Sandy Point|Saint George Basseterre|Saint George Gingerland|Saint James Windward|Saint John Capisterre|Saint John Figtree|Saint Mary Cayon|Saint Paul Capisterre|Saint Paul Charlestown|Saint Peter Basseterre|Saint Thomas Lowland|Saint Thomas Middle Island|Trinity Palmetto Point";
+s_a[193] = "Anse-la-Raye|Castries|Choiseul|Dauphin|Dennery|Gros Islet|Laborie|Micoud|Praslin|Soufriere|Vieux Fort";
+s_a[194] = "Miquelon|Saint Pierre";
+s_a[195] = "Charlotte|Grenadines|Saint Andrew|Saint David|Saint George|Saint Patrick";
+s_a[196] = "A'ana|Aiga-i-le-Tai|Atua|Fa'asaleleaga|Gaga'emauga|Gagaifomauga|Palauli|Satupa'itea|Tuamasaga|Va'a-o-Fonoti|Vaisigano";
+s_a[197] = "Acquaviva|Borgo Maggiore|Chiesanuova|Domagnano|Faetano|Fiorentino|Monte Giardino|San Marino|Serravalle";
+s_a[198] = "Principe|Sao Tome";
+s_a[199] = "'Asir|Al Bahah|Al Hudud ash Shamaliyah|Al Jawf|Al Madinah|Al Qasim|Ar Riyad|Ash Sharqiyah (Eastern Province)|Ha'il|Jizan|Makkah|Najran|Tabuk";
+s_a[200] = "Aberdeen City|Aberdeenshire|Angus|Argyll and Bute|City of Edinburgh|Clackmannanshire|Dumfries and Galloway|Dundee City|East Ayrshire|East Dunbartonshire|East Lothian|East Renfrewshire|Eilean Siar (Western Isles)|Falkirk|Fife|Glasgow City|Highland|Inverclyde|Midlothian|Moray|North Ayrshire|North Lanarkshire|Orkney Islands|Perth and Kinross|Renfrewshire|Shetland Islands|South Ayrshire|South Lanarkshire|Stirling|The Scottish Borders|West Dunbartonshire|West Lothian";
+s_a[201] = "Dakar|Diourbel|Fatick|Kaolack|Kolda|Louga|Saint-Louis|Tambacounda|Thies|Ziguinchor";
+s_a[202] = "Anse aux Pins|Anse Boileau|Anse Etoile|Anse Louis|Anse Royale|Baie Lazare|Baie Sainte Anne|Beau Vallon|Bel Air|Bel Ombre|Cascade|Glacis|Grand' Anse (on Mahe)|Grand' Anse (on Praslin)|La Digue|La Riviere Anglaise|Mont Buxton|Mont Fleuri|Plaisance|Pointe La Rue|Port Glaud|Saint Louis|Takamaka";
+s_a[203] = "Eastern|Northern|Southern|Western";
+s_a[204] = "Singapore";
+s_a[205] = "Banskobystricky|Bratislavsky|Kosicky|Nitriansky|Presovsky|Trenciansky|Trnavsky|Zilinsky";
+s_a[206] = "Ajdovscina|Beltinci|Bled|Bohinj|Borovnica|Bovec|Brda|Brezice|Brezovica|Cankova-Tisina|Celje|Cerklje na Gorenjskem|Cerknica|Cerkno|Crensovci|Crna na Koroskem|Crnomelj|Destrnik-Trnovska Vas|Divaca|Dobrepolje|Dobrova-Horjul-Polhov Gradec|Dol pri Ljubljani|Domzale|Dornava|Dravograd|Duplek|Gorenja Vas-Poljane|Gorisnica|Gornja Radgona|Gornji Grad|Gornji Petrovci|Grosuplje|Hodos Salovci|Hrastnik|Hrpelje-Kozina|Idrija|Ig|Ilirska Bistrica|Ivancna Gorica|Izola|Jesenice|Jursinci|Kamnik|Kanal|Kidricevo|Kobarid|Kobilje|Kocevje|Komen|Koper|Kozje|Kranj|Kranjska Gora|Krsko|Kungota|Kuzma|Lasko|Lenart|Lendava|Litija|Ljubljana|Ljubno|Ljutomer|Logatec|Loska Dolina|Loski Potok|Luce|Lukovica|Majsperk|Maribor|Medvode|Menges|Metlika|Mezica|Miren-Kostanjevica|Mislinja|Moravce|Moravske Toplice|Mozirje|Murska Sobota|Muta|Naklo|Nazarje|Nova Gorica|Novo Mesto|Odranci|Ormoz|Osilnica|Pesnica|Piran|Pivka|Podcetrtek|Podvelka-Ribnica|Postojna|Preddvor|Ptuj|Puconci|Race-Fram|Radece|Radenci|Radlje ob Dravi|Radovljica|Ravne-Prevalje|Ribnica|Rogasevci|Rogaska Slatina|Rogatec|Ruse|Semic|Sencur|Sentilj|Sentjernej|Sentjur pri Celju|Sevnica|Sezana|Skocjan|Skofja Loka|Skofljica|Slovenj Gradec|Slovenska Bistrica|Slovenske Konjice|Smarje pri Jelsah|Smartno ob Paki|Sostanj|Starse|Store|Sveti Jurij|Tolmin|Trbovlje|Trebnje|Trzic|Turnisce|Velenje|Velike Lasce|Videm|Vipava|Vitanje|Vodice|Vojnik|Vrhnika|Vuzenica|Zagorje ob Savi|Zalec|Zavrc|Zelezniki|Ziri|Zrece";
+s_a[207] = "Bellona|Central|Choiseul (Lauru)|Guadalcanal|Honiara|Isabel|Makira|Malaita|Rennell|Temotu|Western";
+s_a[208] = "Awdal|Bakool|Banaadir|Bari|Bay|Galguduud|Gedo|Hiiraan|Jubbada Dhexe|Jubbada Hoose|Mudug|Nugaal|Sanaag|Shabeellaha Dhexe|Shabeellaha Hoose|Sool|Togdheer|Woqooyi Galbeed";
+s_a[209] = "Eastern Cape|Free State|Gauteng|KwaZulu-Natal|Mpumalanga|North-West|Northern Cape|Northern Province|Western Cape";
+s_a[210] = "Bird Island|Bristol Island|Clerke Rocks|Montagu Island|Saunders Island|South Georgia|Southern Thule|Traversay Islands";
+s_a[211] = "Andalucia|Aragon|Asturias|Baleares (Balearic Islands)|Canarias (Canary Islands)|Cantabria|Castilla y Leon|Castilla-La Mancha|Cataluna|Ceuta|Communidad Valencian|Extremadura|Galicia|Islas Chafarinas|La Rioja|Madrid|Melilla|Murcia|Navarra|Pais Vasco (Basque Country)|Penon de Alhucemas|Penon de Velez de la Gomera";
+s_a[212] = "Spratly Islands";
+s_a[213] = "Central|Eastern|North Central|North Eastern|North Western|Northern|Sabaragamuwa|Southern|Uva|Western";
+s_a[214] = "A'ali an Nil|Al Bahr al Ahmar|Al Buhayrat|Al Jazirah|Al Khartum|Al Qadarif|Al Wahdah|An Nil al Abyad|An Nil al Azraq|Ash Shamaliyah|Bahr al Jabal|Gharb al Istiwa'iyah|Gharb Bahr al Ghazal|Gharb Darfur|Gharb Kurdufan|Janub Darfur|Janub Kurdufan|Junqali|Kassala|Nahr an Nil|Shamal Bahr al Ghazal|Shamal Darfur|Shamal Kurdufan|Sharq al Istiwa'iyah|Sinnar|Warab";
+s_a[215] = "Brokopondo|Commewijne|Coronie|Marowijne|Nickerie|Para|Paramaribo|Saramacca|Sipaliwini|Wanica";
+s_a[216] = "Barentsoya|Bjornoya|Edgeoya|Hopen|Kvitoya|Nordaustandet|Prins Karls Forland|Spitsbergen";
+s_a[217] = "Hhohho|Lubombo|Manzini|Shiselweni";
+s_a[218] = "Blekinge|Dalarnas|Gavleborgs|Gotlands|Hallands|Jamtlands|Jonkopings|Kalmar|Kronobergs|Norrbottens|Orebro|Ostergotlands|Skane|Sodermanlands|Stockholms|Uppsala|Varmlands|Vasterbottens|Vasternorrlands|Vastmanlands|Vastra Gotalands";
+s_a[219] = "Aargau|Ausser-Rhoden|Basel-Landschaft|Basel-Stadt|Bern|Fribourg|Geneve|Glarus|Graubunden|Inner-Rhoden|Jura|Luzern|Neuchatel|Nidwalden|Obwalden|Sankt Gallen|Schaffhausen|Schwyz|Solothurn|Thurgau|Ticino|Uri|Valais|Vaud|Zug|Zurich";
+s_a[220] = "Al Hasakah|Al Ladhiqiyah|Al Qunaytirah|Ar Raqqah|As Suwayda'|Dar'a|Dayr az Zawr|Dimashq|Halab|Hamah|Hims|Idlib|Rif Dimashq|Tartus";
+s_a[221] = "Chang-hua|Chi-lung|Chia-i|Chia-i|Chung-hsing-hsin-ts'un|Hsin-chu|Hsin-chu|Hua-lien|I-lan|Kao-hsiung|Kao-hsiung|Miao-li|Nan-t'ou|P'eng-hu|P'ing-tung|T'ai-chung|T'ai-chung|T'ai-nan|T'ai-nan|T'ai-pei|T'ai-pei|T'ai-tung|T'ao-yuan|Yun-lin";
+s_a[222] = "Viloyati Khatlon|Viloyati Leninobod|Viloyati Mukhtori Kuhistoni Badakhshon";
+s_a[223] = "Arusha|Dar es Salaam|Dodoma|Iringa|Kagera|Kigoma|Kilimanjaro|Lindi|Mara|Mbeya|Morogoro|Mtwara|Mwanza|Pemba North|Pemba South|Pwani|Rukwa|Ruvuma|Shinyanga|Singida|Tabora|Tanga|Zanzibar Central/South|Zanzibar North|Zanzibar Urban/West";
+s_a[224] = "Amnat Charoen|Ang Thong|Buriram|Chachoengsao|Chai Nat|Chaiyaphum|Chanthaburi|Chiang Mai|Chiang Rai|Chon Buri|Chumphon|Kalasin|Kamphaeng Phet|Kanchanaburi|Khon Kaen|Krabi|Krung Thep Mahanakhon (Bangkok)|Lampang|Lamphun|Loei|Lop Buri|Mae Hong Son|Maha Sarakham|Mukdahan|Nakhon Nayok|Nakhon Pathom|Nakhon Phanom|Nakhon Ratchasima|Nakhon Sawan|Nakhon Si Thammarat|Nan|Narathiwat|Nong Bua Lamphu|Nong Khai|Nonthaburi|Pathum Thani|Pattani|Phangnga|Phatthalung|Phayao|Phetchabun|Phetchaburi|Phichit|Phitsanulok|Phra Nakhon Si Ayutthaya|Phrae|Phuket|Prachin Buri|Prachuap Khiri Khan|Ranong|Ratchaburi|Rayong|Roi Et|Sa Kaeo|Sakon Nakhon|Samut Prakan|Samut Sakhon|Samut Songkhram|Sara Buri|Satun|Sing Buri|Sisaket|Songkhla|Sukhothai|Suphan Buri|Surat Thani|Surin|Tak|Trang|Trat|Ubon Ratchathani|Udon Thani|Uthai Thani|Uttaradit|Yala|Yasothon";
+s_a[225] = "Tobago";
+s_a[226] = "De La Kara|Des Plateaux|Des Savanes|Du Centre|Maritime";
+s_a[227] = "Atafu|Fakaofo|Nukunonu";
+s_a[228] = "Ha'apai|Tongatapu|Vava'u";
+s_a[229] = "Arima|Caroni|Mayaro|Nariva|Port-of-Spain|Saint Andrew|Saint David|Saint George|Saint Patrick|San Fernando|Victoria";
+s_a[230] = "Ariana|Beja|Ben Arous|Bizerte|El Kef|Gabes|Gafsa|Jendouba|Kairouan|Kasserine|Kebili|Mahdia|Medenine|Monastir|Nabeul|Sfax|Sidi Bou Zid|Siliana|Sousse|Tataouine|Tozeur|Tunis|Zaghouan";
+s_a[231] = "Adana|Adiyaman|Afyon|Agri|Aksaray|Amasya|Ankara|Antalya|Ardahan|Artvin|Aydin|Balikesir|Bartin|Batman|Bayburt|Bilecik|Bingol|Bitlis|Bolu|Burdur|Bursa|Canakkale|Cankiri|Corum|Denizli|Diyarbakir|Duzce|Edirne|Elazig|Erzincan|Erzurum|Eskisehir|Gaziantep|Giresun|Gumushane|Hakkari|Hatay|Icel|Igdir|Isparta|Istanbul|Izmir|Kahramanmaras|Karabuk|Karaman|Kars|Kastamonu|Kayseri|Kilis|Kirikkale|Kirklareli|Kirsehir|Kocaeli|Konya|Kutahya|Malatya|Manisa|Mardin|Mugla|Mus|Nevsehir|Nigde|Ordu|Osmaniye|Rize|Sakarya|Samsun|Sanliurfa|Siirt|Sinop|Sirnak|Sivas|Tekirdag|Tokat|Trabzon|Tunceli|Usak|Van|Yalova|Yozgat|Zonguldak";
+s_a[232] = "Ahal Welayaty|Balkan Welayaty|Dashhowuz Welayaty|Lebap Welayaty|Mary Welayaty";
+s_a[233] = "Tuvalu";
+s_a[234] = "Adjumani|Apac|Arua|Bugiri|Bundibugyo|Bushenyi|Busia|Gulu|Hoima|Iganga|Jinja|Kabale|Kabarole|Kalangala|Kampala|Kamuli|Kapchorwa|Kasese|Katakwi|Kibale|Kiboga|Kisoro|Kitgum|Kotido|Kumi|Lira|Luwero|Masaka|Masindi|Mbale|Mbarara|Moroto|Moyo|Mpigi|Mubende|Mukono|Nakasongola|Nebbi|Ntungamo|Pallisa|Rakai|Rukungiri|Sembabule|Soroti|Tororo";
+s_a[235] = "Avtonomna Respublika Krym (Simferopol')|Cherkas'ka (Cherkasy)|Chernihivs'ka (Chernihiv)|Chernivets'ka (Chernivtsi)|Dnipropetrovs'ka (Dnipropetrovs'k)|Donets'ka (Donets'k)|Ivano-Frankivs'ka (Ivano-Frankivs'k)|Kharkivs'ka (Kharkiv)|Khersons'ka (Kherson)|Khmel'nyts'ka (Khmel'nyts'kyy)|Kirovohrads'ka (Kirovohrad)|Kyyiv|Kyyivs'ka (Kiev)|L'vivs'ka (L'viv)|Luhans'ka (Luhans'k)|Mykolayivs'ka (Mykolayiv)|Odes'ka (Odesa)|Poltavs'ka (Poltava)|Rivnens'ka (Rivne)|Sevastopol'|Sums'ka (Sumy)|Ternopil's'ka (Ternopil')|Vinnyts'ka (Vinnytsya)|Volyns'ka (Luts'k)|Zakarpats'ka (Uzhhorod)|Zaporiz'ka (Zaporizhzhya)|Zhytomyrs'ka (Zhytomyr)"
+s_a[236] = "'Ajman|Abu Zaby (Abu Dhabi)|Al Fujayrah|Ash Shariqah (Sharjah)|Dubayy (Dubai)|Ra's al Khaymah|Umm al Qaywayn";
+s_a[237] = "Barking and Dagenham|Barnet|Barnsley|Bath and North East Somerset|Bedfordshire|Bexley|Birmingham|Blackburn with Darwen|Blackpool|Bolton|Bournemouth|Bracknell Forest|Bradford|Brent|Brighton and Hove|Bromley|Buckinghamshire|Bury|Calderdale|Cambridgeshire|Camden|Cheshire|City of Bristol|City of Kingston upon Hull|City of London|Cornwall|Coventry|Croydon|Cumbria|Darlington|Derby|Derbyshire|Devon|Doncaster|Dorset|Dudley|Durham|Ealing|East Riding of Yorkshire|East Sussex|Enfield|Essex|Gateshead|Gloucestershire|Greenwich|Hackney|Halton|Hammersmith and Fulham|Hampshire|Haringey|Harrow|Hartlepool|Havering|Herefordshire|Hertfordshire|Hillingdon|Hounslow|Isle of Wight|Islington|Kensington and Chelsea|Kent|Kingston upon Thames|Kirklees|Knowsley|Lambeth|Lancashire|Leeds|Leicester|Leicestershire|Lewisham|Lincolnshire|Liverpool|Luton|Manchester|Medway|Merton|Middlesbrough|Milton Keynes|Newcastle upon Tyne|Newham|Norfolk|North East Lincolnshire|North Lincolnshire|North Somerset|North Tyneside|North Yorkshire|Northamptonshire|Northumberland|Nottingham|Nottinghamshire|Oldham|Oxfordshire|Peterborough|Plymouth|Poole|Portsmouth|Reading|Redbridge|Redcar and Cleveland|Richmond upon Thames|Rochdale|Rotherham|Rutland|Salford|Sandwell|Sefton|Sheffield|Shropshire|Slough|Solihull|Somerset|South Gloucestershire|South Tyneside|Southampton|Southend-on-Sea|Southwark|St. Helens|Staffordshire|Stockport|Stockton-on-Tees|Stoke-on-Trent|Suffolk|Sunderland|Surrey|Sutton|Swindon|Tameside|Telford and Wrekin|Thurrock|Torbay|Tower Hamlets|Trafford|Wakefield|Walsall|Waltham Forest|Wandsworth|Warrington|Warwickshire|West Berkshire|West Sussex|Westminster|Wigan|Wiltshire|Windsor and Maidenhead|Wirral|Wokingham|Wolverhampton|Worcestershire|York";
+s_a[238] = "Artigas|Canelones|Cerro Largo|Colonia|Durazno|Flores|Florida|Lavalleja|Maldonado|Montevideo|Paysandu|Rio Negro|Rivera|Rocha|Salto|San Jose|Soriano|Tacuarembo|Treinta y Tres";
+s_a[239] = "Alabama|Alaska|Arizona|Arkansas|California|Colorado|Connecticut|Delaware|District of Columbia|Florida|Georgia|Hawaii|Idaho|Illinois|Indiana|Iowa|Kansas|Kentucky|Louisiana|Maine|Maryland|Massachusetts|Michigan|Minnesota|Mississippi|Missouri|Montana|Nebraska|Nevada|New Hampshire|New Jersey|New Mexico|New York|North Carolina|North Dakota|Ohio|Oklahoma|Oregon|Pennsylvania|Rhode Island|South Carolina|South Dakota|Tennessee|Texas|Utah|Vermont|Virginia|Washington|West Virginia|Wisconsin|Wyoming";
+s_a[240] = "Andijon Wiloyati|Bukhoro Wiloyati|Farghona Wiloyati|Jizzakh Wiloyati|Khorazm Wiloyati (Urganch)|Namangan Wiloyati|Nawoiy Wiloyati|Qashqadaryo Wiloyati (Qarshi)|Qoraqalpoghiston (Nukus)|Samarqand Wiloyati|Sirdaryo Wiloyati (Guliston)|Surkhondaryo Wiloyati (Termiz)|Toshkent Shahri|Toshkent Wiloyati";
+s_a[241] = "Malampa|Penama|Sanma|Shefa|Tafea|Torba";
+s_a[242] = "Amazonas|Anzoategui|Apure|Aragua|Barinas|Bolivar|Carabobo|Cojedes|Delta Amacuro|Dependencias Federales|Distrito Federal|Falcon|Guarico|Lara|Merida|Miranda|Monagas|Nueva Esparta|Portuguesa|Sucre|Tachira|Trujillo|Vargas|Yaracuy|Zulia";
+s_a[243] = "An Giang|Ba Ria-Vung Tau|Bac Giang|Bac Kan|Bac Lieu|Bac Ninh|Ben Tre|Binh Dinh|Binh Duong|Binh Phuoc|Binh Thuan|Ca Mau|Can Tho|Cao Bang|Da Nang|Dac Lak|Dong Nai|Dong Thap|Gia Lai|Ha Giang|Ha Nam|Ha Noi|Ha Tay|Ha Tinh|Hai Duong|Hai Phong|Ho Chi Minh|Hoa Binh|Hung Yen|Khanh Hoa|Kien Giang|Kon Tum|Lai Chau|Lam Dong|Lang Son|Lao Cai|Long An|Nam Dinh|Nghe An|Ninh Binh|Ninh Thuan|Phu Tho|Phu Yen|Quang Binh|Quang Nam|Quang Ngai|Quang Ninh|Quang Tri|Soc Trang|Son La|Tay Ninh|Thai Binh|Thai Nguyen|Thanh Hoa|Thua Thien-Hue|Tien Giang|Tra Vinh|Tuyen Quang|Vinh Long|Vinh Phuc|Yen Bai";
+s_a[244] = "Saint Croix|Saint John|Saint Thomas";
+s_a[245] = "Blaenau Gwent|Bridgend|Caerphilly|Cardiff|Carmarthenshire|Ceredigion|Conwy|Denbighshire|Flintshire|Gwynedd|Isle of Anglesey|Merthyr Tydfil|Monmouthshire|Neath Port Talbot|Newport|Pembrokeshire|Powys|Rhondda Cynon Taff|Swansea|The Vale of Glamorgan|Torfaen|Wrexham";
+s_a[246] = "Alo|Sigave|Wallis";
+s_a[247] = "West Bank";
+s_a[248] = "Western Sahara";
+s_a[249] = "'Adan|'Ataq|Abyan|Al Bayda'|Al Hudaydah|Al Jawf|Al Mahrah|Al Mahwit|Dhamar|Hadhramawt|Hajjah|Ibb|Lahij|Ma'rib|Sa'dah|San'a'|Ta'izz";
+s_a[250] = "Kosovo|Montenegro|Serbia|Vojvodina";
+s_a[251] = "Central|Copperbelt|Eastern|Luapula|Lusaka|North-Western|Northern|Southern|Western";
+s_a[252] = "Bulawayo|Harare|ManicalandMashonaland Central|Mashonaland East|Mashonaland West|Masvingo|Matabeleland North|Matabeleland South|Midlands";
+
+
+function populateStates(countryElementId, stateElementId) {
+    var countryElement = document.getElementById(countryElementId);
+    if (!countryElement) {
+        console.error(`Element with ID '${countryElementId}' not found.`);
+        return; // Exit if the country element doesn't exist
+    }
+
+    var selectedCountryIndex = countryElement.selectedIndex;
+
+    var stateElement = document.getElementById(stateElementId);
+    if (!stateElement) {
+        console.error(`Element with ID '${stateElementId}' not found.`);
+        return; // Exit if the state element doesn't exist
+    }
+
+    stateElement.length = 0; // Clear existing options
+    stateElement.options[0] = new Option('Select State', '');
+    stateElement.selectedIndex = 0;
+
+    if (s_a[selectedCountryIndex]) {
+        var state_arr = s_a[selectedCountryIndex].split("|");
+        for (var i = 0; i < state_arr.length; i++) {
+            stateElement.options[stateElement.length] = new Option(state_arr[i], state_arr[i]);
+        }
+    }
+}
+
+function populateCountries(countryElementId, stateElementId) {
+   
+    // Get the country select element by its ID
+    var countryElement = document.getElementById(countryElementId);
+
+    // Check if the countryElement exists
+    if (!countryElement) {
+        console.error(`Element with ID ${countryElementId} not found`);
+        return; // Exit the function if the element does not exist
+    }
+
+    // Clear the existing options
+    countryElement.length = 0;
+
+    // Add default option
+    countryElement.options[0] = new Option('Select country','');
+    countryElement.selectedIndex = 0;
+
+    // Populate with countries
+    for (var i = 0; i < country_arr.length; i++) {
+        countryElement.options[countryElement.length] = new Option(country_arr[i], country_arr[i]);
+    }
+
+    // Handle the selected value
+    var value = countryElement.value;
+    if (value !== undefined) {
+        $(countryElement).append($('<option>', {
+            value: value,
+            text: value,
+            selected: true // Add the selected attribute
+        }));
+    }
+
+    // Set up onchange event for the country element if stateElementId is provided
+    if (stateElementId) {
+        countryElement.onchange = function () {
+            populateStates(countryElementId, stateElementId);
+        };
+    }
+}
+
+populateCountries("country", "state");
+
+
diff --git a/templates/floating_button.html b/templates/floating_button.html
index bd753404b..7cf2a4f44 100644
--- a/templates/floating_button.html
+++ b/templates/floating_button.html
@@ -1,5 +1,6 @@
 {% load static %}
 {% load horillafilters %}
+{% include 'generic/components.html' %}
 <style>
     .round {
         border-radius: 50%;
@@ -152,9 +153,9 @@
         <a
             class="text-light"
             data-toggle="oh-modal-toggle"
-            data-target="#objectCreateModal"
-            hx-get="{% url 'create-reimbursement' %}"
-            hx-target="#objectCreateModalTarget"
+            data-target="#genericModal"
+            hx-get="{% url 'reimbursement-create' %}"
+            hx-target="#genericModalBody"
         >
             <i class="material-icons mt-2">paid</i>
         </a>
@@ -176,7 +177,7 @@
             class="text-light"
             data-toggle="oh-modal-toggle"
             data-target="#objectCreateModal"
-            hx-get="{% url 'shift-request' %}?emp_id={{request.user.employee_get.id}}"
+            hx-get="{% url 'shift-request' %}"
             hx-target="#objectCreateModalTarget"
         >
             <i class="material-icons mt-2">history</i>
@@ -187,13 +188,13 @@
             <a
                 class="text-light"
                 data-toggle="oh-modal-toggle"
-                data-target="#objectCreateModal"
+                data-target="#genericModal"
                 {% if perms.leave.create_leaverequest %}
                     hx-get="{% url 'request-creation' %}"
                 {% else %}
                     hx-get="{% url 'leave-request-create' %}"
                 {% endif %}
-                hx-target="#objectCreateModalTarget"
+                hx-target="#genericModalBody"
             >
                 <span class="material-symbols-outlined mt-2">
                 calendar_add_on
@@ -206,9 +207,9 @@
         <a
             class="text-light"
             data-toggle="oh-modal-toggle"
-            data-target="#objectCreateModal"
+            data-target="#genericModal"
             hx-get="{% url 'request-new-attendance' %}"
-            hx-target="#objectCreateModalTarget"
+            hx-target="#genericModalBody"
         >
             <span class="material-symbols-outlined mt-2">
                 person_add
diff --git a/templates/index.html b/templates/index.html
index 1fba4d008..34e07bce5 100755
--- a/templates/index.html
+++ b/templates/index.html
@@ -75,6 +75,7 @@
         </div>
     {% endif %}
     <button id="reloadMessagesButton" hx-get="{% url 'reload-messages' %}" hx-swap="afterend" hidden hx-target="#reloadMessages"></button>
+    {% include "generic/components.html" %}
 
     <div class="oh-wrapper-main">
 
diff --git a/templates/quick_access.html b/templates/quick_access.html
index 91459fc98..250fb71e6 100644
--- a/templates/quick_access.html
+++ b/templates/quick_access.html
@@ -130,25 +130,36 @@
 
     function toggleReimbursmentType(element) {
         if (element.val() == 'reimbursement') {
-          $('#reimbursementModalBody [name=attachment]').parent().show()
-          $('#reimbursementModalBody [name=attachment]').attr("required",true)
+          $('#genericModalBody [name=attachment]').parent().show()
+          $('#genericModalBody [name=attachment]').attr("required",true)
 
-            $('#reimbursementModalBody [name=leave_type_id]').parent().hide().attr("required",false)
-            $('#reimbursementModalBody [name=cfd_to_encash]').parent().hide().attr("required",false)
-            $('#reimbursementModalBody [name=ad_to_encash]').parent().hide().attr("required",false)
-            $('#reimbursementModalBody [name=amount]').parent().show().attr("required",true)
-            $('#reimbursementModalBody #availableTable').hide().attr("required",false)
+            $('#genericModalBody [name=leave_type_id]').parent().parent().hide().attr("required",false)
+            $('#genericModalBody [name=cfd_to_encash]').parent().parent().hide().attr("required",false)
+            $('#genericModalBody [name=ad_to_encash]').parent().parent().hide().attr("required",false)
+            $('#genericModalBody [name=amount]').parent().parent().show().attr("required",true)
+            $('#genericModalBody #availableTable').hide().attr("required",false)
 
         } else if(element.val() == 'leave_encashment') {
-          $('#reimbursementModalBody [name=attachment]').parent().hide()
-          $('#reimbursementModalBody [name=attachment]').attr("required",false)
-            $('#reimbursementModalBody [name=leave_type_id]').parent().show().attr("required",true)
-            $('#reimbursementModalBody [name=cfd_to_encash]').parent().show().attr("required",true)
-            $('#reimbursementModalBody [name=ad_to_encash]').parent().show().attr("required",true)
-            $('#reimbursementModalBody [name=amount]').parent().hide().attr("required",false)
-            $('#reimbursementModalBody #availableTable').show().attr("required",true)
+          $('#genericModalBody [name=attachment]').parent().hide()
+          $('#genericModalBody [name=attachment]').attr("required",false)
+            $('#genericModalBody [name=leave_type_id]').parent().parent().show().attr("required",true)
+            $('#genericModalBody [name=cfd_to_encash]').parent().parent().show().attr("required",true)
+            $('#genericModalBody [name=ad_to_encash]').parent().parent().show().attr("required",true)
+            $('#genericModalBody [name=amount]').parent().parent().hide().attr("required",false)
+            $('#genericModalBody #availableTable').show().attr("required",true)
 
 
+        }
+        else if(element.val() == 'bonus_encashment') {
+          $('#genericModalBody [name=attachment]').parent().hide()
+          $('#genericModalBody [name=attachment]').attr("required",false)
+          $('#genericModalBody [name=leave_type_id]').parent().parent().hide().attr("required",false)
+          $('#genericModalBody [name=cfd_to_encash]').parent().parent().hide().attr("required",false)
+          $('#genericModalBody [name=ad_to_encash]').parent().parent().hide().attr("required",false)
+          $('#genericModalBody [name=amount]').parent().parent().hide().attr("required",false)
+          $('#genericModalBody #availableTable').hide().attr("required",false)
+          $('#genericModalBody [name=bonus_to_encash]').parent().parent().show().attr("required",true)
+
         }
     }
     function getAssignedLeave(employeeId) {
diff --git a/templates/settings.html b/templates/settings.html
index 1968c51e4..844db01ff 100644
--- a/templates/settings.html
+++ b/templates/settings.html
@@ -15,6 +15,42 @@
 	.oh-sticky-table{
 		max-height: 100vh;
 	}
+	.accordion--show{
+		display: block;
+	}
+
+.oh-accordion:not(.accordion--show):last-child .oh-accordion-header {
+    border-bottom: none
+}
+
+.accordion--show .oh-accordion-header:after {
+    content: "";
+    width: 25px;
+    height: 25px;
+    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIGZpbGw9IiMxZjFmMWYiIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aCBkPSJtNyAxNC41IDUtNSA1IDVIN1oiPjwvcGF0aD4KPC9zdmc+");
+    background-size: contain;
+    background-repeat: no-repeat;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    position: absolute;
+    right: 0;
+    top: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center
+}
+
+.accordion--show .oh-accordion-body {
+    display: block
+}
+
 </style>
 
 <section class="oh-wrapper oh-main__topbar">
@@ -603,6 +639,35 @@
 							</li>
 							<hr>
 						{% endif %}
+						{% if "whatsapp"|app_installed %}
+							{% if perms.whatsapp.view_whatsappcredentials %}
+								<li class="oh-inner-sidebar__item">
+									<div class="oh-accordion ms-2">
+										<div class="oh-accordion-header" style="font-size:16px;">
+											<ion-icon name="headset" class="me-2"></ion-icon>
+											{% trans "Whatsapp Configuration" %}
+										</div>
+										<div class="oh-accordion-body">
+											<div class="row">
+												<div class="col-sm-12 col-md-12 col-lg-12">
+													<div class="oh-input-group">
+														{% if perms.whatsapp.add_whatsappcredentials %}
+															<a
+																id="whatsapp_credentials"
+																href="{% url 'whatsapp-credential-view' %}"
+																class="oh-inner-sidebar__link oh-dropdown__link"
+																>{% trans "Whatsapp Credentials" %}</a
+															>
+														{% endif %}
+													</div>
+												</div>
+											</div>
+										</div>
+									</div>
+								</li>
+								<hr>
+							{% endif %}
+						{% endif %}
 
 					</ul>
 				</div>
@@ -614,6 +679,18 @@
 	</div>
 </div>
 <script>
+	$(document).ready(function () {
+	$(".oh-accordion--show").removeClass("oh-accordion--show");
+	$('.oh-accordion-header').on("click", function (e) {
+		e.preventDefault();
+		$(this).parent().toggleClass("accordion--show");
+		setTimeout(() => {
+			$(".oh-accordion--show").removeClass("oh-accordion--show");
+		}, 100);
+	  });
+
+	});
+
     $(document).ready(function () {
         var path = location.pathname;
         var menu = $(`a[href="${path}"].oh-inner-sidebar__link.oh-dropdown__link`);
@@ -626,13 +703,16 @@
 
         // Find the parent accordion element and show it
         var parentAccordion = menu.closest('.oh-accordion');
-        parentAccordion.addClass('oh-accordion--show');
+        parentAccordion.addClass('accordion--show');
 
         menu[0].scrollIntoView({ behavior: "smooth", block: "center" });
         if (menu.length != undefined) {
             localStorage.setItem("lastActiveTab", path);
         }
     });
+
+
+
 </script>
 <script src="{% static 'build/js/settingsDriver.js' %}"></script>
 {% if not request.user.driverviewed_set.first or "settings" not in request.user.driverviewed_set.first.user_viewed %}
diff --git a/whatsapp/__init__.py b/whatsapp/__init__.py
new file mode 100644
index 000000000..e69de29bb
diff --git a/whatsapp/admin.py b/whatsapp/admin.py
new file mode 100644
index 000000000..2e287f6ba
--- /dev/null
+++ b/whatsapp/admin.py
@@ -0,0 +1,7 @@
+from django.contrib import admin
+
+from whatsapp.models import WhatsappCredientials, WhatsappFlowDetails
+
+# Register your models here.
+admin.site.register(WhatsappCredientials)
+admin.site.register(WhatsappFlowDetails)
\ No newline at end of file
diff --git a/whatsapp/apps.py b/whatsapp/apps.py
new file mode 100644
index 000000000..89758820c
--- /dev/null
+++ b/whatsapp/apps.py
@@ -0,0 +1,15 @@
+from django.apps import AppConfig
+
+
+class WhatsappConfig(AppConfig):
+    default_auto_field = 'django.db.models.BigAutoField'
+    name = 'whatsapp'
+
+    def ready(self):
+        from django.urls import include, path
+        from horilla.urls import urlpatterns
+
+        urlpatterns.append(
+            path("whatsapp/", include("whatsapp.urls")),
+        )
+        super().ready()
\ No newline at end of file
diff --git a/whatsapp/cbv/whatsapp.py b/whatsapp/cbv/whatsapp.py
new file mode 100644
index 000000000..01b34c1b3
--- /dev/null
+++ b/whatsapp/cbv/whatsapp.py
@@ -0,0 +1,146 @@
+from typing import Any
+from django.http import HttpResponse
+from django.shortcuts import render
+from django.urls import reverse
+from horilla_views.generic.cbv.views import (
+    HorillaFormView,
+    HorillaListView,
+    HorillaNavView,
+)
+from whatsapp.filters import CredentialsViewFilter
+from whatsapp.forms import WhatsappForm
+from whatsapp.models import WhatsappCredientials
+from django.utils.translation import gettext_lazy as _trans
+from django.contrib import messages
+
+from whatsapp.utils import send_text_message
+
+
+class CredentialListView(HorillaListView):
+
+    model = WhatsappCredientials
+    filter_class = CredentialsViewFilter
+    show_filter_tags = False
+
+    columns = [
+        (_trans("Phone Number"), "meta_phone_number"),
+        (_trans("Phone Number ID"), "meta_phone_number_id"),
+        (_trans("Bussiness ID"), "meta_business_id"),
+        (_trans("Webhook Token"), "get_webhook_token"),
+        (_trans("Token"), "token_render"),
+    ]
+    # sortby_mapping = [("Bussiness ID", "meta_business_id")]
+    row_attrs = """
+                    id = "credential{get_instance}"
+                """
+    option_method ="get_publish_button"
+
+    def __init__(self, *args, **kwargs):
+        super().__init__(*args, **kwargs)
+        self.search_url = reverse("whatsapp-credential-list")
+        self.view_id = "CredentialList"
+        self.actions = [
+            {
+                "action": "Edit",
+                "icon": "create-outline",
+                "attrs": """
+                        class="oh-btn oh-btn--light-bkg w-100"
+                        data-toggle="oh-modal-toggle"
+                        data-target = "#genericModal"
+                        hx-target = "#genericModalBody"
+                        hx-get = "{get_update_url}"
+                        """,
+            },
+            {
+                "action": "Test test message",
+                "icon": "link-outline",
+                "attrs": """
+                        class="oh-btn oh-btn--light-bkg w-100"
+                        data-toggle="oh-modal-toggle"
+                        data-target = "#genericModal"
+                        hx-target = "#genericModalBody"
+                        hx-get = "{get_test_message_url}"
+                        """,
+            },
+            {
+                "action": "Delete",
+                "icon": "trash-outline",
+                "attrs": """
+                        class="oh-btn oh-btn--danger-outline w-100"
+                        hx-confirm = "Are you sure you want to delete this credential?"
+                        hx-post = "{get_delete_url}"
+                        hx-target = "#credential{get_instance}"
+                        hx-swap = "outerHTML"
+                        """,
+            },
+        ]
+
+        self.row_attrs = """
+        id="credential{get_instance}"
+        {get_primary}
+        """
+
+
+class CredentialNav(HorillaNavView):
+
+    def __init__(self, *args, **kwargs):
+        super().__init__(*args, **kwargs)
+        self.search_url = reverse("whatsapp-credential-list")
+        self.create_attrs = f"""
+                                data-toggle="oh-modal-toggle"
+                                data-target = "#genericModal"
+                                hx-target = "#genericModalBody"
+                                hx-get = "{reverse('whatsapp-credential-create')}"
+                            """
+
+    nav_title = "Whatsapp Credentials"
+    search_swap_target = "#listContainer"
+    filter_instance = CredentialsViewFilter()
+
+
+class CredentialForm(HorillaFormView):
+    model = WhatsappCredientials
+    form_class = WhatsappForm
+    new_display_title = "Create whatsapp"
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        if self.form.instance.pk:
+            self.form_class.verbose_name = "Update Credentials"
+        return context
+
+    def form_valid(self, form: WhatsappForm) -> HttpResponse:
+        if form.is_valid():
+            if self.form.instance.pk:
+                messages.success(self.request, "Crediential updated successfully")
+            else:
+                messages.success(self.request, "Crediential created successfully")
+            form.save()
+            return self.HttpResponse()
+        return super().form_valid(form)
+
+
+def delete_credentials(request):
+    id = request.GET.get("id")
+    crediential = WhatsappCredientials.objects.filter(id=id).first()
+    count = WhatsappCredientials.objects.count()
+    crediential.delete()
+    messages.success(request, f"Crediential deleted.")
+    if count == 1:
+        return HttpResponse("<script>$('.reload-record').click();</script>")
+    return HttpResponse("<script>$('#reloadMessagesButton').click();</script>")
+
+
+def send_test_message(request):
+    message = "This is a test message"
+    if request.method == "POST":
+        number = request.POST.get("number")
+        response = send_text_message(number, message)
+        print(response)
+        if response:
+            messages.success(request, "Message sent successfully")
+        else:
+            messages.error(request, "message not send")
+        return HttpResponse("<script>window.location.reload()</script>")
+
+    return render(request, "whatsapp/send_test_message_form.html")
diff --git a/whatsapp/encryption.py b/whatsapp/encryption.py
new file mode 100644
index 000000000..b5ac09fa7
--- /dev/null
+++ b/whatsapp/encryption.py
@@ -0,0 +1,281 @@
+import json
+import base64
+from cryptography.hazmat.primitives import hashes
+from cryptography.hazmat.primitives.asymmetric import rsa, padding
+from cryptography.hazmat.primitives import serialization
+from cryptography.hazmat.backends import default_backend
+from cryptography.hazmat.primitives.ciphers import Cipher, algorithms, modes
+
+
+
+PRIVATE_KEY = """-----BEGIN PRIVATE KEY-----
+MIIEuwIBADANBgkqhkiG9w0BAQEFAASCBKUwggShAgEAAoIBAQCitHXNMGC04pSI
+di+ynQjLDQd1LrExd1nYMxdOFnX/CnVEJGVEUKPdDm5M300ULugeFPx76MsjQx97
+vWAgZDMEA2+WyKFAHqmgRvVoiESZZnduIj2akVjFZvA24sbFpGunaiMPq61kWUBR
+0pFRw4pnXEbPQnqu9H5vEJ7W5+G6CDlJD3eeTTkM85/ch1/REJbSDyp+Tozrc0Wa
+Mv5xMUbVtSjwxaqwSfdMbAfJxnaaZ5SKwgiUEIsLKsQISWX3+qq6USWOCbJs6oTV
+eWgeZfxgOjCUovJsZ2TuJ4aNfMtI+dFm3OMaeB2ypa4F4lWu8pq6FVhTseQntfUu
+fQv4P+iRAgMBAAECggEABGOp6ecsNLUIHMZTcxYZbqDjWp3v2c3GdraqIkko1cCK
+eVQiBz3Frej9wMUlZy38xRL73Lvi/wiIiOYK+dS6K5mMIR04fGpXWSOQ60kB0MGa
+5zW1Q744DttAD7r+ccaFwPZ0C7At9U8TFSIBGZuU2ET9BApfFOkzn/tqzZFj3Yjg
+OgWaGCvtOGCjLgjN1CWRTq+U66SUuVEtm8cXX8o4hVGfy2ITdg10xW+88qgLqxLj
+/2RKPTixjmlwp1/28Z0rotp4GFUU5yplDq86YkdYNF8wHIPx0NiEUiLmAtfZrpmM
+0xyJVJbgWh8QASzOxM1lq8WOWOOhJnVnkowYJsxVgQKBgQDZisbd8n59rJQfDMbK
+7/cQ0gedl7No+0taY30hSckeR73yxAvmz83jqiD6qOlbaCbb+Rx1PPKewRZybrQV
+n0CdFJ5oB1lbtLY7ftIlGQx2MiI4e+lAiCn+Zo2FnIm+C6LJKWqR18vLlHKebbJK
+IAHdW76roZsdqAyBSyn0fh2gXQKBgQC/d+/30lIBafNCc6oDXbZFrH9/sRqCEg1u
+jOhgNjwYZ23IkBMghyhD3eAiymvUFYCQ2pUfSMqygBbFUay5h5/PF34vzJmSVwC0
+6SVemod/2Z7ZcVUogplSdAW1+V4f/3pyIptgKAAqlsE7lAQJAiyd7FnXx8/Rx7Cw
+IVh+Jz11xQKBgBaTOTn1HT1LeH+UYtjSeDAtq46mHH8rfNFfe6/FqXJT/ZlA0P9d
+1z7l+9AnUTgkIcw4GMTt0zu4S+0KIfQQd7MVXa7r/FDw+uxHp+UjqVBmuXhlG3qP
+5tO4rr0L1pt7N6RqgN2rqEFzIUXhmlvo4GipSasj9SXpt4p/U1ZE9CwdAoGBAKSU
+5jMyGMeaWT4Pyl5mWV1+r4IFrHGOLvmOKdk6BWI81cOHBMn7JANiX13IffOqH/9j
+xLdFjObu76PhVwWLrTUITrGrv35pRvQ7TKILVtnxKHhk0Pyndj/H93i6x8vdgVVG
+piR7fdkeCS+7RdSwh8Wf+oJfASaj7h8YKscV1+C5An9SKKO185jufNw+6cToVvBG
+ii91044lvc8XidFgR6t3M9cJS3pHNemIfg2dZCu7i2/UbAIrsMDt4Uv4QGOaRGr/
+rZ7JoquIPXVTaUjSJLWOELUi9TDBB1F04duW/xNsKswrFIk+mT0jMO3zB/LyCT5m
+BCyI7ou85astK8+e4Q12
+-----END PRIVATE KEY-----
+"""
+PASSPHRASE = "Horilla"
+APP_SECRET = "6c18bf72d5f486479bf66c5807c2b393"
+
+
+class FlowEndpointException(Exception):
+    def __init__(self, status_code, message):
+        super().__init__(message)
+        self.status_code = status_code
+
+
+def decrypt_request(body, private_pem, passphrase):
+    # Extract encrypted data from the request body
+    encrypted_aes_key = body['encrypted_aes_key']
+    encrypted_flow_data = body['encrypted_flow_data']
+    initial_vector = body['initial_vector']
+
+    private_key = serialization.load_pem_private_key(
+        private_pem.encode(),
+        password=None,
+        backend=default_backend()
+    )
+
+    decrypted_aes_key = private_key.decrypt(
+        base64.b64decode(encrypted_aes_key),
+        padding.OAEP(
+            mgf=padding.MGF1(algorithm=hashes.SHA256()),
+            algorithm=hashes.SHA256(),
+            label=None
+        )
+    )
+
+    flow_data_buffer = base64.b64decode(encrypted_flow_data)
+    iv_buffer = base64.b64decode(initial_vector)
+
+    TAG_LENGTH = 16
+    encrypted_flow_data_body = flow_data_buffer[:-TAG_LENGTH]
+    encrypted_flow_data_tag = flow_data_buffer[-TAG_LENGTH:]
+
+    cipher = Cipher(algorithms.AES(decrypted_aes_key), modes.GCM(iv_buffer, encrypted_flow_data_tag), backend=default_backend())
+    decryptor = cipher.decryptor()
+
+    decrypted_json_string = decryptor.update(encrypted_flow_data_body) + decryptor.finalize()
+
+    return {
+        'decrypted_body': json.loads(decrypted_json_string.decode('utf-8')),
+        'aes_key_buffer': decrypted_aes_key,
+        'initial_vector_buffer': iv_buffer
+    }
+
+def encrypt_response(response, aes_key_buffer, initial_vector_buffer):
+    response_bytes = json.dumps(response).encode('utf-8')
+
+    flipped_iv = bytearray((b ^ 0xFF) for b in initial_vector_buffer)
+
+    cipher = Cipher(
+        algorithms.AES(aes_key_buffer),
+        modes.GCM(bytes(flipped_iv)),
+        backend=default_backend()
+    )
+    encryptor = cipher.encryptor()
+    ciphertext = encryptor.update(response_bytes) + encryptor.finalize()
+    ciphertext_with_tag = ciphertext + encryptor.tag
+    encrypted_message = base64.b64encode(ciphertext_with_tag).decode('utf-8')
+
+    return encrypted_message
+
+# -------------------------------------------------views.py ------------------------------------------------
+
+import base64
+import hashlib
+import hmac
+
+import json
+import os
+from base64 import b64decode, b64encode
+from cryptography.hazmat.primitives.asymmetric.padding import OAEP, MGF1, hashes
+from cryptography.hazmat.primitives.ciphers import algorithms, Cipher, modes
+from cryptography.hazmat.primitives.serialization import load_pem_private_key
+from django.http import HttpResponse
+from django.http import JsonResponse
+from django.views.decorators.csrf import csrf_exempt
+
+# Load the private key string
+# PRIVATE_KEY = os.environ.get('PRIVATE_KEY')
+# Example:
+# '''-----BEGIN RSA PRIVATE KEY-----
+# MIIE...
+# ...
+# ...AQAB
+# -----END RSA PRIVATE KEY-----'''
+
+# PRIVATE_KEY = settings.PRIVATE_KEY
+
+
+# @csrf_exempt
+# def end_point(request):
+#     try:
+#         # Parse the request body
+#         body = json.loads(request.body)
+
+#         # Read the request fields
+#         encrypted_flow_data_b64 = body["encrypted_flow_data"]
+#         encrypted_aes_key_b64 = body["encrypted_aes_key"]
+#         initial_vector_b64 = body["initial_vector"]
+
+#         decrypted_data, aes_key, iv = decrypt_request(
+#             encrypted_flow_data_b64, encrypted_aes_key_b64, initial_vector_b64
+#         )
+
+#         # Return the next screen & data to the client
+#         if decrypted_data["action"] == "ping":
+#             response = {"data": {"status": "active"}}
+
+#         else:
+#             response = {"screen": "screen_one", "data": {"some_key": "some_value"}}
+
+#         # Return the response as plaintext
+#         return HttpResponse(
+#             encrypt_response(response, aes_key, iv), content_type="text/plain"
+#         )
+#     except Exception as e:
+#         print(e)
+#         return JsonResponse({}, status=500)
+
+
+@csrf_exempt
+def end_point(request):
+    try:
+        body = json.loads(request.body)
+
+        encrypted_flow_data_b64 = body["encrypted_flow_data"]
+        encrypted_aes_key_b64 = body["encrypted_aes_key"]
+        initial_vector_b64 = body["initial_vector"]
+
+        decrypted_data, aes_key, iv = decrypt_request(
+            encrypted_flow_data_b64, encrypted_aes_key_b64, initial_vector_b64
+        )
+        if decrypted_data["action"] == "ping":
+            response = {"data": {"status": "active"}}
+        else:
+            leave_types = get_leave_types()
+
+            response = {"screen": "screen_one", "data": {"leave_types": leave_types}}
+
+        return HttpResponse(
+            encrypt_response(response, aes_key, iv), content_type="text/plain"
+        )
+    except Exception as e:
+        print(e)
+        return JsonResponse({}, status=500)
+
+
+def get_leave_types():
+    """
+    Fetch leave types from database or settings.
+    You can modify this function based on your data source.
+    """
+    # Option 1: If you have a LeaveType model
+    try:
+        from leave.models import LeaveType
+
+        leave_types = list(LeaveType.objects.values("id", "name"))
+        # Convert any non-string IDs to strings to match the schema
+        for leave_type in leave_types:
+            leave_type["id"] = str(leave_type["id"])
+            leave_type["title"] = str(leave_type["name"])
+            del leave_type["name"]
+
+        return leave_types
+
+    except ImportError:
+        # Option 2: Return hardcoded values if no model exists
+        return [
+            {"id": "1", "title": "Casual Leave"},
+            {"id": "2", "title": "Sick Leave"},
+            {"id": "3", "title": "Paid Leave"},
+        ]
+
+
+def decrypt_request(encrypted_flow_data_b64, encrypted_aes_key_b64, initial_vector_b64):
+    flow_data = b64decode(encrypted_flow_data_b64)
+    iv = b64decode(initial_vector_b64)
+
+    # Decrypt the AES encryption key
+    encrypted_aes_key = b64decode(encrypted_aes_key_b64)
+    private_key = load_pem_private_key(PRIVATE_KEY.encode("utf-8"), password=None)
+    aes_key = private_key.decrypt(
+        encrypted_aes_key,
+        OAEP(
+            mgf=MGF1(algorithm=hashes.SHA256()), algorithm=hashes.SHA256(), label=None
+        ),
+    )
+
+    # Decrypt the Flow data
+    encrypted_flow_data_body = flow_data[:-16]
+    encrypted_flow_data_tag = flow_data[-16:]
+    decryptor = Cipher(
+        algorithms.AES(aes_key), modes.GCM(iv, encrypted_flow_data_tag)
+    ).decryptor()
+    decrypted_data_bytes = (
+        decryptor.update(encrypted_flow_data_body) + decryptor.finalize()
+    )
+    decrypted_data = json.loads(decrypted_data_bytes.decode("utf-8"))
+    return decrypted_data, aes_key, iv
+
+
+def encrypt_response(response, aes_key, iv):
+    # Flip the initialization vector
+    flipped_iv = bytearray()
+    for byte in iv:
+        flipped_iv.append(byte ^ 0xFF)
+
+    # Encrypt the response data
+    encryptor = Cipher(algorithms.AES(aes_key), modes.GCM(flipped_iv)).encryptor()
+    return b64encode(
+        encryptor.update(json.dumps(response).encode("utf-8"))
+        + encryptor.finalize()
+        + encryptor.tag
+    ).decode("utf-8")
+
+
+def is_request_signature_valid(request, app_secret, request_body):
+    if not app_secret:
+        print(
+            "App Secret is not set up. Please Add your app secret in settings to check for request validation"
+        )
+        return True
+
+    signature_header = request.META.get("HTTP_X_HUB_SIGNATURE_256", "")
+    if not signature_header.startswith("sha256="):
+        print("Invalid signature header")
+        return False
+
+    signature = signature_header[7:]  # Remove "sha256="
+
+    hmac_digest = hmac.new(
+        app_secret.encode(), request_body.encode(), hashlib.sha256
+    ).hexdigest()
+
+    return hmac.compare_digest(signature, hmac_digest)
+
+# ----------------------------------------------------------------------------------------------------------
\ No newline at end of file
diff --git a/whatsapp/filters.py b/whatsapp/filters.py
new file mode 100644
index 000000000..38d249f10
--- /dev/null
+++ b/whatsapp/filters.py
@@ -0,0 +1,11 @@
+import django_filters
+from horilla.filters import HorillaFilterSet
+from whatsapp.models import WhatsappCredientials
+
+
+class CredentialsViewFilter(HorillaFilterSet):
+    search = django_filters.CharFilter(field_name="meta_phone_number", lookup_expr="icontains")
+
+    class Meta:
+        model = WhatsappCredientials
+        fields = ["meta_phone_number", "search"]
diff --git a/whatsapp/flows.py b/whatsapp/flows.py
new file mode 100644
index 000000000..b440cf1fe
--- /dev/null
+++ b/whatsapp/flows.py
@@ -0,0 +1,883 @@
+import json
+from asset.models import AssetCategory
+from base.models import Department, EmployeeShift, JobPosition, Tags, WorkType
+from employee.models import Employee
+from helpdesk.models import TicketType
+from leave.models import LeaveType
+
+
+def get_asset_category_flow_json():
+
+    flow_json = {
+        "version": "5.0",
+        "screens": [
+            {
+                "id": "screen_one",
+                "title": "Asset Request",
+                "terminal": True,
+                "data": {
+                    "asset_categories": {
+                        "type": "array",
+                        "items": {
+                            "type": "object",
+                            "properties": {
+                                "id": {"type": "string"},
+                                "title": {"type": "string"},
+                            },
+                            "required": ["id", "title"],
+                        },
+                        "__example__": [
+                            {"id": "1", "title": "Laptops"},
+                            {"id": "2", "title": "Bags"},
+                        ],
+                    }
+                },
+                "layout": {
+                    "type": "SingleColumnLayout",
+                    "children": [
+                        {
+                            "type": "Form",
+                            "name": "flow_path",
+                            "children": [
+                                {
+                                    "type": "Dropdown",
+                                    "label": "Asset Category",
+                                    "required": True,
+                                    "name": "asset_category",
+                                    "data-source": "${data.asset_categories}",
+                                },
+                                {
+                                    "type": "TextArea",
+                                    "label": "Description",
+                                    "required": True,
+                                    "name": "description",
+                                },
+                                {
+                                    "type": "Footer",
+                                    "label": "Save",
+                                    "on-click-action": {
+                                        "name": "complete",
+                                        "payload": {
+                                            "asset_category": "${form.asset_category}",
+                                            "description": "${form.description}",
+                                            "type": "asset_request",
+                                        },
+                                    },
+                                },
+                            ],
+                        }
+                    ],
+                },
+            }
+        ],
+    }
+
+    return flow_json
+
+
+def get_attendance_request_json():
+
+    flow_json = {
+        "version": "5.0",
+        "screens": [
+            {
+                "id": "screen_one",
+                "title": "Attendance Request 1 of 2",
+                "data": {
+                    "shift": {
+                        "type": "array",
+                        "items": {
+                            "type": "object",
+                            "properties": {
+                                "id": {"type": "string"},
+                                "title": {"type": "string"},
+                            },
+                            "required": ["id", "title"],
+                        },
+                        "__example__": [
+                            {"id": "1", "title": "Regular Shift"},
+                            {"id": "2", "title": "Morning Shift"},
+                            {"id": "3", "title": "Night Shift"},
+                        ],
+                    },
+                    "work_type": {
+                        "type": "array",
+                        "items": {
+                            "type": "object",
+                            "properties": {
+                                "id": {"type": "string"},
+                                "title": {"type": "string"},
+                            },
+                            "required": ["id", "title"],
+                        },
+                        "__example__": [
+                            {"id": "1", "title": "WFH"},
+                            {"id": "2", "title": "WFO"},
+                        ],
+                    }
+                },
+                "layout": {
+                    "type": "SingleColumnLayout",
+                    "children": [
+                        {
+                            "type": "Form",
+                            "name": "flow_path",
+                            "children": [
+                                {
+                                    "type": "DatePicker",
+                                    "label": "Attendance Date",
+                                    "required": True,
+                                    "name": "attendance_date",
+                                },
+                                {
+                                    "type": "Dropdown",
+                                    "label": "Shift",
+                                    "required": True,
+                                    "name": "shift",
+                                    "data-source": "${data.shift}",
+                                },
+                                {
+                                    "type": "Dropdown",
+                                    "label": "Work Type",
+                                    "required": True,
+                                    "name": "work_type",
+                                    "data-source": "${data.work_type}",
+                                },
+                                {
+                                    "type": "TextArea",
+                                    "label": "Request Description",
+                                    "required": True,
+                                    "name": "description",
+                                },
+                                {
+                                    "type": "Footer",
+                                    "label": "Continue",
+                                    "on-click-action": {
+                                        "name": "navigate",
+                                        "next": {
+                                            "type": "screen",
+                                            "name": "screen_two",
+                                        },
+                                        "payload": {
+                                            "attendance_date": "${form.attendance_date}",
+                                            "shift": "${form.shift}",
+                                            "work_type": "${form.work_type}",
+                                            "description": "${form.description}",
+                                        },
+                                    },
+                                },
+                            ],
+                        }
+                    ],
+                },
+            },
+            {
+                "id": "screen_two",
+                "title": "Attendance Request 2 of 2",
+                "data": {
+                    "attendance_date": {"type": "string", "__example__": "Example"},
+                    "shift": {"type": "string", "__example__": "Example"},
+                    "work_type": {"type": "string", "__example__": "Example"},
+                    "description": {"type": "string", "__example__": "Example"},
+                },
+                "terminal": True,
+                "layout": {
+                    "type": "SingleColumnLayout",
+                    "children": [
+                        {
+                            "type": "Form",
+                            "name": "flow_path",
+                            "children": [
+                                {
+                                    "type": "DatePicker",
+                                    "label": "Check In Date",
+                                    "required": True,
+                                    "name": "check_in_date",
+                                },
+                                {
+                                    "type": "TextInput",
+                                    "label": "Check In Time",
+                                    "name": "check_in_time",
+                                    "required": True,
+                                    "input-type": "text",
+                                    "helper-text": "Check in time in HH:MM:SS (24 HRS format)",
+                                },
+                                {
+                                    "type": "DatePicker",
+                                    "label": "Check Out Date",
+                                    "required": True,
+                                    "name": "check_out_date",
+                                },
+                                {
+                                    "type": "TextInput",
+                                    "label": "Check Out Time",
+                                    "name": "check_out_time",
+                                    "required": True,
+                                    "input-type": "text",
+                                    "helper-text": "Check out time in HH:MM:SS (24 HRS format)",
+                                },
+                                {
+                                    "type": "TextInput",
+                                    "label": "Worked Hours",
+                                    "name": "worked_hours",
+                                    "required": True,
+                                    "input-type": "text",
+                                    "helper-text": "Worked hours in HH:MM",
+                                },
+                                {
+                                    "type": "TextInput",
+                                    "label": "Minimum Hours",
+                                    "name": "minimum_hours",
+                                    "required": True,
+                                    "input-type": "text",
+                                    "helper-text": "Minimum hours in HH:MM",
+                                },
+                                {
+                                    "type": "Footer",
+                                    "label": "Continue",
+                                    "on-click-action": {
+                                        "name": "complete",
+                                        "payload": {
+                                            "check_in_date": "${form.check_in_date}",
+                                            "check_in_time": "${form.check_in_time}",
+                                            "check_out_date": "${form.check_out_date}",
+                                            "check_out_time": "${form.check_out_time}",
+                                            "worked_hours": "${form.worked_hours}",
+                                            "minimum_hours": "${form.minimum_hours}",
+                                            "attendance_date": "${data.attendance_date}",
+                                            "shift": "${data.shift}",
+                                            "work_type": "${data.work_type}",
+                                            "description": "${data.description}",
+                                            "type": "attendance_request",
+                                        },
+                                    },
+                                },
+                            ],
+                        }
+                    ],
+                },
+            },
+        ],
+    }
+
+    return flow_json
+
+
+def get_shift_request_json():
+
+    flow_json = {
+        "version": "5.0",
+        "screens": [
+            {
+                "id": "screen_one",
+                "title": "Shift Request",
+                "terminal": True,
+                "data": {
+                    "shift": {
+                        "type": "array",
+                        "items": {
+                            "type": "object",
+                            "properties": {
+                                "id": {"type": "string"},
+                                "title": {"type": "string"},
+                            },
+                            "required": ["id", "title"],
+                        },
+                        "__example__": [
+                            {"id": "1", "title": "Regular Shift"},
+                            {"id": "2", "title": "Morning Shift"},
+                            {"id": "3", "title": "Night Shift"},
+                        ],
+                    }
+                },
+                "layout": {
+                    "type": "SingleColumnLayout",
+                    "children": [
+                        {
+                            "type": "Form",
+                            "name": "flow_path",
+                            "children": [
+                                {
+                                    "type": "Dropdown",
+                                    "label": "Shift",
+                                    "name": "shift",
+                                    "required": True,
+                                    "data-source": "${data.shift}",
+                                },
+                                {
+                                    "type": "DatePicker",
+                                    "label": "Requested Date",
+                                    "name": "requested_date",
+                                    "required": True,
+                                },
+                                {
+                                    "type": "DatePicker",
+                                    "label": "Requested Till",
+                                    "name": "requested_till",
+                                    "required": True,
+                                },
+                                {
+                                    "type": "TextArea",
+                                    "label": "Description",
+                                    "name": "description",
+                                    "required": True,
+                                },
+                                {
+                                    "type": "OptIn",
+                                    "label": "permentent request",
+                                    "name": "permenent_request",
+                                    "required": False,
+                                },
+                                {
+                                    "type": "Footer",
+                                    "label": "Save",
+                                    "on-click-action": {
+                                        "name": "complete",
+                                        "payload": {
+                                            "shift": "${form.shift}",
+                                            "requested_date": "${form.requested_date}",
+                                            "requested_till": "${form.requested_till}",
+                                            "description": "${form.description}",
+                                            "permanent": "${form.permenent_request}",
+                                            "type": "shift_request",
+                                        },
+                                    },
+                                },
+                            ],
+                        }
+                    ],
+                },
+            }
+        ],
+    }
+
+    return flow_json
+
+
+def get_work_type_request_json():
+
+    flow_json = {
+        "version": "5.0",
+        "screens": [
+            {
+                "id": "screen_one",
+                "title": "Work Type Request",
+                "terminal": True,
+                "data": {
+                    "work_type": {
+                        "type": "array",
+                        "items": {
+                            "type": "object",
+                            "properties": {
+                                "id": {"type": "string"},
+                                "title": {"type": "string"},
+                            },
+                            "required": ["id", "title"],
+                        },
+                        "__example__": [
+                            {"id": "1", "title": "WFO"},
+                            {"id": "2", "title": "WFH"},
+                        ],
+                    }
+                },
+                "layout": {
+                    "type": "SingleColumnLayout",
+                    "children": [
+                        {
+                            "type": "Form",
+                            "name": "flow_path",
+                            "children": [
+                                {
+                                    "type": "Dropdown",
+                                    "label": "work type",
+                                    "required": True,
+                                    "name": "work_type",
+                                    "data-source": "${data.work_type}",
+                                },
+                                {
+                                    "type": "DatePicker",
+                                    "label": "Requested date",
+                                    "required": True,
+                                    "name": "request_date",
+                                },
+                                {
+                                    "type": "DatePicker",
+                                    "label": "requested till",
+                                    "required": True,
+                                    "name": "requested_till",
+                                },
+                                {
+                                    "type": "TextArea",
+                                    "label": "description",
+                                    "required": True,
+                                    "name": "description",
+                                },
+                                {
+                                    "type": "OptIn",
+                                    "label": "permentent request",
+                                    "required": False,
+                                    "name": "permenent_request",
+                                },
+                                {
+                                    "type": "Footer",
+                                    "label": "Save",
+                                    "on-click-action": {
+                                        "name": "complete",
+                                        "payload": {
+                                            "work_type": "${form.work_type}",
+                                            "requested_date": "${form.request_date}",
+                                            "requested_till": "${form.requested_till}",
+                                            "description": "${form.description}",
+                                            "permenent_request": "${form.permenent_request}",
+                                            "type": "work_type",
+                                        },
+                                    },
+                                },
+                            ],
+                        }
+                    ],
+                },
+            }
+        ],
+    }
+
+    return flow_json
+
+
+def get_leave_request_json():
+
+    flow_json = {
+        "version": "5.0",
+        "screens": [
+            {
+                "id": "screen_one",
+                "title": "Leave request",
+                "terminal": True,
+                "data": {
+                    "leave_types": {
+                        "type": "array",
+                        "items": {
+                            "type": "object",
+                            "properties": {
+                                "id": {"type": "string"},
+                                "title": {"type": "string"},
+                            },
+                            "required": ["id", "title"],
+                        },
+                        "__example__": [
+                            {"id": "1", "title": "Casual Leave"},
+                            {"id": "2", "title": "Sick Leave"},
+                            {"id": "3", "title": "Paid Leave"},
+                        ],
+                    }
+                },
+                "layout": {
+                    "type": "SingleColumnLayout",
+                    "children": [
+                        {
+                            "type": "Form",
+                            "name": "flow_path",
+                            "children": [
+                                {
+                                    "type": "Dropdown",
+                                    "label": "Leave type",
+                                    "required": True,
+                                    "name": "leave_type",
+                                    "data-source": "${data.leave_types}",
+                                },
+                                {
+                                    "type": "DatePicker",
+                                    "label": "Start Date",
+                                    "required": True,
+                                    "name": "start_date",
+                                },
+                                {
+                                    "type": "Dropdown",
+                                    "label": "Start Date breakdown",
+                                    "required": True,
+                                    "name": "start_date_breakdown",
+                                    "data-source": [
+                                        {"id": "full_day", "title": "Full day"},
+                                        {"id": "first_half", "title": "First half"},
+                                        {"id": "second_half", "title": "Second Half"},
+                                    ],
+                                },
+                                {
+                                    "type": "DatePicker",
+                                    "label": "End Date",
+                                    "required": True,
+                                    "name": "end_date",
+                                },
+                                {
+                                    "type": "Dropdown",
+                                    "label": "End Date Breakdown",
+                                    "required": True,
+                                    "name": "end_date_breakdown",
+                                    "data-source": [
+                                        {"id": "full_day", "title": "Full Day"},
+                                        {"id": "first_half", "title": "First Half"},
+                                        {"id": "second_half", "title": "Second Half"},
+                                    ],
+                                },
+                                {
+                                    "type": "DocumentPicker",
+                                    "name": "document_picker",
+                                    "label": "Upload photos",
+                                    "description": "Please attach images about the received items",
+                                    "max-file-size-kb": 10240,
+                                    "max-uploaded-documents": 1,
+                                },
+                                {
+                                    "type": "TextArea",
+                                    "label": "Description",
+                                    "required": True,
+                                    "name": "description",
+                                },
+                                {
+                                    "type": "Footer",
+                                    "label": "Save",
+                                    "on-click-action": {
+                                        "name": "complete",
+                                        "payload": {
+                                            "leave_type": "${form.leave_type}",
+                                            "start_date": "${form.start_date}",
+                                            "start_date_breakdown": "${form.start_date_breakdown}",
+                                            "end_date": "${form.end_date}",
+                                            "end_date_breakdown": "${form.end_date_breakdown}",
+                                            "description": "${form.description}",
+                                            "document_picker": "${form.document_picker}",
+                                            "type": "leave_request",
+                                        },
+                                    },
+                                },
+                            ],
+                        }
+                    ],
+                },
+            }
+        ],
+    }
+
+    return flow_json
+
+
+def get_reimbursement_request_json():
+
+    flow_json = {
+        "version": "5.0",
+        "screens": [
+            {
+                "id": "screen_one",
+                "title": "Reimbursements",
+                "data": {},
+                "terminal": True,
+                "layout": {
+                    "type": "SingleColumnLayout",
+                    "children": [
+                        {
+                            "type": "Form",
+                            "name": "flow_path",
+                            "children": [
+                                {
+                                    "type": "TextInput",
+                                    "label": "Title",
+                                    "name": "title",
+                                    "required": True,
+                                    "input-type": "text",
+                                },
+                                {
+                                    "type": "DatePicker",
+                                    "label": "Allowance on",
+                                    "required": True,
+                                    "name": "allowance_date",
+                                },
+                                {
+                                    "type": "TextInput",
+                                    "label": "Amount",
+                                    "name": "amount",
+                                    "required": True,
+                                    "input-type": "number",
+                                },
+                                {
+                                    "type": "DocumentPicker",
+                                    "name": "document_picker",
+                                    "label": "Upload photos",
+                                    "description": "Please attach images about the received items",
+                                    "max-file-size-kb": 10240,
+                                    "max-uploaded-documents": 10,
+                                },
+                                {
+                                    "type": "TextArea",
+                                    "label": "description",
+                                    "required": True,
+                                    "name": "description",
+                                },
+                                {
+                                    "type": "Footer",
+                                    "label": "Save",
+                                    "on-click-action": {
+                                        "name": "complete",
+                                        "payload": {
+                                            "title": "${form.title}",
+                                            "allowance_date": "${form.allowance_date}",
+                                            "document_picker": "${form.document_picker}",
+                                            "amount": "${form.amount}",
+                                            "description": "${form.description}",
+                                            "type": "reimbursement",
+                                        },
+                                    },
+                                },
+                            ],
+                        }
+                    ],
+                },
+            }
+        ],
+    }
+
+    return flow_json
+
+
+def get_bonus_point_json():
+
+    flow_json = {
+        "version": "5.0",
+        "screens": [
+            {
+                "id": "screen_one",
+                "title": "Bonus Point",
+                "data": {},
+                "terminal": True,
+                "layout": {
+                    "type": "SingleColumnLayout",
+                    "children": [
+                        {
+                            "type": "Form",
+                            "name": "flow_path",
+                            "children": [
+                                {
+                                    "type": "TextInput",
+                                    "label": "Title",
+                                    "name": "title",
+                                    "required": True,
+                                    "input-type": "text",
+                                },
+                                {
+                                    "type": "DatePicker",
+                                    "label": "Allowance on",
+                                    "required": True,
+                                    "name": "allowance_on",
+                                },
+                                {
+                                    "type": "TextInput",
+                                    "label": "Bonus Points",
+                                    "name": "bonus_point",
+                                    "required": True,
+                                    "input-type": "number",
+                                },
+                                {
+                                    "type": "TextArea",
+                                    "label": "description",
+                                    "required": True,
+                                    "name": "description",
+                                },
+                                {
+                                    "type": "Footer",
+                                    "label": "Save",
+                                    "on-click-action": {
+                                        "name": "complete",
+                                        "payload": {
+                                            "title": "${form.title}",
+                                            "allowance_on": "${form.allowance_on}",
+                                            "bonus_point": "${form.bonus_point}",
+                                            "description": "${form.description}",
+                                            "type": "bonus_point",
+                                        },
+                                    },
+                                },
+                            ],
+                        }
+                    ],
+                },
+            }
+        ],
+    }
+
+    return flow_json
+
+
+def get_ticket_json():
+
+    ticket_type_data = [
+        {"id": str(ticket_type.id), "title": ticket_type.title}
+        for ticket_type in TicketType.objects.all()
+    ]
+
+    priority_data = [
+        {"id": "low", "title": "Low"},
+        {"id": "medium", "title": "Medium"},
+        {"id": "high", "title": "High"},
+    ]
+
+    assigning_type_data = [
+        {"id": "department", "title": "Department"},
+        {"id": "job_position", "title": "Job Position"},
+        {"id": "individual", "title": "Individual"},
+    ]
+
+    department_data = [
+        {"id": str(department.id), "title": department.department}
+        for department in Department.objects.all()
+    ]
+
+    job_position_data = [
+        {"id": str(job_position.id), "title": job_position.job_position}
+        for job_position in JobPosition.objects.all()
+    ]
+
+    individual_data = [
+        {"id": str(individual.id), "title": individual.get_full_name()}
+        for individual in Employee.objects.all()
+    ]
+
+    tags_data = [{"id": str(tag.id), "title": tag.title} for tag in Tags.objects.all()]
+
+    flow_json = {
+        "version": "5.0",
+        "screens": [
+            {
+                "id": "screen_one",
+                "title": "Raise Ticket 1 of 2",
+                "data": {},
+                "layout": {
+                    "type": "SingleColumnLayout",
+                    "children": [
+                        {
+                            "type": "Form",
+                            "name": "flow_path",
+                            "children": [
+                                {
+                                    "type": "TextInput",
+                                    "name": "title",
+                                    "label": "Title",
+                                    "required": True,
+                                    "input-type": "text",
+                                },
+                                {
+                                    "type": "Dropdown",
+                                    "label": "Ticket Type",
+                                    "required": True,
+                                    "name": "ticket_type",
+                                    "data-source": ticket_type_data,
+                                },
+                                {
+                                    "type": "Dropdown",
+                                    "label": "Priority",
+                                    "required": True,
+                                    "name": "priority",
+                                    "data-source": priority_data,
+                                },
+                                {
+                                    "type": "TextArea",
+                                    "label": "description",
+                                    "required": True,
+                                    "name": "description",
+                                },
+                                {
+                                    "type": "Footer",
+                                    "label": "Continue",
+                                    "on-click-action": {
+                                        "name": "navigate",
+                                        "next": {
+                                            "type": "screen",
+                                            "name": "screen_quhode",
+                                        },
+                                        "payload": {
+                                            "title": "${form.title}",
+                                            "ticket_type": "${form.ticket_type}",
+                                            "priority": "${form.priority}",
+                                            "description": "${form.description}",
+                                        },
+                                    },
+                                },
+                            ],
+                        }
+                    ],
+                },
+            },
+            {
+                "id": "screen_two",
+                "title": "Raise Ticket 2 of 2",
+                "data": {
+                    "title": {
+                        "type": "string",
+                        "__example__": "Example",
+                    },
+                    "ticket_type": {"type": "string", "__example__": "Example"},
+                    "priority": {"type": "string", "__example__": "Example"},
+                    "description": {"type": "string", "__example__": "Example"},
+                },
+                "terminal": True,
+                "layout": {
+                    "type": "SingleColumnLayout",
+                    "children": [
+                        {
+                            "type": "Form",
+                            "name": "flow_path",
+                            "children": [
+                                {
+                                    "type": "Dropdown",
+                                    "label": "Assigning Type",
+                                    "required": True,
+                                    "name": "assigning_type",
+                                    "data-source": assigning_type_data,
+                                },
+                                {
+                                    "type": "Dropdown",
+                                    "label": "Forward To",
+                                    "required": True,
+                                    "name": "forward_to",
+                                    "data-source": [
+                                        {"id": "0_Option_1", "title": "Option 1"},
+                                        {"id": "1_Option_2", "title": "Option 2"},
+                                    ],
+                                },
+                                {
+                                    "type": "DatePicker",
+                                    "label": "Deadline",
+                                    "required": True,
+                                    "name": "deadline",
+                                },
+                                {
+                                    "type": "Dropdown",
+                                    "label": "Tags",
+                                    "required": False,
+                                    "name": "tags",
+                                    "data-source": tags_data,
+                                },
+                                {
+                                    "type": "Footer",
+                                    "label": "Save",
+                                    "on-click-action": {
+                                        "name": "complete",
+                                        "payload": {
+                                            "screen_1_Dropdown_0": "${form.assigning_type}",
+                                            "screen_1_Dropdown_1": "${form.forward_to}",
+                                            "screen_1_DatePicker_2": "${form.deadline}",
+                                            "screen_1_Dropdown_3": "${form.tags}",
+                                            "title": "${data.title}",
+                                            "ticket_type": "${data.ticket_type}",
+                                            "priority": "${data.priority}",
+                                            "description": "${data.description}",
+                                            "type": "ticket",
+                                        },
+                                    },
+                                },
+                            ],
+                        }
+                    ],
+                },
+            },
+        ],
+    }
+    return json.dumps(flow_json)
diff --git a/whatsapp/forms.py b/whatsapp/forms.py
new file mode 100644
index 000000000..01f1fe65f
--- /dev/null
+++ b/whatsapp/forms.py
@@ -0,0 +1,45 @@
+# forms.py
+from typing import Any
+from django.forms import ValidationError
+from django.template.loader import render_to_string
+
+from base.forms import ModelForm
+from whatsapp.models import WhatsappCredientials
+
+
+class WhatsappForm(ModelForm):
+    cols = {"meta_token":12}
+    class Meta:
+        model = WhatsappCredientials
+        fields = '__all__'
+        exclude = ["is_active", "created_templates"]
+
+
+    def as_p(self):
+        """
+        Render the form fields as HTML table rows with Bootstrap styling.
+        """
+        context = {"form": self}
+        table_html = render_to_string("horilla_form.html", context)
+        return table_html
+    
+    
+    def clean(self):
+        cleaned_data = super().clean()
+        companies = cleaned_data.get("company_id")
+        is_primary = cleaned_data.get("is_primary")
+
+        if companies:
+            for company in companies:
+                existing_primary = WhatsappCredientials.objects.filter(
+                    company_id=company, is_primary=True
+                ).exclude(id=self.instance.id)
+
+                if is_primary:
+                    if existing_primary.exists():
+                        raise ValidationError(f"Company '{company.company}' already has a primary credential.")
+                else:
+                    if not existing_primary.exists():
+                        cleaned_data["is_primary"] = True
+
+        return cleaned_data
diff --git a/whatsapp/migrations/__init__.py b/whatsapp/migrations/__init__.py
new file mode 100644
index 000000000..e69de29bb
diff --git a/whatsapp/models.py b/whatsapp/models.py
new file mode 100644
index 000000000..74630694e
--- /dev/null
+++ b/whatsapp/models.py
@@ -0,0 +1,113 @@
+from django.db import models
+from django.urls import reverse
+
+from base.horilla_company_manager import HorillaCompanyManager
+from base.models import Company
+from horilla.models import HorillaModel
+from horilla_views.cbv_methods import render_template
+
+
+class WhatsappCredientials(HorillaModel):
+    meta_token = models.CharField(max_length=255)
+    meta_business_id = models.CharField(max_length=255)
+    meta_phone_number_id = models.CharField(max_length=255)
+    meta_phone_number = models.CharField(max_length=20)
+    created_templates = models.BooleanField(default=False)
+    meta_webhook_token = models.CharField(
+        max_length=50,
+        verbose_name="Webhook Token",
+        help_text="This token is used to connect webhook to the server",
+    )
+    company_id = models.ManyToManyField(Company, blank=True, verbose_name="Company")
+    is_primary = models.BooleanField(default=False)
+
+    # objects = HorillaCompanyManager()
+
+    def __str__(self):
+        return f"WhatsApp Business {self.meta_business_id} ({self.meta_phone_number})"
+
+    def token_render(self):
+
+        alert = """
+                    Swal.fire({
+                    text: "Token copied",
+                    icon: "success",
+                    showConfirmButton: false,
+                    timer: 2000,
+                    timerProgressBar: true,
+                    });
+                """
+
+        html = f"""
+        <span onclick="copyToken()" title={self.meta_token}>{self.meta_token[:20]}...</span>
+        <script>
+            function copyToken() {{
+                var token = "{self.meta_token}";
+                navigator.clipboard.writeText(token).then(function() {{
+                    {alert}
+                }}, function(err) {{
+                    console.error('Could not copy text: ', err);
+                }});
+            }}
+        </script>
+        """
+        return html
+
+    def get_update_url(self):
+        url = reverse("whatsapp-credential-update", kwargs={"pk": self.pk})
+        return url
+
+    def get_publish_button(self):
+        html = render_template(
+            path="whatsapp/option_buttons.html", context={"instance": self}
+        )
+        return html
+
+    def get_primary(self):
+        if self.is_primary:
+            return "style='background:#ffa60028'"
+
+    def get_instance(self):
+        """
+        used to return the id of the instance
+        Returns:
+            id of the instance
+        """
+        return self.pk
+
+    def get_delete_url(self):
+        url = reverse("whatsapp-credential-delete")
+        id = self.pk
+        url = f"{url}?id={id}"
+        return url
+
+    def get_test_message_url(self):
+        url = reverse("send-test-message")
+        return url
+
+    def get_webhook_token(self):
+        placeholder = "•" * len(self.meta_webhook_token)
+        html = f"""
+            <style>
+                .editable-span {{
+                    cursor: pointer;
+                }}
+                .editable-span::after {{
+                    content: '{placeholder}';
+                }}
+                .editable-span:hover::after {{
+                    content: '{self.meta_webhook_token}';
+                }}
+            </style>
+            <span class="editable-span"></span>
+            """
+        return html
+
+
+class WhatsappFlowDetails(models.Model):
+    template = models.CharField(max_length=50)
+    flow_id = models.CharField(max_length=50)
+    whatsapp_id = models.ForeignKey(WhatsappCredientials, on_delete=models.CASCADE)
+
+    def __str__(self) -> str:
+        return self.template
diff --git a/whatsapp/templates/whatsapp/credentials_view.html b/whatsapp/templates/whatsapp/credentials_view.html
new file mode 100644
index 000000000..d65689a8a
--- /dev/null
+++ b/whatsapp/templates/whatsapp/credentials_view.html
@@ -0,0 +1,53 @@
+{% extends 'settings.html' %} 
+{% load i18n static %} 
+{% block settings %}
+
+{% for path in style_path %}
+	<link rel="stylesheet" href="{{path}}"/>
+{% endfor %}
+{% for path in script_static_paths %}
+	<script src="{{path}}"></script>
+{% endfor %}
+
+{% include "generic/components.html" %}
+
+<meta name="csrf-token" content="{{ csrf_token }}" />
+
+<div class="oh-inner-sidebar-content">
+    {% if perms.base.view_department %}
+        {% if perms.base.add_department %}
+            <div hx-get="{% url "whatsapp-credential-nav" %}" hx-trigger="load">
+            </div>
+        {% endif %}
+        </div>
+        <div
+            class="oh-checkpoint-badge mb-2"
+            id="selectedInstances"
+            data-ids="[]"
+            data-clicked=""
+            style="display: none"
+        ></div>
+        <div class="oh-wrapper" hx-get="{% url "whatsapp-credential-list" %}?{{request.GET.urlencode}}" 
+            hx-trigger="load" id="listContainer">
+            <div class="animated-background">
+            </div>
+        </div>
+    {% endif %}
+</div>
+
+<div class="oh-modal" id="whatsappModal" role="dialog" aria-labelledby="whatsappModal"
+    aria-hidden="true">
+    <div class="oh-modal__dialog" style="max-width: 550px" id="whatsappFormTarget">
+        {% include "whatsapp/whatsapp_animation.html" %}
+    </div>
+</div>
+
+<script src="{% static 'cbv/deleteFunc.js' %}"></script>
+<script>
+    $(".oh-inner-sidebar__item .oh-accordion").click(function (e) { 
+		e.stopPropagation();
+		$(this).toggleClass('oh-accordion--show')
+	});
+</script>
+
+{% endblock settings %}
\ No newline at end of file
diff --git a/whatsapp/templates/whatsapp/option_buttons.html b/whatsapp/templates/whatsapp/option_buttons.html
new file mode 100644
index 000000000..af3da5efd
--- /dev/null
+++ b/whatsapp/templates/whatsapp/option_buttons.html
@@ -0,0 +1,32 @@
+{% load static i18n %} {% if not instance.created_templates %}
+<a
+    title="Create Message Template and Flows"
+    class="oh-btn oh-btn--light-bkg w-100"
+    data-toggle="oh-modal-toggle"
+    data-target="#whatsappModal"
+    hx-get="{% url 'generic-template-creation' instance.id %}"
+    aria-describedby="ui-id-2"
+>
+    <ion-icon
+        name="newspaper-outline"
+        role="img"
+        class="md hydrated"
+        aria-label="newspaper outline"
+    ></ion-icon>
+</a>
+{% else %}
+<a
+    title="Create Message Template and Flows"
+    class="oh-btn oh-btn--light-bkg w-100 oh-btn--disabled"
+    data-toggle="oh-modal-toggle"
+    data-target="#whatsappModal"
+    aria-describedby="ui-id-2"
+>
+    <ion-icon
+        name="newspaper-outline"
+        role="img"
+        class="md hydrated"
+        aria-label="newspaper outline"
+    ></ion-icon>
+</a>
+{% endif %}
diff --git a/whatsapp/templates/whatsapp/send_test_message_form.html b/whatsapp/templates/whatsapp/send_test_message_form.html
new file mode 100644
index 000000000..a01bb1f5a
--- /dev/null
+++ b/whatsapp/templates/whatsapp/send_test_message_form.html
@@ -0,0 +1,27 @@
+{% load i18n %}
+<form hx-encoding="multipart/form-data" hx-post="{% url 'send-test-message' %}" hx-target="#genericModalBody">
+    <div class="oh-modal__dialog-header">
+        <h2 class="oh-modal__dialog-title" id="createTitle">
+        {% trans "Send Test Message" %}
+        </h2>
+        <button type="button" class="oh-modal__close--custom" onclick="$(this).closest('.oh-modal--show').removeClass('oh-modal--show')" aria-label="Close">
+            <ion-icon name="close-outline" role="img" class="md hydrated" aria-label="close outline"></ion-icon>
+        </button>
+    </div>
+    <div class="oh-modal__dialog-body oh-modal__dialog-relative">
+        {% csrf_token %}
+        <div class="row">
+            <div class="col-12">
+                <div class="oh-input__group">
+                    <label class="oh-input__label" for="id_allowed_time">{% trans "Phone number" %}</label>
+                    <input type="text" name="number" placeholder="Phone number" class="oh-input w-100" required id="id_number">
+                </div>
+            </div>
+        </div>
+        <div class="oh-modal__dialog-footer p-0 mt-3">
+            <button type="submit" class="oh-btn oh-btn--secondary oh-btn--shadow">
+                {% trans "Send" %}
+            </button>
+        </div>
+    </div>
+</form>
\ No newline at end of file
diff --git a/whatsapp/templates/whatsapp/whatsapp_animation.html b/whatsapp/templates/whatsapp/whatsapp_animation.html
new file mode 100644
index 000000000..6e63d72d1
--- /dev/null
+++ b/whatsapp/templates/whatsapp/whatsapp_animation.html
@@ -0,0 +1,91 @@
+{% load i18n %} {% load static %}
+<style>
+    @keyframes biometricPulse {
+        from {
+            transform: translateX(-10%);
+        }
+        to {
+            transform: translateX(100%);
+        }
+    }
+    #mask-biometric-animation {
+        animation: biometricPulse 2s linear 0.1s infinite;
+    }
+    .hr-biometric {
+        width: 200px;
+        height: auto;
+        object-fit: contain;
+    }
+    .hr-biometric-container {
+        position: absolute; /* or position: relative; */
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+    }
+    .hr-biometric-message {
+        color: #303030;
+        display: block;
+        margin-top: 1.25rem;
+    }
+</style>
+<div class="hr-biometric-container">
+    <!-- SVG CODE -->
+    <svg
+        class="hr-biometric"
+        width="1102"
+        height="339"
+        viewBox="0 0 1102 339"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <mask
+            id="mask0_703_126"
+            style="mask-type: alpha"
+            maskUnits="userSpaceOnUse"
+            x="0"
+            y="42"
+            width="606"
+            height="262"
+        >
+            <path
+                d="M0.5 221.5H225.5L322 135.5V301.5L407.5 60.5L434.5 221.5H606"
+                stroke="white"
+                stroke-width="9"
+            />
+        </mask>
+        <g mask="url(#mask0_703_126)">
+            <rect
+                x="-561"
+                y="-262"
+                width="669"
+                height="686"
+                id="mask-biometric-animation"
+                fill="#E54F38"
+            />
+        </g>
+        <g
+            xmlns="http://www.w3.org/2000/svg"
+            transform="translate(650, 0)"
+        >
+            <g id="whatsapp" transform="scale(2.3)">
+                <g id="icon" fill="none" stroke="#0BDA51" stroke-width="4">
+                    <path
+                        d="m126.8 49.2a54.57 54.57 0 0 0 -87.42 63.13l-5.79 28.11a2.08 2.08 0 0 0 .33 1.63 2.11 2.11 0 0 0 2.24.87l27.55-6.53a54.56 54.56 0 0 0 63.09-87.21zm-8.59 68.56a42.74 42.74 0 0 1 -49.22 8l-3.84-1.9-16.89 4 .05-.21 3.5-17-1.88-3.71a42.72 42.72 0 0 1 7.86-49.59 42.73 42.73 0 0 1 60.42 0 2.28 2.28 0 0 0 .22.22 42.72 42.72 0 0 1 -.22 60.19z"
+                        stroke="#0BDA51"
+                    />
+                    <path
+                        d="m116.71 105.29c-2.07 3.26-5.34 7.25-9.45 8.24-7.2 1.74-18.25.06-32-12.76l-.17-.15c-12.09-11.21-15.23-20.54-14.47-27.94.42-4.2 3.92-8 6.87-10.48a3.93 3.93 0 0 1 6.15 1.41l4.45 10a3.91 3.91 0 0 1 -.49 4l-2.25 2.92a3.87 3.87 0 0 0 -.35 4.32c1.26 2.21 4.28 5.46 7.63 8.47 3.76 3.4 7.93 6.51 10.57 7.57a3.82 3.82 0 0 0 4.19-.88l2.61-2.63a4 4 0 0 1 3.9-1l10.57 3a4 4 0 0 1 2.24 5.91z"
+                        stroke="#0BDA51"
+                    />
+                </g>
+            </g>
+        </g>
+    </svg>
+
+    <!-- END OF SVG CODE -->
+    <span class="hr-biometric-message">{% trans "Trying to connect..." %}</span>
+</div>
diff --git a/whatsapp/tests.py b/whatsapp/tests.py
new file mode 100644
index 000000000..7ce503c2d
--- /dev/null
+++ b/whatsapp/tests.py
@@ -0,0 +1,3 @@
+from django.test import TestCase
+
+# Create your tests here.
diff --git a/whatsapp/urls.py b/whatsapp/urls.py
new file mode 100644
index 000000000..dec63ecc4
--- /dev/null
+++ b/whatsapp/urls.py
@@ -0,0 +1,63 @@
+from django.urls import path
+from . import views
+from whatsapp.cbv import whatsapp
+
+urlpatterns = [
+    path("", views.whatsapp, name="whatsapp"),
+    path(
+        "template-creation/",
+        views.create_flows,
+        name="template-creation",
+    ),
+    path(
+        "generic-template-creation/<int:id>/",
+        views.create_generic_templates,
+        name="generic-template-creation",
+    ),
+    # path(
+    #     "end-point/",
+    #     views.end_point,
+    #     name="end-point",
+    # ),
+    # path(
+    #     "leave-request/",
+    #     views.end_point,
+    #     name="leave-request",
+    # ),
+
+    path(
+        "whatsapp-credential-view/",
+        views.whatsapp_credential_view,
+        name="whatsapp-credential-view",
+    ),
+    path(
+        "whatsapp-credential-list/",
+        whatsapp.CredentialListView.as_view(),
+        name="whatsapp-credential-list",
+    ),
+    path(
+        "whatsapp-credential-nav/",
+        whatsapp.CredentialNav.as_view(),
+        name="whatsapp-credential-nav",
+    ),
+    path(
+        "whatsapp-credential-create/",
+        whatsapp.CredentialForm.as_view(),
+        name="whatsapp-credential-create",
+    ),
+    path(
+        "whatsapp-credential-update/<int:pk>/",
+        whatsapp.CredentialForm.as_view(),
+        name="whatsapp-credential-update",
+    ),
+    path(
+        "whatsapp-credential-delete",
+        whatsapp.delete_credentials,
+        name="whatsapp-credential-delete",
+    ),
+    path(
+        "send-test-message",
+        whatsapp.send_test_message,
+        name="send-test-message",
+    ),
+]
diff --git a/whatsapp/utils.py b/whatsapp/utils.py
new file mode 100644
index 000000000..70eacd599
--- /dev/null
+++ b/whatsapp/utils.py
@@ -0,0 +1,971 @@
+import json
+import requests
+import inspect
+
+from django.http import QueryDict
+from django.test import RequestFactory
+from django.middleware.csrf import get_token
+from django.utils.datastructures import MultiValueDict
+from django.core.files.base import ContentFile
+from django.core.files.uploadedfile import SimpleUploadedFile
+from django.contrib.sessions.backends.db import SessionStore
+from django.contrib.sessions.middleware import SessionMiddleware
+from django.contrib.messages.storage.fallback import FallbackStorage
+
+from asset.models import AssetCategory
+from base.models import Company, EmployeeShift, WorkType
+from employee.models import Employee
+from horilla.horilla_middlewares import _thread_locals
+from whatsapp.models import WhatsappCredientials, WhatsappFlowDetails
+
+
+# PERM_TOKEN = "EAAM3cI4xxBkBO6fvkk6TjpkZC0TKLeFk4YBGUp6ZBJZCmNhcjcrmcX0VMrUnvlYgnmErFWMNlZAvRfnZAboFDl4eTuuuO3a4LH8ZB5CWFuiF9GDXdHw1NYB9UCHKMBGIVsVH1GNb3JVqmcrokfq7iABRtZBPEZA3pyDPWXmkN06gu1RyfjV6hQe6cl9wvO1AgmkhLgZDZD"
+# META_TOKEN = "EAAM3cI4xxBkBOwevhATEliQ7GI4S2WMZCdmX lJ5wiZCu1o3xSvQUZCAlVL7scfbUXlZBkIHEbaFJGw094vR4v7CmgBtXNqy68InXJZCg9sL2ZB4ZCgORUNZCWd7o92cNzZBQ07pgj8vF0ZB4KRNQMoUVlFZAqLGA5EOLEgsXjZAbZAndiqKRUBeZA3ytpICIVuVuWPGuRTGa8lDLAgZBIwCRqhnM5oZD"
+# META_TOKEN = PERM_TOKEN
+
+class CustomRequestFactory(RequestFactory):
+    """
+    Custom request factory to create mock POST requests with session and messages enabled.
+    """
+
+    def __init__(self, *args, **kwargs):
+        super().__init__(*args, **kwargs)
+        self.FILES = MultiValueDict()
+
+    def _add_session_and_messages(self, request):
+        """
+        Add session and messages middleware to the request.
+
+        Args:
+            request: Django HttpRequest object to add session and messages.
+
+        Returns:
+            Modified request with session and messages added.
+        """
+
+        middleware = SessionMiddleware(lambda req: None)
+        middleware.process_request(request)
+        request.session.save()
+        request._messages = FallbackStorage(request)
+
+
+def get_meta_details_from_number(number):
+    emp_company = Employee.objects.filter(phone=number).first().get_company()
+    company = emp_company if emp_company else Company.objects.filter(hq=True).first()
+
+    credentials = WhatsappCredientials.objects.filter(company_id=company)
+    credentials = (
+        credentials.get(is_primary=True)
+        if credentials.get(is_primary=True)
+        else credentials.first()
+    )
+    url = (
+        f"https://graph.facebook.com/v21.0/{credentials.meta_phone_number_id}/messages"
+    )
+    data = {
+        "token": credentials.meta_token,
+        "url": url,
+        "business_id": credentials.meta_business_id,
+        "credentials": credentials,
+    }
+
+    return data
+
+
+def get_meta_details_from_id(cred_id):
+    credentials = WhatsappCredientials.objects.get(id=cred_id)
+    url = (
+        f"https://graph.facebook.com/v21.0/{credentials.meta_phone_number_id}/messages"
+    )
+    data = {
+        "token": credentials.meta_token,
+        "url": url,
+        "business_id": credentials.meta_business_id,
+    }
+    return data
+
+
+def create_template_buttons(cred_id):
+    """
+    Creates a message template with buttons for different request types.
+
+    Sends a POST request to the WhatsApp Business API to create a new template
+    that includes various quick reply buttons for the user to choose from.
+
+    Returns:
+        dict: The JSON response from the API containing the status of the request.
+    """
+    data = get_meta_details_from_id(cred_id)
+    api_url = f'https://graph.facebook.com/v21.0/{data.get("business_id","")}/message_templates'
+    token = data.get("token", "")
+    headers = {"Authorization": f"Bearer {token}", "Content-Type": "application/json"}
+
+    buttons = [
+        "Asset Request",
+        "Attendance Request",
+        "Bonus Point Redeem",
+        "Leave Request",
+        "Reimbursement Request",
+        "Shift Request",
+        "Work Type Request",
+    ]
+
+    quick_reply_buttons = [{"type": "QUICK_REPLY", "text": btn} for btn in buttons]
+
+    payload = {
+        "name": "button_template",
+        "language": "en_US",
+        "category": "utility",
+        "components": [
+            {"type": "HEADER", "format": "TEXT", "text": "Create Request"},
+            {
+                "type": "BODY",
+                "text": "Choose a button from below to create the requests",
+            },
+            {"type": "BUTTONS", "buttons": quick_reply_buttons},
+        ],
+    }
+
+    try:
+        response = requests.post(api_url, headers=headers, json=payload)
+        print(response.json())
+        if response.status_code == 200:
+            return response.json()
+        else:
+            return {"status": response.json()}
+    except requests.exceptions.RequestException as e:
+        return {"status": "error", "message": str(e)}
+
+
+def create_welcome_message(cred_id):
+    """
+    Creates a welcome message template.
+
+    Sends a POST request to the WhatsApp Business API to create a welcome message
+    template that responds to users when they contact the business.
+
+    Returns:
+        dict: The JSON response from the API containing the status of the request.
+    """
+    data = get_meta_details_from_id(cred_id)
+    api_url = f'https://graph.facebook.com/v21.0/{data.get("business_id","")}/message_templates'
+    token = data.get("token", "")
+    headers = {"Authorization": f"Bearer {token}", "Content-Type": "application/json"}
+
+    payload = {
+        "name": "welcome_message",
+        "language": "en_US",
+        "category": "utility",
+        "components": [
+            {
+                "type": "BODY",
+                "text": "Thanks for conatcting us, For further help send *'help'*. Thank you",
+            },
+        ],
+    }
+
+    try:
+        response = requests.post(api_url, headers=headers, json=payload)
+        print(response.json())
+        if response.status_code == 200:
+            return response.json()
+        else:
+            return {"status": response.json()}
+    except requests.exceptions.RequestException as e:
+        return {"status": "error", "message": str(e)}
+
+
+def create_help_message(cred_id):
+    """
+    Creates a help message template.
+
+    Sends a POST request to the WhatsApp Business API to create a help message template
+    that provides users with instructions on how to create various forms.
+
+    Returns:
+        dict: The JSON response from the API containing the status of the request.
+    """
+    data = get_meta_details_from_id(cred_id)
+    api_url = f'https://graph.facebook.com/v21.0/{data.get("business_id","")}/message_templates'
+    token = data.get("token", "")
+    headers = {"Authorization": f"Bearer {token}", "Content-Type": "application/json"}
+
+    body_text = """
+    To create a request, send any of the following keywords. You can use capital or small letters, and spaces can be included or excluded.
+
+    Asset Request : Send *'asset'*
+    Bonus Point Redeem : Send *'bonus'* or *'bonus point'*
+    Attendance Request : Send *'attendance'*
+    Leave Request : Send *'leave'*
+    Reimbursement Request : Send *'reimbursement'*
+    Shift Request : Send *'shift'*
+    Work Type Request : Send *'work type'*
+    """
+
+    payload = {
+        "name": "help_text",
+        "language": "en_US",
+        "category": "utility",
+        "components": [
+            {"type": "HEADER", "format": "TEXT", "text": "Keywords"},
+            {"type": "BODY", "text": body_text},
+        ],
+    }
+
+    try:
+        response = requests.post(api_url, headers=headers, json=payload)
+        print(response.json())
+        if response.status_code == 200:
+            return response.json()
+        else:
+            return {"status": response.json()}
+    except requests.exceptions.RequestException as e:
+        return {"status": "error", "message": str(e)}
+
+
+def send_image_message(number, link):
+    """
+    Sends an image message to a specific WhatsApp number.
+
+    Args:
+        number (str): The recipient's phone number.
+        link (str): The URL link to the image to be sent.
+
+    Returns:
+        bool: True if the message was sent successfully, False otherwise.
+    """
+    data = get_meta_details_from_number(number)
+    headers = {
+        "Authorization": f'Bearer {data.get("token","")}',
+        "Content-Type": "application/json",
+    }
+    payload = {
+        "messaging_product": "whatsapp",
+        "recipient_type": "individual",
+        "to": number,
+        "type": "image",
+        "image": {
+            "link": link,
+        },
+    }
+    response = requests.post(data.get("url", ""), json=payload, headers=headers)
+
+    print(response.json())
+    return response.status_code == 200
+
+
+def send_document_message(number, link):
+    """
+    Sends an image message to a specific WhatsApp number.
+
+    Args:
+        number (str): The recipient's phone number.
+        link (str): The URL link to the image to be sent.
+
+    Returns:
+        bool: True if the message was sent successfully, False otherwise.
+    """
+
+    data = get_meta_details_from_number(number)
+    headers = {
+        "Authorization": f'Bearer {data.get("token","")}',
+        "Content-Type": "application/json",
+    }
+    url = data.get("url", "")
+    payload = {
+        "messaging_product": "whatsapp",
+        "recipient_type": "individual",
+        "to": number,
+        "type": "document",
+        "document": {
+            "link": link,
+        },
+    }
+    response = requests.post(url, json=payload, headers=headers)
+
+    print(response.json())
+    return response.status_code == 200
+
+
+def send_text_message(number, message, header=None):
+    """
+    Sends a text message to a specific WhatsApp number.
+
+    Args:
+        number (str): The recipient's phone number.
+        message (str): The text message to be sent.
+
+    Returns:
+        bool: True if the message was sent successfully, False otherwise.
+    """
+    data = get_meta_details_from_number(number)
+    headers = {
+        "Authorization": f'Bearer {data.get("token","")}',
+        "Content-Type": "application/json",
+    }
+    url = data.get("url", "")
+
+    full_message = f"*{header}*\n\n{message}" if header else message
+
+    payload = {
+        "messaging_product": "whatsapp",
+        "recipient_type": "individual",
+        "to": number,
+        "type": "text",
+        "text": {
+            "body": full_message,
+        },
+    }
+
+    response = requests.post(url, json=payload, headers=headers)
+    print(response.json())
+    return response.status_code == 200
+
+
+def send_template_message(number, template_name, ln_code="en_US"):
+    """
+    Sends a template message to a specific WhatsApp number.
+
+    Args:
+        number (str): The recipient's phone number.
+        template_name (str): The name of the template to be sent.
+        ln_code (str): The language code for the message (default is "en_US").
+
+    Returns:
+        dict: The JSON response from the API containing the status of the request.
+    """
+
+    data = get_meta_details_from_number(number)
+    headers = {
+        "Authorization": f'Bearer {data.get("token","")}',
+        "Content-Type": "application/json",
+    }
+    url = data.get("url", "")
+
+    payload = {
+        "messaging_product": "whatsapp",
+        "recipient_type": "individual",
+        "to": number,
+        "type": "template",
+        "template": {
+            "name": template_name,
+            "language": {"code": ln_code},
+            "components": [],
+        },
+    }
+    response = requests.post(url, headers=headers, json=payload)
+    print(response.json())
+    return response
+
+
+def send_flow_message(to, template_name):
+    """
+    Sends an interactive flow message to a specific WhatsApp number.
+
+    Args:
+        to (str): The recipient's phone number.
+        template_name (str): The name of the flow template to be sent.
+
+    Returns:
+        dict: The JSON response from the API containing the status of the request.
+    """
+
+    data = get_meta_details_from_number(to)
+    headers = {
+        "Authorization": f'Bearer {data.get("token","")}',
+        "Content-Type": "application/json",
+    }
+    url = data.get("url", "")
+
+    flow_id = (
+        WhatsappFlowDetails.objects.filter(
+            template=template_name, whatsapp_id=data.get("credentials").id
+        )
+        .first()
+        .flow_id
+    )
+    employee = Employee.objects.get(phone=to)
+    details = flow_message_details(template_name, employee)
+
+    flow_paylod = {
+        "screen": "screen_one",
+    }
+    if details.get("data"):
+        flow_paylod["data"] = details.get("data")
+
+    payload = {
+        "recipient_type": "individual",
+        "messaging_product": "whatsapp",
+        "to": to,
+        "type": "interactive",
+        "interactive": {
+            "type": "flow",
+            "header": {"type": "text", "text": details.get("header", None)},
+            "body": {"text": details.get("body", None)},
+            "action": {
+                "name": "flow",
+                "parameters": {
+                    "flow_message_version": "3",
+                    "flow_token": "flow_token",
+                    "flow_id": flow_id,
+                    "flow_cta": details.get("button", {}),
+                    "flow_action_payload": flow_paylod,
+                },
+            },
+        },
+    }
+
+    response = requests.post(url, headers=headers, json=payload)
+
+    print(response.json())
+    return response.json()
+
+
+def flow_message_details(template_name, employee):
+    """
+    Retrieves the flow message details for a specific template name.
+
+    Args:
+        template_name (str): The name of the flow template.
+        employee (Employee): The employee object containing available leave and shift data.
+
+    Returns:
+        dict: A dictionary containing details like header, body, button, and associated data for the flow.
+    """
+
+    leave_types_data = [
+        {
+            "id": str(available_leave.leave_type_id.id),
+            "title": available_leave.leave_type_id.name,
+        }
+        for available_leave in employee.available_leave.all()
+    ]
+    shift_data = [
+        {"id": str(shift.id), "title": shift.employee_shift}
+        for shift in EmployeeShift.objects.all()
+    ]
+    work_type_data = [
+        {"id": str(work_type.id), "title": work_type.work_type}
+        for work_type in WorkType.objects.all()
+    ]
+    asset_data = [
+        {"id": str(asset.id), "title": asset.asset_category_name}
+        for asset in AssetCategory.objects.all()
+    ]
+
+    details = {
+        "leave": {
+            "header": "Leave Request",
+            "body": "To proceed with your leave request, Please fill out the following form",
+            "button": "Add Leave Request",
+            "data": {"leave_types": leave_types_data},
+        },
+        "asset": {
+            "header": "Asset Request",
+            "body": "To proceed with your asset request, Please fill out the following form",
+            "button": "Add Asset Request",
+            "data": {"asset_categories": asset_data},
+        },
+        "shift": {
+            "header": "Shift Request",
+            "body": "To proceed with your shift request, Please fill out the following form",
+            "button": "Add Shift Request",
+            "data": {"shift": shift_data},
+        },
+        "work_type": {
+            "header": "Work Type Request",
+            "body": "To proceed with your work type request, Please fill out the following form",
+            "button": "Add Work Type Request",
+            "data": {"work_type": work_type_data},
+        },
+        "attendance": {
+            "header": "Attendnace Request",
+            "body": "To proceed with your attendnace request, Please fill out the following form",
+            "button": "Add Attendnace Request",
+            "data": {"shift": shift_data, "work_type": work_type_data},
+        },
+        "bonus_point": {
+            "header": "Bonus Point Redeem Request",
+            "body": "To proceed with your bonus point redeem request, Please fill out the following form",
+            "button": "Redeem Bonus point",
+        },
+        "reimbursement": {
+            "header": "Reimbursement Request",
+            "body": "To proceed with your reimbursement request, Please fill out the following form",
+            "button": "Add Reimbursement Request",
+        },
+    }
+
+    return details.get(template_name)
+
+
+def create_request(
+    employee,
+    flow_response,
+    data,
+    form_class,
+    view_function,
+    message_header,
+    attachments=None,
+):
+    """
+    Generic function to create a request, populate form data, validate, and call a view.
+
+    Args:
+        employee: Employee instance, used for user and employee-specific data.
+        flow_response: Dictionary containing specific data for the request.
+        data: Form data dictionary specific to the request type.
+        form_class: Form class to validate request data.
+        view_function: View function to process the request.
+        attachments: List of files (optional) to include in the request.
+
+    Returns:
+        Success or error message from form validation and view execution.
+    """
+
+    factory = CustomRequestFactory()
+    request = factory.post("/")
+    request.session = SessionStore()
+    request.session.create()
+    token = get_token(request)
+
+    data["csrfmiddlewaretoken"] = token
+    request.POST = QueryDict("", mutable=True)
+    request.POST.update(data)
+    request.user = employee.employee_user_id
+    factory._add_session_and_messages(request)
+    _thread_locals.request = request
+
+    if attachments:
+        for idx, attachment in enumerate(attachments):
+            request.FILES.appendlist(
+                "attachment",
+                SimpleUploadedFile(
+                    attachment.name,
+                    attachment.read(),
+                    content_type="application/octet-stream",
+                ),
+            )
+
+    request.POST = data
+    form = form_class(request.POST, files=request.FILES if attachments else None)
+    if form.is_valid():
+        message = f"{message_header} created successfully"
+    else:
+        form_errors = dict(form.errors)
+        message = "\n".join(
+            f"{message_header if field == '__all__' else field}: {', '.join(errors)}"
+            for field, errors in form_errors.items()
+        )
+    try:
+        function = inspect.unwrap(view_function)
+        _response = function(request=request)
+    except Exception as e:
+        print(f"Error in {view_function.__name__}: {e}")
+
+    return message
+
+
+def shift_create(employee, flow_response):
+    """
+    Creates a shift request for the specified employee using the provided flow response data.
+
+    Args:
+        employee: Employee instance submitting the shift request.
+        flow_response: Dictionary containing shift-specific data like shift ID and dates.
+
+    Returns:
+        Message indicating the success or failure of the request.
+    """
+
+    from base.forms import ShiftRequestForm
+    from base.views import shift_request as shift_request_creation
+
+    data = {
+        "employee_id": employee.id,
+        "shift_id": flow_response["shift"],
+        "requested_date": flow_response["requested_date"],
+        "requested_till": flow_response["requested_till"],
+        "is_permanent_shift": flow_response.get("permenent_request", False),
+        "description": flow_response["description"],
+    }
+    return create_request(
+        employee,
+        flow_response,
+        data,
+        ShiftRequestForm,
+        shift_request_creation,
+        "Shift request",
+    )
+
+
+def work_type_create(employee, flow_response):
+    """
+    Creates a work type request for the specified employee.
+
+    Args:
+        employee: Employee instance submitting the work type request.
+        flow_response: Dictionary with work type request data.
+
+    Returns:
+        Message indicating the success or failure of the request.
+    """
+
+    from base.forms import WorkTypeRequestForm
+    from base.views import work_type_request as work_type_request_creation
+
+    data = {
+        "employee_id": employee.id,
+        "work_type_id": flow_response["work_type"],
+        "requested_date": flow_response["requested_date"],
+        "requested_till": flow_response["requested_till"],
+        "is_permanent_work_type": flow_response.get("permenent_request", False),
+        "description": flow_response["description"],
+    }
+    return create_request(
+        employee,
+        flow_response,
+        data,
+        WorkTypeRequestForm,
+        work_type_request_creation,
+        "Work type request",
+    )
+
+
+def leave_request_create(employee, flow_response):
+    """
+    Creates a leave request for the specified employee, optionally with an attachment.
+
+    Args:
+        employee: Employee instance submitting the leave request.
+        flow_response: Dictionary with leave-specific data, including optional attachment info.
+
+    Returns:
+        Message indicating the success or failure of the request.
+    """
+
+    from leave.forms import UserLeaveRequestCreationForm
+    from leave.views import leave_request_create as leave_req_creation
+
+    media_id = (
+        flow_response.get("document_picker")[0]["id"]
+        if flow_response.get("document_picker")
+        else None
+    )
+    file_name = (
+        flow_response.get("document_picker")[0]["file_name"]
+        if flow_response.get("document_picker")
+        else None
+    )
+    attachment_file = get_whatsapp_media_file(media_id, file_name) if media_id else None
+
+    data = {
+        "employee_id": employee.id,
+        "leave_type_id": flow_response["leave_type"],
+        "start_date": flow_response["start_date"],
+        "start_date_breakdown": flow_response["start_date_breakdown"],
+        "end_date": flow_response["end_date"],
+        "end_date_breakdown": flow_response["end_date_breakdown"],
+        "description": flow_response["description"],
+    }
+    attachments = [attachment_file] if attachment_file else None
+    return create_request(
+        employee,
+        flow_response,
+        data,
+        UserLeaveRequestCreationForm,
+        leave_req_creation,
+        "Leave request",
+        attachments,
+    )
+
+
+def asset_request_create(employee, flow_response):
+    """
+    Creates an asset request for the specified employee.
+
+    Args:
+        employee: Employee instance submitting the asset request.
+        flow_response: Dictionary with asset request data.
+
+    Returns:
+        Message indicating the success or failure of the request.
+    """
+
+    from asset.forms import AssetRequestForm
+    from asset.views import asset_request_creation
+
+    data = {
+        "requested_employee_id": employee.id,
+        "asset_category_id": flow_response["asset_category"],
+        "description": flow_response["description"],
+    }
+    return create_request(
+        employee,
+        flow_response,
+        data,
+        AssetRequestForm,
+        asset_request_creation,
+        "Asset request",
+    )
+
+
+def attendance_request_create(employee, flow_response):
+    """
+    Creates an attendance request for the specified employee.
+
+    Args:
+        employee: Employee instance submitting the attendance request.
+        flow_response: Dictionary with attendance-specific data.
+
+    Returns:
+        Message indicating the success or failure of the request.
+    """
+
+    from attendance.forms import NewRequestForm
+    from attendance.views.requests import request_new as attendance_request_creation
+
+    data = {
+        "employee_id": employee.id,
+        "attendance_date": flow_response["attendance_date"],
+        "shift_id": flow_response["shift"],
+        "work_type_id": flow_response["work_type"],
+        "attendance_clock_in_date": flow_response["check_in_date"],
+        "attendance_clock_in": flow_response["check_in_time"],
+        "attendance_clock_out_date": flow_response["check_out_date"],
+        "attendance_clock_out": flow_response["check_out_time"],
+        "attendance_worked_hour": flow_response["worked_hours"],
+        "minimum_hour": flow_response["minimum_hours"],
+        "request_description": flow_response["description"],
+    }
+    return create_request(
+        employee,
+        flow_response,
+        data,
+        NewRequestForm,
+        attendance_request_creation,
+        "Attendance request",
+    )
+
+
+def bonus_point_create(employee, flow_response):
+    """
+    Creates a bonus point redemption request for the specified employee.
+
+    Args:
+        employee: Employee instance submitting the bonus point redemption request.
+        flow_response: Dictionary with bonus point redemption data.
+
+    Returns:
+        Message indicating the success or failure of the request.
+    """
+
+    from payroll.forms.component_forms import ReimbursementForm
+    from payroll.views.component_views import create_reimbursement
+
+    data = {
+        "employee_id": employee.id,
+        "title": flow_response["title"],
+        "type": "bonus_encashment",
+        "allowance_on": flow_response["allowance_on"],
+        "bonus_to_encash": flow_response["bonus_point"],
+        "description": flow_response["description"],
+    }
+    return create_request(
+        employee,
+        flow_response,
+        data,
+        ReimbursementForm,
+        create_reimbursement,
+        "Bonus point redemption request",
+    )
+
+
+def reimbursement_create(employee, flow_response):
+    """
+    Creates a reimbursement request for the specified employee, including any attachments.
+
+    Args:
+        employee: Employee instance submitting the reimbursement request.
+        flow_response: Dictionary with reimbursement data, including optional attachments.
+
+    Returns:
+        Message indicating the success or failure of the request.
+    """
+
+    from payroll.forms.component_forms import ReimbursementForm
+    from payroll.views.component_views import create_reimbursement
+
+    data = get_meta_details_from_number(employee.phone)
+    attachments = [
+        get_whatsapp_media_file(image["id"], image["file_name"], data.get("token", ""))
+        for image in flow_response.get("document_picker", [])
+        if image.get("id") and image.get("file_name")
+    ]
+    data = {
+        "employee_id": employee.id,
+        "title": flow_response["title"],
+        "type": "reimbursement",
+        "allowance_on": flow_response["allowance_date"],
+        "amount": flow_response["amount"],
+        "description": flow_response["description"],
+    }
+    return create_request(
+        employee,
+        flow_response,
+        data,
+        ReimbursementForm,
+        create_reimbursement,
+        "Reimbursemnt",
+        attachments,
+    )
+
+
+def get_whatsapp_media_file(media_id, file_name, token):
+    """
+    Fetches a media file from WhatsApp using its media ID.
+
+    Args:
+        media_id (str): The ID of the media to fetch.
+        file_name (str): The base name to use for saving the media file.
+
+    Returns:
+        ContentFile: A Django ContentFile object containing the media data, or None if the fetch fails.
+    """
+
+    url = f"https://graph.facebook.com/v21.0/{media_id}"
+    headers = {"Authorization": f"Bearer {token}"}
+
+    response = requests.get(url, headers=headers)
+    if response.status_code == 200:
+        media_data = response.json()
+        media_url = media_data.get("url")
+        file = download_whatsapp_media(media_url, file_name, token)
+        return file
+    else:
+        print(f"Failed to fetch media: {response.text}")
+        return None
+
+
+def download_whatsapp_media(media_url, file_name, token):
+    """
+    Downloads media from a given URL and saves it as a ContentFile.
+
+    Args:
+        media_url (str): The URL of the media to download.
+        file_name (str): The name to save the downloaded media file as.
+
+    Returns:
+        ContentFile: A Django ContentFile object containing the media data, or None if the download fails.
+    """
+
+    headers = {"Authorization": f"Bearer {token}"}
+    response = requests.get(media_url, headers=headers)
+    if response.status_code == 200:
+        content_type = response.headers.get("Content-Type")
+        extension = content_type.split("/")[-1]
+        file_name = f"{file_name[:50]}.{extension}"
+        file_content = ContentFile(response.content)
+        file_content.name = file_name
+        return file_content
+    else:
+        print(f"Failed to download media: {response.status_code}")
+        return None
+
+
+def create_flow(flow_name, template_name, cred_id):
+    """
+    Creates a new flow in WhatsApp Business API.
+
+    Args:
+        flow_name (str): The name of the flow to create.
+        template_name (str): The name of the template associated with the flow.
+
+    Returns:
+        Response: The JSON response from the API, or error details if the creation fails.
+    """
+    credential = WhatsappCredientials.objects.get(id=cred_id)
+
+    headers = {
+        "Authorization": f"Bearer {credential.meta_token}",
+        "Content-Type": "application/json",
+    }
+    data = {"name": flow_name, "categories": "OTHER"}
+    response = requests.post(
+        f"https://graph.facebook.com/v21.0/{credential.meta_business_id}/flows",
+        json=data,
+        headers=headers,
+    )
+
+    if response.status_code != 200:
+        print(f"Error in creating flow: {response.json()}")
+        return response
+
+    try:
+        flow_id = response.json().get("id")
+        obj, created = WhatsappFlowDetails.objects.get_or_create(
+            template=template_name,
+            whatsapp_id=credential,
+            defaults={"flow_id": flow_id},
+        )
+        if not created:
+            obj.flow_id = flow_id
+            obj.save()
+        return response
+    except KeyError:
+        print("Error: 'id' not found in response")
+        return response
+
+
+def update_flow(flow_id, flow_json, token):
+    """
+    Updates an existing flow with new data.
+
+    Args:
+        flow_id (str): The ID of the flow to update.
+        flow_json (dict): The JSON object containing the new flow data.
+
+    Returns:
+        Response: The JSON response from the API, or error details if the update fails.
+    """
+
+    url = f"https://graph.facebook.com/v21.0/{flow_id}/assets"
+    headers = {"Authorization": f"Bearer {token}"}
+
+    with open("flow.json", "w") as file:
+        json.dump(flow_json, file, indent=2)
+
+    with open("flow.json", "rb") as file:
+        files = {
+            "file": ("flow.json", file, "application/json"),
+            "name": (None, "flow.json"),
+            "asset_type": (None, "FLOW_JSON"),
+        }
+        response = requests.post(url, headers=headers, files=files)
+
+    if response.status_code != 200:
+        print(f"Error in updating flow: {response.json()}")
+
+    return response
+
+
+def publish_flow(flow_id, token):
+    """
+    Publishes a flow in WhatsApp Business API.
+
+    Args:
+        flow_id (str): The ID of the flow to publish.
+
+    Returns:
+        Response: The JSON response from the API, or error details if the publication fails.
+    """
+
+    headers = {"Authorization": f"Bearer {token}"}
+    response = requests.post(
+        f"https://graph.facebook.com/v21.0/{flow_id}/publish", headers=headers
+    )
+
+    if response.status_code != 200:
+        print(f"Error in publishing flow: {response.json()}")
+
+    return response
diff --git a/whatsapp/views.py b/whatsapp/views.py
new file mode 100644
index 000000000..b40833bf9
--- /dev/null
+++ b/whatsapp/views.py
@@ -0,0 +1,491 @@
+import json
+import logging
+import string
+import threading
+from bs4 import BeautifulSoup
+
+from django.http.response import HttpResponse
+from django.shortcuts import render
+from django.views.decorators.csrf import csrf_exempt
+from django.dispatch import receiver
+from django.db.models.signals import post_save
+from django.contrib import messages
+
+from typing import Iterable
+
+from base.models import Announcement
+from employee.models import Employee
+from horilla.horilla_middlewares import _thread_locals
+from notifications.signals import notify
+from whatsapp.flows import (
+    get_asset_category_flow_json,
+    get_attendance_request_json,
+    get_bonus_point_json,
+    get_leave_request_json,
+    get_reimbursement_request_json,
+    get_shift_request_json,
+    get_work_type_request_json,
+)
+from whatsapp.models import WhatsappCredientials
+from whatsapp.utils import (
+    asset_request_create,
+    attendance_request_create,
+    bonus_point_create,
+    create_flow,
+    create_help_message,
+    create_template_buttons,
+    create_welcome_message,
+    leave_request_create,
+    publish_flow,
+    reimbursement_create,
+    send_document_message,
+    send_flow_message,
+    send_template_message,
+    send_text_message,
+    send_image_message,
+    shift_create,
+    update_flow,
+    work_type_create,
+)
+
+
+DETAILED_FLOW = [
+    {
+        "template_name": "leave",
+        "flow_name": "leave_request_flow",
+        "flow_json": get_leave_request_json(),
+    },
+    {
+        "template_name": "shift",
+        "flow_name": "shift_request",
+        "flow_json": get_shift_request_json(),
+    },
+    {
+        "template_name": "bonus_point",
+        "flow_name": "bonus_point_flow",
+        "flow_json": get_bonus_point_json(),
+    },
+    {
+        "template_name": "reimbursement",
+        "flow_name": "reimbursement_flow",
+        "flow_json": get_reimbursement_request_json(),
+    },
+    {
+        "template_name": "work_type",
+        "flow_name": "work_type_flow",
+        "flow_json": get_work_type_request_json(),
+    },
+    {
+        "template_name": "attendance",
+        "flow_name": "attendance_flow",
+        "flow_json": get_attendance_request_json(),
+    },
+    {
+        "template_name": "asset",
+        "flow_name": "asset_flow",
+        "flow_json": get_asset_category_flow_json(),
+    },
+]
+
+processed_messages = set()
+logger = logging.getLogger(__name__)
+
+
+def clean_string(s):
+    """
+    Cleans a given string by removing punctuation and converting it to lowercase.
+
+    Args:
+        s (str): The string to clean.
+
+    Returns:
+        str: The cleaned string, or the original string if an error occurs.
+    """
+
+    try:
+        translator = str.maketrans("", "", string.punctuation + " _")
+        cleaned_string = s.translate(translator).lower()
+        return cleaned_string
+    except:
+        return s
+
+
+@csrf_exempt
+def whatsapp(request):
+    """
+    Handles incoming WhatsApp webhook requests.
+
+    Args:
+        request (HttpRequest): The incoming HTTP request.
+
+    Returns:
+        HttpResponse: A response indicating the status of the operation.
+    """
+
+    if request.method == "GET":
+        credentials = WhatsappCredientials.objects.first()
+
+        token = request.GET.get("hub.verify_token")
+        challenge = request.GET.get("hub.challenge")
+        if token == credentials.meta_webhook_token:
+            return HttpResponse(challenge, status=200)
+
+    if request.method == "POST":
+        data = json.loads(request.body)
+        if "object" in data and "entry" in data:
+            if data["object"] == "whatsapp_business_account":
+                for entry in data["entry"]:
+                    changes = entry.get("changes", [])[0]
+                    value = changes.get("value", {})
+
+                    if "messages" in value:
+                        try:
+                            metadata = value.get("metadata", {})
+                            contacts = value.get("contacts", [])[0]
+                            messages = value.get("messages", [])[0]
+
+                            message_id = messages.get("id")
+                            if message_id in processed_messages:
+                                continue
+
+                            processed_messages.add(message_id)
+
+                            profile_name = contacts.get("profile", {}).get("name")
+                            from_number = messages.get("from")
+                            text = messages.get("text", {}).get("body")
+                            type = messages.get("type", {})
+                            flow_response = (
+                                messages.get("interactive", {})
+                                .get("nfm_reply", {})
+                                .get("response_json", {})
+                            )
+
+                            if type == "interactive":
+                                flow_conversion(from_number, flow_response)
+                            if type == "button":
+                                text = messages.get("button", {}).get("text", {})
+
+                            text = clean_string(text)
+
+                            # Handle different messages based on cleaned text
+                            if text == "helloworld":
+                                send_template_message(from_number, "hello_world")
+                            elif text == "help":
+                                send_template_message(from_number, "help_50")
+                            elif text in ["asset", "assetrequest"]:
+                                send_flow_message(from_number, "asset")
+                            elif text in ["shift", "shiftrequest"]:
+                                send_flow_message(from_number, "shift")
+                            elif text in ["worktype", "worktyperequest"]:
+                                send_flow_message(from_number, "work_type")
+                            elif text in ["attendance", "attendancerequest"]:
+                                send_flow_message(from_number, "attendance")
+                            elif text in ["leave", "leaverequest"]:
+                                send_flow_message(from_number, "leave")
+                            elif text in ["reimbursement", "reimbursementrequest"]:
+                                send_flow_message(from_number, "reimbursement")
+                            elif text in ["bonus", "bonuspoint", "bonuspointredeem"]:
+                                send_flow_message(from_number, "bonus_point")
+                            elif text in [
+                                "hi",
+                                "hello",
+                                "goodmorning",
+                                "goodafternoon",
+                                "goodevening",
+                                "goodnight",
+                                "hlo",
+                            ]:
+                                send_template_message(from_number, "welcome_message_50")
+                            elif text == "image":
+                                try:
+                                    image_relative_url = (
+                                        Employee.objects.filter(phone=from_number)
+                                        .first()
+                                        .employee_profile.url
+                                    )
+                                    image_link = request.build_absolute_uri(
+                                        image_relative_url
+                                    )
+                                except Exception as e:
+                                    print(e)
+
+                                send_image_message(from_number, image_link)
+                            elif text == "document":
+                                try:
+                                    document_relative_url = (
+                                        Employee.objects.filter(phone=from_number)
+                                        .first()
+                                        .employee_profile.url
+                                    )
+                                    document_link = request.build_absolute_uri(
+                                        document_relative_url
+                                    )
+                                except Exception as e:
+                                    print(e)
+
+                                send_document_message(from_number, document_link)
+                            elif text == "string":
+                                send_text_message(
+                                    from_number, "test message", "test heading"
+                                )
+                            else:
+                                if text:
+                                    send_template_message(
+                                        from_number, "button_template_50"
+                                    )
+
+                        except KeyError as e:
+                            print(f"KeyError: {e}")
+                            return HttpResponse("Bad Request", status=400)
+                        except Exception as e:
+                            print(f"Unexpected error: {e}")
+                            return HttpResponse("Internal Server Error", status=500)
+
+                        return HttpResponse("Message processed", status=403)
+
+    return HttpResponse("error", status=200)
+
+
+def create_generic_templates(request,id):
+    """
+    Creates generic message templates for WhatsApp.
+
+    Args:
+        request (HttpRequest): The incoming HTTP request.
+
+    Returns:
+        HttpResponse: A response indicating the success or failure of template creation.
+    """
+
+    try:
+        create_template_buttons(id)
+        create_welcome_message(id)
+        create_help_message(id)
+        create_flows(id)
+
+        credential = WhatsappCredientials.objects.get(id=id)
+        credential.created_templates = True
+        credential.save()
+
+        messages.success(request,"Message templates and flows created successfully.")
+    except:
+        messages.error(request,"Message templates and flows creation failed.")
+    return HttpResponse("<script>window.location.reload();</script>")
+
+
+@csrf_exempt
+def create_flows(cred_id):
+    """
+    Creates and publishes flows based on predefined details.
+
+    Args:
+        request (HttpRequest): The incoming HTTP request.
+
+    Returns:
+        HttpResponse: A response indicating the success or failure of flow creation.
+    """
+
+    try:
+        for flow in DETAILED_FLOW:
+            template_name = flow["template_name"]
+            flow_name = flow["flow_name"]
+            flow_json = flow["flow_json"]
+            credential = WhatsappCredientials.objects.get(id=cred_id)
+
+            # Create flow
+            create_response = create_flow(flow_name, template_name, cred_id)
+            create_response_data = create_response.json()
+
+            flow_id = create_response_data.get("id")
+            if not flow_id:
+                return HttpResponse(
+                    json.dumps(create_response_data),
+                    status=create_response.status_code,
+                    content_type="application/json",
+                )
+
+            # Update flow
+            update_response = update_flow(flow_id, flow_json,credential.meta_token)
+            update_response_data = update_response.json()
+            if update_response_data.get("validation_error", {}):
+                return HttpResponse(
+                    json.dumps(update_response_data),
+                    status=update_response.status_code,
+                    content_type="application/json",
+                )
+
+            # Publish flow
+            publish_response = publish_flow(flow_id,credential.meta_token)
+            publish_response_data = publish_response.json()
+            if publish_response_data.get("error", {}):
+                return HttpResponse(
+                    json.dumps(publish_response_data),
+                    status=publish_response.status_code,
+                    content_type="application/json",
+                )
+
+        return HttpResponse(
+            json.dumps({"message": "Flow created successfully"}),
+            status=200,
+            content_type="application/json",
+        )
+
+    except Exception as e:
+        print(f"Unexpected error: {e}")
+        return HttpResponse(
+            json.dumps({"error": str(e)}), status=500, content_type="application/json"
+        )
+
+
+def send_notification_task(recipient, verb, redirect, icon):
+    """
+    Background task to send a notification message via WhatsApp.
+    """
+    try:
+        request = getattr(_thread_locals, "request", None)
+        link = request.build_absolute_uri(redirect) if redirect else None
+        message = f"{verb}\nFor more details, \n{link}." if link else verb
+
+        recipients = (
+            recipient
+            if isinstance(recipient, Iterable) and not isinstance(recipient, str)
+            else [recipient]
+        )
+
+        for user in recipients:
+            phone_number = user.employee_get.phone
+            if phone_number:
+                send_text_message(phone_number, message)
+            else:
+                print(f"No phone number available for recipient {user}")
+
+    except Exception as e:
+        print(f"Error in notification task: {e}")
+
+
+# @receiver(notify)
+def send_notification_on_whatsapp(sender, recipient, verb, redirect, icon, **kwargs):
+
+    thread = threading.Thread(
+        target=send_notification_task, args=(recipient, verb, redirect, icon)
+    )
+    thread.start()
+
+
+def send_announcement_task(instance, request):
+    """
+    Background task to send an announcement message via WhatsApp.
+    """
+    employees = instance.employees.all()
+    header = instance.title
+    body = instance.description
+
+    soup = BeautifulSoup(body, "html.parser")
+    paragraphs = []
+    for element in soup.find_all(["p", "ul", "ol", "h1", "h2", "h3", "h4", "h5", "h6"]):
+        if element.name in ["h1", "h2", "h3", "h4", "h5", "h6"]:
+            heading_text = element.get_text(strip=True).capitalize()
+            paragraphs.append(f"*{heading_text}*")
+
+        elif element.name in ["ul", "ol"]:
+            list_items = []
+            for li in element.find_all("li"):
+                item_text = []
+                for child in li.children:
+                    if child.name == "code":
+                        item_text.append(f"`{child.get_text()}`")
+                    elif child.name in ["strong", "b"]:
+                        item_text.append(f"*{child.get_text()}*")
+                    elif child.name == "span":
+                        item_text.append(child.get_text())
+                    elif child.name == "a":
+                        item_text.append(child.get_text())
+                    elif isinstance(child, str):
+                        item_text.append(child.strip())
+                list_items.append("• " + " ".join(item_text).strip())
+            paragraphs.append("\n".join(list_items))
+
+        elif element.name == "p":
+            para_text = []
+            for child in element.children:
+                if child.name == "code":
+                    para_text.append(f"`{child.get_text()}`")
+                elif child.name in ["strong", "b"]:
+                    para_text.append(f"*{child.get_text()}*")
+                elif child.name == "span":
+                    para_text.append(child.get_text())
+                elif child.name == "a":
+                    para_text.append(child.get_text())
+                elif isinstance(child, str):
+                    para_text.append(child.strip())
+            paragraphs.append(" ".join(para_text).strip())
+    final_text = "\n\n".join(paragraphs)
+
+    for employee in employees:
+        number = employee.phone
+        send_text_message(number, final_text, header)
+        for attachment in instance.attachments.all():
+            link = attachment.file.url
+            document_link = request.build_absolute_uri(link)
+            send_document_message(number, document_link)
+
+
+# @receiver(post_save, sender=Announcement)
+def send_announcement_on_whatsapp(sender, instance, created, **kwargs):
+    if not created:
+        request = getattr(_thread_locals, "request", None)
+
+        thread = threading.Thread(
+            target=send_announcement_task, args=(instance, request)
+        )
+        thread.start()
+
+
+def flow_conversion(number, flow_response_json):
+    """
+    Processes a flow response based on the type of request.
+
+    Args:
+        number (str): The phone number of the employee.
+        flow_response_json (str): The JSON response from the flow.
+
+    Returns:
+        Response: The response from sending a message.
+    """
+
+    employee = Employee.objects.filter(phone=number).first()
+    flow_response = json.loads(flow_response_json)
+    message = "Something went wrong ......"
+    type = flow_response["type"]
+
+    if type == "shift_request":
+        message = shift_create(employee, flow_response)
+    elif type == "leave_request":
+        message = leave_request_create(employee, flow_response)
+    elif type == "work_type":
+        message = work_type_create(employee, flow_response)
+    elif type == "asset_request":
+        message = asset_request_create(employee, flow_response)
+    elif type == "attendance_request":
+        message = attendance_request_create(employee, flow_response)
+    elif type == "bonus_point":
+        message = bonus_point_create(employee, flow_response)
+    elif type == "reimbursement":
+        message = reimbursement_create(employee, flow_response)
+
+    response = send_text_message(number, message)
+    return response
+
+
+def whatsapp_credential_view(request):
+    """
+    Renders the WhatsApp credentials view.
+
+    Args:
+        request (HttpRequest): The incoming HTTP request.
+
+    Returns:
+        HttpResponse: The rendered credentials view.
+    """
+
+    return render(request, "whatsapp/credentials_view.html", {})