diff --git a/libs/remix-ui/workspace/src/lib/components/file-explorer.tsx b/libs/remix-ui/workspace/src/lib/components/file-explorer.tsx
index c6d714691e..b3cd2bdf3b 100644
--- a/libs/remix-ui/workspace/src/lib/components/file-explorer.tsx
+++ b/libs/remix-ui/workspace/src/lib/components/file-explorer.tsx
@@ -438,6 +438,7 @@ export const FileExplorer = (props: FileExplorerProps) => {
               focusContext={state.focusContext}
               editModeOff={editModeOff}
               files={files}
+              fileState={fileState}
               expandPath={props.expandPath}
               handleContextMenu={handleContextMenu}
               moveFile={handleFileMove}
diff --git a/libs/remix-ui/workspace/src/lib/components/flat-tree.tsx b/libs/remix-ui/workspace/src/lib/components/flat-tree.tsx
index 2428da3bd2..0e911333ea 100644
--- a/libs/remix-ui/workspace/src/lib/components/flat-tree.tsx
+++ b/libs/remix-ui/workspace/src/lib/components/flat-tree.tsx
@@ -7,6 +7,7 @@ import { Virtuoso } from 'react-virtuoso'
 import { RecursiveItemInput } from './file-recursive-item-input';
 import { FlatTreeDrop } from './flat-tree-drop';
 import { getEventTarget } from '../utils/getEventTarget';
+import { fileDecoration } from '@remix-ui/file-decorators';
 
 interface FlatTreeProps {
   files: { [x: string]: Record<string, FileType> },
@@ -20,6 +21,7 @@ interface FlatTreeProps {
   treeRef: React.MutableRefObject<HTMLDivElement>
   moveFile: (dest: string, src: string) => void
   moveFolder: (dest: string, src: string) => void
+  fileState: fileDecoration[]
 }
 
 let mouseTimer: any = {
@@ -28,7 +30,7 @@ let mouseTimer: any = {
 }
 
 export const FlatTree = (props: FlatTreeProps) => {
-  const { files, expandPath, focusEdit, editModeOff, handleTreeClick, moveFile, moveFolder } = props
+  const { files, expandPath, focusEdit, editModeOff, handleTreeClick, moveFile, moveFolder, fileState } = props
   const [flatTree, setFlatTree] = useState<{ [x: string]: FileType }>({})
   const [hover, setHover] = useState<string>('')
   const [mouseOverTarget, setMouseOverTarget] = useState<{
@@ -123,6 +125,16 @@ export const FlatTree = (props: FlatTreeProps) => {
     return flatTree[path]
   }
 
+  const getFileStateClasses = (file: FileType) => {
+    const state = fileState.find((state: fileDecoration) => {
+      if (state.path === file.path) return true
+      if (state.bubble && file.isDirectory && state.path.startsWith(file.path)) return true
+    })
+    if (state && state.fileStateLabelClass) {
+      return state.fileStateLabelClass
+    } 
+  }
+
   const onMouseMove = async (e: any) => {
     ///console.log('mouse move', e)
     const target = await getEventTarget(e, true)
@@ -180,7 +192,7 @@ export const FlatTree = (props: FlatTreeProps) => {
       <div className={`pr-2 pl-2 ${file.isDirectory ? expandPath && expandPath.includes(file.path) ? 'fa fa-folder-open' : 'fa fa-folder' : getPathIcon(file.path)} caret caret_tv`}></div>
       {focusEdit && file.path && focusEdit.element === file.path ? 
         <RecursiveItemInput editModeOff={editModeOff} file={file}/>:
-        <div draggable={true} onDragStart={onDragStart} onDragEnd={onDragEnd} className={`ml-1 pl-2 text-nowrap remixui_leaf`} data-label-type={file.isDirectory ? 'folder' : 'file'} data-label-path={`${file.path}`} key={index}>{file.name}
+        <div draggable={true} onDragStart={onDragStart} onDragEnd={onDragEnd} className={`ml-1 pl-2 text-nowrap remixui_leaf ${getFileStateClasses(file)}`} data-label-type={file.isDirectory ? 'folder' : 'file'} data-label-path={`${file.path}`} key={index}>{file.name}
         </div>}
     </div>)
   }
diff --git a/libs/remix-ui/workspace/src/lib/reducers/workspace.ts b/libs/remix-ui/workspace/src/lib/reducers/workspace.ts
index 676b5033a0..3926daf5ee 100644
--- a/libs/remix-ui/workspace/src/lib/reducers/workspace.ts
+++ b/libs/remix-ui/workspace/src/lib/reducers/workspace.ts
@@ -4,6 +4,7 @@ import * as _ from 'lodash'
 import {fileDecoration} from '@remix-ui/file-decorators'
 import {ROOT_PATH} from '../utils/constants'
 import isElectron from 'is-electron'
+import { fileKeySort } from '../utils'
 export interface BrowserState {
   browser: {
     currentWorkspace: string
@@ -187,6 +188,7 @@ export const browserReducer = (state = browserInitialState, action: Actions) =>
     const startTime = new Date().getTime()
     const fd = fetchDirectoryContent(state, payload)
     const endTime = new Date().getTime()
+ 
     console.log('fetchDirectoryContent tree', endTime - startTime, fd)
 
     return {
@@ -258,6 +260,11 @@ export const browserReducer = (state = browserInitialState, action: Actions) =>
     const startTime = new Date().getTime()
     const fd = fetchWorkspaceDirectoryContent(state, payload)
     const endTime = new Date().getTime()
+   
+    console.log(fd[payload.path])
+    const sortedKeys = fileKeySort(fd[payload.path])
+    console.log('sortedKeys', sortedKeys)
+
     console.log('fetchDirectoryContent tree', endTime - startTime, fd)
 
     return {
diff --git a/libs/remix-ui/workspace/src/lib/utils/index.ts b/libs/remix-ui/workspace/src/lib/utils/index.ts
index 726abbcfa8..9a802d18a9 100644
--- a/libs/remix-ui/workspace/src/lib/utils/index.ts
+++ b/libs/remix-ui/workspace/src/lib/utils/index.ts
@@ -124,7 +124,7 @@ export const contextMenuActions: MenuItems = [{
   platform: appPlatformTypes.web
 }]
 
-export const fileKeySort = (children: FileType[]): string[] => {
+export const fileKeySort = (children: any): string[] => {
   const directories = Object.keys(children).filter((key: string) => children[key].isDirectory && children[key].name !== '')
 
   // sort case insensitive