diff --git a/src/containers/Alerts/Branches/BranchMarkPrimaryAlert.js b/src/containers/Alerts/Branches/BranchMarkPrimaryAlert.js
index e61159587..d508353d1 100644
--- a/src/containers/Alerts/Branches/BranchMarkPrimaryAlert.js
+++ b/src/containers/Alerts/Branches/BranchMarkPrimaryAlert.js
@@ -3,7 +3,7 @@ import intl from 'react-intl-universal';
 import { Intent, Alert } from '@blueprintjs/core';
 import { FormattedMessage as T } from 'components';
 
-import { useMarkPrimaryBranches } from 'hooks/query';
+import { useMarkBranchAsPrimary } from 'hooks/query';
 import { AppToaster } from 'components';
 
 import withAlertActions from 'containers/Alert/withAlertActions';
@@ -25,7 +25,7 @@ function BranchMarkPrimaryAlert({
   closeAlert,
 }) {
   const { mutateAsync: markPrimaryBranchMutate, isLoading } =
-    useMarkPrimaryBranches();
+  useMarkBranchAsPrimary();
 
   // Handle cancel mark primary alert.
   const handleCancelMarkPrimaryAlert = () => {
@@ -49,8 +49,8 @@ function BranchMarkPrimaryAlert({
 
   return (
     <Alert
-      cancelButtonText={<T id={'cancel'} />}
-      confirmButtonText={<T id={'make_primary'} />}
+      // cancelButtonText={<T id={'cancel'} />}
+      // confirmButtonText={<T id={'make_primary'} />}
       intent={Intent.WARNING}
       isOpen={isOpen}
       onCancel={handleCancelMarkPrimaryAlert}
diff --git a/src/containers/Alerts/Warehouses/WarehouseMarkPrimaryAlert.js b/src/containers/Alerts/Warehouses/WarehouseMarkPrimaryAlert.js
index 17f8300f4..874c29d0b 100644
--- a/src/containers/Alerts/Warehouses/WarehouseMarkPrimaryAlert.js
+++ b/src/containers/Alerts/Warehouses/WarehouseMarkPrimaryAlert.js
@@ -3,7 +3,7 @@ import intl from 'react-intl-universal';
 import { Intent, Alert } from '@blueprintjs/core';
 import { FormattedMessage as T } from 'components';
 
-import { useMarkPrimaryWarehouse } from 'hooks/query';
+import { useMarkWarehouseAsPrimary } from 'hooks/query';
 import { AppToaster } from 'components';
 
 import withAlertActions from 'containers/Alert/withAlertActions';
@@ -24,14 +24,14 @@ function WarehouseMarkPrimaryAlert({
   // #withAlertActions
   closeAlert,
 }) {
-  const { mutateAsync: markPrimaryWarehouseMutate, isLoading } =
-    useMarkPrimaryWarehouse();
+  // const { mutateAsync: markPrimaryWarehouseMutate, isLoading } =
+  // useMarkWarehouseAsPrimary();
 
   // Handle cancel mark primary alert.
   const handleCancelMarkPrimaryAlert = () => {
     closeAlert(name);
   };
-  console.log(warehouseId, 'XX');
+
   // andle cancel mark primary confirm.
   const handleConfirmMarkPrimaryWarehouse = () => {
     markPrimaryWarehouseMutate(warehouseId)
diff --git a/src/containers/Preferences/Branches/BranchesAlerts.js b/src/containers/Preferences/Branches/BranchesAlerts.js
index 2facc34b8..d002b4b9b 100644
--- a/src/containers/Preferences/Branches/BranchesAlerts.js
+++ b/src/containers/Preferences/Branches/BranchesAlerts.js
@@ -3,14 +3,14 @@ import React from 'react';
 const BranchDeleteAlert = React.lazy(() =>
   import('../../Alerts/Branches/BranchDeleteAlert'),
 );
-const BranchMarkPrimaryAlert = React.lazy(() =>
-  import('../../Alerts/Branches/BranchMarkPrimaryAlert'),
-);
+// const BranchMarkPrimaryAlert = React.lazy(() =>
+//   import('../../Alerts/Branches/BranchMarkPrimaryAlert'),
+// );
 
 export default [
   { name: 'branch-delete', component: BranchDeleteAlert },
-  {
-    name: 'branch-mark-primary',
-    component: BranchMarkPrimaryAlert,
-  },
+  // {
+  //   name: 'branch-mark-primary',
+  //   component: BranchMarkPrimaryAlert,
+  // },
 ];
diff --git a/src/containers/Preferences/Branches/BranchesDataTable.js b/src/containers/Preferences/Branches/BranchesDataTable.js
index e34affa54..3bb129a39 100644
--- a/src/containers/Preferences/Branches/BranchesDataTable.js
+++ b/src/containers/Preferences/Branches/BranchesDataTable.js
@@ -1,13 +1,16 @@
 import React from 'react';
+import intl from 'react-intl-universal';
 import styled from 'styled-components';
+import { Intent } from '@blueprintjs/core';
 
 import 'style/pages/Preferences/branchesList.scss';
 
-import { DataTable, Card } from 'components';
 import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
 import BranchesEmptyStatus from './BranchesEmptyStatus';
+import { DataTable, Card, AppToaster } from 'components';
 import { useBranchesTableColumns, ActionsMenu } from './components';
 import { useBranchesContext } from './BranchesProvider';
+import { useMarkBranchAsPrimary } from 'hooks/query';
 
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import withAlertActions from 'containers/Alert/withAlertActions';
@@ -27,6 +30,9 @@ function BranchesDataTable({
   // Table columns.
   const columns = useBranchesTableColumns();
 
+  // MarkBranchAsPrimary
+  const { mutateAsync: markBranchAsPrimaryMutate } = useMarkBranchAsPrimary();
+
   const { branches, isBranchesLoading, isBranchesFetching } =
     useBranchesContext();
 
@@ -40,9 +46,14 @@ function BranchesDataTable({
     openAlert('branch-delete', { branchId: id });
   };
 
-   // Handle mark primary branch.
-  const handleMarkPrimaryBranch = ({ id }) => {
-    openAlert('branch-mark-primary', { branchId: id });
+  // Handle mark  branch as primary.
+  const handleMarkBranchAsPrimary = ({ id }) => {
+    markBranchAsPrimaryMutate(id).then(() => {
+      AppToaster.show({
+        message: intl.get('branch.alert.mark_primary_message'),
+        intent: Intent.SUCCESS,
+      });
+    });
   };
 
   // if (type) {
@@ -63,7 +74,7 @@ function BranchesDataTable({
         payload={{
           onEdit: handleEditBranch,
           onDelete: handleDeleteBranch,
-          onMarkPrimary: handleMarkPrimaryBranch,
+          onMarkPrimary: handleMarkBranchAsPrimary,
         }}
       />
     </BranchesTableCard>
diff --git a/src/containers/Preferences/Warehouses/WarehousesAlerts.js b/src/containers/Preferences/Warehouses/WarehousesAlerts.js
index bf2ce3883..71075d90d 100644
--- a/src/containers/Preferences/Warehouses/WarehousesAlerts.js
+++ b/src/containers/Preferences/Warehouses/WarehousesAlerts.js
@@ -3,17 +3,17 @@ import React from 'react';
 const WarehouseDeleteAlert = React.lazy(() =>
   import('../../Alerts/Warehouses/WarehouseDeleteAlert'),
 );
-const WarehouseMarkPrimaryAlert = React.lazy(() =>
-  import('../../Alerts/Warehouses/WarehouseMarkPrimaryAlert'),
-);
+// const WarehouseMarkPrimaryAlert = React.lazy(() =>
+//   import('../../Alerts/Warehouses/WarehouseMarkPrimaryAlert'),
+// );
 
 /**
  * Warehouses alerts.
  */
 export default [
   { name: 'warehouse-delete', component: WarehouseDeleteAlert },
-  {
-    name: 'warehouse-mark-primary',
-    component: WarehouseMarkPrimaryAlert,
-  },
+  // {
+  //   name: 'warehouse-mark-primary',
+  //   component: WarehouseMarkPrimaryAlert,
+  // },
 ];
diff --git a/src/containers/Preferences/Warehouses/WarehousesGridItems.js b/src/containers/Preferences/Warehouses/WarehousesGridItems.js
index c9db667e6..d6e9a1b6b 100644
--- a/src/containers/Preferences/Warehouses/WarehousesGridItems.js
+++ b/src/containers/Preferences/Warehouses/WarehousesGridItems.js
@@ -1,7 +1,11 @@
 import React from 'react';
+import intl from 'react-intl-universal';
+import { Intent } from '@blueprintjs/core';
 import { ContextMenu2 } from '@blueprintjs/popover2';
 
+import { AppToaster } from 'components';
 import { WarehouseContextMenu, WarehousesGridItemBox } from './components';
+import { useMarkWarehouseAsPrimary } from 'hooks/query';
 
 import withAlertsActions from '../../Alert/withAlertActions';
 import withDialogActions from '../../Dialog/withDialogActions';
@@ -19,6 +23,9 @@ function WarehouseGridItem({
 
   warehouse,
 }) {
+  const { mutateAsync: markWarehouseAsPrimaryMutate } =
+    useMarkWarehouseAsPrimary();
+
   // Handle edit warehouse.
   const handleEditWarehouse = () => {
     openDialog('warehouse-form', { warehouseId: warehouse.id, action: 'edit' });
@@ -28,8 +35,13 @@ function WarehouseGridItem({
     openAlert('warehouse-delete', { warehouseId: warehouse.id });
   };
   // Handle mark primary warehouse.
-  const handleMarkPrimaryWarehouse = () => {
-    openAlert('warehouse-mark-primary', { warehouseId: warehouse.id });
+  const handleMarkWarehouseAsPrimary = () => {
+    markWarehouseAsPrimaryMutate(warehouse.id).then(() => {
+      AppToaster.show({
+        message: intl.get('warehouse.alert.mark_primary_message'),
+        intent: Intent.SUCCESS,
+      });
+    });
   };
 
   return (
@@ -38,7 +50,7 @@ function WarehouseGridItem({
         <WarehouseContextMenu
           onEditClick={handleEditWarehouse}
           onDeleteClick={handleDeleteWarehouse}
-          onMarkPrimary={handleMarkPrimaryWarehouse}
+          onMarkPrimary={handleMarkWarehouseAsPrimary}
         />
       }
     >
diff --git a/src/hooks/query/branches.js b/src/hooks/query/branches.js
index b9a9e75c7..1f0248837 100644
--- a/src/hooks/query/branches.js
+++ b/src/hooks/query/branches.js
@@ -117,7 +117,7 @@ export function useActivateBranches(props) {
 /**
  * Mark primary the given branch.
  */
-export function useMarkPrimaryBranches(props) {
+export function useMarkBranchAsPrimary(props) {
   const queryClient = useQueryClient();
   const apiRequest = useApiRequest();
 
diff --git a/src/hooks/query/warehouses.js b/src/hooks/query/warehouses.js
index 2499aaed4..51c5222e4 100644
--- a/src/hooks/query/warehouses.js
+++ b/src/hooks/query/warehouses.js
@@ -237,7 +237,7 @@ export function useActivateWarehouses(props) {
 /**
  * Mark primary the given branch.
  */
-export function useMarkPrimaryWarehouse(props) {
+export function useMarkWarehouseAsPrimary(props) {
   const queryClient = useQueryClient();
   const apiRequest = useApiRequest();