diff --git a/frontend/src/components/application-loader/application-loader.module.scss b/frontend/src/components/application-loader/application-loader.module.scss
index b9466ec1e..bdfa0d0cf 100644
--- a/frontend/src/components/application-loader/application-loader.module.scss
+++ b/frontend/src/components/application-loader/application-loader.module.scss
@@ -5,13 +5,11 @@
  */
 
 .loader {
-  height: 100%;
+  height: 100vh;
   width: 100%;
 
-  &.middle, .middle {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-direction: column;
-  }
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
 }
diff --git a/frontend/src/components/application-loader/loading-screen/loading-screen.tsx b/frontend/src/components/application-loader/loading-screen/loading-screen.tsx
index b6822ce72..732129230 100644
--- a/frontend/src/components/application-loader/loading-screen/loading-screen.tsx
+++ b/frontend/src/components/application-loader/loading-screen/loading-screen.tsx
@@ -21,7 +21,7 @@ export interface LoadingScreenProps {
  */
 export const LoadingScreen: React.FC<LoadingScreenProps> = ({ errorMessage }) => {
   return (
-    <div className={`${styles.loader} ${styles.middle} text-light overflow-hidden`}>
+    <div className={`${styles.loader} text-light`}>
       <div className='mb-3 text-light'>
         <span className={`d-block`}>
           <LoadingAnimation error={!!errorMessage} />