diff --git a/src/oneid/oneid-ecs-core/src/main/webui/src/pages/login/Login.tsx b/src/oneid/oneid-ecs-core/src/main/webui/src/pages/login/Login.tsx
index 8f6caeb6..9a91f5ab 100644
--- a/src/oneid/oneid-ecs-core/src/main/webui/src/pages/login/Login.tsx
+++ b/src/oneid/oneid-ecs-core/src/main/webui/src/pages/login/Login.tsx
@@ -23,6 +23,7 @@ import type { IdentityProvider, IdentityProviders } from '../../utils/IDPS';
 import { ImageWithFallback } from '../../components/ImageFallback';
 import SpidSelect from './SpidSelect';
 import SpidModal from './SpidModal';
+import LoadingButton from '@mui/lab/LoadingButton';
 
 type BannerContent = {
   enable: boolean;
@@ -325,17 +326,20 @@ const Login = () => {
             idpList={idpList}
           />
           <Grid item sx={{ width: '100%' }}>
-            <Button
+            <LoadingButton
+              aria-busy={!!idpList}
+              disableElevation
               id="spidButton"
+              loading={!!idpList}
+              loadingPosition="end"
+              onClick={() => setOpenSpidModal(true)}
+              startIcon={<SpidIconWrapper />}
               sx={{
                 borderRadius: '4px',
                 width: '100%',
                 marginBottom: '5px',
               }}
-              onClick={() => setOpenSpidModal(true)}
               variant="contained"
-              disableElevation
-              startIcon={<SpidIconWrapper />}
             >
               <Typography
                 sx={{
@@ -346,7 +350,7 @@ const Login = () => {
               >
                 {t('loginPage.loginBox.spidLogin')}
               </Typography>
-            </Button>
+            </LoadingButton>
           </Grid>
           <Grid item sx={{ width: '100%' }}>
             <Button