diff --git a/src/components/services/group.jsx b/src/components/services/group.jsx
index 938ead83e..5f1c54464 100644
--- a/src/components/services/group.jsx
+++ b/src/components/services/group.jsx
@@ -3,13 +3,13 @@ import classNames from "classnames";
 import List from "components/services/list";
 import ResolvedIcon from "components/resolvedicon";
 
-export default function ServicesGroup({ services, layout }) {
+export default function ServicesGroup({ services, layout, fiveColumns }) {
   return (
     <div
       key={services.name}
       className={classNames(
         layout?.style === "row" ? "basis-full" : "basis-full md:basis-1/2 lg:basis-1/3 xl:basis-1/4",
-        layout?.style !== "row" && layout?.columns === 5 ? "3xl:basis-1/5" : "",
+        layout?.style !== "row" && fiveColumns ? "3xl:basis-1/5" : "",
         "flex-1 p-1"
       )}
     >
diff --git a/src/pages/index.jsx b/src/pages/index.jsx
index 00852436e..fc294c6c5 100644
--- a/src/pages/index.jsx
+++ b/src/pages/index.jsx
@@ -289,7 +289,7 @@ function Home({ initialSettings }) {
         {services && (
           <div className="flex flex-wrap p-4 sm:p-8 sm:pt-4 items-start pb-2">
             {services.map((group) => (
-              <ServicesGroup key={group.name} services={group} layout={initialSettings.layout?.[group.name]} />
+              <ServicesGroup key={group.name} services={group} layout={initialSettings.layout?.[group.name]} fiveColumns={settings.fiveColumns} />
             ))}
           </div>
         )}