diff --git a/.vscode/settings.json b/.vscode/settings.json
index 1c9710d23..e2daaa72c 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -26,6 +26,7 @@
     "codecov",
     "Logto",
     "oidc",
+    "passcode",
     "Passwordless",
     "pnpm",
     "silverhand",
diff --git a/packages/docs/docs/tutorial/README.md b/packages/docs/docs/docs/README.md
similarity index 87%
rename from packages/docs/docs/tutorial/README.md
rename to packages/docs/docs/docs/README.md
index bbab6a3f3..af4237aeb 100644
--- a/packages/docs/docs/tutorial/README.md
+++ b/packages/docs/docs/docs/README.md
@@ -41,7 +41,7 @@ In your terminal:
 node -e "$(printf "%s" "$(curl -fsSL https://raw.githubusercontent.com/logto-io/logto/master/install.js)")"
 ```
 
-The script will download Logto and create a directory `logto` in the location you ran it. After answering [several simple questions](./tutorial/configuration#questions), you will see the message like:
+The script will download Logto and create a directory `logto` in the location you ran it. After answering [several simple questions](./docs/references/core/configuration#questions), you will see the message like:
 
 ```bash
 App is running at http://localhost:3001
@@ -55,4 +55,4 @@ TBD
 
 ## Configuration
 
-Logto uses environment variables for configuration, along with `.env` file support. See [Configuration](./tutorial/configuration) for detailed usage and full variable list.
+Logto uses environment variables for configuration, along with `.env` file support. See [Configuration](./docs/references/core/configuration) for detailed usage and full variable list.
diff --git a/packages/docs/docs/tutorial/integrate-logto/README.md b/packages/docs/docs/docs/recipes/integrate-logto/README.md
similarity index 100%
rename from packages/docs/docs/tutorial/integrate-logto/README.md
rename to packages/docs/docs/docs/recipes/integrate-logto/README.md
diff --git a/packages/docs/docs/tutorial/integrate-logto/android.mdx b/packages/docs/docs/docs/recipes/integrate-logto/android.mdx
similarity index 100%
rename from packages/docs/docs/tutorial/integrate-logto/android.mdx
rename to packages/docs/docs/docs/recipes/integrate-logto/android.mdx
diff --git a/packages/docs/docs/tutorial/integrate-logto/components/AppNote.tsx b/packages/docs/docs/docs/recipes/integrate-logto/components/AppNote.tsx
similarity index 100%
rename from packages/docs/docs/tutorial/integrate-logto/components/AppNote.tsx
rename to packages/docs/docs/docs/recipes/integrate-logto/components/AppNote.tsx
diff --git a/packages/docs/docs/tutorial/integrate-logto/components/SignInNote.tsx b/packages/docs/docs/docs/recipes/integrate-logto/components/SignInNote.tsx
similarity index 100%
rename from packages/docs/docs/tutorial/integrate-logto/components/SignInNote.tsx
rename to packages/docs/docs/docs/recipes/integrate-logto/components/SignInNote.tsx
diff --git a/packages/docs/docs/tutorial/integrate-logto/ios.mdx b/packages/docs/docs/docs/recipes/integrate-logto/ios.mdx
similarity index 100%
rename from packages/docs/docs/tutorial/integrate-logto/ios.mdx
rename to packages/docs/docs/docs/recipes/integrate-logto/ios.mdx
diff --git a/packages/docs/docs/tutorial/integrate-logto/react.mdx b/packages/docs/docs/docs/recipes/integrate-logto/react.mdx
similarity index 100%
rename from packages/docs/docs/tutorial/integrate-logto/react.mdx
rename to packages/docs/docs/docs/recipes/integrate-logto/react.mdx
diff --git a/packages/docs/docs/tutorial/integrate-logto/vue.mdx b/packages/docs/docs/docs/recipes/integrate-logto/vue.mdx
similarity index 100%
rename from packages/docs/docs/tutorial/integrate-logto/vue.mdx
rename to packages/docs/docs/docs/recipes/integrate-logto/vue.mdx
diff --git a/packages/docs/docs/docs/references/core/README.md b/packages/docs/docs/docs/references/core/README.md
new file mode 100644
index 000000000..3b616f93d
--- /dev/null
+++ b/packages/docs/docs/docs/references/core/README.md
@@ -0,0 +1 @@
+# Core
diff --git a/packages/docs/docs/tutorial/configuration.md b/packages/docs/docs/docs/references/core/configuration.md
similarity index 100%
rename from packages/docs/docs/tutorial/configuration.md
rename to packages/docs/docs/docs/references/core/configuration.md
diff --git a/packages/docs/docs/tutorial/get-started/README.md b/packages/docs/docs/docs/tutorials/get-started/README.md
similarity index 98%
rename from packages/docs/docs/tutorial/get-started/README.md
rename to packages/docs/docs/docs/tutorials/get-started/README.md
index 30e1499e9..554a5456c 100644
--- a/packages/docs/docs/tutorial/get-started/README.md
+++ b/packages/docs/docs/docs/tutorials/get-started/README.md
@@ -1,7 +1,3 @@
----
-sidebar_position: 2
----
-
 # Get Started
 
 Before we start, it'll be good to know how Logto works. To simplify, we divide Logto into four parts: Admin Console, Sign-in Experience, Core Service, and SDKs.
diff --git a/packages/docs/docs/docs/tutorials/get-started/_category_.json b/packages/docs/docs/docs/tutorials/get-started/_category_.json
new file mode 100644
index 000000000..ac08a5068
--- /dev/null
+++ b/packages/docs/docs/docs/tutorials/get-started/_category_.json
@@ -0,0 +1,4 @@
+{
+  "collapsible": false,
+  "collapsed": false
+}
diff --git a/packages/docs/docs/docs/tutorials/get-started/add-a-social-connector.md b/packages/docs/docs/docs/tutorials/get-started/add-a-social-connector.md
new file mode 100644
index 000000000..21b8243a3
--- /dev/null
+++ b/packages/docs/docs/docs/tutorials/get-started/add-a-social-connector.md
@@ -0,0 +1,5 @@
+---
+sidebar_position: 5
+---
+
+# Add a social connector
diff --git a/packages/docs/docs/tutorial/get-started/check-out-demo.md b/packages/docs/docs/docs/tutorials/get-started/check-out-demo.md
similarity index 100%
rename from packages/docs/docs/tutorial/get-started/check-out-demo.md
rename to packages/docs/docs/docs/tutorials/get-started/check-out-demo.md
diff --git a/packages/docs/docs/tutorial/get-started/create-and-integrate-the-first-app.mdx b/packages/docs/docs/docs/tutorials/get-started/create-and-integrate-the-first-app.mdx
similarity index 100%
rename from packages/docs/docs/tutorial/get-started/create-and-integrate-the-first-app.mdx
rename to packages/docs/docs/docs/tutorials/get-started/create-and-integrate-the-first-app.mdx
diff --git a/packages/docs/docs/docs/tutorials/get-started/customize-sign-in-experience.md b/packages/docs/docs/docs/tutorials/get-started/customize-sign-in-experience.md
new file mode 100644
index 000000000..e0fb1c3d7
--- /dev/null
+++ b/packages/docs/docs/docs/tutorials/get-started/customize-sign-in-experience.md
@@ -0,0 +1,5 @@
+---
+sidebar_position: 3
+---
+
+# Customize sign-in experience
diff --git a/packages/docs/docs/docs/tutorials/get-started/enable-passcode-sign-in.md b/packages/docs/docs/docs/tutorials/get-started/enable-passcode-sign-in.md
new file mode 100644
index 000000000..6a5c7f918
--- /dev/null
+++ b/packages/docs/docs/docs/tutorials/get-started/enable-passcode-sign-in.md
@@ -0,0 +1,5 @@
+---
+sidebar_position: 4
+---
+
+# Enable SMS or email passcode sign-in
diff --git a/packages/docs/docs/docs/tutorials/get-started/further-readings.md b/packages/docs/docs/docs/tutorials/get-started/further-readings.md
new file mode 100644
index 000000000..775a7b6b3
--- /dev/null
+++ b/packages/docs/docs/docs/tutorials/get-started/further-readings.md
@@ -0,0 +1,5 @@
+---
+sidebar_position: 6
+---
+
+# Further readings
diff --git a/packages/docs/docusaurus.config.js b/packages/docs/docusaurus.config.js
index 884897b0b..1bef6f16a 100644
--- a/packages/docs/docusaurus.config.js
+++ b/packages/docs/docusaurus.config.js
@@ -46,7 +46,7 @@ const config = {
     /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
     ({
       navbar: {
-        title: 'Logto Docs',
+        title: 'Logto',
         logo: {
           alt: 'Logto Logo',
           src: 'img/logo.svg',
@@ -54,9 +54,9 @@ const config = {
         items: [
           {
             type: 'doc',
-            docId: 'tutorial/README',
+            docId: 'docs/README',
             position: 'left',
-            label: 'Tutorial',
+            label: 'Docs',
           },
           {
             type: 'doc',
@@ -88,7 +88,7 @@ const config = {
             title: 'Docs',
             items: [
               {
-                label: 'Tutorial',
+                label: 'Docs',
                 to: '/',
               },
             ],
diff --git a/packages/docs/i18n/zh-cn/docusaurus-plugin-content-docs/current.json b/packages/docs/i18n/zh-cn/docusaurus-plugin-content-docs/current.json
index e6c03a8ba..1cdb0a273 100644
--- a/packages/docs/i18n/zh-cn/docusaurus-plugin-content-docs/current.json
+++ b/packages/docs/i18n/zh-cn/docusaurus-plugin-content-docs/current.json
@@ -2,25 +2,25 @@
   "version.label": {
     "message": "下一个"
   },
-  "sidebar.tutorialSidebar.category.Integrate SDK": {
+  "sidebar.docsSidebar.category.Integrate SDK": {
     "message": "集成 SDK"
   },
-  "sidebar.sdkSidebar.category.Classes": {
+  "sidebar.docsSidebar.category.Classes": {
     "message": "类（Classes）"
   },
-  "sidebar.sdkSidebar.category.Enums": {
+  "sidebar.docsSidebar.category.Enums": {
     "message": "枚举（Enums）"
   },
-  "sidebar.sdkSidebar.category.Protocols": {
+  "sidebar.docsSidebar.category.Protocols": {
     "message": "接口（Protocols）"
   },
-  "sidebar.sdkSidebar.category.Typealiases": {
+  "sidebar.docsSidebar.category.Typealiases": {
     "message": "类型别名（Typealiases）"
   },
-  "sidebar.sdkSidebar.category.Extensions": {
+  "sidebar.docsSidebar.category.Extensions": {
     "message": "扩展（Extensions）"
   },
-  "sidebar.sdkSidebar.category.Structs": {
+  "sidebar.docsSidebar.category.Structs": {
     "message": "结构体（Structs）"
   }
 }
diff --git a/packages/docs/i18n/zh-cn/docusaurus-plugin-content-docs/current/tutorial/README.md b/packages/docs/i18n/zh-cn/docusaurus-plugin-content-docs/current/docs/README.md
similarity index 100%
rename from packages/docs/i18n/zh-cn/docusaurus-plugin-content-docs/current/tutorial/README.md
rename to packages/docs/i18n/zh-cn/docusaurus-plugin-content-docs/current/docs/README.md
diff --git a/packages/docs/i18n/zh-cn/docusaurus-plugin-content-docs/current/tutorial/integrate-sdk/android.mdx b/packages/docs/i18n/zh-cn/docusaurus-plugin-content-docs/current/docs/recipes/integrate-logto/android.mdx
similarity index 100%
rename from packages/docs/i18n/zh-cn/docusaurus-plugin-content-docs/current/tutorial/integrate-sdk/android.mdx
rename to packages/docs/i18n/zh-cn/docusaurus-plugin-content-docs/current/docs/recipes/integrate-logto/android.mdx
diff --git a/packages/docs/i18n/zh-cn/docusaurus-plugin-content-docs/current/tutorial/integrate-sdk/components/AppNote.tsx b/packages/docs/i18n/zh-cn/docusaurus-plugin-content-docs/current/docs/recipes/integrate-logto/components/AppNote.tsx
similarity index 100%
rename from packages/docs/i18n/zh-cn/docusaurus-plugin-content-docs/current/tutorial/integrate-sdk/components/AppNote.tsx
rename to packages/docs/i18n/zh-cn/docusaurus-plugin-content-docs/current/docs/recipes/integrate-logto/components/AppNote.tsx
diff --git a/packages/docs/i18n/zh-cn/docusaurus-plugin-content-docs/current/tutorial/integrate-sdk/components/SignInNote.tsx b/packages/docs/i18n/zh-cn/docusaurus-plugin-content-docs/current/docs/recipes/integrate-logto/components/SignInNote.tsx
similarity index 100%
rename from packages/docs/i18n/zh-cn/docusaurus-plugin-content-docs/current/tutorial/integrate-sdk/components/SignInNote.tsx
rename to packages/docs/i18n/zh-cn/docusaurus-plugin-content-docs/current/docs/recipes/integrate-logto/components/SignInNote.tsx
diff --git a/packages/docs/i18n/zh-cn/docusaurus-plugin-content-docs/current/tutorial/integrate-sdk/react.mdx b/packages/docs/i18n/zh-cn/docusaurus-plugin-content-docs/current/docs/recipes/integrate-logto/react.mdx
similarity index 100%
rename from packages/docs/i18n/zh-cn/docusaurus-plugin-content-docs/current/tutorial/integrate-sdk/react.mdx
rename to packages/docs/i18n/zh-cn/docusaurus-plugin-content-docs/current/docs/recipes/integrate-logto/react.mdx
diff --git a/packages/docs/i18n/zh-cn/docusaurus-plugin-content-docs/current/tutorial/integrate-sdk/vue.mdx b/packages/docs/i18n/zh-cn/docusaurus-plugin-content-docs/current/docs/recipes/integrate-logto/vue.mdx
similarity index 100%
rename from packages/docs/i18n/zh-cn/docusaurus-plugin-content-docs/current/tutorial/integrate-sdk/vue.mdx
rename to packages/docs/i18n/zh-cn/docusaurus-plugin-content-docs/current/docs/recipes/integrate-logto/vue.mdx
diff --git a/packages/docs/sidebars.js b/packages/docs/sidebars.js
index 901090f8c..42823cf99 100644
--- a/packages/docs/sidebars.js
+++ b/packages/docs/sidebars.js
@@ -14,8 +14,28 @@
 /** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */
 const sidebars = {
   // By default, Docusaurus generates a sidebar from the docs folder structure
-  tutorialSidebar: [{type: 'autogenerated', dirName: 'tutorial'}],
-  sdkSidebar: [{type: 'autogenerated', dirName: 'sdk'}],
+  docsSidebar: [
+    {
+      type: 'html',
+      value: 'Tutorials',
+      className: 'sidebar-section',
+    },
+    'docs/README',
+    { type: 'autogenerated', dirName: 'docs/tutorials' },
+    {
+      type: 'html',
+      value: 'Recipes',
+      className: 'sidebar-section',
+    },
+    { type: 'autogenerated', dirName: 'docs/recipes' },
+    {
+      type: 'html',
+      value: 'References',
+      className: 'sidebar-section',
+    },
+    { type: 'autogenerated', dirName: 'docs/references' },
+  ],
+  sdkSidebar: [{ type: 'autogenerated', dirName: 'sdk' }],
 
   // But you can create a sidebar manually
   /*
diff --git a/packages/docs/src/css/custom.css b/packages/docs/src/css/custom.css
index 292fcd445..fb353f6d7 100644
--- a/packages/docs/src/css/custom.css
+++ b/packages/docs/src/css/custom.css
@@ -15,6 +15,7 @@
   --ifm-color-primary-lightest: #3cad6e;
   --ifm-code-font-size: 95%;
   --doc-sidebar-width: 450px !important;
+  --doc-sidebar-section-title: #eee;
 }
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
@@ -26,6 +27,7 @@
   --ifm-color-primary-light: #29d5b0;
   --ifm-color-primary-lighter: #32d8b4;
   --ifm-color-primary-lightest: #4fddbf;
+  --doc-sidebar-section-title: #777;
 }
 
 .docusaurus-highlight-code-line {
@@ -38,3 +40,15 @@
 [data-theme='dark'] .docusaurus-highlight-code-line {
   background-color: rgba(0, 0, 0, 0.3);
 }
+
+.sidebar-section {
+  color: var(--doc-sidebar-section-title);
+  padding: var(--ifm-menu-link-padding-vertical) var(--ifm-menu-link-padding-horizontal);
+  text-transform: uppercase;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.sidebar-section:not(:first-child) {
+  margin-top: calc(var(--ifm-menu-link-padding-vertical) * 2);
+}