diff --git a/apps/backend/activity/activity.controller.js b/apps/backend/activity/activity.controller.js
index 400e6a996..f74ccc99f 100644
--- a/apps/backend/activity/activity.controller.js
+++ b/apps/backend/activity/activity.controller.js
@@ -19,7 +19,7 @@ const { getOutlineLevels, isOutlineActivity } = schema;
 const logger = createLogger('activity:controller');
 const log = (msg) => logger.info(msg.replace(/\n/g, ' '));
 
-function list({ repository, query, opts }, res) {
+async function list({ repository, query, opts }, res) {
   if (!query.detached) opts.where.detached = false;
   if (query.outlineOnly) {
     // Include deleted if published and deletion is not published yet
@@ -35,7 +35,9 @@ function list({ repository, query, opts }, res) {
       },
     ];
   }
-  return repository.getActivities(opts).then((data) => res.json({ data }));
+  const activities = await repository.getActivities(opts);
+  await Promise.all(activities.map((it) => it.processEmbeddedElements()));
+  return res.json({ data: activities });
 }
 
 function create({ user, repository, body }, res) {
diff --git a/apps/backend/activity/activity.model.js b/apps/backend/activity/activity.model.js
index 33155ec7f..ea4b04eec 100644
--- a/apps/backend/activity/activity.model.js
+++ b/apps/backend/activity/activity.model.js
@@ -1,12 +1,15 @@
 import { Model, Op } from 'sequelize';
 import { schema, workflow } from '@tailor-cms/config';
 import { Activity as Events } from '@tailor-cms/common/src/sse.js';
+import { ContentContainerType } from '@tailor-cms/content-container-collection/types.js';
+import calculatePosition from '#shared/util/calculatePosition.js';
+import contentElementHooks from '../content-element/hooks.js';
+import hooks from './hooks.js';
 import isEmpty from 'lodash/isEmpty.js';
 import map from 'lodash/map.js';
 import pick from 'lodash/pick.js';
 import Promise from 'bluebird';
-import hooks from './hooks.js';
-import calculatePosition from '#shared/util/calculatePosition.js';
+
 import {
   detectMissingReferences,
   removeReference,
@@ -469,6 +472,16 @@ class Activity extends Model {
     });
   }
 
+  async processEmbeddedElements() {
+    if (this.type !== ContentContainerType.CollectionItemContent)
+      return Promise.resolve(this);
+    for (const key of Object.keys(this.data)) {
+      if (!this.data?.[key]?.embedded) return;
+      contentElementHooks.applyFetchHooks(this.data[key]);
+    }
+    return this;
+  }
+
   touch(transaction) {
     return this.update({ modifiedAt: new Date() }, { transaction });
   }
diff --git a/apps/backend/content-element/content-element.controller.js b/apps/backend/content-element/content-element.controller.js
index 7dd8f64b6..16cba1ad1 100644
--- a/apps/backend/content-element/content-element.controller.js
+++ b/apps/backend/content-element/content-element.controller.js
@@ -3,6 +3,9 @@ import pick from 'lodash/pick.js';
 
 import { createError } from '#shared/error/helpers.js';
 import db from '#shared/database/index.js';
+import PluginRegistry from '#shared/content-plugins/index.js';
+
+const { elementRegistry } = PluginRegistry;
 
 const { NOT_FOUND } = StatusCodes;
 const { Activity, ContentElement } = db;
@@ -62,6 +65,19 @@ async function reorder({ body, contentElement }, res) {
   return res.json({ data: contentElement });
 }
 
+async function rpc({ contentElement, user, repository, body, params }, res) {
+  const { procedure } = params;
+  const { type } = contentElement;
+  const handler = elementRegistry.getProcedure(type, procedure);
+  if (!handler) {
+    const error = `Procedure "${procedure}" not found for element type "${type}"`;
+    return res.status(StatusCodes.NOT_FOUND).json({ error });
+  }
+  const context = { userId: user.id, repository };
+  const result = await handler(contentElement, body, { context });
+  return res.json({ data: result });
+}
+
 /**
  * Link element from another repository into this repository.
  * Creates a linked copy that receives auto-sync updates from source.
@@ -131,6 +147,7 @@ export default {
   patch,
   remove,
   reorder,
+  rpc,
   link,
   unlink,
   getSource,
diff --git a/apps/backend/content-element/index.js b/apps/backend/content-element/index.js
index f511429f0..21014764c 100644
--- a/apps/backend/content-element/index.js
+++ b/apps/backend/content-element/index.js
@@ -23,6 +23,7 @@ router.post('/:elementId/reorder', ctrl.reorder);
 router.post('/:elementId/unlink', ctrl.unlink);
 router.get('/:elementId/source', ctrl.getSource);
 router.get('/:elementId/copies', ctrl.getCopies);
+router.post('/:elementId/rpc/:procedure', ctrl.rpc);
 
 function getContentElement(req, _res, next, elementId) {
   if (!Number.isInteger(Number(elementId))) {
diff --git a/apps/backend/package.json b/apps/backend/package.json
index 9e2e155c3..51f7cee11 100644
--- a/apps/backend/package.json
+++ b/apps/backend/package.json
@@ -13,9 +13,9 @@
     "#storage": "./repository/storage.js"
   },
   "scripts": {
-    "dev": "node --watch --import ./script/preflight.js --experimental-strip-types ./index.ts || exit 0",
-    "start": "node --import ./script/preflight.js --experimental-strip-types ./index.ts",
-    "start:docker": "node --experimental-strip-types ./index.ts",
+    "dev": "node --watch --import ./script/preflight.js --experimental-transform-types ./index.ts || exit 0",
+    "start": "node --import ./script/preflight.js --experimental-transform-types ./index.ts",
+    "start:docker": "node --experimental-transform-types ./index.ts",
     "db": "node --import ./script/preflight.js ./script/sequelize.js",
     "db:reset": "pnpm db drop && pnpm db create && pnpm db migrate",
     "db:seed": "pnpm db seed:all",
diff --git a/apps/backend/shared/content-plugins/elementRegistry.js b/apps/backend/shared/content-plugins/elementRegistry.js
index b303c678c..e7b19dff2 100644
--- a/apps/backend/shared/content-plugins/elementRegistry.js
+++ b/apps/backend/shared/content-plugins/elementRegistry.js
@@ -8,6 +8,7 @@ class ElementsRegistry {
   constructor() {
     this._registry = elements;
     this._hooks = {};
+    this._procedures = {};
     this._aiSchemas = {};
   }
 
@@ -23,6 +24,7 @@ class ElementsRegistry {
       Object.assign(this._aiSchemas, {
         [it.type]: it.ai,
       });
+      if (it.procedures) this._procedures[it.type] = it.procedures;
     });
   }
 
@@ -43,6 +45,16 @@ class ElementsRegistry {
       );
     };
   }
+
+  getProcedure(elementType, procedure) {
+    const handlers = this._procedures[elementType];
+    if (!handlers || !handlers[procedure]) return;
+    const services = { config: pick(config, ['tce']), storage };
+    return (element, payload, options) => {
+      const context = options?.context || {};
+      return handlers[procedure](element, { ...services, context }, payload);
+    };
+  }
 }
 
 export default new ElementsRegistry();
diff --git a/apps/backend/shared/storage/helpers.js b/apps/backend/shared/storage/helpers.js
index 1c5553e76..1ac58f38a 100644
--- a/apps/backend/shared/storage/helpers.js
+++ b/apps/backend/shared/storage/helpers.js
@@ -12,6 +12,7 @@ const isLegacyQuestion = (element) =>
   !isComposite(element) && !!get(element, 'data.question');
 const isStorageAsset = (v) => isString(v) && v.startsWith(config.protocol);
 const extractStorageKey = (v) => v.substr(config.protocol.length, v.length);
+const isContentElement = (v) => !!get(v, 'data');
 
 async function resolveAssetsMap(element) {
   if (!get(element, 'data.assets')) return element;
@@ -25,24 +26,28 @@ async function resolveAssetsMap(element) {
   return element;
 }
 
+/**
+ * Resolves a single meta value with storage URL - mutates in place and returns value
+ */
+async function resolveMeta(element) {
+  const url = get(element, 'url');
+  if (url && isStorageAsset(url)) {
+    element.publicUrl = await storage.getFileUrl(extractStorageKey(url));
+  }
+  return element;
+}
+
 async function resolveMetaMap(element) {
   const meta = Object.values(element.meta || {});
-  await Promise.all(
-    meta.map(async (value) => {
-      const url = get(value, 'url');
-      if (!url || !isStorageAsset(url)) return Promise.resolve();
-      value.publicUrl = await storage.getFileUrl(extractStorageKey(url));
-    }),
-  );
+  await Promise.all(meta.map(resolveMeta));
   return element;
 }
 
-function resolveStatics(element) {
-  return isComposite(element)
-    ? resolveComposite(element)
-    : isLegacyQuestion(element)
-      ? resolveLegacyQuestion(element)
-      : resolvePrimitive(element);
+async function resolveStatics(element) {
+  if (!isContentElement(element)) return resolveMeta(element);
+  if (isComposite(element)) return resolveComposite(element);
+  if (isLegacyQuestion(element)) return resolveLegacyQuestion(element);
+  return resolvePrimitive(element);
 }
 
 async function resolvePrimitive(primitive) {
diff --git a/apps/frontend/app/api/contentElement.js b/apps/frontend/app/api/contentElement.js
index fa2953236..9caf9263c 100644
--- a/apps/frontend/app/api/contentElement.js
+++ b/apps/frontend/app/api/contentElement.js
@@ -6,6 +6,8 @@ const urls = {
   root: (repositoryId) => `${urls.repository(repositoryId)}/content-elements`,
   resource: (repositoryId, id) => `${urls.root(repositoryId)}/${id}`,
   reorder: (repositoryId, id) => `${urls.resource(repositoryId, id)}/reorder`,
+  rpc: (repositoryId, id, procedure) =>
+    `${urls.resource(repositoryId, id)}/rpc/${procedure}`,
   link: (repositoryId) => `${urls.root(repositoryId)}/link`,
   unlink: (repositoryId, id) => `${urls.resource(repositoryId, id)}/unlink`,
   source: (repositoryId, id) => `${urls.resource(repositoryId, id)}/source`,
@@ -34,6 +36,12 @@ function remove(repositoryId, id) {
   return request.delete(urls.resource(repositoryId, id));
 }
 
+function rpc(repositoryId, id, procedure, payload = {}) {
+  return request
+    .post(urls.rpc(repositoryId, id, procedure), payload)
+    .then(extractData);
+}
+
 function link(repositoryId, payload) {
   return request.post(urls.link(repositoryId), payload).then(extractData);
 }
@@ -56,6 +64,7 @@ export default {
   patch,
   reorder,
   remove,
+  rpc,
   link,
   unlink,
   getSource,
diff --git a/apps/frontend/app/components/common/AppBar.vue b/apps/frontend/app/components/common/AppBar.vue
index d11a16bca..d841a7425 100644
--- a/apps/frontend/app/components/common/AppBar.vue
+++ b/apps/frontend/app/components/common/AppBar.vue
@@ -154,7 +154,7 @@ const repositoryStore = useRepositoryStore();
 const currentRepositoryStore = useCurrentRepository();
 const route = useRoute();
 
-const { repository } = storeToRefs(currentRepositoryStore);
+const { repository, isCollection } = storeToRefs(currentRepositoryStore);
 
 const routes = computed(() => {
   const items = [
@@ -170,7 +170,7 @@ const routes = computed(() => {
   if (!authStore.hasAdminAccess) items.pop();
   if (repository.value) {
     items.unshift({
-      name: `${repository.value.name} structure`,
+      name: `${repository.value.name} ${isCollection.value ? 'items' : 'structure'}`,
       to: `/repository/${repository.value?.id}/root/structure`,
       icon: 'mdi-file-tree-outline',
     });
diff --git a/apps/frontend/app/components/editor/ActivityContent/ContainerList.vue b/apps/frontend/app/components/editor/ActivityContent/ContainerList.vue
index d950fe0ad..6116c8b9f 100644
--- a/apps/frontend/app/components/editor/ActivityContent/ContainerList.vue
+++ b/apps/frontend/app/components/editor/ActivityContent/ContainerList.vue
@@ -38,6 +38,7 @@
       @delete:subcontainer="requestContainerDeletion"
       @reorder:element="reorderContentElements"
       @save:element="saveContentElements"
+      @update:container="updateContainer"
       @update:element="(val: any) => saveContentElements([val])"
       @update:subcontainer="activityStore.update"
     />
@@ -158,6 +159,15 @@ const addContainer = async (data: Record<string, any> = {}) => {
   emit('createdContainer', payload);
 };
 
+const updateContainer = async (container: any) => {
+  try {
+    await activityStore.update(container);
+    showNotification(`${capitalize(name.value)} saved`);
+  } catch {
+    showNotification(`Failed to save ${name.value}`);
+  }
+};
+
 const saveContentElements = (elements: ContentElement[]) => {
   const contentElements = castArray(elements);
   return BBPromise.map(contentElements, (element) =>
diff --git a/apps/frontend/app/components/editor/ActivityContent/index.vue b/apps/frontend/app/components/editor/ActivityContent/index.vue
index 623e30de1..ea23caf52 100644
--- a/apps/frontend/app/components/editor/ActivityContent/index.vue
+++ b/apps/frontend/app/components/editor/ActivityContent/index.vue
@@ -163,6 +163,7 @@ const createActivity = async (payload: any) => {
 provide('$editorBus', editorChannel);
 provide('$eventBus', $eventBus);
 provide('$storageService', storageService);
+provide('$rpc', contentElementStore.rpc);
 if (config.props.aiUiEnabled) {
   provide('$doTheMagic', doTheMagic);
   provide('$createActivity', createActivity);
diff --git a/apps/frontend/app/components/editor/Sidebar/ElementSidebar/index.vue b/apps/frontend/app/components/editor/Sidebar/ElementSidebar/index.vue
index 02d9bb680..9f5600c6a 100644
--- a/apps/frontend/app/components/editor/Sidebar/ElementSidebar/index.vue
+++ b/apps/frontend/app/components/editor/Sidebar/ElementSidebar/index.vue
@@ -15,24 +15,31 @@ import { schema } from '@tailor-cms/config';
 
 import ElementMeta from './ElementMeta/index.vue';
 import { exposedApi } from '@/api';
+import { useContentElementStore } from '@/stores/content-elements';
 
 const eventBus = inject('$eventBus') as any;
 const authStore = useAuthStore();
+const { rpc } = useContentElementStore();
 const storageService = useStorageService();
 
 interface Props {
   element: ContentElement;
   metadata?: any;
 }
+
 const props = withDefaults(defineProps<Props>(), {
   metadata: () => ({}),
 });
+const { repositoryId, id: elementId } = props.element;
 
 const elementBus = eventBus.channel(`element:${getElementId(props.element)}`);
 const editorChannel = eventBus.channel('editor');
 provide('$elementBus', elementBus);
 provide('$editorBus', editorChannel);
 provide('$storageService', storageService);
+provide('$rpc', (procedure: string, payload?: any) =>
+  rpc(repositoryId, elementId, procedure, payload),
+);
 provide('$api', exposedApi);
 provide('$schemaService', schema);
 provide('$getCurrentUser', () => authStore.user);
diff --git a/apps/frontend/app/components/editor/Sidebar/index.vue b/apps/frontend/app/components/editor/Sidebar/index.vue
index 0cd4b5e65..82e45bb37 100644
--- a/apps/frontend/app/components/editor/Sidebar/index.vue
+++ b/apps/frontend/app/components/editor/Sidebar/index.vue
@@ -79,6 +79,7 @@ import { useDisplay } from 'vuetify';
 import ActivityNavigation from './ActivityNavigation.vue';
 import ElementSidebar from './ElementSidebar/index.vue';
 import ActivityDiscussion from '@/components/repository/Discussion/index.vue';
+import { useCurrentRepository } from '@/stores/current-repository';
 
 const modelValue = defineModel<boolean>({ required: true });
 
@@ -95,14 +96,14 @@ const ELEMENT_TAB = 'ELEMENT_TAB';
 
 const { $ceRegistry, $schemaService } = useNuxtApp() as any;
 const { lgAndUp } = useDisplay();
+const { isCollection } = storeToRefs(useCurrentRepository());
 
-const selectedTab = ref(BROWSER_TAB);
+const defaultTab = isCollection.value ? COMMENTS_TAB : BROWSER_TAB;
+const selectedTab = ref(defaultTab);
 const tabs: any = computed(() => [
-  {
-    name: BROWSER_TAB,
-    label: 'Browse',
-    icon: 'file-tree',
-  },
+  ...(!isCollection.value
+    ? [{ name: BROWSER_TAB, label: 'Browse', icon: 'file-tree' }]
+    : []),
   {
     name: COMMENTS_TAB,
     label: 'Comments',
@@ -142,7 +143,7 @@ watch(
       return;
     }
     if (selectedTab.value !== ELEMENT_TAB) return;
-    selectedTab.value = BROWSER_TAB;
+    selectedTab.value = defaultTab;
   },
 );
 
diff --git a/apps/frontend/app/components/editor/Toolbar/index.vue b/apps/frontend/app/components/editor/Toolbar/index.vue
index 2f024e2b7..99f294ca7 100644
--- a/apps/frontend/app/components/editor/Toolbar/index.vue
+++ b/apps/frontend/app/components/editor/Toolbar/index.vue
@@ -177,7 +177,7 @@ const usersWithActivity = computed(() => {
       position: absolute;
       padding: 0 !important;
 
-      .v-messages {
+      .v-messages__message {
         margin-top: 0.5rem;
         border-radius: 4px;
         padding: 0.5rem 0.75rem;
diff --git a/apps/frontend/app/components/repository/Outline/CollectionTable.vue b/apps/frontend/app/components/repository/Outline/CollectionTable.vue
new file mode 100644
index 000000000..218a8ec8e
--- /dev/null
+++ b/apps/frontend/app/components/repository/Outline/CollectionTable.vue
@@ -0,0 +1,167 @@
+<template>
+  <VDataTable
+    :headers="headers"
+    :items="activities"
+    :items-per-page="25"
+    :sort-by="[{ key: 'createdAt', order: 'desc' }]"
+    :row-props="getRowProps"
+    class="collection-table bg-primary-darken-2 rounded-lg text-left"
+    item-value="id"
+    fixed-header
+    @click:row="selectRow"
+  >
+    <template #[`item.data.name`]="{ item }">
+      {{ item.data.name }}
+    </template>
+    <template #[`item.createdAt`]="{ item }">
+      {{ formatDate(item.createdAt, 'MM/dd/yy HH:mm') }}
+    </template>
+    <template #[`item.updatedAt`]="{ item }">
+      {{ formatDate(item.updatedAt, 'MM/dd/yy HH:mm') }}
+    </template>
+    <template #[`item.actions`]="{ item }">
+      <VChip v-if="isSoftDeleted(item)" size="small">
+        <span class="mr-1 font-weight-bold">Deleted:</span>
+        Publish required
+        <VIcon
+          v-tooltip:bottom="'Will be removed upon publishing'"
+          class="ml-2"
+          icon="mdi-information-outline"
+        />
+      </VChip>
+      <template v-else>
+        <VBtn
+          v-tooltip:bottom="'Open'"
+          class="mr-2"
+          color="teal-lighten-4"
+          prepend-icon="mdi-page-next-outline"
+          size="small"
+          variant="tonal"
+          text="Open"
+          @click.stop="openActivity(item)"
+        />
+        <VBtn
+          v-tooltip:bottom="'Delete'"
+          color="secondary-lighten-3"
+          density="comfortable"
+          icon="mdi-trash-can-outline"
+          size="small"
+          variant="text"
+          @click.stop="deleteActivity(item)"
+        />
+      </template>
+    </template>
+    <template #no-data>
+      <VAlert
+        class="my-4"
+        color="primary-lighten-3"
+        icon="mdi-magnify"
+        variant="tonal"
+        prominent
+      >
+        No matches found!
+      </VAlert>
+    </template>
+  </VDataTable>
+</template>
+
+<script lang="ts" setup>
+import { activity as activityUtils } from '@tailor-cms/utils';
+import { formatDate } from 'date-fns/format';
+import { first, sortBy } from 'lodash-es';
+
+import type { StoreActivity } from '@/stores/activity';
+import { useConfirmationDialog } from '@/composables/useConfirmationDialog';
+import { useCurrentRepository } from '@/stores/current-repository';
+
+defineProps<{
+  activities: StoreActivity[];
+}>();
+
+const repositoryStore = useCurrentRepository();
+const activityStore = useActivityStore();
+const showConfirmationDialog = useConfirmationDialog();
+
+const headers = [
+  { title: 'Name', value: 'data.name', sortable: true },
+  { title: 'Date Created', value: 'createdAt', sortable: true, width: '10rem' },
+  { value: 'actions', sortable: false, align: 'end' as const, width: '10rem' },
+];
+
+const { doesRequirePublishing } = activityUtils;
+
+const isSoftDeleted = (activity: StoreActivity) =>
+  doesRequirePublishing(activity);
+
+const getRowProps = ({ item }: { item: StoreActivity }) => {
+  const classes = [];
+  if (isSoftDeleted(item)) classes.push('soft-deleted');
+  if (repositoryStore.selectedActivity?.id === item.id) classes.push('selected');
+  return { class: classes.join(' ') };
+};
+
+const selectRow = (_event: Event, { item }: any) => {
+  repositoryStore.selectActivity(item.id);
+};
+
+const openActivity = (activity: StoreActivity) => {
+  const { id: activityId, repositoryId } = activity;
+  navigateTo({ name: 'editor', params: { id: repositoryId, activityId } });
+};
+
+const deleteActivity = (activity: StoreActivity) =>
+  showConfirmationDialog({
+    title: 'Delete item?',
+    message: `Are you sure you want to delete ${activity.data.name}?`,
+    action: () => {
+      activityStore.remove(activity.id);
+      const focusNode = first(sortBy(repositoryStore.rootActivities, 'position'));
+      if (focusNode) repositoryStore.selectActivity(focusNode.id);
+    },
+  });
+</script>
+
+<style lang="scss" scoped>
+.collection-table {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+
+  :deep(.v-table__wrapper) {
+    flex: 1 1 auto;
+  }
+
+  line-height: 1.25;
+
+  :deep(td) {
+    padding: 0.5rem 1rem !important;
+  }
+
+  :deep(tbody) tr {
+    transition: background-color 0.3s ease;
+
+    &.soft-deleted {
+      background: rgba(var(--v-theme-secondary-darken-1), 0.1) !important;
+
+      &.selected,
+      &:hover {
+        background: rgba(var(--v-theme-secondary-lighten-2), 0.2) !important;
+      }
+    }
+
+    &.selected,
+    &:hover {
+      background: rgba(var(--v-theme-primary-darken-1)) !important;
+    }
+  }
+
+  :deep(th) {
+    background: rgba(var(--v-theme-primary-darken-2)) !important;
+    color: white !important;
+
+    &:hover {
+      font-weight: bold;
+    }
+  }
+}
+</style>
diff --git a/apps/frontend/app/components/repository/Outline/CreateDialog/index.vue b/apps/frontend/app/components/repository/Outline/CreateDialog/index.vue
index ed389f08d..471ee6700 100644
--- a/apps/frontend/app/components/repository/Outline/CreateDialog/index.vue
+++ b/apps/frontend/app/components/repository/Outline/CreateDialog/index.vue
@@ -7,11 +7,12 @@
   >
     <template v-if="showActivator" #activator="{ props: activatorProps }">
       <VBtn
-        v-bind="activatorProps"
+        v-bind="{ ...activatorProps, ...$attrs }"
         :color="activatorColor"
         :data-testid="`${props.testIdPrefix}Btn`"
+        :size="size"
+        :variant="variant"
         class="px-2"
-        variant="text"
       >
         <VIcon class="mr-2">{{ props.activatorIcon }}</VIcon>
         {{ activatorLabel || defaultModalHeading }}
@@ -95,6 +96,8 @@ import { useCurrentRepository } from '@/stores/current-repository';
 
 interface Props {
   repositoryId: number;
+  size?: string;
+  variant?: string;
   anchor?: StoreActivity | null;
   heading?: string;
   action?: InsertLocation;
@@ -111,6 +114,8 @@ const props = withDefaults(defineProps<Props>(), {
   action: InsertLocation.AddAfter,
   showActivator: false,
   activatorLabel: '',
+  size: 'default',
+  variant: 'text',
   activatorColor: 'primary-darken-3',
   activatorIcon: 'mdi-folder-plus',
   testIdPrefix: 'repository__createActivity',
diff --git a/apps/frontend/app/components/repository/Outline/OutlineCard.vue b/apps/frontend/app/components/repository/Outline/OutlineCard.vue
new file mode 100644
index 000000000..c6079b6f5
--- /dev/null
+++ b/apps/frontend/app/components/repository/Outline/OutlineCard.vue
@@ -0,0 +1,146 @@
+<template>
+  <VHover v-slot="{ props: hoverProps }" v-model="isHovered">
+    <VCard
+      v-bind="hoverProps"
+      :id="`activity_${props.activity.uid}`"
+      :color="color"
+      class="text-left py-2"
+      elevation="0"
+      height="130"
+      @mousedown="repositoryStore.selectActivity(props.activity.id)"
+    >
+      <VSheet
+        class="d-flex align-center my-1 mx-4"
+        color="transparent"
+        height="32"
+      >
+        <VChip
+          :color="config.color"
+          class="px-2"
+          size="x-small"
+          variant="flat"
+        />
+        <div class="activity-label text-uppercase ml-2">{{ config.label }}</div>
+        <VSpacer />
+        <VChip v-if="isSoftDeleted" rounded="lg" size="small">
+          <span class="pr-1 font-weight-bold">Deleted:</span>
+          Publish required
+          <VIcon
+            v-tooltip:bottom="'Will be removed upon publishing'"
+            class="ml-2"
+            color="secondary"
+            icon="mdi-information-outline"
+          />
+        </VChip>
+        <VFadeTransition>
+          <div v-if="!isSoftDeleted && (isHovered || isSelected)">
+            <VBtn
+              v-if="selectedActivity.isEditable"
+              color="primary-lighten-4"
+              prepend-icon="mdi-pencil"
+              size="small"
+              text="Edit"
+              variant="text"
+              @click.stop="openEditor"
+            />
+            <VBtn
+              v-tooltip:bottom="'Remove'"
+              color="primary-lighten-4"
+              density="comfortable"
+              icon="mdi-delete"
+              size="small"
+              variant="text"
+              @click.stop="deleteActivity"
+            />
+          </div>
+        </VFadeTransition>
+      </VSheet>
+      <VCardTitle class="text-primary-lighten-5 pa-0 ma-4">
+        {{ props.activity.data.name }}
+      </VCardTitle>
+    </VCard>
+  </VHover>
+</template>
+
+<script lang="ts" setup>
+import { activity as activityUtils } from '@tailor-cms/utils';
+import { first, sortBy } from 'lodash-es';
+
+import type { StoreActivity } from '@/stores/activity';
+import { useConfirmationDialog } from '@/composables/useConfirmationDialog';
+import { useCurrentRepository } from '@/stores/current-repository';
+
+const props = defineProps<{
+  activity: StoreActivity;
+}>();
+
+const { $schemaService } = useNuxtApp() as any;
+const repositoryStore = useCurrentRepository();
+const storageService = useStorageService();
+const activityStore = useActivityStore();
+const selectedActivity = useSelectedActivity(props.activity);
+const showConfirmationDialog = useConfirmationDialog();
+
+provide('$storageService', storageService);
+
+const isHovered = ref(false);
+
+const config = computed(() => $schemaService.getLevel(props.activity.type));
+
+const isSelected = computed(
+  () => repositoryStore.selectedActivity?.uid === props.activity.uid,
+);
+
+const isHighlighted = computed(() => isSelected.value || isHovered.value);
+
+const isSoftDeleted = computed(() =>
+  activityUtils.doesRequirePublishing(props.activity),
+);
+
+const color = computed(() => {
+  if (isSoftDeleted.value) return 'primary-darken-4';
+  return isHighlighted.value ? 'primary-darken-1' : 'primary-darken-2';
+});
+
+const openEditor = () => {
+  const { id: activityId, repositoryId } = props.activity;
+  const params = { id: repositoryId, activityId };
+  navigateTo({ name: 'editor', params });
+};
+
+const deleteActivity = () =>
+  showConfirmationDialog({
+    title: 'Delete item?',
+    message: `Are you sure you want to delete ${props.activity.data.name}?`,
+    action: () => {
+      const focusNode = props.activity.parentId
+        ? activityStore.findById(props.activity.parentId)
+        : first(sortBy(repositoryStore.rootActivities, 'position'));
+      activityStore.remove(props.activity.id);
+      if (focusNode) repositoryStore.selectActivity(focusNode.id);
+    },
+  });
+</script>
+
+<style lang="scss" scoped>
+.v-card {
+  cursor: pointer;
+}
+
+.activity-label {
+  font-size: 0.75rem;
+  line-height: 1.25rem;
+  letter-spacing: 1px;
+}
+
+.v-card-title {
+  white-space: normal;
+  word-break: break-word;
+  overflow: hidden;
+  /* stylelint-disable-next-line value-no-vendor-prefix */
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  line-height: 1.1;
+}
+</style>
diff --git a/apps/frontend/app/components/repository/Outline/OutlineItem.vue b/apps/frontend/app/components/repository/Outline/OutlineItem.vue
index 8a1890240..2d6a68e05 100644
--- a/apps/frontend/app/components/repository/Outline/OutlineItem.vue
+++ b/apps/frontend/app/components/repository/Outline/OutlineItem.vue
@@ -10,10 +10,10 @@
             highlighted: isHovering,
             disabled: isSoftDeleted,
           }"
-          :style="{ 'border-left-color': config.color }"
+          :style="{ 'border-left-color': config?.color }"
           class="activity"
           data-testid="repository__structureActivity"
-          @mousedown="currentRepositoryStore.selectActivity(activity.id)"
+          @mousedown="selectActivity(activity.id)"
         >
           <template v-if="!isSoftDeleted">
             <VBtn
@@ -89,16 +89,17 @@
         </VSheet>
       </template>
     </VHover>
-    <div v-if="!isSoftDeleted && isExpanded && hasSubtypes">
+    <div v-if="!isSoftDeleted && isExpanded && hasSubtypes" class="mt-2">
       <Draggable
         v-bind="{ handle: '.activity' }"
         :data-parent-id="activity.id"
         :list="children"
         :move="currentRepositoryStore.isValidDrop"
         animation="150"
+        class="d-flex flex-column ga-2"
         group="activities"
         item-key="uid"
-        @update="(data: SortableEvent) => reorder(data, children)"
+        @update="(e: SortableEvent) => reorder(e, children)"
         @change="(e: ChangeEvent) => onOutlineItemDrop(e, activity.id)"
       >
         <template #item="{ element, index: i }">
@@ -129,8 +130,8 @@ import type { StoreActivity } from '@/stores/activity';
 const { smAndUp } = useDisplay();
 const currentRepositoryStore = useCurrentRepository();
 
-const { taxonomy } = storeToRefs(currentRepositoryStore);
-const { onOutlineItemDrop } = currentRepositoryStore;
+const { selectedActivity, taxonomy } = storeToRefs(currentRepositoryStore);
+const { onOutlineItemDrop, selectActivity } = currentRepositoryStore;
 
 interface Props {
   activity: StoreActivity;
@@ -146,11 +147,11 @@ const utils = useSelectedActivity(props.activity);
 const reorder = useOutlineReorder();
 
 const config = computed(() =>
-  taxonomy.value.find((it: any) => it.type === props.activity.type),
+  taxonomy.value?.find((it: any) => it.type === props.activity.type),
 );
 
 const isSelected = computed(
-  () => currentRepositoryStore.selectedActivity?.uid === props.activity.uid,
+  () => selectedActivity.value?.uid === props.activity.uid,
 );
 
 const isSoftDeleted = computed(() =>
@@ -160,7 +161,7 @@ const isSoftDeleted = computed(() =>
 const isExpanded = computed(() =>
   utils.isOutlineItemExpanded(props.activity.uid),
 );
-const hasSubtypes = computed(() => !!size(config.value.subLevels));
+const hasSubtypes = computed(() => !!size(config.value?.subLevels));
 const hasChildren = computed(() => children.value.length > 0 && hasSubtypes);
 const children = computed(() => {
   return props.activities
@@ -168,7 +169,7 @@ const children = computed(() => {
       return (
         props.activity.id &&
         props.activity.id === it.parentId &&
-        config.value.subLevels.includes(it.type)
+        config.value?.subLevels?.includes(it.type)
       );
     })
     .sort((x, y) => x.position - y.position);
@@ -188,7 +189,6 @@ $background-color: rgb(var(--v-theme-primary-darken-2));
 .activity {
   display: flex;
   height: 3.25rem;
-  margin: 0.625rem 0;
   padding: 0 0 0 0.375rem;
   background-color: $background-color;
   cursor: pointer;
diff --git a/apps/frontend/app/components/repository/Outline/OutlineToolbar.vue b/apps/frontend/app/components/repository/Outline/OutlineToolbar.vue
index 340537e5e..b4a9627e5 100644
--- a/apps/frontend/app/components/repository/Outline/OutlineToolbar.vue
+++ b/apps/frontend/app/components/repository/Outline/OutlineToolbar.vue
@@ -1,31 +1,41 @@
 <template>
-  <div class="toolbar d-flex align-center justify-end flex-wrap ga-4 mb-2">
-    <VHover>
-      <template #default="{ isHovering, props: hoverProps }">
-        <VTextField
-          v-bind="hoverProps"
-          v-model="searchInput"
-          :bg-color="isHovering ? 'primary-darken-1' : 'primary-darken-2'"
-          density="comfortable"
-          placeholder="Search by name or id..."
-          prepend-inner-icon="mdi-magnify"
-          rounded="xl"
-          variant="outlined"
-          min-width="220"
-          clearable
-          hide-details
-          @click:clear="resetInput"
-        />
-      </template>
+  <div class="toolbar d-flex align-center justify-end flex-wrap ga-4 mb-4">
+    <VHover v-if="hasActivities" v-slot="{ isHovering, props: hoverProps }">
+      <VSpacer v-if="!isCollection" />
+      <VTextField
+        v-bind="hoverProps"
+        v-model="search"
+        :bg-color="isHovering ? 'primary-darken-1' : 'primary-darken-2'"
+        density="comfortable"
+        placeholder="Search by name or id..."
+        prepend-inner-icon="mdi-magnify"
+        rounded="xl"
+        variant="outlined"
+        min-width="220"
+        clearable
+        hide-details
+        @click:clear="search = ''"
+      />
     </VHover>
+    <template v-if="isCollection">
+      <VSpacer />
+      <CreateDialog
+        :anchor="anchor"
+        :repository-id="repositoryStore.repositoryId as number"
+        activator-color="primary-lighten-4"
+        class="px-4"
+        variant="tonal"
+        show-activator
+      />
+    </template>
     <VBtn
-      v-if="!isFlat"
-      :disabled="!!props.search"
+      v-else-if="!isFlat && hasActivities"
+      :disabled="!!search"
       class="px-5"
       color="primary-lighten-4"
       height="42"
       variant="tonal"
-      @click="currentRepositoryStore.toggleOutlineExpand"
+      @click="repositoryStore.toggleOutlineExpand"
     >
       Toggle all
     </VBtn>
@@ -33,33 +43,31 @@
 </template>
 
 <script lang="ts" setup>
+import { filter, find, last, map } from 'lodash-es';
+
+import CreateDialog from '@/components/repository/Outline/CreateDialog/index.vue';
 import { useCurrentRepository } from '@/stores/current-repository';
 
-interface Props {
-  isFlat?: boolean;
-  search?: string;
-}
+defineProps<{
+  hasActivities: boolean;
+}>();
 
-const props = withDefaults(defineProps<Props>(), {
-  isFlat: false,
-  search: '',
-});
-const emit = defineEmits(['search']);
+const search = defineModel<string | null>('search', { default: null });
 
-const currentRepositoryStore = useCurrentRepository();
-const searchInput = ref('');
+const repositoryStore = useCurrentRepository();
+const { outlineActivities, rootActivities, isCollection, taxonomy } =
+  storeToRefs(repositoryStore);
 
-const resetInput = () => {
-  searchInput.value = '';
-  emit('search', '');
-};
+const isFlat = computed(() => {
+  const types = map(
+    filter(taxonomy.value, (it) => !it.rootLevel),
+    'type',
+  );
+  if (!types.length) return false;
+  return !find(outlineActivities.value, (it) => types.includes(it.type));
+});
 
-watch(
-  () => searchInput.value,
-  (value) => {
-    emit('search', value);
-  },
-);
+const anchor = computed(() => last(rootActivities.value));
 </script>
 
 <style lang="scss" scoped>
diff --git a/apps/frontend/app/components/repository/Sidebar/ActivityPublishing.vue b/apps/frontend/app/components/repository/Sidebar/ActivityPublishing.vue
index 1286dd97b..da2f72293 100644
--- a/apps/frontend/app/components/repository/Sidebar/ActivityPublishing.vue
+++ b/apps/frontend/app/components/repository/Sidebar/ActivityPublishing.vue
@@ -3,11 +3,12 @@
     <VMenu offset="10" position="left" contained>
       <template #activator="{ props: menuProps }">
         <VBtn
+          v-bind="isCollection ? {} : menuProps"
           :loading="publishingUtils.isPublishing.value"
           color="primary-lighten-4"
           size="small"
           variant="tonal"
-          v-bind="menuProps"
+          @click="isCollection && publishingUtils.confirmPublishing([activity])"
         >
           <VIcon class="mr-2">mdi-cloud-upload-outline</VIcon>
           Publish
@@ -43,6 +44,7 @@ import { activity as activityUtils } from '@tailor-cms/utils';
 import { format } from 'fecha';
 
 import PublishingBadge from './PublishingBadge.vue';
+import { useCurrentRepository } from '@/stores/current-repository';
 
 const props = defineProps<{
   activity: StoreActivity;
@@ -53,6 +55,7 @@ const props = defineProps<{
 const { $schemaService } = useNuxtApp() as any;
 const { getDescendants } = activityUtils;
 const publishingUtils = usePublishActivity(props.activity);
+const { isCollection } = storeToRefs(useCurrentRepository());
 
 const config = computed(() => $schemaService.getLevel(props.activity.type));
 
diff --git a/apps/frontend/app/pages/repository/[[id]]/root.vue b/apps/frontend/app/pages/repository/[[id]]/root.vue
index 9b3b79984..2e8d571fa 100644
--- a/apps/frontend/app/pages/repository/[[id]]/root.vue
+++ b/apps/frontend/app/pages/repository/[[id]]/root.vue
@@ -73,9 +73,9 @@ const getTabItems = ({
 }) =>
   [
     {
-      name: 'Structure',
+      name: store.isCollection ? 'Items' : 'Structure',
       route: 'repository',
-      icon: 'file-tree',
+      icon: store.isCollection ? 'view-list' : 'file-tree',
     },
     hasActivities &&
       hasWorkflow && {
diff --git a/apps/frontend/app/pages/repository/[[id]]/root/structure.vue b/apps/frontend/app/pages/repository/[[id]]/root/structure.vue
index 6a5797919..47629c850 100644
--- a/apps/frontend/app/pages/repository/[[id]]/root/structure.vue
+++ b/apps/frontend/app/pages/repository/[[id]]/root/structure.vue
@@ -7,56 +7,75 @@
         max-width="1800"
       >
         <OutlineToolbar
-          v-if="hasActivities"
-          :is-flat="isFlat"
-          :search="search"
-          @search="(val) => (search = val)"
+          v-if="hasActivities || isCollection"
+          v-model:search="filters.search"
+          :has-activities="hasActivities"
         />
         <BrokenReferencesAlert />
-        <template v-if="!search">
-          <Draggable
-            v-bind="{ handle: '.activity' }"
-            :list="rootActivities"
-            :move="repositoryStore.isValidDrop"
-            class="mt-5"
-            animation="150"
-            group="activities"
-            item-key="uid"
-            @update="(data: SortableEvent) => reorder(data, rootActivities)"
-            @change="(e: ChangeEvent) => repositoryStore.onOutlineItemDrop(e)"
+        <div v-if="isCollection" class="collection-wrapper mt-5">
+          <CollectionTable
+            v-if="hasActivities"
+            :activities="filteredActivities"
+          />
+          <VAlert
+            v-else
+            class="mb-5"
+            color="primary-lighten-3"
+            icon="mdi-information-outline"
+            variant="tonal"
+            prominent
           >
-            <template #item="{ element, index }">
-              <OutlineItem
-                :activities="outlineActivities"
-                :activity="element"
-                :index="index + 1"
-                :level="1"
-              />
-            </template>
-          </Draggable>
-          <OutlineFooter class="mt-1" />
-        </template>
+            Click on the button above in order to create your first item!
+          </VAlert>
+        </div>
         <template v-else>
-          <SearchResult
-            v-for="activity in filteredActivities"
-            :key="activity.uid"
-            :activity="activity"
-            :is-selected="repositoryStore.selectedActivity?.id === activity.id"
-            @select="repositoryStore.selectActivity(activity.id)"
-            @show="goTo(activity)"
-          />
-          <div class="my-6">
-            <VAlert
-              v-if="!filteredActivities.length"
-              class="mb-5"
-              color="primary-lighten-2"
-              icon="mdi-magnify"
-              variant="tonal"
-              prominent
+          <template v-if="!filters.search">
+            <Draggable
+              v-bind="{ handle: '.activity' }"
+              :list="rootActivities"
+              :move="repositoryStore.isValidDrop"
+              class="mt-5 d-flex flex-column ga-2"
+              animation="150"
+              group="activities"
+              item-key="uid"
+              @update="(e: SortableEvent) => reorder(e, rootActivities)"
+              @change="(e: ChangeEvent) => repositoryStore.onOutlineItemDrop(e)"
             >
-              No matches found!
-            </VAlert>
-          </div>
+              <template #item="{ element, index }">
+                <OutlineItem
+                  :activities="outlineActivities"
+                  :activity="element"
+                  :index="index + 1"
+                  :level="1"
+                />
+              </template>
+            </Draggable>
+            <OutlineFooter class="mt-1" />
+          </template>
+          <template v-else>
+            <SearchResult
+              v-for="activity in filteredActivities"
+              :key="activity.uid"
+              :activity="activity"
+              :is-selected="
+                repositoryStore.selectedActivity?.id === activity.id
+              "
+              @select="repositoryStore.selectActivity(activity.id)"
+              @show="goTo(activity)"
+            />
+            <div class="my-6">
+              <VAlert
+                v-if="!filteredActivities.length"
+                class="mb-5"
+                color="primary-lighten-3"
+                icon="mdi-magnify"
+                variant="tonal"
+                prominent
+              >
+                No matches found!
+              </VAlert>
+            </div>
+          </template>
         </template>
       </VContainer>
     </VMain>
@@ -65,13 +84,13 @@
 </template>
 
 <script lang="ts" setup>
-import { filter, find, map } from 'lodash-es';
 import Draggable from 'vuedraggable';
 import { storeToRefs } from 'pinia';
 
 import type { ChangeEvent, SortableEvent } from '@/types/draggable';
 import BrokenReferencesAlert from '@/components/common/BrokenReferencesAlert.vue';
-import OutlineFooter from '@/components/repository/Outline/OutlineFooter.vue';
+import CollectionTable from '@/components/repository/Outline/CollectionTable.vue';
+import OutlineFooter from '~/components/repository/Outline/OutlineFooter.vue';
 import OutlineItem from '@/components/repository/Outline/OutlineItem.vue';
 import OutlineToolbar from '@/components/repository/Outline/OutlineToolbar.vue';
 import SearchResult from '@/components/repository/Outline/SearchResult.vue';
@@ -79,6 +98,10 @@ import Sidebar from '@/components/repository/Sidebar/index.vue';
 import type { StoreActivity } from '@/stores/activity';
 import { useCurrentRepository } from '@/stores/current-repository';
 
+interface Filters {
+  search: string;
+}
+
 definePageMeta({
   name: 'repository',
   middleware: ['auth'],
@@ -86,37 +109,39 @@ definePageMeta({
 
 const repositoryStore = useCurrentRepository();
 
-const { outlineActivities, rootActivities, selectedActivity, taxonomy } =
-  storeToRefs(repositoryStore);
+const {
+  outlineActivities,
+  rootActivities,
+  selectedActivity,
+  isCollection,
+} = storeToRefs(repositoryStore);
 
 const reorder = useOutlineReorder();
 const storageService = useStorageService();
 
 provide('$storageService', storageService);
 
-const search = ref('');
+const filters = reactive<Filters>({
+  search: '',
+});
+
 const structureEl = ref();
 const hasActivities = computed(() => !!rootActivities.value.length);
 
-const isFlat = computed(() => {
-  const types = map(
-    filter(taxonomy.value, (it) => !it.rootLevel),
-    'type',
+const filteredActivities = computed(() => {
+  return outlineActivities.value.filter(
+    (activity: StoreActivity) =>
+      !filters.search || filterBySearch(activity),
   );
-  if (!types.length) return false;
-  return !find(outlineActivities.value, (it) => types.includes(it.type));
 });
 
-const filteredActivities = computed(() => {
-  if (!search.value) return outlineActivities.value;
-  const regex = new RegExp(search.value.trim(), 'i');
-  return filter(outlineActivities.value, ({ shortId, data: { name } }) => {
-    return regex.test(shortId) || regex.test(name);
-  });
-});
+const filterBySearch = ({ shortId, data }: StoreActivity) => {
+  const regex = new RegExp(filters.search.trim(), 'i');
+  return regex.test(shortId) || regex.test(data.name);
+};
 
 const goTo = async (activity: StoreActivity) => {
-  search.value = '';
+  filters.search = '';
   repositoryStore.selectActivity(activity.id);
   await nextTick();
   scrollToActivity(activity);
@@ -179,8 +204,15 @@ onMounted(() => {
     display: none;
   }
 
-  > :deep(:last-child) {
+  > :deep(:last-child:not(.collection-wrapper)) {
     margin-bottom: 7.5rem;
   }
 }
+
+.collection-wrapper {
+  flex: 1 1 auto;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
 </style>
diff --git a/apps/frontend/app/stores/content-elements.ts b/apps/frontend/app/stores/content-elements.ts
index 8cdd5f26b..4c323d930 100644
--- a/apps/frontend/app/stores/content-elements.ts
+++ b/apps/frontend/app/stores/content-elements.ts
@@ -111,6 +111,15 @@ export const useContentElementStore = defineStore('contentElements', () => {
       .subscribe(Events.Delete, (it: ContentElement) => $items.delete(it.uid));
   };
 
+  async function rpc(
+    repositoryId: number,
+    elementId: number,
+    procedure: string,
+    payload?: any,
+  ): Promise<any> {
+    return api.rpc(repositoryId, elementId, procedure, payload);
+  }
+
   function $reset() {
     $items.clear();
   }
@@ -125,6 +134,7 @@ export const useContentElementStore = defineStore('contentElements', () => {
     save,
     remove,
     reorder,
+    rpc,
     unlink,
     $subscribeToSSE,
     $reset,
diff --git a/apps/frontend/app/stores/current-repository.ts b/apps/frontend/app/stores/current-repository.ts
index 3b0f12215..c6073fb67 100644
--- a/apps/frontend/app/stores/current-repository.ts
+++ b/apps/frontend/app/stores/current-repository.ts
@@ -58,10 +58,14 @@ export const useCurrentRepository = defineStore('currentRepository', () => {
     return repositoryId.value ? Repository.findById(repositoryId.value) : null;
   });
 
-  const schemaName = computed(() => {
-    return repository.value && getSchema(repository.value.schema).name;
+  const schema = computed(() => {
+    return repository.value && getSchema(repository.value.schema);
   });
 
+  const schemaName = computed(() => schema.value?.name || '');
+
+  const isCollection = computed(() => schema.value?.collection);
+
   const taxonomy = computed(() => {
     return repository.value && getOutlineLevels(repository.value.schema);
   });
@@ -243,6 +247,7 @@ export const useCurrentRepository = defineStore('currentRepository', () => {
     users,
     outlineState,
     schemaName,
+    isCollection,
     taxonomy,
     activities,
     outlineActivities,
diff --git a/apps/frontend/package.json b/apps/frontend/package.json
index 4b0387e97..a89d7e370 100644
--- a/apps/frontend/package.json
+++ b/apps/frontend/package.json
@@ -16,6 +16,7 @@
     "@types/lodash-es": "^4.17.12",
     "@types/pluralize": "^0.0.33",
     "@types/promise-queue": "^2.2.3",
+    "@types/sortablejs": "^1.15.9",
     "autoprefixer": "^10.4.21",
     "nuxt": "4.2.0",
     "sass": "^1.93.2",
diff --git a/config/package.json b/config/package.json
index 697580058..f6b10bbd0 100644
--- a/config/package.json
+++ b/config/package.json
@@ -18,7 +18,8 @@
     "prebuild": "del-cli dist"
   },
   "dependencies": {
-    "@tailor-cms/config-parser": "workspace:^"
+    "@tailor-cms/config-parser": "workspace:^",
+    "lodash-es": "^4.17.21"
   },
   "devDependencies": {
     "@tailor-cms/content-container-collection": "workspace:^",
diff --git a/config/src/collections/example.collection.ts b/config/src/collections/example.collection.ts
new file mode 100644
index 000000000..97e94fba2
--- /dev/null
+++ b/config/src/collections/example.collection.ts
@@ -0,0 +1,33 @@
+import type { ContentElement } from '@tailor-cms/interfaces/content-element.ts';
+import { MetaInputType } from '@tailor-cms/meta-element-collection/types.js';
+import { ContentElementType } from '@tailor-cms/content-element-collection/types.js';
+import { IsContentElement, IsInput, Prop, TailorCollection } from '../lib/index.ts';
+
+class Article {
+  @Prop()
+  @IsInput(MetaInputType.Html, { validate: { required: true, min: 2, max: 2000 } })
+  description: string;
+
+  @Prop()
+  @IsInput(
+    MetaInputType.File,
+    {
+      label: 'Thumbnail Image',
+      placeholder: 'Click to upload a thumbnail image',
+      showPreview: true,
+      icon: 'mdi-image',
+      ext: ['jpg', 'jpeg', 'png'],
+    },
+  )
+  thumbnail: string;
+
+  @Prop({ label: 'Overview Video' })
+  @IsContentElement(ContentElementType.Video, { required: true })
+  video: ContentElement;
+
+  @Prop({ label: 'Poll' })
+  @IsContentElement(ContentElementType.MultipleChoice, { required: true })
+  question: ContentElement;
+}
+
+export const exampleCollection = new TailorCollection(Article);
diff --git a/config/src/index.ts b/config/src/index.ts
index 6308000e0..dbc9f59ac 100644
--- a/config/src/index.ts
+++ b/config/src/index.ts
@@ -3,10 +3,11 @@ import {
   getWorkflowApi,
   processSchemas,
 } from '@tailor-cms/config-parser';
-
 import { ContentElementType } from '@tailor-cms/content-element-collection/types.js';
+
 import { SCHEMA as CourseSchema } from './schemas/course.schema';
 import { DEFAULT_WORKFLOW as DefaultWorkflow } from './workflows/default.workflow';
+import { exampleCollection } from './collections/example.collection';
 import { SCHEMA as FeedSchema } from './schemas/feed.schema';
 import { SCHEMA as KnowledgeBase } from './schemas/knowledge-base.schema';
 import { SCHEMA as QASchema } from './schemas/q&a.schema';
@@ -29,6 +30,7 @@ export const SCHEMAS = processSchemas([
   TestSchema,
   ContentLibrarySchema,
   VideoCourseSchema,
+  exampleCollection.toSchema(),
 ]);
 
 export const schema = getSchemaApi(SCHEMAS, Object.values(ContentElementType));
diff --git a/config/src/lib/index.ts b/config/src/lib/index.ts
new file mode 100644
index 000000000..17c1f3b24
--- /dev/null
+++ b/config/src/lib/index.ts
@@ -0,0 +1,103 @@
+// Ensure metadata symbol is available
+import './metadata.shim.js';
+
+import type { Metadata } from '@tailor-cms/interfaces/schema';
+import type { ContentElementType } from '@tailor-cms/content-element-collection/enum.ts';
+import { ContentContainerType } from '@tailor-cms/content-container-collection/types.js';
+import type { MetaInputType } from '@tailor-cms/meta-element-collection/enum.ts';
+import { capitalize } from 'lodash-es';
+
+interface Context {
+  name: string;
+  metadata: Record<PropertyKey, unknown>;
+}
+
+interface PropConfig {
+  label?: string;
+  required?: boolean;
+}
+
+interface ContentElementConfig extends PropConfig {
+  isGradable?: boolean;
+}
+
+export function Prop(config?: PropConfig) {
+  return (_target: any, context: Context) => {
+    const meta = context.metadata || {};
+    const propMeta = meta[context.name] || {};
+    meta[context.name] = {
+      key: context.name,
+      label: capitalize(context.name),
+      required: false,
+      ...config,
+      ...propMeta,
+    };
+  };
+}
+
+export function IsContentElement(
+  type: ContentElementType,
+  config?: ContentElementConfig,
+) {
+  return (_: any, context: Context) => {
+    const meta = context.metadata || {};
+    const propMeta = meta[context.name] || {};
+    meta[context.name] = { ...propMeta, ...config, type, isContentElement: true };
+  };
+}
+
+export function IsInput(
+  type: MetaInputType,
+  config?: Omit<Metadata, 'key' | 'type' | 'label'>,
+) {
+  return (_: any, context: Context) => {
+    const meta = context.metadata || {};
+    const propMeta = meta[context.name] || {};
+    meta[context.name] = { ...propMeta, ...config, type, IsInput: true };
+  };
+}
+
+export class TailorCollection {
+  id: string;
+  label: string;
+  props: Array<any>;
+  constructor(
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
+    entity: Function,
+    config?: { schemaId?: string; label?: string },
+  ) {
+    const { schemaId, label } = config || {};
+    this.id = schemaId || entity.name.toUpperCase();
+    this.label = label || capitalize(entity.name);
+    const meta = entity[Symbol.metadata] || {} as Record<PropertyKey, any>;
+    this.props = Object.entries(meta).map(([key, val]) => ({ key, ...val }));
+  }
+
+  toSchema() {
+    return {
+      id: this.id,
+      name: `${this.label} Collection`,
+      description: `A currated ${this.label} collection.`,
+      collection: true,
+      workflowId: 'DEFAULT_WORKFLOW',
+      contentContainers: [
+        {
+          type: ContentContainerType.CollectionItemContent,
+          templateId: ContentContainerType.CollectionItemContent,
+          label: this.label,
+          config: this.props,
+        },
+      ],
+      structure: [
+        {
+          type: `${this.id}_ENTRY`,
+          label: this.label,
+          rootLevel: true,
+          isTrackedInWorkflow: true,
+          color: '#5187C7',
+          contentContainers: [ContentContainerType.CollectionItemContent],
+        },
+      ],
+    };
+  }
+}
diff --git a/config/src/lib/metadata.shim.ts b/config/src/lib/metadata.shim.ts
new file mode 100644
index 000000000..b64dfa74f
--- /dev/null
+++ b/config/src/lib/metadata.shim.ts
@@ -0,0 +1,8 @@
+export {};
+declare global {
+  interface SymbolConstructor {
+    readonly metadata: unique symbol;
+  }
+}
+// @ts-expect-error Symbol.metadata polyfill
+Symbol.metadata ??= Symbol.for('Symbol.metadata');
diff --git a/config/tsconfig.json b/config/tsconfig.json
index 4f3f449c9..e69415d12 100644
--- a/config/tsconfig.json
+++ b/config/tsconfig.json
@@ -2,8 +2,6 @@
   "compilerOptions": {
     "target": "ES2018",
     "lib": ["esnext"],
-    "emitDecoratorMetadata": true,
-    "experimentalDecorators": true,
     "module": "ESNext",
     "moduleResolution": "node",
     "resolveJsonModule": true,
@@ -13,5 +11,7 @@
     "esModuleInterop": true,
     "skipDefaultLibCheck": true,
     "skipLibCheck": true,
+    "allowImportingTsExtensions": true,
+    "noEmit": true
   }
 }
diff --git a/extensions/content-containers/client.js b/extensions/content-containers/client.js
index 05d9d525a..07a4ba8be 100644
--- a/extensions/content-containers/client.js
+++ b/extensions/content-containers/client.js
@@ -2,6 +2,7 @@ import pkg0 from '@tailor-cms/tcc-page';
 import pkg1 from '@tailor-cms/tcc-structured-content-edit';
 import pkg2 from '@tailor-cms/tcc-assessment-pool-edit';
 import pkg3 from '@tailor-cms/tcc-exam-edit';
+import pkg4 from '@tailor-cms/tcc-collection-item';
 
 // prettier-ignore
 export const elements = [
@@ -9,4 +10,5 @@ export const elements = [
   pkg1,
   pkg2,
   pkg3,
+  pkg4,
 ];
diff --git a/extensions/content-containers/enum.ts b/extensions/content-containers/enum.ts
new file mode 100644
index 000000000..6a6e59289
--- /dev/null
+++ b/extensions/content-containers/enum.ts
@@ -0,0 +1,7 @@
+export enum ContentContainerType {
+  Default = 'DEFAULT',
+  StructuredContent = 'STRUCTURED_CONTENT',
+  AssessmentPool = 'ASSESSMENT_POOL',
+  Exam = 'EXAM',
+  CollectionItemContent = 'COLLECTION_ITEM_CONTENT',
+};
diff --git a/extensions/content-containers/package.json b/extensions/content-containers/package.json
index 3d3e8f819..e61f2c3e0 100644
--- a/extensions/content-containers/package.json
+++ b/extensions/content-containers/package.json
@@ -5,7 +5,8 @@
   "files": [
     "client.js",
     "server.js",
-    "types.js"
+    "types.js",
+    "enum.ts"
   ],
   "scripts": {
     "cli": "node ./cli.js"
@@ -16,6 +17,8 @@
   "dependencies": {
     "@tailor-cms/tcc-assessment-pool-edit": "workspace:^",
     "@tailor-cms/tcc-assessment-pool-server": "workspace:^",
+    "@tailor-cms/tcc-collection-item": "workspace:^",
+    "@tailor-cms/tcc-collection-item-server": "workspace:^",
     "@tailor-cms/tcc-exam-edit": "workspace:^",
     "@tailor-cms/tcc-exam-server": "workspace:^",
     "@tailor-cms/tcc-page": "workspace:^",
diff --git a/extensions/content-containers/registry.json b/extensions/content-containers/registry.json
index 2b3ed3667..11b0b1731 100644
--- a/extensions/content-containers/registry.json
+++ b/extensions/content-containers/registry.json
@@ -6,7 +6,7 @@
   },
   {
     "name": "@tailor-cms/tcc-structured-content",
-    "clientPackage": "@tailor-cms/tcc-structured-content-edit",
+    "clientPackage": "@tailor-cms/tcc-structured-content",
     "serverPackage": "@tailor-cms/tcc-structured-content-server"
   },
   {
@@ -18,5 +18,10 @@
     "name": "@tailor-cms/tcc-exam",
     "clientPackage": "@tailor-cms/tcc-exam-edit",
     "serverPackage": "@tailor-cms/tcc-exam-server"
+  },
+  {
+    "name": "@tailor-cms/tcc-collection-item",
+    "clientPackage": "@tailor-cms/tcc-collection-item",
+    "serverPackage":  "@tailor-cms/tcc-collection-item-server"
   }
 ]
diff --git a/extensions/content-containers/server.js b/extensions/content-containers/server.js
index 01e002721..785b69742 100644
--- a/extensions/content-containers/server.js
+++ b/extensions/content-containers/server.js
@@ -1,10 +1,12 @@
 import pkg0 from '@tailor-cms/tcc-assessment-pool-server';
 import pkg1 from '@tailor-cms/tcc-exam-server';
 import pkg2 from '@tailor-cms/tcc-structured-content-server';
+import pkg3 from '@tailor-cms/tcc-collection-item-server';
 
 // prettier-ignore
 export const elements = [
   pkg0,
   pkg1,
   pkg2,
+  pkg3,
 ];
diff --git a/extensions/content-containers/types.js b/extensions/content-containers/types.js
index f0bb54e1c..db2c85095 100644
--- a/extensions/content-containers/types.js
+++ b/extensions/content-containers/types.js
@@ -3,4 +3,5 @@ export const ContentContainerType = {
   StructuredContent: 'STRUCTURED_CONTENT',
   AssessmentPool: 'ASSESSMENT_POOL',
   Exam: 'EXAM',
+  CollectionItemContent: 'COLLECTION_ITEM_CONTENT',
 };
diff --git a/extensions/content-elements/enum.ts b/extensions/content-elements/enum.ts
new file mode 100644
index 000000000..6a1ed6038
--- /dev/null
+++ b/extensions/content-elements/enum.ts
@@ -0,0 +1,25 @@
+export enum ContentElementType {
+  TiptapHtml = 'TIPTAP_HTML',
+  Image = 'IMAGE',
+  MultipleChoice = 'MULTIPLE_CHOICE',
+  SingleChoice = 'SINGLE_CHOICE',
+  MatchingQuestion = 'MATCHING_QUESTION',
+  TextResponse = 'TEXT_RESPONSE',
+  TrueFalse = 'TRUE_FALSE',
+  NumericalResponse = 'NUMERICAL_RESPONSE',
+  FillBlank = 'FILL_BLANK',
+  Break = 'BREAK',
+  DragDrop = 'DRAG_DROP',
+  Pdf = 'PDF',
+  Embed = 'EMBED',
+  Audio = 'AUDIO',
+  Video = 'VIDEO',
+  Accordion = 'ACCORDION',
+  Carousel = 'CAROUSEL',
+  Modal = 'MODAL',
+  Table = 'TABLE',
+  BrightcoveVideo = 'BRIGHTCOVE_VIDEO',
+  JoditHtml = 'JODIT_HTML',
+  Html = 'HTML',
+  File = 'FILE',
+};
diff --git a/extensions/content-elements/package.json b/extensions/content-elements/package.json
index a541ef641..eed26ae62 100644
--- a/extensions/content-elements/package.json
+++ b/extensions/content-elements/package.json
@@ -5,7 +5,8 @@
   "files": [
     "client.js",
     "server.js",
-    "types.js"
+    "types.js",
+    "enum.ts"
   ],
   "scripts": {
     "cli": "node ./cli.js"
diff --git a/extensions/meta-inputs/enum.ts b/extensions/meta-inputs/enum.ts
new file mode 100644
index 000000000..ea2c48f2b
--- /dev/null
+++ b/extensions/meta-inputs/enum.ts
@@ -0,0 +1,14 @@
+export enum MetaInputType {
+  File = 'FILE',
+  Color = 'COLOR',
+  Html = 'HTML',
+  RadioGroup = 'RADIO_GROUP',
+  Checkbox = 'CHECKBOX',
+  Switch = 'SWITCH',
+  Combobox = 'COMBOBOX',
+  Select = 'SELECT',
+  Datetime = 'DATETIME',
+  HeasRating = 'HEAS_RATING',
+  TextField = 'TEXT_FIELD',
+  Textarea = 'TEXTAREA',
+};
diff --git a/extensions/meta-inputs/package.json b/extensions/meta-inputs/package.json
index 85188e903..1b2b489a8 100644
--- a/extensions/meta-inputs/package.json
+++ b/extensions/meta-inputs/package.json
@@ -4,6 +4,7 @@
   "version": "1.0.0",
   "files": [
     "client.js",
+    "enum.ts",
     "server.js",
     "schema.js",
     "types.js"
diff --git a/packages/core-components/src/components/ContainedContent.vue b/packages/core-components/src/components/ContainedContent.vue
index 07b379c2a..9e8215c22 100644
--- a/packages/core-components/src/components/ContainedContent.vue
+++ b/packages/core-components/src/components/ContainedContent.vue
@@ -41,6 +41,7 @@ interface Props {
   showDiscussion?: boolean;
   setWidth?: boolean;
   dense?: boolean;
+  autosave?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -51,6 +52,7 @@ const props = withDefaults(defineProps<Props>(), {
   showDiscussion: false,
   setWidth: true,
   dense: false,
+  autosave: false,
 });
 
 const emit = defineEmits([
@@ -73,6 +75,7 @@ const bindings = computed(() => {
     isDragged,
     dense,
     showDiscussion,
+    autosave,
   } = props;
   return {
     element,
@@ -83,6 +86,7 @@ const bindings = computed(() => {
     isHovered: isHovered.value,
     showDiscussion,
     dense,
+    autosave,
   };
 });
 
diff --git a/packages/core-components/src/components/ContentElement.vue b/packages/core-components/src/components/ContentElement.vue
index fbd3f61a9..8a9bf5505 100644
--- a/packages/core-components/src/components/ContentElement.vue
+++ b/packages/core-components/src/components/ContentElement.vue
@@ -53,6 +53,7 @@
             isDisabled,
             isReadonly: props.isDisabled,
             dense,
+            autosave,
           }"
           @add="emit('add', $event)"
           @delete="emit('delete')"
@@ -219,6 +220,7 @@ interface Props {
   dense?: boolean;
   showDiscussion?: boolean;
   embedElementConfig?: ContentElementCategory[];
+  autosave?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -231,6 +233,7 @@ const props = withDefaults(defineProps<Props>(), {
   frame: true,
   dense: false,
   showDiscussion: false,
+  autosave: false,
 });
 
 const emit = defineEmits(['add', 'delete', 'save', 'save:meta']);
@@ -241,6 +244,7 @@ const editorState = inject<any>('$editorState');
 const eventBus = inject<any>('$eventBus');
 const getCurrentUser = inject<any>('$getCurrentUser');
 const doTheMagic = inject<any>('$doTheMagic');
+const rpc = inject<any>('$rpc', null);
 
 const { loading, loader } = useLoader();
 const confirmationDialog = useConfirmationDialog();
@@ -248,6 +252,13 @@ const confirmationDialog = useConfirmationDialog();
 const elementBus = eventBus.channel(`element:${getElementId(props.element)}`);
 provide('$elementBus', elementBus);
 
+if (rpc) {
+  const { repositoryId, id } = props.element;
+  provide('$rpc', (procedure: string, payload?: any) =>
+    rpc(repositoryId, id, procedure, payload),
+  );
+}
+
 const isFocused = ref(false);
 const isSaving = ref(false);
 const currentUser = getCurrentUser?.();
diff --git a/packages/core-components/src/components/FileInput/FilePreview.vue b/packages/core-components/src/components/FileInput/FilePreview.vue
index 413c1623b..594e60587 100644
--- a/packages/core-components/src/components/FileInput/FilePreview.vue
+++ b/packages/core-components/src/components/FileInput/FilePreview.vue
@@ -1,69 +1,82 @@
 <template>
-  <div class="mb-5 text-left">
-    <div class="v-label ma-1 text-caption">{{ label }}</div>
-    <VCard
-      :color="dark ? 'primary-lighten-4' : 'primary'"
-      class="file-preview d-flex align-center"
-      max-width="460"
-      rounded="lg"
-      variant="tonal"
-      border
-      @click="showPreview && (expanded = true)"
-    >
-      <VAvatar class="mr-3" color="primary" rounded="lg" size="75">
-        <VProgressCircular v-if="isLoading" indeterminate />
-        <VImg v-else-if="showPreview && url" :src="url" cover />
-        <VIcon v-else :icon="icon" size="x-large" />
-      </VAvatar>
-      <div
-        :class="dark ? 'text-primary-lighten-3' : 'text-primary-darken-2'"
-        class="file-name text-body-1 text-truncate"
+  <VOverlay
+    v-model="expanded"
+    :class="{ expanded }"
+    content-class="d-flex align-center justify-center h-100 w-100"
+    close-on-content-click
+  >
+    <template #activator="{ props: dialogProps }">
+      <VTextField
+        v-bind="$attrs"
+        :density="density"
+        :label="label"
+        :max-width="maxWidth"
+        :min-width="minWidth"
+        :model-value="fileName"
+        :variant="variant"
+        readonly
       >
-        {{ fileName }}
-      </div>
-      <VSpacer />
-      <div class="d-flex ma-3">
-        <VBtn
-          :color="dark ? 'primary-lighten-3' : 'primary-lighten-1'"
-          aria-label="Download file"
-          class="ml-3"
-          icon="mdi-download"
-          size="small"
-          variant="tonal"
-          @click.stop="emit('download')"
-        />
-        <VBtn
-          :color="dark ? 'secondary-lighten-3' : 'secondary-lighten-1'"
-          aria-label="Delete file"
-          class="ml-2"
-          icon="mdi-trash-can-outline"
-          size="small"
-          variant="tonal"
-          @click.stop="emit('delete')"
-        />
-      </div>
-    </VCard>
-    <VOverlay
-      v-if="showPreview"
-      v-model="expanded"
-      :class="{ expanded }"
-      content-class="d-flex align-center justify-center h-100 w-100"
-      close-on-content-click
-    >
-      <VBtn
-        class="position-absolute top-0 right-0 ma-4"
-        color="white"
-        icon="mdi-close"
-        variant="tonal"
-        @click="expanded = false"
-      />
-      <img v-if="url" :src="url" :alt="fileName" />
-    </VOverlay>
-  </div>
+        <template #prepend-inner>
+          <VProgressCircular v-if="isLoading" indeterminate size="24" />
+          <VImg
+            v-else-if="showPreview && url"
+            :src="url"
+            height="24"
+            width="24"
+            cover
+          />
+          <VIcon v-else :icon="icon" />
+        </template>
+        <template #append-inner>
+          <VBtn
+            v-if="showPreview"
+            v-bind="dialogProps"
+            :color="dark ? 'white' : 'primary'"
+            aria-label="Preview image"
+            class="mr-1"
+            size="x-small"
+            variant="tonal"
+            icon
+          >
+            <VIcon icon="mdi-magnify" size="large" />
+          </VBtn>
+          <VBtn
+            :color="dark ? 'white' : 'primary'"
+            aria-label="Download file"
+            class="mr-1"
+            size="x-small"
+            variant="tonal"
+            icon
+            @click.stop="emit('download')"
+          >
+            <VIcon icon="mdi-download" size="large" />
+          </VBtn>
+          <VBtn
+            :color="dark ? 'secondary-lighten-3' : 'secondary'"
+            aria-label="Remove file"
+            size="x-small"
+            variant="tonal"
+            icon
+            @click.stop="emit('delete')"
+          >
+            <VIcon icon="mdi-trash-can-outline" size="large" />
+          </VBtn>
+        </template>
+      </VTextField>
+    </template>
+    <VBtn
+      class="position-absolute top-0 right-0 ma-4"
+      color="white"
+      icon="mdi-close"
+      variant="tonal"
+      @click="expanded = false"
+    />
+    <img :src="url" :alt="fileName" />
+  </VOverlay>
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
+import type { VTextField } from 'vuetify/components';
 
 interface Props {
   fileName: string;
@@ -72,7 +85,11 @@ interface Props {
   label?: string;
   icon?: string;
   dark?: boolean;
+  maxWidth?: string | number;
+  minWidth?: string | number;
   showPreview?: boolean;
+  variant?: VTextField['variant'];
+  density?: VTextField['density'];
 }
 
 withDefaults(defineProps<Props>(), {
@@ -81,7 +98,11 @@ withDefaults(defineProps<Props>(), {
   label: '',
   icon: 'mdi-file',
   dark: false,
+  maxWidth: '100%',
+  minWidth: '350',
   showPreview: false,
+  variant: 'outlined',
+  density: 'default',
 });
 
 const emit = defineEmits<{
@@ -93,10 +114,6 @@ const expanded = ref(false);
 </script>
 
 <style lang="scss" scoped>
-.file-name {
-  max-width: 15rem;
-}
-
 .v-overlay {
   transition: all 0.3s ease;
 
@@ -106,10 +123,7 @@ const expanded = ref(false);
 
   :deep(img) {
     max-width: 100%;
+    max-height: 100%;
   }
 }
-
-.v-label {
-  opacity: 0.65;
-}
 </style>
diff --git a/packages/core-components/src/components/FileInput/index.vue b/packages/core-components/src/components/FileInput/index.vue
index 6272c128f..cb76466c6 100644
--- a/packages/core-components/src/components/FileInput/index.vue
+++ b/packages/core-components/src/components/FileInput/index.vue
@@ -1,59 +1,33 @@
 <template>
-  <template v-if="useFieldInput">
-    <VTextField
-      v-if="!resolvedFileKey"
-      :density="density"
-      :label="resolvedLabel"
-      :placeholder="placeholder || 'Click to add...'"
-      :prepend-inner-icon="resolvedIcon"
-      :variant="variant"
-      append-inner-icon="mdi-upload"
-      model-value=""
-      readonly
-      @click="dialogOpen = true"
-    />
-    <FilePreview
-      v-else
-      :dark="dark"
-      :file-name="resolvedFileName"
-      :icon="resolvedIcon"
-      :label="resolvedLabel"
-      :is-loading="isLoadingPublicUrl"
-      :show-preview="isPreviewEnabled"
-      :url="previewUrl"
-      @delete="onClear"
-      @download="downloadFile(resolvedFileKey, resolvedFileName)"
-    />
-  </template>
-  <template v-else>
-    <VBtn
-      v-if="!resolvedFileKey"
-      :loading="uploading"
-      :prepend-icon="resolvedIcon"
-      color="primary-darken-2"
-      @click="dialogOpen = true"
-    >
-      {{ placeholder || emptyLabel }}
-    </VBtn>
-    <VBtn
-      v-else
-      :prepend-icon="resolvedIcon"
-      color="primary-darken-2"
-      @click="dialogOpen = true"
-    >
-      <span class="file-name text-truncate">
-        {{ resolvedFileName }}
-      </span>
-      <template #append>
-        <VIcon
-          class="ml-2 pa-2"
-          icon="mdi-trash-can-outline"
-          size="large"
-          @click.stop="onClear"
-        />
-      </template>
-    </VBtn>
-  </template>
+  <VTextField
+    v-if="!resolvedFileKey"
+    :density="density"
+    :label="resolvedLabel"
+    :max-width="maxWidth"
+    :min-width="minWidth"
+    :placeholder="placeholder || 'Click to add...'"
+    :prepend-inner-icon="resolvedIcon"
+    :variant="variant"
+    append-inner-icon="mdi-upload"
+    readonly
+    @click="dialogOpen = true"
+  />
+  <FilePreview
+    v-else
+    :density="density"
+    :dark="dark"
+    :file-name="resolvedFileName"
+    :icon="resolvedIcon"
+    :label="resolvedLabel"
+    :is-loading="isLoadingPublicUrl"
+    :min-width="minWidth"
+    :max-width="maxWidth"
+    :show-preview="isPreviewEnabled"
+    :url="previewUrl"
+    :variant="variant"
+    @delete="onClear"
+    @download="downloadFile(resolvedFileKey, resolvedFileName)"
+  />
   <PickerDialog
     v-model="dialogOpen"
     :accept="acceptedFileTypes"
@@ -88,8 +62,6 @@ interface Props {
   // Accepted extensions with dot prefix (e.g. ['.jpg', '.png']);
   // also drives icon/label auto-detection and library tab filtering
   allowedExtensions?: string[];
-  // Use field input + card rendering instead of default button mode
-  useFieldInput?: boolean;
   // Enable image thumbnail + overlay on the file card;
   // auto-enabled when extensions resolve to an image type
   showPreview?: boolean;
@@ -104,6 +76,10 @@ interface Props {
   density?: VTextField['density'];
   // Dark theme variant for the file preview card
   dark?: boolean;
+  // Minimum width of the input and preview field; defaults to 350px
+  minWidth?: string | number;
+  // Maximum width of the input and preview field; optional
+  maxWidth?: string | number;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -115,6 +91,8 @@ const props = withDefaults(defineProps<Props>(), {
   variant: 'outlined',
   density: 'default',
   dark: false,
+  maxWidth: '100%',
+  minWidth: '350',
 });
 
 const emit = defineEmits<{
@@ -124,7 +102,7 @@ const emit = defineEmits<{
 }>();
 
 const storageService = inject<any>('$storageService');
-const { upload, downloadFile, uploading } = useUpload(emit as any);
+const { upload, downloadFile } = useUpload(emit as any);
 
 const dialogOpen = ref(false);
 
@@ -152,12 +130,6 @@ const resolvedIcon = computed(
   () => props.icon || getAssetIcon(category.value),
 );
 
-const emptyLabel = computed(() => {
-  const cat = category.value;
-  if (cat) return `Choose ${getAssetLabel(cat).toLowerCase()}`;
-  return 'Choose file';
-});
-
 const isPreviewEnabled = computed(
   () => props.showPreview || category.value === AssetType.Image,
 );
@@ -202,9 +174,3 @@ const onClear = () => {
   emit('input', null);
 };
 </script>
-
-<style lang="scss" scoped>
-.file-name {
-  max-width: 10rem;
-}
-</style>
diff --git a/packages/core-components/src/components/QuestionElement.vue b/packages/core-components/src/components/QuestionElement.vue
index 5a99ac87f..ac9dc10ce 100644
--- a/packages/core-components/src/components/QuestionElement.vue
+++ b/packages/core-components/src/components/QuestionElement.vue
@@ -80,7 +80,11 @@
     <VExpandTransition>
       <div v-if="expanded">
         <slot></slot>
-        <VForm ref="form" class="content text-left pa-6" validate-on="submit">
+        <VForm
+          ref="form"
+          class="content text-left pa-6"
+          :validate-on="autosave ? 'input' : 'submit'"
+        >
           <component
             :is="componentName"
             v-bind="{
@@ -100,10 +104,13 @@
             @focus="emit('select', $event)"
             @link="emit('link', $event)"
             @save="save"
-            @update="Object.assign(editedElement.data, $event)"
+            @update="update"
           />
           <VFadeTransition>
-            <div v-if="!isDisabled && isDirty" class="d-flex justify-end">
+            <div
+              v-if="!isDisabled && isDirty && !autosave"
+              class="d-flex justify-end"
+            >
               <VBtn color="primary-darken-4" variant="text" @click="cancel">
                 Cancel
               </VBtn>
@@ -135,6 +142,7 @@ import type { PublishDiffChangeTypes } from '@tailor-cms/utils';
 import ElementGeneration from './ElementGeneration.vue';
 import PublishDiffChip from './PublishDiffChip.vue';
 import { useConfigStore } from '@/stores/config';
+import { useValidation } from '../composables/useValidation';
 
 const isLegacyQuestion = (type: string) => ceRegistry.isLegacyQuestion(type);
 
@@ -177,6 +185,7 @@ interface Props {
   collapsible?: boolean;
   isDirty?: boolean;
   expanded?: boolean;
+  autosave?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -192,6 +201,7 @@ const props = withDefaults(defineProps<Props>(), {
   collapsible: false,
   isDirty: false,
   expanded: true,
+  autosave: false,
 });
 
 const emit = defineEmits([
@@ -248,10 +258,20 @@ const save = async () => {
   return emit('save', editedElement.data);
 };
 
+const validate = async () => {
+  if (!form.value) return { valid: true };
+  return form.value.validate();
+};
+
 const cancel = () => {
   editedElement.data = initializeElement().data;
 };
 
+const update = (data: any) => {
+  Object.assign(editedElement.data, data);
+  if (props.autosave) emit('save', editedElement.data);
+};
+
 watch(
   () => props.element,
   () => {
@@ -259,6 +279,8 @@ watch(
     editedElement.data = initializeElement().data;
   },
 );
+
+useValidation(String(props.element.id), validate);
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/core-components/src/composables/useValidation.ts b/packages/core-components/src/composables/useValidation.ts
new file mode 100644
index 000000000..31ec8bbc7
--- /dev/null
+++ b/packages/core-components/src/composables/useValidation.ts
@@ -0,0 +1,38 @@
+import { inject, onScopeDispose, provide, ref } from 'vue';
+
+type ValidateFn = () => Promise<{ valid: boolean }>;
+
+interface ValidationRegistry {
+  register: (id: string, fn: ValidateFn) => void;
+  unregister: (id: string) => void;
+}
+
+const VALIDATION_KEY = '$validationRegistry';
+
+// Provider (parent) - like vee-validate's useForm
+export function useValidationProvider() {
+  const validators = ref(new Map<string, ValidateFn>());
+
+  const registry: ValidationRegistry = {
+    register: (id, fn) => validators.value.set(id, fn),
+    unregister: (id) => validators.value.delete(id),
+  };
+
+  provide(VALIDATION_KEY, registry);
+
+  const validate = async () => {
+    const results = await Promise.all(
+      [...validators.value.values()].map((fn) => fn()),
+    );
+    return { valid: results.every((r) => r.valid) };
+  };
+
+  return { validate };
+}
+
+export function useValidation(id: string, validateFn: ValidateFn) {
+  const registry = inject<ValidationRegistry | null>(VALIDATION_KEY, null);
+  if (!registry) return;
+  registry.register(id, validateFn);
+  onScopeDispose(() => registry.unregister(id));
+}
diff --git a/packages/core-components/src/index.ts b/packages/core-components/src/index.ts
index f4fc0b1ef..1251a15af 100644
--- a/packages/core-components/src/index.ts
+++ b/packages/core-components/src/index.ts
@@ -22,6 +22,7 @@ export { default as AiPrompt } from './components/AiPrompt.vue';
 export { default as AssessmentItem } from './components/AssessmentItem.vue';
 export { useLoader } from './composables/useLoader';
 export { useConfirmationDialog } from './composables/useConfirmationDialog';
+export { useValidation, useValidationProvider } from './composables/useValidation';
 export { ASSET_TYPE_COLOR, ASSET_TYPE_ICON, ASSET_TYPE_LABEL } from './config/asset';
 export { getAssetColor, getAssetIcon, getAssetLabel } from './utils/asset';
 export { formatFileSize } from './utils/format';
diff --git a/packages/core-extensions/content-containers/collection-item-server/package.json b/packages/core-extensions/content-containers/collection-item-server/package.json
new file mode 100644
index 000000000..9f6825b1d
--- /dev/null
+++ b/packages/core-extensions/content-containers/collection-item-server/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "@tailor-cms/tcc-collection-item-server",
+  "version": "0.0.1",
+  "description": "Tailor collection item content container server package",
+  "author": "Studion <info@gostudion.com>",
+  "type": "module",
+  "files": [
+    "src"
+  ],
+  "main": "./src/index.js",
+  "devDependencies": {
+    "@types/lodash-es": "^4.17.12"
+  },
+  "peerDependencies": {
+    "lodash-es": "*"
+  }
+}
diff --git a/packages/core-extensions/content-containers/collection-item-server/src/index.js b/packages/core-extensions/content-containers/collection-item-server/src/index.js
new file mode 100644
index 000000000..e6e94b3b2
--- /dev/null
+++ b/packages/core-extensions/content-containers/collection-item-server/src/index.js
@@ -0,0 +1,35 @@
+import { map } from 'lodash-es';
+
+const ATTRS = [
+  'id',
+  'uid',
+  'type',
+  'position',
+  'parentId',
+  'createdAt',
+  'updatedAt',
+];
+
+function fetch(parent, type) {
+  return parent
+    .getChildren({ attributes: ATTRS, where: { type } })
+    .map((it) => it.toJSON());
+}
+
+/**
+ * Resolve function to process static assets in collection item data
+ * @param {Object} container - The container with data
+ * @param {Function} resolveStatics - Resolves content elements and meta values
+ * @returns {Promise<Object>} Container with resolved assets
+ */
+async function resolve(container, resolveStatics) {
+  if (container.data) await Promise.all(map(container.data, resolveStatics));
+  return container;
+}
+
+export default {
+  templateId: 'COLLECTION_ITEM_CONTENT',
+  version: '1.0',
+  fetch,
+  resolve,
+};
diff --git a/packages/core-extensions/content-containers/collection-item/package.json b/packages/core-extensions/content-containers/collection-item/package.json
new file mode 100644
index 000000000..9196d9944
--- /dev/null
+++ b/packages/core-extensions/content-containers/collection-item/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "@tailor-cms/tcc-collection-item",
+  "version": "0.0.1",
+  "description": "Tailor collection item content container",
+  "author": "Studion <info@gostudion.com>",
+  "type": "module",
+  "files": [
+    "src"
+  ],
+  "main": "./src/index.js",
+  "devDependencies": {
+    "@tailor-cms/interfaces": "workspace:*",
+    "@types/lodash-es": "*"
+  },
+  "peerDependencies": {
+    "@tailor-cms/core-components": "workspace:*",
+    "@tailor-cms/utils": "workspace:*",
+    "lodash-es": "*",
+    "vee-validate": "4.14.7",
+    "vue": "^3.5.15",
+    "vuetify": "^3.8.6"
+  }
+}
diff --git a/packages/core-extensions/content-containers/collection-item/src/MetaInput.vue b/packages/core-extensions/content-containers/collection-item/src/MetaInput.vue
new file mode 100644
index 000000000..b87a2834d
--- /dev/null
+++ b/packages/core-extensions/content-containers/collection-item/src/MetaInput.vue
@@ -0,0 +1,59 @@
+<template>
+  <component
+    :is="componentName"
+    :class="{ required: get(meta, 'validate.required') }"
+    :error-messages="errorMessage"
+    :dark="false"
+    :meta="meta"
+    :readonly="isDisabled"
+    persistent-placeholder
+    @update="updateMeta"
+  />
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { get } from 'lodash-es';
+import { getMetaName } from '@tailor-cms/utils';
+import { useField } from 'vee-validate';
+
+import type { Metadata } from '@tailor-cms/interfaces/schema';
+
+interface Props {
+  meta: Metadata;
+  name?: string | null;
+  isDisabled?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  name: null,
+  isDisabled: false,
+});
+
+const emit = defineEmits(['update']);
+
+const type = computed(() => props.meta.type.toUpperCase());
+const componentName = computed(() => getMetaName(type.value));
+
+const { errorMessage, setValue } = useField(
+  () => props.meta.key,
+  props.meta.validate,
+  {
+    label: props.meta.key,
+    initialValue: props.meta.value,
+  },
+);
+
+const updateMeta = (_key: string, value: any) => {
+  setValue(value);
+  emit('update', value);
+};
+</script>
+
+<style lang="scss" scoped>
+:deep(.title) {
+  color: #808080;
+  font-size: 0.875rem !important;
+  font-weight: normal;
+}
+</style>
diff --git a/packages/core-extensions/content-containers/collection-item/src/index.js b/packages/core-extensions/content-containers/collection-item/src/index.js
new file mode 100644
index 000000000..8212cb9ba
--- /dev/null
+++ b/packages/core-extensions/content-containers/collection-item/src/index.js
@@ -0,0 +1,7 @@
+import Edit from './index.vue';
+
+export default {
+  templateId: 'COLLECTION_ITEM_CONTENT',
+  version: '1.0',
+  Edit,
+};
diff --git a/packages/core-extensions/content-containers/collection-item/src/index.vue b/packages/core-extensions/content-containers/collection-item/src/index.vue
new file mode 100644
index 000000000..aa55fbdf2
--- /dev/null
+++ b/packages/core-extensions/content-containers/collection-item/src/index.vue
@@ -0,0 +1,221 @@
+<template>
+  <VCard color="white" class="ccollection-item mb-5">
+    <VCardText class="text-left pa-8 pb-4">
+      <div v-for="input in config" :key="input.key">
+        <Field
+          v-if="input.isContentElement"
+          v-slot="{ errorMessage }"
+          :name="input.key"
+          :rules="required(input.type, input.label)"
+          :model-value="state[input.key].data"
+        >
+          <div
+            class="label ma-1 text-caption text-left"
+            :class="{ 'text-error': errorMessage }">
+            {{ input.label }}
+          </div>
+          <div
+            class="element-container pb-4"
+            :class="{ 'text-error': errorMessage }"
+          >
+            <ContainedContent
+              :element="state[input.key]"
+              :is-disabled="disabled"
+              auto-save
+              @save="(e) => (state[input.key] = { ...state[input.key], data: e })"
+            />
+            <div v-if="errorMessage" class="v-messages">
+              <div class="v-messages__message pl-4">
+                {{ errorMessage }}
+              </div>
+            </div>
+          </div>
+        </Field>
+        <MetaInput
+          v-else
+          :meta="{ ...input, value: state[input.key] }"
+          :name="input.key"
+          :is-disabled="disabled"
+          hide-details="auto"
+          class="pb-4"
+          @update="(e) => (state[input.key] = e)"
+        />
+      </div>
+    </VCardText>
+    <VCardActions v-if="isDirty" class="d-flex justify-center pt-0 pb-12">
+      <VBtn
+        class="px-15"
+        color="primary-darken-4"
+        variant="tonal"
+        @click="save"
+      >
+        Save {{ startCase(repository.schema) }}
+      </VBtn>
+    </VCardActions>
+  </VCard>
+</template>
+
+<script lang="ts" setup>
+import { computed, inject, ref } from 'vue';
+import type { Activity } from '@tailor-cms/interfaces/activity.js';
+import type { ContentElement } from '@tailor-cms/interfaces/content-element.js';
+import type { Repository } from '@tailor-cms/interfaces/repository.js';
+import { cloneDeep, isEqual, pick, startCase } from 'lodash-es';
+import { Field, useForm } from 'vee-validate';
+import { uuid } from '@tailor-cms/utils';
+
+import { ContainedContent, useValidationProvider } from '@tailor-cms/core-components';
+import MetaInput from './MetaInput.vue';
+import { required } from './isEmpty';
+
+const { validate } = useForm();
+const { validate: validateItems } = useValidationProvider();
+
+const ceRegistry = inject<any>('$ceRegistry');
+
+interface Props {
+  repository: Repository;
+  activities: Record<string, Activity>;
+  container: Activity;
+  elements: Record<string, ContentElement>;
+  config?: Record<number, any>;
+  disabled?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  disabled: false,
+  config: () => ({}),
+});
+
+const emit = defineEmits<{ (e: 'update:container', container: any): void }>();
+
+const initElement = (it: any, data: Record<PropertyKey, any> = {}) => {
+  const { type, isGradable } = it;
+  const { initState = () => ({}), isQuestion } = ceRegistry.get(type);
+  const element = {
+    id: uuid(),
+    type,
+    embedded: true,
+    data: { width: 12, ...initState(), ...data },
+  };
+  if (isQuestion) {
+    const id = uuid();
+    const question = {
+      id,
+      data: { content: '' },
+      type: 'TIPTAP_HTML',
+      position: 1,
+      embedded: true,
+    };
+    Object.assign(element.data, {
+      embeds: { [id]: question },
+      question: [id],
+      isGradable,
+    });
+    if (!isGradable) delete element.data.correct;
+  }
+  return element;
+};
+
+const initState = () =>
+  Object.values(props.config).reduce((acc: Record<string, any>, it) => {
+    console.log(it);
+    acc[it.key] =
+      props.container.data?.[it.key] ||
+      (it.isContentElement ? initElement(it) : it.defaultValue || '');
+    return acc;
+  }, {});
+
+const initialState = ref(initState());
+const state = ref(cloneDeep(initialState.value));
+
+const isDirty = computed(() => !isEqual(state.value, initialState.value));
+
+const save = async () => {
+  const [formResult, contentResult] = await Promise.all([
+    validate(),
+    validateItems(),
+  ]);
+  if (!formResult.valid || !contentResult.valid) return;
+  emit('update:container', {
+    ...pick(props.container, ['id', 'repositoryId']),
+    data: state.value,
+  });
+  initialState.value = cloneDeep(state.value);
+};
+</script>
+
+<style lang="scss" scoped>
+.element-container {
+  position: relative;
+}
+
+.label {
+  opacity: 0.65;
+
+  &.text-error {
+    opacity: 1;
+  }
+}
+
+.element-container > :deep(.contained-content) {
+  // First level elements cannot be dragged
+  > .drag-handle {
+    display: none;
+  }
+
+  // First level elements cannot be deleted
+  > .content-element > .element-actions {
+    display: none;
+  }
+
+  > .content-element {
+    border: none;
+    position: relative;
+    border-radius: 4px;
+
+    &.frame {
+      padding: 1rem;
+
+      .tiptap {
+        padding: 0;
+      }
+    }
+
+    &::after {
+      background: none;
+      display: block;
+      content: '';
+      position: absolute;
+      height: 100%;
+      left: 0;
+      top: 0;
+      width: 100%;
+      border: 1px solid currentColor;
+      opacity: 0.38;
+      pointer-events: none;
+      border-radius: inherit;
+      transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
+    }
+
+    &.focused::after {
+      opacity: 1;
+      border-width: 2px;
+    }
+
+    &:hover::after {
+      opacity: 0.87;
+    }
+  }
+}
+
+.element-container.text-error {
+  > :deep(.contained-content) > .content-element::after {
+    opacity: 1;
+  }
+
+  > .v-messages {
+    opacity: 1;
+  }
+}
+</style>
diff --git a/packages/core-extensions/content-containers/collection-item/src/isEmpty.ts b/packages/core-extensions/content-containers/collection-item/src/isEmpty.ts
new file mode 100644
index 000000000..fdf18f2b8
--- /dev/null
+++ b/packages/core-extensions/content-containers/collection-item/src/isEmpty.ts
@@ -0,0 +1,16 @@
+import { size } from 'lodash-es';
+
+type ElementData = Record<string, any>;
+
+// TODO: get isEmpty from CEK manifest
+export const isEmpty: Record<string, (data: ElementData) => boolean> = {
+  TIPTAP_HTML: ({ content }: ElementData) => !content || content === '<p></p>',
+  IMAGE: ({ url }: ElementData) => !url,
+  VIDEO: ({ url }: ElementData) => !url,
+  MULTIPLE_CHOICE: ({ question }: ElementData) => !question || !size(question),
+};
+
+export const required = (type: string, label: string) => (data: unknown) => {
+  if (!isEmpty[type]) return true;
+  return isEmpty[type](data as ElementData) ? `${label} is a required field` : true;
+};
diff --git a/packages/extension-installer/src/ExtensionRegistry.js b/packages/extension-installer/src/ExtensionRegistry.js
index c62103dcf..0728cfb64 100644
--- a/packages/extension-installer/src/ExtensionRegistry.js
+++ b/packages/extension-installer/src/ExtensionRegistry.js
@@ -65,10 +65,14 @@ export class ExtensionRegistry {
     return path.join(this.location, 'client.js');
   }
 
-  get interfaceExportsLocation() {
+  get typeObjectLocation() {
     return path.join(this.location, 'types.js');
   }
 
+  get typeEnumLocation() {
+    return path.join(this.location, 'enum.ts');
+  }
+
   get serverExportsLocation() {
     return path.join(this.location, 'server.js');
   }
@@ -158,19 +162,21 @@ export class ExtensionRegistry {
     const {
       clientExportsLocation,
       clientPackages,
-      interfaceExportsLocation,
+      typeObjectLocation,
+      typeEnumLocation,
       serverExportsLocation,
       serverPackages,
     } = this;
     shell.echo('Generating export modules...');
     fs.writeFileSync(clientExportsLocation, getExportModule(clientPackages));
-    const interfaceModuleExport = getInterfaceModule(
+    const typeExport = generateTypeExport(
       this.location,
       this.elements,
       this.extensionType,
       this.serverExportPath,
     );
-    fs.writeFileSync(interfaceExportsLocation, interfaceModuleExport);
+    fs.writeFileSync(typeObjectLocation, typeExport.js);
+    fs.writeFileSync(typeEnumLocation, typeExport.ts);
     if (serverPackages.length) {
       fs.writeFileSync(serverExportsLocation, getExportModule(serverPackages));
     }
@@ -199,17 +205,25 @@ export const elements = [
 `);
 
 // prettier-ignore
-const exportInterfaceTemplate = template(
+const exportTypeTemplate = template(
   `
   export const <%- enumName %> = {
   <% _.forEach(types, function(val, key) {%><%- key %>: '<%- val %>',
   <%});%>
   `);
 
+// prettier-ignore
+const exportEnumTemplate = template(
+  `
+  export enum <%- enumName %> {
+  <% _.forEach(types, function(val, key) {%><%- key %> = '<%- val %>',
+  <%});%>
+  `);
+
 const getExportModule = (entries) =>
   exportModuleTemplate({ entries }).trim().concat('\n];\n');
 
-const getInterfaceModule = (dir, packages, extensionType, serverExportPath) => {
+const generateTypeExport = (dir, packages, extensionType, serverExportPath) => {
   const isBuilt = extensionType === 'content element';
   const defaultPath = isBuilt ? 'dist/index.cjs' : 'src/index.js';
   const targetPath = serverExportPath || defaultPath;
@@ -223,7 +237,10 @@ const getInterfaceModule = (dir, packages, extensionType, serverExportPath) => {
     return acc;
   }, {});
   const enumName = `${toPascalCase(extensionType)}Type`;
-  return exportInterfaceTemplate({ enumName, types }).trim().concat('\n};\n');
+  return {
+    js: exportTypeTemplate({ enumName, types }).trim().concat('\n};\n'),
+    ts: exportEnumTemplate({ enumName, types }).trim().concat('\n};\n'),
+  };
 };
 
 const parseType = (path) => {
diff --git a/packages/tailor-interfaces/schema.ts b/packages/tailor-interfaces/schema.ts
index 4552e7158..ef1b7c710 100644
--- a/packages/tailor-interfaces/schema.ts
+++ b/packages/tailor-interfaces/schema.ts
@@ -3,6 +3,7 @@ import type { ContentElement } from './content-element';
 import type { Repository } from './repository';
 
 export type ElementManifest = Record<string, any>;
+
 export interface ElementRegistry {
   all: ElementManifest[];
   questions: ElementManifest[];
@@ -174,6 +175,7 @@ export interface Schema {
   defaultMeta?: Record<string, any>;
   structure: ActivityConfig[];
   contentContainers: ContentContainerConfig[];
+  collection?: boolean;
   elementMeta?: ElementMetaConfig[];
   i18n?: I18nConfig;
   // @deprecated use elementMeta instead
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 45627b92f..897a208bc 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -542,6 +542,9 @@ importers:
       '@types/promise-queue':
         specifier: ^2.2.3
         version: 2.2.3
+      '@types/sortablejs':
+        specifier: ^1.15.9
+        version: 1.15.9
       autoprefixer:
         specifier: ^10.4.21
         version: 10.4.21(postcss@8.5.6)
@@ -563,6 +566,9 @@ importers:
       '@tailor-cms/config-parser':
         specifier: workspace:^
         version: link:../packages/tailor-config-parser
+      lodash-es:
+        specifier: ^4.17.21
+        version: 4.17.21
     devDependencies:
       '@tailor-cms/content-container-collection':
         specifier: workspace:^
@@ -594,6 +600,12 @@ importers:
       '@tailor-cms/tcc-assessment-pool-server':
         specifier: workspace:^
         version: link:../../packages/core-extensions/content-containers/assessment-pool-server
+      '@tailor-cms/tcc-collection-item':
+        specifier: workspace:^
+        version: link:../../packages/core-extensions/content-containers/collection-item
+      '@tailor-cms/tcc-collection-item-server':
+        specifier: workspace:^
+        version: link:../../packages/core-extensions/content-containers/collection-item-server
       '@tailor-cms/tcc-exam-edit':
         specifier: workspace:^
         version: link:../../packages/core-extensions/content-containers/exam-edit
@@ -954,6 +966,44 @@ importers:
         specifier: ^4.17.12
         version: 4.17.12
 
+  packages/core-extensions/content-containers/collection-item:
+    dependencies:
+      '@tailor-cms/core-components':
+        specifier: workspace:*
+        version: link:../../../core-components
+      '@tailor-cms/utils':
+        specifier: workspace:*
+        version: link:../../../utils
+      lodash-es:
+        specifier: '*'
+        version: 4.17.21
+      vee-validate:
+        specifier: 4.14.7
+        version: 4.14.7(vue@3.5.22(typescript@5.9.3))
+      vue:
+        specifier: ^3.5.15
+        version: 3.5.22(typescript@5.9.3)
+      vuetify:
+        specifier: ^3.8.6
+        version: 3.10.7(typescript@5.9.3)(vue@3.5.22(typescript@5.9.3))
+    devDependencies:
+      '@tailor-cms/interfaces':
+        specifier: workspace:*
+        version: link:../../../tailor-interfaces
+      '@types/lodash-es':
+        specifier: '*'
+        version: 4.17.12
+
+  packages/core-extensions/content-containers/collection-item-server:
+    dependencies:
+      lodash-es:
+        specifier: '*'
+        version: 4.17.21
+    devDependencies:
+      '@types/lodash-es':
+        specifier: ^4.17.12
+        version: 4.17.12
+
   packages/core-extensions/content-containers/exam-edit:
     dependencies:
       '@tailor-cms/content-element-collection':
diff --git a/tests/pom/common/FileInput.ts b/tests/pom/common/FileInput.ts
index 08a6d81e1..5b6156e93 100644
--- a/tests/pom/common/FileInput.ts
+++ b/tests/pom/common/FileInput.ts
@@ -14,10 +14,11 @@ export class FileInput {
     this.picker = new FileInputPicker(page);
   }
 
-  // Preview (filled state)
+  // Preview (filled state) — FilePreview renders a VTextField whose
+  // model-value is the file name; locate it via the native input value.
   getPreview(fileName: string): Locator {
-    return this.el.locator('.file-preview', {
-      has: this.page.locator('.file-name', { hasText: fileName }),
+    return this.el.locator('.v-text-field', {
+      has: this.page.locator(`input[value="${fileName}"]`),
     });
   }