diff --git a/src/config/backpack/theme-tabler.php b/src/config/backpack/theme-tabler.php
index 028f326..ba9a358 100644
--- a/src/config/backpack/theme-tabler.php
+++ b/src/config/backpack/theme-tabler.php
@@ -28,7 +28,7 @@
      * Pick a login page layout.
      * Possible values: default, illustration, cover
      */
-    'auth_layout' => 'default', // default, illustration, cover
+    'auth_layout' => 'cover', // default, illustration, cover
 
     /**
      * Here you can easily load your own extra css styles.
diff --git a/src/public/lib/css/overrides.css b/src/public/lib/css/overrides.css
index a8ad5df..79a7c32 100644
--- a/src/public/lib/css/overrides.css
+++ b/src/public/lib/css/overrides.css
@@ -41,18 +41,25 @@ body {
     background: #2a5255;
 }
 
-.hide {
-    display: none;
-}
-
-.loading {
+.loading-container {
+    background: rgba(0, 0, 0, 0.5);
+    z-index: 9999;
     position: fixed;
     top: 0;
-    right: 0;
-    bottom: 0;
     left: 0;
-    background: rgba(0, 0, 0, 0.5);
-    z-index: 9999;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.loading {
+    text-align: center;
+}
+
+.hide {
+    display: none;
 }
 
 .footer {
diff --git a/src/public/lib/images/loading.svg b/src/public/lib/images/loading.svg
new file mode 100644
index 0000000..3720a3a
--- /dev/null
+++ b/src/public/lib/images/loading.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: none; display: block; shape-rendering: auto;" width="200px" height="200px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
+<circle cx="50" cy="50" r="32" stroke-width="8" stroke="#3373f2" stroke-dasharray="50.26548245743669 50.26548245743669" fill="none" stroke-linecap="round">
+  <animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="1s" keyTimes="0;1" values="0 50 50;360 50 50"></animateTransform>
+</circle>
+<!-- [ldio] generated by https://loading.io/ --></svg>
\ No newline at end of file
diff --git a/src/public/lib/js/redbeard.js b/src/public/lib/js/redbeard.js
index 258dedc..cf88ac0 100644
--- a/src/public/lib/js/redbeard.js
+++ b/src/public/lib/js/redbeard.js
@@ -96,7 +96,7 @@ $(document).ready(function () {
     // On click event for the element with id "list-runways"
     $("#list-runways").click(function (t) {
         t.preventDefault(); // Prevent default action of the click event
-        $(".loading").show(); // Show the loading element
+        $("#loading").show(); // Show the loading element
         icao = $("#icao").val(); // Get the value of the input with id "icao"
 
         // If icao is empty
@@ -106,7 +106,7 @@ $(document).ready(function () {
                 ErrorModal("ICAO cannot be empty.", "runway-modal")
             );
             $("#runway-modal").modal("show"); // Show the modal with id "runway-modal"
-            $(".loading").hide(); // Hide the loading element
+            $("#loading").hide(); // Hide the loading element
             return; // Exit the function
         }
 
@@ -117,7 +117,7 @@ $(document).ready(function () {
                 // Show an error modal with the received error message
                 $("#runway-output").html(ErrorModal(t.message, "runway-modal"));
                 $("#runway-modal").modal("show"); // Show the modal with id "runway-modal"
-                $(".loading").hide(); // Hide the loading element
+                $("#loading").hide(); // Hide the loading element
                 return; // Exit the function
             }
 
@@ -128,11 +128,11 @@ $(document).ready(function () {
                 <table class="table">
                     <thead>
                         <tr>
-                            <th scope="col"><i class="fa-solid fa-road"></i></th>
-                            <th scope="col"><i class="fa-solid fa-wind"></i></th>
-                            <th scope="col"><i class="fa-solid fa-plus-minus"></i><i class="fa-solid fa-wind"></i></th>
-                            <th scope="col"><i class="fa-solid fa-plane-arrival"></i></th>
-                            <th scope="col"><i class="fa-solid fa-plane-departure"></i></th>
+                            <th scope="col"><i class="fa-solid fa-road" title="Runway"></i></th>
+                            <th scope="col"><i class="fa-solid fa-wind" title="Wind"></i></th>
+                            <th scope="col"><i class="fa-solid fa-plus-minus"></i><i class="fa-solid fa-wind" title="Difference"></i></th>
+                            <th scope="col"><i class="fa-solid fa-plane-arrival" title="Arrival"></i></th>
+                            <th scope="col"><i class="fa-solid fa-plane-departure" title="Departure"></i></th>
                         </tr>
                     </thead>
                     <tbody>
@@ -163,13 +163,13 @@ $(document).ready(function () {
                 )
             );
             $("#runway-modal").modal("show"); // Show the modal with id "runway-modal"
-            $(".loading").hide(); // Hide the loading element
+            $("#loading").hide(); // Hide the loading element
         });
     });
 
     // On form submit event for the element with id "atis-input"
     $("#atis-input").submit(function (t) {
-        $(".loading").show(); // Show the loading element
+        $("#loading").show(); // Show the loading element
         t.preventDefault(); // Prevent the default form submission
         icao = $("#icao").val(); // Get the value of the input with id "icao"
         ident = $("#ident").val(); // Get the value of the input with id "ident"
@@ -184,7 +184,7 @@ $(document).ready(function () {
                     // Show an error modal with the received error message
                     $("#atis-output").html(ErrorModal(t.message, "atis-modal"));
                     $("#atis-modal").modal("show"); // Show the modal with id "atis-modal"
-                    $(".loading").hide(); // Hide the loading element
+                    $("#loading").hide(); // Hide the loading element
                     return; // Exit the function
                 }
 
@@ -195,7 +195,7 @@ $(document).ready(function () {
                         ErrorModal("API returned empty data. Please try again.")
                     );
                     $("#atis-modal").modal("show"); // Show the modal with id "atis-modal"
-                    $(".loading").hide(); // Hide the loading element
+                    $("#loading").hide(); // Hide the loading element
                     return; // Exit the function
                 }
 
@@ -229,7 +229,7 @@ $(document).ready(function () {
                 // Show the success modal
                 $("#atis-output").html(success);
                 $("#atis-modal").modal("show"); // Show the modal with id "atis-modal"
-                $(".loading").hide(); // Hide the loading element
+                $("#loading").hide(); // Hide the loading element
 
                 // Make an HTTP POST request to another API endpoint with data for text-to-speech
                 tts = $.post(
@@ -247,7 +247,7 @@ $(document).ready(function () {
                                 ErrorModal(t.message, "atis-modal")
                             );
                             $("#atis-modal").modal("show"); // Show the modal with id "atis-modal"
-                            $(".loading").hide(); // Hide the loading element
+                            $("#loading").hide(); // Hide the loading element
                             return; // Exit the function
                         }
 
@@ -295,13 +295,18 @@ $(document).ready(function () {
     $("#copy-squawk").click(function () {
         copy("#squawk-output"); // Call the 'copy' function to copy the content of the element with id "squawk-output"
     });
-});
 
-$('input[type=radio][name=output-type]').change(function(){
-    if(this.value == 'atis'){
-        $('.awos-hide').show();
-    }
-    if(this.value == 'awos'){
-        $('.awos-hide').hide();
-    }
-})
\ No newline at end of file
+    // On click event for the element with id "metar-generator"
+    $("input[type=radio][name=output-type]").change(function () {
+        // Check if the value of the selected radio button is "metar"
+        if (this.value == "atis") {
+            // Show the element with class "atis-hide"
+            $(".awos-hide").show();
+        }
+        // Check if the value of the selected radio button is "awos"
+        if (this.value == "awos") {
+            // Hide the element with class "atis-hide"
+            $(".awos-hide").hide();
+        }
+    });
+});
diff --git a/src/resources/views/home.blade.php b/src/resources/views/home.blade.php
index 8c3c9e9..299a9d2 100644
--- a/src/resources/views/home.blade.php
+++ b/src/resources/views/home.blade.php
@@ -1,9 +1,9 @@
 @extends('layouts.master')
 
 @section('content')
-    <div class="loading hide">
-        <div class="position-absolute top-50 start-50">
-            <div class="spinner-border text-light" role="status"></div>
+    <div class="loading-container hide" id="loading">
+        <div class="loading">
+            <img src="{{ asset('lib/images/loading.svg') }}" alt="Loading..." class="img-fluid" width="150">
         </div>
     </div>
     <div class="container d-flex justify-content-center align-items-center py-3">
diff --git a/src/resources/views/vendor/backpack/theme-tabler/auth/login/cover.blade.php b/src/resources/views/vendor/backpack/theme-tabler/auth/login/cover.blade.php
new file mode 100644
index 0000000..73d59ad
--- /dev/null
+++ b/src/resources/views/vendor/backpack/theme-tabler/auth/login/cover.blade.php
@@ -0,0 +1,25 @@
+@extends(backpack_view('layouts.auth'))
+
+@section('content')
+    <div class="row g-0 flex-fill">
+        <div class="col-12 col-lg-6 col-xl-4 border-top-wide border-primary d-flex flex-column justify-content-center">
+            <div class="container container-tight my-5 px-lg-5">
+                <div class="text-center mb-4 display-6 auth-logo-container">
+                    {!! backpack_theme_config('project_logo') !!}
+                </div>
+                @include(backpack_view('auth.login.inc.form'))
+                @if (config('backpack.base.registration_open'))
+                    <div class="text-center text-muted mt-3">
+                        <a tabindex="6"
+                            href="{{ route('backpack.auth.register') }}">{{ trans('backpack::base.register') }}</a>
+                    </div>
+                @endif
+            </div>
+        </div>
+        <div class="col-12 col-lg-6 col-xl-8 d-none d-lg-block">
+            <div class="bg-cover h-100 min-vh-100"
+                style="background-image: url({{ asset('lib/images/technology_website_texture_background.jpg') }})">
+            </div>
+        </div>
+    </div>
+@endsection
diff --git a/src/resources/views/vendor/backpack/theme-tabler/auth/register/cover.blade.php b/src/resources/views/vendor/backpack/theme-tabler/auth/register/cover.blade.php
new file mode 100644
index 0000000..30e5734
--- /dev/null
+++ b/src/resources/views/vendor/backpack/theme-tabler/auth/register/cover.blade.php
@@ -0,0 +1,23 @@
+@extends(backpack_view('layouts.auth'))
+
+@section('content')
+    <div class="row g-0 flex-fill">
+        <div class="col-12 col-lg-6 col-xl-4 border-top-wide border-primary d-flex flex-column justify-content-center">
+            <div class="container container-tight my-5 px-lg-5">
+                <div class="text-center mb-4 display-6 auth-logo-container">
+                    {!! backpack_theme_config('project_logo') !!}
+                </div>
+                @include(backpack_view('auth.register.inc.form'))
+                @if (config('backpack.base.registration_open'))
+                    <div class="text-center text-muted mt-4">
+                        <a tabindex="6" href="{{ route('backpack.auth.login') }}">{{ trans('backpack::base.login') }}</a>
+                    </div>
+                @endif
+            </div>
+        </div>
+        <div class="col-12 col-lg-6 col-xl-8 d-none d-lg-block">
+            <div class="bg-cover h-100 min-vh-100"
+                style="background-image: url({{ asset('lib/images/technology_website_texture_background.jpg') }})"></div>
+        </div>
+    </div>
+@endsection
diff --git a/src/routes/backpack/custom.php b/src/routes/backpack/custom.php
index 43fab85..f40ae5b 100644
--- a/src/routes/backpack/custom.php
+++ b/src/routes/backpack/custom.php
@@ -18,5 +18,4 @@
 ], function () { // custom admin routes
     Route::crud('atis-audio-file', 'ATISAudioFileCrudController');
     Route::crud('airport', 'AirportCrudController');
-    Route::crud('user', 'UserCrudController');
 }); // this should be the absolute last line of this file
\ No newline at end of file