diff --git a/.firebaserc b/.firebaserc
index a001e90..b5a2bd6 100644
--- a/.firebaserc
+++ b/.firebaserc
@@ -1,16 +1,16 @@
 {
   "projects": {
-    "default": "fir-cms-76f54",
-    "cm": "fir-cms-76f54",
-    "cms": "fir-cms-76f54"
+    "default": "fir-cms-vnext",
+    "cm": "fir-cms-vnext",
+    "cms": "fir-cms-vnext"
   },
   "targets": {
     "ng6-fire-shop": {
       "hosting": {
         "firebase-cms": [
-          "ng6-fire-shop"
+          "firebase-cms-vnext"
         ]
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/.github/workflows/firebase-hosting-pull-request.yml b/.github/workflows/firebase-hosting-pull-request.yml
new file mode 100644
index 0000000..4aeafdc
--- /dev/null
+++ b/.github/workflows/firebase-hosting-pull-request.yml
@@ -0,0 +1,17 @@
+# This file was auto-generated by the Firebase CLI
+# https://github.com/firebase/firebase-tools
+
+name: Deploy to Firebase Hosting on PR
+'on': pull_request
+jobs:
+  build_and_preview:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: FirebaseExtended/action-hosting-deploy@v0
+        with:
+          repoToken: '${{ secrets.GITHUB_TOKEN }}'
+          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_FIR_CMS_VNEXT }}'
+          projectId: fir-cms-vnext
+        env:
+          FIREBASE_CLI_PREVIEWS: hostingchannels
diff --git a/.gitignore b/.gitignore
index 387a000..ba30704 100644
--- a/.gitignore
+++ b/.gitignore
@@ -50,3 +50,5 @@ testem.log
 .DS_Store
 Thumbs.db
 /.vs
+/.firebase/hosting.ZGlzdA.cache
+/.firebase/hosting.ZGlzdFxmaXJlYmFzZS1jbXM.cache
diff --git a/README.md b/README.md
index 26d60e4..8c1da13 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 # FirebaseCMS
 
-FirebasCMS is an e-commerce and blogging platform with a storefront and CMS built with Angular 4 (Angular CLI), Firebase (AngularFire2), Angular Material and Stripe. Create, moderate and manage pages, blog posts, products, orders, customers, carts, navigation, themes, admins and more with this web application.
+FirebasCMS is an e-commerce and blogging platform with a storefront and CMS built with Angular 11 (Angular CLI), Firebase (@angular/fire), Angular Material and Stripe. Create, moderate and manage pages, blog posts, products, orders, customers, carts, navigation, themes, admins and more with this web application.
 
 
 ## Demo
diff --git a/angular.json b/angular.json
index dba513f..b63e482 100644
--- a/angular.json
+++ b/angular.json
@@ -31,6 +31,11 @@
               "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
               "src/styles.scss"
             ],
+            "stylePreprocessorOptions": {
+              "includePaths": [
+                "src/"
+              ]
+            },
             "scripts": []
           },
           "configurations": {
@@ -131,4 +136,4 @@
     }
   },
   "defaultProject": "firebase-cms"
-}
\ No newline at end of file
+}
diff --git a/functions/.gitignore b/functions/.gitignore
new file mode 100644
index 0000000..65b4c06
--- /dev/null
+++ b/functions/.gitignore
@@ -0,0 +1,9 @@
+# Compiled JavaScript files
+lib/**/*.js
+lib/**/*.js.map
+
+# TypeScript v1 declaration files
+typings/
+
+# Node.js dependency directory
+node_modules/
diff --git a/functions/package.json b/functions/package.json
index 4019c47..32e82e7 100644
--- a/functions/package.json
+++ b/functions/package.json
@@ -1,11 +1,27 @@
 {
-  "name": "stripe-functions",
-  "description": "Stripe Firebase Functions",
+  "name": "functions",
+  "scripts": {
+    "build": "tsc",
+    "serve": "npm run build && firebase emulators:start --only functions",
+    "shell": "npm run build && firebase functions:shell",
+    "start": "npm run shell",
+    "deploy": "firebase deploy --only functions",
+    "logs": "firebase functions:log"
+  },
+  "engines": {
+    "node": "12"
+  },
+  "main": "lib/index.js",
   "dependencies": {
-    "@google-cloud/logging": "^0.7.1",
-    "firebase-admin": "^4.0.5",
-    "firebase-functions": "^0.5.1",
+    "firebase-admin": "^9.2.0",
+    "firebase-functions": "^3.11.0",
     "stripe": "^4.15.0",
-    "nodemailer": "^4.0.1"
-  }
+    "nodemailer": "^4.0.1",
+    "@google-cloud/logging": "^0.7.1"
+  },
+  "devDependencies": {
+    "typescript": "^3.8.0",
+    "firebase-functions-test": "^0.2.0"
+  },
+  "private": true
 }
diff --git a/functions/src/index.ts b/functions/src/index.ts
new file mode 100644
index 0000000..10c3084
--- /dev/null
+++ b/functions/src/index.ts
@@ -0,0 +1,9 @@
+import * as functions from "firebase-functions";
+
+// // Start writing Firebase Functions
+// // https://firebase.google.com/docs/functions/typescript
+//
+// export const helloWorld = functions.https.onRequest((request, response) => {
+//   functions.logger.info("Hello logs!", {structuredData: true});
+//   response.send("Hello from Firebase!");
+// });
diff --git a/functions/tsconfig.json b/functions/tsconfig.json
new file mode 100644
index 0000000..7ce05d0
--- /dev/null
+++ b/functions/tsconfig.json
@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "noImplicitReturns": true,
+    "noUnusedLocals": true,
+    "outDir": "lib",
+    "sourceMap": true,
+    "strict": true,
+    "target": "es2017"
+  },
+  "compileOnSave": true,
+  "include": [
+    "src"
+  ]
+}
diff --git a/package.json b/package.json
index 7b61f74..b7479ff 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
     "e2e": "ng e2e",
     "hashcode": "node scripts/hashcode.js",
     "deploy": "ng build --prod; firebase deploy",
+    "deploy-hosting-only": "ng build --prod && firebase deploy --only hosting",
     "build-static": "node scripts/static-generator.js",
     "deploy-static": "ng build --prod; node scripts/static-generator.js; mv static/* dist/; firebase deploy"
   },
@@ -27,7 +28,6 @@
     "@angular/platform-browser": "~11.2.3",
     "@angular/platform-browser-dynamic": "~11.2.3",
     "@angular/router": "~11.2.3",
-    "@types/ckeditor": "^4.9.10",
     "core-js": "^3.11.0",
     "firebase": "^7.0 || ^8.0",
     "firebase-admin": "^9.6.0",
@@ -45,6 +45,7 @@
     "@angular/compiler-cli": "~11.2.3",
     "@types/jasmine": "~3.6.0",
     "@types/node": "^12.11.1",
+    "@types/ckeditor": "^4.9.10",
     "cheerio": "^1.0.0-rc.6",
     "codelyzer": "^6.0.0",
     "firebase-tools": "^8.0.0",
diff --git a/src/app/admin/admin-components/add-page/add-page.component.scss b/src/app/admin/admin-components/add-page/add-page.component.scss
index 93da344..d5a3d97 100644
--- a/src/app/admin/admin-components/add-page/add-page.component.scss
+++ b/src/app/admin/admin-components/add-page/add-page.component.scss
@@ -1,4 +1,4 @@
-@import '../../../../variables.scss';
+@import 'variables';
 
 .page-form {
     box-sizing: border-box;
@@ -30,4 +30,4 @@
 ckeditor {
     display: block;
     margin-top: 30px;
-}
\ No newline at end of file
+}
diff --git a/src/app/admin/admin-components/add-post/add-post.component.html b/src/app/admin/admin-components/add-post/add-post.component.html
index 34dab3c..c996873 100644
--- a/src/app/admin/admin-components/add-post/add-post.component.html
+++ b/src/app/admin/admin-components/add-post/add-post.component.html
@@ -71,7 +71,7 @@ <h2>
         mat-raised-button
         (click)="submitForModeration(newURL, newDate, newTitle, newBody, newPublished)"
         class="submit"
-        *ngIf="router.url.includes('approval') && entityObject && ((currentAdmin.role === 'super-admin' || currentAdmin.role === 'admin') || currentAdmin.uid === entityObject.updatedBy)">
+        *ngIf="router.url.includes('approval') && entityObject && ((currentAdmin?.role === 'super-admin' || currentAdmin?.role === 'admin') || currentAdmin?.uid === entityObject.updatedBy)">
         Save Draft
     </button>
 
@@ -79,7 +79,7 @@ <h2>
         mat-raised-button
         (click)="deleteItem($event)"
         class="submit"
-        *ngIf="router.url.includes('approval') && entityObject && ((currentAdmin.role === 'super-admin' || currentAdmin.role === 'admin') || currentAdmin.uid === entityObject.updatedBy)">
+        *ngIf="router.url.includes('approval') && entityObject && ((currentAdmin?.role === 'super-admin' || currentAdmin?.role === 'admin') || currentAdmin?.uid === entityObject.updatedBy)">
         Delete Draft
     </button>
 
@@ -95,7 +95,7 @@ <h2>
         mat-raised-button
         (click)="addPost(newURL, newDate, newTitle, newBody, newPublished)"
         class="submit"
-        *ngIf="!router.url.includes('approval') && (currentAdmin.role === 'super-admin' || currentAdmin.role === 'admin')">
+        *ngIf="!router.url.includes('approval') && (currentAdmin?.role === 'super-admin' || currentAdmin?.role === 'admin')">
         <span *ngIf="!editMode">Add</span>
         <span *ngIf="editMode">Save</span>
         Post
diff --git a/src/app/admin/admin-components/add-post/add-post.component.scss b/src/app/admin/admin-components/add-post/add-post.component.scss
index 4e36139..9b4e767 100644
--- a/src/app/admin/admin-components/add-post/add-post.component.scss
+++ b/src/app/admin/admin-components/add-post/add-post.component.scss
@@ -1,4 +1,4 @@
-@import '../../../../variables.scss';
+@import 'variables';
 
 .post-form {
     box-sizing: border-box;
@@ -68,4 +68,4 @@ ckeditor {
     cursor: pointer;
     font-size: 0.8em;
     margin: 5px 0 0 0;
-}
\ No newline at end of file
+}
diff --git a/src/app/admin/admin-components/add-post/add-post.component.ts b/src/app/admin/admin-components/add-post/add-post.component.ts
index 4114b56..8761f37 100644
--- a/src/app/admin/admin-components/add-post/add-post.component.ts
+++ b/src/app/admin/admin-components/add-post/add-post.component.ts
@@ -7,6 +7,9 @@ import { ActivatedRoute, Params, Router } from '@angular/router';
 import { FirebaseApp } from '@angular/fire';
 import { DeleteDialogComponent } from '../delete-dialog/delete-dialog.component';
 import { take } from 'rxjs/operators'
+import { AngularFireStorage } from '@angular/fire/storage';
+
+const FIREBASE_POSTS_STORAGE_PATH = "firebase-cms-products";
 
 @Component({
   selector: 'add-post',
@@ -42,7 +45,9 @@ export class AddPostComponent implements OnInit {
     public globalService: GlobalService,
     public router: Router,
     public route: ActivatedRoute,
-      public dialog: MatDialog
+    public dialog: MatDialog,
+    public storage: AngularFireStorage
+     
   ) {
 
     this.newPublished = false;
@@ -113,7 +118,7 @@ export class AddPostComponent implements OnInit {
   }
 
   uploadImage() {
-    let storageRef = this.af.storage().ref();
+    let storageRef = this.storage.ref(FIREBASE_POSTS_STORAGE_PATH); //this.af.storage().ref();
     let path = Date.now().toString() + '-' + this.file.name;
     let iRef = storageRef.child('posts/' + path);
     let me = this;
@@ -121,10 +126,12 @@ export class AddPostComponent implements OnInit {
         let snackBarRef = this.snackBar.open('Image uploaded', 'OK!', {
           duration: 3000
         });
-        this.storageRef.child('posts/' + path).getDownloadURL().then(function(url) {
-          me.imageUrl = url;
-          me.newThumbnail = url;
-        });
+
+      snapshot.ref.getDownloadURL().then(function (url) {
+        me.imageUrl = url;
+        me.newThumbnail = url;
+      });
+    
     });
   }
 
@@ -133,15 +140,11 @@ export class AddPostComponent implements OnInit {
   }
 
   deleteImageRef() {
-    let storage = this.af.storage();
-    let imageRef = storage.refFromURL(this.imageUrl);
-
-    let me = this;
-    imageRef.delete().then(function() {
-      me.imageUrl = null;
-    }).catch(function(error) {
-      console.log('error', error);
-    });
+    let imageRef = this.storage.refFromURL(this.imageUrl);
+    imageRef.delete().subscribe(() => {
+      this.imageUrl = null;
+    })
+    
   }
 
   addPost(newURL: string, newDate: string, newTitle: string, newBody: string, newPublished: boolean) {
diff --git a/src/app/admin/admin-components/add-product-category/add-product-category.component.scss b/src/app/admin/admin-components/add-product-category/add-product-category.component.scss
index f932c75..5d352a9 100644
--- a/src/app/admin/admin-components/add-product-category/add-product-category.component.scss
+++ b/src/app/admin/admin-components/add-product-category/add-product-category.component.scss
@@ -1,4 +1,4 @@
-@import '../../../../variables.scss';
+@import 'variables';
 
 .category-form {
     box-sizing: border-box;
@@ -23,4 +23,4 @@ button {
 
 .mat-input-container {
     display: block;
-}
\ No newline at end of file
+}
diff --git a/src/app/admin/admin-components/add-product/add-product.component.html b/src/app/admin/admin-components/add-product/add-product.component.html
index bb523c3..4da3c5f 100644
--- a/src/app/admin/admin-components/add-product/add-product.component.html
+++ b/src/app/admin/admin-components/add-product/add-product.component.html
@@ -56,7 +56,7 @@ <h2>
         mat-raised-button
         (click)="approveItem(newTitle, newPrice, newCategory, newWeight, newDescription, newPublished)"
         class="submit"
-        *ngIf="router.url.includes('approval') && (currentAdmin.role === 'super-admin' || currentAdmin.role === 'admin')">
+        *ngIf="router.url.includes('approval') && (currentAdmin?.role === 'super-admin' || currentAdmin?.role === 'admin')">
         <span>Approve</span>
     </button>
 
@@ -64,7 +64,7 @@ <h2>
         mat-raised-button
         (click)="submitForModeration(newTitle, newPrice, newCategory, newWeight, newDescription, newPublished)"
         class="submit"
-        *ngIf="router.url.includes('approval') && entityObject && ((currentAdmin.role === 'super-admin' || currentAdmin.role === 'admin') || currentAdmin.uid === entityObject.updatedBy)">
+        *ngIf="router.url.includes('approval') && entityObject && ((currentAdmin?.role === 'super-admin' || currentAdmin?.role === 'admin') || currentAdmin?.uid === entityObject.updatedBy)">
         Save Draft
     </button>
 
@@ -72,7 +72,7 @@ <h2>
         mat-raised-button
         (click)="deleteItem($event)"
         class="submit"
-        *ngIf="router.url.includes('approval') && entityObject && ((currentAdmin.role === 'super-admin' || currentAdmin.role === 'admin') || currentAdmin.uid === entityObject.updatedBy)">
+        *ngIf="router.url.includes('approval') && entityObject && ((currentAdmin?.role === 'super-admin' || currentAdmin?.role === 'admin') || currentAdmin?.uid === entityObject.updatedBy)">
         Delete Draft
     </button>
 
@@ -88,9 +88,9 @@ <h2>
         mat-raised-button
         (click)="addProduct(newTitle, newPrice, newCategory, newWeight, newDescription, newPublished, false)"
         class="submit"
-        *ngIf="!router.url.includes('approval') && (currentAdmin.role === 'super-admin' || currentAdmin.role === 'admin')">
+        *ngIf="!router.url.includes('approval') && (currentAdmin?.role === 'super-admin' || currentAdmin?.role === 'admin')">
         <span *ngIf="!editMode">Add</span>
         <span *ngIf="editMode">Save</span>
         Product
     </button>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/app/admin/admin-components/add-product/add-product.component.scss b/src/app/admin/admin-components/add-product/add-product.component.scss
index debb458..4fbc8b9 100644
--- a/src/app/admin/admin-components/add-product/add-product.component.scss
+++ b/src/app/admin/admin-components/add-product/add-product.component.scss
@@ -1,4 +1,4 @@
-@import '../../../../variables.scss';
+@import 'variables';
 
 .product-form {
     box-sizing: border-box;
@@ -63,4 +63,4 @@ ckeditor {
     cursor: pointer;
     font-size: 0.8em;
     margin: 5px 0 0 0;
-}
\ No newline at end of file
+}
diff --git a/src/app/admin/admin-components/add-product/add-product.component.ts b/src/app/admin/admin-components/add-product/add-product.component.ts
index e600cb4..0ebf08d 100644
--- a/src/app/admin/admin-components/add-product/add-product.component.ts
+++ b/src/app/admin/admin-components/add-product/add-product.component.ts
@@ -5,10 +5,12 @@ import { MatSnackBar } from '@angular/material/snack-bar';
 import { MatDialog, MatDialogRef } from '@angular/material/dialog';
 import { GlobalService } from '../../../services/global.service';
 import { ActivatedRoute, Params, Router } from '@angular/router';
-import * as firebase from 'firebase/app';
 import { FirebaseApp } from '@angular/fire';
 import { DeleteDialogComponent } from '../delete-dialog/delete-dialog.component';
-import { take } from 'rxjs/operators'
+import { filter, take } from 'rxjs/operators'
+import { AngularFireStorage } from '@angular/fire/storage';
+
+const FIREBASE_PRODUCT_STORAGE_PATH = "firebase-cms-products";
 
 @Component({
   selector: 'add-product',
@@ -48,18 +50,22 @@ export class AddProductComponent implements OnInit {
     public router: Router,
     public route: ActivatedRoute,
     private fb: FirebaseApp,
-      public dialog: MatDialog
+    public dialog: MatDialog,
+    public storage: AngularFireStorage
   ) {
     this.newPublished = false;
     this.products = db.list('/products');
     this.categories = db.list('/categories').snapshotChanges();
 
-    this.globalService.admin.subscribe(admin => {
+    this.globalService.admin.
+      pipe(
+        filter(x => !!x),
+      ).subscribe(admin => {
       this.currentAdmin = admin;
 
       let adminApprovalProducts = this.db.list('/approvals/products/', ref => ref.orderByChild('updatedBy').equalTo(this.currentAdmin.uid));
       adminApprovalProducts.valueChanges().subscribe(response => {
-        console.log(!response);
+        /*console.log(!response);*/
       });
     });
 
@@ -136,7 +142,8 @@ export class AddProductComponent implements OnInit {
   }
 
   uploadImage() {
-    let storageRef = firebase.default.storage().ref();
+
+    let storageRef = this.storage.ref(FIREBASE_PRODUCT_STORAGE_PATH);
     let path = Date.now().toString() + '-' + this.file.name;
     let imageRef = storageRef.child('products/' + path);
     let me = this;
@@ -144,7 +151,8 @@ export class AddProductComponent implements OnInit {
         let snackBarRef = this.snackBar.open('Image uploaded', 'OK!', {
           duration: 3000
         });
-        this.storageRef.child('products/' + path).getDownloadURL().then(function(url) {
+
+      snapshot.ref.getDownloadURL().then(function (url) {
           me.imageUrl = url;
           me.newThumbnail = url;
         });
@@ -156,15 +164,12 @@ export class AddProductComponent implements OnInit {
   }
 
   deleteImageRef() {
-    let storage = firebase.default.storage();
-    let imageRef = storage.refFromURL(this.imageUrl);
+    
+    let imageRef = this.storage.refFromURL(this.imageUrl);
 
-    let me = this;
-    imageRef.delete().then(function() {
-      me.imageUrl = null;
-    }).catch(function(error) {
-      console.log('error', error);
-    });
+    imageRef.delete().subscribe(() => {
+      this.imageUrl = null;
+    })
   }
 
   validateFields(title, description, price) {
diff --git a/src/app/admin/admin-components/admin-admins/admin-admins.component.scss b/src/app/admin/admin-components/admin-admins/admin-admins.component.scss
index 579f889..9be76fb 100644
--- a/src/app/admin/admin-components/admin-admins/admin-admins.component.scss
+++ b/src/app/admin/admin-components/admin-admins/admin-admins.component.scss
@@ -1,4 +1,4 @@
-@import '../../../../variables.scss';
+@import 'variables';
 
 .button-container {
     h2 {
@@ -48,4 +48,4 @@
     margin-right: 15px;
     vertical-align: middle;
     width: 45px;
-}
\ No newline at end of file
+}
diff --git a/src/app/admin/admin-components/admin-approvals/admin-approvals.component.scss b/src/app/admin/admin-components/admin-approvals/admin-approvals.component.scss
index 76607ab..7c1931f 100644
--- a/src/app/admin/admin-components/admin-approvals/admin-approvals.component.scss
+++ b/src/app/admin/admin-components/admin-approvals/admin-approvals.component.scss
@@ -1,4 +1,4 @@
-@import '../../../../variables.scss';
+@import 'variables';
 
 .button-container {
     h2 {
@@ -56,4 +56,4 @@ section {
         vertical-align: top;
         width: 24%;
     }
-}
\ No newline at end of file
+}
diff --git a/src/app/admin/admin-components/admin-dashboard/admin-dashboard.component.scss b/src/app/admin/admin-components/admin-dashboard/admin-dashboard.component.scss
index f59faeb..701e8a3 100644
--- a/src/app/admin/admin-components/admin-dashboard/admin-dashboard.component.scss
+++ b/src/app/admin/admin-components/admin-dashboard/admin-dashboard.component.scss
@@ -1,4 +1,4 @@
-@import '../../../../variables.scss';
+@import 'variables';
 
 .mat-card {
     cursor: pointer;
@@ -11,4 +11,4 @@
         font-size: 3em;
         width: 100%;
     }
-}
\ No newline at end of file
+}
diff --git a/src/app/admin/admin-components/admin-menus/admin-menus.component.html b/src/app/admin/admin-components/admin-menus/admin-menus.component.html
index 69dae21..8cddfc3 100644
--- a/src/app/admin/admin-components/admin-menus/admin-menus.component.html
+++ b/src/app/admin/admin-components/admin-menus/admin-menus.component.html
@@ -5,8 +5,9 @@ <h2>Menus</h2>
   <p *ngIf="menuList.length === 0" class="center">
       No menu items yet
   </p>
-  <!--<div dnd-sortable-container [sortableData]="menuList">
-    <mat-card *ngFor="let item of menuList; let i = index" dnd-sortable [sortableIndex]="i">
+
+  <div>
+    <mat-card *ngFor="let item of menuList; let i = index" [sortableIndex]="i">
       <mat-form-field>
         <input matInput placeholder="Item Label" [(ngModel)]="item.label" required>
       </mat-form-field>
@@ -18,7 +19,8 @@ <h2>Menus</h2>
       </div>
       <mat-icon>drag_handle</mat-icon>
     </mat-card>
-  </div>-->
+  </div>
+
   <button mat-raised-button (click)="addMenuItem()" class="button-add-menu">Add Menu Item</button>
   <button mat-raised-button (click)="saveMenu()" class="button-add-menu">Save Menu</button>
 </div>
diff --git a/src/app/admin/admin-components/admin-menus/admin-menus.component.scss b/src/app/admin/admin-components/admin-menus/admin-menus.component.scss
index ed8b153..263276a 100644
--- a/src/app/admin/admin-components/admin-menus/admin-menus.component.scss
+++ b/src/app/admin/admin-components/admin-menus/admin-menus.component.scss
@@ -1,4 +1,4 @@
-@import '../../../../variables.scss';
+@import 'variables';
 
 .mat-card {
     cursor: move !important;
@@ -21,4 +21,4 @@ mat-toolbar {
 
 .actions {
     float: right;
-}
\ No newline at end of file
+}
diff --git a/src/app/admin/admin-components/admin-orders/admin-orders.component.scss b/src/app/admin/admin-components/admin-orders/admin-orders.component.scss
index df8dedd..de5bd34 100644
--- a/src/app/admin/admin-components/admin-orders/admin-orders.component.scss
+++ b/src/app/admin/admin-components/admin-orders/admin-orders.component.scss
@@ -1,4 +1,4 @@
-@import '../../../../variables.scss';
+@import 'variables';
 
 .button-container {
     h2 {
@@ -38,4 +38,4 @@
     button {
         margin-top: 20px;
     }
-}
\ No newline at end of file
+}
diff --git a/src/app/admin/admin-components/admin-pages/admin-pages.component.scss b/src/app/admin/admin-components/admin-pages/admin-pages.component.scss
index bca323c..165ec8c 100644
--- a/src/app/admin/admin-components/admin-pages/admin-pages.component.scss
+++ b/src/app/admin/admin-components/admin-pages/admin-pages.component.scss
@@ -1,4 +1,4 @@
-@import '../../../../variables.scss';
+@import 'variables';
 
 .button-container {
     h2 {
@@ -44,4 +44,4 @@
 .edit {
     display: inline-block;
     text-align: center;
-}
\ No newline at end of file
+}
diff --git a/src/app/admin/admin-components/admin-posts/admin-posts.component.scss b/src/app/admin/admin-components/admin-posts/admin-posts.component.scss
index 3c94d41..b90b26d 100644
--- a/src/app/admin/admin-components/admin-posts/admin-posts.component.scss
+++ b/src/app/admin/admin-components/admin-posts/admin-posts.component.scss
@@ -1,4 +1,4 @@
-@import '../../../../variables.scss';
+@import 'variables';
 
 .button-container {
     h2 {
@@ -45,4 +45,4 @@
 .edit {
     display: inline-block;
     text-align: center;
-}
\ No newline at end of file
+}
diff --git a/src/app/admin/admin-components/admin-product-categories/admin-product-categories.component.scss b/src/app/admin/admin-components/admin-product-categories/admin-product-categories.component.scss
index a5b8a34..c807aa2 100644
--- a/src/app/admin/admin-components/admin-product-categories/admin-product-categories.component.scss
+++ b/src/app/admin/admin-components/admin-product-categories/admin-product-categories.component.scss
@@ -1,4 +1,4 @@
-@import '../../../../variables.scss';
+@import 'variables';
 
 .button-container {
     h2 {
@@ -34,4 +34,4 @@
 .edit {
     display: inline-block;
     text-align: center;
-}
\ No newline at end of file
+}
diff --git a/src/app/admin/admin-components/admin-products/admin-products.component.scss b/src/app/admin/admin-components/admin-products/admin-products.component.scss
index d0572ef..b2b6a5c 100644
--- a/src/app/admin/admin-components/admin-products/admin-products.component.scss
+++ b/src/app/admin/admin-components/admin-products/admin-products.component.scss
@@ -1,4 +1,4 @@
-@import '../../../../variables.scss';
+@import 'variables';
 
 .button-container {
     h2 {
@@ -45,4 +45,4 @@
 .edit {
     display: inline-block;
     text-align: center;
-}
\ No newline at end of file
+}
diff --git a/src/app/admin/admin-components/admin/admin.component.html b/src/app/admin/admin-components/admin/admin.component.html
deleted file mode 100644
index 0e55925..0000000
--- a/src/app/admin/admin-components/admin/admin.component.html
+++ /dev/null
@@ -1,79 +0,0 @@
-<mat-toolbar *ngIf="currentAdmin && currentAdmin.role">
-    <h3>FireCMS</h3>
-    <span class="fill-space"></span>
-    <div class="login">
-        <img *ngIf="(user | async)?.photoURL" src="{{ (user | async)?.photoURL }}" class="admin-photo" [matMenuTriggerFor]="adminMenu">
-        <img *ngIf="!(user | async)?.photoURL" src="../../../../assets/placeholder.jpg" class="admin-photo" [matMenuTriggerFor]="adminMenu">
-        <mat-menu #adminMenu="matMenu">
-            <button mat-menu-item (click)="logout()">Logout</button>
-        </mat-menu>
-    </div>
-</mat-toolbar>
-<mat-sidenav-container *ngIf="currentAdmin && currentAdmin.role">
-    <mat-sidenav mode="side" opened="true">
-        <mat-list class="admin-nav">
-            <mat-list-item
-                [ngClass]="{'selected': router.url === '/admin'}"
-                routerLink="/admin">
-                <mat-icon>dashboard</mat-icon> Dashboard
-            </mat-list-item>
-            <mat-list-item
-                [ngClass]="{'selected': router.url.includes('/admin/posts')}"
-                routerLink="/admin/posts">
-                <mat-icon>class</mat-icon> Posts
-            </mat-list-item>
-            <mat-list-item
-                [ngClass]="{'selected': router.url.includes('/admin/pages')}"
-                routerLink="/admin/pages">
-                <mat-icon>description</mat-icon> Pages
-            </mat-list-item>
-            <mat-list-item
-                [ngClass]="{'selected': router.url.includes('/admin/products')}"
-                routerLink="/admin/products">
-                <mat-icon>shopping_basket</mat-icon> Products
-            </mat-list-item>
-            <mat-list-item
-                [ngClass]="{'selected': router.url.includes('/admin/product-categories')}"
-                routerLink="/admin/product-categories">
-                <mat-icon>group_work</mat-icon> Product Categories
-            </mat-list-item>
-            <mat-list-item
-                [ngClass]="{'selected': router.url.includes('/admin/customers')}"
-                routerLink="/admin/customers"
-                *ngIf="(currentAdmin.role === 'super-admin' || currentAdmin.role === 'admin')">
-                <mat-icon>account_circle</mat-icon> Customers
-            </mat-list-item>
-            <mat-list-item
-                [ngClass]="{'selected': router.url.includes('/admin/orders')}"
-                routerLink="/admin/orders"
-                *ngIf="(currentAdmin.role === 'super-admin' || currentAdmin.role === 'admin')">
-                <mat-icon>attach_money</mat-icon> Orders
-            </mat-list-item>
-            <mat-list-item
-                [ngClass]="{'selected': router.url.includes('/admin/menus')}"
-                routerLink="/admin/menus"
-                *ngIf="(currentAdmin.role === 'super-admin' || currentAdmin.role === 'admin')">
-                <mat-icon>menu</mat-icon> Menus
-            </mat-list-item>
-            <mat-list-item
-                [ngClass]="{'selected': router.url === '/admin/theme'}"
-                routerLink="/admin/theme"
-                *ngIf="(currentAdmin.role === 'super-admin' || currentAdmin.role === 'admin')">
-                <mat-icon>restaurant_menu</mat-icon> Theme
-            </mat-list-item>
-            <mat-list-item
-                [ngClass]="{'selected': router.url === '/admin/approvals'}"
-                routerLink="/admin/approvals">
-                <mat-icon>check_circle</mat-icon> Approvals
-            </mat-list-item>
-            <mat-list-item
-                [ngClass]="{'selected': router.url.includes('/admin/admins')}"
-                routerLink="/admin/admins"
-                *ngIf="currentAdmin.role === 'super-admin'">
-                <mat-icon>assignment_ind</mat-icon> Admins
-            </mat-list-item>
-        </mat-list>
-    </mat-sidenav>
-    <router-outlet></router-outlet>
-</mat-sidenav-container>
-
diff --git a/src/app/admin/admin-components/admin/admin.component.scss b/src/app/admin/admin-components/admin/admin.component.scss
deleted file mode 100644
index f2bb3f4..0000000
--- a/src/app/admin/admin-components/admin/admin.component.scss
+++ /dev/null
@@ -1,50 +0,0 @@
-@import '../../../../variables.scss';
-
-.mat-sidenav-content {
-    margin-top: -64px;
-}
-
-.admin-photo {
-    border-radius: 50%;
-    cursor: pointer;
-    height: 45px;
-    transition: transform .3s ease-out;
-    vertical-align: middle;
-    width: 45px;
-
-    &:hover {
-        transform: scale(1.1);
-    }
-}
-
-mat-sidenav {
-    box-shadow: 0 0 4px 2px rgba(0,0,0,.2);
-    width: 300px;
-}
-
-.mat-sidenav-container {
-    height: 100vh;
-}
-
-.admin-nav {
-    mat-list-item {
-        cursor: pointer;
-        transition: background .2s ease-out;
-
-        &:hover,
-        &.selected {
-            background: $color-grey-light;
-            outline: 0;
-        }
-
-        .mat-icon {
-            color: $color-main;
-            margin-right: 10px;
-        }
-    }
-}
-
-.container {
-    float: right;
-    width: 77%;
-}
\ No newline at end of file
diff --git a/src/app/storefront-components/order/order.component.html b/src/app/admin/admin-components/order/order.component.html
similarity index 100%
rename from src/app/storefront-components/order/order.component.html
rename to src/app/admin/admin-components/order/order.component.html
diff --git a/src/app/storefront-components/order/order.component.scss b/src/app/admin/admin-components/order/order.component.scss
similarity index 97%
rename from src/app/storefront-components/order/order.component.scss
rename to src/app/admin/admin-components/order/order.component.scss
index e7fbc18..66df811 100644
--- a/src/app/storefront-components/order/order.component.scss
+++ b/src/app/admin/admin-components/order/order.component.scss
@@ -1,4 +1,5 @@
-@import '../../../variables.scss';
+@import 'variables';
+
 
 .order-container {
     margin: 0;
@@ -119,4 +120,4 @@
             margin-left: 30px;
         }
     }
-}
\ No newline at end of file
+}
diff --git a/src/app/storefront-components/order/order.component.spec.ts b/src/app/admin/admin-components/order/order.component.spec.ts
similarity index 100%
rename from src/app/storefront-components/order/order.component.spec.ts
rename to src/app/admin/admin-components/order/order.component.spec.ts
diff --git a/src/app/storefront-components/order/order.component.ts b/src/app/admin/admin-components/order/order.component.ts
similarity index 100%
rename from src/app/storefront-components/order/order.component.ts
rename to src/app/admin/admin-components/order/order.component.ts
diff --git a/src/app/admin/admin-routing.module.ts b/src/app/admin/admin-routing.module.ts
index acc7847..baf715c 100644
--- a/src/app/admin/admin-routing.module.ts
+++ b/src/app/admin/admin-routing.module.ts
@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 
-import { AdminComponent } from './admin-components/admin/admin.component';
+import { AdminComponent } from './admin.component';
 import { AddPostComponent } from './admin-components/add-post/add-post.component';
 import { AdminPostsComponent } from './admin-components/admin-posts/admin-posts.component';
 import { AdminAdminsComponent } from './admin-components/admin-admins/admin-admins.component';
@@ -22,7 +22,7 @@ import { AdminProductCategoriesComponent } from './admin-components/admin-produc
 import { AddProductCategoryComponent } from './admin-components/add-product-category/add-product-category.component';
 import { AdminApprovalsComponent } from './admin-components/admin-approvals/admin-approvals.component';
 import { ApproveDialogComponent } from './admin-components/approve-dialog/approve-dialog.component';
-import { OrderComponent } from '../storefront-components/order/order.component';
+import { OrderComponent } from './admin-components/order/order.component';
 
 import { AuthGuard } from '../services/auth.guard';
 import { SuperAdminGuard } from '../services/super-admin.guard';
diff --git a/src/app/admin/admin.component.html b/src/app/admin/admin.component.html
new file mode 100644
index 0000000..1f8ceb3
--- /dev/null
+++ b/src/app/admin/admin.component.html
@@ -0,0 +1,131 @@
+<mat-sidenav-container fullscreen>
+
+  <mat-sidenav #start [opened]="mobileQuery.matches ? false : true" [mode]="mobileQuery.matches ? 'over' : 'side'">
+
+    <mat-list class="admin-nav">
+
+      <mat-list-item [ngClass]="{'selected': router.url === '/admin'}">
+        <mat-icon mat-list-icon>dashboard</mat-icon>
+        <a matLine routerLink="/admin">
+          <span>Dashboard</span>
+        </a>
+      </mat-list-item>
+
+      <mat-list-item [ngClass]="{'selected': router.url.includes('/admin/posts')}">
+        <a matLine routerLink="/admin/posts">
+          <span>Posts</span>
+        </a>
+        <mat-icon mat-list-icon>class</mat-icon>
+      </mat-list-item>
+
+      <mat-list-item [ngClass]="{'selected': router.url.includes('/admin/pages')}">
+        <a matLine routerLink="/admin/pages">
+          <span>Pages</span>
+        </a>
+        <mat-icon mat-list-icon>description</mat-icon>
+      </mat-list-item>
+
+      <mat-list-item [ngClass]="{'selected': router.url.includes('/admin/products')}">
+        <a matLine routerLink="/admin/products">
+          Products
+        </a>
+        <mat-icon mat-list-icon>shopping_basket</mat-icon>
+      </mat-list-item>
+
+      <mat-list-item [ngClass]="{'selected': router.url.includes('/admin/product-categories')}">
+        <a matLine routerLink="/admin/product-categories">
+          Categories
+        </a>
+        <mat-icon mat-list-icon>group_work</mat-icon>
+      </mat-list-item>
+
+      <mat-list-item [ngClass]="{'selected': router.url.includes('/admin/customers')}" *ngIf="(currentAdmin?.role === 'super-admin' || currentAdmin?.role === 'admin')">
+        <a matLine routerLink="/admin/customers">
+          <span>Customers</span>
+        </a>
+        <mat-icon mat-list-icon>account_circle</mat-icon>
+      </mat-list-item>
+
+      <mat-list-item [ngClass]="{'selected': router.url.includes('/admin/orders')}" *ngIf="(currentAdmin?.role === 'super-admin' || currentAdmin?.role === 'admin')">
+        <a matLine routerLink="/admin/orders">
+          Orders
+        </a>
+        <mat-icon mat-list-icon>attach_money</mat-icon>
+      </mat-list-item>
+
+      <mat-list-item [ngClass]="{'selected': router.url.includes('/admin/menus')}" *ngIf="(currentAdmin?.role === 'super-admin' || currentAdmin?.role === 'admin')">
+        <a matLine routerLink="/admin/menus">
+          Menus
+        </a>
+        <mat-icon mat-list-icon>menu</mat-icon>
+      </mat-list-item>
+
+      <mat-list-item [ngClass]="{'selected': router.url === '/admin/theme'}" *ngIf="(currentAdmin?.role === 'super-admin' || currentAdmin?.role === 'admin')">
+        <a matLine routerLink="/admin/theme">
+          Theme
+        </a>
+        <mat-icon mat-list-icon>restaurant_menu</mat-icon>
+      </mat-list-item>
+
+      <mat-list-item [ngClass]="{'selected': router.url === '/admin/approvals'}">
+        <a matLine routerLink="/admin/approvals">
+          Approvals
+        </a>
+        <mat-icon mat-list-icon>check_circle</mat-icon>
+      </mat-list-item>
+
+      <mat-list-item [ngClass]="{'selected': router.url.includes('/admin/admins')}" *ngIf="currentAdmin?.role === 'super-admin'">
+        <a matLine routerLink="/admin/admins">
+          Admins
+        </a>
+        <mat-icon mat-list-icon>assignment_ind</mat-icon> 
+      </mat-list-item>
+
+    </mat-list>
+
+  </mat-sidenav>
+
+  <mat-sidenav-content class="side-content" >
+
+    <mat-toolbar >
+
+      <mat-toolbar-row>
+
+        <button mat-icon-button (click)="start.open('mouse')" *ngIf="mobileQuery.matches ? true : false">
+          <mat-icon aria-label="menu icon-button with a heart icon">menu</mat-icon>
+        </button>
+
+        <span class="app-title">Firebase CMS Admin</span>
+        <span class="fill-space"></span>
+
+        <button mat-icon-button mat-raised-button [matMenuTriggerFor]="usermenu">
+          <ng-container *ngIf="user$ | async as user">
+            <ng-container *ngIf="user.photoURL">
+              <img class="admin-photo" src="{{user.photoURL}}" />
+            </ng-container>
+            <ng-container *ngIf="!user.photoURL">
+              <mat-icon aria-label="profile">person</mat-icon>
+            </ng-container>
+          </ng-container>
+        </button>
+
+        <mat-menu #usermenu="matMenu" color="primary">
+          <button mat-menu-item (click)="logout()">
+            <mat-icon>exit_to_app</mat-icon>
+            <span>Logout</span>
+          </button>
+        </mat-menu>
+
+
+      </mat-toolbar-row>
+
+    </mat-toolbar>
+
+    <div class="dashboard-content">
+      <router-outlet></router-outlet>
+    </div>
+
+
+  </mat-sidenav-content>
+
+</mat-sidenav-container>
diff --git a/src/app/admin/admin.component.scss b/src/app/admin/admin.component.scss
new file mode 100644
index 0000000..af678cb
--- /dev/null
+++ b/src/app/admin/admin.component.scss
@@ -0,0 +1,82 @@
+@import 'variables';
+
+:host {
+  display: flex;
+  height: 100%;
+
+  .admin-nav {
+    mat-list-item {
+      cursor: pointer;
+      transition: background .2s ease-out;
+
+      &:hover,
+      &.selected {
+        background: $color-grey-light;
+        outline: 0;
+      }
+
+      .mat-icon {
+        color: $color-main;
+        margin-right: 10px;
+      }
+    }
+  }
+
+  .toolbar-element {
+    padding: 0 14px;
+  }
+
+  .dashboard-content {
+    height: 100%;
+    overflow-y: auto;
+    width: 100%;
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: column;
+  }
+
+
+  .mat-sidenav {
+    width: 240px;
+    box-shadow: 0 0 4px 2px rgba(0,0,0,.2);
+  }
+
+  .mat-sidenav .mat-toolbar {
+    width: 240px;
+  }
+
+  .side-content {
+    overflow-y: hidden;
+    display: flex;
+    height: 100%;
+    flex-flow: column;
+  }
+
+  .fill-space {
+    flex: 1 1 auto;
+  }
+
+  .app-title {
+    cursor: pointer;
+    font-family: spartan;
+  }
+
+  .noshadow {
+    -webkit-box-shadow: none;
+    -moz-box-shadow: none;
+    box-shadow: none;
+  }
+
+  .admin-photo {
+    border-radius: 50%;
+    cursor: pointer;
+    height: 30px;
+    transition: transform .3s ease-out;
+    vertical-align: middle;
+    width: 30px;
+
+    &:hover {
+      transform: scale(1.1);
+    }
+  }
+}
diff --git a/src/app/admin/admin-components/admin/admin.component.spec.ts b/src/app/admin/admin.component.spec.ts
similarity index 89%
rename from src/app/admin/admin-components/admin/admin.component.spec.ts
rename to src/app/admin/admin.component.spec.ts
index 4e4d044..40e5713 100644
--- a/src/app/admin/admin-components/admin/admin.component.spec.ts
+++ b/src/app/admin/admin.component.spec.ts
@@ -8,9 +8,9 @@ describe('AdminComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ AdminComponent ]
+      declarations: [AdminComponent]
     })
-    .compileComponents();
+      .compileComponents();
   }));
 
   beforeEach(() => {
diff --git a/src/app/admin/admin-components/admin/admin.component.ts b/src/app/admin/admin.component.ts
similarity index 51%
rename from src/app/admin/admin-components/admin/admin.component.ts
rename to src/app/admin/admin.component.ts
index cd23833..82b9d79 100644
--- a/src/app/admin/admin-components/admin/admin.component.ts
+++ b/src/app/admin/admin.component.ts
@@ -1,22 +1,23 @@
-import { Component, OnInit } from '@angular/core';
-import { Observable } from 'rxjs';
-import { Router }    from '@angular/router';
+import { MediaMatcher } from '@angular/cdk/layout';
+import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
 import { AngularFireAuth } from '@angular/fire/auth';
 import { AngularFireDatabase } from '@angular/fire/database';
-import * as firebase from 'firebase/app';
 import { MatSnackBar } from '@angular/material/snack-bar';
-import { GlobalService } from '../../../services/global.service';
+import { Router } from '@angular/router';
+import { Observable, Subscription } from 'rxjs';
+import { GlobalService } from '../services/global.service';
 
 @Component({
   selector: 'admin',
-  templateUrl: './admin.component.html',
-  styleUrls: ['./admin.component.scss']
+  templateUrl: 'admin.component.html',
+  styleUrls: ['admin.component.scss']
 })
+export class AdminComponent implements OnInit,OnDestroy {
 
-export class AdminComponent implements OnInit {
-
-  user: Observable<firebase.default.User>;
+  user$: Observable<firebase.default.User>;
   currentAdmin: any;
+  mobileQuery: MediaQueryList;
+  subscriptions: Subscription[] = [];
 
   constructor(
     public db: AngularFireDatabase,
@@ -24,20 +25,26 @@ export class AdminComponent implements OnInit {
     public router: Router,
     public globalService: GlobalService,
     public snackBar: MatSnackBar,
+    private media: MediaMatcher,
+    private changeDetectorRef: ChangeDetectorRef,
   ) {
-    this.user = afAuth.authState;
+    this.user$ = afAuth.authState;
     this.currentAdmin = {};
   }
 
   ngOnInit() {
-    this.user.subscribe(currentUser => {
+
+    this.mobileQuery = this.media.matchMedia('(max-width: 600px)');
+    this.mobileQuery.addListener(this.mobileQueryListener.bind(this));
+
+    const onUser$ =  this.user$.subscribe(currentUser => {
       if (!currentUser) {
         this.router.navigateByUrl('login');
       } else {
-        this.db.object('/admins/' + this.globalService.hashCode(currentUser.email)).valueChanges().subscribe((a:any) => {
+        this.db.object('/admins/' + this.globalService.hashCode(currentUser.email)).valueChanges().subscribe((a: any) => {
           if (a && a.email) {
             this.globalService.admin.next(currentUser);
-            this.db.object('/admins/' + currentUser.uid).valueChanges().subscribe((a:any) => {
+            this.db.object('/admins/' + currentUser.uid).valueChanges().subscribe((a: any) => {
               this.globalService.admin.next(a);
               this.currentAdmin.role = a.role;
             });
@@ -56,10 +63,28 @@ export class AdminComponent implements OnInit {
         });
       }
     });
+
+    this.subscriptions = [...this.subscriptions, onUser$];
+
+
   }
 
-    logout() {
-        this.afAuth.signOut();
+  mobileQueryListener() {
+    this.changeDetectorRef.detectChanges();
+  }
+
+  logout() {
+    this.afAuth.signOut();
+  }
+
+  ngOnDestroy() {
+
+    if (this.subscriptions?.length) {
+      this.subscriptions.forEach(s => s.unsubscribe());
+    }
+
+    this.mobileQuery.removeListener(this.mobileQueryListener);
+
   }
 
 }
diff --git a/src/app/admin/admin.module.ts b/src/app/admin/admin.module.ts
index d06a99e..3e4dfc7 100644
--- a/src/app/admin/admin.module.ts
+++ b/src/app/admin/admin.module.ts
@@ -1,16 +1,13 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
-import 'firebase/storage';
-import * as firebase from 'firebase';
 
 import { MaterialComponentsModule } from '../materialcomponents.module';
 import { SharedModule } from '../shared.module';
 
 import { CKEditorModule } from 'ng2-ckeditor';
-//import { DndModule } from 'ng2-dnd';
 
-import { AdminComponent } from './admin-components/admin/admin.component';
+import { AdminComponent } from './admin.component';
 import { AddPostComponent } from './admin-components/add-post/add-post.component';
 import { AdminPostsComponent } from './admin-components/admin-posts/admin-posts.component';
 import { AdminAdminsComponent } from './admin-components/admin-admins/admin-admins.component';
@@ -31,11 +28,11 @@ import { AdminProductCategoriesComponent } from './admin-components/admin-produc
 import { AddProductCategoryComponent } from './admin-components/add-product-category/add-product-category.component';
 import { AdminApprovalsComponent } from './admin-components/admin-approvals/admin-approvals.component';
 import { ApproveDialogComponent } from './admin-components/approve-dialog/approve-dialog.component';
+import { OrderComponent } from './admin-components/order/order.component';
 
 import { AuthGuard } from '../services/auth.guard';
 import { SuperAdminGuard } from '../services/super-admin.guard';
 import { AdminGuard } from '../services/admin.guard';
-
 import { AdminRoutingModule } from './admin-routing.module';
 
 @NgModule({
@@ -45,10 +42,10 @@ import { AdminRoutingModule } from './admin-routing.module';
     FormsModule,
     MaterialComponentsModule,
     SharedModule,
-    CKEditorModule,
-    //DndModule.forRoot(),
+    CKEditorModule
   ],
   declarations: [
+    AdminComponent,
     AddAdminComponent,
     AddCustomerComponent,
     AddPostComponent,
@@ -56,7 +53,6 @@ import { AdminRoutingModule } from './admin-routing.module';
     AddOrderComponent,
     AddProductComponent,
     AddProductCategoryComponent,
-    AdminComponent,
     AdminDashboardComponent,
     AdminAdminsComponent,
     AdminApprovalsComponent,
@@ -70,6 +66,7 @@ import { AdminRoutingModule } from './admin-routing.module';
     AdminThemeComponent,
     DeleteDialogComponent,
     ApproveDialogComponent,
+    OrderComponent
   ],
   providers: [AuthGuard, SuperAdminGuard, AdminGuard],
   entryComponents: [DeleteDialogComponent, ApproveDialogComponent],
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index b38dd34..7f5562f 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -1,64 +1,18 @@
 import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-
-import { PostsComponent } from './storefront-components/posts/posts.component';
-import { PagesComponent } from './storefront-components/pages/pages.component';
-import { PageComponent } from './storefront-components/page/page.component';
-import { PostComponent } from './storefront-components/post/post.component';
-import { ProductsComponent } from './storefront-components/products/products.component';
-import { ProductComponent } from './storefront-components/product/product.component';
-import { CartComponent } from './storefront-components/cart/cart.component';
-import { CartIconComponent } from './storefront-components/cart-icon/cart-icon.component';
-import { CheckoutShippingComponent } from './storefront-components/checkout-shipping/checkout-shipping.component';
-import { CheckoutBillingComponent } from './storefront-components/checkout-billing/checkout-billing.component';
-import { CheckoutPaymentComponent } from './storefront-components/checkout-payment/checkout-payment.component';
-import { CheckoutReviewComponent } from './storefront-components/checkout-review/checkout-review.component';
-import { CheckoutConfirmationComponent } from './storefront-components/checkout-confirmation/checkout-confirmation.component';
-import { OrdersComponent } from './storefront-components/orders/orders.component';
-import { OrderComponent } from './storefront-components/order/order.component';
-import { ProductCategoryComponent } from './storefront-components/product-category/product-category.component';
-import { ProductCategoriesComponent } from './storefront-components/product-categories/product-categories.component';
-import { SearchResultsComponent } from './storefront-components/search-results/search-results.component';
-import { LoginComponent } from './storefront-components/login/login.component';
+import { Routes, Route, RouterModule } from '@angular/router';
+import { AppComponent } from './app.component';
+import { LoginComponent } from './public/components/login/login.component';
 
 const routes: Routes = [
-  { path: '', component: ProductCategoriesComponent },
-  { path: 'account',
-    children: [
-      {
-        path: '',
-        children: [
-          { path: 'orders', component: OrdersComponent },
-          { path: 'order/:key', component: OrderComponent },
-        ]
-      }
-    ]
-  },
-  { path: 'checkout',
+  <Route>{
+    path: '', component: AppComponent,
     children: [
-      {
-        path: '',
-        children: [
-          { path: 'shipping', component: CheckoutShippingComponent },
-          { path: 'billing', component: CheckoutBillingComponent },
-          { path: 'payment', component: CheckoutPaymentComponent },
-          { path: 'review', component: CheckoutReviewComponent },
-          { path: 'confirmation', component: CheckoutConfirmationComponent },
-        ]
-      }
+      <Route>{ path: 'login', component: LoginComponent },
+      <Route>{ path: 'register', component: LoginComponent },
+      <Route>{ path: 'admin', loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule) },
+      <Route>{ path: '', loadChildren: () => import('./main/main.module').then(m => m.MainModule)}
     ]
-  },
-  { path: 'category/:slug', component: ProductCategoryComponent },
-  { path: 'login', component: LoginComponent },
-  { path: 'register', component: LoginComponent },
-  { path: 'page/:url', component: PageComponent },
-  { path: 'product/:url', component: ProductComponent },
-  { path: 'products', component: ProductsComponent },
-  { path: 'blog', component: PostsComponent },
-  { path: 'blog/:url', component: PostComponent },
-  { path: 'cart', component: CartComponent },
-  { path: 'search', component: SearchResultsComponent },
-  { path: 'admin', loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule)}
+  }
 ];
 
 @NgModule({
diff --git a/src/app/app.component.html b/src/app/app.component.html
index d45be6b..0680b43 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,39 +1 @@
-<mat-toolbar *ngIf="!router.url.includes('/admin')" class="main-header">
-    <mat-icon class="material-icons menu-trigger" (click)="mobilenav.toggle()">menu</mat-icon>
-    <h1><a routerLink="/" (click)="mobilenav.close()">{{ (theme | async)?.siteName }}</a></h1>
-    <span class="fill-space"></span>
-    <ul>
-        <span *ngFor="let item of nav | async" class="nav-item">
-            <li *ngIf="item.label && item.label !== '' && item.url && item.url !== ''">
-                <a *ngIf="!item.url.includes('.')" routerLink="{{item.url}}" [ngClass]="{ 'color-main': router.url.includes(item.url) }">{{item.label}}</a>
-                <a *ngIf="item.url.includes('.')"  href="{{item.url}}" target="_blank">{{item.label}}</a>
-            </li>
-        </span>
-        <li class="search-nav">
-            <mat-icon (click)="mobilenav.close()" routerLink="/search" [ngClass]="{ 'color-main': router.url.includes('search') }">search</mat-icon>
-        </li>
-        <li class="cart-nav" (click)="mobilenav.close()" [ngClass]="{ 'color-main': router.url.includes('cart') }">
-            <cart-icon></cart-icon>
-        </li>
-        <li *ngIf="(user | async)?.displayName" class="user-nav">
-            <img src="{{ (user | async)?.photoURL }}" class="user-photo" (click)="mobilenav.close()" [mdMenuTriggerFor]="userMenu">
-            <mat-menu #userMenu="mdMenu">
-                <button mat-menu-item routerLink="/account/orders">My Account</button>
-                <button mat-menu-item (click)="logout()">Logout</button>
-            </mat-menu>
-        </li>
-        <li>
-            <button mat-raised-button (click)="login()" *ngIf="!(user | async)?.displayName">Login</button>
-        </li>
-    </ul>
-</mat-toolbar>
-<mat-sidenav-container>
-    <mat-sidenav #mobilenav  mode="over" class="mobile-nav">
-        <div *ngFor="let item of nav | async" class="mobile-nav-item">
-            <a routerLink="{{item.url}}" (click)="mobilenav.close()" *ngIf="item.label && item.label !== '' && item.url && item.url !== ''">
-                {{item.label}}
-            </a>
-        </div>
-    </mat-sidenav>
-    <router-outlet></router-outlet>
-</mat-sidenav-container>
+<router-outlet></router-outlet>
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index 0584551..e69de29 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -1,100 +0,0 @@
-@import '../variables.scss';
-
-.main-header {
-    a {
-        text-decoration: none;
-    }
-
-    h1 {
-        font-weight: 800;
-        margin-left: 11px;
-
-        a {
-            color: $color-main;
-        }
-    }
-
-    mat-icon {
-        cursor: pointer;
-        display: inline-block;
-
-        @include tablet {
-            display: none;
-        }
-    }
-
-    ul li {
-        display: inline-block;
-        font-size: 0.8em;
-        list-style-type: none;
-        margin-left: 25px;
-
-        &.user-nav {
-            margin-right: -30px;
-
-            @include tablet {
-                margin-right: 0;
-            }
-        }
-
-        &.cart-nav {
-            margin-left: -20px;
-
-            @include tablet {
-                margin-left: 15px;
-            }
-        }
-
-        &.search-nav {
-            margin-left: 15px;
-            margin-right: 35px;
-
-            @include tablet {
-                margin-right: 0;
-            }
-
-            mat-icon {
-                display:  inline-block;
-                transform: translateY(7px);
-            }
-        }
-    }
-
-    .nav-item {
-        display: none;
-
-        @include tablet {
-            display: inline-block;
-        }
-    }
-}
-
-.fill-space {
-    flex: 1 1 auto;
-}
-
-.user-photo {
-    border-radius: 50%;
-    cursor: pointer;
-    vertical-align: middle;
-    transition: transform .3s ease-out;
-    width: 45px;
-
-    &:hover {
-        transform: scale(1.1);
-    }
-}
-
-.mobile-nav {
-    box-sizing: border-box;
-    min-width: 50%;
-    padding: 60px 20px 30px 20px;
-
-    .mobile-nav-item {
-        margin: 20px 0;
-    }
-}
-
-.search {
-    padding: 0px 20px;
-}
\ No newline at end of file
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 76fa413..8cf03ce 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,11 +1,11 @@
 import { Component } from '@angular/core';
 import { Observable } from 'rxjs';
-import { Router, ActivatedRoute }    from '@angular/router';
-import { AngularFireDatabase, AngularFireList, AngularFireObject } from '@angular/fire/database';
+import { Router, ActivatedRoute } from '@angular/router';
+import { AngularFireDatabase } from '@angular/fire/database';
 import { AngularFireAuth } from '@angular/fire/auth';
 import * as firebase from 'firebase/app';
-import { GlobalService } from './services/global.service';
-import { LocalCartService } from './services/localcart.service';
+import { GlobalService } from '@services/global.service';
+import { LocalCartService } from '@services/localcart.service';
 
 @Component({
   selector: 'app-root',
@@ -14,8 +14,6 @@ import { LocalCartService } from './services/localcart.service';
 })
 export class AppComponent {
   title = 'app';
-  nav: Observable<any>;
-  theme: Observable<any>;
   user: Observable<firebase.default.User>;
 
   constructor(
@@ -26,8 +24,6 @@ export class AppComponent {
     public globalService: GlobalService,
     public localCart: LocalCartService,
   ) {
-    this.nav = db.list('/menus/nav').valueChanges();
-    this.theme = db.object('/theme').valueChanges();
 
     this.user = afAuth.authState;
     this.user.subscribe(currentUser => {
@@ -41,7 +37,7 @@ export class AppComponent {
           status: 'active'
         });
 
-        this.db.object('/users/' + currentUser.uid).valueChanges().subscribe((user:any) => {
+        this.db.object('/users/' + currentUser.uid).valueChanges().subscribe((user: any) => {
           if (user.cart) {
             globalService.cart.next(user.cart);
           }
@@ -53,15 +49,4 @@ export class AppComponent {
       }
     });
   }
-
-  login() {
-    this.afAuth.signInWithPopup(new firebase.default.auth.GoogleAuthProvider());
-  }
-
-  logout() {
-    this.globalService.cart.next(null);
-    this.globalService.order.next(null);
-    this.localCart.clearAll();
-    this.afAuth.signOut();
-  }
 }
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 22979fd..1aae8a6 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -10,33 +10,14 @@ import { AppRoutingModule } from './app-routing.module';
 import { FirebaseModule } from './firebase.module';
 //import 'hammerjs';
 
-// storefront components
-import { OrdersComponent } from './storefront-components/orders/orders.component';
-import { PostsComponent } from './storefront-components/posts/posts.component';
-import { PagesComponent } from './storefront-components/pages/pages.component';
-import { PageComponent } from './storefront-components/page/page.component';
-import { PostComponent } from './storefront-components/post/post.component';
-import { ProductsComponent } from './storefront-components/products/products.component';
-import { ProductComponent } from './storefront-components/product/product.component';
-import { CartComponent } from './storefront-components/cart/cart.component';
-import { CartIconComponent } from './storefront-components/cart-icon/cart-icon.component';
-import { CheckoutShippingComponent } from './storefront-components/checkout-shipping/checkout-shipping.component';
-import { CheckoutBillingComponent } from './storefront-components/checkout-billing/checkout-billing.component';
-import { CheckoutPaymentComponent } from './storefront-components/checkout-payment/checkout-payment.component';
-import { CheckoutReviewComponent } from './storefront-components/checkout-review/checkout-review.component';
-import { CheckoutConfirmationComponent } from './storefront-components/checkout-confirmation/checkout-confirmation.component';
-import { ProductCategoryComponent } from './storefront-components/product-category/product-category.component';
-import { ProductCategoriesComponent } from './storefront-components/product-categories/product-categories.component';
-import { SearchResultsComponent } from './storefront-components/search-results/search-results.component';
-import { LoginComponent } from './storefront-components/login/login.component';
-
 // services
-import { GlobalService } from './services/global.service';
-import { WindowRefService } from "./services/window-ref.service";
-import { LocalCartService } from "./services/localcart.service";
+import { GlobalService } from '@services/global.service';
+import { WindowRefService } from "@services/window-ref.service";
+import { LocalCartService } from "@services/localcart.service";
 
 // directives
 import { StopPropagationDirective } from './directives/stop-propagation.directive';
+import { LoginComponent } from './public/components/login/login.component';
 
 
 @NgModule({
@@ -51,24 +32,7 @@ import { StopPropagationDirective } from './directives/stop-propagation.directiv
   ],
   declarations: [
     AppComponent,
-    CartComponent,
-    CartIconComponent,
-    CheckoutShippingComponent,
-    CheckoutBillingComponent,
-    CheckoutPaymentComponent,
-    CheckoutReviewComponent,
-    CheckoutConfirmationComponent,
     LoginComponent,
-    OrdersComponent,
-    PagesComponent,
-    PageComponent,
-    PostComponent,
-    PostsComponent,
-    ProductsComponent,
-    ProductComponent,
-    ProductCategoryComponent,
-    ProductCategoriesComponent,
-    SearchResultsComponent,
     StopPropagationDirective,
   ],
   providers: [ GlobalService, WindowRefService, LocalCartService ],
diff --git a/src/app/storefront-components/cart-icon/cart-icon.component.html b/src/app/main/components/cart-icon/cart-icon.component.html
similarity index 58%
rename from src/app/storefront-components/cart-icon/cart-icon.component.html
rename to src/app/main/components/cart-icon/cart-icon.component.html
index 8233e16..265db77 100644
--- a/src/app/storefront-components/cart-icon/cart-icon.component.html
+++ b/src/app/main/components/cart-icon/cart-icon.component.html
@@ -1,4 +1,4 @@
 <div class="icon-container">
-    <mat-icon class="cart-icon" routerLink="/cart">shopping_cart</mat-icon>
+    <mat-icon class="cart-icon" routerLink="store/cart">shopping_cart</mat-icon>
     <span class="cart-counter" *ngIf="cartItems > 0">{{ cartItems }}</span>
 </div>
diff --git a/src/app/storefront-components/cart-icon/cart-icon.component.scss b/src/app/main/components/cart-icon/cart-icon.component.scss
similarity index 93%
rename from src/app/storefront-components/cart-icon/cart-icon.component.scss
rename to src/app/main/components/cart-icon/cart-icon.component.scss
index 990fc11..6496feb 100644
--- a/src/app/storefront-components/cart-icon/cart-icon.component.scss
+++ b/src/app/main/components/cart-icon/cart-icon.component.scss
@@ -1,4 +1,4 @@
-@import '../../../variables.scss';
+@import 'variables';
 
 .cart-icon {
     @extend %transition;
@@ -31,4 +31,4 @@
     @include tablet {
         bottom: 5px;
     }
-}
\ No newline at end of file
+}
diff --git a/src/app/storefront-components/cart-icon/cart-icon.component.spec.ts b/src/app/main/components/cart-icon/cart-icon.component.spec.ts
similarity index 100%
rename from src/app/storefront-components/cart-icon/cart-icon.component.spec.ts
rename to src/app/main/components/cart-icon/cart-icon.component.spec.ts
diff --git a/src/app/storefront-components/cart-icon/cart-icon.component.ts b/src/app/main/components/cart-icon/cart-icon.component.ts
similarity index 81%
rename from src/app/storefront-components/cart-icon/cart-icon.component.ts
rename to src/app/main/components/cart-icon/cart-icon.component.ts
index 6f58516..d0fd308 100644
--- a/src/app/storefront-components/cart-icon/cart-icon.component.ts
+++ b/src/app/main/components/cart-icon/cart-icon.component.ts
@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { Observable } from 'rxjs';
-import { GlobalService } from '../../services/global.service';
+import { GlobalService } from '@services/global.service';
 import { AngularFireDatabase } from '@angular/fire/database';
 import { AngularFireAuth } from '@angular/fire/auth';
 import * as firebase from 'firebase/app';
@@ -15,7 +15,11 @@ export class CartIconComponent implements OnInit {
   user: Observable<firebase.default.User>;
   cartItems = 0;
 
-  constructor(public globalService: GlobalService, public afAuth: AngularFireAuth, public db: AngularFireDatabase) {
+  constructor(
+    public globalService: GlobalService,
+    public afAuth: AngularFireAuth,
+    public db: AngularFireDatabase
+  ) {
     this.user = afAuth.authState;
 
     globalService.cart.subscribe((cart) => {
@@ -24,6 +28,7 @@ export class CartIconComponent implements OnInit {
       if (this.globalCart) {
         const cartArray = (<any>Object).values(this.globalCart);
         this.cartItems = cartArray.reduce((sum, cartItem) => sum + cartItem.quantity, 0);
+        this.globalService.cartTotalItems.next(this.cartItems);
       } else {
         this.cartItems = 0;
       }
diff --git a/src/app/main/entry/components/page-not-found/page-not-found.component.html b/src/app/main/entry/components/page-not-found/page-not-found.component.html
new file mode 100644
index 0000000..7596827
--- /dev/null
+++ b/src/app/main/entry/components/page-not-found/page-not-found.component.html
@@ -0,0 +1,13 @@
+<div class="message-center" >
+  <mat-card>
+    <div class="flex-center">
+      <mat-icon class="msg-icon">error</mat-icon>
+    </div>
+    <div class="msg-title" >
+      <h1>Oops!.. Page Not Found (404)</h1>
+    </div>
+    <div class="flex-center">
+      <span class="msg-subtitle">The page you attempted to visit is not found. We apologize for the inconviniences</span>
+    </div>
+  </mat-card>
+</div>
diff --git a/src/app/main/entry/components/page-not-found/page-not-found.component.scss b/src/app/main/entry/components/page-not-found/page-not-found.component.scss
new file mode 100644
index 0000000..8ca2f1d
--- /dev/null
+++ b/src/app/main/entry/components/page-not-found/page-not-found.component.scss
@@ -0,0 +1,36 @@
+:host {
+
+  .message-center {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    height: 60vh;
+    justify-content: center;
+    margin-top: -10vh;
+    padding:10px;
+  }
+
+  .flex-center {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .msg-icon {
+    font-size: 3em;
+  }
+
+  .msg-title {
+    padding-top: 30px;
+    padding-left: 30px;
+    padding-right: 30px;
+    text-align:center;
+  }
+
+  .msg-subtitle {
+    font-size: 0.8em;
+    color: #777;
+    width: 30vh;
+    text-align: center;
+  }
+}
diff --git a/src/app/main/entry/components/page-not-found/page-not-found.component.spec.ts b/src/app/main/entry/components/page-not-found/page-not-found.component.spec.ts
new file mode 100644
index 0000000..0bec2da
--- /dev/null
+++ b/src/app/main/entry/components/page-not-found/page-not-found.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { PageNotFoundComponent } from './page-not-found.component';
+
+
+describe('PageNotFoundComponent', () => {
+  let component: PageNotFoundComponent;
+  let fixture: ComponentFixture<PageNotFoundComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [PageNotFoundComponent]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PageNotFoundComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/main/entry/components/page-not-found/page-not-found.component.ts b/src/app/main/entry/components/page-not-found/page-not-found.component.ts
new file mode 100644
index 0000000..a5a2825
--- /dev/null
+++ b/src/app/main/entry/components/page-not-found/page-not-found.component.ts
@@ -0,0 +1,19 @@
+import { Component, AfterContentInit, OnInit } from '@angular/core';
+
+@Component({
+    selector: 'page-not-found',
+    templateUrl: 'page-not-found.component.html',
+    styleUrls: [`page-not-found.component.scss`]
+  })
+  export class PageNotFoundComponent {
+   
+
+    constructor(
+    ) {
+    }
+  
+    
+  
+   
+  
+  } 
diff --git a/src/app/main/entry/components/page/page.component.html b/src/app/main/entry/components/page/page.component.html
new file mode 100644
index 0000000..8501822
--- /dev/null
+++ b/src/app/main/entry/components/page/page.component.html
@@ -0,0 +1,3 @@
+<div class="container" *ngIf="page">
+  <p [innerHTML]="page.body | safeHtml"></p>
+</div>
diff --git a/src/app/storefront-components/page/page.component.scss b/src/app/main/entry/components/page/page.component.scss
similarity index 100%
rename from src/app/storefront-components/page/page.component.scss
rename to src/app/main/entry/components/page/page.component.scss
diff --git a/src/app/storefront-components/page/page.component.spec.ts b/src/app/main/entry/components/page/page.component.spec.ts
similarity index 100%
rename from src/app/storefront-components/page/page.component.spec.ts
rename to src/app/main/entry/components/page/page.component.spec.ts
diff --git a/src/app/main/entry/components/page/page.component.ts b/src/app/main/entry/components/page/page.component.ts
new file mode 100644
index 0000000..9a97886
--- /dev/null
+++ b/src/app/main/entry/components/page/page.component.ts
@@ -0,0 +1,45 @@
+import { Component, OnInit } from '@angular/core';
+import { AngularFireDatabase } from '@angular/fire/database';
+import { Meta, Title } from '@angular/platform-browser';
+import { ActivatedRoute, Params, Router } from '@angular/router';
+
+@Component({
+  selector: 'page',
+  templateUrl: 'page.component.html',
+  styleUrls: [`page.component.scss`]
+})
+export class PageComponent implements OnInit {
+
+  pageContent: any;
+  page: any;
+
+  constructor(
+    public db: AngularFireDatabase,
+    public route: ActivatedRoute,
+    public router: Router,
+    private title: Title,
+    private meta: Meta
+  ) {
+  }
+
+  ngOnInit() {
+    this.route.params.subscribe((params: Params) => {
+      const page = params?.url ?? "home";
+      this.pageContent = this.db.list('/pages', ref => ref.orderByChild('url').equalTo(page));
+      this.pageContent.valueChanges().subscribe(p => {
+        if (p[0]?.published) {
+          this.page = p[0];
+          this.title.setTitle(this.page.title);
+          this.meta.updateTag({ content: 'View ' + this.page.title }, "name='description'");
+        } else {
+          this.router.navigate(['/page-not-found']);
+        }
+      });
+    });
+  }
+
+
+
+
+
+}
diff --git a/src/app/storefront-components/pages/pages.component.html b/src/app/main/entry/components/pages/pages.component.html
similarity index 100%
rename from src/app/storefront-components/pages/pages.component.html
rename to src/app/main/entry/components/pages/pages.component.html
diff --git a/src/app/storefront-components/pages/pages.component.scss b/src/app/main/entry/components/pages/pages.component.scss
similarity index 100%
rename from src/app/storefront-components/pages/pages.component.scss
rename to src/app/main/entry/components/pages/pages.component.scss
diff --git a/src/app/storefront-components/pages/pages.component.spec.ts b/src/app/main/entry/components/pages/pages.component.spec.ts
similarity index 100%
rename from src/app/storefront-components/pages/pages.component.spec.ts
rename to src/app/main/entry/components/pages/pages.component.spec.ts
diff --git a/src/app/storefront-components/pages/pages.component.ts b/src/app/main/entry/components/pages/pages.component.ts
similarity index 100%
rename from src/app/storefront-components/pages/pages.component.ts
rename to src/app/main/entry/components/pages/pages.component.ts
diff --git a/src/app/storefront-components/post/post.component.html b/src/app/main/entry/components/post/post.component.html
similarity index 100%
rename from src/app/storefront-components/post/post.component.html
rename to src/app/main/entry/components/post/post.component.html
diff --git a/src/app/main/entry/components/post/post.component.scss b/src/app/main/entry/components/post/post.component.scss
new file mode 100644
index 0000000..9818ed8
--- /dev/null
+++ b/src/app/main/entry/components/post/post.component.scss
@@ -0,0 +1,12 @@
+@import 'variables';
+
+.post-header {
+  p {
+    color: $color-grey;
+    font-size: 0.8em;
+  }
+
+  img {
+    max-width: 150px;
+  }
+}
diff --git a/src/app/storefront-components/post/post.component.spec.ts b/src/app/main/entry/components/post/post.component.spec.ts
similarity index 100%
rename from src/app/storefront-components/post/post.component.spec.ts
rename to src/app/main/entry/components/post/post.component.spec.ts
diff --git a/src/app/main/entry/components/post/post.component.ts b/src/app/main/entry/components/post/post.component.ts
new file mode 100644
index 0000000..a8ae390
--- /dev/null
+++ b/src/app/main/entry/components/post/post.component.ts
@@ -0,0 +1,43 @@
+import { Component, OnInit} from '@angular/core';
+import { AngularFireDatabase } from '@angular/fire/database';
+import { Meta, Title } from '@angular/platform-browser';
+import { ActivatedRoute, Params } from '@angular/router';
+
+@Component({
+    selector: 'post',
+    templateUrl: 'post.component.html',
+    styleUrls: [`post.component.scss`]
+  })
+export class PostComponent implements OnInit {
+  postContent: any;
+  post: any;
+
+  constructor(
+    public db: AngularFireDatabase,
+    public route: ActivatedRoute,
+    private title: Title,
+    private meta: Meta
+    ) {
+    }
+  
+  ngOnInit() {
+    this.route.params.subscribe((params: Params) => {
+      this.postContent = this.db.list('/posts', ref => ref.orderByChild('url').equalTo(params.url));
+      this.postContent.valueChanges().subscribe(p => {
+        if (p[0].published) {
+          this.post = p[0];
+          this.title.setTitle(this.post.title);
+          this.meta.updateTag({ content: 'View ' + this.post.title }, "name='description'");
+        } else {
+          this.post = {
+            title: 'Post Not Found',
+            body: ''
+          }
+        }
+      });
+    });
+  }
+  
+   
+  
+  } 
diff --git a/src/app/storefront-components/posts/posts.component.html b/src/app/main/entry/components/posts/posts.component.html
similarity index 72%
rename from src/app/storefront-components/posts/posts.component.html
rename to src/app/main/entry/components/posts/posts.component.html
index de950ed..1166076 100644
--- a/src/app/storefront-components/posts/posts.component.html
+++ b/src/app/main/entry/components/posts/posts.component.html
@@ -1,10 +1,9 @@
 <div class="container">
-  <mat-card
-    *ngFor="let post of posts | async  | search: searchTerm | sort:['-date']"
-    routerLink="/blog/{{post.url}}"
-    class="post"
-    itemscope
-    itemtype="http://schema.org/Article">
+  <mat-card *ngFor="let post of posts | async  | search: searchTerm | sort:['-date']"
+            routerLink="/blog/{{post.url}}"
+            class="post"
+            itemscope
+            itemtype="http://schema.org/Article">
     <img [src]="getPostImage(post)" alt="{{post.title}}" itemprop="image">
     <div class="post-content">
       <h3><a routerLink="/blog/{{post.url}}" itemprop="headline">{{post.title}}</a></h3>
@@ -16,4 +15,4 @@ <h3><a routerLink="/blog/{{post.url}}" itemprop="headline">{{post.title}}</a></h
     </div>
   </mat-card>
   <p class="block-center" *ngIf="searchTerm && !(posts | async | search: searchTerm)?.length">No posts</p>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/app/main/entry/components/posts/posts.component.scss b/src/app/main/entry/components/posts/posts.component.scss
new file mode 100644
index 0000000..b623295
--- /dev/null
+++ b/src/app/main/entry/components/posts/posts.component.scss
@@ -0,0 +1,45 @@
+@import 'variables';
+
+.post {
+  cursor: pointer;
+  margin-bottom: 10px;
+
+  @include tablet {
+    margin-bottom: 5px;
+  }
+
+  img {
+    display: inline-block;
+    margin-right: 20px;
+    max-width: 100%;
+
+    @include tablet {
+      max-width: 150px;
+    }
+  }
+
+  h3 {
+    @include tablet {
+      margin-top: 0;
+    }
+  }
+
+  .post-content {
+    display: inline-block;
+    vertical-align: top;
+    width: 100%;
+
+    @include tablet {
+      width: calc(100% - 180px);
+    }
+  }
+
+  .date {
+    color: $color-grey;
+    font-size: 0.8em;
+  }
+
+  button {
+    float: right;
+  }
+}
diff --git a/src/app/storefront-components/posts/posts.component.spec.ts b/src/app/main/entry/components/posts/posts.component.spec.ts
similarity index 100%
rename from src/app/storefront-components/posts/posts.component.spec.ts
rename to src/app/main/entry/components/posts/posts.component.spec.ts
diff --git a/src/app/storefront-components/posts/posts.component.ts b/src/app/main/entry/components/posts/posts.component.ts
similarity index 82%
rename from src/app/storefront-components/posts/posts.component.ts
rename to src/app/main/entry/components/posts/posts.component.ts
index dec7333..dc8d387 100644
--- a/src/app/storefront-components/posts/posts.component.ts
+++ b/src/app/main/entry/components/posts/posts.component.ts
@@ -1,14 +1,14 @@
 import { Component, OnInit } from '@angular/core';
-import { Title, Meta } from '@angular/platform-browser';
-import { Router } from '@angular/router';
 import { AngularFireDatabase } from '@angular/fire/database';
-import { GlobalService } from '../../services/global.service';
+import { Meta, Title } from '@angular/platform-browser';
+import { Router } from '@angular/router';
 import { Observable } from 'rxjs';
+import { GlobalService } from '@services/global.service';
 
 @Component({
   selector: 'posts',
-  templateUrl: './posts.component.html',
-  styleUrls: ['./posts.component.scss']
+  templateUrl: 'posts.component.html',
+  styleUrls: [`posts.component.scss`]
 })
 export class PostsComponent implements OnInit {
   posts: Observable<any[]>;
@@ -37,7 +37,7 @@ export class PostsComponent implements OnInit {
     }
   }
 
-  getPostImage(post:any) {
+  getPostImage(post: any) {
     if (post.thumbnail) {
       return post.thumbnail;
     } else {
diff --git a/src/app/storefront-components/search-results/search-results.component.html b/src/app/main/entry/components/search-results/search-results.component.html
similarity index 98%
rename from src/app/storefront-components/search-results/search-results.component.html
rename to src/app/main/entry/components/search-results/search-results.component.html
index 4a45a91..2d0527e 100644
--- a/src/app/storefront-components/search-results/search-results.component.html
+++ b/src/app/main/entry/components/search-results/search-results.component.html
@@ -7,4 +7,4 @@
 
     <mat-toolbar class="highlight">Blog Posts</mat-toolbar>
     <posts></posts>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/app/storefront-components/search-results/search-results.component.scss b/src/app/main/entry/components/search-results/search-results.component.scss
similarity index 100%
rename from src/app/storefront-components/search-results/search-results.component.scss
rename to src/app/main/entry/components/search-results/search-results.component.scss
diff --git a/src/app/storefront-components/search-results/search-results.component.spec.ts b/src/app/main/entry/components/search-results/search-results.component.spec.ts
similarity index 100%
rename from src/app/storefront-components/search-results/search-results.component.spec.ts
rename to src/app/main/entry/components/search-results/search-results.component.spec.ts
diff --git a/src/app/storefront-components/search-results/search-results.component.ts b/src/app/main/entry/components/search-results/search-results.component.ts
similarity index 94%
rename from src/app/storefront-components/search-results/search-results.component.ts
rename to src/app/main/entry/components/search-results/search-results.component.ts
index 69fd319..0ebbe59 100644
--- a/src/app/storefront-components/search-results/search-results.component.ts
+++ b/src/app/main/entry/components/search-results/search-results.component.ts
@@ -1,6 +1,6 @@
 import { Component, OnInit, ViewChild, ElementRef, ChangeDetectorRef } from '@angular/core';
 import { Title, Meta } from '@angular/platform-browser';
-import { GlobalService } from '../../services/global.service';
+import { GlobalService } from '@services/global.service';
 
 @Component({
   selector: 'app-search-results',
diff --git a/src/app/main/entry/entry-routing.module.ts b/src/app/main/entry/entry-routing.module.ts
new file mode 100644
index 0000000..83cb011
--- /dev/null
+++ b/src/app/main/entry/entry-routing.module.ts
@@ -0,0 +1,28 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule, Route } from '@angular/router';
+import { PageComponent } from './components/page/page.component';
+import { PageNotFoundComponent } from './components/page-not-found/page-not-found.component';
+import { PostComponent } from './components/post/post.component';
+import { PostsComponent } from './components/posts/posts.component';
+import { EntryComponent } from './entry.component';
+import { SearchResultsComponent } from './components/search-results/search-results.component';
+
+const routes: Routes = [
+  <Route>{
+    path: '', component: EntryComponent,
+    children: [
+      <Route>{ path: 'blog/:url', component: PostComponent },
+      <Route>{ path: 'blog', component: PostsComponent },
+      <Route>{ path: 'page-not-found', component: PageNotFoundComponent },
+      <Route>{ path: 'search', component: SearchResultsComponent },
+      <Route>{ path: '', component: PageComponent },
+      <Route>{ path: ':url', component: PageComponent },
+
+    ]
+  }
+]
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class EntryRoutingModule {}
diff --git a/src/app/main/entry/entry.component.html b/src/app/main/entry/entry.component.html
new file mode 100644
index 0000000..0680b43
--- /dev/null
+++ b/src/app/main/entry/entry.component.html
@@ -0,0 +1 @@
+<router-outlet></router-outlet>
diff --git a/src/app/main/entry/entry.component.scss b/src/app/main/entry/entry.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/main/entry/entry.component.spec.ts b/src/app/main/entry/entry.component.spec.ts
new file mode 100644
index 0000000..6ccf53f
--- /dev/null
+++ b/src/app/main/entry/entry.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { EntryComponent } from './entry.component';
+
+
+describe('EntryComponent', () => {
+  let component: EntryComponent;
+  let fixture: ComponentFixture<EntryComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [EntryComponent]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(EntryComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/main/entry/entry.component.ts b/src/app/main/entry/entry.component.ts
new file mode 100644
index 0000000..ffdaec1
--- /dev/null
+++ b/src/app/main/entry/entry.component.ts
@@ -0,0 +1,9 @@
+
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'entry',
+  templateUrl: './entry.component.html',
+  styleUrls: ['./entry.component.scss']
+})
+export class EntryComponent {}
diff --git a/src/app/main/entry/entry.module.ts b/src/app/main/entry/entry.module.ts
new file mode 100644
index 0000000..6593fc4
--- /dev/null
+++ b/src/app/main/entry/entry.module.ts
@@ -0,0 +1,33 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MaterialComponentsModule } from '../../materialcomponents.module';
+import { EntryRoutingModule } from './entry-routing.module';
+import { FormsModule } from '@angular/forms';
+import { SharedModule } from '../../shared.module';
+import { EntryComponent } from './entry.component';
+import { PageComponent } from './components/page/page.component';
+import { PageNotFoundComponent } from './components/page-not-found/page-not-found.component';
+import { PostComponent } from './components/post/post.component';
+import { PostsComponent } from './components/posts/posts.component';
+import { SearchResultsComponent } from './components/search-results/search-results.component';
+
+
+@NgModule({
+  imports: [
+    CommonModule,
+    EntryRoutingModule,
+    FormsModule,
+    MaterialComponentsModule,
+    SharedModule,
+  ],
+  declarations: [
+    EntryComponent,
+    PageComponent,
+    PageNotFoundComponent,
+    PostComponent,
+    PostsComponent,
+    SearchResultsComponent
+  ]
+
+})
+export class EntryModule { }
diff --git a/src/app/main/main-routing.module.ts b/src/app/main/main-routing.module.ts
new file mode 100644
index 0000000..a950628
--- /dev/null
+++ b/src/app/main/main-routing.module.ts
@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Route, Routes } from '@angular/router';
+import { MainComponent } from './main.component';
+
+const routes: Routes = [
+  <Route>{
+    path: '', component: MainComponent,
+    children: [
+      <Route>{ path: 'store', loadChildren: () => import('./store/store.module').then(m => m.StoreModule) },
+      <Route>{ path: '', loadChildren: () => import('./entry/entry.module').then(m => m.EntryModule) }
+    ]
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class MainRoutingModule { }
diff --git a/src/app/main/main.component.html b/src/app/main/main.component.html
new file mode 100644
index 0000000..d1226df
--- /dev/null
+++ b/src/app/main/main.component.html
@@ -0,0 +1,69 @@
+<mat-toolbar class="main-header">
+  <mat-icon class="material-icons menu-trigger" (click)="mobilenav.toggle()">menu</mat-icon>
+  <h1><a routerLink="/" (click)="mobilenav.close()">{{ (theme | async)?.siteName }}</a></h1>
+  <span class="fill-space"></span>
+  <ul>
+    <span *ngFor="let item of nav | async" class="nav-item">
+    <li *ngIf="item.label && item.label !== '' && item.url && item.url !== ''">
+      <a *ngIf="!item.url.includes('.')" routerLink="{{item.url}}" [ngClass]="{ 'color-main': router.url.includes(item.url) }">{{item.label}}</a>
+      <a *ngIf="item.url.includes('.')" href="{{item.url}}" target="_blank">{{item.label}}</a>
+    </li>
+    </span>
+    <li class="search-nav">
+      <mat-icon (click)="mobilenav.close()" routerLink="./search" [ngClass]="{ 'color-main': router.url.includes('search') }">search</mat-icon>
+    </li>
+    <li class="cart-nav" (click)="mobilenav.close()" [ngClass]="{ 'color-main': router.url.includes('cart') }">
+      <cart-icon></cart-icon>
+    </li>
+    <li *ngIf="(user | async)?.displayName" class="user-nav">
+      <img src="{{ (user | async)?.photoURL }}" class="user-photo" (click)="mobilenav.close()" [mdMenuTriggerFor]="userMenu">
+      <mat-menu #userMenu="mdMenu">
+        <button mat-menu-item routerLink="./account/orders">My Account</button>
+        <button mat-menu-item (click)="logout()">Logout</button>
+      </mat-menu>
+    </li>
+    <li>
+      <button mat-raised-button (click)="login()" *ngIf="!(user | async)?.displayName">Login</button>
+    </li>
+  </ul>
+</mat-toolbar>
+<mat-sidenav-container>
+  <mat-sidenav #mobilenav mode="over" class="mobile-nav">
+    <mat-list class="nav">
+      <ng-container *ngFor="let item of nav | async">
+        <ng-container *ngIf="item.label && item.label !== '' && item.url && item.url !== ''">
+          <mat-list-item>
+            <a matLine routerLink="{{item.url}}">
+              <span> {{item.label}}</span>
+            </a>
+          </mat-list-item>
+        </ng-container>
+      </ng-container>
+
+      <mat-divider></mat-divider>
+
+      <mat-list-item>
+        <a matLine routerLink="/search">
+          <span>Search</span>
+        </a>
+        <mat-icon mat-list-icon>search</mat-icon>
+      </mat-list-item>
+
+      <ng-container *ngIf="cartTotal$ | async as cartTotal">
+        <ng-container *ngIf="cartTotal">
+          <mat-list-item>
+            <a matLine routerLink="store/cart">
+              <span>Cart</span>
+            </a>
+            <span class="cart-counter">{{cartTotal}}</span>
+            <mat-icon mat-list-icon>shopping_cart</mat-icon>
+          </mat-list-item>
+        </ng-container>
+
+      </ng-container>
+
+    </mat-list>
+
+  </mat-sidenav>
+  <router-outlet></router-outlet>
+</mat-sidenav-container>
diff --git a/src/app/main/main.component.scss b/src/app/main/main.component.scss
new file mode 100644
index 0000000..5889d1d
--- /dev/null
+++ b/src/app/main/main.component.scss
@@ -0,0 +1,118 @@
+@import '../../variables.scss';
+
+:host {
+  display: flex;
+  flex-direction: column;
+  overflow-y: hidden;
+  height: 100%;
+
+  .main-header {
+    a {
+      text-decoration: none;
+    }
+
+    h1 {
+      font-weight: 800;
+      margin-left: 11px;
+
+      a {
+        color: $color-main;
+      }
+    }
+
+    mat-icon {
+      cursor: pointer;
+      display: inline-block;
+
+      @include tablet {
+        display: none;
+      }
+    }
+
+    ul li {
+      display: inline-block;
+      font-size: 0.8em;
+      list-style-type: none;
+      margin-left: 25px;
+
+      &.user-nav {
+        margin-right: -30px;
+
+        @include tablet {
+          margin-right: 0;
+        }
+      }
+
+      &.cart-nav {
+        margin-left: -20px;
+        display: none;
+
+        @include tablet {
+          margin-left: 15px;
+          display: inline-block;
+        }
+      }
+
+      &.search-nav {
+        margin-left: 15px;
+        margin-right: 35px;
+        display: none;
+
+        @include tablet {
+          margin-right: 0;
+          display: inline-block;
+        }
+
+        mat-icon {
+          display: inline-block;
+          transform: translateY(7px);
+        }
+      }
+    }
+
+    .nav-item {
+      display: none;
+
+      @include tablet {
+        display: inline-block;
+      }
+    }
+  }
+
+  .fill-space {
+    flex: 1 1 auto;
+  }
+
+  .user-photo {
+    border-radius: 50%;
+    cursor: pointer;
+    vertical-align: middle;
+    transition: transform .3s ease-out;
+    width: 45px;
+
+    &:hover {
+      transform: scale(1.1);
+    }
+  }
+
+  .mobile-nav {
+    box-sizing: border-box;
+    min-width: 50%;
+
+    .mobile-nav-item {
+      margin: 20px 0;
+    }
+  }
+
+  .search {
+    padding: 0px 20px;
+  }
+
+  .cart-counter {
+    position: absolute;
+    font-size: 8px;
+    left: 30px;
+    top: 19px;
+    color: #FFF;
+  }
+}
diff --git a/src/app/main/main.component.spect.ts b/src/app/main/main.component.spect.ts
new file mode 100644
index 0000000..6476409
--- /dev/null
+++ b/src/app/main/main.component.spect.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { MainComponent } from './main.component';
+
+
+describe('MainComponent', () => {
+  let component: MainComponent;
+  let fixture: ComponentFixture<MainComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [MainComponent]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MainComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/main/main.component.ts b/src/app/main/main.component.ts
new file mode 100644
index 0000000..12605d3
--- /dev/null
+++ b/src/app/main/main.component.ts
@@ -0,0 +1,70 @@
+import { Component } from '@angular/core';
+import { Observable } from 'rxjs';
+import { Router, ActivatedRoute } from '@angular/router';
+import { AngularFireDatabase } from '@angular/fire/database';
+import { AngularFireAuth } from '@angular/fire/auth';
+import * as firebase from 'firebase/app';
+import { GlobalService } from '@services/global.service';
+import { LocalCartService } from '@services/localcart.service';
+
+@Component({
+  selector: 'main',
+  templateUrl: './main.component.html',
+  styleUrls: ['./main.component.scss']
+})
+export class MainComponent {
+  title = 'app';
+  nav: Observable<any>;
+  theme: Observable<any>;
+  user: Observable<firebase.default.User>;
+  cartTotal$: Observable<number>;
+
+
+  constructor(
+    public router: Router,
+    public route: ActivatedRoute,
+    public db: AngularFireDatabase,
+    public afAuth: AngularFireAuth,
+    public globalService: GlobalService,
+    public localCart: LocalCartService,
+  ) {
+    this.nav = db.list('/menus/nav').valueChanges();
+    this.theme = db.object('/theme').valueChanges();
+    this.cartTotal$ = this.globalService.cartTotalItems;
+
+    this.user = afAuth.authState;
+    this.user.subscribe(currentUser => {
+      globalService.user.next(currentUser);
+
+      if (currentUser) {
+        this.db.object('/users/' + currentUser.uid).update({
+          uid: currentUser.uid,
+          email: currentUser.email,
+          photoURL: currentUser.photoURL,
+          status: 'active'
+        });
+
+        this.db.object('/users/' + currentUser.uid).valueChanges().subscribe((user: any) => {
+          if (user.cart) {
+            globalService.cart.next(user.cart);
+          }
+        });
+      }
+
+      if (!currentUser && this.localCart.cartHasItems()) {
+        this.globalService.cart.next(this.localCart.cartGetItems());
+      }
+    });
+  }
+
+  login() {
+    this.afAuth.signInWithPopup(new firebase.default.auth.GoogleAuthProvider());
+  }
+
+  logout() {
+    this.globalService.cart.next(null);
+    this.globalService.order.next(null);
+    this.localCart.clearAll();
+    this.afAuth.signOut();
+  }
+}
diff --git a/src/app/main/main.module.ts b/src/app/main/main.module.ts
new file mode 100644
index 0000000..19b9050
--- /dev/null
+++ b/src/app/main/main.module.ts
@@ -0,0 +1,23 @@
+
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MainRoutingModule } from './main-routing.module';
+import { MaterialComponentsModule } from '../materialcomponents.module';
+import { SharedModule } from '../shared.module';
+import { MainComponent } from './main.component';
+import { CartIconComponent } from './components/cart-icon/cart-icon.component';
+
+
+@NgModule({
+  imports: [
+    CommonModule,
+    MainRoutingModule,
+    SharedModule,
+    MaterialComponentsModule,
+  ],
+  declarations: [
+    MainComponent,
+    CartIconComponent
+  ]
+})
+export class MainModule { }
diff --git a/src/app/main/store/store-routing.module.ts b/src/app/main/store/store-routing.module.ts
new file mode 100644
index 0000000..d18a989
--- /dev/null
+++ b/src/app/main/store/store-routing.module.ts
@@ -0,0 +1,64 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule, Route } from '@angular/router';
+import { StoreComponent } from './store.component';
+
+import { ProductCategoriesComponent } from './storefront-components/product-categories/product-categories.component';
+import { OrdersComponent } from './storefront-components/orders/orders.component';
+import { ProductsComponent } from './storefront-components/products/products.component';
+import { ProductComponent } from './storefront-components/product/product.component';
+import { CartComponent } from './storefront-components/cart/cart.component';
+import { CheckoutShippingComponent } from './storefront-components/checkout-shipping/checkout-shipping.component';
+import { CheckoutBillingComponent } from './storefront-components/checkout-billing/checkout-billing.component';
+import { CheckoutPaymentComponent } from './storefront-components/checkout-payment/checkout-payment.component';
+import { CheckoutReviewComponent } from './storefront-components/checkout-review/checkout-review.component';
+import { CheckoutConfirmationComponent } from './storefront-components/checkout-confirmation/checkout-confirmation.component';
+import { ProductCategoryComponent } from './storefront-components/product-category/product-category.component';
+import { SearchResultsComponent } from './storefront-components/search-results/search-results.component';
+import { OrderComponent } from './storefront-components/order/order.component';
+
+const routes: Routes = [
+  <Route>{
+    path: '', component: StoreComponent,
+    children: [
+      <Route>{ path: '', component: ProductCategoriesComponent },
+      <Route>{
+        path: 'account',
+        children: [
+          {
+            path: '',
+            children: [
+              { path: 'orders', component: OrdersComponent },
+              { path: 'order/:key', component: OrderComponent },
+            ]
+          }
+        ]
+      },
+      <Route>{
+        path: 'checkout',
+        children: [
+          {
+            path: '',
+            children: [
+              { path: 'shipping', component: CheckoutShippingComponent },
+              { path: 'billing', component: CheckoutBillingComponent },
+              { path: 'payment', component: CheckoutPaymentComponent },
+              { path: 'review', component: CheckoutReviewComponent },
+              { path: 'confirmation', component: CheckoutConfirmationComponent },
+            ]
+          }
+        ]
+      },
+      <Route>{ path: 'category/:slug', component: ProductCategoryComponent },
+      <Route>{ path: 'product/:url', component: ProductComponent },
+      <Route>{ path: 'products', component: ProductsComponent },
+      <Route>{ path: 'cart', component: CartComponent },
+      <Route>{ path: 'search', component: SearchResultsComponent },
+    ]
+   
+  }
+]
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class StoreRoutingModule {}
diff --git a/src/app/main/store/store.component.html b/src/app/main/store/store.component.html
new file mode 100644
index 0000000..6a164d6
--- /dev/null
+++ b/src/app/main/store/store.component.html
@@ -0,0 +1,2 @@
+<router-outlet></router-outlet>
+
diff --git a/src/app/main/store/store.component.scss b/src/app/main/store/store.component.scss
new file mode 100644
index 0000000..a7d00e3
--- /dev/null
+++ b/src/app/main/store/store.component.scss
@@ -0,0 +1,7 @@
+
+:host {
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  height: 100%;
+}
diff --git a/src/app/main/store/store.component.spec.ts b/src/app/main/store/store.component.spec.ts
new file mode 100644
index 0000000..dc34707
--- /dev/null
+++ b/src/app/main/store/store.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { StoreComponent } from './store.component';
+
+
+describe('StoreComponent', () => {
+  let component: StoreComponent;
+  let fixture: ComponentFixture<StoreComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [StoreComponent]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(StoreComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/main/store/store.component.ts b/src/app/main/store/store.component.ts
new file mode 100644
index 0000000..31c8716
--- /dev/null
+++ b/src/app/main/store/store.component.ts
@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'store',
+  templateUrl: 'store.component.html',
+  styleUrls: ['store.component.scss']
+})
+export class StoreComponent {}
diff --git a/src/app/main/store/store.module.ts b/src/app/main/store/store.module.ts
new file mode 100644
index 0000000..f5ff99d
--- /dev/null
+++ b/src/app/main/store/store.module.ts
@@ -0,0 +1,50 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { MaterialComponentsModule } from '../../materialcomponents.module';
+import { SharedModule } from '../../shared.module';
+import { CKEditorModule } from 'ng2-ckeditor';
+
+import { StoreComponent } from './store.component';
+import { OrderComponent } from './storefront-components/order/order.component';
+import { OrdersComponent } from './storefront-components/orders/orders.component';
+import { ProductsComponent } from './storefront-components/products/products.component';
+import { ProductComponent } from './storefront-components/product/product.component';
+import { CartComponent } from './storefront-components/cart/cart.component';
+import { CheckoutShippingComponent } from './storefront-components/checkout-shipping/checkout-shipping.component';
+import { CheckoutBillingComponent } from './storefront-components/checkout-billing/checkout-billing.component';
+import { CheckoutPaymentComponent } from './storefront-components/checkout-payment/checkout-payment.component';
+import { CheckoutReviewComponent } from './storefront-components/checkout-review/checkout-review.component';
+import { CheckoutConfirmationComponent } from './storefront-components/checkout-confirmation/checkout-confirmation.component';
+import { ProductCategoryComponent } from './storefront-components/product-category/product-category.component';
+import { ProductCategoriesComponent } from './storefront-components/product-categories/product-categories.component';
+import { SearchResultsComponent } from './storefront-components/search-results/search-results.component';
+import { StoreRoutingModule } from './store-routing.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    StoreRoutingModule,
+    FormsModule,
+    MaterialComponentsModule,
+    SharedModule,
+    CKEditorModule,
+  ],
+  declarations: [
+    StoreComponent,
+    OrderComponent,
+    OrdersComponent,
+    ProductsComponent,
+    ProductComponent,
+    CartComponent,
+    CheckoutShippingComponent,
+    CheckoutBillingComponent,
+    CheckoutPaymentComponent,
+    CheckoutReviewComponent,
+    CheckoutConfirmationComponent,
+    ProductCategoryComponent,
+    ProductCategoriesComponent,
+    SearchResultsComponent
+  ]
+})
+export class StoreModule {}
diff --git a/src/app/storefront-components/cart/cart.component.html b/src/app/main/store/storefront-components/cart/cart.component.html
similarity index 90%
rename from src/app/storefront-components/cart/cart.component.html
rename to src/app/main/store/storefront-components/cart/cart.component.html
index 19b786b..ade6e2c 100644
--- a/src/app/storefront-components/cart/cart.component.html
+++ b/src/app/main/store/storefront-components/cart/cart.component.html
@@ -6,7 +6,7 @@ <h3 *ngIf="!review">Cart</h3>
     <div class="quantity">Qty</div>
     <div class="total">Total</div>
   </mat-toolbar>
-  <div class="no-items" *ngIf="cartArray.length === 0">No items in the cart. <a routerLink="/products">Keep shopping!</a></div>
+  <div class="no-items" *ngIf="cartArray.length === 0">No items in the cart. <a routerLink="/store/products">Keep shopping!</a></div>
   <mat-card *ngFor="let item of cartArray" class="product">
     <div class="item">
       <img [src]="item.thumbnail" *ngIf="!review && item.thumbnail" alt="{{item.title}}">
@@ -29,6 +29,6 @@ <h3 *ngIf="!review">Cart</h3>
   <mat-card class="checkout-cta" *ngIf="cartArray.length > 0 && !review">
     <h4 class="subtotal-label">Subtotal</h4>
     <h4 class="subtotal">{{cartTotal | currency:'USD':true}}</h4>
-    <button mat-raised-button routerLink="/checkout/shipping">Checkout</button>
+    <button mat-raised-button routerLink="/store/checkout/shipping">Checkout</button>
   </mat-card>
 </div>
diff --git a/src/app/storefront-components/cart/cart.component.scss b/src/app/main/store/storefront-components/cart/cart.component.scss
similarity index 98%
rename from src/app/storefront-components/cart/cart.component.scss
rename to src/app/main/store/storefront-components/cart/cart.component.scss
index 5f13d82..3f8b076 100644
--- a/src/app/storefront-components/cart/cart.component.scss
+++ b/src/app/main/store/storefront-components/cart/cart.component.scss
@@ -1,4 +1,4 @@
-@import '../../../variables.scss';
+@import 'variables';
 
 h3,
 .no-items {
@@ -147,4 +147,4 @@ h3,
 
 .no-padding {
     padding: 20px 0 0 0;
-}
\ No newline at end of file
+}
diff --git a/src/app/storefront-components/cart/cart.component.spec.ts b/src/app/main/store/storefront-components/cart/cart.component.spec.ts
similarity index 100%
rename from src/app/storefront-components/cart/cart.component.spec.ts
rename to src/app/main/store/storefront-components/cart/cart.component.spec.ts
diff --git a/src/app/storefront-components/cart/cart.component.ts b/src/app/main/store/storefront-components/cart/cart.component.ts
similarity index 95%
rename from src/app/storefront-components/cart/cart.component.ts
rename to src/app/main/store/storefront-components/cart/cart.component.ts
index 4c75380..e8e4064 100644
--- a/src/app/storefront-components/cart/cart.component.ts
+++ b/src/app/main/store/storefront-components/cart/cart.component.ts
@@ -6,8 +6,8 @@ import { AngularFireDatabase } from '@angular/fire/database';
 import { AngularFireAuth } from '@angular/fire/auth';
 import { Observable } from 'rxjs';
 import * as firebase from 'firebase/app';
-import { GlobalService } from '../../services/global.service';
-import { LocalCartService } from '../../services/localcart.service';
+import { GlobalService } from '@services/global.service';
+import { LocalCartService } from '@services/localcart.service';
 
 @Component({
   selector: 'cart',
diff --git a/src/app/storefront-components/checkout-billing/checkout-billing.component.html b/src/app/main/store/storefront-components/checkout-billing/checkout-billing.component.html
similarity index 92%
rename from src/app/storefront-components/checkout-billing/checkout-billing.component.html
rename to src/app/main/store/storefront-components/checkout-billing/checkout-billing.component.html
index 10bbf60..914a521 100644
--- a/src/app/storefront-components/checkout-billing/checkout-billing.component.html
+++ b/src/app/main/store/storefront-components/checkout-billing/checkout-billing.component.html
@@ -22,5 +22,5 @@ <h3>Billing info</h3>
   <mat-form-field>
     <input matInput placeholder="Zip Code" [(ngModel)]="order.billing.zip">
   </mat-form-field>
-  <button mat-raised-button (click)="goTo('checkout/payment')">Continue</button>
+  <button mat-raised-button (click)="goTo('store/checkout/payment')">Continue</button>
 </mat-card>
diff --git a/src/app/storefront-components/checkout-billing/checkout-billing.component.scss b/src/app/main/store/storefront-components/checkout-billing/checkout-billing.component.scss
similarity index 93%
rename from src/app/storefront-components/checkout-billing/checkout-billing.component.scss
rename to src/app/main/store/storefront-components/checkout-billing/checkout-billing.component.scss
index 7b9f938..085758c 100644
--- a/src/app/storefront-components/checkout-billing/checkout-billing.component.scss
+++ b/src/app/main/store/storefront-components/checkout-billing/checkout-billing.component.scss
@@ -1,4 +1,4 @@
-@import '../../../variables.scss';
+@import 'variables';
 
 .container {
     margin: 10px 30px 30px 30px;
@@ -33,4 +33,4 @@ h3 {
 
 .mat-select {
     margin: 20px auto 21px auto;
-}
\ No newline at end of file
+}
diff --git a/src/app/storefront-components/checkout-billing/checkout-billing.component.spec.ts b/src/app/main/store/storefront-components/checkout-billing/checkout-billing.component.spec.ts
similarity index 100%
rename from src/app/storefront-components/checkout-billing/checkout-billing.component.spec.ts
rename to src/app/main/store/storefront-components/checkout-billing/checkout-billing.component.spec.ts
diff --git a/src/app/storefront-components/checkout-billing/checkout-billing.component.ts b/src/app/main/store/storefront-components/checkout-billing/checkout-billing.component.ts
similarity index 93%
rename from src/app/storefront-components/checkout-billing/checkout-billing.component.ts
rename to src/app/main/store/storefront-components/checkout-billing/checkout-billing.component.ts
index b193bdb..3c2953b 100644
--- a/src/app/storefront-components/checkout-billing/checkout-billing.component.ts
+++ b/src/app/main/store/storefront-components/checkout-billing/checkout-billing.component.ts
@@ -2,8 +2,8 @@ import { Component, OnInit } from '@angular/core';
 import { Title, Meta } from '@angular/platform-browser';
 import { Router } from '@angular/router';
 import { MatSnackBar } from '@angular/material/snack-bar';
-import { LocalCartService } from '../../services/localcart.service';
-import { GlobalService } from '../../services/global.service';
+import { LocalCartService } from '@services/localcart.service';
+import { GlobalService } from '@services/global.service';
 
 
 @Component({
diff --git a/src/app/storefront-components/checkout-confirmation/checkout-confirmation.component.html b/src/app/main/store/storefront-components/checkout-confirmation/checkout-confirmation.component.html
similarity index 53%
rename from src/app/storefront-components/checkout-confirmation/checkout-confirmation.component.html
rename to src/app/main/store/storefront-components/checkout-confirmation/checkout-confirmation.component.html
index d404865..7d3112c 100644
--- a/src/app/storefront-components/checkout-confirmation/checkout-confirmation.component.html
+++ b/src/app/main/store/storefront-components/checkout-confirmation/checkout-confirmation.component.html
@@ -1,5 +1,5 @@
 <mat-card class="container">
   <h3>Order Confirmation</h3>
   <p>Thank you for submitting your order!</p>
-  <button mat-raised-button *ngIf="user" routerLink="/account/orders">View My Orders</button>
+  <button mat-raised-button *ngIf="user" routerLink="/store/account/orders">View My Orders</button>
 </mat-card>
diff --git a/src/app/storefront-components/checkout-confirmation/checkout-confirmation.component.scss b/src/app/main/store/storefront-components/checkout-confirmation/checkout-confirmation.component.scss
similarity index 80%
rename from src/app/storefront-components/checkout-confirmation/checkout-confirmation.component.scss
rename to src/app/main/store/storefront-components/checkout-confirmation/checkout-confirmation.component.scss
index cba34a2..025ea1b 100644
--- a/src/app/storefront-components/checkout-confirmation/checkout-confirmation.component.scss
+++ b/src/app/main/store/storefront-components/checkout-confirmation/checkout-confirmation.component.scss
@@ -1,4 +1,4 @@
-@import '../../../variables.scss';
+@import 'variables';
 
 .container {
     margin: 10px 30px 30px 30px;
@@ -8,4 +8,4 @@
         margin: 30px auto;
         max-width: 600px;
     }
-}
\ No newline at end of file
+}
diff --git a/src/app/storefront-components/checkout-confirmation/checkout-confirmation.component.spec.ts b/src/app/main/store/storefront-components/checkout-confirmation/checkout-confirmation.component.spec.ts
similarity index 100%
rename from src/app/storefront-components/checkout-confirmation/checkout-confirmation.component.spec.ts
rename to src/app/main/store/storefront-components/checkout-confirmation/checkout-confirmation.component.spec.ts
diff --git a/src/app/storefront-components/checkout-confirmation/checkout-confirmation.component.ts b/src/app/main/store/storefront-components/checkout-confirmation/checkout-confirmation.component.ts
similarity index 92%
rename from src/app/storefront-components/checkout-confirmation/checkout-confirmation.component.ts
rename to src/app/main/store/storefront-components/checkout-confirmation/checkout-confirmation.component.ts
index 239c536..24f28d4 100644
--- a/src/app/storefront-components/checkout-confirmation/checkout-confirmation.component.ts
+++ b/src/app/main/store/storefront-components/checkout-confirmation/checkout-confirmation.component.ts
@@ -1,7 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { Title, Meta } from '@angular/platform-browser';
 import { Router } from '@angular/router';
-import { GlobalService } from '../../services/global.service';
+import { GlobalService } from '@services/global.service';
 
 @Component({
   selector: 'app-checkout-confirmation',
diff --git a/src/app/storefront-components/checkout-payment/checkout-payment.component.html b/src/app/main/store/storefront-components/checkout-payment/checkout-payment.component.html
similarity index 100%
rename from src/app/storefront-components/checkout-payment/checkout-payment.component.html
rename to src/app/main/store/storefront-components/checkout-payment/checkout-payment.component.html
diff --git a/src/app/storefront-components/checkout-payment/checkout-payment.component.scss b/src/app/main/store/storefront-components/checkout-payment/checkout-payment.component.scss
similarity index 80%
rename from src/app/storefront-components/checkout-payment/checkout-payment.component.scss
rename to src/app/main/store/storefront-components/checkout-payment/checkout-payment.component.scss
index cba34a2..025ea1b 100644
--- a/src/app/storefront-components/checkout-payment/checkout-payment.component.scss
+++ b/src/app/main/store/storefront-components/checkout-payment/checkout-payment.component.scss
@@ -1,4 +1,4 @@
-@import '../../../variables.scss';
+@import 'variables';
 
 .container {
     margin: 10px 30px 30px 30px;
@@ -8,4 +8,4 @@
         margin: 30px auto;
         max-width: 600px;
     }
-}
\ No newline at end of file
+}
diff --git a/src/app/storefront-components/checkout-payment/checkout-payment.component.spec.ts b/src/app/main/store/storefront-components/checkout-payment/checkout-payment.component.spec.ts
similarity index 100%
rename from src/app/storefront-components/checkout-payment/checkout-payment.component.spec.ts
rename to src/app/main/store/storefront-components/checkout-payment/checkout-payment.component.spec.ts
diff --git a/src/app/storefront-components/checkout-payment/checkout-payment.component.ts b/src/app/main/store/storefront-components/checkout-payment/checkout-payment.component.ts
similarity index 96%
rename from src/app/storefront-components/checkout-payment/checkout-payment.component.ts
rename to src/app/main/store/storefront-components/checkout-payment/checkout-payment.component.ts
index 480d301..74042c8 100644
--- a/src/app/storefront-components/checkout-payment/checkout-payment.component.ts
+++ b/src/app/main/store/storefront-components/checkout-payment/checkout-payment.component.ts
@@ -1,11 +1,11 @@
 import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 import { Observable } from 'rxjs';
-import { GlobalService } from '../../services/global.service';
+import { GlobalService } from '@services/global.service';
 import { AngularFireDatabase, AngularFireList } from '@angular/fire/database';
 import { AngularFireAuth } from '@angular/fire/auth';
 import { MatSnackBar } from '@angular/material/snack-bar';
-import { environment } from '../../../environments/environment';
+import { environment } from '../../../../../environments/environment';
 import { Title, Meta } from '@angular/platform-browser';
 import * as firebase from 'firebase/app';
 
diff --git a/src/app/storefront-components/checkout-review/checkout-review.component.html b/src/app/main/store/storefront-components/checkout-review/checkout-review.component.html
similarity index 96%
rename from src/app/storefront-components/checkout-review/checkout-review.component.html
rename to src/app/main/store/storefront-components/checkout-review/checkout-review.component.html
index 5a8a4fe..dddf113 100644
--- a/src/app/storefront-components/checkout-review/checkout-review.component.html
+++ b/src/app/main/store/storefront-components/checkout-review/checkout-review.component.html
@@ -27,7 +27,7 @@ <h4>Payment Info</h4>
 
   <cart></cart>
 
-  <a routerLink="/cart" class="edit">Edit Cart</a>
+  <a routerLink="/store/cart" class="edit">Edit Cart</a>
 
   <h4>Subtotal: {{ order.total | currency:'USD':true }}</h4>
 
diff --git a/src/app/storefront-components/checkout-review/checkout-review.component.scss b/src/app/main/store/storefront-components/checkout-review/checkout-review.component.scss
similarity index 93%
rename from src/app/storefront-components/checkout-review/checkout-review.component.scss
rename to src/app/main/store/storefront-components/checkout-review/checkout-review.component.scss
index 9b97efc..a803a02 100644
--- a/src/app/storefront-components/checkout-review/checkout-review.component.scss
+++ b/src/app/main/store/storefront-components/checkout-review/checkout-review.component.scss
@@ -1,4 +1,4 @@
-@import '../../../variables.scss';
+@import 'variables';
 
 .container {
     margin: 10px 30px 30px 30px;
@@ -36,4 +36,4 @@ h4 {
     font-size: .9em;
     margin-left: 10px;
     vertical-align: middle;
-}
\ No newline at end of file
+}
diff --git a/src/app/storefront-components/checkout-review/checkout-review.component.spec.ts b/src/app/main/store/storefront-components/checkout-review/checkout-review.component.spec.ts
similarity index 100%
rename from src/app/storefront-components/checkout-review/checkout-review.component.spec.ts
rename to src/app/main/store/storefront-components/checkout-review/checkout-review.component.spec.ts
diff --git a/src/app/storefront-components/checkout-review/checkout-review.component.ts b/src/app/main/store/storefront-components/checkout-review/checkout-review.component.ts
similarity index 95%
rename from src/app/storefront-components/checkout-review/checkout-review.component.ts
rename to src/app/main/store/storefront-components/checkout-review/checkout-review.component.ts
index 80588fb..3154079 100644
--- a/src/app/storefront-components/checkout-review/checkout-review.component.ts
+++ b/src/app/main/store/storefront-components/checkout-review/checkout-review.component.ts
@@ -2,8 +2,8 @@ import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 import { AngularFireDatabase, AngularFireList } from '@angular/fire/database';
 import { Title, Meta } from '@angular/platform-browser';
-import { GlobalService } from '../../services/global.service';
-import { LocalCartService } from '../../services/localcart.service';
+import { GlobalService } from '@services/global.service';
+import { LocalCartService } from '@services/localcart.service';
 
 @Component({
   selector: 'checkout-review',
diff --git a/src/app/storefront-components/checkout-shipping/checkout-shipping.component.html b/src/app/main/store/storefront-components/checkout-shipping/checkout-shipping.component.html
similarity index 91%
rename from src/app/storefront-components/checkout-shipping/checkout-shipping.component.html
rename to src/app/main/store/storefront-components/checkout-shipping/checkout-shipping.component.html
index af53eb9..8076daa 100644
--- a/src/app/storefront-components/checkout-shipping/checkout-shipping.component.html
+++ b/src/app/main/store/storefront-components/checkout-shipping/checkout-shipping.component.html
@@ -21,5 +21,5 @@ <h3>Shipping Info</h3>
   <mat-form-field>
     <input matInput placeholder="Zip Code" [(ngModel)]="order.shipping.zip">
   </mat-form-field>
-  <button mat-raised-button (click)="goTo('checkout/billing')">Continue</button>
+  <button mat-raised-button (click)="goTo('store/checkout/billing')">Continue</button>
 </mat-card>
diff --git a/src/app/storefront-components/checkout-shipping/checkout-shipping.component.scss b/src/app/main/store/storefront-components/checkout-shipping/checkout-shipping.component.scss
similarity index 87%
rename from src/app/storefront-components/checkout-shipping/checkout-shipping.component.scss
rename to src/app/main/store/storefront-components/checkout-shipping/checkout-shipping.component.scss
index ed2aca2..ecb0565 100644
--- a/src/app/storefront-components/checkout-shipping/checkout-shipping.component.scss
+++ b/src/app/main/store/storefront-components/checkout-shipping/checkout-shipping.component.scss
@@ -1,4 +1,4 @@
-@import '../../../variables.scss';
+@import 'variables';
 
 .container {
     margin: 10px 30px 30px 30px;
@@ -17,4 +17,4 @@
 
 .mat-select {
     margin: 20px auto 21px auto;
-}
\ No newline at end of file
+}
diff --git a/src/app/storefront-components/checkout-shipping/checkout-shipping.component.spec.ts b/src/app/main/store/storefront-components/checkout-shipping/checkout-shipping.component.spec.ts
similarity index 100%
rename from src/app/storefront-components/checkout-shipping/checkout-shipping.component.spec.ts
rename to src/app/main/store/storefront-components/checkout-shipping/checkout-shipping.component.spec.ts
diff --git a/src/app/storefront-components/checkout-shipping/checkout-shipping.component.ts b/src/app/main/store/storefront-components/checkout-shipping/checkout-shipping.component.ts
similarity index 93%
rename from src/app/storefront-components/checkout-shipping/checkout-shipping.component.ts
rename to src/app/main/store/storefront-components/checkout-shipping/checkout-shipping.component.ts
index ffa9684..144ac0a 100644
--- a/src/app/storefront-components/checkout-shipping/checkout-shipping.component.ts
+++ b/src/app/main/store/storefront-components/checkout-shipping/checkout-shipping.component.ts
@@ -2,8 +2,8 @@ import { Component, OnInit } from '@angular/core';
 import { Title, Meta } from '@angular/platform-browser';
 import { Router } from '@angular/router';
 import { MatSnackBar } from '@angular/material/snack-bar';
-import { GlobalService } from '../../services/global.service';
-import { LocalCartService } from '../../services/localcart.service';
+import { GlobalService } from '@services/global.service';
+import { LocalCartService } from '@services/localcart.service';
 
 @Component({
   selector: 'checkout-shipping',
diff --git a/src/app/main/store/storefront-components/order/order.component.html b/src/app/main/store/storefront-components/order/order.component.html
new file mode 100644
index 0000000..4e23dbc
--- /dev/null
+++ b/src/app/main/store/storefront-components/order/order.component.html
@@ -0,0 +1,51 @@
+<div class="container order-container" [ngClass]="{ 'full-width': admin}">
+  <div class="order-left">
+    <h3 *ngIf="order">Order #{{ order.key }}</h3>
+    <div *ngIf="order" class="order-date">{{ order.date | date }}</div>
+  </div>
+  <div class="order-right" *ngIf="order && router.url.includes('/admin')">
+    <a routerLink="/admin/customer/{{order.uid}}">
+      <img src="{{ (customers | async | getUser: order.uid)?.photoURL }}" class="user-photo" *ngIf="(customers | async | getUser: order.uid)?.photoURL">
+      <span *ngIf="(customers | async | getUser: order.uid)?.email">{{ (customers | async | getUser: order.uid)?.email }}</span>
+      <span *ngIf="!(customers | async | getUser: order.uid)?.email">Guest Customer</span>
+    </a>
+  </div>
+  <div class="order-info">
+    <mat-card *ngIf="order">
+      <h3>Shipping info</h3>
+      {{ order.shipping.name }}<br>
+      <span *ngIf="order.shipping.company">{{ order.shipping.company }}<br></span>
+      {{ order.shipping.email }}<br>
+      {{ order.shipping.address }}<br>
+      {{ order.shipping.city }}, {{ order.shipping.state }} {{ order.shipping.zip }}
+    </mat-card>
+    <mat-card *ngIf="order">
+      <h3>Billing info</h3>
+      {{ order.billing.name }}<br>
+      <span *ngIf="order.billing.company">{{ order.billing.company }}<br></span>
+      {{ order.billing.email }}<br>
+      {{ order.billing.address }}<br>
+      {{ order.billing.city }}, {{ order.billing.state }} {{ order.billing.zip }}
+    </mat-card>
+  </div>
+  <mat-toolbar class="orders-header highlight">
+    <div class="item">Item</div>
+    <div class="price">Price</div>
+    <div class="quantity">Qty</div>
+    <div class="total">Total</div>
+  </mat-toolbar>
+  <span *ngIf="order">
+    <mat-card *ngFor="let item of order.items" class="product">
+        <div class="item">{{item.title}}</div>
+        <div class="price">{{item.price | currency:'USD':true }}</div>
+        <div class="quantity">
+          <span>{{item.quantity}}</span>
+        </div>
+        <div class="total">{{item.total | currency:'USD':true }}</div>
+    </mat-card>
+  <span>
+  <button mat-raised-button routerLink="/admin/edit-order/{{order.key}}" *ngIf="router.url.includes('/admin')">Edit Order</button>
+  <mat-card class="order-summary" *ngIf="order">
+    <h4 class="subtotal-label">Subtotal</h4>
+    <h4 class="subtotal">{{order.total | currency:'USD':true}}</h4>
+  </mat-card>
diff --git a/src/app/main/store/storefront-components/order/order.component.scss b/src/app/main/store/storefront-components/order/order.component.scss
new file mode 100644
index 0000000..897dcbc
--- /dev/null
+++ b/src/app/main/store/storefront-components/order/order.component.scss
@@ -0,0 +1,122 @@
+@import 'variables';
+
+.order-container {
+    margin: 0;
+    text-align: left;
+}
+
+.order-date {
+    text-align: left;
+}
+
+.order-left {
+    display: inline-block;
+    text-align: left;
+    vertical-align: top;
+    width: 100%;
+
+    @include tablet {
+        width: 49%;
+    }
+}
+
+.order-right {
+    display: inline-block;
+    text-align: right;
+    vertical-align: top;
+    width: 100%;
+
+    @include tablet {
+        width: 49%;
+    }
+}
+
+.user-photo {
+    border-radius: 50%;
+    margin-right: 10px;
+    vertical-align: middle;
+    width: 40px;
+}
+
+.product {
+    height: 27px;
+    padding: 24px 16px;
+}
+
+.item {
+    display: inline-block;
+    width: 30%;
+
+    @include tablet {
+        float: left;
+        width: 50%;
+    }
+}
+
+.price,
+.quantity,
+.total {
+    display: inline-block;
+    width: 20%;
+
+    @include tablet {
+        float: left;
+        width: 15%;
+    }
+}
+
+.quantity {
+    span {
+        @include tablet {
+            margin-left: 13px;
+        }
+    }
+}
+
+.order-summary {
+    box-sizing: border-box;
+    margin: 20px 0;
+    width: 100%;
+
+    @include tablet {
+        float: right;
+        width: 330px;
+    }
+}
+
+.subtotal-label,
+.subtotal {
+    display: inline-block;
+    width: 48%;
+}
+
+.subtotal {
+    text-align: right;
+}
+
+.mat-raised-button {
+    margin-top: 20px;
+}
+
+.order-info {
+    margin-top: 30px;
+    text-align: left;
+
+    @include tablet {
+        display: flex;
+        flex-direction: row;
+    }
+
+    .mat-card {
+        box-sizing: border-box;
+        display: inline-block;
+        width: 100%;
+    }
+
+    .mat-card:last-of-type {
+
+        @include tablet {
+            margin-left: 30px;
+        }
+    }
+}
diff --git a/src/app/main/store/storefront-components/order/order.component.spec.ts b/src/app/main/store/storefront-components/order/order.component.spec.ts
new file mode 100644
index 0000000..b42cca3
--- /dev/null
+++ b/src/app/main/store/storefront-components/order/order.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { OrderComponent } from './order.component';
+
+describe('OrderComponent', () => {
+  let component: OrderComponent;
+  let fixture: ComponentFixture<OrderComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ OrderComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(OrderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/main/store/storefront-components/order/order.component.ts b/src/app/main/store/storefront-components/order/order.component.ts
new file mode 100644
index 0000000..4b3d671
--- /dev/null
+++ b/src/app/main/store/storefront-components/order/order.component.ts
@@ -0,0 +1,52 @@
+import { Component, OnInit } from '@angular/core';
+import { Title, Meta } from '@angular/platform-browser';
+import { ActivatedRoute, Params, Router } from '@angular/router';
+import { AngularFireDatabase } from '@angular/fire/database';
+import { Observable } from 'rxjs';
+
+@Component({
+  selector: 'order',
+  templateUrl: './order.component.html',
+  styleUrls: ['./order.component.scss']
+})
+export class OrderComponent implements OnInit {
+  orderContent: any;
+  order: any;
+  admin: boolean;
+  customers: Observable<any>;
+
+  constructor(
+    public db: AngularFireDatabase,
+    public route: ActivatedRoute,
+    public router: Router,
+    private title: Title,
+    private meta: Meta
+  ) {
+    this.admin = false;
+    this.customers = db.list('/users').valueChanges();
+  }
+
+  ngOnInit() {
+    if (this.router.url.includes('admin')) {
+      this.admin = true;
+    }
+
+    this.route.params.subscribe((params: Params) => {
+      this.title.setTitle('Order #' + params.key);
+      this.meta.updateTag({ content: 'View the order dtails' }, "name='description'");
+
+      this.orderContent = this.db.object('/orders/' + params.key);
+      this.orderContent.valueChanges().subscribe((o) => {
+        if (o) {
+          this.order = o;
+          this.order.key = params.key;
+        } else {
+          this.order = {
+            title: 'Order Not Found',
+            body: ''
+          }
+        }
+      });
+    });
+  }
+}
diff --git a/src/app/storefront-components/orders/orders.component.html b/src/app/main/store/storefront-components/orders/orders.component.html
similarity index 61%
rename from src/app/storefront-components/orders/orders.component.html
rename to src/app/main/store/storefront-components/orders/orders.component.html
index 33dbdd5..ec44730 100644
--- a/src/app/storefront-components/orders/orders.component.html
+++ b/src/app/main/store/storefront-components/orders/orders.component.html
@@ -4,17 +4,17 @@ <h3 *ngIf="router.url.includes('/admin/customer') && userObject && !userObject.e
     Guest Customer
   </h3>
   <span *ngIf="userOrders">
-    <mat-card class="order" routerLink="/account/order/{{order}}" *ngFor="let order of userOrders; let i = index">
+    <mat-card class="order" routerLink="/store/account/order/{{order}}" *ngFor="let order of userOrders; let i = index">
       <div class="order-info">
         <h3>
-          <a routerLink="/account/order/{{order}}">#{{order}}</a>
+          <a routerLink="/store/account/order/{{order}}">#{{order}}</a>
         </h3>
         <div class="date">{{ orderDates[i] | date }}</div>
       </div>
       <div class="actions">
-        <button mat-raised-button routerLink="/account/order/{{ order }}">View</button>
+        <button mat-raised-button routerLink="/store/account/order/{{ order }}">View</button>
       </div>
     </mat-card>
   </span>
   <p *ngIf="!userOrders || !userOrders.length" class="block-center">No orders</p>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/app/storefront-components/orders/orders.component.scss b/src/app/main/store/storefront-components/orders/orders.component.scss
similarity index 95%
rename from src/app/storefront-components/orders/orders.component.scss
rename to src/app/main/store/storefront-components/orders/orders.component.scss
index e661366..ee251df 100644
--- a/src/app/storefront-components/orders/orders.component.scss
+++ b/src/app/main/store/storefront-components/orders/orders.component.scss
@@ -1,4 +1,4 @@
-@import '../../../variables.scss';
+@import 'variables';
 
 .order {
     cursor: pointer;
@@ -49,4 +49,4 @@
 .price {
     color: $color-grey;
     font-size: 0.8em;
-}
\ No newline at end of file
+}
diff --git a/src/app/storefront-components/orders/orders.component.spec.ts b/src/app/main/store/storefront-components/orders/orders.component.spec.ts
similarity index 100%
rename from src/app/storefront-components/orders/orders.component.spec.ts
rename to src/app/main/store/storefront-components/orders/orders.component.spec.ts
diff --git a/src/app/storefront-components/orders/orders.component.ts b/src/app/main/store/storefront-components/orders/orders.component.ts
similarity index 92%
rename from src/app/storefront-components/orders/orders.component.ts
rename to src/app/main/store/storefront-components/orders/orders.component.ts
index b3e4bdd..10ad9b7 100644
--- a/src/app/storefront-components/orders/orders.component.ts
+++ b/src/app/main/store/storefront-components/orders/orders.component.ts
@@ -1,11 +1,11 @@
 import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute, Params, Router } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 import { Title, Meta } from '@angular/platform-browser';
 import { Observable } from 'rxjs';
 import { AngularFireDatabase } from '@angular/fire/database';
 import { AngularFireAuth } from '@angular/fire/auth';
 import * as firebase from 'firebase/app';
-import { GlobalService } from '../../services/global.service';
+import { GlobalService } from '@services/global.service';
 
 @Component({
   selector: 'orders',
diff --git a/src/app/storefront-components/page/page.component.html b/src/app/main/store/storefront-components/page/page.component.html
similarity index 100%
rename from src/app/storefront-components/page/page.component.html
rename to src/app/main/store/storefront-components/page/page.component.html
diff --git a/src/app/main/store/storefront-components/page/page.component.scss b/src/app/main/store/storefront-components/page/page.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/main/store/storefront-components/page/page.component.spec.ts b/src/app/main/store/storefront-components/page/page.component.spec.ts
new file mode 100644
index 0000000..da7eb26
--- /dev/null
+++ b/src/app/main/store/storefront-components/page/page.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PageComponent } from './page.component';
+
+describe('PageComponent', () => {
+  let component: PageComponent;
+  let fixture: ComponentFixture<PageComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PageComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/storefront-components/page/page.component.ts b/src/app/main/store/storefront-components/page/page.component.ts
similarity index 56%
rename from src/app/storefront-components/page/page.component.ts
rename to src/app/main/store/storefront-components/page/page.component.ts
index a88f33f..4a647df 100644
--- a/src/app/storefront-components/page/page.component.ts
+++ b/src/app/main/store/storefront-components/page/page.component.ts
@@ -17,23 +17,23 @@ export class PageComponent implements OnInit {
     public route: ActivatedRoute,
     private title: Title,
     private meta: Meta
-  ) {}
+  ) { }
 
   ngOnInit() {
     this.route.params.subscribe((params: Params) => {
-        this.pageContent = this.db.list('/pages', ref => ref.orderByChild('url').equalTo(params.url));
-        this.pageContent.valueChanges().subscribe(p => {
-          if (p[0].published) {
-            this.page = p[0];
-            this.title.setTitle(this.page.title);
-            this.meta.updateTag({ content: 'View ' + this.page.title }, "name='description'");
-          } else {
-            this.page = {
-              title: 'Page Not Found',
-              body: ''
-            }
+      this.pageContent = this.db.list('/pages', ref => ref.orderByChild('url').equalTo(params.url));
+      this.pageContent.valueChanges().subscribe(p => {
+        if (p[0].published) {
+          this.page = p[0];
+          this.title.setTitle(this.page.title);
+          this.meta.updateTag({ content: 'View ' + this.page.title }, "name='description'");
+        } else {
+          this.page = {
+            title: 'Page Not Found',
+            body: ''
           }
-        });
+        }
+      });
     });
   }
 }
diff --git a/src/app/main/store/storefront-components/pages/pages.component.html b/src/app/main/store/storefront-components/pages/pages.component.html
new file mode 100644
index 0000000..d2dce39
--- /dev/null
+++ b/src/app/main/store/storefront-components/pages/pages.component.html
@@ -0,0 +1,4 @@
+<mat-card class="page" *ngFor="let page of pages | async | sort:['title']">
+  <h3>{{page.title}}</h3>
+  <p>{{page.body | truncate: 20 }}</p>
+</mat-card>
diff --git a/src/app/main/store/storefront-components/pages/pages.component.scss b/src/app/main/store/storefront-components/pages/pages.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/main/store/storefront-components/pages/pages.component.spec.ts b/src/app/main/store/storefront-components/pages/pages.component.spec.ts
new file mode 100644
index 0000000..38d977a
--- /dev/null
+++ b/src/app/main/store/storefront-components/pages/pages.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PagesComponent } from './pages.component';
+
+describe('PagesComponent', () => {
+  let component: PagesComponent;
+  let fixture: ComponentFixture<PagesComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PagesComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PagesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/main/store/storefront-components/pages/pages.component.ts b/src/app/main/store/storefront-components/pages/pages.component.ts
new file mode 100644
index 0000000..0bcb8e3
--- /dev/null
+++ b/src/app/main/store/storefront-components/pages/pages.component.ts
@@ -0,0 +1,20 @@
+import { Component, OnInit } from '@angular/core';
+import { AngularFireDatabase } from '@angular/fire/database';
+import { Observable } from 'rxjs';
+
+@Component({
+  selector: 'pages',
+  templateUrl: './pages.component.html',
+  styleUrls: ['./pages.component.scss']
+})
+export class PagesComponent implements OnInit {
+  pages: Observable<any[]>;
+
+  constructor(db: AngularFireDatabase) {
+    this.pages = db.list('/pages', ref => ref.orderByChild('title')).valueChanges();
+  }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/src/app/storefront-components/product-categories/product-categories.component.html b/src/app/main/store/storefront-components/product-categories/product-categories.component.html
similarity index 73%
rename from src/app/storefront-components/product-categories/product-categories.component.html
rename to src/app/main/store/storefront-components/product-categories/product-categories.component.html
index 5a32e6e..078f7e9 100644
--- a/src/app/storefront-components/product-categories/product-categories.component.html
+++ b/src/app/main/store/storefront-components/product-categories/product-categories.component.html
@@ -2,5 +2,5 @@
   <product-category [categoryInput]="category" *ngIf="category.products" class="categories"></product-category>
 </section>
 <div *ngIf="categories | async">
-  <button mat-button routerLink="/products">View All Products</button>
+  <button mat-button routerLink="/store/products">View All Products</button>
 </div>
diff --git a/src/app/storefront-components/product-categories/product-categories.component.scss b/src/app/main/store/storefront-components/product-categories/product-categories.component.scss
similarity index 100%
rename from src/app/storefront-components/product-categories/product-categories.component.scss
rename to src/app/main/store/storefront-components/product-categories/product-categories.component.scss
diff --git a/src/app/storefront-components/product-categories/product-categories.component.spec.ts b/src/app/main/store/storefront-components/product-categories/product-categories.component.spec.ts
similarity index 100%
rename from src/app/storefront-components/product-categories/product-categories.component.spec.ts
rename to src/app/main/store/storefront-components/product-categories/product-categories.component.spec.ts
diff --git a/src/app/storefront-components/product-categories/product-categories.component.ts b/src/app/main/store/storefront-components/product-categories/product-categories.component.ts
similarity index 100%
rename from src/app/storefront-components/product-categories/product-categories.component.ts
rename to src/app/main/store/storefront-components/product-categories/product-categories.component.ts
diff --git a/src/app/storefront-components/product-category/product-category.component.html b/src/app/main/store/storefront-components/product-category/product-category.component.html
similarity index 73%
rename from src/app/storefront-components/product-category/product-category.component.html
rename to src/app/main/store/storefront-components/product-category/product-category.component.html
index b95a867..8667aea 100644
--- a/src/app/storefront-components/product-category/product-category.component.html
+++ b/src/app/main/store/storefront-components/product-category/product-category.component.html
@@ -1,13 +1,13 @@
 <div class="container" [ngClass]="{ 'category': router.url.includes('category'), 'categories': !router.url.includes('category') }">
-  <h3><a routerLink="/category/{{ categoryObject.slug }}">{{ categoryObject.name }}</a></h3>
+  <h3><a routerLink="./category/{{ categoryObject.slug }}">{{ categoryObject.name }}</a></h3>
   <section class="grid" *ngIf="categoryProducts">
     <span class="grid-tile" *ngFor="let product of categoryProducts | sort:['weight']">
       <div *ngIf="product.published" itemscope itemtype="http://schema.org/Product">
-        <mat-card routerLink="/product/{{ product.url }}" class="product">
+        <mat-card routerLink="/store/product/{{ product.url }}" class="product">
           <img [src]="getProductImage(product)" itemprop="image" alt="{{product.title}}">
           <div class="product-content">
             <h3>
-              <a routerLink="/product/{{ product.url }}" itemprop="name">
+              <a routerLink="/store/product/{{ product.url }}" itemprop="name">
                 {{ product.title }}
               </a>
             </h3>
@@ -21,11 +21,11 @@ <h3>
     </span>
     <div class="grid-tile button-container">
       <span class="see-more">
-        <button mat-raised-button routerLink="/category/{{ categoryObject.slug }}">See more {{ categoryObject.name }}</button>
+        <button mat-raised-button routerLink="/store/category/{{ categoryObject.slug }}">See more {{ categoryObject.name }}</button>
       </span>
     </div>
   </section>
 </div>
 <div *ngIf="(products | async) && router.url.includes('category')" class="bottom-cta">
   <button mat-button routerLink="/">View All Categories</button>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/app/storefront-components/product-category/product-category.component.scss b/src/app/main/store/storefront-components/product-category/product-category.component.scss
similarity index 97%
rename from src/app/storefront-components/product-category/product-category.component.scss
rename to src/app/main/store/storefront-components/product-category/product-category.component.scss
index a44d151..4fd47b3 100644
--- a/src/app/storefront-components/product-category/product-category.component.scss
+++ b/src/app/main/store/storefront-components/product-category/product-category.component.scss
@@ -1,4 +1,4 @@
-@import '../../../variables.scss';
+@import 'variables';
 
 h3 {
     margin-left: .7%;
@@ -102,4 +102,4 @@ h3 {
 .bottom-cta {
     margin-bottom: 30px;
     text-align: center;
-}
\ No newline at end of file
+}
diff --git a/src/app/storefront-components/product-category/product-category.component.spec.ts b/src/app/main/store/storefront-components/product-category/product-category.component.spec.ts
similarity index 100%
rename from src/app/storefront-components/product-category/product-category.component.spec.ts
rename to src/app/main/store/storefront-components/product-category/product-category.component.spec.ts
diff --git a/src/app/storefront-components/product-category/product-category.component.ts b/src/app/main/store/storefront-components/product-category/product-category.component.ts
similarity index 100%
rename from src/app/storefront-components/product-category/product-category.component.ts
rename to src/app/main/store/storefront-components/product-category/product-category.component.ts
diff --git a/src/app/storefront-components/product/product.component.html b/src/app/main/store/storefront-components/product/product.component.html
similarity index 100%
rename from src/app/storefront-components/product/product.component.html
rename to src/app/main/store/storefront-components/product/product.component.html
diff --git a/src/app/storefront-components/product/product.component.scss b/src/app/main/store/storefront-components/product/product.component.scss
similarity index 93%
rename from src/app/storefront-components/product/product.component.scss
rename to src/app/main/store/storefront-components/product/product.component.scss
index 9e3d333..9972207 100644
--- a/src/app/storefront-components/product/product.component.scss
+++ b/src/app/main/store/storefront-components/product/product.component.scss
@@ -1,4 +1,4 @@
-@import '../../../variables.scss';
+@import 'variables';
 
 .container {
     display: flex;
@@ -40,4 +40,4 @@
 
 .quantity {
     width: 35px;
-}
\ No newline at end of file
+}
diff --git a/src/app/storefront-components/product/product.component.spec.ts b/src/app/main/store/storefront-components/product/product.component.spec.ts
similarity index 100%
rename from src/app/storefront-components/product/product.component.spec.ts
rename to src/app/main/store/storefront-components/product/product.component.spec.ts
diff --git a/src/app/storefront-components/product/product.component.ts b/src/app/main/store/storefront-components/product/product.component.ts
similarity index 96%
rename from src/app/storefront-components/product/product.component.ts
rename to src/app/main/store/storefront-components/product/product.component.ts
index ac09929..da84516 100644
--- a/src/app/storefront-components/product/product.component.ts
+++ b/src/app/main/store/storefront-components/product/product.component.ts
@@ -7,8 +7,8 @@ import { AngularFireAuth } from '@angular/fire/auth';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { Observable } from 'rxjs';
 import * as firebase from 'firebase/app';
-import { GlobalService } from '../../services/global.service';
-import { LocalCartService } from '../../services/localcart.service';
+import { GlobalService } from '@services/global.service';
+import { LocalCartService } from '@services/localcart.service';
 
 @Component({
   selector: 'product',
diff --git a/src/app/storefront-components/products/products.component.html b/src/app/main/store/storefront-components/products/products.component.html
similarity index 76%
rename from src/app/storefront-components/products/products.component.html
rename to src/app/main/store/storefront-components/products/products.component.html
index 350a56e..426c78c 100644
--- a/src/app/storefront-components/products/products.component.html
+++ b/src/app/main/store/storefront-components/products/products.component.html
@@ -1,11 +1,11 @@
 <div class="container">
   <div class="grid">
     <div class="grid-tile" *ngFor="let product of products | async | search: searchTerm | sort:['weight']">
-      <mat-card routerLink="/product/{{product.url}}" class="product" itemscope itemtype="http://schema.org/Product">
+      <mat-card routerLink="/store/product/{{product.url}}" class="product" itemscope itemtype="http://schema.org/Product">
         <img [src]="getProductImage(product)" alt="{{product.title}}" itemprop="image">
         <div class="product-content">
           <h3>
-            <a routerLink="/product/{{product.url}}" itemprop="name">
+            <a routerLink="/store/product/{{product.url}}" itemprop="name">
               {{product.title}}
             </a>
           </h3>
@@ -16,4 +16,4 @@ <h3>
     </div>
     <p class="block-center" *ngIf="searchTerm && !(products | async | search: searchTerm)?.length">No products</p>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/app/storefront-components/products/products.component.scss b/src/app/main/store/storefront-components/products/products.component.scss
similarity index 95%
rename from src/app/storefront-components/products/products.component.scss
rename to src/app/main/store/storefront-components/products/products.component.scss
index 1fa4f7e..ff11882 100644
--- a/src/app/storefront-components/products/products.component.scss
+++ b/src/app/main/store/storefront-components/products/products.component.scss
@@ -1,4 +1,4 @@
-@import '../../../variables.scss';
+@import 'variables';
 
 .grid {
     display: flex;
@@ -46,4 +46,4 @@
     .product-content {
         display: block;
     }
-}
\ No newline at end of file
+}
diff --git a/src/app/storefront-components/products/products.component.spec.ts b/src/app/main/store/storefront-components/products/products.component.spec.ts
similarity index 100%
rename from src/app/storefront-components/products/products.component.spec.ts
rename to src/app/main/store/storefront-components/products/products.component.spec.ts
diff --git a/src/app/storefront-components/products/products.component.ts b/src/app/main/store/storefront-components/products/products.component.ts
similarity index 95%
rename from src/app/storefront-components/products/products.component.ts
rename to src/app/main/store/storefront-components/products/products.component.ts
index a0cae3c..5ca42fd 100644
--- a/src/app/storefront-components/products/products.component.ts
+++ b/src/app/main/store/storefront-components/products/products.component.ts
@@ -2,7 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { Title, Meta } from '@angular/platform-browser';
 import { AngularFireDatabase } from '@angular/fire/database';
 import { Router } from '@angular/router';
-import { GlobalService } from '../../services/global.service';
+import { GlobalService } from '@services/global.service';
 import { Observable } from 'rxjs';
 
 @Component({
diff --git a/src/app/main/store/storefront-components/search-results/search-results.component.html b/src/app/main/store/storefront-components/search-results/search-results.component.html
new file mode 100644
index 0000000..2d0527e
--- /dev/null
+++ b/src/app/main/store/storefront-components/search-results/search-results.component.html
@@ -0,0 +1,10 @@
+<mat-form-field class="search-big">
+    <input matInput placeholder="Search" (ngModelChange)="performSearch($event)" ngModel #searchit>
+</mat-form-field>
+<div *ngIf="searchTerm">
+    <mat-toolbar class="highlight">Products</mat-toolbar>
+    <products></products>
+
+    <mat-toolbar class="highlight">Blog Posts</mat-toolbar>
+    <posts></posts>
+</div>
diff --git a/src/app/main/store/storefront-components/search-results/search-results.component.scss b/src/app/main/store/storefront-components/search-results/search-results.component.scss
new file mode 100644
index 0000000..89933aa
--- /dev/null
+++ b/src/app/main/store/storefront-components/search-results/search-results.component.scss
@@ -0,0 +1,11 @@
+.highlight {
+    box-sizing: border-box;
+    margin: 30px 30px 0 30px;
+    width: calc(100% - 60px);
+}
+
+.search-big {
+    display: block;
+    margin: 30px 30px 0 30px;
+    width: calc(100% - 60px);
+}
\ No newline at end of file
diff --git a/src/app/main/store/storefront-components/search-results/search-results.component.spec.ts b/src/app/main/store/storefront-components/search-results/search-results.component.spec.ts
new file mode 100644
index 0000000..a096d2a
--- /dev/null
+++ b/src/app/main/store/storefront-components/search-results/search-results.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SearchResultsComponent } from './search-results.component';
+
+describe('SearchResultsComponent', () => {
+  let component: SearchResultsComponent;
+  let fixture: ComponentFixture<SearchResultsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SearchResultsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SearchResultsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/main/store/storefront-components/search-results/search-results.component.ts b/src/app/main/store/storefront-components/search-results/search-results.component.ts
new file mode 100644
index 0000000..0ebbe59
--- /dev/null
+++ b/src/app/main/store/storefront-components/search-results/search-results.component.ts
@@ -0,0 +1,40 @@
+import { Component, OnInit, ViewChild, ElementRef, ChangeDetectorRef } from '@angular/core';
+import { Title, Meta } from '@angular/platform-browser';
+import { GlobalService } from '@services/global.service';
+
+@Component({
+  selector: 'app-search-results',
+  templateUrl: './search-results.component.html',
+  styleUrls: ['./search-results.component.scss']
+})
+export class SearchResultsComponent implements OnInit {
+  @ViewChild('searchit') private elementRef: ElementRef;
+  searchTerm: string;
+
+  constructor(
+    public globalService: GlobalService,
+    private cdRef: ChangeDetectorRef,
+    private title: Title,
+    private meta: Meta
+  ) {
+    this.globalService.searchTerm.next('');
+    this.globalService.searchTerm.subscribe((term) => {
+      this.searchTerm = term;
+    });
+  }
+
+  ngOnInit() {
+    this.title.setTitle('Search');
+    this.meta.updateTag({ content: 'Search products and blog posts' }, "name='description'");
+  }
+
+  public ngAfterViewInit(): void {
+    this.elementRef.nativeElement.focus();
+    this.cdRef.detectChanges();
+  }
+
+  performSearch(event) {
+    this.globalService.searchTerm.next(event);
+  }
+
+}
diff --git a/src/app/public/components/login/login.component.html b/src/app/public/components/login/login.component.html
new file mode 100644
index 0000000..2556528
--- /dev/null
+++ b/src/app/public/components/login/login.component.html
@@ -0,0 +1,38 @@
+<div class="login-frame">
+  <div *ngIf="!(admin | async)?.uid">
+    <button mat-raised-button class="bw block google-login" (click)="loginWithGoogle()">
+      <img src="../../assets/google-icon.png">
+      <span *ngIf="showSignUp === false">Login with Google</span>
+      <span *ngIf="showSignUp === true">Sign Up with Google</span>
+    </button>
+    <div class="block-center">or</div>
+  </div>
+  <div *ngIf="!(admin | async)?.uid">
+    <mat-form-field class="block">
+      <input matInput type="email" placeholder="email" [(ngModel)]="newEmail">
+    </mat-form-field>
+    <mat-form-field class="block">
+      <input matInput type="password" placeholder="password" minlength="6" [(ngModel)]="newPassword">
+    </mat-form-field>
+    <button mat-raised-button class="bw" (click)="loginWithEmail()" *ngIf="showSignUp === false">
+      Login with Email
+    </button>
+  </div>
+  <div *ngIf="!(admin | async)?.uid">
+    <div *ngIf="showSignUp === false" class="sign-up-trigger">
+      Don't have an account? <a routerLink="/register">Sign up</a>
+    </div>
+    <div *ngIf="showSignUp === true">
+      <button mat-raised-button class="bw" (click)="signUpWithEmail()">
+        Sign Up with Email
+      </button>
+    </div>
+  </div>
+  <div *ngIf="showSignUp === true && !(admin | async)?.uid" class="sign-up-trigger">
+    Already have an account? <a routerLink="/login">Log in</a>
+  </div>
+  <div class="hint block-center" *ngIf="!(admin | async)?.uid">
+    You must be an approved admin to access the admin panel
+  </div>
+  <button mat-button *ngIf="(admin | async)?.uid" (click)="logout()" class="logout">Logout</button>
+</div>
diff --git a/src/app/public/components/login/login.component.scss b/src/app/public/components/login/login.component.scss
new file mode 100644
index 0000000..7420cd7
--- /dev/null
+++ b/src/app/public/components/login/login.component.scss
@@ -0,0 +1,38 @@
+.login-frame {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  justify-content: center;
+  margin-top: -10vh;
+}
+
+.block {
+  display: block;
+}
+
+.sign-up-trigger {
+  margin-top: 20px;
+  text-align: center;
+
+  a {
+    cursor: pointer;
+    text-decoration: underline;
+  }
+}
+
+button {
+  margin-bottom: 20px;
+  max-width: 100%;
+  width: 100%;
+
+  &.logout {
+    max-width: 200px;
+  }
+}
+
+button img {
+  margin-right: 10px;
+  vertical-align: middle;
+  width: 20px;
+}
diff --git a/src/app/storefront-components/login/login.component.spec.ts b/src/app/public/components/login/login.component.spec.ts
similarity index 100%
rename from src/app/storefront-components/login/login.component.spec.ts
rename to src/app/public/components/login/login.component.spec.ts
diff --git a/src/app/storefront-components/login/login.component.ts b/src/app/public/components/login/login.component.ts
similarity index 87%
rename from src/app/storefront-components/login/login.component.ts
rename to src/app/public/components/login/login.component.ts
index cab727f..835a058 100644
--- a/src/app/storefront-components/login/login.component.ts
+++ b/src/app/public/components/login/login.component.ts
@@ -1,20 +1,20 @@
 import { Component, OnInit } from '@angular/core';
 import { Observable } from 'rxjs';
 import { Title, Meta } from '@angular/platform-browser';
-import { Router }    from '@angular/router';
+import { Router } from '@angular/router';
 import { AngularFireDatabase } from '@angular/fire/database';
 import { AngularFireAuth } from '@angular/fire/auth';
 import * as firebase from 'firebase/app';
-import { GlobalService } from '../../services/global.service';
+import { GlobalService } from '@services/global.service';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { take } from 'rxjs/operators'
 
 @Component({
-  selector: 'login',
-  templateUrl: './login.component.html',
-  styleUrls: ['./login.component.scss']
-})
-export class LoginComponent implements OnInit {
+    selector: 'login',
+    templateUrl: 'login.component.html',
+    styleUrls: [`login.component.scss`]
+  })
+  export class LoginComponent implements OnInit {
 
   admin: Observable<firebase.default.User>;
   newEmail: string;
@@ -42,7 +42,7 @@ export class LoginComponent implements OnInit {
     this.admin.subscribe(currentAdmin => {
 
       if (currentAdmin) {
-        db.object('/admins/' + this.globalService.hashCode(currentAdmin.email)).valueChanges().pipe(take(1)).subscribe((admin:any) => {
+        db.object('/admins/' + this.globalService.hashCode(currentAdmin.email)).valueChanges().pipe(take(1)).subscribe((admin: any) => {
           if (admin && admin.role) {
             this.db.object('/admins/' + currentAdmin.uid).update({
               uid: currentAdmin.uid,
@@ -72,7 +72,7 @@ export class LoginComponent implements OnInit {
     this.meta.updateTag({ content: 'Login to the admin panel' }, "name='description'");
   }
 
-    loginWithGoogle() {
+  loginWithGoogle() {
     this.afAuth.signInWithPopup(new firebase.default.auth.GoogleAuthProvider());
   }
 
@@ -95,4 +95,6 @@ export class LoginComponent implements OnInit {
       });
     });
   }
-}
+   
+  
+  } 
diff --git a/src/app/services/global.service.ts b/src/app/services/global.service.ts
index 36310be..d824f26 100644
--- a/src/app/services/global.service.ts
+++ b/src/app/services/global.service.ts
@@ -6,6 +6,7 @@ export class GlobalService {
   public user = new BehaviorSubject(null);
   public admin = new BehaviorSubject(null);
   public cart = new BehaviorSubject({});
+  public cartTotalItems = new BehaviorSubject(null);
   public order = new BehaviorSubject({});
   public searchTerm = new BehaviorSubject('');
 
diff --git a/src/app/shared.module.ts b/src/app/shared.module.ts
index 6c50120..ca9b065 100644
--- a/src/app/shared.module.ts
+++ b/src/app/shared.module.ts
@@ -3,9 +3,6 @@ import { CommonModule } from '@angular/common';
 import { Routes, RouterModule } from '@angular/router';
 import { MaterialComponentsModule } from './materialcomponents.module'
 
-// Components
-import { OrderComponent } from './storefront-components/order/order.component';
-
 // Pipes
 import { SortPipe } from './pipes/sort.pipe';
 import { SafeHtmlPipe } from './pipes/safe-html.pipe';
@@ -33,7 +30,6 @@ const pipes = [
   ],
   declarations: [
     ...pipes,
-    OrderComponent
   ],
   exports: [
     ...pipes,
diff --git a/src/app/storefront-components/login/login.component.html b/src/app/storefront-components/login/login.component.html
deleted file mode 100644
index 5197c35..0000000
--- a/src/app/storefront-components/login/login.component.html
+++ /dev/null
@@ -1,38 +0,0 @@
-<div class="login-frame">
-    <div *ngIf="!(admin | async)?.uid">
-        <button mat-raised-button class="bw block google-login" (click)="loginWithGoogle()">
-            <img src="../../assets/google-icon.png">
-            <span *ngIf="showSignUp === false">Login with Google</span>
-            <span *ngIf="showSignUp === true">Sign Up with Google</span>
-        </button>
-        <div class="block-center">or</div>
-    </div>
-    <div *ngIf="!(admin | async)?.uid">
-        <mat-form-field class="block">
-            <input matInput type="email" placeholder="email" [(ngModel)]="newEmail">
-        </mat-form-field>
-        <mat-form-field class="block">
-            <input matInput type="password" placeholder="password" minlength="6" [(ngModel)]="newPassword">
-        </mat-form-field>
-        <button mat-raised-button class="bw" (click)="loginWithEmail()" *ngIf="showSignUp === false">
-            Login with Email
-        </button>
-    </div>
-    <div *ngIf="!(admin | async)?.uid">
-        <div *ngIf="showSignUp === false" class="sign-up-trigger">
-            Don't have an account? <a routerLink="/register">Sign up</a>
-        </div>
-        <div *ngIf="showSignUp === true">
-            <button mat-raised-button class="bw" (click)="signUpWithEmail()">
-                Sign Up with Email
-            </button>
-        </div>
-    </div>
-    <div *ngIf="showSignUp === true && !(admin | async)?.uid" class="sign-up-trigger">
-        Already have an account? <a routerLink="/login">Log in</a>
-    </div>
-    <div class="hint block-center" *ngIf="!(admin | async)?.uid">
-        You must be an approved admin to access the admin panel
-    </div>
-    <button mat-button *ngIf="(admin | async)?.uid" (click)="logout()" class="logout">Logout</button>
-</div>
diff --git a/src/app/storefront-components/login/login.component.scss b/src/app/storefront-components/login/login.component.scss
deleted file mode 100644
index c2aa299..0000000
--- a/src/app/storefront-components/login/login.component.scss
+++ /dev/null
@@ -1,38 +0,0 @@
-.login-frame {
-    align-items: center;
-    display: flex;
-    flex-direction: column;
-    height: 100vh;
-    justify-content: center;
-    margin-top: -10vh;
-}
-
-.block {
-    display: block;
-}
-
-.sign-up-trigger {
-    margin-top: 20px;
-    text-align: center;
-
-    a {
-        cursor: pointer;
-        text-decoration: underline;
-    }
-}
-
-button {
-    margin-bottom: 20px;
-    max-width: 100%;
-    width: 100%;
-
-    &.logout {
-        max-width: 200px;
-    }
-}
-
-button img {
-    margin-right: 10px;
-    vertical-align: middle;
-    width: 20px;
-}
\ No newline at end of file
diff --git a/src/app/storefront-components/post/post.component.scss b/src/app/storefront-components/post/post.component.scss
deleted file mode 100644
index 58e965b..0000000
--- a/src/app/storefront-components/post/post.component.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-@import '../../../variables.scss';
-
-.post-header {
-    p {
-        color: $color-grey;
-        font-size: 0.8em;
-    }
-
-    img {
-        max-width: 150px;
-    }
-}
\ No newline at end of file
diff --git a/src/app/storefront-components/post/post.component.ts b/src/app/storefront-components/post/post.component.ts
deleted file mode 100644
index 850da80..0000000
--- a/src/app/storefront-components/post/post.component.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { Title, Meta } from '@angular/platform-browser';
-import { ActivatedRoute, Params, Router } from '@angular/router';
-import { AngularFireDatabase } from '@angular/fire/database';
-
-@Component({
-  selector: 'post',
-  templateUrl: './post.component.html',
-  styleUrls: ['./post.component.scss']
-})
-export class PostComponent implements OnInit {
-  postContent: any;
-  post: any;
-
-  constructor(
-    public db: AngularFireDatabase,
-    public route: ActivatedRoute,
-    private title: Title,
-    private meta: Meta
-  ) {}
-
-  ngOnInit() {
-    this.route.params.subscribe((params: Params) => {
-        this.postContent = this.db.list('/posts', ref => ref.orderByChild('url').equalTo(params.url));
-        this.postContent.valueChanges().subscribe(p => {
-          if (p[0].published) {
-            this.post = p[0];
-            this.title.setTitle(this.post.title);
-            this.meta.updateTag({ content: 'View ' + this.post.title }, "name='description'");
-          } else {
-            this.post = {
-              title: 'Post Not Found',
-              body: ''
-            }
-          }
-        });
-    });
-  }
-}
diff --git a/src/app/storefront-components/posts/posts.component.scss b/src/app/storefront-components/posts/posts.component.scss
deleted file mode 100644
index 058f1ef..0000000
--- a/src/app/storefront-components/posts/posts.component.scss
+++ /dev/null
@@ -1,45 +0,0 @@
-@import '../../../variables.scss';
-
-.post {
-    cursor: pointer;
-    margin-bottom: 10px;
-
-    @include tablet {
-        margin-bottom: 5px;
-    }
-
-    img {
-        display: inline-block;
-        margin-right: 20px;
-        max-width: 100%;
-
-        @include tablet {
-            max-width: 150px;
-        }
-    }
-
-    h3 {
-        @include tablet {
-            margin-top: 0;
-        }
-    }
-
-    .post-content {
-        display: inline-block;
-        vertical-align: top;
-        width: 100%;
-
-        @include tablet {
-            width: calc(100% - 180px);
-        }
-    }
-
-    .date {
-        color: $color-grey;
-        font-size: 0.8em;
-    }
-
-    button {
-        float: right;
-    }
-}
\ No newline at end of file
diff --git a/src/styles.scss b/src/styles.scss
index 287bdc9..40d15be 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -2,7 +2,7 @@
 @import "~@angular/material/prebuilt-themes/indigo-pink.css";
 @import '~@angular/material/theming';
 @import url(https://fonts.googleapis.com/css?family=Roboto+Mono);
-@import "./variables";
+@import "variables";
 
 // Define a custom typography config that overrides the font-family as well as the
 // `headlines` and `body-1` levels.
@@ -15,6 +15,7 @@ $custom-typography: mat-typography-config(
 html,
 body {
     margin: 0;
+    height:100%;
 }
 
 h1,
@@ -36,7 +37,6 @@ a {
     background: $color-white;
     box-shadow: 0px 0px 14px 2px rgba(0, 0, 0, .1);
     color: $color-grey;
-    position: fixed;
     top: 0;
     z-index: 1;
 
@@ -113,7 +113,7 @@ a {
 
 .mat-sidenav-content {
     box-sizing: border-box;
-    padding-top: 64px;
+    padding-top: 10px;
 }
 
 admin .mat-sidenav-content {
@@ -166,7 +166,7 @@ admin .mat-sidenav-content {
 }
 
 /*dnd*/
-.dnd-drag-start {
+/*.dnd-drag-start {
     -moz-transform:scale(0.8);
     -webkit-transform:scale(0.8);
     transform:scale(0.8);
@@ -189,4 +189,4 @@ admin .mat-sidenav-content {
   transform:scale(0.9);
   opacity:0.7;
   border: 1px dashed #000;
-}
\ No newline at end of file
+}*/
diff --git a/tsconfig.json b/tsconfig.json
index 4a4dc62..574818c 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -15,7 +15,10 @@
     "lib": [
       "es2018",
       "dom"
-    ]
+    ],
+    "paths": {
+      "@services/*": [ "src/app/services/*" ]
+    }
   },
   "angularCompilerOptions": {
     "enableI18nLegacyMessageIdFormat": false