diff --git a/.gitignore b/.gitignore
index faf7cc95a3..edb129357e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -9,4 +9,6 @@
 *.sw*
 .run
 node_modules
-ignore
\ No newline at end of file
+ignore
+.kilo*
+.claude*
\ No newline at end of file
diff --git a/build.log b/build.log
new file mode 100644
index 0000000000..f3e3e94d58
--- /dev/null
+++ b/build.log
@@ -0,0 +1,175 @@
+--progress is a global compose flag, better use `docker compose --progress xx build ...
+time="2026-03-23T17:17:07-06:00" level=warning msg="C:\\Projects\\Code\\corteza-toocky\\docker-compose.local.yaml: the attribute `version` is obsolete, it will be ignored, please remove it to avoid potential confusion"
+#1 [internal] load local bake definitions
+#1 reading from stdin 544B done
+#1 DONE 0.0s
+
+#2 [internal] load build definition from Dockerfile.local
+#2 transferring dockerfile: 7.78kB done
+#2 DONE 0.0s
+
+#3 [internal] load metadata for docker.io/library/ubuntu:22.04
+#3 DONE 0.0s
+
+#4 [internal] load metadata for docker.io/library/node:22-bookworm
+#4 ...
+
+#5 [internal] load metadata for docker.io/library/golang:1.24.1-bookworm
+#5 DONE 0.2s
+
+#4 [internal] load metadata for docker.io/library/node:22-bookworm
+#4 DONE 0.2s
+
+#6 [internal] load .dockerignore
+#6 transferring context: 290B done
+#6 DONE 0.0s
+
+#7 [server-build  1/10] FROM docker.io/library/golang:1.24.1-bookworm@sha256:fa1a01d362a7b9df68b021d59a124d28cae6d99ebd1a876e3557c4dd092f1b1d
+#7 DONE 0.0s
+
+#8 [runtime  1/17] FROM docker.io/library/ubuntu:22.04
+#8 DONE 0.0s
+
+#9 [webapps-deps 1/9] FROM docker.io/library/node:22-bookworm@sha256:f90672bf4c76dfc077d17be4c115b1ae7731d2e8558b457d86bca42aeb193866
+#9 DONE 0.0s
+
+#10 [internal] load build context
+#10 transferring context: 749.31kB 0.7s done
+#10 DONE 0.8s
+
+#11 [webapps-deps 2/9] RUN apt-get -y update && apt-get install -y git make && rm -rf /var/lib/apt/lists/*
+#11 CACHED
+
+#12 [webapps-deps 4/9] WORKDIR /build
+#12 CACHED
+
+#13 [webapps-deps 6/9] COPY lib/ ./lib/
+#13 CACHED
+
+#14 [webapps-deps 3/9] RUN npm install -g @vue/cli-service
+#14 CACHED
+
+#15 [webapps-deps 5/9] COPY client/ ./client/
+#15 CACHED
+
+#16 [webapps-deps 7/9] RUN ls /build/lib/js/src/ | grep cast || echo "CAST.TS NOT FOUND"
+#16 CACHED
+
+#17 [server-build  3/10] WORKDIR /build/server
+#17 CACHED
+
+#18 [server-build  6/10] COPY server/ ./
+#18 CACHED
+
+#19 [server-build  2/10] RUN apt-get -y update && apt-get install -y git make gcc libc6-dev && rm -rf /var/lib/apt/lists/*
+#19 CACHED
+
+#20 [server-build  5/10] RUN go mod download
+#20 CACHED
+
+#21 [server-build  7/10] COPY locale/ ./locale/
+#21 CACHED
+
+#22 [server-build  4/10] COPY server/go.mod server/go.sum ./
+#22 CACHED
+
+#23 [server-build  8/10] RUN mkdir -p pkg/locale/src/en && cp -r locale/en/* pkg/locale/src/en/
+#23 CACHED
+
+#24 [server-build  9/10] COPY README.md LICENSE DCO ./
+#24 CACHED
+
+#25 [server-build 10/10] RUN CGO_ENABLED=1 go build -o corteza-server ./cmd/corteza
+#25 ...
+
+#26 [webapps-deps 8/9] RUN ls /build/lib/js/src/ | grep cast || echo "CAST.TS NOT FOUND"
+#26 0.377 cast.test.ts
+#26 0.377 cast.ts
+#26 DONE 0.5s
+
+#27 [webapps-deps 9/9] RUN cd lib && make fresh
+#27 0.784 ---Fresh js---
+#27 1.177 yarn install v1.22.22
+#27 1.210 info No lockfile found.
+#27 1.219 [1/5] Validating package.json...
+#27 1.224 [2/5] Resolving packages...
+#27 13.27 warning eslint@8.57.1: This version is no longer supported. Please see https://eslint.org/version-support for other options.
+#27 14.21 warning eslint > @humanwhocodes/config-array@0.13.0: Use @eslint/config-array instead
+#27 14.66 warning eslint > @humanwhocodes/config-array > @humanwhocodes/object-schema@2.0.3: Use @eslint/object-schema instead
+#27 14.88 warning eslint > file-entry-cache > flat-cache > rimraf@3.0.2: Rimraf versions prior to v4 are no longer supported
+#27 15.09 warning eslint > file-entry-cache > flat-cache > rimraf > glob@7.2.3: Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me
+#27 15.27 warning eslint > file-entry-cache > flat-cache > rimraf > glob > inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
+#27 19.82 warning mocha > glob@10.5.0: Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me
+#27 23.53 warning ts-sinon > sinon@9.2.4: 16.1.1
+#27 23.77 warning ts-sinon > sinon > nise > @sinonjs/text-encoding@0.7.3: Deprecated: no longer maintained and no longer used by Sinon packages. See
+#27 23.77   https://github.com/sinonjs/nise/issues/243 for replacement details.
+#27 23.81 warning ts-sinon > sinon > @sinonjs/samsam > lodash.get@4.4.2: This package is deprecated. Use the optional chaining (?.) operator instead.
+#27 26.35 [3/5] Fetching packages...
+#27 69.25 [4/5] Linking dependencies...
+#27 72.63 [5/5] Building fresh packages...
+#27 72.83 success Saved lockfile.
+#27 72.84 Done in 71.67s.
+#27 73.12 yarn link v1.22.22
+#27 73.16 success Registered "@cortezaproject/corteza-js".
+#27 73.16 info You can now run `yarn link "@cortezaproject/corteza-js"` in the projects where you want to use this package and it will be used instead.
+#27 73.16 Done in 0.05s.
+#27 73.37 yarn run v1.22.22
+#27 73.41 $ rollup -c --environment BUILD:production
+#27 74.08 
+#27 74.08 src/index.ts  dist/index.cjs, dist/index.js...
+#27 76.12 [!] RollupError: There was an error during the build:
+#27 76.12   Could not resolve "./corredor" from "src/index.ts"
+#27 76.12 Additionally, handling the error in the 'buildEnd' hook caused the following error:
+#27 76.12   [plugin rpt2] src/index.ts: Could not resolve "./corredor" from "src/index.ts"
+#27 76.12 src/index.ts
+#27 76.12     at Object.getRollupError (/build/lib/js/node_modules/rollup/dist/shared/parseAst.js:289:41)
+#27 76.12     at /build/lib/js/node_modules/rollup/dist/shared/rollup.js:23859:51
+#27 76.12     at catchUnfinishedHookActions (/build/lib/js/node_modules/rollup/dist/shared/rollup.js:23352:16)
+#27 76.12     at rollupInternal (/build/lib/js/node_modules/rollup/dist/shared/rollup.js:23842:5)
+#27 76.12     at build (/build/lib/js/node_modules/rollup/dist/bin/rollup:1722:55)
+#27 76.12     at runRollup (/build/lib/js/node_modules/rollup/dist/bin/rollup:1858:21)
+#27 76.12 
+#27 76.12 
+#27 76.16 error Command failed with exit code 1.
+#27 76.16 info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
+#27 76.18 Failed to fresh js
+#27 76.18 make: *** [Makefile:33: fresh] Error 1
+#27 ERROR: process "/bin/sh -c cd lib && make fresh" did not complete successfully: exit code: 2
+
+#25 [server-build 10/10] RUN CGO_ENABLED=1 go build -o corteza-server ./cmd/corteza
+#25 CANCELED
+------
+ > [webapps-deps 9/9] RUN cd lib && make fresh:
+76.12     at catchUnfinishedHookActions (/build/lib/js/node_modules/rollup/dist/shared/rollup.js:23352:16)
+76.12     at rollupInternal (/build/lib/js/node_modules/rollup/dist/shared/rollup.js:23842:5)
+76.12     at build (/build/lib/js/node_modules/rollup/dist/bin/rollup:1722:55)
+76.12     at runRollup (/build/lib/js/node_modules/rollup/dist/bin/rollup:1858:21)
+76.12 
+76.12 
+76.16 error Command failed with exit code 1.
+76.16 info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
+76.18 Failed to fresh js
+76.18 make: *** [Makefile:33: fresh] Error 1
+------
+Dockerfile.local:78
+
+--------------------
+
+  76 |     ENV BUILD_VERSION=$BUILD_VERSION
+
+  77 |     # Install libraries for all webapps (sequential but only once)
+
+  78 | >>> RUN cd lib && make fresh
+
+  79 |     ################################################################################
+
+  80 |     # Stage 3b: Build WebApps in Parallel (via BuildKit)
+
+--------------------
+
+failed to solve: process "/bin/sh -c cd lib && make fresh" did not complete successfully: exit code: 2
+
+
+
+View build details: docker-desktop://dashboard/build/default/default/rw8bsoh218u784y69dshendpw
+
diff --git a/client/web/compose/src/assets/PageBlocks/index.js b/client/web/compose/src/assets/PageBlocks/index.js
index 654fbc1182..194e0f95bf 100644
--- a/client/web/compose/src/assets/PageBlocks/index.js
+++ b/client/web/compose/src/assets/PageBlocks/index.js
@@ -16,3 +16,5 @@ export const Progress = require('./Progress.png')
 export const Geometry = require('./Geometry.png')
 export const Tabs = require('./Tabs.png')
 export const Navigation = require('./Navigation.png')
+export const CollapsibleRecord = require('./Record.png')
+export const CollapsibleRecordList = require('./RecordList.png')
diff --git a/client/web/compose/src/components/Admin/Page/Builder/Selector.vue b/client/web/compose/src/components/Admin/Page/Builder/Selector.vue
index 5ebf7b4232..825361f676 100644
--- a/client/web/compose/src/components/Admin/Page/Builder/Selector.vue
+++ b/client/web/compose/src/components/Admin/Page/Builder/Selector.vue
@@ -160,6 +160,17 @@ export default {
           image: images.Record,
           recordPageOnly: true,
         },
+        {
+          label: this.$t('collapsibleRecord.label'),
+          block: new compose.PageBlockCollapsibleRecord(),
+          image: images.CollapsibleRecord,
+          recordPageOnly: true,
+        },
+        {
+          label: this.$t('collapsibleRecordList.label'),
+          block: new compose.PageBlockCollapsibleRecordList(),
+          image: images.CollapsibleRecordList,
+        },
         {
           label: this.$t('recordList.label'),
           block: new compose.PageBlockRecordList(),
diff --git a/client/web/compose/src/components/Common/Grid.vue b/client/web/compose/src/components/Common/Grid.vue
index c5297c63a4..af5404ed8d 100644
--- a/client/web/compose/src/components/Common/Grid.vue
+++ b/client/web/compose/src/components/Common/Grid.vue
@@ -49,6 +49,7 @@
             :block-index="item.i"
             :resizing="resizing"
             :loading-record="loadingRecord"
+            :on-block-height-change="onBlockHeightChange"
             v-on="$listeners"
           />
         </grid-item>
@@ -101,6 +102,9 @@ export default {
       layout: [],
 
       resizing: false,
+
+      // Track which blocks have been programmatically modified (e.g., collapse/expand)
+      programmaticHeightChanges: {},
     }
   },
 
@@ -131,9 +135,16 @@ export default {
       immediate: true,
       deep: true,
       handler (blocks) {
+        const programmaticChanges = this.programmaticHeightChanges
+        const now = Date.now()
         const layout = blocks.map(({ meta = {}, xywh = [] }, i) => {
           const [x = 0, y = 0, w = 48, h = 15] = (xywh || []).map(v => Number(v) || 0)
 
+          // Skip blocks that were recently programmatically changed
+          if (programmaticChanges[i] && (now - programmaticChanges[i].timestamp) < 500) {
+            return this.layout[i] || { i, x, y, w, h }
+          }
+
           // To avoid collision with hidden elements
           if (meta.hidden || (meta.invisible && !this.editable)) {
             return null
@@ -186,6 +197,27 @@ export default {
       // Force the grid layout to recalculate its dimensions
       window.dispatchEvent(new Event('resize'))
     },
+
+    onBlockHeightChange ({ blockIndex, newHeight }) {
+      // Only handle height changes in view mode (not in the page builder)
+      if (this.editable) return
+
+      // Mark this block as programmatically changed so the watcher doesn't reset it
+      this.$set(this.programmaticHeightChanges, blockIndex, {
+        h: newHeight,
+        timestamp: Date.now(),
+      })
+
+      // Find the layout item by blockIndex (which is the 'i' property)
+      const item = this.layout.find(l => l.i === blockIndex)
+      if (item) {
+        this.$set(item, 'h', newHeight)
+        // Force the grid to recalculate after height change
+        this.$nextTick(() => {
+          this.forceRerender()
+        })
+      }
+    },
   },
 }
 </script>
diff --git a/client/web/compose/src/components/PageBlocks/CollapsibleRecordBase.vue b/client/web/compose/src/components/PageBlocks/CollapsibleRecordBase.vue
new file mode 100644
index 0000000000..ed58b77c1d
--- /dev/null
+++ b/client/web/compose/src/components/PageBlocks/CollapsibleRecordBase.vue
@@ -0,0 +1,729 @@
+<template>
+  <wrap
+    v-bind="$props"
+    body-class="pt-0 px-0"
+    class="collapsible-record-wrap"
+    v-on="$listeners"
+  >
+    <div
+      v-if="isProcessing"
+      class="d-flex align-items-center justify-content-center h-100 p-3"
+    >
+      <b-spinner />
+    </div>
+
+    <div
+      v-else-if="module"
+      ref="collapsibleRecordContainer"
+      class="collapsible-record"
+    >
+      <!-- Collapsible Header -->
+      <div
+        ref="collapsibleHeader"
+        class="collapsible-header d-flex align-items-center p-3"
+        :class="headerClass"
+        role="button"
+        :aria-expanded="!collapsed"
+        :aria-controls="`collapsible-body-${blockIndex}`"
+        tabindex="0"
+        @click="toggleCollapse"
+        @keydown.enter="toggleCollapse"
+        @keydown.space.prevent="toggleCollapse"
+      >
+        <!-- Title and Subtitle Row - stacked vertically -->
+        <div class="collapsible-titles">
+          <!-- Title with inline alignment OR regular alignment -->
+          <template v-if="useInlineTitleAlignment">
+            <div class="collapsible-title d-flex justify-content-between w-100">
+              <span
+                v-if="titleAlignmentData.left"
+                class="text-left"
+                style="flex: 1;"
+                v-html="titleAlignmentData.left"
+              />
+              <span
+                v-if="titleAlignmentData.center"
+                class="text-center"
+                style="flex: 1;"
+                v-html="titleAlignmentData.center"
+              />
+              <span
+                v-if="titleAlignmentData.right"
+                class="text-right"
+                style="flex: 1;"
+                v-html="titleAlignmentData.right"
+              />
+            </div>
+          </template>
+          <template v-else>
+            <div
+              class="collapsible-title"
+              :class="titleAlignmentClass"
+            >
+              {{ titleText || options.titleExpression || 'Untitled' }}
+            </div>
+          </template>
+
+          <!-- Subtitle (shown below title) -->
+          <template v-if="displaySubtitle">
+            <template v-if="useInlineSubtitleAlignment">
+              <div class="collapsible-subtitle d-flex justify-content-between w-100 mt-1">
+                <span
+                  v-if="subtitleAlignmentData.left"
+                  class="text-left"
+                  style="flex: 1;"
+                  v-html="subtitleAlignmentData.left"
+                />
+                <span
+                  v-if="subtitleAlignmentData.center"
+                  class="text-center"
+                  style="flex: 1;"
+                  v-html="subtitleAlignmentData.center"
+                />
+                <span
+                  v-if="subtitleAlignmentData.right"
+                  class="text-right"
+                  style="flex: 1;"
+                  v-html="subtitleAlignmentData.right"
+                />
+              </div>
+            </template>
+            <template v-else>
+              <div
+                class="collapsible-subtitle"
+                :class="subtitleAlignmentClass"
+              >
+                {{ subtitleText || options.subtitleExpression || '' }}
+              </div>
+            </template>
+          </template>
+        </div>
+
+        <!-- Chevron -->
+        <div class="collapsible-chevron ml-2">
+          <font-awesome-icon
+            :icon="collapsed ? ['fas', 'chevron-down'] : ['fas', 'chevron-up']"
+            class="text-muted"
+          />
+        </div>
+      </div>
+
+      <!-- Collapsible Body -->
+      <b-collapse
+        :id="`collapsible-body-${blockIndex}`"
+        :visible="!collapsed"
+        class="collapsible-content"
+        :style="collapseMaxHeightStyle"
+        @shown="handleCollapseShown"
+        @hidden="handleCollapseHidden"
+      >
+        <!-- Other Fields Section - Above Body -->
+        <div
+          v-if="showOtherFieldsAbove && otherFields.length"
+          class="other-fields-section px-3 pb-3"
+        >
+          <div :class="fieldLayoutClass">
+            <template v-for="field in otherFields">
+              <b-form-group
+                v-if="canDisplay(field)"
+                :key="`${field.fieldID}-${field.name}`"
+                :label-cols-md="options.horizontalFieldLayoutEnabled && '6'"
+                :label-cols-xl="options.horizontalFieldLayoutEnabled && '5'"
+                :content-cols-md="options.horizontalFieldLayoutEnabled && '6'"
+                :content-cols-xl="options.horizontalFieldLayoutEnabled && '7'"
+                :class="columnWrapClass"
+                :style="fieldWidth"
+                class="field-container"
+              >
+                <template #label>
+                  <div class="d-flex align-items-center text-primary mb-0">
+                    <span
+                      class="d-flex"
+                      style="margin-top: 0.1rem;"
+                    >
+                      {{ field.label || field.name }}
+                    </span>
+                    <c-hint :tooltip="((field.options.hint || {}).view || '')" />
+                    <div
+                      v-if="!record.deletedAt && options.inlineRecordEditEnabled && isFieldEditable(field)"
+                      class="inline-actions ml-1"
+                    >
+                      <b-button
+                        v-b-tooltip.noninteractive.hover="{ title: $t('record.inlineEdit.button.title'), boundary: 'body' }"
+                        variant="outline-extra-light"
+                        :disabled="editable"
+                        size="sm"
+                        class="text-secondary border-0"
+                        @click.stop="editInlineField(field)"
+                      >
+                        <font-awesome-icon :icon="['fas', 'pen']" />
+                      </b-button>
+                    </div>
+                  </div>
+                  <div
+                    class="small text-muted"
+                    :class="{ 'mb-1': !!(field.options.description || {}).view }"
+                  >
+                    {{ (field.options.description || {}).view }}
+                  </div>
+                </template>
+
+                <div
+                  v-if="field.canReadRecordValue"
+                  class="value align-self-center"
+                >
+                  <field-viewer
+                    v-bind="{ ...$props, field }"
+                    :extra-options="options"
+                  />
+                </div>
+                <i
+                  v-else
+                  class="text-muted"
+                >
+                  {{ $t('field.noPermission') }}
+                </i>
+              </b-form-group>
+            </template>
+          </div>
+        </div>
+
+        <!-- Body Field (Full Width - Rich Text) -->
+        <div
+          v-if="bodyField && bodyFieldConfig"
+          class="body-field-container p-3"
+        >
+          <div
+            v-if="bodyFieldConfig.canReadRecordValue"
+            class="body-field-content"
+            v-html="bodyFieldValue"
+          />
+          <i
+            v-else
+            class="text-muted"
+          >
+            {{ $t('field.noPermission') }}
+          </i>
+        </div>
+
+        <!-- Other Fields - Default or Below Body -->
+        <div
+          v-if="showOtherFieldsAfter && otherFields.length"
+          class="other-fields-section px-3 pb-3"
+        >
+          <div :class="fieldLayoutClass">
+            <template v-for="field in otherFields">
+              <b-form-group
+                v-if="canDisplay(field)"
+                :key="`${field.fieldID}-${field.name}`"
+                :label-cols-md="options.horizontalFieldLayoutEnabled && '6'"
+                :label-cols-xl="options.horizontalFieldLayoutEnabled && '5'"
+                :content-cols-md="options.horizontalFieldLayoutEnabled && '6'"
+                :content-cols-xl="options.horizontalFieldLayoutEnabled && '7'"
+                :class="columnWrapClass"
+                :style="fieldWidth"
+                class="field-container"
+              >
+                <template #label>
+                  <div class="d-flex align-items-center text-primary mb-0">
+                    <span
+                      class="d-flex"
+                      style="margin-top: 0.1rem;"
+                    >
+                      {{ field.label || field.name }}
+                    </span>
+                    <c-hint :tooltip="((field.options.hint || {}).view || '')" />
+                    <div
+                      v-if="!record.deletedAt && options.inlineRecordEditEnabled && isFieldEditable(field)"
+                      class="inline-actions ml-1"
+                    >
+                      <b-button
+                        v-b-tooltip.noninteractive.hover="{ title: $t('record.inlineEdit.button.title'), boundary: 'body' }"
+                        variant="outline-extra-light"
+                        :disabled="editable"
+                        size="sm"
+                        class="text-secondary border-0"
+                        @click.stop="editInlineField(field)"
+                      >
+                        <font-awesome-icon :icon="['fas', 'pen']" />
+                      </b-button>
+                    </div>
+                  </div>
+                  <div
+                    class="small text-muted"
+                    :class="{ 'mb-1': !!(field.options.description || {}).view }"
+                  >
+                    {{ (field.options.description || {}).view }}
+                  </div>
+                </template>
+
+                <div
+                  v-if="field.canReadRecordValue"
+                  class="value align-self-center"
+                >
+                  <field-viewer
+                    v-bind="{ ...$props, field }"
+                    :extra-options="options"
+                  />
+                </div>
+                <i
+                  v-else
+                  class="text-muted"
+                >
+                  {{ $t('field.noPermission') }}
+                </i>
+              </b-form-group>
+            </template>
+          </div>
+        </div>
+      </b-collapse>
+    </div>
+
+    <!-- Modal for inline editing -->
+    <bulk-edit-modal
+      v-if="options.inlineRecordEditEnabled && module"
+      :modal-title="$t('record.inlineEdit.modal.title')"
+      :namespace="namespace"
+      :module="module"
+      :selected-records="inlineEdit.recordIDs"
+      :selected-fields="inlineEdit.fields"
+      :initial-record="inlineEdit.record"
+      :query="inlineEdit.query"
+      :allow-add-field="options.inlineRecordEditAllowAddField"
+      open-on-select
+      @save="onInlineEdit()"
+      @close="onInlineEditClose()"
+    />
+  </wrap>
+</template>
+
+<script>
+import { NoID, compose } from '@cortezaproject/corteza-js'
+import { evaluatePrefilter } from 'corteza-webapp-compose/src/lib/record-filter'
+import base from './base'
+import FieldViewer from 'corteza-webapp-compose/src/components/ModuleFields/Viewer'
+import BulkEditModal from 'corteza-webapp-compose/src/components/Public/Record/BulkEdit'
+import users from 'corteza-webapp-compose/src/mixins/users'
+import records from 'corteza-webapp-compose/src/mixins/records'
+import conditionalFields from 'corteza-webapp-compose/src/mixins/conditionalFields'
+import recordLayout from 'corteza-webapp-compose/src/mixins/recordLayout'
+import alignment from 'corteza-webapp-compose/src/mixins/alignment'
+import { mapGetters } from 'vuex'
+
+export default {
+  i18nOptions: {
+    namespaces: 'block',
+  },
+
+  components: {
+    FieldViewer,
+    BulkEditModal,
+  },
+
+  extends: base,
+
+  mixins: [
+    users,
+    records,
+    conditionalFields,
+    recordLayout,
+    alignment,
+  ],
+
+  props: {
+    onBlockHeightChange: {
+      type: Function,
+      default: null,
+    },
+  },
+
+  data () {
+    return {
+      collapsed: false,
+      originalHeight: null,
+      inlineEdit: {
+        fields: [],
+        recordIDs: [],
+        record: {},
+        query: '',
+      },
+    }
+  },
+
+  computed: {
+    ...mapGetters({
+      getModuleByID: 'module/getByID',
+      findRecordByID: 'record/findByID',
+    }),
+
+    resolvedRecord () {
+      if (!this.record || !this.module) return this.record
+
+      const resolvedValues = { ...this.record.values }
+
+      this.module.fields
+        .filter(f => f.kind === 'Record' && f.options && f.options.labelField)
+        .forEach(field => {
+          const rawValue = resolvedValues[field.name]
+          if (!rawValue) return
+          const rawResolved = this.findRecordByID(rawValue)
+          if (!rawResolved) return
+          const refModule = this.getModuleByID(field.options.moduleID)
+          if (!refModule) return
+          const refRecord = new compose.Record(refModule, rawResolved)
+          resolvedValues[field.name] = refRecord.values[field.options.labelField] || rawValue
+        })
+
+      return { ...this.record, values: resolvedValues }
+    },
+
+    titleAlignmentData () {
+      return this.parseAlignmentExpression(this.options.titleExpression || '', this.resolvedRecord)
+    },
+
+    subtitleAlignmentData () {
+      return this.parseAlignmentExpression(this.options.subtitleExpression || '', this.resolvedRecord)
+    },
+
+    useInlineTitleAlignment () {
+      return this.titleAlignmentData.hasValidMarkers
+    },
+
+    useInlineSubtitleAlignment () {
+      return this.subtitleAlignmentData.hasValidMarkers
+    },
+
+    titleText () {
+      // If using inline alignment, don't return plain text
+      if (this.useInlineTitleAlignment) {
+        return ''
+      }
+
+      try {
+        return evaluatePrefilter(this.options.titleExpression || '', {
+          record: this.resolvedRecord,
+          user: this.$auth.user || {},
+          recordID: (this.resolvedRecord || {}).recordID || NoID,
+          ownerID: (this.resolvedRecord || {}).ownedBy || NoID,
+          userID: (this.$auth.user || {}).userID || NoID,
+        })
+      } catch (e) {
+        return this.options.titleExpression || ''
+      }
+    },
+
+    subtitleText () {
+      // If using inline alignment, don't return plain text
+      if (this.useInlineSubtitleAlignment) {
+        return ''
+      }
+
+      try {
+        return evaluatePrefilter(this.options.subtitleExpression || '', {
+          record: this.resolvedRecord,
+          user: this.$auth.user || {},
+          recordID: (this.resolvedRecord || {}).recordID || NoID,
+          ownerID: (this.resolvedRecord || {}).ownedBy || NoID,
+          userID: (this.$auth.user || {}).userID || NoID,
+        })
+      } catch (e) {
+        return this.options.subtitleExpression || ''
+      }
+    },
+
+    displaySubtitle () {
+      // If option to show when collapsed is NOT checked (false) and block is collapsed, hide subtitle
+      if (!this.options.subtitleShowWhenCollapsed && this.collapsed) {
+        return false
+      }
+      // Check both regular text and inline alignment data
+      if (this.useInlineSubtitleAlignment) {
+        return !!(this.subtitleAlignmentData.left || this.subtitleAlignmentData.center || this.subtitleAlignmentData.right)
+      }
+      return !!this.subtitleText
+    },
+
+    titleAlignmentClass () {
+      // Default to left alignment when no inline markers are present
+      return {
+        'text-left': !this.useInlineTitleAlignment || this.options.titleAlignment === 'left',
+        'text-center': this.options.titleAlignment === 'center' && !this.useInlineTitleAlignment,
+        'text-right': this.options.titleAlignment === 'right' && !this.useInlineTitleAlignment,
+      }
+    },
+
+    subtitleAlignmentClass () {
+      // Default to left alignment when no inline markers are present
+      return {
+        'text-left': !this.useInlineSubtitleAlignment || this.options.subtitleAlignment === 'left',
+        'text-center': this.options.subtitleAlignment === 'center' && !this.useInlineSubtitleAlignment,
+        'text-right': this.options.subtitleAlignment === 'right' && !this.useInlineSubtitleAlignment,
+      }
+    },
+
+    headerClass () {
+      return 'cursor-pointer'
+    },
+
+    bodyFieldConfig () {
+      if (!this.options.bodyField || !this.module) {
+        return null
+      }
+      const field = this.module.fields.find(f => f.name === this.options.bodyField || f.fieldID === this.options.bodyField)
+      if (!field) {
+        return null
+      }
+      return field
+    },
+
+    bodyField () {
+      return this.options.bodyField
+    },
+
+    bodyFieldValue () {
+      if (!this.bodyFieldConfig || !this.record) {
+        return ''
+      }
+      // Use field name to look up value in record.values (record.values uses field names as keys)
+      const fieldName = this.bodyFieldConfig.name
+      return this.record.values[fieldName] || ''
+    },
+
+    otherFields () {
+      if (!this.module) {
+        return []
+      }
+
+      const selectedFields = this.options.fields || []
+
+      if (selectedFields.length === 0) {
+        return []
+      }
+
+      const bodyFieldName = this.options.bodyField
+      const fields = this.module.filterFields(selectedFields).filter(f => f.name !== bodyFieldName && f.fieldID !== bodyFieldName)
+
+      return fields.map(f => {
+        f.label = f.isSystem ? this.$t(`field:system.${f.name}`) : f.label || f.name
+        return f
+      })
+    },
+
+    showOtherFieldsAbove () {
+      return this.options.otherFieldsPosition === 'above'
+    },
+
+    showOtherFieldsAfter () {
+      const pos = this.options.otherFieldsPosition
+      return pos === 'below' || pos === 'default' || !pos
+    },
+
+    fieldLayoutClass () {
+      const classes = {
+        default: 'd-flex flex-column',
+        noWrap: 'd-flex gap-2',
+        wrap: 'row no-gutters',
+      }
+      return classes[this.options.recordFieldLayoutOption] || classes.default
+    },
+
+    columnWrapClass () {
+      if (this.options.recordFieldLayoutOption !== 'wrap') {
+        return ''
+      }
+      return 'field-col'
+    },
+
+    fieldWidth () {
+      if (this.options.recordFieldLayoutOption !== 'noWrap') {
+        return {}
+      }
+      return { 'min-width': '13rem' }
+    },
+
+    isProcessing () {
+      return this.loadingRecord || this.evaluating
+    },
+
+    collapsedMinHeight () {
+      // Simple fixed values: 7 for title only, 9 for title + subtitle
+      if (this.displaySubtitle) {
+        return 9.3
+      }
+      return 7.3
+    },
+
+    collapseMaxHeightStyle () {
+      // When collapsed, set max-height to 0 to ensure content is fully hidden
+      if (this.collapsed) {
+        return { maxHeight: '0px', overflow: 'hidden' }
+      }
+      return { maxHeight: 'none', overflow: 'visible' }
+    },
+  },
+
+  watch: {
+    'options.defaultCollapsed': {
+      immediate: true,
+      handler (collapsed) {
+        this.collapsed = collapsed
+        // Set initial height if collapsed on load
+        if (collapsed && !this.editable) {
+          this.$nextTick(() => {
+            this.notifyHeightChange(true)
+          })
+        }
+      },
+    },
+
+    loadingRecord: {
+      immediate: true,
+      handler (loadingRecord) {
+        const { recordID } = this.record || {}
+
+        if (!recordID || loadingRecord) return
+
+        this.evaluating = true
+
+        this.evaluateExpressions().finally(() => {
+          this.evaluating = false
+        })
+
+        // Fetch related records so Record-type field labels resolve in title/subtitle expressions
+        if (this.module && this.namespace) {
+          this.fetchRecords(this.namespace.namespaceID, this.module.fields, [this.record])
+        }
+      },
+    },
+
+    collapsed: {
+      immediate: true,
+      handler (collapsed) {
+        this.$emit('collapse-change', collapsed)
+      },
+    },
+  },
+
+  mounted () {
+    if (this.block && this.block.xywh) {
+      this.originalHeight = this.block.xywh[3]
+    }
+  },
+
+  methods: {
+    toggleCollapse () {
+      this.collapsed = !this.collapsed
+    },
+
+    handleCollapseShown () {
+      // Animation complete - content is now visible (expanded)
+      this.$emit('collapse-change', false)
+      this.notifyHeightChange(false)
+    },
+
+    handleCollapseHidden () {
+      // Animation complete - content is now hidden (collapsed)
+      this.$emit('collapse-change', true)
+      this.notifyHeightChange(true)
+    },
+
+    editInlineField (field) {
+      if (!this.record) return
+      this.inlineEdit.fields = [field.name]
+      this.inlineEdit.record = this.record.clone()
+      this.inlineEdit.recordIDs = [this.record.recordID]
+      this.inlineEdit.query = `recordID = ${this.record.recordID}`
+    },
+
+    onInlineEdit () {
+      this.inlineEdit.fields = []
+      this.inlineEdit.recordIDs = []
+      this.inlineEdit.record = {}
+      this.inlineEdit.query = ''
+    },
+
+    onInlineEditClose () {
+      this.inlineEdit.fields = []
+      this.inlineEdit.record = {}
+      this.inlineEdit.query = ''
+    },
+
+    notifyHeightChange (isCollapsed) {
+      // Only notify in view mode (not in page builder/editor)
+      if (this.editable) return
+      if (!this.block || !this.block.xywh) return
+
+      // Use originalHeight if available, otherwise get current height from block
+      let currentHeight = this.originalHeight
+      if (!currentHeight) {
+        currentHeight = this.block.xywh[3]
+      }
+      if (!currentHeight) return
+
+      // When collapsed (content hidden), use collapsedMinHeight
+      // When expanded (content visible), use currentHeight
+      const newHeight = isCollapsed ? this.collapsedMinHeight : currentHeight
+
+      this.onBlockHeightChange({
+        blockIndex: this.blockIndex,
+        newHeight,
+      })
+    },
+  },
+}
+</script>
+
+<style scoped>
+.collapsible-record-wrap {
+  transition: height 0.3s ease;
+  overflow: hidden;
+}
+
+.collapsible-record {
+  border: 1px solid #dee2e6;
+  border-radius: 0.25rem;
+  overflow: hidden;
+}
+
+.collapsible-header {
+  background-color: #f8f9fa;
+  border-bottom: 1px solid #dee2e6;
+  cursor: pointer;
+  user-select: none;
+}
+
+.collapsible-header:hover {
+  background-color: #e9ecef;
+}
+
+.collapsible-titles {
+  flex-grow: 1;
+}
+
+.collapsible-title {
+  font-weight: 600;
+  font-size: 1.1rem;
+}
+
+.collapsible-subtitle {
+  font-size: 0.9rem;
+  color: #6c757d;
+}
+
+.collapsible-chevron {
+  flex-shrink: 0;
+}
+
+.collapsible-content {
+  transition: height 0.3s ease;
+}
+
+.body-field-container {
+  border-bottom: 1px solid #dee2e6;
+}
+
+.field-col > * {
+  margin-left: 1rem;
+  margin-right: 1rem;
+}
+</style>
diff --git a/client/web/compose/src/components/PageBlocks/CollapsibleRecordConfigurator.vue b/client/web/compose/src/components/PageBlocks/CollapsibleRecordConfigurator.vue
new file mode 100644
index 0000000000..189c288fa7
--- /dev/null
+++ b/client/web/compose/src/components/PageBlocks/CollapsibleRecordConfigurator.vue
@@ -0,0 +1,507 @@
+<template>
+  <b-tab
+    :title="$t('collapsibleRecord.label')"
+    no-body
+  >
+    <div class="px-3 pt-3">
+      <h5 class="mb-3">
+        {{ $t('collapsibleRecord.headerSection.label') }}
+      </h5>
+
+      <b-row>
+        <!-- Title Expression -->
+        <b-col cols="12">
+          <b-form-group
+            :label="$t('collapsibleRecord.headerSection.titleSection.label')"
+            :description="$t('collapsibleRecord.headerSection.expressionHelp')"
+            label-class="text-primary"
+          >
+            <c-input-expression
+              v-model="options.titleExpression"
+              auto-complete
+              :placeholder="$t('collapsibleRecord.headerSection.titleSection.placeholder')"
+              :suggestion-params="expressionParams"
+            />
+          </b-form-group>
+        </b-col>
+
+        <!-- Subtitle Expression -->
+        <b-col cols="12">
+          <b-form-group
+            :label="$t('collapsibleRecord.headerSection.subtitleSection.label')"
+            :description="$t('collapsibleRecord.headerSection.expressionHelp')"
+            label-class="text-primary"
+          >
+            <c-input-expression
+              v-model="options.subtitleExpression"
+              auto-complete
+              :placeholder="$t('collapsibleRecord.headerSection.subtitleSection.placeholder')"
+              :suggestion-params="expressionParams"
+            />
+          </b-form-group>
+        </b-col>
+
+        <!-- Subtitle Show When Collapsed -->
+        <b-col
+          cols="12"
+          lg="6"
+        >
+          <b-form-group
+            :label="$t('collapsibleRecord.headerSection.subtitleSection.showWhenCollapsed')"
+            label-class="text-primary"
+          >
+            <c-input-checkbox
+              v-model="options.subtitleShowWhenCollapsed"
+              switch
+              :labels="checkboxLabel"
+            />
+          </b-form-group>
+        </b-col>
+      </b-row>
+    </div>
+
+    <hr>
+
+    <div
+      v-if="module"
+      class="px-3"
+    >
+      <h5 class="mb-3">
+        {{ $t('collapsibleRecord.bodySection.label') }}
+      </h5>
+
+      <b-row>
+        <!-- Body Field Selector -->
+        <b-col cols="12">
+          <b-form-group
+            :label="$t('collapsibleRecord.bodySection.bodyField.label')"
+            :description="$t('collapsibleRecord.bodySection.bodyField.description')"
+            label-class="text-primary"
+          >
+            <c-input-select
+              v-model="options.bodyField"
+              :options="bodyFieldOptions"
+              :get-option-label="getFieldLabel"
+              :get-option-key="getOptionKey"
+              :placeholder="$t('collapsibleRecord.bodySection.bodyField.placeholder')"
+              :reduce="getOptionKey"
+            />
+          </b-form-group>
+        </b-col>
+      </b-row>
+    </div>
+
+    <hr v-if="module">
+
+    <div
+      v-if="module"
+      class="px-3"
+    >
+      <h5 class="mb-3">
+        {{ $t('collapsibleRecord.otherFields.label') }}
+      </h5>
+
+      <b-row>
+        <!-- Other Fields Position -->
+        <b-col
+          cols="12"
+          lg="6"
+        >
+          <b-form-group
+            :label="$t('collapsibleRecord.otherFields.position.label')"
+            label-class="text-primary"
+          >
+            <c-input-select
+              v-model="options.otherFieldsPosition"
+              :options="positionOptions"
+              :reduce="option => option.value"
+            />
+          </b-form-group>
+        </b-col>
+
+        <!-- Horizontal Field Layout -->
+        <b-col
+          cols="12"
+          lg="6"
+        >
+          <b-form-group
+            :label="$t('record.horizontalFormLayout')"
+            label-class="text-primary"
+          >
+            <c-input-checkbox
+              v-model="options.horizontalFieldLayoutEnabled"
+              switch
+              :disabled="options.recordFieldLayoutOption === 'noWrap'"
+              :labels="checkboxLabel"
+            />
+          </b-form-group>
+        </b-col>
+
+        <!-- Fields Layout Mode -->
+        <b-col
+          cols="12"
+          lg="6"
+        >
+          <b-form-group
+            :label="$t('record.fieldsLayoutMode.label')"
+            label-class="text-primary"
+          >
+            <c-input-select
+              v-model="options.recordFieldLayoutOption"
+              :options="fieldsLayoutOptions"
+              :reduce="option => option.value"
+              @input="handleFieldsLayout"
+            />
+          </b-form-group>
+        </b-col>
+      </b-row>
+
+      <!-- Field Picker -->
+      <b-row class="mt-3">
+        <b-col cols="12">
+          <field-picker
+            :module="module"
+            :fields.sync="options.fields"
+            :exclude-fields="[options.bodyField]"
+            style="height: 40vh;"
+          />
+        </b-col>
+      </b-row>
+    </div>
+
+    <hr>
+
+    <div class="px-3">
+      <h5 class="mb-3">
+        {{ $t('collapsibleRecord.collapseSection.label') }}
+      </h5>
+
+      <b-row>
+        <!-- Default Collapsed -->
+        <b-col cols="12">
+          <b-form-group
+            :label="$t('collapsibleRecord.collapseSection.defaultCollapsed')"
+            label-class="text-primary"
+          >
+            <c-input-checkbox
+              v-model="options.defaultCollapsed"
+              switch
+              :labels="checkboxLabel"
+            />
+          </b-form-group>
+        </b-col>
+
+        <!-- Inline Edit -->
+        <b-col
+          cols="12"
+          lg="6"
+        >
+          <b-form-group
+            :label="$t('record.inlineEdit.enabled')"
+            label-class="text-primary"
+          >
+            <c-input-checkbox
+              v-model="options.inlineRecordEditEnabled"
+              switch
+              :labels="checkboxLabel"
+            />
+          </b-form-group>
+        </b-col>
+
+        <b-col
+          cols="12"
+          lg="6"
+        >
+          <b-form-group
+            :label="$t('record.inlineEdit.allowAddField')"
+            label-class="text-primary"
+          >
+            <c-input-checkbox
+              v-model="options.inlineRecordEditAllowAddField"
+              switch
+              :labels="checkboxLabel"
+            />
+          </b-form-group>
+        </b-col>
+      </b-row>
+    </div>
+
+    <hr>
+
+    <div class="px-3">
+      <h5 class="d-flex align-items-center mb-2">
+        {{ $t('record.fieldConditions.label') }}
+
+        <c-hint
+          :tooltip="$t('record.fieldConditions.tooltip.performance')"
+          icon-class="text-warning"
+        />
+
+        <b-button
+          variant="link"
+          :href="visibilityDocumentationURL"
+          target="_blank"
+          class="p-0 ml-auto"
+        >
+          {{ $t('general:label.examples') }}
+        </b-button>
+      </h5>
+
+      <b-row class="mt-3">
+        <b-col cols="12">
+          <b-form-group
+            :label="$t('record.fieldConditions.clearAllOnHide')"
+            :description="$t('record.fieldConditions.clearAllOnHideDescription')"
+            label-class="text-primary"
+          >
+            <c-input-checkbox
+              v-model="options.clearConditionalFieldsOnHide"
+              switch
+              :labels="checkboxLabel"
+            />
+          </b-form-group>
+        </b-col>
+      </b-row>
+
+      <c-form-table-wrapper
+        :labels="{
+          addButton: $t('general:label.add')
+        }"
+        class="my-3"
+        @add-item="addRule"
+      >
+        <b-table-simple
+          v-if="block.options.fieldConditions.length > 0"
+          borderless
+          small
+          responsive
+        >
+          <b-thead>
+            <b-tr>
+              <b-th
+                class="text-primary"
+              >
+                {{ $t('record.fieldConditions.field') }}
+              </b-th>
+              <b-th
+                class="text-primary"
+              >
+                {{ $t('record.fieldConditions.condition') }}
+              </b-th>
+              <b-th
+                class="text-center"
+                style="width: 150px;"
+              >
+                <div class="d-flex align-items-center justify-content-center">
+                  {{ $t('record.fieldConditions.clearOnHide') }}
+                  <c-hint
+                    :tooltip="$t('record.fieldConditions.clearOnHideTooltip')"
+                    class="ml-1"
+                  />
+                </div>
+              </b-th>
+              <b-th />
+            </b-tr>
+          </b-thead>
+
+          <b-tbody>
+            <b-tr
+              v-for="(condition, i) in block.options.fieldConditions"
+              :key="i"
+            >
+              <b-td style="width: 33%; min-width: 250px;">
+                <c-input-select
+                  v-model="condition.field"
+                  :options="block.options.fields"
+                  :placeholder="$t('record.fieldConditions.selectPlaceholder')"
+                  :selectable="option => isSelectable(option)"
+                  :get-option-label="getOptionLabel"
+                  :get-option-key="getOptionKey"
+                  :reduce="option => option.isSystem ? option.name : option.fieldID"
+                />
+              </b-td>
+
+              <b-td
+                class="align-middle"
+                style="min-width: 300px;"
+              >
+                <b-input-group>
+                  <b-input-group-prepend>
+                    <b-input-group-text variant="extra-light">
+                      ƒ
+                    </b-input-group-text>
+                  </b-input-group-prepend>
+
+                  <c-input-expression
+                    v-model="condition.condition"
+                    auto-complete
+                    :placeholder="$t('record.fieldConditions.placeholder')"
+                    :suggestion-params="visibilityAutoCompleteParams"
+                    class="flex-grow-1"
+                  />
+                </b-input-group>
+              </b-td>
+
+              <b-td style="width: 20px;">
+                <div class="d-flex align-items-center justify-content-center">
+                  <c-input-checkbox
+                    v-model="condition.clearOnHide"
+                    switch
+                  />
+                </div>
+              </b-td>
+
+              <b-td
+                class="text-right"
+                style="width: 4rem;"
+              >
+                <c-input-confirm
+                  show-icon
+                  @confirmed="deleteRule(i)"
+                />
+              </b-td>
+            </b-tr>
+          </b-tbody>
+        </b-table-simple>
+      </c-form-table-wrapper>
+
+      <i18next
+        path="general.visibility.condition.description.record-page"
+        tag="small"
+        class="text-muted"
+      >
+        <code>record.values.fieldName</code>
+        <code>user.(userID/email...)</code>
+        <code>user.userID == record.createdBy</code>
+        <code>record.values.fieldName == "value"</code>
+        <code>record.ownedBy == user.userID</code>
+        <code>screen.width &lt; 1024</code>
+      </i18next>
+    </div>
+  </b-tab>
+</template>
+
+<script>
+import base from './base'
+import FieldPicker from 'corteza-webapp-compose/src/components/Common/FieldPicker'
+import { NoID } from '@cortezaproject/corteza-js'
+import autocomplete from 'corteza-webapp-compose/src/mixins/autocomplete.js'
+import { components } from '@cortezaproject/corteza-vue'
+
+const { CInputExpression } = components
+
+export default {
+  i18nOptions: {
+    namespaces: 'block',
+  },
+
+  name: 'CollapsibleRecord',
+
+  components: {
+    FieldPicker,
+    CInputExpression,
+  },
+
+  extends: base,
+
+  mixins: [autocomplete],
+
+  data () {
+    return {
+      checkboxLabel: {
+        on: this.$t('general:label.yes'),
+        off: this.$t('general:label.no'),
+      },
+    }
+  },
+
+  computed: {
+    visibilityDocumentationURL () {
+      // eslint-disable-next-line no-undef
+      const [year, month] = VERSION.split('.')
+      return `https://docs.cortezaproject.org/corteza-docs/${year}.${month}/integrator-guide/compose-configuration/page-layouts.html#visibility-condition`
+    },
+
+    positionOptions () {
+      return [
+        { value: 'default', label: this.$t('collapsibleRecord.otherFields.position.default') },
+        { value: 'above', label: this.$t('collapsibleRecord.otherFields.position.above') },
+        { value: 'below', label: this.$t('collapsibleRecord.otherFields.position.below') },
+      ]
+    },
+
+    fieldsLayoutOptions () {
+      return [
+        { value: 'default', label: this.$t('record.fieldsLayoutMode.default') },
+        { value: 'noWrap', label: this.$t('record.fieldsLayoutMode.noWrap') },
+        { value: 'wrap', label: this.$t('record.fieldsLayoutMode.wrap') },
+      ]
+    },
+
+    bodyFieldOptions () {
+      if (!this.module) {
+        return []
+      }
+      return this.module.fields
+    },
+
+    expressionParams () {
+      return [
+        { label: 'record.values.fieldName', text: 'record.values.fieldName' },
+        { label: 'user.userID', text: 'user.userID' },
+        { label: 'record.createdBy', text: 'record.createdBy' },
+        { label: 'record.ownedBy', text: 'record.ownedBy' },
+      ]
+    },
+
+    visibilityAutoCompleteParams () {
+      return [
+        { label: 'record.values.fieldName', text: 'record.values.fieldName' },
+        { label: 'user.userID', text: 'user.userID' },
+        { label: 'user.email', text: 'user.email' },
+        { label: 'record.createdBy', text: 'record.createdBy' },
+        { label: 'record.ownedBy', text: 'record.ownedBy' },
+        { label: 'recordID', text: 'recordID' },
+        { label: 'ownerID', text: 'ownerID' },
+        { label: 'userID', text: 'userID' },
+      ]
+    },
+  },
+
+  methods: {
+    getFieldLabel ({ name, label }) {
+      return label || name
+    },
+
+    getOptionKey ({ fieldID, name }) {
+      return fieldID !== NoID ? fieldID : name
+    },
+
+    handleFieldsLayout (v) {
+      if (v !== 'noWrap') return
+
+      this.block.options.horizontalFieldLayoutEnabled = false
+    },
+
+    addRule () {
+      this.options.fieldConditions.push({
+        field: undefined,
+        condition: '',
+        clearOnHide: false,
+      })
+    },
+
+    deleteRule (i) {
+      this.options.fieldConditions.splice(i, 1)
+    },
+
+    isSelectable (option) {
+      return !this.block.options.fieldConditions.find(({ field }) => field === option.fieldID || field === option.name) && !option.isRequired
+    },
+
+    getOptionLabel (option) {
+      return option.label || option.name
+    },
+  },
+}
+</script>
diff --git a/client/web/compose/src/components/PageBlocks/CollapsibleRecordEditor.vue b/client/web/compose/src/components/PageBlocks/CollapsibleRecordEditor.vue
new file mode 100644
index 0000000000..84993221c4
--- /dev/null
+++ b/client/web/compose/src/components/PageBlocks/CollapsibleRecordEditor.vue
@@ -0,0 +1,604 @@
+<template>
+  <wrap
+    v-bind="$props"
+    body-class="pt-0 px-0"
+    class="collapsible-record-wrap"
+    v-on="$listeners"
+  >
+    <div
+      v-if="isProcessing"
+      class="d-flex align-items-center justify-content-center h-100 p-3"
+    >
+      <b-spinner />
+    </div>
+
+    <div
+      v-else-if="module"
+      ref="collapsibleRecordContainer"
+      class="collapsible-record"
+    >
+      <!-- Collapsible Header -->
+      <div
+        ref="collapsibleHeader"
+        class="collapsible-header d-flex align-items-center p-3"
+        :class="headerClass"
+        role="button"
+        :aria-expanded="!collapsed"
+        :aria-controls="`collapsible-body-${blockIndex}`"
+        tabindex="0"
+        @click="toggleCollapse"
+        @keydown.enter="toggleCollapse"
+        @keydown.space.prevent="toggleCollapse"
+      >
+        <div class="collapsible-titles">
+          <template v-if="useInlineTitleAlignment">
+            <div class="collapsible-title d-flex justify-content-between w-100">
+              <span
+                v-if="titleAlignmentData.left"
+                class="text-left"
+                style="flex: 1;"
+                v-html="titleAlignmentData.left"
+              />
+              <span
+                v-if="titleAlignmentData.center"
+                class="text-center"
+                style="flex: 1;"
+                v-html="titleAlignmentData.center"
+              />
+              <span
+                v-if="titleAlignmentData.right"
+                class="text-right"
+                style="flex: 1;"
+                v-html="titleAlignmentData.right"
+              />
+            </div>
+          </template>
+          <template v-else>
+            <div
+              class="collapsible-title"
+              :class="titleAlignmentClass"
+            >
+              {{ titleText || options.titleExpression || 'Untitled' }}
+            </div>
+          </template>
+
+          <template v-if="displaySubtitle">
+            <template v-if="useInlineSubtitleAlignment">
+              <div class="collapsible-subtitle d-flex justify-content-between w-100 mt-1">
+                <span
+                  v-if="subtitleAlignmentData.left"
+                  class="text-left"
+                  style="flex: 1;"
+                  v-html="subtitleAlignmentData.left"
+                />
+                <span
+                  v-if="subtitleAlignmentData.center"
+                  class="text-center"
+                  style="flex: 1;"
+                  v-html="subtitleAlignmentData.center"
+                />
+                <span
+                  v-if="subtitleAlignmentData.right"
+                  class="text-right"
+                  style="flex: 1;"
+                  v-html="subtitleAlignmentData.right"
+                />
+              </div>
+            </template>
+            <template v-else>
+              <div
+                class="collapsible-subtitle"
+                :class="subtitleAlignmentClass"
+              >
+                {{ subtitleText || options.subtitleExpression || '' }}
+              </div>
+            </template>
+          </template>
+        </div>
+
+        <div class="collapsible-chevron ml-2">
+          <font-awesome-icon
+            :icon="collapsed ? ['fas', 'chevron-down'] : ['fas', 'chevron-up']"
+            class="text-muted"
+          />
+        </div>
+      </div>
+
+      <!-- Collapsible Body -->
+      <b-collapse
+        :id="`collapsible-body-${blockIndex}`"
+        :visible="!collapsed"
+        class="collapsible-content"
+      >
+        <!-- Other Fields - Above Body -->
+        <div
+          v-if="showOtherFieldsAbove && otherFields.length"
+          ref="fieldContainerAbove"
+          class="other-fields-section px-3 pt-3 pb-3"
+          :class="fieldLayoutClass"
+        >
+          <template v-for="field in otherFields">
+            <div
+              v-if="canDisplay(field)"
+              :key="`${field.fieldID}-${field.name}-above`"
+              :class="`field-container ${columnWrapClass}`"
+              :style="fieldWidth"
+            >
+              <field-editor
+                v-if="isFieldEditable(field)"
+                v-bind="{ ...$props, errors: fieldErrors(field.name) }"
+                :horizontal="horizontal"
+                :field="field"
+                :extra-options="options"
+                @change="onFieldChange(field)"
+              />
+
+              <b-form-group
+                v-else
+                :label-cols-md="horizontal && '5'"
+                :label-cols-xl="horizontal && '4'"
+                :content-cols-md="horizontal && '7'"
+                :content-cols-xl="horizontal && '8'"
+              >
+                <template #label>
+                  <div class="d-flex align-items-center text-primary mb-0">
+                    <span class="d-flex">
+                      {{ field.label || field.name }}
+                    </span>
+                    <c-hint :tooltip="((field.options.hint || {}).view || '')" />
+                  </div>
+                  <div
+                    class="small text-muted"
+                    :class="{ 'mb-1': !!(field.options.description || {}).view }"
+                  >
+                    {{ (field.options.description || {}).view }}
+                  </div>
+                </template>
+
+                <div
+                  v-if="field.canReadRecordValue"
+                  class="value align-self-center"
+                >
+                  <field-viewer
+                    :field="field"
+                    v-bind="{ ...$props, errors: fieldErrors(field.name) }"
+                    value-only
+                  />
+                </div>
+                <i
+                  v-else
+                  class="text-muted"
+                >
+                  {{ $t('field.noPermission') }}
+                </i>
+              </b-form-group>
+            </div>
+          </template>
+        </div>
+
+        <!-- Body Field (Full Width) -->
+        <div
+          v-if="bodyFieldConfig"
+          class="body-field-container px-3 pt-3 pb-3"
+        >
+          <field-editor
+            v-if="isFieldEditable(bodyFieldConfig)"
+            v-bind="{ ...$props, errors: fieldErrors(bodyFieldConfig.name) }"
+            :horizontal="horizontal"
+            :field="bodyFieldConfig"
+            :extra-options="options"
+            @change="onFieldChange(bodyFieldConfig)"
+          />
+          <div
+            v-else-if="bodyFieldConfig.canReadRecordValue"
+            class="body-field-content"
+            v-html="bodyFieldValue"
+          />
+          <i
+            v-else
+            class="text-muted"
+          >
+            {{ $t('field.noPermission') }}
+          </i>
+        </div>
+
+        <!-- Other Fields - Default or Below Body -->
+        <div
+          v-if="showOtherFieldsAfter && otherFields.length"
+          ref="fieldContainerAfter"
+          class="other-fields-section px-3 pb-3"
+          :class="fieldLayoutClass"
+        >
+          <template v-for="field in otherFields">
+            <div
+              v-if="canDisplay(field)"
+              :key="`${field.fieldID}-${field.name}-after`"
+              :class="`field-container ${columnWrapClass}`"
+              :style="fieldWidth"
+            >
+              <field-editor
+                v-if="isFieldEditable(field)"
+                v-bind="{ ...$props, errors: fieldErrors(field.name) }"
+                :horizontal="horizontal"
+                :field="field"
+                :extra-options="options"
+                @change="onFieldChange(field)"
+              />
+
+              <b-form-group
+                v-else
+                :label-cols-md="horizontal && '5'"
+                :label-cols-xl="horizontal && '4'"
+                :content-cols-md="horizontal && '7'"
+                :content-cols-xl="horizontal && '8'"
+              >
+                <template #label>
+                  <div class="d-flex align-items-center text-primary mb-0">
+                    <span class="d-flex">
+                      {{ field.label || field.name }}
+                    </span>
+                    <c-hint :tooltip="((field.options.hint || {}).view || '')" />
+                  </div>
+                  <div
+                    class="small text-muted"
+                    :class="{ 'mb-1': !!(field.options.description || {}).view }"
+                  >
+                    {{ (field.options.description || {}).view }}
+                  </div>
+                </template>
+
+                <div
+                  v-if="field.canReadRecordValue"
+                  class="value align-self-center"
+                >
+                  <field-viewer
+                    :field="field"
+                    v-bind="{ ...$props, errors: fieldErrors(field.name) }"
+                    value-only
+                  />
+                </div>
+                <i
+                  v-else
+                  class="text-muted"
+                >
+                  {{ $t('field.noPermission') }}
+                </i>
+              </b-form-group>
+            </div>
+          </template>
+        </div>
+      </b-collapse>
+    </div>
+  </wrap>
+</template>
+
+<script>
+import { NoID, compose } from '@cortezaproject/corteza-js'
+import { evaluatePrefilter } from 'corteza-webapp-compose/src/lib/record-filter'
+import base from './base'
+import FieldEditor from 'corteza-webapp-compose/src/components/ModuleFields/Editor'
+import FieldViewer from 'corteza-webapp-compose/src/components/ModuleFields/Viewer'
+import users from 'corteza-webapp-compose/src/mixins/users'
+import records from 'corteza-webapp-compose/src/mixins/records'
+import conditionalFields from 'corteza-webapp-compose/src/mixins/conditionalFields'
+import recordLayout from 'corteza-webapp-compose/src/mixins/recordLayout'
+import alignment from 'corteza-webapp-compose/src/mixins/alignment'
+import { mapGetters } from 'vuex'
+import { debounce } from 'lodash'
+
+export default {
+  i18nOptions: {
+    namespaces: 'block',
+  },
+
+  components: {
+    FieldEditor,
+    FieldViewer,
+  },
+
+  extends: base,
+
+  mixins: [
+    users,
+    records,
+    conditionalFields,
+    recordLayout,
+    alignment,
+  ],
+
+  data () {
+    return {
+      collapsed: false,
+    }
+  },
+
+  computed: {
+    ...mapGetters({
+      getModuleByID: 'module/getByID',
+      findRecordByID: 'record/findByID',
+    }),
+
+    resolvedRecord () {
+      if (!this.record || !this.module) return this.record
+
+      const resolvedValues = { ...this.record.values }
+
+      this.module.fields
+        .filter(f => f.kind === 'Record' && f.options && f.options.labelField)
+        .forEach(field => {
+          const rawValue = resolvedValues[field.name]
+          if (!rawValue) return
+          const rawResolved = this.findRecordByID(rawValue)
+          if (!rawResolved) return
+          const refModule = this.getModuleByID(field.options.moduleID)
+          if (!refModule) return
+          const refRecord = new compose.Record(refModule, rawResolved)
+          resolvedValues[field.name] = refRecord.values[field.options.labelField] || rawValue
+        })
+
+      return { ...this.record, values: resolvedValues }
+    },
+
+    titleAlignmentData () {
+      return this.parseAlignmentExpression(this.options.titleExpression || '', this.resolvedRecord)
+    },
+
+    subtitleAlignmentData () {
+      return this.parseAlignmentExpression(this.options.subtitleExpression || '', this.resolvedRecord)
+    },
+
+    useInlineTitleAlignment () {
+      return this.titleAlignmentData.hasValidMarkers
+    },
+
+    useInlineSubtitleAlignment () {
+      return this.subtitleAlignmentData.hasValidMarkers
+    },
+
+    titleText () {
+      if (this.useInlineTitleAlignment) return ''
+
+      try {
+        return evaluatePrefilter(this.options.titleExpression || '', {
+          record: this.resolvedRecord,
+          user: this.$auth.user || {},
+          recordID: (this.resolvedRecord || {}).recordID || NoID,
+          ownerID: (this.resolvedRecord || {}).ownedBy || NoID,
+          userID: (this.$auth.user || {}).userID || NoID,
+        })
+      } catch (e) {
+        return this.options.titleExpression || ''
+      }
+    },
+
+    subtitleText () {
+      if (this.useInlineSubtitleAlignment) return ''
+
+      try {
+        return evaluatePrefilter(this.options.subtitleExpression || '', {
+          record: this.resolvedRecord,
+          user: this.$auth.user || {},
+          recordID: (this.resolvedRecord || {}).recordID || NoID,
+          ownerID: (this.resolvedRecord || {}).ownedBy || NoID,
+          userID: (this.$auth.user || {}).userID || NoID,
+        })
+      } catch (e) {
+        return this.options.subtitleExpression || ''
+      }
+    },
+
+    displaySubtitle () {
+      if (!this.options.subtitleShowWhenCollapsed && this.collapsed) {
+        return false
+      }
+      if (this.useInlineSubtitleAlignment) {
+        return !!(this.subtitleAlignmentData.left || this.subtitleAlignmentData.center || this.subtitleAlignmentData.right)
+      }
+      return !!this.subtitleText
+    },
+
+    titleAlignmentClass () {
+      return {
+        'text-left': !this.useInlineTitleAlignment || this.options.titleAlignment === 'left',
+        'text-center': this.options.titleAlignment === 'center' && !this.useInlineTitleAlignment,
+        'text-right': this.options.titleAlignment === 'right' && !this.useInlineTitleAlignment,
+      }
+    },
+
+    subtitleAlignmentClass () {
+      return {
+        'text-left': !this.useInlineSubtitleAlignment || this.options.subtitleAlignment === 'left',
+        'text-center': this.options.subtitleAlignment === 'center' && !this.useInlineSubtitleAlignment,
+        'text-right': this.options.subtitleAlignment === 'right' && !this.useInlineSubtitleAlignment,
+      }
+    },
+
+    headerClass () {
+      return 'cursor-pointer'
+    },
+
+    bodyFieldConfig () {
+      if (!this.options.bodyField || !this.module) return null
+      const field = this.module.fields.find(f => f.name === this.options.bodyField || f.fieldID === this.options.bodyField)
+      return field || null
+    },
+
+    bodyFieldValue () {
+      if (!this.bodyFieldConfig || !this.record) return ''
+      const fieldName = this.bodyFieldConfig.name
+      return this.record.values[fieldName] || ''
+    },
+
+    otherFields () {
+      if (!this.module) return []
+
+      const selectedFields = this.options.fields || []
+      if (selectedFields.length === 0) return []
+
+      const bodyFieldName = this.options.bodyField
+      const fields = this.module.filterFields(selectedFields).filter(f => f.name !== bodyFieldName && f.fieldID !== bodyFieldName)
+
+      return fields.map(f => {
+        f.label = f.isSystem ? this.$t(`field:system.${f.name}`) : f.label || f.name
+        return f
+      })
+    },
+
+    showOtherFieldsAbove () {
+      return this.options.otherFieldsPosition === 'above'
+    },
+
+    showOtherFieldsAfter () {
+      const pos = this.options.otherFieldsPosition
+      return pos === 'below' || pos === 'default' || !pos
+    },
+
+    fieldLayoutClass () {
+      const classes = {
+        default: 'd-flex flex-column',
+        noWrap: 'd-flex gap-2',
+        wrap: 'row no-gutters',
+      }
+      return classes[this.options.recordFieldLayoutOption] || classes.default
+    },
+
+    columnWrapClass () {
+      if (this.options.recordFieldLayoutOption !== 'wrap') return ''
+      return 'field-col'
+    },
+
+    fieldWidth () {
+      if (this.options.recordFieldLayoutOption !== 'noWrap') return {}
+      return { 'min-width': '20rem' }
+    },
+
+    isProcessing () {
+      return this.loadingRecord || !this.record || this.evaluating
+    },
+
+    horizontal () {
+      return this.block.options.horizontalFieldLayoutEnabled
+    },
+
+    isNew () {
+      return this.record && this.record.recordID === NoID
+    },
+  },
+
+  watch: {
+    'options.defaultCollapsed': {
+      immediate: true,
+      handler (collapsed) {
+        this.collapsed = !!collapsed
+      },
+    },
+
+    loadingRecord: {
+      immediate: true,
+      handler (loadingRecord) {
+        const { recordID } = this.record || {}
+
+        if (!recordID || loadingRecord) return
+
+        let resolutions = []
+
+        if (recordID !== NoID) {
+          resolutions = [
+            this.fetchUsers(this.module.fields, [this.record]),
+            this.fetchRecords(this.namespace.namespaceID, this.module.fields, [this.record]),
+          ]
+        }
+
+        this.evaluating = true
+
+        Promise.all([
+          ...resolutions,
+          this.evaluateExpressions(),
+        ]).finally(() => {
+          this.evaluating = false
+        })
+      },
+    },
+  },
+
+  mounted () {
+    this.createEvents()
+  },
+
+  beforeDestroy () {
+    this.destroyEvents()
+  },
+
+  methods: {
+    toggleCollapse () {
+      this.collapsed = !this.collapsed
+    },
+
+    onFieldChange: debounce(function (field) {
+      this.$root.$emit('record-field-change', {
+        fieldName: field.name,
+      })
+    }, 500),
+
+    createEvents () {
+      this.$root.$on('record-field-change', this.evaluateExpressions)
+    },
+
+    destroyEvents () {
+      this.$root.$off('record-field-change', this.evaluateExpressions)
+    },
+  },
+}
+</script>
+
+<style scoped>
+.collapsible-record-wrap {
+  overflow: hidden;
+}
+
+.collapsible-record {
+  border: 1px solid #dee2e6;
+  border-radius: 0.25rem;
+  overflow: hidden;
+}
+
+.collapsible-header {
+  background-color: #f8f9fa;
+  border-bottom: 1px solid #dee2e6;
+  cursor: pointer;
+  user-select: none;
+}
+
+.collapsible-header:hover {
+  background-color: #e9ecef;
+}
+
+.collapsible-titles {
+  flex-grow: 1;
+}
+
+.collapsible-title {
+  font-weight: 600;
+  font-size: 1.1rem;
+}
+
+.collapsible-subtitle {
+  font-size: 0.9rem;
+  color: #6c757d;
+}
+
+.collapsible-chevron {
+  flex-shrink: 0;
+}
+
+.body-field-container {
+  border-bottom: 1px solid #dee2e6;
+}
+
+.field-col > * {
+  margin-left: 1rem;
+  margin-right: 1rem;
+}
+</style>
+</content>
+</invoke>
\ No newline at end of file
diff --git a/client/web/compose/src/components/PageBlocks/CollapsibleRecordListBase.vue b/client/web/compose/src/components/PageBlocks/CollapsibleRecordListBase.vue
new file mode 100644
index 0000000000..deb7d1e698
--- /dev/null
+++ b/client/web/compose/src/components/PageBlocks/CollapsibleRecordListBase.vue
@@ -0,0 +1,899 @@
+<template>
+  <wrap
+    v-bind="$props"
+    class="collapsible-record-list-wrap"
+    body-class="pt-0 px-0"
+    v-on="$listeners"
+    @refreshBlock="refresh(true, false)"
+  >
+    <!-- Loading state -->
+    <div
+      v-if="isProcessing"
+      class="d-flex align-items-center justify-content-center h-100 p-3"
+    >
+      <b-spinner />
+    </div>
+
+    <div
+      v-else-if="recordListModule"
+      class="collapsible-record-list"
+    >
+      <!-- Iterate over each record and display in collapsible section -->
+      <div
+        v-for="(item, index) in items"
+        :key="item.r.recordID || index"
+        class="collapsible-record-item"
+      >
+        <!-- Collapsible Header -->
+        <div class="collapsible-header d-flex align-items-stretch">
+          <!-- Title area — click to open record -->
+          <div
+            class="collapsible-title-area d-flex align-items-center flex-grow-1 p-3"
+            :class="{ 'is-clickable': recordPageID }"
+            :role="recordPageID ? 'button' : undefined"
+            :tabindex="recordPageID ? 0 : undefined"
+            :title="recordPageID ? $t('general:label.open') : undefined"
+            @click="recordPageID && handleRecordOpen(item.r)"
+            @keydown.enter="recordPageID && handleRecordOpen(item.r)"
+            @keydown.space.prevent="recordPageID && handleRecordOpen(item.r)"
+          >
+            <div class="collapsible-titles">
+              <!-- Title with inline alignment OR regular alignment -->
+              <template v-if="useInlineTitleAlignment(item.r)">
+                <div class="collapsible-title d-flex justify-content-between w-100">
+                  <span
+                    v-if="getTitleAlignmentData(item.r).left"
+                    class="text-left"
+                    style="flex: 1;"
+                    v-html="getTitleAlignmentData(item.r).left"
+                  />
+                  <span
+                    v-if="getTitleAlignmentData(item.r).center"
+                    class="text-center"
+                    style="flex: 1;"
+                    v-html="getTitleAlignmentData(item.r).center"
+                  />
+                  <span
+                    v-if="getTitleAlignmentData(item.r).right"
+                    class="text-right"
+                    style="flex: 1;"
+                    v-html="getTitleAlignmentData(item.r).right"
+                  />
+                </div>
+              </template>
+              <template v-else>
+                <div
+                  class="collapsible-title"
+                  :class="getTitleAlignmentClass(item.r)"
+                >
+                  {{ getTitleText(item.r) || options.titleExpression || 'Untitled' }}
+                </div>
+              </template>
+
+              <!-- Subtitle -->
+              <template v-if="displaySubtitle(item.r)">
+                <template v-if="useInlineSubtitleAlignment(item.r)">
+                  <div class="collapsible-subtitle d-flex justify-content-between w-100 mt-1">
+                    <span
+                      v-if="getSubtitleAlignmentData(item.r).left"
+                      class="text-left"
+                      style="flex: 1;"
+                      v-html="getSubtitleAlignmentData(item.r).left"
+                    />
+                    <span
+                      v-if="getSubtitleAlignmentData(item.r).center"
+                      class="text-center"
+                      style="flex: 1;"
+                      v-html="getSubtitleAlignmentData(item.r).center"
+                    />
+                    <span
+                      v-if="getSubtitleAlignmentData(item.r).right"
+                      class="text-right"
+                      style="flex: 1;"
+                      v-html="getSubtitleAlignmentData(item.r).right"
+                    />
+                  </div>
+                </template>
+                <template v-else>
+                  <div
+                    class="collapsible-subtitle"
+                    :class="getSubtitleAlignmentClass(item.r)"
+                  >
+                    {{ getSubtitleText(item.r) || options.subtitleExpression || '' }}
+                  </div>
+                </template>
+              </template>
+            </div>
+          </div>
+
+          <!-- Chevron — click to toggle collapse -->
+          <div
+            class="collapsible-chevron d-flex align-items-center justify-content-center px-3"
+            role="button"
+            :aria-expanded="!isCollapsed(item.r.recordID)"
+            :aria-controls="`collapsible-body-${blockIndex}-${item.r.recordID}`"
+            tabindex="0"
+            :title="isCollapsed(item.r.recordID) ? $t('general:label.expand') : $t('general:label.collapse')"
+            @click.stop="toggleCollapse(item.r.recordID)"
+            @keydown.enter.stop="toggleCollapse(item.r.recordID)"
+            @keydown.space.stop.prevent="toggleCollapse(item.r.recordID)"
+          >
+            <font-awesome-icon
+              :icon="isCollapsed(item.r.recordID) ? ['fas', 'chevron-down'] : ['fas', 'chevron-up']"
+              class="text-muted"
+            />
+          </div>
+        </div>
+
+        <!-- Collapsible Body -->
+        <b-collapse
+          :id="`collapsible-body-${blockIndex}-${item.r.recordID}`"
+          :visible="!isCollapsed(item.r.recordID)"
+          class="collapsible-content"
+        >
+          <!-- Other Fields Section - Above Body -->
+          <div
+            v-if="showOtherFieldsAbove && otherFields.length"
+            class="other-fields-section px-3 pb-3"
+          >
+            <div :class="fieldLayoutClass">
+              <template v-for="field in otherFields">
+                <b-form-group
+                  v-if="canDisplay(field, item.r)"
+                  :key="`${field.fieldID}-${field.name}-${item.r.recordID}`"
+                  :label-cols-md="options.horizontalFieldLayoutEnabled && '6'"
+                  :label-cols-xl="options.horizontalFieldLayoutEnabled && '5'"
+                  :content-cols-md="options.horizontalFieldLayoutEnabled && '6'"
+                  :content-cols-xl="options.horizontalFieldLayoutEnabled && '7'"
+                  :class="columnWrapClass"
+                  :style="fieldWidth"
+                  class="field-container"
+                >
+                  <template #label>
+                    <div class="d-flex align-items-center text-primary mb-0">
+                      <span
+                        class="d-flex"
+                        style="margin-top: 0.1rem;"
+                      >
+                        {{ field.label || field.name }}
+                      </span>
+                      <c-hint :tooltip="((field.options.hint || {}).view || '')" />
+                    </div>
+                    <div
+                      class="small text-muted"
+                      :class="{ 'mb-1': !!(field.options.description || {}).view }"
+                    >
+                      {{ (field.options.description || {}).view }}
+                    </div>
+                  </template>
+                  <div
+                    v-if="field.canReadRecordValue"
+                    class="value align-self-center"
+                  >
+                    <field-viewer
+                      v-bind="{ ...$props, record: item.r }"
+                      :module="recordListModule"
+                      :field="field"
+                      :extra-options="options"
+                    />
+                  </div>
+                  <i
+                    v-else
+                    class="text-muted"
+                  >{{ $t('field.noPermission') }}</i>
+                </b-form-group>
+              </template>
+            </div>
+          </div>
+
+          <!-- Body Field (Full Width) -->
+          <div
+            v-if="bodyField && bodyFieldConfig"
+            class="body-field-container p-3"
+          >
+            <div
+              v-if="bodyFieldConfig.canReadRecordValue"
+              class="body-field-content"
+              v-html="getBodyFieldValue(item.r)"
+            />
+            <i
+              v-else
+              class="text-muted"
+            >
+              {{ $t('field.noPermission') }}
+            </i>
+          </div>
+
+          <!-- Other Fields - Default or Below Body -->
+          <div
+            v-if="showOtherFieldsAfter && otherFields.length"
+            class="other-fields-section px-3 pb-3"
+          >
+            <div :class="fieldLayoutClass">
+              <template v-for="field in otherFields">
+                <b-form-group
+                  v-if="canDisplay(field, item.r)"
+                  :key="`${field.fieldID}-${field.name}-${item.r.recordID}`"
+                  :label-cols-md="options.horizontalFieldLayoutEnabled && '6'"
+                  :label-cols-xl="options.horizontalFieldLayoutEnabled && '5'"
+                  :content-cols-md="options.horizontalFieldLayoutEnabled && '6'"
+                  :content-cols-xl="options.horizontalFieldLayoutEnabled && '7'"
+                  :class="columnWrapClass"
+                  :style="fieldWidth"
+                  class="field-container"
+                >
+                  <template #label>
+                    <div class="d-flex align-items-center text-primary mb-0">
+                      <span
+                        class="d-flex"
+                        style="margin-top: 0.1rem;"
+                      >
+                        {{ field.label || field.name }}
+                      </span>
+                      <c-hint :tooltip="((field.options.hint || {}).view || '')" />
+                    </div>
+                    <div
+                      class="small text-muted"
+                      :class="{ 'mb-1': !!(field.options.description || {}).view }"
+                    >
+                      {{ (field.options.description || {}).view }}
+                    </div>
+                  </template>
+                  <div
+                    v-if="field.canReadRecordValue"
+                    class="value align-self-center"
+                  >
+                    <field-viewer
+                      v-bind="{ ...$props, record: item.r }"
+                      :module="recordListModule"
+                      :field="field"
+                      :extra-options="options"
+                    />
+                  </div>
+                  <i
+                    v-else
+                    class="text-muted"
+                  >{{ $t('field.noPermission') }}</i>
+                </b-form-group>
+              </template>
+            </div>
+          </div>
+        </b-collapse>
+      </div>
+
+      <!-- Empty state -->
+      <div
+        v-if="!items.length && !isProcessing"
+        class="text-center p-3 text-muted"
+      >
+        {{ $t('recordList.noRecords') }}
+      </div>
+    </div>
+
+    <template
+      v-if="recordListModule"
+    >
+      <!-- Pagination Footer -->
+      <div
+        v-if="showFooter"
+        class="d-flex align-items-center justify-content-between px-3 py-2 border-top mt-2"
+      >
+        <div
+          v-if="options.showTotalCount"
+          class="text-muted small"
+        >
+          {{ pagination.count }} records
+        </div>
+        <b-button-group class="gap-1 ml-auto">
+          <b-button
+            :disabled="!hasPrevPage || isProcessing"
+            variant="outline-extra-light"
+            class="d-flex align-items-center text-dark border-0 p-1"
+            @click="goToPage('first')"
+          >
+            <font-awesome-icon :icon="['fas', 'angle-double-left']" />
+          </b-button>
+          <b-button
+            :disabled="!hasPrevPage || isProcessing"
+            variant="outline-extra-light"
+            class="d-flex align-items-center text-dark border-0 p-1"
+            @click="goToPage('prev')"
+          >
+            <font-awesome-icon
+              :icon="['fas', 'angle-left']"
+              class="mr-1"
+            />
+            {{ $t('recordList.pagination.prev') }}
+          </b-button>
+          <b-button
+            :disabled="!hasNextPage || isProcessing"
+            variant="outline-extra-light"
+            class="d-flex align-items-center text-dark border-0 p-1"
+            @click="goToPage('next')"
+          >
+            {{ $t('recordList.pagination.next') }}
+            <font-awesome-icon
+              :icon="['fas', 'angle-right']"
+              class="ml-1"
+            />
+          </b-button>
+        </b-button-group>
+      </div>
+    </template>
+  </wrap>
+</template>
+
+<script>
+import { NoID, compose } from '@cortezaproject/corteza-js'
+import { evaluatePrefilter, getFieldFilter } from 'corteza-webapp-compose/src/lib/record-filter'
+import base from './base'
+import FieldViewer from 'corteza-webapp-compose/src/components/ModuleFields/Viewer'
+import users from 'corteza-webapp-compose/src/mixins/users'
+import records from 'corteza-webapp-compose/src/mixins/records'
+import conditionalFields from 'corteza-webapp-compose/src/mixins/conditionalFields'
+import recordLayout from 'corteza-webapp-compose/src/mixins/recordLayout'
+import alignment from 'corteza-webapp-compose/src/mixins/alignment'
+import { mapGetters } from 'vuex'
+
+export default {
+  i18nOptions: {
+    namespaces: 'block',
+  },
+
+  components: {
+    FieldViewer,
+  },
+
+  extends: base,
+
+  mixins: [
+    users,
+    records,
+    conditionalFields,
+    recordLayout,
+    alignment,
+  ],
+
+  data () {
+    return {
+      // Collapse state per record (stored locally in component)
+      collapsedRecords: {},
+
+      // Record list data
+      processing: false,
+      items: [],
+
+      // Filter and pagination
+      prefilter: undefined,
+      filter: {
+        query: '',
+        sort: 'createdAt DESC',
+        limit: 10,
+        pageCursor: '',
+      },
+
+      pagination: {
+        count: 0,
+      },
+
+      // Track if records are loaded
+      recordsLoaded: false,
+    }
+  },
+
+  computed: {
+    ...mapGetters({
+      getModuleByID: 'module/getByID',
+      findRecordByID: 'record/findByID',
+      pages: 'page/set',
+    }),
+
+    // Returns the module configured for this record list
+    recordListModule () {
+      if (this.options.moduleID) {
+        return this.getModuleByID(this.options.moduleID)
+      } else {
+        return undefined
+      }
+    },
+
+    recordPageID () {
+      const { moduleID } = this.recordListModule || {}
+      if (!moduleID) return undefined
+      const { pageID } = this.pages.find(p => p.moduleID === moduleID) || {}
+      return pageID
+    },
+
+    isProcessing () {
+      return this.processing
+    },
+
+    showOtherFieldsAbove () {
+      return this.options.otherFieldsPosition === 'above'
+    },
+
+    showOtherFieldsAfter () {
+      const pos = this.options.otherFieldsPosition
+      return pos === 'below' || pos === 'default' || !pos
+    },
+
+    fieldLayoutClass () {
+      const classes = {
+        default: 'd-flex flex-column',
+        noWrap: 'd-flex gap-2',
+        wrap: 'row no-gutters',
+      }
+      return classes[this.options.recordFieldLayoutOption] || classes.default
+    },
+
+    columnWrapClass () {
+      if (this.options.recordFieldLayoutOption !== 'wrap') {
+        return ''
+      }
+      return 'field-col'
+    },
+
+    fieldWidth () {
+      if (this.options.recordFieldLayoutOption !== 'noWrap') {
+        return {}
+      }
+      return { 'min-width': '13rem' }
+    },
+
+    bodyFieldConfig () {
+      if (!this.options.bodyField || !this.recordListModule) {
+        return null
+      }
+      const field = this.recordListModule.fields.find(f => f.name === this.options.bodyField || f.fieldID === this.options.bodyField)
+      if (!field) {
+        return null
+      }
+      return field
+    },
+
+    bodyField () {
+      return this.options.bodyField
+    },
+
+    otherFields () {
+      if (!this.recordListModule) {
+        return []
+      }
+
+      const selectedFields = this.options.fields || []
+
+      if (selectedFields.length === 0) {
+        return []
+      }
+
+      const bodyFieldName = this.options.bodyField
+      const fields = this.recordListModule.filterFields(selectedFields).filter(f => f.name !== bodyFieldName && f.fieldID !== bodyFieldName)
+
+      return fields.map(f => {
+        f.label = f.isSystem ? this.$t(`field:system.${f.name}`) : f.label || f.name
+        return f
+      })
+    },
+
+    hasPrevPage () {
+      return !!this.filter.prevPage
+    },
+
+    hasNextPage () {
+      return !!this.filter.nextPage
+    },
+
+    showPageNavigation () {
+      return !this.options.hidePaging
+    },
+
+    showFooter () {
+      return this.recordListModule && !this.options.hidePaging
+    },
+  },
+
+  watch: {
+    'options.moduleID': {
+      immediate: true,
+      handler () {
+        if (this.options.moduleID) {
+          this.recordsLoaded = false
+          this.loadRecords()
+        }
+      },
+    },
+  },
+
+  beforeDestroy () {
+    this.collapsedRecords = {}
+  },
+
+  methods: {
+    // Record list loading methods
+    async loadRecords () {
+      if (!this.recordListModule) {
+        return
+      }
+
+      this.processing = true
+
+      try {
+        // Build filter
+        const filter = this.buildFilter()
+
+        const { moduleID, namespaceID } = this.recordListModule
+
+        const { set: records, filter: responseFilter } = await this.$ComposeAPI.recordList({
+          moduleID,
+          namespaceID,
+          query: filter.query,
+          sort: filter.sort,
+          limit: filter.limit,
+          pageCursor: this.filter.pageCursor,
+          incTotal: !!this.options.showTotalCount,
+        })
+
+        // Store pagination cursors
+        this.filter.nextPage = responseFilter.nextPage
+        this.filter.prevPage = responseFilter.prevPage
+        this.pagination.count = responseFilter.total || records.length
+
+        // Convert to Record objects
+        this.items = records.map(r => ({
+          r: new compose.Record(r, this.recordListModule),
+          id: r.recordID,
+        }))
+
+        this.recordsLoaded = true
+
+        // Initialize collapse state for each record
+        this.items.forEach(item => {
+          if (this.collapsedRecords[item.r.recordID] === undefined) {
+            this.$set(this.collapsedRecords, item.r.recordID, this.options.defaultCollapsed)
+          }
+        })
+
+        // Fetch related records and users so field labels resolve in title/subtitle expressions
+        const loadedRecords = this.items.map(i => i.r)
+        await Promise.all([
+          this.fetchRecords(
+            this.recordListModule.namespaceID,
+            this.recordListModule.fields,
+            loadedRecords,
+          ),
+          this.fetchUsers(this.recordListModule.fields, loadedRecords),
+        ])
+      } catch (e) {
+        console.error('Failed to load records:', e)
+      } finally {
+        this.processing = false
+      }
+    },
+
+    buildFilter () {
+      const { presort, prefilter, perPage, refField } = this.options
+
+      const sort = presort || 'createdAt DESC'
+      const filterExpressions = []
+
+      // Initial prefilter
+      if (prefilter) {
+        try {
+          const pf = evaluatePrefilter(prefilter, {
+            record: this.record,
+            user: this.$auth.user || {},
+            recordID: (this.record || {}).recordID || NoID,
+            ownerID: (this.record || {}).ownedBy || NoID,
+            userID: (this.$auth.user || {}).userID || NoID,
+          })
+          filterExpressions.push(`(${pf})`)
+        } catch (e) {
+          console.warn('Failed to evaluate prefilter:', e)
+        }
+      }
+
+      // Link to parent record via refField
+      if (refField && this.record && this.record.recordID && this.record.recordID !== NoID) {
+        const refFieldObj = this.recordListModule.fields.find(f => f.name === refField)
+        if (refFieldObj && refFieldObj.isMulti) {
+          filterExpressions.push(getFieldFilter(refField, 'Record', this.record.recordID, 'IN'))
+        } else {
+          filterExpressions.push(getFieldFilter(refField, 'Record', this.record.recordID, '='))
+        }
+      }
+
+      return {
+        sort,
+        limit: perPage || 10,
+        query: filterExpressions.join(' AND '),
+      }
+    },
+
+    async refresh (resetPagination = false) {
+      if (resetPagination) {
+        this.filter.pageCursor = undefined
+      }
+      await this.loadRecords()
+    },
+
+    async goToPage (direction) {
+      if (direction === 'next') {
+        this.filter.pageCursor = this.filter.nextPage
+      } else if (direction === 'prev') {
+        this.filter.pageCursor = this.filter.prevPage
+      } else {
+        this.filter.pageCursor = undefined
+      }
+      await this.loadRecords()
+    },
+
+    // Collapse/expand methods
+    toggleCollapse (recordID) {
+      this.$set(this.collapsedRecords, recordID, !this.collapsedRecords[recordID])
+    },
+
+    isCollapsed (recordID) {
+      if (this.collapsedRecords[recordID] === undefined) {
+        return !!this.options.defaultCollapsed
+      }
+      return !!this.collapsedRecords[recordID]
+    },
+
+    handleRecordOpen (record) {
+      if (!this.recordPageID) return
+
+      const recordID = record.recordID
+      const displayOption = this.options.recordDisplayOption || 'modal'
+
+      if (displayOption === 'modal') {
+        this.$root.$emit('show-record-modal', {
+          recordID,
+          recordPageID: this.recordPageID,
+        })
+        return
+      }
+
+      const route = {
+        name: 'page.record',
+        params: {
+          pageID: this.recordPageID,
+          recordID,
+        },
+        query: null,
+      }
+
+      if (displayOption === 'newTab') {
+        window.open(this.$router.resolve(route).href)
+      } else {
+        this.$router.push(route)
+      }
+    },
+
+    getHeaderClass () {
+      return 'cursor-pointer'
+    },
+
+    getResolvedRecord (record) {
+      if (!record || !this.recordListModule) return record
+
+      const resolvedValues = { ...record.values }
+
+      this.recordListModule.fields
+        .filter(f => f.kind === 'Record' && f.options && f.options.labelField)
+        .forEach(field => {
+          const rawValue = resolvedValues[field.name]
+          if (!rawValue) return
+          const rawResolved = this.findRecordByID(rawValue)
+          if (!rawResolved) return
+          const refModule = this.getModuleByID(field.options.moduleID)
+          if (!refModule) return
+          const refRecord = new compose.Record(refModule, rawResolved)
+          resolvedValues[field.name] = refRecord.values[field.options.labelField] || rawValue
+        })
+
+      return { ...record, values: resolvedValues }
+    },
+
+    // Per-record title/subtitle methods
+    getTitleAlignmentData (record) {
+      return this.parseAlignmentExpression(this.options.titleExpression || '', this.getResolvedRecord(record))
+    },
+
+    getSubtitleAlignmentData (record) {
+      return this.parseAlignmentExpression(this.options.subtitleExpression || '', this.getResolvedRecord(record))
+    },
+
+    useInlineTitleAlignment (record) {
+      return this.getTitleAlignmentData(record).hasValidMarkers
+    },
+
+    useInlineSubtitleAlignment (record) {
+      return this.getSubtitleAlignmentData(record).hasValidMarkers
+    },
+
+    getTitleText (record) {
+      if (this.useInlineTitleAlignment(record)) {
+        return ''
+      }
+
+      const r = this.getResolvedRecord(record)
+      try {
+        return evaluatePrefilter(this.options.titleExpression || '', {
+          record: r,
+          user: this.$auth.user || {},
+          recordID: r.recordID || NoID,
+          ownerID: r.ownedBy || NoID,
+          userID: (this.$auth.user || {}).userID || NoID,
+        })
+      } catch (e) {
+        return this.options.titleExpression || ''
+      }
+    },
+
+    getSubtitleText (record) {
+      if (this.useInlineSubtitleAlignment(record)) {
+        return ''
+      }
+
+      const r = this.getResolvedRecord(record)
+      try {
+        return evaluatePrefilter(this.options.subtitleExpression || '', {
+          record: r,
+          user: this.$auth.user || {},
+          recordID: r.recordID || NoID,
+          ownerID: r.ownedBy || NoID,
+          userID: (this.$auth.user || {}).userID || NoID,
+        })
+      } catch (e) {
+        return this.options.subtitleExpression || ''
+      }
+    },
+
+    displaySubtitle (record) {
+      // If option to show when collapsed is NOT checked (false) and block is collapsed, hide subtitle
+      if (!this.options.subtitleShowWhenCollapsed && this.isCollapsed(record.recordID)) {
+        return false
+      }
+      // Check both regular text and inline alignment data
+      if (this.useInlineSubtitleAlignment(record)) {
+        const data = this.getSubtitleAlignmentData(record)
+        return !!(data.left || data.center || data.right)
+      }
+      return !!this.getSubtitleText(record)
+    },
+
+    getTitleAlignmentClass (record) {
+      return {
+        'text-left': !this.useInlineTitleAlignment(record) || this.options.titleAlignment === 'left',
+        'text-center': this.options.titleAlignment === 'center' && !this.useInlineTitleAlignment(record),
+        'text-right': this.options.titleAlignment === 'right' && !this.useInlineTitleAlignment(record),
+      }
+    },
+
+    getSubtitleAlignmentClass (record) {
+      return {
+        'text-left': !this.useInlineSubtitleAlignment(record) || this.options.subtitleAlignment === 'left',
+        'text-center': this.options.subtitleAlignment === 'center' && !this.useInlineSubtitleAlignment(record),
+        'text-right': this.options.subtitleAlignment === 'right' && !this.useInlineSubtitleAlignment(record),
+      }
+    },
+
+    getBodyFieldValue (record) {
+      if (!this.bodyFieldConfig || !record) {
+        return ''
+      }
+      const fieldName = this.bodyFieldConfig.name
+      return record.values[fieldName] || ''
+    },
+
+    canDisplay (field, record) {
+      // Check conditional field visibility
+      if (!this.options.fieldConditions || !this.options.fieldConditions.length) {
+        return true
+      }
+
+      // Match by fieldID or name, consistent with how the configurator stores conditions
+      const fieldKey = field.fieldID !== NoID ? field.fieldID : field.name
+      const conditions = this.options.fieldConditions.filter(c => c.field === fieldKey || c.field === field.name)
+      if (!conditions.length) {
+        return true
+      }
+
+      for (const condition of conditions) {
+        if (condition.condition) {
+          try {
+            const result = evaluatePrefilter(condition.condition, {
+              record,
+              user: this.$auth.user || {},
+              recordID: record.recordID || NoID,
+              ownerID: record.ownedBy || NoID,
+              userID: (this.$auth.user || {}).userID || NoID,
+            })
+
+            if (!result) {
+              return false
+            }
+          } catch (e) {
+            console.warn('Failed to evaluate condition:', e)
+          }
+        }
+      }
+
+      return true
+    },
+  },
+}
+</script>
+
+<style scoped>
+.collapsible-record {
+  border: 1px solid #dee2e6;
+  border-radius: 0.25rem;
+}
+
+.collapsible-header {
+  background-color: #f8f9fa;
+  border-bottom: 1px solid #dee2e6;
+  user-select: none;
+}
+
+.collapsible-title-area {
+  min-width: 0;
+}
+
+.collapsible-title-area.is-clickable {
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+}
+
+.collapsible-title-area.is-clickable:hover {
+  background-color: #e9ecef;
+}
+
+.collapsible-title-area.is-clickable:focus {
+  outline: none;
+  background-color: #e9ecef;
+  box-shadow: inset 0 0 0 2px rgba(13, 110, 253, 0.25);
+}
+
+.collapsible-titles {
+  flex-grow: 1;
+  min-width: 0;
+}
+
+.collapsible-title {
+  font-weight: 600;
+  font-size: 1.1rem;
+}
+
+.collapsible-subtitle {
+  font-size: 0.9rem;
+  color: #6c757d;
+}
+
+.collapsible-chevron {
+  flex-shrink: 0;
+  cursor: pointer;
+  border-left: 1px solid #dee2e6;
+  transition: background-color 0.15s ease;
+}
+
+.collapsible-chevron:hover {
+  background-color: #e9ecef;
+}
+
+.collapsible-chevron:focus {
+  outline: none;
+  background-color: #e9ecef;
+  box-shadow: inset 0 0 0 2px rgba(13, 110, 253, 0.25);
+}
+
+.body-field-container {
+  border-bottom: 1px solid #dee2e6;
+}
+
+.field-col > * {
+  margin-left: 1rem;
+  margin-right: 1rem;
+}
+</style>
diff --git a/client/web/compose/src/components/PageBlocks/CollapsibleRecordListConfigurator.vue b/client/web/compose/src/components/PageBlocks/CollapsibleRecordListConfigurator.vue
new file mode 100644
index 0000000000..7f98e69b11
--- /dev/null
+++ b/client/web/compose/src/components/PageBlocks/CollapsibleRecordListConfigurator.vue
@@ -0,0 +1,839 @@
+<template>
+  <b-tab
+    :title="$t('collapsibleRecordList.label')"
+    no-body
+  >
+    <div class="px-3 pt-3">
+      <h5 class="mb-3">
+        {{ $t('collapsibleRecord.headerSection.label') }}
+      </h5>
+
+      <b-row>
+        <!-- Title Expression -->
+        <b-col cols="12">
+          <b-form-group
+            :label="$t('collapsibleRecord.headerSection.titleSection.label')"
+            :description="$t('collapsibleRecord.headerSection.expressionHelp')"
+            label-class="text-primary"
+          >
+            <c-input-expression
+              v-model="options.titleExpression"
+              auto-complete
+              :placeholder="$t('collapsibleRecord.headerSection.titleSection.placeholder')"
+              :suggestion-params="expressionParams"
+            />
+          </b-form-group>
+        </b-col>
+
+        <!-- Subtitle Expression -->
+        <b-col cols="12">
+          <b-form-group
+            :label="$t('collapsibleRecord.headerSection.subtitleSection.label')"
+            :description="$t('collapsibleRecord.headerSection.expressionHelp')"
+            label-class="text-primary"
+          >
+            <c-input-expression
+              v-model="options.subtitleExpression"
+              auto-complete
+              :placeholder="$t('collapsibleRecord.headerSection.subtitleSection.placeholder')"
+              :suggestion-params="expressionParams"
+            />
+          </b-form-group>
+        </b-col>
+
+        <!-- Subtitle Show When Collapsed -->
+        <b-col
+          cols="12"
+          lg="6"
+        >
+          <b-form-group
+            :label="$t('collapsibleRecord.headerSection.subtitleSection.showWhenCollapsed')"
+            label-class="text-primary"
+          >
+            <c-input-checkbox
+              v-model="options.subtitleShowWhenCollapsed"
+              switch
+              :labels="checkboxLabel"
+            />
+          </b-form-group>
+        </b-col>
+      </b-row>
+    </div>
+
+    <hr>
+
+    <div
+      v-if="recordListModule"
+      class="px-3"
+    >
+      <h5 class="mb-3">
+        {{ $t('collapsibleRecord.bodySection.label') }}
+      </h5>
+
+      <b-row>
+        <!-- Body Field Selector -->
+        <b-col cols="12">
+          <b-form-group
+            :label="$t('collapsibleRecord.bodySection.bodyField.label')"
+            :description="$t('collapsibleRecord.bodySection.bodyField.description')"
+            label-class="text-primary"
+          >
+            <c-input-select
+              v-model="options.bodyField"
+              :options="bodyFieldOptions"
+              :get-option-label="getFieldLabel"
+              :get-option-key="getOptionKey"
+              :placeholder="$t('collapsibleRecord.bodySection.bodyField.placeholder')"
+              :reduce="getOptionKey"
+            />
+          </b-form-group>
+        </b-col>
+      </b-row>
+    </div>
+
+    <hr v-if="recordListModule">
+
+    <div
+      v-if="recordListModule"
+      class="px-3"
+    >
+      <h5 class="mb-3">
+        {{ $t('collapsibleRecord.otherFields.label') }}
+      </h5>
+
+      <b-row>
+        <!-- Other Fields Position -->
+        <b-col
+          cols="12"
+          lg="6"
+        >
+          <b-form-group
+            :label="$t('collapsibleRecord.otherFields.position.label')"
+            label-class="text-primary"
+          >
+            <c-input-select
+              v-model="options.otherFieldsPosition"
+              :options="positionOptions"
+              :reduce="option => option.value"
+            />
+          </b-form-group>
+        </b-col>
+
+        <!-- Horizontal Field Layout -->
+        <b-col
+          cols="12"
+          lg="6"
+        >
+          <b-form-group
+            :label="$t('record.horizontalFormLayout')"
+            label-class="text-primary"
+          >
+            <c-input-checkbox
+              v-model="options.horizontalFieldLayoutEnabled"
+              switch
+              :disabled="options.recordFieldLayoutOption === 'noWrap'"
+              :labels="checkboxLabel"
+            />
+          </b-form-group>
+        </b-col>
+
+        <!-- Fields Layout Mode -->
+        <b-col
+          cols="12"
+          lg="6"
+        >
+          <b-form-group
+            :label="$t('record.fieldsLayoutMode.label')"
+            label-class="text-primary"
+          >
+            <c-input-select
+              v-model="options.recordFieldLayoutOption"
+              :options="fieldsLayoutOptions"
+              :reduce="option => option.value"
+              @input="handleFieldsLayout"
+            />
+          </b-form-group>
+        </b-col>
+      </b-row>
+
+      <!-- Field Picker -->
+      <b-row class="mt-3">
+        <b-col cols="12">
+          <field-picker
+            :module="recordListModule"
+            :fields.sync="options.fields"
+            :exclude-fields="[options.bodyField]"
+            style="height: 40vh;"
+          />
+        </b-col>
+      </b-row>
+    </div>
+
+    <hr>
+
+    <div
+      class="px-3 pt-3"
+    >
+      <h5 class="mb-3">
+        {{ $t('recordList.record.generalLabel') }}
+      </h5>
+
+      <b-row>
+        <b-col
+          cols="12"
+          lg="6"
+        >
+          <b-form-group
+            :label="$t('general.module')"
+            variant="primary"
+            label-class="text-primary"
+          >
+            <c-input-select
+              v-model="options.moduleID"
+              :options="modules"
+              label="name"
+              :reduce="o => o.moduleID"
+              :placeholder="$t('recordList.modulePlaceholder')"
+              default-value="0"
+              required
+            />
+          </b-form-group>
+        </b-col>
+
+        <b-col
+          v-if="onRecordPage"
+          cols="12"
+          lg="6"
+        >
+          <b-form-group
+            :label="$t('recordList.refField.label')"
+            label-class="text-primary"
+          >
+            <c-input-select
+              v-model="options.refField"
+              :options="parentFields"
+              :placeholder="$t('general.label.none')"
+              :reduce="f => f.name"
+            />
+
+            <b-form-text class="text-secondary small">
+              {{ $t('recordList.refField.footnote') }}
+            </b-form-text>
+          </b-form-group>
+        </b-col>
+
+        <b-col
+          cols="12"
+          lg="6"
+        >
+          <b-form-group
+            :label="$t('collapsibleRecord.recordDisplayOption.label')"
+            label-class="text-primary"
+          >
+            <c-input-select
+              v-model="options.recordDisplayOption"
+              :options="recordDisplayOptions"
+              :reduce="option => option.value"
+            />
+          </b-form-group>
+        </b-col>
+      </b-row>
+    </div>
+
+    <template v-if="recordListModule">
+      <hr>
+
+      <div class="px-3">
+        <h5 class="mb-3">
+          {{ $t('recordList.record.prefilterLabel') }}
+        </h5>
+
+        <b-row>
+          <b-col
+            cols="12"
+            lg="6"
+          >
+            <b-form-group
+              :label="$t('recordList.record.prefilterHideSearch')"
+              label-class="text-primary"
+            >
+              <c-input-checkbox
+                v-model="options.hideSearch"
+                switch
+                invert
+                :labels="checkboxLabel"
+              />
+            </b-form-group>
+          </b-col>
+
+          <b-col
+            cols="12"
+            lg="6"
+          >
+            <b-form-group
+              :label="$t('recordList.record.filterHide')"
+              label-class="text-primary"
+            >
+              <c-input-checkbox
+                v-model="options.hideFiltering"
+                switch
+                invert
+                :labels="checkboxLabel"
+              />
+            </b-form-group>
+          </b-col>
+
+          <b-col
+            v-if="!options.hideSearch"
+            lg="6"
+            cols="12"
+          >
+            <b-form-group
+              :label="$t('recordList.record.searchableFields')"
+              label-class="text-primary"
+            >
+              <column-picker
+                size="sm"
+                variant="light"
+                :module="recordListModule"
+                :fields="options.searchableFields"
+                :field-subset="queryableFields"
+                @updateFields="onUpdateSearchableFields"
+              >
+                {{ $t('recordList.record.configureSearchableFields') }}
+              </column-picker>
+
+              <b-form-text class="text-secondary small">
+                {{ $t('recordList.record.searchableFieldsFootnote') }}
+              </b-form-text>
+            </b-form-group>
+          </b-col>
+        </b-row>
+
+        <prefilter
+          :record="record"
+          :module="recordListModule"
+          :namespace="namespace"
+          :options="options"
+          :page="page"
+        />
+      </div>
+
+      <hr>
+
+      <div
+        class="px-3"
+      >
+        <h5 class="mb-3">
+          {{ $t('recordList.record.presortLabel') }}
+        </h5>
+
+        <b-row>
+          <b-col>
+            <b-form-group
+              :label="$t('recordList.record.presortHideSort')"
+              label-class="text-primary"
+            >
+              <c-input-checkbox
+                v-model="options.hideSorting"
+                switch
+                invert
+                :labels="checkboxLabel"
+              />
+            </b-form-group>
+          </b-col>
+        </b-row>
+
+        <b-row>
+          <b-col>
+            <c-input-presort
+              v-model="options.presort"
+              :fields="recordListModuleFields"
+              :labels="{
+                ascending: $t('general:label.ascending'),
+                descending: $t('general:label.descending'),
+                none: $t('general:label.none'),
+                placeholder: $t('recordList.record.presortPlaceholder'),
+                footnote: $t('recordList.record.presortFootnote'),
+                toggleInput: $t('recordList.record.presortToggleInput'),
+                addButton: $t('general:label.add'),
+                title: $t('recordList.record.presortInputLabel')
+              }"
+              allow-text-input
+            />
+          </b-col>
+        </b-row>
+      </div>
+
+      <hr>
+
+      <div class="px-3">
+        <h5 class="mb-3">
+          {{ $t('recordList.record.pagingLabel') }}
+        </h5>
+
+        <b-row>
+          <b-col
+            cols="12"
+            lg="6"
+          >
+            <b-form-group
+              :label="$t('recordList.record.hidePaging')"
+              label-class="text-primary"
+            >
+              <c-input-checkbox
+                v-model="options.hidePaging"
+                switch
+                invert
+                :labels="checkboxLabel"
+              />
+            </b-form-group>
+          </b-col>
+
+          <b-col
+            cols="12"
+            lg="6"
+          >
+            <b-form-group
+              label-class="d-flex align-items-center text-primary p-0"
+            >
+              <template #label>
+                {{ $t('recordList.record.fullPageNavigation') }}
+                <c-hint
+                  :tooltip="$t('recordList.tooltip.performance.impact')"
+                  icon-class="text-warning"
+                />
+              </template>
+
+              <c-input-checkbox
+                v-model="options.fullPageNavigation"
+                switch
+                :labels="checkboxLabel"
+              />
+            </b-form-group>
+          </b-col>
+
+          <b-col
+            cols="12"
+            lg="6"
+          >
+            <b-form-group
+              horizontal
+              breakpoint="md"
+              label-class="d-flex align-items-center text-primary"
+            >
+              <template #label>
+                {{ $t('recordList.record.perPage') }}
+                <c-hint
+                  :tooltip="$t('recordList.tooltip.performance.perPage')"
+                  icon-class="text-warning"
+                />
+              </template>
+
+              <b-form-input
+                v-model.number="options.perPage"
+                type="number"
+                class="mb-2"
+              />
+            </b-form-group>
+          </b-col>
+
+          <b-col
+            cols="12"
+            lg="6"
+          >
+            <b-form-group
+              :label="$t('recordList.record.showRecordPerPageOption')"
+              label-class="text-primary"
+            >
+              <c-input-checkbox
+                v-model="options.showRecordPerPageOption"
+                switch
+                :labels="checkboxLabel"
+              />
+            </b-form-group>
+          </b-col>
+
+          <b-col
+            cols="12"
+            lg="6"
+          >
+            <b-form-group
+              :label="$t('recordList.record.showTotalCount')"
+              label-class="text-primary"
+            >
+              <c-input-checkbox
+                v-model="options.showTotalCount"
+                switch
+                :labels="checkboxLabel"
+              />
+            </b-form-group>
+          </b-col>
+        </b-row>
+      </div>
+    </template>
+
+    <hr>
+
+    <div class="px-3">
+      <h5 class="d-flex align-items-center mb-2">
+        {{ $t('record.fieldConditions.label') }}
+
+        <c-hint
+          :tooltip="$t('record.fieldConditions.tooltip.performance')"
+          icon-class="text-warning"
+        />
+
+        <b-button
+          variant="link"
+          :href="visibilityDocumentationURL"
+          target="_blank"
+          class="p-0 ml-auto"
+        >
+          {{ $t('general:label.examples') }}
+        </b-button>
+      </h5>
+
+      <b-row class="mt-3">
+        <b-col cols="12">
+          <b-form-group
+            :label="$t('record.fieldConditions.clearAllOnHide')"
+            :description="$t('record.fieldConditions.clearAllOnHideDescription')"
+            label-class="text-primary"
+          >
+            <c-input-checkbox
+              v-model="options.clearConditionalFieldsOnHide"
+              switch
+              :labels="checkboxLabel"
+            />
+          </b-form-group>
+        </b-col>
+      </b-row>
+
+      <c-form-table-wrapper
+        :labels="{
+          addButton: $t('general:label.add')
+        }"
+        class="my-3"
+        @add-item="addRule"
+      >
+        <b-table-simple
+          v-if="block.options.fieldConditions.length > 0"
+          borderless
+          small
+          responsive
+        >
+          <b-thead>
+            <b-tr>
+              <b-th
+                class="text-primary"
+              >
+                {{ $t('record.fieldConditions.field') }}
+              </b-th>
+              <b-th
+                class="text-primary"
+              >
+                {{ $t('record.fieldConditions.condition') }}
+              </b-th>
+              <b-th
+                class="text-center"
+                style="width: 150px;"
+              >
+                <div class="d-flex align-items-center justify-content-center">
+                  {{ $t('record.fieldConditions.clearOnHide') }}
+                  <c-hint
+                    :tooltip="$t('record.fieldConditions.clearOnHideTooltip')"
+                    class="ml-1"
+                  />
+                </div>
+              </b-th>
+              <b-th />
+            </b-tr>
+          </b-thead>
+
+          <b-tbody>
+            <b-tr
+              v-for="(condition, i) in block.options.fieldConditions"
+              :key="i"
+            >
+              <b-td style="width: 33%; min-width: 250px;">
+                <c-input-select
+                  v-model="condition.field"
+                  :options="block.options.fields"
+                  :placeholder="$t('record.fieldConditions.selectPlaceholder')"
+                  :selectable="option => isSelectable(option)"
+                  :get-option-label="getOptionLabel"
+                  :get-option-key="getOptionKey"
+                  :reduce="option => option.isSystem ? option.name : option.fieldID"
+                />
+              </b-td>
+
+              <b-td
+                class="align-middle"
+                style="min-width: 300px;"
+              >
+                <b-input-group>
+                  <b-input-group-prepend>
+                    <b-input-group-text variant="extra-light">
+                      ƒ
+                    </b-input-group-text>
+                  </b-input-group-prepend>
+
+                  <c-input-expression
+                    v-model="condition.condition"
+                    auto-complete
+                    :placeholder="$t('record.fieldConditions.placeholder')"
+                    :suggestion-params="visibilityAutoCompleteParams"
+                    class="flex-grow-1"
+                  />
+                </b-input-group>
+              </b-td>
+
+              <b-td style="width: 20px;">
+                <div class="d-flex align-items-center justify-content-center">
+                  <c-input-checkbox
+                    v-model="condition.clearOnHide"
+                    switch
+                  />
+                </div>
+              </b-td>
+
+              <b-td
+                class="text-right"
+                style="width: 4rem;"
+              >
+                <c-input-confirm
+                  show-icon
+                  @confirmed="deleteRule(i)"
+                />
+              </b-td>
+            </b-tr>
+          </b-tbody>
+        </b-table-simple>
+      </c-form-table-wrapper>
+
+      <i18next
+        path="general.visibility.condition.description.record-page"
+        tag="small"
+        class="text-muted"
+      >
+        <code>record.values.fieldName</code>
+        <code>user.(userID/email...)</code>
+        <code>user.userID == record.createdBy</code>
+        <code>record.values.fieldName == "value"</code>
+        <code>record.ownedBy == user.userID</code>
+        <code>screen.width &lt; 1024</code>
+      </i18next>
+    </div>
+  </b-tab>
+</template>
+
+<script>
+import base from './base'
+import FieldPicker from 'corteza-webapp-compose/src/components/Common/FieldPicker'
+import ColumnPicker from 'corteza-webapp-compose/src/components/Admin/Module/Records/ColumnPicker'
+import { NoID } from '@cortezaproject/corteza-js'
+import autocomplete from 'corteza-webapp-compose/src/mixins/autocomplete.js'
+import { components } from '@cortezaproject/corteza-vue'
+import { mapGetters } from 'vuex'
+import Prefilter from './RecordList/Prefilter.vue'
+
+const { CInputExpression, CInputPresort, CInputCheckbox } = components
+
+export default {
+  i18nOptions: {
+    namespaces: 'block',
+  },
+
+  name: 'CollapsibleRecordList',
+
+  components: {
+    FieldPicker,
+    ColumnPicker,
+    CInputExpression,
+    CInputPresort,
+    CInputCheckbox,
+    Prefilter,
+  },
+
+  extends: base,
+
+  mixins: [autocomplete],
+
+  data () {
+    return {
+      checkboxLabel: {
+        on: this.$t('general:label.yes'),
+        off: this.$t('general:label.no'),
+      },
+    }
+  },
+
+  computed: {
+    ...mapGetters({
+      getModuleByID: 'module/getByID',
+      modules: 'module/set',
+      pages: 'page/set',
+    }),
+
+    recordListModule () {
+      if (this.options.moduleID && this.options.moduleID !== NoID) {
+        return this.getModuleByID(this.options.moduleID)
+      } else {
+        return undefined
+      }
+    },
+
+    onRecordPage () {
+      return this.page && this.page.moduleID !== NoID
+    },
+
+    parentFields () {
+      if (this.recordListModule && this.record) {
+        return this.recordListModule.fields.filter(({ kind, options }) => {
+          if (kind === 'Record') {
+            return options.moduleID === this.record.moduleID
+          }
+          return false
+        })
+      }
+      return []
+    },
+
+    recordListModuleFields () {
+      if (this.recordListModule) {
+        return [
+          ...this.recordListModule.fields,
+          ...this.recordListModule.systemFields().map(sf => {
+            return {
+              label: this.$t(`field:system.${sf.name}`),
+              name: sf.name === 'recordID' ? 'ID' : sf.name,
+            }
+          }),
+        ].map(({ name, label }) => ({ name, label }))
+      }
+      return []
+    },
+    visibilityDocumentationURL () {
+      // eslint-disable-next-line no-undef
+      const [year, month] = VERSION.split('.')
+      return `https://docs.cortezaproject.org/corteza-docs/${year}.${month}/integrator-guide/compose-configuration/page-layouts.html#visibility-condition`
+    },
+
+    recordDisplayOptions () {
+      return [
+        { value: 'modal', label: this.$t('record.openInModal') },
+        { value: 'sameTab', label: this.$t('record.openInSameTab') },
+        { value: 'newTab', label: this.$t('record.openInNewTab') },
+      ]
+    },
+
+    positionOptions () {
+      return [
+        { value: 'default', label: this.$t('collapsibleRecord.otherFields.position.default') },
+        { value: 'above', label: this.$t('collapsibleRecord.otherFields.position.above') },
+        { value: 'below', label: this.$t('collapsibleRecord.otherFields.position.below') },
+      ]
+    },
+
+    fieldsLayoutOptions () {
+      return [
+        { value: 'default', label: this.$t('record.fieldsLayoutMode.default') },
+        { value: 'noWrap', label: this.$t('record.fieldsLayoutMode.noWrap') },
+        { value: 'wrap', label: this.$t('record.fieldsLayoutMode.wrap') },
+      ]
+    },
+
+    bodyFieldOptions () {
+      if (!this.recordListModule) {
+        return []
+      }
+      return this.recordListModule.fields
+    },
+
+    queryableFields () {
+      if (!this.recordListModule) {
+        return []
+      }
+
+      return [
+        ...this.recordListModule.fields,
+        ...this.recordListModule.systemFields(),
+      ].filter(f => f.isQueryable)
+    },
+
+    expressionParams () {
+      return [
+        { label: 'record.values.fieldName', text: 'record.values.fieldName' },
+        { label: 'user.userID', text: 'user.userID' },
+        { label: 'record.createdBy', text: 'record.createdBy' },
+        { label: 'record.ownedBy', text: 'record.ownedBy' },
+      ]
+    },
+
+    sortParams () {
+      return [
+        { label: 'fieldName ASC', text: 'fieldName ASC' },
+        { label: 'fieldName DESC', text: 'fieldName DESC' },
+        { label: 'createdAt ASC', text: 'createdAt ASC' },
+        { label: 'createdAt DESC', text: 'createdAt DESC' },
+        { label: 'updatedAt ASC', text: 'updatedAt ASC' },
+        { label: 'updatedAt DESC', text: 'updatedAt DESC' },
+      ]
+    },
+
+    visibilityAutoCompleteParams () {
+      return [
+        { label: 'record.values.fieldName', text: 'record.values.fieldName' },
+        { label: 'user.userID', text: 'user.userID' },
+        { label: 'user.email', text: 'user.email' },
+        { label: 'record.createdBy', text: 'record.createdBy' },
+        { label: 'record.ownedBy', text: 'record.ownedBy' },
+        { label: 'recordID', text: 'recordID' },
+        { label: 'ownerID', text: 'ownerID' },
+        { label: 'userID', text: 'userID' },
+      ]
+    },
+  },
+
+  methods: {
+    getFieldLabel ({ name, label }) {
+      return label || name
+    },
+
+    getOptionKey ({ fieldID, name }) {
+      return fieldID !== NoID ? fieldID : name
+    },
+
+    handleFieldsLayout (v) {
+      if (v !== 'noWrap') return
+
+      this.block.options.horizontalFieldLayoutEnabled = false
+    },
+
+    addRule () {
+      this.options.fieldConditions.push({
+        field: undefined,
+        condition: '',
+        clearOnHide: false,
+      })
+    },
+
+    deleteRule (i) {
+      this.options.fieldConditions.splice(i, 1)
+    },
+
+    isSelectable (option) {
+      return !this.block.options.fieldConditions.find(({ field }) => field === option.fieldID || field === option.name) && !option.isRequired
+    },
+
+    getOptionLabel (option) {
+      return option.label || option.name
+    },
+
+    onUpdateSearchableFields (fields = []) {
+      this.options.searchableFields = fields.map(f => f.fieldID && f.fieldID !== NoID ? f.fieldID : f.name).filter(f => !!f)
+    },
+  },
+}
+</script>
diff --git a/client/web/compose/src/components/PageBlocks/index.js b/client/web/compose/src/components/PageBlocks/index.js
index 3824bc4235..6ec15b7ba6 100644
--- a/client/web/compose/src/components/PageBlocks/index.js
+++ b/client/web/compose/src/components/PageBlocks/index.js
@@ -11,6 +11,11 @@ import CommentBase from './Comment/Base'
 import CommentConfigurator from './Comment/Configurator'
 import ContentBase from './ContentBase'
 import ContentConfigurator from './ContentConfigurator'
+import CollapsibleRecordBase from './CollapsibleRecordBase'
+import CollapsibleRecordConfigurator from './CollapsibleRecordConfigurator'
+import CollapsibleRecordEditor from './CollapsibleRecordEditor'
+import CollapsibleRecordListBase from './CollapsibleRecordListBase'
+import CollapsibleRecordListConfigurator from './CollapsibleRecordListConfigurator'
 import FileBase from './FileBase'
 import FileConfigurator from './FileConfigurator'
 import GeometryBase from './GeometryBase'
@@ -73,6 +78,11 @@ const Registry = {
   MetricConfigurator,
   CommentBase,
   CommentConfigurator,
+  CollapsibleRecordBase,
+  CollapsibleRecordConfigurator,
+  CollapsibleRecordEditor,
+  CollapsibleRecordListBase,
+  CollapsibleRecordListConfigurator,
   ProgressBase,
   ProgressConfigurator,
   GeometryBase,
diff --git a/client/web/compose/src/components/Public/Page/Grid.vue b/client/web/compose/src/components/Public/Page/Grid.vue
index 3f245e5195..8af6a5002e 100644
--- a/client/web/compose/src/components/Public/Page/Grid.vue
+++ b/client/web/compose/src/components/Public/Page/Grid.vue
@@ -4,7 +4,7 @@
     :editable="false"
   >
     <template
-      slot-scope="{ blockIndex, block }"
+      slot-scope="{ blockIndex, block, onBlockHeightChange }"
     >
       <page-block
         v-bind="{ ...$attrs }"
@@ -13,6 +13,7 @@
         :block="block"
         :block-index="blockIndex"
         :loading-record="loadingRecord"
+        :on-block-height-change="onBlockHeightChange"
         class="p-2"
         v-on="$listeners"
       />
diff --git a/client/web/compose/src/mixins/alignment.js b/client/web/compose/src/mixins/alignment.js
new file mode 100644
index 0000000000..cc15e886d5
--- /dev/null
+++ b/client/web/compose/src/mixins/alignment.js
@@ -0,0 +1,92 @@
+// vue mixin for alignment expression parsing
+import { NoID } from '@cortezaproject/corteza-js'
+import { evaluatePrefilter } from 'corteza-webapp-compose/src/lib/record-filter'
+
+export default {
+  methods: {
+    /**
+     * Parse alignment expression and return structured data
+     * Supports: L[...] for left, C[...] for center, R[...] for right
+     */
+    parseAlignmentExpression (expression, record) {
+      if (!expression) {
+        return { hasValidMarkers: false, left: '', center: '', right: '' }
+      }
+
+      const ctx = {
+        record: record || {},
+        user: this.$auth.user || {},
+        recordID: (record || {}).recordID || NoID,
+        ownerID: (record || {}).ownedBy || NoID,
+        userID: (this.$auth.user || {}).userID || NoID,
+      }
+
+      // Find all markers
+      const leftMatch = expression.match(/^L\[([^\]]*)\]/)
+      const centerMatch = expression.match(/C\[([^\]]*)\]/)
+      const rightMatch = expression.match(/R\[([^\]]*)\]/)
+
+      // Check if there are ANY markers
+      const hasAnyMarkers = leftMatch || centerMatch || rightMatch
+      if (!hasAnyMarkers) {
+        return { hasValidMarkers: false, left: '', center: '', right: '' }
+      }
+
+      // Check for duplicate markers
+      const allMatches = expression.match(/([LCR])\[/g) || []
+      const uniqueMarkers = [...new Set(allMatches)]
+      if (allMatches.length !== uniqueMarkers.length) {
+        return { hasValidMarkers: false, left: '', center: '', right: '' }
+      }
+
+      // Validate order: L must come before C, C must come before R
+      const lIndex = expression.indexOf('L[')
+      const cIndex = expression.indexOf('C[')
+      const rIndex = expression.indexOf('R[')
+
+      const hasL = lIndex !== -1
+      const hasC = cIndex !== -1
+      const hasR = rIndex !== -1
+
+      if (hasL && hasC && lIndex > cIndex) return { hasValidMarkers: false, left: '', center: '', right: '' }
+      if (hasC && hasR && cIndex > rIndex) return { hasValidMarkers: false, left: '', center: '', right: '' }
+      if (hasL && hasR && lIndex > rIndex) return { hasValidMarkers: false, left: '', center: '', right: '' }
+
+      // Extract and evaluate content
+      let left = ''
+      let center = ''
+      let right = ''
+
+      if (leftMatch) {
+        try {
+          left = evaluatePrefilter(leftMatch[1], ctx) || ''
+        } catch (e) {
+          left = leftMatch[1]
+        }
+      }
+
+      if (centerMatch) {
+        try {
+          center = evaluatePrefilter(centerMatch[1], ctx) || ''
+        } catch (e) {
+          center = centerMatch[1]
+        }
+      }
+
+      if (rightMatch) {
+        try {
+          right = evaluatePrefilter(rightMatch[1], ctx) || ''
+        } catch (e) {
+          right = rightMatch[1]
+        }
+      }
+
+      return {
+        hasValidMarkers: true,
+        left,
+        center,
+        right,
+      }
+    },
+  },
+}
diff --git a/lib/js/src/compose/types/page-block/collapsible-record-list.ts b/lib/js/src/compose/types/page-block/collapsible-record-list.ts
new file mode 100644
index 0000000000..0382e8d283
--- /dev/null
+++ b/lib/js/src/compose/types/page-block/collapsible-record-list.ts
@@ -0,0 +1,211 @@
+import { PageBlock, PageBlockInput, Registry } from './base'
+import { Apply, CortezaID, NoID } from '../../../cast'
+import { Compose as ComposeAPI } from '../../../api-clients'
+import { Module } from '../module'
+
+const kind = 'CollapsibleRecordList'
+
+interface FieldCondition {
+  field: string
+  condition: string
+  clearOnHide?: boolean
+}
+
+interface Options {
+  // Module and basic list configuration
+  moduleID: string
+  prefilter: string
+  presort: string
+  perPage: number
+  refField?: string
+
+  // Header section - title
+  titleExpression: string
+  titleAlignment: 'left' | 'center' | 'right'
+
+  // Header section - subtitle
+  subtitleExpression: string
+  subtitleAlignment: 'left' | 'center' | 'right'
+  subtitleShowWhenCollapsed: boolean
+
+  // Body section - full-width field
+  bodyField: string
+
+  // Other fields section
+  fields: unknown[]
+  fieldConditions: FieldCondition[]
+  clearConditionalFieldsOnHide: boolean
+  otherFieldsPosition: 'above' | 'below' | 'default'
+  horizontalFieldLayoutEnabled: boolean
+  recordFieldLayoutOption: string
+  searchableFields: string[]
+
+  // Collapse state per record (stored locally)
+  defaultCollapsed: boolean
+
+  // Display options
+  hideHeader: boolean
+  hidePaging: boolean
+  hideSorting: boolean
+  hideSearch: boolean
+  hideFiltering: boolean
+
+  // Navigation
+  enableRecordPageNavigation: boolean
+  fullPageNavigation: boolean
+  showRecordPerPageOption: boolean
+
+  // Actions
+  hideRecordViewButton: boolean
+  hideRecordEditButton: boolean
+  hideRecordDeleteButton: boolean
+
+  // Record display
+  recordDisplayOption: string
+
+  // Show total count
+  showTotalCount: boolean
+}
+
+const defaults: Readonly<Options> = Object.freeze({
+  // Module and basic list configuration
+  moduleID: NoID,
+  prefilter: '',
+  presort: 'createdAt DESC',
+  perPage: 10,
+  refField: undefined,
+
+  // Header section - title
+  titleExpression: '',
+  titleAlignment: 'left',
+
+  // Header section - subtitle
+  subtitleExpression: '',
+  subtitleAlignment: 'left',
+  subtitleShowWhenCollapsed: false,
+
+  // Body section
+  bodyField: '',
+
+  // Other fields section
+  fields: [],
+  fieldConditions: [],
+  clearConditionalFieldsOnHide: false,
+  otherFieldsPosition: 'default',
+  horizontalFieldLayoutEnabled: false,
+  recordFieldLayoutOption: 'default',
+  searchableFields: [],
+
+  // Collapse state
+  defaultCollapsed: false,
+
+  // Display options
+  hideHeader: false,
+  hidePaging: false,
+  hideSorting: false,
+  hideSearch: false,
+  hideFiltering: false,
+
+  // Navigation
+  enableRecordPageNavigation: true,
+  fullPageNavigation: false,
+  showRecordPerPageOption: false,
+
+  // Actions
+  hideRecordViewButton: false,
+  hideRecordEditButton: false,
+  hideRecordDeleteButton: false,
+
+  // Record display
+  recordDisplayOption: 'modal',
+
+  // Show total count
+  showTotalCount: true,
+})
+
+export class PageBlockCollapsibleRecordList extends PageBlock {
+  readonly kind = kind
+
+  options: Options = { ...defaults }
+
+  constructor (i?: PageBlockInput) {
+    super(i)
+    this.applyOptions(i?.options as Partial<Options>)
+  }
+
+  applyOptions (o?: Partial<Options>): void {
+    if (!o) return
+
+    Apply(this.options, o, CortezaID, 'moduleID')
+
+    Apply(this.options, o, String,
+      'titleExpression',
+      'titleAlignment',
+      'subtitleExpression',
+      'subtitleAlignment',
+      'bodyField',
+      'otherFieldsPosition',
+      'recordFieldLayoutOption',
+      'prefilter',
+      'presort',
+      'refField',
+      'recordDisplayOption',
+    )
+
+    Apply(this.options, o, Number, 'perPage')
+
+    Apply(this.options, o, Boolean,
+      'subtitleShowWhenCollapsed',
+      'horizontalFieldLayoutEnabled',
+      'clearConditionalFieldsOnHide',
+      'defaultCollapsed',
+      'hideHeader',
+      'hidePaging',
+      'hideSorting',
+      'hideSearch',
+      'hideFiltering',
+      'enableRecordPageNavigation',
+      'fullPageNavigation',
+      'showRecordPerPageOption',
+      'hideRecordViewButton',
+      'hideRecordEditButton',
+      'hideRecordDeleteButton',
+      'showTotalCount',
+    )
+
+    if (o.fields) {
+      this.options.fields = o.fields
+    }
+
+    if (o.fieldConditions) {
+      this.options.fieldConditions = o.fieldConditions
+    }
+
+    if (o.searchableFields) {
+      this.options.searchableFields = o.searchableFields
+    }
+  }
+
+  async fetch (api: ComposeAPI, recordListModule: Module, filter: {[_: string]: unknown}): Promise<object> {
+    if (recordListModule.moduleID !== this.options.moduleID) {
+      throw Error('Module incompatible, module mismatch')
+    }
+
+    filter.moduleID = this.options.moduleID
+    filter.namespaceID = recordListModule.namespaceID
+    filter.sort = this.options.presort
+
+    if (this.options.prefilter) {
+      filter.filter = this.options.prefilter
+    }
+
+    return api
+      .recordList(filter)
+      .then(r => {
+        const { set: records, filter } = r as { filter: object; set: object[] }
+        return { records, filter }
+      })
+  }
+}
+
+Registry.set(kind, PageBlockCollapsibleRecordList)
diff --git a/lib/js/src/compose/types/page-block/collapsible-record.ts b/lib/js/src/compose/types/page-block/collapsible-record.ts
new file mode 100644
index 0000000000..b2ee55125d
--- /dev/null
+++ b/lib/js/src/compose/types/page-block/collapsible-record.ts
@@ -0,0 +1,85 @@
+import { PageBlock, PageBlockInput, Registry } from './base'
+import { Apply } from '../../../cast'
+
+const kind = 'CollapsibleRecord'
+
+interface FieldCondition {
+  field: string
+  condition: string
+  clearOnHide?: boolean
+}
+
+interface Options {
+  // Header section - title
+  titleExpression: string
+  titleAlignment: 'left' | 'center' | 'right'
+
+  // Header section - subtitle
+  subtitleExpression: string
+  subtitleAlignment: 'left' | 'center' | 'right'
+  subtitleShowWhenCollapsed: boolean
+
+  // Body section - full-width field
+  bodyField: string
+
+  // Inline editing
+  inlineRecordEditEnabled: boolean
+  inlineRecordEditAllowAddField: boolean
+
+  // Other fields section
+  fields: unknown[]
+  fieldConditions: FieldCondition[]
+  clearConditionalFieldsOnHide: boolean
+  otherFieldsPosition: 'above' | 'below' | 'default'
+  horizontalFieldLayoutEnabled: boolean
+  recordFieldLayoutOption: string
+
+  // Collapse state
+  defaultCollapsed: boolean
+}
+
+const defaults: Readonly<Options> = Object.freeze({
+  titleExpression: '',
+  titleAlignment: 'left',
+  subtitleExpression: '',
+  subtitleAlignment: 'left',
+  subtitleShowWhenCollapsed: false,
+  bodyField: '',
+  inlineRecordEditEnabled: false,
+  inlineRecordEditAllowAddField: false,
+  fields: [],
+  fieldConditions: [],
+  clearConditionalFieldsOnHide: false,
+  otherFieldsPosition: 'default',
+  horizontalFieldLayoutEnabled: false,
+  recordFieldLayoutOption: 'default',
+  defaultCollapsed: false,
+})
+
+export class PageBlockCollapsibleRecord extends PageBlock {
+  readonly kind = kind
+
+  options: Options = { ...defaults }
+
+  constructor (i?: PageBlockInput) {
+    super(i)
+    this.applyOptions(i?.options as Partial<Options>)
+  }
+
+  applyOptions (o?: Partial<Options>): void {
+    if (!o) return
+
+    Apply(this.options, o, String, 'titleExpression', 'titleAlignment', 'subtitleExpression', 'subtitleAlignment', 'bodyField', 'otherFieldsPosition', 'recordFieldLayoutOption')
+    Apply(this.options, o, Boolean, 'subtitleShowWhenCollapsed', 'inlineRecordEditEnabled', 'inlineRecordEditAllowAddField', 'horizontalFieldLayoutEnabled', 'clearConditionalFieldsOnHide', 'defaultCollapsed')
+
+    if (o.fields) {
+      this.options.fields = o.fields
+    }
+
+    if (o.fieldConditions) {
+      this.options.fieldConditions = o.fieldConditions
+    }
+  }
+}
+
+Registry.set(kind, PageBlockCollapsibleRecord)
diff --git a/lib/js/src/compose/types/page-block/index.ts b/lib/js/src/compose/types/page-block/index.ts
index 02e4d0cf4b..9e897bfe2c 100644
--- a/lib/js/src/compose/types/page-block/index.ts
+++ b/lib/js/src/compose/types/page-block/index.ts
@@ -17,6 +17,8 @@ export { PageBlockProgress } from './progress'
 export { PageBlockNavigation } from './navigation'
 export { PageBlockTab } from './tabs'
 export { PageBlockGeometry } from './geometry'
+export { PageBlockCollapsibleRecord } from './collapsible-record'
+export { PageBlockCollapsibleRecordList } from './collapsible-record-list'
 
 export function PageBlockMaker<T extends PageBlock> (i: { kind: string }): T {
   const PageBlockTemp = Registry.get(i.kind)
diff --git a/locale/en/corteza-webapp-compose/block.yaml b/locale/en/corteza-webapp-compose/block.yaml
index b0ef99d75f..5daaf4cf18 100644
--- a/locale/en/corteza-webapp-compose/block.yaml
+++ b/locale/en/corteza-webapp-compose/block.yaml
@@ -819,6 +819,40 @@ comment:
     frequentlyUsed: Frequently Used
     noResults: No emojis found
     quickReactions: Quick Reactions
+collapsibleRecord:
+  label: Collapsible
+  headerSection:
+    label: Header  
+    titleSection:
+      label: Title
+      placeholder: Enter title expression
+    subtitleSection:
+      label: Subtitle
+      placeholder: Enter subtitle expression
+      showWhenCollapsed: Hide subtitle when minimized    
+    expressionHelp: 'L[], C[], R[] to adjust alignment. i.e. L[${record.values.title}] C[example text] R[${record.values.status} ${record.values.date}]'
+  bodySection:
+    label: Body
+    bodyField: 
+      label: Body field
+      placeholder: Select a field for body content
+      description: Field to display as body content (rich text, long text, etc.)
+      inlineEditEnabled: Enable inline editing
+  otherFields:
+    horizontalFieldLayoutEnabled: Horizontal form layout
+    label: Other Fields
+    position:
+      label: Other fields position
+      default: Default
+      above: Above body
+      below: Below body
+  collapseSection:
+    label: Collapse Options
+    defaultCollapsed: Collapsed by default
+  recordDisplayOption:
+    label: Record open mode
+collapsibleRecordList:
+  label: Collapsible List
 navigation:
   chart: Charts
   colorPicker: Choose a color
diff --git a/locale/en/corteza-webapp-compose/general.yaml b/locale/en/corteza-webapp-compose/general.yaml
index 8ad6ed5ffe..31344b966d 100644
--- a/locale/en/corteza-webapp-compose/general.yaml
+++ b/locale/en/corteza-webapp-compose/general.yaml
@@ -102,6 +102,9 @@ label:
   urlPlaceholder: https://example.tld
   validation: Validation
   view: View
+  open: Open
+  expand: Expand
+  collapse: Collapse
   yes: Yes
   chart:
     single: Chart