diff --git a/src/containers/TransactionsLocking/TransactionsLockingList.js b/src/containers/TransactionsLocking/TransactionsLockingList.js
index 1dc1474ec..5348dadbb 100644
--- a/src/containers/TransactionsLocking/TransactionsLockingList.js
+++ b/src/containers/TransactionsLocking/TransactionsLockingList.js
@@ -1,49 +1,29 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
-import styled from 'styled-components';
 import clsx from 'classnames';
 import { Intent } from '@blueprintjs/core';
+import styled from 'styled-components';
+import * as R from 'ramda';
 
 import { Alert } from 'components';
 import { TransactionsLockingProvider } from './TransactionsLockingProvider';
 import { TransactionLockingContent } from './components';
+import { useTransactionsLockingContext } from './TransactionsLockingProvider';
 import withDialogActions from 'containers/Dialog/withDialogActions';
 
-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}
     />
   ));
 }
@@ -55,11 +35,24 @@ function TransactionsLockingListPage({
   // #withDialogActions
   openDialog,
 }) {
-  // Handle switch transactions locking.
-  const handleSwitchTransactionsLocking = () => {
+  // Handle locking transactions.
+  const handleLockingTransactions = () => {
     openDialog('locking-transactions', {});
   };
 
+  // Handle unlocking transactions
+  const handleUnlockTransactions = () => {
+    openDialog('unlocking-transactions', {});
+  };
+  // Handle unlocking transactions
+  const handleUnlockingPartial = () => {
+    openDialog('unlocking-partial-transactions', {});
+  };
+
+  const {
+    transactionsLocking: { modules },
+  } = useTransactionsLockingContext();
+
   return (
     <TransactionsLockingProvider>
       <TransactionsLocking>
@@ -83,12 +76,17 @@ function TransactionsLockingListPage({
           </LockAllAlert>
         </TransactionsLockingParagraph>
 
-        <TransactionsLockingList items={DataTest} />
+        <TransactionsLockingList
+          items={modules}
+          onlock={handleLockingTransactions}
+          onUnlock={handleUnlockTransactions}
+          onUnlockPartial={handleUnlockingPartial}
+        />
       </TransactionsLocking>
     </TransactionsLockingProvider>
   );
 }
-export default compose(withDialogActions)(TransactionsLockingListPage);
+export default R.compose(withDialogActions)(TransactionsLockingListPage);
 
 const TransactionsLocking = styled.div`
   display: flex;
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..15c93a9a2 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,12 @@ 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>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+          </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'),
   },