diff --git a/assets/js/src/core/components/simple-tree/simple-tree.styles.ts b/assets/js/src/core/components/simple-tree/simple-tree.styles.ts
index acac879e7..97723292c 100644
--- a/assets/js/src/core/components/simple-tree/simple-tree.styles.ts
+++ b/assets/js/src/core/components/simple-tree/simple-tree.styles.ts
@@ -13,87 +13,124 @@
 
 import { createStyles } from 'antd-style'
 
-export const useStyles = createStyles(({ token, css }) => {
+interface IStylesProps {
+  isHideRootChecker?: boolean
+}
+
+export const useStyles = createStyles(({ token, css }, props: IStylesProps) => {
   return {
-    tree: css`
-            .ant-tree-treenode {
-                padding: 2px ${token.paddingSM}px 2px 0;
-                position: relative;
-                gap: 8px;
-                
-                @media (hover: hover) {
-                    &:hover {
-                        background-color: ${token.controlItemBgActiveHover};
-                    }
-                }
-                
-                &:focus {
-                    outline: none;
-                    background-color: ${token.controlItemBgActiveHover};
-                }
+    treeContainer: css`
+      .ant-tree-list-holder-inner {
+        .ant-tree-treenode-leaf-last {
+          &:first-child {
+            .ant-tree-checkbox {
+              display: ${(props.isHideRootChecker === true) ? 'none' : 'block'};
             }
+          }
+        }
+      }
+      
+      .ant-tree-switcher {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      
+      .ant-tree-switcher_close {
+        .ant-tree-switcher-icon {
+          svg {
+            transform: rotate(0deg);
+          }
+        }
+      }
+
+      .ant-tree-switcher_open {
+        .ant-tree-switcher-icon {
+          svg {
+            transform: rotate(-180deg);
+          }
+        }
+      }
+      
+      .ant-tree-treenode {
+        padding: 2px ${token.paddingSM}px 2px 0;
+        position: relative;
+        gap: 8px;
+        
+        @media (hover: hover) {
+          &:hover {
+            background-color: ${token.controlItemBgActiveHover};
+          }
+        }
+        
+        &:focus {
+          outline: none;
+          background-color: ${token.controlItemBgActiveHover};
+        }
+      }
             
-            .ant-tree-treenode-selected {
-                background-color: ${token.controlItemBgActive};
-            }
+      .ant-tree-treenode-selected {
+        background-color: ${token.controlItemBgActive};
+      }
 
-            .ant-tree-list .ant-tree-node-content-wrapper {
-                background: none;
-                position: static;
-                padding: 0;
-                line-height: 20px;
-                min-height: 20px;
-                display: flex;
-                gap: 8px;
+      .ant-tree-list .ant-tree-node-content-wrapper {
+        background: none;
+        position: static;
+        padding: 0;
+        line-height: 20px;
+        min-height: 20px;
+        display: flex;
+        gap: 8px;
 
-                &:hover {
-                    background: none;
-                }
-            }
+        &:hover {
+            background: none;
+        }
+      }
             
-            .ant-tree-list .ant-tree-switcher {
-                position: relative;
-                z-index: 1;
-                width: 16px;
-                height: 16px;
-                background: none;
-            } 
+      .ant-tree-list .ant-tree-switcher {
+        position: relative;
+        z-index: 1;
+        width: 16px;
+        height: 16px;
+        background: none;
+      } 
             
-            .ant-tree-title__btn {
-                background: transparent;
-                border: none;
-                color: ${token.colorTextTreeElement};
-                cursor: pointer;
-                padding: 0;
-                font-size: ${token.fontSize}px; 
-                
-                &:after {
-                    content: '';
-                    position: absolute;
-                    top: 0;
-                    left: 0;
-                    right: 0;
-                    bottom: 0;
-                }
-            }
+      .ant-tree-title__btn {
+        background: transparent;
+        border: none;
+        color: ${token.colorTextTreeElement};
+        cursor: pointer;
+        padding: 0;
+        font-size: ${token.fontSize}px; 
+        
+        &:after {
+          content: '';
+          position: absolute;
+          top: 0;
+          left: 0;
+          right: 0;
+          bottom: 0;
+        }
+      }
 
-            .ant-tree-list .ant-tree-iconEle.ant-tree-iconEle {
-                width: 16px;
-                height: 16px;
-                line-height: 22px;
-            } 
-            
-            .ant-tree-checkbox {
-                margin: 1px 0 0 0;
-                z-index: 1;
-            }
-            
-            .ant-tree-draggable-icon {
-                display: none;
-            }
-            .ant-tree-switcher-noop {
-                pointer-events: none;
-            }
-        `
+      .ant-tree-list .ant-tree-iconEle.ant-tree-iconEle {
+        width: 16px;
+        height: 16px;
+        line-height: 22px;
+      } 
+    
+      .ant-tree-checkbox {
+        margin: 1px 0 0 0;
+        z-index: 1;
+      }
+    
+      .ant-tree-draggable-icon {
+        display: none;
+      }
+        
+      .ant-tree-switcher-noop {
+        pointer-events: none;
+      }
+    `
   }
 }, { hashPriority: 'high' })
diff --git a/assets/js/src/core/components/simple-tree/simple-tree.tsx b/assets/js/src/core/components/simple-tree/simple-tree.tsx
index c3a44a7b2..fde9a0b81 100644
--- a/assets/js/src/core/components/simple-tree/simple-tree.tsx
+++ b/assets/js/src/core/components/simple-tree/simple-tree.tsx
@@ -32,10 +32,11 @@ interface SimpleTreeProps extends TreeProps {
   onSelected?: (key: any) => void
   onLoadData?: (node) => Promise<any>
   withCustomSwitcherIcon?: boolean
+  isHideRootChecker?: boolean
 }
 
-const SimpleTree = ({ treeData, className, defaultExpandedKeys, onCheck, onActionsClick, onDragAndDrop, onSelected, onLoadData, withCustomSwitcherIcon, ...props }: SimpleTreeProps): React.JSX.Element => {
-  const { styles } = useStyles()
+const SimpleTree = ({ treeData, className, defaultExpandedKeys, onCheck, onActionsClick, onDragAndDrop, onSelected, onLoadData, withCustomSwitcherIcon, isHideRootChecker = true, ...props }: SimpleTreeProps): React.JSX.Element => {
+  const { styles } = useStyles({ isHideRootChecker })
 
   const [selectedKeys, setSelectedKeys] = React.useState<Key[]>([])
   const [expandedKeys, setExpandedKeys] = React.useState<Key[]>(defaultExpandedKeys ?? [])
@@ -62,7 +63,7 @@ const SimpleTree = ({ treeData, className, defaultExpandedKeys, onCheck, onActio
     <Tree
       blockNode
       checkable={ onCheck !== undefined }
-      className={ cn(styles.tree, className) }
+      className={ cn(styles.treeContainer, className) }
       draggable
       expandedKeys={ expandedKeys }
       loadData={ onLoadData !== null ? onLoadData : undefined }
diff --git a/assets/js/src/core/components/tree-element/tree-element.styles.ts b/assets/js/src/core/components/tree-element/tree-element.styles.ts
deleted file mode 100644
index 14c643432..000000000
--- a/assets/js/src/core/components/tree-element/tree-element.styles.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-/**
-* Pimcore
-*
-* This source file is available under two different licenses:
-* - Pimcore Open Core License (POCL)
-* - Pimcore Commercial License (PCL)
-* Full copyright and license information is available in
-* LICENSE.md which is distributed with this source code.
-*
-*  @copyright  Copyright (c) Pimcore GmbH (http://www.pimcore.org)
-*  @license    https://github.com/pimcore/studio-ui-bundle/blob/1.x/LICENSE.md POCL and PCL
-*/
-
-import { createStyles } from 'antd-style'
-
-interface IStylesProps {
-  isHideRootChecker?: boolean
-}
-
-export const useStyles = createStyles(({ css }, props: IStylesProps) => {
-  return {
-    treeContainer: css`
-      .ant-tree-list-holder-inner {
-        .ant-tree-treenode-leaf-last {
-          &:first-child {
-            .ant-tree-checkbox {
-              display: ${(props.isHideRootChecker === true) ? 'none' : 'block'};
-            }
-          }
-        }
-      }
-      
-      .ant-tree-switcher {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      }
-      
-      .ant-tree-switcher_close {
-        .ant-tree-switcher-icon {
-          svg {
-            transform: rotate(0deg);
-          }
-        }
-      }
-
-      .ant-tree-switcher_open {
-        .ant-tree-switcher-icon {
-          svg {
-            transform: rotate(-180deg);
-          }
-        }
-      }
-    `
-  }
-})
diff --git a/assets/js/src/core/components/tree-element/tree-element.tsx b/assets/js/src/core/components/tree-element/tree-element.tsx
index 4064979b1..e67eb2ea6 100644
--- a/assets/js/src/core/components/tree-element/tree-element.tsx
+++ b/assets/js/src/core/components/tree-element/tree-element.tsx
@@ -14,7 +14,6 @@
 import React from 'react'
 import { Tree as AntTree, type TreeProps } from 'antd'
 import { Icon } from '@Pimcore/components/icon/icon'
-import { useStyles } from './tree-element.styles'
 
 interface ITreeElementProps extends TreeProps {
   withCustomSwitcherIcon?: boolean
@@ -22,8 +21,6 @@ interface ITreeElementProps extends TreeProps {
 }
 
 export const TreeElement = ({ isHideRootChecker = true, withCustomSwitcherIcon = false, ...props }: ITreeElementProps): React.JSX.Element => {
-  const { styles } = useStyles({ isHideRootChecker })
-
   const handleCustomSwitcherIcon = (): React.JSX.Element | undefined => {
     if (!withCustomSwitcherIcon) return undefined
 
@@ -40,7 +37,6 @@ export const TreeElement = ({ isHideRootChecker = true, withCustomSwitcherIcon =
 
   return (
     <AntTree
-      className={ styles.treeContainer }
       showIcon
       switcherIcon={ handleCustomSwitcherIcon }
       { ...props }