diff --git a/apps/docs/package.json b/apps/docs/package.json
index 569ebe07fb..abbdda5dde 100644
--- a/apps/docs/package.json
+++ b/apps/docs/package.json
@@ -17,6 +17,7 @@
     "@blocksuite/lit": "0.0.0-20230624163241-751f7170-nightly",
     "@blocksuite/store": "0.0.0-20230624163241-751f7170-nightly",
     "express": "^4.18.2",
+    "jotai": "^2.2.1",
     "react": "18.3.0-canary-16d053d59-20230506",
     "react-dom": "18.3.0-canary-16d053d59-20230506",
     "react-server-dom-webpack": "18.3.0-canary-16d053d59-20230506",
diff --git a/apps/docs/src/app.tsx b/apps/docs/src/app.tsx
index a68408b58f..5f54c19e50 100644
--- a/apps/docs/src/app.tsx
+++ b/apps/docs/src/app.tsx
@@ -1,24 +1,34 @@
+/// <reference types="vite/client" />
 'use server';
-import fs from 'node:fs/promises';
-import path from 'node:path';
-
 import type { ReactElement } from 'react';
 import { lazy } from 'react';
 
+import { Sidebar } from './components/sidebar.js';
+
 const Editor = lazy(() =>
   import('./components/editor.js').then(({ Editor }) => ({ default: Editor }))
 );
 
-const markdown = await fs.readFile(path.join('./src/pages/index.md'), {
-  encoding: 'utf-8',
-});
+const markdown = `---
+title: AFFiNE Developer Documentation
+---
+
+## To Shape, not to adapt
+
+---
+
+**Powered by BlockSuite**
+`;
 
 const App = (): ReactElement => {
   return (
-    <div>
-      <div className="mt-5">
+    <div className="flex flex-col-reverse sm:flex-row">
+      <nav className="w-full sm:w-64">
+        <Sidebar />
+      </nav>
+      <main className="flex-1 p-6 w-full sm:w-[calc(100%-16rem)]">
         <Editor text={markdown} />
-      </div>
+      </main>
     </div>
   );
 };
diff --git a/apps/docs/src/components/editor.tsx b/apps/docs/src/components/editor.tsx
index 60c026fcc4..ac9bd96cc5 100644
--- a/apps/docs/src/components/editor.tsx
+++ b/apps/docs/src/components/editor.tsx
@@ -42,10 +42,11 @@ export const Editor = (props: EditorProps): ReactElement => {
           page.addBlock('affine:surface', {}, pageBlockId);
           const noteBlockId = page.addBlock('affine:note', {}, pageBlockId);
           const contentParser = new ContentParser(page);
-          const content = text.split('---\n')[2];
+          const content = text.split('---\n').splice(2).join('---\n');
           assertExists(content);
-          console.log('metadata', title, content);
           await contentParser.importMarkdown(content, noteBlockId);
+          page.awarenessStore.setReadonly(page, true);
+          page.awarenessStore.setFlag('enable_drag_handle', false);
         },
         [props.text]
       )}
diff --git a/apps/docs/src/components/sidebar.tsx b/apps/docs/src/components/sidebar.tsx
new file mode 100644
index 0000000000..eb401db0b1
--- /dev/null
+++ b/apps/docs/src/components/sidebar.tsx
@@ -0,0 +1,16 @@
+export const Sidebar = () => {
+  return (
+    <div
+      className="h-screen text-black overflow-y-auto"
+      style={{
+        backgroundColor: '#f9f7f7',
+      }}
+    >
+      <a href="/">
+        <div className="flex items-center justify-center h-16 font-bold">
+          AFFiNE
+        </div>
+      </a>
+    </div>
+  );
+};
diff --git a/apps/docs/src/pages/index.md b/apps/docs/src/pages/index.md
deleted file mode 100644
index 74666683b8..0000000000
--- a/apps/docs/src/pages/index.md
+++ /dev/null
@@ -1,9 +0,0 @@
----
-title: AFFiNE Developer Documentation
----
-
-```shell
-corepack enable
-yarn install
-nx dev @affine/docs
-```
diff --git a/yarn.lock b/yarn.lock
index 0bf1b74c38..99bae58f61 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -169,6 +169,7 @@ __metadata:
     "@vanilla-extract/vite-plugin": ^3.8.2
     autoprefixer: ^10.4.14
     express: ^4.18.2
+    jotai: ^2.2.1
     react: 18.3.0-canary-16d053d59-20230506
     react-dom: 18.3.0-canary-16d053d59-20230506
     react-server-dom-webpack: 18.3.0-canary-16d053d59-20230506
@@ -22018,6 +22019,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jotai@npm:^2.2.1":
+  version: 2.2.1
+  resolution: "jotai@npm:2.2.1"
+  peerDependencies:
+    react: ">=17.0.0"
+  peerDependenciesMeta:
+    react:
+      optional: true
+  checksum: 1400d0320516966e23ff4d134e7ff525e32987f3a63e75246a49fed21790b9ff567c480e69a86b74d1bbfa354015de1581ab622664fdfe8a38d0fb8de00e424c
+  languageName: node
+  linkType: hard
+
 "js-base64@npm:^3.7.5":
   version: 3.7.5
   resolution: "js-base64@npm:3.7.5"