diff --git a/src/app/organization/manage-funds/manage-funds.component.html b/src/app/organization/manage-funds/manage-funds.component.html
new file mode 100644
index 000000000..95293b37b
--- /dev/null
+++ b/src/app/organization/manage-funds/manage-funds.component.html
@@ -0,0 +1,43 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/app/organization/manage-funds/manage-funds.component.scss b/src/app/organization/manage-funds/manage-funds.component.scss
new file mode 100644
index 000000000..5911b9d88
--- /dev/null
+++ b/src/app/organization/manage-funds/manage-funds.component.scss
@@ -0,0 +1,3 @@
+.container{
+ width: 74rem;
+}
diff --git a/src/app/organization/manage-funds/manage-funds.component.spec.ts b/src/app/organization/manage-funds/manage-funds.component.spec.ts
new file mode 100644
index 000000000..84029683a
--- /dev/null
+++ b/src/app/organization/manage-funds/manage-funds.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ManageFundsComponent } from './manage-funds.component';
+
+describe('ManageFundsComponent', () => {
+ let component: ManageFundsComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ ManageFundsComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(ManageFundsComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/organization/manage-funds/manage-funds.component.ts b/src/app/organization/manage-funds/manage-funds.component.ts
new file mode 100644
index 000000000..b7c2d8f92
--- /dev/null
+++ b/src/app/organization/manage-funds/manage-funds.component.ts
@@ -0,0 +1,108 @@
+/** Angular Imports */
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { MatDialog } from '@angular/material';
+import { FormBuilder, Validators } from '@angular/forms';
+
+/** Custom Dialogs */
+import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.component';
+
+/** Custom Models */
+import { FormfieldBase } from 'app/shared/form-dialog/formfield/model/formfield-base';
+import { InputBase } from 'app/shared/form-dialog/formfield/model/input-base';
+
+/** Custom Services */
+import { OrganizationService } from '../organization.service';
+
+/**
+ * Manage Funds component.
+ */
+@Component({
+ selector: 'mifosx-manage-funds',
+ templateUrl: './manage-funds.component.html',
+ styleUrls: ['./manage-funds.component.scss']
+})
+export class ManageFundsComponent implements OnInit {
+
+ /** Manage Funds data. */
+ fundsData: any;
+ /** New Fund form */
+ fundForm: any;
+ /** Funds form reference */
+ @ViewChild('formRef') formRef: any;
+
+ /**
+ * Retrieves the manage funds data from `resolve`.
+ * @param {ActivatedRoute} route Activated Route
+ * @param {FormBuilder} formBuilder Form Builder
+ * @param {OrganizationService} organizationservice Organization Service
+ * @param {MatDialog} dialog Mat Dialog
+ */
+ constructor(private route: ActivatedRoute,
+ private formBuilder: FormBuilder,
+ private organizationservice: OrganizationService,
+ public dialog: MatDialog) {
+ this.route.data.subscribe(( data: { funds: any }) => {
+ this.fundsData = data.funds;
+ });
+ }
+
+ ngOnInit() {
+ this.createFundForm();
+ }
+
+ /**
+ * Creates the fund form.
+ */
+ createFundForm() {
+ this.fundForm = this.formBuilder.group({
+ 'name': ['', Validators.required]
+ });
+ }
+
+ /**
+ * Adds a new fund to the list.
+ */
+ addFund() {
+ const newFund = this.fundForm.value;
+ this.organizationservice.createFund(newFund).subscribe((response: any) => {
+ this.fundsData.push({
+ id: response.resourceId,
+ name: newFund.name
+ });
+ this.formRef.resetForm();
+ });
+ }
+
+ /**
+ * Edits the selected fund.
+ * @param {string} fundId Fund Id.
+ * @param {string} fundContent Fund's content.
+ * @param {number} index Index of fund.
+ */
+ editFund(fundId: string, fundContent: string, index: number) {
+ const formfields: FormfieldBase[] = [
+ new InputBase({
+ controlName: 'name',
+ label: 'Fund Content',
+ value: fundContent,
+ type: 'text',
+ required: true
+ }),
+ ];
+ const data = {
+ title: 'Edit Fund',
+ layout: { addButtonText: 'Confirm' },
+ formfields: formfields
+ };
+ const editFundDialogRef = this.dialog.open(FormDialogComponent, { data });
+ editFundDialogRef.afterClosed().subscribe((response: any) => {
+ if (response.data) {
+ this.organizationservice.editFund(fundId, response.data.value).subscribe(() => {
+ this.fundsData[index].name = response.data.value.name;
+ });
+ }
+ });
+ }
+
+}
diff --git a/src/app/organization/manage-funds/manage-funds.resolver.ts b/src/app/organization/manage-funds/manage-funds.resolver.ts
new file mode 100644
index 000000000..ab49848a4
--- /dev/null
+++ b/src/app/organization/manage-funds/manage-funds.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 { OrganizationService } from '../organization.service';
+
+/**
+ * Manage Funds data resolver.
+ */
+@Injectable()
+export class ManageFundsResolver implements Resolve