diff --git a/static/css/style.css b/static/css/style.css
index 14191f4..baa07a4 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -93,4 +93,18 @@ a {
 
 .logo {
     width: 100%;
+}
+
+.icn-spinner {
+  animation: spin-animation 0.9s infinite;
+  display: inline-block;
+}
+
+@keyframes spin-animation {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(359deg);
+  }
 }
\ No newline at end of file
diff --git a/templates/base.html b/templates/base.html
index 91ff3b7..d7863c6 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -18,8 +18,8 @@
 </head>
 <body>
 <div id="loader-wrapper" class="bg-white position-fixed z-3 w-100 h-100 text-center">
-    <div class="spinner-border mt-5" role="status" style="position: fixed; top: 50%;">
-        <span class="visually-hidden">Loading...</span>
+    <div class="" role="status" style="position: fixed; top: 50%;">
+        <i class="la la-4x la-compact-disc icn-spinner centered"></i>
     </div>
 </div>
 
@@ -34,7 +34,7 @@
                             <div class="logo-home mx-auto">
                                 <a id="logo" class="text-black btn-modal" href="#" data-action="main_menu">
                                     <h1 class="logo-text" style="margin-left: 6px;">
-                                        <i class="la la-dot-circle"></i>Discography
+                                        <i class="la la-compact-disc"></i>Discography
                                     </h1>
                                 </a>
                             </div>
@@ -93,7 +93,7 @@
                             crossorigin="anonymous"></script>
                     <script type="text/javascript">
                         $(window).on('load', function () {
-                            $("#loader-wrapper").fadeOut(700);
+                            $("#loader-wrapper").fadeOut(900);
                         });
                     </script>
                     <script src="/static/js/app.js"></script>
