diff --git a/packages/webapp/src/components/DialogsContainer.tsx b/packages/webapp/src/components/DialogsContainer.tsx
index c603a624f..5c753c213 100644
--- a/packages/webapp/src/components/DialogsContainer.tsx
+++ b/packages/webapp/src/components/DialogsContainer.tsx
@@ -51,6 +51,7 @@ import EstimateMailDialog from '@/containers/Sales/Estimates/EstimateMailDialog/
 import ReceiptMailDialog from '@/containers/Sales/Receipts/ReceiptMailDialog/ReceiptMailDialog';
 import PaymentMailDialog from '@/containers/Sales/PaymentReceives/PaymentMailDialog/PaymentMailDialog';
 import { ExportDialog } from '@/containers/Dialogs/ExportDialog';
+import { RuleFormDialog } from '@/containers/Banking/Rules/RuleFormDialog/RuleFormDialog';
 
 /**
  * Dialogs container.
@@ -147,6 +148,7 @@ export default function DialogsContainer() {
       <ReceiptMailDialog dialogName={DialogsName.ReceiptMail} />
       <PaymentMailDialog dialogName={DialogsName.PaymentMail} />
       <ExportDialog dialogName={DialogsName.Export} />
+      <RuleFormDialog dialogName={DialogsName.BankRuleForm} />      
     </div>
   );
 }
diff --git a/packages/webapp/src/constants/dialogs.ts b/packages/webapp/src/constants/dialogs.ts
index cd425ce58..07ed83d67 100644
--- a/packages/webapp/src/constants/dialogs.ts
+++ b/packages/webapp/src/constants/dialogs.ts
@@ -75,4 +75,5 @@ export enum DialogsName {
   GeneralLedgerPdfPreview = 'GeneralLedgerPdfPreview',
   SalesTaxLiabilitySummaryPdfPreview = 'SalesTaxLiabilitySummaryPdfPreview',
   Export = 'Export',
+  BankRuleForm = 'BankRuleForm'
 }
diff --git a/packages/webapp/src/containers/Banking/Rules/RuleFormDialog/RuleForm.tsx b/packages/webapp/src/containers/Banking/Rules/RuleFormDialog/RuleForm.tsx
deleted file mode 100644
index e69de29bb..000000000
diff --git a/packages/webapp/src/containers/Banking/Rules/RuleFormDialog/RuleFormContent.tsx b/packages/webapp/src/containers/Banking/Rules/RuleFormDialog/RuleFormContent.tsx
index e96b1d500..6f8e6d9b1 100644
--- a/packages/webapp/src/containers/Banking/Rules/RuleFormDialog/RuleFormContent.tsx
+++ b/packages/webapp/src/containers/Banking/Rules/RuleFormDialog/RuleFormContent.tsx
@@ -1,19 +1,20 @@
-import { RuleFormBoot } from "./RuleFormBoot";
-
+import { RuleFormBoot } from './RuleFormBoot';
+import { RuleFormContentForm } from './RuleFormContentForm';
 
 interface RuleFormContentProps {
   dialogName: string;
   bankRuleId?: number;
 }
-export function RuleFormContent({
+
+export default function RuleFormContent({
   dialogName,
   bankRuleId,
 }: RuleFormContentProps) {
   return (
-    <RuleFormBoot
-      bankRuleId={bankRuleId}
-    >
-      
-    </RuleFormBoot>
+    <div>
+      <RuleFormBoot bankRuleId={bankRuleId}>
+        <RuleFormContentForm />
+      </RuleFormBoot>
+    </div>
   );
 }
diff --git a/packages/webapp/src/containers/Banking/Rules/RuleFormDialog/RuleFormContentForm.tsx b/packages/webapp/src/containers/Banking/Rules/RuleFormDialog/RuleFormContentForm.tsx
index a018fe9df..230f0ed74 100644
--- a/packages/webapp/src/containers/Banking/Rules/RuleFormDialog/RuleFormContentForm.tsx
+++ b/packages/webapp/src/containers/Banking/Rules/RuleFormDialog/RuleFormContentForm.tsx
@@ -1,5 +1,5 @@
 import { Form, Formik, useFormikContext } from 'formik';
-import { Button, Radio } from '@blueprintjs/core';
+import { Button, Classes, Intent, Radio } from '@blueprintjs/core';
 import { CreateRuleFormSchema } from './RuleFormContentForm.schema';
 import {
   Box,
@@ -61,7 +61,10 @@ export function RuleFormContentForm() {
           <FSelect name={'conditionsType'} items={[]} />
         </FFormGroup>
 
-        <FFormGroup name={''} label={'Categorize the transactions when'}>
+        <FFormGroup
+          name={'conditionsType'}
+          label={'Categorize the transactions when'}
+        >
           <FRadioGroup name={'conditionsType'}>
             <Radio value={'and'} label={'All the following criteria matches'} />
             <Radio
@@ -72,7 +75,6 @@ export function RuleFormContentForm() {
         </FFormGroup>
 
         <RuleFormConditions />
-
         <h3>Then Assign</h3>
 
         <FFormGroup name={'assignCategory'} label={'Transaction type'}>
@@ -86,6 +88,8 @@ export function RuleFormContentForm() {
         <FFormGroup name={'assignRef'} label={'Reference'}>
           <FInputGroup name={'assignRef'} />
         </FFormGroup>
+
+        <RuleFormActions />
       </Form>
     </Formik>
   );
@@ -132,3 +136,25 @@ function RuleFormConditions() {
     </Box>
   );
 }
+
+function RuleFormActions() {
+  const { isSubmitting, submitForm } = useFormikContext<RuleFormValues>();
+
+  const handleSaveBtnClick = () => {
+    submitForm();
+  };
+  const handleCancelBtnClick = () => {};
+
+  return (
+    <Box className={Classes.DIALOG_FOOTER}>
+      <Button
+        intent={Intent.PRIMARY}
+        loading={isSubmitting}
+        onClick={handleSaveBtnClick}
+      >
+        Save
+      </Button>
+      <Button onClick={handleCancelBtnClick}>Cancel</Button>
+    </Box>
+  );
+}
diff --git a/packages/webapp/src/containers/Banking/Rules/RuleFormDialog/RuleFormDialog.tsx b/packages/webapp/src/containers/Banking/Rules/RuleFormDialog/RuleFormDialog.tsx
index 5fa6929f7..262f1576a 100644
--- a/packages/webapp/src/containers/Banking/Rules/RuleFormDialog/RuleFormDialog.tsx
+++ b/packages/webapp/src/containers/Banking/Rules/RuleFormDialog/RuleFormDialog.tsx
@@ -9,14 +9,14 @@ const RuleFormContent = React.lazy(() => import('./RuleFormContent'));
 /**
  * Payment mail dialog.
  */
-function RuleFormDialog({
+function RuleFormDialogRoot({
   dialogName,
   payload: { bankRuleId = null },
   isOpen,
 }) {
   return (
     <Dialog
-      name={dialogName}
+      name={dialogName}f
       title={'New Bank Rule'}
       isOpen={isOpen}
       canEscapeJeyClose={true}
@@ -30,4 +30,6 @@ function RuleFormDialog({
   );
 }
 
-export default compose(withDialogRedux())(RuleFormDialog);
+export const RuleFormDialog = compose(withDialogRedux())(RuleFormDialogRoot);
+
+RuleFormDialog.displayName = 'RuleFormDialog';
diff --git a/packages/webapp/src/containers/Banking/Rules/RulesList/RulesLandingPage.ts b/packages/webapp/src/containers/Banking/Rules/RulesList/RulesLandingPage.ts
new file mode 100644
index 000000000..7d5d953f5
--- /dev/null
+++ b/packages/webapp/src/containers/Banking/Rules/RulesList/RulesLandingPage.ts
@@ -0,0 +1,3 @@
+import { RulesList } from './RulesList';
+
+export default RulesList;
\ No newline at end of file
diff --git a/packages/webapp/src/containers/Banking/Rules/RulesList/RulesListActionsBar.tsx b/packages/webapp/src/containers/Banking/Rules/RulesList/RulesListActionsBar.tsx
index 2f538afef..1a020dfcf 100644
--- a/packages/webapp/src/containers/Banking/Rules/RulesList/RulesListActionsBar.tsx
+++ b/packages/webapp/src/containers/Banking/Rules/RulesList/RulesListActionsBar.tsx
@@ -1,10 +1,37 @@
-import { DashboardActionsBar } from '@/components';
-import { NavbarGroup } from '@blueprintjs/core';
+// @ts-nocheck
+import { Button, Classes, NavbarGroup } from '@blueprintjs/core';
+import * as R from 'ramda';
+import { Can, DashboardActionsBar, Icon } from '@/components';
+import { AbilitySubject, BankRuleAction } from '@/constants/abilityOption';
+import withAlertActions from '@/containers/Alert/withAlertActions';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+import { DialogsName } from '@/constants/dialogs';
+
+function RulesListActionsBarRoot({
+  // #withDialogActions
+  openDialog,
+}) {
+  const handleCreateBtnClick = () => {
+    openDialog(DialogsName.BankRuleForm);
+  };
 
-export function RulesListActionsBar() {
   return (
     <DashboardActionsBar>
-      <NavbarGroup></NavbarGroup>
+      <NavbarGroup>
+        <Can I={BankRuleAction.Create} a={AbilitySubject.BankRule}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon="plus" />}
+            text={'New Bank Rule'}
+            onClick={handleCreateBtnClick}
+          />
+        </Can>
+      </NavbarGroup>
     </DashboardActionsBar>
   );
 }
+
+export const RulesListActionsBar = R.compose(
+  withDialogActions,
+  withAlertActions,
+)(RulesListActionsBarRoot);
diff --git a/packages/webapp/src/containers/Banking/Rules/RulesList/RulesTable.tsx b/packages/webapp/src/containers/Banking/Rules/RulesList/RulesTable.tsx
index 966b86bc8..5d5d9a88f 100644
--- a/packages/webapp/src/containers/Banking/Rules/RulesList/RulesTable.tsx
+++ b/packages/webapp/src/containers/Banking/Rules/RulesList/RulesTable.tsx
@@ -38,8 +38,10 @@ function RulesTable({
   // Handle delete bank rule.
   const handleEditBankRule = () => {};
 
+  const isEmptyState = false;
+
   // Display invoice empty status instead of the table.
-  if (isEmptyStatus) {
+  if (isEmptyState) {
     return <BankRulesLandingEmptyState />;
   }
 
@@ -62,11 +64,11 @@ function RulesTable({
         TableLoadingRenderer={TableSkeletonRows}
         TableHeaderSkeletonRenderer={TableSkeletonHeader}
         ContextMenu={BankRulesTableActionsMenu}
-        onCellClick={handleCellClick}
+        // onCellClick={handleCellClick}
         size={'medium'}
         payload={{
-          onDelete: handleDeleteTaxRate,
-          onEdit: handleEditTaxRate,
+          onDelete: handleDeleteBankRule,
+          onEdit: handleEditBankRule,
         }}
       />
     </DashboardContentTable>
diff --git a/packages/webapp/src/routes/dashboard.tsx b/packages/webapp/src/routes/dashboard.tsx
index afd35824d..47375ff88 100644
--- a/packages/webapp/src/routes/dashboard.tsx
+++ b/packages/webapp/src/routes/dashboard.tsx
@@ -1225,7 +1225,7 @@ export const getDashboardRoutes = () => [
   {
     path: '/bank-rules',
     component: lazy(
-      () => import('@/containers/Banking/Rules/RulesList/RulesList'),
+      () => import('@/containers/Banking/Rules/RulesList/RulesLandingPage'),
     ),
     pageTitle: 'Bank Rules',
   },