diff --git a/src/components/app/app.hooks.tsx b/src/components/app/app.hooks.tsx
index 161fe28b..79121d88 100644
--- a/src/components/app/app.hooks.tsx
+++ b/src/components/app/app.hooks.tsx
@@ -32,7 +32,7 @@ import { AuthInternalContext } from './contexts/AuthInternalContext';
 import { AppAuthLayer } from './layers/AppAuthLayer';
 import { AppBusinessLayer } from './layers/AppBusinessLayer';
 import { AppSyncLayer } from './layers/AppSyncLayer';
-import { WorkspaceLoadingAnimation } from './WorkspaceLoadingAnimation';
+import LoadingDots from '@/components/_shared/LoadingDots';
 
 // Main AppContext interface - kept identical to maintain backward compatibility
 export interface AppContextType {
@@ -101,7 +101,11 @@ const ConditionalWorkspaceLayers = ({ children }: { children: React.ReactNode })
 
   // Show loading animation while workspace ID is being loaded
   if (!userWorkspaceInfo) {
-    return <WorkspaceLoadingAnimation />;
+    return (
+      <div className='fixed inset-0 flex items-center justify-center bg-background-primary'>
+        <LoadingDots className='flex items-center justify-center' />
+      </div>
+    );
   }
 
   return (
diff --git a/src/components/app/layers/AppAuthLayer.tsx b/src/components/app/layers/AppAuthLayer.tsx
index dd848c40..a92601e4 100644
--- a/src/components/app/layers/AppAuthLayer.tsx
+++ b/src/components/app/layers/AppAuthLayer.tsx
@@ -18,7 +18,7 @@ export const AppAuthLayer: React.FC<AppAuthLayerProps> = ({ children }) => {
   const service = useService();
   const navigate = useNavigate();
   const params = useParams();
-  
+
   const [userWorkspaceInfo, setUserWorkspaceInfo] = useState<UserWorkspaceInfo | undefined>(undefined);
 
   // Calculate current workspace ID from URL params or user info
diff --git a/src/components/login/LinearBuffer.tsx b/src/components/login/LinearBuffer.tsx
index 528daa74..75a6d892 100644
--- a/src/components/login/LinearBuffer.tsx
+++ b/src/components/login/LinearBuffer.tsx
@@ -1,8 +1,8 @@
-import * as React from 'react';
 import Box from '@mui/material/Box';
 import LinearProgress from '@mui/material/LinearProgress';
+import * as React from 'react';
 
-export default function LinearBuffer () {
+export default function LinearBuffer() {
   const [progress, setProgress] = React.useState(0);
   const [buffer, setBuffer] = React.useState(10);
 
diff --git a/src/components/login/LoginAuth.tsx b/src/components/login/LoginAuth.tsx
index b8af13ce..2ccebbfa 100644
--- a/src/components/login/LoginAuth.tsx
+++ b/src/components/login/LoginAuth.tsx
@@ -5,7 +5,7 @@ import { useContext, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import { ReactComponent as ErrorIcon } from '@/assets/icons/error.svg';
-import { WorkspaceLoadingAnimation } from '@/components/app/WorkspaceLoadingAnimation';
+import LoadingDots from '@/components/_shared/LoadingDots';
 
 function LoginAuth () {
   const service = useContext(AFConfigContext)?.service;
@@ -36,7 +36,7 @@ function LoginAuth () {
     <>
       {loading ? (
         <div className={'flex h-screen w-screen items-center justify-center p-20'}>
-          <WorkspaceLoadingAnimation />
+          <LoadingDots className='flex items-center justify-center' />
         </div>
       ) : null}
       <NormalModal