diff --git a/src/js/directives/common.js b/src/js/directives/common.js
index ec6ed34..f858541 100644
--- a/src/js/directives/common.js
+++ b/src/js/directives/common.js
@@ -1,129 +1,143 @@
-'use strict';
+define(function(require) {
+    'use strict';
 
-var ngModule = angular.module('woDirectives', []);
+    var angular = require('angular');
 
-ngModule.directive('woTouch', function($parse) {
-    var className = 'wo-touch-active';
+    var ngModule = angular.module('woDirectives', []);
 
-    return function(scope, elm, attrs) {
-        var handler = $parse(attrs.woTouch);
+    ngModule.directive('woTouch', function($parse) {
+        var className = 'wo-touch-active';
 
-        elm.on('touchstart', function() {
-            elm.addClass(className);
-        });
-        elm.on('touchleave touchcancel touchmove touchend', function() {
-            elm.removeClass(className);
-        });
+        return function(scope, elm, attrs) {
+            var handler = $parse(attrs.woTouch);
 
-        elm.on('click', function(event) {
-            elm.removeClass(className);
-            scope.$apply(function() {
-                handler(scope, {
-                    $event: event
+            elm.on('touchstart', function() {
+                elm.addClass(className);
+            });
+            elm.on('touchleave touchcancel touchmove touchend', function() {
+                elm.removeClass(className);
+            });
+
+            elm.on('click', function(event) {
+                elm.removeClass(className);
+                scope.$apply(function() {
+                    handler(scope, {
+                        $event: event
+                    });
                 });
             });
-        });
-    };
-});
+        };
+    });
 
-ngModule.directive('woTooltip', function($document, $timeout) {
-    return function(scope, elm, attrs) {
-        var selector = attrs.woTooltip;
-        var tooltip = $document.find(selector);
+    ngModule.directive('woTooltip', function($document, $timeout) {
+        return function(scope, elm, attrs) {
+            var selector = attrs.woTooltip;
+            var tooltip = $document.find(selector);
 
-        elm.on('mouseover', function() {
-            // Compute tooltip position
-            var offsetElm = elm.offset();
-            var offsetTooltipParent = tooltip.offsetParent().offset();
+            elm.on('mouseover', function() {
+                // Compute tooltip position
+                var offsetElm = elm.offset();
+                var offsetTooltipParent = tooltip.offsetParent().offset();
 
-            // Set tooltip position
-            tooltip[0].style.top = (offsetElm.top - offsetTooltipParent.top +
-                elm[0].offsetHeight / 2 - tooltip[0].offsetHeight / 2) + 'px';
-            tooltip[0].style.left = (offsetElm.left - offsetTooltipParent.left +
-                elm[0].offsetWidth) + 'px';
+                // Set tooltip position
+                tooltip[0].style.top = (offsetElm.top - offsetTooltipParent.top +
+                    elm[0].offsetHeight / 2 - tooltip[0].offsetHeight / 2) + 'px';
+                tooltip[0].style.left = (offsetElm.left - offsetTooltipParent.left +
+                    elm[0].offsetWidth) + 'px';
 
-            // Wait till browser repaint
-            $timeout(function() {
-                tooltip.addClass('tooltip--show');
+                // Wait till browser repaint
+                $timeout(function() {
+                    tooltip.addClass('tooltip--show');
+                });
             });
-        });
 
-        elm.on('mouseout', function() {
-            tooltip.removeClass('tooltip--show');
-            tooltip[0].style.top = '-9999px';
-            tooltip[0].style.left = '-9999px';
-        });
-    };
-});
+            elm.on('mouseout', function() {
+                tooltip.removeClass('tooltip--show');
+                tooltip[0].style.top = '-9999px';
+                tooltip[0].style.left = '-9999px';
+            });
+        };
+    });
 
-ngModule.directive('woDropdown', function($document, $timeout) {
-    return function(scope, elm, attrs) {
-        var selector = attrs.woDropdown;
-        var position = attrs.woDropdownPosition;
-        var dropdown = $document.find(selector);
+    ngModule.directive('woDropdown', function($document, $timeout) {
+        return function(scope, elm, attrs) {
+            var selector = attrs.woDropdown;
+            var position = (attrs.woDropdownPosition || '').split(' ');
+            var dropdown = $document.find(selector);
 
-        function appear() {
-            // Compute dropdown position
-            var offsetElm = elm.offset();
-            var offsetDropdownParent = dropdown.offsetParent().offset();
+            function appear() {
+                // Compute dropdown position
+                var offsetElm = elm.offset();
+                var offsetDropdownParent = dropdown.offsetParent().offset();
 
-            // Set dropdown position
-            dropdown[0].style.top = (offsetElm.top - offsetDropdownParent.top +
-                elm[0].offsetHeight) + 'px';
-            switch (position) {
-            case 'center':
-                dropdown[0].style.left = (offsetElm.left - offsetDropdownParent.left +
+                // Set dropdown position
+                switch(position[1]) {
+                case 'up':
+                    dropdown[0].style.top = (offsetElm.top - offsetDropdownParent.top -
+                        dropdown[0].offsetHeight - 3) + 'px';
+                    break;
+                default:
+                    dropdown[0].style.top = (offsetElm.top - offsetDropdownParent.top +
+                        elm[0].offsetHeight + 3) + 'px';
+                }
+
+                switch(position[0]) {
+                case 'center':
+                    dropdown[0].style.left = (offsetElm.left - offsetDropdownParent.left +
                         elm[0].offsetWidth / 2 - dropdown[0].offsetWidth / 2) + 'px';
-                break;
-            case 'right':
-                dropdown[0].style.left = (offsetElm.left - offsetDropdownParent.left +
+                    break;
+                case 'right':
+                    dropdown[0].style.left = (offsetElm.left - offsetDropdownParent.left +
                         elm[0].offsetWidth - dropdown[0].offsetWidth) + 'px';
-                break;
-            default:
-                dropdown[0].style.left = (offsetElm.left - offsetDropdownParent.left) + 'px';
+                    break;
+                default:
+                    dropdown[0].style.left = (offsetElm.left - offsetDropdownParent.left) + 'px';
+                }
+
+                // Wait till browser repaint
+                $timeout(function() {
+                    dropdown.addClass('dropdown--show');
+                });
+
+                // class on element to change style if drowdown is visible
+                elm.addClass('wo-dropdown-active');
             }
 
-            // Wait till browser repaint
-            $timeout(function() {
-                dropdown.addClass('dropdown--show');
+            function disappear() {
+                dropdown.removeClass('dropdown--show');
+                dropdown[0].style.top = '-9999px';
+                dropdown[0].style.left = '-9999px';
+
+                elm.removeClass('wo-dropdown-active');
+            }
+
+            function toggle() {
+                if(dropdown.hasClass('dropdown--show')) {
+                    disappear();
+                }
+                else {
+                    appear();
+                }
+            }
+
+            elm.on('touchstart click', toggle);
+
+            // close if user clicks outside of dropdown and elm
+            $document.on('touchstart.woDropdown click.woDropdown', function(e) {
+                var t = angular.element(e.target);
+                if(dropdown.hasClass('dropdown--show') &&
+                    !t.closest(dropdown).length &&
+                    !t.closest(elm).length) {
+                    disappear();
+                }
             });
 
-            // class on element to change style if drowdown is visible
-            elm.addClass('wo-dropdown-active');
-        }
+            // remove event listener on document
+            scope.$on('$destroy', function() {
+                $document.off('touchstart.woDropdown click.woDropdown');
+            });
+        };
+    });
 
-        function disappear() {
-            dropdown.removeClass('dropdown--show');
-            dropdown[0].style.top = '-9999px';
-            dropdown[0].style.left = '-9999px';
-
-            elm.removeClass('wo-dropdown-active');
-        }
-
-        function toggle() {
-            if (dropdown.hasClass('dropdown--show')) {
-                disappear();
-            } else {
-                appear();
-            }
-        }
-
-        elm.on('touchstart click', toggle);
-
-        // close if user clicks outside of dropdown and elm
-        $document.on('touchstart.woDropdown click.woDropdown', function(e) {
-            var t = angular.element(e.target);
-            if (!t.closest(dropdown).length &&
-                !t.closest(elm).length) {
-                disappear();
-            }
-        });
-
-        // remove event listener on document
-        scope.$on('$destroy', function() {
-            $document.off('touchstart.woDropdown click.woDropdown');
-        });
-    };
-});
-
-module.exports = ngModule;
\ No newline at end of file
+    return ngModule;
+});
\ No newline at end of file
diff --git a/src/sass/all.scss b/src/sass/all.scss
index e87f238..f32dd07 100755
--- a/src/sass/all.scss
+++ b/src/sass/all.scss
@@ -16,7 +16,7 @@
 
 // Utilities classes
 
-@import "mixins/responsive";
+@import "utilities/responsive";
 
 // Components (TODO: refactor to BEM)
 @import "components/lightbox";
diff --git a/src/sass/blocks/basics/_dropdown.scss b/src/sass/blocks/basics/_dropdown.scss
index b34342d..005cb5c 100644
--- a/src/sass/blocks/basics/_dropdown.scss
+++ b/src/sass/blocks/basics/_dropdown.scss
@@ -10,7 +10,7 @@
     background: $color-bg;
     color: $color-main;
     border: 1px solid $color-main;
-    margin: 2px 0 0;
+    margin: 0;
     padding: 0;
     list-style: none;
     will-change: opacity, transform;
diff --git a/src/sass/blocks/basics/_toolbar.scss b/src/sass/blocks/basics/_toolbar.scss
index e6c6f35..2e7950e 100644
--- a/src/sass/blocks/basics/_toolbar.scss
+++ b/src/sass/blocks/basics/_toolbar.scss
@@ -38,6 +38,9 @@
 
         & > li {
             flex-grow: 1;
+            .btn-icon-light {
+                width: 100%;
+            }
         }
 
         @include respond-to(md) {
diff --git a/src/sass/utilities/_responsive.scss b/src/sass/utilities/_responsive.scss
index dbb4279..974dfbd 100644
--- a/src/sass/utilities/_responsive.scss
+++ b/src/sass/utilities/_responsive.scss
@@ -2,35 +2,35 @@
 
 .u-visible-sm {
     @include respond-to(md) {
-        display: none;
+        display: none !important;
     }
 }
 .u-visible-md {
     @include respond-to(sm-only) {
-        display: none;
+        display: none !important;
     }
     @include respond-to(lg) {
-        display: none;
+        display: none !important;
     }
 }
 .u-visible-lg {
     @include respond-to(not-lg) {
-        display: none;
+        display: none !important;
     }
 }
 
 .u-hidden-sm {
     @include respond-to(sm-only) {
-        display: none;
+        display: none !important;
     }
 }
 .u-hidden-md {
     @include respond-to(md-only) {
-        display: none;
+        display: none !important;
     }
 }
 .u-hidden-lg {
     @include respond-to(lg) {
-        display: none;
+        display: none !important;
     }
 }
\ No newline at end of file
diff --git a/src/tpl/read.html b/src/tpl/read.html
index 157673b..e9cf83e 100644
--- a/src/tpl/read.html
+++ b/src/tpl/read.html
@@ -23,7 +23,10 @@
           </button>
         </li>
         <li>
-          <button class="btn-icon-light" title="Move mail">
+          <button class="btn-icon-light u-visible-sm" title="Move mail" wo-dropdown="#read-dropdown-folder" wo-dropdown-position="center up">
+            <svg><use xlink:href="#icon-folder" /><title>Move mail</title></svg>
+          </button>
+          <button class="btn-icon-light u-hidden-sm" title="Move mail" wo-dropdown="#read-dropdown-folder" wo-dropdown-position="center">
             <svg><use xlink:href="#icon-folder" /><title>Move mail</title></svg>
           </button>
         </li>
@@ -33,7 +36,10 @@
           </button>
         </li>
         <li>
-          <button class="btn-icon-light" title="Reply to" wo-dropdown="#reply-selection" wo-dropdown-position="center">
+          <button class="btn-icon-light u-visible-sm" title="Reply to" wo-dropdown="#read-reply-selection" wo-dropdown-position="center up">
+            <svg><use xlink:href="#icon-reply_light" /><title>Reply to</title></svg>
+          </button>
+          <button class="btn-icon-light u-hidden-sm" title="Reply to" wo-dropdown="#read-reply-selection" wo-dropdown-position="center">
             <svg><use xlink:href="#icon-reply_light" /><title>Reply to</title></svg>
           </button>
         </li>
@@ -142,10 +148,14 @@
   </div>
 
   <!-- dropdowns -->
-  <ul id="reply-selection" class="dropdown">
+  <ul id="read-reply-selection" class="dropdown">
     <li><button wo-touch="state.writer.write(state.mailList.selected)"><svg><use xlink:href="#icon-reply_light" /></svg> Reply</button></li>
     <li><button wo-touch="state.writer.write(state.mailList.selected, true)"><svg><use xlink:href="#icon-reply_all_light" /></svg> Reply All</button></li>
     <li><button wo-touch="state.writer.write(state.mailList.selected, null, true)"><svg><use xlink:href="#icon-forward_light" /></svg> Forward</button></li>
   </ul>
+  <ul id="read-dropdown-folder" class="dropdown">
+    <li><button><svg><use xlink:href="#icon-folder" /></svg> Lorem</button></li>
+    <li><button><svg><use xlink:href="#icon-folder" /></svg> Ipsum</button></li>
+  </ul>
 
 </div>