diff --git a/src/components/ResourcesList/index.tsx b/src/components/ResourcesList/index.tsx
index 0a26cf3..4813f03 100644
--- a/src/components/ResourcesList/index.tsx
+++ b/src/components/ResourcesList/index.tsx
@@ -54,10 +54,11 @@ const Language = memo(({ item }: { item: IFolder; index: number }) => {
 export const ResourcesList: FC<HTMLAttributes<HTMLDivElement>> = props => {
   const resources = useStaticQuery<IAllResourcesQuery>(ALL_RESOURCES)
   const tree = useBuildTree(resources)
+  const sortedTree = tree.sort((a, b) => a.title.localeCompare(b.title));
 
   return (
     <SC.ResourcesListWrapper {...props}>
-      {tree.map((node, index) => plantTree(node, index))}
+      {sortedTree.map((node, index) => plantTree(node, index))}
     </SC.ResourcesListWrapper>
   )
 }
diff --git a/src/components/ResourcesSidebar/index.tsx b/src/components/ResourcesSidebar/index.tsx
index 106aa6b..e2b77a1 100644
--- a/src/components/ResourcesSidebar/index.tsx
+++ b/src/components/ResourcesSidebar/index.tsx
@@ -98,6 +98,7 @@ const MenuItem: FC<IMenuItemProps> = ({ children, to }) => {
 export const ResourcesSidebar: FC<HTMLAttributes<HTMLDivElement>> = props => {
   const resources = useStaticQuery<IAllResourcesQuery>(ALL_RESOURCES)
   const tree = useBuildTree(resources)
+  const sortedTree = tree.sort((a, b) => a.title.localeCompare(b.title));
 
   return (
     <SC.ResourcesSidebarWrapper {...props}>
@@ -106,7 +107,7 @@ export const ResourcesSidebar: FC<HTMLAttributes<HTMLDivElement>> = props => {
           <Banner />
         </Link>
         <SC.Inner>
-          {tree.map((node, index) => plantTree(node, index, true))}
+          {sortedTree.map((node, index) => plantTree(node, index, true))}
 
           <SC.Menu>
             <MenuItem to="/about">about</MenuItem>