diff --git a/src/app/system/codes/codes.component.html b/src/app/system/codes/codes.component.html
index e5f48343f..1cf03296e 100644
--- a/src/app/system/codes/codes.component.html
+++ b/src/app/system/codes/codes.component.html
@@ -10,22 +10,27 @@
   <div fxLayout="row">
     <mat-form-field fxFlex>
       <mat-label>Filter</mat-label>
-      <input matInput>
+      <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="codeName">
+      <ng-container matColumnDef="name">
         <th mat-header-cell *matHeaderCellDef mat-sort-header> Code Name </th>
+        <td mat-cell *matCellDef="let code"> {{ code.name }} </td>
       </ng-container>
 
       <ng-container matColumnDef="systemDefined">
         <th mat-header-cell *matHeaderCellDef mat-sort-header> System Defined </th>
+        <td mat-cell *matCellDef="let code">
+          <fa-icon *ngIf="code.systemDefined" icon="check-circle" size="lg" class="system-defined" matTooltip="Yes" matTooltipPosition="right"></fa-icon>
+          <fa-icon *ngIf="!code.systemDefined" icon="times-circle" size="lg" class="not-system-defined" matTooltip="No" matTooltipPosition="right"></fa-icon>
+        </td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="['view', row.id]" class="select-row"></tr>
     </table>
 
     <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
diff --git a/src/app/system/codes/codes.component.scss b/src/app/system/codes/codes.component.scss
index 1922e7ffa..3a95ea579 100644
--- a/src/app/system/codes/codes.component.scss
+++ b/src/app/system/codes/codes.component.scss
@@ -1,3 +1,12 @@
 table {
   width: 100%;
 }
+
+// TODO: CONFIGURE THESE CLASSES GLOBALLY
+.system-defined {
+  color: #32cd32;
+}
+
+.not-system-defined {
+  color: #f44366;
+}
diff --git a/src/app/system/codes/codes.component.ts b/src/app/system/codes/codes.component.ts
index 268760c30..5c5297daf 100644
--- a/src/app/system/codes/codes.component.ts
+++ b/src/app/system/codes/codes.component.ts
@@ -1,5 +1,7 @@
+/** Angular Imports */
 import { Component, OnInit, ViewChild } from '@angular/core';
-import { MatPaginator, MatSort, MatTableDataSource } from '@angular/material';
+import { MatTableDataSource, MatPaginator, MatSort } from '@angular/material';
+import { ActivatedRoute } from '@angular/router';
 
 @Component({
   selector: 'mifosx-codes',
@@ -11,7 +13,7 @@ export class CodesComponent implements OnInit {
   /** Codes data. */
   codesData: any;
   /** Columns to be displayed in codes table. */
-  displayedColumns: string[] = ['codeName', 'systemDefined'];
+  displayedColumns: string[] = ['name', 'systemDefined'];
   /** Data source for codes table. */
   dataSource: MatTableDataSource<any>;
 
@@ -20,9 +22,39 @@ export class CodesComponent implements OnInit {
   /** Sorter for codes table. */
   @ViewChild(MatSort) sort: MatSort;
 
-  constructor() { }
+  /**
+   * Retrieves the codes data from `resolve`.
+   * @param {ActivatedRoute} route Activated Route.
+   */
+  constructor(private route: ActivatedRoute) {
+    this.route.data.subscribe(( data: { codes: any }) => {
+      this.codesData = data.codes;
+    });
+  }
 
+  /**
+   * Sets the codes table.
+   */
   ngOnInit() {
+    this.setCodes();
+  }
+
+  /**
+   * Initializes the data source, paginator and sorter for codes table.
+   */
+  setCodes() {
+    this.dataSource = new MatTableDataSource(this.codesData);
+    console.log(this.codesData);
+    this.dataSource.paginator = this.paginator;
+    this.dataSource.sort = this.sort;
+  }
+
+  /**
+   * Filters data in codes table based on passed value.
+   * @param {string} filterValue Value to filter data.
+   */
+  applyFilter(filterValue: string) {
+    this.dataSource.filter = filterValue.trim().toLowerCase();
   }
 
 }
diff --git a/src/app/system/codes/codes.resolver.ts b/src/app/system/codes/codes.resolver.ts
new file mode 100644
index 000000000..ca0dc6565
--- /dev/null
+++ b/src/app/system/codes/codes.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';
+
+/**
+ * Codes data resolver.
+ */
+@Injectable()
+export class CodesResolver implements Resolve<Object> {
+
+  /**
+   * @param {SystemService} systemService System service.
+   */
+  constructor(private systemService: SystemService) {}
+
+  /**
+   * Returns the Codes data.
+   * @returns {Observable<any>}
+   */
+  resolve(): Observable<any> {
+    return this.systemService.getCodes();
+  }
+
+}
diff --git a/src/app/system/system-routing.module.ts b/src/app/system/system-routing.module.ts
index a512439cc..b571ab73a 100644
--- a/src/app/system/system-routing.module.ts
+++ b/src/app/system/system-routing.module.ts
@@ -9,6 +9,9 @@ import { extract } from '../core/i18n/i18n.service';
 import { SystemComponent } from './system.component';
 import { CodesComponent } from './codes/codes.component';
 
+/** Custom Resolvers */
+import { CodesResolver } from './codes/codes.resolver';
+
 const routes: Routes = [
   Route.withShell([
     {
@@ -22,7 +25,10 @@ const routes: Routes = [
       {
         path: 'codes',
         component: CodesComponent,
-        data: { title: extract('View Codes'), breadcrumb: 'Codes' }
+        data: { title: extract('View Codes'), breadcrumb: 'Codes' },
+        resolve: {
+          codes: CodesResolver
+        }
       }
     ]
     }
@@ -31,6 +37,7 @@ const routes: Routes = [
 
 @NgModule({
   imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule]
+  exports: [RouterModule],
+  providers: [CodesResolver]
 })
 export class SystemRoutingModule { }
diff --git a/src/app/system/system.module.ts b/src/app/system/system.module.ts
index fc1ec8962..a1fbec7e4 100644
--- a/src/app/system/system.module.ts
+++ b/src/app/system/system.module.ts
@@ -1,10 +1,13 @@
+/** Angular Imports */
 import { NgModule } from '@angular/core';
 
+/** Module Imports */
 import { SharedModule } from '../shared/shared.module';
-import { SystemComponent } from './system.component';
-
 import { SystemRoutingModule } from './system-routing.module';
+
+/** Component Imports */
 import { CodesComponent } from './codes/codes.component';
+import { SystemComponent } from './system.component';
 
 @NgModule({
   imports: [
diff --git a/src/app/system/system.service.spec.ts b/src/app/system/system.service.spec.ts
new file mode 100644
index 000000000..b80ff6b65
--- /dev/null
+++ b/src/app/system/system.service.spec.ts
@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { SystemService } from './system.service';
+
+describe('SystemService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: SystemService = TestBed.get(SystemService);
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/src/app/system/system.service.ts b/src/app/system/system.service.ts
new file mode 100644
index 000000000..e2b5c1095
--- /dev/null
+++ b/src/app/system/system.service.ts
@@ -0,0 +1,28 @@
+/** Angular Imports */
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpParams } from '@angular/common/http';
+
+/** rxjs Imports */
+import { Observable } from 'rxjs';
+
+/**
+ * System service.
+ */
+@Injectable({
+  providedIn: 'root'
+})
+export class SystemService {
+
+  /**
+   * @param {HttpClient} http Http Client to send requests.
+   */
+  constructor(private http: HttpClient) { }
+
+  /**
+   * @returns {Observable<any>} Fetches Codes.
+   */
+  getCodes(): Observable<any> {
+    return this.http.get('/codes');
+  }
+
+}