diff --git a/package-lock.json b/package-lock.json
index f585bff6..0a05ec78 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -361,9 +361,9 @@
       }
     },
     "@angular/flex-layout": {
-      "version": "2.0.0-rc.1",
-      "resolved": "https://registry.npmjs.org/@angular/flex-layout/-/flex-layout-2.0.0-rc.1.tgz",
-      "integrity": "sha1-lvp/hbLEus8nhJE6LWB+LtI9x/E="
+      "version": "2.0.0-beta.8",
+      "resolved": "https://registry.npmjs.org/@angular/flex-layout/-/flex-layout-2.0.0-beta.8.tgz",
+      "integrity": "sha1-uc9XhlqTyhWP5W2FCVJCPySNEDs="
     },
     "@angular/forms": {
       "version": "4.3.0",
diff --git a/package.json b/package.json
index 6eb85b77..09b577e6 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,7 @@
     "@angular/common": "^4.3.0",
     "@angular/compiler": "^4.3.0",
     "@angular/core": "^4.3.0",
-    "@angular/flex-layout": "^2.0.0-rc.1",
+    "@angular/flex-layout": "^2.0.0-beta.8",
     "@angular/forms": "^4.3.0",
     "@angular/http": "^4.3.0",
     "@angular/material": "^2.0.0-beta.8",
diff --git a/src/app/core/modules/shared.module.ts b/src/app/core/modules/shared.module.ts
index 25053091..5c698762 100644
--- a/src/app/core/modules/shared.module.ts
+++ b/src/app/core/modules/shared.module.ts
@@ -9,12 +9,14 @@ import {
 } from '../directives/md-sidenav-helper/md-sidenav-helper.directive';
 import {PerfectScrollbarModule} from 'ngx-perfect-scrollbar';
 import {KeysPipe} from '../pipes/keys';
+import {HtmlToPlaintextPipe} from '../pipes//htmlToPlaintext';
 
 @NgModule({
     declarations: [
         FuseMdSidenavHelperDirective,
         FuseMdSidenavTogglerDirective,
-        KeysPipe
+        KeysPipe,
+        HtmlToPlaintextPipe
     ],
     imports     : [
         FlexLayoutModule,
@@ -31,7 +33,8 @@ import {KeysPipe} from '../pipes/keys';
         FuseMdSidenavHelperDirective,
         FuseMdSidenavTogglerDirective,
         PerfectScrollbarModule,
-        KeysPipe
+        KeysPipe,
+        HtmlToPlaintextPipe
     ]
 })
 
diff --git a/src/app/core/pipes/htmlToPlaintext.ts b/src/app/core/pipes/htmlToPlaintext.ts
new file mode 100644
index 00000000..2dfb64d2
--- /dev/null
+++ b/src/app/core/pipes/htmlToPlaintext.ts
@@ -0,0 +1,10 @@
+import {Pipe, PipeTransform} from '@angular/core';
+
+@Pipe({name: 'htmlToPlaintext'})
+export class HtmlToPlaintextPipe implements PipeTransform
+{
+    transform(value: string, args: any[] = [])
+    {
+        return value ? String(value).replace(/<[^>]+>/gm, '') : '';
+    }
+}
diff --git a/src/app/core/scss/core.scss b/src/app/core/scss/core.scss
index 191d9a09..f628d798 100644
--- a/src/app/core/scss/core.scss
+++ b/src/app/core/scss/core.scss
@@ -21,6 +21,7 @@
 
 // Partials
 @import "partials/global";
+@import "partials/_material";
 @import "partials/angular-material-fix";
 @import "partials/typography";
 @import "partials/page-layouts";
diff --git a/src/app/core/scss/partials/_material.scss b/src/app/core/scss/partials/_material.scss
new file mode 100644
index 00000000..3ec5e82e
--- /dev/null
+++ b/src/app/core/scss/partials/_material.scss
@@ -0,0 +1,416 @@
+/*----------------------------------------------------------------*/
+/*  Avatars
+/*----------------------------------------------------------------*/
+.avatar {
+    width: 40px;
+    min-width: 40px;
+    height: 40px;
+    line-height: 40px;
+    margin: 0 8px 0 0;
+    border-radius: 50%;
+    font-size: 17px;
+    font-weight: 500;
+    text-align: center;
+    color: #FFFFFF;
+
+    &.square {
+        border-radius: 0;
+    }
+
+    &.small {
+        width: 20px;
+        min-width: 20px;
+        height: 20px;
+        line-height: 20px;
+    }
+
+    &.big {
+        width: 72px;
+        min-width: 72px;
+        height: 72px;
+        line-height: 72px;
+    }
+
+    &.huge {
+        width: 96px;
+        min-width: 96px;
+        height: 96px;
+        line-height: 96px;
+    }
+}
+
+/*----------------------------------------------------------------*/
+/*  Forms
+/*----------------------------------------------------------------*/
+.form-wrapper {
+    background: #FFFFFF;
+    padding: 16px;
+
+    .form-title {
+        font-size: 21px;
+        padding: 8px 0;
+    }
+}
+
+/*----------------------------------------------------------------*/
+/*  Navigation - Simple
+/*----------------------------------------------------------------*/
+.navigation-simple {
+
+    .item {
+        position: relative;
+        cursor: pointer;
+        text-align: left;
+        margin: 0;
+        padding: 0 24px;
+        text-transform: none;
+        line-height: 48px;
+        max-height: 48px;
+        height: 48px;
+
+        md-icon {
+            margin: 0 16px 0 0;
+        }
+
+        .title {
+            font-size: 13px;
+            font-weight: 500;
+            line-height: 1;
+        }
+
+        &.selected {
+            background-color: rgba(0, 0, 0, 0.06);
+        }
+    }
+
+    .subheader {
+        font-size: 13px;
+        border-top: 1px solid rgba(0, 0, 0, 0.12);
+        font-weight: 500;
+        margin-top: 8px;
+
+        &.light {
+            border-top: 1px solid rgba(255, 255, 255, 0.12);
+        }
+    }
+
+    md-divider {
+        margin: 8px 0;
+    }
+}
+
+/*----------------------------------------------------------------*/
+/*  Pagination
+/*----------------------------------------------------------------*/
+.simple-pagination {
+    position: relative;
+    display: inline-flex;
+    flex-direction: row;
+    @include mat-elevation(1);
+    background-color: #FFFFFF;
+    padding: 0 8px;
+
+    .pagination-item {
+        min-width: 48px;
+        min-height: 56px;
+        line-height: 56px;
+        border-radius: 0;
+        margin: 0;
+        font-weight: normal;
+        color: rgba(0, 0, 0, 0.54);
+
+        &:hover {
+            color: rgba(0, 0, 0, 0.87);
+        }
+
+        &.active {
+            cursor: default;
+            color: rgba(0, 0, 0, 0.87);
+        }
+
+        &.disabled {
+            cursor: default;
+            color: rgba(0, 0, 0, 0.26);
+        }
+    }
+}
+
+/*----------------------------------------------------------------*/
+/*  Price Tables
+/*----------------------------------------------------------------*/
+.price-tables {
+
+    .price-table {
+        position: relative;
+        background-color: #FFFFFF;
+        width: 280px;
+        border-radius: 2px;
+        margin: 24px 24px 0 0;
+        overflow: hidden;
+
+        &.style-1 {
+
+            .package-type {
+                font-size: 17px;
+                padding: 16px 24px;
+
+                .sale {
+                    font-size: 13px;
+                    font-weight: 600;
+                }
+            }
+
+            .price {
+                padding: 32px 32px 16px 32px;
+
+                .currency {
+                    padding-right: 4px;
+                    font-size: 24px;
+                    font-weight: 500;
+                    color: rgba(0, 0, 0, 0.54);
+                }
+
+                .value {
+                    font-size: 72px;
+                    font-weight: 300;
+                    line-height: 1;
+                }
+
+                .period {
+                    padding: 0 0 5px 4px;
+                    font-size: 17px;
+                    color: rgba(0, 0, 0, 0.54);
+                }
+            }
+
+            md-divider {
+                margin: 16px 32px;
+            }
+
+            .terms {
+                padding: 16px 32px;
+                font-size: 15px;
+
+                .term {
+
+                }
+            }
+
+            .cta-button {
+                margin: 16px auto 32px auto;
+                width: 128px;
+            }
+        }
+
+        &.style-2 {
+
+            .badge {
+                position: absolute;
+                top: 0;
+                left: 50%;
+                transform: translateX(-50%);
+                font-size: 11px;
+                font-weight: 500;
+                padding: 6px 8px;
+            }
+
+            .package-type {
+                padding: 48px 32px 24px 32px;
+                font-size: 20px;
+                font-weight: 500;
+                text-align: center;
+            }
+
+            .price {
+                padding: 0 32px 8px 32px;
+
+                .currency {
+                    padding-right: 4px;
+                    font-size: 24px;
+                    font-weight: 500;
+                    color: rgba(0, 0, 0, 0.54);
+                }
+
+                .value {
+                    font-size: 56px;
+                    font-weight: 300;
+                    line-height: 1;
+                }
+            }
+
+            .period {
+                padding: 0 32px;
+                font-size: 15px;
+                font-weight: 500;
+                color: rgba(0, 0, 0, 0.54);
+                text-align: center;
+            }
+
+            .terms {
+                padding: 32px;
+                font-size: 15px;
+
+                .term {
+                    padding-bottom: 8px;
+
+                    &:last-child {
+                        padding-bottom: 0;
+                    }
+                }
+            }
+
+            .cta-button {
+                margin: 8px auto 32px auto;
+                width: 128px;
+            }
+        }
+
+        &.style-3 {
+
+            .package-type {
+                padding: 32px;
+                text-align: center;
+
+                .title {
+                    font-size: 34px;
+                }
+
+                .subtitle {
+                    font-size: 17px;
+                    color: rgba(0, 0, 0, 0.54);
+                    font-weight: 500;
+                }
+            }
+
+            .price {
+                padding: 16px 32px;
+
+                .currency {
+                    padding-right: 4px;
+                    font-size: 15px;
+                    font-weight: 500;
+                }
+
+                .value {
+                    font-size: 34px;
+                    font-weight: 300;
+                    line-height: 1;
+                }
+
+                .period {
+                    padding-left: 4px;
+                    text-align: center;
+                }
+            }
+
+            .terms {
+                margin: 32px;
+                font-size: 15px;
+                color: rgba(0, 0, 0, 0.54);
+
+                .term {
+                    padding-bottom: 16px;
+
+                    &:last-child {
+                        padding-bottom: 0;
+                    }
+                }
+            }
+
+            .cta-button {
+                margin: 8px 32px;
+            }
+
+            .note {
+                padding: 8px 32px 16px 32px;
+                text-align: center;
+                color: rgba(0, 0, 0, 0.54);
+            }
+        }
+    }
+}
+
+/*----------------------------------------------------------------*/
+/*  Table - Simple
+/*----------------------------------------------------------------*/
+.simple-table-container {
+    background: #FFFFFF;
+
+    .table-title {
+        font-size: 20px;
+        padding: 24px;
+    }
+}
+
+table {
+
+    &.simple {
+        width: 100%;
+        border: none;
+        border-spacing: 0;
+        text-align: left;
+
+        thead {
+
+            tr {
+
+                th {
+                    padding: 16px 8px;
+                    font-weight: 500;
+                    color: rgba(0, 0, 0, 0.54);
+                    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+                    white-space: nowrap;
+                    min-width: 120px;
+
+                    &:first-child {
+                        padding-left: 24px;
+                    }
+
+                    &:last-child {
+                        padding-right: 24px;
+                    }
+                }
+            }
+        }
+
+        tbody {
+
+            tr {
+
+                td {
+                    padding: 16px 8px;
+                    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+
+                    &:first-child {
+                        padding-left: 24px;
+                    }
+
+                    &:last-child {
+                        padding-right: 24px;
+                    }
+                }
+
+                &:last-child {
+
+                    td {
+                        border-bottom: none;
+                    }
+                }
+            }
+        }
+
+        &.clickable {
+
+            tbody {
+
+                tr {
+                    cursor: pointer;
+
+                    &:hover {
+                        background: rgba(0, 0, 0, 0.03);
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/src/app/core/scss/partials/_typography.scss b/src/app/core/scss/partials/_typography.scss
index e69de29b..9e87ef62 100644
--- a/src/app/core/scss/partials/_typography.scss
+++ b/src/app/core/scss/partials/_typography.scss
@@ -0,0 +1,13 @@
+
+// Truncate
+.text-truncate {
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+// Nowrap
+.text-nowrap {
+    white-space: nowrap;
+}
diff --git a/src/app/main/apps/mail/mail-list/mail-list-item/mail-list-item.component.html b/src/app/main/apps/mail/mail-list/mail-list-item/mail-list-item.component.html
index 5c9c611a..302e06d6 100644
--- a/src/app/main/apps/mail/mail-list/mail-list-item/mail-list-item.component.html
+++ b/src/app/main/apps/mail/mail-list/mail-list-item/mail-list-item.component.html
@@ -1,5 +1,53 @@
-<ul>
-    <li>
-        {{ mail.subject }}
-    </li>
-</ul>
+<div fxLayout="row" fxLayoutAlign="start center">
+
+    <md-checkbox></md-checkbox>
+
+    <div class="info" fxFlex FlexLayout="column">
+
+        <div class="name" fxLayout="row" fxLayoutAlign="start center">
+
+            <img class="avatar" *ngIf="mail.from.avatar" alt="{{mail.from.name}}" src="{{mail.from.avatar}}"/>
+
+            <div class="avatar" *ngIf="!mail.from.avatar">{{mail.from.name[0]}}</div>
+
+            <span class="text-truncate">{{mail.from.name}}</span>
+
+            <md-icon *ngIf="mail.hasAttachments" class="has-attachment">attachment</md-icon>
+        </div>
+
+        <div class="subject text-truncate">
+            {{mail.subject}}
+        </div>
+
+        <div class="message text-truncate">
+
+            {{mail.message | htmlToPlaintext | slice:0:180}}{{mail.message.length > 180 ? '...' : ''}}
+
+            <div class="labels">
+                <div class="label" *ngFor="let labelId of mail.labels">{{labelId}}</div>
+            </div>
+        </div>
+
+    </div>
+
+    <div fxLayout="column" fxLayoutAlign="space-between end">
+
+        <div class="time">{{mail.time}}</div>
+
+        <div class="actions" fxLayout="row" fxLayoutAlign="start center">
+            <button md-button class="mat-icon-button"
+                    ng-click="vm.togglemailStatus('starred', mail, $event)"
+                    aria-label="Toggle starred">
+                <md-icon *ngIf="mail.starred">star</md-icon>
+                <md-icon *ngIf="!mail.starred">star_outline</md-icon>
+            </button>
+
+            <button md-button class="mat-icon-button"
+                    ng-click="vm.togglemailStatus('important', mail, $event)"
+                    aria-label="Toggle important">
+                <md-icon *ngIf="mail.important">label</md-icon>
+                <md-icon *ngIf="!mail.important">label_outline</md-icon>
+            </button>
+        </div>
+    </div>
+</div>
diff --git a/src/app/main/apps/mail/mail-list/mail-list-item/mail-list-item.component.scss b/src/app/main/apps/mail/mail-list/mail-list-item/mail-list-item.component.scss
index e69de29b..0a38e9d1 100644
--- a/src/app/main/apps/mail/mail-list/mail-list-item/mail-list-item.component.scss
+++ b/src/app/main/apps/mail/mail-list/mail-list-item/mail-list-item.component.scss
@@ -0,0 +1,121 @@
+:host {
+    background: #FAFAFA;
+    position: relative;
+    padding: 16px 24px;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+    cursor: pointer;
+
+    &.unread {
+        background: #FFFFFF;
+
+        .info {
+
+            .name,
+            .subject {
+                font-weight: 700;
+            }
+
+            .message {
+
+                .labels {
+                    background: #FFFFFF;
+                }
+            }
+        }
+    }
+
+    &.selected {
+        background: #FFF8E1;
+
+        .info {
+
+            .message {
+
+                .labels {
+                    background: #FFF8E1;
+                }
+            }
+        }
+    }
+
+    &.current-thread {
+        background: #E3F2FD;
+
+        .info {
+
+            .message {
+
+                .labels {
+                    background: #E3F2FD;
+                }
+            }
+        }
+    }
+
+    .info {
+        overflow: hidden;
+        width: 0;
+        margin: 0 16px;
+
+        .name {
+            font-size: 15px;
+            font-weight: 500;
+            padding-bottom: 8px;
+
+            .avatar {
+                min-width: 32px;
+                width: 32px;
+                height: 32px;
+                line-height: 32px;
+            }
+
+            .has-attachment {
+                margin-left: 8px;
+                transform: rotate(90deg);
+            }
+        }
+
+        .subject {
+
+        }
+
+        .message {
+            position: relative;
+            color: rgba(0, 0, 0, 0.54);
+
+            .labels {
+                position: absolute;
+                background: #FAFAFA;
+                top: 0;
+                right: 0;
+                padding-left: 6px;
+
+                .label {
+                    display: inline-block;
+                    font-size: 11px;
+                    padding: 0 5px;
+                    margin-right: 6px;
+
+                    &:first-child {
+                        margin-left: 0;
+                    }
+                }
+            }
+        }
+    }
+
+    .time {
+        margin: 0 8px 6px 8px;
+    }
+
+    .actions {
+
+        .md-icon-button {
+            margin: 0;
+            padding: 0;
+            width: 32px;
+            height: 32px;
+        }
+    }
+
+}
diff --git a/src/app/main/apps/mail/mail-list/mail-list.component.html b/src/app/main/apps/mail/mail-list/mail-list.component.html
index b23c48f4..61b9fcf8 100644
--- a/src/app/main/apps/mail/mail-list/mail-list.component.html
+++ b/src/app/main/apps/mail/mail-list/mail-list.component.html
@@ -1 +1 @@
-<fuse-mail-list-item *ngFor="let mail of mails" [mail]="mail"></fuse-mail-list-item>
\ No newline at end of file
+<fuse-mail-list-item *ngFor="let mail of mails" [mail]="mail" md-ripple></fuse-mail-list-item>
diff --git a/src/app/main/apps/mail/mail-list/mail-list.component.scss b/src/app/main/apps/mail/mail-list/mail-list.component.scss
index e69de29b..1d446fec 100644
--- a/src/app/main/apps/mail/mail-list/mail-list.component.scss
+++ b/src/app/main/apps/mail/mail-list/mail-list.component.scss
@@ -0,0 +1,4 @@
+:host{
+    display: flex;
+    flex-direction: column;
+}
diff --git a/src/app/main/apps/mail/mail.component.html b/src/app/main/apps/mail/mail.component.html
index b7fc6c67..1730c4b2 100644
--- a/src/app/main/apps/mail/mail.component.html
+++ b/src/app/main/apps/mail/mail.component.html
@@ -49,9 +49,13 @@
                 <!-- CONTENT -->
                 <div class="content" perfect-scrollbar>
 
-                    <fuse-mail-list></fuse-mail-list>
+                    <div fxLayout="row" fxFill>
 
-                    <fuse-mail-details></fuse-mail-details>
+                        <fuse-mail-list fxFlex></fuse-mail-list>
+
+                        <fuse-mail-details fxFlex></fuse-mail-details>
+
+                    </div>
 
                 </div>
                 <!-- / CONTENT -->
diff --git a/src/app/main/apps/mail/mail.component.scss b/src/app/main/apps/mail/mail.component.scss
index 51512806..ad94f7b6 100644
--- a/src/app/main/apps/mail/mail.component.scss
+++ b/src/app/main/apps/mail/mail.component.scss
@@ -38,6 +38,16 @@
                 }
             }
         }
+
+        .content-card {
+
+            .toolbar {
+            }
+
+            .content {
+                padding: 0 !important;
+            }
+        }
     }
 }
 
diff --git a/src/app/main/apps/mail/mail.model.ts b/src/app/main/apps/mail/mail.model.ts
index f2c97957..7bcf7643 100644
--- a/src/app/main/apps/mail/mail.model.ts
+++ b/src/app/main/apps/mail/mail.model.ts
@@ -2,7 +2,32 @@ export class MailModel
 {
     id: string;
     subject: string;
-    important: string;
+    from: {
+        name: string,
+        avatar: string,
+        email: string
+    };
+    to: {
+        name: string,
+        email: string
+    }[];
+
+    message: string;
+    time: string;
+    read: boolean;
+    starred: boolean;
+    important: boolean;
+    hasAttachments: boolean;
+    attachments: [
+        {
+            type: string,
+            fileName: string,
+            preview: string,
+            url: string,
+            size: string
+        }
+        ];
+    labels: string[];
 
     constructor()
     {
diff --git a/src/assets/images/avatars/Abbott.jpg b/src/assets/images/avatars/Abbott.jpg
new file mode 100644
index 00000000..9a6114c9
Binary files /dev/null and b/src/assets/images/avatars/Abbott.jpg differ
diff --git a/src/assets/images/avatars/Arnold.jpg b/src/assets/images/avatars/Arnold.jpg
new file mode 100644
index 00000000..f370d9a3
Binary files /dev/null and b/src/assets/images/avatars/Arnold.jpg differ
diff --git a/src/assets/images/avatars/Barrera.jpg b/src/assets/images/avatars/Barrera.jpg
new file mode 100644
index 00000000..c0e9afee
Binary files /dev/null and b/src/assets/images/avatars/Barrera.jpg differ
diff --git a/src/assets/images/avatars/Blair.jpg b/src/assets/images/avatars/Blair.jpg
new file mode 100644
index 00000000..0ffd2af7
Binary files /dev/null and b/src/assets/images/avatars/Blair.jpg differ
diff --git a/src/assets/images/avatars/Boyle.jpg b/src/assets/images/avatars/Boyle.jpg
new file mode 100644
index 00000000..e651314e
Binary files /dev/null and b/src/assets/images/avatars/Boyle.jpg differ
diff --git a/src/assets/images/avatars/Christy.jpg b/src/assets/images/avatars/Christy.jpg
new file mode 100644
index 00000000..fbff21d6
Binary files /dev/null and b/src/assets/images/avatars/Christy.jpg differ
diff --git a/src/assets/images/avatars/Copeland.jpg b/src/assets/images/avatars/Copeland.jpg
new file mode 100644
index 00000000..891240d9
Binary files /dev/null and b/src/assets/images/avatars/Copeland.jpg differ
diff --git a/src/assets/images/avatars/Estes.jpg b/src/assets/images/avatars/Estes.jpg
new file mode 100644
index 00000000..e6e223fa
Binary files /dev/null and b/src/assets/images/avatars/Estes.jpg differ
diff --git a/src/assets/images/avatars/Harper.jpg b/src/assets/images/avatars/Harper.jpg
new file mode 100644
index 00000000..f27ebe72
Binary files /dev/null and b/src/assets/images/avatars/Harper.jpg differ
diff --git a/src/assets/images/avatars/Helen.jpg b/src/assets/images/avatars/Helen.jpg
new file mode 100644
index 00000000..ac0b93d4
Binary files /dev/null and b/src/assets/images/avatars/Helen.jpg differ
diff --git a/src/assets/images/avatars/Henderson.jpg b/src/assets/images/avatars/Henderson.jpg
new file mode 100644
index 00000000..e9e1e638
Binary files /dev/null and b/src/assets/images/avatars/Henderson.jpg differ
diff --git a/src/assets/images/avatars/Josefina.jpg b/src/assets/images/avatars/Josefina.jpg
new file mode 100644
index 00000000..1f0feb69
Binary files /dev/null and b/src/assets/images/avatars/Josefina.jpg differ
diff --git a/src/assets/images/avatars/Katina.jpg b/src/assets/images/avatars/Katina.jpg
new file mode 100644
index 00000000..ab53c42d
Binary files /dev/null and b/src/assets/images/avatars/Katina.jpg differ
diff --git a/src/assets/images/avatars/Lily.jpg b/src/assets/images/avatars/Lily.jpg
new file mode 100644
index 00000000..e7fe3eb7
Binary files /dev/null and b/src/assets/images/avatars/Lily.jpg differ
diff --git a/src/assets/images/avatars/Mai.jpg b/src/assets/images/avatars/Mai.jpg
new file mode 100644
index 00000000..c7322386
Binary files /dev/null and b/src/assets/images/avatars/Mai.jpg differ
diff --git a/src/assets/images/avatars/Nancy.jpg b/src/assets/images/avatars/Nancy.jpg
new file mode 100644
index 00000000..fdb71d98
Binary files /dev/null and b/src/assets/images/avatars/Nancy.jpg differ
diff --git a/src/assets/images/avatars/Nora.jpg b/src/assets/images/avatars/Nora.jpg
new file mode 100644
index 00000000..c0622635
Binary files /dev/null and b/src/assets/images/avatars/Nora.jpg differ
diff --git a/src/assets/images/avatars/Odessa.jpg b/src/assets/images/avatars/Odessa.jpg
new file mode 100644
index 00000000..7c2b4d63
Binary files /dev/null and b/src/assets/images/avatars/Odessa.jpg differ
diff --git a/src/assets/images/avatars/Reyna.jpg b/src/assets/images/avatars/Reyna.jpg
new file mode 100644
index 00000000..ea888d75
Binary files /dev/null and b/src/assets/images/avatars/Reyna.jpg differ
diff --git a/src/assets/images/avatars/Shauna.jpg b/src/assets/images/avatars/Shauna.jpg
new file mode 100644
index 00000000..99f290b4
Binary files /dev/null and b/src/assets/images/avatars/Shauna.jpg differ
diff --git a/src/assets/images/avatars/Shepard.jpg b/src/assets/images/avatars/Shepard.jpg
new file mode 100644
index 00000000..4c99bdf9
Binary files /dev/null and b/src/assets/images/avatars/Shepard.jpg differ
diff --git a/src/assets/images/avatars/Tillman.jpg b/src/assets/images/avatars/Tillman.jpg
new file mode 100644
index 00000000..dcec53e0
Binary files /dev/null and b/src/assets/images/avatars/Tillman.jpg differ
diff --git a/src/assets/images/avatars/Trevino.jpg b/src/assets/images/avatars/Trevino.jpg
new file mode 100644
index 00000000..9ba4a3e7
Binary files /dev/null and b/src/assets/images/avatars/Trevino.jpg differ
diff --git a/src/assets/images/avatars/Tyson.jpg b/src/assets/images/avatars/Tyson.jpg
new file mode 100644
index 00000000..c5716125
Binary files /dev/null and b/src/assets/images/avatars/Tyson.jpg differ
diff --git a/src/assets/images/avatars/Velazquez.jpg b/src/assets/images/avatars/Velazquez.jpg
new file mode 100644
index 00000000..53c7dec8
Binary files /dev/null and b/src/assets/images/avatars/Velazquez.jpg differ
diff --git a/src/assets/images/avatars/alice.jpg b/src/assets/images/avatars/alice.jpg
new file mode 100644
index 00000000..d4ec655f
Binary files /dev/null and b/src/assets/images/avatars/alice.jpg differ
diff --git a/src/assets/images/avatars/andrew.jpg b/src/assets/images/avatars/andrew.jpg
new file mode 100644
index 00000000..30deeb7d
Binary files /dev/null and b/src/assets/images/avatars/andrew.jpg differ
diff --git a/src/assets/images/avatars/carl.jpg b/src/assets/images/avatars/carl.jpg
new file mode 100644
index 00000000..8f85a759
Binary files /dev/null and b/src/assets/images/avatars/carl.jpg differ
diff --git a/src/assets/images/avatars/danielle.jpg b/src/assets/images/avatars/danielle.jpg
new file mode 100644
index 00000000..2ad8a09d
Binary files /dev/null and b/src/assets/images/avatars/danielle.jpg differ
diff --git a/src/assets/images/avatars/garry.jpg b/src/assets/images/avatars/garry.jpg
new file mode 100644
index 00000000..f2bcd453
Binary files /dev/null and b/src/assets/images/avatars/garry.jpg differ
diff --git a/src/assets/images/avatars/james.jpg b/src/assets/images/avatars/james.jpg
new file mode 100644
index 00000000..78cf2b83
Binary files /dev/null and b/src/assets/images/avatars/james.jpg differ
diff --git a/src/assets/images/avatars/jane.jpg b/src/assets/images/avatars/jane.jpg
new file mode 100644
index 00000000..d916ac9f
Binary files /dev/null and b/src/assets/images/avatars/jane.jpg differ
diff --git a/src/assets/images/avatars/joyce.jpg b/src/assets/images/avatars/joyce.jpg
new file mode 100644
index 00000000..a6a2e5f8
Binary files /dev/null and b/src/assets/images/avatars/joyce.jpg differ
diff --git a/src/assets/images/avatars/katherine.jpg b/src/assets/images/avatars/katherine.jpg
new file mode 100644
index 00000000..e4ef6aab
Binary files /dev/null and b/src/assets/images/avatars/katherine.jpg differ
diff --git a/src/assets/images/avatars/profile.jpg b/src/assets/images/avatars/profile.jpg
new file mode 100644
index 00000000..ae83b58d
Binary files /dev/null and b/src/assets/images/avatars/profile.jpg differ
diff --git a/src/assets/images/avatars/vincent.jpg b/src/assets/images/avatars/vincent.jpg
new file mode 100644
index 00000000..be97d2fa
Binary files /dev/null and b/src/assets/images/avatars/vincent.jpg differ
diff --git a/src/assets/images/backgrounds/april.jpg b/src/assets/images/backgrounds/april.jpg
new file mode 100644
index 00000000..6c2152bb
Binary files /dev/null and b/src/assets/images/backgrounds/april.jpg differ
diff --git a/src/assets/images/backgrounds/august.jpg b/src/assets/images/backgrounds/august.jpg
new file mode 100644
index 00000000..14cc9ff7
Binary files /dev/null and b/src/assets/images/backgrounds/august.jpg differ
diff --git a/src/assets/images/backgrounds/december.jpg b/src/assets/images/backgrounds/december.jpg
new file mode 100644
index 00000000..d81386bd
Binary files /dev/null and b/src/assets/images/backgrounds/december.jpg differ
diff --git a/src/assets/images/backgrounds/february.jpg b/src/assets/images/backgrounds/february.jpg
new file mode 100644
index 00000000..a9aa605b
Binary files /dev/null and b/src/assets/images/backgrounds/february.jpg differ
diff --git a/src/assets/images/backgrounds/header-bg.png b/src/assets/images/backgrounds/header-bg.png
new file mode 100644
index 00000000..a9f79194
Binary files /dev/null and b/src/assets/images/backgrounds/header-bg.png differ
diff --git a/src/assets/images/backgrounds/january.jpg b/src/assets/images/backgrounds/january.jpg
new file mode 100644
index 00000000..60ad972b
Binary files /dev/null and b/src/assets/images/backgrounds/january.jpg differ
diff --git a/src/assets/images/backgrounds/july.jpg b/src/assets/images/backgrounds/july.jpg
new file mode 100644
index 00000000..1dc30568
Binary files /dev/null and b/src/assets/images/backgrounds/july.jpg differ
diff --git a/src/assets/images/backgrounds/june.jpg b/src/assets/images/backgrounds/june.jpg
new file mode 100644
index 00000000..80c6ec24
Binary files /dev/null and b/src/assets/images/backgrounds/june.jpg differ
diff --git a/src/assets/images/backgrounds/march.jpg b/src/assets/images/backgrounds/march.jpg
new file mode 100644
index 00000000..01684e40
Binary files /dev/null and b/src/assets/images/backgrounds/march.jpg differ
diff --git a/src/assets/images/backgrounds/may.jpg b/src/assets/images/backgrounds/may.jpg
new file mode 100644
index 00000000..bc6d04e1
Binary files /dev/null and b/src/assets/images/backgrounds/may.jpg differ
diff --git a/src/assets/images/backgrounds/november.jpg b/src/assets/images/backgrounds/november.jpg
new file mode 100644
index 00000000..31694e66
Binary files /dev/null and b/src/assets/images/backgrounds/november.jpg differ
diff --git a/src/assets/images/backgrounds/october.jpg b/src/assets/images/backgrounds/october.jpg
new file mode 100644
index 00000000..56364ba5
Binary files /dev/null and b/src/assets/images/backgrounds/october.jpg differ
diff --git a/src/assets/images/backgrounds/september.jpg b/src/assets/images/backgrounds/september.jpg
new file mode 100644
index 00000000..637cfde8
Binary files /dev/null and b/src/assets/images/backgrounds/september.jpg differ
diff --git a/src/assets/images/ecommerce/product-image-placeholder.png b/src/assets/images/ecommerce/product-image-placeholder.png
new file mode 100644
index 00000000..e204c934
Binary files /dev/null and b/src/assets/images/ecommerce/product-image-placeholder.png differ
diff --git a/src/assets/images/etc/air-balloons.jpg b/src/assets/images/etc/air-balloons.jpg
new file mode 100644
index 00000000..7b5697b8
Binary files /dev/null and b/src/assets/images/etc/air-balloons.jpg differ
diff --git a/src/assets/images/etc/alice-cooper-poison.jpg b/src/assets/images/etc/alice-cooper-poison.jpg
new file mode 100644
index 00000000..322c464f
Binary files /dev/null and b/src/assets/images/etc/alice-cooper-poison.jpg differ
diff --git a/src/assets/images/etc/avenue.jpg b/src/assets/images/etc/avenue.jpg
new file mode 100644
index 00000000..1fc36fed
Binary files /dev/null and b/src/assets/images/etc/avenue.jpg differ
diff --git a/src/assets/images/etc/cactus.jpg b/src/assets/images/etc/cactus.jpg
new file mode 100644
index 00000000..b9dff90b
Binary files /dev/null and b/src/assets/images/etc/cactus.jpg differ
diff --git a/src/assets/images/etc/early-sunrise.jpg b/src/assets/images/etc/early-sunrise.jpg
new file mode 100644
index 00000000..2046cf6c
Binary files /dev/null and b/src/assets/images/etc/early-sunrise.jpg differ
diff --git a/src/assets/images/etc/fallout.jpg b/src/assets/images/etc/fallout.jpg
new file mode 100644
index 00000000..781fe9c9
Binary files /dev/null and b/src/assets/images/etc/fallout.jpg differ
diff --git a/src/assets/images/etc/flowers-thumb.jpg b/src/assets/images/etc/flowers-thumb.jpg
new file mode 100644
index 00000000..a77c32b4
Binary files /dev/null and b/src/assets/images/etc/flowers-thumb.jpg differ
diff --git a/src/assets/images/etc/mountain-lake.jpg b/src/assets/images/etc/mountain-lake.jpg
new file mode 100644
index 00000000..201a6d3c
Binary files /dev/null and b/src/assets/images/etc/mountain-lake.jpg differ
diff --git a/src/assets/images/etc/mountain-sunset.jpg b/src/assets/images/etc/mountain-sunset.jpg
new file mode 100644
index 00000000..4c07578a
Binary files /dev/null and b/src/assets/images/etc/mountain-sunset.jpg differ
diff --git a/src/assets/images/etc/road-trip.jpg b/src/assets/images/etc/road-trip.jpg
new file mode 100644
index 00000000..21ee648a
Binary files /dev/null and b/src/assets/images/etc/road-trip.jpg differ
diff --git a/src/assets/images/etc/sample-file-preview.jpg b/src/assets/images/etc/sample-file-preview.jpg
new file mode 100644
index 00000000..897b45ef
Binary files /dev/null and b/src/assets/images/etc/sample-file-preview.jpg differ
diff --git a/src/assets/images/etc/snow-thumb.jpg b/src/assets/images/etc/snow-thumb.jpg
new file mode 100644
index 00000000..a12c5bee
Binary files /dev/null and b/src/assets/images/etc/snow-thumb.jpg differ
diff --git a/src/assets/images/etc/snow.jpg b/src/assets/images/etc/snow.jpg
new file mode 100644
index 00000000..20d0e389
Binary files /dev/null and b/src/assets/images/etc/snow.jpg differ
diff --git a/src/assets/images/etc/sunrise-thumb.jpg b/src/assets/images/etc/sunrise-thumb.jpg
new file mode 100644
index 00000000..8fc5bd25
Binary files /dev/null and b/src/assets/images/etc/sunrise-thumb.jpg differ
diff --git a/src/assets/images/etc/tropical-beach.jpg b/src/assets/images/etc/tropical-beach.jpg
new file mode 100644
index 00000000..470f824b
Binary files /dev/null and b/src/assets/images/etc/tropical-beach.jpg differ
diff --git a/src/assets/images/flags/es.png b/src/assets/images/flags/es.png
new file mode 100644
index 00000000..c2de2d71
Binary files /dev/null and b/src/assets/images/flags/es.png differ
diff --git a/src/assets/images/flags/tr.png b/src/assets/images/flags/tr.png
new file mode 100644
index 00000000..be32f77e
Binary files /dev/null and b/src/assets/images/flags/tr.png differ
diff --git a/src/assets/images/flags/us.png b/src/assets/images/flags/us.png
new file mode 100644
index 00000000..10f451fe
Binary files /dev/null and b/src/assets/images/flags/us.png differ
diff --git a/src/assets/images/logos/android.png b/src/assets/images/logos/android.png
new file mode 100644
index 00000000..275e2621
Binary files /dev/null and b/src/assets/images/logos/android.png differ
diff --git a/src/assets/images/logos/angular-material.png b/src/assets/images/logos/angular-material.png
new file mode 100644
index 00000000..62fba49e
Binary files /dev/null and b/src/assets/images/logos/angular-material.png differ
diff --git a/src/assets/images/logos/angular.png b/src/assets/images/logos/angular.png
new file mode 100644
index 00000000..59f36fa8
Binary files /dev/null and b/src/assets/images/logos/angular.png differ
diff --git a/src/assets/images/logos/browsersync.png b/src/assets/images/logos/browsersync.png
new file mode 100644
index 00000000..201c641b
Binary files /dev/null and b/src/assets/images/logos/browsersync.png differ
diff --git a/src/assets/images/logos/fallout.png b/src/assets/images/logos/fallout.png
new file mode 100644
index 00000000..b78cdad4
Binary files /dev/null and b/src/assets/images/logos/fallout.png differ
diff --git a/src/assets/images/logos/google.png b/src/assets/images/logos/google.png
new file mode 100644
index 00000000..5cc4eefd
Binary files /dev/null and b/src/assets/images/logos/google.png differ
diff --git a/src/assets/images/logos/gulp.png b/src/assets/images/logos/gulp.png
new file mode 100644
index 00000000..5da1891e
Binary files /dev/null and b/src/assets/images/logos/gulp.png differ
diff --git a/src/assets/images/logos/jasmine.png b/src/assets/images/logos/jasmine.png
new file mode 100644
index 00000000..5be8ec83
Binary files /dev/null and b/src/assets/images/logos/jasmine.png differ
diff --git a/src/assets/images/logos/karma.png b/src/assets/images/logos/karma.png
new file mode 100644
index 00000000..48b9601f
Binary files /dev/null and b/src/assets/images/logos/karma.png differ
diff --git a/src/assets/images/logos/node-sass.png b/src/assets/images/logos/node-sass.png
new file mode 100644
index 00000000..11d69d89
Binary files /dev/null and b/src/assets/images/logos/node-sass.png differ
diff --git a/src/assets/images/logos/protractor.png b/src/assets/images/logos/protractor.png
new file mode 100644
index 00000000..98e0162e
Binary files /dev/null and b/src/assets/images/logos/protractor.png differ
diff --git a/src/assets/images/logos/yeoman.png b/src/assets/images/logos/yeoman.png
new file mode 100644
index 00000000..92497add
Binary files /dev/null and b/src/assets/images/logos/yeoman.png differ
diff --git a/src/assets/images/patterns/drop-grey.png b/src/assets/images/patterns/drop-grey.png
new file mode 100644
index 00000000..976de90b
Binary files /dev/null and b/src/assets/images/patterns/drop-grey.png differ
diff --git a/src/assets/images/patterns/drop.png b/src/assets/images/patterns/drop.png
new file mode 100644
index 00000000..cf48288f
Binary files /dev/null and b/src/assets/images/patterns/drop.png differ
diff --git a/src/assets/images/patterns/rain-grey.png b/src/assets/images/patterns/rain-grey.png
new file mode 100644
index 00000000..119ecc08
Binary files /dev/null and b/src/assets/images/patterns/rain-grey.png differ
diff --git a/src/assets/images/patterns/rain.png b/src/assets/images/patterns/rain.png
new file mode 100644
index 00000000..07af9c70
Binary files /dev/null and b/src/assets/images/patterns/rain.png differ
diff --git a/src/assets/images/scrumboard/calendar.jpg b/src/assets/images/scrumboard/calendar.jpg
new file mode 100644
index 00000000..a5a167b4
Binary files /dev/null and b/src/assets/images/scrumboard/calendar.jpg differ
diff --git a/src/assets/images/scrumboard/header-1.jpg b/src/assets/images/scrumboard/header-1.jpg
new file mode 100644
index 00000000..aae8f82a
Binary files /dev/null and b/src/assets/images/scrumboard/header-1.jpg differ
diff --git a/src/assets/images/scrumboard/header-2.jpg b/src/assets/images/scrumboard/header-2.jpg
new file mode 100644
index 00000000..681449b5
Binary files /dev/null and b/src/assets/images/scrumboard/header-2.jpg differ
diff --git a/src/assets/images/scrumboard/mail.jpg b/src/assets/images/scrumboard/mail.jpg
new file mode 100644
index 00000000..38f06c4b
Binary files /dev/null and b/src/assets/images/scrumboard/mail.jpg differ
diff --git a/src/assets/images/theme-options/content-only.jpg b/src/assets/images/theme-options/content-only.jpg
new file mode 100644
index 00000000..8b8da017
Binary files /dev/null and b/src/assets/images/theme-options/content-only.jpg differ
diff --git a/src/assets/images/theme-options/content-with-toolbar.jpg b/src/assets/images/theme-options/content-with-toolbar.jpg
new file mode 100644
index 00000000..277a6b18
Binary files /dev/null and b/src/assets/images/theme-options/content-with-toolbar.jpg differ
diff --git a/src/assets/images/theme-options/horizontal-nav.jpg b/src/assets/images/theme-options/horizontal-nav.jpg
new file mode 100644
index 00000000..bf095b65
Binary files /dev/null and b/src/assets/images/theme-options/horizontal-nav.jpg differ
diff --git a/src/assets/images/theme-options/vertical-nav-with-full-toolbar-2.jpg b/src/assets/images/theme-options/vertical-nav-with-full-toolbar-2.jpg
new file mode 100644
index 00000000..1f369e4d
Binary files /dev/null and b/src/assets/images/theme-options/vertical-nav-with-full-toolbar-2.jpg differ
diff --git a/src/assets/images/theme-options/vertical-nav-with-full-toolbar.jpg b/src/assets/images/theme-options/vertical-nav-with-full-toolbar.jpg
new file mode 100644
index 00000000..c73dfe8b
Binary files /dev/null and b/src/assets/images/theme-options/vertical-nav-with-full-toolbar.jpg differ
diff --git a/src/assets/images/theme-options/vertical-nav.jpg b/src/assets/images/theme-options/vertical-nav.jpg
new file mode 100644
index 00000000..973d6a64
Binary files /dev/null and b/src/assets/images/theme-options/vertical-nav.jpg differ