diff --git a/README.md b/README.md
index 2511d34..a3424b9 100644
--- a/README.md
+++ b/README.md
@@ -35,9 +35,9 @@
 - [install dependencies](https://github.com/ctf0/Laravel-Media-Manager/wiki/Packages-In-Use)
 
   ```bash
-  yarn add vue vue-ls vue-async-computed vue-tippy@v1 vue2-filters vue-notif vue-clipboard2 vue-awesome@v2 vue-touch@next idb-keyval axios dropzone cropperjs keycode date-fns lottie-web laravel-echo fuse.js
+  yarn add vue vue-ls vue-async-computed vue-tippy@v1 vue2-filters vue-notif vue-clipboard2 vue-awesome@v2 vue-touch@next idb-keyval axios dropzone cropperjs keycode date-fns lottie-web fuse.js
   # or
-  npm install vue vue-ls vue-async-computed vue-tippy@v1 vue2-filters vue-notif vue-clipboard2 vue-awesome@v2 vue-touch@next idb-keyval axios dropzone cropperjs keycode date-fns lottie-web laravel-echo fuse.js --save
+  npm install vue vue-ls vue-async-computed vue-tippy@v1 vue2-filters vue-notif vue-clipboard2 vue-awesome@v2 vue-touch@next idb-keyval axios dropzone cropperjs keycode date-fns lottie-web fuse.js --save
   ```
 
 - run `npm run watch` to compile your `js/css` files.
@@ -229,6 +229,8 @@ return [
     /**
      * do you want to enable broadcasting the changes
      * made by one user to others ?
+     *
+     * "laravel-echo" must be installed
      */
     'enable_broadcasting' => false
 ];
@@ -238,5 +240,22 @@ return [
 
 ## Usage
 
-- visit `localhost:8000/media`
-- [Wiki](https://github.com/ctf0/Laravel-Media-Manager/wiki)
+**1-** make sure you have pre-initiated vue
+```js
+// app.js
+
+window.Vue = require('vue');
+
+new Vue({
+  el: '#app'
+})
+```
+
+**2-** under `resources/views/vendor/MediaManager/media.blade.php` update the path to that js file
+```html
+<script src="{{ asset("path/to/app.js") }}"></script>
+```
+
+**3-** visit `localhost:8000/media`
+
+### [Check The Wiki](https://github.com/ctf0/Laravel-Media-Manager/wiki)
diff --git a/logs/v3.1.2.txt b/logs/v3.1.2.txt
deleted file mode 100644
index d3c450f..0000000
--- a/logs/v3.1.2.txt
+++ /dev/null
@@ -1,18 +0,0 @@
-## New
-
-- config option “enable_broadcasting”
-- global search
-- keyboard navigate by row
-- use natural sort “natsort” for items
-
-
-## Fix
-
-- dirs name after lock/unlock
-- pdf file having 2 icons
-- using the refresh btn even when its disabled
-- incorrect mobile nav file name
-
-## Removed
-
-- item hover shadow
\ No newline at end of file
diff --git a/logs/v3.1.3.txt b/logs/v3.1.3.txt
new file mode 100644
index 0000000..ab39ff3
--- /dev/null
+++ b/logs/v3.1.3.txt
@@ -0,0 +1,3 @@
+- remove audio notifs
+- cleanup
+- fix scrollbyrow after toggle info sidebar
\ No newline at end of file
diff --git a/src/MediaManagerServiceProvider.php b/src/MediaManagerServiceProvider.php
index f6c155b..3811e80 100644
--- a/src/MediaManagerServiceProvider.php
+++ b/src/MediaManagerServiceProvider.php
@@ -74,10 +74,10 @@ protected function extraConfigs()
         $db = storage_path('logs/MediaManager.sqlite');
 
         if ($this->file->exists($db)) {
-            config(['database.connections.mediamanager' => [
+            $this->app['config']->set('database.connections.mediamanager', [
                 'driver'   => 'sqlite',
                 'database' => $db,
-            ]]);
+            ]);
         }
     }
 
@@ -108,9 +108,8 @@ protected function viewComp()
 
         view()->composer('MediaManager::_manager', function ($view) use ($url, $patterns, $config) {
             $view->with([
-               'base_url'              => preg_replace('/\/+$/', '/', $url),
-               'patterns'              => json_encode($patterns),
-               'mobile_alt_navigation' => array_get($config, 'mobile_alt_navigation'),
+               'base_url' => preg_replace('/\/+$/', '/', $url),
+               'patterns' => json_encode($patterns),
            ]);
         });
     }
diff --git a/src/config/mediaManager.php b/src/config/mediaManager.php
index f22f3e2..3787ce9 100644
--- a/src/config/mediaManager.php
+++ b/src/config/mediaManager.php
@@ -81,6 +81,8 @@
     /*
      * do you want to enable broadcasting the changes
      * made by one user to others ?
+     *
+     * "laravel-echo" must be installed
      */
     'enable_broadcasting' => false,
 ];
diff --git a/src/dist/audio/alert.mp3 b/src/dist/audio/alert.mp3
deleted file mode 100644
index 9a0e8b3..0000000
Binary files a/src/dist/audio/alert.mp3 and /dev/null differ
diff --git a/src/dist/audio/success.mp3 b/src/dist/audio/success.mp3
deleted file mode 100644
index f8a58cb..0000000
Binary files a/src/dist/audio/success.mp3 and /dev/null differ
diff --git a/src/resources/assets/js/components/globalSearch/panel.vue b/src/resources/assets/js/components/globalSearch/panel.vue
index 1b12ad7..0312721 100644
--- a/src/resources/assets/js/components/globalSearch/panel.vue
+++ b/src/resources/assets/js/components/globalSearch/panel.vue
@@ -122,7 +122,6 @@
 
 <script>
 import debounce from 'lodash/debounce'
-import Fuse from 'fuse.js'
 
 export default {
     data() {
diff --git a/src/resources/assets/js/components/media.vue b/src/resources/assets/js/components/media.vue
index d7b1fee..aa838f0 100644
--- a/src/resources/assets/js/components/media.vue
+++ b/src/resources/assets/js/components/media.vue
@@ -178,7 +178,6 @@ export default {
             // check if image was edited
             EventHub.listen('image-edited', (msg) => {
                 this.imageWasEdited = true
-                this.$refs['success-audio'].play()
                 this.removeCachedResponse().then(() => {
                     this.showNotif(`${this.trans('save_success')} "${msg}"`)
                 })
diff --git a/src/resources/assets/js/manager.js b/src/resources/assets/js/manager.js
index 906e223..fe636fd 100644
--- a/src/resources/assets/js/manager.js
+++ b/src/resources/assets/js/manager.js
@@ -1,8 +1,7 @@
 /*                Libs                */
-window.Vue = require('vue')
 window.EventHub = require('vuemit')
 window.keycode = require('keycode')
-window.Dropzone = require('dropzone')
+window.Fuse = require('fuse.js')
 
 Vue.use(require('vue2-filters'))
 Vue.use(require('vue-clipboard2'))
diff --git a/src/resources/assets/js/modules/download.js b/src/resources/assets/js/modules/download.js
index 6053dce..4efc003 100644
--- a/src/resources/assets/js/modules/download.js
+++ b/src/resources/assets/js/modules/download.js
@@ -12,7 +12,6 @@ export default {
                     downloadFile(e.path)
                 })
 
-                this.$refs['success-audio'].play()
                 return this.showNotif('All Done')
             }
 
diff --git a/src/resources/assets/js/modules/form.js b/src/resources/assets/js/modules/form.js
index b7f5aaf..4b6d757 100644
--- a/src/resources/assets/js/modules/form.js
+++ b/src/resources/assets/js/modules/form.js
@@ -59,7 +59,6 @@ export default {
                         manager.showProgress = false
 
                         if (clearCache) {
-                            manager.$refs['success-audio'].play()
                             manager.removeCachedResponse().then(() => {
                                 last
                                     ? manager.getFiles(manager.folders, null, last)
@@ -444,7 +443,6 @@ export default {
 
                     if (clearCache) {
                         this.clearImageCache()
-                        this.$refs['success-audio'].play()
                         this.removeCachedResponse(destination == '../' ? null : destination, cacheNamesList).then(() => {
                             if (this.allItemsCount) {
                                 this.isBulkSelecting()
@@ -508,7 +506,6 @@ export default {
                 })
 
                 if (clearCache) {
-                    this.$refs['success-audio'].play()
                     this.removeCachedResponse(null, cacheNamesList).then(() => {
                         this.isBulkSelecting()
                             ? this.blkSlct()
diff --git a/src/resources/assets/js/modules/lock.js b/src/resources/assets/js/modules/lock.js
index 76e2ea0..e4dc735 100644
--- a/src/resources/assets/js/modules/lock.js
+++ b/src/resources/assets/js/modules/lock.js
@@ -80,8 +80,6 @@ export default {
                 })
 
                 this.updateLockOps(data)
-
-                this.$refs['success-audio'].play()
                 this.resetInput(['currentFilterName'])
                 this.isBulkSelecting() ? this.blkSlct() : false
                 this.removeCachedResponse()
diff --git a/src/resources/assets/js/modules/utils.js b/src/resources/assets/js/modules/utils.js
index b9b3373..d6809f1 100644
--- a/src/resources/assets/js/modules/utils.js
+++ b/src/resources/assets/js/modules/utils.js
@@ -180,7 +180,6 @@ export default {
         ajaxError() {
             this.toggleInfo = false
             this.toggleLoader('ajax_error', true)
-            this.$refs['alert-audio'].play()
             EventHub.fire('ajax-error-show')
         },
 
@@ -211,37 +210,31 @@ export default {
             return arr.filter((e) => e)
         },
         showNotif(msg, s = 'success', duration = 3) {
-            if (msg) {
-                if (s == 'danger') {
-                    this.$refs['alert-audio'].play()
-                }
-
-                let title
-
-                switch (s) {
-                    case 'black':
-                    case 'danger':
-                        title = 'Error'
-                        duration = null
-                        break
-                    case 'warning':
-                        title = 'Warning'
-                        break
-                    case 'info':
-                        title = 'Info'
-                        duration = 5
-                        break
-                    default:
-                        title = 'Success'
-                }
-
-                EventHub.fire('showNotif', {
-                    title: title,
-                    body: msg,
-                    type: s,
-                    duration: duration
-                })
+            let title
+
+            switch (s) {
+                case 'black':
+                case 'danger':
+                    title = 'Error'
+                    duration = null
+                    break
+                case 'warning':
+                    title = 'Warning'
+                    break
+                case 'info':
+                    title = 'Info'
+                    duration = 5
+                    break
+                default:
+                    title = 'Success'
             }
+
+            EventHub.fire('showNotif', {
+                title: title,
+                body: msg,
+                type: s,
+                duration: duration
+            })
         }
     }
 }
diff --git a/src/resources/assets/js/modules/visibility.js b/src/resources/assets/js/modules/visibility.js
index a63b8de..77b1bf7 100644
--- a/src/resources/assets/js/modules/visibility.js
+++ b/src/resources/assets/js/modules/visibility.js
@@ -37,7 +37,6 @@ export default {
                     }
                 })
 
-                this.$refs['success-audio'].play()
                 this.isBulkSelecting() ? this.blkSlct() : false
                 this.removeCachedResponse()
 
diff --git a/src/resources/assets/js/modules/watch.js b/src/resources/assets/js/modules/watch.js
index 509e796..049020c 100644
--- a/src/resources/assets/js/modules/watch.js
+++ b/src/resources/assets/js/modules/watch.js
@@ -157,6 +157,7 @@ export default {
         toggleInfo() {
             if (!this.firstRun && this.currentFileIndex) {
                 this.$nextTick(debounce(() => {
+                    this.scrollByRow()
                     this.scrollToSelected(this.getElementByIndex(this.currentFileIndex))
                 }, 500))
             }
diff --git a/src/resources/assets/sass/media.scss b/src/resources/assets/sass/media.scss
index 620ec54..d719886 100644
--- a/src/resources/assets/sass/media.scss
+++ b/src/resources/assets/sass/media.scss
@@ -335,10 +335,10 @@
     li {
         display: flex;
         flex: 1;
-        min-width: 244px;
-        max-width: 244px;
-        min-height: 95px;
-        max-height: 95px;
+        min-width: 250px;
+        max-width: 250px;
+        // min-height: 100px;
+        max-height: 100px;
     }
 }
 
@@ -414,17 +414,21 @@
         }
 
         .__box-img {
+            position: relative;
             overflow: hidden;
-            width: 53px;
-            height: 51px;
+            width: 50px;
+            height: 50px;
             border: 1px dashed darken($active_theme, 25%);
-            border-radius: 3px 3px 5px 5px;
+            border-radius: 4px;
 
             img {
+                position: absolute;
+                top: 0;
+                left: 0;
                 width: 100%;
                 height: 100%;
-                object-fit: fill;
-                object-position: center;
+                // object-fit: fill;
+                // object-position: center;
             }
         }
     }
diff --git a/src/resources/views/_manager.blade.php b/src/resources/views/_manager.blade.php
index 507aadf..296fc21 100644
--- a/src/resources/views/_manager.blade.php
+++ b/src/resources/views/_manager.blade.php
@@ -42,10 +42,6 @@
 
     <div class="" id="manager-container">
 
-        {{-- notif-audio --}}
-        <audio ref="alert-audio" src="{{ asset('assets/vendor/MediaManager/audio/alert.mp3') }}"></audio>
-        <audio ref="success-audio" src="{{ asset('assets/vendor/MediaManager/audio/success.mp3') }}"></audio>
-
         {{-- global search --}}
         <global-search-panel></global-search-panel>