diff --git a/customize.dist/src/less2/include/drive.less b/customize.dist/src/less2/include/drive.less
index 1debb223e..1aec980d0 100644
--- a/customize.dist/src/less2/include/drive.less
+++ b/customize.dist/src/less2/include/drive.less
@@ -216,6 +216,41 @@
     }
 
 
+    #cp-app-drive-search {
+        display: flex;
+        align-items: center;
+        max-width: 400px;
+        font-size: 30px;
+        margin: 15px;
+        input {
+            background: transparent;
+            color: @colortheme_drive-color;
+            .tools_placeholder-color(@colortheme_drive-color);
+            outline-width: 0px;
+            border-radius: 0;
+            width: 100%;
+            border: 0;
+            border-bottom: 3px solid @colortheme_drive-color;
+            margin: 0 5px;
+            flex: 1;
+            min-width: 0;
+            &:focus {
+                outline-width: 0px;
+            }
+            &.cp-app-drive-search-active {
+                & ~ .cp-app-drive-search-cancel {
+                    visibility: visible;
+                }
+            }
+        }
+        .cp-app-drive-search-cancel {
+            visibility: hidden;
+            cursor: pointer;
+        }
+        .cp-app-drive-tree-search-icon, .cp-app-drive-search-cancel {
+            color: @colortheme_drive-color;
+        }
+    }
 
 
 
@@ -310,51 +345,6 @@
         .cp-limit-container {
             margin-top: 5px;
         }
-        #cp-app-drive-tree-search {
-            text-align: center;
-            padding: 0;
-            position: relative;
-            display: flex;
-            background: @colortheme_drive-bg-light;
-            border-right: 1px solid @colortheme_drive-bg-light;
-            input {
-                background: transparent;
-                color: @colortheme_drive-color;
-                .tools_placeholder-color(@colortheme_drive-color);
-                outline-width: 0px;
-                border-radius: 0;
-                width: 100%;
-                //border: 1px solid #ccc;
-                border: 0;
-                //border-right: 0;
-                height: @variables_bar-height;
-                padding: 0 5px;
-                padding-left: 45px;
-                flex: 1;
-                min-width: 0;
-                &:focus {
-                    outline-width: 0px;
-                }
-                &.cp-app-drive-search-active {
-                    & ~ .cp-app-drive-tree-search-icon {
-                        display: none;
-                    }
-                    & ~ .cp-app-drive-search-cancel {
-                        display: inline-block;
-                    }
-                }
-            }
-            .cp-app-drive-search-cancel {
-                display: none;
-                cursor: pointer;
-            }
-            .cp-app-drive-tree-search-icon, .cp-app-drive-search-cancel {
-                color: @colortheme_drive-color;
-                position: absolute;
-                left: 20px; // TODO align with drive categories
-                top: 8px;
-            }
-        }
         .fa.cp-app-drive-icon-expcol {
             margin-left: -10px;
             font-size: 14px;
diff --git a/www/common/drive-ui.js b/www/common/drive-ui.js
index c94204827..2729c6fb0 100644
--- a/www/common/drive-ui.js
+++ b/www/common/drive-ui.js
@@ -3143,7 +3143,74 @@ define([
             });
         };
 
+        APP.Search = {};
+        var isCharacterKey = function (e) {
+            return e.which === "undefined" /* IE */ ||
+                    (e.which > 0 && e.which !== 13 && e.which !== 27 && !e.ctrlKey && !e.altKey);
+        };
         var displaySearch = function ($list, value) {
+            var search = APP.Search;
+            var isInSearch = currentPath[0] === SEARCH;
+            var $div = $('<div>', {'id': 'cp-app-drive-search', 'class': 'cp-unselectable'});
+
+            $searchIcon.clone().appendTo($div);
+
+            var $input = APP.Search.$input = $('<input>', {
+                id: 'cp-app-drive-search-input',
+                type: 'text',
+                draggable: false,
+                tabindex: 1,
+            }).keyup(function (e) {
+                if (search.to) { window.clearTimeout(search.to); }
+                if ($input.val().trim() === "") {
+                    search.cursor = 0;
+                    displayDirectory([SEARCH]);
+                    return;
+                }
+                if (e.which === 13) {
+                    var newLocation = [SEARCH, $input.val()];
+                    search.cursor = $input[0].selectionStart;
+                    if (!manager.comparePath(newLocation, currentPath.slice())) { displayDirectory(newLocation); }
+                    return;
+                }
+                if (e.which === 27) {
+                    $input.val('');
+                    search.cursor = 0;
+                    displayDirectory([SEARCH]);
+                    return;
+                }
+                if ($input.val()) {
+                    if (!$input.hasClass('cp-app-drive-search-active')) {
+                        $input.addClass('cp-app-drive-search-active');
+                    }
+                } else {
+                    $input.removeClass('cp-app-drive-search-active');
+                }
+                search.to = window.setTimeout(function () {
+                    var newLocation = [SEARCH, $input.val()];
+                    search.cursor = $input[0].selectionStart;
+                    if (!manager.comparePath(newLocation, currentPath.slice())) { displayDirectory(newLocation); }
+                }, 500);
+            }).on('click mousedown mouseup', function (e) {
+                e.stopPropagation();
+            }).val(value || '').appendTo($div);
+            if (value) { $input.addClass('cp-app-drive-search-active'); }
+            $input[0].selectionStart = search.cursor || 0;
+            $input[0].selectionEnd = search.cursor || 0;
+
+            var cancel = h('span.fa.fa-times.cp-app-drive-search-cancel', {title:Messages.cancel});
+            cancel.addEventListener('click', function () {
+                $input.val('');
+                search.cursor = 0;
+                displayDirectory([SEARCH]);
+            });
+            $div.append(cancel);
+
+            $list.append($div);
+            setTimeout(function () {
+                $input.focus();
+            });
+
             getFileListHeader(false).appendTo($list);
             $list.closest('#cp-app-drive-content-folder').addClass('cp-app-drive-content-list');
             var filesList = manager.search(value);
@@ -3434,18 +3501,6 @@ define([
 
             // Display the tree and build the content
             APP.resetTree();
-            if (displayedCategories.indexOf(SEARCH) !== -1 && $tree.find('#cp-app-drive-tree-search-input').length) {
-                // in history mode we want to focus the version number input
-                if (!history.isHistoryMode && !APP.mobile()) {
-                    var st = $tree.scrollTop() || 0;
-                    if (!$('.alertify').length) {
-                        $tree.find('#cp-app-drive-tree-search-input').focus();
-                    }
-                    $tree.scrollTop(st);
-                }
-                $tree.find('#cp-app-drive-tree-search-input')[0].selectionStart = getSearchCursor();
-                $tree.find('#cp-app-drive-tree-search-input')[0].selectionEnd = getSearchCursor();
-            }
 
             LS.setLastOpenedFolder(path);
 
@@ -3841,6 +3896,10 @@ define([
             name: OWNED_NAME,
             $icon: $ownedIcon
         };
+        categories[SEARCH] = {
+            name: Messages.fm_searchPlaceholder,
+            $icon: $searchIcon
+        };
         categories[TAGS] = {
             name: TAGS_NAME,
             $icon: $tagsIcon
@@ -3860,9 +3919,9 @@ define([
             var s = $categories.scrollTop() || 0;
 
             $tree.html('');
-            if (displayedCategories.indexOf(SEARCH) !== -1) { createSearch($tree); }
             var $div = $('<div>', {'class': 'cp-app-drive-tree-categories-container'})
                 .appendTo($tree);
+            if (displayedCategories.indexOf(SEARCH) !== -1) { createCategory($div, SEARCH); }
             if (displayedCategories.indexOf(TAGS) !== -1) { createCategory($div, TAGS); }
             if (displayedCategories.indexOf(RECENT) !== -1) { createCategory($div, RECENT); }
             if (displayedCategories.indexOf(OWNED) !== -1) { createCategory($div, OWNED); }
@@ -4461,19 +4520,6 @@ define([
                 return;
             }
         });
-        var isCharacterKey = function (e) {
-            return e.which === "undefined" /* IE */ ||
-                    (e.which > 0 && e.which !== 13 && e.which !== 27 && !e.ctrlKey && !e.altKey);
-        };
-        $appContainer.on('keypress', function (e) {
-            var $searchBar = $tree.find('#cp-app-drive-tree-search-input');
-            if ($searchBar.is(':focus')) { return; }
-            if (isCharacterKey(e)) {
-                $searchBar.focus();
-                e.preventDefault();
-                return;
-            }
-        });
         $appContainer.contextmenu(function () {
             APP.hideMenu();
             return false;