diff --git a/front_end/src/components/charts/continuous_area_chart.tsx b/front_end/src/components/charts/continuous_area_chart.tsx
index c671eb2094..24f6db1b21 100644
--- a/front_end/src/components/charts/continuous_area_chart.tsx
+++ b/front_end/src/components/charts/continuous_area_chart.tsx
@@ -94,6 +94,7 @@ type Props = {
   withTodayLine?: boolean;
   globalScaling?: Scaling;
   outlineUser?: boolean;
+  centerOOBResolution?: boolean;
 };
 
 const ContinuousAreaChart: FC<Props> = ({
@@ -113,6 +114,7 @@ const ContinuousAreaChart: FC<Props> = ({
   withTodayLine = true,
   globalScaling,
   outlineUser = false,
+  centerOOBResolution = false,
 }) => {
   const locale = useLocale();
   const { ref: chartContainerRef, width: containerWidth } =
@@ -825,6 +827,47 @@ const ContinuousAreaChart: FC<Props> = ({
               />
             ))
           )}
+
+          {/* Today's date dot for date questions */}
+          {question.type === QuestionType.Date && withTodayLine && (
+            <VictoryScatter
+              data={[
+                {
+                  x: unscaleNominalLocation(
+                    Math.floor(Date.now() / 1000),
+                    question.scaling
+                  ),
+                  y: yDomain[0], // Bottom of the chart
+                  symbol: "circle",
+                  size: 3,
+                },
+              ]}
+              style={{
+                data: {
+                  fill: getThemeColor(METAC_COLORS.blue["700"]),
+                  stroke: "none",
+                },
+              }}
+            />
+          )}
+
+          {question.type === QuestionType.Date &&
+            todayLabelPosition &&
+            withTodayLine && (
+              <VictoryPortal>
+                <VictoryLabel
+                  x={todayLabelPosition.x}
+                  y={height - BOTTOM_PADDING - 12} // Position above the dot
+                  text="Today"
+                  style={{
+                    fill: getThemeColor(METAC_COLORS.blue["700"]),
+                    fontSize: 12,
+                  }}
+                  textAnchor="middle"
+                />
+              </VictoryPortal>
+            )}
+
           {/* Resolution point */}
           {resX != null && resPlacement === "in" && (
             <VictoryScatter
@@ -849,8 +892,11 @@ const ContinuousAreaChart: FC<Props> = ({
           {resX != null &&
             resPlacement === "in" &&
             withResolutionChip &&
-            (question.type === QuestionType.Discrete ||
-              question.type === QuestionType.Numeric) && (
+            [
+              QuestionType.Numeric,
+              QuestionType.Discrete,
+              QuestionType.Date,
+            ].includes(question.type) && (
               <VictoryScatter
                 data={[
                   {
@@ -875,6 +921,42 @@ const ContinuousAreaChart: FC<Props> = ({
               />
             )}
 
+          {/* Resolution chip for out of bounds resolution */}
+          {resX != null &&
+            resPlacement !== "in" &&
+            withResolutionChip &&
+            [
+              QuestionType.Numeric,
+              QuestionType.Discrete,
+              QuestionType.Date,
+            ].includes(question.type) && (
+              <VictoryScatter
+                data={[
+                  {
+                    x:
+                      resPlacement === "left"
+                        ? Math.min(...xDomain)
+                        : Math.max(...xDomain),
+                    y: centerOOBResolution ? Math.max(...yDomain) / 2 : 0,
+                    placement: resPlacement,
+                  },
+                ]}
+                dataComponent={
+                  <VictoryPortal>
+                    <ChartValueBox
+                      rightPadding={0}
+                      chartWidth={chartWidth}
+                      isCursorActive={false}
+                      isDistributionChip
+                      colorOverride={METAC_COLORS.purple["800"]}
+                      resolution={formattedResolution}
+                      textAlignToSide={centerOOBResolution}
+                    />
+                  </VictoryPortal>
+                }
+              />
+            )}
+
           {resX != null && resPlacement && resPlacement !== "in" && (
             <VictoryPortal>
               <VictoryScatter
@@ -884,62 +966,16 @@ const ContinuousAreaChart: FC<Props> = ({
                       resPlacement === "left"
                         ? Math.min(...xDomain)
                         : Math.max(...xDomain),
-                    y: yDomain[1] - (yDomain[1] - yDomain[0]) * 0.04,
-                    placement: resPlacement === "left" ? "above" : "below",
+                    y: centerOOBResolution ? Math.max(...yDomain) / 2 : 0,
+                    placement: resPlacement,
                     primary: METAC_COLORS.purple["800"],
                     secondary: METAC_COLORS.purple["500"],
                   },
                 ]}
-                dataComponent={
-                  <ResolutionDiamond
-                    hoverable={false}
-                    axisPadPx={3}
-                    rotateDeg={resPlacement === "left" ? 90 : -90}
-                    refProps={{}}
-                  />
-                }
+                dataComponent={<ResolutionDiamond hoverable={false} />}
               />
             </VictoryPortal>
           )}
-          {/* Today's date dot for date questions */}
-          {question.type === QuestionType.Date && withTodayLine && (
-            <VictoryScatter
-              data={[
-                {
-                  x: unscaleNominalLocation(
-                    Math.floor(Date.now() / 1000),
-                    question.scaling
-                  ),
-                  y: yDomain[0], // Bottom of the chart
-                  symbol: "circle",
-                  size: 3,
-                },
-              ]}
-              style={{
-                data: {
-                  fill: getThemeColor(METAC_COLORS.blue["700"]),
-                  stroke: "none",
-                },
-              }}
-            />
-          )}
-
-          {question.type === QuestionType.Date &&
-            todayLabelPosition &&
-            withTodayLine && (
-              <VictoryPortal>
-                <VictoryLabel
-                  x={todayLabelPosition.x}
-                  y={height - BOTTOM_PADDING - 12} // Position above the dot
-                  text="Today"
-                  style={{
-                    fill: getThemeColor(METAC_COLORS.blue["700"]),
-                    fontSize: 12,
-                  }}
-                  textAnchor="middle"
-                />
-              </VictoryPortal>
-            )}
 
           {/* Manually render cursor component when cursor is on edge */}
           {!isNil(cursorEdge) && (
diff --git a/front_end/src/components/charts/fan_chart.tsx b/front_end/src/components/charts/fan_chart.tsx
index 4fa1c9b17d..9638551796 100644
--- a/front_end/src/components/charts/fan_chart.tsx
+++ b/front_end/src/components/charts/fan_chart.tsx
@@ -19,6 +19,7 @@ import {
 import ChartFanTooltip from "@/components/charts/primitives/chart_fan_tooltip";
 import FanPoint from "@/components/charts/primitives/fan_point";
 import PredictionWithRange from "@/components/charts/primitives/prediction_with_range";
+import ResolutionDiamond from "@/components/charts/primitives/resolution_diamond";
 import ForecastAvailabilityChartOverflow from "@/components/post_card/chart_overflow";
 import { darkTheme, lightTheme } from "@/constants/chart_theme";
 import { METAC_COLORS } from "@/constants/colors";
@@ -457,27 +458,48 @@ const FanChart: FC<Props> = ({
             />
           )}
 
-          {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}
-                />
-              }
-            />
-          ))}
+          {resolutionPoints.map((point) => {
+            if (
+              point.placement &&
+              ["below", "above"].includes(point.placement)
+            ) {
+              return (
+                <VictoryPortal key={`res-portal-${point.x}`}>
+                  <VictoryScatter
+                    key={`res-${point.x}`}
+                    data={[
+                      {
+                        ...point,
+                        y: point.placement === "below" ? 0 : 1,
+                      },
+                    ]}
+                    dataComponent={<ResolutionDiamond hoverable={false} />}
+                  />
+                </VictoryPortal>
+              );
+            }
+            return (
+              <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}
+                  />
+                }
+              />
+            );
+          })}
           {emptyPoints.map((point) => (
             <VictoryScatter
               key={`empty-${point.x}`}
@@ -514,6 +536,7 @@ type FanGraphPoint = {
   y: number;
   resolved?: boolean;
   unsuccessfullyResolved?: boolean;
+  placement?: "in" | "below" | "above";
 };
 
 function buildChartData({
@@ -593,11 +616,21 @@ function buildChartData({
             ? getResolutionPosition({ question: option.question, scaling })
             : NaN;
 
+      const isAboveUpperBound =
+        option.question?.resolution === "above_upper_bound" || yVal > 1;
+      const isBelowLowerBound =
+        option.question?.resolution === "below_lower_bound" || yVal < 0;
+
       resolutionPoints.push({
         x: option.name,
         y: yVal,
         unsuccessfullyResolved: false,
         resolved: true,
+        placement: isAboveUpperBound
+          ? "above"
+          : isBelowLowerBound
+            ? "below"
+            : "in",
       });
     }
 
diff --git a/front_end/src/components/charts/fan_chart_variants.ts b/front_end/src/components/charts/fan_chart_variants.ts
index 3ee239520e..1b453e9b0a 100644
--- a/front_end/src/components/charts/fan_chart_variants.ts
+++ b/front_end/src/components/charts/fan_chart_variants.ts
@@ -99,8 +99,8 @@ export const fanVariants: Record<FanChartVariant, VariantConfig> = {
       communityPoint: getThemeColor(METAC_COLORS.olive["800"]),
     }),
     resolutionPoint: {
-      size: 8,
-      strokeWidth: 2,
+      size: 10,
+      strokeWidth: 2.5,
       fill: () => "none",
     },
   },
diff --git a/front_end/src/components/charts/group_chart.tsx b/front_end/src/components/charts/group_chart.tsx
index 938b4b1a51..2973ccd96d 100644
--- a/front_end/src/components/charts/group_chart.tsx
+++ b/front_end/src/components/charts/group_chart.tsx
@@ -53,6 +53,7 @@ import ForecastAvailabilityChartOverflow from "../post_card/chart_overflow";
 import ChartContainer from "./primitives/chart_container";
 import ChartCursorLabel from "./primitives/chart_cursor_label";
 import GroupResolutionPoint from "./primitives/group_resolution_point";
+import ResolutionDiamond from "./primitives/resolution_diamond";
 import XTickLabel from "./primitives/x_tick_label";
 
 type Props = {
@@ -515,6 +516,31 @@ const GroupChart: FC<Props> = ({
                   ? METAC_COLORS["mc-option-text"][1]
                   : color;
 
+              if (
+                resolutionPoint.placement &&
+                ["below", "above"].includes(resolutionPoint.placement)
+              ) {
+                return (
+                  <VictoryPortal key={`group-resolution-portal-${index}`}>
+                    <VictoryScatter
+                      key={`group-resolution-${index}`}
+                      data={[
+                        {
+                          x: resolutionPoint?.x,
+                          y: resolutionPoint?.placement === "below" ? 0 : 1,
+                          x1: resolutionPoint?.x1,
+                          y1: resolutionPoint?.y1,
+                          text: resolutionPoint?.text,
+                          placement: resolutionPoint?.placement,
+                          primary: color,
+                        },
+                      ]}
+                      dataComponent={<ResolutionDiamond hoverable={false} />}
+                    />
+                  </VictoryPortal>
+                );
+              }
+
               return (
                 <VictoryScatter
                   key={`group-resolution-${index}`}
@@ -593,6 +619,7 @@ export type ChoiceGraph = {
     text?: string;
     x1?: number;
     y1?: number;
+    placement?: "in" | "below" | "above";
   };
   choice: string;
   color: ThemeColor;
@@ -826,18 +853,26 @@ function buildChartData({
             text,
             x1: lastLineItem?.x,
             y1: lastLineItem?.y ?? undefined,
+            placement:
+              resolution === "below_lower_bound"
+                ? "below"
+                : resolution === "above_upper_bound"
+                  ? "above"
+                  : "in",
           };
         }
 
         if (isFinite(Number(resolution))) {
+          const yPos = scaling
+            ? unscaleNominalLocation(Number(resolution), scaling)
+            : Number(resolution) ?? 0;
           // continuous group case
           item.resolutionPoint = {
             x: resolveTime,
-            y: scaling
-              ? unscaleNominalLocation(Number(resolution), scaling)
-              : Number(resolution) ?? 0,
+            y: yPos,
             x1: lastLineItem?.x,
             y1: lastLineItem?.y ?? undefined,
+            placement: yPos < 0 ? "below" : yPos > 1 ? "above" : "in",
           };
         } else if (
           typeof resolution === "string" &&
@@ -851,10 +886,13 @@ function buildChartData({
             resolveTime,
             scaling,
           });
+
           if (dateResolution) {
+            const yPos = dateResolution.y ?? 0;
             item.resolutionPoint = {
               x: dateResolution.x,
-              y: dateResolution.y ?? 0,
+              y: yPos,
+              placement: yPos < 0 ? "below" : yPos > 1 ? "above" : "in",
               x1: lastLineItem?.x,
               y1: lastLineItem?.y ?? undefined,
             };
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..5637018054 100644
--- a/front_end/src/components/charts/primitives/chart_value_box.tsx
+++ b/front_end/src/components/charts/primitives/chart_value_box.tsx
@@ -8,10 +8,163 @@ import { Resolution } from "@/types/post";
 import { QuestionType } from "@/types/question";
 import { ThemeColor } from "@/types/theme";
 
+const TEXT_PADDING = 6;
+const PLACEMENT_OFFSET_VERTICAL = 4;
+const PLACEMENT_OFFSET_HORIZONTAL = -12;
+const CHIP_HEIGHT = 16;
+const CHIP_FONT_SIZE = 12;
+
+type Placement = "in" | "below" | "above" | "left" | "right";
+
+function getTextAnchor(placement: Placement) {
+  switch (placement) {
+    case "left":
+      return "start";
+    case "right":
+      return "end";
+    default:
+      return "middle";
+  }
+}
+
+function getRectX(
+  placement: Placement,
+  adjustedX: number,
+  textWidth: number,
+  textAlignToSide?: boolean
+) {
+  switch (placement) {
+    case "left":
+      return (
+        adjustedX -
+        (textAlignToSide
+          ? PLACEMENT_OFFSET_HORIZONTAL
+          : PLACEMENT_OFFSET_VERTICAL) +
+        textWidth -
+        TEXT_PADDING / 2
+      );
+    case "right":
+      return (
+        adjustedX +
+        (textAlignToSide
+          ? PLACEMENT_OFFSET_HORIZONTAL
+          : PLACEMENT_OFFSET_VERTICAL) -
+        textWidth +
+        TEXT_PADDING / 2
+      );
+    default:
+      return adjustedX - textWidth / 2;
+  }
+}
+
+function getTextX(
+  placement: Placement,
+  adjustedX: number,
+  textAlignToSide?: boolean
+) {
+  switch (placement) {
+    case "left":
+      return (
+        adjustedX -
+        (textAlignToSide
+          ? PLACEMENT_OFFSET_HORIZONTAL
+          : PLACEMENT_OFFSET_VERTICAL)
+      );
+    case "right":
+      return (
+        adjustedX +
+        (textAlignToSide
+          ? PLACEMENT_OFFSET_HORIZONTAL
+          : PLACEMENT_OFFSET_VERTICAL)
+      );
+    default:
+      return adjustedX;
+  }
+}
+
+function getResolvedX(
+  placement: Placement,
+  adjustedX: number,
+  textAlignToSide?: boolean
+) {
+  switch (placement) {
+    case "left":
+      return (
+        adjustedX -
+        (textAlignToSide
+          ? PLACEMENT_OFFSET_HORIZONTAL
+          : PLACEMENT_OFFSET_VERTICAL) -
+        TEXT_PADDING / 2
+      );
+    case "right":
+      return (
+        adjustedX +
+        (textAlignToSide
+          ? PLACEMENT_OFFSET_HORIZONTAL
+          : PLACEMENT_OFFSET_VERTICAL) +
+        TEXT_PADDING / 2
+      );
+    default:
+      return adjustedX;
+  }
+}
+
+function getTextY(
+  placement: Placement,
+  y: number,
+  isDistributionChip?: boolean,
+  textAlignToSide?: boolean
+) {
+  const baseY =
+    y + CHIP_FONT_SIZE / 10 - (isDistributionChip ? CHIP_HEIGHT : 0);
+  switch (placement) {
+    case "left":
+    case "right":
+      return baseY + (textAlignToSide ? CHIP_HEIGHT : -2);
+    default:
+      return baseY;
+  }
+}
+
+function getResolvedY(
+  placement: Placement,
+  y: number,
+  isDistributionChip?: boolean,
+  textAlignToSide?: boolean
+) {
+  const baseY = y - CHIP_HEIGHT - 1 - (isDistributionChip ? CHIP_HEIGHT : 0);
+  switch (placement) {
+    case "left":
+    case "right":
+      return baseY + (textAlignToSide ? CHIP_HEIGHT + 2 : 0);
+    default:
+      return baseY;
+  }
+}
+
+function getRectY(
+  placement: Placement,
+  y: number,
+  isDistributionChip?: boolean,
+  textAlignToSide?: boolean
+) {
+  const baseY = y - CHIP_HEIGHT / 2 - (isDistributionChip ? CHIP_HEIGHT : 0);
+  switch (placement) {
+    case "left":
+    case "right":
+      return baseY + (textAlignToSide ? CHIP_HEIGHT : -2);
+    default:
+      return baseY;
+  }
+}
+
 const ChartValueBox: FC<{
   x?: number | null;
   y?: number | null;
-  datum?: { y: number };
+  datum?: {
+    y: number;
+    placement?: Placement;
+  };
   isCursorActive: boolean;
   chartWidth: number;
   rightPadding: number;
@@ -20,6 +173,7 @@ const ChartValueBox: FC<{
   resolution?: Resolution | null;
   isDistributionChip?: boolean;
   questionType?: QuestionType;
+  textAlignToSide?: boolean;
 }> = (props) => {
   const { getThemeColor } = useAppTheme();
   const {
@@ -34,12 +188,13 @@ const ChartValueBox: FC<{
     resolution,
     isDistributionChip,
     questionType,
+    textAlignToSide,
   } = props;
-  const TEXT_PADDING = 4;
   const CHIP_OFFSET = !isNil(resolution) ? 8 : 0;
 
   const [textWidth, setTextWidth] = useState(0);
   const textRef = useRef<SVGTextElement>(null);
+  const placement = datum?.placement ?? "in";
   useEffect(() => {
     if (textRef.current) {
       setTextWidth(textRef.current.getBBox().width + TEXT_PADDING);
@@ -54,8 +209,6 @@ const ChartValueBox: FC<{
     isCursorActive || isDistributionChip
       ? x
       : chartWidth - rightPadding + textWidth / 2 + CHIP_OFFSET;
-  const chipHeight = 16;
-  const chipFontSize = 12;
   const hasResolution = !!resolution && !isCursorActive;
 
   return (
@@ -63,14 +216,15 @@ const ChartValueBox: FC<{
       {/* "RESOLVED" label above the chip for resolution values */}
       {hasResolution && questionType !== QuestionType.Binary && (
         <text
-          x={adjustedX}
-          y={y - chipHeight - 1 - (isDistributionChip ? chipHeight : 0)}
-          textAnchor="middle"
+          x={getResolvedX(placement, adjustedX, textAlignToSide)}
+          y={getResolvedY(placement, y, isDistributionChip, textAlignToSide)}
+          textAnchor={getTextAnchor(placement)}
           dominantBaseline="middle"
           fill={getThemeColor(METAC_COLORS.purple["800"])}
-          fontWeight="600"
+          fontWeight="650"
+          letterSpacing="0.02em"
           fontSize={11}
-          style={{ textTransform: "uppercase", letterSpacing: "0.5px" }}
+          style={{ textTransform: "uppercase" }}
         >
           RESOLVED
         </text>
@@ -78,10 +232,10 @@ const ChartValueBox: FC<{
 
       {/* Original chip background - unchanged */}
       <rect
-        x={adjustedX - textWidth / 2}
-        y={y - chipHeight / 2 - (isDistributionChip ? chipHeight : 0)}
+        x={getRectX(placement, adjustedX, textWidth, textAlignToSide)}
+        y={getRectY(placement, y, isDistributionChip, textAlignToSide)}
         width={textWidth}
-        height={chipHeight}
+        height={CHIP_HEIGHT}
         fill={
           isNil(colorOverride)
             ? getThemeColor(METAC_COLORS.olive["600"])
@@ -95,13 +249,14 @@ const ChartValueBox: FC<{
       {/* Original value text - unchanged */}
       <text
         ref={textRef}
-        x={adjustedX}
-        y={y + chipFontSize / 10 - (isDistributionChip ? chipHeight : 0)}
-        textAnchor="middle"
+        x={getTextX(placement, adjustedX, textAlignToSide)}
+        y={getTextY(placement, y, isDistributionChip, textAlignToSide)}
+        textAnchor={getTextAnchor(placement)}
         dominantBaseline="middle"
         fill={getThemeColor(METAC_COLORS.gray["0"])}
-        fontWeight="bold"
-        fontSize={chipFontSize}
+        fontWeight="650"
+        letterSpacing="0.02em"
+        fontSize={CHIP_FONT_SIZE}
       >
         {!!resolution && !isCursorActive
           ? resolution
diff --git a/front_end/src/components/charts/primitives/resolution_diamond.tsx b/front_end/src/components/charts/primitives/resolution_diamond.tsx
index f4e5791b80..02c866033d 100644
--- a/front_end/src/components/charts/primitives/resolution_diamond.tsx
+++ b/front_end/src/components/charts/primitives/resolution_diamond.tsx
@@ -1,13 +1,20 @@
 "use client";
+import { isNil } from "lodash";
 import React, { forwardRef, memo } from "react";
 
+import { METAC_COLORS } from "@/constants/colors";
+import useAppTheme from "@/hooks/use_app_theme";
 import { ThemeColor } from "@/types/theme";
 import cn from "@/utils/core/cn";
 
 export type DiamondDatum = {
-  placement: "in" | "below" | "above";
+  placement: "in" | "below" | "above" | "left" | "right";
   primary?: ThemeColor;
   secondary?: ThemeColor;
+  x?: number;
+  y?: number;
+  x1?: number;
+  y1?: number;
 };
 
 type Props = {
@@ -17,49 +24,97 @@ type Props = {
   axisPadPx?: number;
   hoverable?: boolean;
   isHovered?: boolean;
+  scale?: {
+    x: (x: number) => number;
+    y: (y: number) => number;
+  };
   refProps?: React.SVGProps<SVGGElement>;
-  rotateDeg?: number;
 };
 
+function getRotationDeg(placement: DiamondDatum["placement"]) {
+  switch (placement) {
+    case "left":
+      return 90;
+    case "right":
+      return -90;
+    case "below":
+      return 0;
+    case "above":
+      return 180;
+    default:
+      return 0;
+  }
+}
+
+function getAnchorX(
+  placement: DiamondDatum["placement"],
+  x: number,
+  axisPadPx: number
+) {
+  switch (placement) {
+    case "left":
+      return x - axisPadPx;
+    case "right":
+      return x + axisPadPx;
+    default:
+      return x;
+  }
+}
+
+function getAnchorY(
+  placement: DiamondDatum["placement"],
+  y: number,
+  axisPadPx: number
+) {
+  switch (placement) {
+    case "above":
+      return y - axisPadPx;
+    case "below":
+      return y + axisPadPx;
+    default:
+      return y;
+  }
+}
+
 const ResolutionDiamond = forwardRef<SVGGElement, Props>(function RD(
   {
     x,
     y,
     datum,
-    axisPadPx = 2,
+    axisPadPx = 5,
     hoverable = true,
     isHovered = false,
     refProps,
-    rotateDeg = 0,
+    scale,
   },
   ref
 ) {
+  const { getThemeColor } = useAppTheme();
   const d = (datum as DiamondDatum | undefined) ?? { placement: "in" };
   const { placement } = d;
-
   if (x == null || y == null) return null;
 
-  const anchorY =
-    placement === "above"
-      ? y - axisPadPx
-      : placement === "below"
-        ? y + axisPadPx
-        : y;
-
-  const baseTransform = `translate(${x}, ${anchorY}) rotate(${rotateDeg})`;
-
-  const bob = placement === "in" ? 5.5 : 4.0;
-  const values =
-    placement === "below"
-      ? `0,0;0,${bob};0,0`
-      : placement === "above"
-        ? `0,0;0,${-bob};0,0`
-        : `0,${-bob};0,${bob};0,${-bob}`;
-  const keyTimes = placement === "in" ? "0;0.5;1" : "0;0.825;1";
-  const keySplines =
-    placement === "in"
-      ? "0.25 0.1 0.25 1; 0.25 0.1 0.25 1"
-      : "0.25 0.1 0.25 1; 0.5 0 1 1";
+  const rotateDeg = getRotationDeg(placement);
+  const anchorY = getAnchorY(placement, y, axisPadPx);
+  const anchorX = getAnchorX(placement, x, axisPadPx);
+
+  const baseTransform = `translate(${anchorX}, ${anchorY}) rotate(${rotateDeg})`;
+
+  // Arrow color animation values
+  const lightColor = getThemeColor(
+    d.secondary ?? d.primary ? METAC_COLORS.gray[400] : METAC_COLORS.purple[500]
+  );
+  const darkColor = getThemeColor(d.primary ?? METAC_COLORS.purple[800]);
+
+  // Animation timing for 750ms duration (250ms each section):
+  // Arrow 1: dark from 0% to 33.3% (250ms), then light
+  // Arrow 2: light until 33.3%, dark from 33.3% to 66.7% (250ms), then light
+  // Both light: 66.7% to 100% (250ms pause)
+  const arrow1Values = `${darkColor};${darkColor};${lightColor};${lightColor}`;
+  const arrow1KeyTimes = "0;0.333;0.4;1";
+
+  const arrow2Values = `${lightColor};${lightColor};${darkColor};${darkColor};${lightColor};${lightColor}`;
+  const arrow2KeyTimes = "0;0.333;0.4;0.667;0.733;1";
 
   const HIT_W = 36;
   const HIT_H = 44;
@@ -67,57 +122,83 @@ const ResolutionDiamond = forwardRef<SVGGElement, Props>(function RD(
   const HIT_Y = -HIT_H / 2;
 
   return (
-    <g
-      ref={ref}
-      transform={baseTransform}
-      className={cn(hoverable && "res-diamond--hover")}
-      style={{
-        cursor: hoverable ? "pointer" : "default",
-        pointerEvents: "all",
-      }}
-      aria-label="Resolution marker"
-      {...refProps}
-    >
-      <g>
-        {!isHovered && (
-          <animateTransform
-            attributeName="transform"
-            type="translate"
-            dur="1.8s"
-            repeatCount="indefinite"
-            values={values}
-            keyTimes={keyTimes}
-            calcMode="spline"
-            keySplines={keySplines}
+    <>
+      {!isNil(scale) &&
+        !isNil(d.x) &&
+        !isNil(d.y) &&
+        !isNil(d.x1) &&
+        !isNil(d.y1) &&
+        Math.abs(d.y1 - d.y) > 0.1 && (
+          <line
+            x1={scale.x(d.x1)}
+            y1={scale.y(d.y1)}
+            x2={scale.x(d.x)}
+            y2={scale.y(d.y)}
+            stroke={darkColor}
+            strokeWidth={1}
+            strokeDasharray="2 2"
+            opacity={1}
           />
         )}
-
-        <rect
-          x={HIT_X}
-          y={HIT_Y}
-          width={HIT_W}
-          height={HIT_H}
-          fill="transparent"
-          pointerEvents="all"
-        />
-
-        <g transform="translate(-7,-12)">
-          <path
-            d="M12.2324 7L7 12.2324L1.76758 7L7 1.76758L12.2324 7Z"
-            strokeWidth={2.5}
-            className="fill-gray-0 stroke-purple-800 dark:fill-gray-0-dark dark:stroke-purple-800-dark"
-          />
-          <path
-            d="M6.53516 18.7148L1.28516 13.4648C1.01172 13.2188 1.01172 12.8086 1.28516 12.5352C1.53125 12.2891 1.94141 12.2891 2.21484 12.5352L7 17.3477L11.7852 12.5625C12.0312 12.2891 12.4414 12.2891 12.7148 12.5625C12.9609 12.8086 12.9609 13.2188 12.7148 13.4648L7.4375 18.7148C7.19141 18.9883 6.78125 18.9883 6.53516 18.7148Z"
-            className="fill-purple-500 dark:fill-purple-500-dark"
-          />
-          <path
-            d="M6.53516 23.7148L1.28516 18.4648C1.01172 18.2188 1.01172 17.8086 1.28516 17.5352C1.53125 17.2891 1.94141 17.2891 2.21484 17.5352L7 22.3477L11.7852 17.5625C12.0312 17.2891 12.4414 17.2891 12.7148 17.5625C12.9609 17.8086 12.9609 18.2188 12.7148 18.4648L7.4375 23.7148C7.19141 23.9883 6.78125 23.9883 6.53516 23.7148Z"
-            className="fill-purple-500 dark:fill-purple-500-dark"
+      <g
+        ref={ref}
+        transform={baseTransform}
+        style={{
+          cursor: hoverable ? "pointer" : "default",
+          pointerEvents: "all",
+        }}
+        aria-label="Resolution marker"
+        {...refProps}
+      >
+        <g>
+          <rect
+            x={HIT_X}
+            y={HIT_Y}
+            width={HIT_W}
+            height={HIT_H}
+            fill="transparent"
+            pointerEvents="all"
           />
+
+          <g transform="translate(-7,-12)">
+            <path
+              d="M12.2324 7L7 12.2324L1.76758 7L7 1.76758L12.2324 7Z"
+              strokeWidth={2.5}
+              stroke={darkColor}
+              className={cn("fill-gray-0 dark:fill-gray-0-dark")}
+            />
+            <path
+              d="M6.53516 18.7148L1.28516 13.4648C1.01172 13.2188 1.01172 12.8086 1.28516 12.5352C1.53125 12.2891 1.94141 12.2891 2.21484 12.5352L7 17.3477L11.7852 12.5625C12.0312 12.2891 12.4414 12.2891 12.7148 12.5625C12.9609 12.8086 12.9609 13.2188 12.7148 13.4648L7.4375 18.7148C7.19141 18.9883 6.78125 18.9883 6.53516 18.7148Z"
+              fill={isHovered ? darkColor : lightColor}
+            >
+              {!isHovered && (
+                <animate
+                  attributeName="fill"
+                  values={arrow1Values}
+                  keyTimes={arrow1KeyTimes}
+                  dur="1s"
+                  repeatCount="indefinite"
+                />
+              )}
+            </path>
+            <path
+              d="M6.53516 23.7148L1.28516 18.4648C1.01172 18.2188 1.01172 17.8086 1.28516 17.5352C1.53125 17.2891 1.94141 17.2891 2.21484 17.5352L7 22.3477L11.7852 17.5625C12.0312 17.2891 12.4414 17.2891 12.7148 17.5625C12.9609 17.8086 12.9609 18.2188 12.7148 18.4648L7.4375 23.7148C7.19141 23.9883 6.78125 23.9883 6.53516 23.7148Z"
+              fill={isHovered ? darkColor : lightColor}
+            >
+              {!isHovered && (
+                <animate
+                  attributeName="fill"
+                  values={arrow2Values}
+                  keyTimes={arrow2KeyTimes}
+                  dur="1s"
+                  repeatCount="indefinite"
+                />
+              )}
+            </path>
+          </g>
         </g>
       </g>
-    </g>
+    </>
   );
 });
 
diff --git a/front_end/src/components/post_card/question_tile/question_continuous_tile.tsx b/front_end/src/components/post_card/question_tile/question_continuous_tile.tsx
index 04f8ced4ed..d12ad3c97c 100644
--- a/front_end/src/components/post_card/question_tile/question_continuous_tile.tsx
+++ b/front_end/src/components/post_card/question_tile/question_continuous_tile.tsx
@@ -207,6 +207,7 @@ const QuestionContinuousTile: FC<Props> = ({
                 question={question}
                 hideCP={hideCP}
                 forceTickCount={3}
+                centerOOBResolution
               />
               <ForecastAvailabilityChartOverflow
                 forecastAvailability={forecastAvailability}
@@ -234,6 +235,7 @@ const QuestionContinuousTile: FC<Props> = ({
                 question={question}
                 hideCP={hideCP}
                 forceTickCount={3}
+                centerOOBResolution
               />
               <ForecastAvailabilityChartOverflow
                 forecastAvailability={forecastAvailability}
@@ -270,6 +272,7 @@ const QuestionContinuousTile: FC<Props> = ({
             question={question}
             hideCP={hideCP}
             forceTickCount={3}
+            centerOOBResolution
           />
           <ForecastAvailabilityChartOverflow
             forecastAvailability={forecastAvailability}