diff --git a/src/pages/master/brandDevice/component/ListErrorCode.jsx b/src/pages/master/brandDevice/component/ListErrorCode.jsx
index 6fbba65..170b6f6 100644
--- a/src/pages/master/brandDevice/component/ListErrorCode.jsx
+++ b/src/pages/master/brandDevice/component/ListErrorCode.jsx
@@ -1,6 +1,12 @@
 import React, { useState, useEffect, useMemo } from 'react';
 import { Card, Input, Button, Row, Col, Empty } from 'antd';
-import { PlusOutlined, SearchOutlined, DeleteOutlined, LeftOutlined, RightOutlined } from '@ant-design/icons';
+import {
+    PlusOutlined,
+    SearchOutlined,
+    DeleteOutlined,
+    LeftOutlined,
+    RightOutlined,
+} from '@ant-design/icons';
 import { getErrorCodesByBrandId, deleteErrorCode } from '../../../../api/master-brand';
 import { NotifAlert, NotifOk, NotifConfirmDialog } from '../../../../components/Global/ToastNotif';
 
@@ -16,7 +22,7 @@ const ListErrorCode = ({
     onSearch,
     onSearchClear,
     isReadOnly = false,
-    errorCodes: propErrorCodes = null
+    errorCodes: propErrorCodes = null,
 }) => {
     const [errorCodes, setErrorCodes] = useState([]);
     const [loading, setLoading] = useState(false);
@@ -52,12 +58,12 @@ const ListErrorCode = ({
             if (response && response.statusCode === 200) {
                 const apiErrorData = response.data || [];
                 const allErrorCodes = [
-                    ...apiErrorData.map(ec => ({
+                    ...apiErrorData.map((ec) => ({
                         ...ec,
                         tempId: `existing_${ec.error_code_id}`,
-                        status: 'existing'
+                        status: 'existing',
                     })),
-                    ...tempErrorCodes.filter(ec => ec.status !== 'deleted')
+                    ...tempErrorCodes.filter((ec) => ec.status !== 'deleted'),
                 ];
 
                 setErrorCodes(allErrorCodes);
@@ -82,11 +88,9 @@ const ListErrorCode = ({
 
     useEffect(() => {
         if (isReadOnly && propErrorCodes) {
-
             setErrorCodes(propErrorCodes);
             setLoading(false);
         } else {
-
             fetchErrorCodes();
         }
     }, [brandId, queryParams, tempErrorCodes, trigerFilter, isReadOnly, propErrorCodes]);
@@ -126,20 +130,19 @@ const ListErrorCode = ({
                 title: 'Hapus Error Code',
                 message: `Apakah Anda yakin ingin menghapus error code ${item.error_code}?`,
                 onConfirm: () => performDelete(item),
-                onCancel: () => { },
-                confirmButtonText: 'Hapus'
+                onCancel: () => {},
+                confirmButtonText: 'Hapus',
             });
         }
     };
 
     const performDelete = async (item) => {
         try {
-
             if (!item.error_code_id || item.error_code_id === 'undefined') {
                 NotifAlert({
                     icon: 'error',
                     title: 'Error',
-                    message: 'Error code ID tidak valid'
+                    message: 'Error code ID tidak valid',
                 });
                 return;
             }
@@ -148,7 +151,7 @@ const ListErrorCode = ({
                 NotifAlert({
                     icon: 'error',
                     title: 'Error',
-                    message: 'Brand ID tidak valid'
+                    message: 'Brand ID tidak valid',
                 });
                 return;
             }
@@ -159,30 +162,61 @@ const ListErrorCode = ({
                 NotifOk({
                     icon: 'success',
                     title: 'Berhasil',
-                    message: 'Error code berhasil dihapus'
+                    message: 'Error code berhasil dihapus',
                 });
                 fetchErrorCodes();
             } else {
                 NotifAlert({
                     icon: 'error',
                     title: 'Gagal',
-                    message: 'Gagal menghapus error code'
+                    message: 'Gagal menghapus error code',
                 });
             }
         } catch (error) {
             NotifAlert({
                 icon: 'error',
                 title: 'Error',
-                message: 'Terjadi kesalahan saat menghapus error code'
+                message: 'Terjadi kesalahan saat menghapus error code',
             });
         }
     };
 
+    const handleAddNew = () => {
+        if (onAddNew) {
+            onAddNew();
+        }
+    };
+
     return (
         <Card
-            title="Daftar Error Code"
-            style={{ width: '100%', minWidth: '472px' }}
-            styles={{ body: { padding: '12px' } }}
+            title={
+                <div
+                    style={{
+                        display: 'flex',
+                        justifyContent: 'space-between',
+                        alignItems: 'center',
+                    }}
+                >
+                    <span>Daftar Error Code</span>
+                    <Button
+                        icon={<PlusOutlined />}
+                        onClick={handleAddNew}
+                        size="medium"
+                        type="default"
+                        style={{
+                            color: '#23A55A',
+                            borderColor: '#23A55A',
+                            fontWeight: '500',
+                            borderRadius: '6px',
+                            padding: '0 16px',
+                        }}
+                    >
+                        Add Data
+                    </Button>
+                </div>
+            }
+            style={{ width: '100%', minWidth: '300px' }}
+            bodyStyle={{ padding: '12px' }}
         >
             <Input.Search
                 placeholder="Cari error code..."
@@ -203,7 +237,7 @@ const ListErrorCode = ({
                         style={{
                             backgroundColor: '#23A55A',
                             borderColor: '#23A55A',
-                            height: '32px'
+                            height: '32px',
                         }}
                     >
                         Search
@@ -217,19 +251,18 @@ const ListErrorCode = ({
                 }}
             />
 
-            <div style={{
-                height: '90vh',
-                border: '1px solid #d9d9d9',
-                borderRadius: '6px',
-                overflow: 'auto',
-                marginBottom: 12,
-                backgroundColor: '#fafafa'
-            }}>
+            <div
+                style={{
+                    height: '90vh',
+                    border: '1px solid #d9d9d9',
+                    borderRadius: '6px',
+                    overflow: 'auto',
+                    marginBottom: 12,
+                    backgroundColor: '#fafafa',
+                }}
+            >
                 {errorCodes.length === 0 ? (
-                    <Empty
-                        description="Belum ada error code"
-                        style={{ marginTop: 50 }}
-                    />
+                    <Empty description="Belum ada error code" style={{ marginTop: 50 }} />
                 ) : (
                     <div style={{ padding: '8px' }}>
                         {errorCodes.map((item) => (
@@ -240,13 +273,25 @@ const ListErrorCode = ({
                                     padding: '8px 12px',
                                     borderRadius: '6px',
                                     marginBottom: '4px',
-                                    border: selectedErrorCode?.tempId === item.tempId ? '2px solid #23A55A' : '1px solid #d9d9d9',
-                                    backgroundColor: selectedErrorCode?.tempId === item.tempId ? '#f6ffed' : '#fff',
-                                    transition: 'all 0.2s ease'
+                                    border:
+                                        selectedErrorCode?.tempId === item.tempId
+                                            ? '2px solid #23A55A'
+                                            : '1px solid #d9d9d9',
+                                    backgroundColor:
+                                        selectedErrorCode?.tempId === item.tempId
+                                            ? '#f6ffed'
+                                            : '#fff',
+                                    transition: 'all 0.2s ease',
                                 }}
                                 onClick={() => onErrorCodeSelect(item)}
                             >
-                                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                                <div
+                                    style={{
+                                        display: 'flex',
+                                        justifyContent: 'space-between',
+                                        alignItems: 'center',
+                                    }}
+                                >
                                     <div style={{ flex: 1 }}>
                                         <div style={{ fontWeight: 'bold', fontSize: '12px' }}>
                                             {item.error_code}
@@ -266,7 +311,7 @@ const ListErrorCode = ({
                                                 padding: '2px 6px',
                                                 height: '24px',
                                                 fontSize: '11px',
-                                                border: '1px solid #ff4d4f'
+                                                border: '1px solid #ff4d4f',
                                             }}
                                         />
                                     )}
@@ -292,9 +337,15 @@ const ListErrorCode = ({
                                 onClick={handlePrevious}
                                 disabled={pagination.current_page <= 1}
                                 size="small"
+                            ></Button>
+                            <span
+                                style={{
+                                    fontSize: '12px',
+                                    color: '#666',
+                                    minWidth: '60px',
+                                    textAlign: 'center',
+                                }}
                             >
-                            </Button>
-                            <span style={{ fontSize: '12px', color: '#666', minWidth: '60px', textAlign: 'center' }}>
                                 {pagination.current_page} / {pagination.total_page}
                             </span>
                             <Button
@@ -302,8 +353,7 @@ const ListErrorCode = ({
                                 onClick={handleNext}
                                 disabled={pagination.current_page >= pagination.total_page}
                                 size="small"
-                            >
-                            </Button>
+                            ></Button>
                         </div>
                     </Col>
                 </Row>
@@ -312,4 +362,4 @@ const ListErrorCode = ({
     );
 };
 
-export default ListErrorCode;
\ No newline at end of file
+export default ListErrorCode;