diff --git a/packages/console/src/assets/docs/guides/README.md b/packages/console/src/assets/docs/guides/README.md
index db8d8d662..0f0803d72 100644
--- a/packages/console/src/assets/docs/guides/README.md
+++ b/packages/console/src/assets/docs/guides/README.md
@@ -55,3 +55,20 @@ Images and other assets (if any) should be placed in the `assets` directory of t
 Since Parcel doesn't support dynamic import (see [#112](https://github.com/parcel-bundler/parcel/issues/112) [#125](https://github.com/parcel-bundler/parcel/issues/125)), we need to run `node generate-metadata.js` to update the metadata in `index.ts`, thus we can use it in the guide components with React lazy loading.
 
 This may be fixed by replacing Parcel with something else.
+
+### Order guides
+
+The guides are ordered by the following rules in ascending order:
+
+1. The first segment of the directory name, which should be the target of the guide;
+2. The `order` property of the guide.
+
+You can configure the property by creating a `config.json` file in the guide directory. The file should be an object with the following structure:
+
+```json
+{
+  "order": 1
+}
+```
+
+If no `config.json` file is found, the guide will be placed at the end of the list.
diff --git a/packages/console/src/assets/docs/guides/generate-metadata.js b/packages/console/src/assets/docs/guides/generate-metadata.js
index 5093ada71..533653b5c 100644
--- a/packages/console/src/assets/docs/guides/generate-metadata.js
+++ b/packages/console/src/assets/docs/guides/generate-metadata.js
@@ -8,8 +8,8 @@ import fs from 'node:fs/promises';
 const entries = await fs.readdir('.');
 const directories = entries.filter((entry) => !entry.includes('.'));
 
-const metadata = directories
-  .map((directory) => {
+const data = await Promise.all(
+  directories.map(async (directory) => {
     if (!existsSync(`${directory}/README.mdx`)) {
       console.warn(`No README.mdx file found in ${directory} directory, skipping.`);
       return;
@@ -23,12 +23,24 @@ const metadata = directories
     // Add `.png` later
     const logo = ['logo.svg'].find((logo) => existsSync(`${directory}/${logo}`));
 
+    const config = existsSync(`${directory}/config.json`)
+      ? await import(`./${directory}/config.json`, { assert: { type: 'json' } }).then((module) => module.default)
+      : undefined;
+
     return {
       name: directory,
       logo,
+      order: config?.order ?? Number.POSITIVE_INFINITY,
     };
   })
-  .filter(Boolean);
+);
+const metadata = data.filter(Boolean).slice().sort((a, b) => {
+  if (a.name.split('-')[0] !== b.name.split('-')[0]) {
+    return a.name.localeCompare(b.name);
+  }
+
+  return a.order - b.order;
+});
 
 const camelCase = (value) => value.replaceAll(/-./g, (x) => x[1].toUpperCase());
 const filename = 'index.ts';
@@ -46,12 +58,13 @@ for (const { name } of metadata) {
 await fs.appendFile(filename, '\n');
 await fs.appendFile(filename, 'const guides: Readonly<Guide[]> = Object.freeze([');
 
-for (const { name, logo } of metadata) {
+for (const { name, logo, order } of metadata) {
   // eslint-disable-next-line no-await-in-loop
   await fs.appendFile(
     filename,
     `
   {
+    order: ${order},
     id: '${name}',
     Logo: ${logo ? `lazy(async () => import('./${name}/${logo}'))` : 'undefined'},
     Component: lazy(async () => import('./${name}/README.mdx')),
diff --git a/packages/console/src/assets/docs/guides/index.ts b/packages/console/src/assets/docs/guides/index.ts
index 297891442..04f92e922 100644
--- a/packages/console/src/assets/docs/guides/index.ts
+++ b/packages/console/src/assets/docs/guides/index.ts
@@ -25,118 +25,137 @@ import webRemix from './web-remix/index';
 
 const guides: Readonly<Guide[]> = Object.freeze([
   {
-    id: 'web-next',
-    Logo: lazy(async () => import('./web-next/logo.svg')),
-    Component: lazy(async () => import('./web-next/README.mdx')),
-    metadata: webNext,
-  },
-  {
-    id: 'web-next-app-router',
-    Logo: lazy(async () => import('./web-next-app-router/logo.svg')),
-    Component: lazy(async () => import('./web-next-app-router/README.mdx')),
-    metadata: webNextAppRouter,
-  },
-  {
-    id: 'web-express',
-    Logo: lazy(async () => import('./web-express/logo.svg')),
-    Component: lazy(async () => import('./web-express/README.mdx')),
-    metadata: webExpress,
-  },
-  {
-    id: 'web-go',
-    Logo: lazy(async () => import('./web-go/logo.svg')),
-    Component: lazy(async () => import('./web-go/README.mdx')),
-    metadata: webGo,
-  },
-  {
-    id: 'web-php',
-    Logo: lazy(async () => import('./web-php/logo.svg')),
-    Component: lazy(async () => import('./web-php/README.mdx')),
-    metadata: webPhp,
-  },
-  {
-    id: 'web-python',
-    Logo: lazy(async () => import('./web-python/logo.svg')),
-    Component: lazy(async () => import('./web-python/README.mdx')),
-    metadata: webPython,
-  },
-  {
-    id: 'web-remix',
-    Logo: lazy(async () => import('./web-remix/logo.svg')),
-    Component: lazy(async () => import('./web-remix/README.mdx')),
-    metadata: webRemix,
-  },
-  {
-    id: 'web-asp-net-core',
-    Logo: lazy(async () => import('./web-asp-net-core/logo.svg')),
-    Component: lazy(async () => import('./web-asp-net-core/README.mdx')),
-    metadata: webAspNetCore,
-  },
-  {
-    id: 'web-outline',
-    Logo: lazy(async () => import('./web-outline/logo.svg')),
-    Component: lazy(async () => import('./web-outline/README.mdx')),
-    metadata: webOutline,
-  },
-  {
-    id: 'spa-react',
-    Logo: lazy(async () => import('./spa-react/logo.svg')),
-    Component: lazy(async () => import('./spa-react/README.mdx')),
-    metadata: spaReact,
-  },
-  {
+    order: Number.POSITIVE_INFINITY,
     id: 'm2m-general',
     Logo: lazy(async () => import('./m2m-general/logo.svg')),
     Component: lazy(async () => import('./m2m-general/README.mdx')),
     metadata: m2mGeneral,
   },
   {
-    id: 'web-gpt-plugin',
-    Logo: lazy(async () => import('./web-gpt-plugin/logo.svg')),
-    Component: lazy(async () => import('./web-gpt-plugin/README.mdx')),
-    metadata: webGptPlugin,
-  },
-  {
-    id: 'spa-vue',
-    Logo: lazy(async () => import('./spa-vue/logo.svg')),
-    Component: lazy(async () => import('./spa-vue/README.mdx')),
-    metadata: spaVue,
-  },
-  {
-    id: 'spa-vanilla',
-    Logo: lazy(async () => import('./spa-vanilla/logo.svg')),
-    Component: lazy(async () => import('./spa-vanilla/README.mdx')),
-    metadata: spaVanilla,
-  },
-  {
+    order: 1,
     id: 'native-ios-swift',
     Logo: lazy(async () => import('./native-ios-swift/logo.svg')),
     Component: lazy(async () => import('./native-ios-swift/README.mdx')),
     metadata: nativeIosSwift,
   },
   {
+    order: 2,
     id: 'native-android-java',
     Logo: lazy(async () => import('./native-android-java/logo.svg')),
     Component: lazy(async () => import('./native-android-java/README.mdx')),
     metadata: nativeAndroidJava,
   },
   {
+    order: 2.1,
     id: 'native-android-kt',
     Logo: lazy(async () => import('./native-android-kt/logo.svg')),
     Component: lazy(async () => import('./native-android-kt/README.mdx')),
     metadata: nativeAndroidKt,
   },
   {
+    order: 3,
+    id: 'native-flutter',
+    Logo: lazy(async () => import('./native-flutter/logo.svg')),
+    Component: lazy(async () => import('./native-flutter/README.mdx')),
+    metadata: nativeFlutter,
+  },
+  {
+    order: 4,
     id: 'native-capacitor',
     Logo: lazy(async () => import('./native-capacitor/logo.svg')),
     Component: lazy(async () => import('./native-capacitor/README.mdx')),
     metadata: nativeCapacitor,
   },
   {
-    id: 'native-flutter',
-    Logo: lazy(async () => import('./native-flutter/logo.svg')),
-    Component: lazy(async () => import('./native-flutter/README.mdx')),
-    metadata: nativeFlutter,
+    order: 1,
+    id: 'spa-react',
+    Logo: lazy(async () => import('./spa-react/logo.svg')),
+    Component: lazy(async () => import('./spa-react/README.mdx')),
+    metadata: spaReact,
+  },
+  {
+    order: 2,
+    id: 'spa-vue',
+    Logo: lazy(async () => import('./spa-vue/logo.svg')),
+    Component: lazy(async () => import('./spa-vue/README.mdx')),
+    metadata: spaVue,
+  },
+  {
+    order: 3,
+    id: 'spa-vanilla',
+    Logo: lazy(async () => import('./spa-vanilla/logo.svg')),
+    Component: lazy(async () => import('./spa-vanilla/README.mdx')),
+    metadata: spaVanilla,
+  },
+  {
+    order: 1,
+    id: 'web-next',
+    Logo: lazy(async () => import('./web-next/logo.svg')),
+    Component: lazy(async () => import('./web-next/README.mdx')),
+    metadata: webNext,
+  },
+  {
+    order: 1.1,
+    id: 'web-next-app-router',
+    Logo: lazy(async () => import('./web-next-app-router/logo.svg')),
+    Component: lazy(async () => import('./web-next-app-router/README.mdx')),
+    metadata: webNextAppRouter,
+  },
+  {
+    order: 2,
+    id: 'web-express',
+    Logo: lazy(async () => import('./web-express/logo.svg')),
+    Component: lazy(async () => import('./web-express/README.mdx')),
+    metadata: webExpress,
+  },
+  {
+    order: 3,
+    id: 'web-go',
+    Logo: lazy(async () => import('./web-go/logo.svg')),
+    Component: lazy(async () => import('./web-go/README.mdx')),
+    metadata: webGo,
+  },
+  {
+    order: 4,
+    id: 'web-python',
+    Logo: lazy(async () => import('./web-python/logo.svg')),
+    Component: lazy(async () => import('./web-python/README.mdx')),
+    metadata: webPython,
+  },
+  {
+    order: 5,
+    id: 'web-php',
+    Logo: lazy(async () => import('./web-php/logo.svg')),
+    Component: lazy(async () => import('./web-php/README.mdx')),
+    metadata: webPhp,
+  },
+  {
+    order: 6,
+    id: 'web-remix',
+    Logo: lazy(async () => import('./web-remix/logo.svg')),
+    Component: lazy(async () => import('./web-remix/README.mdx')),
+    metadata: webRemix,
+  },
+  {
+    order: 7,
+    id: 'web-asp-net-core',
+    Logo: lazy(async () => import('./web-asp-net-core/logo.svg')),
+    Component: lazy(async () => import('./web-asp-net-core/README.mdx')),
+    metadata: webAspNetCore,
+  },
+  {
+    order: 8,
+    id: 'web-outline',
+    Logo: lazy(async () => import('./web-outline/logo.svg')),
+    Component: lazy(async () => import('./web-outline/README.mdx')),
+    metadata: webOutline,
+  },
+  {
+    order: 9,
+    id: 'web-gpt-plugin',
+    Logo: lazy(async () => import('./web-gpt-plugin/logo.svg')),
+    Component: lazy(async () => import('./web-gpt-plugin/README.mdx')),
+    metadata: webGptPlugin,
   },
 ]);
 
diff --git a/packages/console/src/assets/docs/guides/native-android-java/config.json b/packages/console/src/assets/docs/guides/native-android-java/config.json
new file mode 100644
index 000000000..c435a12c1
--- /dev/null
+++ b/packages/console/src/assets/docs/guides/native-android-java/config.json
@@ -0,0 +1,3 @@
+{
+  "order": 2
+}
diff --git a/packages/console/src/assets/docs/guides/native-android-kt/config.json b/packages/console/src/assets/docs/guides/native-android-kt/config.json
new file mode 100644
index 000000000..f00075c68
--- /dev/null
+++ b/packages/console/src/assets/docs/guides/native-android-kt/config.json
@@ -0,0 +1,3 @@
+{
+  "order": 2.1
+}
diff --git a/packages/console/src/assets/docs/guides/native-capacitor/config.json b/packages/console/src/assets/docs/guides/native-capacitor/config.json
new file mode 100644
index 000000000..8ab102f71
--- /dev/null
+++ b/packages/console/src/assets/docs/guides/native-capacitor/config.json
@@ -0,0 +1,3 @@
+{
+  "order": 4
+}
diff --git a/packages/console/src/assets/docs/guides/native-flutter/config.json b/packages/console/src/assets/docs/guides/native-flutter/config.json
new file mode 100644
index 000000000..504132be0
--- /dev/null
+++ b/packages/console/src/assets/docs/guides/native-flutter/config.json
@@ -0,0 +1,3 @@
+{
+  "order": 3
+}
diff --git a/packages/console/src/assets/docs/guides/native-ios-swift/config.json b/packages/console/src/assets/docs/guides/native-ios-swift/config.json
new file mode 100644
index 000000000..66ec4e0b1
--- /dev/null
+++ b/packages/console/src/assets/docs/guides/native-ios-swift/config.json
@@ -0,0 +1,3 @@
+{
+  "order": 1
+}
diff --git a/packages/console/src/assets/docs/guides/spa-react/config.json b/packages/console/src/assets/docs/guides/spa-react/config.json
new file mode 100644
index 000000000..66ec4e0b1
--- /dev/null
+++ b/packages/console/src/assets/docs/guides/spa-react/config.json
@@ -0,0 +1,3 @@
+{
+  "order": 1
+}
diff --git a/packages/console/src/assets/docs/guides/spa-vanilla/config.json b/packages/console/src/assets/docs/guides/spa-vanilla/config.json
new file mode 100644
index 000000000..504132be0
--- /dev/null
+++ b/packages/console/src/assets/docs/guides/spa-vanilla/config.json
@@ -0,0 +1,3 @@
+{
+  "order": 3
+}
diff --git a/packages/console/src/assets/docs/guides/spa-vue/config.json b/packages/console/src/assets/docs/guides/spa-vue/config.json
new file mode 100644
index 000000000..c435a12c1
--- /dev/null
+++ b/packages/console/src/assets/docs/guides/spa-vue/config.json
@@ -0,0 +1,3 @@
+{
+  "order": 2
+}
diff --git a/packages/console/src/assets/docs/guides/web-asp-net-core/config.json b/packages/console/src/assets/docs/guides/web-asp-net-core/config.json
new file mode 100644
index 000000000..88177e1ec
--- /dev/null
+++ b/packages/console/src/assets/docs/guides/web-asp-net-core/config.json
@@ -0,0 +1,3 @@
+{
+  "order": 7
+}
diff --git a/packages/console/src/assets/docs/guides/web-express/config.json b/packages/console/src/assets/docs/guides/web-express/config.json
new file mode 100644
index 000000000..c435a12c1
--- /dev/null
+++ b/packages/console/src/assets/docs/guides/web-express/config.json
@@ -0,0 +1,3 @@
+{
+  "order": 2
+}
diff --git a/packages/console/src/assets/docs/guides/web-go/config.json b/packages/console/src/assets/docs/guides/web-go/config.json
new file mode 100644
index 000000000..504132be0
--- /dev/null
+++ b/packages/console/src/assets/docs/guides/web-go/config.json
@@ -0,0 +1,3 @@
+{
+  "order": 3
+}
diff --git a/packages/console/src/assets/docs/guides/web-gpt-plugin/config.json b/packages/console/src/assets/docs/guides/web-gpt-plugin/config.json
new file mode 100644
index 000000000..f24b1f1d7
--- /dev/null
+++ b/packages/console/src/assets/docs/guides/web-gpt-plugin/config.json
@@ -0,0 +1,3 @@
+{
+  "order": 9
+}
diff --git a/packages/console/src/assets/docs/guides/web-next-app-router/config.json b/packages/console/src/assets/docs/guides/web-next-app-router/config.json
new file mode 100644
index 000000000..4721ad2f7
--- /dev/null
+++ b/packages/console/src/assets/docs/guides/web-next-app-router/config.json
@@ -0,0 +1,3 @@
+{
+  "order": 1.1
+}
diff --git a/packages/console/src/assets/docs/guides/web-next/config.json b/packages/console/src/assets/docs/guides/web-next/config.json
new file mode 100644
index 000000000..66ec4e0b1
--- /dev/null
+++ b/packages/console/src/assets/docs/guides/web-next/config.json
@@ -0,0 +1,3 @@
+{
+  "order": 1
+}
diff --git a/packages/console/src/assets/docs/guides/web-outline/config.json b/packages/console/src/assets/docs/guides/web-outline/config.json
new file mode 100644
index 000000000..c76b77fa3
--- /dev/null
+++ b/packages/console/src/assets/docs/guides/web-outline/config.json
@@ -0,0 +1,3 @@
+{
+  "order": 8
+}
diff --git a/packages/console/src/assets/docs/guides/web-php/config.json b/packages/console/src/assets/docs/guides/web-php/config.json
new file mode 100644
index 000000000..7b21bc7d1
--- /dev/null
+++ b/packages/console/src/assets/docs/guides/web-php/config.json
@@ -0,0 +1,3 @@
+{
+  "order": 5
+}
diff --git a/packages/console/src/assets/docs/guides/web-python/config.json b/packages/console/src/assets/docs/guides/web-python/config.json
new file mode 100644
index 000000000..8ab102f71
--- /dev/null
+++ b/packages/console/src/assets/docs/guides/web-python/config.json
@@ -0,0 +1,3 @@
+{
+  "order": 4
+}
diff --git a/packages/console/src/assets/docs/guides/web-remix/config.json b/packages/console/src/assets/docs/guides/web-remix/config.json
new file mode 100644
index 000000000..61a30569e
--- /dev/null
+++ b/packages/console/src/assets/docs/guides/web-remix/config.json
@@ -0,0 +1,3 @@
+{
+  "order": 6
+}