diff --git a/src/pages/index.jsx b/src/pages/index.jsx
index c457bda2..33074b36 100644
--- a/src/pages/index.jsx
+++ b/src/pages/index.jsx
@@ -177,20 +177,6 @@ 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) {
@@ -278,9 +264,9 @@ function Home({ initialSettings }) {
           )}
         </div>
 
-        {sortedServices && (
+        {services && (
           <div className="flex flex-wrap p-4 sm:p-8 sm:pt-4 items-start pb-2">
-            {sortedServices.map((group) => (
+            {services.map((group) => (
               <ServicesGroup key={group.name} services={group} layout={initialSettings.layout?.[group.name]} />
             ))}
           </div>
diff --git a/src/utils/config/api-response.js b/src/utils/config/api-response.js
index 5cc1127e..c1651a78 100644
--- a/src/utils/config/api-response.js
+++ b/src/utils/config/api-response.js
@@ -4,7 +4,7 @@ import path from "path";
 
 import yaml from "js-yaml";
 
-import checkAndCopyConfig from "utils/config/config";
+import checkAndCopyConfig, { getSettings } from "utils/config/config";
 import { servicesFromConfig, servicesFromDocker, cleanServiceGroups } from "utils/config/service-helpers";
 import { cleanWidgetGroups, widgetsFromConfig } from "utils/config/widget-helpers";
 
@@ -46,6 +46,7 @@ export async function widgetsResponse() {
 export async function servicesResponse() {
   let discoveredServices;
   let configuredServices;
+  let initialSettings;
 
   try {
     discoveredServices = cleanServiceGroups(await servicesFromDocker());
@@ -63,6 +64,14 @@ export async function servicesResponse() {
     configuredServices = [];
   }
 
+  try {
+    initialSettings = await getSettings();
+  } catch (e) {
+    console.error("Failed to load settings.yaml, please check for errors");
+    if (e) console.error(e);
+    initialSettings = {};
+  }
+
   const mergedGroupsNames = [
     ...new Set([discoveredServices.map((group) => group.name), configuredServices.map((group) => group.name)].flat()),
   ];
@@ -81,5 +90,18 @@ export async function servicesResponse() {
     mergedGroups.push(mergedGroup);
   });
 
-  return mergedGroups;
+  let sortedServices = [];
+
+  const layouts = Object.keys(initialSettings.layout);
+  layouts.forEach((currentServer) => {
+    if (initialSettings.layout[currentServer]?.sort) {
+      const idx = mergedGroups.findIndex((service) => service.name === currentServer);
+      sortedServices.push(...mergedGroups.splice(idx, 1));
+    }
+  });
+  if (mergedGroups.length) {
+    sortedServices = sortedServices.concat(mergedGroups);
+  }
+
+  return sortedServices;
 }