diff --git a/docusaurus.config.js b/docusaurus.config.js
index a6e95d10..93ae90eb 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -4,6 +4,15 @@
 const lightCodeTheme = require('prism-react-renderer/themes/github');
 const darkCodeTheme = require('prism-react-renderer/themes/dracula');
 
+// order usage directory by type first
+function sortItemsByCategory(items) {
+  // type with "category" (directory) first
+  const sortedItems = items.sort(function(a, b) {
+    return a.type.localeCompare(b.type);
+  })
+  return sortedItems;
+}
+
 /** @type {import('@docusaurus/types').Config} */
 const config = {
   title: 'Gitea Documentation',
@@ -39,6 +48,16 @@ const config = {
               label: '1.19.3'
             }
           },
+          async sidebarItemsGenerator({defaultSidebarItemsGenerator, ...args}) {
+            const {item} = args;
+            // Use the provided data to generate a custom sidebar slice
+            const sidebarItems = await defaultSidebarItemsGenerator(args);
+            if (item.dirName !== 'usage') {
+              return sidebarItems;
+            } else {
+              return sortItemsByCategory(sidebarItems);
+            }
+          },
         },
         blog: false,
         theme: {
diff --git a/i18n/en/docusaurus-plugin-content-docs/current.json b/i18n/en/docusaurus-plugin-content-docs/current.json
new file mode 100644
index 00000000..2dc75966
--- /dev/null
+++ b/i18n/en/docusaurus-plugin-content-docs/current.json
@@ -0,0 +1,10 @@
+{
+  "sidebar.defaultSidebar.category.actions": {
+    "message": "Actions",
+    "description": "The label for category actions in sidebar defaultSidebar"
+  },
+  "sidebar.defaultSidebar.category.packages": {
+    "message": "Packages",
+    "description": "The label for category packages in sidebar defaultSidebar"
+  }
+}