diff --git a/app/components/Lightbox.tsx b/app/components/Lightbox.tsx
index 448dd59a5f..fa4b9bdbc3 100644
--- a/app/components/Lightbox.tsx
+++ b/app/components/Lightbox.tsx
@@ -2,7 +2,12 @@ import { observer } from "mobx-react";
 import * as Dialog from "@radix-ui/react-dialog";
 import type { Keyframes } from "styled-components";
 import styled, { css, keyframes } from "styled-components";
-import type { ComponentProps, HTMLAttributes, ReactNode } from "react";
+import type {
+  ComponentProps,
+  HTMLAttributes,
+  ReactNode,
+  SyntheticEvent,
+} from "react";
 import {
   createContext,
   forwardRef,
@@ -18,6 +23,7 @@ import { Error as ImageError } from "@shared/editor/components/Image";
 import {
   BackIcon,
   CloseIcon,
+  CommentIcon,
   CrossIcon,
   DownloadIcon,
   LinkIcon,
@@ -55,6 +61,9 @@ import { NodeSelection } from "prosemirror-state";
 import { ImageSource } from "@shared/editor/lib/FileHelper";
 import Desktop from "~/utils/Desktop";
 import { HStack } from "./primitives/HStack";
+import { useDocumentContext } from "./DocumentContext";
+import LightboxComments from "~/scenes/Document/components/Comments/LightboxComments";
+import { PortalContext } from "./Portal";
 
 export enum LightboxStatus {
   READY_TO_OPEN,
@@ -88,6 +97,15 @@ type Animation = {
 
 const ANIMATION_DURATION = 0.3 * Second.ms;
 
+/**
+ * Stops a React synthetic event from propagating to ancestor handlers, including
+ * Radix Dialog's outside-interaction detection and the editor's own click
+ * handlers, so the comments sidebar can manage its own focus.
+ */
+const stopPropagation = (event: SyntheticEvent) => {
+  event.stopPropagation();
+};
+
 type Props = {
   /** List of allowed images */
   images: LightboxImage[];
@@ -225,6 +243,11 @@ function Lightbox({ images, activeImage, onUpdate, onClose, readOnly }: Props) {
   const overlayRef = useRef<HTMLDivElement | null>(null);
   const contentRef = useRef<HTMLDivElement | null>(null);
   const [status, setStatus] = useState<Status>({ lightbox: null, image: null });
+  const [commentsOpen, setCommentsOpen] = useState(false);
+  const [commentsRendered, setCommentsRendered] = useState(false);
+  const [commentsVisible, setCommentsVisible] = useState(false);
+  const [commentsPortalEl, setCommentsPortalEl] =
+    useState<HTMLDivElement | null>(null);
   const animation = useRef<Animation | null>(null);
   const finalImage = useRef<{
     center: { x: number; y: number };
@@ -233,6 +256,10 @@ function Lightbox({ images, activeImage, onUpdate, onClose, readOnly }: Props) {
   } | null>(null);
   const zoomPanPinchRef = useRef<ReactZoomPanPinchRef>(null);
   const editor = useEditor();
+  const { document: contextDocument } = useDocumentContext();
+  const activeNode = editor?.view?.state?.doc?.nodeAt(activeImage.pos);
+  const canShowComments =
+    !!contextDocument && activeNode?.type.name === "image";
 
   const currentImageIndex = findIndex(
     images,
@@ -312,6 +339,19 @@ function Lightbox({ images, activeImage, onUpdate, onClose, readOnly }: Props) {
     }
   }, [status.lightbox]);
 
+  useEffect(() => {
+    if (commentsOpen) {
+      setCommentsRendered(true);
+      const frame = window.requestAnimationFrame(() =>
+        setCommentsVisible(true)
+      );
+      return () => window.cancelAnimationFrame(frame);
+    }
+    setCommentsVisible(false);
+    const timer = window.setTimeout(() => setCommentsRendered(false), 200);
+    return () => window.clearTimeout(timer);
+  }, [commentsOpen]);
+
   useEffect(() => {
     if (status.image === ImageStatus.MIN_ZOOM) {
       // It was observed that focus went to `body` as the zoom out button was disabled
@@ -441,6 +481,10 @@ function Lightbox({ images, activeImage, onUpdate, onClose, readOnly }: Props) {
         status.image === ImageStatus.MAX_ZOOM
       )
     ) {
+      // Refresh the cached natural image position to account for any layout
+      // changes (e.g., the comments sidebar opening) since the image loaded.
+      rememberImagePosition();
+
       // in lightbox
       const lightboxImgDOMRect = imgRef.current.getBoundingClientRect();
       const {
@@ -632,17 +676,30 @@ function Lightbox({ images, activeImage, onUpdate, onClose, readOnly }: Props) {
   }, [activeImage, status.lightbox]);
 
   const handleKeyDown = (ev: React.KeyboardEvent<HTMLDivElement>) => {
-    ev.preventDefault();
+    // Don't intercept keys while typing into an input, textarea, or editor.
+    const target = ev.target as HTMLElement | null;
+    if (
+      target &&
+      target !== ev.currentTarget &&
+      (target.tagName === "INPUT" ||
+        target.tagName === "TEXTAREA" ||
+        target.isContentEditable)
+    ) {
+      return;
+    }
     switch (ev.key) {
       case "ArrowLeft": {
+        ev.preventDefault();
         prev();
         break;
       }
       case "ArrowRight": {
+        ev.preventDefault();
         next();
         break;
       }
       case "Escape": {
+        ev.preventDefault();
         close();
         break;
       }
@@ -698,14 +755,21 @@ function Lightbox({ images, activeImage, onUpdate, onClose, readOnly }: Props) {
           onAnimationStart={handleFadeStart}
           onAnimationEnd={handleFadeEnd}
         />
-        <StyledContent onKeyDown={handleKeyDown} ref={contentRef}>
+        <StyledContent
+          onKeyDown={handleKeyDown}
+          ref={contentRef}
+          $commentsOpen={canShowComments && commentsOpen}
+        >
           <VisuallyHidden.Root>
             <Dialog.Title>{t("Lightbox")}</Dialog.Title>
             <Dialog.Description>
               {t("View, navigate, or download images in the document")}
             </Dialog.Description>
           </VisuallyHidden.Root>
-          <Actions animation={animation.current}>
+          <Actions
+            animation={animation.current}
+            $commentsOpen={canShowComments && commentsOpen}
+          >
             <Tooltip content={t("Zoom in")} placement="bottom">
               <ActionButton
                 tabIndex={-1}
@@ -788,7 +852,22 @@ function Lightbox({ images, activeImage, onUpdate, onClose, readOnly }: Props) {
                   />
                 </Tooltip>
               )}
-            <Separator />
+            {canShowComments && (
+              <Tooltip content={t("Comments")} placement="bottom">
+                <ActionButton
+                  tabIndex={-1}
+                  onClick={() => setCommentsOpen((open) => !open)}
+                  aria-label={t("Comments")}
+                  aria-pressed={commentsOpen}
+                  size={32}
+                  icon={<CommentIcon />}
+                  borderOnHover
+                  neutral
+                />
+              </Tooltip>
+            )}
+          </Actions>
+          <CloseAction animation={animation.current}>
             <Dialog.Close asChild>
               <Tooltip content={t("Close")} shortcut="Esc" placement="bottom">
                 <ActionButton
@@ -802,7 +881,7 @@ function Lightbox({ images, activeImage, onUpdate, onClose, readOnly }: Props) {
                 />
               </Tooltip>
             </Dialog.Close>
-          </Actions>
+          </CloseAction>
           {currentImageIndex > 0 &&
             !(
               status.image === ImageStatus.ZOOMED ||
@@ -878,12 +957,36 @@ function Lightbox({ images, activeImage, onUpdate, onClose, readOnly }: Props) {
               status.image === ImageStatus.ZOOMED ||
               status.image === ImageStatus.MAX_ZOOM
             ) && (
-              <Nav dir="right" $hidden={isIdle} animation={animation.current}>
+              <Nav
+                dir="right"
+                $hidden={isIdle}
+                animation={animation.current}
+                $commentsOpen={canShowComments && commentsOpen}
+              >
                 <NavButton onClick={next} size={32} aria-label={t("Next")}>
                   <NextIcon size={32} />
                 </NavButton>
               </Nav>
             )}
+          {canShowComments && commentsRendered && contextDocument && (
+            <CommentsSidebar
+              ref={setCommentsPortalEl}
+              animation={animation.current}
+              $open={commentsVisible}
+              onPointerDown={stopPropagation}
+              onPointerUp={stopPropagation}
+              onMouseDown={stopPropagation}
+              onMouseUp={stopPropagation}
+              onClick={stopPropagation}
+            >
+              <PortalContext.Provider value={commentsPortalEl}>
+                <LightboxComments
+                  document={contextDocument}
+                  pos={activeImage.pos}
+                />
+              </PortalContext.Provider>
+            </CommentsSidebar>
+          )}
         </StyledContent>
       </Dialog.Portal>
     </Dialog.Root>
@@ -1090,7 +1193,7 @@ const StyledImg = styled.img<{
           : ""}
 `;
 
-const StyledContent = styled(Dialog.Content)`
+const StyledContent = styled(Dialog.Content)<{ $commentsOpen: boolean }>`
   position: fixed;
   inset: 0;
   z-index: ${depths.modal};
@@ -1098,6 +1201,8 @@ const StyledContent = styled(Dialog.Content)`
   justify-content: center;
   align-items: center;
   outline: none;
+  padding-inline-end: ${(props) => (props.$commentsOpen ? "360px" : "0")};
+  transition: padding-inline-end 200ms ease-out;
 `;
 
 const ActionButton = styled(Button)`
@@ -1106,15 +1211,45 @@ const ActionButton = styled(Button)`
 
 const Actions = styled(HStack)<{
   animation: Animation | null;
+  $commentsOpen: boolean;
 }>`
   position: absolute;
   top: 0;
-  right: 0;
+  right: ${(props) => (props.$commentsOpen ? "360px" : "44px")};
   margin: 16px 12px;
   z-index: ${depths.modal};
   background: ${(props) => transparentize(0.2, props.theme.background)};
   backdrop-filter: blur(4px);
   border-radius: 6px;
+  transition: right 200ms ease-out;
+
+  ${(props) =>
+    props.animation === null
+      ? css`
+          opacity: 0;
+        `
+      : props.animation.fadeIn
+        ? css`
+            animation: ${props.animation.fadeIn.apply()}
+              ${props.animation.fadeIn.duration}ms;
+          `
+        : props.animation.fadeOut
+          ? css`
+              animation: ${props.animation.fadeOut.apply()}
+                ${props.animation.fadeOut.duration}ms;
+            `
+          : ""}
+`;
+
+const CloseAction = styled.div<{ animation: Animation | null }>`
+  position: fixed;
+  top: 0;
+  right: 0;
+  margin: 16px 12px;
+  z-index: ${depths.modal + 1};
+  background: ${(props) => transparentize(0.2, props.theme.background)};
+  backdrop-filter: blur(4px);
+  border-radius: 6px;
 
   ${(props) =>
     props.animation === null
@@ -1138,10 +1273,16 @@ const Nav = styled.div<{
   $hidden: boolean;
   dir: "left" | "right";
   animation: Animation | null;
+  $commentsOpen?: boolean;
 }>`
   position: absolute;
-  ${(props) => (props.dir === "left" ? "left: 0;" : "right: 0;")}
-  transition: opacity 500ms ease-in-out;
+  ${(props) =>
+    props.dir === "left"
+      ? "left: 0;"
+      : `right: ${props.$commentsOpen ? "360px" : "0"};`}
+  transition:
+    opacity 500ms ease-in-out,
+    right 200ms ease-out;
   z-index: ${depths.modal};
   ${(props) => props.$hidden && "opacity: 0;"}
   ${(props) =>
@@ -1183,6 +1324,27 @@ const StyledError = styled(ImageError)<{
           : ""}
 `;
 
+const CommentsSidebar = styled.div<{
+  animation: Animation | null;
+  $open: boolean;
+}>`
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  z-index: ${depths.modal};
+  display: flex;
+  transform: translateX(${(props) => (props.$open ? "0" : "100%")});
+  transition: transform 200ms ease-out;
+  ${(props) =>
+    props.animation?.fadeOut
+      ? css`
+          animation: ${props.animation.fadeOut.apply()}
+            ${props.animation.fadeOut.duration}ms;
+        `
+      : ""}
+`;
+
 const NavButton = styled(NudeButton)`
   margin: 16px;
   opacity: 0.75;
diff --git a/app/scenes/Document/components/Comments/CommentForm.tsx b/app/scenes/Document/components/Comments/CommentForm.tsx
index 07278d1544..3b594da18a 100644
--- a/app/scenes/Document/components/Comments/CommentForm.tsx
+++ b/app/scenes/Document/components/Comments/CommentForm.tsx
@@ -57,6 +57,11 @@ type Props = {
   onBlur?: () => void;
   /** Callback when user presses up arrow at the start of the editor */
   onUpArrowAtStart?: () => void;
+  /**
+   * Callback invoked when a new top-level comment is about to be created,
+   * just before it is added to the store. Receives the generated comment id.
+   */
+  onBeforeCreate?: (commentId: string) => void;
 };
 
 function CommentForm({
@@ -68,6 +73,7 @@ function CommentForm({
   onFocus,
   onBlur,
   onUpArrowAtStart,
+  onBeforeCreate,
   autoFocus,
   standalone,
   placeholder,
@@ -167,6 +173,9 @@ function CommentForm({
     );
 
     comment.id = uuidv4();
+    if (!thread) {
+      onBeforeCreate?.(comment.id);
+    }
     comments.add(comment);
 
     comment
diff --git a/app/scenes/Document/components/Comments/LightboxComments.tsx b/app/scenes/Document/components/Comments/LightboxComments.tsx
new file mode 100644
index 0000000000..e51ca879d1
--- /dev/null
+++ b/app/scenes/Document/components/Comments/LightboxComments.tsx
@@ -0,0 +1,181 @@
+import { observer } from "mobx-react";
+import { useCallback, useRef } from "react";
+import { useTranslation } from "react-i18next";
+import styled from "styled-components";
+import { s } from "@shared/styles";
+import type { ProsemirrorData, ProsemirrorMark } from "@shared/types";
+import { ProsemirrorHelper } from "@shared/utils/ProsemirrorHelper";
+import Empty from "~/components/Empty";
+import Flex from "~/components/Flex";
+import Scrollable from "~/components/Scrollable";
+import { useDocumentContext } from "~/components/DocumentContext";
+import useCurrentUser from "~/hooks/useCurrentUser";
+import usePersistedState from "~/hooks/usePersistedState";
+import usePolicy from "~/hooks/usePolicy";
+import useStores from "~/hooks/useStores";
+import type Document from "~/models/Document";
+import CommentForm from "./CommentForm";
+import CommentThread from "./CommentThread";
+
+type Props = {
+  /** The document the image belongs to. */
+  document: Document;
+  /** The position of the image node in the document. */
+  pos: number;
+};
+
+function LightboxComments({ document, pos }: Props) {
+  const { comments } = useStores();
+  const { editor, focusedCommentId, setFocusedCommentId } =
+    useDocumentContext();
+  const user = useCurrentUser();
+  const { t } = useTranslation();
+  const can = usePolicy(document);
+
+  const [draft, onSaveDraft] = usePersistedState<ProsemirrorData | undefined>(
+    `draft-${document.id}-image-${pos}`,
+    undefined
+  );
+
+  const commentIds = editor?.view?.state?.doc
+    ? ProsemirrorHelper.getCommentIdsAtPos(editor.view.state.doc, pos)
+    : [];
+
+  const threads = comments
+    .threadsInDocument(document.id)
+    .filter(
+      (comment) => commentIds.includes(comment.id) && !comment.isResolved
+    );
+
+  const draftCommentIdRef = useRef<string | null>(null);
+
+  // When submitting a new comment from the bottom form, anchor it to the image
+  // by adding a draft comment mark to the image node's `attrs.marks`. The mark
+  // is flipped to `draft: false` in `handleSubmit` once the comment has been
+  // persisted on the server.
+  const handleBeforeCreate = useCallback(
+    (commentId: string) => {
+      if (!editor) {
+        return;
+      }
+      const { state, dispatch } = editor.view;
+      const node = state.doc.nodeAt(pos);
+      if (!node) {
+        return;
+      }
+
+      const existingMarks = (node.attrs.marks ?? []) as ProsemirrorMark[];
+      const newMark: ProsemirrorMark = {
+        type: "comment",
+        attrs: {
+          id: commentId,
+          userId: user.id,
+          draft: true,
+        },
+      };
+      const newAttrs = {
+        ...node.attrs,
+        marks: [...existingMarks, newMark],
+      };
+      dispatch(state.tr.setNodeMarkup(pos, undefined, newAttrs));
+      draftCommentIdRef.current = commentId;
+    },
+    [editor, pos, user.id]
+  );
+
+  const handleSubmit = useCallback(() => {
+    setFocusedCommentId(null);
+    const commentId = draftCommentIdRef.current;
+    if (commentId) {
+      editor?.updateComment(commentId, { draft: false });
+      draftCommentIdRef.current = null;
+    }
+  }, [editor, setFocusedCommentId]);
+
+  const focusedComment =
+    focusedCommentId && commentIds.includes(focusedCommentId)
+      ? comments.get(focusedCommentId)
+      : undefined;
+
+  const hasComments = threads.length > 0;
+  const canComment = can.comment;
+
+  return (
+    <Wrapper column>
+      <Header>{t("Comments")}</Header>
+      <Body bottomShadow={!focusedComment} hiddenScrollbars topShadow>
+        <List $hasComments={hasComments}>
+          {hasComments ? (
+            threads.map((thread) => (
+              <CommentThread
+                key={thread.id}
+                comment={thread}
+                document={document}
+                recessed={!!focusedComment && focusedComment.id !== thread.id}
+                focused={focusedComment?.id === thread.id}
+              />
+            ))
+          ) : (
+            <NoComments align="center" justify="center" auto>
+              <Empty>{t("No comments yet")}</Empty>
+            </NoComments>
+          )}
+        </List>
+      </Body>
+      {canComment && !focusedComment && (
+        <NewCommentForm
+          draft={draft}
+          onSaveDraft={onSaveDraft}
+          documentId={document.id}
+          placeholder={`${t("Add a comment")}…`}
+          autoFocus={false}
+          standalone
+          onBeforeCreate={handleBeforeCreate}
+          onSubmit={handleSubmit}
+        />
+      )}
+    </Wrapper>
+  );
+}
+
+const Wrapper = styled(Flex)`
+  width: 360px;
+  max-width: 100%;
+  height: 100%;
+  background: ${s("background")};
+  border-inline-start: 1px solid ${s("divider")};
+`;
+
+const Header = styled.div`
+  flex-shrink: 0;
+  padding: 20px 16px 16px;
+  font-size: 16px;
+  font-weight: 600;
+  color: ${s("text")};
+  user-select: none;
+`;
+
+const Body = styled(Scrollable)`
+  flex: 1 1 auto;
+  min-height: 0;
+`;
+
+const List = styled.div<{ $hasComments: boolean }>`
+  height: ${(props) => (props.$hasComments ? "auto" : "100%")};
+  padding-bottom: 12px;
+`;
+
+const NoComments = styled(Flex)`
+  height: 100%;
+  padding: 24px;
+`;
+
+const NewCommentForm = styled(CommentForm)`
+  flex-shrink: 0;
+  padding: 12px;
+  padding-inline-end: 18px;
+  padding-inline-start: 12px;
+  border-top: 1px solid ${s("divider")};
+`;
+
+export default observer(LightboxComments);
diff --git a/shared/utils/ProsemirrorHelper.ts b/shared/utils/ProsemirrorHelper.ts
index 4dfa30bb9d..9ace5ee68c 100644
--- a/shared/utils/ProsemirrorHelper.ts
+++ b/shared/utils/ProsemirrorHelper.ts
@@ -300,6 +300,29 @@ export class ProsemirrorHelper {
     ];
   }
 
+  /**
+   * Returns the ids of comment marks attached to the node at the given position.
+   *
+   * @param doc Prosemirror document node.
+   * @param pos Position of the node within the document.
+   * @returns array of comment ids anchored to the node.
+   */
+  static getCommentIdsAtPos(doc: Node, pos: number): string[] {
+    const node = doc.nodeAt(pos);
+    if (!node || !Array.isArray(node.attrs?.marks)) {
+      return [];
+    }
+
+    return (
+      node.attrs.marks as { type?: string; attrs?: { id?: string } }[]
+    )
+      .filter(
+        (mark): mark is { type: "comment"; attrs: { id: string } } =>
+          mark?.type === "comment" && !!mark?.attrs?.id
+      )
+      .map((mark) => mark.attrs.id);
+  }
+
   /**
    * Builds the consolidated anchor text for the given comment-id.
    *