diff --git a/src/pages/index.jsx b/src/pages/index.jsx
index 88c25cc47..c457bda2e 100644
--- a/src/pages/index.jsx
+++ b/src/pages/index.jsx
@@ -177,6 +177,21 @@ function Home({ initialSettings }) {
   
   const servicesAndBookmarks = [...services.map(sg => sg.services).flat(), ...bookmarks.map(bg => bg.bookmarks).flat()]
 
+  // sort layout
+  const layouts = Object.keys(initialSettings.layout);
+  let sortedServices = [];
+  const copiedServices = services.slice();
+  layouts.forEach((currentServer) => {
+    if (initialSettings.layout[currentServer]?.sort) {
+      const idx = copiedServices.findIndex((service) => service.name === currentServer);
+      sortedServices.push(...copiedServices.splice(idx, 1));
+    }
+  });
+
+  if (copiedServices.length) {
+    sortedServices = sortedServices.concat(copiedServices);
+  }
+
   useEffect(() => {
     if (settings.language) {
       i18n.changeLanguage(settings.language);
@@ -263,9 +278,9 @@ function Home({ initialSettings }) {
           )}
         </div>
 
-        {services && (
+        {sortedServices && (
           <div className="flex flex-wrap p-4 sm:p-8 sm:pt-4 items-start pb-2">
-            {services.map((group) => (
+            {sortedServices.map((group) => (
               <ServicesGroup key={group.name} services={group} layout={initialSettings.layout?.[group.name]} />
             ))}
           </div>