diff --git a/src/views/SimproV2/Divisi/DialogForm.js b/src/views/SimproV2/Divisi/DialogForm.js
index 3c59e8a..547b0c6 100644
--- a/src/views/SimproV2/Divisi/DialogForm.js
+++ b/src/views/SimproV2/Divisi/DialogForm.js
@@ -30,10 +30,18 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdi
       setName(dataEdit.name)
       setParent(dataEdit.parent)
       setColor(dataEdit.color)
+      setParent(dataEdit.parent);
+      setSelectedCompany(dataEdit.company_id);
+    } else if (typeDialog === "addChild") {
+      setParent(dataEdit.id);
+      setColor(dataEdit.color)
       setSelectedCompany(dataEdit.company_id);
     } else {
       setId(0)
       setColor('')
+      setDescription('')
+      setParent(null)
+      setSelectedCompany(null)
     }
   }, [dataEdit, openDialog])
 
@@ -43,15 +51,16 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdi
       return true;
     }
   }
+
   const handleSave = () => {
     let data = '';
     const err = validation();
 
     if (!err) {
+      if (role_name === 'Super Admin') {
+        company_id = selectedCompany
+      }
       if (typeDialog === "Save") {
-        if (role_name === 'Super Admin') {
-          company_id = selectedCompany
-        }
         data = {
           name,
           description,
@@ -60,10 +69,18 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdi
           company_id: company_id
         }
         closeDialog('save', data);
-      } else {
-        if (role_name === 'Super Admin') {
-          company_id = selectedCompany
-        }
+      } else if (typeDialog === "addChild") {
+
+        data = {
+          parent: parent,
+          name: name,
+          description,
+          color,
+          company_id: company_id
+        };
+        closeDialog('save', data);
+      } else if (typeDialog === "Edit") {
+
         data = {
           id,
           name,
@@ -82,6 +99,7 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdi
       setSelectedCompany(null)
     }
   }
+
   const handleCancel = () => {
     closeDialog('cancel', 'none')
     setId(0)
@@ -125,7 +143,7 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdi
                 filterOption={(input, option) => option.children.toLowerCase().includes(input.toLowerCase())}
               >
                 {dataDivisions.map((res, idx) => (
-                  <Option key={res['id']} value={res['id']}>{res['displayName']}</Option>
+                  <Option key={res['id']} value={res['id']}>{res['name']}</Option>
                 ))}
               </Select>
             </FormGroup>
diff --git a/src/views/SimproV2/Divisi/index.js b/src/views/SimproV2/Divisi/index.js
index 382c1a3..68b1825 100644
--- a/src/views/SimproV2/Divisi/index.js
+++ b/src/views/SimproV2/Divisi/index.js
@@ -1,12 +1,12 @@
 import * as XLSX from 'xlsx';
 import DialogForm from './DialogForm';
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useMemo } from 'react';
 import SweetAlert from 'react-bootstrap-sweetalert';
 import axios from "../../../const/interceptorApi"
-import { Card, CardBody, CardHeader, Col, Row, Input, Table } from 'reactstrap';
+import { Card, CardBody, CardHeader, Col, Row, Input } from 'reactstrap';
 import { DIVISI_LIST, DIVISI_ADD, DIVISI_EDIT, DIVISI_DELETE, DIVISI_SEARCH, COMPANY_MANAGEMENT_LIST } from '../../../const/ApiConst';
 import { NotificationContainer, NotificationManager } from 'react-notifications';
-import { Pagination, Button, Tooltip } from 'antd';
+import { Pagination, Button, Tooltip, Table, Spin } from 'antd';
 import { useTranslation } from 'react-i18next';
 
 
@@ -48,6 +48,7 @@ const ProjectType = ({ params, ...props }) => {
 	const [typeDialog, setTypeDialog] = useState('Save')
 	const [dataDivisions, setDataDivisions] = useState([])
 	const [listCompany, setListCompany] = useState([])
+	const [loading, setLoading] = useState(true)
 	const { t } = useTranslation()
 	const column = [
 		role_name === 'Super Admin' ? { name: t('company') } : null,
@@ -56,7 +57,7 @@ const ProjectType = ({ params, ...props }) => {
 		{ name: t('color') },
 	].filter(column => column && column.name);
 	useEffect(() => {
-		getDataProjectType();
+		getDataDivisi();
 	}, [currentPage, rowsPerPage, search])
 
 	useEffect(() => {
@@ -93,20 +94,19 @@ const ProjectType = ({ params, ...props }) => {
 					}
 				]
 			},
-			columns: [],
+			"columns": [],
 			"orders": {
 				"ascending": true,
 				"columns": [
-					'name'
+					'id'
 				]
 			},
 			"paging": {
-				"length": 0,
-				"start": -1
+				"length": -1,
+				"start": 0
 			},
 			'joins': []
 		}
-
 		if (role_name !== "Super Admin") {
 			payload.columns.push(
 				{ "name": "company_id", "logic_operator": "=", "value": company_id, "operator": "AND" },
@@ -122,6 +122,7 @@ const ProjectType = ({ params, ...props }) => {
 				{ name: "company_name", logic_operator: "~*", value: search, table_name: "m_company" }
 			)
 		}
+
 		const listDivions = await axios
 			.post(DIVISI_SEARCH, payload, HEADER)
 			.then(res => res)
@@ -139,7 +140,7 @@ const ProjectType = ({ params, ...props }) => {
 			NotificationManager.error('Gagal Mengambil Data!!', 'Failed');
 		}
 	}
-	const getDataProjectType = async () => {
+	const getDataDivisi = async () => {
 		let start = 0;
 		if (currentPage !== 1 && currentPage > 1) {
 			start = currentPage * rowsPerPage - rowsPerPage;
@@ -156,11 +157,11 @@ const ProjectType = ({ params, ...props }) => {
 					}
 				]
 			},
-			columns: [],
+			"columns": [],
 			"orders": {
 				"ascending": true,
 				"columns": [
-					'name'
+					'id'
 				]
 			},
 			"paging": {
@@ -169,7 +170,6 @@ const ProjectType = ({ params, ...props }) => {
 			},
 			'joins': []
 		}
-
 		if (role_name !== "Super Admin") {
 			payload.columns.push(
 				{ "name": "company_id", "logic_operator": "=", "value": company_id, "operator": "AND" },
@@ -185,6 +185,7 @@ const ProjectType = ({ params, ...props }) => {
 				{ name: "company_name", logic_operator: "~*", value: search, table_name: "m_company" }
 			)
 		}
+
 		const result = await axios
 			.post(DIVISI_SEARCH, payload, HEADER)
 			.then(res => res)
@@ -194,8 +195,10 @@ const ProjectType = ({ params, ...props }) => {
 			let dataRes = result.data.data || [];
 			setDatatable(dataRes);
 			setTotalPage(result.data.totalRecord);
+			setLoading(false)
 		} else {
 			NotificationManager.error('Gagal Mengambil Data!!', 'Failed');
+			setLoading(false)
 		}
 	}
 	const handleExportExcel = async () => {
@@ -315,7 +318,7 @@ const ProjectType = ({ params, ...props }) => {
 			.then(res => res)
 			.catch((error) => error.response);
 		if (result && result.data && result.data.code === 200) {
-			getDataProjectType()
+			getDataDivisi()
 			NotificationManager.success(`Data berhasil ditambahkan`, 'Success!!');
 		} else {
 			NotificationManager.error(`Data gagal ditambahkan`, 'Failed!!');
@@ -329,7 +332,7 @@ const ProjectType = ({ params, ...props }) => {
 			.then(res => res)
 			.catch((error) => error.response);
 		if (result && result.data && result.data.code === 200) {
-			getDataProjectType();
+			getDataDivisi();
 			NotificationManager.success(`Data berhasil diubah`, 'Success!!');
 		} else {
 			NotificationManager.error(`Data gagal diubah`, `Failed!!`);
@@ -347,7 +350,7 @@ const ProjectType = ({ params, ...props }) => {
 			.catch((error) => error.response);
 
 		if (result && result.data && result.data.code === 200) {
-			getDataProjectType()
+			getDataDivisi()
 			setIdDelete(0)
 			setAlertDelete(false)
 			NotificationManager.success(`Data berhasil dihapus!`, 'Success!!');
@@ -381,6 +384,95 @@ const ProjectType = ({ params, ...props }) => {
 		}
 	}
 
+
+	const handleAddChild = (data) => {
+		setDataEdit(data)
+		handleOpenDialog('addChild');
+	}
+
+	const renderTable = useMemo(() => {
+		const columns = [
+			{
+				title: 'Action',
+				dataIndex: '',
+				key: 'id',
+				className: "nowrap",
+				render: (text, record) =>
+					<>
+						<Tooltip title="Hapus">
+							<i id="TooltipDelete" className="fa fa-trash" style={{ color: 'red', marginRight: 10, cursor: "pointer" }} onClick={() => handleDelete(text.id)}></i>
+						</Tooltip>
+						<Tooltip title="Add">
+							<i id="TooltipEdit" className="cil-level-down fa-sm" style={{ color: 'blue', marginRight: 10, cursor: "pointer" }} onClick={() => handleAddChild(text)}></i>
+						</Tooltip>
+						<Tooltip title="Edit">
+							<i id="TooltipEdit" className="fa fa-edit" style={{ color: 'green', cursor: "pointer" }} onClick={() => handleEdit(text)}></i>
+						</Tooltip>
+					</>
+				,
+			},
+			...(role_name === 'Super Admin' ? [
+				{
+					title: t('company'),
+					dataIndex: "join_first_company_name",
+					key: "join_first_company_name",
+					render: (text, record) => (
+						<span>{record.join_first_company_name}</span>
+					)
+				}] : []),
+			{ title: 'Nama', dataIndex: 'name', key: 'name' },
+			{ title: 'Nama', dataIndex: 'name', key: 'name' },
+			{ title: 'Deskripsi', dataIndex: 'description', key: 'description' },
+			{
+				title: 'Color',
+				dataIndex: 'color',
+				key: 'color',
+				render: (text) => {
+					if (text != null) {
+						return (
+							<Tooltip title={text}>
+								<span className="fa fa-square" style={{ color: text }}></span>
+							</Tooltip>
+						);
+					} else {
+						return (
+							<small style={{ color: "grey", fontStyle: "italic" }}>No color set</small>
+						);
+					}
+				}
+			}
+		];
+
+		return (
+
+			<Spin tip="Loading..." spinning={loading}>
+				<Table
+					size="small"
+					columns={columns}
+					expandable={{
+						expandIcon: ({ expanded, onExpand, record }) =>
+							record.children && record.children.length > 0 ?
+								expanded ? (
+									<Tooltip title="Add">
+										<i id="TooltipEdit" className="fa fa-chevron-down fa-sm" style={{ color: 'grey', marginRight: 10, cursor: "pointer" }} onClick={e => onExpand(record, e)}></i>
+									</Tooltip>
+								) : (
+									<i id="TooltipEdit" className="fa fa-chevron-right fa-sm" style={{ color: 'grey', marginRight: 10, cursor: "pointer" }} onClick={e => onExpand(record, e)}></i>
+
+								)
+								: (
+									<i id="TooltipEdit" className="fa fa-chevron-right fa-sm" style={{ color: 'white', marginRight: 10, cursor: "pointer" }} onClick={e => onExpand(record, e)}></i>
+								)
+
+					}}
+					dataSource={dataTable}
+					pagination={false}
+				>
+				</Table>
+			</Spin>
+		)
+	}, [dataTable, loading])
+
 	return (
 		<div>
 			<NotificationContainer />
@@ -428,51 +520,17 @@ const ProjectType = ({ params, ...props }) => {
 					</Row>
 				</CardHeader>
 				<CardBody>
-					<Table responsive striped hover>
-						<thead>
-							<tr>
-								<th>Aksi</th>
-								{column.map((i, index) => {
-									return (
-										<th key={index} scope="row">{i.name}</th>
-									)
-								})}
-							</tr>
-						</thead>
-						<tbody>
-							{dataNotAvailable()}
-							{dataTable.map((n, index) => {
-								return (
-									<tr key={n.id}>
-										<td className='nowrap'>
-											<Tooltip title={t('delete')}>
-												<i id="TooltipDelete" className="fa fa-trash" style={{ color: 'red', marginRight: 10, cursor: "pointer" }} onClick={() => handleDelete(n.id)}></i>
-											</Tooltip>
-											<Tooltip title={t('edit')}>
-												<i id="TooltipEdit" className="fa fa-edit" style={{ color: 'green', cursor: "pointer" }} onClick={() => handleEdit(n)}></i>
-											</Tooltip>
-										</td>
-										{role_name === 'Super Admin' &&
-											(
-												<td>{n.join_first_company_name}</td>
-											)
-										}
-										<td>{n.name}</td>
-										<td>{n.description ?? '-'}</td>
-										{n.color != null ? (
-											<td>
-												<Tooltip title={n.color}>
-													<span className="fa fa-square" style={{ color: n.color }}></span>
-												</Tooltip>
-											</td>
-										) : (
-											<td><small style={{ color: "grey", fontStyle: "italic" }}>No color set</small></td>
-										)}
-									</tr>
-								)
-							})}
-						</tbody>
-					</Table>
+					{renderTable}
+					<Pagination
+						style={{ marginTop: "25px" }}
+						showSizeChanger
+						onShowSizeChange={onShowSizeChange}
+						onChange={onPagination}
+						current={currentPage}
+						pageSize={rowsPerPage}
+						total={totalPage}
+						pageSizeOptions={["10", "15", "20", "25", "30", "35", "40"]}
+					/>
 				</CardBody>
 			</Card>
 		</div>