diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/index.js b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/index.js
index f51ba4b56..005ce298d 100644
--- a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/index.js
+++ b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/index.js
@@ -1,30 +1,22 @@
 import React from 'react';
-import styled from 'styled-components';
-import { Card, FormattedMessage as T } from 'components';
+import { Card } from 'components';
 import { ItemManuTransaction } from './utils';
 import { useItemDetailDrawerContext } from '../ItemDetailDrawerProvider';
 import ItemPaymentTransactionContent from './ItemPaymentTransactionContent';
 
 export const ItemPaymentTransactions = () => {
-  const { value } = useItemDetailDrawerContext();
+  const { value, setValue } = useItemDetailDrawerContext();
+
+  // handle item change.
+  const handleItemChange = (item) => {
+    setValue(item);
+  };
 
   return (
     <Card>
-      <ItemManuTransactions>
-        <T id={'item.drawer_transactions_by'} />
-        <ItemManuTransaction />
-      </ItemManuTransactions>
+      <ItemManuTransaction onChange={handleItemChange} />
       <ItemPaymentTransactionContent tansactionType={value} />
     </Card>
   );
 };
 
-const ItemManuTransactions = styled.div`
-  display: flex;
-  align-items: center;
-  color: #727983;
-  .bp3-button {
-    padding-left: 6px;
-    font-weight: 500;
-  }
-`;
diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/utils.js b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/utils.js
index 9e93ea4b2..a8efc015f 100644
--- a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/utils.js
+++ b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/utils.js
@@ -7,19 +7,20 @@ import {
   PopoverInteractionKind,
   Position,
 } from '@blueprintjs/core';
+import styled from 'styled-components';
 import { FormattedMessage as T } from 'components';
 import { useItemDetailDrawerContext } from '../ItemDetailDrawerProvider';
 import transactions from '../../../../common/itemPaymentTranactionsOption';
 
-export const ItemManuTransaction = () => {
+export const ItemManuTransaction = ({ onChange }) => {
   const { value, setValue } = useItemDetailDrawerContext();
 
-  // const handleClickItem = (item) => {
-  //   onChange && onChange(item);
-  // };
+  const handleClickItem = (item) => {
+    onChange && onChange(item);
+  };
 
   const content = transactions.map(({ name, label }) => (
-    <MenuItem onClick={() => setValue(name)} text={label} />
+    <MenuItem onClick={() => handleClickItem(name)} text={label} />
   ));
 
   return (
@@ -32,7 +33,28 @@ export const ItemManuTransaction = () => {
       }}
       content={<Menu>{content}</Menu>}
     >
-      <Button minimal={true} text={<T id={value} />} rightIcon={'caret-down'} />
+      <ItemSwitchButton
+        minimal={true}
+        text={<T id={'item.drawer_transactions_by'} />}
+        rightIcon={'caret-down'}
+      >
+        <ItemSwitchText>
+          <T id={value} />
+        </ItemSwitchText>
+      </ItemSwitchButton>
     </Popover>
   );
 };
+
+const ItemSwitchButton = styled(Button)`
+  .bp3-button-text {
+    display: flex;
+    color: #727983;
+  }
+`;
+
+const ItemSwitchText = styled.span`
+  font-weight: 600;
+  color: #33304a;
+  padding-left: 3px;
+`;