diff --git a/src/app/system/account-number-preferences/account-number-preferences.component.html b/src/app/system/account-number-preferences/account-number-preferences.component.html
new file mode 100644
index 000000000..e8e072bdf
--- /dev/null
+++ b/src/app/system/account-number-preferences/account-number-preferences.component.html
@@ -0,0 +1,35 @@
+<div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
+  <button mat-raised-button color="primary" [routerLink]="['create']">
+    <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+    Create Preference
+  </button>
+</div>
+
+<div class="container">
+
+  <div fxLayout="row">
+    <mat-form-field fxFlex>
+      <mat-label>Filter</mat-label>
+      <input matInput (keyup)="applyFilter($event.target.value)">
+    </mat-form-field>
+  </div>
+
+  <div class="mat-elevation-z8">
+
+    <table mat-table [dataSource]="dataSource" matSort>
+
+      <ng-container matColumnDef="accountType">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> Account Number Preferences </th>
+        <td mat-cell *matCellDef="let accountNumberPreference"> {{ accountNumberPreference.accountType.value }} </td>
+      </ng-container>
+
+      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="[row.id]" class="select-row"></tr>
+
+    </table>
+
+    <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
+
+  </div>
+
+</div>
diff --git a/src/app/system/account-number-preferences/account-number-preferences.component.scss b/src/app/system/account-number-preferences/account-number-preferences.component.scss
new file mode 100644
index 000000000..24edb63bb
--- /dev/null
+++ b/src/app/system/account-number-preferences/account-number-preferences.component.scss
@@ -0,0 +1,7 @@
+table {
+  width: 100%;
+
+  .select-row:hover {
+    cursor: pointer;
+  }
+}
diff --git a/src/app/system/account-number-preferences/account-number-preferences.component.spec.ts b/src/app/system/account-number-preferences/account-number-preferences.component.spec.ts
new file mode 100644
index 000000000..f844393c7
--- /dev/null
+++ b/src/app/system/account-number-preferences/account-number-preferences.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AccountNumberPreferencesComponent } from './account-number-preferences.component';
+
+describe('AccountNumberPreferencesComponent', () => {
+  let component: AccountNumberPreferencesComponent;
+  let fixture: ComponentFixture<AccountNumberPreferencesComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AccountNumberPreferencesComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AccountNumberPreferencesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/system/account-number-preferences/account-number-preferences.component.ts b/src/app/system/account-number-preferences/account-number-preferences.component.ts
new file mode 100644
index 000000000..ac8971729
--- /dev/null
+++ b/src/app/system/account-number-preferences/account-number-preferences.component.ts
@@ -0,0 +1,65 @@
+/** Angular Imports */
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { MatTableDataSource, MatPaginator, MatSort } from '@angular/material';
+import { ActivatedRoute } from '@angular/router';
+
+/**
+ * Account Number Preferences Component.
+ */
+@Component({
+  selector: 'mifosx-account-number-preferences',
+  templateUrl: './account-number-preferences.component.html',
+  styleUrls: ['./account-number-preferences.component.scss']
+})
+export class AccountNumberPreferencesComponent implements OnInit {
+
+  /** Account Number Preferences data. */
+  accountNumberPreferencesData: any;
+  /** Columns to be displayed in account number preferences table. */
+  displayedColumns: string[] = ['accountType'];
+  /** Data source for account number preferences table. */
+  dataSource: MatTableDataSource<any>;
+
+  /** Paginator for account number preferences table. */
+  @ViewChild(MatPaginator) paginator: MatPaginator;
+  /** Sorter for account number preferences table. */
+  @ViewChild(MatSort) sort: MatSort;
+
+  /**
+   * Retrieves the account number preferences data from `resolve`.
+   * @param {ActivatedRoute} route Activated Route.
+   */
+  constructor(private route: ActivatedRoute) {
+    this.route.data.subscribe((data: { accountNumberPreferences: any }) => {
+      this.accountNumberPreferencesData = data.accountNumberPreferences;
+    });
+  }
+
+  /**
+   * Sets the account number preferences table.
+   */
+  ngOnInit() {
+    this.setAccountNumberPreferences();
+  }
+
+  /**
+   * Initializes the data source, paginator, sorter and filter for account number preferences table.
+   */
+  setAccountNumberPreferences() {
+    this.dataSource = new MatTableDataSource(this.accountNumberPreferencesData);
+    this.dataSource.paginator = this.paginator;
+    this.dataSource.sortingDataAccessor = (accountNumberPreference: any, property: any) => {
+      return accountNumberPreference.accountType.value;
+    };
+    this.dataSource.sort = this.sort;
+    this.dataSource.filterPredicate = (data: any, filter: string) => data.accountType.value.toLowerCase().indexOf(filter) !== -1;
+  }
+
+  /**
+   * Filters data in account number preferences table based on passed value.
+   * @param {string} filterValue Value to filter data.
+   */
+  applyFilter(filterValue: string) {
+    this.dataSource.filter = filterValue.toLowerCase().trim();
+  }
+}
diff --git a/src/app/system/account-number-preferences/account-number-preferences.resolver.ts b/src/app/system/account-number-preferences/account-number-preferences.resolver.ts
new file mode 100644
index 000000000..ccc7864c2
--- /dev/null
+++ b/src/app/system/account-number-preferences/account-number-preferences.resolver.ts
@@ -0,0 +1,30 @@
+/** Angular Imports */
+import { Injectable } from '@angular/core';
+import { Resolve } from '@angular/router';
+
+/** rxjs Imports */
+import { Observable } from 'rxjs';
+
+/** Custom Services */
+import { SystemService } from '../system.service';
+
+/**
+ * Account Number Preferences data resolver.
+ */
+@Injectable()
+export class AccountNumberPreferencesResolver implements Resolve<Object> {
+
+  /**
+   * @param {SystemService} systemService System service.
+   */
+  constructor(private systemService: SystemService) {}
+
+  /**
+   * Returns the Account Number Preferences data.
+   * @returns {Observable<any>}
+   */
+  resolve(): Observable<any> {
+    return this.systemService.getAccountNumberPreferences();
+  }
+
+}
diff --git a/src/app/system/account-number-preferences/create-account-number-preference/account-number-preferences-template.resolver.ts b/src/app/system/account-number-preferences/create-account-number-preference/account-number-preferences-template.resolver.ts
new file mode 100644
index 000000000..f8e1a46b3
--- /dev/null
+++ b/src/app/system/account-number-preferences/create-account-number-preference/account-number-preferences-template.resolver.ts
@@ -0,0 +1,30 @@
+/** Angular Imports */
+import { Injectable } from '@angular/core';
+import { Resolve } from '@angular/router';
+
+/** rxjs Imports */
+import { Observable } from 'rxjs';
+
+/** Custom Services */
+import { SystemService } from '../../system.service';
+
+/**
+ * Account Number Preferences Template data resolver.
+ */
+@Injectable()
+export class AccountNumberPreferencesTemplateResolver implements Resolve<Object> {
+
+  /**
+   * @param {SystemService} systemService System service.
+   */
+  constructor(private systemService: SystemService) {}
+
+  /**
+   * Returns the Account Number Preferences Template data.
+   * @returns {Observable<any>}
+   */
+  resolve(): Observable<any> {
+    return this.systemService.getAccountNumberPreferencesTemplate();
+  }
+
+}
diff --git a/src/app/system/account-number-preferences/create-account-number-preference/create-account-number-preference.component.html b/src/app/system/account-number-preferences/create-account-number-preference/create-account-number-preference.component.html
new file mode 100644
index 000000000..554dc318c
--- /dev/null
+++ b/src/app/system/account-number-preferences/create-account-number-preference/create-account-number-preference.component.html
@@ -0,0 +1,45 @@
+<div class="container">
+
+  <mat-card>
+
+    <form [formGroup]="accountNumberPreferenceForm" (ngSubmit)="submit()">
+
+      <mat-card-content>
+
+        <div fxLayout="column">
+
+          <mat-form-field>
+            <mat-label>Account Type</mat-label>
+            <mat-select required formControlName="accountType">
+              <mat-option *ngFor="let accountType of accountNumberPreferencesTemplateData.accountTypeOptions" [value]="accountType.id">
+                {{ accountType.value }}
+              </mat-option>
+            </mat-select>
+            <mat-error *ngIf="accountNumberPreferenceForm.controls.accountType.hasError('required')">
+              Account Type is <strong>required</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <mat-form-field>
+            <mat-label>Prefix Field</mat-label>
+            <mat-select formControlName="prefixType">
+              <mat-option *ngFor="let prefixType of prefixTypeData" [value]="prefixType.id">
+                {{ prefixType.value }}
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
+
+        </div>
+
+      </mat-card-content>
+
+      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+        <button type="button" mat-raised-button [routerLink]="['../']">Cancel</button>
+        <button mat-raised-button color="primary" [disabled]="!accountNumberPreferenceForm.valid">Submit</button>
+      </mat-card-actions>
+
+    </form>
+
+  </mat-card>
+
+</div>
diff --git a/src/app/system/account-number-preferences/create-account-number-preference/create-account-number-preference.component.scss b/src/app/system/account-number-preferences/create-account-number-preference/create-account-number-preference.component.scss
new file mode 100644
index 000000000..1915ad6d3
--- /dev/null
+++ b/src/app/system/account-number-preferences/create-account-number-preference/create-account-number-preference.component.scss
@@ -0,0 +1,3 @@
+.container {
+    max-width: 37rem;
+}
diff --git a/src/app/system/account-number-preferences/create-account-number-preference/create-account-number-preference.component.spec.ts b/src/app/system/account-number-preferences/create-account-number-preference/create-account-number-preference.component.spec.ts
new file mode 100644
index 000000000..775ac7777
--- /dev/null
+++ b/src/app/system/account-number-preferences/create-account-number-preference/create-account-number-preference.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CreateAccountNumberPreferenceComponent } from './create-account-number-preference.component';
+
+describe('CreateAccountNumberPreferenceComponent', () => {
+  let component: CreateAccountNumberPreferenceComponent;
+  let fixture: ComponentFixture<CreateAccountNumberPreferenceComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CreateAccountNumberPreferenceComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CreateAccountNumberPreferenceComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/system/account-number-preferences/create-account-number-preference/create-account-number-preference.component.ts b/src/app/system/account-number-preferences/create-account-number-preference/create-account-number-preference.component.ts
new file mode 100644
index 000000000..aaf08b533
--- /dev/null
+++ b/src/app/system/account-number-preferences/create-account-number-preference/create-account-number-preference.component.ts
@@ -0,0 +1,86 @@
+/** Angular Imports */
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { Router, ActivatedRoute } from '@angular/router';
+
+/** Custom Services */
+import { SystemService } from '../../system.service';
+
+/**
+ * Create Account Number Preference Component.
+ */
+@Component({
+  selector: 'mifosx-create-account-number-preference',
+  templateUrl: './create-account-number-preference.component.html',
+  styleUrls: ['./create-account-number-preference.component.scss']
+})
+export class CreateAccountNumberPreferenceComponent implements OnInit {
+
+  /** Account Number Preferences Form */
+  accountNumberPreferenceForm: FormGroup;
+  /** Account Number Preferences Template Data */
+  accountNumberPreferencesTemplateData: any;
+  /** Prefix Type Data */
+  prefixTypeData: any[];
+
+  /**
+   * Retrieves the account number preferences template data from `resolve`.
+   * @param {FormBuilder} formBuilder Form Builder.
+   * @param {SystemService} systemService Accounting Service.
+   * @param {ActivatedRoute} route Activated Route.
+   * @param {Router} router Router for navigation.
+   */
+  constructor(private formBuilder: FormBuilder,
+              private systemService: SystemService,
+              private route: ActivatedRoute,
+              private router: Router) {
+    this.route.data.subscribe((data: { accountNumberPreferencesTemplate: any }) => {
+      this.accountNumberPreferencesTemplateData = data.accountNumberPreferencesTemplate;
+    });
+  }
+
+  /**
+   * Creates the account number preference form.
+   * Subscribe on Form Controls to change Prefix Type data.
+   */
+  ngOnInit() {
+    this.createAccountNumberPreferenceForm();
+    this.getPrefixTypeValue();
+  }
+
+  /**
+   * Subscribes on Form Controls to change Prefix Type data.
+   */
+  getPrefixTypeValue() {
+    this.accountNumberPreferenceForm.get('accountType').valueChanges
+      .subscribe(accountId => {
+        this.prefixTypeData = this.accountNumberPreferencesTemplateData.prefixTypeOptions[`accountType.${this.accountNumberPreferencesTemplateData.accountTypeOptions.find((accountType: any) => accountType.id === accountId).value.toLowerCase()}`];
+      });
+  }
+
+  /**
+   * Creates the account number preference form.
+   */
+  createAccountNumberPreferenceForm() {
+    this.accountNumberPreferenceForm = this.formBuilder.group({
+      'accountType': ['', Validators.required],
+      'prefixType': ['']
+    });
+  }
+
+  /**
+   * Submits the account number preference form and creates a account number preference,
+   * if successful redirects to view created account number preference.
+   */
+  submit() {
+    const accountNumberPreference = this.accountNumberPreferenceForm.value;
+    if (accountNumberPreference.prefixType === '') {
+      accountNumberPreference.prefixType = undefined;
+    }
+    this.systemService.createAccountNumberPreference(accountNumberPreference)
+      .subscribe((response: any) => {
+        this.router.navigate(['../', response.resourceId], { relativeTo: this.route });
+      });
+  }
+
+}
diff --git a/src/app/system/account-number-preferences/edit-account-number-preference/edit-account-number-preference.component.html b/src/app/system/account-number-preferences/edit-account-number-preference/edit-account-number-preference.component.html
new file mode 100644
index 000000000..b50b10ba7
--- /dev/null
+++ b/src/app/system/account-number-preferences/edit-account-number-preference/edit-account-number-preference.component.html
@@ -0,0 +1,46 @@
+<div class="container">
+
+  <mat-card>
+
+    <form [formGroup]="accountNumberPreferenceForm" (ngSubmit)="submit()">
+
+      <mat-card-content>
+
+        <div fxLayout="column">
+
+          <mat-form-field>
+            <mat-label>Account Type</mat-label>
+            <mat-select required formControlName="accountType">
+              <mat-option *ngFor="let accountType of accountNumberPreferencesTemplateData.accountTypeOptions" [value]="accountType.id">
+                {{ accountType.value }}
+              </mat-option>
+            </mat-select>
+            <mat-error *ngIf="accountNumberPreferenceForm.controls.accountType.hasError('required')">
+              Account Type is <strong>required</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <mat-form-field>
+            <mat-label>Prefix Field</mat-label>
+            <mat-select formControlName="prefixType">
+              <mat-option *ngFor="let prefixType of prefixTypeData" [value]="prefixType.id">
+                {{ prefixType.value }}
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
+
+        </div>
+
+      </mat-card-content>
+
+      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+        <button type="button" mat-raised-button [routerLink]="['../']">Cancel</button>
+        <button mat-raised-button color="primary"
+          [disabled]="!accountNumberPreferenceForm.valid || accountNumberPreferenceForm.pristine">Submit</button>
+      </mat-card-actions>
+
+    </form>
+
+  </mat-card>
+
+</div>
diff --git a/src/app/system/account-number-preferences/edit-account-number-preference/edit-account-number-preference.component.scss b/src/app/system/account-number-preferences/edit-account-number-preference/edit-account-number-preference.component.scss
new file mode 100644
index 000000000..1915ad6d3
--- /dev/null
+++ b/src/app/system/account-number-preferences/edit-account-number-preference/edit-account-number-preference.component.scss
@@ -0,0 +1,3 @@
+.container {
+    max-width: 37rem;
+}
diff --git a/src/app/system/account-number-preferences/edit-account-number-preference/edit-account-number-preference.component.spec.ts b/src/app/system/account-number-preferences/edit-account-number-preference/edit-account-number-preference.component.spec.ts
new file mode 100644
index 000000000..7b564e51e
--- /dev/null
+++ b/src/app/system/account-number-preferences/edit-account-number-preference/edit-account-number-preference.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EditAccountNumberPreferenceComponent } from './edit-account-number-preference.component';
+
+describe('EditAccountNumberPreferenceComponent', () => {
+  let component: EditAccountNumberPreferenceComponent;
+  let fixture: ComponentFixture<EditAccountNumberPreferenceComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ EditAccountNumberPreferenceComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(EditAccountNumberPreferenceComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/system/account-number-preferences/edit-account-number-preference/edit-account-number-preference.component.ts b/src/app/system/account-number-preferences/edit-account-number-preference/edit-account-number-preference.component.ts
new file mode 100644
index 000000000..eb7ffb969
--- /dev/null
+++ b/src/app/system/account-number-preferences/edit-account-number-preference/edit-account-number-preference.component.ts
@@ -0,0 +1,79 @@
+/** Angular Imports */
+import { Component, OnInit } from '@angular/core';
+import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { ActivatedRoute, Router } from '@angular/router';
+
+/** Custom Services */
+import { SystemService } from 'app/system/system.service';
+
+/**
+ * Edit Account Number Preference Component.
+ */
+@Component({
+  selector: 'mifosx-edit-account-number-preference',
+  templateUrl: './edit-account-number-preference.component.html',
+  styleUrls: ['./edit-account-number-preference.component.scss']
+})
+export class EditAccountNumberPreferenceComponent implements OnInit {
+
+  /** Account Number Preference Form */
+  accountNumberPreferenceForm: FormGroup;
+  /** Account Number Preference Data */
+  accountNumberPreferenceData: any;
+  /** Account Number Preferences Template Data */
+  accountNumberPreferencesTemplateData: any;
+  /** Prefix Type Data */
+  prefixTypeData: any[];
+
+  /**
+   * Retrieves the account number preference and account number preferences template data from `resolve`.
+   * @param {FormBuilder} formBuilder Form Builder.
+   * @param {SystemService} systemService Accounting Service.
+   * @param {ActivatedRoute} route Activated Route.
+   * @param {Router} router Router for navigation.
+   */
+  constructor(private route: ActivatedRoute,
+              private formBuilder: FormBuilder,
+              private systemService: SystemService,
+              private router: Router) {
+    this.route.data.subscribe((data: { accountNumberPreference: any, accountNumberPreferencesTemplate: any }) => {
+      this.accountNumberPreferenceData = data.accountNumberPreference;
+      this.accountNumberPreferencesTemplateData = data.accountNumberPreferencesTemplate;
+    });
+  }
+
+  /**
+   * Sets Prefix type data.
+   * Creates and sets account number preference form.
+   */
+  ngOnInit() {
+    this.prefixTypeData = this.accountNumberPreferencesTemplateData.prefixTypeOptions[this.accountNumberPreferenceData.accountType.code];
+    this.createAccountNumberPreferenceForm();
+  }
+
+  /**
+   * Creates and sets the edit account number preference form.
+   */
+  createAccountNumberPreferenceForm() {
+    this.accountNumberPreferenceForm = this.formBuilder.group({
+      'accountType': [{ value: this.accountNumberPreferenceData.accountType.id, disabled: true }, Validators.required],
+      'prefixType': [this.accountNumberPreferenceData.prefixType ? this.accountNumberPreferenceData.prefixType.id : 0]
+    });
+  }
+
+  /**
+   * Submits the account number preference form and updates the account number preference,
+   * if successful redirects to view account number preference.
+   */
+  submit() {
+    const accountNumberPreferenceValue = this.accountNumberPreferenceForm.value;
+    if (accountNumberPreferenceValue.prefixType === '') {
+      accountNumberPreferenceValue.prefixType = undefined;
+    }
+    this.systemService.updateAccountNumberPreference(this.accountNumberPreferenceData.id, accountNumberPreferenceValue)
+      .subscribe((response: any) => {
+        this.router.navigate(['../'], { relativeTo: this.route });
+      });
+  }
+
+}
diff --git a/src/app/system/account-number-preferences/view-account-number-preference/account-number-preference.resolver.ts b/src/app/system/account-number-preferences/view-account-number-preference/account-number-preference.resolver.ts
new file mode 100644
index 000000000..9527518c9
--- /dev/null
+++ b/src/app/system/account-number-preferences/view-account-number-preference/account-number-preference.resolver.ts
@@ -0,0 +1,31 @@
+/** Angular Imports */
+import { Injectable } from '@angular/core';
+import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+
+/** rxjs Imports */
+import { Observable } from 'rxjs';
+
+/** Custom Services */
+import { SystemService } from '../../system.service';
+
+/**
+ * Account Number Preference data resolver.
+ */
+@Injectable()
+export class AccountNumberPreferenceResolver implements Resolve<Object> {
+
+  /**
+   * @param {SystemService} systemService System service.
+   */
+  constructor(private systemService: SystemService) {}
+
+  /**
+   * Returns the Account Number Preference data.
+   * @returns {Observable<any>}
+   */
+  resolve(route: ActivatedRouteSnapshot): Observable<any> {
+    const accountNumberPreferenceId = route.paramMap.get('id');
+    return this.systemService.getAccountNumberPreference(accountNumberPreferenceId);
+  }
+
+}
diff --git a/src/app/system/account-number-preferences/view-account-number-preference/view-account-number-preference.component.html b/src/app/system/account-number-preferences/view-account-number-preference/view-account-number-preference.component.html
new file mode 100644
index 000000000..d7c63085e
--- /dev/null
+++ b/src/app/system/account-number-preferences/view-account-number-preference/view-account-number-preference.component.html
@@ -0,0 +1,45 @@
+<div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
+
+  <button mat-raised-button color="primary" [routerLink]="['edit']">
+    <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;
+    Edit
+  </button>
+
+  <button mat-raised-button color="warn" (click)="delete()">
+    <fa-icon icon="trash"></fa-icon>&nbsp;&nbsp;
+    Delete
+  </button>
+
+</div>
+
+<div class="container">
+
+  <mat-card>
+
+    <mat-card-content>
+
+      <div fxLayout="row wrap" class="content">
+
+        <div fxFlex="50%" class="mat-body-strong">
+          Account Type
+        </div>
+
+        <div fxFlex="50%">
+          {{ accountNumberPreferenceData.accountType.value }}
+        </div>
+
+        <div fxFlex="50%" class="mat-body-strong" *ngIf="accountNumberPreferenceData.prefixType">
+          Prefix Type
+        </div>
+
+        <div fxFlex="50%" *ngIf="accountNumberPreferenceData.prefixType">
+          {{ accountNumberPreferenceData.prefixType.value }}
+        </div>
+
+      </div>
+
+    </mat-card-content>
+
+  </mat-card>
+
+</div>
diff --git a/src/app/system/account-number-preferences/view-account-number-preference/view-account-number-preference.component.scss b/src/app/system/account-number-preferences/view-account-number-preference/view-account-number-preference.component.scss
new file mode 100644
index 000000000..56cf70e8b
--- /dev/null
+++ b/src/app/system/account-number-preferences/view-account-number-preference/view-account-number-preference.component.scss
@@ -0,0 +1,10 @@
+.container {
+  max-width: 37rem;
+  
+    .content {
+      div {
+        margin: 1rem 0;
+        word-wrap: break-word;
+      }
+    }
+  }
diff --git a/src/app/system/account-number-preferences/view-account-number-preference/view-account-number-preference.component.spec.ts b/src/app/system/account-number-preferences/view-account-number-preference/view-account-number-preference.component.spec.ts
new file mode 100644
index 000000000..75549a1c7
--- /dev/null
+++ b/src/app/system/account-number-preferences/view-account-number-preference/view-account-number-preference.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ViewAccountNumberPreferenceComponent } from './view-account-number-preference.component';
+
+describe('ViewAccountNumberPreferenceComponent', () => {
+  let component: ViewAccountNumberPreferenceComponent;
+  let fixture: ComponentFixture<ViewAccountNumberPreferenceComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ViewAccountNumberPreferenceComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ViewAccountNumberPreferenceComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/system/account-number-preferences/view-account-number-preference/view-account-number-preference.component.ts b/src/app/system/account-number-preferences/view-account-number-preference/view-account-number-preference.component.ts
new file mode 100644
index 000000000..5490a4087
--- /dev/null
+++ b/src/app/system/account-number-preferences/view-account-number-preference/view-account-number-preference.component.ts
@@ -0,0 +1,61 @@
+/** Angular Imports */
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { MatDialog } from '@angular/material';
+
+/** Custom Services */
+import { SystemService } from '../../system.service';
+
+/** Custom Components */
+import { DeleteDialogComponent } from 'app/shared/delete-dialog/delete-dialog.component';
+
+/**
+ * View Account Number Preference Component.
+ */
+@Component({
+  selector: 'mifosx-view-account-number-preference',
+  templateUrl: './view-account-number-preference.component.html',
+  styleUrls: ['./view-account-number-preference.component.scss']
+})
+export class ViewAccountNumberPreferenceComponent implements OnInit {
+
+  /** Account Number Preference Data */
+  accountNumberPreferenceData: any;
+
+  /**
+   * Retrieves the account number preference data from `resolve`.
+   * @param {SystemService} systemService Accounting Service.
+   * @param {ActivatedRoute} route Activated Route.
+   * @param {Router} router Router for navigation.
+   * @param {MatDialog} dialog Dialog reference.
+   */
+  constructor(private route: ActivatedRoute,
+              private systemService: SystemService,
+              private router: Router,
+              private dialog: MatDialog) {
+    this.route.data.subscribe((data: { accountNumberPreference: any }) => {
+      this.accountNumberPreferenceData = data.accountNumberPreference;
+    });
+  }
+
+  ngOnInit() {
+  }
+
+  /**
+   * Deletes the account number preference and redirects to account number preferences.
+   */
+  delete() {
+    const deleteAccountNumberPreferenceDialogRef = this.dialog.open(DeleteDialogComponent, {
+      data: { deleteContext: `account number preference ${this.accountNumberPreferenceData.id}` }
+    });
+    deleteAccountNumberPreferenceDialogRef.afterClosed().subscribe((response: any) => {
+      if (response.delete) {
+        this.systemService.deleteAccountNumberPreference(this.accountNumberPreferenceData.id)
+          .subscribe(() => {
+            this.router.navigate(['/system/account-number-preferences']);
+          });
+      }
+    });
+  }
+
+}
diff --git a/src/app/system/system-routing.module.ts b/src/app/system/system-routing.module.ts
index b1eb8e95c..5ea27adf1 100644
--- a/src/app/system/system-routing.module.ts
+++ b/src/app/system/system-routing.module.ts
@@ -27,6 +27,10 @@ import { EditAmazonS3Component } from './external-services/amazon-s3/edit-amazon
 import { EditEmailComponent } from './external-services/email/edit-email/edit-email.component';
 import { EditNotificationComponent } from './external-services/notification/edit-notification/edit-notification.component';
 import { EditSMSComponent } from './external-services/sms/edit-sms/edit-sms.component';
+import { AccountNumberPreferencesComponent } from './account-number-preferences/account-number-preferences.component';
+import { CreateAccountNumberPreferenceComponent } from './account-number-preferences/create-account-number-preference/create-account-number-preference.component';
+import { ViewAccountNumberPreferenceComponent } from './account-number-preferences/view-account-number-preference/view-account-number-preference.component';
+import { EditAccountNumberPreferenceComponent } from './account-number-preferences/edit-account-number-preference/edit-account-number-preference.component';
 
 /** Custom Resolvers */
 import { CodesResolver } from './codes/codes.resolver';
@@ -43,6 +47,9 @@ import { AmazonS3ConfigurationResolver } from './external-services/amazon-s3/ama
 import { EmailConfigurationResolver } from './external-services/email/email.resolver';
 import { SMSConfigurationResolver } from './external-services/sms/sms.resolver';
 import { NotificationConfigurationResolver } from './external-services/notification/notification.resolver';
+import { AccountNumberPreferencesResolver } from './account-number-preferences/account-number-preferences.resolver';
+import { AccountNumberPreferencesTemplateResolver } from './account-number-preferences/create-account-number-preference/account-number-preferences-template.resolver';
+import { AccountNumberPreferenceResolver } from './account-number-preferences/view-account-number-preference/account-number-preference.resolver';
 
 const routes: Routes = [
   Route.withShell([
@@ -249,8 +256,50 @@ const routes: Routes = [
             }
           }
         ],
-
         },
+        {
+          path: 'account-number-preferences',
+          data: { title: extract('Account Number Preferences'), breadcrumb: 'Account Number Preferences' },
+          children: [
+            {
+              path: '',
+              component: AccountNumberPreferencesComponent,
+              resolve: {
+                accountNumberPreferences: AccountNumberPreferencesResolver
+              }
+            },
+            {
+              path: 'create',
+              component: CreateAccountNumberPreferenceComponent,
+              data: { title: extract('Create Account Number Preference'), breadcrumb: 'Create' },
+              resolve: {
+                accountNumberPreferencesTemplate: AccountNumberPreferencesTemplateResolver
+              }
+            },
+            {
+              path: ':id',
+              data: { title: extract('View Account Number Preference'), routeParamBreadcrumb: 'id' },
+              children: [
+                {
+                  path: '',
+                  component: ViewAccountNumberPreferenceComponent,
+                  resolve: {
+                    accountNumberPreference: AccountNumberPreferenceResolver
+                  }
+                },
+                {
+                  path: 'edit',
+                  component: EditAccountNumberPreferenceComponent,
+                  data: { title: extract('Edit Account Number Preference'), breadcrumb: 'Edit', routeParamBreadcrumb: false },
+                  resolve: {
+                    accountNumberPreference: AccountNumberPreferenceResolver,
+                    accountNumberPreferencesTemplate: AccountNumberPreferencesTemplateResolver
+                  }
+                }
+              ]
+            }
+          ]
+        }
       ]
     }
   ])
@@ -273,7 +322,10 @@ const routes: Routes = [
     AmazonS3ConfigurationResolver,
     EmailConfigurationResolver,
     SMSConfigurationResolver,
-    NotificationConfigurationResolver
+    NotificationConfigurationResolver,
+    AccountNumberPreferencesResolver,
+    AccountNumberPreferencesTemplateResolver,
+    AccountNumberPreferenceResolver
   ]
 })
 export class SystemRoutingModule { }
diff --git a/src/app/system/system.component.html b/src/app/system/system.component.html
index 620a2d2a1..ff79f6c60 100644
--- a/src/app/system/system.component.html
+++ b/src/app/system/system.component.html
@@ -104,7 +104,7 @@
             <p matLine>Global configurations and Cache settings</p>
           </mat-list-item>
 
-          <mat-list-item>
+          <mat-list-item [routerLink]="['account-number-preferences']">
             <mat-icon matListIcon>
               <fa-icon icon="key" size="sm"></fa-icon>
             </mat-icon>
diff --git a/src/app/system/system.module.ts b/src/app/system/system.module.ts
index 9be4342c5..f6e767b65 100644
--- a/src/app/system/system.module.ts
+++ b/src/app/system/system.module.ts
@@ -27,6 +27,10 @@ import { EditNotificationComponent } from './external-services/notification/edit
 import { EditSMSComponent } from './external-services/sms/edit-sms/edit-sms.component';
 import { ViewCodeComponent } from './codes/view-code/view-code.component';
 import { EditCodeComponent } from './codes/edit-code/edit-code.component';
+import { AccountNumberPreferencesComponent } from './account-number-preferences/account-number-preferences.component';
+import { CreateAccountNumberPreferenceComponent } from './account-number-preferences/create-account-number-preference/create-account-number-preference.component';
+import { ViewAccountNumberPreferenceComponent } from './account-number-preferences/view-account-number-preference/view-account-number-preference.component';
+import { EditAccountNumberPreferenceComponent } from './account-number-preferences/edit-account-number-preference/edit-account-number-preference.component';
 
 @NgModule({
   imports: [
@@ -54,7 +58,11 @@ import { EditCodeComponent } from './codes/edit-code/edit-code.component';
     EditAmazonS3Component,
     EditEmailComponent,
     EditNotificationComponent,
-    EditSMSComponent
+    EditSMSComponent,
+    AccountNumberPreferencesComponent,
+    CreateAccountNumberPreferenceComponent,
+    ViewAccountNumberPreferenceComponent,
+    EditAccountNumberPreferenceComponent
   ]
 })
 export class SystemModule { }
diff --git a/src/app/system/system.service.ts b/src/app/system/system.service.ts
index 1640858f2..5714d3e58 100644
--- a/src/app/system/system.service.ts
+++ b/src/app/system/system.service.ts
@@ -177,4 +177,51 @@ export class SystemService {
     return this.http.put(`/externalservice/${externalConfigurationName}`, externalConfiguration);
   }
 
+  /**
+   * @returns {Observable<any>} Account number preferences.
+   */
+  getAccountNumberPreferences(): Observable<any> {
+    return this.http.get('/accountnumberformats');
+  }
+
+  /**
+   * @returns {Observable<any>} Fetches Account Number Preferences Template.
+   */
+  getAccountNumberPreferencesTemplate(): Observable<any> {
+    return this.http.get('/accountnumberformats/template');
+  }
+
+  /**
+   * @param {string} accountNumberPreferenceId Account Number Preference ID.
+   * @returns {Observable<any>} Fetches Account Number Preference.
+   */
+  getAccountNumberPreference(accountNumberPreferenceId: string): Observable<any> {
+    return this.http.get(`/accountnumberformats/${accountNumberPreferenceId}`);
+  }
+
+  /**
+   * @param accountNumberPreference Account Number Preference.
+   * @returns {Observable<any>}
+   */
+  createAccountNumberPreference(accountNumberPreference: any): Observable<any> {
+    return this.http.post('/accountnumberformats', accountNumberPreference);
+  }
+
+  /**
+   * @param {string} accountNumberPreferenceId Account Number Preference ID.
+   * @returns {Observable<any>}
+   */
+  deleteAccountNumberPreference(accountNumberPreferenceId: string): Observable<any> {
+    return this.http.delete(`/accountnumberformats/${accountNumberPreferenceId}`);
+  }
+
+  /**
+   * @param {string} accountNumberPreferenceId Account Number Preference ID.
+   * @param {any} accountNumberPreferenceChanges Changes in Account Number Preference.
+   * @returns {Observable<any>}
+   */
+  updateAccountNumberPreference(accountNumberPreferenceId: string, accountNumberPreferenceChanges: any): Observable<any> {
+    return this.http.put(`/accountnumberformats/${accountNumberPreferenceId}`, accountNumberPreferenceChanges);
+  }
+
 }