diff --git a/Modules/Client/Http/Controllers/Api/CorporateMemberController.php b/Modules/Client/Http/Controllers/Api/CorporateMemberController.php
index 7ad19794..4180139e 100644
--- a/Modules/Client/Http/Controllers/Api/CorporateMemberController.php
+++ b/Modules/Client/Http/Controllers/Api/CorporateMemberController.php
@@ -13,6 +13,7 @@ use Modules\Client\Transformers\Dashboard\MemberResources as ClaimSubmitMemberRe
 use Modules\Client\Transformers\Dashboard\MemberResources as DashboardMemberResources;
 use Modules\Client\Transformers\Dashboard\MemberAlarmCenterResources as DashboardMemberAlarmResources;
 use Modules\Client\Transformers\DataMemberResource;
+use Illuminate\Support\Facades\DB;
 
 class CorporateMemberController extends Controller
 {
@@ -47,7 +48,7 @@ class CorporateMemberController extends Controller
 
     public function show($corporate_id, $person_id)
     {
-        $data = Member::with(['claims', 'person', 'employeds', 'currentPlan.benefits'])
+        $data = Member::with(['claims', 'person', 'employeds', 'currentPlan.benefits', 'person.currentAddress'])
             ->where('person_id', $person_id)
             ->whereHas('employeds', function ($query) use ($corporate_id) {
                 $query->where('corporate_id', $corporate_id);
@@ -57,6 +58,40 @@ class CorporateMemberController extends Controller
         $totalClaims = $data->claims->sum('total_claim');
         $data->total_claims = $totalClaims;
 
+        //Get Family
+
+        $data_family = DB::table('members')
+        ->join('persons', 'members.person_id', '=', 'persons.id')
+        ->select('members.*','persons.phone')
+        ->where('principal_id', $data->member_id)
+        ->get();
+        if($data_family->isEmpty())
+        {
+           $principal_id = DB::table('members')
+            ->where('member_id', $data->member_id)
+            ->select('principal_id')
+            ->first();
+            $data_family = DB::table('members')
+            ->join('persons', 'members.person_id', '=', 'persons.id')
+            ->select('members.*','persons.phone')
+            ->where('principal_id', $principal_id->principal_id)
+            ->where('members.member_id','<>',$data->member_id)
+            ->orWhere('members.member_id', $principal_id->principal_id)
+            ->get(); 
+        }
+        
+        $data->family = $data_family;
+
+        //Claim History
+        $data_claim_history = DB::table('claim_requests')
+        ->join('claims', 'claims.claim_request_id', '=', 'claim_requests.id')
+        ->join('claim_items', 'claim_items.claim_id', '=', 'claims.id')
+        ->join('benefits', 'benefits.id', '=', 'claim_items.claim_itemable_id')
+        ->select('claim_requests.status','claim_requests.submission_date','benefits.description')
+        ->where('claim_requests.member_id', $data->id)
+        ->get();
+        $data->claim_history = $data_claim_history;
+
         return response()->json(DataMemberResource::make($data));
     }
 }
diff --git a/Modules/Client/Http/Controllers/Api/DataController.php b/Modules/Client/Http/Controllers/Api/DataController.php
index 6999959f..f824b1e2 100644
--- a/Modules/Client/Http/Controllers/Api/DataController.php
+++ b/Modules/Client/Http/Controllers/Api/DataController.php
@@ -3,6 +3,7 @@
 namespace Modules\Client\Http\Controllers\Api;
 
 use App\Models\Person;
+use App\Models\Member;
 use Illuminate\Http\Request;
 use Illuminate\Routing\Controller;
 
@@ -29,4 +30,36 @@ class DataController extends Controller
             return response()->json(['error' => 'Failed to update data'], 500);
         }
     }
+
+    public function updateFamily(Request $request)
+    {
+        try {
+            // Ambil data keluarga dari payload
+            $familyData = $request->json()->all();
+
+            // Loop melalui data keluarga
+            foreach ($familyData as $familyMember) {
+                // Ambil ID anggota keluarga dari payload
+                $person_id = $familyMember['person_id'];
+
+                // Perbarui data anggota keluarga sesuai dengan payload
+                Member::where('person_id', $person_id)->update([
+                    'name' => $familyMember['name'],
+                    'email' => $familyMember['email'],
+                ]);
+
+                Person::where('id', $person_id)->update([
+                    'name' => $familyMember['name'],
+                    'email' => $familyMember['email'],
+                    'phone' => $familyMember['phone'],
+                ]);
+            }
+
+            // Respon sukses jika pembaruan berhasil
+            return response()->json([$person_id => 'Data keluarga berhasil diperbarui'], 200);
+        } catch (\Exception $e) {
+            // Tangani kesalahan jika ada yang terjadi
+            return response()->json(['error' => 'Gagal memperbarui data keluarga: ' . $e->getMessage()], 500);
+        }
+    }
 }
diff --git a/Modules/Client/Routes/api.php b/Modules/Client/Routes/api.php
index 886ccf21..d0dfe1aa 100644
--- a/Modules/Client/Routes/api.php
+++ b/Modules/Client/Routes/api.php
@@ -38,6 +38,7 @@ Route::prefix('client')->group(function () {
         Route::get('user', [UserController::class, 'index']);
         Route::get('data/{id}', [DataController::class, 'show']);
         Route::put('data/{id}', [DataController::class, 'update']);
+        Route::post('update-family', [DataController::class, 'updateFamily']);
 
         Route::get('corporate-manage', [CorporateManageController::class, 'index']);
         Route::get('corporate-manage/{corporate_id}', [CorporateManageController::class, 'show']);
diff --git a/Modules/Client/Transformers/DataMemberResource.php b/Modules/Client/Transformers/DataMemberResource.php
index f9ece3c6..9f13d32b 100644
--- a/Modules/Client/Transformers/DataMemberResource.php
+++ b/Modules/Client/Transformers/DataMemberResource.php
@@ -25,10 +25,21 @@ class DataMemberResource extends JsonResource
             'name' => $this->name,
             'name_suffix' => $this->name_suffix,
             'birth_date' => $this->birth_date,
+            'birth_place' => $this->person->birth_place,
+            'last_weight_kg' => $this->person->last_weight_kg,
+            'last_height_cm'=> $this->person->last_height_cm,
+            'phone' => $this->person->phone,
+            'nik' => $this->person->nik,
+            'religion' => $this->person->religion,
+            'marital_status' => $this->person->marital_status,
+            'last_education' => $this->person->last_education,
+            'current_employment' => $this->person->current_employment,
+            'main_address_id' => $this->person->currentAddress->text,
+            'family' => $this->family,
+            'claim_history' => $this->claim_history,
             'gender' => $this->gender,
             'language' => $this->language,
             'race' => $this->race,
-            'marital_status' => $this->marital_status,
             'record_type' => $this->record_type,
             'principal_id' => $this->principal_id,
             'relation_with_principal' => $this->relation_with_principal,
diff --git a/app/Models/Person.php b/app/Models/Person.php
index 85315bcd..f3a6c944 100644
--- a/app/Models/Person.php
+++ b/app/Models/Person.php
@@ -71,7 +71,9 @@ class Person extends Model
 
     public function currentAddress()
     {
-        return $this->belongsTo(Address::class, 'main_address_id');
+        return $this->belongsTo(Address::class, 'main_address_id')->withDefault([
+            'text' => '',
+        ]);
     }
 
     public function domicileAddress()
diff --git a/frontend/client-portal/src/layouts/dashboard/header/CorporatePopover.tsx b/frontend/client-portal/src/layouts/dashboard/header/CorporatePopover.tsx
index 331af30f..c7b27186 100644
--- a/frontend/client-portal/src/layouts/dashboard/header/CorporatePopover.tsx
+++ b/frontend/client-portal/src/layouts/dashboard/header/CorporatePopover.tsx
@@ -2,6 +2,7 @@ import { FormControl, InputLabel, MenuItem, Select, SelectChangeEvent } from '@m
 import { useContext, useEffect, useState } from 'react';
 import { UserCurrentCorporateContext } from '../../../contexts/UserCurrentCorporate';
 import axios from '../../../utils/axios';
+import { useNavigate } from 'react-router-dom';
 
 /* ---------------------------------- types --------------------------------- */
 type CorporateDataProps = {
@@ -13,9 +14,17 @@ type CorporateDataProps = {
 export default function CorporatePopover() {
   const { corporateValue, setCorporateValue } = useContext(UserCurrentCorporateContext);
   const [corporateData, setCorporateData] = useState([]);
+  //Check route in profile
+  const navigate = useNavigate();
+  const currentPathname = window.location.pathname;
+  const desiredPart = currentPathname.split('/')[1];
 
   const handleCorporateChange = (event: SelectChangeEvent) => {
     setCorporateValue(event.target.value as string);
+    if(desiredPart === 'user-profile')
+    {
+      navigate('/alarm-center');
+    }
   };
 
   useEffect(() => {
diff --git a/frontend/client-portal/src/layouts/dashboard/navbar/NavbarAccount.tsx b/frontend/client-portal/src/layouts/dashboard/navbar/NavbarAccount.tsx
index 91671ffa..4d19c36e 100644
--- a/frontend/client-portal/src/layouts/dashboard/navbar/NavbarAccount.tsx
+++ b/frontend/client-portal/src/layouts/dashboard/navbar/NavbarAccount.tsx
@@ -26,7 +26,7 @@ export default function NavbarAccount({ isCollapse }: Props) {
   
   const { user } = useAuth();
 
-  console.log('current user is ', user)
+//  console.log('current user is ', user)
   return (
     <Link underline="none" color="inherit">
       <RootStyle
diff --git a/frontend/client-portal/src/pages/AlarmCenter/ServiceMonitoring.tsx b/frontend/client-portal/src/pages/AlarmCenter/ServiceMonitoring.tsx
index 1721a088..5fd6e12c 100644
--- a/frontend/client-portal/src/pages/AlarmCenter/ServiceMonitoring.tsx
+++ b/frontend/client-portal/src/pages/AlarmCenter/ServiceMonitoring.tsx
@@ -121,14 +121,14 @@ export default function ServiceMonitoring() {
   const { corporateValue } = useContext(UserCurrentCorporateContext);
   const { id } = useParams();
   const claimId = '2';
-  console.log('id', id);
+//  console.log('id', id);
 
   useEffect(() => {
     console.log('fetching data...');
     axios
       .get('/data/' + id)
       .then((response) => {
-        console.log('data fetched...', response.data);
+//        console.log('data fetched...', response.data);
         setData(response.data);
       })
       .catch((error) => {
@@ -138,7 +138,7 @@ export default function ServiceMonitoring() {
     axios
       .get('/corporate-manage/' + corporateValue)
       .then((response) => {
-        console.log('corporate fetched...', response.data);
+//        console.log('corporate fetched...', response.data);
         setCorporate(response.data);
       })
       .catch((error) => {
@@ -146,15 +146,15 @@ export default function ServiceMonitoring() {
       });
   }, []);
 
-  console.log('Data:', data);
+//  console.log('Data:', data);
   const [encounterData, setEncounterData] = useState({});
 
   useEffect(() => {
-    console.log('fetching encounter data...');
+//    console.log('fetching encounter data...');
     axios
       .get('/claims/${claim_id}/encounters')
       .then((response) => {
-        console.log('encounter data fetched...', response.data);
+//        console.log('encounter data fetched...', response.data);
         setEncounterData(response.data);
       })
       .catch((error) => {
diff --git a/frontend/client-portal/src/pages/AlarmCenter/UserProfile.tsx b/frontend/client-portal/src/pages/AlarmCenter/UserProfile.tsx
index 7265980a..0c7a740b 100644
--- a/frontend/client-portal/src/pages/AlarmCenter/UserProfile.tsx
+++ b/frontend/client-portal/src/pages/AlarmCenter/UserProfile.tsx
@@ -24,7 +24,6 @@ export default function UserProfile() {
   const { themeStretch } = useSettings();
   // const navigate = useNavigate();
   const [data, setData] = useState();
-  const [data1, setData1] = useState();
 
   const { corporateValue } = useContext(UserCurrentCorporateContext);
   const { id } = useParams();
@@ -40,10 +39,10 @@ export default function UserProfile() {
       });
   }, []);
 
-  console.log('data', data);
+//  console.log('data', data);
 
   return (
-    <Page title="Profile Peserta Jessica Lie">
+    <Page title="Profile">
       <Container maxWidth={themeStretch ? false : 'xl'}>
         <Stack direction="row" alignItems="center" sx={{ marginBottom: 2 }}>
           {/* <IconButton sx={{ marginRight: '10px', color: '#424242' }} onClick={() => navigate()}>
@@ -62,7 +61,7 @@ export default function UserProfile() {
               </Grid>
               {/* Item 2 */}
               <Grid item xs={12} md={12}>
-                <CardFamilyInformation data={data1} />
+                <CardFamilyInformation data={data} />
               </Grid>
             </Grid>
           </Grid>
@@ -75,7 +74,7 @@ export default function UserProfile() {
               </Grid>
               {/* Item 2 */}
               <Grid item xs={12}>
-                <CardClaimHistory />
+                <CardClaimHistory data={data}/>
               </Grid>
             </Grid>
           </Grid>
diff --git a/frontend/client-portal/src/pages/Claims/Form.tsx b/frontend/client-portal/src/pages/Claims/Form.tsx
index a4898695..e17b17e4 100644
--- a/frontend/client-portal/src/pages/Claims/Form.tsx
+++ b/frontend/client-portal/src/pages/Claims/Form.tsx
@@ -85,7 +85,7 @@ export default function ClaimForm({ isEdit, currentClaim }: Props) {
 
   
   useEffect(() => {
-    console.log('defaultValues', defaultValues);
+//    console.log('defaultValues', defaultValues);
     if (isEdit && currentClaim) {
       reset(defaultValues);
       setMember(defaultValues.member)
@@ -102,7 +102,7 @@ export default function ClaimForm({ isEdit, currentClaim }: Props) {
 
     setValue(`uploaded_files.${type}`, [...currentFiles, ...files]);
 
-    console.log('currentFiles', getValues('uploaded_files'));
+//    console.log('currentFiles', getValues('uploaded_files'));
   };
 
   const memberSelected = (member) => {
@@ -110,7 +110,7 @@ export default function ClaimForm({ isEdit, currentClaim }: Props) {
   };
 
   const checkLimit = async () => {
-    console.log('CHECKING LIMIT');
+//    console.log('CHECKING LIMIT');
   };
 
   const onSubmit = async (data: any) => {
diff --git a/frontend/client-portal/src/pages/Claims/Show.tsx b/frontend/client-portal/src/pages/Claims/Show.tsx
index 9d856bd2..3b56af1b 100644
--- a/frontend/client-portal/src/pages/Claims/Show.tsx
+++ b/frontend/client-portal/src/pages/Claims/Show.tsx
@@ -68,7 +68,7 @@ export default function ClaimsCreateUpdate() {
   };
 
   const handleSaveClaimItems = () => {
-    console.log('Storing ', claimItems);
+//    console.log('Storing ', claimItems);
     setLoadingClaimItems(true);
     axios
       .post(`claims/${id}/update-items`, {
diff --git a/frontend/client-portal/src/pages/Claims/components/DialogMemberBenefit.tsx b/frontend/client-portal/src/pages/Claims/components/DialogMemberBenefit.tsx
index 757b3448..20faddc4 100644
--- a/frontend/client-portal/src/pages/Claims/components/DialogMemberBenefit.tsx
+++ b/frontend/client-portal/src/pages/Claims/components/DialogMemberBenefit.tsx
@@ -12,17 +12,17 @@ export default function DialogMemberBenefit({member, setOpenDialog, openDialog,
 
     const toggleBenefit = (benefit) => {
         if (selectedBenefits.includes(benefit)) {
-            console.log('removing', benefit)
+//            console.log('removing', benefit)
             setSelectedBenefits(selectedBenefits.filter((throughBenefit) => benefit.id != throughBenefit.id))
         } else {
-            console.log('adding', benefit)
+//            console.log('adding', benefit)
             setSelectedBenefits([...selectedBenefits, benefit])
         }
     }
 
     const handleSubmit = () => {
         onSubmit(selectedBenefits);
-        console.log ('submitting')
+//        console.log ('submitting')
         setOpenDialog(false);
         setSelectedBenefits([]);
     }
diff --git a/frontend/client-portal/src/pages/Dashboard/Index.tsx b/frontend/client-portal/src/pages/Dashboard/Index.tsx
index 913931a0..274cbdec 100644
--- a/frontend/client-portal/src/pages/Dashboard/Index.tsx
+++ b/frontend/client-portal/src/pages/Dashboard/Index.tsx
@@ -278,7 +278,7 @@ export default function Index() {
         params: { ...parameters },
       });
 
-      console.log('member', corporateMembers);
+//      console.log('member', corporateMembers);
       const corporateTopUpLimit = await axios.get(`${corporateValue}/topup`);
 
       setSearchParams(parameters);
@@ -356,7 +356,7 @@ export default function Index() {
     })();
   }, [appliedParams, searchParams, order, orderBy, setSearchParams, corporateValue]);
 
-  console.log(policyData);
+//  console.log(policyData);
 
   return (
     <Page title="Dashboard">
diff --git a/frontend/client-portal/src/sections/alarm-center/user-profile/CardBenefitSummary.tsx b/frontend/client-portal/src/sections/alarm-center/user-profile/CardBenefitSummary.tsx
index 31545408..51d1781d 100644
--- a/frontend/client-portal/src/sections/alarm-center/user-profile/CardBenefitSummary.tsx
+++ b/frontend/client-portal/src/sections/alarm-center/user-profile/CardBenefitSummary.tsx
@@ -29,7 +29,7 @@ const BorderLinearProgress = styled(LinearProgress)(({ theme }) => ({
 
 export default function CardBenefitSummary({ data }) {
   const [benefits, setBenefits] = useState([]);
-  console.log('data', data);
+//  console.log('data', data);
   useEffect(() => {
     setBenefits(data);
   }, [data]);
@@ -58,7 +58,7 @@ export default function CardBenefitSummary({ data }) {
                   <Typography variant="body2" color="#0A0A0A">
                     Yearly Limits
                   </Typography>
-                  <BorderLinearProgress variant="determinate" value={100} />
+                  <BorderLinearProgress variant="determinate" value={0} />
                   <Stack direction="row" spacing={0.25}>
                     <Typography variant="body2">0</Typography>
                     <Typography>/</Typography>
diff --git a/frontend/client-portal/src/sections/alarm-center/user-profile/CardClaimHistory.tsx b/frontend/client-portal/src/sections/alarm-center/user-profile/CardClaimHistory.tsx
index 372fe314..2e4ba592 100644
--- a/frontend/client-portal/src/sections/alarm-center/user-profile/CardClaimHistory.tsx
+++ b/frontend/client-portal/src/sections/alarm-center/user-profile/CardClaimHistory.tsx
@@ -13,6 +13,7 @@ import {
 } from '@mui/material';
 // react
 import { useState } from 'react';
+import { fDate } from '../../../utils/formatTime';
 
 // ----------------------------------------------------------------------
 
@@ -20,27 +21,22 @@ function createData(benefitType: string, submissionDate: string, status: string)
   return { benefitType, submissionDate, status };
 }
 
-const rows = [
-  createData('Rawat Jalan', '15-10-2022', 'Request'),
-  createData('Rawat Inap', '15-10-2022', 'Request'),
-  createData('Manfaat Special', '15-10-2022', 'Request'),
-  createData('Perobatan Mata', '15-10-2022', 'Request'),
-  createData('Perawatan Gigi', '15-10-2022', 'Request'),
-  createData('Kehamilan', '15-10-2022', 'Request'),
-  createData('Laboratorium', '15-10-2022', 'Request'),
-  createData('Manfaat Farmasi', '15-10-2022', 'Request'),
-];
-
 // ----------------------------------------------------------------------
 
-export default function CardClaimHistory(benefitMember) {
+export default function CardClaimHistory({ data }) {
   const [page, setPage] = useState(0);
   const [rowsPerPage, setRowsPerPage] = useState(5);
-  console.log('benefitMember', benefitMember);
   const handleChangePage = (event: React.MouseEvent<HTMLButtonElement> | null, newPage: number) => {
     setPage(newPage);
   };
 
+  // Data claim history
+  const claimHistory = data?.claim_history;
+  const rows = claimHistory ? claimHistory.map(history => {
+      return createData(history.description, fDate(history.submission_date), history.status);
+  }) : [];
+  
+
   return (
     <Card sx={{ padding: 2 }}>
       <Stack direction="row" justifyContent="space-between" alignItems="center">
diff --git a/frontend/client-portal/src/sections/alarm-center/user-profile/CardFamilyInformation.tsx b/frontend/client-portal/src/sections/alarm-center/user-profile/CardFamilyInformation.tsx
index 9a0422fe..adbf4a10 100644
--- a/frontend/client-portal/src/sections/alarm-center/user-profile/CardFamilyInformation.tsx
+++ b/frontend/client-portal/src/sections/alarm-center/user-profile/CardFamilyInformation.tsx
@@ -1,9 +1,61 @@
 // mui
-import { Button, Card, Stack, Typography, Grid, Switch } from '@mui/material';
+import { Button, Card, Stack, Typography, Grid, Switch, TextField } from '@mui/material';
 // components
 import Iconify from '../../../components/Iconify';
+import { fDate } from '../../../utils/formatTime';
+import { Dialog, DialogTitle, DialogContent, DialogActions } from '@mui/material';
+import { useContext, useEffect, useState } from 'react';
+import { useParams } from 'react-router-dom';
+import axios from '../../../utils/axios';
+import { enqueueSnackbar } from 'notistack';
 
-export default function CardFamilyInformation() {
+export default function CardFamilyInformation({ data }) {
+
+  const [openDialog, setOpenDialog] = useState(false);
+  const [editIndex, setEditIndex] = useState(null);
+  const [editedFamilyData, setEditedFamilyData] = useState({});
+  const { id } = useParams();
+
+  const handleEditData = (index) => {
+    setEditIndex(index);
+    setEditedFamilyData(data?.family[index] || {});
+    setOpenDialog(true);
+  };
+
+  const handleCloseDialog = () => {
+     setOpenDialog(false);
+  };
+
+  const handleSaveData = () => {
+    if (editIndex !== null) {
+      try {
+
+        // Salin data keluarga saat ini
+        const updatedFamily = [...data?.family];
+
+        // Perbarui data keluarga dengan data yang diedit
+        updatedFamily[editIndex] = editedFamilyData;
+
+        // Perbarui data utama dengan data keluarga yang telah diperbarui
+        const updatedData = { ...data, family: updatedFamily };
+
+        axios
+        .post('/update-family', updatedData.family)
+        .then((response) => {
+          enqueueSnackbar('Data updated successfully', { variant: 'success' });
+          setOpenDialog(false);
+          window.location.reload();
+        })
+        .catch((error) => {
+          enqueueSnackbar('Failed to update data', { variant: 'error' });
+        });
+
+      } catch (error) {
+        console.error('Terjadi kesalahan saat menyimpan data:', error);
+      }
+    }
+  };
+  
   return (
     <Card sx={{ borderRadius: '6px', paddingY: 2 }}>
       {/* Stack 1 */}
@@ -14,12 +66,12 @@ export default function CardFamilyInformation() {
         sx={{ paddingY: 1, paddingX: 3 }}
       >
         <Typography variant="subtitle2">Beneficiary / Family</Typography>
-        <Button startIcon={<Iconify icon="ic:round-add" />}>Add Member</Button>
+        <Button startIcon={<Iconify icon="ic:round-add" />} disabled>Add Member</Button>
       </Stack>
       {/* Stack 2 */}
       <Grid container maxHeight="307px" spacing={2} paddingX={2} sx={{ overflowY: 'auto' }}>
-        {/* Card 1 */}
-        <Grid item xs={12} sm={6} md={6}>
+      {data?.family.map((familyMember, index) => (
+        <Grid item xs={12} sm={6} md={6} key={index}>
           <Card sx={{ paddingX: 1.5, paddingY: 1 }}>
             {/* Stack 1 */}
             <Stack
@@ -39,23 +91,31 @@ export default function CardFamilyInformation() {
                   style={{ borderRadius: '50%' }}
                 />
                 <Typography variant="body2" sx={{ fontWeight: 500 }}>
-                  Husband
+                  {familyMember.relation_with_principal === 'H'
+                    ? 'Husband'
+                    : familyMember.relation_with_principal === 'W'
+                    ? 'Wife'
+                    : familyMember.relation_with_principal === 'S'
+                    ? 'Son'
+                    : familyMember.relation_with_principal === 'D'
+                    ? 'Daughter'
+                    : 'Main Member'}
                 </Typography>
               </Stack>
               {/* Row 2 */}
               <Stack alignItems="center">
                 <Typography variant="caption">Suspend</Typography>
-                <Switch aria-label="switch demo" />
+                <Switch aria-label="switch demo" disabled />
               </Stack>
             </Stack>
             <Typography variant="body2" color="#757575">
-              Octa Xavier
+              {familyMember?.name}
             </Typography>
             <Typography variant="body2" color="#757575">
-              14 Jan 1986
+              {familyMember?.birth_date ? fDate(familyMember?.birth_date) : ''}
             </Typography>
             <Typography variant="body2" color="#757575">
-              082113256754
+              {familyMember?.phone}
             </Typography>
             {/* Stack 2 */}
             <Stack
@@ -64,296 +124,56 @@ export default function CardFamilyInformation() {
               justifyContent="space-between"
               marginTop={1.25}
             >
-              <Button color="error" startIcon={<Iconify icon="ic:round-close" />}>
+              <Button color="error" startIcon={<Iconify icon="ic:round-close" />} disabled>
                 Remove
               </Button>
-              <Button variant="contained" startIcon={<Iconify icon="heroicons:pencil-solid" />}>
-                Edit Data
-              </Button>
-            </Stack>
-          </Card>
-        </Grid>
-        {/* Card 2 */}
-        <Grid item xs={12} sm={6} md={6}>
-          <Card sx={{ paddingX: 1.5, paddingY: 1 }}>
-            {/* Stack 1 */}
-            <Stack
-              direction="row"
-              alignItems="center"
-              justifyContent="space-between"
-              spacing={2}
-              sx={{ flex: '100%' }}
-            >
-              {/* Row 1 */}
-              <Stack direction="row" spacing={1}>
-                <div
-                  style={{
-                    borderRadius: '50%',
-                    width: '24px',
-                    height: '24px',
-                    backgroundColor: '#D9D9D9',
-                  }}
-                />
-                <Typography variant="body2" sx={{ fontWeight: 500 }}>
-                  Kid
-                </Typography>
-              </Stack>
-              {/* Row 2 */}
-              <Stack alignItems="center">
-                <Typography variant="caption">Suspend</Typography>
-                <Switch aria-label="switch demo" />
-              </Stack>
-            </Stack>
-            <Typography variant="body2" color="#757575">
-              Celine Claudia
-            </Typography>
-            <Typography variant="body2" color="#757575">
-              15 Oct 2000
-            </Typography>
-            <Typography variant="body2" color="#757575">
-              082113256754
-            </Typography>
-            {/* Stack 2 */}
-            <Stack
-              direction="row"
-              alignItems="center"
-              justifyContent="space-between"
-              marginTop={1.25}
-            >
-              <Button color="error" startIcon={<Iconify icon="ic:round-close" />}>
-                Remove
-              </Button>
-              <Button variant="contained" startIcon={<Iconify icon="heroicons:pencil-solid" />}>
-                Edit Data
-              </Button>
-            </Stack>
-          </Card>
-        </Grid>
-        {/* Card 3 */}
-        <Grid item xs={12} sm={6} md={6}>
-          <Card sx={{ paddingX: 1.5, paddingY: 1 }}>
-            {/* Stack 1 */}
-            <Stack
-              direction="row"
-              alignItems="center"
-              justifyContent="space-between"
-              spacing={2}
-              sx={{ flex: '100%' }}
-            >
-              {/* Row 1 */}
-              <Stack direction="row" spacing={1}>
-                <div
-                  style={{
-                    borderRadius: '50%',
-                    width: '24px',
-                    height: '24px',
-                    backgroundColor: '#D9D9D9',
-                  }}
-                />
-                <Typography variant="body2" sx={{ fontWeight: 500 }}>
-                  Kid
-                </Typography>
-              </Stack>
-              {/* Row 2 */}
-              <Stack alignItems="center">
-                <Typography variant="caption">Suspend</Typography>
-                <Switch aria-label="switch demo" />
-              </Stack>
-            </Stack>
-            <Typography variant="body2" color="#757575">
-              Celine Claudia
-            </Typography>
-            <Typography variant="body2" color="#757575">
-              15 Oct 2000
-            </Typography>
-            <Typography variant="body2" color="#757575">
-              082113256754
-            </Typography>
-            {/* Stack 2 */}
-            <Stack
-              direction="row"
-              alignItems="center"
-              justifyContent="space-between"
-              marginTop={1.25}
-            >
-              <Button color="error" startIcon={<Iconify icon="ic:round-close" />}>
-                Remove
-              </Button>
-              <Button variant="contained" startIcon={<Iconify icon="heroicons:pencil-solid" />}>
-                Edit Data
-              </Button>
-            </Stack>
-          </Card>
-        </Grid>
-        {/* Card 4 */}
-        <Grid item xs={12} sm={6} md={6}>
-          <Card sx={{ paddingX: 1.5, paddingY: 1 }}>
-            {/* Stack 1 */}
-            <Stack
-              direction="row"
-              alignItems="center"
-              justifyContent="space-between"
-              spacing={2}
-              sx={{ flex: '100%' }}
-            >
-              {/* Row 1 */}
-              <Stack direction="row" spacing={1}>
-                <div
-                  style={{
-                    borderRadius: '50%',
-                    width: '24px',
-                    height: '24px',
-                    backgroundColor: '#D9D9D9',
-                  }}
-                />
-                <Typography variant="body2" sx={{ fontWeight: 500 }}>
-                  Kid
-                </Typography>
-              </Stack>
-              {/* Row 2 */}
-              <Stack alignItems="center">
-                <Typography variant="caption">Suspend</Typography>
-                <Switch aria-label="switch demo" />
-              </Stack>
-            </Stack>
-            <Typography variant="body2" color="#757575">
-              Celine Claudia
-            </Typography>
-            <Typography variant="body2" color="#757575">
-              15 Oct 2000
-            </Typography>
-            <Typography variant="body2" color="#757575">
-              082113256754
-            </Typography>
-            {/* Stack 2 */}
-            <Stack
-              direction="row"
-              alignItems="center"
-              justifyContent="space-between"
-              marginTop={1.25}
-            >
-              <Button color="error" startIcon={<Iconify icon="ic:round-close" />}>
-                Remove
-              </Button>
-              <Button variant="contained" startIcon={<Iconify icon="heroicons:pencil-solid" />}>
-                Edit Data
-              </Button>
-            </Stack>
-          </Card>
-        </Grid>
-        {/* Card 5 */}
-        <Grid item xs={12} sm={6} md={6}>
-          <Card sx={{ paddingX: 1.5, paddingY: 1 }}>
-            {/* Stack 1 */}
-            <Stack
-              direction="row"
-              alignItems="center"
-              justifyContent="space-between"
-              spacing={2}
-              sx={{ flex: '100%' }}
-            >
-              {/* Row 1 */}
-              <Stack direction="row" spacing={1}>
-                <div
-                  style={{
-                    borderRadius: '50%',
-                    width: '24px',
-                    height: '24px',
-                    backgroundColor: '#D9D9D9',
-                  }}
-                />
-                <Typography variant="body2" sx={{ fontWeight: 500 }}>
-                  Kid
-                </Typography>
-              </Stack>
-              {/* Row 2 */}
-              <Stack alignItems="center">
-                <Typography variant="caption">Suspend</Typography>
-                <Switch aria-label="switch demo" />
-              </Stack>
-            </Stack>
-            <Typography variant="body2" color="#757575">
-              Celine Claudia
-            </Typography>
-            <Typography variant="body2" color="#757575">
-              15 Oct 2000
-            </Typography>
-            <Typography variant="body2" color="#757575">
-              082113256754
-            </Typography>
-            {/* Stack 2 */}
-            <Stack
-              direction="row"
-              alignItems="center"
-              justifyContent="space-between"
-              marginTop={1.25}
-            >
-              <Button color="error" startIcon={<Iconify icon="ic:round-close" />}>
-                Remove
-              </Button>
-              <Button variant="contained" startIcon={<Iconify icon="heroicons:pencil-solid" />}>
-                Edit Data
-              </Button>
-            </Stack>
-          </Card>
-        </Grid>
-        {/* Card 6 */}
-        <Grid item xs={12} sm={6} md={6}>
-          <Card sx={{ paddingX: 1.5, paddingY: 1 }}>
-            {/* Stack 1 */}
-            <Stack
-              direction="row"
-              alignItems="center"
-              justifyContent="space-between"
-              spacing={2}
-              sx={{ flex: '100%' }}
-            >
-              {/* Row 1 */}
-              <Stack direction="row" spacing={1}>
-                <div
-                  style={{
-                    borderRadius: '50%',
-                    width: '24px',
-                    height: '24px',
-                    backgroundColor: '#D9D9D9',
-                  }}
-                />
-                <Typography variant="body2" sx={{ fontWeight: 500 }}>
-                  Kid
-                </Typography>
-              </Stack>
-              {/* Row 2 */}
-              <Stack alignItems="center">
-                <Typography variant="caption">Suspend</Typography>
-                <Switch aria-label="switch demo" />
-              </Stack>
-            </Stack>
-            <Typography variant="body2" color="#757575">
-              Celine Claudia
-            </Typography>
-            <Typography variant="body2" color="#757575">
-              15 Oct 2000
-            </Typography>
-            <Typography variant="body2" color="#757575">
-              082113256754
-            </Typography>
-            {/* Stack 2 */}
-            <Stack
-              direction="row"
-              alignItems="center"
-              justifyContent="space-between"
-              marginTop={1.25}
-            >
-              <Button color="error" startIcon={<Iconify icon="ic:round-close" />}>
-                Remove
-              </Button>
-              <Button variant="contained" startIcon={<Iconify icon="heroicons:pencil-solid" />}>
+              <Button variant="contained" startIcon={<Iconify icon="heroicons:pencil-solid" />} onClick={ () => handleEditData(index)}>
                 Edit Data
               </Button>
             </Stack>
           </Card>
         </Grid>
+      ))}
       </Grid>
+      {/* Dialog */}
+      <Dialog open={openDialog} onClose={handleCloseDialog}>
+        <DialogTitle>Edit Data</DialogTitle>
+        <DialogContent>
+          <Stack spacing={2}>
+            <TextField
+              label="Name"
+              value={editedFamilyData?.name || ''}
+              onChange={(e) => setEditedFamilyData({ ...editedFamilyData, name: e.target.value })}
+              fullWidth
+              sx={{ marginTop: '16px' }}
+            />
+
+            <TextField
+              label="Email Address"
+              value={editedFamilyData?.email || ''}
+              onChange={(e) => setEditedFamilyData({ ...editedFamilyData, email: e.target.value })}
+              fullWidth
+              sx={{ marginTop: '16px' }}
+            />
+
+            <TextField
+              label="Phone No."
+              value={editedFamilyData?.phone || ''}
+              onChange={(e) => setEditedFamilyData({ ...editedFamilyData, phone: e.target.value })}
+              fullWidth
+              sx={{ marginTop: '16px' }}
+            />
+
+          </Stack>
+        </DialogContent>
+
+        <DialogActions>
+          <Button onClick={handleCloseDialog}>Cancel</Button>
+          <Button onClick={handleSaveData} variant="contained" color="primary">
+            Save
+          </Button>
+        </DialogActions>
+      </Dialog>
     </Card>
   );
 }
diff --git a/frontend/client-portal/src/sections/alarm-center/user-profile/CardPersonalInformation.tsx b/frontend/client-portal/src/sections/alarm-center/user-profile/CardPersonalInformation.tsx
index 45d19e1b..73a0d842 100644
--- a/frontend/client-portal/src/sections/alarm-center/user-profile/CardPersonalInformation.tsx
+++ b/frontend/client-portal/src/sections/alarm-center/user-profile/CardPersonalInformation.tsx
@@ -24,6 +24,9 @@ export default function CardPersonalInformation({ data }) {
 
   /* const [updatedData, setUpdatedData] = useState(data); */
 
+  
+  //console.log(data);
+
   const handleEditData = () => {
     setWeight(data?.last_weight_kg || '');
     setHeight(data?.last_height_cm || '');
@@ -59,6 +62,7 @@ export default function CardPersonalInformation({ data }) {
         // Handle the successful update
         enqueueSnackbar('Data updated successfully', { variant: 'success' });
         setOpenDialog(false);
+        window.location.reload();
       })
       .catch((error) => {
         // Handle the error
@@ -139,7 +143,7 @@ export default function CardPersonalInformation({ data }) {
             </Stack>
             <Stack sx={{ width: '100%' }}>
               <Typography variant="caption">Jenis Kelamin</Typography>
-              <Typography variant="body2">{data?.gender}</Typography>
+              <Typography variant="body2">{data?.gender ? data.gender.charAt(0).toUpperCase() + data.gender.slice(1) : ''}</Typography>
             </Stack>
           </Stack>
         </Stack>
@@ -176,7 +180,7 @@ export default function CardPersonalInformation({ data }) {
               <Typography variant="body2">{data?.nik}</Typography>
             </Stack>
             <Stack>
-              <Button variant="contained" startIcon={<VisibilityIcon />}>
+              <Button variant="contained" startIcon={<VisibilityIcon />} disabled>
                 Lihat Foto
               </Button>
             </Stack>
diff --git a/frontend/client-portal/src/sections/dashboard/DialogTopUpLimit.tsx b/frontend/client-portal/src/sections/dashboard/DialogTopUpLimit.tsx
index bb156185..4e22a137 100644
--- a/frontend/client-portal/src/sections/dashboard/DialogTopUpLimit.tsx
+++ b/frontend/client-portal/src/sections/dashboard/DialogTopUpLimit.tsx
@@ -154,7 +154,7 @@ export default function DialogTopUpLimit({
   };
 
   const onTopupHandler = (value: string) => {
-    console.log(!!errors);
+    //console.log(!!errors);
 
     let newValue;
 
diff --git a/frontend/client-portal/src/utils/formatTime.ts b/frontend/client-portal/src/utils/formatTime.ts
index 278f022a..7fef0e22 100644
--- a/frontend/client-portal/src/utils/formatTime.ts
+++ b/frontend/client-portal/src/utils/formatTime.ts
@@ -3,7 +3,7 @@ import { format, parseISO, getTime, setHours, setMinutes, formatDistanceToNow }
 // ----------------------------------------------------------------------
 
 export function fDate(date: Date | string | number) {
-  console.log(date);
+  //console.log(date);
   return format(new Date(date), 'dd MMMM yyyy');
 }