diff --git a/frontend/resources/styles/common/refactor/basic-rules.scss b/frontend/resources/styles/common/refactor/basic-rules.scss
index 5b79ec81d..9e22e1869 100644
--- a/frontend/resources/styles/common/refactor/basic-rules.scss
+++ b/frontend/resources/styles/common/refactor/basic-rules.scss
@@ -600,6 +600,22 @@
   color: var(--modal-button-foreground-color-error);
 }
 
+.loader-base {
+  @include flexCenter;
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100vh;
+  width: 100vw;
+  z-index: $z-index-alert;
+  background-color: var(--loader-background);
+  :global(svg#loader-pencil) {
+    height: $s-100;
+    width: $s-100;
+    animation: loaderColor 5s infinite ease;
+    fill: var(--icon-foreground);
+  }
+}
 // UI ELEMENTS
 .asset-element {
   @include titleTipography;
diff --git a/frontend/src/app/main/ui/auth/verify_token.scss b/frontend/src/app/main/ui/auth/verify_token.scss
index b0002114f..df815d4f4 100644
--- a/frontend/src/app/main/ui/auth/verify_token.scss
+++ b/frontend/src/app/main/ui/auth/verify_token.scss
@@ -5,3 +5,7 @@
 // Copyright (c) KALEIDOS INC
 
 @use "./common.scss";
+
+.verify-token {
+  @extend .loader-base;
+}
diff --git a/frontend/src/app/main/ui/loader.cljs b/frontend/src/app/main/ui/loader.cljs
index 393de79d6..43a790181 100644
--- a/frontend/src/app/main/ui/loader.cljs
+++ b/frontend/src/app/main/ui/loader.cljs
@@ -5,6 +5,7 @@
 ;; Copyright (c) KALEIDOS INC
 
 (ns app.main.ui.loader
+  (:require-macros [app.main.style :as stl])
   (:require
    [app.main.store :as st]
    [app.main.ui.icons :as i]
@@ -15,4 +16,5 @@
 (mf/defc loader
   []
   (when (mf/deref st/loader)
-    [:div.loader-content i/loader-pencil]))
+    [:div {:class (stl/css :loader-content)}
+     i/loader-pencil]))
diff --git a/frontend/src/app/main/ui/loader.scss b/frontend/src/app/main/ui/loader.scss
new file mode 100644
index 000000000..71121f51d
--- /dev/null
+++ b/frontend/src/app/main/ui/loader.scss
@@ -0,0 +1,11 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+//
+// Copyright (c) KALEIDOS INC
+
+@import "refactor/common-refactor.scss";
+
+.loader-content {
+  @extend .loader-base;
+}
diff --git a/frontend/src/app/main/ui/viewer.cljs b/frontend/src/app/main/ui/viewer.cljs
index 68f19b9cf..651a7c806 100644
--- a/frontend/src/app/main/ui/viewer.cljs
+++ b/frontend/src/app/main/ui/viewer.cljs
@@ -607,6 +607,6 @@
     (let [props (obj/merge props #js {:data data :key (dm/str file-id)})]
       [:> viewer-content props])
 
-    [:div.loader-content.viewer-loader
+    [:div {:class (stl/css :loader-content)}
      i/loader-pencil]))
 
diff --git a/frontend/src/app/main/ui/viewer.scss b/frontend/src/app/main/ui/viewer.scss
index 897cf905a..351d4414d 100644
--- a/frontend/src/app/main/ui/viewer.scss
+++ b/frontend/src/app/main/ui/viewer.scss
@@ -175,8 +175,8 @@
   }
 }
 
-:global(svg#loader-pencil) {
-  fill: var(--icon-foreground);
+.loader-content {
+  @extend .loader-base;
 }
 
 /** FULLSCREEN */
diff --git a/frontend/src/app/main/ui/workspace.scss b/frontend/src/app/main/ui/workspace.scss
index 410c83186..a9e8a35a7 100644
--- a/frontend/src/app/main/ui/workspace.scss
+++ b/frontend/src/app/main/ui/workspace.scss
@@ -30,9 +30,7 @@
   grid-template-columns: auto 1fr auto;
 
   .workspace-loader {
-    display: flex;
-    justify-content: center;
-    align-items: center;
+    @include flexCenter;
     grid-area: viewport;
     background-color: var(--loader-background);
     :global(svg#loader-pencil) {