diff --git a/composer.json b/composer.json
index cb43d65..e99b2d1 100644
--- a/composer.json
+++ b/composer.json
@@ -12,13 +12,13 @@
     "homepage": "https://github.com/laravel-backpack/filemanager",
     "keywords": ["Laravel", "FileManager"],
     "require": {
-        "backpack/crud": "^6.0",
+        "backpack/crud": "^7.0.0-beta",
         "barryvdh/laravel-elfinder": "^0.5.2"
     },
     "require-dev": {
-        "phpunit/phpunit": "^10.0",
+        "phpunit/phpunit": "^10.0|^11.0",
         "mockery/mockery": "^1.5",
-        "orchestra/testbench": "^8"
+        "orchestra/testbench": "^8|^9|^10|^11"
     },
     "autoload": {
         "psr-4": {
diff --git a/readme.md b/readme.md
index 1ae23f1..ae032ad 100644
--- a/readme.md
+++ b/readme.md
@@ -34,17 +34,25 @@ That's it. Hit refresh in your admin panel, and you'll find a new sidebar item p
 
 You can use elFinder in Backpack:
 - stand-alone, by accessing the ```/admin/elfinder``` route (see screenshot above);
-- inside the [```browse```](https://backpackforlaravel.com/docs/4.1/crud-fields#browse), [```browse_multiple```](https://backpackforlaravel.com/docs/4.1/crud-fields#browse_multiple) or [```ckeditor```](https://backpackforlaravel.com/docs/4.1/crud-fields#ckeditor) field types;
+- inside the [```browse```](https://backpackforlaravel.com/docs/4.1/crud-fields#browse), [```browse_multiple```](https://backpackforlaravel.com/docs/4.1/crud-fields#browse_multiple);
+
+## Customization
+
+You can publish the views to your `resources/views/vendor/backpack/filemanager` folder by running:
+
+```bash
+php vendor:publish --provider="Backpack\FileManager\FileManagerServiceProvider" --tag="elfinder-views"
+php vendor:publish --provider="Backpack\FileManager\FileManagerServiceProvider" --tag="elfinder-fields"
+php vendor:publish --provider="Backpack\FileManager\FileManagerServiceProvider" --tag="elfinder-columns"
+
+```
 
 ## Upgrade
 
-To upgrade from v2 to v3 of this package:
+To upgrade from v3 to v4 of this package:
 ```bash
 # remove the published blade views
 rm -rf resources/views/vendor/elfinder
-
-# publish the new blade views
-php artisan backpack:filemanager:install
 ```
 
 ## Security
diff --git a/resources/assets/css/elfinder.backpack.theme.css b/resources/assets/css/elfinder.backpack.theme.css
deleted file mode 100644
index 10c1fee..0000000
--- a/resources/assets/css/elfinder.backpack.theme.css
+++ /dev/null
@@ -1,127 +0,0 @@
-/**
- * Laravel Backpack theme for elFinder.
- * Required jquery ui "smoothness" theme.
- *
- * @author Cristian Tabacitu [hello@tabacitu.ro]
- **/
-
-body.elfinder { margin:0; }
-body #elfinder.ui-widget-content { 
-    border: 1px solid #cccccc;
-    background: #ffffff;
-    color: #23282c;
-    border-radius: 3px!important;
-}
-
-.elfinder-cwd-icon:before {
-	background: #ccc;
-}
-
-#elfinder .ui-state-default, 
-#elfinder .ui-widget-content .ui-state-default, 
-#elfinder .ui-widget-header .ui-state-default {
-	background: #e6e6e6;
-}
-
-.elfinder-contextmenu .ui-state-hover {
-	color: black!important;
-}
-
-.elfinder-cwd-file.ui-state-hover, 
-.elfinder-cwd-file.ui-widget-content .ui-state-hover, 
-.elfinder-cwd-file.ui-widget-header .ui-state-hover, 
-.elfinder-cwd-file.ui-state-focus, 
-.elfinder-cwd-file.ui-widget-content .ui-state-focus, 
-.elfinder-cwd-file.ui-widget-header .ui-state-focus {
-	background: transparent!important;
-	/*border: 1px solid #ccc;*/
-}
-
-.elfinder-cwd-view-icons .elfinder-cwd-file .elfinder-cwd-filename.ui-state-hover, 
-.elfinder-cwd table td.ui-state-hover, 
-.elfinder-button-menu .ui-state-hover {
-	/*color: black!important;*/
-	/*font-weight: bold;*/
-}
-
-.elfinder .elfinder-contextmenu, .elfinder .elfinder-contextmenu-sub {
-	border: 1px solid #ccc!important;
-}
-
-/* input textarea */
-.elfinder input,
-.elfinder textarea {
-	color: #000;
-	background-color: #FFF;
-}
-
-/* dialogs */
-.std42-dialog, .std42-dialog .ui-widget-content { background-color:#ededed; background-image:none; background-clip: content-box; }
-
-/* navbar */
-.elfinder .elfinder-navbar { background:#dde4eb; }
-.elfinder-navbar .ui-state-hover  { color:#000; background-color:#edf1f4; border-color:#bdcbd8; }
-.elfinder-navbar-root.ui-state-active.ui-state-hover  { color:white; background: #3875d7!important;  }
-.elfinder-navbar .ui-state-active { background: #3875d7;    border-color:#3875d7; color:#fff; }
-.elfinder-navbar .elfinder-droppable-active {background:#A7C6E5 !important;}
-/* disabled elfinder */
-.elfinder-disabled .elfinder-navbar .ui-state-active { background: #dadada; border-color:#aaa; color:#fff; }
-
-
-/* current directory */
-/* selected file in "icons" view */
-.elfinder-cwd-view-icons .elfinder-cwd-file .ui-state-hover { background:#ccc; }
-
-/* list view*/
-.elfinder-cwd table thead td.ui-state-hover { background:#ddd; }
-.elfinder-cwd table tr:nth-child(odd) { background-color:#edf3fe; }
-.elfinder-cwd table tr {
-	border: 1px solid transparent;
-	border-top:1px solid #fff;
-}
-.elfinder-cwd .elfinder-droppable-active td { background:#A7C6E5 !important; }
-
-
-/* common selected background/color */
-.elfinder-cwd-view-icons .elfinder-cwd-file .elfinder-cwd-filename.ui-state-hover,
-.elfinder-cwd table td.ui-state-hover,
-.elfinder-button-menu .ui-state-hover { background: #3875d7; color:#fff;}
-/* disabled elfinder */
-.elfinder-disabled .elfinder-cwd-view-icons .elfinder-cwd-file .elfinder-cwd-filename.ui-state-hover,
-.elfinder-disabled .elfinder-cwd table td.ui-state-hover { background:#dadada;}
-
-/* statusbar */
-.elfinder .elfinder-statusbar { color:#555; }
-.elfinder .elfinder-statusbar a { text-decoration:none; color:#555;}
-
-
-.std42-dialog .elfinder-help, .std42-dialog .elfinder-help .ui-widget-content { background:#fff;}
-
-/* contextmenu */
-.elfinder-contextmenu .ui-state-hover { background: #3875d7; color:#fff; }
-/* .elfinder-contextmenu .ui-state-hover .elfinder-contextmenu-arrow { background-image:url('../img/arrows-active.png'); } */
-
-/* jquery-ui overwrites */
-.ui-widget-header {
-	background: #cccccc;
-	border: none;
-}
-
-.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br {
-	border-bottom-right-radius: 0;
-}
-.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl {
-	border-bottom-left-radius: 0;
-}
-.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr {
-	border-top-right-radius: 0;
-}
-.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl {
-	border-top-left-radius: 0;
-}
-.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus {
-	background: #dadada;
-}
-.elfinder-navbar-root .ui-state-hover {
-	background: #3875d7!important;
-}
\ No newline at end of file
diff --git a/resources/views/ckeditor4.blade.php b/resources/views/ckeditor4.blade.php
deleted file mode 100644
index 0e47561..0000000
--- a/resources/views/ckeditor4.blade.php
+++ /dev/null
@@ -1,67 +0,0 @@
-<!DOCTYPE html>
-<html lang="{{ app()->getLocale() }}">
-    <head>
-        
-        @include('vendor.elfinder.common_scripts')
-        @include('vendor.elfinder.common_styles')
-
-        <!-- elFinder initialization (REQUIRED) -->
-        <script type="text/javascript" charset="utf-8">
-            // Helper function to get parameters from the query string.
-            function getUrlParam(paramName) {
-                var reParam = new RegExp('(?:[\?&]|&amp;)' + paramName + '=([^&]+)', 'i') ;
-                var match = window.location.search.match(reParam) ;
-
-                return (match && match.length > 1) ? match[1] : '' ;
-            }
-
-            $().ready(function() {
-                var funcNum = getUrlParam('CKEditorFuncNum');
-                var theme = 'default';
-
-                var elf = $('#elfinder').elfinder({
-                    // set your elFinder options here
-                    @if($locale)
-                        lang: '{{ $locale }}', // locale
-                    @endif
-                    customData: { 
-                        _token: '{{ csrf_token() }}'
-                    },
-                    url: '{{ route("elfinder.connector") }}',  // connector URL
-                    soundPath: '{{ Basset::getUrl(base_path("vendor/studio-42/elfinder/sounds")) }}',
-                    getFileCallback : function(file) {
-                        window.opener.CKEDITOR.tools.callFunction(funcNum, file.url);
-                        window.close();
-                    },
-                    themes: {
-                        default : 'https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme/manifests/material-gray.json',
-                        dark : 'https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme/manifests/material-default.json',
-                    },
-                    theme: theme
-                },
-                function(fm, extraObj) {
-                    fm.bind('open', function() {
-                        setElFinderColorMode();
-                    });
-                }).elfinder('instance');
-
-                function isElfinderInDarkMode() {
-                    return typeof window.parent?.colorMode !== 'undefined' && window.parent.colorMode.result === 'dark';
-                }
-
-                function setElFinderColorMode() {
-                    theme = isElfinderInDarkMode() ? 'dark' : 'default';
-
-                    let instance = $('#elfinder').elfinder('instance');
-                    instance.changeTheme(theme).storage('theme', theme);
-                }
-            });
-        </script>
-    </head>
-    <body>
-
-        <!-- Element where elFinder will be created (REQUIRED) -->
-        <div id="elfinder"></div>
-
-    </body>
-</html>
diff --git a/resources/views/ckeditor4.php b/resources/views/ckeditor4.php
deleted file mode 100644
index 5191c12..0000000
--- a/resources/views/ckeditor4.php
+++ /dev/null
@@ -1,83 +0,0 @@
-<!DOCTYPE html>
-<html lang="<?= app()->getLocale() ?>">
-    <head>
-        <meta charset="utf-8">
-        <title>elFinder 2.0</title>
-
-        <!-- jQuery and jQuery UI (REQUIRED) -->
-        <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
-        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
-        <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
-
-        <!-- elFinder CSS (REQUIRED) -->
-        <link rel="stylesheet" type="text/css" href="<?= asset($dir.'/css/elfinder.min.css') ?>">
-        <link rel="stylesheet" type="text/css" href="<?= asset($dir.'/css/theme.css') ?>">
-
-        <!-- elFinder JS (REQUIRED) -->
-        <script src="<?= asset($dir.'/js/elfinder.min.js') ?>"></script>
-
-        <?php if ($locale) { ?>
-            <!-- elFinder translation (OPTIONAL) -->
-            <script src="<?= asset($dir."/js/i18n/elfinder.$locale.js") ?>"></script>
-        <?php } ?>
-        
-        <!-- elFinder initialization (REQUIRED) -->
-        <script type="text/javascript" charset="utf-8">
-            // Helper function to get parameters from the query string.
-            function getUrlParam(paramName) {
-                var reParam = new RegExp('(?:[\?&]|&amp;)' + paramName + '=([^&]+)', 'i') ;
-                var match = window.location.search.match(reParam) ;
-
-                return (match && match.length > 1) ? match[1] : '' ;
-            }
-
-            $().ready(function() {
-                var funcNum = getUrlParam('CKEditorFuncNum');
-                var theme = 'default';
-
-                var elf = $('#elfinder').elfinder({
-                    // set your elFinder options here
-                    <?php if ($locale) { ?>
-                        lang: '<?= $locale ?>', // locale
-                    <?php } ?>
-                    customData: { 
-                        _token: '<?= csrf_token() ?>'
-                    },
-                    url: '<?= route('elfinder.connector') ?>',  // connector URL
-                    soundPath: '<?= asset($dir.'/sounds') ?>',
-                    getFileCallback : function(file) {
-                        window.opener.CKEDITOR.tools.callFunction(funcNum, file.url);
-                        window.close();
-                    },
-                    themes: {
-                        default : 'https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme/manifests/material-gray.json',
-                        dark : 'https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme/manifests/material-default.json',
-                    },
-                    theme: theme
-                },
-                function(fm, extraObj) {
-                    fm.bind('open', function() {
-                        setElFinderColorMode();
-                    });
-                }).elfinder('instance');
-
-                function isElfinderInDarkMode() {
-                    return typeof window.parent?.colorMode !== 'undefined' && window.parent.colorMode.result === 'dark';
-                }
-
-                function setElFinderColorMode() {
-                    theme = isElfinderInDarkMode() ? 'dark' : 'default';
-
-                    let instance = $('#elfinder').elfinder('instance');
-                    instance.changeTheme(theme).storage('theme', theme);
-                }
-            });
-        </script>
-    </head>
-    <body>
-
-            <!-- Element where elFinder will be created (REQUIRED) -->
-            <div id="elfinder"></div>
-
-    </body>
-</html>
diff --git a/resources/views/columns/browse.blade.php b/resources/views/columns/browse.blade.php
new file mode 100644
index 0000000..13fde85
--- /dev/null
+++ b/resources/views/columns/browse.blade.php
@@ -0,0 +1,4 @@
+@php
+	$column['disk'] = $column['disk'] ?? null;
+@endphp
+@include('crud::columns.upload')
\ No newline at end of file
diff --git a/resources/views/columns/browse_multiple.blade.php b/resources/views/columns/browse_multiple.blade.php
new file mode 100644
index 0000000..95e1528
--- /dev/null
+++ b/resources/views/columns/browse_multiple.blade.php
@@ -0,0 +1,4 @@
+@php
+	$column['disk'] = $column['disk'] ?? null;
+@endphp
+@include('crud::columns.upload_multiple')
\ No newline at end of file
diff --git a/resources/views/common_scripts.blade.php b/resources/views/common_scripts.blade.php
index 650218f..4fd8fa2 100644
--- a/resources/views/common_scripts.blade.php
+++ b/resources/views/common_scripts.blade.php
@@ -1,21 +1,27 @@
-        {{-- jQuery (REQUIRED) --}}
-        @if (!isset ($jquery) || (isset($jquery) && $jquery == true))
-        @basset('https://unpkg.com/jquery@3.6.1/dist/jquery.min.js')
-        @endif
+{{-- jQuery (REQUIRED) --}}
+@if (!isset ($jquery) || (isset($jquery) && $jquery == true))
+	@basset('https://cdn.jsdelivr.net/npm/jquery@3.6.1/dist/jquery.min.js', true, [
+		'integrity' => 'sha384-i61gTtaoovXtAbKjo903+O55Jkn2+RtzHtvNez+yI49HAASvznhe9sZyjaSHTau9', 
+		'crossorigin' => 'anonymous'
+	])
+@endif
 
-        {{-- jQuery UI and Smoothness theme --}}
-        @bassetArchive('https://github.com/jquery/jquery-ui/archive/refs/tags/1.13.2.tar.gz', 'jquery-ui-1.13.2')
-        @basset('jquery-ui-1.13.2/jquery-ui-1.13.2/dist/themes/smoothness/jquery-ui.min.css')
-        @basset('jquery-ui-1.13.2/jquery-ui-1.13.2/dist/jquery-ui.min.js')
+{{-- jQuery UI and Smoothness theme --}}
+@basset('https://raw.githubusercontent.com/jquery/jquery-ui/refs/tags/1.13.2/dist/jquery-ui.min.js', true, [
+	'integrity' => 'sha384-4D3G3GikQs6hLlLZGdz5wLFzuqE9v4yVGAcOH86y23JqBDPzj9viv0EqyfIa6YUL', 
+	'crossorigin' => 'anonymous'
+])
 
-        {{-- elFinder JS (REQUIRED) --}}
-        @bassetArchive('https://github.com/Studio-42/elFinder/archive/refs/tags/2.1.64.tar.gz', 'elfinder-2.1.64')
-        @basset('elfinder-2.1.64/elFinder-2.1.64/js/elfinder.min.js')
+{{-- elFinder JS (REQUIRED) --}}
+@basset('https://raw.githubusercontent.com/Studio-42/elFinder/refs/tags/2.1.64/js/elfinder.min.js', true, [
+	'integrity' => 'sha384-Ow1wKIUQLS9bOa23gn7yT91nyowDhk2zK1lO7G5Hnxlh3bvTPNH7c5uODf7/jIec', 
+	'crossorigin' => 'anonymous'
+])
 
-        {{-- elFinder translation (OPTIONAL) --}}
-        @if($locale)
-        @basset('https://cdnjs.cloudflare.com/ajax/libs/elfinder/2.1.64/js/i18n/elfinder.'.$locale.'.min.js')
-        @endif
+{{-- elFinder translation (OPTIONAL) --}}
+@if($locale)
+	@basset('bp-elfinder-i18n-'.$locale)
+@endif
 
-        {{-- elFinder sounds --}}
-        @basset(base_path('vendor/studio-42/elfinder/sounds/rm.wav'))
+{{-- elFinder sounds --}}
+@basset(base_path('vendor/studio-42/elfinder/sounds/rm.wav'))
diff --git a/resources/views/common_styles.blade.php b/resources/views/common_styles.blade.php
index cabe921..fb0e5cc 100644
--- a/resources/views/common_styles.blade.php
+++ b/resources/views/common_styles.blade.php
@@ -1,28 +1,32 @@
 <meta charset="utf-8">
 <title>File Manager</title>
 {{-- elFinder CSS (REQUIRED) --}}
-@php
-    $themeStylesheetVersion = '3.0.0';
-@endphp
-@bassetArchive('https://github.com/Studio-42/elFinder/archive/refs/tags/2.1.64.tar.gz', 'elfinder-2.1.64')
-@basset('elfinder-2.1.64/elFinder-2.1.64/css/elfinder.min.css')
-@basset('https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme@'.$themeStylesheetVersion.'/Material/css/theme.min.css')
-@basset('https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme@'.$themeStylesheetVersion.'/Material/images/loading.svg', false)
-@basset('https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme@'.$themeStylesheetVersion.'/Material/font/material.eot', false)
-@basset('https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme@'.$themeStylesheetVersion.'/Material/font/material.svg', false)
-@basset('https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme@'.$themeStylesheetVersion.'/Material/images/icons-big.svg', false)
-@basset('https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme@'.$themeStylesheetVersion.'/Material/images/icons-small.svg', false)
-@basset('https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme@'.$themeStylesheetVersion.'/Material/font/material.woff', false)
-@basset('https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme@'.$themeStylesheetVersion.'/Material/font/material.ttf', false)
-@basset('https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme@'.$themeStylesheetVersion.'/Material/font/material.woff2', false)
-
+@basset('https://raw.githubusercontent.com/Studio-42/elFinder/refs/tags/2.1.64/img/icons-big.svg', false, [
+    'integrity' => 'sha384-BWeb84E4ly6GgjPMWRpJNB+I8XpW+xqF9kezQR6PNqXP0pmjHi8iqlGZs0JRgHlu', 
+    'crossorigin' => 'anonymous'
+])
+@basset('https://raw.githubusercontent.com/Studio-42/elFinder/refs/tags/2.1.64/img/logo.png', false, [
+    'integrity' => 'sha384-mAtths5Wl6rU0MrgaCz2bJRTIG8LhA1pLZ4ZX+Qo9fQRjlKFxb5eLWUO3pZ7Aioq', 
+    'crossorigin' => 'anonymous'
+])
+@basset('https://raw.githubusercontent.com/Studio-42/elFinder/refs/tags/2.1.64/css/elfinder.min.css', true, [
+    'integrity' => 'sha384-O+x3Lv203m3W8SILSSf8xt2ryvN+CEx3s9tpGloi3D6UQ+1BkbXPuSxEj7uhKKCs', 
+    'crossorigin' => 'anonymous'
+])
+@basset('https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme@3.0.0/Material/css/theme.min.css')
+@basset('https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme@3.0.0/Material/images/loading.svg', false)
+@basset('https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme@3.0.0/Material/font/material.eot', false)
+@basset('https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme@3.0.0/Material/font/material.svg', false)
+@basset('https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme@3.0.0/Material/images/icons-big.svg', false)
+@basset('https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme@3.0.0/Material/images/icons-small.svg', false)
+@basset('https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme@3.0.0/Material/font/material.woff', false)
+@basset('https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme@3.0.0/Material/font/material.ttf', false)
+@basset('https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme@3.0.0/Material/font/material.woff2', false)
 @bassetBlock('elfinderThemeSwitcherScript.js')
 <script type="text/javascript">
 document.addEventListener('DOMContentLoaded', function() {
     function getElfinderStyleSheet(main = true) {
-        let themeStylesheetVersion = '{{$themeStylesheetVersion}}';
-        const regex =  new RegExp(main ? `RobiNN1\/elFinder-Material-Theme@${themeStylesheetVersion}\/Material\/css\/theme\.min\.css` : `RobiNN1\/elFinder-Material-Theme@${themeStylesheetVersion}\/Material\/css\/theme-gray\.min\.css`);
-        const linkElements = document.querySelectorAll('link[rel="stylesheet"]');
+    const regex = new RegExp(main ? `RobiNN1\/elFinder-Material-Theme@3.0.0\/Material\/css\/theme\.min\.css` : `RobiNN1\/elFinder-Material-Theme@3.0.0\/Material\/css\/theme-gray\.min\.css`);        const linkElements = document.querySelectorAll('link[rel="stylesheet"]');
         // Find the main elfinder stylesheet
         let selectedLinkElement;
         for (const linkElement of linkElements) {
@@ -35,7 +39,7 @@ function getElfinderStyleSheet(main = true) {
     }
 
     function addElfinderLightStylesheet() {
-        let themeLightAsset = `{{ Basset::basset('https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme@'.$themeStylesheetVersion.'/Material/css/theme-gray.min.css') }}`;
+        let themeLightAsset = `{{ Basset::basset('https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme@3.0.0/Material/css/theme-gray.min.css') }}`;
         const match = themeLightAsset.match(/<link\s+href="([^"]+)"/i);
         if (match && match.length > 1) {
             let mainStyleSheet = getElfinderStyleSheet();
diff --git a/resources/views/elfinder.blade.php b/resources/views/elfinder.blade.php
index 7308e48..32fa32d 100644
--- a/resources/views/elfinder.blade.php
+++ b/resources/views/elfinder.blade.php
@@ -2,8 +2,8 @@
 
 @section('after_scripts')
 
-        @include('vendor.elfinder.common_scripts')
-        @include('vendor.elfinder.common_styles')
+        @include('backpack.filemanager::common_scripts')
+        @include('backpack.filemanager::common_styles')
 
         <!-- elFinder initialization (REQUIRED) -->
         <script type="text/javascript" charset="utf-8">
@@ -39,6 +39,12 @@
     </section>
 @endsection
 
+@section('header')
+    <section class="header-operation container-fluid animated fadeIn d-flex mb-2 align-items-baseline d-print-none" bp-section="page-header">
+        <h1 class="text-capitalize mb-0" bp-section="page-heading">{{ trans('backpack::crud.file_manager') }}</h1>
+    </section>
+@endsection
+
 @section('content')
 
         <!-- Element where elFinder will be created (REQUIRED) -->
diff --git a/resources/views/elfinder.php b/resources/views/elfinder.php
deleted file mode 100644
index bb1b1f6..0000000
--- a/resources/views/elfinder.php
+++ /dev/null
@@ -1,72 +0,0 @@
-<!DOCTYPE html>
-<html lang="<?= app()->getLocale() ?>">
-    <head>
-        <meta charset="utf-8">
-        <title>elFinder 2.0</title>
-
-        <!-- jQuery and jQuery UI (REQUIRED) -->
-        <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
-        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
-        <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
-
-        <!-- elFinder CSS (REQUIRED) -->
-        <link rel="stylesheet" type="text/css" href="<?= asset($dir.'/css/elfinder.min.css') ?>">
-        <link rel="stylesheet" type="text/css" href="<?= asset($dir.'/css/theme.css') ?>">
-
-        <!-- elFinder JS (REQUIRED) -->
-        <script src="<?= asset($dir.'/js/elfinder.min.js') ?>"></script>
-
-        <?php if ($locale) { ?>
-        <!-- elFinder translation (OPTIONAL) -->
-        <script src="<?= asset($dir."/js/i18n/elfinder.$locale.js") ?>"></script>
-        <?php } ?>
-
-        <!-- elFinder initialization (REQUIRED) -->
-        <script type="text/javascript" charset="utf-8">
-            // Documentation for client options:
-            // https://github.com/Studio-42/elFinder/wiki/Client-configuration-options
-            $().ready(function() {
-                var theme = 'default';
-
-                $('#elfinder').elfinder({
-                    // set your elFinder options here
-                    <?php if ($locale) { ?>
-                        lang: '<?= $locale ?>', // locale
-                    <?php } ?>
-                    customData: { 
-                        _token: '<?= csrf_token() ?>'
-                    },
-                    url : '<?= route('elfinder.connector') ?>',  // connector URL
-                    soundPath: '<?= asset($dir.'/sounds') ?>',
-                    themes: {
-                        default : 'https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme/manifests/material-gray.json',
-                        dark : 'https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme/manifests/material-default.json',
-                    },
-                    theme: theme
-                },
-                function(fm, extraObj) {
-                    fm.bind('open', function() {
-                        setElFinderColorMode();
-                    });
-                });
-
-                function isElfinderInDarkMode() {
-                    return typeof window.parent?.colorMode !== 'undefined' && window.parent.colorMode.result === 'dark';
-                }
-
-                function setElFinderColorMode() {
-                    theme = isElfinderInDarkMode() ? 'dark' : 'default';
-
-                    let instance = $('#elfinder').elfinder('instance');
-                    instance.changeTheme(theme).storage('theme', theme);
-                }
-            });
-        </script>
-    </head>
-    <body>
-
-        <!-- Element where elFinder will be created (REQUIRED) -->
-        <div id="elfinder"></div>
-
-    </body>
-</html>
diff --git a/resources/views/fields/browse.blade.php b/resources/views/fields/browse.blade.php
new file mode 100644
index 0000000..2ecfba8
--- /dev/null
+++ b/resources/views/fields/browse.blade.php
@@ -0,0 +1,119 @@
+{{-- browse server input --}}
+@php
+$field['attributes']['data-elfinder-trigger-url'] = $field['attributes']['data-elfinder-trigger-url'] ?? url(config('elfinder.route.prefix').'/popup/'.$field['name']);
+$field['attributes']['data-elfinder-trigger-url'] .= '?mimes='.urlencode(Crypt::encrypt($field['mime_types'] ?? ''));
+@endphp
+@include('crud::fields.inc.wrapper_start')
+    <label>{!! $field['label'] !!}</label>
+    @include('crud::fields.inc.translatable_icon')
+	<div class="input-group">
+		<input
+			type="text"
+			name="{{ $field['name'] }}"
+			value="{{ old_empty_or_null($field['name'], '') ??  $field['value'] ?? $field['default'] ?? '' }}"
+			data-init-function="bpFieldInitBrowseElement"
+			@include('crud::fields.inc.attributes')
+
+			@if(!isset($field['readonly']) || $field['readonly']) readonly @endif
+		>
+
+		<button type="button" data-inputid="{{ $field['name'] }}-filemanager" class="btn btn-light btn-sm border popup_selector"><i class="la la-cloud-upload"></i> {{ trans('backpack::crud.browse_uploads') }}</button>
+		<button type="button" data-inputid="{{ $field['name'] }}-filemanager" class="btn btn-light btn-sm border clear_elfinder_picker"><i class="la la-eraser"></i> {{ trans('backpack::crud.clear') }}</button>
+	</div>
+	@if (isset($field['hint']))
+        <p class="help-block">{!! $field['hint'] !!}</p>
+    @endif
+
+@include('crud::fields.inc.wrapper_end')
+
+{{-- ########################################## --}}
+{{-- Extra CSS and JS for this particular field --}}
+{{-- If a field type is shown multiple times on a form, the CSS and JS will only be loaded once --}}
+
+	{{-- FIELD CSS - will be loaded in the after_styles section --}}
+    @push('crud_fields_styles')
+		{{-- include browse server css --}}
+		@basset('https://cdn.jsdelivr.net/npm/jquery-colorbox@1.6.4/example2/colorbox.css', true, [
+			'integrity' => 'sha384-HmslgkPwGM5TYgFgpe7Hz++h4HkDNZij42ObIXoXK771r/rs+kicv69E2lj0WIRq', 
+			'crossorigin' => 'anonymous'
+		])
+		@basset('https://cdn.jsdelivr.net/npm/jquery-colorbox@1.6.4/example2/images/loading.gif', false, [
+			'integrity' => 'sha256-ZG7zstGXrrtjO6k6MkhemyiZVml/jgZY1LZCwarlmX0=', 
+			'crossorigin' => 'anonymous'
+		])
+		@basset('https://cdn.jsdelivr.net/npm/jquery-colorbox@1.6.4/example2/images/controls.png', false, [
+			'integrity' => 'sha256-zTLuvjLgmphUaxZ/5gsLHyPz70A2wKH914uvqdG2xl0=', 
+			'crossorigin' => 'anonymous'
+		])
+		@bassetBlock('backpack/pro/fields/browse-field.css')
+		<style>
+			#cboxContent, #cboxLoadedContent, .cboxIframe {
+				background: transparent;
+			}
+		</style>
+		@endBassetBlock
+	@endpush
+
+    @push('crud_fields_scripts')
+		{{-- include browse server js --}}
+		@basset('https://cdn.jsdelivr.net/npm/jquery-colorbox@1.6.4/jquery.colorbox.min.js', true, [
+			'integrity' => 'sha384-nRGTVvv4Qn110QBA9rXeSIVNgDwYTg+ZqPaUquO44OQaVASFOVFo5beRb62KFOu/', 
+			'crossorigin' => 'anonymous'
+		])
+		@bassetBlock('backpack/pro/fields/browse-field.js')
+		<script type="text/javascript">
+			// this global variable is used to remember what input to update with the file path
+			// because elfinder is actually loaded in an iframe by colorbox
+			var elfinderTarget = false;
+
+			// function to update the file selected by elfinder
+			function processSelectedFile(filePath, requestingField) {
+				elfinderTarget.val(filePath.replace(/\\/g,"/"));
+				elfinderTarget.trigger('change');
+				elfinderTarget = false;
+			}
+
+			function bpFieldInitBrowseElement(element) {
+				var triggerUrl = element.data('elfinder-trigger-url')
+				var name = element.attr('name');
+
+				element.parent('.input-group').children('button.popup_selector').click(function (event) {
+				    event.preventDefault();
+
+				    elfinderTarget = element;
+
+				    // trigger the reveal modal with elfinder inside
+				    $.colorbox({
+				        href: triggerUrl,
+				        fastIframe: false,
+				        iframe: true,
+				        width: '80%',
+				        height: '80%'
+				    });
+				});
+
+				element.bind('select', function(event) { // called on file(s) select/unselect
+					element.trigger('change');
+				});
+
+				element.parent('.input-group').children('button.clear_elfinder_picker').click(function (event) {
+				    event.preventDefault();
+				    element.val("").trigger('change');
+				});
+
+				element.on('CrudField:disable', function(e) {
+					element.parent('.input-group').children('button.popup_selector').prop('disabled','disabled');
+					element.parent('.input-group').children('button.clear_elfinder_picker').prop('disabled','disabled');
+				});
+
+				element.on('CrudField:enable', function(e) {
+					element.parent('.input-group').children('button.popup_selector').removeAttr('disabled');
+					element.parent('.input-group').children('button.clear_elfinder_picker').removeAttr('disabled');
+				});
+			}
+		</script>
+		@endBassetBlock
+	@endpush
+
+{{-- End of Extra CSS and JS --}}
+{{-- ########################################## --}}
diff --git a/resources/views/fields/browse_multiple.blade.php b/resources/views/fields/browse_multiple.blade.php
new file mode 100644
index 0000000..634d7e3
--- /dev/null
+++ b/resources/views/fields/browse_multiple.blade.php
@@ -0,0 +1,238 @@
+@php
+$multiple = Arr::get($field, 'multiple', true);
+$sortable = Arr::get($field, 'sortable', false);
+$value = old_empty_or_null($field['name'], '') ??  $field['value'] ?? $field['default'] ?? '';
+
+if (!$multiple && is_array($value)) {
+    $value = Arr::first($value);
+}
+
+$field['wrapper'] = $field['wrapper'] ?? $field['wrapperAttributes'] ?? [];
+$field['wrapper']['data-init-function'] = $field['wrapper']['data-init-function'] ?? 'bpFieldInitBrowseMultipleElement';
+$field['wrapper']['data-elfinder-trigger-url'] = $field['wrapper']['data-elfinder-trigger-url'] ?? url(config('elfinder.route.prefix').'/popup/'.$field['name'].'?multiple=1');
+
+$field['wrapper']['data-elfinder-trigger-url'] .= '&mimes='.urlencode(Crypt::encrypt($field['mime_types'] ?? ''));
+
+if ($multiple) {
+    $field['wrapper']['data-multiple'] = "true";
+} else {
+    $field['wrapper']['data-multiple'] = "false";
+}
+
+if($sortable){
+    $field['wrapper']['sortable'] = "true";
+}
+
+// make the field work either with casted attributes or plain json strings
+$value = is_string($value) && $multiple ? json_decode($value) : $value;
+
+@endphp
+
+@include('crud::fields.inc.wrapper_start')
+
+    <label>{!! $field['label'] !!}</label>
+    @include('crud::fields.inc.translatable_icon')
+    <div class="list" data-field-name="{{ $field['name'] }}">
+    @if ($multiple)
+        <input type="hidden" data-marker="multipleBrowseInput" bp-field-main-input name="{{ $field['name'] }}" value="{{ json_encode($value) }}">
+    @else
+        <input type="text" data-marker="multipleBrowseInput" bp-field-main-input name="{{ $field['name'] }}" value="{{ $value }}" @include('crud::fields.inc.attributes') readonly>
+    @endif
+</div>
+    <div class="btn-group" role="group" aria-label="..." style="margin-top: 3px;">
+        <button type="button" class="browse popup btn btn-sm btn-light">
+            <i class="la la-cloud-upload"></i>
+            {{ trans('backpack::crud.browse_uploads') }}
+        </button>
+        <button type="button" class="browse clear btn btn-sm btn-light">
+            <i class="la la-eraser"></i>
+            {{ trans('backpack::crud.clear') }}
+        </button>
+    </div>
+
+    @if (isset($field['hint']))
+        <p class="help-block">{!! $field['hint'] !!}</p>
+    @endif
+
+    <script type="text/html" data-marker="browse_multiple_template">
+        <div class="input-group input-group-sm">
+            <input type="text" @include('crud::fields.inc.attributes') readonly>
+            <div class="input-group-btn">
+                <button type="button" class="browse remove btn btn-sm btn-light">
+                    <i class="la la-trash"></i>
+                </button>
+                @if($sortable && $multiple)
+                    <button type="button" class="browse move btn btn-sm btn-light"><span class="la la-sort"></span></button>
+                @endif
+            </div>
+        </div>
+    </script>
+@include('crud::fields.inc.wrapper_end')
+
+
+{{-- ########################################## --}}
+{{-- Extra CSS and JS for this particular field --}}
+{{-- If a field type is shown multiple times on a form, the CSS and JS will only be loaded once --}}
+@if ($crud->fieldTypeNotLoaded($field))
+    @php
+        $crud->markFieldTypeAsLoaded($field);
+    @endphp
+
+    {{-- FIELD CSS - will be loaded in the after_styles section --}}
+    @push('crud_fields_styles')
+        @basset('https://cdn.jsdelivr.net/npm/jquery-colorbox@1.6.4/example2/colorbox.css', true, [
+			'integrity' => 'sha384-HmslgkPwGM5TYgFgpe7Hz++h4HkDNZij42ObIXoXK771r/rs+kicv69E2lj0WIRq', 
+			'crossorigin' => 'anonymous'
+		])
+        @bassetBlock('backpack/pro/fields/browse-multiple-field.css')
+        <style>
+            #cboxContent, #cboxLoadedContent, .cboxIframe {
+                background: transparent;
+            }
+        </style>
+        @endBassetBlock
+    @endpush
+
+    @push('crud_fields_scripts')
+
+        @basset('https://cdn.jsdelivr.net/npm/jquery-colorbox@1.6.4/jquery.colorbox.min.js', true, [
+			'integrity' => 'sha384-nRGTVvv4Qn110QBA9rXeSIVNgDwYTg+ZqPaUquO44OQaVASFOVFo5beRb62KFOu/', 
+			'crossorigin' => 'anonymous'
+		])
+        @basset('https://raw.githubusercontent.com/jquery/jquery-ui/refs/tags/1.13.2/dist/jquery-ui.min.js', true, [
+            'integrity' => 'sha384-4D3G3GikQs6hLlLZGdz5wLFzuqE9v4yVGAcOH86y23JqBDPzj9viv0EqyfIa6YUL', 
+            'crossorigin' => 'anonymous'
+        ])
+        @bassetBlock('backpack/pro/fields/browse-multiple-field.js')
+        <script>
+            // this global variable is used to remember what input to update with the file path
+            // because elfinder is actually loaded in an iframe by colorbox
+            var elfinderTarget = false;
+
+            // function to use the files selected inside elfinder
+            function processSelectedMultipleFiles(files, requestingField) {
+                elfinderTarget.trigger('createInputsForItemsSelectedWithElfinder', [files]);
+                elfinderTarget = false;
+            }
+
+            function bpFieldInitBrowseMultipleElement(element) {
+                var $triggerUrl = element.data('elfinder-trigger-url');
+                var $template = element.find("[data-marker=browse_multiple_template]").html();
+                var $list = element.find(".list");
+                var $input = element.find('input[data-marker=multipleBrowseInput]');
+                var $multiple = element.attr('data-multiple');
+                var $sortable = element.attr('sortable');
+
+                // show existing items - display visible inputs for each stored path
+                if ($input.val() != '' && $input.val() != null && $multiple === 'true') {
+                    $paths = JSON.parse($input.val());
+                    if (Array.isArray($paths) && $paths.length) {
+                        // remove any already visible inputs
+                        $list.find('.input-group').remove();
+
+                        // add visible inputs for each item inside the hidden input array
+                        $paths.forEach(function (path) {
+                            var newInput = $($template);
+                            newInput.find('input').val(path);
+                            $list.append(newInput);
+                        });
+                    }
+                }
+
+                // make the items sortable, if configurations says so
+                if($sortable){
+                    $list.sortable({
+                        handle: 'button.move',
+                        cancel: '',
+                        update: function (event, ui) {
+                            element.trigger('saveToJson');
+                        }
+                    });
+                }
+
+                element.on('click', 'button.popup', function (event) {
+                    event.preventDefault();
+
+                    // remember which element the elFinder was triggered by
+                    elfinderTarget = element;
+
+                    // trigger the elFinder modal
+                    $.colorbox({
+                        href: $triggerUrl,
+                        fastIframe: true,
+                        iframe: true,
+                        width: '80%',
+                        height: '80%'
+                    });
+                });
+
+                // turn non-hidden inputs into a JSON
+                // and save them inside the hidden input that ACTUALLY holds all paths
+                element.on('saveToJson', function(event) {
+                    var $paths = element.find('input').not('[type=hidden]').map(function (idx, item) {
+                        return $(item).val();
+                    }).toArray();
+                    // save the JSON inside the hidden input
+                    $input.val(JSON.stringify($paths));
+                    $input.trigger('change');
+                });
+
+                if ($multiple === 'true') {
+                    // remote item button
+                    element.on('click', 'button.remove', function (event) {
+                        event.preventDefault();
+                        $(this).closest('.input-group').remove();
+                        element.trigger('saveToJson');
+                    });
+
+                    // clear button
+                    element.on('click', 'button.clear', function (event) {
+                        event.preventDefault();
+                        $('.input-group', $list).remove();
+                        element.trigger('saveToJson');
+                    });
+
+                    // called after one or more items are selected in the elFinder window
+                    element.on('createInputsForItemsSelectedWithElfinder', element, function(event, files) {
+                        files.forEach(function (file) {
+                            var newInput = $($template);
+                            newInput.find('input').val(file.path);
+                            $list.append(newInput);
+                        });
+
+                        if($sortable){
+                            $list.sortable("refresh")
+                        }
+
+                        element.trigger('saveToJson');
+                    });
+
+                } else {
+                    // clear button
+                    element.on('click', 'button.clear', function (event) {
+                        $input.val('');
+                    });
+
+                    // called after an item has been selected in the elFinder window
+                    element.on('createInputsForItemsSelectedWithElfinder', element, function(event, files) {
+                        $input.val(files[0].path);
+                    });
+                }
+
+                element.on('CrudField:disable', function(e) {
+					element.children('.btn-group').children('button.popup').prop('disabled','disabled');
+					element.children('.btn-group').children('button.clear').prop('disabled','disabled');
+				});
+
+				element.on('CrudField:enable', function(e) {
+					element.children('.btn-group').children('button.popup').removeAttr('disabled');
+					element.children('.btn-group').children('button.clear').removeAttr('disabled');
+				});
+            }
+        </script>
+        @endBassetBlock
+    @endpush
+@endif
+
+{{-- End of Extra CSS and JS --}}
+{{-- ########################################## --}}
diff --git a/resources/views/filepicker.blade.php b/resources/views/filepicker.blade.php
deleted file mode 100644
index d8a1698..0000000
--- a/resources/views/filepicker.blade.php
+++ /dev/null
@@ -1,88 +0,0 @@
-<!DOCTYPE html>
-<html lang="{{ app()->getLocale() }}">
-    <head>
-        
-        @include('vendor.elfinder.common_scripts')
-        @include('vendor.elfinder.common_styles')
-        
-        <script type="text/javascript">
-            $().ready(function () {
-                var theme = 'default';
-
-                var elf = $('#elfinder').elfinder({
-                    // set your elFinder options here
-                    @if($locale)
-                        lang: '{{ $locale }}', // locale
-                    @endif
-                    customData: {
-                        _token: '{{ csrf_token() }}'
-                    },
-                    url: '{{ route("elfinder.connector") }}',  // connector URL
-                    soundPath: '{{ Basset::getUrl(base_path("vendor/studio-42/elfinder/sounds")) }}',
-                    resizable: false,
-                    ui: ['toolbar', 'path','stat'],
-                    onlyMimes: [{{ $mimeTypes }}],
-                    rememberLastDir : false,
-                    height: 300,
-                    defaultView: 'list',
-                    getFileCallback: function (file) {
-                        window.parent.processSelectedFile(file, '{{ $input_id }}');
-                        console.log(file);
-                    },
-                    uiOptions : {
-                        // toolbar configuration
-                        toolbar : [
-                            ['home', 'up'],
-                            ['upload'],
-                            ['quicklook'],
-                        ],
-                        // directories tree options
-                        tree : {
-                            // expand current root on init
-                            openRootOnLoad : true,
-                            // auto load current dir parents
-                            syncTree : true
-                        },
-                        // navbar options
-                        navbar : {
-                            minWidth : 150,
-                            maxWidth : 500
-                        },
-                        // current working directory options
-                        cwd : {
-                            // display parent directory in listing as ".."
-                            oldSchool : false
-                        }
-                    },
-                    themes: {
-                        default : 'https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme/manifests/material-gray.json',
-                        dark : 'https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme/manifests/material-default.json',
-                    },
-                    theme: theme
-                },
-                function(fm, extraObj) {
-                    fm.bind('open', function() {
-                        setElFinderColorMode();
-                    });
-                }).elfinder('instance');
-
-                function isElfinderInDarkMode() {
-                    return typeof window.parent?.colorMode !== 'undefined' && window.parent.colorMode.result === 'dark';
-                }
-
-                function setElFinderColorMode() {
-                    theme = isElfinderInDarkMode() ? 'dark' : 'default';
-
-                    let instance = $('#elfinder').elfinder('instance');
-                    instance.changeTheme(theme).storage('theme', theme);
-                }
-            });
-        </script>
-    </head>
-    <body style="margin: 0;">
-
-        <!-- Element where elFinder will be created (REQUIRED) -->
-        <div id="elfinder"></div>
-
-    </body>
-</html>
diff --git a/resources/views/filepicker.php b/resources/views/filepicker.php
deleted file mode 100644
index bf0dda0..0000000
--- a/resources/views/filepicker.php
+++ /dev/null
@@ -1,106 +0,0 @@
-<!DOCTYPE html>
-<html lang="<?= app()->getLocale() ?>">
-    <head>
-        <meta charset="utf-8">
-        <title>elFinder 2.0</title>
-
-        <!-- jQuery and jQuery UI (REQUIRED) -->
-        <link rel="stylesheet" type="text/css" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/themes/smoothness/jquery-ui.css">
-        <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
-        <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
-
-        <!-- elFinder CSS (REQUIRED) -->
-        <link rel="stylesheet" type="text/css" href="<?= asset($dir.'/css/elfinder.min.css') ?>">
-        <link rel="stylesheet" type="text/css" href="<?= asset($dir.'/css/theme.css') ?>">
-
-        <!-- elFinder JS (REQUIRED) -->
-        <script src="<?= asset($dir.'/js/elfinder.min.js') ?>"></script>
-
-        <?php if ($locale) { ?>
-            <!-- elFinder translation (OPTIONAL) -->
-            <script src="<?= asset($dir."/js/i18n/elfinder.$locale.js") ?>"></script>
-        <?php } ?>
-        <!-- Include jQuery, jQuery UI, elFinder (REQUIRED) -->
-
-        <script type="text/javascript">
-            $().ready(function () {
-                var theme = 'default';
-
-                var elf = $('#elfinder').elfinder({
-                    // set your elFinder options here
-                    <?php if ($locale) { ?>
-                        lang: '<?= $locale ?>', // locale
-                    <?php } ?>
-                    customData: {
-                        _token: '<?= csrf_token() ?>'
-                    },
-                    url: '<?= route('elfinder.connector') ?>',  // connector URL
-                    soundPath: '<?= asset($dir.'/sounds') ?>',
-                    resizable: false,
-                    ui: ['toolbar', 'path','stat'],
-                    onlyMimes: [<?= $mimeTypes ?>],
-                    rememberLastDir : false,
-                    height: 300,
-                    defaultView: 'list',
-                    getFileCallback: function (file) {
-                        window.parent.processSelectedFile(file, '<?= $input_id?>');
-                        console.log(file);
-                    },
-                    uiOptions : {
-                        // toolbar configuration
-                        toolbar : [
-                            ['home', 'up'],
-                            ['upload'],
-                            ['quicklook'],
-                        ],
-                        // directories tree options
-                        tree : {
-                            // expand current root on init
-                            openRootOnLoad : true,
-                            // auto load current dir parents
-                            syncTree : true
-                        },
-                        // navbar options
-                        navbar : {
-                            minWidth : 150,
-                            maxWidth : 500
-                        },
-                        // current working directory options
-                        cwd : {
-                            // display parent directory in listing as ".."
-                            oldSchool : false
-                        }
-                    },
-                    themes: {
-                        default : 'https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme/manifests/material-gray.json',
-                        dark : 'https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme/manifests/material-default.json',
-                    },
-                    theme: theme
-                },
-                function(fm, extraObj) {
-                    fm.bind('open', function() {
-                        setElFinderColorMode();
-                    });
-                }).elfinder('instance');
-
-                function isElfinderInDarkMode() {
-                    return typeof window.parent?.colorMode !== 'undefined' && window.parent.colorMode.result === 'dark';
-                }
-
-                function setElFinderColorMode() {
-                    theme = isElfinderInDarkMode() ? 'dark' : 'default';
-
-                    let instance = $('#elfinder').elfinder('instance');
-                    instance.changeTheme(theme).storage('theme', theme);
-                }
-            });
-        </script>
-
-    </head>
-    <body style="margin: 0;">
-
-        <!-- Element where elFinder will be created (REQUIRED) -->
-        <div id="elfinder"></div>
-
-    </body>
-</html>
diff --git a/resources/views/standalonepopup.blade.php b/resources/views/standalonepopup.blade.php
index 37f3af4..fd1de79 100644
--- a/resources/views/standalonepopup.blade.php
+++ b/resources/views/standalonepopup.blade.php
@@ -2,8 +2,8 @@
 <html lang="{{ app()->getLocale() }}">
     <head>
         
-        @include('vendor.elfinder.common_scripts')
-        @include('vendor.elfinder.common_styles', ['styleBodyElement' => true])
+        @include('backpack.filemanager::common_scripts')
+        @include('backpack.filemanager::common_styles', ['styleBodyElement' => true])
         <style type="text/css">
         .elfinder-workzone {
             min-height: max-content !important;
@@ -32,7 +32,7 @@
                     url: '{{ route("elfinder.connector") }}',  // connector URL
                     soundPath: '{{ Basset::getUrl(base_path("vendor/studio-42/elfinder/sounds")) }}',
                     resizable: false,
-                    onlyMimes: @json(unserialize(urldecode(request('mimes'))), JSON_UNESCAPED_SLASHES),
+                    onlyMimes: @json(urldecode(json_decode(request('mimes'))), JSON_UNESCAPED_SLASHES),
                     commandsOptions: {
                         getfile: {
                             multiple: {{ request('multiple') ? 'true' : 'false' }},
diff --git a/resources/views/standalonepopup.php b/resources/views/standalonepopup.php
deleted file mode 100644
index 7e8f4e8..0000000
--- a/resources/views/standalonepopup.php
+++ /dev/null
@@ -1,82 +0,0 @@
-<!DOCTYPE html>
-<html lang="<?= app()->getLocale() ?>">
-    <head>
-        <meta charset="utf-8">
-        <title>elFinder 2.0</title>
-
-        <!-- jQuery and jQuery UI (REQUIRED) -->
-        <link rel="stylesheet" type="text/css" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/themes/smoothness/jquery-ui.css">
-        <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
-        <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
-
-        <!-- elFinder CSS (REQUIRED) -->
-        <link rel="stylesheet" type="text/css" href="<?= asset($dir.'/css/elfinder.min.css') ?>">
-        <link rel="stylesheet" type="text/css" href="<?= asset($dir.'/css/theme.css') ?>">
-
-        <!-- elFinder JS (REQUIRED) -->
-        <script src="<?= asset($dir.'/js/elfinder.min.js') ?>"></script>
-
-        <?php if ($locale) { ?>
-            <!-- elFinder translation (OPTIONAL) -->
-            <script src="<?= asset($dir."/js/i18n/elfinder.$locale.js") ?>"></script>
-        <?php } ?>
-        <!-- Include jQuery, jQuery UI, elFinder (REQUIRED) -->
-
-        <script type="text/javascript">
-            $().ready(function () {
-                var theme = 'default';
-
-                var elf = $('#elfinder').elfinder({
-                    // set your elFinder options here
-                    <?php if ($locale) { ?>
-                        lang: '<?= $locale ?>', // locale
-                    <?php } ?>
-                    customData: { 
-                        _token: '<?= csrf_token() ?>'
-                    },
-                    url: '<?= route('elfinder.connector') ?>',  // connector URL
-                    soundPath: '<?= asset($dir.'/sounds') ?>',
-                    dialog: {width: 900, modal: true, title: 'Select a file'},
-                    resizable: false,
-                    commandsOptions: {
-                        getfile: {
-                            oncomplete: 'destroy'
-                        }
-                    },
-                    getFileCallback: function (file) {
-                        window.parent.processSelectedFile(file.path, '<?= $input_id?>');
-                        parent.jQuery.colorbox.close();
-                    },
-                    themes: {
-                        default : 'https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme/manifests/material-gray.json',
-                        dark : 'https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme/manifests/material-default.json',
-                    },
-                    theme: theme
-                },
-                function(fm, extraObj) {
-                    fm.bind('open', function() {
-                        setElFinderColorMode();
-                    });
-                }).elfinder('instance');
-
-                function isElfinderInDarkMode() {
-                    return typeof window.parent?.colorMode !== 'undefined' && window.parent.colorMode.result === 'dark';
-                }
-
-                function setElFinderColorMode() {
-                    theme = isElfinderInDarkMode() ? 'dark' : 'default';
-
-                    let instance = $('#elfinder').elfinder('instance');
-                    instance.changeTheme(theme).storage('theme', theme);
-                }
-            });
-        </script>
-
-    </head>
-    <body>
-
-        <!-- Element where elFinder will be created (REQUIRED) -->
-        <div id="elfinder"></div>
-
-    </body>
-</html>
diff --git a/resources/views/tinymce.blade.php b/resources/views/tinymce.blade.php
deleted file mode 100644
index ee70061..0000000
--- a/resources/views/tinymce.blade.php
+++ /dev/null
@@ -1,89 +0,0 @@
-<!DOCTYPE html>
-<html lang="{{ app()->getLocale() }}">
-    <head>
-        
-        @include('vendor.elfinder.common_scripts')
-        @include('vendor.elfinder.common_styles')
-
-        <!-- TinyMCE Popup class (REQUIRED) -->
-        <script type="text/javascript" src="{{ asset($dir.'/js/tiny_mce_popup.js') }}"></script>
-
-        <script type="text/javascript">
-            var FileBrowserDialogue = {
-                init: function() {
-                    // Here goes your code for setting your custom things onLoad.
-                },
-                mySubmit: function (URL) {
-                    var win = tinyMCEPopup.getWindowArg('window');
-
-                    // pass selected file path to TinyMCE
-                    win.document.getElementById(tinyMCEPopup.getWindowArg('input')).value = URL;
-
-                    // are we an image browser?
-                    if (typeof(win.ImageDialog) != 'undefined') {
-                        // update image dimensions
-                        if (win.ImageDialog.getImageData) {
-                            win.ImageDialog.getImageData();
-                        }
-                        // update preview if necessary
-                        if (win.ImageDialog.showPreviewImage) {
-                            win.ImageDialog.showPreviewImage(URL);
-                        }
-                    }
-
-                    // close popup window
-                    tinyMCEPopup.close();
-                }
-            }
-
-            tinyMCEPopup.onInit.add(FileBrowserDialogue.init, FileBrowserDialogue);
-
-            $().ready(function() {
-                var theme = 'default';
-
-                var elf = $('#elfinder').elfinder({
-                    // set your elFinder options here
-                    @if($locale)
-                        lang: '{{ $locale }}', // locale
-                    @endif
-                    customData: { 
-                        _token: '{{ csrf_token() }}'
-                    },
-                    url : '{{ route("elfinder.connector") }}',  // connector URL
-                    soundPath: '{{ Basset::getUrl(base_path("vendor/studio-42/elfinder/sounds")) }}',
-                    getFileCallback: function(file) { // editor callback
-                        FileBrowserDialogue.mySubmit(file.url); // pass selected file path to TinyMCE
-                    },
-                    themes: {
-                        default : 'https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme/manifests/material-gray.json',
-                        dark : 'https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme/manifests/material-default.json',
-                    },
-                    theme: theme
-                },
-                function(fm, extraObj) {
-                    fm.bind('open', function() {
-                        setElFinderColorMode();
-                    });
-                }).elfinder('instance');
-
-                function isElfinderInDarkMode() {
-                    return typeof window.parent?.colorMode !== 'undefined' && window.parent.colorMode.result === 'dark';
-                }
-
-                function setElFinderColorMode() {
-                    theme = isElfinderInDarkMode() ? 'dark' : 'default';
-
-                    let instance = $('#elfinder').elfinder('instance');
-                    instance.changeTheme(theme).storage('theme', theme);
-                }
-            });
-        </script>
-
-    </head>
-    <body>
-
-        <!-- Element where elFinder will be created (REQUIRED) -->
-        <div id="elfinder"></div>
-
-    </body>
-</html>
diff --git a/resources/views/tinymce.php b/resources/views/tinymce.php
deleted file mode 100644
index ccf17f4..0000000
--- a/resources/views/tinymce.php
+++ /dev/null
@@ -1,105 +0,0 @@
-<!DOCTYPE html>
-<html lang="<?= app()->getLocale() ?>">
-    <head>
-        <meta charset="utf-8">
-        <title>elFinder 2.0</title>
-
-        <!-- jQuery and jQuery UI (REQUIRED) -->
-        <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
-        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
-        <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
-
-        <!-- elFinder CSS (REQUIRED) -->
-        <link rel="stylesheet" type="text/css" href="<?= asset($dir.'/css/elfinder.min.css') ?>">
-        <link rel="stylesheet" type="text/css" href="<?= asset($dir.'/css/theme.css') ?>">
-
-        <!-- elFinder JS (REQUIRED) -->
-        <script src="<?= asset($dir.'/js/elfinder.min.js') ?>"></script>
-
-        <!-- TinyMCE Popup class (REQUIRED) -->
-        <script type="text/javascript" src="<?= asset($dir.'/js/tiny_mce_popup.js') ?>"></script>
-
-        <?php if ($locale) { ?>
-            <!-- elFinder translation (OPTIONAL) -->
-            <script src="<?= asset($dir."/js/i18n/elfinder.$locale.js") ?>"></script>
-        <?php } ?>
-
-        <script type="text/javascript">
-            var FileBrowserDialogue = {
-                init: function() {
-                    // Here goes your code for setting your custom things onLoad.
-                },
-                mySubmit: function (URL) {
-                    var win = tinyMCEPopup.getWindowArg('window');
-
-                    // pass selected file path to TinyMCE
-                    win.document.getElementById(tinyMCEPopup.getWindowArg('input')).value = URL;
-
-                    // are we an image browser?
-                    if (typeof(win.ImageDialog) != 'undefined') {
-                        // update image dimensions
-                        if (win.ImageDialog.getImageData) {
-                            win.ImageDialog.getImageData();
-                        }
-                        // update preview if necessary
-                        if (win.ImageDialog.showPreviewImage) {
-                            win.ImageDialog.showPreviewImage(URL);
-                        }
-                    }
-
-                    // close popup window
-                    tinyMCEPopup.close();
-                }
-            }
-
-            tinyMCEPopup.onInit.add(FileBrowserDialogue.init, FileBrowserDialogue);
-
-            $().ready(function() {
-                var theme = 'default';
-
-                var elf = $('#elfinder').elfinder({
-                    // set your elFinder options here
-                    <?php if ($locale) { ?>
-                        lang: '<?= $locale ?>', // locale
-                    <?php } ?>
-                    customData: { 
-                        _token: '<?= csrf_token() ?>'
-                    },
-                    url : '<?= route('elfinder.connector') ?>',  // connector URL
-                    soundPath: '<?= asset($dir.'/sounds') ?>',
-                    getFileCallback: function(file) { // editor callback
-                        FileBrowserDialogue.mySubmit(file.url); // pass selected file path to TinyMCE
-                    },
-                    themes: {
-                        default : 'https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme/manifests/material-gray.json',
-                        dark : 'https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme/manifests/material-default.json',
-                    },
-                    theme: theme
-                },
-                function(fm, extraObj) {
-                    fm.bind('open', function() {
-                        setElFinderColorMode();
-                    });
-                }).elfinder('instance');
-
-                function isElfinderInDarkMode() {
-                    return typeof window.parent?.colorMode !== 'undefined' && window.parent.colorMode.result === 'dark';
-                }
-
-                function setElFinderColorMode() {
-                    theme = isElfinderInDarkMode() ? 'dark' : 'default';
-
-                    let instance = $('#elfinder').elfinder('instance');
-                    instance.changeTheme(theme).storage('theme', theme);
-                }
-            });
-        </script>
-
-    </head>
-    <body>
-
-        <!-- Element where elFinder will be created (REQUIRED) -->
-        <div id="elfinder"></div>
-
-    </body>
-</html>
diff --git a/resources/views/tinymce4.blade.php b/resources/views/tinymce4.blade.php
deleted file mode 100644
index 107a59b..0000000
--- a/resources/views/tinymce4.blade.php
+++ /dev/null
@@ -1,71 +0,0 @@
-<!DOCTYPE html>
-<html>
-    <head>
-        
-        @include('vendor.elfinder.common_scripts')
-        @include('vendor.elfinder.common_styles')
-        
-        <!-- elFinder initialization (REQUIRED) -->
-        <script type="text/javascript">
-            var FileBrowserDialogue = {
-                init: function() {
-                    // Here goes your code for setting your custom things onLoad.
-                },
-                mySubmit: function (URL) {
-                    // pass selected file path to TinyMCE
-                    parent.tinymce.activeEditor.windowManager.getParams().setUrl(URL);
-
-                    // close popup window
-                    parent.tinymce.activeEditor.windowManager.close();
-                }
-            }
-
-            $().ready(function() {
-                var theme = 'default';
-
-                var elf = $('#elfinder').elfinder({
-                    // set your elFinder options here
-                    @if($locale)
-                        lang: '{{ $locale }}', // locale
-                    @endif
-                    customData: { 
-                        _token: '{{ csrf_token() }}'
-                    },
-                    url: '{{ route("elfinder.connector") }}',  // connector URL
-                    soundPath: '{{ Basset::getUrl(base_path("vendor/studio-42/elfinder/sounds")) }}',
-                    getFileCallback: function(file) { // editor callback
-                        FileBrowserDialogue.mySubmit(file.url); // pass selected file path to TinyMCE
-                    },
-                    themes: {
-                        default : 'https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme/manifests/material-gray.json',
-                        dark : 'https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme/manifests/material-default.json',
-                    },
-                    theme: theme
-                },
-                function(fm, extraObj) {
-                    fm.bind('open', function() {
-                        setElFinderColorMode();
-                    });
-                }).elfinder('instance');
-
-                function isElfinderInDarkMode() {
-                    return typeof window.parent?.colorMode !== 'undefined' && window.parent.colorMode.result === 'dark';
-                }
-
-                function setElFinderColorMode() {
-                    theme = isElfinderInDarkMode() ? 'dark' : 'default';
-
-                    let instance = $('#elfinder').elfinder('instance');
-                    instance.changeTheme(theme).storage('theme', theme);
-                }
-
-            });
-        </script>
-    </head>
-    <body>
-
-        <!-- Element where elFinder will be created (REQUIRED) -->
-        <div id="elfinder"></div>
-
-    </body>
-</html>
diff --git a/resources/views/tinymce4.php b/resources/views/tinymce4.php
deleted file mode 100644
index 5083463..0000000
--- a/resources/views/tinymce4.php
+++ /dev/null
@@ -1,86 +0,0 @@
-<!DOCTYPE html>
-<html lang="<?= app()->getLocale() ?>">
-    <head>
-        <meta charset="utf-8">
-        <title>elFinder 2.0</title>
-
-        <!-- jQuery and jQuery UI (REQUIRED) -->
-        <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
-        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
-        <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
-
-        <!-- elFinder CSS (REQUIRED) -->
-        <link rel="stylesheet" type="text/css" href="<?= asset($dir.'/css/elfinder.min.css') ?>">
-        <link rel="stylesheet" type="text/css" href="<?= asset($dir.'/css/theme.css') ?>">
-
-        <!-- elFinder JS (REQUIRED) -->
-        <script src="<?= asset($dir.'/js/elfinder.min.js') ?>"></script>
-
-        <?php if ($locale) { ?>
-            <!-- elFinder translation (OPTIONAL) -->
-            <script src="<?= asset($dir."/js/i18n/elfinder.$locale.js") ?>"></script>
-        <?php } ?>
-        
-        <!-- elFinder initialization (REQUIRED) -->
-        <script type="text/javascript">
-            var FileBrowserDialogue = {
-                init: function() {
-                    // Here goes your code for setting your custom things onLoad.
-                },
-                mySubmit: function (URL) {
-                    // pass selected file path to TinyMCE
-                    parent.tinymce.activeEditor.windowManager.getParams().setUrl(URL);
-
-                    // close popup window
-                    parent.tinymce.activeEditor.windowManager.close();
-                }
-            }
-
-            $().ready(function() {
-                var theme = 'default';
-
-                var elf = $('#elfinder').elfinder({
-                    // set your elFinder options here
-                    <?php if ($locale) { ?>
-                        lang: '<?= $locale ?>', // locale
-                    <?php } ?>
-                    customData: { 
-                        _token: '<?= csrf_token() ?>'
-                    },
-                    url: '<?= route('elfinder.connector') ?>',  // connector URL
-                    soundPath: '<?= asset($dir.'/sounds') ?>',
-                    getFileCallback: function(file) { // editor callback
-                        FileBrowserDialogue.mySubmit(file.url); // pass selected file path to TinyMCE
-                    },
-                    themes: {
-                        default : 'https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme/manifests/material-gray.json',
-                        dark : 'https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme/manifests/material-default.json',
-                    },
-                    theme: theme
-                },
-                function(fm, extraObj) {
-                    fm.bind('open', function() {
-                        setElFinderColorMode();
-                    });
-                }).elfinder('instance');
-
-                function isElfinderInDarkMode() {
-                    return typeof window.parent?.colorMode !== 'undefined' && window.parent.colorMode.result === 'dark';
-                }
-
-                function setElFinderColorMode() {
-                    theme = isElfinderInDarkMode() ? 'dark' : 'default';
-
-                    let instance = $('#elfinder').elfinder('instance');
-                    instance.changeTheme(theme).storage('theme', theme);
-                }
-            });
-        </script>
-    </head>
-    <body>
-
-        <!-- Element where elFinder will be created (REQUIRED) -->
-        <div id="elfinder"></div>
-
-    </body>
-</html>
diff --git a/resources/views/tinymce5.blade.php b/resources/views/tinymce5.blade.php
deleted file mode 100644
index 5a7cd30..0000000
--- a/resources/views/tinymce5.blade.php
+++ /dev/null
@@ -1,55 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    
-    @include('vendor.elfinder.common_scripts')
-    @include('vendor.elfinder.common_styles', ['styleBodyElement' => true])
-
-    <!-- elFinder initialization (REQUIRED) -->
-    <script type="text/javascript">
-        $(document).ready(function () {
-
-            var FileBrowserDialogue = {
-                init: function() {
-                    // Here goes your code for setting your custom things onLoad.
-                },
-                mySubmit: function (file) {
-                    window.parent.postMessage({
-                        mceAction: 'fileSelected',
-                        data: {
-                            file: file
-                        }
-                    }, '*');
-                }
-            };
-
-            let elfinderConfig = {
-                cssAutoLoad : false,
-                speed: 100,
-                // set your elFinder options here
-                @if($locale)
-                    lang: '{{ $locale }}', // locale
-                @endif
-                customData: {
-                    _token: '{{ csrf_token() }}'
-                },
-                url: '{{ route("elfinder.connector") }}',  // connector URL
-                soundPath: '{{ Basset::getUrl(base_path("vendor/studio-42/elfinder/sounds")) }}',
-                getFileCallback: function(file) { // editor callback
-                    FileBrowserDialogue.mySubmit(file); // pass selected file path to TinyMCE
-                },
-                height: $(window).height()
-            };
-
-            var elf = $('#elfinder').elfinder(elfinderConfig);
-            document.getElementById('elfinder').style.opacity = 1;
-        });
-    </script>
-</head>
-<body style="margin:0;top:0;left:0;bottom:0;width:100%;height:100%;">
-
-<!-- Element where elFinder will be created (REQUIRED) -->
-<div id="elfinder"></div>
-
-</body>
-</html>
diff --git a/resources/views/tinymce5.php b/resources/views/tinymce5.php
deleted file mode 100644
index 6404f86..0000000
--- a/resources/views/tinymce5.php
+++ /dev/null
@@ -1,87 +0,0 @@
-<!DOCTYPE html>
-<html lang="<?= app()->getLocale() ?>">
-<head>
-    <meta charset="utf-8">
-    <title>elFinder 2.0</title>
-
-    <!-- jQuery and jQuery UI (REQUIRED) -->
-    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
-    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
-    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
-
-    <!-- elFinder CSS (REQUIRED) -->
-    <link rel="stylesheet" type="text/css" href="<?= asset($dir.'/css/elfinder.min.css') ?>">
-    <link rel="stylesheet" type="text/css" href="<?= asset($dir.'/css/theme.css') ?>">
-
-    <!-- elFinder JS (REQUIRED) -->
-    <script src="<?= asset($dir.'/js/elfinder.min.js') ?>"></script>
-
-    <?php if ($locale) { ?>
-        <!-- elFinder translation (OPTIONAL) -->
-        <script src="<?= asset($dir."/js/i18n/elfinder.$locale.js") ?>"></script>
-    <?php } ?>
-
-    <!-- elFinder initialization (REQUIRED) -->
-    <script type="text/javascript">
-        var FileBrowserDialogue = {
-            init: function() {
-                // Here goes your code for setting your custom things onLoad.
-            },
-            mySubmit: function (file) {
-                window.parent.postMessage({
-                    mceAction: 'fileSelected',
-                    data: {
-                        file: file
-                    }
-                }, '*');
-            }
-        };
-
-        $().ready(function() {
-            var theme = 'default';
-            
-            var elf = $('#elfinder').elfinder({
-                // set your elFinder options here
-                <?php if ($locale) { ?>
-                lang: '<?= $locale ?>', // locale
-                <?php } ?>
-                customData: {
-                    _token: '<?= csrf_token() ?>'
-                },
-                url: '<?= route('elfinder.connector') ?>',  // connector URL
-                soundPath: '<?= asset($dir.'/sounds') ?>',
-                getFileCallback: function(file) { // editor callback
-                    FileBrowserDialogue.mySubmit(file); // pass selected file path to TinyMCE
-                },
-                themes: {
-                    default : 'https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme/manifests/material-gray.json',
-                    dark : 'https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme/manifests/material-default.json',
-                },
-                theme: theme
-            },
-            function(fm, extraObj) {
-                fm.bind('open', function() {
-                    setElFinderColorMode();
-                });
-            }).elfinder('instance');
-
-            function isElfinderInDarkMode() {
-                return typeof window.parent?.colorMode !== 'undefined' && window.parent.colorMode.result === 'dark';
-            }
-
-            function setElFinderColorMode() {
-                theme = isElfinderInDarkMode() ? 'dark' : 'default';
-
-                let instance = $('#elfinder').elfinder('instance');
-                instance.changeTheme(theme).storage('theme', theme);
-            }
-        });
-    </script>
-</head>
-<body>
-
-<!-- Element where elFinder will be created (REQUIRED) -->
-<div id="elfinder"></div>
-
-</body>
-</html>
diff --git a/src/BackpackElfinderController.php b/src/BackpackElfinderController.php
index cbac9ad..a697371 100644
--- a/src/BackpackElfinderController.php
+++ b/src/BackpackElfinderController.php
@@ -24,14 +24,21 @@ public function showPopup($input_id)
         }
 
         if (! empty($mimes)) {
-            request()->merge(['mimes' => urlencode(serialize($mimes))]);
+            request()->merge(['mimes' => urlencode(json_encode($mimes, JSON_UNESCAPED_SLASHES))]);
         } else {
             request()->merge(['mimes' => '']);
         }
 
         return $this->app['view']
-            ->make($this->package.'::standalonepopup')
+            ->make('backpack.filemanager::standalonepopup')
             ->with($this->getViewVars())
             ->with(compact('input_id'));
     }
+
+    public function showIndex()
+    {
+        return $this->app['view']
+            ->make('backpack.filemanager::elfinder')
+            ->with($this->getViewVars());
+    }
 }
diff --git a/src/Console/Commands/Install.php b/src/Console/Commands/Install.php
index ff3f046..68de080 100644
--- a/src/Console/Commands/Install.php
+++ b/src/Console/Commands/Install.php
@@ -38,14 +38,15 @@ public function handle()
         $this->infoBlock('Installing Backpack FileManager', 'Step 1');
 
         // Creating uploads directory
-        $this->progressBlock('Creating uploads directory');
+        $this->progressBlock('Creating uploads directory in case it does not exist');
         File::ensureDirectoryExists('public/uploads');
         $this->closeProgressBlock();
 
-        // Publishing custom elfinder views
-        $this->progressBlock('Publishing custom elfinder views');
+        // Publishing elfinder config file
+        $this->progressBlock('Publishing the config file');
         $this->executeArtisanProcess('vendor:publish', [
             '--provider' => FileManagerServiceProvider::class,
+            '--tag' => 'config',
         ]);
         $this->closeProgressBlock();
 
@@ -59,7 +60,7 @@ public function handle()
         // Done
         $url = Str::of(config('app.url'))->finish('/')->append('admin/elfinder');
         $this->infoBlock('Backpack FileManager installation complete.', 'done');
-        $this->note('Go to <fg=blue>$url</> to access your filemanager.');
+        $this->note('Go to <fg=blue>'.$url.'</> to access your filemanager.');
         $this->note('You may need to run <fg=blue>php artisan serve</> to serve your Laravel project.');
         $this->newLine();
     }
diff --git a/src/FileManagerServiceProvider.php b/src/FileManagerServiceProvider.php
index a426fa0..8a0d6b7 100644
--- a/src/FileManagerServiceProvider.php
+++ b/src/FileManagerServiceProvider.php
@@ -3,6 +3,7 @@
 namespace Backpack\FileManager;
 
 use Backpack\Basset\Facades\Basset;
+use Backpack\CRUD\ViewNamespaces;
 use Barryvdh\Elfinder\ElfinderController;
 use Illuminate\Support\Facades\Config;
 use Illuminate\Support\ServiceProvider;
@@ -24,11 +25,37 @@ public function boot()
         if ($this->app->runningInConsole()) {
             $this->bootForConsole();
         }
+
+        if (is_dir(base_path('resources/views/vendor/backpack/filemanager'))) {
+            $this->loadViewsFrom(base_path('resources/views/vendor/backpack/filemanager'), 'backpack.filemanager');
+        }
+
+        // Fallback to package views
+        $this->loadViewsFrom(__DIR__.'/../resources/views', 'backpack.filemanager');
+
+        $crudLanguages = array_keys(config('backpack.crud.languages', []));
+        foreach ($crudLanguages as $language) {
+            if ($language === 'en') {
+                continue;
+            }
+            Basset::map('bp-elfinder-i18n-'.$language, 'https://raw.githubusercontent.com/Studio-42/elFinder/refs/tags/2.1.64/js/i18n/elfinder.'.$language.'.js');
+        }
     }
 
     public function register()
     {
         $this->app->bind(ElfinderController::class, BackpackElfinderController::class);
+
+        // Add basset view path
+        Basset::addViewPath(realpath(__DIR__.'/../resources/views'));
+
+        ViewNamespaces::addFor('fields', [
+            'backpack.filemanager::fields',
+        ]);
+
+        ViewNamespaces::addFor('columns', [
+            'backpack.filemanager::columns',
+        ]);
     }
 
     /**
@@ -38,10 +65,21 @@ public function register()
      */
     protected function bootForConsole()
     {
-        // Publishing the views.
+        // Publishing exclusively the elfinder files, not the columns and fields folders
+        $this->publishes([
+            __DIR__.'/../resources/views/elfinder.blade.php' => resource_path('views/vendor/backpack/filemanager/elfinder.blade.php'),
+            __DIR__.'/../resources/views/standalonepopup.blade.php' => resource_path('views/vendor/backpack/filemanager/standalonepopup.blade.php'),
+            __DIR__.'/../resources/views/common_scripts.blade.php' => resource_path('views/vendor/backpack/filemanager/common_scripts.blade.php'),
+            __DIR__.'/../resources/views/common_styles.blade.php' => resource_path('views/vendor/backpack/filemanager/common_styles.blade.php'),
+        ], 'elfinder-views');
+
+        $this->publishes([
+            __DIR__.'/../resources/views/columns' => resource_path('views/vendor/backpack/filemanager/columns'),
+        ], 'filemanager-columns');
+
         $this->publishes([
-            __DIR__.'/../resources/views' => resource_path('views/vendor/elfinder'),
-        ], 'views');
+            __DIR__.'/../resources/views/fields' => resource_path('views/vendor/backpack/filemanager/fields'),
+        ], 'filemanager-fields');
 
         // Publishing config file.
         $this->publishes([
@@ -55,8 +93,5 @@ protected function bootForConsole()
         if (! Config::get('elfinder.route.prefix')) {
             Config::set('elfinder.route.prefix', Config::get('backpack.base.route_prefix').'/elfinder');
         }
-
-        // Add basset view path
-        Basset::addViewPath(realpath(__DIR__.'/../resources/views'));
     }
 }