diff --git a/frontend/package.json b/frontend/package.json
index bcb8a0b7..b0ab2404 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -15,6 +15,7 @@
     "@mui/material": "^5.6.1",
     "@mui/styles": "^5.12.0",
     "@mui/x-data-grid": "^5.17.12",
+    "@mui/x-tree-view": "^7.11.0",
     "@terraformer/wkt": "^2.2.1",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^12.1.4",
diff --git a/frontend/src/components/Layout/AIModels/AIModelEditor/FilesTree.js b/frontend/src/components/Layout/AIModels/AIModelEditor/FilesTree.js
index 48729c50..9ff8f7cf 100644
--- a/frontend/src/components/Layout/AIModels/AIModelEditor/FilesTree.js
+++ b/frontend/src/components/Layout/AIModels/AIModelEditor/FilesTree.js
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import TreeView from "@mui/lab/TreeView";
+import { SimpleTreeView } from "@mui/x-tree-view";
 import TreeItem from "@mui/lab/TreeItem";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import ExpandLessIcon from "@mui/icons-material/ExpandLess";
@@ -73,7 +73,7 @@ const FilesTree = (props) => {
           <LinearProgress color="hot" />
         </Stack>
       )}
-      <TreeView
+      <SimpleTreeView
         aria-label="file system navigator"
         defaultCollapseIcon={<ExpandMoreIcon />}
         defaultExpandIcon={<ExpandLessIcon />}
@@ -126,7 +126,7 @@ const FilesTree = (props) => {
         {/* <TreeItem key={key} nodeId="1" label="Applications">
               <TreeItem nodeId="2" label="Calendar" />
             </TreeItem> */}
-      </TreeView>
+      </SimpleTreeView>
     </>
   );
 };