diff --git a/offboarding/templates/offboarding/resignation/request_cards.html b/offboarding/templates/offboarding/resignation/request_cards.html
index 0e6adf8a5..f1ce46a83 100644
--- a/offboarding/templates/offboarding/resignation/request_cards.html
+++ b/offboarding/templates/offboarding/resignation/request_cards.html
@@ -1,12 +1,11 @@
 {% load i18n %} {% load static %}
 {% include 'filter_tags.html' %}
-{% if letters %}
 {% if perms.offboarding.view_resignationletter %}
 <div class="d-flex flex-row-reverse oh-wrapper">
   <span class="mb-3" onclick="$('[name=status]').val('rejected').change();  $('.filterButton').click()"
-    style="cursor: pointer; margin-right: 15px;">
-    <span class="oh-dot oh-dot--small me-1" style="background-color:red"></span>
-    {% trans 'Rejected' %}
+  style="cursor: pointer; margin-right: 15px;">
+  <span class="oh-dot oh-dot--small me-1" style="background-color:red"></span>
+  {% trans 'Rejected' %}
   </span>
   <span class="mb-3" onclick="$('[name=status]').val('requested').change(); $('.filterButton').click()"
     style="cursor: pointer; margin-right: 15px;">
@@ -21,6 +20,7 @@
 </div>
 {% endif %}
 
+{% if letters %}
 <div class="oh-wrapper oh-faq-cards">
   {% for record in letters %}
   <div class="oh-faq-card" id="requestCard{{ record.id }}">
@@ -160,68 +160,3 @@
     overflow-x: hidden !important;
   }
 </style>
-<script>
-  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>
diff --git a/offboarding/templates/offboarding/resignation/request_list.html b/offboarding/templates/offboarding/resignation/request_list.html
index 282b9a8da..e51eb3f77 100644
--- a/offboarding/templates/offboarding/resignation/request_list.html
+++ b/offboarding/templates/offboarding/resignation/request_list.html
@@ -300,67 +300,4 @@
     }
     $("[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>
diff --git a/offboarding/templates/offboarding/resignation/requests_view.html b/offboarding/templates/offboarding/resignation/requests_view.html
index 7bfd67951..ed707eeda 100644
--- a/offboarding/templates/offboarding/resignation/requests_view.html
+++ b/offboarding/templates/offboarding/resignation/requests_view.html
@@ -13,12 +13,9 @@
 </style>
 {% include "offboarding/resignation/nav.html" %}
 {% if letters %}
-    <div id="resignationLetterContianer" hx-get="{% url 'search-resignation-request' %}?status=requested" hx-trigger="load">
-        {% if request.GET.view == 'list' %}
-            {% include "offboarding/resignation/request_list.html" %}
-        {% else %}
-            {% include "offboarding/resignation/request_cards.html" %}
-        {% endif %}
+    {% include "filter_tags.html" %}
+    <div id="resignationLetterContianer" hx-get="{% url 'search-resignation-request' %}?status=requested" hx-target="#resignationLetterContianer" hx-trigger="load">
+
     </div>
     {% else %}
     <div class="d-flex justify-content-center align-items-center" style="height: 40vh;">
@@ -28,4 +25,80 @@
         </div>
     </div>
 {% endif %}
+
+<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 content %}