diff --git a/recruitment/templates/candidate/candidate_empty.html b/recruitment/templates/candidate/candidate_empty.html
index 1e71c85d3..28261457d 100644
--- a/recruitment/templates/candidate/candidate_empty.html
+++ b/recruitment/templates/candidate/candidate_empty.html
@@ -2,53 +2,34 @@
 {% block content %}
 {% load i18n %}
 {% load static %}
-
-<section
-class="oh-wrapper oh-main__topbar"
-x-data="{searchShow: false}"
->
-<div class="oh-main__titlebar oh-main__titlebar--left">
-  <div hx-get="{% url 'candidate-view-card' %}" class="oh-main__titlebar-title fw-bold mb-0 text-dark" hx-target="#section" style="cursor:pointer;">{% trans "Candidates" %}</div>
-  <a
-    class="oh-main__titlebar-search-toggle "
-    role="button"
-    aria-label="Toggle Search"
-    @click="searchShow = !searchShow"
-  >
-    <ion-icon
-      name="search-outline"
-      class="oh-main__titlebar-serach-icon"
-    ></ion-icon>
-  </a>
-</div>
-
-<div class="oh-main__titlebar oh-main__titlebar--right">
-
-    <div class="oh-btn-group ml-2">
-      <div class="oh-dropdown" >
-        {% if perms.recruitment.add_candidate %}
-        <a href="{% url 'candidate-create' %}"
-        class='oh-btn oh-btn--secondary'
-        >
-        <ion-icon name="add-sharp" class="mr-1"></ion-icon>{% trans "Create" %}
-      </a>
-      {% endif %}
-      </div>
+<section class="oh-wrapper oh-main__topbar" x-data="{searchShow: false}">
+    <div class="oh-main__titlebar oh-main__titlebar--left">
+        <div hx-get="{% url 'candidate-view-card' %}" class="oh-main__titlebar-title fw-bold mb-0 text-dark"
+            hx-target="#section" style="cursor:pointer;">{% trans "Candidates" %}</div>
+        <a class="oh-main__titlebar-search-toggle " role="button" aria-label="Toggle Search"
+            @click="searchShow = !searchShow">
+            <ion-icon name="search-outline" class="oh-main__titlebar-serach-icon"></ion-icon>
+        </a>
     </div>
-  </div>
-</div>
-</section>
-  <main :class="sidebarOpen ? 'oh-main__sidebar-visible' : ''">
-    <div class="oh-wrapper">
-      <div class="oh-404">
-          <img style="    width: 150px;height: 150px;" src="{% static 'images/ui/candidate.png' %}" class="oh-404__image mb-4" alt="Page not found. 404."/>
-          <h5 class="oh-404__subtitle">{% trans "There are currently no candidates to consider." %}</h5>
-      </div>
+
+    <div class="oh-main__titlebar oh-main__titlebar--right">
+        <div class="oh-btn-group ml-2">
+            <div class="oh-dropdown">
+                {% if perms.recruitment.add_candidate %}
+                    <a href="{% url 'candidate-create' %}" class='oh-btn oh-btn--secondary'>
+                        <ion-icon name="add-sharp" class="mr-1"></ion-icon>{% trans "Create" %}
+                    </a>
+                {% endif %}
+            </div>
+        </div>
     </div>
-  </main>
-</div>
-</div>
-
-
 </section>
-{% endblock content %}
+
+<div class="oh-wrapper">
+    <div class="oh-empty">
+        <img src="{% static 'images/ui/search.svg' %}" class="oh-404__image" alt="Page not found. 404." />
+        <h1 class="oh-empty__title">{% trans "No Records found." %}</h1>
+        <p class="oh-empty__subtitle">{% trans "There are currently no candidates to consider." %} </p>
+    </div>
+</div>
+{% endblock %}
diff --git a/recruitment/templates/candidate/interview_list.html b/recruitment/templates/candidate/interview_list.html
index ae39f9dd1..ca0ad407e 100644
--- a/recruitment/templates/candidate/interview_list.html
+++ b/recruitment/templates/candidate/interview_list.html
@@ -207,11 +207,10 @@
         </nav>
     </div>
 {% else %}
-    <div class="oh-404">
-        <span class="material-symbols-outlined" style="font-size: 190px;">
-            groups
-        </span>
-        <h5 class="oh-404__subtitle">{% trans "No Interviews Found." %}</h5>
+    <div class="oh-empty">
+        <img src="{% static 'images/ui/search.svg' %}" class="oh-404__image" alt="Page not found. 404." />
+        <h1 class="oh-empty__title">{% trans "No Records found." %}</h1>
+        <p class="oh-empty__subtitle">{% trans "No Interviews Found." %} </p>
     </div>
 {% endif %}
 <script>
diff --git a/recruitment/templates/pipeline/pipeline_empty.html b/recruitment/templates/pipeline/pipeline_empty.html
index 52d4f6258..06647ab0b 100644
--- a/recruitment/templates/pipeline/pipeline_empty.html
+++ b/recruitment/templates/pipeline/pipeline_empty.html
@@ -2,106 +2,96 @@
 {% load static %}
 {% block content %}
 {% load i18n %}
-<section
-class="oh-wrapper oh-main__topbar"
-x-data="{searchShow: false}"
->
-{% if perms.recruitment.add_recruitment %}
-  <div class="oh-main__titlebar oh-main__titlebar--left">
-    <div class="oh-main__titlebar-title fw-bold mb-0 text-dark"  style="cursor:pointer;">{% trans "Recruitments" %}</div>
-  </div>
-{% endif %}
+<section class="oh-wrapper oh-main__topbar" x-data="{searchShow: false}">
+    {% if perms.recruitment.add_recruitment %}
+        <div class="oh-main__titlebar oh-main__titlebar--left">
+            <div class="oh-main__titlebar-title fw-bold mb-0 text-dark" style="cursor:pointer;">{% trans "Recruitments" %}
+            </div>
+        </div>
+    {% endif %}
 
-<div class="oh-switch" style="width: 30px; margin-left:1200px;">
-    <input type="checkbox" name="is_closed" data-widget="style-widget" class="style-widget oh-switch__checkbox" {% if request.GET.closed %} checked title="{% trans 'Switch to Ongoing Recruitments' %}" {% else %} title="{% trans 'Switch to Closed Recruitments' %}" {% endif %} id="is_closed" >
-</div>
+    <div class="oh-switch" style="width: 30px; margin-left:1200px;">
+        <input type="checkbox" name="is_closed" data-widget="style-widget" class="style-widget oh-switch__checkbox"
+            {% if request.GET.closed %} checked title="{% trans 'Switch to Ongoing Recruitments' %}" {% else %}
+            title="{% trans 'Switch to Closed Recruitments' %}" {% endif %} id="is_closed">
+    </div>
 
-<div class="oh-main__titlebar oh-main__titlebar--right">
+    <div class="oh-main__titlebar oh-main__titlebar--right">
+        <div class="oh-main__titlebar-button-container">
+            <div class="oh-dropdown" x-data="{open: false}">
+                <div class="oh-dropdown__menu oh-dropdown__menu--right oh-dropdown__filter p-4" x-show="open"
+                    @click.outside="open = false" style="display: none;" @click.>
+                    <div class="mb-3 mt-3">
+                        <label for="job_pos_id" class="oh-label">{% trans "Job position" %}</label>
+                        <select class="" name="job_pos_id" id="job_pos_id">
+                            <option value="">------------------</option>
+                            {% for job_position in job_positions %}
+                                <option value="{{job_position}}">{{job_position}}</option>
+                            {% endfor %}
+                        </select>
+                    </div>
 
-    <div class="oh-main__titlebar-button-container">
-
-        <div class="oh-dropdown" x-data="{open: false}">
-
-            <div class="oh-dropdown__menu oh-dropdown__menu--right oh-dropdown__filter p-4" x-show="open" @click.outside="open = false" style="display: none;" @click.>
-
-                <div class="mb-3 mt-3">
-                    <label for="job_pos_id" class="oh-label">{% trans "Job position" %}</label>
-                    <select class="" name="job_pos_id" id="job_pos_id">
-                        <option value="">------------------</option>
-                        {% for job_position in job_positions %}
-                            <option value="{{job_position}}">{{job_position}}</option>
-                        {% endfor %}
-                    </select>
-                </div>
-
-                <div class="oh-tabs__action-bar mt-2" id="filter_item" x-on:click="open = false" >
-                    <button class="oh-btn oh-btn--small oh-btn--secondary oh-tabs__action-new-table w-100" >
-                        <ion-icon class="me-1 md hydrated" name="add-outline" role="img"aria-label="add outline"></ion-icon>
-                        {% trans "Filter" %}
-                    </button>
+                    <div class="oh-tabs__action-bar mt-2" id="filter_item" x-on:click="open = false">
+                        <button class="oh-btn oh-btn--small oh-btn--secondary oh-tabs__action-new-table w-100">
+                            <ion-icon class="me-1 md hydrated" name="add-outline" role="img"
+                                aria-label="add outline"></ion-icon>
+                            {% trans "Filter" %}
+                        </button>
+                    </div>
                 </div>
             </div>
+
+            {% if perms.recruitment.add_recruitment %}
+                <button class="oh-btn oh-btn--secondary" data-toggle="oh-modal-toggle" data-target="#objectCreateModal"
+                    hx-target="#objectCreateModalTarget" hx-get="{% url 'recruitment-create' %}">
+                    <ion-icon class="me-1" name="add-outline"></ion-icon>
+                    {% trans 'Recruitment' %}
+                </button>
+            {% endif %}
+            <div class="oh-main__titlebar-button-container">
+                {% if perms.recruitment.add_recruitment %}
+                    {% include 'pipeline/form/recruitment_drop_down_form.html' %}
+                {% endif %}
+            </div>
+        </div>
     </div>
-
-    {% if perms.recruitment.add_recruitment %}
-		<button class="oh-btn oh-btn--secondary" data-toggle="oh-modal-toggle" data-target="#objectCreateModal" hx-target="#objectCreateModalTarget" hx-get="{% url "recruitment-create" %}">
-      <ion-icon class="me-1" name="add-outline"></ion-icon>
-      {% trans 'Recruitment' %}
-    </button>
-		{% endif %}
-
-	<div class="oh-main__titlebar-button-container">
-
-		{% if perms.recruitment.add_recruitment %}
-		{% include 'pipeline/form/recruitment_drop_down_form.html' %}
-		{% endif %}
-
-
-	</div>
-</div>
 </section>
 
-
-<div
-class="oh-wrapper-main"
->
-  <main :class="sidebarOpen ? 'oh-main__sidebar-visible' : ''">
-
-    <div class="oh-wrapper">
-      <div class="oh-404">
-          <img style="    width: 190px;height: 190px;" src="{% static 'images/ui/recruitment.png' %}" class="oh-404__image mb-4" alt="Page not found. 404."/>
-          {% if request.GET.closed %}
-            <h5 class="oh-404__subtitle">{% trans "At present, there is no closed recruitment." %}</h5>
-          {% else %}
-            <h5 class="oh-404__subtitle">{% trans "At present, there is no ongoing recruitment." %}</h5>
-          {% endif %}
-      </div>
+<div class="oh-wrapper">
+    <div class="oh-empty">
+        <img src="{% static 'images/ui/search.svg' %}" class="oh-404__image" alt="Page not found. 404." />
+        <h1 class="oh-empty__title">{% trans "No Records found." %}</h1>
+        <p class="oh-empty__subtitle">
+            {% if request.GET.closed %}
+                {% trans "At present, there is no closed recruitment." %}
+            {% else %}
+                {% trans "At present, there is no ongoing recruitment." %}
+            {% endif %}
+        </p>
     </div>
-  </main>
-</div>
 </div>
 
+
 <script>
-    $(document).ready(function(){
+    $(document).ready(function () {
         {% include 'select2.js' %}
         $('#candidate-search').keyup(function (e) {
-            $('.candidate-view-type').attr('hx-vals',`{"search":"${$(this).val()}"}`)
-          });
-          $('.candidate-view-type').click(function (e) {
+            $('.candidate-view-type').attr('hx-vals', `{"search":"${$(this).val()}"}`)
+        });
+        $('.candidate-view-type').click(function (e) {
             let view = $(this).attr('data-view');
-            $('#candidate-search').attr('hx-vals',`{"view":"${view}"}`);
-          });
-          $("#job_pos_id").select2();
-          $("#portal_stage").select2();
-      $("#is_closed").on("change", function() {
-          if ($(this).is(":checked")) {
-              window.location.href = "{% url 'pipeline' %}?closed=closed";
-          } else {
-              window.location.href = "{% url 'pipeline' %}";
-          }
-      });
+            $('#candidate-search').attr('hx-vals', `{"view":"${view}"}`);
+        });
+        $("#job_pos_id").select2();
+        $("#portal_stage").select2();
+        $("#is_closed").on("change", function () {
+            if ($(this).is(":checked")) {
+                window.location.href = "{% url 'pipeline' %}?closed=closed";
+            } else {
+                window.location.href = "{% url 'pipeline' %}";
+            }
+        });
     })
-
 </script>
 
 {% endblock content %}
diff --git a/recruitment/templates/recruitment/recruitment_empty.html b/recruitment/templates/recruitment/recruitment_empty.html
index f4f90f5d0..f7f160e3b 100644
--- a/recruitment/templates/recruitment/recruitment_empty.html
+++ b/recruitment/templates/recruitment/recruitment_empty.html
@@ -23,16 +23,11 @@
     </div>
 </section>
 
-<div class="oh-wrapper-main">
-    <main :class="sidebarOpen ? 'oh-main__sidebar-visible' : ''">
-        <div class="oh-wrapper">
-            <div class="oh-404">
-                <img style="width: 190px;height: 190px;" src="{% static 'images/ui/recruitment.png' %}"
-                    class="oh-404__image mb-4" alt="Page not found. 404." />
-                <h5 class="oh-404__subtitle">{% trans "At present, there is no ongoing recruitment." %}</h5>
-            </div>
-        </div>
-    </main>
-</div>
+<div class="oh-wrapper">
+    <div class="oh-empty">
+        <img src="{% static 'images/ui/search.svg' %}" class="oh-404__image" alt="Page not found. 404." />
+        <h1 class="oh-empty__title">{% trans "No Records found." %}</h1>
+        <p class="oh-empty__subtitle">{% trans "At present, there is no ongoing recruitment." %} </p>
+    </div>
 </div>
 {% endblock content %}
diff --git a/recruitment/templates/skill_zone/empty_skill_zone.html b/recruitment/templates/skill_zone/empty_skill_zone.html
index 16963f565..d31175330 100644
--- a/recruitment/templates/skill_zone/empty_skill_zone.html
+++ b/recruitment/templates/skill_zone/empty_skill_zone.html
@@ -6,10 +6,10 @@
     {% include 'skill_zone/skill_zone_nav.html' %}
     <main :class="sidebarOpen ? 'oh-main__sidebar-visible' : ''">
         <div id="skill_zone_container">
-            <div class="oh-404">
-                <img style="width: 150px;height: 150px;" src="{% static 'images/ui/cv.png' %}"
-                    class="oh-404__image mb-4" alt="Page not found. 404." />
-                <h5 class="oh-404__subtitle">{% trans "There are currently no skill zone to consider." %}</h5>
+            <div class="oh-empty">
+                <img src="{% static 'images/ui/search.svg' %}" class="oh-404__image" alt="Page not found. 404." />
+                <h1 class="oh-empty__title">{% trans "No Records found." %}</h1>
+                <p class="oh-empty__subtitle">{% trans "There are currently no skill zone to consider." %} </p>
             </div>
         </div>
     </main>
diff --git a/recruitment/templates/stage/stage_empty.html b/recruitment/templates/stage/stage_empty.html
index 91158dc4d..a251921c3 100644
--- a/recruitment/templates/stage/stage_empty.html
+++ b/recruitment/templates/stage/stage_empty.html
@@ -1,49 +1,32 @@
 {% extends 'index.html' %} {% block content %} {% load static %} {% load i18n %}
 <section class="oh-wrapper oh-main__topbar" x-data="{searchShow: false}">
-  <div class="oh-main__titlebar oh-main__titlebar--left">
-    <div
-      class="oh-main__titlebar-title fw-bold mb-0 text-dark"
-      style="cursor: pointer"
-    >
-      {% trans "Stage" %}
+    <div class="oh-main__titlebar oh-main__titlebar--left">
+        <div class="oh-main__titlebar-title fw-bold mb-0 text-dark" style="cursor: pointer">
+            {% trans "Stage" %}
+        </div>
     </div>
-  </div>
 
-  <div class="oh-main__titlebar oh-main__titlebar--right">
-    <div class="oh-main__titlebar-button-container">
-      <div class="oh-dropdown" x-data="{open: false}">
-        {% if perms.recruitment.add_stage %}
-        <button
-          hx-get="{% url 'rec-stage-create' %}"
-          hx-target="#objectCreateModalTarget"
-          class="oh-btn oh-btn--secondary ml-2"
-          data-toggle="oh-modal-toggle"
-          data-target="#objectCreateModal"
-        >
-          <ion-icon name="add" class="mr-1"></ion-icon>{% trans "Create" %}
-        </button>
-        {% endif %}
-      </div>
+    <div class="oh-main__titlebar oh-main__titlebar--right">
+        <div class="oh-main__titlebar-button-container">
+            <div class="oh-dropdown" x-data="{open: false}">
+                {% if perms.recruitment.add_stage %}
+                    <button hx-get="{% url 'rec-stage-create' %}" hx-target="#objectCreateModalTarget"
+                        class="oh-btn oh-btn--secondary ml-2" data-toggle="oh-modal-toggle"
+                        data-target="#objectCreateModal">
+                        <ion-icon name="add" class="mr-1"></ion-icon>{% trans "Create" %}
+                    </button>
+                {% endif %}
+            </div>
+        </div>
     </div>
-  </div>
 </section>
 
-<div class="oh-wrapper-main">
-  <main :class="sidebarOpen ? 'oh-main__sidebar-visible' : ''">
-    <div class="oh-wrapper">
-      <div class="oh-404">
-        <img
-          style="width: 190px; height: 190px"
-          src="{% static 'images/ui/interview.png' %}"
-          class="oh-404__image mb-4"
-          alt="Page not found. 404."
-        />
-        <h5 class="oh-404__subtitle">
-          {% trans "No recruitment stages currently available." %}
-        </h5>
-      </div>
+<div class="oh-wrapper">
+    <div class="oh-empty">
+        <img src="{% static 'images/ui/search.svg' %}" class="oh-404__image" alt="Page not found. 404." />
+        <h1 class="oh-empty__title">{% trans "No Records found." %}</h1>
+        <p class="oh-empty__subtitle">{% trans "No recruitment stages are currently available." %} </p>
     </div>
-  </main>
 </div>
 
 {% endblock content %}
diff --git a/recruitment/templates/survey/survey_card.html b/recruitment/templates/survey/survey_card.html
index 546f54441..ecc058282 100644
--- a/recruitment/templates/survey/survey_card.html
+++ b/recruitment/templates/survey/survey_card.html
@@ -1,155 +1,121 @@
 {% load i18n %} {% load static %}
 <style>
-  .oh-kanban-card__title {
-    width: 280px;
-  }
+    .oh-kanban-card__title {
+        width: 280px;
+    }
 </style>
 
 {% include 'filter_tags.html' %}
 <div class="oh-tabs__content oh-tabs__content--active" id="templateTab">
-  {% include "survey/template_accordion.html" %}
+    {% 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>
+    {% 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 %}
             </div>
-          </div>
-        </div>
-        {% endif %}
-      </div>
-      {% endfor %}
-    </div>
 
-    <div class="oh-pagination">
-      <span class="oh-pagination__page">
-        {% trans "Page" %} {{ questions.number }} {% trans "of" %} {{ questions.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="{{questions.number}}"
-            hx-get="{% url 'rec-filter-survey' %}?{{pd}}"
-            hx-target="#view-container"
-            min="1"
-          />
-          <span class="oh-pagination__label">
-            {% trans "of" %} {{questions.paginator.num_pages}}
-          </span>
+            <div class="oh-pagination">
+                <span class="oh-pagination__page">
+                    {% trans "Page" %} {{ questions.number }} {% trans "of" %} {{ questions.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="{{questions.number}}"
+                            hx-get="{% url 'rec-filter-survey' %}?{{pd}}" hx-target="#view-container" min="1" />
+                        <span class="oh-pagination__label">
+                            {% trans "of" %} {{questions.paginator.num_pages}}
+                        </span>
+                    </div>
+                    <ul class="oh-pagination__items">
+                        {% if questions.has_previous %}
+                            <li class="oh-pagination__item oh-pagination__item--wide">
+                                <a hx-target="#view-container" hx-get="{% url 'rec-filter-survey' %}?{{pd}}&page=1"
+                                    class="oh-pagination__link">{% trans "First" %}
+                                </a>
+                            </li>
+                            <li class="oh-pagination__item oh-pagination__item--wide">
+                                <a hx-target="#view-container"
+                                    hx-get="{% url 'rec-filter-survey' %}?{{pd}}&page={{ questions.previous_page_number }}"
+                                    class="oh-pagination__link">{% trans "Previous" %}
+                                </a>
+                            </li>
+                        {% endif %}
+                        {% if questions.has_next %}
+                            <li class="oh-pagination__item oh-pagination__item--wide">
+                                <a hx-target="#view-container"
+                                    hx-get="{% url 'rec-filter-survey' %}?{{pd}}&page={{ questions.next_page_number }}"
+                                    class="oh-pagination__link">{% trans "Next" %}
+                                </a>
+                            </li>
+                            <li class="oh-pagination__item oh-pagination__item--wide">
+                                <a hx-target="#view-container"
+                                    hx-get="{% url 'rec-filter-survey' %}?{{pd}}&page={{ questions.paginator.num_pages }}"
+                                    class="oh-pagination__link">{% trans "Last" %}
+                                </a>
+                            </li>
+                        {% endif %}
+                    </ul>
+                </nav>
+            </div>
         </div>
-        <ul class="oh-pagination__items">
-          {% if questions.has_previous %}
-          <li class="oh-pagination__item oh-pagination__item--wide">
-            <a
-              hx-target="#view-container"
-              hx-get="{% url 'rec-filter-survey' %}?{{pd}}&page=1"
-              class="oh-pagination__link"
-              >{% trans "First" %}
-            </a>
-          </li>
-          <li class="oh-pagination__item oh-pagination__item--wide">
-            <a
-              hx-target="#view-container"
-              hx-get="{% url 'rec-filter-survey' %}?{{pd}}&page={{ questions.previous_page_number }}"
-              class="oh-pagination__link"
-              >{% trans "Previous" %}
-            </a>
-          </li>
-          {% endif %} {% if questions.has_next %}
-          <li class="oh-pagination__item oh-pagination__item--wide">
-            <a
-              hx-target="#view-container"
-              hx-get="{% url 'rec-filter-survey' %}?{{pd}}&page={{ questions.next_page_number }}"
-              class="oh-pagination__link"
-              >{% trans "Next" %}
-            </a>
-          </li>
-          <li class="oh-pagination__item oh-pagination__item--wide">
-            <a
-              hx-target="#view-container"
-              hx-get="{% url 'rec-filter-survey' %}?{{pd}}&page={{ questions.paginator.num_pages }}"
-              class="oh-pagination__link"
-              >{% trans "Last" %}
-            </a>
-          </li>
-          {% endif %}
-        </ul>
-      </nav>
-    </div>
-  </div>
-  {% else %}
-  <div class="oh-wrapper">
-    <img
-      style="width: 150px; height: 150px; display: block; margin: 0 auto"
-      src="{% static 'images/ui/editor.png' %}"
-      class="oh-404__image mb-4"
-      alt="Page not found. 404."
-    />
-    <h5 class="oh-404__subtitle">
-      {% trans "No questions have been established yet." %}
-    </h5>
-  </div>
-  {% endif %}
+    {% else %}
+        <div class="oh-empty">
+            <img src="{% static 'images/ui/search.svg' %}" class="oh-404__image" alt="Page not found. 404." />
+            <h1 class="oh-empty__title">{% trans "No Records found." %}</h1>
+            <p class="oh-empty__subtitle">{% trans "No questions have been established yet." %} </p>
+        </div>
+    {% endif %}
 </div>
diff --git a/recruitment/templates/survey/survey_empty_view.html b/recruitment/templates/survey/survey_empty_view.html
index 384fcb95b..32dfb7a80 100644
--- a/recruitment/templates/survey/survey_empty_view.html
+++ b/recruitment/templates/survey/survey_empty_view.html
@@ -4,110 +4,73 @@
 
 {% load i18n %} {% load basefilters %}
 <style>
-  .oh-modal_close--custom {
-    border: none;
-    background: none;
-    font-size: 1.5rem;
-    opacity: 0.7;
-    position: absolute;
-    top: 25px;
-    right: 15px;
-  }
+    .oh-modal_close--custom {
+        border: none;
+        background: none;
+        font-size: 1.5rem;
+        opacity: 0.7;
+        position: absolute;
+        top: 25px;
+        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">
-      <h2 class="oh-modal__dialog-title" id="addEmployeeModalLabel">
-        {% trans "Create Survey Template" %}
-      </h2>
-      <button class="oh-modal__close" aria-label="Close">
-        <ion-icon name="close-outline"></ion-icon>
-      </button>
+<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">
+            <h2 class="oh-modal__dialog-title" id="addEmployeeModalLabel">
+                {% trans "Create Survey Template" %}
+            </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="addSurveyModalBody"></div>
     </div>
-    <div
-      class="oh-modal__dialog-body"
-      id="addSurveyModalBody"
-    ></div>
-  </div>
 </div>
 
 
-<div
-  class="oh-modal"
-  id="updateSurvey"
-  role="dialog"
-  aria-labelledby="updateSurvey"
-  aria-hidden="true"
->
-  <div class="oh-modal__dialog">
-    <div class="oh-modal__dialog-header">
-      <h2 class="oh-modal__dialog-title" id="addEmployeeModalLabel">
-        {% comment %} {% trans "Update Survey Template" %} {% endcomment %}
-      </h2>
-      <button class="oh-modal__close" aria-label="Close">
-        <ion-icon name="close-outline"></ion-icon>
-      </button>
+<div class="oh-modal" id="updateSurvey" role="dialog" aria-labelledby="updateSurvey" aria-hidden="true">
+    <div class="oh-modal__dialog">
+        <div class="oh-modal__dialog-header">
+            <h2 class="oh-modal__dialog-title" id="addEmployeeModalLabel">
+                {% comment %} {% trans "Update Survey Template" %} {% endcomment %}
+            </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="updateSurveyModalBody"></div>
     </div>
-    <div
-      class="oh-modal__dialog-body"
-      id="updateSurveyModalBody"
-    ></div>
-  </div>
 </div>
 
 <section class="oh-wrapper oh-main__topbar" x-data="{searchShow: false}">
-  <div class="oh-main__titlebar oh-main__titlebar--left">
-    <h1 class="oh-main__titlebar-title fw-bold">
-      {% trans "Survey Templates" %}
-    </h1>
-    <a
-      class="oh-main__titlebar-search-toggle"
-      role="button"
-      aria-label="Toggle Search"
-      @click="searchShow = !searchShow"
-    >
-      <ion-icon
-        name="search-outline"
-        class="oh-main__titlebar-serach-icon"
-      ></ion-icon>
-    </a>
-  </div>
-  {% if perms.recruitment.add_recruitmentsurvey %}
-  <div class="oh-main__titlebar oh-main__titlebar--right">
+    <div class="oh-main__titlebar oh-main__titlebar--left">
+        <h1 class="oh-main__titlebar-title fw-bold">
+            {% trans "Survey Templates" %}
+        </h1>
+        <a class="oh-main__titlebar-search-toggle" role="button" aria-label="Toggle Search"
+            @click="searchShow = !searchShow">
+            <ion-icon name="search-outline" class="oh-main__titlebar-serach-icon"></ion-icon>
+        </a>
+    </div>
+    {% if perms.recruitment.add_recruitmentsurvey %}
+        <div class="oh-main__titlebar oh-main__titlebar--right">
 
-    <button
-      class="oh-btn oh-btn--secondary ml-2"
-      data-toggle="oh-modal-toggle"
-      data-target="#addSurvey"
-      hx-get="{% url 'recruitment-survey-question-template-create' %}"
-      hx-target="#addSurveyModalBody"
-    >
-      <ion-icon name="add-sharp" class="mr-1"></ion-icon>{% trans "Add" %}
-    </button>
-  </div>
-  {% endif %}
+            <button class="oh-btn oh-btn--secondary ml-2" data-toggle="oh-modal-toggle" data-target="#addSurvey"
+                hx-get="{% url 'recruitment-survey-question-template-create' %}" hx-target="#addSurveyModalBody">
+                <ion-icon name="add-sharp" class="mr-1"></ion-icon>{% trans "Add" %}
+            </button>
+        </div>
+    {% endif %}
 </section>
 
-<div
-class="oh-wrapper-main"
->
-  <main :class="sidebarOpen ? 'oh-main__sidebar-visible' : ''">
-
-    <div class="oh-wrapper">
-      <div class="oh-404">
-          <img style="width: 150px;height: 150px;" src="{% static 'images/ui/editor.png' %}" class="oh-404__image mb-4" alt="Page not found. 404."/>
-          <h5 class="oh-404__subtitle">{% trans "No survey templates have been established yet." %}</h5>
-      </div>
+<div class="oh-wrapper">
+    <div class="oh-empty">
+        <img src="{% static 'images/ui/search.svg' %}" class="oh-404__image" alt="Page not found. 404." />
+        <h1 class="oh-empty__title">{% trans "No Records found." %}</h1>
+        <p class="oh-empty__subtitle">{% trans "No survey templates have been established yet." %} </p>
     </div>
-  </main>
-</div>
 </div>
 
 {% endblock content %}
diff --git a/recruitment/templates/survey/template_accordion.html b/recruitment/templates/survey/template_accordion.html
index e5ad51e7e..d1a35e22c 100644
--- a/recruitment/templates/survey/template_accordion.html
+++ b/recruitment/templates/survey/template_accordion.html
@@ -1,255 +1,230 @@
 {% load i18n %}{% load static %}
 {% if templates %}
-<div class="oh-card">
-  {% for grouper in templates %}
-  <div class="oh-accordion-meta mb-1">
-    <div class="oh-accordion-meta__item">
-      <div class="oh-accordion-meta__header">
-        <span class="oh-accordion-meta__title d-flex"
-          >
-          {{grouper.grouper}}
-          <div class="oh-tabs__input-badge-container">
-            <span class="oh-badge oh-badge--secondary oh-badge--small oh-badge--round ms-2 mr-2" id="recruitmentCandidateCount1" title="{{grouper.list|length}} {% trans "Questions" %}" onclick="event.stopPropagation()">
-              {{grouper.list|length}}
-            </span>
-          </div>
-          </span
-        >
-        <div class="oh-accordion-meta__actions" onclick="event.stopPropagation()">
-          <div class="oh-dropdown" x-data="{open: false}">
-            {% if grouper.grouper %}
-            <button class="oh-btn oh-stop-prop oh-btn--transparent oh-accordion-meta__btn" @click="open = !open" @click.outside="open = false" title="{% trans "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">
-                <li class="oh-dropdown__item">
-                  <a href="{% url 'survey-template-preview' %}?title={{grouper.grouper}}"  class="oh-dropdown__link">{% trans "Preview" %}</a>
-                </li>
-                {% if perms.recruitment.change_surveytemplate %}
-                <li class="oh-dropdown__item">
-                  <a hx-get="{% url 'survey-template-question-add' %}?title={{grouper.grouper}}" hx-target="#templateModalBody" data-toggle="oh-modal-toggle" data-target="#templateModal" class="oh-dropdown__link">{% trans "Add Questions" %}</a>
-                </li>
-                {% endif %}
-                {% if perms.recruitment.change_surveytemplate %}
-                <li class="oh-dropdown__item">
-                  <a hx-get="{% url 'survey-template-create' %}?title={{grouper.grouper}}" hx-target="#genericModalBody" data-toggle="oh-modal-toggle" data-target="#genericModal" class="oh-dropdown__link">{% trans "Edit" %}</a>
-                </li>
-                {% endif %}
-                {% if perms.recruitment.delete_surveytemplate %}
-                <li class="oh-dropdown__item">
-                  <a href="{% url 'survey-template-delete' %}?title={{grouper.grouper}}" onclick="return confirm('{% trans "Do you want to delete this template" %}')" class="oh-dropdown__link tex-danger" style="color: #dc3545!important;">{% trans "Delete" %}</a>
-                </li>
-                {% endif %}
-              </ul>
-            </div>
-            {% endif %}
-          </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-sticky-table__table">
-            <div class="oh-sticky-table__thead">
-              <div class="oh-sticky-table__tr">
-                <div class="oh-sticky-table__th">{% trans "Question" %}</div>
-                <div class="oh-sticky-table__th">{% trans "Type" %}</div>
-                {% if perms.recruitment.change_recruitmentsurvey or perms.recruitment.delete_recruitmentsurvey %}
-                  <div class="oh-sticky-table__th" style="width: 90px;">{% trans "Actions" %}</div>
-                {% endif %}
-              </div>
-            </div>
-            <div class="oh-sticky-table__tbody">
-              {% for question in grouper.list %}
-              <div
-                class="oh-sticky-table__tr oh-multiple-table-sort__movable"
-                data-target="#genericModal"
-                data-toggle="oh-modal-toggle"
-                hx-get="{% url 'single-survey-view' question.id %}?instance_ids={{requests_ids}}"
-                hx-target="#genericModalBody"
-              >
-                <div class="oh-sticky-table__sd">
-                  <div class="oh-profile oh-profile--md">
-                    <div class="oh-profile__avatar mr-1">
-                      <img
-                        src="https://ui-avatars.com/api/?name={{question.question}}&background=random"
-                        class="oh-profile__image"
-                      />
+    <div class="oh-card">
+        {% for grouper in templates %}
+            <div class="oh-accordion-meta mb-1">
+                <div class="oh-accordion-meta__item">
+                    <div class="oh-accordion-meta__header">
+                        <span class="oh-accordion-meta__title d-flex">
+                            {{grouper.grouper}}
+                            <div class="oh-tabs__input-badge-container">
+                                <span class="oh-badge oh-badge--secondary oh-badge--small oh-badge--round ms-2 mr-2"
+                                    id="recruitmentCandidateCount1" title="{{grouper.list|length}} {% trans 'Questions' %}"
+                                    onclick="event.stopPropagation()">
+                                    {{grouper.list|length}}
+                                </span>
+                            </div>
+                        </span>
+                        <div class="oh-accordion-meta__actions" onclick="event.stopPropagation()">
+                            <div class="oh-dropdown" x-data="{open: false}">
+                                {% if grouper.grouper %}
+                                    <button class="oh-btn oh-stop-prop oh-btn--transparent oh-accordion-meta__btn"
+                                        @click="open = !open" @click.outside="open = false" title="{% trans '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">
+                                            <li class="oh-dropdown__item">
+                                                <a href="{% url 'survey-template-preview' %}?title={{grouper.grouper}}"
+                                                    class="oh-dropdown__link">
+                                                    {% trans "Preview" %}
+                                                </a>
+                                            </li>
+                                            {% if perms.recruitment.change_surveytemplate %}
+                                                <li class="oh-dropdown__item">
+                                                    <a hx-get="{% url 'survey-template-question-add' %}?title={{grouper.grouper}}"
+                                                        hx-target="#templateModalBody" data-toggle="oh-modal-toggle"
+                                                        data-target="#templateModal" class="oh-dropdown__link">
+                                                        {% trans "Add Questions" %}
+                                                    </a>
+                                                </li>
+                                            {% endif %}
+                                            {% if perms.recruitment.change_surveytemplate %}
+                                                <li class="oh-dropdown__item">
+                                                    <a hx-get="{% url 'survey-template-create' %}?title={{grouper.grouper}}"
+                                                        hx-target="#genericModalBody" data-toggle="oh-modal-toggle"
+                                                        data-target="#genericModal" class="oh-dropdown__link">
+                                                        {% trans "Edit" %}
+                                                    </a>
+                                                </li>
+                                            {% endif %}
+                                            {% if perms.recruitment.delete_surveytemplate %}
+                                                <li class="oh-dropdown__item">
+                                                    <a href="{% url 'survey-template-delete' %}?title={{grouper.grouper}}"
+                                                        onclick="return confirm('{% trans "Do you want to delete this template" %}')"
+                                                        class="oh-dropdown__link tex-danger" style="color: #dc3545!important;">
+                                                        {% trans "Delete" %}
+                                                    </a>
+                                                </li>
+                                            {% endif %}
+                                        </ul>
+                                    </div>
+                                {% endif %}
+                            </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-sticky-table__table">
+                                <div class="oh-sticky-table__thead">
+                                    <div class="oh-sticky-table__tr">
+                                        <div class="oh-sticky-table__th">{% trans "Question" %}</div>
+                                        <div class="oh-sticky-table__th">{% trans "Type" %}</div>
+                                        {% if perms.recruitment.change_recruitmentsurvey or perms.recruitment.delete_recruitmentsurvey %}
+                                            <div class="oh-sticky-table__th" style="width: 90px;">{% trans "Actions" %}</div>
+                                        {% endif %}
+                                    </div>
+                                </div>
+                                <div class="oh-sticky-table__tbody">
+                                    {% for question in grouper.list %}
+                                        <div class="oh-sticky-table__tr oh-multiple-table-sort__movable" data-target="#genericModal"
+                                            data-toggle="oh-modal-toggle"
+                                            hx-get="{% url 'single-survey-view' question.id %}?instance_ids={{requests_ids}}"
+                                            hx-target="#genericModalBody">
+                                            <div class="oh-sticky-table__sd">
+                                                <div class="oh-profile oh-profile--md">
+                                                    <div class="oh-profile__avatar mr-1">
+                                                        <img src="https://ui-avatars.com/api/?name={{question.question}}&background=random"
+                                                            class="oh-profile__image" />
+                                                    </div>
+                                                    <span class="oh-profile__name oh-text--dark">{{question.question}}</span>
+                                                </div>
+                                            </div>
+                                            <div class="oh-sticky-table__td">{{question.get_type_display}}</div>
+                                            {% if perms.recruitment.change_recruitmentsurvey or perms.recruitment.delete_recruitmentsurvey %}
+                                                <div class="oh-sticky-table__td" onclick="event.stopPropagation()">
+                                                    <div class="oh-btn-group">
+                                                        {% if perms.recruitment.change_recruitmentsurvey %}
+                                                            <button
+                                                                hx-get="{% url 'recruitment-survey-question-template-edit' question.id %}"
+                                                                data-toggle="oh-modal-toggle" data-target="#genericModal"
+                                                                hx-target="#genericModalBody" class="oh-btn oh-btn--light-bkg w-100"
+                                                                title="{% trans 'Edit' %}">
+                                                                <ion-icon name="create-outline"></ion-icon>
+                                                            </button>
+                                                        {% endif %}
+                                                        {% if perms.recruitment.delete_recruitmentsurvey %}
+                                                            <a href="{% url 'recruitment-survey-question-template-delete' question.id %}"
+                                                                onclick="return confirm('Do you want to delete this record?')"
+                                                                data-toggle="oh-modal-toggle"
+                                                                class="oh-btn oh-btn--light-bkg w-100 tex-danger"
+                                                                style="color: hsl(8,77%,56%);" title="{% trans 'delete' %}">
+                                                                <ion-icon name="trash-outline"></ion-icon>
+                                                            </a>
+                                                        {% endif %}
+                                                    </div>
+                                                </div>
+                                            {% endif %}
+                                        </div>
+                                    {% endfor %}
+                                </div>
+                            </div>
+                        </div>
+                        {% if grouper.list %}
+                            <div class="oh-pagination">
+                                <span class="oh-pagination__page">
+                                    {% trans "Page" %} {{ grouper.list.number }} {% trans "of" %} {{ grouper.list.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="{{grouper.dynamic_name}}" class="oh-pagination__input"
+                                            value="{{grouper.list.number}}" hx-get="{% url 'rec-filter-survey' %}?{{pd}}"
+                                            hx-target="#view-container" min="1" />
+                                        <span class="oh-pagination__label">{% trans "of" %}
+                                            {{grouper.list.paginator.num_pages}}</span>
+                                    </div>
+                                    <ul class="oh-pagination__items">
+                                        {% if grouper.list.has_previous %}
+                                            <li class="oh-pagination__item oh-pagination__item--wide">
+                                                <a hx-target="#view-container"
+                                                    hx-get="{% url 'rec-filter-survey' %}?{{pd}}&{{grouper.dynamic_name}}=1"
+                                                    class="oh-pagination__link">{% trans "First" %}
+                                                </a>
+                                            </li>
+                                            <li class="oh-pagination__item oh-pagination__item--wide">
+                                                <a hx-target="#view-container"
+                                                    hx-get="{% url 'rec-filter-survey' %}?{{pd}}&{{grouper.dynamic_name}}={{ grouper.list.previous_page_number }}"
+                                                    class="oh-pagination__link">{% trans "Previous" %}
+                                                </a>
+                                            </li>
+                                        {% endif %}
+                                        {% if grouper.list.has_next %}
+                                            <li class="oh-pagination__item oh-pagination__item--wide">
+                                                <a hx-target="#view-container"
+                                                    hx-get="{% url 'rec-filter-survey' %}?{{pd}}&{{grouper.dynamic_name}}={{ grouper.list.next_page_number }}"
+                                                    class="oh-pagination__link">{% trans "Next" %}
+                                                </a>
+                                            </li>
+                                            <li class="oh-pagination__item oh-pagination__item--wide">
+                                                <a hx-target="#view-container"
+                                                    hx-get="{% url 'rec-filter-survey' %}?{{pd}}&{{grouper.dynamic_name}}={{ grouper.list.paginator.num_pages }}"
+                                                    class="oh-pagination__link">{% trans "Last" %}
+                                                </a>
+                                            </li>
+                                        {% endif %}
+                                    </ul>
+                                </nav>
+                            </div>
+                        {% endif %}
                     </div>
-                    <span class="oh-profile__name oh-text--dark"
-                      >{{question.question}}</span
-                    >
-                  </div>
                 </div>
-                <div class="oh-sticky-table__td">{{question.get_type_display}}</div>
-                {% if perms.recruitment.change_recruitmentsurvey or perms.recruitment.delete_recruitmentsurvey %}
-                  <div class="oh-sticky-table__td" onclick="event.stopPropagation()">
-                    <div class="oh-btn-group">
-                      {% if perms.recruitment.change_recruitmentsurvey %}
-                        <button
-                          hx-get="{% url 'recruitment-survey-question-template-edit' question.id %}"
-                          data-toggle="oh-modal-toggle"
-                          data-target="#genericModal"
-                          hx-target="#genericModalBody"
-                            class="oh-btn oh-btn--light-bkg w-100"
-                            title="{% trans 'Edit' %}"
-                          >
-                          <ion-icon name="create-outline"></ion-icon>
-                        </button>
-                      {% endif %}
-                      {% if perms.recruitment.delete_recruitmentsurvey %}
-                        <a
-                          href="{% url 'recruitment-survey-question-template-delete' question.id %}" onclick="return confirm('Do you want to delete this record?')"                     data-toggle="oh-modal-toggle"
-                          class="oh-btn oh-btn--light-bkg w-100 tex-danger"
-                          style="color: hsl(8,77%,56%);"
-                          title="{% trans 'delete' %}"
-                          >
-                          <ion-icon name="trash-outline"></ion-icon>
-                        </a>
-                      {% endif %}
-                    </div>
-                  </div>
-                {% endif %}
-              </div>
-              {% endfor %}
             </div>
-          </div>
-        </div>
-        {% if grouper.list %}
-        <div class="oh-pagination">
-          <span class="oh-pagination__page">
-            {% trans "Page" %} {{ grouper.list.number }} {% trans "of" %} {{ grouper.list.paginator.num_pages }}.
-          </span>
-          <nav class="oh-pagination__nav">
+        {% endfor %}
+    </div>
+
+    <div class="oh-pagination">
+        <span class="oh-pagination__page">
+            {% trans "Page" %} {{ templates.number }} {% trans "of" %}
+            {{ templates.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="{{grouper.dynamic_name}}"
-              class="oh-pagination__input"
-              value="{{grouper.list.number}}"
-              hx-get="{% url 'rec-filter-survey' %}?{{pd}}"
-              hx-target="#view-container"
-              min="1"
-            />
-            <span class="oh-pagination__label"
-              >{% trans "of" %} {{grouper.list.paginator.num_pages}}</span
-            >
+                <span class="oh-pagination__label me-1">{% trans "Page" %}</span>
+
+                <input type="number" name="template_page" class="oh-pagination__input" value="{{templates.number}}"
+                    hx-get="{% url 'rec-filter-survey' %}?{{pd}}" hx-target="#view-container" min="1" />
+                <span class="oh-pagination__label">{% trans "of" %} {{templates.paginator.num_pages}}</span>
             </div>
+
             <ul class="oh-pagination__items">
-            {% if grouper.list.has_previous %}
-            <li class="oh-pagination__item oh-pagination__item--wide">
-              <a
-              hx-target="#view-container"
-              hx-get="{% url 'rec-filter-survey' %}?{{pd}}&{{grouper.dynamic_name}}=1"
-              class="oh-pagination__link"
-              >{% trans "First" %}</a
-              >
-            </li>
-            <li class="oh-pagination__item oh-pagination__item--wide">
-              <a
-              hx-target="#view-container"
-              hx-get="{% url 'rec-filter-survey' %}?{{pd}}&{{grouper.dynamic_name}}={{ grouper.list.previous_page_number }}"
-              class="oh-pagination__link"
-              >{% trans "Previous" %}</a
-              >
-            </li>
-            {% endif %} {% if grouper.list.has_next %}
-            <li class="oh-pagination__item oh-pagination__item--wide">
-              <a
-              hx-target="#view-container"
-              hx-get="{% url 'rec-filter-survey' %}?{{pd}}&{{grouper.dynamic_name}}={{ grouper.list.next_page_number }}"
-              class="oh-pagination__link"
-              >{% trans "Next" %}</a
-              >
-            </li>
-            <li class="oh-pagination__item oh-pagination__item--wide">
-              <a
-              hx-target="#view-container"
-              hx-get="{% url 'rec-filter-survey' %}?{{pd}}&{{grouper.dynamic_name}}={{ grouper.list.paginator.num_pages }}"
-              class="oh-pagination__link"
-              >{% trans "Last" %}</a
-              >
-            </li>
-            {% endif %}
+                {% if templates.has_previous %}
+                    <li class="oh-pagination__item oh-pagination__item--wide">
+                        <a hx-target="#view-container" hx-get="{% url 'rec-filter-survey' %}?{{pd}}&template_page=1"
+                            class="oh-pagination__link">{% trans "First" %}
+                        </a>
+                    </li>
+                    <li class="oh-pagination__item oh-pagination__item--wide">
+                        <a hx-target="#view-container"
+                            hx-get="{% url 'rec-filter-survey' %}?{{pd}}&template_page={{ templates.previous_page_number }}"
+                            class="oh-pagination__link">{% trans "Previous" %}
+                        </a>
+                    </li>
+                {% endif %}
+                {% if templates.has_next %}
+                    <li class="oh-pagination__item oh-pagination__item--wide">
+                        <a hx-target="#view-container"
+                            hx-get="{% url 'rec-filter-survey' %}?{{pd}}&template_page={{ templates.next_page_number }}"
+                            class="oh-pagination__link">{% trans "Next" %}
+                        </a>
+                    </li>
+                    <li class="oh-pagination__item oh-pagination__item--wide">
+                        <a hx-target="#view-container"
+                            hx-get="{% url 'rec-filter-survey' %}?{{pd}}&template_page={{ templates.paginator.num_pages }}"
+                            class="oh-pagination__link">{% trans "Last" %}
+                        </a>
+                    </li>
+                {% endif %}
             </ul>
-          </nav>
-          </div>
-          {% endif %}
-      </div>
+        </nav>
     </div>
-  </div>
-  {% endfor %}
-</div>
-
-<div class="oh-pagination">
-  <span class="oh-pagination__page">
-    {% trans "Page" %} {{ templates.number }} {% trans "of" %}
-    {{ templates.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="template_page"
-        class="oh-pagination__input"
-        value="{{templates.number}}"
-        hx-get="{% url 'rec-filter-survey' %}?{{pd}}"
-        hx-target="#view-container"
-        min="1"
-      />
-      <span class="oh-pagination__label"
-        >{% trans "of" %} {{templates.paginator.num_pages}}</span
-      >
-    </div>
-
-    <ul class="oh-pagination__items">
-      {% if templates.has_previous %}
-      <li class="oh-pagination__item oh-pagination__item--wide">
-        <a
-          hx-target="#view-container"
-          hx-get="{% url 'rec-filter-survey' %}?{{pd}}&template_page=1"
-          class="oh-pagination__link"
-          >{% trans "First" %}</a
-        >
-      </li>
-      <li class="oh-pagination__item oh-pagination__item--wide">
-        <a
-          hx-target="#view-container"
-          hx-get="{% url 'rec-filter-survey' %}?{{pd}}&template_page={{ templates.previous_page_number }}"
-          class="oh-pagination__link"
-          >{% trans "Previous" %}</a
-        >
-      </li>
-      {% endif %} {% if templates.has_next %}
-      <li class="oh-pagination__item oh-pagination__item--wide">
-        <a
-          hx-target="#view-container"
-          hx-get="{% url 'rec-filter-survey' %}?{{pd}}&template_page={{ templates.next_page_number }}"
-          class="oh-pagination__link"
-          >{% trans "Next" %}</a
-        >
-      </li>
-      <li class="oh-pagination__item oh-pagination__item--wide">
-        <a
-          hx-target="#view-container"
-          hx-get="{% url 'rec-filter-survey' %}?{{pd}}&template_page={{ templates.paginator.num_pages }}"
-          class="oh-pagination__link"
-          >{% trans "Last" %}</a
-        >
-      </li>
-      {% endif %}
-    </ul>
-  </nav>
-</div>
 {% else %}
-<div class="oh-wrapper">
-  <img style="width: 150px; height: 150px; display: block; margin: 0 auto;" src="{% static 'images/ui/editor.png' %}" class="oh-404__image mb-4" alt="Page not found. 404." />
-  <h5 class="oh-404__subtitle">{% trans "No template groups have been established yet." %}</h5>
-</div>
+
+    <div class="oh-empty">
+        <img src="{% static 'images/ui/search.svg' %}" class="oh-404__image" alt="Page not found. 404." />
+        <h1 class="oh-empty__title">{% trans "No Records found." %}</h1>
+        <p class="oh-empty__subtitle">{% trans "No template groups have been established yet." %} </p>
+    </div>
 
 {% endif %}