diff --git a/public/images/icons/w3s_extension.png b/public/images/icons/w3s_extension.png
new file mode 100644
index 00000000..8f91f455
Binary files /dev/null and b/public/images/icons/w3s_extension.png differ
diff --git a/src/components/DeveloperIDE/CurrentProject/index.tsx b/src/components/DeveloperIDE/CurrentProject/index.tsx
index 015bf8f3..643b96ce 100644
--- a/src/components/DeveloperIDE/CurrentProject/index.tsx
+++ b/src/components/DeveloperIDE/CurrentProject/index.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Flex, Box } from '@chakra-ui/react';
+import { Flex, Box, Tooltip, Button } from '@chakra-ui/react';
 import { observer } from 'mobx-react-lite';
 import { useStore } from '@/store/index';
 import ToolBar from '../ToolBar';
@@ -10,26 +10,59 @@ import DBTable from '../DeveloperDBTable';
 import EventLogs from '@/components/IDE/EventLogs';
 import Settings from '../Settings';
 import { ChevronLeftIcon } from '@chakra-ui/icons';
+import { MdRefresh } from 'react-icons/md';
+import { UnstyledButton } from '@mantine/core';
 
 const CurrentProject = observer(() => {
   const {
+    w3s,
     w3s: { showContent, project }
   } = useStore();
 
   return (
-    <Flex w="100%">
-      <ToolBar borderRadius="8px" overflowY="auto" />
-      <Box ml="220px" w="100%" p="20px" bg="#fff" boxSizing='content-box' borderRadius="8px">
-        {showContent === 'METRICS' && <Metrics />}
-        {showContent === 'CURRENT_PUBLISHERS' && <Publishers />}
-        {(showContent === 'CONTRACT_LOGS' || showContent === 'CHAIN_TX' || showContent === 'CHAIN_HEIGHT') && <Triggers />}
-        {showContent === 'DB_TABLE' && <DBTable />}
-        {showContent === 'CURRENT_EVENT_LOGS' && <EventLogs />}
-        {showContent === 'SETTINGS' && <Settings />}
-      </Box>
-    </Flex>
+    <Box>
+      <Flex
+        mb="15px"
+        alignItems="center"
+        color="#0F0F0F"
+        fontSize="14px"
+        cursor="pointer"
+        bg="#fff"
+        p="10px 15px"
+        w="86px"
+        borderRadius="4px"
+        onClick={() => {
+          project.allProjects.onSelect(-1);
+          project.resetSelectedNames();
+        }}
+      >
+        <ChevronLeftIcon />
+        <Box ml="10px">Back</Box>
+      </Flex>
+      <Flex w="100%" h="calc(100vh - 180px)" overflow={'hidden'} position="relative">
+        <ToolBar borderRadius="8px" overflowY="auto" />
+        <Box ml="20px" w="100%" h="100%" p="20px" pb="50px" bg="#fff" boxSizing="content-box" borderRadius="8px" overflow={'auto'}>
+          <Flex mb={4}>
+            <Button
+              ml="auto"
+              size="sm"
+              onClick={(e) => {
+                w3s.init();
+              }}
+            >
+              <MdRefresh />
+            </Button>
+          </Flex>
+          {showContent === 'METRICS' && <Metrics />}
+          {showContent === 'CURRENT_PUBLISHERS' && <Publishers />}
+          {(showContent === 'CONTRACT_LOGS' || showContent === 'CHAIN_TX' || showContent === 'CHAIN_HEIGHT') && <Triggers />}
+          {showContent === 'DB_TABLE' && <DBTable />}
+          {showContent === 'CURRENT_EVENT_LOGS' && <EventLogs />}
+          {showContent === 'SETTINGS' && <Settings />}
+        </Box>
+      </Flex>
+    </Box>
   );
 });
 
-
 export default CurrentProject;
diff --git a/src/components/Tree/index.tsx b/src/components/Tree/index.tsx
index c8ddb7ef..8c2bb1f3 100644
--- a/src/components/Tree/index.tsx
+++ b/src/components/Tree/index.tsx
@@ -5,7 +5,7 @@ import { observer, useLocalObservable } from 'mobx-react-lite';
 import { ContextMenu, ContextMenuTrigger, MenuItem } from 'react-contextmenu';
 import { helper, toast } from '@/lib/helper';
 import { hooks } from '@/lib/hooks';
-import { Image, ImageProps, Box, Flex, Portal, Text, Tooltip, Divider } from '@chakra-ui/react';
+import { Image, ImageProps, Box, Flex, Portal, Text, Tooltip, Divider, Button, Center } from '@chakra-ui/react';
 import { VscCloudDownload, VscDebugStart, VscFile, VscFiles, VscFileSymlinkFile, VscFileZip, VscFolder, VscTrash } from 'react-icons/vsc';
 import { v4 as uuidv4 } from 'uuid';
 import { labExamples } from '@/constants/labExamples';
@@ -43,7 +43,7 @@ export const FileIcon = (file: FilesItemType) => {
     return <Image {...s} src="/images/icons/file.svg"></Image>;
   }
 
-  if (file?.label == 'Browser Files' || file.type == 'folder') {
+  if (file?.label == 'Browser Files') {
     return <>{file.isOpen ? <Image {...s} src="/images/icons/folder-client-open.svg"></Image> : <Image {...s} src="/images/icons/folder-client.svg"></Image>}</>;
   } else if (file?.label == VSCodeRemoteFolderName) {
     return (
@@ -258,6 +258,7 @@ export const Tree = observer(({ data, onSelect, isHidden = false }: IProps) => {
                 <Flex color={item.label?.startsWith('.') || isHidden ? '#979797' : ''} px={1} py={1} alignItems={'center'} _hover={{ bg: '#f6f6f6' }} bg={item.key == curFilekey ? '#f6f6f6' : ''}>
                   {item.children && <> {item?.isOpen ? <ChevronDownIcon mr={1} /> : <ChevronRightIcon mr={1} />}</>}
                   {FileIcon(item)}
+
                   {item.isRename ? (
                     <input
                       autoFocus
@@ -285,6 +286,34 @@ export const Tree = observer(({ data, onSelect, isHidden = false }: IProps) => {
                       {item.label}
                     </Box>
                   )}
+
+                  {item.label == VSCodeRemoteFolderName && !w3s.projectManager.isWSConnect && (
+                    <Center
+                      ml="auto"
+                      px={1}
+                      borderRadius={'3px'}
+                      onClick={async (e) => {
+                        e.stopPropagation();
+                        try {
+                          await w3s.projectManager.connectWs();
+                        } catch (e) {
+                          if (!w3s.projectManager.isWSConnect) {
+                            window.open('vscode://dlhtx.W3BStream-vscode-extension');
+                          }
+                        }
+                      }}
+                    >
+                      <Tooltip label="Connect to VSCode w3bstream extension">
+                        <Image src="/images/icons/w3s_extension.png" h={4} w={4}></Image>
+                      </Tooltip>
+                    </Center>
+                  )}
+                  {item?.data?.size && (
+                    <Box ml="auto" color="gray" fontSize={'12px'}>
+                      {item?.data?.size}kb
+                    </Box>
+                  )}
+
                   {item?.data?.dataType == 'assemblyscript' && curFilesListSchema?.curActiveFileId == item?.key && (
                     <>
                       <Tooltip label={`Upload to Devnet`} placement="top">
diff --git a/src/store/lib/w3bstream/project.ts b/src/store/lib/w3bstream/project.ts
index 4b78b388..38eada60 100644
--- a/src/store/lib/w3bstream/project.ts
+++ b/src/store/lib/w3bstream/project.ts
@@ -26,11 +26,7 @@ export type VSCodeFilesType = {
   name: string;
   path: string;
   content: string;
-  studioOptions: {
-    dev: boolean;
-    projectName: string;
-    payload: string;
-  };
+  size: number;
 };
 export class ProjectManager {
   projects: ProjectType[] = [];
@@ -88,11 +84,7 @@ export class ProjectManager {
         name
         path
         content
-        studioOptions {
-          dev
-          projectName
-          payload
-        }
+        size
       }
   }`;
     this.wsClient = createClient({
@@ -111,13 +103,17 @@ export class ProjectManager {
             files: VSCodeFilesType[];
           };
         }) => {
+          console.log(data, 'data');
           this.curFilesListSchema.setVscodeRemotFile(data.data.files);
-          this.curFilesListSchema.runAutoDevActions(data.data.files);
+          // this.curFilesListSchema.runAutoDevActions(data.data.files);
           result = data;
           this.isWSConnect = true;
         },
         error: () => {
+          console.log('error Connect');
+          this.curFilesListSchema.setVscodeRemotFile([]);
           this.isWSConnect = false;
+          console.log(this.isWSConnect);
           reject();
         },
         complete: () => resolve(result)
diff --git a/src/store/lib/w3bstream/schema/filesList.ts b/src/store/lib/w3bstream/schema/filesList.ts
index 9d97ad05..32847bf3 100644
--- a/src/store/lib/w3bstream/schema/filesList.ts
+++ b/src/store/lib/w3bstream/schema/filesList.ts
@@ -18,6 +18,7 @@ type FileItemDataType<T = any> = {
   code?: string;
   language?: string;
   extraData?: T;
+  size?: number;
   [key: string]: any;
 };
 
@@ -63,9 +64,12 @@ export class FilesListSchema {
   }
 
   setVscodeRemotFile(files: VSCodeFilesType[]) {
+    console.log(files);
     const hasVscodeFileFolder = this.files.find((i) => i.label == VSCodeRemoteFolderName);
     if (hasVscodeFileFolder) {
       hasVscodeFileFolder.children = [];
+      console.log(this.files);
+      this.syncToIndexDb();
       if (!files) return;
       files.forEach((file) => {
         hasVscodeFileFolder.children.push({
@@ -79,7 +83,9 @@ export class FilesListSchema {
             language: helper.getFileLanguage(file.name),
             extraData: {
               raw: helper.base64ToUint8Array(file.content)
-            }
+            },
+            dataType: file.name.endsWith('.wasm') ? 'wasm' : '',
+            size: file.size
           }
         });
       });
@@ -95,83 +101,83 @@ export class FilesListSchema {
     this.syncToIndexDb();
   }
 
-  async runAutoDevActions(files: VSCodeFilesType[]) {
-    if (files.some((i) => !i.studioOptions.dev)) return;
-    const tempVScodeFiles = tempVScodeFilesStorage.value;
-    const compareTempVScodeFiles = _.isEqual(
-      toJS(tempVScodeFiles),
-      files.filter((i) => i.name.endsWith('.wasm'))
-    );
-    console.log('sameWASM', compareTempVScodeFiles);
-    if (compareTempVScodeFiles) return;
-    tempVScodeFilesStorage.set(files.filter((i) => i.name.endsWith('.wasm')));
-    files
-      ?.filter((i) => i.name.endsWith('.wasm'))
-      .map(async (file) => {
-        const projectName = file.studioOptions.projectName;
-        const payload = file.studioOptions.payload;
-        const raw = helper.base64ToUint8Array(file.content);
-        //find projectName in project list
-        const project = rootStore.w3s.project.allProjects.value.find((i: ProjectType) => i.f_name == projectName);
-        //if project not exist, create project
-        console.log('project', project);
-        if (project) {
-          //delete project
-          await axios.request({
-            method: 'delete',
-            url: `/api/w3bapp/project/${project.name}`
-          });
-          await axios.request({
-            method: 'get',
-            url: '/api/w3bapp/project'
-          });
-        }
-        const projectRes = await axios.request({
-          method: 'post',
-          url: '/api/w3bapp/project',
-          data: {
-            name: projectName
-          }
-        });
-        eventBus.emit('project.create');
-        // create applet in project
-        let formData = new FormData();
-        console.log(helper.Uint8ArrayToWasmBase64FileData(file.name, raw));
-        const fileBlob = dataURItoBlob(helper.Uint8ArrayToWasmBase64FileData(file.name, raw));
-        formData.append('file', fileBlob.blob);
-        formData.append(
-          'info',
-          JSON.stringify({
-            wasmName: file.name,
-            projectID: projectRes.data.projectID,
-            appletName: file.name.replace('.wasm', '')
-          })
-        );
-        const appletRes = await axios.request({
-          method: 'post',
-          url: `http://localhost:8888/srv-applet-mgr/v0/applet/${projectRes.data.projectID}`,
-          headers: {
-            'Content-Type': 'multipart/form-data'
-          },
-          data: formData
-        });
-        eventBus.emit('applet.create');
-        const deployRes = await rootStore.w3s.applet.deployApplet({ appletID: appletRes.data.appletID });
-        console.log('deployRes', deployRes);
-        const startRes = await rootStore.w3s.instances.handleInstance({ instanceID: deployRes.instanceID, event: 'START' });
-        //send event
-        await axios.request({
-          method: 'post',
-          url: `/api/w3bapp/event/${projectRes.data.name}`,
-          headers: {
-            'Content-Type': 'text/plain'
-          },
-          data: {
-            payload
-          }
-        });
-      });
-  }
+  // async runAutoDevActions(files: VSCodeFilesType[]) {
+  //   // if (files.some((i) => !i.studioOptions.dev)) return;
+  //   const tempVScodeFiles = tempVScodeFilesStorage.value;
+  //   const compareTempVScodeFiles = _.isEqual(
+  //     toJS(tempVScodeFiles),
+  //     files.filter((i) => i.name.endsWith('.wasm'))
+  //   );
+  //   console.log('sameWASM', compareTempVScodeFiles);
+  //   if (compareTempVScodeFiles) return;
+  //   tempVScodeFilesStorage.set(files.filter((i) => i.name.endsWith('.wasm')));
+  //   files
+  //     ?.filter((i) => i.name.endsWith('.wasm'))
+  //     .map(async (file) => {
+  //       // const projectName = file.studioOptions.projectName;
+  //       // const payload = file.studioOptions.payload;
+  //       const raw = helper.base64ToUint8Array(file.content);
+  //       //find projectName in project list
+  //       const project = rootStore.w3s.project.allProjects.value.find((i: ProjectType) => i.f_name == projectName);
+  //       //if project not exist, create project
+  //       console.log('project', project);
+  //       if (project) {
+  //         //delete project
+  //         await axios.request({
+  //           method: 'delete',
+  //           url: `/api/w3bapp/project/${project.name}`
+  //         });
+  //         await axios.request({
+  //           method: 'get',
+  //           url: '/api/w3bapp/project'
+  //         });
+  //       }
+  //       const projectRes = await axios.request({
+  //         method: 'post',
+  //         url: '/api/w3bapp/project',
+  //         data: {
+  //           name: projectName
+  //         }
+  //       });
+  //       eventBus.emit('project.create');
+  //       // create applet in project
+  //       let formData = new FormData();
+  //       console.log(helper.Uint8ArrayToWasmBase64FileData(file.name, raw));
+  //       const fileBlob = dataURItoBlob(helper.Uint8ArrayToWasmBase64FileData(file.name, raw));
+  //       formData.append('file', fileBlob.blob);
+  //       formData.append(
+  //         'info',
+  //         JSON.stringify({
+  //           wasmName: file.name,
+  //           projectID: projectRes.data.projectID,
+  //           appletName: file.name.replace('.wasm', '')
+  //         })
+  //       );
+  //       const appletRes = await axios.request({
+  //         method: 'post',
+  //         url: `http://localhost:8888/srv-applet-mgr/v0/applet/${projectRes.data.projectID}`,
+  //         headers: {
+  //           'Content-Type': 'multipart/form-data'
+  //         },
+  //         data: formData
+  //       });
+  //       eventBus.emit('applet.create');
+  //       const deployRes = await rootStore.w3s.applet.deployApplet({ appletID: appletRes.data.appletID });
+  //       console.log('deployRes', deployRes);
+  //       const startRes = await rootStore.w3s.instances.handleInstance({ instanceID: deployRes.instanceID, event: 'START' });
+  //       //send event
+  //       await axios.request({
+  //         method: 'post',
+  //         url: `/api/w3bapp/event/${projectRes.data.name}`,
+  //         headers: {
+  //           'Content-Type': 'text/plain'
+  //         },
+  //         data: {
+  //           payload
+  //         }
+  //       });
+  //     });
+  // }
 
   findFile(objects: FilesItemType[], key: string): FilesItemType {
     for (let o of objects || []) {