diff --git a/.gitignore b/.gitignore
index 34d871359..5095a345b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -68,10 +68,12 @@ bundle-report.*.html
 /webroot/*.hot-update.*
 /webroot/vendors/async/*.hot-update.*
 /webroot/css/admin-index*
+/webroot/css/admin-statistics*
 /webroot/css/app*
 /webroot/css/category*
 /webroot/css/date-range*
 /webroot/css/date-input*
+/webroot/css/edit-children-params*
 /webroot/css/email-input*
 /webroot/css/flash-message*
 /webroot/css/folder-picker*
@@ -82,6 +84,7 @@ bundle-report.*.html
 /webroot/css/menu*
 /webroot/css/object-categories*
 /webroot/css/object-nav*
+/webroot/css/object-captions*
 /webroot/css/object-property*
 /webroot/css/objects-history*
 /webroot/css/permission*
diff --git a/config/app_local.example.php b/config/app_local.example.php
index 2f2cc1588..2c79ee2a8 100644
--- a/config/app_local.example.php
+++ b/config/app_local.example.php
@@ -808,4 +808,16 @@
     //         'Captions',
     //     ],
     // ],
+
+    /**
+     * Configuration for "Captions".
+     * - formats.allowed: allowed formats for captions
+     * - formats.default: default format for captions
+     */
+    // 'Captions' => [
+    //     'formats' => [
+    //         'allowed' => ['srt', 'sub', 'webvtt'],
+    //         'default' => 'webvtt',
+    //     ],
+    // ],
 ];
diff --git a/locales/default.pot b/locales/default.pot
index 87976a2e3..d9fee31b3 100644
--- a/locales/default.pot
+++ b/locales/default.pot
@@ -1,7 +1,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: BEdita 4 \n"
-"POT-Creation-Date: 2024-10-24 09:51:55 \n"
+"POT-Creation-Date: 2024-11-22 13:38:50 \n"
 "MIME-Version: 1.0 \n"
 "Content-Transfer-Encoding: 8bit \n"
 "Language-Team: BEdita I18N & I10N Team \n"
@@ -115,6 +115,9 @@ msgstr ""
 msgid "Cannot produce a thumbnail for this file"
 msgstr ""
 
+msgid "Captions"
+msgstr ""
+
 msgid "Categories"
 msgstr ""
 
@@ -1513,7 +1516,7 @@ msgstr ""
 msgid "Related items order will be changed."
 msgstr ""
 
-msgid "Continue?"
+msgid "OK"
 msgstr ""
 
 msgid "Hide"
@@ -1629,6 +1632,30 @@ msgstr ""
 msgid "Search on categories"
 msgstr ""
 
+msgid "Caption"
+msgstr ""
+
+msgid "Format"
+msgstr ""
+
+msgid "New caption"
+msgstr ""
+
+msgid "New"
+msgstr ""
+
+msgid "No captions"
+msgstr ""
+
+msgid "Not valid"
+msgstr ""
+
+msgid "Parameters"
+msgstr ""
+
+msgid "Valid"
+msgstr ""
+
 msgid "Password"
 msgstr ""
 
diff --git a/locales/en_US/default.po b/locales/en_US/default.po
index cb0d47571..fab580bec 100644
--- a/locales/en_US/default.po
+++ b/locales/en_US/default.po
@@ -1,7 +1,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: BEdita Manager \n"
-"POT-Creation-Date: 2024-10-24 09:51:55 \n"
+"POT-Creation-Date: 2024-11-22 13:38:50 \n"
 "PO-Revision-Date:  \n"
 "Last-Translator:  \n"
 "Language-Team: BEdita I18N & I10N Team \n"
@@ -118,6 +118,9 @@ msgstr ""
 msgid "Cannot produce a thumbnail for this file"
 msgstr ""
 
+msgid "Captions"
+msgstr ""
+
 msgid "Categories"
 msgstr ""
 
@@ -1516,7 +1519,7 @@ msgstr ""
 msgid "Related items order will be changed."
 msgstr ""
 
-msgid "Continue?"
+msgid "OK"
 msgstr ""
 
 msgid "Hide"
@@ -1632,6 +1635,30 @@ msgstr ""
 msgid "Search on categories"
 msgstr ""
 
+msgid "Caption"
+msgstr ""
+
+msgid "Format"
+msgstr ""
+
+msgid "New caption"
+msgstr ""
+
+msgid "New"
+msgstr ""
+
+msgid "No captions"
+msgstr ""
+
+msgid "Not valid"
+msgstr ""
+
+msgid "Parameters"
+msgstr ""
+
+msgid "Valid"
+msgstr ""
+
 msgid "Password"
 msgstr ""
 
diff --git a/locales/it_IT/default.po b/locales/it_IT/default.po
index 7600569a8..439ad9684 100644
--- a/locales/it_IT/default.po
+++ b/locales/it_IT/default.po
@@ -1,7 +1,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: BEdita Manager \n"
-"POT-Creation-Date: 2024-10-24 09:51:55 \n"
+"POT-Creation-Date: 2024-11-22 13:38:50 \n"
 "PO-Revision-Date:  \n"
 "Last-Translator:  \n"
 "Language-Team: BEdita I18N & I10N Team \n"
@@ -120,6 +120,9 @@ msgstr "Impossibile creare oggetti astratti o oggetti senza schema"
 msgid "Cannot produce a thumbnail for this file"
 msgstr "Impossibile produrre una miniatura per questo file"
 
+msgid "Captions"
+msgstr "Sottotitoli"
+
 msgid "Categories"
 msgstr "Categorie"
 
@@ -1533,8 +1536,8 @@ msgstr "Ordina per"
 msgid "Related items order will be changed."
 msgstr "L'ordine degli elementi correlati verrà modificato."
 
-msgid "Continue?"
-msgstr "Vuoi continuare?"
+msgid "OK"
+msgstr ""
 
 msgid "Hide"
 msgstr "Nascondi"
@@ -1649,6 +1652,30 @@ msgstr "Errore nella cancellazione della proprietà"
 msgid "Search on categories"
 msgstr "Cerca tra le categorie"
 
+msgid "Caption"
+msgstr "Sottotitolo"
+
+msgid "Format"
+msgstr "Formato"
+
+msgid "New caption"
+msgstr "Nuovo sottotitolo"
+
+msgid "New"
+msgstr "Nuovo"
+
+msgid "No captions"
+msgstr "Nessun sottotitolo"
+
+msgid "Not valid"
+msgstr "Non valido"
+
+msgid "Parameters"
+msgstr "Parametri"
+
+msgid "Valid"
+msgstr "Valido"
+
 msgid "Password"
 msgstr "Password"
 
diff --git a/package.json b/package.json
index 93ffbb707..f4b928b88 100644
--- a/package.json
+++ b/package.json
@@ -47,7 +47,8 @@
     "vue": "^2.5.16",
     "vue-chartjs": "^5.3.1",
     "vuejs-title": "^1.0.16",
-    "webpack-manifest-plugin": "^5.0.0"
+    "webpack-manifest-plugin": "^5.0.0",
+    "webvtt-parser": "^2.2.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.12",
@@ -74,4 +75,4 @@
     "webpack-cli": "^4.9.0",
     "webpack-watch-files-plugin": "^1.2.0"
   }
-}
\ No newline at end of file
+}
diff --git a/resources/js/app/app.js b/resources/js/app/app.js
index dd4203c86..2d8446bee 100644
--- a/resources/js/app/app.js
+++ b/resources/js/app/app.js
@@ -87,6 +87,7 @@ const _vueInstance = new Vue({
         UserAccesses:() => import(/* webpackChunkName: "user-accesses" */'app/components/user-accesses/user-accesses'),
         LanguageSelector:() => import(/* webpackChunkName: "language-selector" */'app/components/language-selector/language-selector'),
         ClipboardItem: () => import(/* webpackChunkName: "clipboard-item" */'app/components/clipboard-item/clipboard-item'),
+        ObjectCaptions: () => import(/* webpackChunkName: "object-captions" */'app/components/object-captions/object-captions'),
         ObjectCategories: () => import(/* webpackChunkName: "object-categories" */'app/components/object-categories/object-categories'),
         PlaceholderList: () => import(/* webpackChunkName: "placeholder-list" */'app/components/placeholder-list/placeholder-list'),
         BarChart:() => import(/* webpackChunkName: "bar-chart" */'app/components/charts/bar-chart'),
diff --git a/resources/js/app/components/menu.js b/resources/js/app/components/menu.js
index 9834bd846..e80630f92 100644
--- a/resources/js/app/components/menu.js
+++ b/resources/js/app/components/menu.js
@@ -29,7 +29,9 @@ export default {
             let key = e.which || e.keyCode || 0;
             switch (key) {
                 case 13:
-                    this.go();
+                    if (!e.shiftKey) {
+                        this.go();
+                    }
                     break;
                 case 27:
                     this.popUpAction = '';
diff --git a/resources/js/app/components/object-captions/object-captions.vue b/resources/js/app/components/object-captions/object-captions.vue
new file mode 100644
index 000000000..683958101
--- /dev/null
+++ b/resources/js/app/components/object-captions/object-captions.vue
@@ -0,0 +1,722 @@
+<template>
+    <div class="object-captions">
+        <div
+            class="captions-none"
+            v-if="captions.length === 0"
+        >
+            {{ msgNoCaptions }}
+        </div>
+        <div
+            class="captions-container"
+            v-if="captions.length > 0"
+        >
+            <div class="column">
+                {{ msgCaption }}
+            </div>
+            <div class="column">
+                {{ msgTitle }}
+            </div>
+            <div class="column">
+                {{ msgLang }}
+            </div>
+            <div class="column">
+                {{ msgStatus }}
+            </div>
+            <div class="column" />
+            <div class="column" />
+            <div class="column" />
+            <div class="column" />
+        </div>
+        <div
+            v-for="(item, index) in captions"
+            :key="index"
+            :class="{'captions-container': item.mode == 'view', 'on': item.status === 'on', 'draft': item.status === 'draft', 'off': item.status === 'off', dragging: draggingIndex === index}"
+            draggable="true"
+            @dragstart="handleDragStart(index)"
+            @dragend="draggingIndex = null"
+            @dragover.prevent
+            @dragenter="handleDragEnter(index)"
+            @dragleave.prevent=""
+            @drop="handleDrop(index)"
+        >
+            <template v-if="item.mode == 'view'">
+                <div>
+                    <app-icon icon="carbon:closed-caption" />
+                    <span class="ml-05">{{ truncate(item.caption_text, 100) }}</span>
+                </div>
+                <div><span>{{ item.label }}</span></div>
+                <div><span>{{ languages[item.lang] }}</span></div>
+                <div><span>{{ item.status }}</span></div>
+                <div class="sort">
+                    <app-icon icon="carbon:chevron-sort" />
+                </div>
+                <div>
+                    <button
+                        class="button button-outlined"
+                        @click.prevent="item.mode = 'edit'"
+                        v-if="!readonly && item.mode == 'view'"
+                    >
+                        <app-icon icon="carbon:edit" />
+                        <span class="ml-05">{{ msgEdit }}</span>
+                    </button>
+                </div>
+                <div>
+                    <button
+                        class="button button-outlined"
+                        @click.prevent="remove(item)"
+                        v-if="!readonly"
+                    >
+                        <app-icon icon="carbon:trash-can" />
+                        <span class="ml-05">{{ msgRemove }}</span>
+                    </button>
+                </div>
+                <div>
+                    <span
+                        class="ribbon has-background-module-media"
+                        v-if="item.nuid && captionsValueStart !== captionsValue"
+                    >
+                        {{ msgNew }}
+                    </span>
+                </div>
+            </template>
+            <template v-if="item.mode == 'edit'">
+                <section class="fieldset caption-form-container mt-15">
+                    <div class="tab-container">
+                        <div class="input text">
+                            <label for="captionTitle">{{ msgTitle }}</label>
+                            <input
+                                id="captionTitle"
+                                type="text"
+                                v-model="item.label"
+                            >
+                        </div>
+                        <div class="input select">
+                            <label for="captionLang">{{ msgLang }}</label>
+                            <select
+                                id="captionLang"
+                                v-model="item.lang"
+                            >
+                                <option
+                                    v-for="lang in availableLangs(item)"
+                                    :key="lang.value"
+                                    :value="lang.value"
+                                >
+                                    {{ lang.label }}
+                                </option>
+                            </select>
+                        </div>
+                        <div class="input select">
+                            <label for="captionStatus">{{ msgStatus }}</label>
+                            <select
+                                id="captionStatus"
+                                v-model="item.status"
+                            >
+                                <option
+                                    v-for="status in statuses"
+                                    :key="status.value"
+                                    :value="status.value"
+                                >
+                                    {{ status.label }}
+                                </option>
+                            </select>
+                        </div>
+                        <div class="input select">
+                            <label for="captionFormat">{{ msgFormat }}</label>
+                            <select
+                                id="captionFormat"
+                                v-model="item.format"
+                            >
+                                <option
+                                    v-for="format in formats"
+                                    :key="format"
+                                    :value="format"
+                                >
+                                    {{ format }}
+                                </option>
+                            </select>
+                        </div>
+                        <div class="input textarea">
+                            <label for="captionText">{{ msgCaption }}</label>
+                            <textarea
+                                id="captionText"
+                                rows="10"
+                                v-model="item.caption_text"
+                                @input="validate(item)"
+                            />
+                            <div
+                                class="mt-05"
+                                v-if="item?.errors"
+                            >
+                                <div v-if="item?.errors.length === 0">
+                                    <app-icon
+                                        icon="carbon:checkmark"
+                                        color="green"
+                                    />
+                                    <span class="ml-05">{{ msgValid }}</span>
+                                </div>
+                                <div v-if="item?.errors.length > 0">
+                                    <app-icon
+                                        icon="carbon:error"
+                                        color="red"
+                                    />
+                                    <span class="ml-05">{{ msgNotValid }}</span>
+                                </div>
+                                <ol class="validate-results">
+                                    <li
+                                        v-for="error in item.errors"
+                                        :key="error.line"
+                                    >
+                                        Line {{ error.line }}: {{ error.message }}
+                                    </li>
+                                </ol>
+                            </div>
+                        </div>
+                        <div>
+                            <button
+                                class="button button-secondary is-expanded"
+                                :disabled="captionSaveDisabled(item)"
+                                @click.prevent="item.mode = 'view'"
+                                v-if="!readonly && item.mode == 'edit'"
+                            >
+                                <app-icon icon="carbon:checkmark" />
+                                <span class="ml-05">{{ msgOk }}</span>
+                            </button>
+                        </div>
+                        <div>
+                            <button
+                                class="button button-secondary is-expanded"
+                                @click.prevent="undoChanges(item)"
+                            >
+                                <app-icon icon="carbon:reset" />
+                                <span class="ml-05">{{ msgCancel }}</span>
+                            </button>
+                        </div>
+                    </div>
+                </section>
+            </template>
+        </div>
+        <template v-if="viewMode == 'view'">
+            <div
+                class="mt-05"
+                v-if="!readonly"
+            >
+                <div>
+                    <button
+                        class="button button-outlined"
+                        @click.prevent="viewMode='new'"
+                        v-if="availableLangs().length > 0"
+                    >
+                        <app-icon icon="carbon:edit" />
+                        <span class="ml-05">{{ msgNewCaption }}</span>
+                    </button>
+                </div>
+            </div>
+        </template>
+        <template v-if="viewMode == 'new'">
+            <section class="fieldset caption-form-container mt-15">
+                <div class="tab-container">
+                    <div class="input text">
+                        <label for="newCaptionTitle">{{ msgTitle }}</label>
+                        <input
+                            id="newCaptionTitle"
+                            type="text"
+                            v-model="newItem.label"
+                        >
+                    </div>
+                    <div class="input select">
+                        <label for="newCaptionLang">{{ msgLang }}</label>
+                        <select
+                            id="newCaptionLang"
+                            v-model="newItem.lang"
+                        >
+                            <option
+                                v-for="lang in availableLangs()"
+                                :key="lang.value"
+                                :value="lang.value"
+                            >
+                                {{ lang.label }}
+                            </option>
+                        </select>
+                    </div>
+                    <div class="input select">
+                        <label for="newCaptionStatus">{{ msgStatus }}</label>
+                        <select
+                            id="newCaptionStatus"
+                            v-model="newItem.status"
+                        >
+                            <option
+                                v-for="status in statuses"
+                                :key="status.value"
+                                :value="status.value"
+                            >
+                                {{ status.label }}
+                            </option>
+                        </select>
+                    </div>
+                    <div class="input select">
+                        <label for="newCaptionFormat">{{ msgFormat }}</label>
+                        <select
+                            id="newCaptionFormat"
+                            v-model="newItem.format"
+                        >
+                            <option
+                                v-for="format in formats"
+                                :key="format"
+                                :value="format"
+                            >
+                                {{ format }}
+                            </option>
+                        </select>
+                    </div>
+                    <div class="input textarea">
+                        <label for="newCaptionText">{{ msgCaption }}</label>
+                        <textarea
+                            id="newCaptionText"
+                            rows="10"
+                            v-model="newItem.caption_text"
+                            @input="validate(newItem)"
+                        />
+                        <div
+                            class="mt-05"
+                            v-if="newItem?.errors"
+                        >
+                            <div v-if="newItem?.errors.length === 0">
+                                <app-icon
+                                    icon="carbon:checkmark"
+                                    color="green"
+                                />
+                                <span class="ml-05">{{ msgValid }}</span>
+                            </div>
+                            <div v-if="newItem?.errors.length > 0">
+                                <app-icon
+                                    icon="carbon:error"
+                                    color="red"
+                                />
+                                <span class="ml-05">{{ msgNotValid }}</span>
+                            </div>
+                            <ol class="validate-results">
+                                <li
+                                    v-for="error in newItem.errors"
+                                    :key="error.line"
+                                >
+                                    Line {{ error.line }}: {{ error.message }}
+                                </li>
+                            </ol>
+                        </div>
+                    </div>
+                    <div>
+                        <button
+                            class="button button-secondary is-expanded"
+                            :disabled="captionSaveDisabled(newItem)"
+                            @click.prevent="add"
+                        >
+                            <app-icon icon="carbon:add" />
+                            <span class="ml-05">{{ msgAdd }}</span>
+                        </button>
+                    </div>
+                    <div>
+                        <button
+                            class="button button-secondary is-expanded"
+                            @click.prevent="viewMode='view'"
+                        >
+                            <app-icon icon="carbon:reset" />
+                            <span class="ml-05">{{ msgCancel }}</span>
+                        </button>
+                    </div>
+                </div>
+            </section>
+        </template>
+
+        <input
+            type="hidden"
+            name="captions"
+            :value="captionsValue"
+        >
+
+        <div
+            class="mt-1"
+            v-if="!readonly"
+        >
+            <button
+                class="button button-primary"
+                :class="{'is-loading-spinner': loading}"
+                :disabled="captionsValueStart === captionsValue && noErrors"
+                @click.prevent="save"
+            >
+                <app-icon icon="carbon:save" />
+                <span class="ml-05">{{ msgSave }}</span>
+            </button>
+
+            <button
+                class="button button-primary"
+                :disabled="captionsValueStart === captionsValue"
+                @click.prevent="undoAllChanges()"
+            >
+                <app-icon icon="carbon:reset" />
+                <span class="ml-05">{{ msgCancel }}</span>
+            </button>
+        </div>
+    </div>
+</template>
+<script>
+import { t } from 'ttag';
+import { WebVTTParser } from 'webvtt-parser';
+
+export default {
+    name: 'ObjectCaptions',
+
+    inject: ['getCSFRToken'],
+
+    props: {
+        objectId: {
+            type: String,
+            required: true,
+        },
+        objectType: {
+            type: String,
+            required: true,
+        },
+        config: {
+            type: Object,
+            default: () => {},
+        },
+        items: {
+            type: Array,
+            default: () => [],
+        },
+        languages: {
+            type: Object,
+            default: () => {},
+        },
+        readonly: {
+            type: Boolean,
+            default: false,
+        },
+    },
+
+    data() {
+        return {
+            captions: [],
+            captionsValueStart: '',
+            draggingIndex: null,
+            formats: [],
+            isDraggable: false,
+            langs: [],
+            loading: false,
+            msgAdd: t`Add`,
+            msgCancel: t`Cancel`,
+            msgCaption: t`Caption`,
+            msgEdit: t`Edit`,
+            msgFormat: t`Format`,
+            msgLang: t`Language`,
+            msgNewCaption: t`New caption`,
+            msgNew: t`New`,
+            msgNoCaptions: t`No captions`,
+            msgNotValid: t`Not valid`,
+            msgOk: t`Ok`,
+            msgParams: t`Parameters`,
+            msgRemove: t`Remove`,
+            msgSave: t`Save`,
+            msgStatus: t`Status`,
+            msgTitle: t`Title`,
+            msgValid: t`Valid`,
+            newItem: {},
+            originalCaptions: [],
+            statuses: [
+                { value: 'on', label: 'on' },
+                { value: 'draft', label: 'draft' },
+                { value: 'off', label: 'off' },
+            ],
+            viewMode: 'view',
+            webvttParser: null,
+        };
+    },
+
+    computed: {
+        captionsValue() {
+            let val = [];
+            for (const item of this.captions) {
+                val.push({
+                    status: item.status,
+                    label: item.label,
+                    format: item.format,
+                    lang: item.lang,
+                    caption_text: item.caption_text,
+                    params: item.params,
+                });
+            }
+
+            return JSON.stringify(val);
+        },
+        noErrors() {
+            for (const item of this.captions) {
+                if (item.errors && item.errors.length > 0) {
+                    return false;
+                }
+            }
+            return true;
+        },
+    },
+
+    mounted() {
+        this.$nextTick(() => {
+            this.reset();
+        });
+    },
+
+    methods: {
+        add() {
+            const item = {...this.newItem};
+            item.mode = 'view';
+            item.uid = item.nuid;
+            this.captions.push(item);
+            this.newItem = {
+                nuid: this.uid(),
+                status: 'draft',
+                label: null,
+                format: this.config?.formats?.default || 'webvtt',
+                lang: 'it',
+                caption_text: null,
+                params: null,
+                mode: 'view',
+            };
+            this.viewMode = 'view';
+        },
+        availableLangs(caption) {
+            if (caption) {
+                const available = this.langs.filter((lang) => {
+                    return !this.captions.some((item) => item.lang === lang.value && item.format === caption.format);
+                });
+                available.push(this.langs.find((lang) => lang.value === caption.lang));
+
+                return available;
+            }
+            return this.langs.filter((lang) => {
+                return !this.captions.some((item) => item.lang === lang.value && item.format === this.newItem.format);
+            });
+        },
+        captionSaveDisabled(item) {
+            if (item?.caption_text === null || item?.caption_text?.length === 0) {
+                return true;
+            }
+
+            return item.errors && item.errors.length > 0;
+        },
+        handleDragStart(index) {
+            setTimeout(() => {
+                this.draggingIndex = index;
+            }, 0)
+        },
+        handleDrop(index) {
+            if (this.draggingIndex === null || this.draggingIndex > this.captions.length) return;
+            const draggedItem = this.captions[this.draggingIndex];
+            this.captions.splice(this.draggingIndex,1);
+            this.captions.splice(index,0,draggedItem);
+        },
+        handleDragEnter(index) {
+            if (this.draggingIndex === null || this.draggingIndex === index) return;
+            this.swapItems(this.draggingIndex, index);
+            this.draggingIndex = index;
+        },
+        remove(item) {
+            this.captions.splice(this.captions.indexOf(item), 1);
+        },
+        reset(newItems) {
+            this.formats = this.config.formats.allowed || ['webvtt'];
+            this.langs = Object.keys(this.languages).map((key) => {
+                return {
+                    value: key,
+                    label: this.languages[key],
+                };
+            });
+            const items = newItems || this.items;
+            this.captions = [];
+            for (let item of items) {
+                const caption = {
+                    uid: this.uid(),
+                    status: item.status,
+                    label: item.label,
+                    format: item.format,
+                    lang: item.lang,
+                    caption_text: item.caption_text,
+                    params: item.params,
+                    mode: 'view',
+                };
+                this.captions.push(caption);
+                this.originalCaptions.push({ ...caption });
+            }
+            this.captionsValueStart = this.captionsValue;
+            this.newItem = {
+                nuid: this.uid(),
+                status: 'draft',
+                label: null,
+                format: this.config?.formats?.default || 'webvtt',
+                lang: 'it',
+                caption_text: null,
+                params: null,
+                mode: 'view',
+            };
+            this.webvttParser = new WebVTTParser();
+        },
+        async save() {
+            try {
+                this.loading = true;
+                const payload = {
+                    data: {
+                        id: this.objectId,
+                        type: this.objectType,
+                        attributes: {
+                            captions: this.captions.map((item) => {
+                                return {
+                                    status: item.status,
+                                    label: item.label,
+                                    format: item.format,
+                                    lang: item.lang,
+                                    caption_text: item.caption_text,
+                                    params: item.params,
+                                };
+                            }),
+                        },
+                    },
+                };
+                const options = {
+                    method: 'PATCH',
+                    credentials: 'same-origin',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'Accept': 'application/json',
+                        'X-CSRF-Token': BEDITA.csrfToken,
+                    },
+                    body: JSON.stringify(payload)
+                };
+                const response = await fetch(`${BEDITA.base}/api/${this.objectType}/${this.objectId}`, options);
+                const responseJson = await response.json();
+                if (responseJson.error) {
+                    BEDITA.error(responseJson.error);
+                } else {
+                    const captions = responseJson.data.attributes.captions || [];
+                    this.reset(captions);
+                }
+            } catch (error) {
+                BEDITA.error(error);
+            } finally {
+                this.loading = false;
+            }
+        },
+        swapItems(fromIndex, toIndex) {
+            if(fromIndex > this.captions.length || toIndex > this.captions.length) return;
+            const temp = this.captions[fromIndex];
+            this.$set(this.captions, fromIndex, this.captions[toIndex]);
+            this.$set(this.captions, toIndex, temp);
+        },
+        truncate(str, len) {
+            return this.$helpers.truncate(str, len);
+        },
+        validate(item) {
+            if (item.format !== 'webvtt') {
+                return;
+            }
+            const content = item.caption_text;
+            const tree = this.webvttParser.parse(content, 'metadata');
+            if (item.uid) {
+                this.captions.find((caption) => caption.uid === item.uid).errors = tree.errors || [];
+            } else {
+                this.newItem.errors = tree.errors || [];
+            }
+        },
+        uid() {
+            return Math.random().toString(16).slice(2);
+        },
+        undoAllChanges() {
+            this.captions = [];
+            for (let item of this.originalCaptions) {
+                this.captions.push({ ...item });
+            }
+        },
+        undoChanges(item) {
+            const originalData = this.originalCaptions.find((caption) => caption.uid === item.uid) || {};
+            this.captions.find((caption) => caption.uid === item.uid).status = originalData.status;
+            this.captions.find((caption) => caption.uid === item.uid).label = originalData.label;
+            this.captions.find((caption) => caption.uid === item.uid).format = originalData.format;
+            this.captions.find((caption) => caption.uid === item.uid).lang = originalData.lang;
+            this.captions.find((caption) => caption.uid === item.uid).caption_text = originalData.caption_text;
+            this.captions.find((caption) => caption.uid === item.uid).params = originalData.params;
+            this.captions.find((caption) => caption.uid === item.uid).mode = 'view';
+        },
+    },
+}
+</script>
+<style>
+.object-captions > div.captions-none {
+    border-bottom: 1px dotted #8e959e;
+    padding-bottom: 1rem;
+}
+.object-captions > div.captions-container {
+    display: grid;
+    grid-template-columns: 30% 10% 8% 6% 40px 120px 120px 100px;
+    border-bottom: 1px dotted #8e959e;
+}
+
+.object-captions > div.captions-container > div.column {
+    font-style: italic;
+    font-size: 0.9rem;
+}
+
+.object-captions > div.captions-container > div {
+    padding: 14px;
+    font-size: 0.9rem;
+}
+
+.object-captions > div > div.sort {
+    background: transparent;
+    color: white;
+    align-self: center;
+}
+
+.object-captions > div > div.sort:hover {
+    cursor: move;
+}
+
+.object-captions > div.dragging {
+    opacity: 0;
+}
+
+.object-captions > div.captions-container > div > span.ribbon {
+    z-index: 2;
+    color: #fff;
+    font-size: 0.75rem;
+    text-transform: uppercase;
+    padding: 4px 16px 4px 16px;
+    border-radius: 4px;
+}
+
+.object-captions > div.captions-container > div > section.caption-form-container {
+    border: dotted 1px white;
+    background-color: #383642;
+    color: white;
+    padding: 1rem !important;
+    border-radius: 15px;
+}
+
+.object-captions ol.validate-results {
+    padding: 0;
+    margin: 0;
+    list-style-type: none;
+}
+
+.object-captions ol.validate-results > li {
+    color: red;
+}
+
+.object-captions .on {
+    color: #fff;
+}
+
+.object-captions .off {
+    color: #8e959e;
+}
+
+.object-captions .draft {
+    color: #8e959e;
+}
+</style>
diff --git a/resources/js/app/components/property-view/property-view.js b/resources/js/app/components/property-view/property-view.js
index b38ace489..1e10a820f 100644
--- a/resources/js/app/components/property-view/property-view.js
+++ b/resources/js/app/components/property-view/property-view.js
@@ -44,6 +44,7 @@ export default {
         PermissionToggle: () => import(/* webpackChunkName: "permission-toggle" */'app/components/permission-toggle/permission-toggle'),
         LanguageSelector:() => import(/* webpackChunkName: "language-selector" */'app/components/language-selector/language-selector'),
         ClipboardItem: () => import(/* webpackChunkName: "clipboard-item" */'app/components/clipboard-item/clipboard-item'),
+        ObjectCaptions: () => import(/* webpackChunkName: "object-captions" */'app/components/object-captions/object-captions'),
         ObjectCategories: () => import(/* webpackChunkName: "object-categories" */'app/components/object-categories/object-categories'),
         PlaceholderList: () => import(/* webpackChunkName: "placeholder-list" */'app/components/placeholder-list/placeholder-list'),
     },
diff --git a/src/Controller/Component/PropertiesComponent.php b/src/Controller/Component/PropertiesComponent.php
index a950e4993..72ed34ecd 100644
--- a/src/Controller/Component/PropertiesComponent.php
+++ b/src/Controller/Component/PropertiesComponent.php
@@ -89,6 +89,7 @@ class PropertiesComponent extends Component
         'tags',
         'lang',
         'children_order',
+        'captions',
     ];
 
     /**
diff --git a/templates/Element/Form/captions.twig b/templates/Element/Form/captions.twig
new file mode 100644
index 000000000..9c9bf0d9c
--- /dev/null
+++ b/templates/Element/Form/captions.twig
@@ -0,0 +1,26 @@
+{% if schema.properties.captions %}
+{% set captions = object.attributes.captions %}
+<property-view inline-template :tab-open="tabsOpen" tab-name="captions">
+	<section class="fieldset">
+		<header @click.prevent="toggleVisibility()" class="tab unselectable" :class="isOpen? 'open has-border-module-{{ currentModule.name }}' : ''">
+			<h2>{{ __('Captions') }}</h2>
+			<span class="tag is-smallest is-black mx-05 {% if captions|length == 0 %}empty{% endif %}">{{ captions|length }}</span>
+		</header>
+		<div v-show="isOpen" class="tab-container">
+			<div class="captions-container">
+                <object-captions
+                    :object-id="{{ object.id|json_encode }}"
+                    :object-type="{{ object.type|json_encode }}"
+                    :items="{{ captions|json_encode }}"
+                    :config="{{ config('Captions')|default({formats:{'allowed':['webvtt'],'default':'webvtt'}})|json_encode }}"
+                    :languages="{{ config('Project.config.I18n.languages')|default([])|json_encode|escape('html_attr') }}"
+                    :readonly="{{ Perms.canCreate() ? 'false' : 'true' }}"
+                >
+                </object-captions>
+                {% do Form.unlockField('captions') %}
+                {{ write_config('_jsonKeys', config('_jsonKeys', [])|merge(['captions'])) }}
+			</div>
+		</div>
+	</section>
+</property-view>
+{% endif %}
diff --git a/templates/Pages/Modules/view.twig b/templates/Pages/Modules/view.twig
index 00e44a989..4b0cbe96b 100644
--- a/templates/Pages/Modules/view.twig
+++ b/templates/Pages/Modules/view.twig
@@ -62,6 +62,8 @@
 
                 {{ element('Form/media') }}
 
+                {{ element('Form/captions') }}
+
                 {{ element('Form/map') }}
 
                 {{ element('Form/other_properties') }}
diff --git a/yarn.lock b/yarn.lock
index 1640612e3..30f14cdaa 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2082,9 +2082,9 @@ caniuse-api@^3.0.0:
     lodash.uniq "^4.5.0"
 
 caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001629:
-  version "1.0.30001632"
-  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001632.tgz"
-  integrity sha512-udx3o7yHJfUxMLkGohMlVHCvFvWmirKh9JAH/d7WOLPetlH+LTL5cocMZ0t7oZx/mdlOWXti97xLZWc8uURRHg==
+  version "1.0.30001680"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001680.tgz"
+  integrity sha512-rPQy70G6AGUMnbwS1z6Xg+RkHYPAi18ihs47GH0jcxIG7wArmPgY3XbS2sRdBbxJljp3thdT8BIqv9ccCypiPA==
 
 chalk@4.1.2, chalk@^4.0.0:
   version "4.1.2"
@@ -5696,6 +5696,11 @@ webpack@^5.94.0:
     watchpack "^2.4.1"
     webpack-sources "^3.2.3"
 
+webvtt-parser@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.npmjs.org/webvtt-parser/-/webvtt-parser-2.2.0.tgz#79029fb9067edcb210820fa6101c37d9b8b78d9f"
+  integrity sha512-FzmaED+jZyt8SCJPTKbSsimrrnQU8ELlViE1wuF3x1pgiQUM8Llj5XWj2j/s6Tlk71ucPfGSMFqZWBtKn/0uEA==
+
 whatwg-url@^5.0.0:
   version "5.0.0"
   resolved "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz#966454e8765462e37644d3626f6742ce8b70965d"