diff --git a/public/editor-settings.toml b/public/editor-settings.toml
index 32e761456..7e6679b36 100644
--- a/public/editor-settings.toml
+++ b/public/editor-settings.toml
@@ -18,7 +18,9 @@ callbackSystem = "OPENCAST"
 
 [opencast]
 # Connect to develop.opencast.org and use the default demo user
-url = 'https://develop.opencast.org'
+# url = 'https://develop.opencast.org'
+# When using the vite proxy, leave url empty so requests go through the dev server
+url = ''
 name = "admin"
 password = "opencast"
 
@@ -48,3 +50,6 @@ spanish = { lang = "es" }
 
 [thumbnail]
 show = true
+
+[comments]
+show = true
diff --git a/src/config.ts b/src/config.ts
index 109be73c7..fdb47123b 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -79,6 +79,9 @@ interface iSettings {
     mainFlavor: string,
     defaultVideoFlavor: Flavor | undefined,
   };
+    comments?: {
+      show: boolean,
+    },
 }
 
 /**
@@ -124,6 +127,9 @@ const defaultSettings: iSettings = {
     mainFlavor: "chapters",
     defaultVideoFlavor: undefined,
   },
+  comments: {
+    show: false,
+  },
 };
 let configFileSettings: iSettings;
 let urlParameterSettings: iSettings;
@@ -430,6 +436,9 @@ const SCHEMA = {
     show: types.boolean,
     simpleMode: types.boolean,
   },
+  comments: {
+    show: types.boolean,
+  },
 };
 
 const merge = (a: iSettings, b: iSettings) => {
diff --git a/src/cssStyles.tsx b/src/cssStyles.tsx
index 0087f5d12..c96b235a7 100644
--- a/src/cssStyles.tsx
+++ b/src/cssStyles.tsx
@@ -71,7 +71,7 @@ export const basicButtonStyle = (theme: Theme) => css({
  * CSS for deactivated buttons
  */
 export const deactivatedButtonStyle = css({
-  borderRadius: "10px",
+  borderRadius: "5px",
   cursor: "pointer",
   opacity: "0.6",
   // Flex position child elements
@@ -83,7 +83,7 @@ export const deactivatedButtonStyle = css({
 });
 
 /**
- * CSS for nagivation styled buttons
+ * CSS for navigation styled buttons
  */
 export const navigationButtonStyle = (theme: Theme) => css({
   width: "200px",
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index 88087ea87..1a73ea076 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -7,6 +7,7 @@
       "chapters-button": "Chapters",
       "thumbnail-button": "Thumbnail",
       "metadata-button": "Metadata",
+      "comments-button": "Comments",
       "keyboard-controls-button": "Keyboard Controls",
       "tooltip-aria": "Main Navigation"
     },
@@ -246,7 +247,8 @@
       "error-text": "An error has occurred. Please wait a bit and try again.",
       "goBack-button": "No, take me back",
       "callback-button-system": "Back to {{system}}",
-      "callback-button-generic": "Back to previous system"
+      "callback-button-generic": "Back to previous system",
+      "loading": "Loading..."
     },
 
     "trackSelection": {
@@ -331,6 +333,46 @@
       "editTitle": "Chapter Editor"
     },
 
+    "comments": {
+      "no-comments": "No comments yet. Be the first to comment!",
+      "resolved": "Resolved",
+      "open": "Open",
+      "reply": "Reply",
+      "delete": "Delete",
+      "add-comment": "Add Comment",
+      "placeholder": "Write your comment...",
+      "select-reason": "Select a reason...",
+      "submit": "Submit",
+      "saving": "Saving...",
+      "reply-to": "Reply to",
+      "reply-placeholder": "Write your reply to",
+      "mark-resolved": "Mark as resolved",
+      "cancel": "Cancel",
+      "pending": "Pending",
+      "pending-tooltip": "Pending changes need to be saved in the Finish tab.",
+      "reasons": {
+        "cutting": "Cutting required",
+        "review": "Review required",
+        "async": "A/V tracks asynchronous",
+        "audio_issue": "Missing or defective audio track",
+        "cancelled": "Canceled event",
+        "conflicting_metadata": "Conflicting metadata",
+        "improper_point": "Improper in or out point",
+        "missing_agreement": "Missing agreement",
+        "other": "Other",
+        "privacy": "Privacy concern",
+        "segmentation": "Inaccurate segmentation",
+        "unknown_creator": "Creator unknown",
+        "video_issue": "Video distorted or cropped",
+        "wrong_input_format": "Input file format not supported",
+        "wrong_metadata": "Metadata needs correction",
+        "wrong_series_publication": "Wrong series or publication channel",
+        "wrong_workflow": "Wrong workflow",
+        "processing_failure": "Processing failure",
+        "admin_ui_notes": "Notes in Admin UI"
+      }
+    },
+
     "keyboardControls": {
       "header": "Shortcuts",
       "defaultGroupName": "General",
diff --git a/src/main/Comments.tsx b/src/main/Comments.tsx
new file mode 100644
index 000000000..b1cbd306d
--- /dev/null
+++ b/src/main/Comments.tsx
@@ -0,0 +1,543 @@
+import { useState } from "react";
+import { css } from "@emotion/react";
+import { useTheme } from "../themes";
+import Select from "react-select";
+import {
+  basicButtonStyle,
+  checkboxStyle as generalCheckboxStyle,
+  titleStyleBold,
+  backgroundBoxStyle,
+  selectFieldStyle,
+} from "../cssStyles";
+import { useTranslation } from "react-i18next";
+import { LuClock9, LuReply, LuTrash2 } from "react-icons/lu";
+import { ThemedTooltip } from "./Tooltip";
+
+import { useAppDispatch, useAppSelector } from "../redux/store";
+import {
+  addComment,
+  addReply,
+  deleteComment,
+  deleteReply,
+  updateResolvedStatus,
+  selectComments,
+  selectCommentReasons,
+  selectStatus,
+} from "../redux/commentSlice";
+import { Comment, CommentReply } from "../types";
+import { settings } from "../config";
+
+/**
+ * Component for managing comments
+ */
+const Comments: React.FC = () => {
+  const theme = useTheme();
+  const { t } = useTranslation();
+  const dispatch = useAppDispatch();
+
+  const comments = useAppSelector(selectComments);
+  const commentReasons = useAppSelector(selectCommentReasons);
+  const status = useAppSelector(selectStatus);
+
+  // Local state for forms
+  const [replyToComment, setReplyToComment] = useState(false);
+  const [replyCommentId, setReplyCommentId] = useState<Comment["id"] | undefined>(undefined);
+  const [originalComment, setOriginalComment] = useState<Comment | undefined>(undefined);
+  const [commentReplyText, setCommentReplyText] = useState("");
+  const [commentReplyIsResolved, setCommentReplyIsResolved] = useState(false);
+
+  const [newCommentText, setNewCommentText] = useState("");
+  const [commentReason, setCommentReason] = useState("");
+
+  // Comments are fetched together with video info via fetchVideoInformation
+
+  // Handlers
+  const handleSaveComment = () => {
+    if (!settings.id || !newCommentText || !commentReason) {
+      return;
+    }
+
+    dispatch(addComment({
+      reason: commentReason,
+      text: newCommentText,
+    }));
+    setNewCommentText("");
+    setCommentReason("");
+  };
+
+  const handleReplyTo = (comment: Comment) => {
+    setReplyToComment(true);
+    setReplyCommentId(comment.id);
+    setOriginalComment(comment);
+    setCommentReplyIsResolved(comment.resolvedStatus);
+  };
+
+  const handleExitReplyMode = () => {
+    setReplyToComment(false);
+    setReplyCommentId(undefined);
+    setOriginalComment(undefined);
+    setCommentReplyText("");
+    setCommentReplyIsResolved(false);
+  };
+
+  const handleSaveReply = () => {
+    if (!settings.id || !originalComment || !commentReplyText) {
+      return;
+    }
+
+    dispatch(addReply({
+      commentId: originalComment.id,
+      text: commentReplyText,
+    }));
+    // Update resolved status locally (allows toggling resolved/open)
+    dispatch(updateResolvedStatus({ commentId: originalComment.id, resolved: commentReplyIsResolved }));
+    handleExitReplyMode();
+  };
+
+  const handleDeleteComment = (comment: Comment) => {
+    dispatch(deleteComment(comment.id));
+  };
+
+  const handleDeleteReply = (comment: Comment, reply: CommentReply) => {
+    dispatch(deleteReply({ commentId: comment.id, replyId: reply.id }));
+  };
+
+  const formatDate = (dateString: string) => {
+    const date = new Date(dateString);
+    return date.toLocaleString(undefined, {
+      year: "numeric",
+      month: "2-digit",
+      day: "2-digit",
+      hour: "2-digit",
+      minute: "2-digit",
+    });
+  };
+
+  // Styles
+  const containerStyle = css({
+    margin: "auto",
+    width: "100%",
+    maxWidth: "1200px",
+    display: "flex",
+    flexDirection: "column",
+    height: "100%",
+  });
+
+  const commentContainerStyle = css({
+    display: "flex",
+    flexDirection: "column",
+    gap: "16px",
+    flex: 1,
+    minHeight: 0,
+    overflowY: "auto",
+    marginBottom: "20px",
+    maxWidth: "100%", // Prevent children from overflowing
+    // Modern scrollbar styling
+    "&::-webkit-scrollbar": {
+      width: "8px",
+      background: theme.background,
+    },
+    "&::-webkit-scrollbar-thumb": {
+      background: theme.text,
+      borderRadius: "5px",
+    },
+  });
+
+  const commentCardStyle = (isActive: boolean) => css([
+    backgroundBoxStyle(theme),
+    {
+      border: isActive ? `${theme.button_outline}` : theme.menuBorder,
+    },
+  ]);
+
+  const replyCardStyle = css({
+    marginTop: "20px",
+    marginLeft: "20px",
+  });
+
+  const commentHeaderStyle = css({
+    display: "flex",
+    alignItems: "center",
+    gap: "12px",
+    marginBottom: "8px",
+    flexWrap: "wrap",
+  });
+
+  const authorStyle = css({
+    fontWeight: "bold",
+    fontSize: "1em",
+    color: theme.text,
+  });
+
+  const badgeStyle = (color?: string) => css({
+    fontSize: "0.75em",
+    color: color || theme.text,
+    border: `1px solid ${color || theme.text}`,
+    padding: "2px 8px",
+    borderRadius: "9999px",
+  });
+
+  // Badge component with optional tooltip support
+  const Badge: React.FC<{ color?: string; tooltip?: string; children: React.ReactNode }> = ({
+    color,
+    tooltip,
+    children,
+  }) => {
+    const badge = <span css={badgeStyle(color)}>{children}</span>;
+    if (tooltip) {
+      return <ThemedTooltip title={tooltip}>{badge}</ThemedTooltip>;
+    }
+    return badge;
+  };
+
+  const commentTextStyle = css({
+    marginTop: "8px",
+    marginBottom: "12px",
+    lineHeight: "1.5",
+    whiteSpace: "pre-wrap",
+    color: theme.text,
+  });
+
+  const actionButtonsStyle = css({
+    display: "flex",
+    gap: "12px",
+    marginTop: "8px",
+    justifyContent: "flex-end",
+  });
+
+  const actionButtonStyle = css([
+    basicButtonStyle(theme),
+    {
+      padding: "6px 12px",
+      border: `1px solid ${theme.text}`,
+      color: theme.text,
+      background: "transparent",
+      gap: "6px",
+      minWidth: 0,
+      "&:hover": {
+        background: theme.text,
+        borderColor: theme.text,
+        color: theme.menu_background,
+      },
+      outline: "none",
+    },
+  ]);
+
+  const deleteButtonStyle = css([
+    basicButtonStyle(theme),
+    {
+      padding: "6px 12px",
+      border: `1px solid ${theme.error}`,
+      color: theme.error,
+      background: "transparent",
+      gap: "6px",
+      minWidth: 0,
+      "&:hover": {
+        background: theme.error,
+        color: theme.menu_background,
+      },
+      outline: "none",
+    },
+  ]);
+
+  const textareaStyle = css({
+    width: "100%",
+    maxWidth: "100%",
+    minHeight: "100px",
+    padding: "12px",
+    borderRadius: "5px",
+    border: theme.menuBorder,
+    background: theme.element_bg,
+    color: theme.text,
+    fontSize: "1em",
+    fontFamily: "inherit",
+    resize: "none",
+    boxSizing: "border-box",
+    transition: "border-color 0.2s",
+  });
+
+  const selectContainerStyle = css({
+    width: "100%",
+    maxWidth: "500px",
+  });
+
+  const rowContainerStyle = css({
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    flexWrap: "wrap",
+    gap: "12px",
+    marginTop: "12px",
+  });
+
+  const checkboxStyle = css([
+    generalCheckboxStyle(theme),
+    {
+      width: "18px",
+      height: "18px",
+      cursor: "pointer",
+    },
+  ]);
+
+  const buttonContainerStyle = css({
+    display: "flex",
+    gap: "12px",
+  });
+
+  const submitButtonStyle = (disabled: boolean) => css([
+    basicButtonStyle(theme),
+    {
+      padding: "10px 20px",
+      fontSize: "1em",
+      fontWeight: "bold",
+      border: theme.menuBorder,
+      background: disabled ? theme.menu_background : "#4caf50",
+      color: disabled ? theme.text : theme.menu_background,
+      cursor: disabled ? "not-allowed" : "pointer",
+      opacity: disabled ? 0.6 : 1,
+      "&:hover": {
+        background: disabled ? theme.menu_background : "#45a049",
+        color: disabled ? theme.text : "white",
+      },
+      "&:focus": {
+        borderColor: theme.metadata_highlight,
+      },
+      outline: "none",
+    },
+  ]);
+
+  const cancelButtonStyle = css([
+    basicButtonStyle(theme),
+    {
+      padding: "10px 20px",
+      fontSize: "1em",
+      border: `1px solid ${theme.error}`,
+      color: theme.error,
+      background: "transparent",
+      "&:hover": {
+        background: theme.error,
+        color: theme.menu_background,
+      },
+      outline: "none",
+    },
+  ]);
+
+  const loadingStyle = css({
+    textAlign: "center",
+    padding: "40px",
+    fontSize: "1.2em",
+    color: theme.text,
+  });
+
+  const emptyStateStyle = css({
+    textAlign: "center",
+    padding: "40px",
+    color: theme.text,
+    opacity: 0.7,
+  });
+
+  // Render loading state
+  if (status === "loading") {
+    return (
+      <div css={containerStyle}>
+        <div css={loadingStyle}>{t("various.loading")}</div>
+      </div>
+    );
+  }
+
+  return (
+    <div css={containerStyle}>
+      <h2 css={titleStyleBold(theme)}>{t("mainMenu.comments-button")}</h2>
+
+      {/* Comments List */}
+      <div css={commentContainerStyle}>
+        {comments.length === 0 ? (
+          <div css={emptyStateStyle}>
+            {t("comments.no-comments")}
+          </div>
+        ) : (
+          comments.map(comment => (
+            <div key={comment.id} css={commentCardStyle(replyCommentId === comment.id)}>
+              {/* Comment Header */}
+              <div css={commentHeaderStyle}>
+                <div css={css({ display: "flex", flexDirection: "column", flex: 1 })}>
+                  <div css={css({ display: "flex", alignItems: "center", gap: "8px" })}>
+                    <span css={authorStyle}>{comment.author}</span>
+                    {comment.pending && (
+                      <Badge color="#ff9800" tooltip={t("comments.pending-tooltip")}>
+                        {t("comments.pending")}
+                      </Badge>
+                    )}
+                    <Badge color={comment.resolvedStatus ? "#4caf50" : "#2684ff"}>
+                      {t(comment.resolvedStatus ? "comments.resolved" : "comments.open")}
+                    </Badge>
+                    <Badge>
+                      {t(`comments.reasons.${comment.reason}` as never)}
+                    </Badge>
+                  </div>
+                </div>
+                <span css={css({
+                  display: "flex",
+                  alignItems: "center",
+                  gap: "6px",
+                  fontSize: "0.9em",
+                  color: theme.text,
+                  opacity: 0.7,
+                  marginLeft: "auto",
+                  whiteSpace: "nowrap",
+                })}>
+                  <LuClock9 size={14} />
+                  {formatDate(comment.creationDate)}
+                </span>
+              </div>
+
+              {/* Comment Text */}
+              <div css={commentTextStyle}>{comment.text}</div>
+
+              {/* Action Buttons */}
+              <div css={actionButtonsStyle}>
+                <button css={actionButtonStyle} onClick={() => handleReplyTo(comment)}>
+                  <LuReply size={16} />
+                  {t("comments.reply")}
+                </button>
+                <button css={deleteButtonStyle} onClick={() => handleDeleteComment(comment)}>
+                  <LuTrash2 size={16} />
+                  {t("comments.delete")}
+                </button>
+              </div>
+
+              {/* Replies */}
+              {comment.replies.map(reply => (
+                <div key={reply.id} css={replyCardStyle}>
+                  <div css={commentHeaderStyle}>
+                    <div css={css({ display: "flex", alignItems: "center", gap: "8px", flex: 1 })}>
+                      <span css={authorStyle}>{reply.author}</span>
+                      {reply.pending && (
+                        <Badge color="#ff9800" tooltip={t("comments.pending-tooltip")}>
+                          {t("comments.pending")}
+                        </Badge>
+                      )}
+                    </div>
+                    <span css={css({
+                      display: "flex",
+                      alignItems: "center",
+                      gap: "6px",
+                      fontSize: "0.9em",
+                      color: theme.text,
+                      opacity: 0.7,
+                      marginLeft: "auto",
+                      whiteSpace: "nowrap",
+                    })}>
+                      <LuClock9 size={12} />
+                      {formatDate(reply.creationDate)}
+                    </span>
+                  </div>
+                  <div css={commentTextStyle}>
+                    {reply.text}
+                  </div>
+                  <div css={css({ display: "flex", justifyContent: "flex-end" })}>
+                    <button
+                      css={deleteButtonStyle}
+                      onClick={() => handleDeleteReply(comment, reply)}
+                    >
+                      <LuTrash2 size={16} />
+                      {t("comments.delete")}
+                    </button>
+                  </div>
+                </div>
+              ))}
+            </div>
+          ))
+        )}
+      </div>
+
+      {/* Add Comment Form (hidden when replying) */}
+      {!replyToComment && (
+        <div css={css({ paddingBottom: "20px" })}>
+          <textarea
+            css={textareaStyle}
+            value={newCommentText}
+            onChange={e => setNewCommentText(e.target.value)}
+            placeholder={t("comments.placeholder")}
+          />
+
+          {/* flex row container for select and buttons */}
+          <div css={rowContainerStyle}>
+            {/* "Select a reason" dropdown */}
+            <div css={selectContainerStyle}>
+              <Select<{ value: string; label: string }>
+                styles={selectFieldStyle(theme)}
+                value={commentReason
+                  ? { value: commentReason, label: t(`comments.reasons.${commentReason}` as never) }
+                  : null}
+                onChange={selected => setCommentReason(selected?.value || "")}
+                options={commentReasons.map(reason => ({
+                  value: reason,
+                  label: t(`comments.reasons.${reason}` as never),
+                }))}
+                placeholder={t("comments.select-reason")}
+                isClearable
+                menuPlacement="top"
+              />
+            </div>
+
+            {/* Buttons */}
+            <button
+              css={submitButtonStyle(!newCommentText || !commentReason)}
+              onClick={handleSaveComment}
+              disabled={!newCommentText || !commentReason}
+            >
+              {t("comments.submit")}
+            </button>
+          </div>
+        </div>
+      )}
+
+      {/* Reply Form (shown when replying) */}
+      {replyToComment && originalComment && (
+        <div css={css({ paddingBottom: "20px" })}>
+          <textarea
+            css={textareaStyle}
+            value={commentReplyText}
+            onChange={e => setCommentReplyText(e.target.value)}
+            placeholder={
+              t("comments.reply-placeholder") +
+              " @" +
+              originalComment.author +
+              "..."
+            }
+          />
+
+          <div css={rowContainerStyle}>
+            <div css={css({ display: "flex", alignItems: "center", gap: "8px" })}>
+              <input
+                type="checkbox"
+                id="resolved-checkbox"
+                css={checkboxStyle}
+                checked={commentReplyIsResolved}
+                onChange={e => setCommentReplyIsResolved(e.target.checked)}
+              />
+              <label htmlFor="resolved-checkbox" style={{ cursor: "pointer" }}>
+                {t("comments.mark-resolved")}
+              </label>
+            </div>
+            <div css={buttonContainerStyle}>
+              <button css={cancelButtonStyle} onClick={handleExitReplyMode}>
+                {t("comments.cancel")}
+              </button>
+              <button
+                css={submitButtonStyle(!commentReplyText)}
+                onClick={handleSaveReply}
+                disabled={!commentReplyText}
+              >
+                {t("comments.reply")}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Comments;
diff --git a/src/main/MainContent.tsx b/src/main/MainContent.tsx
index bc55065a7..6a3ea67ee 100644
--- a/src/main/MainContent.tsx
+++ b/src/main/MainContent.tsx
@@ -23,6 +23,7 @@ import { useTheme } from "../themes";
 import Thumbnail from "./Thumbnail";
 import Cutting from "./Cutting";
 import Chapter from "./Chapter";
+import Comments from "./Comments";
 
 /**
  * A container for the main functionality
@@ -144,6 +145,12 @@ const MainContent: React.FC = () => {
           <Thumbnail />
         </div>
       );
+    } else if (mainMenuState === MainMenuStateNames.comments) {
+      return (
+        <div css={[mainContentStyle, subtitleSelectStyle]} role="main">
+          <Comments />
+        </div>
+      );
     } else if (mainMenuState === MainMenuStateNames.finish) {
       return (
         <div css={[mainContentStyle, finishStyle]} role="main"
diff --git a/src/main/MainMenu.tsx b/src/main/MainMenu.tsx
index 2eeb0a6dc..32281b287 100644
--- a/src/main/MainMenu.tsx
+++ b/src/main/MainMenu.tsx
@@ -3,8 +3,15 @@ import React from "react";
 import { css, SerializedStyles } from "@emotion/react";
 
 import { IconType } from "react-icons";
-import { LuScissors, LuFilm, LuFileText, LuSquareCheckBig, LuBookOpenText } from "react-icons/lu";
-import { LuImage } from "react-icons/lu";
+import {
+  LuScissors,
+  LuFilm,
+  LuFileText,
+  LuSquareCheckBig,
+  LuBookOpenText,
+  LuMessageCircle,
+  LuImage,
+} from "react-icons/lu";
 import SubtitleIcon from "../img/subtitle.svg?react";
 
 import { useAppDispatch, useAppSelector } from "../redux/store";
@@ -88,6 +95,12 @@ const MainMenu: React.FC = () => {
         bottomText={t(MainMenuStateNames.thumbnail)}
         ariaLabelText={t(MainMenuStateNames.thumbnail)}
       />}
+      {settings.comments?.show && <MainMenuButton
+        Icon={LuMessageCircle}
+        stateName={MainMenuStateNames.comments}
+        bottomText={t(MainMenuStateNames.comments)}
+        ariaLabelText={t(MainMenuStateNames.comments)}
+      />}
       <MainMenuButton
         Icon={LuSquareCheckBig}
         stateName={MainMenuStateNames.finish}
diff --git a/src/main/Save.tsx b/src/main/Save.tsx
index 7bc5b1a40..37f09f24b 100644
--- a/src/main/Save.tsx
+++ b/src/main/Save.tsx
@@ -31,6 +31,10 @@ import {
   selectSubtitles, selectHasChanges as selectSubtitleHasChanges,
   setHasChanges as subtitleSetHasChanges,
 } from "../redux/subtitleSlice";
+import {
+  selectComments,
+  setHasChanges as commentSetHasChanges,
+} from "../redux/commentSlice";
 import { serializeSubtitle } from "../util/utilityFunctions";
 import { useTheme } from "../themes";
 import { ThemedTooltip } from "./Tooltip";
@@ -131,6 +135,7 @@ export const SaveButton: React.FC<{
   const subtitles = useAppSelector(selectSubtitles);
   const chapters = useAppSelector(selectChapters);
   const metadata = useAppSelector(selectAllCatalogs);
+  const comments = useAppSelector(selectComments);
   const selectedWorkflowId = useAppSelector(selectSelectedWorkflowId);
   const workflowStatus = useAppSelector(selectStatus);
   const theme = useTheme();
@@ -173,6 +178,7 @@ export const SaveButton: React.FC<{
       subtitles: prepareSubtitles(subtitles),
       chapters: prepareSubtitles(chapters),
       metadata: metadata,
+      comments: comments,
       workflow: startWorkflow && selectedWorkflowId ? [{ id: selectedWorkflowId }] : undefined,
     }));
   };
@@ -186,6 +192,7 @@ export const SaveButton: React.FC<{
       dispatch(videoSetHasChanges(false));
       dispatch(metadataSetHasChanges(false));
       dispatch(subtitleSetHasChanges(false));
+      dispatch(commentSetHasChanges(false));
     }
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [dispatch, workflowStatus]);
diff --git a/src/redux/commentSlice.ts b/src/redux/commentSlice.ts
new file mode 100644
index 000000000..86f000adc
--- /dev/null
+++ b/src/redux/commentSlice.ts
@@ -0,0 +1,210 @@
+import { createSlice, nanoid, PayloadAction } from "@reduxjs/toolkit";
+
+import { Comment, CommentReply, httpRequestState } from "../types";
+import { fetchVideoInformation } from "./videoSlice";
+import { postVideoInformation } from "./workflowPostSlice";
+
+interface CommentState {
+  comments: Comment[];
+  commentReasons: string[];
+  hasChanges: boolean;
+}
+
+/**
+ * Strip the reason key for localization
+ * (e.g. "EVENTS.EVENTS.DETAILS.COMMENTS.REASONS.REVIEW" -> review)
+ */
+const normalizeReason = (reason: string): string => {
+  const parts = reason.toLowerCase().split("reasons.");
+  return parts.length > 1 ? parts[parts.length - 1] : reason;
+};
+
+const initialState: CommentState & httpRequestState = {
+  comments: [],
+  commentReasons: [],
+  hasChanges: false,
+
+  status: "idle",
+  error: undefined,
+  errorReason: "unknown",
+};
+
+/**
+ * Slice for managing comments
+ * All changes are applied locally first and then saved together with other changes
+ * via postVideoInformation in workflowPostSlice.ts
+ */
+const commentSlice = createSlice({
+  name: "commentState",
+  initialState,
+  reducers: {
+    setHasChanges: (state, action: PayloadAction<CommentState["hasChanges"]>) => {
+      state.hasChanges = action.payload;
+    },
+    /**
+     * Add a new comment locally
+     */
+    addComment: (state, action: PayloadAction<{
+      reason: string;
+      text: string;
+    }>) => {
+      const newComment: Comment = {
+        id: nanoid(),
+        creationDate: new Date().toISOString(),
+        author: "",  // Backend stamps the actual author via SecurityService
+        reason: action.payload.reason,
+        text: action.payload.text,
+        resolvedStatus: false,
+        replies: [],
+        pending: true,  // Mark as pending until saved to backend
+      };
+      state.comments.push(newComment);
+      state.hasChanges = true;
+    },
+    /**
+     * Add a reply to a comment locally
+     */
+    addReply: (state, action: PayloadAction<{
+      commentId: Comment["id"];
+      text: string;
+    }>) => {
+      const comment = state.comments.find(c => c.id === action.payload.commentId);
+      if (comment) {
+        const newReply: CommentReply = {
+          id: nanoid(),
+          creationDate: new Date().toISOString(),
+          author: "",  // Backend stamps the actual author via SecurityService
+          text: action.payload.text,
+          pending: true,  // Mark as pending until saved to backend
+        };
+        comment.replies.push(newReply);
+        state.hasChanges = true;
+      }
+    },
+    /**
+     * Delete a comment locally
+     */
+    deleteComment: (state, action: PayloadAction<Comment["id"]>) => {
+      state.comments = state.comments.filter(c => c.id !== action.payload);
+      state.hasChanges = true;
+    },
+    /**
+     * Delete a reply locally
+     */
+    deleteReply: (state, action: PayloadAction<{
+      commentId: Comment["id"];
+      replyId: CommentReply["id"];
+    }>) => {
+      const comment = state.comments.find(c => c.id === action.payload.commentId);
+      if (comment) {
+        comment.replies = comment.replies.filter(r => r.id !== action.payload.replyId);
+        state.hasChanges = true;
+      }
+    },
+    /**
+     * Update the resolved status of a comment locally
+     */
+    updateResolvedStatus: (state, action: PayloadAction<{
+      commentId: Comment["id"];
+      resolved: boolean;
+    }>) => {
+      const comment = state.comments.find(c => c.id === action.payload.commentId);
+      if (comment) {
+        comment.resolvedStatus = action.payload.resolved;
+        state.hasChanges = true;
+      }
+    },
+    /**
+     * Update the text of a comment locally
+     */
+    updateCommentText: (state, action: PayloadAction<{
+      commentId: Comment["id"];
+      text: string;
+    }>) => {
+      const comment = state.comments.find(c => c.id === action.payload.commentId);
+      if (comment) {
+        comment.text = action.payload.text;
+        state.hasChanges = true;
+      }
+    },
+    /**
+     * Update the reason of a comment locally
+     */
+    updateCommentReason: (state, action: PayloadAction<{
+      commentId: Comment["id"];
+      reason: string;
+    }>) => {
+      const comment = state.comments.find(c => c.id === action.payload.commentId);
+      if (comment) {
+        comment.reason = action.payload.reason;
+        state.hasChanges = true;
+      }
+    },
+  },
+  extraReducers: builder => {
+    // Listen to fetchVideoInformation to populate comments from edit.json
+    builder.addCase(
+      fetchVideoInformation.pending, (state, _action) => {
+        state.status = "loading";
+      });
+    builder.addCase(
+      fetchVideoInformation.fulfilled, (state, { payload }) => {
+        // Comments and reasons are fetched together with video info
+        if (payload.comments) {
+          state.comments = payload.comments.map(c => ({ ...c, reason: normalizeReason(c.reason) }));
+        }
+        if (payload.commentReasons) {
+          state.commentReasons = payload.commentReasons.map(normalizeReason);
+        }
+        state.status = "success";
+        state.hasChanges = false;
+      });
+    builder.addCase(
+      fetchVideoInformation.rejected, (state, action) => {
+        state.status = "failed";
+        state.error = action.error.message;
+      });
+    // Clear pending flags after successful save
+    builder.addCase(
+      postVideoInformation.fulfilled, state => {
+        state.comments.forEach(comment => {
+          comment.pending = false;
+          comment.replies.forEach(reply => {
+            reply.pending = false;
+          });
+        });
+      });
+  },
+  selectors: {
+    selectComments: state => state.comments,
+    selectCommentReasons: state => state.commentReasons,
+    selectHasChanges: state => state.hasChanges,
+    selectStatus: state => state.status,
+    selectError: state => state.error,
+    selectCommentById: (state, commentId: Comment["id"]) => {
+      return state.comments.find(c => c.id === commentId);
+    },
+  },
+});
+
+export const {
+  setHasChanges,
+  addComment,
+  addReply,
+  deleteComment,
+  deleteReply,
+  updateResolvedStatus,
+  updateCommentText,
+  updateCommentReason,
+} = commentSlice.actions;
+
+export const {
+  selectComments,
+  selectCommentReasons,
+  selectHasChanges,
+  selectStatus,
+  selectError,
+  selectCommentById,
+} = commentSlice.selectors;
+
+export default commentSlice.reducer;
diff --git a/src/redux/store.ts b/src/redux/store.ts
index e45cc5a43..b639c3466 100644
--- a/src/redux/store.ts
+++ b/src/redux/store.ts
@@ -8,6 +8,7 @@ import metadataReducer from "./metadataSlice";
 import subtitleReducer from "./subtitleSlice";
 import chapterReducer from "./chapterSlice";
 import errorReducer from "./errorSlice";
+import commentReducer from "./commentSlice";
 import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux";
 
 export const store = configureStore({
@@ -21,6 +22,7 @@ export const store = configureStore({
     subtitleState: subtitleReducer,
     chapterState: chapterReducer,
     errorState: errorReducer,
+    commentState: commentReducer,
   },
 });
 
diff --git a/src/redux/videoSlice.ts b/src/redux/videoSlice.ts
index db4dc4296..4b09faf2c 100644
--- a/src/redux/videoSlice.ts
+++ b/src/redux/videoSlice.ts
@@ -103,6 +103,9 @@ type FetchVideoInformation = {
   chapters:video["subtitlesFromOpencast"],
   local: boolean,
   customizedTrackSelection: boolean, // TODO: Figure out if this still exists
+  comments?: { id: number; creationDate: string; author: string; reason: string; text: string;
+    resolvedStatus: boolean; replies: { id: number; creationDate: string; author: string; text: string }[] }[],
+  commentReasons?: string[],
 }
 
 export const fetchVideoInformation = createAppAsyncThunk("video/fetchVideoInformation", async () => {
diff --git a/src/redux/workflowPostSlice.ts b/src/redux/workflowPostSlice.ts
index dfc9c73f7..824ba294d 100644
--- a/src/redux/workflowPostSlice.ts
+++ b/src/redux/workflowPostSlice.ts
@@ -1,6 +1,6 @@
 import { createSlice } from "@reduxjs/toolkit";
 import { client } from "../util/client";
-import { Segment, PostEditArgument, httpRequestState } from "../types";
+import { Segment, Comment, PostEditArgument, httpRequestState } from "../types";
 import { settings } from "../config";
 import { createAppAsyncThunk } from "./createAsyncThunkWithTypes";
 import { selectCatalogById, selectCatalogIds, selectFieldById } from "./metadataSlice";
@@ -11,6 +11,28 @@ const initialState: httpRequestState = {
   errorReason: "unknown",
 };
 
+/**
+ * Convert comments for the backend API.
+ * New comments (with nanoid string IDs) get id 0 so the backend knows to create them.
+ * The `pending` field is stripped since the backend doesn't know about it.
+ */
+const convertComments = (comments: Comment[]) => {
+  return comments.map(comment => ({
+    id: typeof comment.id === "string" ? 0 : comment.id,
+    creationDate: comment.creationDate,
+    author: comment.author,
+    reason: comment.reason,
+    text: comment.text,
+    resolvedStatus: comment.resolvedStatus,
+    replies: comment.replies.map(reply => ({
+      id: typeof reply.id === "string" ? 0 : reply.id,
+      creationDate: reply.creationDate,
+      author: reply.author,
+      text: reply.text,
+    })),
+  }));
+};
+
 export const postVideoInformation =
   createAppAsyncThunk("video/postVideoInformation", async (argument: PostEditArgument, { getState }) => {
     if (!settings.id) {
@@ -48,6 +70,7 @@ export const postVideoInformation =
         chapters: argument.chapters,
         workflows: argument.workflow,
         metadataJSON: JSON.stringify(catalogsJson),
+        comments: convertComments(argument.comments),
       },
     );
     return response;
diff --git a/src/types.ts b/src/types.ts
index ef3f9fa7c..a08cf0656 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -68,6 +68,25 @@ export interface ExtendedSubtitleCue extends SubtitleCue {
   textPosition : string
 }
 
+export interface CommentReply {
+  id: number | string;
+  creationDate: string;
+  author: string;  // username of the author
+  text: string;
+  pending?: boolean;  // UI-only: true if not yet saved to backend
+}
+
+export interface Comment {
+  id: number | string;
+  creationDate: string;
+  author: string;  // username of the author
+  reason: string;
+  text: string;
+  resolvedStatus: boolean;
+  replies: CommentReply[];
+  pending?: boolean;  // UI-only: true if not yet saved to backend
+}
+
 export interface PostEditArgument {
   segments: Segment[]
   tracks: Track[]
@@ -76,6 +95,7 @@ export interface PostEditArgument {
   chapters: SubtitlesFromOpencast[]
   workflow?: [{id: string}]
   metadata: Catalog[]
+  comments: Comment[]
 }
 
 // Use respective i18n keys as values
@@ -86,6 +106,7 @@ export enum MainMenuStateNames {
   subtitles = "mainMenu.subtitles-button",
   chapters = "mainMenu.chapters-button",
   thumbnail = "mainMenu.thumbnail-button",
+  comments = "mainMenu.comments-button",
   finish = "mainMenu.finish-button",
   keyboardControls = "mainMenu.keyboard-controls-button",
 }
diff --git a/vite.config.ts b/vite.config.ts
index 83b01f7a4..f9fe0680d 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -12,6 +12,51 @@ export default defineConfig(() => {
     base: process.env.PUBLIC_URL || "",
     server: {
       open: true,
+      proxy: {
+        '/editor/': {
+          target: 'http://localhost:8080',
+          changeOrigin: true,
+          selfHandleResponse: true,
+          configure: (proxy, _options) => {
+            proxy.on('proxyRes', (proxyRes, req, res) => {
+              const contentType = proxyRes.headers['content-type'] || '';
+              // Rewrite JSON responses to replace absolute Opencast URLs with relative paths
+              if (contentType.includes('application/json') || contentType.includes('text/json')) {
+                let body = '';
+                proxyRes.on('data', (chunk: Buffer) => { body += chunk.toString(); });
+                proxyRes.on('end', () => {
+                  body = body.replaceAll('http://localhost:8080', '');
+                  res.writeHead(proxyRes.statusCode || 200, {
+                    ...proxyRes.headers,
+                    'content-length': Buffer.byteLength(body),
+                  });
+                  res.end(body);
+                });
+              } else {
+                res.writeHead(proxyRes.statusCode || 200, proxyRes.headers);
+                proxyRes.pipe(res);
+              }
+            });
+          },
+        },
+        '/info': {
+          target: 'http://localhost:8080',
+          changeOrigin: true,
+        },
+        '/api': {
+          target: 'http://localhost:8080',
+          changeOrigin: true,
+        },
+        '/static': {
+          target: 'http://localhost:8080',
+          changeOrigin: true,
+          auth: 'admin:opencast',
+        },
+        '/assets': {
+          target: 'http://localhost:8080',
+          changeOrigin: true,
+        },
+      },
     },
     build: {
       outDir: "build",