diff --git a/apps/ui-desktop/src/App.css b/apps/ui-desktop/src/App.css
deleted file mode 100644
index b10aa088..00000000
--- a/apps/ui-desktop/src/App.css
+++ /dev/null
@@ -1,42 +0,0 @@
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  /* padding: 2rem; */
-  /* text-align: center; */
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}
diff --git a/apps/ui-desktop/src/App.tsx b/apps/ui-desktop/src/App.tsx
index 31c4cf09..d32e6bad 100644
--- a/apps/ui-desktop/src/App.tsx
+++ b/apps/ui-desktop/src/App.tsx
@@ -1,4 +1,4 @@
-import "./App.css";
+import "@codepod/ui/src/App.css";
 import "@codepod/ui/src/custom.css";
 
 import {
@@ -40,18 +40,10 @@ const theme = createTheme({
   },
 });
 
-type NormalLayoutProps = {
-  currentPage?: string | null;
-  children: React.ReactNode;
-};
-
-const NormalLayout: React.FC<NormalLayoutProps> = ({
-  currentPage,
-  children,
-}) => {
+const NormalLayout = ({ children }) => {
   return (
     <Box>
-      <Header currentPage={currentPage} />
+      <Header />
       <Box pt="50px">{children}</Box>
       {/* <Footer /> */}
     </Box>
diff --git a/apps/ui-desktop/src/index.css b/apps/ui-desktop/src/index.css
deleted file mode 100644
index a6dc18e0..00000000
--- a/apps/ui-desktop/src/index.css
+++ /dev/null
@@ -1,89 +0,0 @@
-:root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-text-size-adjust: 100%;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  /* display: flex; */
-  place-items: center;
-  min-width: 320px;
-  /* min-height: 100vh; */
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}
-
-.react-resizable {
-  position: relative;
-  height: auto !important;
-}
-.react-resizable-handle {
-  position: absolute;
-  width: 20px;
-  height: 20px;
-  bottom: 0;
-  right: 0;
-  background-image: url("data:image/svg+xml,%3Csvg t='1668935417997' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='3474' width='32' height='32'%3E%3Cpath d='M426.666667 256a42.666667 42.666667 0 0 0-42.666667 42.666667v170.666666H230.826667l34.133333-33.706666a42.666667 42.666667 0 0 0-60.586667-60.586667l-106.666666 106.666667a42.666667 42.666667 0 0 0-8.96 14.08 42.666667 42.666667 0 0 0 0 32.426666 42.666667 42.666667 0 0 0 8.96 14.08l106.666666 106.666667a42.666667 42.666667 0 0 0 60.586667 0 42.666667 42.666667 0 0 0 0-60.586667l-34.133333-33.706666H384v170.666666a42.666667 42.666667 0 0 0 85.333333 0V298.666667a42.666667 42.666667 0 0 0-42.666666-42.666667z m508.586666 239.786667a42.666667 42.666667 0 0 0-8.96-14.08l-106.666666-106.666667a42.666667 42.666667 0 0 0-60.586667 60.586667l34.133333 33.706666H640V298.666667a42.666667 42.666667 0 0 0-85.333333 0v426.666666a42.666667 42.666667 0 0 0 85.333333 0v-170.666666h153.173333l-34.133333 33.706666a42.666667 42.666667 0 0 0 0 60.586667 42.666667 42.666667 0 0 0 60.586667 0l106.666666-106.666667a42.666667 42.666667 0 0 0 8.96-14.08 42.666667 42.666667 0 0 0 0-32.426666z' p-id='3475' fill='%231296db'%3E%3C/path%3E%3C/svg%3E");
-  background-position: bottom right;
-  background-size: contain;
-  padding: 0 3px 3px 0;
-  background-repeat: no-repeat;
-  background-origin: content-box;
-  box-sizing: border-box;
-  cursor: se-resize;
-}
diff --git a/apps/ui-desktop/src/main.tsx b/apps/ui-desktop/src/main.tsx
index 3d7150da..88382233 100644
--- a/apps/ui-desktop/src/main.tsx
+++ b/apps/ui-desktop/src/main.tsx
@@ -1,10 +1,10 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App.tsx'
-import './index.css'
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App.tsx";
+import "@codepod/ui/src/index.css";
 
-ReactDOM.createRoot(document.getElementById('root')!).render(
+ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>,
-)
+  </React.StrictMode>
+);
diff --git a/apps/ui-web/src/App.css b/apps/ui-web/src/App.css
deleted file mode 100644
index b10aa088..00000000
--- a/apps/ui-web/src/App.css
+++ /dev/null
@@ -1,42 +0,0 @@
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  /* padding: 2rem; */
-  /* text-align: center; */
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}
diff --git a/apps/ui-web/src/App.tsx b/apps/ui-web/src/App.tsx
index b16ee55e..5487b12f 100644
--- a/apps/ui-web/src/App.tsx
+++ b/apps/ui-web/src/App.tsx
@@ -1,4 +1,4 @@
-import "./App.css";
+import "@codepod/ui/src/App.css";
 import "@codepod/ui/src/custom.css";
 
 import {
@@ -48,18 +48,10 @@ const theme = createTheme({
   },
 });
 
-type NormalLayoutProps = {
-  currentPage?: string | null;
-  children: React.ReactNode;
-};
-
-const NormalLayout: React.FC<NormalLayoutProps> = ({
-  currentPage,
-  children,
-}) => {
+const NormalLayout = ({ children }) => {
   return (
     <Box>
-      <Header currentPage={currentPage} />
+      <Header />
       <Box pt="50px">{children}</Box>
       {/* <Footer /> */}
     </Box>
@@ -78,7 +70,7 @@ const router = createBrowserRouter([
   {
     path: "dashboard",
     element: (
-      <NormalLayout currentPage="Dashboard">
+      <NormalLayout>
         <Dashboard />
       </NormalLayout>
     ),
@@ -86,6 +78,9 @@ const router = createBrowserRouter([
   {
     path: "repo/:id",
     element: (
+      // Not wrapperd with NormalLayout (header + padding) because:
+      // 1. Need to use vh to make the Canvas exact full screen
+      // 2. Need to populate more buttons to header.
       <Box height="100vh" width="100%" boxSizing={"border-box"}>
         <Repo yjsWsUrl={yjsWsUrl} />
       </Box>
@@ -110,7 +105,7 @@ const router = createBrowserRouter([
   {
     path: "profile",
     element: (
-      <NormalLayout currentPage="Profile">
+      <NormalLayout>
         <Profile />
       </NormalLayout>
     ),
diff --git a/apps/ui-web/src/index.css b/apps/ui-web/src/index.css
deleted file mode 100644
index a6dc18e0..00000000
--- a/apps/ui-web/src/index.css
+++ /dev/null
@@ -1,89 +0,0 @@
-:root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-text-size-adjust: 100%;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  /* display: flex; */
-  place-items: center;
-  min-width: 320px;
-  /* min-height: 100vh; */
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}
-
-.react-resizable {
-  position: relative;
-  height: auto !important;
-}
-.react-resizable-handle {
-  position: absolute;
-  width: 20px;
-  height: 20px;
-  bottom: 0;
-  right: 0;
-  background-image: url("data:image/svg+xml,%3Csvg t='1668935417997' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='3474' width='32' height='32'%3E%3Cpath d='M426.666667 256a42.666667 42.666667 0 0 0-42.666667 42.666667v170.666666H230.826667l34.133333-33.706666a42.666667 42.666667 0 0 0-60.586667-60.586667l-106.666666 106.666667a42.666667 42.666667 0 0 0-8.96 14.08 42.666667 42.666667 0 0 0 0 32.426666 42.666667 42.666667 0 0 0 8.96 14.08l106.666666 106.666667a42.666667 42.666667 0 0 0 60.586667 0 42.666667 42.666667 0 0 0 0-60.586667l-34.133333-33.706666H384v170.666666a42.666667 42.666667 0 0 0 85.333333 0V298.666667a42.666667 42.666667 0 0 0-42.666666-42.666667z m508.586666 239.786667a42.666667 42.666667 0 0 0-8.96-14.08l-106.666666-106.666667a42.666667 42.666667 0 0 0-60.586667 60.586667l34.133333 33.706666H640V298.666667a42.666667 42.666667 0 0 0-85.333333 0v426.666666a42.666667 42.666667 0 0 0 85.333333 0v-170.666666h153.173333l-34.133333 33.706666a42.666667 42.666667 0 0 0 0 60.586667 42.666667 42.666667 0 0 0 60.586667 0l106.666666-106.666667a42.666667 42.666667 0 0 0 8.96-14.08 42.666667 42.666667 0 0 0 0-32.426666z' p-id='3475' fill='%231296db'%3E%3C/path%3E%3C/svg%3E");
-  background-position: bottom right;
-  background-size: contain;
-  padding: 0 3px 3px 0;
-  background-repeat: no-repeat;
-  background-origin: content-box;
-  box-sizing: border-box;
-  cursor: se-resize;
-}
diff --git a/apps/ui-web/src/main.tsx b/apps/ui-web/src/main.tsx
index 3d7150da..88382233 100644
--- a/apps/ui-web/src/main.tsx
+++ b/apps/ui-web/src/main.tsx
@@ -1,10 +1,10 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App.tsx'
-import './index.css'
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App.tsx";
+import "@codepod/ui/src/index.css";
 
-ReactDOM.createRoot(document.getElementById('root')!).render(
+ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>,
-)
+  </React.StrictMode>
+);
diff --git a/apps/ui/src/App.css b/apps/ui/src/App.css
index b10aa088..0c016660 100644
--- a/apps/ui/src/App.css
+++ b/apps/ui/src/App.css
@@ -1,5 +1,5 @@
 #root {
-  max-width: 1280px;
+  /* max-width: 1280px; */
   margin: 0 auto;
   /* padding: 2rem; */
   /* text-align: center; */
diff --git a/apps/ui/src/App.tsx b/apps/ui/src/App.tsx
index 06e788c3..e652b6f8 100644
--- a/apps/ui/src/App.tsx
+++ b/apps/ui/src/App.tsx
@@ -1,147 +1,8 @@
 import "./App.css";
 import "./custom.css";
 
-import {
-  createBrowserRouter,
-  createRoutesFromElements,
-  Route,
-  RouterProvider,
-} from "react-router-dom";
-
-import { createTheme, ThemeProvider } from "@mui/material/styles";
-
-import { Home } from "./pages/index";
-import { Dashboard } from "./pages/dashboard";
-import { Repo } from "./pages/repo";
 import { Test } from "./pages/test";
-import { SignIn } from "./pages/login";
-import { SignUp } from "./pages/signup";
-import { Profile } from "./pages/profile";
-
-import { AuthProvider } from "./lib/auth";
-import { Header, Footer } from "./components/Header";
-
-import Box from "@mui/material/Box";
-import { SnackbarProvider } from "notistack";
-
-import { Docs } from "./pages/docs";
-
-const yjsWsUrl = import.meta.env.VITE_APP_YJS_WS_URL;
-const apiUrl = import.meta.env.VITE_APP_API_URL;
-const spawnerApiUrl = import.meta.env.VITE_APP_SPAWNER_API_URL;
-
-if (!yjsWsUrl) {
-  throw new Error("VITE_APP_YJS_WS_URL is not defined");
-}
-if (!apiUrl) {
-  throw new Error("VITE_APP_API_URL is not defined");
-}
-if (!spawnerApiUrl) {
-  throw new Error("VITE_APP_RUNTIME_API_URL is not defined");
-}
-
-const theme = createTheme({
-  typography: {
-    button: {
-      textTransform: "none",
-    },
-  },
-});
-
-type NormalLayoutProps = {
-  currentPage?: string | null;
-  children: React.ReactNode;
-};
-
-const NormalLayout: React.FC<NormalLayoutProps> = ({
-  currentPage,
-  children,
-}) => {
-  return (
-    <Box>
-      <Header currentPage={currentPage} />
-      <Box pt="50px">{children}</Box>
-      {/* <Footer /> */}
-    </Box>
-  );
-};
-
-const router = createBrowserRouter([
-  {
-    path: "docs",
-    element: (
-      <NormalLayout>
-        <Docs />
-      </NormalLayout>
-    ),
-  },
-  {
-    path: "dashboard",
-    element: (
-      <NormalLayout currentPage="Dashboard">
-        <Dashboard />
-      </NormalLayout>
-    ),
-  },
-  {
-    path: "repo/:id",
-    element: (
-      <Box height="100vh" width="100%" boxSizing={"border-box"}>
-        <Repo yjsWsUrl={yjsWsUrl} />
-      </Box>
-    ),
-  },
-  {
-    path: "login",
-    element: (
-      <NormalLayout>
-        <SignIn />
-      </NormalLayout>
-    ),
-  },
-  {
-    path: "signup",
-    element: (
-      <NormalLayout>
-        <SignUp />
-      </NormalLayout>
-    ),
-  },
-  {
-    path: "profile",
-    element: (
-      <NormalLayout currentPage="Profile">
-        <Profile />
-      </NormalLayout>
-    ),
-  },
-  {
-    path: "test",
-    element: (
-      <NormalLayout>
-        <Test />
-      </NormalLayout>
-    ),
-  },
-  {
-    path: "/",
-    element: (
-      <NormalLayout>
-        {/* <Home /> */}
-        <Dashboard />
-      </NormalLayout>
-    ),
-  },
-]);
 
 export function App() {
-  return (
-    <ThemeProvider theme={theme}>
-      <AuthProvider apiUrl={apiUrl} spawnerApiUrl={spawnerApiUrl}>
-        <SnackbarProvider maxSnack={5}>
-          <RouterProvider router={router} />
-        </SnackbarProvider>
-      </AuthProvider>
-    </ThemeProvider>
-  );
+  return <Test />;
 }
diff --git a/apps/ui/src/components/Header.tsx b/apps/ui/src/components/Header.tsx
index a19c61ad..b1bb436b 100644
--- a/apps/ui/src/components/Header.tsx
+++ b/apps/ui/src/components/Header.tsx
@@ -25,41 +25,7 @@ import { useAuth } from "../lib/auth";
 
 import { useMe } from "../lib/auth";
 
-type HeaderProps = {
-  open?: boolean;
-  drawerWidth?: number;
-  currentPage?: string | null;
-  breadcrumbItem?: React.ReactNode;
-  shareButton?: React.ReactNode;
-  forkButton?: React.ReactNode;
-};
-
-export const Header: React.FC<HeaderProps> = ({
-  open = false,
-  drawerWidth = 0,
-  currentPage = null,
-  breadcrumbItem = null,
-  shareButton = null,
-  forkButton = null,
-}) => {
-  const [anchorElNav, setAnchorElNav] = useState(null);
-  const [anchorElUser, setAnchorElUser] = useState(null);
-
-  const handleOpenNavMenu = (event) => {
-    setAnchorElNav(event.currentTarget);
-  };
-  const handleOpenUserMenu = (event) => {
-    setAnchorElUser(event.currentTarget);
-  };
-
-  const handleCloseNavMenu = () => {
-    setAnchorElNav(null);
-  };
-
-  const handleCloseUserMenu = () => {
-    setAnchorElUser(null);
-  };
-
+export const Header = ({ children }: { children?: any }) => {
   const { isSignedIn, signOut } = useAuth();
   let navigate = useNavigate();
   const { me } = useMe();
@@ -69,8 +35,9 @@ export const Header: React.FC<HeaderProps> = ({
       position="fixed"
       color="inherit"
       sx={{
-        width: `calc(100% - ${open ? drawerWidth : 0}px)`,
-        transition: "width 195ms cubic-bezier(0.4, 0, 0.6, 1) 0ms",
+        // The default zIndex is 1100, but the default zIndex of the drawer is
+        // 1200. Thus we make this 1300 to make sure it is on top of the drawer.
+        zIndex: 1300,
       }}
     >
       <Container maxWidth="xl">
@@ -81,42 +48,7 @@ export const Header: React.FC<HeaderProps> = ({
             maxHeight: "10px",
           }}
         >
-          <Breadcrumbs
-            aria-label="breadcrumb"
-            sx={{
-              alignItems: "baseline",
-              display: "flex",
-              flexGrow: 1,
-            }}
-          >
-            <Link component={ReactLink} underline="hover" to="/">
-              <Typography noWrap>CodePod</Typography>
-            </Link>
-            {currentPage && (
-              <Typography color="text.primary">{currentPage}</Typography>
-            )}
-            {breadcrumbItem}
-          </Breadcrumbs>
-
-          <Box
-            sx={{
-              display: { xs: "none", md: "flex" },
-              alignItems: "center",
-              paddingRight: "10px",
-            }}
-          >
-            {forkButton}
-          </Box>
-
-          <Box
-            sx={{
-              display: { xs: "none", md: "flex" },
-              alignItems: "center",
-              paddingRight: "10px",
-            }}
-          >
-            {shareButton}
-          </Box>
+          {children}
 
           {/* The navigation on desktop */}
           <Box
diff --git a/apps/ui/src/components/Sidebar.tsx b/apps/ui/src/components/Sidebar.tsx
index b911165e..ba8d2f04 100644
--- a/apps/ui/src/components/Sidebar.tsx
+++ b/apps/ui/src/components/Sidebar.tsx
@@ -939,19 +939,7 @@ function TableofPods() {
   );
 }
 
-type SidebarProps = {
-  width: number;
-  open: boolean;
-  onOpen: () => void;
-  onClose: () => void;
-};
-
-export const Sidebar: React.FC<SidebarProps> = ({
-  width,
-  open,
-  onOpen,
-  onClose,
-}) => {
+export const Sidebar = () => {
   // never render saving status / runtime module for a guest
   // FIXME: improve the implementation logic
   const store = useContext(RepoContext);
@@ -962,77 +950,32 @@ export const Sidebar: React.FC<SidebarProps> = ({
       <MyKBar />
       <Box
         sx={{
-          position: "absolute",
-          display: open ? "none" : "block",
-          top: `54px`,
-          left: 1,
+          padding: "8px 16px",
         }}
       >
-        <IconButton
-          onClick={onOpen}
-          sx={{
-            zIndex: 1,
-          }}
-        >
-          <ChevronRightIcon />
-        </IconButton>
+        <Stack>
+          {!isGuest && (
+            <Box>
+              {/* <SyncStatus /> */}
+              <YjsSyncStatus />
+              <Divider />
+              <YjsRuntimeStatus />
+            </Box>
+          )}
+          <Divider />
+          <Typography variant="h6">Export to ..</Typography>
+          <ExportButtons />
+
+          <Divider />
+          <Typography variant="h6">Site Settings</Typography>
+          <SidebarSettings />
+          <ToastError />
+
+          <Divider />
+          <Typography variant="h6">Table of Pods</Typography>
+          <TableofPods />
+        </Stack>
       </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",
-          }}
-        >
-          <Stack>
-            {!isGuest && (
-              <Box>
-                {/* <SyncStatus /> */}
-                <YjsSyncStatus />
-                <Divider />
-                <YjsRuntimeStatus />
-              </Box>
-            )}
-            <Divider />
-            <Typography variant="h6">Export to ..</Typography>
-            <ExportButtons />
-
-            <Divider />
-            <Typography variant="h6">Site Settings</Typography>
-            <SidebarSettings />
-            <ToastError />
-
-            <Divider />
-            <Typography variant="h6">Table of Pods</Typography>
-            <TableofPods />
-          </Stack>
-        </Box>
-      </Drawer>
     </>
   );
 };
diff --git a/apps/ui/src/index.css b/apps/ui/src/index.css
index a6dc18e0..a6ea4c2b 100644
--- a/apps/ui/src/index.css
+++ b/apps/ui/src/index.css
@@ -50,10 +50,12 @@ button {
 button:hover {
   border-color: #646cff;
 }
-button:focus,
+
+/* Do not show outline for button on click. */
+/* button:focus,
 button:focus-visible {
   outline: 4px auto -webkit-focus-ring-color;
-}
+} */
 
 @media (prefers-color-scheme: light) {
   :root {
diff --git a/apps/ui/src/pages/repo.tsx b/apps/ui/src/pages/repo.tsx
index ae8eb2c7..34c237d5 100644
--- a/apps/ui/src/pages/repo.tsx
+++ b/apps/ui/src/pages/repo.tsx
@@ -9,6 +9,9 @@ import ContentCopyIcon from "@mui/icons-material/ContentCopy";
 import Button from "@mui/material/Button";
 import { gql, useApolloClient, useMutation, useQuery } from "@apollo/client";
 
+import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
+import ChevronRightIcon from "@mui/icons-material/ChevronRight";
+
 import { useEffect, useState, useRef, useContext, memo } from "react";
 
 import * as React from "react";
@@ -22,13 +25,21 @@ import { Canvas } from "../components/Canvas";
 import { Header } from "../components/Header";
 import { Sidebar } from "../components/Sidebar";
 import { useLocalStorage } from "../hooks/useLocalStorage";
-import { Stack, TextField, Tooltip } from "@mui/material";
+import {
+  Breadcrumbs,
+  Drawer,
+  IconButton,
+  Stack,
+  TextField,
+  Tooltip,
+  Typography,
+} from "@mui/material";
 import { useAuth } from "../lib/auth";
 import { initParser } from "../lib/parser";
 
 import { usePrompt } from "../lib/prompt";
 
-const HeaderItem = memo<any>(({ id }) => {
+const HeaderItem = memo<any>(() => {
   const store = useContext(RepoContext)!;
   const repoName = useStore(store, (state) => state.repoName);
   const repoNameDirty = useStore(store, (state) => state.repoNameDirty);
@@ -136,10 +147,7 @@ const HeaderItem = memo<any>(({ id }) => {
   );
 });
 
-function RepoWrapper({ children, id }) {
-  // this component is used to provide a foldable layout
-  const [open, setOpen] = useLocalStorage("sidebar", true);
-
+function RepoHeader({ id }) {
   const store = useContext(RepoContext);
   if (!store) throw new Error("Missing BearContext.Provider in the tree");
 
@@ -153,70 +161,142 @@ function RepoWrapper({ children, id }) {
     `,
     { variables: { id } }
   );
-  // if(result.data.copyRepo){
-  //   navigate(`/repo/${result.data.copyRepo}`);
-  // }
+  return (
+    <Header>
+      <Breadcrumbs
+        aria-label="breadcrumb"
+        sx={{
+          alignItems: "baseline",
+          display: "flex",
+          flexGrow: 1,
+        }}
+      >
+        <Link component={ReactLink} underline="hover" to="/">
+          <Typography noWrap>CodePod</Typography>
+        </Link>
+        <HeaderItem />
+      </Breadcrumbs>
+      <Box
+        sx={{
+          display: { xs: "none", md: "flex" },
+          alignItems: "center",
+          paddingRight: "10px",
+        }}
+      >
+        <Button
+          endIcon={<ContentCopyIcon />}
+          onClick={async () => {
+            const result = await copyRepo();
+            const newRepoId = result.data.copyRepo;
+            window.open(`/repo/${newRepoId}`);
+          }}
+          variant="contained"
+        >
+          Make a copy
+        </Button>
+      </Box>
+      <Box
+        sx={{
+          display: { xs: "none", md: "flex" },
+          alignItems: "center",
+          paddingRight: "10px",
+        }}
+      >
+        <Button
+          endIcon={<ShareIcon />}
+          onClick={() => setShareOpen(true)}
+          variant="contained"
+        >
+          Share
+        </Button>
+      </Box>
+    </Header>
+  );
+}
 
-  const DrawerWidth = 240;
+/**
+ * Wrap the repo page with a header, a sidebar and a canvas.
+ */
+function RepoWrapper({ children, id }) {
+  const [open, setOpen] = useState(true);
+  let sidebar_width = "240px";
+  let header_height = "50px";
 
   return (
     <Box
       sx={{
-        width: "100%",
         height: "100%",
-        overflow: "hidden",
       }}
     >
-      <Sidebar
-        width={DrawerWidth}
+      {/* The header. */}
+      <RepoHeader id={id} />
+      {/* The sidebar */}
+      <Drawer
+        sx={{
+          width: sidebar_width,
+          flexShrink: 0,
+          "& .MuiDrawer-paper": {
+            width: sidebar_width,
+            boxSizing: "border-box",
+          },
+        }}
+        variant="persistent"
+        anchor="right"
         open={open}
-        onOpen={() => setOpen(true)}
-        onClose={() => setOpen(false)}
-      />
+      >
+        <Box
+          sx={{
+            pt: header_height,
+            verticalAlign: "top",
+            height: "100%",
+            overflow: "auto",
+          }}
+        >
+          <Box sx={{ mx: 2, my: 1 }}>
+            <Sidebar />
+          </Box>
+        </Box>
+      </Drawer>
 
+      {/* The button to toggle sidebar. */}
+      <Box
+        style={{
+          position: "absolute",
+          margin: "5px",
+          top: header_height,
+          right: open ? sidebar_width : 0,
+          transition: "all .2s",
+          zIndex: 100,
+        }}
+      >
+        <IconButton
+          onClick={() => {
+            setOpen(!open);
+          }}
+          size="small"
+          color="primary"
+        >
+          {open ? <ChevronRightIcon /> : <ChevronLeftIcon />}
+        </IconButton>
+      </Box>
+
+      {/* The Canvas */}
       <Box
         sx={{
-          display: "flex",
+          display: "inline-flex",
           flexGrow: 1,
           verticalAlign: "top",
           height: "100%",
-          transition: "margin 195ms cubic-bezier(0.4, 0, 0.6, 1) 0ms",
-          ml: open ? `${DrawerWidth}px` : 0,
+          width: open ? `calc(100% - ${sidebar_width})` : "100%",
+          overflow: "scroll",
         }}
       >
-        <Header
-          open={open}
-          drawerWidth={DrawerWidth}
-          breadcrumbItem={<HeaderItem id={id} />}
-          shareButton={
-            <Button
-              endIcon={<ShareIcon />}
-              onClick={() => setShareOpen(true)}
-              variant="contained"
-            >
-              Share
-            </Button>
-          }
-          forkButton={
-            <Button
-              endIcon={<ContentCopyIcon />}
-              onClick={async () => {
-                const result = await copyRepo();
-                const newRepoId = result.data.copyRepo;
-                window.open(`/repo/${newRepoId}`);
-              }}
-              variant="contained"
-            >
-              Make a copy
-            </Button>
-          }
-        />
         <Box
           sx={{
             boxSizing: "border-box",
             width: "100%",
             height: "100%",
-            pt: `52px`,
+            pt: header_height,
             mx: "auto",
           }}
         >