diff --git a/app/css/all.css b/app/css/all.css
index 6553afa5..a607fc5b 100644
--- a/app/css/all.css
+++ b/app/css/all.css
@@ -110,10 +110,31 @@ License: GNU General Public License v3.0
   margin-bottom: 0.5em;
 }
 
-.loading-spinner {
-  background: url("../../app/img/loading-spinner.gif") no-repeat scroll center center transparent;
-  min-height: 450px;
+#wifiClientContent #wpaConf {
+  min-height: calc(100vh / 3);
+}
+
+.loading-spinner::before {
+  position: absolute;
+  top: 0;
+  left: 0;
   width: 100%;
+  height: calc(100vh / 4);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #858796;
+  content: "\f1ce"; /* Unicode for the circle-notch icon */
+  font-family: "Font Awesome 5 Free";
+  font-weight: 900; /* Adjust as needed */
+  font-size: 54px; /* Adjust icon size as needed */
+  animation: spin 1.5s linear infinite;
+  width: 100%;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
 }
 
 @media (min-width: 576px) {
diff --git a/app/img/loading-spinner.gif b/app/img/loading-spinner.gif
deleted file mode 100644
index f7e0378a..00000000
Binary files a/app/img/loading-spinner.gif and /dev/null differ
diff --git a/app/img/no-trace-200x200.png b/app/img/no-trace-200x200.png
deleted file mode 100644
index ab1b40e4..00000000
Binary files a/app/img/no-trace-200x200.png and /dev/null differ
diff --git a/templates/configure_client.php b/templates/configure_client.php
index aeca17bd..45c44265 100755
--- a/templates/configure_client.php
+++ b/templates/configure_client.php
@@ -24,7 +24,7 @@
             <button type="button" class="btn btn-info float-right js-reload-wifi-stations"><?php echo _("Rescan"); ?></button>
           </div>
         </div>
-        <div class="row">
+        <div class="row" id="wpaConf">
           <div class="col">
             <form method="POST" action="wpa_conf" name="wpa_conf_form">
               <?php echo CSRFTokenFieldTag() ?>