diff --git a/src/app/products/manage-tax-groups/create-tax-group/create-tax-group.component.html b/src/app/products/manage-tax-groups/create-tax-group/create-tax-group.component.html
new file mode 100644
index 000000000..98386d920
--- /dev/null
+++ b/src/app/products/manage-tax-groups/create-tax-group/create-tax-group.component.html
@@ -0,0 +1,75 @@
+<div class="container">
+
+  <mat-card>
+
+    <form [formGroup]="taxGroupForm" (ngSubmit)="submit()">
+
+      <mat-card-content>
+
+        <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
+
+          <mat-form-field fxFlex="100%">
+            <mat-label>Name</mat-label>
+            <input matInput required formControlName="name">
+            <mat-error *ngIf="taxGroupForm.controls.name.hasError('required')">
+              Name is <strong>required</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <h3 fxFlex="40%" class="mat-h3">Tax Components</h3>
+
+          <div fxFlex="40%" fxLayout="row" fxLayoutAlign="start center">
+            <button type="button" mat-raised-button color="primary" (click)="addTaxGroup()">
+              <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+              Add
+            </button>
+          </div>
+
+          <table mat-table [dataSource]="taxComponentsDataSource" [hidden]="taxComponentsDataSource.length === 0">
+
+            <ng-container matColumnDef="name">
+              <th mat-header-cell *matHeaderCellDef> Name </th>
+              <td mat-cell *matCellDef="let taxComponent">
+                {{ taxComponent.taxComponentId | find: taxComponentOptions:'id':'name'}} </td>
+            </ng-container>
+
+            <ng-container matColumnDef="startDate">
+              <th mat-header-cell *matHeaderCellDef> Start Date </th>
+              <td mat-cell *matCellDef="let taxComponent"> {{ taxComponent.startDate | date }}
+              </td>
+            </ng-container>
+
+            <ng-container matColumnDef="actions">
+              <th mat-header-cell *matHeaderCellDef> Actions </th>
+              <td mat-cell *matCellDef="let taxComponent; let taxComponentIndex = index">
+                <button type="button" mat-icon-button color="primary" (click)="editTaxGroup(taxComponent, taxComponentIndex)"
+                  matTooltip="Edit" matTooltipPosition="left">
+                  <fa-icon icon="edit"></fa-icon>
+                </button>
+                <button type="button" mat-icon-button color="warn"
+                  (click)="delete(taxComponentIndex)" matTooltip="Delete"
+                  matTooltipPosition="left">
+                  <fa-icon icon="trash"></fa-icon>
+                </button>
+              </td>
+            </ng-container>
+
+            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+            <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+
+          </table>
+
+        </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]="!taxGroupForm.valid">Submit</button>
+      </mat-card-actions>
+
+    </form>
+
+  </mat-card>
+
+</div>
diff --git a/src/app/products/manage-tax-groups/create-tax-group/create-tax-group.component.scss b/src/app/products/manage-tax-groups/create-tax-group/create-tax-group.component.scss
new file mode 100644
index 000000000..2968558fe
--- /dev/null
+++ b/src/app/products/manage-tax-groups/create-tax-group/create-tax-group.component.scss
@@ -0,0 +1,7 @@
+.container {
+  max-width: 37rem;
+}
+
+table {
+  width: 100%;
+}
diff --git a/src/app/products/manage-tax-groups/create-tax-group/create-tax-group.component.spec.ts b/src/app/products/manage-tax-groups/create-tax-group/create-tax-group.component.spec.ts
new file mode 100644
index 000000000..b0c6fd56b
--- /dev/null
+++ b/src/app/products/manage-tax-groups/create-tax-group/create-tax-group.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CreateTaxGroupComponent } from './create-tax-group.component';
+
+describe('CreateTaxGroupComponent', () => {
+  let component: CreateTaxGroupComponent;
+  let fixture: ComponentFixture<CreateTaxGroupComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CreateTaxGroupComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CreateTaxGroupComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/products/manage-tax-groups/create-tax-group/create-tax-group.component.ts b/src/app/products/manage-tax-groups/create-tax-group/create-tax-group.component.ts
new file mode 100644
index 000000000..b93ae6b9c
--- /dev/null
+++ b/src/app/products/manage-tax-groups/create-tax-group/create-tax-group.component.ts
@@ -0,0 +1,190 @@
+/** Angular Imports */
+import { Component, OnInit } from '@angular/core';
+import { FormGroup, FormBuilder, Validators, FormControl, FormArray } from '@angular/forms';
+import { Router, ActivatedRoute } from '@angular/router';
+import { DatePipe } from '@angular/common';
+import { MatDialog } from '@angular/material';
+
+/** Custom Services */
+import { ProductsService } from '../../products.service';
+
+/** Dialog Components */
+import { FormfieldBase } from 'app/shared/form-dialog/formfield/model/formfield-base';
+import { SelectBase } from 'app/shared/form-dialog/formfield/model/select-base';
+import { DatepickerBase } from 'app/shared/form-dialog/formfield/model/datepicker-base';
+import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.component';
+import { DeleteDialogComponent } from 'app/shared/delete-dialog/delete-dialog.component';
+
+/**
+ * Create Tax Group component.
+ */
+@Component({
+  selector: 'mifosx-create-tax-group',
+  templateUrl: './create-tax-group.component.html',
+  styleUrls: ['./create-tax-group.component.scss']
+})
+export class CreateTaxGroupComponent implements OnInit {
+
+  /** Minimum start date allowed. */
+  minDate = new Date(2000, 0, 1);
+  /** Maximum start date allowed. */
+  maxDate = new Date(2100, 0, 1);
+  /** Tax Group form. */
+  taxGroupForm: FormGroup;
+  /** Tax Group template data. */
+  taxGroupTemplateData: any;
+  /** Tax Component Data Source */
+  taxComponentsDataSource: {}[];
+  /** Tax Component Options */
+  taxComponentOptions: any;
+
+  /** Tax Component Displayed Columns */
+  displayedColumns: string[] = ['name', 'startDate', 'actions'];
+
+  /**
+   * Retrieves the tax Group template data from `resolve`.
+   * @param {FormBuilder} formBuilder Form Builder.
+   * @param {ProductsService} productsService Products Service.
+   * @param {ActivatedRoute} route Activated Route.
+   * @param {Router} router Router for navigation.
+   * @param {DatePipe} datePipe Date Pipe to format date.
+   */
+  constructor(private formBuilder: FormBuilder,
+    private productsService: ProductsService,
+    private route: ActivatedRoute,
+    private router: Router,
+    private datePipe: DatePipe,
+    public dialog: MatDialog) {
+    this.route.data.subscribe((data: { taxGroupTemplate: any }) => {
+      this.taxGroupTemplateData = data.taxGroupTemplate;
+      this.taxComponentOptions = this.taxGroupTemplateData.taxComponents;
+    });
+  }
+
+  ngOnInit() {
+    this.createTaxGroupForm();
+    this.taxComponentsDataSource = [];
+  }
+
+  /**
+   * Creates the tax Group form
+   */
+  createTaxGroupForm() {
+    this.taxGroupForm = this.formBuilder.group({
+      'name': ['', Validators.required]
+    });
+  }
+
+  /**
+   * Add Tax Component in Tax Group
+   */
+  addTaxGroup() {
+    const formfields: FormfieldBase[] = [
+      new SelectBase({
+        controlName: 'taxComponentId',
+        label: 'Tax Component',
+        options: { label: 'name', value: 'id', data: this.taxComponentOptions },
+        order: 1
+      }),
+      new DatepickerBase({
+        controlName: 'startDate',
+        label: 'Start Date',
+        minDate: this.minDate,
+        maxDate: this.maxDate,
+        order: 2
+      })
+    ];
+    const data = {
+      title: 'Add Tax Component',
+      layout: { addButtonText: 'Add' },
+      formfields: formfields
+    };
+    const memberAttendanceDialogRef = this.dialog.open(FormDialogComponent, { data });
+    memberAttendanceDialogRef.afterClosed().subscribe((response: any) => {
+      if (response.data) {
+        // this.taxComponents.push(response.data.value);
+        this.taxComponentsDataSource = this.taxComponentsDataSource.concat(response.data.value);
+
+        console.log('tjos.taxComponents: ', this.taxComponentsDataSource);
+      }
+    });
+  }
+
+  /**
+   * Edit Tax Component in Tax Group
+   */
+  editTaxGroup(taxComponent: any, index: any) {
+    const formfields: FormfieldBase[] = [
+      new SelectBase({
+        controlName: 'taxComponentId',
+        value: taxComponent.taxComponentId ? taxComponent.taxComponentId : '',
+        label: 'Tax Component',
+        options: { label: 'name', value: 'id', data: this.taxComponentOptions },
+        order: 1
+      }),
+      new DatepickerBase({
+        controlName: 'startDate',
+        value: taxComponent.startDate ? new Date(taxComponent.startDate) : new Date(),
+        label: 'Start Date',
+        minDate: this.minDate,
+        maxDate: this.maxDate,
+        order: 2
+      })
+    ];
+    const data = {
+      title: 'Edit Tax Component',
+      layout: { addButtonText: 'Submit' },
+      formfields: formfields
+    };
+    const memberAttendanceDialogRef = this.dialog.open(FormDialogComponent, { data });
+    memberAttendanceDialogRef.afterClosed().subscribe((response: any) => {
+      if (response.data) {
+        // this.taxComponents.push(response.data.value);
+        // this.taxComponentsDataSource = this.taxComponentsDataSource.concat(response.data.value);
+        const updatedMemeber = { ...taxComponent, ...response.data.value };
+        this.taxComponentsDataSource.splice(this.taxComponentsDataSource.indexOf(taxComponent), 1, updatedMemeber);
+        this.taxComponentsDataSource = this.taxComponentsDataSource.concat([]);
+        console.log('tjos.taxComponents: ', this.taxComponentsDataSource);
+      }
+    });
+  }
+
+  /**
+   * Delete particular Tax Component in Tax Group
+   */
+  delete(index: number) {
+    const dialogRef = this.dialog.open(DeleteDialogComponent, {
+      data: { deleteContext: `this` }
+    });
+    dialogRef.afterClosed().subscribe((response: any) => {
+      if (response.delete) {
+        this.taxComponentsDataSource.splice(index, 1);
+        this.taxComponentsDataSource = this.taxComponentsDataSource.concat([]);
+      }
+    });
+  }
+
+  /**
+   * Submits the tax Group form and creates the tax Group,
+   * if successful redirects to Tax Groups.
+   */
+  submit() {
+    const dateFormat = 'yyyy-MM-dd';
+    const locale = 'en';
+    const taxGroup = {
+      ...this.taxGroupForm.value,
+      taxComponents: this.taxComponentsDataSource,
+      dateFormat,
+      locale
+    };
+    console.log(taxGroup);
+
+    for (const taxComponent of taxGroup.taxComponents) {
+      taxComponent.startDate = this.datePipe.transform(taxComponent.startDate, dateFormat) || '';
+    }
+    this.productsService.createTaxGroup(taxGroup).subscribe((response: any) => {
+      this.router.navigate(['../', response.resourceId], { relativeTo: this.route });
+    });
+  }
+
+}
diff --git a/src/app/products/manage-tax-groups/create-tax-group/manage-tax-group-template.resolver.ts b/src/app/products/manage-tax-groups/create-tax-group/manage-tax-group-template.resolver.ts
new file mode 100644
index 000000000..e36396f2d
--- /dev/null
+++ b/src/app/products/manage-tax-groups/create-tax-group/manage-tax-group-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 { ProductsService } from '../../products.service';
+
+/**
+ * Tax Group template data resolver.
+ */
+@Injectable()
+export class ManageTaxGroupTemplateResolver implements Resolve<Object> {
+
+    /**
+     * @param {ProductsService} productsService Products service.
+     */
+    constructor(private productsService: ProductsService) { }
+
+    /**
+     * Returns the tax groups template data.
+     * @returns {Observable<any>}
+     */
+    resolve(): Observable<any> {
+        return this.productsService.getTaxGroupTemplate();
+    }
+
+}
diff --git a/src/app/products/manage-tax-groups/edit-tax-group/edit-tax-group.component.html b/src/app/products/manage-tax-groups/edit-tax-group/edit-tax-group.component.html
new file mode 100644
index 000000000..a2a3092d6
--- /dev/null
+++ b/src/app/products/manage-tax-groups/edit-tax-group/edit-tax-group.component.html
@@ -0,0 +1,81 @@
+<div class="container">
+
+  <mat-card>
+
+    <form [formGroup]="taxGroupForm" (ngSubmit)="submit()">
+
+      <mat-card-content>
+
+        <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
+
+          <mat-form-field fxFlex="100%">
+            <mat-label>Name</mat-label>
+            <input matInput required formControlName="name">
+            <mat-error *ngIf="taxGroupForm.controls.name.hasError('required')">
+              Name is <strong>required</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <h3 fxFlex="40%" class="mat-h3">Tax Components</h3>
+
+          <div fxFlex="40%" fxLayout="row" fxLayoutAlign="start center">
+            <button type="button" mat-raised-button color="primary" (click)="addTaxGroup()">
+              <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+              Add
+            </button>
+          </div>
+
+          <table mat-table [dataSource]="taxComponentsDataSource" [hidden]="taxComponentsDataSource.length === 0">
+
+            <ng-container matColumnDef="name">
+              <th mat-header-cell *matHeaderCellDef> Name </th>
+              <td mat-cell *matCellDef="let taxComponent">
+                {{ taxComponent.taxComponentId | find: taxComponentOptions:'id':'name'}} </td>
+            </ng-container>
+
+            <ng-container matColumnDef="startDate">
+              <th mat-header-cell *matHeaderCellDef> Start Date </th>
+              <td mat-cell *matCellDef="let taxComponent"> {{ taxComponent.startDate | date }}
+              </td>
+            </ng-container>
+
+            <ng-container matColumnDef="endDate">
+              <th mat-header-cell *matHeaderCellDef> End Date </th>
+              <td mat-cell *matCellDef="let taxComponent"> {{ taxComponent.endDate ? (taxComponent.endDate | date) : '' }}
+              </td>
+            </ng-container>
+
+            <ng-container matColumnDef="actions">
+              <th mat-header-cell *matHeaderCellDef> Actions </th>
+              <td mat-cell *matCellDef="let taxComponent; let taxComponentIndex = index">
+                <button type="button" mat-icon-button color="primary" (click)="editTaxGroup(taxComponent, taxComponentIndex)"
+                  matTooltip="Edit" matTooltipPosition="left">
+                  <fa-icon icon="edit"></fa-icon>
+                </button>
+                <button type="button" mat-icon-button color="warn" *ngIf="taxComponent.isNew"
+                  (click)="delete(taxComponentIndex)" matTooltip="Delete Interest Rate Chart"
+                  matTooltipPosition="left">
+                  <fa-icon icon="trash"></fa-icon>
+                </button>
+              </td>
+            </ng-container>
+
+            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+            <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+
+          </table>
+
+        </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]="!taxGroupForm.valid">Submit</button>
+      </mat-card-actions>
+
+    </form>
+
+  </mat-card>
+
+</div>
diff --git a/src/app/products/manage-tax-groups/edit-tax-group/edit-tax-group.component.scss b/src/app/products/manage-tax-groups/edit-tax-group/edit-tax-group.component.scss
new file mode 100644
index 000000000..d774f68da
--- /dev/null
+++ b/src/app/products/manage-tax-groups/edit-tax-group/edit-tax-group.component.scss
@@ -0,0 +1,3 @@
+.container {
+  max-width: 37rem;
+}
diff --git a/src/app/products/manage-tax-groups/edit-tax-group/edit-tax-group.component.spec.ts b/src/app/products/manage-tax-groups/edit-tax-group/edit-tax-group.component.spec.ts
new file mode 100644
index 000000000..f0ab794b0
--- /dev/null
+++ b/src/app/products/manage-tax-groups/edit-tax-group/edit-tax-group.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EditTaxGroupComponent } from './edit-tax-group.component';
+
+describe('EditTaxGroupComponent', () => {
+  let component: EditTaxGroupComponent;
+  let fixture: ComponentFixture<EditTaxGroupComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ EditTaxGroupComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(EditTaxGroupComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/products/manage-tax-groups/edit-tax-group/edit-tax-group.component.ts b/src/app/products/manage-tax-groups/edit-tax-group/edit-tax-group.component.ts
new file mode 100644
index 000000000..411dea0fb
--- /dev/null
+++ b/src/app/products/manage-tax-groups/edit-tax-group/edit-tax-group.component.ts
@@ -0,0 +1,217 @@
+/** Angular Imports */
+import { Component, OnInit } from '@angular/core';
+import { FormGroup, FormBuilder, Validators, FormControl, FormArray } from '@angular/forms';
+import { Router, ActivatedRoute } from '@angular/router';
+import { DatePipe } from '@angular/common';
+import { MatDialog } from '@angular/material';
+
+/** Custom Services */
+import { ProductsService } from '../../products.service';
+
+/** Dialog Components */
+import { FormfieldBase } from 'app/shared/form-dialog/formfield/model/formfield-base';
+import { SelectBase } from 'app/shared/form-dialog/formfield/model/select-base';
+import { DatepickerBase } from 'app/shared/form-dialog/formfield/model/datepicker-base';
+import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.component';
+import { DeleteDialogComponent } from 'app/shared/delete-dialog/delete-dialog.component';
+
+/**
+ * Edit Tax Group component.
+ */
+@Component({
+  selector: 'mifosx-edit-tax-group',
+  templateUrl: './edit-tax-group.component.html',
+  styleUrls: ['./edit-tax-group.component.scss']
+})
+export class EditTaxGroupComponent implements OnInit {
+
+  /** Minimum start date allowed. */
+  minDate = new Date(2000, 0, 1);
+  /** Maximum start date allowed. */
+  maxDate = new Date(2100, 0, 1);
+  /** Tax Group form. */
+  taxGroupForm: FormGroup;
+  /** Tax Group template data. */
+  taxGroupData: any;
+  /** Tax Component Data Source */
+  taxComponentsDataSource: {}[];
+  /** Tax Component Options */
+  taxComponentOptions: any;
+
+  /** Tax Component Displayed Columns */
+  displayedColumns: string[] = ['name', 'startDate', 'actions'];
+
+  /**
+   * Retrieves the tax Group template data from `resolve`.
+   * @param {FormBuilder} formBuilder Form Builder.
+   * @param {ProductsService} productsService Products Service.
+   * @param {ActivatedRoute} route Activated Route.
+   * @param {Router} router Router for navigation.
+   * @param {DatePipe} datePipe Date Pipe to format date.
+   */
+  constructor(private formBuilder: FormBuilder,
+    private productsService: ProductsService,
+    private route: ActivatedRoute,
+    private router: Router,
+    private datePipe: DatePipe,
+    public dialog: MatDialog) {
+    this.route.data.subscribe((data: { taxGroup: any }) => {
+      this.taxGroupData = data.taxGroup;
+      this.taxComponentOptions = this.taxGroupData.taxComponents;
+    });
+  }
+
+  ngOnInit() {
+    this.taxComponentsDataSource = [];
+    this.createTaxGroupForm();
+    this.assignFormData();
+  }
+
+  /**
+   * Creates the tax Group form
+   */
+  createTaxGroupForm() {
+    this.taxGroupForm = this.formBuilder.group({
+      'name': [this.taxGroupData.name, Validators.required]
+    });
+  }
+
+  /**
+   * Add Tax Component in Tax Group
+   */
+  addTaxGroup() {
+    const formfields: FormfieldBase[] = [
+      new SelectBase({
+        controlName: 'taxComponentId',
+        label: 'Tax Component',
+        options: { label: 'name', value: 'id', data: this.taxComponentOptions },
+        order: 1
+      }),
+      new DatepickerBase({
+        controlName: 'startDate',
+        label: 'Start Date',
+        minDate: this.minDate,
+        maxDate: this.maxDate,
+        order: 2
+      })
+    ];
+    const data = {
+      title: 'Add Tax Component',
+      layout: { addButtonText: 'Add' },
+      formfields: formfields
+    };
+    const taxComponentDialogRef = this.dialog.open(FormDialogComponent, { data });
+    taxComponentDialogRef.afterClosed().subscribe((response: any) => {
+      if (response.data) {
+        const val = {
+          ...response.data.value,
+          isNew: true
+        };
+        this.taxComponentsDataSource = this.taxComponentsDataSource.concat(val);
+      }
+    });
+  }
+
+  /**
+   * Edit Tax Component in Tax Group
+   */
+  editTaxGroup(taxComponent: any, index: any) {
+    const formfields: FormfieldBase[] = [
+      new SelectBase({
+        controlName: 'taxComponentId',
+        value: taxComponent.taxComponentId ? taxComponent.taxComponentId : '',
+        label: 'Tax Component',
+        options: { label: 'name', value: 'id', data: this.taxComponentOptions },
+        order: 1
+      }),
+      new DatepickerBase({
+        controlName: 'startDate',
+        value: taxComponent.startDate ? new Date(taxComponent.startDate) : new Date(),
+        label: 'Start Date',
+        minDate: this.minDate,
+        maxDate: this.maxDate,
+        order: 2
+      })
+    ];
+    if (!taxComponent.isNew) {
+      formfields.push(new DatepickerBase({
+        controlName: 'endDate',
+        label: 'End Date',
+        minDate: this.minDate,
+        maxDate: this.maxDate,
+        order: 3
+      }));
+    }
+    const data = {
+      title: 'Edit Tax Component',
+      layout: { addButtonText: 'Submit' },
+      formfields: formfields
+    };
+    const taxComponentDialogRef = this.dialog.open(FormDialogComponent, { data });
+    taxComponentDialogRef.afterClosed().subscribe((response: any) => {
+      if (response.data) {
+        const updatedTaxComponent = { ...taxComponent, ...response.data.value };
+        this.taxComponentsDataSource.splice(this.taxComponentsDataSource.indexOf(taxComponent), 1, updatedTaxComponent);
+        this.taxComponentsDataSource = this.taxComponentsDataSource.concat([]);
+      }
+    });
+  }
+
+  /**
+   * Assign form data with the existing incoming data
+   */
+  assignFormData() {
+    this.taxGroupData.taxAssociations.forEach((taxComponentData: any) => {
+      const chart = {
+        id: taxComponentData.id,
+        startDate: taxComponentData.startDate ? new Date(taxComponentData.startDate) : '',
+        endDate: taxComponentData.endDate ? new Date(taxComponentData.endDate) : '',
+        taxComponentId: taxComponentData.taxComponent.id,
+        isNew: false
+      };
+      this.taxComponentsDataSource = this.taxComponentsDataSource.concat(chart);
+    });
+  }
+
+  /**
+   * Deletes the tax component
+   */
+  delete(index: number) {
+    const dialogRef = this.dialog.open(DeleteDialogComponent, {
+      data: { deleteContext: `this` }
+    });
+    dialogRef.afterClosed().subscribe((response: any) => {
+      if (response.delete) {
+        this.taxComponentsDataSource.splice(index, 1);
+        this.taxComponentsDataSource = this.taxComponentsDataSource.concat([]);
+      }
+    });
+  }
+
+  /**
+   * Submits the tax Group form and edits the tax Group,
+   * if successful redirects to Tax Groups.
+   */
+  submit() {
+    const dateFormat = 'yyyy-MM-dd';
+    const locale = 'en';
+    const taxGroup = {
+      ...this.taxGroupForm.value,
+      taxComponents: this.taxComponentsDataSource,
+      dateFormat,
+      locale
+    };
+    for (const taxComponent of taxGroup.taxComponents) {
+      taxComponent.startDate = this.datePipe.transform(taxComponent.startDate, dateFormat) || '';
+      if (taxComponent.endDate) {
+        delete taxComponent.startDate;
+        taxComponent.endDate = this.datePipe.transform(taxComponent.endDate, dateFormat) || '';
+      }
+      delete taxComponent.isNew;
+    }
+    this.productsService.updateTaxGroup(this.taxGroupData.id, taxGroup).subscribe((response: any) => {
+      this.router.navigate(['../'], { relativeTo: this.route });
+    });
+  }
+
+}
diff --git a/src/app/products/manage-tax-groups/edit-tax-group/edit-tax-group.resolver.ts b/src/app/products/manage-tax-groups/edit-tax-group/edit-tax-group.resolver.ts
new file mode 100644
index 000000000..0a1fe19c8
--- /dev/null
+++ b/src/app/products/manage-tax-groups/edit-tax-group/edit-tax-group.resolver.ts
@@ -0,0 +1,30 @@
+/** Angular Imports */
+import { Injectable } from '@angular/core';
+import { ActivatedRouteSnapshot, Resolve } from '@angular/router';
+
+/** rxjs Imports */
+import { Observable } from 'rxjs';
+
+/** Custom Services */
+import { ProductsService } from '../../products.service';
+
+/**
+ * tax Group data resolver.
+ */
+@Injectable()
+export class EditTaxGroupResolver implements Resolve<Object> {
+
+    /**
+     * @param {ProductsService} productsService Products service.
+     */
+    constructor(private productsService: ProductsService) { }
+
+    /**
+     * Returns the tax Group data.
+     * @returns {Observable<any>}
+     */
+    resolve(route: ActivatedRouteSnapshot): Observable<any> {
+        const taxGroupId = route.parent.paramMap.get('id');
+        return this.productsService.getTaxGroup(taxGroupId, 'true');
+    }
+}
diff --git a/src/app/products/manage-tax-groups/manage-tax-groups.component.html b/src/app/products/manage-tax-groups/manage-tax-groups.component.html
index c507b1ffe..f55f2f2f4 100644
--- a/src/app/products/manage-tax-groups/manage-tax-groups.component.html
+++ b/src/app/products/manage-tax-groups/manage-tax-groups.component.html
@@ -1,5 +1,5 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
-  <button mat-raised-button color="primary">
+  <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_TAXGROUP'">
     <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
     Create Tax Groups
   </button>
diff --git a/src/app/products/manage-tax-groups/tax-group.resolver.ts b/src/app/products/manage-tax-groups/tax-group.resolver.ts
index 8dd4de36c..c367b6480 100644
--- a/src/app/products/manage-tax-groups/tax-group.resolver.ts
+++ b/src/app/products/manage-tax-groups/tax-group.resolver.ts
@@ -25,6 +25,6 @@ export class TaxGroupResolver implements Resolve<Object> {
    */
   resolve(route: ActivatedRouteSnapshot): Observable<any> {
     const taxGroupId = route.paramMap.get('id');
-    return this.productsService.getTaxGroup(taxGroupId);
+    return this.productsService.getTaxGroup(taxGroupId, 'false');
   }
 }
diff --git a/src/app/products/manage-tax-groups/view-tax-group/view-tax-group.component.html b/src/app/products/manage-tax-groups/view-tax-group/view-tax-group.component.html
index b264d0a43..b579d90e4 100644
--- a/src/app/products/manage-tax-groups/view-tax-group/view-tax-group.component.html
+++ b/src/app/products/manage-tax-groups/view-tax-group/view-tax-group.component.html
@@ -1,5 +1,5 @@
 <div class="container m-b-20" fxLayout="row" fxLayout.lt-md="column" fxLayoutAlign="end" fxLayoutGap="2%">
-  <button mat-raised-button color="primary">
+  <button mat-raised-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_TAXGROUP'">
     <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;
     Edit
   </button>
diff --git a/src/app/products/products-routing.module.ts b/src/app/products/products-routing.module.ts
index 13c85cede..fbaa65ee9 100644
--- a/src/app/products/products-routing.module.ts
+++ b/src/app/products/products-routing.module.ts
@@ -45,6 +45,9 @@ import { ShareProductsDividendsComponent } from './share-products/dividends-shar
 import { CreateRecurringDepositProductComponent } from './recurring-deposit-products/create-recurring-deposit-product/create-recurring-deposit-product.component';
 import { CreateDividendComponent } from './share-products/create-dividend/create-dividend.component';
 import { ViewFixedDepositProductComponent } from './fixed-deposit-products/view-fixed-deposit-product/view-fixed-deposit-product.component';
+import { ViewDividendComponent } from './share-products/view-dividend/view-dividend.component';
+import { CreateTaxGroupComponent } from './manage-tax-groups/create-tax-group/create-tax-group.component';
+import { EditTaxGroupComponent } from './manage-tax-groups/edit-tax-group/edit-tax-group.component';
 
 /** Custom Resolvers */
 import { LoanProductsResolver } from './loan-products/loan-products.resolver';
@@ -80,9 +83,10 @@ import { DividendsResolver } from './share-products/dividends-share-product/divi
 import { RecurringDepositProductsTemplateResolver } from './recurring-deposit-products/recurring-deposit-products-template.resolver';
 import { EditRecurringDepositProductComponent } from './recurring-deposit-products/edit-recurring-deposit-product/edit-recurring-deposit-product.component';
 import { RecurringDepositProductAndTemplateResolver } from './recurring-deposit-products/edit-recurring-deposit-product/recurring-deposit-product-and-template.resolver';
-import { ViewDividendComponent } from './share-products/view-dividend/view-dividend.component';
 import { ViewDividendDataResolver } from './share-products/view-dividend/view-dividend-data.resolver';
 import { FixedDepositProductResolver } from './fixed-deposit-products/fixed-deposit-product.resolver';
+import { ManageTaxGroupTemplateResolver } from './manage-tax-groups/create-tax-group/manage-tax-group-template.resolver';
+import { EditTaxGroupResolver } from './manage-tax-groups/edit-tax-group/edit-tax-group.resolver';
 
 /** Products Routes */
 const routes: Routes = [
@@ -311,6 +315,14 @@ const routes: Routes = [
                   taxGroups: ManageTaxGroupsResolver
                   }
                 },
+                {
+                  path: 'create',
+                  component: CreateTaxGroupComponent,
+                  data: { title: extract('Create Tax Group'), breadcrumb: 'Create' },
+                  resolve: {
+                    taxGroupTemplate: ManageTaxGroupTemplateResolver
+                  }
+                },
                 {
                   path: ':id',
                   data: { title: extract('View Tax Group'), routeParamBreadcrumb: 'id' },
@@ -321,7 +333,15 @@ const routes: Routes = [
                       resolve: {
                         taxGroup: TaxGroupResolver
                       }
-                    }
+                    },
+                    {
+                      path: 'edit',
+                      data: { title: extract('Edit Tax Group'), breadcrumb: 'Edit', routeParamBreadcrumb: false },
+                      component: EditTaxGroupComponent,
+                      resolve: {
+                        taxGroup: EditTaxGroupResolver
+                      }
+                    },
                   ]
                 }
               ]
@@ -548,7 +568,9 @@ const routes: Routes = [
     RecurringDepositProductsTemplateResolver,
     RecurringDepositProductAndTemplateResolver,
     ViewDividendDataResolver,
-    FixedDepositProductResolver
+    FixedDepositProductResolver,
+    ManageTaxGroupTemplateResolver,
+    EditTaxGroupResolver
   ]
 })
 export class ProductsRoutingModule { }
diff --git a/src/app/products/products.module.ts b/src/app/products/products.module.ts
index 2e0d33b0b..8c2fd19ae 100644
--- a/src/app/products/products.module.ts
+++ b/src/app/products/products.module.ts
@@ -90,6 +90,8 @@ import { EditRecurringDepositProductComponent } from './recurring-deposit-produc
 import { CreateDividendComponent } from './share-products/create-dividend/create-dividend.component';
 import { ViewDividendComponent } from './share-products/view-dividend/view-dividend.component';
 import { ViewFixedDepositProductComponent } from './fixed-deposit-products/view-fixed-deposit-product/view-fixed-deposit-product.component';
+import { CreateTaxGroupComponent } from './manage-tax-groups/create-tax-group/create-tax-group.component';
+import { EditTaxGroupComponent } from './manage-tax-groups/edit-tax-group/edit-tax-group.component';
 
 /**
  * Products Module
@@ -183,7 +185,9 @@ import { ViewFixedDepositProductComponent } from './fixed-deposit-products/view-
     EditRecurringDepositProductComponent,
     CreateDividendComponent,
     ViewDividendComponent,
-    ViewFixedDepositProductComponent
+    ViewFixedDepositProductComponent,
+    CreateTaxGroupComponent,
+    EditTaxGroupComponent
   ],
   entryComponents: [
     DepositProductIncentiveFormDialogComponent,
diff --git a/src/app/products/products.service.ts b/src/app/products/products.service.ts
index e92763873..afb6027dd 100644
--- a/src/app/products/products.service.ts
+++ b/src/app/products/products.service.ts
@@ -245,10 +245,36 @@ export class ProductsService {
 
   /**
    * @param {string} taxGroupId Tax Component ID of Tax Component.
+   * @param {string} template Template
    * @returns {Observable<any>} Tax Component.
    */
-  getTaxGroup(taxGroupId: string): Observable<any> {
-    return this.http.get(`/taxes/group/${taxGroupId}`);
+  getTaxGroup(taxGroupId: string, template: string): Observable<any> {
+    const httpParams = new HttpParams().set('template', template);
+    return this.http.get(`/taxes/group/${taxGroupId}`, { params: httpParams });
+  }
+
+  /**
+   * @returns {Observable<any>} Tax Group Template
+   */
+  getTaxGroupTemplate(): Observable<any> {
+    return this.http.get('/taxes/group/template');
+  }
+
+  /**
+   * @param {any} taxGroup Tax Group
+   * @returns {Observable<any>} Tax Group Resource Id
+   */
+  createTaxGroup(taxGroup: any): Observable<any> {
+    return this.http.post('/taxes/group', taxGroup);
+  }
+
+  /**
+   * @param {any} taxGroupId Tax Group ID
+   * @param {any} taxGroup Tax Group
+   * @returns {Observable<any>} Changes in the Tax Group
+   */
+  updateTaxGroup(taxGroupId: any, taxGroup: any): Observable<any> {
+    return this.http.put(`/taxes/group/${taxGroupId}`, taxGroup);
   }
 
   /**