diff --git a/src/webapp/features/settings/components/settingLogoutItem/SettingLogoutItem.tsx b/src/webapp/features/settings/components/settingLogoutItem/SettingLogoutItem.tsx
index 1491e8ee..e2548682 100644
--- a/src/webapp/features/settings/components/settingLogoutItem/SettingLogoutItem.tsx
+++ b/src/webapp/features/settings/components/settingLogoutItem/SettingLogoutItem.tsx
@@ -4,9 +4,10 @@ import { useAuth } from '@/hooks/useAuth';
 import { Button } from '@mantine/core';
 import { useRouter } from 'next/navigation';
 import { IoMdLogOut } from 'react-icons/io';
+import SettingItemSkeleton from '../settingItem/Skeleton.SettingItem';
 
 export default function SettingLogoutItem() {
-  const { logout } = useAuth();
+  const { logout, isLoading } = useAuth();
   const router = useRouter();
 
   const handleLogout = async () => {
@@ -18,6 +19,8 @@ export default function SettingLogoutItem() {
     }
   };
 
+  if (isLoading) return <SettingItemSkeleton />;
+
   return (
     <Button
       variant="light"