diff --git a/static/js/accessRequestForm.js b/static/js/accessRequestForm.js
index 0dc56982..db922ee6 100644
--- a/static/js/accessRequestForm.js
+++ b/static/js/accessRequestForm.js
@@ -1,9 +1,24 @@
 let submitted_forms = 0
 
+function handleButtonLoading(elem, status) {
+  if(status) {
+    elem.attr('disabled', true);
+    elem.html("");
+    let newSpan = $("#submitButtonLoading").clone(true, true);
+    newSpan.removeClass("collapse");
+    newSpan.appendTo(elem);
+  } else {
+    elem.attr('disabled', false);
+    elem.html("Submit request");
+  }
+}
+
 function submitRequest(event, elem, multi, access_tag, accesses="") {
   event.preventDefault()
   form = $(elem)
   let actionUrl = form.attr('action');
+  let button = $(form.find("button#submitButton"));
+  handleButtonLoading(button, true);
   $.ajax({
     type: "POST",
     url: actionUrl,
@@ -15,6 +30,7 @@ function submitRequest(event, elem, multi, access_tag, accesses="") {
       else {
         showNotification("failed", "Failed to send the request", "Something went wrong");
       }
+      handleButtonLoading(button, false);
     }
   }).done(function(data, statusText, xhr) {
     let status = xhr.status;
@@ -36,6 +52,7 @@ function submitRequest(event, elem, multi, access_tag, accesses="") {
         showRedirectModal("Request submitted");
       }
     }
+    handleButtonLoading(button, false);
   })
 }
 
diff --git a/static/js/addUserToGroup.js b/static/js/addUserToGroup.js
index 86f37b8e..8fb30061 100644
--- a/static/js/addUserToGroup.js
+++ b/static/js/addUserToGroup.js
@@ -113,10 +113,25 @@ const handleUserSelection = (elem) => {
   updateSelectedUser();
 };
 
+function handleButtonLoading(elem, status) {
+  if(status) {
+    elem.attr('disabled', true);
+    elem.html("");
+    let newSpan = $("#submitButtonLoading").clone(true, true);
+    newSpan.removeClass("collapse");
+    newSpan.appendTo(elem);
+  } else {
+    elem.attr('disabled', false);
+    elem.html("Submit request");
+  }
+}
+
 function submitRequest(event, elem) {
   event.preventDefault();
   form = $(elem);
   let actionUrl = form.attr('action');
+  let button = $(form.find("button#submitButton"));
+  handleButtonLoading(button, true);
   $.ajax({
     type: "POST",
     url: actionUrl,
@@ -128,6 +143,7 @@ function submitRequest(event, elem) {
       else {
         showNotification("failed", "Failed to send the request", "Something went wrong");
       }
+      handleButtonLoading(button, false);
     }
   }).done(function(data, statusText, xhr) {
     let status = xhr.status;
@@ -137,6 +153,7 @@ function submitRequest(event, elem) {
     else {
       showRedirectModal("Request submitted");
     }
+    handleButtonLoading(button, false);
   })
 };
 
diff --git a/static/js/createNewGroup.js b/static/js/createNewGroup.js
index 9d5865f3..3d9bd4c0 100644
--- a/static/js/createNewGroup.js
+++ b/static/js/createNewGroup.js
@@ -197,6 +197,19 @@ function showRedirectModal(title, message="") {
   $("#modal-message").html(message);
 }
 
+function handleButtonLoading(elem, status) {
+  if(status) {
+    elem.attr('disabled', true);
+    elem.html("");
+    let newSpan = $("#submitButtonLoading").clone(true, true);
+    newSpan.removeClass("collapse");
+    newSpan.appendTo(elem);
+  } else {
+    elem.attr('disabled', false);
+    elem.html("Submit request");
+  }
+}
+
 function submitRequest() {
   const members = $('#member-selection-table').children('tr');
   const emails = [];
@@ -219,6 +232,8 @@ function submitRequest() {
     return;
   }
   else {
+    let button = $('#submitNewGroup');
+    handleButtonLoading(button, true);
     $.ajax({
       url: urlBuilder,
       type: "POST",
@@ -231,7 +246,8 @@ function submitRequest() {
         "selectAllUsers": selectAllUsers,
       },
       success: function (result) {
-        showRedirectModal("Request Submitted", result.status.msg)
+        showRedirectModal("Request Submitted", result.status.msg);
+        handleButtonLoading(button, false);
       },
       error: function (XMLHttpRequest, textStatus, errorThrown) {
         if(XMLHttpRequest.responseJSON) {
@@ -240,6 +256,7 @@ function submitRequest() {
         } else {
           showNotification("failed", "Something when wrong while creating the group, contact admin.", "Internal Error")
         }
+        handleButtonLoading(button, false);
       }
     });
   }
diff --git a/static/js/failureActions.js b/static/js/failureActions.js
index bbb5542d..f314fa55 100644
--- a/static/js/failureActions.js
+++ b/static/js/failureActions.js
@@ -1,5 +1,31 @@
-function sendAPICall(requestId, url, messageId, desc) {
-  url =`${url}?requestId=${requestId}`
+function handleButtonLoading(elem, status) {
+  let parentElem = $(elem.parentElement);
+  let text = $(elem).html();
+  let button = $(elem);
+  if(status) {
+    parentElem.find("button#resolveButton").attr('disabled', true);
+    parentElem.find("button#declineButton").attr('disabled', true);
+    parentElem.find("button#actionButton").attr('disabled', true);
+    button.html("");
+    let newSpan;
+    if (text == "Resolve") {
+      newSpan = $("#resolveButtonLoading").clone(true, true);
+    } else {
+      newSpan = $("#actionButtonLoading").clone(true, true);
+    }
+    newSpan.removeClass("collapse");
+    newSpan.appendTo(button);
+  } else {
+    parentElem.find("button#resolveButton").attr('disabled', false);
+    parentElem.find("button#declineButton").attr('disabled', false);
+    parentElem.find("button#actionButton").attr('disabled', false);
+    button.html(text);
+  }
+}
+
+function sendAPICall(elem, requestId, url, messageId, desc) {
+  url =`${url}?requestId=${requestId}`;
+  handleButtonLoading(elem, true);
   $.ajax({
     url: url,
     error: (xhr, statusText, data) => {
@@ -9,10 +35,12 @@ function sendAPICall(requestId, url, messageId, desc) {
       else {
         showNotification("failed", "Failed to send the request", "Something went wrong");
       }
+      handleButtonLoading(elem, false);
     }
   }).done((data) => {
     showNotification("success", data["status_list"][0]["title"], data["status_list"][0]["msg"]);
-    updateStatus(desc, messageId, requestId)
+    updateStatus(desc, messageId, requestId);
+    handleButtonLoading(elem, false);
   })
 }
 
diff --git a/static/js/groupAccessRequestForm.js b/static/js/groupAccessRequestForm.js
index 2b52d423..83dbf1f3 100644
--- a/static/js/groupAccessRequestForm.js
+++ b/static/js/groupAccessRequestForm.js
@@ -1,9 +1,24 @@
 let submitted_forms = 0
 
+function handleButtonLoading(elem, status) {
+  if(status) {
+    elem.attr('disabled', true);
+    elem.html("");
+    let newSpan = $("#submitButtonLoading").clone(true, true);
+    newSpan.removeClass("collapse");
+    newSpan.appendTo(elem);
+  } else {
+    elem.attr('disabled', false);
+    elem.html("Submit request");
+  }
+}
+
 function submitRequest(event, elem, multi, access_tag, accesses="") {
   event.preventDefault()
   form = $(elem)
   let actionUrl = form.attr('action');
+  let button = $(form.find("button#submitButton"));
+  handleButtonLoading(button, true);
   $.ajax({
     type: "POST",
     url: actionUrl,
@@ -15,6 +30,7 @@ function submitRequest(event, elem, multi, access_tag, accesses="") {
       else {
         showNotification("failed", "Failed to send the request", "Something went wrong");
       }
+      handleButtonLoading(button, false);
     }
   }).done(function(data, statusText, xhr) {
     let status = xhr.status;
@@ -36,6 +52,7 @@ function submitRequest(event, elem, multi, access_tag, accesses="") {
         showRedirectModal("Request submitted");
       }
     }
+    handleButtonLoading(button, false);
   })
 }
 
diff --git a/static/js/pendingRequests.js b/static/js/pendingRequests.js
index 9a99dfdd..23b76c8d 100644
--- a/static/js/pendingRequests.js
+++ b/static/js/pendingRequests.js
@@ -1,7 +1,7 @@
 function showDeclineModal(request_id, action, messageId) {
   $('#decline_modal').show();
   $("#declineHeading").html("<p class='text-lg leading-6 font-medium'>"+request_id+"<p/>")
-  $('#decline_modal').find("form").attr("onsubmit", `clickDeclineFinalButton('${request_id}', '${action}', '${messageId}');return false`)
+  $('#decline_modal').find("form").attr("onsubmit", `clickDeclineFinalButton(this, '${request_id}', '${action}', '${messageId}');return false`)
 }
 
 function closeDeclineModal() {
@@ -10,20 +10,24 @@ function closeDeclineModal() {
   $('#decline_modal').hide();
 }
 
-const clickDeclineFinalButton = (requestId, action, messageId) => {
+const clickDeclineFinalButton = (elem, requestId, action, messageId) => {
   closeDeclineModal();
   const declineReason = $("#declineReasonText").val();
-  const urlBuilder = `/decline/${action}/${requestId}`
+  const urlBuilder = `/decline/${action}/${requestId}`;
+  let button = $(elem);
+  handleButtonLoading(button, true);
   $.ajax({
     url: urlBuilder,
     data: {"reason": declineReason},
     error: function (XMLHttpRequest, textStatus, errorThrown) {
       if(XMLHttpRequest.responseJSON) {
-        showNotification("failed", XMLHttpRequest.responseJSON["response"][requestId]["error"])
+        showNotification("failed", XMLHttpRequest.responseJSON["response"][requestId]["error"]);
       }
+      handleButtonLoading(button, true, "Decline");
     }
   }).done(function (data) {
-    updateStatus(false, messageId, requestId)
+    updateStatus(false, messageId, requestId);
+    handleButtonLoading(button, true, "Decline");
   })
 }
 
@@ -43,6 +47,19 @@ function setDeclineReason(reason) {
   $("#declineReasonText").val(reason);
 }
 
+function handleButtonLoading(elem, status, text=null) {
+  if(status) {
+    elem.attr('disabled', true);
+    elem.html("");
+    let svgElem = $("#buttonLoading").clone(true, true);
+    svgElem.removeClass("collapse");
+    svgElem.appendTo(elem);
+  } else {
+    elem.attr('disabled', false);
+    elem.html(text);
+  }
+}
+
 function updateStatus(type, id, requestId) {
   const newMessageBox = $("#message-box").clone(true, true);
   const item = $(`#${id}`);
@@ -62,16 +79,23 @@ function updateStatus(type, id, requestId) {
   $(`#${id}-actions`).hide();
 }
 
-function approveAccess(requestId, action, messageId) {
+function approveAccess(elem, requestId, action, messageId) {
   const urlBuilder = `/accept_bulk/${action}?requestId=${encodeURIComponent(requestId)}`
+  let button = $(elem);
+  handleButtonLoading(button, true);
+  $(elem.parentElement).find("button#declineButton").attr('disabled', true);
   $.ajax({
     url: urlBuilder,
     error: function (XMLHttpRequest, textStatus, errorThrown) {
       if(XMLHttpRequest.responseJSON) {
         showNotification("failed", XMLHttpRequest.responseJSON["response"][requestId]["error"])
       }
+      handleButtonLoading(button, false, "Accept");
+      $(elem.parentElement).find("button#declineButton").attr('disabled', false);
     }
   }).done(() => {
     updateStatus(true, messageId, requestId);
+    handleButtonLoading(button, false, "Accept");
+    $(elem.parentElement).find("button#declineButton").attr('disabled', false);
   })
 }
diff --git a/templates/EnigmaOps/accessRequestForm.html b/templates/EnigmaOps/accessRequestForm.html
index d936596f..3a5e98bb 100644
--- a/templates/EnigmaOps/accessRequestForm.html
+++ b/templates/EnigmaOps/accessRequestForm.html
@@ -89,7 +89,9 @@ <h1 class="text-xl font-semibold text-gray-900">Module details</h1>
                 </div>
                 <input type="text" class="hidden" name="access_tag" value="{{ each_access.accessTag }}">
               </div>
-                <button type="submit" class=" mx-1 my-5 rounded-md border border-transparent bg-blue-500 px-4 py-2 text-sm font-medium text-blue-200 shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-offset-2">Submit request</button>
+                <button type="submit" id="submitButton" class="w-32 h-9 mx-1 my-5 rounded-md border border-transparent bg-blue-600 text-sm font-medium text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-offset-2">
+                  Submit request
+                </button>
             </form>
           </div>
         </div>
@@ -119,10 +121,18 @@ <h1 class="text-xl font-semibold text-gray-900">{{ each_access.formDesc }} Modul
           </div>
           <input type="text" class="hidden" name="access_tag" value="{{ each_access.accessTag }}">
         </div>
-        <button type="submit" class=" mx-1 my-5 rounded-md border border-transparent bg-blue-500 px-4 py-2 text-sm font-medium text-blue-200 shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-offset-2">Submit request</button>
+        <button type="submit" id="submitButton" class="w-32 h-9 mx-1 my-5 rounded-md border border-transparent bg-blue-600 text-sm font-medium text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-offset-2 items-center">
+          Submit request
+        </button>
       </form>
     {% endfor %}
   {% endif %}
+  <svg id="submitButtonLoading" class="collapse inline w-5 h-5 text-white animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+    <path class="opacity-75" fill="currentColor"
+      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
+    </path>
+  </svg>
 </div>
 <div id="redirect_to_dashboard" class="hidden">
   {% include "EnigmaOps/shared/redirect_to_dashboard.html" %}
diff --git a/templates/EnigmaOps/addUserToGroupForm.html b/templates/EnigmaOps/addUserToGroupForm.html
index 1725e6dd..6cd011d2 100644
--- a/templates/EnigmaOps/addUserToGroupForm.html
+++ b/templates/EnigmaOps/addUserToGroupForm.html
@@ -165,7 +165,7 @@ <h1 class="text-lg leading-7 font-medium text-gray-900">All group members</h1>
   </table>
 </div>
 <div class="px-4 sm:px-6 lg:px-8 h-1/6 w-full">
-  <form  action="{% url 'addUserToGroup' groupName %}" onsubmit="submitRequest(event, this)" method="post">
+  <form action="{% url 'addUserToGroup' groupName %}" onsubmit="submitRequest(event, this)" method="post">
     {% csrf_token %}
     <input type="text" class="hidden" name="groupName" value="{{ groupName }}">
     <input type="hidden" id="selected-users" value="" name="selectedUserList", required>
@@ -175,7 +175,7 @@ <h1 class="text-lg leading-7 font-medium text-gray-900">All group members</h1>
         <input type="text" name="memberReason" id="reason" class="block w-5/6 rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" placeholder="Please mention the reason for add new members to this group in detail" required>
       </div>
     </div>
-    <button type="submit" class="my-6 rounded-md border border-transparent bg-blue-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-offset-2">Submit request</button>
+    <button type="submit" id="submitButton" class="items-center w-32 h-9 my-6 rounded-md border border-transparent bg-blue-600 text-sm font-medium text-white shadow-sm hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-offset-2">Submit request</button>
   </form>
 </div>
 
@@ -183,6 +183,14 @@ <h1 class="text-lg leading-7 font-medium text-gray-900">All group members</h1>
   {% include "EnigmaOps/shared/redirect_to_dashboard.html" %}
 </div>
 
+<svg id="submitButtonLoading" class="collapse inline w-5 h-5 text-white animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none"
+  viewBox="0 0 24 24">
+  <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+  <path class="opacity-75" fill="currentColor"
+    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
+  </path>
+</svg>
+
 {% include "EnigmaOps/shared/notificationTemplate.html" %}
 
 {% endblock %}
diff --git a/templates/EnigmaOps/createNewGroup.html b/templates/EnigmaOps/createNewGroup.html
index 7b36e15e..13882743 100644
--- a/templates/EnigmaOps/createNewGroup.html
+++ b/templates/EnigmaOps/createNewGroup.html
@@ -215,11 +215,10 @@ <h1 class="mt-1.5 text-sm text-center text-gray-700">Please select members from
 
     <div class = "mb-5">
       <button type="submit" id="submitNewGroup"
-        class="flex items-center place-content-center rounded-md border border-transparent w-40 bg-blue-500 mt-8 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+        class="flex items-center w-32 h-9 place-content-center rounded-md border border-transparent bg-blue-600 mt-8 text-sm leading-5 font-medium text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-offset-2"
         onclick="submitRequest()">
         Submit request
       </button>
-
     </div>
   </div>
 
@@ -244,6 +243,14 @@ <h1 class="mt-1.5 text-sm text-center text-gray-700">Please select members from
   {% include "EnigmaOps/shared/redirect_to_dashboard.html" %}
 </div>
 
+<svg id="submitButtonLoading" class="collapse inline w-5 h-5 text-white animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none"
+  viewBox="0 0 24 24">
+  <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+  <path class="opacity-75" fill="currentColor"
+    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
+  </path>
+</svg>
+
 {% include "EnigmaOps/shared/notificationTemplate.html" %}
 
 {% endblock %}
diff --git a/templates/EnigmaOps/failureActions.html b/templates/EnigmaOps/failureActions.html
index 8dcc9785..0ad6616f 100644
--- a/templates/EnigmaOps/failureActions.html
+++ b/templates/EnigmaOps/failureActions.html
@@ -59,7 +59,7 @@ <h1 class="text-2xl font-bold leading-7 text-gray-900">Failure Actions</h1>
 							{% for request in grant_failures %}
 								<div class="px-4 py-3">
 									<H1 class="text-xl leading-8 font-semibold py-2">{{request.request_id}}</H1>
-									<table class="table-fixed border-b border-gray-200 border-t text-left text-sm w-7/12">
+									<table class="table-fixed border-b border-gray-200 border-t text-left text-sm w-3/4">
 										<tr class="bg-white border-b border-gray-200">
 											<td class="text-gray-500 py-4">Requested by</td>
 											<td class="text-gray-900 py-4">{{ request.user_identity.user }}</td>
@@ -91,7 +91,7 @@ <H1 class="text-xl leading-8 font-semibold py-2">{{request.request_id}}</H1>
 											</td>
 										</tr>
 									</table>
-									<div class="border-blue-200 bg-blue-100 px-4 py-5 my-4 rounded-md border flex w-7/12">
+									<div class="border-blue-200 bg-blue-100 px-4 py-5 my-4 rounded-md border flex w-3/4">
 										<div class="pr-3"><svg class="fill-current h-6 w-6 text-blue-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg></div>
 										<div class="text-blue-800 text-sm leading-5 font-medium"><ul>
 											<li><b class="font-bold">Resolve Instruction -</b> check logs or email for issue. Run approval again.</li>
@@ -101,9 +101,9 @@ <H1 class="text-xl leading-8 font-semibold py-2">{{request.request_id}}</H1>
 									</div>
 									<div id="grantFailures-{{forloop.counter}}"></div>
 									<div id="grantFailures-{{forloop.counter}}-actions" class="text-sm pt-5">
-										<button onclick="sendAPICall('{{ request.request_id }}', '/resolve_bulk', 'grantFailures-{{forloop.counter}}', 'Resolved')" class="rounded-md border border-transparent bg-blue-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">Resolve</button>
-										<button onclick="sendAPICall('{{ request.request_id }}', '/ignore/decline', 'grantFailures-{{forloop.counter}}', 'Marked Declined')" class="ml-3 rounded-md border border-transparent bg-blue-100 text-indigo-700 px-4 py-2 text-sm font-medium">Mark Declined</button>
-										<button onclick="sendAPICall('{{ request.request_id }}', '/ignore/approve', 'grantFailures-{{forloop.counter}}', 'Marked Approved')" class="ml-3 rounded-md border border-transparent bg-blue-100 text-indigo-700 px-4 py-2 text-sm font-medium">Mark Approved</button>
+										<button id="resolveButton" onclick="sendAPICall(this, '{{ request.request_id }}', '/resolve_bulk', 'grantFailures-{{forloop.counter}}', 'Resolved')" class="items-center w-20 h-9 rounded-md border border-transparent bg-blue-600 text-sm font-medium text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">Resolve</button>
+										<button id="declineButton" onclick="sendAPICall(this, '{{ request.request_id }}', '/ignore/decline', 'grantFailures-{{forloop.counter}}', 'Marked Declined')" class="items-center w-32 h-9 ml-3 rounded-md border border-transparent bg-blue-100 text-indigo-700 text-sm font-medium hover:bg-blue-200">Mark Declined</button>
+										<button id="actionButton" onclick="sendAPICall(this, '{{ request.request_id }}', '/ignore/approve', 'grantFailures-{{forloop.counter}}', 'Marked Approved')" class="items-center w-32 h-9 ml-3 rounded-md border border-transparent bg-blue-100 text-indigo-700 text-sm font-medium hover:bg-blue-200">Mark Approved</button>
 									</div>
 								</div>
 							{% endfor %}
@@ -129,7 +129,7 @@ <H1 class="text-xl leading-8 font-semibold py-2">{{request.request_id}}</H1>
 							{% for request in revoke_failures %}
 								<div class="px-4 py-3">
 									<H1 class="text-xl leading-8 font-semibold py-2">{{request.request_id}}</H1>
-									<table class="table-fixed border-b border-t border-gray-200 text-left text-sm w-7/12">
+									<table class="table-fixed border-b border-t border-gray-200 text-left text-sm w-3/4">
 										<tr class="bg-white border-b border-gray-200">
 											<td class="text-gray-500 py-4">Requested by</td>
 											<td class="text-gray-900 py-4">{{ request.user_identity.user }}</td>
@@ -161,7 +161,7 @@ <H1 class="text-xl leading-8 font-semibold py-2">{{request.request_id}}</H1>
 											</td>
 										</tr>
 									</table>
-									<div class="border-blue-200 bg-blue-100 px-4 py-5 my-4 rounded-md border flex w-7/12">
+									<div class="border-blue-200 bg-blue-100 px-4 py-5 my-4 rounded-md border flex w-3/4">
 										<div class="pr-3"><svg class="fill-current h-6 w-6 text-blue-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg></div>
 										<div class="text-blue-800 text-sm leading-5 font-medium"><ul>
 											<li><b class="font-bold">Resolve Instruction -</b> check logs or email for issue. Run approval again.</li>
@@ -171,9 +171,9 @@ <H1 class="text-xl leading-8 font-semibold py-2">{{request.request_id}}</H1>
 									</div>
 									<div id="revokeFailures-{{forloop.counter}}"></div>
 									<div id="revokeFailures-{{forloop.counter}}-actions" class="text-sm pt-5">
-										<button onclick="sendAPICall('{{ request.request_id }}', '/resolve_bulk', 'revokeFailures-{{forloop.counter}}', 'Resolved')" class="rounded-md border border-transparent bg-blue-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">Resolve</button>
-										<button onclick="sendAPICall('{{ request.request_id }}', '/ignore/decline', 'revokeFailures-{{forloop.counter}}', 'Marked Declined')" class="ml-3 rounded-md border border-transparent bg-blue-100 text-indigo-700 px-4 py-2 text-sm font-medium">Mark Declined</button>
-										<button onclick="sendAPICall('{{ request.request_id }}', '/ignore/revoke', 'revokeFailures-{{forloop.counter}}', 'Marked Revoked')" class="ml-3 rounded-md border border-transparent bg-blue-100 text-indigo-700 px-4 py-2 text-sm font-medium">Mark Revoked</button>
+										<button id="resolveButton" onclick="sendAPICall(this, '{{ request.request_id }}', '/resolve_bulk', 'revokeFailures-{{forloop.counter}}', 'Resolved')" class="items-center w-20 h-9 rounded-md border border-transparent bg-blue-600 text-sm font-medium text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">Resolve</button>
+										<button id="declineButton" onclick="sendAPICall(this, '{{ request.request_id }}', '/ignore/decline', 'revokeFailures-{{forloop.counter}}', 'Marked Declined')" class="items-center w-32 h-9 ml-3 rounded-md border border-transparent bg-blue-100 text-indigo-700 text-sm font-medium hover:bg-blue-200">Mark Declined</button>
+										<button id="actionButton" onclick="sendAPICall(this, '{{ request.request_id }}', '/ignore/revoke', 'revokeFailures-{{forloop.counter}}', 'Marked Revoked')" class="items-center w-32 h-9 ml-3 rounded-md border border-transparent bg-blue-100 text-indigo-700 text-sm font-medium hover:bg-blue-200">Mark Revoked</button>
 									</div>
 								</div>
 							{% endfor %}
@@ -201,6 +201,20 @@ <h3 class="text-sm font-medium">The request - {{eachAccessDetails.requestId}} is
 	</div>
 </div>
 
+<svg id="resolveButtonLoading" class="collapse inline w-4 h-4 text-white animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+  <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+  <path class="opacity-75" fill="currentColor"
+    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
+  </path>
+</svg>
+
+<svg id="actionButtonLoading" class="collapse inline w-5 h-5 text-blue-500 animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+  <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+  <path class="opacity-75" fill="currentColor"
+    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
+  </path>
+</svg>
+
 {% include "EnigmaOps/shared/notificationTemplate.html" %}
 
 
diff --git a/templates/EnigmaOps/groupAccessRequestForm.html b/templates/EnigmaOps/groupAccessRequestForm.html
index 573f07c1..0ef1d386 100644
--- a/templates/EnigmaOps/groupAccessRequestForm.html
+++ b/templates/EnigmaOps/groupAccessRequestForm.html
@@ -93,7 +93,7 @@ <h1 class="text-xl font-semibold text-gray-900">Module details</h1>
                   <input type="text" class="hidden" name="access_tag" value="{{ each_access.accessTag }}">
                   <input type="text" class="hidden" name="groupName" value="{{ groupName }}">
                 </div>
-                  <button type="submit" class=" mx-1 my-5 rounded-md border border-transparent bg-blue-500 px-4 py-2 text-sm font-medium text-blue-200 shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-offset-2">Submit request</button>
+                  <button type="submitButton" id="button" class=" mx-1 my-5 w-32 h-9 rounded-md border border-transparent bg-blue-600 text-sm font-medium text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-offset-2">Submit request</button>
               </form>
             </div>
           </div>
@@ -121,11 +121,18 @@ <h1 class="text-xl font-semibold text-gray-900">{{ each_access.formDesc }} Modul
             <input type="text" class="hidden" name="access_tag" value="{{ each_access.accessTag }}">
             <input type="text" class="hidden" name="groupName" value="{{ groupName }}">
           </div>
-          <button type="submit" class=" mx-1 my-5 rounded-md border border-transparent bg-blue-500 px-4 py-2 text-sm font-medium text-blue-200 shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-offset-2">Submit request</button>
+          <button type="submit" id="submitButton" class="mx-1 my-5 w-32 h-9 rounded-md border border-transparent bg-blue-600 text-sm font-medium text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-offset-2">Submit request</button>
         </form>
       {% endfor %}
     {% endif %}
   {% endif %}
+  <svg id="submitButtonLoading" class="collapse inline w-5 h-5 text-white animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none"
+    viewBox="0 0 24 24">
+    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+    <path class="opacity-75" fill="currentColor"
+      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
+    </path>
+  </svg>
 </div>
 <div id="redirect_to_dashboard" class="hidden">
   {% include "EnigmaOps/shared/redirect_to_dashboard.html" %}
diff --git a/templates/EnigmaOps/pendingRequests.html b/templates/EnigmaOps/pendingRequests.html
index 429e1e0f..2c37b92d 100644
--- a/templates/EnigmaOps/pendingRequests.html
+++ b/templates/EnigmaOps/pendingRequests.html
@@ -114,8 +114,8 @@ <H1 class="text-xl leading-8 font-semibold py-2">{{group.group_club_id}}</H1>
 											</table>
 											<div id="groupAccess-{{forloop.parentloop.counter}}-{{forloop.counter}}"></div>
 											<div id="groupAccess-{{forloop.parentloop.counter}}-{{forloop.counter}}-actions" class="text-sm pt-5">
-												<button onclick="approveAccess('{{eachAccessDetails.requestId}}', 'groupAccess', 'groupAccess-{{forloop.parentloop.counter}}-{{forloop.counter}}')" class="rounded-md border border-transparent bg-blue-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">Accept</button>
-												<button class="ml-3 rounded-md border border-transparent bg-blue-100 text-indigo-700 px-4 py-2 text-sm font-medium" onclick="showDeclineModal('{{ eachAccessDetails.requestId }}', 'groupAccess', 'groupAccess-{{forloop.parentloop.counter}}-{{forloop.counter}}')">Decline</button>
+												<button id="accessButton" onclick="approveAccess(this, '{{eachAccessDetails.requestId}}', 'groupAccess', 'groupAccess-{{forloop.parentloop.counter}}-{{forloop.counter}}')" class="items-center w-20 h-9 rounded-md border border-transparent bg-blue-600 text-sm font-medium text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">Accept</button>
+												<button id="declineButton" class="w-20 h-9 ml-3 rounded-md border border-transparent bg-blue-100 text-indigo-700 text-sm font-medium hover:bg-blue-200" onclick="showDeclineModal(this, '{{ eachAccessDetails.requestId }}', 'groupAccess', 'groupAccess-{{forloop.parentloop.counter}}-{{forloop.counter}}')">Decline</button>
 											</div>
 										</div>
 									{% endfor %}
@@ -173,8 +173,8 @@ <H1 class="text-xl leading-8 font-semibold py-2">{{group.groupRequest.group_id}}
 									</div>
 									<div id="groupNew-{{forloop.counter}}"></div>
 									<div id="groupNew-{{forloop.counter}}-actions" class="text-sm pt-5">
-										<button onclick="approveAccess('{{ group.groupRequest.group_id }}', 'groupNew', 'groupNew-{{forloop.counter}}')" class="rounded-md border border-transparent bg-blue-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">Accept</button>
-										<button onclick="showDeclineModal('{{ group.groupRequest.group_id }}', 'declineNewGroup', 'groupNew-{{forloop.counter}}')" class="ml-3 rounded-md border border-transparent bg-blue-100 text-indigo-700 px-4 py-2 text-sm font-medium">Decline</button>
+										<button id="accessButton" onclick="approveAccess('{{ group.groupRequest.group_id }}', 'groupNew', 'groupNew-{{forloop.counter}}')" class="items-center w-20 h-9 rounded-md border border-transparent bg-blue-600 text-sm font-medium text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">Accept</button>
+										<button id="declineButton" onclick="showDeclineModal('{{ group.groupRequest.group_id }}', 'declineNewGroup', 'groupNew-{{forloop.counter}}')" class="w-20 h-9 ml-3 rounded-md border border-transparent bg-blue-100 text-indigo-700 text-sm font-medium hover:bg-blue-200">Decline</button>
 									</div>
 								</div>
 							{% endfor %}
@@ -230,8 +230,8 @@ <H1 class="text-xl leading-8 font-semibold py-2">{{member.membership_id}}</H1>
 									</table>
 									<div id="groupMember-{{forloop.counter}}"></div>
 									<div id="groupMember-{{forloop.counter}}-actions" class="text-sm pt-5">
-										<button onclick="approveAccess('{{member.membership_id}}', 'groupMember', 'groupMember-{{forloop.counter}}')" class="rounded-md border border-transparent bg-blue-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">Accept</button>
-										<button onclick="showDeclineModal('{{member.membership_id}}', 'declineMember', 'groupMember-{{forloop.counter}}')" class="ml-3 rounded-md border border-transparent bg-blue-100 text-indigo-700 px-4 py-2 text-sm font-medium">Decline</button>
+										<button id="accessButton" onclick="approveAccess('{{member.membership_id}}', 'groupMember', 'groupMember-{{forloop.counter}}')" class="items-center w-20 h-9 rounded-md border border-transparent bg-blue-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">Accept</button>
+										<button id="declineButton" onclick="showDeclineModal('{{member.membership_id}}', 'declineMember', 'groupMember-{{forloop.counter}}')" class="w-20 h-9 ml-3 rounded-md border border-transparent bg-blue-100 text-indigo-700 px-4 py-2 text-sm font-medium hover:bg-blue-200">Decline</button>
 									</div>
 								</div>
 							{% endfor %}
@@ -305,8 +305,8 @@ <H1 class="text-xl leading-8 font-semibold py-2">{{eachRequest.club_id}}</H1>
 											</table>
 											<div id="{{eachRequest.access_tag}}-moduleAccess-{{forloop.parentloop.counter}}-{{forloop.counter}}"></div>
 											<div id="{{eachRequest.access_tag}}-moduleAccess-{{forloop.parentloop.counter}}-{{forloop.counter}}-actions" class="text-sm pt-5">
-												<button onclick="approveAccess('{{ accessData.requestId }}', 'moduleAccess', '{{eachRequest.access_tag}}-moduleAccess-{{forloop.parentloop.counter}}-{{forloop.counter}}')" class="rounded-md border border-transparent bg-blue-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">Accept</button>
-												<button onclick="showDeclineModal('{{ accessData.requestId }}', 'moduleAccess', '{{eachRequest.access_tag}}-moduleAccess-{{forloop.parentloop.counter}}-{{forloop.counter}}')" class="ml-3 rounded-md border border-transparent bg-blue-100 text-indigo-700 px-4 py-2 text-sm font-medium">Decline</button>
+												<button id="accessButton" onclick="approveAccess('{{ accessData.requestId }}', 'moduleAccess', '{{eachRequest.access_tag}}-moduleAccess-{{forloop.parentloop.counter}}-{{forloop.counter}}')" class="items-center w-20 h-9 rounded-md border border-transparent bg-blue-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">Accept</button>
+												<button id="declineButton" onclick="showDeclineModal('{{ accessData.requestId }}', 'moduleAccess', '{{eachRequest.access_tag}}-moduleAccess-{{forloop.parentloop.counter}}-{{forloop.counter}}')" class="w-20 h-9 ml-3 rounded-md border border-transparent bg-blue-100 text-indigo-700 px-4 py-2 text-sm font-medium hover:bg-blue-200">Decline</button>
 											</div>
 										</div>
 									</div>
@@ -356,7 +356,7 @@ <H1 class="text-xl leading-8 font-semibold py-2">{{eachRequest.club_id}}</H1>
                     </div>
 
                     <div class="border-t w-full p-3 justify-end bg-gray-100 flex">
-                        <button type="submit" class="declineFinalButton rounded-md border border-transparent bg-blue-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">Decline</button>
+                        <button type="submit" class="items-center w-20 h-9 declineFinalButton rounded-md border border-transparent bg-blue-600 text-sm font-medium text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">Decline</button>
                     </div>
 
                 </form>
@@ -380,6 +380,15 @@ <h3 class="text-sm font-medium">The request - {{eachAccessDetails.requestId}} is
 		</div>
 	</div>
 </div>
+
+<svg id="buttonLoading" class="collapse inline w-4 h-4 text-white animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none"
+  viewBox="0 0 24 24">
+  <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+  <path class="opacity-75" fill="currentColor"
+    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
+  </path>
+</svg>
+
 {% include "EnigmaOps/shared/notificationTemplate.html" %}