diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index b13273e48..d3d0097d8 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -32,6 +32,7 @@ import { CentersModule } from './centers/centers.module';
 import { AccountingModule } from './accounting/accounting.module';
 import { SelfServiceModule } from './self-service/self-service.module';
 import { SystemModule } from './system/system.module';
+import { ProductsModule } from './products/products.module';
 
 /** Main Routing Module */
 import { AppRoutingModule } from './app-routing.module';
@@ -60,6 +61,7 @@ import { AppRoutingModule } from './app-routing.module';
     AccountingModule,
     SelfServiceModule,
     SystemModule,
+    ProductsModule,
     AppRoutingModule
   ],
   declarations: [WebAppComponent, NotFoundComponent],
diff --git a/src/app/core/shell/toolbar/toolbar.component.html b/src/app/core/shell/toolbar/toolbar.component.html
index af89ec366..f44aa8734 100644
--- a/src/app/core/shell/toolbar/toolbar.component.html
+++ b/src/app/core/shell/toolbar/toolbar.component.html
@@ -103,7 +103,7 @@
   <button mat-menu-item>Users</button>
   <button mat-menu-item>Organisation</button>
   <button mat-menu-item [routerLink]="['/system']">System</button>
-  <button mat-menu-item>Products</button>
+  <button mat-menu-item [routerLink]="['/products']">Products</button>
   <button mat-menu-item>Templates</button>
 </mat-menu>
 
diff --git a/src/app/products/products-routing.module.ts b/src/app/products/products-routing.module.ts
new file mode 100644
index 000000000..f4cfff6f4
--- /dev/null
+++ b/src/app/products/products-routing.module.ts
@@ -0,0 +1,43 @@
+/** Angular Imports */
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+/** Routing Imports */
+import { Route } from '../core/route/route.service';
+
+/** Translation Imports */
+import { extract } from '../core/i18n/i18n.service';
+
+/** Custom Components */
+import { ProductsComponent } from './products.component';
+
+/** Custom Resolvers */
+
+/** Products Routes */
+const routes: Routes = [
+  Route.withShell([
+    {
+      path: 'products',
+      data: { title: extract('Products'), breadcrumb: 'Products' },
+      children: [
+        {
+          path: '',
+          component: ProductsComponent
+        },
+      ]
+    }
+  ])
+];
+
+/**
+ * Products Routing Module
+ *
+ * Configures the products routes.
+ */
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+  providers: [
+  ]
+})
+export class ProductsRoutingModule { }
diff --git a/src/app/products/products.component.html b/src/app/products/products.component.html
new file mode 100644
index 000000000..c9d9c06a2
--- /dev/null
+++ b/src/app/products/products.component.html
@@ -0,0 +1,99 @@
+<div class="container">
+
+  <mat-card>
+
+    <div fxLayout="row" fxLayout.lt-md="column">
+
+      <div fxFlex="50%">
+
+        <mat-nav-list>
+
+          <mat-list-item>
+            <mat-icon matListIcon>
+              <fa-icon icon="briefcase" size="sm"></fa-icon>
+            </mat-icon>
+            <h4 matLine>Loan Products</h4>
+            <p matLine>Add new loan product or modify or inactivate loan product</p>
+          </mat-list-item>
+
+          <mat-list-item>
+            <mat-icon matListIcon>
+              <fa-icon icon="briefcase" size="sm"></fa-icon>
+            </mat-icon>
+            <h4 matLine>Savings Products</h4>
+            <p matLine>Add new savings product or modify or inactivate savings product</p>
+          </mat-list-item>
+
+          <mat-list-item>
+            <mat-icon matListIcon>
+              <fa-icon icon="briefcase" size="sm"></fa-icon>
+            </mat-icon>
+            <h4 matLine>Share Products</h4>
+            <p matLine>Add new share product or modify or inactivate share product</p>
+          </mat-list-item>
+
+          <mat-list-item>
+            <mat-icon matListIcon>
+              <fa-icon icon="money-bill-alt" size="sm"></fa-icon>
+            </mat-icon>
+            <h4 matLine>Charges</h4>
+            <p matLine>Define charges/penalties for loan products, savings and deposit products</p>
+          </mat-list-item>
+
+        </mat-nav-list>
+
+      </div>
+
+      <div fxFlex="50%">
+
+        <mat-nav-list>
+
+          <mat-list-item>
+            <mat-icon matListIcon>
+              <fa-icon icon="random" size="sm"></fa-icon>
+            </mat-icon>
+            <h4 matLine>Products Mix</h4>
+            <p matLine>Defines rules for taking multiple rules</p>
+          </mat-list-item>
+
+          <mat-list-item>
+            <mat-icon matListIcon>
+              <fa-icon icon="briefcase" size="sm"></fa-icon>
+            </mat-icon>
+            <h4 matLine>Fixed Deposit Products</h4>
+            <p matLine>Add, modify or inactivate a Fixed deposit product</p>
+          </mat-list-item>
+
+          <mat-list-item>
+            <mat-icon matListIcon>
+              <fa-icon icon="briefcase" size="sm"></fa-icon>
+            </mat-icon>
+            <h4 matLine>Recurring Deposit Products</h4>
+            <p matLine>Add, modify or inactivate a Recurring Deposit product</p>
+          </mat-list-item>
+
+          <mat-list-item [routerLink]="['manage-tax-configurations']">
+            <mat-icon matListIcon>
+              <fa-icon icon="cogs" size="sm"></fa-icon>
+            </mat-icon>
+            <h4 matLine>Manage Tax Configurations</h4>
+            <p matLine>Define Tax components and Tax groups</p>
+          </mat-list-item>
+
+          <mat-list-item>
+            <mat-icon matListIcon>
+              <fa-icon icon="money-bill-alt" size="sm"></fa-icon>
+            </mat-icon>
+            <h4 matLine>Floating Rates</h4>
+            <p matLine>Define floating rates for loan products</p>
+          </mat-list-item>
+
+        </mat-nav-list>
+
+      </div>
+
+    </div>
+
+  </mat-card>
+
+</div>
diff --git a/src/app/products/products.component.scss b/src/app/products/products.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/app/products/products.component.ts b/src/app/products/products.component.ts
new file mode 100644
index 000000000..bfe1a472f
--- /dev/null
+++ b/src/app/products/products.component.ts
@@ -0,0 +1,19 @@
+/** Angular Imports */
+import { Component, OnInit } from '@angular/core';
+
+/**
+ * Products component.
+ */
+@Component({
+  selector: 'mifosx-products',
+  templateUrl: './products.component.html',
+  styleUrls: ['./products.component.scss']
+})
+export class ProductsComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/src/app/products/products.module.ts b/src/app/products/products.module.ts
new file mode 100644
index 000000000..92037701c
--- /dev/null
+++ b/src/app/products/products.module.ts
@@ -0,0 +1,28 @@
+/** Angular Imports */
+import { NgModule } from '@angular/core';
+
+/** Custom Modules */
+import { SharedModule } from '../shared/shared.module';
+import { ProductsRoutingModule } from './products-routing.module';
+
+/** Custom Components */
+import { ProductsComponent } from './products.component';
+
+
+/**
+ * Products Module
+ *
+ * All components related to product functions should be declared here.
+ */
+@NgModule({
+  imports: [
+    SharedModule,
+    ProductsRoutingModule
+  ],
+  declarations: [
+    ProductsComponent,
+  ],
+  entryComponents: [
+  ]
+})
+export class ProductsModule { }
diff --git a/src/app/products/products.service.spec.ts b/src/app/products/products.service.spec.ts
new file mode 100644
index 000000000..3817eb4d4
--- /dev/null
+++ b/src/app/products/products.service.spec.ts
@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { ProductsService } from './products.service';
+
+describe('ProductsService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [ProductsService]
+    });
+  });
+
+  it('should be created', inject([ProductsService], (service: ProductsService) => {
+    expect(service).toBeTruthy();
+  }));
+});
diff --git a/src/app/products/products.service.ts b/src/app/products/products.service.ts
new file mode 100644
index 000000000..e3da05124
--- /dev/null
+++ b/src/app/products/products.service.ts
@@ -0,0 +1,20 @@
+/** Angular Imports */
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpParams } from '@angular/common/http';
+
+/** rxjs Imports */
+import { Observable } from 'rxjs';
+
+/**
+ * Products service.
+ */
+@Injectable({
+  providedIn: 'root'
+})
+export class ProductsService {
+
+  /**
+   * @param {HttpClient} http Http Client to send requests.
+   */
+  constructor(private http: HttpClient) { }
+}
diff --git a/src/app/shared/icons.module.ts b/src/app/shared/icons.module.ts
index 46fe8eebc..e4d7ba910 100644
--- a/src/app/shared/icons.module.ts
+++ b/src/app/shared/icons.module.ts
@@ -9,6 +9,7 @@ import {
   faArchive,
   faBars,
   faBell,
+  faBriefcase,
   faCalendar,
   faChartBar,
   faCheckCircle,
@@ -41,6 +42,7 @@ import {
   faPlay,
   faPlus,
   faPlusCircle,
+  faRandom,
   faRoad,
   faSearch,
   faShieldAlt,
@@ -49,6 +51,8 @@ import {
   faSync,
   faTable,
   faTachometerAlt,
+  faTag,
+  faTags,
   faTimesCircle,
   faTrash,
   faUndo,
@@ -64,6 +68,7 @@ library.add(
   faArchive,
   faBars,
   faBell,
+  faBriefcase,
   faCalendar,
   faChartBar,
   faCheckCircle,
@@ -96,6 +101,7 @@ library.add(
   faPlay,
   faPlus,
   faPlusCircle,
+  faRandom,
   faRoad,
   faSearch,
   faShieldAlt,
@@ -104,6 +110,8 @@ library.add(
   faSync,
   faTable,
   faTachometerAlt,
+  faTag,
+  faTags,
   faTimesCircle,
   faTrash,
   faUndo,