diff --git a/packages/pl-fe/src/components/landing-gradient.tsx b/packages/pl-fe/src/components/landing-gradient.tsx
deleted file mode 100644
index 7bf75dc11..000000000
--- a/packages/pl-fe/src/components/landing-gradient.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import React from 'react';
-
-/** Fullscreen gradient used as a backdrop to public pages. */
-const LandingGradient: React.FC = () => (
-  <div className='fixed h-screen w-full bg-gradient-to-tr from-primary-50 via-white to-gradient-end/10 black:hidden dark:from-primary-900/50 dark:via-primary-900 dark:to-primary-800/50' />
-);
-
-export { LandingGradient as default };
diff --git a/packages/pl-fe/src/components/loading-screen.tsx b/packages/pl-fe/src/components/loading-screen.tsx
index 6cabcd3c6..236181780 100644
--- a/packages/pl-fe/src/components/loading-screen.tsx
+++ b/packages/pl-fe/src/components/loading-screen.tsx
@@ -1,24 +1,16 @@
 import React from 'react';
 
-import LandingGradient from 'pl-fe/components/landing-gradient';
-import Spinner from 'pl-fe/components/ui/spinner';
-import { useSettings } from 'pl-fe/hooks/use-settings';
-
 /** Fullscreen loading indicator. */
-const LoadingScreen: React.FC = React.memo(() => {
-  const { theme } = useSettings();
-
+const LoadingScreen: React.FC = () => {
   return (
-    <div className='fixed h-screen w-screen'>
-      {(theme?.backgroundGradient ?? true)  && <LandingGradient />}
-
-      <div className='d-screen fixed z-10 flex w-screen items-center justify-center'>
-        <div className='p-4'>
-          <Spinner size={40} withText={false} />
+    <div className='loading-indicator-wrapper'>
+      <div className='loading-indicator'>
+        <div className='loading-indicator__container'>
+          <div className='loading-indicator__figure' />
         </div>
       </div>
     </div>
   );
-});
+};
 
 export { LoadingScreen as default };
diff --git a/packages/pl-fe/src/styles/loading.scss b/packages/pl-fe/src/styles/loading.scss
index 16d68a851..6b18e847e 100644
--- a/packages/pl-fe/src/styles/loading.scss
+++ b/packages/pl-fe/src/styles/loading.scss
@@ -3,7 +3,7 @@
 }
 
 .loading-indicator {
-  @apply text-gray-50 text-xs uppercase flex flex-col items-center justify-center overflow-visible;
+  @apply text-gray-50 dark:text-gray-800 text-xs uppercase flex flex-col items-center justify-center overflow-visible;
 }
 
 .loading-indicator__container {
@@ -11,10 +11,9 @@
 }
 
 .loading-indicator__figure {
-  @apply absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-12 h-12 rounded-full bg-transparent;
+  @apply absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-12 h-12 rounded-full bg-transparent dark:bg-transparent border-[#e5e7eb] dark:border-gray-800;
   border: 0 solid;
   border-width: 6px;
-  border-color: #e5e7eb;
 }
 
 .no-reduce-motion .loading-indicator__figure {
@@ -25,13 +24,13 @@
   @apply h-screen w-screen items-center;
 
   &__figure {
-    @apply border-gray-200;
+    @apply border-gray-200 dark:border-gray-800;
   }
 }
 
 @keyframes loader-figure {
   0% {
-    @apply bg-gray-200 w-0 h-0;
+    @apply bg-yellow-200 w-0 h-0;
   }
 
   29% {