diff --git a/src/component/ProductComponent.js b/src/component/ProductComponent.js
index 53da930..40a6a34 100644
--- a/src/component/ProductComponent.js
+++ b/src/component/ProductComponent.js
@@ -1,33 +1,18 @@
-import React, { useContext, useState } from "react";
-import {
-  Button,
-  Col,
-  Form,
-  Input,
-  message,
-  Modal,
-  Row,
-  Select,
-  Table,
-  Divider,
-  Tag,
-  Typography,
-  List,
-} from "antd";
-import { observer } from "mobx-react-lite";
-import { ExclamationCircleOutlined } from "@ant-design/icons";
-import { useHistory } from "react-router-dom";
-import { capitalize } from "lodash";
-import { useStore } from "../utils/useStore";
-import { LINKS } from "../routes/app";
-import { ModalLoaderContext } from "../utils/modal";
+import React, {useContext, useState} from "react";
+import {Button, Col, Divider, Form, Input, List, message, Modal, Row, Select, Table, Tag, Typography,} from "antd";
+import {observer} from "mobx-react-lite";
+import {ExclamationCircleOutlined} from "@ant-design/icons";
+import {useHistory} from "react-router-dom";
+import {useStore} from "../utils/useStore";
+import {LINKS} from "../routes/app";
+import {ModalLoaderContext} from "../utils/modal";
 
-const { Title, Text } = Typography;
+const {Title, Text} = Typography;
 
 export const ProductComponent = observer((props) => {
   const store = useStore();
   const [form] = Form.useForm();
-  const { Option } = Select;
+  const {Option} = Select;
   const history = useHistory();
   const [idData, setIdData] = useState("");
   const [filterSupplier, setFilterSupplier] = useState(null);
@@ -397,10 +382,10 @@ export const ProductComponent = observer((props) => {
             ]}
           >
             <Select placeholder="Select Sub Category" allowClear>
-              {store.product.dataSubCategories.map((item) => (
-                <Option value={item.id} key={item.id}>
-                  {item.name}
-                </Option>
+              {store.category.dataSubCategories.map((item) => (
+                  <Option value={item.id} key={item.id}>
+                    {item.name}
+                  </Option>
               ))}
             </Select>
           </Form.Item>
diff --git a/src/pages/Product/Product.js b/src/pages/Product/Product.js
index 95750f5..21539e1 100644
--- a/src/pages/Product/Product.js
+++ b/src/pages/Product/Product.js
@@ -1,5 +1,5 @@
 import React, {useContext, useEffect} from "react";
-import {Button, Card, Col, Input, Row, Upload,message} from "antd";
+import {Button, Card, Col, Input, message, Row, Upload} from "antd";
 import {FilterOutlined, PlusSquareOutlined, UploadOutlined,} from "@ant-design/icons";
 import {BreadcumbComponent} from "../../component/BreadcumbComponent";
 import {useStore} from "../../utils/useStore";
@@ -20,8 +20,8 @@ export const Product = observer(() => {
         modalLoader.setLoading(true);
         await Promise.allSettled([
           store.supplier.getData(),
-          store.product.getDataCategories(),
           store.category.getData(),
+          store.category.getDataSubCategories(),
         ]);
         await store.product.getData();
         modalLoader.setLoading(false);
diff --git a/src/pages/Transaction/Product.js b/src/pages/Transaction/Product.js
index 1bc7a67..b2c59b2 100644
--- a/src/pages/Transaction/Product.js
+++ b/src/pages/Transaction/Product.js
@@ -69,14 +69,11 @@ export const Product = observer(() => {
       <Row>
         <Col span={24}>
           <Select
-            placeholder={"Select Sub Category"}
-            allowClear={true}
-            onChange={(val) => {
-              if (val) {
-                handleChangeSubcategory(val);
-              }
-            }}
-            style={{marginBottom: "10px", width: "100%"}}
+              placeholder={"Select Sub Category"}
+              allowClear={true}
+              onChange={(val) => handleChangeSubcategory(val)}
+              style={{marginBottom: "10px", width: "100%"}}
+              value={store.transaction.filterSubCategory}
           >
             {store.transaction.dataSubCategories.map((item, index) => (
               <Option key={item.id} value={item.id}>
diff --git a/src/pages/Transaction/Transaction.js b/src/pages/Transaction/Transaction.js
index 03fa712..4d7a9cc 100644
--- a/src/pages/Transaction/Transaction.js
+++ b/src/pages/Transaction/Transaction.js
@@ -34,9 +34,10 @@ export const Transaction = observer(() => {
   }, []);
 
   const handleChangeTabs = async (key) => {
+    modalLoader.setLoading(true);
     store.transaction.dataSubCategories = [];
     store.transaction.data = [];
-    modalLoader.setLoading(true);
+    store.transaction.filterSubCategory = null;
     store.transaction.filterCategory = key;
     await store.transaction.getDataSubCategories();
     modalLoader.setLoading(false);