diff --git a/README.md b/README.md
index 6529722..e5b9274 100644
--- a/README.md
+++ b/README.md
@@ -4,11 +4,11 @@
     <a href="https://packagist.org/packages/ctf0/media-manager"><img src="https://img.shields.io/packagist/v/ctf0/media-manager.svg" alt="Latest Stable Version"/></a>
     <a href="https://packagist.org/packages/ctf0/media-manager"><img src="https://img.shields.io/packagist/dt/ctf0/media-manager.svg" alt="Total Downloads"/></a>
     <br>
-    <img src="https://badges.herokuapp.com/browsers?firefox=61&amp;microsoftedge=17&amp;googlechrome=51&amp;safari=10?&amp;iexplore=!?" alt="Browser Status"/>
+    <img src="https://badges.herokuapp.com/browsers?firefox=61&amp;microsoftedge=17&amp;googlechrome=51&amp;safari=10&amp;iexplore=!?" alt="Browser Status"/>
 </h1>
 
 <p align="center">
-    <img alt="main" src="https://user-images.githubusercontent.com/7388088/69991346-288b3480-1550-11ea-84d3-a5928d655d84.png"/>
+    <img alt="main" src="https://user-images.githubusercontent.com/7388088/70385131-c0937e80-1993-11ea-9513-cb5c90f4281b.png"/>
     <img alt="card" src="https://user-images.githubusercontent.com/7388088/46549215-892dcb80-c8d1-11e8-8c23-d8bbfe7a10cc.jpg"/>
     <img alt="img-filter" src="https://user-images.githubusercontent.com/7388088/46004313-dda3a080-c0b2-11e8-814a-af5b3953846f.jpg"/>
     <img alt="img-diff" src="https://user-images.githubusercontent.com/7388088/46004311-dd0b0a00-c0b2-11e8-82f1-d6c75235690f.jpg"/>
diff --git a/src/App/Controllers/Modules/GetContent.php b/src/App/Controllers/Modules/GetContent.php
index 22e1f0e..fc4a78c 100644
--- a/src/App/Controllers/Modules/GetContent.php
+++ b/src/App/Controllers/Modules/GetContent.php
@@ -25,7 +25,7 @@ public function getFiles(Request $request)
 
         return response()->json(
             array_merge(
-                $this->lockList($path),
+                $this->lockList(),
                 [
                     'files'  => [
                         'path'  => $path,
@@ -56,7 +56,7 @@ protected function getData($dir)
 
             if (!preg_grep($pattern, [$path])) {
                 if ($this->GFI) {
-                    $info = $this->getFolderInfo($path);
+                    $info = $this->getFolderInfoFromList($this->getFolderContent($path, true));
                 }
 
                 $list[] = [
@@ -95,7 +95,7 @@ protected function getData($dir)
     }
 
     /**
-     * helpers for folder ops.
+     * get directory data.
      *
      * @param mixed $folder
      * @param mixed $rec
@@ -109,23 +109,12 @@ protected function getFolderContent($folder, $rec = false)
         );
     }
 
-    protected function getFolderInfo($folder)
-    {
-        return $this->getFolderInfoFromList(
-            $this->getFolderContent($folder, true)
-        );
-    }
-
-    protected function getFolderInfoFromList($list)
-    {
-        $list = collect($list)->where('type', 'file');
-
-        return [
-            'count' => $list->count(),
-            'size'  => $list->pluck('size')->sum(),
-        ];
-    }
-
+    /**
+     * filter directory data by type.
+     *
+     * @param [type] $list
+     * @param [type] $type
+     */
     protected function getFolderListByType($list, $type)
     {
         $list   = collect($list)->where('type', $type);
@@ -137,8 +126,18 @@ protected function getFolderListByType($list, $type)
         return $items;
     }
 
-    protected function getDirectoriesList($location)
+    /**
+     * get folder size.
+     *
+     * @param [type] $list
+     */
+    protected function getFolderInfoFromList($list)
     {
-        return str_replace($location, '', $this->storageDisk->allDirectories($location));
+        $list = collect($list)->where('type', 'file');
+
+        return [
+            'count' => $list->count(),
+            'size'  => $list->pluck('size')->sum(),
+        ];
     }
 }
diff --git a/src/App/Controllers/Modules/Lock.php b/src/App/Controllers/Modules/Lock.php
index 63d9284..9ebe48d 100644
--- a/src/App/Controllers/Modules/Lock.php
+++ b/src/App/Controllers/Modules/Lock.php
@@ -12,9 +12,9 @@ trait Lock
      *
      * @param [type] $dirs
      */
-    public function getLockList(Request $request)
+    public function getLockList()
     {
-        return response()->json($this->lockList($request->path));
+        return response()->json($this->lockList());
     }
 
     /**
@@ -22,11 +22,10 @@ public function getLockList(Request $request)
      *
      * @param [type] $path
      */
-    public function lockList($path)
+    public function lockList()
     {
         return [
             'locked' => $this->db->pluck('path'),
-            'dirs'   => $this->getDirectoriesList($path),
         ];
     }
 
@@ -71,8 +70,7 @@ public function lockItem(Request $request)
 
         // broadcast
         broadcast(new MediaFileOpsNotifications([
-            'op'      => 'lock',
-            'path'    => $path,
+            'op' => 'lock',
         ]))->toOthers();
 
         return compact('result');
diff --git a/src/MediaRoutes.php b/src/MediaRoutes.php
index edd11f0..9330aa4 100644
--- a/src/MediaRoutes.php
+++ b/src/MediaRoutes.php
@@ -17,17 +17,16 @@ public static function routes()
             app('router')->post('upload-cropped', ['uses' => "$controller@uploadEditedImage", 'as' => 'uploadCropped']);
             app('router')->post('upload-link', ['uses' => "$controller@uploadLink", 'as' => 'uploadLink']);
 
-            app('router')->post('files', ['uses' => "$controller@getFiles", 'as' => 'files']);
-            app('router')->post('directories', ['uses' => "$controller@getFolders", 'as' => 'directories']);
-            app('router')->post('new-folder', ['uses' => "$controller@createNewFolder", 'as' => 'new_folder']);
+            app('router')->post('get-files', ['uses' => "$controller@getFiles", 'as' => 'get_files']);
+            app('router')->post('create-new-folder', ['uses' => "$controller@createNewFolder", 'as' => 'new_folder']);
             app('router')->post('delete-file', ['uses' => "$controller@deleteItem", 'as' => 'delete_file']);
             app('router')->post('move-file', ['uses' => "$controller@moveItem", 'as' => 'move_file']);
             app('router')->post('rename-file', ['uses' => "$controller@renameItem", 'as' => 'rename_file']);
-            app('router')->post('change-vis', ['uses' => "$controller@changeItemVisibility", 'as' => 'change_vis']);
+            app('router')->post('change-visibility', ['uses' => "$controller@changeItemVisibility", 'as' => 'change_vis']);
             app('router')->post('lock-file', ['uses' => "$controller@lockItem", 'as' => 'lock_file']);
 
             app('router')->get('global-search', ['uses' => "$controller@globalSearch", 'as' => 'global_search']);
-            app('router')->post('locked-list', ['uses' => "$controller@getLockList", 'as' => 'locked_list']);
+            app('router')->post('get-locked-list', ['uses' => "$controller@getLockList", 'as' => 'locked_list']);
 
             app('router')->post('folder-download', ['uses' => "$controller@downloadFolder", 'as' => 'folder_download']);
             app('router')->post('files-download', ['uses' => "$controller@downloadFiles", 'as' => 'files_download']);
diff --git a/src/resources/assets/js/components/globalSearch/button.vue b/src/resources/assets/js/components/globalSearch/button.vue
index 9570d9b..efe280c 100644
--- a/src/resources/assets/js/components/globalSearch/button.vue
+++ b/src/resources/assets/js/components/globalSearch/button.vue
@@ -3,7 +3,7 @@
             :disabled="loading || isLoading"
             :title="trans('glbl_search')"
             class="button"
-            @click="done ? showSearchPanel() : init()">
+            @click.stop="done ? showSearchPanel() : init()">
         <span class="icon">
             <icon :spin="loading"
                   name="globe"/>
diff --git a/src/resources/assets/js/components/globalSearch/panel.vue b/src/resources/assets/js/components/globalSearch/panel.vue
index e80bdc0..c79bc35 100644
--- a/src/resources/assets/js/components/globalSearch/panel.vue
+++ b/src/resources/assets/js/components/globalSearch/panel.vue
@@ -32,7 +32,7 @@
             <transition-group name="mm-gs"
                               tag="ul"
                               class="columns is-multiline is-marginless">
-                <li v-for="(item, i) in filterdList"
+                <li v-for="(item, i) in filterdFilesList"
                     :key="`${i}-${item.name}`"
                     class="column is-2">
                     <div class="card">
@@ -48,48 +48,25 @@
 
                             <div v-else
                                  class="glbl_search_panel">
-                                <icon v-if="fileTypeIs(item, 'folder')"
-                                      class="svg-prev-icon"
-                                      name="folder"
-                                      scale="5.0"/>
-                                <icon v-else-if="fileTypeIs(item, 'application')"
-                                      class="svg-prev-icon"
-                                      name="cogs"
-                                      scale="5.0"/>
-                                <icon v-else-if="fileTypeIs(item, 'video')"
-                                      class="svg-prev-icon"
-                                      name="film"
-                                      scale="5.0"/>
-                                <icon v-else-if="fileTypeIs(item, 'audio')"
-                                      class="svg-prev-icon"
-                                      name="music"
-                                      scale="5.0"/>
-                                <icon v-else-if="fileTypeIs(item, 'pdf')"
-                                      class="svg-prev-icon"
-                                      name="file-pdf-o"
-                                      scale="5.0"/>
-                                <icon v-else-if="fileTypeIs(item, 'text')"
-                                      class="svg-prev-icon"
-                                      name="file-text-o"
-                                      scale="5.0"/>
-                                <icon v-else-if="fileTypeIs(item, 'compressed')"
-                                      class="svg-prev-icon"
-                                      name="file-archive-o"
-                                      scale="5.0"/>
+                                <icon-types :file="item"
+                                            :file-type-is="fileTypeIs"
+                                            :scale="5"
+                                            classes="svg-prev-icon"
+                                            :except="['image']"/>
                             </div>
                         </div>
                         <div class="card-content">
                             <p v-tippy="{arrow: true, hideOnClick: false, followCursor: true}"
                                :title="linkCopied ? trans('copied') : trans('to_cp')"
                                class="title is-marginless link"
-                               @click="copyLink(item.path)"
+                               @click.stop="copyLink(item.path)"
                                @hidden="linkCopied = false">
                                 {{ item.name }}
                             </p>
                             <br>
 
                             <p class="subtitle is-marginless link"
-                               @click="goToFolder(item.dir_path, item.name)">
+                               @click.stop="goToFolder(item.dir_path, item.name)">
                                 <span class="icon"><icon name="folder"/></span>
                                 <span v-tippy
                                       :title="trans('go_to_folder')">{{ item.dir_path }}</span>
@@ -99,12 +76,12 @@
                                 <span>{{ item.last_modified_formated }}</span>
                             </time>
                             <p class="subtitle is-marginless link"
-                               @click="deleteItem(item, i)">
+                               @click.stop="deleteItem(item, i)">
                                 <span class="icon"><icon name="times"/></span>
                                 <span>{{ trans('delete') }}</span>
                             </p>
                             <p class="subtitle is-marginless link"
-                               @click="addToMovableList(item)">
+                               @click.stop="addToMovableList(item)">
                                 <span class="icon"><icon name="shopping-cart"/></span>
                                 <span>{{ inMovableList(item) ? trans('added') : trans('add_to_list') }}</span>
                             </p>
@@ -123,7 +100,7 @@
             </transition-group>
         </div>
         <button class="modal-close is-large"
-                @click="closePanel()"/>
+                @click.stop="closePanel()"/>
     </div>
 </template>
 
@@ -153,7 +130,7 @@ export default {
     data() {
         return {
             filesIndex: [],
-            filterdList: [],
+            filterdFilesList: [],
             search: '',
             noData: false,
             linkCopied: false,
@@ -169,7 +146,7 @@ export default {
             })
         },
         listCount() {
-            return this.filterdList.length
+            return this.filterdFilesList.length
         }
     },
     methods: {
@@ -187,7 +164,7 @@ export default {
             })
 
             EventHub.listen('global-search-deleted', (path) => {
-                let list = this.filterdList
+                let list = this.filterdFilesList
 
                 return list.some((e, i) => {
                     if (e.path == path) {
@@ -220,12 +197,12 @@ export default {
             let search = this.search
 
             if (search) {
-                this.filterdList = this.fuseLib.search(search)
+                this.filterdFilesList = this.fuseLib.search(search)
 
                 return this.noData = this.listCount ? false : true
             }
 
-            this.filterdList = []
+            this.filterdFilesList = []
         }, 500),
         ontransitionend() {
             this.noData = this.search && !this.listCount ? true : false
diff --git a/src/resources/assets/js/components/image/editor/controls.vue b/src/resources/assets/js/components/image/editor/controls.vue
index 7fb3b60..e63ab16 100644
--- a/src/resources/assets/js/components/image/editor/controls.vue
+++ b/src/resources/assets/js/components/image/editor/controls.vue
@@ -1,14 +1,15 @@
 <template>
     <div>
-        <button v-tippy="{arrow: true, theme: 'mm'}"
-                v-for="item in controlsList"
-                :class="{'is-active': item.mode ? dragModeIs(item.mode) : false}"
+        <button v-for="item in controlsList"
                 :key="item.op"
+                v-tippy="{arrow: true, theme: 'mm'}"
+                :class="{'is-active': item.mode ? dragModeIs(item.mode) : false}"
                 :title="trans(item.trans)"
                 :disabled="processing"
                 class="btn-plain"
-                @click="operations(item.op)">
-            <span class="icon"><icon :name="processing ? 'spinner' : item.icon" :pulse="processing"/></span>
+                @click.stop="operations(item.op)">
+            <span class="icon"><icon :name="processing ? 'spinner' : item.icon"
+                                     :pulse="processing"/></span>
         </button>
     </div>
 </template>
diff --git a/src/resources/assets/js/components/image/editor/filters/controls.vue b/src/resources/assets/js/components/image/editor/filters/controls.vue
index 79599b3..c477ab0 100644
--- a/src/resources/assets/js/components/image/editor/filters/controls.vue
+++ b/src/resources/assets/js/components/image/editor/filters/controls.vue
@@ -16,7 +16,7 @@
                         <div v-show="range != 0"
                              class="level-item">
                             <p class="heading is-marginless link"
-                               @click="resetFilter()">
+                               @click.stop="resetFilter()">
                                 <span class="icon"><icon name="times"/></span>
                             </p>
                         </div>
@@ -43,7 +43,7 @@
                 :class="{'is-active': isUsed()}"
                 :disabled="processing"
                 class="btn-plain"
-                @click="update()">
+                @click.stop="update()">
             <span class="icon">
                 <icon :name="processing ? 'spinner' : icon"
                       :pulse="processing"/>
diff --git a/src/resources/assets/js/components/image/editor/filters/presets.vue b/src/resources/assets/js/components/image/editor/filters/presets.vue
index 3f4311d..05d74ff 100644
--- a/src/resources/assets/js/components/image/editor/filters/presets.vue
+++ b/src/resources/assets/js/components/image/editor/filters/presets.vue
@@ -1,18 +1,24 @@
 <template>
     <div>
-        <h3 :style="{'opacity': processing ? 0.5 : 1}">{{ trans('presets') }}</h3>
+        <h3 :style="{'opacity': processing ? 0.5 : 1}">
+            {{ trans('presets') }}
+        </h3>
 
         <section>
-            <div v-for="(chunk, i) in chunkedItems" :key="i" class="col">
-                <button v-tippy="{arrow: true, theme: 'mm'}"
-                        v-for="item in chunk"
+            <div v-for="(chunk, i) in chunkedItems"
+                 :key="i"
+                 class="col">
+                <button v-for="item in chunk"
                         :key="item"
+                        v-tippy="{arrow: true, theme: 'mm'}"
                         :disabled="processing"
                         :class="{'is-active': isUsed(item)}"
                         :title="item"
                         class="btn-plain"
-                        @click="apply(item)">
-                    <span v-show="processing" class="icon is-small"><icon :pulse="processing" name="spinner"/></span>
+                        @click.stop="apply(item)">
+                    <span v-show="processing"
+                          class="icon is-small"><icon :pulse="processing"
+                                                      name="spinner"/></span>
                     <span v-show="!processing">{{ truncate(item) }}</span>
                 </button>
             </div>
diff --git a/src/resources/assets/js/components/image/editor/glitch/controls.vue b/src/resources/assets/js/components/image/editor/glitch/controls.vue
deleted file mode 100644
index 1a00262..0000000
--- a/src/resources/assets/js/components/image/editor/glitch/controls.vue
+++ /dev/null
@@ -1,98 +0,0 @@
-<template>
-    <div>
-        <button v-tippy="{html: '#contentpopup2', interactive: true, trigger: 'click', theme: 'mm'}"
-                :class="{'is-active': isUsed()}"
-                :disabled="processing"
-                class="btn-plain">
-            {{ name }}
-        </button>
-
-        <div id="contentpopup2">
-            <div class="level is-marginless">
-                <transition name="mm-list">
-                    <div v-show="range != 0" class="level-item">
-                        <p class="heading is-marginless link" @click="resetFilter()">
-                            <span class="icon"><icon name="times"/></span>
-                        </p>
-                    </div>
-                </transition>
-
-                <div class="level-item">
-                    <p class="title is-5 is-marginless">{{ range }}</p>
-                </div>
-            </div>
-
-            <input v-model.number="range"
-                   :min="min"
-                   :max="max"
-                   :step="step"
-                   :disabled="processing"
-                   type="range">
-        </div>
-    </div>
-</template>
-
-<script>
-import debounce from 'lodash/debounce'
-
-export default {
-    props: [
-        'name',
-        'max',
-        'min',
-        'step',
-        'default',
-        'processing',
-        'distort'
-    ],
-    data() {
-        return {
-            range: this.default,
-            wasReset: false
-        }
-    },
-    beforeMount() {
-        this.$options.name = `glitch-${this.name}`
-    },
-    mounted() {
-        EventHub.listen('random-glitch', () => {
-            this.randomizeValues()
-        })
-
-        EventHub.listen('reset-glitch', () => {
-            this.wasReset = true
-            this.resetFilter()
-            setTimeout(() => {
-                this.wasReset = false
-            }, 50)
-        })
-    },
-    methods: {
-        resetFilter() {
-            if (!this.processing) {
-                this.range = 0
-            }
-        },
-        randomizeValues() {
-            this.range = parseInt(Math.random() * (this.max - this.min) + this.min, 10)
-        },
-
-        // check
-        isUsed() {
-            return this.range != 0
-        },
-
-        // send changes
-        update(val) {
-            this.distort(this.name, val)
-        }
-    },
-    watch: {
-        range(val) {
-            if (!this.wasReset) {
-                this.update(val)
-            }
-        }
-    }
-}
-</script>
diff --git a/src/resources/assets/js/components/image/editor/glitch/index.vue b/src/resources/assets/js/components/image/editor/glitch/index.vue
deleted file mode 100644
index 93e68e0..0000000
--- a/src/resources/assets/js/components/image/editor/glitch/index.vue
+++ /dev/null
@@ -1,118 +0,0 @@
-<template>
-    <div>
-        <controls v-for="item in optionsList"
-                  :key="item.name"
-                  :min="item.min"
-                  :max="item.max"
-                  :step="item.step"
-                  :name="item.name"
-                  :default="item.default"
-                  :processing="processing"
-                  :distort="distort"
-                  class="__caman-filters"/>
-
-        <div class="__caman-filters">
-            <button :disabled="processing"
-                    class="btn-plain"
-                    @click="random()">
-                randomize
-            </button>
-        </div>
-    </div>
-</template>
-
-<script>
-const defaults = {
-    amount: 0,
-    iterations: 0,
-    quality: 1,
-    seed: 0
-}
-
-export default {
-    components: {
-        controls: require('./controls.vue').default
-    },
-    props: [
-        'cropper',
-        'getCropperData'
-    ],
-    data() {
-        return {
-            optionsList: [
-                {
-                    step: 1,
-                    min: 0,
-                    max: 99,
-                    default: defaults.amount,
-                    name: 'amount'
-                },
-                {
-                    step: 1,
-                    min: 0,
-                    max: 100,
-                    default: defaults.seed,
-                    name: 'seed'
-                },
-                {
-                    step: 1,
-                    min: 0,
-                    max: 100,
-                    default: defaults.iterations,
-                    name: 'iterations'
-                },
-                {
-                    step: 1,
-                    min: 1,
-                    max: 99,
-                    default: defaults.quality,
-                    name: 'quality'
-                }
-            ],
-            init: null,
-            options: defaults,
-            processing: false,
-            lib: null
-        }
-    },
-    mounted() {
-        new Promise((resolve) => {
-            this.init = this.getCropperData()
-
-            return resolve()
-        }).then(() => this.distort())
-
-        EventHub.listen('reset-glitch', () => {
-            this.cropper.replace(this.init, true)
-        })
-    },
-    methods: {
-        distort(name = null, val = null) {
-            this.processing = true
-            let img = new Image()
-
-            if (name && val) {
-                this.options[name] = val
-            }
-
-            this.$nextTick(() => {
-                img.onload = () => {
-                    glitch(this.options)
-                        .fromImage(img)
-                        .toDataURL()
-                        .then((dataURL) => {
-                            this.cropper.replace(dataURL, true)
-                            this.processing = false
-                            this.$parent.hasChanged = true
-                        })
-                }
-
-                img.src = this.init
-            })
-        },
-        random() {
-            EventHub.fire('random-glitch')
-        }
-    }
-}
-</script>
diff --git a/src/resources/assets/js/components/image/editor/main.vue b/src/resources/assets/js/components/image/editor/main.vue
index 5c7c09c..65a99ca 100644
--- a/src/resources/assets/js/components/image/editor/main.vue
+++ b/src/resources/assets/js/components/image/editor/main.vue
@@ -6,50 +6,35 @@
             <div class="__top-toolbar">
                 <section class="left">
                     <!-- filters -->
-                    <filters v-if="!showGlitch && !showDiff"
+                    <filters v-if="!showDiff"
                              :reset="!haveFilters()"
                              :apply-filter="applyFilter"
                              :processing="processing"
                              :caman-filters="camanFilters"
                              class="__left-index"/>
-
-                    <!-- glitch -->
-                    <!-- <glitch v-if="showGlitch"
-                            :cropper="imageCropper"
-                            :show-glitch="showGlitch"
-                            :get-cropper-data="getCropperData"
-                            class="__left-index"/> -->
                 </section>
 
                 <div class="right">
-                    <!-- glitch toggle -->
-                    <!-- <button v-show="!showDiff"
-                            :disabled="processing"
-                            :class="{'is-active': showGlitch}"
-                            class="btn-plain"
-                            @click="toggleGlitch()">
-                        <span class="icon"><icon name="glitch" scale="1.5"/></span>
-                    </button> -->
-
                     <!-- diff toggle -->
-                    <button v-if="showDiffBtn()"
-                            v-tippy="{arrow: true, theme: 'mm'}"
-                            :disabled="processing && !imageDiffIsReady || showGlitch"
+                    <button v-tippy="{arrow: true, theme: 'mm'}"
+                            :disabled="(processing && !imageDiffIsReady) || diffDisable"
                             :class="{'is-active': showDiff}"
                             :title="trans('diff')"
                             class="btn-plain"
-                            @click="toggleDiff()">
+                            @click.stop="toggleDiff()">
                         <span class="icon"><icon name="code"/></span>
                     </button>
 
                     <!-- reset filters -->
                     <button v-tippy="{arrow: true, theme: 'mm'}"
-                            :disabled="processing || !haveFilters() && !showGlitch"
+                            :disabled="processing || !haveFilters()"
                             :title="trans('crop_reset_filters')"
                             class="btn-plain"
-                            @click="resetFilters()">
-                        <span class="icon"><icon :name="processing ? 'spinner' : 'times'"
-                                                 :pulse="processing"/></span>
+                            @click.stop="resetFilters()">
+                        <span class="icon">
+                            <icon :name="processing ? 'spinner' : 'times'"
+                                  :pulse="processing"/>
+                        </span>
                     </button>
                 </div>
             </div>
@@ -112,9 +97,11 @@
                             :disabled="processing || !hasChanged"
                             :title="trans('crop_reset')"
                             class="btn-plain"
-                            @click="operations('reset')">
-                        <span class="icon"><icon :name="processing ? 'spinner' : 'times'"
-                                                 :pulse="processing"/></span>
+                            @click.stop="operations('reset')">
+                        <span class="icon">
+                            <icon :name="processing ? 'spinner' : 'times'"
+                                  :pulse="processing"/>
+                        </span>
                     </button>
 
                     <!-- clear -->
@@ -122,9 +109,11 @@
                             :disabled="processing || !croppedByUser"
                             :title="trans('clear')"
                             class="btn-plain"
-                            @click="operations('clear')">
-                        <span class="icon"><icon :name="processing ? 'spinner' : 'ban'"
-                                                 :pulse="processing"/></span>
+                            @click.stop="operations('clear')">
+                        <span class="icon">
+                            <icon :name="processing ? 'spinner' : 'ban'"
+                                  :pulse="processing"/>
+                        </span>
                     </button>
 
                     <!-- apply -->
@@ -132,9 +121,11 @@
                             :disabled="processing || !hasChanged"
                             :title="trans('crop_apply')"
                             class="btn-plain"
-                            @click="applyChanges()">
-                        <span class="icon"><icon :name="processing ? 'spinner' : 'check'"
-                                                 :pulse="processing"/></span>
+                            @click.stop="applyChanges()">
+                        <span class="icon">
+                            <icon :name="processing ? 'spinner' : 'check'"
+                                  :pulse="processing"/>
+                        </span>
                     </button>
                 </div>
             </div>
@@ -155,7 +146,6 @@ export default {
         filters: require('./filters/index.vue').default,
         presets: require('./filters/presets.vue').default,
         controls: require('./controls.vue').default,
-        // glitch: require('./glitch/index.vue').default,
         imageCompare: require('vue-image-compare2').default
     },
     props: [
@@ -176,7 +166,7 @@ export default {
             diffOriginal: null,
             diffCurrent: null,
             showDiff: false,
-            showGlitch: false,
+            diffDisable: true,
 
             hasChanged: false,
             processing: false,
@@ -210,7 +200,7 @@ export default {
             )
         },
         hiddenBtns() {
-            if (this.showDiff || this.showGlitch) {
+            if (this.showDiff) {
                 return {
                     opacity: 0,
                     visibility: 'hidden',
@@ -356,6 +346,7 @@ export default {
                 this.hasChanged = false
                 this.croppedByUser = false
                 this.reset = true
+                this.diffDisable = true
 
                 cropper.reset() // position, rotation, flip, zoom
                 cropper.clear() // selection
@@ -373,10 +364,7 @@ export default {
 
         // filters
         resetFilters() {
-            if (this.showGlitch) {
-                return EventHub.fire('reset-glitch')
-            }
-
+            this.diffDisable = true
             this.camanFilters = {}
             this.imageCaman.reset()
             this.imageCropper.replace(this.initData, true) // init
@@ -416,9 +404,6 @@ export default {
                 cropper.replace(this.toBase64(), true)
             })
         },
-        toggleGlitch() {
-            this.showGlitch = !this.showGlitch
-        },
 
         // save
         getCropperData(cropper = this.imageCropper) {
@@ -471,9 +456,6 @@ export default {
         },
 
         // diff
-        showDiffBtn() {
-            return !this.file.type.includes('gif')
-        },
         toggleDiff() {
             this.showDiff = !this.showDiff
         },
@@ -497,12 +479,12 @@ export default {
                 scaleY: y < 1 ? -y : y // reset flip-vertical
             })
 
-            if (this.haveFilters()) {
-                cropperClone.replace(this.initData, true)
-                this.diffOriginal = this.getCropperData(cropperClone)
-            } else {
+            cropperClone.replace(this.initData, true)
+
+            // make sure the returned original render is correct
+            setTimeout(() => {
                 this.diffOriginal = this.getCropperData(cropperClone)
-            }
+            }, 100)
         },
 
         // utils
@@ -520,6 +502,11 @@ export default {
         }
     },
     watch: {
+        hasChanged(val) {
+            if (val) {
+                this.diffDisable = false
+            }
+        },
         showDiff(val) {
             if (val) {
                 this.processing = true // hide main canvas
diff --git a/src/resources/assets/js/components/manager.vue b/src/resources/assets/js/components/manager.vue
index 8cc93b1..58bff6e 100644
--- a/src/resources/assets/js/components/manager.vue
+++ b/src/resources/assets/js/components/manager.vue
@@ -39,7 +39,8 @@ export default {
         usageIntroPanel: require('./usageIntro/panel.vue').default,
         uploadPreview: require('./utils/upload-preview.vue').default,
         InfiniteLoading: require('vue-infinite-loading').default,
-        filterAndSorting: require('./utils/filter-sort.vue').default
+        filterAndSorting: require('./toolbar/filter-sort.vue').default,
+        dirBookmarks: require('./toolbar/dir-bookmark.vue').default
     },
     name: 'media-manager',
     mixins: [
@@ -85,7 +86,7 @@ export default {
             disableShortCuts: false,
             firstMeta: false, // for alt + click selection
             firstRun: false, // deffer running logic on init
-            folderWarning: false,
+            folderDeleteWarning: false,
             imageWasEdited: false,
             infoSidebar: false,
             introIsOn: false,
@@ -94,13 +95,13 @@ export default {
             loading_files: false,
             no_files: false,
             no_search: false,
-            randomNames: false,
+            useRandomNamesForUpload: false,
             showProgress: false,
-            smallScreen: false,
+            isASmallScreen: false,
             toolBar: true,
             uploadArea: false,
             waitingForUpload: false,
-            useCopy: false,
+            copyFilesNotMove: false,
             uploadPreviewOptionsPanelIsVisible: false,
             globalSearchPanelIsVisible: false,
 
@@ -116,23 +117,24 @@ export default {
             selectedFile: null,
             global_search_item: null,
             urlToUpload: null,
-            selectedUploadPreview: null,
+            selectedUploadPreviewName: null,
 
+            audioFileMeta: {},
             movableList: [],
             bulkList: [],
             dimensions: [],
             files: [],
-            filterdList: [],
+            filterdFilesList: [],
             folders: [],
             uploadPreviewList: [],
             uploadPreviewNamesList: [],
             uploadPreviewOptionsList: [],
+            dirBookmarks: [],
             player: {
                 item: null,
                 fs: false,
                 playing: false
             },
-            audioFileMeta: {},
             lockedList: [],
             uploadPanelGradients: [
                 'linear-gradient(141deg, #009e6c 0, #00d1b2 71%, #00e7eb 100%)',
@@ -143,7 +145,7 @@ export default {
                 'linear-gradient(141deg, #1f191a 0, #363636 71%, #46403f 100%)'
             ],
             progressCounter: 0,
-            scrollByRows: 0
+            scrollByRowItemsCount: 0
         }
     },
     created() {
@@ -261,12 +263,15 @@ export default {
                 this.global_search_item = data
 
                 this.fileTypeIs(data, 'folder')
-                    ? this.folderWarning = true
-                    : this.folderWarning = false
+                    ? this.folderDeleteWarning = true
+                    : this.folderDeleteWarning = false
 
                 this.deleteItem()
             })
 
+            EventHub.listen('dir-bookmarks-update', (data) => {
+                this.dirBookmarks = data
+            })
         },
 
         shortCuts(e) {
@@ -400,7 +405,7 @@ export default {
                         }
 
                         // toggle file details sidebar
-                        if (key == 't' && !this.smallScreen) {
+                        if (key == 't' && !this.isASmallScreen) {
                             this.toggleInfoSidebar()
                             this.saveUserPref()
                         }
@@ -470,6 +475,7 @@ export default {
                 this.clearUrlQuery()
                 this.clearLs()
                 this.ajaxError(false)
+                this.showNotif('Cache Cleared')
             }
         },
         moveItem() {
@@ -493,14 +499,14 @@ export default {
 
                     if (!this.isBulkSelecting() && this.selectedFile) {
                         this.selectedFileIs('folder')
-                            ? this.folderWarning = true
-                            : this.folderWarning = false
+                            ? this.folderDeleteWarning = true
+                            : this.folderDeleteWarning = false
                     }
 
                     if (this.bulkItemsCount) {
                         this.bulkItemsFilter.some((item) => {
                             if (this.fileTypeIs(item, 'folder')) {
-                                return this.folderWarning = true
+                                return this.folderDeleteWarning = true
                             }
                         })
                     }
diff --git a/src/resources/assets/js/components/toolbar/dir-bookmark.vue b/src/resources/assets/js/components/toolbar/dir-bookmark.vue
new file mode 100644
index 0000000..fd86927
--- /dev/null
+++ b/src/resources/assets/js/components/toolbar/dir-bookmark.vue
@@ -0,0 +1,158 @@
+<template>
+    <my-dropdown :disabled="disabled">
+        <template v-slot:title>
+            <span v-show="bmCount"
+                  class="has-text-danger">{{ bmCount }}</span>
+            <span>{{ trans('bm') }}</span>
+        </template>
+
+        <template v-slot:content>
+            <!-- list -->
+            <div v-for="(item, i) in bookmarks"
+                 :key="item.dir"
+                 class="dropdown-item">
+                <div class="tags has-addons">
+                    <!-- name -->
+                    <span v-if="!isCurrent(item.dir)"
+                          v-tippy="{arrow: true, position: 'left'}"
+                          :title="goTo(item.dir)"
+                          class="tag is-link is-primary link"
+                          @click.stop="goToFolder(item.dir)">
+                        {{ getName(item.name) }}
+                    </span>
+                    <span v-else
+                          class="tag is-dark disabled">{{ getName(item.name) }}</span>
+
+                    <!-- remove -->
+                    <a class="tag is-danger is-delete"
+                       @click.stop="removeFromBookmarks(i)"/>
+                </div>
+            </div>
+
+            <!-- ops -->
+            <div class="dropdown-item btns">
+                <div class="field has-addons">
+                    <!-- add -->
+                    <p v-if="!inBookmarks"
+                       class="control">
+                        <button type="button"
+                                class="button is-small is-light is-primary"
+                                @click.stop="addToBookmarks()">
+                            {{ trans('add_to_list') }}
+                        </button>
+                    </p>
+
+                    <!-- reset -->
+                    <p class="control">
+                        <button type="button"
+                                :disabled="!bmCount"
+                                class="button is-danger is-small is-light"
+                                @click.stop="clearBookmarks()">
+                            {{ trans('reset') }}
+                        </button>
+                    </p>
+                </div>
+            </div>
+        </template>
+    </my-dropdown>
+</template>
+
+<style lang="scss" scoped>
+    .control {
+        flex: 1;
+
+        button {
+            width: 100%;
+        }
+    }
+
+    .btns {
+        margin-top: 0.5rem;
+    }
+
+    .tags {
+        flex-wrap: nowrap;
+    }
+</style>
+
+<script>
+import uniq from 'lodash/uniq'
+
+export default {
+    props: [
+        'dirBookmarks',
+        'disabled',
+        'path',
+        'translations'
+    ],
+    data() {
+        return {
+            bookmarks: this.dirBookmarks
+        }
+    },
+    computed: {
+        currentPath() {
+            return this.path || '/'
+        },
+        inBookmarks() {
+            return this.bookmarks.some((e) => e.dir == this.currentPath)
+        },
+        bmCount() {
+            return this.bookmarks.length
+        }
+    },
+    methods: {
+        trans(val) {
+            return this.translations[val]
+        },
+
+        // goto
+        goToFolder(dir) {
+            EventHub.fire('global-search-go-to-folder', {
+                dir: dir,
+                name: null
+            })
+        },
+        goTo(dir) {
+            return `${this.trans('open')} "${dir}"`
+        },
+        getName(str) {
+            let len = str.length
+            let max = 25
+
+            return len > max
+                ? str.substring(0, max) + '...'
+                : str
+        },
+        isCurrent(dir) {
+            return dir == this.currentPath
+        },
+
+        // bms
+        addToBookmarks() {
+            if (!this.inBookmarks) {
+                let list = [].concat(
+                    this.bookmarks,
+                    [{
+                        dir: this.currentPath,
+                        name: this.currentPath
+                    }]
+                )
+
+                this.bookmarks = uniq(list)
+            }
+        },
+        removeFromBookmarks(i) {
+            return this.bookmarks.splice(i, 1)
+        },
+        clearBookmarks() {
+            return this.bookmarks = []
+        }
+    },
+    watch: {
+        bookmarks(val) {
+            EventHub.fire('dir-bookmarks-update', val)
+        }
+    }
+}
+</script>
diff --git a/src/resources/assets/js/components/toolbar/filter-sort.vue b/src/resources/assets/js/components/toolbar/filter-sort.vue
new file mode 100644
index 0000000..644d3f4
--- /dev/null
+++ b/src/resources/assets/js/components/toolbar/filter-sort.vue
@@ -0,0 +1,78 @@
+<template>
+    <my-dropdown :disabled="disabled">
+        <template v-slot:title>
+            {{ trans('filtration') }}
+        </template>
+
+        <template v-slot:content>
+            <!-- filters -->
+            <div v-for="item in filters"
+                 :key="`filter-${item}`"
+                 class="dropdown-item"
+                 :class="[
+                     filterNameIs(item) ? 'has-text-weight-bold has-text-link' : 'has-text-grey-dark',
+                     haveFileType(item) ? 'link' : 'has-text-grey-light disabled'
+                 ]"
+                 @click.stop="setFilterName(item)">
+                {{ trans(item) }}
+            </div>
+
+            <!-- sorts -->
+            <hr class="dropdown-divider">
+            <div v-for="item in sorts"
+                 :key="`sort-${item}`"
+                 class="dropdown-item link"
+                 :class="sortNameIs(item) ? 'has-text-weight-bold has-text-link' : 'has-text-grey-dark'"
+                 @click.stop="setSortName(item)">
+                {{ trans(item) }}
+            </div>
+        </template>
+    </my-dropdown>
+</template>
+
+<script>
+export default {
+    props: [
+        'setFilterName',
+        'filterNameIs',
+        'setSortName',
+        'sortNameIs',
+        'disabled',
+        'haveAFileOfType',
+        'translations'
+    ],
+    data() {
+        return {
+            filters: [
+                'image',
+                'video',
+                'audio',
+                'folder',
+                'text',
+                'application',
+                'locked',
+                'selected',
+                'non'
+            ],
+            sorts: [
+                'name',
+                'size',
+                'last_modified',
+                'non'
+            ]
+        }
+    },
+    methods: {
+        trans(val) {
+            return this.translations[val]
+        },
+        haveFileType(val) {
+            if (val == 'non') {
+                return true
+            }
+
+            return this.haveAFileOfType(val)
+        }
+    }
+}
+</script>
diff --git a/src/resources/assets/js/components/usageIntro/button.vue b/src/resources/assets/js/components/usageIntro/button.vue
index 70d9c0a..629c336 100644
--- a/src/resources/assets/js/components/usageIntro/button.vue
+++ b/src/resources/assets/js/components/usageIntro/button.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="usage-intro-btn extra-func-btns link"
-         @click="showPanel()">
+         @click.stop="showPanel()">
         <span class="icon is-large">
             <icon name="pref"
                   scale="1.2"/>
diff --git a/src/resources/assets/js/components/usageIntro/panel.vue b/src/resources/assets/js/components/usageIntro/panel.vue
index 099f229..119e774 100644
--- a/src/resources/assets/js/components/usageIntro/panel.vue
+++ b/src/resources/assets/js/components/usageIntro/panel.vue
@@ -4,14 +4,18 @@
         <div class="modal-background gradient-pattern"/>
         <div class="modal-content">
             <div class="__choices">
-                <div class="left" @click="showIntro('touch')">
-                    <span class="icon"><icon name="mobile" scale="15"/></span>
+                <div class="left"
+                     @click.stop="showIntro('touch')">
+                    <span class="icon"><icon name="mobile"
+                                             scale="15"/></span>
                 </div>
                 <div class="mid">
                     <div class="splitter"/>
                 </div>
-                <div class="right" @click="showIntro('desktop')">
-                    <span class="icon"><icon name="desktop" scale="15"/></span>
+                <div class="right"
+                     @click.stop="showIntro('desktop')">
+                    <span class="icon"><icon name="desktop"
+                                             scale="15"/></span>
                 </div>
             </div>
         </div>
@@ -19,7 +23,8 @@
         <div class="__corner">
             <p>MANAGER\\SHORTCUTS</p>
         </div>
-        <button class="modal-close is-large" @click="closePanel()"/>
+        <button class="modal-close is-large"
+                @click.stop="closePanel()"/>
     </div>
 </template>
 
diff --git a/src/resources/assets/js/components/utils/dropdown.vue b/src/resources/assets/js/components/utils/dropdown.vue
new file mode 100644
index 0000000..874dca0
--- /dev/null
+++ b/src/resources/assets/js/components/utils/dropdown.vue
@@ -0,0 +1,76 @@
+<template>
+    <div class="dropdown"
+         :class="{'is-active' : show}"
+         @click.stop="togglePanel()">
+        <div class="dropdown-trigger">
+            <button class="button"
+                    :disabled="disabled"
+                    aria-haspopup="true"
+                    aria-controls="dropdown-menu">
+                <span>
+                    <slot name="title"/>
+                </span>
+                <span v-show="!disabled"
+                      class="icon is-small">
+                    <icon name="angle-down"/>
+                </span>
+            </button>
+        </div>
+
+        <div id="dropdown-menu"
+             class="dropdown-menu"
+             role="menu">
+            <div class="dropdown-content">
+                <slot name="content"/>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+    .dropdown-menu {
+        left: unset;
+        right: 0;
+    }
+
+    .dropdown-item {
+        padding-top: 0;
+    }
+
+</style>
+
+<script>
+export default {
+    props: ['disabled'],
+    data() {
+        return {
+            show: false
+        }
+    },
+    created() {
+        document.addEventListener('click', this.hidePanel)
+    },
+    beforeDestroy() {
+        document.addEventListener('click', this.hidePanel)
+    },
+    methods: {
+        hidePanel(e) {
+            if (!this.$el.contains(e.target)) {
+                this.show = false
+            }
+        },
+        togglePanel() {
+            this.show = this.disabled
+                ? false
+                : !this.show
+        }
+    },
+    watch: {
+        show(val) {
+            if (!val) {
+                document.addEventListener('click', this.hidePanel)
+            }
+        }
+    }
+}
+</script>
diff --git a/src/resources/assets/js/components/utils/filter-sort.vue b/src/resources/assets/js/components/utils/filter-sort.vue
deleted file mode 100644
index 9c7f724..0000000
--- a/src/resources/assets/js/components/utils/filter-sort.vue
+++ /dev/null
@@ -1,121 +0,0 @@
-<template>
-    <div class="dropdown"
-         :class="{'is-active' : show}"
-         @click="togglePanel()">
-        <div class="dropdown-trigger">
-            <button class="button"
-                    :disabled="disabled"
-                    aria-haspopup="true"
-                    aria-controls="dropdown-menu">
-                <span>{{ trans('filtration') }}</span>
-                <span v-show="!disabled"
-                      class="icon is-small">
-                    <icon name="angle-down"/>
-                </span>
-            </button>
-        </div>
-
-        <div id="dropdown-menu"
-             class="dropdown-menu"
-             role="menu">
-            <div class="dropdown-content">
-                <!-- filters -->
-                <div v-for="item in filters"
-                     :key="`filter-${item}`"
-                     class="dropdown-item"
-                     :class="[
-                         filterNameIs(item) ? 'has-text-weight-bold has-text-link' : 'has-text-grey-dark',
-                         haveFileType(item) ? 'link' : 'has-text-grey-light disabled'
-                     ]"
-                     @click="setFilterName(item)">
-                    {{ trans(item) }}
-                </div>
-
-                <!-- sorts -->
-                <hr class="dropdown-divider">
-                <div v-for="item in sorts"
-                     :key="`sort-${item}`"
-                     class="dropdown-item link"
-                     :class="sortNameIs(item) ? 'has-text-weight-bold has-text-link' : 'has-text-grey-dark'"
-                     @click="setSortName(item)">
-                    {{ trans(item) }}
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<style lang="scss" scoped>
-    .dropdown-item {
-        padding-top: 0;
-    }
-
-    .disabled {
-        cursor: not-allowed;
-    }
-
-</style>
-
-<script>
-export default {
-    props: [
-        'setFilterName',
-        'filterNameIs',
-        'setSortName',
-        'sortNameIs',
-        'disabled',
-        'haveAFileOfType',
-        'translations'
-    ],
-    data() {
-        return {
-            show: false,
-            filters: [
-                'image',
-                'video',
-                'audio',
-                'folder',
-                'text',
-                'application',
-                'locked',
-                'selected',
-                'non'
-            ],
-            sorts: [
-                'name',
-                'size',
-                'last_modified',
-                'non'
-            ]
-        }
-    },
-    mounted() {
-        document.addEventListener('click', this.hidePanel)
-    },
-    destroy() {
-        document.addEventListener('click', this.hidePanel)
-    },
-    methods: {
-        hidePanel(e) {
-            if (!this.$el.contains(e.target)) {
-                this.show = false
-            }
-        },
-        togglePanel() {
-            this.show = this.disabled
-                ? false
-                : !this.show
-        },
-        trans(val) {
-            return this.translations[val]
-        },
-        haveFileType(val) {
-            if (val == 'non') {
-                return true
-            }
-
-            return this.haveAFileOfType(val)
-        }
-    }
-}
-</script>
diff --git a/src/resources/assets/js/components/utils/icon-types.vue b/src/resources/assets/js/components/utils/icon-types.vue
new file mode 100644
index 0000000..b7248fa
--- /dev/null
+++ b/src/resources/assets/js/components/utils/icon-types.vue
@@ -0,0 +1,67 @@
+<template>
+    <span v-if="currentType.type">
+        <icon :class="classes"
+              :name="currentType.icon"
+              :scale="iconScale"/>
+    </span>
+</template>
+
+<script>
+export default {
+    props: [
+        'file',
+        'scale',
+        'classes',
+        'fileTypeIs',
+        'except'
+    ],
+    data() {
+        return {
+            iconScale: this.scale || 1.2,
+            exclude: this.except || [],
+            list: [
+                {
+                    type: 'folder',
+                    icon: 'folder'
+                },
+                {
+                    type: 'application',
+                    icon: 'cogs'
+                },
+                {
+                    type: 'compressed',
+                    icon: 'file-archive-o'
+                },
+                {
+                    type: 'image',
+                    icon: 'image'
+                },
+                {
+                    type: 'video',
+                    icon: 'film'
+                },
+                {
+                    type: 'audio',
+                    icon: 'music'
+                },
+                {
+                    type: 'text',
+                    icon: 'file-text-o'
+                }
+            ]
+        }
+    },
+    computed: {
+        typesList() {
+            return this.list.filter((item) => {
+                return !this.exclude.some((e) => e == item.type)
+            })
+        },
+        currentType() {
+            let file = this.file
+
+            return this.typesList.find((e) => this.fileTypeIs(file, e.type)) || {}
+        }
+    }
+}
+</script>
diff --git a/src/resources/assets/js/components/utils/upload-preview.vue b/src/resources/assets/js/components/utils/upload-preview.vue
index c8567e9..a8a8837 100644
--- a/src/resources/assets/js/components/utils/upload-preview.vue
+++ b/src/resources/assets/js/components/utils/upload-preview.vue
@@ -6,26 +6,13 @@
                      v-model="options.focalPoint">
             <img :src="img">
         </focus-point>
+
         <div v-else
              class="icons-preview">
-            <icon v-if="fileTypeIs(type, 'application')"
-                  name="cogs"
-                  scale="10"/>
-            <icon v-else-if="fileTypeIs(type, 'compressed')"
-                  name="file-archive-o"
-                  scale="10"/>
-            <icon v-else-if="fileTypeIs(type, 'video')"
-                  name="film"
-                  scale="10"/>
-            <icon v-else-if="fileTypeIs(type, 'audio')"
-                  name="music"
-                  scale="10"/>
-            <icon v-else-if="fileTypeIs(type, 'pdf')"
-                  name="file-pdf-o"
-                  scale="10"/>
-            <icon v-else-if="fileTypeIs(type, 'text')"
-                  name="file-text-o"
-                  scale="10"/>
+            <icon-types :file="type"
+                        :file-type-is="fileTypeIs"
+                        :scale="10"
+                        :except="['image']"/>
         </div>
 
         <!-- options -->
@@ -36,7 +23,7 @@
                     class="btn-plain"
                     :class="{'alt': panelIsVisible}"
                     :title="trans('options')"
-                    @click="switchPanel()">
+                    @click.stop="switchPanel()">
                 <span class="icon is-large">
                     <icon>
                         <icon name="circle"
@@ -121,7 +108,7 @@
                         </h3>
                         <!-- add more -->
                         <button class="button is-success"
-                                @click="addToExtra()">
+                                @click.stop="addToExtra()">
                             <span class="icon is-small">
                                 <icon name="plus"
                                       scale="1.2"/>
@@ -150,7 +137,7 @@
                                 <!-- remove -->
                                 <p class="control">
                                     <a class="button is-black"
-                                       @click="removeFromExtra(i)">
+                                       @click.stop="removeFromExtra(i)">
                                         <span class="icon is-small">
                                             <icon name="times"/>
                                         </span>
diff --git a/src/resources/assets/js/manager.js b/src/resources/assets/js/manager.js
index d41d6f2..6632058 100644
--- a/src/resources/assets/js/manager.js
+++ b/src/resources/assets/js/manager.js
@@ -51,10 +51,12 @@ axios.interceptors.response.use(
 // vue-awesome
 require('./modules/icons')
 Vue.component('icon', require('vue-awesome/components/Icon').default)
+Vue.component('iconTypes', require('./components/utils/icon-types.vue').default)
 
 /*                Components                */
 Vue.component('MediaManager', require('./components/manager.vue').default)
 Vue.component('MyNotification', require('vue-notif').default)
+Vue.component('MyDropdown', require('./components/utils/dropdown.vue').default)
 
 /*                Events                */
 if ('connection' in navigator) {
diff --git a/src/resources/assets/js/modules/broadcast.js b/src/resources/assets/js/modules/broadcast.js
index ed5e4b1..3a065c8 100644
--- a/src/resources/assets/js/modules/broadcast.js
+++ b/src/resources/assets/js/modules/broadcast.js
@@ -24,7 +24,7 @@ export default {
                             this.bcDelete(data)
                             break
                         case 'lock':
-                            this.bcLock(data)
+                            this.bcLock()
                             break
                         case 'visibility':
                             this.bcVisibility(data)
@@ -81,7 +81,7 @@ export default {
                 let item = data.item
 
                 if (this.filteredItemsCount) {
-                    this.filterdList.some((e) => {
+                    this.filterdFilesList.some((e) => {
                         if (e.name == item.oldName && e.type == item.type) {
                             e.name = item.newName
 
@@ -102,7 +102,6 @@ export default {
             }
         },
         bcDelete(data) {
-            let selected = this.selectedFile
             let path = data.path || ''
 
             // if user is viewing the same dir
@@ -112,24 +111,19 @@ export default {
                 data.items.map((item) => {
                     let storage_path = item.path
 
-                    this.removeFromLists(storage_path, storage_path == selected.storage_path)
+                    this.removeFromLists(storage_path, storage_path == this.selectedFile.storage_path)
                     this.bcNotif(`${this.trans('delete_success')} "${item.name}"`)
                 })
             }
         },
-        bcLock(data) {
-            let path = data.path || ''
-
-            // if user is viewing the same dir
-            if (path == this.files.path) {
-                this.updateLockList()
-            }
+        bcLock() {
+            this.updateLockList()
         },
         bcVisibility(data) {
             // if user is viewing the same dir
             if (data.path || this.files.path == '') {
                 let files = this.files.items
-                let filterd = this.filteredItemsCount ? this.filterdList : null
+                let filterd = this.filteredItemsCount ? this.filterdFilesList : null
 
                 data.items.map((item) => {
                     files.some((e) => {
diff --git a/src/resources/assets/js/modules/cache.js b/src/resources/assets/js/modules/cache.js
index 47bd3e4..3e8434e 100644
--- a/src/resources/assets/js/modules/cache.js
+++ b/src/resources/assets/js/modules/cache.js
@@ -17,11 +17,11 @@ export default {
             let ls = this.getLs()
 
             if (Object.keys(ls).length) {
-                this.randomNames = ls.randomNames || false
+                this.useRandomNamesForUpload = ls.useRandomNamesForUpload || false
                 this.folders = ls.folders || []
-                this.lockedList = ls.lockedList || []
                 this.toolBar = ls.toolBar || true
                 this.selectedFile = ls.selectedFileName || null
+                this.dirBookmarks = ls.dirBookmarks || []
             }
         },
         saveUserPref() {
@@ -34,11 +34,11 @@ export default {
                 const db = new DbWorker()
                 db.addEventListener('message', (e) => resolve(e.data))
                 db.postMessage({
-                    type: type, // get,set,del,clr
+                    type: type, // get,set,del,clr,keys
                     key: key ? encodeURI(key) : null,
                     val: val
                 })
-            })
+            }).then((data) => data)
         }
     },
     computed: {
diff --git a/src/resources/assets/js/modules/computed.js b/src/resources/assets/js/modules/computed.js
index b0c4b71..a434993 100644
--- a/src/resources/assets/js/modules/computed.js
+++ b/src/resources/assets/js/modules/computed.js
@@ -5,7 +5,7 @@ export default {
         },
         allFiles() {
             if (this.filteredItemsCount) {
-                return this.filterdList
+                return this.filterdFilesList
             }
 
             return this.files.items
@@ -25,14 +25,42 @@ export default {
             return 0
         },
         filteredItemsCount() {
-            if (typeof this.filterdList !== 'undefined') {
-                return this.filterdList.length
+            if (typeof this.filterdFilesList !== 'undefined') {
+                return this.filterdFilesList.length
             }
 
             return 0
         },
-        sortDir() {
+
+        // sort by dir
+        sortDirection() {
             return this.sortName != 'name' ? -1 : 1
+        },
+
+        // ops
+        ops_btn_disable() {
+            return (this.isBulkSelecting() && !this.bulkItemsFilter.length) ||
+                this.isLoading ||
+                !this.selectedFile ||
+                this.IsLocked(this.selectedFile)
+        },
+        editor_btn_disable() {
+            return this.ops_btn_disable ||
+                !this.selectedFileIs('image') ||
+                this.selectedFile.type.includes('gif')
+        },
+        lock_btn_disable() {
+            return this.searchItemsCount == 0 ||
+                this.isLoading ||
+                !this.allItemsCount ||
+                this.isBulkSelecting() && !this.bulkItemsCount
+        },
+        vis_btn_disable() {
+            return this.searchItemsCount == 0 ||
+                this.isLoading ||
+                !this.allItemsCount ||
+                !this.isBulkSelecting() && this.selectedFileIs('folder') ||
+                this.isBulkSelecting() && !this.bulkItemsCount
         }
     }
 }
diff --git a/src/resources/assets/js/modules/filtration.js b/src/resources/assets/js/modules/filtration.js
index c01e8ba..3f901b3 100644
--- a/src/resources/assets/js/modules/filtration.js
+++ b/src/resources/assets/js/modules/filtration.js
@@ -39,19 +39,19 @@ export default {
 
             switch (val) {
                 case 'locked':
-                    this.filterdList = files.filter((item) => this.IsLocked(item))
+                    this.filterdFilesList = files.filter((item) => this.IsLocked(item))
                     break
                 case 'selected':
-                    this.filterdList = this.bulkList
+                    this.filterdFilesList = this.bulkList
                     break
                 case 'text':
-                    this.filterdList = files.filter((item) => this.fileTypeIs(item, 'text') || this.fileTypeIs(item, 'pdf'))
+                    this.filterdFilesList = files.filter((item) => this.fileTypeIs(item, 'text') || this.fileTypeIs(item, 'pdf'))
                     break
                 case 'application':
-                    this.filterdList = files.filter((item) => this.fileTypeIs(item, 'application') || this.fileTypeIs(item, 'compressed'))
+                    this.filterdFilesList = files.filter((item) => this.fileTypeIs(item, 'application') || this.fileTypeIs(item, 'compressed'))
                     break
                 default:
-                    this.filterdList = files.filter((item) => this.fileTypeIs(item, val))
+                    this.filterdFilesList = files.filter((item) => this.fileTypeIs(item, val))
                     break
             }
 
diff --git a/src/resources/assets/js/modules/folder.js b/src/resources/assets/js/modules/folder.js
index 37e4a45..9689e67 100644
--- a/src/resources/assets/js/modules/folder.js
+++ b/src/resources/assets/js/modules/folder.js
@@ -13,7 +13,7 @@ export default {
         goToPrevFolder() {
             EventHub.fire('stopHammerPropagate')
 
-            if (this.restrictIsCurrent) return
+            if (this.restrictPathIsCurrent) return
 
             let length = this.folders.length
 
@@ -36,7 +36,7 @@ export default {
                 if (this.restrictModeIsOn) {
                     if (index == 0) {
                         // go home
-                        prev_folder_name = this.navigationDirs[index]
+                        prev_folder_name = this.pathBarDirsList[index]
                         this.resolveRestrictFolders()
                     } else {
                         // go by index
@@ -56,10 +56,10 @@ export default {
         }
     },
     computed: {
-        navigationDirs() {
+        pathBarDirsList() {
             let folders = this.folders.join('/')
             let rest = this.resrtictPath
-            let list = this.restrictIsCurrent
+            let list = this.restrictPathIsCurrent
                 ? []
                 : this.arrayFilter(folders.replace(rest, '').split('/'))
 
diff --git a/src/resources/assets/js/modules/form.js b/src/resources/assets/js/modules/form.js
index c3085b3..ff267d4 100644
--- a/src/resources/assets/js/modules/form.js
+++ b/src/resources/assets/js/modules/form.js
@@ -2,6 +2,7 @@ export default {
     methods: {
         /*                Main                */
         getFiles(prev_folder = null, prev_file = null) {
+            this.files.next = null
             this.resetInput(['sortName', 'filterName', 'selectedFile', 'currentFileIndex'])
             this.noFiles('hide')
             this.destroyPlyr()
@@ -40,13 +41,8 @@ export default {
         },
         loadPaginatedFiles($state) {
             return axios.post(this.files.next, {
-                path: this.clearDblSlash(`/${this.folders.join('/')}`)
+                path: this.files.path || '/'
             }).then(({data}) => {
-                // folder no longer exist
-                if (data.error) {
-                    return this.showNotif(data.error, 'danger')
-                }
-
                 let next_page = data.files.items.next_page_url
 
                 // add extra items
@@ -266,13 +262,17 @@ export default {
         /*                Ops                */
         removeFromLists(path, reset = true) {
             if (this.filteredItemsCount) {
-                this.updateListsRemove(this.filterdList, path)
+                this.updateListsRemove(this.filterdFilesList, path)
             }
 
             if (this.movableItemsCount) {
                 this.updateListsRemove(this.movableList, path)
             }
 
+            if (this.dirBookmarks.length) {
+                this.updateListsRemove(this.dirBookmarks, path, 'dir')
+            }
+
             this.updateListsRemove(this.files.items, path)
 
             if (reset) {
diff --git a/src/resources/assets/js/modules/gestures.js b/src/resources/assets/js/modules/gestures.js
index 0301564..007a9fd 100644
--- a/src/resources/assets/js/modules/gestures.js
+++ b/src/resources/assets/js/modules/gestures.js
@@ -168,7 +168,7 @@ export default {
                 }
                 // media
                 else if (this.selectedFileIs('video') || this.selectedFileIs('audio')) {
-                    return !this.infoSidebar || this.smallScreen
+                    return !this.infoSidebar || this.isASmallScreen
                         ? this.toggleModal('preview_modal')
                         : this.playMedia()
                 }
diff --git a/src/resources/assets/js/modules/icons.js b/src/resources/assets/js/modules/icons.js
index c7e99d4..f9aa5aa 100644
--- a/src/resources/assets/js/modules/icons.js
+++ b/src/resources/assets/js/modules/icons.js
@@ -11,10 +11,8 @@ import 'vue-awesome/icons/minus'
 import 'vue-awesome/icons/plus'
 import 'vue-awesome/icons/puzzle-piece'
 import 'vue-awesome/icons/image'
-import 'vue-awesome/icons/video-camera'
 import 'vue-awesome/icons/music'
 import 'vue-awesome/icons/times'
-import 'vue-awesome/icons/bell-o'
 import 'vue-awesome/icons/search'
 import 'vue-awesome/icons/globe'
 import 'vue-awesome/icons/angle-double-right'
@@ -43,7 +41,6 @@ import 'vue-awesome/icons/clock-o'
 import 'vue-awesome/icons/file-archive-o'
 import 'vue-awesome/icons/chevron-down'
 import 'vue-awesome/icons/angle-down'
-import 'vue-awesome/icons/chevron-up'
 import 'vue-awesome/icons/cloud-upload'
 import 'vue-awesome/icons/shopping-cart'
 // cropperjs
@@ -89,11 +86,6 @@ Icon.register({
         width: 26,
         d: 'M25.567, 14.005 C25.567, 14.005 22.847, 16.726 22.847, 16.726 C22.283, 17.289 21.370, 17.289 20.806, 16.726 C20.243, 16.162 20.243, 15.249 20.806, 14.685 C20.806, 14.685 22.507, 12.985 22.507, 12.985 C22.507, 12.985 20.806, 11.285 20.806, 11.285 C20.243, 10.721 20.243, 9.808 20.806, 9.244 C21.370, 8.681 22.283, 8.681 22.847, 9.244 C22.847, 9.244 25.567, 11.965 25.567, 11.965 C26.131, 12.528 26.131, 13.442 25.567, 14.005 ZM13.000, 18.000 C10.238, 18.000 8.000, 15.761 8.000, 13.000 C8.000, 10.238 10.238, 8.000 13.000, 8.000 C15.761, 8.000 18.000, 10.238 18.000, 13.000 C18.000, 15.761 15.761, 18.000 13.000, 18.000 ZM13.000, 11.000 C11.895, 11.000 11.000, 11.895 11.000, 13.000 C11.000, 14.104 11.895, 15.000 13.000, 15.000 C14.104, 15.000 15.000, 14.104 15.000, 13.000 C15.000, 11.895 14.104, 11.000 13.000, 11.000 ZM14.685, 5.163 C14.685, 5.163 12.985, 3.463 12.985, 3.463 C12.985, 3.463 11.285, 5.163 11.285, 5.163 C10.721, 5.727 9.807, 5.727 9.244, 5.163 C8.681, 4.600 8.681, 3.686 9.244, 3.123 C9.244, 3.123 11.965, 0.402 11.965, 0.402 C12.528, -0.161 13.441, -0.161 14.005, 0.402 C14.005, 0.402 16.726, 3.123 16.726, 3.123 C17.289, 3.686 17.289, 4.600 16.726, 5.163 C16.162, 5.727 15.249, 5.727 14.685, 5.163 ZM5.163, 16.726 C4.600, 17.289 3.686, 17.289 3.123, 16.726 C3.123, 16.726 0.402, 14.005 0.402, 14.005 C-0.161, 13.442 -0.161, 12.528 0.402, 11.965 C0.402, 11.965 3.123, 9.244 3.123, 9.244 C3.686, 8.681 4.600, 8.681 5.163, 9.244 C5.727, 9.808 5.727, 10.721 5.163, 11.285 C5.163, 11.285 3.463, 12.985 3.463, 12.985 C3.463, 12.985 5.163, 14.685 5.163, 14.685 C5.727, 15.249 5.727, 16.162 5.163, 16.726 ZM11.285, 20.806 C11.285, 20.806 12.985, 22.507 12.985, 22.507 C12.985, 22.507 14.685, 20.806 14.685, 20.806 C15.249, 20.243 16.162, 20.243 16.726, 20.806 C17.289, 21.370 17.289, 22.283 16.726, 22.847 C16.726, 22.847 14.005, 25.567 14.005, 25.567 C13.441, 26.131 12.528, 26.131 11.965, 25.567 C11.965, 25.567 9.244, 22.847 9.244, 22.847 C8.681, 22.283 8.681, 21.370 9.244, 20.806 C9.807, 20.243 10.721, 20.243 11.285, 20.806 Z'
     },
-    glitch: {
-        height: 58,
-        width: 90,
-        d: 'm69.493 57.351h-56.918v-21.106l8.984-2.36-16.244-2.368 12.346-4.902-17.707-3.244 15.619-6.755v-15.967h56.918v18.011l-8.182 2.898 17.895 4.211-10.746 3.931 18.542 2.125-20.507 6.666zm-53.92-2.998h50.923v-18.04l9.47-3.08-17.431-1.997 13.236-4.843-18.078-4.252 15.801-5.6v-12.894h-50.923v14.939l-8.362 3.617 18.264 3.345-11.635 4.621 19.728 2.875-20.993 5.515z'
-    },
     desktop: {
         height: 72,
         width: 90,
diff --git a/src/resources/assets/js/modules/lock.js b/src/resources/assets/js/modules/lock.js
index fe1eae0..bb39461 100644
--- a/src/resources/assets/js/modules/lock.js
+++ b/src/resources/assets/js/modules/lock.js
@@ -25,10 +25,10 @@ export default {
         },
 
         // form
-        lockFileForm() {
+        lockFileForm(file = this.selectedFile) {
             let list = this.bulkItemsCount
                 ? this.bulkList
-                : [this.selectedFile]
+                : [file]
 
             axios.post(this.routes.lock, {
                 path: this.files.path,
@@ -48,15 +48,14 @@ export default {
                 this.ajaxError()
             })
         },
-        updateLockList(data) {
-            return axios.post(this.routes.locked_list, {
-                path: this.files.path
-            }).then(({data}) => {
-                this.lockedList = data.locked
-            }).catch((err) => {
-                console.error(err)
-                this.ajaxError()
-            })
+        updateLockList() {
+            return axios.post(this.routes.locked_list)
+                .then(({data}) => {
+                    this.lockedList = data.locked
+                }).catch((err) => {
+                    console.error(err)
+                    this.ajaxError()
+                })
         }
     }
 }
diff --git a/src/resources/assets/js/modules/media_player.js b/src/resources/assets/js/modules/media_player.js
index 9f4fe95..0810ffd 100644
--- a/src/resources/assets/js/modules/media_player.js
+++ b/src/resources/assets/js/modules/media_player.js
@@ -12,7 +12,7 @@ export default {
                 keyboard: {focused: false, global: false}
             }
 
-            if (!this.smallScreen || (this.smallScreen && this.activeModal)) {
+            if (!this.isASmallScreen || (this.isASmallScreen && this.activeModal)) {
                 let t = setInterval(() => {
                     let item = document.querySelector('[data-player]')
 
diff --git a/src/resources/assets/js/modules/movable.js b/src/resources/assets/js/modules/movable.js
index 5db2083..88aa5f7 100644
--- a/src/resources/assets/js/modules/movable.js
+++ b/src/resources/assets/js/modules/movable.js
@@ -26,6 +26,7 @@ export default {
                     ? [item]
                     : this.delOrMoveList()
             )
+
             this.movableList = uniq(list)
 
             if (this.isBulkSelecting()) {
@@ -35,10 +36,10 @@ export default {
         removeFromMovableList(i) {
             return this.movableList.splice(i, 1)
         },
-        clearMovableList() {
+        clearMovableList(notif = true) {
             this.resetInput('movableList', [])
 
-            return this.showNotif(this.trans('move_clear'))
+            return notif ? this.showNotif(this.trans('move_clear')) : false
         },
         inMovableList(item = this.selectedFile) {
             return item &&
@@ -50,7 +51,7 @@ export default {
         MoveFileForm(event) {
             let hasErrors = false
             let destination = this.files.path
-            let copy = this.useCopy
+            let copy = this.copyFilesNotMove
             let files = this.checkForNestedLockedItems(this.movableItemsFilter)
 
             if (!files.length) {
@@ -86,7 +87,7 @@ export default {
 
                 if (!hasErrors) {
                     // clear all
-                    this.clearMovableList()
+                    this.clearMovableList(false)
                 } else {
                     // remove succeeded items
                     paths.map((p) => {
diff --git a/src/resources/assets/js/modules/restriction.js b/src/resources/assets/js/modules/restriction.js
index b0b29d0..221b914 100644
--- a/src/resources/assets/js/modules/restriction.js
+++ b/src/resources/assets/js/modules/restriction.js
@@ -31,7 +31,7 @@ export default {
         restrictModeIsOn() {
             return Boolean(this.resrtictPath)
         },
-        restrictIsCurrent() {
+        restrictPathIsCurrent() {
             return this.restrictModeIsOn && this.folders.join('/') == this.resrtictPath
         }
     }
diff --git a/src/resources/assets/js/modules/scroll.js b/src/resources/assets/js/modules/scroll.js
index 973f039..10df519 100644
--- a/src/resources/assets/js/modules/scroll.js
+++ b/src/resources/assets/js/modules/scroll.js
@@ -50,7 +50,7 @@ export default {
                 let contWidth = width - pad
                 let itemWidth = fileslist.firstChild ? fileslist.firstChild.clientWidth : 0
 
-                this.scrollByRows = Math.floor(contWidth / itemWidth)
+                this.scrollByRowItemsCount = Math.floor(contWidth / itemWidth)
             }
         }
     }
diff --git a/src/resources/assets/js/modules/selection.js b/src/resources/assets/js/modules/selection.js
index fae0e47..9d1469e 100644
--- a/src/resources/assets/js/modules/selection.js
+++ b/src/resources/assets/js/modules/selection.js
@@ -163,7 +163,7 @@ export default {
         // rows
         goToNextRow() {
             let curSelectedIndex = this.currentFileIndex
-            let moveBy = this.scrollByRows
+            let moveBy = this.scrollByRowItemsCount
             this.imageSlideDirection = 'up'
 
             if (curSelectedIndex == this.allItemsCount - 1) {
@@ -178,7 +178,7 @@ export default {
         },
         goToPrevRow() {
             let curSelectedIndex = this.currentFileIndex
-            let moveBy = this.scrollByRows
+            let moveBy = this.scrollByRowItemsCount
 
             if (curSelectedIndex == 0) {
                 this.toggleModal()
diff --git a/src/resources/assets/js/modules/upload.js b/src/resources/assets/js/modules/upload.js
index 0dc3910..8adddf3 100644
--- a/src/resources/assets/js/modules/upload.js
+++ b/src/resources/assets/js/modules/upload.js
@@ -23,7 +23,7 @@ export default {
                 .map((el) => el.size)
                 .reduce((a, b) => a + b, 0)
 
-            return this.getFileSize(size)
+            return size ? this.getFileSize(size) : 0
         }
     },
     methods: {
@@ -238,7 +238,7 @@ export default {
                     'uploadPreviewNamesList',
                     'uploadPreviewOptionsList'
                 ], [])
-                this.resetInput('selectedUploadPreview')
+                this.resetInput('selectedUploadPreviewName')
             })
         },
 
@@ -268,7 +268,7 @@ export default {
                 let name = container.dataset.name
 
                 if (this.checkForUploadedFile(name)) {
-                    this.selectedUploadPreview = name
+                    this.selectedUploadPreviewName = name
 
                     // illuminate selected preview
                     this.$nextTick(() => {
@@ -297,7 +297,7 @@ export default {
                 axios.post(event.target.action, {
                     path: this.files.path,
                     url: url,
-                    random_names: this.randomNames
+                    random_names: this.useRandomNamesForUpload
                 }).then(({data}) => {
                     this.toggleLoading()
                     this.loadingFiles('hide')
diff --git a/src/resources/assets/js/modules/utils.js b/src/resources/assets/js/modules/utils.js
index 74cb328..2d53ff0 100644
--- a/src/resources/assets/js/modules/utils.js
+++ b/src/resources/assets/js/modules/utils.js
@@ -12,25 +12,6 @@ export default {
         },
 
         /*                Buttons                */
-        item_ops() {
-            return (this.isBulkSelecting() && !this.bulkItemsFilter.length) ||
-                this.isLoading ||
-                !this.selectedFile ||
-                this.IsLocked(this.selectedFile)
-        },
-        lock_btn() {
-            return this.searchItemsCount == 0 ||
-                this.isLoading ||
-                !this.allItemsCount ||
-                this.isBulkSelecting() && !this.bulkItemsCount
-        },
-        vis_btn() {
-            return this.searchItemsCount == 0 ||
-                this.isLoading ||
-                !this.allItemsCount ||
-                !this.isBulkSelecting() && this.selectedFileIs('folder') ||
-                this.isBulkSelecting() && !this.bulkItemsCount
-        },
         reset() {
             this.bulkSelect = false
             this.bulkSelectAll = false
@@ -249,18 +230,18 @@ export default {
         },
 
         /*                Window Size                */
-        checkForSmallScreen() {
-            // 1023 = bulma is-hidden-touch
-            return document.documentElement.clientWidth <= 1023
-        },
         smallScreenHelper() {
-            if (!this.smallScreen) {
+            if (!this.isASmallScreen) {
                 this.infoSidebar = typeof this.getLs().infoSidebar !== 'undefined' ? this.getLs().infoSidebar : true
             }
         },
+        checkForSmallScreen() {
+            // 1023 = bulma is-hidden-touch
+            return document.documentElement.clientWidth <= 1023
+        },
         applySmallScreen() {
             this.infoSidebar = false
-            this.smallScreen = true
+            this.isASmallScreen = true
         },
         onResize() {
             if (this.firstRun) {
@@ -281,7 +262,7 @@ export default {
                     if (!this.waitingForUpload) {
                         this.toolBar = true
                     }
-                    this.smallScreen = false
+                    this.isASmallScreen = false
                     this.smallScreenHelper()
                 }
             }
diff --git a/src/resources/assets/js/modules/watch.js b/src/resources/assets/js/modules/watch.js
index 2767c56..41e967e 100644
--- a/src/resources/assets/js/modules/watch.js
+++ b/src/resources/assets/js/modules/watch.js
@@ -59,8 +59,8 @@ export default {
         },
 
         // ls
-        randomNames(val) {
-            this.updateLs({'randomNames': val})
+        useRandomNamesForUpload(val) {
+            this.updateLs({'useRandomNamesForUpload': val})
         },
         folders(val) {
             this.updateLs({'folders': val})
@@ -68,8 +68,8 @@ export default {
         toolBar(val) {
             this.updateLs({'toolBar': val})
         },
-        lockedList(val) {
-            this.updateLs({'lockedList': val})
+        dirBookmarks(val) {
+            this.updateLs({'dirBookmarks': val})
         },
 
         // filter
@@ -77,7 +77,7 @@ export default {
             if (val) {
                 this.showFilesOfType(val)
             } else {
-                this.resetInput('filterdList', [])
+                this.resetInput('filterdFilesList', [])
                 this.selectFirst()
             }
         },
diff --git a/src/resources/assets/js/webworkers/db.js b/src/resources/assets/js/webworkers/db.js
index 06d0d44..e44797d 100644
--- a/src/resources/assets/js/webworkers/db.js
+++ b/src/resources/assets/js/webworkers/db.js
@@ -1,27 +1,33 @@
 const db = require('idb-keyval')
+const store = new db.Store('ctf0-Media_Manager', 'media_manager')
 
 self.addEventListener('message', async (e) => {
     let {type, key, val} = e.data
 
     switch (type) {
         case 'get':
-            db.get(key)
+            db.get(key, store)
                 .then((res) => self.postMessage(res))
             break
         case 'set':
-            db.set(key, val)
+            db.set(key, val, store)
                 .then(() => self.postMessage(true))
                 .catch(() => self.postMessage(false))
             break
         case 'del':
-            db.del(key)
+            db.del(key, store)
                 .then(() => self.postMessage(true))
                 .catch(() => self.postMessage(false))
             break
         case 'clr':
-            db.clear()
+            db.clear(store)
                 .then(() => self.postMessage(true))
                 .catch(() => self.postMessage(false))
             break
+        case 'keys':
+            db.keys(store)
+                .then((res) => self.postMessage(res))
+                .catch(() => self.postMessage(false))
+            break
     }
 })
diff --git a/src/resources/assets/sass/manager.scss b/src/resources/assets/sass/manager.scss
index 59cb9ee..5623661 100644
--- a/src/resources/assets/sass/manager.scss
+++ b/src/resources/assets/sass/manager.scss
@@ -10,6 +10,12 @@
 @import './modules/usage-intro';
 @import './modules/media_player';
 
+.media-manager {
+    &.top-space {
+        padding-top: 2rem;
+    } // .media-manager.top-space
+} // .media-manager
+
 /*                toolbar                */
 .media-manager__toolbar {
     background-color: darken($active_theme, 2.5%);
@@ -458,7 +464,7 @@
     right: 0;
     top: 0;
     transition: all $anim-time $anim-ease;
-    will-change: width, left, right;
+    will-change: height, width, left, right;
 } // .__stack-files
 
 .__stack-sidebar-hidden {
@@ -470,7 +476,7 @@
     flex-wrap: wrap;
     list-style: none;
     padding: 0.75rem;
-    transition: height $anim-time ease-out;
+    padding-bottom: 5rem;
     user-select: none;
 
     li {
@@ -664,14 +670,13 @@
     position: relative;
     transition: all $anim-time $anim-ease;
     width: 20%;
-    will-change: widht, left, right;
+    will-change: height, width, left, right;
 
     .__sidebar-preview {
         border-bottom: 1px $dashed-border;
         color: darken($active_theme, 50%);
         flex: 0 0 auto;
         text-align: center;
-        transition: height $anim-time ease-out;
 
         .__sidebar-none-selected {
             align-items: center;
@@ -812,11 +817,14 @@
 
 /*                movable                */
 .movable-list {
-    position: relative;
+    background: $white;
+    border-radius: 100vw;
+    box-shadow: 0 15px 30px 0 rgba($black, 0.05), 0 5px 15px 0 rgba($black, 0.08);
 
-    .circle {
-        color: $white;
-    } // .movable-list .circle
+    .icon {
+        height: 2.5rem;
+        width: 2.5rem;
+    } // .movable-list .icon
 
     .counter {
         background: $red;
@@ -825,10 +833,11 @@
         font-size: 0.75rem;
         font-weight: bold;
         line-height: 1;
-        padding: 0.2rem 0.5rem;
+        padding: 0.25rem 0.5rem;
         position: absolute;
-        right: 0;
-        top: 0.1rem;
+        right: -0.5rem;
+        top: -0.5rem;
+        z-index: -1;
 
         &:empty {
             display: none;
@@ -1053,11 +1062,6 @@
     .mm-slide-leave-to {
         transform: translateX(0.7rem);
     } // .__stack-files-reverse .mm-slide-leave-to
-
-    .mm-counter-enter,
-    .mm-counter-leave-to {
-        transform: translateX(-0.7rem);
-    } // .__stack-files-reverse .mm-counter-leave-to
 } // .__stack-files-reverse
 
 /*                Progress bar                */
diff --git a/src/resources/assets/sass/modules/image-editor.scss b/src/resources/assets/sass/modules/image-editor.scss
index 033f282..e2df7b1 100644
--- a/src/resources/assets/sass/modules/image-editor.scss
+++ b/src/resources/assets/sass/modules/image-editor.scss
@@ -13,12 +13,12 @@
         .top,
         .mid {
             display: flex;
-        }
+        } // .__modal-editor .__editor .mid
 
         .__side-toolbar {
             align-self: flex-start;
             display: flex;
-        }
+        } // .__modal-editor .__editor .__side-toolbar
 
         .top {
             position: sticky;
@@ -32,23 +32,23 @@
                 .left,
                 .right {
                     display: flex;
-                }
+                } // .__modal-editor .__editor .top .__top-toolbar .right
 
                 .__left-index {
                     display: flex;
-                }
+                } // .__modal-editor .__editor .top .__top-toolbar .__left-index
 
                 .right {
                     margin-left: auto;
                     padding-left: 2rem;
-                }
-            }
-        }
+                } // .__modal-editor .__editor .top .__top-toolbar .right
+            } // .__modal-editor .__editor .top .__top-toolbar
+        } // .__modal-editor .__editor .top
 
         .mid {
             .__side-toolbar {
                 flex-flow: column nowrap;
-            }
+            } // .__modal-editor .__editor .mid .__side-toolbar
 
             .__cropper {
                 margin: 1rem;
@@ -62,8 +62,8 @@
 
                     img {
                         max-width: 100%;
-                    }
-                }
+                    } // .__modal-editor .__editor .mid .__cropper .image img
+                } // .__modal-editor .__editor .mid .__cropper .image
 
                 .__loader {
                     align-items: center;
@@ -75,7 +75,7 @@
                     position: absolute;
                     top: 0;
                     width: 100%;
-                }
+                } // .__modal-editor .__editor .mid .__cropper .__loader
 
                 .__diff {
                     max-height: 75vh;
@@ -87,25 +87,25 @@
 
                     .image-compare-handle {
                         color: $blue;
-                    }
+                    } // .__modal-editor .__editor .mid .__cropper .__diff .image-compare-handle
 
                     .image-compare-wrapper {
                         background-color: rgba($black, 0.5);
                         box-shadow: 10px 0 40px 0 rgba($black, 0.5);
-                    }
+                    } // .__modal-editor .__editor .mid .__cropper .__diff .image-compare-wrapper
 
                     img,
                     .image-compare-wrapper,
                     .image-compare-handle {
                         transition: all $anim-time $anim-ease;
-                    }
+                    } // .__modal-editor .__editor .mid .__cropper .__diff .image-compare-handle
 
                     &.is-draggable {
                         .image-compare-wrapper {
                             background-color: unset;
-                        }
-                    }
-                }
+                        } // .__modal-editor .__editor .mid .__cropper .__diff.is-draggable .image-compare-wrapper
+                    } // .__modal-editor .__editor .mid .__cropper .__diff.is-draggable
+                } // .__modal-editor .__editor .mid .__cropper .__diff
 
                 .__caman-presets {
                     padding-left: 1rem;
@@ -123,11 +123,11 @@
                         margin: 0 0 0.5rem;
                         padding: 0.75rem;
                         text-align: center;
-                    }
+                    } // .__modal-editor .__editor .mid .__cropper .__caman-presets h3
 
                     section {
                         display: flex;
-                    }
+                    } // .__modal-editor .__editor .mid .__cropper .__caman-presets section
 
                     .col {
                         display: flex;
@@ -136,14 +136,14 @@
                         &:first-of-type {
                             button {
                                 margin-left: 0;
-                            }
-                        }
+                            } // .__modal-editor .__editor .mid .__cropper .__caman-presets .col:first-of-type button
+                        } // .__modal-editor .__editor .mid .__cropper .__caman-presets .col:first-of-type
 
                         &:last-of-type {
                             button {
                                 margin-right: 0;
-                            }
-                        }
+                            } // .__modal-editor .__editor .mid .__cropper .__caman-presets .col:last-of-type button
+                        } // .__modal-editor .__editor .mid .__cropper .__caman-presets .col:last-of-type
 
                         button {
                             border-radius: 3px;
@@ -151,23 +151,23 @@
 
                             &:first-of-type {
                                 margin-top: 0;
-                            }
+                            } // .__modal-editor .__editor .mid .__cropper .__caman-presets .col button:first-of-type
 
                             &:last-of-type {
                                 margin-bottom: 0;
-                            }
+                            } // .__modal-editor .__editor .mid .__cropper .__caman-presets .col button:last-of-type
 
                             &:hover,
                             &.is-active {
                                 background: $audio;
-                            }
+                            } // .__modal-editor .__editor .mid .__cropper .__caman-presets .col button.is-active
 
                             &:disabled {
                                 background-color: rgba($black, 0.8);
-                            }
-                        }
-                    }
-                }
+                            } // .__modal-editor .__editor .mid .__cropper .__caman-presets .col button:disabled
+                        } // .__modal-editor .__editor .mid .__cropper .__caman-presets .col button
+                    } // .__modal-editor .__editor .mid .__cropper .__caman-presets .col
+                } // .__modal-editor .__editor .mid .__cropper .__caman-presets
 
                 .__bottom-toolbar {
                     bottom: 0;
@@ -176,10 +176,10 @@
                     right: 0;
                     transform: translateY(calc(100% + 1rem));
                     z-index: 1;
-                }
-            }
-        }
-    }
+                } // .__modal-editor .__editor .mid .__cropper .__bottom-toolbar
+            } // .__modal-editor .__editor .mid .__cropper
+        } // .__modal-editor .__editor .mid
+    } // .__modal-editor .__editor
 
     .btn-plain {
         background-color: $editorBtns;
@@ -190,27 +190,27 @@
         &:hover,
         &.is-active {
             background: $audio;
-        }
+        } // .__modal-editor .btn-plain.is-active
 
         &:disabled {
             background-color: rgba($black, 0.8);
             opacity: 0.7;
-        }
-    }
-}
+        } // .__modal-editor .btn-plain:disabled
+    } // .__modal-editor .btn-plain
+} // .__modal-editor
 
 @include media('max', 1023) {
     .__modal-editor {
         .image {
             max-width: 75vw !important;
-        }
-    }
-}
+        } // @include media('max', 1023) .__modal-editor .image
+    } // @include media('max', 1023) .__modal-editor
+} // @include media('max', 1023)
 
 // crop styles
 .cropper-line {
     background-color: transparent !important;
-}
+} // .cropper-line
 
 .cropper-point {
     z-index: 1;
@@ -220,7 +220,7 @@
     &.point-s,
     &.point-n {
         background-color: transparent !important;
-    }
+    } // .cropper-point.point-n
 
     &.point-ne,
     &.point-se,
@@ -231,39 +231,39 @@
         border-style: solid;
         height: 20px;
         width: 20px;
-    }
+    } // .cropper-point.point-sw
 
     &.point-ne {
         border-width: 3px 3px 0 0;
-    }
+    } // .cropper-point.point-ne
 
     &.point-nw {
         border-width: 3px 0 0 3px;
-    }
+    } // .cropper-point.point-nw
 
     &.point-se {
         border-width: 0 3px 3px 0;
-    }
+    } // .cropper-point.point-se
 
     &.point-sw {
         border-width: 0 0 3px 3px;
-    }
-}
+    } // .cropper-point.point-sw
+} // .cropper-point
 
 // filter slider
 #contentpopup2 {
     .title,
     .icon {
         color: $range;
-    }
+    } // #contentpopup2 .icon
 
     .range-neg {
         background-image: linear-gradient(to right, $editorBtns var(--length), $range var(--length), $range 50%, $editorBtns 50%) !important;
-    }
+    } // #contentpopup2 .range-neg
 
     .range-pos {
         background-image: linear-gradient(to right, $editorBtns 50%, $range 50%, $range var(--length), $editorBtns var(--length)) !important;
-    }
+    } // #contentpopup2 .range-pos
 
     input[type='range'] {
         -webkit-appearance: none;
@@ -284,7 +284,7 @@
             cursor: pointer;
             height: 1rem;
             width: 1rem;
-        }
+        } // #contentpopup2 input[type='range']::-webkit-slider-thumb
 
         &::-moz-range-thumb {
             background-color: $white;
@@ -292,9 +292,9 @@
             cursor: pointer;
             height: 1rem;
             width: 1rem;
-        }
-    }
-}
+        } // #contentpopup2 input[type='range']::-moz-range-thumb
+    } // #contentpopup2 input[type='range']
+} // #contentpopup2
 
 // tippy theme
 .tippy-tooltip.mm-theme {
@@ -303,5 +303,5 @@
 
     [x-arrow] {
         border-top-color: $black;
-    }
-}
+    } // .tippy-tooltip.mm-theme [x-arrow]
+} // .tippy-tooltip.mm-theme
diff --git a/src/resources/assets/sass/partials/utils.scss b/src/resources/assets/sass/partials/utils.scss
index 9a84607..fd80505 100644
--- a/src/resources/assets/sass/partials/utils.scss
+++ b/src/resources/assets/sass/partials/utils.scss
@@ -52,6 +52,10 @@
     cursor: pointer;
 } // .link
 
+.disabled {
+    cursor: not-allowed;
+} // .disabled
+
 .no-click {
     pointer-events: none;
 } // .no-click
diff --git a/src/resources/assets/sass/partials/vue.scss b/src/resources/assets/sass/partials/vue.scss
index 23adb94..dc3a6a5 100644
--- a/src/resources/assets/sass/partials/vue.scss
+++ b/src/resources/assets/sass/partials/vue.scss
@@ -1,4 +1,4 @@
-$list: (mm-list, mm-img-prv, mm-img-nxt, mm-img-dwn, mm-img-up, mm-info-in, mm-info-out, mm-slide, mm-counter, mm-gs);
+$list: (mm-list, mm-img-prv, mm-img-nxt, mm-img-dwn, mm-img-up, mm-info-in, mm-info-out, mm-slide, mm-gs);
 
 @each $class in $list {
     .#{$class}-enter-active,
@@ -87,9 +87,3 @@ $list: (mm-list, mm-img-prv, mm-img-nxt, mm-img-dwn, mm-img-up, mm-info-in, mm-i
 .mm-slide-leave-to {
     transform: translateX(-0.7rem);
 }
-
-/* counters */
-.mm-counter-enter,
-.mm-counter-leave-to {
-    transform: translateX(0.7rem);
-}
diff --git a/src/resources/lang/en/messages.php b/src/resources/lang/en/messages.php
index ecb6803..6315f36 100644
--- a/src/resources/lang/en/messages.php
+++ b/src/resources/lang/en/messages.php
@@ -3,7 +3,12 @@
 return [
     'space'     => 'Space',
     'backspace' => 'BackSpace',
+    'bookmarks' => [
+        'main'  => 'Bookmarks',
+        'add'   => 'Save Current Path',
+    ],
     'add'       => [
+        'main'       => 'Add',
         'added'      => 'Added',
         'folder'     => 'Add Folder',
         'new_folder' => 'Add New Folder',
diff --git a/src/resources/views/_manager.blade.php b/src/resources/views/_manager.blade.php
index 9bbf253..91752bb 100644
--- a/src/resources/views/_manager.blade.php
+++ b/src/resources/views/_manager.blade.php
@@ -12,7 +12,7 @@ class='hide-native-scrollbar'
         'previewFilesBeforeUpload' => config('mediaManager.preview_files_before_upload')
     ]) }}"
     :routes="{{ json_encode([
-        'files' => route('media.files'),
+        'files' => route('media.get_files'),
         'lock' => route('media.lock_file'),
         'visibility' => route('media.change_vis'),
         'upload' => route('media.upload'),
@@ -57,7 +57,11 @@ class='hide-native-scrollbar'
     :user-id="{{ config('mediaManager.enable_broadcasting') ? auth()->user()->id : 0 }}"
     :upload-panel-img-list="{{ $patterns ?: '[]' }}">
 
-    <div class="media-manager" :class="{'__stack-reverse': waitingForUpload}">
+    <div class="media-manager"
+        :class="[
+            {'__stack-reverse': waitingForUpload},
+            {'top-space': !inModal}
+        ]">
 
         {{-- content ratio bar --}}
         <transition name="mm-list" mode="out-in">
@@ -95,7 +99,7 @@ class='hide-native-scrollbar'
                                 <button class="button"
                                     ref="upload"
                                     :disabled="isLoading"
-                                    @click="toggleUploadPanel()"
+                                    @click.stop="toggleUploadPanel()"
                                     v-tippy
                                     title="u">
                                     <span class="icon"><icon name="shopping-basket"></icon></span>
@@ -107,7 +111,7 @@ class='hide-native-scrollbar'
                             <div class="control">
                                 <button class="button"
                                     :disabled="isLoading"
-                                    @click="createNewFolder()">
+                                    @click.stop="createNewFolder()">
                                     <span class="icon"><icon name="folder"></icon></span>
                                     <span>{{ trans('MediaManager::messages.add.folder') }}</span>
                                 </button>
@@ -125,7 +129,7 @@ class='hide-native-scrollbar'
                                     :disabled="isLoading || !movableItemsCount"
                                     v-tippy
                                     title="m / p"
-                                    @click="moveItem()">
+                                    @click.stop="moveItem()">
                                     <span class="icon"><icon name="share" scale="0.8"></icon></span>
                                     <span>{{ trans('MediaManager::messages.move.main') }}</span>
                                 </button>
@@ -135,8 +139,8 @@ class='hide-native-scrollbar'
                             <div class="control" v-if="!isBulkSelecting()">
                                 <button class="button is-link"
                                     ref="rename"
-                                    :disabled="item_ops()"
-                                    @click="renameItem()">
+                                    :disabled="ops_btn_disable"
+                                    @click.stop="renameItem()">
                                     <span class="icon"><icon name="terminal"></icon></span>
                                     <span>{{ trans('MediaManager::messages.rename.main') }}</span>
                                 </button>
@@ -146,10 +150,10 @@ class='hide-native-scrollbar'
                             <div class="control" v-show="!isBulkSelecting()">
                                 <button class="button is-link"
                                     ref="editor"
-                                    :disabled="item_ops() || !selectedFileIs('image')"
+                                    :disabled="editor_btn_disable"
                                     v-tippy
                                     title="e"
-                                    @click="imageEditor()">
+                                    @click.stop="imageEditor()">
                                     <span class="icon"><icon name="object-ungroup" scale="1.2"></icon></span>
                                     <span>{{ trans('MediaManager::messages.editor.main') }}</span>
                                 </button>
@@ -159,10 +163,10 @@ class='hide-native-scrollbar'
                             <div class="control">
                                 <button class="button is-link"
                                     ref="delete"
-                                    :disabled="item_ops()"
+                                    :disabled="ops_btn_disable"
                                     v-tippy
                                     title="d / del"
-                                    @click="deleteItem()">
+                                    @click.stop="deleteItem()">
                                     <span class="icon"><icon name="trash"></icon></span>
                                     <span>{{ trans('MediaManager::messages.delete.main') }}</span>
                                 </button>
@@ -193,10 +197,10 @@ class='hide-native-scrollbar'
                             <div class="control">
                                 <button class="button is-warning"
                                     ref="lock"
-                                    :disabled="lock_btn()"
+                                    :disabled="lock_btn_disable"
                                     v-tippy
                                     title="(L) ock"
-                                    @click="lockFileForm()">
+                                    @click.stop="lockFileForm()">
                                     <span class="icon">
                                         <icon :name="IsLocked(selectedFile) ? 'lock' : 'unlock'"></icon>
                                     </span>
@@ -208,10 +212,10 @@ class='hide-native-scrollbar'
                                 <button class="button"
                                     :class="IsVisible(selectedFile) ? 'is-light' : 'is-danger'"
                                     ref="visibility"
-                                    :disabled="vis_btn()"
+                                    :disabled="vis_btn_disable"
                                     v-tippy
                                     title="(V) isibility"
-                                    @click="FileVisibilityForm()">
+                                    @click.stop="FileVisibilityForm()">
                                     <span class="icon">
                                         <icon :name="IsVisible(selectedFile) ? 'eye' : 'eye-slash'"></icon>
                                     </span>
@@ -230,7 +234,7 @@ class='hide-native-scrollbar'
                         <div class="field" :class="{'has-addons' : isBulkSelecting()}">
                             {{-- bulk select all --}}
                             <div class="control">
-                                <button @click="blkSlctAll()"
+                                <button @click.stop="blkSlctAll()"
                                     ref="bulkSelectAll"
                                     class="button"
                                     :class="{'is-warning' : bulkSelectAll}"
@@ -251,7 +255,7 @@ class="button"
 
                             {{-- bulk select --}}
                             <div class="control">
-                                <button @click="blkSlct()"
+                                <button @click.stop="blkSlct()"
                                     ref="bulkSelect"
                                     class="button"
                                     :class="{'is-danger' : bulkSelect}"
@@ -265,9 +269,9 @@ class="button"
                         </div>
                     </div>
 
-                    <template v-if="allItemsCount">
+                    <template>
                        {{-- filter & sort --}}
-                        <div class="level-item" v-if="searchItemsCount != 0">
+                        <div class="level-item" v-if="searchItemsCount != 0 && allItemsCount">
                             <filter-and-sorting :disabled="isLoading"
                                 :filter-name-is="filterNameIs"
                                 :sort-name-is="sortNameIs"
@@ -294,8 +298,23 @@ class="button"
                             </filter-and-sorting>
                         </div>
 
+                        {{-- dir bookmarks --}}
+                        <div class="level-item" v-if="!restrictModeIsOn && firstRun">
+                            <dir-bookmarks :disabled="isLoading"
+                                :dir-bookmarks="dirBookmarks"
+                                :path="files.path"
+                                :translations="{{ json_encode([
+                                    'bm' => trans('MediaManager::messages.bookmarks.main'),
+                                    'add_to_list' => trans('MediaManager::messages.bookmarks.add'),
+                                    'reset' => trans('MediaManager::messages.crop.reset'),
+                                    'added' => trans('MediaManager::messages.add.added'),
+                                    'open' => trans('MediaManager::messages.open'),
+                                ]) }}">
+                            </dir-bookmarks>
+                        </div>
+
                         {{-- search --}}
-                        <div class="level-item">
+                        <div class="level-item" v-if="allItemsCount">
                             <div class="control">
                                 <div class="field has-addons">
                                     <p class="control" v-if="!restrictModeIsOn">
@@ -323,7 +342,7 @@ class="button"
                                         <button class="button is-black" :disabled="!searchFor"
                                             v-tippy
                                             title="{{ trans('MediaManager::messages.clear', ['attr' => trans('MediaManager::messages.search.main')]) }}"
-                                            @click="resetInput('searchFor')">
+                                            @click.stop="resetInput('searchFor')">
                                             <span class="icon"><icon name="times"></icon></span>
                                         </button>
                                     </p>
@@ -342,7 +361,7 @@ class="button"
             <div class="media-manager__dz" :class="{'__dz-active': uploadArea}">
                 <form id="new-upload" :style="uploadPanelImg">
                     <input type="hidden" name="upload_path" :value="files.path">
-                    <input type="hidden" name="random_names" :value="randomNames">
+                    <input type="hidden" name="random_names" :value="useRandomNamesForUpload">
 
                     {{-- text --}}
                     <div class="dz-message title is-4">{!! trans('MediaManager::messages.upload.text') !!}</div>
@@ -351,12 +370,12 @@ class="button"
                     <div class="form-switcher"
                         title="{{ trans('MediaManager::messages.upload.use_random_names') }}"
                         v-tippy="{arrow: true, position: 'right'}">
-                        <input type="checkbox" id="random_names" v-model="randomNames">
+                        <input type="checkbox" id="random_names" v-model="useRandomNamesForUpload">
                         <label class="switcher" for="random_names"></label>
                     </div>
 
                     {{-- urlToUpload --}}
-                    <div class="save_link" @click="toggleModal('save_link_modal')" v-if="!restrictUpload()">
+                    <div class="save_link" @click.stop="toggleModal('save_link_modal')" v-if="!restrictUpload()">
                         <span class="icon is-large"
                             title="{{ trans('MediaManager::messages.save.link') }}"
                             v-tippy="{arrow: true, position: 'left'}">
@@ -393,7 +412,7 @@ class="button"
                         {{-- add more files --}}
                         <button v-tippy="{arrow: true, position: 'left'}"
                             title="{{ trans('MediaManager::messages.add.more', ['attr' => null]) }} (u)"
-                            @click="toggleUploadPanel()"
+                            @click.stop="toggleUploadPanel()"
                             class="btn-plain">
                             <span class="icon is-large">
                                 <icon>
@@ -434,7 +453,7 @@ class="btn-plain">
                     </section>
                     <template v-for="file in uploadPreviewList">
                         <keep-alive v-if="checkForUploadedFile(file.name)">
-                            <upload-preview v-if="file.name == selectedUploadPreview"
+                            <upload-preview v-if="file.name == selectedUploadPreviewName"
                                 :key="file.name"
                                 :file="file"
                                 :file-type-is="fileTypeIs"
@@ -491,19 +510,17 @@ class="no_files"
                     <usage-intro-btn v-show="!isLoading && !waitingForUpload"></usage-intro-btn>
                 </div>
 
-                {{-- copy list --}}
-                <div class="movable-list extra-func-btns">
+                {{-- movable list --}}
+                <div v-if="allItemsCount && !isLoading && !waitingForUpload"
+                    class="movable-list extra-func-btns">
                     <v-touch class="btn-plain"
                         v-tippy="{arrow: true, hideOnClick: false}"
                         :title="inMovableList() ? '{{ trans('MediaManager::messages.add.added') }}' : '{{ trans('MediaManager::messages.add.list') }} (c / x)'"
                         @tap="addToMovableList()"
                         @dbltap="showMovableList()"
                         @hold="clearMovableList()">
-                        <span class="icon is-large">
-                            <icon>
-                                <icon class="circle" name="circle" scale="2.5"></icon>
-                                <icon name="shopping-cart" scale="1.5"></icon>
-                            </icon>
+                        <span class="icon">
+                            <icon name="shopping-cart" scale="1.2"></icon>
                         </span>
                         <span class="counter">@{{ movableItemsCount || null }}</span>
                     </v-touch>
@@ -531,10 +548,10 @@ class="no_files"
 
                     {{-- files --}}
                     <ul class="__files-boxs" ref="filesList">
-                        <li v-for="(file, index) in orderBy(filterBy(allFiles, searchFor, 'name'), sortName, sortDir)"
+                        <li v-for="(file, index) in orderBy(filterBy(allFiles, searchFor, 'name'), sortName, sortDirection)"
                             :key="file.name"
                             :data-file-index="index"
-                            @click="setSelected(file, index, $event)">
+                            @click.stop="setSelected(file, index, $event)">
                             <v-touch class="__file-box mm-animated"
                                 :class="{'bulk-selected': IsInBulkList(file), 'selected' : isSelected(file)}"
                                 @swipeup="swipGesture($event, file, index)"
@@ -551,7 +568,7 @@ class="__box-lock-icon icon"
                                     :class="IsLocked(file) ? 'is-danger' : 'is-success'"
                                     :title="IsLocked(file) ? '{{ trans('MediaManager::messages.unlock') }}' : '{{ trans('MediaManager::messages.lock') }}'"
                                     v-tippy="{arrow: true, hideOnClick: false}"
-                                    @click.stop="$refs.lock.click()">
+                                    @click.stop="lockFileForm(file)">
                                 </button>
 
                                 {{-- copy file link --}}
@@ -607,7 +624,9 @@ class="__box-copy-link icon"
                         </li>
                     </ul>
 
-                    <infinite-loading v-if="firstRun && files.next" spinner="waveDots" @infinite="loadPaginatedFiles">
+                    <infinite-loading v-if="firstRun && files.next"
+                                    spinner="waveDots"
+                                    @infinite="loadPaginatedFiles">
                         <span slot="no-more"></span>
                     </infinite-loading>
                 </v-touch>
@@ -625,7 +644,7 @@ class="__stack-sidebar is-hidden-touch"
                         <transition name="mm-slide" mode="out-in" appear>
                             {{-- no selection --}}
                             <div key="none-selected" class="__sidebar-none-selected" v-if="!selectedFile">
-                                <span @click="reset()" class="link"><icon name="power-off" scale="3.2"></icon></span>
+                                <span @click.stop="reset()" class="link"><icon name="power-off" scale="3.2"></icon></span>
                                 <p>{{ trans('MediaManager::messages.select.nothing') }}</p>
                             </div>
 
@@ -633,20 +652,20 @@ class="__stack-sidebar is-hidden-touch"
                             <image-preview v-else-if="selectedFileIs('image')"
                                 v-tippy="{arrow: true, position: 'left'}"
                                 title="{{ trans('MediaManager::messages.space') }}"
-                                :key="selectedFile.name"
+                                :key="selectedFile.storage_path"
                                 class="wrapper">
 
                                 <img :src="selectedFile.path"
                                     :alt="selectedFile.name"
                                     class="link image"
-                                    @click="isBulkSelecting() ? false : toggleModal('preview_modal')"/>
+                                    @click.stop="isBulkSelecting() ? false : toggleModal('preview_modal')"/>
                             </image-preview>
 
                             {{-- video --}}
                             <div v-else-if="selectedFileIs('video')"
                                 v-tippy="{arrow: true, position: 'left'}"
                                 title="{{ trans('MediaManager::messages.space') }}"
-                                :key="selectedFile.name">
+                                :key="selectedFile.storage_path">
                                 <video controls
                                     playsinline
                                     @loadedmetadata="saveVideoDimensions"
@@ -661,7 +680,7 @@ class="link image"
                             <div v-else-if="selectedFileIs('audio')"
                                 v-tippy="{arrow: true, position: 'left'}"
                                 title="{{ trans('MediaManager::messages.space') }}"
-                                :key="selectedFile.name">
+                                :key="selectedFile.storage_path">
                                 <template>
                                     <img v-if="audioFileMeta && audioFileMeta.cover"
                                         :src="audioFileMeta.cover"
@@ -680,39 +699,28 @@ class="is-hidden"
                             </div>
 
                             {{-- icons --}}
-                            <icon key="1"
-                                class="svg-prev-icon"
-                                v-else-if="selectedFileIs('folder')"
-                                name="folder" scale="4">
-                            </icon>
-
-                            <icon key="2"
-                                class="svg-prev-icon"
-                                v-else-if="selectedFileIs('application')"
-                                name="cogs" scale="4">
-                            </icon>
-
-                            <div key="3" v-else-if="selectedFileIs('pdf')"
+                            <div key="pdf" v-else-if="selectedFileIs('pdf')"
                                 class="link"
                                 v-tippy="{arrow: true, position: 'left'}"
                                 title="{{ trans('MediaManager::messages.space') }}"
-                                @click="toggleModal('preview_modal')">
+                                @click.stop="toggleModal('preview_modal')">
                                 <icon class="svg-prev-icon" name="file-pdf-o" scale="4"></icon>
                             </div>
 
-                            <div key="4" v-else-if="selectedFileIs('text')"
+                            <div key="text" v-else-if="selectedFileIs('text')"
                                 class="link"
                                 v-tippy="{arrow: true, position: 'left'}"
                                 title="{{ trans('MediaManager::messages.space') }}"
-                                @click="toggleModal('preview_modal')">
+                                @click.stop="toggleModal('preview_modal')">
                                 <icon class="svg-prev-icon" name="file-text-o" scale="4"></icon>
                             </div>
 
-                            <icon key="5"
-                                class="svg-prev-icon"
-                                v-else-if="selectedFileIs('compressed')"
-                                name="file-archive-o" scale="4">
-                            </icon>
+                            <icon-types v-else
+                                classes="svg-prev-icon"
+                                :file="selectedFile"
+                                :file-type-is="fileTypeIs"
+                                :scale="4"
+                                :except="['image', 'audio', 'video', 'pdf', 'text']"/>
                         </transition>
                     </div>
 
@@ -886,7 +894,7 @@ class="__sidebar-info"
                         </transition>
 
                         {{-- items count --}}
-                        <transition-group tag="div" name="mm-counter" class="__sidebar-count">
+                        <div class="__sidebar-count">
                             {{-- all --}}
                             <div key="1" v-if="allItemsCount">
                                 <p class="title is-1">@{{ allItemsCount }}</p>
@@ -915,11 +923,11 @@ class="__sidebar-info"
                                 <p v-show="bulkItemsSize" class="title is-6 has-text-weight-semibold">@{{ bulkItemsSize }}</p>
                                 <p class="heading">{{ trans('MediaManager::messages.select.selected') }}</p>
                             </div>
-                        </transition-group>
+                        </div>
                     </div>
                 </v-touch>
 
-                <v-touch v-else-if="!infoSidebar && !smallScreen"
+                <v-touch v-else-if="!infoSidebar && !isASmallScreen"
                     class="__sidebar-swipe-hidden"
                     @swiperight="toggleInfoSidebar(), saveUserPref()"
                     @swipeleft="toggleInfoSidebar(), saveUserPref()">
@@ -930,81 +938,84 @@ class="__sidebar-swipe-hidden"
 
             {{-- path toolbar --}}
             <section class="__stack-breadcrumb level is-mobile">
-                {{-- directories breadCrumb --}}
                 <div class="level-left">
-                    <nav class="breadcrumb has-arrow-separator is-hidden-touch">
-                        <transition-group tag="ul" name="mm-list">
-                            <li key="library-bc">
-                                <a v-if="navigationDirs.length > 0 && !(isBulkSelecting() || isLoading)"
-                                    class="p-l-0 level"
-                                    v-tippy
-                                    title="{{ trans('MediaManager::messages.backspace') }}"
-                                    @click="goToFolder(0)">
-                                    <span class="icon level-item is-marginless"><icon name="map"></icon></span>
-                                    <span class="level-item m-l-5 is-marginless">{{ trans('MediaManager::messages.library') }}</span>
-                                </a>
-                                <p v-else class="p-l-0 level">
-                                    <span class="icon level-item is-marginless"><icon name="map-o"></icon></span>
-                                    <span class="level-item m-l-5 is-marginless">{{ trans('MediaManager::messages.library') }}</span>
-                                </p>
-                            </li>
-
-                            <li v-for="(folder, index) in navigationDirs" :key="`${index}-${folder}`">
-                                <p v-if="isLastItemByIndex(index, navigationDirs) || isBulkSelecting() || isLoading"
-                                    class="level">
-                                    <span class="icon level-item is-marginless"><icon name="folder-open-o"></icon></span>
-                                    <span class="level-item m-l-5 is-marginless">@{{ folder }}</span>
-                                </p>
-                                <a v-else
-                                    v-tippy
-                                    title="{{ trans('MediaManager::messages.backspace') }}"
-                                    class="level"
-                                    @click="navigationDirs.length > 1 ? goToFolder(index+1) : false">
-                                    <span class="icon level-item is-marginless"><icon name="folder"></icon></span>
-                                    <span class="level-item m-l-5 is-marginless">@{{ folder }}</span>
-                                </a>
-                            </li>
-                        </transition-group>
-                    </nav>
-
-                </div>
+                    {{-- directories breadCrumb --}}
+                    <div class="level-item">
+                        <nav class="breadcrumb has-arrow-separator is-hidden-touch">
+                            <transition-group tag="ul" name="mm-list">
+                                <li key="library-bc">
+                                    <a v-if="pathBarDirsList.length > 0 && !(isBulkSelecting() || isLoading)"
+                                        class="p-l-0 level"
+                                        v-tippy
+                                        title="{{ trans('MediaManager::messages.backspace') }}"
+                                        @click.stop="goToFolder(0)">
+                                        <span class="icon level-item is-marginless"><icon name="map"></icon></span>
+                                        <span class="level-item m-l-5 is-marginless">{{ trans('MediaManager::messages.library') }}</span>
+                                    </a>
+                                    <p v-else class="p-l-0 level">
+                                        <span class="icon level-item is-marginless"><icon name="map-o"></icon></span>
+                                        <span class="level-item m-l-5 is-marginless">{{ trans('MediaManager::messages.library') }}</span>
+                                    </p>
+                                </li>
 
-                {{-- upload preview info --}}
-                <div class="level-right" v-if="waitingForUpload">
-                    <nav class="breadcrumb">
-                        <ul>
-                            <li><p class="level has-text-weight-bold">@{{ uploadPreviewList.length }} File's</p></li>
-                            <li><p class="level has-text-weight-bold">@{{ uploadPreviewListSize }}</p></li>
-                        </ul>
-                    </nav>
+                                <li v-for="(folder, index) in pathBarDirsList" :key="`${index}-${folder}`">
+                                    <p v-if="isLastItemByIndex(index, pathBarDirsList) || isBulkSelecting() || isLoading"
+                                        class="level">
+                                        <span class="icon level-item is-marginless"><icon name="folder-open-o"></icon></span>
+                                        <span class="level-item m-l-5 is-marginless">@{{ folder }}</span>
+                                    </p>
+                                    <a v-else
+                                        v-tippy
+                                        title="{{ trans('MediaManager::messages.backspace') }}"
+                                        class="level"
+                                        @click.stop="pathBarDirsList.length > 1 ? goToFolder(index+1) : false">
+                                        <span class="icon level-item is-marginless"><icon name="folder"></icon></span>
+                                        <span class="level-item m-l-5 is-marginless">@{{ folder }}</span>
+                                    </a>
+                                </li>
+                            </transition-group>
+                        </nav>
+                    </div>
                 </div>
 
-                {{-- toggle sidebar --}}
-                <div class="level-right" v-show="!isLoading && !waitingForUpload">
-                    <div class="is-hidden-touch"
-                        @click="toggleInfoSidebar(), saveUserPref()"
-                        v-tippy
-                        title="t"
-                        v-if="allItemsCount">
-                        <transition :name="infoSidebar ? 'mm-info-out' : 'mm-info-in'" mode="out-in">
-                            <div :key="infoSidebar ? 1 : 2" class="__stack-sidebar-toggle has-text-link">
-                                <template v-if="infoSidebar">
-                                    <span>{{ trans('MediaManager::messages.close') }}</span>
-                                    <span class="icon"><icon name="angle-double-right"></icon></span>
-                                </template>
-                                <template v-else>
-                                    <span>{{ trans('MediaManager::messages.open') }}</span>
-                                    <span class="icon"><icon name="angle-double-left"></icon></span>
-                                </template>
-                            </div>
-                        </transition>
+                <div class="level-right">
+                     {{-- upload preview info --}}
+                    <div class="level-item" v-if="waitingForUpload">
+                        <nav class="breadcrumb">
+                            <ul>
+                                <li><p class="level has-text-weight-bold">@{{ uploadPreviewList.length }} File's</p></li>
+                                <li><p class="level has-text-weight-bold">@{{ uploadPreviewListSize }}</p></li>
+                            </ul>
+                        </nav>
                     </div>
 
-                    {{-- show/hide toolbar --}}
-                    <div class="is-hidden-desktop">
-                        <button class="button is-link __stack-left-toolbarToggle" @click="toolBar = !toolBar">
-                            <span class="icon"><icon :name="toolBar ? 'times' : 'bars'"></icon></span>
-                        </button>
+                    {{-- toggle sidebar --}}
+                    <div class="level-item" v-show="!isLoading && !waitingForUpload">
+                        <div class="is-hidden-touch"
+                            @click.stop="toggleInfoSidebar(), saveUserPref()"
+                            v-tippy
+                            title="t"
+                            v-if="allItemsCount">
+                            <transition :name="infoSidebar ? 'mm-info-out' : 'mm-info-in'" mode="out-in">
+                                <div :key="infoSidebar ? 1 : 2" class="__stack-sidebar-toggle has-text-link">
+                                    <template v-if="infoSidebar">
+                                        <span>{{ trans('MediaManager::messages.close') }}</span>
+                                        <span class="icon"><icon name="angle-double-right"></icon></span>
+                                    </template>
+                                    <template v-else>
+                                        <span>{{ trans('MediaManager::messages.open') }}</span>
+                                        <span class="icon"><icon name="angle-double-left"></icon></span>
+                                    </template>
+                                </div>
+                            </transition>
+                        </div>
+
+                        {{-- show/hide toolbar --}}
+                        <div class="is-hidden-desktop">
+                            <button class="button is-link __stack-left-toolbarToggle" @click.stop="toolBar = !toolBar">
+                                <span class="icon"><icon :name="toolBar ? 'times' : 'bars'"></icon></span>
+                            </button>
+                        </div>
                     </div>
                 </div>
             </section>
diff --git a/src/resources/views/extras/editor.blade.php b/src/resources/views/extras/editor.blade.php
index aa0787e..8061f17 100644
--- a/src/resources/views/extras/editor.blade.php
+++ b/src/resources/views/extras/editor.blade.php
@@ -1,2 +1,2 @@
-<button class="__Inmodal-editor" @click="toggleModalFor('editor')"></button>
-<button class="__Inmodal-editor-hide" @click="hideInputModal()"></button>
+<button class="__Inmodal-editor" @click.stop="toggleModalFor('editor')"></button>
+<button class="__Inmodal-editor-hide" @click.stop="hideInputModal()"></button>
diff --git a/src/resources/views/extras/modal.blade.php b/src/resources/views/extras/modal.blade.php
index b0dd33b..c573b60 100644
--- a/src/resources/views/extras/modal.blade.php
+++ b/src/resources/views/extras/modal.blade.php
@@ -1,10 +1,10 @@
 {{-- manager --}}
 <div class="modal mm-animated fadeIn is-active modal-manager__Inmodal">
-    <div class="modal-background" @click="hideInputModal()"></div>
+    <div class="modal-background" @click.stop="hideInputModal()"></div>
     <div class="modal-content mm-animated fadeInDown">
         <div class="box">
             @include('MediaManager::_manager', ['modal' => true])
         </div>
     </div>
-    <button class="modal-close is-large is-hidden-touch" @click="hideInputModal()"></button>
+    <button class="modal-close is-large is-hidden-touch" @click.stop="hideInputModal()"></button>
 </div>
diff --git a/src/resources/views/partials/card.blade.php b/src/resources/views/partials/card.blade.php
index ac154b4..0d2dfe8 100644
--- a/src/resources/views/partials/card.blade.php
+++ b/src/resources/views/partials/card.blade.php
@@ -71,7 +71,7 @@ class="image">
         {{-- name --}}
         <p class="title is-marginless">
             <span class="link"
-                @click="copyLink(selectedFile.path)"
+                @click.stop="copyLink(selectedFile.path)"
                 :title="linkCopied ? trans('copied') : trans('to_cp')"
                 v-tippy="{arrow: true, hideOnClick: false, followCursor: true}"
                 @hidden="linkCopied = false">
@@ -104,7 +104,7 @@ class="icon is-large link"
                         :class="IsLocked(selectedFile) ? 'is-danger' : 'is-success'"
                         :title="IsLocked(selectedFile) ? '{{ trans('MediaManager::messages.unlock') }}' : '{{ trans('MediaManager::messages.lock') }}'"
                         v-tippy="{arrow: true, hideOnClick: false}"
-                        @click="$refs.lock.click()">
+                        @click.stop="$refs.lock.click()">
                         <icon :name="IsLocked(selectedFile) ? 'lock' : 'unlock'" scale="1.1"></icon>
                     </span>
                 </div>
@@ -116,7 +116,7 @@ class="icon is-large link"
                         :class="IsVisible(selectedFile) ? 'is-success' : 'is-danger'"
                         title="{{ trans('MediaManager::messages.visibility.set') }}"
                         v-tippy
-                        @click="$refs.visibility.click()">
+                        @click.stop="$refs.visibility.click()">
                         <icon :name="IsVisible(selectedFile) ? 'eye' : 'eye-slash'" scale="1.1"></icon>
                     </span>
                 </div>
@@ -140,8 +140,8 @@ class="icon is-large link"
         {{-- move --}}
         <div class="card-footer-item">
             <button class="button btn-plain is-fullwidth"
-                :disabled="item_ops()"
-                @click="moveItem()">
+                :disabled="ops_btn_disable"
+                @click.stop="moveItem()">
                 <span class="icon is-small"><icon name="share"></icon></span>
                 <span>{{ trans('MediaManager::messages.move.main') }}</span>
             </button>
@@ -150,8 +150,8 @@ class="icon is-large link"
         {{-- rename --}}
         <div class="card-footer-item">
             <button class="button btn-plain is-fullwidth"
-                :disabled="item_ops()"
-                @click="renameItem()">
+                :disabled="ops_btn_disable"
+                @click.stop="renameItem()">
                 <span class="icon is-small"><icon name="terminal"></icon></span>
                 <span>{{ trans('MediaManager::messages.rename.main') }}</span>
             </button>
@@ -160,8 +160,8 @@ class="icon is-large link"
         {{-- editor --}}
         <div class="card-footer-item" v-if="selectedFileIs('image')">
             <button class="button btn-plain is-fullwidth"
-                :disabled="item_ops()"
-                @click="imageEditorCard()">
+                :disabled="ops_btn_disable"
+                @click.stop="imageEditorCard()">
                 <span class="icon"><icon name="object-ungroup" scale="1.2"></icon></span>
                 <span>{{ trans('MediaManager::messages.editor.main') }}</span>
             </button>
@@ -170,8 +170,8 @@ class="icon is-large link"
         {{-- delete --}}
         <div class="card-footer-item">
             <button class="button btn-plain is-fullwidth"
-                :disabled="item_ops()"
-                @click="deleteItem()">
+                :disabled="ops_btn_disable"
+                @click.stop="deleteItem()">
                 <span class="icon is-small"><icon name="trash" scale="1.2"></icon></span>
                 <span>{{ trans('MediaManager::messages.delete.main') }}</span>
             </button>
diff --git a/src/resources/views/partials/mobile-nav.blade.php b/src/resources/views/partials/mobile-nav.blade.php
index 96a0262..fe764f3 100644
--- a/src/resources/views/partials/mobile-nav.blade.php
+++ b/src/resources/views/partials/mobile-nav.blade.php
@@ -1,24 +1,24 @@
 <transition-group tag="ul"
     class="__stack-breadcrumb-mobile is-hidden-desktop"
     ref="bc"
-    v-if="navigationDirs.length > 0"
+    v-if="pathBarDirsList.length > 0"
     name="mm-list">
     <li id="library-bc" key="library-bc">
-        <a v-if="navigationDirs.length > 0 && !(isBulkSelecting() || isLoading)"
+        <a v-if="pathBarDirsList.length > 0 && !(isBulkSelecting() || isLoading)"
             v-tippy
             title="{{ trans('MediaManager::messages.backspace') }}"
-            @click="goToFolder(0)">
+            @click.stop="goToFolder(0)">
             {{ trans('MediaManager::messages.library') }}
         </a>
         <p v-else>{{ trans('MediaManager::messages.library') }}</p>
     </li>
 
-    <li v-for="(folder, index) in navigationDirs" :id="folder + '-bc'" :key="`${index}_${folder}`">
-        <p v-if="isLastItemByIndex(index, navigationDirs) || isBulkSelecting() || isLoading">@{{ folder }}</p>
+    <li v-for="(folder, index) in pathBarDirsList" :id="folder + '-bc'" :key="`${index}_${folder}`">
+        <p v-if="isLastItemByIndex(index, pathBarDirsList) || isBulkSelecting() || isLoading">@{{ folder }}</p>
         <a v-else
             v-tippy
             title="{{ trans('MediaManager::messages.backspace') }}"
-            @click="navigationDirs.length > 1 ? goToFolder(index+1) : false">
+            @click.stop="pathBarDirsList.length > 1 ? goToFolder(index+1) : false">
             @{{ folder }}
         </a>
     </li>
diff --git a/src/resources/views/partials/modal/del-files-info.blade.php b/src/resources/views/partials/modal/del-files-info.blade.php
index b375607..bb4455f 100644
--- a/src/resources/views/partials/modal/del-files-info.blade.php
+++ b/src/resources/views/partials/modal/del-files-info.blade.php
@@ -5,14 +5,7 @@
         <div class="media" v-for="one in bulkItemsFilter" :key="one.path">
             <figure class="media-left">
                 <span class="icon has-text-link">
-                    <icon v-if="fileTypeIs(one, 'folder')" name="folder" scale="1.2"></icon>
-                    <icon v-else-if="fileTypeIs(one, 'application')" name="cogs" scale="1.2"></icon>
-                    <icon v-else-if="fileTypeIs(one, 'compressed')" name="file-archive-o" scale="1.2"></icon>
-                    <icon v-else-if="fileTypeIs(one, 'image')" name="image" scale="1.2"></icon>
-                    <icon v-else-if="fileTypeIs(one, 'video')" name="film" scale="1.2"></icon>
-                    <icon v-else-if="fileTypeIs(one, 'audio')" name="music" scale="1.2"></icon>
-                    <icon v-else-if="fileTypeIs(one, 'pdf')" name="file-pdf-o" scale="1.2"></icon>
-                    <icon v-else-if="fileTypeIs(one, 'text')" name="file-text-o" scale="1.2"></icon>
+                    <icon-types :file="selectedFile" :file-type-is="fileTypeIs"/>
                 </span>
             </figure>
             <div class="media-content">
@@ -53,14 +46,7 @@
         <div class="media">
             <figure class="media-left">
                 <span class="icon has-text-link">
-                    <icon v-if="selectedFileIs('folder')" name="folder" scale="1.8"></icon>
-                    <icon v-else-if="selectedFileIs('application')" name="cogs" scale="1.8"></icon>
-                    <icon v-else-if="selectedFileIs('compressed')" name="file-archive-o" scale="1.8"></icon>
-                    <icon v-else-if="selectedFileIs('image')" name="image" scale="1.8"></icon>
-                    <icon v-else-if="selectedFileIs('video')" name="film" scale="1.8"></icon>
-                    <icon v-else-if="selectedFileIs('audio')" name="music" scale="1.8"></icon>
-                    <icon v-else-if="selectedFileIs('pdf')" name="file-pdf-o" scale="1.8"></icon>
-                    <icon v-else-if="selectedFileIs('text')" name="file-text-o" scale="1.8"></icon>
+                    <icon-types :file="selectedFile" :file-type-is="fileTypeIs" :scale="1.8"/>
                 </span>
             </figure>
             <div class="media-content">
diff --git a/src/resources/views/partials/modal/mov-files-info.blade.php b/src/resources/views/partials/modal/mov-files-info.blade.php
index 269ad19..4e9d441 100644
--- a/src/resources/views/partials/modal/mov-files-info.blade.php
+++ b/src/resources/views/partials/modal/mov-files-info.blade.php
@@ -1,22 +1,15 @@
 {{-- multi --}}
 <template v-if="movableItemsFilter.length">
-    <transition-group tag="div" name="mm-slide">
-        <div class="media link"
+    <ul>
+        <li class="media link"
             v-for="(one, i) in movableItemsFilter"
             :key="one.path"
             v-tippy="{arrow: true, position: 'bottom'}"
             title="{{ trans('MediaManager::messages.remove') }}"
-            @click="removeFromMovableList(i)">
+            @click.stop="removeFromMovableList(i)">
             <figure class="media-left">
                 <span class="icon has-text-link">
-                    <icon v-if="fileTypeIs(one, 'folder')" name="folder" scale="1.2"></icon>
-                    <icon v-else-if="fileTypeIs(one, 'application')" name="cogs" scale="1.2"></icon>
-                    <icon v-else-if="fileTypeIs(one, 'compressed')" name="file-archive-o" scale="1.2"></icon>
-                    <icon v-else-if="fileTypeIs(one, 'image')" name="image" scale="1.2"></icon>
-                    <icon v-else-if="fileTypeIs(one, 'video')" name="film" scale="1.2"></icon>
-                    <icon v-else-if="fileTypeIs(one, 'audio')" name="music" scale="1.2"></icon>
-                    <icon v-else-if="fileTypeIs(one, 'pdf')" name="file-pdf-o" scale="1.2"></icon>
-                    <icon v-else-if="fileTypeIs(one, 'text')" name="file-text-o" scale="1.2"></icon>
+                    <icon-types :file="one" :file-type-is="fileTypeIs"/>
                 </span>
             </figure>
             <div class="media-content">
@@ -29,8 +22,8 @@
             <figure class="media-right">
                 <span class="delete"></span>
             </figure>
-        </div>
-    </transition-group>
+        </li>
+    </ul>
 
     {{-- total size --}}
     <p v-if="movableItemsFilterSize" class="__modal-delete-total">
diff --git a/src/resources/views/partials/modal/ops.blade.php b/src/resources/views/partials/modal/ops.blade.php
index 6a24a2f..5bfc740 100644
--- a/src/resources/views/partials/modal/ops.blade.php
+++ b/src/resources/views/partials/modal/ops.blade.php
@@ -2,7 +2,7 @@
     {{-- preview_modal --}}
     <div v-if="isActiveModal('preview_modal')"
         class="modal mm-animated fadeIn is-active __modal-preview">
-        <div class="modal-background link" @click="toggleModal()"></div>
+        <div class="modal-background link" @click.stop="toggleModal()"></div>
         <div class="mm-animated fadeInDown __modal-content-wrapper">
             <transition :name="`mm-img-${imageSlideDirection}`"
                 mode="out-in"
@@ -13,7 +13,7 @@ class="modal mm-animated fadeIn is-active __modal-preview">
                 </div>
             </transition>
         </div>
-        <button class="modal-close is-large" @click="toggleModal()"></button>
+        <button class="modal-close is-large" @click.stop="toggleModal()"></button>
     </div>
 
     {{-- image_editor --}}
@@ -43,19 +43,19 @@ class="modal mm-animated fadeIn is-active __modal-editor">
                 ]) }}">
             </image-editor>
         </div>
-        <button class="modal-close is-large" @click="toggleModal()"></button>
+        <button class="modal-close is-large" @click.stop="toggleModal()"></button>
     </div>
 
     {{-- save_link --}}
     <div class="modal mm-animated fadeIn"
         :class="{'is-active': isActiveModal('save_link_modal')}">
-        <div class="modal-background link" @click="toggleModal()"></div>
+        <div class="modal-background link" @click.stop="toggleModal()"></div>
         <div class="modal-card mm-animated fadeInDown">
             <header class="modal-card-head is-black">
                 <p class="modal-card-title">
                     <span>{{ trans('MediaManager::messages.save.link') }}</span>
                 </p>
-                <button type="button" class="delete" @click="toggleModal()"></button>
+                <button type="button" class="delete" @click.stop="toggleModal()"></button>
             </header>
 
             <form action="{{ route('media.uploadLink') }}" @submit.prevent="saveLinkForm($event)">
@@ -66,7 +66,7 @@ class="modal mm-animated fadeIn is-active __modal-editor">
                         ref="save_link_modal_input">
                 </section>
                 <footer class="modal-card-foot">
-                    <button type="reset" class="button" @click="toggleModal()">
+                    <button type="reset" class="button" @click.stop="toggleModal()">
                         {{ trans('MediaManager::messages.cancel') }}
                     </button>
                     <button type="submit"
@@ -83,13 +83,13 @@ class="button is-link"
     {{-- new_folder_modal --}}
     <div class="modal mm-animated fadeIn"
         :class="{'is-active': isActiveModal('new_folder_modal')}">
-        <div class="modal-background link" @click="toggleModal()"></div>
+        <div class="modal-background link" @click.stop="toggleModal()"></div>
         <div class="modal-card mm-animated fadeInDown">
             <header class="modal-card-head is-link">
                 <p class="modal-card-title">
                     <span>{{ trans('MediaManager::messages.add.new_folder') }}</span>
                 </p>
-                <button type="button" class="delete" @click="toggleModal()"></button>
+                <button type="button" class="delete" @click.stop="toggleModal()"></button>
             </header>
 
             <form action="{{ route('media.new_folder') }}" @submit.prevent="NewFolderForm($event)">
@@ -100,7 +100,7 @@ class="button is-link"
                         ref="new_folder_modal_input">
                 </section>
                 <footer class="modal-card-foot">
-                    <button type="reset" class="button" @click="toggleModal()">
+                    <button type="reset" class="button" @click.stop="toggleModal()">
                         {{ trans('MediaManager::messages.cancel') }}
                     </button>
                     <button type="submit"
@@ -117,13 +117,13 @@ class="button is-link"
     {{-- rename_file_modal --}}
     <div class="modal mm-animated fadeIn"
         :class="{'is-active': isActiveModal('rename_file_modal')}">
-        <div class="modal-background link" @click="toggleModal()"></div>
+        <div class="modal-background link" @click.stop="toggleModal()"></div>
         <div class="modal-card mm-animated fadeInDown">
             <header class="modal-card-head is-warning">
                 <p class="modal-card-title">
                     <span>{{ trans('MediaManager::messages.rename.file_folder') }}</span>
                 </p>
-                <button type="button" class="delete" @click="toggleModal()"></button>
+                <button type="button" class="delete" @click.stop="toggleModal()"></button>
             </header>
 
             <form action="{{ route('media.rename_file') }}" @submit.prevent="RenameFileForm($event)">
@@ -136,7 +136,7 @@ class="button is-link"
                         @focus="newFilename = selectedFileIs('folder') ? selectedFile.name : getFileName(selectedFile.name)">
                 </section>
                 <footer class="modal-card-foot">
-                    <button type="reset" class="button" @click="toggleModal()">
+                    <button type="reset" class="button" @click.stop="toggleModal()">
                         {{ trans('MediaManager::messages.cancel') }}
                     </button>
                     <button type="submit"
@@ -153,24 +153,24 @@ class="button is-warning"
     {{-- move_file_modal --}}
     <div class="modal mm-animated fadeIn"
         :class="{'is-active': isActiveModal('move_file_modal')}">
-        <div class="modal-background link" @click="toggleModal()"></div>
+        <div class="modal-background link" @click.stop="toggleModal()"></div>
         <form class="modal-card mm-animated fadeInDown"
             action="{{ route('media.move_file') }}"
             @submit.prevent="MoveFileForm($event)">
             <header class="modal-card-head is-warning">
                 <p class="modal-card-title">
-                    <transition :name="useCopy ? 'mm-info-in' : 'mm-info-out'" mode="out-in">
-                        <span class="icon" :key="useCopy ? 1 : 2">
-                            <icon :name="useCopy ? 'clone' : 'share'"></icon>
+                    <transition :name="copyFilesNotMove ? 'mm-info-in' : 'mm-info-out'" mode="out-in">
+                        <span class="icon" :key="copyFilesNotMove ? 1 : 2">
+                            <icon :name="copyFilesNotMove ? 'clone' : 'share'"></icon>
                         </span>
                     </transition>
 
                     <transition name="mm-list" mode="out-in">
-                        <span key="1" v-if="useCopy">{{ trans('MediaManager::messages.copy.file_folder') }}</span>
+                        <span key="1" v-if="copyFilesNotMove">{{ trans('MediaManager::messages.copy.file_folder') }}</span>
                         <span key="2" v-else>{{ trans('MediaManager::messages.move.file_folder') }}</span>
                     </transition>
                 </p>
-                <button type="button" class="delete" @click="toggleModal()"></button>
+                <button type="button" class="delete" @click.stop="toggleModal()"></button>
             </header>
 
             <section class="modal-card-body">
@@ -189,7 +189,7 @@ class="button is-warning"
                     <div class="level-left">
                         <div class="level-item">
                             <div class="form-switcher">
-                                <input type="checkbox" name="use_copy" id="use_copy" v-model="useCopy">
+                                <input type="checkbox" name="use_copy" id="use_copy" v-model="copyFilesNotMove">
                                 <label class="switcher" for="use_copy"></label>
                             </div>
                         </div>
@@ -203,14 +203,14 @@ class="button is-warning"
                         <div class="level-item">
                             <button type="reset"
                                 class="button"
-                                @click="toggleModal()">
+                                @click.stop="toggleModal()">
                                 {{ trans('MediaManager::messages.cancel') }}
                             </button>
                         </div>
                         <div class="level-item">
                             <button type="reset"
                                 class="button is-danger"
-                                @click="clearMovableList()">
+                                @click.stop="clearMovableList()">
                                 {{ trans('MediaManager::messages.crop.reset') }}
                             </button>
                         </div>
@@ -232,13 +232,13 @@ class="button is-warning"
     {{-- confirm_delete_modal --}}
     <div class="modal mm-animated fadeIn"
         :class="{'is-active': isActiveModal('confirm_delete_modal')}">
-        <div class="modal-background link" @click="toggleModal()"></div>
+        <div class="modal-background link" @click.stop="toggleModal()"></div>
         <div class="modal-card mm-animated fadeInDown">
             <header class="modal-card-head is-danger">
                 <p class="modal-card-title">
                     <span>{{ trans('MediaManager::messages.are_you_sure_delete') }}</span>
                 </p>
-                <button type="button" class="delete" @click="toggleModal()"></button>
+                <button type="button" class="delete" @click.stop="toggleModal()"></button>
             </header>
 
             <form action="{{ route('media.delete_file') }}"
@@ -247,14 +247,14 @@ class="button is-warning"
                     @include('MediaManager::partials.modal.del-files-info')
 
                     {{-- deleting folder warning --}}
-                    <h5 v-show="folderWarning" class="__modal-folder-warning">
+                    <h5 v-show="folderDeleteWarning" class="__modal-folder-warning">
                         <span class="icon is-medium"><icon name="warning" scale="1.2"></icon></span>
                         <span>{{ trans('MediaManager::messages.delete.folder') }}</span>
                     </h5>
                 </section>
 
                 <footer class="modal-card-foot">
-                    <button type="reset" class="button" @click="toggleModal()">
+                    <button type="reset" class="button" @click.stop="toggleModal()">
                         {{ trans('MediaManager::messages.cancel') }}
                     </button>
                     <button type="submit"