diff --git a/Gruntfile.js b/Gruntfile.js
index 7bf48f6..71e6684 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -55,7 +55,7 @@ module.exports = function (grunt) {
           cssDir: '.tmp/styles',
           fontsDir: 'app/fonts',
           httpFontsDir: 'fonts',
-          httpImagesPath: '../images'
+          imagesDir: 'app/images'
         }
       },
       dist: {
@@ -64,7 +64,7 @@ module.exports = function (grunt) {
           cssDir: '.tmp/styles',
           fontsDir: 'dist/fonts',
           httpFontsDir: 'fonts',
-          httpImagesPath: '../images',
+          imagesDir: 'app/images',
           environment: 'production'
         }
       }
diff --git a/app/styles/_variables.sass b/app/styles/_variables.sass
deleted file mode 100644
index 545902e..0000000
--- a/app/styles/_variables.sass
+++ /dev/null
@@ -1,2 +0,0 @@
-$blue: #0088cc
-$green: #a4c540
diff --git a/app/styles/app.sass b/app/styles/app.sass
index 76886e5..92865b3 100644
--- a/app/styles/app.sass
+++ b/app/styles/app.sass
@@ -1,13 +1,17 @@
 @import compass/reset
 @import compass/css3
 
-@import variables
-@import mixins
-@import layout
-@import modal
-@import header
-@import footer
-@import users
-@import media
-@import popover
-@import glyphicons-filetypes
+@import base/variables
+@import base/mixins
+@import base/element_defaults
+@import base/glyphicons_filetypes
+
+@import modules/modules
+@import modules/modal
+@import modules/users
+@import modules/popover
+
+@import layout/header
+@import layout/footer
+@import layout/media
+
diff --git a/app/styles/base/_element_defaults.sass b/app/styles/base/_element_defaults.sass
new file mode 100644
index 0000000..2686048
--- /dev/null
+++ b/app/styles/base/_element_defaults.sass
@@ -0,0 +1,26 @@
+*
+  +box-sizing(border-box)
+  &::before, &::after
+    +box-sizing(border-box)
+
+html
+  height: 100%
+  font-family: $font-family
+  font-size: 10px
+
+body
+  height: 100%
+
+a
+  text-decoration: none
+
+b, strong
+  font-weight: bold
+
+input, select
+  font-family: $font-family
+
+.invisible
+  height: 0
+  width: 0
+  opacity: 0
diff --git a/app/styles/_glyphicons-filetypes.sass b/app/styles/base/_glyphicons_filetypes.sass
similarity index 100%
rename from app/styles/_glyphicons-filetypes.sass
rename to app/styles/base/_glyphicons_filetypes.sass
diff --git a/app/styles/_mixins.sass b/app/styles/base/_mixins.sass
similarity index 89%
rename from app/styles/_mixins.sass
rename to app/styles/base/_mixins.sass
index 499f454..a54e078 100644
--- a/app/styles/_mixins.sass
+++ b/app/styles/base/_mixins.sass
@@ -12,7 +12,7 @@
   outline: none
   width: auto
   cursor: pointer
-  font-family: Helvetica, Arial, sans-serif
+  font-family: $font-family
 
 =circle($size)
   display: inline-block
diff --git a/app/styles/base/_variables.sass b/app/styles/base/_variables.sass
new file mode 100644
index 0000000..4d57ad2
--- /dev/null
+++ b/app/styles/base/_variables.sass
@@ -0,0 +1,4 @@
+$font-family: "Helvetica Neue", sans-serif
+
+$blue: #0088cc
+$green: #a4c540
diff --git a/app/styles/_footer.sass b/app/styles/layout/_footer.sass
similarity index 71%
rename from app/styles/_footer.sass
rename to app/styles/layout/_footer.sass
index a40b2f6..3eda3a1 100644
--- a/app/styles/_footer.sass
+++ b/app/styles/layout/_footer.sass
@@ -17,21 +17,21 @@
 
   .about
     display: inline-block
-    font-size: 12px
+    font-size: 1.2rem
     line-height: 1.4em
 
   .cowbell-labs
     position: absolute
     left: 15px
     bottom: 15px
-    font-size: 10px
+    font-size: 1rem
     > a
       display: inline-block
       vertical-align: middle
       margin: -1px 0 0 2px
       width: 102px
       height: 16px
-      background: transparent image-url("/images/cowbell-labs.svg") no-repeat center
+      background: transparent inline-image("cowbell-labs.svg") no-repeat center
 
   .github
     position: absolute
@@ -39,7 +39,7 @@
     bottom: 13px
     width: 20px
     height: 20px
-    background: transparent image-url("/images/github.svg") no-repeat center
+    background: transparent inline-image("github.svg") no-repeat center
 
   .webrtc
     position: absolute
@@ -47,7 +47,7 @@
     bottom: 17px
     width: 72px
     height: 12px
-    background: transparent image-url("/images/webrtc.png") no-repeat center
+    background: transparent inline-image("webrtc.png") no-repeat center
     background-size: 71px 12px
 
   .firebase
@@ -56,5 +56,5 @@
     bottom: 15px
     width: 76px
     height: 20px
-    background: transparent image-url("/images/firebase.png") no-repeat center
+    background: transparent inline-image("firebase.png") no-repeat center
     background-size: 76px 20px
diff --git a/app/styles/_header.sass b/app/styles/layout/_header.sass
similarity index 79%
rename from app/styles/_header.sass
rename to app/styles/layout/_header.sass
index ae885f3..83a8eeb 100644
--- a/app/styles/_header.sass
+++ b/app/styles/layout/_header.sass
@@ -6,7 +6,7 @@
     width: 100%
     height: 60px
     background: transparent
-    color: #000
+    color: black
     +user-select(none)
     .logo
       position: relative
@@ -20,7 +20,7 @@
         position: absolute
         bottom: 0
         left: 44px
-        font-size: 10px
+        font-size: 1rem
         font-weight: bold
       img
         vertical-align: top
@@ -32,12 +32,12 @@
       > li
         float: left
         margin-left: 15px
-        font-size: 14px
+        font-size: 1.4rem
         line-height: 30px
         a
           display: inline-block
-          transition: opacity .17s linear
-          color: #000
+          transition: opacity .2s linear
+          color: black
           img
             vertical-align: middle
           &:hover
@@ -49,11 +49,11 @@
 
     .icon-circle
       +circle(18px)
-      border: 1px solid #000
-      font-size: 12px
+      border: 1px solid black
+      font-size: 1.2rem
       opacity: .18
       margin-top: -2px
 
     .sign
-      background: transparent image-url("/images/persona.svg") no-repeat left
+      background: transparent inline-image("persona.svg") no-repeat left
       padding-left: 25px
diff --git a/app/styles/_media.sass b/app/styles/layout/_media.sass
similarity index 94%
rename from app/styles/_media.sass
rename to app/styles/layout/_media.sass
index 415b33e..f4f669f 100644
--- a/app/styles/_media.sass
+++ b/app/styles/layout/_media.sass
@@ -40,12 +40,12 @@
         padding-left: 170px
         width: 100%
         .user-email
-          font-size: 14px
+          font-size: 1.4rem
         .user-label
-          font-size: 18px
+          font-size: 1.8rem
         .user-id
           margin-top: 4px
-          font-size: 12px
+          font-size: 1.2rem
           color: #808080
       .popover
         $bg_color: #f4f4f4
@@ -86,7 +86,7 @@
             height: 106px
             line-height: 106px
             width: 50%
-            font-size: 12px
+            font-size: 1.2rem
             margin-left: -3px
             color: #fff
             &.cancel
@@ -112,7 +112,7 @@
     height: 100px
     padding: 15px
     .about
-      font-size: 11px
+      font-size: 1.1rem
     .cowbell-labs
       > span
         display: none
@@ -127,7 +127,7 @@
 
   .error
     width: auto
-    font-size: 14px
+    font-size: 1.4rem
     padding: 0 15px
 
 
diff --git a/app/styles/_modal.sass b/app/styles/modules/_modal.sass
similarity index 100%
rename from app/styles/_modal.sass
rename to app/styles/modules/_modal.sass
diff --git a/app/styles/_layout.sass b/app/styles/modules/_modules.sass
similarity index 76%
rename from app/styles/_layout.sass
rename to app/styles/modules/_modules.sass
index 0373772..b26c7fe 100644
--- a/app/styles/_layout.sass
+++ b/app/styles/modules/_modules.sass
@@ -1,22 +1,3 @@
-*
-  +box-sizing(border-box)
-  &::before, &::after
-    +box-sizing(border-box)
-
-html
-  height: 100%
-  font-family: "Helvetica Neue", sans-serif
-  font-size: 10px
-
-body
-  height: 100%
-
-a
-  text-decoration: none
-
-b, strong
-  font-weight: bold
-
 .preloader
   position: absolute
   left: 0
@@ -40,11 +21,6 @@ b, strong
   .preloader
     opacity: 0
 
-.invisible
-  height: 0
-  width: 0
-  opacity: 0
-
 .error
   position: absolute
   top: 0
diff --git a/app/styles/_popover.sass b/app/styles/modules/_popover.sass
similarity index 94%
rename from app/styles/_popover.sass
rename to app/styles/modules/_popover.sass
index 9bcf71e..cd8b7cc 100644
--- a/app/styles/_popover.sass
+++ b/app/styles/modules/_popover.sass
@@ -26,7 +26,7 @@
     > p
       word-break: break-all
       overflow: hidden
-      font-size: 12px
+      font-size: 1.2rem
       line-height: 1.4em
       margin-bottom: 1em
       min-height: 28px
@@ -34,7 +34,7 @@
     position: absolute
     left: 0
     top: 0
-    font-size: 50px
+    font-size: 5rem
 
   .popover-buttons
     text-align: right
diff --git a/app/styles/_users.sass b/app/styles/modules/_users.sass
similarity index 93%
rename from app/styles/_users.sass
rename to app/styles/modules/_users.sass
index df72779..9d290e8 100644
--- a/app/styles/_users.sass
+++ b/app/styles/modules/_users.sass
@@ -45,12 +45,12 @@ $user-size: 76px
         color: #606060
         padding-bottom: 4px
       .user-email
-        font-size: 10px
+        font-size: 1rem
         +ellipsis
       .user-label
-        font-size: 14px
+        font-size: 1.4rem
       .user-id
-        font-size: 10px
+        font-size: 1rem
         color: #808080
       .user-connection-status
         display: inline-block
@@ -68,12 +68,11 @@ $user-size: 76px
       select
         +appearance(none)
         border: none
-        font-size: 10px
-        font-family: "Helvetica Neue", sans-serif
+        font-size: 1rem
         color: #808080
         padding-right: 10px
         outline: none
-        background: transparent image-url("/images/select-arrow.svg") no-repeat 66px 50%
+        background: transparent inline-image("select-arrow.svg") no-repeat 66px 50%
         // firefox fix - remove arrow from select
         text-indent: 0.01px
         text-overflow: ''
@@ -149,8 +148,6 @@ $user-size: 76px
           &::after
             opacity: 1
 
-
-
 +keyframes(shadow)
   0%
     opacity: 0