diff --git a/src/app/accounting/accounting-routing.module.ts b/src/app/accounting/accounting-routing.module.ts
index bea24b9cd..a9c4bce58 100644
--- a/src/app/accounting/accounting-routing.module.ts
+++ b/src/app/accounting/accounting-routing.module.ts
@@ -25,6 +25,7 @@ import { ClosingEntriesComponent } from './closing-entries/closing-entries.compo
 import { CreateClosureComponent } from './closing-entries/create-closure/create-closure.component';
 import { ViewClosureComponent } from './closing-entries/view-closure/view-closure.component';
 import { EditClosureComponent } from './closing-entries/edit-closure/edit-closure.component';
+import { AccountingRulesComponent } from './accounting-rules/accounting-rules.component';
 
 const routes: Routes = [
   Route.withShell([
@@ -161,6 +162,11 @@ const routes: Routes = [
               ]
             }
           ]
+        },
+        {
+          path: 'accounting-rules',
+          component: AccountingRulesComponent,
+          data: { title: extract('Accounting Rules'), breadcrumb: 'Rules' },
         }
       ]
     }
diff --git a/src/app/accounting/accounting-rules/accounting-rules.component.html b/src/app/accounting/accounting-rules/accounting-rules.component.html
new file mode 100644
index 000000000..747a9ffb5
--- /dev/null
+++ b/src/app/accounting/accounting-rules/accounting-rules.component.html
@@ -0,0 +1,58 @@
+<div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
+  <button mat-raised-button color="primary" [routerLink]="['/accounting/accounting-rules/create']">
+    <mat-icon>add</mat-icon>&nbsp;&nbsp;Add Rule
+  </button>
+</div>
+
+<div class="container">
+
+  <div fxLayout="row" fxLayoutGap="20px">
+    <mat-form-field fxFlex>
+      <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
+    </mat-form-field>
+  </div>
+
+  <div class="mat-elevation-z8">
+
+    <table mat-table [dataSource]="dataSource" matSort>
+
+      <ng-container matColumnDef="name">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
+        <td mat-cell *matCellDef="let accountingRule"> {{ accountingRule.name }} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="officeName">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> Office </th>
+        <td mat-cell *matCellDef="let accountingRule"> {{ accountingRule.officeName }} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="debitTags">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> Debit Tags </th>
+        <td mat-cell *matCellDef="let accountingRule"> {{ accountingRule.debitTags }} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="debitAccount">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> Debit Account </th>
+        <td mat-cell *matCellDef="let accountingRule"> {{ accountingRule.debitAccounts ? accountingRule.debitAccounts[0].name : '' }} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="creditTags">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> Credit Tags </th>
+        <td mat-cell *matCellDef="let accountingRule"> {{ accountingRule.creditTags }} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="creditAccount">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> Credit Account </th>
+        <td mat-cell *matCellDef="let accountingRule"> {{ accountingRule.creditAccounts ? accountingRule.creditAccounts[0].name : '' }} </td>
+      </ng-container>
+
+      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="['/accounting/accounting-rules/view', row.id]"></tr>
+
+    </table>
+
+    <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
+
+  </div>
+
+</div>
diff --git a/src/app/accounting/accounting-rules/accounting-rules.component.scss b/src/app/accounting/accounting-rules/accounting-rules.component.scss
new file mode 100644
index 000000000..1922e7ffa
--- /dev/null
+++ b/src/app/accounting/accounting-rules/accounting-rules.component.scss
@@ -0,0 +1,3 @@
+table {
+  width: 100%;
+}
diff --git a/src/app/accounting/accounting-rules/accounting-rules.component.spec.ts b/src/app/accounting/accounting-rules/accounting-rules.component.spec.ts
new file mode 100644
index 000000000..0d3f08eba
--- /dev/null
+++ b/src/app/accounting/accounting-rules/accounting-rules.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AccountingRulesComponent } from './accounting-rules.component';
+
+describe('AccountingRulesComponent', () => {
+  let component: AccountingRulesComponent;
+  let fixture: ComponentFixture<AccountingRulesComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AccountingRulesComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AccountingRulesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/accounting/accounting-rules/accounting-rules.component.ts b/src/app/accounting/accounting-rules/accounting-rules.component.ts
new file mode 100644
index 000000000..85b37960f
--- /dev/null
+++ b/src/app/accounting/accounting-rules/accounting-rules.component.ts
@@ -0,0 +1,47 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { MatPaginator, MatSort, MatTableDataSource } from '@angular/material';
+import { AccountingService } from '../accounting.service';
+
+@Component({
+  selector: 'mifosx-accounting-rules',
+  templateUrl: './accounting-rules.component.html',
+  styleUrls: ['./accounting-rules.component.scss']
+})
+export class AccountingRulesComponent implements OnInit {
+
+  displayedColumns: string[] = ['name', 'officeName', 'debitTags', 'debitAccount', 'creditTags', 'creditAccount'];
+  dataSource: any;
+
+  @ViewChild(MatPaginator) paginator: MatPaginator;
+  @ViewChild(MatSort) sort: MatSort;
+
+  constructor(private accountingService: AccountingService) { }
+
+  ngOnInit() {
+    this.getAccountingRules();
+  }
+
+  getAccountingRules() {
+    this.accountingService.getAccountingRules().subscribe(accountingRules => {
+      accountingRules.forEach((accountingRule: any) => {
+        accountingRule.debitTags = accountingRule.debitTags ? accountingRule.debitTags.map((debitTag: any) => debitTag.tag.name).join(', ') : '';
+        accountingRule.creditTags = accountingRule.creditTags ? accountingRule.creditTags.map((creditTag: any) => creditTag.tag.name).join(', ') : '';
+      });
+      this.dataSource = new MatTableDataSource(accountingRules);
+      this.dataSource.paginator = this.paginator;
+      this.dataSource.sortingDataAccessor = (accountingRule: any, property: any) => {
+        switch (property) {
+          case 'debitAccount': return accountingRule.debitAccounts[0].name;
+          case 'creditAccount': return accountingRule.creditAccounts[0].name;
+          default: return accountingRule[property];
+        }
+      };
+      this.dataSource.sort = this.sort;
+    });
+  }
+
+  applyFilter(filterValue: string) {
+    this.dataSource.filter = filterValue.trim().toLowerCase();
+  }
+
+}
diff --git a/src/app/accounting/accounting.component.html b/src/app/accounting/accounting.component.html
index 2ae5a6ace..59728b759 100644
--- a/src/app/accounting/accounting.component.html
+++ b/src/app/accounting/accounting.component.html
@@ -58,11 +58,9 @@
           <p matLine>Journal entries made at the end of accounting period</p>
         </mat-list-item>
 
-        <mat-list-item>
+        <mat-list-item [routerLink]="['/accounting/accounting-rules']">
           <mat-icon matListIcon>list</mat-icon>
-          <a matLine href="https://www.google.com">
-            Accounting Rules
-          </a>
+          <h4 matLine>Accounting Rules</h4>
           <p matLine>List of all accounting rules</p>
         </mat-list-item>
 
diff --git a/src/app/accounting/accounting.module.ts b/src/app/accounting/accounting.module.ts
index d201d0f2f..cc62f5e07 100644
--- a/src/app/accounting/accounting.module.ts
+++ b/src/app/accounting/accounting.module.ts
@@ -24,6 +24,7 @@ import { ClosingEntriesComponent } from './closing-entries/closing-entries.compo
 import { CreateClosureComponent } from './closing-entries/create-closure/create-closure.component';
 import { ViewClosureComponent } from './closing-entries/view-closure/view-closure.component';
 import { EditClosureComponent } from './closing-entries/edit-closure/edit-closure.component';
+import { AccountingRulesComponent } from './accounting-rules/accounting-rules.component';
 
 @NgModule({
   imports: [
@@ -52,7 +53,8 @@ import { EditClosureComponent } from './closing-entries/edit-closure/edit-closur
     ClosingEntriesComponent,
     CreateClosureComponent,
     ViewClosureComponent,
-    EditClosureComponent
+    EditClosureComponent,
+    AccountingRulesComponent
   ],
   entryComponents: [
     RevertTransactionComponent,
diff --git a/src/app/accounting/accounting.service.ts b/src/app/accounting/accounting.service.ts
index 28f802aa0..a6b039c2f 100644
--- a/src/app/accounting/accounting.service.ts
+++ b/src/app/accounting/accounting.service.ts
@@ -13,8 +13,12 @@ export class AccountingService {
     return  this.http.get('/offices?orderBy=id');
   }
 
-  getAccountingRules(): Observable<any> {
-    return this.http.get('/accountingrules?associations=all');
+  getAccountingRules(useHttpParams?: boolean): Observable<any> {
+    let httpParams = new HttpParams();
+    if (useHttpParams) {
+      httpParams = httpParams.set('associations', 'all');
+    }
+    return this.http.get('/accountingrules', { params: httpParams });
   }
 
   getCurrencies(): Observable<any> {
diff --git a/src/app/accounting/frequent-postings/frequent-postings.component.ts b/src/app/accounting/frequent-postings/frequent-postings.component.ts
index 11160db48..df2d4519e 100644
--- a/src/app/accounting/frequent-postings/frequent-postings.component.ts
+++ b/src/app/accounting/frequent-postings/frequent-postings.component.ts
@@ -104,7 +104,7 @@ export class FrequentPostingsComponent implements OnInit {
   }
 
   getAccountingRules() {
-    this.accountingService.getAccountingRules().subscribe(accountingRuleData => {
+    this.accountingService.getAccountingRules(true).subscribe(accountingRuleData => {
       this.accountingRuleData = accountingRuleData;
     });
   }