diff --git a/front_end/src/app/(main)/components/comments_feed_provider.tsx b/front_end/src/app/(main)/components/comments_feed_provider.tsx
index cbd80289b2..ca015c6ae0 100644
--- a/front_end/src/app/(main)/components/comments_feed_provider.tsx
+++ b/front_end/src/app/(main)/components/comments_feed_provider.tsx
@@ -21,6 +21,7 @@ import {
 import { PostWithForecasts, ProjectPermissions } from "@/types/post";
 import { VoteDirection } from "@/types/votes";
 import { parseComment } from "@/utils/comments";
+import { logError } from "@/utils/core/errors";
 
 type ErrorType = Error & { digest?: string };
 
@@ -53,6 +54,9 @@ export type CommentsFeedContextType = {
     parentId: number,
     text: string
   ) => Promise<number>;
+  ensureCommentLoaded: (id: number) => Promise<boolean>;
+  refreshComment: (id: number) => Promise<void>;
+  updateComment: (id: number, changes: Partial<CommentType>) => void;
 };
 
 const COMMENTS_PER_PAGE = 10;
@@ -295,6 +299,43 @@ const CommentsFeedProvider: FC<
     }
   };
 
+  const refreshComment = async (id: number): Promise<void> => {
+    try {
+      const response = await ClientCommentsApi.getComments({
+        post: postData?.id,
+        author: profileId,
+        limit: 50,
+        use_root_comments_pagination: rootCommentStructure,
+        sort,
+        focus_comment_id: String(id),
+      });
+      const results = response.results as unknown as BECommentType[];
+      const found = results.find((c) => c.id === id);
+      if (found) {
+        const parsed = parseComment(found);
+        setComments((prev) => {
+          if (findById(prev, id)) {
+            return replaceById(prev, id, parsed);
+          }
+          // Not in feed yet — insert the full focused page
+          const focusedPage = parseCommentsArray(results, rootCommentStructure);
+          const merged = [...focusedPage, ...prev].sort((a, b) => b.id - a.id);
+          return uniqueById(merged);
+        });
+      }
+    } catch (e) {
+      logError(e);
+    }
+  };
+
+  const updateComment = (id: number, changes: Partial<CommentType>) => {
+    setComments((prev) => {
+      const existing = findById(prev, id);
+      if (!existing) return prev;
+      return replaceById(prev, id, { ...existing, ...changes });
+    });
+  };
+
   const optimisticallyAddReplyEnsuringParent = async (
     parentId: number,
     text: string
@@ -326,6 +367,9 @@ const CommentsFeedProvider: FC<
         finalizeReply,
         removeTempReply,
         optimisticallyAddReplyEnsuringParent,
+        ensureCommentLoaded,
+        refreshComment,
+        updateComment,
       }}
     >
       {children}
@@ -346,7 +390,7 @@ export const useCommentsFeed = () => {
   return context;
 };
 
-function findById(list: CommentType[], id: number): CommentType | null {
+export function findById(list: CommentType[], id: number): CommentType | null {
   for (const c of list) {
     if (c.id === id) return c;
     const kids = c.children ?? [];
diff --git a/front_end/src/app/(main)/questions/[id]/components/key_factors/comment_detail_panel.tsx b/front_end/src/app/(main)/questions/[id]/components/key_factors/comment_detail_panel.tsx
new file mode 100644
index 0000000000..d9877a7601
--- /dev/null
+++ b/front_end/src/app/(main)/questions/[id]/components/key_factors/comment_detail_panel.tsx
@@ -0,0 +1,141 @@
+"use client";
+
+import { useLocale, useTranslations } from "next-intl";
+import { FC } from "react";
+
+import CommentActionBar from "@/components/comment_feed/comment_action_bar";
+import MarkdownEditor from "@/components/markdown_editor";
+import { BECommentType, KeyFactor } from "@/types/comment";
+import { PostWithForecasts } from "@/types/post";
+import { VoteDirection } from "@/types/votes";
+import { parseUserMentions } from "@/utils/comments";
+import { formatDate } from "@/utils/formatters/date";
+
+import { KeyFactorItem } from "./item_view";
+
+type Props = {
+  keyFactor: KeyFactor;
+  relatedKeyFactors: KeyFactor[];
+  post: PostWithForecasts;
+  comment: BECommentType | null;
+  isLoading: boolean;
+  onScrollToComment: () => void;
+  onSelectKeyFactor: (keyFactor: KeyFactor) => void;
+  onVoteChange: (voteScore: number, userVote: VoteDirection | null) => void;
+  onCmmToggle: (enabled: boolean) => void;
+};
+
+const CommentDetailPanel: FC<Props> = ({
+  keyFactor,
+  relatedKeyFactors,
+  post,
+  comment,
+  isLoading,
+  onScrollToComment,
+  onSelectKeyFactor,
+  onVoteChange,
+  onCmmToggle,
+}) => {
+  const t = useTranslations();
+  const locale = useLocale();
+
+  return (
+    <div
+      className="relative min-w-0 flex-1"
+      onClick={(e) => e.stopPropagation()}
+    >
+      <div className="flex max-h-[50dvh] flex-col gap-3.5 overflow-hidden rounded-xl bg-gray-0 p-5 shadow-2xl dark:bg-gray-0-dark lg:max-h-[calc(100dvh-10rem)]">
+        <div className="flex shrink-0 items-center gap-1.5">
+          <span className="text-base font-bold text-gray-800 dark:text-gray-800-dark">
+            {keyFactor.author.username}
+          </span>
+          <span className="flex items-center gap-2">
+            <span className="size-[2px] shrink-0 rounded-full bg-gray-500 dark:bg-gray-500-dark" />
+            <span
+              className="text-base text-gray-500 dark:text-gray-500-dark"
+              suppressHydrationWarning
+            >
+              {t("onDate", {
+                date: formatDate(locale, new Date(keyFactor.created_at)),
+              })}
+            </span>
+          </span>
+        </div>
+
+        <div className="min-h-0 flex-1 overflow-y-auto text-base leading-6 text-gray-700 dark:text-gray-700-dark">
+          {isLoading && (
+            <div className="animate-pulse space-y-[10px]">
+              <div className="h-[1.5em] rounded bg-gray-200 dark:bg-gray-700-dark" />
+              <div className="h-[1.5em] rounded bg-gray-200 dark:bg-gray-700-dark" />
+              <div className="h-[1.5em] w-4/5 rounded bg-gray-200 dark:bg-gray-700-dark" />
+              <div className="h-[1.5em] w-1/2 rounded bg-gray-200 dark:bg-gray-700-dark" />
+            </div>
+          )}
+          {comment && (
+            <MarkdownEditor
+              mode="read"
+              markdown={parseUserMentions(
+                comment.text,
+                comment.mentioned_users
+              )}
+              contentEditableClassName="!text-base !leading-6 !text-gray-700 dark:!text-gray-700-dark"
+              withUgcLinks
+              withCodeBlocks
+            />
+          )}
+        </div>
+
+        {relatedKeyFactors.length > 0 && (
+          <div className="flex shrink-0 flex-col gap-2">
+            <span className="text-[10px] font-medium uppercase leading-3 text-gray-500 dark:text-gray-500-dark">
+              {t("keyFactors")}
+            </span>
+            <div className="flex gap-1">
+              {relatedKeyFactors.map((kf) => (
+                <KeyFactorItem
+                  key={kf.id}
+                  keyFactor={kf}
+                  linkToComment={false}
+                  isCompact
+                  projectPermission={post.user_permission}
+                  className="w-[190px]"
+                  onClick={() => onSelectKeyFactor(kf)}
+                />
+              ))}
+            </div>
+          </div>
+        )}
+
+        {isLoading && (
+          <div className="flex shrink-0 animate-pulse items-center gap-3 text-sm leading-4">
+            <div className="inline-flex items-center gap-2 rounded-sm border border-blue-500/30 px-1 dark:border-blue-600/30">
+              <div className="size-6 rounded-sm bg-gray-200 dark:bg-gray-700-dark" />
+              <div className="h-3 w-4 rounded bg-gray-200 dark:bg-gray-700-dark" />
+              <div className="size-6 rounded-sm bg-gray-200 dark:bg-gray-700-dark" />
+            </div>
+            <div className="inline-flex items-center gap-0.5 rounded-sm border border-blue-400/30 py-0 pl-0.5 pr-2 dark:border-blue-600/30">
+              <div className="size-4 rounded-sm bg-gray-200 dark:bg-gray-700-dark" />
+              <div className="h-3 w-9 rounded bg-gray-200 dark:bg-gray-700-dark" />
+            </div>
+            <div className="inline-flex items-center gap-1 rounded-sm border border-blue-400/30 px-2 py-1 dark:border-blue-600/30">
+              <div className="size-4 rounded-full bg-gray-200 dark:bg-gray-700-dark" />
+              <div className="h-3 w-28 rounded bg-gray-200 dark:bg-gray-700-dark" />
+            </div>
+          </div>
+        )}
+        {comment && (
+          <CommentActionBar
+            comment={comment}
+            post={post}
+            onReply={onScrollToComment}
+            onScrollToLink={onScrollToComment}
+            onVoteChange={onVoteChange}
+            onCmmToggle={onCmmToggle}
+          />
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default CommentDetailPanel;
diff --git a/front_end/src/app/(main)/questions/[id]/components/key_factors/item_view/index.tsx b/front_end/src/app/(main)/questions/[id]/components/key_factors/item_view/index.tsx
index 2553235e85..63245d33ff 100644
--- a/front_end/src/app/(main)/questions/[id]/components/key_factors/item_view/index.tsx
+++ b/front_end/src/app/(main)/questions/[id]/components/key_factors/item_view/index.tsx
@@ -3,6 +3,7 @@
 import dynamic from "next/dynamic";
 import { FC } from "react";
 
+import { useCommentsFeed } from "@/app/(main)/components/comments_feed_provider";
 import { ImpactMetadata, KeyFactor } from "@/types/comment";
 import { ProjectPermissions } from "@/types/post";
 import { getImpactDirectionFromMetadata } from "@/utils/key_factors";
@@ -25,6 +26,7 @@ type Props = {
   className?: string;
   projectPermission?: ProjectPermissions;
   isSuggested?: boolean;
+  inlineVotePanels?: boolean;
 };
 
 function getImpactMetadata(keyFactor: KeyFactor): ImpactMetadata | null {
@@ -41,13 +43,18 @@ export const KeyFactorItem: FC<Props> = ({
   className,
   projectPermission,
   isSuggested,
+  inlineVotePanels,
 }) => {
-  const isFlagged = keyFactor.flagged_by_me;
-  const hasImpactBar = !keyFactor.base_rate;
+  const { combinedKeyFactors } = useCommentsFeed();
+  const liveKeyFactor =
+    combinedKeyFactors.find((kf) => kf.id === keyFactor.id) ?? keyFactor;
+
+  const isFlagged = liveKeyFactor.flagged_by_me;
+  const hasImpactBar = !liveKeyFactor.base_rate;
   const impactDirection = hasImpactBar
-    ? getImpactDirectionFromMetadata(getImpactMetadata(keyFactor))
+    ? getImpactDirectionFromMetadata(getImpactMetadata(liveKeyFactor))
     : undefined;
-  const impactStrength = keyFactor.vote?.score ?? 0;
+  const impactStrength = liveKeyFactor.vote?.score ?? 0;
 
   const {
     impactPanel,
@@ -71,9 +78,9 @@ export const KeyFactorItem: FC<Props> = ({
         impactDirection={impactDirection}
         impactStrength={impactStrength}
       >
-        {keyFactor.driver && (
+        {liveKeyFactor.driver && (
           <KeyFactorDriver
-            keyFactor={keyFactor}
+            keyFactor={liveKeyFactor}
             mode={mode}
             isCompact={isCompact}
             onVotePanelToggle={handleUpvotePanelToggle}
@@ -82,9 +89,9 @@ export const KeyFactorItem: FC<Props> = ({
             isMorePanelOpen={morePanel.showPanel}
           />
         )}
-        {keyFactor.base_rate && (
+        {liveKeyFactor.base_rate && (
           <KeyFactorBaseRate
-            keyFactor={keyFactor}
+            keyFactor={liveKeyFactor}
             isCompact={isCompact}
             mode={mode}
             isSuggested={isSuggested}
@@ -94,9 +101,9 @@ export const KeyFactorItem: FC<Props> = ({
             isMorePanelOpen={morePanel.showPanel}
           />
         )}
-        {keyFactor.news && (
+        {liveKeyFactor.news && (
           <KeyFactorNews
-            keyFactor={keyFactor}
+            keyFactor={liveKeyFactor}
             mode={mode}
             isCompact={isCompact}
             onVotePanelToggle={handleUpvotePanelToggle}
@@ -113,7 +120,8 @@ export const KeyFactorItem: FC<Props> = ({
         morePanel={morePanel}
         anchorRef={impactPanel.anchorRef}
         isCompact={isCompact}
-        keyFactor={keyFactor}
+        inline={inlineVotePanels}
+        keyFactor={liveKeyFactor}
         projectPermission={projectPermission}
       />
     </div>
diff --git a/front_end/src/app/(main)/questions/[id]/components/key_factors/item_view/key_factor_card_container.tsx b/front_end/src/app/(main)/questions/[id]/components/key_factors/item_view/key_factor_card_container.tsx
index 96f0e2d8df..ba01f02003 100644
--- a/front_end/src/app/(main)/questions/[id]/components/key_factors/item_view/key_factor_card_container.tsx
+++ b/front_end/src/app/(main)/questions/[id]/components/key_factors/item_view/key_factor_card_container.tsx
@@ -58,7 +58,7 @@ const KeyFactorCardContainer: FC<Props> = ({
       id={id}
       onClick={onClick}
       className={cn(
-        "relative flex gap-3 rounded-xl p-5 [&:hover_.target]:visible",
+        "relative flex gap-3 overflow-hidden rounded-xl p-5 [&:hover_.target]:visible",
         linkToComment
           ? "border border-blue-400 bg-gray-0 dark:border-blue-400-dark dark:bg-gray-0-dark"
           : "bg-blue-200 dark:bg-blue-200-dark",
diff --git a/front_end/src/app/(main)/questions/[id]/components/key_factors/item_view/key_factor_strength_item.tsx b/front_end/src/app/(main)/questions/[id]/components/key_factors/item_view/key_factor_strength_item.tsx
index 44f66b817d..3ec5eaed1b 100644
--- a/front_end/src/app/(main)/questions/[id]/components/key_factors/item_view/key_factor_strength_item.tsx
+++ b/front_end/src/app/(main)/questions/[id]/components/key_factors/item_view/key_factor_strength_item.tsx
@@ -144,26 +144,27 @@ const KeyFactorStrengthItem: FC<Props> = ({
         )}
       </div>
 
-      <div
-        className="flex items-end justify-between"
-        onClick={(e) => e.stopPropagation()}
-        onPointerDown={(e) => e.stopPropagation()}
-      >
-        <ThumbVoteButtons
-          upCount={upCount}
-          downCount={downCount}
-          selected={selection}
-          disabled={submitting}
-          onClickUp={() => {
-            toggle(upScore);
-            onVotePanelToggle?.(selection !== "up");
-          }}
-          onClickDown={() => {
-            toggle(downScore);
-            onVotePanelToggle?.(false);
-            onDownvotePanelToggle?.(selection !== "down");
-          }}
-        />
+      <div className="flex items-end justify-between">
+        <div
+          onClick={(e) => e.stopPropagation()}
+          onPointerDown={(e) => e.stopPropagation()}
+        >
+          <ThumbVoteButtons
+            upCount={upCount}
+            downCount={downCount}
+            selected={selection}
+            disabled={submitting}
+            onClickUp={() => {
+              toggle(upScore);
+              onVotePanelToggle?.(selection !== "up");
+            }}
+            onClickDown={() => {
+              toggle(downScore);
+              onVotePanelToggle?.(false);
+              onDownvotePanelToggle?.(selection !== "down");
+            }}
+          />
+        </div>
         {!isCompactConsumer && onMorePanelToggle && (
           <button
             aria-label="menu"
@@ -173,7 +174,11 @@ const KeyFactorStrengthItem: FC<Props> = ({
                 ? "bg-blue-500 text-gray-0 dark:bg-blue-500-dark dark:text-gray-0-dark"
                 : "text-gray-500 hover:bg-gray-300 dark:text-gray-500-dark dark:hover:bg-gray-300-dark"
             )}
-            onClick={() => onMorePanelToggle(!isMorePanelOpen)}
+            onClick={(e) => {
+              e.stopPropagation();
+              onMorePanelToggle(!isMorePanelOpen);
+            }}
+            onPointerDown={(e) => e.stopPropagation()}
           >
             <FontAwesomeIcon icon={faEllipsis} />
           </button>
diff --git a/front_end/src/app/(main)/questions/[id]/components/key_factors/item_view/key_factor_vote_panels.tsx b/front_end/src/app/(main)/questions/[id]/components/key_factors/item_view/key_factor_vote_panels.tsx
index 6d50596e14..1f6dc90a9f 100644
--- a/front_end/src/app/(main)/questions/[id]/components/key_factors/item_view/key_factor_vote_panels.tsx
+++ b/front_end/src/app/(main)/questions/[id]/components/key_factors/item_view/key_factor_vote_panels.tsx
@@ -59,6 +59,7 @@ type KeyFactorVotePanelsProps = {
   morePanel?: ReturnType<typeof useVotePanel<string>>;
   anchorRef: RefObject<HTMLDivElement | null>;
   isCompact?: boolean;
+  inline?: boolean;
   keyFactor?: KeyFactor;
   projectPermission?: ProjectPermissions;
 };
@@ -69,6 +70,7 @@ const KeyFactorVotePanels: FC<KeyFactorVotePanelsProps> = ({
   morePanel,
   anchorRef,
   isCompact,
+  inline,
   keyFactor,
   projectPermission,
 }) => {
@@ -83,6 +85,7 @@ const KeyFactorVotePanels: FC<KeyFactorVotePanelsProps> = ({
           selectedOption={impactPanel.selectedOption}
           title={t("voteOnImpact")}
           isCompact={isCompact}
+          inline={inline}
           anchorRef={anchorRef}
           onSelect={impactPanel.toggleOption}
           onClose={impactPanel.closePanel}
@@ -99,6 +102,7 @@ const KeyFactorVotePanels: FC<KeyFactorVotePanelsProps> = ({
           title={t("why")}
           direction="column"
           isCompact={isCompact}
+          inline={inline}
           anchorRef={anchorRef}
           onSelect={downvotePanel.toggleOption}
           onClose={downvotePanel.closePanel}
@@ -120,6 +124,7 @@ const KeyFactorVotePanels: FC<KeyFactorVotePanelsProps> = ({
           projectPermission={projectPermission}
           anchorRef={anchorRef}
           isCompact={isCompact}
+          inline={inline}
           onClose={morePanel.closePanel}
         />
       )}
diff --git a/front_end/src/app/(main)/questions/[id]/components/key_factors/item_view/more_panel.tsx b/front_end/src/app/(main)/questions/[id]/components/key_factors/item_view/more_panel.tsx
index 82b8ca5617..b5eeff591c 100644
--- a/front_end/src/app/(main)/questions/[id]/components/key_factors/item_view/more_panel.tsx
+++ b/front_end/src/app/(main)/questions/[id]/components/key_factors/item_view/more_panel.tsx
@@ -30,6 +30,7 @@ type Props = {
   projectPermission?: ProjectPermissions;
   anchorRef: RefObject<HTMLDivElement | null>;
   isCompact?: boolean;
+  inline?: boolean;
   onClose: () => void;
 };
 
@@ -39,6 +40,7 @@ const MorePanel: FC<Props> = ({
   projectPermission,
   anchorRef,
   isCompact,
+  inline,
   onClose,
 }) => {
   const t = useTranslations();
@@ -104,6 +106,7 @@ const MorePanel: FC<Props> = ({
       ref={ref}
       anchorRef={anchorRef}
       isCompact={isCompact}
+      inline={inline}
       onClose={onClose}
     >
       <span
diff --git a/front_end/src/app/(main)/questions/[id]/components/key_factors/item_view/panel_container.tsx b/front_end/src/app/(main)/questions/[id]/components/key_factors/item_view/panel_container.tsx
index 61e479f4f0..a73d43ea8d 100644
--- a/front_end/src/app/(main)/questions/[id]/components/key_factors/item_view/panel_container.tsx
+++ b/front_end/src/app/(main)/questions/[id]/components/key_factors/item_view/panel_container.tsx
@@ -2,7 +2,7 @@
 
 import { faXmark } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { FC, PropsWithChildren, RefObject } from "react";
+import { CSSProperties, FC, PropsWithChildren, RefObject } from "react";
 import { createPortal } from "react-dom";
 
 import cn from "@/utils/core/cn";
@@ -11,12 +11,13 @@ type Props = PropsWithChildren<{
   ref?: RefObject<HTMLDivElement | null>;
   anchorRef: RefObject<HTMLDivElement | null>;
   isCompact?: boolean;
+  inline?: boolean;
   onClose: () => void;
 }>;
 
 function getAnchorStyle(
   anchorRef: RefObject<HTMLDivElement | null>
-): React.CSSProperties {
+): CSSProperties {
   if (!anchorRef.current) {
     return { position: "fixed", opacity: 0 };
   }
@@ -26,7 +27,7 @@ function getAnchorStyle(
     top: rect.bottom + 4,
     left: rect.left,
     width: rect.width,
-    zIndex: 50,
+    zIndex: 400,
   };
 }
 
@@ -34,21 +35,30 @@ const PanelContainer: FC<Props> = ({
   ref,
   anchorRef,
   isCompact,
+  inline,
   onClose,
   children,
 }) => {
   const panel = (
     <div
       ref={ref}
-      style={getAnchorStyle(anchorRef)}
+      style={inline ? undefined : getAnchorStyle(anchorRef)}
       className={cn(
-        "relative flex flex-col items-center rounded-xl bg-blue-200 shadow-lg ring-1 ring-blue-400 dark:bg-blue-200-dark dark:ring-blue-400-dark",
-        isCompact ? "gap-1.5 px-3 py-2" : "gap-2.5 px-5 py-3"
+        "relative rounded-xl bg-blue-200 shadow-lg ring-1 ring-blue-400 dark:bg-blue-200-dark dark:ring-blue-400-dark",
+        isCompact ? "px-3 py-2" : "px-5 py-3",
+        inline && "mt-1"
       )}
       onClick={(e) => e.stopPropagation()}
       onPointerDown={(e) => e.stopPropagation()}
     >
-      {children}
+      <div
+        className={cn(
+          "flex flex-col items-center",
+          isCompact ? "gap-1.5" : "gap-2.5"
+        )}
+      >
+        {children}
+      </div>
 
       <button
         type="button"
@@ -60,6 +70,7 @@ const PanelContainer: FC<Props> = ({
     </div>
   );
 
+  if (inline) return panel;
   return createPortal(panel, document.body);
 };
 
diff --git a/front_end/src/app/(main)/questions/[id]/components/key_factors/item_view/question_link/question_link_key_factor_item.tsx b/front_end/src/app/(main)/questions/[id]/components/key_factors/item_view/question_link/question_link_key_factor_item.tsx
index 13e383ef19..9ae362d7d8 100644
--- a/front_end/src/app/(main)/questions/[id]/components/key_factors/item_view/question_link/question_link_key_factor_item.tsx
+++ b/front_end/src/app/(main)/questions/[id]/components/key_factors/item_view/question_link/question_link_key_factor_item.tsx
@@ -35,6 +35,7 @@ type Props = {
   mode?: "forecaster" | "consumer";
   linkToComment?: boolean;
   className?: string;
+  onClick?: () => void;
 };
 
 const otherQuestionCache = new Map<number, QuestionWithForecasts>();
@@ -47,6 +48,7 @@ const QuestionLinkKeyFactorItem: FC<Props> = ({
   mode = "forecaster",
   linkToComment = true,
   className,
+  onClick,
 }) => {
   const isConsumer = mode === "consumer";
   const isCompactConsumer = isConsumer && compact;
@@ -206,12 +208,14 @@ const QuestionLinkKeyFactorItem: FC<Props> = ({
         impactDirection={impactDirection}
         impactStrength={strengthScore}
         className={cn("shadow-sm", className)}
+        onClick={onClick}
       >
         <div className="flex min-w-0 flex-col gap-1">
           <div className="flex min-w-0 items-start gap-3">
             <Link
               href={getPostLink({ id: otherQuestion.post_id })}
               target="_blank"
+              onClick={(e) => e.stopPropagation()}
               className={cn(
                 "min-w-0 flex-1 font-medium text-gray-800 no-underline hover:underline dark:text-gray-800-dark",
                 compact ? "text-xs leading-4" : "text-sm leading-5"
@@ -254,23 +258,24 @@ const QuestionLinkKeyFactorItem: FC<Props> = ({
           )}
         </div>
 
-        <div
-          className="flex items-end justify-between"
-          onClick={(e) => e.stopPropagation()}
-          onPointerDown={(e) => e.stopPropagation()}
-        >
-          <QuestionLinkAgreeVoter
-            aggregationId={link.id}
-            fromQuestion={fromQuestion}
-            toQuestion={toQuestion}
-            defaultDirection={defaultDirection}
-            defaultStrength="medium"
-            targetElementId={id}
-            onChange={(next) => setUserVote(next)}
-            onStrengthChange={(s) => setLocalStrength(s)}
-            onVotePanelToggle={handleUpvotePanelToggle}
-            onDownvotePanelToggle={handleDownvotePanelToggle}
-          />
+        <div className="flex items-end justify-between">
+          <div
+            onClick={(e) => e.stopPropagation()}
+            onPointerDown={(e) => e.stopPropagation()}
+          >
+            <QuestionLinkAgreeVoter
+              aggregationId={link.id}
+              fromQuestion={fromQuestion}
+              toQuestion={toQuestion}
+              defaultDirection={defaultDirection}
+              defaultStrength="medium"
+              targetElementId={id}
+              onChange={(next) => setUserVote(next)}
+              onStrengthChange={(s) => setLocalStrength(s)}
+              onVotePanelToggle={handleUpvotePanelToggle}
+              onDownvotePanelToggle={handleDownvotePanelToggle}
+            />
+          </div>
         </div>
       </KeyFactorCardContainer>
 
diff --git a/front_end/src/app/(main)/questions/[id]/components/key_factors/item_view/vote_panel.tsx b/front_end/src/app/(main)/questions/[id]/components/key_factors/item_view/vote_panel.tsx
index 6e0f30c835..ec4ae07dc5 100644
--- a/front_end/src/app/(main)/questions/[id]/components/key_factors/item_view/vote_panel.tsx
+++ b/front_end/src/app/(main)/questions/[id]/components/key_factors/item_view/vote_panel.tsx
@@ -13,6 +13,7 @@ type Props<T extends string> = {
   title: string;
   direction?: "row" | "column";
   isCompact?: boolean;
+  inline?: boolean;
   anchorRef: RefObject<HTMLDivElement | null>;
   onSelect: (option: T) => void;
   onClose: () => void;
@@ -28,6 +29,7 @@ function VotePanelInner<T extends string>({
   title,
   direction = "row",
   isCompact,
+  inline,
   anchorRef,
   onSelect,
   onClose,
@@ -40,6 +42,7 @@ function VotePanelInner<T extends string>({
       ref={ref}
       anchorRef={anchorRef}
       isCompact={isCompact}
+      inline={inline}
       onClose={onClose}
     >
       <span
diff --git a/front_end/src/app/(main)/questions/[id]/components/key_factors/key_factor_detail_overlay.tsx b/front_end/src/app/(main)/questions/[id]/components/key_factors/key_factor_detail_overlay.tsx
new file mode 100644
index 0000000000..e7c13dc19d
--- /dev/null
+++ b/front_end/src/app/(main)/questions/[id]/components/key_factors/key_factor_detail_overlay.tsx
@@ -0,0 +1,245 @@
+"use client";
+
+import { faXmark } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Dialog, DialogPanel, Transition } from "@headlessui/react";
+import { useTranslations } from "next-intl";
+import { FC, Fragment, useEffect, useMemo } from "react";
+
+import {
+  findById,
+  useCommentsFeed,
+} from "@/app/(main)/components/comments_feed_provider";
+import { useBreakpoint } from "@/hooks/tailwind";
+import { FetchedAggregateCoherenceLink } from "@/types/coherence";
+import { BECommentType, KeyFactor } from "@/types/comment";
+import { PostWithForecasts } from "@/types/post";
+import { QuestionType, QuestionWithNumericForecasts } from "@/types/question";
+import { VoteDirection } from "@/types/votes";
+
+import CommentDetailPanel from "./comment_detail_panel";
+import { KeyFactorItem } from "./item_view";
+import QuestionLinkKeyFactorItem from "./item_view/question_link/question_link_key_factor_item";
+import MobileKeyFactorOverlay from "./mobile_key_factor_overlay";
+
+type KeyFactorOverlayProps = {
+  keyFactor: KeyFactor;
+  allKeyFactors: KeyFactor[];
+  post: PostWithForecasts;
+  preloadedComment?: BECommentType | null;
+  onClose: () => void;
+  onSelectKeyFactor: (keyFactor: KeyFactor) => void;
+  questionLink?: never;
+};
+
+type QuestionLinkOverlayProps = {
+  questionLink: FetchedAggregateCoherenceLink;
+  post: PostWithForecasts;
+  onClose: () => void;
+  keyFactor?: never;
+  allKeyFactors?: never;
+  preloadedComment?: never;
+  onSelectKeyFactor?: never;
+};
+
+type Props = KeyFactorOverlayProps | QuestionLinkOverlayProps;
+
+const KeyFactorDetailOverlay: FC<Props> = (props) => {
+  const { post, onClose } = props;
+  const t = useTranslations();
+  const { comments, ensureCommentLoaded, updateComment } = useCommentsFeed();
+  const isAboveSm = useBreakpoint("sm");
+
+  const keyFactor = props.keyFactor ?? null;
+  const questionLink = props.questionLink ?? null;
+
+  const feedComment = useMemo(
+    () => (keyFactor ? findById(comments, keyFactor.comment_id) : null),
+    [comments, keyFactor]
+  );
+
+  const comment = feedComment ?? props.preloadedComment ?? null;
+
+  useEffect(() => {
+    if (keyFactor && !comment) {
+      ensureCommentLoaded(keyFactor.comment_id);
+    }
+  }, [keyFactor, comment, ensureCommentLoaded]);
+
+  const handleVoteChange = (
+    voteScore: number,
+    userVote: VoteDirection | null
+  ) => {
+    if (!keyFactor) return;
+    updateComment(keyFactor.comment_id, {
+      vote_score: voteScore,
+      user_vote: userVote,
+    });
+  };
+
+  const handleCmmToggle = (enabled: boolean) => {
+    if (!keyFactor) return;
+    const existing = feedComment ?? props.preloadedComment;
+    if (!existing) return;
+    const prev = existing.changed_my_mind;
+    const countDelta = prev.for_this_user === enabled ? 0 : enabled ? 1 : -1;
+    updateComment(keyFactor.comment_id, {
+      changed_my_mind: {
+        for_this_user: enabled,
+        count: prev.count + countDelta,
+      },
+    });
+  };
+
+  const relatedKeyFactors = keyFactor
+    ? (props.allKeyFactors ?? []).filter(
+        (kf) => kf.id !== keyFactor.id && kf.comment_id === keyFactor.comment_id
+      )
+    : [];
+
+  const allPostKeyFactors = useMemo(
+    () => props.allKeyFactors ?? [],
+    [props.allKeyFactors]
+  );
+  const currentIndex = allPostKeyFactors.findIndex(
+    (kf) => kf.id === keyFactor?.id
+  );
+  const hasPrev = currentIndex > 0;
+  const hasNext = currentIndex < allPostKeyFactors.length - 1;
+
+  const binaryQuestion = useMemo(() => {
+    const q = post.question;
+    if (q && q.type === QuestionType.Binary) {
+      return q as QuestionWithNumericForecasts;
+    }
+    return null;
+  }, [post.question]);
+
+  const handleScrollToComment = async () => {
+    if (!keyFactor) return;
+    await ensureCommentLoaded(keyFactor.comment_id);
+    onClose();
+    setTimeout(() => {
+      const el = document.getElementById(`comment-${keyFactor.comment_id}`);
+      el?.scrollIntoView({ behavior: "smooth", block: "center" });
+    }, 200);
+  };
+
+  const hasComment = !!(keyFactor && (comment?.text?.trim() || !comment));
+  const isSimple =
+    questionLink ||
+    !keyFactor?.driver ||
+    (relatedKeyFactors.length === 0 && !comment?.text?.trim());
+
+  if (!isAboveSm) {
+    return (
+      <MobileKeyFactorOverlay
+        keyFactor={keyFactor}
+        questionLink={questionLink}
+        post={post}
+        comment={comment}
+        binaryQuestion={binaryQuestion}
+        relatedKeyFactors={relatedKeyFactors}
+        allPostKeyFactors={allPostKeyFactors}
+        currentIndex={currentIndex}
+        hasPrev={hasPrev}
+        hasNext={hasNext}
+        hasComment={hasComment}
+        onClose={onClose}
+        onSelectKeyFactor={props.onSelectKeyFactor}
+        onScrollToComment={handleScrollToComment}
+        onVoteChange={handleVoteChange}
+        onCmmToggle={handleCmmToggle}
+      />
+    );
+  }
+
+  const closeButton = (
+    <button
+      aria-label={t("close")}
+      onClick={(e) => {
+        e.stopPropagation();
+        onClose();
+      }}
+      className="absolute -top-10 right-0 flex size-8 items-center justify-center rounded-full bg-gray-0 text-gray-600 shadow dark:bg-gray-800-dark dark:text-gray-300-dark"
+    >
+      <FontAwesomeIcon icon={faXmark} />
+    </button>
+  );
+
+  if (isSimple || !keyFactor || !props.onSelectKeyFactor) {
+    return (
+      <Transition appear show as={Fragment}>
+        <Dialog as="div" className="relative z-[201]" onClose={onClose}>
+          <div className="fixed inset-0 bg-blue-900/50 dark:bg-gray-1000/50" />
+          <div className="fixed inset-0 flex items-center justify-center overflow-y-auto px-4 pb-4 pt-14">
+            <DialogPanel className="w-full max-w-md" onClick={onClose}>
+              <div className="relative" onClick={(e) => e.stopPropagation()}>
+                {closeButton}
+                {questionLink ? (
+                  <QuestionLinkKeyFactorItem
+                    link={questionLink}
+                    post={post}
+                    linkToComment={false}
+                  />
+                ) : (
+                  keyFactor && (
+                    <KeyFactorItem
+                      keyFactor={keyFactor}
+                      linkToComment={false}
+                      projectPermission={post.user_permission}
+                      inlineVotePanels
+                    />
+                  )
+                )}
+              </div>
+            </DialogPanel>
+          </div>
+        </Dialog>
+      </Transition>
+    );
+  }
+
+  return (
+    <Transition appear show as={Fragment}>
+      <Dialog as="div" className="relative z-[201]" onClose={onClose}>
+        <div className="fixed inset-0 bg-blue-900/50 dark:bg-gray-1000/50" />
+        <div className="fixed inset-0 flex items-center justify-center overflow-y-auto px-4 pb-4 pt-14">
+          <DialogPanel
+            className="relative flex w-full max-w-4xl flex-col gap-4 lg:flex-row lg:items-center lg:gap-3"
+            onClick={onClose}
+          >
+            {closeButton}
+            <div
+              className="shrink-0 lg:w-[315px]"
+              onClick={(e) => e.stopPropagation()}
+            >
+              <div className="lg:w-[252px] lg:origin-left lg:scale-[125%]">
+                <KeyFactorItem
+                  keyFactor={keyFactor}
+                  linkToComment={false}
+                  projectPermission={post.user_permission}
+                  inlineVotePanels
+                />
+              </div>
+            </div>
+
+            <CommentDetailPanel
+              keyFactor={keyFactor}
+              relatedKeyFactors={relatedKeyFactors}
+              post={post}
+              comment={comment}
+              isLoading={!comment}
+              onScrollToComment={handleScrollToComment}
+              onSelectKeyFactor={props.onSelectKeyFactor}
+              onVoteChange={handleVoteChange}
+              onCmmToggle={handleCmmToggle}
+            />
+          </DialogPanel>
+        </div>
+      </Dialog>
+    </Transition>
+  );
+};
+
+export default KeyFactorDetailOverlay;
diff --git a/front_end/src/app/(main)/questions/[id]/components/key_factors/key_factors_feed.tsx b/front_end/src/app/(main)/questions/[id]/components/key_factors/key_factors_feed.tsx
index 54ba0b11f8..bf742b7343 100644
--- a/front_end/src/app/(main)/questions/[id]/components/key_factors/key_factors_feed.tsx
+++ b/front_end/src/app/(main)/questions/[id]/components/key_factors/key_factors_feed.tsx
@@ -1,13 +1,14 @@
 "use client";
 
 import { useTranslations } from "next-intl";
-import { FC, useEffect, useState } from "react";
+import { FC, useEffect, useMemo, useState } from "react";
 
 import useCoherenceLinksContext from "@/app/(main)/components/coherence_links_provider";
 import { useCommentsFeed } from "@/app/(main)/components/comments_feed_provider";
 import { useAuth } from "@/contexts/auth_context";
 import { useModal } from "@/contexts/modal_context";
-import { useBreakpoint } from "@/hooks/tailwind";
+import { FetchedAggregateCoherenceLink } from "@/types/coherence";
+import { KeyFactor } from "@/types/comment";
 import { PostStatus, PostWithForecasts } from "@/types/post";
 import { sendAnalyticsEvent } from "@/utils/analytics";
 
@@ -16,25 +17,29 @@ import KeyFactorsAddModal from "./add_modal/key_factors_add_modal";
 import { getKeyFactorsLimits } from "./hooks";
 import KeyFactorItem from "./item_view";
 import QuestionLinkKeyFactorItem from "./item_view/question_link/question_link_key_factor_item";
+import KeyFactorDetailOverlay from "./key_factor_detail_overlay";
 import KeyFactorsGridPlaceholder from "./key_factors_grid_placeholder";
 
 const GRID_PLACEHOLDER_SLOTS = 3;
 
 type Props = {
   post: PostWithForecasts;
+  isExpanded?: boolean;
 };
 
-const KeyFactorsFeed: FC<Props> = ({ post }) => {
+const KeyFactorsFeed: FC<Props> = ({ post, isExpanded = true }) => {
   const t = useTranslations();
-  const { combinedKeyFactors } = useCommentsFeed();
+  const { combinedKeyFactors, comments } = useCommentsFeed();
   const { aggregateCoherenceLinks } = useCoherenceLinksContext();
   const { user } = useAuth();
   const { setCurrentModal } = useModal();
   const [order, setOrder] = useState<number[] | null>(null);
   const [isAddModalOpen, setIsAddModalOpen] = useState(false);
-  const isSmUp = useBreakpoint("sm");
-  const isMobileCompact = !isSmUp;
-
+  const [selectedKeyFactor, setSelectedKeyFactor] = useState<KeyFactor | null>(
+    null
+  );
+  const [selectedQuestionLink, setSelectedQuestionLink] =
+    useState<FetchedAggregateCoherenceLink | null>(null);
   const questionLinkAggregates =
     aggregateCoherenceLinks?.data.filter(
       (it) => it.links_nr > 1 && it.strength !== null && it.direction !== null
@@ -93,6 +98,28 @@ const KeyFactorsFeed: FC<Props> = ({ post }) => {
     });
   };
 
+  const handleKeyFactorClick = (kf: KeyFactor) => {
+    if (!isExpanded) return;
+    setSelectedKeyFactor(kf);
+    sendAnalyticsEvent("KeyFactorClick", { event_label: "fromGrid" });
+  };
+
+  const handleQuestionLinkClick = (link: FetchedAggregateCoherenceLink) => {
+    if (!isExpanded) return;
+    setSelectedQuestionLink(link);
+    sendAnalyticsEvent("KeyFactorClick", { event_label: "questionLink" });
+  };
+
+  const preloadedComment = useMemo(
+    () =>
+      selectedKeyFactor
+        ? comments
+            .flatMap((c) => [c, ...(c.children ?? [])])
+            .find((c) => c.id === selectedKeyFactor.comment_id) ?? null
+        : null,
+    [comments, selectedKeyFactor]
+  );
+
   const addModal = user && (
     <KeyFactorsAddModal
       isOpen={isAddModalOpen}
@@ -102,34 +129,54 @@ const KeyFactorsFeed: FC<Props> = ({ post }) => {
     />
   );
 
-  // 0 items: empty state
+  const overlay = selectedKeyFactor ? (
+    <KeyFactorDetailOverlay
+      key={selectedKeyFactor.id}
+      keyFactor={selectedKeyFactor}
+      allKeyFactors={combinedKeyFactors}
+      post={post}
+      preloadedComment={preloadedComment}
+      onClose={() => setSelectedKeyFactor(null)}
+      onSelectKeyFactor={setSelectedKeyFactor}
+    />
+  ) : selectedQuestionLink ? (
+    <KeyFactorDetailOverlay
+      key={selectedQuestionLink.id}
+      questionLink={selectedQuestionLink}
+      post={post}
+      onClose={() => setSelectedQuestionLink(null)}
+    />
+  ) : null;
+
   if (totalItemCount === 0) {
     return (
-      <div
-        className="flex flex-col items-center gap-4 pb-8 pt-6"
-        id="key-factors"
-      >
-        <div className="flex flex-col items-center gap-1 text-center">
-          <span className="text-base font-medium leading-6 text-blue-800 dark:text-blue-800-dark">
-            {t("noKeyFactorsP1")}
-          </span>
-          <span className="text-sm leading-5 text-blue-600 dark:text-blue-600-dark">
-            {t("noKeyFactorsP2")}
-          </span>
+      <>
+        <div
+          className="flex flex-col items-center gap-4 pb-8 pt-6"
+          id="key-factors"
+        >
+          <div className="flex flex-col items-center gap-1 text-center">
+            <span className="text-base font-medium leading-6 text-blue-800 dark:text-blue-800-dark">
+              {t("noKeyFactorsP1")}
+            </span>
+            <span className="text-sm leading-5 text-blue-600 dark:text-blue-600-dark">
+              {t("noKeyFactorsP2")}
+            </span>
+          </div>
+          {canAddKeyFactor && <AddKeyFactorsButton post={post} as="div" />}
         </div>
-        {canAddKeyFactor && <AddKeyFactorsButton post={post} as="div" />}
-      </div>
+        {addModal}
+      </>
     );
   }
 
-  // 1-3 items: grid layout with placeholders
   if (totalItemCount <= GRID_PLACEHOLDER_SLOTS) {
     const placeholderCount = GRID_PLACEHOLDER_SLOTS - totalItemCount;
 
     return (
       <>
         <div
-          className="grid grid-cols-2 gap-2.5 sm:grid-cols-3"
+          className="grid grid-cols-1 gap-2.5 sm:grid-cols-2 md:grid-cols-3"
           id="key-factors"
         >
           {items.map((kf) => (
@@ -138,7 +185,7 @@ const KeyFactorsFeed: FC<Props> = ({ post }) => {
               key={`post-key-factor-${kf.id}`}
               keyFactor={kf}
               projectPermission={post.user_permission}
-              isCompact={isMobileCompact}
+              onClick={() => handleKeyFactorClick(kf)}
             />
           ))}
 
@@ -148,7 +195,7 @@ const KeyFactorsFeed: FC<Props> = ({ post }) => {
               key={`question-link-kf-${link.id}`}
               link={link}
               post={post}
-              compact={isMobileCompact}
+              onClick={() => handleQuestionLinkClick(link)}
             />
           ))}
 
@@ -167,41 +214,47 @@ const KeyFactorsFeed: FC<Props> = ({ post }) => {
         </div>
 
         {addModal}
+        {overlay}
       </>
     );
   }
 
-  // 4+ items: masonry layout
   return (
-    <div className="columns-2 gap-2.5 md:columns-3" id="key-factors">
-      {items.map((kf) => (
-        <div
-          key={`post-key-factor-${kf.id}`}
-          className="mb-2 break-inside-avoid"
-        >
-          <KeyFactorItem
-            id={`key-factor-${kf.id}`}
-            keyFactor={kf}
-            projectPermission={post.user_permission}
-            isCompact={isMobileCompact}
-          />
-        </div>
-      ))}
+    <>
+      <div
+        className="columns-1 gap-2.5 sm:columns-2 md:columns-3"
+        id="key-factors"
+      >
+        {items.map((kf) => (
+          <div
+            key={`post-key-factor-${kf.id}`}
+            className="mb-2 break-inside-avoid"
+          >
+            <KeyFactorItem
+              id={`key-factor-${kf.id}`}
+              keyFactor={kf}
+              projectPermission={post.user_permission}
+              onClick={() => handleKeyFactorClick(kf)}
+            />
+          </div>
+        ))}
 
-      {questionLinkAggregates.map((link) => (
-        <div
-          key={`question-link-kf-${link.id}`}
-          className="mb-2 break-inside-avoid"
-        >
-          <QuestionLinkKeyFactorItem
-            id={`question-link-kf-${link.id}`}
-            link={link}
-            post={post}
-            compact={isMobileCompact}
-          />
-        </div>
-      ))}
-    </div>
+        {questionLinkAggregates.map((link) => (
+          <div
+            key={`question-link-kf-${link.id}`}
+            className="mb-2 break-inside-avoid"
+          >
+            <QuestionLinkKeyFactorItem
+              id={`question-link-kf-${link.id}`}
+              link={link}
+              post={post}
+              onClick={() => handleQuestionLinkClick(link)}
+            />
+          </div>
+        ))}
+      </div>
+      {overlay}
+    </>
   );
 };
 
diff --git a/front_end/src/app/(main)/questions/[id]/components/key_factors/key_factors_question_section.tsx b/front_end/src/app/(main)/questions/[id]/components/key_factors/key_factors_question_section.tsx
index b8a649ff0d..1ca316bb51 100644
--- a/front_end/src/app/(main)/questions/[id]/components/key_factors/key_factors_question_section.tsx
+++ b/front_end/src/app/(main)/questions/[id]/components/key_factors/key_factors_question_section.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useTranslations } from "next-intl";
-import { FC, useEffect, useMemo } from "react";
+import { FC, useCallback, useEffect, useMemo, useState } from "react";
 
 import useCoherenceLinksContext from "@/app/(main)/components/coherence_links_provider";
 import { useCommentsFeed } from "@/app/(main)/components/comments_feed_provider";
@@ -43,6 +43,10 @@ const KeyFactorsQuestionSection: FC<KeyFactorsQuestionSectionProps> = ({
   const { keyFactorsExpanded } = useQuestionLayout();
   const { combinedKeyFactors } = useCommentsFeed();
   const shouldHideKeyFactors = useShouldHideKeyFactors();
+  const [isFeedExpanded, setIsFeedExpanded] = useState(false);
+  const handleExpandedChange = useCallback((expanded: boolean) => {
+    setIsFeedExpanded(expanded);
+  }, []);
   const { aggregateCoherenceLinks } = useCoherenceLinksContext();
 
   const questionLinkAggregates = useMemo(
@@ -135,8 +139,9 @@ const KeyFactorsQuestionSection: FC<KeyFactorsQuestionSectionProps> = ({
           expandLabel={t("showMore")}
           collapseLabel={t("showLess")}
           forceState={keyFactorsExpanded}
+          onExpandedChange={handleExpandedChange}
         >
-          <KeyFactorsFeed post={post} />
+          <KeyFactorsFeed post={post} isExpanded={isFeedExpanded} />
         </ExpandableContent>
       )}
     </SectionToggle>
diff --git a/front_end/src/app/(main)/questions/[id]/components/key_factors/mobile_key_factor_overlay.tsx b/front_end/src/app/(main)/questions/[id]/components/key_factors/mobile_key_factor_overlay.tsx
new file mode 100644
index 0000000000..954aa2939e
--- /dev/null
+++ b/front_end/src/app/(main)/questions/[id]/components/key_factors/mobile_key_factor_overlay.tsx
@@ -0,0 +1,288 @@
+"use client";
+
+import {
+  faArrowUpRightFromSquare,
+  faChevronLeft,
+  faChevronRight,
+  faXmark,
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Dialog, DialogPanel, Transition } from "@headlessui/react";
+import { useLocale, useTranslations } from "next-intl";
+import { FC, Fragment } from "react";
+
+import CommentActionBar from "@/components/comment_feed/comment_action_bar";
+import BinaryCPBar from "@/components/consumer_post_card/binary_cp_bar";
+import MarkdownEditor from "@/components/markdown_editor";
+import { FetchedAggregateCoherenceLink } from "@/types/coherence";
+import { BECommentType, KeyFactor } from "@/types/comment";
+import { PostWithForecasts } from "@/types/post";
+import { QuestionWithNumericForecasts } from "@/types/question";
+import { VoteDirection } from "@/types/votes";
+import { parseUserMentions } from "@/utils/comments";
+import cn from "@/utils/core/cn";
+import { formatDate } from "@/utils/formatters/date";
+
+import { KeyFactorItem } from "./item_view";
+import QuestionLinkKeyFactorItem from "./item_view/question_link/question_link_key_factor_item";
+
+type Props = {
+  keyFactor: KeyFactor | null;
+  questionLink: FetchedAggregateCoherenceLink | null;
+  post: PostWithForecasts;
+  comment: BECommentType | null;
+  binaryQuestion: QuestionWithNumericForecasts | null;
+  relatedKeyFactors: KeyFactor[];
+  allPostKeyFactors: KeyFactor[];
+  currentIndex: number;
+  hasPrev: boolean;
+  hasNext: boolean;
+  hasComment: boolean;
+  onClose: () => void;
+  onSelectKeyFactor?: (keyFactor: KeyFactor) => void;
+  onScrollToComment: () => void;
+  onVoteChange: (voteScore: number, userVote: VoteDirection | null) => void;
+  onCmmToggle: (enabled: boolean) => void;
+};
+
+const MobileKeyFactorOverlay: FC<Props> = ({
+  keyFactor,
+  questionLink,
+  post,
+  comment,
+  binaryQuestion,
+  relatedKeyFactors,
+  allPostKeyFactors,
+  currentIndex,
+  hasPrev,
+  hasNext,
+  hasComment,
+  onClose,
+  onSelectKeyFactor,
+  onScrollToComment,
+  onVoteChange,
+  onCmmToggle,
+}) => {
+  const t = useTranslations();
+  const locale = useLocale();
+
+  return (
+    <Transition appear show as={Fragment}>
+      <Dialog as="div" className="relative z-[201]" onClose={onClose}>
+        <div className="fixed inset-0 bg-white/90 backdrop-blur-[10px] dark:bg-gray-0-dark/90" />
+        <div className="fixed inset-0 overflow-y-auto">
+          <DialogPanel className="relative flex min-h-full flex-col px-4 pb-6 pt-4">
+            {keyFactor && allPostKeyFactors.length > 1 && (
+              <>
+                <button
+                  aria-label="Previous"
+                  onClick={() => {
+                    const prev = allPostKeyFactors[currentIndex - 1];
+                    if (prev) onSelectKeyFactor?.(prev);
+                  }}
+                  className={cn(
+                    "fixed left-1 top-1/2 z-10 flex size-10 -translate-y-1/2 items-center justify-center rounded-full text-xl text-blue-800 dark:text-blue-800-dark",
+                    !hasPrev && "hidden"
+                  )}
+                >
+                  <FontAwesomeIcon icon={faChevronLeft} />
+                </button>
+                <button
+                  aria-label="Next"
+                  onClick={() => {
+                    const next = allPostKeyFactors[currentIndex + 1];
+                    if (next) onSelectKeyFactor?.(next);
+                  }}
+                  className={cn(
+                    "fixed right-1 top-1/2 z-10 flex size-10 -translate-y-1/2 items-center justify-center rounded-full text-xl text-blue-800 dark:text-blue-800-dark",
+                    !hasNext && "hidden"
+                  )}
+                >
+                  <FontAwesomeIcon icon={faChevronRight} />
+                </button>
+              </>
+            )}
+
+            <div className="mb-2 flex justify-end">
+              <button
+                aria-label={t("close")}
+                onClick={onClose}
+                className="flex size-7 items-center justify-center rounded-full border border-blue-400 bg-gray-0 text-sm text-blue-700 dark:border-blue-400-dark dark:bg-gray-0-dark dark:text-blue-700-dark"
+              >
+                <FontAwesomeIcon icon={faXmark} />
+              </button>
+            </div>
+
+            <div className="mb-2 flex items-start gap-3 px-1">
+              <div className="min-w-0 flex-1">
+                <h2 className="text-base font-semibold leading-5 tracking-tight text-gray-800 dark:text-gray-800-dark">
+                  {post.title}
+                </h2>
+              </div>
+              {binaryQuestion && (
+                <BinaryCPBar
+                  question={binaryQuestion}
+                  size="sm"
+                  className="shrink-0"
+                />
+              )}
+            </div>
+
+            <span className="mb-2 text-center text-sm font-medium leading-5 text-gray-1000/50 dark:text-gray-1000-dark/50">
+              {t("keyFactor")}
+            </span>
+
+            <div className="relative my-4 flex items-center justify-center py-3">
+              {hasPrev &&
+                (() => {
+                  const prevKf = allPostKeyFactors[currentIndex - 1];
+                  return prevKf ? (
+                    <div className="pointer-events-none absolute bottom-3 left-0 top-3 w-5 overflow-hidden rounded-r-xl">
+                      <div className="absolute right-0 h-full w-[280px]">
+                        <KeyFactorItem
+                          keyFactor={prevKf}
+                          linkToComment={false}
+                          projectPermission={post.user_permission}
+                        />
+                      </div>
+                    </div>
+                  ) : null;
+                })()}
+              <div className="w-[68%] origin-center scale-[1.25]">
+                {questionLink ? (
+                  <QuestionLinkKeyFactorItem
+                    link={questionLink}
+                    post={post}
+                    linkToComment={false}
+                  />
+                ) : (
+                  keyFactor && (
+                    <KeyFactorItem
+                      keyFactor={keyFactor}
+                      linkToComment={false}
+                      projectPermission={post.user_permission}
+                    />
+                  )
+                )}
+              </div>
+              {hasNext &&
+                (() => {
+                  const nextKf = allPostKeyFactors[currentIndex + 1];
+                  return nextKf ? (
+                    <div className="pointer-events-none absolute bottom-3 right-0 top-3 w-5 overflow-hidden rounded-l-xl">
+                      <div className="h-full w-[280px]">
+                        <KeyFactorItem
+                          keyFactor={nextKf}
+                          linkToComment={false}
+                          projectPermission={post.user_permission}
+                        />
+                      </div>
+                    </div>
+                  ) : null;
+                })()}
+            </div>
+
+            {keyFactor && hasComment && (
+              <>
+                <span className="mb-2 text-center text-sm font-medium leading-5 text-gray-1000/50 dark:text-gray-1000-dark/50">
+                  {t("comment")}
+                </span>
+
+                <div className="mb-3 overflow-hidden rounded-xl bg-blue-200 px-5 py-4 dark:bg-blue-200-dark">
+                  <div className="mb-2 flex items-center gap-1.5">
+                    <span className="text-base font-bold leading-6 text-gray-800 dark:text-gray-800-dark">
+                      {keyFactor.author.username}
+                    </span>
+                    <span className="size-[2px] shrink-0 rounded-full bg-gray-500 dark:bg-gray-500-dark" />
+                    <span
+                      className="flex-1 text-base leading-6 text-gray-500 dark:text-gray-500-dark"
+                      suppressHydrationWarning
+                    >
+                      {t("onDate", {
+                        date: formatDate(
+                          locale,
+                          new Date(keyFactor.created_at)
+                        ),
+                      })}
+                    </span>
+                    <button
+                      onClick={onScrollToComment}
+                      className="shrink-0 text-base text-blue-600 dark:text-blue-600-dark"
+                      aria-label={t("viewComment")}
+                    >
+                      <FontAwesomeIcon icon={faArrowUpRightFromSquare} />
+                    </button>
+                  </div>
+
+                  <div className="text-base leading-6 text-gray-700 dark:text-gray-700-dark">
+                    {!comment && (
+                      <div className="animate-pulse space-y-[10px]">
+                        <div className="h-[1.5em] rounded bg-gray-300 dark:bg-gray-300-dark" />
+                        <div className="h-[1.5em] rounded bg-gray-300 dark:bg-gray-300-dark" />
+                        <div className="h-[1.5em] w-4/5 rounded bg-gray-300 dark:bg-gray-300-dark" />
+                      </div>
+                    )}
+                    {comment && (
+                      <MarkdownEditor
+                        mode="read"
+                        markdown={parseUserMentions(
+                          comment.text,
+                          comment.mentioned_users
+                        )}
+                        contentEditableClassName="!text-base !leading-6 !text-gray-700 dark:!text-gray-700-dark"
+                        withUgcLinks
+                        withCodeBlocks
+                      />
+                    )}
+                  </div>
+
+                  {relatedKeyFactors.length > 0 && (
+                    <div className="mt-3.5 flex flex-col gap-3">
+                      <span className="text-[10px] font-medium uppercase leading-3 text-gray-500 dark:text-gray-500-dark">
+                        {t("keyFactors")}
+                      </span>
+                      <div className="flex gap-2.5 overflow-x-auto">
+                        {relatedKeyFactors.map((kf) => (
+                          <KeyFactorItem
+                            key={kf.id}
+                            keyFactor={kf}
+                            isCompact
+                            projectPermission={post.user_permission}
+                            className="w-[160px] shrink-0"
+                            onClick={() => onSelectKeyFactor?.(kf)}
+                          />
+                        ))}
+                      </div>
+                    </div>
+                  )}
+                </div>
+
+                {!comment && (
+                  <div className="flex animate-pulse items-center gap-3 text-sm leading-4">
+                    <div className="inline-flex items-center gap-2 rounded-sm border border-blue-500/30 px-1 dark:border-blue-600/30">
+                      <div className="size-6 rounded-sm bg-gray-200 dark:bg-gray-200-dark" />
+                      <div className="h-3 w-4 rounded bg-gray-200 dark:bg-gray-200-dark" />
+                      <div className="size-6 rounded-sm bg-gray-200 dark:bg-gray-200-dark" />
+                    </div>
+                  </div>
+                )}
+                {comment && (
+                  <CommentActionBar
+                    comment={comment}
+                    post={post}
+                    onReply={onScrollToComment}
+                    onScrollToLink={onScrollToComment}
+                    onVoteChange={onVoteChange}
+                    onCmmToggle={onCmmToggle}
+                  />
+                )}
+              </>
+            )}
+          </DialogPanel>
+        </div>
+      </Dialog>
+    </Transition>
+  );
+};
+
+export default MobileKeyFactorOverlay;
diff --git a/front_end/src/components/comment_feed/comment_action_bar.tsx b/front_end/src/components/comment_feed/comment_action_bar.tsx
new file mode 100644
index 0000000000..10ef8b7903
--- /dev/null
+++ b/front_end/src/components/comment_feed/comment_action_bar.tsx
@@ -0,0 +1,111 @@
+"use client";
+
+import { faReply, faXmark } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useTranslations } from "next-intl";
+import { FC } from "react";
+
+import {
+  CmmOverlay,
+  CmmToggleButton,
+  useCmmContext,
+} from "@/components/comment_feed/comment_cmm";
+import CommentVoter from "@/components/comment_feed/comment_voter";
+import Button from "@/components/ui/button";
+import { useAuth } from "@/contexts/auth_context";
+import { BECommentType } from "@/types/comment";
+import { PostWithForecasts } from "@/types/post";
+import { VoteDirection } from "@/types/votes";
+import { canPredictQuestion } from "@/utils/questions/predictions";
+
+type Props = {
+  comment: BECommentType;
+  post: PostWithForecasts;
+  onReply: () => void;
+  isReplying?: boolean;
+  onScrollToLink?: () => void;
+  onVoteChange?: (voteScore: number, userVote: VoteDirection | null) => void;
+  onCmmToggle?: (enabled: boolean) => void;
+};
+
+const CommentActionBar: FC<Props> = ({
+  comment,
+  post,
+  onReply,
+  isReplying = false,
+  onScrollToLink,
+  onVoteChange,
+  onCmmToggle,
+}) => {
+  const t = useTranslations();
+  const { user } = useAuth();
+
+  const userCanPredict = canPredictQuestion(post, user);
+  const isCommentAuthor = comment.author.id === user?.id;
+
+  const isCmmVisible =
+    !!post.question || !!post.group_of_questions || !!post.conditional;
+  const isCmmDisabled = !user || !userCanPredict || isCommentAuthor;
+
+  const baseCmmContext = useCmmContext(
+    comment.changed_my_mind.count,
+    comment.changed_my_mind.for_this_user
+  );
+
+  const cmmContext = onCmmToggle
+    ? {
+        ...baseCmmContext,
+        onCMMToggled: (enabled: boolean) => {
+          baseCmmContext.onCMMToggled(enabled);
+          onCmmToggle(enabled);
+        },
+      }
+    : baseCmmContext;
+
+  return (
+    <>
+      <div className="flex shrink-0 items-center gap-3 text-sm leading-4 text-gray-900 dark:text-gray-900-dark">
+        <CommentVoter
+          voteData={{
+            commentAuthorId: comment.author.id,
+            commentId: comment.id,
+            voteScore: comment.vote_score,
+            userVote: comment.user_vote ?? null,
+          }}
+          onVoteChange={onVoteChange}
+        />
+        {isReplying ? (
+          <Button size="xxs" variant="tertiary" onClick={onReply}>
+            <FontAwesomeIcon icon={faXmark} className="size-4 p-1" />
+            {t("cancel")}
+          </Button>
+        ) : (
+          <Button
+            size="xxs"
+            variant="tertiary"
+            onClick={onReply}
+            className="gap-0.5"
+          >
+            <FontAwesomeIcon icon={faReply} className="size-4 p-1" size="xs" />
+            {t("reply")}
+          </Button>
+        )}
+        {isCmmVisible && (
+          <CmmToggleButton
+            comment_id={comment.id}
+            cmmContext={cmmContext}
+            disabled={isCmmDisabled}
+            ref={cmmContext.setAnchorRef}
+          />
+        )}
+      </div>
+      <CmmOverlay
+        cmmContext={cmmContext}
+        showForecastingUI={false}
+        onClickScrollLink={onScrollToLink ?? (() => {})}
+      />
+    </>
+  );
+};
+
+export default CommentActionBar;
diff --git a/front_end/src/components/comment_feed/comment_cmm.tsx b/front_end/src/components/comment_feed/comment_cmm.tsx
index 2321551e8e..f52cf4f4bb 100644
--- a/front_end/src/components/comment_feed/comment_cmm.tsx
+++ b/front_end/src/components/comment_feed/comment_cmm.tsx
@@ -23,6 +23,7 @@ import React, {
   FC,
   useLayoutEffect,
   useCallback,
+  useEffect,
 } from "react";
 
 import { toggleCMMComment } from "@/app/(main)/questions/actions";
@@ -193,6 +194,14 @@ export const useCmmContext = (
     isModalOpen: false,
   });
 
+  useEffect(() => {
+    setCmmState((prev) => ({
+      ...prev,
+      count: initialCount,
+      isCmmEnabled: initialCmmEnabled,
+    }));
+  }, [initialCount, initialCmmEnabled]);
+
   const setIsOverlayOpen = (open: boolean) =>
     setCmmState({ ...cmmState, isModalOpen: open });
 
diff --git a/front_end/src/components/comment_feed/comment_voter.tsx b/front_end/src/components/comment_feed/comment_voter.tsx
index 0c4426b306..9486e8409d 100644
--- a/front_end/src/components/comment_feed/comment_voter.tsx
+++ b/front_end/src/components/comment_feed/comment_voter.tsx
@@ -1,5 +1,5 @@
 "use client";
-import { FC, useState } from "react";
+import { FC, useEffect, useState } from "react";
 
 import { voteComment } from "@/app/(main)/questions/actions";
 import Voter from "@/components/voter";
@@ -12,6 +12,7 @@ import { logError } from "@/utils/core/errors";
 type Props = {
   voteData: VoteData;
   className?: string;
+  onVoteChange?: (voteScore: number, userVote: VoteDirection | null) => void;
 };
 
 type VoteData = {
@@ -21,12 +22,18 @@ type VoteData = {
   userVote: VoteDirection;
 };
 
-const CommentVoter: FC<Props> = ({ voteData, className }) => {
+const CommentVoter: FC<Props> = ({ voteData, className, onVoteChange }) => {
   const { user } = useAuth();
   const { setCurrentModal } = useModal();
 
   const [userVote, setUserVote] = useState(voteData.userVote);
   const [voteScore, setVoteScore] = useState(voteData.voteScore);
+
+  useEffect(() => {
+    setUserVote(voteData.userVote);
+    setVoteScore(voteData.voteScore);
+  }, [voteData.userVote, voteData.voteScore]);
+
   const handleVote = async (direction: VoteDirection) => {
     if (!user) {
       setCurrentModal({ type: "signin" });
@@ -44,6 +51,7 @@ const CommentVoter: FC<Props> = ({ voteData, className }) => {
       if (response && "score" in response) {
         setUserVote(newDirection);
         setVoteScore(response.score as number);
+        onVoteChange?.(response.score as number, newDirection);
       }
     } catch (e) {
       logError(e);
diff --git a/front_end/src/components/ui/expandable_content.tsx b/front_end/src/components/ui/expandable_content.tsx
index 28e21ec488..cd783fdf1b 100644
--- a/front_end/src/components/ui/expandable_content.tsx
+++ b/front_end/src/components/ui/expandable_content.tsx
@@ -17,6 +17,7 @@ type Props = {
   className?: string;
   gradientClassName?: string;
   forceState?: boolean;
+  onExpandedChange?: (expanded: boolean) => void;
 };
 
 const ExpandableContent: FC<PropsWithChildren<Props>> = ({
@@ -26,6 +27,7 @@ const ExpandableContent: FC<PropsWithChildren<Props>> = ({
   gradientClassName = "from-blue-200 dark:from-blue-200-dark",
   className,
   forceState,
+  onExpandedChange,
   children,
 }) => {
   const t = useTranslations();
@@ -61,6 +63,10 @@ const ExpandableContent: FC<PropsWithChildren<Props>> = ({
     }
   }, [forceState]);
 
+  useEffect(() => {
+    onExpandedChange?.(isExpanded);
+  }, [isExpanded, onExpandedChange]);
+
   return (
     <div className={cn(gradientClassName, className)}>
       <div className="relative">
diff --git a/front_end/src/stories/utils/mocks/mock_comments_feed_provider.tsx b/front_end/src/stories/utils/mocks/mock_comments_feed_provider.tsx
index 292882f05b..5ec9b99090 100644
--- a/front_end/src/stories/utils/mocks/mock_comments_feed_provider.tsx
+++ b/front_end/src/stories/utils/mocks/mock_comments_feed_provider.tsx
@@ -27,6 +27,9 @@ export const MockCommentsFeedProvider: React.FC<PropsWithChildren> = ({
         finalizeReply: () => {},
         optimisticallyAddReplyEnsuringParent: async () => 0,
         removeTempReply: () => {},
+        ensureCommentLoaded: async () => false,
+        refreshComment: async () => {},
+        updateComment: () => {},
       }}
     >
       {children}