diff --git a/src/app/app.component.html b/src/app/app.component.html
index 00fff79..4651841 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -22,7 +22,7 @@
                     <a class="nav-link text-dark" [routerLink]="['/formulaManager']">Formula Manager</a>
                 </li>
                 <li class="nav-item">
-                    <a class="nav-link text-dark" target="_blank" href="/assets/Chromatex_MSDS.pdf">MSDS</a>
+                    <a class="nav-link text-dark" [routerLink]="['/msds']">MSDS</a>
                 </li>
             </ul>
             <div class="ml-auto">
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index f0d414d..a57c11c 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -31,6 +31,7 @@ import { AppStore } from './app.store';
 import { SlideshowModule } from 'ng-simple-slideshow';
 import {HttpClientModule} from '@angular/common/http';
 import {ScrollingModule} from '@angular/cdk/scrolling';
+import {MSDSComponent} from './msds/msds.component';
 
 @NgModule({
   declarations: [
@@ -44,6 +45,7 @@ import {ScrollingModule} from '@angular/cdk/scrolling';
     FormulaManagerComponent,
     HomeComponent,
     LoginComponent,
+    MSDSComponent,
     NewCategoryComponent,
     NewComponentComponent,
     NewFormulaComponent,
@@ -68,6 +70,7 @@ import {ScrollingModule} from '@angular/cdk/scrolling';
       { path: 'about', component: AboutComponent },
       { path: 'cart', component: CartComponent },
       { path: 'formulaManager', component: FormulaManagerComponent },
+      { path: 'msds', component: MSDSComponent },
       { path: 'products/:product', component: ProductsComponent },
       { path: 'store/:category', component: CategoriesComponent },
       { path: 'store', component: CategoriesComponent },
diff --git a/src/app/msds/msds.component.html b/src/app/msds/msds.component.html
new file mode 100644
index 0000000..d33a29f
--- /dev/null
+++ b/src/app/msds/msds.component.html
@@ -0,0 +1,15 @@
+<div class="bg-white" style="min-height: 450px">
+  <div class="container py-3">
+    <div style="overflow: auto">
+      <h4 class="ml-3 d-inline">MSDS</h4>
+      <button *ngIf="store.user" mat-button class="float-right" (click)="file.click()">
+        <mat-icon>add</mat-icon> Add
+      </button>
+    </div>
+    <mat-divider></mat-divider>
+    <mat-list>
+      <mat-list-item *ngFor="let l of links" (click)="open(l)">{{l.name}}</mat-list-item>
+    </mat-list>
+    <input #file type="file" accept="application/pdf" (change)="upload($event.target)" hidden>
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/app/msds/msds.component.ts b/src/app/msds/msds.component.ts
new file mode 100644
index 0000000..22759c5
--- /dev/null
+++ b/src/app/msds/msds.component.ts
@@ -0,0 +1,41 @@
+import {Component, OnInit} from '@angular/core';
+import * as firebase from 'firebase';
+import {AppStore} from '../app.store';
+
+@Component({
+    selector: 'app-msds',
+    templateUrl: './msds.component.html'
+})
+export class MSDSComponent implements OnInit {
+    firestore;
+    links = [];
+    storage;
+
+    constructor(public store: AppStore) {
+        this.firestore = firebase.firestore();
+        this.storage = firebase.storage();
+    }
+
+    async ngOnInit() {
+        let docs = await this.firestore.collection('msds').get();
+        docs.forEach(snap => this.links = this.links.concat([snap.data()]).sort());
+    }
+
+    open(link) {
+        window.open(link.src);
+    }
+
+    upload(e) {
+        this.storage.ref(`MSDS/${e.files[0].name}`).put(e.files[0]).then(async e => {
+            let data = {
+                name: e.metadata.name,
+                src: await this.storage.ref(e.metadata.fullPath).getDownloadURL()
+            };
+
+            console.log(data);
+
+            this.links.concat([data]).sort();
+            this.firestore.collection('msds').doc(e.metadata.name).set(data);
+        });
+    }
+}