diff --git a/.vscode/launch.json b/.vscode/launch.json
index 0e71c3ba..366b5438 100644
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@@ -16,4 +16,4 @@
       }
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/src/components/bookmarks/group.jsx b/src/components/bookmarks/group.jsx
index 97a484e9..4cd36b7b 100644
--- a/src/components/bookmarks/group.jsx
+++ b/src/components/bookmarks/group.jsx
@@ -5,44 +5,64 @@ import { MdKeyboardArrowDown } from "react-icons/md";
 
 import ErrorBoundary from "components/errorboundry";
 import List from "components/bookmarks/list";
+import ResolvedIcon from "components/resolvedicon";
 
-export default function BookmarksGroup({ group, disableCollapse }) {
+export default function BookmarksGroup({ bookmarks, layout, disableCollapse }) {
   const panel = useRef();
   return (
-    <div key={group.name} className="flex-1">
-    <Disclosure defaultOpen>
-    {({ open }) => (
-      <>
-        <Disclosure.Button disabled={disableCollapse} className="flex w-full select-none items-center group">
-          <h2 className="text-theme-800 dark:text-theme-300 text-xl font-medium">{group.name}</h2>
-          <MdKeyboardArrowDown className={classNames(
-            disableCollapse ? 'hidden' : '',
-            'transition-all opacity-0 group-hover:opacity-100 ml-auto text-theme-800 dark:text-theme-300 text-xl',
-            open ? '' : 'rotate-180'
-            )} />
-        </Disclosure.Button>
-        <Transition
-          // Otherwise the transition group does display: none and cancels animation
-          className="!block"
-          unmount={false}
-          beforeLeave={() => {
-            panel.current.style.height = `${panel.current.scrollHeight}px`;
-            setTimeout(() => {panel.current.style.height = `0`}, 1);
-          }}
-          beforeEnter={() => {
-            panel.current.style.height = `0px`;
-            setTimeout(() => {panel.current.style.height = `${panel.current.scrollHeight}px`}, 1);
-          }}
-          >
-            <Disclosure.Panel className="transition-all overflow-hidden duration-300 ease-out" ref={panel} static>
-              <ErrorBoundary>
-                <List bookmarks={group.bookmarks} />
-              </ErrorBoundary>
-            </Disclosure.Panel>
-        </Transition>
-      </>
-    )}
-    </Disclosure>
+    <div
+      key={bookmarks.name}
+      className={classNames(
+        layout?.style === "row" ? "basis-full" : "basis-full md:basis-1/4 lg:basis-1/5 xl:basis-1/6",
+        layout?.header === false ? "flex-1 px-1 -my-1" : "flex-1 p-1"
+      )}
+    >
+      <Disclosure defaultOpen>
+        {({ open }) => (
+          <>
+            {layout?.header !== false && (
+              <Disclosure.Button disabled={disableCollapse} className="flex w-full select-none items-center group">
+                {layout?.icon && (
+                  <div className="flex-shrink-0 mr-2 w-7 h-7">
+                    <ResolvedIcon icon={layout.icon} />
+                  </div>
+                )}
+                <h2 className="text-theme-800 dark:text-theme-300 text-xl font-medium">{bookmarks.name}</h2>
+                <MdKeyboardArrowDown
+                  className={classNames(
+                    disableCollapse ? "hidden" : "",
+                    "transition-all opacity-0 group-hover:opacity-100 ml-auto text-theme-800 dark:text-theme-300 text-xl",
+                    open ? "" : "rotate-180"
+                  )}
+                />
+              </Disclosure.Button>
+            )}
+            <Transition
+              // Otherwise the transition group does display: none and cancels animation
+              className="!block"
+              unmount={false}
+              beforeLeave={() => {
+                panel.current.style.height = `${panel.current.scrollHeight}px`;
+                setTimeout(() => {
+                  panel.current.style.height = `0`;
+                }, 1);
+              }}
+              beforeEnter={() => {
+                panel.current.style.height = `0px`;
+                setTimeout(() => {
+                  panel.current.style.height = `${panel.current.scrollHeight}px`;
+                }, 1);
+              }}
+            >
+              <Disclosure.Panel className="transition-all overflow-hidden duration-300 ease-out" ref={panel} static>
+                <ErrorBoundary>
+                  <List bookmarks={bookmarks.bookmarks} layout={layout} />
+                </ErrorBoundary>
+              </Disclosure.Panel>
+            </Transition>
+          </>
+        )}
+      </Disclosure>
     </div>
   );
 }
diff --git a/src/components/bookmarks/list.jsx b/src/components/bookmarks/list.jsx
index d37b83e7..3e1dd698 100644
--- a/src/components/bookmarks/list.jsx
+++ b/src/components/bookmarks/list.jsx
@@ -1,8 +1,27 @@
+import classNames from "classnames";
+
 import Item from "components/bookmarks/item";
 
-export default function List({ bookmarks }) {
+const columnMap = [
+  "grid-cols-1 md:grid-cols-1 lg:grid-cols-1",
+  "grid-cols-1 md:grid-cols-1 lg:grid-cols-1",
+  "grid-cols-1 md:grid-cols-2 lg:grid-cols-2",
+  "grid-cols-1 md:grid-cols-2 lg:grid-cols-3",
+  "grid-cols-1 md:grid-cols-2 lg:grid-cols-4",
+  "grid-cols-1 md:grid-cols-2 lg:grid-cols-5",
+  "grid-cols-1 md:grid-cols-2 lg:grid-cols-6",
+  "grid-cols-1 md:grid-cols-2 lg:grid-cols-7",
+  "grid-cols-1 md:grid-cols-2 lg:grid-cols-8",
+];
+
+export default function List({ bookmarks, layout }) {
   return (
-    <ul className="mt-3 flex flex-col">
+    <ul
+      className={classNames(
+        layout?.style === "row" ? `grid ${columnMap[layout?.columns]} gap-x-2` : "flex flex-col",
+        "mt-3"
+      )}
+    >
       {bookmarks.map((bookmark) => (
         <Item key={`${bookmark.name}-${bookmark.href}`} bookmark={bookmark} />
       ))}
diff --git a/src/pages/index.jsx b/src/pages/index.jsx
index 1d2452db..ef869802 100644
--- a/src/pages/index.jsx
+++ b/src/pages/index.jsx
@@ -4,7 +4,7 @@ import Head from "next/head";
 import dynamic from "next/dynamic";
 import classNames from "classnames";
 import { useTranslation } from "next-i18next";
-import { useEffect, useContext, useState } from "react";
+import { useEffect, useContext, useState, useMemo } from "react";
 import { BiError } from "react-icons/bi";
 import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 
@@ -209,7 +209,7 @@ function Home({ initialSettings }) {
       searchProvider = searchProviders[searchWidget.options?.provider];
     }
   }
-  const headerStyle = initialSettings?.headerStyle || "underlined";
+  const headerStyle = settings?.headerStyle || "underlined";
 
   useEffect(() => {
     function handleKeyDown(e) {
@@ -230,15 +230,55 @@ function Home({ initialSettings }) {
     }
   })
 
+  const servicesAndBookmarksGroups = useMemo(() => {
+    const mergedGroups = [
+      services?.length > 0 ? (
+        <div key="services" className="flex flex-wrap p-4 sm:p-8 sm:pt-4 items-start pb-2">
+          {services.map((group) => (
+            <ServicesGroup
+              key={group.name}
+              group={group.name}
+              services={group}
+              layout={settings.layout?.[group.name]}
+              fiveColumns={settings.fiveColumns}
+              disableCollapse={settings.disableCollapse}
+            />
+          ))}
+        </div>
+      ) : null,
+      bookmarks?.length > 0 ? (
+        <div key="bookmarks" className="flex flex-wrap p-4 sm:p-8 sm:pt-4 items-start pb-2">
+          {bookmarks.map((group) => (
+            <BookmarksGroup
+              key={group.name}
+              bookmarks={group}
+              layout={settings.layout?.[group.name]}
+              disableCollapse={settings.disableCollapse}
+            />
+          ))}
+        </div>
+      ) : null
+    ];
+
+    return settings.bookmarksOnTop ? mergedGroups.reverse() : mergedGroups;
+  }, [
+    services,
+    bookmarks,
+    settings.layout,
+    settings.fiveColumns,
+    settings.disableCollapse,
+    settings.bookmarksOnTop
+  ]);
+
   return (
     <>
       <Head>
-        <title>{initialSettings.title || "Homepage"}</title>
-        {initialSettings.base && <base href={initialSettings.base} />}
-        {initialSettings.favicon ? (
+        <title>{settings.title || "Homepage"}</title>
+        {settings.base && <base href={settings.base} />}
+        {settings.favicon ? (
           <>
-            <link rel="apple-touch-icon" sizes="180x180" href={initialSettings.favicon} />
-            <link rel="icon" href={initialSettings.favicon} />
+            <link rel="apple-touch-icon" sizes="180x180" href={settings.favicon} />
+            <link rel="icon" href={settings.favicon} />
           </>
         ) : (
           <>
@@ -248,11 +288,8 @@ function Home({ initialSettings }) {
             <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png?v=4" />
           </>
         )}
-        <meta
-          name="msapplication-TileColor"
-          content={themes[initialSettings.color || "slate"][initialSettings.theme || "dark"]}
-        />
-        <meta name="theme-color" content={themes[initialSettings.color || "slate"][initialSettings.theme || "dark"]} />
+        <meta name="msapplication-TileColor" content={themes[settings.color || "slate"][settings.theme || "dark"]} />
+        <meta name="theme-color" content={themes[settings.color || "slate"][settings.theme || "dark"]} />
       </Head>
       <div className="relative container m-auto flex flex-col justify-start z-10 h-full">
         <QuickLaunch
@@ -267,7 +304,7 @@ function Home({ initialSettings }) {
           className={classNames(
             "flex flex-row flex-wrap justify-between",
             headerStyles[headerStyle],
-            initialSettings.cardBlur !== undefined && headerStyle === "boxed" && `backdrop-blur${initialSettings.cardBlur.length ? '-' : ""}${initialSettings.cardBlur}`
+            settings.cardBlur !== undefined && headerStyle === "boxed" && `backdrop-blur${settings.cardBlur.length ? '-' : ""}${settings.cardBlur}`
           )}
         >
           {widgets && (
@@ -275,7 +312,7 @@ function Home({ initialSettings }) {
               {widgets
                 .filter((widget) => !rightAlignedWidgets.includes(widget.type))
                 .map((widget, i) => (
-                  <Widget key={i} widget={widget} style={{ header: headerStyle, isRightAligned: false, cardBlur: initialSettings.cardBlur }} />
+                  <Widget key={i} widget={widget} style={{ header: headerStyle, isRightAligned: false, cardBlur: settings.cardBlur }} />
                 ))}
 
               <div className={classNames(
@@ -285,47 +322,24 @@ function Home({ initialSettings }) {
                 {widgets
                   .filter((widget) => rightAlignedWidgets.includes(widget.type))
                   .map((widget, i) => (
-                    <Widget key={i} widget={widget} style={{ header: headerStyle, isRightAligned: true, cardBlur: initialSettings.cardBlur }} />
+                    <Widget key={i} widget={widget} style={{ header: headerStyle, isRightAligned: true, cardBlur: settings.cardBlur }} />
                   ))}
               </div>
             </>
           )}
         </div>
 
-        {services?.length > 0 && (
-          <div className="flex flex-wrap p-4 sm:p-8 sm:pt-4 items-start pb-2">
-            {services.map((group) => (
-              <ServicesGroup 
-                key={group.name}
-                group={group.name}
-                services={group}
-                layout={initialSettings.layout?.[group.name]}
-                fiveColumns={settings.fiveColumns} 
-                disableCollapse={settings.disableCollapse} />
-            ))}
-          </div>
-        )}
-
-        {bookmarks?.length > 0 && (
-          <div className={`grow flex flex-wrap pt-0 p-4 sm:p-8 gap-2 grid-cols-1 lg:grid-cols-2 lg:grid-cols-${Math.min(6, bookmarks.length)}`}>
-            {bookmarks.map((group) => (
-              <BookmarksGroup
-                key={group.name}
-                group={group}
-                disableCollapse={settings.disableCollapse} />
-            ))}
-          </div>
-        )}
+        {servicesAndBookmarksGroups}
 
         <div className="flex flex-col mt-auto p-8 w-full">
           <div className="flex w-full justify-end">
-            {!initialSettings?.color && <ColorToggle />}
+            {!settings?.color && <ColorToggle />}
             <Revalidate />
-            {!initialSettings?.theme && <ThemeToggle />}
+            {!settings.theme && <ThemeToggle />}
           </div>
 
           <div className="flex mt-4 w-full justify-end">
-            {!initialSettings?.hideVersion && <Version />}
+            {!settings.hideVersion && <Version />}
           </div>
         </div>
       </div>
diff --git a/src/utils/config/api-response.js b/src/utils/config/api-response.js
index e00846db..d3c8bb9e 100644
--- a/src/utils/config/api-response.js
+++ b/src/utils/config/api-response.js
@@ -34,6 +34,16 @@ export async function bookmarksResponse() {
 
   if (!bookmarks) return [];
 
+  let initialSettings;
+
+  try {
+    initialSettings = await getSettings();
+  } catch (e) {
+    console.error("Failed to load settings.yaml, please check for errors");
+    if (e) console.error(e.toString());
+    initialSettings = {};
+  }
+
   // map easy to write YAML objects into easy to consume JS arrays
   const bookmarksArray = bookmarks.map((group) => ({
     name: Object.keys(group)[0],
@@ -43,7 +53,21 @@ export async function bookmarksResponse() {
     })),
   }));
 
-  return bookmarksArray;
+  const sortedGroups = [];
+  const unsortedGroups = [];
+  const definedLayouts = initialSettings.layout ? Object.keys(initialSettings.layout) : null;
+
+  bookmarksArray.forEach((group) => {
+    if (definedLayouts) {
+      const layoutIndex = definedLayouts.findIndex(layout => layout === group.name);
+      if (layoutIndex > -1) sortedGroups[layoutIndex] = group;
+      else unsortedGroups.push(group);
+    } else {
+      unsortedGroups.push(group);
+    }
+  });
+
+  return [...sortedGroups.filter(g => g), ...unsortedGroups];
 }
 
 export async function widgetsResponse() {