diff --git a/apps/nextjs/src/components/board/sections/content.tsx b/apps/nextjs/src/components/board/sections/content.tsx
index c9fe9feab..fd8b4b552 100644
--- a/apps/nextjs/src/components/board/sections/content.tsx
+++ b/apps/nextjs/src/components/board/sections/content.tsx
@@ -10,6 +10,12 @@ import { useSectionContext } from "./section-context";
 export const SectionContent = () => {
   const { section, innerSections, refs } = useSectionContext();
   const board = useRequiredBoard();
+
+  /**
+   * IMPORTANT: THE ORDER OF THE BELOW ITEMS HAS TO MATCH THE ORDER OF
+   * THE ITEMS RENDERED WITH GRIDSTACK, OTHERWISE THE ITEMS WILL BE MIXED UP
+   * @see https://github.com/homarr-labs/homarr/pull/1770
+   */
   const sortedItems = useMemo(() => {
     return [
       ...section.items.map((item) => ({ ...item, type: "item" as const })),
@@ -19,7 +25,7 @@ export const SectionContent = () => {
         return itemA.xOffset - itemB.xOffset;
       }
 
-      return itemA.yOffset - itemB.xOffset;
+      return itemA.yOffset - itemB.yOffset;
     });
   }, [section.items, innerSections]);