diff --git a/src/App.scss b/src/App.scss
index 6fbd13f..0cbcb28 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -3,7 +3,7 @@
 $sidebar-width: 250px;
 $number-of-channels: 3;
 
-.loading {
+.loading-dialogue {
   position: fixed;
   top: 20%;
   left: 50%;
diff --git a/src/navbar/navbar.scss b/src/navbar/navbar.scss
index 80b44f6..d97e52b 100644
--- a/src/navbar/navbar.scss
+++ b/src/navbar/navbar.scss
@@ -186,12 +186,12 @@
     opacity: 0;
     position: absolute;
     left: 25px;
-    transition: 0.5s;
+    transition: 0.4s;
     height: 32px;
   }
   .logo-webstudio {
     opacity: 1;
-    transition: 0.5s;
+    transition: 0.4s;
     height: 28px;
     margin-top: -5px;
   }
diff --git a/src/showplanner/index.tsx b/src/showplanner/index.tsx
index 5b3c633..d066a87 100644
--- a/src/showplanner/index.tsx
+++ b/src/showplanner/index.tsx
@@ -335,7 +335,7 @@ export function LoadingDialogue({
   percent: number;
 }) {
   return (
-    <div className="loading">
+    <div className="loading-dialogue">
       <div className="logo-container" style={{ width: percent + "%" }}>
         <img
           className="logo mb-5"