diff --git a/ui/src/App.tsx b/ui/src/App.tsx
index 42a2c9e6..e11efd33 100644
--- a/ui/src/App.tsx
+++ b/ui/src/App.tsx
@@ -33,15 +33,23 @@ const theme = createTheme({
   },
 });
 
-function NormalLayout({ children }: any) {
+type NormalLayoutProps = {
+  currentPage?: string | null;
+  children: React.ReactNode;
+};
+
+const NormalLayout: React.FC<NormalLayoutProps> = ({
+  currentPage,
+  children,
+}) => {
   return (
     <Box>
-      <Header />
+      <Header currentPage={currentPage} />
       <Box pt="50px">{children}</Box>
       {/* <Footer /> */}
     </Box>
   );
-}
+};
 
 const router = createBrowserRouter([
   {
@@ -55,7 +63,7 @@ const router = createBrowserRouter([
   {
     path: "repos",
     element: (
-      <NormalLayout>
+      <NormalLayout currentPage="Dashboard">
         <Repos />
       </NormalLayout>
     ),
@@ -63,17 +71,8 @@ const router = createBrowserRouter([
   {
     path: "repo/:id",
     element: (
-      <Box height="100vh">
-        <Header />
-        <Box
-          height="100%"
-          boxSizing={"border-box"}
-          sx={{
-            pt: "50px",
-          }}
-        >
-          <Repo />
-        </Box>
+      <Box height="100vh" width="100%" boxSizing={"border-box"}>
+        <Repo />
       </Box>
     ),
   },
@@ -96,7 +95,7 @@ const router = createBrowserRouter([
   {
     path: "profile",
     element: (
-      <NormalLayout>
+      <NormalLayout currentPage="Profile">
         <Profile />
       </NormalLayout>
     ),
diff --git a/ui/src/components/Header.tsx b/ui/src/components/Header.tsx
index 5746b90c..208554a9 100644
--- a/ui/src/components/Header.tsx
+++ b/ui/src/components/Header.tsx
@@ -1,4 +1,4 @@
-import { Link as ReactLink } from "react-router-dom";
+import { Link as ReactLink, useLocation } from "react-router-dom";
 
 import { useState } from "react";
 
@@ -9,6 +9,7 @@ import MenuIcon from "@mui/icons-material/Menu";
 import Menu from "@mui/material/Menu";
 import MenuItem from "@mui/material/MenuItem";
 import Avatar from "@mui/material/Avatar";
+import Breadcrumbs from "@mui/material/Breadcrumbs";
 import Link from "@mui/material/Link";
 import Button from "@mui/material/Button";
 
@@ -24,7 +25,49 @@ import { useAuth } from "../lib/auth";
 
 import useMe from "../lib/me";
 
-export function Header() {
+type HeaderTitleProps = {
+  currentPage: string | null;
+};
+
+const HeaderTitle: React.FC<HeaderTitleProps> = ({ currentPage = null }) => {
+  if (!currentPage) {
+    return (
+      <Typography variant="h6" sx={{ display: "flex", flexGrow: 1 }}>
+        <Link component={ReactLink} underline="none" to="/">
+          CodePod
+        </Link>
+      </Typography>
+    );
+  }
+
+  return (
+    <Breadcrumbs
+      aria-label="breadcrumb"
+      sx={{
+        alignItems: "baseline",
+        display: "flex",
+        flexGrow: 1,
+      }}
+    >
+      <Link component={ReactLink} underline="hover" to="/">
+        <Typography noWrap>CodePod</Typography>
+      </Link>
+      <Typography color="text.primary">{currentPage}</Typography>
+    </Breadcrumbs>
+  );
+};
+
+type HeaderProps = {
+  open?: boolean;
+  drawerWidth?: number;
+  currentPage?: string | null;
+};
+
+export const Header: React.FC<HeaderProps> = ({
+  open = false,
+  drawerWidth = 0,
+  currentPage = null,
+}) => {
   const [anchorElNav, setAnchorElNav] = useState(null);
   const [anchorElUser, setAnchorElUser] = useState(null);
 
@@ -48,7 +91,14 @@ export function Header() {
   const { me } = useMe();
 
   return (
-    <AppBar position="fixed" color="inherit">
+    <AppBar
+      position="fixed"
+      color="inherit"
+      sx={{
+        width: `calc(100% - ${open ? drawerWidth : 0}px)`,
+        transition: "width 195ms cubic-bezier(0.4, 0, 0.6, 1) 0ms",
+      }}
+    >
       <Container maxWidth="xl">
         <Toolbar
           disableGutters
@@ -57,17 +107,6 @@ export function Header() {
             maxHeight: "10px",
           }}
         >
-          <Typography
-            variant="h6"
-            noWrap
-            component="div"
-            sx={{ mr: 2, display: { xs: "none", md: "flex" } }}
-          >
-            <Link component={ReactLink} underline="none" to="/">
-              CodePod
-            </Link>
-          </Typography>
-
           <Box sx={{ flexGrow: 1, display: { xs: "flex", md: "none" } }}>
             <IconButton
               size="large"
@@ -93,9 +132,6 @@ export function Header() {
               }}
               open={Boolean(anchorElNav)}
               onClose={handleCloseNavMenu}
-              sx={{
-                display: { xs: "block", md: "none" },
-              }}
             >
               {/* The toggle menu */}
               <MenuItem onClick={handleCloseNavMenu}>
@@ -120,22 +156,11 @@ export function Header() {
               </MenuItem>
             </Menu>
           </Box>
-          <Typography
-            variant="h6"
-            noWrap
-            component="div"
-            color="primary"
-            sx={{ flexGrow: 1, display: { xs: "flex", md: "none" } }}
-          >
-            <Link component={ReactLink} underline="none" to="/">
-              CodePod
-            </Link>
-          </Typography>
+          <HeaderTitle currentPage={currentPage} />
 
           {/* The navigation on desktop */}
           <Box
             sx={{
-              flexGrow: 1,
               display: { xs: "none", md: "flex" },
               alignItems: "center",
             }}
@@ -186,7 +211,7 @@ export function Header() {
       </Container>
     </AppBar>
   );
-}
+};
 
 const MyMenuItem = ({ children, to = "/" }) => {
   return (
diff --git a/ui/src/components/Sidebar.tsx b/ui/src/components/Sidebar.tsx
index 99db145f..4f1fb600 100644
--- a/ui/src/components/Sidebar.tsx
+++ b/ui/src/components/Sidebar.tsx
@@ -1,22 +1,20 @@
-import { useEffect, useState, useContext } from "react";
-
+import { useEffect, useContext } from "react";
 import { useParams } from "react-router-dom";
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
 import Divider from "@mui/material/Divider";
 import Tooltip from "@mui/material/Tooltip";
 import IconButton from "@mui/material/IconButton";
-
-import { grey } from "@mui/material/colors";
-
-import { useSnackbar, VariantType } from "notistack";
-
-import { gql, useQuery, useMutation, useApolloClient } from "@apollo/client";
-
 import StopIcon from "@mui/icons-material/Stop";
 import RefreshIcon from "@mui/icons-material/Refresh";
 import CloudUploadIcon from "@mui/icons-material/CloudUpload";
+import Drawer from "@mui/material/Drawer";
+import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
+import Grid from "@mui/material/Grid";
+import ChevronRightIcon from "@mui/icons-material/ChevronRight";
+import { useSnackbar, VariantType } from "notistack";
 
+import { gql, useQuery, useMutation, useApolloClient } from "@apollo/client";
 import { useStore } from "zustand";
 
 import { usePrompt } from "../lib/prompt";
@@ -24,7 +22,6 @@ import { usePrompt } from "../lib/prompt";
 import { RepoContext, selectNumDirty, RoleType } from "../lib/store";
 
 import useMe from "../lib/me";
-import { Grid } from "@mui/material";
 
 function Flex(props) {
   return (
@@ -270,40 +267,105 @@ function ToastError() {
   return <Box></Box>;
 }
 
-export function Sidebar() {
+type SidebarProps = {
+  width: number;
+  open: boolean;
+  onOpen: () => void;
+  onClose: () => void;
+};
+
+export const Sidebar: React.FC<SidebarProps> = ({
+  width,
+  open,
+  onOpen,
+  onClose,
+}) => {
   // never render saving status / runtime module for a guest
   // FIXME: improve the implementation logic
   const store = useContext(RepoContext);
   if (!store) throw new Error("Missing BearContext.Provider in the tree");
   const role = useStore(store, (state) => state.role);
   return (
-    <Grid container spacing={2}>
-      {role === RoleType.GUEST ? (
-        <>
-          <Grid item xs={12}>
-            <Box> Read-only Mode: You are a guest. </Box>
-          </Grid>
-          <Grid item xs={12}>
-            {" "}
-            <SidebarSession />
-          </Grid>
-        </>
-      ) : (
-        <>
-          <Grid item xs={12}>
-            <SyncStatus />
-          </Grid>
-          <Grid item xs={12}>
-            {" "}
-            <SidebarSession />
-          </Grid>
-          <Grid item xs={12}>
-            <SidebarRuntime />
-            <SidebarKernel />
+    <>
+      <Box
+        sx={{
+          position: "absolute",
+          display: open ? "none" : "block",
+          top: `54px`,
+          left: 1,
+        }}
+      >
+        <IconButton
+          onClick={onOpen}
+          sx={{
+            zIndex: 1,
+          }}
+        >
+          <ChevronRightIcon />
+        </IconButton>
+      </Box>
+
+      <Drawer
+        sx={{
+          width: width,
+          flexShrink: 0,
+          "& .MuiDrawer-paper": {
+            width: width,
+            boxSizing: "border-box",
+          },
+        }}
+        variant="persistent"
+        anchor="left"
+        open={open}
+      >
+        <Box
+          sx={{
+            display: "flex",
+            alignItems: "center",
+            paddingLeft: "8px",
+            height: 48,
+          }}
+        >
+          <IconButton onClick={onClose}>
+            <ChevronLeftIcon />
+          </IconButton>
+        </Box>
+        <Divider />
+        <Box
+          sx={{
+            padding: "8px 16px",
+          }}
+        >
+          <Grid container spacing={2}>
+            {role === RoleType.GUEST ? (
+              <>
+                <Grid item xs={12}>
+                  <Box> Read-only Mode: You are a guest. </Box>
+                </Grid>
+                <Grid item xs={12}>
+                  {" "}
+                  <SidebarSession />
+                </Grid>
+              </>
+            ) : (
+              <>
+                <Grid item xs={12}>
+                  <SyncStatus />
+                </Grid>
+                <Grid item xs={12}>
+                  {" "}
+                  <SidebarSession />
+                </Grid>
+                <Grid item xs={12}>
+                  <SidebarRuntime />
+                  <SidebarKernel />
+                </Grid>
+                <ToastError />
+              </>
+            )}
           </Grid>
-          <ToastError />
-        </>
-      )}
-    </Grid>
+        </Box>
+      </Drawer>
+    </>
   );
-}
+};
diff --git a/ui/src/hooks/useLocalStorage.ts b/ui/src/hooks/useLocalStorage.ts
new file mode 100644
index 00000000..4133eaa1
--- /dev/null
+++ b/ui/src/hooks/useLocalStorage.ts
@@ -0,0 +1,41 @@
+import { useState } from "react";
+
+// ref: https://usehooks.com/useLocalStorage
+export function useLocalStorage<T>(key: string, initialValue: T) {
+  // State to store our value
+  // Pass initial state function to useState so logic is only executed once
+  const [storedValue, setStoredValue] = useState<T>(() => {
+    if (typeof window === "undefined") {
+      return initialValue;
+    }
+    try {
+      // Get from local storage by key
+      const item = window.localStorage.getItem(key);
+      // Parse stored json or if none return initialValue
+      return item ? JSON.parse(item) : initialValue;
+    } catch (error) {
+      // If error also return initialValue
+      console.log(error);
+      return initialValue;
+    }
+  });
+  // Return a wrapped version of useState's setter function that ...
+  // ... persists the new value to localStorage.
+  const setValue = (value: T | ((val: T) => T)) => {
+    try {
+      // Allow value to be a function so we have same API as useState
+      const valueToStore =
+        value instanceof Function ? value(storedValue) : value;
+      // Save state
+      setStoredValue(valueToStore);
+      // Save to local storage
+      if (typeof window !== "undefined") {
+        window.localStorage.setItem(key, JSON.stringify(valueToStore));
+      }
+    } catch (error) {
+      // A more advanced implementation would handle the error case
+      console.log(error);
+    }
+  };
+  return [storedValue, setValue] as const;
+}
diff --git a/ui/src/pages/repo.tsx b/ui/src/pages/repo.tsx
index bb25826c..da48c778 100644
--- a/ui/src/pages/repo.tsx
+++ b/ui/src/pages/repo.tsx
@@ -2,9 +2,9 @@ import { useParams, useNavigate } from "react-router-dom";
 import { Link as ReactLink } from "react-router-dom";
 import Box from "@mui/material/Box";
 import Link from "@mui/material/Link";
-import Button from "@mui/material/Button";
 import Alert from "@mui/material/Alert";
 import AlertTitle from "@mui/material/AlertTitle";
+import { useApolloClient } from "@apollo/client";
 
 import { useEffect, useState, useRef, useContext } from "react";
 
@@ -14,71 +14,58 @@ import { createRepoStore, RepoContext } from "../lib/store";
 
 import useMe from "../lib/me";
 import { Canvas } from "../components/Canvas";
+import { Header } from "../components/Header";
 import { Sidebar } from "../components/Sidebar";
-import { useApolloClient } from "@apollo/client";
+import { useLocalStorage } from "../hooks/useLocalStorage";
+
+const DrawerWidth = 240;
+const SIDEBAR_KEY = "sidebar";
 
 function RepoWrapper({ children }) {
-  // this component is used to provide foldable sidebar
-  const [show, setShow] = useState(true);
-  let sidebar_width = 0.12;
+  // this component is used to provide a foldable layout
+  const [open, setOpen] = useLocalStorage(SIDEBAR_KEY, true);
+
+  const store = useContext(RepoContext);
+  if (!store) throw new Error("Missing BearContext.Provider in the tree");
+  const repoName = useStore(store, (state) => state.repoName);
+
   return (
-    <Box m="auto" height="100%">
-      <Box
-        sx={{
-          display: "inline-block",
-          verticalAlign: "top",
-          height: "100%",
-          width: show ? sidebar_width : 0,
-          overflow: "auto",
-        }}
-      >
-        <Box sx={{ display: "flex" }}>
-          {/* <Spacer /> */}
-          <Button
-            onClick={() => {
-              setShow(!show);
-            }}
-            size="small"
-            // variant="ghost"
-          >
-            {show ? "Hide" : "Show"}
-          </Button>
-        </Box>
-        <Box sx={{ mx: 2, my: 1 }}>
-          <Sidebar />
-        </Box>
-      </Box>
+    <Box
+      sx={{
+        width: "100%",
+        height: "100%",
+        overflow: "hidden",
+      }}
+    >
+      <Sidebar
+        width={DrawerWidth}
+        open={open}
+        onOpen={() => setOpen(true)}
+        onClose={() => setOpen(false)}
+      />
 
       <Box
         sx={{
-          display: "inline-block",
+          display: "flex",
+          flexGrow: 1,
           verticalAlign: "top",
           height: "100%",
-          width: show ? 1 - sidebar_width : 1,
-          overflow: "scroll",
+          transition: "margin 195ms cubic-bezier(0.4, 0, 0.6, 1) 0ms",
+          ml: open ? `${DrawerWidth}px` : 0,
         }}
       >
+        <Header open={open} drawerWidth={DrawerWidth} currentPage={repoName} />
         <Box
-          style={{
-            position: "absolute",
-            margin: "5px",
-            top: "50px",
-            left: "5px",
+          sx={{
+            boxSizing: "border-box",
+            width: "100%",
+            height: "100%",
+            pt: `52px`,
+            mx: "auto",
           }}
-          zIndex={100}
-          visibility={show ? "hidden" : "inherit"}
         >
-          <Button
-            onClick={() => {
-              setShow(!show);
-            }}
-            size="small"
-            // variant="ghost"
-          >
-            {show ? "Hide" : "Show"}
-          </Button>
+          {children}
         </Box>
-        {children}
       </Box>
     </Box>
   );