diff --git a/src/containers/TransactionsLocking/TransactionsLockingList.js b/src/containers/TransactionsLocking/TransactionsLockingList.js
index 77c2c0375..08685daa1 100644
--- a/src/containers/TransactionsLocking/TransactionsLockingList.js
+++ b/src/containers/TransactionsLocking/TransactionsLockingList.js
@@ -2,45 +2,24 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 import clsx from 'classnames';
-import { TransactionsLockingProvider } from './TransactionsLockingProvider';
 import { TransactionLockingContent } from './components';
 import withDialogActions from 'containers/Dialog/withDialogActions';
-
+import { useTransactionsLockingContext } from './TransactionsLockingProvider';
 import { compose } from 'utils';
 
-const DataTest = [
-  {
-    isEnabled: true,
-    name: 'sales',
-    module: 'sales',
-    description:
-      'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do',
-  },
-  {
-    isEnabled: false,
-    name: 'purchases',
-    module: 'purchases',
-    description:
-      'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do',
-  },
-  {
-    isEnabled: false,
-    name: 'financial',
-    description:
-      'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do',
-  },
-];
-
 function Paragraph({ className, children }) {
   return <p className={clsx('paragraph', className)}>{children}</p>;
 }
 
-function TransactionsLockingList({ items }) {
-  return items.map(({ isEnabled, name, description }) => (
+function TransactionsLockingList({ items, onlock, onUnlock, onUnlockPartial }) {
+  return items.map(({ is_enabled, formatted_module, description }) => (
     <TransactionLockingContent
-      name={name}
+      name={formatted_module}
       description={description}
-      isEnabled={isEnabled}
+      isEnabled={is_enabled}
+      onLock={onlock}
+      onUnlockPartial={onUnlockPartial}
+      onEditLock={onUnlock}
     />
   ));
 }
@@ -52,28 +31,44 @@ function TransactionsLockingListPage({
   // #withDialogActions
   openDialog,
 }) {
-  // Handle switch transactions locking.
-  const handleSwitchTransactionsLocking = () => {
+  // Handle locking transactions.
+  const handleLockingTransactions = () => {
     openDialog('locking-transactions', {});
   };
 
-  return (
-    <TransactionsLockingProvider>
-      <TransactionsLocking>
-        <TransactionsLockingParagraph>
-          <TransLockingDesc>
-            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
-            eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem
-            ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
-            tempor incididunt ut labore et dolore magna aliqua.
-          </TransLockingDesc>
-          Lock All Transactions At Once.{' '}
-          <Link to={'/'}> {''}Lock All Transactions At Once →</Link>
-        </TransactionsLockingParagraph>
+  // Handle unlocking transactions
+  const handleUnlockTransactions = () => {
+    openDialog('unlocking-transactions', {});
+  };
+  // Handle unlocking transactions
+  const handleUnlockingPartial = () => {
+    openDialog('unlocking-partial-transactions', {});
+  };
 
-        <TransactionsLockingList items={DataTest} />
-      </TransactionsLocking>
-    </TransactionsLockingProvider>
+  const {
+    transactionsLocking: { modules },
+  } = useTransactionsLockingContext();
+
+  return (
+    <TransactionsLocking>
+      <TransactionsLockingParagraph>
+        <TransLockingDesc>
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem
+          ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+          tempor incididunt ut labore et dolore magna aliqua.
+        </TransLockingDesc>
+        Lock All Transactions At Once.{' '}
+        <Link to={'/'}> {''}Lock All Transactions At Once →</Link>
+      </TransactionsLockingParagraph>
+
+      <TransactionsLockingList
+        items={modules}
+        onlock={handleLockingTransactions}
+        onUnlock={handleUnlockTransactions}
+        onUnlockPartial={handleUnlockingPartial}
+      />
+    </TransactionsLocking>
   );
 }
 export default compose(withDialogActions)(TransactionsLockingListPage);
diff --git a/src/containers/TransactionsLocking/TransactionsLockingPage.js b/src/containers/TransactionsLocking/TransactionsLockingPage.js
new file mode 100644
index 000000000..0ea88c231
--- /dev/null
+++ b/src/containers/TransactionsLocking/TransactionsLockingPage.js
@@ -0,0 +1,12 @@
+import React from 'react';
+
+import { TransactionsLockingProvider } from './TransactionsLockingProvider';
+import TransactionsLockingList from './TransactionsLockingList';
+
+export default function TransactionsLockingPage() {
+  return (
+    <TransactionsLockingProvider>
+      <TransactionsLockingList />
+    </TransactionsLockingProvider>
+  );
+}
diff --git a/src/containers/TransactionsLocking/TransactionsLockingProvider.js b/src/containers/TransactionsLocking/TransactionsLockingProvider.js
index 33f1b855c..7ade11e12 100644
--- a/src/containers/TransactionsLocking/TransactionsLockingProvider.js
+++ b/src/containers/TransactionsLocking/TransactionsLockingProvider.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
+import { useTransactionsLocking } from 'hooks/query';
 
 const TransactionsLockingContext = React.createContext();
 
@@ -7,13 +8,22 @@ const TransactionsLockingContext = React.createContext();
  * Transactions locking data provider.
  */
 function TransactionsLockingProvider({ ...props }) {
+  // Fetch
+  const {
+    data: transactionsLocking,
+    isFetching: isTransactionLockingFetching,
+    isLoading: isTransactionLockingLoading,
+  } = useTransactionsLocking();
+
+  console.log(transactionsLocking, 'XX');
+
   // Provider
-  const provider = {};
+  const provider = {
+    transactionsLocking,
+  };
 
   return (
-    <DashboardInsider
-    // loading={}
-    >
+    <DashboardInsider loading={isTransactionLockingLoading}>
       <TransactionsLockingContext.Provider value={provider} {...props} />
     </DashboardInsider>
   );
diff --git a/src/containers/TransactionsLocking/components.js b/src/containers/TransactionsLocking/components.js
index 8687fa98f..1ad271f7e 100644
--- a/src/containers/TransactionsLocking/components.js
+++ b/src/containers/TransactionsLocking/components.js
@@ -35,6 +35,7 @@ export const TransactionLockingContent = ({
   const handleUnlockFull = (event) => {
     safeInvoke(onUnlockFull, module, event);
   };
+  
   return (
     <TransactionLockingWrapp>
       <TransLockingInner>
@@ -44,15 +45,10 @@ export const TransactionLockingContent = ({
 
         <TransLockingContent>
           <TransLockingItemTitle>
-            <T id={name} />{' '}
-            <Hint
-              content={
-                'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do'
-              }
-              position={Position.BOTTOM_LEFT}
-            />
+            {name}
+            <Hint content={description} position={Position.BOTTOM_LEFT} />
           </TransLockingItemTitle>
-          <TransLockingItemDesc>{description}</TransLockingItemDesc>
+          <TransLockingItemDesc>{''}</TransLockingItemDesc>
         </TransLockingContent>
 
         <TransLockingActions>
diff --git a/src/hooks/query/transactionsLocking.js b/src/hooks/query/transactionsLocking.js
index 745a002de..943a35abc 100644
--- a/src/hooks/query/transactionsLocking.js
+++ b/src/hooks/query/transactionsLocking.js
@@ -85,3 +85,18 @@ export function useCancelUnlockingPartialTransactions(props) {
     },
   );
 }
+
+/**
+ * Retrive the transactions locking.
+ */
+export function useTransactionsLocking(query, props) {
+  return useRequestQuery(
+    [t.TRANSACTIONS_LOCKING, query],
+    { method: 'get', url: 'transactions-locking', params: query },
+    {
+      select: (res) => res.data.data,
+      defaultData: [],
+      ...props,
+    },
+  );
+}
diff --git a/src/routes/dashboard.js b/src/routes/dashboard.js
index c181b5e14..6a7040764 100644
--- a/src/routes/dashboard.js
+++ b/src/routes/dashboard.js
@@ -875,7 +875,7 @@ export const getDashboardRoutes = () => [
   {
     path: `/transactions-locking`,
     component: lazy(() =>
-      import('../containers/TransactionsLocking/TransactionsLockingList'),
+      import('../containers/TransactionsLocking/TransactionsLockingPage'),
     ),
     pageTitle: intl.get('sidebar.transactions_locaking'),
   },