diff --git a/.gitignore b/.gitignore
index 3c3629e647f5..5455e0c0be7b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1 +1,2 @@
 node_modules
+.sass-cache
diff --git a/Gruntfile.js b/Gruntfile.js
index ccfdf0cf6209..d3b60a911bea 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -35,10 +35,19 @@ module.exports = function(grunt) {
         ],
         dest: 'test/test.js',
       }
+    },
+    sass: {
+        stylesheets: {
+            files: {
+                'stylesheets/manifest.css': 'stylesheets/manifest.scss'
+            }
+        }
     }
   });
   grunt.loadNpmTasks('grunt-preen');
   grunt.loadNpmTasks('grunt-contrib-concat');
+  grunt.loadNpmTasks('grunt-contrib-sass');
 
-  grunt.registerTask('default', ['preen', 'concat']);
+
+  grunt.registerTask('default', ['preen', 'concat', 'sass']);
 };
diff --git a/package.json b/package.json
index 89a33ccda07b..31063afb7296 100644
--- a/package.json
+++ b/package.json
@@ -3,10 +3,11 @@
   "repository": "https://github.com/WhisperSystems/TextSecure.git",
   "version": "0.0.0",
   "devDependencies": {
+    "bower": "^1.3.12",
     "grunt": "^0.4.5",
     "grunt-contrib-concat": "^0.5.0",
     "grunt-contrib-jshint": "~0.10.0",
-    "grunt-preen": "^1.0.0",
-    "bower": "^1.3.12"
+    "grunt-contrib-sass": "^0.8.1",
+    "grunt-preen": "^1.0.0"
   }
 }
diff --git a/stylesheets/manifest.css b/stylesheets/manifest.css
index d8c1e65644a7..6494b9c5fef1 100644
--- a/stylesheets/manifest.css
+++ b/stylesheets/manifest.css
@@ -1 +1,273 @@
-@charset "UTF-8";body{font-family:"Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;font-weight:normal;text-align:center;-webkit-font-smoothing:antialiased;-moz-font-smoothing:antialiased;-ms-font-smoothing:antialiased;-o-font-smoothing:antialiased;font-smoothing:antialiased;hanging-punctuation:first}.title-bar{padding:10px;color:white;background-color:#00badd;border-bottom:1px solid #00a5c4}.title-bar h1{padding:0;font-weight:normal;margin:0.5em 0 0 0}.notifications{position:relative;font-size:12px}.notifications .notification{padding:12px}.notifications .notification p{margin:0}.notifications .notification.info{background-color:whitesmoke;border-bottom:1px solid lightgray}.notifications .notification a.button{position:absolute;cursor:pointer;right:10px;top:11px;background-color:whitesmoke;text-decoration:none;color:gray;border:1px solid lightgray;font-weight:bold;font-size:10px;text-align:center;padding:2px;box-sizing:border-box;display:block;height:18px;width:18px;border-radius:18px}.notifications .notification a.button:hover{background-color:lightgray}@media screen and (min-width: 320px){.search{padding:10px;border-bottom:1px solid whitesmoke}.search input[type=search]{box-sizing:border-box;font-size:12px;outline:0;width:100%;margin:0;letter-spacing:0.25px;padding:4px 8px;border:1px solid lightgray}.gutter .search{display:none}}@media screen and (min-width: 480px){.search{display:none}.gutter .search{display:block}}@media screen and (min-width: 320px){.gutter{width:64px;float:left;border-right:1px solid lightgray;position:relative;box-sizing:border-box;height:458px;overflow:scroll;background-color:white;padding-bottom:80px}.gutter .contact{cursor:pointer;float:left;width:100%;border-bottom:1px solid whitesmoke;color:#333}.gutter .contact:hover{background-color:whitesmoke;margin-top:-1px;border-bottom:1px solid lightgray;border-top:1px solid lightgray}.gutter .contact.active{background-color:#ecfcff;margin-top:-1px;border-bottom:1px solid lightgray;border-top:1px solid lightgray}.gutter .contact .avatar{height:42px;width:42px;border-radius:42px;cursor:pointer;display:inline-block;margin:10px;margin-right:14px;float:left;clear:both;background-color:whitesmoke}.gutter .contact .contact-details{display:none}}@media screen and (min-width: 480px){.gutter{width:240px;height:auto;z-index:100}.gutter .search{padding:10px;border-bottom:1px solid whitesmoke}.gutter .search input[type=search]{box-sizing:border-box;font-size:12px;outline:0;width:100%;margin:0;letter-spacing:0.25px;padding:4px 8px;border:1px solid lightgray}.gutter .search.d6{display:block}.gutter .contact .avatar{height:56px;width:56px}.gutter .contact .contact-details{display:block;position:relative;width:156px;float:left;text-align:left}.gutter .contact .contact-details h3{font-size:13px;margin-bottom:4px}.gutter .contact .contact-details .last-message{color:#999999;letter-spacing:0.15px;-webkit-text-stroke:0.2px;margin:0;font-size:12px}.gutter .contact .contact-details .last-timestamp{position:absolute;top:14px;right:8px;font-size:12px;font-weight:500;color:gray}}.conversation{margin-top:10px;width:100%;padding-right:12px;box-sizing:border-box;display:block;margin-bottom:10px;text-align:left}ul.discussion{display:block;overflow:auto;padding:0}.entry{display:block;width:100%;float:left;margin-bottom:10px}.bubble{border-radius:16px;padding:12px;bottom:10px;width:auto;background-color:whitesmoke}.bubble:first-of-type{margin-top:0}.bubble ul,.bubble li{display:block;margin:0;padding:0}.bubble .message{position:relative;font-size:14px;-webkit-text-stroke:0.35px}.bubble.incoming{float:left;text-align:left;margin-left:12px}.bubble.sent{float:right;clear:right;text-align:right;background-color:#00badd;color:white}@media screen and (min-width: 320px){.send-message-area{position:fixed;bottom:0;background-color:whitesmoke;box-sizing:border-box;float:left;padding:16px;width:100%;border-top:1px solid lightgray;right:0}.send-message-area .send-message{outline:0;border:0;width:100%;padding:0;resize:auto}.message-composer{vertical-align:top;position:relative;background-color:white;margin-bottom:20px;padding:8px;border:1px solid lightgray;font-size:14px;color:gray;padding-bottom:80px}.message-composer .attachments{position:absolute;bottom:0;color:lightgray;width:64px;text-align:center;padding:6px 4px 0 4px;margin-bottom:10px;border-top:1px solid lightgray}.extension-details{font-size:11px;color:#b9b9b9}.extension-details a{color:gray;text-decoration:none}.extension-details ul{padding:0}.extension-details li{display:inline-block}.extension-details li:after{content:" • ";color:lightgray}.extension-details li:last-of-type:after{content:none}}@media screen and (min-width: 480px){.send-message-area{padding-left:258px}}@media screen and (min-width: 822px){.send-message-area{padding-right:258px}}
\ No newline at end of file
+@charset "UTF-8";
+body {
+  font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
+  font-weight: normal;
+  text-align: center;
+  -webkit-font-smoothing: antialiased;
+  -moz-font-smoothing: antialiased;
+  -ms-font-smoothing: antialiased;
+  -o-font-smoothing: antialiased;
+  font-smoothing: antialiased;
+  hanging-punctuation: first; }
+
+/*
+ * This is a series-d manifest file. 
+ * 
+ *  Here, we import responsive variables specified elsewhere
+ *
+ */
+/* SERIES D SHAME + WIP */
+/* includes iPhone, */
+.title-bar {
+  padding: 10px;
+  color: white;
+  background-color: #00badd;
+  border-bottom: 1px solid #00a5c4; }
+  .title-bar h1 {
+    padding: 0;
+    font-weight: normal;
+    margin: 0.5em 0 0 0; }
+
+.notifications {
+  position: relative;
+  font-size: 12px; }
+  .notifications .notification {
+    padding: 12px; }
+    .notifications .notification p {
+      margin: 0; }
+    .notifications .notification.info {
+      background-color: whitesmoke;
+      border-bottom: 1px solid lightgray; }
+    .notifications .notification a.button {
+      position: absolute;
+      cursor: pointer;
+      right: 10px;
+      top: 11px;
+      background-color: whitesmoke;
+      text-decoration: none;
+      color: gray;
+      border: 1px solid lightgray;
+      font-weight: bold;
+      font-size: 10px;
+      text-align: center;
+      padding: 2px;
+      box-sizing: border-box;
+      display: block;
+      height: 18px;
+      width: 18px;
+      border-radius: 18px; }
+      .notifications .notification a.button:hover {
+        background-color: lightgray; }
+
+@media screen and (min-width: 320px) {
+  .search {
+    padding: 10px;
+    border-bottom: 1px solid whitesmoke; }
+    .search input[type=search] {
+      box-sizing: border-box;
+      font-size: 12px;
+      outline: 0;
+      width: 100%;
+      margin: 0;
+      letter-spacing: 0.25px;
+      padding: 4px 8px;
+      border: 1px solid lightgray; }
+
+  .gutter .search {
+    display: none; } }
+@media screen and (min-width: 480px) {
+  .search {
+    display: none; }
+
+  .gutter .search {
+    display: block; } }
+@media screen and (min-width: 320px) {
+  .gutter {
+    width: 64px;
+    float: left;
+    border-right: 1px solid lightgray;
+    position: relative;
+    box-sizing: border-box;
+    height: 458px;
+    overflow: scroll;
+    background-color: white;
+    padding-bottom: 80px; }
+    .gutter .contact {
+      cursor: pointer;
+      float: left;
+      width: 100%;
+      border-bottom: 1px solid whitesmoke;
+      color: #333; }
+      .gutter .contact:hover {
+        background-color: whitesmoke;
+        margin-top: -1px;
+        border-bottom: 1px solid lightgray;
+        border-top: 1px solid lightgray; }
+      .gutter .contact.active {
+        background-color: #ecfcff;
+        margin-top: -1px;
+        border-bottom: 1px solid lightgray;
+        border-top: 1px solid lightgray; }
+      .gutter .contact .avatar {
+        height: 42px;
+        width: 42px;
+        border-radius: 42px;
+        cursor: pointer;
+        display: inline-block;
+        margin: 10px;
+        margin-right: 14px;
+        float: left;
+        clear: both;
+        background-color: whitesmoke; }
+      .gutter .contact .contact-details {
+        display: none; } }
+@media screen and (min-width: 480px) {
+  .gutter {
+    width: 240px;
+    height: auto;
+    z-index: 100; }
+    .gutter .search {
+      padding: 10px;
+      border-bottom: 1px solid whitesmoke; }
+      .gutter .search input[type=search] {
+        box-sizing: border-box;
+        font-size: 12px;
+        outline: 0;
+        width: 100%;
+        margin: 0;
+        letter-spacing: 0.25px;
+        padding: 4px 8px;
+        border: 1px solid lightgray; }
+      .gutter .search.d6 {
+        display: block; }
+    .gutter .contact .avatar {
+      height: 56px;
+      width: 56px; }
+    .gutter .contact .contact-details {
+      display: block;
+      position: relative;
+      width: 156px;
+      float: left;
+      text-align: left; }
+      .gutter .contact .contact-details h3 {
+        font-size: 13px;
+        margin-bottom: 4px; }
+      .gutter .contact .contact-details .last-message {
+        color: #999999;
+        letter-spacing: 0.15px;
+        -webkit-text-stroke: 0.2px;
+        margin: 0;
+        font-size: 12px; }
+      .gutter .contact .contact-details .last-timestamp {
+        position: absolute;
+        top: 14px;
+        right: 8px;
+        font-size: 12px;
+        font-weight: 500;
+        color: gray; } }
+.conversation {
+  margin-top: 10px;
+  width: 100%;
+  padding-right: 12px;
+  box-sizing: border-box;
+  display: block;
+  margin-bottom: 10px;
+  text-align: left; }
+
+ul.discussion {
+  display: block;
+  overflow: auto;
+  padding: 0; }
+
+.entry {
+  display: block;
+  width: 100%;
+  float: left;
+  margin-bottom: 10px; }
+
+.bubble {
+  border-radius: 16px;
+  padding: 12px;
+  bottom: 10px;
+  width: auto;
+  background-color: whitesmoke; }
+  .bubble:first-of-type {
+    margin-top: 0; }
+  .bubble ul, .bubble li {
+    display: block;
+    margin: 0;
+    padding: 0; }
+  .bubble .message {
+    position: relative;
+    font-size: 14px;
+    -webkit-text-stroke: 0.35px; }
+  .bubble.incoming {
+    float: left;
+    text-align: left;
+    margin-left: 12px; }
+  .bubble.sent {
+    float: right;
+    clear: right;
+    text-align: right;
+    background-color: #00badd;
+    color: white; }
+
+@media screen and (min-width: 320px) {
+  .send-message-area {
+    position: fixed;
+    bottom: 0;
+    background-color: whitesmoke;
+    box-sizing: border-box;
+    float: left;
+    padding: 16px;
+    width: 100%;
+    border-top: 1px solid lightgray;
+    right: 0; }
+    .send-message-area .send-message {
+      outline: 0;
+      border: 0;
+      width: 100%;
+      padding: 0;
+      resize: auto; }
+
+  .message-composer {
+    vertical-align: top;
+    position: relative;
+    background-color: white;
+    margin-bottom: 20px;
+    padding: 8px;
+    border: 1px solid lightgray;
+    font-size: 14px;
+    color: gray;
+    padding-bottom: 80px; }
+    .message-composer .attachments {
+      position: absolute;
+      bottom: 0;
+      color: lightgray;
+      width: 64px;
+      text-align: center;
+      padding: 6px 4px 0 4px;
+      margin-bottom: 10px;
+      border-top: 1px solid lightgray; }
+
+  .extension-details {
+    font-size: 11px;
+    color: #b9b9b9; }
+    .extension-details a {
+      color: gray;
+      text-decoration: none; }
+    .extension-details ul {
+      padding: 0; }
+    .extension-details li {
+      display: inline-block; }
+      .extension-details li:after {
+        content: " • ";
+        color: lightgray; }
+      .extension-details li:last-of-type:after {
+        content: none; } }
+@media screen and (min-width: 480px) {
+  .send-message-area {
+    padding-left: 258px; } }
+@media screen and (min-width: 822px) {
+  .send-message-area {
+    padding-right: 258px; } }