diff --git a/apps/remix-ide/src/app/files/fileManager.ts b/apps/remix-ide/src/app/files/fileManager.ts
index e24680e91f..00ecb3b4e0 100644
--- a/apps/remix-ide/src/app/files/fileManager.ts
+++ b/apps/remix-ide/src/app/files/fileManager.ts
@@ -904,6 +904,57 @@ class FileManager extends Plugin {
     return exists
   }
 
+
+  async moveFileIsAllowed (src: string, dest: string) {
+    try {
+      src = this.normalize(src)
+      dest = this.normalize(dest)
+      src = this.limitPluginScope(src)
+      dest = this.limitPluginScope(dest)
+      await this._handleExists(src, `Cannot move ${src}. Path does not exist.`)
+      await this._handleExists(dest, `Cannot move content into ${dest}. Path does not exist.`)
+      await this._handleIsFile(src, `Cannot move ${src}. Path is not a file.`)
+      await this._handleIsDir(dest, `Cannot move content into ${dest}. Path is not directory.`)
+      const fileName = helper.extractNameFromKey(src)
+
+      if (await this.exists(dest + '/' + fileName)) {
+        return false
+      }
+      return true
+    } catch (e) {
+      console.log(e)
+      return false
+    }
+  }
+
+  async moveDirIsAllowed (src: string, dest: string) {
+    try {
+      src = this.normalize(src)
+      dest = this.normalize(dest)
+      src = this.limitPluginScope(src)
+      dest = this.limitPluginScope(dest)
+      await this._handleExists(src, `Cannot move ${src}. Path does not exist.`)
+      await this._handleExists(dest, `Cannot move content into ${dest}. Path does not exist.`)
+      await this._handleIsDir(src, `Cannot move ${src}. Path is not directory.`)
+      await this._handleIsDir(dest, `Cannot move content into ${dest}. Path is not directory.`)
+      const dirName = helper.extractNameFromKey(src)
+      const provider = this.fileProviderOf(src)
+
+      if (await this.exists(dest + '/' + dirName) || src === dest) {
+        return false
+      }
+
+      if (provider.isSubDirectory(src, dest)) {
+        this.call('notification', 'toast', recursivePasteToastMsg())
+        return false
+      } 
+      return true
+    } catch (e) {
+      console.log(e)
+      return false
+    }
+  }
+
   /**
    * Moves a file to a new folder
    * @param {string} src path of the source file
@@ -954,7 +1005,13 @@ class FileManager extends Plugin {
       if (await this.exists(dest + '/' + dirName) || src === dest) {
         throw createError({ code: 'EEXIST', message: `Cannot move ${src}. Folder already exists at destination ${dest}` })
       }
-      await this.copyDir(src, dest, dirName)
+      const provider = this.fileProviderOf(src)
+
+      if (provider.isSubDirectory(src, dest)) {
+        this.call('notification', 'toast', recursivePasteToastMsg())
+        return false
+      } 
+      await this.inDepthCopy(src, dest, dirName)
       await this.remove(src)
 
     } catch (e) {
diff --git a/apps/remix-ide/src/app/tabs/locales/en/filePanel.json b/apps/remix-ide/src/app/tabs/locales/en/filePanel.json
index cdc270f480..0554b0ffa7 100644
--- a/apps/remix-ide/src/app/tabs/locales/en/filePanel.json
+++ b/apps/remix-ide/src/app/tabs/locales/en/filePanel.json
@@ -73,6 +73,7 @@
   "filePanel.features": "Features",
   "filePanel.upgradeability": "Upgradeability",
   "filePanel.ok": "OK",
+  "filePanel.yes": "Yes",
   "filePanel.cancel": "Cancel",
   "filePanel.createNewWorkspace": "create a new workspace",
   "filePanel.connectToLocalhost": "connect to localhost",
@@ -115,6 +116,8 @@
   "filePanel.validationErrorMsg": "Special characters are not allowed",
   "filePanel.reservedKeyword": "Reserved Keyword",
   "filePanel.reservedKeywordMsg": "File name contains Remix reserved keywords. \"{content}\"",
+  "filePanel.moveFile": "Moving files",
+  "filePanel.moveFileMsg1": "Are you sure you want to move {src} to {dest}?",
   "filePanel.movingFileFailed": "Moving File Failed",
   "filePanel.movingFileFailedMsg": "Unexpected error while moving file: {src}",
   "filePanel.movingFolderFailed": "Moving Folder Failed",
diff --git a/libs/remix-ui/drag-n-drop/src/lib/drag-n-drop.tsx b/libs/remix-ui/drag-n-drop/src/lib/drag-n-drop.tsx
index 6d991d9663..6427dbed12 100644
--- a/libs/remix-ui/drag-n-drop/src/lib/drag-n-drop.tsx
+++ b/libs/remix-ui/drag-n-drop/src/lib/drag-n-drop.tsx
@@ -27,6 +27,11 @@ export const Draggable = (props: DraggableType) => {
     destination = props.file,
     context = useContext(MoveContext)
 
+  // delay timer
+  const [timer, setTimer] = useState<NodeJS.Timeout>()
+  // folder to open
+  const [folderToOpen, setFolderToOpen] = useState<string>()
+
   const handleDrop = (event: React.DragEvent<HTMLSpanElement>) => {
     event.preventDefault()
 
@@ -50,8 +55,15 @@ export const Draggable = (props: DraggableType) => {
   const handleDragover = (event: React.DragEvent<HTMLSpanElement>) => {
     //Checks if the folder is opened
     event.preventDefault()
-    if (destination.isDirectory && !props.expandedPath.includes(destination.path)) {
-      props.handleClickFolder(destination.path, destination.type)
+    if (destination.isDirectory && !props.expandedPath.includes(destination.path) && folderToOpen !== destination.path &&  props.handleClickFolder) {
+      setFolderToOpen(destination.path)
+      timer && clearTimeout(timer)
+      setTimer(
+        setTimeout(() => {
+          props.handleClickFolder(destination.path, destination.type)
+          setFolderToOpen(null)
+        }, 600)
+      )
     }
   }
 
@@ -75,7 +87,12 @@ export const Draggable = (props: DraggableType) => {
           onDrop={(event) => {
             handleDrop(event)
           }}
-          onDragStart={() => {
+          onDragStart={(event) => {
+            if (destination && destination.path === '/'){
+              event.preventDefault()
+              event.stopPropagation
+            } else
+
             if (destination) {
               handleDrag()
             }
diff --git a/libs/remix-ui/workspace/src/lib/actions/index.ts b/libs/remix-ui/workspace/src/lib/actions/index.ts
index e34b9db417..9b8691319d 100644
--- a/libs/remix-ui/workspace/src/lib/actions/index.ts
+++ b/libs/remix-ui/workspace/src/lib/actions/index.ts
@@ -514,3 +514,16 @@ export const moveFolder = async (src: string, dest: string) => {
     dispatch(displayPopUp('Oops! An error ocurred while performing moveDir operation.' + error))
   }
 }
+
+export const moveFileIsAllowed = async (src: string, dest: string) => {
+  const fileManager = plugin.fileManager
+  const isAllowed = await fileManager.moveFileIsAllowed(src, dest)
+  return isAllowed
+}
+
+export const moveFolderIsAllowed = async (src: string, dest: string) => {
+  const fileManager = plugin.fileManager
+  const isAllowed = await fileManager.moveDirIsAllowed(src, dest)
+  return isAllowed
+}
+
diff --git a/libs/remix-ui/workspace/src/lib/components/file-explorer-context-menu.tsx b/libs/remix-ui/workspace/src/lib/components/file-explorer-context-menu.tsx
index 998d432f16..a11b5ccf41 100644
--- a/libs/remix-ui/workspace/src/lib/components/file-explorer-context-menu.tsx
+++ b/libs/remix-ui/workspace/src/lib/components/file-explorer-context-menu.tsx
@@ -111,7 +111,7 @@ export const FileExplorerContextMenu = (props: FileExplorerContextMenuProps) =>
     return groupedActions.map((groupItem, groupIndex) =>
       groupItem.map((item, index) => {
         key++
-        const className = `remixui_liitem ${group !== item.group ? 'border-top' : ''}`
+        const className = `px-3 remixui_liitem ${group !== item.group ? 'border-top' : ''}`
         group = item.group
         if (item.name === 'Upload File') {
           return (
diff --git a/libs/remix-ui/workspace/src/lib/components/file-explorer-menu.tsx b/libs/remix-ui/workspace/src/lib/components/file-explorer-menu.tsx
index 7dcc5cdf16..89d777f6fd 100644
--- a/libs/remix-ui/workspace/src/lib/components/file-explorer-menu.tsx
+++ b/libs/remix-ui/workspace/src/lib/components/file-explorer-menu.tsx
@@ -67,12 +67,7 @@ export const FileExplorerMenu = (props: FileExplorerMenuProps) => {
 
   return (
     <>
-      <CustomTooltip placement="top" tooltipId="remixuilabelTooltip" tooltipClasses="text-nowrap" tooltipText={props.title}>
-        <span className="remixui_label" data-path={props.title} style={{fontWeight: 'bold'}}>
-          {props.title}
-        </span>
-      </CustomTooltip>
-      <span className="pl-0 pb-1">
+      <span data-id="spanContaining" className="pl-0 pb-1 w-50">
         {state.menuItems.map(({action, title, icon, placement}, index) => {
           if (action === 'uploadFile') {
             return (
@@ -83,7 +78,13 @@ export const FileExplorerMenu = (props: FileExplorerMenuProps) => {
                 tooltipText={<FormattedMessage id={`filePanel.${action}`} defaultMessage={title} />}
                 key={`index-${action}-${placement}-${icon}`}
               >
-                <label id={action} style={{fontSize: '1.1rem', cursor: 'pointer'}} data-id={'fileExplorerUploadFile' + action} className={icon + ' mb-0 px-1 remixui_newFile'} key={`index-${action}-${placement}-${icon}`}>
+                <label
+                  id={action}
+                  style={{fontSize: '1.1rem', cursor: 'pointer'}}
+                  data-id={'fileExplorerUploadFile' + action}
+                  className={icon + ' mx-1 remixui_menuItem'}
+                  key={`index-${action}-${placement}-${icon}`}
+                >
                   <input
                     id="fileUpload"
                     data-id="fileExplorerFileUpload"
@@ -108,7 +109,13 @@ export const FileExplorerMenu = (props: FileExplorerMenuProps) => {
                 tooltipText={<FormattedMessage id={`filePanel.${action}`} defaultMessage={title} />}
                 key={`index-${action}-${placement}-${icon}`}
               >
-                <label id={action} style={{fontSize: '1.1rem', cursor: 'pointer'}} data-id={'fileExplorerUploadFolder' + action} className={icon + ' mb-0 px-1 remixui_newFile'} key={`index-${action}-${placement}-${icon}`}>
+                <label
+                  id={action}
+                  style={{fontSize: '1.1rem', cursor: 'pointer'}}
+                  data-id={'fileExplorerUploadFolder' + action}
+                  className={icon + ' mx-1 remixui_menuItem'}
+                  key={`index-${action}-${placement}-${icon}`}
+                >
                   <input
                     id="folderUpload"
                     data-id="fileExplorerFolderUpload"
@@ -151,7 +158,7 @@ export const FileExplorerMenu = (props: FileExplorerMenuProps) => {
                       state.actions[action]()
                     }
                   }}
-                  className={'newFile ' + icon + ' pr-2 pl-1 remixui_newFile'}
+                  className={icon + ' mx-1 remixui_menuItem'}
                   key={`${action}-${title}-${index}`}
                 ></label>
               </CustomTooltip>
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 a3b94e22c1..69e072ff40 100644
--- a/libs/remix-ui/workspace/src/lib/components/file-explorer.tsx
+++ b/libs/remix-ui/workspace/src/lib/components/file-explorer.tsx
@@ -1,16 +1,18 @@
 import React, {useEffect, useState, useRef, SyntheticEvent} from 'react' // eslint-disable-line
 import {useIntl} from 'react-intl'
-import {TreeView, TreeViewItem} from '@remix-ui/tree-view' // eslint-disable-line
+import {TreeView} from '@remix-ui/tree-view' // eslint-disable-line
 import {FileExplorerMenu} from './file-explorer-menu' // eslint-disable-line
 import {FileExplorerContextMenu} from './file-explorer-context-menu' // eslint-disable-line
-import {FileExplorerProps, WorkSpaceState} from '../types'
+import {FileExplorerProps, FileType, WorkSpaceState} from '../types'
 
 import '../css/file-explorer.css'
 import {checkSpecialChars, extractNameFromKey, extractParentFromKey, joinPath} from '@remix-ui/helper'
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import {FileRender} from './file-render'
-import {Drag} from '@remix-ui/drag-n-drop'
+import {Drag, Draggable} from '@remix-ui/drag-n-drop'
 import {ROOT_PATH} from '../utils/constants'
+import { fileKeySort } from '../utils'
+import { moveFileIsAllowed, moveFolderIsAllowed } from '../actions'
 
 export const FileExplorer = (props: FileExplorerProps) => {
   const intl = useIntl()
@@ -32,6 +34,7 @@ export const FileExplorer = (props: FileExplorerProps) => {
   } = props
   const [state, setState] = useState<WorkSpaceState>(workspaceState)
   const treeRef = useRef<HTMLDivElement>(null)
+  const [childrenKeys, setChildrenKeys] = useState<string[]>([])
 
   useEffect(() => {
     if (contextMenuItems) {
@@ -289,32 +292,62 @@ export const FileExplorer = (props: FileExplorerProps) => {
     props.dispatchHandleExpandPath(expandPath)
   }
 
-  const handleFileMove = (dest: string, src: string) => {
+  const handleFileMove = async (dest: string, src: string) => {
+    if(await moveFileIsAllowed(src, dest) === false) return
     try {
-      props.dispatchMoveFile(src, dest)
+      props.modal(
+        intl.formatMessage({ id: 'filePanel.moveFile' }),
+        intl.formatMessage({ id: 'filePanel.moveFileMsg1' }, { src, dest }),
+        intl.formatMessage({ id: 'filePanel.yes' }),
+        () => props.dispatchMoveFile(src, dest),
+        intl.formatMessage({ id: 'filePanel.cancel' }),
+        () => {}
+      )
     } catch (error) {
       props.modal(
-        intl.formatMessage({id: 'filePanel.movingFileFailed'}),
-        intl.formatMessage({id: 'filePanel.movingFileFailedMsg'}, {src}),
-        intl.formatMessage({id: 'filePanel.close'}),
+        intl.formatMessage({ id: 'filePanel.movingFileFailed' }),
+        intl.formatMessage({ id: 'filePanel.movingFileFailedMsg' }, { src }),
+        intl.formatMessage({ id: 'filePanel.close' }),
         async () => {}
       )
     }
   }
 
-  const handleFolderMove = (dest: string, src: string) => {
+  const handleFolderMove = async (dest: string, src: string) => {
+    if(await moveFolderIsAllowed(src, dest) === false) return
     try {
-      props.dispatchMoveFolder(src, dest)
+      props.modal(
+        intl.formatMessage({ id: 'filePanel.moveFile' }),
+        intl.formatMessage({ id: 'filePanel.moveFileMsg1' }, { src, dest }),
+        intl.formatMessage({ id: 'filePanel.yes' }),
+        () => props.dispatchMoveFolder(src, dest),
+        intl.formatMessage({ id: 'filePanel.cancel' }),
+        () => {}
+      )
     } catch (error) {
       props.modal(
-        intl.formatMessage({id: 'filePanel.movingFolderFailed'}),
-        intl.formatMessage({id: 'filePanel.movingFolderFailedMsg'}, {src}),
-        intl.formatMessage({id: 'filePanel.close'}),
+        intl.formatMessage({ id: 'filePanel.movingFolderFailed' }),
+        intl.formatMessage({ id: 'filePanel.movingFolderFailedMsg' }, { src }),
+        intl.formatMessage({ id: 'filePanel.close' }),
         async () => {}
       )
     }
   }
 
+  useEffect(() => {
+    if (files[ROOT_PATH]){
+      try {
+        const children: FileType[] = files[ROOT_PATH] as any
+        setChildrenKeys(fileKeySort(children))
+      } catch (error) {
+        setChildrenKeys(Object.keys(files[ROOT_PATH]))
+      }
+    } else{
+      setChildrenKeys([])
+    }
+  }, [props])
+
+
   return (
     <Drag onFileMoved={handleFileMove} onFolderMoved={handleFolderMove}>
       <div ref={treeRef} tabIndex={0} style={{outline: 'none'}}>
@@ -325,7 +358,7 @@ export const FileExplorer = (props: FileExplorerProps) => {
               data-id={`treeViewDivMenu`}
               className={`d-flex flex-row align-items-center`}
             >
-              <span className="w-100 pl-2">
+              <span className="w-100 pl-2 mt-1">
                 <div onClick={handleFileExplorerMenuClick}>
                   <FileExplorerMenu
                     title={''}
@@ -340,10 +373,10 @@ export const FileExplorer = (props: FileExplorerProps) => {
               </span>
             </div>
           </li>
-          <div className="pb-4 mb-4">
+          <div>
             <TreeView id="treeViewMenu">
               {files[ROOT_PATH] &&
-                Object.keys(files[ROOT_PATH]).map((key, index) => (
+                childrenKeys.map((key, index) => (
                   <FileRender
                     file={files[ROOT_PATH][key]}
                     fileDecorations={fileState}
@@ -361,9 +394,13 @@ export const FileExplorer = (props: FileExplorerProps) => {
                     showIconsMenu={props.showIconsMenu}
                     hideIconsMenu={props.hideIconsMenu}
                   />
-                ))}
+                ))
+              }
             </TreeView>
           </div>
+          <Draggable isDraggable={false} file={{ name: '/', path: '/', type: 'folder', isDirectory: true }} expandedPath={props.expandPath} handleClickFolder={null}>
+            <div className='d-block w-100 pb-4 mb-4'></div>
+          </Draggable>
         </TreeView>
       </div>
     </Drag>
diff --git a/libs/remix-ui/workspace/src/lib/components/file-render.tsx b/libs/remix-ui/workspace/src/lib/components/file-render.tsx
index 3fcc358531..a23ed76df3 100644
--- a/libs/remix-ui/workspace/src/lib/components/file-render.tsx
+++ b/libs/remix-ui/workspace/src/lib/components/file-render.tsx
@@ -8,6 +8,7 @@ import {getPathIcon} from '@remix-ui/helper'
 import {FileLabel} from './file-label'
 import {fileDecoration, FileDecorationIcons} from '@remix-ui/file-decorators'
 import {Draggable} from '@remix-ui/drag-n-drop'
+import { fileKeySort } from '../utils'
 
 export interface RenderFileProps {
   file: FileType
@@ -30,6 +31,7 @@ export const FileRender = (props: RenderFileProps) => {
   const [file, setFile] = useState<FileType>({} as FileType)
   const [hover, setHover] = useState<boolean>(false)
   const [icon, setIcon] = useState<string>('')
+  const [childrenKeys, setChildrenKeys] = useState<string[]>([])
 
   useEffect(() => {
     if (props.file && props.file.path && props.file.type) {
@@ -38,6 +40,19 @@ export const FileRender = (props: RenderFileProps) => {
     }
   }, [props.file])
 
+  useEffect(() => {
+    if (file.child) {
+      try {
+        const children: FileType[] = file.child as any
+        setChildrenKeys(fileKeySort(children))
+      } catch (e) {
+        setChildrenKeys(Object.keys(file.child))
+      }
+    } else {
+      setChildrenKeys([])
+    }
+  }, [file.child, props.expandPath, props.file])
+
   const labelClass =
     props.focusEdit.element === file.path
       ? 'bg-light'
@@ -108,7 +123,7 @@ export const FileRender = (props: RenderFileProps) => {
       >
         {file.child ? (
           <TreeView id={`treeView${file.path}`} key={`treeView${file.path}`} {...spreadProps}>
-            {Object.keys(file.child).map((key, index) => (
+            {childrenKeys.map((key, index) => (
               <FileRender
                 file={file.child[key]}
                 fileDecorations={props.fileDecorations}
diff --git a/libs/remix-ui/workspace/src/lib/css/file-explorer.css b/libs/remix-ui/workspace/src/lib/css/file-explorer.css
index 6f6f23a1e7..b67c5f24c7 100644
--- a/libs/remix-ui/workspace/src/lib/css/file-explorer.css
+++ b/libs/remix-ui/workspace/src/lib/css/file-explorer.css
@@ -23,10 +23,10 @@ input[type="file"] {
 .remixui_file               {
     padding           : 4px;
 }
-.remixui_newFile i {
+.remixui_menuItem i {
     cursor            : pointer;
 }
-.remixui_newFile:hover {
+.remixui_menuItem:hover {
     transform         : scale(1.3);
 }
 .remixui_menu {
diff --git a/libs/remix-ui/workspace/src/lib/utils/index.ts b/libs/remix-ui/workspace/src/lib/utils/index.ts
index 9069e827e0..b9cca48f09 100644
--- a/libs/remix-ui/workspace/src/lib/utils/index.ts
+++ b/libs/remix-ui/workspace/src/lib/utils/index.ts
@@ -1,3 +1,4 @@
+import { FileType } from '@remix-ui/file-decorators'
 import { WorkspaceProps, MenuItems } from '../types'
 
 export const contextMenuActions: MenuItems = [{
@@ -113,4 +114,21 @@ export const contextMenuActions: MenuItems = [{
   multiselect: false,
   label: '',
   group: 4
-}]
\ No newline at end of file
+}]
+
+export const fileKeySort = (children: FileType[]): string[] => {
+  const directories = Object.keys(children).filter((key: string) => children[key].isDirectory && children[key].name !== '')
+
+  // sort case insensitive
+  directories.sort((a: string, b: string) => a.toLowerCase().localeCompare(b.toLowerCase()))
+
+  const fileKeys = Object.keys(children).filter((key: string) => !children[key].isDirectory && children[key].name !== '')
+  // sort case insensitive
+  fileKeys.sort((a: string, b: string) => a.toLowerCase().localeCompare(b.toLowerCase()))
+
+  // find the children with a blank name
+  const blankChildren = Object.keys(children).filter((key: string) => children[key].name === '')
+
+  const keys = [...directories, ...fileKeys, ...blankChildren]
+  return keys
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index d1a9eb23d1..dab5259ba0 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "remix-project",
-  "version": "0.36.0-dev",
+  "version": "0.37.0-dev",
   "license": "MIT",
   "description": "Ethereum Remix Monorepo",
   "keywords": [