diff --git a/src/pages/user/component/ListUser.jsx b/src/pages/user/component/ListUser.jsx
index a716544..7f6b15f 100644
--- a/src/pages/user/component/ListUser.jsx
+++ b/src/pages/user/component/ListUser.jsx
@@ -11,7 +11,7 @@ import {
 } from '@ant-design/icons';
 import { NotifAlert, NotifOk, NotifConfirmDialog } from '../../../components/Global/ToastNotif';
 import { useNavigate } from 'react-router-dom';
-import { deleteUser, getAllUser } from '../../../api/user';
+import { deleteUser, getAllUser, approveUser } from '../../../api/user';
 import TableList from '../../../components/Global/TableList';
 
 const columns = (showPreviewModal, showEditModal, showDeleteDialog, showApproveDialog) => [
@@ -24,20 +24,20 @@ const columns = (showPreviewModal, showEditModal, showDeleteDialog, showApproveD
     },
     {
         title: 'Username',
-        dataIndex: 'username',
-        key: 'username',
+        dataIndex: 'user_name',
+        key: 'user_name',
         width: '12%',
     },
     {
         title: 'Nama Lengkap',
-        dataIndex: 'fullname',
-        key: 'fullname',
+        dataIndex: 'user_fullname',
+        key: 'user_fullname',
         width: '15%',
     },
     {
         title: 'Nomor WA',
-        dataIndex: 'whatsapp_number',
-        key: 'whatsapp_number',
+        dataIndex: 'user_phone',
+        key: 'user_phone',
         width: '12%',
     },
     {
@@ -159,12 +159,10 @@ const ListUser = memo(function ListUser(props) {
 
     useEffect(() => {
         const token = localStorage.getItem('token');
-        if (token) {
-        if (props.actionMode == 'list') {
+        if (token && props.actionMode == 'list') {
             setFormDataFilter(defaultFilter);
             doFilter();
-        }
-        } else {
+        } else if (!token) {
             navigate('/signin');
         }
     }, [props.actionMode]);
@@ -225,21 +223,21 @@ const ListUser = memo(function ListUser(props) {
     };
 
     const handleApprove = async (user_id) => {
-        // TODO: Implement approve user API call
-        NotifAlert({
-            icon: 'info',
-            title: 'Info',
-            message: 'Approve user akan diimplementasikan dengan API',
-        });
-        // const response = await approveUser(user_id);
-        // if (response.statusCode == 200) {
-        //     NotifAlert({
-        //         icon: 'success',
-        //         title: 'Berhasil',
-        //         message: 'User berhasil diapprove.',
-        //     });
-        //     doFilter();
-        // }
+        const response = await approveUser(user_id);
+        if (response.statusCode == 200) {
+            NotifAlert({
+                icon: 'success',
+                title: 'Berhasil',
+                message: 'User berhasil diapprove.',
+            });
+            doFilter();
+        } else {
+            NotifOk({
+                icon: 'error',
+                title: 'Gagal',
+                message: 'Gagal Approve User',
+            });
+        }
     };
 
     const handleDelete = async (user_id) => {
@@ -249,7 +247,7 @@ const ListUser = memo(function ListUser(props) {
             NotifAlert({
                 icon: 'success',
                 title: 'Berhasil',
-                message: 'User "' + response.data.fullname + '" berhasil dihapus.',
+                message: 'User "' + response.data.user_fullname + '" berhasil dihapus.',
             });
             doFilter();
         } else {