diff --git a/src/assets/img/heritage-loader-blue.gif b/src/assets/img/heritage-loader-blue.gif
new file mode 100644
index 00000000..c36fc348
Binary files /dev/null and b/src/assets/img/heritage-loader-blue.gif differ
diff --git a/src/iss-components/loading-modal/loading-modal.vue b/src/iss-components/loading-modal/loading-modal.vue
index c223b481..e8303824 100644
--- a/src/iss-components/loading-modal/loading-modal.vue
+++ b/src/iss-components/loading-modal/loading-modal.vue
@@ -2,20 +2,24 @@
     <div
         v-if="showModalContent"
         class="container-fluid modal-loader">
-        <div class="row g-2 h-100 d-flex align-items-center">
-            <div class="container-fluid overflow-hidden">
-                <div class="row h-100">
-                    <div class="col text-center tagbg mb-4">
-                        <div
-                            class="spinner-border text-danger"
-                            role="status">
-                            <span class="visually-hidden">Loading...</span>
-                        </div>
+        <div class="modal-loader-background"></div>
+        <div class="modal-loader-content">
+            <div class="modal-loader-content-container">
+                <div class="modal-loader-spinner-container">
+                    <div class="modal-loader-text">
+                        Processing...
+                    </div>
+                    <div
+                        class="modal-loader-spinner"
+                        role="status">
+                        <img
+                            src="~@/assets/img/heritage-loader-blue.gif"
+                            alt="Loading spinner" />
                     </div>
                 </div>
                 <div
                     v-if="showTextCarouselContent"
-                    class="row">
+                    class="row modal-loader-text-container">
                     <div class="col">
                         <div class="text-container slide">
                             <p
@@ -94,71 +98,116 @@ export default {
 @import "@/styles/ux-variables-svg-strings.scss";
 
 .modal-loader {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    z-index: 1057;
-    width: 100%;
-    height: 100%;
-    overflow-x: hidden;
-    overflow-y: auto;
-    outline: 0;
-    background: $gray-100;
+    .modal-loader-background,
+    .modal-loader-content {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        width: 100%;
+        height: 100%;
+        overflow-x: hidden;
+        overflow-y: auto;
+        outline: 0;
+    }
 
-    .tagbg {
-        background-image: url($svg-loading-modal-image);
-        background-repeat: no-repeat;
-        background-position: center center;
-        background-size: 96px;
+    .modal-loader-background {
+        z-index: 1057;
+        background: #000;
+        opacity: 0.5;
+    }
+
+    .modal-loader-content {
+        z-index: 1058;
         display: flex;
-        justify-content: center;
+        justify-content: flex-start;
         align-items: center;
-    }
-
-    .spinner-border {
-        width: 6.5rem;
-        height: 6.5rem;
-        border: 0.45em solid currentColor;
-        border-right-color: transparent;
-    }
-
-    .text-container {
-        display: flex;
-        width: 350px;
-        overflow: hidden;
-        white-space: nowrap;
-        margin: 0 auto;
-        position: relative;
-        &:after {
-            content: "";
-            background: rgb(245, 245, 245);
-            background: linear-gradient(
-                270deg,
-                rgba(245, 245, 245, 1) 0%,
-                rgba(245, 245, 245, 0) 5%,
-                rgba(245, 245, 245, 0) 95%,
-                rgba(245, 245, 245, 1) 100%
-            );
-            position: absolute;
-            width: 100%;
-            height: 100%;
-            z-index: 2;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
+        flex-direction: column;
+        @include media-breakpoint-up(xs) {
+            padding-top: 5rem;
         }
 
-        &.slide p {
-            animation: slide-in 20s ease-in-out 1s forwards 1;
+        @include media-breakpoint-up(md) {
+            padding-top: 7rem;
         }
 
-        p {
-            margin: 0 175px;
-            transform: translateX(180px);
+        .modal-loader-content-container {
+            min-width: 15rem; // 240px
+            min-height: 15rem; // 240px
+            font-weight: 600;
+            padding: 1rem 0;
+            display: flex;
+            align-items: flex-start;
+            justify-content: center;
+            background-color: #fff;
+            background-clip: padding-box;
+            outline: 0;
+            border: 1px solid rgba(0, 0, 0, .2);
+            border-radius: 0.375rem;
+            box-shadow: 0 .375rem 11rem rgba(0, 0, 0, .5);
+
+            .modal-loader-spinner-container {
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                justify-content: center;
+                color: #1574a1;
+                font-weight: 600;
+
+                .modal-loader-spinner {
+                    margin-top: 0.75rem;
+                }
+            }
+        }
+
+        .tagbg {
+            background-image: url($svg-loading-modal-image);
+            background-repeat: no-repeat;
+            background-position: center center;
+            background-size: 96px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+
+        .text-container {
+            display: flex;
+            width: 350px;
+            overflow: hidden;
+            white-space: nowrap;
+            margin: 0 auto;
+            position: relative;
+            &:after {
+                content: "";
+                background: rgb(245, 245, 245);
+                background: linear-gradient(
+                    270deg,
+                    rgba(245, 245, 245, 1) 0%,
+                    rgba(245, 245, 245, 0) 5%,
+                    rgba(245, 245, 245, 0) 95%,
+                    rgba(245, 245, 245, 1) 100%
+                );
+                position: absolute;
+                width: 100%;
+                height: 100%;
+                z-index: 2;
+                top: 0;
+                left: 0;
+                right: 0;
+                bottom: 0;
+            }
+
+            &.slide p {
+                animation: slide-in 20s ease-in-out 1s forwards 1;
+            }
+
+            p {
+                margin: 0 175px;
+                transform: translateX(180px);
+            }
         }
     }
+
 }
 </style>
diff --git a/src/iss-components/site-footer/site-footer.vue b/src/iss-components/site-footer/site-footer.vue
index b3a1aa99..8188dd76 100644
--- a/src/iss-components/site-footer/site-footer.vue
+++ b/src/iss-components/site-footer/site-footer.vue
@@ -49,6 +49,7 @@
 <script>
 import textLink from '@/ux-components/text-link/text-link.vue';
 import buttonMain from '@/ux-components/button-main/button-main.vue';
+import showIssLoadingModal from '@/helpers/loading-modal-helper';
 
 export default {
     name: 'site-footer',
@@ -97,6 +98,10 @@ export default {
         buttonClick() {
             // prevent keyboard input after button click
             document.onkeydown = () => false;
+
+            if ((!this.disableForwardAction && !this.isForwardActionDisabled)) {
+                showIssLoadingModal(true);
+            }
             this.$emit('forwardClicked');
         },
         linkClick() {