diff --git a/ui/src/ide/IDE.tsx b/ui/src/ide/IDE.tsx
index 73de47e..397d148 100644
--- a/ui/src/ide/IDE.tsx
+++ b/ui/src/ide/IDE.tsx
@@ -19,7 +19,7 @@ import StatusBar from './statusBar/StatusBar';
 import getFileExtension from './utils';
 
 import './IDE.scss'
-import { fontSizeAtom, languageModeAtom, terminalsAtom } from '../store/AppState';
+import { fileBrowserReloadCountAtom, fontSizeAtom, languageModeAtom, terminalsAtom } from '../store/AppState';
 
 interface Ifile {
   type: string
@@ -47,6 +47,7 @@ function IDE () {
   const [theme] = useAtom(themeAtom)
   const [languageMode, setLanguageMode] = useAtom(languageModeAtom)
   const [terminals, setTerminals] = useAtom(terminalsAtom)
+  const [reloadCount] = useAtom(fileBrowserReloadCountAtom)
 
   const defaultNavState: INavDict = {
     fileBrowser: { name: 'fileBrowser', display: 'd-block' },
@@ -175,7 +176,7 @@ function IDE () {
               <div className='navigation'>
                 <NavigationPanel handleNavigationPanel={handleNavigationPanel} />
                 <div className='sideBar'>
-                  <FileBrowser sendDataToParent={handleDataFromChild} display={navState.fileBrowser.display} />
+                  <FileBrowser sendDataToParent={handleDataFromChild} display={navState.fileBrowser.display} reloadCount={reloadCount} />
                   <SettingsPanel sendDataToParent={handleDataFromChild} display={navState.settingsPanel.display} />
                   <JupyterInfoPanel sendDataToParent={handleDataFromChild} display={navState.jupyterInfoPanel.display}/>
                   <GitPanel sendDataToParent={handleDataFromChild} display={navState.gitPanel.display}/>
diff --git a/ui/src/ide/editor/Launcher.tsx b/ui/src/ide/editor/Launcher.tsx
index 137f9ee..b383e29 100644
--- a/ui/src/ide/editor/Launcher.tsx
+++ b/ui/src/ide/editor/Launcher.tsx
@@ -2,7 +2,8 @@ import React, { useEffect } from 'react';
 import './Launcher.scss';
 import { BaseApiUrl } from '../config';
 import { atom, useAtom } from 'jotai';
-import { kernelspecsAtom, terminalsCountAtom, terminalsAtom } from '../../store/AppState';
+import { kernelspecsAtom, terminalsCountAtom, terminalsAtom, fileBrowserReloadCountAtom } from '../../store/AppState';
+import { v4 as uuidv4 } from 'uuid';
 
 
 
@@ -17,6 +18,7 @@ const Launcher: React.FC<LauncherProps> = ({ data, sendDataToParent }) => {
   const [kernelspecs, setKernelspecs] = useAtom(kernelspecsAtom);
   const [terminalCount, setTerminalCount] = useAtom(terminalsCountAtom);
   const [terminals, setTerminals] = useAtom(terminalsAtom)
+  const [reloadCount, setReloadCount] = useAtom(fileBrowserReloadCountAtom)
 
   // Fetch kernelspecs from the API
   const fetchData = async () => {
@@ -29,6 +31,19 @@ const Launcher: React.FC<LauncherProps> = ({ data, sendDataToParent }) => {
     }
   };
 
+  const createNewFile = async (path: string, contentType: string) => {
+    console.log("add file")
+    const res = await fetch(BaseApiUrl + '/api/contents/create', {
+      method: 'POST',
+      body: JSON.stringify({ parent_dir: path, type: contentType }),
+    });
+
+    const resJson = await res.json();
+    console.log(resJson)
+    sendDataToParent(resJson.name, resJson.path, 'notebook');
+    setReloadCount(reloadCount + 1);
+  };
+
   // Handle opening a new terminal
   const openTerminal = () => {
     console.log('Open terminal');
@@ -55,7 +70,7 @@ const Launcher: React.FC<LauncherProps> = ({ data, sendDataToParent }) => {
           <h2 className="font-h5 fontw-300">Notebook</h2>
           {Object.keys(kernelspecs).length > 0 ? (
             Object.keys(kernelspecs).map((key) => (
-              <div className="launcher-icon" key={key}>
+              <div className="launcher-icon" key={key} onClick={() => createNewFile('/', 'notebook')}>
                 <h6>{key}</h6>
                 <img src={kernelspecs[key].resources['logo-64x64']} alt="logo" />
               </div>
diff --git a/ui/src/ide/sidebar/FileBrowser.tsx b/ui/src/ide/sidebar/FileBrowser.tsx
index 98ba245..f655ba1 100644
--- a/ui/src/ide/sidebar/FileBrowser.tsx
+++ b/ui/src/ide/sidebar/FileBrowser.tsx
@@ -18,9 +18,10 @@ interface IContent {
 interface FileBrowserProps {
   sendDataToParent: (name: string, path: string, type: string) => void;
   display: string;
+  reloadCount: number;
 }
 
-export default function FileBrowser({ sendDataToParent, display }: FileBrowserProps) {
+export default function FileBrowser({ sendDataToParent, display, reloadCount }: FileBrowserProps) {
   const [contents, setContents] = useState<IContent[]>([]);
   const [cwd] = useState<string>('');
   const [projectName, setProjectName] = useState('')
@@ -69,7 +70,7 @@ export default function FileBrowser({ sendDataToParent, display }: FileBrowserPr
 
   useEffect(() => {
     FetchData();
-  }, []);
+  }, [reloadCount]);
 
   return (
     <div className={display}>
diff --git a/ui/src/store/AppState.tsx b/ui/src/store/AppState.tsx
index ba4cbbd..667ed2b 100644
--- a/ui/src/store/AppState.tsx
+++ b/ui/src/store/AppState.tsx
@@ -38,6 +38,7 @@ export const kernelsAtom = atom<IKernelsState>({})
 export const terminalsAtom = atom<ITerminalsState>({})
 export const terminalsCountAtom = atom<number>(0)
 export const userNameAtom = atom<string>("")
+export const fileBrowserReloadCountAtom = atom<number>(0)
 
 
 // left statusBar