diff --git a/src/pages/master/status/component/DetailStatus.jsx b/src/pages/master/status/component/DetailStatus.jsx
index efe499d..11b1afa 100644
--- a/src/pages/master/status/component/DetailStatus.jsx
+++ b/src/pages/master/status/component/DetailStatus.jsx
@@ -9,7 +9,7 @@ import {
     Switch,
     Row,
     Col,
-    Radio,
+    ColorPicker,
 } from 'antd';
 import { NotifAlert, NotifOk } from '../../../../components/Global/ToastNotif';
 import { validateRun } from '../../../../Utils/validate';
@@ -18,18 +18,6 @@ import { createStatus, updateStatus } from '../../../../api/master-status';
 const { Text } = Typography;
 const { TextArea } = Input;
 
-// Daftar 8 warna yang tersedia
-const COLOR_OPTIONS = [
-    { label: 'Merah', value: '#EF4444', hex: '#EF4444' },
-    { label: 'Biru', value: '#3B82F6', hex: '#3B82F6' },
-    { label: 'Hijau', value: '#10B981', hex: '#10B981' },
-    { label: 'Kuning', value: '#F59E0B', hex: '#F59E0B' },
-    { label: 'Ungu', value: '#8B5CF6', hex: '#8B5CF6' },
-    { label: 'Pink', value: '#EC4899', hex: '#EC4899' },
-    { label: 'Orange', value: '#F97316', hex: '#F97316' },
-    { label: 'Teal', value: '#14B8A6', hex: '#14B8A6' },
-];
-
 const DetailStatus = (props) => {
     const [confirmLoading, setConfirmLoading] = useState(false);
 
@@ -57,8 +45,8 @@ const DetailStatus = (props) => {
         setFormData({ ...formData, is_active: checked });
     };
 
-    const handleColorChange = (e) => {
-        setFormData({ ...formData, status_color: e.target.value });
+    const handleColorChange = (color, hex) => {
+        setFormData({ ...formData, status_color: hex });
     };
 
     const handleCancel = () => {
@@ -213,38 +201,33 @@ const DetailStatus = (props) => {
                 <Text strong>Status Color</Text>
                 <Text style={{ color: 'red' }}> *</Text>
                 <div style={{ marginTop: '8px' }}>
-                    <Radio.Group
+                    <ColorPicker
+                        value={formData.status_color || '#000000'}
                         onChange={handleColorChange}
-                        value={formData.status_color}
                         disabled={props.readOnly}
-                    >
-                        <Row gutter={[8, 8]}>
-                            {COLOR_OPTIONS.map((color) => (
-                                <Col span={12} key={color.value}>
-                                    <Radio value={color.value} style={{ width: '100%' }}>
-                                        <div
-                                            style={{
-                                                display: 'flex',
-                                                alignItems: 'center',
-                                                gap: '8px',
-                                            }}
-                                        >
-                                            <div
-                                                style={{
-                                                    width: '20px',
-                                                    height: '20px',
-                                                    backgroundColor: color.hex,
-                                                    borderRadius: '4px',
-                                                    border: '1px solid #d9d9d9',
-                                                }}
-                                            />
-                                            <span>{color.label}</span>
-                                        </div>
-                                    </Radio>
-                                </Col>
-                            ))}
-                        </Row>
-                    </Radio.Group>
+                        showText={(color) => `color hex: ${color.toHexString()}`}
+                        allowClear={false}
+                        format="hex"
+                        size="large"
+                        style={{ width: '100%' }}
+                        presets={[
+                            {
+                                label: 'Recommended',
+                                colors: [
+                                    '#EF4444', // Merah
+                                    '#3B82F6', // Biru
+                                    '#10B981', // Hijau
+                                    '#F59E0B', // Kuning
+                                    '#8B5CF6', // Ungu
+                                    '#EC4899', // Pink
+                                    '#F97316', // Orange
+                                    '#14B8A6', // Teal
+                                    '#6B7280', // Gray
+                                    '#000000', // Black
+                                ],
+                            },
+                        ]}
+                    />
                 </div>
             </div>
             <div style={{ marginBottom: 12 }}>
diff --git a/src/pages/user/component/ListUser.jsx b/src/pages/user/component/ListUser.jsx
index b580830..067b456 100644
--- a/src/pages/user/component/ListUser.jsx
+++ b/src/pages/user/component/ListUser.jsx
@@ -1,5 +1,5 @@
 import React, { memo, useState, useEffect } from 'react';
-import { Space, Tag, ConfigProvider, Button, Row, Col, Card, Input } from 'antd';
+import { Space, Tag, ConfigProvider, Button, Row, Col, Card, Input, Modal } from 'antd';
 import {
     PlusOutlined,
     EditOutlined,
@@ -8,6 +8,7 @@ import {
     SearchOutlined,
     CheckOutlined,
     CloseOutlined,
+    ClockCircleOutlined,
 } from '@ant-design/icons';
 import { NotifAlert, NotifOk, NotifConfirmDialog } from '../../../components/Global/ToastNotif';
 import { useNavigate } from 'react-router-dom';
@@ -49,13 +50,7 @@ const getRoleColor = (role_name, role_level) => {
     return 'default';
 };
 
-const columns = (
-    showPreviewModal,
-    showEditModal,
-    showDeleteDialog,
-    showApproveDialog,
-    showRejectDialog
-) => [
+const columns = (showPreviewModal, showEditModal, showDeleteDialog, showApprovalModal) => [
     {
         title: 'ID',
         dataIndex: 'user_id',
@@ -116,32 +111,22 @@ const columns = (
         render: (_, record) => {
             // is_approve: 0 = Rejected, 1 = Pending, 2 = Approved
             if (record.is_approve === 1 || record.is_approve === '1') {
-                // Pending - show both Approve and Reject buttons
+                // Pending - show single Pending button
                 return (
-                    <Space size="small" direction="vertical">
-                        <Button
-                            type="primary"
-                            size="small"
-                            icon={<CheckOutlined />}
-                            onClick={() => showApproveDialog(record)}
-                            style={{
-                                backgroundColor: '#52c41a',
-                                borderColor: '#52c41a',
-                                width: '100%',
-                            }}
-                        >
-                            Approve
-                        </Button>
-                        <Button
-                            danger
-                            size="small"
-                            icon={<CloseOutlined />}
-                            onClick={() => showRejectDialog(record)}
-                            style={{ width: '100%' }}
-                        >
-                            Reject
-                        </Button>
-                    </Space>
+                    <Button
+                        type="default"
+                        size="small"
+                        icon={<ClockCircleOutlined />}
+                        onClick={() => showApprovalModal(record)}
+                        style={{
+                            backgroundColor: '#faad14',
+                            borderColor: '#faad14',
+                            color: 'white',
+                            width: '100%',
+                        }}
+                    >
+                        Pending
+                    </Button>
                 );
             } else if (record.is_approve === 0 || record.is_approve === '0') {
                 // Rejected
@@ -233,6 +218,8 @@ const columns = (
 const ListUser = memo(function ListUser(props) {
     const [showFilter, setShowFilter] = useState(false);
     const [trigerFilter, setTrigerFilter] = useState(false);
+    const [approvalModalVisible, setApprovalModalVisible] = useState(false);
+    const [selectedUser, setSelectedUser] = useState(null);
 
     const defaultFilter = { criteria: '' };
     const [formDataFilter, setFormDataFilter] = useState(defaultFilter);
@@ -285,44 +272,30 @@ const ListUser = memo(function ListUser(props) {
         props.setActionMode('add');
     };
 
-    const showApproveDialog = (param) => {
-        Swal.fire({
-            icon: 'question',
-            title: 'Konfirmasi Approve User',
-            text: 'Apakah anda yakin approve user "' + param.user_fullname + '" ?',
-            showCancelButton: true,
-            cancelButtonColor: '#d33',
-            cancelButtonText: 'Batal',
-            confirmButtonColor: '#23A55A',
-            confirmButtonText: 'Approve',
-            reverseButtons: true,
-        }).then((result) => {
-            if (result.isConfirmed) {
-                handleApprove(param.user_id);
-            } else if (result.dismiss) {
-                props.setSelectedData(null);
-            }
-        });
+    const showApprovalModal = (param) => {
+        setSelectedUser(param);
+        setApprovalModalVisible(true);
     };
 
-    const showRejectDialog = (param) => {
-        Swal.fire({
-            icon: 'warning',
-            title: 'Konfirmasi Reject User',
-            text: 'Apakah anda yakin reject user "' + param.user_fullname + '" ?',
-            showCancelButton: true,
-            cancelButtonColor: '#23A55A',
-            cancelButtonText: 'Batal',
-            confirmButtonColor: '#d33',
-            confirmButtonText: 'Reject',
-            reverseButtons: true,
-        }).then((result) => {
-            if (result.isConfirmed) {
-                handleReject(param.user_id);
-            } else if (result.dismiss) {
-                props.setSelectedData(null);
-            }
-        });
+    const handleModalApprove = () => {
+        if (selectedUser) {
+            handleApprove(selectedUser.user_id);
+            setApprovalModalVisible(false);
+            setSelectedUser(null);
+        }
+    };
+
+    const handleModalReject = () => {
+        if (selectedUser) {
+            handleReject(selectedUser.user_id);
+            setApprovalModalVisible(false);
+            setSelectedUser(null);
+        }
+    };
+
+    const handleModalCancel = () => {
+        setApprovalModalVisible(false);
+        setSelectedUser(null);
     };
 
     const showDeleteDialog = (param) => {
@@ -470,14 +443,46 @@ const ListUser = memo(function ListUser(props) {
                                 showPreviewModal,
                                 showEditModal,
                                 showDeleteDialog,
-                                showApproveDialog,
-                                showRejectDialog
+                                showApprovalModal
                             )}
                             triger={trigerFilter}
                         />
                     </Col>
                 </Row>
             </Card>
+
+            {/* Approval Modal */}
+            <Modal
+                title="Konfirmasi Persetujuan User"
+                open={approvalModalVisible}
+                onCancel={handleModalCancel}
+                footer={[
+                    <Button key="reject" danger onClick={handleModalReject}>
+                        Reject User
+                    </Button>,
+                    <Button
+                        key="approve"
+                        type="primary"
+                        style={{ backgroundColor: '#23A55A', borderColor: '#23A55A' }}
+                        onClick={handleModalApprove}
+                    >
+                        Approve User
+                    </Button>,
+                ]}
+                width={400}
+            >
+                <div style={{ textAlign: 'center', padding: '20px 0' }}>
+                    <ClockCircleOutlined
+                        style={{ fontSize: '48px', color: '#faad14', marginBottom: '16px' }}
+                    />
+                    <p style={{ fontSize: '16px', margin: '16px 0' }}>
+                        User: <strong>{selectedUser?.user_fullname}</strong>
+                    </p>
+                    <p style={{ color: '#666', margin: '8px 0' }}>
+                        Apakah Anda ingin approve atau reject user ini?
+                    </p>
+                </div>
+            </Modal>
         </React.Fragment>
     );
 });