diff --git a/front_end/src/app/(embed)/questions/assets/metaculus-dark.png b/front_end/src/app/(embed)/questions/assets/metaculus-dark.png
new file mode 100644
index 0000000000..4c6ee1b192
Binary files /dev/null and b/front_end/src/app/(embed)/questions/assets/metaculus-dark.png differ
diff --git a/front_end/src/app/(embed)/questions/assets/metaculus-light.png b/front_end/src/app/(embed)/questions/assets/metaculus-light.png
new file mode 100644
index 0000000000..a31595da21
Binary files /dev/null and b/front_end/src/app/(embed)/questions/assets/metaculus-light.png differ
diff --git a/front_end/src/app/(embed)/questions/components/embed_question_card.tsx b/front_end/src/app/(embed)/questions/components/embed_question_card.tsx
new file mode 100644
index 0000000000..042f8a8cfb
--- /dev/null
+++ b/front_end/src/app/(embed)/questions/components/embed_question_card.tsx
@@ -0,0 +1,96 @@
+import { useEffect, useMemo, useState } from "react";
+
+import { PostWithForecasts } from "@/types/post";
+
+import EmbedQuestionFooter from "./embed_question_footer";
+import EmbedQuestionHeader from "./embed_question_header";
+import EmbedQuestionPlot from "./embed_question_plot";
+import { QuestionViewModeProvider } from "./question_view_mode_context";
+import { EmbedTheme } from "../constants/embed_theme";
+import { EmbedSize, getEmbedChartHeight } from "../helpers/embed_chart_height";
+
+type Props = {
+  post: PostWithForecasts;
+  ogMode?: boolean;
+  size: EmbedSize;
+  theme?: EmbedTheme;
+  titleOverride?: string;
+  containerWidth?: number;
+};
+
+const EmbedQuestionCard: React.FC<Props> = ({
+  post,
+  ogMode,
+  size,
+  theme,
+  titleOverride,
+  containerWidth,
+}) => {
+  const [headerHeight, setHeaderHeight] = useState(0);
+  const [legendHeight, setLegendHeight] = useState(0);
+  const [ogReady, setOgReady] = useState(!ogMode);
+
+  const chartHeight = useMemo(() => {
+    if (ogMode) {
+      return getEmbedChartHeight({
+        post,
+        ogMode,
+        size,
+        headerHeight,
+        legendHeight,
+      });
+    }
+
+    return getEmbedChartHeight({
+      post,
+      ogMode,
+      size,
+      headerHeight,
+      legendHeight,
+    });
+  }, [post, ogMode, size, headerHeight, legendHeight]);
+
+  useEffect(() => {
+    if (!ogMode) return;
+
+    if (!headerHeight) {
+      setOgReady(false);
+      return;
+    }
+
+    let raf1 = 0;
+    let raf2 = 0;
+
+    raf1 = requestAnimationFrame(() => {
+      raf2 = requestAnimationFrame(() => {
+        setOgReady(true);
+      });
+    });
+
+    return () => {
+      cancelAnimationFrame(raf1);
+      cancelAnimationFrame(raf2);
+    };
+  }, [ogMode, headerHeight, legendHeight]);
+
+  return (
+    <QuestionViewModeProvider mode="embed" containerWidth={containerWidth}>
+      <EmbedQuestionHeader
+        post={post}
+        onHeightChange={setHeaderHeight}
+        titleStyle={theme?.title}
+        titleOverride={titleOverride}
+        theme={theme}
+      />
+      <EmbedQuestionPlot
+        post={post}
+        chartHeight={chartHeight}
+        onLegendHeightChange={setLegendHeight}
+        theme={theme}
+      />
+      <EmbedQuestionFooter ogReady={ogReady} post={post} />
+    </QuestionViewModeProvider>
+  );
+};
+
+export default EmbedQuestionCard;
diff --git a/front_end/src/app/(embed)/questions/components/embed_question_footer.tsx b/front_end/src/app/(embed)/questions/components/embed_question_footer.tsx
new file mode 100644
index 0000000000..f1d64251df
--- /dev/null
+++ b/front_end/src/app/(embed)/questions/components/embed_question_footer.tsx
@@ -0,0 +1,54 @@
+import Image from "next/image";
+import React from "react";
+
+import ForecastersCounter from "@/app/(main)/questions/components/forecaster_counter";
+import CommentStatus from "@/components/post_card/basic_post_card/comment_status";
+import { PostWithForecasts } from "@/types/post";
+
+import metaculusDarkLogo from "../assets/metaculus-dark.png";
+import metaculusLightLogo from "../assets/metaculus-light.png";
+
+type Props = {
+  post: PostWithForecasts;
+  ogReady?: boolean;
+};
+
+const EmbedQuestionFooter: React.FC<Props> = ({ post, ogReady }) => {
+  return (
+    <div className="flex flex-wrap items-center justify-between gap-y-3">
+      <div className="flex items-center gap-2">
+        <ForecastersCounter
+          className="py-1 pl-0 pr-1.5 [&_strong]:font-normal"
+          forecasters={post.nr_forecasters}
+        />
+        <CommentStatus
+          className="!px-1.5 py-1 [&_strong]:font-normal [&_svg]:text-gray-400 [&_svg]:dark:text-gray-400-dark"
+          totalCount={post.comment_count ?? 0}
+          unreadCount={post.unread_comment_count ?? 0}
+          url={""}
+        />
+      </div>
+
+      {ogReady && (
+        <div id="id-logo-used-by-screenshot-donot-change">
+          <Image
+            className="dark:hidden"
+            src={metaculusDarkLogo}
+            alt="Metaculus Logo"
+            width={74}
+            height={15}
+          />
+          <Image
+            className="hidden dark:block"
+            src={metaculusLightLogo}
+            alt="Metaculus Logo"
+            width={74}
+            height={15}
+          />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default EmbedQuestionFooter;
diff --git a/front_end/src/app/(embed)/questions/components/embed_question_header.tsx b/front_end/src/app/(embed)/questions/components/embed_question_header.tsx
new file mode 100644
index 0000000000..edd9c2ea31
--- /dev/null
+++ b/front_end/src/app/(embed)/questions/components/embed_question_header.tsx
@@ -0,0 +1,130 @@
+import { CSSProperties, useEffect, useMemo, useRef } from "react";
+
+import QuestionHeaderCPStatus from "@/app/(main)/questions/[id]/components/question_view/forecaster_question_view/question_header/question_header_cp_status";
+import { ContinuousQuestionTypes } from "@/constants/questions";
+import { PostWithForecasts } from "@/types/post";
+import { QuestionType, QuestionWithForecasts } from "@/types/question";
+import cn from "@/utils/core/cn";
+import {
+  isContinuousQuestion,
+  isGroupOfQuestionsPost,
+  isQuestionPost,
+} from "@/utils/questions/helpers";
+
+import { useIsEmbedMode } from "./question_view_mode_context";
+import TruncatableQuestionTitle from "./truncatable_question_title";
+import { EmbedTheme } from "../constants/embed_theme";
+import { getEmbedAccentColor } from "../helpers/embed_theme";
+
+type Props = {
+  post: PostWithForecasts;
+  onHeightChange?: (height: number) => void;
+  titleStyle?: CSSProperties;
+  titleOverride?: string;
+  theme?: EmbedTheme;
+};
+
+const EmbedQuestionHeader: React.FC<Props> = ({
+  post,
+  onHeightChange,
+  titleStyle,
+  titleOverride,
+  theme,
+}) => {
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const isEmbed = useIsEmbedMode();
+
+  useEffect(() => {
+    if (!onHeightChange) return;
+    const el = containerRef.current;
+    if (!el) return;
+
+    const update = () => {
+      onHeightChange(el.getBoundingClientRect().height);
+    };
+
+    update();
+
+    const observer = new ResizeObserver(() => {
+      update();
+    });
+    observer.observe(el);
+
+    return () => observer.disconnect();
+  }, [onHeightChange]);
+
+  const maxLines = useMemo(() => {
+    if (isGroupOfQuestionsPost(post)) {
+      const firstType = post.group_of_questions.questions[0]?.type;
+      const isBinaryGroup = firstType === QuestionType.Binary;
+      const isContinuousGroup = ContinuousQuestionTypes.some(
+        (t) => t === firstType
+      );
+
+      if (isBinaryGroup || isContinuousGroup) return 2;
+      return 3;
+    }
+
+    if (!isQuestionPost(post)) return 3;
+    const q = post.question;
+
+    if (q.type === QuestionType.MultipleChoice) return 2;
+    return q.type === QuestionType.Binary || isContinuousQuestion(q) ? 4 : 3;
+  }, [post]);
+
+  const titleMinHeightClass = useMemo(() => {
+    if (isGroupOfQuestionsPost(post)) {
+      const firstType = post.group_of_questions.questions[0]?.type;
+      const isBinaryGroup = firstType === QuestionType.Binary;
+      const isContinuousGroup = ContinuousQuestionTypes.some(
+        (t) => t === firstType
+      );
+
+      return isBinaryGroup || isContinuousGroup ? "min-h-[2.5em]" : "";
+    }
+
+    if (!isQuestionPost(post)) return "";
+    const q = post.question;
+
+    const needsMinHeight =
+      q.type === QuestionType.MultipleChoice ||
+      q.type === QuestionType.Binary ||
+      isContinuousQuestion(q);
+
+    return needsMinHeight ? "min-h-[2.5em]" : "";
+  }, [post]);
+
+  const predictionColor = getEmbedAccentColor(theme);
+
+  return (
+    <div
+      ref={containerRef}
+      className={cn("flex items-center gap-3", isEmbed && "items-start")}
+    >
+      <TruncatableQuestionTitle
+        className={cn(
+          "!text-[20px] !leading-[125%] [@container(max-width:375px)]:!text-[16px]",
+          titleMinHeightClass
+        )}
+        maxLines={maxLines}
+        revealOnHoverOrTap={true}
+        style={titleStyle}
+      >
+        {titleOverride ?? post.title}
+      </TruncatableQuestionTitle>
+      {isQuestionPost(post) && (
+        <div className="[@container(max-width:375px)]:hidden">
+          <QuestionHeaderCPStatus
+            question={post.question as QuestionWithForecasts}
+            size="md"
+            hideLabel={isContinuousQuestion(post.question)}
+            colorOverride={predictionColor}
+            chartTheme={theme?.chart}
+          />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default EmbedQuestionHeader;
diff --git a/front_end/src/app/(embed)/questions/components/embed_question_plot.tsx b/front_end/src/app/(embed)/questions/components/embed_question_plot.tsx
new file mode 100644
index 0000000000..45f1c83ceb
--- /dev/null
+++ b/front_end/src/app/(embed)/questions/components/embed_question_plot.tsx
@@ -0,0 +1,50 @@
+import DetailedGroupCard from "@/components/detailed_question_card/detailed_group_card";
+import DetailedQuestionCard from "@/components/detailed_question_card/detailed_question_card";
+import { PostWithForecasts } from "@/types/post";
+import {
+  isGroupOfQuestionsPost,
+  isQuestionPost,
+} from "@/utils/questions/helpers";
+
+import { EmbedTheme } from "../constants/embed_theme";
+import { getEmbedAccentColor } from "../helpers/embed_theme";
+
+type Props = {
+  post: PostWithForecasts;
+  chartHeight?: number;
+  onLegendHeightChange?: (height: number) => void;
+  theme?: EmbedTheme;
+};
+
+const EmbedQuestionPlot: React.FC<Props> = ({
+  post,
+  chartHeight,
+  onLegendHeightChange,
+  theme,
+}) => {
+  const isGroup = isGroupOfQuestionsPost(post);
+  const accent = getEmbedAccentColor(theme);
+  return (
+    <>
+      {isQuestionPost(post) && (
+        <DetailedQuestionCard
+          post={post}
+          embedChartHeight={chartHeight}
+          onLegendHeightChange={onLegendHeightChange}
+          chartTheme={theme?.chart}
+          colorOverride={accent}
+        />
+      )}
+      {isGroup && (
+        <DetailedGroupCard
+          post={post}
+          embedChartHeight={chartHeight}
+          onLegendHeightChange={onLegendHeightChange}
+          chartTheme={theme?.chart}
+        />
+      )}
+    </>
+  );
+};
+
+export default EmbedQuestionPlot;
diff --git a/front_end/src/app/(embed)/questions/components/embed_screen.tsx b/front_end/src/app/(embed)/questions/components/embed_screen.tsx
new file mode 100644
index 0000000000..ad5e09d80d
--- /dev/null
+++ b/front_end/src/app/(embed)/questions/components/embed_screen.tsx
@@ -0,0 +1,170 @@
+"use client";
+
+import React, { useEffect, useRef, useState } from "react";
+
+import { ContinuousQuestionTypes } from "@/constants/questions";
+import { GroupOfQuestionsGraphType, PostWithForecasts } from "@/types/post";
+import { QuestionType } from "@/types/question";
+import cn from "@/utils/core/cn";
+import { isGroupOfQuestionsPost } from "@/utils/questions/helpers";
+
+import EmbedQuestionCard from "./embed_question_card";
+import { EmbedTheme } from "../constants/embed_theme";
+import { EmbedSize } from "../helpers/embed_chart_height";
+
+type Props = {
+  post: PostWithForecasts;
+  targetWidth?: number;
+  targetHeight?: number;
+  theme?: EmbedTheme;
+  titleOverride?: string;
+};
+
+const MIN_EMBED_WIDTH = 360;
+const DYNAMIC_BELOW_WIDTH = 440;
+
+function getBinaryContinuousSize(containerWidth: number): EmbedSize {
+  if (containerWidth >= 550) return { width: 550, height: 360 };
+  if (containerWidth >= 440) return { width: 440, height: 360 };
+  return { width: 360, height: 360 };
+}
+
+function getOtherSize(containerWidth: number): EmbedSize {
+  if (containerWidth >= 550) return { width: 550, height: 270 };
+  if (containerWidth >= 440) return { width: 440, height: 270 };
+  if (containerWidth >= 400) return { width: 400, height: 360 };
+  return { width: 360, height: 360 };
+}
+
+function getSizeForPost(post: PostWithForecasts, containerWidth: number) {
+  const isBinaryOrContinuous =
+    !!post.question &&
+    (post.question.type === QuestionType.Binary ||
+      ContinuousQuestionTypes.some((t) => t === post.question?.type));
+
+  const isFanChart =
+    isGroupOfQuestionsPost(post) &&
+    post.group_of_questions?.graph_type === GroupOfQuestionsGraphType.FanGraph;
+
+  return isBinaryOrContinuous || isFanChart
+    ? getBinaryContinuousSize(containerWidth)
+    : getOtherSize(containerWidth);
+}
+
+const EmbedScreen: React.FC<Props> = ({
+  post,
+  targetWidth,
+  targetHeight,
+  theme,
+  titleOverride,
+}) => {
+  const frameRef = useRef<HTMLDivElement | null>(null);
+
+  const [containerWidth, setContainerWidth] = useState(MIN_EMBED_WIDTH);
+
+  useEffect(() => {
+    if (!frameRef.current) return;
+
+    const el = frameRef.current;
+
+    const observer = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      const rawWidth = entry?.contentRect.width ?? MIN_EMBED_WIDTH;
+      setContainerWidth(rawWidth);
+    });
+
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [post]);
+
+  const ogMode =
+    typeof targetWidth === "number" && typeof targetHeight === "number";
+
+  const isDynamic = !ogMode && containerWidth < DYNAMIC_BELOW_WIDTH;
+
+  const effectiveWidthForSizing = isDynamic
+    ? containerWidth
+    : Math.max(containerWidth, MIN_EMBED_WIDTH);
+
+  const snapped = getSizeForPost(post, effectiveWidthForSizing);
+
+  const baseWidth = isDynamic
+    ? effectiveWidthForSizing
+    : snapped.width || MIN_EMBED_WIDTH;
+
+  const baseHeight = snapped.height || MIN_EMBED_WIDTH;
+
+  const scale = ogMode
+    ? Math.min(targetWidth / baseWidth, targetHeight / baseHeight)
+    : 1;
+
+  const isBinary = post.question?.type === QuestionType.Binary;
+  const isContinuous =
+    post.question &&
+    ContinuousQuestionTypes.some((t) => t === post.question?.type);
+
+  const frameStyle: React.CSSProperties = ogMode
+    ? {
+        width: targetWidth,
+        height: targetHeight,
+        minWidth: MIN_EMBED_WIDTH,
+        boxSizing: "border-box",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        overflow: "hidden",
+      }
+    : {
+        width: isDynamic ? "100%" : baseWidth,
+        ...(isDynamic ? {} : { minWidth: MIN_EMBED_WIDTH }),
+        ...(isDynamic ? {} : { height: baseHeight, minHeight: baseHeight }),
+
+        boxSizing: "border-box",
+      };
+
+  return (
+    <div
+      ref={frameRef}
+      className="flex size-full min-h-[inherit] items-center justify-center bg-blue-100 [container-type:inline-size] dark:bg-blue-100-dark"
+      style={{ minWidth: isDynamic ? undefined : MIN_EMBED_WIDTH }}
+    >
+      <div
+        id="id-used-by-screenshot-donot-change"
+        className={cn(
+          "bg-blue-100 text-gray-900",
+          "dark:bg-blue-100-dark dark:text-gray-900-dark"
+        )}
+        style={{
+          ...frameStyle,
+          ...theme?.card,
+        }}
+      >
+        <div
+          className={cn(
+            "EmbedQuestionCard flex flex-col p-5 pb-4",
+            isBinary || isContinuous ? "gap-5" : "gap-4 pb-5"
+          )}
+          style={{
+            width: isDynamic ? "100%" : baseWidth,
+            ...(isDynamic ? {} : { minWidth: MIN_EMBED_WIDTH }),
+            ...(isDynamic ? {} : { height: baseHeight, minHeight: baseHeight }),
+            boxSizing: "border-box",
+            transform: scale !== 1 ? `scale(${scale})` : undefined,
+            transformOrigin: "center center",
+          }}
+        >
+          <EmbedQuestionCard
+            size={snapped}
+            ogMode={ogMode}
+            post={post}
+            theme={theme}
+            titleOverride={titleOverride}
+            containerWidth={containerWidth}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default EmbedScreen;
diff --git a/front_end/src/app/(embed)/questions/components/question_view_mode_context.tsx b/front_end/src/app/(embed)/questions/components/question_view_mode_context.tsx
new file mode 100644
index 0000000000..dcfb6b4598
--- /dev/null
+++ b/front_end/src/app/(embed)/questions/components/question_view_mode_context.tsx
@@ -0,0 +1,45 @@
+"use client";
+
+import React, { createContext, useContext } from "react";
+
+export type QuestionViewMode = "default" | "embed";
+
+type QuestionViewContextValue = {
+  mode: QuestionViewMode;
+  containerWidth?: number;
+};
+
+const QuestionViewModeContext = createContext<QuestionViewContextValue>({
+  mode: "default",
+  containerWidth: undefined,
+});
+
+type ProviderProps = {
+  mode?: QuestionViewMode;
+  containerWidth?: number;
+  children: React.ReactNode;
+};
+
+export const QuestionViewModeProvider: React.FC<ProviderProps> = ({
+  mode = "default",
+  containerWidth,
+  children,
+}) => (
+  <QuestionViewModeContext.Provider value={{ mode, containerWidth }}>
+    {children}
+  </QuestionViewModeContext.Provider>
+);
+
+export const useQuestionViewMode = () =>
+  useContext(QuestionViewModeContext).mode;
+
+export const useIsEmbedMode = () => useQuestionViewMode() === "embed";
+
+export const useEmbedContainerWidth = () =>
+  useContext(QuestionViewModeContext).containerWidth;
+
+export const useIsEmbedNarrow = (maxWidthPx: number) => {
+  const isEmbed = useIsEmbedMode();
+  const w = useEmbedContainerWidth();
+  return !!isEmbed && typeof w === "number" && w > 0 && w < maxWidthPx;
+};
diff --git a/front_end/src/app/(embed)/questions/components/truncatable_question_title.tsx b/front_end/src/app/(embed)/questions/components/truncatable_question_title.tsx
new file mode 100644
index 0000000000..6468c168f3
--- /dev/null
+++ b/front_end/src/app/(embed)/questions/components/truncatable_question_title.tsx
@@ -0,0 +1,150 @@
+"use client";
+
+import React, { HTMLAttributes, useEffect, useRef, useState } from "react";
+
+import QuestionTitle from "@/app/(main)/questions/[id]/components/question_view/shared/question_title";
+import cn from "@/utils/core/cn";
+
+type TruncatableQuestionTitleProps = HTMLAttributes<HTMLHeadingElement> & {
+  maxLines?: number;
+  revealOnHoverOrTap?: boolean;
+};
+
+const GRADIENT_EXTRA_PX = 12;
+
+const TruncatableQuestionTitle: React.FC<TruncatableQuestionTitleProps> = ({
+  children,
+  className,
+  style,
+  maxLines = 4,
+  revealOnHoverOrTap = true,
+  onMouseEnter,
+  onMouseLeave,
+  onFocus,
+  onBlur,
+  onClick,
+  ...rest
+}) => {
+  const [expanded, setExpanded] = useState(false);
+  const [isTruncated, setIsTruncated] = useState(false);
+  const [contentHeight, setContentHeight] = useState<number | null>(null);
+  const [clampedHeight, setClampedHeight] = useState<number | null>(null);
+  const titleRef = useRef<HTMLHeadingElement | null>(null);
+
+  const hasClamp = maxLines > 0;
+
+  const clampStyle: React.CSSProperties = hasClamp
+    ? {
+        display: "-webkit-box",
+        WebkitLineClamp: maxLines,
+        WebkitBoxOrient: "vertical",
+        overflow: "hidden",
+      }
+    : {};
+
+  useEffect(() => {
+    const el = titleRef.current;
+    if (!el || !hasClamp) {
+      setIsTruncated(false);
+      setContentHeight(null);
+      setClampedHeight(null);
+      return;
+    }
+
+    const checkTruncation = () => {
+      const client = el.clientHeight;
+      const scroll = el.scrollHeight;
+
+      setClampedHeight(client);
+      setContentHeight(scroll);
+      setIsTruncated(scroll > client + 1);
+    };
+
+    checkTruncation();
+
+    const observer = new ResizeObserver(checkTruncation);
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [children, maxLines, hasClamp]);
+
+  const handleRevealOn = () => {
+    if (!revealOnHoverOrTap || !isTruncated) return;
+    setExpanded(true);
+  };
+
+  const handleRevealOff = () => {
+    if (!revealOnHoverOrTap || !isTruncated) return;
+    setExpanded(false);
+  };
+
+  const handleToggleClick = () => {
+    if (!revealOnHoverOrTap || !isTruncated) return;
+    setExpanded((prev) => !prev);
+  };
+
+  const showOverlay = revealOnHoverOrTap && isTruncated && expanded;
+
+  const baseHeight = showOverlay ? contentHeight : clampedHeight;
+  const gradientHeight =
+    baseHeight != null ? baseHeight + GRADIENT_EXTRA_PX : undefined;
+
+  return (
+    <div
+      className={cn("relative w-full", revealOnHoverOrTap && "cursor-pointer")}
+      onMouseEnter={(e) => {
+        onMouseEnter?.(e);
+        handleRevealOn();
+      }}
+      onMouseLeave={(e) => {
+        onMouseLeave?.(e);
+        handleRevealOff();
+      }}
+      onFocus={(e) => {
+        onFocus?.(e);
+        handleRevealOn();
+      }}
+      onBlur={(e) => {
+        onBlur?.(e);
+        handleRevealOff();
+      }}
+      onClick={(e) => {
+        onClick?.(e);
+        handleToggleClick();
+      }}
+    >
+      <QuestionTitle
+        {...rest}
+        ref={titleRef}
+        className={className}
+        style={{
+          ...clampStyle,
+          ...style,
+          ...(showOverlay ? { visibility: "hidden" } : {}),
+        }}
+      >
+        {children}
+      </QuestionTitle>
+
+      {showOverlay && (
+        <>
+          <div className="pointer-events-none absolute inset-x-0 top-0 z-20">
+            <QuestionTitle className={className} style={style}>
+              {children}
+            </QuestionTitle>
+          </div>
+
+          <div
+            className={cn(
+              "pointer-events-none absolute inset-x-0 top-0 z-10",
+              "bg-gradient-to-b from-blue-100/0 via-blue-100/90 to-blue-100",
+              "dark:from-blue-100-dark/0 dark:via-blue-100-dark/90 dark:to-blue-100-dark"
+            )}
+            style={gradientHeight ? { height: gradientHeight } : undefined}
+          />
+        </>
+      )}
+    </div>
+  );
+};
+
+export default TruncatableQuestionTitle;
diff --git a/front_end/src/app/(embed)/questions/embed/[id]/page.tsx b/front_end/src/app/(embed)/questions/embed/[id]/page.tsx
index 8831fcc583..ab98826147 100644
--- a/front_end/src/app/(embed)/questions/embed/[id]/page.tsx
+++ b/front_end/src/app/(embed)/questions/embed/[id]/page.tsx
@@ -1,98 +1,51 @@
-import Link from "next/link";
-import { getTranslations } from "next-intl/server";
-
-import ForecastCard from "@/components/forecast_card";
-import CommunityDisclaimer from "@/components/post_card/community_disclaimer";
-import {
-  CHART_TYPE_PARAM,
-  EMBED_QUESTION_TITLE,
-  GRAPH_ZOOM_PARAM,
-  HIDE_ZOOM_PICKER,
-} from "@/constants/global_search_params";
+import { EMBED_QUESTION_TITLE } from "@/constants/global_search_params";
 import ServerPostsApi from "@/services/api/posts/posts.server";
-import { EmbedChartType, TimelineChartZoomOption } from "@/types/charts";
 import { SearchParams } from "@/types/navigation";
-import "./styles.scss";
-import { TournamentType } from "@/types/projects";
 
+import EmbedScreen from "../../components/embed_screen";
 import { getEmbedTheme } from "../../helpers/embed_theme";
 
+import "./styles.scss";
+
+const OG_WIDTH = 1200;
+const OG_HEIGHT = 630;
+
 export default async function GenerateQuestionPreview(props: {
   params: Promise<{ id: number }>;
   searchParams: Promise<SearchParams>;
 }) {
-  const searchParams = await props.searchParams;
-  const params = await props.params;
-  const t = await getTranslations();
+  const [searchParams, params] = await Promise.all([
+    props.searchParams,
+    props.params,
+  ]);
+
   const post = await ServerPostsApi.getPostAnonymous(params.id);
-  if (!post) {
-    return null;
-  }
-  const isCommunityQuestion =
-    post.projects.default_project.type === TournamentType.Community;
+  if (!post) return null;
 
   const embedTheme = getEmbedTheme(
     searchParams["embed_theme"],
     searchParams["css_variables"]
   );
-  const nonInteractiveParam = searchParams["non-interactive"];
-
-  const chartZoomParam = searchParams[GRAPH_ZOOM_PARAM];
-  let chartZoom: TimelineChartZoomOption | undefined = undefined;
-  if (typeof chartZoomParam === "string") {
-    chartZoom =
-      (chartZoomParam as TimelineChartZoomOption) ??
-      TimelineChartZoomOption.TwoMonths;
-  }
 
-  const hideZoomPickerParam = searchParams[HIDE_ZOOM_PICKER];
-  const embedTitle = searchParams[EMBED_QUESTION_TITLE] as string | undefined;
-  const chartTypeParam = searchParams[CHART_TYPE_PARAM] as
-    | EmbedChartType
+  const titleOverride = searchParams[EMBED_QUESTION_TITLE] as
+    | string
     | undefined;
 
-  return (
-    <div
-      className="flex size-full flex-col gap-8 bg-blue-100 p-4 text-gray-900 dark:bg-blue-100-dark dark:text-gray-900-dark xs:p-8 lg:p-14"
-      id="id-used-by-screenshot-donot-change"
-      style={{
-        minHeight: "inherit",
-        ...embedTheme.card,
-      }}
-    >
-      {isCommunityQuestion && (
-        <CommunityDisclaimer
-          project={post.projects.default_project}
-          variant="standalone"
-          className="-mb-2"
-        />
-      )}
-      <ForecastCard
-        post={post}
-        className="size-full flex-1 bg-transparent hover:shadow-none dark:bg-transparent"
-        embedTheme={embedTheme}
-        nonInteractive={!!nonInteractiveParam && nonInteractiveParam === "true"}
-        defaultChartZoom={chartZoom}
-        withZoomPicker={hideZoomPickerParam !== "true"}
-        navigateToNewTab
-        embedTitle={embedTitle}
-        embedChartType={chartTypeParam}
-      />
-      <div className="flex items-center justify-between gap-8">
-        <h4 className="text-sm font-normal lg:text-2xl">
-          {t("forecastDisclaimer", {
-            predictionCount: post.forecasts_count ?? 0,
-            forecasterCount: post.nr_forecasters,
-          })}
-        </h4>
-        <Link
-          href="/"
-          id="id-logo-used-by-screenshot-donot-change"
-          className="m-0 max-w-64 font-league-gothic text-4xl font-light capitalize tracking-wider no-underline antialiased lg:text-6xl"
-        >
-          {t("metaculus")}
-        </Link>
-      </div>
-    </div>
+  const isOgCapture = searchParams["og"] === "1";
+
+  const commonProps = {
+    post,
+    theme: embedTheme,
+    titleOverride,
+  };
+
+  return isOgCapture ? (
+    <EmbedScreen
+      {...commonProps}
+      targetWidth={OG_WIDTH}
+      targetHeight={OG_HEIGHT}
+    />
+  ) : (
+    <EmbedScreen {...commonProps} />
   );
 }
diff --git a/front_end/src/app/(embed)/questions/embed/[id]/styles.scss b/front_end/src/app/(embed)/questions/embed/[id]/styles.scss
index dc24a55969..3289cbcb92 100644
--- a/front_end/src/app/(embed)/questions/embed/[id]/styles.scss
+++ b/front_end/src/app/(embed)/questions/embed/[id]/styles.scss
@@ -188,3 +188,67 @@ body {
     }
   }
 }
+
+.EmbedQuestionCard {
+  --embed-title-size: 28px;
+  --embed-chip-size: 28px;
+  --embed-chip-line: 1.1;
+  --embed-label-size: 14px;
+  --embed-label-line: 16px;
+  --embed-icon-size: 12px;
+  --embed-ellipsis-size: 22px;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.EmbedQuestionCard .ForecastCard-header > h2 {
+  font-size: var(--embed-title-size);
+  line-height: 1.2;
+}
+
+.EmbedQuestionCard .ForecastCard-prediction .InternalChip,
+.EmbedQuestionCard .ForecastCard-prediction .InternalLabel {
+  font-size: var(--embed-chip-size);
+  line-height: var(--embed-chip-line);
+}
+
+.EmbedQuestionCard .ForecastCard-prediction .InternalChip {
+  padding-left: 14px;
+  padding-right: 14px;
+  padding-top: 22px;
+  padding-bottom: 22px;
+}
+
+.EmbedQuestionCard .embed-gap {
+  gap: 10px;
+}
+
+.EmbedQuestionCard .MultipleChoiceTile .resize-label,
+.EmbedQuestionCard .MultiTimeSeriesTile .resize-label {
+  font-size: var(--embed-label-size);
+  line-height: var(--embed-label-line);
+}
+
+.EmbedQuestionCard .MultipleChoiceTile .resize-icon,
+.EmbedQuestionCard .MultiTimeSeriesTile .resize-icon {
+  width: var(--embed-icon-size);
+  height: var(--embed-icon-size);
+}
+
+.EmbedQuestionCard .MultipleChoiceTile .resize-ellipsis,
+.EmbedQuestionCard .MultiTimeSeriesTile .resize-ellipsis {
+  font-size: var(--embed-ellipsis-size);
+  line-height: var(--embed-label-line);
+  width: auto;
+}
+
+.EmbedQuestionCard .MultipleChoiceTile {
+  @media screen and (min-width: $embeds-max-width) {
+    gap: 1.25rem;
+
+    .resize-label {
+      padding-left: 0px;
+      margin-left: -2px;
+    }
+  }
+}
diff --git a/front_end/src/app/(embed)/questions/helpers/embed_chart_height.ts b/front_end/src/app/(embed)/questions/helpers/embed_chart_height.ts
new file mode 100644
index 0000000000..c6f983e23e
--- /dev/null
+++ b/front_end/src/app/(embed)/questions/helpers/embed_chart_height.ts
@@ -0,0 +1,114 @@
+import { ContinuousQuestionTypes } from "@/constants/questions";
+import { GroupOfQuestionsGraphType, PostWithForecasts } from "@/types/post";
+import { QuestionType } from "@/types/question";
+import { isGroupOfQuestionsPost } from "@/utils/questions/helpers";
+
+export type EmbedSize = {
+  width: number;
+  height: number;
+};
+
+const HEADER = {
+  MIN: 50,
+  MAX: 100,
+} as const;
+
+function clamp(n: number, min: number, max: number) {
+  return Math.min(max, Math.max(min, n));
+}
+
+function headerT(headerHeight: number) {
+  if (!headerHeight) return null;
+  const clamped = clamp(headerHeight, HEADER.MIN, HEADER.MAX);
+  return (clamped - HEADER.MIN) / (HEADER.MAX - HEADER.MIN);
+}
+
+type ChartRange = {
+  min: number;
+  max: number;
+  fudge: number;
+};
+
+function getChartRange(args: {
+  post: PostWithForecasts;
+  ogMode?: boolean;
+  size: EmbedSize;
+  legendHeight?: number;
+  headerHeight?: number;
+}): ChartRange {
+  const { post, ogMode, size, legendHeight, headerHeight } = args;
+
+  const isMC = post.question?.type === QuestionType.MultipleChoice;
+  const isGroup = isGroupOfQuestionsPost(post);
+  const isDate = post.question?.type === QuestionType.Date;
+
+  const header = headerHeight ?? 0;
+  let min = !ogMode
+    ? 152
+    : header >= 175 || (header > 80 && header < 90)
+      ? isDate
+        ? 130
+        : 150
+      : 176;
+
+  let max = ogMode ? 320 : 202;
+  let fudge = 8;
+
+  if (isDate && !ogMode) {
+    min = 132;
+  }
+
+  if (isMC) {
+    min = ogMode ? 120 : 73;
+    max = size.width <= 400 ? 202 - (legendHeight ?? 0) : 124;
+    fudge = 0;
+    return { min, max, fudge };
+  }
+
+  if (isGroup) {
+    const firstType = post.group_of_questions.questions[0]?.type;
+    const isBinaryGroup = firstType === QuestionType.Binary;
+    const isContinuousGroup = ContinuousQuestionTypes.some(
+      (t) => t === firstType
+    );
+
+    if (
+      (isBinaryGroup || isContinuousGroup) &&
+      post.group_of_questions.graph_type !== GroupOfQuestionsGraphType.FanGraph
+    ) {
+      min = ogMode ? 120 : 73;
+      max = size.width <= 400 ? 202 - (legendHeight ?? 0) : 124;
+      fudge = 0;
+      return { min, max, fudge };
+    }
+
+    min = ogMode ? 120 : 73;
+    max = 196 - (legendHeight ?? 0);
+    return { min, max, fudge };
+  }
+
+  return { min, max, fudge };
+}
+
+export function getEmbedChartHeight(args: {
+  post: PostWithForecasts;
+  ogMode?: boolean;
+  size: EmbedSize;
+  headerHeight: number;
+  legendHeight?: number;
+}): number {
+  const { headerHeight, post, ogMode, size, legendHeight } = args;
+
+  const { min, max, fudge } = getChartRange({
+    post,
+    ogMode,
+    size,
+    legendHeight,
+    headerHeight,
+  });
+
+  const t = headerT(headerHeight);
+  if (t === null) return max;
+
+  return Math.round(max + fudge - t * (max - min));
+}
diff --git a/front_end/src/app/(embed)/questions/helpers/embed_theme.ts b/front_end/src/app/(embed)/questions/helpers/embed_theme.ts
index 81ccbccfdf..622b0e1dcf 100644
--- a/front_end/src/app/(embed)/questions/helpers/embed_theme.ts
+++ b/front_end/src/app/(embed)/questions/helpers/embed_theme.ts
@@ -57,10 +57,7 @@ function getEmbeddedChartTheme(
   theme: VictoryThemeDefinition | undefined,
   cssVariables: Record<string, string>
 ): VictoryThemeDefinition {
-  const baseTheme: VictoryThemeDefinition = {
-    axis: { style: { tickLabels: { fontSize: 16 } } },
-    line: { style: { data: { strokeWidth: 2 } } },
-  };
+  const baseTheme: VictoryThemeDefinition = {};
 
   if (theme) {
     return merge(baseTheme, theme);
@@ -112,3 +109,12 @@ function getEmbeddedChipTheme(
 
   return {};
 }
+
+export const getEmbedAccentColor = (theme?: EmbedTheme): string | undefined => {
+  const stroke = theme?.chart?.line?.style?.data?.stroke as unknown as
+    | string
+    | undefined;
+  return (
+    stroke ?? (theme?.predictionChip?.backgroundColor as string | undefined)
+  );
+};
diff --git a/front_end/src/app/(main)/questions/[id]/[[...slug]]/page_component.tsx b/front_end/src/app/(main)/questions/[id]/[[...slug]]/page_component.tsx
index a022d88d4e..1198a330e4 100644
--- a/front_end/src/app/(main)/questions/[id]/[[...slug]]/page_component.tsx
+++ b/front_end/src/app/(main)/questions/[id]/[[...slug]]/page_component.tsx
@@ -10,9 +10,13 @@ import { EmbedModalContextProvider } from "@/contexts/embed_modal_context";
 import { PostSubscriptionProvider } from "@/contexts/post_subscription_context";
 import ServerProjectsApi from "@/services/api/projects/projects.server";
 import { SearchParams } from "@/types/navigation";
+import { GroupOfQuestionsGraphType } from "@/types/post";
 import { TournamentType } from "@/types/projects";
 import cn from "@/utils/core/cn";
-import { getPostTitle } from "@/utils/questions/helpers";
+import {
+  getPostTitle,
+  isGroupOfQuestionsPost,
+} from "@/utils/questions/helpers";
 
 import NotebookRedirect from "../components/notebook_redirect";
 import QuestionEmbedModal from "../components/question_embed_modal";
@@ -21,6 +25,7 @@ import QuestionView from "../components/question_view";
 import Sidebar from "../components/sidebar";
 import { SLUG_POST_SUB_QUESTION_ID } from "../search_params";
 import { cachedGetPost } from "./utils/get_post";
+
 import "../components/key_factors/key-factors.css";
 
 const CommunityDisclaimer = dynamic(
@@ -49,6 +54,10 @@ const IndividualQuestionPage: FC<{
     extractPreselectedGroupQuestionId(searchParams);
 
   const questionTitle = getPostTitle(postData);
+  const isFanChart =
+    isGroupOfQuestionsPost(postData) &&
+    postData.group_of_questions?.graph_type ===
+      GroupOfQuestionsGraphType.FanGraph;
 
   return (
     <EmbedModalContextProvider>
@@ -104,6 +113,7 @@ const IndividualQuestionPage: FC<{
                 postId={postData.id}
                 postTitle={postData.title}
                 questionType={postData.question?.type}
+                isFanChart={isFanChart}
               />
             </PostSubscriptionProvider>
           </HideCPProvider>
diff --git a/front_end/src/app/(main)/questions/[id]/components/question_embed_modal.tsx b/front_end/src/app/(main)/questions/[id]/components/question_embed_modal.tsx
index 91b0e7b249..e63721f743 100644
--- a/front_end/src/app/(main)/questions/[id]/components/question_embed_modal.tsx
+++ b/front_end/src/app/(main)/questions/[id]/components/question_embed_modal.tsx
@@ -2,16 +2,24 @@
 import { FC } from "react";
 
 import EmbedModal from "@/components/embed_modal";
+import { ContinuousQuestionTypes } from "@/constants/questions";
 import useEmbedModalContext from "@/contexts/embed_modal_context";
 import { useEmbedUrl } from "@/hooks/share";
 import { QuestionType } from "@/types/question";
+
 type Props = {
   postId: number;
   postTitle?: string;
   questionType?: QuestionType;
+  isFanChart?: boolean;
 };
 
-const QuestionEmbedModal: FC<Props> = ({ postId, postTitle, questionType }) => {
+const QuestionEmbedModal: FC<Props> = ({
+  postId,
+  postTitle,
+  questionType,
+  isFanChart,
+}) => {
   const embedUrl = useEmbedUrl(`/questions/embed/${postId}`);
   const { isOpen, updateIsOpen } = useEmbedModalContext();
 
@@ -19,12 +27,20 @@ const QuestionEmbedModal: FC<Props> = ({ postId, postTitle, questionType }) => {
     return null;
   }
 
+  const isBinaryOrContinuous =
+    !!questionType &&
+    (questionType === QuestionType.Binary ||
+      ContinuousQuestionTypes.some((type) => type === questionType));
+
+  const embedWidth = 550;
+  const embedHeight = isBinaryOrContinuous || isFanChart ? 390 : 290;
+
   return (
     <EmbedModal
       isOpen={isOpen}
       onClose={updateIsOpen}
-      embedWidth={550}
-      embedHeight={430}
+      embedWidth={embedWidth}
+      embedHeight={embedHeight}
       url={embedUrl}
       withChartZoom
       postTitle={postTitle}
diff --git a/front_end/src/app/(main)/questions/[id]/components/question_view/forecaster_question_view/question_header/question_header_continuous_resolution_chip.tsx b/front_end/src/app/(main)/questions/[id]/components/question_view/forecaster_question_view/question_header/question_header_continuous_resolution_chip.tsx
index 7747289da9..5c7c1d3ca8 100644
--- a/front_end/src/app/(main)/questions/[id]/components/question_view/forecaster_question_view/question_header/question_header_continuous_resolution_chip.tsx
+++ b/front_end/src/app/(main)/questions/[id]/components/question_view/forecaster_question_view/question_header/question_header_continuous_resolution_chip.tsx
@@ -1,6 +1,7 @@
 import { useTranslations } from "next-intl";
 import { FC } from "react";
 
+import { useIsEmbedMode } from "@/app/(embed)/questions/components/question_view_mode_context";
 import { getContinuousAreaChartData } from "@/components/charts/continuous_area_chart";
 import MinifiedContinuousAreaChart from "@/components/charts/minified_continuous_area_chart";
 import { QuestionStatus } from "@/types/post";
@@ -26,6 +27,8 @@ const QuestionHeaderContinuousResolutionChip: FC<Props> = ({
     isClosed: question.status === QuestionStatus.CLOSED,
   });
 
+  const isEmbed = useIsEmbedMode();
+
   return (
     <div
       className={cn(
@@ -57,6 +60,7 @@ const QuestionHeaderContinuousResolutionChip: FC<Props> = ({
           {
             "text-gray-700 dark:text-gray-700-dark": !successfullyResolved,
             "text-base": size === "lg",
+            "mb-0 truncate text-sm md:text-sm": isEmbed,
           }
         )}
       >
diff --git a/front_end/src/app/(main)/questions/[id]/components/question_view/forecaster_question_view/question_header/question_header_cp_status.tsx b/front_end/src/app/(main)/questions/[id]/components/question_view/forecaster_question_view/question_header/question_header_cp_status.tsx
index 9d74d0a7f7..a8efebedec 100644
--- a/front_end/src/app/(main)/questions/[id]/components/question_view/forecaster_question_view/question_header/question_header_cp_status.tsx
+++ b/front_end/src/app/(main)/questions/[id]/components/question_view/forecaster_question_view/question_header/question_header_cp_status.tsx
@@ -1,7 +1,12 @@
 "use client";
 import { useLocale, useTranslations } from "next-intl";
 import React, { FC } from "react";
+import { VictoryThemeDefinition } from "victory";
 
+import {
+  useEmbedContainerWidth,
+  useIsEmbedMode,
+} from "@/app/(embed)/questions/components/question_view_mode_context";
 import QuestionHeaderContinuousResolutionChip from "@/app/(main)/questions/[id]/components/question_view/forecaster_question_view/question_header/question_header_continuous_resolution_chip";
 import { getContinuousAreaChartData } from "@/components/charts/continuous_area_chart";
 import MinifiedContinuousAreaChart from "@/components/charts/minified_continuous_area_chart";
@@ -25,12 +30,16 @@ type Props = {
   question: QuestionWithForecasts;
   size: "md" | "lg";
   hideLabel?: boolean;
+  colorOverride?: string;
+  chartTheme?: VictoryThemeDefinition;
 };
 
 const QuestionHeaderCPStatus: FC<Props> = ({
   question,
   size,
   hideLabel = false,
+  colorOverride,
+  chartTheme,
 }) => {
   const locale = useLocale();
   const t = useTranslations();
@@ -46,6 +55,10 @@ const QuestionHeaderCPStatus: FC<Props> = ({
     QuestionType.Date,
   ].includes(question.type);
 
+  const isEmbed = useIsEmbedMode();
+  const w = useEmbedContainerWidth();
+  const isEmbedBelow376 = isEmbed && (w ?? 0) > 0 && (w ?? 0) < 376;
+
   if (question.status === QuestionStatus.RESOLVED && question.resolution) {
     // Resolved/Annulled/Ambiguous
     const formatedResolution = formatResolution({
@@ -81,10 +94,15 @@ const QuestionHeaderCPStatus: FC<Props> = ({
     );
   }
 
+  const borderStyle = colorOverride
+    ? { borderColor: `${colorOverride}33` }
+    : undefined;
+
   if (isContinuous) {
     return (
       !forecastAvailability.isEmpty && (
         <div
+          style={borderStyle}
           className={cn(
             "flex min-w-[110px] flex-col rounded-md border border-olive-800/20 p-2 dark:border-olive-800 md:px-3 md:py-2.5",
             {
@@ -93,23 +111,36 @@ const QuestionHeaderCPStatus: FC<Props> = ({
               "max-w-[130px]": size === "md",
               "gap-1": !hideLabel && size === "lg",
               "gap-0": size === "md", // Remove gap for mobile (both hideLabel true/false)
-              "-gap-2": size === "md" && hideLabel, // More negative gap for mobile continuous questions
+              "-gap-2": size === "md" && hideLabel, // More negative gap for mobile continuous questions,
+              "border-[0.5px] border-olive-500 p-3 dark:border-olive-500-dark md:p-3":
+                isEmbed,
+              "min-w-[200px] border-none p-0": isEmbedBelow376,
             }
           )}
         >
           <div>
             {!hideLabel && (
-              <div className="mb-1 hidden text-center text-sm text-gray-500 dark:text-gray-500-dark lg:block">
+              <div
+                className={cn(
+                  "mb-1 hidden text-center text-sm text-gray-500 dark:text-gray-500-dark lg:block"
+                )}
+              >
                 {question.status === QuestionStatus.CLOSED
                   ? t("closed")
                   : t("communityPredictionLabel")}
               </div>
             )}
+            {isEmbedBelow376 && (
+              <p className="my-0 text-center text-xs text-olive-700 dark:text-olive-700-dark">
+                {t("currentEstimate")}
+              </p>
+            )}
             {!hideCP && (
               <ContinuousCPBar
                 question={question as QuestionWithNumericForecasts}
                 size={size}
                 variant="question"
+                colorOverride={colorOverride}
               />
             )}
           </div>
@@ -117,15 +148,28 @@ const QuestionHeaderCPStatus: FC<Props> = ({
             className={cn({
               "flex min-h-0 flex-1 items-center": hideLabel, // Desktop timeline: flex and center
               "": !hideLabel, // Mobile: no special styling
+              "mt-1.5": isEmbed,
             })}
           >
             <MinifiedContinuousAreaChart
               question={question}
               data={continuousAreaChartData}
-              height={hideLabel && size === "lg" ? 120 : 50}
+              height={
+                hideLabel && size === "lg"
+                  ? 120
+                  : isEmbed
+                    ? isEmbedBelow376
+                      ? 32
+                      : 24
+                    : 50
+              }
               forceTickCount={2}
-              hideLabels={hideLabel}
+              hideLabels={hideLabel || isEmbedBelow376}
+              minMaxLabelsOnly={isEmbedBelow376}
+              showBaseline={isEmbedBelow376}
               hideCP={hideCP}
+              extraTheme={chartTheme}
+              colorOverride={colorOverride}
             />
           </div>
           {!hideCP && (
@@ -149,13 +193,21 @@ const QuestionHeaderCPStatus: FC<Props> = ({
   } else if (question.type === QuestionType.Binary) {
     return (
       <div
-        className={cn("flex flex-col", {
-          "gap-4": size === "lg", // Desktop: 16px gap
-          "gap-1.5": size === "md", // Mobile: 6px gap
-        })}
+        className={cn(
+          "flex flex-col",
+          {
+            "gap-4": size === "lg", // Desktop: 16px gap
+            "gap-1.5": size === "md", // Mobile: 6px gap
+          },
+          isEmbed && "[@container(max-width:375px)]:scale-[130%]"
+        )}
       >
         {!hideCP && (
-          <BinaryCPBar question={question} size={size === "lg" ? "lg" : "sm"} />
+          <BinaryCPBar
+            question={question}
+            size={size === "lg" ? "lg" : "sm"}
+            colorOverride={colorOverride}
+          />
         )}
         {!hideCP && (
           <QuestionCPMovement
diff --git a/front_end/src/app/(main)/questions/[id]/components/question_view/shared/question_title.tsx b/front_end/src/app/(main)/questions/[id]/components/question_view/shared/question_title.tsx
index 8556f72292..ac8a343a63 100644
--- a/front_end/src/app/(main)/questions/[id]/components/question_view/shared/question_title.tsx
+++ b/front_end/src/app/(main)/questions/[id]/components/question_view/shared/question_title.tsx
@@ -1,14 +1,14 @@
-import { HTMLAttributes } from "react";
+import React, { forwardRef, HTMLAttributes } from "react";
 
 import cn from "@/utils/core/cn";
 
-const QuestionTitle: React.FC<HTMLAttributes<HTMLHeadingElement>> = ({
-  children,
-  className,
-  ...props
-}) => {
+const QuestionTitle = forwardRef<
+  HTMLHeadingElement,
+  HTMLAttributes<HTMLHeadingElement>
+>(({ children, className, ...props }, ref) => {
   return (
     <h1
+      ref={ref}
       className={cn(
         "m-0 w-full pr-4 text-xl leading-tight text-blue-800 dark:text-blue-800-dark lg:pr-0 lg:text-3xl",
         className
@@ -18,5 +18,8 @@ const QuestionTitle: React.FC<HTMLAttributes<HTMLHeadingElement>> = ({
       {children}
     </h1>
   );
-};
+});
+
+QuestionTitle.displayName = "QuestionTitle";
+
 export default QuestionTitle;
diff --git a/front_end/src/app/(main)/questions/[id]/image-preview/route.ts b/front_end/src/app/(main)/questions/[id]/image-preview/route.ts
index 1121596741..663dba5573 100644
--- a/front_end/src/app/(main)/questions/[id]/image-preview/route.ts
+++ b/front_end/src/app/(main)/questions/[id]/image-preview/route.ts
@@ -18,7 +18,7 @@ export async function GET(
   const theme = request.nextUrl.searchParams.get("theme") ?? "dark";
   const { PUBLIC_APP_URL } = getPublicSettings();
 
-  const imageUrl = `${PUBLIC_APP_URL}/questions/embed/${id}/?${ENFORCED_THEME_PARAM}=${theme}&${HIDE_ZOOM_PICKER}=true&non-interactive=true`;
+  const imageUrl = `${PUBLIC_APP_URL}/questions/embed/${id}/?${ENFORCED_THEME_PARAM}=${theme}&${HIDE_ZOOM_PICKER}=true&non-interactive=true&og=1`;
 
   const payload = {
     url: imageUrl,
diff --git a/front_end/src/components/charts/fan_chart.tsx b/front_end/src/components/charts/fan_chart.tsx
index 4fa1c9b17d..0a035e025a 100644
--- a/front_end/src/components/charts/fan_chart.tsx
+++ b/front_end/src/components/charts/fan_chart.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { isNil, merge } from "lodash";
-import { FC, useCallback, useMemo, useState } from "react";
+import { FC, useCallback, useEffect, useMemo, useState } from "react";
 import {
   Tuple,
   VictoryArea,
@@ -76,6 +76,7 @@ import { sortGroupPredictionOptions } from "@/utils/questions/groupOrdering";
 import { isUnsuccessfullyResolved } from "@/utils/questions/resolution";
 
 import { FanChartVariant, fanVariants } from "./fan_chart_variants";
+import EmbedFanLegend from "./primitives/embed_fan_legend";
 import IndexValueTooltip from "./primitives/index_value_tooltip";
 
 type Props = {
@@ -92,6 +93,7 @@ type Props = {
   isEmbedded?: boolean;
   optionsLimit?: number;
   forFeedPage?: boolean;
+  onLegendHeightChange?: (height: number) => void;
 };
 
 type NormalizedFanDatum = {
@@ -121,9 +123,18 @@ const FanChart: FC<Props> = ({
   isEmbedded = false,
   optionsLimit,
   forFeedPage,
+  onLegendHeightChange,
 }) => {
   const effectiveVariant: FanChartVariant = variant ?? "default";
 
+  const { ref: embedLegendRef, height: embedLegendHeight } =
+    useContainerSize<HTMLDivElement>();
+
+  useEffect(() => {
+    if (!isEmbedded) return;
+    if (!onLegendHeightChange) return;
+    onLegendHeightChange(embedLegendHeight);
+  }, [isEmbedded, embedLegendHeight, onLegendHeightChange]);
   const { ref: chartContainerRef, width: chartWidth } =
     useContainerSize<HTMLDivElement>();
   const { theme, getThemeColor } = useAppTheme();
@@ -220,18 +231,69 @@ const FanChart: FC<Props> = ({
   const v = fanVariants[effectiveVariant];
   const palette = v.palette({ getThemeColor });
 
-  const shouldDisplayChart = !!chartWidth;
+  const embedGridTicks = useMemo(() => {
+    if (!isEmbedded) return null;
+    return getEvenTicks(yDomain as Tuple<number>, 5);
+  }, [isEmbedded, yDomain]);
 
-  const variantArgs = {
-    chartWidth,
-    yLabel,
+  const embedLabelTicks = useMemo(() => {
+    if (!isEmbedded) return null;
+    return getEvenTicks(yDomain as Tuple<number>, 3);
+  }, [isEmbedded, yDomain]);
+
+  const EMBED_SIDE_PAD = 10;
+
+  const effectiveMaxLeftPadding = isEmbedded ? EMBED_SIDE_PAD : maxLeftPadding;
+  const effectiveMaxRightPadding = isEmbedded
+    ? Math.max(maxRightPadding, rightPadding, MIN_RIGHT_PADDING, 28)
+    : maxRightPadding;
+
+  const baseYAxisStyle = v.yAxisStyle({
     tickLabelFontSize,
-    maxLeftPadding: isEmbedded ? maxLeftPadding : maxLeftPadding,
-    maxRightPadding: isEmbedded
-      ? Math.max(10, maxRightPadding)
-      : maxRightPadding,
+    maxLeftPadding: effectiveMaxLeftPadding,
+    maxRightPadding: effectiveMaxRightPadding,
     getThemeColor,
-  };
+  });
+
+  const shouldDisplayChart = !!chartWidth;
+
+  const variantArgs = useMemo(
+    () => ({
+      chartWidth,
+      yLabel,
+      tickLabelFontSize,
+      maxLeftPadding: effectiveMaxLeftPadding,
+      maxRightPadding: effectiveMaxRightPadding,
+      isEmbedded,
+      getThemeColor,
+    }),
+    [
+      chartWidth,
+      yLabel,
+      tickLabelFontSize,
+      effectiveMaxLeftPadding,
+      effectiveMaxRightPadding,
+      isEmbedded,
+      getThemeColor,
+    ]
+  );
+
+  const chartPadding = useMemo(() => {
+    const p = v.padding(variantArgs);
+    if (!isEmbedded) return p;
+
+    const safeRight = Math.max(
+      typeof p.right === "number" ? p.right : 0,
+      effectiveMaxRightPadding,
+      MIN_RIGHT_PADDING,
+      28
+    );
+    return {
+      ...p,
+      left: EMBED_SIDE_PAD,
+      right: safeRight,
+    };
+  }, [v, variantArgs, isEmbedded, effectiveMaxRightPadding, MIN_RIGHT_PADDING]);
 
   const bottomPadForPoints = v.padding(variantArgs).bottom;
 
@@ -326,184 +388,260 @@ const FanChart: FC<Props> = ({
     />
   );
 
+  const embedLegendNames = useMemo<string[]>(() => {
+    if (!isEmbedded) return [];
+
+    const names = normOptions.map((o) => o.name).filter(Boolean);
+    const n = names.length;
+
+    if (n <= 3) return names;
+
+    const first = names[0];
+    const mid = names[Math.floor(n / 2)];
+    const last = names[n - 1];
+
+    return Array.from(new Set([first, mid, last])).filter(
+      (v): v is string => typeof v === "string" && v.length > 0
+    );
+  }, [isEmbedded, normOptions]);
+
+  const embedLegendItems = useMemo(() => {
+    if (!isEmbedded || embedLegendNames.length === 0) return [];
+
+    const map = new Map(normOptions.map((o) => [o.name, o]));
+
+    return embedLegendNames.map((name) => {
+      const o = map.get(name);
+
+      const raw =
+        o?.resolved && typeof o.resolvedValue === "number"
+          ? o.resolvedValue
+          : o?.communityQuartiles?.median ?? null;
+
+      const valueText =
+        typeof raw === "number" && Number.isFinite(raw)
+          ? yScale.tickFormat(raw)
+          : "—";
+
+      return { name, valueText };
+    });
+  }, [isEmbedded, embedLegendNames, normOptions, yScale]);
+  console.log("chartWidth", chartWidth);
+  const isCompactEmbed = isEmbedded && !!chartWidth && chartWidth < 400;
+
   return (
-    <div
-      id="fan-graph-container"
-      ref={chartContainerRef}
-      className="relative w-full"
-      style={{ height }}
-    >
-      {shouldDisplayChart && (
-        <VictoryChart
-          width={chartWidth}
-          height={height}
-          theme={actualTheme}
-          domain={{ y: yDomain }}
-          domainPadding={v.domainPadding(variantArgs)}
-          padding={v.padding(variantArgs)}
-          containerComponent={
-            withTooltip ? (
-              containerWithTooltip
-            ) : (
-              <VictoryContainer
-                style={{
-                  pointerEvents: "auto",
-                  userSelect: "auto",
-                  touchAction: "auto",
-                }}
-              />
-            )
-          }
-          events={[
-            {
-              target: "parent",
-              eventHandlers: {
-                onMouseOutCapture: () => setActivePoint(null),
-              },
-            },
-          ]}
-        >
-          <VictoryAxis
-            dependentAxis
-            label={yLabel}
-            tickValues={yScale.ticks}
-            tickFormat={yScale.tickFormat}
-            style={v.yAxisStyle({
-              tickLabelFontSize,
-              maxLeftPadding,
-              maxRightPadding,
-              getThemeColor,
-            })}
-            offsetX={v.axisLabelOffsetX(variantArgs)}
-            axisLabelComponent={<VictoryLabel x={chartWidth} />}
-          />
+    <div className="w-full">
+      {isEmbedded && (
+        <div ref={embedLegendRef}>
+          <EmbedFanLegend items={embedLegendItems} />
+        </div>
+      )}
 
-          <VictoryPortal>
-            <VictoryAxis
-              tickValues={normOptions.map((o) => o.name)}
-              tickFormat={hideCP ? () => "" : (_, i) => labels[i] ?? ""}
-              style={v.xAxisStyle({
-                tickLabelFontSize,
-                maxLeftPadding,
-                maxRightPadding,
-                getThemeColor,
-              })}
-            />
-          </VictoryPortal>
-
-          {!hideCP &&
-            communityAreas.map((area, idx) => (
-              <VictoryArea
-                key={`c-area-${idx}`}
-                name={`communityFanArea-${idx}`}
-                data={area ?? []}
-                style={{
-                  data: {
-                    opacity: 0.3,
-                    fill: ({ datum }) =>
-                      datum?.resolved
-                        ? getThemeColor(METAC_COLORS.purple["500"])
-                        : palette.communityArea,
+      {!isCompactEmbed && (
+        <div
+          id="fan-graph-container"
+          ref={chartContainerRef}
+          className="relative w-full"
+          style={{ height }}
+        >
+          {shouldDisplayChart && (
+            <VictoryChart
+              width={chartWidth}
+              height={height}
+              theme={actualTheme}
+              domain={{ y: yDomain }}
+              domainPadding={v.domainPadding(variantArgs)}
+              padding={chartPadding}
+              containerComponent={
+                withTooltip ? (
+                  containerWithTooltip
+                ) : (
+                  <VictoryContainer
+                    style={{
+                      pointerEvents: "auto",
+                      userSelect: "auto",
+                      touchAction: "auto",
+                    }}
+                  />
+                )
+              }
+              events={[
+                {
+                  target: "parent",
+                  eventHandlers: {
+                    onMouseOutCapture: () => setActivePoint(null),
                   },
-                }}
-              />
-            ))}
-          {!hideCP &&
-            communityLines.map((line, idx) => (
-              <VictoryLine
-                key={`c-line-${idx}`}
-                name={`communityFanLine-${idx}`}
-                data={line ?? []}
+                },
+              ]}
+            >
+              <VictoryAxis
+                dependentAxis
+                orientation={isEmbedded ? "right" : undefined}
+                label={isEmbedded ? undefined : yLabel}
+                tickValues={
+                  isEmbedded && embedLabelTicks ? embedLabelTicks : yScale.ticks
+                }
+                tickFormat={yScale.tickFormat}
                 style={{
-                  data: {
-                    stroke: ({ datum }) =>
-                      datum?.resolved
-                        ? getThemeColor(METAC_COLORS.purple["700"])
-                        : palette.communityLine,
-                  },
+                  ...baseYAxisStyle,
+                  grid: isEmbedded ? { display: "none" } : baseYAxisStyle?.grid,
                 }}
+                offsetX={
+                  isEmbedded ? undefined : v.axisLabelOffsetX(variantArgs)
+                }
+                axisLabelComponent={
+                  isEmbedded ? undefined : <VictoryLabel x={chartWidth} />
+                }
               />
-            ))}
-
-          <VictoryScatter
-            data={userPoints}
-            dataComponent={<PredictionWithRange />}
-          />
 
-          {!hideCP && !forecastAvailability?.cpRevealsOn && (
-            <VictoryScatter
-              data={communityPoints.map((p) => ({
-                ...p,
-                resolved: false,
-                symbol: "square",
-              }))}
-              style={{
-                data: {
-                  fill: () => palette.communityPoint,
-                  stroke: () => palette.communityPoint,
-                  strokeWidth: 6,
-                  strokeOpacity: ({ datum }) =>
-                    activePoint === datum.x ? 0.3 : 0,
-                },
-              }}
-              dataComponent={
-                <FanPoint
-                  activePoint={activePoint}
-                  pointSize={pointSize}
-                  pointColor={palette.communityPoint}
-                  bottomPadding={bottomPadForPoints}
+              {isEmbedded && embedGridTicks && (
+                <VictoryAxis
+                  dependentAxis
+                  tickValues={embedGridTicks}
+                  tickFormat={() => ""}
+                  orientation="right"
+                  style={{
+                    ...baseYAxisStyle,
+                    tickLabels: {
+                      ...baseYAxisStyle?.tickLabels,
+                      display: "none",
+                    },
+                    grid: {
+                      ...baseYAxisStyle?.grid,
+                      strokeDasharray: "2,4",
+                    },
+                  }}
                 />
-              }
-            />
-          )}
+              )}
+
+              <VictoryPortal>
+                <VictoryAxis
+                  tickValues={normOptions.map((o) => o.name)}
+                  tickFormat={hideCP ? () => "" : (_, i) => labels[i] ?? ""}
+                  style={v.xAxisStyle({
+                    tickLabelFontSize,
+                    maxLeftPadding: effectiveMaxLeftPadding,
+                    maxRightPadding: effectiveMaxRightPadding,
+                    getThemeColor,
+                  })}
+                />
+              </VictoryPortal>
+
+              {!hideCP &&
+                communityAreas.map((area, idx) => (
+                  <VictoryArea
+                    key={`c-area-${idx}`}
+                    name={`communityFanArea-${idx}`}
+                    data={area ?? []}
+                    style={{
+                      data: {
+                        opacity: 0.3,
+                        fill: ({ datum }) =>
+                          datum?.resolved
+                            ? getThemeColor(METAC_COLORS.purple["500"])
+                            : palette.communityArea,
+                      },
+                    }}
+                  />
+                ))}
+              {!hideCP &&
+                communityLines.map((line, idx) => (
+                  <VictoryLine
+                    key={`c-line-${idx}`}
+                    name={`communityFanLine-${idx}`}
+                    data={line ?? []}
+                    style={{
+                      data: {
+                        stroke: ({ datum }) =>
+                          datum?.resolved
+                            ? getThemeColor(METAC_COLORS.purple["700"])
+                            : palette.communityLine,
+                      },
+                    }}
+                  />
+                ))}
+
+              <VictoryScatter
+                data={userPoints}
+                dataComponent={<PredictionWithRange />}
+              />
 
-          {resolutionPoints.map((point) => (
-            <VictoryScatter
-              key={`res-${point.x}`}
-              data={[{ ...point, symbol: "diamond" }]}
-              style={{
-                data: {
-                  fill: v.resolutionPoint.fill({ getThemeColor }),
-                  stroke: () => palette.resolutionStroke,
-                  strokeWidth: 2,
-                  strokeOpacity: 1,
-                },
-              }}
-              dataComponent={
-                <FanPoint
-                  activePoint={null}
-                  pointSize={v.resolutionPoint.size}
-                  strokeWidth={v.resolutionPoint.strokeWidth}
+              {!hideCP && !forecastAvailability?.cpRevealsOn && (
+                <VictoryScatter
+                  data={communityPoints.map((p) => ({
+                    ...p,
+                    resolved: false,
+                    symbol: "square",
+                  }))}
+                  style={{
+                    data: {
+                      fill: () => palette.communityPoint,
+                      stroke: () => palette.communityPoint,
+                      strokeWidth: 6,
+                      strokeOpacity: ({ datum }) =>
+                        activePoint === datum.x ? 0.3 : 0,
+                    },
+                  }}
+                  dataComponent={
+                    <FanPoint
+                      activePoint={activePoint}
+                      pointSize={isEmbedded ? 8 : pointSize}
+                      pointColor={palette.communityPoint}
+                      bottomPadding={bottomPadForPoints}
+                    />
+                  }
                 />
-              }
-            />
-          ))}
-          {emptyPoints.map((point) => (
-            <VictoryScatter
-              key={`empty-${point.x}`}
-              data={[{ ...point, symbol: "diamond" }]}
-              dataComponent={
-                <FanPoint
-                  activePoint={activePoint}
-                  pointSize={v.resolutionPoint.size}
-                  strokeWidth={v.resolutionPoint.strokeWidth}
-                  unsuccessfullyResolved={point.unsuccessfullyResolved}
-                  bgColor={v.resolutionPoint.fill({ getThemeColor })}
-                  bottomPadding={bottomPadForPoints}
-                  isClosed
+              )}
+
+              {resolutionPoints.map((point) => (
+                <VictoryScatter
+                  key={`res-${point.x}`}
+                  data={[{ ...point, symbol: "diamond" }]}
+                  style={{
+                    data: {
+                      fill: v.resolutionPoint.fill({ getThemeColor }),
+                      stroke: () => palette.resolutionStroke,
+                      strokeWidth: 2,
+                      strokeOpacity: 1,
+                    },
+                  }}
+                  dataComponent={
+                    <FanPoint
+                      activePoint={null}
+                      pointSize={v.resolutionPoint.size}
+                      strokeWidth={v.resolutionPoint.strokeWidth}
+                    />
+                  }
                 />
-              }
-            />
-          ))}
-        </VictoryChart>
-      )}
+              ))}
+              {emptyPoints.map((point) => (
+                <VictoryScatter
+                  key={`empty-${point.x}`}
+                  data={[{ ...point, symbol: "diamond" }]}
+                  dataComponent={
+                    <FanPoint
+                      activePoint={activePoint}
+                      pointSize={v.resolutionPoint.size}
+                      strokeWidth={v.resolutionPoint.strokeWidth}
+                      unsuccessfullyResolved={point.unsuccessfullyResolved}
+                      bgColor={v.resolutionPoint.fill({ getThemeColor })}
+                      bottomPadding={bottomPadForPoints}
+                      isClosed
+                    />
+                  }
+                />
+              ))}
+            </VictoryChart>
+          )}
 
-      {!withTooltip && (
-        <ForecastAvailabilityChartOverflow
-          forecastAvailability={forecastAvailability}
-          className="text-xs lg:text-sm"
-          textClassName="!max-w-[300px]"
-        />
+          {!withTooltip && (
+            <ForecastAvailabilityChartOverflow
+              forecastAvailability={forecastAvailability}
+              className="text-xs lg:text-sm"
+              textClassName="!max-w-[300px]"
+            />
+          )}
+        </div>
       )}
     </div>
   );
@@ -1022,4 +1160,16 @@ function getFanOptionsFromBinaryGroup(
   });
 }
 
+function getEvenTicks(domain: Tuple<number>, count: number): number[] {
+  const [lo, hi] = domain;
+  if (count <= 1) return [lo];
+  const step = (hi - lo) / (count - 1);
+  const out: number[] = [];
+  for (let i = 0; i < count; i++) {
+    const v = lo + step * i;
+    out.push(Math.abs(v) < 1e-9 ? 0 : v);
+  }
+  return out;
+}
+
 export default FanChart;
diff --git a/front_end/src/components/charts/fan_chart_variants.ts b/front_end/src/components/charts/fan_chart_variants.ts
index 3ee239520e..f954838f9e 100644
--- a/front_end/src/components/charts/fan_chart_variants.ts
+++ b/front_end/src/components/charts/fan_chart_variants.ts
@@ -44,7 +44,7 @@ export type VariantConfig = {
   };
   axisLabelOffsetX: (args: VariantArgs) => number;
   forceTickCount?: number;
-  palette: (args: Pick<VariantArgs, "getThemeColor">) => {
+  palette: (args: Pick<VariantArgs, "getThemeColor" | "isEmbedded">) => {
     communityArea: string;
     communityLine: string;
     userArea: string;
@@ -82,7 +82,8 @@ export const fanVariants: Record<FanChartVariant, VariantConfig> = {
       ticks: { stroke: "transparent" },
       axis: { stroke: "transparent" },
     }),
-    domainPadding: () => ({ x: [150 / 2, 150 / 2] }),
+    domainPadding: ({ isEmbedded }) =>
+      isEmbedded ? { x: [16, 16] } : { x: [150 / 2, 150 / 2] },
     padding: ({ maxLeftPadding }) => ({
       left: maxLeftPadding,
       top: 10,
@@ -90,13 +91,15 @@ export const fanVariants: Record<FanChartVariant, VariantConfig> = {
       bottom: 20,
     }),
     axisLabelOffsetX: ({ maxLeftPadding }) => Math.max(maxLeftPadding - 2, 8),
-    palette: ({ getThemeColor }) => ({
+    palette: ({ getThemeColor, isEmbedded }) => ({
       communityArea: getThemeColor(METAC_COLORS.olive["500"]),
       communityLine: getThemeColor(METAC_COLORS.olive["800"]),
       userArea: getThemeColor(METAC_COLORS.orange["500"]),
       userLine: getThemeColor(METAC_COLORS.orange["700"]),
       resolutionStroke: getThemeColor(METAC_COLORS.purple["800"]),
-      communityPoint: getThemeColor(METAC_COLORS.olive["800"]),
+      communityPoint: isEmbedded
+        ? getThemeColor(METAC_COLORS.olive["700"])
+        : getThemeColor(METAC_COLORS.olive["800"]),
     }),
     resolutionPoint: {
       size: 8,
diff --git a/front_end/src/components/charts/group_chart.tsx b/front_end/src/components/charts/group_chart.tsx
index 938b4b1a51..c7cc9c9899 100644
--- a/front_end/src/components/charts/group_chart.tsx
+++ b/front_end/src/components/charts/group_chart.tsx
@@ -2,7 +2,7 @@
 
 import { isNil, merge } from "lodash";
 import { useTranslations } from "next-intl";
-import React, { FC, memo, useEffect, useMemo, useState } from "react";
+import React, { FC, memo, useEffect, useMemo, useRef, useState } from "react";
 import {
   CursorCoordinatesPropType,
   DomainTuple,
@@ -42,7 +42,6 @@ import {
   generateScale,
   generateTimeSeriesYDomain,
   generateTimestampXScale,
-  getAxisLeftPadding,
   getAxisRightPadding,
   getTickLabelFontSize,
 } from "@/utils/charts/axis";
@@ -75,11 +74,13 @@ type Props = {
   isEmptyDomain?: boolean;
   openTime?: number | null;
   forceAutoZoom?: boolean;
-  isEmbedded?: boolean;
   cursorTimestamp?: number | null;
   forecastAvailability?: ForecastAvailability;
   forceShowLinePoints?: boolean;
   forFeedPage?: boolean;
+  isEmbedded?: boolean;
+  showCursorLabel?: boolean;
+  fadeLinesOnHover?: boolean;
 };
 
 const LABEL_FONT_FAMILY = "Inter";
@@ -88,6 +89,7 @@ const TICK_FONT_SIZE = 10;
 const POINT_SIZE = 9;
 const USER_POINT_SIZE = 6;
 const USER_POINT_STROKE = 1.5;
+const PLOT_TOP = 10;
 
 const GroupChart: FC<Props> = ({
   timestamps,
@@ -109,11 +111,13 @@ const GroupChart: FC<Props> = ({
   isEmptyDomain,
   openTime,
   forceAutoZoom,
-  isEmbedded,
   cursorTimestamp,
   forecastAvailability,
   forceShowLinePoints = false,
   forFeedPage,
+  isEmbedded = false,
+  showCursorLabel = true,
+  fadeLinesOnHover = true,
 }) => {
   const t = useTranslations();
   const {
@@ -121,6 +125,7 @@ const GroupChart: FC<Props> = ({
     width: chartWidth,
     height: chartHeight,
   } = useContainerSize<HTMLDivElement>();
+  const inPlotRef = useRef(false);
 
   const { theme, getThemeColor } = useAppTheme();
   const chartTheme = theme === "dark" ? darkTheme : lightTheme;
@@ -178,33 +183,39 @@ const GroupChart: FC<Props> = ({
       forFeedPage,
     ]
   );
+  const [localCursorTimestamp, setLocalCursorTimestamp] = useState<
+    number | null
+  >(null);
+  const effectiveCursorTimestamp = !isNil(cursorTimestamp)
+    ? cursorTimestamp
+    : localCursorTimestamp;
+  const plotBottom =
+    height - (isEmbedded ? BOTTOM_PADDING - 6 : BOTTOM_PADDING);
   const filteredLines = useMemo(() => {
     return graphs.map(({ line, active }) => {
       const lastLineX = line.at(-1)?.x;
       if (!active || !lastLineX) return null;
+
+      if (isNil(effectiveCursorTimestamp)) return line;
+
       let filteredLine =
-        !isNil(cursorTimestamp) && lastLineX > cursorTimestamp
-          ? line.filter(({ x }) => x <= cursorTimestamp)
+        lastLineX > effectiveCursorTimestamp
+          ? line.filter(({ x }) => x <= effectiveCursorTimestamp)
           : line;
-      if (!isNil(cursorTimestamp) && lastLineX > cursorTimestamp) {
+
+      if (lastLineX > effectiveCursorTimestamp) {
         filteredLine = [
           ...filteredLine,
           {
-            x: cursorTimestamp,
+            x: effectiveCursorTimestamp,
             y: filteredLine.at(-1)?.y ?? null,
           },
         ];
       }
+
       return filteredLine;
     });
-  }, [graphs, cursorTimestamp]);
-
-  const { leftPadding, MIN_LEFT_PADDING } = useMemo(() => {
-    return getAxisLeftPadding(yScale, tickLabelFontSize as number, yLabel);
-  }, [yScale, tickLabelFontSize, yLabel]);
-  const maxLeftPadding = useMemo(() => {
-    return Math.max(leftPadding, MIN_LEFT_PADDING);
-  }, [leftPadding, MIN_LEFT_PADDING]);
+  }, [graphs, effectiveCursorTimestamp]);
 
   const { rightPadding, MIN_RIGHT_PADDING } = useMemo(() => {
     return getAxisRightPadding(yScale, tickLabelFontSize as number, yLabel);
@@ -219,6 +230,9 @@ const GroupChart: FC<Props> = ({
   );
 
   const prevWidth = usePrevious(chartWidth);
+  const baseLineOpacity =
+    fadeLinesOnHover && isCursorActive && !isHighlightActive ? 0.35 : 1;
+
   useEffect(() => {
     if (!prevWidth && chartWidth && onChartReady) {
       onChartReady();
@@ -236,19 +250,19 @@ const GroupChart: FC<Props> = ({
       style={{
         touchAction: "pan-y",
       }}
-      cursorLabelOffset={{
-        x: 0,
-        y: 0,
-      }}
-      cursorLabel={({ datum }: VictoryLabelProps) => {
-        if (datum) {
-          return datum.x === defaultCursor
-            ? isClosed
-              ? ""
-              : t("now")
-            : xScale.cursorFormat?.(datum.x) ?? xScale.tickFormat(datum.x);
-        }
-      }}
+      cursorLabelOffset={showCursorLabel ? { x: 0, y: 0 } : undefined}
+      cursorLabel={
+        showCursorLabel
+          ? ({ datum }: VictoryLabelProps) => {
+              if (!datum) return "";
+              return datum.x === defaultCursor
+                ? isClosed
+                  ? ""
+                  : t("now")
+                : xScale.cursorFormat?.(datum.x) ?? xScale.tickFormat(datum.x);
+            }
+          : undefined
+      }
       cursorComponent={
         <LineSegment
           style={
@@ -264,18 +278,27 @@ const GroupChart: FC<Props> = ({
         />
       }
       cursorLabelComponent={
-        <VictoryPortal>
-          <ChartCursorLabel positionY={height - 10} isActive={isCursorActive} />
-        </VictoryPortal>
+        showCursorLabel ? (
+          <VictoryPortal>
+            <ChartCursorLabel
+              positionY={height - (isEmbedded ? 4 : 10)}
+              isActive={isCursorActive}
+            />
+          </VictoryPortal>
+        ) : undefined
       }
       onCursorChange={(value: CursorCoordinatesPropType) => {
-        if (typeof value === "number" && onCursorChange) {
+        if (typeof value !== "number") return;
+        if (!inPlotRef.current) return;
+
+        setLocalCursorTimestamp(value);
+
+        if (onCursorChange) {
           const lastTimestamp = timestamps[timestamps.length - 1];
           if (value === lastTimestamp) {
             onCursorChange(lastTimestamp, xScale.tickFormat);
             return;
           }
-
           onCursorChange(value, xScale.tickFormat);
         }
       }}
@@ -296,22 +319,41 @@ const GroupChart: FC<Props> = ({
             height={height}
             theme={actualTheme}
             padding={{
-              left: isEmbedded ? maxLeftPadding : 0,
-              right: isEmbedded ? 10 : maxRightPadding,
+              left: 0,
               top: 10,
-              bottom: BOTTOM_PADDING,
+              right: maxRightPadding,
+              bottom: isEmbedded ? BOTTOM_PADDING - 6 : BOTTOM_PADDING,
             }}
             events={[
               {
                 target: "parent",
                 eventHandlers: {
-                  onMouseOverCapture: () => {
+                  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                  onMouseMoveCapture: (e: any) => {
                     if (!onCursorChange) return;
-                    setIsCursorActive(true);
+                    const svg =
+                      (e.currentTarget as SVGElement).ownerSVGElement ??
+                      e.currentTarget;
+                    const rect = (svg as SVGElement).getBoundingClientRect();
+                    const x = e.clientX - rect.left;
+                    const y = e.clientY - rect.top;
+
+                    const inPlot =
+                      x >= 0 &&
+                      x <= chartWidth - maxRightPadding &&
+                      y >= PLOT_TOP &&
+                      y <= plotBottom;
+                    inPlotRef.current = inPlot;
+                    setIsCursorActive(inPlot);
+                    if (!inPlot) {
+                      setLocalCursorTimestamp(null);
+                    }
                   },
-                  onMouseOutCapture: () => {
+                  onMouseLeaveCapture: () => {
                     if (!onCursorChange) return;
+                    inPlotRef.current = false;
                     setIsCursorActive(false);
+                    setLocalCursorTimestamp(null);
                   },
                 },
               },
@@ -366,16 +408,11 @@ const GroupChart: FC<Props> = ({
               }}
               label={yLabel}
               offsetX={
-                isEmbedded
-                  ? maxLeftPadding
-                  : isNil(yLabel)
-                    ? chartWidth + 5
-                    : chartWidth - TICK_FONT_SIZE + 5
+                isNil(yLabel) ? chartWidth + 5 : chartWidth - TICK_FONT_SIZE + 5
               }
               orientation={"left"}
               axisLabelComponent={<VictoryLabel x={chartWidth} />}
             />
-
             {/* X axis */}
             <VictoryPortal>
               <VictoryAxis
@@ -388,6 +425,7 @@ const GroupChart: FC<Props> = ({
                     chartWidth={chartWidth}
                     withCursor={!!onCursorChange}
                     fontSize={tickLabelFontSize as number}
+                    dx={isEmbedded ? 16 : 0}
                   />
                 }
                 style={{
@@ -435,7 +473,7 @@ const GroupChart: FC<Props> = ({
                     data: {
                       stroke: getThemeColor(color),
                       strokeOpacity: !isHighlightActive
-                        ? 1
+                        ? baseLineOpacity
                         : highlighted
                           ? 1
                           : 0.3,
@@ -548,7 +586,6 @@ const GroupChart: FC<Props> = ({
                 />
               );
             })}
-
             {/* User predictions */}
             {graphs.map(({ active, scatter, color, highlighted }, index) =>
               active && (!isHighlightActive || highlighted) ? (
@@ -622,6 +659,7 @@ function buildChartData({
   openTime,
   forceAutoZoom,
   forFeedPage,
+  isEmbedded,
 }: {
   timestamps: number[];
   actualCloseTime?: number | null;
@@ -638,6 +676,7 @@ function buildChartData({
   openTime?: number | null;
   forceAutoZoom?: boolean;
   forFeedPage?: boolean;
+  isEmbedded?: boolean;
 }): ChartData {
   const closeTimes = choiceItems
     .map(({ closeTime }) => closeTime)
@@ -898,7 +937,7 @@ function buildChartData({
     scaling: scaling,
     domain: originalYDomain,
     zoomedDomain: zoomedYDomain,
-    forceTickCount: forFeedPage ? 3 : 5,
+    forceTickCount: isEmbedded ? 5 : forFeedPage ? 3 : 5,
     alwaysShowTicks: true,
   });
 
diff --git a/front_end/src/components/charts/minified_continuous_area_chart.tsx b/front_end/src/components/charts/minified_continuous_area_chart.tsx
index ccdc7a3bfe..4520eb0087 100644
--- a/front_end/src/components/charts/minified_continuous_area_chart.tsx
+++ b/front_end/src/components/charts/minified_continuous_area_chart.tsx
@@ -66,6 +66,9 @@ type Props = {
   alignChartTabs?: boolean;
   forceTickCount?: number;
   variant?: "feed" | "question";
+  colorOverride?: string;
+  showBaseline?: boolean;
+  minMaxLabelsOnly?: boolean;
 };
 
 const MinifiedContinuousAreaChart: FC<Props> = ({
@@ -80,6 +83,9 @@ const MinifiedContinuousAreaChart: FC<Props> = ({
   alignChartTabs,
   forceTickCount,
   variant = "feed",
+  colorOverride,
+  showBaseline = false,
+  minMaxLabelsOnly = false,
 }) => {
   const { ref: chartContainerRef, width: containerWidth } =
     useContainerSize<HTMLDivElement>();
@@ -228,9 +234,11 @@ const MinifiedContinuousAreaChart: FC<Props> = ({
     // However, if there's a resolution point, we need extra padding to prevent clipping
     const hasResolution =
       !isNil(question.resolution) && question.resolution !== "";
+    const wantsAnyXLabels = !hideCP && (!hideLabels || minMaxLabelsOnly);
+    if (wantsAnyXLabels) return BOTTOM_PADDING;
     const baseMinimalPadding = hasResolution ? 8 : 3; // Extra padding for resolution diamond
-    return hideCP || hideLabels ? baseMinimalPadding : BOTTOM_PADDING;
-  }, [hideCP, hideLabels, question.resolution]);
+    return baseMinimalPadding;
+  }, [hideCP, hideLabels, minMaxLabelsOnly, question.resolution]);
 
   return (
     <div ref={chartContainerRef} className="h-full w-full" style={{ height }}>
@@ -256,6 +264,22 @@ const MinifiedContinuousAreaChart: FC<Props> = ({
             />
           }
         >
+          {showBaseline && (
+            <VictoryLine
+              data={[
+                { x: xDomain[0], y: yDomain[0] },
+                { x: xDomain[1], y: yDomain[0] },
+              ]}
+              style={{
+                data: {
+                  stroke: colorOverride
+                    ? colorOverride
+                    : getThemeColor(METAC_COLORS.olive["700"]),
+                  strokeWidth: 1,
+                },
+              }}
+            />
+          )}
           {charts
             .filter((chart) => chart.type !== "user_components")
             .map((chart, index) => {
@@ -268,6 +292,7 @@ const MinifiedContinuousAreaChart: FC<Props> = ({
                     style={{
                       data: {
                         fill: (() => {
+                          if (colorOverride) return colorOverride;
                           if (extraTheme?.area?.style?.data?.fill) {
                             return extraTheme.area.style.data.fill;
                           }
@@ -336,6 +361,7 @@ const MinifiedContinuousAreaChart: FC<Props> = ({
                 style={{
                   data: {
                     stroke: (() => {
+                      if (colorOverride) return colorOverride;
                       switch (chart.color) {
                         case "orange":
                           return getThemeColor(METAC_COLORS.orange["600"]);
@@ -356,7 +382,20 @@ const MinifiedContinuousAreaChart: FC<Props> = ({
 
           <VictoryAxis
             tickValues={xScale.ticks}
-            tickFormat={hideCP || hideLabels ? () => "" : xScale.tickFormat}
+            tickFormat={(tick: number, index?: number, ticks?: number[]) => {
+              if (hideCP) return "";
+
+              if (hideLabels && !minMaxLabelsOnly) return "";
+
+              if (minMaxLabelsOnly) {
+                const last = (ticks?.length ?? 0) - 1;
+                if (index === 0 || index === last)
+                  return xScale.tickFormat(tick);
+                return "";
+              }
+
+              return xScale.tickFormat(tick);
+            }}
             style={{
               ticks: {
                 strokeWidth: 1,
@@ -393,6 +432,7 @@ const MinifiedContinuousAreaChart: FC<Props> = ({
                   style={{
                     data: {
                       stroke: (() => {
+                        if (colorOverride) return colorOverride;
                         switch (chart.color) {
                           case "gray":
                             return getThemeColor(METAC_COLORS.gray["500"]);
@@ -417,6 +457,7 @@ const MinifiedContinuousAreaChart: FC<Props> = ({
                   style={{
                     data: {
                       fill: (() => {
+                        if (colorOverride) return colorOverride;
                         switch (chart.color) {
                           case "gray":
                             return getThemeColor(METAC_COLORS.gray["600"]);
@@ -425,6 +466,7 @@ const MinifiedContinuousAreaChart: FC<Props> = ({
                         }
                       })(),
                       stroke: (() => {
+                        if (colorOverride) return colorOverride;
                         switch (chart.color) {
                           case "gray":
                             return getThemeColor(METAC_COLORS.gray["600"]);
diff --git a/front_end/src/components/charts/multiple_choice_chart.tsx b/front_end/src/components/charts/multiple_choice_chart.tsx
index 350f707a74..36fe986559 100644
--- a/front_end/src/components/charts/multiple_choice_chart.tsx
+++ b/front_end/src/components/charts/multiple_choice_chart.tsx
@@ -42,7 +42,6 @@ import {
   generateScale,
   generateTimestampXScale,
   generateTimeSeriesYDomain,
-  getAxisLeftPadding,
   getTickLabelFontSize,
   getAxisRightPadding,
 } from "@/utils/charts/axis";
@@ -55,6 +54,7 @@ import ChartCursorLabel from "./primitives/chart_cursor_label";
 import XTickLabel from "./primitives/x_tick_label";
 import ForecastAvailabilityChartOverflow from "../post_card/chart_overflow";
 import SvgWrapper from "./primitives/svg_wrapper";
+import YTickLabel from "./primitives/y_tick_label";
 
 type ColoredLinePoint = {
   x: number;
@@ -181,12 +181,6 @@ const MultipleChoiceChart: FC<Props> = ({
       forFeedPage,
     ]
   );
-  const { leftPadding, MIN_LEFT_PADDING } = useMemo(() => {
-    return getAxisLeftPadding(yScale, tickLabelFontSize as number, yLabel);
-  }, [yScale, tickLabelFontSize, yLabel]);
-  const maxLeftPadding = useMemo(() => {
-    return Math.max(leftPadding, MIN_LEFT_PADDING);
-  }, [leftPadding, MIN_LEFT_PADDING]);
 
   const { rightPadding, MIN_RIGHT_PADDING } = useMemo(() => {
     return getAxisRightPadding(yScale, tickLabelFontSize as number, yLabel);
@@ -240,7 +234,10 @@ const MultipleChoiceChart: FC<Props> = ({
         />
       }
       cursorLabelComponent={
-        <ChartCursorLabel positionY={height - 10} isActive={isCursorActive} />
+        <ChartCursorLabel
+          positionY={height - (isEmbedded ? 4 : 10)}
+          isActive={isCursorActive}
+        />
       }
       onCursorChange={(value: CursorCoordinatesPropType) => {
         if (typeof value === "number" && onCursorChange) {
@@ -258,6 +255,14 @@ const MultipleChoiceChart: FC<Props> = ({
     />
   );
 
+  const topPadding = isEmbedded ? 0 : height < 150 ? 5 : 10;
+  const BASE_BOTTOM_PADDING = 20;
+  const EMBED_EXTRA_BOTTOM_PADDING = 6;
+
+  const bottomPadding = isEmbedded
+    ? BASE_BOTTOM_PADDING - EMBED_EXTRA_BOTTOM_PADDING
+    : BASE_BOTTOM_PADDING;
+
   return (
     <div className="relative" ref={chartContainerRef}>
       <ChartContainer
@@ -272,10 +277,10 @@ const MultipleChoiceChart: FC<Props> = ({
             height={height}
             theme={actualTheme}
             padding={{
-              left: isEmbedded ? maxLeftPadding : 0,
-              top: height < 150 ? 5 : 10,
-              right: isEmbedded ? 10 : maxRightPadding,
-              bottom: BOTTOM_PADDING,
+              left: 0,
+              top: topPadding,
+              right: maxRightPadding,
+              bottom: bottomPadding,
             }}
             events={[
               {
@@ -343,6 +348,12 @@ const MultipleChoiceChart: FC<Props> = ({
               dependentAxis
               tickValues={yScale.ticks}
               tickFormat={yScale.tickFormat}
+              tickLabelComponent={
+                <YTickLabel
+                  nudgeTop={isEmbedded ? 6 : 0}
+                  nudgeBottom={isEmbedded ? 6 : 0}
+                />
+              }
               style={{
                 ticks: {
                   stroke: "transparent",
@@ -373,11 +384,7 @@ const MultipleChoiceChart: FC<Props> = ({
               }}
               label={yLabel}
               offsetX={
-                isEmbedded
-                  ? maxLeftPadding
-                  : isNil(yLabel)
-                    ? chartWidth + 5
-                    : chartWidth - TICK_FONT_SIZE + 5
+                isNil(yLabel) ? chartWidth + 5 : chartWidth - TICK_FONT_SIZE + 5
               }
               orientation={"left"}
               axisLabelComponent={<VictoryLabel x={chartWidth} />}
@@ -398,6 +405,7 @@ const MultipleChoiceChart: FC<Props> = ({
                     chartWidth={chartWidth}
                     withCursor={!!onCursorChange}
                     fontSize={tickLabelFontSize as number}
+                    dx={isEmbedded ? 16 : 0}
                   />
                 </VictoryPortal>
               }
diff --git a/front_end/src/components/charts/numeric_chart.tsx b/front_end/src/components/charts/numeric_chart.tsx
index a894ae3989..baf46f839b 100644
--- a/front_end/src/components/charts/numeric_chart.tsx
+++ b/front_end/src/components/charts/numeric_chart.tsx
@@ -19,7 +19,6 @@ import {
   VictoryChart,
   VictoryContainer,
   VictoryCursorContainer,
-  VictoryLabel,
   VictoryLabelProps,
   VictoryLine,
   VictoryPortal,
@@ -55,6 +54,7 @@ import {
 } from "@/utils/charts/axis";
 import { findLastIndexBefore } from "@/utils/charts/helpers";
 import cn from "@/utils/core/cn";
+import { resolveToCssColor } from "@/utils/resolve_color";
 
 import ForecastAvailabilityChartOverflow from "../post_card/chart_overflow";
 import ChartValueBox from "./primitives/chart_value_box";
@@ -85,7 +85,7 @@ type Props = {
   cursorTimestamp?: number | null;
   onCursorChange?: (value: number | null) => void;
   getCursorValue?: (value: number) => string;
-  colorOverride?: ThemeColor;
+  colorOverride?: ThemeColor | string;
   nonInteractive?: boolean;
   isEmbedded?: boolean;
   simplifiedCursor?: boolean;
@@ -211,9 +211,6 @@ const NumericChart: FC<Props> = ({
     return getAxisLeftPadding(yScale, tickLabelFontSize as number, yLabel);
   }, [yScale, tickLabelFontSize, yLabel]);
 
-  const maxLeftPadding = useMemo(() => {
-    return Math.max(leftPadding, MIN_LEFT_PADDING);
-  }, [leftPadding, MIN_LEFT_PADDING]);
   const maxRightPadding = useMemo(() => {
     return Math.max(rightPadding, MIN_RIGHT_PADDING);
   }, [rightPadding, MIN_RIGHT_PADDING]);
@@ -405,6 +402,73 @@ const NumericChart: FC<Props> = ({
     }));
   }, [points, yMin, yMax]);
 
+  const themeLineData = (
+    actualTheme?.line as
+      | { style?: { data?: Record<string, unknown> } }
+      | undefined
+  )?.style?.data as Record<string, unknown> | undefined;
+
+  const themeAreaData = (
+    actualTheme?.area as
+      | { style?: { data?: Record<string, unknown> } }
+      | undefined
+  )?.style?.data as Record<string, unknown> | undefined;
+
+  const asCssColor = (v: unknown): string | undefined =>
+    typeof v === "string" && v.trim().length ? v : undefined;
+
+  const cpLineStroke = useMemo(() => {
+    const overrideCss = resolveToCssColor(getThemeColor, colorOverride);
+    if (overrideCss) return overrideCss;
+
+    if (hasExternalTheme) {
+      const fromTheme = asCssColor(themeLineData?.stroke);
+      if (fromTheme) return fromTheme;
+    }
+    return getThemeColor(colorPalette.lineStroke);
+  }, [
+    colorOverride,
+    hasExternalTheme,
+    themeLineData?.stroke,
+    getThemeColor,
+    colorPalette.lineStroke,
+  ]);
+
+  const cpRangeFill = useMemo(() => {
+    const overrideCss = resolveToCssColor(getThemeColor, colorOverride);
+    if (overrideCss) return overrideCss;
+
+    if (hasExternalTheme) {
+      const fromTheme = asCssColor(themeAreaData?.fill);
+      if (fromTheme) return fromTheme;
+    }
+    return getThemeColor(colorPalette.cpRange);
+  }, [
+    colorOverride,
+    hasExternalTheme,
+    themeAreaData?.fill,
+    getThemeColor,
+    colorPalette.cpRange,
+  ]);
+
+  const cpRangeOpacity = useMemo(() => {
+    if (!hasExternalTheme) return 0.3;
+    const fromTheme = themeAreaData?.opacity;
+    return typeof fromTheme === "number" ? fromTheme : 0.3;
+  }, [hasExternalTheme, themeAreaData?.opacity]);
+
+  const showRightYAxis = isEmbedded;
+
+  const chartPadding = {
+    top: 10,
+    bottom: isEmbedded ? BOTTOM_PADDING + 15 : BOTTOM_PADDING,
+
+    left: showRightYAxis ? 10 : Math.max(leftPadding, MIN_LEFT_PADDING),
+    right: showRightYAxis
+      ? Math.max(rightPadding, MIN_RIGHT_PADDING)
+      : Math.max(rightPadding, MIN_RIGHT_PADDING),
+  };
+
   return (
     <>
       <div
@@ -420,8 +484,8 @@ const NumericChart: FC<Props> = ({
           className="text-xs text-gray-700 dark:text-gray-700-dark"
           textClassName="pl-0"
           style={{
-            paddingRight: isEmbedded ? 10 : maxRightPadding,
-            paddingLeft: isEmbedded ? maxLeftPadding : 0,
+            paddingRight: isEmbedded ? maxRightPadding : maxRightPadding,
+            paddingLeft: isEmbedded ? 0 : 0,
             paddingTop: withZoomPicker ? 24 : 0,
           }}
         />
@@ -440,20 +504,36 @@ const NumericChart: FC<Props> = ({
               width={chartWidth}
               height={height}
               theme={actualTheme}
-              padding={{
-                right: isEmbedded ? 10 : maxRightPadding,
-                top: 10,
-                left: isEmbedded ? maxLeftPadding : 10,
-                bottom: BOTTOM_PADDING,
-              }}
+              padding={chartPadding}
               events={chartEvents}
               containerComponent={containerComponent}
             >
-              {/* Y axis */}
+              {/* Y axis used for GRIDLINES */}
+              <VictoryAxis
+                dependentAxis
+                orientation="left"
+                style={{
+                  ticks: { stroke: "transparent" },
+                  tickLabels: { fill: "transparent" }, // hide labels
+                  axis: { stroke: "transparent" },
+                  grid: {
+                    stroke: getThemeColor(METAC_COLORS.gray["400"]),
+                    strokeWidth: 1,
+                    strokeDasharray: "3, 2",
+                  },
+                }}
+                tickValues={yScaleTicks}
+                tickFormat={yScale.tickFormat}
+              />
+
+              {/* Y axis used for LABELS */}
               <VictoryAxis
                 dependentAxis
+                orientation={showRightYAxis ? "right" : "left"}
                 style={{
                   ticks: { stroke: "transparent" },
+                  axis: { stroke: "transparent" },
+                  grid: { stroke: "transparent" },
                   axisLabel: {
                     fontFamily: LABEL_FONT_FAMILY,
                     fontSize: tickLabelFontSize,
@@ -469,27 +549,10 @@ const NumericChart: FC<Props> = ({
                       ? {}
                       : { fill: getThemeColor(METAC_COLORS.gray["700"]) }),
                   },
-                  axis: { stroke: "transparent" },
-                  grid: {
-                    ...(hasExternalTheme
-                      ? {}
-                      : { stroke: getThemeColor(METAC_COLORS.gray["400"]) }),
-                    strokeWidth: 1,
-                    strokeDasharray: "3, 2",
-                  },
                 }}
                 tickValues={yScaleTicks}
                 tickFormat={yScale.tickFormat}
                 label={!isNil(yLabel) ? `(${yLabel})` : undefined}
-                orientation={"left"}
-                offsetX={
-                  isEmbedded
-                    ? maxLeftPadding
-                    : isNil(yLabel)
-                      ? chartWidth + 5
-                      : chartWidth - tickLabelFontSize + 5
-                }
-                axisLabelComponent={<VictoryLabel x={chartWidth} />}
               />
 
               {/* X axis */}
@@ -498,7 +561,7 @@ const NumericChart: FC<Props> = ({
                   ticks: { stroke: "transparent" },
                   axis: { stroke: "transparent" },
                 }}
-                offsetY={isEmbedded ? 0 : BOTTOM_PADDING}
+                offsetY={isEmbedded ? BOTTOM_PADDING - 5 : BOTTOM_PADDING}
                 tickValues={xScale.ticks}
                 tickFormat={
                   hideCP
@@ -530,10 +593,8 @@ const NumericChart: FC<Props> = ({
                   data={area}
                   style={{
                     data: {
-                      opacity: 0.3,
-                      fill: isNil(colorOverride)
-                        ? getThemeColor(colorPalette.cpRange)
-                        : getThemeColor(colorOverride),
+                      opacity: cpRangeOpacity,
+                      fill: cpRangeFill,
                     },
                   }}
                   interpolation="stepAfter"
@@ -547,9 +608,7 @@ const NumericChart: FC<Props> = ({
                   style={{
                     data: {
                       strokeWidth: 2.5,
-                      stroke: isNil(colorOverride)
-                        ? getThemeColor(colorPalette.lineStroke)
-                        : getThemeColor(colorOverride),
+                      stroke: cpLineStroke,
                       opacity: 0.2,
                     },
                   }}
@@ -564,9 +623,7 @@ const NumericChart: FC<Props> = ({
                   style={{
                     data: {
                       strokeWidth: simplifiedCursor ? 2.5 : 1.5,
-                      stroke: isNil(colorOverride)
-                        ? getThemeColor(colorPalette.lineStroke)
-                        : getThemeColor(colorOverride),
+                      stroke: cpLineStroke,
                     },
                   }}
                   interpolation="stepAfter"
@@ -577,7 +634,11 @@ const NumericChart: FC<Props> = ({
               <VictoryPortal>
                 <VictoryScatter
                   data={clampedPoints}
-                  dataComponent={<PredictionWithRange />}
+                  dataComponent={
+                    <PredictionWithRange
+                      colorOverride={colorOverride ?? colorPalette.chip}
+                    />
+                  }
                 />
               </VictoryPortal>
 
@@ -652,10 +713,10 @@ const NumericChart: FC<Props> = ({
                           }
                           chartWidth={chartWidth}
                           rightPadding={maxRightPadding}
-                          colorOverride={colorOverride ?? colorPalette.chip}
                           getCursorValue={getCursorValue}
                           resolution={resolution}
                           questionType={questionType}
+                          colorOverride={colorOverride ?? colorPalette.chip}
                         />
                       )}
                     </VictoryPortal>
@@ -696,30 +757,18 @@ const NumericChart: FC<Props> = ({
 const CursorChip: FC<{
   x?: number;
   y?: number;
-  colorOverride?: ThemeColor;
+  colorOverride?: ThemeColor | string;
   shouldRender?: boolean;
   isEmbedded?: boolean;
-}> = (props) => {
+}> = ({ x, y, colorOverride, shouldRender, isEmbedded }) => {
   const { getThemeColor } = useAppTheme();
-  const { x, y, colorOverride, shouldRender, isEmbedded } = props;
-  const innerCircleRadius = isEmbedded ? 5 : 4;
-
   if (isNil(x) || isNil(y) || !shouldRender) return null;
 
-  return (
-    <g>
-      <circle
-        cx={x}
-        cy={y}
-        r={innerCircleRadius}
-        fill={
-          isNil(colorOverride)
-            ? getThemeColor(METAC_COLORS.olive["700"])
-            : getThemeColor(colorOverride)
-        }
-      />
-    </g>
-  );
+  const fill =
+    resolveToCssColor(getThemeColor, colorOverride) ??
+    getThemeColor(METAC_COLORS.olive["700"]);
+
+  return <circle cx={x} cy={y} r={isEmbedded ? 5 : 4} fill={fill} />;
 };
 
 export default memo(NumericChart);
diff --git a/front_end/src/components/charts/numeric_timeline.tsx b/front_end/src/components/charts/numeric_timeline.tsx
index 53a9b84130..a66ead3118 100644
--- a/front_end/src/components/charts/numeric_timeline.tsx
+++ b/front_end/src/components/charts/numeric_timeline.tsx
@@ -14,6 +14,7 @@ import {
   Scaling,
   UserForecastHistory,
 } from "@/types/question";
+import { ThemeColor } from "@/types/theme";
 import { getResolutionPoint } from "@/utils/charts/resolution";
 import { getPredictionDisplayValue } from "@/utils/formatters/prediction";
 import { formatResolution } from "@/utils/formatters/resolution";
@@ -53,6 +54,7 @@ type Props = {
   cursorTooltip?: ReactNode;
   isConsumerView?: boolean;
   forFeedPage?: boolean;
+  colorOverride?: ThemeColor | string;
 };
 
 const NumericTimeline: FC<Props> = ({
@@ -86,6 +88,7 @@ const NumericTimeline: FC<Props> = ({
   cursorTooltip,
   isConsumerView,
   forFeedPage,
+  colorOverride,
 }) => {
   const locale = useLocale();
   const resolutionPoint = useMemo(() => {
@@ -211,6 +214,7 @@ const NumericTimeline: FC<Props> = ({
       cursorTooltip={cursorTooltip}
       isConsumerView={isConsumerView}
       questionType={questionType}
+      colorOverride={colorOverride}
     />
   );
 };
diff --git a/front_end/src/components/charts/primitives/chart_container.tsx b/front_end/src/components/charts/primitives/chart_container.tsx
index a7b7c17806..c244050045 100644
--- a/front_end/src/components/charts/primitives/chart_container.tsx
+++ b/front_end/src/components/charts/primitives/chart_container.tsx
@@ -3,6 +3,7 @@ import { Tab, TabGroup, TabList } from "@headlessui/react";
 import { isNil } from "lodash";
 import { forwardRef, Fragment, PropsWithChildren, useState } from "react";
 
+import { useIsEmbedMode } from "@/app/(embed)/questions/components/question_view_mode_context";
 import { TimelineChartZoomOption } from "@/types/charts";
 import { getChartZoomOptions } from "@/utils/charts/helpers";
 import cn from "@/utils/core/cn";
@@ -31,12 +32,22 @@ const ChartContainer = forwardRef<HTMLDivElement, PropsWithChildren<Props>>(
       }
     };
 
+    const isEmbed = useIsEmbedMode();
+
     return (
       <div className="relative flex w-full flex-col">
-        {(!!chartTitle || !!zoom) && (
-          <div className="mb-2.5 flex w-full md:mb-5">
+        {(!!chartTitle || !!zoom) && !isEmbed && (
+          <div
+            className={cn("flex w-full", !isEmbed ? "mb-2.5 md:mb-5" : "mb-3")}
+          >
             {!!chartTitle && (
-              <div className="text-xs font-normal text-blue-900 dark:text-gray-900-dark md:text-base">
+              <div
+                className={cn(
+                  isEmbed
+                    ? "text-xs text-gray-600 dark:text-gray-600-dark"
+                    : "text-xs font-normal text-blue-900 dark:text-gray-900-dark md:text-base"
+                )}
+              >
                 {chartTitle}
               </div>
             )}
@@ -60,7 +71,9 @@ const ChartContainer = forwardRef<HTMLDivElement, PropsWithChildren<Props>>(
                             {
                               "bg-gray-300 dark:bg-gray-300-dark":
                                 hover || selected,
-                            }
+                            },
+                            isEmbed &&
+                              "uppercase text-gray-600 dark:text-gray-600-dark md:text-xs"
                           )}
                         >
                           {option.label}
diff --git a/front_end/src/components/charts/primitives/chart_value_box.tsx b/front_end/src/components/charts/primitives/chart_value_box.tsx
index 29cd6847a0..ed9b1e8768 100644
--- a/front_end/src/components/charts/primitives/chart_value_box.tsx
+++ b/front_end/src/components/charts/primitives/chart_value_box.tsx
@@ -1,12 +1,12 @@
-"use client";
 import { isNil } from "lodash";
-import { FC, useEffect, useRef, useState } from "react";
+import { FC, useEffect, useMemo, useRef, useState } from "react";
 
 import { METAC_COLORS } from "@/constants/colors";
 import useAppTheme from "@/hooks/use_app_theme";
 import { Resolution } from "@/types/post";
 import { QuestionType } from "@/types/question";
 import { ThemeColor } from "@/types/theme";
+import { resolveToCssColor } from "@/utils/resolve_color";
 
 const ChartValueBox: FC<{
   x?: number | null;
@@ -15,7 +15,7 @@ const ChartValueBox: FC<{
   isCursorActive: boolean;
   chartWidth: number;
   rightPadding: number;
-  colorOverride?: ThemeColor;
+  colorOverride?: ThemeColor | string;
   getCursorValue?: (value: number) => string;
   resolution?: Resolution | null;
   isDistributionChip?: boolean;
@@ -38,17 +38,22 @@ const ChartValueBox: FC<{
   const TEXT_PADDING = 4;
   const CHIP_OFFSET = !isNil(resolution) ? 8 : 0;
 
+  const displayText = useMemo(() => {
+    if (!!resolution && !isCursorActive) return String(resolution);
+    const v = datum?.y;
+    if (typeof v !== "number") return "";
+    return getCursorValue ? getCursorValue(v) : v.toFixed(1);
+  }, [resolution, isCursorActive, datum?.y, getCursorValue]);
+
   const [textWidth, setTextWidth] = useState(0);
   const textRef = useRef<SVGTextElement>(null);
   useEffect(() => {
     if (textRef.current) {
       setTextWidth(textRef.current.getBBox().width + TEXT_PADDING);
     }
-  }, [datum?.y]);
+  }, [displayText]);
 
-  if (isNil(x) || isNil(y)) {
-    return null;
-  }
+  if (isNil(x) || isNil(y)) return null;
 
   const adjustedX =
     isCursorActive || isDistributionChip
@@ -58,9 +63,12 @@ const ChartValueBox: FC<{
   const chipFontSize = 12;
   const hasResolution = !!resolution && !isCursorActive;
 
+  const chipFill =
+    resolveToCssColor(getThemeColor, colorOverride) ??
+    getThemeColor(METAC_COLORS.olive["600"]);
+
   return (
     <g>
-      {/* "RESOLVED" label above the chip for resolution values */}
       {hasResolution && questionType !== QuestionType.Binary && (
         <text
           x={adjustedX}
@@ -82,11 +90,7 @@ const ChartValueBox: FC<{
         y={y - chipHeight / 2 - (isDistributionChip ? chipHeight : 0)}
         width={textWidth}
         height={chipHeight}
-        fill={
-          isNil(colorOverride)
-            ? getThemeColor(METAC_COLORS.olive["600"])
-            : getThemeColor(colorOverride)
-        }
+        fill={chipFill}
         stroke="transparent"
         rx={2}
         ry={2}
@@ -103,11 +107,7 @@ const ChartValueBox: FC<{
         fontWeight="bold"
         fontSize={chipFontSize}
       >
-        {!!resolution && !isCursorActive
-          ? resolution
-          : getCursorValue
-            ? getCursorValue(datum?.y as number)
-            : datum?.y.toFixed(1)}
+        {displayText}
       </text>
     </g>
   );
diff --git a/front_end/src/components/charts/primitives/embed_fan_legend.tsx b/front_end/src/components/charts/primitives/embed_fan_legend.tsx
new file mode 100644
index 0000000000..189cfc88ee
--- /dev/null
+++ b/front_end/src/components/charts/primitives/embed_fan_legend.tsx
@@ -0,0 +1,25 @@
+type Props = {
+  items: Array<{ name: string; valueText: string }>;
+};
+
+const EmbedFanLegend: React.FC<Props> = ({ items }) => {
+  if (!items.length) return null;
+
+  return (
+    <div className="mb-2.5 flex flex-wrap gap-2.5 max-[550px]:gap-1.5">
+      {items.map((i) => (
+        <div
+          key={i.name}
+          className="flex items-center gap-2.5 rounded-[4px] border border-olive-400 px-3 py-2 text-xs font-medium leading-[16px] text-olive-800 dark:border-olive-400-dark dark:text-olive-800-dark min-[440px]:text-sm"
+        >
+          <span>{i.name}</span>
+          <span className="font-normal text-gray-800 dark:text-gray-800-dark">
+            {i.valueText}
+          </span>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default EmbedFanLegend;
diff --git a/front_end/src/components/charts/primitives/prediction_with_range.tsx b/front_end/src/components/charts/primitives/prediction_with_range.tsx
index 6f837beeb1..60cdfa6c25 100644
--- a/front_end/src/components/charts/primitives/prediction_with_range.tsx
+++ b/front_end/src/components/charts/primitives/prediction_with_range.tsx
@@ -5,6 +5,7 @@ import { D3Scale } from "victory";
 
 import { METAC_COLORS } from "@/constants/colors";
 import useAppTheme from "@/hooks/use_app_theme";
+import { ThemeColor } from "@/types/theme";
 
 type PredictionWithRangeProps = {
   x?: number;
@@ -15,6 +16,7 @@ type PredictionWithRangeProps = {
     y?: D3Scale;
   };
   datum?: { y1: number; y2: number };
+  colorOverride?: ThemeColor | string;
 };
 
 const PredictionWithRange: FC<PredictionWithRangeProps> = (props) => {
diff --git a/front_end/src/components/charts/primitives/x_tick_label.tsx b/front_end/src/components/charts/primitives/x_tick_label.tsx
index ea984d9d5c..e86605402c 100644
--- a/front_end/src/components/charts/primitives/x_tick_label.tsx
+++ b/front_end/src/components/charts/primitives/x_tick_label.tsx
@@ -5,19 +5,24 @@ type Props = ComponentProps<typeof VictoryLabel> & {
   chartWidth: number;
   withCursor?: boolean;
   fontSize?: number;
+  dx?: number;
 };
 
 const XTickLabel: FC<Props> = ({
   chartWidth,
   withCursor,
   fontSize = 10,
+  dx = 0,
   ...props
 }) => {
-  const estimatedTextWidth =
-    ((props.text?.toString().length ?? 0) * fontSize) / 2;
+  const text = props.text?.toString() ?? "";
+  const estimatedTextWidth = (text.length * fontSize) / 2;
+
+  const x = (props.x ?? 0) + dx;
+
   const overlapsRightEdge = withCursor
-    ? (props.x ?? 0) > chartWidth - estimatedTextWidth
-    : (props.x ?? 0) > chartWidth - 12;
+    ? x > chartWidth - estimatedTextWidth
+    : x > chartWidth - 12;
 
   if (overlapsRightEdge) {
     return null;
@@ -26,9 +31,10 @@ const XTickLabel: FC<Props> = ({
   return (
     <VictoryLabel
       {...props}
+      dx={dx}
       style={{
         ...(props.style ?? {}),
-        fontSize: fontSize,
+        fontSize,
       }}
     />
   );
diff --git a/front_end/src/components/charts/primitives/y_tick_label.tsx b/front_end/src/components/charts/primitives/y_tick_label.tsx
new file mode 100644
index 0000000000..e8a7f32b79
--- /dev/null
+++ b/front_end/src/components/charts/primitives/y_tick_label.tsx
@@ -0,0 +1,21 @@
+import { ComponentProps, FC } from "react";
+import { VictoryLabel } from "victory";
+
+type Props = ComponentProps<typeof VictoryLabel> & {
+  nudgeTop?: number;
+  nudgeBottom?: number;
+};
+
+const YTickLabel: FC<Props> = ({ nudgeTop = 0, nudgeBottom = 0, ...props }) => {
+  const text = props.text?.toString();
+
+  let extraDy = 0;
+
+  if (text === "100%") extraDy = nudgeTop;
+  if (text === "0%") extraDy = -nudgeBottom;
+
+  const baseDy = typeof props.dy === "number" ? props.dy : 0;
+  return <VictoryLabel {...props} dy={baseDy + extraDy} />;
+};
+
+export default YTickLabel;
diff --git a/front_end/src/components/consumer_post_card/binary_cp_bar.tsx b/front_end/src/components/consumer_post_card/binary_cp_bar.tsx
index 023e958d60..4a84ea67d7 100644
--- a/front_end/src/components/consumer_post_card/binary_cp_bar.tsx
+++ b/front_end/src/components/consumer_post_card/binary_cp_bar.tsx
@@ -1,7 +1,10 @@
+"use client";
+
 import { isNil } from "lodash";
 import { useTranslations } from "next-intl";
 import { FC, useId } from "react";
 
+import { useIsEmbedMode } from "@/app/(embed)/questions/components/question_view_mode_context";
 import { useHideCP } from "@/contexts/cp_context";
 import { QuestionStatus } from "@/types/post";
 import { QuestionType, QuestionWithNumericForecasts } from "@/types/question";
@@ -12,12 +15,19 @@ type Props = {
   question: QuestionWithNumericForecasts;
   size?: "xs" | "sm" | "md" | "lg";
   className?: string;
+  colorOverride?: string;
 };
 
-const BinaryCPBar: FC<Props> = ({ question, size = "md", className }) => {
+const BinaryCPBar: FC<Props> = ({
+  question,
+  size = "md",
+  className,
+  colorOverride,
+}) => {
   const t = useTranslations();
   const { hideCP } = useHideCP();
   const gradientId = useId();
+  const isEmbed = useIsEmbedMode();
 
   const questionCP =
     question.aggregations[question.default_aggregation_method]?.latest
@@ -34,10 +44,10 @@ const BinaryCPBar: FC<Props> = ({ question, size = "md", className }) => {
       ? Math.round((questionCP as number) * 1000) / 10
       : null;
 
-  const width = 112;
-  const height = 66;
-  const strokeWidth = 12;
-  const strokeCursorWidth = 17;
+  const width = isEmbed ? 85 : 112;
+  const height = isEmbed ? 50 : 66;
+  const strokeWidth = isEmbed ? 8 : 12;
+  const strokeCursorWidth = isEmbed ? 12 : 17;
   const radius = (width - strokeWidth) / 2;
   const arcAngle = Math.PI * 1.1;
   const center = { x: width / 2, y: height - strokeWidth };
@@ -61,11 +71,17 @@ const BinaryCPBar: FC<Props> = ({ question, size = "md", className }) => {
         })
       : null;
 
-  const { textClass, strokeClass, hex } = getBinaryGaugeColors(
+  const {
+    textClass,
+    strokeClass,
+    hex: defaultHex,
+  } = getBinaryGaugeColors(
     cpPercentage ?? 0,
     isClosed || isNil(questionCP) || hideCP
   );
 
+  const hex = colorOverride ?? defaultHex;
+
   const startAngle = Math.PI - (arcAngle - Math.PI) / 2;
   const endAngle = startAngle + ((cpPercentage ?? 0) / 100) * arcAngle;
   const gradientStartX = center.x + radius * Math.cos(startAngle);
@@ -83,6 +99,7 @@ const BinaryCPBar: FC<Props> = ({ question, size = "md", className }) => {
           "scale-100": size === "md",
           "mb-4 scale-[1.25]": size === "lg",
         },
+        isEmbed && "scale-100",
         className
       )}
     >
@@ -112,7 +129,7 @@ const BinaryCPBar: FC<Props> = ({ question, size = "md", className }) => {
           stroke={hex}
           strokeOpacity={0.15}
           strokeWidth={strokeWidth}
-          className={strokeClass}
+          className={!colorOverride ? strokeClass : undefined}
         />
 
         {/* Progress arc */}
@@ -145,30 +162,39 @@ const BinaryCPBar: FC<Props> = ({ question, size = "md", className }) => {
               2 * Math.sin(progressArc.angle + Math.PI / 2)
             }
             stroke={hex}
-            className={strokeClass}
+            className={!colorOverride ? strokeClass : undefined}
             strokeWidth={strokeCursorWidth}
           />
         )}
       </svg>
       <div
         className={cn(
-          "absolute bottom-0 flex w-[60px] flex-col items-center justify-center text-center",
-          textClass,
+          "absolute bottom-0 flex w-[60px] flex-col items-center justify-center text-center text-sm",
+          !colorOverride && textClass,
           size === "xs" && "bottom-[10px] scale-[200%]"
         )}
+        style={{ color: colorOverride }}
       >
         <span
           className={cn(
             "font-bold",
-            size === "xs" ? "text-[12px] leading-4" : "text-xl leading-8"
+            isEmbed
+              ? "text-[18px] leading-[24px]"
+              : size === "xs"
+                ? "text-[12px] leading-4"
+                : "text-xl leading-8"
           )}
         >
           {cpPercentage != null ? `${cpPercentage}%` : "%"}
         </span>
         <span
           className={cn(
-            "font-normal uppercase",
-            size === "xs" ? "text-[6px] leading-[6px]" : "text-xs leading-none"
+            "font-normal uppercase leading-none",
+            isEmbed
+              ? "text-[9px] leading-[9px]"
+              : size === "xs"
+                ? "text-[6px] leading-[6px]"
+                : "text-xs"
           )}
         >
           {t("chance")}
diff --git a/front_end/src/components/consumer_post_card/question_resolution_chip.tsx b/front_end/src/components/consumer_post_card/question_resolution_chip.tsx
index 7efbab857b..509b774ce3 100644
--- a/front_end/src/components/consumer_post_card/question_resolution_chip.tsx
+++ b/front_end/src/components/consumer_post_card/question_resolution_chip.tsx
@@ -1,6 +1,7 @@
 import { useLocale, useTranslations } from "next-intl";
 import { FC } from "react";
 
+import { useIsEmbedMode } from "@/app/(embed)/questions/components/question_view_mode_context";
 import { QuestionWithNumericForecasts } from "@/types/question";
 import cn from "@/utils/core/cn";
 import { formatResolution } from "@/utils/formatters/resolution";
@@ -24,6 +25,7 @@ const QuestionResolutionChip: FC<Props> = ({
   size = "md",
 }) => {
   const t = useTranslations();
+  const isEmbed = useIsEmbedMode();
   return (
     <div className={cn("flex justify-center", className)}>
       <div
@@ -44,6 +46,7 @@ const QuestionResolutionChip: FC<Props> = ({
                 // Mobile-first responsive sizing
                 "text-[10px] md:text-xs": size === "sm",
                 "text-xs md:text-sm": size === "md",
+                "md:text-xs": size === "md" && isEmbed,
                 "text-sm md:text-base": size === "lg",
               }
             )}
@@ -59,6 +62,7 @@ const QuestionResolutionChip: FC<Props> = ({
               // Mobile-first responsive sizing
               "text-sm md:text-base": size === "sm",
               "text-lg md:text-xl": size === "md",
+              "md:text-lg": size === "md" && isEmbed,
               "text-xl md:text-2xl": size === "lg",
             }
           )}
diff --git a/front_end/src/components/detailed_question_card/detailed_group_card/index.tsx b/front_end/src/components/detailed_question_card/detailed_group_card/index.tsx
index f90dc0574b..7bb35750cc 100644
--- a/front_end/src/components/detailed_question_card/detailed_group_card/index.tsx
+++ b/front_end/src/components/detailed_question_card/detailed_group_card/index.tsx
@@ -1,20 +1,33 @@
 "use client";
 
-import React, { FC, useEffect } from "react";
+import { FC, useEffect, useMemo } from "react";
+import { VictoryThemeDefinition } from "victory";
 
+import { useIsEmbedMode } from "@/app/(embed)/questions/components/question_view_mode_context";
 import GroupTimeline from "@/app/(main)/questions/[id]/components/group_timeline";
 import RevealCPButton from "@/app/(main)/questions/[id]/components/reveal_cp_button";
 import FanChart from "@/components/charts/fan_chart";
+import { MultipleChoiceTile } from "@/components/post_card/multiple_choice_tile";
+import { ContinuousQuestionTypes } from "@/constants/questions";
 import { useHideCP } from "@/contexts/cp_context";
+import useTimestampCursor from "@/hooks/use_timestamp_cursor";
 import {
   GroupOfQuestionsGraphType,
   GroupOfQuestionsPost,
   PostStatus,
 } from "@/types/post";
-import { QuestionWithNumericForecasts } from "@/types/question";
+import { QuestionType, QuestionWithNumericForecasts } from "@/types/question";
 import { sendAnalyticsEvent } from "@/utils/analytics";
+import { getGroupQuestionsTimestamps } from "@/utils/charts/timestamps";
+import { generateChoiceItemsFromGroupQuestions } from "@/utils/questions/choices";
 import { getGroupForecastAvailability } from "@/utils/questions/forecastAvailability";
-import { getPostDrivenTime } from "@/utils/questions/helpers";
+import {
+  getContinuousGroupScaling,
+  getPostDrivenTime,
+} from "@/utils/questions/helpers";
+import { getCommonUnit } from "@/utils/questions/units";
+
+import { getMaxVisibleCheckboxes } from "../embeds";
 
 type Props = {
   post: GroupOfQuestionsPost<QuestionWithNumericForecasts>;
@@ -26,6 +39,9 @@ type Props = {
   groupPresentationOverride?: GroupOfQuestionsGraphType;
   className?: string;
   prioritizeOpenSubquestions?: boolean;
+  embedChartHeight?: number;
+  onLegendHeightChange?: (height: number) => void;
+  chartTheme?: VictoryThemeDefinition;
 };
 
 const DetailedGroupCard: FC<Props> = ({
@@ -34,6 +50,9 @@ const DetailedGroupCard: FC<Props> = ({
   groupPresentationOverride,
   className,
   prioritizeOpenSubquestions = false,
+  embedChartHeight,
+  onLegendHeightChange,
+  chartTheme,
 }) => {
   const {
     open_time,
@@ -65,7 +84,41 @@ const DetailedGroupCard: FC<Props> = ({
     }
   }, [groupPresentationOverride, hasUserForecast]);
 
+  const isEmbed = useIsEmbedMode();
+
+  const maxVisibleCheckboxes = useMemo(
+    () => getMaxVisibleCheckboxes(isEmbed),
+    [isEmbed]
+  );
+
   const forecastAvailability = getGroupForecastAvailability(questions);
+
+  const groupType = questions[0]?.type;
+  const isContinuousGroup =
+    !!groupType && ContinuousQuestionTypes.some((t) => t === groupType);
+
+  const commonUnit = useMemo(() => {
+    if (!isContinuousGroup) return null;
+    return getCommonUnit(
+      questions.map((q) => ({
+        unit: q.unit,
+        scaling: q.scaling ? { unit: q.unit } : null,
+      }))
+    );
+  }, [isContinuousGroup, questions]);
+
+  const groupScaling = useMemo(
+    () =>
+      isContinuousGroup ? getContinuousGroupScaling(questions) : undefined,
+    [isContinuousGroup, questions]
+  );
+  const timestamps = getGroupQuestionsTimestamps(questions, {
+    withUserTimestamps: !!forecastAvailability.cpRevealsOn,
+  });
+
+  const [_cursorTimestamp, _tooltipDate, handleCursorChange] =
+    useTimestampCursor(timestamps);
+
   if (
     forecastAvailability.isEmpty &&
     forecastAvailability.cpRevealsOn &&
@@ -76,6 +129,48 @@ const DetailedGroupCard: FC<Props> = ({
 
   switch (presentationType) {
     case GroupOfQuestionsGraphType.MultipleChoiceGraph: {
+      if (isEmbed && (groupType === QuestionType.Binary || isContinuousGroup)) {
+        const timestamps = getGroupQuestionsTimestamps(questions, {
+          withUserTimestamps: !!forecastAvailability.cpRevealsOn,
+        });
+
+        const choiceItems = generateChoiceItemsFromGroupQuestions(
+          post.group_of_questions,
+          {
+            activeCount: maxVisibleCheckboxes,
+            preselectedQuestionId,
+          }
+        );
+
+        return (
+          <>
+            <MultipleChoiceTile
+              group={post.group_of_questions}
+              groupType={groupType}
+              choices={choiceItems}
+              visibleChoicesCount={Math.min(
+                maxVisibleCheckboxes,
+                choiceItems.length
+              )}
+              hideCP={hideCP}
+              timestamps={timestamps}
+              actualCloseTime={getPostDrivenTime(refCloseTime)}
+              openTime={getPostDrivenTime(open_time)}
+              forecastAvailability={forecastAvailability}
+              canPredict={false}
+              showChart
+              chartHeight={embedChartHeight}
+              scaling={groupScaling}
+              onLegendHeightChange={onLegendHeightChange}
+              chartTheme={chartTheme}
+              yLabel={commonUnit ?? undefined}
+              onCursorChange={handleCursorChange}
+            />
+            {hideCP && <RevealCPButton />}
+          </>
+        );
+      }
+
       return (
         <>
           <GroupTimeline
@@ -87,6 +182,9 @@ const DetailedGroupCard: FC<Props> = ({
             hideCP={hideCP}
             className={className}
             prioritizeOpen={prioritizeOpenSubquestions}
+            embedMode={isEmbed}
+            chartHeight={embedChartHeight}
+            chartTheme={chartTheme}
           />
           {hideCP && <RevealCPButton />}
         </>
@@ -99,6 +197,9 @@ const DetailedGroupCard: FC<Props> = ({
             group={post.group_of_questions}
             hideCP={hideCP}
             withTooltip
+            height={embedChartHeight}
+            isEmbedded={isEmbed}
+            onLegendHeightChange={onLegendHeightChange}
           />
           {hideCP && <RevealCPButton />}
         </>
diff --git a/front_end/src/components/detailed_question_card/detailed_question_card/continuous_chart_card.tsx b/front_end/src/components/detailed_question_card/detailed_question_card/continuous_chart_card.tsx
index c783436e93..40bcf29b86 100644
--- a/front_end/src/components/detailed_question_card/detailed_question_card/continuous_chart_card.tsx
+++ b/front_end/src/components/detailed_question_card/detailed_question_card/continuous_chart_card.tsx
@@ -1,8 +1,10 @@
 "use client";
 import { isNil } from "lodash";
 import { useTranslations } from "next-intl";
-import React, { FC, ReactNode, useCallback, useMemo, useState } from "react";
+import { FC, ReactNode, useCallback, useMemo, useState } from "react";
+import { VictoryThemeDefinition } from "victory";
 
+import { useIsEmbedMode } from "@/app/(embed)/questions/components/question_view_mode_context";
 import QuestionHeaderCPStatus from "@/app/(main)/questions/[id]/components/question_view/forecaster_question_view/question_header/question_header_cp_status";
 import NumericTimeline from "@/components/charts/numeric_timeline";
 import QuestionPredictionTooltip from "@/components/charts/primitives/question_prediction_tooltip";
@@ -13,6 +15,7 @@ import {
   QuestionType,
   QuestionWithNumericForecasts,
 } from "@/types/question";
+import { ThemeColor } from "@/types/theme";
 import { getCursorForecast } from "@/utils/charts/cursor";
 import cn from "@/utils/core/cn";
 import { isForecastActive } from "@/utils/forecasts/helpers";
@@ -33,6 +36,11 @@ type Props = {
   forecastAvailability?: ForecastAvailability;
   hideTitle?: boolean;
   isConsumerView?: boolean;
+  embedChartHeight?: number;
+  extraTheme?: VictoryThemeDefinition;
+  colorOverride?: ThemeColor | string;
+  defaultZoom?: TimelineChartZoomOption;
+  withZoomPicker?: boolean;
 };
 
 const DetailedContinuousChartCard: FC<Props> = ({
@@ -42,9 +50,19 @@ const DetailedContinuousChartCard: FC<Props> = ({
   forecastAvailability,
   hideTitle,
   isConsumerView: isConsumerViewProp,
+  embedChartHeight,
+  extraTheme,
+  colorOverride,
+  defaultZoom,
+  withZoomPicker,
 }) => {
   const t = useTranslations();
   const { user } = useAuth();
+  const effectiveDefaultZoom =
+    defaultZoom ??
+    (user ? TimelineChartZoomOption.All : TimelineChartZoomOption.TwoMonths);
+
+  const effectiveWithZoomPicker = withZoomPicker ?? true;
   const isConsumerView = isConsumerViewProp ?? !user;
   const [isChartReady, setIsChartReady] = useState(false);
 
@@ -180,6 +198,70 @@ const DetailedContinuousChartCard: FC<Props> = ({
     question.status,
   ]);
 
+  const isEmbed = useIsEmbedMode();
+  const shouldOverlayCp =
+    isEmbed &&
+    !hideCP &&
+    !forecastAvailability?.isEmpty &&
+    !forecastAvailability?.cpRevealsOn &&
+    (question.type === QuestionType.Binary || isContinuousQuestion(question));
+
+  const timelineTitle =
+    !isEmbed && !hideTitle ? t("forecastTimelineHeading") : undefined;
+
+  const chartHeight = embedChartHeight ?? 150;
+
+  const renderTimeline = () => (
+    <NumericTimeline
+      aggregation={question.aggregations[question.default_aggregation_method]}
+      myForecasts={question.my_forecasts}
+      resolution={question.resolution}
+      resolveTime={question.actual_resolve_time}
+      cursorTimestamp={cursorTimestamp}
+      onCursorChange={handleCursorChange}
+      onChartReady={handleChartReady}
+      questionType={question.type}
+      questionStatus={question.status}
+      actualCloseTime={getPostDrivenTime(question.actual_close_time)}
+      scaling={question.scaling}
+      defaultZoom={effectiveDefaultZoom}
+      withZoomPicker={effectiveWithZoomPicker}
+      hideCP={hideCP || !!forecastAvailability?.cpRevealsOn}
+      isEmptyDomain={
+        !!forecastAvailability?.isEmpty || !!forecastAvailability?.cpRevealsOn
+      }
+      openTime={getPostDrivenTime(question.open_time)}
+      unit={question.unit}
+      inboundOutcomeCount={question.inbound_outcome_count}
+      simplifiedCursor={question.type !== QuestionType.Binary || !user}
+      title={timelineTitle}
+      forecastAvailability={forecastAvailability}
+      cursorTooltip={
+        question.type === QuestionType.Binary && !user
+          ? undefined
+          : cursorTooltip
+      }
+      isConsumerView={isConsumerView}
+      isEmbedded={isEmbed}
+      height={chartHeight}
+      extraTheme={extraTheme}
+      colorOverride={colorOverride}
+    />
+  );
+
+  const cpColorOverride: string | undefined =
+    typeof colorOverride === "string" ? colorOverride : undefined;
+
+  const overlayNode = (
+    <QuestionHeaderCPStatus
+      question={question}
+      size="md"
+      hideLabel={isContinuousQuestion(question)}
+      colorOverride={cpColorOverride}
+      chartTheme={extraTheme}
+    />
+  );
+
   return (
     <div
       className={cn(
@@ -189,140 +271,40 @@ const DetailedContinuousChartCard: FC<Props> = ({
     >
       {!isConsumerView ? (
         <>
-          {/* Large screens: side-by-side layout */}
+          {/* Desktop */}
           <div className="hidden items-stretch gap-4 md:flex">
-            {isContinuousQuestion(question) && (
+            {isContinuousQuestion(question) && !isEmbed && (
               <QuestionHeaderCPStatus
                 question={question}
                 size="lg"
                 hideLabel={true}
               />
             )}
+
             <div className="relative flex-1">
-              <NumericTimeline
-                aggregation={
-                  question.aggregations[question.default_aggregation_method]
-                }
-                myForecasts={question.my_forecasts}
-                resolution={question.resolution}
-                resolveTime={question.actual_resolve_time}
-                cursorTimestamp={cursorTimestamp}
-                onCursorChange={handleCursorChange}
-                onChartReady={handleChartReady}
-                questionType={question.type}
-                questionStatus={question.status}
-                actualCloseTime={getPostDrivenTime(question.actual_close_time)}
-                scaling={question.scaling}
-                defaultZoom={
-                  user
-                    ? TimelineChartZoomOption.All
-                    : TimelineChartZoomOption.TwoMonths
-                }
-                withZoomPicker
-                hideCP={hideCP || !!forecastAvailability?.cpRevealsOn}
-                isEmptyDomain={
-                  !!forecastAvailability?.isEmpty ||
-                  !!forecastAvailability?.cpRevealsOn
-                }
-                openTime={getPostDrivenTime(question.open_time)}
-                unit={question.unit}
-                inboundOutcomeCount={question.inbound_outcome_count}
-                simplifiedCursor={
-                  question.type !== QuestionType.Binary || !user
-                }
-                title={hideTitle ? undefined : t("forecastTimelineHeading")}
-                forecastAvailability={forecastAvailability}
-                cursorTooltip={
-                  question.type === QuestionType.Binary && !user
-                    ? undefined
-                    : cursorTooltip
-                }
-                isConsumerView={isConsumerView}
+              <OverlayableTimeline
+                enabled={shouldOverlayCp}
+                timeline={renderTimeline()}
+                overlay={overlayNode}
               />
             </div>
           </div>
 
-          {/* Small screens: timeline only (CP status shown in header) */}
+          {/* Mobile */}
           <div className="relative md:hidden">
-            <NumericTimeline
-              aggregation={
-                question.aggregations[question.default_aggregation_method]
-              }
-              myForecasts={question.my_forecasts}
-              resolution={question.resolution}
-              resolveTime={question.actual_resolve_time}
-              cursorTimestamp={cursorTimestamp}
-              onCursorChange={handleCursorChange}
-              onChartReady={handleChartReady}
-              questionType={question.type}
-              questionStatus={question.status}
-              actualCloseTime={getPostDrivenTime(question.actual_close_time)}
-              scaling={question.scaling}
-              defaultZoom={
-                user
-                  ? TimelineChartZoomOption.All
-                  : TimelineChartZoomOption.TwoMonths
-              }
-              withZoomPicker
-              hideCP={hideCP || !!forecastAvailability?.cpRevealsOn}
-              isEmptyDomain={
-                !!forecastAvailability?.isEmpty ||
-                !!forecastAvailability?.cpRevealsOn
-              }
-              openTime={getPostDrivenTime(question.open_time)}
-              unit={question.unit}
-              inboundOutcomeCount={question.inbound_outcome_count}
-              simplifiedCursor={question.type !== QuestionType.Binary || !user}
-              title={hideTitle ? undefined : t("forecastTimelineHeading")}
-              forecastAvailability={forecastAvailability}
-              cursorTooltip={
-                question.type === QuestionType.Binary && !user
-                  ? undefined
-                  : cursorTooltip
-              }
-              isConsumerView={isConsumerView}
+            <OverlayableTimeline
+              enabled={shouldOverlayCp}
+              timeline={renderTimeline()}
+              overlay={overlayNode}
             />
           </div>
         </>
       ) : (
         <div className="relative">
-          <NumericTimeline
-            aggregation={
-              question.aggregations[question.default_aggregation_method]
-            }
-            myForecasts={question.my_forecasts}
-            resolution={question.resolution}
-            resolveTime={question.actual_resolve_time}
-            cursorTimestamp={cursorTimestamp}
-            onCursorChange={handleCursorChange}
-            onChartReady={handleChartReady}
-            questionType={question.type}
-            questionStatus={question.status}
-            actualCloseTime={getPostDrivenTime(question.actual_close_time)}
-            scaling={question.scaling}
-            defaultZoom={
-              user
-                ? TimelineChartZoomOption.All
-                : TimelineChartZoomOption.TwoMonths
-            }
-            withZoomPicker
-            hideCP={hideCP || !!forecastAvailability?.cpRevealsOn}
-            isEmptyDomain={
-              !!forecastAvailability?.isEmpty ||
-              !!forecastAvailability?.cpRevealsOn
-            }
-            openTime={getPostDrivenTime(question.open_time)}
-            unit={question.unit}
-            inboundOutcomeCount={question.inbound_outcome_count}
-            simplifiedCursor={question.type !== QuestionType.Binary || !user}
-            title={hideTitle ? undefined : t("forecastTimelineHeading")}
-            forecastAvailability={forecastAvailability}
-            cursorTooltip={
-              question.type === QuestionType.Binary && !user
-                ? undefined
-                : cursorTooltip
-            }
-            isConsumerView={isConsumerView}
+          <OverlayableTimeline
+            enabled={shouldOverlayCp}
+            timeline={renderTimeline()}
+            overlay={overlayNode}
           />
         </div>
       )}
@@ -330,6 +312,32 @@ const DetailedContinuousChartCard: FC<Props> = ({
   );
 };
 
+type OverlayableTimelineProps = {
+  enabled: boolean;
+  timeline: ReactNode;
+  overlay: ReactNode;
+};
+
+const OverlayableTimeline: FC<OverlayableTimelineProps> = ({
+  enabled,
+  timeline,
+  overlay,
+}) => {
+  if (!enabled) return <>{timeline}</>;
+
+  return (
+    <div className="group relative">
+      <div className="opacity-10 transition-opacity duration-200 group-focus-within:opacity-100 group-hover:opacity-100 @[23.5rem]:opacity-100">
+        {timeline}
+      </div>
+
+      <div className="pointer-events-none absolute inset-0 z-10 flex items-center justify-center opacity-100 transition-opacity duration-200 group-focus-within:opacity-0 group-hover:opacity-0 @[23.5rem]:hidden">
+        {overlay}
+      </div>
+    </div>
+  );
+};
+
 function renderDisplayValue(displayValue: string): ReactNode {
   const displayValueChunks = displayValue.split("\n");
   if (displayValueChunks.length > 1) {
diff --git a/front_end/src/components/detailed_question_card/detailed_question_card/index.tsx b/front_end/src/components/detailed_question_card/detailed_question_card/index.tsx
index 9a28d5dd78..506c620eab 100644
--- a/front_end/src/components/detailed_question_card/detailed_question_card/index.tsx
+++ b/front_end/src/components/detailed_question_card/detailed_question_card/index.tsx
@@ -1,10 +1,13 @@
 "use client";
-import React, { FC, useEffect } from "react";
+import { FC, useEffect } from "react";
+import { VictoryThemeDefinition } from "victory";
 
+import { useIsEmbedMode } from "@/app/(embed)/questions/components/question_view_mode_context";
 import RevealCPButton from "@/app/(main)/questions/[id]/components/reveal_cp_button";
 import { useHideCP } from "@/contexts/cp_context";
 import { PostStatus, QuestionPost } from "@/types/post";
 import { QuestionType, QuestionWithForecasts } from "@/types/question";
+import { ThemeColor } from "@/types/theme";
 import { sendAnalyticsEvent } from "@/utils/analytics";
 import { getQuestionForecastAvailability } from "@/utils/questions/forecastAvailability";
 
@@ -16,18 +19,28 @@ type Props = {
   post: QuestionPost<QuestionWithForecasts>;
   hideTitle?: boolean;
   isConsumerView?: boolean;
+  embedChartHeight?: number;
+  onLegendHeightChange?: (height: number) => void;
+  chartTheme?: VictoryThemeDefinition;
+  colorOverride?: ThemeColor | string;
 };
 
 const DetailedQuestionCard: FC<Props> = ({
   post,
   hideTitle,
   isConsumerView,
+  embedChartHeight,
+  onLegendHeightChange,
+  chartTheme,
+  colorOverride,
 }) => {
   const { question, status, nr_forecasters } = post;
   const forecastAvailability = getQuestionForecastAvailability(question);
 
   const { hideCP } = useHideCP();
 
+  const isEmbed = useIsEmbedMode();
+
   useEffect(() => {
     if (!!question.my_forecasts?.history.length) {
       sendAnalyticsEvent("visitPredictedQuestion", {
@@ -54,6 +67,9 @@ const DetailedQuestionCard: FC<Props> = ({
             nrForecasters={nr_forecasters}
             hideTitle={hideTitle}
             isConsumerView={isConsumerView}
+            embedChartHeight={embedChartHeight}
+            extraTheme={chartTheme}
+            colorOverride={colorOverride}
           />
           {hideCP && <RevealCPButton />}
         </DetailsQuestionCardErrorBoundary>
@@ -65,6 +81,10 @@ const DetailedQuestionCard: FC<Props> = ({
             question={question}
             hideCP={hideCP}
             forecastAvailability={forecastAvailability}
+            embedMode={isEmbed}
+            chartHeight={embedChartHeight}
+            onLegendHeightChange={onLegendHeightChange}
+            chartTheme={chartTheme}
           />
           {hideCP && <RevealCPButton />}
         </DetailsQuestionCardErrorBoundary>
diff --git a/front_end/src/components/detailed_question_card/detailed_question_card/multiple_choice_chart_card.tsx b/front_end/src/components/detailed_question_card/detailed_question_card/multiple_choice_chart_card.tsx
index 3c535253b2..34afabb366 100644
--- a/front_end/src/components/detailed_question_card/detailed_question_card/multiple_choice_chart_card.tsx
+++ b/front_end/src/components/detailed_question_card/detailed_question_card/multiple_choice_chart_card.tsx
@@ -1,11 +1,12 @@
 "use client";
 import { uniq } from "lodash";
 import { useTranslations } from "next-intl";
-import React, { FC, useCallback, useEffect, useMemo, useState } from "react";
+import { FC, useCallback, useEffect, useMemo, useState } from "react";
 import { VictoryThemeDefinition } from "victory";
 
 import MultiChoicesChartView from "@/app/(main)/questions/[id]/components/multiple_choices_chart_view";
 import CPRevealTime from "@/components/cp_reveal_time";
+import { MultipleChoiceTile } from "@/components/post_card/multiple_choice_tile";
 import useTimestampCursor from "@/hooks/use_timestamp_cursor";
 import { TimelineChartZoomOption } from "@/types/charts";
 import { ChoiceItem, ChoiceTooltipItem } from "@/types/choices";
@@ -18,12 +19,10 @@ import { getPredictionDisplayValue } from "@/utils/formatters/prediction";
 import { generateChoiceItemsFromMultipleChoiceForecast } from "@/utils/questions/choices";
 import { getPostDrivenTime } from "@/utils/questions/helpers";
 
-const MAX_VISIBLE_CHECKBOXES = 3;
-
-const generateList = (question: QuestionWithMultipleChoiceForecasts) =>
-  generateChoiceItemsFromMultipleChoiceForecast(question, {
-    activeCount: MAX_VISIBLE_CHECKBOXES,
-  });
+import {
+  buildEmbedChoicesWithOthers,
+  getMaxVisibleCheckboxes,
+} from "../embeds";
 
 type Props = {
   question: QuestionWithMultipleChoiceForecasts;
@@ -33,6 +32,7 @@ type Props = {
   chartTheme?: VictoryThemeDefinition;
   hideCP?: boolean;
   forecastAvailability?: ForecastAvailability;
+  onLegendHeightChange?: (height: number) => void;
 };
 
 const DetailedMultipleChoiceChartCard: FC<Props> = ({
@@ -43,6 +43,7 @@ const DetailedMultipleChoiceChartCard: FC<Props> = ({
   chartTheme,
   hideCP,
   forecastAvailability,
+  onLegendHeightChange,
 }) => {
   const t = useTranslations();
 
@@ -50,13 +51,26 @@ const DetailedMultipleChoiceChartCard: FC<Props> = ({
   const openTime = getPostDrivenTime(question.open_time);
   const isClosed = actualCloseTime ? actualCloseTime < Date.now() : false;
 
+  const maxVisibleCheckboxes = useMemo(
+    () => getMaxVisibleCheckboxes(embedMode),
+    [embedMode]
+  );
+
+  const generateList = useCallback(
+    (q: QuestionWithMultipleChoiceForecasts) =>
+      generateChoiceItemsFromMultipleChoiceForecast(q, {
+        activeCount: maxVisibleCheckboxes,
+      }),
+    [maxVisibleCheckboxes]
+  );
+
   const [choiceItems, setChoiceItems] = useState<ChoiceItem[]>(
     generateList(question)
   );
 
   useEffect(() => {
     setChoiceItems(generateList(question));
-  }, [question]);
+  }, [question, generateList]);
 
   const timestamps = useMemo(() => {
     if (!forecastAvailability?.cpRevealsOn) {
@@ -68,6 +82,7 @@ const DetailedMultipleChoiceChartCard: FC<Props> = ({
 
     return choiceItems[0]?.userTimestamps ?? [];
   }, [choiceItems, forecastAvailability]);
+
   const userTimestamps = useMemo(
     () => choiceItems[0]?.userTimestamps ?? [],
     [choiceItems]
@@ -81,6 +96,7 @@ const DetailedMultipleChoiceChartCard: FC<Props> = ({
       findPreviousTimestamp(timestamps, cursorTimestamp)
     );
   }, [timestamps, cursorTimestamp]);
+
   const userCursorIndex = useMemo(() => {
     return userTimestamps.indexOf(
       findPreviousTimestamp(userTimestamps, cursorTimestamp)
@@ -146,6 +162,7 @@ const DetailedMultipleChoiceChartCard: FC<Props> = ({
         }),
     [choiceItems, aggregationCursorIndex, getOptionTooltipValue]
   );
+
   const tooltipUserChoices = useMemo<ChoiceTooltipItem[]>(() => {
     return choiceItems
       .filter(({ active }) => active)
@@ -166,6 +183,39 @@ const DetailedMultipleChoiceChartCard: FC<Props> = ({
     userCursorIndex,
   ]);
 
+  const embedChoiceItems = useMemo(() => {
+    if (!embedMode) return choiceItems;
+    const othersLabel = "Others";
+
+    return buildEmbedChoicesWithOthers(
+      choiceItems,
+      maxVisibleCheckboxes,
+      othersLabel
+    );
+  }, [choiceItems, embedMode, maxVisibleCheckboxes]);
+
+  if (embedMode) {
+    return (
+      <MultipleChoiceTile
+        timestamps={timestamps}
+        choices={embedChoiceItems}
+        visibleChoicesCount={embedChoiceItems.length}
+        question={question}
+        hideCP={hideCP}
+        actualCloseTime={actualCloseTime}
+        openTime={openTime}
+        forecastAvailability={forecastAvailability}
+        canPredict={false}
+        showChart
+        chartHeight={chartHeight}
+        onLegendHeightChange={onLegendHeightChange}
+        onCursorChange={handleCursorChange}
+        withHoverTooltip={false}
+        showCursorLabel={false}
+      />
+    );
+  }
+
   return (
     <MultiChoicesChartView
       questionType={question.type}
diff --git a/front_end/src/components/detailed_question_card/embeds.ts b/front_end/src/components/detailed_question_card/embeds.ts
new file mode 100644
index 0000000000..3b51e62dbe
--- /dev/null
+++ b/front_end/src/components/detailed_question_card/embeds.ts
@@ -0,0 +1,60 @@
+import { METAC_COLORS } from "@/constants/colors";
+import { ChoiceItem } from "@/types/choices";
+import { ThemeColor } from "@/types/theme";
+
+export const getMaxVisibleCheckboxes = (embedMode: boolean): number => {
+  if (!embedMode) return 3;
+  return 4;
+};
+
+const OTHERS_COLOR: ThemeColor = METAC_COLORS.gray[400];
+
+export function buildEmbedChoicesWithOthers(
+  choices: ChoiceItem[],
+  baseCount: number,
+  othersLabel: string
+): ChoiceItem[] {
+  if (choices.length <= baseCount) return choices;
+
+  const head = choices.slice(0, baseCount);
+  const tail = choices.slice(baseCount);
+  const aggLen = Math.max(
+    ...tail.map((c) => c.aggregationValues?.length ?? 0),
+    0
+  );
+  const aggregationValues = Array.from({ length: aggLen }, (_, i) =>
+    tail.reduce((sum, c) => sum + (c.aggregationValues?.[i] ?? 0), 0)
+  );
+
+  const userLen = Math.max(...tail.map((c) => c.userValues?.length ?? 0), 0);
+  const userValues: (number | null)[] =
+    userLen > 0
+      ? Array.from({ length: userLen }, (_, i) =>
+          tail.reduce((sum, c) => sum + (c.userValues?.[i] ?? 0), 0)
+        )
+      : [];
+
+  const template = tail[0];
+
+  const others: ChoiceItem = {
+    ...template,
+    choice: othersLabel,
+    color: OTHERS_COLOR,
+    aggregationValues,
+    userValues,
+    resolution: null,
+    displayedResolution: null,
+    active: true,
+    highlighted: template?.highlighted ?? false,
+    aggregationTimestamps: template?.aggregationTimestamps ?? [],
+    aggregationMinValues:
+      template?.aggregationMinValues?.map((v) => v ?? 0) ?? [],
+    aggregationMaxValues:
+      template?.aggregationMaxValues?.map((v) => v ?? 0) ?? [],
+    userTimestamps: template?.userTimestamps ?? [],
+    aggregationForecasterCounts:
+      template?.aggregationForecasterCounts?.map((v) => v ?? 0) ?? [],
+  };
+
+  return [...head, others];
+}
diff --git a/front_end/src/components/post_card/multiple_choice_tile/choice_option.tsx b/front_end/src/components/post_card/multiple_choice_tile/choice_option.tsx
index 109a0f34eb..e21b2fc7a3 100644
--- a/front_end/src/components/post_card/multiple_choice_tile/choice_option.tsx
+++ b/front_end/src/components/post_card/multiple_choice_tile/choice_option.tsx
@@ -1,6 +1,7 @@
 import { isNil } from "lodash";
 import React, { FC } from "react";
 
+import { useIsEmbedMode } from "@/app/(embed)/questions/components/question_view_mode_context";
 import ChoiceIcon from "@/components/choice_icon";
 import ChoiceResolutionIcon from "@/components/choice_resolution_icon";
 import { Resolution } from "@/types/post";
@@ -56,6 +57,7 @@ const ChoiceOption: FC<Props> = ({
     : resolution;
 
   const hasValue = !isNil(values.at(-1));
+  const isEmbed = useIsEmbedMode();
 
   return (
     <div
@@ -64,7 +66,8 @@ const ChoiceOption: FC<Props> = ({
         "flex h-auto flex-row items-center self-stretch text-gray-900 dark:text-gray-900-dark",
         {
           "text-gray-800 dark:text-gray-800-dark": !hasValue,
-        }
+        },
+        isEmbed && "pl-0.5"
       )}
     >
       {withIcon && (
@@ -79,6 +82,7 @@ const ChoiceOption: FC<Props> = ({
       <div
         className={cn(
           "resize-label line-clamp-2 min-w-0 flex-1 pr-2.5 text-left text-sm font-normal leading-4",
+          isEmbed && "line-clamp-1",
           labelClassName
         )}
       >
diff --git a/front_end/src/components/post_card/multiple_choice_tile/index.tsx b/front_end/src/components/post_card/multiple_choice_tile/index.tsx
index f37043525d..5ff0152399 100644
--- a/front_end/src/components/post_card/multiple_choice_tile/index.tsx
+++ b/front_end/src/components/post_card/multiple_choice_tile/index.tsx
@@ -1,9 +1,10 @@
 "use client";
 
 import { isNil } from "lodash";
-import React, { FC, useCallback, useMemo } from "react";
+import { FC, useCallback, useEffect, useMemo } from "react";
 import { VictoryThemeDefinition } from "victory";
 
+import { useIsEmbedMode } from "@/app/(embed)/questions/components/question_view_mode_context";
 import FanChart from "@/components/charts/fan_chart";
 import GroupChart from "@/components/charts/group_chart";
 import MultipleChoiceChart from "@/components/charts/multiple_choice_chart";
@@ -15,9 +16,10 @@ import useCardReaffirmContext from "@/components/post_card/reaffirm_context";
 import PredictionChip from "@/components/prediction_chip";
 import { ContinuousQuestionTypes } from "@/constants/questions";
 import { useAuth } from "@/contexts/auth_context";
+import useChartTooltip from "@/hooks/use_chart_tooltip";
 import useContainerSize from "@/hooks/use_container_size";
 import { ForecastPayload } from "@/services/api/questions/questions.server";
-import { TimelineChartZoomOption } from "@/types/charts";
+import { TickFormat, TimelineChartZoomOption } from "@/types/charts";
 import { ChoiceItem } from "@/types/choices";
 import { PostGroupOfQuestions, PostStatus, QuestionStatus } from "@/types/post";
 import {
@@ -42,6 +44,10 @@ type BaseProps = {
   showChart?: boolean;
   minimalistic?: boolean;
   optionsLimit?: number;
+  yLabel?: string;
+  onCursorChange?: (value: number, format: TickFormat) => void;
+  withHoverTooltip?: boolean;
+  showCursorLabel?: boolean;
 };
 
 type QuestionProps = {
@@ -69,6 +75,7 @@ type ContinuousMultipleChoiceTileProps = BaseProps &
     question?: QuestionWithMultipleChoiceForecasts;
     scaling?: Scaling | undefined;
     forecastAvailability?: ForecastAvailability;
+    onLegendHeightChange?: (height: number) => void;
   };
 
 const CHART_HEIGHT = 100;
@@ -87,15 +94,34 @@ export const MultipleChoiceTile: FC<ContinuousMultipleChoiceTileProps> = ({
   groupType,
   group,
   scaling,
+  yLabel,
+  onCursorChange,
   hideCP,
   forecastAvailability,
   canPredict,
   showChart = true,
   minimalistic = false,
+  onLegendHeightChange,
+  withHoverTooltip = true,
+  showCursorLabel = true,
 }) => {
+  const enableTooltip = withHoverTooltip;
+  const { getReferenceProps, refs } = useChartTooltip();
+  const attachRef = useCallback(
+    (node: HTMLElement | null) => {
+      if (!enableTooltip) return;
+      if (node) refs.setReference(node);
+    },
+    [enableTooltip, refs]
+  );
   const { user } = useAuth();
   const { onReaffirm } = useCardReaffirmContext();
   const { ref, height } = useContainerSize<HTMLDivElement>();
+
+  const { ref: tileRef, width: tileWidth } = useContainerSize<HTMLDivElement>();
+  const isEmbed = useIsEmbedMode();
+  const isCompactEmbed = isEmbed && !!tileWidth && tileWidth < 400;
+
   // when resolution chip is shown we want to hide the chart and display the chip
   // (e.g. multiple-choice question on questions feed)
   // otherwise, resolution status will be populated near the every choice
@@ -115,6 +141,11 @@ export const MultipleChoiceTile: FC<ContinuousMultipleChoiceTileProps> = ({
     [group?.questions, groupType, question, user]
   );
 
+  useEffect(() => {
+    if (!onLegendHeightChange) return;
+    onLegendHeightChange(height);
+  }, [height, groupType, onLegendHeightChange]);
+
   const handleReaffirmClick = useCallback(() => {
     if (!onReaffirm || !canReaffirm) return;
 
@@ -123,17 +154,26 @@ export const MultipleChoiceTile: FC<ContinuousMultipleChoiceTileProps> = ({
 
   return (
     <div
+      ref={tileRef}
       className={cn(
-        "MultipleChoiceTile ml-0 flex w-full flex-col items-start",
+        "MultipleChoiceTile ml-0 w-full items-start",
         {
-          "md:grid md:grid-cols-5": showChart,
-          "gap-5 md:gap-8": !minimalistic,
+          "flex flex-col": isEmbed && isCompactEmbed,
+          "grid grid-cols-2": isEmbed && !isCompactEmbed,
+          "flex grid-cols-5 flex-col md:grid": !isEmbed && showChart,
+        },
+        {
+          "gap-3": isEmbed && isCompactEmbed && !minimalistic,
+          "gap-5": isEmbed && !isCompactEmbed && !minimalistic,
+          "gap-5 md:gap-8": !isEmbed && !minimalistic,
         }
       )}
     >
       <div
-        className={cn("resize-container w-full", {
-          "md:col-span-2": !minimalistic || isResolvedView,
+        className={cn("resize-container w-full min-w-0", {
+          "col-span-1": isEmbed && !isCompactEmbed,
+          "col-span-2": isEmbed && isCompactEmbed,
+          "md:col-span-2": !isEmbed && (!minimalistic || isResolvedView),
         })}
       >
         {isResolvedView ? (
@@ -148,49 +188,68 @@ export const MultipleChoiceTile: FC<ContinuousMultipleChoiceTileProps> = ({
               hideCP={hideCP}
               canPredict={canPredict && canReaffirm}
               onReaffirm={onReaffirm ? handleReaffirmClick : undefined}
+              layout={isEmbed && isCompactEmbed ? "wrap" : "column"}
             />
           )
         )}
       </div>
-      {showChart && !isResolvedView && (
+      {showChart && !isCompactEmbed && !isResolvedView && (
         <div
-          className={cn("relative w-full md:col-span-5", {
-            "md:col-span-3": !minimalistic || isResolvedView,
+          className={cn("relative w-full min-w-0", {
+            "col-span-1": isEmbed && !isCompactEmbed,
+            "col-span-2": isEmbed && isCompactEmbed,
+            "md:col-span-5": !isEmbed,
+            "md:col-span-3": !isEmbed && (!minimalistic || isResolvedView),
           })}
         >
-          {isNil(group) ? (
-            <MultipleChoiceChart
-              timestamps={timestamps}
-              actualCloseTime={actualCloseTime}
-              choiceItems={choices}
-              height={chartHeight ?? Math.max(height, CHART_HEIGHT)}
-              extraTheme={chartTheme}
-              defaultZoom={defaultChartZoom}
-              withZoomPicker={withZoomPicker}
-              scaling={scaling}
-              forecastAvailability={forecastAvailability}
-              openTime={openTime}
-              hideCP={hideCP}
-              forFeedPage
-            />
-          ) : (
-            <GroupChart
-              questionType={groupType}
-              timestamps={timestamps}
-              actualCloseTime={actualCloseTime}
-              choiceItems={choices}
-              height={chartHeight ?? Math.max(height, CHART_HEIGHT)}
-              extraTheme={chartTheme}
-              defaultZoom={defaultChartZoom}
-              withZoomPicker={withZoomPicker}
-              scaling={scaling}
-              forecastAvailability={forecastAvailability}
-              forceShowLinePoints={true}
-              openTime={openTime}
-              hideCP={hideCP}
-              forFeedPage
-            />
-          )}
+          <div
+            ref={enableTooltip ? refs.setReference : undefined}
+            {...(enableTooltip ? getReferenceProps() : {})}
+            className="relative"
+          >
+            {isNil(group) ? (
+              <MultipleChoiceChart
+                timestamps={timestamps}
+                actualCloseTime={actualCloseTime}
+                choiceItems={choices}
+                height={chartHeight ?? Math.max(height, CHART_HEIGHT)}
+                extraTheme={chartTheme}
+                defaultZoom={defaultChartZoom}
+                withZoomPicker={withZoomPicker}
+                scaling={scaling}
+                forecastAvailability={forecastAvailability}
+                openTime={openTime}
+                hideCP={hideCP}
+                yLabel={yLabel}
+                isEmbedded={isEmbed}
+                onCursorChange={onCursorChange}
+                attachRef={attachRef}
+                forFeedPage
+              />
+            ) : (
+              <GroupChart
+                questionType={groupType}
+                timestamps={timestamps}
+                actualCloseTime={actualCloseTime}
+                choiceItems={choices}
+                height={chartHeight ?? Math.max(height, CHART_HEIGHT)}
+                extraTheme={chartTheme}
+                defaultZoom={defaultChartZoom}
+                withZoomPicker={withZoomPicker}
+                scaling={scaling}
+                forecastAvailability={forecastAvailability}
+                openTime={openTime}
+                hideCP={hideCP}
+                yLabel={yLabel}
+                onCursorChange={onCursorChange}
+                showCursorLabel={showCursorLabel}
+                forceShowLinePoints={!isEmbed}
+                attachRef={attachRef}
+                isEmbedded={isEmbed}
+                forFeedPage
+              />
+            )}
+          </div>
         </div>
       )}
     </div>
diff --git a/front_end/src/components/post_card/multiple_choice_tile/multiple_choice_tile_legend.tsx b/front_end/src/components/post_card/multiple_choice_tile/multiple_choice_tile_legend.tsx
index 6822d1bf0e..1320b1aa28 100644
--- a/front_end/src/components/post_card/multiple_choice_tile/multiple_choice_tile_legend.tsx
+++ b/front_end/src/components/post_card/multiple_choice_tile/multiple_choice_tile_legend.tsx
@@ -6,6 +6,7 @@ import React, { FC, RefObject } from "react";
 import ReaffirmButton from "@/components/post_card/reaffirm_button";
 import { ChoiceItem } from "@/types/choices";
 import { QuestionType } from "@/types/question";
+import cn from "@/utils/core/cn";
 
 import ChoiceOption from "./choice_option";
 
@@ -19,6 +20,7 @@ type Props = {
   canPredict?: boolean;
   ref?: RefObject<HTMLDivElement | null>;
   withChoiceIcon?: boolean;
+  layout?: "column" | "wrap";
 };
 
 const MultipleChoiceTileLegend: FC<Props> = ({
@@ -31,14 +33,23 @@ const MultipleChoiceTileLegend: FC<Props> = ({
   canPredict = false,
   ref,
   withChoiceIcon = true,
+  layout = "column",
 }) => {
   const t = useTranslations();
 
   const visibleChoices = choices.slice(0, visibleChoicesCount);
   const otherItemsCount = choices.length - visibleChoices.length;
+  const isWrap = layout === "wrap";
 
   return (
-    <div className="embed-gap flex flex-col gap-2.5" ref={ref}>
+    <div
+      ref={ref}
+      className={cn(
+        isWrap
+          ? "flex flex-row flex-wrap gap-x-4 gap-y-2"
+          : "embed-gap flex flex-col gap-2.5"
+      )}
+    >
       {visibleChoices.map(
         ({
           choice,
@@ -49,29 +60,47 @@ const MultipleChoiceTileLegend: FC<Props> = ({
           scaling,
           actual_resolve_time,
         }) => (
-          <ChoiceOption
+          <div
             key={`choice-option-${choice}`}
-            choice={choice}
-            color={color}
-            values={hideCP ? [null as unknown as number] : aggregationValues}
-            resolution={resolution}
-            displayedResolution={displayedResolution}
-            questionType={questionType}
-            scaling={scaling}
-            labelClassName={optionLabelClassName}
-            actual_resolve_time={actual_resolve_time}
-            withIcon={withChoiceIcon}
-          />
+            className={cn(isWrap && "min-w-0 flex-none overflow-hidden")}
+          >
+            <ChoiceOption
+              choice={choice}
+              color={color}
+              values={hideCP ? [null as unknown as number] : aggregationValues}
+              resolution={resolution}
+              displayedResolution={displayedResolution}
+              questionType={questionType}
+              scaling={scaling}
+              labelClassName={optionLabelClassName}
+              actual_resolve_time={actual_resolve_time}
+              withIcon={withChoiceIcon}
+            />
+          </div>
         )
       )}
+
       {otherItemsCount > 0 && (
-        <div className="flex flex-row items-center justify-between text-gray-600 dark:text-gray-600-dark">
+        <div
+          className={cn(
+            "flex flex-row items-center justify-between text-gray-600 dark:text-gray-600-dark",
+            isWrap && "col-span-2"
+          )}
+        >
           <div className="flex flex-row items-center">
-            <div className="self-center py-0 pr-3.5 text-center leading-none">
+            <div
+              className={cn(
+                "self-center py-0 pr-3.5 text-center leading-none",
+                layout === "wrap" && "h-4 pr-3"
+              )}
+            >
               <FontAwesomeIcon
                 icon={faEllipsis}
                 size="xs"
-                className="resize-ellipsis w-[10px]"
+                className={cn(
+                  "resize-ellipsis w-[10px]",
+                  layout === "wrap" && "h-4"
+                )}
               />
             </div>
             <div className="resize-label whitespace-nowrap pr-1.5 text-left text-sm font-normal leading-4">
@@ -87,8 +116,9 @@ const MultipleChoiceTileLegend: FC<Props> = ({
           )}
         </div>
       )}
+
       {!otherItemsCount && canPredict && !!onReaffirm && (
-        <div>
+        <div className={cn(isWrap && "col-span-2")}>
           <ReaffirmButton
             onClick={onReaffirm}
             className="resize-label flex text-left text-sm leading-4"
diff --git a/front_end/src/components/post_card/question_tile/continuous_cp_bar.tsx b/front_end/src/components/post_card/question_tile/continuous_cp_bar.tsx
index ed95b16c3e..9aedd5d353 100644
--- a/front_end/src/components/post_card/question_tile/continuous_cp_bar.tsx
+++ b/front_end/src/components/post_card/question_tile/continuous_cp_bar.tsx
@@ -1,8 +1,12 @@
 import { isNil } from "lodash";
-import React, { FC } from "react";
+import { FC } from "react";
 
+import {
+  useEmbedContainerWidth,
+  useIsEmbedMode,
+} from "@/app/(embed)/questions/components/question_view_mode_context";
 import { QuestionStatus } from "@/types/post";
-import { QuestionWithNumericForecasts } from "@/types/question";
+import { QuestionType, QuestionWithNumericForecasts } from "@/types/question";
 import cn from "@/utils/core/cn";
 import {
   getDiscreteValueOptions,
@@ -13,16 +17,23 @@ type Props = {
   question: QuestionWithNumericForecasts;
   size?: "md" | "lg";
   variant?: "feed" | "question";
+  colorOverride?: string;
 };
 
 const ContinuousCPBar: FC<Props> = ({
   question,
   size = "md",
   variant = "feed",
+  colorOverride,
 }) => {
   const latest =
     question.aggregations[question.default_aggregation_method]?.latest;
 
+  const isDate = question.type === QuestionType.Date;
+  const isEmbed = useIsEmbedMode();
+  const w = useEmbedContainerWidth();
+  const isEmbedBelow376 = isEmbed && (w ?? 0) > 0 && (w ?? 0) < 376;
+
   if (!latest) {
     return null;
   }
@@ -41,7 +52,7 @@ const ContinuousCPBar: FC<Props> = ({
               latest?.interval_upper_bounds?.[0] as number,
             ]
           : [],
-      unit: question.unit,
+      unit: isEmbedBelow376 ? question.unit : isEmbed ? "" : question.unit,
       actual_resolve_time: question.actual_resolve_time ?? null,
       discreteValueOptions,
     },
@@ -49,32 +60,47 @@ const ContinuousCPBar: FC<Props> = ({
   );
   const displayValueChunks = displayValue.split("\n");
   const [centerLabel, intervalLabel] = displayValueChunks;
+  const isClosed = question.status === QuestionStatus.CLOSED;
+  const accentStyle =
+    !isClosed && colorOverride
+      ? ({ color: colorOverride } as const)
+      : undefined;
 
   return (
     <div
       className={cn(
-        "relative flex flex-col justify-center gap-0 pt-0.5 tabular-nums text-olive-900 dark:text-olive-900-dark md:gap-0.5 md:pt-1",
+        "relative flex flex-col justify-center gap-0 pt-0.5 tabular-nums md:gap-0.5 md:pt-1",
         {
-          "text-gray-800 dark:text-gray-800-dark":
-            question.status === QuestionStatus.CLOSED,
+          "text-olive-900 dark:text-olive-900-dark": !isClosed && !accentStyle,
+          "text-gray-800 dark:text-gray-800-dark": isClosed,
           // Feed variant: center on mobile, left on desktop
           "text-center md:text-left": variant === "feed",
           // Question variant: always center
           "text-center": variant === "question",
+          "gap-0.5 md:gap-0.5": isEmbed,
         }
       )}
     >
       <div
+        style={accentStyle}
         className={cn("text-sm font-bold md:text-base", {
           "mb-1 text-base": size === "lg",
+          "mb-0 truncate text-sm md:text-sm": isEmbed,
+          "text-olive-800 dark:text-olive-800-dark": isEmbed && !accentStyle,
+          "text-[18px] font-bold text-olive-900 dark:text-olive-900-dark":
+            isEmbedBelow376,
         })}
       >
         {centerLabel}
       </div>
-      {!isNil(intervalLabel) && (
+      {!isNil(intervalLabel) && !isEmbedBelow376 && (
         <div
+          style={accentStyle}
           className={cn("text-[10px] font-normal tabular-nums md:text-xs", {
             "text-sm": size === "lg",
+            "mb-0 text-sm md:text-sm": isEmbed,
+            "whitespace-normal break-words": isEmbed && isDate,
+            truncate: isEmbed && !isDate,
           })}
         >
           {intervalLabel}
diff --git a/front_end/src/hooks/use_app_theme.ts b/front_end/src/hooks/use_app_theme.ts
index 05b29d103b..791bdb9b1e 100644
--- a/front_end/src/hooks/use_app_theme.ts
+++ b/front_end/src/hooks/use_app_theme.ts
@@ -1,5 +1,11 @@
 import { useTheme } from "next-themes";
-import { Dispatch, SetStateAction, useCallback, useState } from "react";
+import {
+  Dispatch,
+  SetStateAction,
+  useCallback,
+  useMemo,
+  useState,
+} from "react";
 
 import { updateProfileAction } from "@/app/(main)/accounts/profile/actions";
 import { useAuth } from "@/contexts/auth_context";
@@ -16,6 +22,10 @@ const useAppTheme = () => {
   const [isSyncing, setIsSyncing] = useState<boolean>();
   const { user, setUser } = useAuth();
 
+  const theme = useMemo(() => {
+    return (forcedTheme ?? resolvedTheme ?? "light") as AppTheme;
+  }, [forcedTheme, resolvedTheme]);
+
   const setTheme = useCallback(
     async (newTheme: AppTheme) => {
       // Immediately update NextTheme for instant visual feedback
@@ -35,20 +45,12 @@ const useAppTheme = () => {
   );
 
   const getThemeColor = useCallback(
-    (color: ThemeColor) => {
-      if (resolvedTheme === "dark") {
-        return color.dark;
-      }
-
-      return color.DEFAULT;
-    },
-    [resolvedTheme]
+    (color: ThemeColor) => (theme === "dark" ? color.dark : color.DEFAULT),
+    [theme]
   );
 
   return {
-    // Currently active theme respecting Forced selection
-    // Could be dark or light
-    theme: (forcedTheme ?? resolvedTheme) as AppTheme,
+    theme,
     // Currently selected theme. Could be dark, light or system
     themeChoice: themeChoice ?? AppTheme.System,
     isSyncing,
diff --git a/front_end/src/utils/questions/units.ts b/front_end/src/utils/questions/units.ts
index 04028b52b8..68a0239cc9 100644
--- a/front_end/src/utils/questions/units.ts
+++ b/front_end/src/utils/questions/units.ts
@@ -8,3 +8,21 @@ export const formatValueUnit = (value: string, unit?: string) => {
 const QUESTION_UNIT_COMPACT_LENGTH = 3;
 export const isUnitCompact = (unit?: string) =>
   unit && unit.length <= QUESTION_UNIT_COMPACT_LENGTH;
+
+export function getCommonUnit(
+  questions: Array<{
+    unit?: string | null;
+    scaling?: { unit?: string | null } | null;
+  }>
+): string | null {
+  const units = questions
+    .map((q) => (q.unit ?? q.scaling?.unit ?? "").trim())
+    .filter(Boolean);
+
+  if (units.length === 0) return null;
+
+  const first = units[0];
+  if (first === undefined) return null;
+
+  return units.every((u) => u === first) ? first : null;
+}
diff --git a/front_end/src/utils/resolve_color.ts b/front_end/src/utils/resolve_color.ts
new file mode 100644
index 0000000000..8164828536
--- /dev/null
+++ b/front_end/src/utils/resolve_color.ts
@@ -0,0 +1,21 @@
+import { ThemeColor } from "@/types/theme";
+
+export type ThemeOrCssColor = ThemeColor | string;
+
+export const isCssColorString = (v: unknown): v is string =>
+  typeof v === "string" && v.trim().length > 0;
+
+export const isThemeColor = (v: unknown): v is ThemeColor => {
+  if (!v || typeof v !== "object") return false;
+  const obj = v as { DEFAULT?: unknown; dark?: unknown };
+  return typeof obj.DEFAULT === "string" && typeof obj.dark === "string";
+};
+
+export const resolveToCssColor = (
+  getThemeColor: (c: ThemeColor) => string,
+  v?: ThemeOrCssColor
+): string | undefined => {
+  if (isCssColorString(v)) return v;
+  if (isThemeColor(v)) return getThemeColor(v);
+  return undefined;
+};