diff --git a/src/pages/master/brandDevice/component/ErrorCodeForm.jsx b/src/pages/master/brandDevice/component/ErrorCodeForm.jsx
index 7490fe0..fbfaff2 100644
--- a/src/pages/master/brandDevice/component/ErrorCodeForm.jsx
+++ b/src/pages/master/brandDevice/component/ErrorCodeForm.jsx
@@ -1,4 +1,14 @@
-import { Form, Divider, Button, Switch, Input, ConfigProvider, Typography, Upload, message } from 'antd';
+import {
+    Form,
+    Divider,
+    Button,
+    Switch,
+    Input,
+    ConfigProvider,
+    Typography,
+    Upload,
+    message,
+} from 'antd';
 import { PlusOutlined, UploadOutlined, DeleteOutlined } from '@ant-design/icons';
 import { NotifAlert } from '../../../../components/Global/ToastNotif';
 import SolutionField from './SolutionField';
@@ -28,7 +38,7 @@ const ErrorCodeForm = ({
     errorCodes,
     errorCodeIcon,
     onErrorCodeIconUpload,
-    onErrorCodeIconRemove
+    onErrorCodeIconRemove,
 }) => {
     const statusValue = Form.useWatch('status', errorCodeForm);
 
@@ -49,12 +59,15 @@ const ErrorCodeForm = ({
 
         try {
             const fileExtension = file.name.split('.').pop().toLowerCase();
-            const isImageFile = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'bmp'].includes(fileExtension);
+            const isImageFile = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'bmp'].includes(
+                fileExtension
+            );
             const fileType = isImageFile ? 'image' : 'pdf';
             const folder = 'images';
 
             const uploadResponse = await uploadFile(file, folder);
-            const iconPath = uploadResponse.data?.path_icon || uploadResponse.data?.path_solution || '';
+            const iconPath =
+                uploadResponse.data?.path_icon || uploadResponse.data?.path_solution || '';
 
             if (iconPath) {
                 // Extract folder and filename from the path
@@ -67,7 +80,7 @@ const ErrorCodeForm = ({
                     uploadPath: iconPath,
                     url: getFileUrl(folder, filename), // Use the same endpoint as file uploads
                     type_solution: fileType,
-                    solutionId: 'icon'
+                    solutionId: 'icon',
                 });
                 message.success(`${file.name} uploaded successfully!`);
             } else {
@@ -99,7 +112,7 @@ const ErrorCodeForm = ({
 
                 const solutionName = values[`solution_name_${fieldId}`];
                 const textSolution = values[`text_solution_${fieldId}`];
-                const filesForSolution = fileList.filter(file => file.solutionId === fieldId);
+                const filesForSolution = fileList.filter((file) => file.solutionId === fieldId);
                 const solutionType = values[`solution_type_${fieldId}`] || solutionTypes[fieldId];
 
                 if (solutionType === 'text') {
@@ -109,11 +122,12 @@ const ErrorCodeForm = ({
                             type_solution: 'text',
                             text_solution: textSolution.trim(),
                             path_solution: '',
-                            is_active: solutionStatuses[fieldId] !== false
+                            is_active: solutionStatuses[fieldId] !== false,
                         };
 
                         if (window.currentSolutionData && window.currentSolutionData[fieldId]) {
-                            solutionData.brand_code_solution_id = window.currentSolutionData[fieldId].brand_code_solution_id;
+                            solutionData.brand_code_solution_id =
+                                window.currentSolutionData[fieldId].brand_code_solution_id;
                         }
 
                         solutions.push(solutionData);
@@ -121,15 +135,22 @@ const ErrorCodeForm = ({
                 } else if (solutionType === 'file') {
                     filesForSolution.forEach((file) => {
                         const solutionData = {
-                            solution_name: solutionName || file.solution_name || file.name || `Solution ${fieldId}`,
-                            type_solution: file.type_solution || (file.type.startsWith('image/') ? 'image' : 'pdf'),
+                            solution_name:
+                                solutionName ||
+                                file.solution_name ||
+                                file.name ||
+                                `Solution ${fieldId}`,
+                            type_solution:
+                                file.type_solution ||
+                                (file.type.startsWith('image/') ? 'image' : 'pdf'),
                             text_solution: '',
                             path_solution: file.uploadPath,
-                            is_active: solutionStatuses[fieldId] !== false
+                            is_active: solutionStatuses[fieldId] !== false,
                         };
 
                         if (window.currentSolutionData && window.currentSolutionData[fieldId]) {
-                            solutionData.brand_code_solution_id = window.currentSolutionData[fieldId].brand_code_solution_id;
+                            solutionData.brand_code_solution_id =
+                                window.currentSolutionData[fieldId].brand_code_solution_id;
                         }
 
                         solutions.push(solutionData);
@@ -141,7 +162,8 @@ const ErrorCodeForm = ({
                 NotifAlert({
                     icon: 'warning',
                     title: 'Perhatian',
-                    message: 'Setiap error code harus memiliki minimal 1 solution (text atau file)!'
+                    message:
+                        'Setiap error code harus memiliki minimal 1 solution (text atau file)!',
                 });
                 return;
             }
@@ -154,13 +176,16 @@ const ErrorCodeForm = ({
                 path_icon: errorCodeIcon?.uploadPath || '',
                 status: values.status === undefined ? true : values.status,
                 solution: solutions,
-                key: editingErrorCodeKey || `temp-${Date.now()}`
+                key: editingErrorCodeKey || `temp-${Date.now()}`,
             };
 
             onAddErrorCode(newErrorCode);
-
         } catch (error) {
-            NotifAlert({ icon: 'warning', title: 'Perhatian', message: 'Harap isi semua kolom wajib (error code + minimal 1 solution)!' });
+            NotifAlert({
+                icon: 'warning',
+                title: 'Perhatian',
+                message: 'Harap isi semua kolom wajib (error code + minimal 1 solution)!',
+            });
         }
     };
 
@@ -169,14 +194,21 @@ const ErrorCodeForm = ({
         errorCodeForm.setFieldsValue({
             status: true,
             solution_status_0: true,
-            solution_type_0: 'text'
+            solution_type_0: 'text',
         });
         onResetForm();
     };
 
     return (
         <>
-            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
+            <div
+                style={{
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                    marginBottom: 16,
+                }}
+            >
                 <Form.Item label="Status" style={{ margin: 0 }}>
                     <div style={{ display: 'flex', alignItems: 'center' }}>
                         <Form.Item name="status" valuePropName="checked" noStyle>
@@ -203,85 +235,110 @@ const ErrorCodeForm = ({
                             },
                         }}
                     >
-                        <Button
-                            icon={<PlusOutlined />}
-                            onClick={handleAddErrorCode}
-                        >
+                        <Button icon={<PlusOutlined />} onClick={handleAddErrorCode}>
                             {editingErrorCodeKey ? 'Update Error Code' : 'Tambah Error Code'}
                         </Button>
                     </ConfigProvider>
                 )}
             </div>
 
-            <Form.Item name="error_code" label="Error Code" rules={[{ required: true, message: 'Error Code wajib diisi' }]}>
+            <Form.Item
+                name="error_code"
+                label="Error Code"
+                rules={[{ required: true, message: 'Error Code wajib diisi' }]}
+            >
                 <Input disabled={isErrorCodeFormReadOnly} />
             </Form.Item>
 
-            <Form.Item name="error_code_name" label="Error Code Name" rules={[{ required: true, message: 'Error Code Name wajib diisi' }]}>
+            <Form.Item
+                name="error_code_name"
+                label="Error Code Name"
+                rules={[{ required: true, message: 'Error Code Name wajib diisi' }]}
+            >
                 <Input disabled={isErrorCodeFormReadOnly} />
             </Form.Item>
 
-            <Form.Item name="error_code_color" label="Error Code Color">
-                <Input
-                    type="color"
-                    disabled={isErrorCodeFormReadOnly}
-                    style={{ width: 100, height: 40 }}
-                />
-            </Form.Item>
-
-            <Form.Item label="Error Code Icon">
-                <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
-                    {errorCodeIcon ? (
-                        <>
-                            <img
-                                src={errorCodeIcon.url}
-                                alt="Error Code Icon"
-                                style={{
-                                    width: 64,
-                                    height: 64,
-                                    objectFit: 'cover',
-                                    border: '1px solid #d9d9d9',
-                                    borderRadius: 4
-                                }}
-                            />
-                            <div>
-                                <div style={{ fontSize: 12, color: '#666', marginBottom: 4 }}>
-                                    {errorCodeIcon.name}
+            <Form.Item label="Color & Icon">
+                <div style={{ display: 'flex', alignItems: 'center', gap: 24 }}>
+                    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                        <Text style={{ fontSize: 14, minWidth: 40 }}>Icon:</Text>
+                        {errorCodeIcon ? (
+                            <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
+                                <img
+                                    src={errorCodeIcon.url}
+                                    alt="Error Code Icon"
+                                    style={{
+                                        width: 32,
+                                        height: 32,
+                                        objectFit: 'cover',
+                                        border: '1px solid #d9d9d9',
+                                        borderRadius: 4,
+                                    }}
+                                />
+                                <div>
+                                    <div style={{ fontSize: 11, color: '#666', marginBottom: 2 }}>
+                                        {errorCodeIcon.name.length > 15
+                                            ? errorCodeIcon.name.substring(0, 15) + '...'
+                                            : errorCodeIcon.name}
+                                    </div>
+                                    {!isErrorCodeFormReadOnly && (
+                                        <Button
+                                            size="small"
+                                            type="text"
+                                            danger
+                                            icon={<DeleteOutlined />}
+                                            onClick={handleRemoveIcon}
+                                            style={{ height: 20, padding: '0 4px', fontSize: 10 }}
+                                        >
+                                            Remove
+                                        </Button>
+                                    )}
                                 </div>
-                                {!isErrorCodeFormReadOnly && (
-                                    <Button
-                                        size="small"
-                                        danger
-                                        icon={<DeleteOutlined />}
-                                        onClick={handleRemoveIcon}
-                                    >
-                                        Remove
-                                    </Button>
-                                )}
                             </div>
-                        </>
-                    ) : (
-                        <Upload
-                            accept="image/*"
-                            beforeUpload={handleIconUpload}
-                            showUploadList={false}
-                            disabled={isErrorCodeFormReadOnly}
-                        >
-                            <Button
-                                icon={<UploadOutlined />}
+                        ) : (
+                            <Upload
+                                accept="image/*"
+                                beforeUpload={handleIconUpload}
+                                showUploadList={false}
                                 disabled={isErrorCodeFormReadOnly}
                             >
-                                Upload Icon
-                            </Button>
-                        </Upload>
-                    )}
+                                <Button
+                                    size="small"
+                                    icon={<UploadOutlined />}
+                                    disabled={isErrorCodeFormReadOnly}
+                                    style={{ height: 32 }}
+                                >
+                                    Upload
+                                </Button>
+                            </Upload>
+                        )}
+                    </div>
+                    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                        <Text style={{ fontSize: 14, minWidth: 40 }}>Color:</Text>
+                        <Form.Item name="error_code_color" noStyle>
+                            <Input
+                                type="color"
+                                disabled={isErrorCodeFormReadOnly}
+                                style={{
+                                    width: 50,
+                                    height: 32,
+                                    border: '1px solid #d9d9d9',
+                                    borderRadius: 4,
+                                }}
+                            />
+                        </Form.Item>
+                    </div>
                 </div>
                 <div style={{ fontSize: 12, color: '#999', marginTop: 4 }}>
-                    Upload an icon image (max 2MB, JPG/PNG/GIF)
+                    Choose color and upload icon (max 2MB, JPG/PNG/GIF)
                 </div>
             </Form.Item>
 
-            <Form.Item name="error_code_description" label="Error Code Description" rules={[{ required: true, message: 'Error Code Description wajib diisi' }]}>
+            <Form.Item
+                name="error_code_description"
+                label="Error Code Description"
+                rules={[{ required: true, message: 'Error Code Description wajib diisi' }]}
+            >
                 <Input.TextArea disabled={isErrorCodeFormReadOnly} />
             </Form.Item>
 
@@ -295,7 +352,7 @@ const ErrorCodeForm = ({
                     solutionType={solutionTypes[fieldId]}
                     solutionStatus={solutionStatuses[fieldId]}
                     isReadOnly={isErrorCodeFormReadOnly}
-                    fileList={fileList.filter(file => file.solutionId === fieldId)}
+                    fileList={fileList.filter((file) => file.solutionId === fieldId)}
                     onRemove={() => onRemoveSolutionField(fieldId)}
                     onSolutionTypeChange={(type) => onSolutionTypeChange(fieldId, type)}
                     onSolutionStatusChange={(status) => onSolutionStatusChange(fieldId, status)}
@@ -320,21 +377,17 @@ const ErrorCodeForm = ({
 
             {!isErrorCodeFormReadOnly && editingErrorCodeKey && (
                 <Form.Item style={{ textAlign: 'right', marginTop: 16 }}>
-                    <Button onClick={handleResetForm}>
-                        Kembali
-                    </Button>
+                    <Button onClick={handleResetForm}>Kembali</Button>
                 </Form.Item>
             )}
 
             {isErrorCodeFormReadOnly && editingErrorCodeKey && (
                 <Form.Item style={{ textAlign: 'right', marginTop: 16 }}>
-                    <Button onClick={handleResetForm}>
-                        Kembali
-                    </Button>
+                    <Button onClick={handleResetForm}>Kembali</Button>
                 </Form.Item>
             )}
         </>
     );
 };
 
-export default ErrorCodeForm;
\ No newline at end of file
+export default ErrorCodeForm;