diff --git a/app/static/css/allPendingForms.css b/app/static/css/allPendingForms.css
index b5635d8a6..229fc6bb4 100644
--- a/app/static/css/allPendingForms.css
+++ b/app/static/css/allPendingForms.css
@@ -107,3 +107,24 @@ a.hover_indicator:active {
   text-align: center !important;
 }
 
+.spinner {
+  width: 50px;
+  height: 50px;
+  border: 5px solid #f3f3f3; 
+  border-radius: 50%;
+ 
+  border-top: 5px solid #3498db; 
+  
+  
+  animation: spin 1s linear infinite; 
+}
+
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
\ No newline at end of file
diff --git a/app/static/css/base.css b/app/static/css/base.css
index 916fb4db9..d8050e45d 100755
--- a/app/static/css/base.css
+++ b/app/static/css/base.css
@@ -20,6 +20,13 @@ html, body {
     background-color: #275881;
     overflow-x: hidden;
 }
+.bottom-clickability {
+    padding: 1.5rem 1.5rem !important;
+    width: 100% !important;
+    display: inline !important;
+    margin: 10 !important;
+    box-sizing: border-box !important;
+}
 
 .panel-default, .panel-heading {
     border: none;
diff --git a/app/static/js/allPendingForms.js b/app/static/js/allPendingForms.js
index fda836f08..03e593aad 100644
--- a/app/static/js/allPendingForms.js
+++ b/app/static/js/allPendingForms.js
@@ -252,8 +252,8 @@ function resendApprovalLink(formId) {
   });
 }
 
-function getNotes(formId) {
-  $.ajax({
+function getNotes(formId, formHistoryID) {
+    $.ajax({
     type: "GET",
     url: "/admin/getNotes/" + formId,
     datatype: "json",
@@ -286,7 +286,6 @@ function getNotes(formId) {
   });
 }
 
-
 function notesInsert(textareaID, buttonID) {
   var formId = $("#" + textareaID).data('formId');
   var laborNotes = $("#" + textareaID).val(); //this is getting the id of the labor notes text area
@@ -303,7 +302,6 @@ function notesInsert(textareaID, buttonID) {
     e.preventDefault();
   });
 
-
   $.ajax({
     method: "POST",
     url: '/admin/notesInsert/' + formId,
@@ -353,21 +351,29 @@ function clearTextArea() { //makes sure that it empties text areas and p tags wh
 
 
 
-function loadOverloadModal(formHistoryID, laborStatusFormID) {
-  /*
-  This method sends an AJAX call to recieve data used to populate
-  the overload modal.
-  */
+function loadOverloadModal(formHistoryID) {
+ /*
+  This method resets the modal content to a loading state to prevent 
+  displaying stale data, then fetches and renders the new form data.*/
+
+  $("#overloadModal").find(".modal-content").html(`<div class="modal-body"><div class="spinner" role="status">
+  <span class="visually-hidden"></span></div></div>`);
   $("#overloadModal").modal("show");
-  $("#overloadModal").find('.modal-content').load('/admin/overloadModal/' + formHistoryID);
+  $("#overloadModal").find('.modal-content').load('/admin/overloadModal/' + formHistoryID) ;
+  
 }
 
 
-function loadReleaseModal(formHistoryID, laborStatusFormID) {
-  $("#modalRelease").modal("show");
+function loadReleaseModal(formHistoryID) {
+ /*
+  This method resets the modal content to a loading state to prevent 
+  displaying stale data, then fetches and renders the new form data.
+  */
+  $("#modalRelease").find(".modal-content").html(`<div class="modal-body"><div class="spinner" role="status">
+  <span class="visually-hidden"></span></div></div>`)
+  $("#modalRelease").modal("show");  
   $("#modalRelease").find('.modal-content').load('/admin/releaseModal/' + formHistoryID);
-
-
+ 
 }
 
 
@@ -588,7 +594,6 @@ function toggleNotesLog(laborStatusFormID, formHistoryID) {
   }
 }
 
-
 function notesCounter(laborStatusFormID, formHistoryID){
   /*
   This method displays the number of admin notes a Labor
@@ -604,13 +609,13 @@ function notesCounter(laborStatusFormID, formHistoryID){
     success: function(response) {
       var viewNotesID = '#notes_' + String(formHistoryID)
       var modalViewNotesID = '#modalNote_' + String(formHistoryID)
-      $(viewNotesID).html('View Notes (' + response['noteTotal'] + ')')
+      $(viewNotesID).html('Notes (' + response['noteTotal'] + ')')
       $(modalViewNotesID).html('View Notes (' + response['noteTotal'] + ')')
     },
     error: function(request,status,error){
       console.log(request.responseText);
     }
-  });
+  }); 
 }
 
 
diff --git a/app/templates/admin/allPendingForms.html b/app/templates/admin/allPendingForms.html
index 5041dadab..9e13d5c89 100644
--- a/app/templates/admin/allPendingForms.html
+++ b/app/templates/admin/allPendingForms.html
@@ -114,7 +114,7 @@ <h1>{{title}}</h1>
                     {% endwith %}
                     <a role="menuitem" href="#"
                       <span id="{{pendingOverloadFormPairs[allForms.formHistoryID]}}"
-                        onclick="loadOverloadModal({{pendingOverloadFormPairs[allForms.formHistoryID]}}, {{allForms.formID.laborStatusFormID}});"
+                        onclick="loadOverloadModal({{pendingOverloadFormPairs[allForms.formHistoryID]}});"
                        aria-label="Pending Overload Form" title="Manage Overload Form" class="glyphicon glyphicon-exclamation-sign fa-lg"
                        style="color:red; top: 10px"></span></a>
                   </td>
@@ -206,7 +206,7 @@ <h1>{{title}}</h1>
                     <span class="caret"></span></button>
                   <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="menu1" style="min-width: 100%;">
                     {% if allForms.historyType.historyTypeName == 'Labor Overload Form' %}
-                        <li role="presentation">
+                        <li role="presentation" id ="{{allForms.formHistoryID}}" onclick="loadOverloadModal({{allForms.formHistoryID}});">
                         {% if currentUser.isFinancialAidAdmin or currentUser.isSaasAdmin %}
                             {% set formurl = "financialAidOverloadApproval" %}
                             {% if currentUser.isSaasAdmin %}
@@ -215,20 +215,30 @@ <h1>{{title}}</h1>
                             <a role="menuitem" href="/admin/{{formurl}}/{{allForms.formHistoryID}}">Manage</a>
                         {% else %}
                             <a role="menuitem" href="#" >
-                                <span id="{{allForms.formHistoryID}}" onclick="loadOverloadModal({{allForms.formHistoryID}}, {{allForms.formID.laborStatusFormID}});">Manage</span>
+                                <span id="{{allForms.formHistoryID}}" onclick="loadOverloadModal({{allForms.formHistoryID}});">Manage</span>
                             </a>
                         {% endif %}
                         </li>
                     {% elif allForms.historyType.historyTypeName == 'Labor Release Form' %}
-                        <li role="presentation"><a role="menuitem" href="#">
-                          <span id="{{allForms.formHistoryID}}"
-                                onclick="loadReleaseModal({{allForms.formHistoryID}}, {{allForms.formID.laborStatusFormID}});">Manage</span></a></li>
+                          <li role="presentation">
+                          <a id="{{allForms.formHistoryID}}" 
+                          role="menuitem"
+                          href="#"
+                          class="btn btn-secondary"
+                          onclick="event.preventDefault(); loadReleaseModal('{{allForms.formHistoryID}}');">
+                          Manage
+                          </a></li>
                     {% elif allForms.formHistoryID in pendingOverloadFormPairs %}
-                        <li role="presentation"><a role="menuitem" href="#">
-                          <span id="{{allForms.formHistoryID}}"
-                                onclick="loadOverloadModal({{pendingOverloadFormPairs[allForms.formHistoryID]}}, {{allForms.formID.laborStatusFormID}});">Manage</span></a></li>
+                          <li role="presentation">
+                          <a id="{{allForms.formHistoryID}}" 
+                          role="menuitem"
+                          href="#"
+                          class="btn btn-secondary"
+                          onclick="event.preventDefault(); loadOverloadModal('{{allForms.formHistoryID}}');">
+                          Manage
+                          </a></li>
                     {% else %}
-                        <li role="presentation"><a role="menuitem" href="#">
+                        <li role="presentation"><a role="menuitem" href="#"class=".bottom-clickability">
                           <span onclick="insertDenial({{allForms.formHistoryID}})"
                                 data-toggle="modal"
                                 data-target="#denyModal">Deny</span></a></li>
@@ -237,11 +247,12 @@ <h1>{{title}}</h1>
                         <li role="presentation"><a role="menuitem" href="/alterLSF/{{allForms.formID.laborStatusFormID}}">
                             <span >Modify</span></a></li>
                     {% endif %}
-                        <li role="presentation"><a role="menuitem" href="#">
+                        <li role="presentation">
+                          <a role="menuitem" href="#"class=".bottom-clickability">
                           <span id="notes_{{allForms.formHistoryID}}"
                                 onclick="getNotes({{allForms.formID.laborStatusFormID}})"
                                 data-toggle="modal"
-                                data-target="#NotesModal">View Notes</span></a></li>
+                                data-target="#NotesModal">Notes</span></a></li>
                     {% if formType == 'preStudentApproval' %}
                         <li role="presentation"><a role="menuitem" href="#">
                           <span onclick="skipApproval({{allForms.formID.laborStatusFormID}})"
diff --git a/app/templates/snips/pendingOverloadModal.html b/app/templates/snips/pendingOverloadModal.html
index fcca4282f..02b2e2d38 100644
--- a/app/templates/snips/pendingOverloadModal.html
+++ b/app/templates/snips/pendingOverloadModal.html
@@ -65,7 +65,7 @@ <h3 class="modal-title" id="overloadModalLabel" align="center"><b>Labor Overload
    ########################################}
         <div id="notes" style="position:absolute; right:0">
           <div id="viewNotesButton">
-            <button id="modalNote_{{formHistoryID}}" onclick="toggleNotesLog({{laborStatusFormID}}, {{formHistoryID}})" class='btn btn-sm btn-primary'>View Notes ({{noteTotal}})</button>
+            <button id="modalNote_{{formHistoryID}}" onclick="toggleNotesLog({{laborStatusFormID}}, {{formHistoryID}})" class='btn btn-sm btn-primary'> Notes({{noteTotal}}) </button>
           </div>
         </div>
     </div>
diff --git a/app/templates/snips/pendingReleaseModal.html b/app/templates/snips/pendingReleaseModal.html
index 1b0bba797..79053db4d 100644
--- a/app/templates/snips/pendingReleaseModal.html
+++ b/app/templates/snips/pendingReleaseModal.html
@@ -54,7 +54,7 @@ <h3 class="modal-title" align="center"><strong>Labor Release Form</strong></h3>
         </table>
         
         <div id='radioDivRelease'>
-          <button id="modalNote_{{formHistoryID}}" onclick="toggleNotesLog({{laborStatusFormID}}, {{formHistoryID}})" style='float: left; margin-top: -10px;' class='btn btn-sm btn-primary'>View Notes ({{noteTotal}})</button>
+          <button id="modalNote_{{formHistoryID}}" onclick="toggleNotesLog({{laborStatusFormID}}, {{formHistoryID}})" style='float: left; margin-top: -10px;' class='btn btn-sm btn-primary'>Notes({{noteTotal}})</button>
           <p class="status-warning" style="color:red;" hidden><span class="glyphicon glyphicon-exclamation-sign">
           </span><strong>A Status is required in order to submit</strong></p><span>Status:<span aria-hidden="true" style="color:red"><strong>*</strong></span></span>
           <label for="approveRelease" class="radio-inline">