diff --git a/src/components/Editor.tsx b/src/components/Editor.tsx
index 2cf4c93..90dcf9f 100644
--- a/src/components/Editor.tsx
+++ b/src/components/Editor.tsx
@@ -1,6 +1,6 @@
 import { FC, useEffect, useState } from "react";
 import CodeEditor from "@uiw/react-textarea-code-editor";
-import * as pathExt from "path";
+import { extname } from "../utils";
 import { useStore } from "../hooks/store";
 
 type EditorProps = {
@@ -11,8 +11,7 @@ type EditorProps = {
 
 export const Editor: FC<EditorProps> = ({ onSave, initialValue = "" }) => {
   const filePaths = useStore((s) => s.currentFilePaths);
-  const ext = pathExt.extname(filePaths[0]).slice(1);
-  console.log(ext);
+  const ext = extname(filePaths[0]);
 
   const [state, setState] = useState(initialValue);
 
@@ -31,7 +30,7 @@ export const Editor: FC<EditorProps> = ({ onSave, initialValue = "" }) => {
   return (
     <CodeEditor
       value={initialValue}
-      language="js"
+      language={ext}
       placeholder="Please enter JS code."
       onChange={(evn) => setState(evn.target.value)}
       padding={15}
diff --git a/src/components/SideBar.tsx b/src/components/SideBar.tsx
index 0e0ab9b..78b969d 100644
--- a/src/components/SideBar.tsx
+++ b/src/components/SideBar.tsx
@@ -11,8 +11,6 @@ import { useStore } from "../hooks/store";
 import { useDirectoryConfig } from "../hooks/useDirectoryConfig";
 import { useDirectoryWatch } from "../hooks/useDirectoryWatch";
 import { keyBy } from "lodash";
-// import { basename, dirname, join  } from "path";
-import * as pathExt from "path";
 import { FC, useCallback, useEffect, useState } from "react";
 import { useDrop } from "react-dnd";
 import { FiArrowLeft } from "react-icons/fi";
@@ -20,7 +18,7 @@ import { VscAdd, VscFile, VscFiles } from "react-icons/vsc";
 import { keyframes, styled } from "../theme";
 import { FsElement } from "types";
 import { useDebouncedCallback } from "use-debounce";
-import { orderWith } from "../utils";
+import { orderWith, basename, join, dirname } from "../utils";
 import { DraggableList } from "./DraggableList";
 import { FileItem } from "./FileItem";
 import { Content, Item, ItemIcon, Menu, Trigger } from "./ui/Menu";
@@ -124,8 +122,8 @@ export const SideBar: FC = () => {
   };
 
   const onMove = async (from: string, pathTo: string) => {
-    const name = pathExt.basename(from);
-    const to = pathExt.join(pathTo, name);
+    const name = basename(from);
+    const to = join(pathTo, name);
     await copyFile(from, to);
     await removeFile(from);
   };
@@ -134,7 +132,7 @@ export const SideBar: FC = () => {
     const type = showAddItem;
 
     if (type === "file") {
-      const path = pathExt.join(directoryPath, name);
+      const path = join(directoryPath, name);
 
       await writeFile({
         contents: "",
@@ -144,7 +142,7 @@ export const SideBar: FC = () => {
     }
 
     if (type === "folder") {
-      await createDir(pathExt.join(directoryPath, name));
+      await createDir(join(directoryPath, name));
       set({ showAddItem: false });
     }
   };
@@ -161,8 +159,8 @@ export const SideBar: FC = () => {
   };
 
   const onRename = async (name: string, path: string) => {
-    const newPath = pathExt.join(pathExt.dirname(path), name);
-    await renameFile(path, pathExt.join(pathExt.dirname(path), name));
+    const newPath = join(dirname(path), name);
+    await renameFile(path, join(dirname(path), name));
     // update present selected document
     if (filePaths.includes(path))
       set({
@@ -196,7 +194,7 @@ export const SideBar: FC = () => {
     accept: "file",
     drop: async (item: any) => {
       const path = item.id;
-      await onMove(path, pathExt.dirname(directoryPath));
+      await onMove(path, dirname(directoryPath));
     },
   });
 
@@ -220,13 +218,13 @@ export const SideBar: FC = () => {
               cursor: "pointer",
             }}
             onClick={() => {
-              set({ currentDirectoryPath: pathExt.dirname(directoryPath) });
+              set({ currentDirectoryPath: dirname(directoryPath) });
             }}
           >
             <FiArrowLeft />
           </div>
         )}
-        <div>{pathExt.basename(directoryPath)}</div>
+        <div>{basename(directoryPath)}</div>
         <div
           style={{
             position: "absolute",
@@ -234,7 +232,7 @@ export const SideBar: FC = () => {
             cursor: "pointer",
           }}
           onClick={() => {
-            set({ currentDirectoryPath: pathExt.dirname(directoryPath) });
+            set({ currentDirectoryPath: dirname(directoryPath) });
           }}
         >
           <Menu>
diff --git a/src/components/ui/Layout.tsx b/src/components/ui/Layout.tsx
index 7824d43..dcf7783 100644
--- a/src/components/ui/Layout.tsx
+++ b/src/components/ui/Layout.tsx
@@ -5,17 +5,6 @@ export type BoxProps = {
   style?: any;
   children?: any;
 
-  padding?: number | string;
-  pointer?: string;
-  flex?: number;
-
-  mb?: number | string;
-  mt?: number | string;
-  ml?: number | string;
-  mr?: number | string;
-
-  minHeight?: string | number;
-
   className?: string;
 };
 
diff --git a/src/hooks/useDirectoryWatch.ts b/src/hooks/useDirectoryWatch.ts
index 92e826b..ab05d19 100644
--- a/src/hooks/useDirectoryWatch.ts
+++ b/src/hooks/useDirectoryWatch.ts
@@ -8,7 +8,9 @@ export const useDirectoryWatch = (path: string, cb: (path: string) => void) => {
   useEffect(() => {
     if (!path) return;
     invoke("watch", { path });
+    console.log("watching" + path);
     return () => {
+      console.log("unwatch");
       invoke("unwatch", { path });
     };
   }, [path]);
@@ -18,6 +20,7 @@ export const useDirectoryWatch = (path: string, cb: (path: string) => void) => {
 
     let stop: any;
     listen<string>("file_changed", (event) => {
+      console.log("payload change")
       cb(event.payload);
     }).then((fn) => {
       stop = fn;
diff --git a/src/hooks/useFs.ts b/src/hooks/useFs.ts
index 58df1aa..a62b76b 100644
--- a/src/hooks/useFs.ts
+++ b/src/hooks/useFs.ts
@@ -11,14 +11,16 @@ export const useFs = () => {
       multiple: false,
       directory: true,
     })) as string;
+    console.log(path);
     set({ currentProjectPath: path, currentDirectoryPath: path });
   };
-  
+
   const openFile = async () => {
     const path = (await open({
       multiple: false,
       defaultPath: currentDirectoryPath,
     })) as string;
+    console.log(path);
     set({ currentFilePaths: [path] });
   };
 
diff --git a/src/utils.ts b/src/utils.ts
index 2d0335a..7c913fd 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -1,7 +1,5 @@
-import * as path from "path";
-
 export const removeExt = (name: string) =>
-  path.basename(name).replace(path.extname(name), "");
+  basename(name).replace(extname(name), "");
 
 export const orderWith = (array: string[], guideArray: string[]) => {
   return [
@@ -9,3 +7,19 @@ export const orderWith = (array: string[], guideArray: string[]) => {
     ...array.filter((e) => !guideArray.includes(e)),
   ];
 };
+
+export const basename = (path: String) => {
+  return path.split("/").reverse()[0];
+};
+
+export const extname = (path: String) => {
+  return path.split(".").reverse()[0];
+};
+
+export const join = (...paths: string[]) => {
+  return paths.join("/");
+};
+
+export const dirname = (path: String) => {
+  return path.split("/").slice(0, -1).join("/");
+};