diff --git a/src/pages/master/plantSection/IndexPlantSection.jsx b/src/pages/master/plantSection/IndexPlantSection.jsx
index 73671bb..8f8520c 100644
--- a/src/pages/master/plantSection/IndexPlantSection.jsx
+++ b/src/pages/master/plantSection/IndexPlantSection.jsx
@@ -6,108 +6,29 @@ import { Form, Typography } from 'antd';
 import ListPlantSection from './component/ListPlantSection';
 import DetailPlantSection from './component/DetailPlantSection';
 
-import { NotifConfirmDialog, NotifAlert } from '../../../components/Global/ToastNotif';
+import { NotifConfirmDialog, NotifAlert, NotifOk } from '../../../components/Global/ToastNotif';
+import { getAllPlantSection, createPlantSection, updatePlantSection, deletePlantSection } from '../../../api/master-plant-section';
 
 const { Text } = Typography;
 
-// Mock Data
-const initialData = [
-    {
-        key: '1',
-        kode_plant: 'PL-001',
-        nama_plant: 'Seksi Produksi A',
-        lokasi_plant: 'Gedung 1, Lantai 2',
-        deskripsi: 'Seksi yang bertanggung jawab untuk lini produksi A.',
-    },
-    {
-        key: '2',
-        kode_plant: 'PL-002',
-        nama_plant: 'Seksi Pengepakan',
-        lokasi_plant: 'Gedung 1, Lantai 1',
-        deskripsi: 'Area pengepakan dan persiapan pengiriman.',
-    },
-    {
-        key: '3',
-        kode_plant: 'PL-003',
-        nama_plant: 'Gudang Bahan Baku',
-        lokasi_plant: 'Gudang A',
-        deskripsi: 'Penyimpanan bahan baku utama.',
-    },
-    {
-        key: '4',
-        kode_plant: 'PL-004',
-        nama_plant: 'Seksi Kualitas',
-        lokasi_plant: 'Laboratorium QC',
-        deskripsi: 'Pemeriksaan dan kontrol kualitas produk.',
-    },
-    {
-        key: '5',
-        kode_plant: 'PL-005',
-        nama_plant: 'Seksi Perawatan',
-        lokasi_plant: 'Workshop',
-        deskripsi: 'Perawatan dan perbaikan mesin produksi.',
-    },
-    {
-        key: '6',
-        kode_plant: 'PL-006',
-        nama_plant: 'Gudang Jadi',
-        lokasi_plant: 'Gudang B',
-        deskripsi: 'Penyimpanan produk yang siap dikirim.',
-    },
-];
-
 const IndexPlantSection = memo(function IndexPlantSection() {
     const navigate = useNavigate();
     const { setBreadcrumbItems } = useBreadcrumb();
     const [form] = Form.useForm();
 
-    const [data, setData] = useState(initialData);
     const [actionMode, setActionMode] = useState('list');
     const [editingKey, setEditingKey] = useState('');
+    const [editingRecord, setEditingRecord] = useState(null);
     const [isModalVisible, setIsModalVisible] = useState(false);
     const [readOnly, setReadOnly] = useState(false);
-
-    // Mock API function
-    const getAllPlantSection = async (params) => {
-        const { page = 1, limit = 10, search = '' } = Object.fromEntries(params.entries());
-        
-        let filteredData = data;
-        if (search) {
-            filteredData = data.filter(item => 
-                item.nama_plant.toLowerCase().includes(search.toLowerCase()) ||
-                item.kode_plant.toLowerCase().includes(search.toLowerCase()) ||
-                item.lokasi_plant.toLowerCase().includes(search.toLowerCase())
-            );
-        }
-
-        const start = (page - 1) * limit;
-        const end = start + limit;
-        const paginatedData = filteredData.slice(start, end);
-
-        return new Promise(resolve => {
-            setTimeout(() => {
-                resolve({
-                    status: 200,
-                    data: {
-                        data: paginatedData,
-                        total: filteredData.length,
-                        paging: {
-                            page: parseInt(page),
-                            limit: parseInt(limit),
-                            total: filteredData.length,
-                        },
-                    },
-                });
-            }, 500);
-        });
-    };
+    const [refreshList, setRefreshList] = useState(false);
 
     useEffect(() => {
         const token = localStorage.getItem('token');
         if (token) {
             setBreadcrumbItems([
                 { title: <Text strong style={{ fontSize: '14px' }}>• Master</Text> },
-                { title: <Text strong style={{ fontSize: '14px' }}>Plant Section</Text> }
+                { title: <Text strong style={{ fontSize: '14px' }}>Plant Sub Section</Text> }
             ]);
         } else {
             navigate('/signin');
@@ -126,51 +47,79 @@ const IndexPlantSection = memo(function IndexPlantSection() {
     const handleCancel = () => {
         setActionMode('list');
         setEditingKey('');
+        setEditingRecord(null);
         form.resetFields();
     };
 
-    const handleOk = () => {
+    const handleOk = async () => {
         if (readOnly) {
             handleCancel();
             return;
         }
-        form.validateFields()
-            .then((values) => {
-                let newData = [...data];
-                if (editingKey) {
-                    // Editing existing data
-                    const index = newData.findIndex((item) => editingKey === item.key);
-                    if (index > -1) {
-                        const item = newData[index];
-                        newData.splice(index, 1, { ...item, ...values });
-                    }
+
+        try {
+            const values = await form.validateFields();
+
+            if (editingKey && editingRecord) {
+                // Update existing plant section
+                const response = await updatePlantSection(editingRecord.sub_section_id, values);
+
+                if (response.statusCode === 200) {
+                    NotifOk({
+                        icon: 'success',
+                        title: 'Berhasil',
+                        message: response.message || 'Data Sub Section berhasil diupdate.',
+                    });
+                    setRefreshList(!refreshList);
+                    handleCancel();
                 } else {
-                    // Adding new data
-                    const newKey = (Math.max(...data.map(item => parseInt(item.key))) + 1).toString();
-                    newData = [{ key: newKey, ...values }, ...newData];
+                    NotifAlert({
+                        icon: 'error',
+                        title: 'Gagal',
+                        message: response.message || 'Gagal mengupdate data Sub Section.',
+                    });
                 }
-                setData(newData);
-                NotifAlert({
-                    icon: 'success',
-                    title: 'Berhasil',
-                    message: 'Data Plant Section berhasil disimpan.',
-                });
-                handleCancel();
-            })
-            .catch((info) => {
-                console.log('Validate Failed:', info);
+            } else {
+                // Create new plant section
+                const response = await createPlantSection(values);
+
+                if (response.statusCode === 200 || response.statusCode === 201) {
+                    NotifOk({
+                        icon: 'success',
+                        title: 'Berhasil',
+                        message: response.message || 'Data Sub Section berhasil ditambahkan.',
+                    });
+                    setRefreshList(!refreshList);
+                    handleCancel();
+                } else {
+                    NotifAlert({
+                        icon: 'error',
+                        title: 'Gagal',
+                        message: response.message || 'Gagal menambahkan data Sub Section.',
+                    });
+                }
+            }
+        } catch (error) {
+            console.error('Validate Failed:', error);
+            NotifAlert({
+                icon: 'error',
+                title: 'Validasi Gagal',
+                message: 'Mohon lengkapi semua field yang wajib diisi.',
             });
+        }
     };
 
     const handleEdit = (record) => {
         form.setFieldsValue(record);
-        setEditingKey(record.key);
+        setEditingKey(record.sub_section_id || record.key);
+        setEditingRecord(record);
         setActionMode('edit');
     };
 
     const handlePreview = (record) => {
         form.setFieldsValue(record);
-        setEditingKey(record.key);
+        setEditingKey(record.sub_section_id || record.key);
+        setEditingRecord(record);
         setActionMode('preview');
     };
 
@@ -178,15 +127,33 @@ const IndexPlantSection = memo(function IndexPlantSection() {
         NotifConfirmDialog({
             icon: 'question',
             title: 'Konfirmasi',
-            message: `Apakah anda yakin ingin menghapus plant section "${record.nama_plant}"?`,
-            onConfirm: () => {
-                const newData = data.filter((item) => item.key !== record.key);
-                setData(newData);
-                NotifAlert({
-                    icon: 'success',
-                    title: 'Berhasil',
-                    message: `Plant section "${record.nama_plant}" berhasil dihapus.`,
-                });
+            message: `Apakah anda yakin ingin menghapus sub section "${record.sub_section_name}"?`,
+            onConfirm: async () => {
+                try {
+                    const response = await deletePlantSection(record.sub_section_id);
+
+                    if (response.statusCode === 200) {
+                        NotifOk({
+                            icon: 'success',
+                            title: 'Berhasil',
+                            message: response.message || `Sub section "${record.sub_section_name}" berhasil dihapus.`,
+                        });
+                        setRefreshList(!refreshList);
+                    } else {
+                        NotifAlert({
+                            icon: 'error',
+                            title: 'Gagal',
+                            message: response.message || 'Gagal menghapus data Sub Section.',
+                        });
+                    }
+                } catch (error) {
+                    console.error('Delete error:', error);
+                    NotifAlert({
+                        icon: 'error',
+                        title: 'Gagal',
+                        message: 'Terjadi kesalahan saat menghapus data.',
+                    });
+                }
             },
         });
     };
@@ -199,6 +166,7 @@ const IndexPlantSection = memo(function IndexPlantSection() {
                 handleDelete={handleDelete}
                 handlePreview={handlePreview}
                 getAllPlantSection={getAllPlantSection}
+                refreshList={refreshList}
             />
             <DetailPlantSection
                 visible={isModalVisible}
diff --git a/src/pages/master/plantSection/component/DetailPlantSection.jsx b/src/pages/master/plantSection/component/DetailPlantSection.jsx
index cef0416..3a3e1a6 100644
--- a/src/pages/master/plantSection/component/DetailPlantSection.jsx
+++ b/src/pages/master/plantSection/component/DetailPlantSection.jsx
@@ -4,7 +4,11 @@ import { Modal, Form, Input, ConfigProvider, Button, Typography } from 'antd';
 const { Text } = Typography;
 
 const DetailPlantSection = ({ visible, onCancel, onOk, form, editingKey, readOnly }) => {
-    const modalTitle = readOnly ? 'Preview Plant Section' : (editingKey ? 'Edit Plant Section' : 'Tambah Plant Section');
+    const modalTitle = readOnly
+        ? 'Preview Sub Section'
+        : editingKey
+        ? 'Edit Sub Section'
+        : 'Tambah Sub Section';
 
     return (
         <Modal
@@ -45,11 +49,7 @@ const DetailPlantSection = ({ visible, onCancel, onOk, form, editingKey, readOnl
                             },
                         }}
                     >
-                        {!readOnly && (
-                            <Button onClick={onOk}>
-                                Simpan
-                            </Button>
-                        )}
+                        {!readOnly && <Button onClick={onOk}>Simpan</Button>}
                     </ConfigProvider>
                 </React.Fragment>,
             ]}
@@ -57,11 +57,11 @@ const DetailPlantSection = ({ visible, onCancel, onOk, form, editingKey, readOnl
         >
             <Form form={form} layout="vertical" name="form_in_modal">
                 <div style={{ marginBottom: 12 }}>
-                    <Text strong>Kode Plant</Text>
+                    <Text strong>Nama Sub Section</Text>
                     <Text style={{ color: 'red' }}> *</Text>
                     <Form.Item
-                        name="kode_plant"
-                        rules={[{ required: true, message: 'Silakan masukkan kode plant!' }]}
+                        name="sub_section_name"
+                        rules={[{ required: true, message: 'Silakan masukkan nama sub section!' }]}
                         style={{ marginBottom: 0 }}
                     >
                         <Input readOnly={readOnly} placeholder="Masukkan Kode Plant" />
@@ -91,11 +91,12 @@ const DetailPlantSection = ({ visible, onCancel, onOk, form, editingKey, readOnl
                 </div>
                 <div style={{ marginBottom: 12 }}>
                     <Text strong>Deskripsi</Text>
-                    <Form.Item
-                        name="deskripsi"
-                        style={{ marginBottom: 0 }}
-                    >
-                        <Input.TextArea readOnly={readOnly} placeholder="Masukkan Deskripsi (Opsional)" rows={4} />
+                    <Form.Item name="deskripsi" style={{ marginBottom: 0 }}>
+                        <Input.TextArea
+                            readOnly={readOnly}
+                            placeholder="Masukkan Deskripsi (Opsional)"
+                            rows={4}
+                        />
                     </Form.Item>
                 </div>
             </Form>
@@ -103,4 +104,4 @@ const DetailPlantSection = ({ visible, onCancel, onOk, form, editingKey, readOnl
     );
 };
 
-export default DetailPlantSection;
\ No newline at end of file
+export default DetailPlantSection;
diff --git a/src/pages/master/plantSection/component/ListPlantSection.jsx b/src/pages/master/plantSection/component/ListPlantSection.jsx
index f10810a..743b737 100644
--- a/src/pages/master/plantSection/component/ListPlantSection.jsx
+++ b/src/pages/master/plantSection/component/ListPlantSection.jsx
@@ -1,27 +1,39 @@
 import React, { useState } from 'react';
 import { Button, Col, Row, Space, Input, ConfigProvider, Card } from 'antd';
-import { PlusOutlined, EditOutlined, DeleteOutlined, SearchOutlined, EyeOutlined } from '@ant-design/icons';
+import {
+    PlusOutlined,
+    EditOutlined,
+    DeleteOutlined,
+    SearchOutlined,
+    EyeOutlined,
+} from '@ant-design/icons';
 import TableList from '../../../../components/Global/TableList';
 
-const ListPlantSection = ({ 
-    setActionMode, 
-    handleEdit, 
+const ListPlantSection = ({
+    setActionMode,
+    handleEdit,
     handleDelete,
     handlePreview,
-    getAllPlantSection
+    getAllPlantSection,
+    refreshList,
 }) => {
     const [searchValue, setSearchValue] = useState('');
-    const [formDataFilter, setFormDataFilter] = useState({ search: '' });
+    const [formDataFilter, setFormDataFilter] = useState({ criteria: '' });
     const [trigerFilter, setTrigerFilter] = useState(false);
 
     const columns = [
         {
             title: 'No',
-            dataIndex: 'key',
-            key: 'key',
-            width: '5%',
+            dataIndex: 'sub_section_id',
+            key: 'sub_section_id',
+            width: '10%',
             render: (text, record, index) => index + 1,
         },
+        {
+            title: 'Nama Sub Section',
+            dataIndex: 'sub_section_name',
+            key: 'sub_section_name',
+        },
         {
             title: 'Kode Plant',
             dataIndex: 'kode_plant',
@@ -45,24 +57,41 @@ const ListPlantSection = ({
         {
             title: 'Aksi',
             key: 'action',
+            width: '15%',
             render: (_, record) => (
                 <Space size="middle">
-                    <Button type="text" style={{ borderColor: '#1890ff' }} icon={<EyeOutlined style={{ color: '#1890ff' }} />} onClick={() => handlePreview(record)} />
-                    <Button type="text" style={{ borderColor: '#faad14' }} icon={<EditOutlined style={{ color: '#faad14' }} />} onClick={() => handleEdit(record)} />
-                    <Button type="text" danger style={{ borderColor: 'red' }} icon={<DeleteOutlined />} onClick={() => handleDelete(record)} />
+                    <Button
+                        type="text"
+                        style={{ borderColor: '#1890ff' }}
+                        icon={<EyeOutlined style={{ color: '#1890ff' }} />}
+                        onClick={() => handlePreview(record)}
+                    />
+                    <Button
+                        type="text"
+                        style={{ borderColor: '#faad14' }}
+                        icon={<EditOutlined style={{ color: '#faad14' }} />}
+                        onClick={() => handleEdit(record)}
+                    />
+                    <Button
+                        type="text"
+                        danger
+                        style={{ borderColor: 'red' }}
+                        icon={<DeleteOutlined />}
+                        onClick={() => handleDelete(record)}
+                    />
                 </Space>
             ),
         },
     ];
 
     const handleSearch = () => {
-        setFormDataFilter({ search: searchValue });
+        setFormDataFilter({ criteria: searchValue });
         setTrigerFilter((prev) => !prev);
     };
 
     const handleSearchClear = () => {
         setSearchValue('');
-        setFormDataFilter({ search: '' });
+        setFormDataFilter({ criteria: '' });
         setTrigerFilter((prev) => !prev);
     };
 
@@ -71,7 +100,7 @@ const ListPlantSection = ({
             <Row justify="space-between" align="middle" gutter={[8, 8]}>
                 <Col xs={24} sm={24} md={12} lg={12}>
                     <Input.Search
-                        placeholder="Cari berdasarkan kode, nama, atau lokasi..."
+                        placeholder="Cari berdasarkan nama sub section..."
                         value={searchValue}
                         onChange={(e) => {
                             const value = e.target.value;
@@ -130,10 +159,11 @@ const ListPlantSection = ({
                     queryParams={formDataFilter}
                     columns={columns}
                     triger={trigerFilter}
+                    refreshList={refreshList}
                 />
             </Col>
         </Card>
     );
 };
 
-export default ListPlantSection;
\ No newline at end of file
+export default ListPlantSection;