diff --git a/src/pages/contact/component/ListContact.jsx b/src/pages/contact/component/ListContact.jsx
index f6ff048..936361d 100644
--- a/src/pages/contact/component/ListContact.jsx
+++ b/src/pages/contact/component/ListContact.jsx
@@ -122,7 +122,7 @@ const ContactCard = memo(function ContactCard({ contact, showEditModal, showDele
                                 <PhoneOutlined style={{ marginRight: 6, color: '#1890ff' }} />
                                 <span
                                     style={{
-                                        color: contact.status === 'active' ? '#52c41a' : '#ff4d4f',
+                                        color: contact.status === 'active' ? '#262626' : '#262626',
                                     }}
                                 >
                                     {contact.contact_phone || contact.phone}
@@ -142,10 +142,12 @@ const ContactCard = memo(function ContactCard({ contact, showEditModal, showDele
                     >
                         <Space>
                             <Button
-                                type="text"
+                                type="default"
                                 size="small"
                                 style={{
+                                    backgroundColor: '#fff7e6',
                                     borderColor: '#faad14',
+                                    color: '#faad14',
                                     padding: '2px 6px',
                                     fontSize: '11px',
                                     height: '24px',
@@ -161,10 +163,11 @@ const ContactCard = memo(function ContactCard({ contact, showEditModal, showDele
                                 Edit info
                             </Button>
                             <Button
-                                type="text"
+                                type="default"
                                 danger
                                 size="small"
                                 style={{
+                                    backgroundColor: '#fff1f0',
                                     borderColor: 'red',
                                     padding: '2px 6px',
                                     fontSize: '11px',
diff --git a/src/pages/master/device/component/DetailDevice.jsx b/src/pages/master/device/component/DetailDevice.jsx
index 0e2c56e..7e3a6b9 100644
--- a/src/pages/master/device/component/DetailDevice.jsx
+++ b/src/pages/master/device/component/DetailDevice.jsx
@@ -1,7 +1,8 @@
 import React, { useEffect, useState } from 'react';
-import { Modal, Input, Divider, Typography, Switch, Button, ConfigProvider } from 'antd';
+import { Modal, Input, Divider, Typography, Switch, Button, ConfigProvider, Select } from 'antd';
 import { NotifAlert, NotifOk } from '../../../../components/Global/ToastNotif';
 import { createDevice, updateDevice } from '../../../../api/master-device';
+import { getAllBrands } from '../../../../api/master-brand';
 import { validateRun } from '../../../../Utils/validate';
 
 const { Text } = Typography;
@@ -9,12 +10,15 @@ const { TextArea } = Input;
 
 const DetailDevice = (props) => {
     const [confirmLoading, setConfirmLoading] = useState(false);
+    const [brands, setBrands] = useState([]);
+    const [loadingBrands, setLoadingBrands] = useState(false);
 
     const defaultData = {
         device_id: '',
         device_code: '',
         device_name: '',
-        brand_device: '',
+        brand_id: '',
+        brand_code: '',
         is_active: true,
         device_location: '',
         device_description: '',
@@ -35,6 +39,7 @@ const DetailDevice = (props) => {
         const validationRules = [
             { field: 'device_name', label: 'Device Name', required: true },
             { field: 'ip_address', label: 'Ip Address', required: true, ip: true },
+            { field: 'brand_id', label: 'Brand Device', required: true },
         ];
 
         if (
@@ -56,6 +61,7 @@ const DetailDevice = (props) => {
                 device_location: formData.device_location,
                 device_description: formData.device_description,
                 ip_address: formData.ip_address,
+                brand_id: formData.brand_id,
             };
 
             const response = formData.device_id
@@ -102,6 +108,13 @@ const DetailDevice = (props) => {
         });
     };
 
+    const handleSelectChange = (name, value) => {
+        setFormData({
+            ...formData,
+            [name]: value,
+        });
+    };
+
     const handleStatusToggle = (event) => {
         const isChecked = event;
         setFormData({
@@ -110,6 +123,32 @@ const DetailDevice = (props) => {
         });
     };
 
+    // Fungsi untuk mengambil daftar brand
+    const fetchBrands = async () => {
+        setLoadingBrands(true);
+        try {
+            const response = await getAllBrands(new URLSearchParams());
+            if (response && response.data) {
+                setBrands(response.data || []);
+            }
+        } catch (error) {
+            console.error('Error fetching brands:', error);
+            NotifAlert({
+                icon: 'error',
+                title: 'Error',
+                message: error.message || 'Gagal mengambil data brand',
+            });
+        } finally {
+            setLoadingBrands(false);
+        }
+    };
+
+    useEffect(() => {
+        if (props.showModal && (props.actionMode === 'add' || props.actionMode === 'edit')) {
+            fetchBrands();
+        }
+    }, [props.showModal, props.actionMode]);
+
     useEffect(() => {
         if (props.selectedData) {
             setFormData(props.selectedData);
@@ -244,19 +283,26 @@ const DetailDevice = (props) => {
                     <div style={{ marginBottom: 12 }}>
                         <Text strong>Brand Device</Text>
                         <Text style={{ color: 'red' }}> *</Text>
-                        <Input
-                            name="brand_device"
-                            value={formData.brand_device}
-                            onChange={handleInputChange}
-                            placeholder="Enter Brand Device"
-                            readOnly={props.readOnly}
-                            disabled
-                            style={{
-                                backgroundColor: '#f5f5f5',
-                                cursor: 'not-allowed',
-                                color: formData.brand_device ? '#000000' : '#bfbfbf',
-                            }}
-                        />
+                        <Select
+                            name="brand_id"
+                            value={formData.brand_id}
+                            onChange={(value) => handleSelectChange('brand_id', value)}
+                            placeholder="Select Brand Device"
+                            disabled={props.readOnly}
+                            loading={loadingBrands}
+                            style={{ width: '100%' }}
+                            allowClear
+                            showSearch
+                            filterOption={(input, option) =>
+                                option.children.toLowerCase().includes(input.toLowerCase())
+                            }
+                        >
+                            {brands.map((brand) => (
+                                <Select.Option key={brand.brand_id} value={brand.brand_id}>
+                                    {`${brand.brand_code} - ${brand.brand_name} `}
+                                </Select.Option>
+                            ))}
+                        </Select>
                     </div>
                     <div style={{ marginBottom: 12 }}>
                         <Text strong>Device Location</Text>
diff --git a/src/pages/master/device/component/ListDevice.jsx b/src/pages/master/device/component/ListDevice.jsx
index d3cf0b9..ae7fcb4 100644
--- a/src/pages/master/device/component/ListDevice.jsx
+++ b/src/pages/master/device/component/ListDevice.jsx
@@ -13,6 +13,7 @@ import { NotifAlert, NotifOk, NotifConfirmDialog } from '../../../../components/
 import { useNavigate } from 'react-router-dom';
 import { deleteDevice, getAllDevice } from '../../../../api/master-device';
 import TableList from '../../../../components/Global/TableList';
+import { getAllBrands } from '../../../../api/master-brand';
 
 const columns = (showPreviewModal, showEditModal, showDeleteDialog) => [
     {
@@ -44,9 +45,10 @@ const columns = (showPreviewModal, showEditModal, showDeleteDialog) => [
     },
     {
         title: 'Brand Device',
-        dataIndex: 'brand_device',
-        key: 'brand_device',
+        dataIndex: 'brand_name',
+        key: 'brand_name',
         width: '20%',
+        render: (brand_name) => brand_name || '-'
     },
     {
         title: 'Location',