diff --git a/.gitignore b/.gitignore
index 009a449..372dcd5 100644
--- a/.gitignore
+++ b/.gitignore
@@ -4,4 +4,5 @@ npm-debug.log
 *-browserified.js
 test/new-unit/lib/
 .sass-cache
-src/css/style.css
\ No newline at end of file
+src/css/style.css
+dist/
\ No newline at end of file
diff --git a/Gruntfile.js b/Gruntfile.js
index eb7bd31..5e75a45 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -65,6 +65,81 @@ module.exports = function(grunt) {
                     run: false
                 }
             }
+        },
+
+        clean: {
+            dist: ['dist']
+        },
+        sass: {
+            dist: {
+                files: {
+                    'dist/css/all.css': 'src/sass/all.scss'
+                }
+            }
+        },
+        autoprefixer: {
+            options: {
+                browsers: ['last 2 versions']
+            },
+            dist: {
+                files: {
+                    'dist/css/all.css': 'dist/css/all.css'
+                }
+            }
+        },
+        csso: {
+            options: {
+                banner: '<%= banner %>'
+            },
+            dist: {
+                files: {
+                    'dist/css/all.min.css': 'dist/css/all.css'
+                }
+            }
+        },
+        watch: {
+            css: {
+                files: ['src/sass/**/*.scss'],
+                tasks: ['dist-css']
+            }
+        },
+        copy: {
+            font: {
+                expand: true,
+                flatten: true,
+                src: ['src/font/*'],
+                dest: 'dist/font/'
+            },
+            img: {
+                expand: true,
+                flatten: true,
+                src: ['src/img/*'],
+                dest: 'dist/img/'
+            },
+            js: {
+                expand: true,
+                flatten: true,
+                src: ['src/js/*'],
+                dest: 'dist/js/'
+            },
+            tpl: {
+                expand: true,
+                flatten: true,
+                src: ['src/tpl/*'],
+                dest: 'dist/tpl/'
+            },
+            lib: {
+                expand: true,
+                flatten: true,
+                src: ['src/lib/*'],
+                dest: 'dist/lib/'
+            },
+            app: {
+                expand: true,
+                flatten: true,
+                src: ['src/*.html', 'src/*.js', 'src/manifest.json'],
+                dest: 'dist/'
+            }
         }
     });
 
@@ -73,10 +148,21 @@ module.exports = function(grunt) {
     grunt.loadNpmTasks('grunt-contrib-jshint');
     grunt.loadNpmTasks('grunt-contrib-qunit');
     grunt.loadNpmTasks('grunt-mocha');
+    grunt.loadNpmTasks('grunt-contrib-clean');
+    grunt.loadNpmTasks('grunt-csso');
+    grunt.loadNpmTasks('grunt-contrib-sass');
+    grunt.loadNpmTasks('grunt-autoprefixer');
+    grunt.loadNpmTasks('grunt-contrib-watch');
+    grunt.loadNpmTasks('grunt-contrib-copy');
 
     // Default task(s).
     grunt.registerTask('dev', ['connect:dev']);
     grunt.registerTask('test', ['jshint', 'connect:test', 'mocha', 'qunit']);
     grunt.registerTask('prod', ['connect:prod']);
 
+    grunt.registerTask('dist-css', ['sass', 'autoprefixer', 'csso']);
+    grunt.registerTask('dist-font', ['copy']);
+    grunt.registerTask('dist', ['clean', 'dist-css', 'dist-font']);
+    grunt.registerTask('default', ['dist']);
+
 };
\ No newline at end of file
diff --git a/package.json b/package.json
index cf4aac9..005f0b4 100644
--- a/package.json
+++ b/package.json
@@ -1,28 +1,34 @@
 {
-	"name": "mail-html5",
-	"version": "0.0.1",
-	"engines": {
-		"node": ">=0.8"
-	},
-	"scripts": {
-		"postinstall": "./res/copy-deps.sh",
-		"test": "grunt test",
-		"start": "grunt prod"
-	},
-	"dependencies": {
-		"crypto-lib": "https://github.com/whiteout-io/crypto-lib/tarball/master",
-		"imap-client": "git+ssh://git@github.com:whiteout-io/imap-client.git#builtins",
-		"smtp-client": "git+ssh://git@github.com:whiteout-io/smtp-client.git#master"
-	},
-	"devDependencies": {
-		"grunt": "0.4.1",
-		"mocha": "1.13.0",
-		"phantomjs": "1.9.1-9",
-		"chai": "1.7.2",
-		"sinon": "1.7.3",
-		"grunt-contrib-connect": "0.5.0",
-		"grunt-contrib-jshint": "0.6.4",
-		"grunt-contrib-qunit": "0.2.2",
-		"grunt-mocha": "0.4.1"
-	}
+    "name": "mail-html5",
+    "version": "0.1.0-dev",
+    "engines": {
+        "node": ">=0.8"
+    },
+    "scripts": {
+        "postinstall": "./res/copy-deps.sh",
+        "test": "grunt test",
+        "start": "grunt prod"
+    },
+    "dependencies": {
+        "crypto-lib": "https://github.com/whiteout-io/crypto-lib/tarball/master",
+        "imap-client": "git+ssh://git@github.com:whiteout-io/imap-client.git#builtins",
+        "smtp-client": "git+ssh://git@github.com:whiteout-io/smtp-client.git#master"
+    },
+    "devDependencies": {
+        "grunt": "0.4.1",
+        "mocha": "1.13.0",
+        "phantomjs": "1.9.1-9",
+        "chai": "1.7.2",
+        "sinon": "1.7.3",
+        "grunt-contrib-connect": "0.5.0",
+        "grunt-contrib-jshint": "0.6.4",
+        "grunt-contrib-qunit": "0.2.2",
+        "grunt-mocha": "0.4.1",
+        "grunt-contrib-clean": "0.5.0",
+        "grunt-csso": "0.5.0",
+        "grunt-contrib-sass": "0.5.0",
+        "grunt-autoprefixer": "0.3.0",
+        "grunt-contrib-watch": "0.5.3",
+        "grunt-contrib-copy": "0.4.1"
+    }
 }
\ No newline at end of file
diff --git a/src/css/style.scss b/src/css/style.scss
index ced6f46..2002e8f 100644
--- a/src/css/style.scss
+++ b/src/css/style.scss
@@ -16,7 +16,7 @@ $lightgrey-box-shadow-color: #D8D8D8;
     font-family: 'PT Sans';
     font-style: normal;
     font-weight: 400;
-    src: local('PT Sans'), local('PTSans-Regular'), url('pt-sans.ttf') format('truetype');
+    src: local('PT Sans'), local('PTSans-Regular'), url('../font/pt-sans.ttf') format('truetype');
 }
 
 @import "icon-font";
diff --git a/src/desktop.html b/src/desktop.html
new file mode 100755
index 0000000..33d226a
--- /dev/null
+++ b/src/desktop.html
@@ -0,0 +1,116 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <title>Whiteout Mail Client Desktop Layout</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <link rel="stylesheet" media="all" href="css/all.css" type="text/css">
+    </head>
+    <body>
+
+        <div class="nav-container nav-effect">
+
+            <!-- main navigation -->
+            <nav class="nav-menu nav-effect">
+                <div class="content">
+                    <header>
+                        <h1>WHITEOUT.IO</h1>
+                    </header>
+                    <ul class="nav-primary">
+                        <li>
+                            <a href="#">
+                                Inbox
+                                <span class="label-wrapper"><span class="label label-light">1000+</span></span>
+                            </a>
+                        </li>
+                        <li>
+                            <a href="#">Sent</a>
+                        </li>
+                        <li>
+                            <a href="#">Outbox</a>
+                        </li>
+                        <li>
+                            <a href="#">
+                                Drafts
+                                <span class="label-wrapper"><span class="label label-light">2</span></span>
+                            </a>
+                        </li>
+                        <li>
+                            <a href="#">
+                                Trash
+                                <span class="label-wrapper"><span class="label label-light">100</span></span>
+                            </a>
+                        </li>
+                    </ul>
+                    <ul class="nav-secondary">
+                        <li><a href="#">Account</a></li>
+                        <li><a href="#">About whiteout.io</a></li>
+                        <li><a href="#">Help</a></li>
+                    </ul>
+                    <footer>
+                        Last update: 12:22 PM
+                    </footer>
+                </div>
+            </nav>
+
+            <!-- content wrapper pushed right -->
+            <div class="nav-pusher">
+                <section class="content main-content">
+
+                    <!-- left column: containing list view and navigation header -->
+                    <div class="column view-mail-list">
+                        <!-- nav controll and section headline -->
+                        <header data-icon="&#xe004;">
+                            <h2>Inbox</h2>
+                        </header>
+
+                        <div class="">
+
+                        </div>
+                    </div>
+
+                    <div class="column">
+
+                    </div>
+
+                </section>
+            </div>
+
+        </div>
+
+        <!-- lightbox  -->
+        <div class="lightbox-overlay">
+            <div class="lightbox lightbox-effect">
+                <div class="lightbox-body">
+                    <header>
+                        <!-- add lightbox title -->
+                        <h2>New email</h2>
+                        <button class="close" data-action="lightbox-close">&#xe007;</button>
+                    </header>
+                    <div class="content">
+                        <!-- add lightbox content here -->
+                        some content
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- /lightbox -->
+
+        <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
+        <script>
+            // just for demo purposes
+            $(function() {
+                $('.view-mail-list header').click(function(e) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    $('.nav-container').addClass('nav-menu-open');
+                });
+
+                $('.nav-pusher').click(function(e) {
+                    e.preventDefault();
+                    $('.nav-container').removeClass('nav-menu-open');
+                });
+            });
+        </script>
+    </body>
+</html>
\ No newline at end of file
diff --git a/src/font/icons.eot b/src/font/icons.eot
new file mode 100755
index 0000000..7c7e5c0
Binary files /dev/null and b/src/font/icons.eot differ
diff --git a/src/font/icons.svg b/src/font/icons.svg
new file mode 100755
index 0000000..3534aaf
--- /dev/null
+++ b/src/font/icons.svg
@@ -0,0 +1,40 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>
+This is a custom SVG font generated by IcoMoon.
+<iconset grid="16"></iconset>
+</metadata>
+<defs>
+<font id="icomoon" horiz-adv-x="512" >
+<font-face units-per-em="512" ascent="480" descent="-32" />
+<missing-glyph horiz-adv-x="512" />
+<glyph class="hidden" unicode="&#xf000;" d="M0,480L 512 -32L0 -32 z" horiz-adv-x="0" />
+<glyph unicode="&#xe000;" d="M 256,480C 114.977,480,0,365.023,0,224s 114.977-256, 256-256c 141.023,0, 256,114.977, 256,256S 397.023,480, 256,480z M 310.227,224l 108.477-108.477
+	l-54.227-54.227l-108.477,108.477l-108.477-108.477l-54.227,54.227l 108.477,108.477l-108.477,108.477l 54.227,54.227l 108.477-108.477l 108.477,108.477l 54.227-54.227L 310.227,224z"  />
+<glyph unicode="&#xe001;" d="M 461.545,414.185L 674.909,414.185L 674.909,351.558L 461.545,351.558zM 538.065,488.401L 600.692,488.401L 600.692,275.037L 538.065,275.037zM 424.425-19.526c-2.327-16.244,0-16.244-23.203-18.548c-13.917-2.327-97.42-2.327-183.226-2.327c-97.42,0-199.447,0-206.406,2.327c-27.834,6.959-11.59,60.3, 25.507,85.807
+		c 30.161,18.548, 90.461,48.71, 106.682,51.014c 23.203,4.631, 25.507,18.548,0,62.627c-4.631,9.286-11.59,39.424-11.59,71.889c0,51.014, 9.286,85.807, 53.341,104.378c 9.286,2.327, 18.548,4.631, 27.834,4.631
+		c 30.161,0, 57.972-16.244, 69.585-41.751c 16.244-32.465, 9.286-118.272-9.286-148.433c-20.876-34.793-18.548-46.383, 4.631-51.014c 13.917-4.631, 60.3-25.507, 104.378-48.71C 412.835,36.143, 429.056,8.308, 424.425-19.526z
+		 M 568.227,40.774c0-11.59,0-13.917-16.244-16.244c-9.286-2.327-51.014-2.327-104.378-2.327c-9.286,20.876-25.507,41.751-51.014,53.341c-27.834,16.244-57.972,30.161-83.503,41.751
+		c 16.244,6.959, 30.161,13.917, 37.12,16.244c 16.244,4.631, 18.548,13.917,0,48.71c-4.631,9.286-9.286,32.465-11.59,57.972c0,39.424, 9.286,67.258, 44.055,81.175c 6.959,2.327, 13.917,2.327, 20.876,2.327
+		c 23.203,0, 44.055-11.59, 53.341-32.465c 11.59-25.507, 6.959-92.765-6.959-118.272c-16.244-27.834-13.917-37.12, 4.631-39.424c 11.59-2.327, 46.383-20.876, 81.175-39.424C 556.637,82.525, 570.531,61.649, 568.227,40.774z" horiz-adv-x="674.909"  />
+<glyph unicode="&#xe002;" d="M0,275.744L 229.024,485.952l0-106.656 c 442.368,0, 410.976-420.384, 410.976-420.384c-87.84,291.776-410.976,207.072-410.976,207.072l0-106.656 L0,275.744z" horiz-adv-x="640"  />
+<glyph unicode="&#xe003;" d="M 338.895,398.324c 2.438,2.438, 19.505,19.505, 48.762,29.257c 39.010,12.19, 80.457,2.438, 112.152-29.257c 31.695-31.695, 43.886-70.705, 29.257-112.152c-9.752-29.257-26.819-48.762-29.257-51.2
+		l-224.305-224.305c-39.010-39.010-136.533-90.21-226.743,0c-90.21,90.21-39.010,187.733,0,224.305l 241.371,241.371c 9.752,9.752, 24.381,9.752, 31.695,0c 9.752-9.752, 9.752-24.381,0-31.695l-241.371-241.371
+		c-4.876-2.438-80.457-80.457,0-160.914c 78.019-78.019, 153.6-7.314, 160.914,0l 224.305,226.743c0,0, 12.19,12.19, 19.505,31.695c 7.314,24.381, 2.438,43.886-19.505,65.829c-43.886,43.886-87.771,7.314-97.524,0l-209.676-209.676
+		c-7.314-7.314-12.19-19.505,0-34.133c 12.19-12.19, 24.381-7.314, 31.695,0l 146.286,146.286c 9.752,7.314, 24.381,7.314, 31.695,0c 9.752-9.752, 9.752-24.381,0-34.133l-146.286-143.848c-19.505-19.505-60.952-34.133-97.524,0
+		c-36.571,34.133-19.505,78.019,0,97.524L 338.895,398.324z" horiz-adv-x="536.381"  />
+<glyph unicode="&#xe004;" d="M0,475.663L 722.824,475.663L 722.824,379.106L0,379.106zM0,68.894L 722.824,68.894L 722.824-27.693L0-27.693zM0,273.754L 722.824,273.754L 722.824,177.167L0,177.167z" horiz-adv-x="722.824"  />
+<glyph unicode="&#xe005;" d="M 382.356,409.479c 13.069,0, 23.498-10.456, 23.498-23.498l0-15.683 c0-10.456-7.842-20.911-18.297-23.498l0-339.591 c0-20.911-18.297-39.181-41.795-39.181L 58.449-32 
+			c-23.498,0-41.795,18.297-41.795,39.181l0,339.591 C 6.198,349.386,-1.644,359.842,-1.644,370.297L-1.644,385.954 c0,13.069, 10.456,23.498, 23.498,23.498l 70.521,0 L 92.403,438.205 C 92.403,461.703, 110.673,480, 131.584,480l 138.456,0 C 293.538,480, 311.835,461.703, 311.835,438.205
+			l0-28.726 L 382.356,409.479L 382.356,409.479z M 335.333,15.023c 2.614,0, 5.228,2.614, 5.228,5.228L 340.561,346.772 L 63.65,346.772 l0-326.521 c0-2.614, 2.614-5.228, 5.228-5.228L 335.333,15.023 z M 118.515,41.135
+			c-13.069,0-23.498,10.456-23.498,23.498L 95.016,297.135 c0,13.069, 10.456,20.911, 23.498,20.911l 5.228,0 c 13.069,0, 23.498-10.456, 23.498-20.911l0-232.502 c0-13.069-10.456-23.498-23.498-23.498L 118.515,41.135 z M 131.584,443.432
+			C 128.97,443.432, 126.356,443.432, 126.356,438.205l0-28.726 l 151.498,0 L 277.854,438.205 c0,2.614-2.614,5.228-5.228,5.228L 131.584,443.432 z M 199.491,41.135c-13.069,0-23.498,10.456-23.498,23.498L 175.993,297.135 c0,13.069, 10.456,20.911, 23.498,20.911l 2.614,0 
+			c 13.069,0, 23.498-10.456, 23.498-20.911l0-232.502 c0-13.069-10.456-23.498-23.498-23.498L 199.491,41.135 z M 280.468,41.135c-13.069,0-23.498,10.456-23.498,23.498L 256.97,297.135 c0,13.069, 10.456,20.911, 23.498,20.911L 285.696,318.046 
+			c 13.069,0, 23.498-10.456, 23.498-20.911l0-232.502 c0-13.069-10.456-23.498-23.498-23.498L 280.468,41.135 z" horiz-adv-x="404.211"  />
+<glyph unicode="&#xe006;" d="M 438.414,163.698l 63.033,63.033l0-186.311 c0-38.372-30.151-68.494-65.764-68.494L 65.764-28.103 c-38.372,0-65.764,30.151-65.764,68.494L0,407.58 C0,445.924, 30.151,476.075, 65.764,476.075l 375.381,0 l0,0 
+		l-63.033-63.033L 87.694,413.042 c-13.71,0-24.661-10.951-24.661-24.661l0-326.059 c0-13.71, 10.951-24.661, 24.661-24.661l 326.059,0 c 13.71,0, 24.661,10.951, 24.661,24.661L 438.414,163.698 z M 306.887,119.865l-65.764,65.764l-24.661-90.425
+		L 306.887,119.865z M 328.818,141.796l 213.732,213.732L 476.757,421.262L 263.054,210.29L 328.818,141.796z M 567.182,377.429l 30.151,30.151L 528.839,476.075l-30.151-30.151L 567.182,377.429z" horiz-adv-x="597.333"  />
+<glyph unicode="&#xe007;" d="M 58.88,477.44L 511.968,24.384L 451.264-36.32L-1.824,416.736zM -1.824,28.768L 451.232,481.824L 511.936,421.152L 58.88-31.936z"  />
+<glyph unicode="&#x20;" horiz-adv-x="256" />
+</font></defs></svg>
\ No newline at end of file
diff --git a/src/font/icons.ttf b/src/font/icons.ttf
new file mode 100755
index 0000000..c49430c
Binary files /dev/null and b/src/font/icons.ttf differ
diff --git a/src/font/icons.woff b/src/font/icons.woff
new file mode 100755
index 0000000..121882d
Binary files /dev/null and b/src/font/icons.woff differ
diff --git a/src/font/pt-sans-bold.woff b/src/font/pt-sans-bold.woff
new file mode 100644
index 0000000..367e963
Binary files /dev/null and b/src/font/pt-sans-bold.woff differ
diff --git a/src/css/pt-sans.ttf b/src/font/pt-sans.ttf
similarity index 100%
rename from src/css/pt-sans.ttf
rename to src/font/pt-sans.ttf
diff --git a/src/font/pt-sans.woff b/src/font/pt-sans.woff
new file mode 100644
index 0000000..25d004e
Binary files /dev/null and b/src/font/pt-sans.woff differ
diff --git a/src/css/images/mail-128.png b/src/img/mail-128.png
similarity index 100%
rename from src/css/images/mail-128.png
rename to src/img/mail-128.png
diff --git a/src/manifest.json b/src/manifest.json
index 5eb3fca..61a8595 100644
--- a/src/manifest.json
+++ b/src/manifest.json
@@ -5,7 +5,7 @@
   "manifest_version": 2,
   "offline_enabled": true,
   "icons": {
-    "128": "css/images/mail-128.png"
+    "128": "img/mail-128.png"
   },
   "permissions": [
     "https://storage.whiteout.io/",
diff --git a/src/sass/_fonts.scss b/src/sass/_fonts.scss
new file mode 100755
index 0000000..4ac5c89
--- /dev/null
+++ b/src/sass/_fonts.scss
@@ -0,0 +1,29 @@
+// PT Sans fonts
+// -------------------------
+
+@font-face {
+    font-family: 'PT Sans';
+    font-style: normal;
+    font-weight: 400;
+    src: local('PT Sans'), local('PTSans-Regular'), url('../font/pt-sans.woff') format('woff');
+}
+@font-face {
+    font-family: 'PT Sans';
+    font-style: normal;
+    font-weight: 700;
+    src: local('PT Sans Bold'), local('PTSans-Bold'), url('../font/pt-sans-bold.woff') format('woff');
+}
+
+// Icon fonts
+// -------------------------
+
+@font-face {
+    font-family: 'icons';
+    src:url('../font/icons.eot');
+    src:url('../font/icons.eot?#iefix') format('embedded-opentype'),
+        url('../font/icons.woff') format('woff'),
+        url('../font/icons.ttf') format('truetype'),
+        url('../font/icons.svg#icomoon') format('svg');
+    font-weight: normal;
+    font-style: normal;
+}
\ No newline at end of file
diff --git a/src/sass/_functions.scss b/src/sass/_functions.scss
new file mode 100755
index 0000000..da2010d
--- /dev/null
+++ b/src/sass/_functions.scss
@@ -0,0 +1,7 @@
+@function strip-units($number) {
+    @return $number / ($number * 0 + 1);
+}
+
+@function em($target, $context: $font-size-base) {
+    @return (strip-units($target) / strip-units($context)) * 1em;
+}
\ No newline at end of file
diff --git a/src/sass/_grid.scss b/src/sass/_grid.scss
new file mode 100755
index 0000000..943f125
--- /dev/null
+++ b/src/sass/_grid.scss
@@ -0,0 +1,15 @@
+// Make a Grid
+// Use makeRow and makeColumn to assign semantic layouts grid system behavior
+@mixin makeRow($gutter-width: $grid-gutter-width) {
+    margin-left: $gutter-width * -1;
+    @include clearfix;
+}
+@mixin makeColumn($columns: 1, $offset: 0, $column-width: $grid-column-width, $gutter-width: $grid-gutter-width) {
+    float: left;
+    margin-left: ($column-width * $offset) + ($gutter-width * ($offset - 1)) + ($gutter-width * 2);
+    width: ($column-width * $columns) + ($gutter-width * ($columns - 1));
+}
+@mixin pushColumn($offset: 0, $column-width: $grid-column-width, $gutter-width: $grid-gutter-width) {
+    position: relative;
+    left: $offset * ($column-width + $gutter-width);
+}
\ No newline at end of file
diff --git a/src/sass/_mixins.scss b/src/sass/_mixins.scss
new file mode 100755
index 0000000..351f101
--- /dev/null
+++ b/src/sass/_mixins.scss
@@ -0,0 +1,54 @@
+// Clearfix
+// Source: http://nicolasgallagher.com/micro-clearfix-hack/
+//
+// For modern browsers
+// 1. The space content is one way to avoid an Opera bug when the
+//    contenteditable attribute is included anywhere else in the document.
+//    Otherwise it causes space to appear at the top and bottom of elements
+//    that are clearfixed.
+// 2. The use of `table` rather than `block` is only necessary if using
+//    `:before` to contain the top-margins of child elements.
+@mixin clearfix {
+    &:before,
+    &:after {
+        content: " "; /* 1 */
+        display: table; /* 2 */
+    }
+    &:after {
+        clear: both;
+    }
+}
+
+// CSS image replacement
+// Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757
+@mixin hide-text {
+    font: #{0}/#{0} a;
+    color: transparent;
+    text-shadow: none;
+    background-color: transparent;
+    border: 0;
+}
+
+// Text overflow
+// Requires inline-block or block for proper styling
+@mixin text-overflow {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+// retina.sass
+// A helper mixin for applying high-resolution background images (http://www.retinajs.com)
+// Submitted by Nathan Crank
+// nathancrank.com
+@mixin at2x($path, $ext: "jpg", $w: auto, $h: auto) {
+    $at1x_path: "#{$path}.#{$ext}";
+    $at2x_path: "#{$path}@2x.#{$ext}";
+
+    background-image: "url("#{$at1x_path}")";
+
+    @include respond-to(retina) {
+        background-image: "url("#{$at2x_path}")";
+        background-size: $w $h;
+    }
+}
\ No newline at end of file
diff --git a/src/sass/_normalize.scss b/src/sass/_normalize.scss
new file mode 100755
index 0000000..cea4867
--- /dev/null
+++ b/src/sass/_normalize.scss
@@ -0,0 +1,396 @@
+/*! normalize.css v2.1.0 | MIT License | git.io/normalize */
+
+// ==========================================================================
+// HTML5 display definitions
+// ==========================================================================
+
+//
+// Correct `block` display not defined in IE 8/9.
+//
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+nav,
+section,
+summary {
+  display: block;
+}
+
+//
+// Correct `inline-block` display not defined in IE 8/9.
+//
+
+audio,
+canvas,
+video {
+  display: inline-block;
+}
+
+//
+// Prevent modern browsers from displaying `audio` without controls.
+// Remove excess height in iOS 5 devices.
+//
+
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+
+//
+// Address styling not present in IE 8/9.
+//
+
+[hidden] {
+  display: none;
+}
+
+// ==========================================================================
+// Base
+// ==========================================================================
+
+//
+// 1. Set default font family to sans-serif.
+// 2. Prevent iOS text size adjust after orientation change, without disabling
+//    user zoom.
+//
+
+html {
+  font-family: sans-serif; // 1
+  -webkit-text-size-adjust: 100%; // 2
+  -ms-text-size-adjust: 100%; // 2
+}
+
+//
+// Remove default margin.
+//
+
+body {
+  margin: 0;
+}
+
+// ==========================================================================
+// Links
+// ==========================================================================
+
+//
+// Address `outline` inconsistency between Chrome and other browsers.
+//
+
+a:focus {
+  outline: thin dotted;
+}
+
+//
+// Improve readability when focused and also mouse hovered in all browsers.
+//
+
+a:active,
+a:hover {
+  outline: 0;
+}
+
+// ==========================================================================
+// Typography
+// ==========================================================================
+
+//
+// Address variable `h1` font-size and margin within `section` and `article`
+// contexts in Firefox 4+, Safari 5, and Chrome.
+//
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+//
+// Address styling not present in IE 8/9, Safari 5, and Chrome.
+//
+
+abbr[title] {
+  border-bottom: 1px dotted;
+}
+
+//
+// Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
+//
+
+b,
+strong {
+  font-weight: bold;
+}
+
+//
+// Address styling not present in Safari 5 and Chrome.
+//
+
+dfn {
+  font-style: italic;
+}
+
+//
+// Address differences between Firefox and other browsers.
+//
+
+hr {
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+  height: 0;
+}
+
+//
+// Address styling not present in IE 8/9.
+//
+
+mark {
+  background: #ff0;
+  color: #000;
+}
+
+//
+// Correct font family set oddly in Safari 5 and Chrome.
+//
+
+code,
+kbd,
+pre,
+samp {
+  font-family: monospace, serif;
+  font-size: 1em;
+}
+
+//
+// Improve readability of pre-formatted text in all browsers.
+//
+
+pre {
+  white-space: pre-wrap;
+}
+
+//
+// Set consistent quote types.
+//
+
+q {
+  quotes: "\201C" "\201D" "\2018" "\2019";
+}
+
+//
+// Address inconsistent and variable font size in all browsers.
+//
+
+small {
+  font-size: 80%;
+}
+
+//
+// Prevent `sub` and `sup` affecting `line-height` in all browsers.
+//
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sup {
+  top: -0.5em;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+// ==========================================================================
+// Embedded content
+// ==========================================================================
+
+//
+// Remove border when inside `a` element in IE 8/9.
+//
+
+img {
+  border: 0;
+}
+
+//
+// Correct overflow displayed oddly in IE 9.
+//
+
+svg:not(:root) {
+  overflow: hidden;
+}
+
+// ==========================================================================
+// Figures
+// ==========================================================================
+
+//
+// Address margin not present in IE 8/9 and Safari 5.
+//
+
+figure {
+  margin: 0;
+}
+
+// ==========================================================================
+// Forms
+// ==========================================================================
+
+//
+// Define consistent border, margin, and padding.
+//
+
+fieldset {
+  border: 1px solid #c0c0c0;
+  margin: 0 2px;
+  padding: 0.35em 0.625em 0.75em;
+}
+
+//
+// 1. Correct `color` not being inherited in IE 8/9.
+// 2. Remove padding so people aren't caught out if they zero out fieldsets.
+//
+
+legend {
+  border: 0; // 1
+  padding: 0; // 2
+}
+
+//
+// 1. Correct font family not being inherited in all browsers.
+// 2. Correct font size not being inherited in all browsers.
+// 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
+//
+
+button,
+input,
+select,
+textarea {
+  font-family: inherit; // 1
+  font-size: 100%; // 2
+  margin: 0; // 3
+}
+
+//
+// Address Firefox 4+ setting `line-height` on `input` using `!important` in
+// the UA stylesheet.
+//
+
+button,
+input {
+  line-height: normal;
+}
+
+//
+// Address inconsistent `text-transform` inheritance for `button` and `select`.
+// All other form control elements do not inherit `text-transform` values.
+// Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
+// Correct `select` style inheritance in Firefox 4+ and Opera.
+//
+
+button,
+select {
+  text-transform: none;
+}
+
+//
+// 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+//    and `video` controls.
+// 2. Correct inability to style clickable `input` types in iOS.
+// 3. Improve usability and consistency of cursor style between image-type
+//    `input` and others.
+//
+
+button,
+html input[type="button"], // 1
+input[type="reset"],
+input[type="submit"] {
+  -webkit-appearance: button; // 2
+  cursor: pointer; // 3
+}
+
+//
+// Re-set default cursor for disabled elements.
+//
+
+button[disabled],
+html input[disabled] {
+  cursor: default;
+}
+
+//
+// 1. Address box sizing set to `content-box` in IE 8/9.
+// 2. Remove excess padding in IE 8/9.
+//
+
+input[type="checkbox"],
+input[type="radio"] {
+  box-sizing: border-box; // 1
+  padding: 0; // 2
+}
+
+//
+// 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
+// 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
+//    (include `-moz` to future-proof).
+//
+
+input[type="search"] {
+  -webkit-appearance: textfield; // 1
+  -moz-box-sizing: content-box;
+  -webkit-box-sizing: content-box; // 2
+  box-sizing: content-box;
+}
+
+//
+// Remove inner padding and search cancel button in Safari 5 and Chrome
+// on OS X.
+//
+
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+//
+// Remove inner padding and border in Firefox 4+.
+//
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+
+//
+// 1. Remove default vertical scrollbar in IE 8/9.
+// 2. Improve readability and alignment in all browsers.
+//
+
+textarea {
+  overflow: auto; // 1
+  vertical-align: top; // 2
+}
+
+// ==========================================================================
+// Tables
+// ==========================================================================
+
+//
+// Remove most spacing between table cells.
+//
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
\ No newline at end of file
diff --git a/src/sass/_responsive.scss b/src/sass/_responsive.scss
new file mode 100755
index 0000000..1aa6dae
--- /dev/null
+++ b/src/sass/_responsive.scss
@@ -0,0 +1,31 @@
+// Central Media Query Helper
+// -------------------------
+
+@mixin respond-to($media) {
+    @if $media == desktop {
+        @media only screen and (min-width: $respond-size-desktop) { @content; }
+    }
+    @else if $media == retina {
+        @media all and (-webkit-min-device-pixel-ratio : 1.5),
+            all and (-o-min-device-pixel-ratio: 3/2),
+            all and (min--moz-device-pixel-ratio: 1.5),
+            all and (min-device-pixel-ratio: 1.5) {
+                @content
+        }
+    }
+}
+
+// Visibility classes (mobile first approach)
+// -------------------------
+
+.visible-phone      { display: inherit !important; }
+.hidden-phone       { display: none !important; }
+.visible-desktop    { display: none !important; }
+.hidden-desktop     { display: inherit !important; }
+
+@include respond-to(desktop) {
+    .visible-desktop    { display: inherit !important; }
+    .hidden-desktop     { display: none !important; }
+    .visible-phone    { display: none !important; }
+    .hidden-phone     { display: inherit !important; }
+}
\ No newline at end of file
diff --git a/src/sass/_scaffolding.scss b/src/sass/_scaffolding.scss
new file mode 100755
index 0000000..643c198
--- /dev/null
+++ b/src/sass/_scaffolding.scss
@@ -0,0 +1,38 @@
+// Reset the box-sizing
+
+*,
+*:before,
+*:after {
+    box-sizing: border-box;
+}
+
+// Body reset
+
+html {
+    font-size: 62.5%;
+    height: 100%;
+}
+
+body {
+    font-family: $font-family-base;
+    font-size: $font-size-base;
+    line-height: $line-height-base;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    height: 100%;
+}
+
+// Reset fonts for relevant elements
+input,
+button,
+select,
+textarea {
+    font-family: inherit;
+    font-size: inherit;
+    line-height: inherit;
+}
+
+// Basic layout
+.column {
+
+}
\ No newline at end of file
diff --git a/src/sass/_variables.scss b/src/sass/_variables.scss
new file mode 100755
index 0000000..8fc8783
--- /dev/null
+++ b/src/sass/_variables.scss
@@ -0,0 +1,72 @@
+// Typography
+// -------------------------------------------
+$font-size-base:                    16px;
+$font-size-small:                   em(14);
+$font-size-smaller:                 em(12);
+$font-size-big:                     em(18);
+$font-size-bigger:                  em(24);
+
+$font-family-base:                  "PT Sans", Arial, sans-serif;
+$font-family-icons:                 "icons";
+
+$line-height-base:                  20 / 16;
+
+// Colors
+// -------------------------------------------
+
+$color-blue:                        #00c6ff;
+$color-black:                       #000;
+$color-white:                       #fff;
+$color-grey:                        #666;
+$color-grey-dark:                   #333;
+$color-grey-light:                  #ccc;
+$color-grey-lighter:                #ddd;
+$color-grey-lightest:               #f9f9f9;
+
+// Layout
+// -------------------------------------------
+
+$respond-size-desktop:              768px;
+
+$content-nav-width:                 344px;
+
+// Components
+// -------------------------------------------
+
+$nav-max-width:                     347px;
+$nav-width:                         80%;
+$nav-padding:                       10px;
+
+$lightbox-padding:                  15px;
+$lightbox-max-width:                662px;
+$lightbox-width:                    90%;
+$lightbox-min-height:               644px;
+$lightbox-top:                      10%;
+
+$btn-back-color:                    $color-blue;
+$btn-color:                         #fff;
+$btn-shadow-color:                  $color-grey-light;
+$btn-font-size:                     $font-size-big;
+$btn-padding-horizontal:            0.7em;
+$btn-padding-vertical:              0.5em;
+$btn-disabled-back-color:           $color-grey-lighter;
+$btn-disabled-color:                #fff;
+
+$btn-icon-color:                    $color-blue;
+$btn-icon-disabled-color:           $color-grey;
+
+$label-back-color:                  $color-blue;
+$label-color:                       #fff;
+$label-shadow-color:                $color-grey-light;
+$label-font-size:                   $font-size-small;
+$label-padding-horizontal:          0.8em;
+$label-padding-vertical:            0.3em;
+
+$label-primary-back-color:          #ff878d;
+$label-primary-color:               #fff;
+
+$label-light-back-color:            #fff;
+$label-light-color:                 $color-blue;
+$label-light-shadow-color:          $color-grey-lighter;
+$label-light-padding-horizontal:    0.3em;
+$label-light-padding-vertical:      0.1em;
diff --git a/src/sass/all.scss b/src/sass/all.scss
new file mode 100755
index 0000000..918d1ec
--- /dev/null
+++ b/src/sass/all.scss
@@ -0,0 +1,23 @@
+// Utilities
+@import "mixins";
+@import "functions";
+@import "grid";
+
+@import "normalize";
+@import "variables"; // Modify this for custom colors, font-sizes, etc
+@import "fonts";
+@import "responsive";
+@import "scaffolding";
+
+// Components
+@import "components/buttons";
+@import "components/labels";
+@import "components/icons";
+@import "components/lightbox";
+@import "components/nav";
+@import "components/mail-list";
+@import "components/layout";
+
+// Views
+@import "views/navigation";
+@import "views/mail-list";
diff --git a/src/sass/components/_buttons.scss b/src/sass/components/_buttons.scss
new file mode 100755
index 0000000..a48a9f7
--- /dev/null
+++ b/src/sass/components/_buttons.scss
@@ -0,0 +1,131 @@
+
+// Regular buttons with disabled support
+// -------------------------------------------
+
+.btn {
+    position: relative;
+    display: inline-block;
+    padding: $btn-padding-vertical $btn-padding-horizontal;
+    font-size: $btn-font-size;
+    text-align: center;
+    vertical-align: middle;
+    cursor: pointer;
+    border: 1px solid transparent;
+    border-radius: 0;
+    white-space: nowrap;
+    user-select: none;
+    background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
+    background-color: $btn-back-color;
+    color: $btn-color;
+    box-shadow: 1px 1px 0px $btn-shadow-color;
+    transition: background-color 0.3s;
+    text-decoration: none;
+    font-weight: normal;
+    -webkit-font-smoothing: auto;
+
+    &:hover,
+    &:focus {
+        background-color: lighten($btn-back-color, 10%);
+    }
+
+    &:active,
+    &.active {
+        outline: 0;
+        background-image: none;
+        box-shadow: none;
+        top: 1px;
+        left: 1px;
+    }
+
+    &.disabled,
+    &[disabled],
+    &[aria-disabled="true"] {
+        cursor: not-allowed;
+        pointer-events: none; // Future-proof disabling of clicks
+        color: $btn-disabled-color;
+        background-color: $btn-disabled-back-color;
+        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAJUlEQVQIW2NkQABJIPM5lCvJCGMgC4LYIAkUlTAFMB0gjRQaBQCw8go5lVnl5wAAAABJRU5ErkJggg==);
+
+        @include respond-to(retina) {
+            background-size: 3px 3px;
+        }
+    }
+
+    &[data-icon]:before {
+        padding-right: 0.5em
+    }
+    &[data-icon-append]:after {
+        padding-left: 0.5em
+    }
+}
+
+// Icon Buttons
+// -------------------------------------------
+
+.btn-icon {
+    position: relative;
+    display: inline-block;
+    @include hide-text();
+    margin: 2px;
+    box-shadow: 0 0 0 2px $btn-icon-color;
+    border-radius: 50%;
+    color: $btn-icon-color;
+    vertical-align: middle;
+    cursor: pointer;
+    white-space: nowrap;
+    user-select: none;
+    background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
+    color: $btn-icon-color;
+    text-decoration: none;
+    font-weight: normal;
+    font-size: $font-size-base;
+    font-family: $font-family-icons;
+    line-height: 1;
+    height: 2em;
+    width: 2em;
+    text-align: center;
+    -webkit-font-smoothing: antialiased;
+    transition: color 0.3s;
+    transform: translate3d(0,0,0); // to prevent flickering
+
+    &.disabled,
+    &[disabled],
+    &[aria-disabled="true"] {
+        cursor: not-allowed;
+        pointer-events: none; // Future-proof disabling of clicks
+        color: $btn-icon-disabled-color;
+        box-shadow: 0 0 0 2px $btn-icon-disabled-color;
+    }
+
+    &:active,
+    &.active {
+        outline: 0;
+        top: 1px;
+        left: 1px;
+    }
+
+    &:after {
+        pointer-events: none;
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        border-radius: 50%;
+        content: '';
+        box-sizing: content-box;
+        top: -2px;
+        left: -2px;
+        padding: 2px;
+        z-index: -1;
+        background: $btn-icon-color;
+        transition: transform 0.3s, opacity 0.4s;
+        transform: scale(1.2);
+        opacity: 0;
+    }
+    &:hover {
+        color: $color-white;
+        &:after {
+            transform: scale(0.8);
+            opacity: 1;
+        }
+    }
+}
diff --git a/src/sass/components/_icons.scss b/src/sass/components/_icons.scss
new file mode 100755
index 0000000..1e004ca
--- /dev/null
+++ b/src/sass/components/_icons.scss
@@ -0,0 +1,24 @@
+
+// Icon attributes
+// -------------------------------------------
+
+[data-icon]:before {
+    font-family: $font-family-icons;
+    content: attr(data-icon);
+    speak: none;
+    font-weight: normal;
+    font-variant: normal;
+    text-transform: none;
+    line-height: 1;
+    -webkit-font-smoothing: antialiased;
+}
+[data-icon-append]:after {
+    font-family: $font-family-icons;
+    content: attr(data-icon-append);
+    speak: none;
+    font-weight: normal;
+    font-variant: normal;
+    text-transform: none;
+    line-height: 1;
+    -webkit-font-smoothing: antialiased;
+}
\ No newline at end of file
diff --git a/src/sass/components/_labels.scss b/src/sass/components/_labels.scss
new file mode 100755
index 0000000..028897e
--- /dev/null
+++ b/src/sass/components/_labels.scss
@@ -0,0 +1,41 @@
+
+.label {
+    display: inline-block;
+    padding: $label-padding-vertical $label-padding-horizontal;
+    font-size: $label-font-size;
+    text-align: center;
+    vertical-align: middle;
+    border-radius: ($line-height-base * $label-font-size) + 2 * $label-padding-vertical;
+    white-space: nowrap;
+    user-select: none;
+    background-color: $label-back-color;
+    color: $label-color;
+    box-shadow: 0px 1px 0px $label-shadow-color;
+
+    &[data-icon]:before {
+        padding-right: 0.5em
+    }
+    &[data-icon-append]:after {
+        padding-left: 0.5em
+    }
+}
+
+.label-primary {
+    background-color: $label-primary-back-color;
+    color: $label-primary-color;
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAJUlEQVQIW2NkQABJIPM5lCvJCGMgC4LYIAkUlTAFMB0gjRQaBQCw8go5lVnl5wAAAABJRU5ErkJggg==);
+
+    @include respond-to(retina) {
+        background-size: 3px 3px;
+    }
+}
+
+.label-light {
+    background-color: $label-light-back-color;
+    color: $label-light-color;
+    box-shadow: inset 1px 1px 0px $label-light-shadow-color;
+    padding: $label-light-padding-vertical $label-light-padding-horizontal;
+    min-width: 2.5em;
+    font-weight: bold;
+    font-size: $font-size-base;
+}
\ No newline at end of file
diff --git a/src/sass/components/_layout.scss b/src/sass/components/_layout.scss
new file mode 100755
index 0000000..56ef2b2
--- /dev/null
+++ b/src/sass/components/_layout.scss
@@ -0,0 +1,10 @@
+.main-content {
+    @include clearfix();
+    height: 100%;
+    overflow: hidden;
+}
+
+.column {
+    height: 100%;
+    overflow: hidden;
+}
\ No newline at end of file
diff --git a/src/sass/components/_lightbox.scss b/src/sass/components/_lightbox.scss
new file mode 100755
index 0000000..b3a64cd
--- /dev/null
+++ b/src/sass/components/_lightbox.scss
@@ -0,0 +1,85 @@
+.lightbox {
+    position: relative;
+    top: 0px;
+    left: 0px;
+    width: 100%;
+    height: 100%;
+    z-index: 2000;
+    visibility: hidden;
+    backface-visibility: hidden;
+
+    @include respond-to(desktop) {
+        top: $lightbox-top;
+        margin: 0 auto;
+        width: $lightbox-width;
+        max-width: $lightbox-max-width;
+        max-height: $lightbox-min-height;
+        height: auto;
+    }
+
+    .lightbox-body {
+        padding: $lightbox-padding;
+        background: #fff;
+        header {
+            text-align: center;
+            position: relative;
+            button.close {
+                font-family: $font-family-icons;
+                position: absolute;
+                top: 0px;
+                right: 0px;
+                display: block;
+                border: none;
+                background: none;
+                padding: 0;
+                margin: 0;
+                color: $color-grey-dark;
+            }
+            h2 {
+                margin: 0;
+                padding: 0;
+                font-size: $font-size-bigger;
+                font-weight: normal;
+                line-height: 1em;
+                color: $color-grey-dark;
+            }
+        }
+        .content {
+            overflow: hidden;
+        }
+    }
+}
+
+.lightbox-overlay.show .lightbox {
+    visibility: visible;
+}
+
+.lightbox-overlay {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    visibility: hidden;
+    top: 0;
+    left: 0;
+    z-index: 1000;
+    opacity: 0;
+    background: $color-grey-dark;
+    transition: all 0.3s;
+}
+
+.lightbox-overlay.show {
+    opacity: 1;
+    visibility: visible;
+}
+
+// effect
+.lightbox-effect .lightbox-body {
+    transform: scale(0.7);
+    opacity: 0;
+    transition: all 0.3s;
+}
+
+.lightbox-overlay.show .lightbox-effect .lightbox-body {
+    transform: scale(1);
+    opacity: 1;
+}
\ No newline at end of file
diff --git a/src/sass/components/_mail-list.scss b/src/sass/components/_mail-list.scss
new file mode 100755
index 0000000..d1a71de
--- /dev/null
+++ b/src/sass/components/_mail-list.scss
@@ -0,0 +1,161 @@
+.mail-list {
+    $padding-vertical: 15px;
+    $padding-horizontal: 30px;
+
+    list-style: none;
+    margin: 0;
+    padding: 0;
+
+    &:last-child {
+        margin-bottom: 0;
+    }
+
+    li {
+        display: block;
+        margin-bottom: 5px;
+        padding: $padding-vertical $padding-horizontal;
+        background: $color-white;
+        cursor: pointer;
+        transition: background-color 0.3s, color 0.3s;
+
+        h3 {
+            @include text-overflow;
+
+            color: $color-blue;
+            font-size: $font-size-bigger;
+            font-weight: normal;
+            margin: 0;
+        }
+        p {
+            font-size: $font-size-small;
+            margin: 0;
+        }
+        .head {
+            position: relative;
+            padding-right: 6.5em;
+
+            .subject {
+                @include text-overflow;
+
+                color: $color-grey-dark;
+                font-weight: bold;
+                line-height: 1.8em;
+            }
+            time {
+                position: absolute;
+                bottom: 0;
+                right: 0;
+                width: 6em * ($font-size-small / $font-size-smaller);
+                color: $color-grey-light;
+                font-size: $font-size-smaller;
+                text-align: right;
+                line-height: 1.8em * ($font-size-small / $font-size-smaller);
+            }
+            &:before {
+                content: "";
+                width: 0.8em;
+                height: 0.8em;
+                border-radius: 50%;
+                box-shadow: inset 0 2px 2px $color-grey-light;
+                position: absolute;
+                top: 0;
+                left: 0;
+                margin-top: 0.2em;
+                margin-left: -1.3em;
+                transition: background-color 0.3s, box-shadow 0.3s;
+            }
+        }
+        .body {
+            @include text-overflow;
+
+            color: $color-grey;
+        }
+
+        &:hover {
+            background-color: mix($color-white, $color-blue, 90%);
+        }
+
+        &.mail-list-attachment {
+            .head:after {
+                content: "\e003";
+                color: $color-grey-light;
+                font-family: $font-family-icons;
+                position: absolute;
+                right: 0;
+                top: 0;
+                margin-right: -1 * $padding-horizontal;
+                text-align: center;
+                line-height: 1.8em;
+                width: $padding-horizontal;
+            }
+        }
+
+        &.mail-list-unread {
+            .head:before {
+                background-color: $color-blue;
+                box-shadow: inset 0 1px 2px $color-grey;
+            }
+        }
+
+        &.mail-list-replied {
+            .head:before {
+                content: "\e002";
+                color: $color-grey-light;
+                font-family: $font-family-icons;
+                position: absolute;
+                left: 0;
+                top: 0;
+                margin-left: -1 * $padding-horizontal;
+                text-align: center;
+                line-height: 1.8em / 0.8em;
+                box-shadow: none;
+                width: $padding-horizontal;
+                height: auto;
+                font-size: 0.8em;
+            }
+        }
+
+        &.mail-list-active,
+        &.mail-list-active:hover {
+            background-color: $color-blue;
+            color: $color-white;
+
+            h3 {
+                color: $color-white;
+            }
+            .head {
+                .subject {
+                    color: $color-white;
+                }
+                time {
+                    color: $color-white;
+                }
+            }
+            .body {
+                color: $color-white;
+            }
+            .head:before {
+                box-shadow: inset 0 2px 2px $color-grey-light;
+                background-color: $color-white;
+            }
+            &.mail-list-attachment {
+                .head:after {
+                    color: $color-white;
+                }
+            }
+            &.mail-list-unread {
+                .head:before {
+                    box-shadow: inset 0 2px 2px $color-grey-light;
+                    background-color: $color-white;
+                }
+            }
+            &.mail-list-replied {
+                .head:before {
+                    color: $color-white;
+                    background: transparent;
+                    box-shadow: none;
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/sass/components/_nav.scss b/src/sass/components/_nav.scss
new file mode 100755
index 0000000..6fa9943
--- /dev/null
+++ b/src/sass/components/_nav.scss
@@ -0,0 +1,81 @@
+// Navigation
+// -------------------------
+.nav-container {
+    position: relative;
+    overflow: hidden;
+    height: 100%;
+}
+
+.nav-pusher {
+    position: relative;
+    left: 0;
+    z-index: 99;
+    height: 100%;
+    transition: transform 0.5s;
+}
+
+.nav-menu-open .nav-pusher::after {
+    width: 100%;
+    height: 100%;
+    opacity: 1;
+    transition: opacity 0.5s;
+}
+
+.nav-pusher::after {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 0;
+    height: 0;
+    background: rgba(0,0,0,0.2);
+    content: '';
+    opacity: 0;
+    transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
+}
+
+.nav-menu {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 100;
+    visibility: hidden;
+    width: $nav-width;
+    max-width: $nav-max-width;
+    height: 100%;
+    background: $color-blue;
+    background-image: linear-gradient(to right ,$color-blue 98%, darken($color-blue, 1%) 100%);
+    transition: all 0.5s;
+    border-right: 1px solid $color-grey-light;
+}
+
+.nav-menu-open .nav-pusher::after {
+    width: 100%;
+    height: 100%;
+    opacity: 1;
+    transition: opacity 0.5s;
+}
+
+.nav-effect.nav-menu-open .nav-pusher {
+    transform: translate3d($nav-max-width, 0, 0);
+}
+@media(max-width: 450px) {
+    .nav-effect.nav-menu-open .nav-pusher {
+        transform: translate3d($nav-width, 0, 0);
+    }
+}
+
+
+.nav-effect.nav-menu {
+z-index: 1;
+    transform: translate3d(-50%, 0, 0);
+}
+
+.nav-effect.nav-menu-open .nav-effect.nav-menu {
+    visibility: visible;
+    transition: transform 0.5s;
+    transform: translate3d(0, 0, 0);
+}
+
+.nav-effects.nav-menu::after {
+    display: none;
+}
diff --git a/src/sass/views/_mail-list.scss b/src/sass/views/_mail-list.scss
new file mode 100755
index 0000000..33dc8ff
--- /dev/null
+++ b/src/sass/views/_mail-list.scss
@@ -0,0 +1,32 @@
+.view-mail-list {
+    $padding-horizontal: 15px;
+    $padding-vertical: 10px;
+
+    float: left;
+    width: $content-nav-width;
+    background: $color-grey-lightest;
+    background-image: linear-gradient(to right ,$color-grey-lightest 98%, darken($color-grey-lightest, 1%) 100%);
+    border-right: 1px solid $color-grey-light;
+
+    header {
+
+        cursor: pointer;
+        padding: $padding-vertical $padding-horizontal;
+        text-shadow: 0px 1px 1px $color-grey-lighter;
+        &:before {
+            color: $color-blue;
+            font-size: $font-size-bigger;
+            margin-right: 0.5em;
+            vertical-align: middle;
+        }
+        h2 {
+            margin: 0;
+            display: inline;
+            color: $color-grey-dark;
+            font-size: $font-size-bigger;
+            font-weight: normal;
+            vertical-align: middle;
+        }
+
+    }
+}
\ No newline at end of file
diff --git a/src/sass/views/_navigation.scss b/src/sass/views/_navigation.scss
new file mode 100755
index 0000000..5ce0bea
--- /dev/null
+++ b/src/sass/views/_navigation.scss
@@ -0,0 +1,87 @@
+.nav-menu {
+    .content {
+        a {
+            color: #fff;
+            text-decoration: none;
+        }
+
+        header {
+            padding: 0 $nav-padding;
+            height: 84px;
+            h1 {
+                //@include hide-text();
+                // TODO: replace with svg background image
+                margin: 0px;
+                padding: 0px;
+                color: #fff;
+                font-weight: normal;
+            }
+        }
+
+        ul {
+            list-style-type: none;
+            margin: 0;
+            padding: 0;
+            li {
+                margin: 0;
+                padding: 0;
+                width: 100%;
+            }
+        }
+
+        ul.nav-primary {
+            padding: 0 $nav-padding;
+            li {
+                display: block;
+
+                a {
+                    @include clearfix();
+                    display: block;
+                    font-size: $font-size-bigger;
+                    vertical-align: middle;
+                    border-bottom: 1px solid #fff;
+                    line-height: 1.8em;
+                    transition: background-color 0.3s;
+
+                    .label-wrapper {
+                        display: block;
+                        float: right;
+                    }
+                    span.label {
+                        line-height: 1.3em;
+                        vertical-align: middle;
+                    }
+                    &:hover, &:focus {
+                        background-color: mix($color-blue, $color-white, 80%);
+                    }
+                }
+            }
+            li:first-child {
+                border-top: 1px solid #fff;
+            }
+        }
+
+        ul.nav-secondary {
+            margin-top: em(50, 16);
+            padding: 0 $nav-padding;
+            li {
+                a {
+                    font-size: $font-size-big;
+                }
+            }
+        }
+
+        footer {
+            position: absolute;
+            bottom: 0px;
+            left: 0px;
+            padding: 0 $nav-padding;
+            background: darken($color-blue, 1%);
+            height: 28px;
+            width: 100%;
+            font-size: $font-size-smaller;
+            color: #fff;
+            line-height: em(28,12);
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/styles.html b/src/styles.html
new file mode 100755
index 0000000..ae3dad7
--- /dev/null
+++ b/src/styles.html
@@ -0,0 +1,105 @@
+<!DOCTYPE HTML>
+<html lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <title>Styleguide for Whiteout Mail Client</title>
+
+    <link rel="stylesheet" href="css/all.css">
+
+    <style>
+        body {
+            margin: 0 auto;
+            padding: 20px;
+            max-width: 800px;
+        }
+    </style>
+</head>
+<body>
+
+    <h1>Styleguide for Whiteout Mail Client</h1>
+
+    <h2>1) Buttons</h2>
+    <h3>Regular Buttons</h3>
+    <p>
+        <button class="btn">Label</button>
+        <a class="btn" href="#" data-icon="&#xe001;">Send securely and invite</a>
+        <button class="btn" disabled>Disabled Button</button>
+        <a class="btn" aria-disabled="true" data-icon-append="&#xe001;" href="#">Disabled Link</a>
+    </p>
+    <h3>Icon Buttons</h3>
+    <p>
+        <button class="btn-icon">&#xe005;</button>
+        <button class="btn-icon">&#xe002;</button>
+        <button class="btn-icon">&#xe006;</button>
+        <button class="btn-icon" disabled>&#xe006;</button>
+    </p>
+
+    <h2>2) Labels</h2>
+    <p>
+        <span class="label">Max Mustermann</span>
+        <span class="label label-primary" data-icon-append="&#xe003;">Max Mustermann</span>
+        <span class="label label-light">1</span>
+    </p>
+
+    <h2>3) Mail List</h2>
+    <ul class="mail-list">
+        <li class="mail-list-active mail-list-attachment">
+            <h3>welcome@whiteout.io</h3>
+            <div class="head">
+                <p class="subject">
+                    Welcome Nico
+                </p>
+                <time>
+                    Wednesday
+                </time>
+            </div>
+            <p class="body">
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, nesciunt, esse, laborum, inventore hic molestias necessitatibus sint facere delectus odio itaque nemo aspernatur nobis veritatis dolore saepe id aperiam perferendis.
+            </p>
+        </li>
+        <li>
+            <h3>welcome@whiteout.io</h3>
+            <div class="head">
+                <p class="subject">
+                    Welcome Nico
+                </p>
+                <time>
+                    Wednesday
+                </time>
+            </div>
+            <p class="body">
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, nesciunt, esse, laborum, inventore hic molestias necessitatibus sint facere delectus odio itaque nemo aspernatur nobis veritatis dolore saepe id aperiam perferendis.
+            </p>
+        </li>
+        <li class="mail-list-attachment mail-list-unread">
+            <h3>welcome@whiteout.io</h3>
+            <div class="head">
+                <p class="subject">
+                    Welcome Nico
+                </p>
+                <time>
+                    Wednesday
+                </time>
+            </div>
+            <p class="body">
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, nesciunt, esse, laborum, inventore hic molestias necessitatibus sint facere delectus odio itaque nemo aspernatur nobis veritatis dolore saepe id aperiam perferendis.
+            </p>
+        </li>
+        <li class="mail-list-replied">
+            <h3>welcome@whiteout.io</h3>
+            <div class="head">
+                <p class="subject">
+                    Welcome Nico
+                </p>
+                <time>
+                    Wednesday
+                </time>
+            </div>
+            <p class="body">
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, nesciunt, esse, laborum, inventore hic molestias necessitatibus sint facere delectus odio itaque nemo aspernatur nobis veritatis dolore saepe id aperiam perferendis.
+            </p>
+        </li>
+    </ul>
+
+</body>
+</html>
\ No newline at end of file