diff --git a/app/assets/images/alchemy/icon.svg b/app/assets/images/alchemy/icon.svg
index 9142582402..ed5a99352f 100644
--- a/app/assets/images/alchemy/icon.svg
+++ b/app/assets/images/alchemy/icon.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="-4 -6 32 32" class="svg-inline--fa fa-lg fa-fw"><path fill="currentColor" d="M15.7 7.9L9.9 2.2 2.1 4.3 0 12.1l5.7 5.8 7.8-2.1 2.2-7.9zm-5.3 10.3l-1.2 4.4 3.2 3.2 4.4-1.2 1.2-4.4-3.2-3.2-4.4 1.2zM23.5 7.3L17.2 9l-1.7 6.2 4.5 4.6 6.2-1.7 1.7-6.2-4.4-4.6z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-2 -6 32 32" class="svg-inline--fa fa-lg fa-fw"><path fill="currentColor" d="M15.7 7.9L9.9 2.2 2.1 4.3 0 12.1l5.7 5.8 7.8-2.1 2.2-7.9zm-5.3 10.3l-1.2 4.4 3.2 3.2 4.4-1.2 1.2-4.4-3.2-3.2-4.4 1.2zM23.5 7.3L17.2 9l-1.7 6.2 4.5 4.6 6.2-1.7 1.7-6.2-4.4-4.6z"/></svg>
diff --git a/app/assets/javascripts/alchemy/alchemy.sitemap.js.coffee b/app/assets/javascripts/alchemy/alchemy.sitemap.js.coffee
index c2acd68e43..731439b298 100644
--- a/app/assets/javascripts/alchemy/alchemy.sitemap.js.coffee
+++ b/app/assets/javascripts/alchemy/alchemy.sitemap.js.coffee
@@ -8,7 +8,7 @@ Alchemy.Sitemap =
   # Storing some objects.
   init: (options) ->
     @search_field = $(".search_input_field")
-    @filter_field_clear = $('.js_filter_field_clear')
+    @filter_field_clear = $('.search_field_clear')
     @display = $('#page_filter_result')
     @sitemap_wrapper = $('#sitemap-wrapper p.loading')
     @template = Handlebars.compile($('#sitemap-template').html())
diff --git a/app/assets/stylesheets/alchemy/_variables.scss b/app/assets/stylesheets/alchemy/_variables.scss
index 3f56048112..4fd0987e76 100644
--- a/app/assets/stylesheets/alchemy/_variables.scss
+++ b/app/assets/stylesheets/alchemy/_variables.scss
@@ -136,7 +136,8 @@ $table-row-even-background-color: $white !default;
 $table-row-odd-background-color: rgba($white, 0.5) !default;
 $table-row-hover-color: rgba($light_yellow, 0.5) !default;
 
-$elements-window-width: 400px !default;
+$elements-window-width: 22.5vw !default;
+$elements-window-min-width: 400px !default;
 $element-header-bg-color: $medium-gray !default;
 $top-menu-height: 75px !default;
 
@@ -158,3 +159,5 @@ $select-hover-bg-color: $dark-blue !default;
 $select-hover-text-color: $white !default;
 
 $thumbnail-background-color: opacify($default-border-color, 1) !default;
+$medium-screen-break-point: 700px;
+$large-screen-break-point: 1000px;
diff --git a/app/assets/stylesheets/alchemy/admin.scss b/app/assets/stylesheets/alchemy/admin.scss
index e31f8a9428..9c1ff425e2 100644
--- a/app/assets/stylesheets/alchemy/admin.scss
+++ b/app/assets/stylesheets/alchemy/admin.scss
@@ -19,6 +19,7 @@
 @import "alchemy/dashboard";
 @import "alchemy/elements";
 @import "alchemy/errors";
+@import "alchemy/filter_field";
 @import "alchemy/flash";
 @import "alchemy/fonts";
 @import "alchemy/forms";
diff --git a/app/assets/stylesheets/alchemy/archive.scss b/app/assets/stylesheets/alchemy/archive.scss
index afc78a92da..73568a9c6e 100644
--- a/app/assets/stylesheets/alchemy/archive.scss
+++ b/app/assets/stylesheets/alchemy/archive.scss
@@ -1,3 +1,15 @@
+.resources-header {
+  padding: 2*$default-padding;
+}
+
+.resources-table-wrapper {
+  padding-bottom: 60px;
+
+  &.with_tag_filter {
+    padding-right: 242px;
+  }
+}
+
 div#image_assign_filter_and_image_sizing {
   width: 100%;
   height: 40px;
@@ -27,7 +39,6 @@ div#image_assign_filter_and_image_sizing {
 .picture_thumbnail {
   margin: 2*$default-margin;
   background-color: #fff;
-  display: inline-block;
   position: relative;
   box-shadow: 0 0 0 1px $default-border-color;
   width: 160px;
@@ -77,10 +88,13 @@ div#image_assign_filter_and_image_sizing {
   }
 }
 
+#pictures,
+#overlay_picture_list {
+  display: flex;
+  flex-wrap: wrap;
+}
+
 #pictures {
-  margin-right: 232px;
-  padding-bottom: 60px;
-  overflow: hidden;
 
   .thumbnail_background {
     @include zoom-in;
diff --git a/app/assets/stylesheets/alchemy/dialogs.scss b/app/assets/stylesheets/alchemy/dialogs.scss
index 01c16e7bcb..0d29bfa930 100644
--- a/app/assets/stylesheets/alchemy/dialogs.scss
+++ b/app/assets/stylesheets/alchemy/dialogs.scss
@@ -59,7 +59,7 @@ $dialog-transition-duration: 150ms;
 .alchemy-dialog,
 .alchemy-image-overlay-dialog {
   position: relative;
-  max-width: 100%;
+  max-width: calc(100vw - 16px);
   display: inline-block;
   vertical-align: middle;
   text-align: left;
diff --git a/app/assets/stylesheets/alchemy/elements.scss b/app/assets/stylesheets/alchemy/elements.scss
index d7c4caae54..30a8591737 100644
--- a/app/assets/stylesheets/alchemy/elements.scss
+++ b/app/assets/stylesheets/alchemy/elements.scss
@@ -3,12 +3,12 @@
   right: 0;
   top: $top-menu-height;
   z-index: 20;
-  width: $elements-window-width;
+  width: calc(100vw - #{$collapsed-main-menu-width});
   height: calc(100vh - #{$top-menu-height});
   border-left: $default-border;
   background-color: $light-gray;
   transition: $transition-duration ease-in-out;
-  transform: translate3d($elements-window-width - $default-border-width, 0, 0);
+  transform: translate3d(100%, 0, 0);
 
   .elements-window-visible & {
     transform: translate3d(0, 0, 0);
@@ -18,12 +18,18 @@
   .mce-fullscreen & {
     width: calc(100vw - #{$collapsed-main-menu-width - $default-border-width});
   }
+
+  @media screen and (min-width: $large-screen-break-point) {
+    width: $elements-window-width;
+    min-width: $elements-window-min-width;
+  }
 }
 
 #element_area {
   height: calc(100vh - #{$top-menu-height + $toolbar-height});
   overflow-x: hidden;
   overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
 
   .sortable_cell {
     min-height: 100px;
@@ -389,6 +395,7 @@
   }
 
   .picture_thumbnail {
+    display: inline-block;
     width: 160px;
     margin: $default-margin 0;
     padding-bottom: 28px;
@@ -536,8 +543,8 @@ select.long {
   }
 
   label {
-    display: inline-block;
-    margin-bottom: 2px;
+    display: block;
+    margin: $default-margin 0;
     font-size: $small-font-size;
     line-height: 15px;
     text-indent: 1px;
@@ -557,7 +564,7 @@ select.long {
 
   &.essence_select {
 
-    label { margin-bottom: 4px }
+    label { margin-bottom: 2*$default-margin }
 
     .select2-container {
       width: 100%;
diff --git a/app/assets/stylesheets/alchemy/filter_field.scss b/app/assets/stylesheets/alchemy/filter_field.scss
new file mode 100644
index 0000000000..7a9ba47de5
--- /dev/null
+++ b/app/assets/stylesheets/alchemy/filter_field.scss
@@ -0,0 +1,30 @@
+.js_filter_field_box {
+  position: relative;
+  margin: $form-field-margin;
+
+  > .icon {
+    position: absolute;
+    left: 8px;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  .js_filter_field {
+    width: 100%;
+    padding-left: 28px;
+    padding-right: 24px;
+    margin: 0;
+  }
+
+  .js_filter_field_clear {
+    display: none;
+    position: absolute;
+    right: 4px;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 16px;
+    height: 16px;
+    line-height: 14px;
+    text-align: center;
+  }
+}
diff --git a/app/assets/stylesheets/alchemy/forms.scss b/app/assets/stylesheets/alchemy/forms.scss
index 1797b672a6..d7f353a80a 100644
--- a/app/assets/stylesheets/alchemy/forms.scss
+++ b/app/assets/stylesheets/alchemy/forms.scss
@@ -160,10 +160,14 @@ form {
 
   .control_group {
     width: $form-right-width;
-    padding-top: 0.6em;
+    padding-top: $default-margin;
     float: right;
   }
 
+  .check_boxes .control_group {
+    padding-top: 0.6em;
+  }
+
   .input .hint {
     @include form-hint;
     margin-left: $form-left-width;
diff --git a/app/assets/stylesheets/alchemy/frame.scss b/app/assets/stylesheets/alchemy/frame.scss
index 6c2fb049fc..94d88f507b 100644
--- a/app/assets/stylesheets/alchemy/frame.scss
+++ b/app/assets/stylesheets/alchemy/frame.scss
@@ -82,24 +82,16 @@ div#overlay_text_box {
 }
 
 #main_content {
-  padding: 84px 8px 8px $main-menu-width + 10px;
+  padding-top: 84px;
+  padding-right: 8px;
+  padding-bottom: 8px;
+  padding-left: $collapsed-main-menu-width + 8px;
   z-index: 0;
   width: 100%;
   height: 100%;
-}
-
-#archive_all {
-  height: 100%;
-
-  &.with_tag_filter {
 
-    table {
-      padding-right: 242px;
-    }
-
-    > .info {
-      margin-right: 242px;
-    }
+  @media screen and (min-width: $large-screen-break-point) {
+    padding-left: $main-menu-width + 8px;
   }
 }
 
diff --git a/app/assets/stylesheets/alchemy/navigation.scss b/app/assets/stylesheets/alchemy/navigation.scss
index dd4be71772..59cc869696 100644
--- a/app/assets/stylesheets/alchemy/navigation.scss
+++ b/app/assets/stylesheets/alchemy/navigation.scss
@@ -1,15 +1,17 @@
 #top_menu {
   position: fixed;
   top: 0;
-  margin-left: $main-menu-width;
-  padding-right: $main-menu-width;
+  margin-left: $collapsed-main-menu-width;
+  padding-right: $collapsed-main-menu-width;
   z-index: 20;
   width: 100%;
   @extend .disable-user-select;
 
-  .collapsed-menu & {
-    margin-left: $collapsed-main-menu-width;
-    padding-right: $collapsed-main-menu-width;
+  @media screen and (min-width: $large-screen-break-point) {
+    body:not(.collapsed-menu) & {
+      margin-left: $main-menu-width;
+      padding-right: $main-menu-width;
+    }
   }
 }
 
@@ -19,68 +21,27 @@
   position: fixed;
   top: 0;
   left: 0;
-  width: $main-menu-width;
+  width: $collapsed-main-menu-width;
   background-color: $main-menu-bg-color;
   @extend .disable-user-select;
 
-  .collapsed-menu & {
-    width: $collapsed-main-menu-width;
-
-    .main_navi_entry.has_sub_navigation label {
-      display: none;
-    }
-
-    label {
-      visibility: hidden;
-      opacity: 0;
-      background-color: $main-menu-active-bg-color;
-      transition: opacity $transition-duration $transition-easing;
+  @media screen and (min-width: $large-screen-break-point) {
+    body:not(.collapsed-menu) & {
+      width: $main-menu-width;
     }
-
-    .main_navi_entry:not(.has_sub_navigation),
-    #logout {
-
-      &:hover label {
-        visibility: visible;
-        opacity: 1;
-      }
-
-      label {
-        position: absolute;
-        top: 0;
-        left: $collapsed-main-menu-width - 1;
-        width: $main-menu-width + 1;
-        padding-left: 4*$default-padding;
-      }
-    }
-  }
-
-  label {
-    vertical-align: middle;
-    padding-left: $default-padding;
-    cursor: pointer;
-    @include truncate($main-menu-entry-max-width);
-  }
-
-  img, .icon {
-    width: 24px;
-  }
-
-  img {
-    border-style: none;
-    height: 24px;
-    vertical-align: -0.6em;
-  }
-
-  .icon {
-    vertical-align: -0.15em;
-    color: inherit;
   }
 }
 
 #main_navi {
+  max-height: 100vh;
   padding-top: 28px;
   padding-bottom: 80px;
+
+  @media screen and (max-width: $medium-screen-break-point) {
+    overflow-x: hidden;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+  }
 }
 
 .main_navi_entry {
@@ -94,14 +55,10 @@
   &:hover {
     background-color: $main-menu-active-bg-color;
 
-    &:not(.active),
-    .collapsed-menu & {
-
-      .sub_navigation {
-        visibility: visible;
-        opacity: 1;
-        background-color: $main-menu-active-bg-color;
-      }
+    .sub_navigation {
+      visibility: visible;
+      opacity: 1;
+      background-color: $main-menu-active-bg-color;
     }
   }
 
@@ -123,6 +80,63 @@
     }
   }
 
+  label {
+    position: absolute;
+    top: 0;
+    left: $collapsed-main-menu-width - 1;
+    width: $main-menu-width + 1;
+    padding-left: 4*$default-padding;
+    visibility: hidden;
+    opacity: 0;
+    background-color: $main-menu-active-bg-color;
+    transition: opacity $transition-duration $transition-easing;
+    vertical-align: middle;
+    cursor: pointer;
+    @include truncate($main-menu-entry-max-width);
+
+    @media screen and (min-width: $large-screen-break-point) {
+      body:not(.collapsed-menu) & {
+        position: static;
+        width: auto;
+        visibility: visible;
+        opacity: 1;
+        padding-left: $default-padding;
+        background-color: transparent;
+      }
+    }
+  }
+
+  &.has_sub_navigation label {
+    display: none;
+
+    @media screen and (min-width: $large-screen-break-point) {
+      body:not(.collapsed-menu) & {
+        display: inline-block;
+      }
+    }
+  }
+
+  &:hover label {
+    visibility: visible;
+    opacity: 1;
+  }
+
+  img, .icon {
+    display: inline-block;
+    width: 24px;
+  }
+
+  img {
+    border-style: none;
+    height: 24px;
+    vertical-align: -0.6em;
+  }
+
+  .icon {
+    vertical-align: -0.15em;
+    color: inherit;
+  }
+
   a {
     display: block;
     padding-left: 3 * $default-padding;
@@ -140,47 +154,17 @@
   }
 }
 
-body:not(.collapsed-menu) {
-
-  .subnavi_tab a {
-    padding-top: 1px;
-  }
-
-  .main_navi_entry.active {
-
-    .sub_navigation {
-      position: static;
-      visibility: visible;
-      opacity: 1;
-      width: auto;
-    }
-
-    .subnavi_tab {
-      line-height: 24px;
-
-      a {
-        padding: 8px 4px 8px 44px;
-      }
-    }
-  }
-}
-
 .sub_navigation {
   position: absolute;
   width: $main-menu-width;
-  left: $main-menu-width;
+  left: $collapsed-main-menu-width;
   top: 0;
   visibility: hidden;
   opacity: 0;
   transition: opacity $transition-duration $transition-easing;
-
-  .collapsed-menu & {
-    left: $collapsed-main-menu-width;
-  }
 }
 
 .subnavi_tab {
-
   &:first-of-type {
     border-left: 1px solid $main-menu-active-bg-color;
     margin-left: -1px;
@@ -198,6 +182,31 @@ body:not(.collapsed-menu) {
   }
 }
 
+@media screen and (min-width: $large-screen-break-point) {
+  body:not(.collapsed-menu) {
+    .sub_navigation {
+      left: $main-menu-width;
+    }
+
+    .main_navi_entry.active {
+      .sub_navigation {
+        position: static;
+        visibility: visible;
+        opacity: 1;
+        width: auto;
+      }
+
+      .subnavi_tab {
+        line-height: 24px;
+
+        a {
+          padding: 8px 4px 8px 44px;
+        }
+      }
+    }
+  }
+}
+
 .locked_page {
   position: relative;
   float: left;
diff --git a/app/assets/stylesheets/alchemy/search.scss b/app/assets/stylesheets/alchemy/search.scss
index fe65588771..fb4b38dbb3 100644
--- a/app/assets/stylesheets/alchemy/search.scss
+++ b/app/assets/stylesheets/alchemy/search.scss
@@ -4,39 +4,20 @@
   height: 29px;
 }
 
-.search_field,
-.js_filter_field_box {
+.search_field {
   .fa-search {
     position: absolute;
     left: 8px;
     top: 9px;
   }
-}
-
-.js_filter_field_box {
-  position: absolute;
-  right: 4px;
-  top: 8px;
-
-  .js_filter_field {
-    width: 220px;
-    text-align: left;
-    border-radius: $default-border-radius;
-    padding: 3px 24px 3px 28px;
-    height: 29px;
-    margin: 0;
-  }
 
   label {
-    font-size: $small-font-size;
     display: block;
-    text-align: center;
-    padding-top: 3px;
+    height: inherit;
   }
 }
 
-.search_field_clear,
-.js_filter_field_clear {
+.search_field_clear {
   display: none;
   position: absolute;
   top: 7px;
@@ -50,8 +31,7 @@
 #toolbar,
 #overlay_toolbar {
 
-  .search_form,
-  .js_filter_field_box {
+  .search_form {
     position: absolute;
     top: 0;
     right: 0;
@@ -63,7 +43,7 @@
   }
 
   .search_input_field {
-    width: 150px;
+    width: 0;
     height: inherit;
     border: none;
     background-color: transparentize($form-field-background-color, 0.25);
@@ -77,6 +57,10 @@
     box-shadow: none;
     -webkit-appearance: none;
 
+    @media screen and (min-width: $medium-screen-break-point) {
+      width: 150px;
+    }
+
     &:focus {
       width: 250px;
       background-color: $form-field-background-color;
@@ -88,13 +72,11 @@
     }
   }
 
-  .search_field .icon,
-  .js_filter_field_box .icon {
+  .search_field .icon {
     top: 18px;
   }
 
-  .search_field_clear,
-  .js_filter_field_clear {
+  .search_field_clear {
     top: 16px;
   }
 }
diff --git a/app/assets/stylesheets/alchemy/tables.scss b/app/assets/stylesheets/alchemy/tables.scss
index a415defb85..30f97b3a72 100644
--- a/app/assets/stylesheets/alchemy/tables.scss
+++ b/app/assets/stylesheets/alchemy/tables.scss
@@ -186,26 +186,3 @@ td#user_roles {
     min-width: 40%;
   }
 }
-
-.resources-table-wrapper {
-  padding-top: 50px;
-
-  table {
-    padding-bottom: 60px;
-  }
-}
-
-.resources-header {
-  position: fixed;
-  width: 100%;
-  top: $top-menu-height;
-  left: $main-menu-width + 9px;
-  z-index: 2;
-  margin: 0 -8px;
-  padding: 8px 16px;
-  background-color: $light-gray;
-
-  > h2, > h3 {
-    margin-bottom: 0;
-  }
-}
diff --git a/app/assets/stylesheets/alchemy/tags.scss b/app/assets/stylesheets/alchemy/tags.scss
index 732f91b782..3371ebb0cb 100644
--- a/app/assets/stylesheets/alchemy/tags.scss
+++ b/app/assets/stylesheets/alchemy/tags.scss
@@ -23,7 +23,6 @@
     transition: background-color $transition-duration;
 
     input {
-      width: 200px;
       background-color: transparentize($white, 0.25);
 
       &:focus {
@@ -34,14 +33,10 @@
     label { display: none }
   }
 
-  .js_filter_field_clear {
-    right: 4px;
-  }
-
   ul {
     list-style-type: none;
     padding: 0;
-    margin: 40px 0 4px 0;
+    margin: 44px 0 4px 0;
     height: 100%;
     width: 200px;
     overflow-x: hidden;
@@ -112,8 +107,9 @@
 }
 
 #tags_tag_list {
-  text-align: left;
-  padding-top: 5px;
+  .js_filter_field_box {
+    margin-top: 0;
+  }
 
   ul.tags {
     max-height: 10em;
@@ -146,25 +142,6 @@
       }
     }
   }
-
-  .js_filter_field_box {
-    position: relative;
-    top: 0;
-    right: 0;
-    margin: 0;
-
-    .js_filter_field {
-      width: 100%;
-    }
-
-    label {
-      display: none
-    }
-  }
-
-  .js_filter_field_clear {
-    right: 4px;
-  }
 }
 
 .tag_list, .autocomplete_tag_list {
diff --git a/app/assets/stylesheets/alchemy/toolbar.scss b/app/assets/stylesheets/alchemy/toolbar.scss
index 7970ff0cdf..43de655b8f 100644
--- a/app/assets/stylesheets/alchemy/toolbar.scss
+++ b/app/assets/stylesheets/alchemy/toolbar.scss
@@ -24,12 +24,22 @@
 .toolbar_buttons {
   margin-right: 8px;
   white-space: nowrap;
+  overflow-x: auto;
+  overflow-y: visible;
+  max-width: calc(100vw - #{$collapsed-main-menu-width + 65px});
+  -webkit-overflow-scrolling: touch;
+
+  @media screen and (min-width: $medium-screen-break-point) {
+    overflow: visible;
+  }
 
   &.right {
     position: absolute;
-    right: 0;
-    top: 8px;
+    right: -8px;
+    top: 0;
     margin-left: 8px;
+    padding: 8px;
+    background-color: $toolbar-bg-color;
 
     label {
       left: auto;
diff --git a/app/helpers/alchemy/admin/base_helper.rb b/app/helpers/alchemy/admin/base_helper.rb
index f8335dd02c..e97979d472 100644
--- a/app/helpers/alchemy/admin/base_helper.rb
+++ b/app/helpers/alchemy/admin/base_helper.rb
@@ -106,7 +106,6 @@ def js_filter_field(items, options = {})
           concat text_field_tag(nil, nil, options)
           concat render_icon(:search)
           concat link_to(render_icon(:times, size: 'xs'), '', class: 'js_filter_field_clear', title: Alchemy.t(:click_to_show_all))
-          concat content_tag(:label, Alchemy.t(:search), for: options[:id])
         end
       end
 
diff --git a/app/views/alchemy/admin/pages/index.html.erb b/app/views/alchemy/admin/pages/index.html.erb
index a571ed2c78..ac01635547 100644
--- a/app/views/alchemy/admin/pages/index.html.erb
+++ b/app/views/alchemy/admin/pages/index.html.erb
@@ -45,16 +45,20 @@
     <label><%= Alchemy.t('Show clipboard') %></label>
   </div>
 </div>
-<div class="js_filter_field_box">
-  <%= text_field_tag 'filter', '',
-    class: 'thin_border js_filter_field search_input_field',
-    placeholder: Alchemy.t(:search),
-    id: nil %>
-  <%= render_icon :search %>
-  <%= link_to(render_icon(:times, size: 'xs'), '#', {
-    class: "js_filter_field_clear",
-    title: Alchemy.t(:click_to_show_all)
-  }) %>
+<div class="search_form">
+  <div class="search_field">
+    <label>
+      <%= text_field_tag 'filter', '',
+        class: 'search_input_field',
+        placeholder: Alchemy.t(:search),
+        id: nil %>
+      <%= render_icon :search %>
+    </label>
+    <%= link_to(render_icon(:times, size: 'xs'), '#', {
+      class: "search_field_clear",
+      title: Alchemy.t(:click_to_show_all)
+    }) %>
+  </div>
 </div>
 <% end %>
 
diff --git a/app/views/alchemy/admin/partials/_remote_search_form.html.erb b/app/views/alchemy/admin/partials/_remote_search_form.html.erb
index 03780cb8bc..2aed629b6c 100644
--- a/app/views/alchemy/admin/partials/_remote_search_form.html.erb
+++ b/app/views/alchemy/admin/partials/_remote_search_form.html.erb
@@ -6,11 +6,13 @@
   <%= hidden_field_tag("element_id", @element.blank? ? "" : @element.id) %>
   <%= hidden_field_tag("content_id", @content.blank? ? "" : @content.id) %>
   <div class="search_field">
-    <%= render_icon('search') %>
-    <%= f.search_field resource_handler.search_field_name,
-      placeholder: Alchemy.t(:search),
-      class: 'search_input_field',
-      id: nil %>
+    <label>
+      <%= render_icon('search') %>
+      <%= f.search_field resource_handler.search_field_name,
+        placeholder: Alchemy.t(:search),
+        class: 'search_input_field',
+        id: nil %>
+    </label>
     <%= link_to render_icon(:times, size: 'xs'), url_for(
         action: 'index',
         element_id: @element.blank? ? '' : @element.id,
diff --git a/app/views/alchemy/admin/partials/_search_form.html.erb b/app/views/alchemy/admin/partials/_search_form.html.erb
index 3067d239eb..995ef95dea 100644
--- a/app/views/alchemy/admin/partials/_search_form.html.erb
+++ b/app/views/alchemy/admin/partials/_search_form.html.erb
@@ -2,10 +2,12 @@
 
 <%= search_form_for @query, url: url, class: 'search_form' do |f| %>
   <div class="search_field">
-    <%= render_icon('search') %>
-    <%= f.search_field resource_handler.search_field_name,
-      class: 'search_input_field',
-      placeholder: Alchemy.t(:search) %>
+    <label>
+      <%= render_icon('search') %>
+      <%= f.search_field resource_handler.search_field_name,
+        class: 'search_input_field',
+        placeholder: Alchemy.t(:search) %>
+    </label>
     <% local_assigns.fetch(:additional_query_fields, []).each do |field| %>
       <%= f.hidden_field field %>
     <% end %>
diff --git a/app/views/alchemy/admin/pictures/index.html.erb b/app/views/alchemy/admin/pictures/index.html.erb
index 571fdb6fb2..572a171c3a 100644
--- a/app/views/alchemy/admin/pictures/index.html.erb
+++ b/app/views/alchemy/admin/pictures/index.html.erb
@@ -55,7 +55,7 @@
     additional_params: [:filter, :tagged_with, :size] %>
 <% end %>
 
-<div id="picture_archive" class="resources-table-wrapper">
+<div id="picture_archive" class="resources-table-wrapper with_tag_filter">
   <div class="resources-header">
     <h2>
       <%= @pictures.total_count %>
diff --git a/app/views/layouts/alchemy/admin.html.erb b/app/views/layouts/alchemy/admin.html.erb
index e02cf05999..d8ac6b27f1 100644
--- a/app/views/layouts/alchemy/admin.html.erb
+++ b/app/views/layouts/alchemy/admin.html.erb
@@ -2,6 +2,7 @@
 <html class="no-js">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <title><%= render_alchemy_title %></title>
     <link rel="shortcut icon" href="<%= asset_path('alchemy/favicon.ico') %>">
     <%= csrf_meta_tag %>