@@ -1,4 +1,6 @@
 import * as React from 'react';
+import { useDispatch } from "react-redux";
+import { setDirectories } from "../../lib/state/reducer";
 import Divider from '@mui/material/Divider';
 import Paper from '@mui/material/Paper';
 import MenuList from '@mui/material/MenuList';
@@ -10,25 +12,32 @@ import ContentCut from '@mui/icons-material/ContentCut';
 import ContentCopy from '@mui/icons-material/ContentCopy';
 import ContentPaste from '@mui/icons-material/ContentPaste';
 import Cloud from '@mui/icons-material/Cloud';
+import { openFile, openFolder } from "../../lib/utils/fileSystem";
 
 export default function FileMenu() {
+  const dispatch = useDispatch();
+  async function onFolderSelect() {
+    const folders = await openFolder();
+    console.log(folders);
+    dispatch(setDirectories(folders))
+  }
   return (
-    <Paper sx={{ width: 320, maxWidth: '100%' }}>
+    <Paper sx={{ width: 320, maxWidth: "100%" }}>
       <MenuList>
-        <MenuItem>
+        <MenuItem onClick={() => openFile()}>
           <ListItemIcon>
             <ContentCut fontSize="small" />
           </ListItemIcon>
-          <ListItemText>Cut</ListItemText>
+          <ListItemText>Open File</ListItemText>
           <Typography variant="body2" color="text.secondary">
             ⌘X
           </Typography>
         </MenuItem>
-        <MenuItem>
+        <MenuItem onClick={() => onFolderSelect()}>
           <ListItemIcon>
             <ContentCopy fontSize="small" />
           </ListItemIcon>
-          <ListItemText>Copy</ListItemText>
+          <ListItemText>Open Folder</ListItemText>
           <Typography variant="body2" color="text.secondary">
             ⌘C
           </Typography>
 
@@ -24,7 +24,8 @@ const initialState: AppState = {
         cellShowLineNumbers: false,
         cellTabSize: 2,
         width: "100%",
-    }
+    },
+    directories: [],
 }
 
 const appReducer = createSlice({
@@ -43,6 +44,9 @@ const appReducer = createSlice({
         updateConfig: (state, action) => {
             state.config = action.payload;
         },
+        setDirectories: (state, action) => {
+            state.directories = action.payload;
+        }
     }
 });
 
@@ -51,6 +55,7 @@ export const {
     updateCellIds,
     updateCells,
     updateConfig,
+    setDirectories,
 } = appReducer.actions;
 
 export default appReducer.reducer;
@@ -1,10 +1,15 @@
-import { configureStore } from "@reduxjs/toolkit";
+import { configureStore, getDefaultMiddleware } from "@reduxjs/toolkit";
 import appReducer from "./reducer";
 
 const store = configureStore({
-    reducer: {
-        app: appReducer
-    }
+  devTools: true,
+  reducer: {
+    app: appReducer,
+  },
+  middleware: (getDefaultMiddleware) =>
+    getDefaultMiddleware({
+      serializableCheck: false,
+    }),
 });
 
 export default store;
@@ -18,6 +18,11 @@ export type NbCell = {
     outputError?: any;
 }
 
+export type DirectoryObj = {
+    key: string,
+    value: Object,
+}
+
 export type Notebook = {
     cellIds: string[];
     cells: {
@@ -53,6 +58,7 @@ export type AppState = {
     cellIds: string[];
     cells: {
         [key: string]: NbCell
-    }
+    },
+    directories: DirectoryObj[],
     config: Partial<NotebookConfig>;
 }
@@ -0,0 +1,13 @@
+export async function openFile() {
+  let [fileHandle] = await window.showOpenFilePicker();
+  console.log(fileHandle.kind);
+}
+
+export async function openFolder() {
+  const directoryHandle = await window.showDirectoryPicker();
+  let dirs = [];
+  for await (const [key, value] of directoryHandle.entries()) {
+    dirs.push({ key, value });
+  }
+    return dirs;
+}
@@ -17,31 +17,31 @@ const Home: NextPage = () => {
         <link rel="icon" href="/favicon.ico" />
       </Head>
 
-      <div className='flex-row'>
+      <div className="flex-row">
         <section>
           <NavBar />
         </section>
         <section>
           <MenuBar />
         </section>
-
-        <section style={{ height: "650px" }} className='grid grid-cols-12 p-2 overflow-y-scroll'>
-          <div className='fixed'>
+        <section className="flex p-2 border-r-2 overflow-y-scroll">
+          <div className="fixed flex-none">
             <SideBar />
           </div>
-          <div className='col-span-12 border-l-2 ml-60'>
-            {
-              cellIds.map((cellId: string, i: number) => {
-                const cell: NbCell = cells[cellId]
-                return <div key={cellId}><NoteBookCell cell={cell} /></div>
-              })
-            }
+          <div className=" flex-1 w-64 col-span-12 ml-60">
+            {cellIds.map((cellId: string, i: number) => {
+              const cell: NbCell = cells[cellId];
+              return (
+                <div key={cellId}>
+                  <NoteBookCell cell={cell} />
+                </div>
+              );
+            })}
           </div>
-
         </section>
       </div>
     </div>
-  )
+  );
 }
 
 export default Home