diff --git a/frontend/client-portal/src/pages/EmployeeData/UserProfile.tsx b/frontend/client-portal/src/pages/EmployeeData/UserProfile.tsx
index 1741e268..deb6a215 100644
--- a/frontend/client-portal/src/pages/EmployeeData/UserProfile.tsx
+++ b/frontend/client-portal/src/pages/EmployeeData/UserProfile.tsx
@@ -25,6 +25,7 @@ export default function UserProfile() {
   const { themeStretch } = useSettings();
   const navigate = useNavigate();
   const [data, setData] = useState<UserProfileDataType>();
+  const [loading, setLoading] = useState(true);
 
   const { corporateValue } = useContext(UserCurrentCorporateContext);
   const { id } = useParams();
@@ -35,8 +36,8 @@ export default function UserProfile() {
         .get(corporateValue + '/members/' + id)
         .then((response) => {
           setTimeout(() => {
-            console.log(response.data);
             setData(response.data);
+            setLoading(false);
           }, 1000);
         })
         .catch((error) => {
@@ -64,7 +65,7 @@ export default function UserProfile() {
             <CardPersonalInformation data={data?.person} />
           </Grid>
           <Grid item xs={12} md={12}>
-            <CardFamilyInformation data={data?.families} />
+            <CardFamilyInformation data={data?.families} loading={loading} />
           </Grid>
         </Grid>
       </Container>
diff --git a/frontend/client-portal/src/sections/employee-data/user-profile/CardFamilyInformation.tsx b/frontend/client-portal/src/sections/employee-data/user-profile/CardFamilyInformation.tsx
index 35902c4e..f8090586 100644
--- a/frontend/client-portal/src/sections/employee-data/user-profile/CardFamilyInformation.tsx
+++ b/frontend/client-portal/src/sections/employee-data/user-profile/CardFamilyInformation.tsx
@@ -1,6 +1,7 @@
 /* ------------------------------- material ui ------------------------------ */
 import { Card, Typography, Grid, Skeleton, Stack } from '@mui/material';
 import { fDateBirth } from '../../../utils/formatTime';
+import { Fragment } from 'react';
 
 type CardFamilyInformationProps = {
   data?: {
@@ -11,88 +12,20 @@ type CardFamilyInformationProps = {
     phoneNumber: string;
     status: string;
   }[];
+  loading: boolean;
 };
 
-export default function CardFamilyInformation({ data }: CardFamilyInformationProps) {
-  console.log(data);
-
-  return (
-    <Card sx={{ borderRadius: 2, padding: 3 }}>
-      <Grid container gap={5}>
-        <Grid item xs={12}>
-          <Typography component={'h6'} fontWeight={700}>
-            {data ? 'Beneficiary / Family' : <Skeleton animation={'wave'} width={200} />}
-          </Typography>
-        </Grid>
-        <Grid item container xs={12} spacing={3}>
-          {data && data.length > 0 ? (
-            data.map((familyMember, index) => (
-              <Grid item xs={12} md={6} key={index}>
-                <Card sx={{ borderRadius: 1.5, paddingX: 3, paddingY: 3.5 }}>
-                  <Grid container>
-                    <Grid item xs={12}>
-                      <Stack gap={0.5}>
-                        <Typography variant="subtitle1" color={'grey.800'}>
-                          {familyMember.name ? familyMember.name : '-'}
-                        </Typography>
-                        <Typography variant="subtitle2" color={'grey.600'}>
-                          {familyMember.relationship ? familyMember.relationship : '-'}
-                        </Typography>
-                      </Stack>
-                    </Grid>
-                    <Grid container xs={12} marginTop={3}>
-                      <Grid item xs={12} md={4}>
-                        <Typography variant="body2" color={'grey.600'}>
-                          Date Of Birth
-                        </Typography>
-                      </Grid>
-                      <Grid item xs={12} md={8}>
-                        <Typography variant="body2" color={'grey.800'}>
-                          {familyMember.dateOfBirth ? fDateBirth(familyMember.dateOfBirth) : '-'}
-                        </Typography>
-                      </Grid>
-                    </Grid>
-                    <Grid container xs={12}>
-                      <Grid item xs={12} md={4}>
-                        <Typography variant="body2" color={'grey.600'}>
-                          Email
-                        </Typography>
-                      </Grid>
-                      <Grid item xs={12} md={8}>
-                        <Typography variant="body2" color={'grey.800'}>
-                          {familyMember.email ? familyMember.email : '-'}
-                        </Typography>
-                      </Grid>
-                    </Grid>
-                    <Grid container xs={12}>
-                      <Grid item xs={12} md={4}>
-                        <Typography variant="body2" color={'grey.600'}>
-                          Phone Number
-                        </Typography>
-                      </Grid>
-                      <Grid item xs={12} md={8}>
-                        <Typography variant="body2" color={'grey.800'}>
-                          {familyMember.phoneNumber ? familyMember.phoneNumber : '-'}
-                        </Typography>
-                      </Grid>
-                    </Grid>
-                    <Grid container xs={12}>
-                      <Grid item xs={12} md={4}>
-                        <Typography variant="body2" color={'grey.600'}>
-                          Status
-                        </Typography>
-                      </Grid>
-                      <Grid item xs={12} md={8}>
-                        <Typography variant="body2" color={'grey.800'}>
-                          {familyMember.status ? familyMember.status : '-'}
-                        </Typography>
-                      </Grid>
-                    </Grid>
-                  </Grid>
-                </Card>
-              </Grid>
-            ))
-          ) : (
+export default function CardFamilyInformation({ data, loading }: CardFamilyInformationProps) {
+  if (loading) {
+    return (
+      <Card sx={{ borderRadius: 2, padding: 3 }}>
+        <Grid container gap={5}>
+          <Grid item xs={12}>
+            <Typography component={'h6'} fontWeight={700}>
+              <Skeleton animation={'wave'} width={200} />
+            </Typography>
+          </Grid>
+          <Grid item container xs={12} spacing={3}>
             <Grid item xs={12} md={6}>
               <Card sx={{ borderRadius: 1.5, paddingX: 3, paddingY: 3.5 }}>
                 <Grid container>
@@ -157,9 +90,91 @@ export default function CardFamilyInformation({ data }: CardFamilyInformationPro
                 </Grid>
               </Card>
             </Grid>
-          )}
+          </Grid>
         </Grid>
-      </Grid>
-    </Card>
-  );
+      </Card>
+    );
+  } else {
+    return data && data.length > 0 ? (
+      <Card sx={{ borderRadius: 2, padding: 3 }}>
+        <Grid container gap={5}>
+          <Grid item xs={12}>
+            <Typography component={'h6'} fontWeight={700}>
+              Beneficiary / Family
+            </Typography>
+          </Grid>
+          <Grid item container xs={12} spacing={3}>
+            {data.map((familyMember, index) => (
+              <Grid item xs={12} md={6} key={index}>
+                <Card sx={{ borderRadius: 1.5, paddingX: 3, paddingY: 3.5 }}>
+                  <Grid container>
+                    <Grid item xs={12}>
+                      <Stack gap={0.5}>
+                        <Typography variant="subtitle1" color={'grey.800'}>
+                          {familyMember.name ? familyMember.name : '-'}
+                        </Typography>
+                        <Typography variant="subtitle2" color={'grey.600'}>
+                          {familyMember.relationship ? familyMember.relationship : '-'}
+                        </Typography>
+                      </Stack>
+                    </Grid>
+                    <Grid container xs={12} marginTop={3}>
+                      <Grid item xs={12} md={4}>
+                        <Typography variant="body2" color={'grey.600'}>
+                          Date Of Birth
+                        </Typography>
+                      </Grid>
+                      <Grid item xs={12} md={8}>
+                        <Typography variant="body2" color={'grey.800'}>
+                          {familyMember.dateOfBirth ? fDateBirth(familyMember.dateOfBirth) : '-'}
+                        </Typography>
+                      </Grid>
+                    </Grid>
+                    <Grid container xs={12}>
+                      <Grid item xs={12} md={4}>
+                        <Typography variant="body2" color={'grey.600'}>
+                          Email
+                        </Typography>
+                      </Grid>
+                      <Grid item xs={12} md={8}>
+                        <Typography variant="body2" color={'grey.800'}>
+                          {familyMember.email ? familyMember.email : '-'}
+                        </Typography>
+                      </Grid>
+                    </Grid>
+                    <Grid container xs={12}>
+                      <Grid item xs={12} md={4}>
+                        <Typography variant="body2" color={'grey.600'}>
+                          Phone Number
+                        </Typography>
+                      </Grid>
+                      <Grid item xs={12} md={8}>
+                        <Typography variant="body2" color={'grey.800'}>
+                          {familyMember.phoneNumber ? familyMember.phoneNumber : '-'}
+                        </Typography>
+                      </Grid>
+                    </Grid>
+                    <Grid container xs={12}>
+                      <Grid item xs={12} md={4}>
+                        <Typography variant="body2" color={'grey.600'}>
+                          Status
+                        </Typography>
+                      </Grid>
+                      <Grid item xs={12} md={8}>
+                        <Typography variant="body2" color={'grey.800'}>
+                          {familyMember.status ? familyMember.status : '-'}
+                        </Typography>
+                      </Grid>
+                    </Grid>
+                  </Grid>
+                </Card>
+              </Grid>
+            ))}
+          </Grid>
+        </Grid>
+      </Card>
+    ) : (
+      <Fragment />
+    );
+  }
 }