diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index ad0abb0..8c5b052 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -25,6 +25,7 @@ import {DeleteComponent} from './delete/delete.component';
 import {ProductsComponent} from './store/products/products.component';
 import {CartComponent} from './store/cart/cart.component';
 import {ViewComponents} from './formulaManager/viewComponents/viewComponents.component';
+import {NewComponentComponent} from './formulaManager/newComponent/newComponent.component';
 
 @NgModule({
   declarations: [
@@ -39,6 +40,7 @@ import {ViewComponents} from './formulaManager/viewComponents/viewComponents.com
     HomeComponent,
     LoginComponent,
     NewCategoryComponent,
+    NewComponentComponent,
     NewProductComponent,
     ProductsComponent,
     ScalePipe,
@@ -67,7 +69,14 @@ import {ViewComponents} from './formulaManager/viewComponents/viewComponents.com
     ServiceWorkerModule.register('/ngsw-worker.js', {enabled: environment.production})
   ],
   providers: [],
-  entryComponents: [DeleteComponent, LoginComponent, NewCategoryComponent, NewProductComponent, ViewComponents],
+  entryComponents: [
+    DeleteComponent,
+    LoginComponent,
+    NewCategoryComponent,
+    NewComponentComponent,
+    NewProductComponent,
+    ViewComponents
+  ],
   bootstrap: [AppComponent]
 })
 export class AppModule {
diff --git a/src/app/formulaManager/newComponent/newComponent.component.html b/src/app/formulaManager/newComponent/newComponent.component.html
new file mode 100644
index 0000000..abdd4b5
--- /dev/null
+++ b/src/app/formulaManager/newComponent/newComponent.component.html
@@ -0,0 +1,23 @@
+<mat-dialog-content>
+    <h3 mat-dialog-title>
+        <span *ngIf="data">Update</span>
+        <span *ngIf="!data">Create</span> Category</h3>
+    <form id="createForm">
+        <mat-form-field class="w-100">
+            <input matInput placeholder="Name" name="name" [(ngModel)]="name">
+        </mat-form-field>
+        <mat-form-field class="w-100">
+            <input matInput placeholder="Description" name="description" [(ngModel)]="description">
+        </mat-form-field>
+        <mat-form-field>
+            <input matInput placeholder="Cost Per Kg" type="number" name="cost" [(ngModel)]="cost">
+            <span matPrefix>$&nbsp;</span>
+        </mat-form-field>
+    </form>
+</mat-dialog-content>
+<mat-dialog-actions>
+    <button mat-raised-button type="submit" form="createForm" color="primary" (click)="submit()">
+        <span *ngIf="data">Update</span>
+        <span *ngIf="!data">Create</span>
+    </button>
+</mat-dialog-actions>
\ No newline at end of file
diff --git a/src/app/formulaManager/newComponent/newComponent.component.ts b/src/app/formulaManager/newComponent/newComponent.component.ts
new file mode 100644
index 0000000..db2ea22
--- /dev/null
+++ b/src/app/formulaManager/newComponent/newComponent.component.ts
@@ -0,0 +1,39 @@
+import {Component, ViewChild, Inject} from '@angular/core';
+import {AngularFirestore} from 'angularfire2/firestore';
+import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material';
+
+@Component({
+  selector: 'new-component',
+  templateUrl: 'newComponent.component.html'
+})
+export class NewComponentComponent {
+  name: string;
+  description: string;
+  cost: number;
+
+  constructor(
+    private dialogRef: MatDialogRef<NewComponentComponent>,
+    private db: AngularFirestore,
+    @Inject(MAT_DIALOG_DATA) public data
+  ) {
+    if (data) {
+      this.name = data.name;
+      this.description = data.description;
+      this.cost = data.cost;
+    }
+  }
+
+  submit() {
+    let newComponent = {name: this.name, description: this.description, cost: Number(this.cost)};
+    if (!this.data) newComponent['created'] = new Date();
+
+    if (!this.data) {
+      this.db
+        .collection('components', ref => ref.orderBy('name'))
+        .add(newComponent)
+        .then(data => this.dialogRef.close());
+    } else {
+      this.data.ref.update(newComponent).then(data => this.dialogRef.close());
+    }
+  }
+}
diff --git a/src/app/formulaManager/viewComponents/viewComponents.component.html b/src/app/formulaManager/viewComponents/viewComponents.component.html
index 9ed168c..2e3d074 100644
--- a/src/app/formulaManager/viewComponents/viewComponents.component.html
+++ b/src/app/formulaManager/viewComponents/viewComponents.component.html
@@ -1,4 +1,4 @@
-<button mat-raised-button class="float-right mb-3">
+<button mat-raised-button class="float-right mb-3" (click)="createComponent()">
     <mat-icon>add</mat-icon> Component</button>
 <table class="table">
     <thead>
diff --git a/src/app/formulaManager/viewComponents/viewComponents.component.ts b/src/app/formulaManager/viewComponents/viewComponents.component.ts
index 4b7fc54..e79277b 100644
--- a/src/app/formulaManager/viewComponents/viewComponents.component.ts
+++ b/src/app/formulaManager/viewComponents/viewComponents.component.ts
@@ -3,6 +3,7 @@ import {AngularFirestore} from 'angularfire2/firestore';
 import {map} from 'rxjs/operators';
 import {MatDialog} from '@angular/material';
 import {DeleteComponent} from '../../delete/delete.component';
+import {NewComponentComponent} from '../newComponent/newComponent.component';
 
 @Component({
   selector: '',
@@ -26,6 +27,10 @@ export class ViewComponents {
       );
   }
 
+  createComponent() {
+    this.dialog.open(NewComponentComponent);
+  }
+
   delete(component) {
     this.dialog.open(DeleteComponent, {data: component});
   }