chore(release): 1.10.0 [skip ci]

chore(release): automatic release v1.10.0
feat: remove cqmin system (#2407 )
2025-03-07 19:13:59 +00:00 · 2025-03-07 19:13:16 +00:00 · 2025-03-07 18:46:01 +01:00 · 2025-03-07 18:14:50 +01:00 · 2025-03-07 11:15:49 +00:00 · 2025-03-07 10:19:12 +00:00
277 changed files with 24203 additions and 7066 deletions
@@ -31,6 +31,9 @@ body:
      label: Version
      description: What version of Homarr are you running?
      options:
+        - 1.9.0
+        - 1.8.0
+        - 1.7.0
        - 1.6.0
        - 1.5.0
        - 1.4.0
@@ -6,9 +6,9 @@
      matchPackagePatterns: ["^@homarr/"],
      enabled: false,
    },
-    // Disable Dockerode updates see https://github.com/apocas/dockerode/issues/787
+    // 15.2.0 crashes with turbopack error (panic)
    {
-      matchPackagePatterns: ["^dockerode$"],
+      matchPackagePatterns: ["^next$", "^@next/eslint-plugin-next$"],
      enabled: false,
    },
    {
@@ -15,13 +15,14 @@ on:
        description: Send notifications

 permissions:
-  contents: write
-  packages: write
+  contents: write # Required to update package.json version
+  packages: write # Required for pushing to GHCR

 env:
  SKIP_ENV_VALIDATION: true
  REGISTRY: ghcr.io
  IMAGE_NAME: ${{ github.repository }}
+  GHCR_REPO: ghcr.io/${{ github.repository }}
  TURBO_TELEMETRY_DISABLED: 1

 concurrency:
@@ -102,59 +103,123 @@ jobs:
          git pull origin dev
          git rebase ${{ github.ref_name }}
          git push origin dev
-  deploy:
-    name: Deploy docker image
+  build-amd64:
+    name: Build docker image for amd64
    needs: release
    runs-on: ubuntu-latest
-    env:
-      NEXT_VERSION: ${{ needs.release.outputs.version }}
-      DEPLOY_LATEST: ${{ github.ref_name == 'main' }}
-      DEPLOY_BETA: ${{ github.ref_name == 'beta' }}
+    outputs:
+      digest: ${{ steps.build.outputs.digest }}
    steps:
      - uses: actions/checkout@v4
        with:
          ref: ${{ needs.release.outputs.git_ref }}
-      - name: Discord notification
-        if: ${{ github.events.inputs.send-notifications != false }}
-        env:
-          DISCORD_WEBHOOK: ${{ secrets.DISCORD_WEBHOOK }}
-        uses: Ilshidur/action-discord@master
+
+      - name: Docker meta
+        id: meta
+        uses: docker/metadata-action@v5
        with:
-          args: "Deployment of an image for version '${{env.NEXT_VERSION}}' has been triggered: [run ${{ github.run_number }}](<${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }}>)"
+          images: "${{ env.GHCR_REPO }}"
+
      - name: Log in to the Container registry
        uses: docker/login-action@v3
        with:
          registry: ${{ env.REGISTRY }}
          username: ${{ github.actor }}
          password: ${{ secrets.GITHUB_TOKEN }}
-      - name: Set up QEMU
-        uses: docker/setup-qemu-action@v3
+
      - name: Set up Docker Buildx
        uses: docker/setup-buildx-action@v3
+
+      - name: Build and push by digest
+        id: build
+        uses: docker/build-push-action@v6
+        with:
+          context: .
+          network: host
+          platforms: linux/amd64
+          labels: ${{ steps.meta.outputs.labels }}
+          outputs: type=image,"name=${{ env.GHCR_REPO }}",push-by-digest=true,name-canonical=true,push=true
+        env:
+          SKIP_ENV_VALIDATION: true
+
+  build-arm64:
+    name: Build docker image for arm64
+    needs: release
+    runs-on: ubuntu-24.04-arm
+    outputs:
+      digest: ${{ steps.build.outputs.digest }}
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          ref: ${{ needs.release.outputs.git_ref }}
+
      - name: Docker meta
        id: meta
        uses: docker/metadata-action@v5
        with:
-          images: "${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}"
-          tags: |
-            ${{ env.DEPLOY_LATEST == 'true' && 'type=raw,value=latest' || null }}
-            ${{ env.DEPLOY_BETA == 'true' && 'type=raw,value=beta' || null }}
-            type=raw,value=${{ env.NEXT_VERSION }}
-      - name: Build and push
-        id: buildPushAction
+          images: "${{ env.GHCR_REPO }}"
+
+      - name: Log in to the Container registry
+        uses: docker/login-action@v3
+        with:
+          registry: ${{ env.REGISTRY }}
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Build and push by digest
+        id: build
        uses: docker/build-push-action@v6
        with:
-          platforms: linux/amd64,linux/arm64
          context: .
-          push: true
-          tags: ${{ steps.meta.outputs.tags }}
-          labels: ${{ steps.meta.outputs.labels }}
          network: host
+          platforms: linux/arm64
+          labels: ${{ steps.meta.outputs.labels }}
+          outputs: type=image,"name=${{ env.GHCR_REPO }}",push-by-digest=true,name-canonical=true,push=true
        env:
          SKIP_ENV_VALIDATION: true
+
+  publish:
+    name: Complete deployment and notify
+    needs: [release, build-amd64, build-arm64]
+    runs-on: ubuntu-latest
+    env:
+      NEXT_VERSION: ${{ needs.release.outputs.version }}
+      DEPLOY_LATEST: ${{ github.ref_name == 'main' }}
+      DEPLOY_BETA: ${{ github.ref_name == 'beta' }}
+    steps:
+      - name: Log in to the Container registry
+        uses: docker/login-action@v3
+        with:
+          registry: ${{ env.REGISTRY }}
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Publish beta
+        if: env.DEPLOY_BETA == 'true'
+        run: |
+          docker buildx imagetools create -t ${{ env.GHCR_REPO }}:beta \
+            ${{ env.GHCR_REPO }}@${{ needs.build-amd64.outputs.digest }} \
+            ${{ env.GHCR_REPO }}@${{ needs.build-arm64.outputs.digest }}
+
+      - name: Publish latest
+        if: env.DEPLOY_LATEST == 'true'
+        run: |
+          docker buildx imagetools create -t ${{ env.GHCR_REPO }}:latest \
+            ${{ env.GHCR_REPO }}@${{ needs.build-amd64.outputs.digest }} \
+            ${{ env.GHCR_REPO }}@${{ needs.build-arm64.outputs.digest }}
+
+      - name: Publish version
+        run: |
+          docker buildx imagetools create -t ${{ env.GHCR_REPO }}:${{ env.NEXT_VERSION }} \
+            ${{ env.GHCR_REPO }}@${{ needs.build-amd64.outputs.digest }} \
+            ${{ env.GHCR_REPO }}@${{ needs.build-arm64.outputs.digest }}
+
      - name: Discord notification
        env:
          DISCORD_WEBHOOK: ${{ secrets.DISCORD_WEBHOOK }}
        uses: Ilshidur/action-discord@master
        with:
-          args: "Deployment of image has completed for branch ${{ github.ref_name }}. Image ID is '${{ steps.buildPushAction.outputs.imageid }}'."
+          args: "Successfully deployed images for branch **${{ github.ref_name }}**. Tagged as **${{env.NEXT_VERSION}}**."
@@ -0,0 +1,13 @@
+<component name="ProjectRunConfigurationManager">
+  <configuration default="false" name="typecheck" type="js.build_tools.npm">
+    <package-json value="$PROJECT_DIR$/package.json" />
+    <command value="run" />
+    <scripts>
+      <script value="typecheck" />
+    </scripts>
+    <node-interpreter value="project" />
+    <package-manager value="pnpm" />
+    <envs />
+    <method v="2" />
+  </configuration>
+</component>
@@ -1,3 +1,76 @@
+## [1.10.0](https://github.com/homarr-labs/homarr/compare/v1.9.0...v1.10.0) (2025-03-07)
+
+### Features
+
+* remove cqmin system ([#2407](https://github.com/homarr-labs/homarr/issues/2407)) ([37d4714](https://github.com/homarr-labs/homarr/commit/37d471457a0a2b10112b67c02923f63de479e617))
+
+### Bug Fixes
+
+* **deps:** update dependency eslint-config-prettier to ^10.1.1 ([#2524](https://github.com/homarr-labs/homarr/issues/2524)) ([4721a97](https://github.com/homarr-labs/homarr/commit/4721a97094ae1181216923c7fef7a29c343f882b))
+* **deps:** update dependency ioredis to v5.6.0 ([#2509](https://github.com/homarr-labs/homarr/issues/2509)) ([e4a3922](https://github.com/homarr-labs/homarr/commit/e4a39223a33d4bfccb1e9b4e2c30de1376879a1d))
+* **deps:** update dependency mysql2 to v3.13.0 ([#2516](https://github.com/homarr-labs/homarr/issues/2516)) ([67c739c](https://github.com/homarr-labs/homarr/commit/67c739c35bcb2d537a349f0ebff080eac67e93b5))
+* **deps:** update tanstack-query monorepo to ^5.67.2 ([#2525](https://github.com/homarr-labs/homarr/issues/2525)) ([a572aae](https://github.com/homarr-labs/homarr/commit/a572aae887142a7e601f70dcc601bf6335e37c17))
+* **pi-hole:** wrong fetch used in factory ([#2527](https://github.com/homarr-labs/homarr/issues/2527)) ([9881577](https://github.com/homarr-labs/homarr/commit/9881577f47fbeacf861dd564d57fc6d7c469d27b))
+
+## [1.9.0](https://github.com/homarr-labs/homarr/compare/v1.8.0...v1.9.0) (2025-03-05)
+
+### Features
+
+* add sigterm support ([#2472](https://github.com/homarr-labs/homarr/issues/2472)) ([a5e0e8c](https://github.com/homarr-labs/homarr/commit/a5e0e8c1296ebfbe46c88fbb152b5d0049db349d))
+* added bordercolor option for dynamic section ([#2334](https://github.com/homarr-labs/homarr/issues/2334)) ([7dfb108](https://github.com/homarr-labs/homarr/commit/7dfb108a56e38c32e712b82d1e1bd65a5c15722b))
+* **integration:** add emby integration ([#2466](https://github.com/homarr-labs/homarr/issues/2466)) ([7dfc364](https://github.com/homarr-labs/homarr/commit/7dfc3646b709e6bb1fc7ec11336024c7eff1f342))
+* **media-request:** show request status ([#2465](https://github.com/homarr-labs/homarr/issues/2465)) ([80c2040](https://github.com/homarr-labs/homarr/commit/80c2040b1345b0a60030aa8879442b937863216f))
+* **pihole:** add support for v6 ([#2448](https://github.com/homarr-labs/homarr/issues/2448)) ([3804d53](https://github.com/homarr-labs/homarr/commit/3804d530ec28c90b6ab1fa0f709468e2075afa28))
+* use fetch with trusted certificates for oidc ([#2412](https://github.com/homarr-labs/homarr/issues/2412)) ([6fad48f](https://github.com/homarr-labs/homarr/commit/6fad48f65ad7cbb927fd80de49930a8256110331))
+
+### Bug Fixes
+
+* affix hides pagination on mobile ([#2491](https://github.com/homarr-labs/homarr/issues/2491)) ([604a05f](https://github.com/homarr-labs/homarr/commit/604a05f9d528b7d89b09f4f7982921963ba0fb90))
+* **boards:** case-sensitive board names in url ([#2454](https://github.com/homarr-labs/homarr/issues/2454)) ([c0e3544](https://github.com/homarr-labs/homarr/commit/c0e354428af2c69bf7638911320888f049ec0659))
+* **deps:** update dependency @tabler/icons-react to ^3.31.0 ([#2502](https://github.com/homarr-labs/homarr/issues/2502)) ([478aae6](https://github.com/homarr-labs/homarr/commit/478aae6cd496ef81e3036d8f2a5b6959b7fea12e))
+* **deps:** update dependency prettier to ^3.5.3 ([#2485](https://github.com/homarr-labs/homarr/issues/2485)) ([49b0f96](https://github.com/homarr-labs/homarr/commit/49b0f962e0b316bbed599d77d97be927aac252da))
+* **deps:** update dependency typescript-eslint to ^8.26.0 ([#2488](https://github.com/homarr-labs/homarr/issues/2488)) ([21f3a5a](https://github.com/homarr-labs/homarr/commit/21f3a5a408ab45dbf7d92162703e74b9e60aff10))
+* **deps:** update mantine monorepo to ^7.17.1 ([#2462](https://github.com/homarr-labs/homarr/issues/2462)) ([d9ef1b0](https://github.com/homarr-labs/homarr/commit/d9ef1b04706a3435d4500db2f2966a28db900d9d))
+* **deps:** update tanstack-query monorepo to ^5.67.0 ([#2486](https://github.com/homarr-labs/homarr/issues/2486)) ([bad07cb](https://github.com/homarr-labs/homarr/commit/bad07cbf251ab64afe99390bcb687d2f58e8fdc7))
+* **deps:** update tanstack-query monorepo to ^5.67.1 ([#2487](https://github.com/homarr-labs/homarr/issues/2487)) ([6135b59](https://github.com/homarr-labs/homarr/commit/6135b59b7d24029eaf24ae2a2b94b5cbc822242a))
+* docker add to homarr layout overflow ([#2441](https://github.com/homarr-labs/homarr/issues/2441)) ([a3999bc](https://github.com/homarr-labs/homarr/commit/a3999bcf521d4d339282701b4734b6cd352c9582))
+* **integration:** store omv session in redis ([#2467](https://github.com/homarr-labs/homarr/issues/2467)) ([b3e4f30](https://github.com/homarr-labs/homarr/commit/b3e4f3031296ffc69d914f542f95895a449ce2c7))
+* **logs:** add special case for axios error to prevent huge error messages ([#2468](https://github.com/homarr-labs/homarr/issues/2468)) ([9eb7663](https://github.com/homarr-labs/homarr/commit/9eb76634d07b7bf5ff28062714c44e150591d75d))
+* **media-request:** inconsistent sorting and reordering ([#2464](https://github.com/homarr-labs/homarr/issues/2464)) ([43619e0](https://github.com/homarr-labs/homarr/commit/43619e0cc0311ca8f26a4fdbc0ccb7fae79c3514))
+* **old-import:** default logo and favicon not replaced ([#2456](https://github.com/homarr-labs/homarr/issues/2456)) ([788304a](https://github.com/homarr-labs/homarr/commit/788304adfbe3c6c9696758e9ad42bca9d9b86290))
+
+## [1.8.0](https://github.com/homarr-labs/homarr/compare/v1.7.0...v1.8.0) (2025-02-28)
+
+### Features
+
+* add app ping url ([#2380](https://github.com/homarr-labs/homarr/issues/2380)) ([fb467ac](https://github.com/homarr-labs/homarr/commit/fb467ac16553d3c498770a531cf77b9f2c7c0a9e))
+* **boards:** add responsive layout system ([#2271](https://github.com/homarr-labs/homarr/issues/2271)) ([7761dc2](https://github.com/homarr-labs/homarr/commit/7761dc29c809b28cc8275dcabf77c453cea3621c))
+
+### Bug Fixes
+
+* await params for board metadata ([#2406](https://github.com/homarr-labs/homarr/issues/2406)) ([2085b5e](https://github.com/homarr-labs/homarr/commit/2085b5ece24f661086c4896a6ecfbff61de1b7d4))
+* **boards:** add scrollarea to board-select ([#2409](https://github.com/homarr-labs/homarr/issues/2409)) ([508f9af](https://github.com/homarr-labs/homarr/commit/508f9afeb542d09d06fc34f06ac68cf732011620))
+* chinese traditional locale ([#2440](https://github.com/homarr-labs/homarr/issues/2440)) ([50367eb](https://github.com/homarr-labs/homarr/commit/50367eb2f5ae9cb6b736197692b3f555e07aca59))
+* **deps:** downgrade to next 15.1.7 cause of turbopack crash with 15.2.0 and above ([#2438](https://github.com/homarr-labs/homarr/issues/2438)) ([fdd91f5](https://github.com/homarr-labs/homarr/commit/fdd91f585d1c0c66a6c28c6d1e374bdd9fdcb787))
+* **deps:** update dependency @auth/core to ^0.38.0 ([#2434](https://github.com/homarr-labs/homarr/issues/2434)) ([8c1308c](https://github.com/homarr-labs/homarr/commit/8c1308c97f011336c2a813e92e7cefa195277994))
+* **deps:** update dependency @auth/drizzle-adapter to ^1.8.0 ([#2435](https://github.com/homarr-labs/homarr/issues/2435)) ([b2cc97e](https://github.com/homarr-labs/homarr/commit/b2cc97e316976e74df8136a7da53a3fae78f815b))
+* **deps:** update dependency drizzle-kit to ^0.30.5 ([#2423](https://github.com/homarr-labs/homarr/issues/2423)) ([3b830ae](https://github.com/homarr-labs/homarr/commit/3b830ae098c290aaa15356cae5ec2fe8cb618d9f))
+* **deps:** update dependency drizzle-orm to ^0.40.0 ([#2425](https://github.com/homarr-labs/homarr/issues/2425)) ([faf7322](https://github.com/homarr-labs/homarr/commit/faf7322bcb94a61dbb2b3295cc4a4eca52484d74))
+* **deps:** update dependency eslint-config-prettier to ^10.0.2 ([#2427](https://github.com/homarr-labs/homarr/issues/2427)) ([c2d6e2e](https://github.com/homarr-labs/homarr/commit/c2d6e2efcf06e97c04bddc2d821c77ad034426b8))
+* **deps:** update dependency eslint-plugin-react-hooks to ^5.2.0 ([#2449](https://github.com/homarr-labs/homarr/issues/2449)) ([a88c1ba](https://github.com/homarr-labs/homarr/commit/a88c1ba4401bbe6317ccde11cff9a057bfa53e26))
+* **deps:** update dependency prettier to ^3.5.2 ([#2399](https://github.com/homarr-labs/homarr/issues/2399)) ([86e778d](https://github.com/homarr-labs/homarr/commit/86e778db1ee081288b4174f6b52fcc44a0bbc1e0))
+* **deps:** update dependency sass to ^1.85.1 ([#2418](https://github.com/homarr-labs/homarr/issues/2418)) ([a9a37af](https://github.com/homarr-labs/homarr/commit/a9a37afd441ad148a42432c24a9c7e6acf804c89))
+* **deps:** update dependency swagger-ui-react to ^5.20.0 ([#2436](https://github.com/homarr-labs/homarr/issues/2436)) ([add9170](https://github.com/homarr-labs/homarr/commit/add91701de30eaeb61efe3295307756e998703a9))
+* **deps:** update dependency typescript-eslint to ^8.25.0 ([#2413](https://github.com/homarr-labs/homarr/issues/2413)) ([593c50b](https://github.com/homarr-labs/homarr/commit/593c50bb8f803ecbda8e6d0c4a082e019cc56352))
+* **deps:** update dependency undici to v7.4.0 ([#2445](https://github.com/homarr-labs/homarr/issues/2445)) ([06ba0f0](https://github.com/homarr-labs/homarr/commit/06ba0f0e9f6da9c22ef531e41811a89c8c5039a8))
+* **deps:** update nextjs monorepo to ^15.2.0 ([#2428](https://github.com/homarr-labs/homarr/issues/2428)) ([d6939e4](https://github.com/homarr-labs/homarr/commit/d6939e4a6daf7fbe0095ae4028d33189c5866fb2))
+* **deps:** update tanstack-query monorepo to ^5.66.10 ([#2443](https://github.com/homarr-labs/homarr/issues/2443)) ([4483dc8](https://github.com/homarr-labs/homarr/commit/4483dc8bcd062f531badd94ba872cf42a17491df))
+* **deps:** update tanstack-query monorepo to ^5.66.11 ([#2447](https://github.com/homarr-labs/homarr/issues/2447)) ([5537f95](https://github.com/homarr-labs/homarr/commit/5537f95b85b1ae56a35d7b529907ebe22d0b1ae6))
+* **deps:** update turbo monorepo to ^2.4.3 ([#2422](https://github.com/homarr-labs/homarr/issues/2422)) ([874414f](https://github.com/homarr-labs/homarr/commit/874414fc4fc1130502abc267116ad109dab11efe))
+* **deps:** update turbo monorepo to ^2.4.4 ([#2424](https://github.com/homarr-labs/homarr/issues/2424)) ([a6f9199](https://github.com/homarr-labs/homarr/commit/a6f91998c3a8192eaa93b57a74b6dfc8f3fdc13a))
+* omv invalid temperature when not available ([#2322](https://github.com/homarr-labs/homarr/issues/2322)) ([5dc5d9e](https://github.com/homarr-labs/homarr/commit/5dc5d9e04ab747655276494d70557b45fed87b2c))
+* update checker logs incorrectly ([#2402](https://github.com/homarr-labs/homarr/issues/2402)) ([c5107b2](https://github.com/homarr-labs/homarr/commit/c5107b2b67cad73808dcbae6bde633ac1a7eb2b5))
+
 ## [1.7.0](https://github.com/homarr-labs/homarr/compare/v1.6.0...v1.7.0) (2025-02-21)

 ### Features
@@ -48,17 +48,17 @@
    "@homarr/ui": "workspace:^0.1.0",
    "@homarr/validation": "workspace:^0.1.0",
    "@homarr/widgets": "workspace:^0.1.0",
-    "@mantine/colors-generator": "^7.17.0",
-    "@mantine/core": "^7.17.0",
-    "@mantine/dropzone": "^7.17.0",
-    "@mantine/hooks": "^7.17.0",
-    "@mantine/modals": "^7.17.0",
-    "@mantine/tiptap": "^7.17.0",
+    "@mantine/colors-generator": "^7.17.1",
+    "@mantine/core": "^7.17.1",
+    "@mantine/dropzone": "^7.17.1",
+    "@mantine/hooks": "^7.17.1",
+    "@mantine/modals": "^7.17.1",
+    "@mantine/tiptap": "^7.17.1",
    "@million/lint": "1.0.14",
-    "@tabler/icons-react": "^3.30.0",
-    "@tanstack/react-query": "^5.66.9",
-    "@tanstack/react-query-devtools": "^5.66.9",
-    "@tanstack/react-query-next-experimental": "^5.66.9",
+    "@tabler/icons-react": "^3.31.0",
+    "@tanstack/react-query": "^5.67.2",
+    "@tanstack/react-query-devtools": "^5.67.2",
+    "@tanstack/react-query-next-experimental": "^5.67.2",
    "@trpc/client": "next",
    "@trpc/next": "next",
    "@trpc/react-query": "next",
@@ -81,9 +81,9 @@
    "react-dom": "19.0.0",
    "react-error-boundary": "^5.0.0",
    "react-simple-code-editor": "^0.14.1",
-    "sass": "^1.85.0",
+    "sass": "^1.85.1",
    "superjson": "2.2.2",
-    "swagger-ui-react": "^5.19.0",
+    "swagger-ui-react": "^5.20.0",
    "use-deep-compare-effect": "^1.8.1",
    "zod": "^3.24.2"
  },
@@ -92,15 +92,15 @@
    "@homarr/prettier-config": "workspace:^0.1.0",
    "@homarr/tsconfig": "workspace:^0.1.0",
    "@types/chroma-js": "3.1.1",
-    "@types/node": "^22.13.4",
+    "@types/node": "^22.13.9",
    "@types/prismjs": "^1.26.5",
    "@types/react": "19.0.10",
    "@types/react-dom": "19.0.4",
    "@types/swagger-ui-react": "^5.18.0",
    "concurrently": "^9.1.2",
-    "eslint": "^9.20.1",
+    "eslint": "^9.21.0",
    "node-loader": "^2.1.0",
-    "prettier": "^3.5.1",
-    "typescript": "^5.7.3"
+    "prettier": "^3.5.3",
+    "typescript": "^5.8.2"
  }
 }
@@ -5,7 +5,7 @@ import { Box, LoadingOverlay, Stack } from "@mantine/core";

 import type { RouterOutputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
-import { useRequiredBoard } from "@homarr/boards/context";
+import { useCurrentLayout, useRequiredBoard } from "@homarr/boards/context";

 import { BoardCategorySection } from "~/components/board/sections/category-section";
 import { BoardEmptySection } from "~/components/board/sections/empty-section";
@@ -43,6 +43,7 @@ export const useUpdateBoard = () => {

 export const ClientBoard = () => {
  const board = useRequiredBoard();
+  const currentLayoutId = useCurrentLayout();
  const isReady = useIsBoardReady();

  const fullWidthSortedSections = board.sections
@@ -63,9 +64,10 @@ export const ClientBoard = () => {
      <Stack ref={ref} h="100%" style={{ visibility: isReady ? "visible" : "hidden" }}>
        {fullWidthSortedSections.map((section) =>
          section.kind === "empty" ? (
-            <BoardEmptySection key={section.id} section={section} />
+            // Unique keys per layout to always reinitialize the gridstack
+            <BoardEmptySection key={`${currentLayoutId}-${section.id}`} section={section} />
          ) : (
-            <BoardCategorySection key={section.id} section={section} />
+            <BoardCategorySection key={`${currentLayoutId}-${section.id}`} section={section} />
          ),
        )}
      </Stack>
@@ -13,7 +13,7 @@ import { getI18n } from "@homarr/translation/server";
 import { createMetaTitle } from "~/metadata";
 import { createBoardLayout } from "../_layout-creator";
 import type { Board } from "../_types";
-import { ClientBoard } from "./_client";
+import { DynamicClientBoard } from "./_dynamic-client";
 import { BoardContentHeaderActions } from "./_header-actions";

 export type Params = Record<string, unknown>;
@@ -37,13 +37,13 @@ export const createBoardContentPage = <TParams extends Record<string, unknown>>(

      return (
        <IntegrationProvider integrations={integrations}>
-          <ClientBoard />
+          <DynamicClientBoard />
        </IntegrationProvider>
      );
    },
-    generateMetadataAsync: async ({ params }: { params: TParams }): Promise<Metadata> => {
+    generateMetadataAsync: async ({ params }: { params: Promise<TParams> }): Promise<Metadata> => {
      try {
-        const board = await getInitialBoard(params);
+        const board = await getInitialBoard(await params);
        const t = await getI18n();

        return {
@@ -0,0 +1,7 @@
+"use client";
+
+import dynamic from "next/dynamic";
+
+export const DynamicClientBoard = dynamic(() => import("./_client").then((mod) => mod.ClientBoard), {
+  ssr: false,
+});
@@ -4,7 +4,7 @@ import type { MouseEvent } from "react";
 import { useCallback, useEffect } from "react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
-import { Group, Menu } from "@mantine/core";
+import { Group, Menu, ScrollArea } from "@mantine/core";
 import { useHotkeys } from "@mantine/hooks";
 import {
  IconBox,
@@ -168,16 +168,18 @@ const SelectBoardsMenu = () => {
        </HeaderButton>
      </Menu.Target>
      <Menu.Dropdown style={{ transform: "translate(-7px, 0)" }}>
-        {boards.map((board) => (
-          <Menu.Item
-            key={board.id}
-            component={Link}
-            href={`/boards/${board.name}`}
-            leftSection={<IconLayoutBoard size={20} />}
-          >
-            {board.name}
-          </Menu.Item>
-        ))}
+        <ScrollArea.Autosize mah={300}>
+          {boards.map((board) => (
+            <Menu.Item
+              key={board.id}
+              component={Link}
+              href={`/boards/${board.name}`}
+              leftSection={<IconLayoutBoard size={20} />}
+            >
+              {board.name}
+            </Menu.Item>
+          ))}
+        </ScrollArea.Autosize>
      </Menu.Dropdown>
    </Menu>
  );
@@ -1,43 +1,109 @@
 "use client";

-import { Button, Grid, Group, Input, Slider, Stack } from "@mantine/core";
+import { Button, Fieldset, Grid, Group, Input, NumberInput, Slider, Stack, Text, TextInput } from "@mantine/core";

+import { clientApi } from "@homarr/api/client";
+import { createId } from "@homarr/db/client";
 import { useZodForm } from "@homarr/form";
 import { useI18n } from "@homarr/translation/client";
 import { validation } from "@homarr/validation";

 import type { Board } from "../../_types";
-import { useSavePartialSettingsMutation } from "./_shared";

 interface Props {
  board: Board;
 }
 export const LayoutSettingsContent = ({ board }: Props) => {
  const t = useI18n();
-  const { mutate: savePartialSettings, isPending } = useSavePartialSettingsMutation(board);
-  const form = useZodForm(validation.board.savePartialSettings.pick({ columnCount: true }).required(), {
+  const utils = clientApi.useUtils();
+  const { mutate: saveLayouts, isPending } = clientApi.board.saveLayouts.useMutation({
+    onSettled() {
+      void utils.board.getBoardByName.invalidate({ name: board.name });
+      void utils.board.getHomeBoard.invalidate();
+    },
+  });
+  const form = useZodForm(validation.board.saveLayouts.omit({ id: true }).required(), {
    initialValues: {
-      columnCount: board.columnCount,
+      layouts: board.layouts,
    },
  });

  return (
    <form
      onSubmit={form.onSubmit((values) => {
-        savePartialSettings({
+        saveLayouts({
          id: board.id,
          ...values,
        });
      })}
    >
      <Stack>
-        <Grid>
-          <Grid.Col span={{ sm: 12, md: 6 }}>
-            <Input.Wrapper label={t("board.field.columnCount.label")}>
-              <Slider mt="xs" min={1} max={24} step={1} {...form.getInputProps("columnCount")} />
-            </Input.Wrapper>
-          </Grid.Col>
-        </Grid>
+        <Stack gap="sm">
+          <Group justify="space-between" align="center">
+            <Text fw={500}>{t("board.setting.section.layout.responsive.title")}</Text>
+            <Button
+              variant="subtle"
+              onClick={() => {
+                form.setValues({
+                  layouts: [
+                    ...form.values.layouts,
+                    {
+                      id: createId(),
+                      name: "",
+                      columnCount: 10,
+                      breakpoint: 0,
+                    },
+                  ],
+                });
+              }}
+            >
+              {t("board.setting.section.layout.responsive.action.add")}
+            </Button>
+          </Group>
+
+          {form.values.layouts.map((layout, index) => (
+            <Fieldset key={layout.id} legend={layout.name} bg="transparent">
+              <Grid>
+                <Grid.Col span={{ sm: 12, md: 6 }}>
+                  <TextInput {...form.getInputProps(`layouts.${index}.name`)} label={t("layout.field.name.label")} />
+                </Grid.Col>
+
+                <Grid.Col span={{ sm: 12, md: 6 }}>
+                  <Input.Wrapper label={t("layout.field.columnCount.label")}>
+                    <Slider mt="xs" min={1} max={24} step={1} {...form.getInputProps(`layouts.${index}.columnCount`)} />
+                  </Input.Wrapper>
+                </Grid.Col>
+
+                <Grid.Col span={{ sm: 12, md: 6 }}>
+                  <NumberInput
+                    {...form.getInputProps(`layouts.${index}.breakpoint`)}
+                    label={t("layout.field.breakpoint.label")}
+                    description={t("layout.field.breakpoint.description")}
+                  />
+                </Grid.Col>
+              </Grid>
+              {form.values.layouts.length >= 2 && (
+                <Group justify="end">
+                  <Button
+                    variant="subtle"
+                    onClick={() => {
+                      form.setValues((previous) =>
+                        previous.layouts !== undefined && previous.layouts.length >= 2
+                          ? {
+                              layouts: form.values.layouts.filter((filteredLayout) => filteredLayout.id !== layout.id),
+                            }
+                          : previous,
+                      );
+                    }}
+                  >
+                    {t("common.action.remove")}
+                  </Button>
+                </Group>
+              )}
+            </Fieldset>
+          ))}
+        </Stack>
+
        <Group justify="end">
          <Button type="submit" loading={isPending} color="teal">
            {t("common.action.saveChanges")}
@@ -3,10 +3,14 @@ import type { WidgetKind } from "@homarr/definitions";

 export type Board = RouterOutputs["board"]["getHomeBoard"];
 export type Section = Board["sections"][number];
-export type Item = Section["items"][number];
+export type Item = Board["items"][number];
+export type ItemLayout = Item["layouts"][number];
+export type SectionItem = Omit<Item, "layouts"> & ItemLayout & { type: "item" };

 export type CategorySection = Extract<Section, { kind: "category" }>;
 export type EmptySection = Extract<Section, { kind: "empty" }>;
 export type DynamicSection = Extract<Section, { kind: "dynamic" }>;
+export type DynamicSectionLayout = DynamicSection["layouts"][number];
+export type DynamicSectionItem = Omit<DynamicSection, "layouts"> & DynamicSectionLayout & { type: "section" };

 export type ItemOfKind<TKind extends WidgetKind> = Extract<Item, { kind: TKind }>;
@@ -61,7 +61,8 @@ export default async function AppsPage(props: AppsPageProps) {
          </Stack>
        )}

-        <Group justify="end">
+        {/* Added margin to not hide pagination behind affix-button */}
+        <Group justify="end" mb={48}>
          <TablePagination total={Math.ceil(totalCount / searchParams.pageSize)} />
        </Group>
      </Stack>
@@ -92,7 +92,8 @@ export default async function GroupsListPage(props: MediaListPageProps) {
          </TableTbody>
        </Table>

-        <Group justify="end">
+        {/* Added margin to not hide pagination behind affix-button */}
+        <Group justify="end" mb={48}>
          <TablePagination total={Math.ceil(totalCount / searchParams.pageSize)} />
        </Group>
      </Stack>
@@ -61,7 +61,8 @@ export default async function SearchEnginesPage(props: SearchEnginesPageProps) {
          </Stack>
        )}

-        <Group justify="end">
+        {/* Added margin to not hide pagination behind affix-button */}
+        <Group justify="end" mb={48}>
          <TablePagination total={Math.ceil(totalCount / searchParams.pageSize)} />
        </Group>
      </Stack>
@@ -35,7 +35,13 @@ const createColumns = (
    Cell({ renderedCellValue, row }) {
      return (
        <Group gap="xs">
-          <Avatar variant="outline" radius="lg" size="md" src={row.original.iconUrl}>
+          <Avatar
+            variant="outline"
+            radius="lg"
+            size="md"
+            styles={{ image: { objectFit: "contain" } }}
+            src={row.original.iconUrl}
+          >
            {row.original.name.at(0)?.toUpperCase()}
          </Avatar>
          <Text>{renderedCellValue}</Text>
@@ -1,9 +1,11 @@
+import { getBoardLayouts } from "@homarr/boards/context";
 import type { Modify } from "@homarr/common/types";
 import { createId } from "@homarr/db/client";
 import type { WidgetKind } from "@homarr/definitions";

-import type { Board, DynamicSection, EmptySection, Item } from "~/app/[locale]/boards/_types";
+import type { Board, EmptySection, Item, ItemLayout } from "~/app/[locale]/boards/_types";
 import { getFirstEmptyPosition } from "./empty-position";
+import { getSectionElements } from "./section-elements";

 export interface CreateItemInput {
  kind: WidgetKind;
@@ -19,24 +21,11 @@ export const createItemCallback =

    if (!firstSection) return previous;

-    const dynamicSectionsOfFirstSection = previous.sections.filter(
-      (section): section is DynamicSection => section.kind === "dynamic" && section.parentSectionId === firstSection.id,
-    );
-    const elements = [...firstSection.items, ...dynamicSectionsOfFirstSection];
-    const emptyPosition = getFirstEmptyPosition(elements, previous.columnCount);
-
-    if (!emptyPosition) {
-      console.error("Your board is full");
-      return previous;
-    }
-
    const widget = {
      id: createId(),
      kind,
      options: {},
-      width: 1,
-      height: 1,
-      ...emptyPosition,
+      layouts: createItemLayouts(previous, firstSection),
      integrationIds: [],
      advancedOptions: {
        customCssClasses: [],
@@ -50,13 +39,31 @@ export const createItemCallback =

    return {
      ...previous,
-      sections: previous.sections.map((section) => {
-        // Return same section if item is not in it
-        if (section.id !== firstSection.id) return section;
-        return {
-          ...section,
-          items: section.items.concat(widget),
-        };
-      }),
+      items: previous.items.concat(widget),
    };
  };
+
+const createItemLayouts = (board: Board, currentSection: EmptySection): ItemLayout[] => {
+  const layouts = getBoardLayouts(board);
+
+  return layouts.map((layoutId) => {
+    const boardLayout = board.layouts.find((layout) => layout.id === layoutId);
+    const elements = getSectionElements(board, { sectionId: currentSection.id, layoutId });
+
+    const emptyPosition = boardLayout
+      ? getFirstEmptyPosition(elements, boardLayout.columnCount)
+      : { xOffset: 0, yOffset: 0 };
+
+    if (!emptyPosition) {
+      throw new Error("Your board is full");
+    }
+
+    return {
+      width: 1,
+      height: 1,
+      ...emptyPosition,
+      sectionId: currentSection.id,
+      layoutId,
+    };
+  });
+};
@@ -1,7 +1,8 @@
 import { createId } from "@homarr/db/client";

-import type { Board, DynamicSection, EmptySection } from "~/app/[locale]/boards/_types";
+import type { Board, EmptySection, ItemLayout, Section } from "~/app/[locale]/boards/_types";
 import { getFirstEmptyPosition } from "./empty-position";
+import { getSectionElements } from "./section-elements";

 export interface DuplicateItemInput {
  itemId: string;
@@ -10,72 +11,78 @@ export interface DuplicateItemInput {
 export const duplicateItemCallback =
  ({ itemId }: DuplicateItemInput) =>
  (previous: Board): Board => {
-    const itemToDuplicate = previous.sections
-      .flatMap((section) => section.items.map((item) => ({ ...item, sectionId: section.id })))
-      .find((item) => item.id === itemId);
+    const itemToDuplicate = previous.items.find((item) => item.id === itemId);
    if (!itemToDuplicate) return previous;

-    const currentSection = previous.sections.find((section) => section.id === itemToDuplicate.sectionId);
-    if (!currentSection) return previous;
+    const clonedItem = structuredClone(itemToDuplicate);

-    const dynamicSectionsOfCurrentSection = previous.sections.filter(
-      (section): section is DynamicSection =>
-        section.kind === "dynamic" && section.parentSectionId === currentSection.id,
-    );
-    const elements = [...currentSection.items, ...dynamicSectionsOfCurrentSection];
-    let sectionId = currentSection.id;
-    let emptyPosition = getFirstEmptyPosition(
-      elements,
-      currentSection.kind === "dynamic" ? currentSection.width : previous.columnCount,
-      currentSection.kind === "dynamic" ? currentSection.height : undefined,
-      {
-        width: itemToDuplicate.width,
-        height: itemToDuplicate.height,
-      },
-    );
-
-    if (!emptyPosition) {
-      const firstSection = previous.sections
-        .filter((section): section is EmptySection => section.kind === "empty")
-        .sort((sectionA, sectionB) => sectionA.yOffset - sectionB.yOffset)
-        .at(0);
-
-      if (!firstSection) return previous;
-
-      const dynamicSectionsOfFirstSection = previous.sections.filter(
-        (section): section is DynamicSection =>
-          section.kind === "dynamic" && section.parentSectionId === firstSection.id,
-      );
-      const elements = [...firstSection.items, ...dynamicSectionsOfFirstSection];
-      emptyPosition = getFirstEmptyPosition(elements, previous.columnCount, undefined, {
-        width: itemToDuplicate.width,
-        height: itemToDuplicate.height,
-      });
-      if (!emptyPosition) {
-        console.error("Your board is full");
-        return previous;
-      }
-
-      sectionId = firstSection.id;
-    }
-
-    const widget = structuredClone(itemToDuplicate);
-    widget.id = createId();
-    widget.xOffset = emptyPosition.xOffset;
-    widget.yOffset = emptyPosition.yOffset;
-    widget.sectionId = sectionId;
-
-    const result = {
+    return {
      ...previous,
-      sections: previous.sections.map((section) => {
-        // Return same section if item is not in it
-        if (section.id !== sectionId) return section;
-        return {
-          ...section,
-          items: section.items.concat(widget),
-        };
+      items: previous.items.concat({
+        ...clonedItem,
+        id: createId(),
+        layouts: clonedItem.layouts.map((layout) => ({
+          ...layout,
+          ...getNextPosition(previous, layout),
+        })),
      }),
    };
-
-    return result;
  };
+
+const getNextPosition = (board: Board, layout: ItemLayout): { xOffset: number; yOffset: number; sectionId: string } => {
+  const currentSection = board.sections.find((section) => section.id === layout.sectionId);
+  if (currentSection) {
+    const emptySectionPosition = getEmptySectionPosition(board, layout, currentSection);
+    if (emptySectionPosition) {
+      return {
+        ...emptySectionPosition,
+        sectionId: currentSection.id,
+      };
+    }
+  }
+
+  const firstSection = board.sections
+    .filter((section): section is EmptySection => section.kind === "empty")
+    .sort((sectionA, sectionB) => sectionA.yOffset - sectionB.yOffset)
+    .at(0);
+
+  if (!firstSection) {
+    throw new Error("Your board is full. reason='no first section'");
+  }
+
+  const emptySectionPosition = getEmptySectionPosition(board, layout, firstSection);
+
+  if (!emptySectionPosition) {
+    throw new Error("Your board is full. reason='no empty positions'");
+  }
+
+  return {
+    ...emptySectionPosition,
+    sectionId: firstSection.id,
+  };
+};
+
+const getEmptySectionPosition = (
+  board: Board,
+  layout: ItemLayout,
+  section: Section,
+): { xOffset: number; yOffset: number } | undefined => {
+  const boardLayout = board.layouts.find((boardLayout) => boardLayout.id === layout.layoutId);
+  if (!boardLayout) return;
+
+  const sectionElements = getSectionElements(board, { sectionId: layout.sectionId, layoutId: layout.layoutId });
+  if (section.kind !== "dynamic") {
+    return getFirstEmptyPosition(sectionElements, boardLayout.columnCount, undefined, {
+      width: layout.width,
+      height: layout.height,
+    });
+  }
+
+  const sectionLayout = section.layouts.find((sectionLayout) => sectionLayout.layoutId === layout.layoutId);
+  if (!sectionLayout) return;
+
+  return getFirstEmptyPosition(sectionElements, sectionLayout.width, sectionLayout.height, {
+    width: layout.width,
+    height: layout.height,
+  });
+};
@@ -1,7 +1,7 @@
-import type { Item } from "~/app/[locale]/boards/_types";
+import type { SectionItem } from "~/app/[locale]/boards/_types";

 export const getFirstEmptyPosition = (
-  elements: Pick<Item, "yOffset" | "xOffset" | "width" | "height">[],
+  elements: Pick<SectionItem, "yOffset" | "xOffset" | "width" | "height">[],
  columnCount: number,
  rowCount = 9999,
  size: { width: number; height: number } = { width: 1, height: 1 },
@@ -0,0 +1,36 @@
+import { getCurrentLayout } from "@homarr/boards/context";
+
+import type { Board } from "~/app/[locale]/boards/_types";
+
+export interface MoveAndResizeItemInput {
+  itemId: string;
+  xOffset: number;
+  yOffset: number;
+  width: number;
+  height: number;
+}
+
+export const moveAndResizeItemCallback =
+  ({ itemId, ...layoutInput }: MoveAndResizeItemInput) =>
+  (previous: Board): Board => {
+    const currentLayout = getCurrentLayout(previous);
+
+    return {
+      ...previous,
+      items: previous.items.map((item) =>
+        item.id !== itemId
+          ? item
+          : {
+              ...item,
+              layouts: item.layouts.map((layout) =>
+                layout.layoutId !== currentLayout
+                  ? layout
+                  : {
+                      ...layout,
+                      ...layoutInput,
+                    },
+              ),
+            },
+      ),
+    };
+  };
@@ -0,0 +1,37 @@
+import { getCurrentLayout } from "@homarr/boards/context";
+
+import type { Board } from "~/app/[locale]/boards/_types";
+
+export interface MoveItemToSectionInput {
+  itemId: string;
+  sectionId: string;
+  xOffset: number;
+  yOffset: number;
+  width: number;
+  height: number;
+}
+
+export const moveItemToSectionCallback =
+  ({ itemId, ...layoutInput }: MoveItemToSectionInput) =>
+  (board: Board): Board => {
+    const currentLayout = getCurrentLayout(board);
+
+    return {
+      ...board,
+      items: board.items.map((item) =>
+        item.id !== itemId
+          ? item
+          : {
+              ...item,
+              layouts: item.layouts.map((layout) =>
+                layout.layoutId !== currentLayout
+                  ? layout
+                  : {
+                      ...layout,
+                      ...layoutInput,
+                    },
+              ),
+            },
+      ),
+    };
+  };
@@ -0,0 +1,12 @@
+import type { Board } from "~/app/[locale]/boards/_types";
+
+export interface RemoveItemInput {
+  itemId: string;
+}
+
+export const removeItemCallback =
+  ({ itemId }: RemoveItemInput) =>
+  (board: Board): Board => ({
+    ...board,
+    items: board.items.filter((item) => item.id !== itemId),
+  });
@@ -0,0 +1,18 @@
+import type { Board } from "~/app/[locale]/boards/_types";
+
+export const getSectionElements = (board: Board, { sectionId, layoutId }: { sectionId: string; layoutId: string }) => {
+  const dynamicSectionsOfFirstSection = board.sections
+    .filter((section) => section.kind === "dynamic")
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    .map(({ layouts, ...section }) => ({ ...section, ...layouts.find((layout) => layout.layoutId === layoutId)! }))
+    .filter((section) => section.parentSectionId === sectionId);
+  const items = board.items
+    .map(({ layouts, ...item }) => ({
+      ...item,
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      ...layouts.find((layout) => layout.layoutId === layoutId)!,
+    }))
+    .filter((item) => item.sectionId === sectionId);
+
+  return [...items, ...dynamicSectionsOfFirstSection];
+};
@@ -1,61 +1,109 @@
 import { describe, expect, test, vi } from "vitest";

-import type { Board } from "~/app/[locale]/boards/_types";
+import * as boardContext from "@homarr/boards/context";
+
 import { createItemCallback } from "../create-item";
-import * as emptyPosition from "../empty-position";
-import { createDynamicSection, createEmptySection, createItem } from "./shared";
+import * as emptyPositionModule from "../empty-position";
+import { BoardMockBuilder } from "./mocks/board-mock";
+import { DynamicSectionMockBuilder } from "./mocks/dynamic-section-mock";
+import { ItemMockBuilder } from "./mocks/item-mock";
+import { LayoutMockBuilder } from "./mocks/layout-mock";

 describe("item actions create-item", () => {
  test("should add it to first section", () => {
-    const spy = vi.spyOn(emptyPosition, "getFirstEmptyPosition");
-    spy.mockReturnValue({ xOffset: 5, yOffset: 5 });
-    const input = {
-      sections: [createEmptySection("1", 2), createEmptySection("2", 0), createEmptySection("3", 1)],
-      columnCount: 4,
-    } satisfies Pick<Board, "sections" | "columnCount">;
+    // Arrange
+    const itemKind = "clock";
+    const emptyPosition = { xOffset: 5, yOffset: 5 };
+    const firstSectionId = "2";
+    const layoutId = "1";

+    const layout = new LayoutMockBuilder({ id: layoutId, columnCount: 4 }).build();
+    const board = new BoardMockBuilder()
+      .addLayout(layout)
+      .addLayout()
+      .addEmptySection({ id: "1", yOffset: 2 })
+      .addEmptySection({ id: firstSectionId, yOffset: 0 })
+      .addEmptySection({ id: "3", yOffset: 1 })
+      .build();
+
+    const emptyPositionSpy = vi.spyOn(emptyPositionModule, "getFirstEmptyPosition");
+    emptyPositionSpy.mockReturnValue(emptyPosition);
+    const layoutsSpy = vi.spyOn(boardContext, "getBoardLayouts");
+    layoutsSpy.mockReturnValue([layoutId]);
+
+    // Act
    const result = createItemCallback({
-      kind: "clock",
-    })(input as unknown as Board);
+      kind: itemKind,
+    })(board);

-    const firstSection = result.sections.find((section) => section.id === "2");
-    const item = firstSection?.items.at(0);
-    expect(item).toEqual(expect.objectContaining({ kind: "clock", xOffset: 5, yOffset: 5 }));
-    expect(spy).toHaveBeenCalledWith([], input.columnCount);
+    // Assert
+    const item = result.items.at(0);
+    expect(item).toEqual(
+      expect.objectContaining({
+        kind: itemKind,
+        layouts: [
+          {
+            layoutId,
+            height: 1,
+            width: 1,
+            ...emptyPosition,
+            sectionId: firstSectionId,
+          },
+        ],
+      }),
+    );
+    expect(emptyPositionSpy).toHaveBeenCalledWith([], layout.columnCount);
  });
  test("should correctly pass dynamic section and items to getFirstEmptyPosition", () => {
-    const spy = vi.spyOn(emptyPosition, "getFirstEmptyPosition");
-    spy.mockReturnValue({ xOffset: 5, yOffset: 5 });
-    const firstSection = createEmptySection("2", 0);
-    const expectedItem = createItem({ id: "12", xOffset: 1, yOffset: 2, width: 3, height: 2 });
-    firstSection.items.push(expectedItem);
-    const dynamicSectionInFirst = createDynamicSection({
-      id: "4",
-      parentSectionId: "2",
-      yOffset: 0,
-      xOffset: 0,
-      width: 2,
-      height: 2,
-    });
+    // Arrange
+    const itemKind = "clock";
+    const emptyPosition = { xOffset: 5, yOffset: 5 };
+    const firstSectionId = "2";
+    const layoutId = "1";
+    const itemAndSectionPosition = { height: 2, width: 3, yOffset: 2, xOffset: 1 };

-    const input = {
-      sections: [
-        createEmptySection("1", 2),
-        firstSection,
-        createEmptySection("3", 1),
-        dynamicSectionInFirst,
-        createDynamicSection({ id: "5", parentSectionId: "3", yOffset: 1 }),
-      ],
-      columnCount: 4,
-    } satisfies Pick<Board, "sections" | "columnCount">;
+    const layout = new LayoutMockBuilder({ id: layoutId, columnCount: 4 }).build();
+    const dynamicSectionInFirstSection = new DynamicSectionMockBuilder({ id: "4" })
+      .addLayout({ ...itemAndSectionPosition, layoutId, parentSectionId: firstSectionId })
+      .build();
+    const itemInFirstSection = new ItemMockBuilder({ id: "12" })
+      .addLayout({ ...itemAndSectionPosition, layoutId, sectionId: firstSectionId })
+      .build();
+    const otherDynamicSection = new DynamicSectionMockBuilder({ id: "5" }).addLayout({ layoutId }).build();
+    const otherItem = new ItemMockBuilder({ id: "13" }).addLayout({ layoutId }).build();
+    const board = new BoardMockBuilder()
+      .addLayout(layout)
+      .addEmptySection({ id: "1", yOffset: 2 })
+      .addEmptySection({ id: firstSectionId, yOffset: 0 })
+      .addEmptySection({ id: "3", yOffset: 1 })
+      .addSection(dynamicSectionInFirstSection)
+      .addSection(otherDynamicSection)
+      .addItem(itemInFirstSection)
+      .addItem(otherItem)
+      .build();

+    const spy = vi.spyOn(emptyPositionModule, "getFirstEmptyPosition");
+    spy.mockReturnValue(emptyPosition);
+    const layoutsSpy = vi.spyOn(boardContext, "getBoardLayouts");
+    layoutsSpy.mockReturnValue([layoutId]);
+
+    // Act
    const result = createItemCallback({
-      kind: "clock",
-    })(input as unknown as Board);
+      kind: itemKind,
+    })(board);

-    const firstSectionResult = result.sections.find((section) => section.id === "2");
-    const item = firstSectionResult?.items.find((item) => item.id !== "12");
-    expect(item).toEqual(expect.objectContaining({ kind: "clock", xOffset: 5, yOffset: 5 }));
-    expect(spy).toHaveBeenCalledWith([expectedItem, dynamicSectionInFirst], input.columnCount);
+    // Assert
+    expect(result.items.length).toBe(3);
+    const item = result.items.find((item) => item.id !== itemInFirstSection.id && item.id !== otherItem.id);
+    expect(item).toEqual(
+      expect.objectContaining({
+        kind: itemKind,
+        layouts: [{ ...emptyPosition, height: 1, width: 1, sectionId: firstSectionId, layoutId }],
+      }),
+    );
+    expect(spy).toHaveBeenCalledWith(
+      [expect.objectContaining(itemAndSectionPosition), expect.objectContaining(itemAndSectionPosition)],
+      layout.columnCount,
+    );
  });
 });
@@ -1,51 +1,63 @@
 import { describe, expect, test, vi } from "vitest";

-import type { Board } from "~/app/[locale]/boards/_types";
 import { duplicateItemCallback } from "../duplicate-item";
-import * as emptyPosition from "../empty-position";
-import { createEmptySection, createItem } from "./shared";
+import * as emptyPositionModule from "../empty-position";
+import { BoardMockBuilder } from "./mocks/board-mock";
+import { ItemMockBuilder } from "./mocks/item-mock";
+import { LayoutMockBuilder } from "./mocks/layout-mock";

 describe("item actions duplicate-item", () => {
  test("should copy it in the same section", () => {
-    const spy = vi.spyOn(emptyPosition, "getFirstEmptyPosition");
-    spy.mockReturnValue({ xOffset: 5, yOffset: 5 });
-    const currentSection = createEmptySection("2", 1);
-    const currentItem = createItem({
-      id: "1",
-      xOffset: 1,
-      yOffset: 3,
-      width: 3,
-      height: 2,
-      kind: "minecraftServerStatus",
+    // Arrange
+    const itemKind = "minecraftServerStatus";
+    const emptyPosition = { xOffset: 5, yOffset: 5 };
+    const currentSectionId = "2";
+    const layoutId = "1";
+    const currentItemSize = { height: 2, width: 3 };
+
+    const layout = new LayoutMockBuilder({ id: layoutId, columnCount: 4 }).build();
+    const currentItem = new ItemMockBuilder({
+      kind: itemKind,
      integrationIds: ["1"],
      options: { address: "localhost" },
      advancedOptions: { customCssClasses: ["test"] },
-    });
-    const otherItem = createItem({
-      id: "2",
-    });
-    currentSection.items.push(currentItem, otherItem);
-    const input = {
-      columnCount: 10,
-      sections: [createEmptySection("1", 0), currentSection, createEmptySection("3", 2)],
-    } satisfies Pick<Board, "sections" | "columnCount">;
+    })
+      .addLayout({ layoutId, sectionId: currentSectionId, ...currentItemSize })
+      .build();
+    const otherItem = new ItemMockBuilder({ id: "2" }).addLayout({ layoutId }).build();

-    const result = duplicateItemCallback({ itemId: currentItem.id })(input as unknown as Board);
+    const board = new BoardMockBuilder()
+      .addLayout(layout)
+      .addItem(currentItem)
+      .addItem(otherItem)
+      .addEmptySection({ id: "1", yOffset: 2 })
+      .addEmptySection({ id: currentSectionId, yOffset: 0 })
+      .addEmptySection({ id: "3", yOffset: 1 })
+      .build();

-    const section = result.sections.find((section) => section.id === "2");
-    expect(section?.items.length).toBe(3);
-    const duplicatedItem = section?.items.find((item) => item.id !== currentItem.id && item.id !== otherItem.id);
+    const spy = vi.spyOn(emptyPositionModule, "getFirstEmptyPosition");
+    spy.mockReturnValue(emptyPosition);
+
+    // Act
+    const result = duplicateItemCallback({ itemId: currentItem.id })(board);
+
+    // Assert
+    expect(result.items.length).toBe(3);
+    const duplicatedItem = result.items.find((item) => item.id !== currentItem.id && item.id !== otherItem.id);

    expect(duplicatedItem).toEqual(
      expect.objectContaining({
-        kind: "minecraftServerStatus",
-        xOffset: 5,
-        yOffset: 5,
-        width: 3,
-        height: 2,
-        integrationIds: ["1"],
-        options: { address: "localhost" },
-        advancedOptions: { customCssClasses: ["test"] },
+        kind: itemKind,
+        integrationIds: currentItem.integrationIds,
+        options: currentItem.options,
+        advancedOptions: currentItem.advancedOptions,
+        layouts: [
+          expect.objectContaining({
+            ...emptyPosition,
+            ...currentItemSize,
+            sectionId: currentSectionId,
+          }),
+        ],
      }),
    );
  });
@@ -109,7 +109,7 @@ describe("get first empty position", () => {
 });

 const createElementsFromLayout = (layout: string[][]) => {
-  const elements: (Pick<Item, "xOffset" | "yOffset" | "width" | "height"> & { char: string })[] = [];
+  const elements: (Pick<Item["layouts"][number], "xOffset" | "yOffset" | "width" | "height"> & { char: string })[] = [];
  for (let yOffset = 0; yOffset < layout.length; yOffset++) {
    const row = layout[yOffset];
    if (!row) continue;
@@ -0,0 +1,90 @@
+import { createId } from "@homarr/db";
+
+import type { Board, DynamicSection, EmptySection, Item, Section } from "~/app/[locale]/boards/_types";
+import { DynamicSectionMockBuilder } from "./dynamic-section-mock";
+import { EmptySectionMockBuilder } from "./empty-section-mock";
+import { ItemMockBuilder } from "./item-mock";
+import { LayoutMockBuilder } from "./layout-mock";
+
+export class BoardMockBuilder {
+  private readonly board: Board;
+
+  constructor(board?: Partial<Omit<Board, "groupPermissions" | "userPermissions" | "sections" | "items" | "layouts">>) {
+    this.board = {
+      id: createId(),
+      backgroundImageRepeat: "no-repeat",
+      backgroundImageAttachment: "scroll",
+      backgroundImageSize: "cover",
+      backgroundImageUrl: null,
+      primaryColor: "#ffffff",
+      secondaryColor: "#000000",
+      iconColor: null,
+      itemRadius: "lg",
+      pageTitle: "Board",
+      metaTitle: "Board",
+      logoImageUrl: null,
+      faviconImageUrl: null,
+      name: "board",
+      opacity: 100,
+      isPublic: true,
+      disableStatus: false,
+      customCss: "",
+      creatorId: createId(),
+      creator: {
+        id: createId(),
+        image: null,
+        name: "User",
+      },
+      groupPermissions: [],
+      userPermissions: [],
+      sections: [],
+      items: [],
+      layouts: [
+        {
+          id: createId(),
+          name: "Base",
+          columnCount: 12,
+          breakpoint: 0,
+        },
+      ],
+      ...board,
+    };
+  }
+
+  public addEmptySection(emptySection?: Partial<EmptySection>): BoardMockBuilder {
+    return this.addSection(new EmptySectionMockBuilder(emptySection).build());
+  }
+
+  public addDynamicSection(dynamicSection?: Partial<DynamicSection>): BoardMockBuilder {
+    return this.addSection(new DynamicSectionMockBuilder(dynamicSection).build());
+  }
+
+  public addSection(section: Section): BoardMockBuilder {
+    this.board.sections.push(section);
+    return this;
+  }
+
+  public addSections(sections: Section[]): BoardMockBuilder {
+    this.board.sections.push(...sections);
+    return this;
+  }
+
+  public addItem(item?: Partial<Item>): BoardMockBuilder {
+    this.board.items.push(new ItemMockBuilder(item).build());
+    return this;
+  }
+
+  public addItems(items: Item[]): BoardMockBuilder {
+    this.board.items.push(...items);
+    return this;
+  }
+
+  public addLayout(layout?: Partial<Board["layouts"][number]>): BoardMockBuilder {
+    this.board.layouts.push(new LayoutMockBuilder(layout).build());
+    return this;
+  }
+
+  public build(): Board {
+    return this.board;
+  }
+}
@@ -0,0 +1,23 @@
+import { createId } from "@homarr/db";
+
+import type { CategorySection } from "~/app/[locale]/boards/_types";
+
+export class CategorySectionMockBuilder {
+  private readonly section: CategorySection;
+
+  constructor(section?: Partial<CategorySection>) {
+    this.section = {
+      id: createId(),
+      kind: "category",
+      xOffset: 0,
+      yOffset: 0,
+      name: "Category",
+      collapsed: false,
+      ...section,
+    } satisfies CategorySection;
+  }
+
+  public build(): CategorySection {
+    return this.section;
+  }
+}
@@ -0,0 +1,36 @@
+import { createId } from "@homarr/db";
+
+import type { DynamicSection } from "~/app/[locale]/boards/_types";
+
+export class DynamicSectionMockBuilder {
+  private readonly section: DynamicSection;
+
+  constructor(section?: Partial<DynamicSection>) {
+    this.section = {
+      id: createId(),
+      kind: "dynamic",
+      options: {
+        borderColor: "",
+      },
+      layouts: [],
+      ...section,
+    } satisfies DynamicSection;
+  }
+
+  public addLayout(layout?: Partial<DynamicSection["layouts"][0]>): DynamicSectionMockBuilder {
+    this.section.layouts.push({
+      layoutId: "1",
+      height: 1,
+      width: 1,
+      xOffset: 0,
+      yOffset: 0,
+      parentSectionId: "0",
+      ...layout,
+    } satisfies DynamicSection["layouts"][0]);
+    return this;
+  }
+
+  public build(): DynamicSection {
+    return this.section;
+  }
+}
@@ -0,0 +1,21 @@
+import { createId } from "@homarr/db";
+
+import type { EmptySection } from "~/app/[locale]/boards/_types";
+
+export class EmptySectionMockBuilder {
+  private readonly section: EmptySection;
+
+  constructor(section?: Partial<EmptySection>) {
+    this.section = {
+      id: createId(),
+      kind: "empty",
+      xOffset: 0,
+      yOffset: 0,
+      ...section,
+    } satisfies EmptySection;
+  }
+
+  public build(): EmptySection {
+    return this.section;
+  }
+}
@@ -0,0 +1,38 @@
+import { createId } from "@homarr/db";
+
+import type { Item } from "~/app/[locale]/boards/_types";
+
+export class ItemMockBuilder {
+  private readonly item: Item;
+
+  constructor(item?: Partial<Item>) {
+    this.item = {
+      id: createId(),
+      kind: "app",
+      options: {},
+      layouts: [],
+      integrationIds: [],
+      advancedOptions: {
+        customCssClasses: [],
+      },
+      ...item,
+    } satisfies Item;
+  }
+
+  public addLayout(layout?: Partial<Item["layouts"][0]>): ItemMockBuilder {
+    this.item.layouts.push({
+      layoutId: "1",
+      height: 1,
+      width: 1,
+      xOffset: 0,
+      yOffset: 0,
+      sectionId: "0",
+      ...layout,
+    } satisfies Item["layouts"][0]);
+    return this;
+  }
+
+  public build(): Item {
+    return this.item;
+  }
+}
@@ -0,0 +1,21 @@
+import { createId } from "@homarr/db";
+
+import type { Board } from "~/app/[locale]/boards/_types";
+
+export class LayoutMockBuilder {
+  private readonly layout: Board["layouts"][number];
+
+  constructor(layout?: Partial<Board["layouts"][number]>) {
+    this.layout = {
+      id: createId(),
+      name: "Base",
+      columnCount: 12,
+      breakpoint: 0,
+      ...layout,
+    } satisfies Board["layouts"][0];
+  }
+
+  public build(): Board["layouts"][0] {
+    return this.layout;
+  }
+}
@@ -0,0 +1,65 @@
+import { describe, expect, test, vi } from "vitest";
+
+import * as boardContext from "@homarr/boards/context";
+
+import { moveAndResizeItemCallback } from "../move-and-resize-item";
+import { BoardMockBuilder } from "./mocks/board-mock";
+import { ItemMockBuilder } from "./mocks/item-mock";
+
+describe("moveItemToSectionCallback should move item in section", () => {
+  test("should move item in section", () => {
+    // Arrange
+    const itemToMove = "2";
+    const layoutId = "1";
+    const spy = vi.spyOn(boardContext, "getCurrentLayout");
+    spy.mockReturnValue(layoutId);
+    const newPosition = {
+      xOffset: 20,
+      yOffset: 30,
+      width: 15,
+      height: 17,
+    };
+    const itemA = new ItemMockBuilder().addLayout({ layoutId }).build();
+    const itemB = new ItemMockBuilder({ id: itemToMove }).addLayout({ layoutId }).addLayout().build();
+    const itemC = new ItemMockBuilder().addLayout({ layoutId }).build();
+    const board = new BoardMockBuilder().addItem(itemA).addItem(itemB).addItem(itemC).build();
+
+    // Act
+    const updatedBoard = moveAndResizeItemCallback({ itemId: itemToMove, ...newPosition })(board);
+
+    // Assert
+    expect(updatedBoard.items).toHaveLength(3);
+    const movedItem = updatedBoard.items.find((item) => item.id === itemToMove);
+    expect(movedItem).not.toBeUndefined();
+    expect(movedItem?.layouts.find((layout) => layout.layoutId === layoutId)).toEqual(
+      expect.objectContaining(newPosition),
+    );
+    const otherItemLayouts = updatedBoard.items
+      .filter((item) => item.id !== itemToMove)
+      .flatMap((item) => item.layouts);
+    expect(otherItemLayouts).not.toContainEqual(expect.objectContaining(newPosition));
+  });
+  test("should not move item if item not found", () => {
+    // Arrange
+    const itemToMove = "2";
+    const layoutId = "1";
+    const spy = vi.spyOn(boardContext, "getCurrentLayout");
+    spy.mockReturnValue(layoutId);
+    const newPosition = {
+      xOffset: 20,
+      yOffset: 30,
+      width: 15,
+      height: 17,
+    };
+    const itemA = new ItemMockBuilder().addLayout({ layoutId }).build();
+    const itemC = new ItemMockBuilder().addLayout({ layoutId }).build();
+    const board = new BoardMockBuilder().addItem(itemA).addItem(itemC).build();
+
+    // Act
+    const updatedBoard = moveAndResizeItemCallback({ itemId: itemToMove, ...newPosition })(board);
+
+    // Assert
+    expect(updatedBoard.items).toHaveLength(2);
+    expect(updatedBoard.items.find((item) => item.layouts.at(0)?.yOffset === newPosition.yOffset)).toBeUndefined();
+  });
+});
@@ -0,0 +1,67 @@
+import { describe, expect, test, vi } from "vitest";
+
+import * as boardContext from "@homarr/boards/context";
+
+import { moveItemToSectionCallback } from "../move-item-to-section";
+import { BoardMockBuilder } from "./mocks/board-mock";
+import { ItemMockBuilder } from "./mocks/item-mock";
+
+describe("moveItemToSectionCallback should move item to section", () => {
+  test("should move item to section", () => {
+    // Arrange
+    const itemToMove = "2";
+    const layoutId = "1";
+    const spy = vi.spyOn(boardContext, "getCurrentLayout");
+    spy.mockReturnValue(layoutId);
+    const newPosition = {
+      sectionId: "3",
+      xOffset: 20,
+      yOffset: 30,
+      width: 15,
+      height: 17,
+    };
+    const itemA = new ItemMockBuilder().addLayout({ layoutId }).build();
+    const itemB = new ItemMockBuilder({ id: itemToMove }).addLayout({ layoutId }).addLayout().build();
+    const itemC = new ItemMockBuilder().addLayout({ layoutId }).build();
+    const board = new BoardMockBuilder().addItem(itemA).addItem(itemB).addItem(itemC).build();
+
+    // Act
+    const updatedBoard = moveItemToSectionCallback({ itemId: itemToMove, ...newPosition })(board);
+
+    // Assert
+    expect(updatedBoard.items).toHaveLength(3);
+    const movedItem = updatedBoard.items.find((item) => item.id === itemToMove);
+    expect(movedItem).not.toBeUndefined();
+    expect(movedItem?.layouts.find((layout) => layout.layoutId === layoutId)).toEqual(
+      expect.objectContaining(newPosition),
+    );
+    const otherItemLayouts = updatedBoard.items
+      .filter((item) => item.id !== itemToMove)
+      .flatMap((item) => item.layouts);
+    expect(otherItemLayouts).not.toContainEqual(expect.objectContaining(newPosition));
+  });
+  test("should not move item if item not found", () => {
+    // Arrange
+    const itemToMove = "2";
+    const layoutId = "1";
+    const spy = vi.spyOn(boardContext, "getCurrentLayout");
+    spy.mockReturnValue(layoutId);
+    const newPosition = {
+      sectionId: "3",
+      xOffset: 20,
+      yOffset: 30,
+      width: 15,
+      height: 17,
+    };
+    const itemA = new ItemMockBuilder().addLayout({ layoutId }).build();
+    const itemC = new ItemMockBuilder().addLayout({ layoutId }).build();
+    const board = new BoardMockBuilder().addItem(itemA).addItem(itemC).build();
+
+    // Act
+    const updatedBoard = moveItemToSectionCallback({ itemId: itemToMove, ...newPosition })(board);
+
+    // Assert
+    expect(updatedBoard.items).toHaveLength(2);
+    expect(updatedBoard.items.find((item) => item.layouts.at(0)?.sectionId === newPosition.sectionId)).toBeUndefined();
+  });
+});
@@ -0,0 +1,37 @@
+import { describe, expect, test } from "vitest";
+
+import { removeItemCallback } from "../remove-item";
+import { BoardMockBuilder } from "./mocks/board-mock";
+
+describe("removeItemCallback should remove item from board", () => {
+  test("should remove correct item from board", () => {
+    // Arrange
+    const itemIdToRemove = "2";
+    const board = new BoardMockBuilder()
+      .addItem({ id: "1" })
+      .addItem({ id: itemIdToRemove })
+      .addItem({ id: "3" })
+      .build();
+
+    // Act
+    const updatedBoard = removeItemCallback({ itemId: itemIdToRemove })(board);
+
+    // Assert
+    const itemIds = updatedBoard.items.map((item) => item.id);
+    expect(itemIds).toHaveLength(2);
+    expect(itemIds).not.toContain(itemIdToRemove);
+  });
+  test("should not remove item if item not found", () => {
+    // Arrange
+    const itemIdToRemove = "2";
+    const board = new BoardMockBuilder().addItem({ id: "1" }).addItem({ id: "3" }).build();
+
+    // Act
+    const updatedBoard = removeItemCallback({ itemId: itemIdToRemove })(board);
+
+    // Assert
+    const itemIds = updatedBoard.items.map((item) => item.id);
+    expect(itemIds).toHaveLength(2);
+    expect(itemIds).not.toContain(itemIdToRemove);
+  });
+});
@@ -1,32 +0,0 @@
-import type { DynamicSection, EmptySection, Item } from "~/app/[locale]/boards/_types";
-
-export const createEmptySection = (id: string, yOffset: number): EmptySection => ({
-  id,
-  kind: "empty",
-  yOffset,
-  xOffset: 0,
-  items: [],
-});
-
-export const createDynamicSection = (section: Omit<Partial<DynamicSection>, "kind">): DynamicSection => ({
-  id: section.id ?? "0",
-  kind: "dynamic",
-  parentSectionId: section.parentSectionId ?? "0",
-  height: section.height ?? 1,
-  width: section.width ?? 1,
-  yOffset: section.yOffset ?? 0,
-  xOffset: section.xOffset ?? 0,
-  items: section.items ?? [],
-});
-
-export const createItem = (item: Partial<Item>): Item => ({
-  id: item.id ?? "0",
-  width: item.width ?? 1,
-  height: item.height ?? 1,
-  yOffset: item.yOffset ?? 0,
-  xOffset: item.xOffset ?? 0,
-  kind: item.kind ?? "clock",
-  integrationIds: item.integrationIds ?? [],
-  options: item.options ?? {},
-  advancedOptions: item.advancedOptions ?? { customCssClasses: [] },
-});
@@ -3,30 +3,16 @@ import { useCallback } from "react";
 import { useUpdateBoard } from "@homarr/boards/updater";
 import type { BoardItemAdvancedOptions } from "@homarr/validation";

-import type { Item } from "~/app/[locale]/boards/_types";
 import type { CreateItemInput } from "./actions/create-item";
 import { createItemCallback } from "./actions/create-item";
 import type { DuplicateItemInput } from "./actions/duplicate-item";
 import { duplicateItemCallback } from "./actions/duplicate-item";
-
-interface MoveAndResizeItem {
-  itemId: string;
-  xOffset: number;
-  yOffset: number;
-  width: number;
-  height: number;
-}
-interface MoveItemToSection {
-  itemId: string;
-  sectionId: string;
-  xOffset: number;
-  yOffset: number;
-  width: number;
-  height: number;
-}
-interface RemoveItem {
-  itemId: string;
-}
+import type { MoveAndResizeItemInput } from "./actions/move-and-resize-item";
+import { moveAndResizeItemCallback } from "./actions/move-and-resize-item";
+import type { MoveItemToSectionInput } from "./actions/move-item-to-section";
+import { moveItemToSectionCallback } from "./actions/move-item-to-section";
+import type { RemoveItemInput } from "./actions/remove-item";
+import { removeItemCallback } from "./actions/remove-item";

 interface UpdateItemOptions {
  itemId: string;
@@ -62,164 +48,55 @@ export const useItemActions = () => {

  const updateItemOptions = useCallback(
    ({ itemId, newOptions }: UpdateItemOptions) => {
-      updateBoard((previous) => {
-        return {
-          ...previous,
-          sections: previous.sections.map((section) => {
-            // Return same section if item is not in it
-            if (!section.items.some((item) => item.id === itemId)) return section;
-            return {
-              ...section,
-              items: section.items.map((item) => {
-                // Return same item if item is not the one we're changing
-                if (item.id !== itemId) return item;
-                return {
-                  ...item,
-                  options: newOptions,
-                };
-              }),
-            };
-          }),
-        };
-      });
+      updateBoard((previous) => ({
+        ...previous,
+        items: previous.items.map((item) => (item.id !== itemId ? item : { ...item, options: newOptions })),
+      }));
    },
    [updateBoard],
  );

  const updateItemAdvancedOptions = useCallback(
    ({ itemId, newAdvancedOptions }: UpdateItemAdvancedOptions) => {
-      updateBoard((previous) => {
-        return {
-          ...previous,
-          sections: previous.sections.map((section) => {
-            // Return same section if item is not in it
-            if (!section.items.some((item) => item.id === itemId)) return section;
-            return {
-              ...section,
-              items: section.items.map((item) => {
-                // Return same item if item is not the one we're changing
-                if (item.id !== itemId) return item;
-                return {
-                  ...item,
-                  advancedOptions: newAdvancedOptions,
-                };
-              }),
-            };
-          }),
-        };
-      });
+      updateBoard((previous) => ({
+        ...previous,
+        items: previous.items.map((item) =>
+          item.id !== itemId ? item : { ...item, advancedOptions: newAdvancedOptions },
+        ),
+      }));
    },
    [updateBoard],
  );

  const updateItemIntegrations = useCallback(
    ({ itemId, newIntegrations }: UpdateItemIntegrations) => {
-      updateBoard((previous) => {
-        return {
-          ...previous,
-          sections: previous.sections.map((section) => {
-            // Return same section if item is not in it
-            if (!section.items.some((item) => item.id === itemId)) return section;
-            return {
-              ...section,
-              items: section.items.map((item) => {
-                // Return same item if item is not the one we're moving
-                if (item.id !== itemId) return item;
-                return {
-                  ...item,
-                  ...("integrationIds" in item ? { integrationIds: newIntegrations } : {}),
-                };
-              }),
-            };
-          }),
-        };
-      });
-    },
-    [updateBoard],
-  );
-
-  const moveAndResizeItem = useCallback(
-    ({ itemId, ...positionProps }: MoveAndResizeItem) => {
      updateBoard((previous) => ({
        ...previous,
-        sections: previous.sections.map((section) => {
-          // Return same section if item is not in it
-          if (!section.items.some((item) => item.id === itemId)) return section;
-          return {
-            ...section,
-            items: section.items.map((item) => {
-              // Return same item if item is not the one we're moving
-              if (item.id !== itemId) return item;
-              return {
-                ...item,
-                ...positionProps,
-              } satisfies Item;
-            }),
-          };
-        }),
+        items: previous.items.map((item) =>
+          item.id !== itemId || !("integrationIds" in item) ? item : { ...item, integrationIds: newIntegrations },
+        ),
      }));
    },
    [updateBoard],
  );

+  const moveAndResizeItem = useCallback(
+    (input: MoveAndResizeItemInput) => {
+      updateBoard(moveAndResizeItemCallback(input));
+    },
+    [updateBoard],
+  );
+
  const moveItemToSection = useCallback(
-    ({ itemId, sectionId, ...positionProps }: MoveItemToSection) => {
-      updateBoard((previous) => {
-        const currentSection = previous.sections.find((section) => section.items.some((item) => item.id === itemId));
-
-        // If item is in the same section (on initial loading) don't do anything
-        if (!currentSection) {
-          return previous;
-        }
-
-        const currentItem = currentSection.items.find((item) => item.id === itemId);
-        if (!currentItem) {
-          return previous;
-        }
-
-        if (currentSection.id === sectionId && currentItem.xOffset) {
-          return previous;
-        }
-
-        return {
-          ...previous,
-          sections: previous.sections.map((section) => {
-            // Return sections without item if not section where it is moved to
-            if (section.id !== sectionId)
-              return {
-                ...section,
-                items: section.items.filter((item) => item.id !== itemId),
-              };
-
-            // Return section and add item to it
-            return {
-              ...section,
-              items: section.items
-                .filter((item) => item.id !== itemId)
-                .concat({
-                  ...currentItem,
-                  ...positionProps,
-                }),
-            };
-          }),
-        };
-      });
+    (input: MoveItemToSectionInput) => {
+      updateBoard(moveItemToSectionCallback(input));
    },
    [updateBoard],
  );

  const removeItem = useCallback(
-    ({ itemId }: RemoveItem) => {
-      updateBoard((previous) => {
-        return {
-          ...previous,
-          // Filter removed item out of items array
-          sections: previous.sections.map((section) => ({
-            ...section,
-            items: section.items.filter((item) => item.id !== itemId),
-          })),
-        };
-      });
+    ({ itemId }: RemoveItemInput) => {
+      updateBoard(removeItemCallback({ itemId }));
    },
    [updateBoard],
  );
@@ -11,13 +11,13 @@ import { useSettings } from "@homarr/settings";
 import { loadWidgetDynamic, reduceWidgetOptionsWithDefaultValues, widgetImports } from "@homarr/widgets";
 import { WidgetError } from "@homarr/widgets/errors";

-import type { Item } from "~/app/[locale]/boards/_types";
+import type { SectionItem } from "~/app/[locale]/boards/_types";
 import classes from "../sections/item.module.css";
 import { useItemActions } from "./item-actions";
 import { BoardItemMenu } from "./item-menu";

 interface BoardItemContentProps {
-  item: Item;
+  item: SectionItem;
 }

 export const BoardItemContent = ({ item }: BoardItemContentProps) => {
@@ -50,7 +50,7 @@ export const BoardItemContent = ({ item }: BoardItemContentProps) => {
 };

 interface InnerContentProps {
-  item: Item;
+  item: SectionItem;
  width: number;
  height: number;
 }
@@ -10,7 +10,7 @@ import { useI18n, useScopedI18n } from "@homarr/translation/client";
 import { widgetImports } from "@homarr/widgets";
 import { WidgetEditModal } from "@homarr/widgets/modals";

-import type { Item } from "~/app/[locale]/boards/_types";
+import type { SectionItem } from "~/app/[locale]/boards/_types";
 import { useSectionContext } from "../sections/section-context";
 import { useItemActions } from "./item-actions";
 import { ItemMoveModal } from "./item-move-modal";
@@ -21,7 +21,7 @@ export const BoardItemMenu = ({
  resetErrorBoundary,
 }: {
  offset: number;
-  item: Item;
+  item: SectionItem;
  resetErrorBoundary?: () => void;
 }) => {
  const refResetErrorBoundaryOnNextRender = useRef(false);
@@ -7,11 +7,11 @@ import type { GridStack } from "@homarr/gridstack";
 import { createModal } from "@homarr/modals";
 import { useI18n, useScopedI18n } from "@homarr/translation/client";

-import type { Item } from "~/app/[locale]/boards/_types";
+import type { Item, SectionItem } from "~/app/[locale]/boards/_types";

 interface InnerProps {
  gridStack: GridStack;
-  item: Pick<Item, "id" | "xOffset" | "yOffset" | "width" | "height">;
+  item: Pick<SectionItem, "id" | "width" | "height" | "xOffset" | "yOffset">;
  columnCount: number;
 }

@@ -47,7 +47,7 @@ export const ItemMoveModal = createModal<InnerProps>(({ actions, innerProps }) =
  );

  const handleSubmit = useCallback(
-    (values: Omit<InnerProps["item"], "id">) => {
+    (values: Pick<Item["layouts"][number], "height" | "width" | "xOffset" | "yOffset">) => {
      const gridItem = innerProps.gridStack
        .getGridItems()
        .find((item) => item.getAttribute("data-id") === innerProps.item.id);
@@ -1,4 +1,6 @@
-import type { Board, CategorySection, DynamicSection, EmptySection, Section } from "~/app/[locale]/boards/_types";
+import { getBoardLayouts } from "@homarr/boards/context";
+
+import type { Board, CategorySection, EmptySection, Section } from "~/app/[locale]/boards/_types";

 export interface RemoveCategoryInput {
  id: string;
@@ -28,84 +30,121 @@ export const removeCategoryCallback =
      return previous;
    }

-    // Calculate the yOffset for the items in the currentCategory and removedWrapper to add them with the same offset to the aboveWrapper
-    const aboveYOffset = Math.max(
-      calculateYHeightWithOffsetForItems(aboveSection),
-      calculateYHeightWithOffsetForDynamicSections(previous.sections, aboveSection.id),
-    );
-    const categoryYOffset = Math.max(
-      calculateYHeightWithOffsetForItems(currentCategory),
-      calculateYHeightWithOffsetForDynamicSections(previous.sections, currentCategory.id),
-    );
+    const aboveYOffsets = getBoardLayouts(previous).map((layoutId) => {
+      return {
+        layoutId,
+        yOffset: Math.max(
+          calculateYHeightWithOffsetForItemLayouts(previous, { sectionId: aboveSection.id, layoutId }),
+          calculateYHeightWithOffsetForDynamicSectionLayouts(previous.sections, {
+            sectionId: aboveSection.id,
+            layoutId,
+          }),
+        ),
+      };
+    });

-    const previousCategoryItems = currentCategory.items.map((item) => ({
-      ...item,
-      yOffset: item.yOffset + aboveYOffset,
-    }));
-    const previousBelowWrapperItems = removedSection.items.map((item) => ({
-      ...item,
-      yOffset: item.yOffset + aboveYOffset + categoryYOffset,
-    }));
+    const categoryYOffsets = getBoardLayouts(previous).map((layoutId) => {
+      return {
+        layoutId,
+        yOffset: Math.max(
+          calculateYHeightWithOffsetForItemLayouts(previous, { sectionId: currentCategory.id, layoutId }),
+          calculateYHeightWithOffsetForDynamicSectionLayouts(previous.sections, {
+            sectionId: currentCategory.id,
+            layoutId,
+          }),
+        ),
+      };
+    });

    return {
      ...previous,
-      sections: [
-        ...previous.sections.filter((section) => section.yOffset < aboveSection.yOffset && section.kind !== "dynamic"),
-        {
-          ...aboveSection,
-          items: [...aboveSection.items, ...previousCategoryItems, ...previousBelowWrapperItems],
-        },
-        ...previous.sections
-          .filter(
-            (section): section is CategorySection | EmptySection =>
-              section.yOffset > removedSection.yOffset && section.kind !== "dynamic",
-          )
-          .map((section) => ({
-            ...section,
-            position: section.yOffset - 2,
-          })),
-        ...previous.sections
-          .filter((section): section is DynamicSection => section.kind === "dynamic")
-          .map((dynamicSection) => {
-            // Move dynamic sections from removed section to above section with required yOffset
-            if (dynamicSection.parentSectionId === removedSection.id) {
-              return {
-                ...dynamicSection,
-                yOffset: dynamicSection.yOffset + aboveYOffset + categoryYOffset,
-                parentSectionId: aboveSection.id,
-              };
-            }
+      sections: previous.sections
+        .filter((section) => section.id !== currentCategory.id && section.id !== removedSection.id)
+        .map((section) =>
+          section.kind === "dynamic"
+            ? {
+                ...section,
+                layouts: section.layouts.map((layout) => {
+                  const aboveYOffset = aboveYOffsets.find(({ layoutId }) => layout.layoutId === layoutId)?.yOffset ?? 0;
+                  const categoryYOffset =
+                    categoryYOffsets.find(({ layoutId }) => layout.layoutId === layoutId)?.yOffset ?? 0;

-            // Move dynamic sections from category to above section with required yOffset
-            if (dynamicSection.parentSectionId === currentCategory.id) {
-              return {
-                ...dynamicSection,
-                yOffset: dynamicSection.yOffset + aboveYOffset,
-                parentSectionId: aboveSection.id,
-              };
-            }
+                  if (layout.parentSectionId === currentCategory.id) {
+                    return {
+                      ...layout,
+                      yOffset: layout.yOffset + aboveYOffset,
+                      parentSectionId: aboveSection.id,
+                    };
+                  }

-            return dynamicSection;
-          }),
-      ],
+                  if (layout.parentSectionId === removedSection.id) {
+                    return {
+                      ...layout,
+                      yOffset: layout.yOffset + aboveYOffset + categoryYOffset,
+                      parentSectionId: aboveSection.id,
+                    };
+                  }
+
+                  return layout;
+                }),
+              }
+            : section,
+        ),
+
+      items: previous.items.map((item) => ({
+        ...item,
+        layouts: item.layouts.map((layout) => {
+          const aboveYOffset = aboveYOffsets.find(({ layoutId }) => layout.layoutId === layoutId)?.yOffset ?? 0;
+          const categoryYOffset = categoryYOffsets.find(({ layoutId }) => layout.layoutId === layoutId)?.yOffset ?? 0;
+
+          if (layout.sectionId === currentCategory.id) {
+            return {
+              ...layout,
+              yOffset: layout.yOffset + aboveYOffset,
+              sectionId: aboveSection.id,
+            };
+          }
+
+          if (layout.sectionId === removedSection.id) {
+            return {
+              ...layout,
+              yOffset: layout.yOffset + aboveYOffset + categoryYOffset,
+              sectionId: aboveSection.id,
+            };
+          }
+
+          return layout;
+        }),
+      })),
    };
  };

-const calculateYHeightWithOffsetForDynamicSections = (sections: Section[], sectionId: string) => {
-  return sections.reduce((acc, section) => {
-    if (section.kind !== "dynamic" || section.parentSectionId !== sectionId) {
+const calculateYHeightWithOffsetForDynamicSectionLayouts = (
+  sections: Section[],
+  { sectionId, layoutId }: { sectionId: string; layoutId: string },
+) => {
+  return sections
+    .filter((section) => section.kind === "dynamic")
+    .map((section) => section.layouts.find((layout) => layout.layoutId === layoutId))
+    .filter((layout) => layout !== undefined)
+    .filter((layout) => layout.parentSectionId === sectionId)
+    .reduce((acc, layout) => {
+      const yHeightWithOffset = layout.yOffset + layout.height;
+      if (yHeightWithOffset > acc) return yHeightWithOffset;
      return acc;
-    }
-
-    const yHeightWithOffset = section.yOffset + section.height;
-    if (yHeightWithOffset > acc) return yHeightWithOffset;
-    return acc;
-  }, 0);
+    }, 0);
 };

-const calculateYHeightWithOffsetForItems = (section: Section) =>
-  section.items.reduce((acc, item) => {
-    const yHeightWithOffset = item.yOffset + item.height;
-    if (yHeightWithOffset > acc) return yHeightWithOffset;
-    return acc;
-  }, 0);
+const calculateYHeightWithOffsetForItemLayouts = (
+  board: Board,
+  { sectionId, layoutId }: { sectionId: string; layoutId: string },
+) =>
+  board.items
+    .map((item) => item.layouts.find((layout) => layout.layoutId === layoutId))
+    .filter((layout) => layout !== undefined)
+    .filter((layout) => layout.sectionId === sectionId)
+    .reduce((acc, layout) => {
+      const yHeightWithOffset = layout.yOffset + layout.height;
+      if (yHeightWithOffset > acc) return yHeightWithOffset;
+      return acc;
+    }, 0);
@@ -73,5 +73,7 @@ const createSections = (categoryCount: number) => {
 };

 const sortSections = (sections: Section[]) => {
-  return sections.sort((sectionA, sectionB) => sectionA.yOffset - sectionB.yOffset);
+  return sections
+    .filter((section) => section.kind !== "dynamic")
+    .sort((sectionA, sectionB) => sectionA.yOffset - sectionB.yOffset);
 };
@@ -1,7 +1,14 @@
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
-import { describe, expect, test } from "vitest";
+import { describe, expect, test, vi } from "vitest";

-import type { DynamicSection, Item, Section } from "~/app/[locale]/boards/_types";
+import * as boardContext from "@homarr/boards/context";
+
+import type { DynamicSection, Section } from "~/app/[locale]/boards/_types";
+import { BoardMockBuilder } from "~/components/board/items/actions/test/mocks/board-mock";
+import { CategorySectionMockBuilder } from "~/components/board/items/actions/test/mocks/category-section-mock";
+import { DynamicSectionMockBuilder } from "~/components/board/items/actions/test/mocks/dynamic-section-mock";
+import { EmptySectionMockBuilder } from "~/components/board/items/actions/test/mocks/empty-section-mock";
+import { ItemMockBuilder } from "~/components/board/items/actions/test/mocks/item-mock";
 import { removeCategoryCallback } from "../remove-category";

 describe("Remove Category", () => {
@@ -13,114 +20,126 @@ describe("Remove Category", () => {
  ])(
    "should remove category",
    (removeId, initialYOffsets, expectedYOffsets, expectedRemovals, expectedLocationOfItems) => {
-      const sections = createSections(initialYOffsets);
-
+      // Arrange
+      const layoutId = "1";
      const input = removeId.toString();

-      const result = removeCategoryCallback({ id: input })({ sections } as never);
+      const board = new BoardMockBuilder()
+        .addLayout({ id: layoutId })
+        .addSections(createSections(initialYOffsets))
+        .addItems(createSectionItems(initialYOffsets, layoutId))
+        .build();

+      vi.spyOn(boardContext, "getBoardLayouts").mockReturnValue([layoutId]);
+
+      // Act
+      const result = removeCategoryCallback({ id: input })(board);
+
+      // Assert
      expect(result.sections.map((section) => parseInt(section.id, 10))).toEqual(expectedYOffsets);
      expectedRemovals.forEach((expectedRemoval) => {
        expect(result.sections.find((section) => section.id === expectedRemoval.toString())).toBeUndefined();
      });
-      const aboveSection = result.sections.find((section) => section.id === expectedLocationOfItems.toString());
-      expect(aboveSection?.items.map((item) => parseInt(item.id, 10))).toEqual(
-        expect.arrayContaining(expectedRemovals),
+      const aboveSectionItems = result.items.filter(
+        (item) => item.layouts[0]?.sectionId === expectedLocationOfItems.toString(),
      );
+      expect(aboveSectionItems.map((item) => parseInt(item.id, 10))).toEqual(expect.arrayContaining(expectedRemovals));
    },
  );

  test("should correctly move items to above empty section", () => {
+    // Arrange
+    const layoutId = "1";
+    const sectionIds = {
+      above: "2",
+      category: "3",
+      below: "4",
+      dynamic: "7",
+    };
    const initialYOffsets = [0, 1, 2, 3, 4, 5, 6];
-    const sections: Section[] = createSections(initialYOffsets);
-    const aboveSection = sections.find((section) => section.yOffset === 2)!;
-    aboveSection.items = [
-      createItem({ id: "above-1" }),
-      createItem({ id: "above-2", yOffset: 3, xOffset: 2, height: 2 }),
-    ];
-    const removedCategory = sections.find((section) => section.yOffset === 3)!;
-    removedCategory.items = [
-      createItem({ id: "category-1" }),
-      createItem({ id: "category-2", yOffset: 2, xOffset: 4, width: 4 }),
-    ];
-    const removedEmptySection = sections.find((section) => section.yOffset === 4)!;
-    removedEmptySection.items = [
-      createItem({ id: "below-1", xOffset: 5 }),
-      createItem({ id: "below-2", yOffset: 1, xOffset: 1, height: 2 }),
-    ];
-    sections.push(
-      createDynamicSection({
-        id: "7",
-        parentSectionId: "3",
-        yOffset: 7,
-        height: 3,
-        items: [createItem({ id: "dynamic-1" })],
-      }),
-    );

-    const input = "3";
+    const board = new BoardMockBuilder()
+      .addLayout({ id: layoutId })
+      .addSections(createSections(initialYOffsets))
+      .addItems(createSectionItems([0, 1, 5, 6], layoutId)) // Only add items to other sections
+      .addDynamicSection(
+        new DynamicSectionMockBuilder({ id: sectionIds.dynamic })
+          .addLayout({ layoutId, parentSectionId: sectionIds.category, yOffset: 7, height: 3 })
+          .build(),
+      )
+      .addItem(new ItemMockBuilder({ id: "above-1" }).addLayout({ layoutId, sectionId: sectionIds.above }).build())
+      .addItem(
+        new ItemMockBuilder({ id: "above-2" })
+          .addLayout({ layoutId, sectionId: sectionIds.above, yOffset: 3, xOffset: 2, height: 2 })
+          .build(),
+      )
+      .addItem(
+        new ItemMockBuilder({ id: "category-1" }).addLayout({ layoutId, sectionId: sectionIds.category }).build(),
+      )
+      .addItem(
+        new ItemMockBuilder({ id: "category-2" })
+          .addLayout({ layoutId, sectionId: sectionIds.category, yOffset: 2, xOffset: 4, width: 4 })
+          .build(),
+      )
+      .addItem(
+        new ItemMockBuilder({ id: "below-1" }).addLayout({ layoutId, sectionId: sectionIds.below, xOffset: 5 }).build(),
+      )
+      .addItem(
+        new ItemMockBuilder({ id: "below-2" })
+          .addLayout({ layoutId, sectionId: sectionIds.below, yOffset: 1, xOffset: 1, height: 2 })
+          .build(),
+      )
+      .addItem(new ItemMockBuilder({ id: "dynamic-1" }).addLayout({ layoutId, sectionId: sectionIds.dynamic }).build())
+      .build();

-    const result = removeCategoryCallback({ id: input })({ sections } as never);
+    vi.spyOn(boardContext, "getBoardLayouts").mockReturnValue([layoutId]);

+    // Act
+    const result = removeCategoryCallback({ id: sectionIds.category })(board);
+
+    // Assert
    expect(result.sections.map((section) => parseInt(section.id, 10))).toEqual([0, 1, 2, 5, 6, 7]);
-    const aboveSectionResult = result.sections.find((section) => section.id === "2")!;
-    expect(aboveSectionResult.items).toEqual(
-      expect.arrayContaining([
-        createItem({ id: "above-1" }),
-        createItem({ id: "above-2", yOffset: 3, xOffset: 2, height: 2 }),
-        createItem({ id: "category-1", yOffset: 5 }),
-        createItem({ id: "category-2", yOffset: 7, xOffset: 4, width: 4 }),
-        createItem({ id: "below-1", yOffset: 15, xOffset: 5 }),
-        createItem({ id: "below-2", yOffset: 16, xOffset: 1, height: 2 }),
-      ]),
-    );
+    const aboveSectionItems = result.items.filter((item) => item.layouts[0]?.sectionId === sectionIds.above);
+    expect(aboveSectionItems.length).toBe(6);
+
+    expect(
+      aboveSectionItems
+        .map((item) => ({
+          ...item,
+          ...item.layouts[0]!,
+        }))
+        .sort((itemA, itemB) => itemA.yOffset - itemB.yOffset),
+    ).toEqual([
+      expect.objectContaining({ id: "above-1", yOffset: 0, xOffset: 0 }),
+      expect.objectContaining({ id: "above-2", yOffset: 3, xOffset: 2, height: 2 }),
+      expect.objectContaining({ id: "category-1", yOffset: 5, xOffset: 0 }),
+      expect.objectContaining({ id: "category-2", yOffset: 7, xOffset: 4, width: 4 }),
+      expect.objectContaining({ id: "below-1", yOffset: 15, xOffset: 5 }),
+      expect.objectContaining({ id: "below-2", yOffset: 16, xOffset: 1, height: 2 }),
+    ]);
+
    const dynamicSection = result.sections.find((section): section is DynamicSection => section.id === "7")!;
-    expect(dynamicSection.yOffset).toBe(12);
-    expect(dynamicSection.parentSectionId).toBe("2");
+    expect(dynamicSection.layouts.at(0)?.yOffset).toBe(12);
+    expect(dynamicSection.layouts[0]?.parentSectionId).toBe("2");
  });
 });

-const createItem = (item: Partial<{ id: string; width: number; height: number; yOffset: number; xOffset: number }>) => {
-  return {
-    id: item.id ?? "0",
-    kind: "app",
-    options: {},
-    advancedOptions: {
-      customCssClasses: [],
-    },
-    height: item.height ?? 1,
-    width: item.width ?? 1,
-    yOffset: item.yOffset ?? 0,
-    xOffset: item.xOffset ?? 0,
-    integrationIds: [],
-  } satisfies Item;
-};
-
-const createDynamicSection = (
-  section: Partial<
-    Pick<DynamicSection, "id" | "height" | "width" | "yOffset" | "xOffset" | "parentSectionId" | "items">
-  >,
-) => {
-  return {
-    id: section.id ?? "0",
-    kind: "dynamic",
-    height: section.height ?? 1,
-    width: section.width ?? 1,
-    yOffset: section.yOffset ?? 0,
-    xOffset: section.xOffset ?? 0,
-    parentSectionId: section.parentSectionId ?? "0",
-    items: section.items ?? [],
-  } satisfies DynamicSection;
-};
-
 const createSections = (initialYOffsets: number[]) => {
-  return initialYOffsets.map((yOffset, index) => ({
-    id: yOffset.toString(),
-    kind: index % 2 === 0 ? "empty" : "category",
-    name: "Category",
-    collapsed: false,
-    yOffset,
-    xOffset: 0,
-    items: [createItem({ id: yOffset.toString() })],
-  })) satisfies Section[];
+  return initialYOffsets.map((yOffset, index) =>
+    index % 2 === 0
+      ? new EmptySectionMockBuilder({
+          id: yOffset.toString(),
+          yOffset,
+        }).build()
+      : new CategorySectionMockBuilder({
+          id: yOffset.toString(),
+          yOffset,
+        }).build(),
+  ) satisfies Section[];
+};
+
+const createSectionItems = (initialYOffsets: number[], layoutId: string) => {
+  return initialYOffsets.map((yOffset) =>
+    new ItemMockBuilder({ id: yOffset.toString() }).addLayout({ layoutId, sectionId: yOffset.toString() }).build(),
+  );
 };
@@ -3,7 +3,7 @@ import { useCallback } from "react";
 import { useUpdateBoard } from "@homarr/boards/updater";
 import { createId } from "@homarr/db/client";

-import type { CategorySection, EmptySection } from "~/app/[locale]/boards/_types";
+import type { CategorySection, EmptySection, Section } from "~/app/[locale]/boards/_types";
 import type { MoveCategoryInput } from "./actions/move-category";
 import { moveCategoryCallback } from "./actions/move-category";
 import type { RemoveCategoryInput } from "./actions/remove-category";
@@ -41,14 +41,12 @@ export const useCategoryActions = () => {
            yOffset,
            xOffset: 0,
            collapsed: false,
-            items: [],
          },
          {
            id: createId(),
            kind: "empty",
            yOffset: yOffset + 1,
            xOffset: 0,
-            items: [],
          },
          // Place sections after the new category
          ...previous.sections
@@ -60,7 +58,7 @@ export const useCategoryActions = () => {
              ...section,
              yOffset: section.yOffset + 2,
            })),
-        ],
+        ] satisfies Section[],
      }));
    },
    [updateBoard],
@@ -91,16 +89,14 @@ export const useCategoryActions = () => {
              yOffset: lastYOffset + 1,
              xOffset: 0,
              collapsed: false,
-              items: [],
            },
            {
              id: createId(),
              kind: "empty",
              yOffset: lastYOffset + 2,
              xOffset: 0,
-              items: [],
            },
-          ],
+          ] satisfies Section[],
        };
      });
    },
@@ -1,6 +1,7 @@
 import { useCallback } from "react";

 import { fetchApi } from "@homarr/api/client";
+import { getCurrentLayout, useRequiredBoard } from "@homarr/boards/context";
 import { createId } from "@homarr/db/client";
 import { useConfirmModal, useModalAction } from "@homarr/modals";
 import { useSettings } from "@homarr/settings";
@@ -16,6 +17,7 @@ export const useCategoryMenuActions = (category: CategorySection) => {
  const { openConfirmModal } = useConfirmModal();
  const { addCategory, moveCategory, removeCategory, renameCategory } = useCategoryActions();
  const t = useI18n();
+  const board = useRequiredBoard();

  const createCategoryAtYOffset = useCallback(
    (position: number) => {
@@ -102,7 +104,14 @@ export const useCategoryMenuActions = (category: CategorySection) => {

  const settings = useSettings();
  const openAllInNewTabs = useCallback(async () => {
-    const appIds = filterByItemKind(category.items, settings, "app").map((item) => {
+    const currentLayoutId = getCurrentLayout(board);
+    const appIds = filterByItemKind(
+      board.items.filter(
+        (item) => item.layouts.find((layout) => layout.layoutId === currentLayoutId)?.sectionId === category.id,
+      ),
+      settings,
+      "app",
+    ).map((item) => {
      return item.options.appId;
    });

@@ -121,7 +130,7 @@ export const useCategoryMenuActions = (category: CategorySection) => {
      });
      break;
    }
-  }, [category, t, openConfirmModal, settings]);
+  }, [category, board, t, openConfirmModal, settings]);

  return {
    addCategoryAbove,
@@ -1,16 +1,16 @@
 import { useMemo } from "react";

-import { useRequiredBoard } from "@homarr/boards/context";
+import type { GridItemHTMLElement } from "@homarr/gridstack";

-import type { DynamicSection, Item, Section } from "~/app/[locale]/boards/_types";
+import type { DynamicSectionItem, SectionItem } from "~/app/[locale]/boards/_types";
 import { BoardItemContent } from "../items/item-content";
 import { BoardDynamicSection } from "./dynamic-section";
 import { GridStackItem } from "./gridstack/gridstack-item";
 import { useSectionContext } from "./section-context";
+import { useSectionItems } from "./use-section-items";

 export const SectionContent = () => {
-  const { section, innerSections, refs } = useSectionContext();
-  const board = useRequiredBoard();
+  const { innerSections, items, refs } = useSectionContext();

  /**
   * IMPORTANT: THE ORDER OF THE BELOW ITEMS HAS TO MATCH THE ORDER OF
@@ -18,41 +18,52 @@ export const SectionContent = () => {
   * @see https://github.com/homarr-labs/homarr/pull/1770
   */
  const sortedItems = useMemo(() => {
-    return [
-      ...section.items.map((item) => ({ ...item, type: "item" as const })),
-      ...innerSections.map((section) => ({ ...section, type: "section" as const })),
-    ].sort((itemA, itemB) => {
+    return [...items, ...innerSections].sort((itemA, itemB) => {
      if (itemA.yOffset === itemB.yOffset) {
        return itemA.xOffset - itemB.xOffset;
      }

      return itemA.yOffset - itemB.yOffset;
    });
-  }, [section.items, innerSections]);
+  }, [items, innerSections]);

  return (
    <>
      {sortedItems.map((item) => (
-        <GridStackItem
-          key={item.id}
-          innerRef={refs.items.current[item.id]}
-          width={item.width}
-          height={item.height}
-          xOffset={item.xOffset}
-          yOffset={item.yOffset}
-          kind={item.kind}
-          id={item.id}
-          type={item.type}
-          minWidth={item.type === "section" ? getMinSize("x", item.items, board.sections, item.id) : undefined}
-          minHeight={item.type === "section" ? getMinSize("y", item.items, board.sections, item.id) : undefined}
-        >
-          {item.type === "item" ? <BoardItemContent item={item} /> : <BoardDynamicSection section={item} />}
-        </GridStackItem>
+        <Item key={item.id} item={item} innerRef={refs.items.current[item.id]} />
      ))}
    </>
  );
 };

+interface ItemProps {
+  item: DynamicSectionItem | SectionItem;
+  innerRef: React.RefObject<GridItemHTMLElement | null> | undefined;
+}
+
+const Item = ({ item, innerRef }: ItemProps) => {
+  const minWidth = useMinSize(item, "x");
+  const minHeight = useMinSize(item, "y");
+
+  return (
+    <GridStackItem
+      key={item.id}
+      innerRef={innerRef}
+      width={item.width}
+      height={item.height}
+      xOffset={item.xOffset}
+      yOffset={item.yOffset}
+      kind={item.kind}
+      id={item.id}
+      type={item.type}
+      minWidth={minWidth}
+      minHeight={minHeight}
+    >
+      {item.type === "item" ? <BoardItemContent item={item} /> : <BoardDynamicSection section={item} />}
+    </GridStackItem>
+  );
+};
+
 /**
 * Calculates the min width / height of a section by taking the maximum of
 * the sum of the offset and size of all items and dynamic sections inside.
@@ -62,16 +73,13 @@ export const SectionContent = () => {
 * @param parentSectionId the id of the section we want to calculate the min size for
 * @returns the min size
 */
-const getMinSize = (direction: "x" | "y", items: Item[], sections: Section[], parentSectionId: string) => {
+const useMinSize = (item: DynamicSectionItem | SectionItem, direction: "x" | "y") => {
+  const { items, innerSections } = useSectionItems(item.id);
+  if (item.type === "item") return undefined;
+
  const size = direction === "x" ? "width" : "height";
  return Math.max(
    ...items.map((item) => item[`${direction}Offset`] + item[size]),
-    ...sections
-      .filter(
-        (section): section is DynamicSection =>
-          section.kind === "dynamic" && section.parentSectionId === parentSectionId,
-      )
-      .map((item) => item[`${direction}Offset`] + item[size]),
-    1, // Minimum size
+    ...innerSections.map((item) => item[`${direction}Offset`] + item[size]),
  );
 };
@@ -1,18 +1,21 @@
 import { Box, Card } from "@mantine/core";

-import { useRequiredBoard } from "@homarr/boards/context";
+import { useCurrentLayout, useRequiredBoard } from "@homarr/boards/context";

-import type { DynamicSection } from "~/app/[locale]/boards/_types";
+import type { DynamicSectionItem } from "~/app/[locale]/boards/_types";
 import { BoardDynamicSectionMenu } from "./dynamic/dynamic-menu";
 import { GridStack } from "./gridstack/gridstack";
 import classes from "./item.module.css";

 interface Props {
-  section: DynamicSection;
+  section: DynamicSectionItem;
 }

 export const BoardDynamicSection = ({ section }: Props) => {
  const board = useRequiredBoard();
+  const currentLayoutId = useCurrentLayout();
+  const options = section.options;
+
  return (
    <Box className="grid-stack-item-content">
      <Card
@@ -24,12 +27,14 @@ export const BoardDynamicSection = ({ section }: Props) => {
          root: {
            "--opacity": board.opacity / 100,
            overflow: "hidden",
+            "--border-color": options.borderColor !== "" ? options.borderColor : undefined,
          },
        }}
        radius={board.itemRadius}
        p={0}
      >
-        <GridStack section={section} className="min-row" />
+        {/* Use unique key by layout to reinitialize gridstack */}
+        <GridStack key={`${currentLayoutId}-${section.id}`} section={section} className="min-row" />
      </Card>
      <BoardDynamicSectionMenu section={section} />
    </Box>
@@ -0,0 +1,54 @@
+import { getBoardLayouts } from "@homarr/boards/context";
+import { createId } from "@homarr/db/client";
+
+import type { Board, DynamicSection, DynamicSectionLayout, EmptySection } from "~/app/[locale]/boards/_types";
+import { getFirstEmptyPosition } from "~/components/board/items/actions/empty-position";
+import { getSectionElements } from "~/components/board/items/actions/section-elements";
+
+export const addDynamicSectionCallback = () => (board: Board) => {
+  const firstSection = board.sections
+    .filter((section) => section.kind === "empty")
+    .sort((sectionA, sectionB) => sectionA.yOffset - sectionB.yOffset)
+    .at(0);
+
+  if (!firstSection) return board;
+
+  const newSection = {
+    id: createId(),
+    kind: "dynamic",
+    options: {
+      borderColor: "",
+    },
+    layouts: createDynamicSectionLayouts(board, firstSection),
+  } satisfies DynamicSection;
+
+  return {
+    ...board,
+    sections: board.sections.concat(newSection as unknown as DynamicSection),
+  };
+};
+
+const createDynamicSectionLayouts = (board: Board, currentSection: EmptySection): DynamicSectionLayout[] => {
+  const layouts = getBoardLayouts(board);
+
+  return layouts.map((layoutId) => {
+    const boardLayout = board.layouts.find((layout) => layout.id === layoutId);
+    const elements = getSectionElements(board, { sectionId: currentSection.id, layoutId });
+
+    const emptyPosition = boardLayout
+      ? getFirstEmptyPosition(elements, boardLayout.columnCount)
+      : { xOffset: 0, yOffset: 0 };
+
+    if (!emptyPosition) {
+      throw new Error("Your board is full");
+    }
+
+    return {
+      width: 1,
+      height: 1,
+      ...emptyPosition,
+      parentSectionId: currentSection.id,
+      layoutId,
+    };
+  });
+};
@@ -0,0 +1,62 @@
+import type { Board, DynamicSection } from "~/app/[locale]/boards/_types";
+
+export interface RemoveDynamicSectionInput {
+  id: string;
+}
+
+export const removeDynamicSectionCallback =
+  ({ id }: RemoveDynamicSectionInput) =>
+  (board: Board): Board => {
+    const sectionToRemove = board.sections.find(
+      (section): section is DynamicSection => section.id === id && section.kind === "dynamic",
+    );
+    if (!sectionToRemove) return board;
+
+    return {
+      ...board,
+      sections: board.sections
+        .filter((section) => section.id !== id)
+        .map((section) => {
+          if (section.kind !== "dynamic") return section;
+
+          // Change xOffset and yOffset of sections that were below the removed section and set parentSectionId to the parent of the removed section
+          return {
+            ...section,
+            layouts: section.layouts.map((layout) => {
+              if (layout.parentSectionId !== sectionToRemove.id) return layout;
+
+              const removedSectionLayout = sectionToRemove.layouts.find(
+                (layoutToRemove) => layoutToRemove.layoutId === layout.layoutId,
+              );
+              if (!removedSectionLayout) throw new Error("Layout not found");
+
+              return {
+                ...layout,
+                xOffset: layout.xOffset + removedSectionLayout.xOffset,
+                yOffset: layout.yOffset + removedSectionLayout.yOffset,
+                parentSectionId: removedSectionLayout.parentSectionId,
+              };
+            }),
+          };
+        }),
+      // Move all items in dynamic section to parent of the removed section
+      items: board.items.map((item) => ({
+        ...item,
+        layouts: item.layouts.map((layout) => {
+          if (layout.sectionId !== sectionToRemove.id) return layout;
+
+          const removedSectionLayout = sectionToRemove.layouts.find(
+            (layoutToRemove) => layoutToRemove.layoutId === layout.layoutId,
+          );
+          if (!removedSectionLayout) throw new Error("Layout not found");
+
+          return {
+            ...layout,
+            xOffset: layout.xOffset + removedSectionLayout.xOffset,
+            yOffset: layout.yOffset + removedSectionLayout.yOffset,
+            sectionId: removedSectionLayout.parentSectionId,
+          };
+        }),
+      })),
+    };
+  };
@@ -1,89 +1,45 @@
 import { useCallback } from "react";
+import type { z } from "zod";

 import { useUpdateBoard } from "@homarr/boards/updater";
-import { createId } from "@homarr/db/client";
+import type { dynamicSectionOptionsSchema } from "@homarr/validation";

-import type { DynamicSection, EmptySection } from "~/app/[locale]/boards/_types";
+import { addDynamicSectionCallback } from "./actions/add-dynamic-section";
+import type { RemoveDynamicSectionInput } from "./actions/remove-dynamic-section";
+import { removeDynamicSectionCallback } from "./actions/remove-dynamic-section";

-interface RemoveDynamicSection {
-  id: string;
+interface UpdateDynamicOptions {
+  itemId: string;
+  newOptions: z.infer<typeof dynamicSectionOptionsSchema>;
 }

 export const useDynamicSectionActions = () => {
  const { updateBoard } = useUpdateBoard();

  const addDynamicSection = useCallback(() => {
-    updateBoard((previous) => {
-      const lastSection = previous.sections
-        .filter((section): section is EmptySection => section.kind === "empty")
-        .sort((sectionA, sectionB) => sectionB.yOffset - sectionA.yOffset)[0];
-
-      if (!lastSection) return previous;
-
-      const newSection = {
-        id: createId(),
-        kind: "dynamic",
-        height: 1,
-        width: 1,
-        items: [],
-        parentSectionId: lastSection.id,
-        // We omit xOffset and yOffset because gridstack will use the first available position
-      } satisfies Omit<DynamicSection, "xOffset" | "yOffset">;
-
-      return {
-        ...previous,
-        sections: previous.sections.concat(newSection as unknown as DynamicSection),
-      };
-    });
+    updateBoard(addDynamicSectionCallback());
  }, [updateBoard]);

+  const updateDynamicSection = useCallback(
+    ({ itemId, newOptions }: UpdateDynamicOptions) => {
+      updateBoard((previous) => ({
+        ...previous,
+        sections: previous.sections.map((item) => (item.id !== itemId ? item : { ...item, options: newOptions })),
+      }));
+    },
+    [updateBoard],
+  );
+
  const removeDynamicSection = useCallback(
-    ({ id }: RemoveDynamicSection) => {
-      updateBoard((previous) => {
-        const sectionToRemove = previous.sections.find(
-          (section): section is DynamicSection => section.id === id && section.kind === "dynamic",
-        );
-        if (!sectionToRemove) return previous;
-
-        return {
-          ...previous,
-          sections: previous.sections
-            .filter((section) => section.id !== id)
-            .map((section) => {
-              if (section.id === sectionToRemove.parentSectionId) {
-                return {
-                  ...section,
-                  // Add items from the removed section to the parent section
-                  items: section.items.concat(
-                    sectionToRemove.items.map((item) => ({
-                      ...item,
-                      xOffset: sectionToRemove.xOffset + item.xOffset,
-                      yOffset: sectionToRemove.yOffset + item.yOffset,
-                    })),
-                  ),
-                };
-              }
-
-              if (section.kind === "dynamic" && section.parentSectionId === sectionToRemove.id) {
-                // Change xOffset and yOffset of sections that were below the removed section and set parentSectionId to the parent of the removed section
-                return {
-                  ...section,
-                  parentSectionId: sectionToRemove.parentSectionId,
-                  yOffset: section.yOffset + sectionToRemove.yOffset,
-                  xOffset: section.xOffset + sectionToRemove.xOffset,
-                };
-              }
-
-              return section;
-            }),
-        };
-      });
+    (input: RemoveDynamicSectionInput) => {
+      updateBoard(removeDynamicSectionCallback(input));
    },
    [updateBoard],
  );

  return {
    addDynamicSection,
+    updateDynamicSection,
    removeDynamicSection,
  };
 };
@@ -0,0 +1,63 @@
+"use client";
+
+import { Button, CloseButton, ColorInput, Group, Stack, useMantineTheme } from "@mantine/core";
+import type { z } from "zod";
+
+import { useZodForm } from "@homarr/form";
+import { createModal } from "@homarr/modals";
+import { useI18n } from "@homarr/translation/client";
+import { dynamicSectionOptionsSchema } from "@homarr/validation";
+
+interface ModalProps {
+  value: z.infer<typeof dynamicSectionOptionsSchema>;
+  onSuccessfulEdit: (value: z.infer<typeof dynamicSectionOptionsSchema>) => void;
+}
+
+export const DynamicSectionEditModal = createModal<ModalProps>(({ actions, innerProps }) => {
+  const t = useI18n();
+  const theme = useMantineTheme();
+
+  const form = useZodForm(dynamicSectionOptionsSchema, {
+    mode: "controlled",
+    initialValues: { ...innerProps.value },
+  });
+
+  return (
+    <form
+      onSubmit={form.onSubmit((values) => {
+        innerProps.onSuccessfulEdit(values);
+        actions.closeModal();
+      })}
+    >
+      <Stack>
+        <ColorInput
+          label={t("section.dynamic.option.borderColor.label")}
+          format="hex"
+          swatches={Object.values(theme.colors).map((color) => color[6])}
+          rightSection={
+            <CloseButton
+              onClick={() => form.setFieldValue("borderColor", "")}
+              style={{ display: form.getInputProps("borderColor").value ? undefined : "none" }}
+            />
+          }
+          {...form.getInputProps("borderColor")}
+        />
+        <Group justify="end">
+          <Group justify="end" w={{ base: "100%", xs: "auto" }}>
+            <Button onClick={actions.closeModal} variant="subtle" color="gray">
+              {t("common.action.cancel")}
+            </Button>
+            <Button type="submit" color="teal">
+              {t("common.action.saveChanges")}
+            </Button>
+          </Group>
+        </Group>
+      </Stack>
+    </form>
+  );
+}).withOptions({
+  defaultTitle(t) {
+    return t("item.edit.title");
+  },
+  size: "lg",
+});
@@ -1,22 +1,37 @@
 import { ActionIcon, Menu } from "@mantine/core";
-import { IconDotsVertical, IconTrash } from "@tabler/icons-react";
+import { IconDotsVertical, IconPencil, IconTrash } from "@tabler/icons-react";

 import { useEditMode } from "@homarr/boards/edit-mode";
-import { useConfirmModal } from "@homarr/modals";
+import { useConfirmModal, useModalAction } from "@homarr/modals";
 import { useI18n, useScopedI18n } from "@homarr/translation/client";

-import type { DynamicSection } from "~/app/[locale]/boards/_types";
+import type { DynamicSectionItem } from "~/app/[locale]/boards/_types";
 import { useDynamicSectionActions } from "./dynamic-actions";
+import { DynamicSectionEditModal } from "./dynamic-edit-modal";

-export const BoardDynamicSectionMenu = ({ section }: { section: DynamicSection }) => {
+export const BoardDynamicSectionMenu = ({ section }: { section: DynamicSectionItem }) => {
  const t = useI18n();
  const tDynamic = useScopedI18n("section.dynamic");
-  const { removeDynamicSection } = useDynamicSectionActions();
+  const tItem = useScopedI18n("item");
+  const { openModal } = useModalAction(DynamicSectionEditModal);
+  const { updateDynamicSection, removeDynamicSection } = useDynamicSectionActions();
  const { openConfirmModal } = useConfirmModal();
  const [isEditMode] = useEditMode();

  if (!isEditMode) return null;

+  const openEditModal = () => {
+    openModal({
+      value: section.options,
+      onSuccessfulEdit: (options) => {
+        updateDynamicSection({
+          itemId: section.id,
+          newOptions: options,
+        });
+      },
+    });
+  };
+
  const openRemoveModal = () => {
    openConfirmModal({
      title: tDynamic("remove.title"),
@@ -35,6 +50,11 @@ export const BoardDynamicSectionMenu = ({ section }: { section: DynamicSection }
        </ActionIcon>
      </Menu.Target>
      <Menu.Dropdown miw={128}>
+        <Menu.Label>{tItem("menu.label.settings")}</Menu.Label>
+        <Menu.Item leftSection={<IconPencil size={16} />} onClick={openEditModal}>
+          {tItem("action.edit")}
+        </Menu.Item>
+        <Menu.Divider />
        <Menu.Label c="red.6">{t("common.dangerZone")}</Menu.Label>
        <Menu.Item c="red.6" leftSection={<IconTrash size={16} />} onClick={openRemoveModal}>
          {tDynamic("action.remove")}
@@ -11,14 +11,15 @@ interface Props {
 }

 export const BoardEmptySection = ({ section }: Props) => {
-  const { itemIds } = useSectionItems(section);
+  const { items, innerSections } = useSectionItems(section.id);
+  const totalLength = items.length + innerSections.length;
  const [isEditMode] = useEditMode();

  return (
    <GridStack
      section={section}
      style={{ transitionDuration: "0s" }}
-      className={combineClasses("min-row", itemIds.length > 0 || isEditMode ? undefined : "grid-stack-empty-wrapper")}
+      className={combineClasses("min-row", totalLength > 0 || isEditMode ? undefined : "grid-stack-empty-wrapper")}
    />
  );
 };
@@ -4,23 +4,24 @@ import type { BoxProps } from "@mantine/core";
 import { Box } from "@mantine/core";
 import combineClasses from "clsx";

-import type { Section } from "~/app/[locale]/boards/_types";
+import type { DynamicSectionItem, Section } from "~/app/[locale]/boards/_types";
 import { SectionContent } from "../content";
 import { SectionProvider } from "../section-context";
 import { useSectionItems } from "../use-section-items";
 import { useGridstack } from "./use-gridstack";

 interface Props extends BoxProps {
-  section: Section;
+  section: Exclude<Section, { kind: "dynamic" }> | DynamicSectionItem;
 }

 export const GridStack = ({ section, ...props }: Props) => {
-  const { itemIds, innerSections } = useSectionItems(section);
+  const { items, innerSections } = useSectionItems(section.id);
+  const itemIds = [...items, ...innerSections].map((item) => item.id);

  const { refs } = useGridstack(section, itemIds);

  return (
-    <SectionProvider value={{ section, innerSections, refs }}>
+    <SectionProvider value={{ section, items, innerSections, refs }}>
      <Box
        {...props}
        data-kind={section.kind}
@@ -2,7 +2,7 @@ import type { RefObject } from "react";
 import { createRef, useCallback, useEffect, useRef } from "react";
 import { useElementSize } from "@mantine/hooks";

-import { useRequiredBoard } from "@homarr/boards/context";
+import { useCurrentLayout, useRequiredBoard } from "@homarr/boards/context";
 import { useEditMode } from "@homarr/boards/edit-mode";
 import type { GridHTMLElement, GridItemHTMLElement, GridStack, GridStackNode } from "@homarr/gridstack";

@@ -68,10 +68,13 @@ export const useGridstack = (section: Omit<Section, "items">, itemIds: string[])

  const board = useRequiredBoard();

+  const currentLayoutId = useCurrentLayout();
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  const currentLayout = board.layouts.find((layout) => layout.id === currentLayoutId)!;
  const columnCount =
    section.kind === "dynamic" && "width" in section && typeof section.width === "number"
      ? section.width
-      : board.columnCount;
+      : currentLayout.columnCount;

  const itemRefKeys = Object.keys(itemRefs.current);
  // define items in itemRefs for easy access and reference to items
@@ -1,5 +1,6 @@
 import { useCallback } from "react";

+import { getCurrentLayout } from "@homarr/boards/context";
 import { useUpdateBoard } from "@homarr/boards/updater";

 interface MoveAndResizeInnerSection {
@@ -28,9 +29,19 @@ export const useSectionActions = () => {
        sections: previous.sections.map((section) => {
          // Return same section if section is not the one we're moving
          if (section.id !== innerSectionId) return section;
+          if (section.kind !== "dynamic") return section;
+
+          const currentLayout = getCurrentLayout(previous);
+
          return {
            ...section,
-            ...positionProps,
+            layouts: section.layouts.map((layout) => {
+              if (layout.layoutId !== currentLayout) return layout;
+              return {
+                ...layout,
+                ...positionProps,
+              };
+            }),
          };
        }),
      }));
@@ -46,10 +57,20 @@ export const useSectionActions = () => {
          sections: previous.sections.map((section) => {
            // Return section without changes when not the section we're moving
            if (section.id !== innerSectionId) return section;
+            if (section.kind !== "dynamic") return section;
+
+            const currentLayout = getCurrentLayout(previous);
+
            return {
              ...section,
-              ...positionProps,
-              parentSectionId: sectionId,
+              layouts: section.layouts.map((layout) => {
+                if (layout.layoutId !== currentLayout) return layout;
+                return {
+                  ...layout,
+                  ...positionProps,
+                  parentSectionId: sectionId,
+                };
+              }),
            };
          }),
        };
@@ -1,11 +1,12 @@
 import { createContext, useContext } from "react";

-import type { Section } from "~/app/[locale]/boards/_types";
+import type { DynamicSectionItem, Section, SectionItem } from "~/app/[locale]/boards/_types";
 import type { UseGridstackRefs } from "./gridstack/use-gridstack";

 interface SectionContextProps {
-  section: Section;
-  innerSections: Exclude<Section, { kind: "category" } | { kind: "empty" }>[];
+  section: Exclude<Section, { kind: "dynamic" }> | DynamicSectionItem;
+  innerSections: DynamicSectionItem[];
+  items: SectionItem[];
  refs: UseGridstackRefs;
 }

@@ -1,16 +1,53 @@
-import { useRequiredBoard } from "@homarr/boards/context";
+import { useMemo } from "react";

-import type { Section } from "~/app/[locale]/boards/_types";
+import { useCurrentLayout, useRequiredBoard } from "@homarr/boards/context";

-export const useSectionItems = (section: Section) => {
+import type { DynamicSectionItem, SectionItem } from "~/app/[locale]/boards/_types";
+
+export const useSectionItems = (sectionId: string): { innerSections: DynamicSectionItem[]; items: SectionItem[] } => {
  const board = useRequiredBoard();
-  const innerSections = board.sections.filter(
-    (innerSection): innerSection is Exclude<Section, { kind: "category" } | { kind: "empty" }> =>
-      innerSection.kind === "dynamic" && innerSection.parentSectionId === section.id,
+  const currentLayoutId = useCurrentLayout();
+
+  const innerSections = useMemo(
+    () =>
+      board.sections
+        .filter((innerSection) => innerSection.kind === "dynamic")
+        .map(({ layouts, ...innerSection }) => {
+          const layout = layouts.find((layout) => layout.layoutId === currentLayoutId);
+
+          if (!layout) return null;
+
+          return {
+            ...layout,
+            ...innerSection,
+            type: "section" as const,
+          };
+        })
+        .filter((item) => item !== null)
+        .filter((innerSection) => innerSection.parentSectionId === sectionId),
+    [board.sections, currentLayoutId, sectionId],
+  );
+
+  const items = useMemo(
+    () =>
+      board.items
+        .map(({ layouts, ...item }) => {
+          const layout = layouts.find((layout) => layout.layoutId === currentLayoutId);
+          if (!layout) return null;
+
+          return {
+            ...layout,
+            ...item,
+            type: "item" as const,
+          };
+        })
+        .filter((item) => item !== null)
+        .filter((item) => item.sectionId === sectionId),
+    [board.items, currentLayoutId, sectionId],
  );

  return {
    innerSections,
-    itemIds: section.items.map((item) => item.id).concat(innerSections.map((section) => section.id)),
+    items,
  };
 };
@@ -2,7 +2,7 @@
  "name": "@homarr/tasks",
  "version": "0.1.0",
  "private": true,
-  "license": "MIT",
+  "license": "Apache-2.0",
  "type": "module",
  "exports": {
    ".": "./src/index.ts"
@@ -38,17 +38,17 @@
    "dayjs": "^1.11.13",
    "dotenv": "^16.4.7",
    "superjson": "2.2.2",
-    "undici": "7.3.0"
+    "undici": "7.4.0"
  },
  "devDependencies": {
    "@homarr/eslint-config": "workspace:^0.2.0",
    "@homarr/prettier-config": "workspace:^0.1.0",
    "@homarr/tsconfig": "workspace:^0.1.0",
-    "@types/node": "^22.13.4",
+    "@types/node": "^22.13.9",
    "dotenv-cli": "^8.0.0",
-    "eslint": "^9.20.1",
-    "prettier": "^3.5.1",
+    "eslint": "^9.21.0",
+    "prettier": "^3.5.3",
    "tsx": "4.19.3",
-    "typescript": "^5.7.3"
+    "typescript": "^5.8.2"
  }
 }
@@ -2,7 +2,7 @@
  "name": "@homarr/websocket",
  "version": "0.1.0",
  "private": true,
-  "license": "MIT",
+  "license": "Apache-2.0",
  "type": "module",
  "main": "./src/main.ts",
  "types": "./src/main.ts",
@@ -33,9 +33,9 @@
    "@homarr/eslint-config": "workspace:^0.2.0",
    "@homarr/prettier-config": "workspace:^0.1.0",
    "@homarr/tsconfig": "workspace:^0.1.0",
-    "@types/ws": "^8.5.14",
-    "eslint": "^9.20.1",
-    "prettier": "^3.5.1",
-    "typescript": "^5.7.3"
+    "@types/ws": "^8.18.0",
+    "eslint": "^9.21.0",
+    "prettier": "^3.5.3",
+    "typescript": "^5.8.2"
  }
 }
@@ -1 +1,2 @@
-docker run -p 7575:7575 homarr:latest
+:: Please do not run this command in production. It is only for local testing.
+docker run -p 7575:7575 -e SECRET_ENCRYPTION_KEY=0000000000000000000000000000000000000000000000000000000000000000 homarr:latest
@@ -1,6 +1,6 @@
 {
  "name": "homarr",
-  "version": "1.7.0",
+  "version": "1.10.0",
  "private": true,
  "scripts": {
    "build": "cross-env CI=true turbo build",
@@ -38,22 +38,22 @@
    "@semantic-release/github": "^11.0.1",
    "@semantic-release/npm": "^12.0.1",
    "@semantic-release/release-notes-generator": "^14.0.3",
-    "@turbo/gen": "^2.4.2",
+    "@turbo/gen": "^2.4.4",
    "@vitejs/plugin-react": "^4.3.4",
-    "@vitest/coverage-v8": "^3.0.6",
-    "@vitest/ui": "^3.0.6",
+    "@vitest/coverage-v8": "^3.0.8",
+    "@vitest/ui": "^3.0.8",
    "conventional-changelog-conventionalcommits": "^8.0.0",
    "cross-env": "^7.0.3",
    "jsdom": "^26.0.0",
-    "prettier": "^3.5.1",
+    "prettier": "^3.5.3",
    "semantic-release": "^24.2.3",
    "testcontainers": "^10.18.0",
-    "turbo": "^2.4.2",
-    "typescript": "^5.7.3",
+    "turbo": "^2.4.4",
+    "typescript": "^5.8.2",
    "vite-tsconfig-paths": "^5.1.4",
-    "vitest": "^3.0.6"
+    "vitest": "^3.0.8"
  },
-  "packageManager": "pnpm@10.4.1",
+  "packageManager": "pnpm@10.5.2",
  "engines": {
    "node": ">=22.14.0"
  },
@@ -71,7 +71,7 @@
    ],
    "allowNonAppliedPatches": true,
    "overrides": {
-      "proxmox-api>undici": "7.3.0"
+      "proxmox-api>undici": "7.4.0"
    },
    "patchedDependencies": {
      "pretty-print-error": "patches/pretty-print-error.patch"
@@ -2,7 +2,7 @@
  "name": "@homarr/analytics",
  "version": "0.1.0",
  "private": true,
-  "license": "MIT",
+  "license": "Apache-2.0",
  "type": "module",
  "exports": {
    ".": "./index.ts"
@@ -32,7 +32,7 @@
    "@homarr/eslint-config": "workspace:^0.2.0",
    "@homarr/prettier-config": "workspace:^0.1.0",
    "@homarr/tsconfig": "workspace:^0.1.0",
-    "eslint": "^9.20.1",
-    "typescript": "^5.7.3"
+    "eslint": "^9.21.0",
+    "typescript": "^5.8.2"
  }
 }
@@ -36,7 +36,7 @@ const sendWidgetDataAsync = async (umamiInstance: Umami, analyticsSettings: type
  if (!analyticsSettings.enableWidgetData) {
    return;
  }
-  const widgetCount = (await db.select({ count: count(items.id) }).from(items))[0]?.count ?? 0;
+  const widgetCount = await db.$count(items);

  const response = await umamiInstance.track("server-widget-data", {
    countWidgets: widgetCount,
@@ -52,7 +52,7 @@ const sendUserDataAsync = async (umamiInstance: Umami, analyticsSettings: typeof
  if (!analyticsSettings.enableUserData) {
    return;
  }
-  const userCount = (await db.select({ count: count(users.id) }).from(users))[0]?.count ?? 0;
+  const userCount = await db.$count(users);

  const response = await umamiInstance.track("server-user-data", {
    countUsers: userCount,
@@ -2,7 +2,7 @@
  "name": "@homarr/api",
  "version": "0.1.0",
  "private": true,
-  "license": "MIT",
+  "license": "Apache-2.0",
  "type": "module",
  "exports": {
    ".": "./src/index.ts",
@@ -56,8 +56,8 @@
    "@homarr/eslint-config": "workspace:^0.2.0",
    "@homarr/prettier-config": "workspace:^0.1.0",
    "@homarr/tsconfig": "workspace:^0.1.0",
-    "eslint": "^9.20.1",
-    "prettier": "^3.5.1",
-    "typescript": "^5.7.3"
+    "eslint": "^9.21.0",
+    "prettier": "^3.5.3",
+    "typescript": "^5.8.2"
  }
 }
@@ -37,15 +37,7 @@ export const createOneIntegrationMiddleware = <TKind extends IntegrationKind>(
        userPermissions: true,
        items: {
          with: {
-            item: {
-              with: {
-                section: {
-                  columns: {
-                    boardId: true,
-                  },
-                },
-              },
-            },
+            item: true,
          },
        },
      },
@@ -107,15 +99,7 @@ export const createManyIntegrationMiddleware = <TKind extends IntegrationKind>(
              secrets: true,
              items: {
                with: {
-                  item: {
-                    with: {
-                      section: {
-                        columns: {
-                          boardId: true,
-                        },
-                      },
-                    },
-                  },
+                  item: true,
                },
              },
              userPermissions: true,
@@ -56,7 +56,11 @@ export const appRouter = createTRPCRouter({
    }),
  selectable: protectedProcedure
    .input(z.void())
-    .output(z.array(selectAppSchema.pick({ id: true, name: true, iconUrl: true, href: true, description: true })))
+    .output(
+      z.array(
+        selectAppSchema.pick({ id: true, name: true, iconUrl: true, href: true, pingUrl: true, description: true }),
+      ),
+    )
    .meta({
      openapi: {
        method: "GET",
@@ -73,6 +77,7 @@ export const appRouter = createTRPCRouter({
          iconUrl: true,
          description: true,
          href: true,
+          pingUrl: true,
        },
        orderBy: asc(apps.name),
      });
@@ -121,6 +126,7 @@ export const appRouter = createTRPCRouter({
        description: input.description,
        iconUrl: input.iconUrl,
        href: input.href,
+        pingUrl: input.pingUrl === "" ? null : input.pingUrl,
      });

      return { appId: id };
@@ -164,6 +170,7 @@ export const appRouter = createTRPCRouter({
          description: input.description,
          iconUrl: input.iconUrl,
          href: input.href,
+          pingUrl: input.pingUrl === "" ? null : input.pingUrl,
        })
        .where(eq(apps.id, input.id));
    }),
@@ -21,21 +21,16 @@ const getAllAppIdsOnPublicBoardsAsync = async () => {
  const itemsWithApps = await db.query.items.findMany({
    where: or(eq(items.kind, "app"), eq(items.kind, "bookmarks")),
    with: {
-      section: {
-        columns: {}, // Nothing
-        with: {
-          board: {
-            columns: {
-              isPublic: true,
-            },
-          },
+      board: {
+        columns: {
+          isPublic: true,
        },
      },
    },
  });

  return itemsWithApps
-    .filter((item) => item.section.board.isPublic)
+    .filter((item) => item.board.isPublic)
    .flatMap((item) => {
      if (item.kind === "app") {
        const parsedOptions = SuperJSON.parse<WidgetComponentProps<"app">["options"]>(item.options);
@@ -0,0 +1,186 @@
+export interface GridAlgorithmItem {
+  id: string;
+  type: "item" | "section";
+  width: number;
+  height: number;
+  xOffset: number;
+  yOffset: number;
+  sectionId: string;
+}
+
+interface GridAlgorithmInput {
+  items: GridAlgorithmItem[];
+  width: number;
+  previousWidth: number;
+  sectionId: string;
+}
+
+interface GridAlgorithmOutput {
+  height: number;
+  items: GridAlgorithmItem[];
+}
+
+export const generateResponsiveGridFor = ({
+  items,
+  previousWidth,
+  width,
+  sectionId,
+}: GridAlgorithmInput): GridAlgorithmOutput => {
+  const itemsOfCurrentSection = items
+    .filter((item) => item.sectionId === sectionId)
+    .sort((itemA, itemB) =>
+      itemA.yOffset === itemB.yOffset ? itemA.xOffset - itemB.xOffset : itemA.yOffset - itemB.yOffset,
+    );
+  const normalizedItems = normalizeItems(itemsOfCurrentSection, width);
+
+  if (itemsOfCurrentSection.length === 0) {
+    return {
+      height: 0,
+      items: [],
+    };
+  }
+
+  const newItems: GridAlgorithmItem[] = [];
+
+  // Fix height of dynamic sections
+  const dynamicSectionHeightMap = new Map<string, number>();
+  const dynamicSectionsOfCurrentSection = normalizedItems.filter((item) => item.type === "section");
+  for (const dynamicSection of dynamicSectionsOfCurrentSection) {
+    const result = generateResponsiveGridFor({
+      items,
+      previousWidth: dynamicSection.previousWidth,
+      width: dynamicSection.width,
+      sectionId: dynamicSection.id,
+    });
+    newItems.push(...result.items);
+    dynamicSectionHeightMap.set(dynamicSection.id, result.height);
+  }
+
+  // Return same positions for items in the current section
+  if (width >= previousWidth) {
+    return {
+      height: Math.max(...itemsOfCurrentSection.map((item) => item.yOffset + item.height)),
+      items: newItems.concat(normalizedItems),
+    };
+  }
+
+  const occupied2d: boolean[][] = [];
+
+  for (const item of normalizedItems) {
+    const itemWithHeight = {
+      ...item,
+      height: item.type === "section" ? Math.max(dynamicSectionHeightMap.get(item.id) ?? 1, item.height) : item.height,
+    };
+    const position = nextFreeSpot(occupied2d, itemWithHeight, width);
+    if (!position) throw new Error("No free spot available");
+
+    addItemToOccupied(occupied2d, itemWithHeight, position, width);
+    newItems.push({
+      ...itemWithHeight,
+      xOffset: position.x,
+      yOffset: position.y,
+    });
+  }
+
+  return {
+    height: occupied2d.length,
+    items: newItems,
+  };
+};
+
+/**
+ * Reduces the width of the items to fit the new column count.
+ * @param items items to normalize
+ * @param columnCount new column count
+ */
+const normalizeItems = (items: GridAlgorithmItem[], columnCount: number) => {
+  return items.map((item) => ({ ...item, previousWidth: item.width, width: Math.min(columnCount, item.width) }));
+};
+
+/**
+ * Adds the item to the occupied spots.
+ * @param occupied2d array of occupied spots
+ * @param item item to place
+ * @param position position to place the item
+ */
+const addItemToOccupied = (
+  occupied2d: boolean[][],
+  item: GridAlgorithmItem,
+  position: { x: number; y: number },
+  columnCount: number,
+) => {
+  for (let yOffset = 0; yOffset < item.height; yOffset++) {
+    let row = occupied2d[position.y + yOffset];
+    if (!row) {
+      addRow(occupied2d, columnCount);
+      // After adding it, it must exist
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      row = occupied2d[position.y + yOffset]!;
+    }
+
+    for (let xOffset = 0; xOffset < item.width; xOffset++) {
+      row[position.x + xOffset] = true;
+    }
+  }
+};
+
+/**
+ * Adds a new row to the grid.
+ * @param occupied2d array of occupied spots
+ * @param columnCount column count of section
+ */
+const addRow = (occupied2d: boolean[][], columnCount: number) => {
+  occupied2d.push(new Array<boolean>(columnCount).fill(false));
+};
+
+/**
+ * Searches for the next free spot in the grid.
+ * @param occupied2d array of occupied spots
+ * @param item item to place
+ * @param columnCount column count of section
+ * @returns the position of the next free spot or null if no spot is available
+ */
+const nextFreeSpot = (occupied2d: boolean[][], item: GridAlgorithmItem, columnCount: number) => {
+  for (let offsetY = 0; offsetY < 99999; offsetY++) {
+    for (let offsetX = 0; offsetX < columnCount; offsetX++) {
+      if (hasHorizontalSpace(columnCount, item, offsetX) && isFree(occupied2d, item, { x: offsetX, y: offsetY })) {
+        return { x: offsetX, y: offsetY };
+      }
+    }
+  }
+
+  return null;
+};
+
+/**
+ * Check if the item fits into the grid horizontally.
+ * @param columnCount available width
+ * @param item item to place
+ * @param offsetX current x position
+ * @returns true if the item fits horizontally
+ */
+const hasHorizontalSpace = (columnCount: number, item: GridAlgorithmItem, offsetX: number) => {
+  return offsetX + item.width <= columnCount;
+};
+
+/**
+ * Check if the spot is free.
+ * @param occupied2d array of occupied spots
+ * @param item item to place
+ * @param position position to check
+ * @returns true if the spot is free
+ */
+const isFree = (occupied2d: boolean[][], item: GridAlgorithmItem, position: { x: number; y: number }) => {
+  for (let yOffset = 0; yOffset < item.height; yOffset++) {
+    const row = occupied2d[position.y + yOffset];
+    if (!row) return true; // Empty row is free
+
+    for (let xOffset = 0; xOffset < item.width; xOffset++) {
+      if (row[position.x + xOffset]) {
+        return false;
+      }
+    }
+  }
+
+  return true;
+};
@@ -0,0 +1,378 @@
+import { createId } from "@paralleldrive/cuid2";
+import { describe, expect, test } from "vitest";
+
+import type { GridAlgorithmItem } from "../grid-algorithm";
+import { generateResponsiveGridFor } from "../grid-algorithm";
+
+const ROOT_SECTION_ID = "section";
+
+/**
+ * If you want to see how the layouts progress between the different layouts, you can find images here:
+ * https://github.com/homarr-labs/architecture-documentation/tree/main/grid-algorithm#graphical-representation-of-the-algorithm
+ */
+describe("Grid Algorithm", () => {
+  test.each(itemTests)("should convert a grid with %i columns to a grid with %i columns", (_, _ignored, item) => {
+    const input = generateInputFromText(item.input);
+
+    const result = generateResponsiveGridFor({
+      items: input,
+      width: item.outputColumnCount,
+      previousWidth: item.inputColumnCount,
+      sectionId: ROOT_SECTION_ID,
+    });
+
+    const output = generateOutputText(result.items, item.outputColumnCount);
+
+    expect(output).toBe(item.output);
+  });
+  test.each(dynamicSectionTests)(
+    "should convert a grid with dynamic sections from 16 columns to %i columns",
+    (_, testInput) => {
+      const outerDynamicSectionId = "b";
+      const innerDynamicSectionId = "f";
+      const items = [
+        algoItem({ id: "a", width: 2, height: 2 }),
+        algoItem({ id: outerDynamicSectionId, type: "section", width: 12, height: 3, yOffset: 2 }),
+        algoItem({ id: "a", width: 2, sectionId: outerDynamicSectionId }),
+        algoItem({ id: "b", width: 4, sectionId: outerDynamicSectionId, xOffset: 2 }),
+        algoItem({ id: "c", width: 2, sectionId: outerDynamicSectionId, xOffset: 6 }),
+        algoItem({ id: "d", width: 1, sectionId: outerDynamicSectionId, xOffset: 8 }),
+        algoItem({ id: "e", width: 3, sectionId: outerDynamicSectionId, xOffset: 9 }),
+        algoItem({
+          id: innerDynamicSectionId,
+          type: "section",
+          width: 8,
+          height: 2,
+          yOffset: 1,
+          sectionId: outerDynamicSectionId,
+        }),
+        algoItem({ id: "a", width: 2, sectionId: innerDynamicSectionId }),
+        algoItem({ id: "b", width: 5, xOffset: 2, sectionId: innerDynamicSectionId }),
+        algoItem({ id: "c", width: 1, height: 2, xOffset: 7, sectionId: innerDynamicSectionId }),
+        algoItem({ id: "d", width: 7, yOffset: 1, sectionId: innerDynamicSectionId }),
+        algoItem({ id: "g", width: 4, yOffset: 1, sectionId: outerDynamicSectionId, xOffset: 8 }),
+        algoItem({ id: "h", width: 3, yOffset: 2, sectionId: outerDynamicSectionId, xOffset: 8 }),
+        algoItem({ id: "i", width: 1, yOffset: 2, sectionId: outerDynamicSectionId, xOffset: 11 }),
+        algoItem({ id: "c", width: 5, yOffset: 5 }),
+      ];
+
+      const newItems = generateResponsiveGridFor({
+        items,
+        width: testInput.outputColumns,
+        previousWidth: 16,
+        sectionId: ROOT_SECTION_ID,
+      });
+
+      const rootItems = newItems.items.filter((item) => item.sectionId === ROOT_SECTION_ID);
+      const outerSection = items.find((item) => item.id === outerDynamicSectionId);
+      const outerItems = newItems.items.filter((item) => item.sectionId === outerDynamicSectionId);
+      const innerSection = items.find((item) => item.id === innerDynamicSectionId);
+      const innerItems = newItems.items.filter((item) => item.sectionId === innerDynamicSectionId);
+
+      expect(generateOutputText(rootItems, testInput.outputColumns)).toBe(testInput.root);
+      expect(generateOutputText(outerItems, Math.min(testInput.outputColumns, outerSection?.width ?? 999))).toBe(
+        testInput.outer,
+      );
+      expect(generateOutputText(innerItems, Math.min(testInput.outputColumns, innerSection?.width ?? 999))).toBe(
+        testInput.inner,
+      );
+    },
+  );
+});
+
+const algoItem = (item: Partial<GridAlgorithmItem>): GridAlgorithmItem => ({
+  id: createId(),
+  type: "item",
+  width: 1,
+  height: 1,
+  xOffset: 0,
+  yOffset: 0,
+  sectionId: ROOT_SECTION_ID,
+  ...item,
+});
+
+const sixteenColumns = `
+abbccccddddeeefg
+hbbccccddddeeeij
+klllmmmmmnneeeop
+qlllmmmmmnnrrrst
+ulllmmmmmnnrrrvw
+xyz           äö`;
+
+// Just add two empty columns to the right
+const eighteenColumns = sixteenColumns
+  .split("\n")
+  .map((line, index) => (index === 0 ? line : `${line}  `))
+  .join("\n");
+
+const tenColumns = `
+abbcccceee
+fbbcccceee
+ddddghieee
+ddddjklllo
+mmmmmplllq
+mmmmmslllt
+mmmmmnnrrr
+uvwxynnrrr
+zäö  nn   `;
+
+const sixColumns = `
+abbfgh
+ibbjko
+ccccnn
+ccccnn
+ddddnn
+ddddpq
+eeelll
+eeelll
+eeelll
+mmmmms
+mmmmmt
+mmmmmu
+rrrvwx
+rrryzä
+ö     `;
+const threeColumns = `
+abb
+fbb
+ccc
+ccc
+ddd
+ddd
+eee
+eee
+eee
+ghi
+jko
+lll
+lll
+lll
+mmm
+mmm
+mmm
+nnp
+nnq
+nns
+rrr
+rrr
+tuv
+wxy
+zäö`;
+
+const itemTests = [
+  {
+    input: sixteenColumns,
+    inputColumnCount: 16,
+    output: sixteenColumns,
+    outputColumnCount: 16,
+  },
+  {
+    input: sixteenColumns,
+    inputColumnCount: 16,
+    output: eighteenColumns,
+    outputColumnCount: 18,
+  },
+  {
+    input: sixteenColumns,
+    inputColumnCount: 16,
+    output: tenColumns,
+    outputColumnCount: 10,
+  },
+  {
+    input: sixteenColumns,
+    inputColumnCount: 16,
+    output: sixColumns,
+    outputColumnCount: 6,
+  },
+  {
+    input: sixteenColumns,
+    inputColumnCount: 16,
+    output: threeColumns,
+    outputColumnCount: 3,
+  },
+].map((item) => [item.inputColumnCount, item.outputColumnCount, item] as const);
+
+const dynamicSectionTests = [
+  {
+    outputColumns: 16,
+    root: `
+aa              
+aa              
+bbbbbbbbbbbb    
+bbbbbbbbbbbb    
+bbbbbbbbbbbb    
+ccccc           `,
+    outer: `
+aabbbbccdeee
+ffffffffgggg
+ffffffffhhhi`,
+    inner: `
+aabbbbbc
+dddddddc`,
+  },
+  {
+    outputColumns: 10,
+    root: `
+aaccccc   
+aa        
+bbbbbbbbbb
+bbbbbbbbbb
+bbbbbbbbbb
+bbbbbbbbbb`,
+    outer: `
+aabbbbccdi
+eeegggghhh
+ffffffff  
+ffffffff  `,
+    inner: `
+aabbbbbc
+dddddddc`,
+  },
+  {
+    outputColumns: 6,
+    root: `
+aa    
+aa    
+bbbbbb
+bbbbbb
+bbbbbb
+bbbbbb
+bbbbbb
+bbbbbb
+bbbbbb
+ccccc `,
+    outer: `
+aabbbb
+ccdeee
+ffffff
+ffffff
+ffffff
+ggggi 
+hhh   `,
+    inner: `
+aa   c
+bbbbbc
+dddddd`,
+  },
+  {
+    outputColumns: 3,
+    root: `
+aa 
+aa 
+bbb
+bbb
+bbb
+bbb
+bbb
+bbb
+bbb
+bbb
+bbb
+bbb
+bbb
+ccc`,
+    outer: `
+aad
+bbb
+cci
+eee
+fff
+fff
+fff
+fff
+fff
+ggg
+hhh`,
+    inner: `
+aa 
+bbb
+c  
+c  
+ddd`,
+  },
+].map((item) => [item.outputColumns, item] as const);
+
+const generateInputFromText = (text: string) => {
+  const lines = text.split("\n").slice(1); // Remove first empty row
+  const items: GridAlgorithmItem[] = [];
+  for (let yOffset = 0; yOffset < lines.length; yOffset++) {
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    const line = lines[yOffset]!;
+    for (let xOffset = 0; xOffset < line.length; xOffset++) {
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      const char = line[xOffset]!;
+      if (char === " ") continue;
+      if (items.some((item) => item.id === char)) continue;
+      items.push({
+        id: char,
+        type: "item",
+        width: getWidth(line, xOffset, char),
+        height: getHeight(lines, { x: xOffset, y: yOffset }, char),
+        xOffset,
+        yOffset,
+        sectionId: ROOT_SECTION_ID,
+      });
+    }
+  }
+
+  return items;
+};
+
+const generateOutputText = (items: GridAlgorithmItem[], columnCount: number) => {
+  const occupied2d: string[][] = [];
+  for (const item of items) {
+    addItemToOccupied(occupied2d, item, { x: item.xOffset, y: item.yOffset }, columnCount);
+  }
+
+  return `\n${occupied2d.map((row) => row.join("")).join("\n")}`;
+};
+
+const getWidth = (line: string, offset: number, char: string) => {
+  const row = line.split("");
+  let width = 1;
+  for (let xOffset = offset + 1; xOffset < row.length; xOffset++) {
+    if (row[xOffset] === char) {
+      width++;
+    } else {
+      break;
+    }
+  }
+  return width;
+};
+
+const getHeight = (lines: string[], position: { x: number; y: number }, char: string) => {
+  let height = 1;
+  for (let yOffset = position.y + 1; yOffset < lines.length; yOffset++) {
+    if (lines[yOffset]?.[position.x] === char) {
+      height++;
+    } else {
+      break;
+    }
+  }
+  return height;
+};
+
+const addItemToOccupied = (
+  occupied2d: string[][],
+  item: GridAlgorithmItem,
+  position: { x: number; y: number },
+  columnCount: number,
+) => {
+  for (let yOffset = 0; yOffset < item.height; yOffset++) {
+    let row = occupied2d[position.y + yOffset];
+    if (!row) {
+      addRow(occupied2d, columnCount);
+      // After adding it, it must exist
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      row = occupied2d[position.y + yOffset]!;
+    }
+
+    for (let xOffset = 0; xOffset < item.width; xOffset++) {
+      row[position.x + xOffset] = item.id;
+    }
+  }
+};
+
+const addRow = (occupied2d: string[][], columnCount: number) => {
+  occupied2d.push(new Array<string>(columnCount).fill(" "));
+};
@@ -2,7 +2,7 @@ import { TRPCError } from "@trpc/server";
 import { z } from "zod";

 import type { Database } from "@homarr/db";
-import { and, createId, eq, handleTransactionsAsync, like, not, sql } from "@homarr/db";
+import { and, createId, eq, handleTransactionsAsync, like, not } from "@homarr/db";
 import { getMaxGroupPositionAsync } from "@homarr/db/queries";
 import { groupMembers, groupPermissions, groups } from "@homarr/db/schema";
 import { everyoneGroup } from "@homarr/definitions";
@@ -42,12 +42,7 @@ export const groupRouter = createTRPCRouter({
    .input(validation.common.paginated)
    .query(async ({ input, ctx }) => {
      const whereQuery = input.search ? like(groups.name, `%${input.search.trim()}%`) : undefined;
-      const groupCount = await ctx.db
-        .select({
-          count: sql<number>`count(*)`,
-        })
-        .from(groups)
-        .where(whereQuery);
+      const groupCount = await ctx.db.$count(groups, whereQuery);

      const dbGroups = await ctx.db.query.groups.findMany({
        with: {
@@ -74,7 +69,7 @@ export const groupRouter = createTRPCRouter({
          ...group,
          members: group.members.map((member) => member.user),
        })),
-        totalCount: groupCount[0]?.count ?? 0,
+        totalCount: groupCount,
      };
    }),
  getById: permissionRequiredProcedure
@@ -2,7 +2,6 @@ import type { AnySQLiteTable } from "drizzle-orm/sqlite-core";

 import { isProviderEnabled } from "@homarr/auth/server";
 import type { Database } from "@homarr/db";
-import { count } from "@homarr/db";
 import { apps, boards, groups, integrations, invites, users } from "@homarr/db/schema";

 import { createTRPCRouter, publicProcedure } from "../trpc";
@@ -28,5 +27,5 @@ const getCountForTableAsync = async (db: Database, table: AnySQLiteTable, canVie
    return 0;
  }

-  return (await db.select({ count: count() }).from(table))[0]?.count ?? 0;
+  return await db.$count(table);
 };
@@ -1,4 +1,4 @@
-import { and, count, like } from "@homarr/db";
+import { and, like } from "@homarr/db";
 import { icons } from "@homarr/db/schema";
 import { validation } from "@homarr/validation";

@@ -24,7 +24,7 @@ export const iconsRouter = createTRPCRouter({
          },
        },
      }),
-      countIcons: (await ctx.db.select({ count: count() }).from(icons))[0]?.count ?? 0,
+      countIcons: await ctx.db.$count(icons),
    };
  }),
 });
@@ -23,7 +23,7 @@ import {
  integrationKinds,
  integrationSecretKindObject,
 } from "@homarr/definitions";
-import { integrationCreator } from "@homarr/integrations";
+import { createIntegrationAsync } from "@homarr/integrations";
 import { validation } from "@homarr/validation";

 import { createOneIntegrationMiddleware } from "../../middlewares/integration";
@@ -465,7 +465,7 @@ export const integrationRouter = createTRPCRouter({
    .unstable_concat(createOneIntegrationMiddleware("query", ...getIntegrationKindsByCategory("search")))
    .input(z.object({ integrationId: z.string(), query: z.string() }))
    .query(async ({ ctx, input }) => {
-      const integrationInstance = integrationCreator(ctx.integration);
+      const integrationInstance = await createIntegrationAsync(ctx.integration);
      return await integrationInstance.searchAsync(encodeURI(input.query));
    }),
 });
@@ -4,7 +4,7 @@ import { decryptSecret } from "@homarr/common/server";
 import type { Integration } from "@homarr/db/schema";
 import type { IntegrationKind, IntegrationSecretKind } from "@homarr/definitions";
 import { getAllSecretKindOptions } from "@homarr/definitions";
-import { integrationCreator, IntegrationTestConnectionError } from "@homarr/integrations";
+import { createIntegrationAsync, IntegrationTestConnectionError } from "@homarr/integrations";
 import { logger } from "@homarr/log";

 type FormIntegration = Integration & {
@@ -66,7 +66,7 @@ export const testConnectionAsync = async (

  const { secrets: _, ...baseIntegration } = integration;

-  const integrationInstance = integrationCreator({
+  const integrationInstance = await createIntegrationAsync({
    ...baseIntegration,
    decryptedSecrets,
  });
@@ -1,10 +1,10 @@
 import { TRPCError } from "@trpc/server";
 import { z } from "zod";

-import { asc, createId, eq, like, sql } from "@homarr/db";
+import { asc, createId, eq, like } from "@homarr/db";
 import { getServerSettingByKeyAsync } from "@homarr/db/queries";
 import { searchEngines, users } from "@homarr/db/schema";
-import { integrationCreator } from "@homarr/integrations";
+import { createIntegrationAsync } from "@homarr/integrations";
 import { validation } from "@homarr/validation";

 import { createOneIntegrationMiddleware } from "../../middlewares/integration";
@@ -13,12 +13,7 @@ import { createTRPCRouter, permissionRequiredProcedure, protectedProcedure, publ
 export const searchEngineRouter = createTRPCRouter({
  getPaginated: protectedProcedure.input(validation.common.paginated).query(async ({ input, ctx }) => {
    const whereQuery = input.search ? like(searchEngines.name, `%${input.search.trim()}%`) : undefined;
-    const searchEngineCount = await ctx.db
-      .select({
-        count: sql<number>`count(*)`,
-      })
-      .from(searchEngines)
-      .where(whereQuery);
+    const searchEngineCount = await ctx.db.$count(searchEngines, whereQuery);

    const dbSearachEngines = await ctx.db.query.searchEngines.findMany({
      limit: input.pageSize,
@@ -28,7 +23,7 @@ export const searchEngineRouter = createTRPCRouter({

    return {
      items: dbSearachEngines,
-      totalCount: searchEngineCount[0]?.count ?? 0,
+      totalCount: searchEngineCount,
    };
  }),
  getSelectable: protectedProcedure
@@ -139,14 +134,14 @@ export const searchEngineRouter = createTRPCRouter({
    .unstable_concat(createOneIntegrationMiddleware("query", "jellyseerr", "overseerr"))
    .input(validation.common.mediaRequestOptions)
    .query(async ({ ctx, input }) => {
-      const integration = integrationCreator(ctx.integration);
+      const integration = await createIntegrationAsync(ctx.integration);
      return await integration.getSeriesInformationAsync(input.mediaType, input.mediaId);
    }),
  requestMedia: protectedProcedure
    .unstable_concat(createOneIntegrationMiddleware("interact", "jellyseerr", "overseerr"))
    .input(validation.common.requestMedia)
    .mutation(async ({ ctx, input }) => {
-      const integration = integrationCreator(ctx.integration);
+      const integration = await createIntegrationAsync(ctx.integration);
      return await integration.requestMediaAsync(input.mediaType, input.mediaId, input.seasons);
    }),
  create: permissionRequiredProcedure
@@ -158,6 +158,7 @@ describe("create should create a new app with all arguments", () => {
      description: "React components and hooks library",
      iconUrl: "https://mantine.dev/favicon.svg",
      href: "https://mantine.dev",
+      pingUrl: "https://mantine.dev/a",
    };

    // Act
@@ -170,6 +171,7 @@ describe("create should create a new app with all arguments", () => {
    expect(dbApp!.description).toBe(input.description);
    expect(dbApp!.iconUrl).toBe(input.iconUrl);
    expect(dbApp!.href).toBe(input.href);
+    expect(dbApp!.pingUrl).toBe(input.pingUrl);
  });

  test("should create a new app only with required arguments", async () => {
@@ -185,6 +187,7 @@ describe("create should create a new app with all arguments", () => {
      description: null,
      iconUrl: "https://mantine.dev/favicon.svg",
      href: null,
+      pingUrl: "",
    };

    // Act
@@ -197,6 +200,7 @@ describe("create should create a new app with all arguments", () => {
    expect(dbApp!.description).toBe(input.description);
    expect(dbApp!.iconUrl).toBe(input.iconUrl);
    expect(dbApp!.href).toBe(input.href);
+    expect(dbApp!.pingUrl).toBe(null);
  });
 });

@@ -225,6 +229,7 @@ describe("update should update an app", () => {
      description: "React components and hooks library",
      iconUrl: "https://mantine.dev/favicon.svg2",
      href: "https://mantine.dev",
+      pingUrl: "https://mantine.dev/a",
    };

    // Act
@@ -257,6 +262,7 @@ describe("update should update an app", () => {
        iconUrl: "https://mantine.dev/favicon.svg",
        description: null,
        href: null,
+        pingUrl: "",
      });

    // Assert
@@ -2,8 +2,8 @@ import SuperJSON from "superjson";
 import { describe, expect, it, test, vi } from "vitest";

 import type { Session } from "@homarr/auth";
-import type { Database } from "@homarr/db";
-import { createId, eq } from "@homarr/db";
+import type { Database, InferInsertModel } from "@homarr/db";
+import { and, createId, eq, not } from "@homarr/db";
 import {
  boardGroupPermissions,
  boards,
@@ -13,7 +13,10 @@ import {
  groups,
  integrationItems,
  integrations,
+  itemLayouts,
  items,
+  layouts,
+  sectionLayouts,
  sections,
  serverSettings,
  users,
@@ -304,17 +307,27 @@ describe("createBoard should create a new board", () => {
    await caller.createBoard({ name: "newBoard", columnCount: 24, isPublic: true });

    // Assert
-    const dbBoard = await db.query.boards.findFirst();
+    const dbBoard = await db.query.boards.findFirst({
+      with: {
+        sections: true,
+        layouts: true,
+      },
+    });
    expect(dbBoard).toBeDefined();
    expect(dbBoard?.name).toBe("newBoard");
-    expect(dbBoard?.columnCount).toBe(24);
    expect(dbBoard?.isPublic).toBe(true);
    expect(dbBoard?.creatorId).toBe(defaultCreatorId);

-    const dbSection = await db.query.sections.findFirst();
-    expect(dbSection).toBeDefined();
-    expect(dbSection?.boardId).toBe(dbBoard?.id);
-    expect(dbSection?.kind).toBe("empty");
+    expect(dbBoard?.sections.length).toBe(1);
+    const firstSection = dbBoard?.sections.at(0);
+    expect(firstSection?.kind).toBe("empty");
+    expect(firstSection?.xOffset).toBe(0);
+    expect(firstSection?.yOffset).toBe(0);
+
+    expect(dbBoard?.layouts.length).toBe(1);
+    const firstLayout = dbBoard?.layouts.at(0);
+    expect(firstLayout?.columnCount).toBe(24);
+    expect(firstLayout?.breakpoint).toBe(0);
  });

  test("should throw error when user has no board-create permission", async () => {
@@ -587,7 +600,6 @@ describe("savePartialBoardSettings should save general settings", () => {
    const newBackgroundImageSize = "cover";
    const newBackgroundImageRepeat = "repeat";
    const newBackgroundImageUrl = "http://background.image/url.png";
-    const newColumnCount = 2;
    const newCustomCss = "body { background-color: blue; }";
    const newOpacity = 0.8;
    const newPrimaryColor = "#0000ff";
@@ -605,7 +617,6 @@ describe("savePartialBoardSettings should save general settings", () => {
      backgroundImageRepeat: newBackgroundImageRepeat,
      backgroundImageSize: newBackgroundImageSize,
      backgroundImageUrl: newBackgroundImageUrl,
-      columnCount: newColumnCount,
      customCss: newCustomCss,
      opacity: newOpacity,
      primaryColor: newPrimaryColor,
@@ -626,7 +637,6 @@ describe("savePartialBoardSettings should save general settings", () => {
    expect(dbBoard?.backgroundImageRepeat).toBe(newBackgroundImageRepeat);
    expect(dbBoard?.backgroundImageSize).toBe(newBackgroundImageSize);
    expect(dbBoard?.backgroundImageUrl).toBe(newBackgroundImageUrl);
-    expect(dbBoard?.columnCount).toBe(newColumnCount);
    expect(dbBoard?.customCss).toBe(newCustomCss);
    expect(dbBoard?.opacity).toBe(newOpacity);
    expect(dbBoard?.primaryColor).toBe(newPrimaryColor);
@@ -668,9 +678,9 @@ describe("saveBoard should save full board", () => {
          kind: "empty",
          yOffset: 0,
          xOffset: 0,
-          items: [],
        },
      ],
+      items: [],
    });

    const board = await db.query.boards.findFirst({
@@ -695,7 +705,7 @@ describe("saveBoard should save full board", () => {
    const db = createDb();
    const caller = boardRouter.createCaller({ db, deviceType: undefined, session: defaultSession });

-    const { boardId, itemId, sectionId } = await createFullBoardAsync(db, "default");
+    const { boardId, itemId, sectionId, layoutId } = await createFullBoardAsync(db, "default");

    await caller.saveBoard({
      id: boardId,
@@ -705,19 +715,25 @@ describe("saveBoard should save full board", () => {
          kind: "empty",
          yOffset: 0,
          xOffset: 0,
-          items: [
+        },
+      ],
+      items: [
+        {
+          id: createId(),
+          kind: "clock",
+          options: { is24HourFormat: true },
+          integrationIds: [],
+          layouts: [
            {
-              id: createId(),
-              kind: "clock",
-              options: { is24HourFormat: true },
-              integrationIds: [],
+              layoutId,
+              sectionId,
              height: 1,
              width: 1,
              xOffset: 0,
              yOffset: 0,
-              advancedOptions: {},
            },
          ],
+          advancedOptions: {},
        },
      ],
    });
@@ -725,11 +741,8 @@ describe("saveBoard should save full board", () => {
    const board = await db.query.boards.findFirst({
      where: eq(boards.id, boardId),
      with: {
-        sections: {
-          with: {
-            items: true,
-          },
-        },
+        sections: true,
+        items: true,
      },
    });

@@ -739,9 +752,8 @@ describe("saveBoard should save full board", () => {

    const definedBoard = expectToBeDefined(board);
    expect(definedBoard.sections.length).toBe(1);
-    const firstSection = expectToBeDefined(definedBoard.sections[0]);
-    expect(firstSection.items.length).toBe(1);
-    expect(firstSection.items[0]?.id).not.toBe(itemId);
+    expect(definedBoard.items.length).toBe(1);
+    expect(definedBoard.items[0]?.id).not.toBe(itemId);
    expect(item).toBeUndefined();
    expect(spy).toHaveBeenCalledWith(expect.anything(), expect.anything(), "modify");
  });
@@ -756,7 +768,7 @@ describe("saveBoard should save full board", () => {
      url: "http://localhost:3000",
    } as const;

-    const { boardId, itemId, integrationId, sectionId } = await createFullBoardAsync(db, "default");
+    const { boardId, itemId, integrationId, sectionId, layoutId } = await createFullBoardAsync(db, "default");
    await db.insert(integrations).values(anotherIntegration);

    await caller.saveBoard({
@@ -767,19 +779,25 @@ describe("saveBoard should save full board", () => {
          kind: "empty",
          xOffset: 0,
          yOffset: 0,
-          items: [
+        },
+      ],
+      items: [
+        {
+          id: itemId,
+          kind: "clock",
+          options: { is24HourFormat: true },
+          integrationIds: [anotherIntegration.id],
+          layouts: [
            {
-              id: itemId,
-              kind: "clock",
-              options: { is24HourFormat: true },
-              integrationIds: [anotherIntegration.id],
+              layoutId,
+              sectionId,
              height: 1,
              width: 1,
              xOffset: 0,
              yOffset: 0,
-              advancedOptions: {},
            },
          ],
+          advancedOptions: {},
        },
      ],
    });
@@ -787,13 +805,10 @@ describe("saveBoard should save full board", () => {
    const board = await db.query.boards.findFirst({
      where: eq(boards.id, boardId),
      with: {
-        sections: {
+        sections: true,
+        items: {
          with: {
-            items: {
-              with: {
-                integrations: true,
-              },
-            },
+            integrations: true,
          },
        },
      },
@@ -805,9 +820,8 @@ describe("saveBoard should save full board", () => {

    const definedBoard = expectToBeDefined(board);
    expect(definedBoard.sections.length).toBe(1);
-    const firstSection = expectToBeDefined(definedBoard.sections[0]);
-    expect(firstSection.items.length).toBe(1);
-    const firstItem = expectToBeDefined(firstSection.items[0]);
+    expect(definedBoard.items.length).toBe(1);
+    const firstItem = expectToBeDefined(definedBoard.items[0]);
    expect(firstItem.integrations.length).toBe(1);
    expect(firstItem.integrations[0]?.integrationId).not.toBe(integrationId);
    expect(integration).toBeUndefined();
@@ -830,7 +844,6 @@ describe("saveBoard should save full board", () => {
            id: newSectionId,
            xOffset: 0,
            yOffset: 1,
-            items: [],
            ...partialSection,
          },
          {
@@ -838,9 +851,9 @@ describe("saveBoard should save full board", () => {
            kind: "empty",
            xOffset: 0,
            yOffset: 0,
-            items: [],
          },
        ],
+        items: [],
      });

      const board = await db.query.boards.findFirst({
@@ -873,7 +886,7 @@ describe("saveBoard should save full board", () => {
    const db = createDb();
    const caller = boardRouter.createCaller({ db, deviceType: undefined, session: defaultSession });

-    const { boardId, sectionId } = await createFullBoardAsync(db, "default");
+    const { boardId, sectionId, layoutId } = await createFullBoardAsync(db, "default");

    const newItemId = createId();
    await caller.saveBoard({
@@ -884,19 +897,25 @@ describe("saveBoard should save full board", () => {
          kind: "empty",
          yOffset: 0,
          xOffset: 0,
-          items: [
+        },
+      ],
+      items: [
+        {
+          id: newItemId,
+          kind: "clock",
+          options: { is24HourFormat: true },
+          integrationIds: [],
+          layouts: [
            {
-              id: newItemId,
-              kind: "clock",
-              options: { is24HourFormat: true },
-              integrationIds: [],
+              layoutId,
+              sectionId,
              height: 1,
              width: 1,
              xOffset: 3,
              yOffset: 2,
-              advancedOptions: {},
            },
          ],
+          advancedOptions: {},
        },
      ],
    });
@@ -904,9 +923,10 @@ describe("saveBoard should save full board", () => {
    const board = await db.query.boards.findFirst({
      where: eq(boards.id, boardId),
      with: {
-        sections: {
+        sections: true,
+        items: {
          with: {
-            items: true,
+            layouts: true,
          },
        },
      },
@@ -918,17 +938,18 @@ describe("saveBoard should save full board", () => {

    const definedBoard = expectToBeDefined(board);
    expect(definedBoard.sections.length).toBe(1);
-    const firstSection = expectToBeDefined(definedBoard.sections[0]);
-    expect(firstSection.items.length).toBe(1);
-    const addedItem = expectToBeDefined(firstSection.items.find((item) => item.id === newItemId));
+    expect(definedBoard.items.length).toBe(1);
+    const addedItem = expectToBeDefined(definedBoard.items.find((item) => item.id === newItemId));
    expect(addedItem).toBeDefined();
    expect(addedItem.id).toBe(newItemId);
    expect(addedItem.kind).toBe("clock");
    expect(addedItem.options).toBe(SuperJSON.stringify({ is24HourFormat: true }));
-    expect(addedItem.height).toBe(1);
-    expect(addedItem.width).toBe(1);
-    expect(addedItem.xOffset).toBe(3);
-    expect(addedItem.yOffset).toBe(2);
+    const firstLayout = expectToBeDefined(addedItem.layouts[0]);
+    expect(firstLayout.sectionId).toBe(sectionId);
+    expect(firstLayout.height).toBe(1);
+    expect(firstLayout.width).toBe(1);
+    expect(firstLayout.xOffset).toBe(3);
+    expect(firstLayout.yOffset).toBe(2);
    expect(item).toBeDefined();
    expect(spy).toHaveBeenCalledWith(expect.anything(), expect.anything(), "modify");
  });
@@ -943,7 +964,7 @@ describe("saveBoard should save full board", () => {
      url: "http://plex.local",
    } as const;

-    const { boardId, itemId, sectionId } = await createFullBoardAsync(db, "default");
+    const { boardId, itemId, sectionId, layoutId } = await createFullBoardAsync(db, "default");
    await db.insert(integrations).values(integration);

    await caller.saveBoard({
@@ -954,19 +975,25 @@ describe("saveBoard should save full board", () => {
          kind: "empty",
          xOffset: 0,
          yOffset: 0,
-          items: [
+        },
+      ],
+      items: [
+        {
+          id: itemId,
+          kind: "clock",
+          options: { is24HourFormat: true },
+          integrationIds: [integration.id],
+          layouts: [
            {
-              id: itemId,
-              kind: "clock",
-              options: { is24HourFormat: true },
-              integrationIds: [integration.id],
+              sectionId,
+              layoutId,
              height: 1,
              width: 1,
              xOffset: 0,
              yOffset: 0,
-              advancedOptions: {},
            },
          ],
+          advancedOptions: {},
        },
      ],
    });
@@ -974,13 +1001,10 @@ describe("saveBoard should save full board", () => {
    const board = await db.query.boards.findFirst({
      where: eq(boards.id, boardId),
      with: {
-        sections: {
+        sections: true,
+        items: {
          with: {
-            items: {
-              with: {
-                integrations: true,
-              },
-            },
+            integrations: true,
          },
        },
      },
@@ -992,9 +1016,7 @@ describe("saveBoard should save full board", () => {

    const definedBoard = expectToBeDefined(board);
    expect(definedBoard.sections.length).toBe(1);
-    const firstSection = expectToBeDefined(definedBoard.sections[0]);
-    expect(firstSection.items.length).toBe(1);
-    const firstItem = expectToBeDefined(firstSection.items.find((item) => item.id === itemId));
+    const firstItem = expectToBeDefined(definedBoard.items.find((item) => item.id === itemId));
    expect(firstItem.integrations.length).toBe(1);
    expect(firstItem.integrations[0]?.integrationId).toBe(integration.id);
    expect(integrationItem).toBeDefined();
@@ -1025,7 +1047,6 @@ describe("saveBoard should save full board", () => {
          xOffset: 0,
          name: "Test",
          collapsed: true,
-          items: [],
        },
        {
          id: newSectionId,
@@ -1034,9 +1055,9 @@ describe("saveBoard should save full board", () => {
          yOffset: 0,
          xOffset: 0,
          collapsed: false,
-          items: [],
        },
      ],
+      items: [],
    });

    const board = await db.query.boards.findFirst({
@@ -1064,7 +1085,7 @@ describe("saveBoard should save full board", () => {
    const db = createDb();
    const caller = boardRouter.createCaller({ db, deviceType: undefined, session: defaultSession });

-    const { boardId, itemId, sectionId } = await createFullBoardAsync(db, "default");
+    const { boardId, itemId, sectionId, layoutId } = await createFullBoardAsync(db, "default");

    await caller.saveBoard({
      id: boardId,
@@ -1074,19 +1095,25 @@ describe("saveBoard should save full board", () => {
          kind: "empty",
          yOffset: 0,
          xOffset: 0,
-          items: [
+        },
+      ],
+      items: [
+        {
+          id: itemId,
+          kind: "clock",
+          options: { is24HourFormat: false },
+          integrationIds: [],
+          layouts: [
            {
-              id: itemId,
-              kind: "clock",
-              options: { is24HourFormat: false },
-              integrationIds: [],
+              layoutId,
+              sectionId,
              height: 3,
              width: 2,
              xOffset: 7,
              yOffset: 5,
-              advancedOptions: {},
            },
          ],
+          advancedOptions: {},
        },
      ],
    });
@@ -1094,9 +1121,10 @@ describe("saveBoard should save full board", () => {
    const board = await db.query.boards.findFirst({
      where: eq(boards.id, boardId),
      with: {
-        sections: {
+        sections: true,
+        items: {
          with: {
-            items: true,
+            layouts: true,
          },
        },
      },
@@ -1104,16 +1132,17 @@ describe("saveBoard should save full board", () => {

    const definedBoard = expectToBeDefined(board);
    expect(definedBoard.sections.length).toBe(1);
-    const firstSection = expectToBeDefined(definedBoard.sections[0]);
-    expect(firstSection.items.length).toBe(1);
-    const firstItem = expectToBeDefined(firstSection.items.find((item) => item.id === itemId));
+    expect(definedBoard.items.length).toBe(1);
+    const firstItem = expectToBeDefined(definedBoard.items.find((item) => item.id === itemId));
    expect(firstItem.id).toBe(itemId);
    expect(firstItem.kind).toBe("clock");
    expect(SuperJSON.parse<{ is24HourFormat: boolean }>(firstItem.options).is24HourFormat).toBe(false);
-    expect(firstItem.height).toBe(3);
-    expect(firstItem.width).toBe(2);
-    expect(firstItem.xOffset).toBe(7);
-    expect(firstItem.yOffset).toBe(5);
+    const firstLayout = expectToBeDefined(firstItem.layouts[0]);
+    expect(firstLayout.sectionId).toBe(sectionId);
+    expect(firstLayout.height).toBe(3);
+    expect(firstLayout.width).toBe(2);
+    expect(firstLayout.xOffset).toBe(7);
+    expect(firstLayout.yOffset).toBe(5);
    expect(spy).toHaveBeenCalledWith(expect.anything(), expect.anything(), "modify");
  });
  it("should fail when board not found", async () => {
@@ -1124,6 +1153,7 @@ describe("saveBoard should save full board", () => {
      await caller.saveBoard({
        id: "nonExistentBoardId",
        sections: [],
+        items: [],
      });

    await expect(actAsync()).rejects.toThrowError("Board not found");
@@ -1293,6 +1323,165 @@ describe("saveGroupBoardPermissions should save group board permissions", () =>
  );
 });

+const createExistingLayout = (id: string) => ({
+  id,
+  name: "Base",
+  columnCount: 10,
+  breakpoint: 0,
+});
+const createNewLayout = (columnCount: number) => ({
+  id: createId(),
+  name: "New layout",
+  columnCount,
+  breakpoint: 1400,
+});
+describe("saveLayouts should save layout changes", () => {
+  test("should add layout when not present in database", async () => {
+    // Arrange
+    const db = createDb();
+    const caller = boardRouter.createCaller({ db, deviceType: undefined, session: defaultSession });
+
+    const { boardId, layoutId } = await createFullBoardAsync(db, "default");
+    const newLayout = createNewLayout(12);
+
+    // Act
+    await caller.saveLayouts({
+      id: boardId,
+      layouts: [createExistingLayout(layoutId), newLayout],
+    });
+
+    // Assert
+    const layout = await db.query.layouts.findFirst({
+      where: not(eq(layouts.id, layoutId)),
+    });
+
+    const definedLayout = expectToBeDefined(layout);
+    expect(definedLayout.name).toBe(newLayout.name);
+    expect(definedLayout.columnCount).toBe(newLayout.columnCount);
+    expect(definedLayout.breakpoint).toBe(newLayout.breakpoint);
+  });
+  test("should add items and dynamic sections generated from grid-algorithm when new layout is added", async () => {
+    // Arrange
+    const db = createDb();
+    const caller = boardRouter.createCaller({ db, deviceType: undefined, session: defaultSession });
+
+    const { boardId, layoutId, sectionId, itemId } = await createFullBoardAsync(db, "default");
+    const assignments = await createItemsAndSectionsAsync(db, {
+      boardId,
+      layoutId,
+      sectionId,
+    });
+    const newLayout = createNewLayout(3);
+
+    // Act
+    await caller.saveLayouts({
+      id: boardId,
+      layouts: [createExistingLayout(layoutId), newLayout],
+    });
+
+    // Assert
+    const layout = await db.query.layouts.findFirst({
+      where: not(eq(layouts.id, layoutId)),
+    });
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    await expectLayoutForRootLayoutAsync(db, sectionId, layout!.id, {
+      ...assignments.inRoot,
+      a: itemId,
+    });
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    await expectLayoutForDynamicSectionAsync(db, assignments.inRoot.f, layout!.id, assignments.inDynamicSection);
+  });
+  test("should update layout when present in input", async () => {
+    // Arrange
+    const db = createDb();
+    const caller = boardRouter.createCaller({ db, deviceType: undefined, session: defaultSession });
+
+    const { boardId, layoutId } = await createFullBoardAsync(db, "default");
+    const updatedLayout = createExistingLayout(layoutId);
+    updatedLayout.breakpoint = 1400;
+    updatedLayout.name = "Updated layout";
+
+    // Act
+    await caller.saveLayouts({
+      id: boardId,
+      layouts: [updatedLayout],
+    });
+
+    // Assert
+    const layout = await db.query.layouts.findFirst({
+      where: eq(layouts.id, layoutId),
+    });
+
+    const definedLayout = expectToBeDefined(layout);
+    expect(definedLayout.name).toBe(updatedLayout.name);
+    expect(definedLayout.columnCount).toBe(updatedLayout.columnCount);
+    expect(definedLayout.breakpoint).toBe(updatedLayout.breakpoint);
+  });
+  test("should update position of items when column count changes", async () => {
+    // Arrange
+    const db = createDb();
+    const caller = boardRouter.createCaller({ db, deviceType: undefined, session: defaultSession });
+
+    const { boardId, layoutId, sectionId, itemId } = await createFullBoardAsync(db, "default");
+    const assignments = await createItemsAndSectionsAsync(db, {
+      boardId,
+      layoutId,
+      sectionId,
+    });
+    const updatedLayout = createExistingLayout(layoutId);
+    updatedLayout.columnCount = 3;
+
+    // Act
+    await caller.saveLayouts({
+      id: boardId,
+      layouts: [updatedLayout],
+    });
+
+    // Assert
+    await expectLayoutForRootLayoutAsync(db, sectionId, layoutId, {
+      ...assignments.inRoot,
+      a: itemId,
+    });
+    await expectLayoutForDynamicSectionAsync(db, assignments.inRoot.f, layoutId, assignments.inDynamicSection);
+  });
+  test("should remove layout when not present in input", async () => {
+    // Arrange
+    const db = createDb();
+    const caller = boardRouter.createCaller({ db, deviceType: undefined, session: defaultSession });
+
+    const { boardId, layoutId } = await createFullBoardAsync(db, "default");
+
+    // Act
+    await caller.saveLayouts({
+      id: boardId,
+      layouts: [createNewLayout(12)],
+    });
+
+    // Assert
+    const layout = await db.query.layouts.findFirst({
+      where: eq(layouts.id, layoutId),
+    });
+    expect(layout).toBeUndefined();
+  });
+  test("should fail when board not found", async () => {
+    // Arrange
+    const db = createDb();
+    const caller = boardRouter.createCaller({ db, deviceType: undefined, session: defaultSession });
+
+    const { layoutId } = await createFullBoardAsync(db, "default");
+
+    // Act
+    const actAsync = async () =>
+      await caller.saveLayouts({
+        id: createId(),
+        layouts: [createExistingLayout(layoutId)],
+      });
+
+    // Assert
+    await expect(actAsync()).rejects.toThrowError("Board not found");
+  });
+});
+
 const expectInputToBeFullBoardWithName = (
  input: RouterOutputs["board"]["getHomeBoard"],
  props: { name: string } & Awaited<ReturnType<typeof createFullBoardAsync>>,
@@ -1302,8 +1491,8 @@ const expectInputToBeFullBoardWithName = (
  expect(input.sections.length).toBe(1);
  const firstSection = expectToBeDefined(input.sections[0]);
  expect(firstSection.id).toBe(props.sectionId);
-  expect(firstSection.items.length).toBe(1);
-  const firstItem = expectToBeDefined(firstSection.items[0]);
+  expect(input.items.length).toBe(1);
+  const firstItem = expectToBeDefined(input.items[0]);
  expect(firstItem.id).toBe(props.itemId);
  expect(firstItem.kind).toBe("clock");
  if (firstItem.kind === "clock") {
@@ -1326,6 +1515,15 @@ const createFullBoardAsync = async (db: Database, name: string) => {
    creatorId: defaultCreatorId,
  });

+  const layoutId = createId();
+  await db.insert(layouts).values({
+    id: layoutId,
+    name: "Base",
+    columnCount: 10,
+    breakpoint: 0,
+    boardId,
+  });
+
  const sectionId = createId();
  await db.insert(sections).values({
    id: sectionId,
@@ -1339,12 +1537,18 @@ const createFullBoardAsync = async (db: Database, name: string) => {
  await db.insert(items).values({
    id: itemId,
    kind: "clock",
+    boardId,
+    options: SuperJSON.stringify({ is24HourFormat: true }),
+  });
+
+  await db.insert(itemLayouts).values({
    height: 1,
    width: 1,
    xOffset: 0,
    yOffset: 0,
    sectionId,
-    options: SuperJSON.stringify({ is24HourFormat: true }),
+    itemId,
+    layoutId,
  });

  const integrationId = createId();
@@ -1363,7 +1567,226 @@ const createFullBoardAsync = async (db: Database, name: string) => {
  return {
    boardId,
    sectionId,
+    layoutId,
    itemId,
    integrationId,
  };
 };
+
+const addItemAsync = async (
+  db: Database,
+  item: Partial<Pick<InferInsertModel<typeof itemLayouts>, "height" | "width" | "xOffset" | "yOffset">> & {
+    sectionId: string;
+    layoutId: string;
+    boardId: string;
+  },
+) => {
+  const itemId = createId();
+  await db.insert(items).values({
+    id: itemId,
+    kind: "clock",
+    boardId: item.boardId,
+    options: SuperJSON.stringify({ is24HourFormat: true }),
+  });
+  await db.insert(itemLayouts).values({
+    itemId,
+    layoutId: item.layoutId,
+    sectionId: item.sectionId,
+    height: item.height ?? 1,
+    width: item.width ?? 1,
+    xOffset: item.xOffset ?? 0,
+    yOffset: item.yOffset ?? 0,
+  });
+  return itemId;
+};
+
+const addDynamicSectionAsync = async (
+  db: Database,
+  section: Partial<Pick<InferInsertModel<typeof sectionLayouts>, "xOffset" | "yOffset" | "width" | "height">> & {
+    parentSectionId: string;
+    boardId: string;
+    layoutId: string;
+  },
+) => {
+  const sectionId = createId();
+  await db.insert(sections).values({
+    id: sectionId,
+    kind: "dynamic",
+    boardId: section.boardId,
+  });
+  await db.insert(sectionLayouts).values({
+    parentSectionId: section.parentSectionId,
+    layoutId: section.layoutId,
+    sectionId,
+    xOffset: section.xOffset ?? 0,
+    yOffset: section.yOffset ?? 0,
+    width: section.width ?? 1,
+    height: section.height ?? 1,
+  });
+  return sectionId;
+};
+
+const createItemsAndSectionsAsync = async (
+  db: Database,
+  options: { boardId: string; sectionId: string; layoutId: string },
+) => {
+  const { boardId, layoutId, sectionId } = options;
+  // From:
+  // abbbbbccdd
+  // efffffccdd
+  // efffffggdd
+  // efffffgg
+  // To:
+  // a
+  // bbb
+  // cce
+  // cce
+  // dde
+  // dd
+  // dd
+  // fff
+  // fff
+  // fff
+  // fff
+  // gg
+  // gg
+  const itemB = await addItemAsync(db, { boardId, layoutId, sectionId, xOffset: 1, width: 5 });
+  const itemC = await addItemAsync(db, { boardId, layoutId, sectionId, xOffset: 6, width: 2, height: 2 });
+  const itemD = await addItemAsync(db, { boardId, layoutId, sectionId, xOffset: 8, width: 2, height: 3 });
+  const itemE = await addItemAsync(db, { boardId, layoutId, sectionId, yOffset: 1, height: 3 });
+  const sectionF = await addDynamicSectionAsync(db, {
+    yOffset: 1,
+    xOffset: 1,
+    width: 5,
+    height: 3,
+    parentSectionId: sectionId,
+    boardId,
+    layoutId,
+  });
+  const sectionG = await addDynamicSectionAsync(db, {
+    yOffset: 2,
+    xOffset: 6,
+    width: 2,
+    height: 2,
+    parentSectionId: sectionId,
+    boardId,
+    layoutId,
+  });
+  // From:
+  // hhhhh
+  // iiijj
+  // iii
+  // To:
+  // hhh
+  // iii
+  // iii
+  // jj
+  const itemH = await addItemAsync(db, { boardId, layoutId, sectionId: sectionF, width: 5 });
+  const itemI = await addItemAsync(db, { boardId, layoutId, sectionId: sectionF, width: 3, height: 2, yOffset: 1 });
+  const itemJ = await addItemAsync(db, { boardId, layoutId, sectionId: sectionF, width: 2, yOffset: 1, xOffset: 2 });
+
+  return {
+    inRoot: {
+      b: itemB,
+      c: itemC,
+      d: itemD,
+      e: itemE,
+      f: sectionF,
+      g: sectionG,
+    },
+    inDynamicSection: {
+      h: itemH,
+      i: itemI,
+      j: itemJ,
+    },
+  };
+};
+
+const expectLayoutForRootLayoutAsync = async (
+  db: Database,
+  sectionId: string,
+  layoutId: string,
+  assignments: Record<string, string>,
+) => {
+  await expectLayoutInSectionAsync(
+    db,
+    sectionId,
+    layoutId,
+    `
+a
+bbb
+cce
+cce
+dde
+dd
+dd
+fff
+fff
+fff
+fff
+gg
+gg`,
+    assignments,
+  );
+};
+
+const expectLayoutForDynamicSectionAsync = async (
+  db: Database,
+  sectionId: string,
+  layoutId: string,
+  assignments: Record<string, string>,
+) => {
+  await expectLayoutInSectionAsync(
+    db,
+    sectionId,
+    layoutId,
+    `
+hhh
+iii
+iii
+jj`,
+    assignments,
+  );
+};
+
+const expectLayoutInSectionAsync = async (
+  db: Database,
+  sectionId: string,
+  layoutId: string,
+  layout: string,
+  assignments: Record<string, string>,
+) => {
+  const itemsInSection = await db.query.itemLayouts.findMany({
+    where: and(eq(itemLayouts.sectionId, sectionId), eq(itemLayouts.layoutId, layoutId)),
+  });
+  const sectionsInSection = await db.query.sectionLayouts.findMany({
+    where: and(eq(sectionLayouts.parentSectionId, sectionId), eq(sectionLayouts.layoutId, layoutId)),
+  });
+  const entries = [...itemsInSection, ...sectionsInSection];
+
+  const lines = layout.split("\n").slice(1);
+  const keys = Object.keys(assignments);
+  const positions: Record<string, { x: number; y: number; w: number; h: number }> = {};
+  for (let yOffset = 0; yOffset < lines.length; yOffset++) {
+    const line = lines[yOffset];
+    if (!line) continue;
+    for (let xOffset = 0; xOffset < line.length; xOffset++) {
+      const char = line[xOffset];
+      if (!char) continue;
+      if (!keys.includes(char)) continue;
+      if (char in positions) continue;
+      const width = line.split("").filter((lineChar) => lineChar === char).length;
+      const height = lines.slice(yOffset).filter((line) => line.substring(xOffset).startsWith(char)).length;
+      positions[char] = { x: xOffset, y: yOffset, w: width, h: height };
+    }
+  }
+
+  for (const [key, { x, y, w, h }] of Object.entries(positions)) {
+    const entry = entries.find((entry) => ("itemId" in entry ? entry.itemId : entry.sectionId) === assignments[key]);
+    expect(entry, `Expect entry for ${key} to be defined in assignments=${JSON.stringify(assignments)}`).toBeDefined();
+    expect(entry?.xOffset, `Expect xOffset of entry for ${key} to be ${x} for entry=${JSON.stringify(entry)}`).toBe(x);
+    expect(entry?.yOffset, `Expect yOffset of entry for ${key} to be ${y} for entry=${JSON.stringify(entry)}`).toBe(y);
+    expect(entry?.width, `Expect width of entry for ${key} to be ${w} for entry=${JSON.stringify(entry)}`).toBe(w);
+    expect(entry?.height, `Expect height of entry for ${key} to be ${h} for entry=${JSON.stringify(entry)}`).toBe(h);
+  }
+};
@@ -18,11 +18,13 @@ vi.mock("@homarr/common/server", async (importActual) => {
 describe("testConnectionAsync should run test connection of integration", () => {
  test("with input of only form secrets matching api key kind it should use form apiKey", async () => {
    // Arrange
-    const factorySpy = vi.spyOn(homarrIntegrations, "integrationCreator");
+    const factorySpy = vi.spyOn(homarrIntegrations, "createIntegrationAsync");
    const optionsSpy = vi.spyOn(homarrDefinitions, "getAllSecretKindOptions");
-    factorySpy.mockReturnValue({
-      testConnectionAsync: async () => await Promise.resolve(),
-    } as homarrIntegrations.PiHoleIntegration);
+    factorySpy.mockReturnValue(
+      Promise.resolve({
+        testConnectionAsync: async () => await Promise.resolve(),
+      } as homarrIntegrations.PiHoleIntegrationV6),
+    );
    optionsSpy.mockReturnValue([["apiKey"]]);

    const integration = {
@@ -58,11 +60,13 @@ describe("testConnectionAsync should run test connection of integration", () =>

  test("with input of only null form secrets and the required db secrets matching api key kind it should use db apiKey", async () => {
    // Arrange
-    const factorySpy = vi.spyOn(homarrIntegrations, "integrationCreator");
+    const factorySpy = vi.spyOn(homarrIntegrations, "createIntegrationAsync");
    const optionsSpy = vi.spyOn(homarrDefinitions, "getAllSecretKindOptions");
-    factorySpy.mockReturnValue({
-      testConnectionAsync: async () => await Promise.resolve(),
-    } as homarrIntegrations.PiHoleIntegration);
+    factorySpy.mockReturnValue(
+      Promise.resolve({
+        testConnectionAsync: async () => await Promise.resolve(),
+      } as homarrIntegrations.PiHoleIntegrationV6),
+    );
    optionsSpy.mockReturnValue([["apiKey"]]);

    const integration = {
@@ -105,11 +109,13 @@ describe("testConnectionAsync should run test connection of integration", () =>

  test("with input of form and db secrets matching api key kind it should use form apiKey", async () => {
    // Arrange
-    const factorySpy = vi.spyOn(homarrIntegrations, "integrationCreator");
+    const factorySpy = vi.spyOn(homarrIntegrations, "createIntegrationAsync");
    const optionsSpy = vi.spyOn(homarrDefinitions, "getAllSecretKindOptions");
-    factorySpy.mockReturnValue({
-      testConnectionAsync: async () => await Promise.resolve(),
-    } as homarrIntegrations.PiHoleIntegration);
+    factorySpy.mockReturnValue(
+      Promise.resolve({
+        testConnectionAsync: async () => await Promise.resolve(),
+      } as homarrIntegrations.PiHoleIntegrationV6),
+    );
    optionsSpy.mockReturnValue([["apiKey"]]);

    const integration = {
@@ -152,11 +158,13 @@ describe("testConnectionAsync should run test connection of integration", () =>

  test("with input of form apiKey and db secrets for username and password it should use form apiKey when both is allowed", async () => {
    // Arrange
-    const factorySpy = vi.spyOn(homarrIntegrations, "integrationCreator");
+    const factorySpy = vi.spyOn(homarrIntegrations, "createIntegrationAsync");
    const optionsSpy = vi.spyOn(homarrDefinitions, "getAllSecretKindOptions");
-    factorySpy.mockReturnValue({
-      testConnectionAsync: async () => await Promise.resolve(),
-    } as homarrIntegrations.PiHoleIntegration);
+    factorySpy.mockReturnValue(
+      Promise.resolve({
+        testConnectionAsync: async () => await Promise.resolve(),
+      } as homarrIntegrations.PiHoleIntegrationV6),
+    );
    optionsSpy.mockReturnValue([["username", "password"], ["apiKey"]]);

    const integration = {
@@ -203,11 +211,13 @@ describe("testConnectionAsync should run test connection of integration", () =>

  test("with input of null form apiKey and db secrets for username and password it should use db username and password when both is allowed", async () => {
    // Arrange
-    const factorySpy = vi.spyOn(homarrIntegrations, "integrationCreator");
+    const factorySpy = vi.spyOn(homarrIntegrations, "createIntegrationAsync");
    const optionsSpy = vi.spyOn(homarrDefinitions, "getAllSecretKindOptions");
-    factorySpy.mockReturnValue({
-      testConnectionAsync: async () => await Promise.resolve(),
-    } as homarrIntegrations.PiHoleIntegration);
+    factorySpy.mockReturnValue(
+      Promise.resolve({
+        testConnectionAsync: async () => await Promise.resolve(),
+      } as homarrIntegrations.PiHoleIntegrationV6),
+    );
    optionsSpy.mockReturnValue([["username", "password"], ["apiKey"]]);

    const integration = {
@@ -1,12 +1,12 @@
 import { observable } from "@trpc/server/observable";
+import { z } from "zod";

 import type { Modify } from "@homarr/common/types";
 import type { Integration } from "@homarr/db/schema";
 import type { IntegrationKindByCategory } from "@homarr/definitions";
 import { getIntegrationKindsByCategory } from "@homarr/definitions";
-import { integrationCreator } from "@homarr/integrations";
+import { createIntegrationAsync } from "@homarr/integrations";
 import type { DnsHoleSummary } from "@homarr/integrations/types";
-import { controlsInputSchema } from "@homarr/integrations/types";
 import { dnsHoleRequestHandler } from "@homarr/request-handler/dns-hole";

 import { createManyIntegrationMiddleware, createOneIntegrationMiddleware } from "../../middlewares/integration";
@@ -65,7 +65,7 @@ export const dnsHoleRouter = createTRPCRouter({
  enable: protectedProcedure
    .unstable_concat(createOneIntegrationMiddleware("interact", ...getIntegrationKindsByCategory("dnsHole")))
    .mutation(async ({ ctx: { integration } }) => {
-      const client = integrationCreator(integration);
+      const client = await createIntegrationAsync(integration);
      await client.enableAsync();

      const innerHandler = dnsHoleRequestHandler.handler(integration, {});
@@ -76,10 +76,14 @@ export const dnsHoleRouter = createTRPCRouter({
    }),

  disable: protectedProcedure
-    .input(controlsInputSchema)
+    .input(
+      z.object({
+        duration: z.number().optional(),
+      }),
+    )
    .unstable_concat(createOneIntegrationMiddleware("interact", ...getIntegrationKindsByCategory("dnsHole")))
    .mutation(async ({ ctx: { integration }, input }) => {
-      const client = integrationCreator(integration);
+      const client = await createIntegrationAsync(integration);
      await client.disableAsync(input.duration);

      const innerHandler = dnsHoleRequestHandler.handler(integration, {});
@@ -6,7 +6,7 @@ import type { Integration } from "@homarr/db/schema";
 import type { IntegrationKindByCategory } from "@homarr/definitions";
 import { getIntegrationKindsByCategory } from "@homarr/definitions";
 import type { DownloadClientJobsAndStatus } from "@homarr/integrations";
-import { downloadClientItemSchema, integrationCreator } from "@homarr/integrations";
+import { createIntegrationAsync, downloadClientItemSchema } from "@homarr/integrations";
 import { downloadClientRequestHandler } from "@homarr/request-handler/downloads";

 import type { IntegrationAction } from "../../middlewares/integration";
@@ -69,7 +69,7 @@ export const downloadsRouter = createTRPCRouter({
    .mutation(async ({ ctx }) => {
      await Promise.all(
        ctx.integrations.map(async (integration) => {
-          const integrationInstance = integrationCreator(integration);
+          const integrationInstance = await createIntegrationAsync(integration);
          await integrationInstance.pauseQueueAsync();
        }),
      );
@@ -80,7 +80,7 @@ export const downloadsRouter = createTRPCRouter({
    .mutation(async ({ ctx, input }) => {
      await Promise.all(
        ctx.integrations.map(async (integration) => {
-          const integrationInstance = integrationCreator(integration);
+          const integrationInstance = await createIntegrationAsync(integration);
          await integrationInstance.pauseItemAsync(input.item);
        }),
      );
@@ -90,7 +90,7 @@ export const downloadsRouter = createTRPCRouter({
    .mutation(async ({ ctx }) => {
      await Promise.all(
        ctx.integrations.map(async (integration) => {
-          const integrationInstance = integrationCreator(integration);
+          const integrationInstance = await createIntegrationAsync(integration);
          await integrationInstance.resumeQueueAsync();
        }),
      );
@@ -101,7 +101,7 @@ export const downloadsRouter = createTRPCRouter({
    .mutation(async ({ ctx, input }) => {
      await Promise.all(
        ctx.integrations.map(async (integration) => {
-          const integrationInstance = integrationCreator(integration);
+          const integrationInstance = await createIntegrationAsync(integration);
          await integrationInstance.resumeItemAsync(input.item);
        }),
      );
@@ -112,7 +112,7 @@ export const downloadsRouter = createTRPCRouter({
    .mutation(async ({ ctx, input }) => {
      await Promise.all(
        ctx.integrations.map(async (integration) => {
-          const integrationInstance = integrationCreator(integration);
+          const integrationInstance = await createIntegrationAsync(integration);
          await integrationInstance.deleteItemAsync(input.item, input.fromDisk);
        }),
      );
@@ -2,7 +2,7 @@ import { TRPCError } from "@trpc/server";
 import { observable } from "@trpc/server/observable";

 import { getIntegrationKindsByCategory } from "@homarr/definitions";
-import { integrationCreator } from "@homarr/integrations";
+import { createIntegrationAsync } from "@homarr/integrations";
 import type { Indexer } from "@homarr/integrations/types";
 import { logger } from "@homarr/log";
 import { indexerManagerRequestHandler } from "@homarr/request-handler/indexer-manager";
@@ -59,7 +59,7 @@ export const indexerManagerRouter = createTRPCRouter({
    .mutation(async ({ ctx }) => {
      await Promise.all(
        ctx.integrations.map(async (integration) => {
-          const client = integrationCreator(integration);
+          const client = await createIntegrationAsync(integration);
          await client.testAllAsync().catch((err) => {
            logger.error("indexer-manager router - ", err);
            throw new TRPCError({
@@ -2,7 +2,7 @@ import { observable } from "@trpc/server/observable";
 import { z } from "zod";

 import { getIntegrationKindsByCategory } from "@homarr/definitions";
-import { integrationCreator, MediaRequestStatus } from "@homarr/integrations";
+import { createIntegrationAsync } from "@homarr/integrations";
 import type { MediaRequest } from "@homarr/integrations/types";
 import { mediaRequestListRequestHandler } from "@homarr/request-handler/media-request-list";
 import { mediaRequestStatsRequestHandler } from "@homarr/request-handler/media-request-stats";
@@ -30,14 +30,12 @@ export const mediaRequestsRouter = createTRPCRouter({
      );
      return results
        .flatMap(({ data, integration }) => data.map((request) => ({ ...request, integrationId: integration.id })))
-        .sort(({ status: statusA }, { status: statusB }) => {
-          if (statusA === MediaRequestStatus.PendingApproval) {
-            return -1;
+        .sort((dataA, dataB) => {
+          if (dataA.status === dataB.status) {
+            return dataB.createdAt.getTime() - dataA.createdAt.getTime();
          }
-          if (statusB === MediaRequestStatus.PendingApproval) {
-            return 1;
-          }
-          return 0;
+
+          return dataA.status - dataB.status;
        });
    }),
  subscribeToLatestRequests: publicProcedure
@@ -96,7 +94,7 @@ export const mediaRequestsRouter = createTRPCRouter({
    .unstable_concat(createOneIntegrationMiddleware("interact", ...getIntegrationKindsByCategory("mediaRequest")))
    .input(z.object({ requestId: z.number(), answer: z.enum(["approve", "decline"]) }))
    .mutation(async ({ ctx: { integration }, input }) => {
-      const integrationInstance = integrationCreator(integration);
+      const integrationInstance = await createIntegrationAsync(integration);
      const innerHandler = mediaRequestListRequestHandler.handler(integration, {});

      if (input.answer === "approve") {
@@ -19,16 +19,9 @@ export const notebookRouter = createTRPCRouter({
    .mutation(async ({ ctx, input }) => {
      const item = await ctx.db.query.items.findFirst({
        where: eq(items.id, input.itemId),
-        with: {
-          section: {
-            columns: {
-              boardId: true,
-            },
-          },
-        },
      });

-      if (!item || item.section.boardId !== input.boardId) {
+      if (!item || item.boardId !== input.boardId) {
        throw new TRPCError({
          code: "NOT_FOUND",
          message: "Specified item was not found",
@@ -2,7 +2,7 @@ import { observable } from "@trpc/server/observable";
 import { z } from "zod";

 import { getIntegrationKindsByCategory } from "@homarr/definitions";
-import { integrationCreator } from "@homarr/integrations";
+import { createIntegrationAsync } from "@homarr/integrations";
 import { smartHomeEntityStateRequestHandler } from "@homarr/request-handler/smart-home-entity-state";

 import type { IntegrationAction } from "../../middlewares/integration";
@@ -45,7 +45,7 @@ export const smartHomeRouter = createTRPCRouter({
    .unstable_concat(createSmartHomeIntegrationMiddleware("interact"))
    .input(z.object({ entityId: z.string() }))
    .mutation(async ({ ctx: { integration }, input }) => {
-      const client = integrationCreator(integration);
+      const client = await createIntegrationAsync(integration);
      const success = await client.triggerToggleAsync(input.entityId);

      const innerHandler = smartHomeEntityStateRequestHandler.handler(integration, { entityId: input.entityId });
@@ -57,7 +57,7 @@ export const smartHomeRouter = createTRPCRouter({
    .unstable_concat(createSmartHomeIntegrationMiddleware("interact"))
    .input(z.object({ automationId: z.string() }))
    .mutation(async ({ ctx: { integration }, input }) => {
-      const client = integrationCreator(integration);
+      const client = await createIntegrationAsync(integration);
      await client.triggerAutomationAsync(input.automationId);
    }),
 });
@@ -2,7 +2,7 @@
  "name": "@homarr/auth",
  "version": "0.1.0",
  "private": true,
-  "license": "MIT",
+  "license": "Apache-2.0",
  "type": "module",
  "exports": {
    ".": "./index.ts",
@@ -23,8 +23,9 @@
  },
  "prettier": "@homarr/prettier-config",
  "dependencies": {
-    "@auth/core": "^0.37.4",
-    "@auth/drizzle-adapter": "^1.7.4",
+    "@auth/core": "^0.38.0",
+    "@auth/drizzle-adapter": "^1.8.0",
+    "@homarr/certificates": "workspace:^0.1.0",
    "@homarr/common": "workspace:^0.1.0",
    "@homarr/db": "workspace:^0.1.0",
    "@homarr/definitions": "workspace:^0.1.0",
@@ -47,8 +48,8 @@
    "@homarr/tsconfig": "workspace:^0.1.0",
    "@types/bcrypt": "5.0.2",
    "@types/cookies": "0.9.0",
-    "eslint": "^9.20.1",
-    "prettier": "^3.5.1",
-    "typescript": "^5.7.3"
+    "eslint": "^9.21.0",
+    "prettier": "^3.5.3",
+    "typescript": "^5.8.2"
  }
 }
@@ -11,9 +11,7 @@ interface Integration {
  id: string;
  items: {
    item: {
-      section: {
-        boardId: string;
-      };
+      boardId: string;
    };
  }[];
  userPermissions: {
@@ -56,7 +54,7 @@ export const hasQueryAccessToIntegrationsAsync = async (

  const integrationsWithBoardIds = integrationsWithoutUseAccessAndWithoutBoardViewAllAccess.map((integration) => ({
    id: integration.id,
-    anyOfBoardIds: integration.items.map(({ item }) => item.section.boardId),
+    anyOfBoardIds: integration.items.map(({ item }) => item.boardId),
  }));

  const permissionsOfCurrentUserWhenPresent = await db.query.boardUserPermissions.findMany({
@@ -29,13 +29,13 @@ describe("hasQueryAccessToIntegrationsAsync should check if the user has query a
    const integrations = [
      {
        id: "1",
-        items: [{ item: { section: { boardId: "1" } } }],
+        items: [{ item: { boardId: "1" } }],
        userPermissions: [],
        groupPermissions: [],
      },
      {
        id: "2",
-        items: [{ item: { section: { boardId: "2" } } }],
+        items: [{ item: { boardId: "2" } }],
        userPermissions: [],
        groupPermissions: [],
      },
@@ -63,7 +63,7 @@ describe("hasQueryAccessToIntegrationsAsync should check if the user has query a
    const integrations = [
      {
        id: "1",
-        items: [{ item: { section: { boardId: "1" } } }],
+        items: [{ item: { boardId: "1" } }],
        userPermissions: [],
        groupPermissions: [],
      },
@@ -131,9 +131,7 @@ describe("hasQueryAccessToIntegrationsAsync should check if the user has query a
        items: [
          {
            item: {
-              section: {
-                boardId: "1",
-              },
+              boardId: "1",
            },
          },
        ],
@@ -145,16 +143,12 @@ describe("hasQueryAccessToIntegrationsAsync should check if the user has query a
        items: [
          {
            item: {
-              section: {
-                boardId: "1",
-              },
+              boardId: "1",
            },
          },
          {
            item: {
-              section: {
-                boardId: "2",
-              },
+              boardId: "2",
            },
          },
        ],
@@ -189,9 +183,7 @@ describe("hasQueryAccessToIntegrationsAsync should check if the user has query a
        items: [
          {
            item: {
-              section: {
-                boardId: "1",
-              },
+              boardId: "1",
            },
          },
        ],
@@ -203,9 +195,7 @@ describe("hasQueryAccessToIntegrationsAsync should check if the user has query a
        items: [
          {
            item: {
-              section: {
-                boardId: "2",
-              },
+              boardId: "2",
            },
          },
        ],
@@ -240,9 +230,7 @@ describe("hasQueryAccessToIntegrationsAsync should check if the user has query a
        items: [
          {
            item: {
-              section: {
-                boardId: "1",
-              },
+              boardId: "1",
            },
          },
        ],
@@ -254,16 +242,12 @@ describe("hasQueryAccessToIntegrationsAsync should check if the user has query a
        items: [
          {
            item: {
-              section: {
-                boardId: "1",
-              },
+              boardId: "1",
            },
          },
          {
            item: {
-              section: {
-                boardId: "2",
-              },
+              boardId: "2",
            },
          },
        ],
@@ -300,9 +284,7 @@ describe("hasQueryAccessToIntegrationsAsync should check if the user has query a
        items: [
          {
            item: {
-              section: {
-                boardId: "1",
-              },
+              boardId: "1",
            },
          },
        ],
@@ -314,9 +296,7 @@ describe("hasQueryAccessToIntegrationsAsync should check if the user has query a
        items: [
          {
            item: {
-              section: {
-                boardId: "2",
-              },
+              boardId: "2",
            },
          },
        ],
@@ -353,9 +333,7 @@ describe("hasQueryAccessToIntegrationsAsync should check if the user has query a
        items: [
          {
            item: {
-              section: {
-                boardId: "1",
-              },
+              boardId: "1",
            },
          },
        ],
@@ -367,9 +345,7 @@ describe("hasQueryAccessToIntegrationsAsync should check if the user has query a
        items: [
          {
            item: {
-              section: {
-                boardId: "2",
-              },
+              boardId: "2",
            },
          },
        ],
@@ -401,9 +377,7 @@ describe("hasQueryAccessToIntegrationsAsync should check if the user has query a
        items: [
          {
            item: {
-              section: {
-                boardId: "1",
-              },
+              boardId: "1",
            },
          },
        ],
@@ -415,16 +389,12 @@ describe("hasQueryAccessToIntegrationsAsync should check if the user has query a
        items: [
          {
            item: {
-              section: {
-                boardId: "2",
-              },
+              boardId: "2",
            },
          },
          {
            item: {
-              section: {
-                boardId: "1",
-              },
+              boardId: "1",
            },
          },
        ],
@@ -452,9 +422,7 @@ describe("hasQueryAccessToIntegrationsAsync should check if the user has query a
        items: [
          {
            item: {
-              section: {
-                boardId: "1",
-              },
+              boardId: "1",
            },
          },
        ],
@@ -466,16 +434,12 @@ describe("hasQueryAccessToIntegrationsAsync should check if the user has query a
        items: [
          {
            item: {
-              section: {
-                boardId: "2",
-              },
+              boardId: "2",
            },
          },
          {
            item: {
-              section: {
-                boardId: "1",
-              },
+              boardId: "1",
            },
          },
        ],
@@ -502,9 +466,7 @@ describe("hasQueryAccessToIntegrationsAsync should check if the user has query a
        items: [
          {
            item: {
-              section: {
-                boardId: "1",
-              },
+              boardId: "1",
            },
          },
        ],
@@ -516,9 +478,7 @@ describe("hasQueryAccessToIntegrationsAsync should check if the user has query a
        items: [
          {
            item: {
-              section: {
-                boardId: "2",
-              },
+              boardId: "2",
            },
          },
        ],
@@ -543,9 +503,7 @@ describe("hasQueryAccessToIntegrationsAsync should check if the user has query a
        items: [
          {
            item: {
-              section: {
-                boardId: "1",
-              },
+              boardId: "1",
            },
          },
        ],
@@ -557,9 +515,7 @@ describe("hasQueryAccessToIntegrationsAsync should check if the user has query a
        items: [
          {
            item: {
-              section: {
-                boardId: "2",
-              },
+              boardId: "2",
            },
          },
        ],
@@ -585,9 +541,7 @@ describe("hasQueryAccessToIntegrationsAsync should check if the user has query a
        items: [
          {
            item: {
-              section: {
-                boardId: "1",
-              },
+              boardId: "1",
            },
          },
        ],
@@ -599,16 +553,12 @@ describe("hasQueryAccessToIntegrationsAsync should check if the user has query a
        items: [
          {
            item: {
-              section: {
-                boardId: "2",
-              },
+              boardId: "2",
            },
          },
          {
            item: {
-              section: {
-                boardId: "1",
-              },
+              boardId: "1",
            },
          },
        ],
@@ -1,6 +1,9 @@
 import type { ReadonlyHeaders } from "next/dist/server/web/spec-extension/adapters/headers";
 import type { OIDCConfig } from "@auth/core/providers";
 import type { Profile } from "@auth/core/types";
+import { customFetch } from "next-auth";
+
+import { fetchWithTrustedCertificatesAsync } from "@homarr/certificates/server";

 import { env } from "../../env";
 import { createRedirectUri } from "../../redirect";
@@ -35,6 +38,10 @@ export const OidcProvider = (headers: ReadonlyHeaders | null): OIDCConfig<Profil
      provider: "oidc",
    };
  },
+  // The type for fetch is not identical, but for what we need it it's okay to not be an 1:1 match
+  // See documentation https://authjs.dev/guides/corporate-proxy?framework=next-js
+  // @ts-expect-error `undici` has a `duplex` option
+  [customFetch]: fetchWithTrustedCertificatesAsync,
 });

 export const extractProfileName = (profile: Profile) => {
@@ -11,6 +11,7 @@ import { colorSchemeCookieKey, everyoneGroup } from "@homarr/definitions";

 import { createSignInEventHandler } from "../events";

+vi.mock("next-auth", () => ({}));
 vi.mock("../env", () => {
  return {
    env: {
@@ -2,7 +2,7 @@
  "name": "@homarr/boards",
  "version": "0.1.0",
  "private": true,
-  "license": "MIT",
+  "license": "Apache-2.0",
  "type": "module",
  "exports": {
    "./context": "./src/context.tsx",
@@ -32,7 +32,7 @@
    "@homarr/eslint-config": "workspace:^0.2.0",
    "@homarr/prettier-config": "workspace:^0.1.0",
    "@homarr/tsconfig": "workspace:^0.1.0",
-    "eslint": "^9.20.1",
-    "typescript": "^5.7.3"
+    "eslint": "^9.21.0",
+    "typescript": "^5.8.2"
  }
 }
@@ -1,7 +1,7 @@
 "use client";

 import type { PropsWithChildren } from "react";
-import { createContext, useContext, useEffect } from "react";
+import { createContext, useCallback, useContext, useEffect, useState } from "react";
 import { usePathname } from "next/navigation";

 import type { RouterOutputs } from "@homarr/api";
@@ -10,7 +10,7 @@ import { clientApi } from "@homarr/api/client";
 import { updateBoardName } from "./updater";

 const BoardContext = createContext<{
-  board: RouterOutputs["board"]["getHomeBoard"];
+  board: RouterOutputs["board"]["getBoardByName"];
 } | null>(null);

 export const BoardProvider = ({
@@ -68,3 +68,43 @@ export const useOptionalBoard = () => {

  return context?.board ?? null;
 };
+
+export const getCurrentLayout = (board: RouterOutputs["board"]["getBoardByName"]) => {
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  if (typeof window === "undefined") return board.layouts.at(0)!.id;
+
+  const sortedLayouts = board.layouts.sort((layoutA, layoutB) => layoutB.breakpoint - layoutA.breakpoint);
+
+  // Fallback to smallest if none exists with breakpoint smaller than window width
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  return sortedLayouts.find((layout) => layout.breakpoint <= window.innerWidth)?.id ?? sortedLayouts.at(0)!.id;
+};
+
+export const useCurrentLayout = () => {
+  const board = useRequiredBoard();
+  const [currentLayout, setCurrentLayout] = useState(getCurrentLayout(board));
+
+  const onResize = useCallback(() => {
+    setCurrentLayout(getCurrentLayout(board));
+  }, [board]);
+
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    window.addEventListener("resize", onResize);
+
+    return () => {
+      window.removeEventListener("resize", onResize);
+    };
+  }, [onResize]);
+
+  return currentLayout;
+};
+
+export const getBoardLayouts = (board: RouterOutputs["board"]["getBoardByName"]) =>
+  board.layouts.map((layout) => layout.id);
+
+export const useLayouts = () => {
+  const board = useRequiredBoard();
+
+  return getBoardLayouts(board);
+};
@@ -2,7 +2,7 @@
  "name": "@homarr/certificates",
  "version": "0.1.0",
  "private": true,
-  "license": "MIT",
+  "license": "Apache-2.0",
  "type": "module",
  "exports": {
    "./server": "./src/server.ts"
@@ -23,13 +23,13 @@
  "prettier": "@homarr/prettier-config",
  "dependencies": {
    "@homarr/common": "workspace:^0.1.0",
-    "undici": "7.3.0"
+    "undici": "7.4.0"
  },
  "devDependencies": {
    "@homarr/eslint-config": "workspace:^0.2.0",
    "@homarr/prettier-config": "workspace:^0.1.0",
    "@homarr/tsconfig": "workspace:^0.1.0",
-    "eslint": "^9.20.1",
-    "typescript": "^5.7.3"
+    "eslint": "^9.21.0",
+    "typescript": "^5.8.2"
  }
 }
@@ -2,7 +2,7 @@
  "name": "@homarr/cli",
  "version": "0.1.0",
  "private": true,
-  "license": "MIT",
+  "license": "Apache-2.0",
  "type": "module",
  "exports": {
    ".": "./index.ts"
@@ -33,7 +33,7 @@
    "@homarr/eslint-config": "workspace:^0.2.0",
    "@homarr/prettier-config": "workspace:^0.1.0",
    "@homarr/tsconfig": "workspace:^0.1.0",
-    "eslint": "^9.20.1",
-    "typescript": "^5.7.3"
+    "eslint": "^9.21.0",
+    "typescript": "^5.8.2"
  }
 }
@@ -2,7 +2,7 @@
  "name": "@homarr/common",
  "version": "0.1.0",
  "private": true,
-  "license": "MIT",
+  "license": "Apache-2.0",
  "type": "module",
  "exports": {
    ".": "./index.ts",
@@ -33,14 +33,14 @@
    "next": "15.1.7",
    "react": "19.0.0",
    "react-dom": "19.0.0",
-    "undici": "7.3.0",
+    "undici": "7.4.0",
    "zod": "^3.24.2"
  },
  "devDependencies": {
    "@homarr/eslint-config": "workspace:^0.2.0",
    "@homarr/prettier-config": "workspace:^0.1.0",
    "@homarr/tsconfig": "workspace:^0.1.0",
-    "eslint": "^9.20.1",
-    "typescript": "^5.7.3"
+    "eslint": "^9.21.0",
+    "typescript": "^5.8.2"
  }
 }
@@ -2,7 +2,7 @@
  "name": "@homarr/cron-job-runner",
  "version": "0.1.0",
  "private": true,
-  "license": "MIT",
+  "license": "Apache-2.0",
  "type": "module",
  "exports": {
    ".": "./index.ts"
@@ -30,7 +30,7 @@
    "@homarr/eslint-config": "workspace:^0.2.0",
    "@homarr/prettier-config": "workspace:^0.1.0",
    "@homarr/tsconfig": "workspace:^0.1.0",
-    "eslint": "^9.20.1",
-    "typescript": "^5.7.3"
+    "eslint": "^9.21.0",
+    "typescript": "^5.8.2"
  }
 }
@@ -2,7 +2,7 @@
  "name": "@homarr/cron-job-status",
  "version": "0.1.0",
  "private": true,
-  "license": "MIT",
+  "license": "Apache-2.0",
  "type": "module",
  "exports": {
    ".": "./index.ts",
@@ -29,7 +29,7 @@
    "@homarr/eslint-config": "workspace:^0.2.0",
    "@homarr/prettier-config": "workspace:^0.1.0",
    "@homarr/tsconfig": "workspace:^0.1.0",
-    "eslint": "^9.20.1",
-    "typescript": "^5.7.3"
+    "eslint": "^9.21.0",
+    "typescript": "^5.8.2"
  }
 }
@@ -2,7 +2,7 @@
  "name": "@homarr/cron-jobs-core",
  "version": "0.1.0",
  "private": true,
-  "license": "MIT",
+  "license": "Apache-2.0",
  "type": "module",
  "exports": {
    ".": "./index.ts",
@@ -32,7 +32,7 @@
    "@homarr/prettier-config": "workspace:^0.1.0",
    "@homarr/tsconfig": "workspace:^0.1.0",
    "@types/node-cron": "^3.0.11",
-    "eslint": "^9.20.1",
-    "typescript": "^5.7.3"
+    "eslint": "^9.21.0",
+    "typescript": "^5.8.2"
  }
 }
@@ -1,3 +1,4 @@
+import { AxiosError } from "axios";
 import cron from "node-cron";

 import { Stopwatch } from "@homarr/common";
@@ -48,8 +49,15 @@ const createCallback = <TAllowedNames extends string, TName extends TAllowedName
        }
        await creatorOptions.onCallbackSuccess?.(name);
      } catch (error) {
-        // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
-        creatorOptions.logger.logError(`Failed to run job '${name}': ${error}`);
+        // Log AxiosError in a less detailed way to prevent very long output
+        if (error instanceof AxiosError) {
+          creatorOptions.logger.logError(
+            `Failed to run job '${name}': [AxiosError] ${error.message} ${error.response?.status} ${error.response?.config.url}\n${error.stack}`,
+          );
+        } else {
+          // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
+          creatorOptions.logger.logError(`Failed to run job '${name}': ${error}`);
+        }
        await creatorOptions.onCallbackError?.(name, error);
      }
    };
Author	SHA1	Message	Date
Releases Homarr	f25837f9f8	chore(release): 1.10.0 [skip ci]	2025-03-07 19:13:59 +00:00
homarr-releases[bot]	44007b2b4b	chore(release): automatic release v1.10.0	2025-03-07 19:13:16 +00:00
ManuelandMeier Lukas	37d471457a	feat: remove cqmin system (#2407 ) * feat: remove cqmin system * fix: improve weather widget --------- Co-authored-by: Meier Lukas <meierschlumpf@gmail.com>	2025-03-07 18:46:01 +01:00
Meier Lukas	9881577f47	fix(pi-hole): wrong fetch used in factory (#2527 )	2025-03-07 18:14:50 +01:00
homarr-renovate[bot]	a572aae887	fix(deps): update tanstack-query monorepo to ^5.67.2 (#2525 ) Co-authored-by: homarr-renovate[bot] <158783068+homarr-renovate[bot]@users.noreply.github.com>	2025-03-07 11:15:49 +00:00
homarr-renovate[bot]	4721a97094	fix(deps): update dependency eslint-config-prettier to ^10.1.1 (#2524 ) Co-authored-by: homarr-renovate[bot] <158783068+homarr-renovate[bot]@users.noreply.github.com>	2025-03-07 10:19:12 +00:00
homarr-crowdin[bot]	15026afa46	chore(lang): updated translations from crowdin Co-authored-by: Crowdin Homarr <190541745+homarr-crowdin[bot]@users.noreply.github.com>	2025-03-07 00:47:20 +00:00
Meier Lukas	3403579925	chore(issue-template): add missing homarr versions until 1.9.0	2025-03-06 17:57:48 +01:00
Meier Lukas	da4aaba9f0	Merge branch 'main' into dev	2025-03-06 17:54:14 +01:00
homarr-renovate[bot]	98dd96f37c	chore(deps): update vitest monorepo to ^3.0.8 (#2519 ) Co-authored-by: homarr-renovate[bot] <158783068+homarr-renovate[bot]@users.noreply.github.com>	2025-03-06 15:37:30 +00:00
homarr-renovate[bot]	67c739c35b	fix(deps): update dependency mysql2 to v3.13.0 (#2516 ) Co-authored-by: homarr-renovate[bot] <158783068+homarr-renovate[bot]@users.noreply.github.com>	2025-03-06 06:19:00 +00:00
homarr-crowdin[bot]	6f8b3de903	chore(lang): updated translations from crowdin Co-authored-by: Crowdin Homarr <190541745+homarr-crowdin[bot]@users.noreply.github.com>	2025-03-06 00:47:27 +00:00
homarr-renovate[bot]	e4a39223a3	fix(deps): update dependency ioredis to v5.6.0 (#2509 ) Co-authored-by: homarr-renovate[bot] <158783068+homarr-renovate[bot]@users.noreply.github.com>	2025-03-05 21:33:39 +00:00
Releases Homarr	72860a877b	chore(release): 1.9.0 [skip ci]	2025-03-05 19:01:09 +00:00
homarr-releases[bot]	0f3089a1bd	chore(release): automatic release v1.9.0	2025-03-05 19:00:29 +00:00
homarr-crowdin[bot]	84519bf734	chore(lang): updated translations from crowdin Co-authored-by: Crowdin Homarr <190541745+homarr-crowdin[bot]@users.noreply.github.com>	2025-03-05 00:47:09 +00:00
homarr-renovate[bot]	478aae6cd4	fix(deps): update dependency @tabler/icons-react to ^3.31.0 (#2502 ) Co-authored-by: homarr-renovate[bot] <158783068+homarr-renovate[bot]@users.noreply.github.com>	2025-03-04 23:54:15 +00:00
Meier Lukas	604a05f9d5	fix: affix hides pagination on mobile (#2491 )	2025-03-04 22:01:58 +01:00
Meier Lukas	b3e4f30312	fix(integration): store omv session in redis (#2467 ) * feat(pihole): add support for v6 * fix: add session-store to keep using same session for pi-hole requests * fix(integration): store omv session in redis * chore: address pull request feedback	2025-03-04 21:46:11 +01:00
Manuel	a3999bcf52	fix: docker add to homarr layout overflow (#2441 )	2025-03-04 21:39:38 +01:00
Meier Lukas	3804d530ec	feat(pihole): add support for v6 (#2448 ) * feat(pihole): add support for v6 * fix: add session-store to keep using same session for pi-hole requests * chore: address pull request feedback * fix: import issue * fix: other import errors	2025-03-04 21:17:35 +01:00
homarr-renovate[bot]	e88b29dc9d	chore(deps): update dependency @types/ws to ^8.18.0 (#2499 ) Co-authored-by: homarr-renovate[bot] <158783068+homarr-renovate[bot]@users.noreply.github.com>	2025-03-04 19:14:45 +00:00
homarr-crowdin[bot]	d470ea4ede	chore(lang): updated translations from crowdin Co-authored-by: Crowdin Homarr <190541745+homarr-crowdin[bot]@users.noreply.github.com>	2025-03-04 00:47:03 +00:00
homarr-renovate[bot]	21f3a5a408	fix(deps): update dependency typescript-eslint to ^8.26.0 (#2488 ) Co-authored-by: homarr-renovate[bot] <158783068+homarr-renovate[bot]@users.noreply.github.com>	2025-03-03 18:42:27 +00:00
homarr-renovate[bot]	14f3fbfc82	chore(deps): update dependency @types/node to ^22.13.9 (#2489 ) Co-authored-by: homarr-renovate[bot] <158783068+homarr-renovate[bot]@users.noreply.github.com>	2025-03-03 18:21:14 +00:00
homarr-renovate[bot]	6135b59b7d	fix(deps): update tanstack-query monorepo to ^5.67.1 (#2487 ) Co-authored-by: homarr-renovate[bot] <158783068+homarr-renovate[bot]@users.noreply.github.com>	2025-03-03 16:20:08 +00:00
homarr-renovate[bot]	bad07cbf25	fix(deps): update tanstack-query monorepo to ^5.67.0 (#2486 ) Co-authored-by: homarr-renovate[bot] <158783068+homarr-renovate[bot]@users.noreply.github.com>	2025-03-03 15:54:49 +00:00
homarr-renovate[bot]	49b0f962e0	fix(deps): update dependency prettier to ^3.5.3 (#2485 ) Co-authored-by: homarr-renovate[bot] <158783068+homarr-renovate[bot]@users.noreply.github.com>	2025-03-03 02:25:21 +00:00
homarr-crowdin[bot]	c94fa4e999	chore(lang): updated translations from crowdin Co-authored-by: Crowdin Homarr <190541745+homarr-crowdin[bot]@users.noreply.github.com>	2025-03-03 00:48:29 +00:00
homarr-renovate[bot]	be771e5630	chore(deps): update dependency prettier-plugin-packagejson to ^2.5.10 (#2483 ) Co-authored-by: homarr-renovate[bot] <158783068+homarr-renovate[bot]@users.noreply.github.com>	2025-03-02 22:54:45 +00:00
Meier Lukas	a5e0e8c129	feat: add sigterm support (#2472 )	2025-03-02 20:28:11 +01:00
Jack Weller	7dfb108a56	feat: added bordercolor option for dynamic section (#2334 )	2025-03-02 11:39:17 +01:00
Meier Lukas	7dfc3646b7	feat(integration): add emby integration (#2466 ) * feat(integration): add emby integration * fix: deepsource issue	2025-03-02 10:56:01 +01:00
Meier Lukas	d66610b324	refactor: replace drizzle count with $count (#2471 )	2025-03-02 10:54:44 +01:00
Meier Lukas	9eb76634d0	fix(logs): add special case for axios error to prevent huge error messages (#2468 )	2025-03-02 10:54:35 +01:00
homarr-crowdin[bot]	e1d69f91e7	chore(lang): updated translations from crowdin Co-authored-by: Crowdin Homarr <190541745+homarr-crowdin[bot]@users.noreply.github.com>	2025-03-02 00:49:50 +00:00
Meier Lukas	80c2040b13	feat(media-request): show request status (#2465 )	2025-03-01 22:44:38 +01:00
Meier Lukas	43619e0cc0	fix(media-request): inconsistent sorting and reordering (#2464 )	2025-03-01 22:44:26 +01:00
Meier Lukas	6fad48f65a	feat: use fetch with trusted certificates for oidc (#2412 ) * feat: use fetch with trusted certificates for oidc * fix: change custom-fetch symbol from auth-core to next-auth * test: add mock for next-auth in events test * refactor: use package import instead of relative import	2025-03-01 17:24:31 +01:00
Meier Lukas	788304adfb	fix(old-import): default logo and favicon not replaced (#2456 )	2025-03-01 17:24:07 +01:00
Meier Lukas	c0e354428a	fix(boards): case-sensitive board names in url (#2454 )	2025-03-01 17:23:31 +01:00
Meier Lukas	286cc0fcac	chore(license): update license property in package-json to match repository license (#2453 )	2025-03-01 17:23:00 +01:00
homarr-renovate[bot]	d9ef1b0470	fix(deps): update mantine monorepo to ^7.17.1 (#2462 ) Co-authored-by: homarr-renovate[bot] <158783068+homarr-renovate[bot]@users.noreply.github.com>	2025-03-01 09:45:24 +00:00
homarr-crowdin[bot]	163e3b007f	chore(lang): updated translations from crowdin Co-authored-by: Crowdin Homarr <190541745+homarr-crowdin[bot]@users.noreply.github.com>	2025-03-01 09:31:58 +00:00
homarr-renovate[bot]	f4b302bbf8	chore(deps): update dependency @types/node to ^22.13.8 (#2460 ) Co-authored-by: homarr-renovate[bot] <158783068+homarr-renovate[bot]@users.noreply.github.com>	2025-03-01 06:56:23 +00:00
homarr-renovate[bot]	3c1cdb5e6e	chore(deps): update dependency @types/node to ^22.13.7 (#2455 ) Co-authored-by: homarr-renovate[bot] <158783068+homarr-renovate[bot]@users.noreply.github.com>	2025-02-28 22:18:06 +00:00
Meier Lukas	f0b932432b	chore(docs): update docs-sitemap	2025-02-28 22:56:48 +01:00
homarr-renovate[bot]	df13d67b42	chore(deps): update dependency @types/node to ^22.13.6 (#2452 ) Co-authored-by: homarr-renovate[bot] <158783068+homarr-renovate[bot]@users.noreply.github.com>	2025-02-28 21:17:25 +00:00
Releases Homarr	932426550b	chore(release): 1.8.0 [skip ci]	2025-02-28 19:15:23 +00:00
homarr-releases[bot]	d0ede4d643	chore(release): automatic release v1.8.0	2025-02-28 19:14:31 +00:00
homarr-renovate[bot]	14da6727e0	chore(deps): update dependency typescript to ^5.8.2 (#2450 ) Co-authored-by: homarr-renovate[bot] <158783068+homarr-renovate[bot]@users.noreply.github.com>	2025-02-28 17:17:33 +00:00
homarr-renovate[bot]	a88c1ba440	fix(deps): update dependency eslint-plugin-react-hooks to ^5.2.0 (#2449 ) Co-authored-by: homarr-renovate[bot] <158783068+homarr-renovate[bot]@users.noreply.github.com>	2025-02-28 15:47:55 +00:00
homarr-renovate[bot]	5537f95b85	fix(deps): update tanstack-query monorepo to ^5.66.11 (#2447 ) Co-authored-by: homarr-renovate[bot] <158783068+homarr-renovate[bot]@users.noreply.github.com>	2025-02-28 14:16:26 +00:00
homarr-renovate[bot]	d8e7dfa2fa	chore(deps): update dependency prettier-plugin-packagejson to ^2.5.9 (#2446 ) Co-authored-by: homarr-renovate[bot] <158783068+homarr-renovate[bot]@users.noreply.github.com>	2025-02-28 11:54:56 +00:00
homarr-renovate[bot]	06ba0f0e9f	fix(deps): update dependency undici to v7.4.0 (#2445 ) Co-authored-by: homarr-renovate[bot] <158783068+homarr-renovate[bot]@users.noreply.github.com>	2025-02-28 11:16:57 +00:00
homarr-renovate[bot]	11d2972713	chore(deps): update dependency proxmox-api>undici to v7.4.0 (#2444 ) Co-authored-by: homarr-renovate[bot] <158783068+homarr-renovate[bot]@users.noreply.github.com>	2025-02-28 11:16:07 +00:00
homarr-renovate[bot]	4483dc8bcd	fix(deps): update tanstack-query monorepo to ^5.66.10 (#2443 ) Co-authored-by: homarr-renovate[bot] <158783068+homarr-renovate[bot]@users.noreply.github.com>	2025-02-28 10:39:10 +00:00
Manuel	50367eb2f5	fix: chinese traditional locale (#2440 )	2025-02-27 21:49:41 +01:00
Meier Lukas	fdd91f585d	fix(deps): downgrade to next 15.1.7 cause of turbopack crash with 15.2.0 and above (#2438 )	2025-02-27 20:45:22 +01:00
homarr-renovate[bot]	add91701de	fix(deps): update dependency swagger-ui-react to ^5.20.0 (#2436 ) Co-authored-by: homarr-renovate[bot] <158783068+homarr-renovate[bot]@users.noreply.github.com>	2025-02-27 10:55:29 +00:00
homarr-renovate[bot]	8c1308c97f	fix(deps): update dependency @auth/core to ^0.38.0 (#2434 ) Co-authored-by: homarr-renovate[bot] <158783068+homarr-renovate[bot]@users.noreply.github.com>	2025-02-27 10:39:05 +00:00
homarr-renovate[bot]	b2cc97e316	fix(deps): update dependency @auth/drizzle-adapter to ^1.8.0 (#2435 ) Co-authored-by: homarr-renovate[bot] <158783068+homarr-renovate[bot]@users.noreply.github.com>	2025-02-27 10:18:38 +00:00
homarr-renovate[bot]	46ff689a7e	chore(deps): update pnpm to v10.5.2 (#2431 ) Co-authored-by: homarr-renovate[bot] <158783068+homarr-renovate[bot]@users.noreply.github.com>	2025-02-27 02:21:20 +00:00
homarr-crowdin[bot]	2b40233235	chore(lang): updated translations from crowdin Co-authored-by: Crowdin Homarr <190541745+homarr-crowdin[bot]@users.noreply.github.com>	2025-02-27 00:46:24 +00:00
homarr-renovate[bot]	d6939e4a6d	fix(deps): update nextjs monorepo to ^15.2.0 (#2428 ) Co-authored-by: homarr-renovate[bot] <158783068+homarr-renovate[bot]@users.noreply.github.com>	2025-02-26 23:34:48 +00:00
homarr-renovate[bot]	c2d6e2efcf	fix(deps): update dependency eslint-config-prettier to ^10.0.2 (#2427 ) Co-authored-by: homarr-renovate[bot] <158783068+homarr-renovate[bot]@users.noreply.github.com>	2025-02-26 14:18:43 +00:00
homarr-renovate[bot]	0f2fc0505c	chore(deps): update pnpm to v10.5.1 (#2426 ) Co-authored-by: homarr-renovate[bot] <158783068+homarr-renovate[bot]@users.noreply.github.com>	2025-02-26 12:26:24 +00:00
homarr-renovate[bot]	faf7322bcb	fix(deps): update dependency drizzle-orm to ^0.40.0 (#2425 ) Co-authored-by: homarr-renovate[bot] <158783068+homarr-renovate[bot]@users.noreply.github.com>	2025-02-25 21:53:58 +00:00
homarr-renovate[bot]	3b830ae098	fix(deps): update dependency drizzle-kit to ^0.30.5 (#2423 ) Co-authored-by: homarr-renovate[bot] <158783068+homarr-renovate[bot]@users.noreply.github.com>	2025-02-25 20:47:29 +00:00
homarr-renovate[bot]	a6f91998c3	fix(deps): update turbo monorepo to ^2.4.4 (#2424 ) Co-authored-by: homarr-renovate[bot] <158783068+homarr-renovate[bot]@users.noreply.github.com>	2025-02-25 20:47:13 +00:00
homarr-renovate[bot]	874414fc4f	fix(deps): update turbo monorepo to ^2.4.3 (#2422 ) Co-authored-by: homarr-renovate[bot] <158783068+homarr-renovate[bot]@users.noreply.github.com>	2025-02-25 13:46:48 +00:00
homarr-renovate[bot]	fda3aff170	chore(deps): update pnpm to v10.5.0 (#2421 ) Co-authored-by: homarr-renovate[bot] <158783068+homarr-renovate[bot]@users.noreply.github.com>	2025-02-25 13:03:54 +00:00
homarr-renovate[bot]	a9a37afd44	fix(deps): update dependency sass to ^1.85.1 (#2418 ) Co-authored-by: homarr-renovate[bot] <158783068+homarr-renovate[bot]@users.noreply.github.com>	2025-02-25 02:22:33 +00:00
homarr-renovate[bot]	2f3d297c46	chore(deps): update dependency @types/dockerode to ^3.3.35 (#2415 ) Co-authored-by: homarr-renovate[bot] <158783068+homarr-renovate[bot]@users.noreply.github.com>	2025-02-25 00:58:36 +00:00
homarr-crowdin[bot]	8355bb5919	chore(lang): updated translations from crowdin Co-authored-by: Crowdin Homarr <190541745+homarr-crowdin[bot]@users.noreply.github.com>	2025-02-25 00:47:03 +00:00
homarr-renovate[bot]	46070fa5a3	chore(deps): update vitest monorepo to ^3.0.7 (#2414 ) Co-authored-by: homarr-renovate[bot] <158783068+homarr-renovate[bot]@users.noreply.github.com>	2025-02-24 18:22:08 +00:00
homarr-renovate[bot]	593c50bb8f	fix(deps): update dependency typescript-eslint to ^8.25.0 (#2413 ) Co-authored-by: homarr-renovate[bot] <158783068+homarr-renovate[bot]@users.noreply.github.com>	2025-02-24 17:44:09 +00:00
Meier Lukas	508f9afeb5	fix(boards): add scrollarea to board-select (#2409 )	2025-02-24 17:46:57 +01:00
Meier Lukas	ef9289d945	chore(docs): update docs-sitemap	2025-02-23 20:26:07 +01:00
Meier Lukas	9c892eacfc	ci: add arm64 docker build (#2383 )	2025-02-23 20:06:45 +01:00
Meier Lukas	7761dc29c8	feat(boards): add responsive layout system (#2271 )	2025-02-23 17:34:56 +01:00
Meier Lukas	2085b5ece2	fix: await params for board metadata (#2406 )	2025-02-23 15:14:41 +01:00
Meier Lukas	c5107b2b67	fix: update checker logs incorrectly (#2402 )	2025-02-23 12:55:38 +01:00
Manuel	5dc5d9e04a	fix: omv invalid temperature when not available (#2322 )	2025-02-23 12:34:04 +01:00
homarr-crowdin[bot]	4f09363823	chore(lang): updated translations from crowdin Co-authored-by: Crowdin Homarr <190541745+homarr-crowdin[bot]@users.noreply.github.com>	2025-02-23 00:48:50 +00:00
Meier Lukas	c132a07213	Merge branch 'main' into dev	2025-02-22 12:08:07 +01:00
homarr-renovate[bot]	86e778db1e	fix(deps): update dependency prettier to ^3.5.2 (#2399 ) Co-authored-by: homarr-renovate[bot] <158783068+homarr-renovate[bot]@users.noreply.github.com>	2025-02-22 04:39:53 +00:00
homarr-crowdin[bot]	ee1ed0d076	chore(lang): updated translations from crowdin Co-authored-by: Crowdin Homarr <190541745+homarr-crowdin[bot]@users.noreply.github.com>	2025-02-22 00:44:32 +00:00
homarr-renovate[bot]	675ed5bdc1	chore(deps): update dependency eslint to ^9.21.0 (#2395 ) Co-authored-by: homarr-renovate[bot] <158783068+homarr-renovate[bot]@users.noreply.github.com>	2025-02-21 22:17:43 +00:00
ManuelandMeier Lukas	fb467ac165	feat: add app ping url (#2380 ) Co-authored-by: Meier Lukas <meierschlumpf@gmail.com>	2025-02-21 22:47:30 +01:00
homarr-renovate[bot]	9d54e938c8	chore(deps): update dependency @types/node to ^22.13.5 (#2394 ) Co-authored-by: homarr-renovate[bot] <158783068+homarr-renovate[bot]@users.noreply.github.com>	2025-02-21 20:44:17 +00:00