diff --git a/packages/file-handling/src/clipboard.js b/packages/file-handling/src/clipboard.js
index e23e577ba0e476ba0ff5a4c5dcddd30a43066c46..ceeb60d0b8f97d5b89f0db325c9d406de0d20e12 100644
--- a/packages/file-handling/src/clipboard.js
+++ b/packages/file-handling/src/clipboard.js
@@ -140,49 +140,7 @@ export class Clipboard extends ScopedElementsMixin(AdapterLitElement) {
                         align: "center",
                         resizable: false,
                         headerSort: false,
-                        formatter: (cell, formatterParams, onRendered) => {
-                            let self = that,
-                                open = false,
-                                el = document.createElement("div");
-
-                            function toggleList(isOpen){
-                                let collapse = cell.getRow().getElement().getElementsByClassName("tabulator-responsive-collapse")[0];
-
-                                open = isOpen;
-
-                                if(open){
-                                    el.classList.add("open");
-                                    if(collapse){
-                                        collapse.style.display = '';
-                                    }
-                                }else{
-                                    el.classList.remove("open");
-                                    if(collapse){
-                                        collapse.style.display = 'none';
-                                    }
-                                }
-                            }
-
-                            el.classList.add("tabulator-responsive-collapse-toggle");
-                            const icon_tag = that.getScopedTagName("dbp-icon");
-                            el.innerHTML = "<span class='tabulator-responsive-collapse-toggle-open'><" + icon_tag + " class='icon' name='chevron-right'></" + icon_tag + "></span><span class='tabulator-responsive-collapse-toggle-close'><" + icon_tag + " class='icon' name='chevron-down'></" + icon_tag + "></span>";
-
-                            cell.getElement().classList.add("tabulator-row-handle");
-
-                            if(self.tabulatorTable.options.responsiveLayoutCollapseStartOpen){
-                                open = true;
-                            }
-
-                            el.addEventListener("click", function(event){
-                                toggleList(!open);
-                                event.preventDefault();
-                                event.stopImmediatePropagation();
-                            });
-
-                            toggleList(open);
-
-                            return el;
-                        }
+                        formatter: "responsiveCollapse"
                     },
                     {
                         title: '<label class="button-container select-all-icon">' +
diff --git a/packages/file-handling/src/nextcloud-file-picker.js b/packages/file-handling/src/nextcloud-file-picker.js
index 1879a1051c9928c6106c91df4ce385295bbb20c0..7989585139e90998f7dc7f8e7bb7a75581d1f1ef 100644
--- a/packages/file-handling/src/nextcloud-file-picker.js
+++ b/packages/file-handling/src/nextcloud-file-picker.js
@@ -154,7 +154,13 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
                 resizableColumns: false,
                 columns: [
                     {
-                        formatter:"responsiveCollapse", width:32, minWidth:32, align:"center", resizable:false, headerSort:false},
+                        width: 32,
+                        minWidth: 32,
+                        align: "center",
+                        resizable: false,
+                        headerSort: false,
+                        formatter: "responsiveCollapse"
+                    },
                     {
                         title: '<label id="select_all_wrapper" class="button-container select-all-icon">' +
                             '<input type="checkbox" id="select_all" name="select_all" value="select_all">' +
diff --git a/packages/file-handling/src/styles.js b/packages/file-handling/src/styles.js
index 974a606785ecb53c9c9519bafee7a49724bde8a6..ec1e14f011ed6abdc0618177db3f26702750415b 100644
--- a/packages/file-handling/src/styles.js
+++ b/packages/file-handling/src/styles.js
@@ -230,12 +230,44 @@ export function getFileHandlingCss() {
         .tabulator-responsive-collapse-toggle-open, .tabulator-responsive-collapse-toggle-close{
             width: 100%;
             height: 100%;
-            line-height: 55px;
+            line-height: 37px;
         }
 
-        .tabulator-responsive-collapse-toggle-open .icon, .tabulator-responsive-collapse-toggle-close .icon {
-            font-size: 1rem;
-            top: -0.4em;
+        .tabulator-responsive-collapse-toggle-open, .tabulator-responsive-collapse-toggle-close{
+            content: none;
+            visibility: hidden;
+        }
+
+        .tabulator-responsive-collapse-toggle-open::after {
+            content: "";
+            background-image:
+                url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIyLjAuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzJfMV8iIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAxMDAgMTAwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxwYXRoIGQ9Ik0yOS42LDk3LjZsNDQuMi00NC40YzAuOS0wLjksMS4zLTIuMSwxLjMtMy4zYzAtMS4yLTAuNS0yLjQtMS4zLTMuM0wyOS42LDIuNGMtMS4xLTEuMS0yLjgtMS4xLTMuOSwwCgljLTAuNSwwLjUtMC44LDEuMi0wLjgsMS45YzAsMC43LDAuMywxLjQsMC44LDEuOWw0My42LDQzLjZMMjUuNyw5My43Yy0xLjEsMS4xLTEuMSwyLjgsMCwzLjlDMjYuOCw5OC43LDI4LjUsOTguNywyOS42LDk3LjZ6Ii8+Cjwvc3ZnPgo=");
+            visibility: visible;
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            line-height: 37px;
+            background-repeat: no-repeat;
+            left: 0px;
+            top: 0px;
+            background-position: center center;
+            background-size: 1rem;
+        }
+        
+        .tabulator-responsive-collapse-toggle-close::after {
+            content: "";
+            background-image:
+                url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIyLjAuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzJfMV8iIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAxMDAgMTAwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxwYXRoIGQ9Ik0yLjQsMjkuNmw0NC40LDQ0LjJjMC45LDAuOSwyLjEsMS4zLDMuMywxLjNjMS4yLDAsMi40LTAuNSwzLjMtMS4zbDQ0LjItNDQuMmMxLjEtMS4xLDEuMS0yLjgsMC0zLjkKCWMtMC41LTAuNS0xLjItMC44LTEuOS0wLjhjLTAuNywwLTEuNCwwLjMtMS45LDAuOEw1MC4xLDY5LjNMNi4zLDI1LjdjLTEuMS0xLjEtMi44LTEuMS0zLjksMEMxLjMsMjYuOCwxLjMsMjguNSwyLjQsMjkuNnoiLz4KPC9zdmc+Cg==");
+            visibility: visible;
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            line-height: 37px;
+            background-repeat: no-repeat;
+            left: 0px;
+            top: 0px;
+            background-position: center center;
+            background-size: 1rem;
         }
         
         .tabulator-row-handle{