diff --git a/src/pages/master/tag/component/DetailTag.jsx b/src/pages/master/tag/component/DetailTag.jsx
index 6ec67fc..96f86f0 100644
--- a/src/pages/master/tag/component/DetailTag.jsx
+++ b/src/pages/master/tag/component/DetailTag.jsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { Modal, Input, Typography, Switch, Button, ConfigProvider, Divider, Select } from 'antd';
+import { Modal, Input, Typography, Switch, Button, ConfigProvider, Select, Checkbox } from 'antd';
 import { NotifAlert, NotifOk } from '../../../../components/Global/ToastNotif';
 import { createTag, updateTag, getAllTag } from '../../../../api/master-tag';
 import { getAllDevice } from '../../../../api/master-device';
@@ -34,6 +34,7 @@ const DetailTag = (props) => {
         lim_high: '',
         lim_high_crash: '',
         device_id: null,
+        description: '',
 
         sub_section_id: null,
     };
@@ -147,10 +148,8 @@ const DetailTag = (props) => {
             payload.unit = formData.unit.trim();
         }
 
-        // Add device_id only if it's selected
-        if (formData.device_id) {
-            payload.device_id = parseInt(formData.device_id);
-        }
+        // Add device_id - backend requires this field even if null
+        payload.device_id = formData.device_id ? parseInt(formData.device_id) : null;
 
         // Add limit fields only if they have values
         if (formData.lim_low_crash !== '' && formData.lim_low_crash !== null) {
@@ -166,10 +165,8 @@ const DetailTag = (props) => {
             payload.lim_high_crash = parseFloat(formData.lim_high_crash);
         }
 
-        // Add sub_section_id only if it's selected
-        if (formData.sub_section_id) {
-            payload.sub_section_id = parseInt(formData.sub_section_id);
-        }
+        // Add sub_section_id - backend requires this field even if null
+        payload.sub_section_id = formData.sub_section_id ? parseInt(formData.sub_section_id) : null;
 
         try {
             const response =
@@ -234,24 +231,24 @@ const DetailTag = (props) => {
         });
     };
 
-    const handleAlarmToggle = (checked) => {
+    const handleAlarmToggle = (e) => {
         setformData({
             ...formData,
-            is_alarm: checked,
+            is_alarm: e.target.checked,
         });
     };
 
-    const handleReportToggle = (checked) => {
+    const handleReportToggle = (e) => {
         setformData({
             ...formData,
-            is_report: checked,
+            is_report: e.target.checked,
         });
     };
 
-    const handleHistoryToggle = (checked) => {
+    const handleHistoryToggle = (e) => {
         setformData({
             ...formData,
-            is_history: checked,
+            is_history: e.target.checked,
         });
     };
 
@@ -336,7 +333,7 @@ const DetailTag = (props) => {
             } Tag`}
             open={props.showModal}
             onCancel={handleCancel}
-            width={800}
+            width={1000}
             footer={[
                 <React.Fragment key="modal-footer">
                     <ConfigProvider
@@ -403,127 +400,66 @@ const DetailTag = (props) => {
                             </div>
                         </div>
                     </div>
-                    {/* Alarm, Report, dan History dalam satu baris */}
+                    {/* Tag Code dan Alarm, Report dan History */}
                     <div style={{ marginBottom: 12 }}>
                         <div
                             style={{
                                 display: 'flex',
                                 justifyContent: 'space-between',
-                                gap: '16px',
+                                gap: '20px',
                             }}
                         >
-                            {/* Alarm Toggle */}
+                            {/* Tag Code - Auto Increment & Read Only */}
                             <div style={{ flex: 1 }}>
-                                <div>
-                                    <Text strong>Alarm</Text>
-                                    <Text style={{ color: 'red' }}> *</Text>
-                                </div>
-                                <div
+                                <Text strong>Tag Code</Text>
+                                <Input
+                                    name="tag_code"
+                                    value={formData.tag_code || ''}
+                                    placeholder={'Tag Code Auto Fill'}
+                                    disabled
                                     style={{
-                                        display: 'flex',
-                                        alignItems: 'center',
-                                        marginTop: '8px',
+                                        backgroundColor: '#f5f5f5',
+                                        cursor: 'not-allowed',
+                                        color: formData.tag_code ? '#000000' : '#bfbfbf',
                                     }}
-                                >
-                                    <div style={{ marginRight: '8px' }}>
-                                        <Switch
-                                            disabled={props.readOnly}
-                                            style={{
-                                                backgroundColor:
-                                                    formData.is_alarm === true
-                                                        ? '#23A55A'
-                                                        : '#bfbfbf',
-                                            }}
-                                            checked={formData.is_alarm === true}
-                                            onChange={handleAlarmToggle}
-                                        />
-                                    </div>
-                                    <div>
-                                        <Text>{formData.is_alarm === true ? 'Yes' : 'No'}</Text>
-                                    </div>
+                                />
+                            </div>
+                            {/* Alarm Checkbox */}
+                            <div style={{ flex: 1 }}>
+                                <Text strong>Alarm</Text>
+                                <div style={{ marginTop: '8px' }}>
+                                    <Checkbox
+                                        disabled={props.readOnly}
+                                        checked={formData.is_alarm === true}
+                                        onChange={handleAlarmToggle}
+                                    />
                                 </div>
                             </div>
-                            {/* Report Toggle */}
+                            {/* Report Checkbox */}
                             <div style={{ flex: 1 }}>
-                                <div>
-                                    <Text strong>Report</Text>
-                                    <Text style={{ color: 'red' }}> *</Text>
-                                </div>
-                                <div
-                                    style={{
-                                        display: 'flex',
-                                        alignItems: 'center',
-                                        marginTop: '8px',
-                                    }}
-                                >
-                                    <div style={{ marginRight: '8px' }}>
-                                        <Switch
-                                            disabled={props.readOnly}
-                                            style={{
-                                                backgroundColor:
-                                                    formData.is_report === true
-                                                        ? '#23A55A'
-                                                        : '#bfbfbf',
-                                            }}
-                                            checked={formData.is_report === true}
-                                            onChange={handleReportToggle}
-                                        />
-                                    </div>
-                                    <div>
-                                        <Text>{formData.is_report === true ? 'Yes' : 'No'}</Text>
-                                    </div>
+                                <Text strong>Report</Text>
+                                <div style={{ marginTop: '8px' }}>
+                                    <Checkbox
+                                        disabled={props.readOnly}
+                                        checked={formData.is_report === true}
+                                        onChange={handleReportToggle}
+                                    />
                                 </div>
                             </div>
-                            {/* History Toggle */}
+                            {/* History Checkbox */}
                             <div style={{ flex: 1 }}>
+                                <Text strong>History</Text>
                                 <div>
-                                    <Text strong>History</Text>
-                                    <Text style={{ color: 'red' }}> *</Text>
-                                </div>
-                                <div
-                                    style={{
-                                        display: 'flex',
-                                        alignItems: 'center',
-                                        marginTop: '8px',
-                                    }}
-                                >
-                                    <div style={{ marginRight: '8px' }}>
-                                        <Switch
-                                            disabled={props.readOnly}
-                                            style={{
-                                                backgroundColor:
-                                                    formData.is_history === true
-                                                        ? '#23A55A'
-                                                        : '#bfbfbf',
-                                            }}
-                                            checked={formData.is_history === true}
-                                            onChange={handleHistoryToggle}
-                                        />
-                                    </div>
-                                    <div>
-                                        <Text>{formData.is_history === true ? 'Yes' : 'No'}</Text>
-                                    </div>
+                                    <Checkbox
+                                        disabled={props.readOnly}
+                                        checked={formData.is_history === true}
+                                        onChange={handleHistoryToggle}
+                                    />
                                 </div>
                             </div>
                         </div>
                     </div>
-                    <Divider style={{ margin: '12px 0' }} />
 
-                    {/* Tag Code - Auto Increment & Read Only */}
-                    <div style={{ marginBottom: 12 }}>
-                        <Text strong>Tag Code</Text>
-                        <Input
-                            name="tag_code"
-                            value={formData.tag_code || ''}
-                            placeholder={'Tag Code Auto Fill'}
-                            disabled
-                            style={{
-                                backgroundColor: '#f5f5f5',
-                                cursor: 'not-allowed',
-                                color: formData.tag_code ? '#000000' : '#bfbfbf',
-                            }}
-                        />
-                    </div>
                     {/* Tag Number dan Tag Name dalam satu baris */}
                     <div style={{ marginBottom: 12 }}>
                         <div
@@ -685,13 +621,13 @@ const DetailTag = (props) => {
                             </div>
                         </div>
                     </div>
-                    {/* Limit Low Crash dan Limit Low dalam satu baris */}
+                    {/* Semua Limit dalam satu baris */}
                     <div style={{ marginBottom: 12 }}>
                         <div
                             style={{
                                 display: 'flex',
                                 justifyContent: 'space-between',
-                                gap: '16px',
+                                gap: '12px',
                             }}
                         >
                             {/* Limit Low Crash */}
@@ -720,17 +656,6 @@ const DetailTag = (props) => {
                                     step="any"
                                 />
                             </div>
-                        </div>
-                    </div>
-                    {/* Limit High dan Limit High Crash dalam satu baris */}
-                    <div style={{ marginBottom: 12 }}>
-                        <div
-                            style={{
-                                display: 'flex',
-                                justifyContent: 'space-between',
-                                gap: '16px',
-                            }}
-                        >
                             {/* Limit High */}
                             <div style={{ flex: 1 }}>
                                 <Text strong>Limit High</Text>
@@ -759,6 +684,18 @@ const DetailTag = (props) => {
                             </div>
                         </div>
                     </div>
+                    {/* Description */}
+                    <div style={{ marginBottom: 12 }}>
+                        <Text strong>Description</Text>
+                        <Input.TextArea
+                            name="description"
+                            value={formData.description}
+                            onChange={handleInputChange}
+                            placeholder="Enter Description (Optional)"
+                            readOnly={props.readOnly}
+                            rows={4}
+                        />
+                    </div>
                 </div>
             )}
         </Modal>
diff --git a/src/pages/master/tag/component/ListTag.jsx b/src/pages/master/tag/component/ListTag.jsx
index 2451e71..c9c41ed 100644
--- a/src/pages/master/tag/component/ListTag.jsx
+++ b/src/pages/master/tag/component/ListTag.jsx
@@ -44,12 +44,14 @@ const columns = (showPreviewModal, showEditModal, showDeleteDialog) => [
         dataIndex: 'data_type',
         key: 'data_type',
         width: '10%',
+        render: (text) => text || '-',
     },
     {
         title: 'Unit',
         dataIndex: 'unit',
         key: 'unit',
         width: '8%',
+        render: (text) => text || '-',
     },
     {
         title: 'Sub Section',
@@ -63,6 +65,7 @@ const columns = (showPreviewModal, showEditModal, showDeleteDialog) => [
         dataIndex: 'device_name',
         key: 'device_name',
         width: '12%',
+        render: (text) => text || '-',
     },
     {
         title: 'Status',