diff --git a/api/stream.go b/api/stream.go
index b50174cad..82b83bb0a 100644
--- a/api/stream.go
+++ b/api/stream.go
@@ -12,13 +12,13 @@ import (
 	"strings"
 	"time"
 
-	"github.com/getsentry/sentry-go"
-	"github.com/gin-gonic/gin"
 	"github.com/TUM-Dev/gocast/dao"
 	"github.com/TUM-Dev/gocast/model"
 	"github.com/TUM-Dev/gocast/tools"
 	"github.com/TUM-Dev/gocast/tools/bot"
 	"github.com/TUM-Dev/gocast/voice-service/pb"
+	"github.com/getsentry/sentry-go"
+	"github.com/gin-gonic/gin"
 	uuid "github.com/satori/go.uuid"
 	log "github.com/sirupsen/logrus"
 	"gorm.io/gorm"
@@ -496,6 +496,8 @@ func (r streamRoutes) createVideoSectionBatch(c *gin.Context) {
 			log.WithError(err).Error("failed to generate video section images")
 		}
 	}()
+
+	c.JSON(http.StatusOK, sections)
 }
 
 type UpdateVideoSectionRequest struct {
diff --git a/dao/courses.go b/dao/courses.go
index 23978d086..18294dfea 100644
--- a/dao/courses.go
+++ b/dao/courses.go
@@ -201,6 +201,7 @@ func (d coursesDao) GetCourseByToken(token string) (course model.Course, err err
 func (d coursesDao) GetCourseById(ctx context.Context, id uint) (course model.Course, err error) {
 	var foundCourse model.Course
 	dbErr := DB.Preload("Streams.TranscodingProgresses").
+		Preload("Streams.VideoSections").
 		Preload("Streams.Files").
 		Preload("Streams", func(db *gorm.DB) *gorm.DB {
 			return db.Order("streams.start desc")
@@ -218,7 +219,7 @@ func (d coursesDao) GetCourseBySlugYearAndTerm(ctx context.Context, slug string,
 		return cachedCourses.(model.Course), nil
 	}
 	var course model.Course
-	err := DB.Preload("Streams.Units", func(db *gorm.DB) *gorm.DB {
+	err := DB.Preload("Streams.VideoSections").Preload("Streams.Units", func(db *gorm.DB) *gorm.DB {
 		return db.Order("unit_start desc")
 	}).Preload("Streams", func(db *gorm.DB) *gorm.DB {
 		return db.Order("start desc")
diff --git a/model/stream.go b/model/stream.go
index 6fac079af..35de2d675 100755
--- a/model/stream.go
+++ b/model/stream.go
@@ -323,6 +323,18 @@ func (s Stream) getJson(lhs []LectureHall, course Course) gin.H {
 		}
 	}
 
+	var videoSections []gin.H
+	for _, section := range s.VideoSections {
+		videoSections = append(videoSections, gin.H{
+			"id":           section.ID,
+			"description":  section.Description,
+			"startHours":   section.StartHours,
+			"startMinutes": section.StartMinutes,
+			"startSeconds": section.StartSeconds,
+			"fileID":       section.FileID,
+		})
+	}
+
 	return gin.H{
 		"lectureId":             s.Model.ID,
 		"courseId":              s.CourseID,
@@ -346,6 +358,7 @@ func (s Stream) getJson(lhs []LectureHall, course Course) gin.H {
 		"courseSlug":            course.Slug,
 		"private":               s.Private,
 		"downloadableVods":      s.GetVodFiles(),
+		"videoSections":         videoSections,
 	}
 }
 
diff --git a/web/assets/init-admin.js b/web/assets/init-admin.js
index 172d2513d..f4e8be806 100644
--- a/web/assets/init-admin.js
+++ b/web/assets/init-admin.js
@@ -15,6 +15,8 @@ document.addEventListener("alpine:init", () => {
         'color'
     ];
 
+    const nativeEventName = "csupdate";
+
     const convert = (modifiers, value) => {
         if (modifiers.includes("int")) {
             return parseInt(value);
@@ -79,7 +81,6 @@ document.addEventListener("alpine:init", () => {
     Alpine.directive("bind-change-set", (el, { expression, value, modifiers }, { evaluate, cleanup }) => {
         const changeSet = evaluate(expression);
         const fieldName = value || el.name;
-        const nativeEventName = "csupdate";
 
         if (el.type === "file") {
             const isSingle = modifiers.includes("single")
@@ -92,7 +93,7 @@ document.addEventListener("alpine:init", () => {
                 if (!data[fieldName]) {
                     el.value = "";
                 }
-                el.dispatchEvent(new CustomEvent(nativeEventName, { detail: data[fieldName] }));
+                el.dispatchEvent(new CustomEvent(nativeEventName, { detail: { changeSet, value: data[fieldName] } }));
             };
 
             changeSet.listen(onChangeSetUpdateHandler);
@@ -109,7 +110,7 @@ document.addEventListener("alpine:init", () => {
 
             const onChangeSetUpdateHandler = (data) => {
                 el.checked = !!data[fieldName];
-                el.dispatchEvent(new CustomEvent(nativeEventName, { detail: !!data[fieldName] }));
+                el.dispatchEvent(new CustomEvent(nativeEventName, { detail: { changeSet, value: !!data[fieldName] }}));
             };
 
             changeSet.listen(onChangeSetUpdateHandler);
@@ -122,26 +123,29 @@ document.addEventListener("alpine:init", () => {
             })
         } else  if (el.tagName === "textarea" || textInputTypes.includes(el.type)) {
             const keyupHandler = (e) => changeSet.patch(fieldName, convert(modifiers, e.target.value));
+            const changeHandler = (e) => changeSet.patch(fieldName, convert(modifiers, e.target.value));
 
             const onChangeSetUpdateHandler = (data) => {
                 el.value = `${data[fieldName]}`;
-                el.dispatchEvent(new CustomEvent(nativeEventName, { detail: data[fieldName] }));
+                el.dispatchEvent(new CustomEvent(nativeEventName, { detail: { changeSet, value: data[fieldName] } }));
             };
 
             changeSet.listen(onChangeSetUpdateHandler);
-            el.addEventListener('keyup', keyupHandler)
+            el.addEventListener('keyup', keyupHandler);
+            el.addEventListener('change', changeHandler);
             el.value = `${changeSet.get()[fieldName]}`;
 
             cleanup(() => {
                 changeSet.removeListener(onChangeSetUpdateHandler);
                 el.removeEventListener('keyup', keyupHandler)
+                el.removeEventListener('change', changeHandler)
             })
         } else {
             const changeHandler = (e) => changeSet.patch(fieldName, convert(modifiers, e.target.value));
 
             const onChangeSetUpdateHandler = (data) => {
                 el.value = `${data[fieldName]}`;
-                el.dispatchEvent(new CustomEvent(nativeEventName, { detail: data[fieldName] }));
+                el.dispatchEvent(new CustomEvent(nativeEventName, { detail: { changeSet, value: data[fieldName] } }));
             };
 
             changeSet.listen(onChangeSetUpdateHandler);
@@ -154,4 +158,94 @@ document.addEventListener("alpine:init", () => {
             })
         }
     });
+
+    /**
+     * Alpine.js directive for dynamically triggering a custom event and updating an element's inner text
+     * based on changes to a "change set" object's field.
+     *
+     * Syntax:
+     * <div x-change-set-listen.text="changeSetExpression.fieldName"></div>
+     *
+     * Parameters:
+     *  - changeSetExpression: The JavaScript expression evaluating to the change set object
+     *  - fieldName: The specific field within the change set to monitor for changes
+     *
+     * Modifiers:
+     *  - "text": When provided, the directive will also update the element's innerText.
+     *
+     * Custom Events:
+     *  - "csupdate": Custom event triggered when the change set is updated.
+     *    The detail property of the event object contains the new value of the specified field.
+     */
+    Alpine.directive("change-set-listen", (el, { expression, modifiers }, { effect, evaluate, cleanup }) => {
+        effect(() => {
+            const [changeSetExpression, fieldName = null] = expression.split(".");
+            const changeSet = evaluate(changeSetExpression);
+
+            const onChangeSetUpdateHandler = (data) => {
+                const value = fieldName != null ? data[fieldName] : data;
+                if (modifiers.includes("text")) {
+                    el.innerText = `${value}`;
+                }
+                el.dispatchEvent(new CustomEvent(nativeEventName, { detail: { changeSet, value } }));
+            };
+
+            if (!changeSet) {
+                return;
+            }
+
+            changeSet.removeListener(onChangeSetUpdateHandler);
+            onChangeSetUpdateHandler(changeSet.get());
+            changeSet.listen(onChangeSetUpdateHandler);
+
+            cleanup(() => {
+                changeSet.removeListener(onChangeSetUpdateHandler);
+            })
+        });
+    });
+
+    /**
+    * Alpine.js directive for executing custom logic in response to the "csupdate" event,
+    * which is usually triggered by changes in a "change set" object's field.
+    *
+    * Syntax:
+    * <div x-on-change-set-update="[expression]"></div>
+    *
+    * Parameters:
+    *  - expression: The JavaScript expression to be evaluated when the "csupdate" event is triggered.
+    *
+    * Modifiers:
+    *  - "init": When provided, the directive will execute the expression during initialization (no matter if its dirty or clean).
+    *  - "clean": When provided, the directive will only execute if changeSet is not dirty.
+    *  - "dirty": When provided, the directive will only execute if changeSet is dirty.
+    *
+    * Example usage:
+    * <div x-change-set-listen="sectionEditChangeSet"
+    *      x-on-change-set-update.init="$el.innerText = friendlySectionTimestamp(sectionEditChangeSet.get())">
+    * </div>
+    */
+    Alpine.directive("on-change-set-update", (el, { expression, modifiers }, { evaluate, evaluateLater, cleanup }) => {
+        const onUpdate = evaluateLater(expression);
+
+        const onChangeSetUpdateHandler = (e) => {
+            const isDirty = e.detail.changeSet.isDirty();
+
+            if (modifiers.includes("clean") && isDirty) {
+                return;
+            }
+            if (modifiers.includes("dirty") && !isDirty) {
+                return;
+            }
+            onUpdate();
+        };
+        el.addEventListener(nativeEventName, onChangeSetUpdateHandler);
+
+        if (modifiers.includes("init")) {
+            evaluate(expression);
+        }
+
+        cleanup(() => {
+            el.removeEventListener(nativeEventName, onChangeSetUpdateHandler);
+        })
+    })
 });
\ No newline at end of file
diff --git a/web/template/partial/course/manage/course_settings.gohtml b/web/template/partial/course/manage/course_settings.gohtml
index 1994b0ce3..66fb7b6c9 100644
--- a/web/template/partial/course/manage/course_settings.gohtml
+++ b/web/template/partial/course/manage/course_settings.gohtml
@@ -5,7 +5,7 @@
     }">
         <form class="form-container-body" id="course-settings-form" method="post" @submit.prevent="
                 async () => {
-                    if(admin.LectureList.hasIndividualChatEnabledSettings()){
+                    if((new admin.LectureList({{.ID}})).hasIndividualChatEnabledSettings()){
                        showCourseSettingsModal = true;
                     }
                     else{
diff --git a/web/template/partial/course/manage/edit-video-sections.gohtml b/web/template/partial/course/manage/edit-video-sections.gohtml
index 71f1edf2f..1c2f38411 100644
--- a/web/template/partial/course/manage/edit-video-sections.gohtml
+++ b/web/template/partial/course/manage/edit-video-sections.gohtml
@@ -1,7 +1,5 @@
 {{define "editvideosections"}}
-    <article x-data="{ videoSectionController: new admin.VideoSectionsAdminController(lecture.lectureId) }"
-            x-init="() => videoSectionController.init(`edit-video-sections-${lecture.lectureId}`, $el)"
-            class="grid gap-y-3">
+    <article class="grid gap-y-3">
         <header class="flex justify-between items-center border-b dark:border-gray-600">
             <div class="flex items-center">
                 <h6 class="text-sm text-5 font-light">Video Sections</h6>
@@ -29,147 +27,131 @@
                     </div>
                 </div>
             </div>
-            <div x-show="videoSectionController.unsavedChanges"
-                 class="flex items-center text-xs text-3 px-2 border border-amber-200 bg-amber-200/50 rounded-full">
-                <i class="fa fa-triangle-exclamation mr-1"></i>
-                <span class="font-light">Unsaved Changes</span>
-            </div>
         </header>
-        <form id = "new-section-form" @submit.prevent="videoSectionController.publishNewSections()">
+        <form
+                id="new-section-form"
+                x-data="{
+                    isValid: false,
+                    newSection: new admin.ChangeSet({ startHours: 0, startMinutes: 0, startSeconds: 0, description: '' })
+                }"
+                x-init="newSection.listen((s) => { isValid = isValidVideoSection(s); })"
+                @submit.prevent="addSection(newSection.changeState); newSection.reset();"
+        >
             <div class="flex align-middle">
                 <input id="startHours"
-                       onkeyup="this.value=this.value.replace(/[^\d]/,'')"
-                       x-model.number="videoSectionController.current.startHours"
+                       name="startHours"
+                       x-bind-change-set.int="newSection"
                        type="number" min="0" max="23" step="1"
                        placeholder="0"
                        class="w-20 rounded px-4 py-3 tl-input">
                 <span class="px-2 my-auto font-semibold text-5">:</span>
                 <input id="startMinutes"
-                       onkeyup="this.value=this.value.replace(/[^\d]/,'')"
-                       x-model.number="videoSectionController.current.startMinutes"
+                       name="startMinutes"
+                       x-bind-change-set.int="newSection"
                        type="number" min="0" max="59" step="1"
                        placeholder="0"
                        class="w-20 rounded px-4 py-3 tl-input">
                 <span class="px-2 my-auto font-semibold text-5">:</span>
                 <input id="startSeconds"
-                       onkeyup="this.value=this.value.replace(/[^\d]/,'')"
-                       x-model.number="videoSectionController.current.startSeconds"
+                       name="startSeconds"
+                       x-bind-change-set.int="newSection"
                        type="number" min="0" max="59" step="1"
                        placeholder="0"
                        class="w-20 rounded px-4 py-3 tl-input">
-                <input x-model="videoSectionController.current.description"
+                <input name="description"
+                       x-bind-change-set="newSection"
                        type="text" value=""
                        placeholder="Introduction"
                        class="mx-2 rounded px-4 py-3 tl-input">
                 <button type="button"
-                        class="w-fit bg-gray-100 text-center px-3 rounded dark:bg-gray-600"
-                        @click="videoSectionController.pushNewSection()"
-                        :disabled="!videoSectionController.currentIsValid()">
+                        class="w-fit bg-gray-100 text-center px-3 rounded text-sky-800 bg-sky-200 dark:text-indigo-200 dark:bg-indigo-600 disabled:bg-gray-200 disabled:dark:bg-gray-600"
+                        @click="addSection(newSection.changeState); newSection.reset();"
+                        :disabled="!isValid">
                     <i class="fa fa-plus text-3"></i>
                 </button>
             </div>
-            <template x-if="videoSectionController.newSections.length > 0">
-                <section>
-                    <article class="grid gap-2 pt-2">
-                        <template x-for="section in videoSectionController.newSections">
-                            <div class="flex justify-between w-full border dark:border-gray-600 rounded">
-                                <div class="my-auto p-1">
-                                    <span class="text-sky-800 bg-sky-200 text-xs dark:text-indigo-200 dark:bg-indigo-800 p-1 rounded"
-                                          x-text="section.friendlyTimestamp"></span>
-                                    <span class="text-xs font-semibold text-3"
-                                          x-text="section.description"></span>
-                                </div>
-                                <div class="my-auto ml-auto border-l dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-600">
-                                    <button class="py-1 px-3"
-                                            @click="videoSectionController.removeNewSection(section)">
-                                        <i class="fa fa-trash text-xs"></i>
-                                    </button>
-                                </div>
-                            </div>
-                        </template>
-                    </article>
-                    <div class="flex items-center justify-center grow py-2">
-                        <button type="submit" form="new-section-form" value="Submit"
-                                class="rounded-lg text-center w-full py-2 font-semibold bg-blue-500 dark:bg-indigo-600">
-                            <span class="text-white text-sm">Save new sections</span>
-                        </button>
-                    </div>
-                </section>
-            </template>
         </form>
-        <template x-if="videoSectionController.existingSections.length > 0">
+        <template x-if="lectureData.videoSections.length > 0">
             <div class="">
                 <div class="grid gap-2">
-                    <template x-if="videoSectionController.existingSections.length > 0">
-                        <template x-for="section in videoSectionController.existingSections" :key="section.ID">
-                            <div x-data="{updater: {}}"
-                                 x-init="updater = new admin.VideoSectionUpdater(lecture.lectureId, section);"
-                                 class="flex align-middle items-stretch w-full border dark:border-gray-600 rounded">
-                                <template x-if="!updater.show">
-                                    <div class="p-1">
-                                        <span class="text-sky-800 bg-sky-200 text-xs dark:text-indigo-200 dark:bg-indigo-800 p-1 rounded"
-                                              x-text="section.friendlyTimestamp"></span>
-                                        <span class="text-xs font-semibold text-3"
-                                              x-text="section.description"></span>
+                    <template x-for="section in lectureData.videoSections" :key="getSectionKey(section)">
+                        <div x-data="{ sectionEditChangeSet: new admin.ChangeSet(section), editMode: false }" class="w-full border dark:border-gray-600 rounded">
+                            <template x-if="!editMode">
+                                <div class="p-1 flex items-center justify-start">
+                                    <div class="text-sky-800 bg-sky-200 text-xs dark:text-indigo-200 dark:bg-indigo-800 p-1 ml-1 rounded"
+                                         x-change-set-listen="sectionEditChangeSet"
+                                         x-on-change-set-update.init="$el.innerText = friendlySectionTimestamp(sectionEditChangeSet.get())"
+                                    ></div>
+                                    <div x-change-set-listen.text="sectionEditChangeSet.description" class="text-xs font-semibold text-3 ml-2 flex-grow"></div>
+                                    <div class="flex items-center py-1 pl-2 border-l dark:border-gray-600">
+                                        <button class="text-5 py-1 px-3 rounded text-3 hover:bg-gray-200 dark:hover:bg-gray-600" @click="editMode = true">
+                                            <i class="fa fa-edit"></i>
+                                        </button>
+                                        <button class="text-5 py-1 px-3 rounded text-3 hover:bg-gray-200 dark:hover:bg-gray-600"
+                                                @click="deleteSection(section)">
+                                            <i class="fa fa-trash"></i>
+                                        </button>
                                     </div>
-                                </template>
-                                <template x-if="updater.show">
-                                    <form @submit.prevent="updater.update();"
-                                          @reset.prevent="updater.reset();"
-                                          class="flex flex-grow items-center p-2">
-                                        <div class="text-sm mr-2">
-                                            <label for="video-section-timestamp"
-                                                   class="block text-5">Timestamp</label>
-                                            <div class="flex mt-3">
-                                                <input id="startHours"
-                                                       x-model.number="updater.request.StartHours"
-                                                       type="number" min="0" max="23" step="1"
-                                                       placeholder="0"
-                                                       class="w-20 rounded px-4 py-3 focus:outline-none border-0 bg-gray-50 w-full dark:bg-gray-600">
-                                                <span class="px-2 my-auto font-semibold text-5">:</span>
-                                                <input id="startMinutes"
-                                                       x-model.number="updater.request.StartMinutes"
-                                                       type="number" min="0" max="59" step="1"
-                                                       placeholder="0"
-                                                       class="w-20 rounded px-4 py-3 focus:outline-none border-0 bg-gray-50 w-full dark:bg-gray-600">
-                                                <span class="px-2 my-auto font-semibold text-5">:</span>
-                                                <input id="startSeconds"
-                                                       x-model.number="updater.request.StartSeconds"
-                                                       type="number" min="0" max="59" step="1"
-                                                       placeholder="0"
-                                                       class="w-20 rounded px-4 py-3 focus:outline-none border-0 bg-gray-50 w-full dark:bg-gray-600">
-                                            </div>
-                                        </div>
-                                        <div class="text-sm flex-grow">
-                                            <label for="video-section-description"
-                                                   class="block text-5">Description</label>
-                                            <input x-model="updater.request.Description"
-                                                   id="video-section-description" type="text"
-                                                   name="video-section-description" autofocus="" required
-                                                   class="rounded px-4 py-3 mt-3 focus:outline-none border-0 bg-gray-50 w-full dark:bg-gray-600"/>
+                                </div>
+                            </template>
+                            <template x-if="editMode">
+                                <form @submit.prevent="sectionEditChangeSet.commit(); updateSection(sectionEditChangeSet.get()); editMode = false;"
+                                      @reset.prevent="sectionEditChangeSet.reset(); editMode = false;"
+                                      x-data="{ isValid: false }"
+                                      x-change-set-listen="sectionEditChangeSet"
+                                      x-on-change-set-update="isValid = sectionEditChangeSet.isDirty() && isValidVideoSection(sectionEditChangeSet.get())"
+                                      class="flex flex-grow items-center p-2">
+                                    <div class="text-sm mr-2">
+                                        <label for="video-section-timestamp"
+                                               class="block text-5">Timestamp</label>
+                                        <div class="flex mt-3">
+                                            <input id="startHours"
+                                                   x-bind-change-set.int="sectionEditChangeSet"
+                                                   name="startHours"
+                                                   type="number" min="0" max="23" step="1"
+                                                   placeholder="0"
+                                                   class="w-20 rounded px-4 py-3 focus:outline-none border-0 bg-gray-50 w-full dark:bg-gray-600">
+                                            <span class="px-2 my-auto font-semibold text-5">:</span>
+                                            <input id="startMinutes"
+                                                   x-bind-change-set.int="sectionEditChangeSet"
+                                                   name="startMinutes"
+                                                   type="number" min="0" max="59" step="1"
+                                                   placeholder="0"
+                                                   class="w-20 rounded px-4 py-3 focus:outline-none border-0 bg-gray-50 w-full dark:bg-gray-600">
+                                            <span class="px-2 my-auto font-semibold text-5">:</span>
+                                            <input id="startSeconds"
+                                                   x-bind-change-set.int="sectionEditChangeSet"
+                                                   name="startSeconds"
+                                                   type="number" min="0" max="59" step="1"
+                                                   placeholder="0"
+                                                   class="w-20 rounded px-4 py-3 focus:outline-none border-0 bg-gray-50 w-full dark:bg-gray-600">
                                         </div>
-                                        <button type="submit"
-                                                title="Update"
-                                                class="h-full w-fit ml-2 bg-blue-500 text-center px-3 py-1 rounded w-full dark:bg-indigo-600">
-                                            <i class="fa fa-square-check text-white"></i>
-                                        </button>
+                                    </div>
+                                    <div class="text-sm flex-grow">
+                                        <label for="video-section-description"
+                                               class="block text-5">Description</label>
+                                        <input x-bind-change-set="sectionEditChangeSet"
+                                               name="description"
+                                               id="video-section-description" type="text"
+                                               autofocus="" required
+                                               class="rounded px-4 py-3 mt-3 focus:outline-none border-0 bg-gray-50 w-full dark:bg-gray-600"/>
+                                    </div>
+                                    <div class="flex flex-col ml-2">
                                         <button type="reset"
                                                 title="Undo changes"
-                                                class="h-full w-fit ml-2 bg-gray-100 text-center px-3 rounded w-full dark:bg-secondary-lighter">
+                                                class="h-8 mb-1 bg-gray-100 text-center px-3 rounded dark:bg-secondary-lighter">
                                             <i class="fa fa-undo text-3"></i>
                                         </button>
-                                    </form>
-                                </template>
-                                <button class="text-5 py-1 px-3 ml-auto border-l dark:border-gray-600 text-3 hover:bg-gray-200 dark:hover:bg-gray-600"
-                                        @click="updater.show = !updater.show">
-                                    <i class="fa fa-edit"></i>
-                                </button>
-                                <button class="text-5 py-1 px-3 border-l rounded-r dark:border-gray-600 text-3 text-xs hover:bg-gray-200 dark:hover:bg-gray-600"
-                                        @click="videoSectionController.removeExistingSection(section.ID)">
-                                    <i class="fa fa-trash"></i>
-                                </button>
-                            </div>
-                        </template>
+                                        <button type="submit"
+                                                title="Update"
+                                                :disabled="!isValid"
+                                                class="h-8 bg-blue-500 text-center px-3 py-1 rounded dark:bg-indigo-600 disabled:opacity-50">
+                                            <i class="fa fa-check text-white"></i>
+                                        </button>
+                                    </div>
+                                </form>
+                            </template>
+                        </div>
                     </template>
                 </div>
             </div>
diff --git a/web/ts/api/admin-lecture-list.ts b/web/ts/api/admin-lecture-list.ts
index c7f2d6ac9..fc65bc786 100644
--- a/web/ts/api/admin-lecture-list.ts
+++ b/web/ts/api/admin-lecture-list.ts
@@ -80,6 +80,82 @@ export const LectureVideoTypes = [
     LectureVideoTypeCam,
 ] as LectureVideoType[];
 
+export type VideoSection = {
+    id?: number;
+    description: string;
+
+    startHours: number;
+    startMinutes: number;
+    startSeconds: number;
+
+    //Pseudo Fields
+    key?: string;
+};
+
+export type VideoSectionDelta = {
+    toAdd: VideoSection[];
+    toUpdate: VideoSection[];
+    toDelete: VideoSection[];
+};
+
+// Checks if two video sections have the same id but different data
+export function videoSectionHasChanged(a: VideoSection, b: VideoSection) {
+    return a.id === b.id && (a.description !== b.description || videoSectionTimestamp(a) !== videoSectionTimestamp(b));
+}
+
+export function videoSectionGenKey(section: VideoSection): string {
+    if (section.id != null) {
+        return `sid_${section.id}`;
+    }
+    return `sts_${new Date().getTime()}`;
+}
+
+export function videoSectionListDelta(oldSections: VideoSection[], newSections: VideoSection[]): VideoSectionDelta {
+    const sectionsToAdd = [];
+    const sectionsToUpdate = [];
+    const sectionsToDelete = [];
+
+    for (const section of newSections) {
+        // New Section
+        if (section.id === undefined) {
+            sectionsToAdd.push(section);
+            continue;
+        }
+
+        // Updating Video Sections
+        const oldVideoSection = oldSections.find((oldSection: VideoSection) => oldSection.id === section.id);
+        if (videoSectionHasChanged(section, oldVideoSection)) {
+            sectionsToUpdate.push(section);
+        }
+    }
+    for (const section of oldSections) {
+        // Deleted Sections
+        if (!newSections.some(({ id }) => section.id === id)) {
+            sectionsToDelete.push(section);
+        }
+    }
+
+    return {
+        toAdd: sectionsToAdd,
+        toUpdate: sectionsToUpdate,
+        toDelete: sectionsToDelete,
+    };
+}
+
+export function videoSectionFriendlyTimestamp(a: VideoSection): string {
+    return `${a.startHours.toString().padStart(2, "0")}:${a.startMinutes.toString().padStart(2, "0")}:${a.startSeconds
+        .toString()
+        .padStart(2, "0")}`;
+}
+
+export function videoSectionTimestamp(a: VideoSection): number {
+    return a.startHours * 3600 + a.startMinutes * 60 + a.startSeconds;
+}
+
+export function videoSectionSort(a: VideoSection, b: VideoSection): number {
+    return videoSectionTimestamp(a) - videoSectionTimestamp(b);
+}
+
 export interface Lecture {
     color: string;
     courseId: number;
@@ -103,6 +179,7 @@ export interface Lecture {
     start: string;
     streamKey: string;
     transcodingProgresses: TranscodingProgress[];
+    videoSections: VideoSection[];
 
     // Clientside computed fields
     hasAttachments: boolean;
@@ -204,6 +281,48 @@ export const AdminLectureList = {
         await post(`/api/course/${courseId}/updateLectureSeries/${lectureId}`);
     },
 
+    /**
+     * Add sections to a lecture
+     * @param lectureId
+     * @param sections
+     */
+    addSections: async (lectureId: number, sections: VideoSection[]): Promise<VideoSection[]> => {
+        const result = await post(
+            `/api/stream/${lectureId}/sections`,
+            sections.map((s) => ({
+                ...s,
+                streamID: lectureId,
+            })),
+        );
+        return result.json();
+    },
+
+    /**
+     * Updates a section
+     * @param lectureId
+     * @param section
+     */
+    updateSection: async (lectureId: number, section: VideoSection): Promise<void> => {
+        const res = await put(`/api/stream/${lectureId}/sections/${section.id}`, {
+            Description: section.description,
+            StartHours: section.startHours,
+            StartMinutes: section.startMinutes,
+            StartSeconds: section.startSeconds,
+        });
+        if (res.status !== StatusCodes.OK) {
+            throw Error(res.body.toString());
+        }
+    },
+
+    /**
+     * Delete a section from a lecture
+     * @param lectureId
+     * @param sectionId
+     */
+    deleteSection: async (lectureId: number, sectionId: number): Promise<void> => {
+        await del(`/api/stream/${lectureId}/sections/${sectionId}`);
+    },
+
     /**
      * Updates the private state of a lecture.
      * @param lectureId
diff --git a/web/ts/api/video-sections.ts b/web/ts/api/video-sections.ts
index 9acb866c5..ffd3189c1 100644
--- a/web/ts/api/video-sections.ts
+++ b/web/ts/api/video-sections.ts
@@ -1,12 +1,5 @@
 import { del, get, post, put } from "../utilities/fetch-wrappers";
 
-export class UpdateVideoSectionRequest {
-    Description: string;
-    StartHours: number;
-    StartMinutes: number;
-    StartSeconds: number;
-}
-
 export type Section = {
     ID?: number;
     description: string;
@@ -29,16 +22,4 @@ export const VideoSectionAPI = {
     get: async function (streamId: number): Promise<Section[]> {
         return get(`/api/stream/${streamId}/sections`);
     },
-
-    add: async function (streamId: number, request: object) {
-        return post(`/api/stream/${streamId}/sections`, request);
-    },
-
-    update: function (streamId: number, id: number, request: UpdateVideoSectionRequest) {
-        return put(`/api/stream/${streamId}/sections/${id}`, request);
-    },
-
-    delete: async function (streamId: number, id: number): Promise<Response> {
-        return del(`/api/stream/${streamId}/sections/${id}`);
-    },
 };
diff --git a/web/ts/change-set.ts b/web/ts/change-set.ts
index ff590d7fe..72ed57ad4 100644
--- a/web/ts/change-set.ts
+++ b/web/ts/change-set.ts
@@ -55,7 +55,7 @@ export interface DirtyState {
 export class ChangeSet<T> {
     private state: T;
     private changeState: T;
-    private readonly comparator?: LectureComparator<T>;
+    private readonly comparator?: PropertyComparator<T>;
     private onUpdate: ((changeState: T, dirtyState: DirtyState) => void)[];
 
     constructor(
@@ -85,6 +85,18 @@ export class ChangeSet<T> {
         this.onUpdate = this.onUpdate.filter((o) => o !== onUpdate);
     }
 
+    /**
+     * Returns a key from the change-state or the last committed state if flag is set
+     * @param key key to return
+     * @param lastCommittedState if set to true, value of the last committed state is returned
+     */
+    getValue(key: string, { lastCommittedState = false }): T {
+        if (lastCommittedState) {
+            return this.state[key];
+        }
+        return this.changeState[key];
+    }
+
     /**
      * Returns the current uncommitted change state.
      */
@@ -211,9 +223,10 @@ export class ChangeSet<T> {
     }
 }
 
-export type LectureComparator<T> = (key: string, a: T, b: T) => boolean | null;
+export type PropertyComparator<T> = (key: string, a: T, b: T) => boolean | null;
+export type SinglePropertyComparator<T> = (a: T, b: T) => boolean | null;
 
-export function ignoreKeys<T>(list: string[]): LectureComparator<T> {
+export function ignoreKeys<T>(list: string[]): PropertyComparator<T> {
     return (key: string, a, b) => {
         if (list.includes(key)) {
             return false;
@@ -221,3 +234,26 @@ export function ignoreKeys<T>(list: string[]): LectureComparator<T> {
         return null;
     };
 }
+
+export function singleProperty<T>(key: string, comparator: SinglePropertyComparator<T>): PropertyComparator<T> {
+    return (_key: string, a, b) => {
+        if (_key !== key) {
+            return null;
+        }
+        return comparator(a, b);
+    };
+}
+
+export function comparatorPipeline<T>(list: PropertyComparator<T>[]): PropertyComparator<T> {
+    return (key: string, a, b) => {
+        for (const comparator of list) {
+            const res = comparator(key, a, b);
+            if (res === true) {
+                return true;
+            } else if (res === false) {
+                return false;
+            }
+        }
+        return null;
+    };
+}
diff --git a/web/ts/data-store/admin-lecture-list.ts b/web/ts/data-store/admin-lecture-list.ts
index 077a71984..6633bf78e 100644
--- a/web/ts/data-store/admin-lecture-list.ts
+++ b/web/ts/data-store/admin-lecture-list.ts
@@ -1,7 +1,14 @@
 import { StreamableMapProvider } from "./provider";
-import { AdminLectureList, Lecture, LectureFile, UpdateLectureMetaRequest } from "../api/admin-lecture-list";
+import {
+    AdminLectureList,
+    Lecture,
+    LectureFile,
+    UpdateLectureMetaRequest,
+    VideoSection,
+    videoSectionSort,
+} from "../api/admin-lecture-list";
 import { FileType } from "../edit-course";
-import { UploadFileListener } from "../global";
+import { PostFormDataListener } from "../utilities/fetch-wrappers";
 
 const dateFormatOptions: Intl.DateTimeFormatOptions = {
     weekday: "long",
@@ -27,6 +34,8 @@ export class AdminLectureListProvider extends StreamableMapProvider<number, Lect
         return result.map((s) => {
             s.hasAttachments = (s.files || []).some((f) => f.fileType === FileType.attachment);
 
+            s.videoSections = (s.videoSections ?? []).sort(videoSectionSort);
+
             s.startDate = new Date(s.start);
             s.startDateFormatted = s.startDate.toLocaleDateString("en-US", dateFormatOptions);
             s.startTimeFormatted = s.startDate.toLocaleTimeString("en-US", timeFormatOptions);
@@ -167,12 +176,59 @@ export class AdminLectureListProvider extends StreamableMapProvider<number, Lect
         await this.triggerUpdate(courseId);
     }
 
+    async addSections(courseId: number, lectureId: number, videoSections: VideoSection[]) {
+        const newSections = await AdminLectureList.addSections(lectureId, videoSections);
+
+        this.data[courseId] = (await this.getData(courseId)).map((s) => {
+            if (s.lectureId === lectureId) {
+                return {
+                    ...s,
+                    videoSections: [...s.videoSections, ...newSections],
+                };
+            }
+            return s;
+        });
+        await this.triggerUpdate(courseId);
+    }
+
+    async updateSection(courseId: number, lectureId: number, videoSection: VideoSection) {
+        await AdminLectureList.updateSection(lectureId, videoSection);
+
+        this.data[courseId] = (await this.getData(courseId)).map((s) => {
+            if (s.lectureId === lectureId) {
+                return {
+                    ...s,
+                    videoSections: [...s.videoSections.filter((a) => a.id !== videoSection.id), videoSection].sort(
+                        videoSectionSort,
+                    ),
+                };
+            }
+            return s;
+        });
+        await this.triggerUpdate(courseId);
+    }
+
+    async deleteSection(courseId: number, lectureId: number, videoSectionId: number) {
+        await AdminLectureList.deleteSection(lectureId, videoSectionId);
+
+        this.data[courseId] = (await this.getData(courseId)).map((s) => {
+            if (s.lectureId === lectureId) {
+                return {
+                    ...s,
+                    videoSections: [...s.videoSections.filter((a) => a.id !== videoSectionId)].sort(videoSectionSort),
+                };
+            }
+            return s;
+        });
+        await this.triggerUpdate(courseId);
+    }
+
     async uploadVideo(
         courseId: number,
         lectureId: number,
         videoType: string,
         file: File,
-        listener: UploadFileListener = {},
+        listener: PostFormDataListener = {},
     ) {
         await AdminLectureList.uploadVideo(courseId, lectureId, videoType, file, listener);
     }
diff --git a/web/ts/data-store/video-sections.ts b/web/ts/data-store/video-sections.ts
index 446de9c5a..8ca51be9e 100644
--- a/web/ts/data-store/video-sections.ts
+++ b/web/ts/data-store/video-sections.ts
@@ -1,6 +1,6 @@
 import { Time } from "../global";
 import { StreamableMapProvider } from "./provider";
-import { Section, UpdateVideoSectionRequest, VideoSectionAPI } from "../api/video-sections";
+import { Section, VideoSectionAPI } from "../api/video-sections";
 
 export class VideoSectionProvider extends StreamableMapProvider<number, Section[]> {
     protected async fetcher(streamId: number): Promise<Section[]> {
@@ -10,37 +10,4 @@ export class VideoSectionProvider extends StreamableMapProvider<number, Section[
             return s;
         });
     }
-
-    async add(streamId: number, sections: Section[]): Promise<void> {
-        await VideoSectionAPI.add(streamId, sections);
-        await this.fetch(streamId, true);
-        await this.triggerUpdate(streamId);
-    }
-
-    async delete(streamId: number, sectionId: number) {
-        await VideoSectionAPI.delete(streamId, sectionId);
-        this.data[streamId] = (await this.getData(streamId)).filter((s) => s.ID !== sectionId);
-    }
-
-    async update(streamId: number, sectionId: number, request: UpdateVideoSectionRequest) {
-        await VideoSectionAPI.update(streamId, sectionId, request);
-        this.data[streamId] = (await this.getData(streamId)).map((s) => {
-            if (s.ID === sectionId) {
-                s = {
-                    ...s,
-                    startHours: request.StartHours,
-                    startMinutes: request.StartMinutes,
-                    startSeconds: request.StartSeconds,
-                    description: request.Description,
-                    friendlyTimestamp: new Time(
-                        request.StartHours,
-                        request.StartMinutes,
-                        request.StartSeconds,
-                    ).toString(),
-                };
-            }
-            return s;
-        });
-        await this.triggerUpdate(streamId);
-    }
 }
diff --git a/web/ts/edit-course.ts b/web/ts/edit-course.ts
index 039559e60..c517000c6 100644
--- a/web/ts/edit-course.ts
+++ b/web/ts/edit-course.ts
@@ -1,4 +1,4 @@
-import { Delete, patchData, postData, putData, sendFormData, showMessage, uploadFile } from "./global";
+import { patchData, postData, putData, sendFormData } from "./global";
 import { StatusCodes } from "http-status-codes";
 import { DataStore } from "./data-store/data-store";
 import {
@@ -8,10 +8,16 @@ import {
     LectureVideoTypeCam,
     LectureVideoTypeComb,
     LectureVideoTypePres,
-    LectureVideoTypes,
+    VideoSection,
+    videoSectionFriendlyTimestamp,
+    videoSectionHasChanged,
+    videoSectionListDelta,
+    videoSectionSort,
+    videoSectionTimestamp,
 } from "./api/admin-lecture-list";
-import { ChangeSet, ignoreKeys } from "./change-set";
+import { ChangeSet, comparatorPipeline, ignoreKeys, singleProperty } from "./change-set";
 import { AlpineComponent } from "./components/alpine-component";
+import { uploadFile } from "./utilities/fetch-wrappers";
 
 export enum UIEditMode {
     none,
@@ -114,8 +120,29 @@ export function lectureEditor(lecture: Lecture): AlpineComponent {
          * AlpineJS init function which is called automatically in addition to 'x-init'
          */
         init() {
+            const customComparator = comparatorPipeline([
+                ignoreKeys(["files"]),
+                singleProperty("videoSections", (a: Lecture, b: Lecture): boolean | null => {
+                    // List length differs, something was removed or added
+                    if (a.videoSections.length !== b.videoSections.length) {
+                        return true;
+                    }
+
+                    // List length is the same but items do have no id, so they are new.
+                    if (
+                        a.videoSections.some(({ id }) => id === undefined) ||
+                        b.videoSections.some(({ id }) => id === undefined)
+                    ) {
+                        return true;
+                    }
+
+                    // A section has edited and different information now
+                    return a.videoSections.some((sA) => b.videoSections.some((sB) => videoSectionHasChanged(sA, sB)));
+                }),
+            ]);
+
             // This tracks changes that are not saved yet
-            this.changeSet = new ChangeSet<Lecture>(lecture, ignoreKeys(["files"]), (data, dirtyState) => {
+            this.changeSet = new ChangeSet<Lecture>(lecture, customComparator, (data, dirtyState) => {
                 this.lectureData = data;
                 this.isDirty = dirtyState.isDirty;
             });
@@ -191,6 +218,67 @@ export function lectureEditor(lecture: Lecture): AlpineComponent {
             DataStore.adminLectureList.deleteAttachment(this.lectureData.courseId, this.lectureData.lectureId, id);
         },
 
+        friendlySectionTimestamp(section: VideoSection): string {
+            return videoSectionFriendlyTimestamp(section);
+        },
+
+        getSectionKey(section: VideoSection): string {
+            return section.id ? `sid_${section.id}` : section.key;
+        },
+
+        genPseudoSectionKey(): string {
+            return `sts_${new Date().getTime()}`;
+        },
+
+        addSection(section: VideoSection) {
+            this.changeSet.patch(
+                "videoSections",
+                [
+                    ...this.lectureData.videoSections,
+                    {
+                        ...section,
+                        key: this.genPseudoSectionKey(),
+                    },
+                ].sort(videoSectionSort),
+            );
+        },
+
+        updateSection(section: VideoSection) {
+            const sectionKey = this.getSectionKey(section);
+            this.changeSet.patch(
+                "videoSections",
+                [...this.lectureData.videoSections.filter((s) => sectionKey !== this.getSectionKey(s)), section].sort(
+                    videoSectionSort,
+                ),
+            );
+        },
+
+        deleteSection(section) {
+            const sectionKey = this.getSectionKey(section);
+            this.changeSet.patch("videoSections", [
+                ...this.lectureData.videoSections.filter((s) => sectionKey !== this.getSectionKey(s)),
+            ]);
+        },
+
+        isValidVideoSection(section: VideoSection): boolean {
+            const sectionKey = this.getSectionKey(section);
+            const hasValidTime = !this.lectureData.videoSections.some(
+                (s) =>
+                    videoSectionTimestamp(s) == videoSectionTimestamp(section) && sectionKey != this.getSectionKey(s),
+            );
+
+            return (
+                section.description !== "" &&
+                section.startHours !== null &&
+                section.startHours < 32 &&
+                section.startMinutes !== null &&
+                section.startMinutes < 60 &&
+                section.startSeconds !== null &&
+                section.startSeconds < 60 &&
+                hasValidTime
+            );
+        },
+
         deleteLecture() {
             DataStore.adminLectureList.delete(this.lectureData.courseId, [this.lectureData.lectureId]);
         },
@@ -229,7 +317,8 @@ export function lectureEditor(lecture: Lecture): AlpineComponent {
          * Save changes send them to backend and commit change set.
          */
         async saveEdit() {
-            const { courseId, lectureId, name, description, lectureHallId, isChatEnabled } = this.lectureData;
+            const { courseId, lectureId, name, description, lectureHallId, isChatEnabled, videoSections } =
+                this.lectureData;
             const changedKeys = this.changeSet.changedKeys();
 
             try {
@@ -246,6 +335,22 @@ export function lectureEditor(lecture: Lecture): AlpineComponent {
                     },
                 });
 
+                // Saving VideoSections
+                if (changedKeys.includes("videoSections")) {
+                    const oldVideoSections = this.changeSet.getValue("videoSections", { lastCommittedState: true });
+                    const delta = videoSectionListDelta(oldVideoSections, videoSections);
+
+                    if (delta.toAdd.length > 0) {
+                        await DataStore.adminLectureList.addSections(courseId, lectureId, delta.toAdd);
+                    }
+                    for (const section of delta.toUpdate) {
+                        await DataStore.adminLectureList.updateSection(courseId, lectureId, section);
+                    }
+                    for (const section of delta.toDelete) {
+                        await DataStore.adminLectureList.deleteSection(courseId, lectureId, section.id);
+                    }
+                }
+
                 // Uploading new videos
                 for (const videoFile of this.videoFiles) {
                     if (!changedKeys.includes(videoFile.info.key)) {
diff --git a/web/ts/entry/admins.ts b/web/ts/entry/admins.ts
index e4374f0e0..6b222edaa 100644
--- a/web/ts/entry/admins.ts
+++ b/web/ts/entry/admins.ts
@@ -13,4 +13,4 @@ export * from "../courseAdminManagement";
 export * from "../notification-management";
 export * from "../audits";
 export * from "../maintenance";
-export { VideoSectionsAdminController, VideoSectionUpdater } from "../video-sections";
+export * from "../change-set";
diff --git a/web/ts/entry/video.ts b/web/ts/entry/video.ts
index 7d83fb7ff..094fdf963 100644
--- a/web/ts/entry/video.ts
+++ b/web/ts/entry/video.ts
@@ -2,7 +2,6 @@
 export * from "../watch-admin";
 export * from "../TUMLiveVjs";
 export * from "../watch";
-export * from "../video-sections";
 export * from "../splitview";
 export * from "../bookmarks";
 export * from "../subtitle-search";
diff --git a/web/ts/video-sections.ts b/web/ts/video-sections.ts
deleted file mode 100644
index 7d73601e3..000000000
--- a/web/ts/video-sections.ts
+++ /dev/null
@@ -1,134 +0,0 @@
-import { Time } from "./global";
-import { DataStore } from "./data-store/data-store";
-import { Section, UpdateVideoSectionRequest } from "./api/video-sections";
-
-/**
- * Admin Page VideoSection Management
- * @category admin-page
- */
-export class VideoSectionsAdminController {
-    static initiatedInstances: Map<string, Promise<VideoSectionsAdminController>> = new Map<
-        string,
-        Promise<VideoSectionsAdminController>
-    >();
-
-    private readonly streamId: number;
-
-    existingSections: Section[];
-    newSections: Section[];
-    current: Section;
-    unsavedChanges: boolean;
-
-    private elem: HTMLElement;
-    private unsub: () => void;
-
-    constructor(streamId: number) {
-        this.streamId = streamId;
-
-        this.newSections = [];
-        this.existingSections = [];
-        this.unsavedChanges = false;
-        this.resetCurrent();
-    }
-
-    async init(key: string, element: HTMLElement) {
-        if (VideoSectionsAdminController.initiatedInstances[key]) {
-            (await VideoSectionsAdminController.initiatedInstances[key]).unsub();
-        }
-
-        VideoSectionsAdminController.initiatedInstances[key] = new Promise<VideoSectionsAdminController>((resolve) => {
-            this.elem = element;
-            const callback = (data) => this.onUpdate(data);
-            DataStore.videoSections.subscribe(this.streamId, callback).then(() => {
-                this.unsub = () => DataStore.videoSections.unsubscribe(this.streamId, callback);
-                resolve(this);
-            });
-        });
-    }
-
-    onUpdate(data: Section[]) {
-        this.existingSections = data;
-    }
-
-    pushNewSection() {
-        this.current.friendlyTimestamp = new Time(
-            this.current.startHours,
-            this.current.startMinutes,
-            this.current.startSeconds,
-        ).toString();
-        this.newSections.push({ ...this.current });
-        this.resetCurrent();
-        this.unsavedChanges = true;
-    }
-
-    removeNewSection(section: Section) {
-        this.newSections = this.newSections.filter((s) => s !== section);
-        this.unsavedChanges = true;
-    }
-
-    async publishNewSections() {
-        await DataStore.videoSections.add(this.streamId, this.newSections);
-        this.newSections = [];
-        this.unsavedChanges = false;
-    }
-
-    async removeExistingSection(id: number) {
-        await DataStore.videoSections.delete(this.streamId, id);
-        this.existingSections = this.existingSections.filter((s) => s.ID !== id);
-    }
-
-    currentIsValid(): boolean {
-        return (
-            this.current.description !== "" &&
-            this.current.startHours !== null &&
-            this.current.startHours < 32 &&
-            this.current.startMinutes !== null &&
-            this.current.startMinutes < 60 &&
-            this.current.startSeconds !== null &&
-            this.current.startSeconds < 60
-        );
-    }
-
-    private resetCurrent() {
-        this.current = {
-            description: "",
-            startHours: 0,
-            startMinutes: 0,
-            startSeconds: 0,
-            streamID: this.streamId,
-            isCurrent: false,
-        };
-    }
-}
-
-/**
- * Admin Page VideoSection Updater
- * @category admin-page
- */
-export class VideoSectionUpdater {
-    private readonly streamId: number;
-    private section: Section;
-
-    request: UpdateVideoSectionRequest;
-    show: boolean;
-
-    constructor(streamId: number, section: Section) {
-        this.streamId = streamId;
-        this.section = section;
-        this.reset();
-    }
-
-    async update() {
-        await DataStore.videoSections.update(this.streamId, this.section.ID, this.request);
-        this.show = false;
-    }
-
-    reset() {
-        this.request = new UpdateVideoSectionRequest();
-        this.request.Description = this.section.description;
-        this.request.StartHours = this.section.startHours;
-        this.request.StartMinutes = this.section.startMinutes;
-        this.request.StartSeconds = this.section.startSeconds;
-        this.show = false;
-    }
-}